/* Collatero — "Bold & Airy". Layout: 12-col grid, 1440 max, 110px-at-1920 margins; every section is a ground with a drifting glow; type is the hero. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../assets/brand/fonts/manrope-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../assets/brand/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --blue:#0033E7; --cyan:#00E1FF; --navy:#001B66; --sky:#1E8BFF; --deep:#000C33;
  --paper:#F3F5F9; --white:#FFFFFF; --lime:#B5FF2E; --ink:#0B1020;
  --out:cubic-bezier(.16,1,.3,1); --soft:cubic-bezier(.2,.7,.2,1); --inout:cubic-bezier(.7,0,.2,1); --in:cubic-bezier(.6,0,.85,.4);
  --land:cubic-bezier(.34,1.5,.64,1);
  --f:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --m:clamp(20px,5.7vw,110px);
  --fs-giant:clamp(72px,13vw,260px);
  --fs-display:clamp(48px,7.4vw,140px);
  --fs-soft:clamp(40px,5.4vw,108px);
  --fs-h3:clamp(24px,2.4vw,38px);
  --fs-lead:clamp(18px,1.55vw,26px);
  --cut-shadow:drop-shadow(0 24px 30px rgba(0,8,40,.35));
  --nav-h:84px;
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px;background:var(--navy)}
body{margin:0;font-family:var(--f);font-size:17px;font-weight:500;line-height:1.6;color:var(--navy);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;font-optical-sizing:auto}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
:focus-visible{outline:3px solid var(--focus,var(--cyan));outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;inset-inline-start:16px;top:-80px;z-index:100;background:var(--cyan);color:var(--navy);padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;transition:top .3s var(--out)}
.skip:focus{top:16px}
.wrap{width:100%;max-width:calc(1440px + 2 * var(--m));margin-inline:auto;padding-inline:var(--m);position:relative}

/* ---------- grounds: every section is a ground, every ground has a glow ---------- */
.ground{position:relative;isolation:isolate;background-color:var(--bg);color:var(--fg);overflow:clip}
.ground::before{content:"";position:absolute;inset:-4%;z-index:-2;pointer-events:none;background-image:var(--glow);animation:drift 21s linear infinite alternate}
@keyframes drift{from{transform:translate3d(-1.5%,-1.2%,0)}to{transform:translate3d(1.5%,1.2%,0)}}
.g-paper{--bg:var(--paper);--fg:var(--navy);--accent:var(--blue);--rule:var(--cyan);--focus:var(--cyan);--btn-bg:var(--blue);--btn-fg:#fff;--btn-glow:rgba(0,51,231,.45);--ul:var(--cyan);--check:var(--blue);--check-fg:#fff;--soft-fg:rgba(0,27,102,.72);--line:rgba(0,27,102,.12);--tone:light;
  --glow:radial-gradient(70% 55% at 50% 120%,rgba(30,139,255,.30),transparent 70%),radial-gradient(40% 35% at 78% 112%,rgba(0,225,255,.28),transparent 70%)}
.g-blue{--bg:var(--blue);--fg:#fff;--accent:var(--cyan);--rule:var(--cyan);--focus:var(--cyan);--btn-bg:var(--cyan);--btn-fg:var(--navy);--btn-glow:rgba(0,225,255,.5);--ul:var(--cyan);--check:var(--lime);--check-fg:var(--navy);--soft-fg:rgba(255,255,255,.82);--line:rgba(255,255,255,.18);
  --glow:radial-gradient(60% 70% at 96% 106%,rgba(30,139,255,.85),transparent 65%),radial-gradient(22% 26% at 86% 94%,rgba(0,225,255,.40),transparent 70%),radial-gradient(55% 60% at -6% -12%,rgba(0,27,102,.65),transparent 70%)}
.g-cyan{--bg:var(--cyan);--fg:var(--navy);--accent:var(--blue);--rule:var(--blue);--focus:var(--blue);--btn-bg:var(--navy);--btn-fg:#fff;--btn-glow:rgba(0,27,102,.45);--ul:var(--blue);--check:var(--blue);--check-fg:#fff;--soft-fg:rgba(0,27,102,.8);--line:rgba(0,27,102,.16);
  --glow:radial-gradient(70% 55% at 45% 122%,rgba(255,255,255,.65),transparent 70%),radial-gradient(45% 45% at 102% -4%,rgba(30,139,255,.45),transparent 70%)}
.g-navy{--bg:var(--navy);--fg:#fff;--accent:var(--cyan);--rule:var(--cyan);--focus:var(--cyan);--btn-bg:var(--cyan);--btn-fg:var(--navy);--btn-glow:rgba(0,225,255,.45);--ul:var(--cyan);--check:var(--lime);--check-fg:var(--navy);--soft-fg:rgba(255,255,255,.8);--line:rgba(255,255,255,.16);
  --glow:radial-gradient(70% 60% at 50% 122%,rgba(0,51,231,.85),transparent 70%),radial-gradient(50% 50% at -4% -6%,rgba(0,12,51,.80),transparent 70%)}
.g-deep{--bg:var(--deep);--fg:#fff;--accent:var(--cyan);--rule:var(--cyan);--focus:var(--cyan);--btn-bg:var(--cyan);--btn-fg:var(--navy);--btn-glow:rgba(0,225,255,.45);--ul:var(--cyan);--check:var(--lime);--check-fg:var(--navy);--soft-fg:rgba(255,255,255,.8);--line:rgba(255,255,255,.16);
  --glow:radial-gradient(55% 55% at 50% 56%,rgba(0,51,231,.55),transparent 70%)}
/* the one-beat lime flash inside the pinned problem scene; never a resting ground */
.g-lime{--bg:var(--lime);--fg:var(--navy);--accent:var(--blue);--rule:var(--navy);--focus:var(--navy);--check:var(--navy);--soft-fg:var(--navy);--glow:none}

/* ---------- type ---------- */
.t-giant{font-size:var(--fs-giant);font-weight:800;letter-spacing:-.045em;line-height:.92}
.t-display{font-size:var(--fs-display);font-weight:800;letter-spacing:-.045em;line-height:.98}
.t-soft{font-size:var(--fs-soft);font-weight:500;letter-spacing:-.035em;line-height:1.02}
.t-soft .pay{font-weight:800}
.t-h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.lead{font-size:var(--fs-lead);font-weight:500;line-height:1.45;max-width:33em;color:var(--soft-fg,inherit)}
.pay{color:var(--accent)}
.pay--lime{color:var(--lime)}
.eyebrow{display:flex;align-items:center;gap:16px;margin:0 0 clamp(20px,2.4vw,32px);font-size:13px;font-weight:600;letter-spacing:.3em;line-height:1.3;text-transform:uppercase}
.eyebrow::before{content:"";flex:none;width:40px;height:3px;border-radius:2px;background:var(--rule);transform-origin:left center}
.tag{font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;opacity:.7}

/* ---------- motion building blocks ---------- */
.mu .ln{display:block}
.mu .w{display:inline-block;will-change:transform}
/* per-word mask: the clip travels opposite to the word, so each word stays masked even when a line wraps */
.js .mu .w{transform:translateY(108%);clip-path:inset(-108% -14% 108% -14%);transition:transform .7s var(--out) calc(var(--i,0) * 30ms + var(--d,0ms)),clip-path .7s var(--out) calc(var(--i,0) * 30ms + var(--d,0ms))}
.js .is-in .mu .w,.js .mu.is-in .w{transform:none;clip-path:inset(-30% -14% -30% -14%)}
.js .blur{opacity:0;filter:blur(12px);transform:translateY(12px);transition:opacity .6s var(--soft) var(--d,0ms),filter .6s var(--soft) var(--d,0ms),transform .6s var(--soft) var(--d,0ms)}
.js .is-in .blur,.js .blur.is-in{opacity:1;filter:none;transform:none}
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .6s var(--soft) var(--d,0ms),transform .7s var(--out) var(--d,0ms)}
.js .is-in .rise,.js .rise.is-in{opacity:1;transform:none}
.js .eyebrow::before{transform:scaleX(0);transition:transform .5s var(--out) var(--d,0ms)}
.js .eyebrow span{opacity:0;transition:opacity .5s var(--soft) calc(var(--d,0ms) + 220ms)}
.js .is-in .eyebrow::before,.js .eyebrow.is-in::before{transform:none}
.js .is-in .eyebrow span,.js .eyebrow.is-in span{opacity:1}

/* floating + drift helpers */
.fl{animation:float var(--fd,7s) ease-in-out var(--fdl,0s) infinite alternate}
@keyframes float{from{translate:0 calc(var(--fa,12px) * -1)}to{translate:0 var(--fa,12px)}}
.px{will-change:transform}

/* ---------- buttons ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:60px;padding-inline:30px;border:0;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:700 17px/1 var(--f);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;overflow:hidden;box-shadow:0 12px 30px -14px var(--btn-glow);transition:transform .5s var(--out),box-shadow .5s var(--out),translate .5s var(--out)}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 47%,rgba(255,255,255,.15) 55%,transparent 68%);transform:translateX(-110%);transition:transform .9s var(--soft)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.btn:hover{box-shadow:0 22px 44px -16px var(--btn-glow)}
.btn:hover::before{transform:translateX(110%)}
.btn:active{transform:scale(.97)}
.btn--sm{height:46px;padding-inline:22px;font-size:15px}
.btn .arr{transition:transform .45s var(--out)}
.btn:hover .arr{transform:translateX(4px)}
.tlink{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 0 6px;border:0;background:none;color:var(--fg);font:700 17px/1.2 var(--f);text-decoration:none;cursor:pointer;white-space:nowrap}
.tlink::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--ul);transform-origin:right center;transition:transform .45s var(--inout)}
.tlink:hover::after{animation:ul .8s var(--inout)}
@keyframes ul{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.tlink .arr{display:inline-block;transition:transform .45s var(--out)}
.tlink:hover .arr{transform:translateX(5px)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}

/* ---------- glass (from the video build) ---------- */
.gl{--r:28px;position:relative;isolation:isolate;border-radius:var(--r)}
.gl>.g-b,.gl>.g-e,.gl>.g-s,.gl>.g-p{position:absolute;inset:0;border-radius:var(--r);pointer-events:none}
.gl>.g-b{z-index:-1;background:linear-gradient(140deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 38%,rgba(255,255,255,.05) 62%,rgba(255,255,255,.16) 100%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -40px 80px rgba(0,225,255,.10),inset 0 30px 60px rgba(255,255,255,.06);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.gl>.g-e{z-index:3;padding:2px;background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.25) 30%,rgba(255,255,255,.06) 55%,rgba(255,255,255,.18) 80%,rgba(160,240,255,.75));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.gl>.g-s{z-index:3;overflow:hidden}
.gl>.g-s::before{content:"";position:absolute;left:-30%;top:-60%;width:46%;height:220%;transform:translateX(calc(var(--sx,0) * 60%)) rotate(28deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22) 45%,rgba(255,255,255,.04) 70%,rgba(255,255,255,0));transition:transform .9s var(--soft)}
.gl>.g-s::after{content:"";position:absolute;left:4%;top:-50%;width:12%;height:200%;transform:translateX(calc(var(--sx,0) * 90%)) rotate(28deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14),rgba(255,255,255,0));transition:transform .9s var(--soft)}
/* hover shine: a bright band sweeps once across the glass + a soft spotlight follows the pointer */
.gl>.g-p{z-index:3;overflow:hidden;opacity:0;transition:opacity .5s var(--soft);background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 45%)}
.gl>.g-p::before{content:"";position:absolute;top:-60%;left:-40%;width:28%;height:220%;transform:rotate(24deg) translateX(0);background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
.gl:hover>.g-p{opacity:1}
.gl:hover>.g-p::before{animation:sweep 1.1s var(--soft) 1}
@keyframes sweep{from{transform:rotate(24deg) translateX(0)}to{transform:rotate(24deg) translateX(620%)}}
.gl>:not(i){position:relative;z-index:1}
.gl--light>.g-b{background:linear-gradient(150deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 40%,rgba(226,234,255,.62) 75%,rgba(255,255,255,.8) 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95),inset 0 -24px 50px rgba(0,51,231,.07),inset 0 18px 40px rgba(255,255,255,.5)}
.gl--light>.g-e{background:linear-gradient(140deg,#fff,rgba(0,51,231,.22) 35%,rgba(0,27,102,.14) 65%,rgba(0,225,255,.65))}
.gl--light>.g-s::before{left:-25%;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55) 45%,rgba(255,255,255,0))}
.gl--light>.g-s::after{display:none}
.gl--light>.g-p{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.5),transparent 45%)}
/* soft alpha shadow under glass objects (never a rectangular frame) */
.gl--shadow::after{content:"";position:absolute;inset:10% 7% -5%;z-index:-2;border-radius:var(--r);background:rgba(0,8,40,.5);filter:blur(38px);pointer-events:none}
.g-paper .gl--shadow::after,.g-cyan .gl--shadow::after{background:rgba(0,27,102,.28)}
/* glass chip */
.chip{--r:999px;display:inline-flex;align-items:center;gap:10px;height:46px;padding-inline:18px;font:700 15px/1 var(--f);white-space:nowrap}

