/* ============================================================
   DIGINNOVATORS DESIGN SYSTEM — colors_and_type.css
   Futuristic · Premium · Minimal · AI-native
   Dark-first (light mode opt-in via [data-theme="light"])
   ============================================================ */
/* ============================================================
   DIGINNOVATORS DESIGN SYSTEM
   ============================================================ */

/* ── FONTS (CDN) ── */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── 1. COLOR SYSTEM ── */
:root,
[data-theme="dark"] {
  /* ── Brand / Signal ── */
  --brand-blue:        #2051F9;   /* signature AI-native accent */
  --brand-blue-soft:   #A6BFFF;
  --brand-blue-deep:   #1A3FCC;
  --brand-cyan:        #68A3F7;   /* secondary, data + intelligence */
  --brand-cyan-deep:   #3D7DDD;
  --brand-ink:         #07080A;   /* canonical near-black */

  /* ── Neutrals (dark mode) ──
     Cool, slightly blue-shifted graphite — never pure black, never pure grey. */
  --bg-canvas:         #07080A;   /* page background */
  --bg-surface:        #0E1014;   /* cards, raised panels */
  --bg-surface-2:      #14171D;   /* nested surface */
  --bg-surface-3:      #1B1F27;   /* hover / focus surfaces */
  --bg-inverse:        #F4F6F8;   /* used for inverse blocks */

  --line-hairline:     #1A1D24;   /* default 1px stroke */
  --line-soft:         #242832;   /* mid stroke */
  --line-strong:       #3A4050;   /* divider for prominent edges */

  --fg-primary:        #F4F6F8;   /* body text */
  --fg-secondary:      #A1A7B5;   /* secondary copy */
  --fg-muted:          #6B7184;   /* metadata / labels */
  --fg-faint:          #444A58;   /* placeholder / disabled */
  --fg-inverse:        #07080A;

  /* ── Semantic ── */
  --success:           #4ADE80;
  --success-soft:      #16341F;
  --warning:           #F5C04A;
  --warning-soft:      #3A2E0F;
  --danger:            #FF6B6B;
  --danger-soft:       #3A1414;
  --info:              #68A3F7;
  --info-soft:         #0A1A33;

  /* ── Accent surfaces ── */
  --accent-bg:         rgba(32, 81, 249, 0.10);
  --accent-bg-hover:   rgba(32, 81, 249, 0.16);
  --accent-line:       rgba(32, 81, 249, 0.32);
  --on-accent:         #FFFFFF;   /* white text on brand blue */

  /* ── AI shimmer (used sparingly, e.g. badges / tag glow only) ── */
  --ai-gradient: linear-gradient(110deg, #2051F9 0%, #68A3F7 55%, #2051F9 100%);
  --ai-gradient-soft: linear-gradient(110deg, rgba(32, 81, 249,.35) 0%, rgba(104, 163, 247,.35) 100%);
  --ai-mesh:
    radial-gradient(at 12% 18%, rgba(32, 81, 249,0.14) 0%, transparent 42%),
    radial-gradient(at 88% 82%, rgba(104, 163, 247,0.10) 0%, transparent 48%);

  /* ── Effects ── */
  --shadow-xs:  0 1px 0 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:  0 1px 0 0 rgba(255,255,255,0.04) inset, 0 2px 6px rgba(0,0,0,0.35);
  --shadow-md:  0 1px 0 0 rgba(255,255,255,0.05) inset, 0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg:  0 1px 0 0 rgba(255,255,255,0.05) inset, 0 18px 48px rgba(0,0,0,0.55);
  --shadow-xl:  0 1px 0 0 rgba(255,255,255,0.06) inset, 0 32px 80px rgba(0,0,0,0.65);
  --shadow-glow-blue: 0 0 0 1px rgba(32, 81, 249,0.4), 0 0 32px -4px rgba(32, 81, 249,0.45);
  --shadow-glow-cyan: 0 0 0 1px rgba(104, 163, 247,0.4), 0 0 32px -4px rgba(104, 163, 247,0.4);
  --shadow-inset-hi:  inset 0 1px 0 rgba(255,255,255,0.06);

  --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--brand-blue);
}

/* ── LIGHT MODE ──
   Warm-cool off-white. Brand blue retains white text on top. */
[data-theme="light"] {
  --bg-canvas:         #FAFAF7;
  --bg-surface:        #FFFFFF;
  --bg-surface-2:      #F2F3EE;
  --bg-surface-3:      #E8EAE3;
  --bg-inverse:        #07080A;

  --line-hairline:     #E6E7E1;
  --line-soft:         #D2D4CC;
  --line-strong:       #9BA0A8;

  --fg-primary:        #07080A;
  --fg-secondary:      #3F4654;
  --fg-muted:          #6B7184;
  --fg-faint:          #A6ABB6;
  --fg-inverse:        #FAFAF7;

  --success-soft:      #E7F7EC;
  --warning-soft:      #FBF1D9;
  --danger-soft:       #FBE5E5;
  --info-soft:         #E0F6FB;

  --accent-bg:         rgba(32, 81, 249, 0.10);
  --accent-bg-hover:   rgba(32, 81, 249, 0.18);
  --accent-line:       rgba(26, 63, 204, 0.55);
  --on-accent:         #FFFFFF;

  --ai-mesh:
    radial-gradient(at 12% 18%, rgba(32, 81, 249,0.20) 0%, transparent 42%),
    radial-gradient(at 88% 82%, rgba(104, 163, 247,0.18) 0%, transparent 48%);

  --shadow-xs:  0 1px 1px rgba(15,17,22,0.04);
  --shadow-sm:  0 1px 2px rgba(15,17,22,0.06), 0 1px 3px rgba(15,17,22,0.04);
  --shadow-md:  0 4px 12px rgba(15,17,22,0.07), 0 1px 3px rgba(15,17,22,0.05);
  --shadow-lg:  0 12px 32px rgba(15,17,22,0.10), 0 2px 6px rgba(15,17,22,0.05);
  --shadow-xl:  0 24px 64px rgba(15,17,22,0.14);
  --shadow-glow-blue: 0 0 0 1px rgba(26, 63, 204,0.5), 0 0 28px -2px rgba(32, 81, 249,0.55);

  --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--brand-blue-deep);
}

/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */
:root {
  /* Family tokens */
  --font-display: "General Sans", "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — modular, 1.250 (major third) at the upper end,
     stepping down to 1.125 for finer UI sizes.
     Set in REMs so users can scale; px values shown for reference. */
  --text-2xs:  0.6875rem;   /* 11 */
  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.8125rem;   /* 13 */
  --text-md:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-lg:   1.125rem;    /* 18 */
  --text-xl:   1.375rem;    /* 22 */
  --text-2xl:  1.75rem;     /* 28 */
  --text-3xl:  2.25rem;     /* 36 */
  --text-4xl:  3rem;        /* 48 */
  --text-5xl:  4rem;        /* 64 */
  --text-6xl:  5.25rem;     /* 84 */
  --text-7xl:  7rem;        /* 112 — display only */

  --leading-tight:  1.05;
  --leading-snug:   1.18;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  --tracking-tightest: -0.04em;
  --tracking-tighter:  -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;     /* eyebrow / mono labels */
  --tracking-widest:   0.16em;     /* system tags */
}

/* ── Semantic type styles ──
   Apply as a class OR as plain element styles via `:where()` so they inherit cleanly. */

.display-1, h1.display, .h-display-1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 5vw + 1rem, var(--text-7xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--fg-primary);
}
.display-2, h1, .h-display-2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 3.5vw + 0.5rem, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-primary);
}
.heading-1, h2, .h-1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.8vw + 1rem, var(--text-3xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.heading-2, h3, .h-2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.heading-3, h4, .h-3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--fg-primary);
}
.heading-4, h5, .h-4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

.body-lg     { font-family: var(--font-body); font-weight: 400; font-size: var(--text-lg);   line-height: var(--leading-relaxed); color: var(--fg-secondary); }
.body, p     { font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-normal);  color: var(--fg-secondary); }
.body-sm     { font-family: var(--font-body); font-weight: 400; font-size: var(--text-md);   line-height: var(--leading-normal);  color: var(--fg-secondary); }
.body-xs     { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm);   line-height: var(--leading-normal);  color: var(--fg-muted); }

/* Eyebrow — the system's signature label style.
   Always uppercase + monospaced + tracked. */
.eyebrow, .label-system {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow--accent { color: var(--brand-blue); }

/* Mono inline + block */
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "ss01", "ss02", "calt", "zero";
  color: var(--fg-primary);
}
:where(code):not(pre code) {
  background: var(--bg-surface-2);
  border: 1px solid var(--line-hairline);
  border-radius: 4px;
  padding: 0.08em 0.34em;
  font-size: 0.85em;
}

/* Numeric callouts ("01/04") use mono + tabular numbers */
.numeric, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ============================================================
   3. RADIUS · SPACING · GRID · MOTION
   ============================================================ */
:root {
  /* Radius — restrained; nothing more than 24px on UI surfaces */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;        /* default for cards / inputs / buttons */
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;     /* pills & chips only */

  /* Spacing — 4px base */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;
  --space-13: 160px;

  /* Container & grid */
  --grid-columns: 12;
  --grid-gutter:  24px;
  --grid-margin:  48px;
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;     /* max content width on marketing */
  --container-3xl: 1680px;     /* extra-wide hero only */

  /* Breakpoints (for reference / JS) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* Motion */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);     /* signature: snappy + tactile */
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);   /* used sparingly */
  --ease-linear:     linear;

  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    360ms;
  --dur-slower:  560ms;
  --dur-marquee: 24s;

  /* Z-index */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-overlay: 2000;
  --z-modal: 3000;
  --z-toast: 4000;
  --z-tooltip: 5000;
}

/* ============================================================
   4. BASE
   ============================================================ */
html { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

body {
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--brand-blue); color: var(--on-accent); }

*:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

/* ============================================================
   Diginnovators Homepage — site styles
   Builds on colors_and_type.css tokens.
   ============================================================ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Containers ── */
.container { max-width: 1392px; margin: 0 auto; padding: 0 48px; }
.container-wide { max-width: 1680px; margin: 0 auto; padding: 0 48px; }

/* ============================================================
   NAV — pill-style centered nav (Nexchain-inspired)
   ============================================================ */
.nav-wrap {
  position: sticky; top: 0; z-index: var(--z-sticky);
  padding: 18px 0;
  background: linear-gradient(180deg, rgba(7,8,10,0.92), rgba(7,8,10,0.55) 70%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav .brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--fg-primary);
}
.nav .brand-mark { width: 28px; height: 28px; }
.nav .brand-wm { height: 18px; }
.nav .brand-bar { width: 1px; height: 18px; background: var(--line-soft); margin: 0 4px; }
.nav .brand-tag {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.nav-pill {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 6px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  backdrop-filter: none;
  justify-self: center;
}
.nav-link {
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  color: var(--fg-secondary); text-decoration: none;
  padding: 9px 13px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 160ms var(--ease-out);
  white-space: nowrap;
}
.nav-link:hover { color: var(--fg-primary); background: var(--bg-surface-2); }
.nav-link.active {
  background: linear-gradient(180deg, rgba(32,81,249,0.18), rgba(32,81,249,0.06));
  color: var(--fg-primary);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.nav-link.is-open { color: var(--fg-primary); }
.nav-link.is-open .chev { transform: rotate(180deg); transition: transform 180ms var(--ease-out); }

/* ============================================================
   MEGA MENU
   ============================================================ */
.mega-menu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  padding: 4px 0 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              visibility 0s linear 200ms;
  z-index: var(--z-sticky);
  pointer-events: none;
}
.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 220ms var(--ease-out),
              transform 220ms var(--ease-out),
              visibility 0s linear 0s;
  pointer-events: auto;
}
.mega-panel {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  background: #FFFFFF;
  border: 1px solid var(--line-hairline);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 24px 60px rgba(15,30,80,0.16),
    0 8px 20px rgba(15,30,80,0.06);
  overflow: hidden;
}
[data-theme="dark"] .mega-panel {
  background: #0E1118;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 60px rgba(0,0,0,0.55);
}

/* Left side — columns */
.mega-cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 24px 24px;
  border-right: 1px solid var(--line-hairline);
}
.mega-col {
  display: flex; flex-direction: column;
  min-width: 0;
}

.mega-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.mega-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--fg-primary);
  transition: background 160ms var(--ease-out);
  position: relative;
}
.mega-item::after {
  content: "→";
  position: absolute;
  top: 50%; right: 12px;
  transform: translateY(-50%) translateX(-4px);
  color: var(--brand-blue);
  font-family: var(--font-mono);
  font-size: 14px;
  opacity: 0;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.mega-item:hover {
  background: linear-gradient(135deg, rgba(32,81,249,0.06), rgba(104,163,247,0.03));
}
.mega-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.mega-ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(180deg, #F4F6FB, #E8EEFB);
  border: 1px solid rgba(32,81,249,0.18);
  color: var(--brand-blue);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all 160ms var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
[data-theme="dark"] .mega-ic {
  background: linear-gradient(180deg, rgba(32,81,249,0.14), rgba(32,81,249,0.06));
  border-color: rgba(104,163,247,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.mega-item:hover .mega-ic {
  background: linear-gradient(180deg, #3F6BFF, var(--brand-blue));
  color: white;
  border-color: var(--brand-blue);
  box-shadow: 0 6px 16px rgba(32,81,249,0.30), inset 0 1px 0 rgba(255,255,255,0.25);
}
.mega-ic svg { width: 17px; height: 17px; }

.mega-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 14.5px; line-height: 1.2; letter-spacing: -0.005em;
  color: var(--fg-primary);
}
.mega-sub {
  font-family: var(--font-body); font-size: 12.5px;
  line-height: 1.4; color: var(--fg-muted);
}

/* Right side — feature card with themed visual + readable content */
.mega-feature {
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: var(--fg-primary);
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
}

/* Themed visual block — gradient + large lucide icon + abstract grid overlay */
.mega-feat-visual {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 30% 30%, rgba(63,107,255,0.25), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(217,70,239,0.20), transparent 60%),
    linear-gradient(135deg, #0E1430 0%, #1A2050 60%, #0E1430 100%);
}
.mega-feat-visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.7;
}
.mega-feat-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,0.10), transparent 50%);
  pointer-events: none;
}
.mega-feat-visual-icon {
  position: relative;
  z-index: 2;
  width: 88px; height: 88px;
  border-radius: 24px;
  display: grid; place-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.06)),
    rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 14px 28px rgba(8,12,40,0.30);
  transition: transform 320ms var(--ease-out);
}
.mega-feat-visual-icon svg { width: 38px; height: 38px; }
.mega-feature:hover .mega-feat-visual-icon { transform: scale(1.06); }
.mega-feat-visual-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Per-kind gradient variants */
.mega-feature--about .mega-feat-visual {
  background:
    radial-gradient(ellipse 80% 70% at 25% 30%, rgba(34,211,238,0.30), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(63,107,255,0.28), transparent 60%),
    linear-gradient(135deg, #0B1632 0%, #0F2056 60%, #0B1632 100%);
}
.mega-feature--services .mega-feat-visual {
  background:
    radial-gradient(ellipse 80% 70% at 25% 30%, rgba(63,107,255,0.32), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(139,92,246,0.28), transparent 60%),
    linear-gradient(135deg, #0E1334 0%, #1B1C5C 60%, #0E1334 100%);
}
.mega-feature--solutions .mega-feat-visual {
  background:
    radial-gradient(ellipse 80% 70% at 25% 30%, rgba(255,79,79,0.25), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(63,107,255,0.30), transparent 60%),
    linear-gradient(135deg, #2A0F1A 0%, #1A1450 60%, #2A0F1A 100%);
}
.mega-feature--industries .mega-feat-visual {
  background:
    radial-gradient(ellipse 80% 70% at 25% 30%, rgba(217,70,239,0.28), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(34,211,238,0.24), transparent 60%),
    linear-gradient(135deg, #1A0A2E 0%, #0E2840 60%, #1A0A2E 100%);
}
.mega-feature--resources .mega-feat-visual {
  background:
    radial-gradient(ellipse 80% 70% at 25% 30%, rgba(255,153,0,0.20), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(217,70,239,0.24), transparent 60%),
    linear-gradient(135deg, #2A1605 0%, #2A0F40 60%, #2A1605 100%);
}

/* Content area — solid surface for max readability */
.mega-feat-body {
  position: relative;
  padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-surface);
  border-top: 1px solid var(--line-hairline);
}
.mega-feat-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand-blue);
}
.mega-feat-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 19px; line-height: 1.25; letter-spacing: -0.015em;
  color: var(--fg-primary);
  margin: 0;
  text-wrap: balance;
}
.mega-feat-sub {
  font-family: var(--font-body); font-size: 13.5px;
  line-height: 1.55; color: var(--fg-secondary);
  margin: 0;
}
.mega-feat-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--brand-blue);
  margin-top: 4px;
}
.mega-feat-cta .arr {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--brand-blue); color: white;
  display: grid; place-items: center;
  transition: transform 160ms var(--ease-out);
}
.mega-feature:hover .mega-feat-cta .arr { transform: translateX(3px); }
.mega-feat-cta .arr svg { width: 12px; height: 12px; }
.nav-link .chev { width: 11px; height: 11px; opacity: 0.6; }

/* ============================================================
   RESOURCES MEGA — Guides as downloadable PDF-style cards
   ============================================================ */
.mega-menu--guides .mega-panel { grid-template-columns: 1fr 452px; }
.mega-guides {
  display: flex; flex-direction: column;
  padding: 22px 22px 18px;
  background:
    radial-gradient(ellipse 90% 60% at 90% 0%, rgba(255,153,0,0.08), transparent 60%),
    var(--bg-surface, #FBFAF7);
}
.mega-guides-head { margin: 0 2px 14px; }
.mega-guides-title {
  margin: 6px 0 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: 17px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.mega-guides-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.guide-pdf {
  display: flex; flex-direction: column;
  text-decoration: none;
}

/* ── Book cover (matches migration-guide reference) ── */
.guide-book {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 3px 9px 9px 3px;
  padding: 15px 14px 34px 17px;
  display: flex; flex-direction: column;
  color: #fff; overflow: hidden;
  background:
    radial-gradient(ellipse 130% 80% at 82% 4%, rgba(255,255,255,0.16), transparent 55%),
    var(--book, #C81E37);
  box-shadow: 0 14px 30px rgba(15,30,80,0.24), 0 3px 8px rgba(0,0,0,0.16);
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
/* spine shadow at the binding edge */
.guide-book::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,0.34), rgba(0,0,0,0.02));
}
/* faint top rule seen on the reference covers */
.guide-book::after {
  content: ""; position: absolute; top: 34px; left: 17px; right: 14px; height: 1px;
  background: rgba(255,255,255,0.20);
}
.guide-pdf:hover .guide-book {
  transform: translateY(-4px) rotate(-0.6deg);
  box-shadow: 0 22px 44px rgba(15,30,80,0.30), 0 4px 10px rgba(0,0,0,0.20);
}
.guide-book-sheen {
  position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-16deg); pointer-events: none;
  transition: left 620ms var(--ease-out);
}
.guide-pdf:hover .guide-book-sheen { left: 130%; }

.guide-book-eyebrow {
  align-self: flex-start; position: relative; z-index: 2;
  font-family: var(--font-mono); font-size: 7.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  padding: 3px 8px; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px;
}
.guide-book-title {
  position: relative; z-index: 2;
  margin-top: 16px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 21px; line-height: 1.04; letter-spacing: -0.015em;
  text-wrap: balance;
}
.guide-book-icons {
  position: relative; z-index: 2;
  margin: auto auto 6px; display: flex; align-items: center; gap: 9px;
}
.gb-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.gb-ic svg { width: 17px; height: 17px; }
.gb-from { border: 2px solid rgba(255,255,255,0.92); color: #fff; }
.gb-to { background: #fff; color: var(--book, #C81E37); }
.gb-arrow { width: 30px; height: 8px; color: rgba(255,255,255,0.8); }

.guide-book-brand {
  position: absolute; right: 13px; bottom: 11px; z-index: 2;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.01em; color: rgba(255,255,255,0.92);
}
/* page-curl corner, bottom-left */
.guide-book-curl {
  position: absolute; left: 0; bottom: 0; width: 30px; height: 30px;
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
  clip-path: polygon(0 100%, 100% 100%, 0 0);
}

.guide-pdf-body { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 2px 0; }
.guide-pdf-meta {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.02em; color: var(--fg-muted); text-transform: uppercase;
}
.guide-pdf-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px 2px 4px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; color: #fff; background: #D7263D;
}
.guide-pdf-badge svg { width: 10px; height: 10px; }
.guide-pdf-dot { opacity: 0.5; }
.guide-pdf-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  color: var(--brand-blue); white-space: nowrap;
}
.guide-pdf-cta svg { width: 13px; height: 13px; transition: transform 180ms var(--ease-out); }
.guide-pdf:hover .guide-pdf-cta svg { transform: translateY(2px); }

.mega-guides-all {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  margin-top: 16px; padding: 6px 4px 0;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--fg-primary); text-decoration: none;
}
.mega-guides-all .arr svg { width: 12px; height: 12px; }
.mega-guides-all:hover { color: var(--brand-blue); }
.mega-guides-all:hover .arr { transform: translateX(3px); transition: transform 160ms var(--ease-out); }

/* Mobile drawer — book cards */
.mnav-guides { display: flex; flex-direction: column; gap: 12px; padding: 4px 10px 2px; }
.mnav-guide-pdf {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center;
  padding: 10px; border-radius: 12px; text-decoration: none;
  background: var(--bg-surface, rgba(0,0,0,0.02));
  border: 1px solid var(--line-hairline);
}
.guide-book--sm { padding: 10px 9px 24px 12px; border-radius: 2px 7px 7px 2px; }
.guide-book--sm::after { top: 24px; left: 12px; right: 9px; }
.guide-book--sm .guide-book-eyebrow { font-size: 6px; padding: 2px 6px; letter-spacing: 0.1em; }
.guide-book--sm .guide-book-title { margin-top: 10px; font-size: 14px; }
.guide-book--sm .gb-ic { width: 24px; height: 24px; }
.guide-book--sm .gb-ic svg { width: 12px; height: 12px; }
.guide-book--sm .gb-arrow { width: 20px; }
.guide-book--sm .guide-book-brand { font-size: 7px; right: 9px; bottom: 8px; }
.guide-book--sm .guide-book-curl { width: 20px; height: 20px; }
.mnav-guide-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nav-right {
  display: inline-flex; align-items: center; gap: 10px;
  justify-self: end;
}

/* ============================================================
   MOBILE NAV — hamburger + slide-in drawer with accordion
   mega menus (mirrors the desktop MEGA data 1:1)
   ============================================================ */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0 9px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-surface-2, rgba(0,0,0,0.03));
  cursor: pointer;
  transition: background 160ms var(--ease-out);
}
.nav-burger span {
  display: block; height: 2px; width: 100%;
  background: var(--fg-primary);
  border-radius: 2px;
  transition: transform 220ms var(--ease-out), opacity 160ms var(--ease-out);
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mnav {
  position: fixed; inset: 0;
  z-index: 9000;
  visibility: hidden;
  pointer-events: none;
}
.mnav.is-open { visibility: visible; pointer-events: auto; }
.mnav-scrim {
  position: absolute; inset: 0;
  background: rgba(8,12,28,0.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}
.mnav.is-open .mnav-scrim { opacity: 1; }
.mnav-panel {
  position: absolute; top: 0; right: 0;
  width: min(420px, 90vw); height: 100%;
  display: inline-table; flex-direction: column;
  background: var(--bg-page, #FAFAF7);
  border-left: 1px solid var(--line-hairline);
  box-shadow: -24px 0 60px rgba(8,12,28,0.18);
  transform: translateX(100%);
  transition: transform 320ms var(--ease-out);
}
.mnav.is-open .mnav-panel { transform: translateX(0); }
.mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-hairline);
  flex: 0 0 auto;
}
.mnav-head .brand-wm { height: 30px; display: block; }
.mnav-close {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: transparent; color: var(--fg-primary); cursor: pointer;
}
.mnav-close svg { width: 20px; height: 20px; }

.mnav-list { flex: 1 1 auto; overflow-y: auto; padding: 8px 0 4px; }
.mnav-acc { border-bottom: 1px solid var(--line-hairline); }
.mnav-acc-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 500;
  font-size: 18px; letter-spacing: -0.01em; color: var(--fg-primary);
}
.mnav-acc-label { text-align: left; }
.mnav-acc-chev {
  width: 14px; height: 14px; opacity: 0.55;
  transition: transform 240ms var(--ease-out);
  flex: 0 0 auto;
}
.mnav-acc.is-open .mnav-acc-chev { transform: rotate(180deg); }
.mnav-acc-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-out);
}
.mnav-acc.is-open .mnav-acc-body { grid-template-rows: 1fr; }
.mnav-acc-inner {
  overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 14px;
}
.mnav-acc.is-open .mnav-acc-inner { padding-bottom: 14px; }

.mnav-item {
  display: grid; grid-template-columns: 38px 1fr; gap: 12px;
  align-items: start;
  padding: 11px 10px; border-radius: 12px;
  text-decoration: none;
  transition: background 140ms var(--ease-out);
}
/* Title-only items (e.g. Industries → Healthcare) have no subtitle —
   center the icon against the single line of text. */
.mnav-item:not(:has(.mega-sub)) { align-items: center; }
.mnav-item:hover, .mnav-item:active {
  background: linear-gradient(135deg, rgba(32,81,249,0.06), rgba(104,163,247,0.03));
}
.mnav-item .mega-title {
  display: block;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  color: var(--fg-primary); line-height: 1.3;
}
.mnav-item .mega-sub {
  display: block; margin-top: 2px;
  font-family: var(--font-body); font-size: 12.5px;
  line-height: 1.45; color: var(--fg-secondary);
}

