:root {
                                         --blue: #000075;
                                         --gold-light: #f0c060;
                                         --gold-pale: #e8d5a0;
                                         --deep: #04060f;
                                         --navy: #080c1a;
                                         --mid: #0e1428;
                                         --slate: #1a2240;
                                         --red: #8b1a1a;
                                         --text: #c8bfa8;
                                         --text-dim: #7a7060;
                                     }
                                     
                                     *,
                                     *::before,
                                     *::after {
                                         box-sizing: border-box;
                                         margin: 0;
                                         padding: 0;
                                     }
                                     
                                     html {
                                         scroll-behavior: smooth;
                                     }
                                     
                                     body {
                                         background: var(--deep);
                                         color: var(--text);
                                         font-family: 'Crimson Pro', Georgia, serif;
                                         overflow-x: hidden;
                                     }

                                     .loading-screen {
                                         position: fixed;
                                         inset: 0;
                                         z-index: 9999;
                                         display: flex;
                                         align-items: center;
                                         justify-content: center;
                                         background: #02040b;
                                         color: #e8f6ff;
                                         text-align: center;
                                         overflow: hidden;
                                     }

                                     .loading-screen.hide {
                                         opacity: 0;
                                         visibility: hidden;
                                         pointer-events: none;
                                         transition: opacity 0.4s ease, visibility 0.4s ease;
                                     }

                                     .loader-effect {
                                         position: absolute;
                                         inset: 0;
                                         z-index: 1;
                                         overflow: hidden;
                                     }

                                     .loader-effect::before {
                                         content: '';
                                         position: absolute;
                                         inset: 0;
                                         z-index: 0;
                                         background: radial-gradient(circle at 50% 25%, rgba(56, 146, 218, 0.18), transparent 28%),
                                             linear-gradient(180deg, rgba(11, 27, 59, 0.96), rgba(2, 4, 10, 0.98) 70%);
                                     }

                                     .loader-effect::after {
                                         display: none;
                                     }

                                     .loader-wave {
                                         position: absolute;
                                         left: 0;
                                         right: 0;
                                         bottom: 0;
                                         width: 100%;
                                         height: 26%;
                                         z-index: 1;
                                     }

                                     .rain {
                                         position: absolute;
                                         inset: 0;
                                         background-image:
                                             radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 1.8px, transparent 1.8px),
                                             radial-gradient(circle at 34% 12%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.18) 1.2px, transparent 1.2px),
                                             radial-gradient(circle at 58% 24%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.22) 2px, transparent 2px),
                                             radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.16) 1.4px, transparent 1.4px),
                                             radial-gradient(circle at 42% 38%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.12) 1.6px, transparent 1.6px);
                                         opacity: 0.82;
                                         background-repeat: no-repeat;
                                     }

                                     .loader-inner {
                                         position: relative;
                                         z-index: 2;
                                         max-width: 320px;
                                         width: 85%;
                                         display: flex;
                                         flex-direction: column;
                                         align-items: center;
                                         gap: 18px;
                                     }

                                     .loader-logo {
                                         width: 140px;
                                         height: auto;
                                         filter: grayscale(100%) brightness(0.6);
                                         transition: filter 0.25s ease;
                                     }

                                     .loader-text {
                                         font-family: 'Cinzel', serif;
                                         font-size: 1rem;
                                         letter-spacing: 0.18em;
                                         text-transform: uppercase;
                                         color: #b8d8ff;
                                     }

                                     .loader-bar-shell {
                                         width: 100%;
                                         height: 12px;
                                         border-radius: 999px;
                                         background: rgba(255, 255, 255, 0.1);
                                         overflow: hidden;
                                         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.24);
                                     }

                                     .loader-progress {
                                         width: 0%;
                                         height: 100%;
                                         border-radius: 999px;
                                         background: linear-gradient(90deg, #72c5ff 0%, #4cb2ff 55%, #90e4ff 100%);
                                         transition: width 0.08s linear;
                                     }

                                     .loader-percent {
                                         font-family: 'Cinzel', serif;
                                         font-size: 1.4rem;
                                         font-weight: 700;
                                         color: #d4efff;
                                         letter-spacing: 0.08em;
                                     }

                                     /* ─── NAVBAR ─────────────────────────────────────────────────── */
                                     
                                     nav {
                                         position: fixed;
                                         top: 0;
                                         left: 0;
                                         right: 0;
                                         border-bottom: 1px solid rgba(232, 213, 160, 0.08);
                                         z-index: 100;
                                         display: flex;
                                         align-items: center;
                                         justify-content: space-between;
                                         padding: 18px 48px;
                                         background: linear-gradient(to bottom, rgba(4, 6, 15, 0.95) 0%, transparent 100%);
                                         backdrop-filter: blur(4px);
                                     }
                                     
                                     .nav-logo {
                                         display: flex;
                                         align-items: center;
                                         gap: 10px;
                                         text-decoration: none;
                                         color: var(--gold-light);
                                         font-family: 'Cinzel', serif;
                                         font-size: 1.2rem;
                                         font-weight: 900;
                                         letter-spacing: 0.15em;
                                     }
                                     
                                     .nav-logo img {
                                         width: 100px;
                                         height: 40px;
                                         object-fit: contain;
                                         filter: drop-shadow(0 0 2px rgba(200, 146, 42, 0.5));
                                     }
                                     /* - .nav-logo .logo-icon {
                      width: 36px;
                      height: 36px;
                      background: radial-gradient(circle at 40% 35%, var(--gold-light), var(--gold) 50%, #5a3000);
                      border-radius: 50%;
                      box-shadow: 0 0 12px rgba(200, 146, 42, 0.5);
                      flex-shrink: 0;
                  } */
                                     
                                     .nav-links {
                                         display: flex;
                                         align-items: center;
                                         gap: 32px;
                                         list-style: none;
                                     }
                                     
                                     .nav-links a {
                                         text-decoration: none;
                                         color: var(--text);
                                         font-family: 'Cinzel', serif;
                                         font-size: 0.88rem;
                                         letter-spacing: 0.15em;
                                         transition: color 0.2s;
                                     }
                                     
                                     .nav-links a:hover {
                                         color: var(--gold-light);
                                     }
                                     
                                     .hamburger {
                                         display: none;
                                         flex-direction: column;
                                         background: none;
                                         border: none;
                                         cursor: pointer;
                                         padding: 4px;
                                         gap: 4px;
                                     }
                                     
                                     .hamburger span {
                                         width: 24px;
                                         height: 2px;
                                         background: var(--text);
                                         transition: 0.3s;
                                     }
                                     
                                     .hamburger.active span:nth-child(1) {
                                         transform: rotate(45deg) translate(5px, 5px);
                                     }
                                     
                                     .hamburger.active span:nth-child(2) {
                                         opacity: 0;
                                     }
                                     
                                     .hamburger.active span:nth-child(3) {
                                         transform: rotate(-45deg) translate(7px, -6px);
                                     }
                                     
                                     .btn-buy {
                                         display: inline-block;
                                         padding: 10px 28px;
                                         background: linear-gradient(135deg, var(--blue) 0%, #a06b10 100%);
                                         color: #fff;
                                         font-family: 'Cinzel', serif;
                                         font-size: 0.95rem;
                                         font-weight: 600;
                                         letter-spacing: 0.2em;
                                         text-transform: uppercase;
                                         text-decoration: none;
                                         border: none;
                                         cursor: pointer;
                                         clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
                                         transition: opacity 0.2s, box-shadow 0.2s;
                                         box-shadow: 0 2px 20px rgba(200, 146, 42, 0.3);
                                     }
                                     
                                     .btn-buy:hover {
                                         opacity: 0.85;
                                         box-shadow: 0 4px 30px rgba(200, 146, 42, 0.55);
                                     }
                                     /* ─── HERO ──────────────────────────────────────────────────── */
                                     
                                     #hero {
                                         position: relative;
                                         min-height: 100vh;
                                         display: flex;
                                         flex-direction: column;
                                         align-items: center;
                                         justify-content: flex-end;
                                         padding-bottom: 80px;
                                         overflow: hidden;
                                     }
                                     
                                     .hero-sky {
                                         position: absolute;
                                         inset: 0;
                                         background: radial-gradient(ellipse 80% 60% at 50% -10%, #1a2a5e 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 50% 15%, #2a1a3e 0%, transparent 60%), linear-gradient(180deg, #07091a 0%, #0b1225 35%, #0e1830 60%, #060a14 100%);
                                     }

                                     .hero-image {
                                         position: absolute;
                                         top: 10%;
                                         left: 50%;
                                         transform: translateX(-50%);
                                         width: 100%;
                                         height: 100%;
                                         object-fit: cover;
                                         opacity: 0.15;
                                         pointer-events: none;
                                         z-index: 2;
                                     }

                                     /* Carousel slides (replaces single hero-image) */
                                     .hero-carousel {
                                         position: absolute;
                                         top: 72px;
                                         left: 0;
                                         right: 0;
                                         bottom: 0;
                                         z-index: 2;
                                         overflow: hidden;
                                     }

                                     .hero-slide {
                                         position: absolute;
                                         top: 0;
                                         left: 50%;
                                         transform: translateX(-50%);
                                         width: 100%;
                                         height: 100%;
                                         object-fit: cover;
                                         opacity: 0;
                                         transition: opacity 1s ease-in-out;
                                         pointer-events: none;
                                     }

                                     .hero-slide.active {
                                         opacity: 1;
                                     }

                                     .hero-texts {
                                         position: relative;
                                         min-height: 140px;
                                     }

                                     .hero-text {
                                         position: absolute;
                                         left: 0;
                                         right: 0;
                                         opacity: 0;
                                         transform: translateY(0);
                                         transition: opacity 0.9s ease, transform 0.9s ease;
                                     }

                                     .hero-text.active {
                                         opacity: 1;
                                         transform: translateY(0);
                                     }

                                     .hero-text.exit-up {
                                         opacity: 0;
                                         transform: translateY(-28px);
                                         transition: opacity 0.9s ease, transform 0.9s ease;
                                     }

                                     .hero-text.exit-left {
                                         opacity: 0;
                                         transform: translateX(-28px);
                                         transition: opacity 0.9s ease, transform 0.9s ease;
                                     }

                                     .hero-text.exit-down {
                                         opacity: 0;
                                         transform: translateY(28px);
                                         transition: opacity 0.9s ease, transform 0.9s ease;
                                     }
                                     
                                     .moon        { z-index: 2; }
                                    .hero-coin   { z-index: 3; }
                                    .mountains   { z-index: 4; }

                                    .hero-bottom-gradient {
                                        position: absolute;
                                        bottom: 0;
                                        left: 0;
                                        right: 0;
                                        height: 45vh;
                                        background: linear-gradient(to top, var(--deep) 0%, var(--deep) 15%, rgba(4, 6, 15, 0) 100%);
                                        z-index: 8;
                                        pointer-events: none;
                                    }

                                    .hero-content {
                                        z-index: 10;
                                    }


                                     @media (min-width: 1024px) {
                                         .hero-image {
                                             width: 120%;
                                         }
                                     }
                                     /* stars */
                                     
                                     .stars {
                                         position: absolute;
                                         inset: 0;
                                         overflow: hidden;
                                         pointer-events: none;
                                     }
                                     
                                     .stars::before,
                                     .stars::after {
                                         content: '';
                                         position: absolute;
                                         width: 2px;
                                         height: 2px;
                                         border-radius: 50%;
                                         background: white;
                                         box-shadow: 120px 80px 0 rgba(255, 255, 255, 0.7), 280px 40px 0 rgba(255, 255, 255, 0.5), 450px 130px 0 rgba(255, 255, 255, 0.8), 600px 60px 0 rgba(255, 255, 255, 0.4), 800px 90px 0 rgba(255, 255, 255, 0.6), 950px 30px 0 rgba(255, 255, 255, 0.7), 1100px 110px 0 rgba(255, 255, 255, 0.5), 1300px 50px 0 rgba(255, 255, 255, 0.8), 1450px 120px 0 rgba(255, 255, 255, 0.4), 1600px 70px 0 rgba(255, 255, 255, 0.6), 200px 180px 0 rgba(255, 255, 255, 0.3), 380px 220px 0 rgba(255, 255, 255, 0.5), 560px 160px 0 rgba(255, 255, 255, 0.7), 730px 240px 0 rgba(255, 255, 255, 0.4), 900px 190px 0 rgba(255, 255, 255, 0.6), 70px 300px 0 rgba(255, 255, 255, 0.3), 340px 350px 0 rgba(255, 255, 255, 0.5);
                                     }
                                     
                                     .stars::after {
                                         box-shadow: 160px 140px 0 rgba(255, 255, 255, 0.4), 310px 100px 0 rgba(255, 255, 255, 0.6), 490px 200px 0 rgba(255, 255, 255, 0.3), 650px 150px 0 rgba(255, 255, 255, 0.7), 820px 180px 0 rgba(255, 255, 255, 0.5), 1000px 120px 0 rgba(255, 255, 255, 0.4), 1200px 70px 0 rgba(255, 255, 255, 0.6), 1380px 200px 0 rgba(255, 255, 255, 0.3), 1520px 90px 0 rgba(255, 255, 255, 0.7), 240px 280px 0 rgba(255, 255, 255, 0.5), 420px 320px 0 rgba(255, 255, 255, 0.3), 680px 290px 0 rgba(255, 255, 255, 0.6);
                                     }
                                     /* mountains using SVG */
                                     
                                     .mountains {
                                         position: absolute;
                                         bottom: 0;
                                         left: 0;
                                         right: 0;
                                         height: 65%;
                                         pointer-events: none;
                                     }
                                     
                                     /* .moon {
                                         position: absolute;
                                         top: 14%;
                                         left: 50%;
                                         transform: translateX(-50%);
                                         width: 90px;
                                         height: 90px;
                                         border-radius: 50%;
                                         background: radial-gradient(circle at 40% 35%, #fff9e0 0%, #f5d070 40%, #d4922a 80%);
                                         box-shadow: 0 0 30px rgba(240, 192, 96, 0.6), 0 0 80px rgba(200, 146, 42, 0.3), 0 0 150px rgba(200, 146, 42, 0.1);
                                     } */
                                     
                                     .hero-coin {
                                         position: absolute;
                                         top: 12%;
                                         right: 18%;
                                         width: 80px;
                                         height: 80px;
                                         border-radius: 50%;
                                         background: radial-gradient(circle at 35% 30%, #ffe080 0%, var(--gold) 50%, #5a3500 100%);
                                         box-shadow: 0 0 24px rgba(200, 146, 42, 0.5), inset 0 2px 4px rgba(255, 240, 160, 0.4);
                                         animation: floatCoin 4s ease-in-out infinite;
                                     }
                                     
                                     @keyframes floatCoin {
                                         0%,
                                         100% {
                                             transform: translateY(0px) rotate(0deg);
                                         }
                                         50% {
                                             transform: translateY(-14px) rotate(8deg);
                                         }
                                     }
                                     
                                     .hero-content {
                                         position: absolute;
                                         z-index: 10;
                                         left: 6%;
                                         top: 45%;
                                         transform: translateY(-50%);
                                         text-align: left;
                                         max-width: 640px;
                                         padding-left: 48px;
                                         padding-right: 24px;
                                         width: 100%;
                                     }
                                     
                                     .hero-eyebrow {
                                         font-family: 'Cinzel', serif;
                                         font-size: 0.7rem;
                                         letter-spacing: 0.35em;
                                         color: var(--gold);
                                         text-transform: uppercase;
                                         margin-bottom: 18px;
                                         opacity: 0.85;
                                     }
                                     
                                     .hero-title {
                                         font-family: 'Cinzel', serif;
                                         font-size: clamp(2.8rem, 7vw, 5rem);
                                         font-weight: 900;
                                         color: var(--gold-light);
                                         line-height: 1;
                                         letter-spacing: 0.06em;
                                         text-shadow: 0 0 40px rgba(200, 146, 42, 0.4), 0 4px 12px rgba(0, 0, 0, 0.8);
                                         margin-bottom: 10px;
                                         text-align: left;
                                         transition: text-shadow 0.25s ease, transform 0.25s ease;
                                     }
                                     
                                     .hero-content:hover .hero-title {
                                         text-shadow: 0 0 48px rgba(255, 220, 120, 0.55), 0 4px 12px rgba(0, 0, 0, 0.8);
                                         transform: translateY(-1px);
                                     }
                                     
                                     .hero-subtitle {
                                         font-family: 'Cinzel', serif;
                                         font-size: clamp(0.7rem, 1.5vw, 0.9rem);
                                         letter-spacing: 0.3em;
                                         color: var(--text-dim);
                                         margin-bottom: 26px;
                                         text-transform: uppercase;
                                     }
                                     
                                     .hero-desc {
                                         font-size: 1.05rem;
                                         font-weight: 300;
                                         line-height: 1.7;
                                         color: var(--text);
                                         max-width: 520px;
                                         margin: 0 auto 32px;
                                         font-style: italic;
                                     }
                                     
                                     .hero-cta-group {
                                         display: flex;
                                         gap: 16px;
                                         justify-content: center;
                                         flex-wrap: wrap;
                                         position: absolute;
                                         bottom: 80px;
                                         left: 50%;
                                         transform: translateX(-50%);
                                         z-index: 10;
                                         opacity: 0;
                                         animation: heroCtaFadeIn 0.8s ease-out 2.5s forwards;
                                     }
                                     
                                     @keyframes heroCtaFadeIn {
                                         0% {
                                             opacity: 0;
                                             transform: translateX(-50%) translateY(20px);
                                         }
                                         100% {
                                             opacity: 1;
                                             transform: translateX(-50%) translateY(0);
                                         }
                                     }
                                     
                                     .btn-primary {
                                         padding: 14px 40px;
                                         background: linear-gradient(135deg, var(--blue) 0%, #7a4e08 100%);
                                         color: #fff;
                                         font-family: 'Cinzel', serif;
                                         font-size: 0.75rem;
                                         font-weight: 700;
                                         letter-spacing: 0.25em;
                                         text-transform: uppercase;
                                         text-decoration: none;
                                         clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
                                         transition: all 0.25s;
                                         box-shadow: 0 4px 20px rgba(200, 146, 42, 0.4);
                                     }
                                     
                                     .btn-primary:hover {
                                         box-shadow: 0 6px 30px rgba(200, 146, 42, 0.65);
                                         transform: translateY(-2px);
                                     }
                                     
                                     .btn-ghost {
                                         padding: 13px 36px;
                                         border: 1px solid rgba(200, 146, 42, 0.4);
                                         color: var(--gold-pale);
                                         font-family: 'Cinzel', serif;
                                         font-size: 0.75rem;
                                         font-weight: 600;
                                         letter-spacing: 0.25em;
                                         text-transform: uppercase;
                                         text-decoration: none;
                                         background: transparent;
                                         cursor: pointer;
                                         clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
                                         transition: all 0.25s;
                                         filter: drop-shadow(0 0 12px rgba(200, 146, 42, 0.2));
                                     }
                                     
                                     .btn-ghost:hover {
                                         background: rgba(200, 146, 42, 0.08);
                                         border-color: var(--gold);
                                         filter: drop-shadow(0 0 24px rgba(200, 146, 42, 0.6));
                                     }

 /* ================UTILITY SECTION STYLES======================= */


                                    /* ---------- Section wrapper ---------- */
                                    .utility-section {
                                    background: var(--deep);
                                    padding: 80px 20px 60px;
                                    font-family: 'Cinzel', sans-serif;
                                    overflow: hidden;
                                    position: relative;
                                    }

                                    .utility-section::before {
                                    content: '';
                                    position: absolute;
                                    inset: 0;
                                    background:
                                        radial-gradient(ellipse 60% 40% at 20% 50%, rgba(240,192,96,0.05) 0%, transparent 70%),
                                        radial-gradient(ellipse 50% 35% at 80% 50%, rgba(0,0,117,0.08) 0%, transparent 70%);
                                    pointer-events: none;
                                    }

                                    /* ---------- Header ---------- */
                                    .utility-header {
                                    text-align: center;
                                    margin-bottom: 48px;
                                    position: relative;
                                    z-index: 1;
                                    }

                                    .utility-label {
                                    font-size: 11px;
                                    letter-spacing: 4px;
                                    color: var(--gold-light);
                                    margin: 0 0 12px;
                                    font-weight: 600;
                                    }

                                    .utility-title {
                                    font-size: clamp(28px, 5vw, 44px);
                                    font-weight: 800;
                                    color: var(--gold-pale);
                                    margin: 0 0 10px;
                                    letter-spacing: -0.5px;
                                    line-height: 1.1;
                                    }

                                    .utility-subtitle {
                                    font-size: 14px;
                                    color: var(--text-dim);
                                    margin: 0;
                                    }

                                    /* ---------- Carousel layout ---------- */
                                    .carousel-container {
                                    display: flex;
                                    align-items: center;
                                    gap: 12px;
                                    max-width: 1000px;
                                    margin: 0 auto;
                                    position: relative;
                                    z-index: 1;
                                    }

                                    .carousel-track-wrapper {
                                    flex: 1;
                                    overflow: hidden;
                                    cursor: grab;
                                    padding-bottom: 32px;
                                    padding-top: 28px;
                                    }

                                    .carousel-track-wrapper:active {
                                    cursor: grabbing;
                                    }

                                    .carousel-track {
                                    display: flex;
                                    gap: 24px;
                                    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
                                    will-change: transform;
                                    user-select: none;
                                    }

                                    /* ---------- Card wrapper ---------- */
                                    .card-wrapper {
                                    flex: 0 0 280px;
                                    height: 380px;
                                    perspective: 1000px;
                                    }

                                    /* ---------- Flip card ---------- */
                                    .flip-card {
                                    width: 100%;
                                    height: 100%;
                                    position: relative;
                                    outline: none;
                                    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                                    cursor: pointer;
                                    }

                                    .flip-card:hover {
                                    transform: translateY(-12px);
                                    }

                                    .flip-card-inner {
                                    position: relative;
                                    width: 100%;
                                    height: 100%;
                                    transform-style: preserve-3d;
                                    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
                                    border-radius: 20px;
                                    }

                                    .flip-card.is-flipped .flip-card-inner {
                                    transform: rotateY(180deg);
                                    }

                                    .flip-card-front,
                                    .flip-card-back {
                                    position: absolute;
                                    inset: 0;
                                    border-radius: 20px;
                                    backface-visibility: hidden;
                                    -webkit-backface-visibility: hidden;
                                    overflow: hidden;
                                    }

                                    /* ---------- FRONT FACE ---------- */
                                    .flip-card-front {
                                    background: var(--mid);
                                    border: 1px solid var(--slate);
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 16px;
                                    padding: 30px 20px 24px;
                                    transition: border-color 0.3s, box-shadow 0.3s;
                                    }

                                    .flip-card:hover .flip-card-front,
                                    .flip-card:focus .flip-card-front {
                                    border-color: var(--gold-light);
                                    box-shadow: 0 0 36px rgba(240,192,96,0.25), 0 16px 40px rgba(0,0,0,0.6);
                                    }

                                    .card-glow {
                                    position: absolute;
                                    width: 140px;
                                    height: 140px;
                                    border-radius: 50%;
                                    background: radial-gradient(circle, rgba(240,192,96,0.1) 0%, transparent 70%);
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%, -60%);
                                    pointer-events: none;
                                    }

                                    .card-icon-wrap {
                                    width: 88px;
                                    height: 88px;
                                    border-radius: 22px;
                                    background: var(--slate);
                                    border: 1px solid rgba(240,192,96,0.2);
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    position: relative;
                                    z-index: 1;
                                    transition: transform 0.3s, background 0.3s;
                                    }

                                    .flip-card:hover .card-icon-wrap {
                                    transform: translateY(-4px) scale(1.05);
                                    background: rgba(240,192,96,0.08);
                                    }

                                    .card-img {
                                    width: 52px;
                                    height: 52px;
                                    object-fit: contain;
                                    display: block;
                                    }

                                    .card-name {
                                    font-size: 18px;
                                    font-weight: 700;
                                    color: var(--gold-pale);
                                    letter-spacing: 0.2px;
                                    position: relative;
                                    z-index: 1;
                                    }

                                    .card-flip-hint {
                                    font-size: 11px;
                                    color: var(--text-dim);
                                    letter-spacing: 0.5px;
                                    position: relative;
                                    z-index: 1;
                                    opacity: 0;
                                    transform: translateY(4px);
                                    transition: opacity 0.3s, transform 0.3s;
                                    }

                                    .flip-card:hover .card-flip-hint,
                                    .flip-card:focus .card-flip-hint {
                                    opacity: 1;
                                    transform: translateY(0);
                                    }

                                    /* ---------- BACK FACE ---------- */
                                    .flip-card-back {
                                    background: linear-gradient(135deg, var(--navy) 0%, var(--mid) 100%);
                                    border: 1px solid rgba(240,192,96,0.25);
                                    transform: rotateY(180deg);
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;
                                    padding: 28px 22px;
                                    gap: 10px;
                                    text-align: center;
                                    transition: border-color 0.3s, box-shadow 0.3s;
                                    }

                                    .flip-card:hover .flip-card-back,
                                    .flip-card:focus .flip-card-back {
                                    box-shadow: 0 0 36px rgba(240,192,96,0.15), 0 16px 40px rgba(0,0,0,0.6);
                                    }

                                    .flip-card-back::before {
                                    content: '';
                                    position: absolute;
                                    top: 0;
                                    left: 30px;
                                    right: 30px;
                                    height: 2px;
                                    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
                                    border-radius: 2px;
                                    }

                                    .back-icon {
                                    font-size: 36px;
                                    line-height: 1;
                                    margin-bottom: 4px;
                                    }

                                    .back-title {
                                    font-size: 20px;
                                    font-weight: 800;
                                    color: var(--gold-pale);
                                    margin: 0;
                                    letter-spacing: -0.3px;
                                    }

                                    .back-desc {
                                    font-size: 13px;
                                    color: var(--text);
                                    line-height: 1.65;
                                    margin: 0;
                                    text-transform: lowercase !important;
                                    }

                                    .back-desc strong {
                                    color: var(--gold-light);
                                    }

                                    .back-cta {
                                    display: inline-block;
                                    margin-top: 8px;
                                    padding: 9px 22px;
                                    border-radius: 50px;
                                    background: transparent;
                                    border: 1px solid var(--gold-light);
                                    color: var(--gold-light);
                                    font-size: 12px;
                                    font-weight: 600;
                                    letter-spacing: 0.5px;
                                    text-decoration: none;
                                    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
                                    }

                                    .back-cta:hover {
                                    background: var(--gold-light);
                                    color: var(--deep);
                                    box-shadow: 0 0 16px rgba(240,192,96,0.3);
                                    }

                                    /* ---------- Carousel nav buttons ---------- */
                                    .carousel-btn {
                                    flex: 0 0 42px;
                                    width: 42px;
                                    height: 42px;
                                    border-radius: 50%;
                                    background: var(--slate);
                                    border: 1px solid rgba(240,192,96,0.2);
                                    color: var(--gold-light);
                                    cursor: pointer;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
                                    padding: 0;
                                    }

                                    .carousel-btn svg {
                                    width: 18px;
                                    height: 18px;
                                    }

                                    .carousel-btn:hover {
                                    background: rgba(240,192,96,0.12);
                                    box-shadow: 0 0 14px rgba(240,192,96,0.2);
                                    }

                                    .carousel-btn:disabled {
                                    opacity: 0.25;
                                    cursor: default;
                                    pointer-events: none;
                                    }

                                    /* ---------- Dot indicators ---------- */
                                    .carousel-dots {
                                    display: flex;
                                    justify-content: center;
                                    gap: 8px;
                                    margin-top: 28px;
                                    position: relative;
                                    z-index: 1;
                                    }

                                    .dot {
                                    width: 6px;
                                    height: 6px;
                                    border-radius: 50%;
                                    background: var(--slate);
                                    cursor: pointer;
                                    transition: background 0.25s, transform 0.25s, width 0.25s;
                                    border: none;
                                    padding: 0;
                                    }

                                    .dot.active {
                                    background: var(--gold-light);
                                    width: 20px;
                                    border-radius: 3px;
                                    box-shadow: 0 0 8px rgba(240,192,96,0.4);
                                    }

                                    /* ---------- Mobile responsive ---------- */
                                    @media (max-width: 768px) {
                                    .utility-section {
                                        padding: 60px 16px 48px;
                                    }

                                    .card-wrapper {
                                        flex: 0 0 100%;
                                        max-width: 100%;
                                        height: 400px;
                                    }

                                    .carousel-btn {
                                        width: 36px;
                                        height: 36px;
                                        flex: 0 0 36px;
                                    }

                                    .card-icon-wrap {
                                        width: 74px;
                                        height: 74px;
                                    }

                                    .card-img {
                                        width: 42px;
                                        height: 42px;
                                    }

                                    .card-name {
                                        font-size: 16px;
                                    }

                                    .carousel-container::after {
                                        content: '👆';
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        font-size: 44px;
                                        z-index: 10;
                                        pointer-events: none;
                                        animation: swipeGesture 4s infinite;
                                        filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
                                    }

                                    .carousel-container.swiped::after {
                                        animation: fadeOutSwipe 0.5s forwards !important;
                                    }
                                    }

                                    @media (max-width: 480px) {
                                    .card-wrapper {
                                        flex: 0 0 100%;
                                        height: 380px;
                                    }

                                    .carousel-btn {
                                        display: none;
                                    }
                                    }

                                    @keyframes swipeGesture {
                                        0%, 10% { transform: translate(40px, -50%) rotate(-15deg); opacity: 0; }
                                        15% { opacity: 1; }
                                        60% { transform: translate(-40px, -50%) rotate(-15deg); opacity: 1; }
                                        65%, 100% { transform: translate(-40px, -50%) rotate(-15deg); opacity: 0; }
                                    }

                                    @keyframes fadeOutSwipe {
                                        to { opacity: 0; visibility: hidden; }
                                    }

                                    /* ===========ROADMAP SECTION STYLES============ */

                                    /* ── Keyframes ─────────────────────────────────────────────── */
                                    @keyframes rm-pulse-ring {
                                    0%   { transform: scale(1);   opacity: 0.7; }
                                    100% { transform: scale(2.2); opacity: 0; }
                                    }

                                    @keyframes rm-badge-pulse {
                                    0%, 100% { opacity: 1; transform: scale(1); }
                                    50%       { opacity: 0.4; transform: scale(0.7); }
                                    }

                                    @keyframes rm-card-in {
                                    0%   { opacity: 0; transform: translateY(-12px) scale(0.97); }
                                    100% { opacity: 1; transform: translateY(0)     scale(1); }
                                    }

                                    @keyframes rm-glow-breathe {
                                    0%, 100% { opacity: 0.55; }
                                    50%       { opacity: 1; }
                                    }

                                    @keyframes rm-progress-grow {
                                    from { width: 0; }
                                    }

                                    @keyframes rm-shimmer {
                                    0%   { background-position: -200% center; }
                                    100% { background-position:  200% center; }
                                    }

                                    /* ── Section ───────────────────────────────────────────────── */
                                    .roadmap-section {
                                    position: relative;
                                    background: var(--deep);
                                    padding: 90px 20px 80px;
                                    font-family: 'Cinzel', system-ui, sans-serif;
                                    font-family: 'Cinzel', system-ui, sans-serif;
                                    overflow: hidden;
                                    }

                                    /* Subtle dot grid background */
                                    .rm-grid-bg {
                                    position: absolute;
                                    inset: 0;
                                    background-image: radial-gradient(circle, rgba(240,192,96,0.07) 1px, transparent 1px);
                                    background-size: 36px 36px;
                                    pointer-events: none;
                                    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
                                    }

                                    /* ── Header ────────────────────────────────────────────────── */
                                    .rm-header {
                                    text-align: center;
                                    margin-bottom: 64px;
                                    position: relative;
                                    z-index: 1;
                                    }

                                    .rm-label {
                                    font-size: 11px;
                                    letter-spacing: 4px;
                                    color: var(--gold-light);
                                    margin: 0 0 12px;
                                    font-weight: 600;
                                    }

                                    .rm-title {
                                    font-size: clamp(28px, 5vw, 44px);
                                    font-weight: 800;
                                    color: var(--gold-pale);
                                    margin: 0 0 10px;
                                    letter-spacing: -0.5px;
                                    line-height: 1.1;
                                    }

                                    .rm-subtitle {
                                    font-size: 14px;
                                    color: var(--text-dim);
                                    margin: 0;
                                    }

                                    /* ── Wrapper & spine ───────────────────────────────────────── */
                                    .rm-wrapper {
                                    position: relative;
                                    max-width: 780px;
                                    margin: 0 auto;
                                    z-index: 1;
                                    }

                                    .rm-spine {
                                    position: absolute;
                                    left: 22px;               /* aligns with node center */
                                    top: 20px;
                                    bottom: 20px;
                                    width: 2px;
                                    background: var(--slate);
                                    border-radius: 2px;
                                    overflow: hidden;
                                    }

                                    /* Animated fill that grows as you scroll (JS-driven via --fill) */
                                    .rm-spine-fill {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    background: linear-gradient(180deg, var(--gold-light), rgba(240,192,96,0.3));
                                    border-radius: 2px;
                                    transition: height 0.6s ease;
                                    height: 0%;         /* set by JS */
                                    }

                                    /* ── Phase row ─────────────────────────────────────────────── */
                                    .rm-phases {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 0;
                                    }

                                    .rm-phase {
                                    display: grid;
                                    grid-template-columns: 46px 1fr;
                                    gap: 0 20px;
                                    position: relative;
                                    padding-bottom: 12px;
                                    }

                                    /* Last phase — no extra bottom gap */
                                    .rm-phase:last-child {
                                    padding-bottom: 0;
                                    }

                                    /* ── Node column ───────────────────────────────────────────── */
                                    .rm-node-col {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    padding-top: 18px;
                                    }

                                    .rm-node {
                                    position: relative;
                                    width: 44px;
                                    height: 44px;
                                    border-radius: 50%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    z-index: 2;
                                    flex-shrink: 0;
                                    }

                                    /* Shared node ring */
                                    .rm-node-ring {
                                    position: absolute;
                                    inset: 0;
                                    border-radius: 50%;
                                    border: 2px solid var(--slate);
                                    background: var(--mid);
                                    transition: border-color 0.3s, box-shadow 0.3s;
                                    }

                                    /* ── Node states ───────────────────────────────────────────── */

                                    /* Complete */
                                    .rm-phase.complete .rm-node-ring {
                                    border-color: var(--gold-light);
                                    background: rgba(240,192,96,0.12);
                                    }

                                    .rm-phase.complete .rm-node-icon {
                                    width: 18px;
                                    height: 18px;
                                    color: var(--gold-light);
                                    position: relative;
                                    z-index: 1;
                                    }

                                    /* In-progress */
                                    .rm-phase.in-progress .rm-node-ring {
                                    border-color: var(--gold-light);
                                    background: rgba(240,192,96,0.08);
                                    box-shadow: 0 0 0 4px rgba(240,192,96,0.1);
                                    }

                                    .rm-node-pulse {
                                    display: none;
                                    position: absolute;
                                    inset: -4px;
                                    border-radius: 50%;
                                    border: 2px solid var(--gold-light);
                                    animation: rm-pulse-ring 1.8s ease-out infinite;
                                    }

                                    .rm-phase.in-progress .rm-node-pulse {
                                    display: block;
                                    }

                                    .rm-node-dot {
                                    display: none;
                                    width: 10px;
                                    height: 10px;
                                    border-radius: 50%;
                                    background: var(--gold-light);
                                    position: relative;
                                    z-index: 1;
                                    box-shadow: 0 0 8px var(--gold-light);
                                    }

                                    .rm-phase.in-progress .rm-node-dot {
                                    display: block;
                                    }

                                    /* Upcoming */
                                    .rm-phase.upcoming .rm-node-ring {
                                    border-color: var(--slate);
                                    background: var(--navy);
                                    }

                                    .rm-phase.upcoming .rm-node-icon {
                                    width: 14px;
                                    height: 14px;
                                    color: var(--text-dim);
                                    position: relative;
                                    z-index: 1;
                                    }

                                    /* ── Content column ────────────────────────────────────────── */
                                    .rm-content-col {
                                    padding-top: 8px;
                                    padding-bottom: 8px;
                                    }

                                    /* ── Phase button ──────────────────────────────────────────── */
                                    .rm-btn {
                                    width: 100%;
                                    background: var(--mid);
                                    border: 1px solid var(--slate);
                                    border-radius: 14px;
                                    padding: 16px 20px 16px 20px;
                                    cursor: pointer;
                                    text-align: left;
                                    display: grid;
                                    grid-template-columns: 1fr auto;
                                    grid-template-rows: auto auto;
                                    gap: 2px 12px;
                                    align-items: center;
                                    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
                                    position: relative;
                                    overflow: hidden;
                                    }

                                    /* Shimmer on hover */
                                    .rm-btn::after {
                                    content: '';
                                    position: absolute;
                                    inset: 0;
                                    background: linear-gradient(105deg, transparent 40%, rgba(240,192,96,0.06) 50%, transparent 60%);
                                    background-size: 200% 100%;
                                    opacity: 0;
                                    transition: opacity 0.3s;
                                    }

                                    .rm-btn:hover::after {
                                    opacity: 1;
                                    animation: rm-shimmer 0.8s ease forwards;
                                    }

                                    /* Complete button */
                                    .rm-phase.complete .rm-btn {
                                    border-color: rgba(240,192,96,0.2);
                                    }

                                    .rm-phase.complete .rm-btn:hover {
                                    border-color: var(--gold-light);
                                    background: rgba(240,192,96,0.05);
                                    box-shadow: 0 0 24px rgba(240,192,96,0.1);
                                    }

                                    /* In-progress button */
                                    .rm-phase.in-progress .rm-btn {
                                    border-color: rgba(240,192,96,0.35);
                                    background: rgba(240,192,96,0.04);
                                    }

                                    .rm-phase.in-progress .rm-btn:hover {
                                    border-color: var(--gold-light);
                                    box-shadow: 0 0 28px rgba(240,192,96,0.15);
                                    }

                                    /* Upcoming button */
                                    .rm-phase.upcoming .rm-btn {
                                    border-color: var(--slate);
                                    opacity: 0.75;
                                    }

                                    .rm-phase.upcoming .rm-btn:hover {
                                    border-color: rgba(240,192,96,0.2);
                                    opacity: 1;
                                    }

                                    /* Active / open button */
                                    .rm-btn[aria-expanded="true"] {
                                    border-color: var(--gold-light) !important;
                                    background: rgba(240,192,96,0.06) !important;
                                    border-bottom-left-radius: 0;
                                    border-bottom-right-radius: 0;
                                    border-bottom-color: transparent !important;
                                    box-shadow: 0 0 28px rgba(240,192,96,0.12) !important;
                                    }

                                    /* Button text */
                                    .rm-btn-status {
                                    grid-column: 1;
                                    grid-row: 1;
                                    font-size: 10px;
                                    letter-spacing: 2.5px;
                                    font-weight: 700;
                                    text-transform: uppercase;
                                    color: var(--text-dim);
                                    }

                                    .rm-phase.complete  .rm-btn-status { color: var(--gold-light); }
                                    .rm-phase.in-progress .rm-btn-status { color: var(--gold-light); }

                                    .rm-btn-title {
                                    grid-column: 1;
                                    grid-row: 2;
                                    font-size: 16px;
                                    font-weight: 700;
                                    color: var(--gold-pale);
                                    line-height: 1.2;
                                    }

                                    .rm-phase.upcoming .rm-btn-title {
                                    color: var(--text);
                                    }

                                    .rm-btn-label {
                                    grid-column: 1;
                                    grid-row: 3;
                                    font-size: 12px;
                                    color: var(--text-dim);
                                    margin-top: 2px;
                                    }

                                    .rm-btn-arrow {
                                    grid-column: 2;
                                    grid-row: 1 / 4;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    width: 28px;
                                    height: 28px;
                                    border-radius: 50%;
                                    background: var(--slate);
                                    flex-shrink: 0;
                                    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), background 0.2s;
                                    }

                                    .rm-btn-arrow svg {
                                    width: 14px;
                                    height: 14px;
                                    color: var(--gold-light);
                                    display: block;
                                    }

                                    .rm-btn[aria-expanded="true"] .rm-btn-arrow {
                                    transform: rotate(180deg);
                                    background: rgba(240,192,96,0.12);
                                    }

                                    /* ── Card wrap (accordion) ─────────────────────────────────── */
                                    .rm-card-wrap {
                                    max-height: 0;
                                    overflow: hidden;
                                    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                                    }

                                    .rm-card-wrap.is-open {
                                    max-height: 520px;
                                    }

                                    /* ── Card ──────────────────────────────────────────────────── */
                                    .rm-card {
                                    position: relative;
                                    background: var(--navy);
                                    border: 1px solid var(--gold-light);
                                    border-top: none;
                                    border-radius: 0 0 14px 14px;
                                    overflow: hidden;
                                    }

                                    /* Luminous glow */
                                    .rm-card-glow {
                                    position: absolute;
                                    inset: 0;
                                    border-radius: inherit;
                                    box-shadow:
                                        0 0 30px rgba(240,192,96,0.18),
                                        0 0 80px rgba(240,192,96,0.08),
                                        inset 0 0 40px rgba(240,192,96,0.04);
                                    pointer-events: none;
                                    animation: rm-glow-breathe 3s ease-in-out infinite;
                                    }

                                    /* Top accent bar */
                                    .rm-card::before {
                                    content: '';
                                    display: block;
                                    height: 2px;
                                    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
                                    }

                                    /* Card animation when it opens */
                                    .rm-card-wrap.is-open .rm-card-inner {
                                    animation: rm-card-in 0.45s cubic-bezier(0.4,0,0.2,1) both;
                                    animation-delay: 0.05s;
                                    }

                                    .rm-card-inner {
                                    padding: 20px 22px 22px;
                                    }

                                    /* Card header row */
                                    .rm-card-header {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    margin-bottom: 14px;
                                    }

                                    .rm-card-phase-tag {
                                    font-size: 10px;
                                    letter-spacing: 2px;
                                    font-weight: 700;
                                    text-transform: uppercase;
                                    padding: 4px 10px;
                                    border-radius: 20px;
                                    }

                                    .rm-card-phase-tag.complete    { background: rgba(240,192,96,0.12); color: var(--gold-light); }
                                    .rm-card-phase-tag.in-progress { background: rgba(240,192,96,0.12); color: var(--gold-light); }
                                    .rm-card-phase-tag.upcoming    { background: var(--slate);           color: var(--text-dim); }

                                    .rm-card-status-badge {
                                    display: flex;
                                    align-items: center;
                                    gap: 6px;
                                    font-size: 11px;
                                    font-weight: 600;
                                    letter-spacing: 0.5px;
                                    }

                                    .rm-card-status-badge svg {
                                    width: 12px;
                                    height: 12px;
                                    }

                                    .rm-card-status-badge.complete    { color: var(--gold-light); }
                                    .rm-card-status-badge.in-progress { color: var(--gold-light); }
                                    .rm-card-status-badge.upcoming    { color: var(--text-dim); }

                                    /* Pulsing dot for in-progress badge */
                                    .badge-pulse {
                                    width: 8px;
                                    height: 8px;
                                    border-radius: 50%;
                                    background: var(--gold-light);
                                    box-shadow: 0 0 6px var(--gold-light);
                                    animation: rm-badge-pulse 1.6s ease-in-out infinite;
                                    display: inline-block;
                                    }

                                    /* Card text */
                                    .rm-card-title {
                                    font-size: 18px;
                                    font-weight: 800;
                                    color: var(--gold-pale);
                                    margin: 0 0 4px;
                                    }

                                    .rm-card-subtitle {
                                    font-size: 12px;
                                    color: var(--text-dim);
                                    margin: 0 0 16px;
                                    letter-spacing: 0.3px;
                                    }

                                    /* Card list */
                                    .rm-card-list {
                                    list-style: none;
                                    padding: 0;
                                    margin: 0;
                                    display: flex;
                                    flex-direction: column;
                                    gap: 9px;
                                    }

                                    .rm-card-list li {
                                    display: flex;
                                    align-items: flex-start;
                                    gap: 10px;
                                    font-size: 13px;
                                    color: var(--text);
                                    line-height: 1.5;
                                    }

                                    .rm-card-list li::before {
                                    content: '';
                                    flex-shrink: 0;
                                    width: 6px;
                                    height: 6px;
                                    border-radius: 50%;
                                    background: var(--gold-light);
                                    margin-top: 6px;
                                    box-shadow: 0 0 6px rgba(240,192,96,0.4);
                                    }

                                    /* ── Progress bar (phase 4 only) ───────────────────────────── */
                                    .rm-card-progress {
                                    margin-top: 18px;
                                    padding-top: 16px;
                                    border-top: 1px solid var(--slate);
                                    }

                                    .rm-progress-header {
                                    display: flex;
                                    justify-content: space-between;
                                    font-size: 11px;
                                    color: var(--text-dim);
                                    margin-bottom: 8px;
                                    font-weight: 600;
                                    letter-spacing: 0.3px;
                                    }

                                    .rm-progress-pct {
                                    color: var(--gold-light);
                                    }

                                    .rm-progress-bar {
                                    height: 5px;
                                    background: var(--slate);
                                    border-radius: 3px;
                                    overflow: hidden;
                                    }

                                    .rm-progress-fill {
                                    height: 100%;
                                    border-radius: 3px;
                                    background: linear-gradient(90deg, var(--gold-light), rgba(240,192,96,0.5));
                                    box-shadow: 0 0 8px rgba(240,192,96,0.4);
                                    animation: rm-progress-grow 1.2s cubic-bezier(0.4,0,0.2,1) both;
                                    animation-delay: 0.3s;
                                    }

                                    /* ── Mobile ────────────────────────────────────────────────── */
                                    @media (max-width: 600px) {
                                    .roadmap-section {
                                        padding: 64px 16px 60px;
                                    }

                                    .rm-phase {
                                        grid-template-columns: 38px 1fr;
                                        gap: 0 14px;
                                    }

                                    .rm-node {
                                        width: 38px;
                                        height: 38px;
                                    }

                                    .rm-spine {
                                        left: 18px;
                                    }

                                    .rm-btn {
                                        padding: 14px 16px;
                                    }

                                    .rm-btn-title {
                                        font-size: 14px;
                                    }

                                    .rm-card-inner {
                                        padding: 16px;
                                    }

                                    .rm-card-title {
                                        font-size: 16px;
                                    }

                                    .rm-card-list li {
                                        font-size: 12px;
                                    }
                                    }


                                     /* ─── SECTION COMMON ─────────────────────────────────────────── */
                                     
                                     section {
                                         padding: 100px 48px;
                                     }
                                     
                                     .section-label {
                                         font-family: 'Cinzel', serif;
                                         font-size: 0.65rem;
                                         letter-spacing: 0.4em;
                                         color: var(--gold);
                                         text-transform: uppercase;
                                         margin-bottom: 16px;
                                         display: flex;
                                         align-items: center;
                                         gap: 12px;
                                     }
                                     
                                     .section-label::before {
                                         content: '';
                                         display: block;
                                         width: 30px;
                                         height: 1px;
                                         background: var(--gold);
                                         opacity: 0.6;
                                     }
                                     
                                     .section-title {
                                         font-family: 'Cinzel', serif;
                                         font-size: clamp(1.8rem, 4vw, 3rem);
                                         font-weight: 900;
                                         color: var(--gold-light);
                                         letter-spacing: 0.05em;
                                         line-height: 1.15;
                                         margin-bottom: 28px;
                                     }
                                     
                                     .divider {
                                         width: 60px;
                                         height: 2px;
                                         background: linear-gradient(to right, var(--gold), transparent);
                                         margin-bottom: 32px;
                                     }

                                     .faq-inner {
                                         max-width: 1200px;
                                         margin: 0 auto;
                                     }

                                     .faq-grid {
                                         display: grid;
                                         grid-template-columns: 1fr;
                                         gap: 28px;
                                     }

                                     .faq-item {
                                         background: rgba(255, 255, 255, 0.04);
                                         border: 1px solid rgba(255, 255, 255, 0.08);
                                         padding: 0;
                                         border-radius: 24px;
                                         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
                                         overflow: hidden;
                                     }

                                     .faq-toggle {
                                         width: 100%;
                                         display: flex;
                                         align-items: center;
                                         justify-content: space-between;
                                         gap: 16px;
                                         padding: 28px 32px;
                                         background: transparent;
                                         border: none;
                                         cursor: pointer;
                                         color: var(--text);
                                         text-align: left;
                                         font-family: 'Cinzel', serif;
                                         font-size: 1rem;
                                         letter-spacing: 0.03em;
                                     }

                                     .faq-toggle:hover,
                                     .faq-toggle:focus {
                                         color: var(--gold-light);
                                     }

                                     .faq-icon {
                                         display: inline-flex;
                                         align-items: center;
                                         justify-content: center;
                                         width: 34px;
                                         height: 34px;
                                         border-radius: 50%;
                                         border: 1px solid rgba(255, 255, 255, 0.12);
                                         color: var(--gold-light);
                                         transition: transform 0.25s ease, background 0.25s ease;
                                     }

                                     .faq-toggle[aria-expanded="true"] .faq-icon {
                                         transform: rotate(45deg);
                                         background: rgba(240, 192, 96, 0.12);
                                     }

                                     .faq-answer {
                                         max-height: 0;
                                         overflow: hidden;
                                         opacity: 0;
                                         padding: 0 32px;
                                         transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
                                     }

                                     .faq-item.open .faq-answer {
                                         max-height: 240px;
                                         opacity: 1;
                                         padding: 0 32px 28px;
                                     }

                                     .faq-answer p {
                                         color: var(--text-dim);
                                         line-height: 1.8;
                                         margin-top: 8px;
                                     }

                                     @media (max-width: 1200px) {
                                         .faq-grid {
                                             grid-template-columns: repeat(2, 1fr);
                                         }
                                     }

                                     @media (max-width: 768px) {
                                         .faq-grid {
                                             grid-template-columns: 1fr;
                                         }
                                     }
                                     /* ─── ABOUT ──────────────────────────────────────────────────── */
                                     
                                     #about {
                                         background: radial-gradient(ellipse 60% 50% at 90% 50%, rgba(20, 10, 50, 0.8) 0%, transparent 70%), linear-gradient(180deg, var(--deep) 0%, var(--navy) 50%, var(--deep) 100%);
                                         position: relative;
                                         overflow: hidden;
                                     }
                                     
                                    #about::before {
                                        content: '水兔';
                                        position: absolute;
                                        left: 1%;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        font-size: 20vw;
                                        color: rgba(255, 255, 255, 0.05);
                                        font-family: serif;
                                        line-height: 1;
                                        pointer-events: none;
                                        user-select: none;
                                    }
                                     
                                     .about-grid {
                                         max-width: 1200px;
                                         margin: 0 auto;
                                         display: grid;
                                         grid-template-columns: 1fr 1fr;
                                         gap: 80px;
                                         align-items: center;
                                     }

                                    /* place the about text into the right column and right-align */
                                    .about-text {
                                        grid-column: 2;
                                        text-align: left;
                                    }

                                    .about-text h2 {
                                        font-size: 3.6rem;
                                        margin-bottom: -20px;
                                        margin-left: -50px;
                                    }
                                     
                                     .about-text p {
                                         font-size: 1.3rem;
                                         line-height: 1.85;
                                         color: var(--text);
                                         margin-bottom: 20px;
                                         margin-left: -50px;
                                         font-weight: 300;
                                     }
                                     
                                     .about-features {
                                         display: flex;
                                         flex-direction: column;
                                         gap: 28px;
                                         margin-top: 40px;
                                     }

                                     .feature-item {
                                         border-left: 2px solid var(--gold);
                                         padding-left: 20px;
                                     }
                                     
                                     .feature-item h4 {
                                         font-family: 'Cinzel', serif;
                                         font-size: 0.75rem;
                                         letter-spacing: 0.2em;
                                         color: var(--gold-light);
                                         margin-bottom: 8px;
                                         text-transform: uppercase;
                                     }
                                     
                                     .feature-item p {
                                         font-size: 0.95rem;
                                         color: var(--text-dim);
                                         line-height: 1.6;
                                     }
                                     
                                     .about-visual {
                                         display: flex;
                                         align-items: center;
                                         justify-content: center;
                                         position: relative;
                                         height: 400px;
                                     }
                                     
                                     .dragon-orb {
                                         width: 260px;
                                         height: 260px;
                                         border-radius: 50%;
                                         background: radial-gradient(circle at 35% 30%, rgba(200, 146, 42, 0.2) 0%, transparent 50%), radial-gradient(circle at 65% 70%, rgba(80, 20, 120, 0.3) 0%, transparent 50%), radial-gradient(circle at 50% 50%, #0a0e1e 0%, #050810 100%);
                                         border: 1px solid rgba(200, 146, 42, 0.25);
                                         box-shadow: 0 0 60px rgba(200, 146, 42, 0.12), 0 0 120px rgba(80, 20, 120, 0.08), inset 0 0 60px rgba(200, 146, 42, 0.06);
                                         display: flex;
                                         align-items: center;
                                         justify-content: center;
                                         animation: orbPulse 5s ease-in-out infinite;
                                     }
                                     
                                     @keyframes orbPulse {
                                         0%,
                                         100% {
                                             box-shadow: 0 0 60px rgba(200, 146, 42, 0.12), 0 0 120px rgba(80, 20, 120, 0.08), inset 0 0 60px rgba(200, 146, 42, 0.06);
                                         }
                                         50% {
                                             box-shadow: 0 0 80px rgba(200, 146, 42, 0.22), 0 0 160px rgba(80, 20, 120, 0.14), inset 0 0 80px rgba(200, 146, 42, 0.1);
                                         }
                                     }
                                     
                                     /* .dragon-kanji {
                                         font-size: 7rem;
                                         color: rgba(200, 146, 42, 0.6);
                                         font-family: serif;
                                         text-shadow: 0 0 30px rgba(200, 146, 42, 0.4);
                                     } */
                                     
                                     @keyframes kanjiFloat {
                                         0%,
                                         100% {
                                             transform: translateY(0);
                                         }
                                         50% {
                                             transform: translateY(-8px);
                                         }
                                     }
                                     /* ─── HOW TO BUY ─────────────────────────────────────────────── */
                                     
                                     #buy {
                                         background: radial-gradient(ellipse 70% 60% at 20% 50%, rgba(20, 30, 80, 0.6) 0%, transparent 70%), linear-gradient(180deg, var(--deep) 0%, #0a0d1e 50%, var(--deep) 100%);
                                         position: relative;
                                         overflow: hidden;
                                     }
                                     
                                     #buy::after {
                                         content: '';
                                         position: absolute;
                                         inset: 0;
                                         background-image: radial-gradient(circle at 1px 1px, rgba(200, 146, 42, 0.04) 1px, transparent 0);
                                         background-size: 40px 40px;
                                         pointer-events: none;
                                     }
                                     
                                     .buy-inner {
                                         max-width: 900px;
                                         margin: 0 auto;
                                         position: relative;
                                         z-index: 1;
                                     }
                                     
                                     .steps {
                                         display: flex;
                                         flex-direction: column;
                                         gap: 0;
                                         margin-top: 48px;
                                     }
                                     
                                     .step {
                                         display: grid;
                                         grid-template-columns: 64px 1fr;
                                         gap: 24px;
                                         padding: 32px 0;
                                         border-bottom: 1px solid rgba(200, 146, 42, 0.1);
                                         transition: background 0.2s;
                                     }
                                     
                                     .step:last-child {
                                         border-bottom: none;
                                     }
                                     
                                     .step-num {
                                         width: 52px;
                                         height: 52px;
                                         border: 1px solid var(--gold);
                                         display: flex;
                                         align-items: center;
                                         justify-content: center;
                                         font-family: 'Cinzel', serif;
                                         font-size: 1.1rem;
                                         font-weight: 900;
                                         color: var(--gold);
                                         clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
                                         background: rgba(200, 146, 42, 0.06);
                                         flex-shrink: 0;
                                         margin-top: 4px;
                                     }
                                     
                                     .step-body h3 {
                                         font-family: 'Cinzel', serif;
                                         font-size: 0.95rem;
                                         font-weight: 700;
                                         letter-spacing: 0.1em;
                                         color: var(--gold-pale);
                                         margin-bottom: 10px;
                                         text-transform: uppercase;
                                     }
                                     
                                     .step-body p {
                                         font-size: 1rem;
                                         line-height: 1.75;
                                         color: var(--text-dim);
                                     }
                                     
                                     .buy-cta {
                                         margin-top: 48px;
                                         text-align: center;
                                     }
                                     /* ─── TOKENOMICS ──────────────────────────────────────────────── */
                                     
                                     #tokenomics {
                                         background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(30, 10, 10, 0.8) 0%, transparent 60%), linear-gradient(180deg, var(--deep) 0%, var(--navy) 100%);
                                         position: relative;
                                         text-align: center;
                                         overflow: hidden;
                                     }
                                     
                                     #tokenomics::before {
                                         content: '';
                                         position: absolute;
                                         top: -40%;
                                         left: -20%;
                                         width: 140%;
                                         height: 80%;
                                         background: radial-gradient(ellipse at center, rgba(139, 26, 26, 0.05) 0%, transparent 70%);
                                         pointer-events: none;
                                     }
                                     
                                     .token-inner {
                                         max-width: 1000px;
                                         margin: 0 auto;
                                         position: relative;
                                         z-index: 1;
                                     }
                                     
                                     .token-grid {
                                         display: grid;
                                         grid-template-columns: repeat(3, 1fr);
                                         gap: 1px;
                                         background: rgba(200, 146, 42, 0.15);
                                         border: 1px solid rgba(200, 146, 42, 0.2);
                                         margin-top: 56px;
                                         margin-bottom: 40px;
                                     }
                                     
                                     .token-cell {
                                         background: var(--navy);
                                         padding: 40px 24px;
                                         display: flex;
                                         flex-direction: column;
                                         align-items: center;
                                         gap: 10px;
                                         transition: background 0.3s;
                                     }
                                     
                                     .token-cell:hover {
                                         background: var(--slate);
                                     }
                                     
                                     .token-label {
                                         font-family: 'Cinzel', serif;
                                         font-size: 0.65rem;
                                         letter-spacing: 0.3em;
                                         color: var(--text-dim);
                                         text-transform: uppercase;
                                     }
                                     
                                     .token-value {
                                         font-family: 'Cinzel', serif;
                                         font-size: 1.2rem;
                                         font-weight: 900;
                                         color: var(--gold-light);
                                         letter-spacing: 0.05em;
                                         line-height: 1.2;
                                         overflow-wrap: break-word;
                                         word-break: break-word;
                                     }
                                     
                                     .token-supply,
                                     .token-contract {
                                         grid-column: span 3
                                     }
                                     
                                     .token-supply .token-value {
                                         font-size: 1.4rem;
                                     }
                                     
                                     .token-address {
                                         margin-top: 28px;
                                         padding: 24px 32px;
                                         border: 1px solid rgba(200, 146, 42, 0.2);
                                         background: rgba(200, 146, 42, 0.04);
                                         display: inline-block;
                                     }
                                     
                                     .token-address .addr-label {
                                         font-family: 'Cinzel', serif;
                                         font-size: 1rem;
                                         letter-spacing: 0.3em;
                                         color: var(--gold);
                                         text-transform: uppercase;
                                         text-decoration: solid ;
                                         margin-bottom: 8px;
                                     }
                                     
                                     .token-address code {
                                         font-family: 'Courier New', monospace;
                                         font-size: 1.5rem;
                                         color: var(--text);
                                         word-break: break-all;
                                     }
                                     /* ─── FINAL CTA / FOOTER ─────────────────────────────────────── */
                                     
                                     #footer-cta {
                                         background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(15, 20, 50, 0.9) 0%, transparent 70%), var(--deep);
                                         position: relative;
                                         overflow: hidden;
                                         padding: 120px 48px 0;
                                     }
                                     
                                     .footer-mountains {
                                         position: absolute;
                                         bottom: 0;
                                         left: 0;
                                         right: 0;
                                         height: 200px;
                                         pointer-events: none;
                                     }
                                     
                                     .footer-cta-content {
                                         text-align: center;
                                         position: relative;
                                         z-index: 2;
                                         max-width: 700px;
                                         margin: 0 auto;
                                         padding-bottom: 80px;
                                     }
                                     
                                     .footer-cta-content p {
                                         font-size: 1.1rem;
                                         font-style: italic;
                                         color: var(--text-dim);
                                         margin-bottom: 36px;
                                         line-height: 1.7;
                                     }
                                     
                                     footer {
                                         background: rgba(0, 0, 0, 0.6);
                                         border-top: 1px solid rgba(200, 146, 42, 0.15);
                                         padding: 60px 48px 32px;
                                         position: relative;
                                         z-index: 2;
                                     }

                                     .footer-content {
                                         max-width: 1200px;
                                         margin: 0 auto 40px;
                                         display: grid;
                                         grid-template-columns: 1.2fr 1.8fr;
                                         gap: 60px;
                                         align-items: start;
                                     }

                                     .footer-brand-header {
                                         display: flex;
                                         align-items: center;
                                         gap: 12px;
                                         margin-bottom: 16px;
                                     }

                                     .footer-logo-img {
                                         width: 100px;
                                         height: 100px;
                                         object-fit: contain;
                                         margin-top: -50px;
                                         margin-left: 100px;
                                     }

                                     .footer-title {
                                         color: var(--gold-light);
                                         font-family: 'Cinzel', serif;
                                         font-weight: 900;
                                         letter-spacing: 0.15em;
                                         font-size: 1.1rem;
                                     }

                                     .footer-tagline {
                                         color: var(--text-dim);
                                         font-size: 1.3rem;
                                         text-align: left;
                                         line-height: 1.6;
                                         margin-top: -20px;
                                         margin-left: 40px;
                                     }

                                     .footer-columns {
                                         display: grid;
                                         grid-template-columns: repeat(3, 1fr);
                                         gap: 40px;
                                     }

                                     .footer-column h4 {
                                         font-family: 'Cinzel', serif;
                                         font-size: 1rem;
                                         letter-spacing: 0.2em;
                                         text-transform: uppercase;
                                         color: var(--gold-light);
                                         margin-bottom: 18px;
                                     }

                                     .footer-column ul {
                                         list-style: none;
                                     }

                                     .footer-column li {
                                         margin-bottom: 12px;
                                     }

                                     .footer-column a {
                                         text-decoration: none;
                                         color: var(--text);
                                         font-size: 1.2rem;
                                         font-weight: 500;
                                         transition: color 0.2s;
                                     }

                                     .footer-column a:hover {
                                         color: var(--gold-light);
                                     }

                                     .footer-bottom {
                                         max-width: 1200px;
                                         margin: 0 auto;
                                         text-align: center;
                                         border-top: 1px solid rgba(200, 146, 42, 0.1);
                                         padding-top: 24px;
                                     }

                                     .footer-copy {
                                         font-size: 0.7rem;
                                         color: var(--text-dim);
                                         letter-spacing: 0.05em;
                                     }

                                     @media (max-width: 768px) {
                                         footer {
                                             padding: 40px 24px 24px;
                                         }

                                         .footer-content {
                                             grid-template-columns: 1fr;
                                             gap: 40px;
                                             margin-bottom: 32px;
                                         }

                                         .footer-columns {
                                             grid-template-columns: 1fr;
                                             gap: 28px;
                                         }
                                     }
                                     /* ─── MOUNTAIN SHAPES ────────────────────────────────────────── */
                                     
                                     .mtn-svg {
                                         width: 100%;
                                         height: 100%;
                                         position: absolute;
                                         bottom: 0;
                                         left: 0;
                                     }
                                     /* ─── SCROLL FADE IN ─────────────────────────────────────────── */
                                     
                                     .fade-up {
                                         opacity: 0;
                                         transform: translateY(30px);
                                         transition: opacity 0.7s ease, transform 0.7s ease;
                                     }
                                     
                                     .fade-up.visible {
                                         opacity: 1;
                                         transform: translateY(0);
                                     }
                                     /* ─── RESPONSIVE ─────────────────────────────────────────────── */
                                     
                                     @media (max-width: 1024px) {
                                         nav {
                                             padding: 16px 20px;
                                         }
                                         .nav-links {
                                             display: none;
                                             position: absolute;
                                             top: 100%;
                                             left: 0;
                                             right: 0;
                                             background: rgba(4, 6, 15, 0.95);
                                             backdrop-filter: blur(4px);
                                             flex-direction: column;
                                             padding: 20px;
                                             gap: 16px;
                                             border-top: 1px solid rgba(200, 146, 42, 0.1);
                                         }
                                         .nav-links.active {
                                             display: flex;
                                         }
                                         .hamburger {
                                             display: flex;
                                         }
                                         .btn-buy {
                                             display: none;
                                         }
                                     }

                                     @media (max-width: 768px) {
                                         .hero-content {
                                             left: 0;
                                             top: 50%;
                                             top: auto;
                                             margin-bottom: -30px;
                                             transform: none;
                                             padding: 0 24px;
                                             text-align: center;
                                             max-width: 100%;
                                         }
                                         .hero-title {
                                             text-align: center;
                                             font-size: clamp(2.2rem, 9vw, 3.5rem);
                                         }
                                         .hero-subtitle,
                                         .hero-desc {
                                             text-align: center;
                                             margin-left: auto;
                                             margin-right: auto;
                                         }
                                         .hero-slide {
                                             transform: translateX(-50%) scale(1.33); /* Apply zoom for mobile */
                                         }
                                         .hero-coin {
                                             width: 50px;
                                             height: 50px;
                                             top: 15%;
                                             right: 10%;
                                         }
                                         .token-cell {
                                             padding: 20px 16px;
                                         }
                                         .token-value {
                                             font-size: 1.2rem;
                                         }
                                         .token-supply .token-value {
                                             font-size: 1.5rem;
                                         }
                                         section {
                                             padding: 70px 24px;
                                         }
                                         .about-grid {
                                             grid-template-columns: 1fr;
                                             gap: 40px;
                                         }
                                         /* reset the about text back to normal on narrow screens */
                                         .about-text {
                                             grid-column: auto;
                                             text-align: left;
                                         }
                                         /* center the watermark on small screens so it doesn't overlap content */
                                         #about::before {
                                             left: 50%;
                                             transform: translate(-50%, -50%);
                                             font-size: 40vw;
                                         }
                                         .about-visual {
                                             height: 240px;
                                         }
                                         .dragon-orb {
                                             width: 180px;
                                             height: 180px;
                                         }
                                         /* .dragon-kanji {
                                             font-size: 5rem;
                                         } */
                                         .about-text h2 {
                                             margin-left: 0;
                                             margin-bottom: 10px;
                                             font-size: clamp(2rem, 8vw, 2.5rem);
                                         }
                                         .about-text p {
                                             margin-left: 0;
                                             font-size: 1.1rem;
                                         }
                                         .about-text p br {
                                             display: none;
                                         }
                                         .token-grid {
                                             grid-template-columns: 1fr 1fr 1fr;
                                         }
                                         .token-supply,
                                         .token-contract {
                                             grid-column: span 3;
                                         }
                                         footer {
                                             flex-direction: column;
                                             text-align: center;
                                         }
                                         .footer-links {
                                             justify-content: center;
                                         }
                                     }
                                     
                                     
                                     @media (max-width: 480px) {
                                         .token-grid {
                                             grid-template-columns: 1fr;
                                         }
                                         .token-supply,
                                         .token-contract {
                                             grid-column: span 1;
                                         }
                                         .token-cell {
                                             padding: 16px 12px;
                                         }
                                         .token-value {
                                             font-size: 1rem;
                                         }
                                         .token-supply .token-value {
                                             font-size: 1.3rem;
                                         }
                                         .token-address {
                                             padding: 16px 20px;
                                         }
                                         .token-address code {
                                             font-size: 0.75rem;
                                         }
                                         .hero-cta-group {
                                             flex-direction: column;
                                             align-items: center;
                                             width: 100%;
                                             padding: 0 24px;
                                             bottom: 40px;
                                         }
                                         .hero-cta-group .btn-primary,
                                         .hero-cta-group .btn-ghost {
                                             width: 100%;
                                             text-align: center;
                                             display: block;
                                         }
                                     }


                                     /* ─── SEGMENT 6: THREE.JS CANVAS OVERLAY ────────────────────────────────────── */

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 5;
    pointer-events: none;
    display: block;
}

