/* ============================================================
   Matrix500mg — Website Design System
   website/assets/css/website.css
   ============================================================ */

/* ============================================================
   1. CSS Custom Properties (Design Tokens)
   ============================================================ */
:root {
  /* --- Brand Colors --- */
  --color-brand-primary:      #00e5ff;   /* Cyan glow — primary accent     */
  --color-brand-secondary:    #7b2fff;   /* Violet — secondary accent       */
  --color-brand-tertiary:     #00ff9d;   /* Mint — positive / success tone  */

  /* --- Surface Colors --- */
  --color-bg-base:            #080b12;   /* Page background                 */
  --color-bg-elevated:        #0d1120;   /* Card / panel surface            */
  --color-bg-overlay:         #111827;   /* Modal / overlay surface         */
  --color-bg-muted:           #161d2e;   /* Subtle fill — inputs, chips     */
  --color-border:             #1e2a40;   /* General borders                 */
  --color-border-subtle:      #141c2e;   /* Hairline separators             */

  /* --- Text Colors --- */
  --color-text-primary:       #f0f4ff;   /* Main body / headings            */
  --color-text-secondary:     #8b9ab8;   /* Subtext / captions              */
  --color-text-muted:         #4d5d7a;   /* Disabled / placeholder          */
  --color-text-inverse:       #080b12;   /* Text on light surfaces          */

  /* --- Glow / Shadow Tokens --- */
  --glow-cyan:                0 0 18px rgba(0, 229, 255, 0.22);
  --glow-cyan-strong:         0 0 32px rgba(0, 229, 255, 0.38);
  --glow-violet:              0 0 18px rgba(123, 47, 255, 0.28);
  --glow-card:                0 4px 32px rgba(0, 0, 0, 0.52);
  --glow-navbar:              0 2px 24px rgba(0, 0, 0, 0.64);

  /* --- Typography Scale --- */
  --font-family-sans:         'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-mono:         'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --font-size-xs:             0.6875rem;   /* 11px */
  --font-size-sm:             0.8125rem;   /* 13px */
  --font-size-base:           0.9375rem;   /* 15px */
  --font-size-md:             1.0625rem;   /* 17px */
  --font-size-lg:             1.25rem;     /* 20px */
  --font-size-xl:             1.5rem;      /* 24px */
  --font-size-2xl:            2rem;        /* 32px */
  --font-size-3xl:            2.75rem;     /* 44px */
  --font-size-4xl:            3.75rem;     /* 60px */
  --font-size-5xl:            5rem;        /* 80px */

  --font-weight-regular:      400;
  --font-weight-medium:       500;
  --font-weight-semibold:     600;
  --font-weight-bold:         700;
  --font-weight-extrabold:    800;

  --line-height-tight:        1.15;
  --line-height-snug:         1.35;
  --line-height-normal:       1.6;
  --line-height-relaxed:      1.75;

  --letter-spacing-tight:     -0.03em;
  --letter-spacing-normal:    -0.01em;
  --letter-spacing-wide:      0.04em;
  --letter-spacing-wider:     0.08em;
  --letter-spacing-widest:    0.14em;

  /* --- Spacing Scale --- */
  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-7:    1.75rem;   /* 28px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* --- Border Radius --- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    18px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* --- Transitions --- */
  --transition-fast:    150ms ease;
  --transition-base:    240ms ease;
  --transition-slow:    380ms ease;

  /* --- Container Widths --- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;

  /* --- Navbar --- */
  --navbar-height:  68px;
  --navbar-bg:      rgba(8, 11, 18, 0.82);
  --navbar-border:  rgba(30, 42, 64, 0.7);
  --navbar-blur:    blur(18px) saturate(1.5);
}


/* ============================================================
   2. CSS Reset & Base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}


/* ============================================================
   3. Container Utility
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.container--wide {
  max-width: var(--container-2xl);
}

.container--narrow {
  max-width: var(--container-md);
}

@media (max-width: 768px) {
  .container {
    padding-inline: var(--space-6);
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-5);
  }
}


/* ============================================================
   4. Typography Utilities
   ============================================================ */
.text-xs     { font-size: var(--font-size-xs); }
.text-sm     { font-size: var(--font-size-sm); }
.text-base   { font-size: var(--font-size-base); }
.text-md     { font-size: var(--font-size-md); }
.text-lg     { font-size: var(--font-size-lg); }
.text-xl     { font-size: var(--font-size-xl); }
.text-2xl    { font-size: var(--font-size-2xl); }
.text-3xl    { font-size: var(--font-size-3xl); }
.text-4xl    { font-size: var(--font-size-4xl); }
.text-5xl    { font-size: var(--font-size-5xl); }

.font-regular    { font-weight: var(--font-weight-regular); }
.font-medium     { font-weight: var(--font-weight-medium); }
.font-semibold   { font-weight: var(--font-weight-semibold); }
.font-bold       { font-weight: var(--font-weight-bold); }
.font-extrabold  { font-weight: var(--font-weight-extrabold); }

.text-primary    { color: var(--color-text-primary); }
.text-secondary  { color: var(--color-text-secondary); }
.text-muted      { color: var(--color-text-muted); }
.text-accent     { color: var(--color-brand-primary); }
.text-violet     { color: var(--color-brand-secondary); }
.text-mint       { color: var(--color-brand-tertiary); }

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.uppercase    { text-transform: uppercase; }
.tracking-wide    { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider   { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest  { letter-spacing: var(--letter-spacing-widest); }

.mono { font-family: var(--font-family-mono); }


/* ============================================================
   5. Display & Layout Utilities
   ============================================================ */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.block        { display: block; }
.hidden       { display: none; }

.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }

.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.gap-8        { gap: var(--space-8); }
.gap-10       { gap: var(--space-10); }
.gap-12       { gap: var(--space-12); }

.w-full  { width: 100%; }
.h-full  { height: 100%; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

.overflow-hidden { overflow: hidden; }
.z-0   { z-index: 0; }
.z-10  { z-index: 10; }
.z-20  { z-index: 20; }
.z-50  { z-index: 50; }
.z-100 { z-index: 100; }


/* ============================================================
   6. Section Spacing
   ============================================================ */
.section {
  padding-block: var(--space-24);
}

.section--sm {
  padding-block: var(--space-16);
}

.section--lg {
  padding-block: var(--space-32);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
  margin-bottom: var(--space-4);
}

.section-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  border-radius: var(--radius-full);
}

.section-heading {
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl));
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.section-subheading {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  max-width: 640px;
}

.section-header {
  margin-bottom: var(--space-16);
}

.section-header--center {
  text-align: center;
}

.section-header--center .section-label {
  justify-content: center;
  margin-inline: auto;
}

.section-header--center .section-subheading {
  margin-inline: auto;
}


/* ============================================================
   7. Button System
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.65rem 1.5rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1;
  border-radius: var(--radius-lg);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-fast);
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

/* Primary — Cyan filled */
.btn-primary {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-primary);
}

.btn-primary:hover {
  background: #1aecff;
  border-color: #1aecff;
  box-shadow: var(--glow-cyan-strong);
}

/* Secondary — Ghost cyan */
.btn-secondary {
  background: transparent;
  color: var(--color-brand-primary);
  border-color: rgba(0, 229, 255, 0.35);
}

.btn-secondary:hover {
  background: rgba(0, 229, 255, 0.07);
  border-color: var(--color-brand-primary);
  box-shadow: var(--glow-cyan);
}

/* Ghost — Subtle border */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.btn-ghost:hover {
  color: var(--color-text-primary);
  border-color: rgba(0, 229, 255, 0.25);
  background: rgba(255, 255, 255, 0.03);
}

/* Demo CTA — intentionally secondary to guided demo booking */
.btn-demo {
  background: rgba(0, 229, 255, 0.04);
  color: var(--color-brand-primary);
  border-color: rgba(0, 229, 255, 0.22);
}

.btn-demo:hover {
  background: rgba(0, 229, 255, 0.08);
  border-color: rgba(0, 229, 255, 0.4);
  box-shadow: var(--glow-cyan);
}

.demo-link-inline-wrap {
  margin-top: var(--space-4);
}

.demo-link-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-secondary);
  transition: color var(--transition-base), transform var(--transition-fast);
}

.demo-link-inline::after {
  content: "↗";
  color: var(--color-brand-primary);
  font-size: 0.95em;
}

.demo-link-inline:hover {
  color: var(--color-text-primary);
  transform: translateX(2px);
}

/* Violet */
.btn-violet {
  background: var(--color-brand-secondary);
  color: #fff;
  border-color: var(--color-brand-secondary);
}

.btn-violet:hover {
  background: #8e45ff;
  border-color: #8e45ff;
  box-shadow: var(--glow-violet);
}

/* Sizes */
.btn-sm {
  padding: 0.45rem 1rem;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-md);
}

.btn-lg {
  padding: 0.85rem 2rem;
  font-size: var(--font-size-base);
  border-radius: var(--radius-xl);
}

.btn-xl {
  padding: 1rem 2.5rem;
  font-size: var(--font-size-md);
  border-radius: var(--radius-xl);
  letter-spacing: -0.005em;
}

/* Icon-only */
.btn-icon {
  padding: 0.6rem;
  border-radius: var(--radius-md);
  aspect-ratio: 1;
}


/* ============================================================
   8. Card System
   ============================================================ */
.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.card:hover {
  border-color: rgba(0, 229, 255, 0.2);
  box-shadow: var(--glow-card), var(--glow-cyan);
}

.card--flat {
  box-shadow: none;
}

.card--flat:hover {
  box-shadow: var(--glow-card);
}

.card--glow {
  box-shadow: var(--glow-card);
  border-color: rgba(0, 229, 255, 0.12);
}

.card--glow:hover {
  border-color: rgba(0, 229, 255, 0.3);
  box-shadow: var(--glow-card), var(--glow-cyan-strong);
}

.card--sm  { padding: var(--space-6); }
.card--lg  { padding: var(--space-12); }


/* ============================================================
   9. Divider / Separator
   ============================================================ */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border-subtle);
  border: none;
  margin-block: 0;
}

.divider--glow {
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 229, 255, 0.3),
    transparent
  );
}


/* ============================================================
   10. Badge / Tag
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.6rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}

.badge-cyan {
  background: rgba(0, 229, 255, 0.08);
  color: var(--color-brand-primary);
  border-color: rgba(0, 229, 255, 0.2);
}

.badge-violet {
  background: rgba(123, 47, 255, 0.10);
  color: #a370ff;
  border-color: rgba(123, 47, 255, 0.25);
}

.badge-mint {
  background: rgba(0, 255, 157, 0.08);
  color: var(--color-brand-tertiary);
  border-color: rgba(0, 255, 157, 0.2);
}


/* ============================================================
   11. Gradient Utilities
   ============================================================ */
.gradient-text-cyan {
  background: linear-gradient(135deg, #00e5ff 0%, #00b8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-violet {
  background: linear-gradient(135deg, #7b2fff 0%, #00e5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-brand {
  background: linear-gradient(135deg, #00e5ff 0%, #7b2fff 60%, #00ff9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ============================================================
   12. Glow Dot / Radial Orb Decorations
   ============================================================ */
.orb {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.14;
  z-index: 0;
}

.orb--cyan {
  background: var(--color-brand-primary);
}

.orb--violet {
  background: var(--color-brand-secondary);
}

.orb--mint {
  background: var(--color-brand-tertiary);
}


/* ============================================================
   13. Navbar
   ============================================================ */
.site-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--navbar-height);
  background: var(--navbar-bg);
  backdrop-filter: var(--navbar-blur);
  -webkit-backdrop-filter: var(--navbar-blur);
  border-bottom: 1px solid var(--navbar-border);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              background var(--transition-base);
}

.site-navbar.is-scrolled {
  background: rgba(8, 11, 18, 0.96);
  border-bottom-color: var(--color-border);
  box-shadow: var(--glow-navbar);
}

.navbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

/* Brand */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  text-decoration: none;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.brand-lockup__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.brand-lockup__descriptor {
  display: block;
  font-size: 0.6rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: rgba(225, 232, 255, 0.72);
  white-space: normal;
}

.brand-lockup__descriptor--compact {
  display: none;
}

.navbar-logo {
  display: block;
  height: 32px;
  width: auto;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.navbar-brand:hover .navbar-logo {
  opacity: 0.85;
}

.navbar-brand:hover .brand-lockup__descriptor {
  color: rgba(236, 242, 255, 0.86);
}

/* Nav links */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.navbar-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.navbar-nav-link:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.navbar-nav-link.is-active {
  color: var(--color-brand-primary);
}

/* Actions */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Mobile toggle */
.navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  gap: 5px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.navbar-toggle:hover {
  border-color: rgba(0, 229, 255, 0.3);
  background: rgba(0, 229, 255, 0.04);
}

.navbar-toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--color-text-secondary);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.navbar-toggle.is-open .navbar-toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.navbar-toggle.is-open .navbar-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.navbar-toggle.is-open .navbar-toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav drawer */
.navbar-mobile-nav {
  display: none;
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  background: rgba(8, 11, 18, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6);
  flex-direction: column;
  gap: var(--space-2);
  z-index: 99;
}

.navbar-mobile-nav.is-open {
  display: flex;
}

.navbar-mobile-link {
  display: block;
  padding: 0.7rem var(--space-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.navbar-mobile-link:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.navbar-mobile-link--active {
  color: var(--color-brand-primary);
}

.navbar-mobile-divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin-block: var(--space-3);
}

.navbar-mobile-cta {
  margin-top: var(--space-2);
}

/* Responsive — hide desktop nav, show toggle */
@media (max-width: 960px) {
  .navbar-nav,
  .navbar-actions .btn {
    display: none;
  }

  .brand-lockup__copy {
    max-width: 158px;
  }

  .brand-lockup__descriptor--full {
    display: none;
  }

  .brand-lockup__descriptor--compact {
    display: block;
  }

  .navbar-toggle {
    display: flex;
  }
}

@media (max-width: 640px) {
  .navbar-actions {
    gap: var(--space-2);
  }

  .brand-lockup__copy {
    max-width: 120px;
  }

  .brand-lockup__descriptor {
    font-size: 0.56rem;
    letter-spacing: 0.12em;
  }
}

@media (min-width: 961px) and (max-width: 1240px) {
  .brand-lockup__copy {
    max-width: 170px;
  }

  .brand-lockup__descriptor--full {
    display: none;
  }

  .brand-lockup__descriptor--compact {
    display: block;
  }
}


/* ============================================================
   14. Page Shell (push content below fixed navbar)
   ============================================================ */
.site-main {
  padding-top: var(--navbar-height);
}


/* ============================================================
   15. Footer
   ============================================================ */
.site-footer {
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-20);
  padding-bottom: var(--space-10);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

/* Brand column */
.footer-brand-col {}

.footer-logo {
  display: block;
  height: 26px;
  width: auto;
  margin-bottom: var(--space-3);
  opacity: 0.92;
}

.footer-brand-tagline {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  max-width: 280px;
  margin-bottom: var(--space-5);
}

.footer-brand-statement {
  display: block;
  max-width: 320px;
  margin-bottom: var(--space-4);
  font-size: 0.68rem;
  line-height: 1.45;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: rgba(222, 230, 250, 0.76);
}

.footer-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.75rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-tertiary);
  background: rgba(0, 255, 157, 0.06);
  border: 1px solid rgba(0, 255, 157, 0.18);
  border-radius: var(--radius-full);
}

.footer-trust-pill svg,
.footer-trust-pill .icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Link columns */
.footer-col-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.footer-col-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.footer-col-link:hover {
  color: var(--color-brand-primary);
}

.footer-col-link--demo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #c2d5f2;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
}

.footer-col-link--demo::after {
  content: '↗';
  color: var(--color-brand-primary);
  font-size: 0.78em;
  opacity: 0.7;
  transform: translateY(-1px);
  transition: transform var(--transition-fast), opacity var(--transition-fast), color var(--transition-fast);
}

.footer-col-link--demo:hover {
  color: var(--color-text-primary);
}

.footer-col-link--demo:hover::after {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* Ecosystem products */
.footer-product-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.footer-product-link::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.4;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.footer-product-link:hover {
  color: var(--color-brand-primary);
}

.footer-product-link:hover::before {
  opacity: 1;
}

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-bottom-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.footer-bottom-text a {
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.footer-bottom-text a:hover {
  color: var(--color-brand-primary);
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.footer-bottom-link {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.footer-bottom-link:hover {
  color: var(--color-text-secondary);
}

/* Footer responsive */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}


/* ============================================================
   16. Section Placeholder States
   ============================================================ */
/* Utility class for development placeholder sections */
.section-placeholder {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(0, 229, 255, 0.1);
  border-radius: var(--radius-xl);
  margin: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-mono);
  letter-spacing: 0.04em;
}


/* ============================================================
   17. Scrollbar Styling
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.25);
}


/* ============================================================
   18. Selection
   ============================================================ */
::selection {
  background: rgba(0, 229, 255, 0.18);
  color: var(--color-text-primary);
}


/* ============================================================
   19. Focus Styles (Accessibility)
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ============================================================
   Scroll Reveal Utilities — shared across all sections
   Used via [data-reveal] and optional [data-reveal-delay="ms"]
   ============================================================ */
@keyframes section-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  animation: section-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ============================================================
   20. Hero Section
   ============================================================ */

/* --- Keyframe Animations --- */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hv-float-1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-9px) rotate(0.4deg); }
}
@keyframes hv-float-2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-6px) rotate(-0.3deg); }
}
@keyframes hv-float-3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-11px) rotate(0.5deg); }
}
@keyframes hv-float-4 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-7px) rotate(-0.4deg); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes ai-stream-slide {
  0%   { opacity: 0; transform: translateX(8px); }
  15%  { opacity: 1; transform: translateX(0); }
  85%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-8px); }
}

@keyframes glow-core-pulse {
  0%, 100% { opacity: 0.32; transform: scale(1); }
  50%       { opacity: 0.48; transform: scale(1.08); }
}

/* --- Section shell --- */
.hero-section {
  position: relative;
  min-height: calc(100vh - var(--navbar-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: var(--space-24);
}

/* Ambient background orbs */
.hero-orb {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
  filter: blur(100px);
  z-index: 0;
}

.hero-orb--cyan {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.13) 0%, transparent 70%);
  top: -120px;
  left: -100px;
}

.hero-orb--violet {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(123, 47, 255, 0.12) 0%, transparent 70%);
  bottom: -60px;
  right: -80px;
}

/* Subtle grid overlay */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
}

/* --- Two-column layout --- */
.hero-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* --- Left copy --- */
.hero-copy {
  max-width: 560px;
}

/* Eyebrow */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
  margin-bottom: var(--space-5);
  opacity: 0;
}

.hero-eyebrow-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  box-shadow: 0 0 8px var(--color-brand-primary);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Heading */
.hero-heading {
  font-size: clamp(var(--font-size-3xl), 4.5vw, var(--font-size-4xl));
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  opacity: 0;
}

/* Body text */
.hero-body {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  opacity: 0;
}

/* Deployment line */
.hero-deploy-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  opacity: 0;
}

.hero-deploy-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}

.hero-deploy-badge--on-prem {
  background: rgba(0, 229, 255, 0.07);
  color: var(--color-brand-primary);
  border-color: rgba(0, 229, 255, 0.22);
}

.hero-deploy-badge--saas {
  background: rgba(123, 47, 255, 0.08);
  color: #a370ff;
  border-color: rgba(123, 47, 255, 0.24);
}

