/* Global Scrollbar Hiding */
        html {
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE/Edge */
        }

        ::-webkit-scrollbar {
            display: none;
            /* Chrome/Safari/Webkit */
            width: 0;
            height: 0;
        }

        body {
            background: #0b0e14;
            min-height: 100vh;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
        }

        .scroll-track {
            /* height: 1425vh; Removed in favor of JS Dynamic Calculation */
            min-height: 100vh;
            /* Fallback */
            /* Mobile base height */
            width: 1px;
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: -1;
        }

        /* Tablet/Laptop (Mid-size) */
        /* @media (min-width: 768px) and (max-width: 1280px) {
            .scroll-track {
                height: 1550vh;
            }
        } */

        /* Desktop (Large Screens) */
        /* @media (min-width: 1281px) {
            .scroll-track {
                height: 1650vh;
            }
        } */


        .fixed-stage {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .bg-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0b0e14;
            /* Enhanced Glow - Radial Gradient overlaid by JS color */
            background-image: radial-gradient(circle at 50% 50%, rgba(32, 217, 160, 0.15), transparent 70%);
            /* NO TRANSITION: JS driving it 1:1 */
            z-index: 0;
        }

        .stage-hero {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            /* Center vertically/horizontally */
            align-items: center;
            z-index: 10;
            will-change: transform;
            overflow: hidden;
            perspective: 1000px;
        }

        /* TERMINAL HERO STYLES */
        .hero-terminal {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        /* Scanner Ring */
        .scanner-container {
            position: absolute;
            width: 60vh;
            height: 60vh;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            justify-content: center;
            align-items: center;
            animation: pulse-ring 4s infinite ease-in-out;
            pointer-events: none;
        }

        .scanner-ring {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border-top: 2px solid var(--brand, #a9b1d6);
            border-right: 2px solid transparent;
            /* Fade out */
            animation: spin 11s linear infinite;
            filter: drop-shadow(0 0 10px var(--brand, #a9b1d6));
        }

        .scanner-ring::before {
            content: '';
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 0 15px #fff;
        }

        .scanner-ring-white {
            position: absolute;
            top: -10%;
            left: -10%;
            width: 120%;
            height: 120%;
            border-radius: 50%;
            border-top: 2px solid rgba(255, 255, 255, 0.8);
            border-right: 2px solid transparent;
            animation: spin 22s linear infinite;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
            pointer-events: none;
        }

        .scanner-ring-white::before {
            content: '';
            position: absolute;
            top: -30px;
            /* 15% further out (approx visual adj) */
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 0 10px #fff;
        }

        /* Main Typography */
        .hero-content {
            z-index: 2;
            text-align: center;
            position: relative;
        }

        .hero-uptitle {
            font-size: 14px;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--brand, #a9b1d6);
            margin-bottom: 16px;
            font-weight: 700;
            opacity: 0.8;
        }

        .hero-title {
            font-size: clamp(48px, 8vw, 96px);
            font-weight: 900;
            margin: 0;
            line-height: 1.1;
            background: linear-gradient(180deg, #fff 0%, #a9b1d6 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            text-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        }

        .hero-subtitle {
            font-size: clamp(18px, 3vw, 24px);
            color: rgba(255, 255, 255, 0.7);
            max-width: 600px;
            margin: 24px auto 0;
            line-height: 1.5;
        }

        .scroll-indicator {
            margin-top: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            opacity: 0.7;
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: opacity 0.3s;
            color: #ffffff !important;
            /* Force White */
        }

        .liam-subtitle {
            font-family: 'Outfit', sans-serif;
            font-weight: 500;
            font-size: 24px;
            color: #ff9f1c;
            margin-bottom: 24px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .scroll-indicator:hover {
            opacity: 1;
        }

        /* Hero Back Button */
        .hero-back-btn {
            position: absolute;
            top: 110px;
            /* Slightly higher as requested */
            left: 40px;

            /* Match Scroll Indicator Style */
            display: flex;
            flex-direction: row;
            /* Horizontal Layout */
            align-items: center;
            gap: 8px;

            color: #ffffff !important;
            opacity: 0.7;
            /* Match scroll opacity */

            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 2px;
            /* Match scroll spacing */
            font-size: 14px;
            font-weight: 500;

            padding: 0;
            background: transparent;
            border: none;
            transition: all 0.3s ease;
            z-index: 20;
            cursor: pointer;
        }

        .hero-back-btn:hover {
            opacity: 1;
            /* Match scroll hover */
            color: #ffffff;
            background: transparent;
            border-color: transparent;
            transform: translateY(-5px);
            /* Move UP instead of down/right */
        }

        .hero-back-btn i {
            font-size: 24px;
            /* Match scroll icon size */
            /* Optional: Animation like scroll bounce? */
        }

        /* Tech Corners (Status UI) */
        .status-corner {
            position: absolute;
            padding: 20px;
            font-family: 'Courier New', monospace;
            /* Tech font */
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 1px;
            pointer-events: none;
        }

        .tl {
            top: 0;
            left: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            border-top-left-radius: 20px;
            margin: 20px;
        }

        .tr {
            top: 0;
            right: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            border-top-right-radius: 20px;
            margin: 20px;
            text-align: right;
        }

        .bl {
            bottom: 0;
            left: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom-left-radius: 20px;
            margin: 20px;
            display: flex;
            align-items: flex-end;
        }

        .br {
            bottom: 0;
            right: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom-right-radius: 20px;
            margin: 20px;
            text-align: right;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
        }

        .status-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #20d9a0;
            /* Green */
            border-radius: 50%;
            margin-right: 8px;
            box-shadow: 0 0 10px #20d9a0;
            animation: blink 2s infinite;
        }

        @keyframes spin {
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes pulse-ring {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.5;
            }

            50% {
                transform: scale(1.05);
                opacity: 0.8;
            }
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.4;
            }
        }

        /* Media Queries handled by clamp mostly */


        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .ai-card-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            will-change: transform;
        }

        #card-1 {
            z-index: 20;
        }

        #card-2 {
            z-index: 21;
        }

        #card-3 {
            z-index: 22;
        }

        #card-4 {
            z-index: 23;
        }

        .ai-card-content {
            background: transparent;
            backdrop-filter: none;
            border-radius: 0;
            border: none;
            padding: 20px;
            text-align: center;
            max-width: 1000px;
            width: 100%;
            box-shadow: none;
            text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
        }

        .ai-card-title {
            font-size: 64px;
            font-weight: 800;
            line-height: 1.2;
            /* Increased from 1.1 to prevent cutoff */
            margin-bottom: 24px;
            background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            padding-bottom: 10px;
            /* Extra buffer */
        }

        .ai-card-subtitle {
            font-size: clamp(24px, 4vw, 40px);
            color: #fff;
            margin-bottom: 32px;
            font-weight: 600;
        }

        .ai-description {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            margin-bottom: 48px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .ai-btn {
            padding: 16px 40px;
            border-radius: 50px;
            background: #fff;
            color: #000;
            text-decoration: none;
            font-weight: 700;
            font-size: 18px;
            transition: all 0.3s;
            display: inline-block;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        .ai-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 40px rgba(255, 255, 255, 0.3);
        }

        /* --- NOA SECTION STYLES --- */
        .noa-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            max-width: 1400px;
            width: 90%;
            height: 80%;
            align-items: flex-start;
            /* FIX: Top aligned to match others */
            padding-top: 10vh;
        }

        /* --- INTEGRATIONS HUB --- */
        #integrations-hub {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 5;
            padding-top: 40px;
        }

        #integrations-hub h2 {
            font-size: clamp(32px, 5vw, 64px);
            margin: 0 0 16px 0;
            background: linear-gradient(135deg, #fff 0%, #4cc9f0 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;

            /* Initial State */
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        #integrations-hub h2.text-animated-in {
            opacity: 1;
            transform: translateY(0);
        }

        #integrations-hub .lead {
            font-size: clamp(18px, 2.5vw, 24px);
            color: rgba(255, 255, 255, 0.7);
            margin: 0 0 40px 0;
            text-align: center;
            max-width: 600px;

            /* Initial State */
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        #integrations-hub .lead.text-animated-in {
            opacity: 1;
            transform: translateY(0);
        }

        .aihub-grid {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            width: 100%;
            max-width: 1400px;
        }

        .stack {
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: 280px;
        }

        .stack .card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: default;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;

            /* Initial State for Animation */
            opacity: 0;
        }

        /* Left Stack: Slide from Left */
        .stack.left .card {
            transform: translateX(-100px);
            transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        /* Right Stack: Slide from Right */
        .stack.right .card {
            transform: translateX(100px);
            transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        /* ACTIVE STATE */
        .stack.left .card.animated-in,
        .stack.right .card.animated-in {
            opacity: 1;
            transform: translateX(0);
        }

        .stack .card:hover {
            background: rgba(76, 201, 240, 0.1);
            border-color: rgba(76, 201, 240, 0.5);
            box-shadow: 0 0 20px rgba(76, 201, 240, 0.2);
            /* transform: translateX(5px);  <-- Conflict with animation if not careful, but hover typically happens after */
        }

        /* Ensure hover doesn't break layout post-animation */
        .stack .card.animated-in:hover {
            transform: scale(1.02);
            /* Safer hover effect */
        }

        /* Left: Info */
        .noa-info {
            text-align: left;
            color: #fff;
        }

        .noa-title {
            font-size: clamp(40px, 5vw, 80px);
            font-weight: 800;
            background: linear-gradient(135deg, #fff, #a9b1d6);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
        }

        .noa-subtitle {
            font-size: 24px;
            color: #a9b1d6;
            margin-bottom: 32px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .noa-description {
            font-size: 18px;
            line-height: 1.15;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 40px;
        }

        .noa-features {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 40px;
        }

        .noa-feature-item {
            display: flex;
            align-items: center;
            gap: 16px;
            background: rgba(255, 255, 255, 0.05);
            padding: 16px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: transform 0.3s;
        }

        .noa-feature-item:hover {
            transform: translateX(10px);
            background: rgba(255, 255, 255, 0.1);
        }

        .feature-icon {
            font-size: 28px;
            color: #20d9a0;
            /* Tech green accent */
        }

        /* Right: Chat Demo */
        .chat-ui-container {
            position: relative;
            width: 100%;
            height: 600px;
            background: rgba(26, 44, 40, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        }

        .chat-header {
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(0, 0, 0, 0.2);
        }

        .chat-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #20d9a0, #2080d9);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #fff;
        }

        .chat-status-dot {
            width: 8px;
            height: 8px;
            background: #20d9a0;
            border-radius: 50%;
            box-shadow: 0 0 10px #20d9a0;
        }

        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .message {
            max-width: 80%;
            padding: 12px 16px;
            border-radius: 12px;
            font-size: 15px;
            line-height: 1.4;
            animation: fadeIn 0.3s ease-out;
        }

        .message.ai {
            align-self: flex-start;
            background: rgba(255, 255, 255, 0.1);
            border-bottom-left-radius: 2px;
            color: #fff;
        }

        .message.user {
            align-self: flex-end;
            background: #20d9a0;
            color: #000;
            border-bottom-right-radius: 2px;
            font-weight: 500;
        }

        .chat-input-area {
            padding: 20px;
            background: rgba(0, 0, 0, 0.2);
            display: flex;
            gap: 12px;
        }

        .chat-input {
            flex: 1;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 30px;
            padding: 12px 20px;
            color: #fff;
            outline: none;
            transition: all 0.3s;
        }

        .chat-input:focus {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .chat-send-btn {
            background: transparent;
            border: none;
            color: #20d9a0;
            cursor: pointer;
            padding: 8px;
            transition: transform 0.2s;
        }



        /* --- NOA SECTION STYLES (Phase 2) --- */
        .noa-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            max-width: 1400px;
            width: 90%;
            height: 80%;
            align-items: flex-start;
            /* Corrected alignment */
            padding-top: 10vh;
        }

        /* Left: Info */
        .noa-info {
            text-align: left;
            color: #fff;
        }

        .noa-title {
            font-size: clamp(32px, 4vw, 60px);
            /* Short title, can be larger */
            font-weight: 800;
            background: linear-gradient(135deg, #fff, #20d9a0);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
            line-height: 1.1;
            white-space: nowrap;
            /* Prevent wrapping */
        }

        .noa-subtitle {
            font-family: 'Outfit', sans-serif;
            font-weight: 500;
            font-size: 24px;
            color: #20d9a0;
            margin-bottom: 24px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .noa-description {
            font-size: 18px;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 48px;
            max-width: 550px;
        }

        .noa-features {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 16px;
            /* Removed border-left from Phase 2 */
            border-left: none;
            padding-left: 0;
            /* Ensure container has structure */
            position: relative;
        }

        /* --- NOA SLOT ARCHITECTURE --- */
        /* --- NOA FEATURE CARDS (Standard Flow) --- */
        /* --- NOA FEATURE CARDS (Standard Flow) --- */
        .noa-feature-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 16px 24px;
            cursor: default;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: hidden;
            position: relative;
            transform: translateZ(0);
            will-change: transform, box-shadow;
            /* Fix for blurry text */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            backface-visibility: hidden;
        }

        .noa-feature-card .feature-card-inner {
            background: transparent;
            border: none;
            padding: 0;
            position: relative;
            width: 100%;
            height: auto;
        }

        .noa-feature-card:hover {
            background: rgba(255, 255, 255, 0.08);
            /* Lighter on hover */
            border-color: rgba(32, 217, 160, 0.3);
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .nfc-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 0;
            transition: margin-bottom 0.3s ease;
        }

        .noa-feature-card:hover .nfc-header {
            margin-bottom: 12px;
        }

        .nfc-content {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.4s ease-out, opacity 0.4s ease;
            opacity: 0;
        }

        .noa-feature-card:hover .nfc-content {
            grid-template-rows: 1fr;
            opacity: 1;
        }

        .nfc-content>div {
            overflow: hidden;
        }

        .nfc-content p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.2;
            margin: 0;
        }

        .feature-icon {
            font-size: 28px;
            color: #20d9a0;
            transition: transform 0.3s;
        }

        .noa-feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(10deg);
        }

        /* Right: Abstract AI Visual Container */
        .noa-visual-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            position: relative;
        }

        .ai-core-wrapper {
            position: relative;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Central Orb */
        .ai-core-orb {
            width: 120px;
            height: 120px;
            background: radial-gradient(circle at 30% 30%, #a9ffdc, #20d9a0);
            border-radius: 50%;
            box-shadow: 0 0 60px rgba(32, 217, 160, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.8);
            position: absolute;
            z-index: 10;
            animation: orbPulse 4s ease-in-out infinite;
        }

        /* Orbital Rings */
        .ai-orbital-ring {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(32, 217, 160, 0.3);
            box-shadow: 0 0 10px rgba(32, 217, 160, 0.1);
        }

        .ring-1 {
            width: 200px;
            height: 200px;
            border-top: 2px solid #20d9a0;
            animation: spinRing 8s linear infinite;
        }

        .ring-2 {
            width: 260px;
            height: 260px;
            border-right: 2px solid #2080d9;
            animation: spinRing 12s linear infinite reverse;
        }

        .ring-3 {
            width: 160px;
            height: 160px;
            border-bottom: 2px solid #fff;
            opacity: 0.5;
            animation: spinRing 6s linear infinite;
        }

        /* Animations */
        @keyframes orbPulse {

            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 0 60px rgba(32, 217, 160, 0.6);
            }

            50% {
                transform: scale(1.05);
                box-shadow: 0 0 90px rgba(32, 217, 160, 0.8);
            }
        }

        @keyframes spinRing {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* Right: CTA Button Container */
        .noa-cta-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .noa-main-btn {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 24px 48px;
            border-radius: 60px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            text-decoration: none;
            font-size: 24px;
            font-weight: 700;
            transition: all 0.3s;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }

        .noa-main-btn:hover {
            background: #20d9a0;
            color: #000;
            border-color: #20d9a0;
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(32, 217, 160, 0.4);
        }

        /* --- LIAM SECTION STYLES (SALES) --- */
        .liam-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            max-width: 1400px;
            width: 90%;
            height: 80%;
            align-items: center;
            /* Changed from flex-start to center */
            padding-top: 0;
            /* Removed top padding for true centering */
        }

        .liam-info {
            text-align: left;
            color: #fff;
        }

        .liam-title {
            font-size: clamp(24px, 2.5vw, 42px);
            /* Longest title (Afsprakenassistent), needs smaller font */
            font-weight: 800;
            background: linear-gradient(135deg, #fff, #ffd166);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
            line-height: 1.1;
            white-space: nowrap;
        }

        .liam-subtitle {
            font-size: 24px;
            color: #ff9f1c;
            /* Electric Amber */
            margin-bottom: 32px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .liam-description {
            font-size: 18px;
            line-height: 1.15;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 48px;
            max-width: 550px;
        }

        .liam-features {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 16px;
            position: relative;
        }

        .liam-feature-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 159, 28, 0.1);
            /* Amber tint border */
            border-radius: 16px;
            padding: 16px 24px;
            cursor: default;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: hidden;
            position: relative;
            transform: translateZ(0);
            will-change: transform, box-shadow;
            /* Fix for blurry text */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            backface-visibility: hidden;
        }

        .liam-feature-card:hover {
            background: rgba(255, 159, 28, 0.08);
            border-color: rgba(255, 159, 28, 0.4);
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(255, 159, 28, 0.15);
        }

        .lfc-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 0;
            transition: margin-bottom 0.3s ease;
        }

        .liam-feature-card:hover .lfc-header {
            margin-bottom: 12px;
        }

        .lfc-title {
            font-weight: 700;
            font-size: 18px;
            color: #fff;
            letter-spacing: 0.5px;
        }

        .lfc-content {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.4s ease-out, opacity 0.4s ease;
            opacity: 0;
        }

        .liam-feature-card:hover .lfc-content {
            grid-template-rows: 1fr;
            opacity: 1;
        }

        .lfc-content>div {
            overflow: hidden;
        }

        .lfc-content p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.2;
            margin: 0;
        }

        .liam-feature-card .feature-icon {
            font-size: 28px;
            color: #ff9f1c;
            /* Amber icon */
            transition: transform 0.3s;
        }

        .liam-feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(10deg);
            /* Different rotation for variety */
        }

        /* LIAM VISUAL - SALES TURBINE */
        .liam-visual-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .liam-turbine-wrapper {
            position: relative;
            width: 250px;
            height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
            transform-style: preserve-3d;
            animation: float 4s ease-in-out infinite;
        }

        /* Turbine Rotor (Spinning Outer Ring) */
        .turbine-rotor {
            position: absolute;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            border: 4px dashed rgba(255, 159, 28, 0.4);
            border-top: 4px solid #ff9f1c;
            border-bottom: 4px solid #ff9f1c;
            animation: spinTurbine 3s linear infinite;
            box-shadow: 0 0 30px rgba(255, 159, 28, 0.1);
        }

        /* Inner Energy Ring */
        .turbine-energy {
            position: absolute;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-left: 4px solid #ffd166;
            animation: spinTurbine 1.5s linear infinite reverse;
        }

        /* High Energy Core */
        .turbine-core {
            width: 80px;
            height: 80px;
            background: radial-gradient(circle at 30% 30%, #fff, #ff9f1c);
            border-radius: 50%;
            z-index: 10;
            box-shadow: 0 0 60px rgba(255, 159, 28, 0.6);
            animation: pulseEngine 0.8s ease-in-out infinite alternate;
        }

        /* Vertical Thrust Particles */
        .turbine-particles {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #ff9f1c;
            border-radius: 50%;
            opacity: 0;
            top: 50%;
            left: 50%;
            pointer-events: none;
        }

        .turbine-particles::before,
        .turbine-particles::after {
            content: '';
            position: absolute;
            width: 6px;
            height: 20px;
            background: linear-gradient(to top, rgba(255, 159, 28, 0), #ff9f1c);
            border-radius: 4px;
            animation: shootUp 2s infinite;
        }

        .turbine-particles::after {
            left: 20px;
            animation-delay: 0.5s;
            height: 30px;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes spinTurbine {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes pulseEngine {
            0% {
                transform: scale(1);
                opacity: 0.9;
                box-shadow: 0 0 50px rgba(255, 159, 28, 0.5);
            }

            100% {
                transform: scale(1.15);
                opacity: 1;
                box-shadow: 0 0 80px rgba(255, 159, 28, 0.8);
            }
        }

        @keyframes shootUp {
            0% {
                transform: translateY(60px) scaleX(0.5);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                transform: translateY(-150px) scaleX(1);
                opacity: 0;
            }
        }

        /* --- MAYA SECTION STYLES (SUPPORT) --- */
        .maya-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            max-width: 1400px;
            width: 90%;
            height: 80%;
            align-items: flex-start;
            /* FIX: Top aligned */
            padding-top: 10vh;
        }

        .maya-info {
            text-align: left;
            color: #fff;
        }

        .maya-title {
            font-size: clamp(28px, 3vw, 48px);
            /* Medium title (Serviceassistent) */
            font-weight: 800;
            background: linear-gradient(135deg, #fff, #2ec4b6);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
            line-height: 1.1;
            white-space: nowrap;
        }

        .maya-subtitle {
            font-size: 24px;
            color: #2ec4b6;
            /* Ocean Blue */
            margin-bottom: 32px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .maya-description {
            font-size: 18px;
            line-height: 1.15;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 48px;
            max-width: 550px;
        }

        .maya-features {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 16px;
            position: relative;
        }

        /* --- MAYA FEATURE CARDS (Standard Flow) --- */
        .maya-feature-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(46, 196, 182, 0.1);
            border-radius: 16px;
            padding: 16px 24px;
            cursor: default;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: hidden;
            position: relative;
            transform: translateZ(0);
            will-change: transform, box-shadow;
            /* Fix for blurry text */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            backface-visibility: hidden;
        }

        .maya-feature-card .feature-card-inner {
            background: transparent;
            border: none;
            padding: 0;
            position: relative;
            width: 100%;
            height: auto;
        }

        .maya-feature-card:hover {
            background: rgba(46, 196, 182, 0.08);
            border-color: rgba(46, 196, 182, 0.4);
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(46, 196, 182, 0.15);
        }

        .mfc-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 0;
            transition: margin-bottom 0.3s ease;
        }

        .maya-feature-card:hover .mfc-header {
            margin-bottom: 12px;
        }

        .mfc-title {
            font-weight: 700;
            font-size: 18px;
            color: #fff;
            letter-spacing: 0.5px;
        }

        .mfc-content {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.4s ease-out, opacity 0.4s ease;
            opacity: 0;
        }

        .maya-feature-card:hover .mfc-content {
            grid-template-rows: 1fr;
            opacity: 1;
        }

        .mfc-content>div {
            overflow: hidden;
        }

        .mfc-content p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.2;
            margin: 0;
        }

        .maya-feature-card .feature-icon {
            font-size: 28px;
            color: #2ec4b6;
            transition: transform 0.3s;
        }

        .maya-feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(10deg);
        }

        /* MAYA VISUAL - WAVE SHIELD */
        .maya-visual-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            position: relative;
        }

        .maya-core-wrapper {
            position: relative;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Central Circle */
        .maya-core-circle {
            width: 80px;
            height: 80px;
            background: radial-gradient(circle at 30% 30%, #fff, #2ec4b6);
            border-radius: 50%;
            position: absolute;
            z-index: 10;
            box-shadow: 0 0 50px rgba(46, 196, 182, 0.6);
            animation: breathe 4s ease-in-out infinite;
        }

        /* Waves */
        .maya-wave {
            position: absolute;
            border-radius: 50%;
            border: 2px solid rgba(46, 196, 182, 0.3);
            opacity: 0;
        }

        .maya-wave.wave-1 {
            width: 100px;
            height: 100px;
            animation: ripple 3s infinite 0s;
        }

        .maya-wave.wave-2 {
            width: 100px;
            height: 100px;
            animation: ripple 3s infinite 1s;
        }

        .maya-wave.wave-3 {
            width: 100px;
            height: 100px;
            animation: ripple 3s infinite 2s;
        }

        @keyframes breathe {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.9;
            }

            50% {
                transform: scale(1.1);
                opacity: 1;
                box-shadow: 0 0 70px rgba(46, 196, 182, 0.8);
            }
        }

        @keyframes ripple {
            0% {
                transform: scale(1);
                opacity: 0.8;
                border-width: 2px;
            }

            100% {
                transform: scale(3.5);
                opacity: 0;
                border-width: 0px;
            }
        }

        /* --- ATLAS SECTION STYLES (SPECIALIST) --- */
        .atlas-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            max-width: 1400px;
            width: 90%;
            height: 80%;
            align-items: flex-start;
            /* FIX: Top aligned */
            padding-top: 10vh;
        }

        .atlas-info {
            text-align: left;
            color: #fff;
        }

        .atlas-title {
            font-size: clamp(32px, 3.5vw, 56px);
            /* Klantintake is medium length */
            font-weight: 800;
            background: linear-gradient(135deg, #fff, #b5179e);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
            line-height: 1.1;
            white-space: nowrap;
        }

        .atlas-subtitle {
            font-size: 24px;
            color: #d65db1;
            /* Cyber Purple */
            margin-bottom: 32px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .atlas-description {
            font-size: 18px;
            line-height: 1.15;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 48px;
            max-width: 550px;
        }

        .atlas-features {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 16px;
            position: relative;
        }

        .atlas-feature-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(114, 9, 183, 0.1);
            border-radius: 16px;
            padding: 16px 24px;
            cursor: default;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: hidden;
            position: relative;
            transform: translateZ(0);
            will-change: transform, box-shadow;
            /* Fix for blurry text */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            backface-visibility: hidden;
        }

        .atlas-feature-card:hover {
            background: rgba(114, 9, 183, 0.08);
            border-color: rgba(114, 9, 183, 0.4);
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(114, 9, 183, 0.15);
        }

        .afc-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 0;
            transition: margin-bottom 0.3s ease;
        }

        .atlas-feature-card:hover .afc-header {
            margin-bottom: 12px;
        }

        .afc-title {
            font-weight: 700;
            font-size: 18px;
            color: #fff;
            letter-spacing: 0.5px;
        }

        .afc-content {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.4s ease-out, opacity 0.4s ease;
            opacity: 0;
        }

        .atlas-feature-card:hover .afc-content {
            grid-template-rows: 1fr;
            opacity: 1;
        }

        .afc-content>div {
            overflow: hidden;
        }

        .afc-content p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.2;
            margin: 0;
        }

        .atlas-feature-card .feature-icon {
            font-size: 28px;
            color: #d65db1;
            cursor: pointer;
            backdrop-filter: blur(5px);
            transition: transform 0.3s;
        }

        /* --- INTEGRATIONS SECTION STYLES (REPLICA of #ai-hub) --- */
        #integrations-hub {
            padding-top: 0;
            /* Removed padding */
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: auto;
            /* Allow it to fit content */
            justify-content: flex-start;
            /* Move to top */
            margin-top: -15vh;
            /* Force pull up to reduce gap */
            margin-bottom: 50px;
            /* Space before next section */
        }

        /* Mobile Fix: Hide Integrations completely and prevent empty space */
        @media (max-width: 1024px) {
            #integrations-hub {
                display: none !important;
            }

            /* Adjust spacing for the following section */
            #card-6 {
                margin-top: 0 !important;
            }
        }

        /* Updated Title Style (Noa-like) */
        #integrations-hub h2 {
            font-size: clamp(60px, 7vw, 96px);
            /* Larger */
            font-weight: 800;
            background: linear-gradient(135deg, #ffffff 0%, #4cc9f0 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            margin-bottom: 4px;
            line-height: 1.2;
            /* Looser line-height for 'g' */
            padding-bottom: 20px;
            /* Buffer for descenders */
            margin-top: -10px;
            /* Compensate for padding */
        }

        /* Updated Subtitle Style */
        #integrations-hub p.lead {
            font-family: 'Outfit', sans-serif;
            font-weight: 500;
            font-size: 22px;
            /* Slightly larger */
            color: #4cc9f0;
            text-align: center;
            margin-bottom: 48px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        #integrations-hub .aihub-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            /* 2 Columns now, middle space via gap */
            align-items: center;
            justify-items: center;
            column-gap: clamp(300px, 40vw, 600px);
            /* Large gap to fit the Orb */
            position: relative;
            z-index: 2;
            /* Above glows */
        }

        /* Spline Viewer Container - Much Larger & Unclipped */
        /* Spline Viewer Container - Much Larger & Unclipped */
        /* Spline Viewer Container - Massive to prevent clipping */
        #integrations-hub .hub {
            position: absolute;
            /* Floating in background */
            top: 50%;
            /* Center vertically... */
            left: 50%;
            /* ...and horizontally */
            transform: translate(-50%, -50%);
            /* Start centered */
            width: clamp(600px, 50vw, 900px);
            /* Increased size significantly */
            height: clamp(600px, 50vw, 900px);
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            box-shadow: none;
            overflow: visible;
            z-index: 0;
            /* Background */
            pointer-events: none;
            /* Don't block clicks */
            /* Ensure 3D doesn't clip */
        }

        /* Canvas - Oversized */
        #integrations-hub .hub spline-viewer {
            width: 150%;
            /* Massive viewport */
            height: 150%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* margin removed, using transform center */
        }

        /* Remove "AI" text */
        #integrations-hub .hub::after {
            display: none;
        }

        /* Side Glows */
        .int-glow-left,
        .int-glow-right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 600px;
            height: 600px;
            border-radius: 50%;
            filter: blur(80px);
            z-index: 0;
            pointer-events: none;
            opacity: 0.3;
        }

        .int-glow-left {
            left: -10%;
            background: radial-gradient(circle, #4cc9f0 0%, transparent 70%);
        }

        .int-glow-right {
            right: -10%;
            background: radial-gradient(circle, #4361ee 0%, transparent 70%);
        }

        .hub-loader {
            position: absolute;
            width: 50px;
            height: 50px;
            border: 3px solid rgba(76, 201, 240, 0.2);
            border-top-color: #4cc9f0;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            z-index: -1;
        }

        #integrations-hub .stack {
            display: flex;
            flex-direction: column;
            gap: 16px;
            max-width: 100%;
            position: relative;
            /* Ensure z-index works */
            z-index: 10;
            /* Float ABOVE the orb */
        }

        #integrations-hub .stack.left {
            align-items: flex-end;
        }

        #integrations-hub .stack.right {
            align-items: flex-start;
        }

        /* --- NEW CARD DESIGN: Premium Neon Glass (Purple Theme) --- */
        /* --- NEW CARD DESIGN: Premium Neon Glass (Purple Theme) --- */
        /* --- NEW CARD DESIGN: Premium Neon Glass (Purple Theme) --- */
        #integrations-hub .card {
            width: clamp(200px, 30vw, 280px);
            /* Reduced Height (Was 70-80px) */
            min-height: 54px;
            /* Use min-height so it can grow */
            display: flex;
            align-items: center;
            gap: 20px;
            /* Increased */
            padding: 0 24px;
            /* Glass & Gradient (Purple Theme) */
            /* Using background-clip trick for Gradient Border with Border Radius */
            /* Glass & Gradient (Purple Theme) */
            /* Using background-clip trick for Gradient Border with Border Radius */
            background:
                linear-gradient(135deg, rgba(5, 5, 10, 0.8), rgba(20, 10, 30, 0.7)) padding-box,
                /* Very Dark & Transparent */
                linear-gradient(135deg, #00d4ff, #d8b4fe) border-box;
            /* Brighter Blue (#00d4ff) to Light Purple */
            /* Brighter Blue (#00d4ff) to Light Purple */

            border: 1px solid transparent;
            border-radius: 20px;
            /* Increased Roundness (+15-20%) */

            backdrop-filter: blur(12px);
            /* Light Glow Effect */
            box-shadow:
                0 4px 20px rgba(0, 0, 0, 0.4),
                0 0 15px rgba(0, 212, 255, 0.3),
                /* Brighter Blue Glow */
                inset 0 0 30px rgba(124, 92, 255, 0.05);

            transform: translateX(0);
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), margin 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            /* Removed height transition */
            /* Explicit smoother transitions */
            cursor: default;
            overflow: hidden;
            position: relative;
            margin-bottom: 24px;
            /* Added vertical spacing */
            backface-visibility: hidden;
            -webkit-font-smoothing: subpixel-antialiased;
            /* Fix for text blur */
        }

        /* --- CURVED ORBIT LAYOUT --- */
        /* Left Stack: Move middle cards to LEFT (Negative) */
        #integrations-hub .stack.left .card:nth-child(2),
        #integrations-hub .stack.left .card:nth-child(4) {
            margin-right: 50px;
            /* Push away from hub (to left) */
        }

        #integrations-hub .stack.left .card:nth-child(3) {
            margin-right: 100px;
            /* Push furthest away */
        }

        /* Right Stack: Move middle cards to RIGHT (margin-left) */
        #integrations-hub .stack.right .card:nth-child(2),
        #integrations-hub .stack.right .card:nth-child(4) {
            margin-left: 50px;
            /* Push away from hub (to right) */
        }

        #integrations-hub .stack.right .card:nth-child(3) {
            margin-left: 100px;
            /* Push furthest away */
        }

        /* Mirrored Gradient for Right Stack (Pink -> Blue) */
        #integrations-hub .stack.right .card {
            background:
                linear-gradient(135deg, rgba(5, 5, 10, 0.8), rgba(20, 10, 30, 0.7)) padding-box,
                linear-gradient(135deg, #d8b4fe, #00d4ff) border-box;
            /* Reversed: Light Purple to Brighter Blue */
        }



        /* Gradient Accent Line - REMOVED (User Request) */
        #integrations-hub .card::after {
            content: none;
            display: none;
        }

        /* Hover Effect: Subtler & Purple */
        /* Hover Effect: Subtler & Purple */
        #integrations-hub .card:hover {
            padding: 12px 24px;
            margin-bottom: 12px;
            margin-top: -12px;
            /* Compensate padding to prevent layout shift */
            /* background: linear-gradient(...) REMOVED so it stays Dark like the Right Stack */
            border-color: rgba(124, 92, 255, 0.6);
            /* Slightly stronger border highlight */
            box-shadow:
                0 8px 30px rgba(0, 0, 0, 0.6),
                0 0 20px rgba(124, 92, 255, 0.2),
                inset 0 0 20px rgba(124, 92, 255, 0.1);
            box-shadow:
                0 8px 30px rgba(0, 0, 0, 0.6),
                0 0 15px rgba(124, 92, 255, 0.15),
                inset 0 0 20px rgba(124, 92, 255, 0.1);
            /* Removed height: 96px; let content expand naturally */
        }

        /* Left Stack Hover Slide */
        #integrations-hub .stack.left .card:hover {
            transform: translateX(3px);
        }

        /* Right Stack Hover Slide (Slide Left) */
        #integrations-hub .stack.right .card:hover {
            transform: translateX(-3px);
        }

        /* Shine Effect Overlay (Slower) */
        #integrations-hub .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            /* Dimmer shine */
            transition: 0.7s;
        }

        #integrations-hub .card:hover::before {
            left: 100%;
        }

        /* --- SHADOW HIERARCHY --- */
        /* Middle Cards (Strongest Shadow) */
        #integrations-hub .stack .card:nth-child(3) {
            box-shadow:
                0 15px 40px rgba(0, 0, 0, 0.6),
                0 0 25px rgba(0, 212, 255, 0.4),
                inset 0 0 30px rgba(124, 92, 255, 0.05);
            z-index: 5;
        }

        /* Intermediate Cards (Medium Shadow) */
        #integrations-hub .stack .card:nth-child(2),
        #integrations-hub .stack .card:nth-child(4) {
            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(0, 212, 255, 0.3),
                inset 0 0 30px rgba(124, 92, 255, 0.05);
            z-index: 4;
        }

        /* Ensure hover overrides these specific shadows */
        #integrations-hub .stack .card:hover {
            box-shadow:
                0 15px 45px rgba(0, 0, 0, 0.7),
                0 0 25px rgba(124, 92, 255, 0.3),
                inset 0 0 20px rgba(124, 92, 255, 0.1);
            z-index: 10;
        }

        /* Icon Styling (Larger +30%) */
        #integrations-hub .icon-plus {
            font-size: 32px;
            /* Increased from 24px */
            /* Gradient Text */
            background: linear-gradient(135deg, #7c5cff, #4cc9f0);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
            transition: all 0.4s;
            flex-shrink: 0;
        }

        #integrations-hub .card:hover .icon-plus {
            transform: rotate(90deg);
            opacity: 1;
        }

        /* Text Styling */
        #integrations-hub .txt {
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
        }

        #integrations-hub .name {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.85);
            font-weight: 700;
            letter-spacing: 0.5px;
            transition: color 0.4s;
        }

        /* Description Hover Text - Smooth Grid-like Expansion via Max-Height */
        #integrations-hub .desc {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            color: #b0a8d6;
            margin: 0;
            /* 50% Smoother: Increased from 0.5s to 0.8s */
            transition: max-height 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.6s ease, margin 0.6s ease;
            font-size: 13px;
            /* Set font size permanently to avoid jump */
            line-height: 1.25;
            /* Tighter line height for 'strakker' look */
        }

        #integrations-hub .card:hover .name {
            color: #fff;
        }

        /* Show desc on hover */
        #integrations-hub .card:hover .desc {
            max-height: 80px;
            /* Increased from 60px (+33%) to give more space */
            /* Enough for 2-3 lines */
            opacity: 1;
            margin-top: 0px;
            /* Removed spacing completely for tighter look */
        }



        /* Text Styling */
        #integrations-hub .txt {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* --- RESPONSIVENESS (Refined Inward Movement) --- */
        @media (max-width: 1400px) {

            /* Move cards inwards */
            #integrations-hub .stack.left .card:nth-child(2),
            #integrations-hub .stack.left .card:nth-child(4) {
                margin-right: 30px;
            }

            #integrations-hub .stack.left .card:nth-child(3) {
                margin-right: 60px;
            }

            #integrations-hub .stack.right .card:nth-child(2),
            #integrations-hub .stack.right .card:nth-child(4) {
                margin-left: 30px;
            }

            #integrations-hub .stack.right .card:nth-child(3) {
                margin-left: 60px;
            }

            /* Slightly smaller Orb */
            #integrations-hub .hub {
                width: 450px;
                height: 450px;
            }
        }

        @media (max-width: 1100px) {

            /* Tighter grid but with GAP for the Orb */
            #integrations-hub .aihub-grid {
                column-gap: clamp(200px, 30vw, 400px);
                /* Widen gap so cards don't crush orb */
            }

            /* Relax inward movement slightly so they aren't too bunched */
            #integrations-hub .stack.left .card:nth-child(2),
            #integrations-hub .stack.left .card:nth-child(4) {
                margin-right: 15px;
            }

            #integrations-hub .stack.left .card:nth-child(3) {
                margin-right: 30px;
            }

            #integrations-hub .stack.right .card:nth-child(2),
            #integrations-hub .stack.right .card:nth-child(4) {
                margin-left: 15px;
            }

            #integrations-hub .stack.right .card:nth-child(3) {
                margin-left: 30px;
            }

            /* Smaller Cards */
            #integrations-hub .card {
                width: 220px;
                min-height: 48px;
                padding: 0 16px;
            }

            #integrations-hub .icon-plus {
                font-size: 24px;
            }

            #integrations-hub .name {
                font-size: 14px;
            }

            /* Orb Size - Keep relatively large to prevent clipping lines */
            #integrations-hub .hub {
                width: 600px;
                /* Increased from 350px to prevent clipping */
                height: 600px;
            }
        }

        /* Ensure mobile glow is hidden on desktop */
        /* Ensure mobile glow is hidden on desktop */
        @media (min-width: 1025px) {
            .mobile-visual-glow {
                display: none !important;
            }
        }

        /* Hide Integrations on Mobile & Tablet/Small Laptops */
        @media (max-width: 1100px) {
            #integrations-hub {
                display: none !important;
            }
        }

        #integrations-hub .name {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 700;
            letter-spacing: 0.5px;
            transition: color 0.3s;
        }

        #integrations-hub .card:hover .name {
            color: #fff;
        }

        /* Staggered Animation Init */
        #integrations-hub .card {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, border-color 0.3s, box-shadow 0.3s;
        }

        #integrations-hub .card.animated-in {
            opacity: 1;
            transform: translateY(0);
        }

        #integrations-hub .orbit {
            display: none;
        }

        #integrations-hub .stack.left .card:nth-child(2) {
            margin-right: clamp(4px, 1.5vw, 18px);
        }

        #integrations-hub .stack.left .card:nth-child(3) {
            margin-right: clamp(8px, 3vw, 36px);
        }

        #integrations-hub .stack.left .card:nth-child(4) {
            margin-right: clamp(4px, 1.5vw, 18px);
        }

        #integrations-hub .stack.left .card:nth-child(5) {
            margin-right: 0;
        }

        #integrations-hub .stack.right .card:nth-child(1) {
            margin-left: 0;
        }

        #integrations-hub .stack.right .card:nth-child(2) {
            margin-left: clamp(4px, 1.5vw, 18px);
        }

        #integrations-hub .stack.right .card:nth-child(3) {
            margin-left: clamp(8px, 3vw, 36px);
        }

        #integrations-hub .stack.right .card:nth-child(4) {
            margin-left: clamp(4px, 1.5vw, 18px);
        }

        #integrations-hub .stack.right .card:nth-child(5) {
            margin-left: 0;
        }

        /* Responsive */
        @media (max-width: 1024px) {

            .int-glow-left,
            .int-glow-right {
                display: none;
            }

            #integrations-hub .aihub-grid {
                display: grid !important;
                grid-template-columns: 1fr 1fr;
                /* 2 Columns */
                gap: 16px;
                margin-top: 10px;
                width: 100%;
                padding: 0 10px;
                /* Slight padding */
                box-sizing: border-box;
            }

            /* Hub Scaling for Mobile - Ensure NO Clipping */
            #integrations-hub .hub {
                grid-column: 1 / -1;
                /* Span Full Width */
                order: -1;
                transform: scale(0.65);
                margin-bottom: -30px;
                margin-top: -10px;
                overflow: visible !important;
                /* Critical for Orb */
                z-index: 10;
            }

            #integrations-hub .hub-loader {
                display: none;
                /* Hide loader on mobile to keep it clean */
            }

            /* Flatten Stacks for Grid */
            #integrations-hub .stack.left,
            #integrations-hub .stack.right {
                display: contents;
                /* Use children as direct grid items */
            }

            /* Hide Extra Cards (Show only Top 3 of each stack = 6 Total) */
            #integrations-hub .stack.left .card:nth-child(n+4),
            #integrations-hub .stack.right .card:nth-child(n+4) {
                display: none;
            }

            /* Reset Orbit Margins for Mobile */
            #integrations-hub .stack.left .card:nth-child(n),
            #integrations-hub .stack.right .card:nth-child(n) {
                margin: 0 !important;
                transform: none !important;
            }

            /* Mobile Card Styling */
            #integrations-hub .card {
                width: 100% !important;
                height: 70px !important;
                /* Fixed height, roughly 1x2 ratio */
                margin: 0 !important;

                /* Significantly Lighter Gradient & Boxier */
                background: linear-gradient(135deg, rgba(80, 60, 110, 0.7), rgba(100, 70, 140, 0.7)) !important;
                border: 1px solid rgba(160, 130, 255, 0.3);

                border-radius: 12px;
                /* Less rounded (was 16px) */
                padding: 0 12px;
                gap: 8px;
                justify-content: center;
                /* Center text since no icon */
                text-align: center;
            }

            /* Hide Plus Icon on Mobile */
            #integrations-hub .icon-plus {
                display: none !important;
            }

            /* Adjust Text for Mobile Grid */
            #integrations-hub .txt {
                align-items: center;
            }

            #integrations-hub .name {
                font-size: 14px;
                /* Slightly smaller text */
            }

            #integrations-hub .desc {
                display: none !important;
                /* No hover desc on mobile */
            }

            /* Mobile Integrations: Simple Grid */
            #integrations-hub .orbit {
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                /* 1 Column for better readability on small screens? Or 2? User has 10 items. 2 cols is better. */
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
                width: 100%;
                height: auto;
                margin-top: 20px;
            }

            #integrations-hub .orbit .hub {
                display: none;
            }

            /* Mobile Orbit Cards - Inherit Premium Style but sizing tweaks */
            #integrations-hub .orbit .card {
                position: relative;
                width: 100%;
                height: 60px;
                /* Smaller height for mobile */
                margin: 0;
                top: auto;
                left: auto;
                transform: none;

                /* Ensure Flex Layout matches */
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                gap: 12px;
                padding: 0 16px;

                /* Override Text Size if needed */
                font-size: 13px;

                /* Ensure left border is removed if it leaked */
                border-left: none;
            }

            /* Ensure Accent Line is on Left for Mobile */
            #integrations-hub .orbit .card::after {
                left: 0;
                right: auto;
            }

            #integrations-hub .orbit .card .icon {
                width: 32px;
                height: 32px;
            }

            #integrations-hub .orbit .card .icon i {
                font-size: 18px;
            }

            #integrations-hub .orbit .card .name {
                font-size: 13px;
            }
        }

        /* ATLAS VISUAL - CUBE */
        .atlas-visual-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            perspective: 1000px;
        }

        .atlas-core-wrapper {
            width: 150px;
            height: 150px;
            position: relative;
            transform-style: preserve-3d;
            animation: spinCube 10s linear infinite;
        }

        /* --- SIMPLIFIED CONVERSION LAYOUT --- */

        /* Right Column Container */
        .action-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            padding-left: 40px;
            /* Spacing from left column */
        }

        /* Moved Benefits (Right Side - Mini Cards) */
        .right-benefits {
            margin-bottom: 32px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .mini-benefit-card {
            display: flex;
            align-items: center;
            gap: 14px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 16px;
            transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
            cursor: default;
        }

        .mini-benefit-card:hover {
            background: rgba(255, 255, 255, 0.06);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .mbc-icon {
            font-size: 24px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Color defined by theme below */
        }

        .mbc-text {
            font-size: 15px;
            font-weight: 500;
            line-height: 1.4;
            color: rgba(255, 255, 255, 0.9);
        }

        /* Action Buttons */
        .action-buttons {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;
            padding: 18px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 18px;
            text-decoration: none;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            border: none;
        }

        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }

        .btn-listen {
            background: #fff;
            color: #000;
        }

        .btn-demo {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
        }

        .btn-demo:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: #fff;
        }


        /* --- SCREENSHOT MATCH REDESIGN (LEFT SIDE) --- */

        /* 1. Typography */
        .ss-title-group {
            margin-bottom: 32px;
        }

        .ss-title-group h2 {
            font-family: 'Outfit', sans-serif;
            line-height: 0.9;
            text-transform: uppercase;
            margin: 0;
            padding: 0;
        }

        .ss-ai-text {
            display: block;
            font-size: 64px;
            /* Large AI text */
            font-weight: 300;
            color: #fff;
            margin-bottom: -5px;
        }

        .ss-role-text {
            display: block;
            font-size: 56px;
            /* slightly smaller but bold role */
            font-weight: 800;
            /* Color defined by theme */
        }

        .ss-subtitle {
            display: block;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, 0.6);
            margin-top: 12px;
            font-weight: 600;
        }

        .ss-description {
            font-size: 16px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 40px;
            max-width: 90%;
        }

        /* 2. Feature & Benefit Pills */
        .ss-list-label {
            display: block;
            font-size: 16px;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 16px;
            font-weight: 500;
        }

        .ss-pill-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 40px;
        }

        .ss-pill {
            display: flex;
            align-items: center;
            gap: 16px;
            background: rgba(11, 14, 20, 0.6);
            /* Darker pill bg */
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            padding: 14px 20px;
            transition: all 0.2s ease;
        }

        .ss-pill:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateX(5px);
        }

        .ss-icon {
            font-size: 20px;
            /* Color defined by theme */
        }

        .ss-text {
            font-size: 15px;
            font-weight: 600;
            color: #fff;
        }

        .mobile-visual-glow {
            display: none;
        }

        /* Update Theme Overrides for new classes */
        /* --- THEME OVERRIDES --- */
        /* --- THEME OVERRIDES --- */
        /* Noa (Green) */
        .noa-container .mbc-icon {
            color: #20d9a0;
        }

        .noa-container .mini-benefit-card:hover {
            border-color: rgba(32, 217, 160, 0.3);
        }

        .noa-container .btn-listen {
            background: #20d9a0;
            color: #000;
        }

        .noa-container .btn-listen:hover {
            box-shadow: 0 10px 25px rgba(32, 217, 160, 0.4);
        }

        /* Screenshot Match Theme */
        .noa-container .ss-role-text {
            color: #20d9a0;
        }

        .noa-container .ss-subtitle {
            color: #20d9a0;
        }

        .noa-container .ss-icon {
            color: #20d9a0;
        }

        /* Liam (Orange) */
        .liam-container .mbc-icon {
            color: #ff9f1c;
        }

        .liam-container .mini-benefit-card:hover {
            border-color: rgba(255, 159, 28, 0.3);
        }

        .liam-container .btn-listen {
            background: #ff9f1c;
            color: #000;
        }

        .liam-container .btn-listen:hover {
            box-shadow: 0 10px 25px rgba(255, 159, 28, 0.4);
        }

        /* Screenshot Match Theme */
        .liam-container .ss-role-text {
            color: #ff9f1c;
        }

        .liam-container .ss-subtitle {
            color: #ff9f1c;
        }

        .liam-container .ss-icon {
            color: #ff9f1c;
        }

        /* Maya (Blue) */
        .maya-container .mbc-icon {
            color: #2ec4b6;
        }

        .maya-container .mini-benefit-card:hover {
            border-color: rgba(46, 196, 182, 0.3);
        }

        .maya-container .btn-listen {
            background: #2ec4b6;
            color: #000;
        }

        .maya-container .btn-listen:hover {
            box-shadow: 0 10px 25px rgba(46, 196, 182, 0.4);
        }

        /* Screenshot Match Theme */
        .maya-container .ss-role-text {
            color: #2ec4b6;
        }

        .maya-container .ss-subtitle {
            color: #2ec4b6;
        }

        .maya-container .ss-icon {
            color: #2ec4b6;
        }

        /* Atlas (Purple) */
        .atlas-container .mbc-icon {
            color: #b5179e;
        }

        .atlas-container .mini-benefit-card:hover {
            border-color: rgba(181, 23, 158, 0.3);
        }

        .atlas-container .btn-listen {
            background: #b5179e;
            color: #fff;
        }

        .atlas-container .btn-listen:hover {
            box-shadow: 0 10px 25px rgba(181, 23, 158, 0.4);
        }

        /* Screenshot Match Theme */
        .atlas-container .ss-role-text {
            color: #b5179e;
        }

        .atlas-container .ss-subtitle {
            color: #b5179e;
        }

        .atlas-container .ss-icon {
            color: #b5179e;
        }

        /* Liam (Orange) */
        .liam-container .benefit-icon {
            color: #ff9f1c;
        }

        .liam-container .benefits-block {
            border-left-color: #ff9f1c;
        }

        .liam-container .cc-primary-btn {
            background: #ff9f1c;
            color: #000;
        }

        .liam-container .trust-chip i {
            color: #ff9f1c;
        }

        /* Maya (Blue) */
        .maya-container .benefit-icon {
            color: #2ec4b6;
        }

        .maya-container .benefits-block {
            border-left-color: #2ec4b6;
        }

        .maya-container .cc-primary-btn {
            background: #2ec4b6;
            color: #000;
        }

        .maya-container .trust-chip i {
            color: #2ec4b6;
        }

        /* Atlas (Purple) */
        .atlas-container .benefit-icon {
            color: #b5179e;
        }

        .atlas-container .benefits-block {
            border-left-color: #b5179e;
        }

        .atlas-container .cc-primary-btn {
            background: #b5179e;
            color: #fff;
        }

        .atlas-container .trust-chip i {
            color: #b5179e;
        }


        .atlas-cube-face {
            position: absolute;
            width: 150px;
            height: 150px;
            border: 2px solid rgba(114, 9, 183, 0.6);
            background: rgba(114, 9, 183, 0.1);
            box-shadow: 0 0 20px rgba(114, 9, 183, 0.2);
        }

        .face-front {
            transform: translateZ(75px);
        }

        .face-back {
            transform: rotateY(180deg) translateZ(75px);
        }

        .face-right {
            transform: rotateY(90deg) translateZ(75px);
        }

        .face-left {
            transform: rotateY(-90deg) translateZ(75px);
        }

        .face-top {
            transform: rotateX(90deg) translateZ(75px);
        }

        .face-bottom {
            transform: rotateX(-90deg) translateZ(75px);
        }

        .atlas-network {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            transform: translate(-50%, -50%) translateZ(0);
            /* Center in cube */
            background: radial-gradient(circle, #fff 0%, transparent 70%);
            opacity: 0.5;
            animation: pulseCube 3s ease-in-out infinite;
        }

        @keyframes spinCube {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        @keyframes pulseCube {

            0%,
            100% {
                opacity: 0.3;
                transform: translate(-50%, -50%) scale(0.5);
            }

            50% {
                opacity: 0.8;
                transform: translate(-50%, -50%) scale(1.2);
            }
        }

        @media (min-width: 1025px) and (max-width: 1500px) {

            .noa-container,
            .liam-container,
            .maya-container,
            .atlas-container {
                gap: 40px;
                /* Reduce gap to give more room */
            }

            .action-container {
                padding-left: 0;
                /* Remove left padding */
            }

            .action-container spline-viewer {
                width: 140%;
                /* Make it wider than container */
                margin-left: -20%;
                /* Shift left to use the gap space */
                max-width: none;
            }
        }

        /* --- RESPONSIVE MOBILE TWEAKS --- */
        @media (max-width: 1024px) {

            /* Hide Status Corners on Mobile */
            .status-corner {
                display: none !important;
            }

            .noa-container,
            .liam-container,
            .maya-container,
            .atlas-container {
                grid-template-columns: 1fr !important;
                text-align: center;
                height: auto;
                padding: 40px 0;
                margin: 0 auto !important;
                /* Force Centering */
                width: 90% !important;
                /* Re-affirm width */
                max-width: 100% !important;
            }

            .noa-info,
            .liam-info,
            .maya-info,
            .atlas-info {
                text-align: center;
                margin: 0 !important;
                /* Remove auto margins to let it fill */
                width: 100% !important;
                /* Force full width */
                padding: 0 !important;
                /* Remove any padding */
                box-sizing: border-box !important;
                max-width: none !important;
                /* Override potential desktop limits */
            }

            .action-container {
                display: none !important;
            }

            .mobile-visual-glow {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 120vw;
                height: 120vw;
                border-radius: 50%;
                z-index: -1;
                filter: blur(100px);
                opacity: 0.4;
                pointer-events: none;
            }

            /* Theme Colors for Mobile Glow */
            #card-1 .mobile-visual-glow {
                background: radial-gradient(circle, #20d9a0 0%, transparent 70%);
            }

            #card-2 .mobile-visual-glow {
                background: radial-gradient(circle, #ff9f1c 0%, transparent 70%);
            }

            #card-3 .mobile-visual-glow {
                background: radial-gradient(circle, #2ec4b6 0%, transparent 70%);
            }

            #card-4 .mobile-visual-glow {
                background: radial-gradient(circle, #b5179e 0%, transparent 70%);
            }

            /* Resize Subtitles for Mobile */
            .noa-subtitle,
            .liam-subtitle,
            .maya-subtitle,
            .atlas-subtitle {
                font-size: 17px !important;
            }

            /* Mobile Feature Grid Layout (Horizontal Row) -> NOW FLEXBOX ACCORDION */
            /* Mobile Feature Grid Layout (Horizontal Row) -> NOW FLEXBOX ACCORDION */
            .noa-features,
            .liam-features,
            .maya-features,
            .atlas-features {
                display: flex !important;
                flex-direction: row;
                justify-content: space-between;
                align-items: stretch;
                /* Match height */
                gap: 8px;
                /* Small gap between accordion slices */
                margin-bottom: 24px;
                width: 100%;
                perspective: 1000px;
                /* ISOLATION FIX: Fixed height prevents jumping */
                min-height: 140px;
                height: 140px;
                /* Ensure transforms don't reflow siblings */
                contain: layout size;
                overflow: visible;
                /* Allow 3D depth and pop-out to peek out */
            }

            /* --- STATIC MOBILE CARDS (Reverted) --- */

            .noa-feature-card,
            .liam-feature-card,
            .maya-feature-card,
            .atlas-feature-card {
                flex: 1;
                /* Equal width */
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 12px 4px;
                min-height: 120px;
                margin: 0;
                position: relative;
                border-radius: 12px;
                border: 1px solid rgba(255, 255, 255, 0.1);
                background: rgba(255, 255, 255, 0.05);
                /* Default static bg */
                transition: transform 0.3s ease, background 0.3s ease;
                /* Subtle hover only */
                overflow: hidden;
            }

            /* Subtle Hover/Touch Effect */
            .noa-feature-card:active,
            .liam-feature-card:active,
            .maya-feature-card:active,
            .atlas-feature-card:active {
                transform: translateY(-3px);
                background: rgba(255, 255, 255, 0.08);
            }



            /* Hide inner structure if we kept it, or target it to be static */
            .feature-card-inner {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border: none;
                background: transparent;
                padding: 0;
            }

            /* HIDE EXTRA TEXT on Mobile (User Request) */
            .nfc-content,
            .lfc-content,
            .mfc-content,
            .afc-content {
                display: none !important;
            }

            /* Ensure Titles and Icons are stacked */
            .nfc-header,
            .lfc-header,
            .mfc-header,
            .afc-header {
                height: 100%;
                display: flex;
                flex-direction: column !important;
                /* Force vertical stack */
                justify-content: center;
                align-items: center;
                gap: 8px;
            }

            .feature-icon {
                font-size: 34px !important;
                /* Increased by 20% (was 28px) */
                margin-bottom: 4px;
                display: block;
                /* Ensure block logic applies */
            }

            /* Highlight the Middle Card (2nd child) */
            .noa-features>div:nth-child(2),
            .liam-features>div:nth-child(2),
            .maya-features>div:nth-child(2),
            .atlas-features>div:nth-child(2) {
                background: rgba(255, 255, 255, 0.08);
                /* Slightly lighter */
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
                /* Permanent shadow */
                border-color: rgba(255, 255, 255, 0.2);
                z-index: 2;
                /* Slight pop over siblings */
            }

            /* Side Cards (1st and 3rd) - 50% Shadow */
            .noa-features>div:nth-child(1),
            .noa-features>div:nth-child(3),
            .liam-features>div:nth-child(1),
            .liam-features>div:nth-child(3),
            .maya-features>div:nth-child(1),
            .maya-features>div:nth-child(3),
            .atlas-features>div:nth-child(1),
            .atlas-features>div:nth-child(3) {
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
            }

            /* --- MOBILE AUTO-HIGHLIGHT CLASS --- */
            .noa-feature-card.mobile-highlight {
                transform: translateY(-5px) scale(1.02) !important;
                background: linear-gradient(135deg, rgba(32, 217, 160, 0.1), rgba(7, 28, 22, 0.25)) !important;
                /* Subtler */
                box-shadow: 0 10px 30px rgba(32, 217, 160, 0.15) !important;
                border: 1px solid rgba(32, 217, 160, 0.5) !important;
                z-index: 10;
            }

            .liam-feature-card.mobile-highlight {
                transform: translateY(-5px) scale(1.02) !important;
                background: linear-gradient(135deg, rgba(255, 159, 28, 0.1), rgba(41, 25, 4, 0.25)) !important;
                box-shadow: 0 10px 30px rgba(255, 159, 28, 0.15) !important;
                border: 1px solid rgba(255, 159, 28, 0.5) !important;
                z-index: 10;
            }

            .maya-feature-card.mobile-highlight {
                transform: translateY(-5px) scale(1.02) !important;
                background: linear-gradient(135deg, rgba(46, 196, 182, 0.1), rgba(6, 28, 26, 0.25)) !important;
                box-shadow: 0 10px 30px rgba(46, 196, 182, 0.15) !important;
                border: 1px solid rgba(46, 196, 182, 0.5) !important;
                z-index: 10;
            }

            .atlas-feature-card.mobile-highlight {
                transform: translateY(-5px) scale(1.02) !important;
                background: linear-gradient(135deg, rgba(181, 23, 158, 0.1), rgba(29, 4, 38, 0.25)) !important;
                box-shadow: 0 10px 30px rgba(181, 23, 158, 0.15) !important;
                border: 1px solid rgba(181, 23, 158, 0.5) !important;
                z-index: 10;
            }

            .nfc-title,
            .lfc-title,
            .mfc-title,
            .afc-title {
                /* AUTOMATIC FIT: Responsive font size */
                font-size: clamp(9px, 2.8vw, 12px) !important;
                line-height: 1.25;
                font-weight: 700;
                width: 100%;
                text-align: center !important;
                /* FORCE CENTER ALIGNMENT */
                white-space: normal;
                word-wrap: break-word;
                /* Ensure clean wrapping */
                overflow-wrap: break-word;
                hyphens: auto;
                /* Break long words like 'Doorschakeling' if needed */
                display: block;
                padding: 0 2px;
                /* Tiny buffer */
            }

            /* If not expanded, maybe hide title to save space? Optional. */

            /* 3D Effects for Inactive Cards */
            /* Left Card */
            .noa-features>div:nth-child(1):not(.mobile-expanded),
            .liam-features>div:nth-child(1):not(.mobile-expanded),
            .maya-features>div:nth-child(1):not(.mobile-expanded),
            .atlas-features>div:nth-child(1):not(.mobile-expanded) {
                transform: scale(0.9) rotateY(15deg);
                z-index: 1;
            }

            /* Middle Card (if not expanded) */
            .noa-features>div:nth-child(2):not(.mobile-expanded),
            .liam-features>div:nth-child(2):not(.mobile-expanded),
            .maya-features>div:nth-child(2):not(.mobile-expanded),
            .atlas-features>div:nth-child(2):not(.mobile-expanded) {
                transform: scale(1.0);
                /* Neutral */
                z-index: 2;
                opacity: 1;
            }

            /* Right Card */
            .noa-features>div:nth-child(3):not(.mobile-expanded),
            .liam-features>div:nth-child(3):not(.mobile-expanded),
            .maya-features>div:nth-child(3):not(.mobile-expanded),
            .atlas-features>div:nth-child(3):not(.mobile-expanded) {
                transform: scale(0.9) rotateY(-15deg);
                z-index: 1;
            }

            /* --- TYPOGRAPHY (Intermediate Screens) --- */
            /* Increase title size on larger mobiles/tablets */
            @media (min-width: 550px) {

                .noa-title,
                .liam-title,
                .maya-title,
                .atlas-title {
                    font-size: 42px !important;
                    /* Larger than phone default */
                }
            }
        }

        /* --- DEMO LINK STYLES (GLOBAL SCOPE) --- */
        .demo-link-wrapper {
            margin-top: 5px;
            /* Closer spacing */
            display: flex;
            align-items: center;
        }

        /* Next Card Button (Volgende) */
        .next-card-btn {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
            z-index: 100;
        }

        .next-card-btn span {
            font-size: 16px;
            /* Increased from 12px (+33%) */
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
        }

        .next-card-btn i {
            font-size: 26px;
            /* Increased from 20px (+30%) */
            animation: bounce 2s infinite;
        }

        .next-card-btn:hover {
            color: #fff;
            transform: translateX(-50%) translateY(5px);
            /* Keep centered + move down */
            opacity: 1;
        }

        .demo-link {
            font-family: 'Outfit', sans-serif;
            /* Explicit font match */
            font-size: 16px;
            /* Matches Subtitle Size */
            font-weight: 600;
            /* Match Subtitle Weight */
            text-decoration: none !important;
            border: none !important;
            outline: none !important;
            display: inline-block;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: opacity 0.3s ease;
            background: transparent !important;
            cursor: pointer;
        }

        .demo-link:hover,
        .demo-link:focus,
        .demo-link:active,
        .demo-link:visited {
            opacity: 1;
            /* Full opacity on hover */
            text-decoration: none !important;
            border: none !important;
            text-shadow: 0 0 30px currentColor;
            /* The requested glow (200% larger) */
            outline: none !important;
        }

        /* Theme Colors - GLOBAL OVERRIDES */
        .noa-container .demo-link {
            color: #20d9a0 !important;
        }

        .liam-container .demo-link {
            color: #ff9f1c !important;
        }

        .maya-container .demo-link {
            color: #2ec4b6 !important;
        }

        .atlas-container .demo-link {
            color: #b5179e !important;
        }

        /* Mobile Specifics */
        @media (max-width: 1024px) {
            .demo-link-wrapper {
                justify-content: center;
                width: 100%;
                margin-top: 24px;
            }

            .demo-link {
                font-size: 17px;
                padding: 0;
            }
        }

        /* --- 3 STEPS TO LIVE SECTION --- */
        #live-steps {
            width: 100%;
            max-width: 1000px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 40px;
            text-align: center;
            margin-top: 100px;
            /* Separation from integrations */
            padding-bottom: 0;
            /* Removed extra padding */
        }

        /* Animation: Text & Elements Initial State */
        .steps-title {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .stepper-wrapper {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
            /* 0.2s Delay */
        }

        /* The container for text, because text-items change active state, 
           we animate the container entrance instead */
        .step-content-container {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
            /* 0.4s Delay */
        }

        /* Active State (Triggered by JS) */
        #live-steps.animated-in .steps-title,
        #live-steps.animated-in .stepper-wrapper,
        #live-steps.animated-in .step-content-container {
            opacity: 1;
            transform: translateY(0);
        }

        /* Update #card-5 to handle the column layout */
        #card-5 {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            /* Start from top */
            overflow-y: visible;
            /* Allow content to flow */
            height: auto;
            min-height: 100vh;
            padding-top: 0;
            /* Removed padding */
        }

        /* --- TYPOGRAPHY (Mobile Override) --- */
        @media (max-width: 550px) {

            /* Short Titles (Keep Huge) */
            .noa-title,
            .atlas-title {
                /* "Heel stuk groter" and "tot rand van scherm" */
                font-size: clamp(36px, 11vw, 56px) !important;
                line-height: 0.95 !important;
                margin-left: -10px !important;
                margin-right: -10px !important;
                width: calc(100% + 20px) !important;
                white-space: normal !important;
                letter-spacing: -1px !important;
            }

            /* Long Titles (10% Smaller to fit 1 line) */
            .liam-title,
            .maya-title {
                font-size: clamp(28px, 8vw, 44px) !important;
                /* Reduced from 9.5vw to 8vw to prevent overflow */
                line-height: 1.0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                width: 100% !important;
                white-space: normal !important;
                /* Allow wrap if it absolutely must, preventing layout break */
                letter-spacing: -1.0px !important;
                /* Slightly looser than -1.5px */
                word-break: break-word !important;
                /* Ensure really long words break instead of expanding container */
            }
        }

        /* Hero Paragraph padding */
        .hero-subtitle {
            padding-left: 32px !important;
            padding-right: 32px !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* Duplicate live-steps block removed */

        .steps-title {
            font-size: clamp(42px, 10vw, 60px);
            /* Slightly smaller on mobile to fit */
            /* Larger match */
            font-weight: 800;
            background: linear-gradient(135deg, #ffffff 20%, #67e8f9 55%, #06b6d4 80%);
            /* White (Left) -> Purple (Middle) -> More Green (Right) */
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            margin-bottom: 20px;
            text-shadow: none;
            /* No glow */
            line-height: 1.1;
            padding-bottom: 20px;
            filter: none;
            /* Removed outer glow */
        }

        /* --- STEPPER COMPONENT --- */
        .stepper-wrapper {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 800px;
            margin: 40px auto;
            padding: 0 40px;
            box-sizing: border-box;
            /* Ensure padding doesn't overflow */
        }

        .stepper-wrapper * {
            box-sizing: border-box;
        }

        /* Connecting Lines */
        /* Connecting Lines */
        .stepper-line {
            position: absolute;
            top: 30px;
            /* Center with circle (60px height / 2) */
            left: 70px;
            /* 40px padding + 30px half-circle */
            right: 70px;
            /* 40px padding + 30px half-circle */
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            /* Slightly more visible */
            z-index: 0;
            border-radius: 4px;
        }

        .stepper-progress {
            /* Position relative to parent .stepper-line */
            height: 100%;
            background: linear-gradient(90deg, #67e8f9, #06b6d4);
            width: 0%;
            /* JS will animate this */
            transition: width 3s linear;
            /* Continuous movement over the interval */
            border-radius: 4px;
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.6);
            /* Glow effect */
        }

        .stepper-progress.no-transition {
            transition: none !important;
        }

        /* Step Item */
        .step-item {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            gap: 16px;
            cursor: pointer;
            opacity: 1;
            /* No transparency */
            transition: transform 0.3s ease;
        }

        .step-item.active {
            opacity: 1;
            transform: scale(1.1);
        }

        .step-item:hover {
            /* No opacity change needed */
            transform: scale(1.05);
        }

        /* Step Circle */
        .step-circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #161e2e;
            /* Dark Blue-Grey instead of black */
            border: 2px solid rgba(169, 177, 214, 0.5);
            /* Light bluish-grey (Brand color #a9b1d6 with opacity) */
            color: rgba(255, 255, 255, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 700;
            transition: all 0.4s ease;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
            position: relative;
            z-index: 1;
            /* Basic clip for all states */
            background-clip: padding-box;
        }

        .step-item.active .step-circle {
            background: linear-gradient(135deg, #ffffff 10%, #67e8f9 60%, #06b6d4 100%);
            border: 2px solid transparent;
            /* Ensure border exists for clip */
            color: #000;
            box-shadow: 0 0 30px rgba(6, 182, 212, 0.5);
            background-clip: padding-box;
            /* Clip background to inside of border */
            overflow: hidden;
            /* Ensure content is clipped */
        }

        /* Labels */
        .step-label {
            font-size: 18px;
            font-weight: 600;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        /* Step Content (Text below) */
        .step-content-container {
            min-height: 80px;
            /* Prevent layout jump */
            text-align: center;
            width: 100%;
            max-width: 600px;
            position: relative;
        }

        .step-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            font-size: 20px;
            line-height: 1.5;
            color: #d1d5db;
            /* Brighter grey for sharpness (was #b0a8d6 purple-grey) */
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.5s ease;
            pointer-events: none;

            /* FIX BLURRINESS */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
            /* Slight shadow for definition, not blur */
            will-change: transform, opacity;
        }

        .step-text.active {
            opacity: 1;
            transform: translateY(0);
            position: relative;
            /* Take up space */
        }

        /* Responsive Text Toggle */
        .text-mobile {
            display: none;
        }

        .text-desktop {
            display: block;
        }

        @media (max-width: 768px) {
            .text-desktop {
                display: none;
            }

            .text-mobile {
                display: block;
            }
        }

        /* Guarantee Badge */
        .guarantee-badge {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: rgba(32, 217, 160, 0.1);
            border: 1px solid rgba(32, 217, 160, 0.3);
            padding: 12px 32px;
            border-radius: 50px;
            box-shadow: 0 0 20px rgba(32, 217, 160, 0.1);
            cursor: default;
            transition: transform 0.3s ease;
        }

        .guarantee-badge:hover {
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(32, 217, 160, 0.2);
        }

        .guarantee-badge i {
            color: #20d9a0;
            font-size: 24px;
        }

        .guarantee-badge span {
            color: #20d9a0;
            font-weight: 700;
            font-size: 18px;
            text-shadow: 0 0 10px rgba(32, 217, 160, 0.3);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Calendly Wrapper */
        .calendly-wrapper {
            width: 100%;
            margin-top: 10px;
            /* Reduced from 20px */
            border-radius: 20px;
            overflow: hidden;
            background: transparent;
            /* Removed background */
            border: none;
            /* Removed border */
            backdrop-filter: none;
            /* Removed blur */
            box-shadow: none;
            /* Removed shadow */
        }

        /* Responsive */
        @media (max-width: 900px) {
            .steps-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .step-card {
                flex-direction: row;
                text-align: left;
                padding: 20px;
            }

            .step-icon {
                margin-bottom: 0;
                margin-right: 20px;
                width: 60px;
                height: 60px;
                flex-shrink: 0;
            }

            .step-icon i {
                font-size: 28px;
            }

            .step-card p {
                max-width: 100%;
            }

            #live-steps {
                padding-bottom: 200px;
                /* Extra mobile scroll space */
                gap: 40px;
            }
        }

        /* Tablet/Narrow Desktop Adjustment */
        @media (max-width: 850px) {
            .stepper-wrapper {
                width: 85%;
                /* More breathing room */
                padding: 0;
                margin: 40px auto;
            }

            .step-item {
                width: 100px;
                /* Fixed width for alignment */
            }

            .step-circle {
                width: 50px;
                height: 50px;
                font-size: 20px;
            }

            .stepper-line {
                top: 25px;
                /* Center of 50px */
                left: 50px;
                right: 50px;
                /* Center of 100px item */
            }
        }

        /* Responsive Stepper for Mobile */
        @media (max-width: 600px) {
            .steps-title {
                font-size: 40px;
                /* Increased from 36px */
                padding: 0 10px;
            }

            .stepper-wrapper {
                width: 90%;
                /* Significant side margins */
                padding: 0;
                margin: 30px auto;
            }

            .step-item {
                width: 90px;
                /* Increased from 76px */
            }

            .step-circle {
                width: 48px;
                /* 36px * 1.33 = 48px */
                height: 48px;
                font-size: 18px;
                /* Increased from 15px */
                border-width: 1.5px;
            }

            /* Adjust Line for smaller circles */
            .stepper-line {
                top: 24px;
                /* Center of 48px circle */
                left: 45px;
                /* Center of 90px item */
                right: 45px;
                height: 3px;
            }

            .step-label {
                font-size: 13px;
                /* Increased from 11px */
                margin-top: 2px;
                /* Tighter spacing */
            }

            .step-content-container {
                min-height: 120px;
                /* More height for stacked text */
                /* More height for stacked text */
                padding: 0 32px;
                /* Increased from 20px for better edge spacing */
                width: 100%;
                max-width: 100%;
                /* Tighter spacing for mobile text */
                margin-top: -20px;
                /* Increased negative margin */
                padding-top: 0;
            }

            .step-text {
                font-size: 18px;
                /* Increased from 14px */
                width: 100%;
                /* Ensure full width */
            }
        }

        .demo-title {
            font-size: clamp(40px, 5vw, 60px);
            font-weight: 800;
            color: #ffffff;
            /* White text, no gradient */
            text-align: center;
            margin-top: 250px;
            /* Increased space above (100px + 150px) */
            margin-bottom: 20px;
            /* Reduced bottom margin to sit close to subtitle */
            text-shadow: none;
            line-height: 1.2;
        }

        .demo-subtitle {
            text-align: center;
            color: #b0a8d6;
            font-size: 18px;
            margin-bottom: 10px;
            /* Reduced from 40px */
            margin-top: 0;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 20px;
        }

        /* --- FAQ SECTION --- */
        .faq-section {
            margin-top: 150px;
            margin-bottom: 100px;
            width: 100%;
            max-width: 800px;
            padding: 0 20px;
            box-sizing: border-box;
        }

        .faq-title {
            text-align: center;
            font-size: clamp(32px, 4vw, 48px);
            font-weight: 700;
            margin-bottom: 50px;
            background: linear-gradient(135deg, #fff 30%, #a5f3fc 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 30px rgba(165, 243, 252, 0.2);
        }

        .faq-grid {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .faq-item {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .faq-item:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(103, 232, 249, 0.3);
            /* Cyan highlight */
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .faq-item[open] {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(103, 232, 249, 0.5);
            box-shadow: 0 10px 40px rgba(6, 182, 212, 0.1);
        }

        .faq-item summary {
            padding: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            list-style: none;
            font-weight: 600;
            font-size: 18px;
            color: #e6ebff;
            outline: none;
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary span {
            opacity: 0.9;
        }

        .faq-item summary i {
            color: #67e8f9;
            transition: transform 0.3s ease;
            font-size: 24px;
        }

        .faq-item[open] summary i {
            transform: rotate(180deg);
            color: #a855f7;
            /* Purple accent when open */
        }

        .faq-content {
            padding: 0 24px 24px 24px;
            color: #b0a8d6;
            line-height: 1.7;
            font-size: 16px;
            animation: fadeIn 0.4s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* --- INDUSTRIES SECTION --- */
        .industries-section {
            width: 100%;
            max-width: 1000px;
            margin: 60px auto;
            text-align: center;
        }

        .industries-title {
            font-size: clamp(24px, 3vw, 36px);
            font-weight: 700;
            color: #fff;
            margin-bottom: 40px;
            background: linear-gradient(135deg, #fff, #a5f3fc);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .industries-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
        }

        .industry-tag {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            color: #bdc5e1;
            transition: all 0.3s ease;
            cursor: default;
        }

        .industry-tag:hover {
            background: rgba(32, 217, 160, 0.1);
            border-color: #20d9a0;
            color: #fff;
            transform: translateY(-2px);
        }

        /* --- BACK HOME BUTTON --- */
        .back-home-container {
            display: flex;
            justify-content: center;
            margin-top: 50px;
            margin-bottom: 80px;
            width: 100%;
        }

        .back-home-btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 16px 32px;
            background: linear-gradient(135deg, #7c5cff, #6b4de0);
            /* Brand gradient, opaque */
            border-radius: 50px;
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            font-size: 18px;
            transition: all 0.3s ease;
            border: none;
            /* Remove border */
            box-shadow: 0 4px 15px rgba(124, 92, 255, 0.4);
        }

        .back-home-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(124, 92, 255, 0.6);
            color: #fff;
            /* Keep text white */
        }

        .back-home-btn i {
            font-size: 24px;
        }

        /* --- FOOTER --- */
        .site-footer {
            width: 100vw;
            margin-left: calc(-50vw + 50%);
            margin-right: calc(-50vw + 50%);
            margin-top: auto;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding: 60px 20px;
            background: rgba(5, 5, 10, 0.4);
            /* Transparent again */
            text-align: center;
        }

        .footer-logo {
            font-size: 24px;
            font-weight: 800;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #fff 30%, #a5f3fc 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .footer-tagline {
            color: #bdc5e1;
            font-size: 14px;
            margin-bottom: 30px;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .footer-links a {
            color: #8b9bb4;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: #67e8f9;
        }

        .copyright {
            color: #5d6b82;
            font-size: 12px;
        }



        /* --- DEMO SECTION --- */
        .demo-title {
            text-align: center;
            font-size: clamp(32px, 5vw, 48px);
            font-weight: 800;
            color: #fff;
            margin-top: 80px;
            margin-bottom: 16px;
            background: linear-gradient(135deg, #fff 0%, #7c5cff 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            padding: 0 20px;
            /* Base padding */
        }

        .demo-subtitle {
            text-align: center;
            font-size: 18px;
            color: #a9b1d6;
            margin-bottom: 40px;
            padding: 0 20px;
        }

        @media (max-width: 550px) {
            .hero-back-btn {
                top: 30px;
                left: 20px;
            }

            /* EXTRA MARGIN FOR MOBILE DEMO TITLE */
            .demo-title {
                padding-left: 32px !important;
                padding-right: 32px !important;
                font-size: 32px;
                /* Ensure readability */
                line-height: 1.2;
            }

            .demo-subtitle {
                padding-left: 32px !important;
                padding-right: 32px !important;
            }
        }

        /* Hide Demo Link on Mobile/Tablet Layouts */
        @media (max-width: 1024px) {
            .demo-link-wrapper {
                display: none !important;
            }
        }