@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');

/* --- High-End Design System Variables --- */
:root {
    --background-color: #f8f9fa;
    --card-background: rgba(255, 255, 255, 0.6);
    --text-primary: #1d232c;
    --text-secondary: #8a94a6;
    --accent-blue: #007aff;
    --glow-color-1: rgba(0, 122, 255, 0.25);
    --glow-color-2: rgba(88, 86, 214, 0.2);
    --top-shadow-color: rgba(0, 80, 180, 0.15); /* Color for the top shadow */
}

/* You might need to adjust your global body styles */
body {
    background: var(--background-color);
    font-family: 'Inter', 'SF Pro Text', 'Segoe UI', Arial, sans-serif;
    color: var(--text-primary);
}

/* --- Main Section with Atmospheric Lighting --- */
.counter-spotlight-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 120px 0;
    box-sizing: border-box;
    background: var(--background-color); /* Ensure background is set */
}

/* --- PREMIUM UPDATE: Shadow from previous section --- */
.counter-spotlight-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 250px;
    background: radial-gradient(ellipse at top center, var(--top-shadow-color), transparent 70%);
    z-index: 0;
    pointer-events: none;
    display: block; /* Re-enable the pseudo-element */
}

/* --- WOW UPGRADE: Aurora Borealis Background --- */
.spotlight-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    background: var(--background-color);
}
.spotlight-bg::before, .spotlight-bg::after {
    content: '';
    position: absolute;
    z-index: -1;
    filter: blur(200px);
    border-radius: 50%;
}
.spotlight-bg::before {
    width: 800px;
    height: 800px;
    background: var(--glow-color-1);
    top: -250px;
    left: -250px;
    animation: moveSpot1 20s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
}
.spotlight-bg::after {
    width: 700px;
    height: 700px;
    background: var(--glow-color-2);
    bottom: -200px;
    right: -200px;
    animation: moveSpot2 25s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
}
@keyframes moveSpot1 {
    from { transform: translate(0, 0) scale(1) rotate(0deg); }
    to { transform: translate(150px, 80px) scale(1.2) rotate(20deg); }
}
@keyframes moveSpot2 {
    from { transform: translate(0, 0) scale(1.1) rotate(0deg); }
    to { transform: translate(-120px, -60px) scale(1) rotate(-20deg); }
}

.counter-card-wrap {
    position: relative;
    z-index: 2;
    padding: 0 24px;
    box-sizing: border-box;
    perspective: 1500px; /* Enable 3D transformations */
}

/* --- WOW UPGRADE: Frosted Glass Card with Dynamic Glare --- */
.counter-card {
    background: var(--card-background);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 50px 100px -20px rgba(50, 50, 93, 0.1), 
                0 30px 60px -30px rgba(0, 0, 0, 0.15);
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    position: relative;
    max-width: 480px;
    width: 100%;
    padding: 48px 40px;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
    transform-style: preserve-3d; /* For 3D tilt */
}

/* --- WOW UPGRADE: The Dynamic Glare Effect --- */
.counter-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 32px;
    pointer-events: none;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), 
                                rgba(255, 255, 255, 0.6), 
                                transparent 40%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}
.counter-card:hover::before {
    opacity: 1;
}
.counter-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 60px 120px -20px var(--glow-color-1), 
                0 40px 80px -30px rgba(0, 0, 0, 0.2);
}
.counter-card-inner { width: 100%; text-align: center; }

.btc-watermark, .glass-reflection, .btc-icon {
    display: none !important;
}

/* --- HIGH-END TYPOGRAPHY --- */
.counter-label {
    font-size: 1.25rem;        /* Bigger for prominence */
    font-weight: 700;          /* Stronger emphasis */
    letter-spacing: 0.15em;    /* Wider tracking */
    color: var(--text-primary);
    text-transform: uppercase;
    margin-bottom: 28px;
    text-align: center;
}

.counter-percentage {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(45deg, #0077ff, #0040a8); /* Darker gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 16px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    text-shadow: none;
}

/* Hides old shine animation */
.counter-percentage::after {
    display: none;
}

.counter-subdesc {
    font-size: 1.125rem;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 8px;
}
.counter-usd {
    font-size: 1.125rem;
    color: var(--text-secondary);
    font-weight: 500;
    display: block;
}
.counter-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 400;
    margin-top: 24px;
    line-height: 1.5;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* --- RESPONSIVE STYLES --- */
@media (max-width: 600px) {
    .counter-spotlight-section { padding: 80px 0; }
    .counter-card, .counter-card::before { border-radius: 28px; }
    .counter-card { 
        padding: 40px 24px;
        max-width: 400px;
    }
    .counter-percentage { font-size: 3rem; }
    .counter-subdesc, .counter-usd { font-size: 1rem; }
    .counter-desc { font-size: 0.95rem; }
}