@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

/* ════════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════════ */
:root {
  /* Dark palette */
  --c-bg:      #0E0E16;
  --c-bg-2:    #11121A;
  --c-bg-3:    #161720;
  --c-bg-4:    #1C1E28;
  --c-bg-5:    #232638;
  --c-bg-card: #191B26;

  /* Borders */
  --c-border:  #25273A;
  --c-border-2:#323650;

  /* Text */
  --c-text:    #F2F4FA;
  --c-text-2:  #CDD0E0;
  --c-text-3:  #A3A8C0;
  --c-text-4:  #686E8A;

  /* Silver */
  --c-silver:  #B4BAD0;

  /* Purple accent */
  --c-purple:     #7C5CFF;
  --c-purple-2:   #9E85FF;
  --c-purple-3:   #5A3ECC;
  --c-purple-glow: rgba(124,92,255,0.22);
  --c-purple-dim:  rgba(124,92,255,0.08);
  --c-purple-faint:rgba(124,92,255,0.04);

  /* Orange accent */
  --c-orange:      #FF7A1A;
  --c-orange-2:    #FF9A50;
  --c-orange-glow: rgba(255,122,26,0.22);
  --c-orange-dim:  rgba(255,122,26,0.08);

  /* Blue accent */
  --c-blue:     #4DA3FF;
  --c-blue-glow:rgba(77,163,255,0.15);

  /* Fonts */
  --ff-display: 'Space Grotesk', system-ui, sans-serif;
  --ff-body:    'DM Sans', system-ui, sans-serif;

  /* Radius */
  --r:    10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Easing */
  --ease:       cubic-bezier(.4,0,.2,1);
  --ease-out:   cubic-bezier(0,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ════════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* ════════════════════════════════════════════════
   CURSOR GLOW  (legacy — kept for fallback)
════════════════════════════════════════════════ */
.cursor-glow {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(124,92,255,.06) 0%,
    rgba(124,92,255,.02) 40%,
    transparent 70%
  );
  transform: translate(-50%,-50%);
  transition: left .18s linear, top .18s linear;
  mix-blend-mode: screen;
  will-change: left, top;
}

/* ════════════════════════════════════════════════
   CUSTOM CURSOR  (v2 — dot + ring)
════════════════════════════════════════════════ */
#cx-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--c-purple-2);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  will-change: transform;
  mix-blend-mode: normal;
}

#cx-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1.5px solid var(--c-purple);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  opacity: 0.7;
}

/* Hide native cursor on desktop when custom one is active */
@media (min-width: 769px) {
  body:has(#cx-dot) { cursor: none; }
  body:has(#cx-dot) a,
  body:has(#cx-dot) button,
  body:has(#cx-dot) [role="button"] { cursor: none; }
}

/* ════════════════════════════════════════════════
   TYPOGRAPHY
════════════════════════════════════════════════ */
.display-xl {
  font-family: var(--ff-display);
  font-size: clamp(44px, 6vw, 82px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.display-lg {
  font-family: var(--ff-display);
  font-size: clamp(34px, 4.5vw, 60px);
  font-weight: 700;
  line-height: 1.10;
  letter-spacing: -0.028em;
}

.display-md {
  font-family: var(--ff-display);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
}

.grad-text {
  background: linear-gradient(130deg, #ffffff 0%, #C4B0FF 55%, #9E85FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero headline gets full purple → orange pop */
.grad-hero {
  background: linear-gradient(125deg, #ffffff 0%, #9E85FF 45%, #FF7A1A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.grad-purple {
  background: linear-gradient(135deg, var(--c-purple-2) 0%, var(--c-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.eyebrow {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-purple-2);
}

.lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--c-text-3);
}

/* ════════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════════ */
.container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 44px;
}

.container-narrow {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: 44px;
}

.section-pad { padding-block: 110px; }
.section-pad-sm { padding-block: 76px; }

/* ════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: var(--r);
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .25s var(--ease);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* Shimmer sweep on hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .4s var(--ease);
}
.btn:hover::after { transform: translateX(100%); }

.btn-primary {
  background: var(--c-purple);
  color: #fff;
  box-shadow: 0 0 22px var(--c-purple-glow);
}
.btn-primary:hover {
  background: var(--c-purple-2);
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(124,92,255,.40), 0 8px 24px rgba(124,92,255,.20);
}

.btn-orange {
  background: var(--c-orange);
  color: #fff;
  box-shadow: 0 0 22px var(--c-orange-glow);
}
.btn-orange:hover {
  background: var(--c-orange-2);
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(255,122,26,.35), 0 8px 24px rgba(255,122,26,.18);
}

.btn-ghost {
  background: transparent;
  color: var(--c-text-2);
  border: 1px solid var(--c-border-2);
}
.btn-ghost:hover {
  border-color: var(--c-purple);
  color: var(--c-text);
  box-shadow: 0 0 18px var(--c-purple-dim), inset 0 0 20px var(--c-purple-faint);
}

.btn-arrow::after { transform: none; background: none; }
.btn-arrow-icon {
  transition: transform .2s var(--ease);
  font-style: normal;
}
.btn:hover .btn-arrow-icon { transform: translateX(4px); }

/* magnetic wrapper */
.magnetic { display:inline-block; }

/* ════════════════════════════════════════════════
   PRELOADER (Immersive-style intro)
════════════════════════════════════════════════ */
.preloader {
  display: none;
}

.preloader-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-purple), var(--c-orange));
  width: 0%;
  transition: width .3s ease;
}

.preloader-text {
  display: flex;
  gap: 8px;
  font-family: var(--ff-head);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  overflow: hidden;
}

.preloader-word {
  display: inline-block;
  transform: translateY(110%);
  color: var(--c-text);
}

.preloader-word--em {
  color: var(--c-purple-2);
}

.preloader.is-done {
  pointer-events: none;
}

/* ── Hero word-by-word split text ── */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 4px;
}
.word {
  display: inline-block;
  will-change: transform;
}

/* ── Section line dividers ── */
.section-line {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-purple) 30%, var(--c-orange) 70%, transparent 100%);
  opacity: 0.25;
  transform: scaleX(0);
  transform-origin: center;
  margin: 0 auto;
  max-width: 900px;
}

/* ════════════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 500;
  height: 70px;
  display: flex;
  align-items: center;
  background: rgba(11,11,15,.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--c-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 44px;
}

.nav-logo {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo-icon { flex-shrink: 0; }
.nav-logo em { font-style:normal; color:var(--c-purple-2); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 38px;
  list-style: none;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-3);
  position: relative;
  transition: color .2s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--c-purple-2);
  transition: width .25s var(--ease);
}

.nav-links a:hover,
.nav-links a.active { color: var(--c-text); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-cta {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  background: var(--c-bg-4);
  color: var(--c-text-2);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r);
  transition: all .22s;
}
.nav-cta:hover {
  background: var(--c-purple);
  color: #fff;
  border-color: var(--c-purple);
  box-shadow: 0 0 20px var(--c-purple-glow);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-text-3);
  border-radius: 2px;
  transition: all .3s;
}

.nav-mobile {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  background: var(--c-bg-3);
  border-bottom: 1px solid var(--c-border);
  padding: 28px 44px 36px;
  z-index: 499;
}
.nav-mobile.open { display: block; }
.nav-mobile ul { list-style:none; }
.nav-mobile ul li { padding: 13px 0; border-bottom: 1px solid var(--c-border); }
.nav-mobile ul li a { font-size:16px; font-weight:500; color:var(--c-text-2); }
.nav-mobile .btn { margin-top:22px; width:100%; justify-content:center; }

/* ════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-bg);
}

#hero-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(13,14,20,0.2) 0%, rgba(13,14,20,0.55) 70%);
  z-index: 1;
  pointer-events: none;
}

/* hero pseudo-elements removed — canvas handles background */

.hero-content {
  position: relative;
  z-index: 2;
  padding: 80px 60px 80px 44px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-purple-dim);
  border: 1px solid rgba(124,92,255,.22);
  color: var(--c-purple-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 32px;
}

.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--c-purple-2);
  border-radius: 50%;
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.7)}
}

