/* L'ESSENCE DU LUXE - Sections CSS */
/* Extracted from index.html inline style blocks */
/* Phase 1.8: CSS Extraction */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700;800&display=swap');

/* Block 1 (was at line 82) */
/* OP3: LATENCIA ZERO — Diptyque/Porsche trick: guaranteed luxury typography */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
    src: url(../fonts/playfair-900.woff2?v=2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/playfair-700.woff2?v=2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    /* OP3: upgraded from 'optional' — luxury MUST appear, never generic system font */
    src: url(../fonts/inter-400.woff2?v=2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Block 2 (was at line 419) */
/* Critical CSS — above-the-fold only */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    background: #0a0a0a;
    color: #e8e8e8;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 10, 10, .95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: .8rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(201, 169, 110, .08)
}

.nav-logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #C9A96E;
    letter-spacing: 1px
}

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 1.5rem 3rem;
    position: relative;
    overflow: hidden;
    background: transparent !important
}

/* ═══ NERV PHANTOM BACKGROUND — Dynamic Image Rotator ═══ */
#nerv-phantom-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

#nerv-phantom-bg .phantom-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
    will-change: opacity;
}

#nerv-phantom-bg .phantom-slide.active {
    opacity: 1;
}

/* Dark overlay — keeps gold text and stats legible */
#nerv-phantom-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(10, 10, 10, .50) 0%,
            rgba(10, 10, 10, .82) 40%,
            rgba(10, 10, 10, .88) 60%,
            rgba(10, 10, 10, .50) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    background: linear-gradient(135deg, #C9A96E, #E8D5B0, #C9A96E);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: .8rem
}

.hero-content {
    max-width: 800px;
    z-index: 2;
    contain: layout style;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: all .3s
}

.btn-gold {
    background: linear-gradient(135deg, #C9A96E, #A8884E);
    color: #0a0a0a
}

.btn-glass {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #e8e8e8
}

#particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none
}

/* Block 3 (was at line 557) */
/* ═══ PERF: content-visibility for below-fold sections ═══ */
#encyclopedia,
#pricing,
#features,
#tech,
#screens,
#download {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* ═══ LUXURY STATS — HORIZONTAL GRID ═══ */
.hero-stats-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem 2rem;
    max-width: 750px;
    margin: 0 auto 2rem;
    padding: 1rem 0;
    text-align: center;
}

.hero-stats-stack .stat-row {
    flex: 0 0 auto;
}

.hero-stats-stack .stat-number {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: #C9A96E;
    line-height: 1.1;
}

.hero-stats-stack .stat-label {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.5rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.2rem;
}

.hero-stats-stack .stat-row.grand {
    flex-basis: 100%;
    padding-top: .8rem;
    border-top: 1px solid rgba(212, 175, 55, 0.08);
}

.hero-stats-stack .stat-row.grand .stat-number {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    background: linear-gradient(135deg, #C9A96E 0%, #E8D5B0 40%, #C9A96E 70%, #E8D5B0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-stats-stack .stat-row.grand .stat-label {
    font-size: 0.55rem;
    letter-spacing: 4px;
    color: rgba(232, 213, 160, 0.6);
}

@media (max-width: 600px) {
    /* ── CRITICAL MOBILE CONTAINMENT FIX ── */
    
    /* hero-content: remove contain:layout (it pins width to 800px) & fix width */
    .hero-content {
        max-width: 100%;
        width: 100%;
        contain: none;
        /* NOTE: DO NOT add transform:none here — it breaks logo GPU compositing layer */
    }

    /* Stats: grid instead of flex-wrap — fits any viewport */
    .hero-stats-stack {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        max-width: 100%;
        width: 100%;
        margin: 0 auto 1rem;
        padding: 0.6rem 0;
        flex-wrap: unset;
        justify-content: unset;
    }

    .hero-stats-stack .stat-row {
        flex: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 6px 2px;
        background: rgba(201,169,110,0.04);
        border-radius: 8px;
        border: 1px solid rgba(201,169,110,0.07);
        overflow: hidden;
        min-width: 0;
    }

    .hero-stats-stack .stat-row.grand {
        grid-column: 1 / -1;
        flex-basis: auto;
        padding-top: 6px;
    }

    .hero-stats-stack .stat-number {
        font-size: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        text-align: center;
    }

    .hero-stats-stack .stat-row.grand .stat-number {
        font-size: 1.4rem;
    }

    .hero-stats-stack .stat-label {
        font-size: 0.44rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        text-align: center;
    }
}

/* Block 4 (was at line 665) */
@media(max-width:768px) {
    #particles {
        display: none !important
    }

    .logo-glow,
    .logo-ring-outer,
    .logo-particles,
    .logo-ring-svg,
    .logo-shimmer {
        animation: none !important
    }
    
    /* Explorer cards más angostos para móvil */
    .exp-card {
        min-width: 220px !important;
        max-width: 220px !important;
    }
    
    .exp-card .exp-img-wrap {
        height: 180px !important;
    }
    
    .exp-card .exp-img-wrap img {
        width: 120px !important;
        height: 150px !important;
    }
}

/* Performance: skip rendering off-screen sections until scroll (competitor intelligence: Druni.es) */
#explorerStrip,
#marcas-destacadas,
#encyclopedia,
.feature-grid,
#comparator,
#olfactory-wheel-section,
.pricing-section,
.gallery-section,
footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Block 5 (was at line 738) */
.nav-login-btn {
    background: none;
    border: 1px solid rgba(201, 169, 110, .3);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #C9A96E;
    transition: all .3s;
    padding: 0
}

.nav-login-btn:hover {
    background: rgba(201, 169, 110, .1);
    border-color: #C9A96E;
    transform: scale(1.1)
}

/* Block 6 (was at line 845) */
.navbar {
    top: 0 !important
}

/* Block 7 (was at line 859) */
.logo-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    margin: 0 auto 1.2rem
}

.logo-glow {
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, .2) 0%, rgba(191, 161, 74, .08) 30%, rgba(138, 110, 47, .03) 50%, transparent 70%);
    animation: logoPulse 4s ease-in-out infinite;
    pointer-events: none
}

.logo-ring-outer {
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(252, 246, 186, .05);
    border-radius: 26%;
    animation: logoBreath 6s ease-in-out infinite
}

.logo-badge {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 22%;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 15px 60px rgba(0, 0, 0, .7), 0 0 100px rgba(212, 175, 55, .06)
}

.logo-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.logo-ring-svg {
    position: absolute;
    inset: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    z-index: 1;
    pointer-events: none
}

.logo-shimmer {
    position: absolute;
    inset: 0;
    border-radius: 22%;
    background: linear-gradient(115deg, transparent 30%, rgba(252, 246, 186, .05) 48%, rgba(255, 255, 255, .03) 50%, rgba(252, 246, 186, .04) 52%, transparent 70%);
    background-size: 250% 250%;
    animation: logoShimmer 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 3
}

.logo-particles {
    position: absolute;
    inset: -35px;
    pointer-events: none;
    z-index: 0;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.logo-particles .lp {
    position: absolute;
    border-radius: 50%;
    background: rgba(252, 246, 186, .5);
    animation: lpFloat 5s ease-in-out infinite
}

.logo-particles .lp:nth-child(1) {
    width: 2px;
    height: 2px;
    top: 8%;
    left: 18%;
    animation-delay: 0s;
    animation-duration: 4.5s
}

.logo-particles .lp:nth-child(2) {
    width: 1.5px;
    height: 1.5px;
    top: 85%;
    left: 22%;
    animation-delay: 1.2s;
    animation-duration: 5.5s
}

.logo-particles .lp:nth-child(3) {
    width: 2.5px;
    height: 2.5px;
    top: 15%;
    right: 12%;
    animation-delay: 2.4s;
    animation-duration: 4s
}

.logo-particles .lp:nth-child(4) {
    width: 1.5px;
    height: 1.5px;
    bottom: 12%;
    right: 18%;
    animation-delay: 0.8s;
    animation-duration: 6s
}

.logo-particles .lp:nth-child(5) {
    width: 2px;
    height: 2px;
    top: 55%;
    left: 3%;
    animation-delay: 3s;
    animation-duration: 5s
}

.logo-particles .lp:nth-child(6) {
    width: 1px;
    height: 1px;
    top: 35%;
    right: 5%;
    animation-delay: 1.8s;
    animation-duration: 4.8s
}

.logo-particles .lp:nth-child(7) {
    width: 2px;
    height: 2px;
    top: 70%;
    right: 8%;
    animation-delay: 0.4s;
    animation-duration: 5.2s
}

.logo-particles .lp:nth-child(8) {
    width: 1.5px;
    height: 1.5px;
    top: 5%;
    left: 50%;
    animation-delay: 2s;
    animation-duration: 4.2s
}

@keyframes logoPulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.06)
    }
}

@keyframes logoBreath {

    0%,
    100% {
        opacity: .2;
        transform: scale(1)
    }

    50% {
        opacity: .5;
        transform: scale(1.03)
    }
}

@keyframes logoShimmer {
    0% {
        background-position: 250% 0
    }

    100% {
        background-position: -250% 0
    }
}

@keyframes lpFloat {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0) scale(.4)
    }

    20% {
        opacity: .8
    }

    50% {
        transform: translateY(-14px) scale(1);
        opacity: 1
    }

    80% {
        opacity: .4
    }

    100% {
        transform: translateY(-24px) scale(.2)
    }
}

/* Block 8 (was at line 1172) */
/* V12 ENGINE — CSS animations killed, scrollLeft takes over */
#explorerCards::-webkit-scrollbar {
    display: none
}

#explorerCards {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ── Apple-Level Explorer Card Aesthetics ── */
.exp-card {
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(12, 10, 8, .85) 0%, rgba(5, 5, 5, .95) 100%);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    transition: transform .55s cubic-bezier(.23, 1, .32, 1),
        box-shadow .55s cubic-bezier(.23, 1, .32, 1),
        border-color .4s ease;
    will-change: transform;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.exp-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 50% 0%, rgba(201, 169, 110, .12) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}

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

.exp-card:hover {
    transform: translateY(-12px) translateZ(0) scale(1.02);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(201, 169, 110, .15);
    border-color: rgba(201, 169, 110, .3);
}

.exp-card .exp-img-wrap {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    position: relative;
    overflow: hidden;
    transition: background .5s ease;
    background: radial-gradient(ellipse at center bottom, rgba(255,255,255,.03) 0%, transparent 70%);
}

/* STRICT uniform image sizing — all images EXACTLY the same footprint */
.exp-card .exp-img-wrap img {
    width: 180px;
    height: 210px;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,.6));
    transition: transform .5s cubic-bezier(.23,1,.32,1), filter .5s;
}

.exp-card:hover .exp-img-wrap img {
    transform: scale(1.06) translateY(-4px);
    filter: drop-shadow(0 16px 35px rgba(0, 0, 0, .7));
}

.exp-card .exp-cta {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease;
    font-size: .6rem;
    color: #C9A96E;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: .5rem;
}

.exp-card:hover .exp-cta {
    opacity: 1;
    transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════
   LA BÓVEDA — EDITORIAL SPLIT-SCREEN v4.0
   45% cinematic image | 55% Tiffany content · edge-to-edge
   ══════════════════════════════════════════════════════════════ */
#vault-promo {
    background: #000;
    padding: 0;
}
#vault-promo::before {
    content: '';
    position: absolute;
    top: 0; left: 45%; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 30% 25%, rgba(23,207,200,.25) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(23,207,200,.10) 0%, transparent 40%);
    pointer-events: none;
    animation: vaultAmbient 8s ease-in-out infinite alternate;
    z-index: 3;
}
@keyframes vaultAmbient {
    from { opacity: .7; }
    to   { opacity: 1;  }
}

/* ── GRID: 45% image | 55% content ── */
.boveda-inner {
    display: grid;
    grid-template-columns: 45% 55%;
    max-width: 100%;
    margin: 0;
    text-align: center;
    position: relative;
    min-height: 660px;
}

/* ── LEFT: Cinematic perfume image ── */
.boveda-visual {
    position: relative;
    background: url('/img/editorial-boveda.png') center / cover no-repeat;
    overflow: hidden;
}
.boveda-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.25) 55%,
        rgba(3,15,18,.94) 100%);
}

/* ── RIGHT: Tiffany Blue content panel ── */
.boveda-card {
    background: linear-gradient(160deg,
        rgba(6,28,32,.98) 0%,
        rgba(4,20,24,.99) 40%,
        rgba(3,15,18,1) 100%);
    border: none;
    border-left: 1px solid rgba(23,207,200,.2);
    border-radius: 0;
    padding: 5rem 4rem 5rem 3.5rem;
    position: relative;
    overflow: visible;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow:
        -80px 0 180px rgba(0,0,0,.8),
        inset 1px 0 0 rgba(23,207,200,.15);
    animation: bovedaLeftGlow 4s ease-in-out infinite;
}
@keyframes bovedaLeftGlow {
    0%,100% { box-shadow: -80px 0 180px rgba(0,0,0,.8), inset 1px 0 0 rgba(23,207,200,.15); }
    50%     { box-shadow: -80px 0 180px rgba(0,0,0,.8), inset 1px 0 0 rgba(23,207,200,.45); }
}

/* Inner ambient glow — right panel only */
.boveda-inner::after {
    content: '';
    position: absolute;
    top: -20%; left: 45%; right: 0; bottom: -20%;
    background: radial-gradient(ellipse at 30% 40%, rgba(23,207,200,.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Mobile: stack vertically */
@media (max-width: 900px) {
    .boveda-inner { grid-template-columns: 1fr; min-height: auto; }
    .boveda-visual { min-height: 300px; }
    .boveda-card { 
        padding: 3rem 1.5rem; 
        border-left: none; 
        border-top: 1px solid rgba(23,207,200,.2);
    }
}

.boveda-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    border-radius: 50px;
    background: rgba(23,207,200,.12);
    border: 1px solid rgba(23,207,200,.4);
    color: #17CFC8;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 1.8rem;
    box-shadow: 0 0 20px rgba(23,207,200,.2), inset 0 0 12px rgba(23,207,200,.06);
    position: relative;
    z-index: 1;
}

.boveda-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 900;
    color: #17CFC8;
    margin-bottom: 1rem;
    letter-spacing: -1px;
    line-height: 1.05;
    position: relative;
    z-index: 1;
    text-shadow:
        0 0 40px rgba(23,207,200,.7),
        0 0 80px rgba(23,207,200,.4),
        0 0 120px rgba(23,207,200,.2);
    animation: titleGlow 3s ease-in-out infinite alternate;
}
@keyframes titleGlow {
    from { text-shadow: 0 0 30px rgba(23,207,200,.6), 0 0 60px rgba(23,207,200,.3); }
    to   { text-shadow: 0 0 50px rgba(23,207,200,.9), 0 0 100px rgba(23,207,200,.5), 0 0 140px rgba(23,207,200,.2); }
}

.boveda-title em {
    font-style: italic;
    color: #7FFCF8;
}

.boveda-sub {
    color: rgba(255, 255, 255, .55);
    font-size: .95rem;
    max-width: 620px;
    margin: 0 auto 2.5rem;
    line-height: 1.75;
    position: relative;
    z-index: 1;
}

/* ── STATS — Large & Dominant ── */
.boveda-stats {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.boveda-stats > div {
    padding: 1rem 2.5rem;
    border-right: 1px solid rgba(23,207,200,.12);
    position: relative;
}
.boveda-stats > div:last-child {
    border-right: none;
}

.boveda-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    font-weight: 900;
    color: #17CFC8;
    display: block;
    line-height: 1;
    text-shadow: 0 0 30px rgba(23,207,200,.6), 0 0 60px rgba(23,207,200,.3);
    letter-spacing: -1px;
}

.boveda-stat-lbl {
    font-size: .58rem;
    color: rgba(23,207,200,.5);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 6px;
    display: block;
}

/* ── Carousel Styles ── */
.boveda-carousel-wrap {
    position: relative;
    margin: 0 -1rem 3rem;
    overflow: visible;
}

.boveda-carousel {
    display: flex;
    gap: 1.2rem;
    scrollbar-width: none;
    padding: 1.2rem .5rem;
    will-change: auto;
}

.boveda-carousel::-webkit-scrollbar {
    display: none;
}

/* ── Product Cards — Tiffany Premium ── */
.boveda-carousel .bv-card {
    flex: 0 0 210px;
    min-height: 300px;
    scroll-snap-align: start;
    background: linear-gradient(180deg,
        rgba(10,30,34,.95) 0%,
        rgba(5,18,22,.98) 100%);
    border: 1px solid rgba(23,207,200,.18);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    outline: none;
    cursor: pointer;
    transition: transform .5s cubic-bezier(.23,1,.32,1), box-shadow .5s, border-color .4s;
    will-change: transform;
    position: relative;
    box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(23,207,200,0);
}

.boveda-carousel .bv-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #17CFC8, transparent);
    opacity: 0;
    transition: opacity .4s;
}

.boveda-carousel .bv-card:hover::before {
    opacity: 1;
}

.boveda-carousel .bv-card:focus,
.boveda-carousel .bv-card:focus-visible {
    outline: none;
}

.boveda-carousel .bv-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(23,207,200,.5);
    box-shadow:
        0 20px 50px rgba(0,0,0,.6),
        0 0 30px rgba(23,207,200,.25),
        0 0 0 1px rgba(23,207,200,.2);
}

.bv-card-img {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at center 80%, rgba(23,207,200,.1) 0%, transparent 65%);
    padding: 1rem;
    overflow: hidden;
    position: relative;
}

.bv-card-img img {
    max-height: 148px;
    max-width: 90%;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(23,207,200,.15));
    transition: transform .5s cubic-bezier(.23,1,.32,1), filter .5s;
}

.bv-card:hover .bv-card-img img {
    transform: scale(1.1) translateY(-4px);
    filter: drop-shadow(0 16px 36px rgba(0,0,0,.7)) drop-shadow(0 0 20px rgba(23,207,200,.3));
}

.bv-card-body {
    padding: .7rem .9rem .9rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bv-card-brand {
    font-size: .55rem;
    color: rgba(23,207,200,.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 3px;
    font-weight: 700;
}

.bv-card-name {
    font-family: 'Playfair Display', serif;
    font-size: .82rem;
    color: #F0F8F8;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bv-card-cta {
    display: block;
    margin-top: .7rem;
    padding: 7px 5px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(23,207,200,.2), rgba(23,207,200,.08));
    border: 1px solid rgba(23,207,200,.3);
    color: #17CFC8;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
    text-transform: uppercase;
    /* Prevent text wrapping on mobile */
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    overflow: hidden;
}

.bv-card-cta:hover {
    background: linear-gradient(135deg, rgba(23,207,200,.35), rgba(23,207,200,.15));
    border-color: rgba(23,207,200,.6);
    box-shadow: 0 0 16px rgba(23,207,200,.3);
}

.bv-card-price {
    color: #17CFC8;
    font-size: .78rem;
    font-weight: 800;
    margin-top: 3px;
    text-shadow: 0 0 10px rgba(23,207,200,.4);
}

/* Nav arrows */
.boveda-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(23,207,200,.3);
    background: rgba(6,28,32,.9);
    color: #17CFC8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all .3s;
    font-size: 1.1rem;
    box-shadow: 0 0 20px rgba(23,207,200,.15);
}

.boveda-nav:hover {
    background: rgba(23,207,200,.15);
    border-color: rgba(23,207,200,.6);
    box-shadow: 0 0 30px rgba(23,207,200,.3);
}

.boveda-nav.left { left: 4px; }
.boveda-nav.right { right: 4px; }

/* Brands strip */
.boveda-brands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

.boveda-brand-tag {
    padding: 5px 16px;
    border-radius: 20px;
    background: rgba(23,207,200,.06);
    border: 1px solid rgba(23,207,200,.15);
    color: rgba(23,207,200,.7);
    font-size: .65rem;
    letter-spacing: .5px;
    transition: all .2s;
}
.boveda-brand-tag:hover {
    background: rgba(23,207,200,.12);
    border-color: rgba(23,207,200,.35);
    color: #17CFC8;
}

/* ── Main CTA — The Money Button ── */
.boveda-main-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 52px;
    border-radius: 50px;
    background: linear-gradient(135deg, #17CFC8 0%, #0BABA5 50%, #17CFC8 100%);
    background-size: 200% auto;
    color: #030f11;
    font-weight: 900;
    font-size: .95rem;
    text-decoration: none;
    letter-spacing: .5px;
    box-shadow:
        0 8px 40px rgba(23,207,200,.5),
        0 0 80px rgba(23,207,200,.2),
        inset 0 1px 0 rgba(255,255,255,.3);
    transition: all .4s cubic-bezier(.23,1,.32,1);
    animation: ctaPulse 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 8px 40px rgba(23,207,200,.5), 0 0 80px rgba(23,207,200,.2); }
    50%       { box-shadow: 0 8px 55px rgba(23,207,200,.7), 0 0 100px rgba(23,207,200,.35); }
}

.boveda-main-cta:hover {
    transform: translateY(-4px) scale(1.03);
    background-position: right center;
    box-shadow: 0 16px 60px rgba(23,207,200,.7), 0 0 120px rgba(23,207,200,.4);
}

.boveda-powered {
    margin-top: 1.5rem;
    font-size: .6rem;
    color: rgba(23,207,200,.25);
    letter-spacing: .5px;
    position: relative;
    z-index: 1;
}

@media(max-width:768px) {
    .boveda-card {
        padding: 2.5rem 1.5rem;
    }
    .boveda-stats > div {
        padding: .8rem 1.5rem;
        border-right: none;
        border-bottom: 1px solid rgba(23,207,200,.1);
    }
    .boveda-stats > div:last-child {
        border-bottom: none;
    }
}
@media(max-width:600px) {
    .boveda-card {
        padding: 2rem 1rem;
    }
    .boveda-stat-num {
        font-size: 2rem;
    }
    .boveda-carousel .bv-card {
        flex: 0 0 175px;
        min-height: 260px;
    }
    .bv-card-img {
        height: 140px;
    }
    .boveda-main-cta {
        padding: 15px 32px;
        font-size: .85rem;
    }
}

/* ── EL CORTE INGLÉS — Promo Section (Premium green variant of Bóveda) ── */
#eci-promo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(45, 140, 60, .06) 0%, transparent 60%);
    pointer-events: none;
}

.eci-inner {
    display: grid;
    grid-template-columns: 45% 55%;
    max-width: 100%;
    margin: 0;
    min-height: 660px;
    position: relative;
}

/* LEFT: Editorial perfumery store image */
.eci-visual {
    position: relative;
    background: url('/img/editorial-eci.png') center / cover no-repeat;
    overflow: hidden;
}
.eci-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(0,0,0,.05) 0%,
        rgba(8,20,10,.3) 60%,
        rgba(8,20,10,.95) 100%);
}

.eci-card {
    background: linear-gradient(160deg,
        rgba(6,22,10,.98) 0%,
        rgba(8,24,14,.99) 40%,
        rgba(4,18,8,1) 100%);
    border: none;
    border-left: 1px solid rgba(74,222,128,.2);
    border-radius: 0;
    padding: 5rem 4rem 5rem 3.5rem;
    position: relative;
    overflow: visible;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow:
        -80px 0 180px rgba(0,0,0,.8),
        inset 1px 0 0 rgba(74,222,128,.15);
    text-align: left;
}

/* eci-card::before replaced — new flat panel layout uses box-shadow animation */
.eci-card::before {
    content: '';
    position: absolute;
    top: 0; left: -1px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, transparent, #4ade80, transparent);
    opacity: .6;
    animation: eciEdgeGlow 4s ease-in-out infinite;
}

.eci-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: radial-gradient(ellipse at 30% 0%, rgba(74, 222, 128, .06), transparent 70%);
    pointer-events: none;
}

@keyframes eciEdgeGlow {
    0%,100% { opacity: .4; }
    50%      { opacity: .9; }
}

/* Mobile: stack vertically */
@media (max-width: 900px) {
    .eci-inner { grid-template-columns: 1fr; min-height: auto; }
    .eci-visual { min-height: 300px; }
    .eci-card { padding: 3rem 2rem; text-align: center; }
    .eci-promo-title { padding-left: 0; border-left: none; }
    .eci-promo-sub { margin: 0 auto 2rem; max-width: 100%; }
}

.eci-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 50px;
    background: rgba(45, 140, 60, .08);
    border: 1px solid rgba(74, 222, 128, .2);
    color: #4ade80;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.eci-promo-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: #F0E6C8;
    margin-bottom: 1rem;
    letter-spacing: -.5px;
    line-height: 1.1;
    padding-left: 1.5rem;
    border-left: 4px solid #4ade80;
}

.eci-promo-title em {
    background: linear-gradient(135deg, #4ade80 30%, #86efac 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
}

.eci-promo-sub {
    color: rgba(255, 255, 255, .5);
    font-size: .92rem;
    max-width: 520px;
    margin: 0 0 2rem;
    line-height: 1.7;
}

.eci-hl {
    color: #4ade80;
    font-weight: 700;
    text-decoration: none;
}

.eci-promo-sub a {
    color: #4ade80;
    text-decoration: none;
}

.eci-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.eci-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #4ade80;
    font-weight: 700;
    display: block;
    line-height: 1;
}

.eci-stat-lbl {
    font-size: .6rem;
    color: rgba(255, 255, 255, .3);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
    display: block;
}

/* ECI carousel card overrides — NUCLEAR LINK COLOR FIX */
.eci-bv-card,
.eci-bv-card:link,
.eci-bv-card:visited,
.eci-bv-card:hover,
.eci-bv-card:active {
    border-color: rgba(45, 140, 60, .15) !important;
    background: rgba(8, 20, 10, .8) !important;
    color: #F0E6C8 !important;
    text-decoration: none !important;
}

.eci-bv-card:hover {
    border-color: rgba(74, 222, 128, .3) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 20px rgba(45, 140, 60, .15) !important;
}

