/* Veylen Studios — v2, the redesign (2026-09-23)

   Light, editorial, glass. One accent — Veylen blue, the same blue the
   receptionist widget uses — and one dark beat per page at most: the page
   inverts for the receptionist, because that is the product people can try.

   Type:   Instrument Sans (display + UI, variable wght/wdth)
           Instrument Serif italic (one accent phrase, twice a page at most)
           Geist Mono (labels, prices, metadata)
   Motion: GSAP + ScrollTrigger + SplitText, Lenis on desktop, a Three.js hero.
           Nothing here depends on it: every animated element is visible
           without JS, and the hidden starting states only apply under
           html.anim, which the <head> sets when motion is allowed and removes
           again if the scripts have not arrived within ~3 s.

   The functional pieces from v1 keep their class names — the 3D deck
   (.stage3d/.c3d), the quote builder (.tier/.q*), the demo phone (.vp-*),
   the SMS preview (.sms-*), the owner card (.dl-*), the before/after (.ba) —
   so deck.js, quote.js and demo-phone.js run unchanged. */

@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  --bg:#FFFFFF; --bg-2:#F4F5F7; --bg-3:#EBEDF1;
  --ink:#0B0D12; --ink-2:#454B54; --ink-3:#686E77; --ink-4:#A1A6AE;
  --line:rgba(11,13,18,.10); --line-2:rgba(11,13,18,.06);
  --accent:#1D6FF2; --accent-ink:#1459CC; --accent-2:#79AEFF;
  --accent-soft:rgba(29,111,242,.08); --accent-glow:rgba(29,111,242,.32);
  --live:#16A34A; --live-2:#22C55E; --warn:#F59E0B; --alert:#EF4444;
  --night:#07080B; --night-2:#0E1015; --night-3:#161920;
  --night-line:rgba(255,255,255,.09); --night-ink:#F2F3F5; --night-ink-2:#A3A9B3; --night-ink-3:#737A85;
  --f-sans:"Instrument Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-serif:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* v1 components read these three names */
  --f-body:var(--f-sans); --f-display:var(--f-sans); --blue:var(--accent);
  --wrap:1320px; --gut:clamp(1.1rem,4.2vw,2.75rem);
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --sh-1:0 1px 2px rgba(11,13,18,.06),0 1px 1px rgba(11,13,18,.04);
  --sh-2:0 14px 34px -14px rgba(11,13,18,.22),0 2px 6px -2px rgba(11,13,18,.06);
  --sh-3:0 48px 90px -36px rgba(11,13,18,.38),0 14px 28px -14px rgba(11,13,18,.14);
  --fs-hero:clamp(2.6rem,.9rem + 4.9vw,6rem);
  --fs-d1:clamp(2.35rem,1.15rem + 4vw,4.9rem);
  --fs-d2:clamp(1.9rem,1.2rem + 2.5vw,3.4rem);
  --fs-h3:clamp(1.28rem,1.05rem + .8vw,1.7rem);
  --fs-lede:clamp(1.04rem,.97rem + .32vw,1.24rem);
  --sec:clamp(5rem,4rem + 6vw,10rem);
}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* v1 phone fix, kept: kills double-tap zoom, pinch still works */
html,body{touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--f-sans);
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
     overflow-x:clip}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p{margin:0}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;min-width:0;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:10px;transition:top .2s}
.skip:focus{top:12px}
/* copy deterrent, as on v1: friction only, the files stay fetchable */
img,video{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
.c3d img,.xw .shot img,.marq img,.wl-float img,.svc-media img,.hero-scene img{-webkit-user-select:none;user-select:none}

/* Lenis (desktop smooth scroll) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* cross-document page transitions, where the browser has them */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .32s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .55s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
.hd{view-transition-name:site-header}

/* ---------------- type ---------------- */
.kicker{display:inline-flex;align-items:center;gap:.65rem;margin:0;font:500 .72rem/1.2 var(--f-mono);
        letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.kicker::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55;flex:none}
.kicker--live::before,.kicker--dot::before{width:7px;height:7px;border-radius:50%;background:var(--live-2);opacity:1;animation:blip 2.4s infinite}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
h1,h2,h3,h4,.d-hero,.d1,.d2,.h3{margin:0;font-family:var(--f-sans);font-weight:560;letter-spacing:-.035em;line-height:1;text-wrap:balance}
.d-hero{font-size:var(--fs-hero);line-height:.96;letter-spacing:-.045em;font-weight:550}
.d1{font-size:var(--fs-d1);line-height:.98;letter-spacing:-.042em;font-weight:550}
.d2{font-size:var(--fs-d2);line-height:1.02;letter-spacing:-.035em}
.h3{font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.022em}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.012em;font-size:1.07em;line-height:.9}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--ink-2);max-width:46ch;text-wrap:pretty}
.lede b{color:var(--ink);font-weight:600}
.fine{font-size:.86rem;line-height:1.55;color:var(--ink-3);text-wrap:pretty}
.ul{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color .2s,color .2s}
.ul:hover{color:var(--accent);text-decoration-color:currentColor}
.sec-head{display:grid;gap:1.25rem;margin-bottom:clamp(2.5rem,5vw,4.5rem);max-width:980px}
.sec-head .lede{margin-top:.25rem}
.sec-head--center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head--center .lede{margin-inline:auto}
.sec-head--row{max-width:none;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1.5rem 3rem}
.sec-head--row > div{display:grid;gap:1.25rem;max-width:900px}
@media (max-width:760px){.sec-head--row{grid-template-columns:1fr}}

/* ---------------- buttons ----------------
   The fill sweeps in from wherever the pointer entered (--mx/--my, set by
   site.js); the arrow leaves right and a twin comes in from the left. */
.btn{--bh:52px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;
     height:var(--bh);padding:0 1.55rem;border-radius:999px;border:1px solid transparent;cursor:pointer;
     font:500 .98rem/1 var(--f-sans);letter-spacing:-.01em;white-space:nowrap;-webkit-tap-highlight-color:transparent;
     transition:color .35s var(--ease),border-color .35s,background-color .35s,box-shadow .5s var(--ease),transform .35s var(--ease)}
.btn::before{content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,50%);width:0;aspect-ratio:1;border-radius:50%;
             background:var(--fill,var(--accent));transform:translate(-50%,-50%);transition:width .7s var(--ease)}
.btn:hover::before{width:260%}
.btn:active{transform:scale(.975)}
.btn-t{position:relative;display:inline-block}
.btn .ico{position:relative;flex:none;width:28px;height:28px;margin-right:-.8rem;border-radius:50%;display:grid;place-items:center;overflow:hidden;
          background:rgba(255,255,255,.14);transition:background-color .35s}
.btn .ico svg{grid-area:1/1;width:14px;height:14px;transition:transform .6s var(--ease)}
.btn .ico svg + svg{transform:translateX(-170%)}
.btn:hover .ico svg:first-child{transform:translateX(170%)}
.btn:hover .ico svg + svg{transform:none}
.btn--primary{background:var(--ink);color:#fff;box-shadow:0 12px 26px -14px rgba(11,13,18,.55)}
.btn--primary:hover{box-shadow:0 18px 36px -14px var(--accent-glow)}
.btn--glass{background:rgba(255,255,255,.66);color:var(--ink);border-color:var(--line);--fill:var(--ink);
            -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)}
