:root{
  --bg-base:#0A0E1A; --bg-raised:#111725; --bg-card:#161D2E; --frame:#0D1220;
  --brand:#4B7BFF; --brand-600:#3E6BFF; --brand-glow:rgba(75,123,255,.35);
  --ink:#F2F5FA; --text-2:rgba(242,245,250,.68); --text-3:rgba(242,245,250,.45);
  --hairline:rgba(255,255,255,.08); --inset-top:rgba(255,255,255,.06);
  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --max:1280px; --radius-card:16px; --radius-btn:12px; --radius-frame:20px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg-base);color:var(--ink);font-family:var(--font-body);letter-spacing:.02em;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.08;font-weight:700}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 0px}
@media(min-width:768px) {.wrap{padding:0 0px}}
.section{padding:96px 0}
@media(min-width:768px){.section{padding:128px 0}}
.raised{background:var(--bg-raised)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--brand)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--brand);box-shadow:0 0 0 4px rgba(75,123,255,.18)}
.muted{color:var(--text-2)}
.lead{color:var(--text-2);font-size:17px;line-height:1.6}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-btn);padding:12px 20px;font-size:15px;font-weight:600;border:1px solid transparent;transition:.2s var(--ease)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-600);transform:translateY(-2px);box-shadow:0 18px 40px -16px var(--brand-glow)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.15);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.btn svg{width:16px;height:16px}
.card{background:var(--bg-card);border:1px solid var(--hairline);box-shadow:inset 0 1px 0 var(--inset-top);border-radius:var(--radius-card)}
.grid-texture{background-image:linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);background-size:44px 44px}
.brand-glow{background:radial-gradient(closest-side,var(--brand-glow),rgba(75,123,255,0));filter:blur(6px)}
.frame{position:relative;border-radius:var(--radius-frame);overflow:hidden;background:var(--frame);border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(75,123,255,.10),0 30px 80px -30px rgba(0,0,0,.8),0 0 70px -18px var(--brand-glow)}
.frame .chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);background:var(--frame)}
.frame .dot{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.15)}
.frame .bar{margin-left:12px;flex:1;height:24px;border-radius:6px;background:rgba(255,255,255,.06)}
.frame img{width:100%;height:100%;object-fit:cover;object-position:top}
/* branded placeholder so a slow/missing shot never shows a broken-image icon */
.frame .shot,.svc .img{background:radial-gradient(120% 120% at 50% 0%,rgba(75,123,255,.10),var(--frame) 60%)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.from-left{transform:translateX(-32px)}
.reveal.from-right{transform:translateX(32px)}
.reveal.in{opacity:1;transform:none}
/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--brand),#7CA0FF);box-shadow:0 0 12px var(--brand-glow)}
.header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.3s;border-bottom:1px solid transparent; padding: 0 20px;}
.header.scrolled{background:rgba(10,14,26,.85);backdrop-filter:blur(12px);border-bottom-color:var(--hairline)}
.header .inner{height:68px;display:flex;align-items:center;justify-content:space-between}
.logo{height:38px;width:auto}
.nav{display:none;align-items:center;gap:4px}
.nav a,.nav button{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--text-2);font-size:15px;font-weight:500;padding:8px 12px;border-radius:8px;transition:color .2s}
.nav a:hover,.nav button:hover,.nav .has-menu.open{color:#fff}
.nav svg{width:16px;height:16px;transition:transform .2s}
.nav .has-menu.open svg{transform:rotate(180deg)}
.header-cta{display:none;align-items:center;gap:12px}
.header-cta a.signin{color:var(--text-2);font-size:15px;font-weight:500}
.header-cta a.signin:hover{color:#fff}
.burger{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:none;border:none;color:var(--ink);border-radius:8px}
.burger svg{width:24px;height:24px}
@media(min-width:1024px){.nav,.header-cta{display:flex}.burger{display:none}}
.mega{position:absolute;left:0;right:0;top:68px;background:rgba(22,29,46,.97);backdrop-filter:blur(18px);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);display:none;opacity:0;transform:translateY(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.mega.open{display:block;opacity:1;transform:none}
.mega .wrap{padding:32px 40px}
.mega-products{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mega-products.cols-4{grid-template-columns:repeat(4,1fr)}
.mega-products a{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:16px;transition:background .2s,transform .2s var(--ease)}
.mega-products a:hover{background:rgba(255,255,255,.05);transform:translateY(-2px)}
.mega-products a .name{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink)}
.mega-products a .desc{font-size:13px;color:var(--text-2);line-height:1.35}
.mega-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 24px}
.mega-list.cols-3{grid-template-columns:repeat(3,1fr)}
.mega-list a{padding:8px 12px;border-radius:8px;font-size:15px;color:var(--text-2)}
.mega-list a:hover{background:rgba(255,255,255,.05);color:#fff}
.drawer{display:none;border-top:1px solid var(--hairline);background:var(--bg-base);max-height:calc(100vh - 68px);overflow-y:auto}
.drawer.open{display:block}
.drawer .wrap{padding:8px 24px 24px}
.acc-head,.drawer .lnk{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;border-bottom:1px solid var(--hairline);color:var(--ink);font-size:16px;font-weight:500;padding:16px 0}
.acc-panel{display:none;padding-left:4px}
.acc-panel.open{display:block}
.acc-panel a{display:block;padding:8px 0;font-size:15px;color:var(--text-2)}
.acc-head svg{width:16px;height:16px}
.drawer-cta{display:flex;flex-direction:column;gap:12px;padding:20px 0}
.drawer-cta .signin{text-align:center;font-size:15px;font-weight:500}
.hero{position:relative;overflow:hidden;padding:68px 20px 68px 20px;background:var(--bg-base)}
.hero .glow{position:absolute;right:-128px;top:-40px;width:640px;height:640px;pointer-events:none}
/* ambient drifting mesh — slow, subtle atmosphere */
.hero .mesh{position:absolute;inset:-20% -10% auto -10%;height:120%;pointer-events:none;opacity:.7;
  background:
    radial-gradient(38% 46% at 18% 22%,rgba(75,123,255,.18),transparent 60%),
    radial-gradient(30% 40% at 82% 12%,rgba(124,160,255,.12),transparent 60%),
    radial-gradient(40% 50% at 68% 78%,rgba(75,123,255,.10),transparent 60%);
  animation:meshdrift 22s ease-in-out infinite alternate;filter:blur(8px)}
@keyframes meshdrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,1.5%,0) scale(1.05)}100%{transform:translate3d(2%,-1%,0) scale(1.02)}}
.hero .texture{position:absolute;inset:0;pointer-events:none}
.hero .grid{position:relative;display:grid;grid-template-columns:1fr;gap:48px;align-items:center;padding:64px 0}
@media(min-width:1024px){.hero .grid{grid-template-columns:45fr 55fr;gap:32px;padding:112px 0}}
.hero h1{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.02;margin-top:20px}
@media(min-width:640px){.hero h1{font-size:52px}}
@media(min-width:1024px){.hero h1{font-size:46px}}
.hero h1 .accent{color:var(--brand)}
/* Rotating hero message: the white introduction stays fixed while the blue line types and deletes. */
.hero-heading-prefix{display:block}
.hero-rotating-wrap{display:block;min-height:2.15em}
.type-caret{
  display:inline-block;
  width:2px;
  height:.82em;
  margin-left:.08em;
  vertical-align:-.06em;
  border-radius:2px;
  background:var(--brand);
  animation:typeCaretBlink .8s steps(1,end) infinite;
}
@keyframes typeCaretBlink{0%,46%{opacity:1}47%,100%{opacity:0}}
@media(max-width:639px){.hero-rotating-wrap{min-height:2.1em}}
.hero p.lead{margin-top:24px;font-size:18px}
@media(min-width:1024px){.hero p.lead{font-size:20px}}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.trust{list-style:none;margin-top:40px;display:flex;flex-direction:column;gap:12px}
.trust li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-2)}
.trust .tick{margin-top:2px;flex:none;width:20px;height:20px;border-radius:99px;background:rgba(75,123,255,.18);color:var(--brand);display:flex;align-items:center;justify-content:center}
.trust .tick svg{width:12px;height:12px}
/* staged hero entrance */
.hero-stage{opacity:0;transform:translateY(16px);animation:heroIn .7s var(--ease) forwards}
.hero-stage.s1{animation-delay:.05s}.hero-stage.s2{animation-delay:.13s}.hero-stage.s3{animation-delay:.21s}.hero-stage.s4{animation-delay:.29s}.hero-stage.s5{animation-delay:.37s}
@keyframes heroIn{to{opacity:1;transform:none}}
.hero .visual{position:relative;will-change:transform}
@media(min-width:1024px){.hero .visual{margin-right:-40px}}
.hero .phone{position:absolute;bottom:-40px;left:-24px;width:150px}
@media(min-width:1024px){.hero .phone{width:168px}}
.pill{display:none;align-items:center;gap:12px;border-radius:16px;padding:12px 16px;box-shadow:0 20px 45px -20px rgba(0,0,0,.7);position:absolute;will-change:transform}
@media(min-width:640px){.pill.p1{display:flex}}
@media(min-width:1024px){.pill.p2{display:flex}}
.pill .ic{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.pill .ic svg{width:16px;height:16px}
.pill .m{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1.1}
.pill .c{font-size:12px;opacity:.8}
.pill.brand{background:var(--brand);color:#fff}.pill.brand .ic{background:rgba(255,255,255,.15)}
.pill.p1{right:-8px;top:32px;animation:floaty 6s ease-in-out infinite}
.pill.p2{right:-16px;bottom:24px;background:var(--bg-card);border:1px solid var(--hairline);color:var(--ink);animation:floaty 7s ease-in-out infinite .8s}
.pill.p2 .ic{background:rgba(75,123,255,.15);color:var(--brand)}.pill.p2 .c{color:var(--text-2);opacity:1}
.pill.p2 .live{width:8px;height:8px;border-radius:99px;background:#3ED598;box-shadow:0 0 0 0 rgba(62,213,152,.6);animation:pulse 2s ease-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,213,152,.55)}70%{box-shadow:0 0 0 8px rgba(62,213,152,0)}100%{box-shadow:0 0 0 0 rgba(62,213,152,0)}}
/* stats / proof band */
.stats{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--bg-base);position:relative;overflow:hidden}
.stats::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 50% 0%,rgba(75,123,255,.06),transparent 60%);pointer-events:none}
.stats .wrap{padding:44px 24px}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px}
@media(min-width:768px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{position:relative;text-align:center}
.stat+.stat::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:1px;height:44px;background:var(--hairline);display:none}
@media(min-width:768px){.stat+.stat::before{display:block}}
.stat .n{font-family:var(--font-display);font-weight:800;font-size:38px;letter-spacing:-.03em;line-height:1;background:linear-gradient(180deg,#fff,#B9C6E6);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(min-width:768px){.stat .n{font-size:44px}}
.stat .l{margin-top:10px;font-size:13px;font-weight:500;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em}
.clients{border-bottom:1px solid var(--hairline);background:var(--bg-base)}
.clients .wrap{padding:36px 24px}
.clients p{text-align:center;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3)}
.clients .logos{display:flex;justify-content:center;margin-top:28px}
.clients img{max-height:64px;width:100%;max-width:980px;object-fit:contain;opacity:.55;transition:opacity .3s;filter:brightness(0) invert(1)}
.clients .logos:hover img{opacity:.85}
.clients .mobile-logos{display:none}
@media(max-width:767px){.clients .desktop-logos{display:none}.clients .mobile-logos{display:flex}.clients .mobile-logos img{max-height:120px;max-width:420px}}
.eco-head{position:relative;max-width:640px;margin:0 auto;text-align:center}
.eco-head h2{font-size:32px;margin-top:16px}
@media(min-width:768px){.eco-head h2{font-size:44px}}
.eco-head p{margin-top:16px}
/* === SIGNATURE: connected ecosystem orbit === */
.orbit{position:relative;max-width:560px;margin:64px auto 0;aspect-ratio:1}
.orbit .ring-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.orbit .halo{position:absolute;left:50%;top:50%;width:66%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,var(--brand-glow),transparent);animation:halo 4.5s ease-in-out infinite;z-index:1;pointer-events:none}
.orbit-rotor{position:absolute;inset:0;animation:orbitspin 80s linear infinite;z-index:2}
.orbit .lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.orbit .lines line{stroke:var(--brand);stroke-width:.35;opacity:.4;stroke-dasharray:1.4 2.6;animation:dashflow 3.4s linear infinite}
.node{position:absolute;transform:translate(-50%,-50%)}
.node .inner{display:flex;flex-direction:column;align-items:center;gap:6px;animation:orbitspin 80s linear infinite reverse}
.node .ic{width:48px;height:48px;border-radius:16px;background:var(--bg-card);border:1px solid var(--hairline);box-shadow:inset 0 1px 0 var(--inset-top),0 10px 30px -12px rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;color:var(--brand);transition:transform .25s var(--ease),border-color .25s}
.node .inner:hover .ic{transform:scale(1.12);border-color:rgba(75,123,255,.6)}
.node .ic svg{width:20px;height:20px}
.node span{font-size:12px;font-weight:600;background:rgba(10,14,26,.8);padding:2px 8px;border-radius:99px}
.orbit .center{position:absolute;left:50%;top:50%;width:56%;transform:translate(-50%,-50%);z-index:3}
@keyframes orbitspin{to{transform:rotate(360deg)}}
@keyframes dashflow{to{stroke-dashoffset:-24}}
@keyframes halo{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.96)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.05)}}
.benefits{position:relative;margin-top:64px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.benefits{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.benefits{grid-template-columns:repeat(4,1fr)}}
.benefit{padding:24px;height:100%;transition:transform .25s var(--ease),border-color .25s}
.benefit:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.benefit .ic{width:44px;height:44px;border-radius:12px;background:rgba(75,123,255,.15);color:var(--brand);display:flex;align-items:center;justify-content:center}
.benefit .ic svg{width:20px;height:20px}
.benefit h3{font-size:18px;margin-top:16px}
.benefit p{font-size:14px;color:var(--text-2);margin-top:8px;line-height:1.5}
.products-head{max-width:640px}
.products-head h2{font-size:32px;margin-top:16px}
@media(min-width:768px){.products-head h2{font-size:44px}}
.mini-nav{position:sticky;top:68px;z-index:30;margin-top:40px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:rgba(10,14,26,.85);backdrop-filter:blur(12px)}
.mini-nav .row{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.mini-nav .row::-webkit-scrollbar{display:none}
.mini-nav a{white-space:nowrap;border-bottom:2px solid transparent;padding:16px;font-size:14px;font-weight:600;color:var(--text-2);transition:.2s}
.mini-nav a.active{border-bottom-color:var(--brand);color:var(--brand)}
.mini-nav a:hover{color:#fff}
.prow{padding:80px 20px}
@media(min-width:768px){.prow{padding:112px 0}}
.prow .grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:1024px){.prow .grid{grid-template-columns:1fr 1fr;gap:64px}}
.plabel{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--brand)}
.prow h3{font-size:26px;margin-top:12px}
@media(min-width:768px){.prow h3{font-size:34px}}
.prow .desc{margin-top:16px;font-size:17px;color:var(--text-2);line-height:1.6;max-width:520px}
.feats{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px}
.feats li{display:flex;align-items:center;gap:12px;font-size:15px}
.feats .tick{width:20px;height:20px;border-radius:99px;background:rgba(75,123,255,.18);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.feats .tick svg{width:12px;height:12px}
.explore{display:inline-flex;align-items:center;gap:6px;margin-top:28px;font-size:15px;font-weight:600;color:var(--brand);transition:gap .2s var(--ease)}
.explore:hover{gap:10px}
.explore svg{width:16px;height:16px}
/* product visual + single tasteful floating feature chip (replaces duplicate crop) */
.vis{position:relative}
.shot-chip{position:absolute;display:none;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;background:rgba(13,18,32,.86);border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 40px -18px rgba(0,0,0,.8);font-size:13px;font-weight:600;color:var(--ink);backdrop-filter:blur(6px);animation:floaty 7s ease-in-out infinite;z-index:2}
@media(min-width:640px){.shot-chip{display:inline-flex}}
.shot-chip .d{width:8px;height:8px;border-radius:99px;background:var(--brand);box-shadow:0 0 0 4px rgba(75,123,255,.18);flex:none}
.shot-chip.br{right:-14px;bottom:-16px}
.shot-chip.bl{left:-16px;bottom:-18px;animation-delay:.9s}
.survey-center{max-width:640px;margin:0 auto;text-align:center}
.survey-center h3{margin:12px auto 0;max-width:560px;font-size:26px}
@media(min-width:768px){.survey-center h3{font-size:34px}}
.survey-center .desc{margin:16px auto 0;max-width:560px}
.survey-feats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:24px}
.survey-feats span{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.survey-feats svg{width:14px;height:14px;color:var(--brand)}
.steps{margin-top:56px;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}
.step .top{display:flex;align-items:center;gap:12px}
.step .num{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--brand)}
.step .line{height:1px;flex:1;background:rgba(255,255,255,.1)}
.step .ic{margin-top:20px;width:48px;height:48px;border-radius:16px;background:rgba(75,123,255,.15);color:var(--brand);display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease)}
.step:hover .ic{transform:translateY(-3px)}
.step .ic svg{width:20px;height:20px}
.step h3{margin-top:16px;font-size:18px}
.step p{margin-top:8px;font-size:14px;color:var(--text-2);line-height:1.5}
.services-head{display:flex;flex-direction:column;gap:24px;justify-content:space-between;align-items:flex-start}
@media(min-width:768px){.services-head{flex-direction:row;align-items:flex-end}}
.services-head h2{font-size:32px;margin-top:16px}
@media(min-width:768px){.services-head h2{font-size:44px}}
.chiprow{display:flex;flex-wrap:wrap;gap:8px 24px}
.chiprow span{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.chiprow svg{width:14px;height:14px;color:var(--brand)}
.svc-grid{margin-top:48px;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.svc-grid{grid-template-columns:repeat(4,1fr)}}
.svc{display:flex;flex-direction:column;overflow:hidden;height:100%;transition:transform .25s var(--ease),border-color .25s}
.svc:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.svc .img{aspect-ratio:1.6;overflow:hidden}
.svc .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.svc:hover .img img{transform:scale(1.05)}
.svc .body{padding:20px;display:flex;flex-direction:column;flex:1}
.svc h3{font-size:17px}
.svc p{margin-top:8px;font-size:13px;color:var(--text-2);flex:1;line-height:1.5}
.svc .explore{margin-top:16px;font-size:14px}
.value-grid{margin-top:48px;display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:24px;overflow:hidden}
@media(min-width:640px){.value-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.value-grid{grid-template-columns:repeat(3,1fr)}}
.value{background:var(--bg-card);padding:32px;transition:background .25s}
.value:hover{background:var(--bg-raised)}
.value .ic{width:44px;height:44px;border-radius:12px;background:rgba(75,123,255,.15);color:var(--brand);display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease)}
.value:hover .ic{transform:translateY(-3px)}
.value .ic svg{width:20px;height:20px}
.value h3{margin-top:20px;font-size:18px}
.value p{margin-top:8px;font-size:14px;color:var(--text-2);line-height:1.5}
.pricing-head{max-width:720px;margin:0 auto;text-align:center}
.pricing-head h2{margin:16px auto 0;max-width:620px;font-size:32px}
@media(min-width:768px){.pricing-head h2{font-size:44px}}
.tiers{margin-top:48px;display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:700px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.tiers{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}}
.tier{padding:24px;display:flex;flex-direction:column;height:100%;border-radius:20px;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.card.tier:hover{transform:translateY(-4px);border-color:rgba(75,123,255,.45);box-shadow:0 24px 60px -34px var(--brand-glow)}
.tier h3{font-size:18px}
.tier .price{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.02em;margin-top:14px;line-height:1.15}
.tier .price span{font-size:.62em;font-weight:600;color:var(--text-2)}
.tier .price-note{font-size:12px;color:var(--text-2);margin-top:8px;min-height:18px}
.tier .feature-list{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:11px;flex:1}
.tier .feature-list>li{position:relative;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.feature-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:1px;font-weight:800;font-size:17px;line-height:1}
.feature-icon.yes{color:#63E6BE}
.feature-icon.no{color:#F04D82}
.feature-label{min-width:0}
.info-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:4px;border:0;border-radius:99px;background:rgba(255,255,255,.88);color:#121827;font-size:10px;font-weight:800;line-height:1;vertical-align:1px;padding:0}
.tip-bubble{position:absolute;left:28px;top:-10px;z-index:8;width:min(280px,calc(100vw - 72px));padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#0D1220;color:var(--ink);box-shadow:0 18px 48px -22px rgba(0,0,0,.95);font-size:12px;line-height:1.45;opacity:0;visibility:hidden;transform:translateY(4px);transition:.18s var(--ease);pointer-events:none}
.tip-bubble ul{margin:0;padding-left:16px;display:block}
.tip-bubble li{display:list-item;margin:4px 0;font-size:12px}
.feature-list>li:hover .tip-bubble,.feature-list>li:focus-within .tip-bubble{opacity:1;visibility:visible;transform:none}
.tier .btn{margin-top:26px;width:100%}
@media(max-width:699px){.tip-bubble{left:0;top:28px}}
.tst-grid{margin-top:48px;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:1024px){.tst-grid{grid-template-columns:1.3fr 1fr}}
.tst-feat-wrap{position:relative;height:100%}
.tst-feat-wrap .brand-glow{position:absolute;inset:-24px}
.tst-feat{position:relative;padding:32px;display:flex;flex-direction:column;justify-content:space-between;height:100%;border-radius:24px;min-height:460px}
@media(min-width:768px){.tst-feat{padding:40px}}
.tst-feat .q{width:36px;height:36px;color:var(--brand)}
.tst-feat blockquote{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.28;letter-spacing:-.02em;margin-top:24px}
@media(min-width:768px){.tst-feat blockquote{font-size:30px}}
.tst-side{display:flex;flex-direction:column;gap:24px}
.tst-card{padding:24px;border-radius:16px;transition:transform .25s var(--ease),border-color .25s;display:flex;flex-direction:column;justify-content:space-between;flex:1}
.tst-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2)}
.tst-card blockquote{font-size:15px;line-height:1.6;color:var(--ink)}
.tst-grid figcaption{display:flex;align-items:center;gap:12px;margin-top:20px}
.tst-grid .avatar{width:44px;height:44px;border-radius:99px;overflow:hidden;border:1px solid var(--hairline);background:var(--bg-card);flex:none}
.tst-grid .avatar img{width:100%;height:100%;object-fit:cover}
.tst-grid figcaption .n{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.tst-grid figcaption .r{display:block;font-size:13px;color:var(--text-2)}
.cta{position:relative;overflow:hidden;background:var(--bg-base)}
.cta .wash{position:absolute;top:0;bottom:0;right:0;width:70%;pointer-events:none;background:radial-gradient(60% 80% at 80% 50%,rgba(75,123,255,.35),rgba(10,14,26,0) 70%)}
.cta .grid{position:relative;display:grid;grid-template-columns:1fr;gap:48px;align-items:center;padding:96px 0}
@media(min-width:768px){.cta .grid{padding:128px 0}}
@media(min-width:1024px){.cta .grid{grid-template-columns:1fr 1fr}}
.cta h2{font-size:34px;line-height:1.06}
@media(min-width:768px){.cta h2{font-size:52px}}
.cta p{margin-top:20px;max-width:512px;font-size:18px;color:var(--text-2);line-height:1.6}
.cta .actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.cta .persp{display:none}
@media(min-width:1024px){.cta .persp{display:block;margin-right:-96px;transform:perspective(1600px) rotateY(-14deg) rotateX(3deg);transition:transform .6s var(--ease)}.cta .persp:hover{transform:perspective(1600px) rotateY(-8deg) rotateX(2deg)}}
.footer{border-top:1px solid var(--hairline);background:var(--bg-base)}
.footer .wrap{padding:64px 24px}
@media(min-width:768px){.footer .wrap{padding:80px 40px}}
.fcols{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
@media(min-width:768px){.fcols{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.fcols{grid-template-columns:repeat(6,1fr)}}
.fbrand{grid-column:span 2}
@media(min-width:768px){.fbrand{grid-column:span 3}}
@media(min-width:1024px){.fbrand{grid-column:span 1}}
.fbrand p{margin-top:16px;max-width:220px;font-size:14px;color:var(--text-2);line-height:1.5}
.socials{display:flex;gap:8px;margin-top:20px}
.socials a{width:36px;height:36px;border:1px solid var(--hairline);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:border-color .2s,transform .2s var(--ease)}
.socials a:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.socials img{width:16px;height:16px;opacity:.7;filter:brightness(0) invert(1);transition:opacity .2s}
.socials a:hover img{opacity:1}
.fcol h4{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.fcol ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.fcol a{font-size:14px;color:var(--text-2)}
.fcol a:hover{color:#fff}
.contact li{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--text-2);margin-top:12px}
.contact svg{width:16px;height:16px;color:var(--brand);flex:none;margin-top:2px}
.offices{margin-top:12px;font-size:12px;color:var(--text-3);line-height:1.5}
.badges{margin-top:56px;padding-top:32px;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.badges img{height:36px;width:auto;max-width:110px;object-fit:contain;opacity:.7;filter:brightness(0) invert(1);transition:opacity .2s}
.badges img:hover{opacity:1}
.badges a{display:inline-flex}
.copy{margin-top:32px;display:flex;flex-direction:column;gap:8px;justify-content:space-between;font-size:13px;color:var(--text-3)}
@media(min-width:768px){.copy{flex-direction:row;align-items:center}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-stage{opacity:1;transform:none;animation:none}
  .type-caret{display:none}
  *{animation:none!important}
}


/* =========================================================
   CONSISTENT PAGE GUTTERS + LIGHTWEIGHT MOBILE MOTION
   Every main content container uses exactly 20px on both sides.
   ========================================================= */
.wrap{
  width:100%;
  padding-left:20px !important;
  padding-right:20px !important;
}

/* Avoid double gutters: the inner .wrap owns horizontal spacing. */
.header{padding-left:0 !important;padding-right:0 !important}
.hero{padding-left:0 !important;padding-right:0 !important}

/* Keep all navigation variants on the same 20px alignment line. */
.mega .wrap{padding-left:20px !important;padding-right:20px !important}
.drawer .wrap{padding-left:20px !important;padding-right:20px !important}
.mini-nav .wrap{padding-left:20px !important;padding-right:20px !important}

/* Remove decorative desktop overflow so major visuals remain aligned. */
.hero .visual{margin-right:0 !important}
.cta .persp{margin-right:0 !important}

/* Images and cards must never exceed the aligned content area. */
.vis,.frame,.card,.svc,.tier,.tst-feat,.tst-card{max-width:100%}

@media(max-width:1023px){
  /* Simple, smooth reveal for phones and tablets: fade + slight upward motion. */
  .reveal,
  .reveal.from-left,
  .reveal.from-right{
    opacity:0;
    transform:translate3d(0,10px,0);
    transition-property:opacity,transform;
    transition-duration:.42s;
    transition-timing-function:cubic-bezier(.22,.75,.32,1);
    transition-delay:0s !important;
  }
  .reveal.in,
  .reveal.from-left.in,
  .reveal.from-right.in{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  /* Lighter hero entrance without long staggered movement. */
  .hero-stage{
    transform:translate3d(0,8px,0);
    animation-duration:.42s;
  }
  .hero-stage.s1{animation-delay:.02s}
  .hero-stage.s2{animation-delay:.06s}
  .hero-stage.s3{animation-delay:.10s}
  .hero-stage.s4{animation-delay:.14s}
  .hero-stage.s5{animation-delay:.18s}

  /* Stop continuous or blur-heavy effects that can stutter during scrolling. */
  .hero .mesh{
    animation:none !important;
    filter:none !important;
    opacity:.42;
  }
  .orbit .halo,
  .pill,
  .pill.p2 .live,
  .shot-chip,
  .badge::after{
    animation:none !important;
  }
  .brand-glow{filter:none}
  .tst-feat-wrap>.brand-glow{display:none}

  /* Solid translucent surfaces scroll more smoothly than live backdrop blur. */
  .header.scrolled,
  .mini-nav{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:rgba(10,14,26,.97);
  }
  .shot-chip{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  /* Keep floating visual details inside the same 20px content boundary. */
  .hero .phone{left:12px;bottom:12px}
  .pill.p1{right:12px}
  .shot-chip.br{right:10px;bottom:10px}
  .shot-chip.bl{left:10px;bottom:10px}

  /* Softer shadows reduce paint cost while retaining depth. */
  .frame{
    box-shadow:0 0 0 1px rgba(75,123,255,.10),0 18px 42px -30px rgba(0,0,0,.88);
  }
}

@media(hover:none) and (pointer:coarse){
  .btn:hover,
  .benefit:hover,
  .svc:hover,
  .value:hover,
  .card.tier:hover,
  .tst-card:hover,
  .socials a:hover,
  .node .inner:hover .ic{
    transform:none !important;
  }
  .svc:hover .img img{transform:none !important}
}

/* =========================================================
   RESEARCH SERVICES — horizontal scroll rail
   Base (no JS / touch / reduced motion): native swipe + snap.
   .hscroll-on (desktop, motion allowed): section pins and vertical
   scroll drives the rail sideways, reversing when scrolling back up.
   ========================================================= */
.hscroll{position:relative;background:var(--bg-raised);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.hscroll-stage{padding:72px 0 64px;display:flex;flex-direction:column;gap:34px}
@media(min-width:768px){.hscroll-stage{padding:92px 0 80px}}
.hscroll-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hscroll-viewport::-webkit-scrollbar{display:none}
.hscroll-rail{display:flex;gap:24px;padding:6px max(20px,calc((100vw - var(--max)) / 2)) 12px;width:max-content}
/* Cards are deliberately large so the dashboard visuals stay readable */
.hscroll-card{flex:0 0 auto;width:min(520px,84vw);scroll-snap-align:center;text-decoration:none}
@media(min-width:1400px){.hscroll-card{width:560px}}
.hscroll .svc .img{aspect-ratio:1.6;background:radial-gradient(120% 120% at 50% 0%,rgba(75,123,255,.12),var(--frame) 60%)}
.hscroll .svc .img img{object-position:top}
.hscroll .svc:hover .img img{transform:scale(1.03)}
.hscroll .svc .body{padding:22px 24px 24px}
.hscroll .svc h3{font-size:20px;color:var(--ink)}
.hscroll .svc p{margin-top:8px;font-size:14.5px;line-height:1.55}
.hscroll .svc .explore{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--brand)}
.hscroll .svc .explore svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.hscroll .svc:hover .explore svg{transform:translateX(4px)}
.hscroll .svc:hover{border-color:rgba(75,123,255,.5)}
/* Foot: progress bar + counter */
.hscroll-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hscroll-bar{position:relative;flex:1;min-width:140px;height:3px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.hscroll-bar span{position:absolute;inset:0;background:var(--brand);border-radius:999px;transform:scaleX(0);transform-origin:left center;transition:transform .12s linear}
.hscroll-hint{display:inline-flex;align-items:center;gap:10px;color:var(--text-3);font-size:13.5px;font-weight:600;white-space:nowrap}
.hscroll-hint svg{width:16px;height:16px;color:var(--brand)}
.hscroll-count{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.hscroll-count i{font-style:normal}
@media(max-width:559px){.hscroll-hint-text{display:none}}
/* ---- Pinned mode (progressive enhancement) ---- */
.hscroll-on .hscroll-stage{position:sticky;top:0;height:100vh;justify-content:center;padding:0;gap:26px}
.hscroll-on .hscroll-viewport{overflow:hidden;scroll-snap-type:none}
.hscroll-on .hscroll-rail{will-change:transform}
.hscroll-on .hscroll-card{scroll-snap-align:none}
/* Keep the pinned frame comfortable on shorter laptops */
@media(min-width:1024px) and (max-height:820px){
  .hscroll-on .hscroll-card{width:min(440px,44vw)}
  .hscroll-on .hscroll-stage{gap:20px}
  .hscroll-on .svc .body{padding:18px 20px 20px}
  .hscroll-on .svc h3{font-size:18px}
}

/* =========================================================
   ECOSYSTEM — orbit on the left, hover-switched interface on the right
   ========================================================= */
.eco-split{margin-top:52px;display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media(min-width:1024px){
  .eco-split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;margin-top:64px}
  .eco-split .orbit{margin:0;max-width:none;width:100%}
}
/* Nodes are interactive now */
.node .inner{cursor:pointer}
.node .inner:focus-visible{outline:2px solid var(--brand);outline-offset:6px;border-radius:12px}
.node.is-active .ic{transform:scale(1.12);border-color:rgba(75,123,255,.75);background:rgba(75,123,255,.16);box-shadow:inset 0 1px 0 var(--inset-top),0 0 0 6px rgba(75,123,255,.10)}
.node.is-active span{color:#fff}
/* The interface panel */
.eco-view .frame{width:100%}
.eco-view .shot{position:relative;aspect-ratio:1.5;overflow:hidden}
.eco-view .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .4s var(--ease);will-change:opacity}
.eco-view .shot img.is-active{opacity:1}
/* The orbit's children are all absolutely positioned, so as a grid item with
   auto side margins it collapsed to zero width. Give it an explicit width. */
.eco-split .orbit{width:100%;max-width:460px;margin:0 auto;aspect-ratio:1}
@media(min-width:1024px){.eco-split .orbit{max-width:none;margin:0}}

/* =========================================================
   STAT BAND — FIT-TO-COLUMN TYPE
   The band mixes short numbers ("9", "12.4M+") with whole phrases
   ("Recruit -> reward", "Randomization"). One fixed size cannot serve both:
   at 38px a phrase overflowed a 155px mobile column and broke mid-word.
   Each grid carries --stat-ch = the longest line its values can be forced
   onto, in characters, and the size is derived from the column's own width
   so the value always fits whatever the viewport.
   ========================================================= */
/* Each stat borrows the band's rows, so every value in a row shares one track
   height and the labels below them start on the same line even when one value
   wraps. 193cqw/ch is measured, not guessed: the widest line this display face
   produces is ~0.49em per character, which leaves ~6% slack. */
/* The query container is the grid, not the stat: container-type on a grid item
   makes its own `subgrid` compute away. Column width is derived from the grid's
   width instead — (100cqw - gaps) / columns. */
.stat-grid{container-type:inline-size;grid-auto-rows:auto}
.stat{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:10px}
.stat .n{
  align-self:end;
  font-size:clamp(18px,8vw,30px);                 /* fallback where cqw is unsupported */
  font-size:clamp(18px,calc(1.93 * (100cqw - 24px) / 2 / var(--stat-ch,7)),30px);
  line-height:1.06;
  text-wrap:balance;
  hyphens:none;                                   /* never break "End-to-end" mid-word */
  overflow-wrap:break-word;                       /* last resort, beats overflowing */
}
@media(min-width:768px){
  .stat .n{
    font-size:clamp(20px,3.4vw,44px);
    font-size:clamp(20px,calc(1.93 * (100cqw - 72px) / 4 / var(--stat-ch,7)),44px);
  }
}
.stat .l{margin-top:0;font-size:12px;letter-spacing:.06em;line-height:1.3;text-wrap:balance}
@media(min-width:768px){.stat .l{font-size:13px;letter-spacing:.08em}}

/* =========================================================
   HERO — MOBILE COMPOSITION
   The phone mock is 9:18, so at 150px wide it stands ~324px tall while the
   1.6 dashboard frame is only ~240px tall on a 375px screen. Anchored to the
   frame's bottom-left it therefore rose clear above the frame and covered the
   dashboard rather than layering over a corner of it.
   Below 600px it instead hangs off the frame's bottom-right corner, cropped
   to 9:14 so it is shorter than the frame it sits on. .frame img already
   anchors to object-position:top, so the crop takes the bottom of the phone
   screen and keeps its header and first rows.
   ========================================================= */
.phone-shot{aspect-ratio:9/18}
/* (superseded — see FRAMES, CHROME & PHONE at the end of this file) */


/* =========================================================
   SWEB-161 — MOBILE CORRECTIONS
   ========================================================= */

/* 1. The browser chrome above a screenshot is a fixed 49px, which reads as
   11% of a desktop frame but 20% of the same frame on a phone — the bar
   started to out-weigh the picture under it. Scale it with the frame.
   The phone mock and the orbit's centre already carry a compact chrome. */
/* (superseded — see FRAMES, CHROME & PHONE at the end of this file) */

/* 2. The orbit's centre frame was 56% of the ring's width. The side nodes sit
   at 50% ± 34.6% carrying a 48px icon, so the clearance is
   0.346*W - 24 - centre/2: 9px at 1440, and negative — overlapping — on a
   phone. 46%/50% buys room on every screen. */
.orbit .center{width:43%}
@media(min-width:768px){.orbit .center{width:46%}}
@media(min-width:1024px){.orbit .center{width:48%}}

/* 5. The burger's glyph stopped 8.7px short of the drawer's + icons: it is a
   24px icon centred in a 40px tap target, while the + is a 16px icon flush
   to the content edge. Pinning the glyph to the button's trailing edge puts
   both on the same line without shrinking the tap target. */
.burger{justify-content:flex-end}


/* =========================================================
   HOMEPAGE — ONE ALIGNMENT LINE
   Every band already shares the same container (content edge 92px at 1440),
   but four of them centred their contents inside it while the hero, products,
   how-it-works, services, value and testimonials all start at the edge. That
   left the page reading as three different left margins down the fold.
   Everything now starts on the hero's line.
   Homepage only: the product and service pages load answers.css and are
   centred throughout, which is consistent on its own terms.
   ========================================================= */

/* The figures and their labels start where the hero's text starts. */
.stat{text-align:left}

/* The logo strip spanned 980px centred inside a 1240px column, so it sat
   130px inboard of everything above it. Let it run the full content width
   and it lands on the hero's left and right edges at once. */
.clients p{text-align:left}
.clients .logos{justify-content:flex-start}
.clients img{max-width:none;max-height:none;height:auto}

/* Section heads that were centred blocks. max-width stays — it keeps the
   measure readable — only the auto margins and centring go. */
.eco-head{margin:0;text-align:left}
.pricing-head{margin:0;text-align:left}
.pricing-head h2{margin:16px 0 0}


/* =========================================================
   MEGA MENU — LIST LEFT, LIVE PREVIEW RIGHT
   The menu now shows the product's actual interface rather than describing
   it. The preview reuses the .frame / .chrome / .shot component from the
   homepage, so the menu introduces no new visual language, and the shots
   crossfade in place the way the Syno Cloud panel does.
   The list drops to two columns because a third would starve beside the
   preview. Desktop only: below 1024px this menu is replaced by the drawer.
   ========================================================= */
.mega-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:40px;
  align-items:start;
}
.mega-split .mega-products,
.mega-split .mega-products.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}

/* The leading rule is the only place --brand appears in this menu, so it
   reads as "this is the one you are looking at". */
.mega-split .mega-products a{position:relative}
.mega-split .mega-products a::before{
  content:"";
  position:absolute;
  left:6px; top:14px; bottom:14px;
  width:2px; border-radius:2px;
  background:var(--brand);
  opacity:0;
  transition:opacity .18s var(--ease);
}
.mega-split .mega-products a.is-active::before{opacity:1}
.mega-split .mega-products a.is-active{background:rgba(255,255,255,.05)}
/* the row lifts on hover elsewhere; here the preview does the moving */
.mega-split .mega-products a:hover{transform:none}

.mega-preview{position:relative}
.mega-preview .frame{width:100%}
/* The chrome is sized for a full-width frame: 49px is a tenth of a hero shot
   but a fifth of this one. Scale it to the frame it sits on. */
.mega-preview .shot{position:relative;aspect-ratio:1.6;overflow:hidden}
.mega-preview .shot img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:top;
  opacity:0;
  transition:opacity .3s var(--ease);
  will-change:opacity;
}
.mega-preview .shot img.is-active{opacity:1}

/* At the narrow end of the desktop range the list would be squeezed, so the
   preview gives back width before it gives up existing. */
@media(max-width:1199px){
  .mega-split{grid-template-columns:minmax(0,1fr) 320px;gap:28px}
}

@media(prefers-reduced-motion:reduce){
  .mega-preview .shot img{transition:none}
  .mega-split .mega-products a::before{transition:none}
}

/* =========================================================
   FRAMES, CHROME & PHONE — PROPORTIONAL, NOT FIXED
   The browser bar above every screenshot was a fixed 49px on desktop and
   31px on phones, whatever the frame's size: 4% of a 1240px showcase but
   20% of the orbit's centre, and 9% of every frame on a phone. Real
   browser chrome is about 5% of the window. Each frame is now a size
   container, so its bar, dots and address field are a share of its own
   width and stay in proportion at any size.
   The corners were a flat 20px too, which reads as a pill on a 150px
   frame. They now scale with the viewport, and the small frames take a
   tighter radius of their own.
   ========================================================= */
:root{--radius-frame:clamp(10px, calc(4px + 1.1vw), 18px)}
.frame{container-type:inline-size}
.frame .chrome{
  gap:clamp(3px, .75cqw, 7px);
  padding:clamp(3px, 1.3cqw, 11px) clamp(7px, 1.9cqw, 16px);
}
.frame .chrome .dot{width:clamp(4px, 1.05cqw, 10px);height:clamp(4px, 1.05cqw, 10px)}
/* the address field sits centred, like a browser's, instead of running the
   full width; the ::after balances the dots so centred means centred */
.frame .chrome .bar{
  flex:0 1 46%;margin:0 auto;
  height:clamp(6px, 2.4cqw, 20px);border-radius:clamp(3px, .7cqw, 6px);
}
.frame .chrome::after{content:"";flex:0 0 auto;width:calc(3 * clamp(4px, 1.05cqw, 10px) + 2 * clamp(3px, .75cqw, 7px))}
.orbit .center{--radius-frame:clamp(7px, 1.4vw, 12px)}
.mega-preview .frame{--radius-frame:12px}
@media(max-width:767px){.svc-showcase,.coverage-shell{--bezel:5px}}

/* The orbit's product tiles: 16px on a 48px tile is a third of its side,
   which reads as a blob. A quarter keeps the shape. */
.node .ic{border-radius:12px}

/* The hero phone keeps the same browser bar as every other frame, so the
   two read as one family — but at phone proportions (19.5:9, not the old
   9:14 crop) and with the bar scaled to the phone's own width: a sliver,
   not a desktop title bar shrunk onto a narrow screen. Corner radii are
   given per axis so they come out round on a tall box. */
.phone-frame{border-radius:12% / 5.6%}
.phone-frame .phone-shot{aspect-ratio:401/767}  /* the screenshot's own shape: 9:19.5 sliced ~6% off each side */
.phone-frame .chrome{
  gap:clamp(2px, 2.4cqw, 4px);
  padding:clamp(2px, 2.6cqw, 6px) clamp(6px, 7cqw, 12px);
}
.phone-frame .chrome .dot{width:clamp(3px, 3.2cqw, 6px);height:clamp(3px, 3.2cqw, 6px)}
.phone-frame .chrome .bar{height:clamp(5px, 6cqw, 10px);border-radius:clamp(2px, 2cqw, 4px)}
.phone-frame .chrome::after{width:calc(3 * clamp(3px, 3.2cqw, 6px) + 2 * clamp(2px, 2.4cqw, 4px))}
/* On a phone the device hangs off the dashboard's bottom-right corner,
   narrower than before so that, at its true height, it overlaps the
   dashboard rather than covering it. */
@media(max-width:599px){
  .hero .phone{left:auto;right:6px;bottom:-30px;width:29%;max-width:116px}
}

/* =========================================================
   SERVICES HEADER — DESKTOP
   Side by side, the heading and the three checks were squeezing each
   other: the heading broke with "clicks" alone on its second line and the
   checks wrapped two-and-one. The heading now balances its lines, the
   checks hold one row, and they only sit beside the heading where there
   is room for both (1100px+); below that they sit under it.
   ========================================================= */
.services-head h2{text-wrap:balance}
@media(min-width:768px){.services-head{flex-direction:column;align-items:flex-start}}
@media(min-width:1100px){
  .services-head{flex-direction:row;align-items:flex-end;gap:48px}
  .services-head > div:first-child{flex:1 1 auto;min-width:0}
  .services-head .chiprow{flex:none;flex-wrap:nowrap;padding-bottom:6px}
  .chiprow span{white-space:nowrap}
}

/* The Products / Services button of the section you are in: same weight as
   an open menu, plus a short brand rule underneath. */
.nav .has-menu.is-current{color:#fff;position:relative}
.nav .has-menu.is-current::after{content:"";position:absolute;left:14px;right:30px;bottom:2px;height:2px;border-radius:2px;background:var(--brand)}
/* plain top-bar links get the same "you are here" mark */
.nav > a.is-current{color:#fff;position:relative}
.nav > a.is-current::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--brand)}