/* ════════════════════════════════════════════════════════════════
   UNIQENTIC v2 — Precision Dark Cinema
   Brand locked: #2563EB → #4F46E5 → #7C3AED @120° · Poppins
   Ground #0A0F1E (never pure black) · hairlines · gradient-as-scalpel
   Motion: expo-out cubic-bezier(0.16,1,0.3,1) + springs (Motion lib)
   ════════════════════════════════════════════════════════════════ */

/* ── Typeface (local) ─────────────────────────────────────────── */
@font-face { font-family:'Poppins'; src:url('assets/fonts/Poppins-Regular.woff2') format('woff2'), url('assets/fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('assets/fonts/Poppins-Medium.woff2') format('woff2'), url('assets/fonts/Poppins-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('assets/fonts/Poppins-SemiBold.woff2') format('woff2'), url('assets/fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('assets/fonts/Poppins-Bold.woff2') format('woff2'), url('assets/fonts/Poppins-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  /* brand (locked) */
  --blue:#2563EB; --indigo:#4F46E5; --violet:#7C3AED;
  --grad:linear-gradient(120deg,#2563EB 0%,#4F46E5 50%,#7C3AED 100%);
  --grad-soft:linear-gradient(120deg,#60A5FA 0%,#818CF8 50%,#A78BFA 100%); /* AA at small sizes */

  /* surfaces */
  --bg:#0A0F1E;
  --bg-deep:#070B16;
  --surface:#0E1526;
  --surface-2:#121B31;
  --line:rgba(148,163,184,0.10);
  --line-strong:rgba(148,163,184,0.20);
  --ink:#F8FAFC;
  --muted:#94A3B8;
  --muted-bright:#B6C2D6;

  /* elevation */
  --shadow-1:0 4px 20px rgba(2,4,12,0.45);
  --shadow-2:0 20px 50px rgba(2,4,12,0.55);
  --glow-cta:0 8px 30px rgba(79,70,229,0.42);

  /* rhythm (8pt) */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --wrap:1160px;
  --gut:clamp(20px,4vw,40px);

  /* motion */
  --expo:cubic-bezier(0.16,1,0.3,1);
  --nav-h:68px;

  /* z scale */
  --z-nav:100; --z-overlay:110; --z-drawer:120; --z-chat:90; --z-sticky:95;
}

/* ── Base ─────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 38px); -webkit-text-size-adjust:100%; }

body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:1rem; line-height:1.7; font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:1rem; color:var(--ink); }

::selection{ background:rgba(79,70,229,0.45); color:#fff; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg-deep); }
::-webkit-scrollbar-thumb{ background:#26314d; border-radius:8px; border:2px solid var(--bg-deep); }
::-webkit-scrollbar-thumb:hover{ background:#37456b; }

:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; border-radius:4px; }

h1,h2,h3,h4{ line-height:1.15; letter-spacing:-0.02em; text-wrap:balance; font-weight:600; }
h1{ font-size:clamp(2.5rem,5.6vw,4.35rem); font-weight:700; letter-spacing:-0.03em; line-height:1.06; }
h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
h3{ font-size:1.25rem; }
p{ color:var(--muted); }

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.grad-text-soft{
  background:var(--grad-soft);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:clamp(52px,7vh,84px); position:relative; }

.sec-head{ max-width:620px; margin:0 auto clamp(44px,6vh,64px); text-align:center; }
.sec-head p{ margin-top:16px; font-size:1.05rem; }
.sec-head h2{ margin-top:4px; }

.label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.72rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:#A5B4FC; margin-bottom:18px;
}
.label::before{
  content:""; width:22px; height:1px; background:var(--grad);
}

/* reveal initial states (JS + Motion animate to visible) */
html.js [data-rv]{ opacity:0; transform:translateY(26px); }
html.js [data-rv-group] > *{ opacity:0; transform:translateY(18px); }

/* ══ Ambient scene ════════════════════════════════════════════ */
.scene{ position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #101A36 0%, var(--bg) 46%, var(--bg-deep) 100%);
}
.scene-grid{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(148,163,184,0.13) 1px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(75% 55% at 50% 32%, #000 0%, transparent 78%);
          mask-image:radial-gradient(75% 55% at 50% 32%, #000 0%, transparent 78%);
}
.scene-light{
  position:absolute; border-radius:50%;
  /* pre-blurred radial gradients — no filter, no per-frame blur cost;
     the animation itself promotes the layer, no standing will-change */
}
.scene-light-a{
  width:70vmax; height:70vmax; top:-38vmax; left:-16vmax;
  background:radial-gradient(circle at 50% 50%, rgba(37,99,235,0.16) 0%, rgba(37,99,235,0.05) 42%, transparent 68%);
  animation:drift-a 34s ease-in-out infinite alternate;
}
.scene-light-b{
  width:64vmax; height:64vmax; bottom:-34vmax; right:-18vmax;
  background:radial-gradient(circle at 50% 50%, rgba(124,58,237,0.13) 0%, rgba(124,58,237,0.04) 44%, transparent 70%);
  animation:drift-b 42s ease-in-out infinite alternate;
}
@keyframes drift-a{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(7vw,6vh,0);} }
@keyframes drift-b{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-6vw,-7vh,0);} }
.scene-noise{
  position:absolute; inset:0; opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* ══ Buttons ══════════════════════════════════════════════════ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 26px; border-radius:var(--r-pill);
  font-weight:500; font-size:0.96rem; white-space:nowrap;
  cursor:pointer; touch-action:manipulation;
  transition:box-shadow 0.3s var(--expo), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  will-change:transform;
}
.btn svg{ flex-shrink:0; transition:transform 0.3s var(--expo); }
.btn:hover svg{ transform:translateX(3px) scale(1.05); }
.btn-lg{ padding:16px 34px; font-size:1.02rem; }
.btn-sm{ padding:9px 20px; font-size:0.88rem; }
.btn-full{ width:100%; }

.btn-primary{
  background:var(--grad); color:#fff;
  box-shadow:var(--glow-cta), inset 0 1px 0 rgba(255,255,255,0.22);
  overflow:hidden; isolation:isolate;
}
.btn-primary::before{ /* shine sweep */
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:38%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,0.32),transparent);
  transform:skewX(-20deg); transition:left 0.7s var(--expo); z-index:-1;
}
.btn-primary:hover{ box-shadow:0 12px 40px rgba(79,70,229,0.55), 0 0 34px rgba(124,58,237,0.28), inset 0 1px 0 rgba(255,255,255,0.26); }
.btn-primary:hover::before{ left:125%; }

.btn-ghost{
  background:rgba(148,163,184,0.06);
  border:1px solid var(--line-strong);
  color:var(--ink);
}
.btn-ghost:hover{ background:rgba(148,163,184,0.12); border-color:rgba(148,163,184,0.34); }

/* ══ Nav — floating glass pill (v1 style) ═════════════════════ */
.nav{
  position:fixed; top:14px; left:0; right:0; z-index:var(--z-nav);
  display:flex; justify-content:center;
  padding-inline:var(--gut);
  pointer-events:none;
}
.nav-inner{
  pointer-events:auto;
  width:100%; max-width:var(--wrap);
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 14px 0 24px;
  border-radius:var(--r-pill);
  background:rgba(10,15,30,0.32);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(248,250,252,0.07);
  transition:background-color 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}
.nav.scrolled .nav-inner{
  background:rgba(8,12,24,0.55);
  border-color:var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(248,250,252,0.07), 0 16px 44px rgba(2,4,12,0.6);
}
.nav-logo svg{ height:30px; width:auto; }
.nav-logo{ display:flex; align-items:center; transition:opacity 0.3s ease; }
.nav-logo:hover{ opacity:0.85; }

.nav-links{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.nav-links a:not(.nav-cta){
  position:relative; font-size:0.92rem; font-weight:500; color:var(--muted);
  padding:6px 2px; transition:color 0.25s ease;
}
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--grad); transition:right 0.35s var(--expo);
}
.nav-links a:not(.nav-cta):hover,
.nav-links a.active{ color:var(--ink); }
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active::after{ right:0; }

