/* ===== Rex landing — 1:1 with the desktop app ===== */
:root{
  --bg:#0c0c0c; --sidebar:#131313; --panel:#191919; --panel-2:#111; --panel-3:#202020;
  --border:#1c1c1c; --border-strong:#262626;
  --text:#f5f5f4; --text-secondary:rgba(245,245,244,.58); --text-tertiary:rgba(245,245,244,.34);
  --accent:#ffa770; --accent-soft:rgba(255,167,112,.10); --accent-ring:rgba(255,167,112,.30);
  --danger:#ff6b6b; --danger-soft:rgba(255,107,107,.10);
  --add:#7cd48c; --add-soft:rgba(124,212,140,.10); --del:#ff8a8a; --del-soft:rgba(255,138,138,.10);
  --info:#8fd6ff; --info-soft:rgba(143,214,255,.10); --violet:#c5a1ff; --violet-soft:rgba(197,161,255,.10);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;border-color:var(--border);-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent-soft);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.mono{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace}
.tabnum{font-variant-numeric:tabular-nums}

/* ---- Global layout ---- */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 18px}}
section{padding:120px 0;position:relative}
@media(max-width:900px){section{padding:80px 0}}
@media(max-width:600px){section{padding:64px 0}}
.center{text-align:center}
.grid{display:grid;gap:16px}

/* Section head */
.sec-head{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 auto 56px;max-width:720px;text-align:center}
.sec-head.left{text-align:left;align-items:flex-start;margin:0 0 48px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-ring);border-radius:999px}
.eyebrow .dot{width:6px;height:6px;border-radius:99px;background:var(--accent);box-shadow:0 0 8px var(--accent-ring)}
.eyebrow.neutral{color:var(--text-secondary);background:var(--panel-3);border-color:var(--border-strong)}
.eyebrow.neutral .dot{background:var(--text-secondary);box-shadow:none}

