body {
            background-color: #EBEBDF;
            color: #151515;
            overflow-x: hidden;
        }

        /* Hero grid - more visible, fades later */
        .hero-grid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image: 
                linear-gradient(to right, rgba(21,21,21,0.08) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(21,21,21,0.08) 1px, transparent 1px);
            background-size: 120px 120px;
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0) 95%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0) 95%);
            z-index: 0;
        }

        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }
        .animate-float {
            animation: float 4s ease-in-out infinite;
        }

        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        /* Status card animations */
        .radar-sweep {
            background: conic-gradient(from 0deg, transparent 70%, rgba(39, 201, 63, 0.4) 100%);
            animation: radar 2s linear infinite;
        }
        @keyframes radar {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .chart-line-anim {
            stroke-dasharray: 200;
            stroke-dashoffset: 200;
            animation: drawChart 4s linear infinite;
        }
        @keyframes drawChart {
            0% { stroke-dashoffset: 200; }
            50% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: 0; opacity: 0; }
        }

        .equalizer-bars div {
            animation: equalize 1s infinite alternate;
        }
        .equalizer-bars div:nth-child(1) { animation-delay: 0.1s; }
        .equalizer-bars div:nth-child(2) { animation-delay: 0.3s; }
        .equalizer-bars div:nth-child(3) { animation-delay: 0.0s; }
        .equalizer-bars div:nth-child(4) { animation-delay: 0.4s; }
        .equalizer-bars div:nth-child(5) { animation-delay: 0.2s; }
        @keyframes equalize {
            0% { height: 20%; }
            100% { height: 100%; }
        }

        /* CTA button glow */
        .btn-primary {
            background: #E9631A;
            color: white;
            font-weight: 700;
            border-radius: 14px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(233,99,26,0.15);
        }
        .btn-primary:hover {
            background: #CF5615;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(233,99,26,0.25);
        }
        .btn-secondary {
            background: #FFFFFF;
            color: #151515;
            font-weight: 700;
            border: 1.5px solid #D1D1C7;
            border-radius: 14px;
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            border-color: #151515;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        }


    .vtab-active { color: #E9631A; border-color: #E9631A; }


/* ===== BASE ===== */
body {
    background-color: #EBEBDF;
    color: #151515;
    overflow-x: hidden;
}

/* ===== HERO GRID ===== */
.hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: 
        linear-gradient(to right, rgba(21,21,21,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(21,21,21,0.08) 1px, transparent 1px);
    background-size: 120px 120px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0) 95%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0) 95%);
    z-index: 0;
}

