/* ==========================================================================
   igo2fix — site.css (light redesign, 2026-09-25)
   One stylesheet for every page. Sections:
   1 tokens · 2 base · 3 layout · 4 header & menu · 5 buttons & bits
   6 hero · 7 home sections · 8 illustrations · 9 inner-page components
   10 footer & mobile bar · 11 motion · 12 reduced motion & print
   ========================================================================== */

/* Plus Jakarta Sans, served from this site (was Google Fonts: one less server to wait for). One variable file covers 200–800. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin.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:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root{
  --white:#fff;
  --bg-soft:#F5F7FB;
  --bg-tint:#EEF3FC;
  --line:#E4E9F2;
  --line-strong:#D3DBE8;
  --ink:#0B1324;
  --ink-2:#1C2638;
  --text:#3B4659;
  --muted:#5E6B80;
  --blue:#0A5CE6;
  --blue-dark:#0848B8;
  --blue-400:#4B86F2;
  --blue-200:#BCD2FF;
  --blue-100:#DDE8FF;
  --blue-50:#EEF4FF;
  --violet:#7C5CFF;
  --violet-50:#F3F0FF;
  --navy:#0B1324;
  --navy-2:#131F38;
  --green:#12A150;
  --green-dark:#0F7A3D;
  --green-50:#E8F7EE;
  --wa:#25D366;
  --wa-btn:#11873F;
  --amber:#F5A524;
  --red:#FF4D4F;
  --grad:linear-gradient(135deg,#0A5CE6 0%,#3F63F5 48%,#7C5CFF 100%);
  --grad-text:linear-gradient(92deg,#0A5CE6 0%,#4D5EF6 55%,#7C5CFF 100%);
  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:22px; --r-2xl:30px;
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 1px 2px rgba(15,23,42,.04),0 8px 20px -8px rgba(15,35,80,.10);
  --sh-3:0 2px 4px rgba(15,23,42,.04),0 18px 40px -14px rgba(15,35,80,.18);
  --sh-4:0 4px 10px rgba(15,23,42,.04),0 30px 60px -22px rgba(15,35,80,.28);
  --sh-blue:0 10px 24px -10px rgba(10,92,230,.65),0 2px 6px -2px rgba(10,92,230,.35);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --container:1200px;
  --gutter:clamp(16px,4vw,32px);
  --header-h:72px;
  --section:clamp(64px,8vw,112px);
  --fs-h1:clamp(2.2rem,1.35rem + 3.3vw,3.9rem);
  --fs-h2:clamp(1.75rem,1.28rem + 1.9vw,2.75rem);
}
@media (max-width:767.98px){:root{--header-h:64px}}

/* ── 2. Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;font-family:var(--font);font-size:1rem;line-height:1.65;color:var(--text);background:#fff;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
@media (min-width:768px){body{font-size:1.0313rem}}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:800;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.038em}
h2{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.032em}
h3{font-size:1.25rem;font-weight:700;line-height:1.3;letter-spacing:-.018em}
h4{font-size:1.0625rem;font-weight:700;line-height:1.35;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0}
a{color:var(--blue);text-decoration:none;transition:color .2s}
a:hover{color:var(--blue-dark)}
main p a,main li a,.faq-a a,.callout a{text-decoration:underline;text-decoration-color:rgba(10,92,230,.35);text-underline-offset:3px;text-decoration-thickness:1.5px}
main p a:hover,main li a:hover{text-decoration-color:currentColor}
img{max-width:100%;height:auto;display:block}
button{font:inherit}
strong,b{font-weight:700;color:var(--ink-2)}
::selection{background:rgba(10,92,230,.16)}
:focus-visible{outline:3px solid rgba(10,92,230,.55);outline-offset:3px;border-radius:6px}
main:focus{outline:none}
.i{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.18em}
.i,.chev,.sub-ico svg,.icon-tile svg,.feature svg,.ico svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i-fill{fill:currentColor!important;stroke:none!important}
.sr-only{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-link{position:fixed;top:-64px;left:12px;z-index:1000;padding:10px 16px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;transition:top .2s}
.skip-link:focus{top:12px;color:#fff}

/* ── 3. Layout ───────────────────────────────────────────────────────────── */
.container{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section);position:relative;overflow-x:clip}
.section.tight{padding-block:clamp(48px,6vw,80px)}
.section.flush-top{padding-top:0}
.section-soft{background:var(--bg-soft)}
.section-tint{background:linear-gradient(180deg,#F4F7FD 0%,#fff 100%)}
.section-head{max-width:760px;margin:0 auto clamp(36px,5vw,60px);text-align:center}
.section-head.left{margin-left:0;text-align:left}
.section-head h2{margin-top:14px}
.section-head p{margin-top:16px;font-size:1.0625rem;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:var(--blue-50);color:var(--blue);
  font-size:.8125rem;font-weight:700;letter-spacing:.01em;line-height:1.3}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(10,92,230,.15)}
.lead{font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);line-height:1.65;color:var(--text)}
.muted{color:var(--muted)}
.hl{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.center{text-align:center}
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:44px}
.mb-s{margin-bottom:14px}
.stack{display:grid;gap:18px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.split.wide-text{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.split.reverse>.split-visual{order:-1}
.split-copy>*+*{margin-top:18px}
.split-copy h2+p,.split-copy h3+p{margin-top:14px}
@media (max-width:899.98px){.split,.split.wide-text{grid-template-columns:1fr}.split.reverse>.split-visual{order:0}}
.h-md{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:800;letter-spacing:-.028em;line-height:1.15}
.center-tags{justify-content:center;max-width:920px;margin:0 auto}
.more-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue);text-decoration:none!important}
.more-link .i{transition:transform .3s var(--ease)}
.more-link:hover .i{transform:translateX(4px)}

/* ── 4. Header & menu ────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:100;height:var(--header-h)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background-color .3s}
.site-header.scrolled::before{background:rgba(255,255,255,.93);border-bottom-color:var(--line);box-shadow:0 10px 30px -22px rgba(15,35,80,.35)}
.header-inner{height:100%;display:flex;align-items:center;gap:16px}
.brand{flex:none;display:inline-flex;align-items:center;border-radius:12px;transition:transform .35s var(--ease)}
.brand img{height:50px;width:auto;filter:drop-shadow(0 0 1px rgba(11,19,36,.95)) drop-shadow(0 0 1.5px rgba(11,19,36,.8)) drop-shadow(0 0 7px rgba(11,19,36,.4)) drop-shadow(0 5px 10px rgba(11,19,36,.4));transition:filter .35s var(--ease)}
.brand:hover{transform:translateY(-1px)}
.brand:hover img{filter:drop-shadow(0 0 1px rgba(11,19,36,.95)) drop-shadow(0 0 1.5px rgba(11,19,36,.8)) drop-shadow(0 0 9px rgba(11,19,36,.45)) drop-shadow(0 9px 16px rgba(11,19,36,.45))}
.main-nav{margin-left:auto}
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 12px;border:0;border-radius:10px;background:none;
  color:var(--ink-2);font-size:.9375rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .2s,background-color .2s}
.nav-link:hover,.has-sub.open>.nav-link{color:var(--blue);background:var(--blue-50)}
.nav-link[aria-current="page"],.has-sub.is-current>.nav-link{color:var(--blue)}
.nav-link[aria-current="page"]::after,.has-sub.is-current>.nav-link::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.chev{width:15px;height:15px;transition:transform .3s var(--ease)}
.has-sub{position:relative}
.has-sub.open>.nav-link .chev{transform:rotate(180deg)}
.sub-menu{position:absolute;top:calc(100% + 12px);left:50%;z-index:10;min-width:300px;padding:8px;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-4);opacity:0;visibility:hidden;transform:translate(-50%,10px) scale(.98);transform-origin:50% 0;
  transition:opacity .2s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
.sub-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-sub.open>.sub-menu{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}
.sub-inner{display:grid;gap:2px}
.sub-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ink);transition:background-color .2s}
.sub-link:hover{background:var(--bg-soft);color:var(--ink)}
.sub-ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--blue-50);color:var(--blue);transition:background-color .25s,color .25s}
.sub-ico svg{width:19px;height:19px}
.sub-link:hover .sub-ico,.sub-link[aria-current="page"] .sub-ico{background:var(--blue);color:#fff}
.sub-txt b{display:block;font-size:.9375rem;line-height:1.3;color:var(--ink)}
.sub-txt small{display:block;margin-top:1px;font-size:.8125rem;line-height:1.35;color:var(--muted)}
.nav-sheet-cta{display:none}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:10px}
.header-phone{display:none;align-items:center;gap:8px;padding:0 6px;color:var(--ink);font-weight:700;font-size:.9375rem;white-space:nowrap}
.header-phone .i{color:var(--blue)}
.header-phone:hover{color:var(--blue)}
@media (min-width:1200px){.header-phone{display:inline-flex}}
.menu-toggle{display:none}
.nav-overlay{position:fixed;inset:var(--header-h) 0 0 0;z-index:98;background:rgba(11,19,36,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .35s}

@media (max-width:1023.98px){
  .header-inner{gap:10px}
  .header-actions{margin-left:auto}
  .menu-toggle{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;box-shadow:var(--sh-1)}
  .bars{position:relative;display:block;width:18px;height:12px}
  .bars i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),opacity .2s,top .35s var(--ease)}
  .bars i:nth-child(1){top:0}.bars i:nth-child(2){top:5px}.bars i:nth-child(3){top:10px}
  .nav-open .bars i:nth-child(1){top:5px;transform:rotate(45deg)}
  .nav-open .bars i:nth-child(2){opacity:0}
  .nav-open .bars i:nth-child(3){top:5px;transform:rotate(-45deg)}
  .main-nav{position:fixed;top:var(--header-h);right:0;bottom:0;z-index:99;width:min(420px,100%);margin:0;display:flex;flex-direction:column;
    padding:8px 18px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:#fff;border-left:1px solid var(--line);
    box-shadow:-30px 0 60px -30px rgba(15,35,80,.35);transform:translateX(102%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s}
  .nav-open .main-nav{transform:none;visibility:visible;transition-delay:0s}
  .nav-open .nav-overlay{opacity:1;pointer-events:auto}
  html.nav-open{overflow:hidden}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list>li{border-bottom:1px solid var(--line)}
  .nav-link{width:100%;height:56px;padding:0 6px;justify-content:space-between;border-radius:0;font-size:1.0625rem}
  .nav-link:hover,.has-sub.open>.nav-link{background:none}
  .nav-link[aria-current="page"]::after,.has-sub.is-current>.nav-link::after{display:none}
  .sub-menu{position:static;min-width:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;opacity:1;visibility:visible;transform:none;
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
  .sub-menu::before{display:none}
  .has-sub.open>.sub-menu{grid-template-rows:1fr;transform:none}
  .sub-inner{overflow:hidden;min-height:0;padding:0 0 0 4px}
  .has-sub.open .sub-inner{padding-bottom:10px}
  .sub-link{padding:9px 8px}
  .nav-sheet-cta{display:grid;gap:10px;margin-top:auto;padding-top:22px}
  .nav-sheet-note{margin-top:4px;text-align:center;font-size:.8125rem;color:var(--muted)}
}
@media (max-width:767.98px){
  .header-actions .header-cta{display:none}
  .brand img{height:44px}
}

/* ── 5. Buttons & small bits ─────────────────────────────────────────────── */
.btn{--h:48px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 22px;
  border:1px solid transparent;border-radius:999px;font-size:.9688rem;font-weight:700;line-height:1;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;
  text-decoration:none!important;-webkit-tap-highlight-color:transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s,color .25s,border-color .25s}