.mnav-feature {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px; padding: 14px;
  border-radius: 16px; text-decoration: none;
  border: 1px solid var(--line-hairline);
  background: var(--bg-surface-2, rgba(0,0,0,0.02));
}
.mnav-feat-visual {
  flex: 0 0 auto;
  width: 54px; height: 54px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #0E1430 0%, #1A2050 60%, #0E1430 100%);
}
.mnav-feat-visual svg { width: 24px; height: 24px; }
.mnav-feat-body { display: flex; flex-direction: column; gap: 3px; }
.mnav-feat-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 14.5px; line-height: 1.3; color: var(--fg-primary);
  text-wrap: balance;
}
.mnav-feat-cta {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--brand-blue);
}

.mnav-foot {
  flex: 0 0 auto;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-hairline);
}
.mnav-foot .btn { width: 100%; justify-content: center; }

@media (max-width: 960px) {
  .nav { grid-template-columns: auto 1fr; }
  .nav-pill { display: none; }
  .nav-right .btn.primary.sm { display: none; }
  .nav-burger { display: flex; }
  .mega-menu { display: none; }
}
@media (max-width: 420px) {
  .mnav-feature { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
/* AI accent palette — brand blue + electric pink, used on glass buttons */
:root {
  --ai-blue: #3F6BFF;
  --ai-pink: #FF3D8B;
  --ai-magenta: #D946EF;
  --ai-grad:
    linear-gradient(115deg,
      rgba(63,107,255,0.95) 0%,
      rgba(99,102,241,0.92) 35%,
      rgba(217,70,239,0.90) 70%,
      rgba(255,61,139,0.92) 100%);
  --ai-grad-soft:
    linear-gradient(115deg,
      rgba(63,107,255,0.32) 0%,
      rgba(99,102,241,0.26) 35%,
      rgba(217,70,239,0.24) 70%,
      rgba(255,61,139,0.26) 100%);
}

.btn {
  position: relative;
  isolation: isolate;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.2;
  padding: 10px 24px; height: auto;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; gap: 12px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 50%),
    linear-gradient(135deg, #FF4F4F 0%, #2027F9 55%, var(--brand-blue-deep) 100%) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  transition: filter 220ms var(--ease-out),
              border-color 220ms var(--ease-out),
              transform 160ms var(--ease-out);
  letter-spacing: -0.005em;
}
.btn:active { transform: scale(0.98); }
.btn:hover { filter: brightness(1.08) saturate(1.05); border-color: rgba(255,255,255,0.28); }

/* AI gradient border halo — applies to all variants, brightens on hover */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--ai-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.70;
  pointer-events: none;
  transition: opacity 260ms var(--ease-out);
  z-index: 1;
}
.btn:hover::after { opacity: 1; }
.btn > * { position: relative; z-index: 2; }

/* SECONDARY — frosted glass (no gradient fill) */
.btn.secondary {
  color: var(--fg-primary);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}
.btn.secondary:hover {
  filter: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
    rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.20);
}
.btn.secondary .arr {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.04);
  color: var(--fg-primary);
}
.btn.secondary:hover .arr {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08)),
    var(--ai-grad-soft);
}

/* GHOST kept transparent */
.btn.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--fg-primary);
}
.btn.ghost::after { opacity: 0; }
.btn.ghost:hover {
  background: rgba(255,255,255,0.05);
  filter: none;
}
.btn.ghost:hover::after { opacity: 0.5; }

/* Sizes — all unified per spec (height auto, 10px / 24px padding) */
.btn.sm,
.btn.lg { padding: 10px 24px; height: auto; font-size: 15px; gap: 12px; }

/* Arrow chip — translucent over the gradient surface */
.btn .arr {
  width: 28px; height: 28px; border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.10)),
    rgba(255,255,255,0.10);
  display: grid; place-items: center;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40);
  transition: transform 220ms var(--ease-out), background 260ms;
}
.btn:hover .arr { transform: translateX(3px); }
.btn .arr svg { width: 13px; height: 13px; }

/* ============================================================
   HERO — AURA + Nexchain inspired
   Dark blue gradient, big headline, glowing orb visual right,
   wireframe mesh floor, ambient grid + dot field.
   ============================================================ */
.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  min-height: auto;
}
.hero-frame {
  position: relative;
}

/* Background layers */
.hero-bg {
  position: absolute; inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 75% 30%, rgba(32,81,249,0.28) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(104,163,247,0.10) 0%, transparent 60%),
    linear-gradient(180deg, #060912 0%, #050810 50%, #07080A 100%);
  animation: bgDrift 22s ease-in-out infinite;
}
@keyframes bgDrift {
  0%, 100% {
    background-position: 0% 0%, 0% 0%, 0 0;
    filter: hue-rotate(0deg);
  }
  50% {
    background-position: 6% -4%, -4% 6%, 0 0;
    filter: hue-rotate(-6deg);
  }
}
.hero-bg::before {
  /* dot field */
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='%232A3552'/%3E%3C/svg%3E");
  background-size: 28px 28px;
  color: #2A3552; opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 70% 40%, black 0%, transparent 70%);
  animation: dotShift 60s linear infinite;
}
@keyframes dotShift {
  to { background-position: 28px 28px; }
}
.hero-bg::after {
  /* hairline grid */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(104,163,247,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,163,247,0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
  animation: gridDrift 80s linear infinite;
}
@keyframes gridDrift {
  to { background-position: 96px 96px, 96px 96px; }
}

/* Glow blobs that drift across the hero */
.hero-frame::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 999px;
  top: 10%; left: 60%;
  background: radial-gradient(circle, rgba(32,81,249,0.30), rgba(32,81,249,0) 70%);
  filter: blur(40px);
  z-index: -1;
  animation: blobA 18s ease-in-out infinite;
  pointer-events: none;
}
.hero-frame::after {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 999px;
  bottom: 5%; left: 10%;
  background: radial-gradient(circle, rgba(104,163,247,0.22), rgba(104,163,247,0) 70%);
  filter: blur(50px);
  z-index: -1;
  animation: blobB 24s ease-in-out infinite;
  pointer-events: none;
}
@keyframes blobA {
  0%, 100% { translate: 0 0; scale: 1; }
  33%      { translate: -40px 30px; scale: 1.08; }
  66%      { translate: 30px -30px; scale: 0.94; }
}
@keyframes blobB {
  0%, 100% { translate: 0 0; scale: 1; }
  50%      { translate: 60px -40px; scale: 1.15; }
}

/* Wireframe floor (perspective mesh, AURA-style) */
.hero-floor {
  position: absolute;
  left: -10%; right: -10%; bottom: -120px;
  height: 360px;
  z-index: -1;
  background-image:
    linear-gradient(rgba(104,163,247,0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,163,247,0.55) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(700px) rotateX(62deg);
  transform-origin: center top;
  -webkit-mask-image:
    radial-gradient(ellipse 60% 80% at 50% 0%, black 30%, transparent 75%);
  mask-image:
    radial-gradient(ellipse 60% 80% at 50% 0%, black 30%, transparent 75%);
  opacity: 0.7;
  animation: floorScroll 14s linear infinite;
}
@keyframes floorScroll {
  to { background-position: 0 48px; }
}

/* Corner system labels */
.hero-syslabel {
  position: absolute;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint);
  letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-syslabel .tick {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--brand-cyan); box-shadow: 0 0 12px var(--brand-cyan);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.hero-syslabel.tl { top: 24px; left: 48px; }
.hero-syslabel.tr { top: 24px; right: 48px; }
.hero-syslabel.bl { bottom: 28px; left: 48px; }
.hero-syslabel.br { bottom: 28px; right: 48px; }

/* Hero layout */
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 56px;
  align-items: center;
  padding: 56px 48px 64px;
  min-height: 720px;
  max-width: 1392px;
  margin: 0 auto 120px;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px;
  background: rgba(32, 81, 249, 0.10);
  border: 1px solid rgba(104,163,247,0.25);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brand-cyan);
  margin-bottom: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 24px rgba(32,81,249,0.18);
}
.hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--brand-cyan); box-shadow: 0 0 10px var(--brand-cyan);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 60px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--fg-primary);
  margin: 0 0 24px;
  min-height: calc(1.08em * 3);
  max-width: 22ch;
  text-wrap: balance;
}
.tw-caret {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 4px;
  vertical-align: -0.08em;
  background: var(--brand-blue);
  border-radius: 1px;
  animation: caretBlink 0.9s steps(2, end) infinite;
  box-shadow: 0 0 8px rgba(32,81,249,0.55);
}
@keyframes caretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(110deg, #FFFFFF 0%, var(--brand-cyan) 45%, var(--brand-blue) 75%, #FFFFFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroShim 9s linear infinite;
}
@keyframes heroShim { to { background-position: 220% 50%; } }

.hero-sub {
  font-family: var(--font-body); font-size: 18px; line-height: 1.55;
  color: var(--fg-secondary);
  margin: 0 0 36px; max-width: 52ch;
}
.hero-ctas { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-ctas .btn .arr { width: 30px; height: 30px; }
.hero-ctas .btn .arr svg { width: 14px; height: 14px; }

.hero-meta {
  display: flex; gap: 40px; margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-hairline);
  max-width: 560px;
}
.hero-meta .item .num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 34px; line-height: 1; letter-spacing: -0.025em;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 1px;
}
.hero-meta .item .num .acc { color: var(--brand-blue); }
.hero-meta .item .lbl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-muted);
  margin-top: 8px;
}

/* Visual side — the glowing AI core */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: grid; place-items: center;
}
.orb-wrap {
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
}
.orb-ring {
  position: absolute;
  border: 1px solid rgba(104,163,247,0.22);
  border-radius: 999px;
  pointer-events: none;
}
.orb-ring.r1 { inset: 18%; }
.orb-ring.r2 { inset: 28%; border-color: rgba(104,163,247,0.16); }
.orb-ring.r3 { inset: 36%; border-color: rgba(104,163,247,0.10); }
.orb-ring.r4 { inset: 4%; border-style: dashed; border-color: rgba(104,163,247,0.18); animation: spinSlow 60s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Orbiting sparks around the orb */
.orb-sparks {
  position: absolute; inset: 0;
  animation: spinSlow 24s linear infinite;
  z-index: 2; pointer-events: none;
}
.orb-spark {
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--brand-cyan);
  box-shadow: 0 0 8px var(--brand-cyan), 0 0 14px rgba(32,81,249,0.6);
  transform:
    translate(-50%, -50%)
    rotate(calc(360deg * var(--i) / var(--n)))
    translate(0, calc(var(--orb-radius, 44%) * -1));
  opacity: calc(0.4 + (var(--i) / var(--n)) * 0.6);
  animation: sparkPulse 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -200ms);
}
@keyframes sparkPulse {
  0%, 100% { opacity: 0.3; transform:
    translate(-50%, -50%)
    rotate(calc(360deg * var(--i) / var(--n)))
    translate(0, -42%); }
  50%      { opacity: 1;   transform:
    translate(-50%, -50%)
    rotate(calc(360deg * var(--i) / var(--n)))
    translate(0, -46%); }
}

.orb {
  position: relative;
  width: 48%; aspect-ratio: 1;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  animation: orbFloat 8s ease-in-out infinite, orbPulse 3.6s ease-in-out infinite;
  z-index: 1;
}
.orb-logo {
  display: block;
  object-fit: contain;
  filter:
    drop-shadow(0 0 24px rgba(32,81,249,0.55))
    drop-shadow(0 0 60px rgba(32,81,249,0.35));
}
.orb-logo::before,
.orb-logo::after { content: none; }
.orb-wrap > .orb::before,
.orb-wrap > .orb::after { content: none; }
@keyframes orbFloat {
  0%, 100% { translate: 0 -6px; }
  50%      { translate: 0 6px; }
}
@keyframes orbPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 24px rgba(32,81,249,0.55))
      drop-shadow(0 0 60px rgba(32,81,249,0.35));
    scale: 1;
  }
  50% {
    filter:
      drop-shadow(0 0 36px rgba(32,81,249,0.85))
      drop-shadow(0 0 100px rgba(32,81,249,0.6));
    scale: 1.05;
  }
}

/* Expanding pulse rings around the orb */
.orb-wrap::before,
.orb-wrap::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 48%; aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid rgba(104,163,247,0.5);
  translate: -50% -50%;
  pointer-events: none;
  z-index: 0;
  animation: orbRing 3.6s ease-out infinite;
}
.orb-wrap::after { animation-delay: 1.8s; }
@keyframes orbRing {
  0%   { opacity: 0.7; scale: 1;   border-color: rgba(104,163,247,0.55); }
  80%  { opacity: 0;   scale: 1.6; border-color: rgba(104,163,247,0);   }
  100% { opacity: 0;   scale: 1.6; }
}
.orb::before {
  /* lattice overlay */
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 18px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 35%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 50%, black 35%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.6;
}
.orb::after {
  /* highlight */
  content: ""; position: absolute;
  top: 8%; left: 22%; width: 36%; height: 24%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.55), transparent 65%);
  border-radius: 999px;
  filter: blur(8px);
}

/* Floating data chips */
.orb-chip {
  position: absolute;
  background: rgba(7,8,10,0.78);
  border: 1px solid rgba(104,163,247,0.28);
  border-radius: 14px;
  padding: 11px 14px;
  display: inline-flex; align-items: center; gap: 12px;
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 12px 36px rgba(0,0,0,0.45),
    0 0 0 0.5px rgba(32,81,249,0.18);
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-secondary);
  letter-spacing: 0.04em;
  animation: chipFloat 5s ease-in-out infinite, chipFade 600ms var(--ease-out) both;
  white-space: nowrap;
  z-index: 4;
}
.orb-chip .ic {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-bg); display: grid; place-items: center;
  color: var(--brand-cyan); border: 1px solid var(--accent-line);
  flex-shrink: 0;
}
.orb-chip .ic svg { width: 16px; height: 16px; }
.orb-chip .lbl { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); }
.orb-chip .v { color: var(--fg-primary); font-family: var(--font-display); font-size: 15px; letter-spacing: -0.005em; line-height: 1.1; margin-top: 2px; }
@keyframes chipFloat {
  0%, 100% { translate: 0 -5px; }
  25%      { translate: 2px -2px; }
  50%      { translate: 0 5px; }
  75%      { translate: -2px -2px; }
}
@keyframes chipFade {
  from { opacity: 0; translate: 0 8px; scale: 0.92; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

/* Hero trust strip */
.hero-trust {
  position: relative;
  padding: 28px 0 36px;
  border-top: 1px solid var(--line-hairline);
  margin-top: 12px;
}
.hero-trust .row {
  display: flex; align-items: center; gap: 48px;
  justify-content: space-between;
}
.hero-trust .label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
}
.hero-trust .label .ln { width: 24px; height: 1px; background: var(--line-soft); }
.hero-trust .logos {
  display: flex; align-items: center; gap: 56px;
  flex: 1; justify-content: space-around;
  opacity: 0.65;
}

/* Marquee wrapper — infinite scrolling logos */
.hero-trust .logos-marquee {
  position: relative;
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.hero-trust .logos-track {
  display: flex;
  gap: 56px;
  width: max-content;
  align-items: center;
  padding: 6px 0;
  animation: trustScroll 32s linear infinite;
  will-change: transform;
}
.hero-trust .logos-marquee:hover .logos-track { animation-play-state: paused; }
@keyframes trustScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.hero-trust .logos-fade { display: none; }
.hero-trust .logos .lg,
.hero-trust .logos-track .lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  flex-shrink: 0;
  white-space: nowrap;
}
.hero-trust .logos-track .lg img {
  max-height: 28px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.65;
  transition: opacity 220ms ease;
}
.hero-trust .logos-marquee:hover .logos-track .lg img,
.hero-trust .logos-track .lg:hover img {
  opacity: 1;
}

/* ============================================================
   SECTION CHROME
   ============================================================ */
.section {
  padding: 120px 0;
  position: relative;
  border-top: 1px solid var(--line-hairline);
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; margin-bottom: 64px;
}
.section-eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brand-cyan);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.section-eyebrow .sl { color: var(--fg-faint); }
.section-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 60px; line-height: 1.02; letter-spacing: -0.035em;
  margin: 0; color: var(--fg-primary); max-width: 18ch;
  text-wrap: balance;
}
.section-title em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(110deg, var(--brand-cyan) 0%, var(--brand-blue) 60%, var(--brand-cyan) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroShim 9s linear infinite;
}
.section-sub {
  font-family: var(--font-body); font-size: 17px;
  color: var(--fg-secondary); max-width: 44ch;
  line-height: 1.55; margin: 0;
}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.svc-cta {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.svc-cta.svc-cta-top {
  margin-top: 0;
  margin-bottom: 36px;
}
.svc-section-head { align-items: flex-start; }
.svc-head-right {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 20px;
  max-width: 44ch;
}
.svc-head-right .section-sub { margin: 0; }
.svc {
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
  min-height: 240px;
  cursor: pointer;
  transition: all 240ms var(--ease-out);
  box-shadow: var(--shadow-inset-hi);
}
.svc:hover {
  border-color: var(--line-soft);
  background: var(--bg-surface-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-inset-hi);
}
.svc.featured {
  background:
    radial-gradient(ellipse 90% 90% at 100% 0%, rgba(32, 81, 249, 0.18) 0%, transparent 60%),
    var(--bg-surface);
  border-color: rgba(32, 81, 249, 0.28);
}
.svc.featured:hover { border-color: rgba(32, 81, 249, 0.4); box-shadow: var(--shadow-glow-blue); }
.svc-head { display: flex; justify-content: space-between; align-items: center; }
.svc-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--bg-surface-2); border: 1px solid var(--line-hairline);
  display: grid; place-items: center; color: var(--fg-primary);
}
.svc.featured .svc-ic { background: var(--accent-bg); border-color: var(--accent-line); color: var(--brand-cyan); }
.svc-ic svg { width: 20px; height: 20px; }
.svc-num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--fg-faint);
}
.svc-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.015em;
  margin: 0; color: var(--fg-primary);
}
.svc.featured .svc-title { font-size: 30px; max-width: 14ch; }
.svc-desc {
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--fg-muted); margin: 0;
}
.svc-tags {
  list-style: none; padding: 0; margin: auto 0 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.svc-tags li {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted);
  padding: 4px 9px; border: 1px solid var(--line-hairline);
  border-radius: 999px; letter-spacing: 0.02em;
}

/* ============================================================
   "HOW WE WORK" — methodology with numbered steps overlaid
   on a hero visual (AURA-inspired "How It Works")
   ============================================================ */
.method {
  position: relative;
}
.method-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: stretch;
}
.method-visual {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(32,81,249,0.25), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(104,163,247,0.18), transparent 70%),
    linear-gradient(180deg, #0A1024, #050810);
  border: 1px solid var(--line-hairline);
  min-height: 620px;
  isolation: isolate;
}
.method-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(104,163,247,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,163,247,0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
}
.method-visual::after {
  /* central glow */
  content: ""; position: absolute;
  top: 30%; left: 50%; transform: translate(-50%,-30%);
  width: 360px; height: 360px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(32,81,249,0.55) 0%, rgba(32,81,249,0.12) 35%, transparent 70%);
  filter: blur(20px);
}
.method-orbits {
  position: absolute; inset: 0; display: grid; place-items: center;
  z-index: 1;
}
.method-orbit {
  position: absolute; border: 1px solid rgba(104,163,247,0.12);
  border-radius: 999px;
}
.method-orbit.o1 { width: 200px; height: 200px; }
.method-orbit.o2 { width: 340px; height: 340px; }
.method-orbit.o3 { width: 480px; height: 480px; }
.method-orbit.o4 { width: 620px; height: 620px; border-style: dashed; opacity: 0.6; }
.method-core {
  position: relative; width: 88px; height: 88px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.4), transparent 25%),
    radial-gradient(circle at 50% 50%, #6FA8FF 0%, #2051F9 50%, #0a1740 100%);
  box-shadow: 0 0 40px rgba(32,81,249,0.7), inset 0 0 24px rgba(255,255,255,0.18);
  display: grid; place-items: center;
  color: white;
  z-index: 2;
}
.method-core svg { width: 32px; height: 32px; }

.method-steps {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
}
.method-step {
  position: relative;
  padding: 22px 24px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-hairline);
  background: var(--bg-surface);
  display: grid; grid-template-columns: 56px 1fr auto; gap: 20px;
  align-items: center;
  transition: all 240ms var(--ease-out);
  cursor: pointer;
}
.method-step:hover { border-color: var(--line-soft); background: var(--bg-surface-2); transform: translateX(4px); }
.method-step.active {
  background:
    linear-gradient(120deg, rgba(32,81,249,0.10), transparent 55%),
    var(--bg-surface);
  border-color: rgba(32,81,249,0.32);
  box-shadow: var(--shadow-md);
}
.method-step .num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 36px; line-height: 1; letter-spacing: -0.03em;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.method-step.active .num {
  background: linear-gradient(180deg, var(--brand-cyan), var(--brand-blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.method-step .body h4 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 21px; letter-spacing: -0.01em; line-height: 1.2;
  margin: 0 0 4px; color: var(--fg-primary);
}
.method-step .body p {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.5;
  color: var(--fg-muted); margin: 0;
}
.method-step .pill {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted);
  padding: 6px 10px; border: 1px solid var(--line-hairline); border-radius: 999px;
  white-space: nowrap;
}
.method-step.active .pill {
  color: var(--brand-cyan); border-color: var(--accent-line); background: var(--accent-bg);
}

/* ============================================================
   METHOD FLOW — left-side circular step-flow visualization
   ============================================================ */
.mflow {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--line-hairline);
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(32,81,249,0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(0,181,212,0.08), transparent 60%),
    linear-gradient(180deg, #F4F6FB, #FFFFFF);
  overflow: hidden;
  isolation: isolate;
  --mf-blue: #2051F9;
  --mf-cyan: #00B5D4;
}
[data-theme="dark"] .mflow {
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(32,81,249,0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(0,181,212,0.10), transparent 60%),
    linear-gradient(180deg, #0A1024, #050810);
}

/* Background hairline grid */
.mflow-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(32,81,249,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,81,249,0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
}

/* SVG layer */
.mflow-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
.mflow-arc {
  filter: drop-shadow(0 0 6px rgba(32,81,249,0.45));
  animation: mflowArcIn 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes mflowArcIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mflow-spin {
  transform-origin: 200px 200px;
  animation: mflowSpin 40s linear infinite;
}
@keyframes mflowSpin { to { transform: rotate(360deg); } }

/* Step nodes around the ring */
.mflow-node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: grid;
  grid-template-columns: 48px auto;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line-hairline);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-display);
  font-weight: 500;
  cursor: pointer;
  transition: all 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 6px 18px rgba(15,30,80,0.08);
}
[data-theme="dark"] .mflow-node {
  background: rgba(20,26,40,0.78);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 18px rgba(0,0,0,0.4);
}
.mflow-node:hover { transform: translate(-50%, -50%) scale(1.04); }

.mflow-node-ic {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(32,81,249,0.10);
  border: 1px solid rgba(32,81,249,0.25);
  color: var(--mf-blue);
  transition: all 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mflow-node-ic svg { width: 18px; height: 18px; }
.mflow-node-num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--fg-muted);
  padding-right: 4px;
}

/* Completed step nodes */
.mflow-node.is-done .mflow-node-ic {
  background: linear-gradient(180deg, #4A78FF, var(--mf-blue));
  border-color: var(--mf-blue);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 4px 10px rgba(32,81,249,0.30);
}
.mflow-node.is-done .mflow-node-num { color: var(--mf-blue); }

/* Active step node */
.mflow-node.is-active {
  border-color: rgba(32,81,249,0.50);
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 0 0 4px rgba(32,81,249,0.15),
    0 10px 28px rgba(32,81,249,0.25);
}
.mflow-node.is-active .mflow-node-ic {
  background: linear-gradient(180deg, #3F6BFF, var(--mf-blue));
  border-color: var(--mf-blue);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 4px 14px rgba(32,81,249,0.45);
  animation: mflowNodePulse 2s ease-in-out infinite;
}
.mflow-node.is-active .mflow-node-num { color: var(--mf-blue); font-weight: 600; }
@keyframes mflowNodePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Center card */
.mflow-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 38%; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 18px;
  text-align: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95), rgba(255,255,255,0.40) 60%),
    radial-gradient(circle, rgba(255,255,255,0.95), rgba(244,246,251,0.85));
  border: 1px solid rgba(32,81,249,0.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 16px 40px rgba(15,30,80,0.10),
    0 0 0 8px rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: mflowCenterIn 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
[data-theme="dark"] .mflow-center {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%),
    radial-gradient(circle, rgba(20,26,40,0.92), rgba(10,16,30,0.90));
  border-color: rgba(104,163,247,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 16px 40px rgba(0,0,0,0.45),
    0 0 0 8px rgba(20,26,40,0.55);
}
@keyframes mflowCenterIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.mflow-center-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mf-blue);
}
.mflow-center-ic {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #3F6BFF, var(--mf-blue));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 10px 24px rgba(32,81,249,0.45);
}
.mflow-center-ic svg { width: 28px; height: 28px; }
.mflow-center-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 18px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--fg-primary);
  max-width: 14ch; text-wrap: balance;
}
.mflow-center-pill {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
  padding: 5px 11px;
  background: var(--bg-canvas);
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
}

/* Hide the legacy orbit visual but keep it valid for older snapshots */
.method-visual { display: none; }

/* ============================================================
   END METHOD FLOW
   ============================================================ */

/* ============================================================
   AI LAB BANNER
   ============================================================ */