.btn--glass:hover{color:#fff;border-color:var(--ink)}
.btn--glass .ico{background:var(--ink);color:#fff}
.btn--glass:hover .ico{background:rgba(255,255,255,.16)}
.btn--light{background:#fff;color:var(--ink);--fill:var(--accent)}
.btn--light:hover{color:#fff}
.btn--light .ico{background:var(--ink);color:#fff}
.btn--light:hover .ico{background:rgba(255,255,255,.18)}
.btn--dark-line{background:transparent;color:var(--night-ink);border-color:rgba(255,255,255,.18);--fill:#fff}
.btn--dark-line:hover{color:var(--ink);border-color:#fff}
.btn--accent{background:var(--accent);color:#fff;--fill:var(--ink);box-shadow:0 14px 30px -14px var(--accent-glow)}
.btn--sm{--bh:40px;padding:0 1.05rem;font-size:.9rem;gap:.55rem}
.btn--lg{--bh:58px;padding:0 1.8rem;font-size:1.03rem}
.btn--lg .ico{width:32px;height:32px}
.btn[data-magnetic]{will-change:transform}
/* v1 button names, still emitted by deck.js and quote.js */
.btn-blue{background:var(--ink);color:#fff;box-shadow:0 12px 26px -14px rgba(11,13,18,.55)}
.btn-blue:hover{box-shadow:0 18px 36px -14px var(--accent-glow)}
.btn-ghost,.btn-line{background:#fff;color:var(--ink);border-color:var(--line);--fill:var(--ink)}
.btn-ghost:hover,.btn-line:hover{color:#fff;border-color:var(--ink)}
.btn-blue svg,.btn-ghost svg,.btn-line svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.btn-blue:hover svg{transform:translateX(3px)}

/* a small pill link used inside text blocks */
.chip{display:inline-flex;align-items:center;gap:.5rem;height:34px;padding:0 .9rem;border-radius:999px;border:1px solid var(--line);
      background:#fff;font:500 .78rem/1 var(--f-mono);letter-spacing:.02em;color:var(--ink);white-space:nowrap;
      transition:border-color .25s,background-color .25s,color .25s,gap .35s var(--ease)}
.chip svg{width:13px;height:13px}
.chip:hover{border-color:var(--ink);gap:.75rem}

/* ---------------- header ----------------
   Transparent over the hero; a glass pill once the page moves; hides on the
   way down and comes back on the way up; turns dark over dark sections. */
.hd{position:fixed;left:0;right:0;top:0;z-index:80;padding:12px var(--gut) 0;pointer-events:none;
    transition:transform .7s var(--ease)}
.hd[data-hidden="true"]{transform:translateY(calc(-100% - 16px))}
.hd-in{pointer-events:auto;position:relative;display:flex;align-items:center;gap:.75rem;height:62px;margin:0 auto;
       max-width:calc(var(--wrap) - 2 * var(--gut) + 28px);padding:0 10px 0 16px;border-radius:999px;border:1px solid transparent;
       transition:max-width .8s var(--ease),background-color .45s,border-color .45s,box-shadow .45s,-webkit-backdrop-filter .45s,backdrop-filter .45s}
.hd[data-scrolled="true"] .hd-in{max-width:880px;background:rgba(255,255,255,.72);border-color:rgba(11,13,18,.07);
       box-shadow:0 14px 36px -20px rgba(11,13,18,.38);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.hd[data-theme="dark"][data-scrolled="true"] .hd-in{background:rgba(16,18,24,.62);border-color:rgba(255,255,255,.08);box-shadow:0 14px 36px -20px rgba(0,0,0,.6)}
.hd[data-theme="dark"]{color:var(--night-ink)}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-size:1.06rem;font-weight:600;letter-spacing:-.025em;flex:none}
.brand-v{width:24px;height:24px;fill:currentColor;transition:transform .8s var(--ease)}
.brand:hover .brand-v{transform:rotateY(180deg)}
.brand-t span{color:var(--ink-3);font-weight:500;transition:color .3s}
.hd[data-theme="dark"] .brand-t span{color:var(--night-ink-3)}
.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav a{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 .85rem;border-radius:999px;font-size:.94rem;font-weight:500;
       color:var(--ink-2);transition:color .25s,background-color .25s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.hd[data-theme="dark"] .nav a{color:var(--night-ink-2)}
.hd[data-theme="dark"] .nav a:hover,.hd[data-theme="dark"] .nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent)}
/* the text roll: site.js doubles the label, hover swaps them */
.roll{position:relative;display:inline-block;overflow:hidden;height:1.3em;line-height:1.3em;vertical-align:top}
.roll > span{display:block;transition:transform .55s var(--ease)}
.roll > span + span{position:absolute;left:0;top:0;transform:translateY(105%)}
a:hover > .roll > span:first-child{transform:translateY(-105%)}
a:hover > .roll > span + span{transform:none}
.hd-cta{margin-left:.4rem}
.hd[data-theme="dark"] .hd-cta{background:#fff;color:var(--ink);--fill:var(--accent)}
.hd[data-theme="dark"] .hd-cta:hover{color:#fff}
.burger{display:none;position:relative;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.7);
        -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;padding:0;margin-left:.2rem;flex:none}
.burger span{position:absolute;left:13px;right:13px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
.hd[data-theme="dark"] .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .hd-cta{margin-left:auto}
  .hd[data-scrolled="true"] .hd-in{max-width:100%}
}
@media (max-width:420px){.brand-t span{display:none}.hd-cta{padding:0 .9rem}}

/* the phone menu: a circle opens from the burger, links rise in */
.menu{position:fixed;inset:0;z-index:79;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;
      padding:110px var(--gut) calc(28px + env(safe-area-inset-bottom));
      clip-path:circle(0 at calc(100% - var(--gut) - 32px) 44px);transition:clip-path .8s var(--ease-io);visibility:hidden}
.menu[data-open="true"]{clip-path:circle(150% at calc(100% - var(--gut) - 32px) 44px);visibility:visible}
.menu[hidden]{display:flex}
.menu-nav{display:grid}
.menu-nav a{display:flex;align-items:baseline;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line-2);
            font-size:clamp(2.3rem,11vw,3.4rem);font-weight:550;letter-spacing:-.045em;line-height:1.05;
            opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.menu-nav a i{font:500 .72rem var(--f-mono);letter-spacing:.1em;color:var(--ink-3);font-style:normal;transform:translateY(-.9em)}
.menu[data-open="true"] .menu-nav a{opacity:1;transform:none}
.menu[data-open="true"] .menu-nav a:nth-child(1){transition-delay:.18s}
.menu[data-open="true"] .menu-nav a:nth-child(2){transition-delay:.23s}
.menu[data-open="true"] .menu-nav a:nth-child(3){transition-delay:.28s}
.menu[data-open="true"] .menu-nav a:nth-child(4){transition-delay:.33s}
.menu-foot{display:grid;gap:1rem;opacity:0;transition:opacity .5s .4s}
.menu[data-open="true"] .menu-foot{opacity:1}
.menu-foot .btn{width:100%}
.menu-foot p{font-size:.86rem;color:var(--ink-3)}

/* ================= HOME ================= */

/* ---------------- 1. hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;
      padding:clamp(7rem,15vh,9rem) 0 clamp(1.6rem,4vh,2.6rem);
      background:radial-gradient(95% 80% at 76% 44%,#FFFFFF 0%,#F3F5F8 48%,#E7EBF0 100%)}
.hero-scene{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-scene picture{display:contents}
.hero-poster,.hero-gl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hero-gl{opacity:0;transition:opacity 1.4s var(--ease)}
.hero-gl.on{opacity:1}
/* keeps the copy side clean whatever sits behind it */
.hero-fade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(246,247,249,.97) 0,rgba(246,247,249,.9) 8%,rgba(246,247,249,0) 22%,rgba(246,247,249,0) 72%,rgba(246,247,249,.9) 90%,rgba(246,247,249,.97) 100%),
             linear-gradient(90deg,rgba(246,247,249,.94) 0%,rgba(246,247,249,.6) 38%,rgba(246,247,249,0) 58%)}
.hero-in{position:relative}
.hero-copy{max-width:min(900px,66%)}
.hero-h{margin-top:1.4rem;max-width:10.6em}
.hero-h .serif{white-space:nowrap}
.hero-lede{margin-top:1.7rem;max-width:44ch}
.hero-acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.3rem}
.hero-own{display:flex;align-items:center;gap:.55rem;margin-top:1.6rem;font-size:.92rem;color:var(--ink-2)}
.hero-own svg{width:16px;height:16px;color:var(--live);flex:none}
.hero-own b{color:var(--ink);font-weight:600}
.hero-foot{position:relative;display:flex;align-items:center;gap:1rem;margin-top:clamp(2.5rem,7vh,4.5rem)}
.hero-line{position:relative;flex:1;height:1px;background:var(--line);overflow:hidden}
.hero-line i{position:absolute;inset:0;background:var(--ink);transform-origin:left;animation:line-run 2.8s var(--ease-io) infinite}
@keyframes line-run{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
.hero-foot-r::before{display:none}
/* narrow screens: the scene is a band across the top, the copy sits under it on clean ground */
@media (max-width:1100px){
  .hero{--scene-h:min(50svh,480px);justify-content:flex-start;padding-top:calc(var(--scene-h) * .9);background:#F6F7F9}
  .hero-scene{bottom:auto;height:var(--scene-h)}
  .hero-copy{max-width:720px}
  .hero-fade{background:linear-gradient(180deg,rgba(246,247,249,.92) 0%,rgba(246,247,249,0) 18%,rgba(246,247,249,0) 64%,#F6F7F9 100%)}
  .hero-poster,.hero-gl{object-position:50% 50%}
  .hero-foot{margin-top:auto;padding-top:2.5rem}
}
@media (max-width:760px){
  .hero{--scene-h:min(46svh,400px);padding-top:calc(var(--scene-h) * .92);padding-bottom:2rem}
  .hero-h{margin-top:1rem}
  .hero-lede{margin-top:1.1rem;font-size:1.02rem}
  .hero-acts{margin-top:1.5rem}
  .hero-acts .btn{flex:1 1 100%}
  .hero-own{font-size:.86rem;align-items:flex-start}
  .hero-own svg{margin-top:.2rem}
  .hero-foot{display:none}
}

/* ---------------- 2. proof ---------------- */
.proof{position:relative;padding:var(--sec) 0 clamp(3rem,6vw,5rem);background:var(--bg)}
.proof-head{display:grid;gap:1.25rem;max-width:880px}
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(3rem,6vw,5.5rem)}
.stat{position:relative;padding-top:1.4rem;border-top:1px solid var(--line)}
.stat::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:1px;background:var(--ink)}
.stat b{display:flex;align-items:flex-start;font-size:clamp(3.6rem,2rem + 6vw,8rem);font-weight:500;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}
.stat b sup{font-size:.42em;letter-spacing:-.02em;margin:.12em 0 0 .06em;color:var(--accent);top:0;line-height:1}
.stat b i{font-family:var(--f-serif);font-weight:400;font-size:.62em;letter-spacing:-.01em;align-self:center;padding:0 .08em;color:var(--ink-3)}
.stat > span{display:block;margin-top:.9rem;font:500 .74rem/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.proof-note{grid-column:1 / -1;max-width:60ch}
@media (max-width:760px){
  .proof-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){grid-column:1 / -1}
}
/* the platform row */
.marq{position:relative;margin-top:clamp(3.5rem,7vw,6rem);overflow:hidden;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-track{display:flex;width:max-content;will-change:transform}
.marq-item{flex:none;display:flex;align-items:center;justify-content:center;height:84px;width:178px;margin-right:14px;border-radius:20px;
           background:var(--bg-2);border:1px solid var(--line-2);position:relative;overflow:hidden;transition:background-color .35s,border-color .35s}
.marq-item img{position:relative;height:34px;width:auto;max-width:120px;filter:grayscale(1) contrast(1.05) opacity(.62);transition:filter .45s var(--ease),transform .6s var(--ease)}
.marq-item .wash{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.marq-item:hover{border-color:transparent}
.marq-item:hover .wash{opacity:.55}
.marq-item:hover img{filter:none;transform:scale(1.06)}
.marq-cap{margin-top:1.2rem;text-align:center;font-size:.8rem;color:var(--ink-3)}
html:not(.anim) .marq-track{animation:marq-css 63s linear infinite}
@keyframes marq-css{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq{overflow-x:auto}.marq-track{animation:none!important}}

/* ---------------- 3. the story (pinned) ---------------- */
.story{position:relative;padding-top:var(--sec);background:var(--bg-2)}
.story-head{display:grid;gap:1.25rem;max-width:1000px}
.story-track{position:relative;height:420vh;margin-top:clamp(1rem,3vw,2rem)}
.story-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.story-grid{display:grid;grid-template-columns:minmax(0,540px) auto;justify-content:center;gap:clamp(3rem,11vw,11rem);align-items:center}
.story-steps{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;max-width:520px}
.step{position:relative;padding:1.1rem 0 1.1rem 1.6rem;border-left:1px solid var(--line);opacity:.34;transition:opacity .5s var(--ease)}
.step::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)}
.step.is-on{opacity:1}
.step.is-on::before{transform:scaleY(1)}
.step-n{display:block;font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.7rem}
.step.is-on .step-n{color:var(--accent)}
.step .h3{font-size:clamp(1.35rem,1rem + 1.2vw,2.05rem)}
.step > p{overflow:hidden;max-height:0;opacity:0;margin-top:0;color:var(--ink-2);font-size:1.02rem;line-height:1.55;max-width:42ch;
           transition:max-height .7s var(--ease),opacity .5s var(--ease),margin-top .7s var(--ease)}
.step.is-on > p{max-height:9em;opacity:1;margin-top:.75rem}
.step > .chip{margin-top:0;max-height:0;opacity:0;overflow:hidden;border-width:0;
              transition:max-height .7s var(--ease),opacity .5s var(--ease),margin-top .7s var(--ease),border-color .25s,gap .35s var(--ease)}
.step.is-on > .chip{max-height:34px;opacity:1;margin-top:1rem;border-width:1px}
.story-device{position:relative;display:grid;justify-items:center;gap:1rem;isolation:isolate}
.story-device::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:170%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(29,111,242,.12),rgba(29,111,242,.04) 55%,transparent 72%)}
.story-device::after{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:128%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  border:1px solid rgba(11,13,18,.06);box-shadow:0 0 0 60px rgba(11,13,18,.018),0 0 0 120px rgba(11,13,18,.012)}
.story-who{position:relative;height:1.4em;margin:0;font:500 .72rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.story-who span{position:absolute;left:50%;top:0;white-space:nowrap;transform:translateX(-50%);transition:opacity .4s,transform .6s var(--ease)}
.story-who span + span{opacity:0;transform:translate(-50%,8px)}
.story-device[data-who="1"] .story-who span:first-child{opacity:0;transform:translate(-50%,-8px)}
.story-device[data-who="1"] .story-who span + span{opacity:1;transform:translateX(-50%)}
.story-label{max-width:34ch;text-align:center;font-size:.76rem;line-height:1.5;color:var(--ink-3)}
.story-rail{display:flex;gap:6px;margin-top:clamp(1rem,3vh,2rem)}
.story-rail i{flex:1;height:2px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.story-rail i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:left}

/* the phone */
.phone{--pw:clamp(250px,min(23vw,calc((100svh - 230px) * .466)),340px);position:relative;width:var(--pw);aspect-ratio:9/19.3;border-radius:calc(var(--pw) * .16);padding:calc(var(--pw) * .035);
       background:linear-gradient(160deg,#2A2D33,#0C0D10 45%,#1B1D22);
       box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 2px 2px rgba(255,255,255,.12) inset,0 60px 100px -40px rgba(11,13,18,.55),0 24px 40px -24px rgba(11,13,18,.45)}
.phone-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--pw) * .13);overflow:hidden;background:#fff;isolation:isolate;
              font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",var(--f-sans);color:#0B0D12;font-size:calc(var(--pw) * .042)}
.phone-island{position:absolute;z-index:9;top:calc(var(--pw) * .03);left:50%;width:32%;height:calc(var(--pw) * .085);margin-left:-16%;border-radius:99px;background:#000}
.scr{position:absolute;inset:0;opacity:0;visibility:hidden}
.scr.is-on{opacity:1;visibility:visible}
.sb{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--pw) * .045) calc(var(--pw) * .085) 0;font-weight:600;font-size:1em}
.sb-r{display:flex;gap:3px}.sb-r i{width:4px;height:4px;border-radius:50%;background:currentColor}
/* 01 · search */
.scr-search{background:#fff;padding-top:0}
.g-bar{display:flex;align-items:center;gap:.6em;margin:1.6em .9em .7em;height:3.1em;padding:0 1.05em;border-radius:99px;background:#fff;
       box-shadow:0 1px 6px rgba(32,33,36,.2),0 0 0 1px rgba(32,33,36,.06);font-size:1em}
.g-bar svg{width:1.15em;height:1.15em;color:#5f6368;flex:none}
.g-q{white-space:nowrap;overflow:hidden;color:#202124}
.g-caret{width:1px;height:1.2em;background:#1a73e8;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.g-tabs{display:flex;gap:1.2em;padding:0 1.1em .55em;border-bottom:1px solid #ebebeb;font-size:.84em;color:#5f6368}
.g-tabs .on{color:#1a0dab;font-weight:600;position:relative}
.g-tabs .on::after{content:"";position:absolute;left:0;right:0;bottom:-.62em;height:2px;background:#1a0dab;border-radius:2px}
.g-ad{position:relative;margin:.9em .8em .4em;padding:.85em .9em;border-radius:1em;background:#fff;box-shadow:0 0 0 1px #ececec;transition:box-shadow .4s}
.g-ad.is-hot{box-shadow:0 0 0 2px var(--accent),0 12px 26px -12px rgba(29,111,242,.45)}
.g-spon{display:block;font-weight:700;font-size:.78em;color:#202124;margin-bottom:.5em}
.g-site{display:flex;align-items:center;gap:.55em}
.g-site i{width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;background:#1c1c1c;color:#FF6A1A;font:700 .85em/1 var(--f-sans);font-style:normal}
.g-site b{display:block;font-size:.84em;font-weight:500;color:#202124}
.g-site span{display:block;font-size:.72em;color:#4d5156}
.g-title{margin-top:.55em;font-size:1.12em;line-height:1.25;color:#1a0dab}
.g-desc{margin-top:.35em;font-size:.8em;line-height:1.45;color:#4d5156}
.g-links{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.7em}
.g-links span{font-size:.76em;padding:.45em .8em;border-radius:99px;background:#f1f3f4;color:#1a0dab}
.g-links .g-callb{display:inline-flex;align-items:center;gap:.35em;background:#e8f0fe;color:#1967d2;font-weight:600}
.g-callb svg{width:1em;height:1em}
.g-org{margin:.9em .9em 0;display:grid;gap:.4em}
.g-org i{width:30%;height:.6em;border-radius:4px;background:#e8eaed}
.g-org b{width:82%;height:.8em;border-radius:4px;background:#d2e3fc}
.g-org s{width:100%;height:.55em;border-radius:4px;background:#f1f3f4}
.g-org s + s{width:70%}
.tap{position:absolute;z-index:8;width:3em;height:3em;margin:-1.5em 0 0 -1.5em;border-radius:50%;background:rgba(29,111,242,.28);
     box-shadow:0 0 0 0 rgba(29,111,242,.35);opacity:0;transform:scale(.4);pointer-events:none}
.tap[data-tap="0"]{left:78%;top:52%}
.tap[data-tap="1"]{left:21%;top:95.6%}
/* 02 · site */
.scr-site{background:#0e0e10}
.site-bar{position:absolute;z-index:3;left:0;right:0;top:0;height:calc(var(--pw) * .21);display:flex;align-items:flex-end;justify-content:center;
          padding-bottom:.55em;background:rgba(20,20,22,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-bar span{font-size:.74em;color:#d8d8dc;padding:.35em .9em;border-radius:99px;background:rgba(255,255,255,.1)}
.site-view{position:absolute;inset:0;overflow:hidden}
.site-view img{width:100%;height:auto;transform-origin:50% 0}
/* 03 · call */
.scr-call{background:radial-gradient(120% 70% at 50% 0%,#28303F,#0D1017 60%,#07080B);color:#fff;display:flex;flex-direction:column;padding:calc(var(--pw) * .2) 1em 1.2em}
.call-top{text-align:center;display:grid;gap:.25em}
.call-k{font-size:.8em;color:rgba(255,255,255,.62)}
.call-top b{font-size:1.5em;font-weight:600;letter-spacing:-.02em}
.call-t{font-size:.78em;color:rgba(255,255,255,.55)}
.call-wave{display:flex;align-items:center;justify-content:center;gap:.28em;height:2.6em;margin:1.1em 0 .6em}
.call-wave i{width:.28em;height:100%;border-radius:99px;background:linear-gradient(180deg,#8FB8FF,#1D6FF2);transform:scaleY(.18);transform-origin:center}
.scr-call.is-talking .call-wave i{animation:wv 1.1s ease-in-out infinite}
.call-wave i:nth-child(2n){animation-delay:-.3s!important}.call-wave i:nth-child(3n){animation-delay:-.6s!important}.call-wave i:nth-child(5n){animation-delay:-.85s!important}
@keyframes wv{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}
.call-tr{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.45em;overflow:hidden}
.bub{max-width:86%;padding:.55em .8em;border-radius:1.1em;font-size:.82em;line-height:1.35}
.bub.a{align-self:flex-start;background:rgba(255,255,255,.1);border-bottom-left-radius:.3em}
.bub.u{align-self:flex-end;background:#fff;color:#0B0D12;border-bottom-right-radius:.3em}
.call-end{display:flex;justify-content:center;margin-top:.9em}
.call-end span{width:3.4em;height:3.4em;border-radius:50%;background:#FF453A;display:grid;place-items:center}
.call-end svg{width:1.4em;height:1.4em;transform:rotate(135deg);color:#fff}
/* 04 · the owner's card */
.scr-card{background:radial-gradient(90% 60% at 30% 10%,#3A4A6B 0%,transparent 60%),radial-gradient(90% 70% at 90% 90%,#40305A 0%,transparent 60%),#0C0E14;color:#fff;
          padding:calc(var(--pw) * .19) .75em 1em;display:flex;flex-direction:column;gap:.7em}
.lock-time{text-align:center;display:grid;margin-bottom:.4em}
.lock-time span{font-size:.9em;font-weight:500;color:rgba(255,255,255,.75)}
.lock-time b{font-size:3.6em;font-weight:600;letter-spacing:-.03em;line-height:1}
.notif{display:grid;grid-template-columns:2.2em 1fr auto;gap:.6em;align-items:center;padding:.7em .8em;border-radius:1.2em;
       background:rgba(40,44,54,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08)}
.notif-i{width:2.2em;height:2.2em;border-radius:.6em;background:#fff;display:grid;place-items:center}
.notif-i svg{width:1.2em;height:1.2em;fill:#0B0D12}
.notif b{display:block;font-size:.84em;font-weight:600}
.notif span{display:block;font-size:.76em;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif time{align-self:start;font-size:.68em;color:rgba(255,255,255,.5)}
.ocard{padding:.85em .9em .8em;border-radius:1.2em;background:#161618;border:1px solid #2a2a2e;box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.ocard .r1{display:flex;align-items:baseline;gap:.5em}
.ocard .r1 b{flex:1;font-size:1.22em;font-weight:700}
.ocard .r1 time{font-size:.72em;color:#9A9AA2}
.ocard .r2{display:flex;align-items:center;gap:.45em;margin-top:.15em;font-size:.86em;font-weight:600}
.ocard .r2 i{width:.55em;height:.55em;border-radius:50%;background:#EF4444}
.ocard .r2 em{font-style:normal;font-weight:400;color:#9A9AA2}
.ocard p{margin-top:.45em;font-size:.78em;line-height:1.4;color:#B9B9C0}
.ocard .bd{display:flex;gap:.35em;margin-top:.6em}
.ocard .bd span{font-size:.6em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.35em .55em;border-radius:.4em;background:#232327;color:#B9B9C0}
.ocard .bd .today{background:rgba(255,176,32,.18);color:#FFB020}
.ocard .ac{display:flex;gap:.4em;margin-top:.7em}
.ocard .ac span{flex:1;text-align:center;padding:.65em 0;border-radius:.7em;font-size:.8em;font-weight:700;background:#232327}
.ocard .ac .call{flex:1.4;background:#30D158;color:#04140a;animation:okglow 2.2s ease-in-out infinite}
@keyframes okglow{0%,100%{box-shadow:0 0 0 0 rgba(48,209,88,.5)}60%{box-shadow:0 0 0 .6em rgba(48,209,88,0)}}

@media (max-width:900px){
  .story-track{height:460vh}
  .story-stage{justify-content:flex-start;padding-top:calc(76px + 1vh)}
  .story-grid{grid-template-columns:1fr;gap:1rem;justify-items:center}
  .story-device{order:-1;gap:.5rem}
  .phone{--pw:min(62vw,calc((100svh - 330px) * .466),300px)}
  .story-steps{position:relative;width:100%;max-width:520px;min-height:190px}
  .step{position:absolute;inset:0 auto auto 0;width:100%;padding:.2rem 0 0 1.1rem;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
  .step.is-on{opacity:1;visibility:visible}
  .step .h3{font-size:1.3rem}
  .step > p{font-size:.95rem}
  .story-label{display:none}
  .story-rail{margin-top:auto;margin-bottom:max(16px,env(safe-area-inset-bottom))}
}
/* no motion: the stage is not pinned and the steps are a plain list */
html:not(.anim) .story-track{height:auto}
html:not(.anim) .story-stage{position:relative;height:auto;padding:3rem 0 var(--sec)}
html:not(.anim) .step{position:relative;opacity:1;visibility:visible}
html:not(.anim) .step > p{max-height:none;opacity:1;margin-top:.75rem}
html:not(.anim) .step > .chip{max-height:34px;opacity:1;margin-top:1rem;border-width:1px}
html:not(.anim) .story-steps{min-height:0;gap:1rem}
html:not(.anim) .story-rail{display:none}
html:not(.anim) .scr{opacity:0;visibility:hidden}
html:not(.anim) .scr-card{opacity:1;visibility:visible}
html:not(.anim) .story-device .story-who span:first-child{opacity:0}
html:not(.anim) .story-device .story-who span + span{opacity:1;transform:translateX(-50%)}
@media (max-width:900px){html:not(.anim) .story-grid{justify-items:stretch}html:not(.anim) .story-device{justify-self:center}}

/* ---------------- 4. services bento ---------------- */
.svcs{padding:var(--sec) 0;background:var(--bg)}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.4rem)}
.svc{--rx:0deg;--ry:0deg;position:relative;display:flex;flex-direction:column;min-height:560px;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
     background:var(--bg-2);border:1px solid var(--line-2);transform:perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
     transition:transform .7s var(--ease),box-shadow .6s var(--ease),border-color .4s;will-change:transform}
.svc:hover{box-shadow:var(--sh-3);border-color:var(--line)}
.svc--web{grid-column:span 7}
.svc--ads{grid-column:span 5}
.svc--rec{grid-column:span 5;background:var(--night);color:var(--night-ink);border-color:transparent}
.svc--apps{grid-column:span 7}
.svc-media{position:relative;flex:1;min-height:260px;overflow:hidden}
.svc-body{position:relative;display:grid;gap:.7rem;padding:clamp(1.4rem,2.4vw,2.2rem)}
.svc-n{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;color:var(--ink-3)}
.svc--rec .svc-n{color:var(--night-ink-3)}
.svc-body .h3{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.6rem);letter-spacing:-.04em}
.svc-body p{color:var(--ink-2);max-width:46ch;line-height:1.55}
.svc--rec .svc-body p{color:var(--night-ink-2)}
.svc-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.8rem;padding-top:1rem;border-top:1px solid var(--line)}
.svc--rec .svc-foot{border-top-color:var(--night-line)}
.price{font:500 .8rem/1.3 var(--f-mono);letter-spacing:.02em;color:var(--ink)}
.svc--rec .price{color:#fff}
.go{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;transition:transform .6s var(--ease),background-color .3s}
.go svg{width:16px;height:16px;transition:transform .6s var(--ease)}
.svc--rec .go{background:#fff;color:var(--ink)}
.svc:hover .go{background:var(--accent);color:#fff}
.svc:hover .go svg{transform:rotate(-45deg)}
.glare{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s;
       background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 60%);mix-blend-mode:soft-light}
.svc:hover .glare{opacity:1}
/* the media inside each card */
.svc--web .svc-media img{position:absolute;width:74%;height:auto;border-radius:12px;box-shadow:var(--sh-3);transition:transform 1s var(--ease)}
.svc--web .svc-media img:first-child{left:6%;top:14%;transform:rotate(-4deg)}
.svc--web .svc-media .svc-media-2{left:34%;top:30%;transform:rotate(3deg)}
.svc--web:hover .svc-media img:first-child{transform:rotate(-6deg) translate(-2%,-3%) scale(1.02)}
.svc--web:hover .svc-media .svc-media-2{transform:rotate(4deg) translate(3%,2%) scale(1.04)}
.svc--ads .svc-media img{position:absolute;left:50%;top:10%;width:min(58%,300px);height:auto;margin-left:calc(min(58%,300px) / -2);border-radius:18px;
       box-shadow:var(--sh-3);transform:rotate(-5deg);transition:transform 1s var(--ease)}
.svc--ads:hover .svc-media img{transform:rotate(-1deg) translateY(-3%) scale(1.03)}
.svc-wave{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
          background:radial-gradient(60% 60% at 50% 45%,rgba(29,111,242,.28),transparent 70%)}
.rw{display:flex;align-items:center;gap:5px;height:76px}
.rw i{width:6px;height:100%;border-radius:99px;background:linear-gradient(180deg,#9CC2FF,#1D6FF2);transform:scaleY(.2);animation:wv 1.3s ease-in-out infinite}
.rw i:nth-child(2n){animation-delay:-.4s}.rw i:nth-child(3n){animation-delay:-.75s}.rw i:nth-child(5n){animation-delay:-1s}.rw i:nth-child(7n){animation-delay:-.2s}
.rw-card{display:grid;gap:.2rem;padding:.8rem 1rem;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
         -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.86rem;text-align:left;min-width:230px}
.rw-card b{font-weight:600}.rw-card span{color:var(--night-ink-2);font-size:.8rem}
.rw-card b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#EF4444;margin-right:.5rem;vertical-align:.1em}
.svc-phones{display:flex;align-items:flex-end;justify-content:center;gap:clamp(.6rem,2vw,1.2rem);padding:1.8rem 1.4rem 0}
.svc-phones img{width:min(26%,150px);height:auto;border-radius:20px;border:5px solid #111;box-shadow:var(--sh-3);transition:transform 1s var(--ease)}
.svc-phones img:nth-child(1){transform:translateY(14%) rotate(-6deg)}
.svc-phones img:nth-child(2){transform:translateY(4%)}
.svc-phones img:nth-child(3){transform:translateY(14%) rotate(6deg)}
.svc--apps:hover .svc-phones img:nth-child(1){transform:translateY(8%) rotate(-9deg) translateX(-6%)}
.svc--apps:hover .svc-phones img:nth-child(2){transform:translateY(-2%)}
.svc--apps:hover .svc-phones img:nth-child(3){transform:translateY(8%) rotate(9deg) translateX(6%)}
@media (max-width:980px){
  .svc--web,.svc--ads,.svc--rec,.svc--apps{grid-column:1 / -1}
  .svc{min-height:0}
  .svc-media{flex:none;height:clamp(240px,58vw,380px)}
}

/* ---------------- 5. selected work ---------------- */
.work{position:relative;padding:var(--sec) 0;background:var(--bg)}
.wl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.wr{display:grid;grid-template-columns:3.2rem minmax(0,1.25fr) minmax(0,1fr) 9.5rem 2.8rem;gap:1.25rem;align-items:center;width:100%;
    padding:clamp(1.1rem,2vw,1.6rem) 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;
    transition:opacity .5s var(--ease),padding .6s var(--ease)}
.wl:hover .wr{opacity:.32}
.wl .wr:hover,.wl .wr:focus-visible{opacity:1}
.wr-n{font:500 .74rem/1 var(--f-mono);color:var(--ink-3);letter-spacing:.06em}
.wr-name{font-size:clamp(1.45rem,1rem + 1.7vw,2.6rem);font-weight:550;letter-spacing:-.04em;line-height:1.05;transition:transform .6s var(--ease),color .3s}
.wr-trade{font-size:.95rem;color:var(--ink-2)}
.wr-tag{justify-self:start;font:500 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:.5rem .7rem;border-radius:99px;border:1px solid var(--line);color:var(--ink-2)}
.wr-tag.live{border-color:rgba(22,163,74,.35);color:var(--live)}
.wr-tag.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--live-2);margin-right:.45rem;vertical-align:.08em}
.wr-go{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);transition:background-color .3s,color .3s,border-color .3s,transform .6s var(--ease)}
.wr-go svg{width:16px;height:16px}
.wr:hover .wr-name{transform:translateX(12px)}
.wr:hover .wr-go{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(-45deg)}
.wr-thumb{display:none}
.wl-note{margin-top:1.4rem}
.wl-float{position:fixed;left:0;top:0;z-index:60;width:clamp(300px,26vw,420px);aspect-ratio:16/10;pointer-events:none;
          border-radius:14px;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.6);box-shadow:var(--sh-3);will-change:transform,opacity}
.wl-float-in{position:absolute;inset:0}
.wl-float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
@media (max-width:900px){
  .wr{grid-template-columns:minmax(0,1fr) 96px;grid-template-areas:"name thumb" "trade thumb" "tag thumb";gap:.3rem 1rem;padding:1.1rem 0}
  .wr-n,.wr-go{display:none}
  .wr-name{grid-area:name;font-size:1.45rem}
  .wr-trade{grid-area:trade;font-size:.86rem}
  .wr-tag{grid-area:tag;margin-top:.35rem;font-size:.62rem;padding:.4rem .6rem}
  .wr-thumb{grid-area:thumb;display:block;width:96px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--bg-2);box-shadow:var(--sh-1)}
  .wr-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
  .wl:hover .wr{opacity:1}
  .wr:hover .wr-name{transform:none}
  .wl-float{display:none}
}

/* ---------------- 6. before / after ---------------- */
.ba-s{padding:var(--sec) 0;background:var(--bg-2);overflow:hidden}
.ba{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;background:#0B0F16;
    box-shadow:0 0 0 1px var(--line),var(--sh-3);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;--x:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none;-webkit-user-select:none;user-select:none}
.ba-before{position:absolute;inset:0;z-index:2;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;z-index:3;box-shadow:0 0 0 1px rgba(11,13,18,.1),0 0 28px rgba(0,0,0,.4);pointer-events:none}
.ba-handle{position:absolute;top:50%;left:var(--x);z-index:4;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;padding:0;cursor:ew-resize;
           display:grid;place-items:center;color:var(--ink);border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.72);
           -webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);
           box-shadow:0 16px 34px -12px rgba(11,13,18,.6);transition:transform .4s var(--ease),box-shadow .3s;touch-action:none}
.ba-handle svg{width:22px;height:22px}
.ba-handle:hover,.ba.grabbing .ba-handle{transform:scale(1.1);box-shadow:0 18px 38px -12px var(--accent-glow)}
.ba-lbl{position:absolute;top:16px;z-index:3;font:500 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:.55rem .8rem;border-radius:99px;pointer-events:none;transition:opacity .25s}
.ba-lbl.l{left:16px;background:rgba(255,255,255,.9);color:var(--ink)}
.ba-lbl.r{right:16px;background:rgba(11,13,18,.72);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ba[data-edge="l"] .ba-lbl.l,.ba[data-edge="r"] .ba-lbl.r{opacity:0}
.ba-cap{margin:1.2rem auto 0;text-align:center;font-size:.8rem;color:var(--ink-3);max-width:66ch;line-height:1.55}
@media (max-width:760px){
  .ba{--bh:min(72svh,600px);height:var(--bh);width:calc(var(--bh) * 640 / 1385);max-width:100%;aspect-ratio:auto;margin:0 auto;border-radius:24px}
  .ba-handle{width:50px;height:50px;margin:-25px 0 0 -25px}
  .ba-lbl{top:11px;font-size:.58rem;padding:.42rem .62rem}.ba-lbl.l{left:11px}.ba-lbl.r{right:11px}
}

/* ---------------- 7. the peak (dark) ---------------- */
.peak{position:relative;overflow:hidden;isolation:isolate;padding:var(--sec) 0;background:var(--night);color:var(--night-ink)}
.peak-glow{position:absolute;z-index:-1;inset:0;pointer-events:none;
           background:radial-gradient(40% 50% at 72% 50%,rgba(29,111,242,.24),transparent 70%),radial-gradient(30% 40% at 10% 0%,rgba(121,174,255,.10),transparent 70%)}
.peak::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
             background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:28px 28px;
             -webkit-mask-image:radial-gradient(70% 70% at 70% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 70% 50%,#000,transparent)}
.peak .kicker{color:var(--night-ink-3)}
.peak .lede{color:var(--night-ink-2)}
.peak .lede b{color:#fff}
.peak-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.peak-copy{display:grid;gap:1.4rem;align-content:center}
.peak-trust{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.peak-trust li{font:500 .72rem/1 var(--f-mono);letter-spacing:.04em;padding:.6rem .8rem;border-radius:99px;border:1px solid var(--night-line);color:var(--night-ink-2)}
.peak-acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}
.peak-fine{font-size:.82rem;color:var(--night-ink-3);max-width:52ch;line-height:1.55}
.peak-try{position:relative;justify-self:center;width:min(392px,100%)}
.peak-try::before{content:"";position:absolute;z-index:-1;inset:10% -20%;border-radius:50%;background:radial-gradient(closest-side,rgba(29,111,242,.35),transparent);filter:blur(30px)}
.peak-try .dl-proof{font-family:var(--f-sans)}
.peak-try .dl-proof[hidden]{display:none}
@media (min-width:1100px){.peak-try .dl-proof{position:absolute;right:-60px;bottom:-12px;width:330px;z-index:2}}
@media (max-width:1099px){.peak-try .dl-proof{margin:18px auto 0;width:min(392px,100%)}}
@media (max-width:980px){.peak-grid{grid-template-columns:1fr}}

/* ---------------- 8. how it starts ---------------- */
.start{padding:var(--sec) 0;background:var(--bg)}
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);counter-reset:s}
.steps3 li{position:relative;display:grid;align-content:start;gap:.8rem;padding:clamp(1.5rem,2.6vw,2.2rem);border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line-2)}
.s-n{font:500 .74rem/1 var(--f-mono);letter-spacing:.12em;color:var(--accent)}
.steps3 .h3{margin-top:1.8rem}
.steps3 p{color:var(--ink-2);line-height:1.55}
.start-cta{display:grid;justify-items:center;gap:1.1rem;margin-top:clamp(2.5rem,5vw,4rem);text-align:center}
.start-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.start-cta .fine{max-width:52ch}
@media (max-width:900px){.steps3{grid-template-columns:1fr}.steps3 .h3{margin-top:.6rem}}
@media (max-width:560px){.start-acts .btn{width:100%}}

/* ---------------- footer ---------------- */
.ft{position:relative;padding:clamp(4rem,8vw,7rem) 0 1.4rem;background:var(--bg-2);border-top:1px solid var(--line-2);overflow:hidden}
.ft-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:3rem}
.ft-lead{display:grid;gap:1.6rem;align-content:start;justify-items:start}
.ft-say{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);font-weight:500;letter-spacing:-.03em;line-height:1.15;max-width:22ch}
.ft-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.ft-nav div{display:grid;gap:.7rem;align-content:start}
.ft-nav .kicker{margin-bottom:.4rem}
.ft-nav .kicker::before{display:none}
.ft-nav a{font-size:.95rem;color:var(--ink-2);width:max-content;max-width:100%;overflow-wrap:anywhere;transition:color .2s}
.ft-nav a:hover{color:var(--ink)}
.ft-mark{overflow:hidden;margin-top:clamp(3rem,7vw,6rem);font-size:clamp(5rem,23vw,21rem);font-weight:600;letter-spacing:-.075em;line-height:.8;
         color:var(--ink);text-align:center;white-space:nowrap;user-select:none;-webkit-user-select:none;
         background:linear-gradient(180deg,var(--ink) 20%,rgba(11,13,18,.35));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
         padding-bottom:.06em}
/* SplitText wraps each letter in its own box; a transformed box leaves the
   parent's background-clip:text, so every letter carries the gradient itself */
.ft-mark .char{display:inline-block;background:linear-gradient(180deg,var(--ink) 20%,rgba(11,13,18,.35));
               -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.ft-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);
           font:500 .72rem/1.4 var(--f-mono);letter-spacing:.06em;color:var(--ink-3)}
@media (min-width:761px){.ft-bottom{padding-right:250px}}
@media (max-width:760px){.ft{padding-bottom:5.5rem}}
@media (max-width:900px){.ft-top{grid-template-columns:1fr}}
@media (max-width:560px){.ft-nav{grid-template-columns:1fr 1fr}.ft-nav div:last-child{grid-column:1 / -1}}

/* ---------------- motion: starting states (only under html.anim) ----------------
   site.js adds .is-in when an element has played in, which retires the rule
   and hands the element back to its own transform (the tilt cards need that). */
html.anim [data-reveal]:not(.is-in){opacity:0;transform:translateY(28px)}
html.anim [data-split]:not(.is-in){opacity:0}
html.anim [data-hero-k]:not(.is-in),html.anim [data-hero-f]:not(.is-in){opacity:0;transform:translateY(22px)}
html.anim [data-hero-h]:not(.is-in){opacity:0}
html.anim .hd-in:not(.is-in){opacity:0;transform:translateY(-16px)}
.split-line{display:block}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ================= INNER PAGES ================= */

/* ---------------- page hero ---------------- */
.ph{position:relative;padding:clamp(8.5rem,17vh,11rem) 0 clamp(2rem,4vw,3rem);overflow:hidden;isolation:isolate;
    background:radial-gradient(70% 90% at 50% 0%,#FFFFFF 0%,#F4F6F9 60%,var(--bg-2) 100%)}
.ph::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.55;
            background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
            background-size:72px 72px;-webkit-mask-image:radial-gradient(60% 70% at 50% 0%,#000,transparent);mask-image:radial-gradient(60% 70% at 50% 0%,#000,transparent)}
.ph-in{display:grid;justify-items:center;text-align:center;gap:1.3rem}
.ph-in h1{font-size:var(--fs-d1);max-width:15ch}
.ph-in .lede{margin-inline:auto;max-width:56ch}
.ph--left .ph-in{justify-items:start;text-align:left}
.ph--left .ph-in .lede{margin-inline:0}
.ph-acts{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:.6rem}
.ph--left .ph-acts{justify-content:flex-start}
.ph-hint{font-size:.84rem;color:var(--ink-3);max-width:58ch}
.ph--dark{background:radial-gradient(70% 90% at 50% 0%,#141925 0%,var(--night) 70%);color:var(--night-ink)}
.ph--dark::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
.ph--dark .kicker{color:var(--night-ink-3)}
.ph--dark .lede{color:var(--night-ink-2)}
.ph--dark .ph-hint{color:var(--night-ink-3)}

/* ---------------- THE DECK — 3D carousel (mechanics from v1, unchanged) ----------------
   Spin physics from ~/connors-hero (OrbitControls: rotateSpeed 2.3, damping
   0.055, ±30.6° tilt, free azimuth). Each card is a real slab: faces ±th/2
   either side of the card plane, edge planes centred on the boundary, a short
   stack of cores filling the rounded corners. Never put opacity, filter or a
   mask on a .c3d that must stay 3D — it flattens the card. */
.deck-s{position:relative;padding:0 0 clamp(2.5rem,5vw,4rem);background:var(--bg-2);overflow:hidden}
.deck-s .ph{background:none;padding-bottom:clamp(1rem,2.5vw,2rem)}
.deck-s::after{content:"";position:absolute;left:50%;top:48%;width:min(1100px,110vw);height:520px;transform:translate(-50%,-10%);z-index:0;pointer-events:none;
               background:radial-gradient(closest-side,rgba(29,111,242,.10),transparent 70%)}
.stage3d{position:relative;z-index:1;height:clamp(340px,48vh,470px);perspective:1500px;perspective-origin:50% 46%;
         touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.stage3d.grabbing{cursor:grabbing}
.deck{position:absolute;inset:0;transform-style:preserve-3d;z-index:1}
.c3d{position:absolute;top:50%;left:50%;width:min(58vw,392px);aspect-ratio:16/10.4;margin:0;transform-style:preserve-3d;will-change:transform;
     transition:opacity .4s var(--ease);--slab:#D5DADF;--slab-dk:#C0C6CC;--slab-lt:#EEF0F2}
.c3d .face{position:absolute;inset:0;border-radius:var(--cr,13px);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.c3d .front{background:#fff;transform:translateZ(calc(var(--th) / 2));box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -28px rgba(11,13,18,.55)}
.c3d .front img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.c3d .back{transform:rotateY(180deg) translateZ(calc(var(--th) / 2));
  background:repeating-linear-gradient(92deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px),linear-gradient(148deg,#9CA3AA 0%,#767D85 34%,#8F969D 58%,#6B7278 100%);
  display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 44px rgba(0,0,0,.32)}
.c3d .back .vmark{width:40px;height:40px;opacity:.46}
.c3d .back .vmark path{fill:#2A2F34}
.c3d .core{position:absolute;inset:1px;border-radius:calc(var(--cr,13px) - 1px);background:var(--slab);pointer-events:none}
/* Only the settled front card is a slab (deck.js sets .is-slab). In the fan a
   card is its face alone: a side card's edge and core planes were split against
   each other by the compositor's depth sort and drawn over neighbouring faces. */
.c3d:not(.is-slab) .edge,.c3d:not(.is-slab) .core,.c3d:not(.is-slab) .back{display:none}
.c3d .edge{position:absolute;pointer-events:none;background:var(--slab);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.c3d .edge.t,.c3d .edge.b{left:var(--cr,13px);right:var(--cr,13px);height:var(--th)}
.c3d .edge.l,.c3d .edge.r{top:var(--cr,13px);bottom:var(--cr,13px);width:var(--th)}
.c3d .edge.t{top:calc(var(--th) / -2);transform:rotateX(90deg);background:linear-gradient(180deg,var(--slab-dk),var(--slab-lt))}
.c3d .edge.b{bottom:calc(var(--th) / -2);transform:rotateX(-90deg);background:linear-gradient(0deg,var(--slab-dk),var(--slab-lt))}
.c3d .edge.l{left:calc(var(--th) / -2);transform:rotateY(-90deg);background:linear-gradient(90deg,var(--slab-dk),var(--slab-lt))}
.c3d .edge.r{right:calc(var(--th) / -2);transform:rotateY(90deg);background:linear-gradient(270deg,var(--slab-dk),var(--slab-lt))}
.deck-cap{position:absolute;left:50%;bottom:0;z-index:30;transform:translateX(-50%) translateY(6px);margin:0;display:inline-flex;align-items:center;gap:.9rem;text-align:left;
          background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
          border:1px solid var(--line);border-radius:999px;padding:.55rem .6rem .55rem 1.3rem;cursor:pointer;font-family:var(--f-sans);
          box-shadow:0 14px 30px -16px rgba(11,13,18,.45);opacity:0;transition:opacity .32s var(--ease),transform .32s var(--ease),border-color .2s,box-shadow .2s}
.deck-cap.in{opacity:1;transform:translateX(-50%)}
.deck-cap:hover{border-color:var(--ink);box-shadow:0 16px 34px -14px var(--accent-glow)}
.deck-cap:hover .cap-go{background:var(--accent)}
.deck-cap .cap-t{display:block}
.deck-cap .cap-t b{display:block;font-size:.98rem;font-weight:600;color:var(--ink);letter-spacing:-.015em;line-height:1.2}
.deck-cap .cap-t > span{display:block;font:500 .6rem/1.3 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:.22rem}
.deck-cap .cap-go{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;transition:background-color .25s}
.deck-cap .cap-go svg{width:14px;height:14px}
.deck-ui{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:clamp(2.5rem,7vw,5rem);margin-top:clamp(2.2rem,5vw,3rem)}
.dbtn{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;flex:none;
      transition:border-color .25s,transform .4s var(--ease),box-shadow .3s,background-color .25s,color .25s}
.dbtn:hover{border-color:var(--ink);background:var(--ink);color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(11,13,18,.5)}
.dbtn svg{width:18px;height:18px}
.deck-hint{position:relative;z-index:1;text-align:center;margin:1rem 0 0;font:500 .64rem/1.4 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.stage3d.fit-contain .c3d .front{background:#0B0F16}
.stage3d.fit-contain .c3d .front img{object-fit:contain;object-position:center}
.stage3d.fit-contain .c3d{aspect-ratio:16/11}
.stage3d.fit-shape{height:clamp(430px,58vh,560px)}
.stage3d.fit-shape .c3d{aspect-ratio:auto}
.stage3d.fit-shape .c3d .front img{object-fit:cover;object-position:top center}
.c3d.is-phone{--slab:#25282D;--slab-dk:#17191D;--slab-lt:#40444B}
.c3d.is-phone .front{background:#0B0B0D;box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 30px 60px -28px rgba(11,13,18,.6)}
.c3d.is-phone .back{background:radial-gradient(90% 70% at 50% 30%,#2E3137,#15171B 70%);box-shadow:inset 0 0 40px rgba(0,0,0,.5)}
.c3d.is-phone .back .vmark path{fill:#4C5058}
@media (max-width:760px){
  .stage3d{height:clamp(300px,42svh,380px)}
  .stage3d.fit-shape{height:clamp(370px,56svh,480px)}
  .c3d{width:min(66vw,300px)}
  .deck-cap{padding:.45rem .45rem .45rem 1rem;gap:.6rem;max-width:calc(100% - 1.5rem)}
  .deck-cap .cap-t{min-width:0;overflow:hidden}
  .deck-cap .cap-t b{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .deck-cap .cap-t > span{font-size:.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (prefers-reduced-motion:reduce){.c3d{transition:none}}

/* the detail view (deck cards, and the home page's work index) */
.deck-x{position:fixed;inset:0;z-index:95;display:none;padding:clamp(.8rem,3vw,2rem);overflow:auto;
        background:rgba(244,245,247,.78);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.deck-x[data-open="true"],.deck-x[data-open="closing"]{display:flex;align-items:center;justify-content:center}
.deck-x[data-open="true"]{animation:xIn .4s var(--ease) both}
.deck-x[data-open="closing"]{animation:xOut .3s var(--ease) both}
@keyframes xIn{from{opacity:0}to{opacity:1}}
@keyframes xOut{from{opacity:1}to{opacity:0}}
.xw{width:100%;max-width:1120px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);box-shadow:0 50px 100px -40px rgba(11,13,18,.5);animation:xUp .55s var(--ease) both}
@keyframes xUp{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
.deck-x[data-open="closing"] .xw{animation:xDown .3s var(--ease) both}
@keyframes xDown{from{opacity:1;transform:none}to{opacity:0;transform:translateY(16px) scale(.975)}}
@media (max-width:860px){.xw{grid-template-columns:1fr}}
.xw .shot{background:var(--bg-2);display:flex;align-items:center;justify-content:center;padding:clamp(1rem,3vw,2.2rem);min-height:260px}
.xw .shot img,.xw .shot video{width:100%;height:auto;border-radius:12px;display:block;box-shadow:0 24px 50px -24px rgba(11,13,18,.5)}
.xw .shot-phone{background:radial-gradient(120% 90% at 50% 0%,#20242c,#0B0F16)}
.xw .shot-phone img{width:auto;max-height:min(70vh,640px);border-radius:28px}
.xw .info{padding:clamp(1.5rem,3.5vw,2.6rem);display:flex;flex-direction:column}
.xw .info .eyebrow,.xw .info .kicker{display:flex;margin-bottom:.9rem}
.xw .info .eyebrow{font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.xw .info h3{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.035em}
.xw .info .lede{margin-top:.9rem;font-size:.96rem}
.xw .meta{margin:1.5rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line-2);display:grid;gap:.6rem}
.xw .meta div{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem}
.xw .meta dt{color:var(--ink-3)}
.xw .meta dd{margin:0;color:var(--ink);font-weight:500;text-align:right}
.xw .acts{margin-top:auto;padding-top:1.6rem;display:flex;gap:.6rem;flex-wrap:wrap}
.xclose{position:absolute;top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem);z-index:2;width:46px;height:46px;border-radius:50%;
        border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .5s var(--ease),background-color .25s,color .25s}
.xclose:hover{transform:rotate(90deg);background:var(--ink);color:#fff}
.xclose svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.deck-x[data-open="true"],.deck-x[data-open="closing"],.xw{animation:none}}

/* ---------------- offer: the entry card ---------------- */
.offer{padding:clamp(3rem,6vw,5rem) 0 0}
.entry{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);
       scroll-margin-top:6rem;transition:border-color .3s,box-shadow .3s}
.entry::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 70% at 100% 0%,rgba(29,111,242,.09),transparent 70%)}
.entry-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.entry-l{padding:clamp(1.8rem,4vw,3.2rem)}
.entry-r{padding:clamp(1.6rem,3.4vw,2.8rem);background:var(--bg-2);border-left:1px solid var(--line-2);display:flex;flex-direction:column}
@media (max-width:880px){.entry-in{grid-template-columns:1fr}.entry-r{border-left:0;border-top:1px solid var(--line-2)}}
.entry-tag{display:inline-flex;align-items:center;gap:.55rem;font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
           padding:.55rem .85rem;border-radius:99px;background:var(--accent-soft);border:1px solid rgba(29,111,242,.2)}
.entry-tag i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blip-b 2.4s infinite}
@keyframes blip-b{0%{box-shadow:0 0 0 0 rgba(29,111,242,.45)}70%{box-shadow:0 0 0 8px rgba(29,111,242,0)}100%{box-shadow:0 0 0 0 rgba(29,111,242,0)}}
.entry-price{display:flex;align-items:baseline;gap:.6rem;margin-top:1.4rem;font-size:clamp(4rem,2.4rem + 5.5vw,7rem);font-weight:500;
             letter-spacing:-.06em;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums}
.entry-price .cur{font-size:.46em;letter-spacing:-.02em;color:var(--ink-3);align-self:flex-start;margin-top:.12em}
.entry-price .per{font:500 .74rem/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.entry h2{margin-top:1.3rem;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);letter-spacing:-.035em;line-height:1.08;max-width:20ch}
.entry-lede{margin-top:1rem;color:var(--ink-2);font-size:1.02rem;line-height:1.6;max-width:46ch}
.entry-acts{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.8rem}
.entry-fine{margin-top:1.2rem;font-size:.82rem;color:var(--ink-3);max-width:48ch;line-height:1.55}
.entry-k{display:block;font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.1rem}
.entry-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.entry-list li{display:grid;grid-template-columns:24px 1fr;gap:.75rem;font-size:.92rem;color:var(--ink-2);line-height:1.5}
.entry-list li i{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;margin-top:.05rem;font-style:normal}
.entry-list li i svg{width:12px;height:12px}
.entry-list li b{color:var(--ink);font-weight:600}
.entry-list li.opt i{background:#fff;color:var(--ink);border:1px dashed var(--ink-4)}
.entry-pair{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;margin-top:1.4rem;
            background:#fff;border:1px dashed rgba(29,111,242,.45);border-radius:16px;padding:.95rem 1.1rem;cursor:pointer;font-family:var(--f-sans);
            transition:border-color .2s,background-color .2s,transform .4s var(--ease)}
.entry-pair:hover{border-color:var(--accent);transform:translateY(-2px)}
.entry-pair b{display:block;font-size:.95rem;font-weight:600;color:var(--ink)}
.entry-pair > span > span{display:block;font-size:.82rem;color:var(--ink-3);margin-top:.15rem}
.entry-pair svg{flex:none;width:16px;height:16px;color:var(--accent);transition:transform .5s var(--ease)}
.entry.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--sh-3)}
.entry.on .entry-pair{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.entry.on .entry-pair svg{transform:rotate(180deg)}
@media (max-width:760px){
  .entry{border-radius:24px}
  .entry-l{padding:1.5rem 1.2rem 1.6rem}.entry-r{padding:1.3rem 1.2rem 1.5rem}
  .entry-acts .btn{width:100%}
  .entry-list li{font-size:.88rem}
}

/* "need more?" — the bigger plans stay folded until asked for */
.more{display:flex;justify-content:center;padding:clamp(1.8rem,3.5vw,2.6rem) 0 0}
.more-btn{width:100%;max-width:760px;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;cursor:pointer;
          background:#fff;border:1px solid var(--line);border-radius:999px;padding:.7rem .7rem .7rem 1.6rem;font-family:var(--f-sans);
          box-shadow:var(--sh-2);transition:border-color .25s,box-shadow .3s,transform .4s var(--ease)}
.more-btn:hover{border-color:var(--ink);transform:translateY(-2px)}
.more-t{min-width:0}
.more-t b{display:block;font-size:1.06rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.more-t span{display:block;font-size:.84rem;color:var(--ink-3);margin-top:.1rem}
.more-chev{flex:none;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .6s var(--ease),background-color .25s}
.more-chev svg{width:16px;height:16px}
.more-btn:hover .more-chev{background:var(--accent)}
.more-btn[aria-expanded="true"] .more-chev{transform:rotate(180deg)}
.more-btn .when-open{display:none}
.more-btn[aria-expanded="true"] .when-open{display:block}
.more-btn[aria-expanded="true"] .when-closed{display:none}
@media (max-width:760px){.more-btn{border-radius:22px;padding:.8rem .8rem .8rem 1.1rem}.more-t b{font-size:.98rem}.more-t span{font-size:.8rem}}
.plans{scroll-margin-top:6rem}
.plans[hidden]{display:none}
.plans-k{margin:clamp(2rem,4vw,3rem) 0 0;text-align:center;font:500 .7rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
#launch-package{scroll-margin-top:6rem}

/* ---------------- tiers (quote builder: the card IS the control) ---------------- */
.tiers{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));padding:clamp(1.2rem,3vw,2rem) 0 clamp(2rem,4vw,3rem)}
.tier{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem 1.6rem 1.7rem;
      transition:border-color .25s,box-shadow .35s var(--ease),transform .5s var(--ease)}
.tier .tn{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.tier.rec .tn{color:var(--accent)}
.tier .tp{font-size:2.9rem;font-weight:500;letter-spacing:-.05em;margin:.7rem 0 .2rem;line-height:1;font-variant-numeric:tabular-nums}
.tier .tp span{font-size:1rem!important;letter-spacing:0;color:var(--ink-3)!important}
.tier .ts{font:500 .76rem/1.4 var(--f-mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.tier .tw{font-size:.9rem;color:var(--ink-2);margin:1rem 0 1.2rem;flex:1;line-height:1.55}
.tier ul{list-style:none;margin:0;padding:1.1rem 0 0;border-top:1px solid var(--line-2);display:grid;gap:.55rem}
.tier li{font-size:.86rem;color:var(--ink-2);padding-left:1.4rem;position:relative}
.tier li::before{content:"";position:absolute;left:.1rem;top:.42em;width:10px;height:6px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg)}
.tier.rec{border-color:rgba(29,111,242,.35);box-shadow:0 20px 40px -24px rgba(29,111,242,.45)}
.tier[data-tier]{cursor:pointer}
.tier[data-tier]:hover{border-color:var(--ink-3);transform:translateY(-4px);box-shadow:var(--sh-2)}
.tier[data-tier].on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 40px -22px rgba(29,111,242,.55)}
.tier[data-tier].on::after{content:"";position:absolute;top:1.1rem;right:1.1rem;width:26px;height:26px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
  animation:pop .45s var(--spring)}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.note-box{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:1.5rem 1.6rem;margin:0 0 clamp(2rem,4vw,3rem);
          font-size:.9rem;line-height:1.65;color:var(--ink-2)}
.note-box b{color:var(--ink);font-weight:600}
.note-box a{text-decoration:underline;text-underline-offset:3px}

/* the cross-sell the quote builder renders */
.qmount{padding:0 0 clamp(2rem,4vw,3rem)}
.qmount:empty{padding:0}
.qmount-e{padding-top:1.2rem}
.qgroup{margin-bottom:1.4rem}
.qgh{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:.8rem}
.qgn{font-size:1.1rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.qgl{font-size:.86rem;color:var(--ink-3)}
.qtiles{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.qtile{text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;cursor:pointer;font-family:var(--f-sans);
       display:flex;flex-direction:column;transition:border-color .2s,transform .4s var(--ease),box-shadow .3s}
.qtile:hover:not(:disabled){border-color:var(--ink-3);transform:translateY(-3px)}
.qtile.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 14px 28px -18px rgba(29,111,242,.55)}
.qtile:disabled{opacity:.45;cursor:not-allowed}
.qtile .qn{font-size:.98rem;font-weight:600;color:var(--ink)}
.qtile .qp{font:500 .78rem var(--f-mono);color:var(--accent);margin-top:.3rem;font-variant-numeric:tabular-nums}
.qtile .qb{font-size:.82rem;color:var(--ink-2);margin-top:.45rem}
.qreveal{border:1px dashed rgba(29,111,242,.45);border-radius:20px;padding:1.1rem 1.15rem;background:var(--accent-soft);margin-top:.4rem}
.qrl{display:block;font:500 .64rem/1.3 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem}
.qopt{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;text-align:left;background:#fff;border:1px solid var(--line);
      border-radius:14px;padding:.9rem 1.05rem;cursor:pointer;font-family:var(--f-sans);margin-bottom:.5rem;transition:border-color .2s,transform .4s var(--ease)}
.qopt:last-child{margin-bottom:0}
.qopt:hover:not(:disabled){border-color:var(--accent);transform:translateX(3px)}
.qopt:disabled{opacity:.5;cursor:not-allowed}
.qopt .qot b{display:block;font-size:.95rem;font-weight:600;color:var(--ink)}
.qopt .qot span{display:block;font-size:.82rem;color:var(--ink-2);margin-top:.15rem}
.qopt .qsv{flex:none;font:600 .76rem var(--f-mono);color:var(--live);white-space:nowrap;font-variant-numeric:tabular-nums}
.qopt .qsv.locked{color:var(--ink-3);font-weight:400}

/* the sticky quote bar — clear of the receptionist pill (#veylen-call, fixed
   right:18px in its own shadow root): room on the right at desktop, a floating
   card above it on a phone */
.qbar{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;padding:.9rem var(--gut);
      background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
      border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(11,13,18,.35)}
.qbar[data-on="true"]{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;animation:qbIn .5s var(--ease) both}
@keyframes qbIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.qbl{display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap}
.qbs{font-size:clamp(1.55rem,3.4vw,2.1rem);font-weight:500;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.qbs small,.qbm small{font:500 .74rem var(--f-mono);letter-spacing:.02em;color:var(--ink-3)}
.qbm{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:500;color:var(--accent);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.qbr{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.qbv{font:500 .75rem var(--f-mono);color:var(--live);font-variant-numeric:tabular-nums}
@media (min-width:641px){.qbar[data-on="true"]{padding-right:calc(var(--gut) + 236px)}}
@media (max-width:640px){
  .qbar{left:10px;right:10px;bottom:84px;border-radius:20px;border:1px solid var(--line);padding:.8rem .95rem;box-shadow:0 18px 40px -18px rgba(11,13,18,.45)}
  .qbar[data-on="true"]{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem .8rem;align-items:center}
  .qbl{gap:.6rem}.qbs{font-size:1.5rem}.qbm{font-size:1.05rem}
  .qbr{display:contents}
  .qbr .btn{grid-column:2;grid-row:1;flex:none;width:auto;padding:0 1.05rem;height:44px;font-size:.88rem;white-space:nowrap}
  .qbv{grid-column:1 / -1;grid-row:2;font-size:.7rem}
  .p-quote main{padding-bottom:12rem}
}
@media (prefers-reduced-motion:reduce){.qbar[data-on="true"]{animation:none}}

/* ---------------- the Launch Package (the service pages' one dark beat) ---------------- */
.bundle{position:relative;margin:0 0 clamp(2.5rem,5vw,4rem);border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
        background:radial-gradient(120% 130% at 82% 8%,#16305C 0%,#0C1B36 42%,#070E1D 100%);box-shadow:0 40px 80px -40px rgba(7,14,29,.8)}
.bundle::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 60% at 84% 6%,rgba(29,111,242,.3),transparent 70%)}
.bundle-in{position:relative;padding:clamp(1.8rem,4.5vw,3.2rem)}
.bundle-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.bundle-tag{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#DCE6F5;border-radius:999px;
            padding:.5rem .9rem;font:500 .64rem/1 var(--f-mono);letter-spacing:.15em;text-transform:uppercase}
.bundle-save{display:inline-flex;align-items:baseline;gap:.45rem;background:#F5C451;color:#2A1D02;border-radius:999px;padding:.5rem 1rem;font-weight:700;box-shadow:0 10px 26px -10px rgba(245,196,81,.75)}
.bundle-save .n{font-size:1.02rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bundle-save .t{font:600 .6rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.bundle h2{margin:1.4rem 0 0;color:#fff;font-size:clamp(2rem,1.3rem + 2.6vw,3.3rem);letter-spacing:-.04em}
.bundle-why{margin:.8rem 0 0;color:#9FB2CE;font-size:1.02rem;max-width:46ch;line-height:1.6}
.bundle-why b{color:#DCE6F5;font-weight:500}
.bundle-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(1.2rem,3vw,2.2rem);margin-top:clamp(1.6rem,3.5vw,2.4rem);align-items:start}
@media (max-width:880px){.bundle-body{grid-template-columns:1fr}}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
@media (max-width:520px){.stack{grid-template-columns:1fr}}
.stack-i{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:1rem 1.05rem}
.stack-i .ico{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(29,111,242,.22);margin-bottom:.7rem}
.stack-i .ico svg{width:15px;height:15px;color:#79ADFF}
.stack-i .nm{display:block;color:#fff;font-size:.92rem;font-weight:600;line-height:1.3}
.stack-i .wo{display:block;margin-top:.3rem;font:500 .72rem var(--f-mono);color:#7C8FAC;font-variant-numeric:tabular-nums}
.pricebox{background:#fff;border-radius:22px;padding:clamp(1.2rem,3vw,1.7rem);box-shadow:0 24px 50px -24px rgba(0,0,0,.65)}
.pb-row{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.pb-row s{color:var(--ink-3);font-size:1.05rem;font-weight:500;text-decoration-thickness:1.5px;font-variant-numeric:tabular-nums}
.pb-row .now{font-size:clamp(2.8rem,6.5vw,3.7rem);font-weight:500;letter-spacing:-.055em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pb-row .lb{font:500 .74rem var(--f-mono);color:var(--ink-3)}
.pb-div{height:1px;background:var(--line-2);margin:1rem 0}
.pb-row.mo .now{font-size:clamp(1.7rem,3.4vw,2.1rem);color:var(--accent)}
.pb-row.mo s{font-size:.92rem}
.pricebox .btn{margin-top:1.3rem;width:100%}
.pb-foot{margin:.9rem 0 0;text-align:center;font-size:.8rem;color:var(--ink-3)}
.pb-foot b{color:var(--ink-2);font-weight:600}
.bundle-fine{position:relative;border-top:1px solid rgba(255,255,255,.09);padding:1rem clamp(1.8rem,4.5vw,3.2rem);font-size:.76rem;color:#8296B0;line-height:1.6}
.bundle-fine b{color:#B6C6DC;font-weight:600}

/* ---------------- closing band (inner pages) ---------------- */
.close-s{padding:var(--sec) 0;text-align:center;background:var(--bg)}
.close-s .wrap{display:grid;justify-items:center;gap:1.3rem}
.close-s h2{max-width:16ch}
.close-s .lede{max-width:52ch;margin-inline:auto}
.close-s .acts{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:.8rem}

/* ================= RECEPTION ================= */
/* the call flow */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;grid-template-columns:repeat(6,minmax(0,1fr));counter-reset:f}
.flow-s{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:1.2rem 1.1rem 1.3rem;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.flow-s .n{font:500 .66rem/1 var(--f-mono);letter-spacing:.13em;color:var(--accent)}
.flow-s b{font-size:1rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin-top:.9rem}
.flow-s span:last-child{font-size:.86rem;color:var(--ink-2);line-height:1.5}
.flow-s::after{content:"";position:absolute;top:1.45rem;right:-.8rem;width:.8rem;height:1px;background:var(--line)}
.flow-s:last-child::after{display:none}
.flow--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.flow{grid-template-columns:repeat(3,minmax(0,1fr))}.flow-s:nth-child(3)::after{display:none}}
@media (max-width:640px){.flow{grid-template-columns:1fr 1fr}.flow--3{grid-template-columns:1fr}.flow-s::after{display:none}}
.sec{padding:var(--sec) 0}
.sec--2{background:var(--bg-2)}
.sec--tight{padding:clamp(3rem,6vw,5rem) 0}

/* the demo line, on its dark ground */
.try{position:relative;overflow:hidden;isolation:isolate;padding:clamp(7.5rem,14vh,9.5rem) 0 var(--sec);background:var(--night);color:var(--night-ink)}
.try .peak-glow{z-index:-1}
.try .kicker{color:var(--night-ink-3)}
.try .lede{color:var(--night-ink-2)}
.try .lede b{color:#fff}
.try-list{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.7rem}
.try-list li{position:relative;padding-left:1.4rem;font-size:.96rem;color:var(--night-ink-2);line-height:1.5}
.try-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent-2)}
.try-list b{color:#fff;font-weight:600}
.try-hint{font-size:.84rem;color:var(--night-ink-3);max-width:52ch;line-height:1.55}

/* text it (SMS preview) */
.sms-s{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center;grid-template-columns:minmax(0,1fr) 400px}
@media (max-width:900px){.sms-s{grid-template-columns:1fr}}
.sms-copy{display:grid;gap:1.3rem;align-content:start}
.sms-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.sms-chip{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:.5rem .8rem;font:500 .84rem var(--f-sans);cursor:pointer;
          display:inline-flex;align-items:center;gap:.45rem;transition:background-color .25s,color .25s,border-color .25s,transform .4s var(--ease)}
.sms-chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.sms-chip i{width:7px;height:7px;border-radius:50%;background:var(--c,#999)}
.sms-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sms-note{font-size:.84rem;color:var(--ink-3);max-width:46ch}
.sms-proof{padding-top:1.2rem;border-top:1px solid var(--line)}
.sms-proof-k{margin:0 0 .7rem;font:500 .68rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sms-proof .dl-ocard{margin:0 0 .9rem}
.sms-device{justify-self:center;width:min(392px,100%)}
.sms-phone{width:100%;aspect-ratio:392/780;background:linear-gradient(160deg,#2A2D33,#0C0D10 45%,#1B1D22);border-radius:54px;padding:12px;
           box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 60px 100px -40px rgba(11,13,18,.5)}
.sms-screen{position:relative;height:100%;border-radius:43px;overflow:hidden;background:#fff;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",var(--f-sans)}
.sms-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:112px;height:32px;background:#050608;border-radius:20px;z-index:2}
.sms-top{padding:54px 16px 12px;text-align:center;border-bottom:1px solid #E9E9EB;background:rgba(249,249,250,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;z-index:1}
.sms-avatar{width:50px;height:50px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:20px;background:#3B82F6}
.sms-who b{display:block;font-size:14px;font-weight:600;color:#0A1420}.sms-who span{display:block;font-size:11px;color:#8A8A8E;margin-top:2px}
.sms-thread{flex:1;min-height:0;overflow:auto;padding:14px 12px 8px;display:flex;flex-direction:column;gap:6px;background:#fff}
.sms-b{max-width:78%;padding:8px 12px;border-radius:18px;font-size:14.5px;line-height:1.35;word-wrap:break-word;animation:sms-in .35s var(--ease)}
@keyframes sms-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.sms-b.agent{align-self:flex-start;background:#E9E9EB;color:#0A1420;border-bottom-left-radius:5px}
.sms-b.user{align-self:flex-end;background:#1D6FF2;color:#fff;border-bottom-right-radius:5px}
.sms-b.sys{align-self:center;background:transparent;color:#B91C1C;font-size:12px;padding:2px 8px}
.sms-b.typing{display:flex;gap:4px;align-items:center;padding:11px 14px}
.sms-b.typing i{width:7px;height:7px;border-radius:50%;background:#9A9AA0;animation:sms-dot 1.2s infinite}
.sms-b.typing i:nth-child(2){animation-delay:.2s}.sms-b.typing i:nth-child(3){animation-delay:.4s}
@keyframes sms-dot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.sms-div{align-self:center;font-size:11px;color:#8A8A8E;margin:8px 0 2px}
.sms-bar{display:flex;gap:8px;align-items:center;padding:8px 10px 26px;border-top:1px solid #E9E9EB;background:#F9F9FA}
.sms-bar input{flex:1;font:inherit;font-size:16px;padding:8px 14px;border-radius:999px;border:1px solid #D9D9DE;background:#fff;color:#0A1420;outline:none;min-width:0}
.sms-bar input:focus{border-color:#1D6FF2}
.sms-bar input:disabled{background:#F0F0F2;color:#9A9AA0}
.sms-bar button{width:34px;height:34px;border-radius:50%;border:none;background:#1D6FF2;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.sms-bar button svg{width:16px;height:16px}.sms-bar button:disabled{background:#C9CCD3}

/* the phone that calls (reception + demo page) sits in this column */
.try-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:clamp(2.5rem,6vw,6rem);align-items:center}
@media (max-width:980px){.try-grid{grid-template-columns:1fr}}
.try-copy{display:grid;gap:1.3rem;align-content:center}
.proof-try{position:relative;justify-self:center;width:min(392px,100%)}
.proof-try::before{content:"";position:absolute;z-index:-1;inset:10% -20%;border-radius:50%;background:radial-gradient(closest-side,rgba(29,111,242,.35),transparent);filter:blur(30px)}
.proof-try .dl-proof{font-family:var(--f-sans)}
.proof-try .dl-proof[hidden]{display:none}
@media (min-width:1100px){.proof-try .dl-proof{position:absolute;right:-60px;bottom:-12px;width:330px;z-index:2}}
@media (max-width:1099px){.proof-try .dl-proof{margin:18px auto 0;width:min(392px,100%)}}

/* ---------------- the owner card + notification (v1 markup) ---------------- */
.dl-proof{margin:0;opacity:0;transform:translateY(18px) scale(.98);transition:opacity .7s var(--ease),transform .8s var(--spring);font-family:var(--f-sans);pointer-events:none;position:relative}
/* invisible is not gone: without this the hidden card sat over the call button and ate its clicks */
.dl-proof.show{opacity:1;transform:none;pointer-events:auto}
.dl-x{position:absolute;top:-12px;right:-12px;z-index:4;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);
      display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -12px rgba(11,13,18,.5);transition:transform .4s var(--ease),border-color .2s}
.dl-x:hover{transform:rotate(90deg);border-color:var(--ink-3)}
.dl-x svg{width:14px;height:14px}
.dl-notif{background:rgba(24,27,34,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;border-radius:20px;padding:12px 14px;
          display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08)}
.dl-notif img{width:34px;height:34px;border-radius:9px}
.dl-notif b{display:block;font-size:13.5px;font-weight:600}
.dl-notif span{font-size:12.5px;color:rgba(255,255,255,.7);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-notif time{font-size:11px;color:rgba(255,255,255,.5);align-self:start}
.dl-ocard{margin-top:10px;background:#161618;color:#F3F3F1;border:1px solid #2a2a2e;border-radius:20px;padding:14px 14px 12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.dl-ocard.em{border-color:rgba(255,95,95,.5)}
.dl-ocard .r1{display:flex;align-items:baseline;gap:10px}
.dl-ocard .nm{font-size:20px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-ocard time{color:#9A9AA2;font-size:13px}
.dl-ocard .r2{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:15.5px}
.dl-ocard .dot{width:9px;height:9px;border-radius:50%;background:var(--c,#999);flex:none}
.dl-ocard .svc{font-weight:600}.dl-ocard .cty{color:#9A9AA2}
.dl-ocard .sum{margin:7px 0 0;color:#B9B9C0;font-size:14px;line-height:1.4}
.dl-ocard .badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.dl-ocard .badge{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 7px;border-radius:6px;background:#232327;color:#B9B9C0}
.dl-ocard .badge.em{background:rgba(255,95,95,.16);color:#FF7A7A}.dl-ocard .badge.today{background:rgba(255,176,32,.18);color:#FFB020}
.dl-ocard .acts2{display:flex;gap:7px;margin-top:11px}
.dl-ocard .b{flex:1;text-align:center;border-radius:11px;padding:11px 0;font-size:14px;font-weight:700;background:#232327;color:#fff}
.dl-ocard .b.call{background:#30D158;color:#04140a;flex:1.4}
.dl-cap{margin:12px 2px 0;color:var(--ink-2);font-size:.86rem;line-height:1.45;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.dl-cap b{color:var(--ink)}
.dl-sh{display:inline-block;color:#9A9AA2}.dl-sh::after{content:"\2026";animation:dl-dots 1.2s steps(4) infinite}
@keyframes dl-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.dl-proof .acts,.dl-proof .dl-acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:12px}

/* ================= THE DEMO PHONE — the original Veylen Answer web phone (v1, unchanged) =================
   Dark glass, champagne serif, the green ☎ that rings. Scoped under .vp so
   the site's light system never leaks in. */
.vp{--vp-ink:#F2EEE6;--vp-muted:#8B877F;--vp-champ:#E6D5B8;--vp-green:#30D158;--vp-red:#FF453A;
    width:min(390px,100%);aspect-ratio:390/812;margin:0 auto;position:relative;background:#141414;border-radius:52px;padding:12px;
    box-shadow:0 40px 100px rgba(0,0,0,.45),0 24px 48px -24px rgba(10,21,45,.35),inset 0 0 0 1px #2a2a2a;
    color:var(--vp-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;text-align:left}
.vp-screen{position:relative;height:100%;border-radius:42px;background:linear-gradient(180deg,#101013 0%,#0B0B0D 100%);overflow:hidden;display:flex;flex-direction:column;padding:14px 20px 22px}
.vp-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:110px;height:30px;background:#141414;border-radius:20px}
.vp-sb{display:flex;justify-content:space-between;font-size:13px;color:var(--vp-muted);padding:6px 8px 0;font-weight:600}
.vp-view{flex:1;display:flex;flex-direction:column;min-height:0}
.vp [hidden]{display:none!important}
.vp-kicker{margin:36px 0 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--vp-muted)}
.vp-h{margin:0;font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;font-size:34px;line-height:1.05;letter-spacing:0;color:var(--vp-champ);text-wrap:balance}
.vp-sub{margin:10px 0 0;color:var(--vp-muted);font-size:14px;line-height:1.45}
.vp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.vp-chip{border:1px solid #2a2a2a;background:#121214;color:var(--vp-ink);border-radius:999px;padding:8px 12px;font-size:13px;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:border-color .18s,background .18s}
.vp-chip i{width:8px;height:8px;border-radius:50%;background:var(--c,#888)}
.vp-chip.on{border-color:var(--vp-champ);background:#1a1712}
.vp-spacer{flex:1}
.vp-call{align-self:center;width:84px;height:84px;border-radius:50%;border:none;background:var(--vp-green);color:#04140a;font-size:34px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 0 rgba(48,209,88,.5);animation:vp-ring 2.2s infinite}
.vp-call:disabled{animation:none;opacity:.6;cursor:default}
@keyframes vp-ring{0%{box-shadow:0 0 0 0 rgba(48,209,88,.45)}70%{box-shadow:0 0 0 22px rgba(48,209,88,0)}100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}}
.vp-hint{text-align:center;font-size:12px;color:var(--vp-muted);margin:14px 0 0;line-height:1.4}
.vp-hint.is-err{color:#ff8a8a}
.vp-ok{color:var(--vp-green)}
.vp-allow{align-self:center;display:inline-flex;align-items:center;gap:10px;border:none;border-radius:999px;background:var(--vp-champ);color:#1a1408;font-family:inherit;font-size:15px;font-weight:600;line-height:1;padding:16px 26px;cursor:pointer;box-shadow:0 0 0 0 rgba(230,213,184,.45);animation:vp-ring-c 2.2s infinite;transition:transform .2s var(--ease)}
.vp-allow:hover{transform:translateY(-1px)}
.vp-allow:disabled{animation:none;opacity:.7;cursor:default;transform:none}
.vp-allow svg{width:18px;height:18px}
@keyframes vp-ring-c{0%{box-shadow:0 0 0 0 rgba(230,213,184,.4)}70%{box-shadow:0 0 0 18px rgba(230,213,184,0)}100%{box-shadow:0 0 0 0 rgba(230,213,184,0)}}
.vp-avatar{align-self:center;margin:26px 0 8px;width:96px;height:96px;border-radius:50%;background:#1b1915;border:1px solid #2e2a22;display:grid;place-items:center;position:relative}
.vp-avatar span{width:14px;height:14px;border-radius:50%;background:var(--vp-champ);transition:transform .15s}
.vp-avatar.talking span{animation:vp-pulse .7s ease-in-out infinite}
.vp-avatar.talking{box-shadow:0 0 0 10px rgba(230,213,184,.08),0 0 0 22px rgba(230,213,184,.04)}
@keyframes vp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(2.2)}}
.vp-state{text-align:center;margin:4px 0 0;font-size:14px;color:var(--vp-muted);min-height:18px}
.vp-timer{text-align:center;margin:2px 0 0;font-variant-numeric:tabular-nums;font-size:15px;color:var(--vp-ink)}
.vp-tr{flex:1;min-height:0;overflow:auto;margin:14px 0 0;padding:0 2px;font-size:13.5px;line-height:1.4;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px)}
.vp-t{margin:0 0 8px;padding:8px 11px;border-radius:14px;max-width:92%}
.vp-t.agent{background:#1a1712;color:var(--vp-champ);border-bottom-left-radius:4px}
.vp-t.user{background:#1b1b1f;color:var(--vp-ink);margin-left:auto;border-bottom-right-radius:4px}
.vp-end{align-self:center;margin-top:12px;width:66px;height:66px;border-radius:50%;border:none;background:var(--vp-red);color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center}
.vp-preview{margin:16px 0 0;background:#111114;border:1px solid #232327;border-radius:18px;padding:14px 14px 12px}
.vp-preview .n{font-size:20px;font-weight:700;color:#fff}
.vp-preview .s{color:var(--vp-muted);font-size:14px;margin-top:4px}
.vp-preview .sum{margin-top:10px;font-size:14px;line-height:1.45;color:var(--vp-ink)}
.vp-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:6px;margin:10px 6px 0 0;background:#26262a;color:#ddd}
.vp-badge.em{background:#3a1416;color:#ff7b7b}.vp-badge.today{background:#3a2b10;color:#ffc466}
.vp-sh{color:var(--vp-muted);font-size:13px}.vp-sh::after{content:"\2026";animation:vp-dots 1.2s steps(4) infinite}
@keyframes vp-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.vp-link{display:block;margin:16px 0 0;text-align:center;color:var(--vp-champ);text-decoration:none;font-size:15px}
.vp-ghost{margin:10px auto 0;background:transparent;border:1px solid #2a2a2a;color:var(--vp-ink);border-radius:999px;padding:10px 18px;font-size:14px;font-family:inherit;cursor:pointer}
.vp-err{margin:12px 0 0;color:#ff8a8a;font-size:13px;text-align:center}
@media (prefers-reduced-motion:reduce){.vp *{animation:none!important}}

/* ================= /reception/demo/ ================= */
.dl-page{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;padding:clamp(8rem,15vh,10rem) 0 clamp(3rem,6vw,5rem);background:var(--night);color:var(--night-ink)}
.dl-page .peak-glow{z-index:-1}
.dl-page .kicker{color:var(--night-ink-3)}
.dl-page .lede{color:var(--night-ink-2)}
.dl-page h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:#fff;letter-spacing:-.01em}
.dl-steps{list-style:none;padding:0;margin:.4rem 0 0;display:grid;gap:.6rem;max-width:540px}
.dl-steps li{display:grid;grid-template-columns:42px 1fr;gap:.6rem;align-items:baseline;background:rgba(255,255,255,.04);border:1px solid var(--night-line);border-radius:16px;padding:.9rem 1rem}
.dl-steps .n{font:500 .66rem var(--f-mono);letter-spacing:.14em;color:var(--accent-2)}
.dl-steps b{font-weight:600;color:#fff}.dl-steps span{color:var(--night-ink-2);font-size:.94rem}
.dl-trust{margin:0;display:flex;flex-wrap:wrap;gap:.45rem}
.dl-trust span{font:500 .72rem/1 var(--f-mono);padding:.6rem .8rem;border-radius:99px;border:1px solid var(--night-line);color:var(--night-ink-2)}
.dl-tiny{font-size:.84rem;color:var(--night-ink-3);max-width:50ch;line-height:1.55}
.dl-tiny a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.dl-device{position:relative;justify-self:center;width:min(392px,100%)}
.dl-device::before{content:"";position:absolute;z-index:-1;inset:10% -20%;border-radius:50%;background:radial-gradient(closest-side,rgba(29,111,242,.35),transparent);filter:blur(30px)}
@media (min-width:1100px){.dl-device .dl-proof{position:absolute;right:-60px;bottom:-12px;width:330px;z-index:2}}
@media (max-width:1099px){.dl-device .dl-proof{margin:18px auto 0;width:min(392px,100%)}}
.dl-proof .dl-cap{background:rgba(255,255,255,.96)}

/* ================= LEGAL ================= */
.legal{max-width:70ch;padding:clamp(1rem,3vw,2rem) 0 var(--sec)}
.legal h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;margin:2.4rem 0 .6rem;color:var(--ink)}
.legal h3:first-child{margin-top:0}
.legal p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.75}
.legal p + p{margin-top:.9rem}
.legal a{text-decoration:underline;text-underline-offset:3px;font-weight:500}

/* ================= 404 ================= */
.nf{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:8rem 0 4rem;
    background:radial-gradient(60% 60% at 50% 40%,#fff,var(--bg-2))}
.nf .wrap{display:grid;justify-items:center;gap:1.3rem}
.nf-v{width:clamp(90px,14vw,150px);height:auto;fill:var(--ink);opacity:.9;animation:nf-float 6s ease-in-out infinite}
@keyframes nf-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.nf .acts{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem}

/* ---------------- buttons on dark ground ---------------- */
.peak .btn--primary,.try .btn--primary,.dl-page .btn--primary,.ph--dark .btn--primary{background:#fff;color:var(--ink);--fill:var(--accent);box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
.peak .btn--primary:hover,.try .btn--primary:hover,.dl-page .btn--primary:hover,.ph--dark .btn--primary:hover{color:#fff}
.peak .btn--primary .ico,.try .btn--primary .ico,.dl-page .btn--primary .ico{background:var(--ink);color:#fff}
.peak .btn--primary:hover .ico,.try .btn--primary:hover .ico,.dl-page .btn--primary:hover .ico{background:rgba(255,255,255,.18)}
.peak .btn--glass,.try .btn--glass,.dl-page .btn--glass,.ph--dark .btn--glass{background:rgba(255,255,255,.06);color:var(--night-ink);border-color:rgba(255,255,255,.16);--fill:#fff}
.peak .btn--glass:hover,.try .btn--glass:hover,.dl-page .btn--glass:hover,.ph--dark .btn--glass:hover{color:var(--ink);border-color:#fff}
.try .btn-line,.dl-page .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.2)}