.btn .i{width:18px;height:18px}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--sh-blue)}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.3) 50%,transparent 75%);transform:translateX(-130%);transition:transform .9s var(--ease)}
.btn-primary:hover{background:var(--blue-dark);color:#fff;transform:translateY(-1px);box-shadow:0 16px 32px -14px rgba(10,92,230,.8),0 2px 6px -2px rgba(10,92,230,.4)}
.btn-primary:hover::before{transform:translateX(130%)}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line-strong);box-shadow:var(--sh-1)}
.btn-secondary .i{color:var(--blue)}
.btn-secondary:hover{color:var(--blue);border-color:var(--blue);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn-light{background:#fff;color:var(--blue);box-shadow:0 12px 28px -12px rgba(0,0,0,.4)}
.btn-light:hover{color:var(--blue-dark);transform:translateY(-1px)}
.btn-outline-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline-light:hover{background:rgba(255,255,255,.18);color:#fff;border-color:#fff;transform:translateY(-1px)}
.btn-whatsapp{background:var(--wa-btn);color:#fff;box-shadow:0 10px 24px -12px rgba(17,135,63,.7)}
.btn-whatsapp:hover{background:#0C6F33;color:#fff;transform:translateY(-1px)}
.btn-lg{--h:56px;padding:0 28px;font-size:1.0313rem}
.btn-sm{--h:40px;padding:0 17px;font-size:.9063rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:479.98px){.btn-row>.btn{flex:1 1 100%}}

.icon-tile{--tone:var(--blue);width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:15px;color:var(--tone);
  background:linear-gradient(150deg,#F4F8FF 0%,#DFE9FF 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(10,92,230,.12),0 8px 16px -10px rgba(10,92,230,.55)}
.icon-tile svg{width:25px;height:25px}
.icon-tile.sm{width:42px;height:42px;border-radius:12px}.icon-tile.sm svg{width:21px;height:21px}
.icon-tile.lg{width:60px;height:60px;border-radius:18px}.icon-tile.lg svg{width:28px;height:28px}
.it-violet{--tone:var(--violet);background:linear-gradient(150deg,#F7F4FF 0%,#E7E0FF 100%);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(124,92,255,.14),0 8px 16px -10px rgba(124,92,255,.6)}
.it-green{--tone:var(--green-dark);background:linear-gradient(150deg,#F1FBF5 0%,#D8F3E3 100%);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(18,161,80,.16),0 8px 16px -10px rgba(18,161,80,.5)}
.it-amber{--tone:#B45309;background:linear-gradient(150deg,#FFF9EE 0%,#FCE8C2 100%);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(217,119,6,.16),0 8px 16px -10px rgba(217,119,6,.5)}
.it-navy{--tone:#fff;background:radial-gradient(120% 130% at 20% 0%,#2A3D68 0%,#0B1324 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 16px -10px rgba(11,19,36,.8)}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);
  color:var(--ink-2);font-size:.875rem;font-weight:600;line-height:1.3;box-shadow:var(--sh-1)}
.chip .i{width:17px;height:17px;color:var(--green)}
.tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--blue-50);color:var(--blue);font-size:.75rem;font-weight:700;letter-spacing:.01em}
.stars{display:inline-flex;gap:2px;color:var(--amber)}
.stars svg{width:17px;height:17px;fill:currentColor}
.checklist{list-style:none;padding:0;display:grid;gap:11px}
.split-copy>.checklist{margin-top:22px}
.checklist li{position:relative;padding-left:32px;color:var(--ink-2);font-weight:500;line-height:1.5}
.checklist li::before{content:"";position:absolute;left:0;top:.06em;width:21px;height:21px;border-radius:50%;
  background:var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A5CE6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;
  box-shadow:inset 0 0 0 1px rgba(10,92,230,.14)}
.checklist.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 22px}
@media (max-width:559.98px){.checklist.two{grid-template-columns:1fr}}
.list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.list li{position:relative;padding-left:26px;line-height:1.6}
.list li::before{content:"";position:absolute;left:5px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue-50)}
.olist{list-style:none;counter-reset:ol;margin:16px 0 0;padding:0;display:grid;gap:12px}
.olist li{counter-increment:ol;position:relative;padding-left:44px;min-height:30px;line-height:1.6}
.olist li::before{content:counter(ol);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-50);color:var(--blue);font-weight:800;font-size:.8438rem;box-shadow:inset 0 0 0 1px rgba(10,92,230,.15)}
.callout{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--blue-50);border:1px solid var(--blue-100);
  color:var(--ink-2);font-size:.9375rem;line-height:1.6}
.callout::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;background:var(--blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E") center/contain no-repeat}
.callout.lead-callout{margin:0 0 24px;font-size:1rem}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--sh-2);padding:clamp(22px,2.6vw,32px)}
.card-lift{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.card-lift:hover{transform:translateY(-5px);box-shadow:var(--sh-4);border-color:var(--blue-100)}
[data-tilt]{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .7s var(--ease),box-shadow .5s var(--ease),border-color .3s}
[data-tilt].tilting{transition:transform .12s linear,box-shadow .5s var(--ease),border-color .3s}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(600px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 40%)}
[data-tilt].tilting::after{opacity:1}

/* ── 6. Hero (home) ──────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:clamp(28px,5vw,64px) 0 clamp(56px,7vw,104px);
  background:radial-gradient(55% 60% at 80% 42%,rgba(10,92,230,.11),transparent 70%),radial-gradient(45% 45% at 0% 0%,rgba(124,92,255,.09),transparent 70%),linear-gradient(180deg,#F6F8FD 0%,#fff 88%)}
.hero::before,.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(11,19,36,.10) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 30%,#000 25%,transparent 75%);mask-image:radial-gradient(75% 65% at 50% 30%,#000 25%,transparent 75%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);
  color:var(--ink-2);font-size:.875rem;font-weight:600;line-height:1.3}
.hero-badge>span:last-child{min-width:0}
.live-dot{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:var(--green)}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green)}
.hero h1{margin-top:22px;max-width:14ch}
.swoosh-wrap{position:relative;display:inline-block;white-space:nowrap}
.swoosh{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.36em;overflow:visible;pointer-events:none}
.swoosh path{fill:none;stroke:url(#swooshGrad);stroke-width:7;stroke-linecap:round}
.hero .lead{margin-top:22px;max-width:36rem}
.hero .btn-row{margin-top:32px}
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:30px;padding:0;list-style:none;color:var(--ink-2);font-size:.9063rem;font-weight:600}
.hero-proof li{display:inline-flex;align-items:center;gap:8px}
.hero-proof .i{width:18px;height:18px;color:var(--green)}
.hero-proof .rating b{color:var(--ink);font-weight:800}
.hero-visual{position:relative}
.hv-stage{position:relative;width:100%;max-width:620px;aspect-ratio:1/1;margin-inline:auto;--px:0;--py:0}
.hv-backdrop{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,#CFDFFF 0%,#E2EBFF 45%,rgba(234,241,255,0) 100%)}
.hv-ring{position:absolute;border-radius:50%;border:1px solid rgba(10,92,230,.14)}
.hv-ring.r1{inset:10%}
.hv-ring.r2{inset:20%;border-style:dashed;border-color:rgba(10,92,230,.2)}
.hv-ring.r3{inset:31%;border-color:rgba(124,92,255,.16)}
.hv-sweep{position:absolute;inset:10%;border-radius:50%;background:conic-gradient(from 0deg,rgba(10,92,230,.11),rgba(10,92,230,0) 55deg,transparent 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 30%,#000 31%);mask:radial-gradient(closest-side,transparent 30%,#000 31%)}
.hv-floor{position:absolute;left:-8%;right:-8%;bottom:0;height:34%;transform:perspective(420px) rotateX(64deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(10,92,230,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(10,92,230,.16) 1px,transparent 1px);background-size:34px 34px;
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 80%);mask-image:linear-gradient(to top,#000 5%,transparent 80%)}
.hv-shadow{position:absolute;left:50%;bottom:13%;width:44%;height:7%;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(11,19,36,.26),rgba(11,19,36,0));filter:blur(4px)}
#hero3d{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s var(--ease);touch-action:pan-y;cursor:grab}
#hero3d:active{cursor:grabbing}
.hv-stage.is-3d #hero3d{opacity:1}
.hv-still{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;transition:opacity .5s .15s}
.hv-stage.has-still #hero3d{transition:none}
.hv-stage.is-3d .hv-still{opacity:0}
.hv-stage.no-webgl .hv-still{display:none}
.hv-fallback{display:none;position:absolute;left:4%;right:4%;top:24%;width:92%;z-index:2}
.hv-stage.no-webgl .hv-fallback{display:block}
.hv-stage.no-webgl #hero3d{display:none}
.float-card{--depth:14;position:absolute;z-index:3;pointer-events:none;transform:translate3d(calc(var(--px) * var(--depth) * 1px),calc(var(--py) * var(--depth) * 1px),0);transition:transform .8s var(--ease)}
.fc-in{display:flex;align-items:center;gap:11px;padding:10px 16px 10px 10px;border-radius:16px;background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,42,.06),0 22px 44px -18px rgba(15,35,80,.35);white-space:nowrap}
.fc-in b{display:block;color:var(--ink);font-size:.875rem;line-height:1.25}
.fc-in small{display:block;color:var(--muted);font-size:.75rem;line-height:1.3;font-weight:600}
.fc-live{top:5%;left:0;--depth:22}
.fc-alert{top:24%;right:-2%;--depth:30}
.fc-remote{bottom:9%;left:-3%;--depth:18}
.fc-wifi{bottom:3%;right:3%;--depth:26}
.fc-thumb{position:relative;width:64px;height:42px;border-radius:9px;overflow:hidden;background:#0E1A33;flex:none}
.fc-thumb svg{width:100%;height:100%}
.fc-thumb::after{content:"";position:absolute;top:5px;left:5px;width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red)}
.fc-rec{display:inline-flex;align-items:center;gap:5px;margin-right:4px;color:#E5484D!important;font-weight:800!important;letter-spacing:.06em;font-size:.75rem}
.fc-rec::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.bars-mini{display:inline-flex;align-items:flex-end;gap:2px;height:14px;margin-left:4px}
.bars-mini i{width:3px;border-radius:2px;background:var(--green)}
.bars-mini i:nth-child(1){height:5px}.bars-mini i:nth-child(2){height:9px}.bars-mini i:nth-child(3){height:14px}
.hero-scroll{display:none}
@media (max-width:1023.98px){
  .hero-grid{grid-template-columns:1fr}
  .hero h1{max-width:18ch}
  .hv-stage{max-width:520px}
}
@media (max-width:767.98px){
  .hero{padding-top:22px}
  .hero-copy{text-align:left}
  .hero h1{margin-top:18px}
  .hero-proof{gap:10px 16px;font-size:.8438rem}
  .hv-stage{max-width:430px;margin-top:4px}
  .fc-in{padding:8px 12px 8px 8px;gap:9px;border-radius:13px}
  .fc-in b{font-size:.8125rem}.fc-in small{font-size:.6875rem}
  .fc-thumb{width:52px;height:34px}
  .fc-live{left:0;top:4%}
  .fc-alert{right:0;top:40%}
  .fc-remote,.fc-wifi{display:none}
}

/* ── 7. Home sections ────────────────────────────────────────────────────── */
/* Brands strip */
.logo-strip{border-block:1px solid var(--line);background:#fff}
.logo-strip .container{display:flex;align-items:center;gap:36px;padding-block:26px}
.ls-label{flex:none;max-width:190px;color:var(--muted);font-size:.8438rem;font-weight:700;line-height:1.4}
.marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;width:max-content}
.marquee-set{display:flex;align-items:center;gap:60px;padding-right:60px}
.marquee-set img{height:30px;width:auto;max-width:none;transition:transform .3s var(--ease)}
.marquee-set img:hover{transform:scale(1.08)}
.marquee-set img.sq{height:34px}
@media (max-width:767.98px){.logo-strip .container{flex-direction:column;gap:14px;padding-block:22px}.ls-label{max-width:none;text-align:center}.marquee{width:100%}}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.svc-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-2xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
.svc-card:hover{--lift:-6px;box-shadow:var(--sh-4);border-color:var(--blue-100)}
.svc-art{position:relative;height:220px;display:grid;place-items:center;padding:22px;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(90% 90% at 50% 100%,#DCE7FF 0%,rgba(220,231,255,0) 70%),linear-gradient(165deg,#F7F9FF 0%,#EAF0FF 100%)}
.svc-art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(10,92,230,.16) 1px,transparent 1.3px);background-size:16px 16px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.svc-art>*{position:relative}
.svc-body{display:flex;flex:1;flex-direction:column;gap:14px;padding:24px 26px 26px}
.svc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.svc-price{padding:5px 11px;border-radius:999px;background:var(--green-50);color:var(--green-dark);font-size:.7813rem;font-weight:800;white-space:nowrap}
.svc-card h3{font-size:1.375rem}
.svc-card h3 a{color:inherit;text-decoration:none!important}
.svc-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.svc-card p{color:var(--muted)}
.svc-card .checklist{gap:9px;font-size:.9375rem}
.svc-card .more-link{margin-top:auto;padding-top:6px}
.svc-wide{grid-column:1/-1;flex-direction:row}
.svc-wide .svc-art{order:2;flex:0 0 46%;height:auto;min-height:280px;border-bottom:0;border-left:1px solid var(--line)}
.svc-wide .svc-body{justify-content:center;padding:clamp(26px,4vw,48px)}
.svc-wide .btn-row{position:relative;z-index:2;margin-top:6px}
@media (max-width:1023.98px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.svc-grid>.svc-card:nth-child(3){grid-column:1/-1}}
@media (max-width:679.98px){.svc-grid{grid-template-columns:1fr}.svc-wide{flex-direction:column}.svc-wide .svc-art{order:0;flex:none;min-height:230px;border-left:0;border-bottom:1px solid var(--line)}}

/* Why us */
.why{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start}
.why-intro{position:sticky;top:calc(var(--header-h) + 32px)}
.why-intro h2{margin-top:14px}
.why-intro p{margin-top:16px;color:var(--muted);font-size:1.0625rem}
.why-intro .btn-row{margin-top:28px}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.feature-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.feature{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.feature:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--blue-100)}
.feature h3{font-size:1.0938rem}
.feature p{color:var(--muted);font-size:.9375rem;line-height:1.6}
@media (max-width:1023.98px){.why{grid-template-columns:1fr}.why-intro{position:static}.feature-grid.three,.feature-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559.98px){.feature-grid,.feature-grid.three,.feature-grid.four{grid-template-columns:1fr}}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r-2xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-3);overflow:hidden}
.stat{position:relative;padding:clamp(24px,3vw,36px) 16px;text-align:center}
.stat+.stat::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:var(--line)}
.stat-num{font-size:clamp(2rem,1.45rem + 2vw,2.9rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-num .u{color:var(--blue)}
.stat-label{margin-top:8px;color:var(--muted);font-size:.875rem;font-weight:600}
@media (max-width:767.98px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(3)::before{display:none}.stat:nth-child(n+3){border-top:1px solid var(--line)}}

/* Steps */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps::before{content:"";position:absolute;top:31px;left:calc(100% / 6);right:calc(100% / 6);height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue-200),var(--blue) 50%,var(--violet));transform-origin:left center}
.steps.four::before{left:12.5%;right:12.5%}
.step{position:relative;text-align:center;padding:0 8px}
.step-num{position:relative;z-index:1;width:62px;height:62px;margin:0 auto 20px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--blue);
  font-weight:800;font-size:1.0625rem;border:1px solid var(--blue-100);box-shadow:0 0 0 7px var(--bg-soft),var(--sh-2)}
.section:not(.section-soft) .step-num{box-shadow:0 0 0 7px #fff,var(--sh-2)}
.step h3{font-size:1.1875rem}
.step p{margin-top:10px;color:var(--muted);font-size:.9688rem}
@media (max-width:899.98px){.steps.four{grid-template-columns:repeat(2,minmax(0,1fr))}.steps.four::before{display:none}}
@media (max-width:767.98px){
  .steps,.steps.four{grid-template-columns:1fr;gap:26px}
  .steps::before,.steps.four::before{display:block;top:31px;bottom:31px;left:30px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--blue-200),var(--blue) 50%,var(--violet));transform-origin:center top}
  .step{text-align:left;padding:0 0 0 84px;min-height:62px}
  .step-num{position:absolute;left:0;top:0;margin:0}
}