.hero h1 { margin-bottom:24px; }
.hero h1 em { font-style:normal; color:var(--c-purple-2); }

.hero-sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--c-text-3);
  max-width: 520px;
  margin-bottom: 44px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 64px;
  padding-top: 44px;
  border-top: 1px solid var(--c-border);
}

.hero-stat-num {
  font-family: var(--ff-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1;
  letter-spacing: -.03em;
}

.hero-stat-label {
  font-size: 13px;
  color: var(--c-text-4);
  margin-top: 5px;
}

/* ── Hero side floating elements (Google Ads style) ── */
.hero-side {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 2;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  pointer-events: none;
}
.hero-side--left  { left: 32px; align-items: flex-start; }
.hero-side--right { right: 32px; align-items: flex-end; }

.hero-float {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(19,20,27,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 12px 16px;
  animation: heroFloat 7s ease-in-out infinite;
  opacity: 0;
  animation-fill-mode: forwards;
}

.hero-float span {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: .02em;
  white-space: nowrap;
}

.hero-float--1 { animation-delay: 0.3s; }
.hero-float--2 { animation-delay: 1.0s; }
.hero-float--3 { animation-delay: 1.8s; padding: 14px; }
.hero-float--4 { animation-delay: 2.5s; }
.hero-float--5 { animation-delay: 0.6s; }
.hero-float--6 { animation-delay: 1.4s; }
.hero-float--7 { animation-delay: 2.1s; }
.hero-float--8 { animation-delay: 2.8s; }

@keyframes heroFloat {
  0%   { opacity: 0; transform: translateY(20px); }
  8%   { opacity: 0.7; transform: translateY(0); }
  50%  { opacity: 0.7; transform: translateY(-8px); }
  92%  { opacity: 0.7; transform: translateY(0); }
  100% { opacity: 0.7; transform: translateY(0); }
}

.hero-content--center {
  text-align: center;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* ════════════════════════════════════════════════
   TICKER
════════════════════════════════════════════════ */
.ticker {
  overflow: hidden;
  background: var(--c-bg-3);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding-block: 14px;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 32s linear infinite;
}

.ticker-item {
  white-space: nowrap;
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-4);
  padding-inline: 36px;
}

.ticker-item span { color: var(--c-orange); margin-inline: 10px; }
.ticker-item:nth-child(even) span { color: var(--c-purple-2); }

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ════════════════════════════════════════════════
   SECTION LABEL
════════════════════════════════════════════════ */
.section-intro {
  margin-bottom: 64px;
}

/* ════════════════════════════════════════════════
   SERVICE BLOCKS
════════════════════════════════════════════════ */
.services-wrapper {
  border-top: 1px solid var(--c-border);
}

.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
  border-bottom: 1px solid var(--c-border);
}
.service-block:last-child { border-bottom: none; }
.service-block.flip { direction: rtl; }
.service-block.flip > * { direction: ltr; }

.service-text {
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-4);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.service-num::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--c-purple);
}

.service-text h3 {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 16px;
  color: var(--c-text);
}

.service-text p {
  font-size: 15px;
  line-height: 1.72;
  color: var(--c-text-3);
  margin-bottom: 28px;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.tag-dark {
  display: inline-block;
  padding: 5px 12px;
  background: var(--c-bg-4);
  border: 1px solid var(--c-border);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-4);
  transition: all .2s;
}
.tag-dark:hover {
  border-color: var(--c-purple);
  color: var(--c-purple-2);
}

.service-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-purple-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s var(--ease);
}
.service-link:hover { gap: 12px; }

.service-visual {
  background: linear-gradient(145deg, var(--c-bg-3) 0%, rgba(124,92,255,.06) 100%);
  border-left: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  overflow: hidden;
  position: relative;
  transition: background .3s;
}

.service-block:hover .service-visual {
  background: linear-gradient(145deg, var(--c-bg-4) 0%, rgba(124,92,255,.10) 100%);
}

.service-block.flip .service-visual {
  border-left: none;
  border-right: 1px solid var(--c-border);
}

/* Visual motifs */
.motif-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 160px;
  width: 100%;
  max-width: 280px;
}

.motif-bar {
  flex: 1;
  background: linear-gradient(to top, rgba(124,92,255,.75), rgba(124,92,255,.22));
  border-radius: 3px 3px 0 0;
  border-top: 2px solid var(--c-purple-2);
  transition: height 1s var(--ease-out);
  position: relative;
  box-shadow: 0 -6px 18px rgba(124,92,255,.35);
}

.motif-bar:nth-child(odd) {
  background: linear-gradient(to top, rgba(255,122,26,.65), rgba(255,122,26,.18));
  border-top-color: var(--c-orange-2);
  box-shadow: 0 -6px 18px rgba(255,122,26,.28);
}

.motif-bars-label {
  font-size: 11px;
  color: var(--c-text-4);
  text-align: center;
  margin-top: 12px;
  letter-spacing: .08em;
  font-weight: 600;
  text-transform: uppercase;
}

.motif-timeline { width: 100%; max-width: 280px; }

.tl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-purple);
  flex-shrink: 0;
  box-shadow: 0 0 10px var(--c-purple), 0 0 20px rgba(124,92,255,.3);
}

.tl-track {
  flex: 1;
  height: 2px;
  background: var(--c-border);
  border-radius: 2px;
  overflow: hidden;
}

.tl-fill {
  height: 100%;
  background: linear-gradient(to right, var(--c-purple), var(--c-blue));
  border-radius: 2px;
  width: 0;
  transition: width 1.2s var(--ease);
}

.tl-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-4);
  width: 60px;
  text-align: right;
}

.motif-nodes { position:relative; width:240px; height:180px; }

.motif-report { width:100%; max-width:280px; }

.rp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
}
.rp-row:last-child { border-bottom: none; }
.rp-key { font-size:13px; color:var(--c-text-4); }
.rp-val { font-family:var(--ff-display); font-size:14px; font-weight:700; color:var(--c-text); }
.rp-val.green { color:#34d399; }
.rp-val.orange { color:var(--c-orange-2); }

/* ════════════════════════════════════════════════
   STATS SECTION
════════════════════════════════════════════════ */
.stats-section {
  background: var(--c-bg-3);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding-block: 110px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 56px;
}

.stat-card {
  background: var(--c-bg-4);
  padding: 56px 44px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
}

.stat-card:hover { background: var(--c-bg-5); }

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-purple), var(--c-orange), transparent);
  opacity: .35;
  transition: opacity .3s;
}