h1,h2,h3,h4{letter-spacing:-.02em;font-weight:600;line-height:1.06;color:var(--text)}
h1{font-size:clamp(44px,7.6vw,84px);letter-spacing:-.038em;font-weight:600;line-height:1}
h2{font-size:clamp(30px,4.6vw,52px);letter-spacing:-.028em;line-height:1.05}
h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.015em}
h4{font-size:15px;letter-spacing:-.005em}
.lead{color:var(--text-secondary);font-size:clamp(15px,1.35vw,17px);max-width:600px;line-height:1.55}
.sec-head .lead{margin:0 auto}
.sec-head.left .lead{margin:0}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500;font-size:14px;padding:10px 18px;border-radius:999px;transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .3s var(--ease);white-space:nowrap;border:1px solid transparent;cursor:pointer;user-select:none}
.btn:active{transform:translateY(1px)}
.btn.lg{padding:13px 24px;font-size:15px;letter-spacing:-.005em}
.btn.xl{padding:15px 28px;font-size:16px;letter-spacing:-.005em}
.btn.sm{padding:7px 12px;font-size:12.5px}
.btn-primary{background:#fff;color:#0c0c0c;font-weight:500}
.btn-primary:hover{background:#f2f2f0}
.btn-accent{background:var(--accent);color:#180b02;font-weight:500;box-shadow:0 0 0 0 var(--accent-ring),0 6px 24px -8px rgba(255,167,112,.5)}
.btn-accent:hover{background:#ffb182;box-shadow:0 0 0 4px var(--accent-soft),0 8px 30px -6px rgba(255,167,112,.55)}
.btn-ghost{color:var(--text-secondary);background:var(--panel);border-color:var(--border-strong)}
.btn-ghost:hover{color:var(--text);background:var(--panel-3);border-color:var(--border-strong)}
.btn-outline{color:var(--text);background:transparent;border-color:var(--border-strong)}
.btn-outline:hover{background:var(--panel);border-color:#333}
.btn .kbd{margin-left:6px;padding:1px 5px;font-size:10.5px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:4px;color:rgba(255,255,255,.7);font-family:JetBrains Mono,monospace}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.btn.xl svg{width:16px;height:16px}
.btn.sm svg{width:13px;height:13px}
.gh-stat svg{width:14px;height:14px;flex:0 0 auto}
.hero-meta svg{width:13px;height:13px}
.dl-item .p svg{width:20px;height:20px}
.dl-item .foot .arw svg{width:14px;height:14px}
.chip svg{width:11px;height:11px;flex:0 0 auto}
.eyebrow svg{width:12px;height:12px;flex:0 0 auto}
.side ul li svg{width:16px;height:16px;flex:0 0 16px}
.tier ul li svg{width:15px;height:15px;flex:0 0 15px}
.foot-social svg{width:14px;height:14px}
.hint svg{width:12px;height:12px}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);background:rgba(12,12,12,.65);border-bottom:1px solid transparent;transition:background .25s var(--ease),border-color .25s var(--ease)}
.nav.scrolled{border-color:var(--border);background:rgba(12,12,12,.85)}
.nav-in{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.015em;font-size:15px}
.brand-mark{width:24px;height:24px;flex:0 0 24px;color:#f5f5f4}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:16px}
.nav-links a{padding:8px 12px;border-radius:8px;font-size:14px;color:var(--text-secondary);transition:color .15s var(--ease),background .15s var(--ease)}
.nav-links a:hover{color:var(--text);background:var(--panel)}
.nav-spacer{flex:1}
.nav-cta{display:flex;align-items:center;gap:8px}
.gh-stat{display:inline-flex;align-items:center;gap:8px;padding:7px 10px 7px 12px;font-size:13px;color:var(--text-secondary);background:var(--panel);border:1px solid var(--border-strong);border-radius:999px}
.gh-stat .num{color:var(--text);font-weight:500;padding-left:8px;border-left:1px solid var(--border-strong);margin-left:4px}
.nav-menu-btn{display:none;width:38px;height:38px;border-radius:8px;color:var(--text-secondary);border:1px solid var(--border-strong);align-items:center;justify-content:center}
.nav-menu-btn:hover{color:var(--text);background:var(--panel)}
@media(max-width:900px){.nav-links,.nav-cta .btn-ghost,.gh-stat{display:none}.nav-menu-btn{display:inline-flex}}

.mobile-menu{position:fixed;inset:64px 0 0 0;background:rgba(12,12,12,.98);backdrop-filter:blur(20px);z-index:59;display:none;flex-direction:column;padding:24px;gap:6px;transform:translateY(-8px);opacity:0;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.mobile-menu.open{display:flex;transform:translateY(0);opacity:1}
.mobile-menu a{padding:16px 12px;border-radius:10px;font-size:16px;color:var(--text-secondary);border-bottom:1px solid var(--border)}
.mobile-menu a:hover{color:var(--text);background:var(--panel)}
.mobile-menu .btn{margin-top:20px;padding:14px 22px;font-size:15px}

/* ---- Hero ---- */
.hero{padding:56px 0 40px;position:relative;overflow:hidden}
.hero-grid{position:absolute;inset:0;background:
  radial-gradient(60% 60% at 50% 0%,rgba(255,167,112,.06),transparent 60%),
  linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px) 0 0/44px 44px,
  linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 20%,black,transparent 70%);mask-image:radial-gradient(80% 60% at 50% 20%,black,transparent 70%);pointer-events:none}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;padding-top:40px}
.hero h1{max-width:14ch}
.hero h1 .mark{display:inline-flex;align-items:center;vertical-align:baseline}
.hero h1 .mark svg{width:.9em;height:.9em;margin:0 .12em 0 .04em;transform:translateY(6px);color:#f5f5f4;filter:drop-shadow(0 6px 20px rgba(255,167,112,.35))}
.hero .lead{max-width:660px;font-size:clamp(16px,1.55vw,19px)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;color:var(--text-tertiary);font-size:12.5px;margin-top:2px}
.hero-meta span{display:inline-flex;align-items:center;gap:6px}
.hero-meta svg{width:13px;height:13px;color:var(--add)}

/* Hero window (1:1 app) */
.hero-window{margin:64px auto 0;width:100%;max-width:1180px;padding:0 12px}
.window-frame{background:var(--bg);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset,0 0 120px -30px rgba(255,167,112,.08);position:relative}
.window-frame::before{content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.4}

/* ===== APP SHELL — 1:1 recreation ===== */
.app{display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-size:13px;height:100%;min-height:520px}
.app.big{min-height:680px}

/* TopBar 36px */
.topbar{display:flex;align-items:center;height:36px;padding:0 4px 0 12px;background:var(--bg);border-bottom:1px solid var(--border);flex:0 0 36px;user-select:none}
.tb-left{display:flex;align-items:center;gap:8px;font-size:13px}
.tb-left .ghost-mark{width:15px;height:15px;color:#f5f5f4}
.tb-left b{font-weight:500;letter-spacing:-.005em}
.tb-sep{color:var(--text-tertiary);margin:0 6px;font-size:12px}
.tb-title{color:var(--text-secondary);font-size:12.5px;padding:4px 6px;border-radius:6px;transition:color .15s var(--ease),background .15s var(--ease);max-width:36ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-title:hover{color:var(--text);background:var(--panel)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:4px;padding-right:4px}
.tb-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;font-size:11px;border-radius:999px;background:var(--panel-2);color:var(--text-secondary);font-weight:500}
.tb-chip.accent{background:var(--accent-soft);color:var(--accent)}
.tb-chip .dot{width:5px;height:5px;border-radius:99px;background:currentColor}
.wc{display:flex;margin-left:6px}
.wc button{width:28px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;color:var(--text-tertiary);transition:color .12s var(--ease),background .12s var(--ease)}
.wc button:hover{color:var(--text);background:var(--panel)}
.wc button.close:hover{color:#fff;background:#e5484d}
.wc svg{width:11px;height:11px}

.app-body{flex:1;min-height:0;display:flex}

/* LeftRail 268px */
.rail{width:248px;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;flex:0 0 248px;padding:12px 10px 10px}
.rail-new{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:8px;background:var(--panel);color:var(--text);font-weight:500;font-size:13px;transition:background .15s var(--ease)}
.rail-new:hover{background:var(--panel-3)}
.rail-new svg{width:14px;height:14px;color:var(--accent)}
.rail-nav{display:flex;gap:2px;margin-top:8px;padding:0 2px}
.rail-nav button{flex:1;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--text-tertiary);transition:color .15s var(--ease),background .15s var(--ease);position:relative}
.rail-nav button:hover{color:var(--text-secondary);background:var(--panel-2)}
.rail-nav button.active{color:var(--text);background:var(--panel);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 1px 2px rgba(0,0,0,.4)}
.rail-nav svg{width:16px;height:16px}
.rail-util{display:flex;gap:2px;margin-top:8px;padding:0 4px;color:var(--text-tertiary)}
.rail-util button{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px}
.rail-util button:hover{color:var(--text-secondary);background:var(--panel-2)}
.rail-util svg{width:13px;height:13px}
.rail-util .spacer{flex:1}
.rail-sessions{flex:1;overflow:hidden;margin-top:8px;display:flex;flex-direction:column;gap:14px;padding:0 2px}
.grp-head{display:flex;align-items:center;gap:6px;padding:6px 8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.grp-head svg{width:11px;height:11px}
.grp-list{display:flex;flex-direction:column;gap:1px}
.ses{display:flex;align-items:center;gap:8px;height:30px;padding:0 6px 0 10px;border-radius:6px;color:var(--text-secondary);font-size:12.5px;position:relative;cursor:pointer;transition:color .12s var(--ease),background .12s var(--ease)}
.ses:hover{color:var(--text);background:var(--panel)}
.ses.active{background:var(--accent-soft);color:var(--text)}
.ses.active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.ses .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ses .icons{display:none;gap:2px;color:var(--text-tertiary)}
.ses:hover .icons{display:flex}
.ses .icons button{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:4px}
.ses .icons button:hover{color:var(--text);background:var(--panel-3)}
.ses .icons svg{width:11px;height:11px}
.rail-user{display:flex;align-items:center;gap:8px;padding:8px 6px;border-top:1px solid var(--border);margin:8px -6px -4px}
.rail-user .av{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#3a2419,#1a0f08);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:11px;font-weight:600}
.rail-user .who{flex:1;line-height:1.2}
.rail-user .who b{font-size:12.5px;font-weight:500;color:var(--text);display:block}
.rail-user .who small{font-size:10.5px;color:var(--text-tertiary)}

/* Main column */
.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.chat-tools{position:absolute;top:12px;right:16px;z-index:2;display:flex;background:rgba(25,25,25,.75);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:8px;padding:3px;gap:1px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.chat-tools button{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:5px;color:var(--text-tertiary);transition:color .12s var(--ease),background .12s var(--ease)}
.chat-tools button:hover{color:var(--text);background:var(--panel-3)}
.chat-tools button.active{color:var(--accent);background:var(--accent-soft)}
.chat-tools svg{width:12px;height:12px}

/* Transcript */
.transcript{flex:1;overflow:hidden;padding:36px 32px 12px;max-width:820px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:22px;position:relative}
.day-div{align-self:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);padding:2px 0}
.msg-user{align-self:flex-end;max-width:78%;background:var(--panel);color:var(--text);padding:10px 16px;border-radius:22px 22px 6px 22px;font-size:13.5px;line-height:1.55}
.msg-user code{font-family:JetBrains Mono,monospace;background:rgba(255,167,112,.14);color:var(--accent);padding:1px 6px;border-radius:4px;font-size:12px}
.msg-ai{display:flex;gap:12px;align-items:flex-start}
.mini-head{width:26px;height:26px;border-radius:99px;flex:0 0 26px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:hsl(24,55%,16%)}
.mini-head svg{width:20px;height:20px;color:hsl(24,88%,82%)}
.msg-body{flex:1;min-width:0;padding-top:1px}
.status-line{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:6px}
.status-line .d{width:5px;height:5px;border-radius:99px;background:var(--accent)}
.status-line b{color:var(--text);font-weight:500}
.status-line span{color:var(--text-tertiary)}
.msg-body p{font-size:13.5px;line-height:1.6;color:var(--text);margin:4px 0}
.msg-body p code{font-family:JetBrains Mono,monospace;background:var(--panel-2);color:var(--accent);padding:1px 5px;border-radius:4px;font-size:11.5px;border:1px solid var(--border)}
.caret{display:inline-block;width:2px;height:14px;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* Tool strip */
.tool{display:flex;align-items:center;gap:10px;padding:4px 2px;font-size:12.5px;color:var(--text)}
.tool .ic{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:color .2s var(--ease)}
.tool.running .ic{color:var(--accent)}
.tool.done .ic{color:var(--text-secondary)}
.tool .ic svg{width:14px;height:14px}
.tool .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);min-width:34px}
.tool .path{font-family:JetBrains Mono,monospace;color:var(--text);font-size:12px}
.tool .body{font-family:JetBrains Mono,monospace;color:var(--text-tertiary);font-size:11.5px;margin-left:auto;padding-right:4px}
.tool .spin{width:12px;height:12px;border:1.5px solid var(--text-tertiary);border-top-color:var(--accent);border-radius:99px;animation:spin 1s linear infinite;flex:0 0 12px;margin-left:auto}
.tool .chk{width:12px;height:12px;color:var(--accent);flex:0 0 12px;margin-left:auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* Diff card */
.diff{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:6px;background:var(--panel-2);font-family:JetBrains Mono,monospace;font-size:11.5px}
.diff-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--panel);border-bottom:1px solid var(--border);font-size:12px}
.diff-head svg{width:12px;height:12px;color:var(--text-tertiary)}
.diff-head .p{color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diff-head .stat.add{color:var(--add)}
.diff-head .stat.del{color:var(--del)}
.diff-body{padding:8px 0;max-height:180px;overflow:hidden}
.dline{display:grid;grid-template-columns:32px 1fr;font-size:11.5px;line-height:1.55}
.dline .no{color:var(--text-tertiary);text-align:right;padding:0 8px;user-select:none}
.dline .co{padding:0 10px;color:var(--text-secondary);white-space:pre;overflow:hidden}
.dline.add{background:var(--add-soft)}
.dline.add .no{color:var(--add)}
.dline.add .co{color:var(--add)}
.dline.del{background:var(--del-soft)}
.dline.del .no{color:var(--del)}
.dline.del .co{color:var(--del)}

/* Todo block */
.todo{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-top:6px}
.todo-head{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-secondary);margin-bottom:8px}
.todo-head svg{width:12px;height:12px;color:var(--accent)}
.todo-head .l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.todo-head .n{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text-tertiary);font-size:11px}
.todo-item{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12.5px}
.todo-item .box{width:14px;height:14px;border-radius:4px;background:var(--panel-2);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:transparent;flex:0 0 14px}
.todo-item.done .box{background:var(--accent);color:#000;border-color:var(--accent)}
.todo-item.done .box svg{width:9px;height:9px}
.todo-item.done span{color:var(--text-tertiary);text-decoration:line-through}

/* Composer */
.composer{padding:12px 32px 20px;max-width:820px;margin:0 auto;width:100%}
.comp-box{background:var(--panel);border-radius:16px;transition:box-shadow .3s var(--ease);border:1px solid transparent}
.comp-box.focus{box-shadow:0 0 0 1px var(--accent-ring),0 0 24px -8px var(--accent-ring)}
.comp-input{padding:14px 16px 4px;font-size:14px;line-height:1.55;min-height:52px;color:var(--text-tertiary);white-space:pre-wrap;word-break:break-word}
.comp-input .typed{color:var(--text)}
.comp-input .cursor{display:inline-block;width:1px;height:16px;background:var(--accent);vertical-align:-3px;animation:blink 1s steps(2) infinite}
.comp-bar{display:flex;align-items:center;gap:2px;padding:6px 10px 8px}
.comp-bar .ico{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--text-tertiary)}
.comp-bar .ico:hover{color:var(--text);background:var(--panel-2)}
.comp-bar .ico svg{width:15px;height:15px}
.comp-bar .spacer{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--panel-2);font-size:11.5px;color:var(--text-secondary);font-weight:500;cursor:pointer;transition:background .15s var(--ease)}
.chip:hover{background:var(--panel-3)}
.chip.mode{border:1px solid var(--accent-ring);color:var(--accent);background:var(--accent-soft)}
.chip svg{width:11px;height:11px}
.chip .dot{width:6px;height:6px;border-radius:99px;background:var(--accent)}
.chip.ctx svg.ring{width:14px;height:14px}
.send{width:30px;height:30px;border-radius:99px;background:var(--accent);color:#000;display:inline-flex;align-items:center;justify-content:center}
.send.idle{background:var(--panel-2);color:var(--text-tertiary)}
.send svg{width:13px;height:13px}
.hint{display:flex;justify-content:center;gap:12px;margin-top:10px;font-size:11px;color:var(--text-tertiary)}
.hint span{display:inline-flex;align-items:center;gap:5px}
.hint .d{width:5px;height:5px;border-radius:99px;background:var(--accent);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Marquee */
.marquee{padding:28px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;background:var(--panel-2);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq{display:flex;gap:48px;animation:mq 42s linear infinite;color:var(--text-tertiary);font-size:13px;font-weight:500;white-space:nowrap;align-items:center;width:max-content}
.mq b{color:var(--text);font-weight:500}
.mq svg{width:14px;height:14px;color:var(--accent);opacity:.7}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- Bento ---- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;grid-auto-rows:minmax(280px,auto)}
@media(max-width:1000px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.bento{grid-template-columns:1fr}}
.bcard{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.bcard:hover{border-color:var(--border-strong)}
.bcard.span-4{grid-column:span 4}
.bcard.span-3{grid-column:span 3}
.bcard.span-2{grid-column:span 2}
.bcard.span-6{grid-column:span 6}
.bcard.tall{grid-row:span 2}
@media(max-width:1000px){.bcard.span-4,.bcard.span-3,.bcard.span-2,.bcard.span-6{grid-column:span 2}.bcard.tall{grid-row:auto}}
@media(max-width:640px){.bcard.span-4,.bcard.span-3,.bcard.span-2,.bcard.span-6{grid-column:span 1}}
.bcard-header{padding:28px 28px 16px;position:relative;z-index:1}
.bcard-header h3{font-size:20px;letter-spacing:-.015em;margin-bottom:8px}
.bcard-header p{color:var(--text-secondary);font-size:13.5px;line-height:1.55;max-width:52ch}
.bcard-viz{flex:1;position:relative;overflow:hidden;min-height:220px;padding:0 0 0 28px}
.bcard-viz.pad{padding:0 28px 28px}
.bcard.compact .bcard-header{padding:24px 24px 12px}
.bcard.compact .bcard-header h3{font-size:17px}
.bcard.compact .bcard-header p{font-size:13px}
.bcard.compact .bcard-viz{padding-left:24px}
.bcard.compact .bcard-viz.pad{padding:0 24px 24px}

/* Feature: alternating side-by-side */
.side{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center;margin:0 auto;max-width:1100px}
.side.rev{grid-template-columns:6fr 5fr;direction:rtl}
.side.rev>*{direction:ltr}
@media(max-width:900px){.side,.side.rev{grid-template-columns:1fr;direction:ltr;gap:32px}}
.side ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:22px}
.side ul li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text-secondary)}
.side ul li svg{width:16px;height:16px;color:var(--accent);flex:0 0 16px;margin-top:3px}
.side .visual{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:28px;min-height:400px;position:relative;overflow:hidden;display:flex;flex-direction:column}

/* ---- Model popover mockup ---- */
.mp{width:100%;max-width:320px;background:var(--panel-3);border:1px solid var(--border-strong);border-radius:12px;padding:6px;box-shadow:0 24px 48px rgba(0,0,0,.55)}
.mp-row{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:8px;font-size:12.5px;color:var(--text)}
.mp-row:hover{background:var(--panel)}
.mp-row svg.li{width:14px;height:14px;color:var(--text-secondary)}
.mp-row .r{margin-left:auto;color:var(--text-secondary);font-size:12px;display:flex;align-items:center;gap:6px}
.mp-row .r svg{width:11px;height:11px;color:var(--text-tertiary)}
.mp-block{padding:10px 10px 12px}
.mp-block .lab{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary);margin-bottom:8px}
.mp-block .lab svg{width:12px;height:12px;color:var(--accent)}
.mp-slider{height:6px;background:var(--panel);border-radius:99px;position:relative;overflow:visible}
.mp-slider .fill{height:100%;background:var(--accent);border-radius:99px;transition:width .6s var(--ease)}
.mp-slider .knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;background:#fff;border:2px solid var(--accent);border-radius:99px;transition:left .6s var(--ease)}
.mp-slider .marks{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em}
.mp-slider .marks span.on{color:var(--accent)}
.seg{display:flex;background:var(--panel);border-radius:8px;padding:2px;margin-top:12px}
.seg button{flex:1;height:26px;border-radius:6px;font-size:11.5px;color:var(--text-secondary);transition:color .18s var(--ease),background .18s var(--ease)}
.seg button.on{background:var(--panel-3);color:var(--text)}
.mp-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.mp-meta .mc{background:var(--panel);padding:8px 10px;border-radius:6px}
.mp-meta .mc .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.mp-meta .mc .v{font-family:JetBrains Mono,monospace;font-size:12px;color:var(--text);margin-top:2px}

/* ---- Provider list ---- */
.plist{display:flex;flex-direction:column;gap:8px}
.prov{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;transition:border-color .2s var(--ease)}
.prov.linked{border-color:var(--accent-ring)}
.prov .pdot{width:8px;height:8px;border-radius:99px;flex:0 0 8px}
.prov .info{flex:1}
.prov .info .n{font-size:13.5px;font-weight:500;color:var(--text)}
.prov .info .s{font-size:11.5px;color:var(--text-tertiary);margin-top:1px;font-family:JetBrains Mono,monospace}
.prov .st{width:8px;height:8px;border-radius:99px;background:var(--add);box-shadow:0 0 8px rgba(124,212,140,.6);animation:beat 2s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}

/* ---- Console mockup ---- */
.console{background:var(--sidebar);border-radius:12px;border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;height:100%;min-height:280px}
.con-head{display:flex;align-items:center;gap:8px;padding:0 8px;height:38px;background:var(--panel-2);border-bottom:1px solid var(--border);font-size:12.5px}
.con-head svg{width:13px;height:13px;color:var(--accent)}
.con-head b{color:var(--text);font-weight:500}
.con-head .sub{color:var(--text-tertiary);font-family:JetBrains Mono,monospace;font-size:11px}
.con-head .div{width:1px;height:18px;background:rgba(255,255,255,.06);margin:0 10px}
.con-tabs{display:flex;gap:2px}
.con-tab{display:flex;align-items:center;gap:6px;padding:0 10px;height:26px;border-radius:6px;font-size:11.5px;color:var(--text-tertiary);cursor:pointer}
.con-tab.on{background:var(--panel);color:var(--text)}
.con-tab .n{font-variant-numeric:tabular-nums;font-size:10px;color:var(--text-tertiary)}
.con-body{flex:1;overflow:hidden;font-family:JetBrains Mono,monospace;font-size:11.5px;line-height:1.65;padding:6px 0;position:relative}
.con-body.stream{display:flex;flex-direction:column;justify-content:flex-end}
.con-row{display:grid;grid-template-columns:74px 66px 76px 1fr;gap:6px;padding:2px 12px 2px 0;align-items:center;animation:conRow .4s var(--ease) both}
@keyframes conRow{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.con-row .t{color:var(--text-tertiary);padding-left:12px;font-variant-numeric:tabular-nums;font-size:10.5px}
.con-row .sev{display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 6px;border-radius:4px;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.con-row .sev.info{background:var(--info-soft);color:var(--info)}
.con-row .sev.log{background:var(--panel);color:var(--text-secondary)}
.con-row .sev.warn{background:var(--accent-soft);color:var(--accent)}
.con-row .sev.err{background:var(--del-soft);color:var(--del)}
.con-row .src{color:var(--text-tertiary);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.con-row .m{color:var(--text);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.con-row .m .path{color:var(--text-tertiary)}

/* ---- Marketplace grid mockup ---- */
.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:600px){.mk-grid{grid-template-columns:repeat(2,1fr)}}
.mk-card{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:transform .3s var(--ease),border-color .2s var(--ease)}
.mk-card:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.mk-thumb{aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mk-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 50% at 50% 100%,rgba(0,0,0,.4),transparent)}
.mk-thumb .glyph{width:44px;height:44px;border-radius:14px;background:rgba(0,0,0,.28);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;color:currentColor}
.mk-thumb .glyph svg{width:22px;height:22px}
.mk-thumb .chip{position:absolute;top:8px;left:8px;font-size:9px;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;background:rgba(0,0,0,.5);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(4px);z-index:1;display:flex;align-items:center;gap:4px}
.mk-thumb .chip.acc{background:rgba(255,167,112,.16);color:var(--accent);border-color:rgba(255,167,112,.35)}
.mk-thumb .chip svg{width:9px;height:9px}
.mk-thumb .like{position:absolute;top:8px;right:8px;font-size:10px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.5);color:rgba(255,255,255,.75);backdrop-filter:blur(4px);z-index:1;display:flex;align-items:center;gap:4px}
.mk-thumb .like svg{width:9px;height:9px}
.mk-info{padding:10px 12px 12px;display:flex;align-items:center;gap:8px}
.mk-info .av{width:24px;height:24px;border-radius:99px;flex:0 0 24px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.mk-info .meta{flex:1;min-width:0}
.mk-info .meta .n{font-size:12.5px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-info .meta .a{font-size:10.5px;color:var(--text-tertiary)}

/* ---- Agent card mockups ---- */
.ag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:640px){.ag-grid{grid-template-columns:1fr}}
.ag-card{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;overflow:hidden;position:relative}
.ag-mascot{aspect-ratio:16/8;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(60% 60% at 50% 60%,rgba(255,167,112,.08),transparent 70%),#131313;overflow:hidden}
.ag-mascot::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,black,transparent);mask-image:radial-gradient(60% 60% at 50% 50%,black,transparent);opacity:.5}
.ag-chip{position:absolute;top:8px;left:8px;font-size:9px;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;z-index:1;border:1px solid transparent}
.ag-chip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-ring)}
.ag-chip.off{background:var(--panel-2);color:var(--text-tertiary);border-color:var(--border-strong)}
.ag-power{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);border:1px solid var(--border-strong);z-index:1}
.ag-power.on{background:var(--accent-soft);color:var(--accent)}
.ag-power svg{width:11px;height:11px}
.ag-mascot .ghost-body{width:70px;height:70px}
.ag-info{padding:12px 14px}
.ag-info .n{font-size:13.5px;font-weight:500;color:var(--text);display:flex;align-items:center;gap:8px}
.ag-info .n .clk{margin-left:auto;font-size:11px;color:var(--text-tertiary);display:inline-flex;align-items:center;gap:4px}
.ag-info .n .clk svg{width:11px;height:11px}
.ag-info .mod{font-size:11px;color:var(--text-tertiary);margin-top:2px}
.ag-info .role{font-size:12.5px;color:var(--text-secondary);margin-top:8px;line-height:1.5}
.ag-info .tools{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.ag-info .tools span{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--panel-3);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em}

