/* ── Scroll Reveal ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Nav Scroll State ── */
.nav-scrolled {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) saturate(1.3);
    border-bottom: 1px solid rgba(229, 231, 235, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.dark .nav-scrolled {
    background: rgba(2, 6, 23, 0.85) !important;
    border-bottom-color: rgba(30, 41, 59, 0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ── Gradient Text ── */
.gradient-text {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #4f46e5 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite;
}
.dark .gradient-text {
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #818cf8 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite;
}
@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ── Grid Background ── */
.grid-bg {
    background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.03) 1px, transparent 0);
    background-size: 48px 48px;
}
.dark .grid-bg {
    background-image: radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.04) 1px, transparent 0);
}

/* ── Hero Glow ── */
.hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}
.hero-glow-1 {
    background: rgba(79, 70, 229, 0.08);
    top: -200px;
    right: -100px;
}
.hero-glow-2 {
    background: rgba(124, 58, 237, 0.06);
    bottom: -200px;
    left: -100px;
}
.dark .hero-glow-1 { background: rgba(99, 102, 241, 0.12); }
.dark .hero-glow-2 { background: rgba(139, 92, 246, 0.08); }

/* ── Feature Card Hover ── */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    border-color: rgba(79, 70, 229, 0.3);
}
.dark .feature-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(99, 102, 241, 0.25);
}

/* ── Smooth Selection ── */
::selection {
    background: rgba(79, 70, 229, 0.2);
    color: inherit;
}
.dark ::selection {
    background: rgba(129, 140, 248, 0.25);
}

/* ── Screenshot Browser Frame ── */
.browser-frame {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.dark .browser-frame {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ── Pricing Card Featured ── */
.pricing-featured {
    position: relative;
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5, 0 8px 30px rgba(79, 70, 229, 0.12);
}
.dark .pricing-featured {
    border-color: #818cf8;
    box-shadow: 0 0 0 1px #818cf8, 0 8px 30px rgba(129, 140, 248, 0.1);
}

/* ── Dot Pulse Animation ── */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.dot-pulse {
    animation: pulse-dot 2s ease infinite;
}