.ai-banner {
  position: relative; border-radius: var(--radius-2xl);
  overflow: hidden; padding: 72px 56px;
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(32,81,249,0.18), transparent 60%),
    linear-gradient(135deg, #0B0F1E 0%, #0E1226 100%);
  border: 1px solid rgba(32, 81, 249,0.22);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center;
  box-shadow: var(--shadow-inset-hi);
}
.ai-banner::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(104,163,247,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,163,247,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 50%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 80% 50%, black 0%, transparent 70%);
}
.ai-banner .copy { position: relative; }
.ai-banner h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 52px; line-height: 1.02; letter-spacing: -0.035em;
  margin: 0 0 20px; color: var(--fg-primary);
  text-wrap: balance;
}
.ai-banner h2 em {
  font-style: italic;
  background: linear-gradient(110deg, var(--brand-cyan) 0%, var(--brand-blue) 70%, var(--brand-cyan) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroShim 9s linear infinite; font-weight: 500;
}
.ai-banner p {
  font-family: var(--font-body); font-size: 16.5px; line-height: 1.55;
  color: var(--fg-secondary); margin: 0 0 28px; max-width: 52ch;
}
.ai-stack { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.ai-stack-row {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-secondary);
  padding: 14px 18px;
  background: rgba(7,8,10,0.6);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-md);
}
.ai-stack-row .nm { color: var(--fg-primary); font-weight: 500; }
.ai-stack-row .ms { margin-left: auto; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.ai-stack-row .dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--brand-cyan);
  box-shadow: 0 0 10px var(--brand-cyan);
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================================
   STATS
   ============================================================ */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-hairline);
  border-bottom: 1px solid var(--line-hairline);
}
.stat {
  padding: 36px 32px;
  border-right: 1px solid var(--line-hairline);
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
.stat:last-child { border-right: 0; }
.stat .big {
  font-family: var(--font-display); font-weight: 500;
  font-size: 58px; line-height: 1; letter-spacing: -0.035em;
  color: var(--fg-primary); font-variant-numeric: tabular-nums;
}
.stat .big .acc { color: var(--brand-cyan); }
.stat .lbl {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted);
}
.stat .desc {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.5;
  color: var(--fg-secondary); margin: 4px 0 0; max-width: 30ch;
}

/* ============================================================
   CASE STUDIES
   ============================================================ */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.case {
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer; transition: all 240ms var(--ease-out);
  box-shadow: var(--shadow-inset-hi);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.case:hover { transform: translateY(-2px); border-color: var(--line-soft); box-shadow: var(--shadow-md), var(--shadow-inset-hi); }
.case.featured { grid-column: auto; }
.case .thumb {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, rgba(32, 81, 249,0.10), rgba(104, 163, 247,0.04)),
    var(--bg-surface-2);
  border-bottom: 1px solid var(--line-hairline);
  position: relative; overflow: hidden;
}
.case.featured .thumb { aspect-ratio: 16 / 9; min-height: 0; }
.case .thumb::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(104,163,247,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,163,247,0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 30%, black 100%);
  mask-image: linear-gradient(180deg, transparent, black 30%, black 100%);
}
.case .badge {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(7,8,10,0.75); color: var(--fg-primary);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(8px);
}
.case .badge.acc {
  color: var(--brand-cyan); border-color: var(--accent-line);
  background: rgba(32,81,249,0.18);
}

.case .mock {
  position: absolute; inset: 22% 12% 0 12%;
  background: var(--bg-canvas);
  border: 1px solid var(--line-soft);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.case .mock-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line-hairline); background: var(--bg-surface); }
.case .mock-head .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line-soft); }
.case .mock-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.case .mock-body .row { height: 8px; background: var(--bg-surface-3); border-radius: 4px; }
.case .mock-body .row.s { width: 60%; }
.case .mock-body .row.m { width: 80%; }
.case .mock-body .row.acc { width: 40%; background: var(--brand-blue); }
.case .mock-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 8px;
}
.case .mock-grid .b { height: 64px; background: var(--bg-surface-3); border-radius: 8px; }
.case .mock-grid .b.acc {
  background:
    linear-gradient(180deg, rgba(32,81,249,0.35), rgba(32,81,249,0.08)),
    var(--bg-surface-2);
  border: 1px solid var(--accent-line);
}

/* Real image inside the case thumb — covers the whole thumb area */
.case .thumb .case-thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.case .thumb:has(.case-thumb-img)::before { display: none; }
.case .thumb .badge { z-index: 2; }
.case .thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,28,0) 60%, rgba(8,12,28,0.35) 100%);
  z-index: 1; pointer-events: none;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.case:hover .thumb .case-thumb-img { transform: scale(1.03); }
.case .thumb .case-thumb-img { transition: transform 360ms var(--ease-out); }

.case .body {
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px; flex: 1;
}
.case .meta {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-muted); font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.case .meta .sl { width: 3px; height: 3px; background: currentColor; border-radius: 999px; }
.case h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.18; letter-spacing: -0.015em;
  margin: 0; color: var(--fg-primary); text-wrap: balance;
}
.case.featured h3 { font-size: 22px; }
.case .case-sub {
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--fg-muted); margin: 0;
}
.case .read {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-cyan); font-size: 13px; font-weight: 500;
  font-family: var(--font-body);
}
.case .read .arr {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--accent-bg); display: grid; place-items: center;
  transition: transform 160ms var(--ease-out);
}
.case:hover .read .arr { transform: translateX(3px); }
.case .read svg { width: 12px; height: 12px; }

/* ============================================================
   INDUSTRIES marquee + tags
   ============================================================ */
.industry-strip { display: flex; gap: 12px; flex-wrap: wrap; }
.industry-chip {
  font-family: var(--font-body); font-weight: 500; font-size: 13.5px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  color: var(--fg-secondary);
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 160ms var(--ease-out);
  cursor: pointer;
}
.industry-chip:hover {
  border-color: var(--accent-line);
  background: var(--accent-bg);
  color: var(--fg-primary);
}
.industry-chip svg { width: 14px; height: 14px; color: var(--fg-muted); }
.industry-chip:hover svg { color: var(--brand-cyan); }
.industry-chip .ct {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-faint); margin-left: 4px;
}

/* ============================================================
   TESTIMONIALS — proof bar + dual-row marquee
   ============================================================ */
.testimonials {
  --tm-blue:   #2051F9;
  --tm-purple: #8B5CF6;
  --tm-cyan:   #00B5D4;
}

/* Proof bar */
.tm-proof {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-hairline);
  border-bottom: 1px solid var(--line-hairline);
  margin-bottom: 64px;
}
.tm-proof-item {
  padding: 28px 24px;
  border-right: 1px solid var(--line-hairline);
  display: flex; flex-direction: column; gap: 10px;
}
.tm-proof-item:last-child { border-right: 0; }
.tm-proof-big {
  font-family: var(--font-display); font-weight: 500;
  font-size: 44px; line-height: 1; letter-spacing: -0.035em;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 10px;
}
.tm-proof-big i { color: var(--tm-blue); font-style: normal; }
.tm-proof-big .acc { color: var(--tm-blue); }
.tm-proof-stars {
  display: inline-flex; gap: 2px;
  color: #FFB300;
}
.tm-proof-stars svg { width: 16px; height: 16px; }
.tm-proof-lbl {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-muted);
}

/* Marquee */
.tm-marquee {
  position: relative;
  overflow: hidden;
  padding: 0 0;
  /* allow vertical hover-lift to escape */
  margin: 0 -48px;
  padding: 4px 48px;
}
.tm-track {
  display: flex; gap: 18px;
  width: max-content;
  will-change: transform;
}
.tm-track-a {
  animation: tmScrollLeft 40s linear infinite;
  margin-bottom: 18px;
}
.tm-track-b {
  animation: tmScrollRight 44s linear infinite;
}
@keyframes tmScrollLeft {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes tmScrollRight {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.tm-marquee:hover .tm-track { animation-play-state: paused; }

/* Edge fades */
.tm-fade {
  position: absolute; top: 0; bottom: 0;
  width: 140px;
  pointer-events: none;
  z-index: 2;
}
.tm-fade-l {
  left: 0;
  background: linear-gradient(90deg, var(--bg-canvas) 0%, var(--bg-canvas) 30%, transparent 100%);
}
.tm-fade-r {
  right: 0;
  background: linear-gradient(-90deg, var(--bg-canvas) 0%, var(--bg-canvas) 30%, transparent 100%);
}

/* Card */
.tm-card {
  flex-shrink: 0;
  width: 380px;
  padding: 26px 26px 22px;
  background: #FFFFFF;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column;
  gap: 18px;
  margin: 0;
  position: relative;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
              0 6px 20px rgba(15,30,80,0.05);
}
.tm-card:hover {
  transform: translateY(-4px);
  border-color: rgba(32,81,249,0.30);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 16px 36px rgba(15,30,80,0.12);
}
.tm-card.accent-purple:hover { border-color: rgba(139,92,246,0.30); }
.tm-card.accent-cyan:hover   { border-color: rgba(0,181,212,0.30); }

[data-theme="dark"] .tm-card {
  background: var(--bg-surface);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 20px rgba(0,0,0,0.35);
}

.tm-card-top {
  display: flex; justify-content: space-between; align-items: center;
}
.tm-stars {
  display: inline-flex; gap: 2px;
  color: #FFB300;
}
.tm-stars svg { width: 15px; height: 15px; }
.tm-quote-mark {
  color: rgba(32,81,249,0.18);
}
.tm-card.accent-purple .tm-quote-mark { color: rgba(139,92,246,0.20); }
.tm-card.accent-cyan   .tm-quote-mark { color: rgba(0,181,212,0.22); }
.tm-quote-mark svg { width: 32px; height: 32px; }

.tm-quote {
  font-family: var(--font-display); font-weight: 500;
  font-size: 17px; line-height: 1.45; letter-spacing: -0.01em;
  color: var(--fg-primary);
  margin: 0;
  text-wrap: balance;
}

.tm-attr {
  display: flex; align-items: center; gap: 12px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line-hairline);
}
.tm-avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: 14px; letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--tm-blue), #1B3FCC);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(32,81,249,0.30);
  flex-shrink: 0;
}
.tm-card.accent-purple .tm-avatar {
  background: linear-gradient(135deg, var(--tm-purple), #6A40C5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(139,92,246,0.30);
}
.tm-card.accent-cyan .tm-avatar {
  background: linear-gradient(135deg, var(--tm-cyan), #00829E);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(0,181,212,0.30);
}
.tm-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 14.5px; letter-spacing: -0.005em;
  color: var(--fg-primary);
}
.tm-role {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg-muted);
}

@media (max-width: 1100px) {
  .tm-proof { grid-template-columns: 1fr 1fr; }
  .tm-proof-item { border-right: 0; border-bottom: 1px solid var(--line-hairline); }
  .tm-proof-item:nth-child(2) { border-right: 0; }
  .tm-card { width: 320px; }
}
@media (max-width: 720px) {
  .tm-proof { grid-template-columns: 1fr; }
  .tm-card { width: 280px; }
}

/* ============================================================
   TESTIMONIAL — legacy single-quote layout (no longer used)
   ============================================================ */
.quote-wrap {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center;
}
.quote-asset {
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(104,163,247,0.20), transparent 70%),
    linear-gradient(180deg, #0A1230, #050810);
  border: 1px solid var(--line-hairline);
  position: relative; overflow: hidden;
}
.quote-asset::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(104,163,247,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,163,247,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
}
.quote-asset .core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 200px; height: 200px; border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.4), transparent 25%),
    radial-gradient(circle, #6FA8FF, #2051F9 55%, #050a25 100%);
  box-shadow: 0 0 80px rgba(32,81,249,0.55), inset 0 0 30px rgba(255,255,255,0.18);
}
.quote-content .quote-mark {
  font-family: var(--font-display); font-weight: 500;
  font-size: 96px; line-height: 0.5; color: var(--brand-cyan);
  margin: 0 0 8px;
}
.quote-content blockquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: 36px; line-height: 1.2; letter-spacing: -0.02em;
  color: var(--fg-primary); margin: 0 0 32px;
  max-width: 24ch;
  text-wrap: balance;
}
.quote-attr {
  display: flex; align-items: center; gap: 16px;
}
.quote-attr .av {
  width: 56px; height: 56px; border-radius: 999px;
  background:
    linear-gradient(135deg, #6FA8FF, #2051F9);
  border: 1px solid var(--line-soft);
}
.quote-attr .name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 16px; color: var(--fg-primary);
}
.quote-attr .role {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted);
  margin-top: 4px;
}

/* ============================================================
   CTA Footer
   ============================================================ */
.cta-section {
  position: relative; padding: 88px 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(32,81,249,0.25), transparent 60%),
    var(--bg-canvas);
  overflow: hidden;
  border-top: 1px solid var(--line-hairline);
  text-align: center;
}
.cta-section::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(104,163,247,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,163,247,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 70%);
  pointer-events: none;
}
.cta-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-cyan);
  padding: 8px 16px;
  background: rgba(32,81,249,0.10);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  margin-bottom: 32px;
  position: relative;
}
.cta-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 60px; line-height: 1.02; letter-spacing: -0.035em;
  margin: 0 auto 20px; max-width: 18ch;
  color: var(--fg-primary);
  text-wrap: balance; position: relative;
}
.cta-title em {
  font-style: italic;
  background: linear-gradient(110deg, var(--brand-cyan) 0%, var(--brand-blue) 60%, var(--brand-cyan) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroShim 9s linear infinite; font-weight: 500;
}
.cta-sub {
  font-family: var(--font-body); font-size: 17px; line-height: 1.5;
  color: var(--fg-secondary); margin: 0 auto 32px;
  max-width: 48ch; position: relative;
}
.cta-actions { display: inline-flex; gap: 12px; position: relative; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 80px 0 32px;
  background: var(--bg-canvas);
  border-top: 1px solid var(--line-hairline);
  position: relative;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr 1fr 1.1fr;
  gap: 40px;
}
.footer-brand .brand-block {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.footer-brand .brand-mark { width: 32px; height: 32px; }
.footer-brand .brand-wm { height: 18px; }
.footer-brand p {
  font-family: var(--font-body); font-size: 14px;
  color: var(--fg-secondary); line-height: 1.6;
  max-width: 36ch; margin: 0 0 24px;
}
.footer-brand .badges {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.footer-brand .badge {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid var(--line-hairline);
  border-radius: 999px; color: var(--fg-muted);
}
.footer-grid h5 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-muted); margin: 0 0 18px;
}
.footer-grid a {
  color: var(--fg-secondary); text-decoration: none;
  font-size: 14px; line-height: 2.1; display: block;
  transition: color 160ms var(--ease-out);
}
.footer-grid a:hover { color: var(--brand-cyan); }
.footer-big {
  position: relative;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(64px, 14vw, 200px);
  line-height: 0.86; letter-spacing: -0.06em;
  color: var(--fg-primary);
  margin: 88px 0 24px;
  white-space: nowrap;
  overflow: hidden;
}
.footer-big em {
  font-style: italic;
  background: var(--ai-gradient);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroShim 8s linear infinite;
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line-hairline); padding-top: 28px;
}
.footer-bottom .copy {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-muted); letter-spacing: 0.08em;
}
.footer-bottom .legal { display: flex; gap: 24px; }
.footer-bottom .legal a {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-muted); letter-spacing: 0.08em; text-decoration: none;
}
.footer-bottom .legal a:hover { color: var(--fg-primary); }
.footer-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--success);
}
.footer-status .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--success); box-shadow: 0 0 10px var(--success);
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================================
   LIGHT MODE OVERRIDES
   The design system [data-theme="light"] tokens cover most
   surfaces (cards, text, hairlines). These selectors retint the
   hand-rolled dark sections (hero, orbs, banners, gradients).
   ============================================================ */
[data-theme="light"] .nav-wrap {
  background: linear-gradient(180deg, rgba(250,250,247,0.92), rgba(250,250,247,0.55) 70%, transparent);
}
[data-theme="light"] .nav-pill {
  background: transparent;
  border: 0;
  box-shadow: none;
}
[data-theme="light"] .nav-link:hover { background: var(--bg-surface-2); }
[data-theme="light"] .nav-link.active {
  background: var(--accent-bg);
  color: var(--brand-blue-deep);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* Buttons — primary uses the unified red→blue gradient in both themes.
   Secondary uses glass and needs a bit more substance on light bg. */
[data-theme="light"] .btn { color: #ffffff; }
[data-theme="light"] .btn .arr { color: #ffffff; }

[data-theme="light"] .btn.secondary {
  color: var(--fg-primary);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55)),
    rgba(255,255,255,0.4);
  border-color: rgba(15,30,80,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.4);
}
[data-theme="light"] .btn.secondary:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.75)),
    rgba(255,255,255,0.5);
}
[data-theme="light"] .btn.secondary .arr {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5)),
    rgba(255,255,255,0.4);
  color: var(--brand-blue-deep);
}
[data-theme="light"] .btn.secondary:hover .arr {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5)),
    var(--ai-grad-soft);
}

[data-theme="light"] .btn.ghost {
  color: var(--fg-primary);
}
[data-theme="light"] .btn.ghost:hover {
  background: rgba(15,30,80,0.04);
}

/* ── HERO ── soft cream bg + blue glow blob (Nexchain-style) */
[data-theme="light"] .hero-bg {
  background:
    radial-gradient(ellipse 75% 60% at 75% 30%, rgba(32,81,249,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 18% 75%, rgba(104,163,247,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #FAFAF7 0%, #F4F6FB 50%, #FAFAF7 100%);
}
[data-theme="light"] .hero-bg::before {
  color: #B8C5E0; opacity: 0.5;
}
[data-theme="light"] .hero-bg::after {
  background-image:
    linear-gradient(rgba(32,81,249,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,81,249,0.07) 1px, transparent 1px);
}
[data-theme="light"] .hero-floor {
  background-image:
    linear-gradient(rgba(32,81,249,0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,81,249,0.45) 1px, transparent 1px);
  opacity: 0.55;
}

[data-theme="light"] .hero-eyebrow {
  background: rgba(32, 81, 249, 0.10);
  border-color: rgba(32,81,249,0.30);
  color: var(--brand-blue-deep);
  box-shadow: 0 0 24px rgba(32,81,249,0.12);
}
[data-theme="light"] .hero-eyebrow .dot {
  background: var(--brand-blue);
  box-shadow: 0 0 10px var(--brand-blue);
}

/* Hero headline shimmer — deep blue → cyan → deep blue */
[data-theme="light"] .hero h1 em,
[data-theme="light"] .section-title em,
[data-theme="light"] .ai-banner h2 em,
[data-theme="light"] .cta-title em,
[data-theme="light"] .footer-big em {
  background: linear-gradient(110deg, var(--brand-blue-deep) 0%, var(--brand-blue) 40%, var(--brand-cyan) 70%, var(--brand-blue-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Orb chips */
[data-theme="light"] .orb-chip {
  background: rgba(255,255,255,0.85);
  border-color: rgba(32,81,249,0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 12px 36px rgba(15,17,22,0.08),
    0 0 0 0.5px rgba(32,81,249,0.10);
}
[data-theme="light"] .orb-chip .ic {
  background: var(--accent-bg);
  border-color: var(--accent-line);
  color: var(--brand-blue);
}

/* Hero trust */
[data-theme="light"] .hero-trust .logos .lg { color: var(--fg-muted); }

/* Section eyebrows */
[data-theme="light"] .section-eyebrow { color: var(--brand-blue-deep); }

/* Service tiles */
[data-theme="light"] .svc.featured {
  background:
    radial-gradient(ellipse 90% 90% at 100% 0%, rgba(32, 81, 249, 0.12) 0%, transparent 60%),
    var(--bg-surface);
  border-color: rgba(32, 81, 249, 0.30);
}
[data-theme="light"] .svc.featured .svc-ic { color: var(--brand-blue); }

/* Method visual */
[data-theme="light"] .method-visual {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(32,81,249,0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(104,163,247,0.16), transparent 70%),
    linear-gradient(180deg, #F4F6FB 0%, #FAFAF7 100%);
  border-color: var(--line-hairline);
}
[data-theme="light"] .method-visual::before {
  background-image:
    linear-gradient(rgba(32,81,249,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,81,249,0.10) 1px, transparent 1px);
}
[data-theme="light"] .method-orbit {
  border-color: rgba(32,81,249,0.20);
}
[data-theme="light"] .method-orbit.o4 { border-color: rgba(32,81,249,0.12); }

[data-theme="light"] .method-step.active {
  background:
    linear-gradient(120deg, rgba(32,81,249,0.08), transparent 55%),
    var(--bg-surface);
  border-color: rgba(32,81,249,0.32);
}

/* AI Lab banner */
[data-theme="light"] .ai-banner {
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(32,81,249,0.14), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(104,163,247,0.14), transparent 60%),
    linear-gradient(135deg, #FFFFFF 0%, #F4F6FB 100%);
  border-color: rgba(32, 81, 249,0.25);
}
[data-theme="light"] .ai-banner::before {
  background-image:
    linear-gradient(rgba(32,81,249,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,81,249,0.07) 1px, transparent 1px);
}
[data-theme="light"] .ai-stack-row {
  background: rgba(255,255,255,0.7);
  border-color: var(--line-hairline);
  color: var(--fg-secondary);
}
[data-theme="light"] .ai-stack-row .nm { color: var(--fg-primary); }
[data-theme="light"] .ai-stack-row .dot {
  background: var(--brand-blue);
  box-shadow: 0 0 10px var(--brand-blue);
}

/* Case thumbs */
[data-theme="light"] .case .thumb {
  background:
    linear-gradient(135deg, rgba(32, 81, 249,0.08), rgba(104, 163, 247,0.04)),
    var(--bg-surface-2);
}
[data-theme="light"] .case .thumb::before {
  background-image:
    linear-gradient(rgba(32,81,249,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,81,249,0.10) 1px, transparent 1px);
}
[data-theme="light"] .case .badge {
  background: rgba(255,255,255,0.85);
  color: var(--fg-primary);
}
[data-theme="light"] .case .badge.acc {
  color: var(--brand-blue-deep);
  background: var(--accent-bg);
}
[data-theme="light"] .case .mock {
  background: #FFFFFF;
  box-shadow: 0 24px 60px rgba(15,17,22,0.10);
}
[data-theme="light"] .case .mock-head { background: var(--bg-surface-2); }
[data-theme="light"] .case .read { color: var(--brand-blue-deep); }
[data-theme="light"] .case .read .arr { background: var(--accent-bg); }

/* Quote */
[data-theme="light"] .quote-asset {
  background:
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(32,81,249,0.18), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F4F6FB);
  border-color: var(--line-hairline);
}
[data-theme="light"] .quote-asset::before {
  background-image:
    linear-gradient(rgba(32,81,249,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,81,249,0.10) 1px, transparent 1px);
}
[data-theme="light"] .quote-content .quote-mark { color: var(--brand-blue); }

/* CTA */
[data-theme="light"] .cta-section {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(32,81,249,0.20), transparent 60%),
    radial-gradient(ellipse 40% 50% at 20% 100%, rgba(104,163,247,0.15), transparent 60%),
    var(--bg-canvas);
}
[data-theme="light"] .cta-section::before {
  background-image:
    linear-gradient(rgba(32,81,249,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,81,249,0.08) 1px, transparent 1px);
}
[data-theme="light"] .cta-eyebrow {
  background: rgba(32,81,249,0.10);
  border-color: var(--accent-line);
  color: var(--brand-blue-deep);
}

/* Footer */
[data-theme="light"] .footer {
  background: var(--bg-surface-2);
}
[data-theme="light"] .footer-grid a:hover { color: var(--brand-blue-deep); }
[data-theme="light"] .footer-status { color: #1F8A5B; }
[data-theme="light"] .footer-status .dot { background: #1F8A5B; box-shadow: 0 0 10px #1F8A5B; }

/* Industry chips */
[data-theme="light"] .industry-chip:hover {
  border-color: var(--accent-line);
  background: var(--accent-bg);
}
[data-theme="light"] .industry-chip:hover svg { color: var(--brand-blue); }

/* Hero corner system labels */
[data-theme="light"] .hero-syslabel { color: var(--fg-muted); }
[data-theme="light"] .hero-syslabel .tick {
  background: var(--brand-blue);
  box-shadow: 0 0 10px var(--brand-blue);
}

/* Logo height tune (single wordmark) */
.brand .brand-wm { height: 36px; display: block; }

/* ============================================================
   PRODUCT CASES — "From challenge to impact" narrative section.
   3 alternating product rows, each with a stylised browser
   mock on one side and a 4-phase timeline on the other.
   ============================================================ */
.product-cases {
  --pc-blue:   #2051F9;
  --pc-purple: #8B5CF6;
  --pc-cyan:   #00B5D4;
}
.pc-list { display: none; }

/* Tab navigation across products */
.pc-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 48px;
}
.pc-tab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--fg-primary);
  transition: all 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: var(--shadow-inset-hi);
  position: relative;
  overflow: hidden;
}
.pc-tab:hover {
  border-color: var(--line-soft);
  transform: translateY(-1px);
}
.pc-tab.is-active {
  border-color: rgba(32,81,249,0.35);
  background:
    linear-gradient(180deg, rgba(32,81,249,0.06), transparent 60%),
    var(--bg-surface);
  box-shadow: 0 12px 28px rgba(32,81,249,0.10), var(--shadow-inset-hi);
}
.pc-tab.accent-purple.is-active {
  border-color: rgba(139,92,246,0.35);
  background:
    linear-gradient(180deg, rgba(139,92,246,0.06), transparent 60%),
    var(--bg-surface);
  box-shadow: 0 12px 28px rgba(139,92,246,0.10), var(--shadow-inset-hi);
}
.pc-tab.accent-cyan.is-active {
  border-color: rgba(0,181,212,0.35);
  background:
    linear-gradient(180deg, rgba(0,181,212,0.06), transparent 60%),
    var(--bg-surface);
  box-shadow: 0 12px 28px rgba(0,181,212,0.10), var(--shadow-inset-hi);
}

.pc-tab .pc-tab-num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fg-faint);
}
.pc-tab .pc-tab-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-tab .pc-tab-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 18px; letter-spacing: -0.015em;
  color: var(--fg-primary);
}
.pc-tab .pc-tab-tag {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}
.pc-tab .pc-tab-dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--line-soft);
  transition: all 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pc-tab.is-active .pc-tab-dot {
  background: var(--pc-blue);
  box-shadow: 0 0 0 4px rgba(32,81,249,0.18), 0 0 10px rgba(32,81,249,0.45);
}
.pc-tab.accent-purple.is-active .pc-tab-dot {
  background: var(--pc-purple);
  box-shadow: 0 0 0 4px rgba(139,92,246,0.18), 0 0 10px rgba(139,92,246,0.45);
}
.pc-tab.accent-cyan.is-active .pc-tab-dot {
  background: var(--pc-cyan);
  box-shadow: 0 0 0 4px rgba(0,181,212,0.18), 0 0 10px rgba(0,181,212,0.45);
}

.pc-row {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 56px;
  align-items: center;
  position: relative;
  isolation: isolate;
  animation: pcFade 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.pc-left {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 14px;
}
@keyframes pcFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Visual side — browser shell + product mock */
.pc-visual {
  position: relative;
  margin-top: 18px;
}
.pc-browser {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--line-hairline);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 30px 60px rgba(15,30,80,0.16),
    0 8px 24px rgba(15,30,80,0.06);
  transform: perspective(1200px) rotateY(0);
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pc-row:not(.is-flipped) .pc-browser:hover {
  transform: perspective(1200px) rotateY(-2deg) translateY(-2px);
}

.pc-browser-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-hairline);
  background: var(--bg-surface-2);
}
.pc-browser-dots { display: inline-flex; gap: 6px; }
.pc-browser-dots span {
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--line-soft);
}
.pc-browser-dots span:nth-child(1) { background: #FF5F57; }
.pc-browser-dots span:nth-child(2) { background: #FEBC2E; }
.pc-browser-dots span:nth-child(3) { background: #28C840; }

.pc-browser-url {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-canvas);
  border: 1px solid var(--line-hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-secondary);
  width: fit-content; margin: 0 auto;
}
.pc-browser-url svg { width: 12px; height: 12px; color: var(--fg-faint); }
.pc-browser-tools svg { width: 16px; height: 16px; color: var(--fg-faint); }

.pc-browser-canvas {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(32,81,249,0.08), transparent 60%),
    linear-gradient(180deg, #F8FAFE, #EFF3FB);
  position: relative;
  overflow: hidden;
}

/* Accent-tinted canvas backgrounds */
.pc-row.accent-blue   .pc-browser-canvas {
  background:
    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(32,81,249,0.10), transparent 60%),
    linear-gradient(180deg, #F4F8FF, #E9F0FE);
}
.pc-row.accent-purple .pc-browser-canvas {
  background:
    radial-gradient(ellipse 60% 60% at 20% 20%, rgba(139,92,246,0.10), transparent 60%),
    linear-gradient(180deg, #FBF8FF, #F0E8FE);
}
.pc-row.accent-cyan   .pc-browser-canvas {
  background:
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(0,181,212,0.10), transparent 60%),
    linear-gradient(180deg, #F4FCFF, #E6F7FB);
}

/* Visual tag — corner label */
.pc-visual-tag {
  position: absolute;
  left: -16px; top: -16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--line-hairline);
  box-shadow: 0 8px 18px rgba(15,30,80,0.10);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pc-tag-num   { color: var(--fg-faint); }
.pc-tag-name  { color: var(--pc-blue); }
.pc-row.accent-purple .pc-tag-name { color: var(--pc-purple); }
.pc-row.accent-cyan   .pc-tag-name { color: var(--pc-cyan);   }
.pc-row.is-flipped .pc-visual-tag { /* legacy — no longer flipped */ }

/* Actions row — use shared .btn styles */
.pc-actions {
  display: inline-flex; flex-wrap: wrap; gap: 12px;
  margin-top: 10px;
}

/* Narrative side */
.pc-narrative { display: flex; flex-direction: column; gap: 14px; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-tag {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: var(--accent-bg);
  color: var(--pc-blue);
  border: 1px solid var(--accent-line);
}
.pc-row.accent-purple .pc-tag {
  background: rgba(139,92,246,0.08);
  color: var(--pc-purple);
  border-color: rgba(139,92,246,0.30);
}
.pc-row.accent-cyan .pc-tag {
  background: rgba(0,181,212,0.08);
  color: var(--pc-cyan);
  border-color: rgba(0,181,212,0.30);
}

.pc-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 42px; line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--fg-primary);
  margin: 8px 0 0;
}
.pc-tagline {
  font-family: var(--font-display); font-weight: 500;
  font-size: 19px; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--pc-blue);
  margin: 0;
}
.pc-row.accent-purple .pc-tagline { color: var(--pc-purple); }
.pc-row.accent-cyan   .pc-tagline { color: var(--pc-cyan);   }
.pc-descriptor {
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  color: var(--fg-secondary);
  margin: 0 0 12px;
  max-width: 56ch;
}

/* Phase timeline */
.pc-phases {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.pc-phase {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  position: relative;
}
.pc-phase-rail {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.pc-phase-num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fg-faint);
  background: var(--bg-canvas);
  padding: 4px 0;
  width: 28px; text-align: center;
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
  z-index: 1;
}
.pc-phase-line {
  position: absolute;
  top: 28px; bottom: -16px;
  width: 1px;
  background: linear-gradient(180deg, var(--pc-blue), rgba(32,81,249,0));
}
.pc-row.accent-purple .pc-phase-line { background: linear-gradient(180deg, var(--pc-purple), rgba(139,92,246,0)); }
.pc-row.accent-cyan   .pc-phase-line { background: linear-gradient(180deg, var(--pc-cyan),   rgba(0,181,212,0)); }
.pc-phase:last-child .pc-phase-line { display: none; }

.pc-phase-body {
  padding: 4px 0 20px;
}
.pc-phase-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.pc-phase-ic {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-line);
  color: var(--pc-blue);
  display: grid; place-items: center;
}
.pc-row.accent-purple .pc-phase-ic { background: rgba(139,92,246,0.10); border-color: rgba(139,92,246,0.30); color: var(--pc-purple); }
.pc-row.accent-cyan   .pc-phase-ic { background: rgba(0,181,212,0.10);  border-color: rgba(0,181,212,0.30);  color: var(--pc-cyan);   }
.pc-phase-ic svg { width: 16px; height: 16px; }
.pc-phase-label {
  font-family: var(--font-display); font-weight: 500;
  font-size: 17px; letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.pc-phase-body p {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--fg-muted); margin: 0;
}

