/* ===================================================================
   VALDRYSS — stylesheet
   Motion principle: content is VISIBLE by default; entrance animation
   is added only under (prefers-reduced-motion: no-preference).
   =================================================================== */
:root{
  --bg:#0a1124; --bg2:#0a0f1e; --surface:#0d1117; --surface2:#11182b;
  --primary:#2979FF; --accent:#00D4FF; --text:#ffffff; --muted:#94a3b8;
  --faint:#475569; --border:rgba(41,121,255,0.15);
  --glow:rgba(41,121,255,0.42); --glow2:rgba(0,212,255,0.32);
  --ease:cubic-bezier(.2,.8,.2,1); /* @kind other */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Sora',sans-serif;overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--primary);color:#fff}
a{color:inherit}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:300;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--primary),var(--accent));box-shadow:0 0 16px var(--glow)}

/* ---------- cursor glow ---------- */
.cursor-glow{position:fixed;top:0;left:0;width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;
  pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(41,121,255,0.10),transparent 60%);mix-blend-mode:screen}

/* ---------- atmosphere ---------- */
.dotgrid{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.04) 1px,transparent 1px);background-size:28px 28px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 25%,#000 40%,transparent 100%)}
.scanlines{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(transparent 0 3px,rgba(255,255,255,0.012) 3px 4px)}
.glow{position:fixed;border-radius:50%;filter:blur(120px);z-index:-2;pointer-events:none;opacity:.6;will-change:transform}
.glow.a{width:620px;height:620px;background:var(--glow);top:-200px;left:-100px}
.glow.b{width:520px;height:520px;background:var(--glow2);top:18%;right:-150px}
.glow.c{width:560px;height:560px;background:radial-gradient(circle,rgba(0,212,255,0.22),transparent 70%);bottom:-200px;left:28%}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- background node-network canvas ---------- */
#net{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.42}

/* ---------- cursor dot (snappy) ---------- */
.cursor-dot{position:fixed;top:0;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  pointer-events:none;z-index:250;background:var(--accent);box-shadow:0 0 12px var(--accent);
  transition:width .18s,height .18s,margin .18s,background .18s}
.cursor-dot.down{width:18px;height:18px;margin:-9px 0 0 -9px;background:var(--primary)}

@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.08)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,50px) scale(1.06)}}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(18px,-22px) rotate(120deg)}66%{transform:translate(-14px,12px) rotate(240deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes reveal{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:translateY(0)}}
@keyframes spinmark{from{filter:hue-rotate(0)}50%{filter:hue-rotate(20deg)}to{filter:hue-rotate(0)}}

@media(prefers-reduced-motion:no-preference){
  .glow.a{animation:float1 18s ease-in-out infinite}
  .glow.b{animation:float2 22s ease-in-out infinite}
  .glow.c{animation:float1 26s ease-in-out infinite reverse}
}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:22px 6vw;transition:all .4s var(--ease)}
nav.scrolled{backdrop-filter:blur(16px);background:rgba(6,9,18,0.72);border-bottom:1px solid var(--border);padding:14px 6vw}
.logo{font-weight:800;font-size:1.22rem;letter-spacing:-.02em;display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.logo .mark{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  background:radial-gradient(120% 120% at 30% 20%,rgba(41,121,255,0.18),transparent 70%);border:1px solid var(--border)}
.logo .mark svg{width:26px;height:26px;overflow:visible}
@media(prefers-reduced-motion:no-preference){.logo .mark svg{animation:spinmark 5s ease-in-out infinite}}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.92rem;transition:color .25s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links a:not(.btn-nav):not(.nav-ghost)::after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:1px;background:var(--accent);transition:width .3s}
.nav-links a:not(.btn-nav):not(.nav-ghost):hover::after{width:100%}
.nav-ghost{font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.04em;color:var(--accent)!important;
  border:1px solid var(--border);padding:7px 13px;border-radius:100px;transition:all .25s}
.nav-ghost:hover{border-color:var(--primary);background:rgba(41,121,255,0.08)}
.btn-nav{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff !important;padding:9px 20px;border-radius:9px;
  font-weight:600;box-shadow:0 4px 20px var(--glow);transition:box-shadow .25s,transform .15s;white-space:nowrap}
.btn-nav:hover{box-shadow:0 8px 30px var(--glow)}
/* user dropdown (app launcher) */
.nav-user-wrap{position:relative}
.nav-user-btn{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff!important;padding:9px 20px;border-radius:9px;font-weight:600;box-shadow:0 4px 20px var(--glow);transition:box-shadow .25s,transform .15s;white-space:nowrap;border:none;cursor:pointer;font-family:'Sora',sans-serif;font-size:.92rem}
.nav-user-btn:hover{box-shadow:0 8px 30px var(--glow)}
.nav-drop{display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:180px;background:#0d1525;border:1px solid rgba(41,121,255,.25);border-radius:14px;padding:6px;z-index:200;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.nav-drop.open{display:flex;flex-direction:column}
.nav-drop a,.nav-drop-signout{display:block;padding:9px 14px;border-radius:9px;color:var(--muted);text-decoration:none;font-size:.86rem;text-align:left;background:none;border:none;cursor:pointer;width:100%;transition:color .2s,background .2s;font-family:'Sora',sans-serif}
.nav-drop a:hover,.nav-drop-signout:hover{color:#fff;background:rgba(41,121,255,.1)}
.nav-drop-sep{height:1px;background:rgba(255,255,255,.07);margin:4px 0}
.nav-drop-signout{color:#ef4444!important}
.nav-drop-signout:hover{background:rgba(239,68,68,.1)!important}
/* hamburger + mobile dropdown nav */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;flex:0 0 auto;
  border:1px solid var(--border);border-radius:12px;background:rgba(8,12,24,0.55);cursor:pointer;padding:0;transition:border-color .25s}
.nav-toggle:hover{border-color:var(--primary)}
.nav-toggle span{display:block;width:18px;height:2px;margin:0 auto;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
#nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#nav.open .nav-toggle span:nth-child(2){opacity:0}
#nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1080px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:calc(100% + 8px);left:6vw;right:6vw;flex-direction:column;align-items:stretch;gap:4px;
    background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--border);border-radius:16px;
    padding:12px;box-shadow:0 30px 70px -20px rgba(0,0,0,.75);
    opacity:0;transform:translateY(-12px) scale(.98);transform-origin:top right;pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease)}
  #nav.open .nav-links{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  .nav-links a{padding:14px 16px;border-radius:11px;font-size:1.02rem;color:var(--text)}
  .nav-links a:hover{background:rgba(41,121,255,0.08)}
  .nav-links a:not(.btn-nav):not(.nav-ghost)::after{display:none}
  .nav-ghost{border:none;text-align:left;color:var(--accent)!important;font-size:.92rem}
  .btn-nav{text-align:center;margin-top:6px}
  .nav-user-wrap{width:100%;margin-top:6px}
  .nav-user-btn{width:100%;text-align:center}
  .nav-drop{position:static;border:none;background:none;box-shadow:none;padding:0;margin-top:4px}
  .nav-drop a,.nav-drop-signout{padding:12px 16px;border-radius:11px;font-size:1rem}
}