.stat-card:hover::before { opacity: 1; }

.stat-big {
  font-family: var(--ff-display);
  font-size: clamp(52px, 5.5vw, 80px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(125deg, #ffffff 0%, #C4B0FF 60%, #9E85FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.stat-big em {
  font-style: normal;
  background: linear-gradient(125deg, #FF9A50 0%, #FF7A1A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-desc {
  font-size: 14px;
  color: var(--c-text-4);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════
   PROCESS SECTION
════════════════════════════════════════════════ */
.process-section {
  background: var(--c-bg-2);
  padding-block: 110px;
  border-bottom: 1px solid var(--c-border);
}

.process-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 80px;
}

.process-steps-wrap {
  position: relative;
}

.process-connector {
  position: absolute;
  top: 26px;
  left: calc(12.5% + 26px);
  right: calc(12.5% + 26px);
  height: 1px;
  background: linear-gradient(to right, var(--c-border), var(--c-purple-dim), var(--c-border));
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}

.process-step { padding: 0 20px; }

.step-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-bg-4);
  border: 1px solid rgba(124,92,255,.30);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-purple-2);
  margin-bottom: 28px;
  transition: all .3s;
  position: relative;
  box-shadow: 0 0 14px rgba(124,92,255,.10);
}

.step-circle::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-purple), transparent);
  opacity: 0;
  transition: opacity .3s;
  z-index: -1;
}

.process-step:hover .step-circle {
  background: var(--c-purple-dim);
  border-color: var(--c-purple);
  color: var(--c-purple-2);
  box-shadow: 0 0 20px var(--c-purple-glow);
}
.process-step:hover .step-circle::before { opacity: 1; }

.process-step h4 {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-2);
  margin-bottom: 10px;
  letter-spacing: -.01em;
  transition: color .2s;
}

.process-step:hover h4 { color: var(--c-text); }

.process-step p {
  font-size: 14px;
  color: var(--c-text-4);
  line-height: 1.65;
}

/* ════════════════════════════════════════════════
   CTA SECTION
════════════════════════════════════════════════ */
.cta-section {
  background: var(--c-bg);
  padding-block: 110px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse at center,
    rgba(124,92,255,.30) 0%,
    rgba(255,122,26,.14) 45%,
    transparent 68%
  );
  pointer-events: none;
}

/* Second bottom glow */
.cta-section::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse at center,
    rgba(255,122,26,.10) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.cta-section .eyebrow { margin-bottom: 16px; }
.cta-section .display-md { color: var(--c-text); margin-bottom: 16px; }
.cta-section .lead { max-width: 480px; margin: 0 auto 44px; }

.cta-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ════════════════════════════════════════════════
   PAGE HERO (inner pages)
════════════════════════════════════════════════ */
.page-hero {
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-border);
  padding-block: 88px;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(124,92,255,.16) 0%, rgba(255,122,26,.06) 45%, transparent 68%);
  pointer-events: none;
}

.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero h1 { margin-bottom: 20px; color: var(--c-text); }
.page-hero .lead { max-width: 560px; }

/* Extra dark page hero */
.page-hero-xdark {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  padding-block: 100px;
  position: relative;
  overflow: hidden;
}
.page-hero-xdark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124,92,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,255,.035) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.page-hero-xdark::after {
  content: '';
  position: absolute;
  top: -120px;
  left: 10%;
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(124,92,255,.10) 0%, transparent 65%);
  pointer-events: none;
}

/* ════════════════════════════════════════════════
   DARK CARDS
════════════════════════════════════════════════ */
.dark-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  position: relative;
  transition: border-color .3s, box-shadow .3s, transform .25s var(--ease);
}

.dark-card:hover {
  border-color: var(--c-border-2);
  box-shadow: 0 0 40px rgba(124,92,255,.08), 0 8px 32px rgba(0,0,0,.4);
  transform: translateY(-2px);
}

/* Gradient border on hover */
.dark-card-glow {
  background: var(--c-bg-card);
  border-radius: var(--r-lg);
  position: relative;
  isolation: isolate;
  transition: transform .25s var(--ease);
}

.dark-card-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--c-border), transparent 50%, var(--c-border));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: background .3s;
}

.dark-card-glow:hover::before {
  background: linear-gradient(135deg, var(--c-purple), transparent 50%, var(--c-orange));
}

.dark-card-glow:hover { transform: translateY(-3px); }

/* Tiltable cards */
.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0) rotateY(0);
  transition: transform .1s linear;
}

/* ════════════════════════════════════════════════
   TECHNOLOGY PAGE
════════════════════════════════════════════════ */
.tech-bg {
  background: var(--c-bg);
}

.tech-flow-section {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding-block: 110px;
}

.flow-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow-x: hidden;
  padding-block: 20px;
}

.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.flow-box {
  background: var(--c-bg-card);
  border: 1px solid rgba(124,92,255,.22);
  border-radius: var(--r-md);
  padding: 22px 20px;
  text-align: center;
  width: 148px;
  cursor: default;
  transition: all .3s var(--ease);
  position: relative;
}

.flow-box:hover {
  border-color: var(--c-purple);
  background: var(--c-bg-4);
  box-shadow: 0 0 28px var(--c-purple-glow), 0 0 0 1px var(--c-purple-dim);
  transform: translateY(-5px);
}

.flow-box.accent {
  background: linear-gradient(145deg, rgba(124,92,255,.14), rgba(124,92,255,.06));
  border-color: rgba(124,92,255,.45);
  box-shadow: 0 0 20px rgba(124,92,255,.15);
}

.flow-box.accent:hover {
  box-shadow: 0 0 32px var(--c-purple-glow);
}

.flow-icon { font-size: 24px; margin-bottom: 12px; display:block; }
.flow-title { font-size: 12px; font-weight: 700; color: var(--c-text-2); line-height:1.4; }
.flow-sub   { font-size: 11px; color: var(--c-text-4); margin-top: 4px; }

.flow-arrow {
  display: flex;
  align-items: center;
  padding-inline: 8px;
  flex-shrink: 0;
}

.flow-line {
  width: 36px;
  height: 1px;
  background: var(--c-border-2);
  position: relative;
  overflow: visible;
}

.flow-line::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--c-border-2);
  border-right: 1.5px solid var(--c-border-2);
  transform: rotate(45deg);
}

/* Animated flow line */
.flow-line-animated {
  position: absolute;
  left: 0; top: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(to right, var(--c-purple), var(--c-blue));
  animation: flowFill 2s ease forwards;
  animation-delay: var(--d, 0s);
}

@keyframes flowFill {
  to { width: 100%; }
}

/* Tech use cases grid */
.tech-cases {
  background: var(--c-bg-3);
  border-bottom: 1px solid var(--c-border);
  padding-block: 110px;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 56px;
}

.tech-case {
  background: var(--c-bg-4);
  padding: 44px 36px;
  transition: background .3s;
  position: relative;
}

.tech-case::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--c-purple), var(--c-blue));
  transform: scaleX(.25);
  opacity: .5;
  transition: transform .3s var(--ease), opacity .3s;
  transform-origin: left;
}

