/* ========== VARIABLES ULTRA PREMIUM ========== */
:root {
    --cream: #f7f1e8;
    --cream-soft: #fbf6ee;
    --cream-dark: #ede3d5;
    --coffee: #4a2b19;
    --coffee-dark: #2e1b10;
    --coffee-darker: #1a0f08;
    --gold: #c89b3c;
    --gold-light: #d4a959;
    --gold-dark: #b08532;
    --text-main: #3b3430;
    --text-soft: #6a5a4b;
    --border-soft: #e2d4c4;
    --container-padding: 7vw;
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-main);
    background: linear-gradient(135deg, #0a0808 0%, #1a0f08 25%, #0f0a08 50%, #1a0f08 75%, #0a0808 100%);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ========== ANIMATED BACKGROUND LAYERS ========== */
body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(200, 155, 60, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(74, 43, 25, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(26, 15, 8, 0.25) 0%, transparent 50%);
    animation: backgroundFloat 30s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes backgroundFloat {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.6;
    }
    33% { 
        transform: translate(5%, -5%) rotate(5deg);
        opacity: 1;
    }
    66% { 
        transform: translate(-5%, 5%) rotate(-5deg);
        opacity: 0.8;
    }
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: 
        repeating-linear-gradient(0deg, 
            rgba(200, 155, 60, 0.02) 0px,
            transparent 2px,
            transparent 80px,
            rgba(200, 155, 60, 0.02) 82px),
        repeating-linear-gradient(90deg,
            rgba(200, 155, 60, 0.02) 0px,
            transparent 2px,
            transparent 80px,
            rgba(200, 155, 60, 0.02) 82px);
    pointer-events: none;
    animation: gridPulse 4s ease-in-out infinite;
    z-index: 0;
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* ========== UTILITY CLASSES ========== */
.container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

section {
    scroll-margin-top: 100px;
    position: relative;
    z-index: 2;
}

.text-center {
    text-align: center;
}

.max-600 {
    max-width: 600px;
}

.max-700 {
    max-width: 700px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.lead {
    color: rgba(247, 241, 232, 0.85);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.text-gold {
    color: var(--gold-light);
}

/* ========== ACCESSIBILITY & PERFORMANCE ========== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    body::before,
    body::after,
    .hero::before,
    .hero-particles,
    .navbar-deni::before,
    .modal-overlay,
    .success-toast,
    .scroll-top,
    .nav-auth {
        display: none;
    }

    .navbar-deni {
        position: relative;
        background: #fff;
        color: #000;
    }

    section {
        page-break-inside: avoid;
    }

    .btn-cta,
    .btn-auth,
    .btn-download {
        border: 2px solid #000;
        background: transparent;
        color: #000;
    }
}