/* ============================================================
           CONFIG / VARIABLES
           ============================================================ */
        :root {
            --primary: #6f4e37;
            --primary-dark: #4a3222;
            --primary-light: #a67c5c;
            --accent: #c89f7b;
            --accent-gold: #d4a853;
            --accent-light: #e8d5c0;
            --cream: #f9f3ed;
            --white: #ffffff;
            --dark: #1a1410;
            --gray: #6b5e54;
            --light-gray: #e8e0d8;
            --shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 30px 80px rgba(0, 0, 0, 0.15);
            --radius: 16px;
            --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            --bg-body: #f9f3ed;
            --bg-card: #ffffff;
            --text-primary: #1a1410;
            --text-secondary: #6b5e54;
            --border-color: #e8e0d8;
        }

        [data-theme="dark"] {
            --bg-body: #12100e;
            --bg-card: #1e1a16;
            --text-primary: #f0ece8;
            --text-secondary: #a89c92;
            --border-color: #2d2824;
            --cream: #1e1a16;
            --white: #1e1a16;
            --light-gray: #2d2824;
            --gray: #a89c92;
            --shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            --shadow-hover: 0 30px 80px rgba(0, 0, 0, 0.4);
        }

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

        html {
            scroll-behavior: smooth;
        }

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

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ::selection {
            background: var(--primary);
            color: var(--white);
        }

        /* ============================================================
           SCROLL TO TOP
           ============================================================ */
        .scroll-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 999;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--white);
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(111, 78, 55, 0.3);
            transition: var(--transition);
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
        }

        .scroll-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .scroll-top:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(111, 78, 55, 0.4);
        }

        /* ============================================================
           BUTTONS
           ============================================================ */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 16px 36px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            transition: var(--transition);
            letter-spacing: -0.01em;
            position: relative;
            overflow: hidden;
        }

        .btn i {
            font-size: 0.95rem;
            transition: transform 0.3s ease;
        }

        .btn:hover i {
            transform: translateX(4px);
        }

        .btn-primary {
            background: var(--primary);
            color: var(--white);
            box-shadow: 0 4px 25px rgba(111, 78, 55, 0.35);
        }

        .btn-primary::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
            pointer-events: none;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 8px 40px rgba(111, 78, 55, 0.45);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.08);
            color: var(--white);
            border: 2px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-3px);
        }

        .btn-outline {
            background: transparent;
            color: var(--white);
            border: 2px solid rgba(255, 255, 255, 0.2);
            padding: 10px 24px;
            font-size: 0.9rem;
        }

        .btn-outline:hover {
            background: var(--white);
            color: var(--primary);
            border-color: var(--white);
            transform: translateY(-2px);
        }

        .btn-large {
            padding: 20px 48px;
            font-size: 1.1rem;
        }

        .btn-glow {
            animation: glowPulse 2.5s ease-in-out infinite;
        }

        @keyframes glowPulse {
            0%,
            100% {
                box-shadow: 0 4px 25px rgba(111, 78, 55, 0.35);
            }
            50% {
                box-shadow: 0 4px 50px rgba(111, 78, 55, 0.55), 0 0 80px rgba(111, 78, 55, 0.1);
            }
        }

        .btn-whatsapp {
            background: #25D366;
            color: white;
        }

        .btn-whatsapp:hover {
            background: #1da851;
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
        }

        .btn-sms {
            background: #34B7F1;
            color: white;
        }

        .btn-sms:hover {
            background: #1a9fd9;
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(52, 183, 241, 0.4);
        }

        /* ============================================================
           DARK MODE TOGGLE
           ============================================================ */
        .theme-toggle {
            position: fixed;
            bottom: 90px;
            right: 30px;
            z-index: 999;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--bg-card);
            color: var(--text-primary);
            border: 2px solid var(--border-color);
            font-size: 1.2rem;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .theme-toggle:hover {
            transform: scale(1.1);
            box-shadow: var(--shadow-hover);
        }

        /* ============================================================
           COOKIE CONSENT BANNER
           ============================================================ */
        .cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            background: var(--bg-card);
            border-top: 1px solid var(--border-color);
            padding: 20px 30px;
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
            transform: translateY(100%);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .cookie-banner.active {
            transform: translateY(0);
        }

        .cookie-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
        }

        .cookie-text {
            display: flex;
            align-items: center;
            gap: 14px;
            font-size: 0.9rem;
            color: var(--text-secondary);
            flex: 1;
        }

        .cookie-text i {
            font-size: 1.4rem;
            color: var(--primary-light);
        }

        .cookie-text a {
            color: var(--primary);
            text-decoration: underline;
            font-weight: 500;
        }

        .cookie-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .cookie-buttons .btn {
            padding: 10px 24px;
            font-size: 0.85rem;
        }

        .btn-cookie-accept {
            background: var(--primary);
            color: var(--white);
        }

        .btn-cookie-accept:hover {
            background: var(--primary-dark);
        }

        .btn-cookie-decline {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
        }

        .btn-cookie-decline:hover {
            background: var(--border-color);
        }

        /* ============================================================
           COUNTDOWN TIMER
           ============================================================ */
        .countdown-section {
            padding: 40px 0 20px;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            color: var(--white);
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .countdown-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            flex-wrap: wrap;
        }

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

        .countdown-number {
            font-size: 2.8rem;
            font-weight: 900;
            font-family: 'Playfair Display', serif;
            line-height: 1;
            min-width: 60px;
            color: var(--accent-gold);
            text-shadow: 0 0 30px rgba(212, 168, 83, 0.2);
        }

        .countdown-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            opacity: 0.6;
            margin-top: 4px;
        }

        .countdown-separator {
            font-size: 2.5rem;
            font-weight: 300;
            opacity: 0.3;
            font-family: 'Playfair Display', serif;
            color: var(--accent-gold);
        }

        .countdown-message {
            margin-top: 12px;
            font-size: 0.85rem;
            opacity: 0.7;
            letter-spacing: 0.5px;
        }

        /* ============================================================
           NAVBAR
           ============================================================ */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 20px 0;
            background: transparent;
            transition: var(--transition);
        }

        .navbar.scrolled {
            background: rgba(26, 20, 16, 0.92);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            padding: 14px 0;
        }

        [data-theme="dark"] .navbar.scrolled {
            background: rgba(18, 16, 14, 0.95);
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 800;
            letter-spacing: -0.04em;
            display: flex;
            align-items: center;
            gap: 2px;
        }

        .logo-highlight {
            color: var(--white);
            position: relative;
        }

        .logo-highlight::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--accent-gold);
            border-radius: 2px;
            opacity: 0.6;
        }

        .logo-ext {
            color: var(--accent-gold);
            font-weight: 500;
            text-shadow: 0 0 20px rgba(212, 168, 83, 0.15);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .nav-theme-toggle {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--white);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1rem;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-theme-toggle:hover {
            background: rgba(255, 255, 255, 0.12);
            transform: scale(1.05);
        }

        /* ============================================================
           HERO — 3D Scene Container
           ============================================================ */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 120px 0 80px;
            position: relative;
            overflow: hidden;
            background: radial-gradient(ellipse at center, #1f1610 0%, #0f0b08 100%);
            perspective: 1500px;
        }

        [data-theme="dark"] .hero {
            background: radial-gradient(ellipse at center, #14100c 0%, #080504 100%);
        }

        #three-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 0;
            pointer-events: none;
        }

        .hero-container {
            position: relative;
            z-index: 2;
            text-align: center;
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 24px;
            pointer-events: none;
        }

        .hero-container>* {
            pointer-events: auto;
        }

        /* ===== HERO EYEBROW ===== */
        .hero-eyebrow {
            display: block;
            width: fit-content;
            margin: 0 auto 22px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(212, 168, 83, 0.15);
            padding: 8px 24px;
            border-radius: 50px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 0 40px rgba(212, 168, 83, 0.04);
            animation: fadeInDown 1s ease-out;
            position: relative;
            z-index: 3;
        }

        .hero-eyebrow .eyebrow-dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #4ade80;
            animation: dotPulse 2s ease-in-out infinite;
            flex-shrink: 0;
        }

        .hero-eyebrow .eyebrow-icon {
            color: var(--accent-gold);
            font-size: 0.8rem;
            flex-shrink: 0;
        }

        @keyframes dotPulse {
            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.4;
                transform: scale(0.7);
            }
        }

        @keyframes fadeInDown {
            0% {
                opacity: 0;
                transform: translateY(-20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ===== HERO TITLE ===== */
        .hero-title-wrapper {
            display: block;
            margin-bottom: 20px;
            animation: fadeInUp 1.2s ease-out;
        }

        .hero-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(4rem, 10vw, 9rem);
            font-weight: 900;
            line-height: 1.05;
            letter-spacing: -0.04em;
            display: inline-block;
            position: relative;
            color: var(--white);
            text-shadow: 0 0 80px rgba(212, 168, 83, 0.06);
        }

        #three-canvas {
            z-index: 1;
        }

        .hero-title .highlight {
            color: #f5f0eb;
            position: relative;
        }

        .hero-title .light {
            color: var(--accent-gold);
            font-weight: 500;
            text-shadow: 0 0 60px rgba(212, 168, 83, 0.15);
        }

        /* ===== HERO SUBTITLE ===== */
        .hero-subtitle {
            font-size: 1.3rem;
            color: rgba(255, 255, 255, 0.5);
            max-width: 640px;
            margin: 0 auto 28px;
            line-height: 1.8;
            font-weight: 400;
            letter-spacing: 0.2px;
            animation: fadeInUp 1.4s ease-out;
        }

        .hero-subtitle strong {
            color: rgba(255, 255, 255, 0.8);
            font-weight: 500;
        }

        /* ===== HERO TAGLINE ===== */
        .hero-tagline {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.25);
            letter-spacing: 2.5px;
            text-transform: uppercase;
            margin-bottom: 48px;
            font-weight: 400;
            animation: fadeInUp 1.6s ease-out;
        }

        .hero-tagline span {
            color: var(--accent-gold);
        }

        /* ===== HERO BUTTONS ===== */
        .hero-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 18px;
            margin-bottom: 72px;
            animation: fadeInUp 1.8s ease-out;
        }

        /* ===== HERO STATS ===== */
        .hero-stats {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 50px;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            max-width: 600px;
            margin: 0 auto;
            animation: fadeInUp 2s ease-out;
        }

        .stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 800;
            color: var(--white);
            letter-spacing: -0.02em;
            font-family: 'Playfair Display', serif;
        }

        .stat-number.gold {
            color: var(--accent-gold);
        }

        .stat-label {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.3);
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .stat-divider {
            width: 1px;
            height: 36px;
            background: rgba(255, 255, 255, 0.05);
        }

        /* ============================================================
           SECTIONS COMMON
           ============================================================ */
        .section-label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2.5px;
            color: var(--primary-light);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .section-label::before {
            content: '';
            width: 30px;
            height: 2px;
            background: var(--primary-light);
            border-radius: 2px;
        }

        .section-label.light {
            color: rgba(255, 255, 255, 0.4);
        }

        .section-label.light::before {
            background: rgba(255, 255, 255, 0.2);
        }

        .section-title {
            font-size: clamp(2.4rem, 5vw, 3.6rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            line-height: 1.12;
            margin-bottom: 16px;
            color: var(--text-primary);
        }

        .section-title .highlight {
            color: var(--primary);
            position: relative;
        }

        .section-title .highlight::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--accent-light);
            border-radius: 2px;
            opacity: 0.4;
        }

        .section-title .domain-ext {
            color: var(--accent-gold);
            font-weight: 600;
        }

        .section-title.light {
            color: var(--white);
        }

        .section-title.light .highlight {
            color: var(--accent);
        }

        .section-title.light .highlight::after {
            background: rgba(198, 159, 123, 0.3);
        }

        .section-title.light .domain-ext {
            color: var(--accent-gold);
        }

        .section-desc {
            font-size: 1.15rem;
            color: var(--text-secondary);
            max-width: 620px;
            line-height: 1.8;
            margin-bottom: 32px;
        }

        .section-desc.light {
            color: rgba(255, 255, 255, 0.5);
        }

        .section-desc strong {
            color: var(--text-primary);
            font-weight: 600;
        }

        .section-desc.light strong {
            color: rgba(255, 255, 255, 0.8);
        }

        /* ============================================================
           BRAND MOCKUP
           ============================================================ */
        .brand-mockup {
            padding: 100px 0 80px;
            background: var(--bg-body);
            position: relative;
            transition: background-color 0.4s ease;
        }

        .brand-mockup::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--accent-gold), var(--primary));
            opacity: 0.1;
        }

        .mockup-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 30px;
            margin-top: 10px;
        }

        .mockup-card {
            padding: 44px 32px 36px;
            border-radius: var(--radius);
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            transition: var(--transition);
            text-align: center;
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            perspective: 800px;
        }

        .mockup-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--accent-gold));
            opacity: 0;
            transition: var(--transition);
        }

        .mockup-card:hover::before {
            opacity: 1;
        }

        .mockup-card:hover {
            transform: translateY(-10px) rotateX(2deg) rotateY(2deg);
            box-shadow: var(--shadow-hover);
            border-color: var(--accent);
        }

        .mockup-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 68px;
            height: 68px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: var(--white);
            font-size: 1.6rem;
            margin-bottom: 20px;
            transition: var(--transition);
            box-shadow: 0 8px 24px rgba(111, 78, 55, 0.2);
        }

        .mockup-card:hover .mockup-icon {
            transform: scale(1.08) rotate(-4deg);
            box-shadow: 0 12px 32px rgba(111, 78, 55, 0.3);
        }

        .mockup-card h3 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 8px;
            letter-spacing: -0.02em;
            color: var(--text-primary);
        }

        .mockup-card h3 .highlight {
            color: var(--accent-gold);
        }

        .mockup-card p {
            font-size: 0.95rem;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .mockup-card .card-number {
            position: absolute;
            top: 12px;
            right: 16px;
            font-size: 3rem;
            font-weight: 900;
            color: rgba(111, 78, 55, 0.04);
            line-height: 1;
            font-family: 'Playfair Display', serif;
        }

        /* ============================================================
           WHY SECTION
           ============================================================ */
        .why-section {
            padding: 100px 0;
            background: var(--cream);
            position: relative;
            transition: background-color 0.4s ease;
        }

        .why-section::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
            opacity: 0.1;
        }

        .why-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

        .why-item {
            padding: 36px 30px;
            background: var(--bg-card);
            border-radius: var(--radius);
            border: 1px solid var(--border-color);
            transition: var(--transition);
            position: relative;
            transform-style: preserve-3d;
            perspective: 600px;
        }

        .why-item:hover {
            transform: translateY(-6px) rotateX(1deg);
            box-shadow: var(--shadow-hover);
            border-color: var(--primary-light);
        }

        .why-number {
            font-size: 3.2rem;
            font-weight: 900;
            color: rgba(111, 78, 55, 0.06);
            line-height: 1;
            margin-bottom: 8px;
            font-family: 'Playfair Display', serif;
            transition: var(--transition);
        }

        .why-item:hover .why-number {
            color: rgba(111, 78, 55, 0.12);
        }

        .why-item h3 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 6px;
            letter-spacing: -0.02em;
            color: var(--text-primary);
        }

        .why-item p {
            font-size: 0.95rem;
            color: var(--text-secondary);
            line-height: 1.7;
        }

        .why-item .why-icon {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 1.2rem;
            color: rgba(111, 78, 55, 0.08);
            transition: var(--transition);
        }

        .why-item:hover .why-icon {
            color: var(--primary-light);
            transform: rotate(10deg) scale(1.1);
        }

        /* ============================================================
           INVESTMENT
           ============================================================ */
        .investment {
            padding: 100px 0;
            background: var(--dark);
            position: relative;
            overflow: hidden;
            transition: background-color 0.4s ease;
        }

        [data-theme="dark"] .investment {
            background: #0a0806;
        }

        .investment::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 60%;
            height: 150%;
            background: radial-gradient(ellipse, rgba(111, 78, 55, 0.06) 0%, transparent 70%);
            pointer-events: none;
        }

        .investment-box {
            display: grid;
            grid-template-columns: 1.6fr 1fr;
            gap: 60px;
            align-items: start;
            position: relative;
            z-index: 1;
        }

        .investment-content .section-desc {
            margin-bottom: 28px;
        }

        .investment-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 32px;
            margin-bottom: 36px;
        }

        .inv-feature {
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95rem;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        }

        .inv-feature i {
            color: var(--accent-gold);
            font-size: 1rem;
            width: 20px;
            text-align: center;
        }

        .investment-price {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: var(--radius);
            padding: 44px 36px;
            text-align: center;
            position: sticky;
            top: 120px;
            backdrop-filter: blur(10px);
            transition: var(--transition);
        }

        .investment-price:hover {
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 60px rgba(111, 78, 55, 0.05);
        }

        .price-tag {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .price-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, 0.25);
            font-weight: 500;
        }

        .price-amount {
            font-size: 3.6rem;
            font-weight: 900;
            color: var(--white);
            letter-spacing: -0.03em;
            margin: 6px 0 4px;
            font-family: 'Playfair Display', serif;
        }

        .price-note {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.3);
        }

        .price-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 24px;
            padding: 8px 24px;
            border-radius: 50px;
            background: rgba(212, 168, 83, 0.1);
            color: var(--accent-gold);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            border: 1px solid rgba(212, 168, 83, 0.1);
        }

        .price-badge i {
            font-size: 0.8rem;
        }

        .investment .btn {
            margin-top: 4px;
        }

        /* ============================================================
           ESCROW SECTION
           ============================================================ */
        .escrow-section {
            padding: 60px 0;
            background: var(--bg-body);
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            transition: background-color 0.4s ease;
        }

        .escrow-grid {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            flex-wrap: wrap;
        }

        .escrow-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 28px;
            border-radius: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            transition: var(--transition);
            cursor: pointer;
        }

        .escrow-item:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: var(--accent-gold);
        }

        .escrow-item i {
            font-size: 1.2rem;
            color: var(--accent-gold);
        }

        .escrow-item span {
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--text-primary);
        }

        .escrow-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 16px;
            border-radius: 50px;
            background: #f0f7ee;
            color: #2d6a4f;
            font-size: 0.75rem;
            font-weight: 600;
        }

        [data-theme="dark"] .escrow-badge {
            background: rgba(45, 106, 79, 0.2);
            color: #7bc09a;
        }

        /* ============================================================
           CONTACT
           ============================================================ */
        .contact {
            padding: 100px 0;
            background: var(--bg-body);
            position: relative;
            transition: background-color 0.4s ease;
        }

        .contact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--accent-gold), var(--primary));
            opacity: 0.08;
        }

        .contact .section-desc {
            margin-bottom: 36px;
        }

        .contact-buttons-row {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 40px;
        }

        .contact-buttons-row .btn {
            flex: 1;
            min-width: 140px;
            justify-content: center;
        }

        .contact-form {
            max-width: 680px;
            margin: 0 auto;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        .form-group {
            margin-bottom: 24px;
        }

        .form-group label {
            display: block;
            font-weight: 600;
            font-size: 0.85rem;
            margin-bottom: 8px;
            color: var(--text-primary);
            letter-spacing: -0.01em;
        }

        .form-group label .required {
            color: var(--primary-light);
            margin-left: 2px;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 16px 20px;
            border: 2px solid var(--border-color);
            border-radius: 12px;
            font-size: 1rem;
            font-family: inherit;
            background: var(--bg-card);
            transition: var(--transition);
            color: var(--text-primary);
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(111, 78, 55, 0.06);
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: #b5aaa0;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 130px;
        }

        .contact-form .btn {
            width: 100%;
            justify-content: center;
            margin-top: 4px;
        }

        .form-note {
            text-align: center;
            margin-top: 16px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .form-note i {
            margin-right: 6px;
            color: var(--primary-light);
        }

        /* ============================================================
           FOOTER
           ============================================================ */
        .footer {
            background: var(--dark);
            border-top: 1px solid rgba(255, 255, 255, 0.03);
            padding: 60px 0 0;
            transition: background-color 0.4s ease;
        }

        [data-theme="dark"] .footer {
            background: #0a0806;
        }

        .footer-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 32px;
            padding-bottom: 40px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        }

        .footer-brand .logo {
            font-size: 1.6rem;
        }

        .footer-brand .logo .logo-ext {
            color: var(--accent-gold);
        }

        .footer-brand p {
            color: rgba(255, 255, 255, 0.25);
            font-size: 0.9rem;
            margin-top: 4px;
            font-weight: 300;
        }

        .footer-links {
            display: flex;
            gap: 36px;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.35);
            font-size: 0.9rem;
            transition: var(--transition);
            font-weight: 400;
        }

        .footer-links a:hover {
            color: var(--white);
        }

        .footer-social {
            display: flex;
            gap: 12px;
        }

        .footer-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.03);
            color: rgba(255, 255, 255, 0.25);
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.03);
        }

        .footer-social a:hover {
            background: var(--primary);
            color: var(--white);
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(111, 78, 55, 0.3);
        }

        .footer-bottom {
            padding: 24px 0;
            text-align: center;
        }

        .footer-bottom p {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.12);
            font-weight: 300;
        }


        /* ============================================================
           CUSTOM COFFEE PHOTO + BRAND EMPHASIS
           ============================================================ */
        .hero-bean-photo {
            position: absolute;
            inset: -8%;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
            opacity: 0.42;
            mix-blend-mode: screen;
            filter: saturate(1.18) contrast(1.08);
        }

        .hero-bean-photo::after {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 50% 45%, rgba(212, 168, 83, 0.10), transparent 45%),
                linear-gradient(180deg, rgba(15, 11, 8, 0.18), rgba(8, 5, 4, 0.72));
        }

        .hero-bean-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 48%;
            display: block;
            opacity: 0.82;
            transform: scale(1.06);
            animation: coffeePhotoFloat 14s ease-in-out infinite alternate;
            will-change: transform;
        }

        @keyframes coffeePhotoFloat {
            0% {
                transform: scale(1.06) translate3d(-1.2%, -0.8%, 0);
            }
            50% {
                transform: scale(1.11) translate3d(0.8%, 0.6%, 0);
            }
            100% {
                transform: scale(1.07) translate3d(-0.5%, 1%, 0);
            }
        }

        .hero-title .highlight {
            color: #f8d477;
            background: linear-gradient(135deg, #fff0ad 0%, #f7c85e 38%, #d99a2b 72%, #ffe9a0 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 34px rgba(247, 200, 94, 0.28);
            font-weight: 900;
        }

        .hero-title .light {
            color: #fff4cf;
            background: linear-gradient(135deg, #fff8df 0%, #f4d27a 55%, #d9a43c 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 40px rgba(244, 210, 122, 0.24);
            font-weight: 700;
        }

        .logo-highlight {
            color: #f6ce72;
            background: linear-gradient(135deg, #fff0ad, #e3ad43 70%, #ffd978);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 22px rgba(246, 206, 114, 0.25);
        }

        .logo-ext {
            color: #fff0bd;
            text-shadow: 0 0 24px rgba(255, 224, 145, 0.25);
        }

        .section-title .highlight {
            color: #7a4a22;
            font-weight: 850;
        }

        /* Make the 01 / 02 / 03 / 04 numerals clearly visible, black and bold. */
        .mockup-card .card-number,
        .why-number {
            color: #111111;
            font-weight: 900;
            opacity: 1;
        }

        .why-item:hover .why-number {
            color: #000000;
        }

        @media (max-width: 768px) {
            .hero-bean-photo {
                inset: -4%;
                opacity: 0.34;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .hero-bean-photo img {
                animation: none !important;
            }
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 992px) {
            .investment-box {
                grid-template-columns: 1fr;
            }
            .investment-price {
                position: static;
                max-width: 400px;
                margin: 0 auto;
            }
            .countdown-number {
                font-size: 2.2rem;
                min-width: 45px;
            }
            .countdown-separator {
                font-size: 2rem;
            }
            .hero-title {
                font-size: clamp(3.6rem, 9vw, 6rem);
            }
            .hero-subtitle {
                font-size: 1.15rem;
            }
        }

        @media (max-width: 768px) {
            .hero {
                padding: 100px 0 60px;
                min-height: 90vh;
            }
            .hero-title {
                font-size: clamp(3rem, 12vw, 4.5rem);
            }
            .hero-subtitle {
                font-size: 1rem;
                padding: 0 10px;
                max-width: 100%;
            }
            .hero-tagline {
                font-size: 0.7rem;
                letter-spacing: 1.5px;
                margin-bottom: 36px;
            }
            .hero-stats {
                gap: 24px;
                flex-wrap: wrap;
                padding-top: 30px;
                max-width: 100%;
            }
            .stat-divider {
                display: none;
            }
            .stat-number {
                font-size: 1.6rem;
            }
            .hero-eyebrow {
                font-size: 0.65rem;
                padding: 6px 16px;
                gap: 8px;
                margin-bottom: 18px;
            }
            .hero-eyebrow .eyebrow-icon {
                font-size: 0.7rem;
            }
            .hero-buttons {
                gap: 14px;
                margin-bottom: 48px;
            }
            .hero-buttons .btn {
                padding: 14px 28px;
                font-size: 0.9rem;
                min-width: 180px;
            }
            .form-row {
                grid-template-columns: 1fr;
            }
            .footer-container {
                flex-direction: column;
                text-align: center;
            }
            .footer-links {
                flex-wrap: wrap;
                justify-content: center;
                gap: 20px;
            }
            .investment-features {
                grid-template-columns: 1fr;
            }
            .mockup-grid {
                grid-template-columns: 1fr 1fr;
            }
            .section-title {
                font-size: clamp(1.8rem, 5vw, 2.4rem);
            }
            .countdown-container {
                gap: 12px;
            }
            .countdown-number {
                font-size: 1.6rem;
                min-width: 30px;
            }
            .countdown-separator {
                font-size: 1.3rem;
            }
            .cookie-content {
                flex-direction: column;
                text-align: center;
            }
            .cookie-text {
                flex-direction: column;
                text-align: center;
            }
            .contact-buttons-row .btn {
                min-width: 100%;
            }
            .escrow-grid {
                flex-direction: column;
                gap: 16px;
            }
            .escrow-item {
                width: 100%;
                justify-content: center;
            }
            .theme-toggle {
                bottom: 80px;
                right: 16px;
                width: 42px;
                height: 42px;
                font-size: 1rem;
            }
            .scroll-top {
                bottom: 140px;
                right: 16px;
                width: 42px;
                height: 42px;
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            .mockup-grid {
                grid-template-columns: 1fr;
            }
            .hero-buttons .btn {
                width: 100%;
                justify-content: center;
                min-width: unset;
            }
            .price-amount {
                font-size: 2.4rem;
            }
            .investment-price {
                padding: 24px 16px;
            }
            .hero-eyebrow {
                font-size: 0.55rem;
                padding: 4px 12px;
                gap: 6px;
                letter-spacing: 1.2px;
            }
            .hero-eyebrow .eyebrow-icon {
                font-size: 0.6rem;
            }
            .hero-title {
                font-size: clamp(2.4rem, 10vw, 3.2rem);
            }
            .hero-subtitle {
                font-size: 0.9rem;
            }
            .hero-tagline {
                font-size: 0.6rem;
                letter-spacing: 1.2px;
            }
            .countdown-number {
                font-size: 1.3rem;
                min-width: 24px;
            }
            .countdown-separator {
                font-size: 1rem;
            }
            .cookie-banner {
                padding: 12px 16px;
            }
            .cookie-buttons .btn {
                padding: 8px 14px;
                font-size: 0.75rem;
            }
            .stat-number {
                font-size: 1.4rem;
            }
            .stat-label {
                font-size: 0.65rem;
            }
        }

        /* ============================================================
           REDUCED MOTION
           ============================================================ */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            .hero-title:hover {
                transform: none !important;
            }
            .mockup-card:hover {
                transform: translateY(-10px) !important;
            }
            .why-item:hover {
                transform: translateY(-6px) !important;
            }
            .escrow-item:hover {
                transform: none !important;
            }
        }
    
/* ============================================================
   PREMIUM RL.COFFEE VISUAL SYSTEM — REFERENCE MATCH
   Real photographic coffee beans are used as animated foreground
   elements; no synthetic 3D bean geometry is used in the hero.
   ============================================================ */
:root {
    --gold: #e5b84f;
    --gold-bright: #ffd878;
    --gold-soft: #d5a94c;
    --hero-black: #090503;
    --hero-brown: #21130b;
    --hero-card: rgba(25, 15, 9, .72);
}

body { background:#0b0603; }

.countdown-section { display:none !important; }
.brand-mockup { display:none !important; }

.navbar { padding:18px 0; background:linear-gradient(180deg,rgba(5,3,2,.92),rgba(5,3,2,0)); }
.navbar.scrolled { background:rgba(8,5,3,.90) !important; backdrop-filter:blur(18px); padding:12px 0; }
.nav-container { max-width:1380px; padding:0 42px; }
.premium-logo { width:74px; height:74px; border:1.5px solid rgba(229,184,79,.8); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#f7d78a; position:relative; box-shadow:0 0 30px rgba(229,184,79,.08), inset 0 0 22px rgba(229,184,79,.04); transition:.3s ease; }
.premium-logo:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 0 36px rgba(229,184,79,.16); }
.premium-logo::before,.premium-logo::after { content:''; position:absolute; left:12px; right:12px; height:1px; background:linear-gradient(90deg,transparent,rgba(229,184,79,.75),transparent); }
.premium-logo::before { top:13px; } .premium-logo::after { bottom:13px; }
.premium-logo-top { font-size:8px; letter-spacing:3px; margin-left:3px; }
.premium-logo-rl { font-family:'Playfair Display',serif; font-size:38px; line-height:.85; letter-spacing:-3px; }
.nav-links { display:flex; align-items:center; gap:40px; margin-left:auto; margin-right:34px; }
.nav-links a { color:rgba(255,255,255,.88); font-size:.98rem; position:relative; padding:9px 0; transition:.3s ease; }
.nav-links a::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:center; transition:.3s ease; }
.nav-links a:hover,.nav-links a.active { color:var(--gold-bright); }
.nav-links a:hover::after,.nav-links a.active::after { transform:scaleX(1); }
.nav-actions { gap:14px; }
.nav-theme-toggle { width:98px; height:40px; border-radius:22px; background:rgba(15,9,5,.7); border:1px solid rgba(229,184,79,.45); color:#f4cf7d; position:relative; }
.nav-theme-toggle::before { content:'☼'; position:absolute; left:12px; font-size:18px; opacity:.9; }
.nav-theme-toggle::after { content:'☾'; position:absolute; right:12px; font-size:16px; opacity:.9; }
.nav-theme-toggle i { display:none; }
.offer-nav { display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:8px; background:linear-gradient(135deg,#ffe7a5,#e6b94f); color:#171006; font-size:.84rem; font-weight:800; letter-spacing:.3px; box-shadow:0 8px 30px rgba(229,184,79,.18); transition:.3s ease; }
.offer-nav:hover { transform:translateY(-2px); box-shadow:0 12px 38px rgba(229,184,79,.28); }
.nav-menu-toggle { display:none; background:none; border:1px solid rgba(229,184,79,.4); color:#f4cf7d; border-radius:8px; width:42px; height:42px; }

.premium-hero { min-height:100vh; height:760px; max-height:900px; padding:110px 0 92px; background:#090503; isolation:isolate; }
.hero-photo-layer { position:absolute; inset:0; z-index:-5; overflow:hidden; }
.hero-photo-layer img { width:100%; height:100%; object-fit:cover; object-position:center 45%; transform:scale(1.06); filter:saturate(1.12) contrast(1.08) brightness(.72); animation:heroPhotoDrift 18s ease-in-out infinite alternate; }
@keyframes heroPhotoDrift { from { transform:scale(1.06) translate3d(-.5%,0,0); } to { transform:scale(1.13) translate3d(.5%,-1%,0); } }
.hero-vignette { position:absolute; inset:0; z-index:-4; background:radial-gradient(circle at 50% 45%,rgba(85,47,18,.28),transparent 35%),linear-gradient(90deg,rgba(5,2,1,.72) 0%,rgba(8,4,2,.34) 28%,rgba(8,4,2,.22) 68%,rgba(5,2,1,.78) 100%),linear-gradient(180deg,rgba(4,2,1,.55),rgba(5,2,1,.12) 36%,rgba(5,2,1,.82) 100%); }
.hero-glow { position:absolute; border-radius:50%; pointer-events:none; z-index:-3; filter:blur(40px); }
.glow-one { width:360px; height:360px; left:29%; top:20%; background:rgba(224,156,47,.12); }
.glow-two { width:280px; height:280px; right:16%; top:34%; background:rgba(255,191,65,.08); }
#three-canvas { display:none !important; }

.floating-beans { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.floating-bean { position:absolute; display:block; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 20px 16px rgba(0,0,0,.48)); transform-origin:center; will-change:transform; }
.floating-bean { will-change:transform; backface-visibility:hidden; }
.bean-a { width:185px; left:8%; top:10%; animation:beanFloatA 6.8s cubic-bezier(.45,.05,.55,.95) infinite; animation-delay:-1.4s; }
.bean-b { width:112px; right:29%; top:4%; animation:beanFloatB 5.9s cubic-bezier(.45,.05,.55,.95) infinite; animation-delay:-3.2s; }
.bean-c { width:205px; left:21%; bottom:22%; animation:beanFloatC 7.6s cubic-bezier(.45,.05,.55,.95) infinite; animation-delay:-4.6s; }
.bean-d { width:210px; right:17%; bottom:18%; animation:beanFloatD 6.9s cubic-bezier(.45,.05,.55,.95) infinite; animation-delay:-2.3s; }
.bean-e { width:120px; right:5%; top:48%; animation:beanFloatE 5.7s cubic-bezier(.45,.05,.55,.95) infinite; animation-delay:-4.1s; opacity:.95; }
@keyframes beanFloatA { 0%{transform:translate3d(-10px,12px,0) rotate(-10deg) scale(.96)}22%{transform:translate3d(72px,-34px,0) rotate(8deg) scale(1.02)}48%{transform:translate3d(138px,38px,0) rotate(24deg) scale(1.06)}72%{transform:translate3d(54px,92px,0) rotate(5deg) scale(1.01)}100%{transform:translate3d(-10px,12px,0) rotate(-10deg) scale(.96)} }
@keyframes beanFloatB { 0%{transform:translate3d(8px,0,0) rotate(9deg) scale(.94)}25%{transform:translate3d(-88px,54px,0) rotate(-12deg) scale(1.03)}52%{transform:translate3d(-148px,-12px,0) rotate(-28deg) scale(1.08)}78%{transform:translate3d(-54px,-72px,0) rotate(-5deg) scale(1)}100%{transform:translate3d(8px,0,0) rotate(9deg) scale(.94)} }
@keyframes beanFloatC { 0%{transform:translate3d(0,8px,0) rotate(-16deg) scale(.97)}24%{transform:translate3d(94px,-64px,0) rotate(-3deg) scale(1.04)}50%{transform:translate3d(156px,-10px,0) rotate(18deg) scale(1.08)}76%{transform:translate3d(62px,66px,0) rotate(31deg) scale(1.02)}100%{transform:translate3d(0,8px,0) rotate(-16deg) scale(.97)} }
@keyframes beanFloatD { 0%{transform:translate3d(0,0,0) rotate(12deg) scale(.95)}23%{transform:translate3d(-96px,-58px,0) rotate(-2deg) scale(1.04)}49%{transform:translate3d(-162px,12px,0) rotate(-20deg) scale(1.09)}75%{transform:translate3d(-68px,82px,0) rotate(4deg) scale(1.02)}100%{transform:translate3d(0,0,0) rotate(12deg) scale(.95)} }
@keyframes beanFloatE { 0%{transform:translate3d(0,0,0) rotate(18deg) scale(.94)}25%{transform:translate3d(-76px,74px,0) rotate(3deg) scale(1.04)}50%{transform:translate3d(-132px,-4px,0) rotate(-18deg) scale(1.08)}76%{transform:translate3d(-44px,-92px,0) rotate(8deg) scale(1)}100%{transform:translate3d(0,0,0) rotate(18deg) scale(.94)} }

.ambient-particles span { position:absolute; width:3px; height:3px; border-radius:50%; background:#e5b84f; opacity:.45; box-shadow:0 0 10px #e5b84f; animation:particleDrift 7s linear infinite; }
.ambient-particles span:nth-child(1){left:6%;top:37%;animation-delay:-1s} .ambient-particles span:nth-child(2){left:15%;top:67%;animation-delay:-3s} .ambient-particles span:nth-child(3){left:32%;top:16%;animation-delay:-5s} .ambient-particles span:nth-child(4){left:47%;top:72%;animation-delay:-2s} .ambient-particles span:nth-child(5){left:64%;top:19%;animation-delay:-4s} .ambient-particles span:nth-child(6){left:78%;top:31%;animation-delay:-6s} .ambient-particles span:nth-child(7){left:88%;top:63%;animation-delay:-2.5s} .ambient-particles span:nth-child(8){left:54%;top:42%;animation-delay:-5.5s}
@keyframes particleDrift { 0%{transform:translateY(24px);opacity:0} 20%{opacity:.5} 80%{opacity:.25} 100%{transform:translateY(-80px);opacity:0} }

.premium-hero-container { max-width:1380px; padding:0 42px; min-height:100%; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; }
.hero-main { width:min(900px,72%); text-align:center; margin-left:-8%; }
.premium-eyebrow { margin:0 auto 14px; padding:0; border:0; background:transparent; color:#f4ddb0; letter-spacing:5px; font-size:.78rem; box-shadow:none; }
.eyebrow-crown { color:var(--gold-bright); font-size:1.05rem; margin-right:8px; }
.premium-title { margin:0; font-family:'Inter',sans-serif; font-size:clamp(5rem,10vw,10rem); line-height:.92; font-weight:900; letter-spacing:-.075em; color:#ffe6aa; text-shadow:0 0 12px rgba(255,209,104,.55),0 0 48px rgba(232,165,45,.30),0 16px 30px rgba(0,0,0,.45); }
.premium-title .domain-rl { color:#fff0c8; }
.premium-title .domain-dot { color:#f4c965; }
.premium-title .domain-coffee { color:#f5c95d; }
.premium-title::after { content:''; position:absolute; inset:0; pointer-events:none; }
.premium-slogan { margin:15px auto 0; color:#f5d58d; font-size:clamp(1.15rem,2vw,1.65rem); font-weight:400; letter-spacing:.3px; }
.premium-slogan strong { font-weight:800; color:#ffd76d; }
.title-rule { width:110px; height:2px; margin:18px auto 16px; background:linear-gradient(90deg,transparent,#f0bd51,transparent); position:relative; }
.title-rule span { position:absolute; width:5px; height:5px; border-radius:50%; background:#ffd76d; left:50%; top:50%; transform:translate(-50%,-50%); box-shadow:0 0 12px #ffd76d; }
.premium-subtitle { margin:0 auto 24px; color:rgba(255,244,222,.82); font-size:1.05rem; line-height:1.65; max-width:680px; }
.premium-buttons { margin-top:8px; }
.premium-offer { padding:16px 42px; border-radius:9px; background:linear-gradient(135deg,#ffe7a5 0%,#f5ca5c 48%,#dca73b 100%); color:#171006; font-weight:900; letter-spacing:.7px; box-shadow:0 12px 45px rgba(239,181,57,.28),inset 0 1px rgba(255,255,255,.7); }
.premium-offer:hover { background:linear-gradient(135deg,#fff0bd,#ffd66d,#e4af43); color:#171006; }

.hero-benefits { position:absolute; right:42px; top:50%; transform:translateY(-43%); width:230px; z-index:4; }
.hero-benefit { display:flex; align-items:center; gap:18px; padding:20px 0; border-bottom:1px solid rgba(229,184,79,.20); }
.hero-benefit:last-child { border-bottom:0; }
.benefit-icon { width:40px; flex:0 0 40px; text-align:center; color:#f0bd4f; font-size:1.65rem; filter:drop-shadow(0 0 8px rgba(229,184,79,.16)); }
.hero-benefit strong,.hero-benefit span { display:block; }
.hero-benefit strong { color:#ffe0a0; font-size:.95rem; font-weight:800; margin-bottom:2px; }
.hero-benefit span { color:rgba(255,243,218,.78); font-size:.86rem; }

.hero-value-bar { position:absolute; z-index:5; left:50%; bottom:12px; transform:translateX(-50%); width:min(1080px,calc(100% - 90px)); padding:17px 28px; border:1px solid rgba(229,184,79,.34); border-radius:44px; background:rgba(12,7,4,.72); backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:space-between; box-shadow:0 15px 45px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.03); }
.value-item { display:flex; align-items:center; gap:13px; min-width:0; }
.value-item > i { color:#f1bf50; font-size:1.35rem; width:27px; text-align:center; }
.value-item strong,.value-item span { display:block; }
.value-item strong { color:#ffe0a0; font-size:.82rem; font-weight:800; }
.value-item span { color:rgba(255,244,224,.66); font-size:.70rem; margin-top:2px; white-space:nowrap; }
.value-separator { width:1px; height:34px; background:rgba(229,184,79,.28); }

.premium-why { background:linear-gradient(180deg,#1b0f08,#100805); padding:82px 0 92px; color:#fff; position:relative; }
.premium-why::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0,rgba(195,126,32,.12),transparent 38%); pointer-events:none; }
.premium-why .container { position:relative; z-index:1; }
.premium-why .section-label,.premium-why .section-title,.premium-why .section-desc { text-align:center; margin-left:auto; margin-right:auto; }
.premium-why .section-label { color:#dcb55c; }
.premium-why .section-title { color:#fff1d0; }
.premium-why .section-desc { color:rgba(255,242,220,.64); }
.premium-why .section-desc strong { color:#f2c65d; }
.premium-why .why-grid { margin-top:45px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.premium-why .why-item { padding:0 38px; border-right:1px solid rgba(229,184,79,.18); background:transparent; box-shadow:none; border-radius:0; transform:none; }
.premium-why .why-item:last-child { border-right:0; }
.premium-why .why-icon { width:58px; height:58px; border:1px solid rgba(229,184,79,.6); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:#e9bd58; background:rgba(229,184,79,.03); }
.premium-why .why-number { color:#ffffff !important; font-family:'Inter',sans-serif; font-size:5rem; font-weight:950; line-height:.9; text-align:center; margin-bottom:10px; text-shadow:0 1px 0 rgba(255,255,255,.04); }
.premium-why .why-item h3 { text-align:center; color:#f6cc6b; font-size:1rem; letter-spacing:.2px; margin-bottom:9px; }
.premium-why .why-item p { text-align:center; color:rgba(255,242,220,.72); font-size:.88rem; line-height:1.65; }

/* Number styling: mockup cards stay black; Power of Two Letters numbers are white. */
.mockup-card .card-number { color:#000 !important; font-weight:950 !important; }
.premium-why .why-number { color:#fff !important; font-weight:950 !important; opacity:1 !important; }

/* More prominent rl.coffee in all major headings. */
.logo-highlight,.hero-title .highlight { color:#fff1c9 !important; }
.logo-ext,.hero-title .light { color:#f2c45c !important; text-shadow:0 0 22px rgba(242,196,92,.28) !important; }

@media (max-width:1100px) {
    .nav-links { gap:22px; margin-right:18px; }
    .hero-main { width:72%; margin-left:-3%; }
    .hero-benefits { right:25px; width:205px; }
    .premium-title { font-size:clamp(4.5rem,9vw,8rem); }
    .hero-value-bar { width:calc(100% - 50px); }
    .bean-a { left:3%; } .bean-d { right:10%; }
}
@media (max-width:860px) {
    .nav-container { padding:0 20px; }
    .premium-logo { width:62px; height:62px; }
    .premium-logo-rl { font-size:32px; }
    .nav-links { position:absolute; top:78px; left:20px; right:20px; display:none; flex-direction:column; align-items:flex-start; gap:4px; padding:18px; border:1px solid rgba(229,184,79,.2); border-radius:14px; background:rgba(12,7,4,.96); backdrop-filter:blur(18px); }
    .nav-links.open { display:flex; }
    .nav-menu-toggle { display:block; }
    .offer-nav { display:none; }
    .nav-theme-toggle { width:48px; }
    .premium-hero { height:auto; min-height:940px; padding-top:130px; }
    .premium-hero-container { padding:0 20px; display:block; }
    .hero-main { width:100%; margin:0; }
    .hero-benefits { position:relative; right:auto; top:auto; transform:none; width:min(430px,100%); margin:45px auto 0; display:grid; grid-template-columns:1fr 1fr; column-gap:24px; }
    .hero-benefit { padding:14px 0; }
    .hero-value-bar { bottom:16px; width:calc(100% - 32px); overflow-x:auto; justify-content:flex-start; gap:22px; border-radius:20px; }
    .value-separator { display:none; }
    .value-item { flex:0 0 190px; }
    .bean-a { width:140px; left:-25px; top:11%; }
    .bean-b { width:82px; right:20%; top:5%; }
    .bean-c { width:145px; left:-18px; bottom:23%; }
    .bean-d { width:150px; right:-20px; bottom:22%; }
    .bean-e { width:88px; right:-15px; top:42%; }
    .premium-why .why-grid { grid-template-columns:1fr 1fr; row-gap:45px; }
    .premium-why .why-item:nth-child(2) { border-right:0; }
}
@media (max-width:560px) {
    .nav-actions { gap:8px; }
    .premium-eyebrow { font-size:.62rem; letter-spacing:3px; }
    .premium-title { font-size:clamp(4rem,19vw,6rem); letter-spacing:-.09em; }
    .premium-slogan { font-size:1rem; }
    .premium-subtitle { font-size:.9rem; }
    .premium-offer { padding:14px 30px; }
    .hero-benefits { grid-template-columns:1fr; }
    .hero-benefit { justify-content:center; }
    .premium-why { padding-top:60px; }
    .premium-why .why-grid { grid-template-columns:1fr; }
    .premium-why .why-item { border-right:0; border-bottom:1px solid rgba(229,184,79,.15); padding-bottom:30px; }
    .premium-why .why-item:last-child { border-bottom:0; }
    .premium-why .why-number { font-size:4.5rem; }
}

#rl-welcome-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(7,4,3,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s ease}
#rl-welcome-overlay.rl-show{opacity:1;visibility:visible}
.rl-welcome-card{position:relative;width:min(620px,94vw);overflow:hidden;text-align:center;padding:58px 46px 44px;border:1px solid rgba(212,168,83,.42);border-radius:24px;background:linear-gradient(145deg,rgba(31,17,10,.97),rgba(10,7,5,.98));box-shadow:0 30px 100px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06);transform:translateY(18px) scale(.97);transition:transform .65s cubic-bezier(.2,.8,.2,1)}
#rl-welcome-overlay.rl-show .rl-welcome-card{transform:translateY(0) scale(1)}
.rl-welcome-card:before{content:"";position:absolute;width:280px;height:280px;left:50%;top:-170px;transform:translateX(-50%);background:radial-gradient(circle,rgba(212,168,83,.22),transparent 68%);pointer-events:none}
.rl-welcome-close{position:absolute;right:17px;top:13px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#e8ddcf;font-size:22px;line-height:36px;cursor:pointer;transition:.25s ease}.rl-welcome-close:hover{background:rgba(212,168,83,.18);color:#fff;transform:rotate(90deg)}
.rl-welcome-monogram{font-family:'Playfair Display',serif;font-size:3.6rem;font-weight:800;letter-spacing:-.08em;line-height:1;margin-bottom:15px;background:linear-gradient(135deg,#f4d58b,#b98132,#f7e0a5);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 32px rgba(212,168,83,.22)}
.rl-welcome-kicker{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:#d4a853;font-weight:700;margin-bottom:13px}
.rl-welcome-title{margin:0 auto 14px;font-family:'Playfair Display',serif;font-size:clamp(1.75rem,4vw,2.55rem);line-height:1.12;color:#fff;font-weight:700}
.rl-welcome-title span{color:#d4a853}.rl-welcome-title .nowrap{white-space:nowrap;display:inline-block}
.rl-welcome-copy{max-width:470px;margin:0 auto 24px;color:#c7bdb2;font-size:1rem;line-height:1.75}
.rl-welcome-copy strong{color:#f0e8df}
.rl-welcome-asset{display:inline-flex;align-items:center;gap:10px;margin:0 auto 27px;padding:10px 17px;border:1px solid rgba(212,168,83,.28);border-radius:999px;background:rgba(212,168,83,.07);color:#e7d3ae;font-size:.83rem;letter-spacing:.08em}
.rl-welcome-asset b{color:#f4d58b;font-size:1rem}
.rl-welcome-cta{display:inline-flex;align-items:center;justify-content:center;min-width:210px;padding:14px 24px;border-radius:999px;background:linear-gradient(135deg,#d4a853,#a9782d);color:#160d07!important;text-decoration:none;font-size:.76rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;box-shadow:0 10px 30px rgba(212,168,83,.22);transition:.25s ease}.rl-welcome-cta:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(212,168,83,.34)}
.rl-welcome-skip{display:block;margin:17px auto 0;border:0;background:none;color:#82786e;font-size:.72rem;cursor:pointer}.rl-welcome-skip:hover{color:#c7bdb2}
@media(max-width:560px){.rl-welcome-card{padding:48px 24px 34px}.rl-welcome-monogram{font-size:3rem}.rl-welcome-copy{font-size:.92rem}.rl-welcome-asset{font-size:.72rem}}