.tech-case:hover::before { transform: scaleX(1); opacity: 1; }
.tech-case:hover { background: var(--c-bg-5); }

.tc-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: linear-gradient(to right, var(--c-purple-2), var(--c-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
}

.tech-case h3 {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 12px;
  letter-spacing: -.01em;
}

.tech-case p {
  font-size: 14px;
  color: var(--c-text-4);
  line-height: 1.7;
  margin-bottom: 20px;
}

.tech-case ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.tech-case li {
  font-size: 13px;
  color: var(--c-text-3);
  display: flex;
  gap: 10px;
}
.tech-case li::before { content:'→'; color:var(--c-purple); flex-shrink:0; }

/* Do / Don't */
/* Do / Don't — Accordion */
.do-dont-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.do-dont-accordion details {
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-bg-4);
  overflow: hidden;
  transition: border-color .3s;
}
.do-dont-accordion details[open] { border-color: rgba(124,92,255,.3); }

.do-dont-accordion summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 28px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.do-dont-accordion summary::-webkit-details-marker { display: none; }

.acc-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.acc-icon--do   { background: rgba(52,211,153,.12); color: #34d399; }
.acc-icon--dont { background: rgba(248,113,113,.12); color: #f87171; }

.acc-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--c-text-1);
  flex: 1;
}

.acc-chevron {
  color: var(--c-text-3);
  transition: transform .3s;
  flex-shrink: 0;
}
details[open] .acc-chevron { transform: rotate(180deg); }

.acc-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 28px 24px 74px;
}
.acc-list li {
  font-size: 14px;
  color: var(--c-text-3);
  display: flex; gap: 10px; align-items: flex-start;
}
.acc-do .acc-list li::before   { content:'✓'; color:#34d399; flex-shrink:0; font-weight:700; }
.acc-dont .acc-list li::before { content:'✕'; color:#f87171; flex-shrink:0; font-weight:700; }

/* Compliance box */
.compliance-box {
  background: linear-gradient(135deg, rgba(124,92,255,.09) 0%, rgba(255,122,26,.06) 100%);
  border: 1px solid rgba(124,92,255,.28);
  border-radius: var(--r-lg);
  padding: 40px 44px;
  margin-top: 56px;
  box-shadow: 0 0 40px rgba(124,92,255,.08);
}

.compliance-box h3 {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 12px;
}

.compliance-box p {
  font-size: 15px;
  color: var(--c-text-3);
  line-height: 1.75;
}

/* Security grid */
.security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 56px;
}

.sec-card {
  background: var(--c-bg-4);
  padding: 40px 36px;
  transition: background .3s;
}
.sec-card:hover { background: var(--c-bg-5); }
.sec-card h3 { font-size:18px; color:var(--c-text); margin-bottom:12px; letter-spacing:-.01em; }
.sec-card p  { font-size:14px; color:var(--c-text-4); line-height:1.75; }

/* ════════════════════════════════════════════════
   ABOUT PAGE
════════════════════════════════════════════════ */
.about-intro {
  padding-block: 110px;
  border-bottom: 1px solid var(--c-border);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: start;
}

.about-body {
  font-size: 17px;
  line-height: 1.78;
  color: var(--c-text-3);
}
.about-body + .about-body { margin-top: 20px; }

.about-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.am-cell {
  background: var(--c-bg-4);
  padding: 40px 32px;
  transition: background .3s;
}
.am-cell:hover { background: var(--c-bg-5); }

.am-num {
  font-family: var(--ff-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(125deg, #ffffff 0%, #C4B0FF 65%, #9E85FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}
.am-num em {
  font-style: normal;
  background: linear-gradient(125deg, #FF9A50, #FF7A1A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.am-label { font-size: 13px; color: var(--c-text-4); }

.principles-section {
  padding-block: 110px;
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-border);
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 56px;
}

.principle {
  background: var(--c-bg-4);
  padding: 40px 36px;
  transition: background .3s;
  position: relative;
}
.principle:hover { background: var(--c-bg-5); }

.principle-n {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-family: var(--ff-display);
  background: linear-gradient(125deg, #9E85FF, #FF7A1A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

.principle h3 {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text-2);
  margin-bottom: 10px;
  letter-spacing: -.01em;
  transition: color .2s;
}
.principle:hover h3 { color: var(--c-text); }
.principle p { font-size: 14px; color: var(--c-text-4); line-height: 1.65; }

/* ════════════════════════════════════════════════
   CONTACT PAGE
════════════════════════════════════════════════ */
.contact-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 88px;
  align-items: start;
  padding-block: 110px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-4);
  margin-bottom: 9px;
}

.form-input {
  width: 100%;
  padding: 13px 18px;
  background: var(--c-bg-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--c-text);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  appearance: none;
}

.form-input::placeholder { color: var(--c-text-4); }
.form-input:focus {
  border-color: var(--c-purple);
  box-shadow: 0 0 0 3px var(--c-purple-faint), 0 0 16px var(--c-purple-dim);
}

select.form-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23686E8A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
}

textarea.form-input {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom: 20px; }

.info-card {
  background: var(--c-bg-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
  transition: border-color .25s;
}

.info-card:hover { border-color: var(--c-border-2); }

.info-icon-wrap {
  width: 44px;
  height: 44px;
  background: var(--c-bg-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: all .25s;
}

.info-card:hover .info-icon-wrap {
  background: var(--c-purple-dim);
  border-color: rgba(124,92,255,.3);
}

.info-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-4); margin-bottom:4px; }
.info-val   { font-size:15px; font-weight:500; color:var(--c-text-2); }
.info-val a { color:var(--c-purple-2); transition:color .2s; }
.info-val a:hover { color:var(--c-text); }

/* ════════════════════════════════════════════════
   LEGAL PAGES
════════════════════════════════════════════════ */
.legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
  align-items: start;
  padding-block: 80px;
}

.legal-toc {
  position: sticky;
  top: 90px;
}

.legal-toc h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-4);
  margin-bottom: 16px;
}

.legal-toc ul { list-style:none; display:flex; flex-direction:column; gap:2px; }
.legal-toc a {
  font-size: 13px;
  color: var(--c-text-4);
  padding: 6px 10px;
  border-radius: 6px;
  display: block;
  border-left: 2px solid transparent;
  transition: all .2s;
}
.legal-toc a:hover {
  color: var(--c-text-2);
  background: var(--c-bg-4);
  border-left-color: var(--c-purple);
}

.legal-content h2 {
  font-family: var(--ff-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--c-text);
  margin-top: 52px;
  margin-bottom: 14px;
  padding-top: 52px;
  border-top: 1px solid var(--c-border);
  letter-spacing: -.01em;
}

.legal-content h2:first-child { margin-top:0; padding-top:0; border-top:none; }

.legal-content h3 {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text-2);
  margin-top: 28px;
  margin-bottom: 10px;
}

.legal-content p {
  font-size: 15px;
  color: var(--c-text-3);
  line-height: 1.78;
  margin-bottom: 14px;
}

.legal-content ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.legal-content li {
  font-size: 15px;
  color: var(--c-text-3);
  line-height: 1.72;
  margin-bottom: 8px;
}

.legal-content strong { color:var(--c-text-2); font-weight:600; }
.legal-content a { color:var(--c-purple-2); text-decoration:underline; }

