/* ── BASE RESET & CSS VARIABLES ── */

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

:root {
    --bg-deep: #060515;
    --bg-section: #0a0920;
    --bg-card: rgba(255, 255, 255, 0.03);
    --white: #FFFFFF;
    --warm-white: #F1F5F9;
    --mid: #94A3B8;
    --muted: rgba(255, 255, 255, 0.55);
    --rule: rgba(255, 255, 255, 0.08);
    --gold: #FF8A00;
    --orange-start: #FFB300;
    --orange-end: #FF5900;
    --gradient-text: linear-gradient(90deg, #FFB300 0%, #FF8A00 50%, #FF5900 100%);
    --radius: 8px;
    --radius-lg: 12px;
    --radius-pill: 100px;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --max-width: 1200px;
    --nav-height: 72px;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: var(--bg-deep);
    color: var(--white);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── GRAIN OVERLAY ── */
.grain {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    animation: grain-shift 0.5s steps(2) infinite;
}

@keyframes grain-shift {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-2px, 1px);
    }

    50% {
        transform: translate(1px, -2px);
    }

    75% {
        transform: translate(2px, 2px);
    }

    100% {
        transform: translate(-1px, 1px);
    }
}

/* ── SHARED ANIMATION ── */
@keyframes fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 8px rgba(255, 138, 0, 0.6);
    }

    50% {
        opacity: 0.6;
        box-shadow: 0 0 16px rgba(255, 138, 0, 0.9);
    }
}

/* ── UTILITY: gradient text ── */

.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}