.eci-bv-card .bv-card-brand {
    color: rgba(74, 222, 128, .5) !important;
}

.eci-bv-card .bv-card-name {
    color: #F0E6C8 !important;
}

/* Also fix La Bóveda cards — same link color issue */
.boveda-carousel .bv-card:link,
.boveda-carousel .bv-card:visited,
.boveda-carousel .bv-card:active {
    color: #F0E6C8 !important;
    text-decoration: none !important;
}

/* Fix ALL inner elements inside carousel <a> cards — override inherited link blue */
.eci-carousel a,
.eci-carousel a:link,
.eci-carousel a:visited {
    color: inherit !important;
    text-decoration: none !important;
}

/* ── COMAS carousel card overrides — KILL BLUE LINK COLOR ── */
#comasCarousel .comas-bv-card,
#comasCarousel .comas-bv-card:link,
#comasCarousel .comas-bv-card:visited,
#comasCarousel .comas-bv-card:hover,
#comasCarousel .comas-bv-card:active,
.comas-bv-card,
.comas-bv-card:link,
.comas-bv-card:visited,
.comas-bv-card:hover,
.comas-bv-card:active {
    color: #F0E6C8 !important;
    text-decoration: none !important;
    background: rgba(20, 14, 8, .85) !important;
    border: 1px solid rgba(212, 175, 55, .1) !important;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    outline: none;
    cursor: pointer;
    transition: transform .5s cubic-bezier(.23, 1, .32, 1), box-shadow .5s, border-color .4s;
    flex: 0 0 180px;
    min-height: 260px;
}

.comas-bv-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(212, 175, 55, .3) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 20px rgba(212, 175, 55, .12) !important;
}

.comas-bv-card .bv-card-brand {
    color: rgba(212, 175, 55, .6) !important;
}

.comas-bv-card .bv-card-name {
    color: #F0E6C8 !important;
}

.comas-card-price {
    color: #D4AF37;
    font-size: .78rem;
    font-weight: 700;
    margin-top: 2px;
}

.comas-card-cta {
    background: linear-gradient(135deg, rgba(212, 175, 55, .15), rgba(212, 175, 55, .05)) !important;
    border-color: rgba(212, 175, 55, .25) !important;
    color: #D4AF37 !important;
}

.comas-card-cta:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, .3), rgba(212, 175, 55, .14)) !important;
    border-color: rgba(212, 175, 55, .5) !important;
    box-shadow: 0 0 18px rgba(212, 175, 55, .3), inset 0 0 10px rgba(255, 235, 120, .08) !important;
    color: #FFE066 !important;
}

/* ── Gold foil shimmer sweep (::after beam slides on hover) ── */
.comas-card-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 235, 120, .55),
        transparent
    );
    transform: skewX(-18deg);
    transition: left .55s cubic-bezier(.23, 1, .32, 1);
    pointer-events: none;
}

.comas-card-cta:hover::after {
    left: 140%;
}

/* ── Comas bv-card: gold top-bar on hover instead of teal ── */
.comas-bv-card::before {
    background: linear-gradient(90deg, transparent, #D4AF37, #FFE066, #D4AF37, transparent) !important;
}

/* Fix ALL inner elements inside Comas carousel — nuke inherited blue */
#comasCarousel a,
#comasCarousel a:link,
#comasCarousel a:visited,
#comasCarousel a:active,
#comasCarousel a *,
#comas-promo a,
#comas-promo a:link,
#comas-promo a:visited,
#comas-promo a * {
    color: inherit !important;
    text-decoration: none !important;
}

@media(max-width:600px) {
    .comas-bv-card {
        flex: 0 0 155px !important;
        min-height: 230px !important;
    }
}

.eci-card-cta {
    background: linear-gradient(135deg, rgba(45, 140, 60, .2), rgba(45, 140, 60, .05)) !important;
    border-color: rgba(74, 222, 128, .2) !important;
    color: #4ade80 !important;
}

.eci-card-cta:hover {
    background: linear-gradient(135deg, rgba(74, 222, 128, .3), rgba(45, 140, 60, .15)) !important;
    border-color: rgba(74, 222, 128, .4) !important;
}

.eci-card-niche {
    position: absolute;
    top: 6px;
    left: 6px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-size: .5rem;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    z-index: 2;
}

.eci-brands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 2rem;
}

.eci-brand-tag {
    padding: 4px 14px;
    border-radius: 20px;
    background: rgba(45, 140, 60, .05);
    border: 1px solid rgba(74, 222, 128, .12);
    color: rgba(255, 255, 255, .45);
    font-size: .65rem;
    letter-spacing: .5px;
    transition: all .3s;
}

.eci-brand-tag:hover {
    background: rgba(45, 140, 60, .12);
    border-color: rgba(74, 222, 128, .25);
    color: #4ade80;
}

.eci-main-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 44px;
    border-radius: 50px;
    background: linear-gradient(135deg, #2d8c3c, #1a5c2a);
    color: #fff;
    font-weight: 800;
    font-size: .9rem;
    text-decoration: none;
    letter-spacing: .5px;
    box-shadow: 0 6px 30px rgba(45, 140, 60, .3);
    transition: all .3s;
}

.eci-main-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 45px rgba(74, 222, 128, .35);
    background: linear-gradient(135deg, #3da64d, #2d8c3c);
}

.eci-powered {
    margin-top: 1.2rem;
    font-size: .6rem;
    color: rgba(255, 255, 255, .2);
    letter-spacing: .5px;
}

/* ════════════════════════════════════════════
   INSTITUTIONAL PARTNER STRIP
   — Trust signal between ECI & Comas sections
   ════════════════════════════════════════════ */
.partner-strip {
    position: relative;
    background: rgba(5, 5, 5, .95);
    border-top: 1px solid rgba(201, 169, 110, .18);
    border-bottom: 1px solid rgba(201, 169, 110, .18);
    padding: 1.4rem 2rem;
    z-index: 2;
    overflow: hidden;
}

/* Subtle gold shimmer line across the top */
.partner-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 169, 110, .6) 30%,
        rgba(255, 235, 120, .8) 50%,
        rgba(201, 169, 110, .6) 70%,
        transparent 100%);
}

.partner-strip-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.partner-strip-label {
    font-size: .55rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(201, 169, 110, .5);
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.partner-strip-logos {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    justify-content: center;
}

.partner-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 30px;
    border: 1px solid transparent;
    transition: all .35s cubic-bezier(.16, 1, .3, 1);
}

.partner-logo-name {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .3px;
    transition: color .3s;
}

.partner-logo-type {
    font-size: .55rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .45;
    transition: opacity .3s;
    display: block;
    margin-top: 1px;
}

/* ECI — green palette */
.partner-logo-eci {
    color: rgba(74, 222, 128, .75);
}

.partner-logo-eci:hover {
    background: rgba(45, 140, 60, .08);
    border-color: rgba(74, 222, 128, .2);
    color: #4ade80;
    transform: translateY(-2px);
}

.partner-logo-eci:hover .partner-logo-type {
    opacity: .7;
}

/* Comas — gold/amber palette */
.partner-logo-comas {
    color: rgba(212, 175, 55, .75);
}

.partner-logo-comas:hover {
    background: rgba(212, 175, 55, .08);
    border-color: rgba(212, 175, 55, .2);
    color: #D4AF37;
    transform: translateY(-2px);
}

.partner-logo-comas:hover .partner-logo-type {
    opacity: .7;
}

/* Adlan -- warm cinnamon/honey palette */
.partner-logo-adlan {
    color: rgba(205, 133, 63, .75);
}

.partner-logo-adlan:hover {
    background: rgba(205, 133, 63, .08);
    border-color: rgba(205, 133, 63, .2);
    color: #CD853F;
    transform: translateY(-2px);
}

.partner-logo-adlan:hover .partner-logo-type {
    opacity: .7;
}

/* adlan-us-badge: small chip inside Adlan card */
.adlan-us-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 30px;
    background: rgba(205, 133, 63, .08);
    border: 1px solid rgba(205, 133, 63, .2);
    color: rgba(205, 133, 63, .75);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

/* Vertical separator between two partners */
.partner-strip-sep {
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(201, 169, 110, .25),
        transparent);
    flex-shrink: 0;
}

/* Right-side verified badge */
.partner-strip-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .55rem;
    letter-spacing: 1px;
    color: rgba(201, 169, 110, .4);
    white-space: nowrap;
    flex-shrink: 0;
}

.partner-strip-badge svg {
    stroke: rgba(74, 222, 128, .6);
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .partner-strip-inner {
        flex-direction: column;
        gap: .8rem;
        text-align: center;
    }

    .partner-strip-label,
    .partner-strip-badge {
        display: none;
    }

    .partner-strip-logos {
        gap: 1rem;
    }
}

/* ECI carousel wrap — reuses .boveda-carousel-wrap structure */
.eci-carousel-wrap {
    position: relative;
    margin: 0 -1rem 2.5rem;
    overflow: visible;
}

.eci-carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: auto; /* V12: ZERO smooth — JS toma el control */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1rem .5rem;
    will-change: auto;
    contain: layout style; /* V12: isolate reflows */
    min-height: 280px; /* V12: reserve CLS space */
}

.eci-carousel::-webkit-scrollbar {
    display: none
}

.eci-carousel .bv-card {
    flex: 0 0 200px;
    flex-shrink: 0; /* V12: cards NEVER shrink */
    min-height: 280px;
}

.eci-card-price {
    color: #4ade80;
    font-size: .78rem;
    font-weight: 700;
    margin-top: 2px;
}

@media(max-width:600px) {
    .eci-card {
        padding: 2rem 1.2rem
    }

    .eci-stats {
        gap: 1.5rem
    }

    .eci-stat-num {
        font-size: 1.5rem
    }

    .eci-carousel .bv-card {
        flex: 0 0 160px;
        min-height: 240px;
    }
}


/* ════════════════════════════════════════════
   PERFUMERÍA COMAS — Premium Grid Section
   Mirror of ECI layout — Gold/Amber palette
   (image RIGHT, card LEFT — mirrored)
   ════════════════════════════════════════════ */
#comas-promo {
    padding: 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
#comas-promo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(212, 175, 55, .05) 0%, transparent 60%);
    pointer-events: none;
}
.comas-inner {
    display: grid;
    grid-template-columns: 55% 45%;
    max-width: 100%;
    margin: 0;
    min-height: 660px;
    position: relative;
}
/* LEFT: card content */
.comas-card-panel {
    background: linear-gradient(160deg,
        rgba(18, 12, 4, .98) 0%,
        rgba(22, 15, 5, .99) 40%,
        rgba(12, 8, 2, 1) 100%);
    border: none;
    border-right: 1px solid rgba(212, 175, 55, .2);
    padding: 5rem 3.5rem 5rem 4rem;
    position: relative;
    overflow: visible;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 80px 0 180px rgba(0,0,0,.8), inset -1px 0 0 rgba(212,175,55,.15);
    text-align: left;
}
.comas-card-panel::before {
    content: '';
    position: absolute;
    top: 0; right: -1px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, transparent, #D4AF37, #FFE066, #D4AF37, transparent);
    opacity: .5;
    animation: comasEdgeGlow 4s ease-in-out infinite;
}
.comas-card-panel::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: radial-gradient(ellipse at 70% 0%, rgba(212, 175, 55, .06), transparent 70%);
    pointer-events: none;
}
@keyframes comasEdgeGlow {
    0%,100% { opacity: .35; }
    50%      { opacity: .85; }
}
/* RIGHT: editorial store image */
.comas-visual {
    position: relative;
    background: url('/img/editorial-comas.png') center / cover no-repeat;
    overflow: hidden;
}
.comas-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left,
        rgba(0,0,0,.05) 0%,
        rgba(12,8,2,.3) 60%,
        rgba(12,8,2,.95) 100%);
}
@media (max-width: 900px) {
    .comas-inner { grid-template-columns: 1fr; grid-template-rows: 300px 1fr; min-height: auto; }
    .comas-visual { min-height: 300px; grid-row: 1; }
    .comas-card-panel { padding: 3rem 2rem; text-align: center; grid-row: 2; }
    .comas-promo-title { padding-left: 0; border-left: none; }
    .comas-promo-sub { margin: 0 auto 2rem; max-width: 100%; }
}
.comas-badge-promo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 50px;
    background: rgba(212, 175, 55, .08);
    border: 1px solid rgba(212, 175, 55, .2);
    color: #D4AF37;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.comas-promo-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: #F0E6C8;
    margin-bottom: 1rem;
    letter-spacing: -.5px;
    line-height: 1.1;
    padding-left: 1.5rem;
    border-left: 4px solid #D4AF37;
}
.comas-promo-title em {
    background: linear-gradient(135deg, #D4AF37 30%, #FFE066 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
}
.comas-promo-sub {
    color: rgba(255, 255, 255, .5);
    font-size: .92rem;
    max-width: 520px;
    margin: 0 0 2rem;
    line-height: 1.7;
}
.comas-hl { color: #D4AF37; font-weight: 700; }
.comas-stats-promo {
    display: flex;
    justify-content: flex-start;
    gap: 3rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
.comas-stat-num-promo {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #D4AF37;
    font-weight: 700;
    display: block;
    line-height: 1;
}
.comas-stat-lbl-promo {
    font-size: .6rem;
    color: rgba(255, 255, 255, .3);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
    display: block;
}
.comas-carousel-wrap-promo {
    position: relative;
    margin: 0 -1rem 2.5rem;
    overflow: visible;
    -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
    mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}
.comas-carousel-promo {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1rem .5rem;
    will-change: auto;
    min-height: 280px;
}
.comas-carousel-promo::-webkit-scrollbar { display: none; }
.comas-brands-promo {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .5rem;
    margin-bottom: 2rem;
}
.comas-brand-tag-promo {
    padding: 4px 14px;
    border-radius: 20px;
    background: rgba(212, 175, 55, .05);
    border: 1px solid rgba(212, 175, 55, .12);
    color: rgba(255, 255, 255, .45);
    font-size: .65rem;
    letter-spacing: .5px;
    transition: all .3s;
}
.comas-brand-tag-promo:hover {
    background: rgba(212, 175, 55, .12);
    border-color: rgba(212, 175, 55, .25);
    color: #D4AF37;
}
.comas-main-cta-promo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 44px;
    border-radius: 50px;
    background: linear-gradient(135deg, #C9A96E, #A68B4B);
    color: #0a0908;
    font-weight: 800;
    font-size: .9rem;
    text-decoration: none;
    letter-spacing: .5px;
    box-shadow: 0 6px 30px rgba(201, 169, 110, .3);
    transition: all .3s;
}
.comas-main-cta-promo:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 45px rgba(212, 175, 55, .4);
    background: linear-gradient(135deg, #D4AF37, #C9A96E);
}
.comas-powered-promo {
    margin-top: 1.2rem;
    font-size: .6rem;
    color: rgba(255, 255, 255, .2);
    letter-spacing: .5px;
}
@media(max-width:600px) {
    .comas-card-panel { padding: 2rem 1.2rem; }
    .comas-stats-promo { gap: 1.5rem; justify-content: center; }
    .comas-stat-num-promo { font-size: 1.5rem; }
    .comas-brands-promo { justify-content: center; }
}

/* ════════════════════════════════════════════
   ADLAN FRAGRANCES — Premium Grid Section
   Warm amber/honey/cinnamon palette
   (image LEFT, card RIGHT — like ECI)
   ════════════════════════════════════════════ */
#adlan-promo {
    padding: 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
#adlan-promo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(205, 133, 63, .05) 0%, transparent 60%);
    pointer-events: none;
}
.adlan-inner {
    display: grid;
    grid-template-columns: 45% 55%;
    max-width: 100%;
    margin: 0;
    min-height: 660px;
    position: relative;
}
/* LEFT: Editorial candle/diffuser image */
.adlan-visual {
    position: relative;
    background: url('/img/editorial-adlan.png') center / cover no-repeat;
    overflow: hidden;
    min-height: 600px;
    align-self: stretch;
}
.adlan-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(0,0,0,.05) 0%,
        rgba(15, 8, 3, .3) 60%,
        rgba(15, 8, 3, .95) 100%);
}
/* RIGHT: card content */
.adlan-card {
    background: linear-gradient(160deg,
        rgba(15, 8, 3, .98) 0%,
        rgba(20, 11, 4, .99) 40%,
        rgba(10, 5, 1, 1) 100%);
    border: none;
    border-left: 1px solid rgba(205, 133, 63, .2);
    padding: 5rem 4rem 5rem 3.5rem;
    position: relative;
    overflow: visible;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: -80px 0 180px rgba(0,0,0,.8), inset 1px 0 0 rgba(205,133,63,.15);
    text-align: left;
}
.adlan-card::before {
    content: '';
    position: absolute;
    top: 0; left: -1px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, transparent, #CD853F, #F4A460, #CD853F, transparent);
    opacity: .5;
    animation: adlanEdgeGlow 4s ease-in-out infinite;
}
.adlan-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: radial-gradient(ellipse at 30% 0%, rgba(205, 133, 63, .06), transparent 70%);
    pointer-events: none;
}
@keyframes adlanEdgeGlow {
    0%,100% { opacity: .35; }
    50%      { opacity: .85; }
}
@media (max-width: 900px) {
    .adlan-inner { grid-template-columns: 1fr; min-height: auto; }
    .adlan-visual { min-height: 300px; }
    .adlan-card { padding: 3rem 2rem; text-align: center; }
    .adlan-promo-title { padding-left: 0; border-left: none; }
    .adlan-promo-sub { margin: 0 auto 2rem; max-width: 100%; }
}
.adlan-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 50px;
    background: rgba(205, 133, 63, .08);
    border: 1px solid rgba(205, 133, 63, .2);
    color: #CD853F;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.adlan-promo-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: #F5E8D4;
    margin-bottom: 1rem;
    letter-spacing: -.5px;
    line-height: 1.1;
    padding-left: 1.5rem;
    border-left: 4px solid #CD853F;
}
.adlan-promo-title em {
    background: linear-gradient(135deg, #CD853F 30%, #F4A460 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
}
.adlan-promo-sub {
    color: rgba(255, 255, 255, .5);
    font-size: .92rem;
    max-width: 520px;
    margin: 0 0 2rem;
    line-height: 1.7;
}
.adlan-hl { color: #CD853F; font-weight: 700; }
.adlan-stats {
    display: flex;
    justify-content: flex-start;
    gap: 3rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
.adlan-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #CD853F;
    font-weight: 700;
    display: block;
    line-height: 1;
}
.adlan-stat-lbl {
    font-size: .6rem;
    color: rgba(255, 255, 255, .3);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
    display: block;
}
.adlan-carousel-wrap {
    position: relative;
    margin: 0 -1rem 2.5rem;
    overflow: visible;
    -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
    mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}
.adlan-carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1rem .5rem;
    will-change: auto;
    min-height: 280px;
}
.adlan-carousel::-webkit-scrollbar { display: none; }
/* Adlan product cards */
.adlan-card-item {
    flex: 0 0 200px;
    min-height: 280px;
    background: rgba(15, 8, 2, .85);
    border: 1px solid rgba(205, 133, 63, .12);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #F5E8D4;
    cursor: pointer;
    transition: transform .5s cubic-bezier(.23,1,.32,1), box-shadow .5s, border-color .4s;
}
.adlan-card-item:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(205, 133, 63, .4);
    box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 30px rgba(205,133,63,.2);
}
.adlan-card-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #CD853F, transparent);
    opacity: 0;
    transition: opacity .4s;
}
.adlan-card-item:hover::before { opacity: 1; }
.adlan-img-wrap {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center 80%, rgba(205,133,63,.1) 0%, transparent 65%);
    padding: 1rem;
    overflow: hidden;
    position: relative;
}
.adlan-img-wrap img {
    max-height: 148px;
    max-width: 88%;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(205,133,63,.15));
    transition: transform .5s cubic-bezier(.23,1,.32,1);
}
.adlan-card-item:hover .adlan-img-wrap img {
    transform: scale(1.08) translateY(-4px);
}
.adlan-card-body {
    padding: .7rem .9rem .9rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.adlan-card-type {
    font-size: .52rem;
    color: rgba(205, 133, 63, .55);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 3px;
    font-weight: 700;
}
.adlan-card-name {
    font-family: 'Playfair Display', serif;
    font-size: .8rem;
    color: #F5E8D4;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.adlan-card-price {
    color: #CD853F;
    font-size: .78rem;
    font-weight: 800;
    margin-top: 3px;
    text-shadow: 0 0 10px rgba(205,133,63,.3);
}
.adlan-card-cta {
    display: block;
    margin-top: .7rem;
    padding: 7px 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(205,133,63,.2), rgba(205,133,63,.08));
    border: 1px solid rgba(205,133,63,.3);
    color: #CD853F;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}
.adlan-card-cta:hover {
    background: linear-gradient(135deg, rgba(205,133,63,.35), rgba(205,133,63,.15));
    border-color: rgba(205,133,63,.6);
    box-shadow: 0 0 16px rgba(205,133,63,.3);
}
.adlan-brands {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .5rem;
    margin-bottom: 2rem;
}
.adlan-brand-tag {
    padding: 4px 14px;
    border-radius: 20px;
    background: rgba(205, 133, 63, .05);
    border: 1px solid rgba(205, 133, 63, .12);
    color: rgba(255, 255, 255, .45);
    font-size: .65rem;
    letter-spacing: .5px;
    transition: all .3s;
}
.adlan-brand-tag:hover {
    background: rgba(205, 133, 63, .12);
    border-color: rgba(205, 133, 63, .25);
    color: #CD853F;
}
.adlan-main-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 44px;
    border-radius: 50px;
    background: linear-gradient(135deg, #CD853F 0%, #A0522D 50%, #CD853F 100%);
    background-size: 200% auto;
    color: #fff;
    font-weight: 800;
    font-size: .9rem;
    text-decoration: none;
    letter-spacing: .5px;
    box-shadow: 0 6px 30px rgba(205, 133, 63, .3);
    transition: all .4s cubic-bezier(.23,1,.32,1);
}
.adlan-main-cta:hover {
    transform: translateY(-3px);
    background-position: right center;
    box-shadow: 0 10px 45px rgba(205, 133, 63, .45);
}
.adlan-powered {
    margin-top: 1.2rem;
    font-size: .6rem;
    color: rgba(255, 255, 255, .2);
    letter-spacing: .5px;
}
.adlan-us-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(205, 133, 63, .1);
    border: 1px solid rgba(205, 133, 63, .2);
    color: #CD853F;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    margin-top: -.5rem;
}
/* Partner logo — Adlan amber palette */
.partner-logo-adlan {
    color: rgba(205, 133, 63, .75);
}
.partner-logo-adlan:hover {
    background: rgba(205, 133, 63, .08);
    border-color: rgba(205, 133, 63, .2);
    color: #CD853F;
    transform: translateY(-2px);
}
@media(max-width:600px) {
    .adlan-card { padding: 2rem 1.2rem; }
    .adlan-stats { gap: 1.5rem; justify-content: center; }
    .adlan-stat-num { font-size: 1.5rem; }
    .adlan-brands { justify-content: center; }
    .adlan-card-item { flex: 0 0 165px; min-height: 240px; }
    .adlan-img-wrap { height: 140px; }
}

/* Block 10 (was at line 1465) */
#journal-promo {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

.journal-promo-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5,0,0,.88) 0%, rgba(5,0,0,.75) 40%, rgba(5,0,0,.75) 60%, rgba(5,0,0,.9) 100%),
        url('/img/editorial-journal.png') center / cover no-repeat;
    pointer-events: none
}

.journal-promo-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 5%;
    position: relative;
}

.journal-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(255, 68, 68, .08);
    border: 1px solid rgba(255, 68, 68, .2);
    color: #FF4444;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    animation: badgePulse 2s ease-in-out infinite
}

@keyframes badgePulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 68, 68, .1)
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 68, 68, .25)
    }
}

.journal-promo-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 900;
    color: #e8e8e8;
    margin-bottom: .8rem;
    line-height: 1.05;
    letter-spacing: -2px;
    padding-left: 1.5rem;
    border-left: 4px solid #FF4444;
}

.journal-promo-title em {
    font-style: italic;
    color: #FF6B35
}

.journal-promo-sub {
    color: rgba(255, 255, 255, .5);
    font-size: .85rem;
    max-width: 650px;
    line-height: 1.6;
    margin-bottom: 2rem
}

.journal-promo-sub strong {
    color: #C9A96E
}

.jp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    overflow: visible;
}

.jp-cards::-webkit-scrollbar {
    display: none;
}

.jp-cards>a {
    min-width: 0;
    max-width: none;
}

.jp-card {
    background: rgba(10, 8, 7, .97);
    border: 1px solid rgba(255, 255, 255, .06);
    border-top: 3px solid rgba(255, 107, 53, .45);
    border-radius: 12px;
    padding: 2rem 1.8rem;
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: 290px;
}

.jp-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 107, 53, .2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 107, 53, .08)
}

.jp-card-hot {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase
}

.jp-card-hot.red {
    background: rgba(255, 68, 68, .12);
    color: #FF4444;
    border: 1px solid rgba(255, 68, 68, .2)
}

.jp-card-hot.gold {
    background: rgba(201, 169, 110, .12);
    color: #C9A96E;
    border: 1px solid rgba(201, 169, 110, .2)
}

.jp-card-hot.blue {
    background: rgba(100, 181, 246, .12);
    color: #64B5F6;
    border: 1px solid rgba(100, 181, 246, .2)
}

.jp-card-avatar {
    font-size: 2rem;
    margin-bottom: .6rem
}

.jp-card-author {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: .3rem
}

.jp-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #F0E6C8;
    line-height: 1.3;
    margin-bottom: .6rem;
    flex: 1;
}

.jp-card-excerpt {
    font-size: .82rem;
    color: rgba(255, 255, 255, .45);
    line-height: 1.6;
    margin-bottom: .5rem;
}

