/* dotry.ai unified navigation + mobile stability v8 */
:root{
  --bg:#080c12;--bg2:#0e1420;--bg3:#141c2e;
  --blue:#2563ff;--blue-light:#4d85ff;
  --text:#f0f4ff;--text-muted:#8894b0;
  --border:rgba(255,255,255,.08);--radius:18px;
}

.dotry-nav, .dotry-nav *,
.dotry-footer, .dotry-footer *,
.dotry-scroll-progress, .dotry-scroll-progress *{
  box-sizing:border-box !important;
}

.dotry-nav{
  position:fixed !important;
  top:0 !important;left:0 !important;right:0 !important;
  z-index:10000 !important;
  height:76px !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  column-gap:20px !important;
  padding:18px 48px !important;
  background:rgba(8,12,18,.94) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  border-bottom:1px solid var(--border) !important;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}

.dotry-logo{
  display:flex !important;
  align-items:center !important;
  text-decoration:none !important;
  justify-self:start !important;
  min-width:0 !important;
}
.dotry-logo img{
  height:40px !important;
  width:auto !important;
  display:block !important;
  max-width:none !important;
}

.dotry-nav-back{
  justify-self:end !important;
  color:var(--text-muted) !important;
  text-decoration:none !important;
  font-size:.86rem !important;
  font-weight:650 !important;
  white-space:nowrap !important;
  line-height:1 !important;
}
.dotry-nav-back:hover{color:var(--text) !important;}

.dotry-learning-wrap{
  position:relative !important;
  display:block !important;
  justify-self:center !important;
  z-index:10001 !important;
  margin:0 !important;padding:0 !important;
  left:auto !important;right:auto !important;top:auto !important;
  transform:none !important;
}
.dotry-learning-wrap summary{list-style:none !important;}
.dotry-learning-wrap summary::-webkit-details-marker{display:none !important;}

.dotry-learning-btn{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  background:var(--bg2) !important;
  border:1px solid var(--border) !important;
  border-radius:999px !important;
  padding:9px 18px !important;
  color:var(--text-muted) !important;
  font:700 .85rem 'Plus Jakarta Sans',system-ui,sans-serif !important;
  cursor:pointer !important;
  user-select:none !important;
  transition:border-color .2s,color .2s,background .2s !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
.dotry-learning-btn:hover{border-color:rgba(77,133,255,.45) !important;color:var(--text) !important;background:#111827 !important;}
.dotry-dd-arrow{font-size:.68rem !important;transition:transform .2s !important;opacity:.85 !important;}
.dotry-learning-wrap[open] .dotry-dd-arrow{transform:rotate(180deg) !important;}

.dotry-learning-menu{
  position:absolute !important;
  top:calc(100% + 10px) !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:380px !important;
  max-width:min(92vw,380px) !important;
  max-height:min(72vh,640px) !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  background:rgba(14,20,32,.985) !important;
  border:1px solid rgba(37,99,255,.24) !important;
  border-radius:18px !important;
  box-shadow:0 24px 70px rgba(0,0,0,.62) !important;
  padding:8px !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin !important;
}
.dotry-learning-menu::-webkit-scrollbar{width:6px !important;}
.dotry-learning-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18) !important;border-radius:999px !important;}

