/* SSV Studio — neon dark landing */
*,*::before,*::after{box-sizing:border-box}
/* The `hidden` attribute means display:none in the user-agent stylesheet, and ANY display
   rule of ours outranks it. Every element we toggle with .hidden here is a flex or grid
   container, so without this line "hidden" quietly means "visible": the chat composer showed
   on the sign-in step, and the sent-form confirmation would have appeared under a form that
   never went away. */
[hidden]{display:none !important}
:root{
  --bg:#06070d; --bg-2:#0a0c16;
  --ink:#eaf0ff; --ink-2:#a9b4d0; --ink-3:#7681a0;
  --line:rgba(150,170,255,.14); --line-2:rgba(150,170,255,.28);
  --cyan:#22d3ee; --violet:#8b5cf6; --pink:#f472b6; --lime:#a3e635; --amber:#fbbf24;
  --accent:var(--cyan);
  --card:rgba(255,255,255,.028);
  --radius:18px;
  --maxw:1180px;
  --font-d:'Space Grotesk',system-ui,sans-serif;
  --font-b:'Inter',system-ui,-apple-system,sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-b);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
code{font-family:var(--font-m);font-size:.88em;background:rgba(140,160,255,.1);
  border:1px solid var(--line);border-radius:5px;padding:.08em .34em;color:#cfe0ff}

/* ---------- backdrop ---------- */
.aurora{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(86px);opacity:.6;will-change:transform}
.b1{width:52vw;height:52vw;left:-12vw;top:-16vw;background:radial-gradient(circle,#22d3ee,transparent 68%);animation:drift1 26s ease-in-out infinite alternate}
.b2{width:46vw;height:46vw;right:-10vw;top:6vh;background:radial-gradient(circle,#8b5cf6,transparent 68%);animation:drift2 32s ease-in-out infinite alternate}
.b3{width:44vw;height:44vw;left:26vw;top:58vh;background:radial-gradient(circle,#f472b6,transparent 70%);opacity:.4;animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(8vw,10vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-9vw,14vh,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(6vw,-12vh,0) scale(1.2)}}
.grid-overlay{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(140,170,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(140,170,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 78%)}
.scanline{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.02) 0 1px,transparent 1px 3px)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 130% 90% at 50% 115%,rgba(6,7,13,0) 26%,rgba(6,7,13,.9) 88%)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px clamp(18px,4vw,44px);
  background:rgba(6,7,13,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-mark{display:grid;place-items:center;filter:drop-shadow(0 0 10px rgba(139,92,246,.55))}
.brand-text{font-family:var(--font-d);font-weight:700;font-size:19px;letter-spacing:.02em}
.brand-dim{color:var(--ink-3);font-weight:500}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2vw,26px);font-size:14.5px}
.nav-links a{text-decoration:none;color:var(--ink-2);transition:color .18s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{padding:8px 16px;border:1px solid var(--line-2);border-radius:99px;color:var(--ink)!important;
  background:rgba(34,211,238,.07);transition:box-shadow .22s,background .22s}
.nav-cta:hover{background:rgba(34,211,238,.14);box-shadow:0 0 0 1px rgba(34,211,238,.35),0 0 22px rgba(34,211,238,.28)}

/* ---------- layout ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.section{padding:clamp(64px,9vw,116px) 0;scroll-margin-top:76px}
.section-head{max-width:720px;margin-bottom:clamp(30px,4vw,48px)}
.section-head h2{font-family:var(--font-d);font-size:clamp(28px,4.2vw,42px);line-height:1.14;margin:0 0 10px;letter-spacing:-.02em;text-shadow:0 0 34px rgba(139,92,246,.34)}
.section-head p{margin:0;color:var(--ink-2);font-size:16.5px}
.idx{font-family:var(--font-m);font-size:.44em;color:var(--cyan);vertical-align:middle;
  margin-right:14px;padding:5px 9px;border:1px solid rgba(34,211,238,.45);border-radius:7px;
  background:rgba(34,211,238,.1);letter-spacing:.08em;
  box-shadow:0 0 18px rgba(34,211,238,.3),inset 0 0 12px rgba(34,211,238,.12);text-shadow:0 0 12px rgba(34,211,238,.8)}

/* ---------- hero ---------- */
.hero{padding:clamp(58px,10vw,120px) 0 clamp(30px,5vw,56px)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;
  font-family:var(--font-m);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line);border-radius:99px;padding:7px 15px;
  background:rgba(255,255,255,.028)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 10px var(--lime);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35;box-shadow:0 0 3px var(--lime)}}
.hero h1{font-family:var(--font-d);font-weight:700;letter-spacing:-.032em;
  font-size:clamp(38px,7.2vw,74px);line-height:1.05;margin:0 0 22px}
.grad{background:linear-gradient(96deg,#22d3ee 0%,#8b5cf6 46%,#f472b6 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(139,92,246,.34))}
.lede{max-width:64ch;margin:0 0 32px;font-size:clamp(16.5px,1.5vw,18.5px);color:var(--ink-2)}
.lede strong{color:var(--ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:clamp(42px,6vw,68px)}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-weight:600;font-size:15px;padding:13px 24px;border-radius:99px;transition:.22s;border:1px solid transparent}
.btn-primary{color:#04070e;background:linear-gradient(96deg,#22d3ee,#8b5cf6 62%,#f472b6);
  box-shadow:0 0 30px rgba(34,211,238,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 42px rgba(139,92,246,.5)}
.btn-ghost{color:var(--ink);border-color:var(--line-2);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.09);transform:translateY(-2px)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;margin:0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stats>div{position:relative;background:rgba(10,12,22,.86);padding:20px 22px}
.stats>div::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));opacity:.5}
.stats dt{font-family:var(--font-m);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.stats dd{margin:7px 0 0;font-family:var(--font-d);font-weight:600;font-size:clamp(17px,1.75vw,21px);
  background:linear-gradient(96deg,#a5f3fc,#d8b4fe);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(139,92,246,.45))}

/* ---------- cards ---------- */
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.card{position:relative;padding:26px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--card),rgba(255,255,255,.008));
  overflow:hidden;transition:transform .28s,border-color .28s,box-shadow .28s,opacity .5s}
/* Hidden ONLY when JS has announced itself. Without JS every card stays visible. */
.js-reveal .card{opacity:0;transform:translateY(18px)}
.card.in{opacity:1;transform:none}
.card::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.95;
  box-shadow:0 0 16px var(--accent)}
.card::after{content:"";position:absolute;width:280px;height:280px;right:-90px;top:-120px;border-radius:50%;
  background:radial-gradient(circle,var(--accent),transparent 66%);opacity:.16;transition:opacity .3s}
.card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 34px -6px color-mix(in srgb,var(--accent) 45%,transparent)}
.card:hover::after{opacity:.2}
.accent-cyan{--accent:var(--cyan)} .accent-violet{--accent:var(--violet)}
.accent-pink{--accent:var(--pink)} .accent-lime{--accent:var(--lime)}
.accent-amber{--accent:var(--amber)}
.card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.card-logo{flex:none;width:44px;height:44px;border-radius:12px;display:block;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  box-shadow:0 0 22px -8px var(--accent);
  border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.card-head h3{font-family:var(--font-d);font-size:20px;margin:0;letter-spacing:-.01em}
.card-head>div:nth-child(2){flex:1;min-width:0}
.domain{display:inline-block;font-family:var(--font-m);font-size:12.6px;color:var(--accent);
  text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.22);overflow-wrap:anywhere}
.domain:hover{border-bottom-style:solid;text-shadow:0 0 14px currentColor}
.domain-off{color:var(--ink-3);border:0}
.pill{flex:none;font-family:var(--font-m);font-size:10.6px;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;border:1px solid;white-space:nowrap}
.pill-live{color:#bef264;border-color:rgba(163,230,53,.4);background:rgba(163,230,53,.1)}
.pill-beta{color:#a5f3fc;border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.1)}
.pill-wip{color:#cbd5e1;border-color:var(--line-2);background:rgba(255,255,255,.05)}
.card-body{margin:0 0 16px;color:var(--ink-2);font-size:15.2px}
.facts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px;font-size:14.2px;color:var(--ink-2)}
.facts li{position:relative;padding-left:18px}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--accent)}
.facts b{color:var(--ink);font-weight:600}
.facts a{color:var(--accent);text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.22)}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.tags li{font-family:var(--font-m);font-size:11.4px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:7px;padding:4px 9px;background:rgba(255,255,255,.022)}
.cards-wip .card{background:linear-gradient(180deg,rgba(255,255,255,.016),transparent)}
.card-wip::before{opacity:.28;background:linear-gradient(90deg,transparent,var(--ink-3),transparent)}
.card-wip .card-logo{opacity:.9}

/* ---------- principles ---------- */
.principles{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.prin{position:relative;padding:26px 24px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.006));
  transition:transform .28s,border-color .28s,opacity .5s}
.js-reveal .prin{opacity:0;transform:translateY(18px)}
.prin.in{opacity:1;transform:none}
.prin:hover{border-color:rgba(34,211,238,.42);transform:translateY(-4px);
  box-shadow:0 14px 44px rgba(0,0,0,.5),0 0 28px -10px rgba(34,211,238,.6)}
.prin-n{font-family:var(--font-m);font-size:12px;letter-spacing:.14em;color:var(--cyan);opacity:.8}
.prin h3{font-family:var(--font-d);font-size:18.5px;margin:9px 0 9px;letter-spacing:-.01em}
.prin p{margin:0;color:var(--ink-2);font-size:14.8px}
.prin-wide{grid-column:1/-1;background:
  linear-gradient(96deg,rgba(34,211,238,.09),rgba(139,92,246,.09) 52%,rgba(244,114,182,.08))}

/* ---------- contact ---------- */
.section-contact{padding-bottom:clamp(70px,9vw,120px)}
.contact-card{position:relative;text-align:center;padding:clamp(40px,6vw,72px) clamp(22px,5vw,60px);
  border:1px solid var(--line-2);border-radius:26px;overflow:hidden;
  background:radial-gradient(ellipse 70% 130% at 50% 0%,rgba(139,92,246,.2),transparent 62%),
             linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008))}
