/* ==========================================================================
   GRABVEX — shared design system  (one cached file across every page)
   ========================================================================== */
:root{
  --ink:#1c1b19; --mut:#8a857c; --bg:#ece7dd; --card:#fffdf9;
  --line:rgba(28,27,25,.12);
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --glow:#00d9bd; --ok:#00b15a; --err:#d83a3a;
  --pinterest:#E60023; --threads:#0a0a0a; --facebook:#1877F2; --youtube:#FF0000;
  --instagram:#C13584; --tiktok:#25F4EE;
  --pc:#1c1b19; /* per-page platform colour, overridden on tool pages */
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
::selection{background:var(--ink);color:var(--bg)}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.narrow{max-width:760px;margin:0 auto;padding:0 40px}
.hollow{color:transparent;-webkit-text-stroke:1.8px currentColor}

/* ---------- global hover-glow button ---------- */
.gbtn{position:relative;overflow:hidden;isolation:isolate}
.gbtn .glow{position:absolute;width:240px;height:240px;border-radius:50%;left:var(--gx,50%);top:var(--gy,50%);transform:translate(-50%,-50%) scale(0);transition:transform .4s ease;pointer-events:none;opacity:.5;z-index:0;background:radial-gradient(circle,var(--gc,var(--glow)) 10%,transparent 70%)}
.gbtn:hover .glow{transform:translate(-50%,-50%) scale(1)}
.gbtn>*:not(.glow):not(.fill){position:relative;z-index:2}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .3s ease,box-shadow .3s ease}
nav.scrolled{background:rgba(244,241,234,.82);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);box-shadow:0 1px 0 rgba(28,27,25,.08)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px}
.logo .mark{width:28px;height:28px;flex-shrink:0}
.logo b{font-family:'Archivo';font-weight:900;font-size:21px;letter-spacing:.01em}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-family:'Archivo';font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;transition:opacity .2s}
.nav-links a:hover,.nav-links a.active{opacity:1}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.5);backdrop-filter:blur(8px);align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- soft mesh background ---------- */
.bgmesh{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(85px);will-change:transform;transform:translateZ(0)}
.blob.b1{width:560px;height:560px;background:#ffb894;opacity:.5;top:-160px;right:-40px;animation:drift1 17s ease-in-out infinite}
.blob.b2{width:520px;height:520px;background:#b9aef7;opacity:.45;bottom:-180px;left:-90px;animation:drift2 21s ease-in-out infinite}
.blob.b3{width:440px;height:440px;background:#9fe6c8;opacity:.4;top:34%;left:30%;animation:drift3 19s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,40px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,30px)}}

/* ---------- rotating word (no stroke, vivid gradient) ---------- */
.rot{position:relative;display:block;overflow:hidden;height:.92em}
.rot span{position:absolute;left:0;top:0;width:100%;transform:translateY(110%);opacity:0;
  background:linear-gradient(95deg,#FF2D55,#C026D3 55%,#7C3AED);-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:transform .7s var(--spring),opacity .5s ease}
.rot span.on{transform:translateY(0);opacity:1}
.rot span.up{transform:translateY(-110%);opacity:0;transition:transform .6s var(--ease),opacity .4s ease}

/* ---------- HOME hero ---------- */
.hero{position:relative;min-height:90svh;display:flex;align-items:center;padding:74px 0 36px;overflow:hidden}
.hero-grid{position:relative;z-index:3;width:100%;max-width:1320px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.hero .col{position:relative;z-index:3}
.col-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.kick{display:inline-flex;align-items:center;gap:9px;font-family:'Archivo';font-weight:700;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#6b665d;margin-bottom:11px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);padding:8px 14px;border-radius:100px;backdrop-filter:blur(10px)}
.kick .d{width:7px;height:7px;background:var(--pinterest);border-radius:50%;box-shadow:0 0 9px rgba(230,0,35,.6)}
.hero h1{font-family:'Archivo';font-weight:900;letter-spacing:-.035em;line-height:.84;font-size:clamp(54px,7vw,108px)}
.hero .sub{max-width:420px;margin-top:12px;font-size:16.5px;line-height:1.55;color:#5b564e}
.cta-row{display:flex;gap:11px;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Archivo';font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:16px 26px;border-radius:12px;transition:transform .18s}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--ink);color:#fff;--gc:var(--glow)}
.btn.ghost{border:1px solid rgba(28,27,25,.2);background:rgba(255,255,255,.4)}

/* stage / phone */
.stage{position:relative;z-index:3;height:100%;display:flex;align-items:center;justify-content:center;perspective:1500px}
.phone-bob{position:relative;z-index:2;transform-style:preserve-3d;animation:bob 6.5s ease-in-out infinite;will-change:transform}
@keyframes bob{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
.frame{position:relative;border-radius:50px;padding:4px;background:linear-gradient(120deg,#FF3B3B,#FF9F1C,#FFD500,#2EC4B6,#3A86FF,#8338EC,#FF3B3B);background-size:300% 300%;animation:rainbowShift 5s linear infinite;transform-style:preserve-3d;transform:rotateX(var(--rx,5deg)) rotateY(var(--ry,-9deg));transition:transform .5s var(--ease);box-shadow:0 2px 4px rgba(0,0,0,.25),34px 46px 70px rgba(0,0,0,.22)}
@keyframes rainbowShift{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.phone{position:relative;width:clamp(244px,20vw,272px);aspect-ratio:300/620;border-radius:46px;background:linear-gradient(150deg,#232323,#000);padding:10px}
.notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:78px;height:20px;background:#000;border-radius:0 0 13px 13px;z-index:6}
.screen{width:100%;height:100%;border-radius:36px;background:#fff;overflow:hidden;position:relative;display:flex;flex-direction:column}
.s-top{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 4px;font-family:'Archivo';font-weight:700;font-size:10.5px;color:#1a1a1a;flex-shrink:0}
.s-top .sig{display:flex;gap:3px;align-items:flex-end}
.s-top .sig i{width:3px;background:#1a1a1a;border-radius:1px}
.s-top .sig i:nth-child(1){height:5px}.s-top .sig i:nth-child(2){height:8px}.s-top .sig i:nth-child(3){height:11px}
.s-head{padding:5px 13px 9px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.s-logo{display:flex;align-items:center;gap:6px}
.s-logo b{font-family:'Archivo';font-weight:900;font-size:13px;color:#1a1a1a;letter-spacing:.04em;text-transform:uppercase}
.getall{font-family:'Archivo';font-weight:800;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:#1a1a1a;border-radius:7px;padding:6px 9px;display:flex;align-items:center;gap:5px;animation:tap 5s infinite}
@keyframes tap{0%,6%{transform:scale(1)}9%{transform:scale(.88)}13%,100%{transform:scale(1)}}
.s-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:8px;padding:2px 13px 13px;min-height:0}
.pcard{position:relative;border-radius:14px;padding:11px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.pcard .ic{width:24px;height:24px}
.pcard .pn{font-family:'Archivo';font-weight:800;font-size:11.5px}
.pcard .bar{height:4px;border-radius:3px;background:rgba(255,255,255,.42);overflow:hidden;margin-top:8px}
.pcard .bar i{display:block;height:100%;width:0;background:#fff;border-radius:3px;animation:barfill 5s var(--ease) infinite;animation-delay:calc(var(--i)*.2s)}
.pcard .chk{position:absolute;top:9px;right:9px;width:19px;height:19px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.3);box-shadow:0 2px 6px rgba(0,0,0,.2);animation:chkpop 5s var(--ease) infinite;animation-delay:calc(var(--i)*.2s)}
@keyframes barfill{0%,6%{width:0}38%{width:100%}90%{width:100%}97%,100%{width:0}}
@keyframes chkpop{0%,36%{opacity:0;transform:scale(.3)}44%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.3)}}
.toast{position:absolute;left:13px;right:13px;bottom:14px;z-index:7;background:#1a1a1a;border-radius:13px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 14px 36px rgba(0,0,0,.3);transform:translateY(130%);opacity:0;animation:toast 5s var(--ease) infinite}
@keyframes toast{0%,60%{transform:translateY(130%);opacity:0}70%,90%{transform:translateY(0);opacity:1}97%,100%{transform:translateY(130%);opacity:0}}
.toast .ok{width:25px;height:25px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast b{font-family:'Archivo';font-weight:800;font-size:11.5px;color:#fff;display:block;line-height:1.15}
.toast span{font-size:10px;color:#aaa}
.cursor{position:absolute;z-index:8;width:19px;height:19px;right:16px;top:58px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));animation:cur 5s infinite}
@keyframes cur{0%{transform:translate(20px,40px);opacity:0}5%{opacity:1}9%{transform:translate(0,0)}11%{transform:translate(0,0) scale(.8)}16%{transform:translate(0,0) scale(1)}30%{transform:translate(-30px,80px);opacity:0}100%{opacity:0}}

/* liquid-glass speciality chips */
.spec{position:absolute;z-index:9;display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,rgba(255,255,255,.65),rgba(255,255,255,.35));
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.75);border-radius:100px;padding:9px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.9);
  font-family:'Archivo';font-weight:800;font-size:11.5px;color:#1c1b19;white-space:nowrap;
  animation:orbit var(--dur,8s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.spec svg{width:15px;height:15px;flex-shrink:0}
@keyframes orbit{0%,100%{transform:translate(0,0)}25%{transform:translate(5px,-6px)}50%{transform:translate(0,-10px)}75%{transform:translate(-5px,-6px)}}
.spec.s1{top:1%;right:100%;margin-right:-26px;--dur:8s}
.spec.s3{top:41%;right:100%;margin-right:-42px;--dur:9s;--dl:.7s}
.spec.s5{bottom:10%;right:100%;margin-right:-26px;--dur:8.6s;--dl:1.1s}
.spec.s2{top:5%;left:100%;margin-left:-26px;--dur:8.4s;--dl:.3s}
.spec.s4{top:45%;left:100%;margin-left:-42px;--dur:7.8s;--dl:.9s}
.spec.s6{bottom:3%;left:100%;margin-left:-26px;--dur:9.2s;--dl:.5s}
.spec-row{display:none}

/* ---------- sections ---------- */
.sec{position:relative;padding:104px 0}
.sec.dark{background:#0d0c0b;color:#f3efe7}
.sec-tag{display:flex;align-items:center;gap:14px;margin-bottom:48px}
.sec-tag .n{font-family:'Archivo';font-weight:700;font-size:12px;letter-spacing:.2em}
.sec-tag .bar{flex:1;height:1px;background:currentColor;opacity:.18}
.sec-head{max-width:720px;margin-bottom:50px}
.sec-head h2{font-family:'Archivo';font-weight:900;letter-spacing:-.03em;line-height:.95;font-size:clamp(34px,5vw,68px)}
.sec-head p{margin-top:18px;font-size:17px;line-height:1.6;color:var(--mut);max-width:560px}
.sec.dark .sec-head p{color:#a39e95}

/* platforms list */
.plist{border-top:1px solid var(--line)}
.sec.dark .plist{border-color:rgba(255,255,255,.12)}
.item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 4px;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease)}
.sec.dark .item{border-color:rgba(255,255,255,.12)}
.item .L{display:flex;align-items:center;gap:20px}
.item .pdot{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.item .pdot svg{width:20px;height:20px}
.item .name{font-family:'Archivo';font-weight:900;font-size:clamp(30px,5vw,62px);letter-spacing:-.02em;line-height:1}
.item .R{display:flex;align-items:center;gap:18px}
.pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:240px}
.pill{font-family:'Archivo';font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line);border-radius:100px;color:var(--mut)}
.sec.dark .pill{border-color:rgba(255,255,255,.14)}
.item .go{font-family:'Archivo';font-weight:700;font-size:15px;color:var(--mut);transition:transform .3s,color .3s}
.item.live{cursor:pointer}
.item.live:hover{padding-left:16px}
.item.live:hover .go{color:var(--pc2);transform:translateX(4px)}
.item.soon{opacity:.5}
.item .soon-tag{font-family:'Archivo';font-weight:700;font-size:11px;letter-spacing:.16em;color:var(--mut)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.step{background:var(--bg);padding:44px 36px}
.sec.dark .step{background:#0d0c0b}
.step .sn{font-family:'Archivo';font-weight:900;font-size:52px;letter-spacing:-.03em;opacity:.16;line-height:1}
.step h3{font-family:'Archivo';font-weight:800;font-size:21px;margin:20px 0 11px}
.step p{font-size:15px;line-height:1.6;color:var(--mut)}

/* feature grid */
.lead-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.feat .ic{width:30px;height:30px;color:var(--pc2,#ff5a78)}
.feat h3{font-family:'Archivo';font-weight:800;font-size:19px;margin:16px 0 9px}
.feat p{font-size:15px;line-height:1.6;color:var(--mut)}
.sec.dark .feat p{color:#9a958c}

/* ---------- TOOL hero ---------- */
.tool-hero{position:relative;padding:104px 0 70px;text-align:center;overflow:hidden}
.tool-hero .blob.b1{background:var(--pc);opacity:.3;top:-200px;left:50%;transform:translateX(-50%)}
.tool-hero .inner{position:relative;z-index:3}
.badge{display:inline-flex;align-items:center;gap:9px;font-family:'Archivo';font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#6b665d;margin-bottom:14px;background:linear-gradient(135deg,rgba(255,255,255,.65),rgba(255,255,255,.35));backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.75);padding:8px 15px;border-radius:100px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--pc);box-shadow:0 0 9px var(--pc)}
.tool-hero h1{font-family:'Archivo';font-weight:900;letter-spacing:-.03em;line-height:.88;font-size:clamp(44px,7.5vw,100px);color:var(--ink);text-align:center}
.tool-hero .lede{max-width:520px;margin:18px auto 0;font-size:17px;line-height:1.55;color:#5b564e}

/* downloader card — liquid glass */
.card{position:relative;max-width:680px;margin:30px auto 0;z-index:3;
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(255,255,255,.85);border-radius:24px;padding:30px;
  box-shadow:0 30px 70px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.9)}
.betabar{display:flex;align-items:center;gap:9px;background:#fff5e6;border:1px solid #ffd9a8;color:#8a5a00;font-family:'Archivo';font-weight:700;font-size:12.5px;letter-spacing:.01em;line-height:1.4;padding:12px 14px;border-radius:11px;margin-bottom:18px}
.tabs{display:flex;gap:7px;margin-bottom:20px;flex-wrap:wrap}
.tab{font-family:'Archivo';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 15px;border:1px solid var(--line);color:var(--mut);background:rgba(255,255,255,.5);border-radius:9px;transition:.2s}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.urlrow{display:flex;gap:9px;margin-bottom:16px}
.urlrow input{flex:1;min-width:0;font-family:'DM Sans';font-size:16px;padding:16px 18px;border:1px solid var(--line);background:rgba(255,255,255,.6);color:var(--ink);outline:none;border-radius:11px;transition:border-color .2s}
.urlrow input:focus{border-color:var(--pc)}
.urlrow .paste{font-family:'Archivo';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:0 20px;border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:11px;transition:.2s}
.urlrow .paste:hover{border-color:var(--ink)}
.quality{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.q{font-family:'Archivo';font-weight:700;font-size:11px;letter-spacing:.06em;padding:9px 14px;border:1px solid var(--line);color:var(--mut);background:rgba(255,255,255,.5);border-radius:8px;transition:.2s}
.q.on{border-color:var(--pc);color:var(--pc);background:color-mix(in srgb,var(--pc) 7%,transparent)}
.dlbtn{position:relative;width:100%;font-family:'Archivo';font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:20px;background:var(--pc);color:#fff;border:none;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:11px;transition:filter .2s;--gc:rgba(255,255,255,.7)}
.dlbtn:hover{filter:brightness(1.07)}
.dlbtn:disabled{cursor:default}
.dlbtn .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.22);z-index:1;transition:width .15s linear}
.dlbtn .lab{display:flex;align-items:center;justify-content:center;gap:11px}
.dlbtn.done{background:var(--ok)}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:rotsp .7s linear infinite;display:inline-block}
@keyframes rotsp{to{transform:rotate(360deg)}}
.status{margin-top:14px;font-family:'Archivo';font-weight:700;font-size:12.5px;letter-spacing:.02em;display:none;align-items:center;gap:9px}
.status.show{display:flex}.status.bad{color:var(--err)}.status.good{color:var(--ok)}
.result{display:none;gap:16px;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.result.show{display:flex;animation:fadeUp .5s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.result .thumb{width:116px;height:74px;border-radius:9px;background:#eee var(--th) center/cover no-repeat;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.result .meta{flex:1;min-width:0}
.result .meta .ttl{font-family:'Archivo';font-weight:800;font-size:15px;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result .meta .row{display:flex;gap:13px;color:var(--mut);font-size:12.5px;font-family:'Archivo';font-weight:700;letter-spacing:.05em;text-transform:uppercase;flex-wrap:wrap}
.result .save{font-family:'Archivo';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:13px 18px;border:none;background:var(--ink);color:#fff;border-radius:10px;white-space:nowrap;--gc:var(--glow)}
.privacy{text-align:center;margin-top:18px;font-family:'Archivo';font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.trust{position:relative;z-index:3;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.tpill{display:inline-flex;align-items:center;gap:8px;font-family:'Archivo';font-weight:800;font-size:11.5px;color:#5b564e;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(10px);padding:9px 14px;border-radius:100px}
.tpill svg{width:14px;height:14px}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto;border-top:1px solid var(--line)}
.sec.dark .faq{border-color:rgba(255,255,255,.12)}
.qa{border-bottom:1px solid var(--line)}
.sec.dark .qa{border-color:rgba(255,255,255,.12)}
.qa summary{list-style:none;cursor:pointer;padding:24px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:'Archivo';font-weight:700;font-size:clamp(16px,2vw,19px);letter-spacing:-.005em}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{font-family:'Archivo';font-weight:500;font-size:26px;line-height:1;flex-shrink:0;transition:transform .3s var(--ease);opacity:.5}
.qa[open] summary .pm{transform:rotate(45deg)}
.qa .ans{padding:0 4px 26px;max-width:660px;font-size:16px;line-height:1.72;color:#4a463f}
.sec.dark .qa .ans{color:#a39e95}

/* ---------- prose (blog + legal) ---------- */
.prose{max-width:680px;margin:0 auto;font-size:17.5px;line-height:1.75;color:#39352e}
.prose h2{font-family:'Archivo';font-weight:800;font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;line-height:1.1;margin:52px 0 18px}
.prose h3{font-family:'Archivo';font-weight:800;font-size:clamp(20px,3vw,25px);margin:36px 0 12px}
.prose p{margin:0 0 22px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:24px}
.prose li{margin:0 0 11px}
.prose a{color:var(--pc);text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:600}
.prose blockquote{border-left:2px solid var(--ink);padding-left:22px;margin:0 0 26px;font-style:italic;color:#5b564e}
.prose code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;background:#e3ddd1;padding:2px 6px;border-radius:3px}
.prose hr{border:none;border-top:1px solid var(--line);margin:44px 0}
.prose .lead{font-size:21px;line-height:1.6;color:#5b564e;margin-bottom:30px}
.art-head{padding:128px 0 46px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.art-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-family:'Archivo';font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:22px;position:relative;z-index:3}
.art-meta .tag{color:var(--ink);border:1px solid var(--line);padding:5px 11px;border-radius:100px}
.art-head h1{font-family:'Archivo';font-weight:900;letter-spacing:-.03em;line-height:1.02;font-size:clamp(32px,5.4vw,60px);max-width:920px;position:relative;z-index:3}
.art-head .dek{margin-top:20px;font-size:19px;line-height:1.55;color:#5b564e;max-width:620px;position:relative;z-index:3}

/* blog index cards */
.post-list{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.post{background:var(--card);padding:38px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;transition:background .25s}
.post:hover{background:#fff}
.post .pno{font-family:'Archivo';font-weight:700;font-size:13px;color:var(--mut)}
.post .pcat{font-family:'Archivo';font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:11px}
.post h3{font-family:'Archivo';font-weight:800;font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;line-height:1.1;margin-bottom:10px}
.post p{color:#5b564e;font-size:15px;line-height:1.55;max-width:560px}
.post .parr{font-family:'Archivo';font-weight:700;font-size:20px;transition:transform .25s}
.post:hover .parr{transform:translate(4px,-4px)}

/* CTA */
.cta{position:relative;text-align:center;padding:104px 40px}
.cta h2{font-family:'Archivo';font-weight:900;letter-spacing:-.03em;line-height:.95;font-size:clamp(38px,7vw,92px)}
.cta h2 .hl{color:var(--pc)}
.cta .btn{margin-top:32px;padding:19px 34px;background:var(--ink);color:var(--bg);--gc:var(--glow)}
.sec.dark .cta h2{color:#f3efe7}.sec.dark .cta .btn{background:#f3efe7;color:#0d0c0b}

/* footer */
.foot{background:#0d0c0b;position:relative;padding:80px 0 38px;color:#f3efe7}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#FF3B3B,#FF9F1C,#FFD500,#2EC4B6,#3A86FF,#8338EC);opacity:.9}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-logo{font-family:'Archivo';font-weight:900;font-size:clamp(44px,7vw,104px);letter-spacing:-.02em;line-height:.85}
.foot-logo .hollow{color:rgba(243,239,231,.16);-webkit-text-stroke:1.6px #f3efe7}
.foot-tag{margin-top:18px;color:#8a857c;font-size:14px;max-width:280px;line-height:1.6}
.foot-col h4{font-family:'Archivo';font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8a857c;margin-bottom:20px}
.foot-col a{display:block;font-family:'Archivo';font-weight:700;font-size:16px;margin-bottom:13px;opacity:.85;transition:opacity .2s}
.foot-col a:hover{opacity:1}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;font-size:13px;color:#8a857c;font-family:'Archivo';font-weight:500}

/* 404 */
.nf{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 40px;position:relative;overflow:hidden}
.nf .big{font-family:'Archivo';font-weight:900;font-size:clamp(110px,28vw,300px);letter-spacing:-.04em;line-height:.85;position:relative;z-index:3}
.nf .big .hollow{-webkit-text-stroke:2.4px var(--ink)}
.nf p{margin:22px 0 34px;font-size:18px;color:#5b564e;max-width:420px;position:relative;z-index:3}
.nf .btn{position:relative;z-index:3;background:var(--ink);color:var(--bg);--gc:var(--glow)}

/* reveal + entrance */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.fu{opacity:0;transform:translateY(22px);animation:fuf .9s forwards var(--ease)}
@keyframes fuf{to{opacity:1;transform:none}}
.d1{animation-delay:.08s}.d2{animation-delay:.2s}.d3{animation-delay:.34s}.d4{animation-delay:.48s}.d5{animation-delay:.62s}

/* ==========================================================================
   responsive / mobile
   ========================================================================== */
/* hand the floating chips off to a feature row before they can clip */
@media(max-width:1180px){
  .spec{display:none}
  .stage{flex-direction:column;gap:22px}
  .spec-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;position:relative;z-index:3;max-width:360px}
}
/* pause the hero's animations once it scrolls out of view → smooth scrolling */
.hero.paused .phone-bob,.hero.paused .frame,.hero.paused .blob,.hero.paused .bar i,.hero.paused .chk,.hero.paused .toast,.hero.paused .cursor,.hero.paused .getall{animation-play-state:paused}
/* touch devices: the nav's backdrop-blur is the main thing that makes scroll feel sticky */
@media(hover:none){
  nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(244,241,234,.97)}
  .blob{filter:blur(50px)}
}
@media(max-width:980px){
  .wrap{padding:0 24px}.narrow{padding:0 24px}
  .nav-links{position:fixed;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(245,242,235,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:8px 24px 18px;transform:translateY(-130%);transition:transform .3s var(--ease);z-index:79}
  .nav-links.open{transform:none}
  .nav-links a{padding:15px 4px;border-bottom:1px solid var(--line);font-size:14px;opacity:.85}
  .burger{display:flex}
  .hero{padding:92px 0 50px;min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:14px;text-align:center;padding:0 24px}
  .col-text{order:1;align-items:center}
  .kick,.cta-row{margin-left:auto;margin-right:auto}
  .kick{display:inline-flex;font-size:9.5px;letter-spacing:.07em;padding:7px 12px;white-space:nowrap}
  .sub{margin-left:auto;margin-right:auto}
  .stage{order:2;margin-top:14px;min-height:560px}
  .steps,.lead-grid{grid-template-columns:1fr;gap:2px}
  .lead-grid{gap:30px}
  .foot-top{grid-template-columns:1fr;gap:40px}
  .sec{padding:78px 0}
  .post{grid-template-columns:1fr;gap:12px;padding:28px 24px}
  .post .pno,.post .parr{display:none}
  .item .R .pills{display:none}
}
@media(max-width:560px){
  .urlrow{flex-direction:column}
  .result{flex-direction:column;align-items:flex-start}
  .card{padding:24px 20px}
  .item .name{font-size:clamp(28px,9vw,40px)}
  .art-head{padding:108px 0 38px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}