.pc-read {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 6px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--pc-blue); text-decoration: none;
  align-self: flex-start;
}
.pc-row.accent-purple .pc-read { color: var(--pc-purple); }
.pc-row.accent-cyan   .pc-read { color: var(--pc-cyan);   }
.pc-read .arr {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--pc-blue); color: white;
  display: grid; place-items: center;
  transition: transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pc-row.accent-purple .pc-read .arr { background: var(--pc-purple); }
.pc-row.accent-cyan   .pc-read .arr { background: var(--pc-cyan);   }
.pc-read:hover .arr { transform: translateX(3px); }
.pc-read svg { width: 13px; height: 13px; }

/* ============================================================
   Product mocks — stylised, not real screenshots.
   ============================================================ */
.pc-mock {
  position: absolute; inset: 0;
  display: grid;
  font-family: var(--font-display);
}

/* Shared atoms */
.pc-mock .pc-mock-logo {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--pc-blue); color: #fff;
  font-weight: 500; font-size: 13px;
  margin: 18px;
}
.pc-row.accent-purple .pc-mock .pc-mock-logo { background: var(--pc-purple); }
.pc-row.accent-cyan   .pc-mock .pc-mock-logo { background: var(--pc-cyan);   }

.pc-mock .pc-mock-nav {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 16px;
}
.pc-mock .pc-mock-nav span {
  height: 22px; border-radius: 6px;
  background: rgba(15,30,80,0.06);
}
.pc-mock .pc-mock-nav span.active {
  background: var(--pc-blue);
  opacity: 0.18;
  border-left: 3px solid var(--pc-blue);
}
.pc-row.accent-purple .pc-mock .pc-mock-nav span.active { background: var(--pc-purple); opacity: 0.18; border-left-color: var(--pc-purple); }
.pc-row.accent-cyan   .pc-mock .pc-mock-nav span.active { background: var(--pc-cyan);   opacity: 0.18; border-left-color: var(--pc-cyan);   }

/* ---- Loan mock: sidebar + dashboard ---- */
.pc-mock-loan { grid-template-columns: 90px 1fr; }
.pc-mock-loan .pc-mock-side {
  border-right: 1px solid var(--line-hairline);
  display: flex; flex-direction: column; gap: 8px;
}
.pc-mock-loan .pc-mock-main { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.pc-mock-loan .pc-mock-h1 { height: 16px; width: 60%; border-radius: 4px; background: rgba(15,30,80,0.22); }
.pc-mock-loan .pc-mock-h2 { height: 10px; width: 40%; border-radius: 3px; background: rgba(15,30,80,0.10); }
.pc-mock-loan .pc-mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pc-mock-loan .pc-mock-stat {
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid var(--line-hairline);
  border-radius: 10px;
}
.pc-mock-loan .pc-mock-stat.acc {
  background: var(--pc-blue);
  border-color: var(--pc-blue);
  color: white;
  box-shadow: 0 8px 20px rgba(32,81,249,0.30);
}
.pc-mock-loan .pc-mock-stat .big { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.pc-mock-loan .pc-mock-stat .lbl { font-family: var(--font-mono); font-size: 9px; color: var(--fg-faint); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; }
.pc-mock-loan .pc-mock-stat.acc .lbl { color: rgba(255,255,255,0.75); }
.pc-mock-loan .pc-mock-chart {
  margin-top: auto;
  display: flex; align-items: flex-end; gap: 6px;
  height: 70px;
  padding-top: 8px;
  border-top: 1px solid var(--line-hairline);
}
.pc-mock-loan .pc-mock-chart span {
  flex: 1;
  background: rgba(32,81,249,0.20);
  border-radius: 4px 4px 0 0;
}
.pc-mock-loan .pc-mock-chart span.acc {
  background: var(--pc-blue);
  box-shadow: 0 -4px 12px rgba(32,81,249,0.40);
}

/* ---- Mission Fire mock: timeline of milestones ---- */
.pc-mock-mf { padding: 24px; }
.pc-mock-mf .pc-mock-main { display: flex; flex-direction: column; gap: 18px; height: 100%; }
.pc-mock-mf .pc-mock-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--pc-purple);
}
.pc-mock-mf .pc-mock-h1 { height: 18px; width: 70%; border-radius: 4px; background: rgba(15,30,80,0.22); }
.pc-mock-mf .pc-mock-timeline {
  display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative;
  padding: 14px 0;
}
.pc-mock-mf .pc-mock-timeline::before {
  content: ""; position: absolute;
  left: 5%; right: 5%; top: 22px; height: 2px;
  background: linear-gradient(90deg, var(--pc-purple), rgba(139,92,246,0));
  border-radius: 1px;
}
.pc-mock-mf .pc-mock-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.pc-mock-dot {
  width: 16px; height: 16px; border-radius: 999px;
  background: #FFFFFF;
  border: 2px solid var(--pc-purple);
  box-shadow: 0 2px 6px rgba(139,92,246,0.30);
}
.pc-mock-dot.acc {
  background: var(--pc-purple);
  box-shadow: 0 0 0 4px rgba(139,92,246,0.20), 0 4px 10px rgba(139,92,246,0.45);
}
.pc-mock-mf .pc-mock-step-lbl {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-muted); letter-spacing: 0.12em; text-transform: uppercase;
}
.pc-mock-mf .pc-mock-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.pc-mock-mf .pc-mock-card {
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid var(--line-hairline);
  border-radius: 10px;
}
.pc-mock-mf .pc-mock-card.acc {
  background: linear-gradient(135deg, var(--pc-purple), #B27AFF);
  border-color: var(--pc-purple);
  color: #fff;
  box-shadow: 0 10px 24px rgba(139,92,246,0.30);
}
.pc-mock-mf .pc-mock-card-h { height: 12px; width: 70%; border-radius: 3px; background: rgba(15,30,80,0.20); margin-bottom: 8px; }
.pc-mock-mf .pc-mock-card-row { height: 7px; border-radius: 3px; background: rgba(15,30,80,0.10); }
.pc-mock-mf .pc-mock-card-row.sm { width: 60%; margin-top: 6px; }
.pc-mock-mf .pc-mock-card.acc .pc-mock-card-h,
.pc-mock-mf .pc-mock-card.acc .pc-mock-card-row { background: rgba(255,255,255,0.55); }

/* ---- Amdital mock: kanban board ---- */
.pc-mock-amd { grid-template-columns: 90px 1fr; }
.pc-mock-amd .pc-mock-side {
  border-right: 1px solid var(--line-hairline);
  display: flex; flex-direction: column; gap: 8px;
}
.pc-mock-amd .pc-mock-main { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.pc-mock-amd .pc-mock-tabs {
  display: flex; gap: 12px;
  border-bottom: 1px solid var(--line-hairline);
  padding-bottom: 10px;
}
.pc-mock-amd .pc-mock-tabs span {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--fg-muted);
  padding-bottom: 8px;
  margin-bottom: -11px;
}
.pc-mock-amd .pc-mock-tabs span.active {
  color: var(--pc-cyan);
  border-bottom: 2px solid var(--pc-cyan);
}
.pc-mock-amd .pc-mock-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; }
.pc-mock-amd .pc-mock-col {
  padding: 12px;
  background: rgba(0,181,212,0.04);
  border: 1px dashed rgba(0,181,212,0.30);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.pc-mock-amd .pc-mock-col-h {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pc-cyan);
}
.pc-mock-amd .pc-mock-task {
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid var(--line-hairline);
  border-radius: 8px;
}
.pc-mock-amd .pc-mock-task .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--line-soft);
}
.pc-mock-amd .pc-mock-task .dot.acc {
  background: var(--pc-cyan);
  box-shadow: 0 0 6px rgba(0,181,212,0.6);
}
.pc-mock-amd .pc-mock-task .ln {
  flex: 1; height: 7px; border-radius: 3px;
  background: rgba(15,30,80,0.12);
}
.pc-mock-amd .pc-mock-task .ln.sm { width: 60%; flex: none; }

@media (max-width: 1100px) {
  .pc-tabs { grid-template-columns: 1fr; }
  .pc-row { grid-template-columns: 1fr; gap: 32px; }
  .pc-name { font-size: 32px; }
}
@media (max-width: 720px) {
  .pc-list { gap: 64px; }
}

/* ============================================================
   END PRODUCT CASES
   ============================================================ */
.core-morph {
  position: relative;
  background: transparent;
  box-shadow: none;
  width: 48%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  isolation: isolate;
  --cm-blue:   #2051F9;
  --cm-cyan:   #00D4FF;
  --cm-purple: #8B5CF6;
}

/* The morphing liquid blob */
.core-morph-blob {
  position: absolute; inset: 18%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9), rgba(255,255,255,0.10) 35%),
    linear-gradient(140deg, var(--cm-blue) 0%, #4A78FF 40%, var(--cm-cyan) 80%, var(--cm-purple) 100%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 -20px 50px rgba(0,30,120,0.45),
    inset 0 20px 50px rgba(255,255,255,0.25);
  animation: cmMorph 9s ease-in-out infinite, cmHueShift 18s linear infinite;
  z-index: 1;
}
@keyframes cmMorph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg); }
  25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%  { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; transform: rotate(180deg); }
  75%  { border-radius: 70% 30% 50% 50% / 30% 50% 30% 70%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(360deg); }
}
@keyframes cmHueShift {
  0%, 100% { filter: hue-rotate(0deg); }
  50%      { filter: hue-rotate(28deg); }
}

/* Soft halo behind the blob */
.core-morph-glow {
  position: absolute; inset: 4%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(32,81,249,0.45) 0%, rgba(32,81,249,0) 60%);
  filter: blur(10px);
  animation: cmGlow 3.4s ease-in-out infinite;
  z-index: 0;
}
@keyframes cmGlow {
  0%, 100% { transform: scale(0.96); opacity: 0.6; }
  50%      { transform: scale(1.18); opacity: 1; }
}

/* Center icon — crossfade-swap on each tick */
.core-morph-content {
  position: relative;
  z-index: 2;
  display: grid; place-items: center;
}
.core-morph-ic {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 18px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.40);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 8px 22px rgba(0,30,120,0.30);
  color: #fff;
  animation: cmIconFade 700ms cubic-bezier(0.18, 0.85, 0.3, 1.1) both,
             cmIconFloat 5s ease-in-out infinite;
}
.core-morph-ic svg { width: 30px; height: 30px; }
@keyframes cmIconFade {
  from { opacity: 0; transform: scale(0.6) rotate(-8deg); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1)   rotate(0);     filter: blur(0); }
}
@keyframes cmIconFloat {
  0%, 100% { translate: 0 -3px; }
  50%      { translate: 0  3px; }
}

/* Three tiny orbiting dots inside the blob */
.core-morph-orbit-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 16px rgba(140,180,255,0.7);
  top: 50%; left: 50%;
  z-index: 2;
}
.core-morph-orbit-dot.d1 { animation: cmOrbit1 6s linear infinite; }
.core-morph-orbit-dot.d2 { animation: cmOrbit2 8s linear infinite; }
.core-morph-orbit-dot.d3 { animation: cmOrbit3 10s linear infinite; }
@keyframes cmOrbit1 {
  from { transform: translate(-50%, -50%) rotate(0deg)   translateX(60px) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateX(60px) rotate(-360deg); }
}
@keyframes cmOrbit2 {
  from { transform: translate(-50%, -50%) rotate(120deg) translateX(48px) rotate(-120deg); }
  to   { transform: translate(-50%, -50%) rotate(480deg) translateX(48px) rotate(-480deg); }
}
@keyframes cmOrbit3 {
  from { transform: translate(-50%, -50%) rotate(240deg) translateX(72px) rotate(-240deg); }
  to   { transform: translate(-50%, -50%) rotate(-120deg) translateX(72px) rotate(120deg); }
}

/* Override the legacy .orb float so the core-morph plays its own animation */
.orb.core-morph {
  animation: orbFloat 8s ease-in-out infinite, orbPulse 3.6s ease-in-out infinite;
}

/* ============================================================
   END CORE MORPH
   ============================================================ */
/* ============================================================
   MORPHING VISUAL — cinematic hero right side
   ============================================================ */
.mvis {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  isolation: isolate;
  overflow: visible;
  --c-blue: #2051F9;
  --c-cyan: #00D4FF;
  --c-purple: #8B5CF6;
}

/* Layered ambient backdrop blobs */
.mvis-bg {
  position: absolute; inset: -8%;
  z-index: -1;
  border-radius: 50%;
  overflow: hidden;
}
.mvis-blob {
  position: absolute; border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  mix-blend-mode: screen;
}
.mvis-blob.b1 {
  width: 60%; height: 60%; top: -10%; left: 10%;
  background: radial-gradient(circle, var(--c-blue), transparent 65%);
  animation: blobMorph 14s ease-in-out infinite;
}
.mvis-blob.b2 {
  width: 55%; height: 55%; bottom: -8%; right: 0%;
  background: radial-gradient(circle, var(--c-purple), transparent 65%);
  animation: blobMorph 16s ease-in-out -3s infinite reverse;
}
.mvis-blob.b3 {
  width: 50%; height: 50%; top: 25%; right: 20%;
  background: radial-gradient(circle, var(--c-cyan), transparent 65%);
  animation: blobMorph 12s ease-in-out -6s infinite;
}
@keyframes blobMorph {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(20px,-15px) scale(1.1); }
  66%      { transform: translate(-15px,20px) scale(0.94); }
}

/* Particles */
.mvis-particles {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.mvis-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 6px rgba(140,180,255,0.9), 0 0 12px rgba(140,180,255,0.5);
  opacity: 0;
  animation: particleDrift linear infinite;
}
@keyframes particleDrift {
  0%   { opacity: 0; transform: translate(0,0) scale(0.6); }
  10%  { opacity: 0.9; }
  50%  { opacity: 1;   transform: translate(20px, -30px) scale(1.1); }
  90%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate(-15px, -60px) scale(0.4); }
}

/* SVG connecting lines */
.mvis-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  transform: translate(calc(var(--px) * 8px), calc(var(--py) * 8px));
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mvis-line {
  animation: lineFlow 2.4s linear infinite;
  filter: drop-shadow(0 0 4px rgba(32,81,249,0.6));
}
@keyframes lineFlow {
  to { stroke-dashoffset: -40; }
}
.mvis-ring-rot {
  transform-origin: 200px 200px;
  animation: ringSpin 36s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* Orbiting satellites */
.mvis-ring {
  position: absolute; inset: 0;
  z-index: 2;
  transform: translate(calc(var(--px) * 14px), calc(var(--py) * 14px));
  transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mvis-sat {
  position: absolute;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.9);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 10px 28px rgba(32,81,249,0.18),
    0 0 0 0.5px rgba(32,81,249,0.10);
  font-family: var(--font-display);
  font-weight: 500; font-size: 13.5px;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
  white-space: nowrap;
  animation: satFade 700ms cubic-bezier(0.18, 0.85, 0.3, 1.1) both,
             satFloat 6s ease-in-out infinite;
}
.mvis-sat .ic {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--c-blue), #1B3FCC);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(32,81,249,0.35);
  flex-shrink: 0;
}
.mvis-sat .ic svg { width: 14px; height: 14px; }
.mvis-sat.accent-cyan .ic {
  background: linear-gradient(180deg, var(--c-cyan), #00A0CC);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(0,212,255,0.35);
}
.mvis-sat.accent-purple .ic {
  background: linear-gradient(180deg, var(--c-purple), #6A40C5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(140,80,255,0.35);
}
.mvis-sat.accent-cyan {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 10px 28px rgba(0,212,255,0.18),
    0 0 0 0.5px rgba(0,212,255,0.10);
}
.mvis-sat.accent-purple {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 10px 28px rgba(140,80,255,0.18),
    0 0 0 0.5px rgba(140,80,255,0.10);
}
@keyframes satFade {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.78); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes satFloat {
  0%, 100% { transform: translate(-50%, calc(-50% - 4px)); }
  50%      { transform: translate(-50%, calc(-50% + 4px)); }
}

/* Morphing core */
.mvis-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 38%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid; place-items: center;
  animation: coreEntrance 700ms cubic-bezier(0.18, 0.85, 0.3, 1.1) both,
             coreFloat 9s ease-in-out infinite;
  filter:
    drop-shadow(0 0 24px rgba(32,81,249,0.55))
    drop-shadow(0 20px 50px rgba(32,81,249,0.35));
}
.mvis-core.accent-cyan {
  filter:
    drop-shadow(0 0 24px rgba(0,212,255,0.55))
    drop-shadow(0 20px 50px rgba(0,212,255,0.30));
}
.mvis-core.accent-purple {
  filter:
    drop-shadow(0 0 24px rgba(140,80,255,0.55))
    drop-shadow(0 20px 50px rgba(140,80,255,0.30));
}
@keyframes coreEntrance {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes coreFloat {
  0%, 100% { transform: translate(-50%, calc(-50% - 4px)); }
  50%      { transform: translate(-50%, calc(-50% + 4px)); }
}

.mvis-core-blob {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.85), rgba(255,255,255,0.10) 30%),
    linear-gradient(140deg, var(--c-blue) 0%, #4A78FF 40%, var(--c-cyan) 100%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow:
    inset 0 -30px 60px rgba(0,30,120,0.45),
    inset 0 30px 60px rgba(255,255,255,0.25);
  animation: morphBlob 9s ease-in-out infinite;
}
.mvis-core.accent-cyan .mvis-core-blob {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.85), rgba(255,255,255,0.10) 30%),
    linear-gradient(140deg, var(--c-cyan) 0%, #38BFE8 40%, var(--c-blue) 100%);
}
.mvis-core.accent-purple .mvis-core-blob {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.85), rgba(255,255,255,0.10) 30%),
    linear-gradient(140deg, var(--c-purple) 0%, #B27AFF 50%, var(--c-blue) 100%);
}
@keyframes morphBlob {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg); }
  25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%  { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; transform: rotate(180deg); }
  75%  { border-radius: 70% 30% 50% 50% / 30% 50% 30% 70%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(360deg); }
}

/* Glow ring that pulses behind the core */
.mvis-core-glow {
  position: absolute; inset: -10%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(32,81,249,0.35) 0%, rgba(32,81,249,0) 60%);
  filter: blur(8px);
  animation: glowPulse 3.2s ease-in-out infinite;
  z-index: -1;
}
.mvis-core.accent-cyan .mvis-core-glow {
  background: radial-gradient(circle, rgba(0,212,255,0.35) 0%, rgba(0,212,255,0) 60%);
}
.mvis-core.accent-purple .mvis-core-glow {
  background: radial-gradient(circle, rgba(140,80,255,0.35) 0%, rgba(140,80,255,0) 60%);
}
@keyframes glowPulse {
  0%, 100% { transform: scale(1);   opacity: 0.65; }
  50%      { transform: scale(1.2); opacity: 1;   }
}