/* scroll progress — fixed hairline at the very top of the viewport
   (.nav has no filter/transform, so this fixed child is viewport-anchored) */
.nav-progress{
  position:fixed; top:0; left:0; right:0; height:2.5px; width:100%;
  background:var(--grad);
  transform:scaleX(0); transform-origin:left;
  box-shadow:0 0 10px rgba(79,70,229,0.55);
  pointer-events:none;
  z-index:calc(var(--z-nav) + 1);
}

.menu-toggle{
  display:none; flex-direction:column; gap:6px; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; z-index:calc(var(--z-drawer) + 1);
  transition:background-color 0.25s ease;
}
.menu-toggle:hover{ background:rgba(148,163,184,0.1); }
.menu-toggle span{
  width:20px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform 0.35s var(--expo);
}
.menu-toggle.active span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

.nav-overlay{
  position:fixed; inset:0; z-index:var(--z-overlay);
  background:rgba(4,7,14,0.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity 0.35s ease;
}
.nav-overlay.active{ opacity:1; pointer-events:auto; }

/* ══ Hero ═════════════════════════════════════════════════════ */
.hero{
  min-height:100svh; display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 58px); padding-bottom:64px;
  position:relative; overflow:hidden;
}
.hero-beam{
  position:absolute; left:50%; transform:translateX(-50%);
  width:min(920px,90vw); height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,0.7),transparent);
  box-shadow:0 0 24px 2px rgba(99,102,241,0.35);
  top:calc(var(--nav-h) + 28px);
}
.hero-grid{
  display:grid; grid-template-columns:1.04fr 0.96fr;
  gap:clamp(40px,5vw,68px); align-items:center;
}
.hero-h1{ margin:4px 0 22px; }
.hero-sub{ font-size:clamp(1rem,1.35vw,1.13rem); max-width:540px; margin-bottom:32px; color:var(--muted-bright); }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-tags{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:34px; }
.tags-lead{ font-size:0.88rem; color:var(--muted); font-weight:500; margin-right:4px; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:var(--r-pill);
  font-size:0.82rem; font-weight:500; color:var(--muted-bright);
  background:rgba(148,163,184,0.05);
  border:1px solid var(--line);
  transition:border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.chip:hover{ border-color:rgba(99,102,241,0.5); color:#fff; background:rgba(79,70,229,0.08); }
.chip svg{ flex-shrink:0; }

/* hero visual — framed console */
.hero-visual{ position:relative; }
.hero-glow{
  position:absolute; inset:-8%;
  background:radial-gradient(55% 55% at 50% 44%, rgba(79,70,229,0.24) 0%, rgba(37,99,235,0.1) 46%, transparent 72%);
  z-index:0;
}
.hero-frame{
  position:relative; z-index:1;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-2), 0 0 60px rgba(79,70,229,0.12);
  will-change:transform;
}
.frame-bar{
  display:flex; gap:6px; align-items:center;
  padding:12px 16px;
  background:rgba(7,11,22,0.75);
  border-bottom:1px solid var(--line);
}
.frame-bar i{ width:10px; height:10px; border-radius:50%; background:rgba(148,163,184,0.24); }
.frame-bar i:first-child{ background:rgba(244,63,94,0.55); }
.frame-bar i:nth-child(2){ background:rgba(245,158,11,0.55); }
.frame-bar i:nth-child(3){ background:rgba(16,185,129,0.55); }
.hero-img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }

.hero-stats{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr);
  margin:-22px 18px 0;
  background:rgba(10,15,30,0.94); /* opaque enough that blur adds nothing */
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.hstat{ padding:16px 14px; text-align:center; }
.hstat + .hstat{ border-left:1px solid var(--line); }
.hstat-value{ font-size:1.45rem; font-weight:700; line-height:1.1; }
.hstat-label{ font-size:0.72rem; color:var(--muted); font-weight:500; margin-top:3px; letter-spacing:0.02em; }

