/* =============================================================================
   Site stylesheet — every page uses this one file.

   Sections: tokens, base, buttons, surfaces, hero, chat demo, marquee, stats,
   bento, showcase, sticky benefits, cards, pricing, FAQ, CTA, footer,
   responsive, and the inner-page components at the bottom.

   Colours are driven entirely by the tokens under html[data-theme] — nothing
   below hardcodes a background or a text colour, so the light/dark switch is a
   single attribute on <html>.
   ============================================================================= */

/* ============ TOKENS ============ */
:root{
  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --accent:#3D6BFF; --accent-2:#31E2BE; --accent-3:#FF7A4D;
  --radius:18px;
  --pad:clamp(20px,5vw,56px);
  --maxw:1240px;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#070A10; --bg-2:#0A0E16; --panel:#0E131D; --panel-2:#121927;
  --text:#EDF1F7; --text-dim:#94A1B5; --text-mute:#66738A;
  --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06);
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.075);
  --shadow:0 30px 80px -40px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.35);
  --grid:rgba(255,255,255,.045);
  --glow:.55;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#FBFBFC; --bg-2:#F1F3F7; --panel:#FFFFFF; --panel-2:#FFFFFF;
  --text:#0A0E16; --text-dim:#525F75; --text-mute:#7C8899;
  --line:rgba(10,14,22,.11); --line-soft:rgba(10,14,22,.07);
  --glass:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.92);
  --shadow:0 24px 60px -34px rgba(14,26,58,.30), 0 1px 2px rgba(14,26,58,.06);
  --grid:rgba(10,14,22,.055);
  --glow:.22;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);
  font-size:16.5px;line-height:1.65;overflow-x:hidden;
  transition:background-color .5s ease,color .5s ease;
}
h1,h2,h3,h4,.display{font-family:var(--font-display);letter-spacing:-.032em;line-height:1.04;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
img,svg{display:block;max-width:100%}

.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{position:relative;padding-block:clamp(74px,10vw,132px)}
.mono{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.dim{color:var(--text-dim)}
.mute{color:var(--text-mute)}
.lead{font-size:clamp(16.5px,1.9vw,19px);color:var(--text-dim);line-height:1.7}
.h2{font-size:clamp(31px,5.1vw,58px)}
.h3{font-size:clamp(21px,2.5vw,29px);line-height:1.18}
.accent-txt{color:var(--accent)}
.grad-txt{background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}

.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--glass);color:var(--text-dim);backdrop-filter:blur(12px)}
.eyebrow i{color:var(--accent-2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 0 rgba(49,226,190,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(49,226,190,.55)}70%{box-shadow:0 0 0 12px rgba(49,226,190,0)}100%{box-shadow:0 0 0 0 rgba(49,226,190,0)}}

/* ============ AMBIENT BG ============ */
.bg-wrap{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.bg-grid{position:absolute;inset:-2px;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 5%,rgba(0,0,0,.35) 45%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 5%,rgba(0,0,0,.35) 45%,transparent 78%)}
.bg-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--glow);will-change:transform}
.g1{width:52vw;height:52vw;left:-14vw;top:-18vw;background:radial-gradient(circle,rgba(61,107,255,.42),transparent 62%)}
.g2{width:44vw;height:44vw;right:-12vw;top:8vh;background:radial-gradient(circle,rgba(49,226,190,.30),transparent 62%)}
.g3{width:40vw;height:40vw;left:38vw;top:78vh;background:radial-gradient(circle,rgba(255,122,77,.20),transparent 65%)}
.bg-noise{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E")}
[data-theme="light"] .bg-noise{mix-blend-mode:multiply;opacity:.28}
.spot{position:fixed;width:520px;height:520px;left:0;top:0;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(61,107,255,.13),transparent 62%);opacity:0;transition:opacity .5s}
main,footer,nav{position:relative;z-index:2}

/* ============ NAV ============ */
.skip{position:fixed;left:14px;top:-70px;z-index:200;background:var(--accent);color:#fff;padding:11px 18px;border-radius:10px;transition:top .25s}
.skip:focus{top:14px}
#progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:120;
  background:linear-gradient(90deg,var(--accent),var(--accent-2) 55%,var(--accent-3))}