/* ── Hero layers stacking order ─────────────────────────────────────────────
   z-index 0  → .hero-sky        (CSS gradient background)
   z-index 1  → .stars           (CSS star field)
   z-index 2  → .moon            (CSS moon glow)
   z-index 3  → .hero-coin       (floating coin)
   z-index 4  → .mountains       (SVG mountain layers)
   z-index 5  → #hero-canvas     (Three.js rabbit + water)
   z-index 10 → .hero-content    (text + buttons — always on top)
────────────────────────────────────────────────────────────────────────────── */

.hero-sky    { z-index: 0; }
.stars       { z-index: 1; }
.moon        { z-index: 2; }
.hero-coin   { z-index: 3; }
.mountains   { z-index: 4; }

.hero-bottom-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45vh;
    background: linear-gradient(to top, var(--deep) 0%, var(--deep) 15%, rgba(4, 6, 15, 0) 100%);
    z-index: 8;
    pointer-events: none;
}

.hero-content {
    z-index: 10;
}

/* ── Prevent hero overflow clipping the canvas ───────────────────────────── */
#hero {
    overflow: visible;
    isolation: isolate;
}

/* ── Water blending — canvas fades into the mountain SVG base ────────────── */
#hero-canvas {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 18%,
        black 80%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 18%,
        black 80%,
        transparent 100%
    );
}

