/* ===== RESET & BASE ===== */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
        body {
            font-family: 'Montserrat', sans-serif;
            color: #e2e4f0;
            background: #0b0d1a;
            line-height: 1.7;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        body * { font-family: 'Montserrat', sans-serif; }
        img { max-width: 100%; height: auto; display: block; }
        a { color: inherit; text-decoration: none; }
        button { font-family: inherit; cursor: pointer; border: none; }
        ul, ol { list-style: none; }
        h1, h2, h3, h4 {line-height: 1.25; }

        /* ===== CSS VARIABLES ===== */
        :root {
            --c-bg-deep: #0b0d1a;
            --c-bg-card: #12152a;
            --c-bg-elevated: #1a1e38;
            --c-accent-1: #8757E2;
            --c-accent-2: #a46cf3;
            --c-gradient: linear-gradient(135deg, #8757E2 0%, #a46cf3 100%);
            --c-gradient-hover: linear-gradient(135deg, #9a6ef0 0%, #b580ff 100%);
            --c-gold: #f0c040;
            --c-text: #e2e4f0;
            --c-text-muted: #8b8fa8;
            --c-border: rgba(255,255,255,0.06);
            --c-fire: #D9420B;
            --c-earth: #0F8C22;
            --c-air: #D5E7F2;
            --c-water: #0788D9;
            --max-w: 1200px;
            --section-pad: clamp(60px, 8vw, 120px);
        }

        /* ===== LAYOUT ===== */
        .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
        .section { padding: var(--section-pad) 0; }
        .text-center { text-align: center; }