.nav{position:fixed;top:0;left:0;right:0;z-index:110;transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line-soft)}
.nav-inner{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:19.5px;letter-spacing:-.03em}
/* Wordmark. The logo exists in two cuts — dark lettering for light backgrounds,
   white for dark — and each is illegible on the other. Both are in the markup
   and this hides the one that does not match, so the swap lands in the same
   paint as the rest of the theme rather than after a script runs. */
.brand-logo{height:48px;width:auto;display:block}
.brand-logo--footer{height:42px}
html[data-theme="light"] .brand-logo--dark{display:none}
html[data-theme="dark"] .brand-logo--light{display:none}
.brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent),#2A4FD8 60%,var(--accent-2));box-shadow:0 8px 22px -8px var(--accent)}
.brand small{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;color:var(--text-mute);display:block;font-weight:400;margin-top:-3px}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{position:relative;padding:9px 14px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--text-dim);transition:color .25s,background-color .25s}
.nav-links a:hover{color:var(--text);background:var(--glass)}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:10px}

/* ============ BUTTONS ============ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:13px;
  font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,background-color .28s,color .28s,border-color .28s}
.btn-sm{padding:10px 17px;font-size:14px;border-radius:11px}
.btn-primary{background:linear-gradient(120deg,var(--accent),#2E56EE);color:#fff;box-shadow:0 14px 34px -14px rgba(61,107,255,.85)}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,var(--accent-2),var(--accent));opacity:0;transition:opacity .4s}
.btn-primary:hover{box-shadow:0 20px 44px -14px rgba(49,226,190,.6);transform:translateY(-2px)}
.btn-primary:hover::before{opacity:1}
.btn-ghost{background:var(--glass);border-color:var(--line);color:var(--text);backdrop-filter:blur(12px)}
.btn-ghost:hover{background:var(--glass-2);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-2px)}
.btn-sheen::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);transition:left .7s cubic-bezier(.22,1,.36,1)}
.btn-sheen:hover::after{left:130%}

/* ============ SURFACES ============ */
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.glass{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(16px) saturate(140%);border-radius:var(--radius)}
.hair{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.tag{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);
  background:var(--glass);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}

