/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', sans-serif; background: #0A1628; color: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Hero Gradient ──────────────────────────────────────── */
.hero-gradient {
    background: 
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(52, 211, 153, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 20% 60%, rgba(52, 211, 153, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 30%, rgba(100, 220, 170, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, #0A1628 0%, #0D1F3C 50%, #0A1628 100%);
}

/* ── Floating Blobs ─────────────────────────────────────── */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
    will-change: transform;
}
.blob-1 {
    width: 500px; height: 500px;
    background: rgba(52, 211, 153, 0.12);
    top: -100px; right: -100px;
    animation: float-slow 20s ease-in-out infinite;
}
.blob-2 {
    width: 400px; height: 400px;
    background: rgba(52, 211, 153, 0.08);
    bottom: 10%; left: -80px;
    animation: float-slow 25s ease-in-out infinite reverse;
}
.blob-3 {
    width: 300px; height: 300px;
    background: rgba(110, 231, 183, 0.06);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: float-slow 18s ease-in-out infinite;
}

@keyframes float-slow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
}

/* ── Navbar ─────────────────────────────────────────────── */
.nav-scroller {
    transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.nav-scroller.scrolled {
    background: rgba(10, 22, 40, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Mobile Menu ────────────────────────────────────────── */
.mobile-link { transition: opacity 0.2s; }
#mobile-menu.open { opacity: 1; pointer-events: auto; }
#mobile-menu.closed { opacity: 0; pointer-events: none; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.2);
}

/* ── Feature Chips ──────────────────────────────────────── */
.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    transition: border-color 0.2s;
}
.feature-chip:hover { border-color: rgba(52, 211, 153, 0.3); }

/* ── Scroll Reveal ──────────────────────────────────────── */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Default state for reduced-motion / no-JS: always visible */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(28px);
    }
    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Stat Items ─────────────────────────────────────────── */
.stat-item {
    transition: transform 0.3s ease;
}
.stat-item:hover { transform: translateY(-2px); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-gradient {
        background: 
            radial-gradient(ellipse 100% 70% at 50% 30%, rgba(52, 211, 153, 0.20) 0%, transparent 70%),
            linear-gradient(180deg, #0A1628 0%, #0D1F3C 50%, #0A1628 100%);
    }
}