:root{
  --bg:#FFFFFF;
  --bg-2:#FAFAFA;
  --card:#FAFAFA;
  --line:rgba(0,0,0,.10);
  --text:#141417;
  --dim:#5E5E66;
  --blue:#141417;
  --blue-deep:#000000;
  --violet:#3A3A40;
  /* semantic roles - name by purpose */
  --accent:var(--blue);
  --accent-hover:var(--blue-deep);
  --on-accent:#FFFFFF;
  --success:#15935F;
  --danger:#D4344A;
  --field-bg:#FFFFFF;
  --maxw:980px;
  --mono:'JetBrains Mono','SF Mono',monospace;
  --body:'Inter',-apple-system,sans-serif;
  --disp:'Archivo','Inter',sans-serif;
}
:root[data-theme="night"]{
  --bg:#0E0E12;
  --bg-2:#16161B;
  --card:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.12);
  --text:#F4F4F6;
  --dim:#A0A0AA;
  --blue:#F4F4F6;
  --blue-deep:#FFFFFF;
  --violet:#C8C8D0;
  --on-accent:#0E0E12;
  --danger:#FF6B6B;
  --field-bg:#1B1B21;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
html[data-theme="night"]{color-scheme:dark}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}

/* ===== snake canvas (fixed, behind everything) ===== */
#snake{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
  opacity:.6;
}

/* ===== nav: tabs only ===== */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,250,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;gap:30px;
}
.nav-in a{
  text-decoration:none;font-size:13px;color:var(--dim);
  letter-spacing:.05em;
}
.nav-in a:hover{color:var(--text)}

/* ===== hero ===== */
.hero{
  position:relative;z-index:1;
  min-height:86vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.hero-core{padding:60px 24px;display:flex;flex-direction:column;align-items:center}
.hero-logo{
  width:clamp(280px,68vw,620px);height:auto;display:block;margin-bottom:30px;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.35));   /* soft matte shadow, no blue */
}
.hero-mark{
  font-family:var(--mono);     /* JetBrains Mono — same face as the headings */
  font-weight:800;
  font-size:clamp(54px,11vw,118px);
  line-height:1;letter-spacing:.005em;
  margin-bottom:26px;
  position:relative;
  cursor:default;
  color:var(--text);           /* near-black ink */
  text-shadow:none;
}
/* "AI" in the KASTOVAI wordmark — smaller than KASTOV, theme blue, sitting on
   the baseline so its bottom is flush with KASTOV. */
.ai{ font-size:0.6em; font-weight:700; letter-spacing:0; vertical-align:baseline; color:var(--blue); }
.hero-mark .ai{ font-size:0.62em; color:inherit; }   /* same tone as KASTOV, just smaller */
.hm-glow{ /* cursor-following blue light inside the (white) letterforms */
  position:absolute;inset:0;
  color:transparent;
  background:radial-gradient(150px circle at var(--mx,-300px) var(--my,-300px),
    rgba(77,124,255,1), rgba(124,92,255,.55) 45%, transparent 72%);
  -webkit-background-clip:text;background-clip:text;
  pointer-events:none;
}
.hm-glow .ai{ color:transparent; }   /* keep the glow layer fully gradient-clipped */
.hero-line{font-size:clamp(15px,1.8vw,19px);font-weight:500;margin-bottom:14px}
.hero-sub{font-size:13.5px;color:var(--dim);max-width:46em;margin-bottom:40px}
.btn{
  display:inline-flex;align-items:center;
  font-family:var(--disp);font-weight:800;font-size:15px;
  letter-spacing:-.01em;
  background:var(--accent);color:var(--on-accent);
  border:1px solid var(--accent);border-radius:6px;
  padding:13px 30px;text-decoration:none;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{background:transparent;color:var(--blue);border-color:var(--blue)}

/* ===== sections ===== */
.section{padding:100px 0;position:relative;z-index:1}
.sec-head{margin-bottom:48px;max-width:680px}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.h2{font-size:clamp(22px,2.8vw,32px);font-weight:800;margin-bottom:14px;line-height:1.3}
.sec-sub{font-size:14px;color:var(--dim);max-width:46em}

/* ===== features (flat cards, same as the plan cards) ===== */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feat{
  border:1px solid var(--line);border-radius:6px;background:var(--card);
  backdrop-filter:blur(3px);
  padding:30px 28px;min-width:0;
}
.feat h3{font-size:15.5px;font-weight:700;margin-bottom:10px;letter-spacing:.01em}
.feat p{font-size:13px;color:var(--dim);line-height:1.65;max-width:30em}

/* ===== live ===== */
.live-points{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:4px}
.live-points li{display:block;font-size:13px;color:var(--dim);line-height:1.6;padding-top:18px;border-top:1px solid var(--line)}
.live-points li::before{content:">";color:var(--blue);font-weight:700;display:block;font-size:16px;margin-bottom:10px}
.live-points li strong{color:var(--text);font-weight:700}
@media(max-width:820px){.live-points{grid-template-columns:1fr;gap:0}.live-points li{padding:16px 0}}

/* ===== pricing ===== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{
  border:1px solid var(--line);border-radius:6px;background:var(--card);
  backdrop-filter:blur(3px);
  padding:30px 28px;display:flex;flex-direction:column;position:relative;
}
.plan-pop{border-color:var(--blue)}
.plan h3{font-size:15px;font-weight:700;margin-bottom:4px}
.plan .who{font-size:12px;color:var(--dim);margin-bottom:20px}
.plan .price{font-size:34px;font-weight:800;line-height:1;margin-bottom:4px}
.plan .per{font-size:11.5px;color:var(--dim);margin-bottom:22px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:28px}
.plan li{display:flex;gap:9px;font-size:12.5px;color:var(--dim);align-items:baseline}
.plan li::before{content:">";color:var(--blue);font-weight:700}
.plan .btn{margin-top:auto;justify-content:center;font-size:13px;padding:11px 20px}

/* ===== faq ===== */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px}
.faq h3{font-size:13.5px;font-weight:700;margin-bottom:6px}
.faq p{font-size:13px;color:var(--dim)}