/* ============ HERO ============ */
.hero{padding-top:clamp(112px,14vw,152px);padding-bottom:clamp(48px,7vw,92px);position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.1fr);gap:clamp(30px,4.5vw,64px);align-items:center}
.hero h1{font-size:clamp(38px,6.3vw,74px);font-weight:800;letter-spacing:-.045em}
.hero h1>span[data-hero]{display:inline-block;will-change:transform}
.hero h1 .word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.09em;margin-bottom:-.09em}
.hero h1 .word>span{display:inline-block;will-change:transform}
.chat-body::-webkit-scrollbar{width:5px}
.chat-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.uline{position:absolute;left:0;right:0;bottom:-.06em;height:.22em}
.uline path{fill:none;stroke:var(--accent-2);stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(49,226,190,.55))}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.avatars{display:flex}
.avatars span{width:32px;height:32px;border-radius:50%;border:2px solid var(--bg);margin-left:-9px;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;color:#fff;font-family:var(--font-display)}

/* chat demo */
.chat{position:relative;border-radius:22px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.chat::after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.09),transparent 40%)}
.chat-top{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.traffic{display:flex;gap:6px}
.traffic i{width:10px;height:10px;border-radius:50%;display:block}
.chat-body{padding:16px;height:clamp(330px,44vw,398px);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msg{display:flex;gap:10px;max-width:92%;animation:pop .45s cubic-bezier(.22,1,.36,1) both}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.m-av{width:28px;height:28px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;font-size:12px}
.m-av.bot{background:linear-gradient(140deg,var(--accent),var(--accent-2));color:#fff}
.m-av.user{background:var(--glass-2);border:1px solid var(--line);color:var(--text-dim);font-size:11px;font-weight:700}
.bub{padding:10px 13px;border-radius:14px;font-size:14.4px;line-height:1.55;border:1px solid var(--line);background:var(--glass)}
.msg.me .bub{background:linear-gradient(120deg,var(--accent),#3358E6);color:#fff;border-color:transparent}
.bub b{font-weight:700}
.tool{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:11px;border:1px dashed color-mix(in srgb,var(--accent-2) 45%,var(--line));
  background:color-mix(in srgb,var(--accent-2) 8%,transparent);font-family:var(--font-mono);font-size:11px;color:var(--text-dim)}
.tool .ok{color:var(--accent-2)}
.tool .sp{width:11px;height:11px;border-radius:50%;border:1.6px solid var(--accent-2);border-top-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--text-mute);animation:blink 1.25s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 14px}
.chip{padding:8px 12px;border-radius:11px;border:1px solid var(--line);background:var(--glass);font-size:13px;color:var(--text-dim);
  cursor:pointer;transition:all .25s}
.chip:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--glass-2);transform:translateY(-2px)}
.chat-foot{display:flex;align-items:center;gap:9px;padding:11px 12px;border-top:1px solid var(--line-soft);background:var(--panel-2)}
.chat-foot input{flex:1;background:transparent;border:0;outline:0;font-size:14.4px;min-width:0}
.chat-foot input::placeholder{color:var(--text-mute)}
.send{width:36px;height:36px;border-radius:11px;border:0;background:linear-gradient(140deg,var(--accent),#2C51E0);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:transform .25s,filter .25s}
.send:hover{transform:translateY(-2px) scale(1.04);filter:brightness(1.12)}
.float-card{position:absolute;padding:11px 13px;border-radius:14px;background:var(--glass-2);border:1px solid var(--line);
  backdrop-filter:blur(16px);box-shadow:var(--shadow);font-size:12.6px;display:flex;gap:10px;align-items:center;white-space:nowrap}

/* ============ MARQUEE ============ */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;gap:clamp(30px,5vw,64px);width:max-content;align-items:center;will-change:transform}
.logo-word{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.02em;
  color:var(--text-dim);opacity:.72;transition:opacity .3s,color .3s,transform .3s}
.logo-word:hover{opacity:1;color:var(--text);transform:translateY(-2px)}
.logo-word i{font-size:20px;color:var(--accent)}

/* ============ STATS ============ */
.stat{padding:clamp(18px,3vw,28px);border-radius:var(--radius);background:var(--glass);border:1px solid var(--line);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:auto -30% -60% auto;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(61,107,255,.24),transparent 70%);opacity:.7}
.stat .num{font-family:var(--font-display);font-weight:800;font-size:clamp(35px,4.6vw,54px);letter-spacing:-.045em;line-height:1}

/* ============ BENTO ============ */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{position:relative;border-radius:20px;border:1px solid var(--line);background:var(--panel);padding:24px;overflow:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .5s}
.tile:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:var(--shadow)}
.tile .sheen{position:absolute;inset:0;opacity:0;transition:opacity .45s;pointer-events:none;
  background:radial-gradient(340px 240px at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.tile:hover .sheen{opacity:1}
.t-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--glass-2);border:1px solid var(--line);color:var(--accent);font-size:15px}
.span3{grid-column:span 3}.span2{grid-column:span 2}.span4{grid-column:span 4}.span6{grid-column:span 6}
.trace{font-family:var(--font-mono);font-size:11.5px;line-height:2;color:var(--text-dim)}
.trace .ln{display:flex;gap:10px;opacity:.25;transform:translateX(-6px);transition:all .5s}
.trace .ln.on{opacity:1;transform:none}
.trace .ln b{color:var(--accent-2);font-weight:500;flex:0 0 auto}
.wave{display:flex;align-items:flex-end;gap:4px;height:44px}
.wave i{width:5px;border-radius:3px;background:linear-gradient(180deg,var(--accent-2),var(--accent));animation:eq 1.25s ease-in-out infinite}
@keyframes eq{0%,100%{height:18%}50%{height:100%}}
.conn{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.conn div{aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:var(--glass);display:grid;place-items:center;
  color:var(--text-dim);font-size:15px;transition:all .35s}
.conn div:hover{color:var(--text);background:var(--glass-2);transform:scale(1.08) rotate(-4deg);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}

/* ============ SHOWCASE ============ */
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:6px;border-radius:15px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(12px);width:max-content;max-width:100%}
.tab{padding:10px 17px;border-radius:11px;border:0;background:transparent;color:var(--text-dim);font-size:14px;font-weight:600;cursor:pointer;
  transition:all .3s;display:inline-flex;align-items:center;gap:8px}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{background:var(--panel);color:var(--text);box-shadow:0 8px 22px -12px rgba(0,0,0,.55),0 0 0 1px var(--line)}
.panel{display:none}
.panel.on{display:block}
.mock{border-radius:20px;border:1px solid var(--line);background:var(--panel);overflow:hidden;box-shadow:var(--shadow)}
.mock-bar{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.mock-in{padding:clamp(16px,2.4vw,26px)}
.node{position:relative;display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:13px;border:1px solid var(--line);
  background:var(--glass);font-size:13px;transition:all .4s}
.node:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--glass-2)}
.node .ni{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(140deg,var(--accent),#2B50D6);color:#fff;font-size:12.5px}
.wire{width:2px;flex:1;min-height:22px;background:linear-gradient(180deg,var(--accent),transparent);position:relative}
.wire::after{content:"";position:absolute;left:-2px;width:6px;height:6px;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 10px var(--accent-2);animation:flow 2.6s linear infinite}
@keyframes flow{0%{top:-6px;opacity:0}20%{opacity:1}100%{top:100%;opacity:0}}
.bar{height:8px;border-radius:5px;background:var(--glass-2);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.kpi{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.03em}

/* ============ STICKY BENEFITS ============ */
.ben-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(26px,4vw,60px);align-items:start}
.ben-sticky{position:sticky;top:112px}
.ben-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--accent-2)}
.ben-card{position:relative;border-radius:20px;border:1px solid var(--line);background:var(--panel);padding:clamp(20px,3vw,32px);
  box-shadow:var(--shadow);transition:border-color .4s}