.hero-deploy-sep {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  flex-shrink: 0;
}

.hero-deploy-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
}

/* CTAs */
.hero-ctas {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  opacity: 0;
}

/* Trust strip */
.hero-trust-strip {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  opacity: 0;
}

.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.hero-trust-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--color-brand-tertiary);
}

/* --- scroll hint --- */
.hero-scroll-hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  z-index: 1;
}

.hero-scroll-line {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(0, 229, 255, 0.5), transparent);
  animation: hero-fade-up 2s ease-in-out infinite alternate;
}

/* --- Right visual --- */
.hero-visual {
  position: relative;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Central glow pulse */
.hv-glow-core {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: glow-core-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

/* Main glass panel */
.hv-panel {
  background: rgba(13, 17, 32, 0.82);
  border: 1px solid rgba(0, 229, 255, 0.12);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(0, 229, 255, 0.06) inset;
  overflow: hidden;
}

.hv-panel--main {
  width: 340px;
  position: relative;
  z-index: 2;
}

/* Panel header bar */
.hv-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.65rem var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}

.hv-panel-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.hv-panel-dot--red    { background: #ff5f57; opacity: 0.8; }
.hv-panel-dot--yellow { background: #ffbd2e; opacity: 0.8; }
.hv-panel-dot--green  { background: #28c940; opacity: 0.8; }

.hv-panel-title {
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  flex: 1;
}

.hv-panel-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-brand-tertiary);
  font-weight: var(--font-weight-medium);
}

/* Panel body */
.hv-panel-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Signal rows */
.hv-signal-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hv-signal-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  width: 56px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.hv-sparkline {
  flex: 1;
  height: 28px;
  overflow: hidden;
}

.hv-sparkline svg {
  width: 100%;
  height: 100%;
}

.hv-signal-value {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  width: 40px;
  text-align: right;
  flex-shrink: 0;
  font-family: var(--font-family-mono);
}

.hv-val--up {
  color: var(--color-brand-tertiary);
}

/* Bar chart */
.hv-bar-row {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.hv-bar {
  flex: 1;
  background: rgba(0, 229, 255, 0.14);
  border-radius: 2px 2px 0 0;
  transition: background var(--transition-fast);
}

.hv-bar--accent {
  background: rgba(0, 229, 255, 0.4);
}

/* Floating capability cards */
.hv-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.8rem;
  background: rgba(13, 17, 32, 0.88);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  z-index: 3;
}

/* Positions */
.hv-card--tl {
  top:  -10px;
  left: -60px;
}

.hv-card--tr {
  top:  -10px;
  right: -55px;
}

.hv-card--bl {
  bottom: 40px;
  left:  -60px;
}

.hv-card--br {
  bottom: 40px;
  right: -55px;
}

/* Float animations */
.hero-float-1 { animation: hv-float-1 5.5s ease-in-out infinite; }
.hero-float-2 { animation: hv-float-2 6.2s ease-in-out infinite 0.8s; }
.hero-float-3 { animation: hv-float-3 5.8s ease-in-out infinite 1.4s; }
.hero-float-4 { animation: hv-float-4 6.6s ease-in-out infinite 0.4s; }

.hv-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.hv-card-icon svg {
  width: 13px;
  height: 13px;
}

.hv-card-icon--cyan   { background: rgba(0, 229, 255, 0.09); color: var(--color-brand-primary); }
.hv-card-icon--violet { background: rgba(123, 47, 255, 0.1); color: #a370ff; }
.hv-card-icon--mint   { background: rgba(0, 255, 157, 0.08); color: var(--color-brand-tertiary); }

.hv-card-text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}

/* AI strip */
.hv-ai-strip {
  position: absolute;
  bottom:  -18px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5rem var(--space-4);
  background: rgba(13, 17, 32, 0.9);
  border: 1px solid rgba(123, 47, 255, 0.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  z-index: 4;
}

.hv-ai-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: #a370ff;
  flex-shrink: 0;
}

.hv-ai-stream {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.hv-ai-sep {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.hv-ai-token {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  white-space: nowrap;
}

.hv-ai-token--active {
  color: var(--color-brand-tertiary);
  font-weight: var(--font-weight-semibold);
}

/* Pulse dot reused in visual */
.hv-pulse {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-brand-tertiary);
  flex-shrink: 0;
}

.hv-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--color-brand-tertiary);
  animation: pulse-ring 1.8s ease-out infinite;
}

.hv-pulse--violet {
  background: #a370ff;
}

.hv-pulse--violet::after {
  background: #a370ff;
}

/* --- Animate-in state management --- */
/* Elements start hidden (opacity:0 set inline above),
   JS adds .hero-animated class to trigger fade-up */
[data-hero-animate] {
  will-change: opacity, transform;
}

[data-hero-animate].is-visible {
  animation: hero-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .hv-card--tl { left: -20px; }
  .hv-card--tr { right: -20px; }
  .hv-card--bl { left: -20px; }
  .hv-card--br { right: -20px; }
}

@media (max-width: 1024px) {
  .hv-card--tl { left: 0; }
  .hv-card--tr { right: 0; }
  .hv-card--bl { left: 0; }
  .hv-card--br { right: 0; }

  .hv-panel--main { width: 300px; }
}

@media (max-width: 900px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .hero-copy {
    max-width: 100%;
    text-align: center;
  }

  .hero-eyebrow,
  .hero-ctas,
  .hero-deploy-line,
  .hero-trust-strip {
    justify-content: center;
  }

  .hero-body {
    max-width: 580px;
    margin-inline: auto;
  }

  .hero-visual {
    height: 380px;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .hero-section {
    padding-block: var(--space-16);
  }

  .hero-ctas {
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
  }

  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-trust-strip {
    gap: var(--space-4);
  }

  .hero-visual {
    height: 320px;
  }

  .hv-card--tl,
  .hv-card--tr { top: 8px; }

  .hv-card--tl,
  .hv-card--bl { left: 0; }

  .hv-card--tr,
  .hv-card--br { right: 0; }
}


/* ============================================================
   21. Deployment Trust Section
   ============================================================ */

/* --- Section shell --- */
.deployment-section {
  position: relative;
  overflow: hidden;
}

/* Ambient orbs */
.deploy-orb {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
  filter: blur(110px);
  z-index: 0;
}

.deploy-orb--cyan {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.09) 0%, transparent 70%);
  top: -60px;
  right: 5%;
}

.deploy-orb--violet {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(123, 47, 255, 0.09) 0%, transparent 70%);
  bottom: 40px;
  left: 2%;
}

.deployment-section .container {
  position: relative;
  z-index: 1;
}

/* --- Cards grid --- */
.deploy-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

/* --- Base card --- */
.deploy-card {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.deploy-card:hover {
  box-shadow: var(--glow-card);
}

/* Self-hosted: slightly elevated finish */
.deploy-card--selfhosted {
  border-color: rgba(0, 229, 255, 0.18);
  background: linear-gradient(
    145deg,
    rgba(0, 229, 255, 0.03) 0%,
    var(--color-bg-elevated) 50%
  );
}

.deploy-card--selfhosted:hover {
  border-color: rgba(0, 229, 255, 0.32);
  box-shadow: var(--glow-card), 0 0 40px rgba(0, 229, 255, 0.07);
}

.deploy-card--saas {
  border-color: rgba(123, 47, 255, 0.15);
  background: linear-gradient(
    145deg,
    rgba(123, 47, 255, 0.025) 0%,
    var(--color-bg-elevated) 50%
  );
}

.deploy-card--saas:hover {
  border-color: rgba(123, 47, 255, 0.28);
  box-shadow: var(--glow-card), 0 0 40px rgba(123, 47, 255, 0.07);
}

/* --- Recommended badge --- */
.deploy-card-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.28rem 0.7rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-brand-primary);
  background: rgba(0, 229, 255, 0.07);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: var(--radius-full);
  align-self: flex-start;
}

.deploy-card-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* --- Card header row --- */
.deploy-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.deploy-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.deploy-card-icon svg {
  width: 22px;
  height: 22px;
}

.deploy-card-icon--cyan {
  background: rgba(0, 229, 255, 0.08);
  color: var(--color-brand-primary);
  border: 1px solid rgba(0, 229, 255, 0.15);
}

.deploy-card-icon--violet {
  background: rgba(123, 47, 255, 0.09);
  color: #a370ff;
  border: 1px solid rgba(123, 47, 255, 0.18);
}

.deploy-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.deploy-card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

/* --- Divider inside card --- */
.deploy-card-divider {
  border: none;
  height: 1px;
  background: var(--color-border-subtle);
  margin: 0;
}

/* --- Feature list --- */
.deploy-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}

.deploy-feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

.deploy-feature-item strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.deploy-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-top: 1px;
}

.deploy-feature-icon svg {
  width: 12px;
  height: 12px;
}

.deploy-feature-icon--check {
  background: rgba(0, 229, 255, 0.08);
  color: var(--color-brand-primary);
}

.deploy-feature-icon--violet {
  background: rgba(123, 47, 255, 0.09);
  color: #a370ff;
}

/* --- Meta chip strip --- */
.deploy-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

.deploy-meta-chip {
  display: inline-flex;
  padding: 0.2rem 0.55rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  letter-spacing: 0.01em;
}

.deploy-meta-chip--violet {
  color: rgba(163, 112, 255, 0.8);
  background: rgba(123, 47, 255, 0.06);
  border-color: rgba(123, 47, 255, 0.14);
}

/* --- Trust statement --- */
.deploy-trust-statement {
  text-align: center;
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

/* --- Ecosystem mini-note --- */
.deploy-ecosystem-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 580px;
  margin-inline: auto;
  padding: var(--space-5) var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
}

.deploy-ecosystem-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.deploy-ecosystem-icon svg {
  width: 15px;
  height: 15px;
}

.deploy-ecosystem-note p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.deploy-ecosystem-note strong {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.deploy-ecosystem-product {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* --- Responsive --- */
@media (max-width: 860px) {
  .deploy-cards {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .deploy-card--selfhosted {
    order: -1;
  }
}

@media (max-width: 560px) {
  .deploy-card {
    padding: var(--space-6);
  }

  .deploy-trust-statement {
    font-size: var(--font-size-base);
  }

  .deploy-ecosystem-note {
    flex-direction: column;
    gap: var(--space-2);
  }
}


/* ============================================================
   22. Capabilities Section
   ============================================================ */

/* Section shell */
.capabilities-section {
  position: relative;
  overflow: hidden;
}

/* Ambient orbs */
.cap-bg-orb {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
  filter: blur(120px);
  z-index: 0;
}

.cap-bg-orb--cyan {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.08) 0%, transparent 70%);
  top: 0;
  left: -10%;
}

.cap-bg-orb--violet {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 70%);
  bottom: 0;
  right: -5%;
}

.capabilities-section .container {
  position: relative;
  z-index: 1;
}

/* --- 3-column card grid --- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

/* --- Base card --- */
.cap-card {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.cap-card:hover {
  border-color: rgba(0, 229, 255, 0.2);
  box-shadow: var(--glow-card), 0 0 24px rgba(0, 229, 255, 0.06);
  transform: translateY(-3px);
}

/* AI card special treatment */
.cap-card--ai {
  border-color: rgba(123, 47, 255, 0.2);
  background: linear-gradient(
    150deg,
    rgba(123, 47, 255, 0.04) 0%,
    var(--color-bg-elevated) 60%
  );
}

.cap-card--ai:hover {
  border-color: rgba(123, 47, 255, 0.36);
  box-shadow: var(--glow-card), 0 0 32px rgba(123, 47, 255, 0.1);
}

/* Top accent strip (colour per variant) */
.cap-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--radius-full) var(--radius-full) 0 0;
}

.cap-card-accent--cyan   { background: linear-gradient(90deg, #00e5ff, transparent); }
.cap-card-accent--violet { background: linear-gradient(90deg, #7b2fff, transparent); }
.cap-card-accent--teal   { background: linear-gradient(90deg, #00bcd4, transparent); }
.cap-card-accent--amber  { background: linear-gradient(90deg, #ffab40, transparent); }
.cap-card-accent--mint   { background: linear-gradient(90deg, #00ff9d, transparent); }
.cap-card-accent--ai     { background: linear-gradient(90deg, #7b2fff 0%, #00e5ff 100%); }

/* Top row: icon + number */
.cap-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Icon chip */
.cap-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.cap-icon svg {
  width: 20px;
  height: 20px;
}

.cap-icon--cyan   { background: rgba(0, 229, 255, 0.08);   color: var(--color-brand-primary);   border: 1px solid rgba(0, 229, 255, 0.16); }
.cap-icon--violet { background: rgba(123, 47, 255, 0.09);  color: #a370ff;                      border: 1px solid rgba(123, 47, 255, 0.18); }
.cap-icon--teal   { background: rgba(0, 188, 212, 0.08);   color: #4dd0e1;                      border: 1px solid rgba(0, 188, 212, 0.18); }
.cap-icon--amber  { background: rgba(255, 171, 64, 0.08);  color: #ffcc80;                      border: 1px solid rgba(255, 171, 64, 0.18); }
.cap-icon--mint   { background: rgba(0, 255, 157, 0.07);   color: var(--color-brand-tertiary);  border: 1px solid rgba(0, 255, 157, 0.16); }
.cap-icon--ai     { background: rgba(123, 47, 255, 0.1);   color: #c49eff;                      border: 1px solid rgba(123, 47, 255, 0.22); }

/* Card number */
.cap-card-number {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
}

.cap-card-number--ai {
  color: #a370ff;
}

/* Title */
.cap-card-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  line-height: var(--line-height-snug);
}

/* AI inline badge inside title */
.cap-ai-label {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  color: #c49eff;
  background: rgba(123, 47, 255, 0.1);
  border: 1px solid rgba(123, 47, 255, 0.22);
  border-radius: var(--radius-full);
  font-family: var(--font-family-mono);
}

/* Description */
.cap-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

/* Thin divider */
.cap-card-divider {
  border: none;
  height: 1px;
  background: var(--color-border-subtle);
  margin: 0;
}

/* Bullet list */
.cap-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.cap-bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

.cap-bullets li::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  flex-shrink: 0;
  margin-top: 6px;
}

/* Tags */
.cap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

.cap-tag {
  display: inline-flex;
  padding: 0.18rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  letter-spacing: 0.01em;
}

.cap-tag--violet { color: #a370ff;                     background: rgba(123, 47, 255, 0.07); border-color: rgba(123, 47, 255, 0.16); }
.cap-tag--teal   { color: #4dd0e1;                     background: rgba(0, 188, 212, 0.07); border-color: rgba(0, 188, 212, 0.16); }
.cap-tag--amber  { color: #ffcc80;                     background: rgba(255, 171, 64, 0.07); border-color: rgba(255, 171, 64, 0.16); }
.cap-tag--mint   { color: var(--color-brand-tertiary); background: rgba(0, 255, 157, 0.07); border-color: rgba(0, 255, 157, 0.16); }
.cap-tag--ai     { color: #c49eff;                     background: rgba(123, 47, 255, 0.08); border-color: rgba(123, 47, 255, 0.2); }

/* Bottom connector note */
.cap-bottom-note {
  text-align: center;
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  max-width: 620px;
  margin-inline: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .cap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .cap-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .cap-card {
    padding: var(--space-6);
  }
}


/* ============================================================
   23. CTA Band
   ============================================================ */

.cta-section {
  position: relative;
  overflow: hidden;
}

/* Background orbs */
.cta-bg-orb {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
  filter: blur(130px);
  z-index: 0;
}

.cta-bg-orb--cyan {
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.11) 0%, transparent 60%);
  top: -140px;
  left: 50%;
  transform: translateX(-75%);
}

.cta-bg-orb--violet {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(123, 47, 255, 0.11) 0%, transparent 60%);
  bottom: -100px;
  left: 50%;
  transform: translateX(-25%);
}

/* Grid overlay */
.cta-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 100%);
}

/* Glassmorphic panel */
.cta-panel {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-16) var(--space-12);
  background: rgba(13, 17, 32, 0.58);
  border: 1px solid rgba(0, 229, 255, 0.1);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 4px 60px rgba(0, 0, 0, 0.5);
}

/* Flanked eyebrow */
.cta-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

.cta-eyebrow-line {
  display: block;
  width: 32px;
  height: 1px;
  background: linear-gradient(to right, transparent, currentColor);
  flex-shrink: 0;
}

.cta-eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, currentColor);
}

/* Heading */
.cta-heading {
  font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-4xl));
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

/* Body */
.cta-body {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  max-width: 540px;
}

/* Actions */
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Trust strip */
.cta-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
  width: 100%;
}

.cta-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.cta-trust-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--color-brand-tertiary);
}

.cta-trust-sep {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  opacity: 0.35;
  flex-shrink: 0;
}

/* CTA responsive */
@media (max-width: 768px) {
  .cta-panel {
    padding: var(--space-12) var(--space-8);
    gap: var(--space-5);
  }
}

@media (max-width: 560px) {
  .cta-panel {
    padding: var(--space-10) var(--space-6);
    border-radius: var(--radius-xl);
  }

  .cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-trust-sep {
    display: none;
  }

  .cta-trust-strip {
    gap: var(--space-3);
  }
}

@media (max-width: 420px) {
  .cta-panel {
    padding: var(--space-8) var(--space-5);
  }
}


/* ============================================================
   24. Homepage Polish — Final Pass
   ============================================================ */

/* Anchor scroll clears fixed navbar */
#hero,
#deployment-model,
#capabilities,
#cta-band {
  scroll-margin-top: var(--navbar-height);
}

/* Section background alternation for visual depth */
.deployment-section {
  background: linear-gradient(
    180deg,
    var(--color-bg-elevated) 0%,
    var(--color-bg-base) 100%
  );
}

.cta-section {
  background: linear-gradient(
    180deg,
    var(--color-bg-base) 0%,
    rgba(10, 13, 22, 0.95) 100%
  );
}

/* Footer — footer-col-title spacing without inline styles */
.footer-col-title--spaced {
  margin-top: var(--space-8);
}

/* Section headings — prevent overflow on narrow viewports */
.section-heading,
.cta-heading {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Button focus-visible ring — accessibility */
.btn:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 3px;
}

/* Hero visual — suppress floating cards on very small screens */
@media (max-width: 420px) {
  .hv-card { display: none; }
  .hero-visual { height: 260px; }
  .hv-ai-strip { left: 0; right: 0; }
}

/* Subtle top separator between major sections */
.capabilities-section {
  border-top: 1px solid var(--color-border-subtle);
}

.cta-section {
  border-top: 1px solid var(--color-border-subtle);
}

/* Footer bottom bar — ensure breathing room */
.footer-bottom {
  padding-top: var(--space-8);
}


/* ============================================================
   25. Platform Page
   ============================================================ */

/* Anchor scroll offset for all platform sections */
#platform-hero,
#platform-architecture,
#platform-signals,
#platform-audiences,
#platform-deployment,
#platform-cta {
  scroll-margin-top: var(--navbar-height);
}

/* Anchor scroll offset for all solutions sections */
#solutions-hero,
#solution-apm,
#solution-business,
#solution-infra,
#solution-operations,
#solution-payments,
#solution-ai,
#solutions-cta {
  scroll-margin-top: var(--navbar-height);
}

/* Anchor scroll offset for all dashboards sections */
#dashboards-hero,
#dashboard-overview,
#dashboard-grid,
#dashboard-personas,
#dashboards-cta {
  scroll-margin-top: var(--navbar-height);
}


/* ============================================================
   25a. Platform Hero
   ============================================================ */

.platform-hero-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-24) var(--space-20);
  display: flex;
  align-items: center;
}

