/* ============================================================
           AI-Native UI · yun800.com Landing Page
           Design tokens · WCAG AA · prefers-reduced-motion
           ============================================================ */
        :root {
            --aiox-bg: #0a0a1a;
            --aiox-bg-2: #0f0f23;
            --aiox-bg-elevated: rgba(20, 17, 45, 0.65);
            --aiox-bg-card: rgba(15, 12, 35, 0.55);
            --aiox-fg: #f5f3ff;
            --aiox-fg-2: #ddd6fe;
            --aiox-fg-muted: #a78bfa;
            --aiox-fg-dim: #7c6cb6;
            --aiox-accent: #7c3aed;
            --aiox-accent-2: #0891b2;
            --aiox-accent-3: #06b6d4;
            --aiox-border: rgba(167, 139, 250, 0.18);
            --aiox-border-strong: rgba(167, 139, 250, 0.35);
            --aiox-glow-p: 0 0 24px rgba(124, 58, 237, 0.4);
            --aiox-glow-c: 0 0 24px rgba(8, 145, 178, 0.4);
            --aiox-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            --aiox-radius: 14px;
            --aiox-radius-lg: 20px;
            --aiox-radius-sm: 10px;
            --aiox-ease: cubic-bezier(0.16, 1, 0.3, 1);
            --aiox-mono: 'Fira Code', 'JetBrains Mono', monospace;
            --aiox-sans: 'Fira Sans', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
        }

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

        html, body {
            background: var(--aiox-bg);
            color: var(--aiox-fg);
            font-family: var(--aiox-sans);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        /* 光晕允许超出视口绘制，但不能撑出横向滚动区域。 */
        html, body { overflow-x: clip; }
        .hero-content > * { min-width: 0; }

        /* ---------- Background FX ---------- */
        .aiox-bg-grid {
            position: fixed; inset: 0; z-index: 0;
            background-image:
                linear-gradient(rgba(124, 58, 237, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(124, 58, 237, 0.05) 1px, transparent 1px);
            background-size: 48px 48px;
            -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 80%);
                    mask-image: radial-gradient(circle at center, black 20%, transparent 80%);
            pointer-events: none;
        }
        .aiox-bg-glow {
            position: fixed; z-index: 0;
            border-radius: 50%;
            filter: blur(120px);
            pointer-events: none;
        }
        .aiox-bg-glow--1 { top: -20vh; left: -10vw; width: 60vmax; height: 60vmax;
            background: rgba(124, 58, 237, 0.35); }
        .aiox-bg-glow--2 { bottom: -30vh; right: -15vw; width: 60vmax; height: 60vmax;
            background: rgba(8, 145, 178, 0.22); }

        /* ---------- Lang Selector ---------- */
        .lang-selector {
            display: flex;
            align-items: center;
        }
        .lang-selector select {
            padding: 8px 32px 8px 14px;
            background: var(--aiox-bg-elevated);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--aiox-border);
            border-radius: var(--aiox-radius-sm);
            color: var(--aiox-fg-2);
            font-size: 13px;
            font-family: var(--aiox-mono);
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a78bfa' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            transition: border-color 200ms var(--aiox-ease);
        }
        .lang-selector select:hover { border-color: var(--aiox-border-strong); }

        /* ---------- Layout ---------- */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

        /* ---------- Header ---------- */
        header {
            position: sticky; top: 0; z-index: 100;
            padding: 16px 0;
            background: rgba(10, 10, 26, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--aiox-border);
        }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .header-left { display: flex; align-items: center; gap: 42px; }
        .header-actions { display: flex; align-items: center; gap: 12px; }
        .logo {
            display: flex; align-items: center; gap: 12px;
            text-decoration: none; color: var(--aiox-fg);
        }
        .logo-icon {
            width: 44px; height: 44px;
            background: linear-gradient(135deg, var(--aiox-accent), var(--aiox-accent-2));
            border-radius: 12px;
            box-shadow: var(--aiox-glow-p);
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
            position: relative;
        }
        .logo-icon img {
            width: 100%; height: 100%; object-fit: contain;
            position: relative; z-index: 1;
        }
        /* Monogram fallback: visible only when the brand <img> is hidden
           (e.g. 404 on local preview) or fails to load. The onerror
           handler in markup sets display:none on the <img>, so we use the
           adjacent-sibling combinator to reveal the monogram. */
        .logo-icon .logo-monogram {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Fira Sans', 'PingFang SC', system-ui, sans-serif;
            font-size: 22px; font-weight: 700;
            color: #fff;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
            z-index: 0;
        }
        .logo-icon img[style*="display: none"] + .logo-monogram,
        .logo-icon img[style*="display:none"] + .logo-monogram {
            z-index: 2;
        }
        .logo-text {
            font-family: var(--aiox-mono);
            font-size: 25px; font-weight: 700;
            letter-spacing: 0.6px;
            background: linear-gradient(135deg, var(--aiox-accent) 0%, var(--aiox-accent-3) 100%);
            -webkit-background-clip: text;
                    background-clip: text;
            -webkit-text-fill-color: transparent;
                    color: transparent;
            text-shadow: 0 0 16px rgba(124, 58, 237, 0.35);
        }
        .nav-buttons { display: flex; gap: 18px; align-items: center; }
        .nav-link { color: var(--aiox-fg-muted); font-size: 14px; font-weight: 600; text-decoration: none; transition: color 200ms var(--aiox-ease); }
        .nav-link:hover, .nav-link.active { color: var(--aiox-accent-3); }
        .nav-login { margin-left: 6px; padding: 9px 18px; border: 1px solid var(--aiox-border-strong); border-radius: var(--aiox-radius-sm); color: var(--aiox-fg); text-decoration: none; font-size: 14px; font-weight: 600; transition: all 200ms var(--aiox-ease); }
        .nav-login:hover { border-color: var(--aiox-accent); background: rgba(167, 139, 250, 0.08); }
        .nav-status {
            display: inline-flex; align-items: center; gap: 6px;
            font-family: var(--aiox-mono);
            font-size: 11px; color: var(--aiox-fg-muted);
            margin-right: 6px;
        }
        .nav-status::before {
            content: ''; width: 6px; height: 6px; border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 8px #22c55e;
            animation: aiox-pulse 2s ease-in-out infinite;
        }
        @keyframes aiox-pulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; }
        }

        /* ---------- Buttons ---------- */
        .btn {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 8px;
            padding: 11px 22px;
            border-radius: var(--aiox-radius-sm);
            font-size: 14px; font-weight: 600;
            font-family: inherit;
            text-decoration: none;
            cursor: pointer;
            transition: all 200ms var(--aiox-ease);
            border: 1px solid transparent;
            white-space: nowrap;
        }
        .btn-primary {
            background: linear-gradient(90deg, var(--aiox-accent), var(--aiox-accent-2));
            color: #fff;
            box-shadow: var(--aiox-glow-p);
        }
        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 0 32px rgba(124, 58, 237, 0.6);
        }
        .btn-outline {
            background: var(--aiox-bg-elevated);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: var(--aiox-fg);
            border: 1px solid var(--aiox-border-strong);
        }
        .btn-outline:hover {
            border-color: var(--aiox-fg-muted);
            background: rgba(124, 58, 237, 0.15);
        }
        .btn-arrow::after {
            content: '→'; transition: transform 200ms var(--aiox-ease);
        }
        .btn-arrow:hover::after { transform: translateX(4px); }

        /* ---------- Hero ---------- */
        .hero {
            padding: 100px 0 80px;
            position: relative;
        }
        .hero-content {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 60px;
            align-items: center;
        }
        .hero-text h1 {
            font-family: var(--aiox-sans);
            font-size: 52px;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 20px;
            color: var(--aiox-fg);
            letter-spacing: -1px;
        }
        .hero-text h1 span {
            background: linear-gradient(90deg, var(--aiox-accent), var(--aiox-accent-3));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
        }
        .hero-eyebrow {
            display: inline-flex; align-items: center; gap: 8px;
            font-family: var(--aiox-mono);
            font-size: 12px; color: var(--aiox-fg-muted);
            padding: 6px 12px;
            background: rgba(124, 58, 237, 0.1);
            border: 1px solid var(--aiox-border);
            border-radius: 999px;
            margin-bottom: 20px;
        }
        .hero-eyebrow::before {
            content: '●'; color: var(--aiox-accent);
            animation: aiox-pulse 2s ease-in-out infinite;
        }
        .hero-text p {
            font-size: 17px; color: var(--aiox-fg-2);
            margin-bottom: 36px; max-width: 540px;
        }
        .hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }

        /* ---------- Hero card (chat preview) ---------- */
        .hero-image { position: relative; }
        .hero-card {
            background: var(--aiox-bg-elevated);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--aiox-border-strong);
            border-radius: var(--aiox-radius-lg);
            padding: 24px;
            box-shadow: var(--aiox-shadow);
            position: relative;
            overflow: hidden;
        }
        .hero-card::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent, var(--aiox-accent), transparent);
        }
        .hero-card-header {
            display: flex; align-items: center; gap: 10px;
            padding-bottom: 16px;
            margin-bottom: 16px;
            border-bottom: 1px solid var(--aiox-border);
        }
        .status-dot {
            width: 10px; height: 10px; border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 8px #22c55e;
            animation: aiox-pulse 2s ease-in-out infinite;
        }
        .hero-card-header span {
            font-family: var(--aiox-mono);
            font-size: 12px; color: var(--aiox-fg-muted);
            letter-spacing: 0.4px;
        }
        .chat-messages { display: flex; flex-direction: column; gap: 12px; }
        .message {
            max-width: 85%;
            padding: 10px 14px;
            border-radius: 12px;
            font-size: 14px;
            line-height: 1.5;
            animation: aiox-rise 500ms var(--aiox-ease) both;
        }
        .message:nth-child(1) { animation-delay: 100ms; }
        .message:nth-child(2) { animation-delay: 300ms; }
        .message:nth-child(3) { animation-delay: 500ms; }
        @keyframes aiox-rise {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .message.customer {
            background: rgba(15, 12, 35, 0.8);
            color: var(--aiox-fg);
            border: 1px solid var(--aiox-border);
            border-bottom-left-radius: 4px;
        }
        .message.agent {
            background: linear-gradient(135deg, var(--aiox-accent), var(--aiox-accent-2));
            color: #fff;
            border-bottom-right-radius: 4px;
            margin-left: auto;
            box-shadow: var(--aiox-glow-p);
        }
        .message-time {
            font-family: var(--aiox-mono);
            font-size: 10px; opacity: 0.7; margin-top: 4px;
        }
        .typing-dots {
            display: inline-flex; gap: 3px; padding: 2px 0;
        }
        .typing-dots span {
            width: 4px; height: 4px; border-radius: 50%;
            background: #fff;
            animation: aiox-typing 1.2s ease-in-out infinite;
        }
        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes aiox-typing {
            0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
            30% { opacity: 1; transform: scale(1.2); }
        }

        /* ---------- Section base ---------- */
        section { position: relative; padding: 100px 0; }
        .section-header { text-align: center; margin-bottom: 60px; }
        .section-eyebrow {
            display: inline-block;
            font-family: var(--aiox-mono);
            font-size: 12px; color: var(--aiox-accent);
            padding: 4px 12px;
            background: rgba(124, 58, 237, 0.12);
            border: 1px solid var(--aiox-border);
            border-radius: 999px;
            margin-bottom: 16px;
        }
        .section-header h2 {
            font-size: 40px; font-weight: 700;
            color: var(--aiox-fg);
            margin-bottom: 12px;
            letter-spacing: -0.5px;
        }
        .section-header p {
            font-size: 17px; color: var(--aiox-fg-2);
            max-width: 600px; margin: 0 auto;
        }

        /* ---------- Features ---------- */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .feature-card {
            background: var(--aiox-bg-card);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--aiox-border);
            border-radius: var(--aiox-radius);
            padding: 32px 28px;
            transition: all 300ms var(--aiox-ease);
            position: relative;
            overflow: hidden;
        }
        .feature-card::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent, var(--aiox-border-strong), transparent);
            opacity: 0;
            transition: opacity 300ms var(--aiox-ease);
        }
        .feature-card:hover {
            transform: translateY(-4px);
            border-color: var(--aiox-border-strong);
            background: rgba(20, 17, 45, 0.7);
        }
        .feature-card:hover::before { opacity: 1; }
        .feature-icon {
            width: 48px; height: 48px;
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(8, 145, 178, 0.25));
            border: 1px solid var(--aiox-border);
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 18px;
            color: var(--aiox-fg-muted);
        }
        .feature-icon svg { width: 24px; height: 24px; }
        .feature-card h3 {
            font-size: 18px; font-weight: 600;
            color: var(--aiox-fg);
            margin-bottom: 10px;
        }
        .feature-card p {
            font-size: 14px; color: var(--aiox-fg-2); line-height: 1.7;
        }

        /* ---------- Channels ---------- */
        .channels-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 18px;
            position: relative;
        }
        /* Single animated connector line that snakes through the grid */
        .channels-connector {
            position: absolute;
            inset: 50% 0 auto 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.4), rgba(8, 145, 178, 0.3), transparent);
            overflow: visible;
            pointer-events: none;
        }
        .channels-connector::before {
            content: '';
            position: absolute;
            top: -3px;
            width: 100%;
            height: 7px;
            background: linear-gradient(90deg,
                transparent 0%, rgba(124, 58, 237, 0.45) 50%, transparent 100%);
            background-size: 50% 100%;
            background-repeat: no-repeat;
            animation: channels-connector-slide 6s ease-in-out infinite;
        }
        @keyframes channels-connector-slide {
            0%   { background-position: -50% 0; }
            100% { background-position: 150% 0; }
        }
        .channel-item {
            position: relative;
            text-align: center;
            padding: 32px 16px 24px;
            background: var(--aiox-bg-card);
            border: 1px solid var(--aiox-border);
            border-radius: var(--aiox-radius);
            transition: all 320ms var(--aiox-ease);
            cursor: pointer;
            overflow: hidden;
            opacity: 0;
            transform: translateY(16px);
            animation: channel-enter 600ms var(--aiox-ease) forwards;
        }
        .channel-item:nth-child(1)  { animation-delay:  60ms; }
        .channel-item:nth-child(2)  { animation-delay: 120ms; }
        .channel-item:nth-child(3)  { animation-delay: 180ms; }
        .channel-item:nth-child(4)  { animation-delay: 240ms; }
        .channel-item:nth-child(5)  { animation-delay: 300ms; }
        .channel-item:nth-child(6)  { animation-delay: 360ms; }
        .channel-item:nth-child(7)  { animation-delay: 420ms; }
        .channel-item:nth-child(8)  { animation-delay: 480ms; }
        .channel-item:nth-child(9)  { animation-delay: 540ms; }
        .channel-item:nth-child(10) { animation-delay: 600ms; }
        .channel-item:nth-child(11) { animation-delay: 660ms; }
        .channel-item:nth-child(12) { animation-delay: 720ms; }
        .channel-item:nth-child(13) { animation-delay: 780ms; }
        @keyframes channel-enter {
            0%   { opacity: 0; transform: translateY(16px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        /* Brand-tinted edge glow that follows the cursor */
        .channel-item::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, var(--brand-color, var(--aiox-accent)) 0%, transparent 60%);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
                    mask-composite: exclude;
            opacity: 0;
            transition: opacity 320ms var(--aiox-ease);
            pointer-events: none;
        }
        .channel-item:hover {
            transform: translateY(-6px);
            border-color: var(--brand-color, var(--aiox-border-strong));
            background: color-mix(in srgb, var(--brand-color, var(--aiox-accent)) 8%, var(--aiox-bg-card));
            box-shadow:
                0 10px 32px color-mix(in srgb, var(--brand-color, var(--aiox-accent)) 25%, transparent),
                0 0 0 1px color-mix(in srgb, var(--brand-color, var(--aiox-accent)) 30%, transparent);
        }
        .channel-item:hover::before { opacity: 1; }
        .channel-item:hover .channel-icon {
            transform: translateY(-4px) rotate(-6deg) scale(1.08);
            background: color-mix(in srgb, var(--brand-color, var(--aiox-accent)) 22%, transparent);
            border-color: var(--brand-color, var(--aiox-border-strong));
            box-shadow: 0 0 18px color-mix(in srgb, var(--brand-color, var(--aiox-accent)) 50%, transparent);
        }
        .channel-item:hover .channel-icon svg {
            transform: scale(1.1);
        }
        /* A subtle 'online' dot that pulses when the row is hovered */
        .channel-status {
            position: absolute;
            top: 12px; right: 12px;
            width: 8px; height: 8px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
            animation: channel-pulse 2s ease-out infinite;
        }
        .channel-status::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            background: rgba(34, 197, 94, .25);
            animation: channel-pulse-ring 2s ease-out infinite;
        }
        @keyframes channel-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
            50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
        }
        @keyframes channel-pulse-ring {
            0%   { transform: scale(.6); opacity: .9; }
            100% { transform: scale(1.6); opacity: 0; }
        }
        .channel-icon {
            width: 56px; height: 56px;
            margin: 0 auto 16px;
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(8, 145, 178, 0.2));
            border: 1px solid var(--aiox-border);
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            color: var(--aiox-fg);
            transition: all 320ms var(--aiox-ease);
        }
        .channel-icon svg { width: 30px; height: 30px; transition: transform 320ms var(--aiox-ease); }
        .channel-item h4 {
            font-size: 14.5px; font-weight: 600;
            color: var(--aiox-fg);
            font-family: var(--aiox-mono);
            letter-spacing: 0.2px;
            margin-bottom: 4px;
        }
        .channel-item .channel-tag {
            font-family: var(--aiox-mono);
            font-size: 10px;
            color: var(--aiox-fg-muted);
            letter-spacing: 0.5px;
            opacity: 0.85;
        }
        /* Responsive — collapse to 3 then 2 columns on narrow screens */
        @media (max-width: 1024px) {
            .channels-grid { grid-template-columns: repeat(3, 1fr); }
        }

        /* ---------- Stats ---------- */
        .stats {
            background: var(--aiox-bg-card);
            border-top: 1px solid var(--aiox-border);
            border-bottom: 1px solid var(--aiox-border);
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }
        .stat-item { text-align: center; padding: 20px; }
        .stat-item h3 {
            font-family: var(--aiox-sans);
            font-size: 42px; font-weight: 700;
            background: linear-gradient(90deg, var(--aiox-accent), var(--aiox-accent-3));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 6px;
            letter-spacing: -0.5px;
        }
        .stat-item p {
            font-family: var(--aiox-mono);
            font-size: 12px; color: var(--aiox-fg-muted);
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }

        /* ---------- CTA ---------- */
        .cta { text-align: center; }
        .cta-inner {
            background: var(--aiox-bg-elevated);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--aiox-border-strong);
            border-radius: var(--aiox-radius-lg);
            padding: 60px 40px;
            position: relative;
            overflow: hidden;
        }
        .cta-inner::before {
            content: '';
            position: absolute; top: 0; left: 50%; transform: translateX(-50%);
            width: 80%; height: 1px;
            background: linear-gradient(90deg, transparent, var(--aiox-accent), transparent);
        }
        .cta h2 {
            font-size: 36px; font-weight: 700;
            color: var(--aiox-fg);
            margin-bottom: 12px;
            letter-spacing: -0.5px;
        }
        .cta p {
            font-size: 17px; color: var(--aiox-fg-2);
            margin-bottom: 32px;
        }

        /* ---------- Footer ---------- */
        footer {
            background: var(--aiox-bg-2);
            border-top: 1px solid var(--aiox-border);
            padding: 60px 0 30px;
        }
        .footer-content {
            display: grid;
            grid-template-columns: 1.5fr 2fr;
            gap: 60px;
            margin-bottom: 40px;
        }
        .footer-brand .logo { margin-bottom: 16px; }
        .footer-brand p {
            font-size: 13px; color: var(--aiox-fg-muted);
            max-width: 320px; line-height: 1.7;
        }
        .footer-links {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        .footer-links h4 {
            font-family: var(--aiox-mono);
            font-size: 11px; color: var(--aiox-fg-muted);
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 16px;
        }
        .footer-links ul { list-style: none; }
        .footer-links li { margin-bottom: 10px; }
        .footer-links a {
            font-size: 14px; color: var(--aiox-fg-2);
            text-decoration: none;
            transition: color 200ms var(--aiox-ease);
        }
        .footer-links a:hover { color: var(--aiox-accent); }
        .footer-bottom {
            padding-top: 30px;
            border-top: 1px solid var(--aiox-border);
            text-align: center;
        }
        .footer-bottom p {
            font-family: var(--aiox-mono);
            font-size: 11px; color: var(--aiox-fg-dim);
            letter-spacing: 0.3px;
        }
        .footer-bottom a { color: var(--aiox-fg-dim); text-decoration: none; }
        .footer-bottom a:hover { color: var(--aiox-fg-muted); }

        /* ---------- Responsive ---------- */
        @media (max-width: 968px) {
            .hero-content { grid-template-columns: 1fr; gap: 40px; }
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .channels-grid { grid-template-columns: repeat(2, 1fr); }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-content { grid-template-columns: 1fr; gap: 40px; }
            .hero-text h1 { font-size: 40px; }
            .section-header h2 { font-size: 32px; }
        }
        @media (max-width: 640px) {
            header { padding: 10px 0; }
            .container { padding: 0 16px; }
            .header-left { gap: 14px; min-width: 0; }
            .header-actions { gap: 8px; flex-shrink: 0; }
            .logo { gap: 0; flex-shrink: 0; }
            .logo-text { display: none; }
            .logo-icon { width: 38px; height: 38px; border-radius: 10px; }
            .nav-buttons { gap: 12px; }
            .nav-link { font-size: 13px; }
            .lang-selector select { padding: 7px 27px 7px 10px; font-size: 12px; background-position: right 8px center; }
            .nav-login { margin-left: 0; padding: 8px 13px; font-size: 13px; }
            section { padding: 60px 0; }
            .hero { padding: 48px 0 24px; }
            .hero-content { gap: 28px; }
            .hero-eyebrow { margin-bottom: 14px; }
            .hero-text h1 { margin-bottom: 14px; }
            .hero-text p { margin-bottom: 24px; font-size: 15.5px; line-height: 1.7; }
            .hero-card { padding: 18px; border-radius: 18px; }
            .hero-card-header { padding-bottom: 12px; margin-bottom: 12px; }
            .chat-messages { gap: 10px; }
            .message { padding: 9px 12px; font-size: 13px; }
            .cta { padding: 28px 0 32px; }
            .cta-inner { padding: 42px 22px; border-radius: 18px; }
            .cta h2 { font-size: 30px; line-height: 1.35; margin-bottom: 18px; }
            .cta p { margin-bottom: 24px; font-size: 15px; }
            footer { padding: 28px 0 22px; }
            .footer-bottom { border-top: 0; padding-top: 0; }
            #woot-widget-holder, #chatwoot_live_chat_widget { bottom: 96px !important; }
            .features, .channels, .stats, footer .footer-content { display: none; }
            .features-grid, .channels-grid, .stats-grid { grid-template-columns: 1fr; }
            .footer-links { grid-template-columns: 1fr; gap: 24px; }
            .hero-text h1 { font-size: 32px; }
            .section-header h2 { font-size: 26px; }
            .nav-status { display: none; }
        }

        /* ---------- Reduced motion ---------- */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ---------- Focus visibility ---------- */
        :focus-visible {
            outline: 2px solid var(--aiox-accent);
            outline-offset: 3px;
            border-radius: 4px;
        }