/**
 * MASTER MAGIC CSS v1.4 - DEEP CHARCOAL EDITION
 * Maximum pop and 3D depth using high-contrast gradients.
 */
:root { 
    --contrast: #0784b5;       /* Kerry's Bold Blue */
    --bg-light: #2c3e50;       /* Moody Slate Spotlight center */
    --bg-dark: #0a0a0a;        /* Deep Carbon edges for shadow visibility */
    --white: #ffffff;
    --shimmer: rgba(255, 255, 255, 0.4);
}

body { 
    font-family: 'Inter', sans-serif; 
    margin: 0; min-height: 100vh;
    display: flex; justify-content: center;
    background: var(--bg-dark);
    /* THE GOLDILOCKS GRADIENT: Dark enough for depth, light enough for 'pop' */
    background-image: radial-gradient(circle at center, var(--bg-light) 0%, var(--bg-dark) 100%);
    background-size: 400% 400%;
    animation: meshGradient 15s ease infinite;
    overflow-x: hidden;
}

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

.container { 
    width: 95%; max-width: 420px; padding: 60px 20px; 
    animation: floatIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes floatIn {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* THE FLOATING CARD: High-end frosted glass */
.card { 
    background: rgba(255, 255, 255, 0.08); 
    border-radius: 12px; padding: 50px 35px; 
    /* MAXIMUM DEPTH SHADOW: Now clearly visible against charcoal */
    box-shadow: 0 50px 100px rgba(0,0,0,0.9); 
    border: 1px solid rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(30px); 
    text-align: center; position: relative; overflow: hidden;
}

/* THE MAGIC SHIMMER SWEEP */
.card::after {
    content: ""; position: absolute; top: -150%; left: -150%;
    width: 300%; height: 300%;
    background: linear-gradient(45deg, transparent 45%, var(--shimmer) 50%, transparent 55%);
    animation: shimmerSweep 7s infinite;
    pointer-events: none;
}

@keyframes shimmerSweep {
    0% { transform: translate(-30%, -30%); }
    20% { transform: translate(30%, 30%); }
    100% { transform: translate(30%, 30%); }
}

/* THE FLOATING LOGO */
.hero-portrait { 
    width: 100%; border: 1px solid var(--white); margin-bottom: 40px; 
    /* PHYSICAL LIFT: This creates the 'Magic' look */
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    transform: translateY(-12px); 
    border-radius: 2px;
    background: white; 
}

.name { 
    font-family: 'DM Serif Display', serif; font-size: 2.6rem; 
    margin-bottom: 12px; color: var(--contrast); /* Dynamic Blue */
    text-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

.tagline { 
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4em; 
    margin-bottom: 45px; font-weight: 700; color: var(--white); opacity: 0.8;
}

/* PRIMARY ACTION BUTTON */
.primary-btn { 
    display: block; width: 100%; background: var(--contrast); 
    color: var(--white); padding: 22px; font-weight: 900; 
    text-transform: uppercase; letter-spacing: 0.25em; border: none;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    cursor: pointer; margin-bottom: 15px;
}

.btn-grid { display: flex; flex-direction: column; gap: 12px; }

.btn { 
    display: block; width: 100%; padding: 18px; 
    background: rgba(255, 255, 255, 0.95); color: var(--contrast); 
    border: 1px solid var(--contrast); 
    border-radius: 4px; font-weight: 700; text-transform: uppercase; 
    letter-spacing: 0.15em; cursor: pointer;
}

.stats { 
    margin-top: 50px; font-size: 0.75rem; color: var(--white); 
    opacity: 0.4; font-weight: 900; letter-spacing: 0.4em; 
}