:root {
    /* ============================================================
       DESIGN TOKENS — Authkit "frosted glass cathedral at midnight"
       Pasted from UIUX/variables.css (see UIUX/DESIGN.md for spec).
       NOTE: --surface-steel-plate corrected from invalid 5-digit hex
       (#2f343) to #2f343e to match --color-steel-plate.
       Font stacks updated to lead with the real substitute typefaces
       (Inter / Space Grotesk / JetBrains Mono) since the aspirational
       names (Untitled Sans / aeonikPro / dotDigital) are not licensed
       or loaded — see index.html <link> for the Google Fonts import.
    ============================================================ */

    /* Colors */
    --color-midnight-canvas: #05060f;
    --color-steel-plate: #2f343e;
    --color-fog-veil: #9da7ba;
    --color-moon-mist: #c7d3ea;
    --color-frost-glow: #d1e4fa;
    --color-ice-highlight: #d8ecf8;
    --gradient-ice-highlight: linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%);
    --color-pure-white: #ffffff;
    --color-void-violet: #663af3;
    --color-blueprint-blue: #b6d9fc;
    --color-ember-glow: #e46d4c;
    --color-signal-blue: #027dea;
    --color-deep-teal: #269684;
    --color-gridline-blue: #3f4959;
    --color-glass-edge: #bad7f71f;
    --color-luminous-fill: #c7d3ea1f;

    /* Typography — Font Families (aspirational name first, real
       rendering font second, then system fallbacks) */
    --font-untitled-sans: 'Untitled Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-aeonikpro: 'aeonikPro', 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-dotdigital: 'dotDigital', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Typography — Scale */
    --text-caption: 12px;
    --leading-caption: 1.33;
    --text-body-sm: 14px;
    --leading-body-sm: 1.43;
    --text-body: 16px;
    --leading-body: 1.5;
    --tracking-body: -0.16px;
    --text-subheading: 18px;
    --leading-subheading: 1.33;
    --text-heading-sm: 24px;
    --leading-heading-sm: 1.17;
    --tracking-heading-sm: -0.24px;
    --text-heading: 28px;
    --leading-heading: 1.14;
    --text-heading-lg: 44px;
    --leading-heading-lg: 1.16;
    --text-display: 48px;
    --leading-display: 1.17;

    /* Typography — Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing */
    --spacing-unit: 4px;
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-36: 36px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-56: 56px;
    --spacing-100: 100px;
    --spacing-120: 120px;
    --spacing-200: 200px;

    /* Layout */
    --page-max-width: 1200px;
    --section-gap: 120px;
    --card-padding: 24px;
    --element-gap: 16px;

    /* Border Radius */
    --radius-sm: 2px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;
    --radius-3xl-2: 28px;
    --radius-3xl-3: 44px;
    --radius-full: 999px;
    --radius-full-2: 4999.5px;
    --radius-full-3: 9999px;

    /* Named Radii */
    --radius-cards: 16px;
    --radius-badges: 6px;
    --radius-inputs: 6px;
    --radius-modals: 16px;
    --radius-buttons: 999px;
    --radius-iconcontainers: 9999px;

    /* Shadows */
    --shadow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
    --shadow-md: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
    --shadow-subtle: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
    --shadow-subtle-2: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
    --shadow-subtle-3: rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset;
    --shadow-subtle-4: rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199, 211, 234, 0.05) 0px 24px 48px 0px inset, rgba(6, 6, 14, 0.7) 0px 24px 32px 0px;
    --shadow-subtle-5: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    --shadow-subtle-6: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset, rgba(0, 0, 0, 0.3) 0px 16px 32px 0px;
    --shadow-subtle-7: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset;
    --shadow-subtle-8: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset, rgba(199, 211, 234, 0.08) 0px 0px 0px 1px inset;
    --shadow-subtle-9: rgba(186, 214, 247, 0.24) 0px 0px 0px 1px inset;

    /* Surfaces */
    --surface-midnight-canvas: #05060f;
    --surface-steel-plate: #2f343e;
    --surface-frosted-glass: #bad6f708;
    --surface-deep-glass: #05060ff7;

    /* ------------------------------------------------------------
       Derived surface tints — NOT new hues. These are literal rgba
       values already documented in DESIGN.md's component prose
       (Glass Card, Pill Button, Text Input, Badge, elevation tiers)
       that variables.css never hoisted into named tokens. Collected
       here so the rest of this file can reference them instead of
       repeating raw rgba() everywhere. Used to differentiate the
       diagram nodes (formerly cyan/violet/green) by ELEVATION and
       opacity within the single blue-white family — never by hue.
    ------------------------------------------------------------ */
    --surface-frost-1: rgba(186, 214, 247, 0.03); /* Glass Card default */
    --surface-frost-2: rgba(186, 214, 247, 0.06); /* Pill Button / panel base */
    --surface-frost-3: rgba(199, 211, 234, 0.06); /* Text Input bg */
    --surface-frost-4: var(--color-luminous-fill); /* rgba(199,211,234,.12) Badge / elevated tile */
    --surface-frost-5: rgba(186, 214, 247, 0.12); /* Pill Button hover */
    --surface-header-glass: rgba(5, 6, 15, 0.85);
    --surface-nav-mobile: rgba(5, 6, 15, 0.95);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* overflow-x must be set on html too, not just body: html is the
     actual root scroller, and a fixed-width decorative element (see
     .hero::before) can still widen html's scrollable area even while
     body clips its own painted content. */
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body {
    font-family: var(--font-untitled-sans);
    color: var(--color-frost-glow);
    background: var(--color-midnight-canvas);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* Ambient blueprint grid — Background Grid Layer component */
  body::before {
    content: "";
    position: fixed; inset: 0;
    background-image:
      linear-gradient(var(--surface-frost-2) 1px, transparent 1px),
      linear-gradient(90deg, var(--surface-frost-2) 1px, transparent 1px);
    background-size: 80px 80px;
    z-index: -1;
    pointer-events: none;
  }

  .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .reveal.active { opacity: 1; transform: translateY(0); }

  .wrap { max-width: var(--page-max-width); margin: 0 auto; padding: 0 28px; }
  h1, h2, h3, h4 { font-family: var(--font-aeonikpro); font-weight: var(--font-weight-medium); line-height: var(--leading-heading); }
  h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); color: var(--color-ice-highlight); }
  p { color: var(--color-moon-mist); }
  a { text-decoration: none; color: inherit; }

  /* Bilingual Classes — hide the inactive language only. Never impose
     a display value on the active one: doing that (the old rule set
     forced block/inline-block) collides with any component that sets
     its own display on the same element — e.g. .kicker's inline-flex,
     or .form-group label's block — and silently overrides it, which
     is what broke both the contact-form labels and the kicker eyebrow
     lines. Leaving the active language's display untouched means it
     always falls through to its normal component/UA style. */
  body.en .lang-fr { display: none !important; }
  body.fr .lang-en { display: none !important; }

  /* Header & Nav */
  header {
    position: sticky; top: 0; z-index: 1000;
    background: var(--surface-header-glass);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 -1px 0 var(--color-glass-edge);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-16) 28px; max-width: var(--page-max-width); margin: 0 auto; }
  .brand { font-family: var(--font-untitled-sans); font-weight: var(--font-weight-semibold); font-size: 1.15rem; letter-spacing: 0.02em; color: var(--color-frost-glow); display: flex; align-items: center; gap: var(--spacing-8); }
  .brand-dot { width: var(--spacing-12); height: var(--spacing-12); background: var(--color-frost-glow); border-radius: var(--radius-full-3); box-shadow: var(--shadow-sm); }

  nav.links { display: flex; align-items: center; gap: var(--spacing-24); }
  nav.links a { font-family: var(--font-untitled-sans); font-size: 0.9rem; font-weight: var(--font-weight-medium); color: var(--color-moon-mist); transition: color .2s; }
  nav.links a:hover { color: var(--color-frost-glow); }

  .controls { display: flex; align-items: center; gap: var(--spacing-16); }
  .lang-toggle {
    background: transparent; color: var(--color-frost-glow); border: none; border-radius: var(--radius-buttons);
    box-shadow: var(--shadow-subtle);
    padding: var(--spacing-8) var(--spacing-16); font-family: var(--font-untitled-sans); font-weight: var(--font-weight-medium); font-size: var(--text-body-sm); cursor: pointer;
    transition: background .2s, box-shadow .2s;
  }
  .lang-toggle:hover { background: var(--surface-frost-5); }

  /* Violet CTA Button — the sole chromatic accent in the whole system.
     Shared by the header "Initialize" CTA and the form submit button
     (both use the same .cta-btn class), so one treatment covers both
     consistently without touching HTML structure. Radius/padding per
     DESIGN.md's literal Violet CTA Button spec (6px), which overrides
     the general "999px on all buttons" Do's rule for this one component. */
  .cta-btn {
    background: var(--color-void-violet); color: var(--color-pure-white); border-radius: var(--radius-md);
    padding: var(--spacing-12) var(--spacing-24); font-family: var(--font-untitled-sans); font-weight: var(--font-weight-medium); font-size: 0.95rem; cursor: pointer;
    transition: transform .2s, box-shadow .2s; border: none;
  }
  .cta-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .menu-btn { display: none; background: none; border: none; color: var(--color-moon-mist); font-size: 1.5rem; cursor: pointer; }

  /* Global Layout */
  .section-padding { padding: var(--spacing-100) 0; box-shadow: inset 0 1px 0 var(--color-glass-edge); position: relative; }
  .section-head { text-align: center; max-width: 70ch; margin: 0 auto var(--spacing-56); }
  .section-head h2 { margin-bottom: var(--spacing-16); }

  /* Section Eyebrow Label — dotDigital caps flanked by fading hairline
     lines. Kept inline within its (already center-aligned) container
     rather than forced into AuthKit's full standalone centered block,
     per the re-skin-not-relayout guidance. */
  .kicker {
    display: inline-flex; align-items: center; gap: var(--spacing-12);
    font-family: var(--font-dotdigital); font-weight: var(--font-weight-regular); font-size: 15px;
    color: var(--color-moon-mist); text-transform: uppercase; letter-spacing: 0.10em;
    margin-bottom: var(--spacing-24);
  }
  .kicker::before, .kicker::after { content: ''; height: 1px; width: 40px; background: var(--color-glass-edge); }
  .kicker::before { background: linear-gradient(to right, transparent, var(--color-glass-edge)); }
  .kicker::after { background: linear-gradient(to left, transparent, var(--color-glass-edge)); }

  /* Hero Architecture Diagram */
  .hero { padding: 80px 0 80px; position: relative; }
  .hero::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    left: 50%; top: -80px; width: 1200px; height: 600px; transform: translateX(-50%);
    background: conic-gradient(at 50% -5%, transparent 45%, rgba(124,145,182,0.3) 49%, rgba(124,145,182,0.5) 50%, rgba(124,145,182,0.3) 51%, transparent 55%);
  }
  .hero-content { text-align: center; max-width: 900px; margin: 0 auto var(--spacing-56); }
  .hero h1 {
    font-size: clamp(2.5rem, 4vw, 4rem); margin-bottom: var(--spacing-24);
    color: var(--color-ice-highlight);
    background: var(--gradient-ice-highlight);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .hero h1 em { font-style: normal; color: var(--color-moon-mist); -webkit-text-fill-color: var(--color-moon-mist); }
  .hero p.lede { color: var(--color-moon-mist); font-size: 1.15rem; margin: 0 auto var(--spacing-40); max-width: 60ch; }

  .complex-diagram {
    position: relative; width: 100%; height: 400px;
    background: var(--surface-frost-1); border-radius: var(--radius-cards);
    backdrop-filter: blur(10px); padding: var(--spacing-40);
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: var(--shadow-subtle-4);
    overflow: hidden;
  }
  .diagram-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .diagram-lines path { fill: none; }

  /* Always-on wires — the permanent circuit, dim and static */
  .link-base { stroke: var(--color-glass-edge); stroke-width: 1.5; }

  /* Traveling signal — a bright comet running the wire on a loop.
     dasharray "60 400" = one visible 60-unit head + a 400-unit gap,
     so only one pulse is in flight per wire at a time; -460 offset
     is the full pattern length, so the loop has no visible seam. */
  .link-pulse {
    stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 60 400; animation: signalTravel 3.6s linear infinite;
  }
  .path-crm, .path-webhooks, .path-docs { stroke: var(--color-blueprint-blue); opacity: 0.85; }
  .path-action, .path-audit { stroke: var(--color-frost-glow); opacity: 0.85; }

  @keyframes signalTravel { to { stroke-dashoffset: -460; } }

  /* Hover a node -> its own wire brightens, glows, and speeds up.
     Pure CSS via :has(), scoped to the shared .complex-diagram ancestor. */
  .complex-diagram:has(.n-crm:hover) .path-crm,
  .complex-diagram:has(.n-webhooks:hover) .path-webhooks,
  .complex-diagram:has(.n-docs:hover) .path-docs,
  .complex-diagram:has(.n-action:hover) .path-action,
  .complex-diagram:has(.n-audit:hover) .path-audit {
    opacity: 1; stroke-width: 3; animation-duration: 1.4s;
    filter: drop-shadow(0 0 6px currentColor);
  }
  .complex-diagram:has(.n-crm:hover) .path-crm,
  .complex-diagram:has(.n-webhooks:hover) .path-webhooks,
  .complex-diagram:has(.n-docs:hover) .path-docs { color: var(--color-blueprint-blue); }
  .complex-diagram:has(.n-action:hover) .path-action,
  .complex-diagram:has(.n-audit:hover) .path-audit { color: var(--color-frost-glow); }

  .diagram-col { display: flex; flex-direction: column; gap: var(--spacing-24); z-index: 1; width: 25%; }
  .diagram-col.center { width: 40%; align-items: center; }

  .c-node {
    background: var(--surface-frost-2); border-radius: var(--radius-md);
    padding: var(--spacing-16); font-family: var(--font-untitled-sans); font-weight: var(--font-weight-medium); font-size: 0.85rem; color: var(--color-frost-glow);
    box-shadow: var(--shadow-subtle-4); position: relative; text-align: center;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }
  .c-node::before { content: ''; position: absolute; left: -1px; top: 20%; height: 60%; width: 2px; background: var(--color-glass-edge); }
  .c-node.output::before { left: auto; right: -1px; background: var(--color-glass-edge); }
  .c-node:hover { box-shadow: var(--shadow-subtle-9), var(--shadow-sm); transform: translateY(-2px); }

  .core-engine {
    background: radial-gradient(circle at center, var(--surface-frost-4) 0%, var(--color-midnight-canvas) 100%);
    border-radius: var(--radius-cards); padding: var(--spacing-24); text-align: center;
    box-shadow: var(--shadow-subtle-9), var(--shadow-sm); width: 100%; position: relative;
  }
  /* Breathing signal rings — the core reads as transmitting, not idle */
  .core-engine::before, .core-engine::after {
    content: ''; position: absolute; inset: -16px; border-radius: inherit;
    border: 1px solid var(--color-glass-edge); opacity: 0;
    animation: corePulse 3.2s ease-out infinite; pointer-events: none;
  }
  .core-engine::after { animation-delay: 1.6s; }
  @keyframes corePulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.18); opacity: 0; }
  }
  .engine-title { font-family: var(--font-aeonikpro); font-weight: var(--font-weight-medium); font-size: 1.2rem; color: var(--color-ice-highlight); margin-bottom: var(--spacing-16); }
  .engine-tags { display: flex; gap: var(--spacing-8); justify-content: center; flex-wrap: wrap; }
  .engine-tags span { font-family: var(--font-untitled-sans); font-weight: var(--font-weight-medium); font-size: 0.7rem; padding: 4px var(--spacing-8); background: var(--surface-frost-4); border-radius: var(--radius-badges); color: var(--color-frost-glow); box-shadow: var(--shadow-subtle); }

  @media (prefers-reduced-motion: reduce) {
    .link-pulse, .core-engine::before, .core-engine::after { animation: none !important; }
  }

  /* Services — 6-card grid (3 x 2) */
  .services-wrapper { padding: var(--spacing-100) 0 var(--spacing-120); box-shadow: inset 0 1px 0 var(--color-glass-edge); }

  .services-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24);
  }

  .service-card {
    --card-delay: 0s;
    position: relative; display: flex; flex-direction: column;
    background: var(--surface-frost-1); border-radius: var(--radius-cards);
    padding: var(--spacing-32); box-shadow: var(--shadow-subtle-4);
    overflow: hidden; isolation: isolate;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--card-delay);
  }
  .service-card.reveal { transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--card-delay), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--card-delay); }
  .services-grid .service-card:nth-child(1) { --card-delay: 0s; }
  .services-grid .service-card:nth-child(2) { --card-delay: 0.08s; }
  .services-grid .service-card:nth-child(3) { --card-delay: 0.16s; }
  .services-grid .service-card:nth-child(4) { --card-delay: 0.24s; }
  .services-grid .service-card:nth-child(5) { --card-delay: 0.32s; }
  .services-grid .service-card:nth-child(6) { --card-delay: 0.4s; }

  /* Hairline border reveal — the one restrained hover effect; no glow,
     no rotation, no color shift, per "fresh, clean, not exaggerated". */
  .service-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, var(--color-glass-edge), transparent 40%, transparent 60%, var(--color-glass-edge));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity 0.5s ease; pointer-events: none;
  }

  .service-card:hover, .service-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--shadow-subtle-6);
  }
  .service-card:hover::after, .service-card:focus-within::after { opacity: 1; }

  .service-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12);
    margin-bottom: var(--spacing-24);
  }
  .service-card-index {
    font-family: var(--font-dotdigital); font-size: 0.75rem; letter-spacing: 0.10em;
    color: var(--color-fog-veil);
  }
  .service-card-tags {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing-8);
  }
  .tag {
    font-family: var(--font-untitled-sans); font-weight: var(--font-weight-medium);
    font-size: 0.7rem; letter-spacing: 0.02em; white-space: nowrap;
    color: var(--color-moon-mist); background: var(--surface-frost-3);
    padding: 3px var(--spacing-8); border-radius: var(--radius-badges);
    box-shadow: var(--shadow-subtle);
  }

  .service-card-icon {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    color: var(--color-frost-glow); background: var(--surface-frost-4);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-subtle-9), var(--shadow-sm);
    margin-bottom: var(--spacing-24);
    transition: transform 0.4s ease;
  }
  .service-card-icon svg { width: 26px; height: 26px; }
  .service-card:hover .service-card-icon { transform: scale(1.04); }

  .service-card h3 {
    font-family: var(--font-aeonikpro); font-weight: var(--font-weight-bold);
    font-size: 1.2rem; line-height: 1.25; color: var(--color-ice-highlight);
    margin-bottom: var(--spacing-8);
  }
  .service-card-desc {
    font-family: var(--font-untitled-sans); font-size: 0.82rem; line-height: 1.5;
    color: var(--color-fog-veil);
    margin-bottom: var(--spacing-32); flex-grow: 1;
  }

  .service-card-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-top: auto; align-self: flex-start;
    border-radius: var(--radius-full-3); color: var(--color-frost-glow);
    background: var(--surface-frost-2); box-shadow: var(--shadow-subtle);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
  }
  .service-card:hover .service-card-arrow { transform: translateX(4px); background: var(--surface-frost-5); }

  @media (max-width: 900px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .services-grid { grid-template-columns: 1fr; }
  }

  /* Stats Section — Glass Card; numbers set in dotDigital for its
     tabular-figure ("tnum") behavior, which keeps the live counter
     animation from jittering in width as digits change. */
  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); text-align: center; }
  .stat-card {
    background: var(--surface-frost-1); border-radius: var(--radius-cards); padding: var(--spacing-40) var(--spacing-20);
    box-shadow: var(--shadow-subtle-4);
  }
  .stat-number { font-size: 3rem; font-family: var(--font-dotdigital); font-weight: var(--font-weight-regular); font-variant-numeric: tabular-nums; color: var(--color-ice-highlight); margin-bottom: var(--spacing-8); }
  .stat-number span { color: var(--color-frost-glow); }
  .stat-label { font-family: var(--font-untitled-sans); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-fog-veil); }

  /* ROI Calculator */
  .roi { background: radial-gradient(circle at 50% 50%, var(--surface-frost-2), transparent 70%); }
  .roi-box {
    background: var(--surface-frost-1); border-radius: var(--radius-cards);
    padding: var(--spacing-48); display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
    box-shadow: var(--shadow-subtle-4);
  }
  .roi-inputs label { display: block; font-family: var(--font-untitled-sans); font-weight: var(--font-weight-medium); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-fog-veil); margin-bottom: var(--spacing-12); margin-top: var(--spacing-32); }
  .roi-inputs label:first-child { margin-top: 0; }
  .roi-inputs input[type="range"] { -webkit-appearance: none; width: 100%; height: 4px; background: var(--surface-frost-3); outline: none; border-radius: var(--radius-sm); }
  .roi-inputs input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: var(--radius-full-3);
    background: var(--color-frost-glow); cursor: pointer; box-shadow: var(--shadow-sm);
  }
  .roi-inputs .val { color: var(--color-ice-highlight); font-weight: var(--font-weight-semibold); float: right; font-size: 1rem; font-family: var(--font-dotdigital); }

  .roi-result { text-align: center; border-left: 1px dashed var(--color-glass-edge); padding-left: 64px; position: relative; }
  .roi-result::before { content: 'SYSTEM OUTPUT'; position: absolute; top: -20px; left: 64px; font-family: var(--font-dotdigital); font-size: 0.7rem; color: var(--color-fog-veil); letter-spacing: 0.15em; }
  .roi-result .figure { font-size: clamp(2.5rem, 5vw, 4.5rem); font-family: var(--font-dotdigital); font-weight: var(--font-weight-regular); font-variant-numeric: tabular-nums; color: var(--color-ice-highlight); line-height: 1; margin-bottom: var(--spacing-16); }
  .roi-result .figure span { color: var(--color-frost-glow); }

  /* Form */
  .contact-wrapper { max-width: 700px; margin: 0 auto; background: var(--surface-frost-1); padding: var(--spacing-48); border-radius: var(--radius-cards); box-shadow: var(--shadow-subtle-4); }
  .form-group { margin-bottom: var(--spacing-24); }
  .form-group label { display: block; font-family: var(--font-untitled-sans); font-weight: var(--font-weight-medium); font-size: 0.85rem; color: var(--color-moon-mist); margin-bottom: var(--spacing-8); text-transform: uppercase; letter-spacing: 0.05em; }
  .form-control {
    width: 100%; background: var(--surface-frost-3); box-shadow: var(--shadow-subtle); border: none; border-radius: var(--radius-inputs);
    padding: var(--spacing-16); color: var(--color-pure-white); font-family: var(--font-untitled-sans); font-size: 1rem; transition: box-shadow 0.3s;
  }
  .form-control:focus { outline: none; box-shadow: var(--shadow-subtle-9); }
  textarea.form-control { resize: vertical; min-height: 120px; }

  footer { background: var(--color-midnight-canvas); color: var(--color-fog-veil); padding: var(--spacing-56) 0 var(--spacing-40); text-align: center; box-shadow: inset 0 1px 0 var(--color-glass-edge); }
  footer .brand { justify-content: center; color: var(--color-frost-glow); margin-bottom: var(--spacing-16); }
  footer p { color: var(--color-fog-veil); }

  /* ============================================================
     Nav "Services" dropdown — pure CSS, hover + focus-within.
     Shared by index.html and every services/*.html page.
  ============================================================ */
  .nav-dropdown { position: relative; }
  .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
  .nav-dropdown-caret {
    width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); margin-top: -3px; transition: transform 0.25s ease;
  }
  .nav-dropdown:hover .nav-dropdown-caret, .nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(225deg); margin-top: 3px; }

  /* The outer panel is the hover hit-area: it starts flush at top:100%
     (zero gap against the trigger) so the mouse never crosses a dead
     zone between button and menu. The visible glass box is the inner
     element, pushed down by the outer's own padding-top — that padding
     is still part of the outer box, so it stays hoverable too. This is
     what keeps the menu open while moving the pointer down into it. */
  .nav-dropdown-panel {
    position: absolute; top: 100%; left: 0; padding-top: var(--spacing-12);
    width: 300px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(4px);
    z-index: 500;
  }
  .nav-dropdown-panel-inner {
    background: var(--surface-deep-glass); border-radius: var(--radius-cards);
    box-shadow: var(--shadow-subtle-6); backdrop-filter: blur(24px);
    padding: var(--spacing-8);
    display: flex; flex-direction: column; gap: 2px;
  }
  .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
  .nav-dropdown-item { display: flex; gap: var(--spacing-12); padding: var(--spacing-12); border-radius: var(--radius-md); transition: background 0.2s; align-items: flex-start; }
  .nav-dropdown-item:hover, .nav-dropdown-item:focus { background: var(--surface-frost-2); }
  .nav-dropdown-item-icon {
    flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: var(--surface-frost-3); color: var(--color-frost-glow); border-radius: var(--radius-md);
  }
  .nav-dropdown-item-icon svg { width: 17px; height: 17px; }
  .nav-dropdown-item-title { display: block; font-family: var(--font-untitled-sans); font-size: 0.82rem; font-weight: var(--font-weight-semibold); color: var(--color-ice-highlight); }
  .nav-dropdown-item-desc { display: block; font-family: var(--font-untitled-sans); font-size: 0.72rem; color: var(--color-fog-veil); margin-top: 2px; line-height: 1.4; }

  /* ============================================================
     Breadcrumb — sits just under the header on every sub-page
  ============================================================ */
  .subnav { padding: var(--spacing-24) 0 0; }
  .subnav .wrap {
    display: flex; align-items: center; gap: var(--spacing-8);
    font-family: var(--font-dotdigital); font-size: 0.72rem; letter-spacing: 0.05em;
    color: var(--color-fog-veil); text-transform: uppercase;
  }
  .subnav a { color: var(--color-fog-veil); transition: color 0.2s; }
  .subnav a:hover { color: var(--color-frost-glow); }
  .subnav .sep { opacity: 0.4; }
  .subnav .current { color: var(--color-frost-glow); }

  /* ============================================================
     Service detail template — hero, framed photo, flow diagram,
     capability grid, case study, tech tags, closing CTA band.
  ============================================================ */
  .service-hero { padding: var(--spacing-40) 0 var(--spacing-100); }
  .service-hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--spacing-56); align-items: center; }
  .service-hero-index { font-family: var(--font-dotdigital); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--color-blueprint-blue); }
  .service-hero h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1.15; margin: var(--spacing-16) 0 var(--spacing-20); color: #fff; }
  .service-hero .lede { font-size: 1.1rem; max-width: 52ch; margin-bottom: var(--spacing-24); }
  .service-hero-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-bottom: var(--spacing-32); }
  .service-hero-actions { display: flex; align-items: center; gap: var(--spacing-24); flex-wrap: wrap; }
  .service-hero-actions .text-link { font-family: var(--font-untitled-sans); font-weight: var(--font-weight-semibold); font-size: 0.9rem; color: var(--color-frost-glow); border-bottom: 1px solid var(--color-glass-edge); padding-bottom: 2px; transition: border-color 0.2s; }
  .service-hero-actions .text-link:hover { border-color: var(--color-frost-glow); }

  .framed-image { position: relative; border-radius: var(--radius-cards); overflow: hidden; box-shadow: var(--shadow-subtle-4); }
  .framed-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .framed-image::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--color-glass-edge); pointer-events: none; z-index: 2; }
  .framed-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(195deg, transparent 45%, var(--color-midnight-canvas) 145%); pointer-events: none; }

  .service-section { padding: var(--spacing-100) 0; box-shadow: inset 0 1px 0 var(--color-glass-edge); }
  .service-section-head { max-width: 70ch; margin-bottom: var(--spacing-56); }
  .service-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .service-section-head h2 { margin-top: var(--spacing-16); }
  .eyebrow-sm { font-family: var(--font-dotdigital); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--color-blueprint-blue); text-transform: uppercase; }

  .flow-track { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-16); position: relative; }
  .flow-step { flex: 1; text-align: center; position: relative; z-index: 1; }
  .flow-step-num {
    width: 48px; height: 48px; margin: 0 auto var(--spacing-16); display: flex; align-items: center; justify-content: center;
    background: var(--surface-frost-2); border-radius: var(--radius-full-3); color: var(--color-frost-glow);
    font-family: var(--font-aeonikpro); font-weight: var(--font-weight-bold); font-size: 1.1rem;
    box-shadow: var(--shadow-subtle-9), var(--shadow-sm);
  }
  .flow-step h4 { font-family: var(--font-aeonikpro); font-size: 0.95rem; color: #fff; margin-bottom: 6px; }
  .flow-step p { font-size: 0.82rem; max-width: 22ch; margin: 0 auto; }
  .flow-connector {
    position: absolute; top: 24px; left: 0; right: 0; height: 1px; z-index: 0;
    background: repeating-linear-gradient(to right, var(--color-glass-edge) 0 8px, transparent 8px 16px);
  }

  .capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-16); }
  .capability-card { background: var(--surface-frost-1); border-radius: var(--radius-cards); padding: var(--spacing-24); box-shadow: var(--shadow-subtle-3); }
  .capability-card-icon {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: var(--surface-frost-4); color: var(--color-frost-glow); border-radius: var(--radius-lg); margin-bottom: var(--spacing-16);
  }
  .capability-card-icon svg { width: 20px; height: 20px; }
  .capability-card h4 { font-family: var(--font-aeonikpro); font-size: 1rem; color: #fff; margin-bottom: 8px; }
  .capability-card p { font-size: 0.85rem; }

  .case-study { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--spacing-40); align-items: center; background: var(--surface-frost-1); border-radius: var(--radius-cards); padding: var(--spacing-32); box-shadow: var(--shadow-subtle-4); }
  .case-study .framed-image { aspect-ratio: 4 / 3; }
  .case-study h3 { font-family: var(--font-aeonikpro); font-size: 1.5rem; color: #fff; margin: var(--spacing-8) 0 var(--spacing-12); }
  .case-study-metrics { display: flex; gap: var(--spacing-24); margin-top: var(--spacing-24); flex-wrap: wrap; }
  .case-study-metric strong { display: block; font-family: var(--font-aeonikpro); font-size: 1.5rem; color: var(--color-ice-highlight); }
  .case-study-metric span { font-size: 0.7rem; color: var(--color-fog-veil); text-transform: uppercase; letter-spacing: 0.05em; }

  .tech-row { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }
  .tech-row .tag { font-size: 0.78rem; padding: 6px var(--spacing-16); }

  .page-cta { text-align: center; background: var(--surface-frost-1); border-radius: var(--radius-cards); padding: var(--spacing-56) var(--spacing-32); box-shadow: var(--shadow-subtle-4); }
  .page-cta h2 { margin-bottom: var(--spacing-16); }
  .page-cta p { max-width: 56ch; margin: 0 auto var(--spacing-32); }

  /* Responsive Media Queries */
  @media (max-width: 900px) {
    .complex-diagram { flex-direction: column; height: auto; gap: var(--spacing-40); }
    .diagram-col, .diagram-col.center { width: 100%; }
    /* the wire geometry is tuned to the 3-column layout only */
    .diagram-lines { display: none; }
    .roi-box { grid-template-columns: 1fr; padding: var(--spacing-32); }
    .roi-result { border-left: none; border-top: 1px dashed var(--color-glass-edge); padding-left: 0; padding-top: var(--spacing-40); }
    .roi-result::before { left: 50%; transform: translateX(-50%); top: 10px; }
    .menu-btn { display: block; }
    /* max-height + overflow-y:auto instead of a fixed height: the
       Services item now expands into an always-visible 6-item list
       on mobile, and a hardcoded height clips/mispositions content
       (and its trigger link) whenever the drawer's content is taller
       than that fixed number — this scrolls instead of clipping. */
    nav.links {
      position: fixed; top: 70px; left: 0; width: 100%; max-height: 0; overflow: hidden auto;
      background: var(--surface-nav-mobile); backdrop-filter: blur(10px);
      flex-direction: column; justify-content: flex-start; gap: var(--spacing-32);
      padding: 0; transition: max-height 0.4s ease; box-shadow: inset 0 -1px 0 var(--color-glass-edge);
    }
    nav.links.open { max-height: calc(100vh - 70px); padding: var(--spacing-32) 0; }

    .nav-dropdown-panel {
      position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
      width: 100%; padding-top: var(--spacing-12);
    }
    .nav-dropdown-panel-inner {
      background: transparent; box-shadow: none; backdrop-filter: none; padding: 0;
    }
    .service-hero .wrap { grid-template-columns: 1fr; }
    .service-hero-image { order: -1; }
    .flow-track { flex-direction: column; gap: var(--spacing-40); align-items: stretch; }
    .flow-connector { display: none; }
    .capability-grid { grid-template-columns: repeat(2, 1fr); }
    .case-study { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .capability-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
  }