/**
 * Base Styles
 * Resets, typography, and foundational styles
 */

* {
    box-sizing: border-box;
}

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

/* Gradient text utility */
.gradient-text {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Header adjustments for safe areas */
header {
    padding-top: env(safe-area-inset-top);
}

#mobile-menu {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Metric counter tabular numbers */
.metric-value {
    font-variant-numeric: tabular-nums;
}

/* Hero background gradient */
.hero-bg {
    background: radial-gradient(ellipse at top, #1e293b 0%, #0f172a 50%, #020617 100%);
    position: relative;
    overflow: hidden;
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}