.contact-card::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,transparent,#22d3ee,#8b5cf6,#f472b6,transparent)}
.contact-card h2{font-family:var(--font-d);font-size:clamp(26px,4vw,40px);margin:0 0 12px;letter-spacing:-.02em}
.contact-card p{max-width:56ch;margin:0 auto 28px;color:var(--ink-2)}
.contact-links{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:rgba(6,7,13,.6)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:26px clamp(18px,4vw,44px);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.6px;color:var(--ink-3)}
.foot-brand{font-family:var(--font-d);font-weight:700;color:var(--ink)}
.foot-sep{opacity:.45}
.foot-dim{opacity:.75}

@media (max-width:640px){
  .nav-links a:not(.nav-cta){display:none}
  .stats>div{padding:16px 18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .card,.prin{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

.stats dd.dd-sm{font-size:clamp(15px,1.35vw,17px);letter-spacing:.01em}

/* ---------- card footer link ---------- */
.card-go{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-family:var(--font-m);font-size:12.6px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;padding:9px 14px;border-radius:99px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);transition:.2s}
.card-go:hover{background:color-mix(in srgb,var(--accent) 17%,transparent);
  box-shadow:0 0 24px -6px var(--accent)}

/* ---------- services ---------- */
.services{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:26px}
.svc{position:relative;padding:24px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));transition:.26s}
.svc:hover{border-color:rgba(139,92,246,.45);transform:translateY(-4px);
  box-shadow:0 14px 46px rgba(0,0,0,.5),0 0 30px -12px rgba(139,92,246,.85)}
