/* Kasvu marketing site. Tokens follow the Kasvu design system. */
:root{
  --night:#0f1b2d;--page:#f1f3f7;--card:#ffffff;--ink:#14171f;--muted:#4a5263;
  --border:#8a93a6;--soft:#e2e5ec;--sunken:#e9ecf1;
  --fjord:#3f62c2;--fjord-hover:#2f50ab;--teal:#1f8f9c;--heather:#8456c4;--amber:#e3a12f;
  --lichen:#4f9a5e;--lingonberry:#d9596a;
  --heat-0:#e6edfb;--heat-1:#b4c7f0;--heat-2:#3f62c2;--heat-3:#1b2f6e;--moved:#b45309;
  --display:"Space Grotesk",system-ui,sans-serif;--body:"Atkinson Hyperlegible",system-ui,sans-serif;
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--body);font-size:18px;line-height:1.5;color:var(--ink);background:var(--page);overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;line-height:1.15;letter-spacing:-0.015em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--fjord)}
a:hover{color:#2b4796}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 40px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.dark a:focus-visible,.dark button:focus-visible{outline-color:#ffffff}
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:#ffffff;color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font:inherit;font-weight:700;font-size:18px;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:background-color .15s,color .15s}
.btn-primary{background:var(--fjord);color:#ffffff}
.btn-primary:hover{background:var(--fjord-hover);color:#ffffff}
.btn-primary[disabled]{cursor:progress;background:var(--fjord-hover)}
.btn-outline{border-color:#ffffff;color:#ffffff;background:transparent}
.btn-outline:hover{background:#ffffff;color:var(--night)}

/* Header */
.top{background:var(--night);color:#ffffff}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.logo{display:inline-flex;align-items:center;min-height:44px;border-radius:10px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{color:#ffffff;text-decoration:none;font-weight:700;font-size:17px;padding:8px 14px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px}
.nav a:hover{color:#ffffff;text-decoration:underline;text-underline-offset:5px}
.nav a.pill{background:var(--fjord);margin-left:10px;padding:8px 22px}
.nav a.pill:hover{background:var(--fjord-hover)}
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:2px solid #ffffff;background:transparent;color:#ffffff;font:inherit;font-weight:700;font-size:17px;cursor:pointer}
.mnav{display:none;background:var(--night);padding:0 16px 24px}
.mnav[hidden]{display:none!important}
.mnav a{display:flex;align-items:center;min-height:52px;color:#ffffff;font-weight:700;text-decoration:none;border-top:1px solid rgba(255,255,255,.16)}
.mnav a.pill{justify-content:center;margin-top:16px;border:0;border-radius:999px;background:var(--fjord)}

/* Hero */
.hero{position:relative;background:var(--night);color:#ffffff;overflow:hidden;padding:56px 0 104px}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:#f2b33d}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:#f2b33d}
.hero h1{font-size:clamp(40px,5.2vw,68px);line-height:1.04;letter-spacing:-0.03em;margin-top:20px}
.soft{color:#a9bcef}
.lede{font-size:20px;color:#c9d0dc;margin-top:24px;max-width:34em}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.facts{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:32px;font-size:16px;color:#c9d0dc}
.facts li{display:flex;align-items:center;gap:8px}
.facts svg{color:#3db5c2;flex:none}
.visual{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:560px}
.orb{position:absolute;border-radius:50%;filter:blur(44px)}
.o1{width:300px;height:300px;background:#6f8fe0;top:-20px;right:-40px;opacity:.55}
.o2{width:260px;height:260px;background:#a884e6;bottom:0;left:-30px;opacity:.5}
.o3{width:200px;height:200px;background:#3db5c2;top:38%;left:34%;opacity:.3}
.o4{width:150px;height:150px;background:#f2b33d;bottom:-30px;right:40px;opacity:.4}
.ghost{position:absolute;top:36px;bottom:20px;left:44px;right:-6px;border-radius:28px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);transform:rotate(4deg)}
.hcard{position:relative;z-index:1;width:100%;max-width:540px;margin:0 auto;background:#ffffff;color:var(--ink);border-radius:24px;padding:28px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.hc-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:20px;color:#ffffff;background:radial-gradient(circle at 30% 30%,#8456c4,#3f62c2)}
.hc-name{font-weight:700;font-size:18px;line-height:1.3}
.hc-role{font-size:14px;color:var(--muted)}
.hc-term{margin-left:auto;font-size:14px;font-weight:700;background:var(--sunken);border-radius:999px;padding:6px 12px}
.skills{display:grid;gap:22px;margin-top:24px}
.sk-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-bottom:10px}
.sk-name{font-weight:700;font-size:17px}
.gain{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;background:var(--amber);color:var(--ink);border-radius:999px;padding:3px 10px 3px 8px}
.row{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:10px}
.row + .row{margin-top:8px}
.season{font-size:14px;color:var(--muted)}
.track{height:46px;border-radius:12px;background-color:#eef1f6;background-image:linear-gradient(90deg,transparent calc(40% - 1px),#c3cad8 calc(40% - 1px),#c3cad8 40%,transparent 40%),linear-gradient(90deg,transparent calc(70% - 1px),#c3cad8 calc(70% - 1px),#c3cad8 70%,transparent 70%),linear-gradient(90deg,transparent calc(85% - 1px),#c3cad8 calc(85% - 1px),#c3cad8 85%,transparent 85%)}
.bar{height:100%;min-width:122px;border-radius:12px;display:flex;align-items:center;gap:8px;padding:0 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 16px -10px rgba(15,27,45,.55)}
.bar b{font-family:var(--display);font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
.bar span{font-size:14px}
.b0{background-color:var(--heat-0);color:var(--ink);box-shadow:inset 0 0 0 2px #7d8db8}
.b1{background-color:var(--heat-1);color:var(--ink)}
.b2{background-color:var(--heat-2);color:#ffffff}
.b3{background-color:var(--heat-3);color:#ffffff}
.mv{outline:3px solid var(--moved);outline-offset:2px}
.w78{width:78%}.w88{width:88%}.w34{width:34%}.w58{width:58%}.w52{width:52%}.w72{width:72%}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:24px;padding-top:18px;border-top:1px solid var(--soft);font-size:14px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:14px;height:14px;border-radius:4px;display:inline-block}
.sw0{background:var(--heat-0);box-shadow:inset 0 0 0 1.5px #7d8db8}.sw1{background:var(--heat-1)}.sw2{background:var(--heat-2)}.sw3{background:var(--heat-3)}
.swm{background:#ffffff;outline:3px solid var(--moved);outline-offset:1px}
.private{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin-top:12px}
.next{position:relative;z-index:2;align-self:flex-end;max-width:300px;margin:-14px 8px 0 0;background:var(--amber);color:var(--ink);border-radius:18px;padding:14px 18px;font-size:16px;line-height:1.4;box-shadow:0 18px 30px -16px rgba(0,0,0,.6);transform:rotate(-1.5deg)}

/* Sections */
.sec{padding:96px 0}
.eyebrow-l{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--fjord)}
.eyebrow-l::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.h2{font-size:clamp(32px,3.6vw,48px);line-height:1.08;margin-top:14px}
.intro{font-size:20px;color:var(--muted);margin-top:18px;max-width:34em}

/* How it works */
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:48px;align-items:center}
.cycle{position:relative;width:600px;height:560px;margin:0 auto}
.ring{position:absolute;left:0;top:0;width:600px;height:560px}
.step{position:absolute;width:196px;transform:translate(-50%,-50%);background:#ffffff;border-radius:20px;padding:16px 18px;box-shadow:0 2px 0 var(--soft),0 18px 30px -22px rgba(15,27,45,.35)}
.s1{left:300px;top:80px}.s2{left:500px;top:225px}.s3{left:424px;top:460px}.s4{left:176px;top:460px}.s5{left:100px;top:225px}
.step-h{display:flex;align-items:center;gap:10px}
.num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:16px;flex:none}
.n1{background:var(--fjord);color:#ffffff}.n2{background:var(--heather);color:#ffffff}.n3{background:var(--teal);color:var(--ink)}.n4{background:var(--amber);color:var(--ink)}.n5{background:var(--night);color:#ffffff}
.step h3{font-size:19px}
.step p{font-size:16px;color:var(--muted);margin-top:6px}
.centre{position:absolute;left:300px;top:290px;transform:translate(-50%,-50%);width:200px;text-align:center}
.centre strong{display:block;font-family:var(--display);font-size:26px;line-height:1.1}
.centre span{font-size:16px;color:var(--muted)}
.loop,.loop-note{display:none}

/* Modules */
.white{background:#ffffff}
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;margin-top:48px}
.mod{position:relative;overflow:hidden;background:var(--page);border-radius:24px;padding:32px 28px 28px;display:flex;flex-direction:column;gap:14px}
.accent{position:absolute;left:0;right:0;top:0;height:6px}
.tile{width:56px;height:56px;border-radius:16px;display:grid;place-items:center}
.c-fjord{background:var(--fjord);color:#ffffff}.c-heather{background:var(--heather);color:#ffffff}.c-teal{background:var(--teal);color:var(--ink)}
.c-amber{background:var(--amber);color:var(--ink)}.c-lichen{background:var(--lichen);color:var(--ink)}.c-lingon{background:var(--lingonberry);color:var(--ink)}
.mod h3{font-size:24px}
.mod p{font-size:17px;color:var(--muted)}
.mod.soon{background:#ffffff;border:2px dashed var(--border)}
.soon-pill{align-self:flex-start;font-size:14px;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:2px 12px}

/* Promises */
.dark{position:relative;background:var(--night);color:#ffffff;overflow:hidden}
.dark .eyebrow-l{color:#f2b33d}
.dark .intro{color:#c9d0dc}
.proms{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;margin-top:48px}
.prom{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:28px}
.pi{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--night)}
.d-fjord{background:#6f8fe0}.d-heather{background:#a884e6}.d-teal{background:#3db5c2}.d-amber{background:#f2b33d}.d-lingon{background:#f08a98}
.prom h3{font-size:22px;margin-top:18px}
.prom p{color:#c9d0dc;font-size:17px;margin-top:8px}
.p-orb1{width:340px;height:340px;background:#6f8fe0;opacity:.35;top:-120px;right:-80px}
.p-orb2{width:220px;height:220px;background:#a884e6;opacity:.3;top:-40px;right:180px}

/* Join */
.panel{position:relative;overflow:hidden;background:var(--fjord);color:#ffffff;border-radius:32px;padding:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.panel .eyebrow-l,.panel .intro{color:#ffffff}
.j-orb1{width:280px;height:280px;background:#f2b33d;opacity:.45;top:-90px;right:-60px}
.j-orb2{width:220px;height:220px;background:#3db5c2;opacity:.4;bottom:-80px;right:30%}
.pitch{position:relative}
.ticks{display:grid;gap:12px;margin-top:28px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks svg{flex:none;margin-top:3px}
.form{position:relative;z-index:1;background:#ffffff;color:var(--ink);border-radius:24px;padding:32px;display:grid;gap:20px;box-shadow:0 30px 60px -28px rgba(15,27,45,.6)}
.form-h{font-size:24px}
.req{font-size:16px;color:var(--muted)}
.field{display:grid;gap:6px}
.field label{font-weight:700;font-size:16px}
.opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:18px;min-height:48px;padding:10px 14px;border:2px solid var(--border);border-radius:10px;background:#ffffff;color:var(--ink);width:100%}
.field textarea{min-height:120px;resize:vertical}
.field [aria-invalid="true"]{border:3px solid var(--ink)}
.err{display:flex;gap:8px;align-items:flex-start;font-size:16px;font-weight:700;color:var(--ink)}
.err[hidden]{display:none}
.err svg{flex:none;margin-top:3px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:20px}
.note{font-size:16px;color:var(--muted)}
.form-msg{font-size:16px;background:var(--sunken);border-radius:12px;padding:12px 14px}
.form-msg[hidden]{display:none}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.done{display:grid;gap:12px}
.done h3{font-size:28px}
.done[hidden]{display:none}

/* Footer */
.foot{background:var(--night);color:#c9d0dc;padding:56px 0 40px}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 28px}
.foot a{color:#ffffff;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.small{font-size:14px;margin-top:32px;border-top:1px solid rgba(255,255,255,.16);padding-top:20px}

/* Simple pages (privacy, thanks) */
.page{padding:72px 0 96px}
.page .wrap{max-width:820px}
.page h1{font-size:clamp(36px,4.4vw,52px)}
.page h2{font-size:26px;margin-top:40px}
.page p,.page li{margin-top:14px}
.page ul{list-style:disc;padding-left:24px}
.placeholder{background:#fdf1dc;border-radius:6px;padding:0 6px;font-weight:700}

@media (max-width:1100px){.how-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:48px}.visual{min-height:0}}
@media (max-width:900px){.panel{grid-template-columns:minmax(0,1fr);padding:40px 28px;gap:36px}}
@media (max-width:860px){.nav{display:none}.menu-btn{display:inline-flex}.mnav{display:block}}
@media (max-width:720px){
  .wrap{padding:0 16px}
  .top-in{min-height:72px}
  .hero{padding:32px 0 72px}
  .lede{font-size:19px}
  .cta .btn{flex:1 1 100%}
  .hcard{padding:20px}
  .row{grid-template-columns:54px minmax(0,1fr)}
  .ghost{left:16px;right:16px}
  .next{margin-right:0}
  .sec{padding:64px 0}
  .intro{font-size:19px}
  .cycle{width:auto;height:auto;padding-right:44px}
  .ring,.centre{display:none}
  .step{position:relative;left:auto;top:auto;transform:none;width:auto;margin-bottom:14px}
  .loop{display:block;position:absolute;right:4px;top:34px;bottom:62px;width:30px;border:2px solid var(--border);border-left:0;border-radius:0 22px 22px 0}
  .loop svg{position:absolute;left:-12px;top:-9px}
  .loop-note{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--muted);margin-top:4px}
  .mod,.prom{padding:24px}
  .panel{border-radius:24px;padding:32px 16px}
  .form{padding:24px 20px}
  .page{padding:48px 0 72px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}