/* ══ Trust ════════════════════════════════════════════════════ */
.trust{ padding-block:8px 0; }
.trust-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:22px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.trust-text{ font-size:0.92rem; }
.trust-text span{ font-weight:600;
  background:var(--grad-soft);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.trust-handle{ letter-spacing:0.05em; font-weight:500; color:var(--muted); }

/* ══ C-Suite ══════════════════════════════════════════════════ */
.csuite{ padding-block:clamp(36px,5vh,56px); }
.csuite-panel{
  position:relative; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(44px,6vw,72px) clamp(24px,5vw,64px);
  background:linear-gradient(180deg, rgba(18,27,49,0.55), rgba(10,15,30,0.2));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.csuite-panel::before,
.csuite-panel::after{
  content:""; position:absolute; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,0.7),transparent);
}
.csuite-panel::before{ top:0; }
.csuite-panel::after{ bottom:0; opacity:0.5; }
.csuite-icon{
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:16px; margin-bottom:18px;
  background:var(--grad); color:#fff;
  box-shadow:var(--glow-cta), inset 0 1px 0 rgba(255,255,255,0.25);
}
.csuite-panel h2{ margin-bottom:10px; }
.csuite-sub{ font-size:1.14rem; max-width:560px; margin-bottom:28px; color:var(--muted-bright); }
.csuite-points{ display:flex; gap:clamp(16px,3vw,32px); flex-wrap:wrap; justify-content:center; margin-bottom:34px; }
.point{ display:flex; align-items:center; gap:9px; font-weight:500; font-size:1.02rem; }
.point svg{ flex-shrink:0; }

