:root{--yellow:#FFD300;--navy:#0B1F3A;--navy-900:#061226;--white:#fff;--ink:#0f1115;--card:rgba(255,255,255,.06);--bd:rgba(255,255,255,.12)}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--white);background:linear-gradient(180deg,var(--navy) 0%, var(--navy-900) 100%);min-height:100vh;display:flex;flex-direction:column}
.wrap{width:min(1080px,92%);margin-inline:auto}a{color:var(--yellow);text-decoration:none}
header{padding:18px 0}.brand{display:flex;align-items:center;gap:12px;color:var(--white);text-decoration:none}
.brand .badge{width:48px;height:48px;border-radius:12px;background:var(--yellow);display:grid;place-items:center}
.brand .title{display:flex;flex-direction:column;line-height:1.05}.brand .name{font-weight:800;letter-spacing:.2px}
.brand .slogan{font-weight:600;opacity:.9;font-size:.9rem}nav ul{list-style:none;padding:0;margin:10px 0 0;display:flex;gap:12px;flex-wrap:wrap}
nav a.btn{display:inline-block;padding:10px 12px;border-radius:10px;border:1px solid var(--bd);color:var(--white)}
.hero{padding:28px 0}h1{margin:.3rem 0 .5rem;font-size:clamp(1.8rem,2.2rem + 1vw,3rem)}
.lead{opacity:.9;margin:0 0 12px}.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{--bg:var(--yellow);--fg:#151515;--bd:transparent;display:inline-flex;gap:8px;align-items:center;padding:12px 14px;border-radius:12px;border:2px solid var(--bd);background:var(--bg);color:var(--fg);font-weight:800}
.btn.outline{--bg:transparent;--fg:var(--white);--bd:var(--bd)}.grid{display:grid;gap:14px;grid-template-columns:1fr}
.card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:16px}.card h3{margin:.2rem 0 .2rem}
footer{margin-top:auto;padding:24px 0 36px;color:rgba(255,255,255,.85)}.foot{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:860px){.grid-2{grid-template-columns:1fr 1fr}nav ul{justify-content:flex-end}.foot{grid-template-columns:1fr auto}}
form label{display:block;margin:8px 0 4px}input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--bd);background:rgba(255,255,255,.06);color:#fff}

/* mobile header tweak */
@media (max-width: 480px){
  header { padding: 10px 0; }
  .brand .badge { width:44px; height:44px; border-radius:10px; padding:0; background:transparent }
  .brand .badge img { height:40px; width:auto; display:block }
  .brand .title .name { font-size:1.05rem }
  .brand .slogan { font-size:.78rem }
  nav a.btn { padding:10px 12px; border-radius:14px }
  .hero { padding:16px 0 }
}

/* sticky header & hamburger */
header{position:sticky; top:0; z-index:1000; background:linear-gradient(180deg,var(--navy) 0%, var(--navy-900) 100%); box-shadow:0 6px 20px rgba(0,0,0,.22)}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.nav-inline{display:flex; gap:10px; flex-wrap:wrap}
.enroll{background:var(--yellow); color:#151515 !important; border:2px solid transparent; font-weight:900}
.hamburger{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--bd); background:rgba(255,255,255,.06); color:#fff}
.hamburger span{display:block; width:22px; height:2px; background:#fff; margin:5px auto; border-radius:2px}
.mobile-panel{display:none; position:fixed; inset:64px 0 0; background:linear-gradient(180deg,var(--navy) 0%, var(--navy-900) 100%); padding:14px; overflow:auto}
.mobile-panel.open{display:block; animation:slide .2s ease-out}
@keyframes slide{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}
.mobile-panel .btn{display:block; width:100%; text-align:center; margin-bottom:10px}
@media (max-width:860px){
  nav ul{display:none}
  .hamburger{display:inline-grid; place-items:center}
}
/* === Sticky header + hamburger (final) === */
header{position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-900) 100%);
  box-shadow:0 6px 20px rgba(0,0,0,.22)}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.nav-inline{display:flex; gap:10px; flex-wrap:wrap}