.mvis-core-content {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  color: #fff;
  animation: contentFade 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes contentFade {
  from { opacity: 0; transform: translateY(10px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.mvis-core-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
}
.mvis-core-ic {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.mvis-core-ic svg { width: 24px; height: 24px; color: #fff; }
.mvis-core-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
  max-width: 12ch;
}

/* Progress pips */
.mvis-progress {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; gap: 6px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.mvis-pip {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--line-soft);
  transition: all 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mvis-pip.is-active {
  width: 22px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-cyan));
  box-shadow: 0 0 8px rgba(32,81,249,0.5);
}

/* Dark mode tone tweaks for satellites + progress */
[data-theme="dark"] .mvis-sat {
  background: rgba(20,26,40,0.72);
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 28px rgba(0,0,0,0.45);
  color: var(--fg-primary);
}
[data-theme="dark"] .mvis-progress {
  background: rgba(20,26,40,0.7);
  border-color: var(--line-hairline);
}

/* ============================================================
   RESPONSIVE — gentle, design width is 1440 but keep readable
   ============================================================ */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero h1 { font-size: 52px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc.featured { grid-column: span 2; }
  .case-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .case.featured { grid-row: auto; }
  .ai-banner { grid-template-columns: 1fr; }
  .method-wrap { grid-template-columns: 1fr; }
  .quote-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line-hairline); }
}


/* ============================================================
   Testimonials v2 — featured card + clickable selectors
   ============================================================ */
.tm2-wrap {
  position: relative;
  margin-top: 32px;
}

.tm2-featured {
  position: relative;
  padding: 44px 56px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(32, 81, 249, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(104, 163, 247, 0.08), transparent 60%),
    var(--bg-surface);
  border: 1px solid var(--line-hairline);
  box-shadow:
    0 1px 2px rgba(15, 30, 80, 0.04),
    0 24px 50px -20px rgba(15, 30, 80, 0.18),
    var(--shadow-inset-hi);
  overflow: hidden;
  isolation: isolate;
  animation: tm2FadeIn 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes tm2FadeIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

.tm2-feat-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.tm2-feat-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(32, 81, 249, 0.10), rgba(32, 81, 249, 0.04));
  border: 1px solid rgba(32, 81, 249, 0.18);
  color: var(--brand-blue);
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.tm2-feat-mark svg { width: 22px; height: 22px; }
.tm2-feat-rating {
  display: inline-flex;
  gap: 2px;
  color: #F5B400;
}
.tm2-feat-rating svg { width: 18px; height: 18px; display: block; }
.tm2-feat-industry {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 6px 14px;
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
}

.tm2-feat-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--fg-primary);
  margin: 0 0 32px;
  text-wrap: pretty;
  max-width: 64ch;
}

.tm2-feat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px dashed var(--line-hairline);
  flex-wrap: wrap;
}
.tm2-feat-author {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.tm2-feat-avatar {
  width: 52px; height: 52px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 14px rgba(15, 30, 80, 0.18);
}
.tm2-feat-author > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tm2-feat-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
}
.tm2-feat-role {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--fg-muted);
}

.tm2-feat-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  background: var(--bg-canvas);
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
}
.tm2-arrow {
  appearance: none;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  color: var(--fg-secondary);
  display: inline-grid; place-items: center;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.tm2-arrow:hover {
  background: linear-gradient(180deg, #3F6BFF, var(--brand-blue));
  border-color: var(--brand-blue);
  color: #fff;
  transform: translateY(-1px);
}
.tm2-arrow svg { width: 12px; height: 12px; }
.tm2-counter {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
  padding: 0 6px;
}
.tm2-counter strong {
  color: var(--fg-primary);
  font-weight: 500;
}

/* Selector strip */
.tm2-selectors {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.tm2-pick {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-inset-hi);
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  min-width: 0;
}
.tm2-pick:hover {
  transform: translateY(-2px);
  border-color: rgba(32, 81, 249, 0.30);
  box-shadow: 0 10px 22px -10px rgba(32, 81, 249, 0.18), var(--shadow-inset-hi);
}
.tm2-pick.is-active {
  background:
    linear-gradient(180deg, rgba(32, 81, 249, 0.06), transparent 90%),
    var(--bg-surface);
  border-color: var(--brand-blue);
  box-shadow:
    0 0 0 1px var(--brand-blue),
    0 14px 28px -16px rgba(32, 81, 249, 0.25),
    var(--shadow-inset-hi);
}
.tm2-pick-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(15, 30, 80, 0.18);
}
.tm2-pick-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tm2-pick-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm2-pick-co {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide the old marquee styles when the v2 markup is used */
.testimonials--v2 .tm-marquee { display: none; }

/* Responsive */
@media (max-width: 1100px) {
  .tm2-featured { padding: 32px 32px; }
  .tm2-feat-quote { font-size: 22px; }
  .tm2-selectors { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .tm2-feat-head { flex-wrap: wrap; gap: 12px; }
  .tm2-feat-industry { margin-left: 0; }
  .tm2-feat-foot { flex-direction: column; align-items: flex-start; }
  .tm2-selectors { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Micro-interactions — coordinated layer on top of base styles.
   Loaded after site.css so it can override transitions/opacity.
   ============================================================ */

/* ─── Scroll reveal ───────────────────────────────────────── */
.mx-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--mx-stagger, 0ms);
  will-change: opacity, transform;
}
.mx-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* If users prefer reduced motion, skip the entrance */
@media (prefers-reduced-motion: reduce) {
  .mx-reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Cursor spotlight ────────────────────────────────────── */
.mx-spot {
  position: relative;
  isolation: isolate;
}
.mx-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--mx-x, -200px) var(--mx-y, -200px),
    rgba(32, 81, 249, 0.10),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
  /* sits behind children via the local stacking context (isolation: isolate) */
  z-index: -1;
}
.mx-spot:hover::after { opacity: 1; }

/* ─── Service card — icon scale + rotate, card lift ───────── */
.svc .svc-ic {
  transition:
    transform 320ms cubic-bezier(0.18, 0.85, 0.3, 1.1),
    background-color 220ms,
    border-color 220ms,
    color 220ms;
}
.svc:hover .svc-ic {
  transform: scale(1.08) rotate(-4deg);
}
.svc-title {
  transition: color 220ms;
}
.svc:hover .svc-title { color: var(--brand-blue); }

.svc-tags li {
  transition: background-color 220ms, color 220ms, border-color 220ms;
}
.svc:hover .svc-tags li {
  border-color: rgba(32, 81, 249, 0.25);
  color: var(--fg-secondary);
}

/* ─── Industry chip — icon nudge ──────────────────────────── */
.industry-chip svg {
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.industry-chip:hover svg {
  transform: scale(1.18) rotate(-6deg);
}

/* ─── Feature card icon — bounce ──────────────────────────── */
.feature-ic {
  transition:
    transform 320ms cubic-bezier(0.18, 0.85, 0.3, 1.1),
    box-shadow 240ms;
}
.feature-card:hover .feature-ic {
  transform: scale(1.06) rotate(-3deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 6px 16px rgba(32, 81, 249, 0.25);
}

/* ─── Mega menu icon nudge ────────────────────────────────── */
.mega-ic {
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
              background 240ms, color 240ms, box-shadow 240ms,
              border-color 240ms;
}
.mega-item:hover .mega-ic {
  transform: rotate(-6deg) scale(1.04);
}

/* ─── Button AI shine sweep (primary) — cyan → white → violet ─ */
.btn.primary {
  overflow: hidden;
}
.btn.primary::before {
  content: "";
  position: absolute;
  top: -2px; bottom: -2px;
  left: -120%;
  width: 75%;
  background: linear-gradient(
    110deg,
    transparent 6%,
    rgba(99,102,241,0.40) 30%,
    rgba(255,255,255,0.60) 50%,
    rgba(255,61,139,0.45) 70%,
    transparent 94%
  );
  transform: skewX(-20deg);
  transition: left 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
.btn.primary:hover::before { left: 150%; }

/* ─── Arrow chip — rotate on hover ────────────────────────── */
.btn .arr {
  transition:
    transform 220ms cubic-bezier(0.18, 0.85, 0.3, 1.1),
    background-color 220ms;
}
/* arrow hover handled in site.css glass theme */

/* ─── Stat numbers — hover gleam ──────────────────────────── */
.stat {
  transition: background-color 240ms;
}
.stat:hover .big {
  background: linear-gradient(110deg,
    var(--fg-primary) 0%,
    var(--brand-blue) 50%,
    var(--brand-cyan) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mxStatShim 1.4s linear infinite;
}
@keyframes mxStatShim {
  to { background-position: 200% 50%; }
}

/* ─── Case-card thumb — gentle zoom (already exists for work);
       apply same to .case .thumb that doesn't have one ──── */
.case .thumb {
  overflow: hidden;
}
.case .thumb::after {
  /* a subtle inset highlight that brightens on hover */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(32, 81, 249, 0);
  transition: box-shadow 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.case:hover .thumb::after {
  box-shadow: inset 0 0 0 1px rgba(32, 81, 249, 0.25);
}

/* ─── Method step — number color shift on hover ───────────── */
.method-step .num {
  transition: all 280ms cubic-bezier(0.18, 0.85, 0.3, 1.1);
}
.method-step:hover:not(.active) .num {
  color: var(--brand-blue);
  transform: scale(1.05);
}

/* ─── Testimonial card — star glint ───────────────────────── */
.tm-card:hover .tm-stars svg {
  animation: mxStarPop 0.6s cubic-bezier(0.18, 0.85, 0.3, 1.1) both;
}
.tm-card:hover .tm-stars svg:nth-child(1) { animation-delay: 0ms;   }
.tm-card:hover .tm-stars svg:nth-child(2) { animation-delay: 60ms;  }
.tm-card:hover .tm-stars svg:nth-child(3) { animation-delay: 120ms; }
.tm-card:hover .tm-stars svg:nth-child(4) { animation-delay: 180ms; }
.tm-card:hover .tm-stars svg:nth-child(5) { animation-delay: 240ms; }
@keyframes mxStarPop {
  0%   { transform: scale(1)    rotate(0); }
  50%  { transform: scale(1.35) rotate(-12deg); }
  100% { transform: scale(1)    rotate(0); }
}

/* ─── Nav link underline draw ─────────────────────────────── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 4px;
  height: 1.5px;
  background: var(--brand-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  border-radius: 1px;
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active::after,
.nav-link.is-open::after { transform: scaleX(0); }

/* Active page indicator — distinct color + subtle pill */
.nav-link.active {
  color: var(--brand-blue);
  font-weight: 500;
}
[data-theme="light"] .nav-link.active { color: var(--brand-blue-deep); }

/* ─── Footer link — underline draw ────────────────────────── */
.footer-grid a {
  position: relative;
  display: inline-block;
}
.footer-grid a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.footer-grid a:hover::after { transform: scaleX(1); }

/* Social icons are also <a> in .footer-grid — kill the underline draw on them */
.footer-grid .footer-social-link::after,
.footer-social-link::after { display: none !important; }

/* ─── Hero milestones — number hover gleam ────────────────── */
.hero-meta .item .num {
  transition: transform 280ms cubic-bezier(0.18, 0.85, 0.3, 1.1);
}
.hero-meta .item:hover .num {
  transform: translateY(-2px);
}

/* ─── Hero CTA arrow micro-bounce on idle (subtle) ────────── */
.hero-ctas .btn.primary .arr svg {
  animation: mxArrowIdle 4s ease-in-out infinite;
}
@keyframes mxArrowIdle {
  0%, 90%, 100% { transform: translate(0, 0); }
  92%           { transform: translate(2px, -2px); }
  96%           { transform: translate(0, 0); }
}

/* ============================================================
   FOOTER — newsletter strip, social row, polish
   ============================================================ */
.footer { padding-top: 56px; }
.footer-newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  padding: 0 0 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--line-hairline);
}
.footer-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 16px;
}
.footer-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--brand-blue); box-shadow: 0 0 8px rgba(32,81,249,0.6);
}
.footer-news-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 38px; line-height: 1.05; letter-spacing: -0.025em;
  margin: 0; color: var(--fg-primary);
  max-width: 22ch; text-wrap: balance;
}
.footer-news-title em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(110deg, var(--brand-blue-deep) 0%, var(--brand-blue) 50%, var(--brand-cyan) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: heroShim 9s linear infinite;
}
.footer-news-form {
  display: flex; gap: 10px;
  background: #FFFFFF;
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(15,30,80,0.05);
}
.footer-news-form input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 12px 18px;
  font-family: var(--font-body); font-size: 14.5px;
  color: var(--fg-primary);
  outline: none;
}
.footer-news-form input::placeholder { color: var(--fg-faint); }
.footer-news-form .btn.primary { padding: 10px 24px; height: auto; }

/* Social row inside brand block */
.footer-social {
  display: inline-flex; gap: 10px;
  margin-top: 22px;
}
.footer-social-link {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: #C9CDD6;
  text-decoration: none;
  padding: 0;
  line-height: 0;
  transition:
    transform 220ms cubic-bezier(0.18, 0.85, 0.3, 1.1),
    color 220ms;
}
.footer-social-link svg {
  width: 20px; height: 20px;
  display: block;
  margin: 0;
}
.footer-social-link:hover {
  transform: translateY(-2px) rotate(-4deg);
  background: transparent;
  border: none;
  color: var(--brand-cyan);
  box-shadow: none;
}

/* ============================================================
   FOOTER — dark surface treatment
   Re-maps neutral tokens inside .footer so children pick up
   dark-mode-appropriate colors regardless of [data-theme].
   ============================================================ */
.footer,
[data-theme="light"] .footer {
  background: #07080A !important;

  --fg-primary:   #F4F6F8;
  --fg-secondary: #A1A7B5;
  --fg-muted:     #7A8090;
  --fg-faint:     #50566A;

  --line-hairline: rgba(255, 255, 255, 0.08);
  --line-soft:     rgba(255, 255, 255, 0.14);
}

/* Section divider above the bottom row */
.footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer .footer-newsletter {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand description copy */
.footer .footer-brand p { color: #9AA0AE; }

/* Badge chips on dark */
.footer .footer-brand .badge {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #B6BBC8;
}

/* Column headings + links */
.footer .footer-grid h5  { color: #8A91A2; }
.footer .footer-grid a   { color: #C9CDD6; }
.footer .footer-grid a:hover { color: var(--brand-cyan); }
[data-theme="light"] .footer .footer-grid a:hover { color: var(--brand-cyan); }

/* Bottom row: copy + legal */
.footer .footer-bottom .copy        { color: #7A8090; }
.footer .footer-bottom .legal a     { color: #8A91A2; }
.footer .footer-bottom .legal a:hover { color: #FFFFFF; }

/* "all systems operational" — make it visible on dark */
.footer .footer-status              { color: #4ADE80; }
.footer .footer-status .dot         {
  background: #4ADE80;
  box-shadow: 0 0 10px #4ADE80;
}
[data-theme="light"] .footer .footer-status { color: #4ADE80; }
[data-theme="light"] .footer .footer-status .dot {
  background: #4ADE80;
  box-shadow: 0 0 10px #4ADE80;
}

/* Newsletter eyebrow + dot */
.footer .footer-eyebrow      { color: #8A91A2; }
.footer .footer-eyebrow-dot  {
  background: var(--brand-cyan);
  box-shadow: 0 0 8px rgba(104, 163, 247, 0.7);
}

/* Newsletter input card — keep crisp white surface, polished border */
.footer .footer-news-form {
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.footer .footer-news-form input { color: var(--brand-ink); }
.footer .footer-news-form input::placeholder { color: #A6ABB6; }

/* The legacy "Engineered with AI" big text — hide if a stale
   build still renders it. */
.footer-big { display: none; }

@media (max-width: 1100px) {
  .footer-newsletter { grid-template-columns: 1fr; }
  .footer-news-title { font-size: 28px; }
}

/* ============================================================
   CHATBOT FAB + panel
   ============================================================ */
.chatbot-fab {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 1000;
  width: 60px; height: 60px;
  border-radius: 999px;
  background: linear-gradient(140deg, #4A78FF 0%, var(--brand-blue) 50%, var(--brand-blue-deep) 100%);
  border: 0;
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 14px 36px rgba(32,81,249,0.45),
    0 6px 16px rgba(32,81,249,0.30);
  transition:
    transform 280ms cubic-bezier(0.18, 0.85, 0.3, 1.1),
    box-shadow 280ms cubic-bezier(0.18, 0.85, 0.3, 1.1);
}
.chatbot-fab:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 18px 44px rgba(32,81,249,0.55),
    0 8px 20px rgba(32,81,249,0.40);
}
.chatbot-fab.is-open {
  transform: rotate(90deg);
  background: linear-gradient(140deg, #FF6B6B 0%, #E14B4B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 14px 36px rgba(225,75,75,0.45);
}
.chatbot-fab svg {
  width: 26px; height: 26px;
  position: relative; z-index: 1;
}
.chatbot-fab-pulse {
  position: absolute; inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(32,81,249,0.55);
  animation: chatbotPulse 2.4s ease-out infinite;
}
.chatbot-fab.is-open .chatbot-fab-pulse { display: none; }
@keyframes chatbotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(32,81,249,0.55); }
  70%  { box-shadow: 0 0 0 22px rgba(32,81,249,0); }
  100% { box-shadow: 0 0 0 0 rgba(32,81,249,0); }
}
.chatbot-fab-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  background: #FF5F57;
  border: 2px solid var(--bg-canvas);
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; color: #fff;
  display: inline-grid; place-items: center;
  box-shadow: 0 4px 8px rgba(255,95,87,0.40);
}

/* Panel */
.chatbot-panel {
  position: fixed;
  right: 24px; bottom: 96px;
  z-index: 999;
  width: 380px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 120px);
  background: #FFFFFF;
  border: 1px solid var(--line-hairline);
  border-radius: 20px;
  box-shadow:
    0 30px 80px rgba(15,30,80,0.20),
    0 8px 24px rgba(15,30,80,0.08);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition:
    opacity 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 260ms cubic-bezier(0.18, 0.85, 0.3, 1.1);
}
.chatbot-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chatbot-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #F8FAFE 0%, #EFF3FB 100%);
  border-bottom: 1px solid var(--line-hairline);
}
.chatbot-avatar {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #4A78FF, var(--brand-blue));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 6px 14px rgba(32,81,249,0.35);
}
.chatbot-avatar svg { width: 20px; height: 20px; position: relative; z-index: 1; }
.chatbot-avatar-glow {
  position: absolute; inset: -4px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(32,81,249,0.45) 0%, transparent 60%);
  filter: blur(6px);
  animation: chatbotGlow 2.6s ease-in-out infinite;
}
@keyframes chatbotGlow {
  0%, 100% { opacity: 0.6; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.1);  }
}
.chatbot-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 15px; letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.chatbot-sub {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--fg-muted);
  margin-top: 2px;
}
.chatbot-status-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: #1F8A5B; box-shadow: 0 0 6px rgba(31,138,91,0.6);
  animation: pulse 2s ease-in-out infinite;
}
.chatbot-close {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(15,30,80,0.05);
  border: 0; cursor: pointer;
  color: var(--fg-muted);
  display: grid; place-items: center;
  transition: background 160ms, color 160ms;
}
.chatbot-close:hover { background: rgba(15,30,80,0.10); color: var(--fg-primary); }
.chatbot-close svg { width: 16px; height: 16px; }

/* Messages */
.chatbot-list {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.chatbot-msg {
  display: flex; align-items: flex-end; gap: 8px;
  max-width: 86%;
  animation: chatbotMsgIn 320ms cubic-bezier(0.18, 0.85, 0.3, 1.1) both;
}
.chatbot-msg.from-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
@keyframes chatbotMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chatbot-msg-avatar {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: linear-gradient(140deg, #4A78FF, var(--brand-blue));
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.chatbot-msg-avatar svg { width: 14px; height: 14px; }
.chatbot-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-family: var(--font-body); font-size: 14px;
  line-height: 1.45;
  background: var(--bg-surface-2);
  color: var(--fg-primary);
  border-bottom-left-radius: 4px;
}
.chatbot-msg.from-user .chatbot-bubble {
  background: linear-gradient(140deg, #4A78FF, var(--brand-blue));
  color: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 6px 14px rgba(32,81,249,0.25);
}

/* Typing indicator */
.chatbot-typing {
  display: inline-flex; gap: 4px;
  padding: 14px 14px;
}
.chatbot-typing span {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--fg-faint);
  animation: chatbotDot 1.2s ease-in-out infinite;
}
.chatbot-typing span:nth-child(2) { animation-delay: 0.15s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes chatbotDot {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1;   }
}

/* Quick replies */
.chatbot-quick {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 18px 12px;
}
.chatbot-quick-chip {
  font-family: var(--font-body); font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--bg-canvas);
  border: 1px solid var(--line-hairline);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: all 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.chatbot-quick-chip:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: var(--accent-bg);
}

/* Input row */
.chatbot-input {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line-hairline);
  background: #FFFFFF;
}
.chatbot-input input {
  flex: 1;
  background: var(--bg-canvas);
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--fg-primary);
  outline: none;
  transition: border-color 160ms, box-shadow 160ms;
}
.chatbot-input input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(32,81,249,0.15);
}
.chatbot-send {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: linear-gradient(140deg, #4A78FF, var(--brand-blue));
  color: #fff;
  border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(32,81,249,0.35);
  transition: transform 160ms;
}
.chatbot-send:hover:not(:disabled) { transform: scale(1.06); }
.chatbot-send:disabled { opacity: 0.4; cursor: not-allowed; }
.chatbot-send svg { width: 16px; height: 16px; }

/* Foot */
.chatbot-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px 12px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--fg-faint);
  background: #FFFFFF;
}
.chatbot-foot a { color: var(--brand-blue); text-decoration: none; }
.chatbot-foot a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .chatbot-panel {
    right: 12px; left: 12px;
    width: auto;
    bottom: 84px;
  }
  .chatbot-fab { right: 16px; bottom: 16px; }
}


/* ============================================================
   CTA — "Let's Talk" contact form
   ============================================================ */
.lt-form-wrap {
  position: relative;
  margin-top: 56px;
  display: flex;
  justify-content: center;
}
.lt-form-card {
  position: relative;
  width: 100%;
  max-width: 1040px;
  background: #FFFFFF;
  border: 1px solid var(--line-hairline);
  border-radius: 22px;
  padding: 40px 44px 32px;
  box-shadow:
    0 30px 80px -30px rgba(15, 30, 80, 0.25),
    0 12px 30px -12px rgba(15, 30, 80, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-align: left;
  isolation: isolate;
  overflow: hidden;
}
[data-theme="light"] .lt-form-card { background: #FFFFFF; }

/* Subtle grid backdrop on the card */
.lt-form-card::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(32, 81, 249, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 81, 249, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
}

.lt-form-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-hairline);
}
.lt-form-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 10px;
}
.lt-form-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--brand-blue);
  box-shadow: 0 0 8px rgba(32, 81, 249, 0.6);
}
.lt-form-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
}
.lt-required-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin: 0;
  white-space: nowrap;
}
.lt-required-note span { color: #E5484D; }

/* Form grid */
.lt-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
}
.lt-field { display: flex; flex-direction: column; gap: 8px; }
.lt-field--full { grid-column: 1 / -1; }

.lt-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-primary);
  display: inline-flex; align-items: center; gap: 4px;
}
.lt-req { color: #E5484D; font-weight: 600; }

/* Inputs */
.lt-form input[type="text"],
.lt-form input[type="email"],
.lt-form input[type="tel"],
.lt-form textarea,
.lt-form select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--fg-primary);
  background: #FAFAF7;
  border: 1px solid var(--line-hairline);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition:
    border-color 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out),
    background-color 160ms var(--ease-out);
}
.lt-form textarea { resize: vertical; min-height: 120px; }
.lt-form input::placeholder,
.lt-form textarea::placeholder { color: var(--fg-faint); }

.lt-form input:hover,
.lt-form textarea:hover,
.lt-form select:hover { border-color: var(--line-soft); }

.lt-form input:focus,
.lt-form textarea:focus,
.lt-form select:focus {
  border-color: var(--brand-blue);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(32, 81, 249, 0.12);
}

/* Name row — paired inputs with sub-labels */
.lt-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lt-name-cell { display: flex; flex-direction: column; gap: 4px; }
.lt-sub-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-left: 2px;
}

/* Select — custom caret */
.lt-select-wrap { position: relative; }
.lt-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  cursor: pointer;
}
.lt-select-caret {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--fg-muted);
  pointer-events: none;
}
.lt-select-caret svg { width: 100%; height: 100%; }

/* File input */
.lt-file {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: #FAFAF7;
  border: 1px dashed var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.lt-file:hover {
  border-color: var(--brand-blue);
  background: rgba(32, 81, 249, 0.04);
}
.lt-file input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.lt-file-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(32, 81, 249, 0.08);
  color: var(--brand-blue);
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.lt-file-ic svg { width: 18px; height: 18px; }
.lt-file-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lt-file-cta {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-primary);
}
.lt-file-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

/* Actions row */
.lt-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 4px;
}
.lt-fineprint {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0;
  max-width: 48ch;
}
.lt-fineprint a {
  color: var(--brand-blue);
  text-decoration: underline;
  text-decoration-color: rgba(32, 81, 249, 0.3);
  text-underline-offset: 2px;
}
.lt-fineprint a:hover { text-decoration-color: var(--brand-blue); }
.lt-submit { min-width: 180px; justify-content: center; }

/* Success state */
.lt-form-success {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.08), rgba(74, 222, 128, 0.02));
  border: 1px solid rgba(31, 138, 91, 0.25);
  border-radius: 14px;
}
.lt-success-ic {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: #1F8A5B;
  color: #FFFFFF;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(31, 138, 91, 0.35);
}
.lt-success-ic svg { width: 22px; height: 22px; }
.lt-form-success h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
  margin: 0 0 4px;
}
.lt-form-success p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-secondary);
  margin: 0;
}

/* Footer row inside form card */
.lt-form-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line-hairline);
}
.lt-foot-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 160ms var(--ease-out);
}
.lt-foot-item:hover { background: rgba(32, 81, 249, 0.05); }
.lt-foot-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(32, 81, 249, 0.08);
  color: var(--brand-blue);
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.lt-foot-ic svg { width: 18px; height: 18px; }
.lt-foot-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lt-foot-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.lt-foot-val {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-primary);
}