.ben-card:hover{border-color:color-mix(in srgb,var(--accent-2) 40%,var(--line))}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14.6px;color:var(--text-dim)}
.chk i{color:var(--accent-2);margin-top:5px;font-size:12px}

/* ============ TESTIMONIALS ============ */
.tcard{width:clamp(290px,84vw,404px);flex:0 0 auto;border-radius:18px;border:1px solid var(--line);background:var(--panel);padding:22px;
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .45s}
.tcard:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.stars i{color:#FFC24B;font-size:12px}
.who{display:flex;gap:11px;align-items:center}
.who .av{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--font-display);font-size:13px}

/* ============ PRICING ============ */
.seg{display:inline-flex;padding:5px;border-radius:999px;border:1px solid var(--line);background:var(--glass);position:relative}
.seg .pill{position:absolute;top:5px;bottom:5px;border-radius:999px;background:var(--panel);box-shadow:0 0 0 1px var(--line),0 10px 20px -12px rgba(0,0,0,.6);z-index:0}
.seg button{position:relative;z-index:1;padding:9px 20px;border:0;background:transparent;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--text-dim);cursor:pointer;transition:color .3s}
.seg button[aria-pressed="true"]{color:var(--text)}
.plan{border-radius:22px;border:1px solid var(--line);background:var(--panel);padding:clamp(22px,3vw,30px);position:relative;overflow:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,border-color .5s}
.plan:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.plan .price{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,4.6vw,52px);letter-spacing:-.045em;line-height:1}
.plan.feat{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--panel)),var(--panel))}
.plan.feat::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent)}
.save{background:color-mix(in srgb,var(--accent-2) 16%,transparent);color:var(--accent-2);border:1px solid color-mix(in srgb,var(--accent-2) 38%,transparent)}

/* ============ FAQ ============ */
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-q{width:100%;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:22px 4px;background:transparent;border:0;
  cursor:pointer;text-align:left;font-family:var(--font-display);font-size:clamp(16.5px,2vw,20px);font-weight:600;letter-spacing:-.02em;transition:color .3s}
.faq-q:hover{color:var(--accent)}
.faq-ic{width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  background:var(--glass);transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .3s,color .3s}
.faq-item.open .faq-ic{transform:rotate(135deg);background:var(--accent);color:#fff;border-color:transparent}
.faq-a{overflow:hidden;height:0}
.faq-a p{padding:0 60px 24px 4px;color:var(--text-dim);font-size:15.4px}

/* ============ CTA ============ */
.cta-box{position:relative;border-radius:26px;padding:1px;overflow:hidden;
  background:conic-gradient(from var(--ang,0deg),transparent 0 42%,var(--accent) 55%,var(--accent-2) 68%,transparent 80% 100%)}
.cta-in{border-radius:25px;background:var(--panel);padding:clamp(30px,5.5vw,66px);position:relative;overflow:hidden}
.cta-in::before{content:"";position:absolute;inset:auto -18% -70% 42%;width:62%;height:62%;border-radius:50%;
  background:radial-gradient(circle,rgba(49,226,190,.28),transparent 65%);filter:blur(30px)}
.field{display:flex;gap:9px;align-items:center;padding:8px 8px 8px 16px;border:1px solid var(--line);border-radius:14px;background:var(--glass);
  transition:border-color .3s,box-shadow .3s}
.field:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.field input{flex:1;min-width:0;background:transparent;border:0;outline:0;font-size:15px}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line-soft);background:linear-gradient(180deg,transparent,var(--bg-2))}
.f-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.f-links a{display:block;padding:5px 0;font-size:14.3px;color:var(--text-dim);transition:color .25s,transform .25s}
.f-links a:hover{color:var(--text);transform:translateX(4px)}
.soc{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;color:var(--text-dim);
  background:var(--glass);transition:all .3s}
