@font-face {
            font-family: 'SpaceGrotesk';
            src: url('../assets/fonts/SpaceGrotesk-Light.ttf') format('truetype');
            font-weight: 300;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'SpaceGrotesk';
            src: url('../assets/fonts/SpaceGrotesk-Regular.ttf') format('truetype');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'SpaceGrotesk';
            src: url('../assets/fonts/SpaceGrotesk-Medium.ttf') format('truetype');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'SpaceGrotesk';
            src: url('../assets/fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'SpaceGrotesk';
            src: url('../assets/fonts/SpaceGrotesk-Bold.ttf') format('truetype');
            font-weight: 700;
            font-style: normal;
                    font-display: swap;
        }
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --accent: #0000cc;
            --accent-mid: #6600cc;
            --accent-dim: rgba(0, 0, 204, 0.08);
            --accent-border: rgba(0, 0, 204, 0.18);
            --dark: #0D1020;
            --white: #FFFFFF;
            --off-white: #F0F4FC;
            --light-grey: #E8EDF7;
            --text: #1C2340;
            --muted: #6B7280;
            --border: #DDE3EE;
            --font-body: 'Inter', -apple-system, sans-serif;
            --font-heading: 'SpaceGrotesk', -apple-system, sans-serif;
            --radius: 14px;
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font-body);
            background: var(--white);
            color: var(--text);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        /* NAV */
        nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 40px;
            height: 60px;
            background: transparent;
            border-bottom: 1px solid transparent;
            transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
            will-change: background, border-color, box-shadow;
        }

        nav.scrolled {
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            border-bottom: 1px solid rgba(200, 210, 230, 0.45);
            box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 16px rgba(30,50,100,0.07);
        }

        nav.nav-dark.scrolled {
            background: rgba(10, 13, 28, 0.72);
            backdrop-filter: blur(28px) saturate(160%);
            -webkit-backdrop-filter: blur(28px) saturate(160%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
        }
        nav.nav-dark.scrolled .nav-logo-text { color: var(--white); }
        nav.nav-dark.scrolled .btn-nav-ghost {
            border-color: rgba(255,255,255,0.35);
            color: rgba(255,255,255,0.85);
        }
        nav.nav-dark.scrolled .btn-nav-ghost:hover {
            border-color: rgba(255,255,255,0.65);
            background: rgba(255,255,255,0.1);
            color: #fff;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }

        .nav-logo img { height: 44px; width: 44px; object-fit: contain; }

        .nav-logo-text {
            font-family: 'SpaceGrotesk', sans-serif !important;
            font-size: 21px;
            font-weight: 600;
            color: var(--white);
            letter-spacing: -0.3px;
            white-space: nowrap;
            transition: color 0.35s ease;
        }

        nav.scrolled .nav-logo-text { color: var(--dark); }

        .nav-logo-text .seer { font-family: 'SpaceGrotesk', sans-serif !important; font-weight: 300; letter-spacing: 0.3px; }
        .nav-logo-text .mantic { font-family: 'SpaceGrotesk', sans-serif !important; font-weight: 700; }

        .nav-links { display: flex; align-items: center; gap: 8px; }

        .btn-nav-ghost {
            padding: 7px 17px;
            border: 1px solid rgba(255,255,255,0.35);
            border-radius: 8px;
            background: transparent;
            color: rgba(255,255,255,0.85);
            font-size: 13.5px;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            transition: border-color 0.2s, background 0.2s, color 0.2s;
        }

        .btn-nav-ghost:hover { border-color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.1); }

        nav.scrolled .btn-nav-ghost {
            border-color: var(--border);
            color: var(--text);
        }

        nav.scrolled .btn-nav-ghost:hover { border-color: #b0bcdc; background: var(--off-white); }

        .btn-nav-primary {
            padding: 7px 17px;
            border: none;
            border-radius: 8px;
            background: var(--accent);
            color: var(--white);
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: opacity 0.2s, transform 0.15s;
        }

        .btn-nav-primary:hover { opacity: 0.88; transform: translateY(-1px); }

        /* HERO */
        .hero {
            background: var(--dark);
            display: flex;
            align-items: center;
            padding: 140px 80px 120px;
            position: relative;
            overflow: hidden;
        }

        .hero-inner {
            max-width: 1440px;
            width: 100%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            align-items: center;
            gap: 72px;
        }

        .hero-left {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .hero-right {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-glow {
            position: absolute;
            top: 50%; right: -80px;
            transform: translateY(-50%);
            width: 560px; height: 560px;
            background: radial-gradient(ellipse, rgba(102,0,204,0.22) 0%, rgba(0,0,204,0.1) 45%, transparent 70%);
            pointer-events: none;
            border-radius: 50%;
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: rgba(0,0,204,0.12);
            border: 1px solid rgba(102,0,204,0.28);
            border-radius: 100px;
            padding: 6px 15px;
            font-size: 12px;
            font-weight: 600;
            color: #a78bfa;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin-bottom: 28px;
            position: relative;
        }

        .hero-eyebrow::before {
            content: '';
            width: 5px; height: 5px;
            border-radius: 50%;
            background: #a78bfa;
            animation: pulse 2s infinite;
        }

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

        .hero h1 {
            font-family: var(--font-heading);
            font-size: clamp(38px, 3.6vw, 54px);
            font-weight: 700;
            line-height: 1.06;
            letter-spacing: -2px;
            color: var(--white);
            max-width: 560px;
            margin-bottom: 18px;
            position: relative;
            -webkit-text-stroke: 0.65px white;
        }

        .hero h1 .highlight {
            background: linear-gradient(90deg, #6600cc, #8833ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-style: italic;
            -webkit-text-stroke: 0px;
            display: inline-block;
            padding-right: 0.08em;
        }

        .hero-subline {
            font-size: clamp(18px, 1.8vw, 26px);
            font-weight: 600;
            color: rgba(255,255,255,0.74);
            margin-bottom: 28px;
            position: relative;
            height: 1.4em;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            overflow: hidden;
        }

        .hero-subline-text {
            display: inline-block;
            animation: rollIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        @keyframes rollIn {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes rollOut {
            from { opacity: 1; transform: translateY(0); }
            to   { opacity: 0; transform: translateY(-16px); }
        }

        .hero-subline-text.out {
            animation: rollOut 0.32s ease-in both;
        }

        .hero-desc {
            font-size: 14px;
            color: rgba(255,255,255,0.72);
            max-width: 480px;
            line-height: 1.72;
            margin-bottom: 10px;
            position: relative;
        }

        .hero-ctas {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 0;
            margin-bottom: 0;
            position: relative;
        }

        .btn-primary-lg {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 15px 34px;
            background: linear-gradient(135deg, var(--accent), var(--accent-mid));
            color: var(--white);
            font-size: 15px;
            font-weight: 600;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            text-decoration: none;
            transition: opacity 0.2s, transform 0.15s;
        }

        .btn-primary-lg:hover { opacity: 0.9; transform: translateY(-1px); }

        .btn-ghost-lg {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 15px 28px;
            background: transparent;
            color: rgba(255,255,255,0.65);
            font-size: 15px;
            font-weight: 500;
            border: 1px solid rgba(255,255,255,0.13);
            border-radius: 10px;
            cursor: pointer;
            text-decoration: none;
            transition: border-color 0.2s, color 0.2s;
        }

        .btn-ghost-lg:hover { border-color: rgba(255,255,255,0.32); color: var(--white); }

        .hero-hint { font-size: 12px; color: rgba(255,255,255,0.2); position: relative; }

        /* CHAT PREVIEW */
        .chat-preview {
            position: relative;
            width: 100%;
            max-width: 620px;
            will-change: transform;
            transform: perspective(900px) rotateY(-3deg) rotateX(1.5deg);
            transition: transform 0.4s ease;
        }

        .chat-preview:hover {
            transform: perspective(900px) rotateY(-0.5deg) rotateX(0.5deg);
        }

        .chat-preview-window {
            background: rgba(255,255,255,0.035);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 15px;
            overflow: visible;
            box-shadow: 0 32px 72px rgba(0,0,180,0.35), 0 4px 20px rgba(0,0,0,0.5);
        }

        .chat-preview-bar {
            background: rgba(255,255,255,0.04);
            border-bottom: 1px solid rgba(255,255,255,0.07);
            padding: 11px 17px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .chat-dot { width: 9px; height: 9px; border-radius: 50%; }
        .chat-dot.red   { background: #FF5F57; }
        .chat-dot.amber { background: #FFBD2E; }
        .chat-dot.green { background: #28CA41; }

        .chat-bar-title {
            margin-left: auto;
            font-size: 11px;
            color: rgba(255,255,255,0.62);
            font-weight: 500;
        }

        .chat-messages {
            padding: 20px 20px 10px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            min-height: 280px;
        }

        .chat-msg {
            display: flex;
            gap: 9px;
            align-items: flex-start;
            animation: fadeInUp 0.45s ease-out both;
        }

        .chat-msg.user { flex-direction: row-reverse; }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(7px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .chat-msg:nth-child(1) { animation-delay: 0.1s; }
        .chat-msg:nth-child(2) { animation-delay: 0.5s; }
        .chat-msg:nth-child(3) { animation-delay: 0.9s; }
        .chat-msg:nth-child(4) { animation-delay: 1.3s; }

        .chat-avatar {
            width: 26px; height: 26px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px;
            flex-shrink: 0;
        }

        .chat-avatar.ai { background: linear-gradient(135deg, var(--accent), var(--accent-mid)); color: var(--white); font-weight: 700; font-family: var(--font-heading); }
        .chat-avatar.user-av { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.55); }

        .chat-bubble {
            max-width: 78%;
            padding: 10px 14px;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.56;
        }

        .chat-msg.ai .chat-bubble {
            background: rgba(255,255,255,0.055);
            border: 1px solid rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.78);
            border-top-left-radius: 3px;
        }

        .chat-msg.user .chat-bubble {
            background: linear-gradient(135deg, var(--accent), var(--accent-mid));
            color: var(--white);
            font-weight: 600;
            border-top-right-radius: 3px;
        }

        .chat-bubble .stat {
            display: inline-block;
            background: rgba(0,0,204,0.14);
            color: #7eb3ff;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 12px;
        }

        .chat-input-row {
            padding: 8px 18px 16px;
            display: flex;
            gap: 8px;
            align-items: center;
            position: relative;
        }

        .chat-input-fake {
            flex: 1;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 8px;
            padding: 8px 13px;
            font-size: 12.5px;
            color: rgba(255,255,255,0.72);
            font-family: var(--font-body);
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            user-select: none;
            position: relative;
        }

        .chat-input-fake::after {
            content: '';
            display: inline-block;
            width: 1.5px;
            height: 13px;
            background: rgba(167,139,250,0.75);
            border-radius: 1px;
            margin-left: 2px;
            vertical-align: middle;
            animation: blink 1.1s step-end infinite;
        }

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

        .chat-input-fake:hover {
            border-color: rgba(102,0,204,0.45);
            background: rgba(255,255,255,0.08);
        }

        .chat-input-fake.active {
            border-color: rgba(102,0,204,0.6);
            color: rgba(255,255,255,0.7);
        }

        /* QUICK ACTIONS POPUP */
        .quick-actions {
            position: absolute;
            bottom: calc(100% + 6px);
            left: 18px;
            right: 60px;
            background: rgba(18, 16, 38, 0.92);
            backdrop-filter: blur(24px) saturate(160%);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            border: 1px solid rgba(120,80,255,0.25);
            border-radius: 13px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
            padding: 8px;
            pointer-events: none;
            opacity: 0;
            transform: translateY(8px) scale(0.97);
            transform-origin: bottom left;
            transition: opacity 0.22s cubic-bezier(0.22,1,0.36,1), transform 0.22s cubic-bezier(0.22,1,0.36,1);
            z-index: 20;
        }

        .quick-actions.open {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        .qa-section-label {
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.25);
            padding: 4px 8px 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .qa-section-label::before {
            content: '';
            width: 6px; height: 6px;
            border-radius: 50%;
            background: currentColor;
            opacity: 0.6;
        }

        .qa-section-label.agent::before { background: #a78bfa; }
        .qa-section-label.ask::before { background: #7eb3ff; }
        .qa-section-label.agent { color: #a78bfa; }
        .qa-section-label.ask { color: #7eb3ff; }

        .qa-divider {
            height: 1px;
            background: rgba(255,255,255,0.06);
            margin: 4px 0;
        }

        .qa-item {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 8px 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s;
            animation: qaFadeIn 0.28s ease-out both;
        }

        .qa-item:hover { background: rgba(255,255,255,0.07); }
        .qa-item:active { background: rgba(255,255,255,0.11); }

        @keyframes qaFadeIn {
            from { opacity: 0; transform: translateY(4px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .qa-item:nth-child(1) { animation-delay: 0.03s; }
        .qa-item:nth-child(2) { animation-delay: 0.07s; }
        .qa-item:nth-child(3) { animation-delay: 0.11s; }
        .qa-item:nth-child(4) { animation-delay: 0.03s; }
        .qa-item:nth-child(5) { animation-delay: 0.07s; }
        .qa-item:nth-child(6) { animation-delay: 0.11s; }

        .qa-icon {
            width: 26px; height: 26px;
            border-radius: 7px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            font-size: 13px;
        }

        .qa-icon.agent { background: rgba(167,139,250,0.12); color: #a78bfa; }
        .qa-icon.ask   { background: rgba(126,179,255,0.12); color: #7eb3ff; }

        .qa-text { flex: 1; }
        .qa-title { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.85); line-height: 1.2; }
        .qa-desc  { font-size: 10.5px; color: rgba(255,255,255,0.3); margin-top: 1px; }

        .qa-badge {
            font-size: 9px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 100px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        .qa-badge.agent { background: rgba(167,139,250,0.15); color: #a78bfa; }
        .qa-badge.ask   { background: rgba(126,179,255,0.15); color: #7eb3ff; }

        .chat-send-btn {
            width: 32px; height: 32px;
            background: linear-gradient(135deg, var(--accent), var(--accent-mid));
            border: none;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            cursor: default;
        }

        /* TICKER */
        .ticker-section {
            padding: 32px 0;
            border-bottom: 1px solid var(--border);
            overflow: hidden;
            background: var(--white);
        }

        .ticker-label {
            text-align: center;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.7px;
            text-transform: uppercase;
            color: #9BAAC8;
            margin-bottom: 18px;
        }

        .ticker-track {
            display: flex;
            gap: 52px;
            animation: ticker 30s linear infinite;
            width: max-content;
            will-change: transform;
        }

        @keyframes ticker {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
        }

        .ticker-track span {
            font-size: 13px;
            font-weight: 500;
            color: #B4C2DC;
            white-space: nowrap;
        }

        /* SHARED SECTION */
        .section { padding: 88px 40px; }
        .section-inner { max-width: 1200px; margin: 0 auto; }

        .section-eyebrow {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--accent);
            background: var(--accent-dim);
            border-radius: 100px;
            padding: 4px 11px;
            margin-bottom: 14px;
        }

        .section-title {
            font-family: var(--font-heading);
            font-size: clamp(22px, 3vw, 34px);
            font-weight: 700;
            letter-spacing: -0.6px;
            line-height: 1.18;
            margin-bottom: 12px;
            color: var(--text);
            -webkit-text-stroke: 0.5px currentColor;
        }

        .section-sub {
            font-size: 15px;
            color: #4B5563;
            max-width: 460px;
            line-height: 1.72;
            margin-bottom: 48px;
        }

        /* HERO FEATURE PILLS */
        .hero-features {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 0;
            margin-top: 12px;
            margin-bottom: 32px;
        }
        .hero-feat {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 13px;
            color: rgba(255,255,255,0.5);
            font-weight: 500;
        }
        .hero-feat svg { opacity: 0.7; flex-shrink: 0; }
        .hero-feat-dot {
            width: 3px; height: 3px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            margin: 0 10px;
        }

        /* PAIN POINTS */
        .pain-section {
            background: var(--dark);
            padding: 96px 0;
            position: relative;
            overflow: hidden;
        }

        /* Background blobs — give the glass something to refract */
        .pain-section::before,
        .pain-section::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            pointer-events: none;
            z-index: 0;
        }
        .pain-section::before {
            width: 520px;
            height: 520px;
            background: radial-gradient(circle, rgba(102,0,204,0.35) 0%, transparent 70%);
            top: -120px;
            left: -80px;
        }
        .pain-section::after {
            width: 440px;
            height: 440px;
            background: radial-gradient(circle, rgba(0,0,204,0.3) 0%, transparent 70%);
            bottom: -100px;
            right: 10%;
        }

        .pain-section .section-inner {
            position: relative;
            z-index: 1;
        }

        .pain-section .section-eyebrow {
            color: rgba(255,255,255,0.45);
        }
        .pain-section .section-eyebrow::before {
            background: rgba(255,255,255,0.3);
        }

        .pain-headline {
            font-family: var(--font-heading);
            font-size: clamp(28px, 3vw, 44px);
            font-weight: 700;
            color: #fff;
            letter-spacing: -1px;
            line-height: 1.15;
            max-width: 720px;
            margin: 0 0 16px;
            -webkit-text-stroke: 0.65px white;
        }

        .pain-headline em {
            font-style: normal;
            color: #a78bfa;
            -webkit-text-stroke: 0;
        }

        .pain-subline {
            font-size: 16px;
            color: rgba(255,255,255,0.45);
            margin: 0 0 64px;
            max-width: 520px;
            line-height: 1.65;
        }

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

        .pain-card {
            background: linear-gradient(
                145deg,
                rgba(255,255,255,0.11) 0%,
                rgba(255,255,255,0.04) 60%,
                rgba(255,255,255,0.07) 100%
            );
            backdrop-filter: blur(28px) saturate(160%);
            -webkit-backdrop-filter: blur(28px) saturate(160%);
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.14);
            /* Top-edge specular highlight */
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.22),
                inset 0 -1px 0 rgba(0,0,0,0.1),
                0 8px 32px rgba(0,0,0,0.35),
                0 2px 8px rgba(0,0,0,0.2);
            padding: 36px 32px;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                        box-shadow 0.3s cubic-bezier(0.22,1,0.36,1);
        }

        /* Subtle shimmer overlay — mimics glass surface refraction */
        .pain-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 20px;
            background: linear-gradient(
                135deg,
                rgba(255,255,255,0.08) 0%,
                transparent 50%,
                rgba(255,255,255,0.03) 100%
            );
            pointer-events: none;
        }

        .pain-card:hover {
            transform: translateY(-4px);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.28),
                inset 0 -1px 0 rgba(0,0,0,0.1),
                0 20px 48px rgba(0,0,0,0.45),
                0 4px 16px rgba(102,0,204,0.18);
        }

        .pain-num {
            font-family: var(--font-heading);
            font-size: 64px;
            font-weight: 700;
            color: rgba(255,255,255,0.07);
            line-height: 1;
            margin-bottom: 20px;
            letter-spacing: -2px;
        }

        .pain-card h3,
        .pain-card h4 {
            font-family: var(--font-heading);
            font-size: 17px;
            font-weight: 700;
            color: #fff;
            margin: 0 0 10px;
            letter-spacing: -0.3px;
            -webkit-text-stroke: 0.5px white;
        }

        .pain-card p {
            font-size: 14px;
            color: rgba(255,255,255,0.52);
            line-height: 1.7;
            margin: 0;
        }

        .pain-bridge {
            margin-top: 48px;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .pain-bridge-line {
            flex: 1;
            height: 1px;
            background: rgba(255,255,255,0.1);
        }

        .pain-bridge p {
            font-size: 15px;
            font-weight: 600;
            color: rgba(255,255,255,0.6);
            white-space: nowrap;
        }

        .pain-bridge p span {
            color: #a78bfa;
        }

        /* FEATURES */
        .features-section { background: var(--off-white); }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .feature-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 30px 30px 0;
            transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            will-change: transform;
        }

        .feature-card:hover {
            box-shadow: 0 8px 32px rgba(0,0,180,0.07);
            border-color: rgba(0,0,204,0.18);
            transform: translateY(-2px);
        }

        .feature-card-header {
            display: flex;
            align-items: center;
            gap: 13px;
            margin-bottom: 12px;
        }

        .feature-icon {
            width: 42px; height: 42px;
            border-radius: 11px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }

        .feature-icon.orange { background: #FF6B35; }
        .feature-icon.blue   { background: #0066FF; }
        .feature-icon.green  { background: #22C55E; }
        .feature-icon.purple { background: #7C3AED; }

        .feature-card h3 {
            font-family: var(--font-heading);
            font-size: 20px;
            font-weight: 700;
            color: var(--text);
            letter-spacing: -0.4px;
            -webkit-text-stroke: 0.5px currentColor;
        }

        .feature-card > p {
            font-size: 14px;
            color: var(--muted);
            line-height: 1.68;
            margin-bottom: 24px;
            max-width: 420px;
        }

        .feature-visual {
            background: #F0F4FC;
            border-radius: 12px 12px 0 0;
            border: 1px solid var(--border);
            border-bottom: none;
            padding: 20px 20px 0;
            min-height: 200px;
            overflow: hidden;
            margin-top: auto;
        }

        /* Compliance SVG scroll animations */
        #score-arc {
            transition: stroke-dashoffset 1.6s cubic-bezier(0.34, 1.2, 0.64, 1);
        }
        .svg-row {
            opacity: 0;
            transform: translateY(5px);
            transition: opacity 0.45s ease, transform 0.45s ease;
        }
        .svg-row.sv-vis { opacity: 1; transform: translateY(0); }
        .svg-badge-g {
            opacity: 0;
            transform-box: fill-box;
            transform-origin: center;
            transform: scale(0.8);
            transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .svg-badge-g.sv-vis { opacity: 1; transform: scale(1); }

        /* COMPLIANCE SECTION */
        .compliance-section {
            background: var(--dark);
            padding: 0;
            overflow: hidden;
        }

        .compliance-header {
            text-align: center;
            padding: 72px 40px 48px;
        }

        .compliance-section .section-title { color: #fff; }
        .compliance-section .section-eyebrow {
            color: rgba(255,255,255,0.82);
        }
        .compliance-section .section-eyebrow::before {
            background: rgba(255,255,255,0.3);
        }

        .compliance-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 560px;
            align-items: stretch;
        }

        .compliance-half {
            padding: 72px 64px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .compliance-half.dark {
            background: #0D1020;
            position: relative;
            overflow: hidden;
        }

        .compliance-half.dark::before {
            content: '';
            position: absolute;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0,0,204,0.25) 0%, transparent 70%);
            bottom: -100px;
            right: -80px;
            pointer-events: none;
        }

        .compliance-half.light {
            background: var(--off-white);
            border-left: none;
            margin: 0;
            border-radius: 0;
        }

        .compliance-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 5px 12px;
            border-radius: 999px;
            margin-bottom: 24px;
            width: fit-content;
        }

        .compliance-badge.blue {
            background: rgba(0,0,204,0.15);
            color: #818cf8;
            border: 1px solid rgba(99,102,241,0.25);
        }

        .compliance-badge.purple {
            background: rgba(102,0,204,0.1);
            color: #6D28D9;
            border: 1px solid rgba(167,139,250,0.25);
        }

        .compliance-half h3 {
            font-family: var(--font-heading);
            font-size: clamp(24px, 2.2vw, 34px);
            font-weight: 700;
            line-height: 1.18;
            letter-spacing: -0.7px;
            margin: 0 0 14px;
            -webkit-text-stroke: 0.5px currentColor;
        }

        .compliance-half.dark h3 { color: #fff; }
        .compliance-half.light h3 { color: var(--text); }

        .compliance-half p {
            font-size: 15px;
            line-height: 1.7;
            margin: 0 0 32px;
            max-width: 400px;
        }

        .compliance-half.dark p { color: rgba(255,255,255,0.5); }
        .compliance-half.light p { color: #374151; }

        .compliance-visual {
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0,0,0,0.18);
            margin-top: auto;
        }

        .compliance-half.dark .compliance-visual {
            box-shadow: 0 8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
        }

        .compliance-pill-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 32px;
        }

        .compliance-pill {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13.5px;
            font-weight: 500;
        }

        .compliance-half.dark .compliance-pill { color: rgba(255,255,255,0.75); }
        .compliance-half.light .compliance-pill { color: var(--text); }

        .cpill-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        @media (max-width: 860px) {
            .compliance-split { grid-template-columns: 1fr; }
            .compliance-half { padding: 52px 20px; }
            .compliance-half.light { border-left: none; border-top: 1px solid var(--border); margin: 0 16px 16px; border-radius: 16px; }
            .compliance-visual { margin-left: -20px; margin-right: -20px; border-radius: 14px; }
            .compliance-visual svg { width: 100%; height: auto; }
        }

        /* HOW IT WORKS — TABBED */
        .how-section { background: var(--white); }

        .how-tabs-nav {
            display: flex;
            gap: 0;
            border-bottom: 1px solid var(--border);
            margin-bottom: 52px;
            margin-top: 40px;
        }

        .how-tab-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 0 16px 20px;
            cursor: pointer;
            border: none;
            background: none;
            position: relative;
            border-bottom: 3px solid transparent;
            margin-bottom: -1px;
            transition: border-color 0.2s;
        }

        .how-tab-btn .tab-icon {
            width: 44px; height: 44px;
            display: flex; align-items: center; justify-content: center;
            color: #9BAAC8;
            transition: color 0.2s;
        }

        .how-tab-btn .tab-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            text-align: center;
            line-height: 1.38;
            transition: color 0.2s;
        }

        .how-tab-btn:hover .tab-icon,
        .how-tab-btn:hover .tab-label { color: var(--text); }

        .how-tab-btn.active {
            border-bottom-color: rgba(0,0,204,0.12);
        }
        .how-tab-btn.active .tab-icon { color: var(--accent); }
        .how-tab-btn.active .tab-label { color: var(--text); font-weight: 700; }

        /* Progress bar */
        .how-tab-btn::before {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--accent);
            border-radius: 2px;
            z-index: 1;
            transform-origin: left center;
            transform: scaleX(0);
            will-change: transform;
        }
        .how-tab-btn.active::before {
            animation: tabProgress 4s linear forwards;
        }
        .how-tab-btn.paused::before {
            animation-play-state: paused;
        }
        @keyframes tabProgress {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }

        /* Panels wrapper — grid stacking so all panels share the same space */
        .how-panels-wrapper {
            display: grid;
        }

        .how-panel {
            grid-area: 1 / 1;
            display: grid;
            grid-template-columns: 1fr 1.05fr;
            gap: 64px;
            align-items: center;
            opacity: 0;
            transform: translateY(14px);
            /* visibility hides only AFTER the fade-out finishes (0.45s delay) */
            transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                        visibility 0s linear 0.45s;
            pointer-events: none;
            visibility: hidden;
        }

        .how-panel.active {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
            visibility: visible;
            /* visibility becomes visible IMMEDIATELY on the incoming panel */
            transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                        visibility 0s linear 0s;
        }

        .how-panel-left h3 {
            font-family: var(--font-heading);
            font-size: clamp(26px, 2.4vw, 36px);
            font-weight: 700;
            color: var(--text);
            letter-spacing: -0.8px;
            line-height: 1.18;
            margin-bottom: 16px;
            -webkit-text-stroke: 0.5px currentColor;
        }

        .how-panel-left p {
            font-size: 15px;
            color: var(--muted);
            line-height: 1.72;
            margin-bottom: 24px;
            max-width: 420px;
        }

        .how-check-list {
            list-style: none;
            margin: 0 0 32px;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .how-check-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 14px;
            color: var(--text);
            line-height: 1.5;
        }

        .how-check-list li::before {
            content: '';
            display: block;
            flex-shrink: 0;
            width: 18px; height: 18px;
            margin-top: 1px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' fill='%230000CC' fill-opacity='.1'/%3E%3Cpath d='M6 10.5l3 3 5-5' stroke='%230000CC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
        }

        .how-panel-visual {
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid var(--border);
            box-shadow: 0 8px 40px rgba(0,0,100,0.08);
        }
        .how-panel-visual svg { display: block; width: 100%; }

        @media (max-width: 900px) {
            .how-panel.active { grid-template-columns: 1fr; }
            .how-panel-visual { display: none; }
            .how-tab-btn .tab-label { font-size: 11px; }
        }

        /* CMS SECTION */
        .cms-section { background: var(--off-white); padding: 100px 40px; }
        .cms-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: center;
            max-width: 1120px;
            margin: 0 auto;
        }
        .cms-copy { max-width: 480px; }
        .cms-copy .section-title { margin-bottom: 16px; }
        .cms-copy p { font-size: 16px; line-height: 1.7; color: #374151; margin-bottom: 32px; }
        .cms-features { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 14px; }
        .cms-features li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            font-size: 15px;
            color: var(--text);
            font-weight: 500;
        }
        .cms-features li .cms-check {
            flex-shrink: 0;
            width: 22px; height: 22px;
            background: linear-gradient(135deg, var(--accent), var(--accent-mid));
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            margin-top: 1px;
        }
        .cms-features li .cms-check svg { display: block; }
        .cms-visual {
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 12px 40px rgba(30,50,120,0.10);
            overflow: hidden;
        }
        .cms-visual svg { display: block; width: 100%; }
        @media (max-width: 860px) {
            .cms-split { grid-template-columns: 1fr; gap: 40px; }
            .cms-copy { max-width: 100%; }
        }

        /* STATS */
        .stats-section { position: relative; background: var(--dark); padding: 130px 40px; overflow: hidden; }
        .stats-bg-video {
            position: absolute;
            inset: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            opacity: 0.22;
            pointer-events: none;
            z-index: 0;
        }
        .stats-bg-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0,0,30,0.72) 0%, rgba(10,0,40,0.65) 100%);
            z-index: 1;
            pointer-events: none;
        }
        .stats-section .section-inner { position: relative; z-index: 2; }
        .stats-section .section-title { color: var(--white); }
        .stats-section .section-eyebrow { background: rgba(0,0,204,0.14); color: #a78bfa; }

        .stats-grid {
            display: flex;
            justify-content: center;
            margin-top: 56px;
            flex-wrap: wrap;
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: var(--radius);
            overflow: hidden;
        }

        .stat-item {
            flex: 1;
            min-width: 200px;
            padding: 60px 36px;
            text-align: center;
            border-right: 1px solid rgba(255,255,255,0.07);
        }

        .stat-item:last-child { border-right: none; }

        .stat-number {
            font-family: var(--font-heading);
            font-size: clamp(36px, 5vw, 60px);
            font-weight: 700;
            letter-spacing: -2px;
            background: linear-gradient(90deg, #6eb4ff, #a78bfa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
            margin-bottom: 12px;
        }

        .stat-label {
            font-size: 14px;
            color: rgba(255,255,255,0.5);
            line-height: 1.6;
            max-width: 180px;
            margin: 0 auto;
        }

        /* REVIEWS */
        .reviews-section {
            padding: 130px 40px 140px;
            background: var(--off-white);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
        }
        .reviews-header {
            text-align: center;
            margin-bottom: 72px;
        }
        .reviews-header .section-title { margin-bottom: 10px; }
        .reviews-header .section-sub { margin: 0 auto; color: #4B5563; }
        .reviews-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .review-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 44px 36px 36px;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: box-shadow 0.25s, transform 0.25s;
            position: relative;
            will-change: transform;
        }
        .review-card::before {
            content: '\201C';
            position: absolute;
            top: 20px;
            right: 28px;
            font-size: 80px;
            font-family: Georgia, serif;
            line-height: 1;
            color: rgba(102,0,204,0.1);
            pointer-events: none;
        }
        .review-card:hover {
            box-shadow: 0 12px 40px rgba(0,0,204,0.1);
            transform: translateY(-4px);
        }
        .review-stars {
            display: flex;
            gap: 3px;
            margin-bottom: 22px;
        }
        .review-stars svg { color: #f59e0b; }
        .review-text {
            font-size: 15.5px;
            line-height: 1.75;
            color: var(--text);
            font-weight: 450;
            flex: 1;
            margin-bottom: 32px;
        }
        .review-author {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-top: auto;
            padding-top: 24px;
            border-top: 1px solid var(--border);
        }
        .review-avatar {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0;
        }
        .review-name {
            font-size: 14px;
            font-weight: 650;
            color: var(--text);
            line-height: 1.3;
        }
        .review-role {
            font-size: 12.5px;
            color: var(--muted);
            margin-top: 3px;
        }
        @media (max-width: 1000px) {
            .reviews-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 620px) {
            .reviews-section { padding: 64px 0 72px; }
            .reviews-header { margin-bottom: 40px; padding: 0 20px; }
            .reviews-grid {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                gap: 16px;
                padding: 0 20px 16px;
                scrollbar-width: none;
            }
            .reviews-grid::-webkit-scrollbar { display: none; }
            .reviews-grid .review-card {
                min-width: 85vw;
                max-width: 85vw;
                scroll-snap-align: center;
                flex-shrink: 0;
            }
            .reviews-dots {
                display: flex;
                justify-content: center;
                gap: 8px;
                margin-top: 20px;
                padding: 0 20px;
            }
            .reviews-dots .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--border);
                transition: background 0.3s, transform 0.3s;
            }
            .reviews-dots .dot.active {
                background: var(--accent);
                transform: scale(1.25);
            }
        }
        .reviews-dots { display: none; }

        /* CTA */
        .cta-section {
            padding: 100px 40px 48px;
            text-align: center;
            background: var(--dark);
            position: relative;
            overflow: hidden;
        }

        .cta-glow {
            position: absolute;
            top: 30%; left: 50%;
            transform: translate(-50%, -50%);
            width: 600px; height: 300px;
            background: radial-gradient(ellipse, rgba(102,0,204,0.15) 0%, rgba(0,0,204,0.07) 50%, transparent 70%);
            pointer-events: none;
        }

        .cta-section .section-title { color: var(--white); font-size: clamp(22px, 3.2vw, 36px); margin-bottom: 12px; }
        .cta-section .section-eyebrow { background: rgba(0,0,204,0.14); color: #a78bfa; }

        .cta-desc { font-size: 14.5px; color: rgba(255,255,255,0.38); margin-bottom: 32px; position: relative; }

        .cta-buttons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; position: relative; }
        .cta-section .btn-ghost-lg { color: rgba(255,255,255,0.52); border-color: rgba(255,255,255,0.11); }

        /* FOOTER */
        footer {
            padding: 28px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            background: var(--dark);
        }

        .footer-logo { display: flex; align-items: center; gap: 7px; text-decoration: none; }
        .footer-logo img { height: 28px; width: 28px; object-fit: contain; }
        .footer-logo-name { font-family: 'SpaceGrotesk', sans-serif !important; font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -0.2px; white-space: nowrap; }
        .footer-logo-name .seer { font-family: 'SpaceGrotesk', sans-serif !important; font-weight: 300; letter-spacing: 0.3px; }
        .footer-logo-name .mantic { font-family: 'SpaceGrotesk', sans-serif !important; font-weight: 700; }
        .footer-copy { font-size: 12px; color: rgba(255,255,255,0.75); }
        .footer-links { display: flex; gap: 18px; }
        .footer-links a { font-size: 12px; color: rgba(255,255,255,0.35); text-decoration: none; transition: color 0.2s; }
        .footer-links a:hover { color: rgba(255,255,255,0.7); }

        /* NARROW DESKTOP */
        @media (max-width: 1200px) {
            .hero { padding: 120px 48px 80px; }
            .hero-inner { gap: 40px; grid-template-columns: 1fr 1fr; }
            .pain-section { padding: 80px 32px; }
        }

        /* TABLET — hero stacks, pain to 2 columns */
        @media (max-width: 1000px) {
            .hero { padding: 100px 28px 48px; }
            .hero-inner { grid-template-columns: 1fr; gap: 0; }
            .hero-right { display: flex; margin-top: 32px; justify-content: center; }
            .hero-right .chat-preview { transform: none; max-width: 560px; width: 100%; }
            .hero-right .quick-actions { display: none; }
            .hero-right .chat-msg:nth-child(n+3) { display: none; }
            .hero-left { align-items: center; text-align: center; width: 100%; }
            .hero-eyebrow { align-self: center; }
            .hero h1 { font-size: clamp(28px, 5.5vw, 44px); letter-spacing: -0.5px; max-width: 100%; text-align: center; }
            .hero-subline { justify-content: center; font-size: clamp(16px, 3.5vw, 24px); text-align: center; margin-bottom: 16px; }
            .hero-desc { display: none; }
            .hero-features { display: grid; grid-template-columns: auto auto; gap: 8px 10px; justify-content: center; margin-top: 0; margin-bottom: 20px; }
            .hero-feat-dot { display: none; }
            .hero-feat {
                background: rgba(255,255,255,0.06);
                border: 1px solid rgba(255,255,255,0.08);
                border-radius: 100px;
                padding: 6px 14px;
                font-size: 12px;
                gap: 6px;
            }
            .hero-ctas { justify-content: center; }
            .hero-ctas .btn-ghost-lg { display: none; }
            .pain-section { padding: 64px 24px; }
            .pain-grid { grid-template-columns: 1fr 1fr; }
            .pain-bridge { flex-wrap: wrap; justify-content: center; }
            .pain-bridge-line { display: none; }
            .pain-bridge p { white-space: normal; text-align: center; font-size: 14px; }
        }

        /* LARGE SCREENS (1440px+) */
        @media (min-width: 1440px) {
            nav { padding: 0 60px; height: 72px; }
            .hero { padding: 0 100px; min-height: 100vh; }
            .hero-inner {
                max-width: 1560px;
                grid-template-columns: 1.15fr 1fr;
                gap: 100px;
            }
            .hero h1 {
                font-size: clamp(56px, 3.6vw, 68px);
                max-width: none;
                letter-spacing: -3px;
            }
            .hero-subline { font-size: clamp(22px, 1.6vw, 30px); }
            .hero-desc { font-size: 16px; max-width: 560px; }
            .section { padding: 110px 60px; }
            .section-inner { max-width: 1360px; }
            .section-title { font-size: clamp(30px, 2.4vw, 44px); }
            .section-sub { font-size: 17px; max-width: 560px; }
        }

        /* RESPONSIVE */
        @media (max-width: 900px) {
            /* NAV */
            nav { padding: 0 20px; }

            /* FEATURES */
            .section, .stats-section, .reviews-section, .cta-section { padding: 64px 20px; }
            .features-grid { grid-template-columns: 1fr 1fr; }
            .feature-visual { min-height: auto; padding: 16px 16px 0; }

            /* HOW IT WORKS */
            .how-tab-btn { padding: 0 10px 16px; }
            .how-tab-btn .tab-label { display: none; }
            .how-tab-btn .tab-icon { width: 38px; height: 38px; }
            .how-tabs-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: center; }
            .how-panel { grid-template-columns: 1fr; }
            .how-panel.active { grid-template-columns: 1fr; }
            .how-panel-visual { display: none; }

            /* CMS */
            .cms-section { padding: 64px 24px; }
            .cms-split { grid-template-columns: 1fr; gap: 40px; }
            .cms-copy { max-width: 100%; }
            .cms-visual { display: none; }

            /* STATS */
            .stats-section { padding: 64px 20px; }
            .stats-grid { flex-direction: column; }
            .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
            .stat-item:last-child { border-bottom: none; }

            /* COMPLIANCE */
            .compliance-header { padding: 52px 20px 36px; }
            .compliance-split { grid-template-columns: 1fr; }
            .compliance-half { padding: 52px 20px; }
            .compliance-half.light { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 0 16px 16px; border-radius: 16px; }
            .compliance-visual { margin-left: -8px; margin-right: -8px; }
            .compliance-visual svg { width: 100%; height: auto; }

            /* CTA */
            .cta-section { padding: 64px 24px 40px; }

            /* FOOTER */
            footer { padding: 28px 24px; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
            .footer-links { justify-content: center; }
        }

        @media (max-width: 600px) {
            /* NAV */
            .nav-logo-text { display: inline; font-size: 18px; }
            .nav-logo img { height: 36px; width: 36px; }

            /* HERO */
            .hero { padding: 88px 18px 40px; }
            .hero h1 { font-size: clamp(24px, 8vw, 36px); letter-spacing: -0.5px; }
            .hero-features { gap: 8px 0; }
            .hero-eyebrow { font-size: 11px; padding: 5px 12px; }
            .hero-right .chat-preview { transform: none; }

            /* FEATURES */
            .features-grid { grid-template-columns: 1fr; }
            .feature-visual { min-height: auto; padding: 14px 14px 0; }
            .feature-card { padding: 24px 24px 0; }
            .feature-card > p { margin-bottom: 18px; }

            /* PAIN */
            .pain-section { padding: 52px 16px; }
            .pain-grid { grid-template-columns: 1fr; gap: 12px; }
            .pain-card { padding: 28px 22px; }

            /* HOW */
            .how-tabs-nav { gap: 0; justify-content: center; }
            .how-tab-btn .tab-label { display: none; }
            .how-tab-btn .tab-icon { width: 36px; height: 36px; }

            /* SECTION PADDING */
            .section, .stats-section, .reviews-section, .cta-section { padding: 52px 18px; }
            .cms-section { padding: 52px 18px; }
            .stats-section { padding: 52px 18px; }
            footer { padding: 24px 18px; }
        }