/* ──────────────────────────────────────────────────────────────────────────
   FLIP CARDS - WAR UTILITIES SECTION
   ────────────────────────────────────────────────────────────────────────── */

.flip-cards-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 32px;
    max-width: 100%;
    margin: 0 auto;
    perspective: 1200px;
    padding: 40px 24px 80px;
    z-index: 10;
    position: relative;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.flip-cards-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.flip-card {
    cursor: pointer;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.flip-card:hover {
    transform: translateY(-12px);
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-style: preserve-3d;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid rgba(240, 192, 96, 0.15);
    border-radius: 20px;
    padding: 40px 30px;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    overflow: hidden;
}

.flip-card-front {
    background: linear-gradient(145deg, rgba(14, 20, 40, 0.95) 0%, rgba(6, 10, 20, 0.95) 100%);
    z-index: 1;
}

.card-cover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.25; /* Keeps text readable over the image */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.flip-card:hover .card-cover-image {
    transform: scale(1.1);
}

.flip-card-front::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    opacity: 0.5;
    z-index: 2;
}

.flip-card-back {
    transform: rotateY(180deg);
    background: linear-gradient(145deg, rgba(26, 34, 64, 0.98) 0%, rgba(14, 20, 40, 0.98) 100%);
    border-color: rgba(240, 192, 96, 0.5);
    box-shadow: inset 0 0 40px rgba(240, 192, 96, 0.05);
    justify-content: center;
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.card-icon {
    width: 96px;
    height: 96px;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 50%;
    background: rgba(240, 192, 96, 0.05);
    border: 1px solid rgba(240, 192, 96, 0.2);
    filter: drop-shadow(0 0 15px rgba(240, 192, 96, 0.2));
    animation: float-icon 4s ease-in-out infinite;
}

@keyframes float-icon {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}

.flip-card-front .card-content h3,
.flip-card-back .card-content h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-top: 10px;
    margin: auto 0;
}

