:root{
  --c-dark:#100810; --c-blue:#202DA1; --c-blue-2:#2D82CD; --c-gold:#F3C90D; --c-brown:#AE702B; --c-gray:#B2ABAD;
  --rad:16px; --shadow:0 10px 24px rgba(0,0,0,.15);
  --font-head:"Bebas Neue", system-ui; --font-body:Inter, system-ui;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%; max-width:100%; overflow-x:hidden}
body{margin:0; font-family:var(--font-body); color:var(--c-dark); line-height:1.6; background:#fff}
img,svg{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}

/* ===== Layout ===== */
.container{max-width:1120px; margin:0 auto; padding-inline:clamp(1rem,4vw,60px)}
section{padding:56px 20px; padding-inline:clamp(16px,5vw,24px)}
.wrap{max-width:1120px; margin:0 auto; padding-inline:clamp(1rem,4vw,60px)}

/* ===== Typography ===== */
h2.section-title{font-family:var(--font-head); font-size:clamp(28px,3.5vw,40px); letter-spacing:.02em; margin:0 0 10px}
.copy h1{font-family:var(--font-head); font-size:clamp(36px,6vw,64px); line-height:.95; margin:6px 0; word-wrap:anywhere}
.muted{color:#555}
.badge{display:inline-block; padding:.35rem .7rem; border-radius:999px; background:var(--c-gold); color:#100810; font-weight:800; font-size:.78rem}
.meta{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
.activities{display:inline-block; padding:.35rem .7rem; border-radius:999px; background:var(--c-blue); color:#fff; font-weight:800; font-size:.78rem; transition:transform .2s}
.activities:hover{transform:translateY(-2px)}

/* ===== Navbar ===== */
.nav{position:sticky; top:0; z-index:999; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 20px; background:rgba(15,17,64,.85); color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.brand{font-family:var(--font-head); font-size:28px; letter-spacing:.04em}
.nav a.btn{margin:0; line-height:1; padding:.75rem .95rem}

.nav .nav-toggle{display:none; background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); border-radius:12px; padding:.4rem .6rem; font-size:1rem}
.nav .nav-links{display:flex; align-items:center; gap:8px; flex-wrap:nowrap; position:static}

/* Mobile navbar */
@media (max-width:988px){
  .nav .nav-toggle{display:inline-flex}
  .nav .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:10px; background:rgba(15,17,64,.95); padding:12px 16px; box-shadow:0 10px 24px rgba(0,0,0,.25); z-index:1000}
  .nav .nav-links.show{display:flex}
}

/* Spacing tweaks on wide/medium */
@media (max-width:1100px){
  .nav{padding-inline:clamp(12px,3vw,20px)}
  .nav a.btn{padding:.7rem .9rem}
}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.1rem; border-radius:var(--rad); font-weight:800; text-transform:uppercase; box-shadow:var(--shadow); transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--c-blue); color:#fff}
.btn-accent{background:var(--c-gold); color:#100810}
.btn-ghost{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6)}

/* ===== Hero ===== */
header.hero{position:relative; color:#fff; background:radial-gradient(120% 120% at 70% 10%, var(--c-blue-2) 0%, var(--c-blue) 55%, #0C1140 100%); overflow:hidden}
header .inner{display:grid; grid-template-columns:1.15fr .85fr; gap:32px; padding:48px 20px 80px; align-items:center; max-width:1120px; margin:0 auto}
.visual{justify-self:center}
.coach{width:min(480px,100%); height:auto; border-radius:var(--rad); box-shadow:var(--shadow)}
.skyline{position:absolute; inset:auto 0 0 0; height:140px; opacity:.25}

/* ===== Sections ===== */
.programs{background:#F7F8FF}
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}
.card{background:#fff; border-radius:var(--rad); box-shadow:var(--shadow); padding:18px}
.card h3{margin:6px 0 6px; font-size:1.25rem}
.card ul{margin:.25rem 0 1rem 1.1rem}

/* ===== CTA Strip ===== */
.cta-strip{background:linear-gradient(90deg, var(--c-blue) 0%, var(--c-blue-2) 100%); color:#fff; text-align:center; border-radius:var(--rad)}
.cta-strip .btn{margin-top:8px}

/* ===== Footer ===== */
footer{background:#0F102A; color:#C9D4FF; padding:32px 20px}
footer .brand{font-size:24px}

/* ===== Responsive content ===== */
@media (max-width:988px){
  header .inner{grid-template-columns:1fr; padding:28px 16px 48px}
  .about-grid,.inner{grid-template-columns:1fr !important; gap:18px}
  .visual{order:2}
  .copy, .about-grid>div{text-align:left}
  section{padding:36px 16px}
  .card{padding:14px}
}

@media (max-width:420px){
  .btn{padding:.7rem .9rem}
  .brand{font-size:22px}
}

/* ===== Quality-of-life ===== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }