/* ═══════════════ PROEXIMA AI — EXACT SENTHORA DESIGN SYSTEM ═══════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg:          #110F14;
  --bg-2:        #17151C;
  --panel:       #1E1C26;
  --violet:      #9A8AFB;
  --violet-dim:  rgba(154,138,251,.14);
  --violet-bright: #BCA9FF;
  --pink:        #CC3366;
  --text:        #EAEAF0;
  --muted:       #A49DB5;
  --muted-2:     #C2BCD2;
  --line:        rgba(234,234,240,.08);
  --trace:       rgba(140,122,230,.42);
  --trace-bright:#9A8AFB;
  --panel-border:rgba(154,138,251,.22);
  
  --font-sans:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:   'JetBrains Mono', monospace;
  
  --container:   1200px;
  --space-inline:clamp(20px, 5vw, 72px);
  --space-section:clamp(84px, 12vh, 150px);
  --space-title: clamp(44px, 7vh, 76px);
  --fs-h2:       clamp(30px, 4.4vw, 58px);
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; overflow-x:hidden; overflow-x:clip; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(110% 80% at 50% -12%, rgba(124,92,240,.14), rgba(124,92,240,0) 62%),
    radial-gradient(55% 60% at -8% 28%, rgba(124,92,240,.10), rgba(124,92,240,0) 70%),
    radial-gradient(55% 60% at 108% 55%, rgba(154,138,251,.08), rgba(154,138,251,0) 70%),
    radial-gradient(70% 45% at 50% 108%, rgba(204,51,102,.05), rgba(204,51,102,0) 72%);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100vh;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-weight:600; letter-spacing:-.02em; }
section { position:relative; z-index:2; }

/* ─────────── Section Hue Shifts ─────────── */
.steps {
  background: linear-gradient(180deg, rgba(124,92,240,0), rgba(124,92,240,.06) 20%, rgba(124,92,240,.06) 80%, rgba(124,92,240,0));
}
.signature {
  background: linear-gradient(180deg, rgba(62,107,255,0), rgba(62,107,255,.055) 20%, rgba(62,107,255,.055) 80%, rgba(62,107,255,0));
}
.features {
  background: linear-gradient(180deg, rgba(204,51,102,0), rgba(204,51,102,.05) 20%, rgba(204,51,102,.05) 80%, rgba(204,51,102,0));
}
.exploded {
  background: linear-gradient(180deg, rgba(90,110,255,0), rgba(90,110,255,.055) 20%, rgba(90,110,255,.055) 80%, rgba(90,110,255,0));
}
.pricing {
  background: linear-gradient(180deg, rgba(124,92,240,0), rgba(124,92,240,.07) 25%, rgba(124,92,240,.07) 75%, rgba(124,92,240,0));
}
.faq {
  background: linear-gradient(180deg, rgba(62,107,255,0), rgba(62,107,255,.045) 20%, rgba(62,107,255,.045) 80%, rgba(62,107,255,0));
}

/* ─────────── Canvas layers & Progress ─────────── */
#gl { position:fixed; inset:0; z-index:0; pointer-events:none; }
.vignette {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(8,7,10,.75) 100%);
}
#grain { position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.07; mix-blend-mode:overlay; }
.scroll-progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:70;
  background:linear-gradient(90deg, var(--violet), var(--pink));
  transform-origin:0 50%; transform:scaleX(0);
  box-shadow:0 0 12px rgba(154,138,251,.8);
  pointer-events:none;
}

/* ─────────── Custom Cursor (Tech Reticle) ─────────── */
.cursor { display:none; }
@media (pointer: fine) {
  body:has(#cursor), body:has(#cursor) * { cursor:none !important; }
  .cursor {
    display:block; position:fixed; left:0; top:0; z-index:210;
    width:38px; height:38px; pointer-events:none;
    will-change:transform;
  }
  .cursor svg {
    position:absolute; inset:0; width:100%; height:100%;
    filter:drop-shadow(0 0 8px rgba(154,138,251,.95));
    transition:scale .3s ease;
  }
  .cursor.is-hover svg { scale:1.5; }
}

/* ─────────── Living Logo & Chip Breathing Keyframes ─────────── */
@keyframes logoBreath {
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(1.09); }
}
@keyframes markBreath {
  0%, 100% { transform:scale(1); filter:drop-shadow(0 0 4px rgba(154,138,251,.35)); }
  50%      { transform:scale(1.1); filter:drop-shadow(0 0 13px rgba(154,138,251,.85)); }
}
@keyframes chipBreath {
  0%, 100% {
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.15),
      0 12px 36px rgba(0,0,0,.6),
      0 0 20px rgba(154,138,251,.15);
  }
  50% {
    box-shadow:
      inset 0 1px 3px rgba(255,255,255,.25),
      0 16px 48px rgba(0,0,0,.75),
      0 0 32px rgba(154,138,251,.25);
  }
}

.app-chip {
  width:96px; aspect-ratio:1; border-radius:26%;
  background:rgba(18, 16, 24, 0.85);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15);
  animation:chipBreath 3.6s ease-in-out infinite;
}
.app-chip img { width:70%; height:auto; object-fit:contain; filter:none; animation:logoBreath 3.6s ease-in-out infinite; }
.nav-logo img, .footer img:not(.footer-qr) { animation:markBreath 3.6s ease-in-out infinite; }