/* Ambient orbs */
.ph-orb {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
  filter: blur(100px);
  z-index: 0;
}

.ph-orb--cyan {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.10) 0%, transparent 70%);
  top: -100px;
  left: -80px;
}

.ph-orb--violet {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(123, 47, 255, 0.10) 0%, transparent 70%);
  bottom: -60px;
  right: -60px;
}

/* Subtle grid overlay — same pattern as homepage hero */
.ph-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
}

/* Centred content column */
.ph-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* Eyebrow */
.ph-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

.ph-eyebrow-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  box-shadow: 0 0 8px var(--color-brand-primary);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Heading */
.ph-heading {
  font-size: clamp(var(--font-size-2xl), 4.5vw, var(--font-size-4xl));
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  overflow-wrap: break-word;
}

/* Body */
.ph-body {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  max-width: 580px;
}

/* CTAs */
.ph-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Domain coverage strip */
.ph-domains {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  width: 100%;
}

.ph-domain {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ph-domain--ai {
  color: #a370ff;
  font-weight: var(--font-weight-semibold);
}

.ph-domain-sep {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .platform-hero-section {
    padding-block: var(--space-20) var(--space-16);
  }
}

@media (max-width: 560px) {
  .platform-hero-section {
    padding-block: var(--space-16) var(--space-12);
  }

  .ph-ctas {
    flex-direction: column;
    width: 100%;
  }

  .ph-ctas .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   25b. Platform Architecture Section
   ============================================================ */

.platform-architecture-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--color-bg-elevated) 0%,
    var(--color-bg-base) 100%
  );
  border-top: 1px solid var(--color-border-subtle);
}

/* Background orbs */
.pa-bg-orb {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
  filter: blur(120px);
  z-index: 0;
}

.pa-bg-orb--violet {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(123, 47, 255, 0.09) 0%, transparent 70%);
  top: -80px;
  right: -60px;
}

.pa-bg-orb--cyan {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.08) 0%, transparent 70%);
  bottom: -40px;
  left: -40px;
}

.platform-architecture-section .container {
  position: relative;
  z-index: 1;
}

/* --- Layer stack --- */
.pa-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 900px;
  margin-inline: auto;
}

/* --- Single layer --- */
.pa-layer {
  position: relative;
}

.pa-layer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-7) var(--space-8);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-base);
}

.pa-layer-inner:hover {
  border-color: rgba(0, 229, 255, 0.2);
}

/* Featured layer — AI/Correlation */
.pa-layer--featured .pa-layer-inner {
  border-color: rgba(123, 47, 255, 0.28);
  background: linear-gradient(
    145deg,
    rgba(123, 47, 255, 0.04) 0%,
    var(--color-bg-elevated) 60%
  );
  box-shadow: 0 0 40px rgba(123, 47, 255, 0.07);
}

.pa-layer--featured .pa-layer-inner:hover {
  border-color: rgba(123, 47, 255, 0.42);
}

/* Left group: number + title + desc */
.pa-layer-left {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  flex: 1;
  min-width: 0;
}

.pa-layer-num {
  flex-shrink: 0;
  min-width: 32px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
  padding-top: 3px;
}

.pa-layer-num--ai {
  color: #a370ff;
}

.pa-layer-label-group {
  flex: 1;
  min-width: 0;
}

.pa-layer-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  line-height: var(--line-height-snug);
}

.pa-ai-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  color: #c49eff;
  background: rgba(123, 47, 255, 0.1);
  border: 1px solid rgba(123, 47, 255, 0.22);
  border-radius: var(--radius-full);
  font-family: var(--font-family-mono);
}

.pa-layer-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
  max-width: 380px;
}

/* Right chip group */
.pa-layer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
  align-content: flex-start;
  flex-shrink: 0;
  max-width: 280px;
  padding-top: 2px;
}

/* Base chip */
.pa-chip {
  display: inline-flex;
  padding: 0.22rem 0.6rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.pa-chip--violet {
  color: #a370ff;
  background: rgba(123, 47, 255, 0.07);
  border-color: rgba(123, 47, 255, 0.16);
}

.pa-chip--mint {
  color: var(--color-brand-tertiary);
  background: rgba(0, 255, 157, 0.07);
  border-color: rgba(0, 255, 157, 0.16);
}

.pa-chip--ai {
  color: #c49eff;
  background: rgba(123, 47, 255, 0.09);
  border-color: rgba(123, 47, 255, 0.22);
  font-weight: var(--font-weight-semibold);
}

/* Connector between layers */
.pa-layer-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 28px;
  gap: 0;
  pointer-events: none;
}

.pa-connector-line {
  display: block;
  width: 1px;
  flex: 1;
  background: linear-gradient(to bottom, var(--color-border), rgba(0, 229, 255, 0.25));
}

.pa-connector-arrow {
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(0, 229, 255, 0.35);
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 860px) {
  .pa-layer-inner {
    flex-direction: column;
    gap: var(--space-5);
  }

  .pa-layer-chips {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .pa-layer-inner {
    padding: var(--space-6);
  }

  .pa-layer-left {
    gap: var(--space-4);
  }

  .pa-layer-num {
    display: none;
  }
}


/* ============================================================
   25c. Platform Signals Section
   ============================================================ */

.platform-signals-section {
  border-top: 1px solid var(--color-border-subtle);
}

/* 2-column group grid */
.ps-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* Individual group card */
.ps-group {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.ps-group:hover {
  border-color: rgba(0, 229, 255, 0.18);
  box-shadow: var(--glow-card);
}

/* Group header row */
.ps-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ps-group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.ps-group-icon svg {
  width: 17px;
  height: 17px;
}

.ps-group-icon--cyan   { background: rgba(0, 229, 255, 0.08);   color: var(--color-brand-primary);   border: 1px solid rgba(0, 229, 255, 0.15); }
.ps-group-icon--violet { background: rgba(123, 47, 255, 0.09);  color: #a370ff;                      border: 1px solid rgba(123, 47, 255, 0.18); }
.ps-group-icon--teal   { background: rgba(0, 188, 212, 0.08);   color: #4dd0e1;                      border: 1px solid rgba(0, 188, 212, 0.18); }
.ps-group-icon--mint   { background: rgba(0, 255, 157, 0.07);   color: var(--color-brand-tertiary);  border: 1px solid rgba(0, 255, 157, 0.16); }

.ps-group-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-normal);
}

/* Signal tiles inside group */
.ps-tiles {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ps-tile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.ps-tile-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-top: 5px;
}

.ps-tile-dot--cyan   { background: var(--color-brand-primary); box-shadow: 0 0 6px rgba(0, 229, 255, 0.5); }
.ps-tile-dot--violet { background: #a370ff;                    box-shadow: 0 0 6px rgba(163, 112, 255, 0.5); }
.ps-tile-dot--teal   { background: #4dd0e1;                    box-shadow: 0 0 6px rgba(77, 208, 225, 0.5); }
.ps-tile-dot--mint   { background: var(--color-brand-tertiary); box-shadow: 0 0 6px rgba(0, 255, 157, 0.5); }

.ps-tile-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.ps-tile-sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: var(--line-height-snug);
}

/* Responsive */
@media (max-width: 768px) {
  .ps-groups {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}


/* ============================================================
   25d. Platform Audiences Section
   ============================================================ */

.platform-audiences-section {
  border-top: 1px solid var(--color-border-subtle);
}

/* 4-col grid, last card spans 2 */
.paud-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.paud-card--wide {
  grid-column: span 2;
}

/* Card shell */
.paud-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.paud-card:hover {
  border-color: rgba(0, 229, 255, 0.18);
  box-shadow: var(--glow-card);
}

/* Card top row */
.paud-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.paud-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.paud-icon svg {
  width: 18px;
  height: 18px;
}

.paud-icon--cyan   { background: rgba(0, 229, 255, 0.08);   color: var(--color-brand-primary);   border: 1px solid rgba(0, 229, 255, 0.15); }
.paud-icon--violet { background: rgba(123, 47, 255, 0.09);  color: #a370ff;                      border: 1px solid rgba(123, 47, 255, 0.18); }
.paud-icon--teal   { background: rgba(0, 188, 212, 0.08);   color: #4dd0e1;                      border: 1px solid rgba(0, 188, 212, 0.18); }
.paud-icon--amber  { background: rgba(251, 191, 36, 0.08);  color: #fbbf24;                      border: 1px solid rgba(251, 191, 36, 0.18); }
.paud-icon--mint   { background: rgba(0, 255, 157, 0.07);   color: var(--color-brand-tertiary);  border: 1px solid rgba(0, 255, 157, 0.16); }

.paud-team {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Feature list */
.paud-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  flex: 1;
}

.paud-list li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.paud-list-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
}

.paud-list-label--see    { color: var(--color-brand-primary);   background: rgba(0, 229, 255, 0.08);   border: 1px solid rgba(0, 229, 255, 0.12); }
.paud-list-label--detect { color: #fbbf24;                      background: rgba(251, 191, 36, 0.08);  border: 1px solid rgba(251, 191, 36, 0.14); }
.paud-list-label--act    { color: var(--color-brand-tertiary);  background: rgba(0, 255, 157, 0.07);  border: 1px solid rgba(0, 255, 157, 0.14); }

/* Responsive */
@media (max-width: 1100px) {
  .paud-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .paud-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .paud-grid {
    grid-template-columns: 1fr;
  }

  .paud-card--wide {
    grid-column: span 1;
  }
}


/* ============================================================
   25e. Platform Deployment Section
   ============================================================ */

.platform-deployment-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--color-bg-base) 0%,
    var(--color-bg-elevated) 100%
  );
  border-top: 1px solid var(--color-border-subtle);
}

.pd-bg-orb {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(123, 47, 255, 0.07) 0%, transparent 70%);
  filter: blur(100px);
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

.platform-deployment-section .container {
  position: relative;
  z-index: 1;
}

/* Two-card row */
.pd-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

/* Deployment card */
.pd-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.pd-card--self-hosted:hover {
  border-color: rgba(123, 47, 255, 0.28);
  box-shadow: 0 0 40px rgba(123, 47, 255, 0.06);
}

.pd-card--saas:hover {
  border-color: rgba(0, 229, 255, 0.22);
  box-shadow: var(--glow-card);
}

/* Card header */
.pd-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pd-card-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.2rem 0.65rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  font-family: var(--font-family-mono);
}

.pd-card-badge--violet {
  color: #c49eff;
  background: rgba(123, 47, 255, 0.1);
  border: 1px solid rgba(123, 47, 255, 0.22);
}

.pd-card-badge--cyan {
  color: var(--color-brand-primary);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.18);
}

.pd-card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.pd-card-tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

/* Feature list */
.pd-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}

.pd-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

.pd-feature-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-brand-tertiary);
}

/* Best-fit footer */
.pd-card-footer {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pd-fit-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.pd-fit-value {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Guarantee strip */
.pd-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
}

.pd-guarantee-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.pd-guarantee-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-brand-primary);
}

.pd-guarantee-sep {
  width: 1px;
  height: 28px;
  background: var(--color-border-subtle);
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .pd-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pd-guarantee {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-6);
  }

  .pd-guarantee-sep {
    display: none;
  }
}


/* ============================================================
   25f. Platform CTA Section
   ============================================================ */

.platform-cta-section {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-base);
  border-top: 1px solid var(--color-border-subtle);
}

/* Background grid overlay */
.pcta-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.028) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* Background glow orbs */
.pcta-bg-orb {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: var(--radius-full);
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}

.pcta-bg-orb--left {
  background: radial-gradient(circle, rgba(123, 47, 255, 0.1) 0%, transparent 70%);
  bottom: -120px;
  left: -80px;
}

.pcta-bg-orb--right {
  background: radial-gradient(circle, rgba(0, 229, 255, 0.09) 0%, transparent 70%);
  top: -100px;
  right: -80px;
}

.platform-cta-section .container {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.pcta-inner {
  max-width: 680px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.pcta-label {
  display: inline-flex;
  padding: 0.25rem 0.8rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
  background: rgba(0, 229, 255, 0.07);
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: var(--radius-full);
  font-family: var(--font-family-mono);
}

.pcta-heading {
  font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-4xl));
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.pcta-body {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 520px;
}

.pcta-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.pcta-btn-primary {
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.22);
}

.pcta-reassurance {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: calc(var(--space-2) * -1);
}

/* Responsive */
@media (max-width: 560px) {
  .pcta-actions {
    flex-direction: column;
    width: 100%;
  }

  .pcta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   26. Solutions Page
   ============================================================ */


/* ============================================================
   26a. Solutions Hero
   ============================================================ */

.solutions-hero-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-16) var(--space-16);
  background: var(--color-bg-base);
}

/* Grid overlay */
.sh-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
}

/* Glow orbs */
.sh-bg-orb {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.sh-bg-orb--violet {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(123, 47, 255, 0.12) 0%, transparent 70%);
  bottom: -60px;
  right: -80px;
}

.sh-bg-orb--cyan {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.13) 0%, transparent 70%);
  top: -120px;
  left: -100px;
}

/* Horizontal accent rules */
.sh-bg-rule {
  display: none;
}

/* Content block */
.sh-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: var(--space-9);
  align-items: center;
}

.sh-copy {
  position: relative;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Eyebrow */
.sh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
  font-family: var(--font-family-mono);
}

.sh-eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  box-shadow: 0 0 8px var(--color-brand-primary);
  flex-shrink: 0;
}

/* Heading */
.sh-heading {
  font-size: clamp(var(--font-size-4xl), 6vw, 4.5rem);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

/* Body */
.sh-body {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 580px;
}

/* CTAs */
.sh-ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

.sh-cta-primary {
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.22);
}

.sh-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 640px;
}

.sh-summary-item {
  min-width: 0;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sh-summary-value {
  display: block;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.sh-summary-copy {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.sh-matrix {
  min-width: 0;
  padding: var(--space-7);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.02) 0%, rgba(10, 14, 24, 0.86) 45%, rgba(7, 10, 18, 0.96) 100%),
    var(--color-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 24px 80px rgba(0, 0, 0, 0.34);
}

.sh-matrix-head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.sh-matrix-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 0.28rem 0.8rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 229, 255, 0.16);
  background: rgba(0, 229, 255, 0.06);
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  font-family: var(--font-family-mono);
}

.sh-matrix-title {
  font-size: clamp(var(--font-size-xl), 2.6vw, 2rem);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.sh-matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.sh-matrix-card {
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.sh-matrix-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8); }
.sh-matrix-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78); }
.sh-matrix-card--teal { box-shadow: inset 3px 0 0 rgba(77, 208, 225, 0.78); }
.sh-matrix-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.8); }
.sh-matrix-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78); }
.sh-matrix-card--ai { box-shadow: inset 3px 0 0 rgba(123, 47, 255, 0.88); }