/* ════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════ */
footer {
  background: var(--c-bg);
  border-top: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
  padding-top: 72px;
  padding-bottom: 44px;
}

footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--c-purple) 30%, var(--c-orange) 70%, transparent 100%);
  opacity: .5;
}

.footer-top {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 88px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 36px;
}

.footer-logo {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-logo-icon { flex-shrink: 0; }
.footer-logo em { font-style:normal; color:var(--c-purple-2); }

.footer-desc {
  font-size: 14px;
  color: var(--c-text-4);
  line-height: 1.65;
  margin-top: 12px;
}

.footer-email {
  font-size: 13px;
  color: var(--c-text-4);
  margin-top: 8px;
  display: block;
  transition: color .2s;
}
.footer-email:hover { color: var(--c-purple-2); }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer-nav-col h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-4);
  margin-bottom: 18px;
}

.footer-nav-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-nav-col a {
  font-size: 14px;
  color: var(--c-text-4);
  transition: color .2s;
  position: relative;
  display: inline-flex;
}
.footer-nav-col a:hover { color: var(--c-text-2); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--c-text-4);
  flex-wrap: wrap;
  gap: 8px;
}

/* ════════════════════════════════════════════════
   SCROLL REVEAL SYSTEM
════════════════════════════════════════════════ */
.reveal.visible {
  opacity: 1;
  transform: none;
}

.rd1 { transition-delay:.1s; }
.rd2 { transition-delay:.2s; }
.rd3 { transition-delay:.3s; }
.rd4 { transition-delay:.4s; }
.rd5 { transition-delay:.5s; }

/* ════════════════════════════════════════════════
   UTILITY
════════════════════════════════════════════════ */
.mt-8  { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mt-40 { margin-top:40px; }
.mt-56 { margin-top:56px; }
.text-purple { color:var(--c-purple-2); }
.text-orange { color:var(--c-orange-2); }
.text-muted  { color:var(--c-text-4); }
.divider { border:none; border-top:1px solid var(--c-border); margin:0; }

/* ════════════════════════════════════════════════
   SECTION LAYOUT GRIDS  (responsive-safe)
════════════════════════════════════════════════ */
.sc-57  { display:grid; grid-template-columns:5fr 7fr;  gap:80px; align-items:start; }
.sc-75  { display:grid; grid-template-columns:7fr 5fr;  gap:80px; align-items:start; }
.sc-12  { display:grid; grid-template-columns:1fr 2fr;  gap:80px; align-items:start; }
.sc-11  { display:grid; grid-template-columns:1fr 1fr;  gap:88px; align-items:center; }
.inner-2col    { display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--c-border); }
.inner-2col-1  { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--c-border); }
.inner-2col-44 { display:grid; grid-template-columns:1fr 1fr; gap:44px; }

/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero { min-height:auto; padding-block:80px 60px; }
  .hero-content { padding:0 44px 0; max-width:100%; }
  .hero-side { display:none; }
  .service-block, .service-block.flip { grid-template-columns:1fr; direction:ltr; }
  .service-visual { display:none; }
  .process-steps { grid-template-columns:repeat(2,1fr); gap:40px; }
  .process-connector { display:none; }
  .about-grid { grid-template-columns:1fr; gap:56px; }
  .contact-layout { grid-template-columns:1fr; gap:48px; }
  .legal-layout { grid-template-columns:1fr; gap:40px; }
  .legal-toc { position:static; }
  .footer-top { grid-template-columns:1fr; gap:44px; }
  .footer-nav { grid-template-columns:repeat(2,1fr); }
  .tech-grid { grid-template-columns:1fr; }
  .acc-list { padding-left: 28px; }
  .security-grid { grid-template-columns:1fr; }
  .sc-57, .sc-75 { grid-template-columns:1fr; gap:56px; }
}

@media (max-width: 768px) {
  .container, .container-narrow { padding-inline:24px; }
  .nav-inner { padding-inline:24px; }
  .nav-links { display:none; }
  .nav-cta { display:none; }
  .nav-hamburger { display:flex; }
  .nav-mobile { padding-inline:24px; }
  .hero-content { padding-inline:24px; }
  .hero-stats { gap:24px; flex-wrap:wrap; }
  .stats-grid { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; }
  .about-metrics { grid-template-columns:1fr; }
  .principles-grid { grid-template-columns:1fr; }
  .service-text { padding:48px 24px; }
  .footer-top { padding-bottom:36px; }
  .footer-nav { grid-template-columns:1fr; }
  footer { padding-inline:0; }
  .footer-top, .footer-bottom { padding-inline:24px; }
  .process-header { grid-template-columns:1fr; gap:24px; }
  .form-row { grid-template-columns:1fr; }
  .flow-wrap { gap:4px; flex-wrap:wrap; justify-content:center; }
  .flow-node { flex-shrink:1; }
  .flow-box { width:120px; padding:16px 12px; }
  .flow-line { width:18px; }
  .cursor-glow { display:none; }
  .sc-12, .sc-11, .sc-57, .sc-75 { grid-template-columns:1fr; gap:40px; }
  .inner-2col, .inner-2col-1, .inner-2col-44 { grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════
   LINE REVEAL  (kubrick-style)
════════════════════════════════════════════════ */
.lr-line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
  transition-property: transform;
}

.lr-inner {
  display: block;
  transform: translateY(112%);
  opacity: 0;
  transition: transform .88s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}

.lr-inner.up {
  transform: translateY(0);
  opacity: 1;
}

/* ════════════════════════════════════════════════
   METRIC CHIPS  (hero live stats)
════════════════════════════════════════════════ */
.metric-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--c-bg-4);
  border: 1px solid var(--c-border);
  border-radius: 100px;
  padding: 8px 18px 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-3);
  transition: border-color .25s, background .25s;
}

.chip:hover {
  border-color: var(--c-purple);
  background: var(--c-bg-5);
}

.chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-purple);
  flex-shrink: 0;
  animation: blink 2s ease-in-out infinite;
}
.chip-dot.orange { background: var(--c-orange); }
.chip-dot.blue   { background: var(--c-blue); }

.chip strong {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-text);
}

/* ════════════════════════════════════════════════
   HORIZONTAL BIG MARQUEE
════════════════════════════════════════════════ */
.h-marquee {
  overflow: hidden;
  padding-block: 24px;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-3);
}

.h-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: ticker 22s linear infinite;
}

.h-marquee:hover .h-marquee-track { animation-play-state: paused; }

.h-mw {
  font-family: var(--ff-display);
  font-size: clamp(26px, 3.8vw, 52px);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--c-text-4);
  white-space: nowrap;
  padding-inline: 24px;
  transition: color .25s;
}

.h-mw:hover { color: var(--c-text-2); }

.h-msep {
  font-size: clamp(26px, 3.8vw, 52px);
  font-weight: 700;
  padding-inline: 4px;
  flex-shrink: 0;
}
.h-msep.p { color: var(--c-purple-2); }
.h-msep.o { color: var(--c-orange); }

/* ════════════════════════════════════════════════
   PERFORMANCE CHART SECTION
════════════════════════════════════════════════ */
.chart-section {
  background: var(--c-bg-2);
  padding-block: 100px;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
  position: relative;
}