/* ---- Right dock / branch pane ---- */
.branch{background:var(--sidebar);border-radius:12px;border:1px solid var(--border);padding:12px;display:flex;flex-direction:column;gap:10px}
.bc{background:var(--panel);border-radius:10px;padding:12px}
.bc .lb{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:6px}
.bc .row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}
.bc .row svg{width:14px;height:14px;color:var(--accent)}
.bc .m{font-family:JetBrains Mono,monospace;font-size:11.5px;color:var(--text-secondary);margin-top:4px}
.bc .sub{font-size:11px;color:var(--text-tertiary);margin-top:4px}
.b-files .f{display:flex;align-items:center;gap:6px;padding:5px 0;font-size:12px;color:var(--text-secondary);font-family:JetBrains Mono,monospace}
.b-files .f svg{width:12px;height:12px;color:var(--text-tertiary)}
.b-files .f .add{margin-left:auto;color:var(--add);font-size:11px}
.b-files .f .del{color:var(--del);font-size:11px}
.b-files .f+.f{border-top:1px solid rgba(255,255,255,.04)}

/* ---- Ghost mascot core (used in bento) ---- */
.ghost-body{position:relative;display:flex;align-items:center;justify-content:center}
.ghost-body svg{width:100%;height:100%;overflow:visible}
.gs-body{fill:#f5f5f4}
.gs-visor{fill:#0c0c0c}
.gs-eye{fill:var(--accent);transition:rx .3s var(--ease),ry .3s var(--ease),fill .3s var(--ease),transform .3s var(--ease)}
.gs-hi{fill:rgba(255,255,255,.65);opacity:.55}
.gs-face{transform-origin:150px 118px;transform-box:fill-box;transition:transform .35s var(--ease)}
.ghost-body[data-state="idle"]{animation:float 4.5s ease-in-out infinite}
.ghost-body[data-state="thinking"]{animation:float 3s ease-in-out infinite}
.ghost-body[data-state="working"]{animation:wk 1.6s ease-in-out infinite}
.ghost-body[data-state="success"]{animation:pop .8s ease-out}
.ghost-body[data-state="error"]{animation:shake .5s ease-in-out}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes wk{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,-4px) rotate(-1.2deg)}75%{transform:translate(3px,-2px) rotate(1.2deg)}}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* Big mascot showcase */
.stage{position:relative;width:100%;aspect-ratio:1/1;max-width:360px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.stage .ghost-body{width:70%;height:70%;z-index:2}
.orbit{position:absolute;inset:12%;border-radius:50%;border:1px dashed rgba(255,167,112,.18);opacity:0;transition:opacity .3s var(--ease)}
.orbit.b{inset:0;border-color:rgba(255,167,112,.09)}
.stage.thinking .orbit,.stage.dual .orbit{opacity:1;animation:sp 14s linear infinite}
.stage.dual .orbit.b{animation-direction:reverse;animation-duration:20s}
@keyframes sp{to{transform:rotate(360deg)}}
.state-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.state-chip{padding:6px 12px;font-size:12px;border-radius:999px;color:var(--text-tertiary);background:var(--panel-2);border:1px solid var(--border);cursor:pointer;transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.state-chip:hover{color:var(--text-secondary)}
.state-chip.on{color:var(--accent);border-color:var(--accent-ring);background:var(--accent-soft)}

/* ---- Skeleton bento skins ---- */
.skel-window{background:linear-gradient(180deg,var(--bg),var(--panel-2) 100%);border:1px solid var(--border-strong);border-radius:14px;overflow:hidden;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);position:absolute;left:20px;right:-40px;bottom:-40px;top:20px;display:flex;flex-direction:column}
.skel-window .skel-top{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg)}
.skel-window .skel-top .dots{display:flex;gap:5px}
.skel-window .skel-top .dots i{width:8px;height:8px;border-radius:99px;background:#2b2b2b;display:block}
.skel-window .skel-body{flex:1;display:flex;position:relative}

/* ---- Pricing ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:28px;position:relative;display:flex;flex-direction:column;gap:14px}
.tier.feat{border-color:var(--accent-ring);background:linear-gradient(180deg,rgba(255,167,112,.05),var(--panel) 50%)}
.tier.feat::before{content:"Most popular";position:absolute;top:-1px;right:20px;transform:translateY(-50%);background:var(--accent);color:#000;font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:999px;letter-spacing:.02em}
.tier .price{font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;margin:8px 0 0}
.tier .price small{font-size:14px;color:var(--text-tertiary);font-weight:400;margin-left:6px;letter-spacing:0}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.tier ul li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-secondary);line-height:1.5}
.tier ul li svg{width:15px;height:15px;color:var(--accent);flex:0 0 15px;margin-top:2px}
.tier .btn{width:100%;justify-content:center;margin-top:auto}

/* ---- Download ---- */
.dl{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1100px;margin:40px auto 0}
@media(max-width:900px){.dl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dl{grid-template-columns:1fr}}
.dl-item{display:flex;flex-direction:column;gap:14px;padding:22px;background:var(--panel);border:1px solid var(--border);border-radius:16px;transition:border-color .25s var(--ease),transform .25s var(--ease);cursor:pointer;position:relative;overflow:hidden}
.dl-item:hover{border-color:var(--accent-ring);transform:translateY(-3px)}
.dl-item .p{width:40px;height:40px;border-radius:10px;background:var(--panel-3);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.dl-item .p svg{width:20px;height:20px}
.dl-item h4{font-size:15px;font-weight:500;color:var(--text)}
.dl-item small{font-size:12px;color:var(--text-tertiary);display:block;margin-top:2px}
.dl-item .foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-tertiary);font-family:JetBrains Mono,monospace}
.dl-item .foot .arw{color:var(--accent)}
.dl-item .foot .arw svg{width:14px;height:14px}

