/* Homepage refinement layer (2026-10-09). Loaded after index.html's inline styles.
   Two jobs:
   1. Speed. The page was janky while scrolling because every card had a live backdrop blur,
      three large blurred orbs were animating forever, and each reveal animated a blur filter.
      Those are replaced with flat surfaces and static gradients that look the same at rest.
   2. Look. One motion curve, hairline borders, larger radii, calmer type, in the same style as
      the academy and the admin. */

:root{
  --ease:cubic-bezier(.32,.72,0,1);
  --hair:rgba(255,255,255,.08);
  --hair-strong:rgba(255,255,255,.14);
  --surface:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));
  --solid:#0c1422;
  --lift:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px -24px rgba(0,0,0,.75);
  --green:#30d68b;
}
html{background:#05090f}
body{background:#05090f;letter-spacing:-.006em}
:is(a,button,input,textarea,[tabindex]):focus-visible{outline:2px solid rgba(48,214,139,.85);outline-offset:3px;border-radius:8px}

/* ── Speed: remove the expensive effects ─────────────────── */
.card{backdrop-filter:none;-webkit-backdrop-filter:none}
.btn-o{backdrop-filter:none;-webkit-backdrop-filter:none}
.hero::before,.hero::after,.kairos-wrap::before,.waitlist-sec::before,.waitlist-sec::after,footer::after{animation:none;filter:none;display:none}
.reveal,.reveal.in-view{filter:none}
.hero h1 em{animation:none;background-size:100% auto}
.hero-bg img{will-change:opacity}
/* Sections far below the fold are not laid out or painted until they are near the screen. */
#bootcamp,#blog,#community,#faq,#waitlist,footer{content-visibility:auto;contain-intrinsic-size:auto 760px}

/* ── Header ──────────────────────────────────────────────── */
header{background:rgba(6,11,19,.62)!important;border-bottom:1px solid var(--hair);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px)}
header::after{display:none}
header.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.nav-links{gap:4px}
.nav-links a{padding:7px 12px;border-radius:999px;color:#b4c3d3;transition:background-color .25s var(--ease),color .25s var(--ease)}
.nav-links a:hover{background:rgba(255,255,255,.07);color:#fff}
.logo-mark{border-radius:10px}

/* ── Hero ────────────────────────────────────────────────── */
.hero{background:#05090f}
.hero-bg{background:#05090f}
.hero-scrim{background:linear-gradient(100deg,#05090f 28%,rgba(5,9,15,.9) 48%,rgba(5,9,15,.55) 70%,rgba(5,9,15,.3) 100%),linear-gradient(0deg,#05090f 0%,rgba(5,9,15,0) 24%)}
.hero h1{letter-spacing:-.045em}
.hero>.wrap>div>*{animation:homeRise .9s var(--ease) both}
.hero>.wrap>div>*:nth-child(2){animation-delay:.08s}
.hero>.wrap>div>*:nth-child(3){animation-delay:.16s}
.hero>.wrap>div>*:nth-child(4){animation-delay:.24s}
.hero>.wrap>div>*:nth-child(n+5){animation-delay:.32s}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{border-radius:13px;padding:13px 22px;transition:transform .25s var(--ease),filter .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.btn-g{background:linear-gradient(180deg,#3fe59c,#24c47c);color:#04140c;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 24px -12px rgba(48,214,139,.9)}
.btn-g:hover{background:linear-gradient(180deg,#55eeaa,#2bd086);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 14px 30px -12px rgba(48,214,139,.95)}
.btn-g::after{display:none}
.btn-o{background:rgba(255,255,255,.06);border-color:var(--hair);color:#fff}
.btn-o:hover{background:rgba(255,255,255,.11);border-color:var(--hair-strong);color:#fff}
.btn:active,.car-btn:active,.blog-view-all:active{transform:scale(.97)}
.car-btn:active{transform:translateY(-50%) scale(.94)}

/* ── Surfaces ────────────────────────────────────────────── */
.card,.blog-card-home,.carousel-slide{border:1px solid var(--hair);border-radius:20px;background:var(--surface),var(--solid);box-shadow:var(--lift);transition:transform .45s var(--ease),border-color .45s var(--ease)}
.card::before{display:none}
.card:hover,.bc:hover,.blog-card-home:hover,.faq-item:hover{transform:translateY(-3px);border-color:var(--hair-strong);box-shadow:var(--lift)}
.bc{padding:26px}
.bc-icon{border-radius:12px;background:rgba(48,214,139,.12);border-color:rgba(48,214,139,.24);color:var(--green)}
.bc h3{font-size:17.5px;letter-spacing:-.015em}
.bc p{font-size:14px;color:#a9b9ca}
.bc.feat{background:linear-gradient(180deg,rgba(48,214,139,.1),rgba(48,214,139,.02)),var(--solid);border-color:rgba(48,214,139,.24)}
.carousel-slide{border-radius:20px}
.car-btn{border:1px solid var(--hair-strong);background:rgba(10,16,27,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;transition:background-color .25s var(--ease),transform .25s var(--ease)}
.car-btn:hover{background:rgba(255,255,255,.14)}
.car-dot{background:rgba(255,255,255,.16);transition:width .45s var(--ease),background-color .3s var(--ease)}
.car-dot.active{background:var(--green)}
.blog-card-img img{transition:transform .8s var(--ease)}
.blog-card-home:hover .blog-card-img img{transform:scale(1.05)}
.blog-view-all{border:1px solid var(--hair);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;padding:9px 16px;transition:background-color .25s var(--ease),transform .25s var(--ease)}
.blog-view-all:hover{background:rgba(255,255,255,.12)}

/* ── Sections and type ───────────────────────────────────── */
.sec-h{letter-spacing:-.04em}
.sec-p{color:#a9b9ca}
#kairos-proof{background:#070c14!important;border-color:var(--hair)!important}
.stats-band::before,.press-bar::before,footer::before{background:var(--hair)}

/* FAQ: smoother open and close */
.faq-item{padding:20px 24px;border-radius:18px}
.faq-item.open{background:linear-gradient(180deg,rgba(48,214,139,.07),rgba(48,214,139,.015)),var(--solid);border-color:rgba(48,214,139,.24)}
.faq-arrow{transition:transform .45s var(--ease)}
.faq-a{transition:max-height .5s var(--ease),padding .4s var(--ease),opacity .35s ease;opacity:0}
.faq-item.open .faq-a{opacity:1}

/* Forms */
.wl-input{background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:13px;font-size:16px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}
.wl-input:focus{border-color:rgba(48,214,139,.65);box-shadow:0 0 0 4px rgba(48,214,139,.13);background:rgba(255,255,255,.07)}
.waitlist-sec{background:radial-gradient(700px 320px at 50% 0%,rgba(48,214,139,.1),transparent 70%)}
.sc{border:1px solid var(--hair);border-radius:11px;background:rgba(255,255,255,.04);transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.sc:hover{background:rgba(255,255,255,.1);color:#fff;border-color:var(--hair-strong)}
.cookie-banner{left:16px;right:16px;bottom:16px;border:1px solid var(--hair-strong);border-radius:18px;background:rgba(14,22,36,.86);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:0 30px 70px -24px rgba(0,0,0,.9);transform:translateY(calc(100% + 24px));transition:transform .6s var(--ease)}
.cookie-banner.show{transform:none}

/* ── Motion ──────────────────────────────────────────────── */
@keyframes homeRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.reveal{transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in-view{transform:none}
[class*="card"],.trust-item,.tl-item{transition:transform .45s var(--ease),border-color .45s var(--ease)}

@media(max-width:560px){
  .faq-item{padding:18px}
  .cookie-banner{left:10px;right:10px;bottom:10px}
}
/* Reduced motion: nothing slides or zooms, but content still fades in. */
@media(prefers-reduced-motion:reduce){
  @keyframes homeRise{from{opacity:0}to{opacity:1}}
  .reveal{opacity:0!important;transform:none!important;transition:opacity .6s ease!important}
  .reveal.in-view{opacity:1!important}
  .card:hover,.bc:hover,.blog-card-home:hover,.faq-item:hover,.btn-g:hover{transform:none}
}

/* ── Centred hero with an animated wordmark ──────────────── */
.hero{padding:0;min-height:min(86vh,760px);display:flex;align-items:center}
.hero>.wrap{width:100%;padding-top:96px;padding-bottom:88px}
.hero-center{max-width:780px;margin:0 auto;text-align:center}
.hero-scrim{background:radial-gradient(900px 520px at 50% 42%,rgba(5,9,15,.5),rgba(5,9,15,.82) 70%),linear-gradient(180deg,rgba(5,9,15,.7) 0%,rgba(5,9,15,.5) 45%,#05090f 100%)}
.hero h1{animation:none;margin-bottom:22px;font-size:clamp(64px,13vw,150px);line-height:.92;letter-spacing:-.055em}
.kword{position:relative;display:inline-block}
/* soft glow that breathes behind the word (opacity only, so it costs nothing to animate) */
.kword::before{content:"";position:absolute;left:50%;top:54%;width:130%;height:150%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(48,214,139,.34),rgba(64,132,255,.12) 55%,transparent 75%);opacity:0;animation:kGlowIn 1.4s .7s var(--ease) forwards,kGlow 6s 2.1s ease-in-out infinite;pointer-events:none;z-index:-1}
.kword-in{display:inline-block;white-space:nowrap}
.kword-in>span{display:inline-block;opacity:0;transform:translateY(.42em) scale(.92);animation:kLetter .9s calc(.12s + var(--i) * .07s) var(--ease) forwards}
.kword-in>.kdot{color:var(--green);animation:kLetter .9s calc(.12s + var(--i) * .07s) var(--ease) forwards,kDot 3.2s 1.8s ease-in-out infinite;transform-origin:50% 80%}
.hero-tag{display:block;margin-top:.34em;font-size:clamp(22px,3.6vw,40px);line-height:1.1;letter-spacing:-.035em;font-weight:700;background:linear-gradient(120deg,#5df0b0,#30d68b 50%,#7fb6ff);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;animation:homeRise .9s .62s var(--ease) forwards}
.hero .hero-sub{max-width:560px;margin-left:auto;margin-right:auto;font-size:17.5px;line-height:1.6;color:#c3d0dd;animation-delay:.74s}
.hero .hero-btns{justify-content:center;margin-bottom:0;animation-delay:.86s}
@keyframes kLetter{to{opacity:1;transform:none}}
@keyframes kGlowIn{to{opacity:.9}}
@keyframes kGlow{0%,100%{opacity:.9}50%{opacity:.45}}
@keyframes kDot{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
@media(max-width:900px){
  .hero{min-height:0}
  .hero>.wrap{padding-top:72px;padding-bottom:64px}
  .hero-scrim{background:linear-gradient(180deg,rgba(5,9,15,.72) 0%,rgba(5,9,15,.7) 55%,#05090f 100%)}
}
@media(max-width:540px){
  .hero .hero-btns{flex-direction:column;align-items:stretch}
  .hero .hero-sub{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .kword-in>span,.kword-in>.kdot{transform:none;animation:homeRise .7s calc(.1s + var(--i) * .05s) ease forwards}
  .kword::before{animation:kGlowIn 1s .4s ease forwards}
}