.svc-ico{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  font-size:14px;color:var(--cyan);border:1px solid rgba(34,211,238,.32);
  background:rgba(34,211,238,.09);box-shadow:0 0 18px -6px var(--cyan)}
.svc h3{font-family:var(--font-d);font-size:18px;margin:13px 0 8px;letter-spacing:-.01em}
.svc p{margin:0;color:var(--ink-2);font-size:14.8px}

.how-list{padding:28px clamp(22px,4vw,38px);border:1px solid var(--line-2);border-radius:var(--radius);
  background:radial-gradient(ellipse 80% 130% at 12% 0%,rgba(34,211,238,.1),transparent 60%),
             linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008))}
.how-title{font-family:var(--font-d);font-size:19px;margin:0 0 16px;letter-spacing:-.01em}
.how-list ol{margin:0;padding-left:0;list-style:none;counter-reset:h;display:grid;gap:13px}
.how-list li{counter-increment:h;position:relative;padding-left:44px;color:var(--ink-2);font-size:15px}
.how-list li::before{content:counter(h,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--font-m);font-size:12px;color:var(--cyan);border:1px solid rgba(34,211,238,.32);
  border-radius:7px;padding:3px 7px;background:rgba(34,211,238,.08)}
.how-list b{color:var(--ink);font-weight:600}