/* ---- FAQ ---- */
.faq{max-width:820px;margin:40px auto 0;display:flex;flex-direction:column;gap:4px}
.faq details{border:1px solid var(--border);border-radius:14px;padding:20px 22px;background:var(--panel);transition:border-color .2s var(--ease)}
.faq details[open]{border-color:var(--border-strong)}
.faq summary{cursor:pointer;font-weight:500;font-size:15.5px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{color:var(--text-tertiary);transition:transform .25s var(--ease);flex:0 0 20px}
.faq summary .chev svg{width:16px;height:16px}
.faq details[open] summary .chev{transform:rotate(45deg);color:var(--accent)}
.faq details>div{margin-top:12px;color:var(--text-secondary);font-size:14px;line-height:1.65;max-width:680px}

/* ---- Testimonials ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px}
.quote p{font-size:14px;line-height:1.65;color:var(--text);letter-spacing:-.005em}
.quote .who{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.quote .who .av{width:32px;height:32px;border-radius:99px;background:linear-gradient(135deg,#3a2419,#1a0f08);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:12px;font-weight:600}
.quote .who .n{font-size:13px;color:var(--text);font-weight:500;line-height:1.3}
.quote .who .n small{display:block;color:var(--text-tertiary);font-size:11.5px;font-weight:400}

/* ---- CTA final ---- */
.cta-final{padding:80px 40px;text-align:center;background:radial-gradient(60% 100% at 50% 0%,rgba(255,167,112,.08),transparent 70%),var(--panel);border:1px solid var(--accent-ring);border-radius:28px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:20px}
.cta-final::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(50% 100% at 50% 0%,black,transparent 80%);mask-image:radial-gradient(50% 100% at 50% 0%,black,transparent 80%);pointer-events:none}
.cta-final>*{position:relative;z-index:1}
.cta-final .ghost-body{width:80px;height:80px}