.jp-card-stats {
    display: flex;
    gap: 1rem;
    margin-top: .8rem;
    font-size: .7rem;
    color: rgba(255, 255, 255, .3)
}

.jp-card-stats span {
    display: flex;
    align-items: center;
    gap: 4px
}

/* ── Journal card letterpress editorial texture ── */
.jp-editorial-bg {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.jp-editorial-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.13;
    mix-blend-mode: screen;
    display: block;
}

/* Elevate all journal card content above editorial bg */
.jp-card > *:not(.jp-editorial-bg) {
    position: relative;
    z-index: 1;
}

.jp-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: center
}

.jp-cta-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    border-radius: 50px;
    background: linear-gradient(135deg, #FF6B35, #FF4444);
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
    text-decoration: none;
    letter-spacing: .5px;
    box-shadow: 0 4px 25px rgba(255, 107, 53, .3);
    transition: all .3s
}

.jp-cta-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 40px rgba(255, 107, 53, .45)
}

.jp-cta-sub {
    color: rgba(255, 255, 255, .35);
    font-size: .7rem;
    letter-spacing: 1px
}

@media(max-width: 900px) {
    .jp-cards {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .jp-cards > a {
        flex-shrink: 0;
        min-width: 300px;
        max-width: 320px;
    }
}

/* Block 11 (was at line 1817) */
/* ══ NIMBUS TERMINAL — Military-Grade Scanner ══ */

.nim-terminal {
    max-width: 1100px;
    max-height: 420px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(2, 4, 2, .97), rgba(4, 8, 4, .95));
    border: 1px solid rgba(0, 255, 65, .12);
    border-radius: 4px;
    padding: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 255, 65, .04), inset 0 1px 0 rgba(0, 255, 65, .08);
}

.nim-terminal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 65, .4), transparent);
}

.nim-terminal::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, .03) 2px, rgba(0, 0, 0, .03) 4px);
}

.nim-terminal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1.2rem;
    border-bottom: 1px solid rgba(0, 255, 65, .1);
    background: rgba(0, 255, 65, .03);
}

.nim-terminal__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(.7rem, 1.5vw, .85rem);
    font-weight: 800;
    color: #00ff41;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.nim-terminal__name {
    white-space: nowrap;
}

.nim-terminal__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #00ff41;
    text-transform: uppercase;
}

.nim-terminal__subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: .5rem;
    letter-spacing: 3px;
    color: rgba(0, 255, 65, .35);
    text-transform: uppercase;
    padding: .4rem 1.2rem .6rem;
}

/* ── V12 Carousel Track ── */
.nim-carousel {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .6rem 1.2rem 1.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    max-height: 340px;
}

.nim-carousel::-webkit-scrollbar {
    display: none
}

/* ── Intel Cards ── */
.nim-card {
    flex: 0 0 280px;
    min-width: 260px;
    max-width: 320px;
    max-height: 320px;
    height: auto;
    box-sizing: border-box;
    background: rgba(4, 8, 4, .9);
    border: 1px solid rgba(0, 255, 65, .08);
    border-radius: 2px;
    padding: .8rem;
    position: relative;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
    font-family: 'JetBrains Mono', monospace;
    will-change: transform;
    contain: layout style;
}

.nim-card:hover {
    border-color: var(--nim-accent, #00ff41);
    box-shadow: 0 0 20px var(--nim-glow, rgba(0, 255, 65, .1)), inset 0 0 20px rgba(0, 0, 0, .3);
    transform: translateY(-2px);
}

.nim-card__scanline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--nim-accent, #00ff41), transparent);
    opacity: .6;
    animation: nimScan 3s ease-in-out infinite;
}

@keyframes nimScan {
    0% {
        transform: translateY(0);
        opacity: .6
    }

    50% {
        transform: translateY(60px);
        opacity: .2
    }

    100% {
        transform: translateY(0);
        opacity: .6
    }
}

.nim-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: .6rem;
}

.nim-card__icon {
    color: var(--nim-accent);
    display: flex;
    opacity: .8;
}

.nim-card__label {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--nim-accent);
    flex: 1;
}

.nim-card__ts {
    font-size: .55rem;
    color: rgba(0, 255, 65, .4);
    font-weight: 600;
}

.nim-card__metrics {
    display: flex;
    gap: .8rem;
    margin-bottom: .6rem;
    flex-wrap: wrap;
}

.nim-metric {
    font-size: .6rem;
    color: rgba(255, 255, 255, .45);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.nim-val {
    font-weight: 800;
    font-size: .75rem;
    color: #e0e0e0;
}

.nim-green {
    color: #00ff41 !important;
}

.nim-red {
    color: #ff3333 !important;
}

.nim-warn {
    color: #ffc107 !important;
}

.nim-card__data {
    border-top: 1px solid rgba(0, 255, 65, .06);
    padding-top: .5rem;
    max-height: 140px;
    overflow: hidden;
}

.nim-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: .75rem;
    color: rgba(255, 255, 255, .6);
}

.nim-mol {
    flex: 1;
    color: rgba(255, 255, 255, .75);
    font-weight: 600;
    font-size: .72rem;
}

.nim-tag {
    padding: 1px 6px;
    border-radius: 1px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .4);
}

.nim-tag--red {
    background: rgba(255, 51, 51, .12);
    color: #ff3333
}

.nim-tag--crit {
    background: rgba(255, 0, 0, .2);
    color: #ff0000;
    animation: nimBlink 1s step-end infinite
}

.nim-tag--warn {
    background: rgba(255, 193, 7, .1);
    color: #ffc107
}

.nim-tag--pos {
    background: rgba(0, 255, 65, .08);
    color: #00ff41
}

.nim-tag--buy {
    background: rgba(0, 255, 65, .12);
    color: #00ff41
}

.nim-tag--hold {
    background: rgba(201, 169, 110, .1);
    color: #c9a96e
}

@keyframes nimBlink {
    50% {
        opacity: .4
    }
}

.nim-impact {
    color: rgba(255, 255, 255, .4);
    font-size: .65rem;
}

.nim-card__footer {
    margin-top: .5rem;
    display: flex;
    justify-content: flex-end;
}

.nim-card__src {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .45rem;
    color: rgba(0, 255, 65, .25);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

@media(max-width:600px) {
    .nim-terminal__header {
        flex-wrap: wrap;
        gap: 6px
    }

    .nim-card {
        flex: 0 0 280px;
        min-width: 260px
    }

    .nim-terminal__title {
        font-size: .65rem
    }
}

/* ══ INTEL PUBLISHER — Market Intelligence Promo Card ══ */
.intel-promo-card {
    max-width: 700px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(4, 15, 20, .96), rgba(8, 25, 35, .92));
    border: 1px solid transparent;
    border-radius: 18px;
    padding: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(6, 182, 212, .08), 0 8px 32px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
    text-decoration: none;
    display: block;
    color: inherit;
}

.intel-promo-card:link,
.intel-promo-card:visited {
    color: inherit;
    text-decoration: none;
}

.intel-promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 70px rgba(6, 182, 212, .18), 0 16px 48px rgba(0, 0, 0, .5);
}

.intel-promo-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 19px;
    background: linear-gradient(135deg, #06b6d4, #22d3ee, #0891b2, #06b6d4);
    background-size: 300% 300%;
    animation: intelBorder 4s ease infinite;
    z-index: -1;
}

.intel-promo-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(4, 15, 20, .98), rgba(8, 25, 35, .95));
    z-index: -1;
}

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

/* ── NIMBUS Intel card holographic editorial bg ── */
.intel-editorial-bg {
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.intel-editorial-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.25;
    mix-blend-mode: screen;
    display: block;
}


.intel-promo-scanline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, .5), transparent);
    animation: intelScanline 3s ease-in-out infinite;
    z-index: 1;
}

@keyframes intelScanline {
    0% { transform: translateY(0); opacity: .8 }
    50% { transform: translateY(40px); opacity: .2 }
    100% { transform: translateY(0); opacity: .8 }
}

.intel-promo-body {
    padding: 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.intel-promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem 1rem;
    background: rgba(6, 182, 212, .08);
    border: 1px solid rgba(6, 182, 212, .2);
    border-radius: 20px;
    font-size: .6rem;
    letter-spacing: 3px;
    color: #06b6d4;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-family: 'JetBrains Mono', 'Inter', monospace;
}

.intel-promo-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #06b6d4;
    margin-left: .5rem;
}

.intel-promo-headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    background: linear-gradient(135deg, #06b6d4, #22d3ee, #e0f2fe);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: .4rem;
    line-height: 1.2;
}

.intel-promo-sub {
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    color: rgba(255, 255, 255, .45);
    margin-bottom: 1.2rem;
    line-height: 1.5;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.intel-promo-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.intel-promo-stat {
    text-align: center;
}

.intel-promo-stat .num {
    font-size: 1.4rem;
    font-weight: 900;
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
    font-family: 'JetBrains Mono', 'Inter', monospace;
}

.intel-promo-stat .lbl {
    font-size: .55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .3);
}

.intel-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.6rem;
    background: linear-gradient(135deg, rgba(6, 182, 212, .15), rgba(34, 211, 238, .1));
    border: 1px solid rgba(6, 182, 212, .3);
    border-radius: 12px;
    color: #06b6d4;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    letter-spacing: .5px;
    transition: all .3s;
}

.intel-promo-card:hover .intel-promo-cta {
    background: linear-gradient(135deg, rgba(6, 182, 212, .25), rgba(34, 211, 238, .15));
    box-shadow: 0 4px 20px rgba(6, 182, 212, .2);
}

/* ══ MOSSAD INTEL BRIEFING — Classified Quote Carousel (Standalone) ══ */
.mossad-terminal {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 10px;
    background: rgba(10, 16, 28, .7);
    border: 1px solid rgba(201, 169, 110, .1);
    overflow: hidden;
}

.mossad-terminal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1.2rem;
    background: rgba(10, 16, 28, .9);
    border-bottom: 1px solid rgba(201, 169, 110, .08);
}

.mossad-terminal__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #94a3b8;
    text-transform: uppercase;
}

.mossad-terminal__badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ef4444;
    text-transform: uppercase;
}

.mossad-terminal__footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: .45rem 1.2rem;
    background: rgba(10, 16, 28, .9);
    border-top: 1px solid rgba(201, 169, 110, .06);
    font-family: 'JetBrains Mono', monospace;
    font-size: .45rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(201, 169, 110, .35);
    text-transform: uppercase;
}

.mossad-carousel {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem 1.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mossad-carousel::-webkit-scrollbar { display: none }

/* ── Quote Cards — larger & readable ── */
.mossad-q {
    flex: 0 0 320px;
    min-width: 290px;
    max-width: 360px;
    background: rgba(12, 18, 30, .95);
    border: 1px solid rgba(148, 163, 184, .08);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s;
}

.mossad-q:hover {
    border-color: rgba(201, 169, 110, .2);
    box-shadow: 0 0 24px rgba(201, 169, 110, .06);
}

.mossad-q__redacted {
    height: 3px;
    background: linear-gradient(90deg, transparent, #94a3b8, transparent);
    opacity: .3;
}

.mossad-q--alert .mossad-q__redacted {
    background: linear-gradient(90deg, transparent, #ef4444, transparent);
    opacity: .5;
}

.mossad-q--green .mossad-q__redacted {
    background: linear-gradient(90deg, transparent, #22c55e, transparent);
    opacity: .4;
}

.mossad-q__body {
    padding: 1rem 1.1rem;
}

.mossad-q__icon {
    color: #475569;
    margin-bottom: .5rem;
    display: block;
}

.mossad-q__text {
    font-family: 'Inter', sans-serif;
    font-size: .84rem;
    color: #cbd5e1;
    line-height: 1.65;
    margin: 0;
    quotes: none;
}

.mossad-q--alert .mossad-q__text {
    color: #fca5a5;
}

.mossad-q--green .mossad-q__text {
    color: #86efac;
}

.mossad-q__src {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: .7rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .52rem;
    letter-spacing: 1.5px;
    color: #475569;
    text-transform: uppercase;
}

/* Block 12 (was at line 1968) */
/* ═══ RAMIEL — FULL BLEED cinematic redesign v18 ═══ */
.ramiel-promo-card {
    width: 100%;
    max-width: none;
    margin: 0;
    background: #050505;
    border: none;
    border-radius: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    cursor: pointer;
    transition: none;
    text-decoration: none;
    display: block;
    min-height: min(90vh, 720px);
}

.ramiel-promo-card:hover {
    transform: none;
    box-shadow: none;
}

/* Kill the animated gold border — video IS the statement */
.ramiel-promo-card::before {
    display: none;
}

.ramiel-promo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(5,3,3,.45) 0%,
            rgba(5,3,3,.25) 30%,
            rgba(5,3,3,.55) 65%,
            rgba(5,3,3,.97) 100%),
        linear-gradient(90deg,
            rgba(5,3,3,.7) 0%,
            transparent 40%,
            transparent 60%,
            rgba(5,3,3,.7) 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: 0;
}

/* Gold hairline at top and bottom */
#ramiel-promo::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,.4), transparent);
    z-index: 10;
}
#ramiel-promo::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,.35), transparent);
    z-index: 10;
}

.ramiel-promo-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    z-index: 0;
    /* Subtle desaturation for Old Money — less sci-fi, more premium */
    filter: saturate(.75) brightness(.9);
}

.ramiel-promo-body {
    position: relative;
    z-index: 2;
    padding: 5rem 4rem 4rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: min(90vh, 720px);
    max-width: 820px;
}

/* ── RAMIEL body editorial image — DISABLED in full-bleed mode ── */
.ramiel-editorial-bg {
    display: none;
}

.ramiel-promo-body > *:not(.ramiel-editorial-bg) {
    position: relative;
    z-index: 1;
}

.ramiel-promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem 1rem;
    background: rgba(201, 169, 110, .08);
    border: 1px solid rgba(201, 169, 110, .2);
    border-radius: 20px;
    font-size: .6rem;
    letter-spacing: 4px;
    color: #C9A96E;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    backdrop-filter: blur(8px);
}

.ramiel-promo-headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    color: #F0E6C8;
    margin-bottom: .6rem;
    line-height: 1.05;
    letter-spacing: -1px;
    text-shadow: 0 2px 40px rgba(0,0,0,.6);
}

.ramiel-promo-sub {
    font-size: .95rem;
    color: rgba(240, 230, 200, .55);
    margin-bottom: 2rem;
    max-width: 520px;
    line-height: 1.65;
}

.ramiel-promo-stats {
    display: flex;
    justify-content: flex-start;
    gap: 0;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.ramiel-promo-stat {
    text-align: left;
    padding: 0 2.5rem 0 0;
    border-right: 1px solid rgba(201,169,110,.15);
    margin-right: 2.5rem;
}

.ramiel-promo-stat:last-child {
    border-right: none;
    margin-right: 0;
}

.ramiel-promo-stat .num {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, #C9A96E, #E8D5B0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    font-family: 'Playfair Display', serif;
}

.ramiel-promo-stat .lbl {
    font-size: .55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
    margin-top: 2px;
    display: block;
}

.ramiel-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 2.2rem;
    background: linear-gradient(135deg, rgba(201, 169, 110, .18), rgba(232, 213, 176, .1));
    border: 1px solid rgba(201, 169, 110, .28);
    border-radius: 50px;
    color: #C9A96E;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all .35s;
    backdrop-filter: blur(8px);
    width: fit-content;
}

.ramiel-promo-card:hover .ramiel-promo-cta {
    background: linear-gradient(135deg, rgba(201, 169, 110, .3), rgba(232, 213, 176, .2));
    box-shadow: 0 4px 30px rgba(201, 169, 110, .25);
    transform: translateX(4px);
}

/* Responsive */
@media(max-width: 768px) {
    .ramiel-promo-body {
        padding: 3rem 1.5rem 2.5rem;
        min-height: min(70vh, 540px);
    }
    .ramiel-promo-card {
        min-height: min(70vh, 540px);
    }
    .ramiel-promo-stat {
        padding: 0 1.5rem 0 0;
        margin-right: 1.5rem;
    }
}






/* Block 13 (was at line 2157) */
.pc-promo-card {
    max-width: 700px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(15, 8, 20, .97), rgba(30, 16, 40, .95));
    border: 1px solid transparent;
    border-radius: 18px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(232, 121, 249, .12), 0 8px 32px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
    text-decoration: none;
    display: block
}

.pc-promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 80px rgba(232, 121, 249, .18), 0 16px 48px rgba(0, 0, 0, .5)
}

.pc-promo-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 19px;
    background: linear-gradient(135deg, #E879F9, #C084FC, #A855F7, #E879F9);
    background-size: 300% 300%;
    animation: pcPromoBorder 4s ease infinite;
    z-index: -1
}

.pc-promo-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(12, 6, 18, .96), rgba(25, 12, 35, .94));
    z-index: -1
}

/* ── Editorial image overlay (DOM-based, screen-blend) ── */
.pc-editorial-bg {
    position: absolute;
    inset: 2px;
    border-radius: 16px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.pc-editorial-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.40;
    mix-blend-mode: screen;
    display: block;
}

/* Elevate all text children above editorial bg */
.pc-promo-card > *:not(.pc-editorial-bg) {
    position: relative;
    z-index: 1;
}

@keyframes pcPromoBorder {

    0%,
    100% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

.pc-promo-eyebrow {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: .6rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #E879F9;
    border: 1px solid rgba(232, 121, 249, .2);
    background: rgba(232, 121, 249, .06);
    margin-bottom: .8rem
}

.pc-promo-headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    background: linear-gradient(135deg, #E879F9, #F0ABFC, #C9A96E);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 .4rem
}

.pc-promo-sub {
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    color: rgba(255, 255, 255, .5);
    margin: 0 0 1.2rem;
    line-height: 1.5
}

.pc-promo-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem
}

.pc-promo-stat .num {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #F0ABFC
}

.pc-promo-stat .lbl {
    font-size: .6rem;
    color: rgba(255, 255, 255, .35);
    letter-spacing: 1.5px;
    text-transform: uppercase
}

.pc-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 50px;
    background: linear-gradient(135deg, #E879F9, #A855F7);
    color: #0a0a0a;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .5px;
    transition: all .3s
}

.pc-promo-card:hover .pc-promo-cta {
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(232, 121, 249, .3)
}

/* Block 14 (was at line 2320) */
.deal-finder-card {
    max-width: 700px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(8, 15, 12, .97), rgba(12, 25, 18, .95));
    border: 1px solid transparent;
    border-radius: 18px;
    padding: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(201, 169, 110, .12), 0 8px 32px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
    text-decoration: none;
    display: block;
}

.deal-finder-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 80px rgba(201, 169, 110, .18), 0 16px 48px rgba(0, 0, 0, .5);
}

.deal-finder-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 19px;
    background: linear-gradient(135deg, #C9A96E, #a8884e, #1abc9c, #C9A96E);
    background-size: 300% 300%;
    animation: dealBorder 4s ease infinite;
    z-index: -1;
}

.deal-finder-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(5, 12, 8, .96), rgba(10, 20, 15, .94));
    z-index: -1;
}

/* ── Deal Finder editorial image overlay ── */
.df-editorial-bg {
    position: absolute;
    inset: 2px;
    border-radius: 16px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.df-editorial-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.40;
    mix-blend-mode: screen;
    display: block;
}

/* Elevate deal-finder body above editorial bg */
.deal-finder-body {
    position: relative;
    z-index: 1;
}

@keyframes dealBorder {

    0%,
    100% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

@keyframes dealPulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .6
    }
}

@keyframes dealCount {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.deal-finder-body {
    padding: 2rem;
    text-align: center;
}

.deal-finder-live {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 1rem;
    background: rgba(201, 169, 110, .1);
    border: 1px solid rgba(201, 169, 110, .25);
    border-radius: 20px;
    font-size: .55rem;
    letter-spacing: 3px;
    color: #C9A96E;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 700;
}

.deal-finder-live .live-dot {
    width: 6px;
    height: 6px;
    background: #C9A96E;
    border-radius: 50%;
    animation: dealPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(201, 169, 110, .6);
}

.deal-finder-headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    background: linear-gradient(135deg, #C9A96E, #a8e6cf, #C9A96E);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 .5rem;
}

.deal-finder-sub {
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    color: rgba(255, 255, 255, .55);
    margin: 0 0 1.2rem;
    line-height: 1.5;
}

.deal-finder-social {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.deal-finder-social .df-stat {
    text-align: center;
    animation: dealCount .6s ease both;
}

.deal-finder-social .df-stat:nth-child(2) {
    animation-delay: .15s
}

.deal-finder-social .df-stat:nth-child(3) {
    animation-delay: .3s
}

.deal-finder-social .df-num {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #C9A96E;
}

.deal-finder-social .df-lbl {
    font-size: .55rem;
    color: rgba(255, 255, 255, .35);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.deal-finder-vendors {
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.deal-finder-vendors .dfv {
    padding: 4px 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    font-size: .6rem;
    color: rgba(255, 255, 255, .5);
    letter-spacing: .5px;
}

.deal-finder-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    background: linear-gradient(135deg, #C9A96E, #a8884e);
    color: #0a0a0a;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .5px;
    transition: all .3s;
    box-shadow: 0 4px 15px rgba(201, 169, 110, .25);
}

.deal-finder-card:hover .deal-finder-cta {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(201, 169, 110, .35);
}

.deal-finder-urgency {
    margin-top: .8rem;
    font-size: .6rem;
    color: rgba(255, 255, 255, .3);
    letter-spacing: .5px;
}

.deal-finder-urgency strong {
    color: #e74c3c;
}

/* ══ DUO GRID — Side-by-side promo cards (desktop) ══ */
.promo-duo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch; /* ← equal height */
}

.promo-duo-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.promo-duo-grid .pc-promo-card,
.promo-duo-grid .deal-finder-card {
    max-width: none;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.promo-duo-grid .pc-promo-card {
    padding: 1.5rem;
}

/* Internal flex layout for content distribution */
.promo-duo-grid .deal-finder-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}

.promo-duo-grid .deal-finder-headline,
.promo-duo-grid .pc-promo-headline {
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
}

.promo-duo-grid .deal-finder-sub,
.promo-duo-grid .pc-promo-sub {
    font-size: .8rem;
}

/* Push CTA to bottom in both cards */
.promo-duo-grid .pc-promo-cta,
.promo-duo-grid .deal-finder-cta {
    margin-top: auto;
}

@media (max-width: 768px) {
    .promo-duo-grid {
        grid-template-columns: 1fr;
    }
}

/* Block 15 — PILLAR CARDS: EDITORIAL FULL-BLEED (LV / ECI style) */

/* ── Section header: stays centered ── */
.pillars-container {
    max-width: 100%;
    padding: 0;
    text-align: center;
}

.pillars-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1.2rem;
    background: rgba(201, 169, 110, .08);
    border: 1px solid rgba(201, 169, 110, .25);
    border-radius: 20px;
    font-size: .6rem;
    letter-spacing: 4px;
    color: #C9A96E;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(201, 169, 110, .1);
}

.pillars-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    color: #E8D5B0;
    margin-bottom: .5rem;
    text-shadow: 0 0 30px rgba(201, 169, 110, .3);
    padding: 0 1.5rem;
}

.pillars-sub {
    color: rgba(255, 255, 255, .5);
    font-size: .88rem;
    margin-bottom: 2.5rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    padding: 0 1.5rem;
}

/* ── Full-width editorial grid ── */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    max-width: 100%;
    margin: 0;
}

/* ──── Editorial Pillar Card ──── */
.pillar-card {
    height: 500px;
    background: #080604;
    border: none;
    border-radius: 0;
    text-align: left;
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* No animation, no box-shadow — pure image */
}

/* Remove previous pseudo-element decorations */
.pillar-card::before,
.pillar-card::after {
    display: none;
}

/* ── Image: fills entire card ── */
.pillar-img-wrap {
    position: absolute;
    inset: 0;
    height: 100%;
    overflow: hidden;
}

.pillar-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform .9s cubic-bezier(.23, 1, .32, 1),
                filter .6s ease;
    filter: brightness(.88) saturate(.95);
    will-change: transform;
}

.pillar-card:hover .pillar-img-wrap img {
    transform: scale(1.07);
    filter: brightness(1.0) saturate(1.1);
}

/* ── Bottom-up gradient for text legibility ── */
.pillar-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, .88) 0%,
        rgba(0, 0, 0, .50) 35%,
        rgba(0, 0, 0, .10) 65%,
        transparent 100%);
    pointer-events: none;
    transition: opacity .5s ease;
}

.pillar-card:hover .pillar-img-wrap::after {
    opacity: .75;
}

/* ── Text: overlaid bottom of image ── */
.pillar-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.6rem 2rem 2rem;
    z-index: 2;
    text-align: left;
}

/* ── Hide icon in editorial layout ── */
.pillar-icon {
    display: none;
}

.pillar-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(.95rem, 1.5vw, 1.2rem);
    color: #fff;
    margin-bottom: .3rem;
    letter-spacing: .3px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .9);
    line-height: 1.3;
}

.pillar-subtitle {
    font-size: .75rem;
    color: rgba(255, 255, 255, .68);
    line-height: 1.5;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

/* ── Gold line reveal on hover (LV micro-detail) ── */
.pillar-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(201, 169, 110, .7),
        transparent);
    opacity: 0;
    transition: opacity .4s ease;
}

.pillar-card:hover .pillar-body::before {
    opacity: 1;
}

/* ── Explore arrow: appears on hover ── */
.pillar-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .7rem;
    font-size: .6rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #C9A96E;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease;
}

.pillar-card:hover .pillar-arrow {
    opacity: 1;
    transform: translateY(0);
}

/* ── Archive Noir giant card: also full-width ── */
#archive-noir-card {
    margin: 3px 0 0 0;
    max-width: 100%;
}

/* ── Responsive ── */
@media(max-width: 768px) {
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }
    .pillar-card { height: 280px; }
}

@media(max-width: 480px) {
    .pillars-grid { grid-template-columns: 1fr; }
    .pillar-card { height: 260px; }
    .pillar-body { padding: 1.2rem 1.4rem 1.6rem; }
}


.noir-card {
    background: linear-gradient(160deg,
        rgba(10,8,8,.98) 0%,
        rgba(5,3,3,.99) 40%,
        rgba(3,2,2,1) 100%);
    border: 2px solid rgba(200,200,200,.3);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 100px rgba(200,200,200,.07),
        0 0 50px  rgba(200,200,200,.05),
        0 20px 80px rgba(0,0,0,.8),
        inset 0 1px 0 rgba(200,200,200,.12),
        0 0 0 1px rgba(200,200,200,.1);
    animation: noirBorderPulse 4s ease-in-out infinite;
}

@keyframes noirBorderPulse {
    0%,100% {
        border-color: rgba(200,200,200,.25);
        box-shadow: 0 0 80px rgba(200,200,200,.06), 0 0 40px rgba(200,200,200,.04), 0 20px 80px rgba(0,0,0,.8);
    }
    50% {
        border-color: rgba(220,220,220,.5);
        box-shadow: 0 0 130px rgba(200,200,200,.13), 0 0 65px rgba(200,200,200,.09), 0 20px 80px rgba(0,0,0,.8);
    }
}

/* Hero image at top of noir card */
.noir-hero-img {
    width: 100%;
    height: 280px;
    overflow: hidden;
    position: relative;
}
.noir-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.65) contrast(1.15) saturate(.5);
    transition: transform 10s ease, filter 5s ease;
}
.noir-card:hover .noir-hero-img img {
    transform: scale(1.05);
    filter: brightness(.75) contrast(1.2) saturate(.6);
}
/* Dedicated Noir Rotator (Preserves Native Filtering/Sizing) */
.noir-rotator {
    position: absolute;
    inset: 0;
}
.noir-rotator img.noir-rot-img {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    animation: fsRotatorFade 24s ease-in-out infinite;
}
.noir-rotator img.rot1 { animation-delay: 0s; }
.noir-rotator img.rot2 { animation-delay: 8s; }
.noir-rotator img.rot3 { animation-delay: 16s; }

.noir-hero-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,.15) 0%,
        rgba(5,3,3,.85) 75%,
        rgba(5,3,3,1) 100%);
    pointer-events: none;
}

/* Custom styling for Video Variant: background for whole card */
.noir-hero-video-container {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    z-index: 0;
}
.noir-hero-video-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(5,3,3,.15) 0%,
        rgba(5,3,3,.55) 50%,
        rgba(5,3,3,.95) 100%);
}
.noir-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.95) contrast(1.05) saturate(.6);
    transition: transform 10s ease, filter 5s ease;
}
.noir-card:hover .noir-hero-video {
    transform: scale(1.03);
    filter: brightness(1.1) contrast(1.1) saturate(.7);
}

/* Restricted badge overlay */
.noir-restricted-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(120,20,20,.9);
    border: 1px solid rgba(200,50,50,.35);
    color: #ff8a8a;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: .28rem .75rem;
    border-radius: 4px;
    z-index: 5;
}

/* Noir content area */
.noir-content {
    padding: 8rem 3rem 4rem;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Sound Toggle Button */
.noir-sound-toggle {
    position: absolute;
    bottom: 28px;
    left: 28px;
    background: rgba(10,5,5,0.7);
    border: 1px solid rgba(200,200,200,0.15);
    color: #E8E8E8;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}
.noir-sound-toggle:hover {
    background: rgba(200,200,200,0.1);
    transform: scale(1.1);
}

.noir-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    border-radius: 50px;
    background: rgba(200,200,200,.06);
    border: 1px solid rgba(200,200,200,.28);
    color: #C8C8C8;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 1.8rem;
    box-shadow: 0 0 20px rgba(200,200,200,.08), inset 0 0 12px rgba(200,200,200,.03);
}

.noir-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    color: #FAF8F2;
    margin-bottom: 1rem;
    letter-spacing: -1px;
    line-height: 1.05;
    text-shadow: 0 12px 30px rgba(0,0,0,0.9), 0 0 40px rgba(201,169,110,0.15);
}
@keyframes noirTitleGlow {
    from { text-shadow: 0 12px 30px rgba(0,0,0,0.9), 0 0 30px rgba(201,169,110,0.1); }
    to   { text-shadow: 0 12px 30px rgba(0,0,0,0.9), 0 0 50px rgba(201,169,110,0.25); }
}
.noir-title em {
    background: linear-gradient(135deg, #c9a96e 30%, #e8d5b0 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
    filter: drop-shadow(0 4px 20px rgba(201,169,110,0.25));
}

.noir-sub {
    color: rgba(255,255,255,.42);
    font-size: .95rem;
    max-width: 620px;
    margin: 0 auto 2.5rem;
    line-height: 1.75;
}

/* Stats */
.noir-stats {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
.noir-stats > div {
    padding: 1rem 2.5rem;
    border-right: 1px solid rgba(200,200,200,.1);
}
.noir-stats > div:last-child { border-right: none; }
.noir-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #c9a96e 30%, #e8d5b0 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1;
    filter: drop-shadow(0 4px 15px rgba(201,169,110,0.15));
    letter-spacing: -1px;
}
.noir-stat-lbl {
    font-size: .58rem;
    color: rgba(200,200,200,.42);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 6px;
    display: block;
}

/* Era tags */
.noir-era-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 2rem;
}
.noir-era-tag {
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(200,200,200,.04);
    border: 1px solid rgba(200,200,200,.1);
    color: rgba(200,200,200,.6);
    font-size: .62rem;
    letter-spacing: .5px;
    transition: all .2s;
    cursor: default;
}
.noir-era-tag:hover {
    background: rgba(200,200,200,.09);
    border-color: rgba(200,200,200,.25);
    color: #D0D0D0;
}

/* CTA */
.noir-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 52px;
    border-radius: 50px;
    background: linear-gradient(135deg, #D0D0D0 0%, #959595 50%, #D0D0D0 100%);
    background-size: 200% auto;
    color: #050505;
    font-weight: 900;
    font-size: .95rem;
    text-decoration: none;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow:
        0 8px 40px rgba(200,200,200,.25),
        0 0 80px rgba(200,200,200,.08),
        inset 0 1px 0 rgba(255,255,255,.35);
    transition: all .4s cubic-bezier(.23, 1, .32, 1);
    animation: noirCtaPulse 3.5s ease-in-out infinite;
}
@keyframes noirCtaPulse {
    0%, 100% { box-shadow: 0 8px 40px rgba(200,200,200,.25), 0 0 80px rgba(200,200,200,.08); }
    50%       { box-shadow: 0 8px 55px rgba(200,200,200,.45), 0 0 100px rgba(200,200,200,.18); }
}
.noir-cta-btn:hover {
    transform: translateY(-4px) scale(1.03);
    background-position: right center;
    box-shadow: 0 16px 60px rgba(200,200,200,.45), 0 0 120px rgba(200,200,200,.22);
}

.noir-footnote {
    margin-top: 1.5rem;
    font-size: .6rem;
    color: rgba(200,200,200,.18);
    letter-spacing: .5px;
}

@media(max-width:768px) {
    .noir-content { padding: 2rem 1.5rem; }
    .noir-stats > div {
        padding: .8rem 1.5rem;
        border-right: none;
        border-bottom: 1px solid rgba(200,200,200,.1);
    }
    .noir-stats > div:last-child { border-bottom: none; }
    .noir-hero-img { height: 200px; }
}
@media(max-width:600px) {
    .noir-stat-num { font-size: 2rem; }
    .noir-cta-btn { padding: 14px 30px; font-size: .85rem; }
}

/* Block 16 (was at line 2890) */
.sci-enc-container {
    max-width: 100%;
    padding: 0 5vw;
    margin: 0;
    text-align: center;
    overflow: visible  /* prevent clip of gradient text */
}

.sci-enc-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1.4rem;
    background: linear-gradient(135deg, rgba(201, 169, 110, .08), rgba(184, 150, 12, .06));
    border: 1px solid rgba(201, 169, 110, .22);
    border-radius: 24px;
    font-size: .6rem;
    letter-spacing: 4px;
    color: #C9A96E;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    font-weight: 600
}

.sci-enc-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    letter-spacing: -2px;
    line-height: 1.08;
    /* padding inflates the gradient-clip box → prevents top/bottom crop */
    padding: .06em 0 .12em;
    background: linear-gradient(135deg, #F0E6C8 0%, #C9A96E 55%, #B8960C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    overflow: visible;
}

.sci-enc-sub {
    color: rgba(255, 255, 255, .45);
    font-size: .88rem;
    margin-bottom: 3rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7
}

.sci-enc-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr 1fr 1fr;
    min-height: 660px;
    gap: 1.5rem;
    text-align: left;
    align-items: stretch
}

@media(max-width:960px) {
    .sci-enc-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: auto
    }
}

.sci-portal {
    background: rgba(10, 10, 10, .85);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: all .5s cubic-bezier(.16, 1, .3, 1)
}

.sci-portal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 24px 24px 0 0
}

.sci-portal.mol::before {
    background: linear-gradient(90deg, #C9A96E, rgba(201, 169, 110, .15))
}

.sci-portal.rec::before {
    background: linear-gradient(90deg, #8B2252, rgba(139, 34, 82, .2))
}

.sci-portal.ifr::before {
    background: linear-gradient(90deg, #B8730A, rgba(184, 115, 10, .2))
}

.sci-portal.raw::before {
    background: linear-gradient(90deg, #4A7C59, rgba(74, 124, 89, .2))
}

.sci-portal:hover {
    border-color: rgba(255, 255, 255, .12);
    transform: translateY(-4px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5)
}

.sci-portal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.2rem
}

.sci-portal-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem
}

.sci-portal.mol .sci-portal-icon {
    background: rgba(201, 169, 110, .1);
    border: 1px solid rgba(201, 169, 110, .18)
}

.sci-portal.rec .sci-portal-icon {
    background: rgba(139, 34, 82, .1);
    border: 1px solid rgba(139, 34, 82, .18)
}

.sci-portal.ifr .sci-portal-icon {
    background: rgba(184, 115, 10, .1);
    border: 1px solid rgba(184, 115, 10, .18)
}

.sci-portal.raw .sci-portal-icon {
    background: rgba(74, 124, 89, .1);
    border: 1px solid rgba(74, 124, 89, .18)
}

.sci-portal-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #E8D5B0;
    margin-bottom: .2rem
}

.sci-portal-info .sci-count {
    font-size: .65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600
}

.sci-portal.mol .sci-count {
    color: #C9A96E
}

.sci-portal.rec .sci-count {
    color: #A87090
}

.sci-portal.ifr .sci-count {
    color: #C9A96E
}

.sci-portal.raw .sci-count {
    color: #6BAE88
}

.sci-portal-desc {
    font-size: .82rem;
    color: rgba(255, 255, 255, .4);
    line-height: 1.6;
    margin-bottom: 1.2rem
}

.sci-search-wrap {
    position: relative;
    margin-bottom: 1rem
}

.sci-search-input {
    width: 100%;
    padding: .75rem 1rem .75rem 2.8rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    color: #fff;
    font-size: .85rem;
    outline: none;
    transition: all .3s;
    font-family: 'Inter', sans-serif
}

.sci-search-input:focus {
    border-color: rgba(0, 212, 255, .3);
    background: rgba(255, 255, 255, .06)
}

.sci-search-input::placeholder {
    color: rgba(255, 255, 255, .25)
}

.sci-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, .3);
    pointer-events: none
}

.sci-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem
}

.sci-chip {
    font-size: .62rem;
    padding: 4px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
    white-space: nowrap
}

.sci-chip:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .15)
}

.sci-results {
    max-height: 320px;
    overflow-y: auto;
    border-radius: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .1) transparent
}

.sci-results::-webkit-scrollbar {
    width: 4px
}

.sci-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .1);
    border-radius: 4px
}

.sci-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: .7rem .9rem;
    border-radius: 12px;
    transition: all .25s;
    text-decoration: none;
    color: #fff;
    border: 1px solid transparent;
    margin-bottom: 4px
}

.sci-result-item:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .08)
}

.sci-result-name {
    font-size: .85rem;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sci-result-meta {
    font-size: .65rem;
    color: rgba(255, 255, 255, .35);
    flex-shrink: 0
}

.sci-result-arrow {
    color: rgba(255, 255, 255, .15);
    font-size: .9rem;
    transition: color .2s
}

.sci-result-item:hover .sci-result-arrow {
    color: #C9A96E
}

.sci-load-more {
    display: block;
    width: 100%;
    padding: .6rem;
    margin-top: .5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .45);
    font-size: .75rem;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    font-family: 'Inter', sans-serif
}

.sci-load-more:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff
}

.sci-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(255, 255, 255, .3);
    font-size: .82rem
}

.sci-loading {
    text-align: center;
    padding: 1.5rem;
    color: rgba(255, 255, 255, .25);
    font-size: .78rem
}

.sci-portal-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .8rem;
    font-size: .72rem;
    color: rgba(255, 255, 255, .4);
    text-decoration: none;
    transition: all .3s;
    letter-spacing: 1px;
    text-transform: uppercase
}

.sci-portal-link:hover {
    color: #E8D5B0;
    transform: translateX(4px)
}

/* Block 17 (was at line 3420) */
@keyframes espin {
    to {
        transform: rotate(360deg)
    }
}

#encyclopedia {
    padding: 2rem 2rem 0;
    position: relative;
    z-index: 1
}

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

.search-container {
    max-width: 700px;
    margin: 0 auto 2rem;
    position: relative
}

.search-input {
    width: 100%;
    padding: 18px 60px 18px 24px;
    background: rgba(15, 15, 15, .9);
    border: 1.5px solid var(--border);
    border-radius: 60px;
    color: var(--text);
    font-size: 1rem;
    font-family: "Inter", sans-serif;
    outline: 0;
    transition: all .4s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.search-input::placeholder {
    color: rgba(255, 255, 255, .3)
}

.search-input:focus {
    border-color: var(--gold-dark);
    box-shadow: 0 0 40px rgba(191, 161, 74, .15)
}

.live-stats,
.search-btn {
    display: flex;
    justify-content: center
}

.search-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    border: 0;
    cursor: pointer;
    align-items: center;
    transition: all .3s
}

.search-btn:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 4px 20px rgba(191, 161, 74, .4)
}

.search-btn svg {
    width: 20px;
    height: 20px;
    stroke: #0a0a0a;
    fill: none;
    stroke-width: 2.5
}

.live-stats {
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap
}

.live-stat {
    text-align: center
}

.enc-sec-header h3,
.live-stat-num {
    font-family: "Playfair Display", serif
}

.live-stat-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(252, 246, 186, .2)
}

.live-stat-label {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted)
}

.enc-sec-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem
}

.enc-sec-header h3 {
    font-size: 1.2rem;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.enc-sec-header svg {
    width: 18px;
    height: 18px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 1.5
}

.enc-sec-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent)
}

.enc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2rem
}

.enc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 30px;
    border: 1px solid var(--border);
    background: rgba(252, 246, 186, .03);
    font-size: .78rem;
    color: var(--gold);
    cursor: pointer;
    transition: all .3s;
    white-space: nowrap
}

.enc-chip:hover {
    background: rgba(252, 246, 186, .1);
    border-color: var(--gold-dark);
    transform: translateY(-2px)
}

.enc-chip.active {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #0a0a0a;
    border-color: var(--gold);
    font-weight: 600
}

.enc-chip .cc {
    font-size: .6rem;
    opacity: .7
}

.perfume-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem
}

.perfume-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0;
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column
}

.perfume-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top left, rgba(252, 246, 186, .04)0, transparent 60%);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
    z-index: 1
}

.perfume-card:hover {
    border-color: rgba(212, 175, 55, .35);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4), 0 0 30px rgba(191, 161, 74, .08)
}

.perfume-card:hover::before {
    opacity: 1
}

/* ═══ IMAGE AREA — Top of card ═══ */
.pc-image-area {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #0c0c0c;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    flex-shrink: 0
}

.pc-image-area::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.4) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2
}

.pc-image-area img.pc-img {
    max-height: 70%;
    max-width: 70%;
    object-fit: contain;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, .5));
    transition: transform .5s cubic-bezier(.23, 1, .32, 1);
    position: relative;
    z-index: 1
}

.perfume-card:hover .pc-image-area img.pc-img {
    transform: scale(1.08)
}

/* ═══ RATING BADGE — Top-left of image area ═══ */
.pc-rating {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    font-size: .68rem;
    font-weight: 600;
    color: var(--gold);
    background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 175, 55, .2);
    border-radius: 8px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 3px
}

/* ═══ CARD BODY — Below the image ═══ */
.pc-body {
    padding: .8rem .9rem .9rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    position: relative;
    z-index: 2;
    background: var(--bg-card, rgba(12, 12, 12, .98))
}

/* Hide old structure — no longer used */
.pc-top {
    display: none
}

.pc-dot {
    display: none
}

.pc-info {
    flex: 1;
    min-width: 0
}

.pc-name,
.results-count strong {
    font-family: "Playfair Display", serif
}

.pc-name {
    font-size: .88rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    margin-bottom: 2px
}

.pc-brand {
    font-size: .62rem;
    color: var(--text-muted);
    margin-bottom: 2px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 500
}

.pc-family-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid rgba(252, 246, 186, .12);
    background: rgba(252, 246, 186, .05);
    font-size: .6rem;
    color: var(--gold);
    margin-top: 4px;
    letter-spacing: .8px;
    text-transform: uppercase;
    align-self: flex-start
}

.pc-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.pc-note {
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    font-size: .62rem;
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, .06)
}

.pc-gender {
    font-size: .65rem;
    color: var(--text-muted);
    margin-top: 8px
}

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: .5rem
}

.results-count {
    font-size: .85rem;
    color: var(--text-muted)
}

.results-count strong {
    color: var(--gold);
    font-size: 1.1rem
}

.clear-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 80, 80, .3);
    background: rgba(255, 80, 80, .08);
    color: #ff6b6b;
    font-size: .75rem;
    cursor: pointer;
    transition: all .3s
}

.clear-btn:hover {
    background: rgba(255, 80, 80, .15)
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 2rem 0;
    flex-wrap: wrap
}

.page-btn {
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: 0 0;
    color: var(--text-muted);
    font-size: .8rem;
    cursor: pointer;
    transition: all .3s;
    font-family: "Inter", sans-serif
}

.page-btn:hover {
    border-color: var(--gold-dark);
    color: var(--gold)
}

.page-btn.active {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #0a0a0a;
    border-color: var(--gold);
    font-weight: 600
}

.page-btn:disabled {
    opacity: .3;
    cursor: not-allowed
}

.page-info {
    color: var(--text-muted);
    font-size: .75rem;
    margin: 0 8px
}

.random-section {
    margin-top: 2rem;
    padding: 1.8rem 1.5rem 1.2rem;
    background: linear-gradient(145deg, rgba(201, 169, 110, .06), rgba(15, 12, 8, .85), rgba(201, 169, 110, .03));
    border: 1px solid rgba(201, 169, 110, .15);
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(201, 169, 110, .08);
}

.random-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    right: -100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .5), transparent);
    animation: shimmerLine 4s ease-in-out infinite;
}

.random-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    right: -100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .3), transparent);
    animation: shimmerLine 4s ease-in-out infinite reverse;
}

@keyframes shimmerLine {
    0% {
        transform: translateX(-33%);
    }

    100% {
        transform: translateX(33%);
    }
}

.random-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
}

.random-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    margin: 0;
    text-shadow: 0 0 30px rgba(201, 169, 110, .15);
}

.random-header p {
    color: rgba(255, 255, 255, .45);
    font-size: .72rem;
    margin: 0;
    letter-spacing: .5px;
    font-style: italic;
}

.random-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(201, 169, 110, .18), rgba(201, 169, 110, .06));
    color: var(--gold);
    font-size: .72rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    border: 1px solid rgba(201, 169, 110, .25);
    cursor: pointer;
    transition: all .4s cubic-bezier(.23, 1, .32, 1);
    margin: 0;
    letter-spacing: .8px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.random-btn::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(201, 169, 110, .3), transparent, rgba(201, 169, 110, .2));
    z-index: -1;
    opacity: 0;
    transition: opacity .4s;
}

.random-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 1.5;
    transition: transform .5s cubic-bezier(.23, 1, .32, 1);
}

.random-btn:hover {
    transform: translateY(-3px) scale(1.02);
    background: linear-gradient(135deg, rgba(201, 169, 110, .28), rgba(201, 169, 110, .12));
    box-shadow: 0 8px 28px rgba(201, 169, 110, .2), 0 0 12px rgba(201, 169, 110, .08);
    border-color: rgba(201, 169, 110, .4);
}

.random-btn:hover::before {
    opacity: 1;
}

.random-btn:hover svg {
    transform: rotate(360deg);
}

.random-btn:active {
    transform: translateY(-1px) scale(.98);
}

.random-grid {
    display: flex;
    gap: .8rem;
    margin-top: 1rem;
    overflow-x: auto;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.random-grid::-webkit-scrollbar {
    display: none;
}

.random-grid>.perfume-card {
    flex: 0 0 240px;
    min-width: 240px;
}

.enc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 3rem;
    color: var(--text-muted)
}

.enc-spinner {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: espin .8s linear infinite
}

.no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted)
}

.no-results h3 {
    font-family: "Playfair Display", serif;
    color: var(--gold);
    margin-bottom: .5rem;
    font-size: 1.2rem
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s
}

.modal-overlay.show {
    opacity: 1;
    pointer-events: all
}

.modal-card {
    background: #0a0a0a;
    border: 1.5px solid var(--border-hover);
    border-radius: 28px;
    padding: 2.5rem;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 60px rgba(191, 161, 74, .1);
    transform: scale(.95);
    transition: transform .3s
}

.modal-overlay.show .modal-card {
    transform: scale(1)
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .05);
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s
}

.modal-close:hover {
    background: rgba(255, 80, 80, .15);
    color: #ff6b6b
}

.modal-name {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--gold-light);
    margin-bottom: 4px;
    padding-right: 40px
}

.modal-brand {
    font-size: .9rem;
    color: var(--gold-dark);
    letter-spacing: 1px;
    margin-bottom: 1.5rem
}

.modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.5rem
}

.modal-badge {
    padding: 6px 14px;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: rgba(252, 246, 186, .04);
    font-size: .75rem;
    color: var(--gold)
}

.pyramid-section {
    margin-bottom: 1rem
}

.pyramid-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px
}

.pyramid-label svg {
    width: 14px;
    height: 14px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 1.5
}

.pyramid-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.pyramid-note {
    padding: 6px 14px;
    border-radius: 12px;
    background: rgba(252, 246, 186, .06);
    border: 1px solid rgba(252, 246, 186, .1);
    font-size: .8rem;
    color: var(--text)
}

.modal-actions,
.modal-comas {
    display: flex;
    margin-top: 1.5rem
}

.modal-comas {
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(255, 153, 0, .12), rgba(255, 153, 0, .06));
    border: 1px solid rgba(255, 153, 0, .25);
    color: #f90;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s
}

.modal-comas:hover {
    background: linear-gradient(135deg, rgba(255, 153, 0, .2), rgba(255, 153, 0, .1));
    transform: translateY(-2px)
}

.modal-actions {
    gap: 10px
}

.modal-actions .modal-comas {
    flex: 1;
    margin-top: 0
}

.modal-comparator {
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 1;
    width: 100%;
    gap: 8px;
    padding: 14px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(108, 92, 231, .15), rgba(108, 92, 231, .06));
    border: 1px solid rgba(108, 92, 231, .3);
    color: #a29bfe;
    font-size: .9rem;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    cursor: pointer;
    transition: all .3s;
    outline: 0;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: .3px
}

.modal-comparator:hover {
    background: linear-gradient(135deg, rgba(108, 92, 231, .25), rgba(108, 92, 231, .12));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(108, 92, 231, .2)
}

.comp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s
}

.comp-overlay.show {
    opacity: 1;
    pointer-events: all
}

.comp-card {
    background: linear-gradient(180deg, #0c0c0c 0, #080808 100%);
    border: 1.5px solid rgba(191, 161, 74, .3);
    border-radius: 28px;
    padding: 2rem;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 80px rgba(191, 161, 74, .08);
    transform: scale(.92) translateY(20px);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1)
}

.comp-overlay.show .comp-card {
    transform: scale(1) translateY(0)
}

.comp-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .05);
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    z-index: 2
}

.comp-close:hover {
    background: rgba(255, 80, 80, .15);
    color: #ff6b6b
}

.comp-header {
    text-align: center;
    margin-bottom: 1.5rem
}

.comp-title {
    font-family: "Playfair Display", serif;
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.comp-subtitle {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: 4px
}

.comp-perfume-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: rgba(252, 246, 186, .03);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 1.5rem
}

.comp-perfume-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(191, 161, 74, .2), rgba(191, 161, 74, .05));
    border: 1px solid rgba(252, 246, 186, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0
}

.comp-perfume-name {
    font-family: "Playfair Display", serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gold-light)
}

.comp-perfume-brand {
    font-size: .75rem;
    color: var(--gold-dark);
    margin-top: 2px
}

.comp-vendors {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.vendor-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .02);
    transition: all .3s;
    position: relative;
    overflow: hidden
}

.vendor-row:hover {
    border-color: rgba(252, 246, 186, .2);
    transform: translateX(4px)
}

.vendor-row.gold {
    border-color: rgba(212, 175, 55, .6);
    background: linear-gradient(135deg, rgba(212, 175, 55, .08) 0%, rgba(15, 12, 8, .95) 40%, rgba(212, 175, 55, .05) 100%);
    box-shadow: 0 0 18px rgba(212, 175, 55, .15), inset 0 0 30px rgba(212, 175, 55, .03);
    animation: goldPulse 3s ease-in-out infinite
}

@keyframes goldPulse {

    0%,
    100% {
        box-shadow: 0 0 18px rgba(212, 175, 55, .15), inset 0 0 30px rgba(212, 175, 55, .03)
    }

    50% {
        box-shadow: 0 0 28px rgba(212, 175, 55, .25), inset 0 0 40px rgba(212, 175, 55, .06)
    }
}

.vendor-row.gold::before,
.vendor-row.silver::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none
}

.vendor-row.gold::before {
    background: linear-gradient(90deg, rgba(255, 183, 0, .06), transparent 60%)
}

.vendor-row.silver {
    border-color: rgba(192, 192, 192, .3);
    background: linear-gradient(135deg, rgba(192, 192, 192, .06), rgba(150, 150, 150, .02));
    box-shadow: 0 4px 20px rgba(192, 192, 192, .06)
}

.vendor-row.silver::before {
    background: linear-gradient(90deg, rgba(192, 192, 255, .04), transparent 60%)
}

.vendor-logo,
.vendor-rank {
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.vendor-rank {
    width: 28px;
    height: 28px;
    font-size: .8rem;
    font-weight: 700
}

.vendor-rank.r1 {
    background: linear-gradient(135deg, gold, orange);
    color: #1a1200;
    box-shadow: 0 2px 10px rgba(255, 183, 0, .3)
}

.vendor-rank.r2 {
    background: linear-gradient(135deg, silver, #a8a8a8);
    color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(192, 192, 192, .2)
}

.vendor-rank.r3 {
    background: linear-gradient(135deg, #cd7f32, sienna);
    color: #fff;
    box-shadow: 0 2px 10px rgba(205, 127, 50, .2)
}

.vendor-rank.rn {
    background: rgba(255, 255, 255, .06);
    color: var(--text-muted)
}

.vendor-logo {
    width: 32px;
    height: 32px;
    font-size: 16px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08)
}

.vendor-info {
    flex: 1;
    min-width: 0
}

.vendor-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text)
}

.vendor-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: .55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 6px;
    vertical-align: middle
}

.vendor-badge.recommended {
    background: linear-gradient(135deg, rgba(255, 183, 0, .2), rgba(255, 153, 0, .1));
    color: #ffb700;
    border: 1px solid rgba(255, 183, 0, .3)
}

.vendor-badge.best {
    background: linear-gradient(135deg, rgba(108, 92, 231, .15), rgba(108, 92, 231, .05));
    color: #a29bfe;
    border: 1px solid rgba(108, 92, 231, .25)
}

.vendor-shipping {
    font-size: .65rem;
    color: var(--text-muted);
    margin-top: 2px
}

.vendor-price {
    text-align: right;
    flex-shrink: 0;
    margin-right: 8px
}

.vendor-price-val {
    font-family: "Playfair Display", serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold)
}

.vendor-price-label {
    font-size: .55rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px
}

.vendor-row.gold .vendor-price-val {
    color: #ffb700
}

.vendor-row.silver .vendor-price-val {
    color: #c0c0ff
}

.vendor-cta {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0
}

.vendor-cta.cta-gold {
    background: linear-gradient(135deg, #ffb700, #ff9500);
    color: #1a1200;
    box-shadow: 0 3px 12px rgba(255, 183, 0, .25)
}

.vendor-cta.cta-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 183, 0, .4)
}

.vendor-cta.cta-silver {
    background: linear-gradient(135deg, #a29bfe, #6c5ce7);
    color: #fff;
    box-shadow: 0 3px 12px rgba(108, 92, 231, .25)
}

.vendor-cta.cta-silver:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 92, 231, .4)
}

.vendor-cta.cta-default {
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--border);
    color: var(--text-muted)
}

.vendor-cta.cta-default:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--text);
    border-color: var(--gold-dark)
}

.comp-disclaimer {
    text-align: center;
    margin-top: 1.2rem;
    font-size: .6rem;
    color: rgba(255, 255, 255, .25);
    line-height: 1.4
}

@media (max-width:768px) {
    #encyclopedia {
        padding: 1rem 1rem 0
    }

    .search-container {
        margin-bottom: 1.5rem
    }

    .search-input {
        padding: 14px 50px 14px 18px;
        font-size: .85rem
    }

    .enc-chips {
        gap: 6px
    }

    .enc-chip {
        padding: 6px 12px;
        font-size: .7rem
    }

    .perfume-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem
    }

    .perfume-card {
        padding: 0
    }

    .pc-body {
        padding: .55rem .6rem .65rem
    }

    .pc-name {
        font-size: .78rem !important;
        -webkit-line-clamp: 2;
        line-clamp: 2
    }

    .pc-brand {
        font-size: .55rem !important
    }

    .pc-rating {
        font-size: .6rem;
        padding: 2px 6px
    }

    .modal-overlay {
        padding: 0;
        align-items: flex-end
    }

    .modal-card {
        padding: 1.5rem 1.2rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
        border-radius: 24px 24px 0 0;
        max-height: 90vh;
        max-width: 100%;
        width: 100%;
        margin: 0;
        animation: mobileSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1)
    }

    @keyframes mobileSlideUp {
        from {
            transform: translateY(100%);
            opacity: 0
        }

        to {
            transform: translateY(0);
            opacity: 1
        }
    }

    .modal-name {
        font-size: 1.3rem;
        padding-right: 44px;
        line-height: 1.2
    }

    .modal-brand {
        font-size: .8rem;
        margin-bottom: 1rem
    }

    .modal-meta {
        gap: 6px;
        margin-bottom: 1rem
    }

    .modal-badge {
        padding: 5px 12px;
        font-size: .72rem
    }

    .modal-close {
        width: 36px;
        height: 36px;
        top: 14px;
        right: 14px;
        font-size: 1.1rem
    }

    .pyramid-section {
        margin-bottom: .8rem
    }

    .pyramid-note {
        padding: 5px 12px;
        font-size: .74rem
    }

    .modal-actions {
        flex-direction: column;
        gap: 10px;
        margin-top: 1.2rem
    }

    .modal-comas,
    .modal-comparator {
        padding: 14px;
        font-size: .85rem;
        width: 100%;
        border-radius: 16px;
        text-align: center;
        justify-content: center
    }

    .comp-overlay {
        padding: 0;
        align-items: flex-end
    }

    .comp-card {
        padding: 1.5rem 1.2rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
        border-radius: 24px 24px 0 0;
        max-height: 90vh;
        max-width: 100%;
        width: 100%;
        margin: 0;
        animation: mobileSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1)
    }

    .comp-title {
        font-size: 1.1rem
    }

    .vendor-row {
        padding: 10px 12px;
        gap: 8px
    }

    .vendor-logo {
        width: 26px;
        height: 26px;
        font-size: 13px
    }

    .vendor-cta {
        padding: 6px 12px;
        font-size: .65rem
    }

    .vendor-price-val {
        font-size: .95rem
    }

    .random-section {
        padding: 1rem .8rem;
    }

    .random-header {
        gap: .4rem;
    }

    .results-header {
        flex-direction: column;
        gap: 8px;
        text-align: center
    }

    .pagination {
        gap: 4px
    }

    .page-btn {
        padding: 8px 14px;
        font-size: .75rem
    }
}

@media (max-width:480px) {
    .perfume-card {
        padding: 0
    }

    .pc-name {
        font-size: .72rem
    }

    .pc-brand {
        font-size: .52rem
    }

    .modal-card {
        padding: 1rem
    }

    .modal-name {
        font-size: 1.1rem
    }

    .pyramid-note {
        padding: 4px 10px;
        font-size: .7rem
    }

    .comp-card {
        padding: .8rem
    }

    .vendor-row {
        flex-wrap: wrap;
        padding: 8px 10px
    }

    .vendor-price {
        margin-right: 0
    }

    .vendor-cta {
        width: 100%;
        justify-content: center;
        padding: 8px;
        font-size: .7rem
    }

    .comp-perfume-info {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px
    }
}

/* Block 18 (was at line 4792) */
/* ── LE MARCHÉ STYLES ── */
.marche-section {
    position: relative;
    overflow: hidden;
    padding: 2rem 0 1.5rem;
    min-height: 400px /* CLS: reserve space before financial data & carousels load */
}

.marche-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 136, .2), rgba(201, 169, 110, .3), rgba(0, 255, 136, .2), transparent)
}

/* Ticker Bar */
.ticker-wrap {
    overflow: hidden;
    background: rgba(0, 255, 136, .03);
    border-bottom: 1px solid rgba(0, 255, 136, .08);
    padding: 10px 0;
    position: relative
}

.ticker-wrap::before,
.ticker-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2
}

.ticker-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg), transparent)
}

.ticker-wrap::after {
    right: 0;
    background: linear-gradient(-90deg, var(--bg), transparent)
}

.ticker-track {
    display: flex;
    gap: 3rem;
    animation: tickerScroll 60s linear infinite;
    white-space: nowrap;
    width: max-content
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
    font-size: .75rem;
    letter-spacing: .5px
}

.ticker-symbol {
    color: var(--gold);
    font-weight: 700
}

.ticker-name {
    color: var(--text-muted);
    font-size: .65rem
}

.ticker-up {
    color: #00ff88
}

.ticker-down {
    color: #ff4444
}

.ticker-sep {
    color: rgba(255, 255, 255, .1);
    font-size: .5rem
}

@keyframes tickerScroll {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

/* Market Board */
.market-board {
    border: 1px solid rgba(0, 255, 136, .08);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(0, 255, 136, .02);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(0, 255, 136, .06)
}

.board-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #00ff88
}

.board-title svg {
    width: 16px;
    height: 16px;
    stroke: #00ff88;
    fill: none;
    stroke-width: 2
}

.board-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .6rem;
    color: var(--text-muted)
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff88;
    animation: livePulse 2s ease infinite
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(0, 255, 136, .4)
    }

    50% {
        opacity: .7;
        box-shadow: 0 0 8px 4px rgba(0, 255, 136, 0)
    }
}

.board-table {
    width: 100%;
    border-collapse: collapse
}

.board-table th {
    padding: 8px 12px;
    text-align: left;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    font-family: 'JetBrains Mono', Consolas, monospace
}

.board-table th:last-child,
.board-table td:last-child {
    text-align: right;
    padding-right: 1.5rem
}

.board-table th:first-child,
.board-table td:first-child {
    padding-left: 1.5rem
}

.board-table td {
    padding: 8px 12px;
    font-size: .78rem;
    border-bottom: 1px solid rgba(255, 255, 255, .02);
    transition: background .2s
}

.board-table tbody tr:nth-child(n+8) {
    display: none
}

.board-table tr:hover td {
    background: rgba(0, 255, 136, .03)
}

.board-rank {
    font-family: 'JetBrains Mono', Consolas, monospace;
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 600
}

.board-perfume-name {
    color: var(--gold-light);
    font-weight: 600;
    font-size: .82rem
}

.board-perfume-name a {
    color: inherit;
    text-decoration: none;
    transition: color .2s
}

.board-perfume-name a:hover {
    color: var(--gold)
}

.board-brand {
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 400
}

.board-views {
    font-family: 'JetBrains Mono', Consolas, monospace;
    color: var(--text);
    font-weight: 600;
    transition: color .3s
}

.board-change {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-weight: 700;
    font-size: .78rem;
    transition: color .3s
}

.board-change.up {
    color: #00ff88
}

.board-change.down {
    color: #ff4444
}

.board-change.neutral {
    color: var(--text-muted)
}

.board-empty {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    font-size: .8rem
}

.board-footer {
    padding: .8rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .03);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .6rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', Consolas, monospace
}

/* ── ROW CASCADE ANIMATION ── */
.board-table tbody tr {
    opacity: 0;
    transform: translateX(-12px);
    animation: rowSlideIn .4s ease forwards
}

.board-table tbody tr:nth-child(1) {
    animation-delay: .05s
}

.board-table tbody tr:nth-child(2) {
    animation-delay: .1s
}

.board-table tbody tr:nth-child(3) {
    animation-delay: .15s
}

.board-table tbody tr:nth-child(4) {
    animation-delay: .2s
}

.board-table tbody tr:nth-child(5) {
    animation-delay: .25s
}

.board-table tbody tr:nth-child(6) {
    animation-delay: .3s
}

.board-table tbody tr:nth-child(7) {
    animation-delay: .35s
}

.board-table tbody tr:nth-child(8) {
    animation-delay: .4s
}

.board-table tbody tr:nth-child(9) {
    animation-delay: .45s
}

.board-table tbody tr:nth-child(10) {
    animation-delay: .5s
}

.board-table tbody tr:nth-child(11) {
    animation-delay: .55s
}

.board-table tbody tr:nth-child(12) {
    animation-delay: .6s
}

.board-table tbody tr:nth-child(13) {
    animation-delay: .65s
}

@keyframes rowSlideIn {
    to {
        opacity: 1;
        transform: translateX(0)
    }
}

/* ── NUMBER FLASH — Bloomberg Terminal Heartbeat ── */
@keyframes numFlashGreen {
    0% {
        color: #80ffcc;
        text-shadow: 0 0 12px rgba(0, 255, 136, .7), 0 0 4px rgba(0, 255, 136, .4)
    }

    100% {
        color: #00ff88;
        text-shadow: none
    }
}

@keyframes numFlashRed {
    0% {
        color: #ff8888;
        text-shadow: 0 0 12px rgba(255, 68, 68, .7), 0 0 4px rgba(255, 68, 68, .4)
    }

    100% {
        color: #ff4444;
        text-shadow: none
    }
}

.num-tick-up {
    animation: numFlashGreen .5s ease-out
}

.num-tick-down {
    animation: numFlashRed .5s ease-out
}

/* ── ROW-LEVEL BACKGROUND PULSE — makes the board breathe ── */
@keyframes rowPulseGreen {
    0% {
        background: rgba(0, 255, 136, .06)
    }

    100% {
        background: transparent
    }
}

@keyframes rowPulseRed {
    0% {
        background: rgba(255, 68, 68, .06)
    }

    100% {
        background: transparent
    }
}

.row-pulse-up {
    animation: rowPulseGreen .8s ease-out
}

.row-pulse-down {
    animation: rowPulseRed .8s ease-out
}

/* ── Tabular nums for perfect decimal alignment ── */
.board-views,
.board-change,
.mercados-value,
.mercados-badge {
    font-variant-numeric: tabular-nums;
}

/* ── MERCADOS RELACIONADOS PANEL ── */
.marche-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start
}

.mercados-panel {
    border: 1px solid rgba(0, 255, 136, .08);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(0, 255, 136, .02);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-height: 300px /* CLS: reserve space for stock ticker list */
}

.mercados-header {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(0, 255, 136, .06);
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    font-weight: 500
}

.mercados-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.mercados-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .02);
    transition: background .2s;
    cursor: default
}

.mercados-item:last-child {
    border-bottom: none
}

.mercados-item:hover {
    background: rgba(0, 255, 136, .03)
}

.mercados-info {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.mercados-name {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text)
}

.mercados-value {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .65rem;
    color: var(--text-muted);
    transition: color .3s
}

.mercados-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .68rem;
    font-weight: 700;
    min-width: 70px;
    justify-content: center;
    transition: all .3s
}

.mercados-badge.up {
    background: rgba(0, 255, 136, .1);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, .15)
}

.mercados-badge.down {
    background: rgba(255, 68, 68, .1);
    color: #ff4444;
    border: 1px solid rgba(255, 68, 68, .15)
}

.mercados-footer {
    padding: .6rem 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .03);
    font-size: .55rem;
    color: var(--text-muted);
    text-align: right;
    font-style: italic
}

/* Reddit Feed — Horizontal Carousel */
.reddit-carousel-wrap {
    position: relative;
    padding: 0 2.5rem
}

.reddit-grid {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: none;
    scroll-behavior: auto;
    padding: 1rem .5rem 1.5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-height: 220px /* CLS: reserve space before Reddit posts load */
}

.reddit-grid::-webkit-scrollbar {
    display: none
}

.reddit-card {
    flex: 0 0 340px;
    max-width: 340px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all .4s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.reddit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 69, 0, .4), transparent);
    opacity: 0;
    transition: opacity .3s
}

.reddit-card:hover {
    border-color: rgba(255, 69, 0, .2);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3)
}

.reddit-card:hover::before {
    opacity: 1
}

.reddit-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .8rem
}

.reddit-flair {
    font-size: .55rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 69, 0, .12);
    color: #ff6b35;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px
}

.reddit-pinned {
    background: rgba(0, 255, 136, .1);
    color: #00ff88
}

.reddit-title {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: .6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1
}

.reddit-title a {
    color: inherit;
    text-decoration: none;
    transition: color .2s
}

.reddit-title a:hover {
    color: var(--gold)
}

.reddit-preview {
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.reddit-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .65rem;
    color: var(--text-muted);
    margin-top: auto
}

.reddit-meta-item {
    display: flex;
    align-items: center;
    gap: 4px
}

.reddit-meta svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2
}

.reddit-ups svg {
    stroke: #ff6b35
}

.reddit-author {
    color: var(--gold-dark);
    font-size: .6rem
}

.reddit-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 69, 0, .2);
    background: rgba(10, 10, 10, .92);
    color: #ff6b35;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    font-size: 18px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.reddit-scroll-btn:hover {
    border-color: #ff6b35;
    background: rgba(255, 69, 0, .1);
    transform: translateY(-50%) scale(1.1)
}

.reddit-scroll-left {
    left: 0
}

.reddit-scroll-right {
    right: 0
}

/* CTA Links */
.marche-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap
}

.marche-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: .72rem;
    text-decoration: none;
    transition: all .3s;
    font-weight: 500
}

.marche-link-reddit {
    background: rgba(255, 69, 0, .1);
    border: 1px solid rgba(255, 69, 0, .15);
    color: #ff6b35
}

.marche-link-reddit:hover {
    background: rgba(255, 69, 0, .2);
    transform: translateY(-2px)
}

.marche-link-plans {
    background: rgba(201, 169, 110, .08);
    border: 1px solid var(--border);
    color: var(--gold)
}

.marche-link-plans:hover {
    border-color: var(--gold-dark);
    transform: translateY(-2px)
}

.marche-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2
}

@media(max-width:1024px) {
    .reddit-card {
        flex: 0 0 300px;
        max-width: 300px
    }

    .marche-layout {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .mercados-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .mercados-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, .02)
    }
}

@media(max-width:768px) {
    .reddit-card {
        flex: 0 0 280px;
        max-width: 280px
    }

    .reddit-carousel-wrap {
        padding: 0 1rem
    }

    .reddit-scroll-btn {
        display: none
    }

    .board-table th:nth-child(3),
    .board-table td:nth-child(3) {
        display: none
    }

    .ticker-track {
        animation-duration: 25s
    }

    .marche-links {
        flex-direction: column;
        align-items: center
    }

    .mercados-list {
        grid-template-columns: 1fr
    }

    .mercados-item:nth-child(odd) {
        border-right: none
    }
}

/* ═══ MOBILE POLISH — ADDITIVE ONLY (zero desktop impact) ═══ */
@media(max-width:600px) {

    /* Bloomberg cards — no breakpoint existed */
    .bb-card {
        min-width: 155px;
        max-width: 155px;
        padding: 10px 12px
    }

    .bb-scroll-btn {
        display: none
    }

    .bb-name {
        font-size: .72rem
    }

    .bb-price {
        font-size: 1rem
    }

    .bb-change {
        font-size: .6rem;
        padding: 3px 7px
    }

    .bb-add-btn {
        width: 24px;
        height: 24px;
        font-size: 12px
    }

    /* Intraday chart */
    .chart-big-price {
        font-size: 1.3rem
    }

    .chart-container {
        padding: 14px 12px
    }

    .chart-tabs span {
        padding: 6px 10px;
        font-size: .58rem
    }

    .chart-svg-wrap {
        height: 120px
    }

    /* Scientific Encyclopedias card padding */
    .sci-portal {
        padding: 1.2rem
    }

    /* Intercept console text overflow */
    .intercept-console-wrap {
        padding: 8px 10px;
        font-size: 10px
    }

    .ic-header {
        font-size: 9px
    }

    .ic-body {
        font-size: 9px
    }
}

@media(max-width:480px) {

    /* VIX ticker — avoid FAB overlap */
    .vix-ticker {
        bottom: 70px;
        left: 8px;
        right: auto;
        padding: 6px 10px;
        gap: 6px
    }

    .vix-value {
        font-size: 12px
    }

    .vix-change {
        font-size: 8px;
        max-width: 90px
    }

    /* Arbitrage CTA card tighter text */
    .arb-cta-card {
        padding: 18px;
        gap: 12px
    }

    .arb-cta-text h3 {
        font-size: 13px;
        letter-spacing: 1px
    }

    .arb-cta-text p {
        font-size: 11px
    }

    /* Bloomberg cards even tighter */
    .bb-card {
        min-width: 140px;
        max-width: 140px;
        padding: 8px 10px
    }

    .bb-name {
        font-size: .65rem
    }

    .bb-dark {
        font-size: .75rem
    }

    .bb-retail {
        font-size: .55rem
    }
}

/* ── BLOOMBERG CARDS CAROUSEL ── */
.bb-carousel-wrap {
    position: relative;
    margin: 1.2rem 0 0;
    padding: 0 1.5rem;
    max-width: 100%;
    overflow: visible
}

.bb-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    /* scroll-snap removed — V12 engine manages scroll */
    scroll-behavior: auto;
    padding: 8px 16px 16px 16px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-right: -16px;
    padding-right: 32px
}

.bb-carousel::-webkit-scrollbar {
    display: none
}

.bb-card {
    min-width: 240px;
    max-width: 240px;
    flex-shrink: 0;
    background: rgba(30, 30, 30, .85);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    cursor: pointer;
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
    scroll-snap-align: start;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    outline: none
}

.bb-card:hover {
    border-color: rgba(201, 169, 110, .3);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 20px rgba(201, 169, 110, .08)
}

.bb-card:focus {
    outline: none;
    border-color: rgba(201, 169, 110, .2)
}

.bb-card[data-sector="niche-tech"] {
    border-color: rgba(255, 255, 255, .06)
}

.bb-card[data-sector="target"] {
    border-color: rgba(255, 255, 255, .06)
}

@keyframes bbCardPulse {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(0, 255, 136, 0)
    }

    50% {
        box-shadow: 0 0 12px rgba(0, 255, 136, .08)
    }
}

.bb-card.price-flash {
    animation: bbCardPulse .6s ease
}

.bb-ticker-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-family: 'JetBrains Mono', Consolas, monospace;
    width: fit-content
}

.bb-ticker-badge.up {
    background: rgba(0, 255, 136, .15);
    color: #00ff88
}

.bb-ticker-badge.down {
    background: rgba(255, 68, 68, .15);
    color: #ff4444
}

.bb-name {
    margin: 6px 0 0;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3
}

.bb-brand {
    color: var(--text-muted);
    font-size: .6rem;
    margin-top: 2px
}

.bb-prices {
    margin-top: auto;
    padding-top: 12px
}

.bb-arbitrage {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px
}

.bb-retail {
    color: #666;
    font-size: .65rem;
    text-decoration: line-through;
    font-family: 'JetBrains Mono', Consolas, monospace
}

.bb-dark {
    color: #00ff88;
    font-size: .9rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', Consolas, monospace;
    text-shadow: 0 0 6px rgba(0, 255, 136, .4)
}

.bb-profit {
    font-size: .55rem;
    color: #00ff88;
    font-weight: 700;
    padding: 2px 6px;
    background: rgba(0, 255, 136, .12);
    border-radius: 3px
}

.bb-price {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', Consolas, monospace;
    margin-bottom: 8px
}

.bb-price-unit {
    font-size: .6rem;
    color: var(--text-muted);
    font-weight: 400
}

.bb-footer {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.bb-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', Consolas, monospace
}

.bb-change.up {
    background: rgba(0, 255, 136, .12);
    color: #00ff88
}

.bb-change.down {
    background: rgba(255, 68, 68, .12);
    color: #ff4444
}

.bb-add-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .15);
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s;
    font-size: 14px;
    line-height: 1
}

.bb-add-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201, 169, 110, .1);
    transform: scale(1.15)
}

.bb-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(10, 10, 10, .9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    font-size: 16px
}

.bb-scroll-btn:hover {
    border-color: var(--gold);
    background: rgba(30, 30, 30, .95)
}

.bb-scroll-left {
    left: 0
}

.bb-scroll-right {
    right: 0
}



/* ── FEAR & GREED INDEX ── */
.fg-container {
    margin-bottom: 1.5rem
}

.fg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
}

.fg-title {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px
}

.fg-title svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2
}

.fg-sentiment {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .5px
}

.fg-bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ff4444 0%, #ff8800 25%, #ffcc00 50%, #88cc00 75%, #00ff88 100%);
    overflow: visible
}

.fg-needle {
    position: absolute;
    top: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #111;
    transition: left 1.5s cubic-bezier(.22, 1, .36, 1);
    box-shadow: 0 0 8px rgba(255, 255, 255, .3)
}

.fg-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: .5rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', Consolas, monospace
}

/* ── FLASH BOY — PRICE UPDATE PULSE ── */
@keyframes flashBgGreen {
    0% {
        background: rgba(0, 255, 136, .45);
        color: #fff;
        text-shadow: 0 0 10px rgba(0, 255, 136, .5)
    }

    100% {
        background: transparent;
        color: inherit;
        text-shadow: none
    }
}

@keyframes flashBgRed {
    0% {
        background: rgba(255, 68, 68, .45);
        color: #fff;
        text-shadow: 0 0 10px rgba(255, 68, 68, .5)
    }

    100% {
        background: transparent;
        color: inherit;
        text-shadow: none
    }
}

.bb-flash-up {
    animation: flashBgGreen .8s ease-out;
    border-radius: 4px
}

.bb-flash-down {
    animation: flashBgRed .8s ease-out;
    border-radius: 4px
}

/* ── INTRADAY CHART ── */
.chart-container {
    margin: 1.5rem auto;
    padding: 20px 24px;
    background: rgba(15, 15, 15, .85);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    max-width: var(--max-w, 1200px)
}

.chart-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px
}

.chart-index-name {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px
}

.chart-price-row {
    display: flex;
    align-items: center;
    gap: 12px
}

.chart-big-price {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff
}

.chart-change-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', Consolas, monospace;
    background: rgba(0, 255, 136, .12);
    color: #00ff88
}

.chart-change-today {
    font-size: .85rem;
    color: #00ff88;
    font-family: 'JetBrains Mono', Consolas, monospace
}

.chart-meta {
    font-size: .55rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-family: 'JetBrains Mono', Consolas, monospace
}

.chart-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    margin-bottom: 16px
}

.chart-tabs span {
    padding: 8px 16px;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .65rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .2s;
    letter-spacing: .5px
}

.chart-tabs span:hover {
    color: var(--text)
}

.chart-tabs span.active {
    color: #8ab4f8;
    border-bottom-color: #8ab4f8
}

.chart-svg-wrap {
    position: relative;
    width: 100%;
    height: 160px
}

.chart-svg-wrap svg {
    width: 100%;
    height: 100%
}

/* ── OBSIDIAN LIVE BADGE (Green pulse) ── */
.obsidian-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 2px 8px;
    background: rgba(0, 255, 136, .08);
    border: 1px solid rgba(0, 255, 136, .25);
    border-radius: 4px;
    vertical-align: middle
}

.olb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 6px #00ff88, 0 0 12px rgba(0, 255, 136, .3);
    animation: obsidianPulse 2s infinite
}

.olb-text {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #00ff88;
    text-transform: uppercase
}

@keyframes obsidianPulse {
    0%, 100% { opacity: 1; transform: scale(1) }
    50% { opacity: .4; transform: scale(.7) }
}

/* ── OBSIDIAN METRICS CARD (Google Finance "Índice" sidebar) ── */
.obsidian-metrics-card {
    min-width: 220px;
    max-width: 260px;
    background: rgba(20, 20, 20, .9);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 14px 16px;
    flex-shrink: 0
}

.omc-title {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .55rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.omc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .03)
}

.omc-label {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .55rem;
    color: var(--text-muted);
    letter-spacing: .5px
}

.omc-value {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .6rem;
    color: #fff;
    font-weight: 600
}

.omc-composition {
    margin-top: 8px
}

.omc-bar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    display: flex;
    overflow: hidden;
    gap: 1px
}

.omc-bar span {
    height: 100%;
    border-radius: 3px;
    transition: width .5s ease
}

/* ── COMPARISON STRIP (Google Finance "Comparar con") ── */
.obsidian-compare-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .04)
}

.ocs-label {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .55rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0
}

.ocs-cards {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.ocs-cards::-webkit-scrollbar { display: none }

.ocs-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    flex-shrink: 0;
    transition: all .2s
}

.ocs-card:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(201, 169, 110, .2)
}

.ocs-card-name {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .55rem;
    color: rgba(255, 255, 255, .7);
    white-space: nowrap
}

.ocs-card-change {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .55rem;
    font-weight: 700
}

.ocs-card-change.up { color: #00ff88 }
.ocs-card-change.down { color: #ff4444 }

/* ── GOOGLE FINANCE DISCOVER CARDS (V12 Carousel) ── */
.gf-discover {
    margin: 1.5rem 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .04)
}

.gf-discover-header {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .65rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    letter-spacing: .5px
}

.gf-discover-header svg { color: var(--gold); flex-shrink: 0 }

.gf-also-search {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: .7rem;
    color: var(--text-muted);
    margin: 18px 0 12px;
    letter-spacing: .3px
}

.gf-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0
}

.gf-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
    scroll-behavior: auto
}

.gf-carousel::-webkit-scrollbar { display: none }

.gf-scroll-btn {
    position: absolute;
    z-index: 5;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(20, 20, 20, .95);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5)
}

.gf-scroll-btn:hover {
    background: rgba(40, 40, 40, .95);
    border-color: rgba(201, 169, 110, .3)
}

.gf-scroll-left { left: -16px }
.gf-scroll-right { right: -16px }

/* ── GF Card (Google Finance style) ── */
.gf-card {
    min-width: 160px;
    max-width: 200px;
    background: rgba(15, 15, 15, .85);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 14px 16px;
    flex-shrink: 0;
    transition: all .25s;
    cursor: default;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.gf-card:hover {
    border-color: rgba(201, 169, 110, .35);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4)
}

.gf-card-tag {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 4px;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    align-self: flex-start
}

.gf-tag-idx {
    background: rgba(138, 180, 248, .08);
    color: #8ab4f8;
    border-color: rgba(138, 180, 248, .25)
}

.gf-card-name {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: .72rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0
}

.gf-card-price {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .85rem;
    font-weight: 700;
    color: #fff
}

.gf-card-change {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .6rem;
    font-weight: 700
}

.gf-card-change.up { color: #00ff88 }
.gf-card-change.down { color: #ff4444 }

/* Regional tag colors — Google Finance style */
.gf-tag-idx { background: rgba(138,180,248,.12); color: #8ab4f8; border-color: rgba(138,180,248,.35) }
.gf-tag-usa { background: rgba(0,255,136,.1); color: #00ff88; border-color: rgba(0,255,136,.3) }
.gf-tag-asia { background: rgba(255,183,77,.1); color: #FFB74D; border-color: rgba(255,183,77,.3) }
.gf-tag-crypto { background: rgba(206,147,216,.1); color: #CE93D8; border-color: rgba(206,147,216,.3) }

.gf-card-mini {
    min-width: 140px;
    max-width: 180px;
    padding: 12px 14px
}

.gf-card-mini .gf-card-price {
    font-size: .75rem
}

/* GF flash animation */
.gf-card-price.gf-flash {
    animation: gfFlash .5s ease-out
}

@keyframes gfFlash {
    0% { color: #00ff88; text-shadow: 0 0 8px rgba(0, 255, 136, .4) }
    100% { color: #fff; text-shadow: none }
}

/* ── NASDAQ TERMINAL ENHANCEMENT: Market State Dots ── */
.market-state-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
    flex-shrink: 0
}
.market-state-dot.open {
    background: #00ff88;
    box-shadow: 0 0 6px rgba(0, 255, 136, .6);
    animation: mktPulse 2s ease-in-out infinite
}
.market-state-dot.closed {
    background: #ff6b6b;
    opacity: .6
}
@keyframes mktPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(0, 255, 136, .6) }
    50% { opacity: .5; box-shadow: 0 0 2px rgba(0, 255, 136, .3) }
}

/* ── NASDAQ TERMINAL: Volume display in sidebar ── */
.mercados-volume {
    display: block;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .48rem;
    color: rgba(255, 255, 255, .35);
    letter-spacing: .5px;
    margin-top: 1px
}

/* ── NASDAQ TERMINAL: Volume in ticker bar ── */
.ticker-vol {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .55rem;
    color: rgba(255, 255, 255, .3);
    margin-left: 4px
}

/* ── NASDAQ TERMINAL: Discovery card metadata (mktCap, CEO, sector) ── */
.gf-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    align-items: center
}
.gf-meta-cap {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .52rem;
    font-weight: 700;
    color: #C9A96E;
    background: rgba(201, 169, 110, .1);
    border: 1px solid rgba(201, 169, 110, .2);
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: .3px
}
.gf-meta-sector {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: .45rem;
    font-weight: 600;
    color: #8ab4f8;
    background: rgba(138, 180, 248, .08);
    border: 1px solid rgba(138, 180, 248, .2);
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .5px
}
.gf-meta-ceo {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: .45rem;
    color: rgba(255, 255, 255, .35);
    font-style: italic;
    width: 100%
}
.gf-meta-vol {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .45rem;
    color: rgba(255, 255, 255, .25);
    letter-spacing: .3px
}

/* ── NASDAQ TERMINAL: Direction glow on discovery cards ── */
.gf-card.gf-glow-up {
    border-color: rgba(0, 255, 136, .2);
    box-shadow: 0 0 15px rgba(0, 255, 136, .08), inset 0 0 20px rgba(0, 255, 136, .03)
}
.gf-card.gf-glow-down {
    border-color: rgba(255, 68, 68, .2);
    box-shadow: 0 0 15px rgba(255, 68, 68, .08), inset 0 0 20px rgba(255, 68, 68, .03)
}

@media (max-width: 600px) {
    .gf-scroll-btn { display: none }
    .gf-card { min-width: 140px; padding: 10px 12px }
    .gf-card-mini { min-width: 120px }
    .gf-card-meta { gap: 3px }
    .gf-meta-cap, .gf-meta-sector { font-size: .42rem }
    .gf-meta-ceo { font-size: .4rem }
    .market-state-dot { width: 5px; height: 5px }
}


/* ── FINANCIAL NEWS SECTION ("En las Noticias") ── */
.obsidian-news-section {
    max-width: var(--max-w, 1200px);
    margin: 1.5rem auto;
    padding: 0 24px
}

.ons-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px
}

.ons-title {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .5px
}

.ons-title svg { color: var(--gold); flex-shrink: 0 }

.ons-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(0, 255, 136, .06);
    border: 1px solid rgba(0, 255, 136, .15);
    border-radius: 4px;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #00ff88
}

.ons-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
    cursor: grab
}

.ons-grid::-webkit-scrollbar {
    display: none
}

.obsidian-news-card {
    display: flex;
    flex-direction: column;
    background: rgba(15, 15, 15, .85);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    transition: all .25s;
    min-height: 90px;
    min-width: 260px;
    max-width: 300px;
    flex-shrink: 0
}

.obsidian-news-card:hover {
    border-color: rgba(201, 169, 110, .25);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    background: rgba(20, 20, 20, .95)
}

.onc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px
}

.onc-tag {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 1px 6px;
    border: 1px solid;
    border-radius: 3px
}

.onc-time {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .45rem;
    color: var(--text-muted)
}

.onc-title {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.onc-snippet {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-bottom: 4px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.onc-source {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .5rem;
    color: var(--text-muted)
}

.onc-source svg { color: var(--text-muted); flex-shrink: 0 }

/* ── MERCADOS FOOTER ── */
.mercados-footer {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .45rem;
    color: rgba(0, 255, 136, .5);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .04)
}

/* ── RESPONSIVE: News + Discovery ── */
@media (max-width: 900px) {
    .obsidian-news-card { min-width: 240px; max-width: 280px }
    .obsidian-metrics-card { min-width: 100%; max-width: 100%; margin-top: 10px }
}

@media (max-width: 600px) {
    .obsidian-news-card { min-width: 220px; max-width: 260px }
    .obsidian-discover { padding: 0 12px }
    .obsidian-news-section { padding: 0 12px }
    .obsidian-compare-strip { overflow-x: auto; flex-wrap: nowrap }
    .obsidian-live-badge { margin-left: 0; margin-top: 4px; display: flex }
    .chart-index-name { display: flex; flex-wrap: wrap; align-items: center }
}

/* ── INTERCEPT CONSOLE (Hacker Terminal) ── */
.intercept-console-wrap {
    background: #050505;
    border: 1px solid #00C851;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'JetBrains Mono', Consolas, monospace;
    height: 150px;
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    max-width: var(--max-w, 1200px);
    box-shadow: inset 0 0 10px rgba(0, 200, 81, .1), 0 0 20px rgba(0, 200, 81, .05)
}

.ic-header {
    color: #ff4444;
    font-size: 11px;
    font-weight: bold;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    margin-bottom: 5px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px
}

.ic-header svg {
    width: 10px;
    height: 10px;
    fill: #ff4444;
    flex-shrink: 0
}

.ic-body {
    color: #00ff88;
    font-size: 11px;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 1;
    text-shadow: 0 0 3px rgba(0, 255, 136, .4)
}

.log-line {
    margin: 2px 0;
    opacity: 0;
    animation: fadeInLog .2s forwards
}

.log-red {
    color: #ff4444;
    text-shadow: 0 0 3px rgba(255, 68, 68, .4)
}

.log-yellow {
    color: #ffbb33;
    text-shadow: 0 0 3px rgba(255, 187, 51, .4)
}

@keyframes fadeInLog {
    to {
        opacity: 1
    }
}







/* ── WHALE LEADERBOARD ── */
.leaderboard-wrap {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    padding: 12px;
    font-family: 'JetBrains Mono', Consolas, monospace;
    margin-top: 12px
}

.lb-header {
    color: #ffd700;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.lb-header svg {
    width: 14px;
    height: 14px;
    stroke: #ffd700;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0
}

.lb-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.lb-item {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 6px;
    color: #ccc;
    padding: 2px 4px;
    border-radius: 4px
}

.lb-user {
    font-weight: bold
}

.lb-user.gold {
    color: #ffd700
}

.lb-user.silver {
    color: #c0c0c0
}

.lb-roi {
    color: #00ff88
}

.lb-flash {
    animation: highlightRow 1s ease
}

@keyframes highlightRow {
    0% {
        background: rgba(0, 200, 81, .4)
    }

    100% {
        background: transparent
    }
}





@media(max-width:768px) {
    .bb-carousel-wrap {
        padding: 0 1rem
    }

    .bb-card {
        min-width: 170px;
        max-width: 170px;
        padding: 12px
    }

    .bb-scroll-btn {
        display: none
    }

    .chart-container {
        padding: 14px 16px
    }

    .chart-big-price {
        font-size: 1.3rem
    }

    .chart-svg-wrap {
        height: 160px
    }

    .chart-tabs span {
        padding: 6px 10px;
        font-size: .55rem
    }

    .intercept-console-wrap {
        margin: 12px;
        height: 120px
    }
}

@media(max-width:480px) {
    .bb-card {
        min-width: 155px;
        max-width: 155px
    }

    .bb-price {
        font-size: .9rem
    }
}

/* Block 19 (was at line 6107) */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto
}

.pricing-card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    transition: all .4s ease
}

.pricing-card:hover {
    border-color: var(--gold-dark);
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3)
}

.pricing-card.featured {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(191, 161, 74, .08), rgba(191, 161, 74, .02))
}

.pricing-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--gold-light);
    margin-bottom: .5rem
}

.pricing-card .price {
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.5rem
}

.pricing-card .price span {
    font-size: .9rem;
    font-weight: 400;
    color: var(--text-muted)
}

.pricing-features {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 2rem
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    color: var(--text-muted);
    font-size: .85rem;
    border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.pricing-features li svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 2;
    margin-top: 2px
}

.popular-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold), #d4a853);
    color: #000;
    font-size: .65rem;
    font-weight: 800;
    padding: 4px 16px;
    border-radius: 0 0 10px 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase
}

.save-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(191, 161, 74, .1);
    border: 1px solid rgba(191, 161, 74, .2);
    color: var(--gold);
    font-size: .75rem;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 1rem
}

.plan-cta {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .3s
}

.plan-cta-free {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border);
    color: var(--text)
}

.plan-cta-free:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--gold-dark)
}

.plan-cta-gold {
    background: linear-gradient(135deg, var(--gold), #d4a853);
    color: #000
}

.plan-cta-gold:hover {
    box-shadow: 0 8px 30px rgba(191, 161, 74, .4);
    transform: translateY(-2px)
}

.plan-cta-premium {
    background: linear-gradient(135deg, rgba(191, 161, 74, .15), rgba(191, 161, 74, .05));
    border: 1.5px solid var(--gold);
    color: var(--gold-light)
}

.plan-cta-premium:hover {
    background: linear-gradient(135deg, rgba(191, 161, 74, .25), rgba(191, 161, 74, .1));
    box-shadow: 0 8px 30px rgba(191, 161, 74, .2)
}

.plan-cta-lifetime {
    background: linear-gradient(135deg, rgba(108, 92, 231, .15), rgba(108, 92, 231, .05));
    border: 1.5px solid rgba(108, 92, 231, .5);
    color: #a29bfe
}

.plan-cta-lifetime:hover {
    background: linear-gradient(135deg, rgba(108, 92, 231, .25), rgba(108, 92, 231, .1));
    box-shadow: 0 8px 30px rgba(108, 92, 231, .25)
}

.text-cyan-bold {
    color: #00d4ff;
    font-weight: 600
}

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

@media(max-width:600px) {
    .pricing-grid {
        grid-template-columns: 1fr
    }

    .pricing-card {
        padding: 2rem 1.5rem
    }
}

/* Block 20 (was at line 6463) */
/* ═══ PRIVATE OFFICE CARD — OLD MONEY ═══ */
.po-card-section {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.po-card {
    position: relative;
    display: grid;
    grid-template-columns: 52% 48%;
    min-height: 600px;
    background: linear-gradient(170deg, #0c0c0e 0%, #08080a 40%, #0a0906 100%);
    border: none;
    border-top: 1px solid rgba(201, 169, 110, .08);
    border-bottom: 1px solid rgba(201, 169, 110, .08);
    overflow: hidden;
}

.po-card:hover .po-card-visual {
    filter: brightness(1.1);
    transition: filter .8s ease;
}

.po-card-glow {
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 100%;
    background: radial-gradient(ellipse at 40% 30%, rgba(201, 169, 110, .08), transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* ── LEFT: Editorial atelier image panel ── */
.po-card-visual {
    position: relative;
    overflow: hidden;
    background: url('/images/private-office.png') center / cover no-repeat;
    transition: filter .8s ease;
}
.po-card-visual::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(to right, rgba(0,0,0,.08) 0%, rgba(10,8,5,.88) 100%),
        radial-gradient(ellipse at 30% 50%, rgba(201,169,110,.06) 0%, transparent 50%);
    z-index: 1;
}
.po-card-visual::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(10,8,5,.015) 3px, rgba(10,8,5,.015) 4px
    );
    z-index: 2;
}

.po-card-monogram {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 14rem;
    font-weight: 900;
    color: rgba(201, 169, 110, .05);
    line-height: 1;
    pointer-events: none;
    letter-spacing: -8px;
    z-index: 3;
}

.po-card-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
    padding: 5rem 4rem 5rem 4.5rem;
    border-left: 1px solid rgba(201, 169, 110, .12);
}

.po-card-classification {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .65rem;
    font-weight: 500;
    color: #C9A96E;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: .4rem 1rem;
    border: 1px solid rgba(201, 169, 110, .2);
    background: rgba(201, 169, 110, .06);
    margin-bottom: 1.5rem;
}

.po-card-dot {
    width: 6px;
    height: 6px;
    background: #00c853;
    border-radius: 50%;
    animation: poDotPulse 2s ease-in-out infinite;
}

@keyframes poDotPulse {

    0%,
    100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 8px #00c853;
    }
}

.po-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    color: #eaeaee;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: .6rem;
}

.po-card-title span {
    color: #C9A96E;
}

.po-card-subtitle {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .75rem;
    color: #656570;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.po-card-desc {
    font-size: .95rem;
    color: #999;
    line-height: 1.8;
    max-width: 560px;
    margin-bottom: 2rem;
}

.po-card-stats {
    display: flex;
    gap: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #1a1a1f;
}

.po-card-stat {
    text-align: center;
}

.po-card-stat-val {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.6rem;
    font-weight: 600;
    color: #C9A96E;
}

.po-card-stat-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .55rem;
    color: #656570;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: .2rem;
    display: block;
}

.po-card-cta-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.po-card-cta {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: 1.2rem 2.5rem;
    background: transparent;
    border: 1.5px solid #C9A96E;
    color: #C9A96E;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all .4s ease;
    white-space: nowrap;
}

.po-card-cta:hover {
    background: rgba(201, 169, 110, .08);
    box-shadow: 0 0 30px rgba(201, 169, 110, .12);
    transform: translateY(-2px);
}

.po-card-disclaimer {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .6rem;
    color: #444;
    letter-spacing: 1px;
}

/* ═══ MOSSAD FEED WRAPPER — inside PO card ═══ */
.po-mossad-feed {
    position: relative;
    z-index: 1;
    padding: 0 2.5rem 2.5rem;
}

/* ═══ NAV — PRIVATE OFFICE BUTTON ═══ */
.nav-po-btn {
    color: #C9A96E !important;
    font-weight: 600 !important;
    border: 1px solid rgba(201, 169, 110, .35) !important;
    padding: 5px 12px !important;
    border-radius: 4px;
    letter-spacing: .8px !important;
    transition: all .3s ease !important;
    font-size: .8rem !important;
}

.nav-po-btn:hover {
    background: rgba(201, 169, 110, .08) !important;
    border-color: #C9A96E !important;
    box-shadow: 0 0 16px rgba(201, 169, 110, .1);
}

/* Responsive */
@media (max-width: 768px) {
    .po-card {
        grid-template-columns: 1fr;
    }

    .po-card-visual {
        min-height: 260px;
    }

    .po-card-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.5rem 1.5rem;
        border-left: none;
        border-top: 1px solid rgba(201, 169, 110, .1);
    }

    .po-card-stats {
        flex-wrap: wrap;
        gap: 1.2rem;
    }

    .po-card-monogram {
        font-size: 5rem;
        right: 15px;
        bottom: -10px;
    }

    .po-card-cta-area {
        align-items: stretch;
    }

    .po-card-cta {
        justify-content: center;
    }

    .po-mossad-feed {
        padding: 0 1rem 1.5rem;
    }

    .mossad-q {
        flex: 0 0 260px;
        min-width: 240px;
    }
}

/* Block 21 (was at line 6734) */
.enc-fab {
    position: fixed;
    top: calc(50% - 96px);
    left: 24px;
    z-index: 500;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 50%, #1a1a1a 100%);
    border: 1.5px solid rgba(191, 161, 74, 0.4);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(191, 161, 74, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(.16, 1, .3, 1);
    overflow: visible;
}

.enc-fab:hover {
    transform: scale(1.08);
    border-color: rgba(191, 161, 74, 0.7);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(191, 161, 74, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.enc-fab svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.enc-fab .enc-fab-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #C9A96E, #C9A96E);
    color: #0a0a0a;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(191, 161, 74, 0.4);
    border: 1px solid rgba(255, 248, 220, 0.3);
}

@media (max-width: 768px) {
    .enc-fab {
        top: auto;
        bottom: 140px;
        left: 16px;
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }
}

.enc-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.enc-panel-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.enc-panel {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    height: 85vh;
    max-height: 85vh;
    z-index: 700;
    background: rgba(10, 10, 10, 0.98);
    border-right: 1px solid rgba(252, 246, 186, 0.12);
    border-top: 1px solid rgba(252, 246, 186, 0.12);
    border-radius: 0 20px 0 0;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.enc-panel.open {
    transform: translateX(0);
}

.enc-panel-header {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(252, 246, 186, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.enc-panel-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    background: linear-gradient(135deg, #FFF8DC, #C9A96E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.enc-panel-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(252, 246, 186, 0.12);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.enc-panel-close:hover {
    background: rgba(255, 80, 80, 0.15);
    color: #ff6b6b;
}

.enc-panel-search {
    padding: 0.8rem 1.5rem;
    border-bottom: 1px solid rgba(252, 246, 186, 0.06);
    flex-shrink: 0;
}

.enc-panel-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(252, 246, 186, 0.15);
    border-radius: 30px;
    color: #fff;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.3s;
}

.enc-panel-input:focus {
    border-color: #C9A96E;
}

.enc-panel-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.enc-panel-tabs {
    display: flex;
    border-bottom: 1px solid rgba(252, 246, 186, 0.06);
    flex-shrink: 0;
}

.enc-tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    border: none;
    background: none;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.enc-tab.active {
    color: #C9A96E;
    border-bottom-color: #C9A96E;
}

.enc-tab:hover {
    color: #E8D5B0;
}

.enc-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.8rem 1.2rem;
}

.enc-family-btn,
.enc-brand-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 12px;
    border: none;
    background: rgba(252, 246, 186, 0.03);
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
    color: #fff;
    font-size: 0.82rem;
    transition: all 0.2s;
    margin-bottom: 4px;
}

.enc-family-btn:hover,
.enc-brand-btn:hover {
    background: rgba(252, 246, 186, 0.1);
    color: #E8D5B0;
}

.enc-count {
    font-size: 0.65rem;
    color: #C9A96E;
    opacity: 0.7;
}

.enc-az-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    justify-content: center;
}

.enc-az-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(252, 246, 186, 0.12);
    background: rgba(252, 246, 186, 0.03);
    color: #C9A96E;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.enc-az-btn:hover,
.enc-az-btn.active {
    background: rgba(252, 246, 186, 0.15);
    border-color: #C9A96E;
    transform: scale(1.08);
}

.enc-result-item {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    font-size: 0.82rem;
    transition: all 0.2s;
    margin-bottom: 2px;
}

.enc-result-item:hover {
    background: rgba(252, 246, 186, 0.08);
    color: #E8D5B0;
}

.enc-result-brand {
    font-size: 0.65rem;
    color: #C9A96E;
}

.enc-panel-footer {
    padding: 0.8rem 1.5rem;
    border-top: 1px solid rgba(252, 246, 186, 0.06);
    text-align: center;
    flex-shrink: 0;
}

.enc-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(191, 161, 74, 0.15), rgba(191, 161, 74, 0.08));
    border: 1px solid rgba(191, 161, 74, 0.3);
    color: #C9A96E;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.enc-explore-btn:hover {
    background: linear-gradient(135deg, rgba(191, 161, 74, 0.25), rgba(191, 161, 74, 0.15));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(191, 161, 74, 0.2);
}

/* ═══════════════════════════════════════════════════════════
   L'ORACLE DU PARFUM — Follows System UI Design
   ═══════════════════════════════════════════════════════════ */
.oracle-fab {
    position: fixed;
    top: calc(50% - 96px);
    right: 24px;
    z-index: 500;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 40px var(--glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: oracleGlow 3s ease-in-out infinite;
    overflow: visible;
}

.oracle-fab svg {
    width: 28px;
    height: 28px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 1.8;
    filter: drop-shadow(0 0 6px var(--glow));
}

.oracle-fab .eye-blink {
    animation: oracleBlink 4.5s ease-in-out infinite;
    transform-origin: center;
}

.oracle-fab .eye-sparkle {
    animation: oracleSparkle 2.5s ease-in-out infinite;
}

@keyframes oracleBlink {

    0%,
    76%,
    82%,
    88%,
    100% {
        transform: scaleY(1);
    }

    78% {
        transform: scaleY(0.05);
    }

    80% {
        transform: scaleY(1);
    }

    84% {
        transform: scaleY(0.05);
    }

    86% {
        transform: scaleY(1);
    }
}

@keyframes oracleSparkle {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

@keyframes oracleGlow {

    0%,
    100% {
        border-color: var(--border);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 30px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    50% {
        border-color: var(--border-hover);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 60px var(--glow), 0 0 80px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

.oracle-fab:hover {
    transform: scale(1.08);
    border-color: var(--gold-dark);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 80px var(--glow),
        0 0 120px var(--glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.oracle-fab-label {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--gold-dark);
    white-space: nowrap;
    opacity: 0.6;
}

.oracle-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.oracle-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.oracle-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 92%;
    max-width: 520px;
    height: auto;
    max-height: 85vh;
    background: rgba(5, 5, 5, 0.98);
    border-radius: 28px;
    border: 1.5px solid var(--border);
    z-index: 10002;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(212, 175, 55, 0.06);
    opacity: 0;
    pointer-events: none;
}

.oracle-panel.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.oracle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
}

.oracle-header-title {
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.oracle-header-title svg {
    width: 28px;
    height: 28px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 1.5;
}

.oracle-header-sub {
    color: var(--gold-dark, #C9A96E);
    font-size: 13px;
    letter-spacing: 1.5px;
    margin-top: 4px;
    font-weight: 500;
}

.oracle-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.oracle-close:hover {
    background: rgba(252, 246, 186, 0.08);
    border-color: var(--border-hover);
    color: var(--gold);
}

.oracle-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(252, 246, 186, 0.04);
}

.oracle-tab {
    padding: 9px 16px;
    border-radius: 50px;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.5px;
}

.oracle-tab:hover {
    background: rgba(252, 246, 186, 0.06);
    border-color: var(--border-hover);
}

.oracle-tab.active {
    background: rgba(191, 161, 74, 0.12);
    border-color: rgba(191, 161, 74, 0.35);
    color: var(--gold);
}

/* AI Sommelier tab — special glow */
.oracle-tab-ai {
    background: linear-gradient(135deg, rgba(191, 161, 74, 0.04), rgba(120, 80, 200, 0.04));
    border-color: rgba(120, 80, 200, 0.15);
    position: relative;
}
.oracle-tab-ai::after {
    content: '';
    position: absolute;
    top: -1px;
    right: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7850C8;
    box-shadow: 0 0 6px rgba(120, 80, 200, 0.6);
    animation: aiDot 2s ease-in-out infinite;
}
@keyframes aiDot {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; box-shadow: 0 0 10px rgba(120, 80, 200, 0.8); }
}
.oracle-tab-ai.active {
    background: linear-gradient(135deg, rgba(191, 161, 74, 0.1), rgba(120, 80, 200, 0.08));
    border-color: rgba(120, 80, 200, 0.35);
}
.oracle-tab-ai.active::after {
    background: var(--gold);
    box-shadow: 0 0 8px var(--glow);
}

.oracle-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.oracle-heading {
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
    margin-top: 8px;
}

.oracle-subheading {
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.oracle-generate-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-dark));
    background-size: 200% auto;
    margin: 16px auto;
    cursor: pointer;
    border: none;
    width: auto;
    max-width: 320px;
    box-shadow: 0 4px 20px rgba(191, 161, 74, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.oracle-generate-btn:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 8px 40px rgba(191, 161, 74, 0.5);
    background-position: right center;
}

.oracle-generate-btn .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.oracle-generate-btn .btn-icon svg {
    width: 32px;
    height: 32px;
    stroke: #0A0A0A;
    fill: none;
    stroke-width: 1.5;
}

.oracle-generate-btn .btn-text {
    color: #0A0A0A;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    text-align: center;
}

.oracle-generate-btn .btn-sub {
    color: rgba(10, 10, 10, 0.5);
    font-size: 10px;
    letter-spacing: 1px;
}

.oracle-generate-btn.chaos {
    background: linear-gradient(135deg, rgba(191, 161, 74, 0.15), rgba(252, 246, 186, 0.08));
    border: 1px solid var(--border-hover);
    box-shadow: 0 4px 25px var(--glow);
}

.oracle-generate-btn.chaos .btn-text {
    color: var(--gold);
}

.oracle-generate-btn.chaos .btn-sub {
    color: var(--text-muted);
}

.oracle-generate-btn.chaos .btn-icon svg {
    stroke: var(--gold);
}

.oracle-generate-btn.chaos:hover {
    background: linear-gradient(135deg, rgba(191, 161, 74, 0.2), rgba(252, 246, 186, 0.12));
    box-shadow: 0 8px 40px rgba(191, 161, 74, 0.3);
}

/* Donut chart */
.oracle-donut-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 20px auto;
}

.oracle-donut-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.oracle-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.oracle-donut-center-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px;
}

.oracle-donut-center-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 1.5;
}

.oracle-donut-center-text {
    color: var(--gold);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.oracle-donut-label {
    position: absolute;
    text-align: center;
    pointer-events: none;
}

.oracle-donut-label .pct {
    font-weight: 800;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.oracle-donut-label .name {
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.oracle-result-card {
    padding: 18px;
    background: var(--bg-card);
    border-radius: 24px;
    border: 1px solid var(--border);
    margin-top: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all 0.4s;
}

.oracle-result-card:hover {
    border-color: var(--border-hover);
}

.oracle-profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(252, 246, 186, 0.04);
}

.oracle-profile-row:last-child {
    border-bottom: none;
}

.oracle-profile-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.oracle-profile-value {
    color: var(--gold-light);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

.oracle-entropy-footer {
    margin-top: 14px;
    padding: 16px;
    background: var(--bg-glass);
    border-radius: 20px;
    border: 1px solid var(--border);
    text-align: center;
}

.oracle-entropy-footer .ef-title {
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.oracle-entropy-footer .ef-source {
    color: var(--text-muted);
    font-size: 8px;
    font-family: 'Inter', monospace;
    margin-top: 4px;
}

.oracle-entropy-footer .ef-hash {
    color: var(--gold-dark);
    font-size: 7px;
    font-family: 'Inter', monospace;
    margin-top: 2px;
    opacity: 0.5;
}

.oracle-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 30px;
}

.oracle-action-btn {
    flex: 1;
    padding: 14px;
    border-radius: 60px;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.oracle-action-btn:hover {
    background: rgba(252, 246, 186, 0.08);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.oracle-action-btn.gold {
    background: rgba(191, 161, 74, 0.1);
    border-color: rgba(191, 161, 74, 0.25);
    color: var(--gold);
}

.oracle-action-btn.gold:hover {
    background: rgba(191, 161, 74, 0.18);
    box-shadow: 0 4px 20px rgba(191, 161, 74, 0.15);
}

/* Formula pyramid */
.oracle-note-layer {
    padding: 14px 18px;
    background: var(--bg-card);
    border-radius: 20px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-left: 3px solid;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all 0.3s;
}

.oracle-note-layer:hover {
    border-color: var(--border-hover);
}

.oracle-note-layer .layer-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

.oracle-note-layer .layer-notes {
    color: var(--gold-light);
    font-size: 15px;
    font-weight: 500;
}

/* Chaos card */
.oracle-chaos-card {
    padding: 24px;
    background: var(--bg-card);
    border-radius: 24px;
    margin: 14px 0;
    border: 1px solid var(--border);
    text-align: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all 0.4s;
}

.oracle-chaos-card:hover {
    border-color: var(--border-hover);
}

/* Science section */
.oracle-science {
    padding: 24px;
    background: var(--bg-card);
    border-radius: 24px;
    border: 1px solid var(--border);
    margin: 16px 0;
    text-align: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@media (max-width: 600px) {
    .oracle-fab {
        right: 16px;
        top: auto;
        bottom: 140px;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        animation: oracleGlow 3s ease-in-out infinite;
    }

    .oracle-fab svg {
        width: 24px;
        height: 24px;
    }

    .oracle-donut-container {
        width: 260px;
        height: 260px;
    }

    .oracle-body {
        padding: 16px;
    }
}

/* Block 23 (was at line 8295) */
/* ═══ MOBILE PAGES MENU ═══ */
.mob-pages-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 899;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px)
}

.mob-pages-overlay.show {
    display: block
}

.mob-pages-panel {
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, .98);
    border-top: 1px solid rgba(191, 161, 74, .2);
    border-radius: 20px 20px 0 0;
    padding: 1rem 1rem 0.5rem;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    z-index: 900;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.mob-pages-overlay.show .mob-pages-panel {
    transform: translateY(0)
}

.mob-pages-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .5rem .8rem;
    border-bottom: 1px solid rgba(252, 246, 186, .06);
    margin-bottom: .6rem;
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: var(--gold-light, #E8D5B0)
}

.mob-pages-close {
    background: none;
    border: none;
    color: var(--text-muted, #888);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 4px
}

.mob-pages-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: .75rem .8rem;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text, #e8e8e8);
    transition: background .2s
}

.mob-pages-link:active {
    background: rgba(252, 246, 186, .06)
}

.mob-pages-icon {
    font-size: 1.4rem;
    width: 36px;
    text-align: center
}

.mob-pages-name {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .2px
}

.mob-pages-desc {
    font-size: .65rem;
    color: var(--text-muted, #888);
    margin-top: 2px
}

@media(min-width:769px) {

    .mob-pages-overlay,
    .mob-pages-panel {
        display: none !important
    }
}

/* Utility classes for nav/UI elements */
.nav-gold {
    color: var(--gold);
}

.nav-green {
    color: #C9A96E;
}

.nav-cyan {
    color: var(--cyan, #00D4FF);
}

.nav-explorer {
    color: #F0C75E;
}

.nav-instagram {
    color: #E1306C;
}

.nav-icon {
    vertical-align: -2px;
    margin-right: 3px;
}

.nav-icon-only {
    vertical-align: -2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Block 24 (was at line 8742) */
#syndicate-trigger {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 900;
    color: #444;
    font-size: 0.7rem;
    text-decoration: none;
    font-family: 'Courier New', monospace;
    letter-spacing: 1.5px;
    padding: 8px 14px;
    background: rgba(10, 10, 12, 0.7);
    border: 1px solid rgba(60, 60, 60, 0.3);
    border-radius: 4px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
}

#syndicate-trigger:hover {
    color: #c9a96e;
    border-color: rgba(201, 169, 110, 0.3);
    background: rgba(10, 10, 12, 0.9);
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.08);
}

/* ── Gate Modal ── */
#syndicate-gate {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 3, 5, 0.96);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', monospace;
    animation: gateIn 0.3s ease;
}

@keyframes gateIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.gate-panel {
    background: #08080a;
    border: 1px solid #222;
    border-left: 3px solid #c9a96e;
    padding: 40px 36px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(201, 169, 110, 0.15);
    position: relative;
}

.gate-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: #444;
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.3s;
    font-family: 'Courier New', monospace;
}

.gate-close:hover {
    color: #c9a96e;
}

.gate-header {
    text-align: center;
    margin-bottom: 28px;
}

.gate-header h2 {
    color: #c9a96e;
    margin: 12px 0 0;
    font-size: 1.15rem;
    letter-spacing: 3px;
    font-weight: 600;
}

.gate-header p {
    color: #555;
    font-size: 0.68rem;
    margin-top: 6px;
    letter-spacing: 1.5px;
}

.gate-warning {
    color: #999;
    font-size: 0.8rem;
    margin-bottom: 22px;
    line-height: 1.6;
    text-align: justify;
}

.gate-warning .tag {
    color: #c9a96e;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.gate-checkbox {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    cursor: pointer;
}

.gate-checkbox input[type="checkbox"] {
    margin-top: 3px;
    margin-right: 12px;
    accent-color: #c9a96e;
    min-width: 16px;
}

.gate-checkbox span {
    color: #777;
    font-size: 0.7rem;
    line-height: 1.5;
}

.gate-error {
    color: #ff4444;
    font-size: 0.75rem;
    text-align: center;
    margin-bottom: 14px;
    display: none;
    letter-spacing: 0.5px;
}

.gate-btn {
    width: 100%;
    background: transparent;
    border: 1px solid #c9a96e;
    color: #c9a96e;
    padding: 14px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.8rem;
}

.gate-btn:hover {
    background: rgba(201, 169, 110, 0.08);
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.1);
}

.gate-btn:disabled {
    cursor: default;
    opacity: 1;
}

/* ── Progress Bar ── */
.gate-progress {
    display: none;
    margin-top: 20px;
}

.gate-progress-bar {
    width: 100%;
    height: 3px;
    background: #1a1a1a;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}

.gate-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #c9a96e, #e8d5a8);
    border-radius: 2px;
    transition: width 0.6s ease;
}

.gate-progress-text {
    color: #666;
    font-size: 0.68rem;
    text-align: left;
    letter-spacing: 0.5px;
    min-height: 16px;
}

.gate-progress-text .active {
    color: #c9a96e;
}

/* ── Authorized state ── */
.gate-authorized {
    display: none;
    text-align: center;
    padding: 30px 0 10px;
}

.gate-authorized .auth-badge {
    color: #4ade80;
    font-size: 0.85rem;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 8px;
}

.gate-authorized .auth-sub {
    color: #555;
    font-size: 0.65rem;
    letter-spacing: 1px;
}

@media (max-width: 500px) {
    .gate-panel {
        padding: 28px 20px;
        margin: 0 16px;
    }
}

/* Block 25 (was at line 8997) */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Block 26 (was at line 9013) */
/* VIX Ticker */
.vix-ticker {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 9000;
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid rgba(0, 255, 136, 0.15);
    border-radius: 10px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3)
}

.vix-ticker:hover {
    border-color: rgba(201, 169, 110, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4)
}

.vix-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px #00ff8860;
    animation: vixPulse 2s infinite
}

@keyframes vixPulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.3
    }
}

.vix-label {
    color: #888;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase
}

.vix-value {
    color: #00ff88;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.5px
}

.vix-change {
    font-size: 10px;
    font-weight: 700;
    color: #c9a96e
}

@media(max-width:768px) {
    .vix-ticker {
        bottom: 8px;
        left: 8px;
        right: auto;
        padding: 8px 12px
    }

    .vix-value {
        font-size: 14px
    }
}

/* Anomaly Toast */
.anomaly-toast {
    position: fixed;
    top: 80px;
    right: 16px;
    z-index: 9500;
    background: linear-gradient(135deg, rgba(10, 10, 15, 0.98), rgba(20, 20, 30, 0.98));
    border: 1px solid rgba(0, 255, 136, 0.25);
    border-radius: 10px;
    padding: 14px 18px;
    max-width: 340px;
    font-family: Inter, 'Segoe UI', system-ui, sans-serif;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 136, 0.05);
    transform: translateX(120%);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer
}

.anomaly-toast.show {
    transform: translateX(0)
}

.anomaly-toast-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px
}

.anomaly-toast-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px #00ff8860;
    animation: vixPulse 1.5s infinite
}

.anomaly-toast-tag {
    color: #00ff88;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase
}

.anomaly-toast-close {
    margin-left: auto;
    color: #555;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px
}

.anomaly-toast-body {
    color: #d0d0d0;
    font-size: 12px;
    line-height: 1.5
}

.anomaly-toast-body strong {
    color: #c9a96e
}

.anomaly-toast-spread {
    color: #00ff88;
    font-size: 20px;
    font-weight: 900;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    margin-top: 4px
}

.anomaly-toast-cta {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-decoration: none;
    background: linear-gradient(135deg, #c9a96e, #a8884e);
    color: #0a0a0f;
    text-transform: uppercase;
    transition: transform 0.2s
}

.anomaly-toast-cta:hover {
    transform: scale(1.05)
}

@media(max-width:768px) {
    .anomaly-toast {
        right: 8px;
        left: 8px;
        max-width: none
    }
}

/* ═══ Arbitrage CTA Card — Premium Glassmorphism ═══ */
.arb-cta-card {
    position: relative;
    max-width: 800px;
    margin: 2rem auto;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(8, 8, 14, 0.92), rgba(16, 18, 28, 0.88));
    border: 1px solid rgba(0, 255, 136, 0.18);
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 24px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.4s cubic-bezier(.16, 1, .3, 1);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 255, 136, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    will-change: transform, opacity;
    transform: translateZ(0)
}

.arb-cta-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 19px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(201, 169, 110, 0.2), rgba(0, 255, 136, 0.1));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s
}

.arb-cta-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.06) 0%, transparent 60%);
    pointer-events: none;
    animation: arbGlow 4s ease-in-out infinite
}

@keyframes arbGlow {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1)
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1)
    }
}

.arb-cta-card:hover {
    border-color: rgba(0, 255, 136, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(0, 255, 136, 0.1), 0 0 120px rgba(0, 255, 136, 0.04)
}

.arb-cta-card:hover::before {
    opacity: 1
}

.arb-cta-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.04));
    border: 1px solid rgba(0, 255, 136, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all 0.4s
}

.arb-cta-card:hover .arb-cta-icon {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.06));
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.15)
}

.arb-cta-live {
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(0, 255, 136, 0.4);
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #00ff88;
    text-transform: uppercase
}

.arb-cta-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 6px #00ff8880;
    animation: arbPulse 1.5s infinite
}

@keyframes arbPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 6px #00ff8880
    }

    50% {
        opacity: 0.5;
        box-shadow: 0 0 12px #00ff88
    }
}

.arb-cta-text h3 {
    color: #e8d5b0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-family: 'Cormorant Garamond', Georgia, serif
}

.arb-cta-text h3 .arb-spread {
    color: #00ff88;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 13px;
    margin-left: 8px
}

.arb-cta-text p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 1.6
}

.arb-cta-signals {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(0, 255, 136, 0.7);
    letter-spacing: 1px
}

.arb-cta-signals-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #00ff88
}

.arb-cta-arrow {
    margin-left: auto;
    color: #c9a96e;
    font-size: 22px;
    flex-shrink: 0;
    transition: transform 0.3s;
    opacity: 0.7
}

.arb-cta-card:hover .arb-cta-arrow {
    transform: translateX(4px);
    opacity: 1;
    color: #00ff88
}

@media(max-width:768px) {
    .arb-cta-card {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 24px;
        margin: 2rem 1rem
    }

    .arb-cta-arrow {
        display: none
    }

    .arb-cta-icon {
        margin: 0 auto
    }
}

/* Block 27 (was at line 9172) */
/* ═══ HOMEPAGE FAB DEDUPLICATION — Single Source of Truth ═══
 * Homepage has TWO dedicated FAB systems:
 *   Desktop: NIMBUS Command Center (#nimbusCommandCenter)
 *   Mobile:  Unified FAB (#uniFab)
 * Everything else (global-ui.js, old FABs) must be hidden. */

/* Hide old inline FABs everywhere */
.oracle-fab,
.enc-fab {
    display: none !important;
}

/* Hide ALL global-ui.js injected elements on homepage */
#feat-fab,
#b2b-fab,
#theme-toggle,
#theme-toggle-left {
    display: none !important;
}

/* ══ Fix overlapping bottom-right buttons ══ */
.nimbus-command-center {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000
}

.app-float-banner {
    bottom: 80px !important
}

/* Desktop: show NIMBUS Command Center, hide unified FAB */
@media (min-width: 769px) {

    #uniFab,
    #uniFabMenu,
    #uniFabBackdrop {
        display: none !important;
    }
}

/* Mobile: show unified FAB, hide NIMBUS Command Center */
@media (max-width: 768px) {
    .nimbus-command-center {
        display: none !important;
    }
}

/* Block 28 (was at line 9204) */
/* ═══ EL BLINDAJE DEL CARRUSEL LETAL ═══ */
.carrusel-letal {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    min-height: 180px; /* CLS: reserve space before carousel cards load */
    contain: layout style; /* Isolate V12 layout from rest of page — NO paint (blocks scroll) */
}

.carrusel-letal::-webkit-scrollbar {
    display: none !important;
}

.carrusel-letal {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* LA REGLA DE LA MUERTE: Las tarjetas JAMÁS se encogen */
.carrusel-letal>div,
.carrusel-letal>article,
.carrusel-letal>a,
.carrusel-letal>span {
    flex-shrink: 0 !important;
}

/* ═══ THE OBSIDIAN CIRCLE — Corporate Financial Styles ═══ */

/* Sparkline mini-charts in Mercados sidebar */
.obsidian-sparkline {
    display: block;
    flex-shrink: 0;
}

/* Corporate indicator dot */
.obsidian-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

/* Mercados item layout: enhanced for sparklines */
.mercados-item.obsidian-corp,
.mercados-item.obsidian-composite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: background .2s;
}
.mercados-item.obsidian-corp:hover,
.mercados-item.obsidian-composite:hover {
    background: rgba(201, 169, 110, .04);
}

.mercados-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.mercados-fullname {
    font-size: .55rem;
    color: rgba(255,255,255,.3);
    letter-spacing: .5px;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
}

.mercados-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Composite index highlight */
.mercados-item.obsidian-composite {
    border-top: 1px solid rgba(201, 169, 110, .15);
    margin-top: 4px;
    padding-top: 10px;
}
.obsidian-composite .mercados-name {
    color: #C9A96E !important;
    font-weight: 700;
}

/* Price flash animation */
@keyframes obsidianFlash {
    0% { text-shadow: 0 0 8px rgba(0, 255, 136, .6); }
    100% { text-shadow: none; }
}
.obsidian-flash {
    animation: obsidianFlash .6s ease-out;
}

/* Corporate tickers in V12 bar */
.ticker-item.ticker-corp .ticker-symbol {
    font-weight: 800;
    letter-spacing: 1px;
}
.ticker-price {
    font-weight: 700;
    font-size: .7rem;
    color: rgba(255, 255, 255, .9);
    margin: 0 3px;
}

/* Chart change badge — directional colors */
.chart-change-badge.up {
    color: #00ff88;
    background: rgba(0, 255, 136, .12);
}
.chart-change-badge.down {
    color: #ff4444;
    background: rgba(255, 68, 68, .12);
}

/* Obsidian timestamp in header */
.obsidian-time {
    font-size: .55rem;
    color: rgba(255, 255, 255, .3);
    margin-left: 8px;
    font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════
   ASIMETRÍA LETAL v18 — Features Grid Editorial + Sci-Enc Hero
   Old Money aesthetic: dark library editorial, numbered ghost labels,
   staggered hero masonry. No neon. Gold only.
═══════════════════════════════════════════════════════════════ */

/* ── Features Grid: counter numbering ── */
.features-grid .feature-card {
    counter-increment: feat;
}

/* Ghost number stamps — 5.5rem Playfair at 5% gold opacity */
.features-grid .feature-card::after {
    content: "0" counter(feat);
    position: absolute;
    bottom: .4rem;
    right: 1rem;
    font-family: 'Playfair Display', serif;
    font-size: 5.5rem;
    font-weight: 900;
    color: rgba(201, 169, 110, .055);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    letter-spacing: -3px;
    background: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    border-radius: 0;
}

/* ── HERO CARD: Bibliothèque (card 1) — 2 columns × 2 rows ── */
.features-grid .feature-card:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background-image:
        linear-gradient(180deg,
            rgba(5, 3, 3, .1) 0%,
            rgba(5, 3, 3, .45) 50%,
            rgba(5, 3, 3, .95) 100%),
        url('/img/pillars/card-biblioteca.png');
    background-size: cover;
    background-position: center top;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.8rem;
    border: 1px solid rgba(201, 169, 110, .15);
}

/* Hide icon in hero — the image speaks */
.features-grid .feature-card:nth-child(1) .feature-icon-wrap {
    display: none;
}

.features-grid .feature-card:nth-child(1) h3 {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    color: #F0E6C8;
    margin-bottom: .9rem;
    position: relative;
    z-index: 1;
}

.features-grid .feature-card:nth-child(1) p {
    font-size: .9rem;
    color: rgba(240, 230, 200, .65);
    max-width: 500px;
    position: relative;
    z-index: 1;
    line-height: 1.7;
}

/* Hero ghost number — larger, different positioning */
.features-grid .feature-card:nth-child(1)::after {
    font-size: 12rem;
    color: rgba(201, 169, 110, .04);
    bottom: 1.5rem;
    right: 2rem;
}

/* ── Card 8: La Cava — spans 2 columns for visual balance ── */
.features-grid .feature-card:nth-child(8) {
    grid-column: span 2;
}

/* ── Old Money left-accent bars (cards 2-8) ── */
.features-grid .feature-card:nth-child(2) { border-left: 2px solid rgba(184, 135, 10, .4); }
.features-grid .feature-card:nth-child(3) { border-left: 2px solid rgba(139, 34, 82, .4); }
.features-grid .feature-card:nth-child(4) { border-left: 2px solid rgba(74, 124, 89, .4); }
.features-grid .feature-card:nth-child(5) { border-left: 2px solid rgba(184, 115, 10, .4); }
.features-grid .feature-card:nth-child(6) { border-left: 2px solid rgba(100, 70, 140, .4); }
.features-grid .feature-card:nth-child(7) { border-left: 2px solid rgba(160, 40, 40, .4); }
.features-grid .feature-card:nth-child(8) { border-left: 2px solid rgba(201, 169, 110, .35); }

/* ── Responsive: features grid ── */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-rows: 240px 240px auto auto;
    }
}