.sh-matrix-card-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.sh-matrix-card-title {
  margin-top: var(--space-3);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.sh-matrix-card-copy {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

/* Domain pills strip */
.sh-domains {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.sh-domain {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wide);
}

.sh-domain-sep {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .sh-layout {
    grid-template-columns: 1fr;
  }

  .sh-matrix-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .solutions-hero-section {
    padding-block: var(--space-12);
  }

  .sh-heading {
    font-size: clamp(var(--font-size-3xl), 8vw, var(--font-size-4xl));
  }

  .sh-body {
    font-size: var(--font-size-base);
  }

  .sh-matrix {
    padding: var(--space-6);
  }

  .sh-summary-strip {
    grid-template-columns: 1fr;
  }

  .sh-matrix-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .sh-ctas {
    flex-direction: column;
    width: 100%;
  }

  .sh-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .sh-domains {
    display: none;
  }
}


/* ============================================================
   26b. Solution Sections — Shared Layout
   ============================================================ */

/* Alternate background for even sections */
.sol-section--alt {
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Two-column layout: intro left, highlights right */
.sol-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.sol-layout--apm {
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
}

.sol-layout--reversed {
  direction: rtl;
}

.sol-layout--reversed > * {
  direction: ltr;
}

/* Section intro column */
.sol-intro {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sol-heading {
  font-size: clamp(var(--font-size-2xl), 3.5vw, var(--font-size-3xl));
}

.sol-subheading {
  font-size: var(--font-size-base);
  max-width: 420px;
}

.sol-learn-link {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* Scoped margin resets — prevent double-spacing inside flex col */
.sol-intro .section-label   { margin-bottom: 0; }
.sol-intro .section-heading { margin-bottom: 0; }

/* Highlights grid — stacked cards */
.sol-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sol-apm-board {
  display: grid;
  gap: var(--space-5);
}

.sol-apm-lead {
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background: rgba(9, 13, 23, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
}

.sol-apm-kicker {
  display: inline-flex;
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.sol-apm-body {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.sol-apm-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.sol-apm-metric {
  min-width: 0;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sol-apm-metric--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8); }
.sol-apm-metric--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78); }
.sol-apm-metric--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78); }

.sol-apm-metric-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.sol-apm-metric-value {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
}

.sol-highlights--apm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sol-business-board {
  display: grid;
  gap: var(--space-4);
}

.sol-business-lead,
.sol-business-foot {
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background: rgba(9, 13, 23, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
}

.sol-business-kicker,
.sol-business-foot-label {
  display: inline-flex;
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.sol-business-copy,
.sol-business-foot-copy {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.sol-business-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.sol-business-column {
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(13, 17, 31, 0.88) 0%, rgba(8, 12, 22, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 24px 70px rgba(0, 0, 0, 0.28);
}

.sol-business-column--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8), 0 24px 70px rgba(0, 0, 0, 0.28); }
.sol-business-column--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.82), 0 24px 70px rgba(0, 0, 0, 0.28); }
.sol-business-column--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82), 0 24px 70px rgba(0, 0, 0, 0.28); }

.sol-business-column-label {
  display: inline-flex;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.sol-business-column-title {
  margin-top: var(--space-3);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.sol-business-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.sol-business-list li {
  position: relative;
  padding-left: 1rem;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.sol-business-list li::before {
  content: '';
  position: absolute;
  top: 0.45rem;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.88;
}

.sol-card--wide {
  grid-column: 1 / -1;
}

/* Individual highlight card */
.sol-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.sol-section--alt .sol-card {
  background: var(--color-bg-base);
}

.sol-card:hover {
  border-color: rgba(0, 229, 255, 0.18);
  box-shadow: var(--glow-card);
}

/* Accent top-border variants */
.sol-card--accent-cyan  { border-top: 2px solid rgba(0, 229, 255, 0.4); }
.sol-card--accent-violet { border-top: 2px solid rgba(123, 47, 255, 0.4); }
.sol-card--accent-teal  { border-top: 2px solid rgba(0, 188, 212, 0.4); }

/* Card icon */
.sol-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  margin-top: 1px;
}

.sol-card-icon svg {
  width: 18px;
  height: 18px;
}

.sol-card-icon--cyan   { background: rgba(0, 229, 255, 0.08);   color: var(--color-brand-primary);   border: 1px solid rgba(0, 229, 255, 0.14); }
.sol-card-icon--violet { background: rgba(123, 47, 255, 0.09);  color: #a370ff;                      border: 1px solid rgba(123, 47, 255, 0.16); }
.sol-card-icon--teal   { background: rgba(0, 188, 212, 0.08);   color: #4dd0e1;                      border: 1px solid rgba(0, 188, 212, 0.16); }
.sol-card-icon--amber  { background: rgba(251, 191, 36, 0.08);  color: #fbbf24;                      border: 1px solid rgba(251, 191, 36, 0.16); }
.sol-card-icon--mint   { background: rgba(0, 255, 157, 0.07);   color: var(--color-brand-tertiary);  border: 1px solid rgba(0, 255, 157, 0.14); }

/* Card body */
.sol-card-body {
  flex: 1;
  min-width: 0;
}

.sol-card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  line-height: var(--line-height-snug);
  letter-spacing: normal;
}

.sol-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

/* Responsive */
@media (max-width: 960px) {
  .sol-layout,
  .sol-layout--reversed {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: var(--space-10);
  }

  .sol-intro {
    position: static;
  }

  .sol-subheading {
    max-width: 100%;
  }

  .sol-apm-snapshot,
  .sol-highlights--apm,
  .sol-business-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sol-section {
    padding-block: var(--space-16);
  }

  .sh-summary-item,
  .sh-matrix-card,
  .sol-apm-lead,
  .sol-apm-metric,
  .sol-business-lead,
  .sol-business-column,
  .sol-business-foot {
    padding: var(--space-5);
  }
}

@media (max-width: 640px) {
  .sol-card {
    padding: var(--space-5);
  }
}

@media (max-width: 480px) {
  .sol-section {
    padding-block: var(--space-12);
  }
}

/* Per-section accent colour on intro label dash */
.solution-business-section .section-label::before   { background: #a370ff; }
.solution-infra-section .section-label::before      { background: #4dd0e1; }
.solution-operations-section .section-label::before { background: #fbbf24; }
.solution-payments-section .section-label::before   { background: var(--color-brand-tertiary); }

/* Section intro meta strip: audience + layer context */
.sol-meta-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: calc(var(--space-1) * -1);
}

.sol-meta-tag {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

.sol-meta-sep {
  font-size: var(--font-size-xs);
  color: var(--color-border);
  line-height: 1;
}


/* ============================================================
   26c. Matrix AI Solution Section
   ============================================================ */

.sol-section--ai {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--color-bg-elevated) 0%,
    var(--color-bg-base) 100%
  );
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* AI section orbs */
.sai-bg-orb {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}

.sai-bg-orb--violet {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(123, 47, 255, 0.09) 0%, transparent 70%);
  top: -120px;
  right: -80px;
}

.sai-bg-orb--cyan {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 70%);
  bottom: -60px;
  left: -60px;
}

.sol-section--ai .container {
  position: relative;
  z-index: 1;
}

/* 5-card grid — 6-col base for centred last row */
.sai-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-5);
}

/* First 3 cards each span 2 of 6 columns */
.sai-grid .sai-card {
  grid-column: span 2;
}

/* Cards 4 & 5: centred in the last row (cols 2-4 and 4-6) */
.sai-grid .sai-card:nth-child(4) {
  grid-column: 2 / 4;
}

.sai-grid .sai-card:nth-child(5) {
  grid-column: 4 / 6;
}

/* Individual AI card */
.sai-card {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.sai-card:hover {
  border-color: rgba(123, 47, 255, 0.28);
  box-shadow: 0 0 36px rgba(123, 47, 255, 0.07);
}

/* Step glyph watermark */
.sai-card-glyph {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  font-family: var(--font-family-mono);
  color: rgba(255, 255, 255, 0.045);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Card icon */
.sai-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.sai-card-icon svg {
  width: 18px;
  height: 18px;
}

.sai-card-icon--violet { background: rgba(123, 47, 255, 0.09);  color: #a370ff;                      border: 1px solid rgba(123, 47, 255, 0.18); }
.sai-card-icon--cyan   { background: rgba(0, 229, 255, 0.08);   color: var(--color-brand-primary);   border: 1px solid rgba(0, 229, 255, 0.14); }
.sai-card-icon--teal   { background: rgba(0, 188, 212, 0.08);   color: #4dd0e1;                      border: 1px solid rgba(0, 188, 212, 0.16); }
.sai-card-icon--mint   { background: rgba(0, 255, 157, 0.07);   color: var(--color-brand-tertiary);  border: 1px solid rgba(0, 255, 157, 0.14); }
.sai-card-icon--amber  { background: rgba(251, 191, 36, 0.08);  color: #fbbf24;                      border: 1px solid rgba(251, 191, 36, 0.16); }

.sai-card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
  margin: 0;
}

.sai-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
  flex: 1;
}

/* Responsive */
@media (max-width: 960px) {
  .sai-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sai-grid .sai-card,
  .sai-grid .sai-card:nth-child(4),
  .sai-grid .sai-card:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 560px) {
  .sai-grid {
    grid-template-columns: 1fr;
  }

  .sai-grid .sai-card {
    grid-column: span 1;
  }
}


/* ============================================================
   26d. Solutions CTA Section
   ============================================================ */

.solutions-cta-section {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-base);
  border-top: 1px solid var(--color-border-subtle);
}

/* CTA grid overlay */
.scta-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.026) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* CTA orbs */
.scta-bg-orb {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: var(--radius-full);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.scta-bg-orb--left {
  background: radial-gradient(circle, rgba(123, 47, 255, 0.09) 0%, transparent 70%);
  bottom: -100px;
  left: -80px;
}

.scta-bg-orb--right {
  background: radial-gradient(circle, rgba(0, 229, 255, 0.08) 0%, transparent 70%);
  top: -80px;
  right: -60px;
}

.solutions-cta-section .container {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.scta-inner {
  max-width: 680px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.scta-label {
  display: inline-flex;
  padding: 0.25rem 0.8rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
  background: rgba(0, 229, 255, 0.07);
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: var(--radius-full);
  font-family: var(--font-family-mono);
}

.scta-heading {
  font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-4xl));
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.scta-body {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 520px;
}

.scta-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.scta-btn-primary {
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.22);
}

.scta-reassurance {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: calc(var(--space-2) * -1);
}

@media (max-width: 560px) {
  .scta-actions {
    flex-direction: column;
    width: 100%;
  }

  .scta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   27. Dashboards Page
   ============================================================ */


/* ============================================================
   27a. Dashboards Hero
   ============================================================ */

.dashboards-hero-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-16);
  background: var(--color-bg-base);
}

.dh-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
}

.dh-bg-orb {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.dh-bg-orb--cyan {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.13) 0%, transparent 70%);
  top: -120px;
  left: -100px;
}

.dh-bg-orb--violet {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(123, 47, 255, 0.12) 0%, transparent 70%);
  bottom: -60px;
  right: -80px;
}

.dh-bg-rule {
  display: none;
}

.dh-shell {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
}

.dh-header {
  max-width: 920px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  text-align: center;
  align-items: center;
}

.dh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
  font-family: var(--font-family-mono);
}

.dh-eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  box-shadow: 0 0 8px var(--color-brand-primary);
  flex-shrink: 0;
}

.dh-heading {
  font-size: clamp(var(--font-size-4xl), 6vw, 4.75rem);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.dh-body {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 700px;
}

.dh-ctas {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.dh-cta-primary {
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.22);
}

.dh-domains {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.dh-domain {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wide);
}

.dh-domain-sep {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  flex-shrink: 0;
}

.dh-preview-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: 1120px;
  margin-inline: auto;
}

.dh-preview-card:nth-child(1),
.dh-preview-card:nth-child(4) {
  grid-column: span 5;
}

.dh-preview-card:nth-child(2),
.dh-preview-card:nth-child(3) {
  grid-column: span 7;
}

.dh-preview-card {
  min-width: 0;
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.02) 0%, rgba(10, 14, 24, 0.86) 45%, rgba(7, 10, 18, 0.96) 100%),
    var(--color-bg-elevated);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 24px 64px rgba(0, 0, 0, 0.24);
}

.dh-preview-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8), 0 24px 64px rgba(0, 0, 0, 0.24); }
.dh-preview-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.82), 0 24px 64px rgba(0, 0, 0, 0.24); }
.dh-preview-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82), 0 24px 64px rgba(0, 0, 0, 0.24); }
.dh-preview-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78), 0 24px 64px rgba(0, 0, 0, 0.24); }

.dh-preview-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.dh-preview-title {
  margin-top: var(--space-3);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.dh-preview-copy {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.dh-footer-note {
  display: grid;
  gap: var(--space-2);
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.dh-footer-note-label {
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.dh-footer-note-copy {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

@media (max-width: 1024px) {
  .dh-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dh-preview-card:nth-child(1),
  .dh-preview-card:nth-child(2),
  .dh-preview-card:nth-child(3),
  .dh-preview-card:nth-child(4) {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .dashboards-hero-section {
    padding-block: var(--space-12);
  }

  .dh-heading {
    font-size: clamp(var(--font-size-3xl), 9vw, var(--font-size-4xl));
  }

  .dh-body {
    font-size: var(--font-size-base);
  }

  .dh-preview-card {
    padding: var(--space-5);
  }
}

@media (max-width: 560px) {
  .dh-ctas {
    flex-direction: column;
    width: 100%;
  }

  .dh-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .dh-domains {
    display: none;
  }

  .dh-preview-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   27b. Dashboard Overview
   ============================================================ */

.dashboard-overview-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);
  border-bottom: 1px solid var(--color-border-subtle);
}

.dov-bg-orb {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

.dov-bg-orb--left {
  width: 460px;
  height: 460px;
  left: -80px;
  bottom: -120px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 72%);
}

.dov-bg-orb--right {
  width: 520px;
  height: 520px;
  right: -120px;
  top: -140px;
  background: radial-gradient(circle, rgba(123, 47, 255, 0.09) 0%, transparent 72%);
}

.dov-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
  gap: var(--space-12);
  align-items: start;
}

.dov-copy {
  display: flex;
  flex-direction: column;
}

.dov-heading {
  max-width: 680px;
}

.dov-subheading {
  max-width: 640px;
}

.dov-statement {
  margin-top: var(--space-8);
  padding: var(--space-7);
  border-radius: var(--radius-2xl);
  background: rgba(9, 13, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
}

.dov-statement-kicker {
  display: inline-flex;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

.dov-statement-body {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.dov-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.dov-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.48rem 0.9rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

.dov-board {
  position: relative;
  display: grid;
  gap: var(--space-4);
}

.dov-board-intro {
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background: rgba(9, 13, 23, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
}

.dov-board-label {
  display: inline-flex;
  margin-bottom: var(--space-2);
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  font-family: var(--font-family-mono);
}

.dov-board-copy {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.dov-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.dov-lens {
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(13, 17, 31, 0.88) 0%, rgba(8, 12, 22, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 24px 70px rgba(0, 0, 0, 0.28);
}

.dov-lens--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8), 0 24px 70px rgba(0, 0, 0, 0.28); }
.dov-lens--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.82), 0 24px 70px rgba(0, 0, 0, 0.28); }
.dov-lens--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82), 0 24px 70px rgba(0, 0, 0, 0.28); }

.dov-lens-kicker {
  display: inline-flex;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.dov-lens-title {
  margin-top: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.dov-lens-meta {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-brand-primary);
  line-height: var(--line-height-relaxed);
}

.dov-lens-copy {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

@media (max-width: 1024px) {
  .dov-shell {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .dov-board-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dov-statement,
  .dov-board-intro,
  .dov-lens {
    padding: var(--space-6);
  }
}

@media (max-width: 560px) {
  .dov-flow::before {
    left: 24px;
    top: 104px;
    bottom: 40px;
  }

  .dov-node {
    margin-left: var(--space-4);
    padding-left: var(--space-5);
  }

  .dov-tags {
    gap: var(--space-2);
  }
}


/* ============================================================
   27c. Dashboard Grid
   ============================================================ */

.dashboard-grid-section {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-base);
  border-bottom: 1px solid var(--color-border-subtle);
}

.dg-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.022) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 100%);
}

.dg-bg-orb {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

.dg-bg-orb--left {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 72%);
  top: 120px;
  left: -120px;
}

.dg-bg-orb--right {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 72%);
  right: -140px;
  bottom: -120px;
}

.dashboard-grid-section .container {
  position: relative;
  z-index: 1;
}

.dg-header {
  max-width: 760px;
  margin-inline: auto;
}

.dg-trackboard {
  display: grid;
  gap: var(--space-4);
  max-width: 1100px;
  margin: 0 auto var(--space-8);
}

.dg-track-lead {
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background: rgba(9, 13, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
}

.dg-track-lead-label {
  display: inline-flex;
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.dg-track-lead-copy {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.dg-track-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.dg-track {
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(13, 17, 31, 0.88) 0%, rgba(8, 12, 22, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 24px 70px rgba(0, 0, 0, 0.28);
}

.dg-track--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8), 0 24px 70px rgba(0, 0, 0, 0.28); }
.dg-track--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.82), 0 24px 70px rgba(0, 0, 0, 0.28); }
.dg-track--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82), 0 24px 70px rgba(0, 0, 0, 0.28); }

.dg-track-label {
  display: inline-flex;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.dg-track-title {
  margin-top: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.dg-track-copy {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.dg-heading {
  max-width: 720px;
  margin-inline: auto;
}

.dg-subheading {
  max-width: 620px;
}

.dg-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.dg-card {
  grid-column: span 4;
  position: relative;
  min-width: 0;
}

.dg-card--featured {
  grid-column: 1 / -1;
}

.dg-card-shell {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.02) 0%, rgba(10, 13, 21, 0.9) 100%),
    var(--color-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 18px 55px rgba(0, 0, 0, 0.2);
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base);
  overflow: hidden;
}

.dg-card-shell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0.5;
}

.dg-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-2xl) - 1px);
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 42%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.dg-card:hover .dg-card-shell {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 70px rgba(0, 0, 0, 0.28);
}

.dg-card:hover::after {
  opacity: 1;
}

.dg-card--featured .dg-card-shell {
  padding: var(--space-7);
}

.dg-card--featured .dg-highlights {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dg-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.dg-card-head-copy {
  min-width: 0;
  flex: 1;
}

.dg-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
}

.dg-card-icon svg {
  width: 20px;
  height: 20px;
}

.dg-card-badge {
  align-self: flex-start;
  display: inline-flex;
  padding: 0.34rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.dg-card-title {
  font-size: clamp(var(--font-size-lg), 2.2vw, var(--font-size-xl));
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-2);
}

.dg-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.dg-card-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-1);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dg-card-meta-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.dg-card-meta-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.dg-highlights {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  margin: auto 0 0;
  padding: 0;
}

.dg-highlights li {
  position: relative;
  min-height: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 10px);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.dg-highlights li::before {
  content: '';
  position: absolute;
  top: 15px;
  left: var(--space-4);
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.9;
}

.dg-card--violet {
  color: #a370ff;
}

.dg-card--violet .dg-card-shell {
  border-color: rgba(163, 112, 255, 0.18);
}

.dg-card--violet:hover .dg-card-shell {
  border-color: rgba(163, 112, 255, 0.32);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 70px rgba(93, 52, 160, 0.18);
}

.dg-card--cyan {
  color: var(--color-brand-primary);
}

.dg-card--cyan .dg-card-shell {
  border-color: rgba(0, 229, 255, 0.16);
}

.dg-card--cyan:hover .dg-card-shell {
  border-color: rgba(0, 229, 255, 0.28);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 70px rgba(0, 229, 255, 0.14);
}

.dg-card--teal {
  color: #4dd0e1;
}

.dg-card--teal .dg-card-shell {
  border-color: rgba(77, 208, 225, 0.18);
}

.dg-card--teal:hover .dg-card-shell {
  border-color: rgba(77, 208, 225, 0.3);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 70px rgba(77, 208, 225, 0.14);
}

.dg-card--mint {
  color: var(--color-brand-tertiary);
}

.dg-card--mint .dg-card-shell {
  border-color: rgba(0, 255, 157, 0.16);
}

.dg-card--mint:hover .dg-card-shell {
  border-color: rgba(0, 255, 157, 0.28);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 70px rgba(0, 255, 157, 0.13);
}

.dg-card--amber {
  color: #fbbf24;
}

.dg-card--amber .dg-card-shell {
  border-color: rgba(251, 191, 36, 0.18);
}

.dg-card--amber:hover .dg-card-shell {
  border-color: rgba(251, 191, 36, 0.3);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 70px rgba(251, 191, 36, 0.14);
}

.dg-card .dg-card-title,
.dg-card .dg-card-desc,
.dg-card .dg-card-meta-label,
.dg-card .dg-card-meta-value,
.dg-card .dg-highlights li,
.dg-card .dg-card-badge {
  color: inherit;
}

.dg-card .dg-card-title,
.dg-card .dg-card-meta-value {
  color: var(--color-text-primary);
}

.dg-card .dg-card-desc,
.dg-card .dg-highlights li,
.dg-card .dg-card-badge,
.dg-card .dg-card-meta-label {
  color: color-mix(in srgb, currentColor 28%, var(--color-text-secondary));
}

@media (max-width: 1120px) {
  .dg-track-grid {
    grid-template-columns: 1fr;
  }

  .dg-card {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .dh-preview-card,
  .dov-board-intro,
  .dov-lens,
  .dg-track-lead,
  .dg-track {
    padding: var(--space-5);
  }

  .dg-card,
  .dg-card--featured {
    grid-column: 1 / -1;
  }

  .dg-card-shell,
  .dg-card--featured .dg-card-shell {
    padding: var(--space-5);
  }

  .dg-card--featured .dg-highlights {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .dg-card-head {
    flex-wrap: wrap;
  }

  .dg-card-badge {
    margin-left: 56px;
  }
}


/* ============================================================
   27d. Dashboard Personas
   ============================================================ */

.dashboard-personas-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.dp-bg-orb {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

.dp-bg-orb--left {
  width: 460px;
  height: 460px;
  left: -120px;
  top: 80px;
  background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 72%);
}

.dp-bg-orb--right {
  width: 440px;
  height: 440px;
  right: -120px;
  bottom: -100px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 72%);
}

.dashboard-personas-section .container {
  position: relative;
  z-index: 1;
}

.dp-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-12);
  align-items: start;
}

.dp-intro {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-8));
}

.dp-heading {
  max-width: 560px;
}

.dp-subheading {
  max-width: 520px;
}

.dp-bridge {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background: rgba(10, 14, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
}

.dp-bridge-label {
  display: inline-flex;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

.dp-bridge-copy {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.dp-card {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.02) 0%, rgba(10, 13, 21, 0.92) 100%),
    var(--color-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 18px 50px rgba(0, 0, 0, 0.18);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.dp-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 65px rgba(0, 0, 0, 0.24);
}

.dp-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.dp-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
}

.dp-card-icon svg {
  width: 18px;
  height: 18px;
}

.dp-card-role {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-2);
}

.dp-card-dashboards {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: color-mix(in srgb, currentColor 48%, var(--color-text-secondary));
  letter-spacing: 0.015em;
}