.soc:hover{color:#fff;background:linear-gradient(140deg,var(--accent),#2A4FD8);border-color:transparent;transform:translateY(-3px)}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .span3,.span4,.span2{grid-column:span 6}
  .f-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .ben-grid{grid-template-columns:1fr}
  .ben-sticky{position:static}
  .plan-grid{grid-template-columns:1fr!important}
}
@media (max-width:1080px){
  .wide-row,#faqGrid{grid-template-columns:1fr!important}
  #faqGrid>div{position:static}
  .charts{grid-template-columns:1fr!important}
}
@media (max-width:860px){
  .stat-grid{grid-template-columns:repeat(2,1fr)!important}
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important}
  #builderGrid,#inboxGrid,#kbGrid{grid-template-columns:1fr!important}
  .mock-in{padding:14px}
  .hero-cta .btn{flex:1 1 auto}
  .tabs{width:100%}
  .tab{flex:1 1 auto;justify-content:center;padding:10px 12px;font-size:13px}
}
@media (max-width:640px){
  body{font-size:16px}
  .f-grid{grid-template-columns:repeat(2,1fr)}
  .float-card{display:none}
  .chat-body{height:340px}
  .nav-inner{height:64px}
  .nav-cta .btn-ghost:not(#themeBtn){display:none}
  .plan.feat{order:-1}
  .bento{gap:12px}
  .tile{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}
/* mobile menu */
#mmenu{position:fixed;inset:64px 12px auto;z-index:109;border-radius:20px;background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--shadow);padding:14px;display:none}
#mmenu.open{display:block}
#mmenu a{display:flex;justify-content:space-between;align-items:center;padding:13px 12px;border-radius:12px;font-weight:600;color:var(--text-dim)}
#mmenu a:hover{background:var(--glass);color:var(--text)}

/* ============ PAGE ADDITIONS ============ */
/* Footer email and other inline links that sit on .dim. */
a.dim{transition:color .25s}
a.dim:hover{color:var(--text)}
/* Inline <code> in the quick-fact stats. */
code.mono{text-transform:none;letter-spacing:.04em;background:var(--glass-2);padding:1px 6px;border-radius:6px}
/* The FAQ question text is a plain child of the button, so keep it off the icon. */
.faq-q{gap:20px}
/* Keep the "Let's talk" plan aligned with the two priced ones on small screens. */
@media (max-width:900px){.plan .price{font-size:clamp(34px,8vw,44px)!important}}
/* Language chips in the hero sit next to non-Latin glyphs. */
.avatars span{font-family:var(--font-body);letter-spacing:-.01em}
/* Below ~460px the brand, theme toggle, CTA and burger fight for the same row. */
@media (max-width:460px){
  .nav-inner{gap:10px}
  .brand{font-size:17.5px}
  .brand-logo{height:38px}
  .brand-logo--footer{height:34px}
  .brand small{display:none}
  .nav-cta{gap:7px}
  .nav-cta .btn{white-space:nowrap;padding:9px 13px;font-size:13px}
}

/* ============ INNER PAGES ============
   Components that only the pages below the homepage use: the page hero,
   breadcrumbs, long-form prose (legal pages), simple content grids and the
   contact form. */

.page-hero{padding-top:clamp(116px,13vw,164px);padding-bottom:clamp(30px,4vw,54px);text-align:center}
.page-hero .shell{max-width:52rem}
.page-hero h1{font-size:clamp(34px,5.4vw,60px);font-weight:800;letter-spacing:-.04em;margin:18px 0 0}
.page-hero .lead{margin:18px auto 0;max-width:40rem}
.page-hero.left{text-align:left}
.page-hero.left .shell{max-width:var(--maxw)}
.page-hero.left .lead{margin-inline:0}

.crumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.crumbs a{color:var(--text-dim);transition:color .25s}
.crumbs a:hover{color:var(--accent)}
.crumbs i{font-size:8px;opacity:.6}

/* Long-form text: legal pages, about, anything written rather than designed. */
.prose{max-width:46rem;color:var(--text-dim);font-size:16px;line-height:1.75}
.prose h2{font-size:clamp(22px,2.6vw,29px);color:var(--text);margin:44px 0 14px;letter-spacing:-.025em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(17px,2vw,20px);color:var(--text);margin:28px 0 10px;letter-spacing:-.02em}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--accent-2)}
.prose strong,.prose b{color:var(--text);font-weight:600}
.prose code{font-family:var(--font-mono);font-size:13px;background:var(--glass-2);
  border:1px solid var(--line-soft);padding:2px 7px;border-radius:7px;color:var(--text)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.6px}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.prose th{color:var(--text);font-weight:600;font-family:var(--font-display);letter-spacing:-.01em}
