/*
 * Top Block - Modern Glassmorphism Override
 * v13.3 - lighter glass, less heavy
 */

/* --- DARK OVERLAY (lighter) --- */
.top-block .bg-image::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(135deg, rgba(10,18,26,.3) 0%, rgba(10,18,26,.1) 35%, transparent 55%),
        linear-gradient(0deg, rgba(10,18,26,.2) 0%, transparent 25%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.top-block .container {
    position: relative !important;
    z-index: 2 !important;
}

/* --- GLASS CARD (lighter) --- */
div.top-block .caption,
.top-block .in .caption {
    position: relative !important;
    z-index: 2 !important;
    background: rgba(10,18,26,.06) !important;
    backdrop-filter: blur(14px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    padding: 28px 32px 24px !important;
    overflow: hidden !important;
}

div.top-block .caption > * {
    position: relative !important;
    z-index: 4 !important;
}

/* Outer glow breathing */
div.top-block .caption {
    animation: tbOuterGlow 6s ease-in-out infinite !important;
}
@keyframes tbOuterGlow {
    0%, 100% { box-shadow: 0 16px 48px rgba(0,0,0,.12), 0 0 25px rgba(63,123,212,.03); }
    50% { box-shadow: 0 16px 48px rgba(0,0,0,.12), 0 0 60px rgba(63,123,212,.10), 0 0 120px rgba(63,123,212,.04); }
}

/* Top accent line sweep */
div.top-block .caption::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        transparent, rgba(63,123,212,.0), rgba(63,123,212,.6),
        rgba(140,195,255,.7), rgba(63,123,212,.6),
        rgba(63,123,212,.0), transparent) !important;
    background-size: 200% 100% !important;
    animation: tbBorderSweep 5s linear infinite !important;
    z-index: 10 !important;
    width: auto !important; border: none !important;
    border-radius: 0 !important; margin: 0 !important; padding: 0 !important;
    box-shadow: 0 0 15px rgba(63,123,212,.25), 0 0 30px rgba(63,123,212,.1) !important;
}
@keyframes tbBorderSweep {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Walking gold light */
div.top-block .caption::after {
    content: '' !important;
    position: absolute !important;
    top: -80% !important; left: -80% !important;
    width: 260% !important; height: 260% !important;
    background:
        radial-gradient(circle 400px at 35% 35%, rgba(212,148,15,.18) 0%, transparent 50%),
        radial-gradient(circle 300px at 65% 65%, rgba(255,216,111,.14) 0%, transparent 45%),
        radial-gradient(circle 350px at 25% 75%, rgba(212,168,15,.10) 0%, transparent 50%) !important;
    animation: tbLightWalk 8s ease-in-out infinite !important;
    z-index: 2 !important;
    border: none !important; border-radius: 0 !important;
    margin: 0 !important; padding: 0 !important;
    pointer-events: none !important;
}
@keyframes tbLightWalk {
    0%   { transform: translate(0%, 0%) rotate(0deg); }
    20%  { transform: translate(12%, -15%) rotate(2deg); }
    40%  { transform: translate(20%, 5%) rotate(-1deg); }
    60%  { transform: translate(-5%, 20%) rotate(-3deg); }
    80%  { transform: translate(-15%, -5%) rotate(2deg); }
    100% { transform: translate(0%, 0%) rotate(0deg); }
}


/* --- EACH TITLE LINE (lighter) --- */
div.top-block .caption .title-in {
    display: block !important;
    background: linear-gradient(100deg,
        rgba(10,18,26,.10) 0%,
        rgba(10,18,26,.22) 40%,
        rgba(10,18,26,.28) 100%) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    margin-bottom: 6px !important;
    position: relative !important;
    z-index: 4 !important;
    overflow: hidden !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 4px 16px rgba(0,0,0,.08) !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
    transition: all .4s ease !important;
}

div.top-block .caption .title-in:last-child {
    margin-bottom: 0 !important;
    border-bottom: none !important;
    overflow: visible !important;
}

/* Line hover - gold accent */
div.top-block .caption .title-in:hover {
    background: linear-gradient(100deg,
        rgba(212,148,15,.10) 0%,
        rgba(212,148,15,.06) 40%,
        rgba(10,18,26,.26) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,216,111,.15),
        0 4px 24px rgba(255,216,111,.1),
        0 0 30px rgba(255,216,111,.06) !important;
}


/* --- TEXT: white by default --- */
div.top-block .caption .title-in span,
div.top-block .caption .title-in > span,
div.top-block .caption h1.title .title-in span,
div.top-block .caption h1 .title-in span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: 0 2px 16px rgba(0,0,0,.4) !important;
    transition: color .4s ease, -webkit-text-fill-color .4s ease, text-shadow .4s ease !important;
}