/* ---------- cut-outs: objects on the ground, never containers ---------- */
.cut{position:relative;display:block;flex:none;height:calc(var(--h,240px) * var(--k,1));aspect-ratio:var(--ar,3/4);rotate:var(--rot,0deg);transition:rotate .6s var(--out)}
.cut .ci{position:absolute;inset:0;transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));filter:var(--cut-shadow);transition:transform .6s var(--out),filter .6s var(--out)}
.cut img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.cut .sh{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.7) 47%,rgba(255,255,255,.12) 55%,transparent 66%) no-repeat;background-size:260% 100%;background-position:130% 0;opacity:0;transition:background-position 1.05s var(--soft),opacity .35s}
.cut:hover .sh,.cut.is-shine .sh{background-position:-30% 0;opacity:1}
.cut:hover{rotate:calc(var(--rot,0deg) * .25);z-index:5}
.cut:hover .ci{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-10px) scale(1.06);filter:drop-shadow(0 40px 40px rgba(0,8,40,.42))}
.js .cut.pop{scale:0}
.js .is-in .cut.pop{animation:pop .5s var(--out) calc(var(--i,0) * 30ms + var(--d,0ms)) both}
.js .cut.pop.is-popped{scale:1;animation:none}
@keyframes pop{0%{scale:0;rotate:calc(var(--rot,0deg) + 14deg)}64%{scale:1.08}100%{scale:1;rotate:var(--rot,0deg)}}
.sample{display:flex;align-items:center;gap:12px}
.sample::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* check icon */
.ck{flex:none;width:28px;height:28px;margin-top:-1px}
.ck circle{fill:var(--check)}
.ck path{fill:none;stroke:var(--check-fg);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.js .ck-pop .ck{scale:0}
.js .is-in .ck-pop .ck,.js .ck-pop.is-in .ck{animation:ckpop .45s var(--out) calc(var(--ci,0) * 60ms + var(--d,0ms)) both}
@keyframes ckpop{0%{scale:0}65%{scale:1.08}100%{scale:1}}

/* ---------- nav ---------- */
.nav{position:fixed;inset-inline:0;top:0;z-index:60;padding-top:env(safe-area-inset-top,0px);color:#fff;--focus:var(--cyan)}
.nav-bar{position:relative;height:var(--nav-h);transition:height .5s var(--out)}
.nav.is-scrolled .nav-bar{height:70px}
.nav-glass{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--soft),background .35s;background:linear-gradient(180deg,rgba(0,27,102,.62),rgba(0,27,102,.42));-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.08)}
.nav.is-scrolled .nav-glass{opacity:1}
.nav[data-tone="light"]{color:var(--navy);--focus:var(--blue)}
.nav[data-tone="light"] .nav-glass{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(243,245,249,.66));box-shadow:inset 0 -1px 0 rgba(0,27,102,.10),0 10px 30px -20px rgba(0,27,102,.35)}
.nav-in{height:100%;display:flex;align-items:center;gap:28px}
.nav-logo{display:block;position:relative;width:150px;height:32px;flex:none}
.nav-logo img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s}
.nav-logo .logo-b{opacity:0}
.nav[data-tone="light"] .logo-w{opacity:0}
.nav[data-tone="light"] .logo-b{opacity:1}
.nav-links{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.nav-link{display:inline-flex;align-items:center;gap:8px;height:44px;padding-inline:16px;border:0;border-radius:999px;background:none;font:700 15px/1 var(--f);text-decoration:none;cursor:pointer;position:relative;transition:background .3s}
.nav-link:hover,.nav-link[aria-expanded="true"]{background:rgba(255,255,255,.12)}
.nav[data-tone="light"] .nav-link:hover,.nav[data-tone="light"] .nav-link[aria-expanded="true"]{background:rgba(0,51,231,.08)}
.nav-link svg{width:12px;height:12px;transition:rotate .4s var(--out)}
.nav-link[aria-expanded="true"] svg{rotate:180deg}
.nav-cta{--btn-bg:var(--cyan);--btn-fg:var(--navy);--btn-glow:rgba(0,225,255,.5);margin-inline-start:8px}

.nav[data-tone="light"] .nav-cta{--btn-bg:var(--blue);--btn-fg:#fff;--btn-glow:rgba(0,51,231,.45)}
.nav-burger{display:none;width:48px;height:48px;margin-inline-start:auto;border:0;border-radius:50%;background:rgba(255,255,255,.12);cursor:pointer;position:relative}
.nav[data-tone="light"] .nav-burger{background:rgba(0,51,231,.08)}
.nav-burger span{position:absolute;left:14px;right:14px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .45s var(--out),top .45s var(--out)}
.nav-burger span:nth-child(1){top:18px}.nav-burger span:nth-child(2){top:27px}
.nav-burger[aria-expanded="true"] span:nth-child(1){top:23px;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){top:23px;transform:rotate(-45deg)}
.nav-progress{position:absolute;left:0;right:0;bottom:0;height:3px;display:none}
.nav-progress i{position:absolute;inset:0;background:var(--cyan);transform-origin:left;transform:scaleX(var(--p,0))}
/* mega-menu */
.mega{position:absolute;top:calc(100% + 10px);left:50%;width:min(1120px,calc(100vw - 2 * var(--m)));translate:-50% 0;--r:28px;color:#fff;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s var(--soft),transform .5s var(--out),visibility 0s .35s}
.mega.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--soft),transform .5s var(--out),visibility 0s}
.mega>.g-b{background:linear-gradient(140deg,rgba(0,51,231,.88),rgba(0,27,102,.92) 55%,rgba(0,12,51,.94));-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 40px 80px -30px rgba(0,8,40,.6)}
.mega-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:18px}
.mega-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:10px 14px 6px}
.mega a.mi{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:18px;text-decoration:none;position:relative;overflow:hidden;transition:background .3s}
.mega a.mi:hover,.mega a.mi:focus-visible{background:rgba(255,255,255,.08)}
.mega a.mi::after{content:"";position:absolute;top:-50%;left:-60%;width:30%;height:200%;rotate:24deg;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transition:left .9s var(--soft)}
.mega a.mi:hover::after{left:130%}
.mi-team{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.mi-hook{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
/* mobile menu */
.mmenu{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;padding:calc(96px + env(safe-area-inset-top,0px)) max(var(--m),env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(var(--m),env(safe-area-inset-left,0px));overflow-y:auto;clip-path:circle(0 at calc(100% - 44px) 42px);visibility:hidden;transition:clip-path .7s var(--inout),visibility 0s .7s}
.mmenu.is-open{clip-path:circle(150% at calc(100% - 44px) 42px);visibility:visible;transition:clip-path .7s var(--inout),visibility 0s}
.mmenu-main{display:flex;flex-direction:column;gap:6px;margin-bottom:34px}
.mmenu-main a{font-size:clamp(34px,9vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.1;text-decoration:none}
.mmenu-teams{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:16px 0 34px;padding:0;list-style:none}
.mmenu-teams a{font-weight:700;text-decoration:none;font-size:17px}
.mmenu .btn{align-self:flex-start}

/* ---------- vertical progress rail ---------- */
.rail{position:fixed;inset-inline-end:max(20px,env(safe-area-inset-right,0px));top:50%;z-index:45;height:min(62vh,560px);width:22px;translate:0 -50%;color:#fff;transition:color .4s,opacity .4s}
.rail[data-tone="light"]{color:var(--navy)}
.rail-track,.rail-fill{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;border-radius:2px}
.rail-track{background:currentColor;opacity:.2}
.rail-fill{background:var(--cyan);transform-origin:top;transform:scaleY(var(--p,0));box-shadow:0 0 12px rgba(0,225,255,.6)}
.rail[data-tone="light"] .rail-fill{background:var(--blue);box-shadow:none}
.rail-mk{position:absolute;left:50%;top:var(--y);width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;border:0;background:none;cursor:pointer;color:inherit}
.rail-mk::before{content:"";position:absolute;inset:6px;border-radius:50%;background:currentColor;opacity:.45;transition:transform .45s var(--out),opacity .3s,background .3s}
.rail-mk.sub::before{inset:8px;opacity:.3}
.rail-mk.is-passed::before{opacity:1;background:var(--cyan)}
.rail[data-tone="light"] .rail-mk.is-passed::before{background:var(--blue)}
.rail-mk.is-active::before{transform:scale(1.5);box-shadow:0 0 0 4px rgba(0,225,255,.25)}
.rail-lb{position:absolute;right:calc(100% + 10px);top:50%;translate:0 -50%;padding:7px 12px;border-radius:999px;white-space:nowrap;font:700 12px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);background:rgba(255,255,255,.92);box-shadow:0 8px 24px -10px rgba(0,8,40,.45);opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .3s,transform .45s var(--out)}
.rail[data-tone="light"] .rail-lb{background:var(--navy);color:#fff}
.rail-mk:hover .rail-lb,.rail-mk:focus-visible .rail-lb,.rail-mk.is-flash .rail-lb{opacity:1;transform:none}
.rail-pct{position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;font:700 11px/1 var(--f);letter-spacing:.08em;font-variant-numeric:tabular-nums;opacity:.7}

/* ---------- super C ---------- */
.superc{position:absolute;top:-10%;left:100%;height:120%;width:auto;aspect-ratio:88.53/87.78;z-index:-1;fill:var(--cyan);pointer-events:none;transform:translateX(-46%);transition:transform .9s var(--out)}
.js .superc{transform:translateX(-21%) rotate(-14deg)}
.js .is-in>.superc,.js .superc.is-in{transform:translateX(-46%)}
.superc-wrap{position:absolute;inset:0;z-index:-1;pointer-events:none}

/* ---------- hero ---------- */
.hero{min-height:max(740px,100vh);min-height:max(740px,100svh);display:flex;align-items:center;padding-block:calc(var(--nav-h) + 56px) 96px}
.hero-grid{display:grid;grid-template-columns:minmax(0,6.4fr) minmax(0,5.6fr);gap:clamp(28px,3vw,56px);align-items:center;width:100%}
.hero h1{font-size:clamp(48px,6.4vw,104px);white-space:nowrap;margin-bottom:clamp(24px,2.6vw,40px)}
.hero .lead{margin-bottom:clamp(30px,3vw,44px);max-width:30em}
.hero-media{position:relative;margin-inline-end:calc(var(--m) * -.35)}
.hero-media .vframe{z-index:2}
.hp{position:absolute;z-index:3;pointer-events:auto}
.hp .cut{--k:1}
.hp--inv{left:-15%;top:-30%;--h:clamp(130px,13vw,250px)}
.hp--badge{right:-4%;top:-36%;--h:clamp(120px,11vw,210px)}
.hp--cert{left:-7%;bottom:-27%;--h:clamp(90px,9vw,170px)}
.hp--mug{right:-3%;bottom:-28%;--h:clamp(96px,9vw,170px)}
.hp--chip{left:7%;bottom:-17%;z-index:4}
.chip-time>.g-b{background:linear-gradient(140deg,rgba(0,27,102,.62),rgba(0,51,231,.42))}
.hp .cut .ci{filter:drop-shadow(0 30px 34px rgba(0,8,40,.45))}
.chip-time{color:#fff}
.chip-time svg{width:20px;height:20px;color:var(--cyan)}
.scroll-cue{position:absolute;left:var(--m);bottom:28px;display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;opacity:.75;text-decoration:none}
.scroll-cue i{position:relative;width:2px;height:44px;background:rgba(255,255,255,.25);overflow:hidden;border-radius:2px}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--cyan);animation:cue 2.2s var(--inout) infinite}
@keyframes cue{to{top:110%}}

/* ---------- video frame ---------- */
.vframe{--r:28px;padding:14px}
.vframe>.vf-in{position:relative}
.vf-screen{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--deep);container-type:inline-size}
.vf-screen>img,.vf-screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vf-pill{position:absolute;left:clamp(12px,2.2cqw,28px);bottom:clamp(12px,2.2cqw,28px);z-index:4;--r:999px;height:44px;padding-inline:16px 20px;gap:10px;border:0;background:none;color:#fff;cursor:pointer;font:700 14px/1 var(--f)}
.vf-pill .pl{width:24px;height:24px;border-radius:50%;background:var(--cyan);display:grid;place-items:center}
.vf-pill .pl svg{width:10px;height:10px;fill:var(--navy);margin-left:2px}
.vf-pill[disabled]{cursor:default}
.vf-pill[disabled] .pl{background:rgba(255,255,255,.22)}
.vf-pill[disabled] .pl svg{fill:#fff}
.vf-soon{position:absolute;inset:0}
.js .is-in .vf-soon .superc{transform:translateX(-46%)}
.hero-frame[data-ready="false"] .vf-pill{display:none}
.vf-soon .vs-c{fill:var(--vs-c,var(--cyan))}
.g-paper .vf-soon,.g-cyan .vf-soon{--vs-c:var(--blue)}
.vf-soon .vs-title{position:absolute;left:clamp(14px,4cqw,44px);top:clamp(14px,4.4cqw,48px);max-width:46%;font-size:clamp(17px,3.6cqw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.vf-soon .vs-sub{display:block;margin-bottom:10px;font-size:clamp(10px,1.2cqw,13px);font-weight:600;letter-spacing:.28em;text-transform:uppercase;opacity:.75}
.vf-soon .vs-piece{position:absolute;right:19%;top:16%;height:68%;max-width:36%;rotate:6deg;display:flex;justify-content:flex-end}
.vf-soon .vs-piece img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(0,8,40,.45))}
.vf-poster-ui{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.vf-screen video{opacity:0;transition:opacity .4s}
.vf-screen video.is-ready{opacity:1}
.vf-screen .vf-shade{position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(0,12,51,.45));z-index:2;pointer-events:none}

/* ---------- trusted by ---------- */
.trusted{padding-block:clamp(56px,7vw,96px)}
.logos{position:relative;overflow:clip;mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logos-track{display:flex;justify-content:space-between;gap:clamp(18px,3vw,44px);list-style:none;margin:0;padding:6px 0}
.logos-track .dup{display:none}
.logo-ph{display:flex;align-items:center;gap:12px;height:52px;padding-inline:24px 28px;border-radius:999px;background:rgba(0,27,102,.07);color:var(--navy);opacity:.55;font:800 17px/1 var(--f);letter-spacing:-.02em;white-space:nowrap;transition:opacity .35s,transform .5s var(--out)}
.logo-ph::before{content:"";width:22px;height:22px;border-radius:50%;background:currentColor;opacity:.5}
.logo-ph:hover{opacity:1;transform:translateY(-2px)}
.logo-img{height:44px;width:auto;opacity:.55;transition:opacity .35s}
.logo-img:hover{opacity:1}

/* ---------- problem → "Not anymore." (pinned) ---------- */
.pin{position:relative}
.stage{min-height:100vh;display:flex;align-items:center}
.pb-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:center;width:100%}
.pb-text{position:relative}
.pb-beat{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,34px)}
.pb-lead{font-size:clamp(26px,3vw,46px);font-weight:500;letter-spacing:-.03em;line-height:1.08}
.pb-lead b{font-weight:800;color:var(--accent)}
.kw{display:inline-grid;vertical-align:bottom;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em}
.kw>span{grid-area:1/1;font-weight:800;color:var(--accent);transition:transform .55s var(--out)}
.pb-c .t-giant{font-size:clamp(64px,11vw,196px)}
.strk .ln{position:relative;width:fit-content}
.strk .ln::after{content:"";position:absolute;left:-1%;right:-1%;top:50%;height:max(4px,.085em);margin-top:-.04em;border-radius:3px;background:var(--cyan);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--inout) calc(var(--li,0) * 140ms)}
.strk--lime .ln::after{background:var(--lime)}
.strk.is-struck .ln::after{transform:scaleX(1)}
.strk.is-struck{opacity:.7;transition:opacity .4s .3s}
.pile{position:relative;height:min(66vh,620px);transition:translate .6s var(--in)}
.pile.is-gone{translate:130% 0}
.pile.jolt{animation:jolt .34s var(--out)}
@keyframes jolt{0%{transform:none}25%{transform:translate(-6px,3px) rotate(-1.4deg)}55%{transform:translate(5px,-2px) rotate(1deg)}100%{transform:none}}
.pi{position:absolute;scale:0;opacity:0;transition:scale .5s var(--land),opacity .2s}
.pi.is-on{scale:1;opacity:1}
.pi img{height:100%;width:auto;filter:var(--cut-shadow)}
.pi--inv{left:2%;top:2%;height:70%;rotate:-7deg;z-index:1}
.pi--badge{right:0;top:12%;height:60%;rotate:8deg;z-index:2}
.pi--cert{left:8%;bottom:0;height:46%;rotate:-3deg;z-index:3}
.stamp{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:.35em;padding:.5em .8em;border-radius:12px;font:800 clamp(14px,1.4vw,22px)/1 var(--f);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;background:var(--navy);color:#fff;box-shadow:inset 0 0 0 3px currentColor,0 10px 24px -10px rgba(0,8,40,.5);transition:background .25s,color .25s}
.stamp b{font-variant-numeric:tabular-nums;min-width:2.1ch;display:inline-block}
.stamp--main{right:-10%;top:16%;rotate:-12deg;background:var(--lime);color:var(--navy)}
.stage.g-cyan .stamp--main,.stage.g-lime .stamp--main{background:var(--navy);color:#fff}
.stage.is-strike .stamp--main{background:var(--cyan);color:var(--navy)}
.pi--badge .stamp{left:-14%;bottom:18%;rotate:9deg}
.pi--cert .stamp{right:-6%;top:-12%;rotate:-6deg}
.stamp.tick{animation:tick .3s var(--out)}
@keyframes tick{0%{scale:1}40%{scale:1.18}100%{scale:1}}
/* desktop pin choreography */
@media (min-width:900px) and (min-height:560px){
  .pin--problem{height:270vh}
  .pin--build{height:330vh}
  .pin>.stage{position:sticky;top:0;height:100vh;height:100svh}
  .pb-text{height:min(70vh,640px)}
  .pb-beat{position:absolute;inset:0;justify-content:center}
  .js .pb-beat .w{transform:translateY(108%);clip-path:inset(-108% -14% 108% -14%);transition:transform .55s var(--out) calc(var(--i,0) * 30ms),clip-path .55s var(--out) calc(var(--i,0) * 30ms)}
  .js .pb-beat.is-on .w{transform:none;clip-path:inset(-30% -14% -30% -14%)}
  .js .pb-beat.is-past .w{transform:translateY(-108%);clip-path:inset(135% -14% -108% -14%);transition:transform .3s var(--in) calc(var(--i,0) * 12ms),clip-path .3s var(--in) calc(var(--i,0) * 12ms)}
  .js .pb-b2 .pb-nr .w{transform:translateY(108%);clip-path:inset(-108% -14% 108% -14%)}
  .js .pb-b2.is-nr .pb-nr .w{transform:none;clip-path:inset(-30% -14% -30% -14%)}
  .js .pb-b2.is-past .pb-nr .w{transform:translateY(-108%);clip-path:inset(135% -14% -108% -14%)}
  .pb-b1 .t-display{font-size:clamp(44px,5.7vw,88px)}
  .pb-b2 .t-display{font-size:clamp(48px,7vw,104px)}
  .pb-c{right:auto;width:min(1440px,calc(100vw - 2 * var(--m)))}
  .pb-b2.is-past .strk .ln::after{transform:scaleX(0);transform-origin:right center;transition-delay:0s}
  .js .kw>span{transform:translateY(108%)}
  .js .kw>span.is-on{transform:none}
  .js .kw>span.is-past{transform:translateY(-108%);transition:transform .3s var(--in)}
}
@media not ((min-width:900px) and (min-height:560px)){
  .pin>.stage{padding-block:110px 90px}
  .pb-grid{grid-template-columns:1fr}
  .pb-beat+.pb-beat{margin-top:56px}
  .pile{height:auto;aspect-ratio:1/0.82;max-width:520px;margin:28px 0}
  .pile .pi{scale:1;opacity:1}
  .kw>span:not(:first-child){display:none}
  .pb-c .t-giant{font-size:13.4vw}
  .pb-mobile-pile{order:0}
}

/* ---------- how it works A: built just for you (pinned) ---------- */
.bd-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,80px);align-items:center;width:100%}
.bd-copy h2{font-size:clamp(48px,min(7.4vw,11.5vh),100px)}
.steps{list-style:none;margin:clamp(24px,4vh,48px) 0 0;padding:0 0 0 30px;display:grid;gap:clamp(8px,1.6vh,18px);position:relative}
.steps::before,.steps::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px}
.steps::before{background:rgba(0,27,102,.10)}
.steps::after{background:var(--blue);transform-origin:top;transform:scaleY(var(--sp,0));transition:transform .2s linear}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 20px;align-items:start;opacity:.38;transition:opacity .45s var(--soft)}
.step.is-on,.step.is-done{opacity:1}
.step.is-done:not(.is-on){opacity:.55}
.step-n{grid-row:1/3;font-size:clamp(40px,min(4.6vw,8.4vh),88px);font-weight:800;letter-spacing:-.05em;line-height:.82;color:rgba(0,51,231,.2);font-variant-numeric:tabular-nums;min-width:.9em;transition:color .45s}
.step.is-on .step-n{color:rgba(0,51,231,.32)}
.step h3{font-size:clamp(19px,1.65vw,27px);font-weight:800;letter-spacing:-.02em;line-height:1.15;padding-top:.15em}
.step-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--out)}
.step-d>p{overflow:hidden;min-height:0;font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:var(--soft-fg);max-width:30em}
.step.is-on .step-d{grid-template-rows:1fr}
.bd-stage{position:relative;aspect-ratio:16/12.5;max-height:76vh;margin-inline:auto;width:100%}
.bd-device{position:absolute;left:0;right:0;top:8%;--r:26px;padding:12px;z-index:2}
.bd-screen{position:relative;aspect-ratio:2000/1250;border-radius:14px;overflow:hidden;background:#0d2a9a}
.bd-screen img{position:absolute;inset:0;width:100%;height:100%}
.bd-co{clip-path:inset(0 calc(100% - var(--w,0) * 100%) 0 0)}
.bd-scan{position:absolute;top:0;bottom:0;left:calc(var(--w,0) * 100%);width:3px;margin-left:-1.5px;background:var(--cyan);box-shadow:0 0 22px 6px rgba(0,225,255,.6);opacity:var(--so,0);z-index:3}
.bd-card{position:absolute;left:50%;top:44%;width:15%;z-index:3;translate:-50% -50%;opacity:0;filter:drop-shadow(0 22px 26px rgba(0,27,102,.28))}
.bd-auto{position:absolute;left:-4%;bottom:0;width:60%;z-index:5;opacity:0;transform:translateY(40px) scale(.9);transform-origin:left bottom;transition:opacity .5s var(--soft),transform .6s var(--out);filter:drop-shadow(0 30px 40px rgba(0,27,102,.3))}
.bd-auto.is-on{opacity:1;transform:none}
.bd-auto img.base{width:100%;border-radius:4.4%}
.bd-tg{position:absolute;left:85.31%;width:10%;scale:0;transition:scale .45s var(--land)}
.bd-tg.is-on{scale:1}
.bd-tg:nth-of-type(1){top:31%}.bd-tg:nth-of-type(2){top:54.25%}.bd-tg:nth-of-type(3){top:77.5%}
.bd-add{position:absolute;right:-5%;bottom:20%;width:16%;z-index:6;scale:0;rotate:8deg;transition:scale .5s var(--land);filter:drop-shadow(0 22px 26px rgba(0,27,102,.28))}
.bd-add.is-on{scale:1}
.bd-ready{position:absolute;right:0;bottom:-8%;width:44%;z-index:7;opacity:0;transform:translateY(18px);transition:opacity .5s var(--soft),transform .6s var(--out)}
.bd-ready.is-on{opacity:1;transform:none}
.bd-ready img{filter:drop-shadow(0 16px 22px rgba(0,27,102,.25))}
@media not ((min-width:900px) and (min-height:560px)){
  .pin--build>.stage{padding-block:110px 100px}
  .bd-grid{grid-template-columns:1fr}
  .step{opacity:1}
  .step-d{grid-template-rows:1fr}
  .steps::after{transform:scaleY(1)}
  .bd-stage{max-height:none;margin-top:30px;aspect-ratio:16/13}
}

/* ---------- how it works B: three steps ---------- */
.three{padding-block:clamp(110px,13vw,190px) clamp(90px,10vw,150px)}
.three-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.three-grid{display:grid;grid-template-columns:minmax(0,8.2fr) minmax(0,3.8fr);gap:clamp(36px,5vw,96px);align-items:start}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:0 0 22px;padding:0}
.tab{position:relative;width:100%;padding:16px 4px 18px;border:0;background:none;color:#fff;text-align:start;cursor:pointer;font:500 clamp(16px,1.5vw,24px)/1.15 var(--f);letter-spacing:-.02em;opacity:.5;transition:opacity .35s}
.tab b{font-weight:800;color:var(--cyan);margin-inline-end:.25em}
.tab:hover,.tab.is-on,.tab.is-done{opacity:1}
.tab::before,.tab i{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px}
.tab::before{background:rgba(255,255,255,.16)}
.tab i{background:var(--cyan);transform-origin:left;transform:scaleX(0)}
.tab.is-done i{transform:scaleX(1)}
.tab.is-on i{animation:tabfill var(--dur,3s) linear forwards}
@keyframes tabfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.demo{position:relative}
.demo .vframe{padding:12px;--r:26px}
.demo-screen{position:relative;aspect-ratio:2000/1250;border-radius:14px;overflow:hidden;background:#F3F5F9;container-type:inline-size}
.scr{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--soft)}
.scr.is-on{opacity:1}
.scr>img{position:absolute;inset:0;width:100%;height:100%}
.g-rows{position:absolute;left:3.9%;right:3.9%;top:45.6%;margin:0;padding:0;list-style:none;font-family:var(--f);color:var(--ink)}
.g-row{position:relative;height:6.2cqw;border-bottom:1px solid rgba(11,16,32,.06);opacity:0;transform:translateY(8px);transition:opacity .35s var(--soft),transform .45s var(--out)}
.g-row.is-on{opacity:1;transform:none}
.g-row>span{position:absolute;top:50%;translate:0 -50%;font-size:1.05cqw;font-weight:600;white-space:nowrap}
.g-row .c0{left:1.15%;width:1.4cqw;height:1.4cqw;border-radius:.35cqw;border:1.5px solid rgba(11,16,32,.25)}
.g-row .c1{left:4.9%;display:flex;align-items:center;gap:.8cqw;font-weight:700}
.g-row .c1 img{width:2.6cqw;height:2.6cqw;border-radius:50%;object-fit:cover}
.g-row .c2{left:29.7%;color:#3b4258}
.g-row .c3{left:48.6%;padding:.35cqw .8cqw;border-radius:999px;background:#e8f8ff;color:#0045a8;font-size:.9cqw}
.g-row .c4{left:67.4%;color:#3b4258;font-variant-numeric:tabular-nums}
.g-row .c5{left:78.7%;color:#3b4258}
.d-hl{position:absolute;border-radius:1.4cqw;box-shadow:0 0 0 .25cqw var(--blue),0 0 2.4cqw rgba(0,51,231,.45);opacity:0;scale:.96;transition:opacity .3s,scale .4s var(--out);pointer-events:none}
.d-hl.is-on{opacity:1;scale:1}
.d-hl--card{left:41.6%;top:57%;width:17.6%;height:17.6%}
.d-hl--btn{left:62%;top:86.7%;width:34.1%;height:6.4%;border-radius:999px;box-shadow:0 0 0 .25cqw rgba(0,225,255,.9),0 0 3cqw rgba(0,225,255,.7)}
.d-hl--imp{left:81.6%;top:20.6%;width:14.45%;height:5.4%;border-radius:999px;box-shadow:0 0 0 .25cqw rgba(0,225,255,.9),0 0 3cqw rgba(0,225,255,.7)}
.d-out{position:absolute;left:62%;top:32.6%;width:34%;height:51.8%;display:grid;place-items:center;border-radius:1.4cqw;overflow:hidden}
.d-out .shim{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(0,51,231,.12) 50%,transparent 70%) #fff;background-size:250% 100%;opacity:0;transition:opacity .25s}
.d-out .shim.is-on{opacity:1;animation:shim .9s linear infinite}
@keyframes shim{from{background-position:130% 0}to{background-position:-30% 0}}
.d-out img{position:relative;width:88%;scale:.6;opacity:0;transition:scale .5s var(--land),opacity .3s;filter:drop-shadow(0 1cqw 1.6cqw rgba(0,27,102,.18))}
.d-out img.is-on{scale:1;opacity:1}
.cursor{position:absolute;left:var(--cx,50%);top:var(--cy,60%);z-index:9;width:2.4cqw;min-width:18px;pointer-events:none;opacity:0;transition:left .85s var(--inout),top .85s var(--inout),opacity .25s}
.cursor.is-on{opacity:1}
.cursor svg{width:100%;height:auto;filter:drop-shadow(0 .3cqw .5cqw rgba(0,8,40,.35));transition:scale .15s}
.cursor.is-down svg{scale:.82}
.cursor::before{content:"";position:absolute;left:-1.6cqw;top:-1.6cqw;width:3.2cqw;height:3.2cqw;border-radius:50%;border:.25cqw solid var(--cyan);opacity:0;scale:.3}
.cursor.is-down::before{animation:ripple .55s var(--out)}
@keyframes ripple{0%{opacity:1;scale:.3}100%{opacity:0;scale:1.6}}
.d-pop{position:absolute;right:-4%;top:52%;width:40%;z-index:6;scale:0;rotate:8deg;transition:scale .55s var(--land),rotate .7s var(--out);pointer-events:none}
.d-pop.is-on{scale:1;rotate:-4deg}
.d-pop>img{filter:var(--cut-shadow)}
.d-pop .lck{position:absolute;right:-6%;top:-12%;width:22%;scale:0;transition:scale .45s var(--land) .25s}
.d-pop.is-on .lck{scale:1}
.demo-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:clamp(110px,13vw,200px);max-width:62%}
.caption{font-size:16px;color:var(--soft-fg);max-width:34em}
.ichips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.ichips .chip{height:40px;font-size:14px;padding-inline:16px;color:#fff}
.ichips .chip svg{width:16px;height:16px;color:var(--cyan)}
.replay{font-size:15px}
.wa{display:flex;flex-direction:column;gap:28px}
.wa-phone{position:relative;width:min(300px,72vw);aspect-ratio:940/1944;margin-inline:auto}
.wa-phone>img.fr{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.wa-phone>img.frs{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:.8}
.wa-screen{position:absolute;left:4.3%;right:4.3%;top:2.1%;bottom:2.1%;z-index:2;border-radius:13%/6.2%;overflow:hidden;background:#eef1f6}
.wa-screen>img.bg{width:100%;height:100%;object-fit:cover}
.wa-b{position:absolute;opacity:0;transform:translateY(16px) scale(.92);transition:opacity .4s var(--soft),transform .55s var(--out)}
.wa-b.is-on{opacity:1;transform:none}
.wa-vn{right:3.5%;top:30%;width:77%;transform-origin:right bottom}
.wa-cert{left:3.5%;top:41%;width:73.5%;transform-origin:left top}
.wa-typing{left:4%;top:41%;display:flex;gap:4px;padding:10px 14px;border-radius:14px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.wa-typing i{width:7px;height:7px;border-radius:50%;background:#9aa3b5;animation:dot 1s infinite}
.wa-typing i:nth-child(2){animation-delay:.15s}.wa-typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.wa-text h3{font-size:clamp(24px,2vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin-bottom:10px}
.wa-text p{color:var(--soft-fg)}
.teams{margin-top:clamp(80px,9vw,140px);padding-top:40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.teams h3{font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-.025em;margin-inline-end:auto}
.team-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.team-list a.chip{height:42px;font-size:14px;text-decoration:none;color:#fff;transition:translate .45s var(--out)}
.team-list a.chip:hover{translate:0 -3px}

/* ---------- use cases ---------- */
.uc{padding-block:clamp(100px,12vw,180px);min-height:90vh}
.uc-hook{margin-bottom:clamp(40px,5vw,80px)}
.uc-hook.t-display{font-size:clamp(44px,6.4vw,124px)}
.uc-hook.t-soft{font-size:clamp(34px,4.4vw,88px);max-width:18em}
.uc-hook .ln{text-wrap:balance}
.uc-row{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,3.4vw,64px);align-items:end}
.uc--flip .uc-row{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.uc--flip .uc-video{order:2}
.uc-aside{display:flex;flex-direction:column;gap:22px;padding-bottom:10px}
.uc-aside .lead{color:var(--fg)}
.uc-film{font-size:14px;font-weight:600;color:var(--soft-fg);display:flex;align-items:center;gap:10px}
.uc-film::before{content:"";width:22px;height:2px;background:var(--accent)}
.uc-pieces{margin-top:clamp(64px,8vw,130px)}
.uc-pieces .tag{margin-bottom:clamp(18px,2vw,30px)}
.pile-row{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:clamp(10px,1.4vw,26px);--k:1}
@media (max-width:1500px){.pile-row{--k:.9}}
@media (max-width:1280px){.pile-row{--k:.78}}
@media (max-width:1080px){.pile-row{--k:.68}}
.pile-row .px:nth-child(even){margin-top:clamp(20px,4vw,70px)}
.uc-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,72px);align-items:end;margin-top:clamp(64px,7vw,110px);padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--line)}
.outcomes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 32px}
.outcomes li{display:flex;gap:14px;align-items:flex-start;font-size:clamp(17px,1.25vw,20px);font-weight:700;line-height:1.35;letter-spacing:-.01em}
.uc-foot .cta-row{justify-content:flex-end}
/* event fan */
.fan-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:center;margin-top:clamp(70px,8vw,130px)}
.fan-num{font-size:clamp(72px,10vw,190px);font-weight:800;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.fan-cap{margin-top:14px;font-size:var(--fs-lead);font-weight:500;color:var(--soft-fg)}
.fan{position:relative;height:clamp(250px,28vw,440px);--spread:0}
.fan .fc{position:absolute;left:50%;bottom:4%;width:clamp(104px,12vw,200px);transform-origin:50% 140%;translate:calc(-50% + (var(--a) * var(--spread) * 12%)) 0;rotate:calc(var(--a) * var(--spread) * 8.5deg);transition:translate .2s linear,rotate .2s linear}
.fan .fc .cut{--h:auto;height:auto;width:100%}
.fan .fc:hover{z-index:20}
/* hospitals: the old way, struck through */
.before{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;margin-top:clamp(64px,7vw,110px)}
.before-copy{max-width:20em}
.before-copy p{font-size:clamp(20px,1.7vw,28px);font-weight:800;letter-spacing:-.025em;line-height:1.15}
.before-copy .tag{display:block;margin-bottom:10px}
.before-set{display:flex;gap:clamp(10px,1.6vw,24px)}
.bf{position:relative}
.bf .cut{--h:clamp(110px,10vw,170px)}
.bf::after{content:"";position:absolute;left:-8%;right:-8%;top:50%;height:5px;border-radius:3px;background:var(--cyan);rotate:-14deg;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--inout) calc(var(--j,0) * 120ms + 500ms);z-index:6}
.is-in .bf::after{transform:scaleX(1)}
.js .before .bf .cut{opacity:.92}

/* ---------- everything included ---------- */
.incl{padding-block:clamp(110px,13vw,190px)}
.incl-eq{font-size:clamp(72px,13vw,200px);white-space:nowrap;margin-bottom:clamp(14px,1.6vw,26px);font-variant-numeric:tabular-nums}
.incl-eq .eq{color:var(--lime)}
.incl-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,96px);align-items:center;margin-top:clamp(56px,6vw,96px)}
.feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(24px,3vw,48px)}
.feat li{display:flex;gap:14px;align-items:flex-start}
.feat b{display:block;font-size:clamp(19px,1.55vw,25px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:6px}
.feat span{display:block;color:var(--soft-fg);font-size:16px;line-height:1.5}
.incl{--check:var(--cyan)}
.devices{position:relative;aspect-ratio:1/.95}
.dev{position:absolute}
.dev img{filter:drop-shadow(0 30px 40px rgba(0,8,40,.4))}
.dev--laptop{left:-6%;top:4%;width:116%;z-index:1}
.dev--tablet{right:-10%;top:40%;width:38%;z-index:2}
.dev--phone{left:0;top:46%;width:22%;z-index:3}

/* ---------- guarantee ---------- */
.guar{min-height:100vh;display:flex;align-items:center;padding-block:clamp(110px,12vw,170px)}
.guar-lines{display:flex;flex-direction:column;gap:.04em}
.guar .l2 .w{--d:650ms}
.guar .l3 .w{--d:1450ms}
.secs{display:flex;align-items:center;gap:clamp(18px,2.4vw,44px);flex-wrap:wrap}
.secs .t-giant{color:var(--lime)}
.ctrail{position:relative;height:calc(var(--fs-giant) * .74);aspect-ratio:2.6/1;flex:none}
.ctrail svg{position:absolute;top:0;height:100%;width:auto;aspect-ratio:88.53/87.78;left:calc(var(--j) * 16%)}
.ctrail .o{fill:none;stroke:var(--cyan);stroke-width:1.1;opacity:0;transition:opacity .25s calc(1650ms + var(--j) * 70ms)}
.ctrail .s{fill:var(--blue);left:calc(5 * 16%);transform:translateX(-520%);opacity:0;transition:transform .8s var(--out) 1600ms,opacity .2s 1600ms}
.is-in .ctrail .o{opacity:calc(.12 + var(--j) * .14)}
.is-in .ctrail .s{transform:none;opacity:1;animation:cland .45s var(--out) 2.3s}
@keyframes cland{0%{scale:1}55%{scale:1.08}100%{scale:1}}
.guar-foot{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);margin-top:clamp(40px,5vw,80px);flex-wrap:wrap}
.seal{width:clamp(110px,10vw,170px);flex:none;animation:spin 40s linear infinite;transition:scale .5s var(--out)}
.seal:hover{animation-duration:6s;scale:1.06}
@keyframes spin{to{rotate:360deg}}
.guar-link{font-size:clamp(22px,2.2vw,36px);font-weight:800;letter-spacing:-.025em;line-height:1.15;text-decoration:none;background:linear-gradient(var(--cyan),var(--cyan)) left bottom/100% 3px no-repeat;padding-bottom:4px;transition:background-size .5s var(--out)}
.guar-link:hover{background-size:0 3px;background-position:right bottom}

/* ---------- FAQ ---------- */
.faq{padding-block:clamp(100px,11vw,170px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,96px);align-items:start}
.faq-head{position:sticky;top:120px}
.faq-head h2{font-size:clamp(44px,5.8vw,84px)}
.faq-head p{margin-top:24px;color:var(--soft-fg)}
.qa{border-top:1px solid rgba(0,27,102,.12)}
.qa:last-child{border-bottom:1px solid rgba(0,27,102,.12)}
.qa-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;border:0;background:none;text-align:start;cursor:pointer;font:800 clamp(19px,1.6vw,26px)/1.25 var(--f);letter-spacing:-.02em;color:var(--navy);transition:color .3s}
.qa-q:hover{color:var(--blue)}
.qa-ic{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:rgba(0,51,231,.08);transition:rotate .5s var(--out),background .3s}
.qa-ic::before,.qa-ic::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2.5px;margin:-1.25px 0 0 -8px;border-radius:2px;background:var(--blue)}
.qa-ic::after{rotate:90deg}
.qa.is-open .qa-ic{rotate:135deg;background:var(--blue)}
.qa.is-open .qa-ic::before,.qa.is-open .qa-ic::after{background:#fff}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--out)}
.qa-a>div{overflow:hidden;min-height:0}
.qa-a p{padding:0 64px 28px 0;font-size:18px;color:var(--soft-fg);max-width:40em}
.qa.is-open .qa-a{grid-template-rows:1fr}

/* ---------- final CTA + form ---------- */
.cta{padding-block:clamp(120px,13vw,190px) clamp(100px,10vw,150px)}
.cta-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(36px,5vw,96px);align-items:center}
.cta h2{font-size:clamp(48px,6.4vw,104px);white-space:nowrap;margin-bottom:clamp(30px,3vw,48px)}
.mail{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mail a{font-size:clamp(18px,1.4vw,22px);font-weight:700;text-decoration:none;padding-bottom:3px;border-bottom:3px solid var(--lime)}
.copy{height:36px;padding-inline:14px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:700 13px/1 var(--f);cursor:pointer;transition:background .3s}
.copy:hover{background:rgba(255,255,255,.2)}
.cta-meta{margin-top:28px;color:var(--soft-fg);font-size:15px}
.form{--r:32px;padding:clamp(22px,3vw,44px)}
.form>.g-b{background:linear-gradient(140deg,rgba(0,27,102,.66) 0%,rgba(0,27,102,.5) 45%,rgba(0,51,231,.45) 100%)}
.form h3{font-size:clamp(24px,2vw,32px);font-weight:800;letter-spacing:-.025em;margin-bottom:6px}
.form .sub{color:var(--soft-fg);font-size:15px;margin-bottom:24px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label,.field legend{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.field label i{font-style:normal;font-weight:500;letter-spacing:.04em;text-transform:none;opacity:.75}
.field input,.field textarea{width:100%;min-width:0;height:54px;padding:0 16px;border:1px solid rgba(255,255,255,.24);border-radius:14px;background:rgba(0,12,51,.30);color:#fff;font:500 17px/1.3 var(--f);transition:border-color .3s,background .3s}
.field textarea{height:108px;padding:14px 16px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.5)}
.field input:hover,.field textarea:hover{border-color:rgba(255,255,255,.45)}
.field input:focus,.field textarea:focus{outline:3px solid var(--cyan);outline-offset:1px;border-color:transparent;background:rgba(0,12,51,.45)}
.field input[aria-invalid="true"]{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}
fieldset.field{border:0;margin:0;padding:0}
.chips-sel{display:flex;flex-wrap:wrap;gap:8px}
.chips-sel input{position:absolute;opacity:0;width:1px;height:1px}
.chips-sel label{display:inline-flex;align-items:center;gap:8px;height:40px;padding-inline:16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;font:700 14px/1 var(--f);letter-spacing:0;text-transform:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s,translate .4s var(--out)}
.chips-sel label:hover{border-color:rgba(255,255,255,.6);translate:0 -2px}
.chips-sel input:checked+label{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.chips-sel input:focus-visible+label{outline:3px solid var(--cyan);outline-offset:2px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.consent{font-size:14px;color:var(--soft-fg);max-width:26em}
.consent a{text-decoration-color:var(--cyan);text-underline-offset:3px;text-decoration-thickness:2px}
.ferr{grid-column:1/-1;font-size:15px;font-weight:600;color:#fff;background:rgba(0,225,255,.16);border-radius:12px;padding:10px 14px}
.f-done{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:30px 0}
.f-done img{width:84px;animation:ckpop .5s var(--out) both}
.f-done p{font-size:clamp(24px,2.2vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.15}
.f-done small{font-size:14px;color:var(--soft-fg)}

/* ---------- footer ---------- */
.foot{padding-block:clamp(70px,8vw,110px) 40px}
.foot-grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.4fr));gap:40px}
.foot-logo{width:170px}
.foot-tag{margin-top:22px;font-size:clamp(22px,1.8vw,28px);font-weight:800;letter-spacing:-.025em;line-height:1.15}
.foot-tag span{color:var(--cyan)}
.foot h4{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;opacity:.7}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{text-decoration:none;font-weight:600;opacity:.92;transition:opacity .3s,color .3s}
.foot ul a:hover{color:var(--cyan);opacity:1}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:clamp(56px,6vw,90px);padding-top:26px;border-top:1px solid var(--line);font-size:14px;color:var(--soft-fg)}

/* ---------- overlays (film, gallery) ---------- */
.ovl{position:fixed;inset:0;z-index:90;overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .35s var(--soft)}
.ovl.is-open{opacity:1}
.ovl-x{position:fixed;top:calc(18px + env(safe-area-inset-top,0px));inset-inline-end:max(18px,env(safe-area-inset-right,0px));z-index:5;--r:999px;width:54px;height:54px;border:0;background:none;color:#fff;cursor:pointer;display:grid;place-items:center}
.ovl-x svg{width:20px;height:20px}
.film-in{min-height:100%;display:grid;place-items:center;padding:90px var(--m)}
.film-box{width:min(1280px,100%)}
.film-box .vf-screen{border-radius:18px}
.gal-in{padding-block:calc(100px + env(safe-area-inset-top,0px)) 90px}
.gal-head{margin-bottom:clamp(36px,4vw,64px)}
.gal-head h2{font-size:clamp(40px,5.4vw,100px)}
.gal-grid{columns:5 190px;column-gap:clamp(20px,2.6vw,44px)}
.gal-item{break-inside:avoid;margin:0 0 clamp(26px,3vw,48px);display:flex;flex-direction:column;gap:14px}
.gal-item .cut{--h:auto;height:auto;width:100%;aspect-ratio:var(--ar)}
.gal-item figcaption{font-size:14px;font-weight:700;opacity:.8}
.gal-foot{margin-top:40px;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center}
body.is-locked{overflow:hidden}

/* ---------- legal pages ---------- */
.legal{min-height:100vh;padding-block:150px 110px}
.legal h1{font-size:clamp(44px,6vw,110px);margin-bottom:28px}
.legal .body{max-width:44em;display:grid;gap:18px;font-size:18px}
.legal .body h2{font-size:clamp(24px,2.2vw,32px);font-weight:800;letter-spacing:-.02em;margin-top:24px}
.legal .ph{padding:18px 20px;border-radius:16px;background:rgba(0,51,231,.07);font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .mega-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .outcomes{grid-template-columns:1fr;gap:14px}
  .three-grid{grid-template-columns:1fr}
  .wa{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:36px}
  .wa-phone{width:min(260px,40vw)}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:899px){
  :root{--nav-h:72px}
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:block}
  .nav-progress{display:block}
  .rail{display:none}
  .hero{min-height:auto;padding-block:120px 110px}
  .hero-grid{grid-template-columns:1fr;gap:clamp(70px,14vw,110px)}
  .hero h1{font-size:clamp(40px,11.4vw,84px)}
  .hero-media{margin-inline:6% 4%}
  .hero .superc-wrap .superc{top:auto;bottom:-6%;height:min(150vw,1000px)}
  .hp--inv{left:-6%;top:-22%}
  .hp--badge{right:-3%;top:-26%}
  .hp--cert{left:-6%;bottom:-24%}
  .hp--mug{right:-5%;bottom:-26%}
  .hp--chip{left:auto;right:18%;bottom:-17%}
  .scroll-cue{display:none}
  .logos-track{justify-content:flex-start;width:max-content;animation:marquee 26s linear infinite}
  .logos-track .dup{display:flex}
  .logos:hover .logos-track,.logos:focus-within .logos-track{animation-play-state:paused}
  .uc-row,.uc--flip .uc-row{grid-template-columns:1fr}
  .uc--flip .uc-video{order:0}
  .pile-row{--k:.6;justify-content:center;flex-wrap:wrap;gap:14px 12px}
  .pile-row .px:nth-child(even){margin-top:24px}
  .uc-foot{grid-template-columns:1fr}
  .uc-foot .cta-row{justify-content:flex-start}
  .fan-wrap{grid-template-columns:1fr}
  .incl-eq{white-space:normal}
  .incl-grid{grid-template-columns:1fr}
  .devices{max-width:560px;width:100%;margin-inline:auto}
  .faq-grid{grid-template-columns:1fr}
  .faq-head{position:static}
  .cta-grid{grid-template-columns:1fr}
  .cta h2{font-size:clamp(40px,11.4vw,84px)}
  .cta .superc-wrap .superc{top:auto;bottom:-4%;height:min(150vw,1000px)}
  .tabs{gap:6px}
  .tab{font-size:15px}
  .d-pop{right:-2%;top:56%;width:46%}
  .demo-foot{max-width:none;margin-top:clamp(120px,30vw,200px)}
}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (max-width:640px){
  .feat{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .mega-in{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .wa{grid-template-columns:1fr}
  .wa-phone{width:min(280px,76vw)}
  .tab b{display:block}
  .qa-a p{padding-right:0}
  .gal-grid{columns:2 140px}
  .before-set{flex-wrap:wrap}
  .secs{gap:10px}
  .ctrail{height:calc(var(--fs-giant) * .62)}
}

/* ---------- reduced motion: final states, ground cuts kept, no drift, no loops ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .ground::before,.fl,.seal,.logos-track{animation:none!important}
  .js .mu .w,.js .blur,.js .rise,.js .cut.pop,.js .ck-pop .ck{transform:none;opacity:1;filter:none;scale:1}
  .js .eyebrow::before{transform:none}.js .eyebrow span{opacity:1}
  .js .superc{transform:translateX(-46%)}
}

/* =====================================================================
   v2: multi-page site — nav icons + contact, hero flow, teams, savings slider,
   pricing, "work on your business" summary, team pages
   ===================================================================== */
.ico{width:22px;height:22px;flex:none}
.ico--sm{width:16px;height:16px}
.nav-contact{height:46px;padding-inline:20px;margin-inline-start:6px;color:inherit;text-decoration:none;font-size:15px;transition:translate .45s var(--out)}
.nav-contact:hover{translate:0 -2px}
.nav[data-tone="light"] .nav-contact>.g-b{background:rgba(0,51,231,.06);box-shadow:inset 0 0 0 1.5px rgba(0,51,231,.22);-webkit-backdrop-filter:none;backdrop-filter:none}
.nav[data-tone="light"] .nav-contact>.g-e{display:none}
.nav-cta{margin-inline-start:4px}
.mega a.mi{flex-direction:row;align-items:flex-start;gap:14px}
.mi-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(0,225,255,.12);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(0,225,255,.28);transition:background .3s,color .3s,transform .45s var(--out)}
.mi-ic .ico{width:22px;height:22px}
.mega a.mi:hover .mi-ic,.mega a.mi:focus-visible .mi-ic,.mega a.mi.is-current .mi-ic{background:var(--cyan);color:var(--navy);transform:rotate(-6deg) scale(1.06)}
.mega a.mi.is-current{background:rgba(255,255,255,.08)}
.mi-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.mmenu-teams a{display:flex;align-items:center;gap:10px}
.mmenu-teams .mi-ic{width:34px;height:34px;border-radius:10px}
.mmenu-teams .mi-ic .ico{width:18px;height:18px}
.chips-sel label .mi-ic{width:auto;height:auto;background:none;box-shadow:none;color:currentColor;border-radius:0}
.chips-sel label .mi-ic .ico{width:16px;height:16px}

/* hero: what we do in three moves */
.flow{list-style:none;margin:0 0 clamp(28px,3vw,42px);padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 0}
.fs{position:relative;display:flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1.5px 0 rgba(255,255,255,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:14px;line-height:1.2;white-space:nowrap}
.fs b{font-weight:800}
.fs-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,225,255,.16);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(0,225,255,.35);animation:fspulse 4.5s var(--soft) infinite}
.fs:nth-child(2) .fs-ic{animation-delay:1.5s}.fs:nth-child(3) .fs-ic{animation-delay:3s}
@keyframes fspulse{0%,8%{background:rgba(0,225,255,.16);color:var(--cyan)}14%,30%{background:var(--cyan);color:var(--navy);transform:scale(1.08)}38%,100%{background:rgba(0,225,255,.16);color:var(--cyan);transform:none}}
.fs-ic .ico{width:18px;height:18px}
.fs+.fs{margin-inline-start:18px}
.fs+.fs::before{content:"";position:absolute;right:100%;top:50%;width:18px;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--cyan) 0 5px,transparent 5px 9px);background-size:18px 2px;animation:dash .9s linear infinite;opacity:.85}
@keyframes dash{to{background-position:18px 0}}

/* for every team */
.teams-sec .uc-row{align-items:center}
.teams-sec h2{margin-bottom:clamp(40px,5vw,80px)}
.outcomes--col{grid-template-columns:1fr;gap:14px;margin-top:6px}
.tc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 40px;margin:clamp(80px,9vw,140px) 0 26px}
.tc-head h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.tc-head p{color:var(--soft-fg)}
.tcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.tcard{--r:24px;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:clamp(230px,19vw,280px);padding:clamp(18px,1.8vw,26px);color:#fff;text-decoration:none;overflow:hidden;transition:translate .55s var(--out)}
.tcard:hover,.tcard:focus-visible{translate:0 -6px}
.tc-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--cyan);color:var(--navy);margin-bottom:6px;transition:transform .5s var(--out)}
.tc-ic .ico{width:26px;height:26px}
.tcard:hover .tc-ic{transform:rotate(-8deg) scale(1.06)}
.tc-team{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.tc-hook{position:relative;z-index:2;max-width:11em;font-size:clamp(17px,1.35vw,21px);font-weight:800;letter-spacing:-.02em;line-height:1.22}
.tc-go{position:relative;z-index:2;margin-top:auto;display:inline-flex;gap:6px;font-size:15px;font-weight:700}
.tc-go .arr{transition:transform .45s var(--out)}
.tcard:hover .tc-go .arr{transform:translateX(5px)}
.tc-pc{position:absolute;right:-7%;bottom:-24%;z-index:1;width:40%;max-height:70%;object-fit:contain;object-position:bottom;rotate:12deg;filter:drop-shadow(0 18px 22px rgba(0,8,40,.5));transition:transform .6s var(--out),rotate .6s var(--out);pointer-events:none}
.tcard:hover .tc-pc{transform:translateY(-16%);rotate:3deg}

/* hours saved */
.calc{padding-block:clamp(100px,11vw,170px)}
.calc-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(36px,5vw,100px);align-items:center}
.calc-l h2{font-size:clamp(44px,5.6vw,96px)}
.calc-l .lead{margin-top:clamp(18px,2vw,28px)}
.calc-in{--r:28px;margin-top:clamp(28px,3vw,44px);padding:clamp(22px,2.6vw,36px)}
.calc-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px}
.calc-top label{font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.calc-n{font-size:clamp(40px,4vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.calc input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:36px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.calc input[type=range]::-webkit-slider-runnable-track{height:12px;border-radius:999px;background:linear-gradient(var(--blue),var(--blue)) 0 0/var(--fill,50%) 100% no-repeat,rgba(0,27,102,.12)}
.calc input[type=range]::-moz-range-track{height:12px;border-radius:999px;background:rgba(0,27,102,.12)}
.calc input[type=range]::-moz-range-progress{height:12px;border-radius:999px;background:var(--blue)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-11px;border:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--blue),0 0 0 7px rgba(0,51,231,.14),0 8px 18px rgba(0,27,102,.32);transition:box-shadow .3s,transform .3s var(--out)}
.calc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12);box-shadow:inset 0 0 0 3px var(--blue),0 0 0 12px rgba(0,51,231,.16),0 10px 22px rgba(0,27,102,.35)}
.calc input[type=range]::-moz-range-thumb{width:34px;height:34px;border:3px solid var(--blue);border-radius:50%;background:#fff;box-shadow:0 0 0 7px rgba(0,51,231,.14),0 8px 18px rgba(0,27,102,.32)}
.calc input[type=range]:focus-visible{outline:3px solid var(--cyan);outline-offset:6px;border-radius:999px}
.calc-ticks{position:relative;height:20px;margin:10px 17px 0;font-size:12px;font-weight:600;color:var(--soft-fg);font-variant-numeric:tabular-nums}
.calc-ticks span{position:absolute;top:0;translate:-50% 0}
.calc-pre{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.calc-pre button{height:38px;padding-inline:16px;border:1px solid rgba(0,51,231,.25);border-radius:999px;background:rgba(255,255,255,.6);color:var(--navy);font:700 14px/1 var(--f);cursor:pointer;transition:background .3s,color .3s,border-color .3s,translate .4s var(--out)}
.calc-pre button:hover{translate:0 -2px;border-color:var(--blue)}
.calc-pre button.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.calc-big{display:flex;align-items:baseline;gap:clamp(10px,1vw,18px);font-size:clamp(96px,12vw,210px);font-weight:800;letter-spacing:-.055em;line-height:.84;color:var(--blue);font-variant-numeric:tabular-nums}
.calc-big small{font-size:clamp(26px,2.5vw,42px);letter-spacing:-.025em;color:var(--navy)}
.calc-unit{margin-top:12px;font-size:var(--fs-lead);font-weight:700;line-height:1.3}
.calc-sub{margin-top:10px;font-size:18px;color:var(--soft-fg)}
.calc-sub b{color:var(--navy);font-variant-numeric:tabular-nums}
.days{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;max-width:560px;margin-top:30px}
.days i{position:relative;aspect-ratio:1;border-radius:6px;background:rgba(0,27,102,.08);overflow:hidden}
.days i::after{content:"";position:absolute;inset:0;background:var(--blue);transform-origin:left center;transform:scaleX(var(--f,0));transition:transform .4s var(--out) calc(var(--n) * 7ms)}
.calc-cap{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--soft-fg)}
.day-key{width:12px;height:12px;border-radius:3px;background:var(--blue)}
.calc-note{max-width:30em;margin-top:22px;font-size:15px;color:var(--soft-fg)}

/* pricing */
.pricing{padding-block:clamp(100px,11vw,170px)}
.pr-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 60px;margin-bottom:clamp(40px,5vw,72px)}
.pr-head .lead{max-width:24em}
.pr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);gap:clamp(16px,2vw,28px);align-items:stretch}
.pr-card{--r:28px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(24px,2.6vw,38px);transition:translate .5s var(--out)}
.pr-card:hover{translate:0 -6px}
.pr-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--navy);color:var(--cyan)}
.pr-ic .ico{width:28px;height:28px}
.pr-card h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.pr-card p{max-width:24em;color:var(--soft-fg)}
.pr-card .btn{margin-top:auto}
.pr-inc{padding:8px 0 8px clamp(0px,1vw,16px)}
.pr-inc ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px}
.pr-inc li{display:flex;gap:12px;font-weight:700;line-height:1.35}

