/* ============================================================
   THE DATA COLLECTION — DESIGN SYSTEM
   Navy/cyan derived from the real logo (#2B3991 / #00AAFF)
   All colour pairs contrast-verified to WCAG 2.2 AA
   ============================================================ */
:root{
  --navy-900:#0A1633; --navy-800:#1B2568; --navy-700:#22318D; --navy-600:#2B3991;
  --navy-200:#B8C0E8; --navy-100:#E4E8F7; --navy-50:#F2F4FC;
  --cyan-700:#0069A8; --cyan-600:#008AD4; --cyan-500:#00AAFF; --cyan-400:#38BDFF;
  --cyan-300:#7DD3FF; --cyan-50:#EBF8FF;
  --ink:#0A1633; --slate-700:#364766; --slate-600:#5A6B8A; --slate-400:#8A9AB5;
  --slate-300:#C7D2E4; --slate-200:#D8E0EC; --slate-100:#EDF1F7;
  --surface:#F6F8FC; --white:#fff;
  --deep:#0B1E3D; --deep-elev:#12294D; --on-deep-muted:#B9C7DE;
  --success:#0E7C5A; --success-bg:#E6F4EF; --danger:#B4232A; --warning:#8A5300;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
  --sh-sm:0 2px 8px rgba(10,22,51,.06);
  --sh-md:0 8px 24px rgba(10,22,51,.08);
  --sh-lg:0 16px 48px rgba(10,22,51,.14);
  --dur:200ms; --ease:cubic-bezier(0,0,.2,1);
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-padding-top:96px}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.7;color:var(--slate-700);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;letter-spacing:-.02em;margin:0;font-weight:600}
h1{font-size:clamp(2.1rem,4.8vw,3.5rem);letter-spacing:-.03em}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.35rem)}
h4{font-size:1.0625rem}
p{margin:0}
a{color:var(--cyan-700);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--cyan-500);outline-offset:2px;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-sm{max-width:820px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy-700);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 var(--r-md) 0}
.skip:focus{left:0}
.eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-700);margin:0 0 14px}
.eyebrow.on-dark{color:var(--cyan-400)}
.lede{font-size:1.1875rem;line-height:1.65;color:var(--slate-600);max-width:64ch}
.lede.on-dark{color:var(--on-deep-muted)}
section{padding:clamp(64px,8vw,112px) 0}
section.tight{padding:clamp(48px,5vw,72px) 0}
.sec-surface{background:var(--surface)}
.sec-deep{background:var(--deep);color:var(--on-deep-muted)}
.sec-deep h2,.sec-deep h3,.sec-deep h4{color:#fff}
.sec-head{max-width:740px;margin-bottom:52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mb0{margin-bottom:0}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}
.center{text-align:center}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-size:.9375rem;font-weight:600;padding:0 26px;height:52px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;transition:all var(--dur) var(--ease);text-decoration:none!important;white-space:nowrap}
.btn-primary{background:var(--navy-700);color:#fff}
.btn-primary:hover{background:var(--navy-800);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn-cyan{background:var(--cyan-700);color:#fff}
.btn-cyan:hover{background:#005688;transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--navy-700);border-color:var(--navy-700)}
.btn-secondary:hover{background:var(--navy-50)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-sm{height:44px;font-size:.875rem;padding:0 18px}
.btn-lg{height:58px;font-size:1rem;padding:0 32px}
.btn .arw{transition:transform var(--dur) var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.tlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.9375rem;color:var(--cyan-700)}
.tlink:hover{text-decoration:none}
.tlink .arw{transition:transform var(--dur) var(--ease)}
.tlink:hover .arw{transform:translateX(4px)}
.tlink.on-dark{color:var(--cyan-300)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(11,30,61,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{display:flex;align-items:center;gap:32px;height:78px;max-width:var(--wrap);margin:0 auto;padding:0 24px;transition:height var(--dur) var(--ease)}
.nav.small .nav-in{height:64px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo:hover{text-decoration:none}
.logo-txt{font-weight:700;font-size:1.0625rem;color:#fff;letter-spacing:-.02em;line-height:1.15}
.logo-txt span{display:block;font-size:.625rem;font-weight:600;letter-spacing:.16em;color:var(--cyan-400);text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-item{position:relative}
.nav-a{display:flex;align-items:center;gap:5px;padding:9px 13px;font-size:.9375rem;font-weight:500;color:#D8E2F2;border-radius:var(--r-md);background:none;border:0;font-family:inherit;cursor:pointer;transition:color var(--dur);position:relative;text-decoration:none}
.nav-a:hover,.nav-item:hover>.nav-a{color:#fff;text-decoration:none}
.nav-a[aria-current="page"]{color:#fff}
.nav-a[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--cyan-400);border-radius:2px}
.chev{width:10px;height:10px;transition:transform var(--dur)}
.nav-item:hover .chev{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);width:620px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:24px;opacity:0;visibility:hidden;transition:all var(--dur) var(--ease);display:grid;grid-template-columns:1fr 1fr 190px;gap:6px 24px;border:1px solid var(--slate-200)}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega.narrow{width:290px;grid-template-columns:1fr}
.mega-h{grid-column:1/-1;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-400);margin-bottom:2px}
.mega a{display:block;padding:9px 11px;border-radius:var(--r-sm);font-size:.9063rem;font-weight:500;color:var(--slate-700);transition:background var(--dur)}
.mega a:hover{background:var(--navy-50);color:var(--navy-700);text-decoration:none}
.mega a .st{display:block;font-size:.75rem;color:var(--slate-400);font-weight:400}
.mega-promo{grid-row:2/span 6;background:var(--navy-50);border-radius:var(--r-md);padding:17px;align-self:start}
.mega-promo strong{display:block;font-size:.9063rem;color:var(--ink);margin-bottom:6px}
.mega-promo p{font-size:.8125rem;color:var(--slate-600);line-height:1.5;margin-bottom:12px}
.star{color:var(--cyan-600);font-size:.75rem}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;margin:5px 0;transition:all var(--dur)}

/* ---------- HERO ---------- */
.hero{background:var(--deep);color:var(--on-deep-muted);position:relative;overflow:hidden;padding:clamp(52px,6.5vw,88px) 0 clamp(64px,7.5vw,100px)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 78% 8%,rgba(0,170,255,.16),transparent 62%),radial-gradient(700px 460px at 8% 92%,rgba(43,57,145,.34),transparent 60%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;opacity:.03;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:52px 52px}
.hero>*{position:relative;z-index:1}
.hero h1{color:#fff;margin-bottom:20px}
.hero h1 .hl{background:linear-gradient(96deg,var(--cyan-400),var(--cyan-300));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-split{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
.hero-split>*{min-width:0}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 20px}
.badge-row{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-full);padding:7px 16px;font-size:.8125rem;font-weight:500;color:#D8E2F2;margin-bottom:24px}
.badge-row .dot{width:4px;height:4px;border-radius:50%;background:var(--cyan-400)}
.stars{color:#FFC145;letter-spacing:1px}
/* dimmed star for partial ratings — the 4-star review the page promises */
.stars .off{color:#C9D2E0}
.micro{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:.8125rem;color:#93A6C4}
.micro span{display:flex;align-items:center;gap:6px}
.tick{color:var(--cyan-400);flex-shrink:0}
.meta-strip{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:.875rem;color:#B9C7DE}
.meta-strip b{color:#fff;font-family:var(--mono);font-weight:700}

/* ---------- BREADCRUMB ---------- */
.crumb{font-size:.8125rem;color:#93A6C4;margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumb a{color:#B9C7DE}
.crumb a:hover{color:#fff}
.crumb .sep{opacity:.5}

/* ---------- BEFORE/AFTER ---------- */
.ba-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:22px;backdrop-filter:blur(12px);box-shadow:0 24px 64px rgba(0,0,0,.34)}
.ba-card.light{background:#fff;border-color:var(--slate-200);box-shadow:var(--sh-md);backdrop-filter:none}
.ba-tabs{display:flex;gap:6px;margin-bottom:16px;background:rgba(0,0,0,.24);padding:4px;border-radius:var(--r-md)}
.ba-card.light .ba-tabs{background:var(--slate-100)}
.ba-tab{flex:1;padding:9px;border:0;background:none;color:#93A6C4;font-family:inherit;font-size:.8125rem;font-weight:600;border-radius:var(--r-sm);cursor:pointer;transition:all var(--dur);min-height:40px}
.ba-card.light .ba-tab{color:var(--slate-600)}
.ba-tab[aria-selected="true"]{background:rgba(255,255,255,.12);color:#fff}
.ba-card.light .ba-tab[aria-selected="true"]{background:#fff;color:var(--navy-700);box-shadow:var(--sh-sm)}
.panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
.panel[hidden]{display:none}
.ba-t{width:100%;border-collapse:collapse;font-size:.75rem;min-width:max-content}
.ba-t th{text-align:left;padding:8px 9px;font-size:.625rem;letter-spacing:.07em;text-transform:uppercase;color:#7E93B4;font-weight:600;border-bottom:1px solid rgba(255,255,255,.1)}
.ba-card.light .ba-t th{color:var(--slate-400);border-color:var(--slate-200)}
.ba-t td{padding:9px;border-bottom:1px solid rgba(255,255,255,.06);color:#C9D6EA;font-family:var(--mono);font-size:.6875rem;white-space:nowrap}
.ba-card.light .ba-t td{color:var(--slate-700);border-color:var(--slate-100)}
.ba-t tr:last-child td{border-bottom:0}
.bad{color:#FF9AA0}.dup{color:#FFC145}.good{color:#7DE0B8}
.ba-card.light .bad{color:var(--danger)}.ba-card.light .dup{color:var(--warning)}.ba-card.light .good{color:var(--success)}
.ba-foot{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:.6875rem;color:#93A6C4}
.ba-card.light .ba-foot{border-color:var(--slate-200);color:var(--slate-600)}
.ba-foot b{color:var(--cyan-300);font-family:var(--mono)}
.ba-card.light .ba-foot b{color:var(--cyan-700)}

/* ---------- LOGO WALL ---------- */
.lw{padding:42px 0;border-bottom:1px solid var(--slate-200)}
.lw p{text-align:center;font-size:.8125rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-400);margin-bottom:24px}
.lw-row{display:flex;justify-content:center;align-items:center;gap:16px 48px;flex-wrap:wrap}
.lw-item{font-size:1.0625rem;font-weight:700;color:var(--slate-400);letter-spacing:-.01em;transition:color var(--dur);text-align:center}
.lw-item:hover{color:var(--navy-600)}
.lw-item small{display:block;font-size:.625rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-300)}

/* ---------- METRICS ---------- */
.metrics{background:var(--surface);padding:52px 0}
.m-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
.m-grid.four{grid-template-columns:repeat(4,1fr)}
.m-num{font-family:var(--mono);font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:700;color:var(--navy-700);letter-spacing:-.02em;line-height:1}
.m-lab{font-size:.8125rem;color:var(--slate-600);margin-top:9px}
.m-cap{text-align:center;font-size:.8125rem;color:var(--slate-400);margin-top:28px}
.m-grid.on-dark .m-num{color:var(--cyan-300)}
.m-grid.on-dark .m-lab{color:#93A6C4}

/* ---------- CARDS ---------- */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:28px;transition:all var(--dur) var(--ease)}
.card.hov:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--navy-200)}
.card h3{margin-bottom:10px}
.card p{font-size:.9375rem;color:var(--slate-600);line-height:1.65}
.card.dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:var(--on-deep-muted)}
.card.dark p{color:var(--on-deep-muted)}
.ico{width:44px;height:44px;border-radius:var(--r-md);background:var(--cyan-50);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--cyan-700);flex-shrink:0}
.card.dark .ico{background:rgba(0,170,255,.14);color:var(--cyan-300)}

/* ---------- SERVICE BENTO ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.bento .lg{grid-column:span 2}
.svc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:26px;transition:all var(--dur) var(--ease);text-decoration:none!important}
.svc:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--navy-200)}
.svc.feat{background:linear-gradient(158deg,var(--navy-50),#fff 62%);border-color:var(--navy-200)}
.svc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.svc h3{font-size:1.125rem;flex:1 1 auto;min-width:0;text-wrap:balance}
.svc.feat h3{font-size:1.25rem}
.svc p{font-size:.9375rem;color:var(--slate-600);flex:1;margin-bottom:16px;line-height:1.65}
.svc ul{margin:0 0 16px;padding:0;list-style:none;font-size:.875rem;color:var(--slate-600)}
.svc ul li{padding-left:20px;position:relative;margin-bottom:7px;line-height:1.5}
.svc ul li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--cyan-500)}
.pill{font-family:var(--mono);font-size:.75rem;font-weight:700;color:var(--navy-700);background:var(--navy-100);padding:5px 11px;border-radius:var(--r-full);white-space:nowrap}
.flag{font-size:.625rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan-700);background:var(--cyan-50);padding:4px 9px;border-radius:var(--r-sm);align-self:flex-start;margin-bottom:12px}
.svc-cta{font-size:.875rem;font-weight:600;color:var(--cyan-700);display:flex;align-items:center;gap:6px;margin-top:auto}
.svc:hover .arw{transform:translateX(4px)}

/* ---------- CHIPS ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:.75rem;font-weight:500;color:var(--slate-600);border:1px solid var(--slate-200);background:#fff;padding:6px 12px;border-radius:var(--r-full);white-space:nowrap}
.chip.dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#C9D6EA}
.chip.solid{background:var(--navy-100);border-color:transparent;color:var(--navy-700);font-weight:600}

/* ---------- CASE STUDY ---------- */
.cs-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cs-split>*{min-width:0}
.cs-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:28px 0}
.cs-m{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:18px}
.cs-m b{display:block;font-family:var(--mono);font-size:1.7rem;font-weight:700;color:var(--cyan-300);line-height:1}
.cs-m span{font-size:.75rem;color:#93A6C4;margin-top:6px;display:block}
.cs-m.light{background:var(--surface);border-color:var(--slate-200)}
.cs-m.light b{color:var(--navy-700)}
.cs-m.light span{color:var(--slate-600)}
.method{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:26px}
.method h3{color:#fff;font-size:.9375rem;margin-bottom:18px;letter-spacing:0}
.method ol{margin:0;padding:0;list-style:none;counter-reset:s}
.method li{counter-increment:s;position:relative;padding:0 0 16px 42px;font-size:.875rem;color:var(--on-deep-muted);line-height:1.55}
.method li:last-child{padding-bottom:0}
.method li::before{content:counter(s);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;background:rgba(0,170,255,.16);color:var(--cyan-300);font-family:var(--mono);font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.method b{color:#fff;font-weight:600}
.method.light{background:var(--surface);border-color:var(--slate-200)}
.method.light h3{color:var(--ink)}
.method.light li{color:var(--slate-600)}
.method.light li::before{background:var(--cyan-50);color:var(--cyan-700)}
.method.light b{color:var(--ink)}

/* case study card */
.cscard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);overflow:hidden;transition:all var(--dur) var(--ease);text-decoration:none!important}
.cscard:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--navy-200)}
.cscard-viz{background:linear-gradient(150deg,var(--deep),var(--navy-800));padding:22px;position:relative;overflow:hidden}
.cscard-viz::after{content:"";position:absolute;inset:0;opacity:.05;background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:26px 26px}
.viz-bars{display:flex;align-items:flex-end;gap:5px;height:74px;position:relative;z-index:1}
.viz-bars i{flex:1;border-radius:3px 3px 0 0;display:block}
.cscard-body{padding:22px;display:flex;flex-direction:column;flex:1}
.cscard-cat{font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan-700);margin-bottom:9px}
.cscard h3{font-size:1.0625rem;margin-bottom:12px;text-wrap:balance;line-height:1.35}
.cscard-mets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 0;margin-bottom:14px;border-top:1px solid var(--slate-100);border-bottom:1px solid var(--slate-100)}
.cscard-mets div{text-align:center}
.cscard-mets b{display:block;font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--navy-700);line-height:1.2}
.cscard-mets span{font-size:.625rem;color:var(--slate-400);display:block;margin-top:3px;line-height:1.3}

/* ---------- PROCESS STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}
.steps::before{content:"";position:absolute;top:22px;left:11%;right:11%;height:2px;background:linear-gradient(90deg,var(--cyan-500),var(--navy-200));opacity:.32}
.step-n{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--cyan-500);color:var(--navy-700);font-family:var(--mono);font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:16px;position:relative;z-index:1}
.sec-surface .step-n{background:var(--surface)}
.step h3{font-size:1.0625rem;margin-bottom:9px}
.step p{font-size:.875rem;color:var(--slate-600);line-height:1.6}
.step .when{display:inline-block;margin-top:11px;font-family:var(--mono);font-size:.6875rem;font-weight:700;color:var(--cyan-700);background:var(--cyan-50);padding:4px 9px;border-radius:var(--r-sm)}

/* ---------- TESTIMONIALS ---------- */
.tst{display:flex;flex-direction:column;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:26px;transition:all var(--dur) var(--ease);break-inside:avoid}
.tst:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.tst blockquote{margin:12px 0 20px;font-size:1rem;line-height:1.68;color:var(--ink);flex:1}
.tst-by{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--slate-100)}
.av{width:42px;height:42px;border-radius:50%;background:var(--navy-700);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9375rem;flex-shrink:0}
.tst-by b{display:block;font-size:.9063rem;color:var(--ink)}
.tst-by span{font-size:.75rem;color:var(--slate-600)}
.src{margin-left:auto;font-size:.6875rem;font-weight:600;color:var(--success);background:var(--success-bg);padding:4px 9px;border-radius:var(--r-sm);white-space:nowrap}
.src.li{color:#0A66C2;background:#E7F0F9}
.masonry{columns:3;column-gap:22px}
.masonry .tst{margin-bottom:22px;display:block}

/* ---------- PRICING ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.price{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;height:100%}
.price.feat{border:2px solid var(--navy-600);box-shadow:var(--sh-md);position:relative}
.price-tag{font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--navy-700);padding:5px 12px;border-radius:var(--r-full);position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap}
.price h3{font-size:1.1875rem;margin-bottom:6px}
.price .amt{font-family:var(--mono);font-size:2.25rem;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.1;margin:14px 0 4px}
.price .amt small{font-size:.875rem;font-weight:500;color:var(--slate-600);font-family:var(--sans)}
.price .for{font-size:.875rem;color:var(--slate-600);margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--slate-100)}
.price ul{list-style:none;margin:0 0 24px;padding:0;flex:1}
.price li{padding-left:26px;position:relative;margin-bottom:11px;font-size:.9063rem;line-height:1.5}
.price li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--success-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 8.3 2.6 2.6L12 5.5' stroke='%230E7C5A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.price li.no{color:var(--slate-400)}
.price li.no::before{background:var(--slate-100);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6' stroke='%238A9AB5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.price .btn{width:100%}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;font-size:.9063rem;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);overflow:hidden}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--slate-100)}
.cmp thead th{background:var(--surface);font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-600);font-weight:700}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td.num{font-family:var(--mono);font-weight:700;color:var(--navy-700);white-space:nowrap}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--slate-200)}
.faq details{border-bottom:1px solid var(--slate-200)}
.faq summary{padding:22px 44px 22px 0;font-size:1.0625rem;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;position:relative;transition:color var(--dur);min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--navy-700)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-6px;border-right:2px solid var(--slate-400);border-bottom:2px solid var(--slate-400);transform:rotate(45deg);transition:transform var(--dur)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 44px 24px 0;color:var(--slate-600);font-size:1rem;line-height:1.7}
.faq .ans p+p{margin-top:12px}

/* ---------- TIMELINE ---------- */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--cyan-500),var(--navy-200))}
.tl-item{position:relative;padding-bottom:34px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-30px;top:5px;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--cyan-500)}
.tl-yr{font-family:var(--mono);font-size:.75rem;font-weight:700;color:var(--cyan-700);letter-spacing:.04em;margin-bottom:5px}
.tl-item h3{font-size:1.0625rem;margin-bottom:7px}
.tl-item p{font-size:.9375rem;color:var(--slate-600);line-height:1.65}

/* ---------- TEAM ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.member{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);overflow:hidden;transition:all var(--dur) var(--ease)}
.member:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.member-ph{aspect-ratio:1;background:linear-gradient(150deg,var(--navy-100),var(--slate-100));display:flex;align-items:center;justify-content:center;color:var(--navy-600);font-size:2rem;font-weight:700;font-family:var(--mono)}
.member-ph img{width:100%;height:100%;object-fit:cover}
.member-body{padding:18px}
.member h3{font-size:1rem;margin-bottom:3px}
.member .role{font-size:.8125rem;color:var(--cyan-700);font-weight:600;margin-bottom:8px}
.member .spec{font-size:.8125rem;color:var(--slate-600);line-height:1.5}
.member .since{font-family:var(--mono);font-size:.6875rem;color:var(--slate-400);margin-top:10px;display:block}
.placeholder-note{background:var(--cyan-50);border:1px dashed var(--cyan-500);border-radius:var(--r-lg);padding:22px;font-size:.9063rem;color:var(--navy-700)}
.placeholder-note b{display:block;margin-bottom:6px;color:var(--ink)}

/* ---------- FILTER ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:36px}
.filter{background:#fff;border:1.5px solid var(--slate-200);color:var(--slate-700);font-family:inherit;font-size:.875rem;font-weight:600;padding:10px 18px;border-radius:var(--r-full);cursor:pointer;transition:all var(--dur);min-height:44px}
.filter:hover{border-color:var(--navy-200);background:var(--navy-50)}
.filter[aria-pressed="true"]{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.filter .ct{opacity:.6;margin-left:4px}

/* ---------- FORMS ---------- */
.form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl);padding:28px;backdrop-filter:blur(12px)}
.form.light{background:#fff;border-color:var(--slate-200);box-shadow:var(--sh-md);backdrop-filter:none}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:.8125rem;font-weight:600;color:#D8E2F2;margin-bottom:7px}
.form.light .fld label{color:var(--slate-700)}
.fld .req{color:var(--cyan-400)}
.form.light .fld .req{color:var(--danger)}
.fld input,.fld textarea,.fld select{width:100%;background:rgba(255,255,255,.94);border:1.5px solid transparent;border-radius:var(--r-md);padding:13px 15px;font-family:inherit;font-size:1rem;color:var(--ink);transition:all var(--dur);min-height:48px}
.form.light .fld input,.form.light .fld textarea,.form.light .fld select{background:#fff;border-color:var(--slate-300)}
.fld textarea{resize:vertical;min-height:104px}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;border-color:var(--cyan-500);box-shadow:0 0 0 4px rgba(0,170,255,.2)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--slate-400)}
.fld .help{font-size:.75rem;color:#93A6C4;margin-top:6px}
.form.light .fld .help{color:var(--slate-600)}
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hp{position:absolute;left:-9999px}
.form .btn{width:100%}
.form-note{font-size:.75rem;color:#93A6C4;text-align:center;margin-top:14px}
.form.light .form-note{color:var(--slate-600)}
.steps-ind{display:flex;gap:6px;margin-bottom:22px}
.steps-ind i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.16)}
.steps-ind i.on{background:var(--cyan-500)}
.form.light .steps-ind i{background:var(--slate-200)}
.form.light .steps-ind i.on{background:var(--cyan-600)}
.upload{border:1.5px dashed var(--slate-300);border-radius:var(--r-md);padding:22px;text-align:center;font-size:.875rem;color:var(--slate-600);cursor:pointer;transition:all var(--dur)}
.upload:hover{border-color:var(--cyan-500);background:var(--cyan-50)}

/* ---------- CONTACT CHANNELS ---------- */
/* Contact channel cards.
   .val/.note were inline <span>s, so margin + line-height were ignored and the
   value ran straight into the description. Forced to block-level. */
.chan{display:flex;gap:16px;padding:20px 22px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);transition:all var(--dur) var(--ease);text-decoration:none!important;margin-bottom:12px;align-items:flex-start}
.chan:hover{border-color:var(--navy-200);box-shadow:var(--sh-md);transform:translateY(-2px)}
.chan:hover .val{color:var(--cyan-600)}
.chan .ico{margin-bottom:0;width:42px;height:42px;border-radius:11px}
.chan-body{min-width:0;flex:1}
.chan b,.chan .lab{display:block;font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-400);margin:0 0 5px}
.chan .val{display:block;font-size:1.0625rem;color:var(--cyan-700);font-weight:600;margin:0 0 6px;line-height:1.35;word-break:break-word;transition:color var(--dur)}
.chan .note{display:block;font-size:.8125rem;color:var(--slate-600);line-height:1.55;margin:0}
.chan .arrow{align-self:center;color:var(--slate-300);flex-shrink:0;transition:transform var(--dur) var(--ease),color var(--dur)}
.chan:hover .arrow{color:var(--cyan-600);transform:translateX(3px)}
.chan.primary{border-color:var(--navy-200);background:linear-gradient(158deg,var(--navy-50),#fff 60%)}
.founder-note{display:flex;gap:16px;align-items:center;background:var(--navy-50);border-radius:var(--r-lg);padding:20px;margin-top:24px}
.founder-note img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex-shrink:0}
.founder-note p{font-size:.9063rem;color:var(--slate-700);line-height:1.6}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(140deg,var(--navy-800),var(--deep) 68%);color:var(--on-deep-muted);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 82% 12%,rgba(0,170,255,.2),transparent 62%);pointer-events:none}
.cta-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.cta-in>*{min-width:0}
.cta h2{color:#fff;margin-bottom:18px}
.cta.simple .cta-in{grid-template-columns:1fr;text-align:center;justify-items:center}
.alt{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ---------- CONTENT (legal / long-form) ---------- */
.prose{max-width:74ch}
.prose h2{font-size:1.5rem;margin:44px 0 14px}
.prose h3{font-size:1.1875rem;margin:30px 0 10px}
.prose p{margin-bottom:16px;line-height:1.75}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:9px;line-height:1.7}
.prose>*:first-child{margin-top:0}
.callout{background:var(--surface);border-left:3px solid var(--cyan-500);border-radius:0 var(--r-md) var(--r-md) 0;padding:18px 22px;margin:24px 0;font-size:.9375rem}

/* ---------- FOOTER ---------- */
/* scoped to the page footer only — a bare `footer` selector also hit
   the <footer> inside blockquote attributions, painting a black bar */
body > footer{background:var(--navy-900);color:#93A6C4;padding:68px 0 0;font-size:.875rem}
blockquote footer{background:none;color:inherit;padding:0;font-size:inherit}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:42px;padding-bottom:44px}
body > footer h2.f-h{color:#fff;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;margin:0 0 18px;font-weight:700;line-height:1.4}
.nl-h{color:#fff;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;margin:0 0 14px;font-weight:700}
body > footer ul{list-style:none;margin:0;padding:0}
body > footer li{margin-bottom:11px}
body > footer a{color:#93A6C4;transition:color var(--dur)}
body > footer a:hover{color:#fff;text-decoration:none}
.f-news{display:flex;gap:8px;max-width:300px}
.f-news input{flex:1;min-height:44px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:11px 13px;color:#fff;font-family:inherit;font-size:.875rem}
.f-news input::placeholder{color:#7B90B0}
.f-news input:focus{outline:0;border-color:var(--cyan-500)}
.f-news button{background:var(--cyan-700);border:0;border-radius:var(--r-md);width:44px;min-height:44px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem}
.f-news button:hover{background:var(--cyan-600)}
/* Footer contact strip — was an undifferentiated run of text.
   Now a 4-up grid with icons, uppercase labels and clear values. */
.f-contact{border-top:1px solid rgba(255,255,255,.09);padding:26px 0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:22px 28px}
.f-ci{display:flex;gap:11px;align-items:flex-start;min-width:0}
.f-ci svg{flex-shrink:0;margin-top:2px;color:var(--cyan-400);opacity:.9}
.f-ci .k{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#7B90B0;margin-bottom:3px}
.f-ci .v{display:block;font-size:.875rem;color:#D8E2F2;line-height:1.5;word-break:break-word}
.f-ci a.v{color:#D8E2F2;transition:color var(--dur)}
.f-ci a.v:hover{color:var(--cyan-300);text-decoration:none}
@media(max-width:900px){.f-contact{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.f-contact{grid-template-columns:1fr}}
.f-trust{border-top:1px solid rgba(255,255,255,.09);padding:20px 0;display:flex;gap:12px 26px;flex-wrap:wrap;font-size:.8125rem;color:#7B90B0}
.f-trust span{display:flex;align-items:center;gap:7px}
.f-bot{border-top:1px solid rgba(255,255,255,.09);padding:22px 0 32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8125rem;color:#7B90B0}
.f-bot nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.soc{display:flex;gap:10px;margin-top:18px}
.soc a{width:38px;height:38px;border-radius:var(--r-md);background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:#B9C7DE;font-weight:600;font-size:.8125rem;transition:all var(--dur)}
.soc a:hover{background:var(--cyan-700);color:#fff}

/* ---------- MOBILE STICKY ---------- */
.sticky-m{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--slate-200);padding:11px 16px;gap:10px;box-shadow:0 -4px 20px rgba(10,22,51,.09)}
.sticky-m .btn{flex:1}
.sticky-m.on{display:flex}

/* ---------- REVEAL ---------- */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* ---------- PROTO BANNER ---------- */
.proto-note{background:var(--warning);color:#fff;text-align:center;padding:9px 16px;font-size:.8125rem;font-weight:500}
.proto-note b{font-weight:700}
.proto-note a{color:#fff;text-decoration:underline}

/* ---------- RESPONSIVE ---------- */
@media(min-width:1025px){
  .hero-cta{flex-wrap:nowrap}
  .hero-cta .btn{padding:0 22px;font-size:.9063rem}
  .micro{flex-wrap:nowrap;white-space:nowrap}
}
@media(max-width:1024px){
  .hero-split,.cs-split,.cta-in{grid-template-columns:1fr;gap:44px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .lg{grid-column:span 2}
  .steps{grid-template-columns:repeat(2,1fr);gap:32px}
  .steps::before{display:none}
  .m-grid,.m-grid.four{grid-template-columns:repeat(3,1fr);gap:28px}
  .g3,.g4,.team-grid{grid-template-columns:repeat(2,1fr)}
  /* .g3 previously stayed 3-across until 720px, so 721-1024px overflowed
     the viewport horizontally (measured: 837px content in a 768px window) */
  .price-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .masonry{columns:2}
  .f-grid{grid-template-columns:1fr 1fr;gap:36px}
  .nav-links{display:none}
  .burger{display:flex}
  .nav-links.open{display:flex;position:fixed;inset:78px 0 0;background:var(--deep);flex-direction:column;align-items:stretch;padding:24px;gap:4px;overflow-y:auto}
  .nav-links.open .nav-a{width:100%;justify-content:space-between;padding:15px;font-size:1.0625rem}
  .nav-links.open .mega{position:static;transform:none;opacity:1;visibility:visible;width:100%;display:none;box-shadow:none;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);grid-template-columns:1fr;padding:8px}
  .nav-links.open .nav-item.exp .mega{display:grid}
  .nav-links.open .mega a{color:#C9D6EA}
  .nav-links.open .mega a:hover{background:rgba(255,255,255,.08);color:#fff}
  .nav-links.open .mega-h{color:#7E93B4}
  .nav-links.open .mega-promo{display:none}
  .nav-links.open .btn{margin-top:14px}
}
@media(max-width:720px){
  body{font-size:16px;padding-bottom:70px}
  .g2,.g3,.g4,.bento,.team-grid{grid-template-columns:1fr}
  .bento .lg{grid-column:span 1}
  .m-grid,.m-grid.four{grid-template-columns:repeat(2,1fr)}
  .cs-metrics{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .masonry{columns:1}
  .fld-2{grid-template-columns:1fr}
  .hero-cta .btn,.btn-row .btn{width:100%}
  .badge-row{border-radius:var(--r-lg);padding:10px 14px;font-size:.75rem;line-height:1.5}
  .badge-row .dot{display:none}
  .ba-card{padding:16px}
  .ba-t td,.ba-t th{padding:7px}
  .tl{padding-left:28px}
  .faq summary{font-size:1rem;padding-right:38px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
}
@media print{
  .nav,.sticky-m,.proto-note,footer{display:none}
  .rv{opacity:1!important;transform:none!important}
}


/* ============================================================
   MOTION SYSTEM — "Precision in motion"
   Scroll-driven, subtle, never decorative for its own sake.
   Everything is disabled under prefers-reduced-motion.
   ============================================================ */

/* ---------- brand icon chips ---------- */
.bi{flex-shrink:0;display:block}
.chip{display:inline-flex;align-items:center;gap:7px}
.chip .bi{margin-left:-2px}
.chip.dark .bi{filter:brightness(1.28) saturate(1.15)}
.logo-tile{display:flex;align-items:center;gap:9px;padding:11px 16px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);font-size:.875rem;font-weight:600;color:var(--slate-700);transition:all var(--dur) var(--ease)}
.logo-tile:hover{border-color:var(--navy-200);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.logo-tile .bi{width:18px;height:18px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.brand-note{font-size:.75rem;color:var(--slate-400);margin-top:18px;line-height:1.5}

/* ---------- 1. scroll reveal (upgraded) ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-l{opacity:0;transform:translateX(-22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv-r{opacity:0;transform:translateX(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv-l.in,.js .rv-r.in{opacity:1;transform:none}
.js .rv-s{opacity:0;transform:scale(.965);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rv-s.in{opacity:1;transform:none}
.no-js .rv,.no-js .rv-l,.no-js .rv-r,.no-js .rv-s{opacity:1;transform:none}

/* ---------- 2. hero entrance (staggered, once) ---------- */
.js .hero-anim>*{opacity:0;transform:translateY(20px);animation:heroIn .8s var(--ease) forwards}
.js .hero-anim>*:nth-child(1){animation-delay:.05s}
.js .hero-anim>*:nth-child(2){animation-delay:.16s}
.js .hero-anim>*:nth-child(3){animation-delay:.27s}
.js .hero-anim>*:nth-child(4){animation-delay:.38s}
.js .hero-anim>*:nth-child(5){animation-delay:.49s}
@keyframes heroIn{to{opacity:1;transform:none}}
.js .hero-visual{opacity:0;transform:translateY(26px) scale(.975);animation:heroIn .9s var(--ease) .34s forwards}

/* ---------- 3. animated gradient in the hero headline ---------- */
.hl{background:linear-gradient(96deg,var(--cyan-400),var(--cyan-300),var(--cyan-500),var(--cyan-400));background-size:280% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.js .hl{animation:hlShift 9s ease-in-out infinite}
@keyframes hlShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- 4. living grid + aurora in the hero ---------- */
.js .hero::after{animation:gridDrift 34s linear infinite}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:52px 52px,52px 52px}}
.hero-aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-aurora i{position:absolute;border-radius:50%;filter:blur(64px);opacity:.36}
.hero-aurora i:nth-child(1){width:440px;height:440px;background:rgba(0,170,255,.42);top:-140px;right:-90px}
.hero-aurora i:nth-child(2){width:380px;height:380px;background:rgba(43,57,145,.55);bottom:-150px;left:-110px}
.js .hero-aurora i:nth-child(1){animation:float1 19s ease-in-out infinite}
.js .hero-aurora i:nth-child(2){animation:float2 23s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(-38px,32px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,-28px)}}

/* ---------- 5. data-stream: rows resolving from messy to clean ---------- */
.stream{position:relative;height:6px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.08);margin-top:14px}
.stream i{position:absolute;inset:0;width:34%;border-radius:3px;background:linear-gradient(90deg,transparent,var(--cyan-400),transparent)}
.js .stream i{animation:streamRun 2.6s var(--ease) infinite}
@keyframes streamRun{from{transform:translateX(-120%)}to{transform:translateX(360%)}}

/* ---------- 6. before/after auto-morph on the hero card ---------- */
.ba-card{transition:box-shadow .4s var(--ease)}
.js .ba-card.pulse{box-shadow:0 24px 64px rgba(0,0,0,.34),0 0 0 1px rgba(0,170,255,.34),0 0 42px rgba(0,170,255,.18)}
.ba-t tbody tr{transition:background .4s var(--ease),opacity .4s var(--ease)}
.js .panel[data-fresh] tbody tr{animation:rowIn .45s var(--ease) backwards}
.js .panel[data-fresh] tbody tr:nth-child(1){animation-delay:.04s}
.js .panel[data-fresh] tbody tr:nth-child(2){animation-delay:.12s}
.js .panel[data-fresh] tbody tr:nth-child(3){animation-delay:.2s}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ---------- 7. section headings: cyan rule draws in ---------- */
.sec-head .eyebrow{position:relative;display:inline-block;padding-bottom:8px}
.sec-head .eyebrow::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cyan-500);border-radius:2px;transition:width .7s var(--ease) .12s}
.js .sec-head.in .eyebrow::after,.js .sec-head .eyebrow.in::after{width:38px}
.no-js .sec-head .eyebrow::after{width:38px}

/* ---------- 8. metric counters: subtle lift as they count ---------- */
.m-num{transition:transform .5s var(--ease)}
.js .m-num.counting{transform:scale(1.045)}

/* ---------- 9. card hover: lift + accent edge ---------- */
.card.hov,.svc,.cscard,.tst,.logo-tile,.member,.chan{position:relative}
.svc::after,.cscard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--cyan-500),var(--navy-600));border-radius:0 0 var(--r-lg) var(--r-lg);transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease)}
.svc:hover::after,.cscard:hover::after{transform:scaleX(1)}

/* ---------- 10. process steps: connector fills on scroll ---------- */
.steps{position:relative}
.steps::after{content:"";position:absolute;top:22px;left:11%;height:2px;width:0;background:linear-gradient(90deg,var(--cyan-500),var(--cyan-400));transition:width 1.5s var(--ease);border-radius:2px}
.js .steps.in::after{width:78%}
@media(max-width:1024px){.steps::after{display:none}}
.step-n{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.js .steps.in .step-n{animation:pop .5s var(--ease) backwards}
.js .steps.in .step:nth-child(1) .step-n{animation-delay:.1s}
.js .steps.in .step:nth-child(2) .step-n{animation-delay:.35s}
.js .steps.in .step:nth-child(3) .step-n{animation-delay:.6s}
.js .steps.in .step:nth-child(4) .step-n{animation-delay:.85s}
@keyframes pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.09)}100%{transform:scale(1);opacity:1}}

/* ---------- 11. bar-chart viz on case cards ---------- */
.viz-bars i{transform-origin:bottom;transition:height .6s var(--ease)}
.js .cscard.in .viz-bars i{animation:barGrow .75s var(--ease) backwards}
.js .cscard.in .viz-bars i:nth-child(1){animation-delay:.05s}
.js .cscard.in .viz-bars i:nth-child(2){animation-delay:.1s}
.js .cscard.in .viz-bars i:nth-child(3){animation-delay:.15s}
.js .cscard.in .viz-bars i:nth-child(4){animation-delay:.2s}
.js .cscard.in .viz-bars i:nth-child(5){animation-delay:.25s}
.js .cscard.in .viz-bars i:nth-child(6){animation-delay:.3s}
.js .cscard.in .viz-bars i:nth-child(7){animation-delay:.35s}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- 12. buttons: sheen on hover ---------- */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transition:left .55s var(--ease);pointer-events:none}
.btn-primary:hover::before,.btn-cyan:hover::before{left:130%}

/* ---------- 13. nav: underline slides in ---------- */
.nav-a::before{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--cyan-400);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .28s var(--ease)}
.nav-a:hover::before{transform:scaleX(1)}
.nav-a[aria-current="page"]::before{display:none}

/* ---------- 14. scroll progress bar ---------- */
.progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--cyan-500),var(--cyan-300));width:0;z-index:200;transition:width .1s linear;pointer-events:none}

/* ---------- REDUCED MOTION: switch it all off ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.rv-l,.rv-r,.rv-s{opacity:1!important;transform:none!important}
  .hero-anim>*,.hero-visual{opacity:1!important;transform:none!important;animation:none!important}
  .sec-head .eyebrow::after{width:38px!important}
  .steps::after{width:78%!important}
  .progress{display:none}
  .hero-aurora i{animation:none!important}
}

/* ---------- brand marks on dark surfaces ---------- */
/* These marks are SOLID TILES with the glyph knocked out in white.
   Forcing the tile to white makes white-on-white = an invisible square.
   So: keep each brand's real colour, and only lighten the near-black ones. */
/* Light tile behind each mark so brand colours read at full contrast.
   (LinkedIn #0A66C2 is only 2.83:1 on navy; on white it's 5.4:1.) */
.soc a{background:#fff;padding:0;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.soc a:hover{background:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.soc .bi{width:20px;height:20px}
/* pure-black marks (X) need a nudge even on white */
.soc .bi[style*="#000000"]{color:#15181C!important}
/* near-black brand marks need lightening on dark surfaces */
.sec-deep .bi[style*="#000000"], .sec-deep .bi[style*="#1A1A1A"],
.hero .bi[style*="#000000"], .hero .bi[style*="#1A1A1A"],
.cta .bi[style*="#000000"], .cta .bi[style*="#1A1A1A"],
body > footer .bi[style*="#000000"], body > footer .bi[style*="#1A1A1A"]{color:#C7D2E4!important}

/* Fiverr's green is light; darken it slightly on the white tile (2.4 -> 4.1) */
.soc .bi[style*="#1DBF73"]{color:#128A52!important}

/* ---------- article & case artwork ---------- */
.cscard-viz{padding:0;aspect-ratio:16/9;overflow:hidden;position:relative}
.cscard-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.cscard:hover .cscard-img{transform:scale(1.045)}
.cscard-viz::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(11,30,61,.5))}
.art-hero{border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 64px rgba(0,0,0,.34);line-height:0;background:var(--deep)}
.art-hero img{width:100%;height:auto;display:block}
.art-inline{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--slate-200);
  margin:36px 0;line-height:0;background:var(--deep)}
.art-inline img{width:100%;height:auto;display:block}
.art-cap{font-size:.8125rem;color:var(--slate-400);margin-top:10px;line-height:1.5;text-align:center}

/* ---------- GEO answer block: front-loaded direct answer ---------- */
.answer-block{background:linear-gradient(158deg,var(--navy-50),#fff 65%);border:1px solid var(--navy-200);
  border-left:4px solid var(--cyan-500);border-radius:var(--r-lg);padding:26px 30px;margin:0 0 8px}
.answer-block .ab-q{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cyan-700);margin:0 0 10px}
.answer-block .ab-a{font-size:1.0625rem;line-height:1.72;color:var(--ink);margin:0}
.answer-block .ab-a b,.answer-block .ab-a strong{color:var(--navy-700)}
.sec-deep .answer-block{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);border-left-color:var(--cyan-400)}
.sec-deep .answer-block .ab-a{color:#E6EDF7}
.sec-deep .answer-block .ab-q{color:var(--cyan-300)}

/* ---------- ranked listicle cards ---------- */
.rank-list{display:flex;flex-direction:column;gap:18px}
.rank-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);overflow:hidden;transition:all var(--dur) var(--ease);scroll-margin-top:100px}
.rank-card:hover{box-shadow:var(--sh-md);border-color:var(--navy-200)}
.rank-card.mine{border:2px solid var(--navy-600);background:linear-gradient(158deg,var(--navy-50),#fff 55%)}
.rank-head{display:flex;align-items:center;gap:18px;padding:22px 26px;border-bottom:1px solid var(--slate-100)}
.rank-n{width:44px;height:44px;border-radius:50%;background:var(--navy-700);color:#fff;font-family:var(--mono);
  font-weight:700;font-size:1.0625rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rank-card.mine .rank-n{background:var(--cyan-700)}
.rank-head h3{font-size:1.1875rem;margin:0 0 3px}
.rank-best{font-size:.875rem;color:var(--slate-600);margin:0}
.rank-score{margin-left:auto;font-family:var(--mono);font-size:1.375rem;font-weight:700;color:var(--navy-700);flex-shrink:0}
.rank-body{padding:22px 26px}
.rank-body p{font-size:.9375rem;line-height:1.7;color:var(--slate-700);margin:0 0 10px}
.rank-body p:last-of-type{margin-bottom:0}
.rank-body b{color:var(--ink)}
@media(max-width:600px){.rank-head{flex-wrap:wrap;gap:12px}.rank-score{margin-left:0}}

/* ---------- HowTo numbered steps ---------- */
.art ol.howto{list-style:none;counter-reset:ht;padding:0;margin:26px 0}
.art ol.howto li{counter-increment:ht;position:relative;padding:0 0 22px 52px;margin:0}
.art ol.howto li::before{content:counter(ht);position:absolute;left:0;top:0;width:34px;height:34px;
  border-radius:50%;background:var(--cyan-50);color:var(--cyan-700);font-family:var(--mono);
  font-weight:700;font-size:.875rem;display:flex;align-items:center;justify-content:center}
.art ol.howto li b{display:block;font-size:1.0625rem;color:var(--ink);margin-bottom:6px}
.art ol.howto li p{margin:0;font-size:.9688rem;line-height:1.72}
.art ol.howto li:last-child{padding-bottom:0}

/* ---------- freshness line ---------- */
.last-rev{max-width:var(--wrap);margin:0 auto;padding:26px 0 6px;font-size:.8125rem;
  color:var(--slate-400);border-top:1px solid var(--slate-100);text-align:center}
.last-rev time{font-family:var(--mono);color:var(--slate-600)}