/* Hover: white text -> gold */
div.top-block .caption .title-in:hover span,
div.top-block .caption .title-in:hover > span,
div.top-block .caption h1.title .title-in:hover span,
div.top-block .caption h1 .title-in:hover span {
    color: #FFD86F !important;
    -webkit-text-fill-color: #FFD86F !important;
    text-shadow: 0 0 20px rgba(255,216,111,.4), 0 0 40px rgba(255,216,111,.15) !important;
}


/* --- BLUE/COLORED WORDS: shimmer on ALL lines --- */
div.top-block .caption .title-in span span[style*="color"],
div.top-block .caption .title-in span span[style*="Color"],
div.top-block .caption .title-in span span[style*="#"],
.top-block .caption .title-in span i {
    background: linear-gradient(90deg,
        #3F7BD4, #6AAAEF, #A0CDFF,
        #D4EAFF, #A0CDFF, #6AAAEF, #3F7BD4) !important;
    background-size: 500% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: tbBlueShimmer 5s ease-in-out infinite !important;
    font-style: normal !important;
    text-shadow: none !important;
    filter: drop-shadow(0 0 8px rgba(63,123,212,.35)) !important;
}

/* Hover: blue words -> gold on ALL lines */
div.top-block .caption .title-in:hover span span[style*="color"],
div.top-block .caption .title-in:hover span span[style*="Color"],
div.top-block .caption .title-in:hover span span[style*="#"],
.top-block .caption .title-in:hover span i {
    background: linear-gradient(90deg, #D4940F, #FFD86F, #D4A80F) !important;
    background-size: 100% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 12px rgba(212,148,15,.5)) drop-shadow(0 0 30px rgba(255,216,111,.2)) !important;
    animation: none !important;
}

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


/* Particles on price hover */
div.top-block .caption .title-in:last-child::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    width: 6px !important; height: 6px !important;
    border-radius: 50% !important;
    background: transparent !important;
    z-index: 20 !important;
    pointer-events: none !important;
    border: none !important; margin: 0 !important; padding: 0 !important;
    box-shadow:
        0 0 transparent, 0 0 transparent, 0 0 transparent,
        0 0 transparent, 0 0 transparent, 0 0 transparent,
        0 0 transparent, 0 0 transparent, 0 0 transparent,
        0 0 transparent, 0 0 transparent, 0 0 transparent !important;
}
div.top-block .caption .title-in:last-child:hover::after {
    animation: tbParticles 1s ease-out forwards !important;
}
@keyframes tbParticles {
    0% {
        box-shadow:
            0 0 0 0 rgba(255,216,111,.9), 0 0 0 0 rgba(212,148,15,.9),
            0 0 0 0 rgba(255,200,80,.9), 0 0 0 0 rgba(255,216,111,.9),
            0 0 0 0 rgba(212,168,15,.9), 0 0 0 0 rgba(255,216,111,.9),
            0 0 0 0 rgba(212,148,15,.9), 0 0 0 0 rgba(255,200,80,.9),
            0 0 0 0 rgba(255,216,111,.9), 0 0 0 0 rgba(212,168,15,.9),
            0 0 0 0 rgba(255,216,111,.9), 0 0 0 0 rgba(255,200,80,.9);
    }
    100% {
        box-shadow:
            -80px -60px 0 -3px rgba(255,216,111,0), 60px -80px 0 -3px rgba(212,148,15,0),
            100px -20px 0 -3px rgba(255,200,80,0), 90px 40px 0 -3px rgba(255,216,111,0),
            50px 80px 0 -3px rgba(212,168,15,0), -30px 90px 0 -3px rgba(255,216,111,0),
            -90px 50px 0 -3px rgba(212,148,15,0), -100px -10px 0 -3px rgba(255,200,80,0),
            -60px -70px 0 -3px rgba(255,216,111,0), 30px -90px 0 -3px rgba(212,168,15,0),
            -40px 60px 0 -3px rgba(255,216,111,0), 70px 70px 0 -3px rgba(255,200,80,0);
    }
}