/* work on your business, not in it */
.why{padding-block:clamp(110px,12vw,180px)}
.why-h{font-size:clamp(46px,7.2vw,116px)}
.why-grid{display:grid;grid-template-columns:minmax(0,6.4fr) minmax(0,5.6fr);gap:clamp(36px,5vw,96px);align-items:center;margin-top:clamp(28px,3vw,52px)}
.why-list{list-style:none;margin:clamp(28px,3vw,44px) 0;padding:0;display:grid;gap:22px}
.why-list li{display:flex;gap:18px;align-items:flex-start}
.wi{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(0,225,255,.12);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(0,225,255,.3)}
.wi .ico{width:26px;height:26px}
.why-list b{display:block;margin-bottom:2px;font-size:clamp(20px,1.7vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.why-list span{color:var(--soft-fg)}
.why-list a{color:var(--cyan);font-weight:700;text-underline-offset:3px}
.orbit{--R:clamp(118px,14vw,228px);--oh:clamp(64px,6.6vw,108px);position:relative;width:min(100%,calc(var(--R) * 2 + var(--oh) * 1.25));aspect-ratio:1;margin-inline:auto}
.orb-core{--r:50%;position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center}
.orb-core::before{content:"";position:absolute;inset:-30%;z-index:-3;border-radius:50%;background:radial-gradient(closest-side,rgba(0,225,255,.35),transparent);animation:breathe 6s var(--soft) infinite alternate}
@keyframes breathe{to{transform:scale(1.15);opacity:.7}}
.orb-c{width:44%;fill:#fff}
.orb-ring{position:absolute;inset:0;animation:orbit 70s linear infinite}
.orb-it{position:absolute;left:50%;top:50%;transform:rotate(calc(var(--oi) * 45deg)) translate(var(--R)) rotate(calc(var(--oi) * -45deg))}
.orb-rot{translate:-50% -50%;animation:orbit 70s linear infinite reverse}
.orbit:hover .orb-ring,.orbit:hover .orb-rot{animation-play-state:paused}
@keyframes orbit{to{rotate:360deg}}

/* contact form: what would you like? */
.seg{display:flex;flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;padding:4px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(0,12,51,.32)}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.field .seg label{display:inline-flex;align-items:center;height:40px;padding-inline:16px;border-radius:999px;color:#fff;font:700 14px/1 var(--f);letter-spacing:0;text-transform:none;cursor:pointer;transition:background .3s,color .3s}
.seg input:checked+label{background:var(--cyan);color:var(--navy)}
.seg input:focus-visible+label{outline:3px solid var(--cyan);outline-offset:2px}

/* team pages */
.uch{padding-block:calc(var(--nav-h) + 52px) clamp(90px,10vw,150px)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:clamp(26px,3vw,44px);font-size:14px;font-weight:600;color:var(--soft-fg)}
.crumb a{color:inherit;text-decoration:none;border-bottom:2px solid var(--ul)}
.crumb [aria-current]{color:var(--fg)}
.eyebrow--ic span{display:inline-flex;align-items:center;gap:10px}
.eyebrow--ic .ico{width:18px;height:18px;color:var(--accent)}
.uch .uc-aside{gap:26px}
.ucd{padding-block:clamp(100px,11vw,170px)}
.ucd-rows{display:grid;gap:clamp(40px,5vw,80px);margin-top:clamp(56px,6vw,96px)}
.ucd-rows .tag{margin-bottom:-10px}
.ucd-rows .pile-row{justify-content:space-around}
.ucd-note{margin-top:28px}
.uchow{padding-block:clamp(100px,11vw,170px)}
.hsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);align-items:start}
.hs-t{margin-bottom:16px;font-size:clamp(20px,1.7vw,28px);font-weight:500;letter-spacing:-.02em}
.hs-t b{font-weight:800;color:var(--accent)}
.hs-shot{--r:20px;padding:8px}
.hs-shot .demo-screen{border-radius:12px}
.hs-done{position:relative;padding:4% 8% 0 2%}
.hs-done .cut{--h:auto;height:auto;width:100%}
.hs-ck{position:absolute;right:0;top:-4%;width:20%;filter:drop-shadow(0 10px 18px rgba(0,8,40,.4))}
.hs-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 30px;margin-top:clamp(48px,5vw,80px);padding-top:28px;border-top:1px solid var(--line)}
.hs-foot p{font-size:18px}
.hs-foot b{font-weight:800}
.others{margin-top:clamp(64px,7vw,110px);padding-top:32px;border-top:1px solid rgba(0,27,102,.12)}
.others .tag{display:block;margin-bottom:16px}
.others .team-list a.chip{height:44px;color:var(--navy);font-size:14px}
.others .team-list .ico{color:var(--blue)}

@media (max-width:1180px){
  .tcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-grid{grid-template-columns:1fr 1fr}
  .pr-inc{grid-column:1/-1}
  .nav-links .nav-link{padding-inline:12px}
}
@media (max-width:899px){
  .nav-contact{display:none}
  .calc-grid,.why-grid{grid-template-columns:1fr}
  .hsteps{grid-template-columns:1fr;max-width:560px}
}
@media (max-width:640px){
  .flow{flex-direction:column;align-items:flex-start;gap:0}
  .fs+.fs{margin:16px 0 0}
  .fs+.fs::before{right:auto;left:23px;top:-16px;width:2px;height:16px;margin:0;background:repeating-linear-gradient(180deg,var(--cyan) 0 4px,transparent 4px 7px)}
  .tcards{grid-template-columns:1fr}
  .tcard{min-height:200px}
  .pr-grid{grid-template-columns:1fr}
  .days{grid-template-columns:repeat(7,minmax(0,1fr))}
  .calc-top{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .orb-ring,.orb-rot,.fs-ic,.fs+.fs::before,.orb-core::before{animation:none!important}
}

/* =====================================================================
   v3: declutter + green, brand wall, comparison, departments/industries
   ===================================================================== */
/* eyebrows: keep the stroke, drop the small text (still read by screen readers) */
.eyebrow{font-size:0;letter-spacing:0;gap:12px;line-height:1}
.eyebrow span{display:inline-flex;align-items:center;gap:10px}
.eyebrow--ic .ico{width:22px;height:22px}
.scroll-cue i{height:52px}

/* green ground (owner's call: two green sections on the homepage) */
.g-green{--bg:var(--lime);--fg:var(--navy);--accent:var(--blue);--rule:var(--blue);--focus:var(--navy);--btn-bg:var(--navy);--btn-fg:var(--lime);--btn-glow:rgba(0,27,102,.45);--ul:var(--blue);--check:var(--navy);--check-fg:var(--lime);--soft-fg:rgba(0,27,102,.78);--line:rgba(0,27,102,.16);
  --glow:radial-gradient(70% 55% at 50% 118%,rgba(255,255,255,.6),transparent 70%),radial-gradient(45% 45% at 102% -6%,rgba(0,225,255,.38),transparent 70%)}
.g-green .gl--shadow::after{background:rgba(0,27,102,.28)}

/* every "Book a demo" button is green */
.btn--demo{--btn-bg:var(--lime);--btn-fg:var(--navy);--btn-glow:rgba(181,255,46,.6)}
.nav .nav-cta.btn--demo{--btn-bg:var(--lime);--btn-fg:var(--navy);--btn-glow:rgba(181,255,46,.55)}
.g-green .btn--demo{--btn-bg:var(--navy);--btn-fg:var(--lime);--btn-glow:rgba(0,27,102,.45)}
.nav[data-tone="light"] .nav-contact>.g-b{background:rgba(0,51,231,.06)}

/* rail: six evenly spaced stops */
.rail-pct{display:none}

/* grouped mega-menu: departments | industries */
.mega{width:min(1060px,calc(100vw - 2 * var(--m)))}
.mega-in{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0;padding:14px}
.mega-col{padding:8px}
.mega-col--ind{border-inline-start:1px solid rgba(255,255,255,.14)}
.mega-g{margin:6px 12px 8px;font-size:14px;font-weight:700;color:var(--cyan)}
.mega-list{display:grid;gap:4px}
.mega-col--dept .mega-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.mmenu .mega-g{margin:10px 0 4px}
.mmenu-teams{margin:8px 0 20px}

/* brand wall */
.bw{padding-block:clamp(100px,11vw,170px) clamp(90px,10vw,150px)}
.bw-head .lead{margin-top:clamp(18px,2vw,28px)}
.bw-head h2{font-size:clamp(44px,6.6vw,124px)}
.bw-wall{position:relative;margin-top:clamp(56px,6vw,96px);display:grid;gap:clamp(14px,1.6vw,26px);-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.bw-row{--k:1;will-change:transform}
.bw-track{display:flex;align-items:center;width:max-content;animation:bwmove var(--dur,80s) linear infinite}
.bw-row--rev .bw-track{animation-direction:reverse}
.bw-wall:hover .bw-track{animation-play-state:paused}
@keyframes bwmove{to{transform:translateX(-50%)}}
.bw-it{flex:none;padding-inline-end:clamp(16px,2vw,34px)}
.bw-it .cut .ci{filter:drop-shadow(0 18px 22px rgba(0,27,102,.28))}
.bw-core{position:absolute;left:50%;top:50%;width:clamp(170px,17vw,260px);aspect-ratio:1;translate:-50% -50%;z-index:5;display:grid;place-items:center;pointer-events:none}
.bw-disc{--r:50%;position:relative;width:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--navy);pointer-events:auto;box-shadow:0 30px 60px -20px rgba(0,27,102,.45)}
.bw-disc>.g-b{background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(255,255,255,.78) 55%,rgba(232,240,255,.9));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.bw-disc b{position:relative;font-size:clamp(20px,1.8vw,28px);font-weight:800;letter-spacing:-.025em}
.bw-logo{position:relative;width:clamp(54px,5vw,74px);aspect-ratio:1;border-radius:22%;display:grid;place-items:center;background:var(--blue);color:#fff;box-shadow:0 12px 24px -8px rgba(0,51,231,.6)}
.bw-logo .ico{width:55%;height:55%;fill:currentColor}
.bw-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(0,27,102,.5);animation:ring 4.2s var(--soft) var(--rd,0s) infinite;opacity:0}
@keyframes ring{0%{transform:scale(.9);opacity:.7}100%{transform:scale(2.1);opacity:0}}

/* built just for you: calmer copy, roomier visuals, layered 3D */
.bd-grid{grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:clamp(48px,7vw,140px)}
.bd-copy{max-width:470px}
.bd-copy h2{font-size:clamp(40px,min(5.2vw,9vh),84px)}
.steps{margin-top:clamp(28px,5vh,56px);gap:clamp(14px,3vh,30px);padding-inline-start:26px}
.step{gap:4px 18px}
.step-n{font-size:clamp(26px,min(2.6vw,5vh),44px);line-height:1;padding-top:.04em}
.step h3{font-size:clamp(17px,1.35vw,22px);padding-top:.12em}
.step-d>p{font-size:15.5px;margin-top:6px}
.bd-stage{width:86%;max-width:860px;max-height:70vh;perspective:1400px}
.bd-l{position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(calc(var(--mx,0) * var(--z,1) * 26px),calc(var(--my,0) * var(--z,1) * 18px),0) rotateY(calc(var(--mx,0) * var(--z,1) * 5deg)) rotateX(calc(var(--my,0) * var(--z,1) * -4deg));transition:transform .2s linear;pointer-events:none}
.bd-l .bd-device{top:10%}
.bd-auto{left:-2%;bottom:2%;width:56%}
.bd-ready{right:2%;bottom:-6%;width:40%}
.bd-add{right:-2%}

/* three steps: smaller, centred */
.three-grid{grid-template-columns:minmax(0,7.4fr) minmax(0,2.6fr);gap:clamp(32px,4vw,72px);max-width:1180px;margin-inline:auto;align-items:center}
.demo .vframe{max-width:820px}
.wa-phone{width:min(230px,60vw)}
.wa{gap:20px}
.wa-text h3{font-size:clamp(20px,1.6vw,26px)}
.demo-foot{flex-direction:column;justify-content:center;align-items:center;gap:16px;max-width:none;margin-top:clamp(60px,7vw,100px);text-align:center}
.demo-foot .caption{max-width:none}
.demo-foot .ichips{justify-content:center}
@media (min-width:1100px){.demo-foot .caption{white-space:nowrap}}

/* by hand vs Collatero */
.vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(70px,8vw,120px)}
.vs-side{--r:28px;display:flex;flex-direction:column;gap:22px;padding:clamp(20px,2.4vw,34px);color:#fff}
.vs-old>.g-b{background:linear-gradient(140deg,rgba(255,255,255,.12),rgba(255,255,255,.04) 60%,rgba(255,255,255,.08))}
.vs-top{display:flex;align-items:center;gap:16px}
.vs-top h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.vs-meta{margin-top:6px;font-size:16px;color:var(--soft-fg)}
.vs-meta b{color:#fff;font-variant-numeric:tabular-nums}
.vs-ic{flex:none;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.vs-ic--on{background:var(--lime);color:var(--navy);box-shadow:none}
.vs-ic .ico{width:28px;height:28px}
.vs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;height:clamp(280px,26vw,400px);align-content:center}
.vs-slot{position:relative;aspect-ratio:4/5;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);display:grid;place-items:center;overflow:hidden}
.vs-slot img{width:84%;height:84%;object-fit:contain;opacity:0;scale:.8;transition:opacity .4s,scale .5s var(--land);filter:drop-shadow(0 10px 14px rgba(0,8,40,.45))}
.vs-slot.is-on img{opacity:1;scale:1}
.vs-bar{position:absolute;left:12%;right:12%;bottom:12%;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;opacity:0}
.vs-bar::after{content:"";position:absolute;inset:0;background:var(--cyan);transform-origin:left;transform:scaleX(0)}
.vs-slot.is-work{box-shadow:inset 0 0 0 1.5px rgba(0,225,255,.6)}
.vs-slot.is-work .vs-bar{opacity:1}
.vs-slot.is-work .vs-bar::after{animation:work 1.6s linear forwards}
@keyframes work{to{transform:scaleX(1)}}
.vs-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;height:clamp(280px,26vw,400px);overflow:hidden;-webkit-mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.vs-col{overflow:hidden}
.vs-track{display:flex;flex-direction:column;animation:vsup var(--dur,14s) linear infinite}
.vs-col:nth-child(2) .vs-track{animation-direction:reverse}
.vs-track img{width:100%;height:auto;padding-bottom:12px;filter:drop-shadow(0 10px 14px rgba(0,8,40,.45))}
@keyframes vsup{to{transform:translateY(-50%)}}
.vs-pts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:700;font-size:16px}
.vs-old .vs-pts li{color:var(--soft-fg)}
.vs-old .vs-pts li::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:10px;border-radius:50%;background:rgba(255,255,255,.35);vertical-align:2px}
.vs-pts--ok li{display:flex;align-items:center;gap:8px}
.vs-pts--ok .ck{width:22px;height:22px}