.dp-card-copy {
  margin-top: var(--space-5);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.dp-card-action {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dp-card-action-label {
  display: inline-flex;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 68%, white);
}

.dp-card-action-copy {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.dp-card--violet {
  color: #a370ff;
}

.dp-card--violet:hover {
  border-color: rgba(163, 112, 255, 0.28);
}

.dp-card--cyan {
  color: var(--color-brand-primary);
}

.dp-card--cyan:hover {
  border-color: rgba(0, 229, 255, 0.24);
}

.dp-card--teal {
  color: #4dd0e1;
}

.dp-card--teal:hover {
  border-color: rgba(77, 208, 225, 0.26);
}

.dp-card--mint {
  color: var(--color-brand-tertiary);
}

.dp-card--mint:hover {
  border-color: rgba(0, 255, 157, 0.24);
}

.dp-card--amber {
  color: #fbbf24;
}

.dp-card--amber:hover {
  border-color: rgba(251, 191, 36, 0.26);
}

@media (max-width: 1120px) {
  .dp-shell {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .dp-intro {
    position: static;
  }
}

@media (max-width: 768px) {
  .dp-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .dp-card {
    padding: var(--space-5);
  }

  .dp-card-head {
    gap: var(--space-3);
  }
}


/* ============================================================
   27e. Dashboards CTA
   ============================================================ */

.dashboards-cta-section {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-base);
}

.dcta-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.026) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

.dcta-bg-orb {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: var(--radius-full);
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}

.dcta-bg-orb--left {
  background: radial-gradient(circle, rgba(123, 47, 255, 0.1) 0%, transparent 70%);
  bottom: -140px;
  left: -100px;
}

.dcta-bg-orb--right {
  background: radial-gradient(circle, rgba(0, 229, 255, 0.09) 0%, transparent 70%);
  top: -120px;
  right: -90px;
}

.dashboards-cta-section .container {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.dcta-inner {
  max-width: 700px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-12) var(--space-10);
  border-radius: var(--radius-2xl);
  background: rgba(12, 16, 28, 0.58);
  border: 1px solid rgba(0, 229, 255, 0.1);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 6px 70px rgba(0, 0, 0, 0.38);
}

.dcta-label {
  display: inline-flex;
  padding: 0.25rem 0.8rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
  background: rgba(0, 229, 255, 0.07);
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: var(--radius-full);
  font-family: var(--font-family-mono);
}

.dcta-heading {
  font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-4xl));
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.dcta-body {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 560px;
}

.dcta-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.dcta-btn-primary {
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.22);
}

.dcta-reassurance {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: calc(var(--space-2) * -1);
}

@media (max-width: 768px) {
  .dcta-inner {
    padding: var(--space-10) var(--space-8);
  }
}

@media (max-width: 560px) {
  .dcta-inner {
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-xl);
  }

  .dcta-actions {
    flex-direction: column;
    width: 100%;
  }

  .dcta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


  /* ============================================================
     28. Use Cases Page
     ============================================================ */

  /* Anchor scroll offset for all use cases sections */
  #usecases-hero,
  #usecases-overview,
  #usecases-fintech,
  #usecases-ops,
  #usecases-enterprise,
  #usecases-cta {
    scroll-margin-top: var(--navbar-height);
  }


  /* ============================================================
     28a. Use Cases Hero
     ============================================================ */

  .usecases-hero-section {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-16);
    background: var(--color-bg-base);
  }

  .uc-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
  }

  .uc-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
  }

  .uc-bg-orb--cyan {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.13) 0%, transparent 70%);
    top: -120px;
    left: -100px;
  }

  .uc-bg-orb--violet {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.12) 0%, transparent 70%);
    bottom: -60px;
    right: -80px;
  }

  .uc-bg-rule {
    display: none;
  }

  .uc-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(320px, 0.88fr) minmax(0, 1.12fr);
    gap: var(--space-12);
    align-items: center;
  }

  .uc-route-shell {
    position: relative;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.02) 0%, rgba(10, 14, 24, 0.86) 45%, rgba(7, 10, 18, 0.96) 100%),
      var(--color-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 80px rgba(0, 0, 0, 0.34);
  }

  .uc-route-topline {
    display: inline-flex;
    padding: 0.28rem 0.8rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 229, 255, 0.16);
    background: rgba(0, 229, 255, 0.06);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .uc-route-list {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-5);
  }

  .uc-route-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
  }

  .uc-route-step--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8); }
  .uc-route-step--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.82); }
  .uc-route-step--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78); }

  .uc-route-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
  }

  .uc-route-title {
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .uc-route-copy {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .uc-route-summary {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .uc-route-summary-label {
    display: block;
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .uc-route-summary-copy {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .uc-copy {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
  }

  .uc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    color: var(--color-brand-primary);
    font-family: var(--font-family-mono);
  }

  .uc-eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    box-shadow: 0 0 8px var(--color-brand-primary);
    flex-shrink: 0;
  }

  .uc-heading {
    font-size: clamp(var(--font-size-4xl), 6vw, 4.5rem);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
  }

  .uc-body {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 590px;
  }

  .uc-ctas {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .uc-cta-primary {
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.22);
  }

  .uc-domains {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
  }

  .uc-domain {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-wide);
  }

  .uc-domain-sep {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    flex-shrink: 0;
  }

  @media (max-width: 1024px) {
    .uc-layout {
      grid-template-columns: 1fr;
      gap: var(--space-10);
    }
  }

  @media (max-width: 768px) {
    .usecases-hero-section {
      padding-block: var(--space-12);
    }

    .uc-heading {
      font-size: clamp(var(--font-size-3xl), 9vw, var(--font-size-4xl));
    }

    .uc-body {
      font-size: var(--font-size-base);
    }

    .uc-route-shell {
      padding: var(--space-6);
    }
  }

  @media (max-width: 560px) {
    .uc-ctas {
      flex-direction: column;
      width: 100%;
    }

    .uc-ctas .btn {
      width: 100%;
      justify-content: center;
    }

    .uc-domains {
      display: none;
    }

    .uc-route-step {
      padding: var(--space-4);
    }
  }


  /* ============================================================
     28b. Use Cases Overview
     ============================================================ */

  .usecases-overview-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .uco-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .uco-bg-orb--left {
    width: 460px;
    height: 460px;
    left: -80px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 72%);
  }

  .uco-bg-orb--right {
    width: 520px;
    height: 520px;
    right: -120px;
    top: -140px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.09) 0%, transparent 72%);
  }

  .uco-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
    gap: var(--space-12);
    align-items: start;
  }

  .uco-copy {
    display: flex;
    flex-direction: column;
  }

  .uco-heading {
    max-width: 700px;
  }

  .uco-subheading {
    max-width: 640px;
  }

  .uco-statement {
    margin-top: var(--space-8);
    padding: var(--space-7);
    border-radius: var(--radius-2xl);
    background: rgba(9, 13, 23, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  }

  .uco-statement-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    color: var(--color-brand-primary);
  }

  .uco-statement-body {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
  }

  .uco-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .uco-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.48rem 0.9rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
  }

  .uco-fit {
    display: grid;
    gap: var(--space-4);
  }

  .uco-fit-lead {
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    background: rgba(9, 13, 23, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  }

  .uco-fit-label {
    display: inline-flex;
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .uco-fit-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .uco-fit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .uco-fit-card {
    min-width: 0;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.88) 0%, rgba(8, 12, 22, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 70px rgba(0, 0, 0, 0.28);
  }

  .uco-fit-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8), 0 24px 70px rgba(0, 0, 0, 0.28); }
  .uco-fit-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.82), 0 24px 70px rgba(0, 0, 0, 0.28); }
  .uco-fit-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82), 0 24px 70px rgba(0, 0, 0, 0.28); }

  .uco-fit-card-kicker {
    display: inline-flex;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .uco-fit-card-title {
    margin-top: var(--space-3);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-snug);
  }

  .uco-fit-card-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .uco-fit-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: 0.02em;
  }

  .uco-fit-footer-sep {
    width: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--color-border);
  }

  @media (max-width: 1024px) {
    .uco-shell {
      grid-template-columns: 1fr;
      gap: var(--space-10);
    }

    .uco-fit-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .uco-statement,
    .uco-fit-lead,
    .uco-fit-card {
      padding: var(--space-6);
    }
  }

  @media (max-width: 560px) {
    .uco-tags {
      gap: var(--space-2);
    }
  }


  /* ============================================================
     28c. Use Case Sections
     ============================================================ */

  .usecase-section--alt {
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .ucs-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
    gap: var(--space-16);
    align-items: start;
  }

  .ucs-layout--reversed {
    direction: rtl;
  }

  .ucs-layout--reversed > * {
    direction: ltr;
  }

  .ucs-intro {
    position: sticky;
    top: calc(var(--navbar-height) + var(--space-8));
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .ucs-intro .section-label,
  .ucs-intro .section-heading {
    margin-bottom: 0;
  }

  .ucs-heading {
    font-size: clamp(var(--font-size-2xl), 3.6vw, var(--font-size-3xl));
  }

  .ucs-subheading {
    max-width: 430px;
  }

  .ucs-meta-strip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: calc(var(--space-1) * -1);
  }

  .ucs-meta-tag {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
  }

  .ucs-meta-sep {
    font-size: var(--font-size-xs);
    color: var(--color-border);
    line-height: 1;
  }

  .ucs-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .ucs-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-6);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
  }

  .usecase-section--alt .ucs-card {
    background: var(--color-bg-base);
  }

  .ucs-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 229, 255, 0.16);
    box-shadow: var(--glow-card);
  }

  .ucs-card--cyan { border-top: 2px solid rgba(0, 229, 255, 0.38); }
  .ucs-card--violet { border-top: 2px solid rgba(123, 47, 255, 0.4); }
  .ucs-card--teal { border-top: 2px solid rgba(77, 208, 225, 0.38); }
  .ucs-card--mint { border-top: 2px solid rgba(0, 255, 157, 0.36); }
  .ucs-card--amber { border-top: 2px solid rgba(251, 191, 36, 0.4); }

  .ucs-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .ucs-card-icon svg {
    width: 18px;
    height: 18px;
  }

  .ucs-card-icon--cyan { background: rgba(0, 229, 255, 0.08); color: var(--color-brand-primary); border: 1px solid rgba(0, 229, 255, 0.14); }
  .ucs-card-icon--violet { background: rgba(123, 47, 255, 0.09); color: #a370ff; border: 1px solid rgba(123, 47, 255, 0.16); }
  .ucs-card-icon--teal { background: rgba(0, 188, 212, 0.08); color: #4dd0e1; border: 1px solid rgba(0, 188, 212, 0.16); }
  .ucs-card-icon--mint { background: rgba(0, 255, 157, 0.07); color: var(--color-brand-tertiary); border: 1px solid rgba(0, 255, 157, 0.14); }
  .ucs-card-icon--amber { background: rgba(251, 191, 36, 0.08); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.16); }

  .ucs-card-body {
    flex: 1;
    min-width: 0;
  }

  .ucs-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
    line-height: var(--line-height-snug);
  }

  .ucs-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
  }

  .ucs-card-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
  }

  .ucs-card-list li {
    position: relative;
    padding-left: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
  }

  .ucs-card-list li::before {
    content: '';
    position: absolute;
    top: 0.42rem;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    background: currentColor;
    opacity: 0.85;
  }

  .usecases-ops-section .section-label::before {
    background: #fbbf24;
  }

  .usecases-enterprise-section .section-label::before {
    background: #4dd0e1;
  }

  .ucs-flow-board {
    display: grid;
    gap: var(--space-4);
  }

  .ucs-flow-lead,
  .ucs-flow-footer {
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    background: rgba(9, 13, 23, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  }

  .ucs-flow-lead-label,
  .ucs-flow-footer-label {
    display: inline-flex;
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .ucs-flow-lead-copy,
  .ucs-flow-footer-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .ucs-flow-list {
    display: grid;
    gap: var(--space-4);
  }

  .ucs-flow-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
  }

  .ucs-flow-step--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.82); }
  .ucs-flow-step--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78); }
  .ucs-flow-step--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82); }
  .ucs-flow-step--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8); }

  .ucs-flow-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
  }

  .ucs-flow-step-title {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: var(--line-height-snug);
  }

  .ucs-flow-step-copy {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  @media (max-width: 960px) {
    .ucs-layout,
    .ucs-layout--reversed {
      grid-template-columns: 1fr;
      direction: ltr;
      gap: var(--space-10);
    }

    .ucs-intro {
      position: static;
    }

    .ucs-subheading {
      max-width: 100%;
    }
  }

  @media (max-width: 768px) {
    .uc-route-shell,
    .uco-fit-lead,
    .uco-fit-card,
    .ucs-flow-lead,
    .ucs-flow-step,
    .ucs-flow-footer {
      padding: var(--space-5);
    }

    .ucs-highlights {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 640px) {
    .ucs-card {
      padding: var(--space-5);
    }
  }


  /* ============================================================
     28d. Use Cases CTA
     ============================================================ */

  .usecases-cta-section {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-base);
    border-top: 1px solid var(--color-border-subtle);
  }

  .ucta-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.026) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.026) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
  }

  .ucta-bg-orb {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: var(--radius-full);
    filter: blur(110px);
    pointer-events: none;
    z-index: 0;
  }

  .ucta-bg-orb--left {
    background: radial-gradient(circle, rgba(123, 47, 255, 0.1) 0%, transparent 70%);
    bottom: -140px;
    left: -100px;
  }

  .ucta-bg-orb--right {
    background: radial-gradient(circle, rgba(0, 229, 255, 0.09) 0%, transparent 70%);
    top: -120px;
    right: -90px;
  }

  .usecases-cta-section .container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
  }

  .ucta-inner {
    max-width: 700px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-12) var(--space-10);
    border-radius: var(--radius-2xl);
    background: rgba(12, 16, 28, 0.58);
    border: 1px solid rgba(0, 229, 255, 0.1);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 6px 70px rgba(0, 0, 0, 0.38);
  }

  .ucta-label {
    display: inline-flex;
    padding: 0.25rem 0.8rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    color: var(--color-brand-primary);
    background: rgba(0, 229, 255, 0.07);
    border: 1px solid rgba(0, 229, 255, 0.16);
    border-radius: var(--radius-full);
    font-family: var(--font-family-mono);
  }

  .ucta-heading {
    font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-4xl));
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
  }

  .ucta-body {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 560px;
  }

  .ucta-actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
  }

  .ucta-btn-primary {
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.22);
  }

  .ucta-reassurance {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: calc(var(--space-2) * -1);
  }

  @media (max-width: 768px) {
    .ucta-inner {
      padding: var(--space-10) var(--space-8);
    }
  }

  @media (max-width: 560px) {
    .ucta-inner {
      padding: var(--space-8) var(--space-6);
      border-radius: var(--radius-xl);
    }

    .ucta-actions {
      flex-direction: column;
      width: 100%;
    }

    .ucta-actions .btn {
      width: 100%;
      justify-content: center;
    }
  }


  /* ============================================================
     29. About Page
     ============================================================ */

  /* Anchor scroll offset for all about sections */
  #about-hero,
  #about-matrix,
  #about-idreambiz,
  #about-ecosystem,
  #about-trust,
  #about-cta {
    scroll-margin-top: var(--navbar-height);
  }


  /* ============================================================
     29a. About Hero
     ============================================================ */

  .about-hero-section {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-16);
    background: var(--color-bg-base);
  }

  .ab-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
  }

  .ab-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
  }

  .ab-bg-orb--cyan {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.13) 0%, transparent 70%);
    top: -120px;
    left: -100px;
  }

  .ab-bg-orb--violet {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.12) 0%, transparent 70%);
    bottom: -60px;
    right: -80px;
  }

  .ab-bg-rule {
    display: none;
  }

  .ab-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-7);
  }

  .ab-header {
    max-width: 920px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    text-align: center;
    align-items: center;
  }

  .ab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    color: var(--color-brand-primary);
    font-family: var(--font-family-mono);
  }

  .ab-eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    box-shadow: 0 0 8px var(--color-brand-primary);
    flex-shrink: 0;
  }

  .ab-heading {
    font-size: clamp(var(--font-size-4xl), 6vw, 4.5rem);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
  }

  .ab-body {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 700px;
  }

  .ab-ctas {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .ab-cta-primary {
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.22);
  }

  .ab-manifesto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    max-width: 760px;
  }

  .ab-manifesto-item {
    min-width: 0;
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  .ab-manifesto-value {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
  }

  .ab-manifesto-copy {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
  }

  .ab-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .ab-proof-card {
    min-width: 0;
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.02) 0%, rgba(10, 14, 24, 0.86) 45%, rgba(7, 10, 18, 0.96) 100%),
      var(--color-bg-elevated);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 64px rgba(0, 0, 0, 0.24);
  }

  .ab-proof-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8), 0 24px 64px rgba(0, 0, 0, 0.24); }
  .ab-proof-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.82), 0 24px 64px rgba(0, 0, 0, 0.24); }
  .ab-proof-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78), 0 24px 64px rgba(0, 0, 0, 0.24); }

  .ab-proof-label {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .ab-proof-title {
    margin-top: var(--space-3);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .ab-proof-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .ab-domains {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
  }

  .ab-domain {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-wide);
  }

  .ab-domain-sep {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    flex-shrink: 0;
  }

  @media (max-width: 1024px) {
      .ab-proof-grid {
        grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .about-hero-section {
      padding-block: var(--space-12);
    }

    .ab-heading {
      font-size: clamp(var(--font-size-3xl), 9vw, var(--font-size-4xl));
    }

    .ab-body {
      font-size: var(--font-size-base);
    }

    .ab-manifesto {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 560px) {
    .ab-ctas {
      flex-direction: column;
      width: 100%;
    }

    .ab-ctas .btn {
      width: 100%;
      justify-content: center;
    }

    .ab-domains {
      display: none;
    }

    .ab-proof-card {
      padding: var(--space-5);
    }
  }


  /* ============================================================
     29b. About Matrix500mg Section
     ============================================================ */

  .about-matrix-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .abm-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .abm-bg-orb--left {
    width: 460px;
    height: 460px;
    left: -80px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 72%);
  }

  .abm-bg-orb--right {
    width: 520px;
    height: 520px;
    right: -120px;
    top: -140px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.09) 0%, transparent 72%);
  }

  .abm-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
    gap: var(--space-12);
    align-items: start;
  }

  .abm-copy {
    display: flex;
    flex-direction: column;
  }

  .abm-heading {
    max-width: 700px;
  }

  .abm-subheading {
    max-width: 640px;
  }

  .abm-statement {
    margin-top: var(--space-8);
    padding: var(--space-7);
    border-radius: var(--radius-2xl);
    background: rgba(9, 13, 23, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  }

  .abm-statement-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    color: var(--color-brand-primary);
  }

  .abm-statement-body {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
  }

  .abm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .abm-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.48rem 0.9rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
  }

  .abm-framework {
    display: grid;
    gap: var(--space-4);
  }

  .abm-framework-top {
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    background: rgba(9, 13, 23, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  }

  .abm-framework-label {
    display: inline-flex;
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .abm-framework-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .abm-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .abm-principle {
    min-width: 0;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.88) 0%, rgba(8, 12, 22, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 70px rgba(0, 0, 0, 0.28);
  }

  .abm-principle--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8), 0 24px 70px rgba(0, 0, 0, 0.28); }
  .abm-principle--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.82), 0 24px 70px rgba(0, 0, 0, 0.28); }
  .abm-principle--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82), 0 24px 70px rgba(0, 0, 0, 0.28); }

  .abm-principle-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-snug);
  }

  .abm-principle-meta {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-brand-primary);
    letter-spacing: 0.02em;
  }

  .abm-principle-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  @media (max-width: 1024px) {
    .abm-shell {
      grid-template-columns: 1fr;
      gap: var(--space-10);
    }

    .abm-principles {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .abm-statement,
    .abm-framework-top,
    .abm-principle {
      padding: var(--space-6);
    }
  }

  @media (max-width: 560px) {
    .abm-tags {
      gap: var(--space-2);
    }
  }


  /* ============================================================
     29c. About iDreamBiz Section
     ============================================================ */

  .about-idreambiz-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-bg-base) 0%, rgba(8, 12, 21, 0.98) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .abi-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .abi-bg-orb--left {
    width: 420px;
    height: 420px;
    left: -100px;
    top: -120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.06) 0%, transparent 72%);
  }

  .abi-bg-orb--right {
    width: 420px;
    height: 420px;
    right: -100px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.07) 0%, transparent 72%);
  }

  .abi-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.94fr);
    gap: var(--space-12);
    align-items: start;
  }

  .abi-heading {
    max-width: 680px;
  }

  .abi-subheading {
    max-width: 660px;
  }

  .abi-statement {
    margin-top: var(--space-8);
    padding: var(--space-7);
    border-radius: var(--radius-2xl);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18);
  }

  .abi-statement-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: #bca9ff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .abi-statement-body {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .abi-signals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .abi-signal {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.95rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
  }

  .abi-panel {
    min-width: 0;
  }

  .abi-panel-frame {
    position: relative;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.92) 0%, rgba(8, 12, 22, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 70px rgba(0, 0, 0, 0.28);
  }

  .abi-panel-topline {
    display: inline-flex;
    padding: 0.28rem 0.82rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 229, 255, 0.14);
    background: rgba(0, 229, 255, 0.05);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .abi-panel-grid {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  .abi-timeline {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  .abi-timeline-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
  }

  .abi-timeline-item--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.82); }
  .abi-timeline-item--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8); }
  .abi-timeline-item--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82); }

  .abi-timeline-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
  }

  .abi-card {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
  }

  .abi-card--primary {
    background: linear-gradient(160deg, rgba(123, 47, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
  }

  .abi-card-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .abi-card-title {
    font-size: clamp(var(--font-size-lg), 2.4vw, var(--font-size-xl));
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .abi-card-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }


  /* ============================================================
     29d. About Ecosystem Section
     ============================================================ */

  .about-ecosystem-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(8, 12, 21, 0.98) 0%, var(--color-bg-elevated) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .abe-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
    z-index: 0;
  }

  .abe-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .abe-bg-orb--cyan {
    width: 520px;
    height: 520px;
    top: -160px;
    left: -120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.08) 0%, transparent 72%);
  }

  .abe-bg-orb--violet {
    width: 520px;
    height: 520px;
    right: -140px;
    bottom: -180px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.09) 0%, transparent 72%);
  }

  .abe-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(340px, 1.04fr);
    gap: var(--space-12);
    align-items: start;
  }

  .abe-heading,
  .abe-subheading {
    max-width: 680px;
  }

  .abe-overview {
    margin-top: var(--space-8);
    padding-left: var(--space-5);
    border-left: 1px solid rgba(0, 229, 255, 0.18);
  }

  .abe-overview-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .abe-overview-body {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .abe-map {
    position: relative;
    display: grid;
    gap: var(--space-5);
  }

  .abe-core-card {
    position: relative;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.12) 0%, transparent 34%),
      linear-gradient(160deg, rgba(14, 18, 32, 0.96) 0%, rgba(8, 12, 22, 0.98) 100%);
    border: 1px solid rgba(0, 229, 255, 0.14);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 70px rgba(0, 0, 0, 0.3);
  }

  .abe-core-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .abe-core-title {
    font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-3xl));
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
  }

  .abe-core-copy {
    margin-top: var(--space-3);
    max-width: 560px;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .abe-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .abe-product {
    position: relative;
    min-width: 0;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  .abe-product::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    background: currentColor;
    opacity: 0.9;
  }

  .abe-product--cyan { color: var(--color-brand-primary); }
  .abe-product--violet { color: #a370ff; }
  .abe-product--mint { color: var(--color-brand-tertiary); }
  .abe-product--amber { color: #fbbf24; }

  .abe-product-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
  }

  .abe-product-title {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .abe-product-role {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    color: currentColor;
  }

  .abe-product-copy {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  @media (max-width: 1024px) {
    .abi-shell,
    .abe-shell {
      grid-template-columns: 1fr;
      gap: var(--space-10);
    }
  }

  @media (max-width: 768px) {
    .ab-manifesto-item,
    .abi-statement,
    .abi-panel-frame,
    .abi-timeline-item,
    .abe-core-card {
      padding: var(--space-6);
    }

    .abe-rail {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 560px) {
    .abi-signals {
      gap: var(--space-2);
    }

    .abe-overview {
      padding-left: var(--space-4);
    }
  }


  /* ============================================================
     29e. About Trust Section
     ============================================================ */

  .about-trust-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, rgba(7, 11, 20, 0.98) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .abt-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .abt-bg-orb--left {
    width: 460px;
    height: 460px;
    left: -120px;
    top: -100px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.06) 0%, transparent 72%);
  }

  .abt-bg-orb--right {
    width: 460px;
    height: 460px;
    right: -140px;
    bottom: -140px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 72%);
  }

  .abt-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(340px, 1.04fr);
    gap: var(--space-12);
    align-items: start;
  }

  .abt-heading,
  .abt-subheading {
    max-width: 700px;
  }

  .abt-principle {
    margin-top: var(--space-8);
    padding: var(--space-7);
    border-radius: var(--radius-2xl);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.18);
  }

  .abt-principle-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .abt-principle-body {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .abt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .abt-card {
    min-width: 0;
    padding: var(--space-7);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 70px rgba(0, 0, 0, 0.24);
  }

  .abt-card--selfhosted {
    border-color: rgba(0, 229, 255, 0.14);
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.08) 0%, transparent 34%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
  }

  .abt-card--saas {
    border-color: rgba(123, 47, 255, 0.14);
    background:
      radial-gradient(circle at top right, rgba(123, 47, 255, 0.08) 0%, transparent 34%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
  }

  .abt-card-badge {
    display: inline-flex;
    padding: 0.3rem 0.82rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 229, 255, 0.16);
    background: rgba(0, 229, 255, 0.06);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .abt-card-badge--violet {
    border-color: rgba(123, 47, 255, 0.18);
    background: rgba(123, 47, 255, 0.08);
    color: #bca9ff;
  }

  .abt-card-title {
    margin-top: var(--space-5);
    font-size: clamp(var(--font-size-lg), 2.5vw, var(--font-size-xl));
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .abt-card-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .abt-card-list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
  }

  .abt-card-list li {
    position: relative;
    padding-left: 1.15rem;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
  }

  .abt-card-list li::before {
    content: '';
    position: absolute;
    top: 0.48rem;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
  }


  /* ============================================================
     30. Contact Page
     ============================================================ */

  #contact-hero,
  #contact-form,
  #contact-fit,
  #contact-faq,
  #contact-cta {
    scroll-margin-top: var(--navbar-height);
  }


  /* ============================================================
     30a. Contact Hero
     ============================================================ */

  .contact-hero-section {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-16);
    background: var(--color-bg-base);
  }

  .ch-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
  }

  .ch-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
  }

  .ch-bg-orb--cyan {
    width: 600px;
    height: 600px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.13) 0%, transparent 70%);
  }

  .ch-bg-orb--violet {
    width: 500px;
    height: 500px;
    right: -80px;
    bottom: -60px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.12) 0%, transparent 70%);
  }

  .ch-bg-rule {
    display: none;
  }

  .ch-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: var(--space-12);
    align-items: center;
  }

  .ch-copy {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
  }

  .ch-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .ch-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
    flex-shrink: 0;
  }

  .ch-heading {
    font-size: clamp(var(--font-size-4xl), 6vw, 4.4rem);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
  }

  .ch-body {
    max-width: 620px;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .ch-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .ch-primary {
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.22);
  }