.enroll{background:var(--yellow); color:#151515 !important; border:2px solid transparent; font-weight:900}

/* hamburger visible on mobile */
.hamburger{display:inline-grid; place-items:center; width:42px; height:42px;
  border-radius:10px; border:1px solid var(--bd);
  background:rgba(255,255,255,.06); color:#fff; position:relative; z-index:1101}
.hamburger span{display:block; width:22px; height:2px; background:#fff; margin:5px auto; border-radius:2px}

/* mobile panel + blur + close button */
.mobile-panel{display:none; position:fixed; left:0; right:0; top:64px; bottom:0;
  background: rgba(6,18,38,0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding:14px; overflow:auto; z-index:1100}
.mobile-panel.open{display:block; animation:slide .2s ease-out}
@keyframes slide{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}
.mobile-panel .btn{display:block; width:100%; text-align:center; margin-bottom:10px}
.mobile-panel .panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.mobile-panel .close{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:10px;
  border:1px solid var(--bd); background:rgba(255,255,255,.06); color:#fff; font-size:20px; line-height:1}

/* responsive behavior */
@media (min-width:861px){
  .hamburger{display:none}
  .mobile-panel{display:none !important}
}
@media (max-width:860px){
  nav ul{display:none} /* hide desktop links on mobile */
}

/* === Sticky header + hamburger (final) === */
header{position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-900) 100%);
  box-shadow:0 6px 20px rgba(0,0,0,.22)}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.nav-inline{display:flex; gap:10px; flex-wrap:wrap}
.enroll{background:var(--yellow); color:#151515 !important; border:2px solid transparent; font-weight:900}

/* hamburger button */
.hamburger{display:inline-grid; place-items:center; width:42px; height:42px;
  border-radius:10px; border:1px solid var(--bd);
  background:rgba(255,255,255,.06); color:#fff; position:relative; z-index:1101}
.hamburger span{display:block; width:22px; height:2px; background:#fff; margin:5px auto; border-radius:2px}
body.menu-open .hamburger{opacity:0; pointer-events:none}  /* hide hamburger when panel is open */

/* mobile panel + blur + close */
.mobile-panel{position:fixed; left:0; right:0; bottom:0; /* top set via JS for exact header height */
  background:rgba(6,18,38,0.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:14px; overflow:auto; z-index:1100}
.mobile-panel[hidden]{display:none}
.mobile-panel.open{display:block; animation:slide .2s ease-out}
@keyframes slide{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}
.mobile-panel .btn{display:block; width:100%; text-align:center; margin-bottom:10px}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.close{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:10px;
  border:1px solid var(--bd); background:rgba(255,255,255,.06); color:#fff; font-size:20px; line-height:1}
/* === Sticky header + hamburger (final clean) === */
header{position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-900) 100%);
  box-shadow:0 6px 20px rgba(0,0,0,.22)}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.nav-inline{display:flex; gap:10px; flex-wrap:wrap}
.enroll{background:var(--yellow); color:#151515 !important; border:2px solid transparent; font-weight:900}

/* hamburger (mobile) */
.hamburger{display:inline-grid; place-items:center; width:42px; height:42px;
  border-radius:10px; border:1px solid var(--bd);
  background:rgba(255,255,255,.06); color:#fff; position:relative; z-index:1101}
.hamburger span{display:block; width:22px; height:2px; background:#fff; margin:5px auto; border-radius:2px}
body.menu-open .hamburger{opacity:0; pointer-events:none}

/* mobile panel (full width, centered buttons) */
.mobile-panel{
  position:fixed; left:0; right:0; bottom:0; /* top set via JS */
  background:rgba(6,18,38,0.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:14px; overflow:auto; z-index:1100
}
.mobile-panel[hidden]{display:none}
.mobile-panel.open{display:block; animation:slide .2s ease-out}
@keyframes slide{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}
.mobile-panel .panel-head{display:flex; align-items:center; justify-content:space-between; margin:2px 0 12px}
.mobile-panel .close{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:10px;
  border:1px solid var(--bd); background:rgba(255,255,255,.06); color:#fff; font-size:20px; line-height:1}
.mobile-panel .btn{display:block; width:100%; max-width:320px; margin:10px auto}

/* responsive */
@media (min-width:861px){ .hamburger{display:none} .mobile-panel{display:none !important} }
@media (max-width:860px){ nav ul{display:none} }

/* iOS fix: lock background when open */
body.no-scroll{height:100vh; overflow:hidden}

/* === Sticky header + hamburger (final clean) === */
header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-900) 100%);
  box-shadow:0 6px 20px rgba(0,0,0,.22)
}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.nav-inline{display:flex; gap:10px; flex-wrap:wrap}
.enroll{background:var(--yellow); color:#151515 !important; border:2px solid transparent; font-weight:900}

/* hamburger (mobile) */
.hamburger{
  display:inline-grid; place-items:center; width:42px; height:42px;
  border-radius:10px; border:1px solid var(--bd);
  background:rgba(255,255,255,.06); color:#fff; position:relative; z-index:1101
}
.hamburger span{display:block; width:22px; height:2px; background:#fff; margin:5px auto; border-radius:2px}
body.menu-open .hamburger{opacity:0; pointer-events:none}

/* mobile panel (full width, centered buttons) */
.mobile-panel{
  position:fixed; left:0; right:0; bottom:0; /* top set via JS */
  background:rgba(6,18,38,0.86);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:14px; overflow:auto; z-index:1100
}
.mobile-panel[hidden]{display:none}
.mobile-panel.open{display:block; animation:slide .2s ease-out}
@keyframes slide{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}
.mobile-panel .panel-head{display:flex; align-items:center; justify-content:space-between; margin:2px 0 12px}
.mobile-panel .close{
  display:inline-grid; place-items:center; width:42px; height:42px; border-radius:10px;
  border:1px solid var(--bd); background:rgba(255,255,255,.06); color:#fff; font-size:20px; line-height:1
}
.mobile-panel .btn{display:block; width:100%; max-width:320px; margin:10px auto}

/* responsive */
@media (min-width:861px){ .hamburger{display:none} .mobile-panel{display:none !important} }
@media (max-width:860px){ nav ul{display:none} }

/* iOS fix: lock background when open */
body.no-scroll{height:100vh; overflow:hidden}

/* ===== EMERGENCY MOBILE OVERRIDE (forces desktop nav to hide) ===== */
@media (max-width: 900px){
  header nav .nav-inline { display: none !important; }
  .hamburger { display: inline-grid !important; }
}

/* When the mobile menu is open, also hide any stray navs */
body.menu-open header nav .nav-inline { display: none !important; }