/* =========================================================================
   Aarvi Technology — Problems We Solve
   Mobile-first. Base styles = final/static state; motion is layered on
   only when JS adds `.is-armed` / `.is-in` and motion is allowed.
   ========================================================================= */

/* Self-hosted Latin subsets (variable fonts, SIL Open Font License) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Brand palette */
  --navy: #0B1220;
  --surface-dark: #111A2E;
  --blue: #1F5BEA;
  --blue-hi: #3D7BFF;
  --blue-hover: #1646B8;
  --blue-soft: #8FB8FF;
  --pale: #EEF3FF;
  --text: #1A2233;
  --text-2: #4A5568;
  --border: #E5E9F0;
  --bg-soft: #F5F7FB;
  --white: #FFFFFF;

  /* Derived */
  --on-dark: rgba(255, 255, 255, 0.92);
  --on-dark-2: rgba(226, 234, 250, 0.74);
  --line-dark: rgba(143, 184, 255, 0.16);
  --error: #B42318;
  --error-bg: #FEF3F2;

  --font-head: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 12px 32px -12px rgba(16, 32, 72, 0.18);
  --shadow-glow: 0 30px 80px -30px rgba(31, 91, 234, 0.55);

  --gutter: 16px;
  --header-h: 64px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-ms: 560ms;
}

@media (min-width: 768px) { :root { --gutter: 32px; --header-h: 72px; } }

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; margin: 0; letter-spacing: -0.015em; color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--blue-hi); outline-offset: 3px; border-radius: 6px; }
.cta :focus-visible, .site-footer :focus-visible, .map-panel :focus-visible { outline-color: var(--blue-soft); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--white); color: var(--navy); padding: 12px 16px; border-radius: 10px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 8px 24px -10px rgba(31, 91, 234, .8); }
.btn-primary:hover { background: var(--blue-hover); color: var(--white); }
.btn-ghost-dark { color: var(--white); border-color: rgba(143, 184, 255, .4); background: rgba(255, 255, 255, .03); }
.btn-ghost-dark:hover { color: var(--white); border-color: var(--blue-soft); background: rgba(61, 123, 255, .12); }
.btn-outline { color: var(--blue); border-color: rgba(31, 91, 234, .35); background: var(--white); }
.btn-outline:hover { color: var(--blue-hover); border-color: var(--blue); background: var(--pale); }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.text-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-family: var(--font-head); font-weight: 700; color: var(--blue); text-decoration: none;
}
.text-link span { transition: transform .2s; }
.text-link:hover { text-decoration: underline; }
.text-link:hover span { transform: translateX(3px); }
.text-link-dark { color: var(--blue-soft); }
.text-link-dark:hover { color: var(--white); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue);
}
.eyebrow-dark {
  color: var(--blue-soft); padding: 6px 14px 6px 10px; border-radius: 999px;
  border: 1px solid rgba(143, 184, 255, .28); background: rgba(61, 123, 255, .08);
}
.eyebrow-light {
  padding: 6px 14px 6px 10px; border-radius: 999px;
  border: 1px solid rgba(31, 91, 234, .18); background: var(--white); box-shadow: var(--shadow-sm);
}
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 0 4px rgba(61, 123, 255, .2), 0 0 12px var(--blue-hi); }
.cta .eyebrow, .cta .eyebrow-dark {
  color: #dbe7ff; background: rgba(61, 123, 255, .16); border: 1px solid rgba(143, 184, 255, .4); box-shadow: none;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); flex-wrap: wrap; }
.brand { display: inline-flex; padding: 4px 0; border-radius: 8px; }
.brand img { width: 124px; height: auto; }
@media (min-width: 768px) { .brand img { width: 140px; } }

.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--white);
  align-items: center; justify-content: center;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); position: relative; transition: transform .25s, opacity .25s;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* No-JS / default: nav is a wrapping row (always reachable) */
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; padding-bottom: 10px; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 4px; }
.site-nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--text-2); text-decoration: none; font-weight: 500; font-size: .95rem; border-radius: 8px;
}
.site-nav a:not(.btn):hover, .site-nav a.is-current { color: var(--blue); }
.site-nav a.is-current { box-shadow: inset 0 -2px 0 var(--blue-hi); border-radius: 0; }

@media (max-width: 1023.98px) { .no-js .site-header { position: relative; } }

/* JS mobile: collapsible panel */
@media (max-width: 1023.98px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 12px var(--gutter) 20px;
    background: var(--white); border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 40px -20px rgba(16, 32, 72, .25);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  .js .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
  .js .site-nav ul { flex-direction: column; }
  .js .site-nav a:not(.btn) { display: flex; padding: 0 4px; border-bottom: 1px solid var(--border); border-radius: 0; }
  .js .site-nav .header-cta { margin-top: 8px; }
}
@media (min-width: 1024px) {
  .header-inner { flex-wrap: nowrap; }
  .site-nav { width: auto; padding: 0; gap: 20px; flex-wrap: nowrap; }
  .site-nav ul { flex-wrap: nowrap; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--text);
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(61, 123, 255, .16), transparent 62%),
    radial-gradient(620px 460px at -8% 28%, rgba(143, 184, 255, .22), transparent 62%),
    linear-gradient(180deg, var(--white) 0%, #F6F9FF 58%, var(--white) 100%);
  padding: 40px 0 56px;
}
.hero::before { /* fine blueprint grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(31, 91, 234, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 91, 234, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 75%);
}
.hero::after { /* soft dot cluster in the side margin (wide screens only, never over text) */
  content: none; position: absolute; left: 24px; top: 420px; width: 96px; height: 128px; pointer-events: none;
  background-image: radial-gradient(rgba(31, 91, 234, .22) 1.5px, transparent 1.6px); background-size: 16px 16px;
}
@media (min-width: 1360px) { .hero::after { content: ""; } }
/* Decorative hero background: aurora glows, orbit rings, flowing streams, sparkles */
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora { position: absolute; border-radius: 50%; will-change: transform; }
.aurora-1 { width: 720px; height: 720px; right: -200px; top: -260px; background: radial-gradient(circle, rgba(61, 123, 255, .2), rgba(61, 123, 255, 0) 68%); }
.aurora-2 { width: 560px; height: 560px; left: -220px; top: 120px; background: radial-gradient(circle, rgba(143, 184, 255, .32), rgba(143, 184, 255, 0) 68%); }
.aurora-3 { width: 480px; height: 480px; left: 38%; top: 380px; background: radial-gradient(circle, rgba(31, 91, 234, .1), rgba(31, 91, 234, 0) 68%); }