/* ══ Before / After ═══════════════════════════════════════════ */
.ba-grid{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(14px,3vw,28px); align-items:stretch;
}
.ba-card{
  padding:clamp(26px,4vw,40px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  transition:transform 0.4s var(--expo), border-color 0.4s ease, box-shadow 0.4s ease;
}
.ba-card:hover{ transform:translateY(-4px); }
.ba-before{
  background:rgba(14,17,28,0.6);
  --accent:244,63,94;
}
.ba-after{
  background:linear-gradient(180deg, rgba(18,27,49,0.7), rgba(13,20,38,0.5));
  border-color:rgba(16,185,129,0.22);
  box-shadow:0 0 44px rgba(16,185,129,0.07), var(--shadow-1);
  --accent:16,185,129;
}
.ba-after:hover{ border-color:rgba(16,185,129,0.42); box-shadow:0 8px 44px rgba(16,185,129,0.12), var(--shadow-2); }
.ba-tag{
  display:inline-block; padding:6px 16px; border-radius:var(--r-pill);
  font-size:0.76rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  margin-bottom:22px;
}
.ba-tag-red{ color:#FDA4AF; background:rgba(244,63,94,0.1); border:1px solid rgba(244,63,94,0.3); }
.ba-tag-green{ color:#6EE7B7; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.32); }
.ba-list{ display:flex; flex-direction:column; gap:15px; }
.ba-list li{ display:flex; align-items:flex-start; gap:12px; font-size:0.98rem; line-height:1.55; color:var(--ink); }
.ba-before .ba-list li{ color:var(--muted); }
.ba-list svg{ width:18px; height:18px; flex-shrink:0; margin-top:4px; color:rgb(var(--accent)); }
.ba-arrow{ display:flex; align-items:center; justify-content:center; }
.ba-arrow svg{ width:46px; height:46px; filter:drop-shadow(0 0 12px rgba(79,70,229,0.5)); }

/* ══ Services ═════════════════════════════════════════════════ */
.marquee{
  overflow:hidden; margin-bottom:clamp(44px,6vh,60px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{
  display:flex; width:max-content;
  animation:marquee 44s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.m-item{
  width:216px; margin-right:16px; flex-shrink:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:7px;
  transition:border-color 0.3s ease, transform 0.3s var(--expo);
}
.m-item:hover{ border-color:rgba(99,102,241,0.45); transform:translateY(-4px); }
.m-item img{ width:100%; height:124px; object-fit:cover; border-radius:calc(var(--r-md) - 5px); }
.m-item span{ display:block; padding:9px 6px 4px; font-size:0.84rem; font-weight:500; text-align:center; color:var(--muted-bright); }

.svc-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  counter-reset:svc;
}
.svc{
  counter-increment:svc;
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color 0.4s ease, transform 0.4s var(--expo), box-shadow 0.4s ease;
}
.svc:hover{
  transform:translateY(-6px);
  border-color:rgba(99,102,241,0.45);
  box-shadow:var(--shadow-2), 0 0 40px rgba(79,70,229,0.1);
}
.svc-media{ position:relative; height:180px; overflow:hidden; }
.svc-media::before{ /* index number */
  content:"0" counter(svc);
  position:absolute; top:14px; right:18px; z-index:2;
  font-size:0.8rem; font-weight:600; letter-spacing:0.14em;
  color:rgba(248,250,252,0.85);
  background:rgba(7,11,22,0.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(148,163,184,0.2);
  padding:4px 10px; border-radius:var(--r-pill);
}
.svc-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,15,30,0) 30%, rgba(14,21,38,0.92) 96%);
}
.svc-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.7s var(--expo), filter 0.7s ease;
}
.svc:hover .svc-media img{ transform:scale(1.06); filter:saturate(1.12); }
.svc-body{ padding:0 26px 26px; margin-top:-26px; position:relative; z-index:1; }
.svc-icon{
  width:52px; height:52px; display:grid; place-items:center; border-radius:14px;
  background:var(--grad);
  box-shadow:0 8px 22px rgba(79,70,229,0.42), inset 0 1px 0 rgba(255,255,255,0.24);
  margin-bottom:16px;
  transition:transform 0.35s var(--expo);
}
.svc:hover .svc-icon{ transform:translateY(-3px) scale(1.05); }
.svc h3{ margin-bottom:8px; }
.svc h3 a{ transition:color 0.25s ease; }
.svc h3 a:hover{ color:#A5B4FC; }
.svc-body > p{ font-size:0.95rem; margin-bottom:18px; }
.svc-list{ display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:18px; }
.svc-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:0.9rem; color:var(--muted);
  transition:color 0.25s ease;
}
.svc-list li:hover{ color:var(--muted-bright); }
.svc-list svg{ flex-shrink:0; margin-top:4px; color:#818CF8; }

/* ══ "Learn more" link — homepage service cards → dedicated pages ═ */
.svc-more{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:18px;
  font-size:0.9rem; font-weight:500;
  color:#A5B4FC;
  transition:color 0.25s ease, gap 0.25s var(--expo);
}
.svc-more svg{ flex-shrink:0; transition:transform 0.3s var(--expo); }
.svc-more:hover{ color:#C7D2FE; gap:10px; }
.svc-more:hover svg{ transform:translateX(2px); }

/* ══ Feature blocks (dedicated service pages — no photo header,
   icon + copy + bullet list; reuses .svc-icon / .svc-list) ══════ */
.feat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.feat{
  padding:30px 28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color 0.4s ease, transform 0.4s var(--expo), box-shadow 0.4s ease;
}
.feat:hover{
  transform:translateY(-5px);
  border-color:rgba(99,102,241,0.42);
  box-shadow:var(--shadow-2), 0 0 36px rgba(79,70,229,0.09);
}
.feat h3{ margin-bottom:10px; }
.feat > p{ font-size:0.95rem; margin-bottom:18px; }

/* ══ Process flow (4-step variant of .steps for service pages) ══ */
.flow{ position:relative; }
.flow-beam{
  position:absolute; top:30px; left:12.5%; right:12.5%; height:2px;
  background:rgba(148,163,184,0.12); border-radius:2px;
}
.flow-beam span{
  display:block; height:100%; width:var(--beam,0%);
  background:var(--grad); border-radius:2px;
  box-shadow:0 0 12px rgba(79,70,229,0.6);
}
.flow-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

/* ══ Integrations strip (reuses .chip visual language) ══════════ */
.integrations-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ══ Industries ═══════════════════════════════════════════════ */
.ind-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:12px;
}
.ind{
  display:flex; align-items:center; gap:13px;
  padding:15px 20px;
  background:rgba(14,21,38,0.5);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:border-color 0.3s ease, background-color 0.3s ease, transform 0.3s var(--expo);
}
.ind:hover{ border-color:rgba(99,102,241,0.4); background:rgba(18,27,49,0.7); transform:translateY(-3px); }
.ind svg{ flex-shrink:0; }
.ind h3{ font-size:0.98rem; font-weight:500; letter-spacing:0; color:var(--muted-bright); }

/* ══ How It Works ═════════════════════════════════════════════ */
.sim-video{
  position:relative; max-width:840px; margin:0 auto clamp(56px,8vh,80px);
  aspect-ratio:16/9;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-2);
}
.video-overlay{
  position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  background:radial-gradient(70% 70% at 50% 50%, rgba(10,15,30,0.3), rgba(7,11,22,0.78));
  cursor:pointer; transition:opacity 0.5s ease;
}
.play-btn{
  position:relative;
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:var(--grad);
  box-shadow:0 14px 40px rgba(79,70,229,0.5);
  transition:transform 0.3s var(--expo);
}
.play-btn:hover{ transform:scale(1.08); }
.play-btn svg{ margin-left:4px; }
/* transform-based pulse — composited, no per-frame repaints */
.play-btn::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(99,102,241,0.55);
  animation:pulse-ring 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes pulse-ring{
  from{ transform:scale(1); opacity:0.8; }
  to{ transform:scale(1.55); opacity:0; }
}
/* once played, drop the overlay out of paint AND the tab order */
.video-overlay.played{
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity 0.5s ease, visibility 0s linear 0.5s;
}
.video-slides{ position:absolute; inset:0; }
.video-slide{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:10px; padding:36px;
  opacity:0; transform:scale(1.03);
  transition:opacity 0.8s var(--expo), transform 0.8s var(--expo);
}
.video-slide.active{ opacity:1; transform:scale(1); }
.vs-icon{
  width:86px; height:86px; display:grid; place-items:center; border-radius:22px;
  color:#A5B4FC;
  background:rgba(79,70,229,0.1);
  border:1px solid rgba(99,102,241,0.3);
  margin-bottom:6px;
}
.video-slide h3{ font-size:clamp(1.35rem,2.4vw,1.9rem); }
.video-slide p{ font-size:1.02rem; max-width:400px; }
.video-controls{ position:absolute; left:0; right:0; bottom:0; padding:16px 22px; z-index:4; }
.video-progress{ height:3px; border-radius:3px; background:rgba(148,163,184,0.16); overflow:hidden; }
.progress-bar{ height:100%; width:0%; background:var(--grad); border-radius:3px; box-shadow:0 0 10px rgba(79,70,229,0.6); }

.steps{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.steps-beam{
  position:absolute; top:30px; left:16.6%; right:16.6%; height:2px;
  background:rgba(148,163,184,0.12); border-radius:2px;
}
.steps-beam span{
  display:block; height:100%; width:var(--beam,0%);
  background:var(--grad); border-radius:2px;
  box-shadow:0 0 12px rgba(79,70,229,0.6);
}
.step{ text-align:center; padding:0 18px; position:relative; }
.step-n{
  width:60px; height:60px; margin:0 auto 20px;
  display:grid; place-items:center; border-radius:50%;
  font-size:1.3rem; font-weight:700; color:#fff;
  background:var(--surface-2);
  border:1px solid rgba(99,102,241,0.4);
  box-shadow:0 0 0 6px var(--bg), 0 0 24px rgba(79,70,229,0.3);
  transition:transform 0.35s var(--expo), box-shadow 0.35s ease;
}
.step:hover .step-n{ transform:scale(1.08); box-shadow:0 0 0 6px var(--bg), 0 0 34px rgba(124,58,237,0.5); }
.step h3{ margin-bottom:9px; }
.step p{ font-size:0.94rem; max-width:300px; margin-inline:auto; }

/* ══ ROI ══════════════════════════════════════════════════════ */
.roi-panel{
  max-width:880px; margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  padding:clamp(30px,5vw,52px);
  box-shadow:var(--shadow-1);
  position:relative; overflow:hidden;
}
.roi-panel::before{
  content:""; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,0.8),transparent);
}
.roi-inputs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,44px); margin-bottom:36px; }
.roi-field label{ display:block; font-size:0.93rem; font-weight:500; margin-bottom:14px; color:var(--muted-bright); }
/* 44px-tall hit area; the visible 5px track is drawn on the track
   pseudo-elements so the input itself can be touch-sized */
.slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:44px; background:transparent; outline:none; cursor:pointer;
  touch-action:manipulation;
}
.slider::-webkit-slider-runnable-track{
  height:5px; border-radius:5px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--violet) var(--fill,20%),rgba(148,163,184,0.16) var(--fill,20%));
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; margin-top:-9.5px; border-radius:50%;
  background:#fff; border:3px solid var(--indigo);
  box-shadow:0 0 0 4px rgba(79,70,229,0.18), 0 0 14px rgba(79,70,229,0.5);
  transition:transform 0.2s var(--expo);
}
.slider::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.slider::-moz-range-track{
  height:5px; border-radius:5px;
  background:rgba(148,163,184,0.16);
}
.slider::-moz-range-progress{
  height:5px; border-radius:5px;
  background:linear-gradient(90deg,var(--blue),var(--violet));
}
.slider::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%;
  background:#fff; border:3px solid var(--indigo);
  box-shadow:0 0 0 4px rgba(79,70,229,0.18), 0 0 14px rgba(79,70,229,0.5);
}
.slider:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }
.slider-val{ margin-top:12px; font-size:1.2rem; font-weight:600; font-variant-numeric:tabular-nums; }

.roi-out{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:rgba(7,11,22,0.55);
  margin-bottom:32px; overflow:hidden;
}
.roi-stat{ padding:26px 20px; text-align:center; }
.roi-stat + .roi-stat{ border-left:1px solid var(--line); }
.roi-k{ font-size:0.76rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.roi-v{ font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; }
.roi-bad .roi-v{ color:#FB7185; }
.roi-good .roi-v{
  background:var(--grad-soft);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.roi-per{ font-size:0.5em; font-weight:500; opacity:0.75; }
.roi-note{ font-size:0.78rem; color:var(--muted); margin-top:7px; }
.roi-cta{ text-align:center; }

/* ══ Stats ════════════════════════════════════════════════════ */
.stats-row{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--line);
}
.stat{ padding:clamp(30px,4vw,46px) 18px; text-align:center; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat-n{
  font-size:clamp(2.4rem,4.6vw,3.6rem); font-weight:700; line-height:1.05;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat-suffix{ font-size:0.55em; }
.stat-k{ margin-top:8px; font-size:0.9rem; font-weight:500; color:var(--muted); }

/* ══ Testimonials ═════════════════════════════════════════════ */
.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.quote{
  display:flex; flex-direction:column;
  padding:30px 28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color 0.35s ease, transform 0.35s var(--expo), box-shadow 0.35s ease;
}
.quote:hover{
  transform:translateY(-5px);
  border-color:rgba(99,102,241,0.4);
  box-shadow:var(--shadow-2);
}
.stars{ display:flex; gap:3px; color:#FBBF24; margin-bottom:16px; }
.quote blockquote{
  font-size:0.97rem; line-height:1.75; color:var(--muted-bright);
  margin-bottom:24px; border:none;
}
.quote figcaption{ display:flex; align-items:center; gap:13px; margin-top:auto; }
.q-avatar{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:600; font-size:0.88rem; color:#fff;
  background:var(--grad);
  box-shadow:0 0 0 2px var(--bg), 0 0 0 3px rgba(99,102,241,0.5);
}
.q-who{ display:flex; flex-direction:column; }
.q-who b{ font-weight:600; font-size:0.95rem; }
.q-who i{ font-style:normal; font-size:0.82rem; color:var(--muted); }

/* ── Featured testimonial (spotlight — sits above the grid) ────── */
.quote-featured{
  position:relative;
  padding:clamp(36px,5vw,56px);
  margin-bottom:28px;
  background:linear-gradient(160deg, rgba(79,70,229,0.14), rgba(14,21,38,0.55));
  border:1px solid rgba(99,102,241,0.35);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-2), 0 0 60px rgba(79,70,229,0.16);
}
.quote-featured::before{
  content:""; position:absolute; top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,0.8),transparent);
}
.quote-featured .stars{ margin-bottom:16px; }
.quote-featured blockquote{
  font-size:0.97rem; line-height:1.75; color:var(--muted-bright);
  margin:0 0 24px; border:none;
}
.quote-featured figcaption{ display:flex; align-items:center; gap:14px; }
.quote-featured .q-avatar{ width:54px; height:54px; font-size:1.02rem; }

/* ══ FAQ ══════════════════════════════════════════════════════ */
.faq-list{
  max-width:760px; margin:0 auto;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:rgba(14,21,38,0.4);
  overflow:hidden;
}
.faq-item + .faq-item{ border-top:1px solid var(--line); }
.faq-item.active{ background:rgba(18,27,49,0.6); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:21px 26px;
  font-size:1.02rem; font-weight:500; text-align:left; color:var(--ink);
  transition:color 0.25s ease;
}
.faq-q:hover{ color:#C7D2FE; }
.faq-q:focus-visible{ outline-offset:-3px; }
.faq-icon{
  width:18px; height:18px; flex-shrink:0; color:#818CF8;
  transition:transform 0.4s var(--expo), color 0.3s ease;
}
.faq-item.active .faq-icon{ transform:rotate(135deg); color:#A78BFA; }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.45s var(--expo); }
.faq-item.active .faq-a{ grid-template-rows:1fr; }
.faq-a-in{
  overflow:hidden; min-height:0;
  padding:0 26px; font-size:0.95rem; line-height:1.75; color:var(--muted);
  opacity:0; transform:translateY(-4px);
  transition:opacity 0.4s ease 0.06s, transform 0.4s var(--expo) 0.06s, padding 0.3s ease;
}
.faq-item.active .faq-a-in{ padding:0 26px 22px; opacity:1; transform:translateY(0); }

/* ══ Book a Call ══════════════════════════════════════════════ */
.book-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:clamp(40px,6vw,76px); align-items:center;
}
.book-info h2{ margin:4px 0 16px; }
.book-info > p{ font-size:1.04rem; margin-bottom:30px; color:var(--muted-bright); }
.book-points{ display:flex; flex-direction:column; gap:16px; }
.book-points li{ display:flex; align-items:center; gap:14px; font-size:0.98rem; font-weight:500; }
.bp-icon{
  width:38px; height:38px; flex-shrink:0;
  display:grid; place-items:center; border-radius:11px;
  color:#A5B4FC;
  background:rgba(79,70,229,0.1);
  border:1px solid rgba(99,102,241,0.28);
}
.book-form-wrap{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  padding:clamp(28px,4vw,44px);
  box-shadow:var(--shadow-2);
  overflow:hidden;
}
.book-form-wrap::before{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,0.85),transparent);
}
.book-form-wrap > h3{ margin-bottom:24px; font-size:1.4rem; }
.book-form{ display:flex; flex-direction:column; gap:18px; }
.ff{ display:flex; flex-direction:column; gap:7px; }
.ff label{ font-size:0.86rem; font-weight:500; color:var(--muted-bright); }
.req{ color:#FB7185; }
.opt{ color:var(--muted); font-weight:400; }
.ff-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.book-form input,
.book-form select,
.book-form textarea,
.magnet-form input{
  width:100%; padding:12px 15px; min-height:48px;
  border-radius:12px;
  background:rgba(7,11,22,0.6);
  border:1px solid var(--line);
  transition:border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.book-form input::placeholder,
.book-form textarea::placeholder,
.magnet-form input::placeholder{ color:rgba(148,163,184,0.8); }
.book-form input:focus,
.book-form select:focus,
.book-form textarea:focus,
.magnet-form input:focus{
  outline:none;
  border-color:rgba(99,102,241,0.7);
  background:rgba(7,11,22,0.85);
  box-shadow:0 0 0 4px rgba(79,70,229,0.15);
}
.book-form textarea{ resize:vertical; min-height:92px; }
.book-form select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
  padding-right:40px; cursor:pointer;
}
.book-form select option{ background:var(--surface-2); color:var(--ink); }
.phone-row{ display:flex; gap:10px; }
.phone-row select{ width:106px; flex-shrink:0; padding-right:28px; background-position:right 8px center; }

.form-success{ text-align:center; padding:28px 8px; }
.form-success svg{ margin:0 auto 16px; color:#34D399; }
.form-success h3{ margin-bottom:9px; }

/* ══ Lead Magnet ══════════════════════════════════════════════ */
.magnet{ padding-top:16px; }
.magnet-panel{
  display:grid; grid-template-columns:1.35fr 0.65fr;
  gap:clamp(28px,5vw,56px); align-items:center;
  background:linear-gradient(180deg, rgba(18,27,49,0.6), rgba(11,17,32,0.4));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(34px,5vw,56px);
  position:relative; overflow:hidden;
}
.magnet-panel::before{
  content:""; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,0.8),transparent);
}
.magnet-copy h2{ margin:4px 0 12px; }
.magnet-copy p{ margin-bottom:24px; max-width:460px; }
.magnet-form{ display:flex; gap:12px; max-width:440px; }
.magnet-form input{ flex:1; }
.magnet-success{ font-size:1.06rem; font-weight:600; color:#34D399; padding:12px 0; }
.magnet-art{ display:flex; justify-content:center; }
.doc{
  position:relative; width:176px; aspect-ratio:3/4;
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius:16px; padding:24px 20px;
  transform:rotate(4deg);
  box-shadow:var(--shadow-2), 0 0 34px rgba(79,70,229,0.14);
}
.doc-lines{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.doc-lines i{
  display:block; height:8px; border-radius:4px;
  background:linear-gradient(90deg,rgba(99,102,241,0.55),rgba(148,163,184,0.16));
}
.doc-badge{
  position:absolute; top:-12px; right:-12px;
  padding:7px 14px; border-radius:10px;
  font-size:0.76rem; font-weight:700; letter-spacing:0.1em; color:#fff;
  background:var(--grad);
  box-shadow:0 8px 20px rgba(79,70,229,0.45);
}

/* ══ Footer ═══════════════════════════════════════════════════ */
.footer{
  margin-top:24px;
  padding:clamp(44px,6vh,64px) 0 28px;
  background:var(--bg-deep);
  border-top:1px solid var(--line);
  position:relative;
}
.footer::before{
  content:""; position:absolute; top:-1px; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(79,70,229,0.6),transparent);
}
.f-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(30px,5vw,60px); margin-bottom:48px;
}
.f-logo{ display:inline-block; }
.f-logo svg{ height:30px; width:auto; }
.f-brand > p{ margin:18px 0 24px; font-size:0.93rem; max-width:310px; }
.f-social{ display:flex; gap:10px; }
.f-social a{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:11px; color:var(--muted);
  background:rgba(148,163,184,0.05);
  border:1px solid var(--line);
  transition:color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--expo);
}
.f-social a svg{ width:17px; height:17px; }
.f-social a:hover{ color:#fff; border-color:rgba(99,102,241,0.5); transform:translateY(-3px); }
.f-col{ display:flex; flex-direction:column; gap:12px; }
.f-col h4{
  font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink); margin-bottom:6px;
}
.f-col a{ font-size:0.91rem; color:var(--muted); width:fit-content; transition:color 0.25s ease, transform 0.25s var(--expo); }
.f-col a:hover{ color:var(--ink); transform:translateX(3px); }
.f-bottom{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--line);
}
.f-bottom p{ font-size:0.84rem; }