/* Responsive */
@media (max-width: 900px) {
  .lt-form-card { padding: 28px 22px; }
  .lt-form { grid-template-columns: 1fr; gap: 18px; }
  .lt-form-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .lt-form-title { font-size: 22px; }
  .lt-form-foot { grid-template-columns: 1fr; }
  .lt-actions { flex-direction: column; align-items: stretch; }
  .lt-submit { width: 100%; }
}


/* ============================================================
   CTA — Split layout (copy left, form right)
   ============================================================ */
.cta-section .container { text-align: left; }

.lt-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 72px;
  align-items: center;
}
.lt-split-copy { position: relative; padding-top: 8px; }

/* Re-align CTA header pieces to the left within the split */
.lt-split-copy .cta-eyebrow { margin: 0 0 18px; }
.lt-split-copy .cta-title { margin: 0 0 18px; max-width: 14ch; text-align: left; }
.lt-split-copy .cta-sub   { margin: 0 0 36px; max-width: 44ch; text-align: left; }

/* Trust points */
.lt-copy-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lt-copy-points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.lt-copy-ic {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(31, 138, 91, 0.12);
  color: #1F8A5B;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.lt-copy-ic svg { width: 14px; height: 14px; }
.lt-copy-points li > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lt-copy-points strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.lt-copy-points em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg-muted);
}

/* Form card spacing override inside split */
.lt-split .lt-form-wrap { margin-top: 0; display: block; }
.lt-split .lt-form-card { padding: 32px 32px 28px; }

/* ============================================================
   FOOTER — "Get in touch" rows with icons
   ============================================================ */
.footer-contact { min-width: 0; }
.footer-contact .footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
  padding: 4px 0;
}
.footer-contact .footer-contact-row + .footer-contact-row { margin-top: 2px; }
.footer-contact-ic {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--brand-cyan);
  display: inline-grid; place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition:
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out),
    border-color 200ms var(--ease-out);
}
.footer-contact-ic svg { width: 14px; height: 14px; }
.footer-contact .footer-contact-row:hover .footer-contact-ic {
  background: rgba(32, 81, 249, 0.18);
  border-color: rgba(104, 163, 247, 0.45);
  color: #FFFFFF;
}
.footer-contact .footer-contact-row--addr {
  align-items: flex-start;
}
.footer-contact .footer-contact-row--addr span:last-child {
  font-size: 13px;
  line-height: 1.55;
}
/* Override .footer-grid a default block + underline animation for these rows */
.footer-grid .footer-contact .footer-contact-row { display: flex; }
.footer-grid .footer-contact .footer-contact-row::after { display: none; }

/* Responsive */
@media (max-width: 1100px) {
  .lt-split { grid-template-columns: 1fr; gap: 40px; }
  .lt-split-copy .cta-title { max-width: 18ch; }
}


/* Mega menu items WITHOUT sub-text — vertically center icon with title */
.mega-item:not(:has(.mega-sub)) {
  align-items: center;
}

/* Form card — no longer has a header, soften the top padding accordingly */
.lt-split .lt-form-card { padding-top: 28px; }


/* Compact contact rows inside the brand column (replaces the
   dedicated "Get in touch" column). */
.footer-contact-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 22px;
}
.footer-contact-mini .footer-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #C9CDD6;
  text-decoration: none;
  padding: 0;
  transition: color 180ms ease;
}
.footer-contact-mini .footer-contact-row:hover { color: var(--brand-cyan); }
/* Suppress the inherited .footer-grid a underline */
.footer-grid .footer-contact-mini .footer-contact-row::after { display: none !important; }

/* ============================================================
   Interior page chrome
   ============================================================ */

/* Breadcrumbs */
.crumbs {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 32px;
}
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-blue); }
.crumbs [aria-current] { color: var(--fg-primary); }
.crumb-sep { color: var(--fg-faint); }

/* Page hero */
.page-hero {
  position: relative;
  padding: 56px 0 88px;
  overflow: hidden;
  isolation: isolate;
}
.page-hero-bg {
  position: absolute; inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 50% 80% at 80% 0%, rgba(32,81,249,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 20% 100%, rgba(104,163,247,0.14) 0%, transparent 60%),
    var(--bg-canvas);
}
.page-hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(32,81,249,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,81,249,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, black 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, black 20%, transparent 75%);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
.page-hero-grid.has-visual {
  grid-template-columns: 1.1fr 1fr;
}
.page-hero-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 72px; line-height: 1.02; letter-spacing: -0.04em;
  color: var(--fg-primary);
  margin: 0 0 24px;
  max-width: 16ch;
  text-wrap: balance;
}
.page-hero-title em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(110deg, var(--brand-blue-deep) 0%, var(--brand-blue) 40%, var(--brand-cyan) 70%, var(--brand-blue-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroShim 9s linear infinite;
}
.page-hero-sub {
  font-family: var(--font-body); font-size: 19px; line-height: 1.55;
  color: var(--fg-secondary);
  margin: 0; max-width: 56ch;
}
.page-hero-kicker {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.page-hero-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(32,81,249,0.18), transparent 70%),
    linear-gradient(180deg, #F4F6FB, #FFFFFF);
  border: 1px solid var(--line-hairline);
}

/* ============================================================
   Feature grid (used everywhere)
   ============================================================ */
.feature-grid { display: grid; gap: 14px; }
.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all 240ms var(--ease-out);
  position: relative; overflow: hidden;
  min-height: 200px;
  box-shadow: var(--shadow-inset-hi);
}
.feature-card:hover {
  border-color: rgba(32,81,249,0.30);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(32,81,249,0.10), var(--shadow-inset-hi);
}
.feature-ic {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(180deg, #F4F6FB, #E8EEFB);
  border: 1px solid rgba(32,81,249,0.18);
  color: var(--brand-blue);
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.feature-ic svg { width: 22px; height: 22px; }
.feature-num {
  position: absolute; top: 24px; right: 24px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--fg-faint);
}
.feature-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 21px; line-height: 1.18; letter-spacing: -0.015em;
  margin: 0; color: var(--fg-primary);
}
.feature-body {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--fg-muted); margin: 0;
}
.feature-tags {
  list-style: none; padding: 0; margin: auto 0 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.feature-tags li {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted);
  padding: 4px 9px; border: 1px solid var(--line-hairline);
  border-radius: 999px; letter-spacing: 0.02em;
}
.feature-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-blue);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  transition: gap 160ms var(--ease-out);
}
.feature-link:hover { gap: 12px; }
.feature-link svg { width: 12px; height: 12px; }

@media (max-width: 1100px) {
  .feature-grid.cols-3, .feature-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .page-hero-grid.has-visual { grid-template-columns: 1fr; }
  .page-hero-title { font-size: 52px; }
}
@media (max-width: 720px) {
  .feature-grid.cols-2, .feature-grid.cols-3, .feature-grid.cols-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   Page hero default visual (PageHeroVisual)
   ============================================================ */
.page-hero-visual {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background:
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(32,81,249,0.18), transparent 70%),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(0,181,212,0.12), transparent 70%),
    linear-gradient(180deg, #F4F6FB, #FFFFFF);
  border: 1px solid var(--line-hairline);
}
.phv { position: absolute; inset: 0; display: grid; place-items: center; }
.phv-rings {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.phv-ring {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(32,81,249,0.18);
}
.phv-ring.r1 { width: 70%; height: 70%; }
.phv-ring.r2 {
  width: 50%; height: 50%;
  border-color: rgba(32,81,249,0.25);
  border-style: dashed;
  animation: phvSpin 36s linear infinite;
}
.phv-ring.r3 {
  width: 88%; height: 88%;
  border-color: rgba(0,181,212,0.10);
  border-style: dashed;
  animation: phvSpin 60s linear infinite reverse;
}
@keyframes phvSpin { to { transform: rotate(360deg); } }

.phv-core {
  position: relative;
  width: 26%; aspect-ratio: 1;
  display: grid; place-items: center;
  z-index: 2;
  animation: phvCoreFloat 8s ease-in-out infinite;
}
@keyframes phvCoreFloat {
  0%, 100% { transform: translateY(-4px); }
  50%      { transform: translateY(4px); }
}
.phv-core img {
  width: 70%; height: 70%; object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(32,81,249,0.55)) drop-shadow(0 12px 30px rgba(32,81,249,0.30));
}
.phv-core-glow {
  position: absolute; inset: -20%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(32,81,249,0.40), transparent 60%);
  filter: blur(12px);
  z-index: -1;
  animation: phvGlow 3.2s ease-in-out infinite;
}
@keyframes phvGlow {
  0%, 100% { transform: scale(0.92); opacity: 0.55; }
  50%      { transform: scale(1.18); opacity: 1; }
}

.phv-chips { position: absolute; inset: 0; pointer-events: none; }
.phv-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 7px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 20px rgba(15,30,80,0.08);
  font-family: var(--font-display); font-weight: 500; font-size: 12.5px;
  color: var(--fg-primary);
  white-space: nowrap;
  animation: phvChipFloat 6s ease-in-out infinite;
  z-index: 3;
}
.phv-chip-ic {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3F6BFF, var(--brand-blue));
  color: #fff;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 8px rgba(32,81,249,0.30);
  flex-shrink: 0;
}
.phv-chip-ic svg { width: 12px; height: 12px; }
@keyframes phvChipFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(-3px); }
  50%      { transform: translate(-50%, -50%) translateY(3px); }
}
.phv-chip-1 { top: 18%; left: 18%; }
.phv-chip-2 { top: 50%; right: 12%; left: auto; transform: translate(0, -50%); animation: phvChipFloatR 6s ease-in-out -2s infinite; }
@keyframes phvChipFloatR {
  0%, 100% { transform: translate(0, -50%) translateY(-3px); }
  50%      { transform: translate(0, -50%) translateY(3px); }
}
.phv-chip-3 { bottom: 14%; left: 30%; top: auto; transform: translateX(-50%); }
.phv-chip-3 { animation: phvChipFloatB 6s ease-in-out -4s infinite; }
@keyframes phvChipFloatB {
  0%, 100% { transform: translateX(-50%) translateY(-3px); }
  50%      { transform: translateX(-50%) translateY(3px); }
}

.phv-syslabel {
  position: absolute;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 8px;
  z-index: 3;
}
.phv-syslabel.phv-tl { top: 18px; left: 18px; }
.phv-syslabel.phv-br { bottom: 18px; right: 18px; }
.phv-tick {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--brand-cyan);
  box-shadow: 0 0 10px var(--brand-cyan);
  animation: pulse 2.4s ease-in-out infinite;
}

/* ============================================================
   PageProcess — horizontal step flow
   ============================================================ */
.ppr-strip {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  position: relative;
}
.ppr-strip::before {
  /* connecting hairline */
  content: "";
  position: absolute;
  left: 36px; right: 36px; top: 38px;
  height: 1px;
  background: linear-gradient(90deg, rgba(32,81,249,0.30), rgba(0,181,212,0.30));
  z-index: 0;
}
.ppr {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: all 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 1;
}
.ppr:hover {
  border-color: rgba(32,81,249,0.30);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(32,81,249,0.10);
}
.ppr-head { display: flex; justify-content: space-between; align-items: center; }
.ppr-num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--fg-faint);
}
.ppr-ic {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: linear-gradient(180deg, #3F6BFF, var(--brand-blue));
  color: #fff;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(32,81,249,0.30);
}
.ppr-ic svg { width: 18px; height: 18px; }
.ppr-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 18px; line-height: 1.22; letter-spacing: -0.015em;
  margin: 0; color: var(--fg-primary);
}
.ppr-body {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.5;
  color: var(--fg-muted); margin: 0;
}

/* ============================================================
   PageCases — 3-card mini grid
   ============================================================ */
.ppc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ppc-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg-primary);
  display: flex; flex-direction: column;
  transition: all 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: var(--shadow-inset-hi);
}
.ppc-card:hover {
  transform: translateY(-2px);
  border-color: rgba(32,81,249,0.30);
  box-shadow: 0 12px 32px rgba(32,81,249,0.10), var(--shadow-inset-hi);
}
.ppc-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.ppc-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ppc-card:hover .ppc-thumb img { transform: scale(1.04); }
.ppc-tag {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--brand-blue);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.5);
}
.ppc-body {
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.ppc-meta {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}
.ppc-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 19px; line-height: 1.22; letter-spacing: -0.015em;
  margin: 0; color: var(--fg-primary);
  text-wrap: balance;
}
.ppc-read {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--brand-blue);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
}
.ppc-read .arr {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--accent-bg);
  display: grid; place-items: center;
}
.ppc-read svg { width: 12px; height: 12px; }

/* ============================================================
   PageQuote — single pull-quote
   ============================================================ */
.ppq-card {
  position: relative;
  max-width: 920px; margin: 0 auto;
  padding: 56px;
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(32,81,249,0.10), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(0,181,212,0.10), transparent 60%),
    var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 28px;
  box-shadow: var(--shadow-inset-hi);
  text-align: left;
}
.ppq-mark {
  display: block;
  color: var(--brand-blue);
  margin-bottom: 14px;
  opacity: 0.7;
}
.ppq-mark svg { width: 44px; height: 44px; }
.ppq-quote {
  font-family: var(--font-display); font-weight: 500;
  font-size: 32px; line-height: 1.25; letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: 0 0 36px;
  max-width: 28ch;
  text-wrap: balance;
}
.ppq-attr {
  display: flex; align-items: center; gap: 14px;
  padding-top: 24px;
  border-top: 1px dashed var(--line-hairline);
}
.ppq-avatar {
  width: 46px; height: 46px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4A78FF, var(--brand-blue));
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 14px rgba(32,81,249,0.30);
}
.ppq-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 15px; letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.ppq-role {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* ============================================================
   PageLogos — trust strip
   ============================================================ */
.ppl-row {
  display: flex; align-items: center; gap: 40px;
  padding: 18px 0;
  border-top: 1px solid var(--line-hairline);
  border-bottom: 1px solid var(--line-hairline);
}
.ppl-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.ppl-ln { width: 24px; height: 1px; background: var(--line-soft); }
.ppl-logos-marquee {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ppl-logos-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: pplScroll 18s linear infinite;
  will-change: transform;
}
.ppl-logos-marquee:hover .ppl-logos-track { animation-play-state: paused; }
@keyframes pplScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.ppl-logo {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ppl-logo img {
  max-height: 56px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 220ms ease, opacity 220ms ease, transform 220ms ease;
}
.ppl-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .ppc-grid { grid-template-columns: 1fr 1fr; }
  .ppr-strip::before { display: none; }
  .ppq-card { padding: 36px; }
  .ppq-quote { font-size: 26px; }
  .ppl-logos { gap: 24px; }
}
@media (max-width: 720px) {
  .ppc-grid { grid-template-columns: 1fr; }
  .ppl-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}

.work-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: minmax(280px, auto);
  gap: 16px;
}
.work-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--fg-primary);
  transition: all 240ms var(--ease-out);
  box-shadow: var(--shadow-inset-hi);
}
.work-card.featured { grid-column: span 1; grid-row: span 2; }
.work-card:hover {
  transform: translateY(-2px);
  border-color: rgba(32,81,249,0.30);
  box-shadow: 0 12px 32px rgba(32,81,249,0.10), var(--shadow-inset-hi);
}
.work-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.work-card.featured .work-thumb { aspect-ratio: 4 / 3; }
.work-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.work-card:hover .work-thumb img { transform: scale(1.04); }
.work-badge {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--brand-blue);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.5);
}
.work-body {
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  flex: 1;
}
.work-meta {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}
.work-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 21px; line-height: 1.22; letter-spacing: -0.015em;
  margin: 0; color: var(--fg-primary);
  text-wrap: balance;
}
.work-card.featured .work-title { font-size: 28px; }
.work-read {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--brand-blue);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
}
.work-read .arr {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--accent-bg);
  display: grid; place-items: center;
}
.work-read svg { width: 12px; height: 12px; }

/* ============================================================
   Blog grid
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.blog-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: all 240ms var(--ease-out);
  cursor: pointer;
  box-shadow: var(--shadow-inset-hi);
}
.blog-card.featured { grid-column: span 3; flex-direction: row; min-height: 360px; }
.blog-card.featured .blog-thumb { width: 55%; aspect-ratio: auto; }
.blog-card.featured .blog-body { padding: 40px; justify-content: center; }
.blog-card.featured .blog-title { font-size: 32px; }
.blog-card:hover {
  transform: translateY(-2px);
  border-color: rgba(32,81,249,0.30);
  box-shadow: 0 12px 32px rgba(32,81,249,0.10), var(--shadow-inset-hi);
}
.blog-thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
}
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-tag {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--brand-blue);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.5);
}
.blog-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-meta {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-muted); font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.blog-meta .sl { width: 3px; height: 3px; background: currentColor; border-radius: 999px; }
.blog-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 20px; line-height: 1.22; letter-spacing: -0.01em;
  margin: 0; color: var(--fg-primary); text-wrap: balance;
}
.blog-read {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-blue); font-family: var(--font-body);
  font-size: 13.5px; font-weight: 500;
}
.blog-read svg { width: 12px; height: 12px; }

/* ============================================================
   Jobs list (Career)
   ============================================================ */
.jobs {
  display: flex; flex-direction: column; gap: 10px;
}
.job {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  text-decoration: none; color: var(--fg-primary);
  transition: all 240ms var(--ease-out);
  box-shadow: var(--shadow-inset-hi);
}
.job:hover {
  border-color: rgba(32,81,249,0.30);
  transform: translateX(2px);
  box-shadow: 0 8px 24px rgba(32,81,249,0.08), var(--shadow-inset-hi);
}
.job-main h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 19px; letter-spacing: -0.01em; margin: 0 0 6px;
}
.job-meta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}
.job-meta .sl { width: 3px; height: 3px; background: currentColor; border-radius: 999px; }
.job-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 18px; border-radius: 999px;
  background: var(--accent-bg);
  color: var(--brand-blue);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--accent-line);
}
.job:hover .job-cta {
  background: var(--brand-blue); color: white; border-color: var(--brand-blue);
}
.job-cta svg { width: 12px; height: 12px; }

/* ============================================================
   Contact form
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
.contact-form {
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  padding: 36px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: var(--shadow-inset-hi);
}
.contact-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form .field { display: flex; flex-direction: column; gap: 8px; }
.contact-form label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}
.contact-form input, .contact-form textarea {
  background: var(--bg-canvas);
  border: 1px solid var(--line-hairline);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body); font-size: 14.5px;
  color: var(--fg-primary);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(32,81,249,0.18);
}
.contact-form .chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.contact-form .chip {
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--bg-canvas);
  border: 1px solid var(--line-hairline);
  color: var(--fg-secondary); cursor: pointer;
  transition: all 160ms var(--ease-out);
}
.contact-form .chip:hover, .contact-form .chip:focus {
  border-color: var(--brand-blue); color: var(--brand-blue);
  background: var(--accent-bg);
}
.contact-form .btn { align-self: flex-start; }
.contact-form .note {
  font-size: 12.5px; color: var(--fg-muted); margin: 0;
  font-family: var(--font-body);
}

.contact-side {
  display: flex; flex-direction: column; gap: 16px;
}
.contact-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.contact-card h4 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 18px; letter-spacing: -0.01em;
  margin: 0 0 6px; color: var(--fg-primary);
}
.contact-card.accent {
  background:
    radial-gradient(ellipse 80% 100% at 100% 0%, rgba(32,81,249,0.10), transparent 60%),
    var(--bg-surface);
  border-color: rgba(32,81,249,0.28);
}
.contact-card .contact-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-blue);
}
.contact-card p {
  font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  color: var(--fg-muted); margin: 0 0 6px;
}
.contact-row {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg-secondary); text-decoration: none;
  font-family: var(--font-body); font-size: 14px;
}
.contact-row svg { width: 16px; height: 16px; color: var(--brand-blue); }
.contact-row:hover { color: var(--brand-blue); }
.contact-row.simple { color: var(--fg-secondary); font-size: 14px; }

/* ============================================================
   Case study detail
   ============================================================ */
.case-hero {
  position: relative;
  padding: 0 0 56px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(32,81,249,0.16), transparent 60%),
    var(--bg-canvas);
}
.case-hero-meta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted);
  margin-bottom: 24px;
}
.case-hero-meta .sl { width: 3px; height: 3px; background: currentColor; border-radius: 999px; }
.case-hero-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 72px; line-height: 1.02; letter-spacing: -0.04em;
  color: var(--fg-primary);
  margin: 0 0 48px; max-width: 18ch;
  text-wrap: balance;
}
.case-hero-title em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(110deg, var(--brand-blue-deep) 0%, var(--brand-blue) 40%, var(--brand-cyan) 70%, var(--brand-blue-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroShim 9s linear infinite;
}
.case-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-hairline);
  border-bottom: 1px solid var(--line-hairline);
  margin: 0 0 56px;
}
.case-hero-stats > div {
  padding: 28px 24px;
  border-right: 1px solid var(--line-hairline);
}
.case-hero-stats > div:last-child { border-right: 0; }
.case-hero-stats .big {
  font-family: var(--font-display); font-weight: 500;
  font-size: 48px; line-height: 1; letter-spacing: -0.035em;
  background: linear-gradient(180deg, var(--fg-primary), var(--brand-blue-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.case-hero-stats .lbl {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted);
  margin-top: 12px;
}
.case-hero-cover {
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line-hairline);
  aspect-ratio: 16 / 8;
}
.case-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.case-body-grid {
  display: grid; grid-template-columns: 280px 1fr; gap: 64px;
  align-items: start;
}
.case-sticky {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
}
.case-sticky-block { display: flex; flex-direction: column; gap: 4px; }
.case-sticky-block .lbl {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted);
}
.case-sticky-block .val {
  font-family: var(--font-display); font-weight: 500;
  font-size: 15px; color: var(--fg-primary);
}
.case-prose h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 32px; letter-spacing: -0.02em;
  margin: 40px 0 16px; color: var(--fg-primary);
}
.case-prose h2:first-child { margin-top: 0; }
.case-prose p, .case-prose li {
  font-family: var(--font-body); font-size: 17px;
  line-height: 1.65; color: var(--fg-secondary);
  margin: 0 0 16px;
}
.case-prose ul { padding-left: 24px; margin: 0 0 24px; }
.case-prose li::marker { color: var(--brand-blue); }

/* ============================================================
   6D Methodology grid
   ============================================================ */
.d6-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.d6 {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 18px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-inset-hi);
  transition:
    transform 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}
.d6::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(32, 81, 249, 0.14), transparent 60%);
  pointer-events: none;
  z-index: -1;
  opacity: 0.9;
}
.d6::after {
  content: "";
  position: absolute;
  top: 22px; bottom: 22px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand-cyan), var(--brand-blue));
  opacity: 0.55;
  transition: opacity 220ms var(--ease-out), width 220ms var(--ease-out);
}
.d6:hover {
  transform: translateY(-3px);
  border-color: rgba(32, 81, 249, 0.28);
  box-shadow:
    0 14px 30px rgba(32, 81, 249, 0.10),
    var(--shadow-inset-hi);
}
.d6:hover::after { opacity: 1; width: 5px; }
.d6-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.d6-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--fg-faint);
  padding: 5px 9px;
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
}
.d6-letter {
  font-family: var(--font-display); font-weight: 500;
  font-size: 64px; line-height: 0.9; letter-spacing: -0.045em;
  background: linear-gradient(135deg, var(--brand-blue-deep) 0%, var(--brand-blue) 45%, var(--brand-cyan) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.d6 h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 24px; line-height: 1.18; letter-spacing: -0.018em; margin: 0;
  color: var(--fg-primary);
}
.d6 p {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--fg-muted); margin: 0;
}

/* ============================================================
   FeatureGrid — 6-column variant (used by Ceremonies)
   ============================================================ */
