/* =================================================================
           Aiyoda — modern enterprise SaaS landing
           Dark-dominant, navy + green, system sans-serif, hairline borders.
           ================================================================= */

        :root {
            --navy-950: #060f1d;
            --navy-900: #0a1a2e;
            --navy-850: #0c2138;
            --navy-800: #0d2744;
            --navy-700: #14304f;
            --navy-600: #1c4068;

            --green-500: #16a34a;
            --green-400: #22c55e;
            --green-300: #4ade80;

            /* Product brand colours */
            --inventra:        #9CC7F2;
            --inventra-bright: #9CC7F2;
            --accent-blue:     #005088;
            --accent-blue-d:   #003d6b;
            --inventra-tint:   rgba(156, 199, 242, 0.15);
            --inventra-glow:   rgba(156, 199, 242, 0.35);

            --spectrum-brand:  #16884F;
            --spectrum-bright: #2dca77;
            --spectrum-tint:   rgba(22, 136, 79, 0.20);
            --spectrum-glow:   rgba(45, 202, 119, 0.35);

            --horizon:        #8B5CF6;
            --horizon-bright: #A78BFA;
            --horizon-deep:   #7C3AED;
            --horizon-tint:   rgba(139, 92, 246, 0.18);
            --horizon-glow:   rgba(167, 139, 250, 0.45);

            --ink-0:   #ffffff;
            --ink-50:  #f6f8fb;
            --ink-100: #e6ecf3;
            --ink-200: #c7d2de;
            --ink-300: #94a3b8;
            --ink-400: #64748b;
            --ink-700: #1f2937;
            --ink-900: #0a1628;

            --hairline:        rgba(255, 255, 255, 0.08);
            --hairline-strong: rgba(255, 255, 255, 0.14);
            --hairline-soft:   rgba(255, 255, 255, 0.04);

            --glow-green: rgba(34, 197, 94, 0.18);
            --glow-navy:  rgba(28, 64, 104, 0.55);
            --glow-cyan:  rgba(94, 234, 212, 0.18);

            --radius-sm: 8px;
            --radius-md: 14px;
            --radius-lg: 20px;
            --radius-xl: 28px;

            --container: 1360px;
            --container-tight: 960px;
            --section-y: clamp(96px, 12vw, 160px);
            --nav-h: 72px;

            --font: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
            --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

            --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        *, *::before, *::after { box-sizing: border-box; }
        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
            background: var(--navy-950);
        }
        body {
            margin: 0;
            font-family: var(--font);
            font-size: 17px;
            line-height: 1.65;
            color: var(--ink-200);
            background: var(--navy-950);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            overflow-x: hidden;
        }
        img, video { max-width: 100%; display: block; }
        a { color: inherit; text-decoration: none; }
        button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
        ul { margin: 0; padding: 0; list-style: none; }
        p { margin: 0; }
        h1, h2, h3, h4, h5 { margin: 0; color: var(--ink-0); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }

        :focus-visible {
            outline: 2px solid var(--green-400);
            outline-offset: 3px;
            border-radius: 4px;
        }

        /* Scroll progress bar */
        .scroll-progress {
            position: fixed;
            top: 0; left: 0;
            height: 2px;
            width: 0%;
            background: linear-gradient(90deg, var(--green-500), var(--green-300));
            z-index: 200;
            box-shadow: 0 0 8px rgba(34,197,94,0.45);
            transition: width 0.08s linear;
            pointer-events: none;
        }

        /* ============================================================
           Launch banner — sticky, slim, with canvas vortex behind
           ============================================================ */
        /* Single fixed wrapper — banner + nav as one block.
           Fixed on ALL screen sizes so the banner can collapse on laptop too. */
        .site-header {
            position: fixed;
            left: 0; right: 0; top: 0;
            z-index: 102;
            transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: transform;
        }
        .site-header.banner-hidden {
            transform: translateY(var(--banner-h-neg, -90px));
        }

        .countdown-bar {
            height: clamp(112px, 12vw, 148px);
            background: #00060f;
            border-bottom: 1px solid rgba(156, 199, 242, 0.18);
            overflow: hidden;
            isolation: isolate;
            color: var(--ink-100);
        }

        @media (max-width: 820px) {
            /* White heading on mobile only */
            .cd-banner-h {
                color: #ffffff !important;
                text-shadow: none !important;
            }
        }
        .cd-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        .cd-banner-inner {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: clamp(16px, 2.5vw, 40px);
            align-items: center;
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 clamp(20px, 3vw, 48px);
            height: 100%;
        }

        /* ----- Left: pill + heading + subtitle ----- */
        .cd-banner-copy {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;
        }
        .cd-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 5px 14px;
            border-radius: 999px;
            background: rgba(124, 58, 237, 0.32);
            border: 1px solid rgba(167, 139, 250, 0.55);
            font-family: var(--mono);
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: #C4B5FD;
            align-self: flex-start;
        }
        .cd-pill-dot {
            width: 5px; height: 5px;
            border-radius: 50%;
            background: #A78BFA;
            box-shadow: 0 0 6px #A78BFA;
            animation: cdPillPulse 1.4s ease-in-out infinite;
        }
        @keyframes cdPillPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50%      { opacity: 0.4; transform: scale(1.7); }
        }
        .cd-banner-h {
            font-size: clamp(24px, 2.8vw, 38px);
            font-weight: 700;
            line-height: 1.05;
            letter-spacing: -0.01em;
            color: #C4B5FD;
            text-shadow:
                0 0 14px rgba(167, 139, 250, 0.75),
                0 0 32px rgba(139, 92, 246, 0.6),
                0 0 70px rgba(124, 58, 237, 0.5),
                0 0 130px rgba(196, 181, 253, 0.32);
            margin: 0;
            white-space: nowrap;
        }
        .cd-banner-sub {
            font-family: var(--mono);
            font-size: 15px;
            color: #ffffff;
            letter-spacing: 0.04em;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ----- Centre: countdown clock ----- */
        .cd-banner-clock {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cd-clock {
            display: inline-flex;
            gap: 6px;
            align-items: flex-start;
        }
        .cd-cell {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .cd-num {
            background: rgba(10, 4, 26, 0.9);
            border: 1px solid rgba(167, 139, 250, 0.4);
            border-radius: 7px;
            width: clamp(56px, 5.8vw, 68px);
            height: clamp(56px, 5.8vw, 68px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--mono);
            font-size: clamp(24px, 2.6vw, 30px);
            font-weight: 600;
            color: #DDD0FF;
            text-shadow: 0 0 12px rgba(167, 139, 250, 0.8);
            box-shadow:
                0 0 20px rgba(124, 58, 237, 0.5),
                inset 0 1px 0 rgba(167, 139, 250, 0.16);
            font-variant-numeric: tabular-nums;
            transform-origin: center;
        }
        .cd-unit {
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: 0.22em;
            color: #ffffff;
            text-transform: uppercase;
        }
        .cd-sep {
            font-family: var(--mono);
            font-size: 22px;
            color: rgba(167, 139, 250, 0.45);
            font-weight: 300;
            padding-top: 14px;
            animation: cdBlink 1s step-end infinite;
        }
        @keyframes cdBlink {
            0%, 100% { opacity: 1; }
            50%      { opacity: 0.05; }
        }
        .cd-cell.tick .cd-num {
            animation: cdTick 0.45s var(--ease);
        }
        @keyframes cdTick {
            0%   { transform: scale(1); filter: brightness(1); }
            25%  { transform: scale(1.1); filter: brightness(1.5); }
            100% { transform: scale(1); filter: brightness(1); }
        }

        /* ----- Right: notify CTA (blue) ----- */
        .cd-banner-aside {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        .cd-notify {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 9px 22px;
            border: 1px solid rgba(156, 199, 242, 0.5);
            border-radius: 999px;
            background: rgba(3, 73, 122, 0.25);
            color: #9CC7F2;
            font-family: var(--mono);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            text-decoration: none;
            transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
        }
        .cd-notify i { font-size: 12px; }
        .cd-notify:hover {
            background: rgba(156, 199, 242, 0.18);
            border-color: rgba(156, 199, 242, 0.85);
            color: #c8e8f5;
            transform: translateY(-1px);
            box-shadow: 0 8px 22px rgba(156, 199, 242, 0.3);
        }

        /* ----- Live state (after launch) ----- */
        .countdown-bar.live .cd-clock,
        .countdown-bar.live .cd-banner-aside { display: none; }

        /* ----- Responsive ----- */
        @media (max-width: 1024px) {
            .countdown-bar { height: auto; min-height: 64px; }
            .cd-banner-inner {
                grid-template-columns: 1fr auto;
                gap: 16px;
                padding-top: 12px;
                padding-bottom: 12px;
                height: auto;
                justify-items: start;
            }
            .cd-banner-copy { align-items: flex-start; text-align: left; }
            .cd-banner-h, .cd-banner-sub { white-space: normal; }
            .cd-num { width: 40px !important; height: 40px !important; font-size: 16px !important; border-radius: 5px; }
            .cd-sep { font-size: 16px; padding-top: 10px; }
            .cd-clock { gap: 4px; }
        }
        @media (max-width: 640px) {
            .countdown-bar { height: auto; }
            .cd-banner-inner {
                grid-template-columns: 1fr;
                justify-items: center;
                gap: 10px;
                padding-top: 12px;
                padding-bottom: 12px;
            }
            .cd-banner-copy { align-items: center; text-align: center; }
            .cd-banner-h { font-size: 17px; white-space: normal; }
            .cd-pill { align-self: center; }
            .cd-banner-sub { display: none; }
        }
        @media (max-width: 480px) {
            /* Keep the countdown visible but compact so it fits small phones cleanly */
            .cd-num { width: 38px !important; height: 38px !important; font-size: 15px !important; }
            .cd-unit { font-size: 8.5px; letter-spacing: 0.08em; }
            .cd-sep { font-size: 14px; padding-top: 9px; }
            .cd-clock { gap: 3px; }
            .cd-banner-inner { padding-left: 16px; padding-right: 16px; }
        }
        @media (max-width: 340px) {
            /* Ultra-narrow safety: shrink a touch more so nothing clips */
            .cd-num { width: 34px !important; height: 34px !important; font-size: 13px !important; }
            .cd-sep { font-size: 12px; padding-top: 8px; }
        }

        section { scroll-margin-top: calc(var(--nav-h) + clamp(90px, 10vw, 120px)); }

        .wrap {
            width: 100%;
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 24px;
        }
        .wrap-tight {
            width: 100%;
            max-width: var(--container-tight);
            margin: 0 auto;
            padding: 0 24px;
        }

        /* ----------------------------------------------------------------
           Primitives
           ---------------------------------------------------------------- */
        .eyebrow {
            display: inline-block;
            font-family: var(--mono);
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--accent-blue);
        }
        .eyebrow.muted { color: var(--ink-300); }
        .eyebrow.dark { color: var(--accent-blue); }
        /* Spectrum-section eyebrows stay green (brand) */
        .module.spectrum .eyebrow,
        .viz.spectrum .eyebrow {
            color: var(--spectrum-bright);
        }

        .display {
            font-size: clamp(44px, 6.4vw, 84px);
            font-weight: 600;
            letter-spacing: -0.025em;
            line-height: 1.04;
            color: var(--ink-0);
        }
        .h2 {
            font-size: clamp(32px, 3.6vw, 52px);
            font-weight: 600;
            letter-spacing: -0.02em;
            line-height: 1.1;
            color: var(--ink-0);
        }
        .h2.dark { color: var(--ink-900); }
        .h3 {
            font-size: clamp(20px, 1.6vw, 24px);
            font-weight: 600;
            letter-spacing: -0.01em;
            line-height: 1.25;
            color: var(--ink-0);
        }

        .lead {
            font-size: 20px;
            line-height: 1.7;
            color: var(--ink-200);
            max-width: 64ch;
        }
        .body { font-size: 18px; line-height: 1.7; color: var(--ink-200); max-width: 64ch; }
        .meta { font-size: 14px; color: var(--ink-300); }

        .accent { color: #9CC7F2; }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: var(--font);
            font-weight: 500;
            font-size: 15px;
            padding: 12px 22px;
            border-radius: 10px;
            border: 1px solid transparent;
            cursor: pointer;
            transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.18s var(--ease), box-shadow 0.2s var(--ease);
            white-space: nowrap;
        }
        .btn-primary {
            background: var(--accent-blue);
            color: #ffffff;
            box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 30px -12px rgba(0,80,136,0.35);
        }
        .btn-primary:hover { background: var(--accent-blue-d); transform: translateY(-1px); }
        /* On dark hero / dark nav — flip to light blue so it's visible */
        .hero .btn-primary,
        .nav.dark-only .btn-primary {
            background: #9CC7F2;
            color: #0d2545;
            box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 12px 30px -12px rgba(156,199,242,0.4);
        }
        .hero .btn-primary:hover,
        .nav.dark-only .btn-primary:hover { background: #78B0E8; }
        .btn-ghost {
            background: transparent;
            color: var(--ink-900);
            border-color: rgba(13, 39, 68, 0.18);
        }
        .btn-ghost:hover { background: rgba(13, 39, 68, 0.04); border-color: rgba(13, 39, 68, 0.4); color: var(--ink-900); }
        .nav.dark-only .btn-ghost,
        .hero .btn-ghost,
        .final .btn-ghost,
        .mid-cta .btn-ghost {
            color: var(--ink-100);
            border-color: var(--hairline-strong);
        }
        .nav.dark-only .btn-ghost:hover,
        .hero .btn-ghost:hover,
        .final .btn-ghost:hover,
        .mid-cta .btn-ghost:hover {
            background: rgba(255,255,255,0.04);
            border-color: rgba(255,255,255,0.28);
            color: #fff;
        }
        .btn-light {
            background: var(--ink-0);
            color: var(--navy-900);
        }
        .btn-light:hover { background: var(--ink-50); transform: translateY(-1px); }
        .btn-link {
            color: var(--green-300);
            font-weight: 500;
            font-size: 15px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-link:hover { color: #fff; gap: 10px; }
        .btn-link i { transition: transform 0.2s var(--ease); }
        .btn-link:hover i { transform: translateX(2px); }

        /* Hairline gradient border (the "modern" trick) */
        .hairline-frame {
            position: relative;
            border-radius: var(--radius-lg);
            background:
                linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02)) border-box;
            padding: 1px;
        }
        .hairline-frame > .inner {
            background: var(--navy-900);
            border-radius: calc(var(--radius-lg) - 1px);
            overflow: hidden;
        }

        /* Reveal animation */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
            will-change: opacity, transform;
        }
        .reveal.in {
            opacity: 1;
            transform: none;
            will-change: auto;
        }

        /* Stagger child reveal — when parent has .reveal-stagger, children fade up in sequence */
        .reveal-stagger > * {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
            transition-delay: calc(var(--i, 0) * 70ms);
            will-change: opacity, transform;
        }
        .reveal-stagger.in > * {
            opacity: 1;
            transform: none;
            will-change: auto;
        }

        /* Hero entrance stagger (runs on load, not scroll) */
        @keyframes heroIn {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .hero-anim > * {
            opacity: 0;
            animation: heroIn 0.8s var(--ease) forwards;
            animation-delay: calc(var(--i, 0) * 110ms + 120ms);
        }

        /* Hero mesh slow drift */
        @keyframes heroDrift {
            0%   { transform: translate3d(0, 0, 0) scale(1); }
            50%  { transform: translate3d(-1.5%, 1%, 0) scale(1.03); }
            100% { transform: translate3d(0, 0, 0) scale(1); }
        }

        /* Pulse dot ripple */
        @keyframes pulseRing {
            0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.7; }
            80%  { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
            100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
        }

        /* Subtle breathing glow */
        @keyframes breathGlow {
            0%, 100% { opacity: 0.55; transform: scale(1); }
            50%      { opacity: 0.75; transform: scale(1.04); }
        }

        /* Badge shimmer */
        @keyframes badgeShimmer {
            0%   { transform: translateX(-120%); }
            60%  { transform: translateX(220%); }
            100% { transform: translateX(220%); }
        }

        /* Subtle hover float */
        @keyframes floatY {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-4px); }
        }

        /* ----------------------------------------------------------------
           Navigation
           ---------------------------------------------------------------- */
        .nav {
            position: relative;
            z-index: 1;
            background: rgba(255, 255, 255, 0.92);
            -webkit-backdrop-filter: saturate(180%) blur(16px);
            backdrop-filter: saturate(180%) blur(16px);
            border-bottom: 1px solid #e2e8f0;
            height: var(--nav-h);
        }
        .nav-inner {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
        }
        .nav-logo {
            display: inline-flex;
            align-items: center;
            transition: opacity 0.2s var(--ease);
        }
        .nav-logo:hover { opacity: 0.85; }
        .nav-logo img {
            height: 34px;
            width: auto;
            display: block;
        }
        .nav-links {
            display: flex;
            gap: 28px;
            align-items: center;
        }
        .nav-link {
            color: #000000;
            font-size: 18px;
            font-weight: 500;
            position: relative;
            padding: 6px 0;
            transition: color 0.2s var(--ease);
        }
        .nav-link:hover { color: var(--inventra); }
        .nav-link::after {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: -2px;
            height: 1.5px;
            background: var(--green-400);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.25s var(--ease);
        }
        .nav-link:hover::after { transform: scaleX(1); }

        /* Product nav links carry their brand colour */
        .nav-link--inventra { color: #005088; font-weight: 600; }
        .nav-link--inventra:hover { color: #00375f; }
        .nav-link--inventra::after { background: #005088; }
        .nav-link--spectrum { color: #16884F; font-weight: 600; }
        .nav-link--spectrum:hover { color: #0f6b3d; }
        .nav-link--spectrum::after { background: #16884F; }
        .nav-link--horizon { color: #7C3AED; font-weight: 600; }
        .nav-link--horizon:hover { color: #6D28D9; }
        .nav-link--horizon::after { background: #7C3AED; }

        /* Reviews dropdown — the three lead-generation landing pages.
           Opens on hover and on keyboard focus, so no JS is needed. */
        .nav-dd { position: relative; }
        .nav-dd-toggle {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 18px;
            font-weight: 500;
        }
        .nav-dd-toggle i { font-size: 11px; transition: transform 0.2s var(--ease); }
        .nav-dd:hover .nav-dd-toggle i,
        .nav-dd:focus-within .nav-dd-toggle i { transform: rotate(180deg); }

        .nav-dd-menu {
            position: absolute;
            top: calc(100% + 14px);
            left: 50%;
            transform: translateX(-50%) translateY(-6px);
            min-width: 300px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            box-shadow: 0 20px 44px -18px rgba(10, 22, 40, 0.28);
            padding: 8px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
            z-index: 30;
        }
        /* Invisible bridge so the menu survives the cursor crossing the gap. */
        .nav-dd-menu::before {
            content: "";
            position: absolute;
            left: 0; right: 0; top: -14px;
            height: 14px;
        }
        .nav-dd:hover .nav-dd-menu,
        .nav-dd:focus-within .nav-dd-menu {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        .nav-dd-menu a {
            display: block;
            padding: 10px 12px;
            border-radius: 9px;
            font-size: 14.5px;
            font-weight: 600;
            color: #0f172a;
            line-height: 1.35;
            transition: background 0.16s var(--ease), color 0.16s var(--ease);
        }
        .nav-dd-menu a span {
            display: block;
            font-size: 12.5px;
            font-weight: 400;
            color: #64748b;
            margin-top: 3px;
        }
        .nav-dd-menu a:hover { background: #f6f8fb; }
        .nav-dd-menu a.dd--inventra:hover { color: #005088; }
        .nav-dd-menu a.dd--spectrum:hover { color: #16884F; }
        .nav-dd-menu a.dd--horizon:hover  { color: #7C3AED; }

        .nav-cta { display: flex; gap: 10px; align-items: center; }
        .nav-cta .btn { padding: 9px 16px; font-size: 13.5px; }
        .nav-burger {
            display: none;
            width: 40px; height: 40px;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            color: var(--ink-900);
            font-size: 1.25rem;
        }
        .nav-burger:hover { background: rgba(13, 39, 68, 0.06); }

        .mobile-menu {
            position: fixed;
            top: calc(var(--nav-h) + 1px); /* overridden by JS to match site-header height */
            left: 0; right: 0; bottom: 0;
            background: #ffffff;
            transform: translateY(-100%);
            opacity: 0;
            pointer-events: none;
            transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
            z-index: 99;
            padding: 28px 24px;
            overflow-y: auto;
        }
        .mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
        .mobile-menu .nav-link {
            display: block;
            padding: 18px 0;
            border-bottom: 1px solid #e2e8f0;
            font-size: 17px;
            color: var(--ink-900);
        }
        .mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
        .mobile-cta .btn { width: 100%; }

        /* ----------------------------------------------------------------
           HERO
           ---------------------------------------------------------------- */
        .hero {
            position: relative;
            background: var(--navy-950);
            overflow: hidden;
            min-height: 92vh;
            display: flex;
            align-items: center;
        }
        .hero-mesh {
            position: absolute;
            inset: -10% -5% -10% -5%;
            background:
                radial-gradient(60% 50% at 22% 8%, var(--glow-navy), transparent 60%),
                radial-gradient(40% 40% at 78% 22%, var(--glow-green), transparent 65%),
                radial-gradient(50% 40% at 50% 95%, rgba(20,48,79,0.45), transparent 70%);
            filter: blur(40px);
            opacity: 0.95;
            pointer-events: none;
            animation: heroDrift 18s ease-in-out infinite;
            will-change: transform;
            z-index: 1;
        }
        .hero-stars {
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.85;
            z-index: 0;
        }
        .hero-grid {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
            background-size: 28px 28px;
            mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 35%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 35%, transparent 80%);
            pointer-events: none;
            z-index: 2;
        }
        .hero-inner { z-index: 3; }
        .hero-fade { z-index: 4; }
        .hero-inner {
            position: relative;
            text-align: center;
            margin: 0 auto;
            max-width: 920px;
            padding: 80px 24px 96px;
            width: 100%;
        }
        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            border-radius: 999px;
            background: rgba(156, 199, 242, 0.12);
            border: 1px solid rgba(156, 199, 242, 0.4);
            color: #9CC7F2;
            font-family: var(--mono);
            font-size: 18px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 28px;
        }
        .hero-pill .dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--accent-blue);
            box-shadow: 0 0 10px var(--accent-blue);
            position: relative;
        }
        .hero-pill .dot::after {
            content: "";
            position: absolute;
            top: 50%; left: 50%;
            width: 6px; height: 6px;
            border-radius: 50%;
            background: transparent;
            border: 2px solid var(--accent-blue);
            transform: translate(-50%, -50%);
            animation: pulseRing 2s var(--ease) infinite;
        }
        .hero-builtby {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: var(--ink-0);
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            margin-bottom: 16px;
            transition: color 0.15s var(--ease);
        }
        .hero-builtby i.bi-patch-check-fill { color: var(--green-400); font-size: 14px; }
        .hero-builtby i.bi-arrow-up-right { color: var(--ink-300); font-size: 12px; }
        .hero-builtby:hover { color: var(--green-300); }
        .hero h1.display {
            margin-bottom: 24px;
            background: linear-gradient(180deg, #ffffff 0%, #c7d2de 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero h1 .accent {
            color: #9CC7F2;
            -webkit-text-fill-color: #9CC7F2;
            text-shadow: none;
        }
        .hero-sub {
            font-size: 19px;
            line-height: 1.85;
            color: var(--ink-200);
            max-width: 760px;
            margin: 0 auto 36px;
        }
        .hero-cta {
            display: inline-flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 56px;
        }
        .hero-trust {
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px 28px;
            color: var(--ink-300);
            font-size: 18px;
            font-family: var(--mono);
            letter-spacing: 0.04em;
        }
        .hero-trust span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .hero-trust i { color: var(--green-400); font-size: 14px; }
        .hero-trust .sep { color: var(--ink-400); opacity: 0.5; }

        /* Hero bottom fade into next section */
        .hero-fade {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 200px;
            background: linear-gradient(180deg, transparent, var(--navy-900));
            pointer-events: none;
            z-index: 1;
        }

        /* ----------------------------------------------------------------
           Dashboard reveal
           ---------------------------------------------------------------- */
        .reveal-section {
            background: var(--navy-900);
            padding: 80px 0 80px;
            position: relative;
        }
        .reveal-stage {
            position: relative;
            margin: clamp(40px, 6vw, 72px) auto 0;
            max-width: 1080px;
            padding: 0 24px;
            z-index: 2;
        }
        .reveal-stage .frame {
            position: relative;
            border-radius: var(--radius-lg);
            background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02)) border-box;
            padding: 1px;
            box-shadow:
                0 60px 120px -40px rgba(0,0,0,0.7),
                0 30px 60px -30px rgba(34,197,94,0.15);
        }
        .reveal-stage .frame > .inner {
            background: var(--navy-900);
            border-radius: calc(var(--radius-lg) - 1px);
            overflow: hidden;
            position: relative;
        }
        .reveal-stage img {
            width: 100%;
            height: auto;
            display: block;
        }
        .reveal-stage .glow-bg {
            position: absolute;
            inset: -10%;
            z-index: -1;
            background: radial-gradient(50% 40% at 50% 60%, var(--glow-green), transparent 70%);
            filter: blur(60px);
            opacity: 0.6;
            pointer-events: none;
            animation: breathGlow 6s ease-in-out infinite;
            will-change: opacity, transform;
        }

        .reveal-caption {
            margin: 56px auto 0;
            max-width: 980px;
            padding: 0 24px;
            text-align: center;
        }
        .reveal-caption .eyebrow { margin-bottom: 14px; }
        .reveal-caption h2 { margin-bottom: 16px; }
        .reveal-caption .lead { margin: 0 auto; }

        .caption-chips {
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 36px;
        }
        .chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--hairline);
            font-size: 13.5px;
            color: var(--ink-200);
        }
        .chip i { color: var(--green-400); font-size: 14px; }

        /* Platform overview card — lives inside .wrap */
        .platform-card {
            background: var(--navy-900);
            border-radius: 24px;
            padding: clamp(36px, 4vw, 56px) clamp(28px, 4.5vw, 60px);
            text-align: left;
        }
        .platform-eyebrow {
            display: inline-flex;
            align-items: center;
            padding: 7px 18px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.18);
            font-family: var(--mono);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--ink-200);
            margin-bottom: 28px;
        }
        .platform-card h2.h2 {
            font-size: clamp(28px, 3vw, 44px);
            color: var(--ink-0);
            line-height: 1.28;
            margin-bottom: 20px;
        }
        .platform-card h2.h2 .accent {
            color: #9CC7F2;
            text-shadow: none;
        }
        .platform-card .lead {
            color: var(--ink-200);
            max-width: none;
            margin: 0;
        }
        .platform-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-top: 40px;
        }
        .platform-feat {
            border: 1px solid rgba(255,255,255,0.1);
            border-top: 3px solid var(--accent-blue);
            border-radius: 14px;
            background: rgba(255,255,255,0.05);
            padding: 28px 26px;
        }
        .platform-feat h3 {
            font-size: clamp(15px, 1.3vw, 18px);
            font-weight: 700;
            color: var(--ink-0);
            line-height: 1.3;
            letter-spacing: -0.01em;
            margin-bottom: 12px;
        }
        .platform-feat p {
            font-size: 14.5px;
            line-height: 1.65;
            color: var(--ink-300);
            margin: 0;
        }

        /* ----------------------------------------------------------------
           Module sections (Inventra / Spectrum)
           ---------------------------------------------------------------- */
        .module {
            padding: var(--section-y) 0;
            position: relative;
        }
        .module.inventra { background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-850) 100%); }
        .module.spectrum { background: linear-gradient(180deg, var(--navy-850) 0%, var(--navy-800) 100%); }

        /* Per-product accent overrides */
        .module.inventra .eyebrow { color: var(--inventra-bright); }
        .module.spectrum .eyebrow { color: var(--spectrum-bright); }

        .module.inventra .feat .icon {
            background: var(--inventra-tint);
            color: var(--inventra-bright);
        }
        .module.spectrum .feat .icon {
            background: var(--spectrum-tint);
            color: var(--spectrum-bright);
        }

        .module.inventra .action-tag .code { color: var(--inventra-bright); }
        .module.spectrum .action-tag .code { color: var(--spectrum-bright); }

        /* Per-product accent overrides for the in-action viz sections */
        .viz.inventra .pill.solid-light {
            background: var(--inventra-tint);
            color: var(--inventra-bright);
        }
        .viz.spectrum .pill.solid-light {
            background: var(--spectrum-tint);
            color: var(--spectrum-bright);
        }
        .viz.inventra .display .accent {
            color: var(--inventra-bright);
            background-image: linear-gradient(transparent 70%, rgba(156,199,242,0.25) 70%, rgba(156,199,242,0.25) 92%, transparent 92%);
        }
        .viz.spectrum .display .accent {
            color: var(--spectrum-bright);
            background-image: linear-gradient(transparent 70%, rgba(45,202,119,0.25) 70%, rgba(45,202,119,0.25) 92%, transparent 92%);
        }
        .viz.inventra .viz-tab[aria-selected="true"] {
            color: var(--inventra-bright);
            border-bottom-color: var(--inventra-bright);
        }
        .viz.inventra .viz-tab[aria-selected="true"]::after {
            background: linear-gradient(180deg, rgba(156,199,242,0.3), transparent);
        }
        .viz.spectrum .viz-tab[aria-selected="true"] {
            color: var(--spectrum-bright);
            border-bottom-color: var(--spectrum-bright);
        }
        .viz.spectrum .viz-tab[aria-selected="true"]::after {
            background: linear-gradient(180deg, rgba(45,202,119,0.3), transparent);
        }
        /* viz-stage backgrounds are intentionally white now — image fills flush
           inside the browser-chrome wrapper. Per-product viz-tab accents below. */

        /* Module brand bar — replaces the eyebrow with the actual product logo */
        .module-brand {
            display: inline-flex;
            align-items: center;
            gap: 16px;
            background: transparent;
            border: none;
            padding: 0;
            margin-bottom: 26px;
        }
        .module-brand img {
            height: 56px;
            width: auto;
            display: block;
        }
        .module-brand .module-brand-tag {
            font-family: var(--mono);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--accent-blue);
            padding-left: 16px;
            border-left: 1px solid rgba(13, 39, 68, 0.18);
        }
        .module.spectrum .module-brand .module-brand-tag {
            color: var(--spectrum-brand);
        }

        /* Horizon (purple) accent overrides — dark base; light-mode handled below */
        .module.horizon { background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-850) 100%); }
        .viz.horizon { background: linear-gradient(180deg, var(--navy-850) 0%, var(--navy-850) 100%); }
        .module.horizon .eyebrow { color: var(--horizon-bright); }
        .module.horizon .feat .icon {
            background: var(--horizon-tint);
            color: var(--horizon-bright);
        }
        .module.horizon .action-tag .code { color: var(--horizon-bright); }
        .module.horizon .module-brand .module-brand-tag { color: var(--horizon-deep); }
        .viz.horizon .pill.solid-light {
            background: var(--horizon-tint);
            color: var(--horizon-bright);
        }
        .viz.horizon .display .accent {
            color: var(--horizon-bright);
            background-image: linear-gradient(transparent 70%, rgba(139,92,246,0.25) 70%, rgba(139,92,246,0.25) 92%, transparent 92%);
        }
        .viz.horizon .viz-tab[aria-selected="true"] {
            color: var(--horizon-bright);
            border-bottom-color: var(--horizon-bright);
        }
        .viz.horizon .viz-tab[aria-selected="true"]::after {
            background: linear-gradient(180deg, rgba(139,92,246,0.3), transparent);
        }

        /* =========================================================
           INVENTRA — On-premises hub-and-spoke visual
           ========================================================= */
        /* =========================================================
           INVENTRA COSMOS — animated hub-and-spoke constellation
           ========================================================= */
        .inv-cosmos-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
        }
        .inv-cosmos {
            position: relative;
            width: 100%;
            max-width: 520px;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            isolation: isolate;
        }

        /* Faint hex/dot grid in the background */
        .inv-cosmos-grid {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(156, 199, 242, 0.18) 1px, transparent 1px);
            background-size: 22px 22px;
            mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
            -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
            opacity: 0.55;
            pointer-events: none;
        }

        /* Slowly rotating conic scan beam */
        .inv-cosmos-scan {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: conic-gradient(from 0deg,
                transparent 0deg,
                rgba(156, 199, 242, 0.0) 280deg,
                rgba(156, 199, 242, 0.18) 340deg,
                rgba(200, 228, 255, 0.32) 358deg,
                rgba(156, 199, 242, 0.0) 360deg);
            mask-image: radial-gradient(circle at 50% 50%, transparent 28%, #000 30%, #000 60%, transparent 64%);
            -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 28%, #000 30%, #000 60%, transparent 64%);
            animation: invScan 9s linear infinite;
            pointer-events: none;
        }
        @keyframes invScan { to { transform: rotate(360deg); } }

        /* Soft central glow behind everything */
        .inv-cosmos-glow {
            position: absolute;
            top: 50%; left: 50%;
            width: 70%; height: 70%;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle,
                rgba(156, 199, 242, 0.45) 0%,
                rgba(156, 199, 242, 0.15) 35%,
                transparent 70%);
            filter: blur(30px);
            pointer-events: none;
            z-index: 0;
            animation: invGlowPulse 5s ease-in-out infinite;
        }
        @keyframes invGlowPulse {
            0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
            50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
        }

        /* Sonar ripples expanding outward */
        .inv-ripple {
            position: absolute;
            top: 50%; left: 50%;
            width: 18%; height: 18%;
            margin: -9% 0 0 -9%;
            border-radius: 50%;
            border: 1.5px solid rgba(156, 199, 242, 0.55);
            opacity: 0;
            pointer-events: none;
            animation: invRipple 4.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
            animation-delay: var(--d, 0s);
            z-index: 1;
        }
        @keyframes invRipple {
            0%   { transform: scale(0.4); opacity: 0; border-color: rgba(200, 228, 255, 0.85); }
            12%  { opacity: 0.9; }
            100% { transform: scale(4.5); opacity: 0; border-color: rgba(156, 199, 242, 0); }
        }

        /* Static orbital rings */
        .inv-ring {
            position: absolute;
            top: 50%; left: 50%;
            border-radius: 50%;
            border: 1px solid rgba(156, 199, 242, 0.22);
            pointer-events: none;
            z-index: 1;
        }
        .inv-ring-outer {
            width: 86%; height: 86%;
            margin: -43% 0 0 -43%;
            border-style: dashed;
            border-color: rgba(156, 199, 242, 0.18);
            animation: invRotate 60s linear infinite;
        }
        .inv-ring-mid {
            width: 56%; height: 56%;
            margin: -28% 0 0 -28%;
            border-color: rgba(156, 199, 242, 0.28);
            box-shadow: inset 0 0 30px rgba(156, 199, 242, 0.08);
        }
        @keyframes invRotate { to { transform: rotate(360deg); } }

        /* Floating ambient dust */
        .inv-dust {
            position: absolute;
            left: var(--x);
            top: var(--y);
            width: 3px; height: 3px;
            border-radius: 50%;
            background: rgba(200, 228, 255, 0.85);
            box-shadow: 0 0 6px rgba(156, 199, 242, 0.8);
            opacity: 0;
            pointer-events: none;
            animation: invDust 5s ease-in-out infinite;
            animation-delay: var(--d, 0s);
            z-index: 2;
        }
        @keyframes invDust {
            0%, 100% { opacity: 0; transform: translateY(0) scale(0.6); }
            40%      { opacity: 0.9; transform: translateY(-8px) scale(1); }
            60%      { opacity: 0.7; }
        }

        /* Radar contacts — persistent faint blue dot, brightens when the sweep
           hits and emits a sonar-echo ring. */
        .inv-blip {
            position: absolute;
            top: var(--y);
            left: var(--x);
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--inventra-bright);
            box-shadow:
                0 0 6px rgba(156, 199, 242, 0.95),
                0 0 16px rgba(156, 199, 242, 0.55);
            opacity: 0.25;
            pointer-events: none;
            z-index: 3;
            animation: invBlipDot 9s linear infinite;
            animation-delay: var(--delay, 0s);
        }
        /* Sonar echo ring expanding from the contact when detected */
        .inv-blip::before {
            content: "";
            position: absolute;
            top: 50%; left: 50%;
            width: 14px;
            height: 14px;
            margin: -7px 0 0 -7px;
            border-radius: 50%;
            border: 2px solid var(--inventra-bright);
            opacity: 0;
            transform: scale(0.4);
            animation: invBlipEcho 9s linear infinite;
            animation-delay: var(--delay, 0s);
        }
        /* The dot brightens briefly when the sweep wedge is on it, then fades
           back to a persistent faint contact (still visible between sweeps). */
        @keyframes invBlipDot {
            0%   { opacity: 0.22; transform: translate(-50%, -50%) scale(1); }
            1%   { opacity: 1;    transform: translate(-50%, -50%) scale(1.55); }
            8%   { opacity: 0.95; transform: translate(-50%, -50%) scale(1.15); }
            22%  { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
            45%  { opacity: 0.22; transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 0.22; transform: translate(-50%, -50%) scale(1); }
        }
        @keyframes invBlipEcho {
            0%   { opacity: 0;    transform: scale(0.4); }
            1%   { opacity: 1;    transform: scale(0.6); }
            10%  { opacity: 0.7;  transform: scale(1.8); }
            22%  { opacity: 0.25; transform: scale(2.8); }
            30%  { opacity: 0;    transform: scale(3.2); }
            100% { opacity: 0;    transform: scale(0.4); }
        }
        /* All blip dots use the translate(-50%, -50%) base for top/left centering */
        .inv-blip { transform: translate(-50%, -50%); }

        /* SVG line/particle layer */
        .inv-lines {
            position: absolute;
            inset: 0;
            width: 100%; height: 100%;
            overflow: visible;
            z-index: 3;
            pointer-events: none;
        }

        /* Source nodes positioned via --angle / --dist of viewport radius */
        .inv-node {
            position: absolute;
            top: 50%; left: 50%;
            width: 0; height: 0;
            transform:
                rotate(var(--angle))
                translateY(calc(var(--dist) * -1))
                rotate(calc(var(--angle) * -1));
            z-index: 4;
        }
        .inv-node-disc {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: clamp(44px, 8.4vw, 60px);
            height: clamp(44px, 8.4vw, 60px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(180deg, rgba(156, 199, 242, 0.32), rgba(156, 199, 242, 0.08));
            border: 1px solid rgba(200, 228, 255, 0.45);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: #e8f3ff;
            font-size: clamp(17px, 2.4vw, 22px);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.15),
                0 0 0 6px rgba(156, 199, 242, 0.08),
                0 0 22px rgba(156, 199, 242, 0.45);
            animation: invFloat 5s ease-in-out infinite;
            animation-delay: var(--delay, 0s);
            transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
        }
        .inv-node:hover .inv-node-disc {
            transform: translate(-50%, -50%) scale(1.12);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.25),
                0 0 0 8px rgba(156, 199, 242, 0.16),
                0 0 32px rgba(200, 228, 255, 0.7);
        }
        .inv-node-label {
            position: absolute;
            top: calc(50% + clamp(28px, 5vw, 38px));
            left: 50%;
            transform: translateX(-50%);
            font-family: var(--mono);
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(200, 228, 255, 0.78);
            white-space: nowrap;
            pointer-events: none;
            opacity: 0.85;
        }
        @keyframes invFloat {
            0%, 100% { transform: translate(-50%, -50%) translateY(0); }
            50%      { transform: translate(-50%, -50%) translateY(-6px); }
        }

        /* The core */
        .inv-core {
            position: absolute;
            top: 50%; left: 50%;
            width: clamp(96px, 18vw, 130px);
            height: clamp(96px, 18vw, 130px);
            transform: translate(-50%, -50%);
            z-index: 5;
        }
        .inv-core-aura {
            position: absolute;
            inset: -40%;
            border-radius: 50%;
            background: radial-gradient(circle,
                rgba(156, 199, 242, 0.6) 0%,
                rgba(156, 199, 242, 0.25) 35%,
                transparent 70%);
            filter: blur(14px);
            animation: invCoreBreath 4s ease-in-out infinite;
        }
        .inv-core-ring {
            position: absolute;
            inset: -10%;
            border-radius: 50%;
            border: 1.5px solid rgba(200, 228, 255, 0.55);
            box-shadow:
                inset 0 0 18px rgba(156, 199, 242, 0.4),
                0 0 24px rgba(156, 199, 242, 0.5);
        }
        .inv-core-disc {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background:
                radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.25), transparent 50%),
                linear-gradient(160deg, #9CC7F2 0%, #4d82b0 65%, #022c4d 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:
                inset 0 2px 0 rgba(255, 255, 255, 0.18),
                inset 0 -10px 24px rgba(0, 0, 0, 0.3),
                0 18px 40px rgba(0, 30, 60, 0.55);
            overflow: hidden;
        }
        .inv-core-mark {
            font-size: clamp(15px, 1.7vw, 19px);
            font-weight: 700;
            letter-spacing: 0.02em;
            color: #ffffff;
            text-shadow:
                0 1px 2px rgba(0, 30, 60, 0.55),
                0 0 18px rgba(200, 228, 255, 0.45);
        }
        @keyframes invCoreBreath {
            0%, 100% { transform: scale(1);    opacity: 0.85; }
            50%      { transform: scale(1.12); opacity: 1; }
        }

        /* Caption beneath the cosmos */
        .inv-cosmos-caption {
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .inv-cosmos-eyebrow {
            font-family: var(--mono);
            font-size: 11.5px;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--inventra-bright);
        }
        .inv-cosmos-sub {
            font-size: 12.5px;
            color: var(--ink-300);
            letter-spacing: 0.02em;
        }

        /* Respect reduced motion */
        @media (prefers-reduced-motion: reduce) {
            .inv-cosmos-scan,
            .inv-ring-outer,
            .inv-ripple,
            .inv-dust,
            .inv-blip,
            .inv-blip::before,
            .inv-cosmos-glow,
            .inv-node-disc,
            .inv-core-aura {
                animation: none !important;
            }
            .inv-lines circle { display: none; }
        }

        /* =========================================================
           SPECTRUM PRISM — white light entering, refracting into
           6 workload signals on the right
           ========================================================= */
        .spc-prism-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 22px;
        }
        .spc-prism-stage {
            position: relative;
            width: 100%;
            max-width: 560px;
            aspect-ratio: 1 / 1;
            isolation: isolate;
        }

        /* Faint horizontal "spectrum bands" texture */
        .spc-prism-bands {
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent 22px,
                rgba(45, 202, 119, 0.05) 22px,
                rgba(45, 202, 119, 0.05) 23px
            );
            mask-image: radial-gradient(ellipse 78% 70% at 55% 50%, #000 30%, transparent 95%);
            -webkit-mask-image: radial-gradient(ellipse 78% 70% at 55% 50%, #000 30%, transparent 95%);
            pointer-events: none;
            opacity: 0.7;
        }

        /* Soft halo behind prism (sits on the right, behind the diamond) */
        .spc-prism-halo {
            position: absolute;
            top: 50%; right: -4%;
            width: 56%; height: 56%;
            transform: translateY(-50%);
            background: radial-gradient(circle,
                rgba(190, 244, 215, 0.5) 0%,
                rgba(45, 202, 119, 0.18) 40%,
                transparent 70%);
            filter: blur(28px);
            pointer-events: none;
            z-index: 0;
            animation: spcHalo 4s ease-in-out infinite;
        }
        @keyframes spcHalo {
            0%, 100% { opacity: 0.85; transform: translateY(-50%) scale(1); }
            50%      { opacity: 1;    transform: translateY(-50%) scale(1.08); }
        }

        /* Spectrum logo badge */
        .spc-logo-badge {
            position: absolute;
            top: 44%;
            right: clamp(10px, 3vw, 44px);
            transform: translateY(-50%);
            z-index: 4;
            background: #ffffff;
            border-radius: 20px;
            padding: 10px 14px;
            box-shadow:
                0 0 0 1px rgba(45, 202, 119, 0.5),
                0 0 30px rgba(45, 202, 119, 0.4),
                0 0 70px rgba(45, 202, 119, 0.18),
                0 16px 40px rgba(0, 0, 0, 0.4);
            animation: spcPrismBreath 5s ease-in-out infinite;
        }
        .spc-logo-badge img {
            width: clamp(140px, 18vw, 200px);
            display: block;
        }
        @keyframes spcPrismBreath {
            0%, 100% { transform: translateY(-50%); }
            50%      { transform: translateY(calc(-50% - 6px)); }
        }

        /* SVG ray + particle layer */
        .spc-rays {
            position: absolute;
            inset: 0;
            width: 100%; height: 100%;
            overflow: visible;
            z-index: 3;
            pointer-events: none;
        }

        /* Workload-group chips — pinned to the LEFT, beams flow right toward the prism */
        .spc-chip {
            position: absolute;
            top: var(--top);
            left: 2%;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 8px 16px 8px 8px;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(22, 136, 79, 0.92), rgba(8, 64, 42, 0.92));
            border: 1px solid rgba(190, 244, 215, 0.55);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 4px 14px rgba(0, 40, 20, 0.45),
                0 0 22px rgba(45, 202, 119, 0.35);
            z-index: 5;
            animation: spcChipFloat 5s ease-in-out infinite;
            animation-delay: var(--delay, 0s);
            transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
        }
        .spc-chip:hover {
            transform: translateX(3px);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.25),
                0 4px 18px rgba(0, 40, 20, 0.55),
                0 0 32px rgba(190, 244, 215, 0.6);
        }
        .spc-chip-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px; height: 30px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.18);
            color: #ffffff;
            font-size: 15px;
            flex-shrink: 0;
        }
        .spc-chip-label {
            font-family: var(--mono);
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #ffffff;
            text-shadow: 0 1px 2px rgba(0, 40, 20, 0.6);
            white-space: nowrap;
        }
        @keyframes spcChipFloat {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-3px); }
        }

        /* Caption beneath the prism stage */
        .spc-prism-caption {
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .spc-prism-eyebrow {
            font-family: var(--mono);
            font-size: 11.5px;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--spectrum-bright);
        }
        .spc-prism-sub {
            font-size: 12.5px;
            color: var(--ink-300);
            letter-spacing: 0.02em;
        }

        /* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
            .spc-prism-halo,
            .spc-logo-badge,
            .spc-chip {
                animation: none !important;
            }
            .spc-rays circle { display: none; }
        }

        /* =========================================================
           HORIZON FORECAST — an Azure cost trend rising into the
           horizon. Logo badge + Spend / Estate / Govern signals.
           ========================================================= */
        .hz-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .hz-stage {
            position: relative;
            width: 100%;
            max-width: 560px;
            aspect-ratio: 1 / 1;
            isolation: isolate;
        }

        /* Faint chart grid */
        .hz-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(139, 92, 246, 0.10) 1px, transparent 1px),
                linear-gradient(90deg, rgba(139, 92, 246, 0.10) 1px, transparent 1px);
            background-size: 34px 34px;
            mask-image: radial-gradient(ellipse 82% 76% at 50% 55%, #000 35%, transparent 92%);
            -webkit-mask-image: radial-gradient(ellipse 82% 76% at 50% 55%, #000 35%, transparent 92%);
            opacity: 0.6;
            pointer-events: none;
        }

        /* Soft dawn glow rising from the horizon line */
        .hz-glow {
            position: absolute;
            left: 50%; bottom: 4%;
            width: 80%; height: 62%;
            transform: translateX(-50%);
            background: radial-gradient(ellipse at 50% 100%,
                rgba(139, 92, 246, 0.40) 0%,
                rgba(124, 58, 237, 0.15) 42%,
                transparent 72%);
            filter: blur(30px);
            pointer-events: none;
            z-index: 0;
            animation: hzGlow 5s ease-in-out infinite;
        }
        @keyframes hzGlow {
            0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
            50%      { opacity: 1;   transform: translateX(-50%) scale(1.06); }
        }

        /* Thin refresh cursor sweeping across the chart (daily refresh) */
        .hz-scan {
            position: absolute;
            top: 6%; bottom: 14%;
            left: 0;
            width: 2px;
            background: linear-gradient(180deg, transparent, rgba(196, 181, 253, 0.85), transparent);
            box-shadow: 0 0 10px 1px rgba(167, 139, 250, 0.5);
            pointer-events: none;
            z-index: 2;
            opacity: 0;
            animation: hzScan 8s ease-in-out infinite;
        }
        @keyframes hzScan {
            0%   { left: 5%;  opacity: 0; }
            14%  { opacity: 0.8; }
            86%  { opacity: 0.8; }
            100% { left: 95%; opacity: 0; }
        }

        /* SVG forecast chart */
        .hz-chart {
            position: absolute;
            inset: 0;
            width: 100%; height: 100%;
            overflow: visible;
            z-index: 3;
            pointer-events: none;
        }
        /* Y-axis label — names the metric so a falling line reads as less spend */
        .hz-yaxis {
            position: absolute;
            left: 2px;
            top: 50%;
            transform: translateY(-50%) rotate(180deg);
            writing-mode: vertical-rl;
            font-family: var(--mono);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(139, 92, 246, 0.6);
            white-space: nowrap;
            pointer-events: none;
            z-index: 2;
        }
        .hz-trend {
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.55));
            animation: hzDraw 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s forwards;
        }
        @keyframes hzDraw { to { stroke-dashoffset: 0; } }

        /* Monthly spend bars grow up from the baseline (staggered) */
        .hz-bar {
            transform-box: fill-box;
            transform-origin: 50% 100%;
            transform: scaleY(0);
            animation: hzBarGrow 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            animation-delay: var(--bd, 0s);
        }
        @keyframes hzBarGrow { to { transform: scaleY(1); } }
        /* Projected (forecast) bars: lighter fill + dashed outline */
        .hz-bar-fc {
            stroke: #A78BFA;
            stroke-opacity: 0.55;
            stroke-width: 0.4;
            stroke-dasharray: 1.6 1.4;
        }
        /* Dashed forecast line fades in after the actuals draw */
        .hz-forecast {
            opacity: 0;
            filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.45));
            animation: hzFcIn 0.8s ease 1.7s forwards;
        }
        @keyframes hzFcIn { to { opacity: 1; } }
        .hz-divider { pointer-events: none; }

        /* Pulsing data nodes sitting on the curve */
        .hz-node {
            position: absolute;
            top: var(--y);
            left: var(--x);
            width: 10px; height: 10px;
            margin: -5px 0 0 -5px;
            border-radius: 50%;
            background: #7C3AED;
            box-shadow:
                0 0 0 3px rgba(139, 92, 246, 0.18),
                0 0 8px rgba(167, 139, 250, 0.9),
                0 0 18px rgba(139, 92, 246, 0.55);
            z-index: 4;
            animation: hzNode 3s ease-in-out infinite;
            animation-delay: var(--d, 0s);
        }
        @keyframes hzNode {
            0%, 100% { transform: scale(0.82); opacity: 0.65; }
            50%      { transform: scale(1.22); opacity: 1; }
        }
        /* "Now" marker — the current month, where actuals meet forecast */
        .hz-now {
            width: 13px; height: 13px;
            margin: -6.5px 0 0 -6.5px;
            background: #8B5CF6;
            box-shadow:
                0 0 0 3px rgba(139, 92, 246, 0.22),
                0 0 10px rgba(196, 181, 253, 1),
                0 0 22px rgba(139, 92, 246, 0.7);
        }
        .hz-now::before {
            content: "";
            position: absolute;
            inset: -7px;
            border-radius: 50%;
            border: 1.5px solid rgba(167, 139, 250, 0.7);
            animation: hzNowRing 2.4s ease-out infinite;
        }
        @keyframes hzNowRing {
            0%   { transform: scale(0.55); opacity: 0.9; }
            100% { transform: scale(2.2);  opacity: 0; }
        }

        /* Horizon sun orb — the descending trend lands in it (optimised low) */
        .hz-sun {
            position: absolute;
            top: 72%; left: 87%;
            width: clamp(64px, 12vw, 92px);
            height: clamp(64px, 12vw, 92px);
            transform: translate(-50%, -50%);
            z-index: 4;
            pointer-events: none;
        }
        .hz-sun-halo {
            position: absolute;
            inset: -55%;
            border-radius: 50%;
            background: radial-gradient(circle,
                rgba(167, 139, 250, 0.45) 0%,
                rgba(139, 92, 246, 0.18) 40%,
                transparent 70%);
            filter: blur(10px);
            animation: hzSunBreath 4s ease-in-out infinite;
        }
        .hz-sun-rays {
            position: absolute;
            inset: -34%;
            border-radius: 50%;
            background: repeating-conic-gradient(from 0deg,
                rgba(196, 181, 253, 0.5) 0deg 1.6deg,
                transparent 1.6deg 30deg);
            -webkit-mask: radial-gradient(circle, transparent 40%, #000 46%, #000 64%, transparent 72%);
            mask: radial-gradient(circle, transparent 40%, #000 46%, #000 64%, transparent 72%);
            opacity: 0.5;
            animation: hzRays 26s linear infinite;
        }
        @keyframes hzRays { to { transform: rotate(360deg); } }
        .hz-sun-core {
            position: absolute;
            inset: 28%;
            border-radius: 50%;
            background: radial-gradient(circle at 50% 50%,
                #efeaff 0%, #C4B5FD 32%, #8B5CF6 66%, rgba(124,58,237,0) 100%);
            box-shadow:
                0 0 26px rgba(167, 139, 250, 0.85),
                0 0 62px rgba(139, 92, 246, 0.5);
            animation: hzSunBreath 4s ease-in-out infinite;
        }
        @keyframes hzSunBreath {
            0%, 100% { transform: scale(1);    opacity: 0.9; }
            50%      { transform: scale(1.14); opacity: 1; }
        }
        .hz-sun-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 1.5px solid rgba(139, 92, 246, 0.5);
            opacity: 0;
            animation: hzSunRing 4.2s ease-out infinite;
            animation-delay: var(--d, 0s);
        }
        @keyframes hzSunRing {
            0%   { transform: scale(0.42); opacity: 0; }
            10%  { opacity: 0.8; }
            100% { transform: scale(1.85); opacity: 0; }
        }

        /* Logo badge — brand anchor, top-left */
        .hz-badge {
            position: absolute;
            top: 9%; left: 6%;
            z-index: 5;
            background: #ffffff;
            border-radius: 16px;
            padding: 9px 14px;
            box-shadow:
                0 0 0 1px rgba(139, 92, 246, 0.5),
                0 0 28px rgba(139, 92, 246, 0.4),
                0 0 64px rgba(139, 92, 246, 0.16),
                0 16px 40px rgba(0, 0, 0, 0.4);
            animation: hzBadgeBob 5s ease-in-out infinite;
        }
        .hz-badge img {
            width: clamp(120px, 16vw, 168px);
            display: block;
        }
        @keyframes hzBadgeBob {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-6px); }
        }

        /* Floating pillar chips: Spend / Estate / Govern */
        .hz-chip {
            position: absolute;
            top: var(--top);
            left: var(--left);
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 8px 16px 8px 8px;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(124, 58, 237, 0.92), rgba(55, 24, 120, 0.92));
            border: 1px solid rgba(196, 181, 253, 0.55);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 4px 14px rgba(30, 10, 60, 0.45),
                0 0 22px rgba(139, 92, 246, 0.35);
            z-index: 5;
            animation: hzChipFloat 5s ease-in-out infinite;
            animation-delay: var(--delay, 0s);
            transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
        }
        .hz-chip:hover {
            transform: translateY(-3px);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.25),
                0 6px 18px rgba(30, 10, 60, 0.55),
                0 0 32px rgba(196, 181, 253, 0.6);
        }
        .hz-chip-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px; height: 30px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.18);
            color: #ffffff;
            font-size: 15px;
            flex-shrink: 0;
        }
        .hz-chip-label {
            font-family: var(--mono);
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #ffffff;
            text-shadow: 0 1px 2px rgba(30, 10, 60, 0.6);
            white-space: nowrap;
        }
        @keyframes hzChipFloat {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-4px); }
        }

        /* Caption beneath the stage */
        .hz-horizon-caption {
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: -10%;   /* pull up into the empty area below the baseline */
        }
        .hz-eyebrow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            font-family: var(--mono);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #8B5CF6;
        }
        .hz-eyebrow i { font-size: 15px; color: #16a34a; }
        .hz-sub {
            font-size: 12.5px;
            color: var(--ink-300);
            letter-spacing: 0.02em;
        }

        /* Horizon graphic — responsive */
        @media (min-width: 1400px) {
            .hz-stage { max-width: 620px; }
        }
        @media (max-width: 1024px) {
            .hz-stage { max-width: 480px; }
        }
        @media (max-width: 820px) {
            /* Keep the stage square (centred) so the chart isn't squished by
               preserveAspectRatio="none" once the module-grid stacks. */
            .hz-stage { max-width: 360px; margin-inline: auto; }
            .hz-chip { padding: 6px 10px 6px 6px; gap: 6px; }
            .hz-chip-icon { width: 24px; height: 24px; font-size: 12px; }
            .hz-chip-label { font-size: 9.5px; letter-spacing: 0.06em; }
            .hz-badge { padding: 8px 11px; }
            .hz-badge img { width: 120px; }
        }
        @media (max-width: 640px) {
            .hz-stage { max-width: 300px; }
            .hz-chip { padding: 4px 8px 4px 4px; gap: 5px; }
            .hz-chip-icon { width: 20px; height: 20px; font-size: 10px; }
            .hz-chip-label { font-size: 8px; letter-spacing: 0.04em; }
            .hz-badge img { width: 104px; }
        }
        @media (max-width: 480px) {
            .hz-stage { max-width: 240px; }
            .hz-chip, .hz-scan, .hz-yaxis { display: none !important; }
        }
        @media (prefers-reduced-motion: reduce) {
            .hz-glow, .hz-scan, .hz-node, .hz-now::before, .hz-sun-core, .hz-sun-ring,
            .hz-sun-halo, .hz-sun-rays, .hz-badge, .hz-chip, .hz-trend, .hz-bar, .hz-forecast {
                animation: none !important;
            }
            .hz-trend { stroke-dashoffset: 0; }
            .hz-bar { transform: scaleY(1); }
            .hz-forecast { opacity: 1; }
            .hz-chart circle { display: none; }
        }

        .module-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(40px, 6vw, 88px);
            align-items: center;
        }
        .module-grid.reverse { direction: rtl; }
        .module-grid.reverse > * { direction: ltr; }

        .module-copy .eyebrow { margin-bottom: 18px; }
        .module-copy h2 { margin-bottom: 20px; }
        .module-copy .body { margin-bottom: 32px; }

        .module-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px 28px;
            margin-bottom: 36px;
        }
        .feat {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }
        .feat .icon {
            flex: 0 0 auto;
            width: 28px; height: 28px;
            border-radius: 8px;
            background: rgba(34,197,94,0.1);
            color: var(--green-300);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            margin-top: 2px;
        }
        .feat .name {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink-100);
            margin-bottom: 2px;
        }
        .feat .desc {
            font-size: 13.5px;
            line-height: 1.55;
            color: var(--ink-300);
        }

        .module-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .action-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 11px;
            border-radius: 6px;
            font-family: var(--mono);
            font-size: 11.5px;
            letter-spacing: 0.06em;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--hairline);
            color: var(--ink-200);
        }
        .action-tag .code {
            color: var(--green-300);
            font-weight: 600;
        }

        .module-visual {
            position: relative;
            border-radius: var(--radius-lg);
            background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02)) border-box;
            padding: 1px;
            box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
            overflow: hidden;
            transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
            will-change: transform;
        }
        .module-visual:hover {
            transform: translateY(-6px) scale(1.005);
            box-shadow: 0 60px 120px -30px rgba(0,0,0,0.7), 0 0 60px -20px rgba(34,197,94,0.25);
        }

        /* Reveal-stage dashboard carousel */
        .reveal-carousel {
            position: relative;
            width: 100%;
        }
        .reveal-carousel-row {
            display: flex;
            align-items: center;
            gap: clamp(10px, 1.6vw, 22px);
        }
        .reveal-carousel-frame {
            position: relative;
            flex: 1;
            min-width: 0;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--hairline);
            background: transparent;
            box-shadow:
                0 1px 0 rgba(255,255,255,0.06) inset,
                0 60px 120px -40px rgba(0,0,0,0.7),
                0 0 0 1px rgba(0,0,0,0.4);
        }
        .reveal-carousel-track {
            position: relative;
        }
        .reveal-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s var(--ease);
            pointer-events: none;
        }
        .reveal-slide.active {
            position: relative;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .reveal-slide img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Arrows sit outside the image, on either side */
        .reveal-carousel-arrow {
            flex-shrink: 0;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: 2px solid var(--accent-blue);
            background: var(--accent-blue);
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            cursor: pointer;
            box-shadow:
                0 8px 22px rgba(156, 199, 242, 0.45),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
            transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
        }
        .reveal-carousel-arrow:hover {
            background: var(--accent-blue-d);
            border-color: var(--accent-blue-d);
            transform: scale(1.08);
            box-shadow:
                0 12px 30px rgba(156, 199, 242, 0.6),
                0 0 0 1px rgba(255, 255, 255, 0.12) inset;
        }
        .reveal-carousel-arrow:active { transform: scale(0.96); }

        .reveal-carousel-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 22px;
        }
        .reveal-carousel-dots {
            display: inline-flex;
            gap: 10px;
        }
        .reveal-carousel-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            border: none;
            padding: 0;
            background: rgba(255, 255, 255, 0.22);
            cursor: pointer;
            transition: background 0.25s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
        }
        .reveal-carousel-dot:hover { background: rgba(255, 255, 255, 0.45); }
        .reveal-carousel-dot.active {
            background: var(--accent-blue);
            transform: scale(1.35);
            box-shadow: 0 0 12px rgba(156, 199, 242, 0.7);
        }

        @media (max-width: 560px) {
            .reveal-carousel-arrow { width: 40px; height: 40px; font-size: 16px; }
            .reveal-carousel-row { gap: 8px; }
        }

        /* Stacked image composition for module visuals + reveal-stage */
        .img-stack {
            position: relative;
            width: 100%;
            padding-top: 8%;
            padding-right: 8%;
            padding-bottom: 8%;
        }
        .img-stack-front,
        .img-stack-back {
            border-radius: 8px;
            border: 1px solid var(--hairline);
            overflow: hidden;
            background: var(--navy-950);
            box-shadow:
                0 1px 0 rgba(255,255,255,0.06) inset,
                0 30px 60px -25px rgba(0,0,0,0.7),
                0 0 0 1px rgba(0,0,0,0.4);
        }
        .img-stack-front img,
        .img-stack-back img {
            width: 100%;
            height: auto;
            display: block;
        }
        .img-stack-back {
            position: absolute;
            top: 0;
            right: 0;
            width: 70%;
            transform: rotate(2.5deg);
            opacity: 0.85;
            z-index: 1;
            transition: transform 0.5s var(--ease);
        }
        .img-stack-front {
            position: relative;
            z-index: 2;
            margin-top: 6%;
            transition: transform 0.5s var(--ease);
        }
        .img-stack:hover .img-stack-back {
            transform: rotate(3.5deg) translateY(-4px);
        }
        .img-stack:hover .img-stack-front {
            transform: translateY(-4px);
        }

        /* Three-image stack used in the reveal section */
        .img-stack.triple {
            padding-top: 4%;
            padding-bottom: 4%;
        }
        .img-stack.triple .img-stack-deep {
            border-radius: 8px;
            border: 1px solid var(--hairline);
            overflow: hidden;
            background: var(--navy-950);
            box-shadow: 0 30px 60px -25px rgba(0,0,0,0.6);
            position: absolute;
            top: 0;
            left: 0;
            width: 60%;
            transform: rotate(-2deg);
            opacity: 0.7;
            z-index: 0;
        }
        .img-stack.triple .img-stack-deep img {
            width: 100%;
            height: auto;
            display: block;
        }
        .img-stack.triple .img-stack-back {
            top: 4%;
            width: 65%;
        }
        .img-stack.triple .img-stack-front {
            margin: 4% auto 0;
            width: 88%;
        }
        .module-visual > .inner {
            background: var(--navy-950);
            border-radius: calc(var(--radius-lg) - 1px);
            overflow: hidden;
        }
        .module-visual img,
        .module-visual video {
            width: 100%;
            height: auto;
            display: block;
        }
        .module-visual .badge {
            position: absolute;
            top: 14px; left: 14px;
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--ink-100);
            background: rgba(6,15,29,0.7);
            border: 1px solid var(--hairline);
            padding: 5px 10px 5px 22px;
            border-radius: 6px;
            z-index: 2;
            overflow: hidden;
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
        }
        .module-visual .badge::before {
            content: "";
            position: absolute;
            top: 50%; left: 10px;
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--green-400);
            box-shadow: 0 0 8px var(--green-400);
            transform: translateY(-50%);
            animation: breathGlow 1.6s ease-in-out infinite;
        }
        .module-visual .badge::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
            transform: translateX(-120%);
            animation: badgeShimmer 5s ease-in-out infinite;
            animation-delay: 2s;
        }

        /* ----------------------------------------------------------------
           Visualisation showcase (Inventra / Spectrum dashboards)
           ---------------------------------------------------------------- */
        .viz {
            padding: var(--section-y) 0;
            position: relative;
            overflow: hidden;
        }
        .viz.inventra { background: linear-gradient(180deg, var(--navy-850) 0%, var(--navy-850) 100%); }
        .viz.spectrum { background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-800) 100%); }
        .viz::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(40% 50% at 100% 0%, var(--glow-green), transparent 60%),
                radial-gradient(40% 50% at 0% 100%, rgba(20,48,79,0.45), transparent 60%);
            pointer-events: none;
            opacity: 0.55;
        }
        .viz .wrap { position: relative; }

        /* ----------------------------------------------------------------
           Viz-card — browser-chrome wrapper around dashboard screenshots
           ---------------------------------------------------------------- */
        .viz-card {
            margin-top: 56px;
            border-radius: 14px;
            background: #ffffff;
            box-shadow:
                0 40px 100px -30px rgba(0, 0, 0, 0.55),
                0 12px 28px -12px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(0, 0, 0, 0.06);
            overflow: hidden;
        }
        .viz-card > .viz-inner {
            background: transparent;
            border-radius: 0;
            overflow: visible;
        }

        /* Browser chrome top bar: traffic-light dots + address chip */
        .viz-chrome {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 11px 16px;
            background: linear-gradient(180deg, #f6f8fb 0%, #eef1f4 100%);
            border-bottom: 1px solid #e2e6ec;
        }
        .viz-chrome-dots {
            display: flex;
            gap: 7px;
            flex-shrink: 0;
        }
        .viz-dot {
            width: 12px; height: 12px;
            border-radius: 50%;
            box-shadow:
                inset 0 -1px 0 rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }
        .viz-dot-r { background: #ff5f57; }
        .viz-dot-y { background: #febc2e; }
        .viz-dot-g { background: #28c840; }
        .viz-chrome-addr {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-width: 0;
            max-width: 480px;
            margin: 0 auto;
            padding: 6px 14px;
            background: #ffffff;
            border: 1px solid #e2e6ec;
            border-radius: 8px;
            font-family: var(--mono);
            font-size: 12px;
            color: #475569;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
        }
        .viz-chrome-addr i {
            color: #94a3b8;
            font-size: 11px;
            flex-shrink: 0;
        }
        .viz-chrome-host {
            color: #94a3b8;
            white-space: nowrap;
        }
        .viz-chrome-sep {
            color: #cbd5e1;
            flex-shrink: 0;
        }
        .viz-chrome-page {
            color: #0d2744;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Tabs row (now light, sits beneath the chrome) */
        .viz-tabs {
            display: flex;
            overflow-x: auto;
            border-bottom: 1px solid #e2e6ec;
            background: #ffffff;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }
        .viz-tabs::-webkit-scrollbar { height: 4px; }
        .viz-tabs::-webkit-scrollbar-track { background: transparent; }
        .viz-tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

        .viz-tab {
            padding: 13px 20px;
            font-family: var(--mono);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #94a3b8;
            background: transparent;
            white-space: nowrap;
            position: relative;
            border: 0;
            border-bottom: 2px solid transparent;
            transition: color 0.2s var(--ease), background 0.2s var(--ease);
            cursor: pointer;
        }
        .viz-tab:hover { color: #475569; background: #f8fafb; }
        .viz-tab[aria-selected="true"] {
            color: #16a34a;
            border-bottom-color: #16a34a;
        }
        .viz-tab[aria-selected="true"]::after {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: -1px;
            height: 4px;
            background: linear-gradient(180deg, rgba(34, 197, 94, 0.18), transparent);
            pointer-events: none;
        }

        /* Stage = the screenshot area, flush against the chrome */
        .viz-stage {
            position: relative;
            background: #ffffff;
            padding: 0;
            overflow: hidden;
        }
        .viz-img {
            display: none;
            width: 100%;
        }
        .viz-img.active {
            display: block;
            animation: vizFadeIn 0.4s var(--ease) backwards;
        }
        .viz-img img {
            width: 100%;
            height: auto;
            max-width: 100%;
            display: block;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            image-rendering: high-quality;
        }
        @keyframes vizFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ----------------------------------------------------------------
           Blackhill SAM (light interlude — independent advisory firm)
           ---------------------------------------------------------------- */
        :root {
            --bh-bg:        #f6f8fb;
            --bh-bg-alt:    #ffffff;
            --bh-line:      #e2e8f0;
            --bh-line-soft: #eef2f6;
            --bh-ink:       #0d2744;
            --bh-ink-2:     #475569;
            --bh-ink-3:     #94a3b8;
            --bh-yellow:    #FFE70A;
            --bh-yellow-d:  #d4c100;
            --bh-pink:      #ec4899;
            --bh-pink-d:    #be185d;
        }

        .blackhill {
            background:
                radial-gradient(60% 70% at 100% 0%, rgba(255,231,10,0.12), transparent 55%),
                radial-gradient(55% 70% at 0% 100%, rgba(236,72,153,0.08), transparent 55%),
                radial-gradient(40% 50% at 50% 50%, rgba(13,39,68,0.025), transparent 70%),
                var(--bh-bg);
            color: var(--bh-ink);
            padding: var(--section-y) 0;
            position: relative;
            overflow: hidden;
        }
        .blackhill::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(13,39,68,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(13,39,68,0.03) 1px, transparent 1px);
            background-size: 32px 32px;
            mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
            pointer-events: none;
            opacity: 0.7;
        }
        .blackhill .wrap { position: relative; }

        .bh-head {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            align-items: center;
            margin-bottom: 64px;
        }
        .bh-head-left .eyebrow {
            color: var(--bh-ink);
            background: var(--bh-yellow);
            padding: 6px 12px;
            border-radius: 4px;
            margin-bottom: 22px;
            display: inline-block;
            font-size: 11px;
            letter-spacing: 0.18em;
        }
        .bh-head-left h2 {
            color: var(--bh-ink);
            font-size: clamp(34px, 4.4vw, 54px);
            font-weight: 600;
            letter-spacing: -0.025em;
            line-height: 1.1;
            margin-bottom: 22px;
        }
        .bh-head-left h2 .accent-orange {
            color: var(--bh-ink);
            background-image: linear-gradient(transparent 64%, rgba(255,231,10,0.95) 64%, rgba(255,231,10,0.95) 92%, transparent 92%);
            padding: 0 0.06em;
        }
        .bh-head-left p {
            color: var(--bh-ink-2);
            font-size: 17px;
            line-height: 1.7;
            max-width: 56ch;
        }
        .bh-logo-card {
            background: #fff;
            border: 1px solid var(--bh-line);
            border-radius: var(--radius-lg);
            padding: 36px 32px;
            text-align: center;
            box-shadow:
                0 1px 0 #fff inset,
                0 30px 60px -30px rgba(13,39,68,0.18);
            position: relative;
            overflow: hidden;
        }
        .bh-logo-card::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--bh-yellow) 0%, var(--bh-pink) 100%);
        }
        .bh-logo-card img {
            max-width: 280px;
            width: 100%;
            height: auto;
            margin: 0 auto 18px;
            display: block;
        }
        .bh-logo-card .bh-tagline {
            display: inline-block;
            font-family: var(--mono);
            font-size: 10.5px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--bh-ink);
            background: var(--bh-yellow);
            padding: 4px 10px;
            border-radius: 3px;
            margin-bottom: 16px;
            font-weight: 700;
        }
        .bh-logo-card .bh-desc {
            font-size: 14.5px;
            line-height: 1.6;
            color: var(--bh-ink-2);
        }
        .bh-logo-card .bh-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 18px;
            color: var(--bh-ink);
            font-weight: 600;
            font-size: 14px;
            border-bottom: 2px solid var(--bh-yellow);
            padding-bottom: 1px;
            transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
        }
        .bh-link:hover { color: var(--bh-pink-d); border-color: var(--bh-pink); }

        .bh-services-label {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 28px;
        }
        .bh-services-label .label-text {
            display: inline-block;
            font-family: var(--mono);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--bh-ink);
            background: var(--bh-yellow);
            padding: 5px 11px;
            border-radius: 3px;
        }
        .bh-services-label .line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, var(--bh-line) 0%, transparent 100%);
        }
        .bh-services-title {
            font-size: clamp(26px, 3vw, 38px);
            font-weight: 600;
            letter-spacing: -0.02em;
            color: var(--bh-ink);
            margin-bottom: 32px;
            line-height: 1.15;
        }

        .bh-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }
        .bh-card {
            background: #fff;
            border: 1px solid var(--bh-line);
            border-radius: var(--radius-md);
            padding: 24px 22px 26px;
            position: relative;
            transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
            overflow: hidden;
        }
        .bh-card::before {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 3px;
            background: var(--bh-yellow);
            transform: scaleX(0.2);
            transform-origin: left;
            transition: transform 0.35s var(--ease);
        }
        .bh-card:hover {
            transform: translateY(-3px);
            border-color: var(--bh-yellow-d);
            box-shadow: 0 24px 40px -20px rgba(13,39,68,0.18);
        }
        .bh-card:hover::before { transform: scaleX(1); }
        .bh-card.pink::before { background: var(--bh-pink); }
        .bh-card.pink:hover { border-color: var(--bh-pink); }

        .bh-card-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px; height: 42px;
            border-radius: 8px;
            background: var(--bh-yellow);
            color: var(--bh-ink);
            font-size: 18px;
            margin-bottom: 14px;
            box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 6px 14px -6px rgba(255,231,10,0.5);
        }
        .bh-card.pink .bh-card-icon {
            background: var(--bh-pink);
            color: #fff;
            box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 14px -6px rgba(236,72,153,0.5);
        }
        .bh-card h4 {
            font-size: 16px;
            font-weight: 700;
            letter-spacing: -0.01em;
            color: var(--bh-ink);
            margin-bottom: 8px;
            line-height: 1.25;
        }
        .bh-card p {
            font-size: 13.5px;
            line-height: 1.6;
            color: var(--bh-ink-2);
        }

        .bh-foot {
            margin-top: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding: 24px 28px;
            background: #fff;
            border: 1px solid var(--bh-line);
            border-radius: var(--radius-md);
            flex-wrap: wrap;
            box-shadow: 0 1px 0 #fff inset, 0 12px 30px -16px rgba(13,39,68,0.12);
        }
        .bh-foot-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .bh-foot-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--mono);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--bh-ink);
            background: var(--bh-yellow);
            border: 1px solid var(--bh-yellow-d);
            padding: 6px 12px;
            border-radius: 999px;
        }
        .bh-foot-text {
            color: var(--bh-ink-2);
            font-size: 14.5px;
            line-height: 1.5;
        }
        .bh-foot-text strong { color: var(--bh-ink); font-weight: 700; }
        .btn-bh {
            background: var(--bh-ink);
            color: #fff;
        }
        .btn-bh:hover {
            background: var(--bh-yellow);
            color: var(--bh-ink);
            transform: translateY(-1px);
        }

        /* ----------------------------------------------------------------
           Recommendations row
           ---------------------------------------------------------------- */
        .recs {
            background: linear-gradient(180deg, var(--navy-850) 0%, var(--navy-950) 100%);
            padding: var(--section-y) 0;
        }
        .recs-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            margin-top: 56px;
        }
        .rec-card {
            border-radius: 14px;
            background: #ffffff;
            box-shadow:
                0 30px 80px -30px rgba(0, 0, 0, 0.55),
                0 12px 24px -12px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(0, 0, 0, 0.06);
            overflow: hidden;
        }
        .rec-card > .inner {
            background: transparent;
            border-radius: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        /* Reuse the browser-chrome top bar from .viz-chrome */
        .rec-card .viz-chrome {
            border-bottom: 1px solid #e2e6ec;
        }
        .rec-card .visual {
            position: relative;
            padding: 0;
            background: #ffffff;
            overflow: hidden;
            display: block;
            aspect-ratio: 16/9;
        }
        .rec-card .visual img {
            width: 100%;
            height: 100%;
            max-width: 100%;
            display: block;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            object-fit: cover;
            object-position: top;
        }
        .rec-card .body-pad {
            padding: 24px 28px 28px;
            background: #ffffff;
            border-top: 1px solid #eef1f4;
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .rec-card h3 {
            margin-bottom: 10px;
            color: #0d2744;
        }
        .rec-card .body {
            font-size: 15px;
            color: #475569;
        }
        .rec-card .module-tag {
            font-family: var(--mono);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 12px;
            display: inline-block;
        }
        .rec-card.inventra .module-tag { color: #9CC7F2; }
        .rec-card.spectrum .module-tag { color: #16a34a; }
        .rec-card .module-tag-logo {
            display: block;
            height: 56px;
            width: auto;
            max-width: none;
            object-fit: contain;
            margin-bottom: 4px;
            align-self: flex-start;
            flex-shrink: 0;
        }

        /* ----------------------------------------------------------------
           How it works
           ---------------------------------------------------------------- */
        .howitworks {
            background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
            padding: var(--section-y) 0;
            position: relative;
        }
        .howitworks::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
            background-size: 32px 32px;
            mask-image: radial-gradient(ellipse 50% 60% at 50% 40%, #000 0%, transparent 75%);
            -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 40%, #000 0%, transparent 75%);
            pointer-events: none;
        }
        .howitworks .wrap { position: relative; }
        .section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
        .section-head .eyebrow { margin-bottom: 16px; }
        .section-head h2 { margin-bottom: 16px; }
        .section-head .lead { margin: 0 auto; }

        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        .step {
            border-radius: var(--radius-lg);
            background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)) border-box;
            padding: 1px;
            transition: transform 0.25s var(--ease);
        }
        .step:hover { transform: translateY(-3px); }
        .step > .inner {
            background: var(--navy-900);
            border-radius: calc(var(--radius-lg) - 1px);
            padding: 32px 28px;
            height: 100%;
        }
        .step .num {
            font-family: var(--mono);
            font-size: 12px;
            letter-spacing: 0.14em;
            color: var(--green-400);
            margin-bottom: 18px;
            display: inline-block;
        }
        .step h3 { margin-bottom: 12px; }
        .step .body { font-size: 15px; color: var(--ink-300); }

        /* Why agentless trio */
        .why-head { margin-top: 72px; margin-bottom: 24px; text-align: center; }
        .why-head h3 {
            font-size: clamp(24px, 2.4vw, 32px);
            font-weight: 700;
            letter-spacing: -0.01em;
            color: var(--accent-blue);
            text-shadow:
                0 0 14px rgba(156, 199, 242, 0.55),
                0 0 36px rgba(156, 199, 242, 0.35);
        }
        .why-row {
            margin-top: 0;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            border-top: 1px solid var(--hairline);
            border-bottom: 1px solid var(--hairline);
        }
        .why-cell {
            padding: 36px 32px;
            border-right: 1px solid var(--hairline);
        }
        .why-cell:last-child { border-right: 0; }
        .why-cell .icon-w {
            color: var(--green-400);
            font-size: 22px;
            margin-bottom: 16px;
        }
        .why-cell h4 { font-size: 17px; font-weight: 600; color: var(--ink-0); margin-bottom: 10px; }
        .why-cell p { font-size: 14.5px; color: var(--ink-300); line-height: 1.65; }

        /* ----------------------------------------------------------------
           Mid-page CTA strip
           ---------------------------------------------------------------- */
        .mid-cta {
            background: var(--navy-850);
            border-top: 1px solid var(--hairline);
            border-bottom: 1px solid var(--hairline);
            padding: 56px 0;
            position: relative;
            overflow: hidden;
        }
        .mid-cta::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(50% 80% at 100% 50%, var(--glow-green), transparent 60%),
                radial-gradient(40% 80% at 0% 50%, rgba(20,48,79,0.5), transparent 65%);
            pointer-events: none;
            opacity: 0.7;
        }
        .mid-cta-inner {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 32px;
            flex-wrap: wrap;
        }
        .mid-cta-text { max-width: 680px; }
        .mid-cta-text .eyebrow { margin-bottom: 12px; display: inline-block; }
        .mid-cta-text h3 {
            font-size: clamp(22px, 2.4vw, 30px);
            font-weight: 600;
            letter-spacing: -0.02em;
            line-height: 1.25;
            color: var(--ink-0);
        }
        .mid-cta-actions {
            display: inline-flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        /* ----------------------------------------------------------------
           Integrations showcase
           ---------------------------------------------------------------- */
        .integrations {
            background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-900) 100%);
            padding: var(--section-y) 0;
            position: relative;
        }
        .integrations::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
            background-size: 32px 32px;
            mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 0%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 0%, transparent 80%);
            pointer-events: none;
        }
        .integrations .wrap { position: relative; }
        .int-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        .int-cell {
            position: relative;
            border-radius: var(--radius-md);
            background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015)) border-box;
            padding: 1px;
            transition: transform 0.3s var(--ease);
        }
        .int-cell:hover { transform: translateY(-3px); }
        .int-cell > .inner {
            background: var(--navy-950);
            border-radius: calc(var(--radius-md) - 1px);
            padding: 22px 18px 20px;
            text-align: center;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            transition: background 0.3s var(--ease);
        }
        .int-cell:hover > .inner { background: var(--navy-900); }
        .int-icon {
            width: 44px; height: 44px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: var(--green-300);
            background: rgba(34,197,94,0.08);
            border: 1px solid rgba(34,197,94,0.18);
            transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
        }
        .int-cell:hover .int-icon {
            background: rgba(34,197,94,0.16);
            color: var(--green-400);
            border-color: rgba(34,197,94,0.3);
        }
        .int-name {
            font-size: 13.5px;
            font-weight: 600;
            color: var(--ink-0);
            line-height: 1.25;
        }
        .int-meta {
            font-size: 13px;
            color: var(--ink-400);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .int-foot {
            margin-top: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            color: var(--ink-300);
            font-size: 14px;
        }
        .int-foot i { color: var(--green-400); }

        /* ----------------------------------------------------------------
           Pricing — dark, intuitive, scale-down emphasis
           ---------------------------------------------------------------- */
        .pricing {
            background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
            padding: var(--section-y) 0;
            position: relative;
            overflow: hidden;
        }
        .pricing::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(40% 60% at 50% 0%, rgba(34,197,94,0.12), transparent 60%),
                radial-gradient(50% 40% at 50% 100%, rgba(20,48,79,0.4), transparent 70%);
            pointer-events: none;
        }
        .pricing .wrap { position: relative; }

        .price-card {
            margin-top: 56px;
            max-width: 920px;
            margin-left: auto;
            margin-right: auto;
            border-radius: var(--radius-lg);
            background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02)) border-box;
            padding: 1px;
            box-shadow: 0 60px 120px -40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02);
        }
        .price-card > .pc-inner {
            background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
            border-radius: calc(var(--radius-lg) - 1px);
            padding: clamp(28px, 4vw, 44px);
        }

        .price-head {
            margin-bottom: 28px;
            padding-bottom: 28px;
            border-bottom: 1px solid var(--hairline);
            text-align: center;
        }
        .price-head-title {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .price-head-title .name {
            font-size: clamp(20px, 2.4vw, 26px);
            font-weight: 700;
            color: var(--ink-0);
            letter-spacing: -0.01em;
        }
        .price-head-title .sub {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            border-radius: 999px;
            background: rgba(34,197,94,0.12);
            border: 1px solid rgba(34,197,94,0.25);
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--green-400);
        }
        .price-head-bundle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--ink-200);
        }
        .price-head-bundle i { color: var(--green-400); }

        .bundle-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 18px;
            margin-bottom: 28px;
        }
        .bundle-row .what {
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--ink-300);
            margin-right: 4px;
        }
        .bundle-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13.5px;
            color: var(--ink-100);
        }
        .bundle-tag i { color: var(--green-400); font-size: 13px; }

        /* Tier strip — visualises the four pricing tiers */
        .tier-strip {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
            margin-bottom: 24px;
        }
        .tier-cell {
            position: relative;
            padding: 12px 14px;
            border-radius: 8px;
            background: rgba(255,255,255,0.025);
            border: 1px solid var(--hairline);
            transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
        }
        .tier-cell.active {
            background: linear-gradient(180deg, rgba(34,197,94,0.15), rgba(34,197,94,0.04));
            border-color: rgba(34,197,94,0.5);
            box-shadow: 0 0 0 1px rgba(34,197,94,0.2), 0 8px 24px -8px rgba(34,197,94,0.3);
        }
        .tier-cell .tier-range {
            font-family: var(--mono);
            font-size: 10.5px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--ink-400);
            margin-bottom: 4px;
        }
        .tier-cell.active .tier-range { color: var(--green-300); }
        .tier-cell .tier-rate {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink-100);
            font-variant-numeric: tabular-nums;
        }
        .tier-cell.active .tier-rate { color: #fff; }
        .tier-cell .tier-rate small {
            font-size: 11px;
            font-weight: 400;
            color: var(--ink-400);
        }
        .tier-cell.active .tier-rate small { color: var(--ink-200); }

        .seat-area {
            margin-bottom: 28px;
        }
        .seat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .seat-row label {
            font-family: var(--mono);
            font-size: 11.5px;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--ink-300);
        }
        .seat-input-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--hairline-strong);
            border-radius: 10px;
            padding: 8px 14px;
            transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
        }
        .seat-input-wrap:focus-within {
            border-color: var(--green-400);
            box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
        }
        .seat-input {
            border: 0;
            outline: 0;
            background: transparent;
            font-family: var(--font);
            font-size: 16px;
            font-weight: 700;
            color: var(--ink-0);
            width: 88px;
            text-align: right;
            -moz-appearance: textfield;
        }
        .seat-input::-webkit-outer-spin-button,
        .seat-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .seat-input-suffix { font-size: 13px; color: var(--ink-300); font-weight: 500; }

        .seat-slider {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: rgba(255,255,255,0.08);
            -webkit-appearance: none;
            appearance: none;
            outline: none;
            cursor: pointer;
            margin-bottom: 8px;
        }
        .seat-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px; height: 20px;
            border-radius: 50%;
            background: var(--green-500);
            border: 3px solid var(--navy-950);
            box-shadow: 0 0 0 1px var(--green-400);
            cursor: pointer;
            transition: transform 0.15s var(--ease);
        }
        .seat-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
        .seat-slider::-moz-range-thumb {
            width: 22px; height: 22px;
            border-radius: 50%;
            background: var(--green-500);
            border: 3px solid var(--navy-950);
            box-shadow: 0 0 0 1px var(--green-400);
            cursor: pointer;
        }
        .tier-marks {
            display: flex;
            justify-content: space-between;
            font-family: var(--mono);
            font-size: 11.5px;
            letter-spacing: 0.06em;
            color: var(--ink-200);
        }

        .calc-results {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: var(--radius-md);
            overflow: hidden;
        }
        .calc-results.calc-results-2col { grid-template-columns: repeat(2, 1fr); }
        .result-tile {
            background: rgba(255,255,255,0.03);
            padding: 28px 20px;
            text-align: center;
            border-right: 1px solid rgba(255,255,255,0.07);
        }
        .result-tile:last-child { border-right: 0; }
        .result-tile.featured { background: rgba(255,255,255,0.03); }
        .result-label {
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--ink-400);
            margin-bottom: 12px;
        }
        .result-tile.featured .result-label { color: var(--green-400); }
        .result-value {
            font-size: clamp(30px, 3.6vw, 40px);
            font-weight: 700;
            color: var(--ink-0);
            letter-spacing: -0.03em;
            line-height: 1;
            margin-bottom: 8px;
            font-variant-numeric: tabular-nums;
            transition: color 0.2s var(--ease);
        }
        .result-tile.featured .result-value { color: var(--green-400); }
        .result-sub {
            font-size: 12px;
            color: var(--ink-400);
        }
        .result-tile.featured .result-sub { color: var(--ink-300); }

        .savings-line {
            margin-top: 18px;
            text-align: center;
            font-size: 13.5px;
            color: var(--ink-200);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .savings-line .pill-mini {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(34,197,94,0.12);
            border: 1px solid rgba(34,197,94,0.3);
            color: var(--green-300);
            font-family: var(--mono);
            font-size: 11.5px;
            letter-spacing: 0.06em;
            font-weight: 600;
        }

        .pricing-hints {
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid var(--hairline);
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px 28px;
            font-size: 13px;
            color: var(--ink-300);
        }
        .pricing-hints span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .pricing-hints i { color: var(--green-400); }

        /* Calculator carousel — switches between the seat-based and Horizon calculators */
        .calc-tabs {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 28px;
            flex-wrap: wrap;
        }
        .calc-tab {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: 999px;
            border: 1px solid var(--hairline-strong);
            background: transparent;
            color: var(--ink-300);
            font-family: var(--mono);
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
        }
        .calc-tab .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.6; }
        .calc-tab:hover { border-color: var(--green-400); color: var(--ink-0); }
        .calc-tab.active { background: var(--green-500); border-color: var(--green-500); color: #fff; }
        .calc-tab.horizon-tab:hover { border-color: var(--horizon-deep); }
        .calc-tab.horizon-tab.active { background: var(--horizon-deep); border-color: var(--horizon-deep); color: #fff; }

        .calc-carousel-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            margin-top: 28px;
        }
        .calc-arrow-btn {
            width: 40px; height: 40px;
            border-radius: 50%;
            border: 1px solid var(--hairline-strong);
            background: transparent;
            color: var(--ink-200);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
        }
        .calc-arrow-btn:hover { border-color: var(--green-400); color: var(--ink-0); }

        /* Horizon calculator card — purple accent instead of green */
        .horizon-card .price-head-title .sub {
            background: rgba(124,58,237,0.12);
            border-color: rgba(124,58,237,0.28);
            color: var(--horizon-deep);
        }
        .horizon-card .seat-input-wrap:focus-within {
            border-color: var(--horizon-deep);
            box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
        }
        .horizon-slider::-webkit-slider-thumb {
            background: var(--horizon-deep);
            box-shadow: 0 0 0 1px var(--horizon-deep);
        }
        .horizon-slider::-moz-range-thumb {
            background: var(--horizon-deep);
            box-shadow: 0 0 0 1px var(--horizon-deep);
        }
        .horizon-featured .result-label,
        .horizon-featured .result-value { color: var(--horizon-deep); }
        .horizon-card .pricing-hints i { color: var(--horizon-deep); }

        .custom-quote {
            margin: 24px auto 0;
            max-width: 920px;
            background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
            border: 1px solid var(--hairline);
            border-radius: var(--radius-lg);
            padding: 22px 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
        }
        .custom-quote-left {
            display: flex;
            align-items: center;
            gap: 16px;
            flex: 1;
            min-width: 280px;
        }
        .custom-quote-icon {
            width: 44px; height: 44px;
            border-radius: 10px;
            background: rgba(34,197,94,0.1);
            color: var(--green-300);
            border: 1px solid rgba(34,197,94,0.2);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex: 0 0 auto;
        }
        .custom-quote-text strong {
            display: block;
            color: var(--ink-0);
            font-weight: 600;
            font-size: 15px;
            margin-bottom: 2px;
        }
        .custom-quote-text span {
            color: var(--ink-300);
            font-size: 13.5px;
            line-height: 1.5;
        }

        /* ----------------------------------------------------------------
           Final CTA
           ---------------------------------------------------------------- */
        .final {
            position: relative;
            background: var(--navy-950);
            padding: var(--section-y) 0;
            overflow: hidden;
        }
        .final::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(40% 60% at 50% 100%, var(--glow-green), transparent 70%),
                radial-gradient(50% 40% at 50% 0%, rgba(20,48,79,0.4), transparent 70%);
            pointer-events: none;
        }
        .final::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
            background-size: 28px 28px;
            mask-image: radial-gradient(ellipse 50% 60% at 50% 50%, #000 0%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 50%, #000 0%, transparent 80%);
            pointer-events: none;
        }
        .final .wrap { position: relative; text-align: center; }
        .final h2 {
            font-size: clamp(36px, 5vw, 64px);
            margin: 20px auto 20px;
            max-width: 22ch;
        }
        .final p {
            color: var(--ink-200);
            font-size: 18px;
            line-height: 1.65;
            max-width: 620px;
            margin: 0 auto 36px;
        }
        .final-cta {
            display: inline-flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
        }

        /* ----------------------------------------------------------------
           Footer
           ---------------------------------------------------------------- */
        .footer {
            background: #f6f8fb;
            border-top: 1px solid #e2e8f0;
            padding: 64px 0 28px;
            color: #475569;
            font-size: 14px;
        }
        .footer-grid {
            display: grid;
            /* Brand column, then Product / Company / Resources.
               When the Reviews column is restored in the footer markup below,
               switch to the five-column template:
                   grid-template-columns: 1.5fr 0.9fr 0.9fr 1.2fr 0.9fr;
                   gap: 40px;
               and restore the .footer-grid rule in the max-width:1024px block. */
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 56px;
            margin-bottom: 48px;
        }
        .footer-brand img {
            display: block;
            height: 36px;
            width: auto;
            margin-bottom: 18px;
        }
        .footer-brand p {
            color: #475569;
            line-height: 1.65;
            max-width: 320px;
            margin-bottom: 20px;
        }
        .footer-social { display: flex; gap: 8px; }
        .footer-social a {
            width: 36px; height: 36px;
            border-radius: 8px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            color: #0d2744;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
        }
        .footer-social a:hover {
            background: var(--green-500);
            color: #ffffff;
            border-color: var(--green-500);
        }
        .footer-col h5 {
            color: #0d2744;
            font-size: 13px;
            font-weight: 600;
            font-family: var(--mono);
            letter-spacing: 0.14em;
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .footer-col ul li { margin-bottom: 10px; }
        .footer-col a {
            color: #475569;
            transition: color 0.2s var(--ease);
        }
        .footer-col a:hover { color: var(--green-500); }

        .footer-bottom {
            border-top: 1px solid #e2e8f0;
            padding-top: 24px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px 20px;
            color: #94a3b8;
            font-size: 13px;
        }
        .footer-bottom a { color: #475569; }
        .footer-bottom a:hover { color: var(--green-500); }

        /* ----------------------------------------------------------------
           Responsive
           ---------------------------------------------------------------- */
        @media (max-width: 1024px) {
            .module-grid { grid-template-columns: 1fr; gap: 48px; }
            .module-grid.reverse { direction: ltr; }
            .recs-grid { grid-template-columns: 1fr; }
            .steps { grid-template-columns: 1fr; }
            .why-row { grid-template-columns: 1fr; border-top: 0; border-bottom: 0; }
            .why-cell { border-right: 0; border-bottom: 1px solid var(--hairline); }
            .why-cell:first-child { border-top: 1px solid var(--hairline); }
            .mid-cta-inner { justify-content: flex-start; }
            .bh-head { grid-template-columns: 1fr; gap: 40px; }
            .bh-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 820px) {
            .nav-links { display: none; }
            .nav-cta .btn-ghost { display: none; }
            .nav-burger { display: inline-flex; }
            .module-features { grid-template-columns: 1fr; }
            .calc-results { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
            .footer-brand { grid-column: 1 / -1; }
            .reveal-stage { margin-top: 32px; }
            .int-grid { grid-template-columns: repeat(2, 1fr); }
            .tier-strip { grid-template-columns: repeat(2, 1fr); }
            .price-head { flex-direction: column; align-items: flex-start; }
            .viz-stage { padding: 14px; }
            .viz-tab { padding: 14px 16px; font-size: 11px; }
            .estate-frame, .cloud-frame { padding: 22px; }
            .es-count { display: none; }
            .platform-cards { grid-template-columns: 1fr; }
            .bh-foot { flex-direction: column; align-items: flex-start; }
            .bh-foot-left { flex-direction: column; align-items: flex-start; }
            .bh-foot .btn { width: 100%; }
        }

        @media (max-width: 520px) {
            :root { --nav-h: 64px; }
            .hero-inner { padding: 56px 20px 80px; }
            .hero-pill { font-size: 11px; letter-spacing: 0.1em; }
            .hero-sub { font-size: 17px; }
            .hero-cta .btn { width: 100%; }
            .calc-controls { flex-direction: column; align-items: stretch; }
            .segmented { width: 100%; }
            .seg-btn { flex: 1; }
            .footer-grid { grid-template-columns: 1fr; }
            .int-grid { grid-template-columns: repeat(2, 1fr); }
            .mid-cta { padding: 40px 0; }
            .mid-cta-actions .btn { width: 100%; }
            .bh-grid { grid-template-columns: 1fr; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
            .reveal { opacity: 1; transform: none; }
            html { scroll-behavior: auto; }
        }

        /* =================================================================
           LIGHT THEME — brochure-aligned cream/navy palette
           Hero, countdown, footer, module/viz/rec internal cards stay dark.
           Everything else becomes cream-light with navy text + green accents.
           ================================================================= */

        :root {
            --paper:        #ffffff;
            --paper-2:      #f6f8fb;
            --paper-soft:   #ffffff;
            --paper-line:   #e2e8f0;
            --paper-line-2: #eef2f6;
            --ink-text:     #0d2744;
            --ink-text-2:   #475569;
            --ink-text-3:   #94a3b8;
        }

        html, body { background: var(--paper); }
        body { color: var(--ink-text); }

        /* --- Section backgrounds flipped to cream --- */
        .reveal-section,
        .module.inventra,
        .module.spectrum,
        .module.horizon,
        .viz.inventra,
        .viz.spectrum,
        .viz.horizon,
        .mid-cta,
        .recs,
        .howitworks,
        .integrations,
        .pricing,
        .final {
            background: var(--paper);
            color: var(--ink-text);
        }
        /* Sections that host the white browser-chrome cards get a subtle tint
           so the cards have visual separation from the page surface. */
        .recs,
        .viz.inventra,
        .viz.spectrum,
        .viz.horizon {
            background: var(--paper-2);
        }
        .howitworks::before,
        .integrations::before,
        .pricing::before {
            background-image:
                linear-gradient(rgba(13, 39, 68, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(13, 39, 68, 0.04) 1px, transparent 1px);
        }
        .pricing::before { background: none; }
        .final::before { background: none; }
        .final::after { background: none; }

        /* --- Section heads on light --- */
        .reveal-section h2.h2,
        .module h2.h2,
        .viz h2.h2,
        .recs h2.h2,
        .howitworks h2.h2,
        .integrations h2.h2,
        .pricing h2.h2,
        .final h2.h2,
        .reveal-caption h2.h2,
        .reveal-section .h3, .module .h3, .recs .h3, .howitworks .h3 {
            color: var(--ink-text);
        }
        /* Section heading accents — "Operates" etc. use the button blue */
        .howitworks h2.h2 .accent { color: var(--accent-blue); }
        .reveal-section .lead,
        .module .body,
        .viz .lead,
        .recs .lead,
        .recs .body,
        .howitworks .lead,
        .howitworks .body,
        .integrations .lead,
        .pricing .lead,
        .final p,
        .final-body,
        .reveal-caption .lead {
            color: var(--ink-text-2);
        }

        /* --- Display headline highlighter on light --- */
        .module .display .accent,
        .viz .display .accent,
        .pricing .display .accent,
        .final .display .accent,
        .reveal-caption .display .accent {
            color: var(--ink-text);
        }

        /* --- Eyebrow on light still green; pill solid-light on cream is white --- */
        .pill.solid-light {
            background: rgba(22, 163, 74, 0.12);
            color: var(--green-500);
        }

        /* --- Final CTA on light --- */
        .final {
            background:
                radial-gradient(50% 80% at 50% 100%, rgba(22,163,74,0.08), transparent 60%),
                var(--paper);
        }
        .final h2.h2 { color: var(--ink-text); }
        .final h2.h2 .accent {
            color: var(--green-500);
            background-image: linear-gradient(transparent 65%, rgba(22,163,74,0.18) 65%, rgba(22,163,74,0.18) 92%, transparent 92%);
        }
        .final .eyebrow { color: var(--accent-blue); }
        .final .btn-ghost {
            background: transparent;
            color: var(--ink-text);
            border-color: rgba(13, 39, 68, 0.2);
        }
        .final .btn-ghost:hover {
            background: rgba(13, 39, 68, 0.04);
            border-color: rgba(13, 39, 68, 0.4);
            color: var(--ink-text);
        }
        .final .btn-light {
            background: var(--ink-text);
            color: #fff;
        }
        .final .btn-light:hover {
            background: #000;
            color: #fff;
        }

        /* --- How it works steps -> white cards with light borders --- */
        .howitworks .step {
            background: linear-gradient(180deg, rgba(13,39,68,0.08), rgba(13,39,68,0.02)) border-box;
        }
        .howitworks .step > .inner {
            background: #ffffff;
            color: var(--ink-text);
        }
        .howitworks .step h3 { color: var(--ink-text); }
        .howitworks .step .body { color: var(--ink-text-2); }
        .howitworks .step .num {
            color: var(--green-500);
        }

        /* --- Why agentless cells --- */
        .howitworks .why-head h3 { color: var(--accent-blue); }
        .howitworks .why-row {
            border-top-color: var(--paper-line);
            border-bottom-color: var(--paper-line);
        }
        .howitworks .why-cell {
            border-right-color: var(--paper-line);
        }
        .howitworks .why-cell h4 { color: var(--ink-text); }
        .howitworks .why-cell p { color: var(--ink-text-2); }
        .howitworks .why-cell .icon-w { color: var(--green-500); }

        /* --- Integrations grid -> white cells --- */
        .integrations .int-cell {
            background: linear-gradient(180deg, rgba(13,39,68,0.06), rgba(13,39,68,0.015)) border-box;
        }
        .integrations .int-cell > .inner {
            background: #ffffff;
            color: var(--ink-text);
        }
        .integrations .int-cell:hover > .inner { background: var(--paper-2); }
        .integrations .int-name { color: var(--ink-text); }
        .integrations .int-meta { color: #111111; }
        .integrations .int-icon {
            background: rgba(22, 163, 74, 0.1);
            color: var(--green-500);
            border-color: rgba(22, 163, 74, 0.22);
        }
        .integrations .int-cell:hover .int-icon {
            background: rgba(22, 163, 74, 0.18);
            color: var(--green-600, var(--green-500));
            border-color: rgba(22, 163, 74, 0.4);
        }
        .integrations .int-foot { color: var(--ink-text-2); }
        .integrations .int-foot i { color: var(--green-500); }

        /* --- Recommendations cards: light theme keeps the white browser-chrome card --- */
        .recs .rec-card .body-pad {
            border-top-color: var(--paper-line-2);
        }
        .recs .rec-card h3.h3 { color: var(--ink-text); }
        .recs .rec-card .body { color: var(--ink-text-2); }

        /* --- Mid CTA strip on light --- */
        .mid-cta {
            background:
                radial-gradient(40% 80% at 100% 50%, rgba(22,163,74,0.1), transparent 60%),
                radial-gradient(40% 80% at 0% 50%, rgba(13,39,68,0.04), transparent 60%),
                var(--paper);
            border-top: 1px solid var(--paper-line);
            border-bottom: 1px solid var(--paper-line);
        }
        .mid-cta::before { background: none; }
        .mid-cta .eyebrow { color: var(--accent-blue); }
        .mid-cta-text h3 { color: var(--ink-text); }
        .mid-cta .btn-ghost {
            color: var(--ink-text);
            border-color: rgba(13, 39, 68, 0.2);
        }
        .mid-cta .btn-ghost:hover {
            background: rgba(13, 39, 68, 0.04);
            color: var(--ink-text);
            border-color: rgba(13, 39, 68, 0.4);
        }

        /* --- Module sections: outer becomes cream, module-hero card stays dark navy --- */
        .module.inventra,
        .module.spectrum {
            background:
                radial-gradient(60% 80% at 100% 0%, rgba(0,80,136,0.05), transparent 60%),
                var(--paper);
        }
        .module.spectrum {
            background:
                radial-gradient(60% 80% at 0% 0%, rgba(22,163,74,0.06), transparent 60%),
                var(--paper);
        }
        .module-copy h2.h2 { color: var(--ink-text); }
        .module-copy .body { color: var(--ink-text-2); }
        .module-copy .feat .name { color: var(--ink-text); }
        .module-copy .feat .desc { color: var(--ink-text-2); }
        .module-copy .action-tag {
            background: #ffffff;
            border-color: var(--paper-line);
            color: var(--ink-text-2);
        }
        .module.inventra .feat .icon {
            background: rgba(0, 80, 136, 0.1);
            color: #005088;
        }
        .module.spectrum .feat .icon {
            background: rgba(22, 163, 74, 0.12);
            color: var(--green-500);
        }
        .module.inventra .module-copy .action-tag .code { color: #005088; }
        .module.spectrum .module-copy .action-tag .code { color: var(--green-500); }
        /* Inventra eyebrow on light background → dark blue */
        .module.inventra .eyebrow { color: #005088; }

        /* --- Viz sections: outer becomes cream, the viz-card stays dark for screenshots --- */
        .viz.inventra,
        .viz.spectrum {
            background: var(--paper);
        }
        .viz::before { background: none; }
        .viz .display { color: var(--ink-text); }
        .viz .lead { color: var(--ink-text-2); }
        .viz.inventra .pill.solid-light {
            background: rgba(0, 80, 136, 0.1);
            color: #005088;
        }
        .viz.spectrum .pill.solid-light {
            background: rgba(22, 163, 74, 0.12);
            color: var(--green-500);
        }
        .viz.inventra .display .accent { color: #005088; }
        .viz.spectrum .display .accent { color: var(--green-500); }
        /* Section-head eyebrow follows the product brand colour */
        .viz.inventra .section-head .eyebrow { color: #005088; }
        .viz.spectrum .section-head .eyebrow { color: var(--green-500); }
        /* Inventra viz tab active state */
        .viz.inventra .viz-tab[aria-selected="true"] { color: #005088; border-bottom-color: #005088; }
        .viz.inventra .viz-tab[aria-selected="true"]::after {
            background: linear-gradient(180deg, rgba(0,80,136,0.18), transparent);
        }

        /* --- Horizon (purple) on light --- */
        .module.horizon {
            background:
                radial-gradient(60% 80% at 100% 0%, rgba(139,92,246,0.07), transparent 60%),
                var(--paper);
        }
        .module.horizon .feat .icon {
            background: rgba(139, 92, 246, 0.12);
            color: #7C3AED;
        }
        .module.horizon .eyebrow { color: #7C3AED; }
        .module.horizon .module-copy .action-tag .code { color: #7C3AED; }
        .module.horizon .module-brand .module-brand-tag { color: #7C3AED; }
        .viz.horizon .pill.solid-light {
            background: rgba(139, 92, 246, 0.12);
            color: #7C3AED;
        }
        .viz.horizon .display .accent { color: #7C3AED; }
        .viz.horizon .section-head .eyebrow { color: #7C3AED; }
        .viz.horizon .viz-tab[aria-selected="true"] { color: #7C3AED; border-bottom-color: #7C3AED; }
        .viz.horizon .viz-tab[aria-selected="true"]::after {
            background: linear-gradient(180deg, rgba(139,92,246,0.18), transparent);
        }
        .rec-card.horizon .module-tag { color: #7C3AED; }

        /* --- Pricing on white: borderless inline calculator --- */
        .pricing { padding: clamp(72px, 9vw, 120px) 0; }
        .pricing .section-head h2.h2 { color: var(--ink-text); }
        .pricing .section-head .lead { color: var(--ink-text-2); }
        .pricing .eyebrow { color: var(--accent-blue); }

        /* Strip the card chrome — calculator flows on the page */
        .pricing .price-card {
            background: none;
            padding: 0;
            border: none;
            box-shadow: none;
            max-width: 920px;
        }
        .pricing .price-card > .pc-inner {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
        }

        /* Header — pill + product name on white */
        .pricing .price-head {
            border-bottom: none;
            padding-bottom: 6px;
            margin-bottom: 28px;
        }
        .pricing .price-head-title { gap: 12px; }
        .pricing .price-head-title .sub {
            padding: 6px 16px;
            font-size: 12px;
            letter-spacing: 0.14em;
        }
        .pricing .price-head-title .name {
            color: var(--ink-text);
            font-size: clamp(24px, 2.8vw, 34px);
        }

        /* Seat input + slider on light surfaces */
        .pricing .seat-row label { color: var(--ink-text-2); }
        .pricing .seat-input-wrap {
            background: #ffffff;
            border: 1px solid var(--paper-line);
        }
        .pricing .seat-input { color: var(--ink-text); }
        .pricing .seat-input-suffix { color: var(--ink-text-3); }
        .pricing .seat-slider { --slider-fill-empty: var(--paper-line); }
        .pricing .seat-slider::-webkit-slider-thumb {
            border-color: #ffffff;
            box-shadow: 0 0 0 1px var(--green-500), 0 2px 6px rgba(13,39,68,0.18);
        }
        .pricing .seat-slider::-moz-range-thumb {
            border-color: #ffffff;
            box-shadow: 0 0 0 1px var(--green-500), 0 2px 6px rgba(13,39,68,0.18);
        }
        .pricing .horizon-slider::-webkit-slider-thumb {
            box-shadow: 0 0 0 1px var(--horizon-deep), 0 2px 6px rgba(13,39,68,0.18);
        }
        .pricing .horizon-slider::-moz-range-thumb {
            box-shadow: 0 0 0 1px var(--horizon-deep), 0 2px 6px rgba(13,39,68,0.18);
        }
        .pricing .tier-marks {
            color: var(--ink-text-2);
            font-size: 12.5px;
            font-weight: 600;
        }

        /* Result tiles — borderless, display-scale numbers */
        .pricing .calc-results {
            border: none;
            border-top: 1px solid var(--paper-line);
            border-radius: 0;
            padding-top: 28px;
            margin-top: 8px;
        }
        .pricing .result-tile {
            background: transparent;
            border-right: none;
            padding: 0 16px;
        }
        .pricing .result-tile.featured { background: transparent; }
        .pricing .result-label { color: var(--ink-text-3); margin-bottom: 12px; }
        .pricing .result-tile.featured .result-label { color: var(--green-500); }
        .pricing .result-value {
            font-size: clamp(38px, 4.8vw, 58px);
            color: var(--ink-text);
            margin-bottom: 8px;
        }
        .pricing .result-tile.featured .result-value { color: var(--green-500); }
        .pricing .result-sub { color: var(--ink-text-3); }
        .pricing .result-tile.featured .result-sub { color: var(--ink-text-2); }
        .pricing .result-tile.horizon-featured .result-label,
        .pricing .result-tile.horizon-featured .result-value { color: var(--horizon-deep); }

        /* Hints — minimal, no enclosing border */
        .pricing .pricing-hints {
            border-top: none;
            margin-top: 28px;
            padding-top: 0;
            color: var(--ink-text-3);
        }

        /* Calculator carousel tabs/arrows on white */
        .pricing .calc-tab {
            border-color: var(--paper-line);
            background: #ffffff;
            color: var(--ink-text-2);
        }
        .pricing .calc-tab:hover { color: var(--ink-text); }
        .pricing .calc-tab.active {
            background: var(--green-500);
            border-color: var(--green-500);
            color: #fff;
        }
        .pricing .calc-tab.horizon-tab.active {
            background: var(--horizon-deep);
            border-color: var(--horizon-deep);
            color: #fff;
        }
        .pricing .calc-arrow-btn {
            border-color: var(--paper-line);
            background: #ffffff;
            color: var(--ink-text-2);
        }
        .pricing .calc-arrow-btn:hover { color: var(--ink-text); border-color: var(--green-500); }

        /* Stack tiles with hairlines between on small screens */
        @media (max-width: 820px) {
            .pricing .calc-results {
                padding-top: 24px;
            }
            .pricing .result-tile {
                padding: 24px 0;
                border-top: 1px solid var(--paper-line);
            }
            .pricing .result-tile:first-child {
                border-top: none;
                padding-top: 0;
            }
            .pricing-table-wrap { margin-top: 32px; }
            .pricing-table th,
            .pricing-table td { padding: 12px 16px; font-size: 13.5px; }
        }

        /* Tighten the cost table further on small phones */
        @media (max-width: 480px) {
            .pricing-table-title { font-size: 11px; }
            .pricing-table th,
            .pricing-table td { padding: 10px 12px; font-size: 13px; }
        }

        /* Custom quote sits flush under the calculator */
        .pricing .custom-quote {
            background: #ffffff;
            border: 1px solid var(--paper-line);
            margin-top: 16px;
        }
        .pricing .custom-quote-icon {
            background: rgba(22, 163, 74, 0.1);
            color: var(--green-500);
            border-color: rgba(22, 163, 74, 0.25);
        }
        .pricing .custom-quote-text strong { color: var(--ink-text); }
        .pricing .custom-quote-text span { color: var(--ink-text-2); }

        /* Example costs table, sits under the calculator */
        .pricing-table-wrap {
            max-width: 920px;
            margin: 40px auto 0;
        }
        .pricing-table-title {
            font-family: var(--mono);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--ink-text-3);
            margin-bottom: 14px;
        }
        .pricing-table-scroll {
            overflow-x: auto;
            border: 1px solid var(--paper-line);
            border-radius: var(--radius-md);
        }
        .pricing-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14.5px;
            white-space: nowrap;
        }
        .pricing-table th,
        .pricing-table td {
            padding: 14px 20px;
            text-align: right;
        }
        .pricing-table th:first-child,
        .pricing-table td:first-child {
            text-align: left;
        }
        .pricing-table thead th {
            background: var(--paper-2);
            color: var(--ink-text-2);
            font-weight: 600;
            font-size: 12.5px;
            letter-spacing: 0.02em;
            border-bottom: 1px solid var(--paper-line);
        }
        .pricing-table tbody td {
            color: var(--ink-text);
            font-variant-numeric: tabular-nums;
        }
        .pricing-table tbody td:first-child {
            font-weight: 600;
        }
        .pricing-table tbody tr:not(:last-child) td {
            border-bottom: 1px solid var(--paper-line-2);
        }

        /* ============================================================
           RESPONSIVE — comprehensive breakpoints
           ============================================================ */

        /* ---- Wide / large desktop (≥ 1400px) ------------------- */
        @media (min-width: 1400px) {
            .spc-prism-stage { max-width: 620px; }
        }

        /* ---- Tablet landscape (≤ 1024px) — already partially handled above,
               these are addenda ------------------------------------- */
        @media (max-width: 1024px) {
            .hero-pill { font-size: 14px; letter-spacing: 0.1em; }
            .spc-prism-stage { max-width: 480px; }
        }

        /* ---- Tablet portrait (≤ 820px) — addenda ---------------- */
        @media (max-width: 820px) {
            .hero-pill { font-size: 13px; }
            .hero-inner { padding: 64px 20px 80px; }

            /* Spectrum prism stage: drop aspect-ratio, fix height so it
               doesn't inflate to full-width square in single-column layout */
            .spc-prism-stage {
                aspect-ratio: unset;
                height: 260px;
                max-width: 100%;
            }
            .spc-prism-halo {
                width: 50%; height: 80%;
            }

            /* Scale chips down so they don't crowd the badge */
            .spc-chip { padding: 6px 10px 6px 6px; gap: 6px; }
            .spc-chip-icon { width: 24px; height: 24px; font-size: 12px; }
            .spc-chip-label { font-size: 9.5px; letter-spacing: 0.06em; }

            /* Badge: fixed size, vertically centred */
            .spc-logo-badge { padding: 8px 10px; top: 50%; }
            .spc-logo-badge img { width: 120px; }

            /* Module brand image */
            .module-brand img { height: 36px; width: auto; }

            /* Countdown: hide subtitle on tablet */
            .cd-banner-sub { display: none; }
        }

        /* ---- Large phones (≤ 640px) ----------------------------- */
        @media (max-width: 640px) {
            /* Hero */
            .hero-builtby { font-size: 12.5px; gap: 6px; margin-bottom: 12px; }
            .hero-pill { font-size: 11px; letter-spacing: 0.08em; margin-bottom: 18px; }
            .hero-sub { font-size: 16px; }
            .hero-trust { font-size: 12px; gap: 8px 14px; }

            /* Spectrum prism: compact chips, labels still visible */
            .spc-chip { padding: 4px 7px 4px 4px; gap: 5px; }
            .spc-chip-icon { width: 20px; height: 20px; font-size: 10px; }
            .spc-chip-label { font-size: 7.5px; letter-spacing: 0.04em; }
            .spc-logo-badge img { width: 110px; }
            .spc-logo-badge { padding: 7px 9px; top: 50%; }
            .spc-prism-stage { height: 220px; }

        }

        /* ---- Small phones (≤ 480px) ----------------------------- */
        @media (max-width: 480px) {
            /* Hide chips & rays entirely — just show centered badge */
            .spc-chip, .spc-rays, .spc-prism-bands { display: none !important; }
            .spc-prism-stage {
                aspect-ratio: unset;
                height: 180px;
                max-width: 100%;
            }
            .spc-prism-halo {
                top: 50%; right: auto; left: 50%;
                transform: translate(-50%, -50%) !important;
                width: 90%; height: 90%;
            }
            .spc-logo-badge {
                top: 50%; left: 50%; right: auto;
                transform: translate(-50%, -50%) !important;
                animation: none !important;
                padding: 10px 18px;
            }
            .spc-logo-badge img { width: clamp(130px, 48vw, 180px); }

            /* Hero inner tighter */
            .hero-inner { padding: 48px 16px 64px; }

            /* Wrap padding tighter */
            .wrap, .wrap-tight { padding: 0 16px; }
        }

        /* ---- Very small phones (≤ 360px) ------------------------ */
        @media (max-width: 360px) {
            .hero-pill { font-size: 10px; letter-spacing: 0.06em; }
            .cd-banner-h { font-size: 16px; }
            .h2 { font-size: 28px; }
        }

        /* --- Reveal section under hero -> cream --- */
        .reveal-section {
            background: var(--paper);
        }
        .reveal-section .reveal-caption .eyebrow { color: var(--accent-blue); }
        .reveal-section .chip {
            background: #ffffff;
            border-color: var(--paper-line);
            color: var(--ink-text);
        }
        .reveal-section .chip i { color: var(--green-500); }
        /* Keep platform card dark in light theme */
        .platform-card h2.h2 { color: var(--ink-0); }
        .platform-card h2.h2 .accent {
            color: #9CC7F2;
            text-shadow: none;
        }
        .platform-card .lead { color: var(--ink-200); }

        /* --- Section heads with eyebrow on light --- */
        .recs .section-head .eyebrow,
        .howitworks .section-head .eyebrow,
        .integrations .section-head .eyebrow {
            color: var(--accent-blue);
        }
        .recs .section-head h2.h2,
        .howitworks .section-head h2.h2,
        .integrations .section-head h2.h2 {
            color: var(--ink-text);
        }
        .recs .section-head .lead,
        .howitworks .section-head .lead,
        .integrations .section-head .lead {
            color: var(--ink-text-2);
        }