/* Core Page Styles - Matching Black Theme */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #000000; /* True Black */
    color: #ffffff; /* Clean White Text */
    text-align: center;
}

/* Hero Section (logo and tagline) */
/* --- HERO SECTION ONLY --- */

.hero {
    padding: 100px 20px 60px; 
    background-color: #000000;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-logo {
    width: 100%;
    max-width: 500px; /* The original large hero scale */
    height: auto;
    margin-bottom: 30px;
    filter: drop-shadow(0px 0px 25px rgba(255, 0, 255, 0.4)); /* Magenta glow */
}

.logo-text {
    font-size: 3rem;
    font-weight: 900;
    margin: 0;
    color: #ffcc00; /* Gold */
    text-shadow: 0 0 15px rgba(255, 153, 0, 0.6);
}

.tagline {
    font-size: 1.2rem;
    opacity: 0.7;
    margin-top: 10px;
    color: #00ffff; /* Cyan */
}

/* Social Links Container (like Linktree) */
.links-container {
    max-width: 420px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

/* General Social Link Button Styles */
.social-link {
    display: block;
    background-color: #0a0a0a; /* Very dark gray for subtle depth */
    color: white;
    text-decoration: none;
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    
    /* Default subtle border glow */
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* GENERAL HOVER STATE (all links get bigger and glow more) */
.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    background-color: #111111;
}

/* BRAND-SPECIFIC GLOW & COLORS ON HOVER (Matching the Logo) */

/* Facebook gets the Cyan glow from the 'MERCH' text */
.facebook:hover {
    border-color: #00ffff; /* Cyan */
    box-shadow: 0 0 15px #00ffff, 0 8px 20px rgba(0,0,0,0.5);
}

/* Instagram gets the Magenta/Purple glow from the border */
.instagram:hover {
    border-color: #ff00ff; /* Magenta */
    box-shadow: 0 0 15px #ff00ff, 0 8px 20px rgba(0,0,0,0.5);
}

/* YouTube (optional unhide) gets the Gold from 'iDIG' */
.youtube:hover {
    border-color: #ffcc00; /* Gold */
    box-shadow: 0 0 15px #ffcc00, 0 8px 20px rgba(0,0,0,0.5);
}

/* Whatnot (optional unhide) gets the Orange from 'iDIG' gradient */
.whatnot:hover {
    border-color: #ff9900; /* Orange */
    box-shadow: 0 0 15px #ff9900, 0 8px 20px rgba(0,0,0,0.5);
}

/* Footer Styling */
.main-footer {
    font-size: 0.85rem;
    opacity: 0.5;
    padding-bottom: 40px;
    color: #888;
}