.dotry-menu-label{
  padding:10px 10px 6px !important;
  font-size:.64rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:var(--text-muted) !important;
  line-height:1.2 !important;
  opacity:.95 !important;
}
.dotry-menu-label.hub{color:#a78bfa !important}.dotry-menu-label.green{color:#22c55e !important}.dotry-menu-label.blue{color:var(--blue-light) !important}.dotry-menu-label.orange{color:#f97316 !important}

.dotry-menu-item{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:10px 12px !important;
  border-radius:13px !important;
  color:var(--text) !important;
  text-decoration:none !important;
  transition:background .15s !important;
  line-height:1.25 !important;
  margin:0 !important;
}
.dotry-menu-item:hover{background:rgba(37,99,255,.10) !important;}
.dotry-menu-num{
  width:31px !important;height:31px !important;
  border-radius:10px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  flex-shrink:0 !important;
  font-size:.72rem !important;font-weight:800 !important;
  border:1px solid rgba(255,255,255,.07) !important;
}
.dotry-menu-num.hub{background:rgba(168,85,247,.12) !important;color:#c4b5fd !important}.dotry-menu-num.green{background:rgba(34,197,94,.10) !important;color:#22c55e !important}.dotry-menu-num.blue{background:rgba(37,99,255,.15) !important;color:var(--blue-light) !important}.dotry-menu-num.orange{background:rgba(249,115,22,.10) !important;color:#f97316 !important}
.dotry-menu-item strong{display:block !important;font-size:.86rem !important;font-weight:750 !important;line-height:1.22 !important;color:var(--text) !important;margin:0 !important;}
.dotry-menu-item small{display:block !important;margin-top:2px !important;font-size:.72rem !important;line-height:1.25 !important;color:var(--text-muted) !important;}

.dotry-scroll-progress,
.progress-bar{
  position:fixed !important;
  top:76px !important;
  left:0 !important;right:0 !important;
  height:3px !important;
  background:rgba(255,255,255,.06) !important;
  z-index:9999 !important;
  pointer-events:none !important;
}
.dotry-scroll-progress-fill,
.progress-fill{
  display:block !important;
  height:100% !important;
  width:0%;
  background:linear-gradient(90deg,var(--blue),var(--blue-light)) !important;
  transition:width .08s linear !important;
}

/* Cookie / consent banners must stay clickable above nav and progress bars */
.cookie-banner,
#cookie-banner,
.cookie-consent,
.cc-window,
.cky-consent-container,
.cookiebot,
#CybotCookiebotDialog,
.fc-consent-root,
.googlefc-present,
.googlefc-dialog,
[class*="cookie" i][class*="banner" i],
[class*="consent" i][class*="banner" i]{
  z-index:2147483647 !important;
  pointer-events:auto !important;
}

.dotry-footer{
  border-top:1px solid var(--border) !important;
  padding:32px 48px !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  gap:20px !important;
  color:var(--text-muted) !important;
  font-size:.85rem !important;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif !important;
  background:transparent !important;
}
.dotry-footer-logo{justify-self:start !important;display:flex !important;align-items:center !important;text-decoration:none !important;}
.dotry-footer-logo img{height:28px !important;width:auto !important;display:block !important;}
.dotry-footer-copy{justify-self:center !important;text-align:center !important;white-space:nowrap !important;}
.dotry-footer-links{justify-self:end !important;display:flex !important;gap:20px !important;align-items:center !important;flex-wrap:wrap !important;justify-content:flex-end !important;}
.dotry-footer a{color:var(--text-muted) !important;text-decoration:none !important;transition:color .2s !important;}
.dotry-footer a:hover{color:var(--text) !important;}

@media(max-width:760px){
  .dotry-nav{
    height:72px !important;
    padding:14px 18px !important;
    column-gap:12px !important;
    grid-template-columns:1fr auto !important;
  }
  .dotry-logo{justify-self:start !important;}
  .dotry-logo img{height:32px !important;}
  .dotry-learning-wrap{justify-self:end !important;}
  .dotry-nav-back{display:none !important;}
  .dotry-learning-btn{padding:8px 13px !important;font-size:.78rem !important;}
  .dotry-learning-menu{
    position:fixed !important;
    top:82px !important;
    left:12px !important;
    right:12px !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - 100px) !important;
  }
  .dotry-scroll-progress,.progress-bar{top:72px !important;}
  .dotry-footer{grid-template-columns:1fr !important;text-align:center !important;padding:30px 24px !important;gap:14px !important;}
  .dotry-footer-logo,.dotry-footer-copy,.dotry-footer-links{justify-self:center !important;}
  .dotry-footer-links{justify-content:center !important;gap:14px 18px !important;}
}

@media(max-width:430px){
  .dotry-nav{padding:14px 14px !important;}
  .dotry-logo img{height:30px !important;}
  .dotry-learning-btn{padding:8px 12px !important;font-size:.75rem !important;}
  .dotry-learning-menu{top:82px !important;left:10px !important;right:10px !important;max-height:calc(100dvh - 98px) !important;}
}