/* ═══════════════════════════════════════════════════════════════════════
   Rieva — landing v6. Product-forward, light. The hero workspace PLAYS:
   a cursor types a complex multi-app task, then Rieva thinks, calls apps,
   self-heals an error, asks for approval, and finishes. Real sidebar, real
   memory story, 1,000+ integrations, proper WhatsApp, brand logo inlined.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face { font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/instrument-sans.woff2") format("woff2"); }
@font-face { font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/instrument-serif.woff2") format("woff2"); }
@font-face { font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400 600; font-display:swap; src:url("../fonts/jetbrains-mono.woff2") format("woff2"); }

:root {
  --paper:oklch(0.975 0.0035 265); --paper-2:oklch(0.988 0.0025 265);
  --ink:oklch(0.235 0.017 274); --ink-2:oklch(0.32 0.02 274); --ink-3:oklch(0.4 0.017 274);
  --card:oklch(1 0 0);
  --primary:oklch(0.575 0.215 285); --primary-2:oklch(0.5 0.2 294);
  --accent:oklch(0.956 0.022 289); --accent-fg:oklch(0.5 0.2 287);
  --muted-fg:oklch(0.552 0.015 268);
  --border:oklch(0.917 0.004 268); --border-2:oklch(0.935 0.004 268);
  --secondary:oklch(0.966 0.004 265);
  --positive:oklch(0.64 0.15 155); --warning:oklch(0.75 0.15 70); --danger:oklch(0.585 0.2 22);
  --grad:linear-gradient(140deg, oklch(0.62 0.22 286), oklch(0.5 0.2 294));
  --shadow-sm:0 1px 2px oklch(0.22 0.02 270 / 0.05);
  --shadow-card:0 1px 2px oklch(0.22 0.02 270 / 0.04), 0 4px 14px -6px oklch(0.22 0.03 270 / 0.08);
  --shadow-float:0 4px 12px -2px oklch(0.22 0.02 270 / 0.08), 0 18px 44px -14px oklch(0.22 0.04 270 / 0.16);
  --shadow-hero:0 8px 24px -8px oklch(0.22 0.03 270 / 0.12), 0 40px 90px -30px oklch(0.4 0.12 288 / 0.28);
  --font-sans:"Instrument Sans", -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:"JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --logo:url("../img/rieva-logo.jpg");
}
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:17px; line-height:1.6; letter-spacing:-0.006em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
.wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(1.15rem,4vw,2.2rem); }
h1,h2,h3 { font-family:var(--font-serif); font-weight:400; letter-spacing:-0.018em; text-wrap:balance; margin:0; }
h1 { font-size:clamp(2.8rem,6.6vw,5rem); line-height:1.0; }
h2 { font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.06; }
h3 { font-size:1.32rem; line-height:1.15; }
em,.serif-i { font-style:italic; }
p { margin:0; }
.eyebrow { font-family:var(--font-mono); font-size:0.72rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-fg); display:inline-flex; align-items:center; gap:0.6em; }
.eyebrow .dot { width:5px; height:5px; border-radius:999px; background:currentColor; }
.lede { color:var(--muted-fg); font-size:clamp(1.05rem,1.55vw,1.24rem); line-height:1.55; max-width:48ch; }

/* brand mark (logo) */
.mark { background:var(--logo) center/cover no-repeat; border-radius:50%; display:inline-block; flex:none; box-shadow:0 0 0 1px oklch(0.6 0.1 300 / 0.14) inset, 0 2px 8px -3px oklch(0.55 0.2 290 / 0.4); }
.mark.live { animation:breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }

.btn { font-family:var(--font-sans); font-size:0.96rem; font-weight:600; letter-spacing:-0.01em; border-radius:0.72rem; padding:0.78rem 1.25rem; display:inline-flex; align-items:center; gap:0.5rem; cursor:pointer; border:1px solid transparent; text-decoration:none; transition:transform .16s ease, box-shadow .22s ease, background .2s ease, border-color .2s ease; }
.btn-primary { background-image:var(--grad); color:#fff; box-shadow:0 6px 18px -8px oklch(0.55 0.22 288 / 0.6); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 10px 26px -8px oklch(0.55 0.22 288 / 0.72); }
.btn-ghost { background:var(--card); color:var(--ink-2); border-color:var(--border); }
.btn-ghost:hover { background:var(--secondary); border-color:color-mix(in oklch, var(--primary) 26%, var(--border)); }
.btn-sm { padding:0.52rem 0.9rem; font-size:0.86rem; }
.arrow { transition:transform .2s ease; } .btn:hover .arrow { transform:translateX(3px); }
a { color:inherit; } :focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:5px; }

/* nav */
.nav { position:sticky; top:0; z-index:60; transition:background .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent; }
.nav-inner { display:flex; align-items:center; gap:1rem; padding:0.85rem clamp(1.15rem,4vw,2.2rem); max-width:1200px; margin:0 auto; }
.brand { display:inline-flex; align-items:center; gap:0.55rem; font-family:var(--font-serif); font-size:1.5rem; letter-spacing:-0.02em; text-decoration:none; color:var(--ink); }
.brand .mark { width:28px; height:28px; }
.nav-links { display:flex; align-items:center; gap:1.7rem; margin-left:auto; }
.nav-links a { font-size:0.92rem; color:var(--muted-fg); text-decoration:none; transition:color .15s; }
.nav-links a:hover { color:var(--ink); }
.nav-cta { display:flex; align-items:center; gap:1.25rem; margin-left:1.7rem; }
.nav-signin { font-size:0.92rem; color:var(--muted-fg); text-decoration:none; }
.nav-signin:hover { color:var(--ink); }
.nav.solid { background:oklch(0.985 0.003 265 / 0.82); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--border); }

/* ═══════════ HERO ═══════════ */
.hero { position:relative; padding-top:clamp(2.5rem,5vw,4rem); padding-bottom:clamp(3rem,6vw,5rem); overflow:hidden; }
.hero::before { content:""; position:absolute; z-index:0; left:50%; top:-8%; transform:translateX(-50%); width:min(1200px,120%); height:660px; pointer-events:none;
  background:radial-gradient(46% 52% at 50% 20%, oklch(0.62 0.22 286 / 0.14), transparent 70%), radial-gradient(38% 40% at 78% 30%, oklch(0.72 0.16 42 / 0.08), transparent 70%); }