.chart-section::after {
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(124,92,255,.10) 0%, transparent 65%);
  pointer-events: none;
}

.chart-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 72px;
  align-items: center;
  margin-bottom: 48px;
}

#perf-chart-svg {
  width: 100%;
  height: 220px;
  overflow: visible;
  display: block;
}

.chart-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 48px;
}

.cm-cell {
  background: var(--c-bg-4);
  padding: 28px 32px;
  text-align: center;
  transition: background .25s;
}
.cm-cell:hover { background: var(--c-bg-5); }

.cm-val {
  font-family: var(--ff-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 6px;
  display: block;
}
.cm-val.pv { color: var(--c-purple-2); }
.cm-val.ov { color: var(--c-orange-2); }
.cm-val.bv { color: var(--c-blue); }

.cm-label {
  font-size: 12px;
  color: var(--c-text-4);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════
   SERVICE CARDS GRID  (compact 2×2)
════════════════════════════════════════════════ */
.svc-section {
  background: var(--c-bg);
  padding-block: 100px;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 56px;
}

.svc-card {
  background: var(--c-bg-4);
  padding: 44px 40px;
  position: relative;
  transition: background .3s;
  overflow: hidden;
}

.svc-card:hover { background: var(--c-bg-5); }

.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--c-purple), var(--c-orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.svc-card:hover::before { transform: scaleX(1); }

.svc-num-bg {
  position: absolute;
  top: 24px; right: 28px;
  font-family: var(--ff-display);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -.04em;
  color: rgba(124,92,255,.05);
  line-height: 1;
  pointer-events: none;
  transition: color .3s;
}
.svc-card:hover .svc-num-bg { color: rgba(124,92,255,.09); }

.svc-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  display: block;
}

/* SVG icon animation */
.ico-anim {
  transition: all .35s var(--ease);
}
.ico-bar { transform-origin: bottom; transform: scaleY(1); }
.ico-anim.active.ico-bar { transform: scaleY(1.15); }
.ico-line { stroke-dasharray: 40; stroke-dashoffset: 0; transition: stroke-dashoffset .5s; }
.ico-anim.active.ico-line { stroke-dashoffset: -40; }
.ico-dot { transform: scale(1); }
.ico-anim.active.ico-dot { transform: scale(1.4); }

.svc-card h3 {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--c-text);
  margin-bottom: 8px;
}

.svc-card p {
  font-size: 14px;
  color: var(--c-text-4);
  line-height: 1.6;
  margin-bottom: 20px;
}

.svc-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.svc-bullets li {
  font-size: 13px;
  color: var(--c-text-3);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.svc-bullets li::before {
  content: '→';
  color: var(--c-purple);
  font-size: 11px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   CAMPAIGN FUNNEL
════════════════════════════════════════════════ */
.funnel-section {
  background: var(--c-bg-3);
  padding-block: 100px;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.funnel-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}

#funnel-vis {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funnel-row {
  position: relative;
}

.funnel-track {
  background: var(--c-bg-4);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  height: 56px;
  overflow: hidden;
  position: relative;
}

.funnel-bar-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transform: scaleX(0);
  transform-origin: left center;
}

.funnel-bar-label {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  z-index: 1;
  white-space: nowrap;
}

.funnel-bar-pct {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  z-index: 1;
}

.funnel-arrow {
  text-align: center;
  line-height: 1;
  color: var(--c-border-2);
  font-size: 18px;
  padding-block: 2px;
}

/* ════════════════════════════════════════════════
   RESPONSIVE ADDITIONS
════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .chart-layout { grid-template-columns: 1fr; gap: 44px; }
  .funnel-layout { grid-template-columns: 1fr; gap: 48px; }
  .svc-grid { grid-template-columns: 1fr; }
  .chart-metrics-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .h-mw, .h-msep { font-size: clamp(22px, 5vw, 34px); }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { padding: 32px 24px; }
  .cm-val { font-size: 24px; }
  .chart-metrics-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════
   PER-PAGE COLOR THEMES
   Overrides --c-purple for full cascade effect
════════════════════════════════════════════════ */

/* Services — Orange energy */
body.page-services {
  --c-purple:       #FF8C42;
  --c-purple-2:     #FFAA70;
  --c-purple-3:     #CC6A20;
  --c-purple-glow:  rgba(255,140,66,.28);
  --c-purple-dim:   rgba(255,140,66,.10);
  --c-purple-faint: rgba(255,140,66,.05);
  --c-border-2:     rgba(255,140,66,.25);
}

/* Technology — Electric blue */
body.page-technology {
  --c-purple:       #00C2FF;
  --c-purple-2:     #4DCEFF;
  --c-purple-3:     #0099CC;
  --c-purple-glow:  rgba(0,194,255,.28);
  --c-purple-dim:   rgba(0,194,255,.10);
  --c-purple-faint: rgba(0,194,255,.05);
  --c-border-2:     rgba(0,194,255,.25);
}

/* About — Teal trust */
body.page-about {
  --c-purple:       #00C4A7;
  --c-purple-2:     #35D9C4;
  --c-purple-3:     #009982;
  --c-purple-glow:  rgba(0,196,167,.28);
  --c-purple-dim:   rgba(0,196,167,.10);
  --c-purple-faint: rgba(0,196,167,.05);
  --c-border-2:     rgba(0,196,167,.25);
}

/* Contact — Warm violet */
body.page-contact {
  --c-purple:       #A855F7;
  --c-purple-2:     #C084FC;
  --c-purple-3:     #8033D4;
  --c-purple-glow:  rgba(168,85,247,.28);
  --c-purple-dim:   rgba(168,85,247,.10);
  --c-purple-faint: rgba(168,85,247,.05);
  --c-border-2:     rgba(168,85,247,.25);
}

/* Legal — Cool silver */
body.page-legal {
  --c-purple:       #94A3B8;
  --c-purple-2:     #B0BEC5;
  --c-purple-glow:  rgba(148,163,184,.20);
  --c-purple-dim:   rgba(148,163,184,.08);
  --c-purple-faint: rgba(148,163,184,.04);
}

/* ════════════════════════════════════════════════
   SCROLL PROGRESS BAR  (scaleX-based — no layout)
════════════════════════════════════════════════ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 9999;
  background: linear-gradient(to right, var(--c-purple), var(--c-orange));
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ════════════════════════════════════════════════
   ENHANCED REVEAL VARIANTS (2D + 3D)
════════════════════════════════════════════════ */

/* CSS .visible fallbacks (used when GSAP is not the animator) */
.reveal-3d.visible   { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0); }
.reveal-flip.visible { opacity: 1; transform: perspective(700px) rotateX(0); }
.reveal-left.visible,
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.reveal-rotate.visible { opacity: 1; transform: perspective(700px) rotateY(0) translateX(0); }
.reveal-up.visible    { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════════
   BUTTON CLICK PRESS EFFECT
════════════════════════════════════════════════ */
.btn:active {
  transform: translateY(2px) scale(.97) !important;
  transition: transform .07s, box-shadow .07s !important;
  box-shadow: none !important;
}

.magnetic .btn:active {
  transform: translateY(1px) scale(.97) !important;
}

/* ════════════════════════════════════════════════
   HOVER GLOW AURA — cursor-tracking
════════════════════════════════════════════════ */
.hover-glow {
  position: relative;
  overflow: hidden;
}
.hover-glow::after {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-purple-dim) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .3s;
  left: var(--mx, 50%);
  top:  var(--my, 50%);
}
.hover-glow:hover::after { opacity: 1; }