/* ─────────── 3D Rotating Chip ─────────── */
.chip3d {
  position:relative;
  width:clamp(72px, 8vw, 96px); aspect-ratio:1;
  transform-style:preserve-3d;
  perspective:1000px;
}
.chip3d .chip-face {
  position:absolute; inset:0; width:100%; height:100%;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.chip3d .chip-face.back {
  transform:rotateY(180deg);
}

/* ─────────── Circuit Nets & Connectors ─────────── */
.net path {
  stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round;
}
.net path.faint { stroke:rgba(140,122,230,.22); stroke-width:2; }
.net path.spine { stroke:rgba(154,138,251,.55); stroke-width:3.4; }
.net path[data-pulse] {
  stroke:#D6CCFF; stroke-width:4.5; opacity:.95;
  filter:drop-shadow(0 0 8px rgba(154,138,251,1));
}
.connector {
  position:relative; z-index:2; height:36vh; min-height:220px;
  display:flex; justify-content:center;
}
.connector svg { width:min(560px, 90vw); height:100%; overflow:visible; }
.connector path {
  stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round;
}
.connector path[data-pulse] {
  stroke:#D6CCFF; stroke-width:4.6;
  filter:drop-shadow(0 0 9px rgba(154,138,251,1));
}

.edge-glow {
  position:absolute; top:12%; bottom:12%; width:120px; z-index:0; pointer-events:none;
  filter:blur(34px); opacity:.55;
}
.edge-glow.left  { left:-56px; background:radial-gradient(ellipse at center, rgba(124,92,240,.55), transparent 70%); }
.edge-glow.right { right:-56px; background:radial-gradient(ellipse at center, rgba(124,92,240,.55), transparent 70%); }

/* ─────────── Layout Container ─────────── */
.container { max-width: var(--container); margin:0 auto; padding:0 var(--space-inline); width:100%; }

/* ─────────── Navigation ─────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px, 4vw, 56px);
  transition:background .4s, backdrop-filter .4s;
}
.nav.is-solid { background:rgba(17,15,20,.88); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.nav-logo { display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; letter-spacing:.02em; }
.nav-logo img { width: clamp(140px, 15vw, 190px); height: auto; max-width: none; flex-shrink: 0; }
.nav-links { display:flex; align-items:center; gap:clamp(16px, 2.2vw, 32px); }
.nav-link { font-size:13.5px; color:var(--muted-2); letter-spacing:.03em; transition:color .3s; font-weight:500; }
.nav-link:hover { color:var(--text); text-shadow:0 0 12px rgba(154,138,251,.4); }
.nav-cta {
  font-size:13px; padding:9px 22px; border-radius:100px;
  background:linear-gradient(100deg, var(--violet), #7B68F0);
  color:#0E0C12 !important; font-weight:700;
  white-space:nowrap;
  box-shadow:0 0 24px rgba(154,138,251,.4);
  transition:transform .3s, box-shadow .3s;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(154,138,251,.6); }
.d-mobile-only { display:none; }
.mobile-menu-btn { display:none; background:none; border:none; color:var(--text); font-size:24px; cursor:pointer; }

/* ─────────── Buttons ─────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:600; text-decoration:none;
  border:none; cursor:pointer;
}
.btn-primary {
  padding:17px 44px; border-radius:100px;
  background:linear-gradient(100deg, var(--violet), #7B68F0);
  color:#0E0C12 !important; font-size:16px;
  box-shadow:0 12px 44px rgba(154,138,251,.35);
  transition:transform .3s, box-shadow .3s;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 18px 60px rgba(154,138,251,.55); }

.btn-secondary {
  padding:14px 32px; border-radius:100px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--panel-border);
  color:#FFFFFF; font-size:15px;
  transition:transform .3s, border-color .3s, box-shadow .3s, background .3s;
}
.btn-secondary:hover {
  transform:translateY(-2px);
  border-color:rgba(154,138,251,.5);
  background:rgba(154,138,251,0.1);
  box-shadow:0 10px 30px rgba(154,138,251,.15);
}

/* ─────────── Hero Section ─────────── */
.hero {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; text-align:center;
  padding:120px 0 72px;
}
.hero-content { padding:0 24px; position:relative; max-width:1000px; margin:0 auto; }
.hero-title, .hero-sub, .hero-badges { position:relative; z-index:2; }
.hero-title {
  font-size:clamp(38px, 6.4vw, 88px); line-height:1.02; margin-bottom:18px;
  text-shadow:0 6px 30px rgba(17,15,20,.85);
}
.hero-title .line { display:block; overflow:hidden; }
.word-w { display:inline-block; white-space:nowrap; }
.hero-title .char, .cta-title .char { display:inline-block; will-change:transform; }
.hero-title .accent, .hero-title .accent .char, .cta-title .accent, .cta-title .accent .char {
  background:linear-gradient(100deg, var(--violet) 20%, var(--pink) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub { max-width:560px; margin:0 auto 26px; color:var(--muted-2); font-size:clamp(15px, 1.6vw, 18px); font-weight:400; line-height:1.6; }
.hero-sub span { display:inline-block; }
.reveal-line { overflow:hidden; }
.hero-badges.reveal-line { padding:8px 0 14px; margin:-8px 0 -14px; }
.badges-wrap { display:inline-flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.hero-visual {
  position:relative; width:100vw; max-width:none; margin-top:8px;
  height:clamp(150px, 24vh, 260px);
  display:flex; align-items:center; justify-content:center;
  perspective:900px;
}
.hero-net { width:100%; height:100%; display:block; overflow:visible; }
.hero-chip {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
}

/* ─────────── Statement Section (Pinned Narrative Story) ─────────── */
.statement-pin {
  position:relative;
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:0 24px;
}
.statement-net {
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.statement-net path.s-pulse {
  stroke:#D6CCFF; stroke-width:4.5; vector-effect:non-scaling-stroke; stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(154,138,251,1));
  opacity:0;
}
.statement-text {
  position:relative; z-index:2; max-width:1000px; text-align:center;
  font-size:clamp(28px, 4.6vw, 60px); font-weight:500; line-height:1.25; letter-spacing:-.02em;
  user-select:none; -webkit-user-select:none;
}
.statement-text .word { color:rgba(234,234,240,.22); transition:color .3s linear, text-shadow .3s; display:inline-block; }
.statement-text .word.is-on { color:var(--text); text-shadow:0 0 20px rgba(154,138,251,0.6); }

/* ─────────── Section Headers & Kickers ─────────── */
.section { padding: var(--space-section) 0; }
.section-kicker {
  font-size:clamp(13px, 1.4vw, 16px); font-weight:700; letter-spacing:.34em;
  color:var(--violet); text-align:center; margin-bottom:28px;
  text-shadow:0 0 24px rgba(154,138,251,.45);
  text-transform:uppercase; font-family:var(--font-mono);
}
.section-title {
  font-size:var(--fs-h2); line-height:1.12; margin-bottom:var(--space-title); text-align:center;
  max-width:var(--container); margin-left:auto; margin-right:auto;
}
.section-title .dim { color:var(--muted); font-weight:500; }

/* ─────────── Steps Section (Auto-Advancing 6s Rail) ─────────── */
.steps-pin { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:90px var(--space-inline) 60px; }
.steps-head { text-align:center; margin-bottom:clamp(28px, 5vh, 64px); }
.steps-body {
  display:grid; grid-template-columns:1fr minmax(300px, 440px); gap:clamp(24px, 6vw, 96px);
  align-items:center; max-width:1200px; margin:0 auto; width:100%;
}
.steps-text { position:relative; padding-left:34px; }
.steps-rail {
  position:absolute; left:0; top:8px; bottom:54px; width:3px;
  background:rgba(234,234,240,.08); border-radius:3px;
}
.steps-rail-fill {
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(180deg, var(--violet), var(--pink));
  border-radius:3px;
  box-shadow:0 0 14px rgba(154,138,251,.8);
}
.steps-rail-dot {
  position:absolute; left:50%; top:0%;
  width:13px; height:13px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:#EDE9FF;
  box-shadow:0 0 0 4px rgba(154,138,251,.35), 0 0 18px rgba(154,138,251,1);
}
.steps-counter {
  position:absolute; right:0; top:-8px;
  font-weight:400; color:var(--muted); font-size:14px; letter-spacing:.1em;
  font-family:var(--font-mono);
}
.steps-counter #stepsCounterNum { font-size:30px; font-weight:700; color:var(--violet); }
.steps-dots { display:none; gap:8px; margin-bottom:20px; }
.steps-dots button {
  background:rgba(255,255,255,0.1); border:none; color:var(--muted);
  padding:6px 12px; border-radius:100px; font-size:12px; cursor:pointer;
}
.steps-dots button.is-active { background:var(--violet); color:#000; font-weight:700; }

.step-item {
  padding:22px 0; opacity:.45; border-top:1px solid var(--line);
  transform:translateX(-14px);
  transition:opacity .5s, transform .5s cubic-bezier(.22,1,.36,1);
  cursor:pointer;
}
.step-item:hover { opacity:.75; }
.step-item:first-child { border-top:none; }
.step-item.is-active { opacity:1; transform:translateX(0); }
.step-num { font-size:12px; letter-spacing:.35em; color:var(--violet); margin-bottom:8px; font-family:var(--font-mono); font-weight:700; }
.step-item h3 { font-size:clamp(20px, 2.4vw, 30px); margin-bottom:8px; }
.step-item p { color:var(--muted-2); font-weight:400; font-size:15px; line-height:1.6; max-width:440px; }

.step-line {
  height:3px; max-width:440px; margin-top:14px; border-radius:3px; overflow:hidden;
  background:var(--line); opacity:0; transition:opacity .4s;
}
.step-item.is-active .step-line { opacity:1; }
.step-line-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--violet), var(--pink));
  box-shadow:0 0 10px rgba(154,138,251,.7);
}

.steps-phone { position:relative; display:flex; justify-content:center; }
.phone-glow {
  position:absolute; inset:-12%; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(154,138,251,.28), transparent 65%);
  filter:blur(30px);
}
.phone-frame {
  position:relative; z-index:1;
  width:min(420px, 85vw); min-height:420px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(160deg, rgba(30,28,38,.94), rgba(21,19,26,.94));
  border:1px solid var(--panel-border);
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 50px rgba(154,138,251,.15);
}
.step-video {
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s cubic-bezier(0.16, 1, 0.3, 1), visibility .5s;
}
.step-video.is-active { opacity:1; visibility:visible; pointer-events:auto; }

/* ─────────── Inside / Connected Architecture Rows ─────────── */
.exploded { padding:clamp(40px, 6vh, 90px) var(--space-inline); }
.exploded-head { text-align:center; margin-bottom:clamp(20px, 3.5vh, 44px); }
.inside-list {
  position:relative; max-width:var(--container); margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(12px, 2.2vh, 26px);
}
.inside-list::before {
  content:''; position:absolute; left:115px; top:-24px; bottom:-24px; width:3px;
  background:linear-gradient(180deg, transparent, var(--trace) 8%, var(--trace) 92%, transparent);
  border-radius:3px;
}
.i-row {
  display:grid; grid-template-columns:230px 1fr minmax(260px, 46%);
  align-items:center; gap:0; position:relative;
}
.i-tile {
  width:230px; height:clamp(92px, 13vh, 128px); border-radius:22px;
  background:linear-gradient(160deg, rgba(37,33,48,.96), rgba(22,19,28,.96));
  border:1px solid rgba(154,138,251,.28);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  position:relative; z-index:1;
  transition:border-color .35s, box-shadow .35s, transform .35s;
}
.i-tile:hover {
  transform:translateY(-3px);
  border-color:rgba(154,138,251,.6);
  box-shadow:0 24px 60px rgba(124,92,240,.25);
}
.i-tile img { width:clamp(38px, 6vh, 52px); height:clamp(38px, 6vh, 52px); object-fit:contain; }
.i-tile span { font-size:13.5px; letter-spacing:.08em; color:var(--muted-2); font-weight:500; font-family:var(--font-mono); }
.i-trace { height:54px; width:100%; align-self:center; overflow:visible; }
.i-trace .i-line {
  stroke:rgba(154,138,251,.62); stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.i-trace .i-pulse {
  stroke:#D6CCFF; stroke-width:4.2; opacity:0;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 7px rgba(154,138,251,1));
}
.i-trace .i-pad {
  stroke:#B4A6FF; stroke-width:8; stroke-linecap:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(154,138,251,.8));
}
.i-trace .i-pad.ring { stroke:rgba(154,138,251,.28); stroke-width:15; filter:none; }
.i-info h4 { font-size:clamp(16px, 1.8vw, 20px); margin-bottom:6px; color:#FFFFFF; }
.i-info p { font-size:14px; color:var(--muted-2); font-weight:400; line-height:1.6; }

/* ─────────── Features Matrix (Circuit Hub) ─────────── */
.features-wrap {
  position:relative; display:grid;
  grid-template-columns:1fr clamp(220px, 26vw, 360px) 1fr;
  align-items:stretch; max-width:var(--container); margin:0 auto;
}
.f-col { display:flex; flex-direction:column; gap:22px; justify-content:space-between; }
.f-card {
  display:flex; gap:16px; align-items:center;
  flex:1;
  background:linear-gradient(160deg, rgba(30,28,38,.92), rgba(21,19,26,.92));
  border:1px solid var(--line); border-radius:20px;
  padding:26px 26px;
  transition:transform .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s, box-shadow .4s;
}
.f-card:hover {
  transform:translateY(-4px); border-color:rgba(154,138,251,.4);
  box-shadow:0 16px 50px rgba(124,92,240,.18);
}
.f-icon {
  width:46px; height:46px; border-radius:13px;
  background:rgba(124,92,240,.12);
  border:1px solid rgba(154,138,251,.28);
  color:var(--violet); display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.f-card h3 { font-size:18px; margin-bottom:6px; color:#FFFFFF; }
.f-card p { color:var(--muted-2); font-weight:400; font-size:14px; line-height:1.55; }
.f-center { position:relative; min-height:420px; }
.f-net { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.f-chip {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(84px, 9vw, 110px);
}

/* ─────────── Signature AI Products (Sideways Rows + Floats) ─────────── */
.signature { padding:var(--space-section) var(--space-inline); overflow:hidden; }
.sig-row {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:minmax(280px, 1fr) minmax(280px, 1fr);
  gap:clamp(30px, 5vw, 90px); align-items:center;
}
.sig-connector {
  max-width:var(--container); margin:0 auto; height:clamp(120px, 18vh, 200px);
}
.sig-connector svg { width:100%; height:100%; overflow:visible; }
.sig-connector path {
  stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round;
}
.sig-connector path[data-pulse] {
  stroke:#D6CCFF; stroke-width:4.6;
  filter:drop-shadow(0 0 9px rgba(154,138,251,1));
}
.sig-rev .sig-copy { order:2; }
.sig-rev .sig-card-preview, .sig-rev .sig-phone { order:1; }
.sig-badge {
  display:inline-block; margin-bottom:18px;
  font-size:11.5px; font-weight:700; letter-spacing:.26em;
  padding:9px 16px; border-radius:100px; color:#fff;
  background:linear-gradient(120deg, var(--violet), var(--pink));
  box-shadow:0 8px 26px rgba(154,138,251,.4);
  font-family:var(--font-mono);
}
.sig-copy h3 { font-size:clamp(26px, 3.2vw, 44px); line-height:1.12; margin-bottom:18px; color:#FFFFFF; }
.sig-copy h3 .lav { color:var(--violet); }
.sig-copy p { color:var(--muted-2); font-size:clamp(15px, 1.5vw, 17.5px); line-height:1.65; margin-bottom:22px; }
.sig-copy ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.sig-copy li {
  position:relative; padding-left:26px;
  color:var(--muted-2); font-size:14.5px; line-height:1.5;
}
.sig-copy li::before {
  content:''; position:absolute; left:0; top:7px;
  width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg, var(--violet), var(--pink));
  box-shadow:0 0 10px rgba(154,138,251,.6);
}
.sig-card-preview {
  position:relative;
  background:linear-gradient(160deg, rgba(30,28,38,.92), rgba(21,19,26,.92));
  border:1px solid var(--panel-border); border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:0 34px 80px rgba(0,0,0,.6), 0 0 60px rgba(124,92,240,.2);
  will-change:transform;
  transition:border-color .35s, box-shadow .35s;
}
.sig-card-preview:hover {
  border-color:rgba(154,138,251,.55);
  box-shadow:0 34px 80px rgba(0,0,0,.6), 0 0 70px rgba(124,92,240,.35);
}

/* ─────────── Glass Panels & Forms ─────────── */
.glass-panel {
  background: linear-gradient(160deg, rgba(30,28,38,.92), rgba(21,19,26,.92));
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(154,138,251,0.08);
}
.form-group { margin-bottom: 22px; }
.form-label {
  display: block; margin-bottom: 8px; font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--violet);
  font-family: var(--font-mono);
}
.form-control {
  width: 100%; padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  color: #FFFFFF; font-family: inherit; font-size: 0.95rem;
  outline: none; transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.form-control:focus {
  border-color: var(--violet);
  background: rgba(154,138,251,0.08);
  box-shadow: 0 0 20px rgba(154,138,251,0.3);
}

/* ─────────── Impact & Trust Metrics (Senthora-Parity) ─────────── */
.impact-section, .trust-section {
  padding: var(--space-section) var(--space-inline);
  position: relative;
}
.pill-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 20px; border-radius: 100px;
  background: rgba(204, 51, 102, 0.08);
  border: 1px solid rgba(204, 51, 102, 0.35);
  color: var(--pink); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  font-family: var(--font-mono); margin-bottom: 22px;
  box-shadow: 0 0 20px rgba(204, 51, 102, 0.2);
}
.pill-badge.violet {
  background: rgba(154, 138, 251, 0.08);
  border-color: rgba(154, 138, 251, 0.35);
  color: var(--violet);
  box-shadow: 0 0 20px rgba(154, 138, 251, 0.2);
}

.metrics-title {
  font-size: clamp(32px, 4.8vw, 62px); font-weight: 800;
  letter-spacing: -0.02em; text-align: center; margin-bottom: 48px;
  color: #FFFFFF; text-transform: uppercase;
}
.metrics-title .accent-pink {
  background: linear-gradient(100deg, #FF4081, #A855F7, #38BDF8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metrics-title .accent-violet {
  background: linear-gradient(100deg, #FF4081, #9A8AFB, #38BDF8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.metrics-subheading {
  font-size: clamp(22px, 2.8vw, 36px); font-weight: 800;
  letter-spacing: -0.01em; text-align: center; margin: 64px 0 36px;
  color: #FFFFFF; text-transform: uppercase;
}
.metrics-subheading .accent-cyan {
  background: linear-gradient(100deg, #EC4899, #38BDF8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.impact-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  max-width: var(--container); margin: 0 auto;
}

.impact-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  max-width: 960px; margin: 0 auto;
}

.metric-card {
  position: relative;
  background: linear-gradient(165deg, rgba(28, 25, 36, 0.88), rgba(18, 16, 23, 0.88));
  border: 1px solid rgba(154, 138, 251, 0.16);
  border-radius: 24px;
  padding: clamp(32px, 4.5vh, 48px) 24px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
  overflow: hidden;
}
.metric-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(154, 138, 251, 0.14), transparent 70%);
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.metric-card:hover {
  transform: translateY(-6px);
  border-color: rgba(154, 138, 251, 0.5);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 35px rgba(154, 138, 251, 0.25);
}
.metric-card:hover::before {
  opacity: 1;
}

.metric-card.featured-pink {
  border-color: rgba(204, 51, 102, 0.7);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 35px rgba(204, 51, 102, 0.3);
}
.metric-card.featured-pink:hover {
  border-color: #FF4081;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 55px rgba(204, 51, 102, 0.55);
}

.metric-icon-wrap {
  width: 48px; height: 48px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
}
.metric-icon-wrap svg {
  width: 36px; height: 36px;
}

.metric-number {
  font-size: clamp(34px, 4.2vw, 54px); font-weight: 800;
  line-height: 1; margin-bottom: 12px;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, #E066FF, #7B68F0, #38BDF8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-family: var(--font-sans);
}
.metric-card.featured-pink .metric-number {
  background: linear-gradient(120deg, #FF4081, #A855F7, #38BDF8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.metric-label {
  font-size: 11.5px; font-weight: 700;
  color: var(--muted-2); letter-spacing: 0.16em;
  text-transform: uppercase; font-family: var(--font-mono);
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .impact-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .impact-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .impact-grid-4 { grid-template-columns: 1fr; }
  .impact-grid-3 { grid-template-columns: 1fr; }
}

/* ─────────── Final CTA ─────────── */
.cta {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--space-section) var(--space-inline);
}
.cta-title { font-size:clamp(34px, 5.6vw, 84px); line-height:1.08; margin-bottom:40px; max-width:1100px; }
.cta-title .line { display:block; overflow:hidden; }

/* ─────────── Scroll to top ─────────── */
.to-top {
  position:fixed; right:26px; bottom:26px; z-index:80;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(145deg, #BCA9FF 0%, #8F7BF7 45%, #6A4EE8 100%);
  border:1px solid rgba(255,255,255,.3);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(124,92,240,.45);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .35s, transform .35s, visibility .35s, box-shadow .35s;
}
.to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover { box-shadow:0 14px 44px rgba(124,92,240,.75); }

/* ─────────── Statement Scrub Text ─────────── */
.statement-text {
  font-size: clamp(28px, 4.5vw, 64px);
  line-height: 1.25;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 40px;
}
.statement-text .word {
  opacity: 0.15;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0.4s ease;
}
.statement-text .word.is-on {
  opacity: 1;
  text-shadow: 0 0 24px rgba(255,255,255,0.4);
}
.statement-net .s-pulse {
  opacity: 0;
}

/* ─────────── Responsive Queries ─────────── */
@media (max-width: 1080px) {
  .steps-body { gap:28px; }
  .features-wrap { grid-template-columns:1fr clamp(170px, 20vw, 240px) 1fr; }
  .f-card { padding:20px; }
  .i-row { grid-template-columns:230px 1fr minmax(240px, 50%); }
  .i-tile { width:230px; }
  .inside-list::before { left:115px; }
}

@media (max-width: 900px) {
  .nav-links { display:none; }
  .nav { padding:16px 18px; }
  .hero { padding-top:88px; }
  .sig-row { grid-template-columns:1fr; gap:34px; }
  .sig-rev .sig-copy { order:1; }
  .sig-rev .sig-card-preview, .sig-rev .sig-phone { order:2; }
  .features-wrap { grid-template-columns:1fr; gap:20px; }
  .f-center { display:none; }
  .i-row { grid-template-columns:1fr; gap:16px; }
  .inside-list::before, .i-trace { display:none; }
  .i-tile { width:100%; }
  .steps-body { grid-template-columns:1fr; }
}