/* --- DESCRIPTION --- */
div.top-block .caption .items {
    position: relative !important;
    z-index: 4 !important;
    margin-top: 10px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding: 14px 18px !important;
    background: linear-gradient(100deg,
        rgba(10,18,26,.10) 0%,
        rgba(10,18,26,.22) 40%,
        rgba(10,18,26,.28) 100%) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 4px 16px rgba(0,0,0,.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    text-align: left !important;
}

div.top-block .caption .items::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 18px !important;
    width: 48px !important; height: 2px !important;
    background: linear-gradient(90deg, #3F7BD4, rgba(140,195,255,.4)) !important;
    border-radius: 1px !important;
    box-shadow: 0 0 10px rgba(63,123,212,.25) !important;
    border: none !important;
}

div.top-block .caption .items .item,
div.top-block .caption .items .item.b-title,
div.top-block .caption .items .item.b-title.bt16,
div.top-block .caption .items .item.b-title.bt16.light {
    color: rgba(255,255,255,.85) !important;
    -webkit-text-fill-color: rgba(255,255,255,.85) !important;
    background: none !important;
    background-color: transparent !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.2) !important;
}

div.top-block .caption .items .item b,
div.top-block .caption .items .item strong {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}


/* --- BOTTOM CARDS (inside top-block) --- */
div.top-block .items-d,
.top-block .items-d {
    background: rgba(10,18,26,.45) !important;
    backdrop-filter: blur(24px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.18) !important;
    transition: all .3s ease !important;
}
div.top-block .items-d:hover {
    background: rgba(10,18,26,.55) !important;
    border-color: rgba(63,123,212,.25) !important;
    transform: translateY(-2px) !important;
}
div.top-block .items-d .item,
div.top-block .items-d .item.b-title {
    color: rgba(255,255,255,.85) !important;
    -webkit-text-fill-color: rgba(255,255,255,.85) !important;
}

/* --- CARDS BELOW BANNER --- */
.wrap-items-d {
    position: relative !important;
    z-index: 3 !important;
}
.wrap-items-d .items-d,
.wrap-items-d .items-d.items-d-2 {
    /*background: rgba(255,255,255,.92) !important;*/
    border: 1px solid rgba(63,123,212,.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.8) !important;
    transition: all .3s ease !important;
}
.wrap-items-d .items-d:hover,
.wrap-items-d .items-d.items-d-2:hover {
    /*background: rgba(255,255,255,.98) !important;*/
    transform: translateY(-2px) !important;
    border-color: rgba(63,123,212,.25) !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    div.top-block .caption,
    .top-block .in .caption {
        padding: 16px 12px 14px !important;
        border-radius: 14px !important;
    }
    div.top-block .caption .title-in {
        padding: 7px 12px !important;
        margin-bottom: 4px !important;
    }
    div.top-block .caption .items {
        padding: 10px 12px !important;
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    div.top-block .caption,
    div.top-block .caption::before,
    div.top-block .caption::after,
    div.top-block .caption .title-in span span[style*="color"],
    .top-block .caption .title-in span i {
        animation: none !important;
    }
}