/* Reviews */
.reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,48px)}
.reviews-head .section-head{margin:0}
.rating-card{display:flex;align-items:center;gap:14px;padding:12px 20px 12px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.rating-card .big{font-size:1.75rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1}
.rating-card small{display:block;color:var(--muted);font-size:.8125rem;font-weight:600}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.review-card{position:relative;display:flex;flex-direction:column;gap:18px;margin:0;padding:28px;border-radius:var(--r-2xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.review-card::before{content:"\201C";position:absolute;top:6px;right:22px;color:var(--blue-100);font:800 5.5rem/1 Georgia,'Times New Roman',serif}
.review-card blockquote{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.65}
.review-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px}
.review-who img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid var(--line)}
.review-who .avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:800}
.review-who cite{display:block;font-style:normal;font-weight:700;color:var(--ink);line-height:1.3}
.review-who span{display:block;color:var(--muted);font-size:.8125rem}
@media (max-width:1023.98px){.review-grid{grid-template-columns:1fr 1fr}.review-grid>:nth-child(3){grid-column:1/-1}}
@media (max-width:679.98px){.review-grid{grid-template-columns:1fr}.review-grid>:nth-child(3){grid-column:auto}}

/* Coverage map */
.coverage{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:center}
.coverage-copy h2{margin-top:14px}
.coverage-copy>p{margin-top:16px;color:var(--muted);font-size:1.0625rem}
.area-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:26px 0 28px;padding:0}
.area-tags li{padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-2);font-size:.875rem;font-weight:600;box-shadow:var(--sh-1)}
.area-tags li.hq{background:var(--ink);border-color:var(--ink);color:#fff}
@property --map-rz{syntax:"<angle>";inherits:true;initial-value:-30deg}
.map3d{--map-rx:54deg;--map-rz:-30deg;position:relative;width:100%;max-width:580px;aspect-ratio:1/1;margin-inline:auto;perspective:1300px}
.map-plane{position:absolute;inset:9% 6% 12%;transform-style:preserve-3d;transform:rotateX(var(--map-rx)) rotateZ(var(--map-rz));border-radius:30px;
  background:radial-gradient(circle at 13% 70%,rgba(10,92,230,.16),transparent 38%),radial-gradient(rgba(10,92,230,.2) 1.1px,transparent 1.4px) 0 0/18px 18px,linear-gradient(150deg,#fff 0%,#EDF2FF 100%);
  border:1px solid var(--blue-100);box-shadow:0 70px 90px -50px rgba(15,35,80,.45),inset 0 0 0 6px rgba(255,255,255,.7)}
.map-sea{position:absolute;inset:0 auto 0 0;width:15%;border-radius:30px 0 0 30px;background:linear-gradient(90deg,rgba(10,92,230,.12),transparent)}
.map-region{position:absolute;color:rgba(10,92,230,.38);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;transform:translate(-50%,-50%)}
.map-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map-lines line{stroke:var(--blue);stroke-width:1.2;stroke-dasharray:3 4;opacity:.5;vector-effect:non-scaling-stroke}
.map-pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0;transform-style:preserve-3d}
.map-dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(10,92,230,.18),0 2px 6px rgba(10,92,230,.5)}
.map-label{position:absolute;left:0;top:0;transform-origin:0 0;transform:rotateZ(calc(var(--map-rz) * -1)) rotateX(calc(var(--map-rx) * -1)) translate(-50%,calc(-100% - 12px));
  padding:4px 9px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 14px -6px rgba(15,35,80,.35);
  color:var(--ink);font-size:11px;font-weight:700;white-space:nowrap}