/* ---------- HERO ---------- */
.hero{min-height:100vh;display:flex;align-items:center;gap:4vw;padding:128px 6vw 60px;position:relative}
.hero-inner{flex:1;max-width:760px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--border);border-radius:100px;padding:8px 16px;
  background:rgba(0,212,255,0.05);margin-bottom:30px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
@media(prefers-reduced-motion:no-preference){.eyebrow .dot{animation:pulse 2s infinite}}
.hero-h1{font-size:clamp(2.8rem,7vw,6rem);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin-bottom:26px}
.hero-h1 .line{display:block}
.hero-h1 [data-word]{display:inline-block}
.grad{background:linear-gradient(120deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:clamp(1.05rem,2vw,1.32rem);color:var(--muted);max-width:52ch;margin-bottom:38px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;padding:16px 34px;border-radius:12px;
  font-weight:600;font-size:1rem;text-decoration:none;box-shadow:0 8px 30px var(--glow);transition:box-shadow .3s;border:none;cursor:pointer;display:inline-block;white-space:nowrap}
.btn-primary:hover{box-shadow:0 14px 44px var(--glow)}
.btn-ghost{background:rgba(255,255,255,0.03);color:var(--text);padding:16px 34px;border-radius:12px;font-weight:600;font-size:1rem;
  text-decoration:none;border:1px solid var(--border);transition:background .3s,border-color .3s;display:inline-block}
.btn-ghost:hover{background:rgba(41,121,255,0.1);border-color:var(--primary)}

.hero-stats{display:flex;align-items:stretch;gap:26px;flex-wrap:wrap}
.hstat{display:flex;flex-direction:column;gap:8px}
.hlabel{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);order:-1}
.hnum{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.hnum-text{font-size:1.3rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.hsep{width:1px;align-self:stretch;background:var(--border)}
@media(max-width:560px){.hsep{display:none}.hero-stats{gap:18px 28px}}
/* declutter the hero on phones — drop the stat row, tighten spacing */
@media(max-width:640px){
  .hero{min-height:auto;padding:112px 6vw 52px}
  .hero-stats{display:none}
  .hero .sub{margin-bottom:30px}
  .hero-cta{margin-bottom:6px}
}

/* ---------- SUITE PAGE HEADER ---------- */
.suite-hero{padding:170px 6vw 30px;max-width:1000px;margin:0 auto;text-align:center}
.suite-hero .eyebrow{margin-bottom:26px}
.suite-hero-h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:800;line-height:1.04;letter-spacing:-.03em;margin-bottom:24px}
.suite-hero .sub{font-size:clamp(1.05rem,2vw,1.28rem);color:var(--muted);max-width:62ch;margin:0 auto}

/* hero visual — live AI console panel */
.hero-visual{flex:0 0 420px;position:relative;will-change:transform}
@media(max-width:1080px){.hero-visual{display:none}}
/* brand emblem */
.emblem{position:relative;width:420px;height:420px;margin:0 auto;display:grid;place-items:center}
.emblem-glow{position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,rgba(41,121,255,0.3),transparent 64%);filter:blur(22px)}
@media(prefers-reduced-motion:no-preference){.emblem-glow{animation:embpulse 5.5s ease-in-out infinite}}
@keyframes embpulse{0%,100%{opacity:.55;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
.emblem-svg{position:relative;width:100%;height:100%;overflow:visible}
.emblem-svg text{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:5px;fill:var(--muted);text-transform:uppercase}
.emb-ticks{fill:none;stroke:rgba(41,121,255,0.45);stroke-width:6;stroke-dasharray:1.5 11}
.emb-ring{fill:none;stroke:var(--border);stroke-width:1.5}
.emb-ring.faint{stroke:rgba(41,121,255,0.12)}
.emb-node{fill:var(--accent);filter:drop-shadow(0 0 5px rgba(0,212,255,0.8))}
.emb-node.sm{fill:var(--primary);filter:none}
.rot-slow,.rot-rev,.rot-med{transform-origin:200px 200px}
.emb-mark{transform-origin:200px 204px}
@media(prefers-reduced-motion:no-preference){
  .rot-slow{animation:spin 90s linear infinite}
  .rot-rev{animation:spin 70s linear infinite reverse}
  .rot-med{animation:spin 26s linear infinite}
  .emb-mark{animation:embmark 4.5s ease-in-out infinite}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes embmark{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.emblem-caption{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-family:'Space Mono',monospace;
  font-size:.62rem;letter-spacing:.22em;color:var(--faint)}

/* ---------- MARQUEE ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0;
  background:linear-gradient(180deg,rgba(10,15,30,0.85),rgba(8,12,24,0.6));position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(41,121,255,0.1),transparent 70%)}
.marquee-track{display:flex;gap:30px;align-items:center;white-space:nowrap;width:max-content;position:relative}
@media(prefers-reduced-motion:no-preference){.marquee-track{animation:marq 38s linear infinite}}
@keyframes marq{to{transform:translateX(-50%)}}
.m-item{font-weight:700;font-size:1.18rem;letter-spacing:-.01em;color:var(--text);text-transform:none;
  background:linear-gradient(120deg,#fff,#9fc2ff);-webkit-background-clip:text;background-clip:text}
.m-mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;color:var(--accent);
  border:1px solid var(--border);background:rgba(0,212,255,0.06)}
.m-mark svg{width:20px;height:20px;overflow:visible}

/* ---------- SECTION SHELL ---------- */
section{padding:110px 6vw;position:relative}
.section-tag{font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.section-title{font-size:clamp(2rem,4.5vw,3.3rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:18px;max-width:20ch;text-wrap:balance}
.section-lead{color:var(--muted);font-size:1.1rem;max-width:58ch;text-wrap:pretty}

/* ---------- ROADMAP ---------- */
.roadmap{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:64px}
.roadmap-line{position:absolute;top:7px;left:12.5%;right:12.5%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#34d399,var(--accent) 40%,#7aa6ff 72%,rgba(71,85,105,0.6));opacity:.6}
@media(max-width:980px){
  .roadmap{grid-template-columns:1fr 1fr}
  .roadmap-line{display:none}
}
@media(max-width:560px){.roadmap{grid-template-columns:1fr}}
.milestone{position:relative;display:flex;flex-direction:column;gap:18px}
.ms-top{display:flex;justify-content:center;align-items:center;height:16px}
.ms-node{position:relative;width:16px;height:16px;border-radius:50%;background:var(--bg2);border:2px solid var(--faint);z-index:1}
.ms-pulse{position:absolute;inset:2px;border-radius:50%;background:var(--faint)}
.ms-pulse.live{background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,0.6)}
.ms-pulse.beta{background:var(--accent)}
.ms-pulse.alpha{background:#7aa6ff}
.milestone:has(.ms-pulse.live) .ms-node{border-color:#34d399}
.milestone:has(.ms-pulse.beta) .ms-node{border-color:var(--accent)}
.milestone:has(.ms-pulse.alpha) .ms-node{border-color:#7aa6ff}
@media(prefers-reduced-motion:no-preference){
  .ms-pulse.live{animation:pcpulse 2.2s ease-out infinite}
  .ms-pulse.beta{animation:pulse 1.8s infinite}
}
.ms-card{flex:1;background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--border);border-radius:18px;
  padding:24px 22px;transition:border-color .4s,box-shadow .4s,transform .25s var(--ease);will-change:transform}
.ms-card:hover{border-color:rgba(41,121,255,0.42);box-shadow:0 28px 56px -26px rgba(0,0,0,.6);transform:translateY(-5px)}
.ms-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.ms-phase{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ms-status{display:inline-flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:100px;border:1px solid var(--border)}
.ms-status i{width:6px;height:6px;border-radius:50%;background:currentColor}
.ms-status.live{color:#34d399;background:rgba(52,211,153,0.08);border-color:rgba(52,211,153,0.28)}
.ms-status.beta{color:var(--accent);background:rgba(0,212,255,0.07);border-color:rgba(0,212,255,0.28)}
.ms-status.alpha{color:#7aa6ff;background:rgba(41,121,255,0.08);border-color:rgba(41,121,255,0.28)}
.ms-status.research{color:var(--faint)}
.ms-card h3{font-size:1.22rem;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.ms-card p{color:var(--muted);font-size:.9rem;line-height:1.6;margin-bottom:18px}
.ms-tags{display:flex;flex-wrap:wrap;gap:7px}
.ms-tags span{font-family:'Space Mono',monospace;font-size:.64rem;letter-spacing:.06em;color:var(--muted);
  padding:4px 10px;border-radius:100px;background:rgba(255,255,255,0.03);border:1px solid var(--border)}

/* ---------- THESIS ---------- */
.thesis-head{max-width:62ch}
.thesis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
@media(max-width:880px){.thesis-grid{grid-template-columns:1fr}}
.pillar{position:relative;background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--border);
  border-radius:20px;padding:34px 30px;overflow:hidden;transition:border-color .4s,box-shadow .4s,transform .25s var(--ease);will-change:transform}
.pillar::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:.7}
.pillar:hover{border-color:rgba(41,121,255,0.42);box-shadow:0 28px 56px -26px rgba(0,0,0,.6);transform:translateY(-5px)}
.pillar-num{font-family:'Space Mono',monospace;font-size:.9rem;letter-spacing:.1em;color:var(--accent);display:block;margin-bottom:20px}
.pillar h3{font-size:1.34rem;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
.pillar p{color:var(--muted);font-size:.95rem;line-height:1.65}

/* ---------- WHAT WE BUILD (teaser) ---------- */
.suite-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:46px}
.suite-all{font-family:'Space Mono',monospace;font-size:.84rem;letter-spacing:.04em;color:var(--accent);text-decoration:none;
  border:1px solid var(--border);padding:11px 20px;border-radius:100px;transition:border-color .3s,background .3s;white-space:nowrap}
.suite-all:hover{border-color:var(--primary);background:rgba(41,121,255,0.08)}
.teasers{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.teasers{grid-template-columns:1fr}}
.teaser{position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;
  background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--border);border-radius:22px;padding:34px;
  transition:border-color .5s,box-shadow .5s,transform .25s var(--ease)}
.teaser::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;opacity:.85;
  background:linear-gradient(90deg,var(--c1,var(--primary)),var(--c2,var(--accent)))}
.teaser:hover{border-color:rgba(41,121,255,0.42);box-shadow:0 32px 64px -28px rgba(0,0,0,.65);transform:translateY(-6px)}
.teaser-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.teaser-icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:rgba(41,121,255,0.1);border:1px solid var(--border);margin-bottom:20px}
.teaser-icon svg{width:28px;height:28px}
.teaser-icon.kelvyn{color:var(--accent)}
.teaser-icon.tradoc{color:var(--primary)}
.teaser:hover .teaser-icon{border-color:rgba(41,121,255,0.5);box-shadow:0 0 24px -4px var(--glow)}
.teaser h3{font-size:1.8rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.teaser-tag{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.teaser p{color:var(--muted);line-height:1.6;margin-bottom:22px}
.teaser-link{font-family:'Space Mono',monospace;font-size:.8rem;letter-spacing:.04em;color:var(--text);transition:letter-spacing .25s,color .25s}
.teaser:hover .teaser-link{color:var(--accent);letter-spacing:.12em}

/* ---------- PRODUCTS ---------- */
.products{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px}
@media(max-width:880px){.products{grid-template-columns:1fr}}
.product-card{position:relative;background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--border);
  border-radius:22px;padding:40px;overflow:hidden;transition:border-color .5s,box-shadow .5s,transform .25s var(--ease);
  transform-style:preserve-3d;will-change:transform}
/* top accent bar — distinct hue per product */
.product-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;opacity:.85;
  background:linear-gradient(90deg,var(--c1,var(--primary)),var(--c2,var(--accent)))}
.pc-kelvyn{--c1:#00D4FF;--c2:#2979FF}
.pc-tradoc{--c1:#2979FF;--c2:#6C9Cff}
.pc-index{font-family:'Space Mono',monospace;font-size:2rem;font-weight:700;
  letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(41,121,255,0.4);line-height:1}
.product-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),rgba(41,121,255,0.13),transparent 42%)}
.product-card:hover{border-color:rgba(41,121,255,0.42);box-shadow:0 36px 70px -26px rgba(0,0,0,0.65)}
.product-card:hover::before{opacity:1}
.product-card>*{position:relative;z-index:1}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.pc-meta{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.pc-status{display:inline-flex;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:#34d399}
.pc-pulse{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,0.6)}
@media(prefers-reduced-motion:no-preference){.pc-pulse{animation:pcpulse 2.2s ease-out infinite}}
@keyframes pcpulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,0.55)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.pc-icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:rgba(41,121,255,0.1);border:1px solid var(--border)}
.pc-icon svg{width:28px;height:28px}
.pc-icon.kelvyn{color:var(--accent)}
.pc-icon.tradoc{color:var(--primary)}
.product-card:hover .pc-icon{border-color:rgba(41,121,255,0.5);box-shadow:0 0 24px -4px var(--glow)}
.pc-tag{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.product-card h3{font-size:2rem;font-weight:800;margin-bottom:12px;letter-spacing:-.02em}
.product-card p{color:var(--muted);margin-bottom:22px;line-height:1.6}
.pc-features{list-style:none;margin-bottom:24px}
.pc-features li{display:flex;align-items:center;gap:11px;padding:6px 0;color:var(--muted);font-size:.94rem}
.pc-features li::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:rgba(0,212,255,0.12);border:1px solid var(--accent);color:var(--accent);font-size:.66rem;flex-shrink:0}

/* product mini-demos */
.pc-demo{background:rgba(4,7,14,0.6);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:26px;display:flex;flex-direction:column;gap:11px}
.demo-row{display:flex;align-items:center;gap:12px}
.demo-k{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.06em;color:var(--muted);min-width:78px}
.demo-bar{flex:1;height:8px;border-radius:6px;background:rgba(255,255,255,0.06);overflow:hidden}
.demo-bar i{display:block;height:100%;width:var(--w);border-radius:6px;background:linear-gradient(90deg,var(--primary),var(--accent))}
@media(prefers-reduced-motion:no-preference){.reveal.in .demo-bar i{width:0;animation:fillbar 1.4s .3s var(--ease) forwards}}
@keyframes fillbar{to{width:var(--w)}}
.demo-kw{margin-left:auto;font-weight:800;font-size:1.1rem;color:var(--accent);font-variant-numeric:tabular-nums}
.demo-stamp{margin-left:auto;font-family:'Space Mono',monospace;font-size:.66rem;color:var(--faint)}
.demo-wave{display:flex;align-items:center;gap:4px;height:34px}
.demo-wave i{flex:1;background:linear-gradient(180deg,var(--primary),var(--accent));border-radius:3px;height:30%;opacity:.85}
@media(prefers-reduced-motion:no-preference){
  .demo-wave i{animation:wave 1.1s ease-in-out infinite}
  .demo-wave i:nth-child(2n){animation-duration:.9s}
  .demo-wave i:nth-child(3n){animation-duration:1.3s}
  .demo-wave i:nth-child(4n){animation-duration:.8s}
  .demo-wave i:nth-child(5n){animation-duration:1.2s}
}
@keyframes wave{0%,100%{height:20%}50%{height:95%}}

.pc-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-card{flex:1;min-width:130px;text-align:center;padding:13px;border-radius:11px;font-weight:600;font-size:.92rem;text-decoration:none;transition:box-shadow .3s,background .3s,border-color .3s}
.btn-card.fill{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 6px 24px var(--glow)}
.btn-card.fill:hover{box-shadow:0 12px 32px var(--glow)}
.btn-card.line{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-card.line:hover{border-color:var(--primary);background:rgba(41,121,255,0.08)}

/* ---------- PRICING ---------- */
.toggle-shell{position:relative;display:flex;gap:4px;padding:5px;border:1px solid var(--border);border-radius:100px;background:rgba(8,12,24,0.6)}
.toggle-ind{position:absolute;top:5px;left:5px;width:calc(50% - 5px);height:calc(100% - 10px);border-radius:100px;
  background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 6px 22px var(--glow);transition:transform .4s var(--ease)}
.toggle-prod{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;font-family:'Space Mono',monospace;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 34px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:color .3s}
.toggle-prod svg{width:18px;height:18px;opacity:.7;transition:opacity .3s}
.toggle-prod.active{color:#fff}
.toggle-prod.active svg{opacity:1}
@media(max-width:480px){.toggle-prod{padding:11px 22px}.toggle-prod svg{display:none}}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto;transition:opacity .18s,transform .18s}
.tiers.swapping{opacity:0;transform:translateY(8px)}
@media(max-width:880px){.tiers{grid-template-columns:1fr;max-width:440px}}
.tier{background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--border);border-radius:20px;
  padding:36px 30px;position:relative;display:flex;flex-direction:column;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.tier:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(0,0,0,.6)}
.tier.featured{border-color:var(--primary);box-shadow:0 0 50px -12px var(--glow)}
.tier.featured::before{content:"MOST POPULAR";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:.66rem;font-family:'Space Mono',monospace;
  letter-spacing:.12em;padding:6px 16px;border-radius:100px;box-shadow:0 4px 16px var(--glow);white-space:nowrap}
.tier-name{font-family:'Space Mono',monospace;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.tier-price{font-size:3rem;font-weight:800;letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:2px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.tier-price .dollar{font-size:1.6rem;font-weight:700}
.tier-price small{font-size:1rem;color:var(--faint);font-weight:400;margin-left:2px}
/* billing cycle line beneath the price */
.tier-bill{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.04em;color:var(--faint);margin-top:8px}
.tier-bill.free{color:var(--accent)}
/* annual badge row */
.tier-badges{display:flex;flex-wrap:wrap;gap:7px;min-height:26px;margin-top:12px;align-items:center}
.pill-annual{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
  color:#34d399;background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3)}
/* billing toggle (Monthly / Annual) */
.bill-toggle{display:flex;justify-content:center;margin:44px 0 46px}
.toggle-shell.bill .toggle-prod{padding:10px 30px;flex:1 1 0;justify-content:center}
.bill-save{font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:#34d399;
  background:rgba(52,211,153,0.12);border:1px solid rgba(52,211,153,0.32);padding:2px 7px;border-radius:100px;margin-left:8px}
.toggle-prod[data-bill].active .bill-save{color:#fff;background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.3)}
@media(max-width:480px){.toggle-shell.bill .toggle-prod{padding:10px 18px}.bill-save{display:none}}
.tier-desc{color:var(--muted);font-size:.9rem;margin:16px 0 24px;min-height:40px}
.tier ul{list-style:none;margin-bottom:28px;flex:1}
.tier ul li{display:flex;gap:10px;padding:7px 0;font-size:.9rem;color:var(--muted);align-items:flex-start}
.tier ul li b{color:var(--text);font-weight:600}
.tier ul li::before{content:"→";color:var(--accent);flex-shrink:0}
.btn-tier{display:block;text-align:center;padding:14px;border-radius:11px;font-weight:600;cursor:pointer;border:none;width:100%;
  font-size:.95rem;font-family:'Sora',sans-serif;transition:box-shadow .3s,background .3s,border-color .3s}
.btn-tier.fill{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 6px 24px var(--glow)}
.btn-tier.fill:hover{box-shadow:0 12px 32px var(--glow)}
.btn-tier.line{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-tier.line:hover{border-color:var(--primary);background:rgba(41,121,255,0.08)}
.pricing-note{text-align:center;color:var(--faint);font-size:.82rem;margin-top:30px}
/* one-off credit packs strip beneath the tiers */
.credit-packs{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  max-width:1100px;margin:24px auto 0;padding:28px 30px;border:1px solid var(--border);border-radius:20px;
  background:linear-gradient(160deg,var(--surface2),var(--surface))}
.credit-packs h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.credit-packs p{color:var(--muted);font-size:.9rem}
.credit-packs p b{color:var(--text);font-weight:600}
.credit-packs .btn-card{flex-shrink:0}

/* ---------- DISCORD ---------- */
.discord{margin:0 6vw 110px;border-radius:24px;overflow:hidden;position:relative;text-align:center;padding:66px 48px;
  background:linear-gradient(135deg,rgba(41,121,255,0.12),rgba(0,212,255,0.06));border:1px solid var(--border)}
.discord::after{content:"";position:absolute;width:400px;height:400px;background:var(--glow);filter:blur(120px);border-radius:50%;top:-150px;right:-100px;opacity:.4}
.discord-particles{position:absolute;inset:0;pointer-events:none}
.discord-particles i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.4}
.discord-particles i:nth-child(1){left:12%;top:30%}
.discord-particles i:nth-child(2){left:28%;top:70%}
.discord-particles i:nth-child(3){left:44%;top:20%}
.discord-particles i:nth-child(4){left:60%;top:62%}
.discord-particles i:nth-child(5){left:74%;top:34%}
.discord-particles i:nth-child(6){left:88%;top:58%}
.discord-particles i:nth-child(7){left:20%;top:48%}
.discord-particles i:nth-child(8){left:82%;top:18%}
@media(prefers-reduced-motion:no-preference){
  .discord-particles i{animation:floatp 7s ease-in-out infinite}
  .discord-particles i:nth-child(2n){animation-duration:9s;animation-delay:-2s}
  .discord-particles i:nth-child(3n){animation-duration:6s;animation-delay:-4s}
}
@keyframes floatp{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(-22px);opacity:.7}}
.discord h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-bottom:14px;position:relative;z-index:1}
.discord p{color:var(--muted);max-width:46ch;margin:0 auto 30px;position:relative;z-index:1}
.btn-discord{display:inline-flex;align-items:center;gap:12px;background:#5865F2;color:#fff;padding:16px 34px;border-radius:12px;
  font-weight:600;text-decoration:none;position:relative;z-index:1;box-shadow:0 8px 30px rgba(88,101,242,0.4);transition:box-shadow .3s}
.btn-discord:hover{box-shadow:0 14px 40px rgba(88,101,242,0.55)}

/* ---------- FOOTER ---------- */
footer{padding:72px 6vw 38px;border-top:1px solid var(--border);position:relative;background:linear-gradient(180deg,transparent,rgba(8,12,24,0.5))}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;flex-wrap:wrap;margin-bottom:48px}
@media(max-width:760px){.footer-top{grid-template-columns:1fr;gap:40px}}
.footer-brand{max-width:36ch}
.footer-brand .logo{margin-bottom:16px}
.footer-brand p{color:var(--muted);font-size:.95rem;line-height:1.65}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:480px){.footer-cols{grid-template-columns:repeat(2,1fr);gap:28px}}
.footer-col h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:18px;font-family:'Space Mono',monospace}
.footer-col a{display:block;color:var(--muted);text-decoration:none;font-size:.93rem;padding:6px 0;transition:color .25s,padding-left .25s}
.footer-col a:hover{color:var(--accent);padding-left:4px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:28px;border-top:1px solid var(--border);color:var(--faint);font-size:.82rem;letter-spacing:.01em}
.footer-legal{display:flex;gap:22px}
.footer-legal a{color:var(--faint);text-decoration:none;transition:color .25s}
.footer-legal a:hover{color:var(--accent)}

/* ---------- LEGAL PAGES ---------- */
.legal-hero{padding:158px 6vw 26px;max-width:840px;margin:0 auto}
.legal-hero .eyebrow{margin-bottom:22px}
.legal-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:16px}
.legal-updated{font-family:'Space Mono',monospace;font-size:.8rem;color:var(--faint);letter-spacing:.04em}
.legal-wrap{max-width:840px;margin:0 auto;padding:18px 6vw 110px}
.legal-intro{color:var(--muted);font-size:1.06rem;line-height:1.7;margin-bottom:38px;max-width:64ch}
.legal-toc{border:1px solid var(--border);border-radius:16px;background:linear-gradient(160deg,var(--surface2),var(--surface));padding:24px 28px;margin-bottom:54px}
.legal-toc h4{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.legal-toc ol{list-style:none;columns:2;column-gap:30px;font-size:.92rem}
.legal-toc a{color:var(--muted);text-decoration:none;display:block;padding:5px 0;transition:color .25s,padding-left .25s}
.legal-toc a:hover{color:var(--accent);padding-left:4px}
.legal-section{margin-bottom:40px;scroll-margin-top:96px}
.legal-section h2{font-size:1.32rem;font-weight:700;letter-spacing:-.01em;margin-bottom:16px;display:flex;gap:13px;align-items:baseline}
.legal-section h2 .n{font-family:'Space Mono',monospace;font-size:.86rem;color:var(--accent);font-weight:400;flex-shrink:0}
.legal-section h3{font-size:1.04rem;font-weight:600;margin:22px 0 8px;color:var(--text)}
.legal-section p,.legal-section li{color:var(--muted);font-size:1rem;line-height:1.72}
.legal-section p{margin-bottom:14px}
.legal-section ul{margin:0 0 18px 0;padding-left:20px}
.legal-section li{margin-bottom:8px}
.legal-section a{color:var(--accent);text-decoration:none}
.legal-section a:hover{text-decoration:underline}
.legal-section strong{color:var(--text);font-weight:600}
.legal-note{border-left:3px solid var(--primary);background:rgba(41,121,255,0.06);padding:15px 20px;border-radius:0 12px 12px 0;margin:6px 0 24px}
.legal-note p{margin:0;color:var(--text);font-size:.96rem;line-height:1.65}
.legal-back{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-family:'Space Mono',monospace;font-size:.82rem;color:var(--muted);text-decoration:none;letter-spacing:.04em;transition:color .25s}
.legal-back:hover{color:var(--accent)}
@media(max-width:620px){.legal-toc ol{columns:1}}

/* ---------- MODAL ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(3,5,12,0.8);backdrop-filter:blur(8px);z-index:200;display:none;
  align-items:center;justify-content:center;opacity:0;transition:opacity .35s}
.modal-overlay.show{display:flex;opacity:1}
.modal{background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--border);border-radius:20px;padding:44px;
  max-width:420px;width:90%;position:relative;transform:translateY(30px) scale(.96);transition:transform .4s var(--ease);box-shadow:0 40px 80px -20px rgba(0,0,0,0.7)}
.modal-overlay.show .modal{transform:translateY(0) scale(1)}
.modal h3{font-size:1.6rem;font-weight:800;margin-bottom:8px;letter-spacing:-.02em}
.modal p{color:var(--muted);font-size:.92rem;margin-bottom:24px}
.modal .field{margin-bottom:16px}
.modal label{display:block;font-size:.8rem;color:var(--faint);margin-bottom:7px;font-family:'Space Mono',monospace;letter-spacing:.06em}
.modal input{width:100%;padding:13px 15px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid var(--border);color:var(--text);
  font-family:'Sora',sans-serif;font-size:.95rem;transition:border-color .25s}
.modal input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(41,121,255,0.15)}
.modal-close{position:absolute;top:18px;right:18px;background:none;border:none;color:var(--faint);font-size:1.5rem;cursor:pointer;transition:color .25s;line-height:1}
.modal-close:hover{color:var(--text)}
.modal-note{text-align:center;font-size:.8rem;color:var(--faint);margin-top:18px}
.modal-note a{color:var(--accent);text-decoration:none}
.soon-badge{display:inline-block;background:rgba(0,212,255,0.1);border:1px solid var(--border);color:var(--accent);font-family:'Space Mono',monospace;
  font-size:.68rem;letter-spacing:.1em;padding:4px 10px;border-radius:100px;margin-bottom:18px}
.auth-msg{font-size:.82rem;line-height:1.4;min-height:0;margin:0 0 0;transition:color .2s}
.auth-msg:empty{display:none}
.auth-msg.ok{color:var(--accent);margin-bottom:14px}
.auth-msg.err{color:#ff6b6b;margin-bottom:14px}

/* ---------- TOAST ---------- */
#toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(140%);z-index:400;max-width:90vw;
  background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--border);color:var(--text);
  padding:16px 22px;border-radius:13px;font-size:.9rem;line-height:1.5;box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
  transition:transform .45s var(--ease);max-width:440px}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ===================================================================
   ENTRANCE ANIMATIONS — only when motion is allowed.
   Base = visible. .reveal stays at opacity 1 if this block never applies.
   =================================================================== */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .reveal.in{opacity:1;transform:translateY(0)}
  /* stagger children that share a parent reveal grid */
  .roadmap .milestone:nth-child(3){transition-delay:.08s}
  .roadmap .milestone:nth-child(4){transition-delay:.16s}
  .roadmap .milestone:nth-child(5){transition-delay:.24s}
  .products .product-card:nth-child(2){transition-delay:.1s}

  /* hero word-by-word reveal */
  .hero-h1 .line{overflow:hidden}
  .hero-h1 [data-word]{opacity:0;transform:translateY(110%);animation:reveal .9s var(--ease) forwards}
  .hero-h1 .line:nth-child(1) [data-word]:nth-child(1){animation-delay:.15s}
  .hero-h1 .line:nth-child(1) [data-word]:nth-child(2){animation-delay:.27s}
  .hero-h1 .line:nth-child(1) [data-word]:nth-child(3){animation-delay:.39s}
  .hero-h1 .line:nth-child(2) [data-word]:nth-child(1){animation-delay:.51s}
  .hero-h1 .line:nth-child(2) [data-word]:nth-child(2){animation-delay:.63s}

  .eyebrow{opacity:0;animation:rise .8s .05s forwards}
  .hero .sub{opacity:0;animation:rise .8s .7s forwards}
  .hero-cta{opacity:0;animation:rise .8s .82s forwards}
  .hero-stats{opacity:0;animation:rise .8s .94s forwards}
  .hero-visual{opacity:0;animation:rise 1s 1s forwards}
}


/* ===================================================================
   2026 REDESIGN — "Direction 4" additions
   New homepage product index, end panel, suite product rows.
   Everything above is the original stylesheet, untouched, so the
   legal pages, modal, pricing grid and nav keep working as-is.
   =================================================================== */

/* ---------- hero: third word on line two of the new headline ---------- */
@media(prefers-reduced-motion:no-preference){
  .hero-h1 .line:nth-child(2) [data-word]:nth-child(3){animation-delay:.75s}
}

/* ---------- icon tiles (product / lab / idea glyphs) ---------- */
.vx-ptile{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(41,121,255,0.1);border:1px solid var(--border)}
.vx-ptile svg{width:26px;height:26px}
.vx-ptile.kelvyn{color:var(--accent)}
.vx-ptile.tradox{color:var(--primary)}
.vx-ptile.lab{color:#7aa6ff;opacity:.85}
.vx-ptile.idea{color:var(--accent)}
.vx-ptile.ledgyn{color:#7aa6ff}
.vx-ptile.weldex{color:var(--accent)}

/* ---------- homepage product index ---------- */
.vx-index{border-top:1px solid var(--border)}
.vx-irow{display:grid;grid-template-columns:56px 64px 1fr auto auto;gap:24px;align-items:center;
  padding:30px 0;border-bottom:1px solid var(--border);color:inherit;text-decoration:none;
  transition:background .3s}
a.vx-irow:hover{background:rgba(41,121,255,0.04)}
.vx-irow .vx-n{font-family:'Space Mono',monospace;font-size:.88rem;color:var(--accent)}
.vx-irow h3{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin:0}
.vx-irow .vx-small{font-size:.94rem;color:var(--muted);margin-top:3px}
.vx-irow .vx-arrow{font-size:1.25rem;color:var(--accent)}
.vx-irow.vx-lab .vx-n{color:#7aa6ff}
.vx-irow.vx-lab h3{font-size:1.4rem}
.vx-irow.vx-lab .vx-arrow{color:var(--faint)}
.vx-irow.vx-idea h3{font-size:1.4rem}
.vx-irow.vx-idea .vx-arrow{color:var(--accent)}
@media(max-width:760px){
  .vx-irow{grid-template-columns:52px 1fr auto;gap:14px}
  .vx-irow .vx-n,.vx-irow .vx-arrow{display:none}
  .vx-irow h3{font-size:1.4rem}
}

/* status / action pills on index rows */
.vx-pill-lab{display:inline-flex;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:#7aa6ff;
  border:1px solid rgba(122,166,255,0.38);background:rgba(122,166,255,0.08);padding:5px 11px;border-radius:100px;white-space:nowrap}
.vx-pill-lab i{width:6px;height:6px;border-radius:50%;background:currentColor}
.vx-pill-idea{display:inline-flex;align-items:center;font-family:'Space Mono',monospace;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap;
  border:1px solid rgba(0,212,255,0.35);background:rgba(0,212,255,0.06);padding:9px 19px;border-radius:100px;
  transition:background .25s,border-color .25s}
.vx-irow:hover .vx-pill-idea{background:rgba(0,212,255,0.12);border-color:rgba(0,212,255,0.55)}
.vx-pill-live{display:inline-flex;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:#34d399;white-space:nowrap;
  background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.28);padding:5px 11px;border-radius:100px}
.vx-pill-live i{width:6px;height:6px;border-radius:50%;background:currentColor}
@media(prefers-reduced-motion:no-preference){.vx-pill-live i{animation:pcpulse 2.2s ease-out infinite}}

/* ---------- end panel (statement + founder line) ---------- */
.vx-endpanel{position:relative;border-radius:24px;padding:52px 56px;overflow:hidden;
  background:linear-gradient(135deg,rgba(41,121,255,0.12),rgba(0,212,255,0.06));border:1px solid var(--border)}
.vx-endpanel::after{content:"";position:absolute;width:380px;height:380px;top:-160px;right:-120px;
  border-radius:50%;filter:blur(110px);background:rgba(41,121,255,0.3);pointer-events:none}
.vx-endpanel .vx-big{position:relative;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:600;line-height:1.42;
  letter-spacing:-.015em;color:var(--text);max-width:38ch;margin:0 0 20px}
.vx-endpanel .vx-fline{position:relative;color:var(--muted);font-size:.95rem;line-height:1.6;max-width:66ch;margin:0}
.vx-endpanel .vx-fline b{color:var(--accent);font-weight:600}
@media(max-width:640px){.vx-endpanel{padding:36px 28px}}

/* ---------- suite page: left-aligned header ---------- */
.vx-pagehead{padding:158px 6vw 26px;max-width:1140px;margin:0 auto}
.vx-pagehead h1{font-size:clamp(2.4rem,5.5vw,4rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:14px 0 0}
.vx-pagehead .sub{font-size:clamp(1.02rem,1.8vw,1.2rem);color:var(--muted);max-width:54ch;margin:16px 0 0}
.vx-sect-label{font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

/* ---------- suite page: product rows ---------- */
.vx-prows{max-width:1140px;margin:0 auto;padding:30px 6vw 0}
.vx-prow{display:grid;grid-template-columns:56px 1fr 340px;gap:28px;padding:48px 0;
  border-bottom:1px solid var(--border);align-items:start}
.vx-prow .vx-n{font-family:'Space Mono',monospace;font-size:.88rem;color:var(--accent);padding-top:8px}
.vx-phead{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.vx-prow h3{font-size:2.2rem;font-weight:800;letter-spacing:-.02em;margin:0}
.vx-prow .vx-tag{font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:3px}
.vx-prow p{color:var(--muted);font-size:1rem;line-height:1.65;max-width:48ch;margin:0 0 24px}
.vx-specpanel{list-style:none;background:linear-gradient(160deg,var(--surface2),var(--surface));
  border:1px solid var(--border);border-radius:16px;padding:22px 24px;margin:0}
.vx-specpanel li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.07);font-size:.9rem;color:var(--text)}
.vx-specpanel li:last-child{border-bottom:none}
.vx-specpanel li b{font-family:'Space Mono',monospace;font-size:.64rem;letter-spacing:.1em;
  color:var(--accent);text-transform:uppercase;font-weight:400;padding-top:3px;flex-shrink:0}
@media(max-width:880px){
  .vx-prow{grid-template-columns:1fr;gap:18px}
  .vx-prow .vx-n{display:none}
}

/* ---------- slim footer ---------- */
.vx-footer{padding:34px 6vw;border-top:1px solid var(--border);
  background:linear-gradient(180deg,transparent,rgba(8,12,24,0.5))}
.vx-footer .vx-frow{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  color:var(--faint);font-size:.82rem}
.vx-footer a{color:var(--faint);text-decoration:none;transition:color .25s}
.vx-footer a:hover{color:var(--accent)}
.vx-footer .vx-flinks{display:flex;gap:22px}

/* ---------- failsafe: never let reveal content stay hidden ----------
   The .reveal entrance normally waits for the IntersectionObserver in
   app.js. If JS is blocked, fails, or the observer never fires, this
   auto-completes every reveal 1.2s after load — content can never be
   permanently invisible. When the observer DOES fire first, .in wins
   and this rule stops matching. */
@media(prefers-reduced-motion:no-preference){
  @keyframes vx-appear{to{opacity:1;transform:translateY(0)}}
  .reveal:not(.in){animation:vx-appear .9s var(--ease) 1.2s forwards}
}

/* ---------- redesign: hero content is visible immediately ----------
   The redesigned pages drop the entrance fades (calmer, and content can
   never be stuck hidden). Ambient motion — emblem rotation, glow drift,
   pulses, magnetic buttons, cursor light — is unchanged. */
@media(prefers-reduced-motion:no-preference){
  .hero .sub,.hero-cta{opacity:1;animation:none}
}

/* ---------- pricing polish ----------
   Tier bullets: the original flex layout split <b> tags into separate
   flex columns ("Enhanced / AI" stacking). Block flow + absolute arrow
   lets bold text wrap like a normal sentence. */
.tier ul li{display:block;position:relative;padding:7px 0 7px 26px}
.tier ul li::before{content:"\2192";position:absolute;left:0;top:7px;color:var(--accent)}

/* credit packs as clean chips, not an inline dash-list */
.vx-packrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.credit-packs .btn-card{flex:0 0 auto} /* stop the original flex:1 ballooning the button */
.vx-pack{position:relative;display:flex;align-items:baseline;gap:7px;border:1px solid var(--border);
  border-radius:14px;padding:14px 20px;background:rgba(255,255,255,0.02)}
.vx-pack .n{font-weight:800;font-size:1.3rem;letter-spacing:-.02em;color:var(--text)}
.vx-pack .lbl{font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.vx-pack .pr{font-weight:700;color:var(--accent);margin-left:8px}
.vx-pack-best{position:absolute;top:-9px;right:12px;font-family:'Space Mono',monospace;font-size:.56rem;
  letter-spacing:.1em;text-transform:uppercase;color:#34d399;background:#0a1420;
  border:1px solid rgba(52,211,153,0.35);padding:2px 8px;border-radius:100px}

/* ===== Studio reframe: flagship + client CTA (added) ===== */

.vx-flag-kicker{
  display:inline-block;font:700 .72rem/1 "Space Mono",monospace;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem;
}
.vx-flag-title{font:800 clamp(1.6rem,3.4vw,2.4rem)/1.1 "Sora",sans-serif;color:var(--text);margin:0 0 .6rem}
.vx-flag-lead{font:400 1rem/1.6 "Sora",sans-serif;color:var(--muted);max-width:62ch;margin:0}

.vx-flag{
  border:1px solid var(--border);border-radius:22px;
  background:linear-gradient(160deg,var(--surface2),var(--surface));
  padding:clamp(22px,4vw,40px);
}
.vx-flag-head{margin-bottom:1.6rem}
.vx-flag-layers{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin-bottom:1.6rem}
@media(max-width:720px){.vx-flag-layers{grid-template-columns:1fr}}
.vx-layer{
  border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,0.02);
  padding:18px;transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.vx-layer:hover{border-color:rgba(41,121,255,0.4);transform:translateY(-2px)}
.vx-layer-ic{font-size:1.5rem;display:block;margin-bottom:.5rem}
.vx-layer h4{font:700 1.05rem/1.2 "Sora",sans-serif;color:var(--text);margin:0 0 .35rem}
.vx-layer p{font:400 .9rem/1.5 "Sora",sans-serif;color:var(--muted);margin:0}
.vx-flag-cta{display:flex;gap:12px;flex-wrap:wrap}

.vx-index-head{margin:0 0 1.6rem}

.vx-cta-band{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--border);border-radius:22px;
  background:linear-gradient(135deg,rgba(41,121,255,0.10),rgba(0,212,255,0.06));
  padding:clamp(22px,4vw,38px);
}
.vx-cta-band .vx-flag-title{margin-bottom:.4rem}

/* ===== About section (home) ===== */
.vx-about{border:1px solid var(--border);border-radius:24px;background:linear-gradient(160deg,var(--surface2),var(--surface));padding:clamp(26px,4.5vw,52px)}
.vx-about .vx-flag-title{margin:.2rem 0 1.1rem;max-width:18ch}
.vx-about-p{font:400 1.02rem/1.7 "Sora",sans-serif;color:var(--muted);max-width:68ch;margin:0 0 1rem}
.vx-about .vx-fline{margin-top:1.4rem}
.vx-about-cta{margin-top:1.6rem}