/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

@property --counter {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fc;
    --bg-dark: #0a0a14;
    --glass: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(0, 0, 0, 0.06);
    --text-primary: #0f1729;
    --text-secondary: rgba(15, 23, 41, 0.6);
    --text-muted: rgba(15, 23, 41, 0.25);
    --accent-blue: #4f7dff;
    --accent-cyan: #00b4d8;
    --accent-purple: #a855f7;
    --accent-pink: #f472b6;
    --accent-green: #22c55e;
    --gradient-main: linear-gradient(135deg, #4f7dff, #00b4d8);
    --gradient-warm: linear-gradient(135deg, #a855f7, #f472b6);
    --gradient-mesh: linear-gradient(-45deg, #4f7dff, #a855f7, #00b4d8, #f472b6, #22c55e);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ===== GRAIN TEXTURE OVERLAY (CSS-only, no SVG filter) ===== */
.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMFCA0RFRkMi9LaAAAAW0lEQVQ4y2MQFGRgGEqAhYFBcCgBZgEGwaEEWBgYBIcSYGFgEBxKgJmBQXAoARYGBsGhBFgYGASHEmBhYBAcSoCZgUFwKAEWBgbBoQRYGBgEhxJgYWAYQgAApcJJVwNOmZQAAAAASUVORK5CYII=");
    background-repeat: repeat;
    background-size: 48px 48px;
    will-change: auto;
}

/* ===== MESH GRADIENT BACKGROUND ===== */
.mesh-gradient {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.mesh-gradient::before {
    content: '';
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(79, 125, 255, 0.12), transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(168, 85, 247, 0.10), transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(0, 180, 216, 0.08), transparent 50%);
}

.mesh-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, var(--bg-primary) 100%);
}

/* meshShift removed — static radial gradients are GPU-friendly */

/* ===== CONTAINER ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* ===== SERIF HEADINGS ===== */
h1, h2, .section-title {
    font-family: 'DM Serif Display', Georgia, serif;
}

/* ===== PAUSE ALL ANIMATIONS WHEN TAB HIDDEN ===== */
html.tab-hidden *,
html.tab-hidden *::before,
html.tab-hidden *::after {
    animation-play-state: paused !important;
}

/* ===== REDUCE MOTION FOR USERS WHO PREFER IT ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}