.hero-streams { position: absolute; left: 0; top: 0; width: 100%; height: min(100%, 900px); }
.stream { fill: none; stroke: rgba(31, 91, 234, .14); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.stream-2 { stroke: rgba(61, 123, 255, .1); }
.stream-3 { stroke: rgba(31, 91, 234, .08); }
.stream-pulse { fill: none; stroke: var(--blue-hi); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 4 96; stroke-dashoffset: 70; opacity: .55; }
.stream-pulse.p2 { stroke-dashoffset: 30; opacity: .4; }
.stream-pulse.p3 { stroke-dashoffset: 55; opacity: .35; }

.hero-orbits { position: absolute; width: 520px; height: 520px; right: -230px; top: -150px; opacity: .8; }
/* fade the rings' left side so nothing orbits behind the hero text */
.hero-orbits { -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 42%); mask-image: linear-gradient(90deg, transparent 22%, #000 42%); }
.orbit { fill: none; stroke: rgba(31, 91, 234, .14); stroke-width: 1.2; }
.orbit-dash { stroke: rgba(31, 91, 234, .2); stroke-dasharray: 3 9; }
.orb-box { fill: none; stroke: none; }
.orbiter { transform-box: fill-box; transform-origin: center; }
.orb-dot { fill: var(--blue-hi); stroke: var(--white); stroke-width: 3; }
.orb-dot-sm { fill: var(--blue-soft); stroke-width: 2; }
.orb-halo { fill: rgba(61, 123, 255, .16); }
@media (min-width: 1024px) {
  .hero-orbits { width: 900px; height: 900px; right: auto; left: calc(50% + 330px); top: 390px; transform: translate(-50%, -50%); opacity: 1; }
}

.spark { position: absolute; width: 12px; height: 12px; background: var(--blue-hi); opacity: .45;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.sp1 { left: 46%; top: 70px; }
.sp2 { left: 6%; top: 46px; width: 9px; height: 9px; opacity: .35; }
.sp3 { right: 5%; top: 620px; width: 14px; height: 14px; }
.sp4 { left: 52%; top: 560px; width: 8px; height: 8px; opacity: .3; }
.sp5 { left: 90%; top: 90px; width: 10px; height: 10px; opacity: .35; }
.sp6 { left: 3%; top: 760px; width: 10px; height: 10px; opacity: .3; }

/* Floating status chips beside the form (wide screens only) */
.float-chip { display: none; }
@media (min-width: 1280px) {
  .float-chip {
    position: absolute; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px;
    border-radius: 14px; background: rgba(255, 255, 255, .9); border: 1px solid var(--border);
    box-shadow: 0 16px 36px -16px rgba(16, 32, 72, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: .78rem; line-height: 1.3; color: var(--text-2); white-space: nowrap;
  }
  .float-chip b { display: block; font-family: var(--font-head); font-size: .82rem; color: var(--navy); }
  .float-chip small { font-size: .74rem; }
  .fc-1 { left: -58px; top: -26px; }
  .fc-2 { right: -46px; bottom: 96px; }
}
.fc-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--blue); color: var(--white); flex: none; }
.fc-ico-live { position: relative; background: var(--pale); }
.fc-ico-live::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 0 4px rgba(61, 123, 255, .2); }

/* Motion (only with .anim; paused while the hero is offscreen) */
.anim .aurora-1 { animation: auroraA 22s ease-in-out infinite alternate; }
.anim .aurora-2 { animation: auroraB 26s ease-in-out infinite alternate; }
.anim .aurora-3 { animation: auroraA 30s ease-in-out -8s infinite alternate-reverse; }
.anim .orbiter.o1 { animation: orbitSpin 40s linear infinite; }
.anim .orbiter.o2 { animation: orbitSpin 60s linear infinite reverse; }
.anim .orbiter.o3 { animation: orbitSpin 90s linear infinite; }
.anim .stream-pulse { animation: streamRun 9s linear infinite; }
.anim .stream-pulse.p2 { animation-duration: 12s; animation-delay: -5s; }
.anim .stream-pulse.p3 { animation-duration: 14s; animation-delay: -9s; }
.anim .spark { animation: twinkle 4.8s ease-in-out infinite; }
.anim .sp2 { animation-delay: -1.2s; } .anim .sp3 { animation-delay: -2.4s; } .anim .sp4 { animation-delay: -3.1s; }
.anim .sp5 { animation-delay: -.6s; } .anim .sp6 { animation-delay: -3.8s; }
.anim .fc-1 { animation: floatY 6s ease-in-out infinite; }
.anim .fc-2 { animation: floatY 7s ease-in-out -3s infinite; }
.anim .fc-ico-live::after { animation: livePing 2.4s ease-out infinite; }
.hero.is-offscreen .hero-bg *, .hero.is-offscreen .float-chip, .hero.is-offscreen .fc-ico-live::after { animation-play-state: paused !important; }

@keyframes auroraA { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 50px) scale(1.12); } }
@keyframes auroraB { from { transform: translate(0, 0) scale(1); } to { transform: translate(80px, -40px) scale(.92); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes streamRun { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(0deg); opacity: .15; } 50% { transform: scale(1.15) rotate(45deg); opacity: .6; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes livePing { 0% { box-shadow: 0 0 0 0 rgba(61, 123, 255, .45); } 100% { box-shadow: 0 0 0 10px rgba(61, 123, 255, 0); } }
.hero-grid { position: relative; display: grid; gap: 40px; align-items: start; }
.hero-copy { padding-top: 8px; }
.hero h1 {
  margin: 20px 0 20px;
  font-size: clamp(2.05rem, 1.35rem + 2.9vw, 3.4rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800;
  color: var(--navy);
}
.h1-accent {
  background: linear-gradient(92deg, var(--blue) 0%, var(--blue-hi) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--text-2); max-width: 60ch; margin-bottom: 28px; }
.hero-pillars { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); }
.hero-pillars li { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--navy); }
.hero-pillars span { font-size: .72rem; color: var(--blue); letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(31, 91, 234, .25); background: var(--white); }

@media (min-width: 1024px) {
  .hero { padding: 72px 0 88px; }
  .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 64px; }
  .hero-copy { padding-top: 32px; }
}

/* ---------- Forms ---------- */
.form-card {
  position: relative; background: var(--white); color: var(--text);
  border-radius: var(--r-xl); padding: 24px 20px;
  box-shadow: 0 30px 70px -32px rgba(31, 91, 234, .35), 0 0 0 1px var(--border);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
@media (min-width: 768px) { .form-card { padding: 32px; } }
.form-title { font-size: 1.35rem; font-weight: 800; color: var(--navy); }
.form-sub { color: var(--text-2); margin: 6px 0 20px; font-size: .95rem; }
.field-grid { display: grid; gap: 14px; margin-bottom: 18px; }
@media (min-width: 560px) { .field-grid { grid-template-columns: 1fr 1fr; } .field-full { grid-column: 1 / -1; } }
.field label { display: block; font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.req { color: var(--blue); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1px solid #CBD3E1; border-radius: var(--r-sm); background: var(--bg-soft);
  font-size: 1rem; line-height: 1.4; color: var(--text);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #9AA8C0; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 4px rgba(31, 91, 234, .18);
}
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg); pointer-events: none;
}
.field [aria-invalid="true"] { border-color: var(--error); background: var(--error-bg); }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .15); }
.field-error { color: var(--error); font-size: .82rem; font-weight: 500; margin-top: 4px; }
.field-error:empty { display: none; }
.trust-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: .85rem; color: var(--text-2); }
.trust-line svg { color: var(--blue); flex: none; }
.form-status:not(:empty) {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm); font-size: .9rem; line-height: 1.5;
  background: var(--pale); border: 1px solid rgba(31, 91, 234, .25); color: var(--text);
}
.form-status.is-error { background: var(--error-bg); border-color: rgba(180, 35, 24, .3); }
.form-status.is-success { background: #ECFDF3; border-color: #A6E4BF; }
.form-status a { font-weight: 600; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---------- Signature flow band ---------- */
.flow-band {
  position: relative; margin: 48px 0 0; padding: 20px 16px 16px;
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 40px 80px -40px rgba(31, 91, 234, .3);
}
.flow-band::before { /* top light line */
  content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-hi), transparent);
}
@media (min-width: 768px) { .flow-band { padding: 28px 28px 20px; margin-top: 64px; } }
.flow-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.flow-head figcaption { display: grid; gap: 4px; }
.flow-kicker { font-family: var(--font-head); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
.flow-title { font-family: var(--font-head); font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); font-weight: 700; color: var(--navy); }
.flow-controls { display: none; gap: 8px; }
.js .flow-controls { display: flex; }
.ctl {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(31, 91, 234, .3); background: var(--white); color: var(--blue); font-weight: 600; font-size: .9rem;
  transition: background-color .2s, border-color .2s;
}
.ctl:hover { background: var(--pale); border-color: var(--blue); }
.ctl:disabled { opacity: .45; cursor: default; }
.ctl .ico-play { display: none; }
.ctl[aria-pressed="true"] .ico-play { display: block; }
.ctl[aria-pressed="true"] .ico-pause { display: none; }

