/* Layout: Stripe-like light system. White and pale-blue bands, navy type, one blue accent from the logo,
   colour comes from the hero gradient and small product visuals. Rounded 8/14/20, pill buttons, glassy header. Light only by design. */
:root{
  --bg:#FFFFFF; --bg2:#F6F9FC; --bg3:#EEF4FB; --navy:#0A2540; --navy2:#0E2E52;
  --line:#E3E8EF; --line2:#D5DEEA;
  --fg:#0A2540; --muted:#425466; --dim:#6B7C93;
  --accent:#2F6BFF; --accent-hi:#1F57E8; --sky:#4FA8FF; --ice:#8CC8FF;
  --violet:#7A5CFF; --cyan:#13C2E8; --coral:#FF7A59; --mint:#1FC79B; --amber:#F5A524;
  --good:#12A877; --warn:#D98A00; --bad:#E5484D;
  --glass:#F6F9FC; --glass2:#EDF2F8;
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:6px; --r-s:4px; --r-l:8px; --pill:4px; --round:999px; --max:1160px;
  --sh1:0 1px 2px rgba(10,37,64,.06),0 2px 8px rgba(10,37,64,.05);
  --sh2:0 2px 6px rgba(10,37,64,.06),0 18px 40px -12px rgba(10,37,64,.18);
  --sh3:0 30px 60px -12px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.3);
  color-scheme:light;
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased;margin:0;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:rgba(255,255,255,.9)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance;color:var(--fg)}
h1{font-size:clamp(40px,6.4vw,76px);font-weight:500}
h2{font-size:clamp(30px,4.2vw,48px);font-weight:500}
h3{font-size:20px;font-weight:650;letter-spacing:-.015em}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:13px;color:var(--dim)} .mono{font-variant-numeric:tabular-nums}
.lead{font-size:clamp(18px,1.9vw,21px);line-height:1.55;color:var(--muted);max-width:58ch}
.eyebrow{font:600 14px/1.2 var(--body);color:var(--accent);letter-spacing:0}
.kicker{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--body);color:var(--accent)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:100;background:var(--accent);color:#fff;padding:10px 16px;border-radius:var(--pill)}