.flip-card-back .card-content h3::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--gold);
    margin: 14px auto 0;
    opacity: 0.6;
}

.card-hint {
    margin-top: auto;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-pale);
    border: 1px solid rgba(240, 192, 96, 0.3);
    padding: 10px 24px;
    border-radius: 999px;
    background: rgba(240, 192, 96, 0.05);
    transition: all 0.3s ease;
}

.flip-card:hover .card-hint {
    background: rgba(240, 192, 96, 0.15);
    color: var(--gold-light);
    border-color: rgba(240, 192, 96, 0.5);
}

.flip-card-back .card-content p {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #e8f6ff;
    font-weight: 300;
    padding: 0 10px;
    text-transform: lowercase !important;
}

.flip-card:hover .flip-card-front {
    border-color: rgba(240, 192, 96, 0.4);
    box-shadow: 0 15px 45px rgba(240, 192, 96, 0.15), inset 0 0 20px rgba(240, 192, 96, 0.08);
}

/* Responsive */
@media (max-width: 1024px) {
    .flip-card {
        flex: 0 0 350px;
    }
}

@media (max-width: 768px) {
    .flip-cards-container {
        padding: 40px 24px 80px;
        gap: 28px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   PARTNERSHIPS CAROUSEL - CONTINUOUS SCROLL
   ────────────────────────────────────────────────────────────────────────── */

#partnerships {
    background: linear-gradient(135deg, rgba(40, 35, 14, 0.8) 0%, rgba(26, 34, 64, 0.6) 100%);
    padding: 80px 0;
    border-top: 1px solid rgba(240, 192, 96, 0.1);
    border-bottom: 1px solid rgba(240, 192, 96, 0.1);
    overflow: hidden;
}

.partnerships-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.partners-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.partners-carousel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 120px;
    background: linear-gradient(90deg, rgba(4, 6, 15, 0.95) 0%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

.partners-carousel::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 120px;
    background: linear-gradient(270deg, rgba(4, 6, 15, 0.95) 0%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

.partners-track {
    display: flex;
    gap: 40px;
    width: max-content;
    will-change: transform;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.partners-track {
    animation: scroll-left 30s linear infinite;
    animation-play-state: running;
}

.partners-carousel:hover .partners-track {
    animation-play-state: paused;
}

.partner-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 520px;
}

.partner-logo {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-light);
    padding: 44px 56px;
    border: 1px solid rgba(240, 192, 96, 0.3);
    border-radius: 8px;
    text-align: center;
    background: linear-gradient(135deg, rgba(26, 34, 64, 0.5) 0%, rgba(14, 20, 40, 0.5) 100%);
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.partner-logo a {
    text-decoration: none;
    color: var(--gold-light);
}

.partner-logo:hover {
    border-color: rgba(240, 192, 96, 0.7);
    background: linear-gradient(135deg, rgba(26, 34, 64, 0.8) 0%, rgba(14, 20, 40, 0.8) 100%);
    box-shadow: 0 8px 20px rgba(240, 192, 96, 0.2);
    transform: translateY(-2px);
}

/* Partner logo images */
.partner-logo img {
    display: block;
    max-height: 184px;
    width: auto;
    object-fit: contain;
    filter: grayscale(0%);
    border-radius: 4px;
}

.partner-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.partner-name {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-light);
}

@media (max-width: 768px) {
    .partner-item {
        min-width: 420px;
    }

    .partner-logo {
        padding: 34px 42px;
    }

    .partner-logo img {
        max-height: 128px;
    }
}

/* Partners carousel controls */
.partners-prev,
.partners-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(4,6,15,0.6);
    border: 1px solid rgba(200,146,42,0.08);
    color: var(--text);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    z-index: 20;
}

.partners-prev { left: 12px; }
.partners-next { right: 12px; }

@media (max-width: 600px) {
    .partners-prev, .partners-next { display: none; }
}

/* Responsive */
@media (max-width: 768px) {
    #partnerships {
        padding: 60px 0;
    }
    
    .partnerships-inner {
        padding: 0 24px;
    }
    
    .partners-track {
        gap: 24px;
        animation: scroll-left 20s linear infinite;
    }
    
    .partner-item {
        min-width: 160px;
    }
    
    .partner-logo {
        font-size: 0.9rem;
        padding: 12px 16px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   CONTACT SECTION
   ────────────────────────────────────────────────────────────────────────── */

#contact {
    background: linear-gradient(135deg, rgba(14, 20, 40, 0.6) 0%, rgba(26, 34, 64, 0.8) 100%);
    padding: 80px 48px;
    border-top: 1px solid rgba(240, 192, 96, 0.1);
}

.contact-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-header {
    text-align: center;
    margin-bottom: 60px;
}

.contact-header .divider {
    margin: 16px auto 0;
}

.contact-content {
    display: flex;
    justify-content: center;
    max-width: 600px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* Contact Info Section */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
    width: 100%;
}

.contact-info h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--gold-light);
    margin-bottom: 8px;
    grid-column: 1 / -1;
    text-align: center;
}