.map-pin.below .map-label{transform:rotateZ(calc(var(--map-rz) * -1)) rotateX(calc(var(--map-rx) * -1)) translate(-50%,12px)}
.map-pin.hq .map-dot{left:-8px;top:-8px;width:16px;height:16px;background:var(--ink);box-shadow:0 0 0 5px rgba(11,19,36,.14)}
.map-pin.hq .map-label{background:var(--ink);border-color:var(--ink);color:#fff;font-size:12px;padding:5px 11px}
.map-ping{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:2px solid rgba(10,92,230,.45);opacity:0}
@media (max-width:1023.98px){.coverage{grid-template-columns:1fr}.map3d{max-width:520px}}
@media (max-width:559.98px){.map-plane{inset:14% 11% 16%}.map-pin.minor .map-label{display:none}.map-label{font-size:10px;padding:3px 7px}.map-region{font-size:8px}}

/* CTA band */
.cta-band{position:relative;isolation:isolate;overflow:hidden;border-radius:clamp(24px,3vw,36px);padding:clamp(36px,6vw,72px);color:#dce6ff;
  background:var(--grad);box-shadow:0 40px 80px -40px rgba(10,92,230,.75)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:40px 40px;
  -webkit-mask-image:radial-gradient(80% 90% at 85% 20%,#000,transparent 70%);mask-image:radial-gradient(80% 90% at 85% 20%,#000,transparent 70%)}
.cta-band::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-120px;top:-200px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center}
.cta-band .eyebrow{background:rgba(255,255,255,.14);color:#fff}
.cta-band .eyebrow::before{box-shadow:0 0 0 3px rgba(255,255,255,.2)}
.cta-band h2{margin-top:16px;color:#fff}
.cta-band p{margin-top:14px;color:rgba(235,241,255,.9);font-size:1.0938rem;max-width:34rem}
.cta-band .btn-row{margin-top:30px}
.cta-points{display:flex;flex-wrap:wrap;gap:10px 20px;margin:26px 0 0;padding:0;list-style:none;color:#fff;font-size:.9063rem;font-weight:600}
.cta-points li{display:inline-flex;align-items:center;gap:8px}
.cta-points .i{width:18px;height:18px;color:#A7F3D0}
.cta-stack{position:relative;height:260px;perspective:900px}
.cta-tile{position:absolute;left:50%;display:flex;align-items:center;gap:12px;width:250px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-weight:700;font-size:.9375rem;
  box-shadow:0 24px 40px -20px rgba(4,16,60,.6);transform:translateX(-50%) rotateX(18deg) rotateY(-22deg) rotateZ(4deg)}
.cta-tile .ico{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--blue)}
.cta-tile .ico svg{width:19px;height:19px}
.cta-tile:nth-child(1){top:6px}
.cta-tile:nth-child(2){top:92px;margin-left:34px}
.cta-tile:nth-child(3){top:178px;margin-left:-12px}
@media (max-width:899.98px){.cta-grid{grid-template-columns:1fr}.cta-stack{display:none}}

/* ── 8. Illustrations ────────────────────────────────────────────────────── */
/* Live camera feed */
.feed{position:relative;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;isolation:isolate;container-type:inline-size;background:#0E1A33;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 24px 44px -22px rgba(11,19,36,.65)}
.feed-scene{position:absolute;inset:0;width:100%;height:100%}
.feed::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),radial-gradient(130% 95% at 50% 50%,transparent 58%,rgba(0,0,0,.5))}
.feed-rec,.feed-time,.feed-meta{position:absolute;z-index:3;font-family:var(--mono);font-weight:700;line-height:1;color:#fff;font-size:clamp(8px,3.3cqi,12px);letter-spacing:.05em}
.feed-rec{top:6%;left:4%;display:flex;align-items:center;gap:.45em}
.feed-rec::before{content:"";width:.75em;height:.75em;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
.feed-time{top:6%;right:4%;color:rgba(255,255,255,.85);font-weight:600}
.feed-meta{left:4%;bottom:6%;color:rgba(255,255,255,.85);font-weight:600}
.feed-meta b{margin-right:.5em;padding:.25em .45em;border-radius:.3em;background:rgba(10,92,230,.92);color:#fff}
.feed-box{position:absolute;z-index:3;left:31.6%;top:46.5%;width:10.6%;height:29.5%;border:1.5px solid #34D399;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 14px rgba(52,211,153,.45)}
.feed-box i{position:absolute;left:-1.5px;bottom:100%;margin-bottom:3px;padding:.3em .5em;border-radius:3px;background:#34D399;color:#052E1C;
  font:700 clamp(7px,2.7cqi,10px)/1 var(--mono);font-style:normal;white-space:nowrap}
.feed-scan{position:absolute;left:0;right:0;top:-35%;height:35%;z-index:2;background:linear-gradient(180deg,transparent,rgba(125,170,255,.13),transparent)}

/* Remote support session */
.session{width:100%;max-width:330px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 50px -26px rgba(15,35,80,.45);overflow:hidden;text-align:left}
.session-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#F4F6FA;border-bottom:1px solid var(--line);font-size:.75rem;font-weight:700;color:var(--ink-2)}
.dots{display:inline-flex;gap:5px}
.dots i{width:8px;height:8px;border-radius:50%;background:#FF5F57}
.dots i:nth-child(2){background:#FEBC2E}.dots i:nth-child(3){background:#28C840}
.session-top .lock{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:var(--green-dark)}
.session-top .lock svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.session-body{padding:12px 14px 16px;display:grid;gap:8px}
.s-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;background:var(--bg-soft);font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.s-ico{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff}
.s-ico svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.s-row.run .s-ico{background:transparent;border:2px solid var(--blue-200);border-top-color:var(--blue)}
.s-val{margin-left:auto;color:var(--green-dark);font-size:.75rem;font-weight:800}
.s-row.run .s-val{color:var(--blue)}
.s-bar{height:6px;margin-top:4px;border-radius:6px;background:var(--blue-50);overflow:hidden}
.s-bar span{display:block;width:84%;height:100%;border-radius:6px;background:var(--grad)}

/* Mesh Wi-Fi plan */
.mesh{width:100%;max-width:340px}
.mesh svg{width:100%;height:auto;overflow:visible}
.mesh .room{fill:#fff;stroke:#C9D7F2;stroke-width:2}
.mesh .wall{fill:none;stroke:#C9D7F2;stroke-width:2;stroke-linecap:round}
.mesh .lbl{fill:#8A9BBF;font:700 8px var(--font);letter-spacing:.08em;text-transform:uppercase}
.mesh .node{fill:var(--blue)}
.mesh .node-core{fill:#fff}
.mesh .wave{fill:none;stroke:var(--blue);stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:0}
.mesh .link{stroke:var(--blue-400);stroke-width:1.5;stroke-dasharray:3 4;fill:none}
.mesh .dev{fill:var(--ink-2)}

/* Browser frame */
.browser-3d{display:block;perspective:1400px}
.browser{position:relative;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-4);overflow:hidden;
  transform:rotateX(9deg) rotateY(-13deg) rotateZ(1deg);transform-origin:50% 60%;transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.browser-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:#F3F5F9;border-bottom:1px solid var(--line)}
.browser-url{flex:1;min-width:0;height:19px;margin-left:10px;padding:0 8px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;
  border-radius:6px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:.6875rem;font-weight:600}
.browser img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.svc-art .browser{width:88%;max-width:380px}

/* Phone */
.phone-3d{display:grid;place-items:center;padding:20px 0;perspective:1300px}
.phone{position:relative;width:min(280px,78%);aspect-ratio:9/18.6;padding:11px;border-radius:44px;background:#0B1324;
  box-shadow:inset 0 0 0 2px #2B3758,0 0 0 1px #C3CDDD,16px 18px 0 -3px #C9D3E3,50px 70px 90px -40px rgba(15,35,80,.5);
  transform:rotateY(-20deg) rotateX(7deg) rotateZ(2deg);transition:transform 1.1s var(--ease)}
.phone-3d:hover .phone{transform:rotateY(-7deg) rotateX(3deg) rotateZ(0deg)}
.phone-screen{position:relative;height:100%;display:flex;flex-direction:column;gap:10px;padding:38px 11px 12px;border-radius:34px;overflow:hidden;background:linear-gradient(180deg,#0F1830,#0B1324);color:#fff}
.phone-notch{position:absolute;top:10px;left:50%;width:34%;height:22px;border-radius:12px;background:#000;transform:translateX(-50%)}
.app-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px;font-size:.75rem;font-weight:800}
.app-head span{display:inline-flex;align-items:center;gap:6px;color:#9FB3D9;font-weight:700;font-size:.6875rem}
.app-head span::before{content:"";width:7px;height:7px;border-radius:50%;background:#34D399;box-shadow:0 0 6px #34D399}
.phone .feed{border-radius:12px}
.app-tabs{display:flex;gap:4px;padding:3px;border-radius:10px;background:rgba(255,255,255,.06);font-size:.6875rem;font-weight:700}
.app-tabs span{flex:1;text-align:center;padding:6px 0;border-radius:8px;color:#9FB3D9}
.app-tabs span.on{background:var(--blue);color:#fff}
.app-alert{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25);font-size:.6875rem;line-height:1.35;color:#D1FAE5}
.app-alert b{display:block;color:#fff;font-size:.75rem}
.app-alert .ai{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#34D399;color:#052E1C}
.app-alert .ai svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.app-grid span{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:linear-gradient(160deg,#1D2F52,#0F1B33);font-size:.5625rem;font-weight:700;color:#C8D4EC;padding:5px 6px}
.app-grid span::after{content:"";position:absolute;right:6px;top:6px;width:5px;height:5px;border-radius:50%;background:var(--red)}
.app-grid span:nth-child(2){background:linear-gradient(160deg,#27405F,#132038)}
.app-grid span:nth-child(3){background:linear-gradient(160deg,#243152,#101a30)}
.app-grid span:nth-child(4){background:linear-gradient(160deg,#1B3448,#0E1C2C)}

/* Product photo card */
.product-card{position:relative;padding:clamp(20px,3vw,36px);border-radius:var(--r-2xl);background:radial-gradient(80% 70% at 50% 90%,#DCE7FF 0%,rgba(220,231,255,0) 70%),linear-gradient(165deg,#fff,#EEF3FF);
  border:1px solid var(--line);box-shadow:var(--sh-3)}
.product-card img{width:100%;height:auto}
.product-badge{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:13px;background:rgba(255,255,255,.92);border:1px solid var(--line);
  box-shadow:var(--sh-3);font-size:.8125rem;font-weight:700;color:var(--ink);white-space:nowrap}
.product-badge .i{width:17px;height:17px;color:var(--blue)}
.product-badge.pb1{top:8%;left:-3%}
.product-badge.pb2{bottom:10%;right:-3%}
@media (max-width:559.98px){.product-badge.pb1{left:4%}.product-badge.pb2{right:4%}}

/* Recorder wall (four live cameras) */
.nvr{width:100%;max-width:460px;padding:10px;border-radius:18px;background:#0B1324;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 34px 60px -30px rgba(11,19,36,.75)}
.nvr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px 10px;color:#9FB3D9;font:700 11px/1 var(--mono);letter-spacing:.06em}
.nvr-top b{color:#fff}
.nvr-top .rec{display:inline-flex;align-items:center;gap:6px;color:#FF8A8C}
.nvr-top .rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red)}
.nvr-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.nvr-tile{position:relative;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:#15223D}
.nvr-tile svg{display:block;width:100%;height:100%}
.nvr-tile span{position:absolute;left:6px;bottom:6px;padding:3px 6px;border-radius:4px;background:rgba(10,92,230,.88);color:#fff;font:700 9.5px/1 var(--mono);letter-spacing:.04em}
.nvr-tile::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);pointer-events:none}
/* Diagnostics / helpdesk card */
.diag{width:100%;max-width:420px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 34px 56px -28px rgba(15,35,80,.45);overflow:hidden;text-align:left}
.diag-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;background:var(--bg-soft);border-bottom:1px solid var(--line);color:var(--ink);font-size:.8438rem;font-weight:800}
.diag-top span{display:inline-flex;align-items:center;gap:6px;color:var(--green-dark);font-size:.75rem;white-space:nowrap}
.diag-top span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-50)}
.diag-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.diag-row:last-child{border-bottom:0}
.diag-row b{display:block;color:var(--ink);font-size:.875rem;line-height:1.35}
.diag-row small{display:block;color:var(--muted);font-size:.75rem;line-height:1.35}
.diag-row small s{text-decoration-color:rgba(229,72,77,.7)}
.diag-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--blue-50);color:var(--blue)}
.diag-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.diag-ok{padding:4px 10px;border-radius:999px;background:var(--green-50);color:var(--green-dark);font-size:.75rem;font-weight:800;white-space:nowrap}
/* Installs grid (CCTV page) */
.install-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.install-card{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-2xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.install-card img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.install-card h3{font-size:1.0938rem}
.install-card p{color:var(--muted);font-size:.9375rem;line-height:1.6}
.install-card q{display:block;color:var(--ink-2);font-weight:600;font-size:.9375rem;font-style:italic}
.install-card .tag{align-self:flex-start}
.install-cta{justify-content:center;background:var(--grad);border:0;color:#E6EDFF;box-shadow:0 30px 60px -30px rgba(10,92,230,.7)}
.install-cta h3{color:#fff;font-size:1.3125rem}
.install-cta p{color:rgba(235,241,255,.88)}
.install-cta .btn{align-self:flex-start;margin-top:6px}
@media (max-width:1023.98px){.install-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639.98px){.install-grid{grid-template-columns:1fr}}

/* ── 9. Inner-page components ────────────────────────────────────────────── */
.page-hero{position:relative;overflow:hidden;padding:clamp(28px,4.5vw,64px) 0 clamp(44px,6vw,84px);border-bottom:1px solid var(--line);
  background:radial-gradient(50% 65% at 88% 18%,rgba(10,92,230,.10),transparent 70%),radial-gradient(40% 55% at 0% 100%,rgba(124,92,255,.08),transparent 70%),linear-gradient(180deg,#F5F8FD 0%,#fff 100%)}
.page-hero>.container{position:relative}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.page-hero h1{margin-top:18px;max-width:17ch}
.page-hero .lead{margin-top:18px;max-width:40rem}
.page-hero .btn-row{margin-top:30px}
.page-hero .chips{margin-top:24px}
.page-hero.center-hero{text-align:center}
.page-hero.center-hero h1,.page-hero.center-hero .lead{margin-inline:auto}
.page-hero.center-hero .btn-row,.page-hero.center-hero .chips{justify-content:center}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;padding:0;list-style:none;color:var(--muted);font-size:.8438rem;font-weight:600}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line-strong)}
.crumbs a{color:var(--muted);text-decoration:none!important}
.crumbs a:hover{color:var(--blue)}
.center-hero .crumbs{justify-content:center}
@media (max-width:899.98px){.ph-grid{grid-template-columns:1fr}.page-hero h1{max-width:20ch}}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 28px;border-radius:var(--r-2xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.price-card.featured{border:2px solid var(--blue);box-shadow:0 0 0 6px var(--blue-50),var(--sh-3)}
.price-flag{position:absolute;top:-13px;left:28px;padding:5px 12px;border-radius:999px;background:var(--grad);color:#fff;font-size:.75rem;font-weight:800;letter-spacing:.02em;box-shadow:var(--sh-blue)}
.price-card h3{font-size:1.1875rem}
.price{display:flex;align-items:baseline;gap:6px;color:var(--muted);font-weight:600;font-size:.9375rem}
.price b{color:var(--ink);font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.price-card p{color:var(--muted);font-size:.9688rem}
@media (max-width:899.98px){.price-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

/* Hosting plans */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.plan-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:34px 30px 30px;border-radius:var(--r-2xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.plan-card.popular{border:2px solid var(--blue);box-shadow:0 0 0 7px var(--blue-50),var(--sh-4)}
@media (min-width:1024px){.plan-card.popular{transform:translateY(-10px)}}
.plan-flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:var(--grad);color:#fff;font-size:.75rem;font-weight:800;white-space:nowrap;box-shadow:var(--sh-blue)}
.plan-name{font-size:1.375rem}
.plan-for{color:var(--muted);font-size:.9375rem;min-height:3.2em}
.plan-price{display:flex;align-items:baseline;gap:6px;color:var(--muted);font-weight:600}
.plan-price b{color:var(--ink);font-size:3rem;font-weight:800;letter-spacing:-.045em;line-height:1}
.plan-permo{margin-top:-8px;color:var(--muted);font-size:.875rem}
.plan-card .checklist{padding-top:18px;border-top:1px solid var(--line);font-size:.9375rem}
.plan-card .btn{margin-top:auto}
@media (max-width:1023.98px){.plan-grid{grid-template-columns:1fr;max-width:540px;margin-inline:auto}}

/* Tables */
.table-wrap{overflow-x:auto;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.data-table{width:100%;border-collapse:collapse;font-size:.9688rem}
.data-table th{padding:14px 20px;text-align:left;background:var(--bg-soft);color:var(--ink);font-size:.7813rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line);white-space:nowrap}
.data-table td{padding:15px 20px;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.55}
.data-table tr:last-child td{border-bottom:0}
.data-table td:first-child{color:var(--ink);font-weight:700}
.data-table tbody tr{transition:background-color .2s}
.data-table tbody tr:hover{background:#FAFBFE}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.8125rem;font-weight:700;white-space:nowrap}
.pill.remote{background:var(--green-50);color:var(--green-dark)}
.pill.onsite{background:var(--blue-50);color:var(--blue)}
.pill.workshop{background:var(--violet-50);color:#5B3FE0}
@media (max-width:559.98px){.data-table th,.data-table td{padding:12px 14px}.data-table{font-size:.9063rem}}

/* FAQ */
.faq{max-width:840px;margin:0 auto;display:grid;gap:12px}
.faq-item{border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);transition:border-color .3s,box-shadow .3s}
.faq-item[open]{border-color:var(--blue-100);box-shadow:var(--sh-2)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;transition:transform .4s var(--ease),background-color .3s;
  background:var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A5CE6' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat}
.faq-item[open] summary::after{transform:rotate(135deg)}
.faq-q{margin:0;color:var(--ink);font-size:1.0313rem;font-weight:700;line-height:1.4;letter-spacing:-.01em}
.faq-a{overflow:hidden}
.faq-a>div{padding:0 22px 20px;color:var(--text);line-height:1.7}
@media (max-width:559.98px){.faq-item summary{padding:16px 16px}.faq-a>div{padding:0 16px 18px}.faq-q{font-size:.9688rem}}

/* Articles & guides */
.article{max-width:840px;margin:0 auto}
.hk-block{padding:clamp(22px,3vw,36px);border-radius:var(--r-2xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);scroll-margin-top:calc(var(--header-h) + 20px)}
.hk-block+.hk-block,.hk-block+.compare,.compare+.hk-block{margin-top:18px}
.hk-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.hk-num{flex:none;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:800;box-shadow:var(--sh-blue)}
.hk-num svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hk-head h3{font-size:1.3125rem}
.hk-sub{margin-top:3px;color:var(--muted);font-size:.9375rem;line-height:1.45}
.hk-block>p{margin-top:12px}
.hk-block>p:first-child{margin-top:0}
.doc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.toc{position:sticky;top:calc(var(--header-h) + 24px);padding:18px;border-radius:var(--r-xl);background:var(--bg-soft);border:1px solid var(--line)}
.toc-title{margin-bottom:8px;color:var(--muted);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.toc a{display:block;padding:7px 10px;border-radius:9px;color:var(--ink-2);font-size:.9063rem;font-weight:600;line-height:1.35}
.toc a:hover{background:#fff;color:var(--blue)}
.doc-body{min-width:0}
.doc-section+.doc-section{margin-top:clamp(40px,5vw,64px)}
.doc-section>.section-head{margin-bottom:28px}
@media (max-width:1099.98px){.doc{grid-template-columns:1fr}.toc{position:static;display:flex;flex-wrap:wrap;gap:6px}.toc-title{width:100%}.toc a{background:#fff;border:1px solid var(--line)}}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.compare .hk-block{margin:0}
.compare .featured{border:2px solid var(--blue);box-shadow:0 0 0 6px var(--blue-50),var(--sh-2)}
.compare-label{display:inline-flex;padding:5px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:.8125rem;font-weight:800;letter-spacing:.06em}
.compare .featured .compare-label{background:var(--blue)}
.compare h3{margin-top:14px}
@media (max-width:679.98px){.compare{grid-template-columns:1fr}}
.flow{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}
.flow::before{content:"";position:absolute;top:36px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--blue-200),var(--blue),var(--violet));transform-origin:left}
.flow li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 6px;text-align:center}
.flow-ico{position:relative;z-index:1;width:72px;height:72px;display:grid;place-items:center;border-radius:22px;background:#fff;color:var(--blue);border:1px solid var(--blue-100);box-shadow:0 0 0 6px #fff,var(--sh-3)}
.flow-ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flow h4{margin-top:8px}
.flow p{color:var(--muted);font-size:.875rem;line-height:1.5}
@media (max-width:899.98px){.flow{grid-template-columns:1fr;gap:18px}.flow::before{top:36px;bottom:36px;left:36px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--blue-200),var(--blue),var(--violet))}
  .flow li{flex-direction:row;align-items:center;text-align:left;gap:18px;padding:0}.flow li>div{display:grid;gap:2px}.flow h4{margin:0}}
.takeaways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:899.98px){.takeaways{grid-template-columns:1fr}}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:20px}
.guide-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:var(--r-2xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);color:inherit;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.guide-card:hover{transform:translateY(-5px);box-shadow:var(--sh-4);border-color:var(--blue-100);color:inherit}
.guide-card .tags{display:flex;gap:6px;flex-wrap:wrap}
.guide-card p{color:var(--muted)}
.guide-card .more-link{margin-top:auto}
.guide-card.soon{border-style:dashed;box-shadow:none;background:var(--bg-soft)}
.guide-card.soon:hover{transform:none;box-shadow:none;border-color:var(--line-strong)}

/* About */
.story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.story-copy>*+*{margin-top:16px}
.story-visual{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border-radius:var(--r-2xl);background:radial-gradient(70% 70% at 50% 40%,#24375F 0%,#0B1324 70%);box-shadow:var(--sh-4);overflow:hidden}
.story-visual::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.3px);background-size:20px 20px;-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.story-visual img{position:relative;width:72%}
.story-visual .since{position:absolute;left:24px;bottom:22px;color:#fff;font-weight:800;font-size:.9375rem}
.story-visual .since small{display:block;color:#9FB3D9;font-weight:600;font-size:.8125rem}
@media (max-width:899.98px){.story{grid-template-columns:1fr}.story-visual{max-width:440px;width:100%;margin-inline:auto}}
.timeline{position:relative;max-width:760px;margin:0 auto;padding:0 0 0 44px;list-style:none}
.timeline::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--blue),var(--violet));transform-origin:top}
.tl-item{position:relative;padding:0 0 22px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-38px;top:24px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 0 0 5px var(--blue-50)}
.tl-card{padding:20px 24px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.tl-year{color:var(--blue);font-weight:800;font-size:.8438rem;letter-spacing:.06em}
.tl-card h3{margin-top:4px;font-size:1.125rem}
.tl-card p{margin-top:6px;color:var(--muted);font-size:.9688rem}

/* Reviews page */
.marquee-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;height:760px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-col{min-width:0}
.mc-list{display:flex;flex-direction:column;gap:20px;padding-bottom:20px}
.mc-list .review-card{padding:24px}
.review-card .tag{align-self:flex-start}
@media (max-width:1023.98px){
  .marquee-cols{grid-template-columns:repeat(2,minmax(0,1fr));height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .marquee-col,.mc-list{display:contents}
  .mc-list[aria-hidden="true"]{display:none}
}
@media (max-width:639.98px){.marquee-cols{grid-template-columns:1fr}}
.client-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.client-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 18px 20px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);color:inherit;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.client-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--blue-100);color:inherit}
.client-logo{width:100%;height:120px;object-fit:contain;padding:10px;border-radius:12px;background:var(--bg-soft)}
.client-logo.cover{object-fit:cover;padding:0}
.client-card h3{font-size:1rem}
.client-card p{color:var(--muted);font-size:.875rem;line-height:1.55}
.client-card .more-link{margin-top:auto;font-size:.875rem}
@media (max-width:1023.98px){.client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479.98px){.client-grid{grid-template-columns:1fr}}

/* Portfolio */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px)}
.pf-card{position:relative;display:flex;flex-direction:column;gap:18px}
.pf-card .browser-3d{padding:6px}
.pf-card:hover .browser{transform:none;box-shadow:var(--sh-3)}
.pf-card:nth-child(even) .browser{transform:rotateX(9deg) rotateY(13deg) rotateZ(-1deg)}
.pf-card:nth-child(even):hover .browser{transform:none}
.pf-info .tags{display:flex;gap:6px;flex-wrap:wrap}
.pf-info h3{margin-top:12px;font-size:1.3125rem}
.pf-info p{margin-top:8px;color:var(--muted)}
.pf-info .more-link{margin-top:12px}
@media (max-width:767.98px){.portfolio-grid{grid-template-columns:1fr}}

/* Contact */
.contact-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.method{position:relative;display:flex;align-items:center;gap:16px;padding:22px;border-radius:var(--r-2xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);color:var(--ink);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.method:hover{transform:translateY(-4px);box-shadow:var(--sh-4);border-color:var(--blue-100);color:var(--ink)}
.method b{display:block;font-size:1.0625rem;line-height:1.3}
.method b+span{display:block;color:var(--muted);font-size:.9063rem;overflow-wrap:anywhere}
@media (max-width:899.98px){.contact-methods{grid-template-columns:1fr}}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr);gap:24px;align-items:start}
@media (max-width:899.98px){.contact-grid{grid-template-columns:1fr}}
.form-card{padding:clamp(22px,3.5vw,40px);border-radius:var(--r-2xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-3)}
.form-card h2{font-size:1.625rem}
.form-card>p{margin-top:8px;color:var(--muted)}
.form-card form{margin-top:24px}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:559.98px){.form-row{grid-template-columns:1fr;gap:0}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{color:var(--ink);font-size:.875rem;font-weight:700}
.field input,.field select,.field textarea{width:100%;height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);font:inherit;font-size:1rem;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field textarea{height:auto;min-height:140px;padding:14px 16px;resize:vertical;line-height:1.55}
.field select{padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat}
.field input::placeholder,.field textarea::placeholder{color:#9AA5B8}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#B8C4D8}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,92,230,.15)}
.form-status{display:none;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--green-50);color:var(--green-dark);font-size:.9063rem;font-weight:600;text-align:center}
.form-status.show{display:block}
.form-note{margin-top:12px;color:var(--muted);font-size:.8125rem;text-align:center}
.info-card{padding:clamp(22px,3vw,32px);border-radius:var(--r-2xl);background:linear-gradient(165deg,#0F1A33,#0B1324);color:#C9D5EC;box-shadow:var(--sh-4)}
.info-card h2,.info-card h3{color:#fff}
.info-card h2{font-size:1.375rem}
.info-card>p{margin-top:8px;color:#9FB0CF}
.info-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:4px}
.info-list li{display:flex;gap:14px;padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}
.info-list .ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#8CB4FF}
.info-list .ico svg{width:20px;height:20px}
.info-list b{display:block;color:#fff;font-size:.9375rem}
.info-list span,.info-list a{color:#B4C3DF;font-size:.9063rem}
.info-list a{text-decoration:none!important}
.info-list a:hover{color:#fff}

/* Ticker strip */
.ticker{overflow:hidden;background:var(--ink);color:#fff;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;width:max-content}
.ticker-set{display:flex;align-items:center;gap:40px;padding:18px 40px 18px 0;white-space:nowrap;font-weight:700;font-size:.9375rem}
.ticker-set span{display:inline-flex;align-items:center;gap:10px}
.ticker-set span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-400);box-shadow:0 0 10px var(--blue-400)}

/* Service detail rows (services page) */
.svc-row+.svc-row{margin-top:clamp(56px,7vw,96px)}
.svc-row .split-copy .icon-tile{margin-bottom:4px}
.visual-card{position:relative;display:grid;place-items:center;min-height:320px;padding:clamp(22px,3vw,40px);border-radius:var(--r-2xl);overflow:hidden;
  background:radial-gradient(85% 80% at 50% 100%,#DCE7FF 0%,rgba(220,231,255,0) 70%),linear-gradient(165deg,#F7F9FF 0%,#EAF0FF 100%);border:1px solid var(--line);box-shadow:var(--sh-3)}
.visual-card::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(10,92,230,.16) 1px,transparent 1.3px);background-size:18px 18px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.visual-card>*{position:relative}
.visual-card .feed{max-width:420px}
.visual-card .session{max-width:380px}
.visual-card .mesh{max-width:400px}

/* Devices row */
.device-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
.device{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);font-weight:700;color:var(--ink-2)}
.device img{width:34px;height:34px;object-fit:contain}

/* 404 */
.nf{position:relative;padding:clamp(48px,8vw,110px) 0;text-align:center;overflow:hidden}
.nf .nf-code{margin:0;max-width:none;align-items:center;gap:14px;font-size:clamp(4rem,12vw,8rem);font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--ink)}
.nf-code .icon-tile{width:clamp(72px,12vw,120px);height:clamp(72px,12vw,120px);border-radius:28%}
.nf-code .icon-tile svg{width:52%;height:52%}
.nf .nf-code{display:inline-flex;}
.nf h1{margin:24px auto 0;max-width:20ch;font-size:clamp(1.75rem,1.3rem + 2vw,2.5rem)}
.nf p{margin:14px auto 0;max-width:34rem;color:var(--muted);font-size:1.0625rem}
.nf .btn-row{justify-content:center;margin-top:28px}
.nf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}

/* ── 10. Footer, mobile bar, WhatsApp ────────────────────────────────────── */
.site-footer{position:relative;margin-top:0;padding:clamp(56px,7vw,88px) 0 28px;background:linear-gradient(180deg,#0E1830 0%,#0A1120 100%);color:#A9B7D0;font-size:.9375rem}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(124,160,255,.5),transparent)}
.footer-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.footer-brand>p{margin-top:18px;max-width:30rem;color:#A9B7D0;line-height:1.65}
.brand-footer img{height:56px;filter:none}
.brand-footer:hover img{filter:none}
.footer-contact{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.footer-contact li{display:flex;align-items:center;gap:10px;color:#C6D2E8}
.footer-contact .i{width:18px;height:18px;color:#7FA8FF}
.footer-contact a{color:#E6ECF8}
.footer-contact a:hover{color:#fff}
.footer-h{margin-bottom:14px;color:#fff;font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-col a{color:#A9B7D0}
.footer-col a:hover{color:#fff}
.footer-areas{margin-top:clamp(36px,4vw,52px);padding-top:22px;border-top:1px solid rgba(255,255,255,.08);color:#8796B2;font-size:.875rem;line-height:1.7}
.footer-areas b{color:#C6D2E8}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;color:#7C8BA8;font-size:.8438rem}
.footer-badges{display:flex;flex-wrap:wrap;gap:8px}
.footer-badges span{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:#B4C3DF;font-weight:600;font-size:.7813rem}
@media (max-width:1023.98px){.footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-brand{grid-column:1/-1}}
@media (max-width:559.98px){.footer-top{grid-template-columns:1fr 1fr}.footer-col:last-child{grid-column:1/-1}}

.mobile-bar{display:none}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:var(--wa);color:#fff;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.7),0 2px 6px rgba(15,23,42,.18);transition:transform .35s var(--ease)}
.wa-float svg{width:30px;height:30px;fill:currentColor}
.wa-float:hover{transform:scale(1.08);color:#fff}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);opacity:0}
.wa-tip{position:absolute;right:calc(100% + 12px);top:50%;padding:8px 13px;border-radius:12px;background:var(--ink);color:#fff;font-size:.8438rem;font-weight:700;white-space:nowrap;
  opacity:0;pointer-events:none;transform:translate(8px,-50%);transition:opacity .3s,transform .3s var(--ease);box-shadow:var(--sh-3)}
.wa-float:hover .wa-tip,.wa-float.nudge .wa-tip{opacity:1;transform:translate(0,-50%)}
@media (max-width:767.98px){
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .wa-float{display:none}
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--line);
    box-shadow:0 -10px 30px -18px rgba(15,35,80,.35);transition:transform .35s var(--ease)}
  .mb-item{display:flex;align-items:center;justify-content:center;gap:9px;height:50px;border-radius:14px;background:var(--bg-soft);border:1px solid var(--line);
    color:var(--ink);font-size:.9063rem;font-weight:700;-webkit-tap-highlight-color:transparent}
  .mb-item:active{transform:scale(.97)}
  .mb-quote{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--sh-blue)}
  .mb-quote:hover{color:#fff}
  /* iPhone-style app icons: Phone, WhatsApp, Mail */
  .app-ico{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.08),0 2px 6px -1px rgba(11,19,36,.28)}
  .app-ico svg{width:19px;height:19px;display:block}
  .app-phone{background:linear-gradient(180deg,#5DF776 0%,#0CBD2A 100%)}
  .app-wa{background:linear-gradient(180deg,#61FD7D 0%,#25CF43 100%)}
  .app-wa svg{width:20px;height:20px}
  .app-mail{background:linear-gradient(180deg,#26B6FF 0%,#1462EE 100%)}
  .mb-quote .app-ico{box-shadow:0 0 0 1.5px rgba(255,255,255,.9),inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px -2px rgba(3,25,80,.55)}
  .mb-item span:last-child{white-space:nowrap}
  html.typing .mobile-bar,html.nav-open .mobile-bar{transform:translateY(110%)}
}

/* Small phones: dock style, icon above its label (like the iPhone home screen) */
@media (max-width:380px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .mobile-bar{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mb-item{flex-direction:column;gap:3px;height:58px;font-size:.75rem}
  .app-ico{width:28px;height:28px;border-radius:7.5px}
  .app-ico svg{width:17px;height:17px}
  .app-wa svg{width:18px;height:18px}
}

/* ── 11. Motion ──────────────────────────────────────────────────────────── */
/* Scroll reveal. Hiding only happens when JS is running (html.js), site.js
   reveals everything for crawlers, and the classes are removed once done. */
html.js .reveal{opacity:0;translate:0 26px}
html.js .reveal-zoom{opacity:0;scale:.965}
html.js .reveal.in,html.js .reveal-zoom.in{opacity:1;translate:none;scale:none;
  transition:opacity .9s var(--ease) var(--d,0s),translate .9s var(--ease) var(--d,0s),scale .9s var(--ease) var(--d,0s)}
html.js .reveal.instant,html.js .reveal-zoom.instant{transition:none}
html.js .steps.reveal,html.js .flow.reveal,html.js .timeline.reveal{opacity:1;translate:none}
html.js .steps.reveal::before,html.js .flow.reveal::before{transform:scaleX(0)}
html.js .steps.reveal.in::before,html.js .flow.reveal.in::before{transform:scaleX(1);transition:transform 1.6s var(--ease) .25s}
html.js .timeline.reveal::before{transform:scaleY(0)}
html.js .timeline.reveal.in::before{transform:scaleY(1);transition:transform 1.8s var(--ease) .2s}
@media (max-width:767.98px){
  html.js .steps.reveal::before{transform:scaleY(0)}
  html.js .steps.reveal.in::before{transform:scaleY(1)}
}
@media (max-width:899.98px){
  html.js .flow.reveal::before{transform:scaleY(0)}
  html.js .flow.reveal.in::before{transform:scaleY(1)}
}

@keyframes ping{75%,100%{transform:scale(2.6);opacity:0}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes colScroll{to{transform:translateY(-100%)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.25}}
@keyframes scan{to{transform:translateY(386%)}}
@keyframes boxPulse{0%,100%{box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 10px rgba(52,211,153,.35)}50%{box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 22px rgba(52,211,153,.75)}}
@keyframes wave{0%{transform:scale(1);opacity:.55}100%{transform:scale(5.5);opacity:0}}
@keyframes mapPing{0%{transform:scale(.2);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes dash{to{stroke-dashoffset:-28}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:none}}
@keyframes sharpen{from{filter:blur(8px);translate:0 12px}to{filter:none;translate:none}}
@keyframes waRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.55);opacity:0}}
@keyframes tileFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes mapSway{0%,100%{--map-rz:-30deg}50%{--map-rz:-23deg}}

@media (prefers-reduced-motion:no-preference){
  .live-dot::after{animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
  /* hero copy focuses in from a slight blur and never starts invisible (crawler + LCP safe) */
  html.js .hero .ha{animation:sharpen 1s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 80ms)}
  html.js .hero-visual.ha{animation-name:rise;animation-duration:1.4s}
  .swoosh path{stroke-dasharray:1;stroke-dashoffset:0}
  html.js .swoosh path{animation:draw 1.2s var(--ease) .75s both}
  .fc-in{animation:bob 6s ease-in-out infinite}
  .fc-alert .fc-in{animation-duration:7s;animation-delay:-2s}
  .fc-remote .fc-in{animation-duration:6.5s;animation-delay:-4s}
  .fc-wifi .fc-in{animation-duration:7.5s;animation-delay:-1s}
  .hv-ring.r2{animation:spin 70s linear infinite}
  .hv-sweep{animation:spin 6s linear infinite}
  .marquee-track{animation:marquee 42s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .ticker-track{animation:marquee 36s linear infinite}
  .marquee-col.is-moving>.mc-list{animation:colScroll var(--dur,34s) linear infinite}
  .marquee-col:hover>.mc-list{animation-play-state:paused}
  .feed-rec::before{animation:blink 1.4s steps(1,end) infinite}
  .feed-scan{animation:scan 4.8s linear infinite}
  .feed-box::after{animation:glowPulse 2.4s ease-in-out infinite}
  .s-row.run .s-ico{animation:spin 1s linear infinite}
  .mesh .wave{animation:wave 3s cubic-bezier(.2,.6,.3,1) infinite}
  .mesh .wave.w2{animation-delay:1s}.mesh .wave.w3{animation-delay:2s}
  .mesh .link{animation:dash 1.6s linear infinite}
  .map-ping{animation:mapPing 3.2s cubic-bezier(.2,.6,.3,1) infinite}
  .map-ping.p2{animation-delay:1.05s}.map-ping.p3{animation-delay:2.1s}
  .map-lines line{animation:dash 2.2s linear infinite}
  .map3d{animation:mapSway 14s ease-in-out infinite}
  .cta-tile{animation:tileFloat 6s ease-in-out infinite}
  .cta-tile:nth-child(2){animation-delay:-2s}.cta-tile:nth-child(3){animation-delay:-4s}
  .wa-float::before{animation:waRing 2.4s ease-out infinite}
  .phone{animation:bob 7s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── 12. Print ───────────────────────────────────────────────────────────── */
@media print{
  .site-header,.nav-overlay,.mobile-bar,.wa-float,.hero-visual,.cta-stack,.map3d{display:none!important}
  html.js .reveal,html.js .reveal-zoom{opacity:1!important;translate:none!important;scale:none!important}
  body{padding:0!important;color:#000}
  .site-footer{background:none;color:#000}
}

/* ── Speed: looping decorations pause while off screen (site.js adds .anim-off) ── */
.anim-off,.anim-off *,.anim-off::before,.anim-off::after{animation-play-state:paused!important}
.feed-box::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 22px rgba(52,211,153,.6);opacity:0;pointer-events:none}
@keyframes glowPulse{50%{opacity:1}}