/* ════════════════════════════════════════════════
   FLOATING 3D ANIMATION
════════════════════════════════════════════════ */
@keyframes float3d {
  0%,100% { transform: translateY(0)   rotateX(0deg)   rotateZ(0deg); }
  33%     { transform: translateY(-10px) rotateX(3deg)  rotateZ(1deg); }
  66%     { transform: translateY(5px)  rotateX(-2deg) rotateZ(-1deg); }
}
.float-anim { animation: float3d 7s ease-in-out infinite; }

@keyframes floatSlow {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}
.float-slow { animation: floatSlow 5s ease-in-out infinite; }

/* ════════════════════════════════════════════════
   PARALLAX CONTAINER
════════════════════════════════════════════════ */
[data-parallax] { will-change: transform; }

/* ════════════════════════════════════════════════
   TECHNOLOGY PAGE — Circuit grid
════════════════════════════════════════════════ */
body.page-technology .page-hero-xdark::before {
  background-image:
    linear-gradient(rgba(0,194,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,194,255,.05) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Pulsing node animation */
@keyframes nodePulse {
  0%,100% { box-shadow: 0 0 0 0 var(--c-purple-glow); }
  50%     { box-shadow: 0 0 0 8px transparent; }
}

body.page-technology .flow-box.accent {
  animation: nodePulse 2.4s ease-in-out infinite;
}

body.page-technology .tech-case {
  transition: transform .3s, background .3s, box-shadow .3s;
}
body.page-technology .tech-case:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 60px rgba(0,194,255,.12), 0 0 0 1px rgba(0,194,255,.2);
}

/* Traveling signal on flow line */
.signal-dot {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-purple-2);
  box-shadow: 0 0 10px var(--c-purple-glow);
  animation: travel 2.5s linear infinite;
}
@keyframes travel {
  from { left: 0%; }
  to   { left: 100%; }
}

/* ════════════════════════════════════════════════
   SERVICES PAGE — 3D hover cards
════════════════════════════════════════════════ */
body.page-services .svc-card {
  transition: background .3s, transform .25s var(--ease), box-shadow .3s;
}
body.page-services .svc-card:hover {
  transform: perspective(900px) translateZ(28px) rotateX(-2deg) !important;
  box-shadow: 0 28px 64px rgba(255,140,66,.16), 0 0 0 1px rgba(255,140,66,.18) !important;
}

body.page-services .dark-card:hover {
  box-shadow: 0 16px 48px rgba(255,140,66,.14), 0 0 0 1px rgba(255,140,66,.15) !important;
}

/* ════════════════════════════════════════════════
   ABOUT PAGE — Flip metric cards
════════════════════════════════════════════════ */
.am-cell {
  transition: background .3s, transform .72s cubic-bezier(.25,1.45,.5,1), opacity .4s;
  transform-origin: top center;
}

.am-cell.pre-flip {
  transform: perspective(600px) rotateX(-72deg);
  opacity: 0;
}

.am-cell.flipped {
  transform: perspective(600px) rotateX(0deg);
  opacity: 1;
}

body.page-about .principle:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,196,167,.12);
  transition: transform .3s, box-shadow .3s;
}

body.page-about .am-cell:hover {
  box-shadow: 0 8px 30px rgba(0,196,167,.14);
}

/* ════════════════════════════════════════════════
   CONTACT PAGE — Particles + form
════════════════════════════════════════════════ */
.particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;
}

body.page-contact .page-hero {
  position: relative;
  overflow: hidden;
}

body.page-contact .form-input {
  transition: border-color .25s, box-shadow .25s, transform .2s;
}

body.page-contact .form-input:focus {
  transform: translateY(-1px);
}

/* Floating label style */
.form-floating {
  position: relative;
}
.form-floating .form-label {
  position: absolute;
  top: 13px;
  left: 18px;
  transition: all .2s var(--ease);
  pointer-events: none;
  font-size: 14px;
  color: var(--c-text-4);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.form-floating .form-input {
  padding-top: 22px;
  padding-bottom: 6px;
}
.form-floating .form-input:focus ~ .form-label,
.form-floating .form-input:not(:placeholder-shown) ~ .form-label {
  top: 6px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-purple-2);
}

/* ════════════════════════════════════════════════
   RIPPLE EFFECT on click
════════════════════════════════════════════════ */
.ripple-wrap { position: relative; overflow: hidden; }

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transform: scale(0);
  animation: ripple-anim .6s linear;
  pointer-events: none;
}

@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* ════════════════════════════════════════════════
   CARD 3D SHINE (moving highlight on hover)
════════════════════════════════════════════════ */
.shine-card { position: relative; overflow: hidden; }

.shine-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--sx,50%) var(--sy,50%),
    rgba(255,255,255,.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 1;
}
.shine-card:hover::before { opacity: 1; }

/* ════════════════════════════════════════════════
   STAGGER CHILDREN (for grids)
════════════════════════════════════════════════ */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: .08s; }
.stagger > *:nth-child(3) { transition-delay: .16s; }
.stagger > *:nth-child(4) { transition-delay: .24s; }
.stagger > *:nth-child(5) { transition-delay: .32s; }
.stagger > *:nth-child(6) { transition-delay: .40s; }

/*
 * GSAP REVEALS — NO pre-CSS opacity:0 here.
 * GSAP's immediateRender:true handles initial hidden state via inline styles.
 * If GSAP CDN fails, elements remain visible (graceful degradation).
 * Only the js-animations class (added by JS) gates the initial hidden state.
 */
body.js-animations .reveal,
body.js-animations .reveal-3d,
body.js-animations .reveal-flip,
body.js-animations .reveal-left,
body.js-animations .reveal-right,
body.js-animations .reveal-scale,
body.js-animations .reveal-rotate,
body.js-animations .reveal-up {
  opacity: 0;
}

/* JS-off / reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-3d,
  .reveal-flip,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-rotate,
  .reveal-up {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════
   HERO AMBIENT CANVAS
════════════════════════════════════════════════ */
#ambient-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
}

.hero-content { position: relative; z-index: 2; }

/* ════════════════════════════════════════════════
   VELOCITY SKEW — suppress overflow during skew
════════════════════════════════════════════════ */
.hero,
.chart-section,
.svc-section {
  overflow: hidden;
}

/* .funnel-bar-inner removed — fill is now .funnel-bar-fill (absolutely positioned) */

/* ════════════════════════════════════════════════
   NAV — smooth active indicator
════════════════════════════════════════════════ */
.nav-links a.active::after {
  width: 100%;
  background: linear-gradient(to right, var(--c-purple-2), var(--c-orange));
}

/* ════════════════════════════════════════════════
   SECTION CLIP REVEAL  (chart section)
════════════════════════════════════════════════ */
.chart-section {
  isolation: isolate;
}

/* ════════════════════════════════════════════════
   TECH PAGE — Enhanced flow box pulse
════════════════════════════════════════════════ */
body.page-technology .flow-box {
  transition: all .28s var(--ease);
}