/* ===== final ===== */
.final{text-align:center;padding:120px 28px;position:relative;z-index:1}
.final h2{font-size:clamp(20px,2.6vw,30px);font-weight:800;margin-bottom:28px}

/* ===== footer ===== */
footer{
  border-top:1px solid var(--line);padding:34px 0;
  position:relative;z-index:1;background:rgba(250,250,250,.82);
}
.foot-in{
  max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.foot-in a{color:var(--dim);text-decoration:none;font-size:12.5px}
.foot-in a:hover{color:var(--text)}
.foot-in .spacer{flex:1}
.foot-note{font-size:11.5px;color:var(--dim)}

/* ===== responsive ===== */
@media (max-width:860px){
  .feat-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr;max-width:420px}
  .faq-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .section{padding:72px 0}
  .nav-in{gap:16px;overflow-x:auto}
  .nav-in a{white-space:nowrap;font-size:12px}
  #snake{opacity:.6}
}

/* ===== auth + checkout pages (share the site identity) ===== */
.auth-main{position:relative;z-index:1;min-height:calc(100vh - 110px);
  display:flex;align-items:center;justify-content:center;padding:60px 24px}
.auth-box{width:100%;max-width:440px}
.auth-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
  margin-bottom:14px;text-align:center}
.auth-title{font-family:var(--disp);font-weight:700;
  font-size:clamp(30px,5vw,42px);line-height:1.05;text-align:center;margin-bottom:12px}
.auth-sub{font-size:13.5px;color:var(--dim);text-align:center;max-width:34em;
  margin:0 auto 30px;line-height:1.6}
.auth-sub b{color:var(--text)}
.card-box{border:1px solid var(--line);border-radius:6px;background:var(--card);
  backdrop-filter:blur(3px);padding:30px}