.feature-grid.cols-6 {
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.feature-grid.cols-6 .feature-card {
  padding: 22px 18px;
  gap: 12px;
}
.feature-grid.cols-6 .feature-ic {
  width: 40px; height: 40px;
  border-radius: 10px;
}
.feature-grid.cols-6 .feature-ic svg { width: 18px; height: 18px; }
.feature-grid.cols-6 .feature-title {
  font-size: 16px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.feature-grid.cols-6 .feature-body {
  font-size: 13px;
  line-height: 1.45;
}
.feature-grid.cols-6 .feature-num {
  top: 14px;
  right: 14px;
  font-size: 10.5px;
}
@media (max-width: 1200px) {
  .feature-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .feature-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Footer — merged Solutions + Company column stack
   ============================================================ */
.footer-stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

@media (max-width: 1100px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-card.featured { grid-column: span 2; grid-row: auto; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-card.featured { grid-column: span 2; flex-direction: column; }
  .blog-card.featured .blog-thumb { width: 100%; aspect-ratio: 16/9; }
  .contact-grid { grid-template-columns: 1fr; }
  .case-body-grid { grid-template-columns: 1fr; }
  .case-sticky { position: static; }
  .d6-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card.featured { grid-column: auto; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card.featured { grid-column: auto; }
  .case-hero-title { font-size: 42px; }
  .case-hero-stats { grid-template-columns: 1fr; }
  .case-hero-stats > div { border-right: 0; border-bottom: 1px solid var(--line-hairline); }
  .d6-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Mega menu — compact variant (used by About: only 2 items)
   ============================================================ */
.mega-menu--compact .mega-panel {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: 1.1fr 1fr;
}
.mega-menu--compact .mega-cols {
  grid-template-columns: 1fr;
}
.mega-menu--compact .mega-feature {
  min-height: 0;
}

/* Mega menu — narrow variant (used by Industries: 2 columns) */
.mega-menu--narrow .mega-panel {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: 1fr 280px;
}
.mega-menu--narrow .mega-feature {
  min-height: 0;
}

/* ============================================================
   About page — additions merged from diginnovators.com/about/
   ============================================================ */

/* Trust / recognition badges row */
.about-badges {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line-hairline);
}
.about-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 22px 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 16px;
  box-shadow: var(--shadow-inset-hi);
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.about-badge:hover {
  transform: translateY(-3px);
  border-color: rgba(32, 81, 249, 0.30);
  box-shadow: 0 16px 30px -16px rgba(32, 81, 249, 0.18), var(--shadow-inset-hi);
}
.about-badge-img {
  width: 100%;
  height: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.about-badge-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.about-badge-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  width: 100%;
}
.about-badge-lbl {
  font-family: var(--font-display); font-weight: 500;
  font-size: 13px; line-height: 1.25; letter-spacing: -0.005em;
  color: var(--fg-primary);
  text-wrap: balance;
}
.about-badge-sub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg-muted);
}

@media (max-width: 1100px) {
  .about-badges { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .about-badges { grid-template-columns: repeat(2, 1fr); }
  .about-badge-img { height: 76px; }
}

/* Core values cards */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.value-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-inset-hi);
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.value-card::before {
  content: "";
  position: absolute; inset: -1px;
  background: radial-gradient(ellipse 100% 60% at 100% 0%, rgba(32,81,249,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.value-card > * { position: relative; z-index: 1; }
.value-card:hover {
  transform: translateY(-3px);
  border-color: rgba(32, 81, 249, 0.30);
  box-shadow: 0 16px 32px rgba(32, 81, 249, 0.10), var(--shadow-inset-hi);
}
.value-num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--fg-faint);
  align-self: flex-start;
}
.value-ic {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(180deg, #3F6BFF, var(--brand-blue));
  color: #fff;
  display: inline-grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 16px rgba(32,81,249,0.25);
}
.value-ic svg { width: 22px; height: 22px; }
.value-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 24px; line-height: 1.18; letter-spacing: -0.015em;
  color: var(--fg-primary); margin: 0;
}
.value-body {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--fg-muted); margin: 0;
}

/* Team grid — Untitled UI "Meet our beautiful team" pattern:
   tall photo with a floating white name card overlapping the bottom. */
.team-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.team-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 14px;
  box-shadow: var(--shadow-inset-hi);
  padding: 12px 14px;
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.team-card:hover { transform: translateY(-2px); border-color: rgba(32, 81, 249, 0.28); }
.team-card:hover .team-photo img { transform: scale(1.05); }

.team-photo {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  aspect-ratio: auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 30, 80, 0.10);
  isolation: isolate;
}
.team-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  background: inherit;
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 1;
}
.team-photo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0,0,0,0.18);
  z-index: 0;
}

/* Name + role beside the small avatar */
.team-label {
  position: relative;
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}
.team-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
  margin: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.team-role {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
  margin: 0;
  font-weight: 400;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Subtle ring on lead cards */
.team-card--lead .team-photo {
  box-shadow:
    0 0 0 2px rgba(32, 81, 249, 0.18),
    0 1px 2px rgba(15, 30, 80, 0.06);
}

/* Responsive */
@media (max-width: 1200px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .team-name { font-size: 14px; }
  .team-role { font-size: 12px; }
}
@media (max-width: 380px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* Hiring banner */
.about-hire-wrap { padding-top: 24px; padding-bottom: 24px; }
.about-hire {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 36px 40px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 80% at 0% 50%, rgba(32, 81, 249, 0.18), transparent 60%),
    radial-gradient(ellipse 80% 100% at 100% 50%, rgba(104, 163, 247, 0.18), transparent 60%),
    var(--bg-surface);
  border: 1px solid var(--line-hairline);
  box-shadow: var(--shadow-inset-hi);
}
.about-hire::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(32, 81, 249, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 81, 249, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, #000, transparent 70%);
  pointer-events: none;
}
.about-hire-copy { position: relative; }
.about-hire-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 40px; line-height: 1.05; letter-spacing: -0.025em;
  color: var(--fg-primary);
  margin: 6px 0 8px;
  text-wrap: balance;
}
.about-hire-title em {
  font-style: italic;
  background: linear-gradient(110deg, var(--brand-blue-deep) 0%, var(--brand-blue) 40%, var(--brand-cyan) 70%, var(--brand-blue-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: heroShim 9s linear infinite;
}
.about-hire-sub {
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  color: var(--fg-secondary); margin: 0; max-width: 56ch;
}

/* Responsive */
@media (max-width: 1100px) {
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .about-hire { flex-direction: column; align-items: flex-start; padding: 28px; }
  .about-hire-title { font-size: 32px; }
}
@media (max-width: 720px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .about-badge { padding: 10px 14px 10px 10px; }
  .about-badges { margin-top: 32px; }
}
@media (max-width: 460px) {
  .team-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   6D Journey timeline — alternating zigzag with central rail
   Replaces the old .d6 grid layout.
   ============================================================ */

/* Phase legend chips */
.d6j-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 32px;
}
.d6j-phase {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
  box-shadow: var(--shadow-inset-hi);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.d6j-phase-ic {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.d6j-phase-ic svg { width: 11px; height: 11px; }
.d6j-phase--cyan .d6j-phase-ic { background: linear-gradient(180deg, #7FB6F8, var(--brand-cyan)); }
.d6j-phase--blue .d6j-phase-ic { background: linear-gradient(180deg, #3F6BFF, var(--brand-blue)); }
.d6j-phase--deep .d6j-phase-ic { background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-deep)); }
.d6j-phase-text { display: flex; flex-direction: column; gap: 0; line-height: 1.1; }
.d6j-phase-range {
  font-size: 9px; letter-spacing: 0.16em; color: var(--fg-faint);
}
.d6j-phase-name {
  font-size: 10.5px; letter-spacing: 0.16em; color: var(--fg-primary);
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
}

/* Timeline */
.d6j-timeline {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Central rail */
.d6j-timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg,
    var(--brand-cyan) 0%,
    var(--brand-blue) 50%,
    var(--brand-blue-deep) 100%);
  opacity: 0.30;
  border-radius: 2px;
}

.d6j-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: start;
  padding: 10px 0;
}

.d6j-rail {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  z-index: 2;
}
.d6j-node {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 2px solid currentColor;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--brand-blue);
  box-shadow:
    0 0 0 3px var(--bg-canvas),
    0 4px 10px rgba(32, 81, 249, 0.18);
}
.d6j-step--cyan .d6j-node { color: var(--brand-cyan); }
.d6j-step--blue .d6j-node { color: var(--brand-blue); }
.d6j-step--deep .d6j-node { color: var(--brand-blue-deep); }
.d6j-node-num { position: relative; z-index: 1; }
.d6j-node-pulse {
  position: absolute; inset: -2px;
  border-radius: 999px;
  border: 2px solid currentColor;
  opacity: 0;
  animation: d6jPulse 2.8s ease-out infinite;
}
.d6j-step:nth-child(2) .d6j-node-pulse { animation-delay: 0.4s; }
.d6j-step:nth-child(3) .d6j-node-pulse { animation-delay: 0.8s; }
.d6j-step:nth-child(4) .d6j-node-pulse { animation-delay: 1.2s; }
.d6j-step:nth-child(5) .d6j-node-pulse { animation-delay: 1.6s; }
.d6j-step:nth-child(6) .d6j-node-pulse { animation-delay: 2.0s; }
@keyframes d6jPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Step card */
.d6j-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow:
    0 1px 2px rgba(15, 30, 80, 0.04),
    var(--shadow-inset-hi);
  overflow: hidden;
  isolation: isolate;
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.d6j-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(32, 81, 249, 0.08), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.d6j-step:hover .d6j-card {
  transform: translateY(-2px);
  border-color: rgba(32, 81, 249, 0.28);
  box-shadow:
    0 1px 2px rgba(15, 30, 80, 0.05),
    0 14px 28px -18px rgba(32, 81, 249, 0.22),
    var(--shadow-inset-hi);
}

/* Layout: card on left or right of the rail */
.d6j-step--left  .d6j-card { grid-column: 1; margin-right: 20px; }
.d6j-step--left  .d6j-rail { grid-column: 2; }
.d6j-step--right .d6j-rail { grid-column: 2; }
.d6j-step--right .d6j-card { grid-column: 3; margin-left: 20px; }

/* Connector arm from card to the rail */
.d6j-step--left  .d6j-card::after,
.d6j-step--right .d6j-card::after {
  content: "";
  position: absolute;
  top: 26px;
  width: 22px;
  height: 2px;
  background: currentColor;
  opacity: 0.18;
}
.d6j-step--left  .d6j-card::after { right: -22px; }
.d6j-step--right .d6j-card::after { left: -22px; }
.d6j-step--cyan { color: var(--brand-cyan); }
.d6j-step--blue { color: var(--brand-blue); }
.d6j-step--deep { color: var(--brand-blue-deep); }

/* Card header */
.d6j-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.d6j-card-phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.d6j-card-phase-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  color: currentColor;
  box-shadow: 0 0 6px currentColor;
  opacity: 0.85;
}
.d6j-step--cyan .d6j-card-phase-dot { color: var(--brand-cyan); }
.d6j-step--blue .d6j-card-phase-dot { color: var(--brand-blue); }
.d6j-step--deep .d6j-card-phase-dot { color: var(--brand-blue-deep); }
.d6j-card-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 0.85;
  letter-spacing: -0.035em;
  background: linear-gradient(135deg, var(--brand-blue-deep), var(--brand-blue) 50%, var(--brand-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.d6j-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.d6j-card-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(32, 81, 249, 0.10), rgba(32, 81, 249, 0.03));
  border: 1px solid rgba(32, 81, 249, 0.18);
  color: var(--brand-blue);
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.d6j-card-ic svg { width: 14px; height: 14px; }
.d6j-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--fg-primary);
  margin: 0;
}
.d6j-card-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0 0 12px;
}

/* Deliverables list */
.d6j-card-deliv {
  background: var(--bg-canvas);
  border: 1px solid var(--line-hairline);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.d6j-card-deliv-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 6px;
}
.d6j-card-deliv-tick {
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--brand-blue);
  color: #fff;
  display: inline-grid; place-items: center;
}
.d6j-card-deliv-tick svg { width: 9px; height: 9px; }
.d6j-card-deliv ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.d6j-card-deliv li {
  position: relative;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-primary);
  padding-left: 12px;
}
.d6j-card-deliv li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--brand-cyan);
  opacity: 0.85;
}

/* Footer meta */
.d6j-card-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-hairline);
}
.d6j-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.d6j-card-meta-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.d6j-card-meta-val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
}

/* Responsive — collapse to single column on tablet down */
@media (max-width: 980px) {
  .d6j-timeline::before { left: 18px; }
  .d6j-step {
    grid-template-columns: 36px 1fr;
    gap: 0;
    padding: 8px 0;
  }
  .d6j-step--left  .d6j-rail,
  .d6j-step--right .d6j-rail { grid-column: 1; justify-self: start; }
  .d6j-step--left  .d6j-card,
  .d6j-step--right .d6j-card {
    grid-column: 2;
    margin-left: 12px;
    margin-right: 0;
  }
  .d6j-step--left  .d6j-card::after,
  .d6j-step--right .d6j-card::after {
    left: -12px;
    right: auto;
    width: 12px;
  }
}
@media (max-width: 540px) {
  .d6j-card { padding: 14px 14px; }
  .d6j-card-title { font-size: 17px; }
  .d6j-card-letter { font-size: 22px; }
  .d6j-card-foot { grid-template-columns: 1fr; gap: 8px; }
}


/* ============================================================
   Technology Consultancy — editorial layout
   ============================================================ */

/* Intro: copy + stats split */
.tc-intro { padding-top: 32px; padding-bottom: 32px; }
.tc-intro-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
}
.tc-intro-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
  margin: 14px 0 18px;
  max-width: 22ch;
  text-wrap: balance;
}
.tc-intro-title em {
  font-style: italic;
  background: linear-gradient(110deg, var(--brand-blue-deep) 0%, var(--brand-blue) 40%, var(--brand-cyan) 70%, var(--brand-blue-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heroShim 9s linear infinite;
}
.tc-intro-body {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0 0 14px;
  max-width: 60ch;
}
.tc-intro-body:last-child { margin-bottom: 0; }

.tc-intro-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 24px;
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, rgba(32, 81, 249, 0.08), transparent 60%),
    var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-inset-hi);
}
.tc-intro-stat {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-canvas);
  border: 1px solid var(--line-hairline);
  border-radius: 12px;
}
.tc-intro-stat-big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}
.tc-intro-stat-big .acc { color: var(--brand-blue); }
.tc-intro-stat-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Consultancy areas */
.tc-areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tc-area {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 18px;
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-inset-hi);
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.tc-area::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(32, 81, 249, 0.10), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.tc-area:hover {
  transform: translateY(-3px);
  border-color: rgba(32, 81, 249, 0.30);
  box-shadow: 0 16px 30px -16px rgba(32, 81, 249, 0.20), var(--shadow-inset-hi);
}
.tc-area-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.tc-area-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
}
.tc-area-ic {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, #3F6BFF, var(--brand-blue));
  color: #fff;
  display: inline-grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 16px rgba(32,81,249,0.25);
}
.tc-area-ic svg { width: 20px; height: 20px; }
.tc-area-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
  margin: 0;
}
.tc-area-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
}

/* Testimonial wall */
.tc-test-section {
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(32, 81, 249, 0.05), transparent 50%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(104, 163, 247, 0.04), transparent 50%);
}
.tc-test-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.tc-test {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 20px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 2px rgba(15, 30, 80, 0.05),
    0 14px 30px -16px rgba(15, 30, 80, 0.18),
    var(--shadow-inset-hi);
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.tc-test::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(ellipse 60% 60% at 100% 0%, rgba(32, 81, 249, 0.08), transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.tc-test:hover {
  transform: translateY(-3px);
  border-color: rgba(32, 81, 249, 0.28);
}
.tc-test--featured {
  grid-column: 1 / -1;
  background:
    linear-gradient(180deg, rgba(32, 81, 249, 0.04), transparent 60%),
    var(--bg-surface);
  border-color: rgba(32, 81, 249, 0.20);
}
.tc-test--featured .tc-test-quote {
  font-size: 22px;
  line-height: 1.35;
  max-width: 64ch;
}

.tc-test-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tc-test-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(32, 81, 249, 0.10), rgba(32, 81, 249, 0.04));
  border: 1px solid rgba(32, 81, 249, 0.18);
  color: var(--brand-blue);
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.tc-test-mark svg { width: 18px; height: 18px; }
.tc-test-rating {
  display: inline-flex;
  gap: 2px;
  color: #F5B400;
}
.tc-test-star svg { width: 14px; height: 14px; display: block; }
.tc-test-industry {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 4px 10px;
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
}

.tc-test-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  margin: 0;
  text-wrap: pretty;
}

.tc-test-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-hairline);
}
.tc-test-author {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.tc-test-avatar {
  width: 44px; height: 44px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 14px rgba(15, 30, 80, 0.18);
}
.tc-test-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tc-test-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
}
.tc-test-role {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--fg-muted);
}
.tc-test-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--brand-blue);
  text-decoration: none;
  white-space: nowrap;
  transition: gap 180ms var(--ease-out);
}
.tc-test-link:hover { gap: 12px; }
.tc-test-link svg { width: 11px; height: 11px; }

/* Responsive */
@media (max-width: 1100px) {
  .tc-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .tc-intro-title { font-size: 32px; }
  .tc-areas { grid-template-columns: 1fr 1fr; }
  .tc-test-grid { grid-template-columns: 1fr; }
  .tc-test--featured { grid-column: auto; }
  .tc-test--featured .tc-test-quote { font-size: 19px; }
}
@media (max-width: 640px) {
  .tc-areas { grid-template-columns: 1fr; }
  .tc-intro-stats { grid-template-columns: 1fr 1fr; padding: 16px; }
  .tc-test { padding: 22px 20px 20px; }
  .tc-test-foot { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   Blog post detail (BlogPost.jsx)
   ============================================================ */
.bp-hero {
  padding-top: 64px;
}
.bp-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.bp-meta .sl {
  width: 12px;
  height: 1px;
  background: var(--line-soft);
}
.bp-tag {
  background: linear-gradient(180deg, rgba(32, 81, 249, 0.10), rgba(32, 81, 249, 0.04));
  border: 1px solid rgba(32, 81, 249, 0.20);
  color: var(--brand-blue);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bp-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
  margin: 0 0 22px;
  max-width: 28ch;
  text-wrap: balance;
}
.bp-excerpt {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: 0 0 36px;
  max-width: 64ch;
  text-wrap: pretty;
}
.bp-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line-hairline);
}
.bp-author-avatar {
  width: 48px; height: 48px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 14px rgba(15, 30, 80, 0.18);
}
.bp-author > div { display: flex; flex-direction: column; gap: 2px; }
.bp-author-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
}
.bp-author-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.bp-hero-img-wrap { margin-top: 36px; }
.bp-hero-img {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-canvas);
  box-shadow: 0 24px 60px -24px rgba(15, 30, 80, 0.30), var(--shadow-inset-hi);
}
.bp-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.bp-body-section { padding-top: 64px; }
.bp-body-grid {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.bp-share {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.bp-share-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 6px;
}
.bp-share-btn {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  color: var(--fg-secondary);
  transition: color 200ms ease, border-color 200ms ease, transform 200ms ease, background 200ms ease;
  text-decoration: none;
}
.bp-share-btn svg { width: 16px; height: 16px; }
.bp-share-btn:hover {
  color: #fff;
  background: linear-gradient(180deg, #3F6BFF, var(--brand-blue));
  border-color: var(--brand-blue);
  transform: translateY(-1px);
}

.bp-prose {
  max-width: 70ch;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-secondary);
}
.bp-prose p { margin: 0 0 20px; text-wrap: pretty; }
.bp-prose h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: 36px 0 14px;
  text-wrap: balance;
}
.bp-prose h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
  margin: 28px 0 10px;
}
.bp-prose ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-prose ul li {
  position: relative;
  padding-left: 22px;
  color: var(--fg-primary);
}
.bp-prose ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 12px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--brand-cyan);
}
.bp-prose a {
  color: var(--brand-blue);
  text-decoration: none;
}
.bp-prose a:hover {
  text-decoration: none;
}

/* CTA at the end of the article */
.bp-cta {
  margin-top: 56px;
  padding: 32px 36px;
  background:
    radial-gradient(ellipse 80% 80% at 0% 0%, rgba(32, 81, 249, 0.10), transparent 60%),
    radial-gradient(ellipse 80% 100% at 100% 100%, rgba(104, 163, 247, 0.10), transparent 60%),
    var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.bp-cta-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: 8px 0 6px;
  text-wrap: balance;
}
.bp-cta-sub {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0;
  max-width: 52ch;
}

/* Related posts at the bottom */
.bp-related-section { padding-top: 32px; }
.bp-related-head { margin-bottom: 28px; }
.bp-related-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
  margin: 8px 0 0;
}

/* Featured-card excerpt (Blog index) */
.blog-excerpt {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 4px 0 12px;
  max-width: 56ch;
}

/* Responsive */
@media (max-width: 1000px) {
  .bp-title { font-size: 40px; }
  .bp-body-grid { grid-template-columns: 1fr; gap: 24px; }
  .bp-share {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
  }
  .bp-share-lbl { writing-mode: horizontal-tb; transform: none; margin: 0 6px 0 0; }
  .bp-cta { padding: 24px; }
}
@media (max-width: 600px) {
  .bp-title { font-size: 32px; }
  .bp-excerpt { font-size: 16px; }
  .bp-prose { font-size: 16px; }
  .bp-prose h2 { font-size: 24px; }
  .bp-related-title { font-size: 26px; }
}


/* ============================================================
   Editorial post layout (ed-*)
   Shared by BlogPost.jsx and CaseDetail.jsx
   Pattern: centered narrow column, traditional editorial.
   ============================================================ */
.ed-post { padding-top: 48px; }
.ed-narrow { max-width: 820px; }

.ed-head-top {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.ed-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg-secondary);
  text-decoration: none;
  margin-bottom: 0;
  transition: color 180ms ease, gap 180ms ease;
}
.ed-back:hover { color: var(--brand-blue); gap: 9px; }
.ed-back svg { width: 12px; height: 12px; }

.ed-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--brand-blue);
  background: linear-gradient(180deg, rgba(32, 81, 249, 0.10), rgba(32, 81, 249, 0.04));
  border: 1px solid rgba(32, 81, 249, 0.20);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 0;
}

.ed-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 60px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
  margin: 0 0 28px;
  max-width: none;
  text-wrap: balance;
}

.ed-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-hairline);
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--fg-muted);
}
.ed-meta-sep {
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--fg-faint);
}
.ed-meta-author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-primary);
  font-weight: 500;
}
.ed-meta-avatar {
  width: 32px; height: 32px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(15, 30, 80, 0.18);
}
.ed-meta-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ed-meta-read svg { width: 14px; height: 14px; }

/* Hero image — large, below title block */
.ed-hero-img {
  margin: 36px auto;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-canvas);
  box-shadow:
    0 24px 60px -24px rgba(15, 30, 80, 0.30),
    var(--shadow-inset-hi);
}
.ed-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Summary call-out box (above the prose) */
.ed-summary {
  position: relative;
  padding: 20px 22px;
  margin: 0 0 36px;
  background:
    linear-gradient(180deg, rgba(32, 81, 249, 0.06), transparent 90%),
    var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-left: 3px solid var(--brand-blue);
  border-radius: 14px;
  box-shadow: var(--shadow-inset-hi);
}
.ed-summary-lbl {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 8px;
}
.ed-summary p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-primary);
  margin: 0;
}

/* Case-only: hero stats strip */
.ed-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 28px;
}
.ed-stat {
  padding: 20px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 14px;
  box-shadow: var(--shadow-inset-hi);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ed-stat-big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--brand-blue-deep), var(--brand-blue) 60%, var(--brand-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ed-stat-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Case-only: project info grid */
.ed-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-hairline);
  border: 1px solid var(--line-hairline);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 36px;
}
.ed-info-cell {
  padding: 14px 18px;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ed-info-cell--wide { grid-column: 1 / -1; }
.ed-info-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.ed-info-val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
}

/* Article prose */
.ed-prose {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg-secondary);
  margin: 0 0 48px;
}
.ed-prose p { margin: 0 0 20px; text-wrap: pretty; }
.ed-prose h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: 40px 0 14px;
  text-wrap: balance;
}
.ed-prose h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
  margin: 28px 0 10px;
}
.ed-prose ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ed-prose ul li {
  position: relative;
  padding-left: 22px;
  color: var(--fg-primary);
}
.ed-prose ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 12px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--brand-cyan);
}
.ed-prose a {
  color: var(--brand-blue);
  text-decoration: none;
}
.ed-prose a:hover { text-decoration: none; }

/* Inline CTA card */
.ed-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px 32px;
  margin: 16px 0 40px;
  border-radius: var(--radius-2xl);
  text-decoration: none;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 80% at 0% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
    radial-gradient(ellipse 80% 100% at 100% 100%, rgba(104, 163, 247, 0.30), transparent 60%),
    linear-gradient(135deg, var(--brand-blue-deep) 0%, var(--brand-blue) 100%);
  box-shadow:
    0 20px 50px -20px rgba(32, 81, 249, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.ed-cta-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 28px 60px -20px rgba(32, 81, 249, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ed-cta-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}
.ed-cta-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 0 0 6px;
  max-width: 32ch;
  text-wrap: balance;
}
.ed-cta-card p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 48ch;
}
.ed-cta-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #fff;
  color: var(--brand-blue);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  transition: gap 180ms ease;
}
.ed-cta-card-btn:hover { gap: 12px; }
.ed-cta-card-btn .arr { display: inline-flex; }
.ed-cta-card-btn .arr svg { width: 11px; height: 11px; }

/* Share row */
.ed-share {
  padding: 24px 0 8px;
  border-top: 1px solid var(--line-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.ed-share-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.ed-share-row { display: inline-flex; gap: 10px; }

/* Popular posts list (compact stacked rows) */
.ed-popular-section { padding-top: 48px; padding-bottom: 48px; }
.ed-section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: 0 0 24px;
}
.ed-popular-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.ed-popular-row {
  display: flex;
  gap: 14px;
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 14px;
  text-decoration: none;
  box-shadow: var(--shadow-inset-hi);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.ed-popular-row:hover {
  transform: translateY(-2px);
  border-color: rgba(32, 81, 249, 0.30);
  box-shadow: 0 10px 22px -10px rgba(32, 81, 249, 0.15), var(--shadow-inset-hi);
}
.ed-popular-thumb {
  flex: 0 0 96px;
  width: 96px; height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-canvas);
}
.ed-popular-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ed-popular-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  justify-content: center;
}
.ed-popular-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.ed-popular-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ed-popular-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Latest from blog section header */
.ed-latest-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

/* Responsive */
@media (max-width: 1000px) {
  .ed-title { font-size: 38px; }
  .ed-popular-list { grid-template-columns: 1fr; }
  .ed-cta-card { padding: 22px 24px; }
  .ed-cta-card h3 { font-size: 21px; }
  .ed-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ed-title { font-size: 30px; }
  .ed-prose { font-size: 16px; }
  .ed-prose h2 { font-size: 23px; }
  .ed-stats { grid-template-columns: 1fr; }
  .ed-info { grid-template-columns: 1fr; }
  .ed-info-cell--wide { grid-column: auto; }
}


/* ============================================================
   Legal pages (Privacy + Terms) — TOC + prose
   ============================================================ */
.legal-section { padding-top: 32px; }
.legal-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 96px;
  padding: 20px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 14px;
  box-shadow: var(--shadow-inset-hi);
}
.legal-toc-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 14px;
}
.legal-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legal-toc a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--fg-secondary);
  transition: background 160ms ease, color 160ms ease;
}
.legal-toc a:hover {
  background: rgba(32, 81, 249, 0.06);
  color: var(--brand-blue);
}
.legal-toc-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  flex-shrink: 0;
}
.legal-toc-updated {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-hairline);
}

