/* Project Atlas: final navigation and overlap consistency repair */
html{scroll-padding-top:110px}
body{overflow-x:hidden}

/* A consistent, readable navigation layer across public and learner pages */
.site-header,
.topbar,
header.top{
  position:sticky !important;
  top:12px !important;
  z-index:10000 !important;
  isolation:isolate;
  background:rgba(14,7,30,.88) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.30) !important;
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  backdrop-filter:blur(22px) saturate(135%);
}
.site-header{margin-bottom:0 !important}
.topbar{width:min(1240px,calc(100% - 28px));margin:12px auto 0;border-radius:18px;padding-inline:18px !important}
header.top{width:min(1240px,calc(100% - 28px));margin:12px auto 0;border-radius:18px;padding:12px 18px !important}
.site-header .main-nav,
.topbar .topbar-nav,
header.top .nav{align-items:center}
.site-header a,
.topbar a,
header.top a{white-space:nowrap}

/* Keep hero content below the navigation and in a separate layer */
.hero{position:relative;z-index:1}
.hero-copy{position:relative;z-index:2}
.hero-visual{position:relative;z-index:1;min-height:650px !important;padding-block:82px !important}
.hero-visual .main-card{z-index:2}
.hero-visual .glow{z-index:0;pointer-events:none}
.hero-visual .float-card{z-index:4}

/* Place supporting cards above and below the main journey card, not on top of it */
.hero-visual .float-b{top:10px !important;right:18px !important;bottom:auto !important}
.hero-visual .float-a{left:18px !important;bottom:10px !important;top:auto !important}

/* General protection against decorative overlap */
section,main,article,.panel,.card{min-width:0}
img,svg,video{max-width:100%;height:auto}

@media (max-width:1100px){
  .site-header{gap:18px !important}
  .main-nav{gap:15px !important}
  .hero{gap:42px !important}
  .hero-visual .float-b{right:4px !important}
  .hero-visual .float-a{left:4px !important}
}

@media (max-width:960px){
  .site-header,.topbar,header.top{top:8px !important}
  .hero-visual{min-height:620px !important;padding-block:76px !important}
  .hero-visual .float-b{top:8px !important;right:8px !important}
  .hero-visual .float-a{bottom:8px !important;left:8px !important}
}

@media (max-width:680px){
  html{scroll-padding-top:82px}
  .site-header,.topbar,header.top{
    top:0 !important;
    width:100% !important;
    margin:0 !important;
    border-radius:0 0 16px 16px !important;
    border-top:0 !important;
  }
  .main-nav.open{z-index:10002 !important;top:72px !important;box-shadow:0 24px 60px rgba(0,0,0,.48)}
  .hero{padding-top:64px !important}
  .hero-visual{min-height:545px !important;padding:60px 0 56px !important}
  .hero-visual .float-b{top:2px !important;right:2px !important;transform:scale(.92);transform-origin:top right}
  .hero-visual .float-a{bottom:2px !important;left:2px !important;transform:scale(.92);transform-origin:bottom left}
}

@media (max-width:480px){
  .hero-visual{min-height:520px !important;padding-block:52px !important}
  .hero-visual .float-b{display:none !important}
  .hero-visual .float-a{left:50% !important;transform:translateX(-50%) scale(.9) !important;white-space:nowrap}
}