.card-box.pop{border-color:var(--blue)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.input{width:100%;background:var(--field-bg);border:1px solid var(--line);border-radius:4px;
  color:var(--text);font-family:var(--body);font-size:14px;padding:13px 15px;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease}
.input::placeholder{color:#9A9AA6}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,20,23,.12)}
.btn-block{width:100%;justify-content:center;margin-top:6px}
.auth-alt{font-size:12.5px;color:var(--dim);text-align:center;margin-top:16px}
.auth-alt a{color:var(--blue);text-decoration:none}
.auth-alt a:hover{text-decoration:underline}
.auth-err{font-size:12.5px;color:var(--danger);margin:4px 0 10px;text-align:center}
.auth-fine{font-size:11.5px;color:var(--dim);text-align:center;margin-top:12px;line-height:1.6}

/* checkout summary card */
.co-head{display:flex;align-items:flex-start;justify-content:space-between;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.co-plan{font-family:var(--disp);font-weight:700;font-size:19px}
.co-billing{font-size:12px;color:var(--dim);margin-top:3px}
.co-price{font-family:var(--disp);font-weight:800;font-size:30px;white-space:nowrap}
.co-price span{font-size:13px;font-weight:500;color:var(--dim)}
.co-feats{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:11px}
.co-feats li{font-size:13px;color:var(--text);display:flex;gap:10px;align-items:baseline}
.co-feats li::before{content:">";color:var(--blue);font-weight:700}
.co-feats .co-sub{display:block;font-size:11.5px;color:var(--dim);margin-top:3px}
.co-total{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.co-total b{font-family:var(--disp);font-size:22px;color:var(--text)}

.auth-notice{font-size:13px;color:var(--success);background:rgba(52,211,153,.08);
  border:1px solid rgba(52,211,153,.3);border-radius:4px;padding:11px 14px;
  margin-bottom:16px;text-align:center;line-height:1.5}

/* "coming soon" footnote inside a plan card */
.plan .soon{font-size:11px;color:var(--dim);line-height:1.55;
  margin:4px 0 22px;padding-top:14px;border-top:1px solid var(--line)}
.plan .soon b{color:var(--text);font-weight:700}

.co-soon{font-size:11.5px;color:var(--dim);line-height:1.55;margin:2px 0 18px;
  padding-top:14px;border-top:1px solid var(--line)}
.co-soon b{color:var(--text);font-weight:700}

/* inline "soon" tag on an upcoming perk */
.soon-tag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);border:1px solid rgba(77,124,255,.5);
  border-radius:3px;padding:1px 5px;margin-left:7px;vertical-align:middle;line-height:1.5}

/* ===== day/night toggle button ===== */
.theme-toggle{
  /* pinned to the right edge of the (full-width) nav bar, not the centered
     nav-in column — so it sits flush to the window edge */
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:8px;
  background:transparent;border:1px solid var(--line);color:var(--text);
  font-size:15px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s ease,background .15s ease;
}
.theme-toggle:hover{border-color:var(--text)}

/* ===== NIGHT MODE (day above is the default; only overrides here) ===== */
[data-theme="night"] .nav,
[data-theme="night"] footer{ background:rgba(14,14,18,.82) }
[data-theme="night"] .btn-ghost{ background:transparent;color:var(--text);border-color:var(--line) }
[data-theme="night"] .btn-ghost:hover{ background:transparent;color:var(--accent-hover);border-color:var(--accent-hover) }

/* ===== price comparison — one big statement across the screen ===== */
.cmp-section{padding:120px 0;text-align:center;position:relative;z-index:1}
.cmp-inner{max-width:1240px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
.cmp-kick{color:var(--dim);margin-bottom:22px}
.cmp-big{
  font-family:var(--mono);font-weight:800;
  font-size:clamp(40px,8.2vw,108px);
  line-height:1.02;letter-spacing:-0.03em;
  margin:0;
}
.cmp-x{
  display:inline-block;border-bottom:0.06em solid var(--blue);
  padding-bottom:0.03em;line-height:1;
}
.cmp-stat{
  font-size:clamp(16px,2.1vw,24px);font-weight:600;
  margin-top:36px;letter-spacing:-0.01em;
}
.cmp-stat b{font-weight:800}
.cmp-stat .cmp-dim{color:var(--dim);font-weight:500}
.cmp-foot{font-size:11.5px;color:var(--dim);margin-top:22px;line-height:1.6}
@media (max-width:560px){
  .cmp-section{padding:80px 0}
  .cmp-stat .cmp-dim{display:block;margin-top:4px}
}

/* ===== product reveal: scroll-driven 3D tilt (vanilla port) ===== */
.cs{height:160vh;position:relative;z-index:1}
.cs-inner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;perspective:1000px}
.cs-header{max-width:900px;text-align:center;margin-bottom:18px;padding:0 24px;will-change:transform}
.cs-eyebrow{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.cs-title{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;
  line-height:1.05;font-size:clamp(26px,4.4vw,52px);margin:14px 0 0}
.cs-title b{display:block;font-size:clamp(32px,6vw,80px)}
.cs-card{max-width:1000px;width:92vw;height:min(62vh,620px);border:4px solid #2c2c34;
  background:#16161d;border-radius:26px;padding:10px;transform-origin:center top;will-change:transform;
  box-shadow:0 9px 20px #0000004a,0 37px 37px #00000042,0 84px 50px #00000026,0 149px 60px #0000000a}
.cs-screen{height:100%;width:100%;overflow:hidden;border-radius:18px;background:#0d0d12;
  border:1px solid #2a2a34;display:flex;flex-direction:column}
.cs-screen img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;border-radius:18px}
/* mock library UI (placeholder until a real screenshot is dropped in) */
.mk-top{display:flex;align-items:center;gap:12px;padding:11px 15px;border-bottom:1px solid #2a2a34;font-size:11px;color:#9A9AA6}
.mk-top .b{font-family:var(--disp);font-weight:700;color:#F1F1F4;font-size:13px;margin-right:auto}
.mk-top .seg{display:inline-flex;border:1px solid #2a2a34;border-radius:7px;overflow:hidden}
.mk-top .seg span{padding:5px 12px;font-size:10.5px}
.mk-top .seg .on{background:#F2F2F5;color:#0b0b10;font-weight:700}
.mk-grid{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:15px;overflow:hidden}
.mk-clip{border:1px solid #2a2a34;border-radius:9px;overflow:hidden;background:#101017;display:flex;flex-direction:column}
.mk-thumb{aspect-ratio:9/16;position:relative;
  background:linear-gradient(160deg,#23232e,#15151c 60%),radial-gradient(circle at 30% 30%,rgba(255,255,255,.06),transparent 50%)}
.mk-thumb::after{content:attr(data-s);position:absolute;top:6px;right:6px;font-size:8.5px;color:#0b0b10;
  background:#F2F2F5;border-radius:4px;padding:1px 5px;font-weight:700}
.mk-cap{padding:7px 8px;font-size:8.5px;color:#9A9AA6;line-height:1.4;border-top:1px solid #2a2a34}

@media (max-width:768px){
  .cs{height:120vh}
  .cs-card{height:54vh}
  .mk-grid{grid-template-columns:repeat(3,1fr)}
}

/* ===== liquid-metal CTA buttons (paper-design shader, vendored) ===== */
.lm-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:54px;min-width:182px;border-radius:100px;text-decoration:none;cursor:pointer;
  vertical-align:middle;isolation:isolate}
.lm-btn .lm-shader{position:absolute;inset:0;border-radius:100px;overflow:hidden;z-index:1}
.lm-btn .lm-shader canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border-radius:100px!important;display:block!important}
.lm-btn .lm-face{position:absolute;inset:2px;border-radius:100px;z-index:2;
  background:linear-gradient(180deg,#242424,#000);box-shadow:inset 0 1px 1px rgba(255,255,255,.06);transition:transform .12s ease}
.lm-btn .lm-label{position:relative;z-index:3;font-family:var(--mono);font-weight:700;font-size:15px;
  color:#ECECF0;text-shadow:0 1px 2px rgba(0,0,0,.6);padding:0 28px;letter-spacing:.02em;white-space:nowrap}
.lm-btn:active .lm-face{transform:scale(.985)}

/* ===== chrome-silk band behind the price statement (same shader, full-bleed) ===== */
.cmp-section{overflow:hidden;background:#0a0a0f}
.cmp-shader{position:absolute;inset:0;z-index:0}
.cmp-shader canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important}
.cmp-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(75% 82% at 50% 50%,rgba(10,10,15,.5),rgba(10,10,15,.16) 58%,rgba(10,10,15,.68) 100%)}
.cmp-inner{z-index:2}
/* the band is dark in both themes, so force its text light */
.cmp-section .cmp-kick{color:#cfcfd6}
.cmp-section .cmp-big{color:#fff}
.cmp-section .cmp-x{border-bottom-color:#d6d6dc}
.cmp-section .cmp-stat{color:#fff}
.cmp-section .cmp-stat .cmp-dim{color:#9a9aa6}
.cmp-section .cmp-foot{color:#7e7e8a}

/* ===== word-by-word scroll reveal (one manifesto statement) ===== */
.reveal-sec{position:relative;height:170vh;z-index:1}
.reveal-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:0 28px}
.reveal-stack{max-width:900px;width:100%;display:flex;flex-direction:column;gap:clamp(48px,8vh,84px)}
.reveal-text{max-width:900px;margin:0;font-family:var(--mono);font-weight:700;
  font-size:clamp(24px,3.4vw,46px);line-height:1.4;letter-spacing:-.01em;text-align:left;
  display:flex;flex-wrap:wrap}
/* supported-platforms block tucked under the manifesto */
.works-head{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 18px}
.reveal-text .w{color:var(--text);opacity:.16;margin-right:.32em;transition:opacity .08s linear}
.reveal-text .w em{font-style:italic;color:var(--blue)}
@media(max-width:560px){.reveal-sec{height:135vh}}

/* ===== subtle section entrance (clean, on scroll-in) ===== */
.reveal-on .section>.wrap,.reveal-on .cmp-inner,.reveal-on .final{
  opacity:0;transform:translateY(22px);filter:blur(5px);
  transition:opacity .6s ease,transform .6s ease,filter .6s ease}
.reveal-on .section>.wrap.in,.reveal-on .cmp-inner.in,.reveal-on .final.in{
  opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){
  .reveal-on .section>.wrap,.reveal-on .cmp-inner,.reveal-on .final{opacity:1;transform:none;filter:none}
  .reveal-text .w{opacity:1}
}

/* ===== platforms logos (brand colors) ===== */
.logos-row{display:flex;align-items:center;justify-content:flex-start;gap:clamp(24px,4vw,46px);flex-wrap:wrap}
.logo{display:inline-flex;width:clamp(28px,3.4vw,36px);height:clamp(28px,3.4vw,36px);
  transition:transform .2s ease,opacity .2s ease;opacity:.92}
.logo svg{width:100%;height:100%;display:block}
.logo:hover{transform:translateY(-4px);opacity:1}
.lg-twitch{color:#9146FF}
.lg-kick{color:#53FC18}
.lg-youtube{color:#FF0000}
.lg-rumble{color:#85C742}