.info-item {
    display: flex;
    gap: 16px;
    align-items: center;
    background: linear-gradient(135deg, rgba(26, 34, 64, 0.4) 0%, rgba(14, 20, 40, 0.6) 100%);
    border: 1px solid rgba(240, 192, 96, 0.15);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.info-item:hover {
    transform: translateY(-4px);
    border-color: rgba(240, 192, 96, 0.4);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, rgba(26, 34, 64, 0.6) 0%, rgba(14, 20, 40, 0.8) 100%);
}

.info-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-light);
    border-radius: 12px;
}

.info-icon svg {
    width: 28px;
    height: 28px;
    color: var(--gold-light);
}

.info-icon.whatsapp {
    width: 35px;
    height: 35px;
    color: #fff;
    background: #25D366;
    border-radius: 999px;
}


.info-text {
    flex: 1;
}

.info-label {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin: 0 0 4px 0;
}

.info-text p {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.info-text .info-value, .info-text .socials {
    color: var(--gold-light);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.info-item:hover .info-value {
    color: var(--gold-pale);
    text-decoration: underline;
}

.info-icon img{
    height: 40px;
    width: 40px;
    color: var(--gold-light);
    mix-blend-mode: multiply;
}

/* Responsive */
@media (max-width: 768px) {
    #contact {
        padding: 60px 24px;
    }
    
    .contact-content {
        gap: 40px;
    }
    
    .contact-info {
        grid-template-columns: 1fr;
    }
    
    .contact-info h3 {
        font-size: 1.1rem;
    }
    
    .info-item {
        gap: 12px;
        padding: 20px;
    }
    
    .info-icon {
        font-size: 1.4rem;
        width: 32px;
        height: 32px;
    }
}

/* ── Moon glow enhancement to match Three.js lighting ───────────────────── */
.moon {
    box-shadow:
        0 0 30px  rgba(240, 192, 96, 0.6),
        0 0 80px  rgba(200, 146, 42, 0.3),
        0 0 150px rgba(200, 146, 42, 0.15),
        0 0 300px rgba(200, 146, 42, 0.08);
}

/* ── Floating coin — bump z above canvas ────────────────────────────────── */
.hero-coin {
    z-index: 6;
}

/* ── Stars twinkle enhancement ───────────────────────────────────────────── */
.stars {
    animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle {
    0%   { opacity: 0.85; }
    50%  { opacity: 1.0;  }
    100% { opacity: 0.75; }
}

/* ── Hero section min-height lock ────────────────────────────────────────── */
#hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh; /* dynamic viewport for mobile browsers */
    --hero-tooltip-x: 50%;
    --hero-tooltip-y: 100%;
}

#hero:hover {
    cursor: pointer;
}

/* #hero:hover::after {
    content: 'Take the mouse off the carousel for animation';
    position: absolute;
    left: var(--hero-tooltip-x);
    top: var(--hero-tooltip-y);
    transform: translate(-50%, -140%);
    background: rgba(0, 0, 0, 0.82);
    color: var(--text);
    padding: 0.75rem 1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    opacity: 0.94;
} */