:root {
    --clr-primary: #f47b25;
    --clr-primary-glow: rgba(244, 123, 37, 0.35);
    --clr-bg-light: #f8f7f5;
    --clr-bg-dark: #0a0705;
    --clr-text-dark: #1a1208;
    --clr-text-light: #f5f0eb;
    --clr-accent-teal: #2dd4bf;
    --clr-accent-pink: #f472b6;
    --clr-accent-purple: #a78bfa;
    --clr-accent-amber: #fbbf24;
    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-blur: 18px;
    --radius-pill: 9999px;
    --radius-card: 20px;
    --font-primary: 'Space Grotesk', sans-serif;
    --transition-base: 0.25s ease;
    --shadow-orange-glow: 0 0 24px rgba(244, 123, 37, 0.45);

    /* ── App-derived glow colors (from DarkTheme / LightTheme) ──────── */
    --glow-amber: rgba(245, 158, 11, 0.10);
    --glow-rose: rgba(225, 29, 72, 0.08);
    --glow-primary: rgba(244, 123, 37, 0.12);

    /* ── Easing curves (matching Flutter's Curves.easeInOut) ──────── */
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--clr-bg-light);
    color: var(--clr-text-dark);
}

/* ── Glass Utility ──────────────────────────────────────────────────── */

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    position: relative;
    overflow: hidden;
}

/* Glass shimmer streak on hover */
.glass::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 70%
    );
    transform: skewX(-15deg);
    transition: left 0.8s var(--ease-smooth);
    pointer-events: none;
    z-index: 1;
}

.glass:hover::after {
    left: 120%;
}

.glass--dark {
    background: rgba(10, 7, 5, 0.55);
}

/* ── Container ──────────────────────────────────────────────────────── */

.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 3rem);
}

/* ── Typography ─────────────────────────────────────────────────────── */

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

p, span, div {
    font-weight: 400;
}

/* ── Reveal System — IntersectionObserver-based (base) ──────────────── */

.reveal {
    opacity: 0;
    transform: translateY(32px);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}

.reveal[data-delay="1"] { transition-delay: 100ms; }
.reveal[data-delay="2"] { transition-delay: 200ms; }
.reveal[data-delay="3"] { transition-delay: 300ms; }
.reveal[data-delay="4"] { transition-delay: 400ms; }

/* ── Enhanced Reveal Variants ───────────────────────────────────────── */

.reveal[data-reveal="slide-left"] {
    transform: translateX(-60px);
}

.reveal[data-reveal="slide-right"] {
    transform: translateX(60px);
}

.reveal[data-reveal="scale-up"] {
    transform: scale(0.88);
}

.reveal[data-reveal="slide-left"].is-visible,
.reveal[data-reveal="slide-right"].is-visible,
.reveal[data-reveal="scale-up"].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}

/* ── 3D Tilt Card Wrapper ───────────────────────────────────────────── */

.tilt-card {
    perspective: 800px;
    transform-style: preserve-3d;
}

.tilt-card-inner {
    transition: transform 0.3s var(--ease-smooth);
    transform-style: preserve-3d;
    will-change: transform;
}

/* ── Stagger Children Animation ─────────────────────────────────────── */

.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth);
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 60ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 120ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 180ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 300ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 360ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(7) { transition-delay: 420ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(8) { transition-delay: 480ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(9) { transition-delay: 540ms; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(10) { transition-delay: 600ms; opacity: 1; transform: none; }