html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Inter', system-ui, sans-serif;
    }

    .section-offset {
        scroll-margin-top: 80px;
    }

    /* Gradient text */
    .gradient-text {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Hero background blobs */
    .hero-blob-1 {
        position: absolute;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
        border-radius: 50%;
        top: -100px;
        left: -150px;
        pointer-events: none;
    }

    .hero-blob-2 {
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        bottom: -100px;
        right: -100px;
        pointer-events: none;
    }

    .hero-blob-3 {
        position: absolute;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
        border-radius: 50%;
        top: 40%;
        left: 40%;
        pointer-events: none;
    }

    /* Glass card */
    .glass-card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.8);
    }

    /* Animated gradient border */
    .gradient-border {
        position: relative;
        background: white;
    }

    .gradient-border::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    /* Shine hover effect on cards */
    .shine-card {
        position: relative;
        overflow: hidden;
    }

    .shine-card::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 30%;
        height: 200%;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
        transform: skewX(-20deg);
        transition: left 0.6s ease;
        pointer-events: none;
    }

    .shine-card:hover::after {
        left: 130%;
    }

    /* Feature card icon gradient */
    .icon-gradient {
        background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    }

    .icon-gradient i {
        color: #6366f1;
    }

    /* Stats pill */
    .stats-card {
        background: linear-gradient(135deg, #f8faff 0%, #f5f3ff 100%);
        border: 1px solid rgba(99, 102, 241, 0.15);
    }

    /* CTA gradient */
    .cta-gradient {
        background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4c1d95 100%);
        position: relative;
        overflow: hidden;
    }

    .cta-gradient::before {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 60%);
        top: -200px;
        right: -100px;
    }

    .cta-gradient::after {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, transparent 60%);
        bottom: -100px;
        left: 50px;
    }

    /* Nav link hover underline */
    .nav-link {
        position: relative;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #6366f1, #8b5cf6);
        border-radius: 2px;
        transition: width 0.3s ease;
    }

    .nav-link:hover::after {
        width: 100%;
    }

    /* Demo card image area gradient */
    .demo-card-img {
        background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
        position: relative;
        overflow: hidden;
    }

    .demo-card-img::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, transparent 60%, rgba(99, 102, 241, 0.08) 100%);
    }

    /* Mock browser dot colors */
    .dot-red {
        background: #ff5f57;
    }

    .dot-yellow {
        background: #fbbf24;
    }

    .dot-green {
        background: #34d399;
    }

    /* Scroll fade-in animation */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(24px);
        }

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

    .fade-in-up {
        animation: fadeInUp 0.6s ease both;
    }

    .delay-1 {
        animation-delay: 0.1s;
    }

    .delay-2 {
        animation-delay: 0.2s;
    }

    .delay-3 {
        animation-delay: 0.3s;
    }

    .delay-4 {
        animation-delay: 0.4s;
    }

    /* Badge gradient */
    .badge-gradient {
        background: linear-gradient(135deg, #eef2ff, #f5f3ff);
        border: 1px solid rgba(99, 102, 241, 0.2);
        color: #6366f1;
    }

    /* Section divider */
    .section-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2), transparent);
    }

    /* Full-page screenshot scroll on hover */
    .preview-scroll {
        transform: translateY(0);
        transition: transform 3s ease;
        will-change: transform;
    }

    .group:hover .preview-scroll {
        transform: translateY(var(--preview-scroll, -70%));
    }

    /* ── Category filter tabs (index.php) ── */
    .filter-tab {
        background: #fff;
        border: 1.5px solid #e2e8f0;
        color: #475569;
        font-size: 13px;
        font-weight: 500;
        padding: 7px 16px;
        border-radius: 100px;
        text-decoration: none;
        transition: all 0.2s;
    }
    .filter-tab:hover {
        border-color: #6366f1;
        color: #6366f1;
        background: #eef2ff;
    }
    .filter-tab-active,
    .filter-tab.filter-tab-active {
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        border-color: transparent;
        color: #fff !important;
    }

    /* Shadow utilities */
    .shadow-card {
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(99,102,241,0.06);
    }
    .shadow-glow {
        box-shadow: 0 8px 32px rgba(99,102,241,0.18);
    }
    .shadow-soft {
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }