/* ===== Featured 9:16 luxury portrait frame (homepage Featured Premiere) ===== */
.lux-featured-portrait {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(212, 175, 55, .35);
  box-shadow:
    0 30px 80px -20px rgba(212, 175, 55, .35),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 60px rgba(212,175,55,.08) inset;
}
.lux-featured-thumb,
.lux-featured-iframe { position:absolute; inset:0; }
.lux-featured-thumb { transition: opacity .4s ease; }
.lux-featured-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.lux-featured-iframe iframe { width:100%; height:100%; border:0; display:block; }
.lux-featured-toggle {
  position:absolute; inset:0;
  background:transparent; border:0; cursor:pointer;
  z-index: 3;
}
.lux-featured-portrait:not(.is-playing) .lux-featured-toggle::after {
  content:'';
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:84px; height:84px; border-radius:9999px;
  background: linear-gradient(135deg,#d4af37,#c9a962);
  box-shadow: 0 20px 60px -10px rgba(212,175,55,.7);
  clip-path: polygon(35% 25%, 35% 75%, 75% 50%);
}
.lux-featured-portrait.is-playing .lux-featured-toggle { background: transparent; }
/* ============================================================
   PRODUCTS PAGE + STUDY HUB
   ============================================================ */
.product-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(201,169,98,.18);border-radius:24px;overflow:hidden;transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease;}
.product-card:hover{transform:translateY(-6px);border-color:rgba(201,169,98,.55);box-shadow:0 30px 60px -30px rgba(201,169,98,.35);}
.product-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0a0a;}
.product-frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.product-card:hover .product-frame img{transform:scale(1.05);}
.product-shine{position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-100%);transition:transform .9s ease;pointer-events:none;}
.product-card:hover .product-shine{transform:translateX(100%);}
.product-body{padding:1.25rem 1.25rem 1.5rem;}
.product-btn{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#d4af37,#c9a962);color:#000;padding:.65rem 1.2rem;border-radius:9999px;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;transition:transform .2s ease,box-shadow .2s ease;}
.product-btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(201,169,98,.6);}

/* Study Hub */
.sh-hero{position:relative;margin-bottom:1.25rem;}
.sh-back{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;color:rgba(255,255,255,.6);padding:.4rem .8rem;border:1px solid rgba(201,169,98,.25);border-radius:9999px;}
.sh-back:hover{color:#f4e5c2;border-color:rgba(201,169,98,.55);}
.sh-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.25rem 0;padding:.4rem;background:rgba(255,255,255,.025);border:1px solid rgba(201,169,98,.15);border-radius:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.sh-tab{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:.65rem;font-size:.78rem;color:rgba(255,255,255,.6);white-space:nowrap;transition:all .25s ease;}
.sh-tab:hover{color:#f4e5c2;background:rgba(255,255,255,.04);}
.sh-tab.active{background:linear-gradient(135deg,#d4af37,#c9a962);color:#000;font-weight:600;box-shadow:0 6px 18px -8px rgba(201,169,98,.7);}
.sh-panel{display:none;animation:shFade .35s ease;}
.sh-panel.active{display:block;}
@keyframes shFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.sh-card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid rgba(201,169,98,.18);border-radius:1.25rem;padding:1.25rem;backdrop-filter:blur(14px);}
@media(min-width:640px){.sh-card{padding:1.75rem;}}
.sh-stat{background:rgba(255,255,255,.03);border:1px solid rgba(201,169,98,.18);border-radius:1rem;padding:1rem 1.25rem;}
.sh-stat-label{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);}
.sh-stat-value{font-family:'Playfair Display',serif;font-size:1.6rem;background:linear-gradient(135deg,#f4e5c2,#c9a962);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:.25rem;}
.sh-quick{display:flex;align-items:center;gap:.85rem;text-align:left;background:rgba(255,255,255,.025);border:1px solid rgba(201,169,98,.15);border-radius:1rem;padding:1rem 1.1rem;color:#f4e5c2;transition:all .25s ease;}
.sh-quick:hover{transform:translateY(-2px);border-color:rgba(201,169,98,.5);background:rgba(201,169,98,.06);}
.sh-quick i{color:#d4af37;flex-shrink:0;}
.sh-pill{padding:.5rem .9rem;border-radius:9999px;font-size:.75rem;border:1px solid rgba(201,169,98,.25);color:rgba(255,255,255,.65);background:transparent;display:inline-flex;align-items:center;gap:.4rem;transition:all .2s ease;}
.sh-pill:hover{color:#f4e5c2;border-color:rgba(201,169,98,.55);}
.sh-pill.active{background:linear-gradient(135deg,#d4af37,#c9a962);color:#000;border-color:transparent;font-weight:600;}
.sh-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:linear-gradient(135deg,#d4af37,#c9a962);color:#000;padding:.75rem 1.4rem;border-radius:9999px;font-weight:700;font-size:.85rem;letter-spacing:.04em;transition:transform .2s ease,box-shadow .2s ease;}
.sh-cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px -8px rgba(201,169,98,.65);}
.sh-cta:disabled{opacity:.55;cursor:not-allowed;}
.sh-ghost{padding:.7rem 1.25rem;border-radius:9999px;border:1px solid rgba(201,169,98,.3);color:#f4e5c2;font-size:.8rem;}
.sh-input{background:rgba(0,0,0,.35);border:1px solid rgba(201,169,98,.22);color:#fff;padding:.7rem 1rem;border-radius:.75rem;font-size:.9rem;outline:none;transition:border-color .2s ease;}
.sh-input:focus{border-color:rgba(201,169,98,.7);}
.sh-range{accent-color:#d4af37;}
.sh-msg{max-width:85%;padding:.7rem 1rem;border-radius:1rem;font-size:.88rem;line-height:1.55;}
.sh-msg.bot{background:rgba(255,255,255,.04);border:1px solid rgba(201,169,98,.15);color:#f4e5c2;border-top-left-radius:.3rem;}
.sh-msg.user{background:linear-gradient(135deg,#d4af37,#c9a962);color:#000;margin-left:auto;border-top-right-radius:.3rem;font-weight:500;}
.sh-markdown{color:rgba(255,255,255,.85);font-size:.92rem;line-height:1.65;white-space:pre-wrap;font-family:'Montserrat',sans-serif;}
.sh-markdown h1,.sh-markdown h2,.sh-markdown h3{font-family:'Playfair Display',serif;color:#f4e5c2;margin-top:1rem;margin-bottom:.5rem;}
.sh-markdown strong{color:#f4e5c2;}
.sh-chip{padding:.3rem .7rem;border-radius:9999px;background:rgba(255,255,255,.04);border:1px solid rgba(201,169,98,.2);}
.sh-profile-tabs{display:flex;gap:.4rem;flex-wrap:wrap;}
/* Mobile responsive profile fix (the Cognitive AI screenshot issue) */
@media(max-width:640px){
  .sh-card{padding:1rem;border-radius:1rem;}
  .sh-stat-value{font-size:1.3rem;}
  .sh-tab{padding:.45rem .7rem;font-size:.72rem;}
  .sh-tabs{padding:.3rem;flex-wrap:nowrap;}
}
/* Light theme overrides */
body.light-theme .sh-card,body.light-theme .sh-stat,body.light-theme .sh-quick{background:rgba(0,0,0,.04);border-color:rgba(184,148,31,.3);}
body.light-theme .sh-msg.bot,body.light-theme .sh-input{background:rgba(0,0,0,.05);color:#1a1a1a;}
body.light-theme .sh-tab{color:rgba(0,0,0,.65);}
body.light-theme .sh-tab:hover{color:#000;}
body.light-theme .sh-quick{color:#1a1a1a;}
body.light-theme .sh-stat-label{color:rgba(0,0,0,.5);}
body.light-theme .sh-markdown{color:#1a1a1a;}
body.light-theme .sh-markdown h1,body.light-theme .sh-markdown h2,body.light-theme .sh-markdown h3,body.light-theme .sh-markdown strong{color:#5c4510;}

        * {
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            background-color: #050505;
            color: #ffffff;
            font-family: 'Montserrat', sans-serif;
            overflow-x: hidden;
        }

        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #050505;
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #c9a962, #d4af37);
            border-radius: 3px;
        }

        .font-luxury {
            font-family: 'Cormorant Garamond', serif;
        }
        .font-display {
            font-family: 'Playfair Display', serif;
        }

        .glass {
            background: rgba(20, 20, 20, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(201, 169, 98, 0.1);
        }

        .glass-strong {
            background: rgba(20, 20, 20, 0.95);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            border: 1px solid rgba(201, 169, 98, 0.2);
        }

        .text-gold-gradient {
            background: linear-gradient(135deg, #d4af37 0%, #f4e5c2 50%, #c9a962 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .logo-gradient {
            background: linear-gradient(135deg, #d4af37 0%, #f4e5c2 25%, #fff 50%, #f4e5c2 75%, #d4af37 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: shine 3s linear infinite;
        }

        @keyframes shine {
            to {
                background-position: 200% center;
            }
        }

        .bg-gold-gradient {
            background: linear-gradient(135deg, #d4af37 0%, #c9a962 100%);
        }

/* ==========================================
   LUXURY GOLD BUTTON (premium metallic finish)
   Applied automatically to every .bg-gold-gradient button.
   ========================================== */
.bg-gold-gradient {
    background: linear-gradient(135deg,
        #6e4f10 0%, #8b6914 12%, #b8901f 28%, #d4af37 50%,
        #b8901f 72%, #8b6914 88%, #4a3608 100%) !important;
    background-size: 100% 100% !important;
    color: #1a1410 !important;
    border: 1px solid rgba(74,54,8,0.9) !important;
    box-shadow:
        0 4px 0 rgba(74,54,8,0.9),
        0 6px 14px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,235,160,0.35),
        inset 0 -3px 8px rgba(74,54,8,0.55) !important;
    text-shadow: 0 1px 0 rgba(255,235,160,0.25);
    letter-spacing: 0.08em;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    position: relative;
    overflow: hidden;
}
.bg-gold-gradient::before {
    content: ""; display: none;
}
.bg-gold-gradient:hover {
    transform: translateY(-1px);
    box-shadow:
        0 5px 0 rgba(74,54,8,0.95),
        0 8px 18px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,235,160,0.4),
        inset 0 -3px 8px rgba(74,54,8,0.6) !important;
    filter: brightness(1.04);
}
.bg-gold-gradient:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(74,54,8,0.95), 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,235,160,0.3), inset 0 -2px 4px rgba(74,54,8,0.5) !important; }

/* ==========================================
   SPIRA "S" LOGO (clean gold, no watercolor)
   ========================================== */
.spira-s-logo {
    position: relative;
    width: 8rem; height: 8rem;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #d4af37 0%, #8b6914 100%);
    border: 2px solid rgba(74,54,8,0.6);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,235,160,0.35);
}
.spira-s-letter {
    font-size: 4.5rem; font-weight: 900;
    color: #1a1410;
    text-shadow: 0 1px 0 rgba(255,235,160,0.4);
}
@media (min-width: 768px) {
    .spira-s-logo { width: 9rem; height: 9rem; }
    .spira-s-letter { font-size: 5.25rem; }
}

/* ==========================================
   LUXURY GOLD FRAME + PITCH DECK SLIDESHOW
   ========================================== */
.luxury-frame {
    position: relative;
    padding: 14px;
    border-radius: 28px;
    background: linear-gradient(135deg,
        #6e4f10 0%, #d4af37 18%, #fff7d6 36%, #f4e5c2 50%,
        #fff7d6 64%, #d4af37 82%, #6e4f10 100%);
    background-size: 300% 300%;
    animation: luxuryFrameShine 8s linear infinite;
    box-shadow:
        0 24px 60px rgba(184,144,31,0.45),
        0 8px 18px rgba(0,0,0,0.5),
        inset 0 0 0 1px rgba(255,255,255,0.35);
}
.luxury-frame::before, .luxury-frame::after {
    content: ""; position: absolute; inset: 4px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.35);
    pointer-events: none;
}
.luxury-frame::after {
    inset: 8px;
    border: 1px solid rgba(0,0,0,0.25);
}
.luxury-frame-inner {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #050505;
    aspect-ratio: 16 / 9;
}
@keyframes luxuryFrameShine {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.pitch-slideshow {
    position: absolute; inset: 0;
    overflow: hidden;
}
.pitch-slideshow img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center center;
    background: #050505;
    opacity: 0;
    transition: opacity 1.1s ease;
    image-rendering: -webkit-optimize-contrast;
}
.pitch-slideshow img.active {
    opacity: 1;
    z-index: 2;
}
.pitch-counter {
    position: absolute; bottom: 14px; right: 16px; z-index: 10;
    background: rgba(0,0,0,0.55);
    color: #f4e5c2;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid rgba(212,175,55,0.4);
    letter-spacing: 0.1em;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

        @keyframes float {
            0%,
            100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes pulse-gold {
            0%,
            100% {
                box-shadow: 0 0 20px rgba(201, 169, 98, 0.3);
            }
            50% {
                box-shadow: 0 0 40px rgba(201, 169, 98, 0.6);
            }
        }
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        @keyframes twinkle {
            0%,
            100% {
                opacity: 0.2;
                transform: scale(0.8);
            }
            50% {
                opacity: 1;
                transform: scale(1.2);
            }
        }
        @keyframes borderGlow {
            0%,
            100% {
                box-shadow: 0 0 20px rgba(201, 169, 98, 0.3), inset 0 0 20px rgba(201, 169, 98, 0.1);
            }
            50% {
                box-shadow: 0 0 40px rgba(201, 169, 98, 0.6), inset 0 0 30px rgba(201, 169, 98, 0.2);
            }
        }

        .interactive {
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .interactive:hover {
            transform: translateY(-3px);
        }
        .interactive:active {
            transform: translateY(-1px) scale(0.98);
        }

        .page {
            display: none;
            width: 100%;
            min-height: 100vh;
            opacity: 0;
            transition: opacity 0.5s ease;
            padding-top: 80px;
        }
        .page.active {
            display: block !important;
            opacity: 1;
            animation: slideUp 0.5s ease-out;
        }

        #page-home {
            display: block;
            opacity: 1;
        }

        .video-grid-premium {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 24px;
        }

        @media (max-width: 768px) {
            .video-grid-premium {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            .page {
                padding-top: 70px;
                padding-left: 16px;
                padding-right: 16px;
            }
        }

        .video-card-premium {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            background: linear-gradient(145deg, #0a0a0a, #141414);
            border: 2px solid rgba(201, 169, 98, 0.2);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            aspect-ratio: 16/9;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .video-card-premium:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: rgba(201, 169, 98, 0.6);
            box-shadow: 0 25px 50px rgba(201, 169, 98, 0.2), 0 0 0 1px rgba(201, 169, 98, 0.3);
        }

        .video-card-premium::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(201, 169, 98, 0.1), transparent);
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 1;
        }

        .video-card-premium:hover::before {
            opacity: 1;
        }

        .video-thumbnail-premium {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
            transition: transform 0.5s ease;
        }

        .video-card-premium:hover .video-thumbnail-premium {
            transform: scale(1.1);
        }

        .video-overlay-premium {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 24px;
            opacity: 1;
            transition: all 0.3s;
            z-index: 2;
        }

        .video-card-premium:hover .video-overlay-premium {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.3) 100%);
        }

        .play-icon-premium {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg,#fff7d6 0%, #d4af37 50%, #8b6914 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;                /* ALWAYS visible */
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow:
                0 0 30px rgba(201,169,98,0.55),
                0 6px 16px rgba(0,0,0,0.55),
                inset 0 2px 0 rgba(255,255,255,0.6),
                inset 0 -3px 6px rgba(80,55,5,0.45);
            z-index: 3;
            border: 2px solid rgba(255,255,255,0.4);
        }

        .video-card-premium:hover .play-icon-premium {
            transform: translate(-50%, -50%) scale(1.12);
            filter: brightness(1.08);
        }

        .video-actions {
            position: absolute;
            top: 12px;
            right: 12px;
            display: flex;
            gap: 8px;
            opacity: 1;       /* ALWAYS visible */
            transition: opacity 0.3s;
            z-index: 10;
        }

        .action-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid rgba(201, 169, 98, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            backdrop-filter: blur(10px);
        }

        .action-btn:hover {
            background: linear-gradient(135deg, #c9a962, #d4af37);
            border-color: #c9a962;
            transform: scale(1.15);
        }

        .action-btn:hover svg {
            stroke: #000;
            fill: #000;
        }

        .action-btn.active {
            background: linear-gradient(135deg, #c9a962, #d4af37);
            border-color: #c9a962;
        }

        .action-btn.active svg {
            stroke: #000;
            fill: #c9a962;
        }

        .featured-showcase {
            position: relative;
            width: 100%;
            border-radius: 32px;
            overflow: hidden;
            border: 4px solid transparent;
            background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
            box-shadow:
                0 30px 80px rgba(0, 0, 0, 0.9),
                inset 0 0 0 2px rgba(201, 169, 98, 0.2),
                0 0 0 1px rgba(201, 169, 98, 0.1);
            margin-bottom: 40px;
        }

        .featured-showcase::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 32px;
            padding: 4px;
            background: linear-gradient(135deg, #c9a962, #d4af37, #f4e5c2, #c9a962);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            z-index: 10;
            animation: borderRotate 4s linear infinite;
        }

        .featured-stars {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 5;
            overflow: hidden;
            border-radius: 32px;
        }

        .featured-star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #c9a962;
            border-radius: 50%;
            animation: twinkle 2s infinite;
            box-shadow: 0 0 4px #c9a962;
        }

        @keyframes borderRotate {
            0% {
                filter: hue-rotate(0deg);
            }
            100% {
                filter: hue-rotate(360deg);
            }
        }

        .featured-video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            background: #000;
        }

        .featured-video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .custom-video-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 16px;
            z-index: 20;
            background: rgba(0, 0, 0, 0.6);
            padding: 12px 24px;
            border-radius: 30px;
            border: 1px solid rgba(201, 169, 98, 0.3);
            backdrop-filter: blur(10px);
        }

        .control-btn-3d {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(145deg, #d4af37, #b8941f);
            border: 2px solid rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow:
                0 4px 15px rgba(212, 175, 55, 0.4),
                inset 0 2px 4px rgba(255, 255, 255, 0.3),
                inset 0 -2px 4px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        .control-btn-3d::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: 0.5s;
        }

        .control-btn-3d:hover::before {
            left: 100%;
        }

        .control-btn-3d:hover {
            transform: translateY(-2px) scale(1.1);
            box-shadow:
                0 6px 20px rgba(212, 175, 55, 0.6),
                inset 0 2px 4px rgba(255, 255, 255, 0.3),
                inset 0 -2px 4px rgba(0, 0, 0, 0.3);
        }

        .control-btn-3d:active {
            transform: translateY(0) scale(0.95);
            box-shadow:
                0 2px 10px rgba(212, 175, 55, 0.3),
                inset 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .chatbot-widget {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 9999;
        }

        @media (max-width: 640px) {
            .chatbot-widget {
                bottom: 20px;
                right: 20px;
            }
        }

        .chatbot-button {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #c9a962, #d4af37);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(201, 169, 98, 0.4);
            transition: all 0.3s;
            animation: pulse-gold 2s infinite;
            z-index: 9999;
        }

        .chatbot-button:hover {
            transform: scale(1.1);
            box-shadow: 0 15px 40px rgba(201, 169, 98, 0.6);
        }

        .chatbot-window {
            position: absolute;
            bottom: 80px;
            right: 0;
            width: 400px;
            height: 550px;
            background: linear-gradient(180deg, #1a1508 0%, #0f0c05 100%);
            border: 1px solid rgba(201, 169, 98, 0.3);
            border-radius: 24px;
            overflow: hidden;
            display: none;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
        }

        @media (max-width: 640px) {
            .chatbot-window {
                width: calc(100vw - 40px);
                right: 0;
                height: 60vh;
                max-height: 500px;
            }
        }

        .chatbot-window.active {
            display: flex;
        }

        .chatbot-header {
            background: linear-gradient(135deg, rgba(201, 169, 98, 0.2), rgba(201, 169, 98, 0.1));
            padding: 20px;
            border-bottom: 1px solid rgba(201, 169, 98, 0.2);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .chatbot-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: linear-gradient(135deg, #c9a962, #d4af37);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #000;
            font-size: 20px;
        }

        .chatbot-messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .chatbot-message {
            max-width: 80%;
            padding: 12px 16px;
            border-radius: 16px;
            font-size: 14px;
            line-height: 1.5;
        }

        .chatbot-message.user {
            align-self: flex-end;
            background: linear-gradient(135deg, #c9a962, #d4af37);
            color: #000;
            border-bottom-right-radius: 4px;
            font-weight: 500;
        }

        .chatbot-message.bot {
            align-self: flex-start;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-bottom-left-radius: 4px;
            border: 1px solid rgba(201, 169, 98, 0.2);
        }

        .chatbot-input-area {
            padding: 20px;
            border-top: 1px solid rgba(201, 169, 98, 0.2);
            display: flex;
            gap: 10px;
            background: rgba(0, 0, 0, 0.3);
        }

        .chatbot-input {
            flex: 1;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(201, 169, 98, 0.2);
            border-radius: 24px;
            padding: 12px 20px;
            color: #fff;
            font-size: 14px;
            outline: none;
            transition: all 0.3s;
        }

        .chatbot-input:focus {
            border-color: rgba(201, 169, 98, 0.5);
            background: rgba(255, 255, 255, 0.08);
        }

        .chatbot-send {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, #c9a962, #d4af37);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .chatbot-send:hover {
            transform: scale(1.1);
        }

        .typing-indicator {
            display: flex;
            gap: 4px;
            padding: 16px !important;
        }
        .typing-indicator span {
            width: 8px;
            height: 8px;
            background: #c9a962;
            border-radius: 50%;
            animation: blink 1.4s infinite both;
        }
        .typing-indicator span:nth-child(1) {
            animation-delay: 0s;
        }
        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }
        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }

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

        .faq-category {
            margin-bottom: 30px;
        }
        .faq-category-title {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            color: #c9a962;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(201, 169, 98, 0.2);
        }

        @media (max-width: 640px) {
            .faq-category-title {
                font-size: 20px;
            }
        }

        .faq-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(201, 169, 98, 0.1);
            border-radius: 16px;
            margin-bottom: 16px;
            overflow: hidden;
            transition: all 0.3s;
        }

        .faq-item:hover {
            border-color: rgba(201, 169, 98, 0.2);
        }

        .faq-question {
            padding: 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s;
        }

        @media (max-width: 640px) {
            .faq-question {
                padding: 16px;
            }
        }

        .faq-question:hover {
            background: rgba(201, 169, 98, 0.05);
        }
        .faq-question h4 {
            font-size: 16px;
            font-weight: 500;
            color: #fff;
            padding-right: 20px;
        }

        @media (max-width: 640px) {
            .faq-question h4 {
                font-size: 14px;
            }
        }

        .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }

        .faq-item.active .faq-answer {
            padding: 0 20px 20px;
            max-height: 500px;
        }

        .faq-item.active .faq-question {
            background: rgba(201, 169, 98, 0.1);
        }

        /* ========== FIXED CATEGORY MENU / DROPDOWN ========== */
        .category-menu {
            position: relative;
            display: inline-block;
            z-index: 50;
        }
        .category-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 12px;
            background: linear-gradient(180deg, #1a1508 0%, #0f0c05 100%);
            border: 1px solid rgba(201, 169, 98, 0.3);
            border-radius: 24px;
            padding: 12px;
            min-width: 220px;
            max-height: min(420px, calc(100vh - 140px));
            overflow-y: auto;
            overscroll-behavior: contain;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px) scale(0.95);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 100;
            pointer-events: none;
        }
        .category-dropdown.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
            pointer-events: all;
        }

        /* Mobile: bottom-sheet style so it never cuts off */
        @media (max-width: 640px) {
            .category-dropdown {
                position: fixed;
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;
                border-radius: 24px 24px 0 0;
                max-height: 55vh;
                min-width: unset;
                width: 100%;
                margin-top: 0;
                transform: translateY(100%) scale(1);
                z-index: 2000;
            }
            .category-dropdown.active {
                transform: translateY(0) scale(1);
            }
        }

        .category-dropdown::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(1px 1px at 20px 30px, rgba(201, 169, 98, 0.5), transparent),
                radial-gradient(1px 1px at 40px 70px, rgba(201, 169, 98, 0.4), transparent),
                radial-gradient(1px 1px at 90px 40px, rgba(201, 169, 98, 0.5), transparent),
                radial-gradient(1px 1px at 130px 80px, rgba(201, 169, 98, 0.4), transparent),
                radial-gradient(1px 1px at 160px 120px, rgba(201, 169, 98, 0.5), transparent),
                radial-gradient(1px 1px at 200px 50px, rgba(201, 169, 98, 0.4), transparent);
            background-size: 200px 200px;
            border-radius: 24px;
            pointer-events: none;
            opacity: 0.5;
            animation: twinkle 3s infinite;
        }

        .category-item {
            display: block;
            width: 100%;
            padding: 12px 16px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            border-radius: 12px;
            transition: all 0.2s;
            text-align: left;
            cursor: pointer;
            background: none;
            border: none;
            outline: none;
            position: relative;
            z-index: 1;
        }
        .category-item:hover {
            background: rgba(201, 169, 98, 0.15);
            color: #c9a962;
            transform: translateX(4px);
        }
        .category-item.active {
            background: rgba(201, 169, 98, 0.25);
            color: #c9a962;
        }

        .home-preset {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            border: 1px solid rgba(201, 169, 98, 0.15);
            border-radius: 24px;
            padding: 40px 32px;
            transition: all 0.4s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            height: 100%;
            text-align: left;
        }
        .home-preset:hover {
            transform: translateY(-8px);
            border-color: rgba(201, 169, 98, 0.4);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
        }

        @media (max-width: 640px) {
            .home-preset {
                padding: 24px 20px;
            }
        }

        .calc-display {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(201, 169, 98, 0.2);
            border-radius: 12px;
            padding: 20px;
            text-align: right;
            font-size: 32px;
            color: #c9a962;
            font-family: 'Courier New', monospace;
            margin-bottom: 16px;
            min-height: 70px;
            word-break: break-all;
            overflow-x: auto;
            position: relative;
        }

        .calc-stars {
            position: absolute;
            inset: 0;
            overflow: hidden;
            border-radius: 12px;
            pointer-events: none;
        }
        .calc-star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #c9a962;
            border-radius: 50%;
            box-shadow: 0 0 6px #c9a962;
            animation: twinkle 1.5s infinite;
        }

        @media (max-width: 640px) {
            .calc-display {
                font-size: 24px;
                padding: 16px;
            }
        }

        .calc-btn {
            aspect-ratio: 1;
            background: rgba(201, 169, 98, 0.05);
            border: 1px solid rgba(201, 169, 98, 0.2);
            color: white;
            border-radius: 12px;
            font-size: 20px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .calc-btn:hover {
            background: rgba(201, 169, 98, 0.15);
            transform: scale(1.05);
        }
        .calc-btn:active {
            transform: scale(0.95);
        }
        .calc-btn.operator {
            background: rgba(201, 169, 98, 0.2);
            color: #c9a962;
        }
        .calc-btn.equals {
            background: linear-gradient(135deg, #c9a962, #d4af37);
            color: #000;
            font-weight: 700;
        }

        @media (max-width: 640px) {
            .calc-btn {
                font-size: 18px;
            }
        }

        .mobile-menu {
            position: fixed;
            inset: 0;
            background: linear-gradient(180deg, #1a1200 0%, #0f0a00 100%);
            z-index: 999;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        .mobile-menu.active {
            transform: translateX(0);
        }
        .mobile-menu-header {
            display: flex;
            justify-content: flex-end;
            padding: 20px;
        }
        .mobile-menu-items {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 20px;
            gap: 8px;
        }
        .mobile-menu-item {
            display: block;
            width: 100%;
            padding: 16px 24px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 18px;
            border-radius: 12px;
            transition: all 0.3s;
            background: none;
            border: none;
            text-align: left;
            cursor: pointer;
            font-family: 'Montserrat', sans-serif;
        }
        .mobile-menu-item:hover {
            background: rgba(201, 169, 98, 0.1);
            color: #c9a962;
            padding-left: 32px;
        }

        .video-player-page {
            position: fixed;
            inset: 0;
            background: #000;
            z-index: 10000;
            display: none;
            flex-direction: column;
        }
        .video-player-page.active {
            display: flex;
        }

        .video-player-star-bg {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .player-star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #c9a962;
            border-radius: 50%;
            box-shadow: 0 0 8px #c9a962;
            animation: twinkle 2s infinite;
        }

        .video-player-container {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 20px;
        }

        .video-frame-luxury {
            width: 100%;
            max-width: 1000px;
            aspect-ratio: 16/9;
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            border: 3px solid rgba(201, 169, 98, 0.5);
            box-shadow:
                0 0 60px rgba(201, 169, 98, 0.3),
                inset 0 0 60px rgba(201, 169, 98, 0.1);
        }

        .video-frame-luxury::before {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 24px;
            padding: 3px;
            background: linear-gradient(135deg, #c9a962, #d4af37, #f4e5c2, #c9a962);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            z-index: 10;
        }

        .custom-player-controls {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
            z-index: 20;
            background: rgba(0, 0, 0, 0.8);
            padding: 16px 32px;
            border-radius: 40px;
            border: 2px solid rgba(201, 169, 98, 0.4);
            backdrop-filter: blur(20px);
        }

        .luxury-control-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(145deg, rgba(201, 169, 98, 0.2), rgba(0, 0, 0, 0.5));
            border: 2px solid rgba(201, 169, 98, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            color: #c9a962;
            position: relative;
            overflow: hidden;
        }

        .luxury-control-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .luxury-control-btn:hover::before {
            opacity: 1;
        }

        .luxury-control-btn:hover {
            transform: translateY(-3px) scale(1.1);
            border-color: #c9a962;
            box-shadow: 0 0 30px rgba(201, 169, 98, 0.5);
            background: linear-gradient(145deg, rgba(201, 169, 98, 0.4), rgba(0, 0, 0, 0.6));
        }

        .luxury-control-btn:active {
            transform: translateY(0) scale(0.95);
        }

        .close-player-btn {
            position: absolute;
            top: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.6);
            border: 2px solid rgba(201, 169, 98, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            color: #c9a962;
            z-index: 30;
        }

        .close-player-btn:hover {
            transform: rotate(90deg) scale(1.1);
            background: rgba(201, 169, 98, 0.2);
            border-color: #c9a962;
        }

        .story-excerpt {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .story-full {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .story-full.expanded {
            display: block;
            opacity: 1;
        }

        .about-hero {
            background: linear-gradient(135deg, rgba(201, 169, 98, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
            border: 1px solid rgba(201, 169, 98, 0.2);
            border-radius: 32px;
            padding: 60px 40px;
            text-align: center;
            margin-bottom: 40px;
            position: relative;
            overflow: hidden;
        }

        @media (max-width: 640px) {
            .about-hero {
                padding: 40px 20px;
            }
        }

        .story-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(201, 169, 98, 0.1);
            border-radius: 24px;
            padding: 32px;
            margin-bottom: 24px;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .story-card:hover {
            border-color: rgba(201, 169, 98, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 10px 40px rgba(201, 169, 98, 0.1);
        }

        .story-3d-stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            overflow: hidden;
        }

        .story-star-3d {
            position: absolute;
            width: 3px;
            height: 3px;
            background: radial-gradient(circle, #fff 0%, #c9a962 50%, transparent 70%);
            border-radius: 50%;
            box-shadow:
                0 0 10px #c9a962,
                0 0 20px #c9a962,
                0 0 30px rgba(201, 169, 98, 0.5);
            animation: float3d 10s infinite ease-in-out;
        }

        @keyframes float3d {
            0%,
            100% {
                transform: translateZ(0) translateY(0) rotate(0deg);
                opacity: 0.3;
            }
            50% {
                transform: translateZ(100px) translateY(-20px) rotate(180deg);
                opacity: 1;
            }
        }

        .contact-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(201, 169, 98, 0.1);
            border-radius: 24px;
            padding: 32px;
            transition: all 0.3s;
            cursor: pointer;
        }

        .contact-card:hover {
            border-color: rgba(201, 169, 98, 0.3);
        }

        .preset-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            margin-top: 32px;
        }

        @media (max-width: 640px) {
            .preset-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }
        }

        .nav-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: rgba(5, 5, 5, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(201, 169, 98, 0.1);
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            text-decoration: none;
        }

        .logo-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #d4af37 0%, #f4e5c2 50%, #c9a962 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #000;
            font-size: 24px;
            font-family: 'Playfair Display', serif;
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .logo-text {
            font-family: 'Playfair Display', serif;
            font-size: 32px;
            font-weight: 700;
            letter-spacing: 4px;
        }

        @media (max-width: 640px) {
            .logo-icon {
                width: 40px;
                height: 40px;
                font-size: 20px;
            }
            .logo-text {
                font-size: 24px;
                letter-spacing: 2px;
            }
        }

        button {
            font-family: 'Montserrat', sans-serif;
        }

        .g-recaptcha {
            transform-origin: left top;
            filter: invert(0.9) hue-rotate(180deg) contrast(1.1);
            opacity: 0.9;
        }

        .recaptcha-container {
            background: linear-gradient(145deg, rgba(201, 169, 98, 0.1), rgba(0, 0, 0, 0.3));
            border: 1px solid rgba(201, 169, 98, 0.3);
            border-radius: 12px;
            padding: 16px;
            margin: 16px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .recaptcha-container::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 12px;
            padding: 1px;
            background: linear-gradient(135deg, #c9a962, #d4af37);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        .recaptcha-label {
            text-align: center;
            color: rgba(255, 255, 255, 0.6);
            font-size: 12px;
            margin-top: 8px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .refresh-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(201, 169, 98, 0.2), rgba(201, 169, 98, 0.1));
            border: 1px solid rgba(201, 169, 98, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            color: #c9a962;
        }

        .refresh-btn:hover {
            background: linear-gradient(135deg, #c9a962, #d4af37);
            color: #000;
            transform: rotate(180deg) scale(1.1);
            border-color: transparent;
        }

        .refresh-btn.spinning {
            animation: spin 1s linear infinite;
            pointer-events: none;
        }

        .saved-tabs {
            display: flex;
            gap: 16px;
            margin-bottom: 24px;
            border-bottom: 1px solid rgba(201, 169, 98, 0.2);
            padding-bottom: 16px;
        }

        .saved-tab {
            padding: 12px 24px;
            background: transparent;
            border: 1px solid rgba(201, 169, 98, 0.2);
            border-radius: 24px;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }

        .saved-tab:hover {
            border-color: #c9a962;
            color: #c9a962;
        }

        .saved-tab.active {
            background: linear-gradient(135deg, #c9a962, #d4af37);
            border-color: transparent;
            color: #000;
            font-weight: 600;
        }

        .game-container {
            position: relative;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
        }

        .game-canvas {
            border: 3px solid rgba(201, 169, 98, 0.4);
            border-radius: 20px;
            background: linear-gradient(135deg, #0a0a0a, #141414);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                inset 0 0 20px rgba(201, 169, 98, 0.1),
                0 0 30px rgba(201, 169, 98, 0.1);
            cursor: pointer;
        }

        .game-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            gap: 12px;
        }

        .stat-box {
            flex: 1;
            background: linear-gradient(145deg, rgba(201, 169, 98, 0.15), rgba(0, 0, 0, 0.3));
            border: 1px solid rgba(201, 169, 98, 0.3);
            border-radius: 16px;
            padding: 20px 10px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: #c9a962;
            font-family: 'Playfair Display', serif;
            text-shadow: 0 0 10px rgba(201, 169, 98, 0.3);
        }

        .stat-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, 0.6);
            margin-top: 4px;
            font-weight: 500;
        }

        .game-controls {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 24px;
            flex-wrap: wrap;
        }

        .control-btn {
            background: linear-gradient(135deg, rgba(201, 169, 98, 0.2), rgba(201, 169, 98, 0.1));
            border: 2px solid rgba(201, 169, 98, 0.4);
            color: #c9a962;
            padding: 14px 28px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            letter-spacing: 1px;
        }

        .control-btn:hover {
            background: linear-gradient(135deg, #c9a962, #d4af37);
            color: #000;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(201, 169, 98, 0.4);
            border-color: transparent;
        }

        .control-btn.secondary {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.7);
        }

        .control-btn.secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-color: rgba(255, 255, 255, 0.4);
        }

        .game-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid #c9a962;
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            display: none;
            z-index: 100;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
        }

        .game-overlay.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        .combo-text {
            position: absolute;
            font-size: 24px;
            font-weight: bold;
            color: #c9a962;
            pointer-events: none;
            animation: comboFloat 1s ease-out forwards;
            text-shadow: 0 0 10px rgba(201, 169, 98, 0.5);
            z-index: 50;
        }

        @keyframes comboFloat {
            0% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(-50px) scale(1.2);
                opacity: 0;
            }
        }

        .profile-upload {
            position: relative;
            width: 120px;
            height: 120px;
            margin: 0 auto 20px;
        }

        .profile-upload img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid rgba(201, 169, 98, 0.5);
        }

        .profile-upload input {
            display: none;
        }

        .profile-upload-label {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #c9a962, #d4af37);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 2px solid #050505;
            transition: all 0.3s;
        }

        .profile-upload-label:hover {
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(201, 169, 98, 0.5);
        }

        .thumbnail-showcase {
            position: relative;
            width: 100%;
            padding-top: 56.25%;
            border-radius: 24px;
            overflow: hidden;
            border: 3px solid transparent;
            background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.8),
                inset 0 0 0 2px rgba(201, 169, 98, 0.3),
                0 0 0 1px rgba(201, 169, 98, 0.1);
            margin-bottom: 32px;
        }

        .thumbnail-showcase::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 24px;
            padding: 3px;
            background: linear-gradient(135deg, #c9a962, #d4af37, #f4e5c2, #c9a962);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            z-index: 10;
        }

        .thumbnail-showcase img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.8s ease-in-out, transform 0.8s ease;
            transform: scale(1.1);
        }

        .thumbnail-showcase img.active {
            opacity: 1;
            transform: scale(1);
        }

        .thumbnail-counter {
            position: absolute;
            bottom: 24px;
            right: 24px;
            background: rgba(0, 0, 0, 0.85);
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 14px;
            color: #c9a962;
            font-weight: 600;
            border: 1px solid rgba(201, 169, 98, 0.4);
            backdrop-filter: blur(10px);
            z-index: 20;
            font-family: 'Montserrat', sans-serif;
            letter-spacing: 1px;
        }

        .video-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.98);
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.4s;
        }
        .video-modal.active {
            display: flex;
            opacity: 1;
        }
        .video-wrapper {
            width: 100%;
            max-width: 1000px;
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            border: 3px solid #c9a962;
            box-shadow: 0 0 100px rgba(201, 169, 98, 0.4);
        }
        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            background: #000;
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .close-modal {
            position: absolute;
            top: -60px;
            right: 0;
            color: #fff;
            cursor: pointer;
            padding: 8px;
            transition: all 0.3s;
            background: none;
            border: none;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(201, 169, 98, 0.1);
            border: 1px solid rgba(201, 169, 98, 0.3);
        }
        .close-modal:hover {
            color: #c9a962;
            transform: rotate(90deg);
            background: rgba(201, 169, 98, 0.2);
        }

        @media (max-width: 640px) {
            .close-modal {
                top: -50px;
                right: 10px;
            }
        }

        .social-dropdown-section {
            border-top: 1px solid rgba(201, 169, 98, 0.2);
            margin-top: 12px;
            padding-top: 12px;
        }

        .social-dropdown-title {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 8px;
            padding: 0 16px;
        }

        .social-dropdown-btn {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 10px 16px;
            color: #fff;
            background: none;
            border: none;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.3s;
            font-size: 14px;
        }

        .social-dropdown-btn:hover {
            background: rgba(201, 169, 98, 0.1);
        }

        .social-dropdown-btn.youtube:hover {
            background: rgba(255, 0, 0, 0.2);
            color: #ff4444;
        }

        .social-dropdown-btn.whatsapp:hover {
            background: rgba(37, 211, 102, 0.2);
            color: #25d366;
        }

        .game-tutorial {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 50;
            padding: 40px;
            text-align: center;
        }

        .game-tutorial.hidden {
            display: none;
        }

        .tutorial-step {
            max-width: 300px;
        }

        .tutorial-gem-demo {
            width: 60px;
            height: 60px;
            margin: 20px auto;
            background: linear-gradient(135deg, #c9a962, #d4af37);
            border-radius: 50%;
            box-shadow: 0 0 30px rgba(201, 169, 98, 0.5);
            animation: pulse-gold 1.5s infinite;
        }

        .google-signin-container {
            margin: 20px 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .divider {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 16px 0;
            color: rgba(255, 255, 255, 0.4);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid rgba(201, 169, 98, 0.3);
        }

        .divider::before {
            margin-right: 10px;
        }

        .divider::after {
            margin-left: 10px;
        }

        .luxury-google-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;
            padding: 16px 24px;
            background: linear-gradient(135deg, rgba(201, 169, 98, 0.1), rgba(201, 169, 98, 0.05));
            border: 2px solid rgba(201, 169, 98, 0.4);
            border-radius: 12px;
            color: #fff;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .luxury-google-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(201, 169, 98, 0.2), transparent);
            transition: 0.5s;
        }

        .luxury-google-btn:hover::before {
            left: 100%;
        }

        .luxury-google-btn:hover {
            border-color: #c9a962;
            box-shadow: 0 0 30px rgba(201, 169, 98, 0.3);
            transform: translateY(-2px);
        }

        .luxury-google-btn:active {
            transform: translateY(0);
        }

        .luxury-google-btn svg {
            width: 20px;
            height: 20px;
        }

        #googleSignInDiv {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .g_id_signin {
            width: 100% !important;
        }

        .g_id_signin>div {
            width: 100% !important;
        }
    

/* ==========================================
   PREMIUM BLACK BACKGROUND (replaces all star fields)
   ========================================== */
.featured-stars,
.calc-stars,
.story-3d-stars,
.video-player-star-bg { display: none !important; }
.video-player-page,
.featured-video-section,
.calc-display { background-color: #050505 !important; }

/* ==========================================
   THEME TOKENS
   ========================================== */
:root,
[data-theme="dark"] {
    --spira-bg: #050505;
    --spira-surface: rgba(20,20,20,0.8);
    --spira-surface-strong: rgba(20,20,20,0.95);
    --spira-text: #ffffff;
    --spira-text-muted: rgba(255,255,255,0.7);
    --spira-border: rgba(201,169,98,0.15);
    --spira-gold: #c9a962;
}
[data-theme="light"] {
    --spira-bg: #f4ead2;
    --spira-bg-elev: #ede0bf;
    --spira-surface: rgba(252,244,222,0.94);
    --spira-surface-strong: #fbf3da;
    --spira-text: #1a1410;
    --spira-text-muted: rgba(26,20,16,0.68);
    --spira-border: rgba(168,132,44,0.28);
    --spira-gold: #a8842c;
    --spira-gold-deep: #8a6915;
}

/* ==========================================
   LIGHT MODE OVERRIDES (warm ivory + deep gold luxury editorial)
   No filter hacks — semantic restyling only.
   ========================================== */
[data-theme="light"] body,
[data-theme="light"] .video-player-page,
[data-theme="light"] .featured-video-section,
[data-theme="light"] .calc-display {
    background-color: var(--spira-bg) !important;
    color: var(--spira-text);
}
[data-theme="light"] {
    color-scheme: light;
}
/* Text */
[data-theme="light"] .text-white,
[data-theme="light"] body, [data-theme="light"] h1, [data-theme="light"] h2,
[data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] p,
[data-theme="light"] span, [data-theme="light"] label, [data-theme="light"] li,
[data-theme="light"] button { color: var(--spira-text); }
[data-theme="light"] .text-white\/70,
[data-theme="light"] .text-white\/60,
[data-theme="light"] .text-white\/50,
[data-theme="light"] .text-white\/40 { color: var(--spira-text-muted) !important; }
[data-theme="light"] .text-gold-500,
[data-theme="light"] .text-gold-400,
[data-theme="light"] .text-gold-300 { color: var(--spira-gold-deep) !important; }
[data-theme="light"] .text-gold-gradient,
[data-theme="light"] .logo-gradient {
    background: linear-gradient(135deg, #8a6915, #a8842c, #c69b3a);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
/* Surfaces & glass */
[data-theme="light"] .glass,
[data-theme="light"] .nav-container,
[data-theme="light"] .chatbot-window,
[data-theme="light"] .category-dropdown,
[data-theme="light"] .video-modal .video-wrapper {
    background: var(--spira-surface) !important;
    border-color: var(--spira-border) !important;
    box-shadow: 0 12px 40px rgba(60,40,10,0.08), 0 1px 0 rgba(255,255,255,0.6) inset;
}
[data-theme="light"] .nav-container {
    background: rgba(250,246,236,0.85) !important;
    border-bottom: 1px solid var(--spira-border);
}
/* Borders */
[data-theme="light"] .border-gold-500\/10,
[data-theme="light"] .border-gold-500\/20,
[data-theme="light"] .border-gold-500\/30,
[data-theme="light"] .border-gold-500\/40 { border-color: var(--spira-border) !important; }
/* Form inputs */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea,
[data-theme="light"] .chatbot-input {
    background: #fffaf0 !important;
    color: var(--spira-text) !important;
    border-color: var(--spira-border) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: rgba(26,20,16,0.4) !important; }
/* Translucent white panels used throughout */
[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/10 { background: rgba(168,132,44,0.06) !important; }
/* Buttons & gold-gradient stays gold but darker on ivory */
[data-theme="light"] .bg-gold-gradient,
[data-theme="light"] .gold-gradient {
    background: linear-gradient(135deg, #b8901f, #d4af37, #b8901f) !important;
    color: #1a1410 !important;
    box-shadow: 0 6px 18px rgba(168,132,44,0.35);
}
/* Solid black backgrounds become warm ivory */
[data-theme="light"] .bg-black,
[data-theme="light"] .bg-luxury-black,
[data-theme="light"] .bg-luxury-dark { background-color: var(--spira-bg-elev) !important; }
/* Theme toggle button (no flip) */
[data-theme="light"] .theme-toggle-btn {
    background: linear-gradient(135deg, #fffaf0, #f0e6cf);
    color: var(--spira-gold-deep);
    border-color: var(--spira-border);
    box-shadow: 0 6px 18px rgba(60,40,10,0.12);
}
/* reCAPTCHA — undo the dark-mode invert in light mode */
[data-theme="light"] .g-recaptcha { filter: none !important; opacity: 1 !important; }
[data-theme="light"] .recaptcha-container {
    background: linear-gradient(145deg, rgba(168,132,44,0.08), rgba(255,250,240,0.9)) !important;
    border-color: var(--spira-border) !important;
}
/* Chatbot bubbles */
[data-theme="light"] .chatbot-message.bot {
    background: #fff5dd !important;
    color: var(--spira-text) !important;
    border: 1px solid var(--spira-border);
}
[data-theme="light"] .chatbot-message.user {
    background: linear-gradient(135deg, #b8901f, #d4af37) !important;
    color: #1a1410 !important;
}
/* Divider lines */
[data-theme="light"] .divider { color: var(--spira-text-muted) !important; }
[data-theme="light"] .divider::before,
[data-theme="light"] .divider::after { background: var(--spira-border) !important; }
/* Hover states */
[data-theme="light"] .hover\:bg-white\/5:hover,
[data-theme="light"] .hover\:bg-white\/10:hover { background: rgba(168,132,44,0.1) !important; }

/* ==========================================
   LIGHT MODE — EXTRA COVERAGE for missed dark sections
   Forces every page/section to obey the ivory palette.
   ========================================== */
[data-theme="light"] {
    background-color: var(--spira-bg) !important;
}
[data-theme="light"] html,
[data-theme="light"] body,
[data-theme="light"] #app,
[data-theme="light"] main,
[data-theme="light"] section,
[data-theme="light"] .page,
[data-theme="light"] .page-section,
[data-theme="light"] [class*="bg-luxury"],
[data-theme="light"] [class*="bg-black"] {
    background-color: var(--spira-bg) !important;
    color: var(--spira-text) !important;
}
/* Translucent dark overlays → warm translucent ivory */
[data-theme="light"] [class*="bg-black\\/"],
[data-theme="light"] [style*="background:rgba(0,0,0"],
[data-theme="light"] [style*="background-color:rgba(0,0,0"],
[data-theme="light"] [style*="background: rgba(0, 0, 0"] {
    background-color: rgba(255,250,240,0.85) !important;
}
/* Cards / panels with inline dark gradients */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .skit-card,
[data-theme="light"] .video-card,
[data-theme="light"] .story-card,
[data-theme="light"] .game-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .profile-card,
[data-theme="light"] .signin-card,
[data-theme="light"] .signup-card {
    background: var(--spira-surface-strong) !important;
    color: var(--spira-text) !important;
    border: 1px solid var(--spira-border) !important;
    box-shadow: 0 8px 28px rgba(60,40,10,0.10);
}
/* Headings & all text inside light pages stay readable */
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3,
[data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6,
[data-theme="light"] p, [data-theme="light"] li, [data-theme="light"] a,
[data-theme="light"] label, [data-theme="light"] span:not(.text-gold-gradient):not(.logo-gradient) {
    color: var(--spira-text) !important;
}
/* Mobile menu */
[data-theme="light"] .mobile-menu,
[data-theme="light"] .mobile-menu-header {
    background: var(--spira-surface-strong) !important;
    color: var(--spira-text) !important;
}
[data-theme="light"] .mobile-menu-item { color: var(--spira-text) !important; }
/* Footers */
[data-theme="light"] footer { background: var(--spira-bg-elev) !important; color: var(--spira-text) !important; }
/* Featured-video & player keep dark for cinematic feel — already overridden above */

/* ==========================================
   THEME TOGGLE BUTTON (fixed, premium)
   ========================================== */
.theme-toggle-btn {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(201,169,98,0.18), rgba(201,169,98,0.05));
    border: 1px solid rgba(201,169,98,0.4);
    color: #c9a962;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, background .25s;
    box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.04);
}
.theme-toggle-btn:hover { transform: rotate(15deg) scale(1.06); box-shadow: 0 10px 28px rgba(201,169,98,.35); }
.theme-toggle-btn:active { transform: scale(.94); }
[data-theme="light"] .theme-toggle-btn {
    background: linear-gradient(135deg, rgba(184,148,31,0.18), rgba(184,148,31,0.05));
    color: #8b6914; border-color: rgba(184,148,31,0.45);
}
@media (max-width: 640px) {
    .theme-toggle-btn { top: 12px; right: 12px; width: 40px; height: 40px; }
}

/* ==========================================
   TESTIMONIALS (zigzag, white comment cards)
   ========================================== */
.testimonials-frame {
    overflow: hidden !important;
    background: linear-gradient(135deg, #0a0a0f 0%, #14141c 100%);
    padding: 28px 22px;
    aspect-ratio: 16 / 9;
}
.testimonials-zigzag {
    display: flex;
    gap: 14px;
    align-items: stretch;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.testimonials-zigzag::-webkit-scrollbar { display: none; }
.testimonial-card {
    flex: 0 0 240px;
    background: #ffffff;
    color: #1a1410;
    border-radius: 18px;
    padding: 16px 16px 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35);
    border: 1px solid rgba(212,175,55,0.35);
    display: flex; flex-direction: column; justify-content: space-between;
    scroll-snap-align: center;
    position: relative;
}
.testimonial-card.up   { align-self: flex-start; }
.testimonial-card.down { align-self: flex-end; }
.testimonial-card .stars { color: #ffffff; font-size: 14px; letter-spacing: 2px;
    text-shadow: 0 0 1px #c9a962, 0 0 4px rgba(201,169,98,0.6); margin-bottom: 8px; }
.testimonial-card .quote { font-size: 13px; line-height: 1.45; color: #1a1410; font-weight: 500; }
.testimonial-card .author { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.testimonial-card .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #d4af37, #8b6914);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
}
.testimonial-card .name { font-size: 12px; font-weight: 700; color: #2b2014; }
.testimonial-card .handle { font-size: 11px; color: #6b5a3a; }
@media (min-width: 768px) {
    .testimonial-card { flex: 0 0 280px; }
}

/* ==========================================
   GAME light-theme readability fix
   ========================================== */
[data-theme="light"] #page-game .stat-value,
[data-theme="light"] #page-game .stat-label,
[data-theme="light"] #page-game .text-white\/50,
[data-theme="light"] #page-game .text-white\/40,
[data-theme="light"] #page-game .text-white\/70,
[data-theme="light"] #page-game p,
[data-theme="light"] #page-game h1,
[data-theme="light"] #page-game h3,
[data-theme="light"] #page-game .tutorial-step h3,
[data-theme="light"] #page-game .tutorial-step p,
[data-theme="light"] #page-game #overlayTitle,
[data-theme="light"] #page-game #overlayMessage {
    color: #2b2014 !important;
}
[data-theme="light"] #page-game .stat-box {
    background: rgba(184,144,31,0.10) !important;
    border-color: rgba(184,144,31,0.35) !important;
}
[data-theme="light"] #page-game .game-tutorial,
[data-theme="light"] #page-game .game-overlay {
    background: rgba(255,250,240,0.96) !important;
    color: #2b2014 !important;
}

/* ===== Appended luxury sections (homepage) ===== */
.appended-lux .lux-frame{
  position:relative; border-radius:18px; overflow:hidden;
  border:1px solid rgba(201,169,98,0.45);
  box-shadow: 0 0 0 1px rgba(201,169,98,0.15) inset, 0 12px 40px rgba(0,0,0,0.55), 0 0 60px rgba(201,169,98,0.10);
  background: linear-gradient(180deg, rgba(20,16,8,0.6), rgba(0,0,0,0.7));
  transition: transform .35s ease, box-shadow .35s ease;
}
.appended-lux .lux-frame:hover{
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 0 0 1px rgba(201,169,98,0.35) inset, 0 18px 60px rgba(0,0,0,0.65), 0 0 90px rgba(201,169,98,0.25);
}
.appended-lux .lux-img-banner{ display:block; width:100%; height:auto; }
.appended-lux .lux-15x9{ aspect-ratio: 15/9; }
.appended-lux .lux-15x9 img{ width:100%; height:100%; object-fit:cover; }
.appended-lux .lux-grid{ display:grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap:22px; }
@media (min-width: 768px){ .appended-lux .lux-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px){ .appended-lux .lux-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.appended-lux .lux-tile{ position:relative; }
.appended-lux .lux-tile img{ display:block; width:100%; height:100%; object-fit:cover; }
.appended-lux .lux-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#000; background: radial-gradient(circle at center, rgba(201,169,98,0.95) 0%, rgba(201,169,98,0) 35%);
  opacity:0; transition: opacity .3s ease;
}
.appended-lux .lux-frame:hover .lux-play{ opacity:1; }
.appended-lux .lux-frame{ animation: luxFadeUp .8s ease both; }

/* ==========================================
   HERO LOGO — perfect circle (homepage)
   ========================================== */
.hero-logo-circle{
  width: 7rem !important;
  height: 7rem !important;
  font-size: 3.4rem !important;
  border-radius: 50% !important;
  aspect-ratio: 1/1 !important;
  padding: 0 !important;
  position: relative;
  display: flex !important;
  align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, #fff4c2, #d4af37 55%, #8a6915 100%) !important;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.18),
              0 0 38px rgba(212,175,55,0.55),
              inset 0 2px 6px rgba(255,255,255,0.55),
              inset 0 -6px 16px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
@media (max-width: 640px){
  .hero-logo-circle{ width: 5.5rem !important; height: 5.5rem !important; font-size: 2.6rem !important; }
}

/* ==========================================
   SPIRA EVERYWHERE — image gallery widgets
   ========================================== */
.spira-gallery{ display:grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .spira-gallery{ grid-template-columns: 2fr 1fr; grid-auto-rows: minmax(180px, auto); } }
.spira-gallery .gx{
  position: relative; overflow: hidden; border-radius: 22px;
  border: 1px solid rgba(201,169,98,0.28);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.04);
  background: #0a0a0f;
}
.spira-gallery .gx img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .9s cubic-bezier(.4,0,.2,1); }
.spira-gallery .gx:hover img{ transform: scale(1.05); }
.spira-gallery .gx .gx-overlay{
  position:absolute; inset:0; padding: 22px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.78) 100%);
  color: #fff;
}
.spira-gallery .gx .gx-overlay h3{
  font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700;
  background: linear-gradient(135deg,#f4e5c2,#d4af37);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.spira-gallery .gx .gx-overlay p{ color: rgba(255,255,255,0.78); font-size: .85rem; margin-top: 4px; }
.spira-gallery .gx-tall{ grid-row: span 2; min-height: 380px; }
.spira-gallery .gx-wide{ min-height: 200px; }
[data-theme="light"] .spira-gallery .gx{ background: var(--spira-surface-strong); border-color: var(--spira-border); box-shadow: 0 14px 36px rgba(60,40,10,0.14); }

/* ==========================================
   MESSAGING PAGE — luxury gold-glass
   ========================================== */
.dm-shell{ display:grid; grid-template-columns: 320px 1fr; gap: 18px; min-height: 70vh; }
@media (max-width: 900px){ .dm-shell{ grid-template-columns: 1fr; } .dm-shell.show-thread .dm-sidebar{ display:none; } .dm-shell:not(.show-thread) .dm-thread-pane{ display:none; } }
.dm-sidebar, .dm-thread-pane{
  background: linear-gradient(180deg, rgba(20,17,10,0.86), rgba(10,9,6,0.86));
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 22px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(212,175,55,0.18);
  display:flex; flex-direction:column; overflow:hidden;
}
.dm-sidebar-head{ padding: 18px 18px 12px; border-bottom: 1px solid rgba(212,175,55,0.18); }
.dm-sidebar-head input{
  width:100%; padding: 10px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.25);
  color:#f4e5c2; font-size:.9rem;
}
.dm-sidebar-head input::placeholder{ color: rgba(244,229,194,0.45); }
.dm-list{ overflow-y:auto; flex:1; padding: 8px; }
.dm-list .dm-row{
  display:flex; align-items:center; gap: 12px; padding: 12px;
  border-radius: 14px; cursor:pointer; transition: background .2s;
}
.dm-list .dm-row:hover, .dm-list .dm-row.active{ background: rgba(212,175,55,0.10); }
.dm-avatar{
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg,#d4af37,#8a6915);
  display:flex; align-items:center; justify-content:center;
  color:#1a1410; font-weight:700; font-family:'Playfair Display', serif;
  flex-shrink:0; overflow:hidden;
}
.dm-avatar img{ width:100%; height:100%; object-fit:cover; }
.dm-row-meta{ flex:1; min-width:0; }
.dm-row-meta .nm{ color:#f4e5c2; font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-row-meta .pv{ color: rgba(255,255,255,0.55); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-thread-pane{ padding: 0; }
.dm-thread-head{
  padding: 16px 22px; border-bottom: 1px solid rgba(212,175,55,0.18);
  display:flex; align-items:center; gap: 14px;
}
.dm-thread-head .back{ display:none; background:none; border:none; color:#d4af37; cursor:pointer; }
@media (max-width: 900px){ .dm-thread-head .back{ display:inline-flex; } }
.dm-thread-head .nm{ color:#f4e5c2; font-weight:700; font-family:'Playfair Display', serif; font-size:1.1rem; }
.dm-msgs{ flex:1; overflow-y:auto; padding: 22px; display:flex; flex-direction:column; gap: 10px; }
.dm-msg{ max-width: 78%; padding: 10px 14px; border-radius: 18px; font-size:.92rem; line-height:1.4; word-wrap:break-word; animation: dmIn .25s ease; }
@keyframes dmIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
.dm-msg.me{ align-self:flex-end; background: linear-gradient(135deg,#d4af37,#b8901f); color:#1a1410; border-bottom-right-radius: 6px; }
.dm-msg.them{ align-self:flex-start; background: rgba(255,255,255,0.06); color:#f4e5c2; border:1px solid rgba(212,175,55,0.2); border-bottom-left-radius: 6px; }
.dm-msg .ts{ display:block; font-size:.65rem; opacity:.6; margin-top: 4px; }
.dm-composer{ padding: 14px 18px; border-top: 1px solid rgba(212,175,55,0.18); display:flex; gap: 10px; }
.dm-composer input{
  flex:1; padding: 12px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(212,175,55,0.25);
  color:#f4e5c2; font-size:.95rem;
}
.dm-composer button{
  background: linear-gradient(135deg,#d4af37,#8a6915); color:#1a1410;
  border:none; padding: 0 22px; border-radius: 999px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.dm-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 30px; text-align:center; color: rgba(244,229,194,0.7); }

/* Messaging intro slider */
.dm-intro{ max-width: 780px; margin: 40px auto; text-align:center; }
.dm-slider{
  position:relative; border-radius: 24px; overflow:hidden;
  border: 1px solid rgba(212,175,55,0.3);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  aspect-ratio: 16/10; background:#0a0a0f;
}
.dm-slider .slide{ position:absolute; inset:0; opacity:0; transition: opacity .8s ease; }
.dm-slider .slide.active{ opacity:1; }
.dm-slider .slide img{ width:100%; height:100%; object-fit:cover; }
.dm-slider::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7)); pointer-events:none; }
.dm-slider .dots{ position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:2; }
.dm-slider .dot{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,0.4); }
.dm-slider .dot.active{ background:#d4af37; width: 22px; border-radius:4px; }
.dm-start-btn{
  display:inline-flex; align-items:center; gap:10px; margin-top: 28px;
  padding: 14px 32px; border-radius: 999px; cursor:pointer; border:none;
  background: linear-gradient(135deg,#f4e5c2,#d4af37,#8a6915); color:#1a1410;
  font-weight:700; font-family:'Playfair Display', serif; font-size: 1.05rem; letter-spacing: 1px;
  box-shadow: 0 14px 30px rgba(212,175,55,0.45);
  transition: transform .2s;
}
.dm-start-btn:hover{ transform: translateY(-2px); }
@keyframes luxFadeUp { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform:none; } }

/* ==========================================
   HERO LOGO — circular, professional, animated gold flow
   (matches the SPIRA wordmark gradient flow)
   ========================================== */
@keyframes spiraGoldFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.logo-gradient-flow{
  background: linear-gradient(110deg,#fff4c2 0%, #f0d27d 18%, #d4af37 36%, #b8860b 54%, #f4e5c2 72%, #d4af37 90%, #fff4c2 100%);
  background-size: 280% 280%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: spiraGoldFlow 7s ease-in-out infinite;
  filter: drop-shadow(0 2px 10px rgba(212,175,55,0.18));
}

.hero-logo-pro{
  appearance:none; -webkit-appearance:none;
  border:none; cursor:pointer;
  position: relative;
  width: 7.25rem !important; height: 7.25rem !important;
  border-radius: 50% !important;
  display:flex !important; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55), rgba(255,255,255,0) 38%),
    conic-gradient(from 210deg at 50% 50%,
      #fff4c2 0deg, #f0d27d 60deg, #d4af37 130deg,
      #8a6915 200deg, #d4af37 270deg, #fff4c2 360deg) !important;
  background-size: 200% 200%, 200% 200% !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.35) inset,
    0 0 0 6px rgba(212,175,55,0.10),
    0 18px 38px rgba(0,0,0,0.45),
    inset 0 -8px 18px rgba(0,0,0,0.28),
    inset 0 4px 10px rgba(255,255,255,0.35) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  transition: transform .35s ease, box-shadow .35s ease;
  animation: spiraGoldFlow 9s ease-in-out infinite;
}
.hero-logo-pro:hover{ transform: translateY(-2px) scale(1.02); }
.hero-logo-pro:active{ transform: scale(0.97); }
.hero-logo-pro .hl-letter{
  font-family: 'Playfair Display', serif;
  font-weight: 800; font-size: 3.4rem; line-height: 1;
  background: linear-gradient(180deg,#fffaf0 0%,#fff4c2 35%,#caa64a 70%,#7a5a14 100%);
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 2px 4px rgba(0,0,0,0.18);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
  pointer-events:none;
}
.hero-logo-pro .hl-mute-badge{
  position:absolute; right: 4px; bottom: 4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.78);
  display:flex; align-items:center; justify-content:center;
  color:#f4e5c2; border:1px solid rgba(212,175,55,0.55);
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
  opacity: 0.92; transition: opacity .25s, transform .25s;
  pointer-events:none;
}
.hero-logo-pro.is-playing .hl-mute-badge{ opacity: 0; transform: scale(.7); }
.mobile-menu-rights{
  margin-top: 18px; padding: 18px 24px 28px; text-align:center;
  color: rgba(244,229,194,0.55); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  border-top: 1px solid rgba(212,175,55,0.18);
}
@media (max-width: 640px){
  .hero-logo-pro{ width: 5.75rem !important; height: 5.75rem !important; }
  .hero-logo-pro .hl-letter{ font-size: 2.7rem; }
}