/* ══ Sticky mobile CTA ════════════════════════════════════════ */
.sticky-cta{
  position:fixed; left:14px; right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  z-index:var(--z-sticky);
  display:none;
  opacity:0; transform:translateY(80px);
  transition:opacity 0.4s var(--expo), transform 0.4s var(--expo), visibility 0s linear 0.4s;
  visibility:hidden;
}
.sticky-cta.show{ opacity:1; transform:translateY(0); visibility:visible; transition:opacity 0.4s var(--expo), transform 0.4s var(--expo), visibility 0s; }
.sticky-cta .btn{ box-shadow:0 10px 34px rgba(79,70,229,0.55), 0 2px 10px rgba(2,4,12,0.6), inset 0 1px 0 rgba(255,255,255,0.22); }

/* ══ Chatbot ══════════════════════════════════════════════════ */
.chatbot{ position:fixed; bottom:24px; right:24px; z-index:var(--z-chat); }
.chat-toggle{
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; color:#fff; position:relative;
  background:var(--grad);
  box-shadow:0 12px 32px rgba(79,70,229,0.48), inset 0 1px 0 rgba(255,255,255,0.26);
  transition:transform 0.3s var(--expo), box-shadow 0.3s ease;
}
.chat-toggle:hover{ transform:scale(1.07); box-shadow:0 16px 40px rgba(79,70,229,0.6), inset 0 1px 0 rgba(255,255,255,0.26); }
.chat-toggle svg{ width:25px; height:25px; }
.chat-badge{
  position:absolute; top:-3px; right:-3px;
  width:19px; height:19px; border-radius:50%;
  display:grid; place-items:center;
  font-size:0.68rem; font-weight:600; color:#fff;
  background:#F43F5E; border:2px solid var(--bg);
}
.chat-window{
  position:absolute; bottom:72px; right:0; width:336px;
  background:rgba(10,15,30,0.97);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-2), 0 0 40px rgba(79,70,229,0.16);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(14px) scale(0.97);
  transform-origin:bottom right;
  transition:opacity 0.32s var(--expo), transform 0.32s var(--expo), visibility 0s linear 0.32s;
}
.chat-window.active{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0) scale(1);
  transition:opacity 0.32s var(--expo), transform 0.32s var(--expo), visibility 0s;
}
.chat-head{ display:flex; align-items:center; gap:12px; padding:15px 17px; border-bottom:1px solid var(--line); }
.chat-avatar{
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  font-size:0.76rem; font-weight:700; color:#fff; background:var(--grad);
}
.chat-head h4{ font-size:0.95rem; }
.chat-status{ display:inline-flex; align-items:center; gap:6px; font-size:0.74rem; color:#34D399; }
.chat-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:#34D399; }
.chat-close{
  margin-left:auto; width:44px; height:44px; border-radius:9px;
  font-size:1.25rem; line-height:1; color:var(--muted);
  display:grid; place-items:center;
  transition:background-color 0.25s ease, color 0.25s ease;
}
.chat-close:hover{ background:rgba(148,163,184,0.12); color:#fff; }
.chat-body{ padding:16px; max-height:290px; overflow-y:auto; display:flex; flex-direction:column; gap:11px; }
.chat-msg{
  max-width:86%; padding:11px 14px; border-radius:14px;
  font-size:0.87rem; line-height:1.55;
}
.ai-msg{
  align-self:flex-start; color:var(--muted-bright);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-bottom-left-radius:5px;
}
.user-msg{
  align-self:flex-end; color:#fff;
  background:var(--grad);
  border-bottom-right-radius:5px;
}
.chat-msg .grad-text,
.chat-msg a{
  background:var(--grad-soft);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.chat-typing{
  align-self:flex-start; display:inline-flex; gap:5px;
  padding:13px 15px; border-radius:14px; border-bottom-left-radius:5px;
  background:var(--surface-2); border:1px solid var(--line);
}
.chat-typing i{
  width:6px; height:6px; border-radius:50%; background:var(--muted);
  animation:typing 1.15s ease-in-out infinite;
}
.chat-typing i:nth-child(2){ animation-delay:0.14s; }
.chat-typing i:nth-child(3){ animation-delay:0.28s; }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:0.5;} 30%{ transform:translateY(-4px); opacity:1;} }
.chat-foot{ padding:13px 16px 16px; border-top:1px solid var(--line); }
.chat-options{ display:flex; gap:9px; flex-wrap:wrap; }
.chat-opt{
  padding:12px 16px; min-height:44px; border-radius:var(--r-pill);
  font-size:0.82rem; font-weight:500; color:#C7D2FE;
  background:rgba(79,70,229,0.12);
  border:1px solid rgba(99,102,241,0.34);
  transition:background-color 0.25s ease, transform 0.25s var(--expo);
}
.chat-opt:hover{ background:rgba(79,70,229,0.26); transform:translateY(-2px); }

/* chat text input + send */
.chat-input-row{ display:flex; gap:8px; margin-top:11px; }
#chatInput{
  flex:1; min-width:0; padding:11px 14px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--ink);
  font:inherit; font-size:0.86rem; outline:none;
  transition:border-color 0.25s ease;
}
#chatInput::placeholder{ color:var(--muted); }
#chatInput:focus{ border-color:rgba(99,102,241,0.55); }
.chat-send{
  flex-shrink:0; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:var(--grad);
  box-shadow:0 6px 18px rgba(79,70,229,0.4);
  transition:transform 0.25s var(--expo);
}
.chat-send:hover{ transform:scale(1.06); }

