/* ---------- hero: real ring construction (values from the reference) ----------
   perspective 5400px · ring radius 37vmin · letter size 35% of radius
   rotateX tilt 18deg · intro rotateY 102deg -> -295deg · ambient -360deg loop
------------------------------------------------------------------------- */
.hero{--ring-radius:37vmin;--ring-tilt:18deg;--ring-letter:calc(var(--ring-radius) * .35);--ring-from:102deg;--ring-to:-295deg;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(120px,16vh,180px);padding-top:90px;overflow:clip}
.ring-stage{position:absolute;inset:0;display:grid;place-items:center;perspective:5400px;pointer-events:none;z-index:0}
.ring{position:relative;width:calc(var(--ring-radius) * 2);height:calc(var(--ring-radius) * 2);transform-style:preserve-3d;transform:rotateX(var(--ring-tilt)) rotateY(var(--ring-from));will-change:transform}
.ring.intro{animation:hero-ring-intro 2.6s cubic-bezier(.16,1,.3,1) forwards}
.ring.ambient{animation:hero-ring-ambient 70s linear infinite}
@keyframes hero-ring-intro{0%{transform:rotateX(var(--ring-tilt)) rotateY(var(--ring-from))}to{transform:rotateX(var(--ring-tilt)) rotateY(var(--ring-to))}}
@keyframes hero-ring-ambient{0%{transform:rotateX(var(--ring-tilt)) rotateY(var(--ring-to))}to{transform:rotateX(var(--ring-tilt)) rotateY(calc(var(--ring-to) - 360deg))}}
.ring .slot{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}
.ring .ltr{font-family:var(--display);font-weight:700;line-height:1;font-size:var(--ring-letter);letter-spacing:-.06em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 38px rgba(129,140,248,.30));opacity:0;will-change:transform,opacity,clip-path}
.ring.fade .ltr{animation:hero-letter-fade .5s ease forwards}
.ring.wipe .ltr{animation:hero-letter-wipe .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes hero-letter-fade{0%{opacity:0}to{opacity:1}}
@keyframes hero-letter-wipe{0%{clip-path:inset(0 100% 0 0);opacity:1}to{clip-path:inset(0);opacity:1}}
.ring-halo{position:absolute;width:calc(var(--ring-radius) * 2);height:calc(var(--ring-radius) * 2);border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(129,140,248,.15),rgba(240,171,252,.06) 45%,transparent 68%);filter:blur(20px);transform:scale(1.15)}
@media(max-width:820px){.hero{--ring-radius:42vmin;--ring-tilt:14deg}}
/* per-character reveal, mirrors the reference split-char stagger */
.split{display:inline-flex;flex-wrap:wrap}
.split .ch{display:inline-block;white-space:pre;opacity:0;transform:translateY(.14em);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--base-delay,0ms) + var(--d,0ms))}
.split.on .ch{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.split .ch{opacity:1;transform:none;transition:none}}
.hero-inner{position:relative;z-index:2}
.hero-kicker{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.live{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;box-shadow:0 0 0 1px var(--line-strong) inset;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{max-width:16ch}
.hero .hero-sub{margin-top:26px;max-width:52ch}
.hero-actions{display:flex;align-items:center;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(48px,7vh,84px);max-width:720px;border-top:1px solid var(--line);padding-top:18px}
.hero-meta div{display:flex;flex-direction:column;gap:4px}
.hero-meta strong{font-family:var(--display);font-size:.95rem;letter-spacing:-.03em;font-weight:700}
.hero-meta span{font-size:.78rem;color:var(--mute)}
@media(max-width:640px){.hero-meta{grid-template-columns:1fr 1fr;gap:14px}.hero{padding-bottom:110px}}
.scroll-cue{position:absolute;right:var(--edge);bottom:26px;z-index:2;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.scroll-cue span{width:1px;height:40px;background:linear-gradient(var(--mute),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}60%{transform:scaleY(1);transform-origin:top}100%{opacity:0}}
@media(max-width:820px){.scroll-cue{display:none}}

/* chat composer — the signature CTA */
.composer{margin-top:30px;width:100%;max-width:620px;border-radius:22px;background:rgba(11,13,34,.72);box-shadow:0 0 0 1px var(--line-strong),0 24px 60px -30px rgba(0,0,0,.9);backdrop-filter:blur(14px);overflow:hidden;transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.composer:focus-within{box-shadow:0 0 0 1px rgba(167,139,250,.55),0 30px 70px -30px rgba(99,102,241,.6)}
.composer-top{display:flex;align-items:center;gap:10px;padding:13px 16px 0}
.ava{width:26px;height:26px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--display);font-size:.68rem;color:#07081a;flex:none;box-shadow:0 0 0 3px rgba(167,139,250,.14)}
.composer-top .who{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.composer-top .who b{color:var(--paper);font-weight:500}
.composer form{display:flex;align-items:flex-end;gap:12px;padding:10px 12px 12px 16px}
.composer textarea{flex:1;min-height:26px;max-height:120px;resize:none;border:0;background:none;color:var(--paper);font:400 1rem/1.45 var(--text);letter-spacing:-.01em;padding:4px 0;outline:none}
.composer textarea::placeholder{color:var(--mute)}
.send{width:40px;height:40px;border-radius:12px;background:var(--paper);color:#07081a;display:grid;place-items:center;flex:none;transition:transform .3s var(--ease),background .3s}
.send:hover{transform:translateY(-1px) scale(1.03)}
.send[disabled]{opacity:.45;cursor:progress}
.composer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px 12px;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 11px;border-radius:999px;font-size:.72rem;color:var(--soft);box-shadow:0 0 0 1px var(--line) inset;transition:background .25s,color .25s,box-shadow .25s}
.chip:hover{background:rgba(165,180,252,.10);color:var(--paper);box-shadow:0 0 0 1px var(--line-strong) inset}
.hint{font-size:.68rem;color:var(--mute)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:640px){.hero-actions .btn{width:100%}.composer-foot .hint{display:none}.hero h1{max-width:12ch}}