/* ===== ANIMATIONS ===== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* ===== BUTTONS ===== */
.btn-primary {
    background: #E9631A;
    color: white;
    font-weight: 700;
    border-radius: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(233,99,26,0.15);
}
.btn-primary:hover {
    background: #CF5615;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233,99,26,0.25);
}
.btn-secondary {
    background: #FFFFFF;
    font-weight: 700;
    border: 1.5px solid #D1D1C7;
    border-radius: 14px;
    transition: all 0.3s ease;
}
.btn-secondary:hover {
    border-color: #151515;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* ===== STATUS CARDS ===== */
.radar-sweep {
    background: conic-gradient(from 0deg, transparent 70%, rgba(39, 201, 63, 0.4) 100%);
    animation: radar 2s linear infinite;
}
@keyframes radar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.chart-line-anim {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: drawChart 4s linear infinite;
}
@keyframes drawChart {
    0% { stroke-dashoffset: 200; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

.equalizer-bars div { animation: equalize 1s infinite alternate; }
.equalizer-bars div:nth-child(1) { animation-delay: 0.1s; }
.equalizer-bars div:nth-child(2) { animation-delay: 0.3s; }
.equalizer-bars div:nth-child(3) { animation-delay: 0.0s; }
.equalizer-bars div:nth-child(4) { animation-delay: 0.4s; }
.equalizer-bars div:nth-child(5) { animation-delay: 0.2s; }
@keyframes equalize { 0% { height: 20%; } 100% { height: 100%; } }

/* ===== CHANGELOG TABS ===== */
.vtab-active { color: #E9631A; border-color: #E9631A; }

/* ===== MOBILE RESPONSIVE ===== */

/* Global mobile spacing */
@media (max-width: 767px) {
    main {
        gap: 3rem !important;
    }

    /* Header */
    header {
        height: 56px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    header .btn-primary {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    header nav { display: none !important; }

    /* Breadcrumbs */
    .absolute.top-24 {
        top: 5rem !important;
    }

    /* Hero */
    section.relative.pt-36 {
        padding-top: 7.5rem !important;
    }
    h1 {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }
    .btn-primary, .btn-secondary {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* Floating card on hero image */
    .animate-float {
        padding: 8px 12px !important;
        bottom: -12px !important;
        left: -4px !important;
    }
    .animate-float .w-9 { width: 28px !important; height: 28px !important; }
    .animate-float .text-sm { font-size: 11px !important; }
    .animate-float .text-xs { font-size: 9px !important; }

    /* Status strip: 2 columns on mobile */
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .lg\:grid-cols-5 > *:last-child {
        grid-column: span 2;
    }
    .lg\:grid-cols-5 > div {
        height: 110px !important;
    }

    /* Features grid: stack */
    .md\:col-span-2 {
        grid-column: span 1 !important;
    }
    .md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    .md\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Features inner 2-col → stack */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Safety: 2 cols on mobile */
    .md\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .md\:grid-cols-5 > .col-span-2 {
        grid-column: span 2 !important;
    }

    /* How-to steps: 2 cols */
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Download strip: stack */
    .sm\:flex-row {
        flex-direction: column !important;
    }
    .flex-shrink-0 .flex.items-center.gap-2 {
        flex-wrap: wrap;
    }

    /* Changelog: tabs scroll */
    .border-b.bg-surfaceElevated {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Changelog grid → 1 col */
    .vc .md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Scripts: 2 cols stays, but smaller padding */
    .grid.grid-cols-2.md\:grid-cols-4 > div {
        padding: 12px !important;
    }

    /* FAQ: 1 col */
    .md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Footer: stack columns */
    .md\:grid-cols-12 {
        grid-template-columns: 1fr 1fr !important;
    }
    .md\:col-span-4 {
        grid-column: span 2 !important;
    }
    .md\:col-span-2 {
        grid-column: span 1 !important;
    }

    /* Section headings */
    .text-xl.md\:text-2xl {
        font-size: 1.15rem !important;
    }

    /* General text size tweaks */
    .text-\[13px\] { font-size: 12px !important; }
}

/* Small phones */
@media (max-width: 400px) {
    body { font-size: 14px; }

    .lg\:grid-cols-5,
    .lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    .lg\:grid-cols-5 > *:last-child {
        grid-column: span 1 !important;
    }

    .md\:grid-cols-5 {
        grid-template-columns: 1fr !important;
    }
    .md\:grid-cols-5 > .col-span-2 {
        grid-column: span 1 !important;
    }

    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: 1fr 1fr !important;
    }

    .md\:grid-cols-12 {
        grid-template-columns: 1fr !important;
    }
    .md\:col-span-4,
    .md\:col-span-2 {
        grid-column: span 1 !important;
    }

    h1 { font-size: 1.75rem !important; }

    /* Hero buttons full width */
    .btn-primary, .btn-secondary {
        width: 100% !important;
    }
}


     @media (min-width: 768px) {
            .fixed header {
                height: 64px !important;
                padding: 0 24px !important;
            }
            .fixed header a img {
                width: 32px !important;
                height: 32px !important;
            }
            .fixed header a span {
                font-size: 18px !important;
            }
            .fixed header button {
                padding: 10px 20px !important;
                font-size: 14px !important;
                border-radius: 14px !important;
            }
            .fixed header button svg {
                width: 16px !important;
                height: 16px !important;
            }
        }