@media (max-width: 768px) {
    .features-grid .feature-card:nth-child(1),
    .features-grid .feature-card:nth-child(8) {
        grid-column: 1;
        grid-row: auto;
    }
    .features-grid .feature-card:nth-child(1) h3 {
        font-size: 1.5rem;
    }
    .features-grid .feature-card:nth-child(1)::after {
        font-size: 6rem;
    }
}

/* ═══ Sci-Enc Portals: Mol as full-height left hero ═══ */

/* Hero mol portal: span all 3 right rows on the left 60% */
.sci-portal.mol {
    grid-row: span 3;
    background-image:
        linear-gradient(180deg,
            rgba(5, 3, 3, .25) 0%,
            rgba(5, 3, 3, .5) 55%,
            rgba(5, 3, 3, .95) 100%),
        url('/img/pillars/card-laboratoire-v.png.png');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 580px;
    padding: 2.5rem;
}

/* Ensure content is above the image overlay */
.sci-portal.mol .sci-portal-header,
.sci-portal.mol .sci-portal-desc,
.sci-portal.mol .sci-search-wrap,
.sci-portal.mol .sci-chips,
.sci-portal.mol .sci-results,
.sci-portal.mol .sci-load-more,
.sci-portal.mol .sci-portal-link {
    position: relative;
    z-index: 2;
}

/* Old Money accents for right-column portals */
.sci-portal.rec { border-left: 3px solid rgba(139, 34, 82, .5); }
.sci-portal.ifr { border-left: 3px solid rgba(184, 115, 10, .45); }
.sci-portal.raw { border-left: 3px solid rgba(74, 124, 89, .5); }

/* Mol portal title gets bigger in full-height layout */
.sci-portal.mol .sci-portal-info h3 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

/* ── Responsive: sci-enc mol ── */
@media (max-width: 960px) {
    .sci-portal.mol {
        grid-row: auto;
        min-height: 360px;
    }
    .sci-portal.rec,
    .sci-portal.ifr,
    .sci-portal.raw {
        border-left: none;
        border-top: 3px solid rgba(255, 255, 255, .06);
    }
}

/* ── HTML section padding: Ramiel goes full-bleed ── */
#ramiel-promo {
    padding: 0 !important;
    position: relative;
    z-index: 2;
}


/* ══════════════════════════════════════════════════════════
   LUX LOADER — Cartier-style logo reveal
   Phases: logo in → hairline grows → wordmark fades in
   Dismiss: opacity 0 → removed from DOM by inline JS
   ══════════════════════════════════════════════════════════ */
#lux-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    will-change: opacity;
    /* Smooth exit when .lux-loader--out is applied */
    transition: opacity .75s cubic-bezier(.4, 0, .2, 1),
                visibility .75s cubic-bezier(.4, 0, .2, 1);
    visibility: visible;
    opacity: 1;
}

#lux-loader.lux-loader--out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.lux-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    /* Phase 1: entire block fades up into view */
    animation: luxRevealBlock .85s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes luxRevealBlock {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)  scale(1); }
}

.lux-loader-logo-wrap {
    position: relative;
    width: 90px;
    height: 90px;
}

.lux-loader-logo {
    width: 90px;
    height: 90px;
    object-fit: contain;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    /* Subtle breathing glow */
    animation: luxLogoBreathe 2.2s ease-in-out infinite;
}

@keyframes luxLogoBreathe {
    0%, 100% { filter: brightness(.9) drop-shadow(0 0 12px rgba(201,169,110,.2)); }
    50%       { filter: brightness(1)  drop-shadow(0 0 24px rgba(201,169,110,.45)); }
}

/* Phase 2: thin gold vertical hairline grows downward */
.lux-loader-hairline {
    width: 1px;
    height: 0;
    background: linear-gradient(to bottom,
        transparent,
        rgba(201, 169, 110, .7) 35%,
        rgba(201, 169, 110, .4) 75%,
        transparent);
    margin: 1.1rem auto;
    animation: luxHairlineGrow .65s .38s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes luxHairlineGrow {
    to { height: 44px; }
}

/* Phase 3: wordmark fades in last */
.lux-loader-wordmark {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: .58rem;
    font-weight: 400;
    letter-spacing: 7px;
    color: rgba(201, 169, 110, .72);
    text-transform: uppercase;
    opacity: 0;
    animation: luxWordmark .55s .65s ease forwards;
}

@keyframes luxWordmark {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Belt-and-suspenders: hide entirely if prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    #lux-loader { display: none !important; }
}


/* ══════════════════════════════════════════════════════════
   PILLAR FILM STRIP — Cinematic 100vw carousel
   Design references: Gucci editorial, Hermès caption system
   ══════════════════════════════════════════════════════════ */

/* Section-level: clip horizontal overflow */
#knowledge-pillars {
    overflow-x: clip;
}

/* Film Strip wrapper */
.pillar-filmstrip {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #050505;
    border-top: 1px solid rgba(201, 169, 110, .12);
    border-bottom: 1px solid rgba(201, 169, 110, .08);
}

/* Slide track */
.fs-track {
    display: flex;
    will-change: transform;
    transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}

/* Individual slide */
.fs-slide {
    position: relative;
    width: 100%;
    height: 72dvh;
    min-height: 460px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}

.fs-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    transform: scale(1.02);
    transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}

.fs-slide:hover > img,
.fs-slide:hover .fs-rotator { transform: scale(1.06); }

/* ── ROTATOR LOGIC ── */
.fs-rotator { position: absolute; inset: 0; }
.fs-rotator img.rot-img {
    position: absolute; inset: 0; opacity: 0;
    animation: fsRotatorFade 24s ease-in-out infinite;
}
.fs-rotator img.rot1 { animation-delay: 0s; }
.fs-rotator img.rot2 { animation-delay: 8s; }
.fs-rotator img.rot3 { animation-delay: 16s; }

@keyframes fsRotatorFade {
    0%    { opacity: 0; }
    5%    { opacity: 1; }
    33%   { opacity: 1; }
    38%   { opacity: 0; }
    100%  { opacity: 0; }
}

/* Cinematic gradient overlay */
.fs-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(5,5,5,.92) 0%,
        rgba(5,5,5,.55) 25%,
        rgba(5,5,5,.12) 50%,
        transparent 70%
    );
    pointer-events: none;
}

/* Caption block: Hermès editorial anatomy */
.fs-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 5rem 2.8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s .1s ease, transform .5s .1s ease;
}

.fs-slide.fs-active .fs-caption {
    opacity: 1;
    transform: translateY(0);
}

/* First slide is active by default until JS runs */
.fs-track .fs-slide:first-child .fs-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Caption icon */
.fs-cap-icon { opacity: .75; margin-bottom: .15rem; }

/* Gold hairline */
.fs-cap-rule {
    width: 38px;
    height: 1px;
    background: linear-gradient(to right, rgba(201,169,110,.9), rgba(201,169,110,.2));
    margin-bottom: .1rem;
}

/* Small-caps label */
.fs-cap-label {
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(201, 169, 110, .8);
    font-family: 'Inter', sans-serif;
}

/* Hermès italic description */
.fs-cap-desc {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    font-weight: 400;
    color: rgba(255, 255, 255, .93);
    line-height: 1.25;
    margin-top: .05rem;
}

/* Explore CTA */
.fs-cap-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: rgba(201, 169, 110, .65);
    text-decoration: none;
    margin-top: .55rem;
    transition: color .25s, gap .25s;
}

.fs-cap-cta:hover { color: rgba(201, 169, 110, 1); gap: 12px; }
.fs-cap-cta svg { flex-shrink: 0; transition: transform .25s; }
.fs-cap-cta:hover svg { transform: translateX(3px); }

/* Ghost number — editorial magazine feel */
.fs-ghost-num {
    position: absolute;
    bottom: 1.5rem;
    right: 4rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(5rem, 9vw, 8.5rem);
    font-weight: 900;
    color: rgba(201, 169, 110, .06);
    line-height: 1;
    letter-spacing: -4px;
    pointer-events: none;
    user-select: none;
    transition: color .5s;
}

.fs-slide:hover .fs-ghost-num { color: rgba(201, 169, 110, .1); }

/* Slide counter */
.fs-counter {
    position: absolute;
    top: 1.6rem;
    right: 2rem;
    z-index: 10;
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-size: .65rem;
    color: rgba(201, 169, 110, .4);
    letter-spacing: 1px;
}

.fs-cur {
    font-family: 'Playfair Display', serif;
    font-size: .92rem;
    color: rgba(201, 169, 110, .85);
    font-weight: 600;
    transition: color .3s;
}

.fs-sep { opacity: .4; margin: 0 1px; }
.fs-tot { opacity: .5; font-size: .58rem; }

/* Navigation arrows */
.fs-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(5, 5, 5, .45);
    border: 1px solid rgba(201, 169, 110, .2);
    color: rgba(201, 169, 110, .75);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, border-color .25s, color .25s, transform .25s;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.fs-btn:hover {
    background: rgba(201, 169, 110, .15);
    border-color: rgba(201, 169, 110, .5);
    color: #C9A96E;
    transform: translateY(-50%) scale(1.08);
}

.fs-prev { left: 2rem; }
.fs-next { right: 2rem; }

/* Dot indicators */
.fs-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(201, 169, 110, .25);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .3s, width .3s;
    outline: none;
}

.fs-dot--on {
    width: 26px;
    background: rgba(201, 169, 110, .85);
}

.fs-dot:focus-visible {
    outline: 2px solid rgba(201, 169, 110, .6);
    outline-offset: 3px;
}

/* Mobile */
@media (max-width: 768px) {
    .fs-slide { height: 58vh; min-height: 380px; }
    .fs-caption { padding: 0 1.5rem 2rem; }
    .fs-cap-desc { font-size: 1.05rem; }
    .fs-ghost-num { font-size: 4rem; right: 1.5rem; bottom: 1.2rem; }
    .fs-btn { width: 40px; height: 40px; }
    .fs-prev { left: .75rem; }
    .fs-next { right: .75rem; }
    .fs-counter { right: 1rem; top: 1rem; }
}

@media (max-width: 480px) {
    .fs-slide { height: 50vh; min-height: 300px; }
    .fs-caption { padding: 0 1rem 1.5rem; }
    .fs-cap-desc { font-size: .95rem; }
    .fs-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fs-track { transition: none; }
    .fs-slide img { transition: none; transform: scale(1); }
    .fs-caption { transition: none; opacity: 1; transform: none; }
}
/* ── ADLAN carousel card overrides ── */
#adlanCarousel .adlan-bv-card,
#adlanCarousel .adlan-bv-card:link,
#adlanCarousel .adlan-bv-card:visited,
#adlanCarousel .adlan-bv-card:hover,
#adlanCarousel .adlan-bv-card:active,
.adlan-bv-card,
.adlan-bv-card:link,
.adlan-bv-card:visited,
.adlan-bv-card:hover,
.adlan-bv-card:active {
    color: #E8E8E8 !important;
    text-decoration: none !important;
    background: rgba(20, 14, 8, .85) !important;
    border: 1px solid rgba(205, 133, 63, .1) !important;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    outline: none;
    cursor: pointer;
    transition: transform .5s cubic-bezier(.23, 1, .32, 1), box-shadow .5s, border-color .4s;
    flex: 0 0 180px;
    min-height: 260px;
}

.adlan-bv-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(205, 133, 63, .3) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 20px rgba(205, 133, 63, .12) !important;
}

.adlan-bv-card .bv-card-brand {
    color: rgba(205, 133, 63, .6) !important;
    font-size: .65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.adlan-bv-card .bv-card-name {
    color: #E8E8E8 !important;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 8px;
    font-size: .85rem;
}

.adlan-card-price {
    color: #cd853f; font-size: .78rem; font-weight: 700; margin-top: 2px;
}

.adlan-card-cta {
    background: linear-gradient(135deg, rgba(205, 133, 63, .15), rgba(205, 133, 63, .05)) !important;
    border: 1px solid rgba(205, 133, 63, .25) !important;
    color: #cd853f !important;
    font-size: .65rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    text-align: center; padding: 8px 0; border-radius: 6px; margin-top: auto;
    transition: all .3s; position: relative; overflow: hidden;
}

.adlan-card-cta:hover {
    background: linear-gradient(135deg, rgba(205, 133, 63, .3), rgba(205, 133, 63, .14)) !important;
    border-color: rgba(205, 133, 63, .5) !important;
    box-shadow: 0 0 18px rgba(205, 133, 63, .3), inset 0 0 10px rgba(227, 188, 154, .08) !important;
    color: #e3bc9a !important;
}

.adlan-card-cta::after {
    content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(227, 188, 154, .55), transparent);
    transform: skewX(-18deg); transition: left .55s cubic-bezier(.23, 1, .32, 1); pointer-events: none;
}
.adlan-card-cta:hover::after { left: 140%; }

.adlan-bv-card::before {
    content: ''; display: block; height: 3px; width: 100%;
    background: linear-gradient(90deg, transparent, #CD853F, #E3BC9A, #CD853F, transparent) !important;
}

#adlanCarousel a, #adlanCarousel a:link, #adlanCarousel a:visited, #adlanCarousel a:active,
#adlanCarousel a *, #adlan-promo a, #adlan-promo a:link, #adlan-promo a:visited, #adlan-promo a * {
    color: inherit !important; text-decoration: none !important;
}

@media(max-width:600px) {
    .adlan-bv-card { flex: 0 0 155px !important; min-height: 230px !important; }
}
.adlan-bv-card .bv-card-img img {
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(205,133,63,.15));
}
.adlan-bv-card:hover .bv-card-img img {
    filter: drop-shadow(0 16px 36px rgba(0,0,0,.7)) drop-shadow(0 0 20px rgba(205,133,63,.4));
}
/* ── ADLAN PROMO LAYOUT (INVERTED ECI) ── */
#adlan-promo::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(205, 133, 63, .06) 0%, transparent 60%); pointer-events: none;
}

.adlan-inner {
    display: grid;
    grid-template-columns: 55% 45%;
    max-width: 100%;
    margin: 0;
    min-height: 660px;
    position: relative;
    background: linear-gradient(160deg, rgba(12, 8, 4, 1) 0%, rgba(18, 12, 6, 1) 100%);
}

.adlan-card {
    padding: 5rem 3.5rem 5rem 4rem;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 80px 0 180px rgba(0,0,0,.9);
    border-right: 1px solid rgba(205,133,63,.2);
    text-align: left;
}

.adlan-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0; height: 40%;
    background: radial-gradient(ellipse at 70% 0%, rgba(205, 133, 63, .06), transparent 70%);
    pointer-events: none;
}

.adlan-visual {
    position: relative;
    background: url('/img/editorial-adlan.png') center / cover no-repeat;
    overflow: hidden;
}

.adlan-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(0,0,0,.05) 0%, rgba(12, 8, 4, .4) 60%, rgba(12, 8, 4, .95) 100%);
}

@media (max-width: 900px) {
    .adlan-inner { display: flex; flex-direction: column-reverse; min-height: auto; }
    .adlan-visual { min-height: 300px; width: 100%; }
    .adlan-card { padding: 3rem 2rem; text-align: center; border-right: none; border-top: 1px solid rgba(205,133,63,.2); box-shadow: 0 -40px 100px rgba(0,0,0,.9); }
}

.adlan-us-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 50px;
    background: rgba(205, 133, 63, .08); border: 1px solid rgba(205, 133, 63, .2); color: #cd853f;
    font-size: .6rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 1.5rem; width: fit-content;
}

.adlan-promo-title {
    font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: #F0E6C8; margin-bottom: 1rem;
    letter-spacing: -.5px; line-height: 1.1; padding-right: 1.5rem; border-right: 4px solid #cd853f;
}
.adlan-promo-title em {
    background: linear-gradient(135deg, #cd853f 30%, #e3bc9a 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal;
}

.adlan-promo-sub {
    color: rgba(255, 255, 255, .5); font-size: .92rem; max-width: 520px; margin: 0 0 2rem; line-height: 1.7;
}
.adlan-hl { color: #cd853f; font-weight: 700; text-decoration: none; }

.adlan-stats { display: flex; justify-content: flex-start; gap: 3rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.adlan-stat-num { font-family: 'Playfair Display', serif; font-size: 2rem; color: #cd853f; font-weight: 700; display: block; line-height: 1; }
.adlan-stat-lbl { font-size: .6rem; color: rgba(255, 255, 255, .3); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; display: block; }
@media (max-width: 900px) {
    .adlan-stats { justify-content: center; }
    .adlan-promo-title { border-right: none; padding-right: 0; }
    .adlan-us-badge { margin-left: auto; margin-right: auto; }
}

.adlan-carousel-wrap { position: relative; margin: 0 -1rem 2.5rem; overflow: visible; }
.adlan-carousel { display: flex; gap: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 1rem .5rem; will-change: auto; contain: layout style; }
.adlan-carousel::-webkit-scrollbar { display: none; }
.adlan-carousel .bv-card { flex: 0 0 200px; flex-shrink: 0; min-height: 280px; }

.adlan-brands { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; margin-bottom: 2rem; }
.adlan-brand-tag { padding: 4px 14px; border-radius: 20px; background: rgba(205, 133, 63, .05); border: 1px solid rgba(205, 133, 63, .12); color: rgba(255, 255, 255, .45); font-size: .65rem; letter-spacing: .5px; transition: all .3s; }
.adlan-brand-tag:hover { background: rgba(205, 133, 63, .12); border-color: rgba(205, 133, 63, .25); color: #cd853f; }
@media (max-width: 900px) { .adlan-brands { justify-content: center; } }

.adlan-main-cta {
    display: inline-flex; align-items: center; gap: 10px; padding: 16px 44px; border-radius: 50px; background: linear-gradient(135deg, #A46A32, #CD853F); color: #0a0a0a; font-weight: 800; font-size: .9rem; text-decoration: none; letter-spacing: .5px; box-shadow: 0 6px 30px rgba(205, 133, 63, .3); transition: all .3s; width: fit-content;
}
.adlan-main-cta:hover { transform: translateY(-3px); box-shadow: 0 10px 45px rgba(205, 133, 63, .45); background: linear-gradient(135deg, #b0753a, #e8a25c); }
@media (max-width: 900px) { .adlan-main-cta { margin: 0 auto; } }

.adlan-powered { margin-top: 1.2rem; font-size: .6rem; color: rgba(255, 255, 255, .2); letter-spacing: .5px; }

/* ── COMAS PROMO LAYOUT (INVERTED ECI) ── */
#comas-promo::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(212, 175, 55, .06) 0%, transparent 60%); pointer-events: none;
}

.comas-inner {
    display: grid;
    grid-template-columns: 55% 45%;
    max-width: 100%;
    margin: 0;
    min-height: 660px;
    position: relative;
    background: linear-gradient(160deg, rgba(8, 6, 2, 1) 0%, rgba(12, 8, 4, 1) 100%);
}

.comas-card {
    padding: 5rem 3.5rem 5rem 4rem;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 80px 0 180px rgba(0,0,0,.9);
    border-right: 1px solid rgba(212,175,55,.2);
    text-align: left;
}

.comas-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0; height: 40%;
    background: radial-gradient(ellipse at 70% 0%, rgba(212, 175, 55, .06), transparent 70%);
    pointer-events: none;
}

.comas-visual {
    position: relative;
    background: url('/img/editorial-comas.png') center / cover no-repeat;
    overflow: hidden;
}

.comas-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(0,0,0,.05) 0%, rgba(8, 6, 2, .4) 60%, rgba(8, 6, 2, .95) 100%);
}

@media (max-width: 900px) {
    .comas-inner { display: flex; flex-direction: column-reverse; min-height: auto; }
    .comas-visual { min-height: 300px; width: 100%; }
    .comas-card { padding: 3rem 2rem; text-align: center; border-right: none; border-top: 1px solid rgba(212,175,55,.2); box-shadow: 0 -40px 100px rgba(0,0,0,.9); }
}

.comas-us-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 50px;
    background: rgba(212, 175, 55, .08); border: 1px solid rgba(212, 175, 55, .2); color: #d4af37;
    font-size: .6rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1.5rem; width: fit-content;
}

.comas-promo-title {
    font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: #F8F4E6; margin-bottom: 1rem;
    letter-spacing: -.5px; line-height: 1.1; padding-right: 1.5rem; border-right: 4px solid #d4af37;
}
.comas-promo-title em {
    background: linear-gradient(135deg, #d4af37 30%, #e8ca68 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal;
}

.comas-promo-sub {
    color: rgba(255, 255, 255, .5); font-size: .92rem; max-width: 520px; margin: 0 0 2rem; line-height: 1.7;
}
.comas-hl { color: #d4af37; font-weight: 700; text-decoration: none; }

.comas-stats { display: flex; justify-content: flex-start; gap: 3rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.comas-stat-num { font-family: 'Playfair Display', serif; font-size: 2rem; color: #d4af37; font-weight: 700; display: block; line-height: 1; }
.comas-stat-lbl { font-size: .6rem; color: rgba(255, 255, 255, .3); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; display: block; }
@media (max-width: 900px) {
    .comas-stats { justify-content: center; }
    .comas-promo-title { border-right: none; padding-right: 0; }
    .comas-us-badge { margin-left: auto; margin-right: auto; }
}

.comas-carousel-wrap { position: relative; margin: 0 -1rem 2.5rem; overflow: visible; }
.comas-carousel { display: flex; gap: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 1rem .5rem; will-change: auto; contain: layout style; }
.comas-carousel::-webkit-scrollbar { display: none; }

.comas-brands { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; margin-bottom: 2rem; }
.comas-brand-tag { padding: 4px 14px; border-radius: 20px; background: rgba(212, 175, 55, .05); border: 1px solid rgba(212, 175, 55, .12); color: rgba(255, 255, 255, .45); font-size: .65rem; letter-spacing: .5px; transition: all .3s; }
.comas-brand-tag:hover { background: rgba(212, 175, 55, .12); border-color: rgba(212, 175, 55, .25); color: #d4af37; }
@media (max-width: 900px) { .comas-brands { justify-content: center; } }

.comas-main-cta {
    display: inline-flex; align-items: center; gap: 10px; padding: 16px 44px; border-radius: 50px; background: linear-gradient(135deg, #A88624, #D4AF37); color: #0a0a0a; font-weight: 800; font-size: .9rem; text-decoration: none; letter-spacing: .5px; box-shadow: 0 6px 30px rgba(212, 175, 55, .3); transition: all .3s; width: fit-content;
}
.comas-main-cta:hover { transform: translateY(-3px); box-shadow: 0 10px 45px rgba(212, 175, 55, .45); background: linear-gradient(135deg, #bd9829, #e8ca68); }
@media (max-width: 900px) { .comas-main-cta { margin: 0 auto; } }

.comas-powered { margin-top: 1.2rem; font-size: .6rem; color: rgba(255, 255, 255, .2); letter-spacing: .5px; }


/* --- MOSSAD / POSEIDÓN BLACK OPS BACKGROUND WRAPPER --- */
.intel-black-ops-wrapper {
    position: relative;
    width: 100%;
    padding-top: 6rem;
    padding-bottom: 2rem;
    overflow: hidden;
    background-color: #030303; /* Base backup fallback */
}
.intel-black-ops-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0; 
    background-image: url('../img/intel-spy-bg.png');
    background-size: 100vw auto;
    background-position: top center;
    background-repeat: no-repeat;
    opacity: 0.15;
    mix-blend-mode: screen;
}
/* Ensure the inner panels stay visually on top */
.intel-black-ops-wrapper > section {
    position: relative;
    z-index: 2;
}


/* ═══ ATELIER & KNOWLEDGE PILLARS WRAPPER ═══ */
.atelier-pillars-wrapper {
    position: relative;
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    overflow: hidden;
    background-color: #050505; /* Base backup fallback */
}
.atelier-pillars-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0; 
    background-image: url('../img/atelier-pillars-bg.png');
    background-size: 100vw auto;
    background-position: top center;
    background-repeat: no-repeat;
    opacity: 0.15;
    mix-blend-mode: screen;
}
/* Ensure the inner panels stay visually on top */
.atelier-pillars-wrapper > section {
    position: relative;
    z-index: 2;
}

/* ═══ COMMUNITY & FEATURES WRAPPER ═══ */
.community-features-wrapper {
    position: relative;
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    overflow: hidden;
    background-color: #030303; /* Base backup fallback */
}
.community-features-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0; 
    background-image: url('../img/community-features-bg.png');
    background-size: 100vw auto;
    background-position: top center;
    background-repeat: no-repeat;
    opacity: 0.15;
    mix-blend-mode: screen;
}
/* Ensure the inner panels stay visually on top */
.community-features-wrapper > section {
    position: relative;
    z-index: 2;
}

/* ── ROTATOR LOGIC ── */
.fs-rotator { position: absolute; inset: 0; }
.fs-rotator img.rot-img {
    position: absolute; inset: 0; opacity: 0; pointer-events: none;
    animation: fsRotatorFade 24s ease-in-out infinite;
    transform: none !important; transition: none !important;
}
.fs-rotator img.rot1 { animation-delay: 0s; }
.fs-rotator img.rot2 { animation-delay: 8s; }
.fs-rotator img.rot3 { animation-delay: 16s; }

@keyframes fsRotatorFade {
    0%    { opacity: 0; }
    5%    { opacity: 1; }
    33%   { opacity: 1; }
    38%   { opacity: 0; }
    100%  { opacity: 0; }
}

.fs-rotator {
    transform: scale(1.02);
    transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}
.fs-slide:hover .fs-rotator {
    transform: scale(1.06);
}

/* Pillar Rotator CSS */
.pillar-rotator {
    position: relative;
    width: 100%;
    height: 100%;
}
.pillar-rotator img.pillar-rot-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    animation: fsRotatorFade 24s ease-in-out infinite;
}
.pillar-rotator img.rot1 { animation-delay: 0s; }
.pillar-rotator img.rot2 { animation-delay: 8s; }
.pillar-rotator img.rot3 { animation-delay: 16s; }