/* ---- Footer ---- */
footer{border-top:1px solid var(--border);padding:64px 0 32px;color:var(--text-tertiary);font-size:13px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px}
@media(max-width:768px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
.foot-col h5{font-size:11px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.foot-col a{display:block;padding:5px 0;color:var(--text-tertiary);transition:color .18s var(--ease);font-size:13px}
.foot-col a:hover{color:var(--text)}
.foot-brand p{max-width:280px;line-height:1.6;margin:14px 0;font-size:13px}
.foot-brand .brand{margin-bottom:4px}
.foot-bottom{padding-top:28px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--text-tertiary)}
.foot-social{display:flex;gap:6px}
.foot-social a{width:32px;height:32px;border-radius:8px;background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
.foot-social a:hover{color:var(--accent);background:var(--panel-3);border-color:var(--accent-ring)}
.foot-social svg{width:14px;height:14px}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.05s}
.reveal.d2{transition-delay:.1s}
.reveal.d3{transition-delay:.15s}
.reveal.d4{transition-delay:.2s}

/* Ambient bg */
.amb{position:absolute;pointer-events:none;filter:blur(50px);opacity:.35}
.amb.o{width:400px;height:400px;background:radial-gradient(circle,rgba(255,167,112,.18),transparent 70%);border-radius:50%}

/* Utilities */
.hide-sm{display:initial}
@media(max-width:640px){.hide-sm{display:none}}