body.page-technology .flow-box:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 0 36px var(--c-purple-glow), 0 16px 40px rgba(0,0,0,.35);
}

/* ════════════════════════════════════════════════
   STAT CARD — preserve 3D for GSAP tilt
════════════════════════════════════════════════ */
.stat-card {
  transform-style: preserve-3d;
}

/* ════════════════════════════════════════════════
   SVC CARD — preserve 3D
════════════════════════════════════════════════ */
.svc-card {
  transform-style: preserve-3d;
}

/* ════════════════════════════════════════════════
   ABOUT METRIC CELLS — preserve-3d for flip
════════════════════════════════════════════════ */
.am-cell {
  transform-style: preserve-3d;
}

/* ════════════════════════════════════════════════
   RIPPLE — override old animation (GSAP handles it)
════════════════════════════════════════════════ */
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  transform: scale(0);
  pointer-events: none;
}

/* ════════════════════════════════════════════════
   CHART DOTS — SVG transform-origin fix
════════════════════════════════════════════════ */
.chart-dot {
  transform-box: fill-box;
  transform-origin: center;
}

/* ════════════════════════════════════════════════
   MARQUEE — will-change for compositor
════════════════════════════════════════════════ */
.h-marquee-track {
  will-change: transform;
}

/* ════════════════════════════════════════════════
   HORIZONTAL MARQUEE  — pause handled by GSAP
   (CSS hover pause removed; GSAP manages it)
════════════════════════════════════════════════ */
.h-marquee:hover .h-marquee-track {
  /* intentionally empty — GSAP controls playback */
}

/* ════════════════════════════════════════════════
   GOOGLE ADS HERO — keyword chip style
   (rendered on canvas; CSS chip for mobile fallback)
════════════════════════════════════════════════ */
.hero-kw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(124,92,255,.08);
  border: 1px solid rgba(124,92,255,.18);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-purple-2);
  white-space: nowrap;
  pointer-events: none;
}

/* ════════════════════════════════════════════════
   SMOOTH SCROLL  (native)
════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════
   MOTIF BARS  — initial state (GSAP overrides)
════════════════════════════════════════════════ */
.motif-bar {
  height: 0;
}

/* ════════════════════════════════════════════════
   TIMELINE FILL  — initial state
════════════════════════════════════════════════ */
.tl-fill {
  width: 0;
}

/* ════════════════════════════════════════════════
   PAGE HERO  — stagger children on enter
════════════════════════════════════════════════ */
.page-hero .eyebrow,
.page-hero h1,
.page-hero .lead {
  /* GSAP handles these via .reveal class */
}

/* ════════════════════════════════════════════════
   HERO PLATFORM BADGES
════════════════════════════════════════════════ */
.hero-platforms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.hero-platforms-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-text-4);
  margin-right: 4px;
}
.hplat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-bg-4);
  border: 1px solid var(--c-border);
  border-radius: 100px;
  padding: 5px 12px 5px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-3);
}
.hplat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   GOOGLE ADS DASHBOARD PANEL  (replaces funnel)
════════════════════════════════════════════════ */
.gads-panel {
  background: var(--c-bg-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.gads-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: var(--c-bg-4);
  border-bottom: 1px solid var(--c-border);
}
.gads-g-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}
.gads-g-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
}
.gads-panel-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-3);
  margin-left: 8px;
}
.gads-panel-period {
  font-size: 11px;
  color: var(--c-text-4);
}
.gads-rows {
  display: flex;
  flex-direction: column;
}
.gads-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-border);
  transition: background .2s;
}
.gads-row:last-child { border-bottom: none; }
.gads-row:hover { background: var(--c-bg-4); }
.gads-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gads-row-info { flex: 1; min-width: 0; }
.gads-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gads-row-type {
  font-size: 11px;
  color: var(--c-text-4);
  margin-top: 2px;
}
.gads-row-roas {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.gads-panel-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--c-border);
}
.gads-footer-cell {
  padding: 16px 20px;
  border-right: 1px solid var(--c-border);
}
.gads-footer-cell:last-child { border-right: none; }
.gads-footer-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-4);
  margin-bottom: 4px;
}
.gads-footer-val {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--ff-display);
  letter-spacing: -.02em;
}

/* ════════════════════════════════════════════════
   SCROLL VELOCITY — prevent content overflow
════════════════════════════════════════════════ */
body { overflow-x: hidden; }

/* ════════════════════════════════════════════════
   ABOUT METRIC — remove old pre-flip states
   (now handled by GSAP)
════════════════════════════════════════════════ */
.am-cell.pre-flip { transform: none; opacity: 1; }
.am-cell.flipped  { transform: none; opacity: 1; }

/* ════════════════════════════════════════════════
   IMMERSIVE-G STYLE POLISH
════════════════════════════════════════════════ */

/* ── Film grain overlay (subtle noise texture) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ── Smoother global transitions ── */
a, button, .btn, .svc-card, .nav-logo, .stat-card, .tilt-card {
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* ── Card lift on hover (immersive micro-interaction) ── */
.svc-card {
  transition: background .35s cubic-bezier(.22,1,.36,1),
              transform .5s cubic-bezier(.22,1,.36,1),
              box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(124,92,255,.1);
}

/* ── Stat cards lift ── */
.stat-card, .tilt-card {
  transition: transform .5s cubic-bezier(.22,1,.36,1),
              box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.stat-card:hover, .tilt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0,0,0,.2);
}

/* ── Nav links underline slide ── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-purple);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── Button shine sweep on hover ── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition: none;
  pointer-events: none;
}
.btn-primary:hover::after {
  animation: btnShine .6s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btnShine {
  to { left: 120%; }
}

/* ── Hero floating elements stagger + depth ── */
.hero-float {
  transition: transform .6s cubic-bezier(.22,1,.36,1),
              opacity .6s cubic-bezier(.22,1,.36,1);
}
.hero-side--left .hero-float:nth-child(odd)  { transform: translateX(-8px); }
.hero-side--left .hero-float:nth-child(even) { transform: translateX(12px); }
.hero-side--right .hero-float:nth-child(odd) { transform: translateX(8px); }
.hero-side--right .hero-float:nth-child(even){ transform: translateX(-12px); }

/* ── Smooth image/section reveals ── */
.reveal, .reveal-3d, .reveal-flip,
.reveal-left, .reveal-right,
.reveal-scale, .reveal-rotate, .reveal-up {
  will-change: transform, opacity;
}

/* ── Eyebrow text tracking animation ── */
.eyebrow {
  transition: letter-spacing .6s cubic-bezier(.22,1,.36,1);
}
.eyebrow:hover {
  letter-spacing: .16em;
}

/* ── Compliance box subtle glow ── */
.compliance-box {
  transition: border-color .4s, box-shadow .4s;
}
.compliance-box:hover {
  border-color: rgba(124,92,255,.3);
  box-shadow: 0 0 24px rgba(124,92,255,.06);
}

/* ── Footer links smooth slide ── */
.footer-nav-col a {
  transition: color .3s, transform .3s cubic-bezier(.22,1,.36,1);
  display: inline-block;
}
.footer-nav-col a:hover {
  transform: translateX(4px);
}