/* ---------- lead form ---------- */
.contact-card{text-align:left}
.contact-card h2,.contact-lede{text-align:center}
.contact-lede{max-width:52ch;margin-left:auto;margin-right:auto}
.lead-form{max-width:760px;margin:0 auto;display:grid;gap:22px}
.row{display:grid;gap:22px;grid-template-columns:1fr 1fr;align-items:start}
.field{display:grid;gap:9px;min-width:0}
.lbl{display:flex;align-items:baseline;gap:8px;
  font-family:var(--font-m);font-size:11.6px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.lbl i{font-style:normal;color:var(--pink)}
.lbl i.opt{color:var(--ink-3);text-transform:none;letter-spacing:0;font-size:11px}
.counter{margin-left:auto;font-weight:400;color:var(--ink-3);letter-spacing:.04em}

.field input,.field textarea{
  width:100%;font:inherit;font-size:15.5px;color:var(--ink);
  background:rgba(3,5,11,.66);border:1px solid var(--line-2);border-radius:13px;
  padding:14px 16px;transition:border-color .18s,box-shadow .18s,background .18s}
.field textarea{resize:vertical;min-height:150px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#5d6784}
.field input:hover,.field textarea:hover{border-color:rgba(150,170,255,.42)}
.field input:focus,.field textarea:focus{
  outline:none;background:rgba(3,5,11,.9);border-color:rgba(34,211,238,.7);
  box-shadow:0 0 0 3px rgba(34,211,238,.15),0 0 30px -10px var(--cyan)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:rgba(244,114,182,.8);box-shadow:0 0 0 3px rgba(244,114,182,.13)}

/* Chips instead of dropdowns: every option visible, one tap to choose, and the radio
   underneath keeps it keyboard-operable and submittable with no JavaScript. */
.chips{border:0;margin:0;padding:0;min-width:0}
.chips legend{padding:0;margin-bottom:10px}
.chip-row{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;padding:9px 15px;border-radius:99px;font-size:14.2px;
  color:var(--ink-2);border:1px solid var(--line-2);background:rgba(255,255,255,.028);
  transition:.18s;white-space:nowrap}
.chip:hover span{color:var(--ink);border-color:rgba(150,170,255,.45)}
.chip input:checked+span{color:#04070e;font-weight:600;border-color:transparent;
  background:linear-gradient(96deg,#67e8f9,#a78bfa 65%,#f0abfc);
  box-shadow:0 0 24px -8px var(--violet)}
.chip input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:3px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:2px}
.btn-send{padding:15px 30px;font-size:15.5px}
.form-note{margin:0;font-size:14px;color:var(--ink-3);max-width:34ch}
.form-note a{color:var(--cyan);text-decoration:none;border-bottom:1px dashed rgba(34,211,238,.4)}
.form-status{margin:0;min-height:1.4em;font-size:14.5px}
.form-status.ok{color:#bef264}
.form-status.err{color:#fda4d4}
.btn[disabled]{opacity:.55;pointer-events:none}

/* The reply to a sent form is a state change, not a sentence appended underneath it. */
.form-done{max-width:560px;margin:0 auto;text-align:center;padding:12px 0 4px}
.done-mark{display:grid;place-items:center;margin-bottom:16px;
  filter:drop-shadow(0 0 22px rgba(34,211,238,.5))}
.form-done h3{font-family:var(--font-d);font-size:24px;margin:0 0 10px;letter-spacing:-.01em}
.form-done p{margin:0 auto 22px;color:var(--ink-2);max-width:46ch}
.form-done a{color:var(--cyan);text-decoration:none;border-bottom:1px dashed rgba(34,211,238,.4)}

@media (max-width:720px){
  .row{grid-template-columns:1fr;gap:18px}
  .lead-form{gap:18px}
  .form-foot{flex-direction:column;align-items:stretch;gap:14px}
  .form-foot .btn{justify-content:center}
  .form-note{max-width:none;text-align:center}
  .chip span{font-size:13.6px;padding:8px 13px}
}

/* ---------- chat widget ---------- */
.chat{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:var(--font-b)}

.chat-launcher{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  border:0;border-radius:99px;padding:13px 20px 13px 17px;font:inherit;font-size:15px;font-weight:600;
  color:#04070e;background:linear-gradient(96deg,#22d3ee,#8b5cf6 62%,#f472b6);
  box-shadow:0 10px 34px -8px rgba(139,92,246,.9),0 0 0 1px rgba(255,255,255,.08);
  transition:transform .22s,box-shadow .22s}
.chat-launcher:hover{transform:translateY(-2px);box-shadow:0 16px 44px -8px rgba(139,92,246,1)}
.chat-launcher:focus-visible{outline:2px solid #fff;outline-offset:3px}
.chat-ico{display:grid;place-items:center}
.chat-badge{position:absolute;top:-5px;right:-3px;min-width:21px;height:21px;padding:0 6px;
  display:grid;place-items:center;border-radius:99px;font-size:12px;font-weight:700;
  color:#fff;background:#e11d48;box-shadow:0 0 0 2px #06070d}
.chat.is-open .chat-launcher{transform:scale(.94);opacity:.85}

.chat-panel{display:flex;flex-direction:column;width:min(374px,calc(100vw - 28px));
  height:min(548px,calc(100vh - 130px));overflow:hidden;
  border:1px solid var(--line-2);border-radius:20px;
  background:linear-gradient(180deg,rgba(12,14,26,.99),rgba(6,7,13,.99));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 26px 70px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.03);
  animation:chat-in .22s ease-out}
@keyframes chat-in{from{opacity:0;transform:translateY(14px) scale(.98)}}

.chat-head{display:flex;align-items:center;gap:11px;padding:14px 14px 13px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(96deg,rgba(34,211,238,.13),rgba(139,92,246,.13) 60%,rgba(244,114,182,.1))}
.chat-avatar{flex:none;display:grid;place-items:center;width:40px;height:32px;border-radius:9px;
  font-family:var(--font-d);font-size:12.5px;font-weight:700;color:#c4b5fd;
  border:1.6px solid rgba(139,92,246,.7);background:rgba(139,92,246,.12)}
.chat-who{flex:1;min-width:0;display:grid;line-height:1.35}
.chat-who b{font-size:14.6px}
.chat-who span{font-size:12.4px;color:var(--ink-3)}
.chat-close{flex:none;display:grid;place-items:center;width:32px;height:32px;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;color:var(--ink-2);background:rgba(255,255,255,.04)}
.chat-close:hover{color:var(--ink);border-color:var(--line-2)}

.chat-thread{flex:1;min-height:0;overflow-y:auto;padding:16px 14px;display:flex;
  flex-direction:column;gap:9px;scrollbar-width:thin}
.chat-msg{max-width:86%;display:flex;flex-direction:column;gap:3px}
.chat-msg.from-me{align-self:flex-end;align-items:flex-end}
.chat-msg.from-studio{align-self:flex-start}
.chat-text{margin:0;padding:10px 13px;border-radius:15px;font-size:14.6px;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere}
.from-me .chat-text{color:#04070e;font-weight:500;border-bottom-right-radius:5px;
  background:linear-gradient(96deg,#67e8f9,#a78bfa 70%,#f0abfc)}
.from-studio .chat-text{color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:5px;
  background:rgba(255,255,255,.045)}
.chat-time{font-size:11px;color:var(--ink-3);padding:0 4px}
.chat-msg.pending{opacity:.6}
.chat-msg.failed .chat-text{background:rgba(244,114,182,.2);color:#fbcfe8;
  border:1px solid rgba(244,114,182,.5)}
.chat-system{align-self:center;text-align:center;max-width:94%;font-size:12.6px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:11px;padding:8px 12px;background:rgba(255,255,255,.025)}

.chat-intro{padding:4px 16px 16px}
.chat-intro>p{margin:0 0 14px;font-size:14px;color:var(--ink-2)}
.chat-intro label{display:block;margin-bottom:11px}
.chat-intro label span{display:block;margin-bottom:6px;font-family:var(--font-m);font-size:10.8px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.chat-intro label i{font-style:normal;color:var(--ink-3);text-transform:none;letter-spacing:0}
.chat-intro input{width:100%;font:inherit;font-size:14.6px;color:var(--ink);
  background:rgba(3,5,11,.7);border:1px solid var(--line-2);border-radius:11px;padding:11px 13px}
.chat-intro input:focus{outline:none;border-color:rgba(34,211,238,.7);
  box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.chat-intro .btn{width:100%;justify-content:center;margin-top:4px;padding:12px 18px;font-size:14.6px}

.chat-composer{display:flex;align-items:flex-end;gap:9px;padding:11px 12px;
  border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.chat-composer textarea{flex:1;min-width:0;height:42px;max-height:130px;resize:none;overflow-y:auto;
  font:inherit;font-size:14.6px;line-height:1.45;color:var(--ink);
  background:rgba(3,5,11,.72);border:1px solid var(--line-2);border-radius:13px;padding:11px 13px}
.chat-composer textarea:focus{outline:none;border-color:rgba(34,211,238,.7);
  box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.chat-composer button{flex:none;display:grid;place-items:center;width:42px;height:42px;cursor:pointer;
  border:0;border-radius:13px;color:#04070e;
  background:linear-gradient(96deg,#22d3ee,#8b5cf6 70%,#f472b6);
  box-shadow:0 0 22px -8px var(--violet);transition:transform .18s}
.chat-composer button:hover{transform:translateY(-1px)}
.chat-composer button:disabled{opacity:.5;pointer-events:none}

.chat-note{margin:0;padding:0 16px 12px;font-size:12.6px;color:var(--ink-3);min-height:0}
.chat-note.err{color:#fda4d4;padding-bottom:14px}

@media (max-width:520px){
  .chat-launch-text{display:none}
  .chat-launcher{padding:15px;border-radius:50%}
  .chat-panel{height:min(74vh,560px)}
}
@media (prefers-reduced-motion:reduce){ .chat-panel{animation:none} }