.flow-svg { width: 100%; height: auto; overflow: visible; }
.flow-wide { display: none; }
.flow-narrow { max-width: 440px; margin-inline: auto; }
/* Wide composition only where its labels stay ≥ ~11px; otherwise keep the vertical one */
@media (min-width: 1100px) { .flow-wide { display: block; } .flow-narrow { display: none; } }
.flow-wide .t-xs { font-size: 13px; }
.flow-wide .f-out .t-xs { font-size: 12px; }
.flow-wide .t-sm { font-size: 15px; }
.flow-wide .f-colhead text { font-size: 12px; }
.flow-wide .t-xxs { font-size: 10px; }
.flow-wide .t-note { font-size: 12px; }

.flow-svg text { font-family: var(--font-body); }
.f-colhead text, .t-colhead { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: .14em; fill: var(--blue); }
.card-dark { fill: var(--bg-soft); stroke: #D6DEEB; }
.t-sm { font-size: 14px; fill: var(--text); }
.t-strong { font-weight: 600; font-family: var(--font-head); }
.t-xs { font-size: 12px; fill: var(--text-2); }
.t-xxs { font-size: 9px; font-weight: 700; letter-spacing: .08em; fill: #5B6880; }
.t-node { fill: var(--blue); }
.t-note { font-size: 11px; fill: #5B6880; font-style: italic; }
.pill-warn { fill: var(--white); stroke: #D6DEEB; }
.ico-ring { fill: var(--pale); stroke: var(--blue); stroke-width: 1.2; }
.ico-doc, .ico-sheet { fill: var(--pale); stroke: var(--blue); stroke-width: 1.2; }
.ico-line { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.f-in-card { transform-box: fill-box; transform-origin: center; }
.f-route { fill: none; stroke: var(--blue-hi); stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
.lane-bg { fill: url(#laneGrad); stroke: rgba(31, 91, 234, .28); }
.t-lane { font-family: var(--font-head) !important; font-size: 16px; font-weight: 700; fill: var(--navy); }
.lane-rail { stroke: rgba(31, 91, 234, .3); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.lane-node { fill: var(--blue-hi); stroke: var(--white); stroke-width: 3; }
.node-glow { transform-box: fill-box; transform-origin: center; opacity: .9; }
.chip-move { transform: translateX(var(--dx)); }
.chip-bg { fill: var(--blue); stroke: var(--blue-hi); }
.t-chip { font-size: 11px; font-weight: 600; fill: #fff; }
.chip-before { opacity: 0; fill: var(--blue-hover); }
.card-out { fill: var(--pale); stroke: rgba(31, 91, 234, .35); }
.out-ico { fill: var(--blue); stroke: var(--blue); }
.out-ico-line { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.out-bar { fill: var(--blue-hi); }

/* Armed (JS + motion allowed): start states */
.flow-band.is-armed .f-in,
.flow-band.is-armed .f-lane,
.flow-band.is-armed .f-out,
.flow-band.is-armed .f-chip { opacity: 0; }
.flow-band.is-armed .f-route { stroke-dasharray: 420; stroke-dashoffset: 420; }
.flow-band.is-armed .chip-move { transform: translateX(0); }
.flow-band.is-armed .chip-before { opacity: 1; }
.flow-band.is-armed .chip-after { opacity: 0; }
.flow-band.is-armed .chip-bg { fill: var(--white); stroke: rgba(31, 91, 234, .45); }
.flow-band.is-armed .node-glow { opacity: 0; }

/* Playing */
.flow-band.is-playing .f-in { animation: fFade .55s var(--ease) var(--d) both; }
.flow-band.is-playing .f-in-card { animation: fSettle 1.1s var(--ease) var(--d) both; }
.flow-band.is-playing .f-lane { animation: fFade .6s var(--ease) var(--d) both; }
.flow-band.is-playing .f-route { animation: fDraw .9s var(--ease) var(--d) both; }
.flow-band.is-playing .f-chip { animation: fFade .35s linear var(--d) both; }
.flow-band.is-playing .chip-move { animation: fTravel 2.6s cubic-bezier(.42, 0, .58, 1) var(--d) both; }
.flow-band.is-playing .chip-before { animation: fOut .25s linear var(--sw) both; }
.flow-band.is-playing .chip-after { animation: fFade .3s linear var(--sw) both; }
.flow-band.is-playing .chip-bg { animation: fChipOn .3s linear var(--sw) both; }
.flow-band.is-playing .node-glow { animation: fGlow 1.1s ease-out var(--d) both; }
.flow-band.is-playing .f-out { animation: fFade .6s var(--ease) var(--d) both; }
.flow-band.is-playing .flow-clock { animation: fClock 7s linear both; }
.flow-band.is-paused *, .flow-band.is-offscreen * { animation-play-state: paused !important; }
.flow-clock { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@keyframes fFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fSettle { 0% { transform: rotate(var(--r)) translateY(6px); } 55% { transform: rotate(var(--r)); } 100% { transform: rotate(0); } }
@keyframes fDraw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@keyframes fTravel { from { transform: translateX(0); } to { transform: translateX(var(--dx)); } }
@keyframes fChipOn { from { fill: var(--white); stroke: rgba(31, 91, 234, .45); } to { fill: var(--blue); stroke: var(--blue-hi); } }
@keyframes fGlow { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.25); } 100% { opacity: .9; transform: scale(1); } }
@keyframes fClock { from { opacity: 0; } to { opacity: 0; } }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 5vw + 40px, 120px) 0; }
.section-light { background: var(--bg-soft); }
.section-white { background: var(--white); }
.section-pale { background: linear-gradient(180deg, var(--pale), #F7F9FF); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head-center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 12px; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); font-weight: 800; letter-spacing: -0.025em; color: var(--navy); }
.section-sub { margin-top: 16px; color: var(--text-2); font-size: clamp(1rem, .96rem + .2vw, 1.1rem); }

/* ---------- Challenges ---------- */
.challenge-layout { display: grid; gap: 32px; }
.map-panel { order: -1; }
@media (min-width: 1024px) {
  .challenge-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .map-panel { order: 0; position: sticky; top: calc(var(--header-h) + 24px); }
}
.challenge-list { counter-reset: none; display: grid; }
.challenge {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px;
  padding: 24px 0; border-top: 1px solid var(--border);
}
.challenge:last-child { border-bottom: 1px solid var(--border); }
.challenge::before { /* active indicator */
  content: ""; position: absolute; left: -16px; top: 24px; bottom: 24px; width: 3px; border-radius: 3px;
  background: var(--blue); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease);
}
.challenge.is-active::before { transform: scaleY(1); }
.challenge-num { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--blue); padding-top: 2px; letter-spacing: .04em; min-width: 28px; }
.challenge-body h3 { font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.challenge-body > p { color: var(--text-2); }
.challenge-solved { margin-top: 10px; font-size: .88rem; color: var(--text-2) !important; }
.challenge-solved a { display: inline-block; font-weight: 600; padding: 2px 0; }
.mini { grid-column: 2; width: 140px; height: 84px; margin-top: 14px; }
.map-btn { display: none; }
@keyframes map-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .55); } 100% { box-shadow: 0 0 0 18px rgba(37, 99, 235, 0); } }
.map-panel.map-pulse { animation: map-pulse .7s ease-out; }
@media (min-width: 640px) {
  .challenge { grid-template-columns: auto 1fr 150px; }
  .mini { grid-column: 3; grid-row: 1; margin-top: 0; align-self: center; }
}
@media (min-width: 1024px) {
  .challenge { padding: 28px 0 28px 0; }
  .js .map-btn {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; min-height: 44px; padding: 0 16px;
    border-radius: 999px; border: 1px solid rgba(31, 91, 234, .3); background: var(--white); color: var(--blue);
    font-weight: 600; font-size: .88rem; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
  }
  .js .map-btn:hover { background: var(--pale); border-color: var(--blue); }
  .js .map-btn[aria-pressed="true"] { background: var(--blue); color: var(--white); border-color: var(--blue); }
}

/* Mini infographics */
.mini { overflow: visible; }
.m-row { fill: var(--white); stroke: #C9D3E4; }
.m-fill { fill: #C9D6F2; }
.m-count { font: 700 15px var(--font-head); fill: var(--blue); }
.m-db ellipse, .m-db path { fill: var(--white); stroke: #9FB2D3; stroke-width: 1.4; }
.m-broken { fill: none; stroke: #9FB2D3; stroke-width: 1.4; stroke-dasharray: 3 4; }
.m-x { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; }
.m-axis { stroke: #9FB2D3; stroke-width: 1.4; }
.m-bar { fill: var(--blue-soft); transform-box: fill-box; transform-origin: bottom; }
.m-missing { fill: none; stroke: #9FB2D3; stroke-dasharray: 3 3; }
.m-q { font: 800 16px var(--font-head); fill: var(--blue); }
.m-win { fill: #F1F3F7; stroke: #A6B2C6; }
.m-winbar { fill: #D5DBE6; }
.m-old { fill: #DCE1EA; }
.m-hourglass path { fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; }
.m-hourglass { transform-box: fill-box; transform-origin: center; }
.m-bubble { fill: var(--white); stroke: #A6B2C6; }
.m-bubble-wait { fill: var(--pale); stroke: rgba(31, 91, 234, .4); }
.m-dot { fill: var(--blue); }
.m-late { font: 600 11px var(--font-body); fill: var(--text-2); }
.m-hq { fill: var(--blue); }
.m-branch { fill: none; stroke: #9FB2D3; stroke-width: 1.6; }
.m-branch-new { stroke-dasharray: 3 4; }
.m-node { fill: var(--white); stroke: #9FB2D3; }
.m-node-new { fill: none; stroke: var(--blue); stroke-dasharray: 3 3; }

.anim .challenge.is-in .m-r2 { animation: mPop .4s var(--ease) .25s both; }
.anim .challenge.is-in .m-r3 { animation: mPop .4s var(--ease) .45s both; }
.anim .challenge.is-in .m-r4 { animation: mPop .4s var(--ease) .65s both; }
.anim .challenge.is-in .m-count { animation: mPop .4s var(--ease) .8s both; }
.anim .challenge.is-in .m-x { animation: mBlink 1.2s ease .3s 2 both; }
.anim .challenge.is-in .m-bar { animation: mGrow .6s var(--ease) .2s both; }
.anim .challenge.is-in .m-q { animation: mBlink 1.2s ease .6s 2 both; }
.anim .challenge.is-in .m-hourglass { animation: mTurn 1.4s var(--ease) .3s 2 both; }
.anim .challenge.is-in .m-dot { animation: mType 1s ease-in-out .2s 4 both; }
.anim .challenge.is-in .m-dot.m-r2 { animation-delay: .35s; }
.anim .challenge.is-in .m-dot.m-r3 { animation-delay: .5s; }
.anim .challenge.is-in .m-branch-new, .anim .challenge.is-in .m-node-new { animation: mPop .5s var(--ease) .5s both; }
@keyframes mPop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes mBlink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes mGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mTurn { from { transform: rotate(0); } to { transform: rotate(180deg); } }
@keyframes mType { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* Solution map */
.map-sticky {
  position: relative; padding: 18px 12px; border-radius: var(--r-xl); color: var(--on-dark);
  background:
    radial-gradient(400px 260px at 100% 0%, rgba(31, 91, 234, .35), transparent 70%),
    linear-gradient(180deg, var(--surface-dark), var(--navy));
  border: 1px solid var(--line-dark); box-shadow: 0 30px 60px -30px rgba(11, 18, 32, .6);
}
@media (min-width: 768px) { .map-sticky { padding: 28px; } }
.map-kicker { font-family: var(--font-head); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-soft); }
.map-hint { color: var(--on-dark-2); font-size: .9rem; margin: 4px 0 14px; }
.no-js .map-hint { display: none; }
.solution-map { width: 100%; height: auto; max-width: 420px; margin-inline: auto; overflow: visible; }
.solution-map text { font-family: var(--font-body); font-size: 15px; fill: #E6EDFA; pointer-events: none; }
.map-routes path { fill: none; stroke: rgba(143, 184, 255, .22); stroke-width: 1.5; transition: stroke .3s, stroke-width .3s, opacity .3s; }
.map-c rect { fill: #16213A; stroke: rgba(143, 184, 255, .22); stroke-width: 1.2; transition: fill .25s, stroke .25s; }
.map-c .map-n { font-family: var(--font-head); font-weight: 800; font-size: 13px; fill: var(--blue-soft); }
.map-s rect { fill: rgba(31, 91, 234, .12); stroke: rgba(61, 123, 255, .45); stroke-width: 1.2; transition: fill .25s, stroke .25s; }
.map-s text { font-size: 14px; fill: var(--on-dark-2); }
.map-s .map-s-k { font-family: var(--font-head); font-weight: 800; font-size: 17px; fill: var(--white); }
.js .map-c { cursor: pointer; outline: none; }
.map-c:hover rect { stroke: var(--blue-soft); }
.map-c:focus-visible rect { stroke: var(--white); stroke-width: 3; }
.map-c.is-active rect { fill: rgba(31, 91, 234, .35); stroke: var(--blue-hi); stroke-width: 2; }
.has-selection .map-routes path { opacity: .35; }
.has-selection .map-routes path.is-on { opacity: 1; stroke: var(--blue-hi); stroke-width: 2.5; stroke-dasharray: 6 6; }
.anim .has-selection .map-routes path.is-on { animation: mapFlow 1.2s linear infinite; }
.has-selection .map-s:not(.is-on) { opacity: .45; }
.map-s.is-on rect { fill: var(--blue); stroke: var(--blue-soft); }
.map-s.is-on text { fill: var(--white); }
.map-panel.is-offscreen * { animation-play-state: paused !important; }
@keyframes mapFlow { to { stroke-dashoffset: -24; } }
.map-result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-dark); font-size: .92rem; color: var(--on-dark-2); min-height: 72px; }
.map-result strong { color: var(--white); font-family: var(--font-head); }
.map-result ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.map-result a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(143, 184, 255, .35); color: var(--white); text-decoration: none; font-weight: 600; font-size: .88rem;
}
.map-result a:hover { background: rgba(61, 123, 255, .2); border-color: var(--blue-soft); color: var(--white); }

/* ---------- Solution stories ---------- */
.story { padding-top: clamp(48px, 6vw, 88px); }
.story + .story { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--border); }
.story-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) {
  .story-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; }
  .story-flip .story-copy { order: 2; }
}
.story-index { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; color: var(--blue); font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }
.story-index span { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--pale); border: 1px solid rgba(31, 91, 234, .2); }
.story-copy h3 { margin: 14px 0 14px; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem); font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.story-desc { color: var(--text-2); font-size: 1.05rem; }
.list-title { margin: 24px 0 12px; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text); font-weight: 700; }
.check-list { display: grid; gap: 10px; margin-bottom: 18px; }
.check-list li { position: relative; padding-left: 32px; color: var(--text); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 6px;
  background: var(--pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.6L14 7.5' fill='none' stroke='%231F5BEA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  border: 1px solid rgba(31, 91, 234, .2);
}
.check-list-sm li { font-size: .95rem; }

/* Visual containers (dark "screens") */
.story-visual {
  margin: 0; position: relative; border-radius: var(--r-xl); padding: 18px; color: var(--on-dark);
  background:
    radial-gradient(500px 300px at 90% 0%, rgba(31, 91, 234, .32), transparent 65%),
    linear-gradient(180deg, var(--surface-dark), var(--navy));
  border: 1px solid var(--line-dark); box-shadow: 0 40px 80px -40px rgba(31, 91, 234, .5);
  overflow: hidden;
}
@media (min-width: 768px) { .story-visual { padding: 24px; } }
.viz-head { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 18px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 10px var(--blue-hi); }

/* AI: sequential pipeline */
.ai-grid { display: grid; gap: 18px; }
@media (min-width: 560px) { .ai-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.ai-rail { position: relative; display: grid; gap: 10px; }
.ai-rail::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: rgba(143, 184, 255, .2); }
.ai-rail::after { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(var(--blue-hi), var(--blue-soft)); transform-origin: top; }
.ai-rail li { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 0; border-radius: 12px; }
.ai-step-n {
  position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  font: 800 .9rem var(--font-head); background: var(--blue); color: var(--white); box-shadow: 0 0 0 4px rgba(61, 123, 255, .18);
}
.ai-rail strong { display: block; font-family: var(--font-head); color: var(--white); font-size: 1rem; }
.ai-rail small { display: block; color: var(--on-dark-2); font-size: .82rem; line-height: 1.4; }
.ai-card { border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px solid rgba(143, 184, 255, .2); padding: 16px; }
.ai-card-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line-dark); }
.ai-card-top strong { display: block; color: var(--white); font-family: var(--font-head); font-size: .95rem; }
.ai-card-top small { color: var(--on-dark-2); font-size: .8rem; }
.ai-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(61, 123, 255, .2); color: var(--blue-soft); font: 700 .8rem var(--font-head); }
.ai-fields { margin: 10px 0 0; display: grid; gap: 2px; }
.ai-fields div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: .82rem; border-bottom: 1px dashed rgba(143, 184, 255, .12); }
.ai-fields dt { color: var(--on-dark-2); }
.ai-fields dd { margin: 0; color: var(--white); font-weight: 500; text-align: right; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.tag-blue { background: rgba(61, 123, 255, .25); color: #DCE7FF; border: 1px solid rgba(143, 184, 255, .4); }
.ai-agents { display: flex; gap: 8px; margin-top: 12px; }
.ai-agents span { display: grid; place-items: center; flex: 1; height: 34px; border-radius: 10px; font: 700 .8rem var(--font-head); color: var(--on-dark-2); border: 1px solid rgba(143, 184, 255, .2); }
.ai-agents .is-target { background: var(--blue); color: var(--white); border-color: var(--blue-hi); box-shadow: 0 0 18px rgba(61, 123, 255, .5); }
/* AI motion: step-by-step activation */
.anim .viz-ai .ai-rail::after { transform: scaleY(0); }
/* dim only the label, so the (opaque) number circle always hides the rail line */
.anim .viz-ai .ai-rail li > span:last-child { opacity: .45; }
.anim .viz-ai .ai-step-n { background: #22304F; box-shadow: none; }
.anim .viz-ai .ai-fields div, .anim .viz-ai .ai-agents span { opacity: 0; }
.anim .viz-ai .ai-agents .is-target { background: transparent; box-shadow: none; }
.anim .viz-ai.is-in .ai-rail::after { animation: growY 3.6s linear .3s both; }
.anim .viz-ai.is-in .ai-rail li > span:last-child { animation: stepLi .4s var(--ease) calc(var(--i) * .8s + .3s) both; }
.anim .viz-ai.is-in .ai-step-n { animation: stepOn .4s var(--ease) calc(var(--i) * .8s + .3s) both; }
.anim .viz-ai.is-in .ai-fields div, .anim .viz-ai.is-in .ai-agents span { animation: fRise .45s var(--ease) calc(var(--i) * .8s + .45s) both; }
.anim .viz-ai.is-in .ai-agents .is-target { animation: fRise .45s var(--ease) 2.85s both, agentOn .4s linear 3.1s both; }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes stepLi { from { opacity: .45; } to { opacity: 1; } }
@keyframes stepOn { from { background: #22304F; box-shadow: 0 0 0 0 rgba(61, 123, 255, .5); } 60% { box-shadow: 0 0 0 10px rgba(61, 123, 255, 0); } to { background: var(--blue); box-shadow: 0 0 0 4px rgba(61, 123, 255, .18); } }
@keyframes agentOn { from { background: transparent; box-shadow: none; } to { background: var(--blue); box-shadow: 0 0 18px rgba(61, 123, 255, .5); } }

/* DT: assemble scattered records */
.dt-stage { position: relative; display: grid; grid-template-columns: 1fr minmax(76px, .8fr) 1fr; grid-template-rows: auto auto; gap: 14px; align-items: center; }
.dt-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dt-links path { fill: none; stroke: var(--blue-hi); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 5; opacity: .8; }
.dt-tile {
  position: relative; z-index: 1; display: grid; gap: 2px; padding: 12px; border-radius: 14px; min-width: 0;
  background: #17223B; border: 1px solid rgba(61, 123, 255, .45);
}
.dt-tile strong { font-family: var(--font-head); color: var(--white); font-size: .95rem; }
.dt-tile small { color: var(--on-dark-2); font-size: .76rem; line-height: 1.35; }
.dt-ico { color: var(--blue-soft); font-size: 1rem; line-height: 1; }
.dt-stage > .dt-tile:nth-child(2) { grid-area: 1 / 1; }
.dt-stage > .dt-tile:nth-child(3) { grid-area: 1 / 3; }
.dt-stage > .dt-tile:nth-child(5) { grid-area: 2 / 1; }
.dt-stage > .dt-tile:nth-child(6) { grid-area: 2 / 3; }
.dt-hub {
  grid-area: 1 / 2 / 3 / 3; position: relative; z-index: 1; justify-self: center; display: grid; place-items: center;
  width: 100%; max-width: 120px; aspect-ratio: 1; border-radius: 50%; text-align: center;
  background: radial-gradient(circle, #2A55C4, #172A57 60%, #121D36); /* opaque: link lines end at the hub's edge */
  border: 1px solid var(--blue-hi); box-shadow: 0 0 40px rgba(61, 123, 255, .45);
  font: 700 .78rem/1.25 var(--font-head); color: var(--white);
}
.dt-views { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.dt-view { border-radius: 14px; padding: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(143, 184, 255, .18); }
.dt-view-title { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 10px; }
.dt-cat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dt-cat span { aspect-ratio: 1; border-radius: 6px; background: linear-gradient(160deg, rgba(143, 184, 255, .35), rgba(61, 123, 255, .12)); border: 1px solid rgba(143, 184, 255, .2); }
.dt-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; border-bottom: 1px solid rgba(143, 184, 255, .3); }
.dt-bars span { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(var(--blue-hi), var(--blue)); transform-origin: bottom; }
.anim .viz-dt .dt-tile { transform: translate(var(--sx), var(--sy)) rotate(var(--r)); border-style: dashed; border-color: rgba(143, 184, 255, .3); opacity: .7; }
.anim .viz-dt .dt-links path { stroke-dasharray: 300; stroke-dashoffset: 300; }
.anim .viz-dt .dt-hub { opacity: 0; transform: scale(.7); }
.anim .viz-dt .dt-cat span, .anim .viz-dt .dt-view-title { opacity: 0; }
.anim .viz-dt .dt-bars span { transform: scaleY(0); }
.anim .viz-dt.is-in .dt-tile { animation: dtAlign 1s var(--ease) calc(.4s + var(--i) * .12s) both; }
.anim .viz-dt.is-in .dt-hub { animation: dtHub .6s var(--ease) 1.2s both; }
.anim .viz-dt.is-in .dt-links path { animation: dtLink .8s var(--ease) 1.5s both; }
.anim .viz-dt.is-in .dt-view-title { animation: fFade .4s linear 2.1s both; }
.anim .viz-dt.is-in .dt-cat span { animation: fRise .35s var(--ease) both; }
.anim .viz-dt.is-in .dt-cat span:nth-child(1) { animation-delay: 2.2s; } .anim .viz-dt.is-in .dt-cat span:nth-child(2) { animation-delay: 2.28s; }
.anim .viz-dt.is-in .dt-cat span:nth-child(3) { animation-delay: 2.36s; } .anim .viz-dt.is-in .dt-cat span:nth-child(4) { animation-delay: 2.44s; }
.anim .viz-dt.is-in .dt-cat span:nth-child(5) { animation-delay: 2.52s; } .anim .viz-dt.is-in .dt-cat span:nth-child(6) { animation-delay: 2.6s; }
.anim .viz-dt.is-in .dt-bars span { animation: growY .6s var(--ease) both; }
.anim .viz-dt.is-in .dt-bars span:nth-child(1) { animation-delay: 2.3s; } .anim .viz-dt.is-in .dt-bars span:nth-child(2) { animation-delay: 2.4s; }
.anim .viz-dt.is-in .dt-bars span:nth-child(3) { animation-delay: 2.5s; } .anim .viz-dt.is-in .dt-bars span:nth-child(4) { animation-delay: 2.6s; }
.anim .viz-dt.is-in .dt-bars span:nth-child(5) { animation-delay: 2.7s; }
@keyframes dtAlign {
  from { transform: translate(var(--sx), var(--sy)) rotate(var(--r)); opacity: .7; border-style: dashed; border-color: rgba(143, 184, 255, .3); }
  to { transform: none; opacity: 1; border-style: solid; border-color: rgba(61, 123, 255, .45); }
}
@keyframes dtHub { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes dtLink { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }

/* SaaS: modular grid with sync wave */
.saas-access { display: grid; grid-template-columns: 1fr 64px 76px; align-items: center; gap: 0; margin-bottom: 16px; }
.device { position: relative; border: 1px solid rgba(143, 184, 255, .35); background: rgba(255, 255, 255, .04); display: grid; place-items: center; }
.device-web { height: 76px; border-radius: 12px; padding-top: 14px; }
.device-bar { position: absolute; top: 0; left: 0; right: 0; height: 16px; display: flex; gap: 4px; align-items: center; padding-left: 8px; border-bottom: 1px solid rgba(143, 184, 255, .2); }
.device-bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(143, 184, 255, .5); }
.device-mobile { height: 96px; border-radius: 16px; }
.device-notch { position: absolute; top: 6px; width: 20px; height: 4px; border-radius: 4px; background: rgba(143, 184, 255, .4); }
.device-label { font: 600 .78rem var(--font-head); color: var(--white); }
.saas-bus { position: relative; height: 2px; background: rgba(143, 184, 255, .25); overflow: hidden; }
.saas-bus span { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--blue-hi), transparent); transform: translateX(-100%); }
.saas-grid { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid rgba(61, 123, 255, .35); background: rgba(31, 91, 234, .07); }
.saas-grid::before { content: "One platform"; position: absolute; top: -10px; left: 14px; padding: 0 8px; font: 700 .7rem var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-soft); background: var(--navy); border-radius: 6px; }
@media (min-width: 480px) { .saas-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .saas-grid { grid-template-columns: repeat(5, 1fr); } }
.saas-grid li {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border-radius: 10px;
  background: #16213A; border: 1px solid rgba(143, 184, 255, .3); font-size: .82rem; font-weight: 500; color: var(--white); line-height: 1.25;
}
.saas-grid li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 8px var(--blue-hi); }
.anim .viz-saas .saas-grid li { border-color: rgba(143, 184, 255, .12); color: var(--on-dark-2); }
.anim .viz-saas .saas-grid li::before { background: #2A3858; box-shadow: none; }
.anim .viz-saas.is-in .saas-bus span { animation: busRun 1.4s ease-in-out .2s 2 both; }
.anim .viz-saas.is-in .saas-grid li { animation: syncCell .7s var(--ease) calc(.9s + var(--i) * .14s) both; }
.anim .viz-saas.is-in .saas-grid li::before { animation: syncDot .5s var(--ease) calc(1s + var(--i) * .14s) both; }
@keyframes busRun { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes syncCell {
  0% { border-color: rgba(143, 184, 255, .12); color: var(--on-dark-2); }
  45% { border-color: var(--blue-hi); box-shadow: 0 0 0 3px rgba(61, 123, 255, .25); color: var(--white); }
  100% { border-color: rgba(143, 184, 255, .3); box-shadow: none; color: var(--white); }
}
@keyframes syncDot { from { background: #2A3858; box-shadow: none; transform: scale(.5); } to { background: var(--blue-hi); box-shadow: 0 0 8px var(--blue-hi); transform: none; } }

/* Case studies */
.case { margin-top: clamp(32px, 4vw, 48px); border-radius: var(--r-xl); padding: 24px 20px; position: relative; }
@media (min-width: 768px) { .case { padding: 36px 40px; } }
.case-label {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font: 700 .75rem var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
}
.case-label::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.case-title { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.case p { color: var(--text-2); }
.case .btn { margin-top: 20px; }
.case-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .case-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; } }

.case-ai { background: var(--bg-soft); border: 1px solid var(--border); }
.case-ai .case-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; border-radius: var(--r-lg); background: var(--navy); color: var(--white); }
.stat { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-dark); }
.stat-value { font: 800 clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem)/1 var(--font-head); letter-spacing: -0.03em; color: var(--white); }
.stat-label { font-size: .85rem; color: var(--on-dark-2); line-height: 1.35; }
.stat-note { grid-column: 1 / -1; font-size: .78rem; color: var(--blue-soft) !important; letter-spacing: .04em; }

.case-dt { background: var(--navy); color: var(--on-dark); overflow: hidden; }
.case-dt::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(61, 123, 255, .35), transparent 65%); pointer-events: none; }
.case-dt .case-label { color: var(--blue-soft); }
.case-dt .case-title { color: var(--white); }
.case-dt p { color: var(--on-dark-2); }
.case-dt .btn-outline { background: transparent; color: var(--white); border-color: rgba(143, 184, 255, .45); }
.case-dt .btn-outline:hover { background: rgba(61, 123, 255, .15); border-color: var(--blue-soft); }
.case-dt .case-stats { position: relative; z-index: 1; text-align: center; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03); }
.stat-xl { background: none; border: 0; padding: 0; }
.stat-xl .stat-value { font-size: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); background: linear-gradient(180deg, #fff, var(--blue-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-xl .stat-label { font: 700 1.1rem var(--font-head); color: var(--white); text-transform: uppercase; letter-spacing: .14em; }

.case-saas { background: linear-gradient(180deg, var(--pale), var(--white)); border: 1px solid rgba(31, 91, 234, .18); }
.csr { display: grid; gap: 14px; margin: 8px 0 4px; counter-reset: csr; }
@media (min-width: 900px) { .csr { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.csr-item { position: relative; padding: 20px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.csr-k { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font: 800 1rem var(--font-head); color: var(--navy) !important; }
.csr-k span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: .8rem; background: var(--pale); color: var(--blue); }
.csr-result { background: var(--navy); border-color: var(--navy); }
.csr-result p { color: var(--on-dark-2); }
.csr-result .csr-k { color: var(--white) !important; }
.csr-result .csr-k span { background: var(--blue); color: var(--white); }
@media (min-width: 900px) {
  .csr-item:not(:last-child)::after { /* connector between C/S/R */
    content: ""; position: absolute; top: 34px; right: -21px; width: 22px; height: 2px; background: var(--blue-soft);
  }
}

/* ---------- Industries ---------- */
.industries { display: grid; gap: 24px; }
.industry { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 24px 20px; box-shadow: var(--shadow-md); }
@media (min-width: 768px) { .industry { padding: 36px; } }
.industry-copy { display: grid; gap: 12px 48px; }
@media (min-width: 900px) {
  .industry-copy { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .industry-copy > .check-list { grid-column: 2; grid-row: 1 / 4; align-self: center; margin: 0; padding-left: 32px; border-left: 1px solid var(--border); }
}
.industry-tag { font: 700 .75rem var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.industry h3 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); font-weight: 800; color: var(--navy); }
.industry-copy > p:not(.industry-tag) { color: var(--text-2); }

.process { margin: 28px 0 0; padding: 20px; border-radius: var(--r-lg); background: var(--bg-soft); border: 1px solid var(--border); }
.process figcaption { font: 700 .78rem var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 14px; }
.no-js .process figcaption { font-size: 0; margin: 0; }
.process-steps { display: grid; gap: 0; counter-reset: none; }
.process-steps li { display: grid; }
.pstep {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--white); cursor: pointer; text-align: left;
  transition: border-color .2s, box-shadow .2s, background-color .2s, transform .2s;
}
.no-js .pstep { cursor: default; }
.pstep:hover { border-color: rgba(31, 91, 234, .45); }
.pstep[aria-pressed="true"] { border-color: var(--blue); background: var(--pale); box-shadow: 0 0 0 4px rgba(31, 91, 234, .14), 0 10px 24px -12px rgba(31, 91, 234, .6); }
.pstep-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 800 .78rem var(--font-head); background: var(--navy); color: var(--white); }
.pstep[aria-pressed="true"] .pstep-n { background: var(--blue); }
.pstep-ico { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pstep-l { font: 700 .95rem var(--font-head); color: var(--navy); line-height: 1.25; }
.pconn {
  position: relative; display: flex; align-items: center; min-height: 40px; margin-left: 26px; padding-left: 24px;
  font-size: .78rem; font-weight: 600; color: var(--blue); letter-spacing: .02em;
}
.pconn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--blue-soft), var(--blue)); transform-origin: top; }
.pconn::after { content: ""; position: absolute; left: -4px; bottom: 2px; width: 6px; height: 6px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg); }
.process-detail { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--white); border: 1px dashed rgba(31, 91, 234, .35); font-size: .92rem; color: var(--text); min-height: 48px; }
.no-js .process-detail { display: none; }

@media (min-width: 960px) {
  .process { padding: 24px 28px; }
  .process-steps { display: flex; align-items: stretch; }
  .process-steps li { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
  .process-steps li:last-child { flex: 0 0 auto; }
  .pstep { flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 112px; min-height: 120px; padding: 14px 8px; text-align: center; }
  .pstep-n { position: absolute; top: -10px; left: -10px; }
  .pstep-ico { width: 28px; height: 28px; }
  .pstep-l { font-size: .88rem; }
  .pconn { flex: 1; min-width: 0; min-height: 0; margin: 0 6px; padding: 0 0 14px; justify-content: center; text-align: center; font-size: .72rem; line-height: 1.25; }
  .pconn::before { top: auto; bottom: 4px; left: 0; right: 4px; width: auto; height: 2px; background: linear-gradient(90deg, var(--blue-soft), var(--blue)); transform-origin: left; }
  .pconn::after { left: auto; right: 1px; bottom: 1px; transform: rotate(-45deg); }
  .process-4 .pstep { width: 140px; }
}
@media (min-width: 1200px) { .pstep { width: 124px; } .process-4 .pstep { width: 150px; } }
.anim .industry .pconn::before { transform: scaleY(0); }
.anim .industry.is-in .pconn::before { animation: growY .5s var(--ease) both; }
.anim .industry.is-in li:nth-child(1) .pconn::before { animation-delay: .4s; }
.anim .industry.is-in li:nth-child(2) .pconn::before { animation-delay: .6s; }
.anim .industry.is-in li:nth-child(3) .pconn::before { animation-delay: .8s; }
.anim .industry.is-in li:nth-child(4) .pconn::before { animation-delay: 1s; }
@media (min-width: 960px) {
  .anim .industry .pconn::before { transform: scaleX(0); }
  .anim .industry.is-in .pconn::before { animation-name: growX; }
}
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Why Aarvi timeline ---------- */
.tl-list { position: relative; display: grid; gap: 16px; padding-left: 40px; }
.tl-list::before { content: ""; position: absolute; left: 13px; top: 12px; bottom: 12px; width: 2px; background: var(--border); }
.tl-list::after { content: ""; position: absolute; left: 13px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--blue-hi), var(--blue)); transform-origin: top; }
.tl-item { position: relative; z-index: 1; padding: 22px 22px 24px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.tl-dot { position: absolute; left: -36px; top: 26px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 2px solid var(--blue); box-shadow: 0 0 0 5px var(--pale); }
.tl-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--blue); }
.tl-phase { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--blue); margin-bottom: 10px; }
.tl-phase span { padding: 2px 9px; border-radius: 999px; background: var(--pale); font: 700 .72rem var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.tl-item h3 { font-size: 1.25rem; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.tl-item > p:last-child { color: var(--text-2); }
.anim [data-timeline] .tl-list::after { transform: scaleY(0); }
.anim [data-timeline].is-in .tl-list::after { animation: growY 1.4s var(--ease) .2s both; }
.anim [data-timeline] .tl-dot { transform: scale(0); }
.anim [data-timeline].is-in .tl-dot { animation: dotIn .4s var(--ease) calc(.35s + var(--i) * .3s) both; }
@keyframes dotIn { from { transform: scale(0); } to { transform: scale(1); } }

@media (min-width: 1024px) {
  /* Staggered path: cards 1 & 3 above the track, 2 & 4 below */
  .tl-list { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 160px auto; gap: 0 24px; padding-left: 0; }
  .tl-list::before, .tl-list::after {
    left: 0; top: 0; bottom: auto; width: auto; position: static; grid-row: 2; grid-column: 1 / -1; height: 160px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 160' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 60 40 70 40 125 40 S 310 120 375 120 S 560 40 625 40 S 810 120 875 120 L 1000 120' fill='none' stroke='%23E5E9F0' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  .tl-list::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 160' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%238FB8FF'/%3E%3Cstop offset='1' stop-color='%231F5BEA'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 40 C 60 40 70 40 125 40 S 310 120 375 120 S 560 40 625 40 S 810 120 875 120 L 1000 120' fill='none' stroke='url(%23g)' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    transform: none; clip-path: inset(0 0 0 0);
  }
  .tl-item:nth-child(1) { grid-column: 1; grid-row: 1; }
  .tl-item:nth-child(2) { grid-column: 2; grid-row: 3; }
  .tl-item:nth-child(3) { grid-column: 3; grid-row: 1; }
  .tl-item:nth-child(4) { grid-column: 4; grid-row: 3; }
  .tl-item:nth-child(odd) { align-self: end; }
  .tl-item:nth-child(even) { align-self: start; }
  .tl-item::after { content: ""; position: absolute; left: calc(50% - 1px); width: 2px; height: 40px; background: linear-gradient(var(--blue-soft), var(--blue)); }
  .tl-item:nth-child(odd)::after { top: 100%; }
  .tl-item:nth-child(even)::after { bottom: 100%; }
  .tl-dot { left: calc(50% - 10px); }
  .tl-item:nth-child(odd) .tl-dot { top: calc(100% + 30px); }
  .tl-item:nth-child(even) .tl-dot { top: auto; bottom: calc(100% + 30px); }
  .anim [data-timeline] .tl-list::after { transform: none; clip-path: inset(0 100% 0 0); }
  .anim [data-timeline].is-in .tl-list::after { animation: clipDraw 1.6s var(--ease) .2s both; }
}
@keyframes clipDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Final CTA ---------- */
.cta {
  position: relative; overflow: hidden; color: var(--on-dark); padding: clamp(72px, 6vw + 40px, 128px) 0;
  background:
    radial-gradient(800px 420px at 15% 110%, rgba(31, 91, 234, .35), transparent 60%),
    radial-gradient(600px 400px at 100% 0%, rgba(61, 123, 255, .2), transparent 60%),
    var(--navy);
}
.cta-edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cta-edge rect { fill: none; }
.edge-base { stroke: rgba(143, 184, 255, .14); stroke-width: 1; stroke-dasharray: 2 8; }
.edge-run { stroke: var(--blue-hi); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 70 930; filter: drop-shadow(0 0 4px rgba(61, 123, 255, .9)); opacity: 0; }
.anim .cta .edge-run { opacity: 1; animation: edgeRun 16s linear infinite; }
.anim .cta .edge-run-2 { animation-delay: -8s; }
.cta.is-offscreen .edge-run { animation-play-state: paused; }
@keyframes edgeRun { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.cta-grid { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .cta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.cta h2 { margin: 18px 0 16px; font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -0.025em; color: var(--white); }
.cta-lead { color: var(--on-dark-2); font-size: 1.1rem; max-width: 52ch; }
.cta-contact { display: grid; gap: 10px; margin: 28px 0 12px; }
.cta-contact li { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cta-contact-k { min-width: 52px; font: 700 .75rem var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-soft); }
.cta-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); font-weight: 600; font-size: 1.05rem; text-decoration: none; word-break: break-word; }
.cta-contact a:hover { text-decoration: underline; color: var(--white); }
.form-card-cta .form-title { margin-bottom: 18px; }
.btn-row-form .btn { flex: 1 1 200px; }

/* ---------- Footer ---------- */
.site-footer { background: #080E1A; color: var(--on-dark-2); padding: 64px 0 24px; font-size: .95rem; border-top: 1px solid var(--line-dark); }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr .9fr 1.1fr 1.4fr; gap: 48px; } }
.footer-about img { width: 150px; height: auto; margin-bottom: 18px; }
.footer-h { font: 700 .8rem var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--white); margin-bottom: 12px; }
.footer-h-sm { margin-top: 22px; }
.footer-col ul { display: grid; gap: 2px; }
.site-footer a { color: var(--on-dark-2); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-col li > a, .footer-col li > span { display: inline-flex; align-items: center; min-height: 44px; }
.footer-col address p { margin-bottom: 8px; }
.footer-col address a { display: inline-flex; align-items: center; min-height: 44px; }
.f-k { color: var(--white); font-weight: 600; }
.social { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.social li > span, .social li > a { padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-dark); font-size: .85rem; }
.social li > a:hover { border-color: var(--blue); text-decoration: none; }
.link-pending { color: var(--on-dark-2); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 20px; font-size: .85rem; position: relative; }
.footer-bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line-dark); }
.legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ---------- Reveal ---------- */
.anim .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--reveal-ms) var(--ease), transform var(--reveal-ms) var(--ease); transition-delay: calc(var(--rd, 0) * 70ms); }
.anim .reveal.is-in { opacity: 1; transform: none; }
/* Restrained sibling stagger */
.reveal:nth-child(2) { --rd: 1; } .reveal:nth-child(3) { --rd: 2; } .reveal:nth-child(4) { --rd: 3; } .reveal:nth-child(n+5) { --rd: 4; }

/* ---------- Reduced motion: static, final states ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .flow-controls, .js .flow-controls { display: none; }
}

/* ---- 2026-10-12: approach step detail, results and case studies, spam honeypot ---- */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ap-body p { margin-top: 4px; color: var(--text-2); font-size: .95rem; line-height: 1.5; }
.proof-stats { display: grid; gap: 12px; margin-bottom: 24px; }
@media (min-width: 640px) { .proof-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proof-stat { padding: 20px; border-radius: var(--r-lg); background: var(--navy); color: var(--white); text-align: center; }
.proof-stat b { display: block; font: 800 clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem)/1.1 var(--font-head); color: var(--blue-soft); }
.proof-stat span { display: block; margin-top: 6px; font-size: .95rem; color: rgba(255, 255, 255, .86); }
.proof-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .proof-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 20px; } }
.proof-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.proof-k { font: 700 .75rem var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.proof-card h3 { font-size: 1.15rem; font-weight: 800; color: var(--navy); line-height: 1.35; }
.proof-card p { color: var(--text-2); }
.proof-card a { margin-top: auto; padding-top: 4px; font-weight: 700; text-decoration: none; }
.proof-card a:hover { text-decoration: underline; }
.proof-more { margin-top: 20px; padding: 22px; border-radius: var(--r-lg); background: var(--pale); border: 1px solid var(--border); }
.proof-more h3 { font-size: 1.05rem; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.proof-more p { color: var(--text-2); }
.proof-more ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }
.proof-more a { font-weight: 700; }
.proof-testi { margin-top: clamp(40px, 5vw, 64px); }

.testi {
  position: relative; max-width: 860px; margin: 0 auto; padding: 32px 24px; border-radius: var(--r-xl); text-align: center;
  background: linear-gradient(180deg, var(--white), var(--pale)); border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
@media (min-width: 768px) { .testi { padding: 48px 56px; } }
.testi-mark { margin: 0 auto 18px; color: var(--blue-soft); }
.testi blockquote { margin: 0; }
.testi blockquote p { font-family: var(--font-head); font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); font-weight: 600; line-height: 1.5; color: var(--navy); }
.testi figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 26px; text-align: left; }
.testi-av { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); font: 800 1rem var(--font-head); }
.testi strong { display: block; color: var(--navy); }
.testi-role { display: block; font-size: .92rem; color: var(--text-2); }
.testi-src { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(31, 91, 234, .3); font-size: 1rem; font-weight: 600; text-decoration: none; background: var(--white); }
.faq-wrap { display: grid; gap: 8px; }
@media (min-width: 1024px) { .faq-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 56px; align-items: start; } }
.faq { display: grid; gap: 12px; }
.faq-item { border-radius: var(--r-md); background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.faq-item[open] { border-color: rgba(31, 91, 234, .35); box-shadow: var(--shadow-md); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: var(--r-md); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); line-height: 1.4; }
.faq-ico { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--pale); }
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--blue); transition: transform .25s var(--ease); }
.faq-ico::after { transform: rotate(90deg); }
.faq-item[open] .faq-ico::after { transform: rotate(0); }
.faq-a { padding: 0 18px 18px; color: var(--text-2); }
.industry h3 a { color: inherit; text-decoration: none; }
.industry h3 a:hover { color: var(--blue); text-decoration: underline; }
.industry-copy .text-link { justify-self: start; }