:root{
  --bg:#0a0e1c; --bg2:#0e1428; --panel:#121a33; --line:#243156;
  --ink:#eaf0ff; --mut:#9fb0d6; --blue:#3b82f6; --blue2:#60a5fa; --gold:#ffcd46;
  --grad:linear-gradient(135deg,#3b82f6,#7c5cff);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:Archivo,system-ui,sans-serif;letter-spacing:-.02em}
a{color:var(--blue2);text-decoration:none}
section{scroll-margin-top:64px}

/* NAV */
#nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:.7rem 1.2rem;background:rgba(10,14,28,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#nav .brand{font-weight:900;font-size:1rem;letter-spacing:.02em}
#nav .brand em{color:var(--blue2);font-style:normal}
#nav .links{display:flex;gap:1.1rem;align-items:center;font-size:.92rem}
#nav .links a{color:var(--mut)}#nav .links a:hover{color:#fff}
.cta-mini{background:var(--blue);color:#fff!important;padding:.35rem .8rem;border-radius:8px}

/* HERO */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('/img/hero_action.jpg') center/cover;
  filter:saturate(1.1) brightness(.55)}
.hero-bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,14,28,.96) 0%,rgba(10,14,28,.7) 45%,rgba(10,14,28,.25) 100%),
  linear-gradient(0deg,var(--bg),transparent 40%)}
.hero-inner{position:relative;padding:2rem 1.4rem;max-width:880px;margin:0 6vw}
.eyebrow{color:var(--blue2);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem}
.hero h1{font-size:clamp(3.4rem,11vw,7rem);font-weight:900;line-height:.92;margin:.4rem 0}
.hero .tag{max-width:540px;color:#d7e0f5;font-size:1.12rem;margin:.6rem 0 1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.chips span{background:rgba(59,130,246,.13);border:1px solid var(--line);padding:.4rem .75rem;border-radius:999px;font-size:.86rem;color:#cfe0ff}
.chips b{color:#fff}
.cta{display:flex;gap:.7rem;flex-wrap:wrap}
.btn{padding:.8rem 1.3rem;border-radius:10px;border:1px solid var(--line);color:#fff;font-weight:600;transition:.15s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--grad);border:none}
.greet{margin-top:1.3rem;color:var(--mut);font-size:.9rem}
.greet strong{color:var(--gold)}

/* SECTIONS */
.sec{padding:4.5rem 6vw;max-width:1200px;margin:0 auto}
.sec.alt{background:var(--bg2);max-width:none}
.sec.alt>*{max-width:1200px;margin-left:auto;margin-right:auto}
.sec h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;margin-bottom:.4rem}
.sec h2:after{content:"";display:block;width:54px;height:4px;background:var(--grad);border-radius:3px;margin-top:.6rem}
.lead{color:var(--mut);max-width:680px;margin:.8rem 0 1.8rem;font-size:1.05rem}
.hl{color:var(--gold);font-weight:600}

/* FILM */
.film-main video{width:100%;border-radius:14px;border:1px solid var(--line);background:#000;aspect-ratio:16/9}
.cap{color:var(--mut);margin:.5rem 0 0;font-size:.9rem}
.film-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1.6rem}
.film-grid video{width:100%;border-radius:10px;background:#000;aspect-ratio:16/9;border:1px solid var(--line)}
.film-grid figcaption{color:var(--mut);font-size:.85rem;margin-top:.4rem;text-align:center}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.4rem;text-align:center}
.card .n{font-family:Archivo;font-weight:900;font-size:2.3rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.card .l{color:var(--mut);font-size:.85rem;margin-top:.3rem}
.badge-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.badge{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.7rem 1rem;font-size:.92rem;color:#dbe6ff}
.badge.gold{border-color:rgba(255,205,70,.5);color:var(--gold)}

/* HER GAME */
.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:1rem}
.vizcol h3{font-size:1.15rem;margin-bottom:.2rem}
.vizcol .sub{color:var(--mut);font-size:.9rem;margin-bottom:.8rem}
.court{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.note{color:var(--gold);font-style:italic;font-size:.9rem;margin-top:.6rem}
.strengths{margin-top:1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.6rem}
.strengths h3{margin-bottom:.7rem}
.strengths ul{list-style:none;display:grid;gap:.6rem}
.strengths li{padding-left:1.4rem;position:relative;color:#dbe6ff}
.strengths li:before{content:"▸";position:absolute;left:0;color:var(--blue2)}
.strengths b{color:#fff}

/* STORY */
.story{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.story>div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.story h3{color:var(--blue2);margin-bottom:.5rem;font-size:1.1rem}
.story p{color:#cfdaf2;font-size:.97rem}

/* CONTACT */
.contact{text-align:center}
.contact h2:after{margin-left:auto;margin-right:auto}
.contacts{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.ccard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.6rem 2.2rem;min-width:240px;display:flex;flex-direction:column;gap:.3rem}
.ccard .role{color:var(--gold);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
.ccard .cname{font-family:Archivo;font-weight:700;font-size:1.25rem;margin-bottom:.3rem}
.ccard a{font-size:1rem}
.foot{color:var(--mut);font-size:.82rem;margin-top:2rem}

/* reveal — content is ALWAYS visible; JS only adds a gentle entrance */
.sec{transition:opacity .6s,transform .6s}
body.js .sec{opacity:0;transform:translateY(18px)}
body.js .sec.in{opacity:1;transform:none}
@media(max-width:640px){#nav .links a:not(.cta-mini){display:none}.hero-inner{margin:0 5vw}}