/* chat human-handoff buttons (override the gradient-text link rule) */
.chat-cta-row{ display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.chat-msg a.chat-cta{
  display:inline-flex; align-items:center; padding:9px 15px;
  border-radius:var(--r-pill); font-size:0.8rem; font-weight:600;
  -webkit-text-fill-color:initial; background-clip:border-box; -webkit-background-clip:border-box;
}
.chat-msg a.chat-cta.wa{ color:#fff; background:#25D366; }
.chat-msg a.chat-cta.mail{ color:#C7D2FE; background:rgba(79,70,229,0.16); border:1px solid rgba(99,102,241,0.36); }

/* inline form error banner */
.form-error{
  margin-top:14px; padding:11px 14px; border-radius:var(--r-sm);
  font-size:0.88rem; color:#FCA5A5;
  background:rgba(244,63,94,0.1); border:1px solid rgba(244,63,94,0.3);
}

/* spam honeypot — hidden from humans, present for bots */
.hp-field{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }

/* ══ Responsive ═══════════════════════════════════════════════ */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; gap:60px; }
  .hero{ min-height:auto; padding-top:calc(var(--nav-h) + 64px); }
  .hero-copy{ text-align:center; }
  .hero-sub{ margin-inline:auto; }
  .hero-ctas,.hero-tags{ justify-content:center; }
  .hero-visual{ max-width:600px; margin-inline:auto; }
  .svc-grid{ grid-template-columns:1fr; max-width:620px; margin-inline:auto; }
  .feat-grid{ grid-template-columns:1fr; max-width:620px; margin-inline:auto; }
  .flow-grid{ grid-template-columns:repeat(2,1fr); }
  .quote-grid{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .stats-row{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:none; }
  .stat:nth-child(3),.stat:nth-child(4){ border-top:1px solid var(--line); }
  .book-grid{ grid-template-columns:1fr; gap:52px; }
  .f-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  :root{ --nav-h:60px; }
  .menu-toggle{ display:flex; }

  /* nav-links is a descendant of the fixed .nav (its containing block for
     fixed positioning would be the nav if it had backdrop-filter removed on
     open) — the drawer therefore lives at the nav's level but is positioned
     against the viewport since .nav spans it fully at top:0 left:0 right:0 */
  /* the drawer's z-index only counts inside .nav's stacking context —
     lift the whole nav above the sibling overlay (110) while open, and
     drop the pill's backdrop-filter so it can't become the fixed
     drawer's containing block (Filter Effects L2) */
  .nav:has(.nav-links.open){ z-index:130; }
  .nav:has(.nav-links.open) .nav-inner{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(8,12,24,0.94);
  }
  .nav-links{
    position:fixed; top:0; right:0; height:100dvh;
    width:min(78vw,330px);
    flex-direction:column; align-items:flex-start;
    justify-content:center; justify-content:safe center;
    gap:6px; padding:88px 36px 40px;
    overflow-y:auto;
    background:rgba(8,12,24,0.97);
    border-left:1px solid var(--line);
    transform:translateX(105%);
    transition:transform 0.45s var(--expo);
    z-index:var(--z-drawer);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a:not(.nav-cta){ font-size:1.2rem; padding:11px 0; width:100%; }
  .nav-cta{ margin-top:18px; width:100%; }

  .ba-grid{ grid-template-columns:1fr; }
  .ba-arrow svg{ transform:rotate(90deg); width:40px; height:40px; }

  .steps{ grid-template-columns:1fr; gap:40px; max-width:480px; margin-inline:auto; }
  .steps-beam{ left:50%; right:auto; top:30px; bottom:56px; width:2px; height:auto; transform:translateX(-50%); }
  .steps-beam span{ width:100%; height:var(--beam,0%); }

  .flow-grid{ grid-template-columns:1fr; gap:40px; max-width:480px; margin-inline:auto; }
  .flow-beam{ left:50%; right:auto; top:30px; bottom:56px; width:2px; height:auto; transform:translateX(-50%); }
  .flow-beam span{ width:100%; height:var(--beam,0%); }

  .roi-inputs{ grid-template-columns:1fr; }
  .roi-out{ grid-template-columns:1fr; }
  .roi-stat + .roi-stat{ border-left:none; border-top:1px solid var(--line); }

  .magnet-panel{ grid-template-columns:1fr; text-align:center; }
  .magnet-copy p{ margin-inline:auto; }
  .magnet-form{ margin-inline:auto; }

  body.menu-open .chatbot,
  body.menu-open .sticky-cta{ visibility:hidden; }
}

@media (max-width:640px){
  .sec{ padding-block:44px; }
  .hero-stats{ margin:-18px 10px 0; }
  .hstat-value{ font-size:1.2rem; }
  .trust-row{ justify-content:center; text-align:center; }
  .ff-row{ grid-template-columns:1fr; }
  .stats-row{ grid-template-columns:1fr 1fr; }
  .magnet-form{ flex-direction:column; }
  .f-grid{ grid-template-columns:1fr; gap:32px; }
  .f-bottom{ justify-content:center; text-align:center; }
  .chat-window{ width:min(88vw,336px); }
  .chatbot{ bottom:88px; right:16px; } /* sits above the sticky CTA */
  .csuite-points{ flex-direction:column; align-items:center; gap:12px; }
  .sticky-cta{ display:block; }
}

/* ══ Reduced motion ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    transition-delay:0ms !important;
  }
  html.js [data-rv], html.js [data-rv-group] > *{ opacity:1; transform:none; }
  .scene-light{ display:none; }
}