.prose blockquote{margin:0 0 18px;padding:14px 18px;border-left:2px solid var(--accent);
  background:var(--glass);border-radius:0 12px 12px 0}

/* A card that holds prose — used for the legal pages so the text is not just
   floating on the ambient background. */
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,4vw,52px);box-shadow:var(--shadow)}

/* Generic responsive card grids, so inner pages do not each invent their own. */
.grid-2,.grid-3,.grid-4{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* The tile component from the homepage bento, usable standalone. */
.tile.plain{padding:clamp(20px,2.6vw,28px)}
.tile h3{letter-spacing:-.02em}

/* Numbered steps, for "how it works" style lists on inner pages. */
.steps{display:grid;gap:14px;counter-reset:step}
.step{position:relative;display:flex;gap:16px;align-items:flex-start;padding:18px 20px;
  border:1px solid var(--line);border-radius:16px;background:var(--glass);transition:border-color .35s,transform .35s}
.step:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateX(4px)}
.step-n{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(140deg,var(--accent),#2A4FD8)}

/* Contact form. */
.form-grid{display:grid;gap:14px}
.form-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:620px){.form-row{grid-template-columns:1fr}}
.label{display:block;font-size:13.4px;font-weight:600;color:var(--text);margin-bottom:7px}
.input,.textarea,.select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--glass);color:var(--text);font-size:15px;outline:0;transition:border-color .3s,box-shadow .3s}
.input:focus,.textarea:focus,.select:focus{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.input::placeholder,.textarea::placeholder{color:var(--text-mute)}
.textarea{min-height:150px;resize:vertical;line-height:1.6;font-family:inherit}
.note{padding:13px 16px;border-radius:12px;font-size:14px;border:1px solid var(--line)}
.note.ok{background:color-mix(in srgb,var(--accent-2) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent-2) 40%,transparent);color:var(--accent-2)}
.note.bad{background:color-mix(in srgb,var(--accent-3) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent-3) 40%,transparent);color:var(--accent-3)}

/* Closing CTA band, reused at the bottom of every inner page. */
.cta-slim{border-radius:22px;border:1px solid var(--line);background:var(--panel);
  padding:clamp(26px,4vw,46px);text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
.cta-slim::before{content:"";position:absolute;inset:auto -20% -80% 30%;width:60%;height:70%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 65%);filter:blur(34px)}
.cta-slim>*{position:relative}

/* Placeholders on the legal pages that must be filled in before launch —
   deliberately loud so they cannot be shipped by accident. See LAUNCH.md. */
.todo{display:inline-block;padding:1px 8px;border-radius:7px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.04em;color:#FFB020;background:rgba(255,176,32,.12);
  border:1px dashed rgba(255,176,32,.55)}

/* Copy-paste install snippet on the integration pages. */
/* The code is one long line that scrolls sideways, so the Copy button gets its
   own row above it rather than floating on top of the end of the snippet. */
.snippet{position:relative;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
  padding:46px 18px 16px;font-family:var(--font-mono);font-size:12.6px;line-height:1.8;color:var(--text-dim);
  overflow-x:auto;white-space:pre;text-transform:none;letter-spacing:0}
.snippet b{color:var(--accent-2);font-weight:500}
.snippet-wrap{position:relative}
.snippet-wrap .copy{position:absolute;z-index:2;top:10px;right:10px;padding:6px 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--glass-2);color:var(--text-dim);font-family:var(--font-body);font-size:12px;cursor:pointer;transition:all .25s}
.snippet-wrap .copy:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}