/* ============================================================
           AINNA Futuristic — Dual Theme (Light + Dark Neon Purple)
           3D Cards + 3D Sections + Animated Cards
           ============================================================ */

        :root {
            /* DAY / LIGHT THEME — Aurora Boreal Pastel */
            --bg-root: #F5F7FA;
            --bg-surface: #FFFFFF;
            --bg-glass: rgba(255, 255, 255, 0.8);
            --bg-glass-strong: rgba(255, 255, 255, 0.94);
            --bg-muted: #EDF0F5;
            --accent: #4E937A;
            --accent-deep: #3A7A62;
            --accent-neon: #6FACD0;
            --text-primary: #1A1F2E;
            --text-secondary: #445566;
            --text-muted: #7788A0;
            --border: rgba(60, 80, 120, 0.08);
            --border-medium: rgba(60, 80, 120, 0.14);
            --shadow-soft: 0 4px 20px rgba(60, 80, 120, 0.05);
            --shadow-glass: 0 10px 40px rgba(78, 147, 122, 0.08);
            --radius-sm: 10px;
            --radius-md: 16px;
            --radius-lg: 22px;
            --radius-xl: 28px;
            --font-sans: 'Inter', system_ui, sans-serif;
            --font-display: 'Space Grotesk', 'Inter', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
            --waste: #D4836A;
            --save: #4E937A;
            --aurora-green: #4E937A;
            --aurora-teal: #5A9DB8;
            --aurora-blue: #6FACD0;
            --aurora-purple: #8B7EC4;
            --aurora-pink: #C47EA8;
            --grid-opacity: 0.04;
        }

        [data-theme="dark"] {
            /* NIGHT / DARK THEME — Aurora Boreal Neon */
            --bg-root: #080C17;
            --bg-surface: #0F1523;
            --bg-glass: rgba(15, 21, 35, 0.75);
            --bg-glass-strong: rgba(15, 21, 35, 0.92);
            --bg-muted: #171F33;
            --accent: #34D399;
            --accent-deep: #2BBF8A;
            --accent-neon: #67E8F9;
            --text-primary: #EEF2FA;
            --text-secondary: #A8BBD8;
            --text-muted: #6A7F9C;
            --border: rgba(100, 160, 220, 0.1);
            --border-medium: rgba(100, 160, 220, 0.18);
            --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.5);
            --shadow-glass: 0 10px 50px rgba(52, 211, 153, 0.12);
            --waste: #FF9A7A;
            --save: #34D399;
            --aurora-green: #34D399;
            --aurora-teal: #5EEAD4;
            --aurora-blue: #67E8F9;
            --aurora-purple: #A78BFA;
            --aurora-pink: #F0A8D0;
            --grid-opacity: 0.07;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html {
            scroll-behavior: smooth;
            overflow-x: clip;
            -webkit-text-size-adjust: 100%;
            scroll-padding-top: 120px;
        }

        body {
            font-family: var(--font-sans);
            background: var(--bg-root);
            color: var(--text-primary);
            line-height: 1.65;
            overflow-x: clip;
            width: 100%;
            max-width: 100vw;
            transition: background 0.4s ease, color 0.4s ease;
        }

        /* Aurora Boreal Background — matching ainna.bond/ainna/ style */
        .aurora-container {
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100vh;
            z-index: -1; overflow: hidden;
            pointer-events: none;
        }
        .aurora-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0;
            animation: auroraFloat 20s infinite ease-in-out;
            mix-blend-mode: screen;
            transition: opacity 0.8s ease;
        }
        [data-theme="dark"] .aurora-blob {
            opacity: 0.55;
        }
        .aurora-1 {
            width: 600px; height: 600px;
            background: linear-gradient(135deg, #34D399, #A78BFA);
            top: -15%; left: -10%;
            animation-delay: 0s; animation-duration: 25s;
        }
        .aurora-2 {
            width: 500px; height: 500px;
            background: linear-gradient(135deg, #67E8F9, #34D399);
            top: 55%; right: -12%;
            animation-delay: -5s; animation-duration: 30s;
        }
        .aurora-3 {
            width: 700px; height: 700px;
            background: linear-gradient(135deg, #A78BFA, #F0A8D0);
            bottom: -20%; left: 25%;
            animation-delay: -10s; animation-duration: 28s;
        }
        .aurora-4 {
            width: 450px; height: 450px;
            background: linear-gradient(135deg, #5EEAD4, #A78BFA);
            top: 25%; left: 15%;
            animation-delay: -15s; animation-duration: 32s;
        }
        @keyframes auroraFloat {
            0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
            25%  { transform: translate(8%, 12%) scale(1.12) rotate(90deg); }
            50%  { transform: translate(-5%, 8%) scale(0.92) rotate(180deg); }
            75%  { transform: translate(12%, -8%) scale(1.06) rotate(270deg); }
        }

        /* Light mode pastel blobs */
        .pastel-container {
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100vh;
            z-index: -1; overflow: hidden;
            pointer-events: none;
        }
        .pastel-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(70px);
            opacity: 0;
            animation: pastelFloat 10s ease-in-out infinite;
            transition: opacity 0.8s ease;
        }
        [data-theme="dark"] .pastel-blob { opacity: 0; }
        :root:not([data-theme="dark"]) .pastel-blob { opacity: 0.45; }
        .pastel-1 {
            width: 400px; height: 400px;
            background: #A8D5BA;
            top: -5%; left: -8%;
            animation-delay: 0s;
        }
        .pastel-2 {
            width: 450px; height: 450px;
            background: #B8D4E8;
            top: 60%; right: -8%;
            animation-delay: -3s;
        }
        .pastel-3 {
            width: 380px; height: 380px;
            background: #D4C8E8;
            bottom: -5%; left: 40%;
            animation-delay: -6s;
        }
        .pastel-4 {
            width: 320px; height: 320px;
            background: #E8C8D8;
            top: 30%; left: 30%;
            animation-delay: -2s;
        }
        @keyframes pastelFloat {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(-3%, 5%) scale(1.05); }
        }

        /* Grid overlay (subtle) */
        .grid-bg {
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            overflow: hidden;
        }
        .grid-bg::before {
            content: '';
            position: absolute; inset: 0;
            background-image: 
                linear-gradient(rgba(78,147,122,var(--grid-opacity)) 1px, transparent 1px),
                linear-gradient(90deg, rgba(78,147,122,var(--grid-opacity)) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: radial-gradient(ellipse 82% 72% at 50% 38%, black 22%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 38%, black 22%, transparent 80%);
        }

        .container {
            max-width: 1120px;
            margin: 0 auto;
            padding: 0 clamp(14px, 4vw, 24px);
            width: 100%;
            min-width: 0;
        }

        /* NAV with Theme Toggle */
        nav {
            position: sticky;
            top: 0;
            z-index: 100;
            background: var(--bg-glass-strong);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            transition: background 0.4s ease, border 0.4s ease;
        }
        .nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 60px;
            height: auto;
            padding: 10px 0;
            flex-wrap: wrap;
        }
        .nav-brand {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: clamp(15px, 3.5vw, 19px);
            letter-spacing: -.01em;
            min-width: 0;
            flex: 1 1 auto;
            line-height: 1.2;
        }
        .nav-links {
            display: flex;
            gap: clamp(12px, 2.2vw, 26px);
            list-style: none;
            flex-wrap: wrap;
            justify-content: center;
        }
        .nav-links a {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-secondary);
            text-decoration: none;
            transition: color .15s;
            white-space: nowrap;
        }
        .nav-links a:hover { color: var(--text-primary); }

        nav .ainna-nav-controls {
            flex-shrink: 0;
        }

        @media (max-width: 900px) {
            .nav-links { display: none; }
            .nav-inner {
                min-height: 52px;
                padding: 8px 0;
                flex-wrap: nowrap;
            }
        }

        /* HERO */
        .hero {
            padding: clamp(36px, 6vw, 72px) 0 clamp(28px, 5vw, 56px);
            text-align: center;
            position: relative;
        }
        .hero::after {
            content: '';
            position: absolute;
            bottom: 0; left: 10%; right: 10%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--aurora-green), var(--aurora-teal), var(--aurora-purple), var(--aurora-pink), transparent);
            opacity: 0.4;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: 5px 14px;
            border-radius: 999px;
            background: var(--bg-glass);
            border: 1px solid var(--border);
            color: var(--text-muted);
            margin-bottom: 16px;
        }
        .hero h1 {
            font-family: var(--font-display);
            font-size: clamp(26px, 5.2vw, 52px);
            font-weight: 700;
            line-height: 1.15;
            margin-bottom: 14px;
            max-width: 820px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 4px;
            background: linear-gradient(135deg, var(--aurora-green), var(--aurora-teal), var(--aurora-blue), var(--aurora-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero p {
            font-size: clamp(14px, 2.6vw, 17px);
            color: var(--text-secondary);
            max-width: 620px;
            margin: 0 auto;
            padding: 0 4px;
            line-height: 1.55;
        }

        /* SECTIONS */
        section {
            padding: clamp(36px, 6vw, 64px) 0;
        }
        .section-header {
            text-align: center;
            margin-bottom: clamp(22px, 4vw, 36px);
        }
        .section-badge {
            display: inline-block;
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding: 4px 12px;
            border-radius: 999px;
            margin-bottom: 10px;
        }
        .section-badge.blue { background: rgba(91,140,111,.12); color: var(--aurora-green); }
        .section-badge.red  { background: rgba(212,131,106,.13); color: var(--waste); }
        .section-badge.green { background: rgba(91,155,191,.13); color: var(--aurora-teal); }
        .section-badge.purple { background: rgba(139,126,196,.14); color: var(--aurora-purple); }

        .section-header h2 {
            font-family: var(--font-display);
            font-size: clamp(25px, 3.6vw, 37px);
            font-weight: 700;
            margin-bottom: 10px;
            background: linear-gradient(135deg, var(--aurora-green), var(--aurora-teal));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .section-header p {
            font-size: 15.5px;
            color: var(--text-secondary);
            max-width: 620px;
            margin: 0 auto;
        }

        /* 3D SECTION CONTAINERS */
        .section-3d {
            perspective: 1200px;
        }
        .section-3d-inner {
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        /* CARDS & GRIDS */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
            gap: clamp(12px, 2.5vw, 18px);
        }

        /* 3D CARDS */
        .card-3d {
            background: var(--bg-glass-strong);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: clamp(16px, 3vw, 26px) clamp(14px, 2.5vw, 24px);
            box-shadow: var(--shadow-soft);
            transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
                        box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1),
                        border-color 0.2s;
            transform-style: preserve-3d;
            will-change: transform;
            position: relative;
            overflow: hidden;
            min-width: 0;
        }
        .card-3d::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                135deg,
                rgba(255,255,255,0.08) 0%,
                transparent 50%,
                rgba(255,255,255,0.03) 100%
            );
            opacity: 0.6;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        .card-3d:hover {
            transform: translateY(-10px) rotateX(6deg) rotateY(8deg);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12),
                        0 0 0 1px var(--accent-neon);
            border-color: var(--accent-neon);
        }
        [data-theme="dark"] .card-3d:hover {
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45),
                        0 0 0 1px var(--aurora-green),
                        0 0 30px rgba(106, 226, 160, 0.2);
        }
        .card-3d:hover::before {
            opacity: 1;
        }

        .info-card .metric {
            font-size: clamp(32px, 6vw, 42px);
            font-weight: 700;
            font-family: var(--font-display);
            line-height: 1;
            margin: 4px 0 8px;
            transition: transform 0.3s;
        }
        .info-card h3 {
            font-size: clamp(15px, 2.5vw, 17px);
            font-weight: 600;
            margin-bottom: 4px;
        }
        .info-card p:not(.metric) {
            font-size: 13.5px;
            color: var(--text-muted);
        }
        .card-3d:hover .metric {
            transform: scale(1.03);
        }

        /* Metric stats row (approach panels) */
        .metric-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
            gap: 12px;
            margin-top: clamp(20px, 4vw, 38px);
        }
        .metric-row .card-3d {
            padding: 14px 16px;
        }
        .metric-row .metric-label {
            font-size: 11px;
            color: var(--text-muted);
        }
        .metric-row .metric-value {
            font-size: clamp(22px, 4vw, 27px);
            font-weight: 700;
            font-family: var(--font-display);
        }
        .metric-row .metric-value.is-waste { color: var(--waste); }
        .metric-row .metric-value.is-save { color: var(--save); }

        .key-callout {
            margin-top: 16px;
            font-size: clamp(13px, 2.4vw, 13.5px);
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .scenario-punchline {
            max-width: 680px;
            margin: clamp(22px, 4vw, 32px) auto 0;
            text-align: center;
            font-size: clamp(14px, 2.6vw, 15px);
            color: var(--text-secondary);
            line-height: 1.55;
            padding: 0 4px;
        }

        .savings-pills {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .savings-pill {
            background: var(--bg-glass);
            border: 1px solid var(--border);
            padding: 6px 16px;
            border-radius: 999px;
            font-size: 13px;
        }

        .table-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin-top: 28px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border);
            max-width: 100%;
        }
        .study-table {
            width: 100%;
            min-width: 560px;
            border-collapse: collapse;
            font-size: 14px;
            background: var(--bg-glass);
        }
        .study-table thead tr { background: var(--bg-muted); }
        .study-table th,
        .study-table td {
            padding: 12px 16px;
            text-align: left;
            border-top: 1px solid var(--border);
        }
        .study-table thead th { border-top: none; }
        .study-table td.is-accent {
            font-weight: 700;
            color: var(--accent);
        }

        .cta-row {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .cta-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 22px;
            border-radius: 999px;
            font-weight: 600;
            text-decoration: none;
            font-size: 14px;
            min-height: 44px;
            touch-action: manipulation;
        }
        .cta-btn--primary {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: #fff;
        }
        .cta-btn--ghost {
            border: 1px solid var(--border);
            color: var(--text-primary);
            background: var(--bg-glass);
        }

        .quote-card {
            margin-top: clamp(24px, 4vw, 36px);
            max-width: 680px;
            margin-left: auto;
            margin-right: auto;
            background: var(--bg-glass);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: clamp(16px, 3vw, 20px) clamp(16px, 3vw, 24px);
            font-size: clamp(13.5px, 2.5vw, 14.5px);
            text-align: center;
            line-height: 1.55;
        }

        /* APPROACH 3D CONTAINER */
        .approach-3d {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: clamp(16px, 3.5vw, 32px);
            box-shadow: var(--shadow-glass);
            transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), 
                        box-shadow 0.45s;
            transform-style: preserve-3d;
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
        }
        .approach-3d:hover {
            transform: translateY(-6px) rotateX(3deg);
            box-shadow: 0 25px 70px rgba(91, 140, 111, 0.12);
        }
        [data-theme="dark"] .approach-3d:hover {
            box-shadow: 0 25px 70px rgba(106, 226, 160, 0.18);
        }

        /* =========================================================
           FUTURISTIC 3D SIGNAL FLOWS - Approach 1 & 2
           Mobile-first, SVG paths, 2-tone gradient symbols, neon
           ========================================================= */
        .flow-container { margin: 22px 0 12px; }
        .flow-title {
            font-size: 11px; font-weight: 600; letter-spacing: .12em;
            color: var(--text-muted); margin-bottom: 12px; text-transform: uppercase;
        }

        .futuristic-flow-wrap {
            position: relative;
            perspective: 900px;
        }
        .futuristic-flow {
            display: flex;
            align-items: center;
            gap: 0;
            justify-content: space-between;
            position: relative;
            padding: 12px 0;
        }

        /* Desktop horizontal flow */
        .futuristic-flow .flow-node {
            flex: 1;
            min-width: 78px;
            max-width: 118px;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        /* Futuristic 2-tone 3D Node Symbol */
        .futuristic-flow .node-symbol {
            width: 54px;
            height: 54px;
            margin: 0 auto 6px;
            position: relative;
            display: block;
            transition: transform .4s cubic-bezier(0.23,1,0.32,1);
            transform-style: preserve-3d;
        }
        .futuristic-flow .flow-node:hover .node-symbol {
            transform: translateY(-4px) rotateX(14deg) rotateY(16deg) scale(1.06);
        }

        /* Extra 3D depth on flow wrapper */
        .futuristic-flow-wrap:hover {
            transform: perspective(900px) rotateX(2deg);
        }

        /* Futuristic router pulse (Approach 2) */
        #flow2 .node-symbol svg polygon {
            animation: routerPulse 2.2s ease-in-out infinite;
        }
        @keyframes routerPulse {
            0%,100% { opacity: 1; }
            50% { opacity: 0.75; }
        }


        .futuristic-flow .node-symbol svg {
            width: 100%; height: 100%;
            filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18));
            transition: filter .3s;
        }
        [data-theme="dark"] .futuristic-flow .node-symbol svg {
            filter: drop-shadow(0 0 9px rgba(192,132,252,0.35)) drop-shadow(0 6px 12px rgba(0,0,0,0.4));
        }

        /* 2-tone gradient defs */
        .futuristic-flow .node-symbol .core { fill: url(#grad-core); }
        .futuristic-flow .node-symbol .ring { fill: none; stroke: url(#grad-ring); stroke-width: 3.5; }

        .futuristic-flow .node-label {
            font-size: 11px; font-weight: 600; line-height: 1.2;
            color: var(--text-primary);
        }
        .futuristic-flow .node-label small {
            display: block; font-size: 9.5px; font-weight: 400; color: var(--text-muted);
        }

        /* Connector SVG */
        .futuristic-flow .flow-connector {
            flex: 0 0 auto;
            width: 42px;
            height: 18px;
            position: relative;
            z-index: 1;
        }
        .futuristic-flow .flow-connector svg {
            width: 100%; height: 100%;
        }

        /* Animated signal particle (futuristic) */
        .signal-particle {
            position: absolute;
            width: 7px; height: 7px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 3;
            box-shadow: 0 0 8px currentColor;
            animation: signalTravel 1.4s linear forwards;
        }

        /* Waste / Loop specific */
        .waste-flow .repeat-ring {
            position: absolute;
            bottom: -18px; left: 50%; transform: translateX(-50%);
            font-family: var(--font-mono); font-size: 10px;
            padding: 2px 10px; border-radius: 999px;
            background: rgba(224,122,95,.1); color: var(--waste);
            border: 1px solid rgba(224,122,95,.25);
            white-space: nowrap;
        }

        /* Branching for Approach 2 - responsive */
        .router-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
            margin-top: 16px;
        }
        .router-lane {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            background: var(--bg-glass);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-size: 12.5px;
            transition: all .25s ease;
        }
        .router-lane:hover {
            border-color: var(--accent-neon);
            transform: translateX(4px);
        }
        .router-lane .lane-icon {
            width: 28px; height: 28px; flex-shrink: 0;
        }
        .router-lane .lane-label { flex: 1; font-weight: 600; }
        .router-lane .lane-cost {
            font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
            white-space: nowrap;
        }

        /* Responsive: Mobile friendly vertical layout */
        @media (max-width: 640px) {
            .futuristic-flow {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }
            .futuristic-flow .flow-node {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 10px;
                max-width: none;
                min-width: 0;
                text-align: left;
                padding: 8px 10px;
                background: var(--bg-glass);
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
            }
            .futuristic-flow .node-symbol {
                width: 36px; height: 36px; margin: 0;
                flex-shrink: 0;
            }
            .futuristic-flow .node-label {
                font-size: 12px;
                min-width: 0;
            }
            .futuristic-flow .flow-connector {
                width: 100%; height: 22px;
                transform: rotate(90deg);
                margin: -4px 0;
            }
            .router-container {
                grid-template-columns: 1fr;
            }
            .router-lane {
                font-size: 13px;
                flex-wrap: wrap;
            }
            .waste-flow .repeat-ring {
                position: static;
                transform: none;
                display: inline-block;
                margin: 10px auto 0;
                text-align: center;
                white-space: normal;
                line-height: 1.35;
                max-width: 100%;
            }
            .big-num { font-size: clamp(28px, 9vw, 38px); }
            .compare-card { padding: 18px 16px; }
            .impact-grid {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }
            .impact-item { padding: 14px 12px; }
            .impact-item .value { font-size: 20px; }
            .study-table { font-size: 12.5px; }
            .study-table th,
            .study-table td { padding: 10px 12px; }
        }

        @media (max-width: 400px) {
            .impact-grid { grid-template-columns: 1fr; }
            .card-grid { grid-template-columns: 1fr; }
        }

        /* Touch / coarse pointer — drop 3D tilt (keeps layout stable) */
        @media (hover: none), (pointer: coarse) {
            .card-3d:hover,
            .approach-3d:hover,
            .compare-card:hover,
            .futuristic-flow .flow-node:hover .node-symbol,
            .futuristic-flow-wrap:hover {
                transform: none;
            }
            .card-3d:hover {
                box-shadow: var(--shadow-soft);
                border-color: var(--border);
            }
            .impact-item:hover {
                transform: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .aurora-blob,
            .pastel-blob,
            .reveal,
            .signal-particle,
            #flow2 .node-symbol svg polygon {
                animation: none !important;
                transition: none !important;
            }
            .reveal { opacity: 1; transform: none; }
        }

        /* Extra futuristic glows per theme */
        [data-theme="dark"] .futuristic-flow .node-symbol svg {
            filter: drop-shadow(0 0 6px rgba(192,132,252,0.4));
        }
        .futuristic-flow .signal-particle.waste { color: var(--waste); }
        .futuristic-flow .signal-particle.smart { color: var(--accent-neon); }

        /* COMPARISON - 3D */
        .comparison {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(12px, 2.5vw, 20px);
        }
        @media (max-width: 780px) {
            .comparison { grid-template-columns: 1fr; }
        }
        .compare-card {
            background: var(--bg-glass-strong);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: clamp(18px, 3vw, 26px) clamp(16px, 2.5vw, 24px);
            transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), box-shadow 0.4s;
            transform-style: preserve-3d;
            min-width: 0;
        }
        .compare-card:hover {
            transform: translateY(-8px) rotateX(4deg) rotateY(5deg);
            box-shadow: 0 22px 55px rgba(0,0,0,0.1);
        }
        .compare-card.waste:hover { box-shadow: 0 22px 55px rgba(212,131,106,0.15); }
        .compare-card.save:hover { box-shadow: 0 22px 55px rgba(91,155,105,0.15); }

        [data-theme="dark"] .compare-card:hover {
            box-shadow: 0 25px 65px rgba(0,0,0,0.5);
        }

        .compare-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
        }
        .compare-header h3 { font-size: 15px; }

        .big-num {
            font-size: 38px;
            font-weight: 700;
            font-family: var(--font-display);
            line-height: 1;
        }
        .big-num.waste { color: var(--waste); }
        .big-num.save  { color: var(--save); }

        .savings-bar {
            height: 7px;
            background: var(--bg-muted);
            border-radius: 999px;
            margin: 13px 0 5px;
            overflow: hidden;
        }
        .savings-bar .fill {
            height: 100%;
            background: linear-gradient(90deg, var(--save), #6FC78A);
            width: 13%;
            transition: width 1.4s cubic-bezier(0.2, .9, .2, 1);
        }

        .stat {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            padding: 7px 0;
            border-top: 1px solid var(--border);
        }

        /* IMPACT */
        .impact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
            gap: 15px;
        }
        .impact-item {
            background: var(--bg-glass);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 18px;
            transition: transform .3s, box-shadow .3s;
        }
        .impact-item:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-glass);
        }
        .impact-item .value {
            font-size: 23px;
            font-weight: 700;
            font-family: var(--font-display);
            color: var(--aurora-green);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--accent);
            color: white;
            padding: 10px 20px;
            border-radius: 999px;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all .2s ease;
        }
        .btn:hover { 
            transform: translateY(-1px) scale(1.01); 
            box-shadow: 0 6px 18px rgba(91, 140, 111, 0.3);
        }

        footer {
            border-top: 1px solid var(--border);
            padding: 34px 0;
            font-size: 13px;
            color: var(--text-muted);
            text-align: center;
            position: relative;
        }
        footer::before {
            content: '';
            position: absolute; top: -1px; left: 5%; right: 5%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--aurora-green), var(--aurora-teal), var(--aurora-purple), transparent);
            opacity: 0.5;
        }

        .reveal {
            opacity: 0;
            transform: translateY(16px);
            transition: all .55s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Extra 3D polish on hover for some elements */
        .flow-step:hover {
            transform: translateY(-1px);
        }