.hero .wrap { position:relative; z-index:1; }
.hero-copy { max-width:min(760px,100%); display:flex; flex-direction:column; gap:1.4rem; }
.hero h1 { margin-top:0.3rem; }
.hero h1 em { color:var(--primary); }
.hero-cta { display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap; }
.hero-note { font-size:0.85rem; color:var(--muted-fg); display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.hero-note .sep { width:3px; height:3px; border-radius:999px; background:color-mix(in oklch, var(--muted-fg) 55%, transparent); }

.shot { position:relative; margin-top:clamp(2.5rem,5vw,3.75rem); }
.frame { position:relative; border-radius:1.1rem; overflow:hidden; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-hero); }
.frame-bar { display:flex; align-items:center; gap:0.7rem; padding:0.6rem 0.9rem; background:var(--paper-2); border-bottom:1px solid var(--border); }
.tl { display:inline-flex; gap:6px; } .tl i { width:11px; height:11px; border-radius:999px; display:inline-block; }
.tl .r{ background:#ec6a5e;} .tl .y{ background:#f4bf4f;} .tl .g{ background:#61c554;}
.url { margin:0 auto; font-family:var(--font-mono); font-size:0.72rem; color:var(--muted-fg); background:var(--card); border:1px solid var(--border); border-radius:999px; padding:0.22rem 0.9rem; display:inline-flex; align-items:center; gap:0.4rem; }
.url svg { width:11px; height:11px; color:var(--positive); }
.app { display:grid; grid-template-columns:224px minmax(0,1fr); height:clamp(500px,58vw,624px); font-size:13px; }

/* sidebar */
.side { border-right:1px solid var(--border); background:var(--paper-2); display:flex; flex-direction:column; padding:0.75rem; min-width:0; }
.side-brand { display:flex; align-items:center; gap:0.5rem; padding:0.3rem 0.4rem 0.75rem; }
.side-brand .mark { width:24px; height:24px; }
.side-brand .nm { font-family:var(--font-serif); font-size:1.18rem; letter-spacing:-0.02em; }
.side-brand .beta { margin-left:auto; font-family:var(--font-mono); font-size:0.56rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted-fg); background:var(--secondary); border:1px solid var(--border); border-radius:999px; padding:0.08rem 0.4rem; }
.newchat { display:flex; align-items:center; gap:0.5rem; background-image:var(--grad); color:#fff; border-radius:0.6rem; padding:0.5rem 0.65rem; font-size:0.82rem; font-weight:600; box-shadow:var(--shadow-sm); }
.newchat svg { width:14px; height:14px; }
.side-search { display:flex; align-items:center; gap:0.5rem; margin-top:0.5rem; border:1px solid var(--border); border-radius:0.6rem; padding:0.42rem 0.6rem; color:var(--muted-fg); font-size:0.78rem; }
.side-search svg { width:13px; height:13px; }
.side-search .kbd { margin-left:auto; font-family:var(--font-mono); font-size:0.6rem; background:var(--secondary); border:1px solid var(--border); border-radius:4px; padding:0.02rem 0.28rem; }
.side-nav { display:flex; flex-direction:column; gap:0.1rem; margin-top:0.65rem; }
.snav { display:flex; align-items:center; gap:0.55rem; padding:0.42rem 0.55rem; border-radius:0.5rem; color:var(--ink-3); font-size:0.82rem; }
.snav svg { width:16px; height:16px; opacity:0.85; }
.snav.active { background:var(--accent); color:var(--accent-fg); font-weight:600; }
.snav.active svg { color:var(--primary); opacity:1; }
.side-label { font-family:var(--font-mono); font-size:0.56rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-fg); padding:0.85rem 0.55rem 0.3rem; }
.side-recent { display:flex; flex-direction:column; gap:0.05rem; min-width:0; }
.rec { display:flex; align-items:center; gap:0.4rem; padding:0.32rem 0.55rem; border-radius:0.5rem; font-size:0.78rem; color:var(--ink-3); min-width:0; }
.rec .d { width:5px; height:5px; border-radius:999px; background:var(--border); flex:none; }
.rec.on { background:var(--card); box-shadow:var(--shadow-sm); color:var(--ink); font-weight:500; }
.rec.on .d { background:var(--primary); }
.rec .t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rec .w { margin-left:auto; font-size:0.66rem; color:var(--muted-fg); flex:none; }
.side-user { margin-top:auto; display:flex; align-items:center; gap:0.5rem; padding-top:0.6rem; border-top:1px solid var(--border); }
.side-user .av { width:28px; height:28px; border-radius:999px; background-image:var(--grad); color:#fff; display:grid; place-items:center; font-size:0.72rem; font-weight:600; }
.side-user .nm { font-size:0.8rem; font-weight:600; display:block; }
.side-user .pr { font-size:0.62rem; color:var(--muted-fg); display:flex; align-items:center; gap:0.3rem; }
.side-user .pr b { width:5px; height:5px; border-radius:999px; background:var(--positive); display:inline-block; }
.side-user .gear { margin-left:auto; color:var(--muted-fg); } .side-user .gear svg { width:16px; height:16px; display:block; }

/* main chat */
.main { display:flex; flex-direction:column; min-width:0; background:var(--card); position:relative; }
.main-top { display:flex; align-items:center; gap:0.6rem; padding:0.7rem 1rem; border-bottom:1px solid var(--border); }
.crumb { display:flex; flex-direction:column; gap:0.1rem; min-width:0; }
.crumb .bc { font-size:0.68rem; color:var(--muted-fg); }
.crumb .ti { font-weight:600; font-size:0.9rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.model { margin-left:auto; display:inline-flex; align-items:center; gap:0.4rem; border:1px solid var(--border); border-radius:0.55rem; padding:0.3rem 0.6rem; font-size:0.76rem; color:var(--ink-2); }
.model .mark { width:14px; height:14px; }
.main-body { flex:1; overflow-y:auto; overflow-x:hidden; padding:1rem 1.15rem; display:flex; flex-direction:column; gap:0.7rem; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.main-body::-webkit-scrollbar { width:7px; } .main-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:9px; } .main-body::-webkit-scrollbar-track { background:transparent; }
.u-msg { align-self:flex-end; max-width:80%; background:var(--secondary); border:1px solid var(--border); color:var(--ink); padding:0.55rem 0.8rem; border-radius:0.9rem 0.9rem 0.3rem 0.9rem; font-size:0.83rem; line-height:1.42; }
.r-line { display:flex; align-items:center; gap:0.45rem; }
.r-line .mark { width:22px; height:22px; }
.r-line .nm { font-size:0.78rem; font-weight:600; color:var(--ink-2); }
.d-hide { display:none !important; }
.d-in { animation:drise .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes drise { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:none;} }

/* glass-box */
.gbox { border:1px solid var(--border); border-radius:0.7rem; background:var(--card); box-shadow:var(--shadow-sm); overflow:hidden; }
.gbox-head { display:flex; align-items:center; gap:0.55rem; padding:0.5rem 0.6rem; }
.gbox .gi { width:24px; height:24px; border-radius:0.5rem; background-image:var(--grad); display:grid; place-items:center; flex:none; }
.gbox .gi svg { width:13px; height:13px; }
.gbox .gt { min-width:0; }
.gbox .gt .a { font-size:0.78rem; font-weight:500; color:var(--ink-2); }
.gbox .gt .a.working { background:linear-gradient(90deg,var(--muted-fg) 20%,var(--primary) 50%,var(--muted-fg) 80%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shim 1.8s linear infinite; }
@keyframes shim { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.gbox .gt .b { font-family:var(--font-mono); font-size:0.64rem; color:var(--muted-fg); }
.gbox .done { margin-left:auto; display:inline-flex; align-items:center; gap:0.28rem; font-size:0.64rem; font-weight:600; padding:0.14rem 0.5rem; border-radius:999px; background:color-mix(in oklch, var(--positive) 14%, transparent); color:var(--positive); white-space:nowrap; }
.gbox .done.run { background:var(--accent); color:var(--accent-fg); }
.gbox .done svg { width:10px; height:10px; }
.spin { animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg);} }
.gbox .chev { color:var(--muted-fg); } .gbox .chev svg { width:14px; height:14px; display:block; transition:transform .3s; }
.gbox.open .chev svg { transform:rotate(90deg); }
.gsteps { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.gbox.open .gsteps { grid-template-rows:1fr; }
.gsteps > .inner { min-height:0; overflow:hidden; padding-top:0.1rem; }
.gthink { display:flex; align-items:flex-start; gap:0.5rem; margin:0 0.55rem 0.5rem; padding:0.15rem 0.1rem; opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; }
.gthink.show { opacity:1; transform:none; }
.gthink svg { width:14px; height:14px; color:var(--primary); flex:none; margin-top:1px; }
.gthink .tx { font-size:0.75rem; color:var(--muted-fg); font-style:italic; line-height:1.35; }
.gstep { display:flex; align-items:center; gap:0.5rem; margin:0 0.55rem 0.45rem; padding:0.4rem 0.5rem; border:1px solid var(--border); border-radius:0.55rem; background:var(--paper-2); opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; }
.gstep.show { opacity:1; transform:none; }
.gstep .si { width:20px; height:20px; border-radius:0.4rem; background:var(--accent); color:var(--accent-fg); display:grid; place-items:center; flex:none; }
.gstep .si svg { width:12px; height:12px; }
.gstep .sn { font-size:0.74rem; color:var(--ink-2); font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gstep .ss { margin-left:auto; display:inline-flex; align-items:center; gap:0.25rem; font-size:0.6rem; font-weight:600; padding:0.12rem 0.45rem; border-radius:999px; white-space:nowrap; }
.gstep .ss.run { background:var(--accent); color:var(--accent-fg); }
.gstep .ss.done { background:color-mix(in oklch, var(--positive) 14%, transparent); color:var(--positive); }
.gstep .ss.err { background:color-mix(in oklch, var(--danger) 13%, transparent); color:var(--danger); }
.gstep .ss svg { width:9px; height:9px; }

.r-body { font-size:0.84rem; line-height:1.5; color:var(--ink-2); max-width:94%; }
.r-body b { color:var(--ink); font-weight:600; }
.r-body.stream::after { content:""; display:inline-block; width:2px; height:1em; margin-left:2px; background:var(--primary); vertical-align:-2px; animation:blink 1s steps(2,start) infinite; }
@keyframes blink { 50%{opacity:0;} }

/* approval */
.appr { border:1px solid color-mix(in oklch, var(--primary) 25%, var(--border)); border-radius:0.85rem; overflow:hidden; background:var(--card); box-shadow:var(--shadow-card); max-width:96%; }
.appr .abar { height:3px; background-image:var(--grad); }
.appr .in { padding:0.8rem 0.85rem; }
.appr .hd { display:flex; align-items:center; gap:0.5rem; }
.appr .hd .ic { width:26px; height:26px; border-radius:0.5rem; background:color-mix(in oklch, var(--primary) 10%, transparent); color:var(--primary); display:grid; place-items:center; flex:none; }
.appr .hd .ic svg { width:15px; height:15px; }
.appr .hd .t { font-size:0.8rem; font-weight:600; }
.appr .hd .bd { margin-left:auto; font-size:0.6rem; color:var(--muted-fg); border:1px solid var(--border); background:var(--secondary); border-radius:999px; padding:0.1rem 0.45rem; }
.appr .act { margin-top:0.5rem; font-size:0.82rem; font-weight:500; color:var(--ink); }
.appr .sub2 { margin-top:0.1rem; font-family:var(--font-mono); font-size:0.66rem; color:var(--muted-fg); }
.appr .btns { display:none; gap:0.45rem; margin-top:0.65rem; }
.appr.pending .btns { display:flex; }
.appr .resolved { display:flex; align-items:center; gap:0.35rem; margin-top:0.6rem; font-size:0.74rem; font-weight:600; color:var(--positive); }
.appr.pending .resolved { display:none; }
.appr .resolved svg { width:13px; height:13px; }
.appr .ap { background-image:var(--grad); color:#fff; border:none; border-radius:0.5rem; padding:0.42rem 0.85rem; font-size:0.76rem; font-weight:600; font-family:var(--font-sans); display:inline-flex; align-items:center; gap:0.32rem; position:relative; }
.appr .ap svg { width:12px; height:12px; }
.appr .dc { background:var(--card); color:var(--ink-2); border:1px solid var(--border); border-radius:0.5rem; padding:0.42rem 0.85rem; font-size:0.76rem; font-weight:500; font-family:var(--font-sans); display:inline-flex; align-items:center; gap:0.32rem; }
.appr .dc svg { width:12px; height:12px; }

/* composer */
.composer { margin:0 1.15rem 1rem; border:1px solid var(--border); border-radius:0.8rem; padding:0.6rem 0.75rem; background:var(--card); box-shadow:var(--shadow-sm); transition:border-color .2s, box-shadow .2s; }
.composer.focus { border-color:color-mix(in oklch, var(--primary) 45%, var(--border)); box-shadow:0 0 0 3px oklch(0.575 0.215 285 / 0.12); }
.composer .field { font-size:0.82rem; color:var(--ink); min-height:1.2em; }
.composer .field .ph { color:var(--muted-fg); }
.composer .field .typed { color:var(--ink); }
.composer.typing .field .typed::after { content:""; display:inline-block; width:1.5px; height:0.95em; margin-left:1px; background:var(--primary); vertical-align:-1px; animation:blink 1s steps(2,start) infinite; }
.composer .row { display:flex; align-items:center; gap:0.6rem; margin-top:0.55rem; color:var(--muted-fg); }
.composer .row svg { width:15px; height:15px; }
.composer .send { margin-left:auto; display:inline-flex; align-items:center; gap:0.3rem; font-size:0.68rem; }
.composer .send .b { width:24px; height:24px; border-radius:999px; background-image:var(--grad); display:grid; place-items:center; }
.composer .send .b svg { width:13px; height:13px; color:#fff; }

/* fake cursor */
.cursor { position:absolute; left:0; top:0; z-index:46; width:26px; height:26px; pointer-events:none; opacity:0; transition:transform .58s cubic-bezier(.5,0,.2,1), opacity .22s ease; filter:drop-shadow(0 3px 6px rgba(24,12,48,.5)); will-change:transform; }
.cursor svg { width:26px; height:26px; display:block; }
.cursor.click::after { content:""; position:absolute; left:2px; top:2px; width:26px; height:26px; border-radius:999px; border:2.5px solid var(--primary); animation:ck .55s ease-out; }
@keyframes ck { from { transform:scale(0.25); opacity:0.85; } to { transform:scale(1.8); opacity:0; } }

/* glass-box rail (unused in hero now) kept for reference removed */

.shot-cap { text-align:center; margin-top:1.1rem; font-size:0.85rem; color:var(--muted-fg); }
.shot-cap b { color:var(--ink-2); font-weight:600; }

/* ═══════════ sections ═══════════ */
section { padding:clamp(4rem,8vw,7rem) 0; position:relative; }
.sec-head { max-width:54ch; display:flex; flex-direction:column; gap:0.9rem; margin-bottom:clamp(2rem,4vw,3rem); }
.sec-head.center { margin-inline:auto; text-align:center; align-items:center; }

/* surfaces — copy + real WhatsApp */
.surfaces { background:var(--card); border-block:1px solid var(--border); }
.surf-grid { display:grid; grid-template-columns:1.08fr 0.92fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.surf-copy { display:flex; flex-direction:column; gap:1.1rem; }
.surf-points { display:flex; flex-direction:column; gap:0.7rem; margin-top:0.4rem; }
.sp { display:flex; gap:0.6rem; align-items:flex-start; font-size:0.95rem; color:var(--ink-3); line-height:1.42; }
.sp svg { width:18px; height:18px; color:var(--primary); flex:none; margin-top:2px; }
.sp b { color:var(--ink); font-weight:600; }
.surf-phone { display:flex; justify-content:center; }
/* platforms strip — native apps on every device, plus web & WhatsApp */
.platforms { margin-top:clamp(2.4rem,5vw,3.6rem); padding-top:clamp(2rem,4vw,2.8rem); border-top:1px solid var(--border); display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.15rem; }
.pl-head { display:flex; flex-direction:column; align-items:center; gap:0.55rem; }
.pl-title { font-size:clamp(1.3rem,2.8vw,1.85rem); line-height:1.1; }
.pl-sub { color:var(--muted-fg); max-width:54ch; }
.plat-chips { display:flex; flex-wrap:wrap; gap:0.55rem; justify-content:center; margin-top:0.35rem; }
.plat { display:inline-flex; align-items:center; gap:0.55rem; font-size:0.9rem; font-weight:500; color:var(--ink-2); background:var(--secondary); border:1px solid var(--border); border-radius:999px; padding:0.5rem 0.95rem 0.5rem 0.82rem; box-shadow:var(--shadow-sm); }
.plat svg { width:16px; height:16px; flex:none; }
.plat .soon { font-size:0.66rem; font-weight:500; color:var(--muted-fg); letter-spacing:0.01em; margin-left:-0.12rem; }

/* ── proper WhatsApp ── */
.phone { position:relative; width:290px; max-width:84vw; aspect-ratio:100/206; border-radius:2.9rem; padding:9px; background:linear-gradient(150deg,#43434d,#1a1a1f); box-shadow:var(--shadow-float), 0 0 0 2px #0b0b0e, inset 0 0 0 1.5px #55555d; }
.phone::after { content:""; position:absolute; z-index:11; top:18px; left:50%; transform:translateX(-50%); width:82px; height:23px; background:#000; border-radius:999px; }
.phone-scr { height:100%; border-radius:2.35rem; overflow:hidden; background:#e5ddd5; position:relative; display:flex; flex-direction:column; }
.wa-status { display:flex; align-items:center; justify-content:space-between; padding:0.5rem 1rem 0.15rem; background:#008069; color:#fff; font-size:0.62rem; font-weight:600; }
.wa-status .rt { display:inline-flex; align-items:center; gap:4px; }
.wa-status .rt svg { width:12px; height:11px; }
.wa-top { background:#008069; color:#fff; display:flex; align-items:center; gap:0.5rem; padding:0.45rem 0.6rem 0.55rem; }
.wa-top .bk { opacity:0.95; } .wa-top .bk svg { width:16px; height:16px; }
.wa-av { width:32px; height:32px; box-shadow:0 0 0 1.5px oklch(1 0 0 / 0.55) inset; }
.wa-id { min-width:0; flex:1; display:flex; flex-direction:column; justify-content:center; line-height:1.1; }
.wa-nm { font-size:0.86rem; font-weight:600; line-height:1.15; display:flex; align-items:center; gap:3px; }
.wa-nm svg { width:12px; height:12px; }
.wa-sub { font-size:0.62rem; opacity:0.85; line-height:1.1; margin-top:1px; }
.wa-acts { display:flex; align-items:center; gap:0.85rem; opacity:0.95; }
.wa-acts svg { width:16px; height:16px; }
.wa-body { padding:0.75rem 0.6rem 0.5rem; display:flex; flex-direction:column; gap:0.5rem; flex:1 1 auto; min-height:0; justify-content:flex-start;
  background-color:#e5ddd5;
  background-image:radial-gradient(oklch(0.5 0.03 90 / 0.05) 1px, transparent 1px); background-size:14px 14px; }
/* WhatsApp interactive reply-button component */
.wa-btns { align-self:flex-start; width:86%; display:flex; flex-direction:column; gap:5px; margin:1px 0 2px; }
.wa-btn { background:#fff; border:none; border-radius:0.55rem; color:#027eb5; font-family:inherit; font-size:0.76rem; font-weight:500; padding:0.52rem 0.6rem; display:flex; align-items:center; justify-content:center; gap:0.4rem; box-shadow:0 1px 0.6px oklch(0.2 0.02 270 / 0.14); cursor:pointer; }
.wa-btn svg { width:14px; height:14px; }
.wa-enc { align-self:center; background:#fdf3c9; color:#54503a; font-size:0.58rem; line-height:1.3; text-align:center; border-radius:0.4rem; padding:0.3rem 0.55rem; max-width:88%; margin-bottom:0.15rem; }
.wa-enc svg { width:9px; height:9px; vertical-align:-1px; margin-right:2px; }
.wa-day { align-self:center; background:#fff; color:#667781; font-size:0.56rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; border-radius:0.4rem; padding:0.14rem 0.5rem; box-shadow:0 1px 0.5px oklch(0.2 0.02 270 / 0.1); margin-bottom:0.1rem; }
.wa { position:relative; max-width:80%; font-size:0.775rem; line-height:1.34; padding:0.36rem 0.5rem 0.44rem; border-radius:0.55rem; box-shadow:0 1px 0.5px oklch(0.2 0.02 270 / 0.16); }
.wa b { font-weight:600; }
.wa .tm { float:right; margin:0.3rem -0.1rem -0.1rem 0.5rem; font-size:0.54rem; color:#667781; display:inline-flex; align-items:center; gap:2px; }
.wa .tm svg { width:13px; height:11px; }
.wa.in { align-self:flex-start; background:#fff; color:#111b21; border-top-left-radius:0; }
.wa.in::before { content:""; position:absolute; top:0; left:-7px; width:0; height:0; border:6px solid transparent; border-top-color:#fff; border-right-width:8px; border-left:0; }
.wa.out { align-self:flex-end; background:#d9fdd3; color:#111b21; border-top-right-radius:0; }
.wa.out::before { content:""; position:absolute; top:0; right:-7px; width:0; height:0; border:6px solid transparent; border-top-color:#d9fdd3; border-left-width:8px; border-right:0; }
.wa .rd { color:#53bdeb; }
/* WhatsApp typing indicator (three bouncing dots) + arrival pop */
.wa-typing { align-self:flex-start; padding:0.5rem 0.66rem 0.52rem; }
.wa-typing .wa-dots { display:inline-flex; align-items:center; gap:4px; }
.wa-typing .wa-dots i { width:6px; height:6px; border-radius:50%; background:#9aa6ac; animation:waType 1.3s infinite ease-in-out; }
.wa-typing .wa-dots i:nth-child(2) { animation-delay:.2s; }
.wa-typing .wa-dots i:nth-child(3) { animation-delay:.4s; }
@keyframes waType { 0%,70%,100% { transform:translateY(0); opacity:.32; } 35% { transform:translateY(-3px); opacity:.95; } }
.wa-pop { animation:waPop .34s var(--ease-out) both; }
@keyframes waPop { from { opacity:0; transform:translateY(7px) scale(.97); } to { opacity:1; transform:none; } }
.wa-input { display:flex; align-items:center; gap:6px; padding:6px 7px 8px; background:#e5ddd5; }
.wa-field { flex:1; display:flex; align-items:center; gap:7px; background:#fff; border-radius:999px; padding:0.4rem 0.6rem; color:#667781; font-size:0.74rem; box-shadow:0 1px 0.5px oklch(0.2 0.02 270 / 0.1); }
.wa-field svg { width:15px; height:15px; flex:none; }
.wa-field .fph { flex:1; }
.wa-mic { width:34px; height:34px; border-radius:999px; background:#008069; display:grid; place-items:center; flex:none; box-shadow:var(--shadow-sm); }
.wa-mic svg { width:16px; height:16px; color:#fff; }

/* ── use-case asks (natural, no slash) ── */
.uc-asks { display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; margin-top:0.5rem; }
.ask { font-size:0.82rem; color:var(--ink-3); background:var(--card); border:1px solid var(--border); border-radius:999px; padding:0.4rem 0.85rem; box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; gap:0.4rem; }
.ask svg { width:13px; height:13px; color:var(--primary); }

/* use cases bento */
.usecases { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:clamp(2.25rem,4vw,3rem); }
.uc-feat { grid-column:1 / -1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(1.25rem,3vw,2.25rem); align-items:center; padding:clamp(1.4rem,3vw,1.9rem); border-radius:1.4rem; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-card); transition:box-shadow .2s, border-color .2s; }
.uc-feat:hover { box-shadow:var(--shadow-float); border-color:color-mix(in oklch, var(--primary) 20%, var(--border)); }
.uc-feat-copy { display:flex; flex-direction:column; gap:0.7rem; }
.uc-feat h3 { font-size:clamp(1.42rem,2.5vw,1.95rem); line-height:1.08; }
.uc-feat p { font-size:0.98rem; color:var(--muted-fg); line-height:1.5; }
.fv { border:1px solid var(--border); border-radius:1rem; background:var(--paper-2); padding:1rem 1.1rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:0.55rem; }
.fv .fh { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted-fg); }
.fv .fr { display:flex; align-items:center; gap:0.55rem; font-size:0.85rem; color:var(--ink-3); }
.fv .fr .fi { width:20px; height:20px; border-radius:999px; display:grid; place-items:center; flex:none; }
.fv .fr.dn .fi { background:color-mix(in oklch, var(--positive) 15%, transparent); color:var(--positive); }
.fv .fr.pd .fi { background:color-mix(in oklch, var(--warning) 18%, transparent); color:var(--warning); }
.fv .fr .fi svg { width:11px; height:11px; }
.fv .fr .fw { margin-left:auto; font-size:0.66rem; color:var(--muted-fg); }
.uc { display:flex; flex-direction:column; gap:0.65rem; padding:1.25rem 1.2rem; border-radius:1.05rem; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-card); transition:transform .2s, box-shadow .2s, border-color .2s; }
.uc:hover { transform:translateY(-3px); box-shadow:var(--shadow-float); border-color:color-mix(in oklch, var(--primary) 22%, var(--border)); }
.uc-top { display:flex; align-items:center; gap:0.6rem; }
.uc-ico { width:38px; height:38px; border-radius:0.65rem; background:var(--accent); color:var(--accent-fg); display:grid; place-items:center; flex:none; }
.uc-ico svg { width:18px; height:18px; }
.uc-tag { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-fg); }
.uc h3 { font-size:1.24rem; line-height:1.1; }
.uc p { font-size:0.9rem; color:var(--muted-fg); line-height:1.5; }
.uc-foot { margin-top:auto; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; padding-top:0.7rem; border-top:1px solid var(--border-2); }
.uc-out { font-size:0.75rem; font-weight:600; color:var(--positive); display:inline-flex; align-items:center; gap:0.3rem; }
.uc-out svg { width:12px; height:12px; }
.uc-sf { margin-left:auto; font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--accent-fg); background:var(--accent); border-radius:999px; padding:0.16rem 0.5rem; }

/* languages */
.langs { background:var(--card); border-block:1px solid var(--border); }
.lang-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:clamp(2rem,4vw,3rem); }
.lcard { display:flex; flex-direction:column; gap:0.7rem; padding:1.2rem 1.25rem; border-radius:1.05rem; background:var(--paper-2); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, border-color .2s; }
.lcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:color-mix(in oklch, var(--primary) 20%, var(--border)); }
.lcard .lh { display:flex; align-items:center; gap:0.5rem; }
.lcard .lname { font-size:1.02rem; font-weight:600; color:var(--ink); }
.lcard .ltag { margin-left:auto; font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-fg); background:var(--accent); border-radius:999px; padding:0.16rem 0.5rem; }
.lcard .lmsg { align-self:flex-start; background:var(--card); border:1px solid var(--border); border-radius:0.9rem 0.9rem 0.9rem 0.3rem; padding:0.55rem 0.78rem; font-size:0.92rem; line-height:1.45; color:var(--ink-2); }
.lang-chips { display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; margin-top:1.7rem; }
.lang-chip { font-size:0.86rem; color:var(--ink-3); background:var(--card); border:1px solid var(--border); border-radius:999px; padding:0.38rem 0.9rem; box-shadow:var(--shadow-sm); }
.lang-chip.more { color:var(--primary); font-weight:600; border-color:color-mix(in oklch, var(--primary) 30%, var(--border)); }

/* ── integrations ── */
.integ { background:var(--card); border-block:1px solid var(--border); }
.integ-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:0.7rem; margin-top:clamp(1.75rem,3vw,2.5rem); }
.iapp { display:flex; flex-direction:column; align-items:center; gap:0.4rem; padding:0.9rem 0.5rem; border:1px solid var(--border); border-radius:0.9rem; background:var(--paper-2); text-align:center; transition:transform .18s, box-shadow .18s, border-color .18s; }
.iapp:hover { transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:color-mix(in oklch, var(--primary) 20%, var(--border)); }
.iapp .il { width:38px; height:38px; border-radius:0.6rem; overflow:hidden; flex:none; box-shadow:0 1px 3px oklch(0.2 0.02 270 / 0.12), 0 0 0 1px oklch(0.2 0.02 270 / 0.04); }
.iapp .il svg { width:100%; height:100%; display:block; }
.iapp .inm { font-size:0.72rem; color:var(--ink-3); font-weight:500; }
.iapp.more { justify-content:center; background:transparent; border-style:dashed; }
.iapp.more .mm { font-family:var(--font-serif); font-size:1.2rem; color:var(--primary); line-height:1; }
.iapp.more .inm { color:var(--muted-fg); }
.integ-note { margin-top:1.25rem; text-align:center; font-size:0.82rem; color:var(--muted-fg); }
.integ-note b { color:var(--ink-2); font-weight:600; }

/* ── memory ── */
.mem-grid { display:grid; grid-template-columns:1fr 0.92fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.mem-copy { display:flex; flex-direction:column; gap:1.05rem; }
.mem-copy .p-list { display:flex; flex-direction:column; gap:0.55rem; margin-top:0.15rem; }
.mem-copy .li { display:flex; gap:0.6rem; align-items:flex-start; font-size:0.96rem; color:var(--ink-3); }
.mem-copy .li .ck { width:20px; height:20px; border-radius:999px; background:color-mix(in oklch, var(--primary) 12%, transparent); color:var(--primary); display:grid; place-items:center; flex:none; margin-top:1px; }
.mem-copy .li .ck svg { width:12px; height:12px; }
.mem-copy .li b { color:var(--ink); font-weight:600; }
.mem-card { border:1px solid var(--border); border-radius:1.15rem; background:var(--card); box-shadow:var(--shadow-float); overflow:hidden; }
.mem-card .mh { display:flex; align-items:center; gap:0.5rem; padding:0.7rem 0.9rem; border-bottom:1px solid var(--border); background:var(--paper-2); }
.mem-card .mh .mark { width:20px; height:20px; }
.mem-card .mh .t { font-size:0.82rem; font-weight:600; }
.mem-card .mh .tg { margin-left:auto; font-family:var(--font-mono); font-size:0.58rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted-fg); }
.mem-card .mb { padding:0.85rem 0.95rem; display:flex; flex-direction:column; gap:0.7rem; }
.mprof .ph2 { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-fg); margin-bottom:0.2rem; }
.mprof .pl { font-size:0.83rem; color:var(--ink-2); line-height:1.4; }
.mprof .pl b { color:var(--ink); font-weight:600; }
.mfacts { display:flex; flex-wrap:wrap; gap:0.4rem; }
.mfact { font-size:0.72rem; color:var(--ink-3); background:var(--paper-2); border:1px solid var(--border); border-radius:999px; padding:0.22rem 0.55rem; display:inline-flex; align-items:center; gap:0.35rem; }
.mfact .c { width:6px; height:6px; border-radius:999px; }
.mupd { display:flex; align-items:center; gap:0.45rem; font-size:0.72rem; color:var(--muted-fg); border-top:1px dashed var(--border); padding-top:0.6rem; }
.mupd svg { width:13px; height:13px; color:var(--primary); flex:none; }
.mupd s { color:var(--muted-fg); opacity:0.7; }

/* control / trust */
.control { background:var(--paper); }
.control-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:clamp(2rem,4vw,3rem); }
.ccard { display:flex; flex-direction:column; gap:0.6rem; padding:1.35rem 1.2rem; border-radius:1.05rem; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.ccard .ci { width:40px; height:40px; border-radius:0.65rem; background:var(--accent); color:var(--accent-fg); display:grid; place-items:center; flex:none; }
.ccard .ci svg { width:20px; height:20px; }
.ccard h3 { font-size:1.16rem; line-height:1.12; }
.ccard p { font-size:0.88rem; color:var(--muted-fg); line-height:1.46; }

/* why 3-up */
.why { display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; }
.wcard { display:flex; flex-direction:column; gap:0.75rem; padding:1.5rem 1.35rem; border-radius:1.1rem; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-card); }
.wcard .wi { width:44px; height:44px; border-radius:0.7rem; background-image:var(--grad); display:grid; place-items:center; flex:none; box-shadow:var(--shadow-sm); }
.wcard .wi svg { width:22px; height:22px; color:#fff; }
.wcard h3 { font-size:1.3rem; }
.wcard p { font-size:0.94rem; color:var(--muted-fg); line-height:1.5; }
.wcard .wnote { font-family:var(--font-mono); font-size:0.68rem; color:var(--accent-fg); margin-top:auto; padding-top:0.4rem; }

/* final */
.final { background:var(--card); border-top:1px solid var(--border); }
.final .fcard { position:relative; overflow:hidden; border-radius:1.6rem; padding:clamp(2.75rem,6vw,4.75rem) clamp(1.5rem,4vw,3rem); background:var(--paper-2); border:1px solid var(--border); box-shadow:var(--shadow-float); text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.final .fcard::before { content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(60% 90% at 50% 0%, oklch(0.62 0.22 286 / 0.1), transparent 68%), radial-gradient(50% 70% at 84% 108%, oklch(0.72 0.16 42 / 0.08), transparent 70%); }
.final .fcard > * { position:relative; z-index:1; }
.final .mark { width:58px; height:58px; }
.final h2 { font-size:clamp(2.3rem,5vw,3.6rem); }
.final h2 em { color:var(--primary); }
.final .lede { text-align:center; max-width:48ch; }
.final-cta { display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap; }
.final-note { font-size:0.83rem; color:var(--muted-fg); display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; justify-content:center; }
.final-note .sep { width:3px; height:3px; border-radius:999px; background:color-mix(in oklch, var(--muted-fg) 55%, transparent); }

/* footer */
footer { border-top:1px solid var(--border); padding:2.6rem 0 3rem; }
.foot { display:flex; align-items:flex-start; gap:1.5rem; flex-wrap:wrap; }
.foot-brand { display:flex; flex-direction:column; gap:0.5rem; max-width:30ch; }
.foot-brand .b { display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-serif); font-size:1.35rem; letter-spacing:-0.02em; }
.foot-brand .b .mark { width:24px; height:24px; }
.foot-brand p { font-size:0.86rem; color:var(--muted-fg); }
.foot-cols { display:flex; gap:clamp(2rem,6vw,4.5rem); margin-left:auto; flex-wrap:wrap; }
.foot-col { display:flex; flex-direction:column; gap:0.6rem; }
.foot-col .h { font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-fg); margin-bottom:0.15rem; }
.foot-col a { font-size:0.88rem; color:var(--ink-3); text-decoration:none; }
.foot-col a:hover { color:var(--primary); }
.foot-legal { width:100%; margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:0.78rem; color:var(--muted-fg); }

/* ── motion system — compositor-safe (transform/opacity only), smooth ── */
:root { --ease-out:cubic-bezier(.16,1,.3,1); }
@keyframes fadeUp { from { opacity:0; transform:translateY(20px);} to { opacity:1; transform:none;} }
.nav-links a { position:relative; }
/* hero on-load entrance (staggered) */
.js .hero-copy > * { opacity:0; animation:fadeUp .75s var(--ease-out) both; }
.js .hero-copy > *:nth-child(1){ animation-delay:.08s; }
.js .hero-copy > *:nth-child(2){ animation-delay:.18s; }
.js .hero-copy > *:nth-child(3){ animation-delay:.28s; }
.js .hero-copy > *:nth-child(4){ animation-delay:.38s; }
.js .hero-copy > *:nth-child(5){ animation-delay:.48s; }
.js .shot { opacity:0; animation:fadeUp .95s var(--ease-out) .5s both; }
/* scroll reveal — IntersectionObserver-driven (efficient); no-JS shows everything */
.js .reveal { opacity:0; }
.js .reveal.in { animation:fadeUp .8s var(--ease-out) both; }
.js .reveal-group > * { opacity:0; }
.js .reveal-group.in > * { animation:fadeUp .7s var(--ease-out) both; }
/* escapes */
html.static .reveal, html.static .reveal-group > *, html.static .hero-copy > *, html.static .shot { opacity:1 !important; animation:none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-group > *, .js .hero-copy > *, .js .shot { opacity:1 !important; animation:none !important; }
  .mark.live { animation:none; }
}
/* micro-interactions (hover) */
.wcard, .ccard, .snode { transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.wcard:hover, .ccard:hover, .snode:hover { transform:translateY(-3px); box-shadow:var(--shadow-float); border-color:color-mix(in oklch, var(--primary) 18%, var(--border)); }
.ask, .lang-chip, .mfact, .plat { transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ask:hover, .lang-chip:hover, .mfact:hover, .plat:hover { transform:translateY(-2px); border-color:color-mix(in oklch, var(--primary) 26%, var(--border)); box-shadow:var(--shadow-card); }
.nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px; border-radius:2px; background:var(--primary); transform:scaleX(0); transform-origin:center; transition:transform .28s var(--ease-out); }
.nav-links a:hover::after { transform:scaleX(1); }
.newchat, .side-search, .snav, .rec, .iapp .il, .wa-btn, .foot-col a { transition:transform .15s ease, background .18s ease, color .15s ease, box-shadow .18s ease; }

/* responsive */
@media (max-width:900px){ .integ-grid { grid-template-columns:repeat(4,1fr); } .lang-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
  .app { grid-template-columns:minmax(0,1fr); height:auto; }
  .frame, .app, .main { max-width:100%; }
  .side { display:none; }
  .cursor { display:none; }
  .main-body { padding:0.9rem; }
  .u-msg { max-width:90%; }
  .why { grid-template-columns:1fr; }
  .control-grid { grid-template-columns:repeat(2,1fr); }
  .surf-grid { grid-template-columns:1fr; }
  .surf-phone { order:2; }
  .usecases { grid-template-columns:1fr; }
  .uc-feat { grid-template-columns:1fr; gap:1.25rem; }
  .mem-grid { grid-template-columns:1fr; }
  .integ-grid { grid-template-columns:repeat(3,1fr); }
  .lang-grid { grid-template-columns:1fr; }
}
@media (max-width:1000px) and (min-width:761px){ .usecases { grid-template-columns:repeat(2,1fr); } .uc-feat { grid-column:1 / -1; } }
@media (max-width:620px){ body { font-size:16px; } .nav-links, .nav-signin { display:none; } }
@media (max-width:540px){ .control-grid { grid-template-columns:1fr; } .integ-grid { grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion:reduce){ .mark.live { animation:none; } }


/* ═══════════ shared sub-page components (About / Contact / Privacy / Terms) ═══════════ */
.wrap-narrow { max-width:940px; }
.page section { padding:clamp(2.6rem,5vw,4.2rem) 0; }
.page-hero { position:relative; padding:clamp(3.5rem,7vw,6rem) 0 clamp(2rem,4vw,3rem); overflow:hidden; }
.page-hero::before { content:""; position:absolute; z-index:0; left:50%; top:-20%; transform:translateX(-50%); width:min(1100px,120%); height:520px; pointer-events:none; background:radial-gradient(46% 52% at 50% 30%, oklch(0.62 0.22 286 / 0.12), transparent 70%), radial-gradient(38% 40% at 76% 30%, oklch(0.72 0.16 42 / 0.07), transparent 70%); }
.page-hero .wrap { position:relative; z-index:1; display:flex; flex-direction:column; gap:1.25rem; max-width:56ch; }
.page-hero.center .wrap { align-items:center; text-align:center; margin-inline:auto; }
.page-hero h1 em { color:var(--primary); }
.crumbs { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--muted-fg); }
.crumbs a { color:var(--muted-fg); text-decoration:none; } .crumbs a:hover { color:var(--primary); }
.nav-links a.here { color:var(--ink); font-weight:600; }
.nav-links a.here::after { transform:scaleX(1); }
.vgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.vcard { display:flex; flex-direction:column; gap:0.7rem; padding:1.5rem 1.4rem; border-radius:1.1rem; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-card); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.vcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-float); border-color:color-mix(in oklch, var(--primary) 18%, var(--border)); }
.vcard .vi { width:44px; height:44px; border-radius:0.7rem; background-image:var(--grad); display:grid; place-items:center; flex:none; box-shadow:var(--shadow-sm); }
.vcard .vi svg { width:22px; height:22px; color:#fff; }
.vcard h3 { font-size:1.3rem; }
.vcard p { font-size:0.95rem; color:var(--muted-fg); line-height:1.5; }
.prose { max-width:64ch; display:flex; flex-direction:column; gap:1.15rem; }
.prose p { font-size:1.08rem; color:var(--ink-2); line-height:1.72; }
.prose p.big { font-family:var(--font-serif); font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.35; color:var(--ink); letter-spacing:-0.015em; }
.stats { display:flex; flex-wrap:wrap; justify-content:center; text-align:center; gap:clamp(1.5rem,5vw,4rem); margin-top:0.5rem; }
.stat .n { font-family:var(--font-serif); font-size:clamp(2rem,4vw,3rem); line-height:1; color:var(--primary); }
.stat .l { font-size:0.9rem; color:var(--muted-fg); margin-top:0.3rem; }
.cta { text-align:center; }
.cta-card { position:relative; overflow:hidden; border-radius:1.6rem; padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem); background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-float); text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.cta-card::before { content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(60% 90% at 50% 0%, oklch(0.62 0.22 286 / 0.1), transparent 68%), radial-gradient(50% 70% at 84% 108%, oklch(0.72 0.16 42 / 0.08), transparent 70%); }
.cta-card > * { position:relative; z-index:1; }
.cta-card .mark { width:52px; height:52px; }
.cta-card h2 em { color:var(--primary); }
.cta-cta { display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap; }
.contact-grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.form { display:flex; flex-direction:column; gap:1rem; padding:clamp(1.5rem,3vw,2rem); border-radius:1.2rem; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-card); }
.field { display:flex; flex-direction:column; gap:0.4rem; }
.field label { font-size:0.82rem; font-weight:600; color:var(--ink-2); }
.field input, .field select, .field textarea { font-family:inherit; font-size:0.95rem; color:var(--ink); background:var(--paper-2); border:1px solid var(--border); border-radius:0.65rem; padding:0.7rem 0.8rem; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:color-mix(in oklch, var(--primary) 45%, var(--border)); box-shadow:0 0 0 3px oklch(0.575 0.215 285 / 0.12); }
.field textarea { resize:vertical; min-height:120px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form .note { font-size:0.78rem; color:var(--muted-fg); }
.channels { display:flex; flex-direction:column; gap:0.9rem; }
.chan { display:flex; gap:0.85rem; align-items:flex-start; padding:1.1rem 1.15rem; border-radius:1rem; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-sm); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.chan:hover { transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:color-mix(in oklch, var(--primary) 20%, var(--border)); }
.chan .ci { width:40px; height:40px; border-radius:0.65rem; background:var(--accent); color:var(--accent-fg); display:grid; place-items:center; flex:none; }
.chan .ci svg { width:20px; height:20px; }
.chan > span:last-child { display:flex; flex-direction:column; }
.chan .ct { display:block; font-size:0.95rem; font-weight:600; color:var(--ink); }
.chan .cs { display:block; font-size:0.85rem; color:var(--muted-fg); margin-top:0.1rem; }
.doc { display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
.doc-toc { position:sticky; top:88px; display:flex; flex-direction:column; gap:0.15rem; }
.doc-toc .th { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-fg); margin-bottom:0.5rem; }
.doc-toc a { font-size:0.86rem; color:var(--ink-3); text-decoration:none; padding:0.28rem 0; border-left:2px solid transparent; padding-left:0.75rem; margin-left:-0.75rem; transition:color .15s, border-color .15s; }
.doc-toc a:hover { color:var(--primary); border-color:color-mix(in oklch, var(--primary) 40%, transparent); }
.doc-body { max-width:70ch; scroll-margin-top:88px; }
.doc-body section { padding:0; margin-bottom:2rem; }
.doc-body h2 { font-size:1.5rem; margin-bottom:0.7rem; scroll-margin-top:88px; }
.doc-body p { color:var(--ink-2); line-height:1.72; margin-bottom:0.8rem; }
.doc-body ul { margin:0 0 0.8rem; padding-left:1.2rem; color:var(--ink-2); line-height:1.7; }
.doc-body li { margin-bottom:0.35rem; }
.doc-body a { color:var(--primary); text-decoration:none; } .doc-body a:hover { text-decoration:underline; }
.doc-note { display:flex; gap:0.7rem; align-items:flex-start; padding:0.9rem 1.1rem; border-radius:0.9rem; background:color-mix(in oklch, var(--warning) 12%, var(--card)); border:1px solid color-mix(in oklch, var(--warning) 30%, var(--border)); font-size:0.88rem; color:var(--ink-2); line-height:1.5; }
.doc-note svg { width:18px; height:18px; color:var(--warning); flex:none; margin-top:1px; }
.doc-meta { font-family:var(--font-mono); font-size:0.72rem; color:var(--muted-fg); }
.doc-summary { background:var(--accent); border:1px solid color-mix(in oklch,var(--primary) 20%,var(--border)); border-radius:0.9rem; padding:1rem 1.2rem; font-size:0.95rem; color:var(--ink-2); line-height:1.6; margin-bottom:2rem; }
.doc-summary b { color:var(--primary); }
.doc-sub { font-family:var(--font-sans); font-size:1rem; font-weight:700; color:var(--ink); margin:1.3rem 0 0.55rem; letter-spacing:0; }
.doc-table { width:100%; border-collapse:collapse; margin:0.4rem 0 1rem; font-size:0.92rem; }
.doc-table th, .doc-table td { text-align:left; vertical-align:top; padding:0.6rem 0.7rem; border-bottom:1px solid var(--border); }
.doc-table th { font-weight:600; color:var(--ink); background:var(--paper-2); }
.doc-table td { color:var(--ink-2); line-height:1.55; }
.legalph { background:color-mix(in oklch,var(--warning) 22%,transparent); border-radius:4px; padding:0 5px; font-family:var(--font-mono); font-size:0.84em; color:oklch(0.4 0.08 70); white-space:nowrap; }
@media (max-width:820px){
  .page .nav-links { display:none; }
  .vgrid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .doc { grid-template-columns:1fr; }
  .doc-toc { position:static; flex-direction:row; flex-wrap:wrap; gap:0.5rem 1rem; margin-bottom:1.5rem; }
  .doc-toc .th { width:100%; margin-bottom:0.2rem; }
  .doc-toc a { border-left:none; padding-left:0; margin-left:0; }
  .form-row { grid-template-columns:1fr; }
}

/* faq */
.faq-list { max-width:46rem; margin-inline:auto; display:flex; flex-direction:column; gap:0.7rem; }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:0.9rem; box-shadow:var(--shadow-sm); }
.faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:0.8rem; padding:1.02rem 1.25rem; font-weight:600; color:var(--ink); font-size:1.02rem; text-align:left; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item .faq-x { margin-left:auto; flex:none; width:1.1rem; height:1.1rem; color:var(--muted-fg); transition:transform 0.25s ease, color 0.25s ease; }
.faq-item .faq-x svg { width:100%; height:100%; display:block; }
.faq-item[open] .faq-x { transform:rotate(45deg); color:var(--accent-fg); }
.faq-item[open] { border-color:color-mix(in oklch, var(--primary) 24%, var(--border)); box-shadow:var(--shadow-card); }
.faq-item p { padding:0 1.25rem 1.15rem; margin:0; color:var(--ink-3); line-height:1.62; font-size:0.97rem; text-align:left; }
.faq-item p a { color:var(--accent-fg); font-weight:600; text-decoration:none; }
.faq-item p a:hover { text-decoration:underline; }