/* departments | industries */
.dept{padding-block:clamp(100px,11vw,170px)}
.dept-h{font-size:clamp(44px,5.6vw,98px)}
.dg{margin-top:clamp(56px,6vw,96px)}
.dg-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 30px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid rgba(0,27,102,.12)}
.dg-head h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.dg-head p{color:var(--soft-fg)}
.dcards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.dcard{--r:22px;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:clamp(240px,18vw,280px);padding:clamp(16px,1.6vw,22px);color:var(--navy);text-decoration:none;overflow:hidden;transition:translate .5s var(--out)}
.dcard:hover,.dcard:focus-visible{translate:0 -6px}
.dc-ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--blue);color:#fff;margin-bottom:6px;transition:transform .5s var(--out)}
.dc-ic .ico{width:24px;height:24px}
.dcard:hover .dc-ic,.icard:hover .dc-ic{transform:rotate(-8deg) scale(1.06)}
.dc-team{position:relative;z-index:2;font-size:clamp(18px,1.4vw,22px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.dc-hook{position:relative;z-index:2;font-size:15px;line-height:1.4;color:var(--soft-fg);max-width:14em}
.dc-go{position:relative;z-index:2;margin-top:auto;display:inline-flex;gap:6px;font-size:15px;font-weight:700;color:var(--blue)}
.dc-go .arr{transition:transform .45s var(--out)}
.dcard:hover .dc-go .arr,.icard:hover .dc-go .arr{transform:translateX(5px)}
.dc-pc{position:absolute;right:-10%;bottom:-26%;z-index:1;width:46%;max-height:62%;object-fit:contain;object-position:bottom;rotate:12deg;filter:drop-shadow(0 14px 18px rgba(0,27,102,.3));transition:transform .6s var(--out),rotate .6s var(--out);pointer-events:none}
.dcard:hover .dc-pc{transform:translateY(-14%);rotate:4deg}
.icards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.icard{--r:26px;position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:stretch;min-height:clamp(240px,20vw,300px);color:#fff;text-decoration:none;overflow:hidden;transition:translate .5s var(--out)}
.icard>.g-b{background:linear-gradient(140deg,rgba(0,51,231,.96),rgba(0,51,231,.88) 55%,rgba(0,27,102,.94));-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 26px 50px -24px rgba(0,27,102,.6)}
.icard:hover,.icard:focus-visible{translate:0 -6px}
.ic-txt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(18px,1.8vw,26px)}
.icard .dc-ic{background:var(--cyan);color:var(--navy)}
.ic-team{font-size:clamp(22px,1.9vw,30px);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.icard .dc-hook{color:rgba(255,255,255,.82)}
.icard .dc-go{color:var(--cyan)}
.ic-pc{position:relative;z-index:1;align-self:end;justify-self:center;width:88%;max-height:96%;object-fit:contain;object-position:bottom;margin-bottom:-14%;rotate:8deg;filter:drop-shadow(0 18px 24px rgba(0,8,40,.5));transition:transform .6s var(--out),rotate .6s var(--out)}
.icard:hover .ic-pc{transform:translateY(-8%);rotate:2deg}

/* hours saved on cyan, fewer words */
.calc-l h2{font-size:clamp(44px,5.6vw,96px)}
.g-cyan .calc-pre button{background:rgba(255,255,255,.55);border-color:rgba(0,27,102,.18)}
.g-cyan .calc-pre button.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.g-cyan .days i{background:rgba(0,27,102,.12)}
.g-cyan .days i::after{background:var(--navy)}
.g-cyan .calc-big{color:var(--navy)}
.g-cyan .calc input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(var(--navy),var(--navy)) 0 0/var(--fill,50%) 100% no-repeat,rgba(0,27,102,.14)}
.g-cyan .calc input[type=range]::-moz-range-progress{background:var(--navy)}
.g-cyan .calc input[type=range]::-webkit-slider-thumb{box-shadow:inset 0 0 0 3px var(--navy),0 0 0 7px rgba(0,27,102,.12),0 8px 18px rgba(0,27,102,.32)}
.g-cyan .calc-n{color:var(--navy)}
.calc-in{margin-top:clamp(32px,4vw,56px)}
.calc-pre{margin-top:20px}

/* everything included: superscripts, clear glass devices with tilt */
.lead sup{font-size:.55em;vertical-align:.7em;line-height:0;margin-inline-start:.04em}
.devices{aspect-ratio:1/.92}
.dev{transform:translate3d(calc(var(--mx,0) * var(--z,1) * 24px),calc(var(--my,0) * var(--z,1) * 16px),0) rotateY(calc(var(--mx,0) * var(--z,1) * 7deg)) rotateX(calc(var(--my,0) * var(--z,1) * -6deg));transition:transform .2s linear}
.devices{perspective:1200px}
.dev img{filter:none}
.dev .dev-cut{--h:auto;height:auto;width:100%}
.dev .dev-cut .ci{filter:drop-shadow(0 30px 36px rgba(0,8,40,.38))}
.dev--laptop{left:-6%;top:4%;width:112%}
.dev--tablet{right:-8%;top:40%;width:36%}
.dev--phone{left:0;top:46%;width:21%}

/* pricing: one card */
.pr-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center}
.pr-card{gap:16px}
.pr-card h3{font-size:clamp(28px,2.8vw,44px)}
.pr-card p{max-width:30em;font-size:18px}
.pr-card .cta-row{margin-top:10px}
.pr-ic{background:var(--blue);color:#fff}
.pr-inc{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pr-inc li{display:flex;gap:14px;font-size:18px;font-weight:700;line-height:1.35}

/* FAQ on navy */
.g-navy .qa{border-color:rgba(255,255,255,.14)}
.g-navy .qa-q{color:#fff}
.g-navy .qa-q:hover{color:var(--cyan)}
.g-navy .qa-ic{background:rgba(255,255,255,.1)}
.g-navy .qa-ic::before,.g-navy .qa-ic::after{background:var(--cyan)}
.g-navy .qa.is-open .qa-ic{background:var(--cyan)}
.g-navy .qa.is-open .qa-ic::before,.g-navy .qa.is-open .qa-ic::after{background:var(--navy)}
.g-navy .qa-a p{color:rgba(255,255,255,.8)}

/* work on your business: green */
.g-green .wi{background:var(--navy);color:var(--lime);box-shadow:none}
.g-green .why-list a{color:var(--blue)}
.g-green .orb-core>.g-b{background:linear-gradient(150deg,rgba(0,27,102,.95),rgba(0,51,231,.9));-webkit-backdrop-filter:none;backdrop-filter:none}
.g-green .orb-core::before{background:radial-gradient(closest-side,rgba(255,255,255,.6),transparent)}

/* footer: departments + industries */
.foot-grid{grid-template-columns:minmax(0,3.4fr) repeat(4,minmax(0,2fr))}

@media (max-width:1180px){
  .dcards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .icards{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr 1fr 1fr}
  .mega-col--dept .mega-list{grid-template-columns:1fr}
}
@media (max-width:899px){
  .vs{grid-template-columns:1fr}
  .three-grid{grid-template-columns:1fr}
  .pr-grid{grid-template-columns:1fr}
  .bd-stage{width:100%}
  .bw-core{width:150px}
}
@media (max-width:640px){
  .dcards,.icards{grid-template-columns:1fr}
  .dcard{min-height:190px}
  .vs-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;height:auto}
  .vs-wall{height:300px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .bw-track,.vs-track,.bw-ring{animation:none!important}
  .bw-ring{display:none}
}
.cta-head{margin-bottom:clamp(36px,4vw,64px)}
.cta .cta-head h2{white-space:normal;font-size:clamp(42px,6.8vw,116px);margin-bottom:0}
.cta-grid{align-items:start}
@media (max-width:899px){.cta .cta-head h2{font-size:clamp(38px,10.4vw,80px)}}
.calc-l h2{font-size:clamp(40px,5.2vw,84px)}
@media not ((min-width:900px) and (min-height:560px)){
  .bd-grid{grid-template-columns:1fr;gap:40px}
  .bd-copy{max-width:none}
  .bd-stage{width:100%;max-height:none}
}

/* =====================================================================
   v4: a solution, not templates — problem, your customer, rebuilt
   "built for you", horizontal three steps, the difference, the stamp
   ===================================================================== */
/* ---------- the problem (paper + lifestyle) ---------- */
.prob{padding-block:clamp(110px,12vw,180px)}
.prob-grid{display:grid;grid-template-columns:minmax(0,6.2fr) minmax(0,5.8fr);gap:clamp(48px,6vw,120px);align-items:center}
.prob-media{position:relative;padding:5% 7% 9% 0}
.prob-photo{position:relative;aspect-ratio:4/3.25;border-radius:34px;overflow:hidden;box-shadow:0 50px 90px -46px rgba(0,27,102,.6)}
.prob-photo img{width:100%;height:100%;object-fit:cover;object-position:58% 40%}
.prob-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(0,51,231,0) 45%,rgba(0,27,102,.42));pointer-events:none}
.prob-clock{position:absolute;left:5%;top:9%;z-index:3;height:42px;padding-inline:14px 16px;color:#fff;font-variant-numeric:tabular-nums}
.prob-clock>.g-b{background:linear-gradient(140deg,rgba(0,27,102,.66),rgba(0,51,231,.4))}
.prob-clock .ico{width:18px;height:18px;color:var(--cyan)}
.pq{position:absolute;z-index:4;width:min(310px,58%)}
.pq>.fl{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:20px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 44px -20px rgba(0,27,102,.5),inset 0 0 0 1px #fff}
.pq p{font-size:14.5px;line-height:1.35;color:var(--navy);font-weight:600}
.pq p b{display:block;margin-bottom:2px;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--blue)}
.pq-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:800;font-size:14px}
.pq-av--c{background:var(--cyan);color:var(--navy)}
.pq-file{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(0,51,231,.1);color:var(--blue)}
.pq-file .ico{width:20px;height:20px}
.pq--1{right:-2%;top:0}
.pq--2{left:-5%;bottom:20%}
.pq--3{right:-1%;bottom:0}
.pq--3 p b{color:var(--navy);font-size:13.5px;letter-spacing:0}
.prob-copy h2{font-size:clamp(44px,5.6vw,96px)}
.prob-copy .lead{margin-top:clamp(18px,2vw,28px);max-width:28em}
.costs{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:grid;gap:clamp(16px,1.6vw,22px)}
.costs li{display:flex;gap:16px;align-items:flex-start}
.cost-ic{flex:none;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:rgba(0,51,231,.08);color:var(--blue);box-shadow:inset 0 0 0 1px rgba(0,51,231,.16)}
.cost-ic .ico{width:24px;height:24px}
.costs b{display:block;font-size:clamp(19px,1.55vw,25px);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.costs span{display:block;margin-top:2px;color:var(--soft-fg);font-size:16px}
.prob-turn{display:inline-block;margin-top:clamp(30px,3.2vw,46px);font-size:clamp(22px,2.1vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.2;background:linear-gradient(var(--cyan),var(--cyan)) left 92%/100% .3em no-repeat}

/* ---------- your customer: Today → With Collatero (pinned) ---------- */
.pin--usp .stage{transition:background-color .8s var(--soft)}
.usp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,90px);align-items:center;width:100%}
.usp-copy{position:relative;z-index:2}
.usp-tg{position:relative;display:inline-flex;gap:2px;padding:5px;margin-bottom:clamp(22px,3.4vh,40px);border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1.5px 0 rgba(255,255,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ut{position:relative;z-index:1;height:42px;padding-inline:20px;border:0;border-radius:999px;background:none;color:rgba(255,255,255,.78);font:700 15px/1 var(--f);cursor:pointer;transition:color .35s}
.ut.is-on{color:var(--navy)}
.ut-th{position:absolute;left:5px;top:5px;bottom:5px;width:90px;border-radius:999px;background:#fff;box-shadow:0 6px 16px -6px rgba(0,8,40,.5);transition:transform .55s var(--out),width .55s var(--out),background .35s}
.usp-on .ut-th{background:var(--cyan)}
.usp-beats{display:grid}
.usp-b{grid-area:1/1}
.usp-b .t-display{font-size:clamp(38px,min(4.5vw,8.4vh),78px)}
.usp-b .lead{margin-top:clamp(14px,2.2vh,26px);max-width:25em}
.js .usp-beats .usp-b .w{transform:translateY(108%);clip-path:inset(-108% -14% 108% -14%);transition:transform .55s var(--out) calc(var(--i,0) * 30ms),clip-path .55s var(--out) calc(var(--i,0) * 30ms)}
.js .usp-beats .usp-b.is-on .w{transform:none;clip-path:inset(-30% -14% -30% -14%)}
.js .usp-beats .usp-b.is-past .w{transform:translateY(-108%);clip-path:inset(135% -14% -108% -14%);transition:transform .3s var(--in) calc(var(--i,0) * 12ms),clip-path .3s var(--in) calc(var(--i,0) * 12ms)}
.usp-b .lead{opacity:0;transform:translateY(12px);transition:opacity .35s var(--soft),transform .5s var(--out)}
.usp-b.is-on .lead{opacity:1;transform:none;transition-delay:.25s}
.usp-b:not(.is-on){pointer-events:none}
.usp-meter{display:flex;align-items:center;gap:14px;margin-top:clamp(20px,3.2vh,36px);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--soft-fg)}
.um-dots{display:flex;gap:6px}
.um-dots i{width:24px;height:8px;border-radius:4px;background:rgba(255,255,255,.18);transition:background .4s,box-shadow .4s}
.um-dots i.is-on{background:var(--cyan);box-shadow:0 0 14px rgba(0,225,255,.65)}
.usp-out{margin-top:clamp(20px,3.4vh,40px);opacity:0;transform:translateY(18px);transition:opacity .5s var(--soft),transform .6s var(--out)}
.usp-out.is-on{opacity:1;transform:none}
.uo-h{margin-bottom:14px;font-size:clamp(18px,1.5vw,24px);font-weight:800;letter-spacing:-.02em}
.usp-out ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.usp-out li{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 20px 0 8px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),inset 0 1.5px 0 rgba(255,255,255,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);scale:.85;opacity:0;transition:scale .5s var(--land),opacity .3s}
.usp-out.is-on li{scale:1;opacity:1}
.usp-out.is-on li:nth-child(2){transition-delay:.1s}.usp-out.is-on li:nth-child(3){transition-delay:.2s}
.uo-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:var(--navy)}
.uo-ic .ico{width:18px;height:18px}
.usp-out b{font-size:15px;font-weight:800;white-space:nowrap}
.usp-stage{position:relative;width:min(100%,calc(84vh * 1.08));aspect-ratio:1.08/1;margin-inline:auto}
.usp-halo{position:absolute;left:50%;top:52%;width:66%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,225,255,.5),rgba(0,51,231,.3) 55%,transparent);opacity:.25;scale:.8;transition:opacity .9s var(--soft),scale 1s var(--out);pointer-events:none}
.usp-on .usp-halo{opacity:1;scale:1}
.usp-person{position:absolute;left:50%;bottom:0;height:84%;width:auto;max-width:none;translate:-50% 0;z-index:2;filter:saturate(.25) brightness(.8);transition:filter .9s var(--soft);-webkit-mask:linear-gradient(#000 80%,transparent);mask:linear-gradient(#000 80%,transparent)}
.usp-on .usp-person{filter:none}
.tp{position:absolute;left:var(--x);top:var(--y);z-index:3;width:clamp(78px,8.6vw,138px);translate:-50% -50%;scale:0;transition:scale .55s var(--land) calc(var(--k) * 70ms)}
.usp-in .tp{scale:1}
.tp-card{position:relative;aspect-ratio:3/4;transform-style:preserve-3d;rotate:var(--rot);transition:transform .85s var(--out)}
.tp.is-yours .tp-card{transform:rotateY(180deg)}
.tp-f{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.tp-other{border-radius:12px;background:linear-gradient(160deg,#dde2ea,#bfc6d2);box-shadow:0 18px 30px -14px rgba(0,8,40,.6),inset 0 0 0 1px rgba(255,255,255,.45);overflow:hidden;opacity:.62}
.tp-other i{position:absolute;display:block;background:#9ea7b6;border-radius:4px}
.tp-logo{left:12%;top:10%;width:24%;aspect-ratio:1;border-radius:50%!important}
.tp-ln{left:12%;top:42%;width:72%;height:7%}
.tp-ln--s{top:54%;width:46%}
.tp-blk{left:12%;right:12%;bottom:10%;height:20%;background:#adb5c3!important;border-radius:6px!important}
.tp-mine{transform:rotateY(180deg)}
.tp-mine img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,8,40,.55))}
.tp-lb{position:absolute;left:50%;top:100%;translate:-50% 10px;padding:5px 10px;border-radius:999px;white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:rgba(255,255,255,.72);transition:background .4s,color .4s,box-shadow .4s}
.tp.is-yours .tp-lb{background:var(--cyan);color:var(--navy);box-shadow:0 6px 16px -6px rgba(0,225,255,.7)}

/* ---------- built just for you: learn (post-its + journey) → dashboard → need more ---------- */
.bd-stage .board{position:absolute;inset:4% 1% 3%;padding:5.5% 6% 5%;border-radius:30px;background:radial-gradient(rgba(0,27,102,.13) 1.1px,transparent 1.5px) 0 0/22px 22px,linear-gradient(160deg,rgba(255,255,255,.97),rgba(234,241,255,.92));box-shadow:0 46px 90px -44px rgba(0,27,102,.55),inset 0 0 0 1.5px #fff;transition:opacity .6s var(--soft),scale .8s var(--out),translate .8s var(--out),filter .6s var(--soft)}
.bd-stage.s1 .board{opacity:0;scale:.62;translate:0 8%;filter:blur(4px)}
.bo-t{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--soft-fg)}
.bo-dot{width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(0,51,231,.14)}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px) clamp(14px,2vw,30px);margin-top:5%}
.note{position:relative;display:block;aspect-ratio:1/.72;padding:11% 10% 10%;border-radius:4px 4px 14px 4px;font-size:clamp(13px,1.12vw,18px);font-weight:600;line-height:1.25;color:var(--navy);background:var(--nb,#fff);box-shadow:0 16px 20px -14px rgba(0,27,102,.45),inset 0 -14px 18px -14px rgba(0,27,102,.12);scale:0;rotate:calc(var(--r) + 14deg);transition:scale .45s var(--land),rotate .6s var(--out)}
.note.is-on{scale:1;rotate:var(--r)}
.note b{font-weight:800}
.note i{position:absolute;left:50%;top:-9px;width:38%;height:18px;translate:-50% 0;rotate:-4deg;background:rgba(255,255,255,.62);box-shadow:0 1px 3px rgba(0,27,102,.14)}
.nt0,.nt4{--nb:#DFFFA0}.nt1,.nt5{--nb:#C6F7FF}.nt2{--nb:#fff}.nt3{--nb:#D6E5FF}
.journey{position:relative;display:flex;justify-content:space-between;margin-top:6.5%}
.jr-line{position:absolute;left:6%;top:23px;width:88%;height:6px;overflow:visible}
.jr-line path{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100}
.jn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;width:20%}
.jn .ico{width:48px;height:48px;padding:12px;border-radius:50%;background:#fff;color:var(--blue);box-shadow:0 12px 22px -10px rgba(0,27,102,.4),inset 0 0 0 1.5px rgba(0,51,231,.2);transition:background .4s,color .4s,scale .45s var(--land)}
.jn.is-on .ico{background:var(--blue);color:#fff;scale:1.08}
.jn small{font-size:12.5px;font-weight:700;color:var(--soft-fg)}
.bd-dash .bd-device{opacity:0;translate:0 10%;scale:.9;transition:opacity .6s var(--soft),translate .8s var(--out),scale .8s var(--out)}
.bd-stage.s1 .bd-dash .bd-device{opacity:1;translate:0 0;scale:1}
.bd-auto.is-off{opacity:0;transform:translateY(30px) scale(.9)}
.bd-more .bd-add{position:absolute;right:auto;left:calc(3% + var(--k) * 17%);top:auto;bottom:-3%;width:15.5%;rotate:calc(var(--k) * 3deg - 4deg);scale:0;z-index:6;transition:scale .5s var(--land),translate .5s var(--out)}
.bd-more .bd-add.is-on{scale:1}
.bd-more .bd-add:hover{translate:0 -6px}
.bd-more .bd-ready{right:0;bottom:-11%;width:36%}

/* ---------- three steps: horizontal scroll (pinned) ---------- */
.th-wrap{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.6vh,44px);width:100%;padding-block:calc(var(--nav-h) + 4px) 28px}
.th-head .eyebrow{margin-bottom:12px}
.th-head h2{font-size:clamp(40px,min(4.8vw,8.6vh),82px)}
.th-body{position:relative;display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);column-gap:clamp(32px,4vw,80px);align-items:center}
.th-left{position:relative;z-index:2;min-width:0}
.th-view{overflow:hidden}
.th-track{display:flex;list-style:none;margin:0;padding:0;will-change:transform}
.th-p{flex:0 0 100%;min-width:0;padding-right:6%}
.th-n{display:inline-grid;place-items:center;min-width:1.4em;font-size:clamp(40px,3.8vw,68px);font-weight:800;letter-spacing:-.05em;line-height:1;color:rgba(0,225,255,.32);font-variant-numeric:tabular-nums}
.th-n--wa{width:64px;height:64px;min-width:0;border-radius:20px;background:rgba(0,225,255,.14);color:var(--cyan)}
.th-n--wa .ico{width:32px;height:32px}
.th-p h3{margin-top:14px;font-size:clamp(28px,2.7vw,46px);font-weight:500;letter-spacing:-.03em;line-height:1.08}
.th-p h3 b{font-weight:800;color:var(--cyan)}
.th-p p{margin-top:14px;max-width:22em;font-size:clamp(16px,1.2vw,19px);line-height:1.5;color:var(--soft-fg)}
.th-p .ichips{margin-top:22px}
.th-dots{display:flex;gap:10px;margin-top:clamp(24px,4.4vh,48px)}
.thd{display:flex;flex-direction:column;gap:10px;flex:1;max-width:116px;padding:0;border:0;background:none;color:rgba(255,255,255,.55);font:700 13px/1 var(--f);text-align:start;cursor:pointer;transition:color .3s}
.thd i{position:relative;height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.thd i::after{content:"";position:absolute;inset:0;background:var(--cyan);transform-origin:left;transform:scaleX(var(--f,0))}
.thd.is-on,.thd:hover{color:#fff}
.th-right{position:relative;z-index:1;min-width:0;transform-origin:50% 50%;will-change:transform}
.th-screen{position:relative;width:min(100%,calc((100vh - 300px) * 1.55));margin-inline-start:auto;transition:opacity .5s var(--soft),transform .6s var(--out)}
.th-screen .vframe{max-width:none}
.th-right.is-wa .th-screen{opacity:0;transform:translateX(-5%) scale(.94);pointer-events:none}
.th-phone{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateX(8%) scale(.96);pointer-events:none;transition:opacity .5s var(--soft) .1s,transform .7s var(--out) .1s}
.th-right.is-wa .th-phone{opacity:1;transform:none}
.th-phone .wa-phone{width:auto;height:min(calc(100vh - 290px),560px);margin:0}
.th-phone .wa-phone::after{content:"";position:absolute;inset:8% 6% -4%;z-index:-1;border-radius:40px;background:rgba(0,8,40,.55);filter:blur(36px)}
.th-screen .d-pop{right:-3%;top:50%;width:38%}

/* ---------- the difference ---------- */
.diff{padding-block:clamp(110px,12vw,180px)}
.diff .vs{margin-top:clamp(48px,6vw,90px)}
.vs-ic--c{background:var(--blue);box-shadow:0 10px 24px -10px rgba(0,51,231,.8),inset 0 1.5px 0 rgba(255,255,255,.4)}
.vs-ic--c svg{width:30px;height:30px;fill:#fff}
.vs-bar{display:none}
.vs-load{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .3s}
.vs-slot.is-work .vs-load{opacity:1}
.vs-ring{position:absolute;width:56%;aspect-ratio:1;rotate:-90deg}
.vs-ring circle{fill:none;stroke-width:3.4}
.vs-ring .rt{stroke:rgba(255,255,255,.12)}
.vs-ring .rf{stroke:var(--cyan);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px rgba(0,225,255,.6))}
.vs-slot.is-work .vs-ring .rf{animation:ringfill 4.2s linear forwards}
@keyframes ringfill{to{stroke-dashoffset:0}}
.vs-t{position:relative;font-size:clamp(11px,.95vw,14px);font-weight:800;font-variant-numeric:tabular-nums;color:#fff}

/* ---------- departments + industries: more pieces, fully in view ---------- */
.dcard,.icard{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:clamp(330px,25vw,400px);padding:clamp(16px,1.6vw,22px)}
.dcard .dc-go,.icard .dc-go{margin-top:6px}
.dc-fan{position:absolute;left:0;right:0;bottom:0;height:50%;z-index:1;pointer-events:none}
.pf{position:absolute;bottom:-10%;height:92%;width:auto;max-width:56%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 14px 18px rgba(0,27,102,.32));transition:transform .6s var(--out),rotate .6s var(--out)}
.pf--0{left:2%;rotate:-11deg;z-index:1;bottom:-14%}
.pf--1{left:50%;translate:-50% 0;rotate:2deg;z-index:3;bottom:-6%;height:100%}
.pf--2{right:2%;rotate:11deg;z-index:2;bottom:-14%}
.dcard:hover .pf--0,.icard:hover .pf--0{transform:translate(-6%,-10%);rotate:-6deg}
.dcard:hover .pf--1,.icard:hover .pf--1{transform:translateY(-10%);rotate:0deg}
.dcard:hover .pf--2,.icard:hover .pf--2{transform:translate(6%,-10%);rotate:6deg}
.icards{grid-template-columns:repeat(4,minmax(0,1fr))}
.icard{grid-template-columns:none}
.icard .ic-team{font-size:clamp(19px,1.5vw,24px)}
.dc-fan--ind .pf{filter:drop-shadow(0 18px 22px rgba(0,8,40,.5))}
.icard .dc-hook{max-width:15em}

/* ---------- hours saved: a statement with a live number ---------- */
.calc-h{font-size:clamp(44px,6.2vw,108px)}
.calc-hrs{font-variant-numeric:tabular-nums;white-space:nowrap}
.calc .calc-grid{margin-top:clamp(40px,5vw,76px);grid-template-columns:minmax(0,5.6fr) minmax(0,6.4fr)}
.calc .calc-in{margin-top:0}
.calc-r .calc-sub{margin-top:0;font-size:clamp(18px,1.55vw,24px);font-weight:600;color:var(--navy)}
.calc-r .days{margin-top:22px}

/* ---------- guarantee: one line at a time, then the stamp ---------- */
.pin--guar .stage{align-items:center}
.guar-wrap{position:relative;width:100%;padding-block:clamp(90px,10vh,140px)}
.guar-wrap .guar-lines{display:flex;flex-direction:column;gap:.04em}
.guar-wrap .ctrail .o{opacity:0;transition:opacity .25s var(--soft) calc(var(--j) * 90ms)}
.guar-wrap.g-trail .ctrail .o{opacity:calc(.12 + var(--j) * .14)}
.guar-wrap .ctrail .s{transform:translateX(-520%);opacity:0;transition:transform .8s var(--out),opacity .2s}
.guar-wrap.g-c .ctrail .s{transform:none;opacity:1}
.guar-wrap .guar-foot{opacity:0;transform:translateY(16px);transition:opacity .5s var(--soft),transform .6s var(--out)}
.guar-wrap.g-stamp .guar-foot{opacity:1;transform:none;transition-delay:.5s}
.guar-seal{position:absolute;right:0;top:50%;width:clamp(190px,20vw,330px);aspect-ratio:1;margin-top:calc(clamp(190px,20vw,330px) / -2);z-index:3;opacity:0;scale:3.4;rotate:-28deg;filter:blur(10px);pointer-events:none}
.guar-wrap.g-stamp .guar-seal{animation:stampin .62s cubic-bezier(.55,0,.7,.2) forwards;pointer-events:auto}
@keyframes stampin{0%{opacity:0;scale:3.4;rotate:-28deg;filter:blur(10px)}62%{opacity:1;scale:.9;rotate:-6deg;filter:none}80%{scale:1.05;rotate:-9deg}100%{opacity:1;scale:1;rotate:-8deg;filter:none}}
.guar-seal::after{content:"";position:absolute;inset:-6%;border-radius:50%;border:3px solid var(--cyan);opacity:0;scale:.7}
.guar-wrap.g-stamp .guar-seal::after{animation:stampring .8s var(--out) .38s}
@keyframes stampring{0%{opacity:.9;scale:.8}100%{opacity:0;scale:1.6}}
.guar-wrap.g-stamp .guar-lines{animation:thud .4s var(--out) .36s}
@keyframes thud{0%,100%{transform:none}30%{transform:translate(3px,4px)}60%{transform:translate(-2px,-1px)}}
.guar-seal .seal{width:100%}

/* ---------- work on your business: endless diagonal grid ---------- */
.why{display:flex;align-items:center;min-height:min(980px,100vh)}
.why-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.4) 50%,#000 74%);mask:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.4) 50%,#000 74%)}
.why-rot{--wh:clamp(120px,10.5vw,184px);position:absolute;left:50%;top:50%;width:240%;translate:-50% -50%;rotate:-34deg;display:grid;gap:clamp(18px,1.8vw,30px)}
.wr-row .bw-track{animation:bwmove var(--dur,70s) linear infinite}
.wr-row--rev .bw-track{animation-direction:reverse}
.wr-it{flex:none;padding-inline-end:clamp(18px,1.8vw,30px)}
.wr-it .cut{rotate:0deg}
.wr-it .cut .ci{filter:drop-shadow(0 16px 22px rgba(0,27,102,.3))}
.why-in{position:relative;z-index:2}
.why-in>div{max-width:min(680px,54%)}
.why-in .why-list{max-width:520px}

/* ---------- desktop pins ---------- */
@media (min-width:900px) and (min-height:560px){
  .pin--usp{height:270vh}
  .pin--build{height:340vh}
  .pin--three{height:430vh}
  .pin--guar{height:310vh}
  .pin--three>.stage{align-items:stretch}
}
/* ---------- touch / short screens: no pins ---------- */
@media not ((min-width:900px) and (min-height:560px)){
  .pin--usp>.stage,.pin--three>.stage,.pin--guar>.stage{padding-block:100px 90px}
  .usp-grid{grid-template-columns:1fr;gap:28px}
  .usp-stage{width:min(100%,560px)}
  .tp{width:clamp(64px,19vw,110px)}
  .tp-lb{font-size:10.5px;padding:4px 8px}
  .th-wrap{padding-block:0}
  .th-body{grid-template-columns:1fr;row-gap:28px}
  .th-right{order:-1}
  .th-screen{width:100%}
  .th-view{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(var(--m) * -1);padding-inline:var(--m)}
  .th-view::-webkit-scrollbar{display:none}
  .th-track{gap:14px;transform:none!important}
  .th-p{flex:0 0 86%;scroll-snap-align:start;padding:22px;border-radius:24px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
  .th-phone .wa-phone{height:min(70vw,520px)}
  .guar-seal{position:relative;top:auto;right:auto;margin:36px 0 0;width:180px}
  .bd-more .bd-ready{bottom:-14%}
}
@media (max-width:1180px){
  .icards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .prob-grid{grid-template-columns:1fr}
  .prob-media{padding:6% 3% 12% 0;max-width:640px}
  .pq{width:min(280px,70%)}
  .pq--2{left:-2%}
  .calc .calc-grid{grid-template-columns:1fr}
  .why{min-height:0;padding-bottom:300px}
  .why-bg{-webkit-mask:linear-gradient(180deg,transparent 52%,#000 82%);mask:linear-gradient(180deg,transparent 52%,#000 82%)}
  .why-rot{top:78%;width:340%}
  .why-in>div{max-width:none}
}
@media (max-width:640px){
  .icards{grid-template-columns:1fr}
  .dcard,.icard{min-height:300px}
  .pq p{font-size:13px}
  .usp-out li{height:44px;padding-right:14px}
  .usp-out b{font-size:14px}
  .notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .note{font-size:12px}
  .nt5{display:none}
  .jn .ico{width:36px;height:36px;padding:8px}
  .jr-line{top:17px}
  .jn small{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .wr-row .bw-track{animation:none!important}
  .guar-wrap.g-stamp .guar-seal{animation:none;opacity:1;scale:1;rotate:-8deg;filter:none}
}
/* v4 fixes */
.dcard>.dc-fan,.icard>.dc-fan{position:absolute}
.prob-copy h2{font-size:clamp(40px,4.7vw,82px)}
.usp-grid{grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr)}
.usp-b .t-display{font-size:clamp(36px,min(3.9vw,7.6vh),68px)}
.why-h{font-size:clamp(42px,5.2vw,90px)}
.why-bg{-webkit-mask:linear-gradient(90deg,transparent 38%,rgba(0,0,0,.35) 56%,#000 78%);mask:linear-gradient(90deg,transparent 38%,rgba(0,0,0,.35) 56%,#000 78%)}
.guar-seal{right:var(--m);top:14%;margin-top:0}
.bd-more .bd-add{display:grid;place-items:center;aspect-ratio:760/1000;height:auto;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(232,240,255,.8));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 2px rgba(0,51,231,.22),0 22px 36px -18px rgba(0,27,102,.5);pointer-events:auto}
.bd-more .bd-add::before{content:"";position:absolute;inset:9%;border-radius:12px;border:2px dashed rgba(0,51,231,.32)}
.bd-more .bd-add i{display:grid;place-items:center;width:44%;aspect-ratio:1;border-radius:50%;background:var(--blue);color:#fff;box-shadow:0 10px 20px -8px rgba(0,51,231,.7)}
.bd-more .bd-add .ico{width:46%;height:46%;stroke-width:2.4}
@media not ((min-width:900px) and (min-height:560px)){.guar-seal{right:auto;top:auto}}
@media not ((min-width:900px) and (min-height:560px)){
  .usp-grid{grid-template-columns:1fr}
  .guar-seal{position:relative;right:auto;top:auto;margin:40px 0 0;width:190px}
}
@media (max-width:899px){
  .why-bg{-webkit-mask:linear-gradient(180deg,transparent 54%,#000 84%);mask:linear-gradient(180deg,transparent 54%,#000 84%)}
  .why-in>div{max-width:none}
}
@media (min-width:900px){.why-in>div{max-width:min(720px,58%)}}
@media (min-width:900px) and (min-height:560px){.guar-seal{top:2%;width:clamp(170px,17vw,300px)}}

/* =====================================================================
   v5: generate moments, learning meter, any device, fast generation,
   people freed up, shield summary, three-step contact form
   ===================================================================== */
/* ---------- hero: Generate, the cursor, the pieces fly out, the stopwatch ---------- */
.hp{z-index:5}
.gen-btn{position:absolute;left:50%;top:60%;z-index:4;translate:-50% -50%;display:inline-flex;align-items:center;gap:12px;height:clamp(54px,4.6vw,66px);padding:0 clamp(22px,2vw,30px) 0 10px;border:0;border-radius:999px;background:#fff;color:var(--blue);font:800 clamp(17px,1.5vw,22px)/1 var(--f);letter-spacing:-.01em;cursor:pointer;box-shadow:0 28px 54px -18px rgba(0,8,40,.7),0 0 0 7px rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,51,231,.12);transition:scale .18s var(--out),box-shadow .35s var(--soft)}
.gen-btn:hover{box-shadow:0 34px 60px -18px rgba(0,8,40,.75),0 0 0 10px rgba(255,255,255,.26),inset 0 -3px 0 rgba(0,51,231,.12)}
.gen-btn.is-down{scale:.92}
.gb-ic{flex:none;width:clamp(36px,3.2vw,46px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff}
.gb-ic .ico{width:50%;height:50%}
.gen-btn::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:3px solid var(--cyan);opacity:0;pointer-events:none}
.hero-media.is-gen .gen-btn::after{animation:genring .75s var(--out)}
@keyframes genring{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.35,1.7)}}
.hcur{position:absolute;left:94%;top:112%;z-index:8;width:clamp(24px,2vw,32px);opacity:0;pointer-events:none;transition:left .95s var(--inout),top .95s var(--inout),opacity .3s}
.hcur.is-on{opacity:1}
.hcur.is-at{left:calc(50% + 40px);top:calc(60% + 4px)}
.hcur svg{width:100%;height:auto;filter:drop-shadow(0 4px 8px rgba(0,8,40,.45));transition:scale .15s}
.hcur.is-down svg{scale:.8}
.hcur::before{content:"";position:absolute;left:-55%;top:-55%;width:110%;aspect-ratio:1;border-radius:50%;border:3px solid var(--cyan);opacity:0}
.hcur.is-down::before{animation:ripple .55s var(--out)}
.js .hp .cut.gpop{scale:0;opacity:0}
.hero-media.is-gen .hp .cut.gpop{animation:genfly .95s var(--out) calc(var(--gi,0) * 120ms) both}
.js .hp .cut.gpop.is-flown{animation:none;scale:1;opacity:1}
@keyframes genfly{0%{translate:var(--fx,0) var(--fy,0);scale:.12;opacity:0}12%{opacity:1}72%{scale:1.05}100%{translate:0 0;scale:1;opacity:1}}
.hp--watch{left:31%;bottom:-33%;z-index:6}
.watch{position:relative;width:clamp(118px,10vw,170px);aspect-ratio:200/224;scale:0;rotate:-16deg;transition:scale .6s var(--land),rotate .8s var(--out)}
.hero-media.is-timed .watch{scale:1;rotate:-6deg}
.w-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 24px 28px rgba(0,8,40,.5))}
.w-crown{fill:#9BE21C}
.w-body{fill:var(--lime)}
.w-face{fill:#C9FF68;stroke:rgba(0,27,102,.12);stroke-width:2}
.w-ticks line{stroke:var(--navy);stroke-width:3.2;stroke-linecap:round;opacity:.32}
.w-arc{fill:none;stroke:var(--navy);stroke-width:8;stroke-linecap:round;stroke-dasharray:0 100}
.hero-media.is-timed .w-arc{animation:warc 1.3s var(--out) .3s forwards}
@keyframes warc{to{stroke-dasharray:25 100}}
.w-txt{position:absolute;left:0;right:0;top:56.3%;translate:0 -50%;display:flex;flex-direction:column;align-items:center;color:var(--navy);line-height:1;text-align:center}
.w-txt small{font-size:clamp(9px,.74vw,12px);font-weight:700;letter-spacing:.02em}
.w-txt b{font-size:clamp(34px,3vw,52px);font-weight:800;letter-spacing:-.05em;line-height:.92}
.w-txt em{margin-top:6px;padding:3px 8px;border-radius:999px;background:var(--navy);color:var(--lime);font-style:normal;font-size:clamp(7.5px,.6vw,10px);font-weight:800;letter-spacing:.18em;text-transform:uppercase}
@media (max-width:899px){
  .hp--watch{left:auto;right:30%;bottom:-30%}
  .gen-btn{top:58%}
  .hcur.is-at{left:calc(50% + 30px);top:calc(58% + 2px)}
}

/* ---------- brand wall: room above and below, a big Generate in the middle ---------- */
.bw-wall{margin-top:clamp(28px,3.6vw,60px);padding-block:clamp(30px,3.4vw,56px)}
.bw{padding-bottom:clamp(70px,8vw,130px)}
.bw-core{width:auto;aspect-ratio:auto;display:grid;place-items:center}
.bw-core .bw-ring{inset:0;border-radius:999px;border:2.5px solid rgba(0,27,102,.5);animation:bwring 3.2s var(--out) var(--rd,0s) infinite}
@keyframes bwring{0%,63%{transform:scale(1);opacity:0}65%{opacity:.85}100%{transform:scale(1.32,1.9);opacity:0}}
.bw-gen{position:relative;z-index:1;display:inline-flex;align-items:center;gap:clamp(12px,1.2vw,18px);height:clamp(72px,7vw,108px);padding:0 clamp(32px,3.2vw,52px) 0 clamp(12px,1.1vw,16px);border-radius:999px;background:var(--navy);color:#fff;font:800 clamp(26px,2.6vw,42px)/1 var(--f);letter-spacing:-.025em;white-space:nowrap;box-shadow:0 44px 70px -24px rgba(0,27,102,.75),0 0 0 9px rgba(255,255,255,.4),inset 0 1.5px 0 rgba(255,255,255,.3);animation:bwpress 3.2s var(--soft) infinite;pointer-events:auto}
.bw-gen .gb-ic{width:clamp(50px,4.8vw,78px);background:var(--lime);color:var(--navy)}
@keyframes bwpress{0%,60%,100%{scale:1}64%{scale:.94}70%{scale:1.03}76%{scale:1}}
.bw-cur{position:absolute;right:-5%;bottom:-46%;z-index:2;width:clamp(46px,4.4vw,70px);pointer-events:none;animation:bwcur 3.2s var(--soft) infinite}
.bw-cur svg{width:100%;height:auto;filter:drop-shadow(0 12px 18px rgba(0,8,40,.4))}
@keyframes bwcur{0%{transform:translate(34px,30px)}48%,88%{transform:translate(0,0)}62%{transform:translate(0,0) scale(1)}65%{transform:translate(0,0) scale(.82)}70%{transform:translate(0,0) scale(1)}100%{transform:translate(34px,30px)}}

/* ---------- the problem: "The same collaterals." ---------- */
.prob-grid{grid-template-columns:minmax(0,5.8fr) minmax(0,6.2fr)}
.prob-copy h2{font-size:clamp(38px,4.05vw,72px)}
.costs li{align-items:center}

/* ---------- built just for you: learn inside out ---------- */
.notes{gap:clamp(10px,1.3vw,20px) clamp(12px,1.6vw,24px);margin-top:4.5%}
.note{aspect-ratio:auto;min-height:clamp(84px,7.6vw,120px);padding:clamp(12px,1.1vw,18px) clamp(12px,1.1vw,16px)}
.note b{display:block;font-size:clamp(13px,1.08vw,17px);line-height:1.15}
.note small{display:block;margin-top:6px;font-size:clamp(10.5px,.8vw,13px);font-weight:500;line-height:1.32;color:rgba(0,27,102,.72)}
.aud{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4.5%}
.aud small{width:100%;margin-bottom:2px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--soft-fg)}
.aud span{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px 0 9px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(0,51,231,.18),0 8px 16px -10px rgba(0,27,102,.45);font-size:13px;font-weight:700;color:var(--navy);scale:.6;opacity:0;transition:scale .45s var(--land),opacity .3s}
.aud span.is-on{scale:1;opacity:1}
.aud .ico{width:16px;height:16px;color:var(--blue)}
.learn{display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px 12px;margin-top:4.5%}
.lrn-l{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--navy)}
.lrn-p{font-size:clamp(20px,1.8vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.lrn-bar{grid-column:1/-1;position:relative;height:10px;border-radius:999px;background:rgba(0,27,102,.1);overflow:hidden}
.lrn-bar>i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan));transform-origin:left;transform:scaleX(var(--lp,0));transition:transform .2s linear}
.learn.is-done .lrn-p{color:var(--navy)}
.bd-auto{width:40%;left:-1%;bottom:5%}
.bd-card{width:19.5%}

/* ---------- three steps, step 4: any device, WhatsApp in 3D layers ---------- */
.th-devs{position:absolute;inset:0;pointer-events:none}
.dv{position:absolute;opacity:0;transform:translateY(34px) scale(.94);filter:drop-shadow(0 30px 40px rgba(0,8,40,.55));transition:opacity .5s var(--soft),transform .8s var(--out)}
.th-right.is-wa .dv{opacity:1;transform:none}
.dv--laptop{left:0;top:16%;width:58%;z-index:2;transition-delay:.05s}
.dv--tablet{left:40%;top:-2%;width:19%;z-index:1;transition-delay:.15s}
.dv--phone{left:1%;bottom:-4%;width:10.5%;z-index:3;transition-delay:.25s}
.wa3d{position:absolute;right:6%;top:-8%;height:116%;aspect-ratio:940/1944;z-index:4;perspective:1300px;opacity:0;transform:translateX(50px);transition:opacity .5s var(--soft) .3s,transform .9s var(--out) .3s}
.th-right.is-wa .wa3d{opacity:1;transform:none}
.wa3d .wa-phone{position:relative;width:100%;height:100%;margin:0;aspect-ratio:auto;transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(6deg) rotateZ(1deg)}
.wa3d .wa-phone::after{content:"";position:absolute;inset:8% 6% -4%;z-index:-1;border-radius:40px;background:rgba(0,8,40,.55);filter:blur(34px);transform:translateZ(-40px)}
.wa3d .wa-pop{position:absolute;z-index:6;opacity:0;transform:translateZ(0) scale(.86);filter:drop-shadow(0 26px 28px rgba(0,8,40,.5));transition:opacity .4s var(--soft),transform .8s var(--land)}
.wa3d .wa-vn{left:auto;right:-16%;top:27%;width:78%;transform-origin:right center}
.wa3d .wa-cert{left:-22%;top:42%;width:76%;transform-origin:left center}
.wa3d .wa-vn.is-on{opacity:1;transform:translateZ(80px) scale(1)}
.wa3d .wa-cert.is-on{opacity:1;transform:translateZ(130px) scale(1)}
.wa-tag{position:absolute;left:50%;bottom:-2%;translate:-50% 0;z-index:7;height:40px;padding-inline:12px 16px;color:#fff;font-size:14px}
.wa-tag>.g-b{background:linear-gradient(140deg,rgba(37,211,102,.55),rgba(0,27,102,.5))}
.wa-tag .ico{width:18px;height:18px;color:#7CF5A8}
.th-n--wa .ico{width:32px;height:32px}

/* ---------- the difference: Collatero generates, fast ---------- */
.vs-grid--fast{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.vs-slot--f{aspect-ratio:3/4;border-radius:10px}
.vs-slot--f img{width:86%;height:86%;transition:opacity .12s,scale .25s var(--land)}
.vs-qbar{position:absolute;left:14%;right:14%;bottom:9%;height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;opacity:0}
.vs-qbar::after{content:"";position:absolute;inset:0;background:var(--cyan);transform-origin:left;transform:scaleX(0)}
.vs-slot--f.is-work{box-shadow:inset 0 0 0 1.5px rgba(0,225,255,.8),0 0 18px rgba(0,225,255,.25)}
.vs-slot--f.is-work .vs-qbar{opacity:1}
.vs-slot--f.is-work .vs-qbar::after{animation:work .15s linear forwards}
.vs-slot--f.is-on .vs-qbar{opacity:0}
@media (max-width:640px){.vs-grid--fast{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;height:auto}}

/* ---------- departments + industries: clean cards ---------- */
.dcard,.icard{min-height:clamp(200px,15.5vw,240px)}
.dcard .dc-go,.icard .dc-go{margin-top:auto}

/* ---------- hours saved: people freed up ---------- */
.calc-r{display:flex;flex-direction:column;align-items:flex-start}
.ppl{display:flex;gap:clamp(4px,.8vw,12px);margin-bottom:clamp(14px,1.6vw,24px)}
.pp{position:relative;width:clamp(50px,5vw,84px);aspect-ratio:1}
.pp svg{position:absolute;inset:0;width:100%;height:100%}
.pp-b{fill:rgba(0,27,102,.13)}
.pp-f{fill:var(--navy);clip-path:inset(0 calc((1 - var(--f,0)) * 100%) 0 0)}
.ppl-big{display:flex;align-items:baseline;gap:12px;font-size:clamp(64px,7vw,124px);font-weight:800;letter-spacing:-.055em;line-height:.88;color:var(--blue);font-variant-numeric:tabular-nums}
.ppl-big span{font-size:clamp(26px,2.4vw,42px);letter-spacing:-.025em;color:var(--navy)}
.ppl-sub{margin-top:10px;font-size:clamp(18px,1.55vw,25px);font-weight:700;color:var(--navy)}
.calc-r .calc-note{margin-top:14px;font-size:14px;color:var(--soft-fg)}

/* ---------- guarantee: three outlines, then the C ---------- */
.ctrail--3{aspect-ratio:2.26/1}
.ctrail--3 svg{left:calc(var(--j) * 18.4%)}
.ctrail--3 .s{left:calc(3 * 18.4%)}
.guar-wrap .ctrail--3 .s{transform:translateX(-300%)}
.guar-wrap.g-c .ctrail--3 .s{transform:none}
.guar-wrap.g-trail .ctrail--3 .o{opacity:calc(.2 + var(--j) * .2)}

/* ---------- why Collatero: four short points + the shield ---------- */
.why{display:block;min-height:0}
.why-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;margin-top:0}
.why-l .lead{margin-top:clamp(16px,1.8vw,26px);max-width:31em}
.why-pts{list-style:none;margin:clamp(28px,3vw,44px) 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px) clamp(18px,2.4vw,40px);max-width:680px}
.why-pts li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
.why-pts .wi{grid-row:1/3;width:46px;height:46px;border-radius:14px}
.why-pts .wi .ico{width:22px;height:22px}
.why-pts b{align-self:end;font-size:clamp(17px,1.35vw,21px);font-weight:800;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.why-pts li>span:last-child{align-self:start;font-size:14.5px;line-height:1.35;color:var(--soft-fg)}
.shield-wrap{position:relative;display:grid;place-items:center;aspect-ratio:1/1.05}
.shield-wrap>.fl{position:relative;display:grid;place-items:center;width:100%}
.shield{width:min(360px,76%);height:auto;overflow:visible;filter:drop-shadow(0 40px 56px rgba(0,27,102,.5))}
.sh-glow{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.8),rgba(255,255,255,0));animation:breathe 6s var(--soft) infinite alternate}
.sh-sweep{animation:shsweep 5.5s var(--soft) infinite}
@keyframes shsweep{0%,55%{transform:translateX(0)}100%{transform:translateX(460px)}}
.sh-badge{position:absolute;right:22%;bottom:12%;width:clamp(56px,5vw,80px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--lime);box-shadow:0 16px 28px -8px rgba(0,27,102,.6),0 0 0 7px rgba(255,255,255,.55)}
.sh-badge svg{width:56%}
.sh-chip{position:absolute;z-index:2;height:44px;color:var(--navy);font-size:14px}
.sh-chip--1{left:0;top:24%}
.sh-chip--2{right:0;bottom:30%}
@media (max-width:899px){
  .why{padding-bottom:clamp(90px,12vw,140px)}
  .why-pts{grid-template-columns:1fr}
  .shield-wrap{max-width:420px;margin-inline:auto}
}

/* ---------- contact: three rows left, the form in three steps right ---------- */
.cta-grid{grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr);align-items:center}
.cta-l h2{font-size:clamp(44px,5vw,88px);white-space:normal;margin-bottom:clamp(20px,2.2vw,34px)}
.cta-l .lead{margin-bottom:28px}
.fsteps{list-style:none;margin:0 0 24px;padding:0;display:flex;gap:10px}
.fs-i{flex:1;display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:3px solid rgba(255,255,255,.16);font-size:13.5px;font-weight:700;color:rgba(255,255,255,.62);transition:border-color .35s,color .35s}
.fs-i b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:rgba(255,255,255,.12);transition:background .35s,color .35s}
.fs-i.is-on{border-color:var(--cyan);color:#fff}
.fs-i.is-on b{background:var(--cyan);color:var(--navy)}
.fs-i.is-done{border-color:rgba(0,225,255,.5);color:#fff;cursor:pointer}
.fs-i.is-done b{background:rgba(0,225,255,.28)}
.fstep:not([hidden]){animation:fstepin .45s var(--out)}
@keyframes fstepin{from{opacity:0;transform:translateX(18px)}}
.fstep[data-step="2"] fieldset{grid-column:1/-1}
.form-foot{justify-content:flex-start;margin-top:24px}
.f-sp{flex:1}
.f-back{color:#fff}
.form .consent{margin-top:16px}
@media (max-width:640px){.fs-i span{display:none}.fs-i{justify-content:center}}
@media (prefers-reduced-motion:reduce){
  .bw-gen,.bw-cur,.bw-core .bw-ring,.sh-sweep,.sh-glow{animation:none!important}
  .js .hp .cut.gpop{scale:1;opacity:1}
  .watch{scale:1}
}
@media (max-width:899px){
  .prob-grid,.why-grid,.cta-grid{grid-template-columns:1fr}
  .cta-l h2{font-size:clamp(40px,11vw,72px)}
  .hp--watch{left:auto;right:28%;bottom:-52%}
  .watch{width:104px}
  .bw-gen{height:64px;font-size:24px;padding-inline:10px 26px}
  .bw-gen .gb-ic{width:46px}
  .bw-cur{width:40px;bottom:-56%}
}
/* v6: the problem on navy (it now follows the paper client strip) */
.prob.g-navy .cost-ic{background:rgba(0,225,255,.12);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(0,225,255,.3)}
.prob.g-navy .prob-photo{box-shadow:0 50px 90px -40px rgba(0,8,40,.85),0 0 0 1px rgba(255,255,255,.08)}
.prob.g-navy .pq>.fl{box-shadow:0 24px 44px -18px rgba(0,8,40,.7),inset 0 0 0 1px #fff}

/* =====================================================================
   v7: the problem, from above: 3D layers, shine, a pile of requests
   ===================================================================== */
.prob-media{position:relative;padding:4% 6% 6% 0;perspective:1400px}
.pm-l{transform:translate3d(calc(var(--mx,0) * var(--z,1) * 22px),calc(var(--my,0) * var(--z,1) * 16px),0) rotateY(calc(var(--mx,0) * var(--z,1) * 4deg)) rotateX(calc(var(--my,0) * var(--z,1) * -3deg));transition:transform .2s linear}
.pm-l+.pm-l{position:absolute;inset:4% 6% 6% 0;pointer-events:none}
.prob-photo{aspect-ratio:1600/1066;border-radius:32px}
.prob-photo img{object-position:center;transition:scale 1.4s var(--out),filter .6s}
.prob-photo::after{background:linear-gradient(200deg,rgba(0,51,231,0) 50%,rgba(0,27,102,.35))}
.prob-photo:hover img{scale:1.045}
.pp-shine{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:inherit;pointer-events:none}
.pp-shine::before{content:"";position:absolute;top:-40%;left:-70%;width:38%;height:180%;transform:rotate(20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.42) 50%,transparent)}
.pp-shine::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 30% 20%,rgba(255,255,255,.14),transparent 70%);opacity:0;transition:opacity .5s}
.prob-photo:hover .pp-shine::before{animation:ppsweep 1.15s var(--soft)}
.prob-photo:hover .pp-shine::after{opacity:1}
@keyframes ppsweep{to{left:135%}}
.prob-clock{left:4%;top:6%}
.rq{position:absolute;right:-7%;top:-6%;width:min(310px,54%)}
.rq-n{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;margin-bottom:14px;border-radius:999px;background:var(--cyan);color:var(--navy);font-size:13.5px;font-weight:800;box-shadow:0 14px 26px -12px rgba(0,225,255,.7);transition:scale .3s var(--land)}
.rq-n .ico{width:18px;height:18px}
.rq-n b{font-variant-numeric:tabular-nums}
.rq.bump .rq-n{animation:rqbump .45s var(--land)}
@keyframes rqbump{40%{scale:1.12}}
.rq-stack{position:relative;height:clamp(130px,11vw,170px)}
.rqc{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 22px 40px -18px rgba(0,8,40,.65),inset 0 0 0 1px #fff;opacity:0;transform:translateY(-46px) scale(.92) rotate(-2deg);transition:transform .6s var(--land),opacity .35s var(--soft)}
.rqc.is-in{opacity:calc(1 - var(--s,0) * .2);transform:translateY(calc(var(--s,0) * 15px)) scale(calc(1 - var(--s,0) * .05));z-index:calc(10 - var(--s,0))}
.rqc.is-old{opacity:0;transform:translateY(64px) scale(.8);z-index:0}
.rqc.is-gone{opacity:0;transform:translateY(40px) scale(.9)}
.rqc p{font-size:14px;line-height:1.35;color:var(--navy);font-weight:600}
.rqc p b{display:block;margin-bottom:1px;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--blue)}
.pq-av--f{background:rgba(0,51,231,.12);color:var(--blue)}
.costs em{font-style:normal;background:linear-gradient(var(--cyan),var(--cyan)) left 92%/0% .13em no-repeat;transition:background-size .7s var(--out) calc(var(--d,0ms) + 450ms)}
.is-in .costs em,.costs .is-in em{background-size:100% .13em}
.js .costs .cost-ic{scale:0;transition:scale .55s var(--land) calc(var(--d,0ms) + 120ms)}
.js .is-in .costs .cost-ic,.js .costs .is-in .cost-ic{scale:1}
.prob-turn{background-size:calc(var(--k,0) * 100%) .3em;transition:background-size .15s linear}
@media (max-width:899px){
  .prob-media{padding:10% 4% 4% 0}
  .pm-l+.pm-l{inset:10% 4% 4% 0}
  .rq{right:-2%;top:-12%;width:min(260px,64%)}
  .rq-stack{height:120px}
  .rqc p{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.js .costs .cost-ic{scale:1}.costs em{background-size:100% .13em}}
.prob-grid{grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr);gap:clamp(40px,5vw,96px)}
.prob-copy h2{font-size:clamp(36px,3.75vw,66px)}
.prob-media{padding:3% 4% 9% 0}
.pm-l+.pm-l{inset:3% 4% 9% 0}
.rq{top:auto;bottom:-6%;right:-9%;width:min(300px,48%)}
@media (max-width:899px){.prob-media{padding:4% 4% 18% 0}.pm-l+.pm-l{inset:4% 4% 18% 0}.rq{bottom:-14%;right:-2%;width:min(250px,66%)}}
.rqc>*{transition:opacity .35s var(--soft)}
.rqc.is-in>*{opacity:calc(1 - var(--s,0) * .75)}
/* phone layouts last, so nothing above overrides them */
@media (max-width:899px){
  .prob-grid,.why-grid,.cta-grid,.usp-grid{grid-template-columns:1fr}
  .prob-copy h2{font-size:clamp(38px,10.4vw,64px)}
}
/* v8: the brand film */
.film-sec{padding-block:clamp(100px,11vw,170px)}
.film-head h2{font-size:clamp(42px,5.4vw,96px)}
.film-frame{max-width:1180px;margin:clamp(40px,5vw,72px) auto 0}
.film-frame .vframe{padding:clamp(8px,1vw,14px)}
.film-frame .vf-pill{height:52px;padding-inline:18px 24px;font-size:15px}
.film-frame .vf-pill .pl{width:30px;height:30px}
/* v9: centre play button, frosted glass */
.vframe[data-ready="true"] .vf-screen{cursor:pointer}
.vframe.is-full .vf-screen{cursor:auto}
.vf-play{--s:clamp(64px,13cqw,124px);position:absolute;left:50%;top:50%;z-index:4;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;border:1px solid rgba(255,255,255,.55);padding:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.42),rgba(255,255,255,.1) 50%,rgba(0,27,102,.18));
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -10px 22px rgba(0,27,102,.18),0 18px 44px rgba(0,12,51,.38);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s,box-shadow .35s}
.vf-play svg{position:relative;width:38%;height:38%;margin-left:7%;fill:#fff;filter:drop-shadow(0 3px 8px rgba(0,12,51,.35))}
.vf-play .vp-ring{position:absolute;inset:-1px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);pointer-events:none;animation:vpRing 2.6s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes vpRing{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.45);opacity:0}}
.vframe[data-ready="true"] .vf-screen:hover .vf-play,.vf-play:focus-visible{transform:scale(1.08);background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.55),rgba(255,255,255,.16) 50%,rgba(0,27,102,.12))}
.vf-play:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.vf-play:active{transform:scale(.97)}
.vf-play[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.vf-play .vp-ring{animation:none;opacity:0}}
/* v9: legal pages */
.legal .body{line-height:1.6;color:rgba(11,16,32,.86)}
.legal .body h2{color:var(--ink);scroll-margin-top:110px}
.legal .body h3{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-top:6px}
.legal .body ul{margin:0;padding-left:1.25em;display:grid;gap:8px}
.legal .body li::marker{color:var(--blue)}
.legal .body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal .body a:hover{text-decoration-thickness:2px}
.legal .upd{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(11,16,32,.55)}
.legal .tldr{padding:clamp(20px,2.4vw,30px);border-radius:22px;background:#fff;box-shadow:0 1px 0 rgba(0,27,102,.06),0 18px 44px rgba(0,27,102,.08);display:grid;gap:12px}
.legal .tldr h2{margin:0;font-size:20px}
.legal .toc ol{margin:6px 0 10px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.legal .toc a{display:inline-block;padding:7px 14px;border-radius:999px;background:rgba(0,51,231,.07);font-size:14px;font-weight:600;text-decoration:none;color:var(--navy)}
.legal .toc a:hover{background:rgba(0,51,231,.14)}
.legal :target{animation:legalHi 1.6s ease-out}
@keyframes legalHi{0%{color:var(--blue)}100%{color:var(--ink)}}