.legal-prose { max-width: 72ch; }
.legal-block {
  padding: 24px 0 12px;
  border-bottom: 1px solid var(--line-hairline);
  scroll-margin-top: 110px;
}
.legal-block:last-child { border-bottom: 0; }
.legal-block h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: 0 0 16px;
  text-wrap: balance;
}
.legal-block p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-secondary);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.legal-block ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-block li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-primary);
}
.legal-block li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--brand-cyan);
}

/* ============================================================
   Press kit page
   ============================================================ */

/* Press contact strip */
.presskit-contact { padding-top: 24px; padding-bottom: 24px; }
.presskit-contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px 32px;
  background:
    radial-gradient(ellipse 80% 80% at 0% 0%, rgba(32, 81, 249, 0.10), transparent 60%),
    radial-gradient(ellipse 80% 100% at 100% 100%, rgba(104, 163, 247, 0.08), transparent 60%),
    var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-inset-hi);
}
.presskit-contact-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--fg-primary);
  margin: 6px 0 4px;
  text-wrap: balance;
}
.presskit-contact-sub {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0;
  max-width: 56ch;
}
.presskit-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}
.presskit-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}
.presskit-contact-link svg {
  width: 18px; height: 18px;
  color: var(--brand-blue);
  flex-shrink: 0;
}
.presskit-contact-link:hover {
  color: var(--brand-blue);
  transform: translateY(-1px);
}

/* Facts grid */
.presskit-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.presskit-fact {
  padding: 22px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-inset-hi);
}
.presskit-fact-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.presskit-fact-val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
}

/* Boilerplate copy blocks */
.presskit-boilerplate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.presskit-boiler {
  padding: 22px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-inset-hi);
}
.presskit-boiler-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.presskit-boiler p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-primary);
  margin: 0;
}

/* Logo download tiles */
.presskit-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.presskit-logo {
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-inset-hi);
}
.presskit-logo-stage {
  display: grid;
  place-items: center;
  height: 180px;
  padding: 24px;
  border-bottom: 1px solid var(--line-hairline);
}
.presskit-logo-stage img {
  max-width: 80%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.presskit-logo--dark .presskit-logo-stage {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.presskit-logo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
}
.presskit-logo-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
}
.presskit-logo-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  text-decoration: none;
  transition: gap 180ms ease;
}
.presskit-logo-dl:hover { gap: 9px; }
.presskit-logo-dl svg { width: 11px; height: 11px; }

/* Brand colour swatches */
.presskit-colors {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.presskit-color {
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-inset-hi);
}
.presskit-color-swatch {
  height: 140px;
}
.presskit-color-foot {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.presskit-color-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
}
.presskit-color-hex {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Type samples */
.presskit-type {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.presskit-type-card {
  padding: 24px 26px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  box-shadow: var(--shadow-inset-hi);
}
.presskit-type-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.presskit-type-sample {
  color: var(--fg-primary);
  margin: 0;
  flex: 1;
}
.presskit-type-spec {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Founders */
.presskit-founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.presskit-founder {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 22px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 16px;
  box-shadow: var(--shadow-inset-hi);
}
.presskit-founder-photo {
  position: relative;
  width: 180px;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-canvas);
}
.presskit-founder-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.presskit-founder-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.presskit-founder-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.presskit-founder-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
  margin: 0;
}
.presskit-founder-bio {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
}
.presskit-founder-dl {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  text-decoration: none;
  margin-top: 6px;
  transition: gap 180ms ease;
}
.presskit-founder-dl:hover { gap: 9px; }
.presskit-founder-dl svg { width: 11px; height: 11px; }

/* Responsive */
@media (max-width: 1100px) {
  .legal-grid { grid-template-columns: 1fr; gap: 32px; }
  .legal-toc { position: static; }
  .presskit-facts { grid-template-columns: repeat(2, 1fr); }
  .presskit-boilerplate { grid-template-columns: 1fr; }
  .presskit-colors { grid-template-columns: repeat(3, 1fr); }
  .presskit-type { grid-template-columns: 1fr; }
  .presskit-founders { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .presskit-facts { grid-template-columns: 1fr; }
  .presskit-logos { grid-template-columns: 1fr; }
  .presskit-colors { grid-template-columns: repeat(2, 1fr); }
  .presskit-founder { grid-template-columns: 1fr; }
  .presskit-founder-photo { width: 100%; max-width: 200px; }
}


/* ============================================================
   Editorial 2-column body (ed-body / ed-layout)
   ============================================================ */
.ed-body { padding-top: 8px; padding-bottom: 96px; }
.ed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}
.ed-main { min-width: 0; }
.ed-main .ed-hero-img { margin-top: 0; }

/* Sidebar */
.ed-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ed-side-block {
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: var(--shadow-inset-hi);
}
.ed-side-block + .ed-side-block { margin-top: 0; }
.ed-side-block .section-eyebrow { margin-bottom: 8px; }
.ed-side-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--fg-primary);
  margin: 0 0 16px;
}

/* Sidebar — thumbnail-row list */
.ed-side-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ed-side-row {
  display: flex;
  gap: 12px;
  text-decoration: none;
  border-radius: 10px;
  transition: background 180ms ease, transform 180ms ease;
}
.ed-side-row:hover {
  background: rgba(32, 81, 249, 0.05);
  transform: translateX(2px);
}
.ed-side-thumb {
  flex: 0 0 76px;
  width: 76px; height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-canvas);
}
.ed-side-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ed-side-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  justify-content: center;
}
.ed-side-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.ed-side-title-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ed-side-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Sidebar — ranked list */
.ed-side-rank {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: side-rank;
}
.ed-side-rank-row {
  display: flex;
  gap: 14px;
  padding: 10px 4px;
  text-decoration: none;
  border-radius: 10px;
  border-top: 1px solid var(--line-hairline);
  transition: background 180ms ease, color 180ms ease;
}
.ed-side-rank > li:first-child .ed-side-rank-row { border-top: 0; padding-top: 4px; }
.ed-side-rank-row:hover { background: rgba(32, 81, 249, 0.05); }
.ed-side-rank-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--brand-blue);
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 28px;
}
.ed-side-rank-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ed-side-rank-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.ed-side-rank-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "View all" link inside sidebar block */
.ed-side-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
  text-decoration: none;
  transition: gap 180ms ease;
}
.ed-side-view-all:hover { gap: 11px; }
.ed-side-view-all svg { width: 11px; height: 11px; }

/* Share row — variant placed above the hero image */
.ed-share--top {
  padding: 20px 0 4px;
  margin-top: 24px;
  border-top: 1px solid var(--line-hairline);
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.ed-share--top .ed-share-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.ed-share--top .ed-share-row {
  display: inline-flex;
  gap: 10px;
}
.ed-share--top .bp-share-btn {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line-hairline);
  color: var(--fg-secondary);
  text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.ed-share--top .bp-share-btn svg { width: 14px; height: 14px; }
.ed-share--top .bp-share-btn:hover {
  color: #fff;
  background: linear-gradient(180deg, #3F6BFF, var(--brand-blue));
  border-color: var(--brand-blue);
  transform: translateY(-1px);
}

/* Hero image margin adjustment within new layout */
.ed-main .ed-hero-img { margin: 24px 0 28px; }

/* Responsive */
@media (max-width: 1100px) {
  .ed-layout { grid-template-columns: 1fr; gap: 40px; }
  .ed-sidebar { position: static; }
}


/* ============================================================
   Our Work — industry filter tabs
   ============================================================ */
.work-filter-section { padding-top: 24px; }
.work-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-hairline);
}
.work-filter-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.work-filter-tab:hover {
  color: var(--brand-blue);
  border-color: rgba(32, 81, 249, 0.30);
  background: rgba(32, 81, 249, 0.04);
}
.work-filter-tab.is-active {
  background: linear-gradient(180deg, #3F6BFF, var(--brand-blue));
  border-color: var(--brand-blue);
  color: #fff;
  box-shadow: 0 6px 14px rgba(32, 81, 249, 0.22);
}

/* Empty-state for a filter with no matches */
.work-empty {
  padding: 64px 0 32px;
  text-align: center;
}
.work-empty .section-eyebrow { justify-content: center; }
.work-empty h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: 12px 0 6px;
}
.work-empty h3 em {
  font-style: italic;
  color: var(--brand-blue);
}
.work-empty p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0 0 20px;
}
.work-empty .btn { display: inline-flex; }


/* Contact page — 3-card row layout (replaces form + sidebar) */
.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 18px;
  align-items: stretch;
}
.contact-cards .contact-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Inline-SVG version of .contact-row icons */
.contact-card .contact-row {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: var(--fg-secondary);
  transition: color 160ms ease;
}
.contact-card .contact-row:hover { color: var(--brand-blue); }
.contact-card .contact-row > svg {
  width: 18px; height: 18px;
  color: var(--brand-blue);
  flex-shrink: 0;
  margin-top: 2px;
}
.contact-row--addr {
  align-items: flex-start;
}
.contact-row--addr > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.5;
}
.contact-row--addr strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
}
.contact-addr-lines {
  color: var(--fg-muted);
  font-size: 13.5px;
  line-height: 1.55;
}
@media (max-width: 1000px) {
  .contact-cards { grid-template-columns: 1fr; }
}


/* ============================================================
   Career — "Open application" highlighted call-out
   ============================================================ */
.career-cta {
  position: relative;
  padding: 56px 56px;
  border-radius: var(--radius-2xl);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(32, 81, 249, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(104, 163, 247, 0.10), transparent 60%),
    var(--bg-surface);
  border: 1px solid rgba(32, 81, 249, 0.20);
  box-shadow:
    0 1px 2px rgba(15, 30, 80, 0.05),
    0 24px 60px -24px rgba(32, 81, 249, 0.25),
    var(--shadow-inset-hi);
  overflow: hidden;
  isolation: isolate;
}
.career-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(32, 81, 249, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 81, 249, 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.career-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--brand-blue);
  background: linear-gradient(180deg, rgba(32, 81, 249, 0.10), rgba(32, 81, 249, 0.04));
  border: 1px solid rgba(32, 81, 249, 0.18);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.career-cta-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--brand-cyan);
  box-shadow: 0 0 10px var(--brand-cyan);
}
.career-cta-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
  margin: 0 0 14px;
  text-wrap: balance;
}
.career-cta-title em {
  font-style: italic;
  background: linear-gradient(110deg, var(--brand-blue-deep) 0%, var(--brand-blue) 40%, var(--brand-cyan) 70%, var(--brand-blue-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heroShim 9s linear infinite;
}
.career-cta-sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: 0 0 28px;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.career-cta-sub a {
  color: var(--brand-blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(32, 81, 249, 0.30);
  text-underline-offset: 3px;
}
.career-cta-sub a:hover { text-decoration-color: var(--brand-blue); }
.career-cta .btn { gap: 8px; }

@media (max-width: 720px) {
  .career-cta { padding: 36px 24px; }
  .career-cta-title { font-size: 28px; }
}


/* ============================================================
   About team — leadership row (Dinesh + Neelam featured)
   ============================================================ */
.leadership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 56px;
}
.leader-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(32, 81, 249, 0.08), transparent 60%),
    var(--bg-surface);
  border: 1px solid var(--line-hairline);
  box-shadow:
    0 1px 2px rgba(15, 30, 80, 0.05),
    0 18px 40px -20px rgba(32, 81, 249, 0.20),
    var(--shadow-inset-hi);
  transition: transform 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.leader-card:hover {
  transform: translateY(-3px);
  border-color: rgba(32, 81, 249, 0.30);
}
.leader-photo {
  position: relative;
  width: 130px;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
}
.leader-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  z-index: 1;
}
.leader-photo .team-photo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 38px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.18);
  z-index: 0;
}
.leader-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.leader-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue);
  background: linear-gradient(180deg, rgba(32, 81, 249, 0.10), rgba(32, 81, 249, 0.04));
  border: 1px solid rgba(32, 81, 249, 0.18);
  padding: 4px 12px;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 6px;
}
.leader-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--brand-cyan);
  box-shadow: 0 0 8px var(--brand-cyan);
}
.leader-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--fg-primary);
  margin: 0;
}
.leader-role {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--brand-blue);
}
.leader-bio {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 8px 0 0;
}

/* "The team" sub-section header */
.team-rest-head {
  margin-bottom: 24px;
}
.team-rest-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: 8px 0 0;
}
/* Add breathing room when a new tier header follows previous content */
.manager-row + .team-rest-head { margin-top: 64px; }

/* ── Tier 2 — Department leads / managers ── */
.manager-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 8px;
}
.manager-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-inset-hi);
  transition: transform 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.manager-card:hover {
  transform: translateY(-3px);
  border-color: rgba(32, 81, 249, 0.30);
}
.manager-photo {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  isolation: isolate;
}
.manager-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
  transition: transform 240ms var(--ease-out);
}
.manager-card:hover .manager-photo img { transform: scale(1.04); }
.manager-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.manager-name {
  font-family: var(--font-display);
  font-weight: 500; font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  margin: 0;
}
.manager-role {
  font-family: var(--font-body);
  font-size: 14px; color: var(--fg-secondary);
}
.manager-dept {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand-blue);
}
.manager-dept i, .manager-dept svg { width: 14px; height: 14px; }

/* ── Tier 3 — Departments ── */
.team-depts {
  display: flex;
  flex-direction: column;
  gap: 52px;
}
.team-dept-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line-hairline);
}
.team-dept-ic {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #F4F6FB, #E8EEFB);
  border: 1px solid rgba(32, 81, 249, 0.18);
  color: var(--brand-blue);
}
.team-dept-ic i, .team-dept-ic svg { width: 22px; height: 22px; }
.team-dept-meta { flex: 1; min-width: 0; }
.team-dept-label {
  font-family: var(--font-display);
  font-weight: 500; font-size: 21px;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
  margin: 0;
}
.team-dept-blurb {
  font-family: var(--font-body);
  font-size: 13.5px; color: var(--fg-muted);
  margin: 2px 0 0;
}
.team-dept-count {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--fg-muted);
  letter-spacing: 0.04em;
}
[data-theme="dark"] .team-dept-ic {
  background: linear-gradient(180deg, #14171D, #0E1118);
  border-color: rgba(104, 163, 247, 0.22);
}

/* Responsive */
@media (max-width: 1100px) {
  .leadership-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .manager-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .leader-card { grid-template-columns: 1fr; }
  .leader-photo { width: 100%; aspect-ratio: 5 / 4; }
}


/* ============================================================
   Career job detail — header meta + actions + sidebar perks
   ============================================================ */
.job-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 0 0 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line-hairline);
}
.job-detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--fg-secondary);
}
.job-detail-meta-item svg {
  width: 16px; height: 16px;
  color: var(--brand-blue);
  flex-shrink: 0;
}

.job-detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 16px;
}

/* Perks list in sidebar */
.job-perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.job-perks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-primary);
}
.job-perk-ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(32, 81, 249, 0.10), rgba(32, 81, 249, 0.04));
  border: 1px solid rgba(32, 81, 249, 0.18);
  color: var(--brand-blue);
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.job-perk-ic svg { width: 16px; height: 16px; }

/* ============================================================
   Home — Industry recognition strip
   ============================================================ */
.home-badges-section { padding: 56px 0; }
.home-badges-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: 28px;
  flex-wrap: wrap;
}
.home-badges-sub {
  font-family: var(--font-body); font-size: 14px;
  color: var(--fg-muted); margin: 0;
}
.home-badges { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 720px) {
  .home-badges-section { padding: 40px 0; }
}

/* ============================================================
   Industry detail — sectioned content patterns (v2)
   Each section has its own bespoke layout for visual rhythm
   ============================================================ */

/* Shared rhythm — section gets a generous top/bottom padding */
.ind-section {
  padding: 110px 0;
  border-top: 1px solid var(--line-hairline);
}
.ind-section:first-of-type { border-top: 0; }
.ind-section .section-head { margin-bottom: 48px; }

/* ── 1. Challenges — sticky header + numbered list rows ──── */
.chal-split {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: start;
}
.chal-split-side {
  position: sticky; top: 120px;
}
.chal-side-eyebrow {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #E11D48;
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.chal-side-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: #E11D48; display: block;
}
.chal-side-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 44px; line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 18px; color: var(--fg-primary);
  text-wrap: balance;
}
.chal-side-title em {
  font-style: italic;
  background: linear-gradient(110deg, #E11D48, #F472B6 60%, #E11D48);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chal-side-sub {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--fg-muted); margin: 0; max-width: 38ch;
}

.chal-list { display: flex; flex-direction: column; gap: 0; }
.chal-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-hairline);
}
.chal-row:first-child { padding-top: 0; }
.chal-row:last-child { border-bottom: 0; }
.chal-num {
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.16em; color: #E11D48;
  font-weight: 500;
  padding-top: 4px;
}
.chal-row-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 24px; line-height: 1.2; letter-spacing: -0.015em;
  margin: 0 0 8px; color: var(--fg-primary);
}
.chal-row-body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--fg-muted); margin: 0; max-width: 60ch;
}

@media (max-width: 1100px) {
  .chal-split { grid-template-columns: 1fr; gap: 40px; }
  .chal-split-side { position: static; }
}

/* ── 2. Personas — detailed cards in 3-col grid ──────────── */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.persona-card {
  position: relative;
  padding: 28px 26px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 18px;
  box-shadow: var(--shadow-inset-hi);
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
  display: flex; flex-direction: column; gap: 18px;
  min-height: 220px;
}
.persona-card:hover {
  border-color: rgba(63,107,255,0.32);
  transform: translateY(-3px);
}
.persona-card .persona-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(63,107,255,0.12), rgba(217,70,239,0.10));
  border: 1px solid rgba(63,107,255,0.16);
  color: var(--brand-blue-deep);
}
.persona-card .persona-icon svg { width: 24px; height: 24px; }
.persona-card .persona-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.015em;
  margin: 0; color: var(--fg-primary);
}
.persona-card .persona-role {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--fg-muted); margin: 0;
}
.persona-card .persona-build {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--brand-blue-deep);
  display: inline-flex; align-items: center; gap: 8px;
}
.persona-card .persona-build::before {
  content: ""; width: 18px; height: 1px;
  background: var(--brand-blue-deep);
}
@media (max-width: 1100px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .persona-grid { grid-template-columns: 1fr; } }

/* ── 3. Digital Solutions — uniform 3-per-row grid ─────────── */
.sol-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) { .sol-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .sol-grid-3 { grid-template-columns: 1fr; } }
.sol-mini {
  position: relative;
  padding: 24px;
  border-radius: 18px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  box-shadow: var(--shadow-inset-hi);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px;
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.sol-mini:hover { border-color: rgba(63,107,255,0.32); transform: translateY(-2px); }
.sol-mini .sol-mini-head {
  display: flex; align-items: center; justify-content: space-between;
}
.sol-mini .sol-mini-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(63,107,255,0.08);
  border: 1px solid rgba(63,107,255,0.18);
  color: var(--brand-blue-deep);
}
.sol-mini .sol-mini-icon svg { width: 20px; height: 20px; }
.sol-mini .sol-mini-num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--fg-faint);
}
.sol-mini .sol-mini-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 19px; line-height: 1.18; letter-spacing: -0.015em;
  margin: 0; color: var(--fg-primary);
}
.sol-mini .sol-mini-body {
  font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  color: var(--fg-muted); margin: 0;
}
.sol-mini .sol-mini-features {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line-hairline);
}
.sol-mini .sol-mini-features .sol-feat {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg-canvas);
  border: 1px solid var(--line-hairline);
  color: var(--fg-secondary);
}

/* ── 4. AI & Automation — inverted dark band + glass grid ── */
.ind-section.is-ai-dark {
  background:
    radial-gradient(ellipse 90% 70% at 20% 0%, rgba(99,102,241,0.40), transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(217,70,239,0.30), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,61,139,0.10), transparent 70%),
    linear-gradient(180deg, #0B1020 0%, #0E1430 50%, #0B1020 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.ind-section.is-ai-dark::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  opacity: 0.7;
}
.ind-section.is-ai-dark > .container { position: relative; }
/* Reskin the SectionHead inside the dark band */
.ind-section.is-ai-dark .section-head .section-eyebrow { color: #F472B6; }
.ind-section.is-ai-dark .section-head .section-num    { color: rgba(255,255,255,0.45); }
.ind-section.is-ai-dark .section-head .section-title  { color: #ffffff; }
.ind-section.is-ai-dark .section-head .section-title em {
  background: linear-gradient(110deg, #A78BFA 0%, #F472B6 60%, #A78BFA 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ind-section.is-ai-dark .section-head .section-sub {
  color: rgba(255,255,255,0.72);
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ai-grid .ai-card:nth-child(4) { grid-column: 1 / 2; }
.ai-grid .ai-card:nth-child(5) { grid-column: 2 / 4; }
@media (max-width: 1100px) {
  .ai-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-grid .ai-card:nth-child(4),
  .ai-grid .ai-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 720px) {
  .ai-grid { grid-template-columns: 1fr; }
}

.ai-card {
  position: relative;
  padding: 26px 24px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 220px;
  transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out);
  overflow: hidden;
}
.ai-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(99,102,241,0.6), rgba(217,70,239,0.5), rgba(255,61,139,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.5; pointer-events: none;
  transition: opacity 260ms var(--ease-out);
}
.ai-card:hover { transform: translateY(-3px); }
.ai-card:hover::after { opacity: 1; }

.ai-card .ai-card-head {
  display: flex; align-items: center; justify-content: space-between;
}
.ai-card .ai-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(99,102,241,0.40), rgba(217,70,239,0.40));
  border: 1px solid rgba(255,255,255,0.20);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.ai-card .ai-card-icon svg { width: 20px; height: 20px; }
.ai-card .ai-card-num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; color: rgba(255,255,255,0.55);
}
.ai-card .ai-card-tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.20em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(217,70,239,0.18);
  border: 1px solid rgba(217,70,239,0.32);
  color: #F0ABFC;
  align-self: flex-start;
}
.ai-card .ai-card-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.015em;
  margin: 0; color: #ffffff;
}
.ai-card .ai-card-body {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  color: rgba(255,255,255,0.75); margin: 0;
}

/* ── 5. Outcomes — big-stat dashboard grid ────────────────── */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.outcome-cell {
  padding: 28px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--line-hairline);
  border-radius: 16px;
  box-shadow: var(--shadow-inset-hi);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px;
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.outcome-cell:hover { border-color: rgba(16,185,129,0.40); transform: translateY(-2px); }
.outcome-metric {
  font-family: var(--font-display); font-weight: 500;
  font-size: 44px; line-height: 1; letter-spacing: -0.03em;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}
.outcome-metric .arrow {
  color: #059669;
  font-weight: 500;
  margin-right: 4px;
  display: inline-block;
}
.outcome-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #059669;
  display: inline-flex; align-items: center; gap: 8px;
}
.outcome-label::before {
  content: ""; width: 18px; height: 1px; background: #059669;
}
.outcome-body {
  margin-top: auto;
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.55;
  color: var(--fg-muted); margin: 0;
}
@media (max-width: 1200px) { .outcome-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .outcome-grid { grid-template-columns: 1fr; } }

/* Industry not found — empty state */
.ind-notfound {
  padding: 80px 40px; text-align: center;
  border: 1px dashed var(--line-hairline);
  border-radius: 18px;
  color: var(--fg-muted);
}

/* ============================================================
   WORDPRESS GUTENBERG CLASS MAPPINGS
   Maps WP block wrapper classes to design system classes
   ============================================================ */

/* ── Force dark theme on body ── */
body {
  background: var(--bg-canvas) !important;
  color: var(--fg-primary) !important;
  font-family: var(--font-body) !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Full-width content ── */
.wp-block {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Group blocks ── */
.wp-block-group {
  box-sizing: border-box;
}

/* ── Custom HTML blocks (main content vehicle) ── */
.wp-block-custom-html {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Paragraph defaults ── */
.wp-block-paragraph {
  color: var(--fg-secondary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin: 0;
  padding: 0;
}

/* ── Heading overrides ── */
.wp-block-heading {
  font-family: var(--font-display);
  color: var(--fg-primary);
  margin: 0;
  padding: 0;
}

/* ── Image blocks ── */
.wp-block-image {
  margin: 0;
  padding: 0;
}
.wp-block-image img {
  display: block;
  max-width: 100%;
}

/* ── Button blocks ── */
.wp-block-button {
  margin: 0;
  padding: 0;
}
.wp-block-button__link {
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}
.wp-block-buttons {
  display: flex;
  gap: var(--space-3);
}

/* ── Columns blocks ── */
.wp-block-columns {
  display: flex;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
}
.wp-block-column {
  flex: 1;
  min-width: 0;
}

/* ── Separator blocks ── */
.wp-block-separator {
  border-color: var(--line-hairline);
  margin: 0;
}

/* ── Navigation block overrides ── */
.wp-block-navigation {
  background: transparent !important;
}

/* ── Template parts ── */
.wp-block-template-part {
  margin: 0;
  padding: 0;
}

/* ── Cover blocks ── */
.wp-block-cover {
  min-height: auto;
}

/* ── Media & Text ── */
.wp-block-media-text {
  grid-template-columns: 1fr 1fr !important;
}

/* ── Disable WordPress default spacing on content ── */
.entry-content > *:first-child,
.entry-content > *:last-child {
  margin-top: 0;
  margin-bottom: 0;
}

/* ── Full-width alignment ── */
.alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── Content editor styles ── */
.editor-styles-wrapper {
  background: var(--bg-canvas);
  color: var(--fg-primary);
}

/* ── Responsive overrides for WP blocks ── */
@media (max-width: 768px) {
  .wp-block-columns {
    flex-direction: column;
  }
  .wp-block-column {
    min-width: 100%;
  }
}