.ch-paths-shell {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.02) 0%, rgba(10, 14, 24, 0.86) 45%, rgba(7, 10, 18, 0.96) 100%),
    var(--color-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 24px 80px rgba(0, 0, 0, 0.34);
}

.ch-paths-topline {
  display: inline-flex;
  padding: 0.28rem 0.8rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 229, 255, 0.16);
  background: rgba(0, 229, 255, 0.06);
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  font-family: var(--font-family-mono);
}

.ch-paths-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.ch-path-card {
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.ch-path-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8); }
.ch-path-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78); }
.ch-path-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.75); }
.ch-path-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.8); }

.ch-path-card-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.ch-path-card-title {
  margin-top: var(--space-3);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.ch-path-card-copy {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.ch-response-strip {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ch-response-label {
  display: block;
  color: #bca9ff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.ch-response-copy {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

  .ch-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
  }

  .ch-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.48rem 0.9rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
  }

  /* ============================================================
     30b. Contact Form Section
     ============================================================ */

  .contact-form-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .cf-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .cf-bg-orb--left {
    width: 460px;
    height: 460px;
    left: -100px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 72%);
  }

  .cf-bg-orb--right {
    width: 500px;
    height: 500px;
    right: -120px;
    top: -140px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 72%);
  }

  .cf-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr);
    gap: var(--space-12);
    align-items: start;
  }

  .cf-heading,
  .cf-subheading {
    max-width: 660px;
  }

  .cf-brief {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-8);
  }

  .cf-brief-core {
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    background: rgba(9, 13, 23, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  }

  .cf-brief-kicker {
    display: inline-flex;
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .cf-brief-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .cf-brief-steps {
    display: grid;
    gap: var(--space-4);
  }

  .cf-brief-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
  }

  .cf-brief-step--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8); }
  .cf-brief-step--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78); }
  .cf-brief-step--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.8); }

  .cf-brief-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
  }

  .cf-brief-step-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
  }

  .cf-brief-step-copy {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .cf-form-wrap {
    min-width: 0;
  }

  .cf-form {
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background:
      linear-gradient(160deg, rgba(14, 18, 32, 0.96) 0%, rgba(8, 12, 22, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 28px 80px rgba(0, 0, 0, 0.3);
  }

  .cf-grid {
    display: grid;
    gap: var(--space-4);
  }

  .cf-grid + .cf-grid,
  .cf-grid + .cf-field,
  .cf-field + .cf-grid,
  .cf-form > .cf-field + .cf-field,
  .cf-field + .cf-actions {
    margin-top: var(--space-4);
  }

  .cf-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cf-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .cf-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    line-height: 1.2;
  }

  .cf-input {
    display: block;
    width: 100%;
    height: 3.75rem;
    padding: 0.95rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-primary);
    font: inherit;
    line-height: var(--line-height-normal);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    appearance: none;
  }

  .cf-input::placeholder {
    color: var(--color-text-muted);
  }

  .cf-input:focus {
    outline: none;
    border-color: rgba(0, 229, 255, 0.32);
    box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
  }

  .cf-select {
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.75) 50%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.75) 50%, transparent 50%);
    background-position:
      calc(100% - 20px) calc(50% - 3px),
      calc(100% - 14px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.6rem;
  }

  .cf-textarea {
    height: auto;
    resize: vertical;
    min-height: 140px;
  }

  .cf-actions {
    display: flex;
    align-items: center;
  }

  .cf-submit {
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.2);
  }

  .cf-trust-note {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
  }

  @media (max-width: 1024px) {
    .ch-layout,
    .cf-shell {
      grid-template-columns: 1fr;
      gap: var(--space-10);
    }
  }

  @media (max-width: 768px) {
    .contact-hero-section {
      padding-block: var(--space-12);
    }

    .ch-heading {
      font-size: clamp(var(--font-size-3xl), 9vw, var(--font-size-4xl));
    }

    .ch-body {
      font-size: var(--font-size-base);
    }

    .ch-paths-shell,
    .cf-form {
      padding: var(--space-6);
    }

    .ch-paths-grid {
      grid-template-columns: 1fr;
    }

    .cf-grid--two {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 560px) {
    .ch-actions {
      flex-direction: column;
      width: 100%;
    }

    .ch-actions .btn,
    .cf-actions .btn {
      width: 100%;
      justify-content: center;
    }

    .ch-tags {
      gap: var(--space-2);
    }
  }


  /* ============================================================
     30c. Contact Fit Section
     ============================================================ */

  .contact-fit-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(8, 12, 21, 0.99) 0%, var(--color-bg-elevated) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .cfit-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .cfit-bg-orb--left {
    width: 440px;
    height: 440px;
    left: -90px;
    top: -120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.06) 0%, transparent 72%);
  }

  .cfit-bg-orb--right {
    width: 500px;
    height: 500px;
    right: -140px;
    bottom: -150px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 72%);
  }

  .cfit-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-9);
  }

  .cfit-heading,
  .cfit-subheading {
    max-width: 700px;
  }

  .cfit-summary {
    margin-top: var(--space-8);
    padding: var(--space-7);
    border-radius: var(--radius-2xl);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18);
    max-width: 740px;
  }

  .cfit-summary-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .cfit-summary-body {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .cfit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .cfit-readiness {
    display: grid;
    gap: var(--space-4);
  }

  .cfit-readiness-lead {
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    background: rgba(9, 13, 23, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  }

  .cfit-readiness-label {
    display: inline-flex;
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .cfit-readiness-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .cfit-readiness-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .cfit-check {
    min-width: 0;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 70px rgba(0, 0, 0, 0.24);
  }

  .cfit-check--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.82), 0 24px 70px rgba(0, 0, 0, 0.24); }
  .cfit-check--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8), 0 24px 70px rgba(0, 0, 0, 0.24); }
  .cfit-check--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78), 0 24px 70px rgba(0, 0, 0, 0.24); }
  .cfit-check--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82), 0 24px 70px rgba(0, 0, 0, 0.24); }

  .cfit-check-kicker {
    display: inline-flex;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .cfit-check-title {
    margin-top: var(--space-3);
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .cfit-card {
    min-width: 0;
    padding: var(--space-7);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 70px rgba(0, 0, 0, 0.24);
  }

  .cfit-card--cyan {
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.08) 0%, transparent 34%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
  }

  .cfit-card--violet {
    background:
      radial-gradient(circle at top right, rgba(123, 47, 255, 0.08) 0%, transparent 34%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
  }

  .cfit-card--mint {
    background:
      radial-gradient(circle at top right, rgba(0, 255, 157, 0.08) 0%, transparent 34%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
  }

  .cfit-card--amber {
    background:
      radial-gradient(circle at top right, rgba(251, 191, 36, 0.08) 0%, transparent 34%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
  }

  .cfit-card-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .cfit-card-title {
    font-size: clamp(var(--font-size-lg), 2.3vw, var(--font-size-xl));
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .cfit-card-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }


  /* ============================================================
     30d. Contact FAQ Section
     ============================================================ */

  .contact-faq-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .cfaq-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
    z-index: 0;
  }

  .cfaq-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .cfaq-bg-orb--cyan {
    width: 520px;
    height: 520px;
    right: -160px;
    top: -180px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 72%);
  }

  .cfaq-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-8);
  }

  .cfaq-header {
    align-items: center;
  }

  .cfaq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .cfaq-item {
    min-width: 0;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
  }

  .cfaq-question {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .cfaq-answer {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  @media (max-width: 1024px) {
    .cfit-grid,
    .cfit-readiness-grid,
    .cfaq-list {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .ch-path-card,
    .cf-brief-core,
    .cf-brief-step,
    .cfit-summary,
    .cfit-card,
    .cfit-readiness-lead,
    .cfit-check,
    .cfaq-item {
      padding: var(--space-6);
    }
  }


  /* ============================================================
     30e. Contact CTA Section
     ============================================================ */

  .contact-cta-section {
    position: relative;
    overflow: hidden;
    padding-top: var(--space-14);
    padding-bottom: var(--space-16);
    background: var(--color-bg-base);
  }

  .ccta-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.018) 1px, transparent 1px);
    background-size: 54px 54px;
    pointer-events: none;
    z-index: 0;
  }

  .ccta-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .ccta-bg-orb--cyan {
    width: 520px;
    height: 520px;
    left: -120px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.08) 0%, transparent 72%);
  }

  .ccta-bg-orb--violet {
    width: 480px;
    height: 480px;
    right: -120px;
    top: -140px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 72%);
  }

  .ccta-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-8) var(--space-9);
    border-radius: var(--radius-2xl);
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.09) 0%, transparent 32%),
      linear-gradient(160deg, rgba(14, 18, 32, 0.96) 0%, rgba(8, 12, 22, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 28px 80px rgba(0, 0, 0, 0.32);
  }

  .ccta-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .ccta-heading {
    font-size: clamp(var(--font-size-3xl), 4vw, 3.4rem);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
  }

  .ccta-body {
    margin-top: var(--space-4);
    max-width: 660px;
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .ccta-signal-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }

  .ccta-signal {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-primary);
  }

  .ccta-signal-sep {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(0, 229, 255, 0.45);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.28);
  }

  .ccta-side {
    width: min(100%, 420px);
  }

  .ccta-side-card {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 229, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  }

  .ccta-side-kicker {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    color: var(--color-brand-primary);
    font-family: var(--font-family-mono);
  }

  .ccta-side-points {
    display: grid;
    gap: var(--space-4);
  }

  .ccta-side-point {
    display: grid;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .ccta-side-point:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .ccta-side-point-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
  }

  .ccta-side-point-copy {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .ccta-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .ccta-primary {
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.2);
  }

  @media (max-width: 1024px) {
    .ccta-shell {
      grid-template-columns: 1fr;
    }

    .ccta-side {
      width: 100%;
    }

    .ccta-actions {
      justify-content: flex-start;
    }
  }

  @media (max-width: 768px) {
    .ccta-shell {
      padding: var(--space-6);
    }

    .ccta-side-card {
      padding: var(--space-5);
    }
  }

  @media (max-width: 560px) {
    .ccta-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .ccta-actions .btn {
      width: 100%;
      justify-content: center;
    }
  }


  /* ============================================================
     31. Thank You Page
     ============================================================ */

  #thankyou-hero,
  #thankyou-nextsteps,
  #thankyou-options,
  #thankyou-cta {
    scroll-margin-top: var(--navbar-height);
  }


  /* ============================================================
     31a. Thank You Hero
     ============================================================ */

  .thankyou-hero-section {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-16);
    background: var(--color-bg-base);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .tyh-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.022) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.022) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    z-index: 0;
  }

  .tyh-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(110px);
    pointer-events: none;
    z-index: 0;
  }

  .tyh-bg-orb--cyan {
    width: 540px;
    height: 540px;
    top: -140px;
    left: -80px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.09) 0%, transparent 70%);
  }

  .tyh-bg-orb--violet {
    width: 560px;
    height: 560px;
    right: -120px;
    bottom: -180px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.09) 0%, transparent 70%);
  }

  .tyh-bg-rule {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    z-index: 0;
  }

  .tyh-bg-rule--top {
    top: var(--space-8);
    background: linear-gradient(90deg, transparent, rgba(123, 47, 255, 0.16) 34%, rgba(0, 229, 255, 0.16) 72%, transparent);
  }

  .tyh-bg-rule--bottom {
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.12) 50%, transparent);
  }

  .tyh-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
    gap: var(--space-12);
    align-items: center;
  }

  .tyh-copy {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .tyh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .tyh-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
    flex-shrink: 0;
  }

  .tyh-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    padding: 0.42rem 0.88rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 255, 157, 0.16);
    background: rgba(0, 255, 157, 0.06);
    color: var(--color-brand-tertiary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
  }

  .tyh-status-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    flex-shrink: 0;
  }

  .tyh-heading {
    font-size: clamp(var(--font-size-4xl), 6vw, 4.3rem);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
  }

  .tyh-body {
    max-width: 620px;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .tyh-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .tyh-primary {
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.22);
  }

  .tyh-panel-frame {
    position: relative;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.02) 0%, rgba(10, 14, 24, 0.86) 45%, rgba(7, 10, 18, 0.96) 100%),
      var(--color-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 80px rgba(0, 0, 0, 0.34);
  }

  .tyh-panel-topline {
    display: inline-flex;
    padding: 0.28rem 0.8rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 229, 255, 0.16);
    background: rgba(0, 229, 255, 0.06);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .tyh-panel-core {
    margin-top: var(--space-6);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: rgba(8, 12, 22, 0.72);
    border: 1px solid rgba(123, 47, 255, 0.16);
  }

  .tyh-panel-core-label {
    display: block;
    margin-bottom: var(--space-2);
    color: #bca9ff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .tyh-panel-core-title {
    display: block;
    font-size: clamp(var(--font-size-lg), 2.4vw, var(--font-size-xl));
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .tyh-panel-core-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .tyh-panel-note {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
  }

  @media (max-width: 1024px) {
    .tyh-layout {
      grid-template-columns: 1fr;
      gap: var(--space-10);
    }
  }

  @media (max-width: 768px) {
    .thankyou-hero-section {
      padding-block: var(--space-12);
    }

    .tyh-heading {
      font-size: clamp(var(--font-size-3xl), 9vw, var(--font-size-4xl));
    }

    .tyh-body {
      font-size: var(--font-size-base);
    }

    .tyh-panel-frame {
      padding: var(--space-6);
    }
  }

  @media (max-width: 560px) {
    .tyh-actions {
      flex-direction: column;
      width: 100%;
    }

    .tyh-actions .btn {
      width: 100%;
      justify-content: center;
    }
  }


  /* ============================================================
     31b. Thank You Next Steps
     ============================================================ */

  .thankyou-nextsteps-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, rgba(8, 12, 21, 0.98) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .tyn-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .tyn-bg-orb--left {
    width: 440px;
    height: 440px;
    left: -100px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.06) 0%, transparent 72%);
  }

  .tyn-bg-orb--right {
    width: 480px;
    height: 480px;
    right: -130px;
    top: -120px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 72%);
  }

  .tyn-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-8);
  }

  .tyn-heading,
  .tyn-subheading {
    max-width: 720px;
  }

  .tyn-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .tyn-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    min-width: 0;
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 20px 56px rgba(0, 0, 0, 0.22);
  }

  .tyn-step--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .tyn-step--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .tyn-step--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .tyn-step--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.8), 0 20px 56px rgba(0, 0, 0, 0.22); }

  .tyn-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    flex-shrink: 0;
  }

  .tyn-step-title {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .tyn-step-copy {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }


  /* ============================================================
     31c. Thank You Options
     ============================================================ */

  .thankyou-options-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(8, 12, 21, 0.98) 0%, var(--color-bg-base) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .tyo-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
    z-index: 0;
  }

  .tyo-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .tyo-bg-orb--cyan {
    width: 520px;
    height: 520px;
    left: -140px;
    top: -180px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 72%);
  }

  .tyo-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-8);
  }

  .tyo-header {
    align-items: center;
  }

  .tyo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .tyo-card {
    display: block;
    min-width: 0;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
  }

  .tyo-card:hover,
  .tyo-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.035);
    outline: none;
  }

  .tyo-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8), 0 18px 52px rgba(0, 0, 0, 0.18); }
  .tyo-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78), 0 18px 52px rgba(0, 0, 0, 0.18); }
  .tyo-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78), 0 18px 52px rgba(0, 0, 0, 0.18); }
  .tyo-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.8), 0 18px 52px rgba(0, 0, 0, 0.18); }

  .tyo-card-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .tyo-card-title {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .tyo-card-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  @media (max-width: 1024px) {
    .tyn-steps,
    .tyo-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .tyn-step,
    .tyo-card {
      padding: var(--space-6);
    }
  }


  /* ============================================================
     31d. Thank You CTA
     ============================================================ */

  .thankyou-cta-section {
    position: relative;
    overflow: hidden;
    padding-top: var(--space-14);
    padding-bottom: var(--space-16);
    background: var(--color-bg-base);
  }

  .tyc-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.018) 1px, transparent 1px);
    background-size: 54px 54px;
    pointer-events: none;
    z-index: 0;
  }

  .tyc-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .tyc-bg-orb--cyan {
    width: 520px;
    height: 520px;
    left: -120px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.08) 0%, transparent 72%);
  }

  .tyc-bg-orb--violet {
    width: 480px;
    height: 480px;
    right: -120px;
    top: -140px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 72%);
  }

  .tyc-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-8) var(--space-9);
    border-radius: var(--radius-2xl);
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.09) 0%, transparent 32%),
      linear-gradient(160deg, rgba(14, 18, 32, 0.96) 0%, rgba(8, 12, 22, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 28px 80px rgba(0, 0, 0, 0.32);
  }

  .tyc-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .tyc-heading {
    font-size: clamp(var(--font-size-3xl), 4vw, 3.4rem);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
  }

  .tyc-body {
    margin-top: var(--space-4);
    max-width: 660px;
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .tyc-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .tyc-primary {
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.2);
  }

  @media (max-width: 1024px) {
    .tyc-shell {
      grid-template-columns: 1fr;
    }

    .tyc-actions {
      justify-content: flex-start;
    }
  }

  @media (max-width: 768px) {
    .tyc-shell {
      padding: var(--space-6);
    }
  }

  @media (max-width: 560px) {
    .tyc-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .tyc-actions .btn {
      width: 100%;
      justify-content: center;
    }
  }


  /* ============================================================
     32. Matrix AI Page
     ============================================================ */

  #ai-hero,
  #ai-capabilities,
  #ai-intelligence-flow,
  #ai-use-cases,
  #ai-trust,
  #ai-cta {
    scroll-margin-top: var(--navbar-height);
  }


  /* ============================================================
     32a. Matrix AI Hero
     ============================================================ */

  .ai-hero-section {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-16);
    background: var(--color-bg-base);
  }

  .mai-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
  }

  .mai-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
  }

  .mai-bg-orb--cyan {
    width: 600px;
    height: 600px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.13) 0%, transparent 70%);
  }

  .mai-bg-orb--violet {
    width: 500px;
    height: 500px;
    right: -80px;
    bottom: -60px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.12) 0%, transparent 70%);
  }

  .mai-bg-rule {
    display: none;
  }

  .mai-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-8);
    align-items: start;
  }

  .mai-copy {
    grid-column: 1 / -1;
    max-width: 920px;
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
  }

  .mai-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .mai-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
    flex-shrink: 0;
  }

  .mai-heading {
    font-size: clamp(var(--font-size-4xl), 6vw, 4.4rem);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
  }

  .mai-body {
    max-width: 760px;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .mai-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .mai-primary {
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.22);
  }

  .mai-signal-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    max-width: 1120px;
  }

  .mai-signal-card {
    min-width: 0;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: rgba(10, 14, 24, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
  }

  .mai-signal-card--cyan {
    background: linear-gradient(160deg, rgba(0, 229, 255, 0.08) 0%, rgba(10, 14, 24, 0.56) 70%);
  }

  .mai-signal-card--violet {
    background: linear-gradient(160deg, rgba(123, 47, 255, 0.09) 0%, rgba(10, 14, 24, 0.56) 70%);
  }

  .mai-signal-card--mint {
    background: linear-gradient(160deg, rgba(0, 255, 157, 0.08) 0%, rgba(10, 14, 24, 0.56) 70%);
  }

  .mai-signal-label {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .mai-signal-value {
    display: block;
    margin-top: var(--space-3);
    font-size: clamp(var(--font-size-xl), 3vw, 2rem);
    line-height: 1;
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
  }

  .mai-signal-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .mai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
  }

  .mai-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.48rem 0.9rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
  }

  .mai-stage {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: var(--space-8);
    align-items: stretch;
  }

  .mai-flow,
  .mai-console-shell {
    position: relative;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.02) 0%, rgba(10, 14, 24, 0.86) 45%, rgba(7, 10, 18, 0.96) 100%),
      var(--color-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 80px rgba(0, 0, 0, 0.34);
  }

  .mai-flow {
    display: grid;
    gap: var(--space-6);
  }

  .mai-flow-kicker,
  .mai-console-topline {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.28rem 0.8rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 229, 255, 0.16);
    background: rgba(0, 229, 255, 0.06);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .mai-flow-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .mai-flow-title {
    display: block;
    font-size: clamp(var(--font-size-xl), 3vw, 2rem);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .mai-flow-list {
    display: grid;
    gap: var(--space-4);
  }

  .mai-flow-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
  }

  .mai-flow-step--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8); }
  .mai-flow-step--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78); }
  .mai-flow-step--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78); }

  .mai-flow-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
  }

  .mai-flow-body {
    min-width: 0;
  }

  .mai-flow-step-title {
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .mai-flow-step-copy {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .mai-console-shell {
    display: grid;
    gap: var(--space-5);
  }

  .mai-console-header {
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: rgba(8, 12, 22, 0.72);
    border: 1px solid rgba(123, 47, 255, 0.16);
  }

  .mai-console-label {
    display: block;
    margin-bottom: var(--space-2);
    color: #bca9ff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .mai-console-title {
    display: block;
    max-width: 28rem;
    font-size: clamp(var(--font-size-lg), 2.4vw, var(--font-size-xl));
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .mai-console-status {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.8rem;
    border-radius: var(--radius-full);
    background: rgba(0, 255, 157, 0.08);
    border: 1px solid rgba(0, 255, 157, 0.16);
    color: var(--color-brand-tertiary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }

  .mai-console-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .mai-console-metric {
    min-width: 0;
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  .mai-console-metric-label {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mai-console-metric-value {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .mai-console-list {
    display: grid;
    gap: var(--space-4);
  }

  .mai-console-item {
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
  }

  .mai-console-item--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8); }
  .mai-console-item--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78); }
  .mai-console-item--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78); }

  .mai-console-item-title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
  }

  .mai-console-item-copy {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }


  /* ============================================================
     32b. Matrix AI Capabilities
     ============================================================ */

  .ai-capabilities-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .maic-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .maic-bg-orb--left {
    width: 460px;
    height: 460px;
    left: -100px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 72%);
  }

  .maic-bg-orb--right {
    width: 500px;
    height: 500px;
    right: -120px;
    top: -140px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 72%);
  }

  .maic-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-8);
  }

  .maic-header {
    align-items: center;
  }

  .maic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .maic-card {
    position: relative;
    min-width: 0;
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 20px 56px rgba(0, 0, 0, 0.22);
  }

  .maic-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .maic-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .maic-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .maic-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.8), 0 20px 56px rgba(0, 0, 0, 0.22); }

  .maic-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
  }

  .maic-card-title {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .maic-card-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .maic-card-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
  }

  .maic-card-list li {
    position: relative;
    padding-left: 1rem;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
  }

  .maic-card-list li::before {
    content: '';
    position: absolute;
    top: 0.42rem;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    background: currentColor;
  }

  @media (max-width: 1024px) {
    .maic-grid {
      grid-template-columns: 1fr;
    }

    .mai-signal-strip,
    .mai-stage {
      grid-template-columns: 1fr;
    }

    .mai-stage {
      gap: var(--space-10);
    }
  }

  @media (max-width: 768px) {
    .ai-hero-section {
      padding-block: var(--space-12);
    }

    .mai-heading {
      font-size: clamp(var(--font-size-3xl), 9vw, var(--font-size-4xl));
    }

    .mai-body {
      font-size: var(--font-size-base);
    }

    .mai-flow,
    .mai-console-shell,
    .maic-card {
      padding: var(--space-6);
    }

    .mai-console-header,
    .mai-console-metrics {
      grid-template-columns: 1fr;
    }

    .mai-console-header {
      display: grid;
    }
  }

  @media (max-width: 560px) {
    .mai-actions {
      flex-direction: column;
      width: 100%;
    }

    .mai-actions .btn {
      width: 100%;
      justify-content: center;
    }

    .mai-tags {
      gap: var(--space-2);
    }
  }


  /* ============================================================
     32c. Matrix AI Intelligence Flow
     ============================================================ */

  .ai-intelligence-flow-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(8, 12, 21, 0.99) 0%, var(--color-bg-elevated) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .maif-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .maif-bg-orb--left {
    width: 440px;
    height: 440px;
    left: -100px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.06) 0%, transparent 72%);
  }

  .maif-bg-orb--right {
    width: 480px;
    height: 480px;
    right: -120px;
    top: -120px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 72%);
  }

  .maif-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-8);
  }

  .maif-header {
    align-items: center;
  }

  .maif-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .maif-step {
    min-width: 0;
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 20px 56px rgba(0, 0, 0, 0.22);
  }

  .maif-step--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .maif-step--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .maif-step--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .maif-step--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.8), 0 20px 56px rgba(0, 0, 0, 0.22); }

  .maif-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
  }

  .maif-step-title {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .maif-step-copy {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }


  /* ============================================================
     32d. Matrix AI Use Cases
     ============================================================ */

  .ai-use-cases-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .maiu-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
    z-index: 0;
  }

  .maiu-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .maiu-bg-orb--cyan {
    width: 520px;
    height: 520px;
    left: -140px;
    top: -180px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 72%);
  }

  .maiu-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-8);
  }

  .maiu-header {
    align-items: center;
  }

  .maiu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .maiu-card {
    min-width: 0;
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 20px 56px rgba(0, 0, 0, 0.22);
  }

  .maiu-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .maiu-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .maiu-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .maiu-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.8), 0 20px 56px rgba(0, 0, 0, 0.22); }

  .maiu-card-title {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .maiu-card-detail + .maiu-card-detail {
    margin-top: var(--space-4);
  }

  .maiu-card-detail {
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .maiu-card-label {
    display: inline-flex;
    margin-bottom: var(--space-2);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .maiu-card-text {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  @media (max-width: 1200px) {
    .maif-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 1024px) {
    .maif-grid,
    .maiu-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .maif-step,
    .maiu-card {
      padding: var(--space-6);
    }
  }


  /* ============================================================
     32e. Matrix AI Trust
     ============================================================ */

  .ai-trust-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(8, 12, 21, 0.98) 0%, var(--color-bg-elevated) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .mait-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .mait-bg-orb--left {
    width: 440px;
    height: 440px;
    left: -100px;
    top: -120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.06) 0%, transparent 72%);
  }

  .mait-bg-orb--right {
    width: 500px;
    height: 500px;
    right: -140px;
    bottom: -150px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 72%);
  }

  .mait-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(340px, 1.04fr);
    gap: var(--space-12);
    align-items: start;
  }

  .mait-heading,
  .mait-subheading {
    max-width: 700px;
  }

  .mait-statement {
    margin-top: var(--space-8);
    padding: var(--space-7);
    border-radius: var(--radius-2xl);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18);
  }

  .mait-statement-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .mait-statement-body {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .mait-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .mait-card {
    min-width: 0;
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 20px 56px rgba(0, 0, 0, 0.22);
  }

  .mait-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .mait-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .mait-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78), 0 20px 56px rgba(0, 0, 0, 0.22); }
  .mait-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.8), 0 20px 56px rgba(0, 0, 0, 0.22); }

  .mait-card-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .mait-card-copy {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }


  /* ============================================================
     32f. Matrix AI CTA
     ============================================================ */

  .ai-cta-section {
    position: relative;
    overflow: hidden;
    padding-top: var(--space-14);
    padding-bottom: var(--space-16);
    background: var(--color-bg-base);
  }

  .maicta-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.018) 1px, transparent 1px);
    background-size: 54px 54px;
    pointer-events: none;
    z-index: 0;
  }

  .maicta-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .maicta-bg-orb--cyan {
    width: 520px;
    height: 520px;
    left: -120px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.08) 0%, transparent 72%);
  }

  .maicta-bg-orb--violet {
    width: 480px;
    height: 480px;
    right: -120px;
    top: -140px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.08) 0%, transparent 72%);
  }

  .maicta-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr);
    gap: var(--space-10);
    align-items: start;
    padding: var(--space-8) var(--space-9);
    border-radius: var(--radius-2xl);
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.09) 0%, transparent 32%),
      linear-gradient(160deg, rgba(14, 18, 32, 0.96) 0%, rgba(8, 12, 22, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 28px 80px rgba(0, 0, 0, 0.32);
    overflow: hidden;
  }

  .maicta-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 100%);
    pointer-events: none;
  }

  .maicta-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: start;
    gap: var(--space-4);
    max-width: 720px;
  }

  .maicta-kicker {
    display: inline-flex;
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    font-family: var(--font-family-mono);
  }

  .maicta-heading {
    position: relative;
    z-index: 1;
    max-width: 11ch;
    font-size: clamp(var(--font-size-3xl), 3.7vw, 3.15rem);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
  }

  .maicta-body {
    position: relative;
    z-index: 1;
    max-width: 660px;
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .maicta-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .maicta-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.46rem 0.9rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
  }

  .maicta-side {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    align-self: center;
    justify-self: end;
    width: min(100%, 420px);
  }

  .maicta-side-label {
    display: inline-flex;
    color: #bca9ff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .maicta-actions {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-4);
  }

  .maicta-primary {
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.2);
  }

  .maicta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .maicta-support {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .maicta-support-item {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
  }

  .maicta-support-sep {
    width: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    flex-shrink: 0;
  }

  @media (max-width: 1024px) {
    .mait-shell,
    .maicta-shell {
      grid-template-columns: 1fr;
    }

    .mait-grid {
      grid-template-columns: 1fr;
    }

    .maicta-side {
      align-self: start;
      justify-self: start;
      width: 100%;
    }

    .maicta-actions {
      justify-content: flex-start;
    }
  }

  @media (max-width: 768px) {
    .mait-statement,
    .mait-card,
    .maicta-shell,
    .maicta-side {
      padding: var(--space-6);
    }

    .maicta-heading {
      max-width: none;
    }
  }

  @media (max-width: 560px) {
    .maicta-meta,
    .maicta-support {
      gap: var(--space-2);
    }

    .maicta-support-sep {
      display: none;
    }
  }


/* Form — Validation & Submission States */
.cf-input--error { border-color: #ff4d4d !important; box-shadow: 0 0 0 2px rgba(255,77,77,0.20); }
.cf-server-error { color: #ff4d4d; font-size: 0.875rem; margin-top: 12px; }
.cf-submit:disabled { opacity: 0.65; cursor: not-allowed; }

  /* ============================================================
     33. Lending Intelligence Page
     ============================================================ */

  #lending-hero,
  #lending-overview,
  #lending-funnel,
  #lending-ops,
  #lending-payments,
  #lending-personas,
  #lending-cta {
    scroll-margin-top: var(--navbar-height);
  }

  .lending-hero-section,
  .lending-section,
  .lending-cta-section {
    position: relative;
    overflow: hidden;
  }

  .lending-hero-section {
    padding-block: var(--space-16);
    background: var(--color-bg-base);
  }

  .lending-section {
    padding-block: var(--space-16);
    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-elevated) 100%);
    border-top: 1px solid var(--color-border-subtle);
  }

  .lending-section--alt {
    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);
  }

  .lending-cta-section {
    padding-block: var(--space-14);
    background: var(--color-bg-base);
    border-top: 1px solid var(--color-border-subtle);
  }

  .li-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.024) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.024) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 84% 72% at 50% 40%, black 28%, transparent 100%);
    mask-image: radial-gradient(ellipse 84% 72% at 50% 40%, black 28%, transparent 100%);
  }

  .li-bg-orb {
    position: absolute;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
  }

  .li-bg-orb--cyan {
    width: 520px;
    height: 520px;
    left: -140px;
    top: -100px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.12) 0%, transparent 72%);
  }

  .li-bg-orb--violet {
    width: 480px;
    height: 480px;
    right: -120px;
    bottom: -180px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.11) 0%, transparent 72%);
  }

  .li-hero-shell,
  .li-section-header,
  .li-placeholder-grid,
  .li-cta-shell {
    position: relative;
    z-index: 1;
  }

  .li-hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: var(--space-10);
    align-items: center;
  }

  .li-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .li-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.55);
  }

  .li-heading {
    margin-top: var(--space-5);
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
  }

  .li-body {
    margin-top: var(--space-5);
    max-width: 740px;
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .li-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-7);
  }

  .li-hero-domains {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
  }

  .li-hero-domain {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .li-hero-domain-sep {
    width: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    flex-shrink: 0;
  }

  .li-hero-panel {
    min-width: 0;
  }

  .li-hero-board {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.08) 0%, transparent 34%),
      linear-gradient(160deg, rgba(255, 255, 255, 0.02) 0%, rgba(10, 14, 24, 0.86) 45%, rgba(7, 10, 18, 0.96) 100%),
      var(--color-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 28px 80px rgba(0, 0, 0, 0.34);
  }

  .li-hero-board-head {
    display: grid;
    gap: var(--space-4);
  }

  .li-hero-board-kicker,
  .li-hero-board-footer-label,
  .li-overview-statement-kicker,
  .li-overview-card-kicker {
    display: inline-flex;
    align-self: flex-start;
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .li-hero-board-title {
    display: block;
    font-size: clamp(var(--font-size-lg), 2.5vw, 2rem);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .li-hero-board-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .li-hero-board-card {
    min-width: 0;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
  }

  .li-hero-board-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8); }
  .li-hero-board-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.78); }
  .li-hero-board-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82); }
  .li-hero-board-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78); }

  .li-hero-board-label {
    display: inline-flex;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .li-hero-board-card-title,
  .li-overview-card-title {
    margin-top: var(--space-3);
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .li-hero-board-card-copy,
  .li-overview-card-copy,
  .li-hero-board-footer-copy,
  .li-overview-statement-body {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .li-hero-board-footer {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
  }

  .li-section-header {
    margin-bottom: var(--space-10);
  }

  .li-overview-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: var(--space-10);
    align-items: start;
  }

  .li-overview-copy {
    min-width: 0;
  }

  .li-overview-heading {
    max-width: 16ch;
  }

  .li-overview-subheading {
    max-width: 44rem;
  }

  .li-overview-statement {
    margin-top: var(--space-7);
    padding: var(--space-7);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background:
      radial-gradient(circle at top right, rgba(123, 47, 255, 0.08) 0%, transparent 34%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 70px rgba(0, 0, 0, 0.26);
  }

  .li-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .li-overview-card {
    min-width: 0;
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 70px rgba(0, 0, 0, 0.24);
  }

  .li-overview-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8), 0 24px 70px rgba(0, 0, 0, 0.24); }
  .li-overview-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8), 0 24px 70px rgba(0, 0, 0, 0.24); }
  .li-overview-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82), 0 24px 70px rgba(0, 0, 0, 0.24); }
  .li-overview-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78), 0 24px 70px rgba(0, 0, 0, 0.24); }

  .li-funnel-shell,
  .li-ops-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-10);
    align-items: start;
  }

  .li-funnel-shell {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .li-ops-shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .li-funnel-copy,
  .li-ops-copy {
    min-width: 0;
  }

  .li-funnel-heading,
  .li-ops-heading {
    max-width: 16ch;
  }

  .li-funnel-subheading,
  .li-ops-subheading {
    max-width: 44rem;
  }

  .li-funnel-statement,
  .li-ops-statement {
    margin-top: var(--space-7);
    padding: var(--space-7);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 70px rgba(0, 0, 0, 0.26);
  }

  .li-funnel-statement {
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.08) 0%, transparent 34%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
  }

  .li-ops-statement {
    background:
      radial-gradient(circle at top right, rgba(123, 47, 255, 0.08) 0%, transparent 34%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
  }

  .li-funnel-statement-kicker,
  .li-ops-statement-kicker,
  .li-funnel-board-label,
  .li-funnel-foot-label,
  .li-funnel-card-kicker,
  .li-ops-board-kicker,
  .li-ops-card-kicker,
  .li-ops-metric-label {
    display: inline-flex;
    align-self: flex-start;
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .li-funnel-board,
  .li-ops-board {
    min-width: 0;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 28px 80px rgba(0, 0, 0, 0.3);
  }

  .li-funnel-board {
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.08) 0%, transparent 32%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
  }

  .li-ops-board {
    background:
      radial-gradient(circle at top right, rgba(251, 191, 36, 0.08) 0%, transparent 32%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
  }

  .li-funnel-board-lead,
  .li-funnel-foot,
  .li-ops-board-head {
    display: grid;
    gap: var(--space-3);
  }

  .li-funnel-board-copy,
  .li-funnel-foot-copy,
  .li-funnel-statement-body,
  .li-ops-statement-body,
  .li-ops-card-copy {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .li-funnel-grid,
  .li-ops-grid,
  .li-ops-metrics {
    display: grid;
    gap: var(--space-4);
  }

  .li-funnel-grid,
  .li-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-6);
  }

  .li-ops-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-6);
  }

  .li-funnel-card,
  .li-ops-card,
  .li-ops-metric {
    min-width: 0;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
  }

  .li-funnel-card,
  .li-ops-card {
    padding: var(--space-5);
  }

  .li-ops-metric {
    padding: var(--space-4);
  }

  .li-funnel-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8); }
  .li-funnel-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8); }
  .li-funnel-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82); }
  .li-funnel-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78); }

  .li-ops-card--amber,
  .li-ops-metric--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82); }
  .li-ops-card--cyan,
  .li-ops-metric--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8); }
  .li-ops-card--violet,
  .li-ops-metric--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8); }
  .li-ops-card--mint,
  .li-ops-metric--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78); }

  .li-funnel-card-title,
  .li-ops-card-title,
  .li-ops-board-title {
    margin-top: var(--space-3);
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .li-funnel-card-copy,
  .li-ops-metric-value {
    margin-top: var(--space-2);
    color: var(--color-text-secondary);
  }

  .li-ops-metric-value {
    display: block;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .li-payments-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: var(--space-10);
    align-items: start;
  }

  .li-payments-copy,
  .li-personas-shell {
    min-width: 0;
  }

  .li-payments-heading,
  .li-personas-heading {
    max-width: 17ch;
  }

  .li-payments-subheading,
  .li-personas-subheading {
    max-width: 46rem;
  }

  .li-payments-statement {
    margin-top: var(--space-7);
    padding: var(--space-7);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background:
      radial-gradient(circle at top right, rgba(0, 255, 157, 0.07) 0%, transparent 34%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 70px rgba(0, 0, 0, 0.26);
  }

  .li-payments-statement-kicker,
  .li-payments-card-kicker,
  .li-payments-trace-node,
  .li-persona-kicker {
    display: inline-flex;
    align-self: flex-start;
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .li-payments-statement-body,
  .li-payments-card-copy,
  .li-payments-footer-copy,
  .li-persona-copy {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .li-payments-board {
    min-width: 0;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.08) 0%, transparent 30%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 28px 80px rgba(0, 0, 0, 0.3);
  }

  .li-payments-grid,
  .li-personas-grid {
    display: grid;
    gap: var(--space-4);
  }

  .li-payments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .li-payments-card,
  .li-persona-card {
    min-width: 0;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
  }

  .li-payments-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78); }
  .li-payments-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82); }
  .li-payments-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8); }
  .li-payments-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8); }

  .li-payments-card-title,
  .li-persona-title {
    margin-top: var(--space-3);
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .li-payments-footer {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
  }

  .li-payments-trace {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .li-payments-trace-node {
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
  }

  .li-payments-trace-sep {
    width: 1.25rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.55), rgba(255, 255, 255, 0.12));
  }

  .li-personas-header {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
  }

  .li-personas-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .li-persona-card {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 24px 70px rgba(0, 0, 0, 0.22);
  }

  .li-persona-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8), 0 24px 70px rgba(0, 0, 0, 0.22); }
  .li-persona-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8), 0 24px 70px rgba(0, 0, 0, 0.22); }
  .li-persona-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82), 0 24px 70px rgba(0, 0, 0, 0.22); }
  .li-persona-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78), 0 24px 70px rgba(0, 0, 0, 0.22); }
  .li-persona-card--teal { box-shadow: inset 3px 0 0 rgba(45, 212, 191, 0.78), 0 24px 70px rgba(0, 0, 0, 0.22); }
  .li-persona-card--slate { box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.8), 0 24px 70px rgba(0, 0, 0, 0.22); }

  .li-persona-copy {
    margin-top: var(--space-3);
  }

  .li-persona-copy strong {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
  }

  .li-placeholder-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .li-placeholder-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .li-placeholder-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .li-placeholder-card,
  .li-cta-shell {
    min-width: 0;
    padding: var(--space-7);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 28px 80px rgba(0, 0, 0, 0.26);
  }

  .li-placeholder-card--hero {
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.08) 0%, transparent 34%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
  }

  .li-placeholder-card--cyan {
    box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.82), 0 28px 80px rgba(0, 0, 0, 0.26);
  }

  .li-placeholder-card--violet {
    box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8), 0 28px 80px rgba(0, 0, 0, 0.26);
  }

  .li-placeholder-card--mint {
    box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78), 0 28px 80px rgba(0, 0, 0, 0.26);
  }

  .li-placeholder-card--amber {
    box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82), 0 28px 80px rgba(0, 0, 0, 0.26);
  }

  .li-placeholder-card--teal {
    box-shadow: inset 3px 0 0 rgba(45, 212, 191, 0.78), 0 28px 80px rgba(0, 0, 0, 0.26);
  }

  .li-placeholder-kicker,
  .li-cta-kicker {
    display: inline-flex;
    margin-bottom: var(--space-3);
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .li-placeholder-title,
  .li-cta-heading {
    font-size: clamp(var(--font-size-xl), 2.4vw, 2rem);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .li-placeholder-copy,
  .li-cta-body {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .li-cta-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.02) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 46%, black 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 82% 72% at 50% 46%, black 30%, transparent 100%);
  }

  .li-cta-bg-orb {
    position: absolute;
    z-index: 0;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
  }

  .li-cta-bg-orb--cyan {
    width: 420px;
    height: 420px;
    left: -80px;
    top: -120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.12) 0%, transparent 72%);
  }

  .li-cta-bg-orb--violet {
    width: 420px;
    height: 420px;
    right: -80px;
    bottom: -160px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.12) 0%, transparent 72%);
  }

  .li-cta-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    gap: var(--space-8);
    align-items: center;
    position: relative;
    z-index: 1;
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.08) 0%, transparent 30%),
      radial-gradient(circle at bottom left, rgba(123, 47, 255, 0.08) 0%, transparent 30%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.96) 0%, rgba(8, 12, 22, 1) 100%);
  }

  .li-cta-copy,
  .li-cta-actions-wrap {
    min-width: 0;
  }

  .li-cta-heading {
    max-width: 15ch;
  }

  .li-cta-body {
    max-width: 42rem;
  }

  .li-cta-actions-wrap {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
  }

  .li-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .li-cta-primary {
    box-shadow: 0 20px 48px rgba(0, 229, 255, 0.16);
  }

  .li-cta-reassurance {
    margin: 0;
    max-width: 26rem;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  @media (max-width: 1100px) {
    .li-hero-shell,
    .li-overview-shell,
    .li-funnel-shell,
    .li-ops-shell,
    .li-payments-shell,
    .li-cta-shell,
    .li-placeholder-grid--three {
      grid-template-columns: 1fr;
    }

    .li-hero-board-grid,
    .li-overview-grid,
    .li-funnel-grid,
    .li-ops-grid,
    .li-ops-metrics,
    .li-payments-grid,
    .li-personas-grid,
    .li-placeholder-grid--two {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .li-funnel-statement,
    .li-ops-statement,
    .li-payments-statement,
    .li-funnel-board,
    .li-ops-board,
    .li-payments-board,
    .li-placeholder-card,
    .li-cta-shell {
      padding: var(--space-6);
    }

    .li-cta-actions {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }

    .li-cta-actions .btn {
      width: 100%;
      justify-content: center;
    }

    .li-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .li-actions .btn {
      width: 100%;
      justify-content: center;
    }
  }

/* ============================================================
   34. Demo Bridge Page
   ============================================================ */
  #demo-hero,
  #demo-explanation,
  #demo-explore,
  #demo-access {
    scroll-margin-top: var(--navbar-height);
  }

  .demo-hero-section,
  .demo-section,
  .demo-cta-section {
    position: relative;
    overflow: hidden;
  }

  .demo-hero-section {
    padding-block: var(--space-16);
    background: var(--color-bg-base);
  }

  .demo-section {
    padding-block: var(--space-16);
    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-elevated) 100%);
    border-top: 1px solid var(--color-border-subtle);
  }

  .demo-section--alt {
    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);
  }

  .demo-cta-section {
    padding-block: var(--space-14);
    background: var(--color-bg-base);
    border-top: 1px solid var(--color-border-subtle);
  }

  .dm-bg-grid,
  .dm-cta-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.024) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.024) 1px, transparent 1px);
    background-size: 48px 48px;
  }

  .dm-bg-grid {
    -webkit-mask-image: radial-gradient(ellipse 84% 72% at 50% 40%, black 28%, transparent 100%);
    mask-image: radial-gradient(ellipse 84% 72% at 50% 40%, black 28%, transparent 100%);
  }

  .dm-cta-grid {
    -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 46%, black 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 82% 72% at 50% 46%, black 30%, transparent 100%);
  }

  .dm-bg-orb,
  .dm-cta-orb {
    position: absolute;
    z-index: 0;
    border-radius: var(--radius-full);
    filter: blur(120px);
    pointer-events: none;
  }

  .dm-bg-orb--cyan,
  .dm-cta-orb--cyan {
    width: 480px;
    height: 480px;
    left: -110px;
    top: -110px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.12) 0%, transparent 72%);
  }

  .dm-bg-orb--violet,
  .dm-cta-orb--violet {
    width: 460px;
    height: 460px;
    right: -110px;
    bottom: -170px;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.11) 0%, transparent 72%);
  }

  .dm-hero-shell,
  .dm-overview-shell,
  .dm-section-header,
  .dm-cta-shell {
    position: relative;
    z-index: 1;
  }

  .dm-hero-shell,
  .dm-overview-shell,
  .dm-cta-shell {
    display: grid;
    gap: var(--space-10);
    align-items: start;
  }

  .dm-hero-shell,
  .dm-cta-shell {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.96fr);
  }

  .dm-overview-shell {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  }

  .dm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .dm-eyebrow-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    box-shadow: var(--glow-cyan);
  }

  .dm-heading,
  .dm-cta-heading {
    max-width: 14ch;
    margin-top: var(--space-6);
    font-size: clamp(var(--font-size-3xl), 5.6vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
  }

  .dm-body,
  .dm-cta-body {
    max-width: 42rem;
    margin-top: var(--space-6);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .dm-actions,
  .dm-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-7);
  }

  .dm-signals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-7);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .dm-signal {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
  }

  .dm-signal-sep {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.18);
  }

  .dm-panel,
  .dm-overview-statement,
  .dm-overview-card,
  .dm-explore-card,
  .dm-cta-shell {
    min-width: 0;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      0 28px 80px rgba(0, 0, 0, 0.26);
  }

  .dm-panel,
  .dm-cta-shell {
    padding: var(--space-8);
  }

  .dm-overview-statement,
  .dm-overview-card,
  .dm-explore-card {
    padding: var(--space-6);
  }

  .dm-panel {
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.08) 0%, transparent 30%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
  }

  .dm-panel-head,
  .dm-cta-actions-wrap {
    display: grid;
    gap: var(--space-3);
  }

  .dm-panel-kicker,
  .dm-panel-label,
  .dm-overview-statement-kicker,
  .dm-overview-card-kicker,
  .dm-explore-kicker,
  .dm-cta-kicker {
    display: inline-flex;
    align-self: flex-start;
    color: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
  }

  .dm-panel-title,
  .dm-overview-heading,
  .dm-explore-heading {
    max-width: 18ch;
  }

  .dm-overview-subheading,
  .dm-explore-subheading {
    max-width: 46rem;
  }

  .dm-panel-grid,
  .dm-overview-board,
  .dm-explore-grid {
    display: grid;
    gap: var(--space-4);
  }

  .dm-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-6);
  }

  .dm-overview-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dm-explore-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .dm-panel-card,
  .dm-overview-card,
  .dm-explore-card {
    min-width: 0;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    padding: var(--space-5);
  }

  .dm-panel-card--cyan,
  .dm-overview-card--cyan,
  .dm-explore-card--cyan { box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.8); }
  .dm-panel-card--violet,
  .dm-overview-card--violet,
  .dm-explore-card--violet { box-shadow: inset 3px 0 0 rgba(163, 112, 255, 0.8); }
  .dm-panel-card--amber,
  .dm-overview-card--amber,
  .dm-explore-card--amber { box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.82); }
  .dm-panel-card--mint,
  .dm-explore-card--mint { box-shadow: inset 3px 0 0 rgba(0, 255, 157, 0.78); }
  .dm-explore-card--slate { box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.8); }

  .dm-panel-card-title,
  .dm-overview-card-title,
  .dm-explore-title {
    margin-top: var(--space-3);
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .dm-panel-card-copy,
  .dm-overview-statement-body,
  .dm-overview-card-copy,
  .dm-explore-copy,
  .dm-cta-reassurance {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  .dm-section-header {
    position: relative;
    z-index: 1;
    margin-bottom: var(--space-10);
  }

  .dm-cta-shell {
    align-items: center;
    background:
      radial-gradient(circle at top right, rgba(0, 229, 255, 0.08) 0%, transparent 30%),
      radial-gradient(circle at bottom left, rgba(123, 47, 255, 0.08) 0%, transparent 30%),
      linear-gradient(160deg, rgba(13, 17, 31, 0.96) 0%, rgba(8, 12, 22, 1) 100%);
  }

  .dm-cta-copy,
  .dm-cta-actions-wrap {
    min-width: 0;
  }

  .dm-cta-primary {
    box-shadow: 0 20px 48px rgba(0, 229, 255, 0.16);
  }

  .dm-cta-reassurance {
    margin: 0;
    max-width: 28rem;
  }

  @media (max-width: 1200px) {
    .dm-explore-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 1100px) {
    .dm-hero-shell,
    .dm-overview-shell,
    .dm-cta-shell,
    .dm-overview-board,
    .dm-explore-grid {
      grid-template-columns: 1fr;
    }

    .dm-panel-grid {
      grid-template-columns: 1fr;
    }
  }

   @media (max-width: 768px) {
     .dm-panel,
     .dm-overview-statement,
     .dm-overview-card,
     .dm-explore-card,
     .dm-cta-shell {
       padding: var(--space-6);
     }

     .dm-actions,
     .dm-cta-actions {
       flex-direction: column;
       align-items: stretch;
     }

     .dm-actions .btn,
     .dm-cta-actions .btn {
       width: 100%;
       justify-content: center;
     }

     .dm-heading,
     .dm-cta-heading {
       max-width: 100%;
     }
   }