/* buttons: Stripe-style pill with a sliding arrow */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border-radius:var(--pill);font-weight:600;font-size:15px;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.btn .ar{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}
.btn .ar .ln{opacity:0;transition:opacity .2s}
@media(hover:hover){.btn:hover .ar{transform:translateX(3px)}.btn:hover .ar .ln{opacity:1}}
.btn-p{background:var(--accent);color:#fff;box-shadow:0 6px 18px -6px rgba(47,107,255,.6)}
.btn-p:hover{background:var(--accent-hi)}
.btn-s{background:var(--bg);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line2)}
.btn-s:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.btn-d{background:var(--navy);color:#fff}
.btn-g{color:var(--accent);padding:0 4px;min-height:40px}
.on-dark .btn-s{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}

/* ===== header: glassy bar + mega menu ===== */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;border-bottom:1px solid rgba(10,37,64,.06)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.55);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);transition:background .25s}
.hdr.solid::before{background:rgba(255,255,255,.86)}
.hdr .bar{display:flex;align-items:center;gap:8px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font:700 17px/1 var(--display);letter-spacing:-.01em;white-space:nowrap;color:var(--fg)}
.brand svg{width:30px;height:30px;display:block;border-radius:3px}
.nav{display:flex;gap:2px;margin-left:20px}
.nav>li{list-style:none;position:static}
.nav{padding:0;margin-block:0}
.nav .top{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 12px;border-radius:var(--pill);font-weight:550;font-size:15px;color:var(--fg);transition:background .2s,color .2s}
.nav .top svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s;opacity:.6}
.nav .top.on{color:var(--accent)}
.nav li.open>.top,.nav .top:hover{background:rgba(10,37,64,.05)}
.nav li.open>.top svg{transform:rotate(180deg)}
.hdr .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.hdr .signin{font-weight:550;font-size:15px;padding:0 12px;height:40px;display:inline-flex;align-items:center;border-radius:var(--pill)}
.hdr .signin:hover{background:rgba(10,37,64,.05)}
.mega{position:absolute;left:0;right:0;top:100%;padding-top:8px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);transform-origin:50% 0;transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s .22s;pointer-events:none}
.nav li.open>.mega{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1);pointer-events:auto}
.mega .in{max-width:var(--max);margin:0 auto;padding:0 max(20px,env(safe-area-inset-left,0px))}
.mega .card{background:rgba(255,255,255,.8);backdrop-filter:blur(36px) saturate(1.8);-webkit-backdrop-filter:blur(36px) saturate(1.8);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-l);box-shadow:var(--sh3);padding:22px;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)) var(--aside,0fr);gap:8px 22px}
.mega h5{grid-column:1/-1;margin:0 0 2px;font:600 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.mi{display:grid;grid-template-columns:36px 1fr;gap:2px 12px;align-items:start;padding:10px;border-radius:6px;transition:background .15s}
.mi:hover,.mi:focus-visible{background:rgba(47,107,255,.07)}
.mi .ic{grid-row:span 2;width:36px;height:36px;border-radius:6px;display:grid;place-items:center;background:var(--ic,linear-gradient(135deg,var(--ice),var(--accent)));color:#fff;font:700 13px var(--display)}
.mi .ic svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.mi b{font-weight:600;font-size:15px;line-height:1.3}
.mi span{font-size:13px;color:var(--muted);line-height:1.4}
.mi .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.mega .aside{border-left:1px solid var(--line);padding-left:22px;display:grid;gap:10px;align-content:start}
.mega .aside .feat{border-radius:6px;padding:16px;background:linear-gradient(140deg,#0A2540,#1A4FB8 70%,#4FA8FF);color:#fff;display:grid;gap:6px}
.mega .aside .feat span{color:#CFE3FF;font-size:13px}
.burger{display:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:var(--fg);margin:2px 0;border-radius:2px}
.burger .bl{display:grid;gap:3px}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:70;background:rgba(10,37,64,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.menu .panel{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));max-height:calc(100% - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;
  background:rgba(255,255,255,.92);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);border-radius:var(--r-l);box-shadow:var(--sh3);padding:10px 14px 16px;animation:pop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.menu .ph{display:flex;align-items:center;justify-content:space-between;min-height:52px}
.menu .close{width:44px;height:44px;border-radius:50%;font-size:24px;line-height:1}
.menu details{border-bottom:1px solid var(--line);padding:0}
.menu summary{min-height:52px;font:600 18px/1 var(--display);display:flex;align-items:center;justify-content:space-between}
.menu details .sub{display:grid;gap:2px;padding:0 0 12px}
.menu details .sub a{padding:10px 8px;border-radius:6px;font-size:15px;color:var(--muted)}
.menu details .sub a b{color:var(--fg);font-weight:600;display:block}
.menu .solo{display:flex;align-items:center;min-height:52px;font:600 18px/1 var(--display);border-bottom:1px solid var(--line)}
.menu .acts{display:grid;gap:8px;margin-top:14px}
.menu .acts .btn{width:100%}

/* ===== sections ===== */
main{display:block}
.band{padding-block:96px}
.band.alt{background:var(--bg2)}
.band.tight{padding-block:64px}
.band.dark{background:var(--navy);color:#fff}
.band.dark h2,.band.dark h3{color:#fff}
.band.dark .lead,.band.dark .muted{color:#ADBDCC}
.band.dark .eyebrow{color:var(--ice)}
.shead{display:grid;gap:14px;max-width:760px;margin-bottom:44px}
.shead.c{margin-inline:auto;text-align:center;justify-items:center}
.shead .lead{max-width:62ch}
.page-head{padding-block:72px 40px;background:linear-gradient(180deg,var(--bg2),var(--bg))}
.page-head .wrap{display:grid;gap:16px}
.page-title{font-size:clamp(36px,5.4vw,60px)}

/* ===== hero with animated gradient ===== */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:148px 96px;margin-top:-65px}
.hero .grad{position:absolute;left:0;right:0;top:0;height:82%;z-index:-1;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 62%,0 100%);-webkit-mask-image:linear-gradient(215deg,#000 22%,rgba(0,0,0,.45) 50%,transparent 78%);mask-image:linear-gradient(215deg,#000 22%,rgba(0,0,0,.45) 50%,transparent 78%)}
.hero .grad canvas,.hero .grad .fallback{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .grad .fallback{background:
  radial-gradient(40% 60% at 15% 30%,#8CC8FF 0,transparent 70%),
  radial-gradient(35% 55% at 45% 10%,#7A5CFF 0,transparent 70%),
  radial-gradient(40% 60% at 75% 35%,#13C2E8 0,transparent 70%),
  radial-gradient(35% 50% at 95% 10%,#FF7A59 0,transparent 70%),
  linear-gradient(120deg,#C9E3FF,#2F6BFF);opacity:.9}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero .copy{display:grid;gap:24px;min-width:0}
.hero h1{font-size:clamp(40px,5.4vw,68px);font-weight:500;letter-spacing:-.03em;line-height:1.06}
h1 .t2,h2 .t2{color:#5B6E8A;font-weight:inherit}
.band.dark h2 .t2{color:#8FA6C4}
.hero .lead{color:#2A3F5A;font-size:clamp(18px,1.8vw,21px)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .micro{font-size:14px;color:var(--muted);display:flex;gap:6px 16px;flex-wrap:wrap}
.hero .micro span{display:inline-flex;align-items:center;gap:6px}
.hero .micro span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
.pill-new{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:5px 12px 5px 6px;border-radius:var(--pill);background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--sh1);font-size:13px;font-weight:550}
.pill-new b{background:var(--navy);color:#fff;border-radius:var(--pill);padding:3px 8px;font-size:11px;letter-spacing:.04em}

/* hero product stack */
.stack{position:relative;min-height:470px}
.win{position:absolute;background:#fff;border-radius:var(--r);box-shadow:var(--sh3);overflow:hidden;border:1px solid rgba(10,37,64,.06)}
.win .tb{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--dim)}
.win .tb i{width:8px;height:8px;border-radius:50%;background:var(--line2)}
.win .tb b{color:var(--fg);font-weight:600;margin-left:6px}
.win .tb .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--good);font-weight:600}
.win .tb .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(18,168,119,.18);animation:blink 1.6s infinite}
@keyframes blink{50%{box-shadow:0 0 0 6px rgba(18,168,119,0)}}
.w-hub{left:0;right:8%;top:0}
.w-hub .body{padding:16px;display:grid;gap:14px}
.w-hub .goal{display:flex;justify-content:space-between;align-items:end;gap:12px}
.w-hub .goal b{font:700 34px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.w-hub .goal .small b{font:inherit;color:var(--fg)}
.meter{height:8px;border-radius:5px;background:var(--glass2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--sky),var(--accent));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.w-hub .depts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.w-hub .d{border:1px solid var(--line);border-radius:6px;padding:8px;display:grid;gap:2px;font-size:11.5px;color:var(--muted);transition:border-color .4s,background .4s}
.w-hub .d b{font:650 15px var(--display);color:var(--fg);font-variant-numeric:tabular-nums}
.w-hub .d.alert{border-color:rgba(229,72,77,.45);background:rgba(229,72,77,.06)}
.w-hub .d.alert b{color:var(--bad)}
.w-hub .d.ok b{color:var(--good)}
.w-hub svg.spark{width:100%;height:70px;display:block}
.w-alert{right:0;top:58%;width:min(300px,62%)}
.w-alert .body{padding:14px;display:grid;gap:8px;font-size:13px}
.w-alert .tag{display:inline-flex;align-self:start;justify-self:start;padding:3px 8px;border-radius:var(--pill);font-size:11px;font-weight:700;letter-spacing:.03em;background:rgba(229,72,77,.1);color:var(--bad);transition:background .4s,color .4s}
.w-alert.fixed .tag{background:rgba(18,168,119,.12);color:var(--good)}
.w-alert p{color:var(--muted);min-height:3.2em}
.w-alert .ag{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.w-alert .ag i{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--violet),var(--accent));display:grid;place-items:center;color:#fff;font:700 10px var(--display);font-style:normal}
.w-phone{left:4%;top:52%;width:150px;border-radius:26px;padding:10px;background:#0A2540}
.w-phone .scr{background:#fff;border-radius:18px;padding:10px;display:grid;gap:8px;font-size:11px}
.w-phone .scr b{font:700 20px/1 var(--display);font-variant-numeric:tabular-nums}
.w-phone .bars{display:flex;align-items:flex-end;gap:3px;height:44px}
.w-phone .bars i{flex:1;border-radius:3px 3px 0 0;background:var(--ice)}
.w-phone .bars i.x{background:var(--accent)}

/* logos */
.logos{padding-block:28px 8px}
.logos .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 36px}
.logos .lbl{font-size:14px;color:var(--dim);flex-basis:100%;text-align:center}
.logos b{font:700 clamp(18px,2vw,24px)/1 var(--display);letter-spacing:-.02em;color:#7C8BA1;transition:color .2s}
.logos b:hover{color:var(--fg)}

/* bento boards */
.bento-b{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto);gap:14px}
.bx{position:relative;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh1),inset 0 0 0 1px var(--line);padding:20px;display:flex;flex-direction:column;gap:10px;overflow:hidden;min-width:0;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
@media(hover:hover){.bx:hover{transform:translateY(-3px);box-shadow:var(--sh2),inset 0 0 0 1px var(--line2)}}
.bx .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bx .no{font:500 12px var(--mono);color:var(--dim)}
.bx .go{width:28px;height:28px;border-radius:4px;display:grid;place-items:center;background:var(--glass2);transition:background .2s,transform .2s}
.bx .go svg{width:14px;height:14px;stroke:var(--fg);fill:none;stroke-width:2}
@media(hover:hover){.bx:hover .go{background:var(--accent);transform:rotate(-45deg)}.bx:hover .go svg{stroke:#fff}}
.bx h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.025em}
.bx .q{font-size:14px;color:var(--muted);line-height:1.45}
.bx .kv{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.bx .kv b{font:700 24px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bx .kv span{font-size:12.5px;color:var(--dim)}
.bx .kv .d{font-weight:700;font-size:12.5px}
.bx svg.sp{width:100%;height:46px;display:block;margin-top:2px}
.bx.hub{grid-column:span 3;grid-row:span 2;background:linear-gradient(150deg,#0A2540 0%,#163E7A 55%,#2F6BFF 100%);color:#fff;box-shadow:var(--sh2)}
.bx.hub h3{color:#fff;font-size:clamp(30px,3.4vw,44px)}
.bx.hub .q,.bx.hub .no,.bx.hub .kv span{color:#BFD3F0}
.bx.hub .go{background:rgba(255,255,255,.14)}.bx.hub .go svg{stroke:#fff}
.bx.hub .ring{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:auto}
.bx.hub .ring span{border-radius:6px;background:rgba(255,255,255,.1);padding:8px;font-size:11.5px;color:#D7E5FA;display:grid;gap:2px}
.bx.hub .ring span b{font:650 15px var(--display);color:#fff}
.bx.s2{grid-column:span 3}
.bx.s3{grid-column:span 2}
.up{color:var(--good)} .down{color:var(--bad)}

/* steps / method */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;counter-reset:s}
.flow::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:linear-gradient(90deg,var(--sky),var(--violet),var(--accent));border-radius:2px;opacity:.5}
.flow .s{position:relative;padding:0 22px 0 0;display:grid;gap:10px;align-content:start}
.flow .s .n{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:var(--sh1),inset 0 0 0 1px var(--line2);display:grid;place-items:center;font:600 14px var(--mono);color:var(--accent);position:relative}
.flow .s .when{font:500 12px var(--mono);color:var(--dim);letter-spacing:.02em}
.flow .s p{color:var(--muted);font-size:15px}
.loop{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.loop span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--pill);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--muted)}
.loop span b{color:var(--fg);font-weight:600}
.loop span+span::before{content:"→";color:var(--dim);margin:0 6px 0 -4px}
.loop span:last-child{background:var(--navy);color:#C9D9EC;box-shadow:none}.loop span:last-child b{color:#fff}

/* numbers on dark */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.14)}
.nums div{padding:28px 22px 0 0;display:grid;gap:8px}
.nums b{font:700 clamp(40px,5vw,60px)/1 var(--display);letter-spacing:-.03em;background:linear-gradient(120deg,#fff,#8CC8FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.nums span{color:#ADBDCC;font-size:15px}
.clients{margin-top:44px;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;color:#ADBDCC;font-size:14px}
.clients b{color:#fff;font:650 20px var(--display);letter-spacing:-.01em}

/* principles */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat3{border-radius:var(--r-l);padding:28px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:12px;align-content:start}
.feat3 .ic{width:44px;height:44px;border-radius:6px;display:grid;place-items:center;background:var(--ic)}
.feat3 .ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.feat3 p{color:var(--muted)}
.motto{margin-top:28px;font:600 clamp(18px,2vw,22px)/1.3 var(--display);letter-spacing:-.01em;color:var(--fg)}
.motto s{color:var(--dim);text-decoration-thickness:2px}

/* cards, generic */
.card{background:#fff;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:24px;display:grid;gap:10px;align-content:start;min-width:0}
.alt .card,.alt .feat3,.alt .bx:not(.hub){box-shadow:var(--sh1),inset 0 0 0 1px var(--line)}

/* cases */
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.case{border-radius:var(--r-l);background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;display:grid;grid-template-rows:auto 1fr;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;color:inherit}
@media(hover:hover){.case:hover{transform:translateY(-3px);box-shadow:var(--sh2),inset 0 0 0 1px var(--line2)}}
.case .cv{height:140px;position:relative;background:var(--cv,linear-gradient(135deg,#C9E3FF,#2F6BFF));overflow:hidden}
.case .cv::after{content:"";position:absolute;inset:18px 18px -20px 18px;border-radius:6px 12px 0 0;background:rgba(255,255,255,.82);box-shadow:var(--sh2)}
.case .cv i{position:absolute;z-index:1;left:32px;right:32px;height:6px;border-radius:6px;background:var(--glass2)}
.case .cv i:nth-child(1){top:36px;width:40%;background:var(--fg);opacity:.75}
.case .cv i:nth-child(2){top:54px;right:46%}
.case .cv i:nth-child(3){top:76px;height:40px;background:linear-gradient(90deg,var(--ice),var(--accent));opacity:.55;border-radius:5px}
.case .cb{padding:20px;display:grid;gap:10px;align-content:start}
.case h3{font-size:19px}
.case p{color:var(--muted);font-size:15px}
.meta{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--pill);font-size:12.5px;font-weight:600;background:var(--glass2);color:var(--muted)}
.chip.live{color:#0B7A57;background:rgba(18,168,119,.12)}
.chip.live::before,.chip.wip::before,.chip.pause::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.wip{color:#9A6200;background:rgba(245,165,36,.16)}
.chip.pause{color:var(--muted)}

/* pricing */
.plans{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:16px;align-items:stretch}
.plan-c{border-radius:var(--r-l);background:#fff;box-shadow:inset 0 0 0 1px var(--line);padding:28px;display:grid;gap:14px;align-content:start}
.plan-c .eyebrow{color:var(--dim)}
.plan-c.main{box-shadow:var(--sh3),inset 0 0 0 2px var(--accent);position:relative}
.plan-c.main .eyebrow{color:var(--accent)}
.plan-c .btn{justify-self:stretch}
.price{font:700 clamp(32px,3.6vw,42px)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price small{font:500 15px var(--body);color:var(--dim);letter-spacing:0}
ul.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ul.ticks li{padding-left:28px;position:relative;color:var(--muted);font-size:15px}
ul.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:rgba(47,107,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6BFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.guarantee{font-size:14px;color:var(--muted);padding:12px 14px;border-radius:6px;background:rgba(18,168,119,.08)}
.guarantee b{color:#0B7A57}
.plans-note{margin-top:22px;color:var(--muted);max-width:72ch}
.plans-note a{color:var(--accent);font-weight:600}
table.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
table.cmp th,table.cmp td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp th{font-weight:600;color:var(--dim);font-size:13px}
table.cmp td:first-child{color:var(--fg);font-weight:550}
table.cmp td{color:var(--muted)}
table.cmp .y{color:var(--good);font-weight:700}

/* calculator */
.calc{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;padding:28px;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh2),inset 0 0 0 1px var(--line)}
.calc-in{display:grid;gap:22px;align-content:center}
.calc-out{display:grid;gap:8px;align-content:start;padding:24px;border-radius:var(--r);background:linear-gradient(150deg,#0A2540,#1A4FB8 75%,#2F6BFF);color:#fff}
.calc-out .small{color:#BFD3F0}
.big-n{font:700 40px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.calc-out .big-n{font-size:clamp(44px,6vw,60px)}
.calc-out .vs{display:flex;justify-content:space-between;padding:12px 0;margin-top:6px;border-top:1px solid rgba(255,255,255,.2)}
.calc-out .btn{justify-self:start;margin-top:6px;background:#fff;color:var(--navy);box-shadow:none}
.sl{display:grid;gap:6px}
.sl label{display:flex;justify-content:space-between;font-size:15px;color:var(--muted)}
.sl label b{color:var(--fg);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent);min-height:32px}

/* resources */
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rc{border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line);display:grid;grid-template-rows:auto 1fr;transition:transform .25s,box-shadow .25s}
@media(hover:hover){.rc:hover{transform:translateY(-3px);box-shadow:var(--sh2),inset 0 0 0 1px var(--line2)}}
.rc .art{height:120px;background:var(--art);position:relative}
.rc .art span{position:absolute;left:18px;bottom:14px;font:600 12px var(--mono);color:#fff;letter-spacing:.04em;opacity:.9}
.rc .rb{padding:20px;display:grid;gap:8px;align-content:start}
.rc .rb p{color:var(--muted);font-size:15px}
.article{max-width:720px}
.article h2{font-size:clamp(24px,3vw,32px);margin:44px 0 14px}
.article p,.article li{color:#2A3F5A;font-size:17.5px;line-height:1.7}
.article p+p{margin-top:16px}
.article ul,.article ol{padding-left:22px;display:grid;gap:8px;margin:14px 0}
.article .callout{margin:24px 0;padding:18px 20px;border-radius:var(--r);background:var(--bg2);box-shadow:inset 3px 0 0 var(--accent)}
.gl{display:grid;gap:0}
.gl .t{display:grid;grid-template-columns:220px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.gl .t b{font:650 17px var(--display)}
.gl .t p{color:var(--muted)}

/* fit, faq */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fit ul{margin:0;padding-left:18px;display:grid;gap:10px;color:var(--muted)}
.fit li b{color:var(--fg);font-weight:600}
.faq{max-width:820px}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px;font-family:var(--display);letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:22px;height:22px;flex:none;border-radius:50%;background:var(--glass2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2540' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:10px;max-width:68ch}

/* final CTA */
.final{border-radius:8px;padding:56px 40px;background:linear-gradient(140deg,#0A2540 0%,#163E7A 50%,#2F6BFF 100%);color:#fff;display:grid;gap:18px;justify-items:start;position:relative;overflow:hidden}
.final h2{color:#fff;max-width:20ch}
.final p{color:#C9D9EC;max-width:52ch}
.final::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,#8CC8FF55,transparent 70%)}
.final .btn-p{background:#fff;color:var(--navy);box-shadow:none}

/* form */
.form{display:grid;gap:24px;max-width:640px}
.step{display:grid;gap:12px}
.step .lbl{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:44px;padding:0 18px;border-radius:var(--pill);background:#fff;box-shadow:inset 0 0 0 1px var(--line2);font-weight:500;transition:background .2s,box-shadow .2s,color .2s}
.chips button[aria-pressed="true"]{background:var(--accent);box-shadow:none;color:#fff}
.field{width:100%;min-height:50px;border-radius:6px;border:0;box-shadow:inset 0 0 0 1px var(--line2);background:#fff;color:var(--fg);padding:0 16px;font:inherit}
.field:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.contacts{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:14px;align-items:center}
.copybtn{border-radius:var(--pill);padding:8px 14px;box-shadow:inset 0 0 0 1px var(--line2);background:#fff;min-height:40px}
.thanks{padding:28px;border-radius:var(--r);background:rgba(18,168,119,.08);box-shadow:inset 0 0 0 1px rgba(18,168,119,.3)}
.formerr{color:var(--bad);font-size:14px;margin-top:-10px}

/* footer */
.ftr{background:var(--bg2);border-top:1px solid var(--line);padding-block:64px 32px;margin-top:0}
.ftr .cols{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:28px}
.ftr .about{display:grid;gap:14px;align-content:start}
.ftr .about p{color:var(--muted);font-size:14px;max-width:30ch}
.ftr h6{margin:0 0 12px;font:600 13px var(--body);color:var(--fg)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr ul a{color:var(--muted);font-size:14px;transition:color .15s}
.ftr ul a:hover{color:var(--accent)}
.ftr .base{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px;color:var(--dim);font-size:13px;align-items:center}
.ftr .base .sp{margin-left:auto;display:flex;gap:16px}
.ftr details{display:none}

/* sticky mobile CTA */
.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s}
.sticky.show{transform:none}
.sticky .btn{width:100%}

/* modal */
.modal{position:fixed;inset:0;z-index:80;background:rgba(10,37,64,.35);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.sheet{width:min(820px,100%);max-height:100%;overflow:auto;background:#fff;border-radius:var(--r-l);box-shadow:var(--sh3);padding:22px;display:grid;gap:18px}

/* reveal: content is visible at rest; JS adds .rv only for elements below the fold */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* case page head */
.cback{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;font-size:15px;min-height:44px}
.chead{display:grid;gap:14px;margin-top:8px}
.story{display:grid;gap:0}
.story .st{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.story .st:last-child{border:0}
.story .k{font:600 12px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--accent);padding-top:4px}
.story p{color:#2A3F5A;font-size:17px}

/* responsive */
@media(max-width:1060px){
  .nav,.hdr .signin,.hdr .right .btn-s{display:none}
  .burger{display:inline-flex}
  .hero .wrap{grid-template-columns:1fr}
  .stack{min-height:420px;max-width:560px;width:100%;margin-inline:auto}
  .ftr .cols{grid-template-columns:repeat(3,1fr)}
  .ftr .about{grid-column:1/-1}
}
@media(max-width:900px){
  .band{padding-block:72px}
  .bento-b{grid-template-columns:repeat(2,1fr)}
  .bx.hub,.bx.s2,.bx.s3{grid-column:span 2}
  .bx.hub{grid-row:auto}
  .bx.s3{grid-column:span 1}
  .flow{grid-template-columns:1fr 1fr;gap:28px 0}
  .flow::before{display:none}
  .nums{grid-template-columns:repeat(2,1fr)}
  .three,.fit,.plans,.res{grid-template-columns:1fr}
  .plan-c.main{order:-1}
  .calc{grid-template-columns:1fr;padding:20px}
  .sticky{display:block}
  .gl .t{grid-template-columns:1fr;gap:4px}
}
@media(max-width:640px){
  .hero{padding-block:100px 64px}
  .hdr .right .btn-p{display:none}
  .stack{min-height:400px}
  .w-hub{right:0}
  .w-hub .depts{grid-template-columns:repeat(2,1fr)}
  .w-alert{width:72%;top:62%}
  .w-phone{display:none}
  .bx.s3{grid-column:span 2}
  .bx.hub .ring{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:1fr}
  .final{padding:36px 22px;border-radius:8px}
  .story .st{grid-template-columns:1fr;gap:4px}
  .logos .wrap{justify-content:center}
  .ftr .cols{grid-template-columns:1fr 1fr}
  .ftr .base .sp{margin-left:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}
.about-g{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.photo-c{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh3);aspect-ratio:4/5;max-width:100%}
.photo-c img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block}
@media(max-width:900px){.about-g{grid-template-columns:1fr}.photo-c{order:-1;max-width:420px}}

/* Stripe-like vertical guide lines along the content edges */
.guides{position:fixed;inset:0;pointer-events:none;z-index:0}
.guides::before,.guides::after{content:"";position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(10,37,64,.07)}
.guides::before{left:max(20px,calc(50% - var(--max)/2 + 20px))}
.guides::after{right:max(20px,calc(50% - var(--max)/2 + 20px))}
main,.ftr{position:relative;z-index:1}
.band:not(.alt):not(.dark),.logos,.page-head{background:transparent}
@media(max-width:900px){.guides{display:none}}

/* agents */
.agents{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ag-card{border-radius:var(--r-l);background:#fff;box-shadow:inset 0 0 0 1px var(--line);padding:24px;display:grid;gap:16px;align-content:start;overflow:hidden}
.ag-card p.muted{font-size:15px}
.chat{border-radius:6px;background:var(--bg2);padding:14px;display:grid;gap:10px;font-size:14px}
.chat .msg{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.chat .av{width:28px;height:28px;border-radius:5px;display:grid;place-items:center;font:700 11px var(--display);color:#fff;background:var(--navy)}
.chat .av.ai{background:linear-gradient(135deg,var(--violet),var(--accent))}
.chat .bub{background:#fff;border-radius:6px;padding:10px 12px;box-shadow:var(--sh1);color:var(--muted)}
.chat .bub b{color:var(--fg)}
.chat .mention{color:var(--accent);font-weight:600;background:rgba(47,107,255,.08);border-radius:4px;padding:0 4px}
.props{display:flex;gap:10px;flex-wrap:wrap}
.props .pc{flex:1 1 140px;border-radius:6px;background:var(--bg2);padding:12px;display:grid;gap:6px;font-size:13px;color:var(--muted)}
.props .pc b{color:var(--fg);font-size:14px;display:flex;align-items:center;gap:6px}
.props .pc b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--accent))}
@media(max-width:900px){.agents{grid-template-columns:1fr}}

/* book a call: modal on desktop, bottom drawer on phones */
.bookm{position:fixed;inset:0;z-index:90;background:rgba(10,37,64,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:fade .2s}
@keyframes fade{from{opacity:0}}
.bsheet{width:min(640px,100%);max-height:100%;overflow:auto;background:#fff;border-radius:8px;box-shadow:var(--sh3);padding:28px;display:grid;gap:20px;animation:pop .25s cubic-bezier(.2,.8,.2,1)}
.bhead{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.bhead h2{font-size:clamp(22px,2.6vw,28px);margin-top:6px}
.bx-close{width:40px;height:40px;flex:none;border-radius:4px;font-size:24px;line-height:1;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.bx-close:hover{color:var(--fg)}
@media(max-width:640px){
  .bookm{place-items:end stretch;padding:0}
  .bsheet{width:100%;max-height:92vh;border-radius:12px 12px 0 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom,0px));animation:up .3s cubic-bezier(.2,.8,.2,1)}
  .bsheet::before{content:"";justify-self:center;width:40px;height:4px;border-radius:4px;background:var(--line2)}
  @keyframes up{from{transform:translateY(100%)}}
}

/* clients marquee */
.marq{display:flex;overflow:hidden;margin-top:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mtrack{display:flex;gap:56px;padding-right:56px;flex:none;animation:marq 38s linear infinite}
.marq:hover .mtrack{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}
.logos .wrap{justify-content:center}
.ftr .cols{grid-template-columns:1.3fr repeat(6,1fr)}
@media(max-width:1060px){.ftr .cols{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.ftr .cols{grid-template-columns:1fr 1fr}}

/* case pages */
.cback{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;font-size:15px;min-height:44px}
.chead{display:grid;gap:14px;margin-top:8px}
.chead .meta{display:flex;gap:8px;flex-wrap:wrap}
.ctabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:28px calc(-1*max(16px,env(safe-area-inset-left,0px))) 0;padding:4px max(16px,env(safe-area-inset-left,0px));position:sticky;top:calc(65px + env(safe-area-inset-top,0px));z-index:30;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ctabs::-webkit-scrollbar{display:none}
.ctabs button{flex:none;min-height:40px;padding:0 16px;border-radius:var(--pill);border:1px solid var(--line);background:var(--glass);color:var(--muted);font-weight:600;font-size:14px}
.ctabs button[aria-pressed="true"]{background:var(--fg);color:#fff;border-color:var(--fg)}
.cpanel{display:grid;gap:16px;margin-top:24px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.big-n{font:800 40px/1 var(--display);font-variant-numeric:tabular-nums}
.kv{display:grid;gap:6px}
.kv .r{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.kv .r:last-child{border:0}
.kv .r.tot{font-weight:700}
.tl{display:flex;gap:0;overflow-x:auto;padding-bottom:4px}
.tl button{flex:1 0 110px;text-align:left;padding:12px 10px 12px 0;border-top:2px solid var(--line);color:var(--muted);font-size:13px;position:relative}
.tl button::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--dim)}
.tl button b{display:block;color:var(--fg);font:700 16px var(--display)}
.tl button[aria-pressed="true"]{border-top-color:var(--accent-hi);color:var(--fg)}
.tl button[aria-pressed="true"]::before{background:var(--accent-hi);border-color:var(--accent-hi)}
.tl button.pz::before{border-color:var(--warn)}
.out{padding:16px;border-radius:var(--r);background:rgba(47,107,255,.1);border:1px solid rgba(47,107,255,.25)}
.sl{display:grid;gap:6px}
.sl label{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.sl label b{color:var(--fg);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent-hi);min-height:32px}
.num{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.num input,.num select{min-height:44px;border-radius:6px;border:1px solid var(--line);background:var(--glass);color:var(--fg);padding:0 12px;font:inherit;width:100%}
.circles{position:relative;aspect-ratio:1;max-width:340px;width:100%;margin:0 auto}
.circles button{position:absolute;border-radius:50%;left:50%;bottom:0;transform:translateX(-50%);border:1px solid rgba(47,107,255,.45);display:flex;justify-content:center;padding-top:10px;font-size:12px;font-weight:600;color:var(--fg)}
.circles button[aria-pressed="true"]{border-color:var(--fg);box-shadow:0 0 0 2px var(--accent-hi)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{padding:6px 12px;border-radius:var(--pill);background:var(--glass2);font-size:13px;color:var(--muted)}
.nodes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.nodes button,.bento button,.steps button{text-align:left;padding:14px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);display:grid;gap:4px;align-content:start;min-width:0;transition:border-color .2s,background .2s}
.nodes button[aria-pressed="true"],.bento button[aria-pressed="true"],.steps button[aria-pressed="true"]{border-color:var(--accent-hi);background:rgba(47,107,255,.12)}
.nodes button.buyer{color:#fff;background:linear-gradient(135deg,#4FA8FF,#1A4FB8 55%,#0B1F3A);border-color:transparent}
.small{font-size:13px;color:var(--muted)}
.phone{color:#F5F5F7;--glass2:rgba(255,255,255,.09);--line:rgba(255,255,255,.14);width:240px;max-width:100%;aspect-ratio:9/18;border-radius:32px;border:1px solid var(--line);background:#0B0F1A;padding:14px;display:grid;align-content:start;gap:10px;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.phone .bar{height:4px;width:60px;border-radius:4px;background:var(--line);justify-self:center}
.phone .opt{padding:10px 12px;border-radius:12px;background:var(--glass2);font-size:13px;display:flex;justify-content:space-between}
.phone .opt.on{background:var(--accent)}
.phone .glow{height:180px;border-radius:16px;background:radial-gradient(circle at 50% 40%,#8FD0FF,#2F6BFF 45%,#140A3A 80%);display:grid;place-items:center;font:700 15px var(--display)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bento button.w2{grid-column:span 2}
.cat{display:inline-flex;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.cat.care{color:var(--good)} .cat.safe{color:var(--warn)} .cat.life{color:var(--accent-hi)}
.plan{display:grid;gap:0}
.plan .p{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.plan .p b{font-variant-numeric:tabular-nums}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;color:var(--muted);font-weight:600;padding:8px;border-bottom:1px solid var(--line)}
table.t td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tw{overflow-x:auto}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.steps .n{font:800 22px var(--display);color:var(--accent-hi)}
.land{color:#fff;border-radius:5px;padding:22px;display:grid;gap:12px;min-height:260px;align-content:start;border:1px solid var(--line)}
.land.a{background:linear-gradient(160deg,#16305F,#0B111C)}
.land.b{background:linear-gradient(160deg,#3A2A0B,#0B111C)}
.land .q{font:800 24px/1.15 var(--display)}
.warn{color:var(--warn)}
@media(max-width:820px){
  .g2,.g3{grid-template-columns:1fr}
  .nodes,.steps{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:1fr 1fr}
  .plan .p{grid-template-columns:96px 1fr}
}


.seg{display:inline-flex;flex-wrap:wrap;background:var(--glass2);border-radius:var(--pill);padding:3px}
.seg button{min-height:36px;padding:0 14px;border-radius:var(--pill);font-size:14px;color:var(--muted);font-weight:600}
.seg button[aria-pressed="true"]{background:#fff;color:var(--fg);box-shadow:var(--sh1)}
.why{display:grid;gap:8px;padding:14px;border-radius:var(--r);background:rgba(245,165,36,.1)}
.why b{color:var(--warn)}
.note{font-size:13px;color:var(--dim)}
.land .muted,.land .small,.nodes button.buyer .small,.nodes button.buyer .muted{color:#D6E2F3}
.phone .small,.phone .muted{color:#AFC0D6}
.cpanel .card,.cpanel .out{box-shadow:inset 0 0 0 1px var(--line)}
.out{background:rgba(47,107,255,.06)}

/* case story pages */
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:28px;border-top:1px solid var(--line)}
.cstats div{padding:18px 16px 4px 0;display:grid;gap:4px}
.cstats b{font:500 30px/1.05 var(--display);letter-spacing:-.02em;color:var(--fg)}
.cstats span{font-size:14px;color:var(--muted)}
.chaps{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chap{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:24px;border-radius:var(--r-l);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.chap .cn{font:500 15px var(--mono,ui-monospace,monospace);color:var(--accent);padding-top:2px}
.chap h3{font-size:20px;margin:6px 0 8px}
.chap p{color:var(--muted);font-size:15px}
.chap .ticks{margin-top:12px}
.bframe{border-radius:var(--r-l);background:var(--bg2,#F6F9FC);box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(10,37,64,.25);overflow:clip}
.bchrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#0A2540;color:#C9D6E8;font-size:13px}
.bchrome i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.bchrome span{margin-left:8px;font-weight:600;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bchrome em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,.12);flex:none}
.bframe #casePage{padding:0 20px 24px}
.bframe .ctabs{margin:0 -20px;padding:10px 20px;top:calc(64px + env(safe-area-inset-top,0px));background:rgba(246,249,252,.9);border-bottom:1px solid var(--line)}
.bframe .cpanel .card{background:#fff}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.facts div{padding:16px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:6px;align-content:start}
.facts span{font-size:13px;color:var(--muted)}
.facts b{font-weight:600;font-size:15px}
.card.kp{display:grid;gap:4px}
.hb{display:grid;grid-template-columns:110px 1fr 48px;gap:10px;align-items:center;font-size:14px;padding:5px 0}
.hb i{height:10px;border-radius:3px;background:var(--glass2,#EEF3F9);overflow:hidden;display:block}
.hb em{display:block;height:100%;border-radius:3px}
.hb b{text-align:right;font-variant-numeric:tabular-nums}
.flowx{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;counter-reset:f}
.flowx>*{position:relative;text-align:left;padding:14px;border-radius:var(--r);background:#fff;border:1px solid var(--line);display:grid;gap:4px;align-content:start;min-width:0}
.flowx>*:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:50%;transform:translate(50%,-50%);color:var(--dim);font-size:14px;z-index:1}
.flowx .n{font:600 13px var(--mono,ui-monospace,monospace);color:var(--accent)}
.flowx button[aria-pressed="true"]{border-color:var(--accent);background:rgba(47,107,255,.08)}
.funnel{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.funnel button{text-align:left;padding:12px 14px;border-radius:var(--r);background:#fff;border:1px solid var(--line);display:grid;gap:2px}
.funnel button b{font:600 26px/1 var(--display);font-variant-numeric:tabular-nums}
.funnel button[aria-pressed="true"]{border-color:var(--accent);background:rgba(47,107,255,.08)}
.plist{display:grid;gap:4px;align-content:start}
.plist button{display:grid;grid-template-columns:1fr auto 44px;gap:10px;align-items:center;text-align:left;padding:10px 12px;border-radius:var(--r-s);font-size:14px}
.plist button[aria-pressed="true"]{background:rgba(47,107,255,.08)}
.plist .small{text-align:right}
.plist .tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;background:#EEF3F9;color:var(--muted);white-space:nowrap}
.plist .tag.t-live{background:#E3F6EE;color:#0B8F63}.plist .tag.t-paused{background:#FDE8E8;color:#D93A3F}.plist .tag.t-kyc,.plist .tag.t-contract{background:#FFF3DF;color:#B86E00}.plist .tag.t-negotiation{background:#E6EEFF;color:#2F6BFF}
.chk{display:grid;gap:2px}
.chk button{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;text-align:left;padding:10px 6px;border-bottom:1px solid var(--line)}
.chk button:last-child{border:0}
.chk i{width:20px;height:20px;border-radius:4px;border:1.5px solid var(--dim)}
.chk button.on i{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.chk button.on b{text-decoration:line-through;color:var(--muted)}
.chk span{display:grid}
.chk .pr{font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;background:#EEF3F9;color:var(--muted)}
.chk .pr.P1{background:#FDE8E8;color:#D93A3F}
.pets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pets button{text-align:left;padding:10px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);display:grid;gap:4px}
.pets .ph{height:110px;border-radius:6px;display:grid;place-items:center;font-size:44px}
.pets button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(47,107,255,.2)}
@media(max-width:820px){
  .cstats{grid-template-columns:1fr 1fr}
  .chaps,.facts{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .flowx{grid-auto-flow:row;grid-auto-columns:auto}
  .flowx>*:not(:last-child)::after{right:50%;top:auto;bottom:-10px;transform:translate(50%,50%) rotate(90deg)}
  .funnel{grid-template-columns:repeat(3,1fr)}
  .pets{grid-template-columns:1fr 1fr}
  .nodes[style]{grid-template-columns:1fr 1fr!important}
  .bento[style]{grid-template-columns:1fr 1fr!important}
  .bframe #casePage{padding:0 14px 18px}.bframe .ctabs{margin:0 -14px;padding:10px 14px}
}
@media(max-width:820px){.cpanel .g3:has(>.kp){grid-template-columns:repeat(3,1fr);gap:8px}.cpanel .kp{padding:12px}.cpanel .kp .big-n{font-size:24px}.cpanel .kp .small{font-size:12px}}