/* Icon base styles */
        .icon { display: inline-flex; align-items: center; justify-content: center; }
        .icon svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        /* ========== RESET & BASE ========== */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --navy: #1a0a5e;
            --magenta: #a8198b;
            --magenta-light: #c94daa;
            --cream: #faf8f5;
            --white: #ffffff;
            --black: #0a0a0a;
            --gray-100: #f5f3f0;
            --gray-200: #e8e5e0;
            --gray-400: #9a9590;
            --gray-600: #5a5550;
            --lime: #c8ff00;
            --yellow: #ffe14d;
            --border: 3px solid var(--black);
            --shadow: 6px 6px 0px var(--black);
            --shadow-sm: 4px 4px 0px var(--black);
            --shadow-lg: 8px 8px 0px var(--black);
            --radius: 0px;
        }

        html { scroll-behavior: smooth; overflow-x: hidden; }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--cream);
            color: var(--black);
            line-height: 1.6;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            line-height: 1.1;
        }

        a { text-decoration: none; color: inherit; }
        img { max-width: 100%; display: block; }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* ========== NEO BRUTALIST COMPONENTS ========== */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 32px;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 16px;
            border: var(--border);
            cursor: pointer;
            transition: all 0.15s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn:hover {
            transform: translate(-2px, -2px);
            box-shadow: 8px 8px 0px var(--black);
        }

        .btn:active {
            transform: translate(2px, 2px);
            box-shadow: 2px 2px 0px var(--black);
        }

        .btn-primary {
            background: var(--lime);
            color: var(--black);
            box-shadow: var(--shadow);
        }

        .btn-secondary {
            background: var(--white);
            color: var(--black);
            box-shadow: var(--shadow);
        }

        .btn-navy {
            background: var(--navy);
            color: var(--white);
            box-shadow: var(--shadow);
        }

        .btn-magenta {
            background: var(--magenta);
            color: var(--white);
            box-shadow: var(--shadow);
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: 2px solid var(--black);
            background: var(--yellow);
            box-shadow: 3px 3px 0px var(--black);
        }

        .card {
            border: var(--border);
            background: var(--white);
            box-shadow: var(--shadow);
            padding: 32px;
            transition: all 0.15s ease;
        }

        .card:hover {
            transform: translate(-2px, -2px);
            box-shadow: var(--shadow-lg);
        }

        /* ========== NAVBAR ========== */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: var(--white);
            border-bottom: var(--border);
            padding: 0;
        }

        .navbar-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 72px;
        }

        .navbar-logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .navbar-logo img {
            height: 52px;
            width: auto;
        }

        .navbar-links {
            display: flex;
            align-items: center;
            gap: 0;
        }

        .navbar-links a {
            padding: 24px 20px;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 15px;
            border-left: 2px solid var(--black);
            transition: background 0.15s;
        }

        .navbar-links a:hover {
            background: var(--lime);
        }

        .navbar-cta {
            padding: 24px 28px;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 15px;
            background: var(--navy);
            color: var(--white) !important;
            border-left: 2px solid var(--black);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: background 0.15s;
        }

        .navbar-cta:hover {
            background: var(--magenta) !important;
        }

        .mobile-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            z-index: 1001;
        }

        .mobile-toggle span {
            display: block;
            width: 28px;
            height: 3px;
            background: var(--black);
            margin: 6px 0;
            transition: 0.3s;
        }

        .mobile-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }

        .mobile-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .mobile-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -7px);
        }

        /* Mobile Menu */
        .mobile-menu {
            display: none;
            position: fixed;
            top: 72px;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--white);
            z-index: 999;
            padding: 40px 24px;
            flex-direction: column;
            gap: 8px;
            border-top: var(--border);
        }

        .mobile-menu.active {
            display: flex;
        }

        .mobile-menu a {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 24px;
            padding: 16px 0;
            border-bottom: 2px solid var(--gray-200);
            color: var(--black);
        }

        .mobile-menu .navbar-cta {
            margin-top: 16px;
            padding: 20px;
            text-align: center;
            background: var(--navy);
            color: var(--white) !important;
            border: var(--border);
            box-shadow: var(--shadow);
            font-size: 18px;
        }

        /* ========== HERO ========== */
        .hero {
            margin-top: 72px;
            padding: 80px 0 60px;
            position: relative;
            overflow: hidden;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .hero-grid > * {
            min-width: 0;
        }

        .hero-content { position: relative; z-index: 2; }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: var(--navy);
            color: var(--white);
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 14px;
            border: 2px solid var(--black);
            box-shadow: var(--shadow-sm);
            margin-bottom: 28px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .hero-badge .pulse {
            width: 8px;
            height: 8px;
            background: var(--lime);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

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

        .hero h1 {
            font-size: clamp(42px, 5vw, 64px);
            margin-bottom: 24px;
            color: var(--black);
        }

        .hero h1 .highlight {
            background: var(--lime);
            padding: 0 8px;
            border: 2px solid var(--black);
            display: inline;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
        }

        .hero h1 .text-magenta {
            color: var(--magenta);
        }

        .hero-desc {
            font-size: 18px;
            color: var(--gray-600);
            margin-bottom: 36px;
            max-width: 520px;
            line-height: 1.7;
        }

        .hero-buttons {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 48px;
        }

        .hero-stats {
            display: flex;
            gap: 40px;
            padding-top: 32px;
            border-top: 2px dashed var(--gray-200);
        }

        .hero-stat-number {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 36px;
            font-weight: 700;
            color: var(--navy);
        }

        .hero-stat-label {
            font-size: 14px;
            color: var(--gray-600);
            font-weight: 500;
        }

        /* Hero Visual */
        .hero-visual {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-visual-card {
            background: var(--white);
            border: var(--border);
            box-shadow: var(--shadow-lg);
            padding: 40px;
            width: 100%;
            max-width: 480px;
            position: relative;
        }

        .hero-visual-card::before {
            content: '';
            position: absolute;
            top: -12px;
            right: -12px;
            width: 100%;
            height: 100%;
            border: var(--border);
            background: var(--lime);
            z-index: -1;
        }

        .pairing-demo {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .pairing-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 16px;
            border-bottom: 2px solid var(--black);
        }

        .pairing-title {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 18px;
        }

        .ai-badge {
            padding: 4px 12px;
            background: var(--magenta);
            color: var(--white);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 12px;
            font-weight: 700;
            border: 2px solid var(--black);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .pairing-person {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px;
            border: 2px solid var(--black);
            background: var(--gray-100);
        }

        .person-avatar {
            width: 48px;
            height: 48px;
            border: 2px solid var(--black);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .person-avatar.navy { background: var(--navy); color: var(--white); }
        .person-avatar.magenta { background: var(--magenta); color: var(--white); }

        .person-info h4 {
            font-size: 15px;
            margin-bottom: 2px;
        }

        .person-info p {
            font-size: 13px;
            color: var(--gray-600);
        }

        .pairing-connector {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 8px 0;
        }

        .connector-line {
            flex: 1;
            height: 2px;
            background: repeating-linear-gradient(90deg, var(--black) 0, var(--black) 8px, transparent 8px, transparent 14px);
        }

        .connector-icon {
            width: 44px;
            height: 44px;
            background: var(--lime);
            border: 2px solid var(--black);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
            animation: connectorPulse 3s ease-in-out infinite;
        }

        @keyframes connectorPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .pairing-icebreaker {
            padding: 20px;
            background: var(--yellow);
            border: 2px solid var(--black);
            font-size: 14px;
            line-height: 1.6;
        }

        .pairing-icebreaker strong {
            font-family: 'Space Grotesk', sans-serif;
            display: block;
            margin-bottom: 6px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* ========== MARQUEE ========== */
        .marquee-section {
            border-top: var(--border);
            border-bottom: var(--border);
            background: var(--navy);
            padding: 16px 0;
            overflow: hidden;
        }

        .marquee-track {
            display: flex;
            animation: marquee 30s linear infinite;
            white-space: nowrap;
        }

        .marquee-item {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 16px;
            color: var(--white);
            padding: 0 40px;
            text-transform: uppercase;
            letter-spacing: 2px;
            display: flex;
            align-items: center;
            gap: 16px;
            flex-shrink: 0;
        }

        .marquee-item .dot {
            width: 8px;
            height: 8px;
            background: var(--lime);
            flex-shrink: 0;
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* ========== PROBLEM SECTION ========== */
        .problem-section {
            padding: 100px 0;
            background: var(--white);
            border-bottom: var(--border);
        }

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--magenta);
            margin-bottom: 20px;
        }

        .section-label::before {
            content: '';
            width: 32px;
            height: 3px;
            background: var(--magenta);
        }

        .problem-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .problem-grid > * {
            min-width: 0;
        }

        .problem-content h2 {
            font-size: clamp(32px, 3.5vw, 48px);
            margin-bottom: 24px;
        }

        .problem-content p {
            font-size: 17px;
            color: var(--gray-600);
            line-height: 1.8;
            margin-bottom: 32px;
        }

        .problem-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .problem-stat {
            padding: 28px;
            border: var(--border);
            background: var(--cream);
            box-shadow: var(--shadow-sm);
        }

        .problem-stat .number {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 42px;
            font-weight: 700;
            color: var(--magenta);
            margin-bottom: 8px;
        }

        .problem-stat .label {
            font-size: 14px;
            color: var(--gray-600);
            line-height: 1.5;
        }

        /* ========== HOW IT WORKS ========== */
        .how-section {
            padding: 100px 0;
            background: var(--cream);
            border-bottom: var(--border);
        }

        .section-header {
            text-align: center;
            margin-bottom: 64px;
        }

        .section-header h2 {
            font-size: clamp(32px, 3.5vw, 48px);
            margin-bottom: 16px;
        }

        .section-header p {
            font-size: 18px;
            color: var(--gray-600);
            max-width: 600px;
            margin: 0 auto;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }

        .step-card {
            border: var(--border);
            background: var(--white);
            box-shadow: var(--shadow);
            padding: 0;
            overflow: hidden;
            transition: all 0.15s ease;
        }

        .step-card:hover {
            transform: translate(-3px, -3px);
            box-shadow: 10px 10px 0px var(--black);
        }

        .step-number {
            padding: 16px 28px;
            border-bottom: var(--border);
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 48px;
            color: var(--white);
        }

        .step-card:nth-child(1) .step-number { background: var(--navy); }
        .step-card:nth-child(2) .step-number { background: var(--magenta); }
        .step-card:nth-child(3) .step-number { background: var(--navy); }

        .step-body {
            padding: 28px;
        }

        .step-icon {
            width: 56px;
            height: 56px;
            border: 2px solid var(--black);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 20px;
            background: var(--lime);
        }

        .step-body h3 {
            font-size: 22px;
            margin-bottom: 12px;
        }

        .step-body p {
            font-size: 15px;
            color: var(--gray-600);
            line-height: 1.7;
        }

        .step-tag {
            display: inline-block;
            margin-top: 16px;
            padding: 6px 14px;
            border: 2px solid var(--black);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            background: var(--yellow);
        }

        /* ========== OUR BELIEF SECTION ========== */
        .ai-section {
            padding: 100px 0;
            background: var(--navy);
            color: var(--white);
            border-bottom: var(--border);
            position: relative;
            overflow: hidden;
        }

        .ai-section::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -40px;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 400px;
            font-weight: 700;
            opacity: 0.04;
            color: var(--white);
            line-height: 1;
        }

        .ai-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .ai-grid > * {
            min-width: 0;
        }

        .ai-content .section-label {
            color: var(--lime);
        }

        .ai-content .section-label::before {
            background: var(--lime);
        }

        .ai-content h2 {
            font-size: clamp(32px, 3.5vw, 48px);
            margin-bottom: 24px;
            color: var(--white);
        }

        .ai-content p {
            font-size: 17px;
            color: rgba(255,255,255,0.7);
            line-height: 1.8;
            margin-bottom: 32px;
        }

        .ai-features {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .ai-feature {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 20px;
            border: 2px solid rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.05);
            transition: all 0.2s;
        }

        .ai-feature:hover {
            border-color: var(--lime);
            background: rgba(200,255,0,0.05);
        }

        .ai-feature-icon {
            width: 44px;
            height: 44px;
            border: 2px solid var(--lime);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
            background: rgba(200,255,0,0.1);
        }

        .ai-feature h4 {
            font-size: 16px;
            margin-bottom: 4px;
            color: var(--white);
        }

        .ai-feature p {
            font-size: 14px;
            color: rgba(255,255,255,0.6);
            margin: 0;
            line-height: 1.5;
        }

        .ai-visual {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .ai-terminal {
            border: 2px solid rgba(255,255,255,0.2);
            background: rgba(0,0,0,0.3);
            overflow: hidden;
            max-width: 100%;
        }

        .terminal-bar {
            padding: 12px 16px;
            background: rgba(255,255,255,0.08);
            border-bottom: 2px solid rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .terminal-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .terminal-dot.red { background: #ff5f57; }
        .terminal-dot.yellow { background: #febc2e; }
        .terminal-dot.green { background: #28c840; }

        .terminal-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 13px;
            color: rgba(255,255,255,0.5);
            margin-left: 8px;
        }

        .terminal-body {
            padding: 24px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 2;
            overflow-x: auto;
        }

        .terminal-line {
            color: rgba(255,255,255,0.5);
        }

        .terminal-line .cmd { color: var(--lime); }
        .terminal-line .str { color: var(--yellow); }
        .terminal-line .key { color: var(--magenta-light); }
        .terminal-line .comment { color: rgba(255,255,255,0.3); }

        .typing-cursor {
            display: inline-block;
            width: 8px;
            height: 16px;
            background: var(--lime);
            animation: blink 1s infinite;
            vertical-align: middle;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* ========== USE CASES / FOR WHO ========== */
        .usecases-section {
            padding: 100px 0;
            background: var(--white);
            border-bottom: var(--border);
        }

        .usecases-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .usecase-card {
            border: var(--border);
            background: var(--white);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: all 0.15s ease;
        }

        .usecase-card:hover {
            transform: translate(-2px, -2px);
            box-shadow: var(--shadow-lg);
        }

        .usecase-color {
            height: 8px;
        }

        .usecase-card:nth-child(1) .usecase-color { background: var(--lime); }
        .usecase-card:nth-child(2) .usecase-color { background: var(--magenta); }
        .usecase-card:nth-child(3) .usecase-color { background: var(--yellow); }

        .usecase-body {
            padding: 32px;
        }

        .usecase-icon {
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            background: var(--cream);
            border: 2px solid var(--black);
        }

        .usecase-body h3 {
            font-size: 22px;
            margin-bottom: 12px;
        }

        .usecase-body p {
            font-size: 15px;
            color: var(--gray-600);
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .usecase-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .usecase-list li {
            font-size: 14px;
            color: var(--gray-600);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .usecase-list li::before {
            content: '→';
            font-weight: 700;
            color: var(--magenta);
        }

        /* ========== PRICING ========== */
        .pricing-section {
            padding: 100px 0;
            background: var(--cream);
            border-bottom: var(--border);
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 28px;
            max-width: 800px;
            margin: 0 auto;
        }

        .pricing-card {
            border: var(--border);
            background: var(--white);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: all 0.15s ease;
        }

        .pricing-card:hover {
            transform: translate(-2px, -2px);
            box-shadow: var(--shadow-lg);
        }

        .pricing-card.featured {
            position: relative;
        }

        .pricing-card.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: 0;
            right: 0;
            padding: 8px 16px;
            background: var(--lime);
            border-left: 2px solid var(--black);
            border-bottom: 2px solid var(--black);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .pricing-header {
            padding: 32px 32px 24px;
            border-bottom: 2px dashed var(--gray-200);
        }

        .pricing-type {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--magenta);
            margin-bottom: 12px;
        }

        .pricing-amount {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 48px;
            font-weight: 700;
            color: var(--navy);
        }

        .pricing-unit {
            font-size: 16px;
            color: var(--gray-400);
            font-weight: 500;
        }

        .pricing-desc {
            font-size: 14px;
            color: var(--gray-600);
            margin-top: 8px;
        }

        .pricing-body {
            padding: 24px 32px 32px;
        }

        .pricing-features {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 28px;
        }

        .pricing-features li {
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .pricing-features li::before {
            content: '✓';
            width: 24px;
            height: 24px;
            background: var(--lime);
            border: 2px solid var(--black);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            flex-shrink: 0;
        }

        /* ========== SOCIAL PROOF ========== */
        .proof-section {
            padding: 100px 0;
            background: var(--white);
            border-bottom: var(--border);
        }

        .proof-quote {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .proof-quote blockquote {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(24px, 3vw, 36px);
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 32px;
            color: var(--navy);
        }

        .proof-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }

        .proof-avatar {
            width: 56px;
            height: 56px;
            background: var(--magenta);
            border: 2px solid var(--black);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-weight: 700;
            font-size: 20px;
        }

        .proof-author-info h4 {
            font-size: 16px;
        }

        .proof-author-info p {
            font-size: 14px;
            color: var(--gray-600);
        }

        /* ========== CTA ========== */
        .cta-section {
            padding: 100px 0;
            background: var(--navy);
            color: var(--white);
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                -45deg,
                transparent,
                transparent 20px,
                rgba(255,255,255,0.02) 20px,
                rgba(255,255,255,0.02) 40px
            );
        }

        .cta-inner {
            max-width: 700px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .cta-inner h2 {
            font-size: clamp(32px, 4vw, 52px);
            margin-bottom: 20px;
            color: var(--white);
        }

        .cta-inner p {
            font-size: 18px;
            color: rgba(255,255,255,0.7);
            margin-bottom: 40px;
            line-height: 1.7;
        }

        .cta-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .cta-note {
            margin-top: 24px;
            font-size: 14px;
            color: rgba(255,255,255,0.4);
        }

        /* ========== FOOTER ========== */
        .footer {
            padding: 60px 0 32px;
            background: var(--black);
            color: var(--white);
            border-top: var(--border);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 48px;
            margin-bottom: 48px;
        }

        .footer-brand p {
            font-size: 14px;
            color: rgba(255,255,255,0.5);
            line-height: 1.7;
            margin-top: 16px;
            max-width: 300px;
        }

        .footer-col h4 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 20px;
            color: var(--lime);
        }

        .footer-col a {
            display: block;
            font-size: 14px;
            color: rgba(255,255,255,0.5);
            padding: 6px 0;
            transition: color 0.2s;
        }

        .footer-col a:hover {
            color: var(--white);
        }

        .footer-bottom {
            padding-top: 32px;
            border-top: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .footer-bottom p {
            font-size: 13px;
            color: rgba(255,255,255,0.3);
        }

        .footer-socials {
            display: flex;
            gap: 12px;
        }

        .footer-socials a {
            width: 40px;
            height: 40px;
            border: 2px solid rgba(255,255,255,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: all 0.2s;
        }

        .footer-socials a:hover {
            background: var(--lime);
            color: var(--black);
            border-color: var(--lime);
        }

        /* ========== ILLUSTRATIONS ========== */
        .hero-visual {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 32px;
        }

        .cta-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .cta-grid > * {
            min-width: 0;
        }

        .cta-illo-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cta-illo-wrap img {
            width: 100%;
            max-width: 300px;
            height: auto;
        }

        .cta-inner {
            max-width: none;
            text-align: left;
        }

        .cta-buttons {
            justify-content: flex-start;
        }

        .cta-note {
            text-align: left;
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 1024px) {
            .hero-grid,
            .problem-grid,
            .ai-grid,
            .cta-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .hero-visual { order: 1; }

            .cta-inner {
                text-align: center;
            }

            .cta-buttons {
                justify-content: center;
            }

            .cta-note {
                text-align: center;
            }

            .cta-illo-wrap img,
            .ai-visual img {
                max-width: 260px;
            }

            .steps-grid,
            .usecases-grid {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin: 0 auto;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 32px;
            }

            /* Sub-page grids → single column */
            .content-section .content-grid,
            .demo-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            /* Reduce section padding */
            .content-section,
            .problem-section,
            .how-section,
            .usecases-section,
            .pricing-section,
            .proof-section {
                padding: 80px 0;
            }

            .section-header {
                margin-bottom: 48px;
            }

            .faq-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .navbar-links { display: none; }
            .mobile-toggle { display: block; }

            .cta-illo-wrap img,
            .ai-visual img {
                max-width: 220px;
            }

            /* Hero */
            .hero { padding: 60px 0 40px; }
            .hero h1 { font-size: 36px; }
            .hero-stats { flex-direction: column; gap: 20px; }
            .hero-desc { font-size: 16px; }
            .hero-visual-card { padding: 24px; }
            .hero-visual-card::before { top: -8px; right: -8px; }

            /* Sub-page hero */
            .page-hero { padding: 50px 0 30px; }
            .page-hero h1 { font-size: 36px; }
            .page-hero p { font-size: 16px; }

            /* Section padding reductions */
            .content-section,
            .problem-section,
            .how-section,
            .ai-section,
            .usecases-section,
            .pricing-section,
            .proof-section,
            .cta-section {
                padding: 60px 0;
            }

            .section-header { margin-bottom: 40px; }
            .section-header p { font-size: 16px; }

            /* Grids → single column */
            .content-section .content-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .faq-grid {
                grid-template-columns: 1fr;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
                max-width: 400px;
            }

            .problem-stats {
                grid-template-columns: 1fr;
            }

            .blog-grid {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin: 0 auto;
            }

            /* Demo page */
            .demo-content { padding: 50px 0; }
            .demo-grid { grid-template-columns: 1fr; }
            .demo-cta-box { padding: 28px; }

            /* Blog empty state */
            .blog-empty { padding: 60px 0; }
            .blog-empty-card { padding: 40px 24px; }
            .subscribe-form { flex-direction: column; }

            /* Feature detail cards */
            .feature-detail { padding: 20px; gap: 16px; }
            .feature-detail-icon { width: 44px; height: 44px; font-size: 20px; }

            /* FAQ items */
            .faq-item { padding: 20px; }
            .faq-item h3 { font-size: 16px; }

            /* Step cards */
            .step-number { font-size: 36px; padding: 12px 20px; }
            .step-body { padding: 20px; }
            .step-body h3 { font-size: 18px; }

            /* Pricing */
            .pricing-amount { font-size: 36px; }
            .pricing-header { padding: 24px 24px 20px; }
            .pricing-body { padding: 20px 24px 24px; }

            /* Contain horizontal overflow */
            .content-section,
            .pricing-section,
            .how-section {
                overflow-x: hidden;
            }

            /* Comparison table */
            .comparison-table th,
            .comparison-table td { padding: 12px 16px; font-size: 14px; }

            /* CTA section */
            .cta-inner h2 { font-size: 28px; }
            .cta-inner p { font-size: 16px; }

            /* Social proof */
            .proof-quote blockquote { font-size: 22px; }

            /* Problem stats */
            .problem-stat .number { font-size: 32px; }
            .problem-stat { padding: 20px; box-shadow: 3px 3px 0px var(--black); }

            /* AI terminal */
            .ai-terminal .terminal-body { padding: 16px; font-size: 11px; }
            .ai-terminal .terminal-line { white-space: nowrap; }
            .ai-terminal { overflow-x: auto; }

            /* Feature detail & inline boxes overflow fix */
            .feature-detail { overflow: hidden; }
            .content-section .content-grid > div > [style*="padding"] {
                overflow: hidden;
                word-wrap: break-word;
            }

            /* Footer */
            .footer-grid { grid-template-columns: 1fr; }
            .footer-bottom {
                flex-direction: column;
                gap: 16px;
                text-align: center;
            }

            /* Buttons */
            .btn { padding: 14px 24px; font-size: 14px; }
            .card { padding: 24px; }
        }

        /* ========== SUB-PAGE HERO ========== */
        .page-hero {
            margin-top: 72px;
            padding: 80px 0 60px;
            background: var(--navy);
            color: var(--white);
            border-bottom: var(--border);
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                -45deg,
                transparent,
                transparent 20px,
                rgba(255,255,255,0.02) 20px,
                rgba(255,255,255,0.02) 40px
            );
        }

        .page-hero .container {
            position: relative;
            z-index: 1;
        }

        .page-hero .section-label {
            color: var(--lime);
        }

        .page-hero .section-label::before {
            background: var(--lime);
        }

        .page-hero h1 {
            font-size: clamp(36px, 4.5vw, 56px);
            margin-bottom: 16px;
            color: var(--white);
        }

        .page-hero p {
            font-size: 18px;
            color: rgba(255,255,255,0.7);
            max-width: 600px;
            line-height: 1.7;
        }

        .page-hero .tag {
            margin-bottom: 20px;
        }

        /* ========== ACTIVE NAV LINK ========== */
        .navbar-links a.active {
            background: var(--lime);
        }

        /* ========== CONTENT SECTIONS (Sub-pages) ========== */
        .content-section {
            padding: 100px 0;
            border-bottom: var(--border);
        }

        .content-section.bg-white {
            background: var(--white);
        }

        .content-section.bg-cream {
            background: var(--cream);
        }

        .content-section.bg-navy {
            background: var(--navy);
            color: var(--white);
        }

        .content-section .content-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .content-section .content-grid > * {
            min-width: 0;
            overflow: hidden;
            max-width: 100%;
        }

        .content-section .content-text h2 {
            font-size: clamp(28px, 3vw, 40px);
            margin-bottom: 20px;
        }

        .content-section .content-text p {
            font-size: 17px;
            color: var(--gray-600);
            line-height: 1.8;
            margin-bottom: 16px;
        }

        .content-section.bg-navy .content-text p {
            color: rgba(255,255,255,0.7);
        }

        /* ========== FAQ SECTION ========== */
        .faq-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        .faq-item {
            border: var(--border);
            background: var(--white);
            box-shadow: var(--shadow-sm);
            padding: 28px;
        }

        .faq-item h3 {
            font-size: 18px;
            margin-bottom: 12px;
            color: var(--navy);
        }

        .faq-item p {
            font-size: 15px;
            color: var(--gray-600);
            line-height: 1.7;
        }

        /* ========== FEATURE DETAIL CARDS ========== */
        .feature-detail {
            display: flex;
            gap: 20px;
            padding: 28px;
            border: var(--border);
            background: var(--white);
            box-shadow: var(--shadow-sm);
            margin-bottom: 20px;
            transition: all 0.15s ease;
        }

        .feature-detail:hover {
            transform: translate(-2px, -2px);
            box-shadow: var(--shadow);
        }

        .feature-detail-icon {
            width: 56px;
            height: 56px;
            border: 2px solid var(--black);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
            background: var(--lime);
        }

        .feature-detail h3 {
            font-size: 18px;
            margin-bottom: 8px;
        }

        .feature-detail p {
            font-size: 15px;
            color: var(--gray-600);
            line-height: 1.6;
        }

        /* ========== BLOG STYLES ========== */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .blog-empty {
            padding: 100px 0;
            text-align: center;
            background: var(--cream);
            border-bottom: var(--border);
        }

        .blog-empty-card {
            max-width: 500px;
            margin: 0 auto;
            padding: 60px 40px;
            border: var(--border);
            background: var(--white);
            box-shadow: var(--shadow-lg);
        }

        .blog-empty-icon {
            width: 80px;
            height: 80px;
            background: var(--lime);
            border: var(--border);
            box-shadow: var(--shadow-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
            font-size: 36px;
        }

        .blog-empty-card h2 {
            font-size: 32px;
            margin-bottom: 12px;
        }

        .blog-empty-card p {
            font-size: 16px;
            color: var(--gray-600);
            line-height: 1.7;
            margin-bottom: 28px;
        }

        .subscribe-form {
            display: flex;
            gap: 12px;
            max-width: 400px;
            margin: 0 auto;
        }

        .subscribe-form input {
            flex: 1;
            padding: 14px 16px;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            border: var(--border);
            background: var(--cream);
            outline: none;
        }

        .subscribe-form input:focus {
            box-shadow: var(--shadow-sm);
        }

        .subscribe-form .btn {
            flex-shrink: 0;
        }

        /* ========== COMPARISON TABLE ========== */
        .table-scroll-wrap {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            border: var(--border);
            box-shadow: var(--shadow);
            background: var(--white);
            min-width: 500px;
        }

        .comparison-table th,
        .comparison-table td {
            padding: 16px 24px;
            text-align: left;
            border: 2px solid var(--black);
            font-size: 15px;
        }

        .comparison-table th {
            background: var(--navy);
            color: var(--white);
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .comparison-table td.check {
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            color: var(--navy);
        }

        .comparison-table tr:nth-child(even) {
            background: var(--gray-100);
        }

        /* ========== DEMO PAGE ========== */
        .demo-content {
            padding: 80px 0;
            background: var(--cream);
            border-bottom: var(--border);
        }

        .demo-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: start;
        }

        .demo-grid > * {
            min-width: 0;
        }

        .demo-info h2 {
            font-size: clamp(28px, 3vw, 40px);
            margin-bottom: 20px;
        }

        .demo-info p {
            font-size: 17px;
            color: var(--gray-600);
            line-height: 1.8;
            margin-bottom: 24px;
        }

        .demo-cta-box {
            border: var(--border);
            background: var(--white);
            box-shadow: var(--shadow-lg);
            padding: 40px;
            text-align: center;
        }

        .demo-cta-box h3 {
            font-size: 24px;
            margin-bottom: 12px;
        }

        .demo-cta-box p {
            font-size: 15px;
            color: var(--gray-600);
            margin-bottom: 28px;
            line-height: 1.6;
        }

        /* ========== SUB-PAGE RESPONSIVE OVERRIDES ========== */
        /* These must come AFTER the sub-page base styles above */
        @media (max-width: 1024px) {
            .content-section .content-grid,
            .demo-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            .faq-grid {
                grid-template-columns: 1fr;
            }
            .blog-grid {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin: 0 auto;
            }
        }

        @media (max-width: 768px) {
            .content-section .content-grid {
                grid-template-columns: 1fr;
                gap: 32px;
            }
            .faq-grid {
                grid-template-columns: 1fr;
            }
            .demo-grid {
                grid-template-columns: 1fr;
                gap: 32px;
            }
            .blog-grid {
                grid-template-columns: 1fr;
            }
            .hero-visual {
                order: 0;
            }
            .comparison-table th,
            .comparison-table td {
                padding: 10px 12px;
                font-size: 13px;
                letter-spacing: 0;
            }
            .comparison-table th {
                font-size: 11px;
            }
            .page-hero h1 { font-size: 32px; }
            .page-hero p { font-size: 15px; }
        }

        /* ========== SMALL PHONES ========== */
        @media (max-width: 480px) {
            .container { padding: 0 16px; overflow-x: hidden; }

            /* Hero */
            .hero { padding: 40px 0 30px; }
            .hero h1 { font-size: 28px; }
            .hero-stat-number { font-size: 28px; }
            .hero-buttons {
                flex-direction: column;
                align-items: stretch;
            }

            /* Sub-page hero */
            .page-hero { padding: 40px 0 24px; }
            .page-hero h1 { font-size: 28px; }

            /* Sub-page grids must stack */
            .content-section .content-grid,
            .demo-grid,
            .faq-grid,
            .blog-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .hero-visual { order: 0; }

            /* Section padding */
            .content-section,
            .problem-section,
            .how-section,
            .ai-section,
            .usecases-section,
            .pricing-section,
            .proof-section,
            .cta-section {
                padding: 48px 0;
            }

            /* CTA buttons stack */
            .cta-buttons {
                flex-direction: column;
                align-items: stretch;
            }

            .btn {
                padding: 12px 20px;
                font-size: 13px;
                width: 100%;
                justify-content: center;
            }

            /* Cards & detail components */
            .card { padding: 20px; }
            .demo-cta-box { padding: 20px; }
            .demo-content { padding: 40px 0; }
            .blog-empty { padding: 48px 0; }
            .blog-empty-card { padding: 32px 16px; }
            .blog-empty-card h2 { font-size: 24px; }
            .faq-item { padding: 16px; }

            .feature-detail {
                flex-direction: column;
                gap: 12px;
            }

            /* Proof quote */
            .proof-quote blockquote { font-size: 20px; }

            /* Footer */
            .footer { padding: 40px 0 24px; }

            /* Mobile menu */
            .mobile-menu a { font-size: 20px; padding: 12px 0; }
        }