/* Custom Configuration Variable & Baseline Styling */
:root {
    --error-container: #93000a;
    --on-secondary-container: #00686f;
    --on-primary-container: #ddcdff;
    --surface-container-low: #1b1b23;
    --tertiary: #ffb1c3;
    --on-background: #e4e1ed;
    --inverse-primary: #7212ff;
    --primary-container: #7000ff;
    --on-tertiary: #66002c;
    --error: #ffb4ab;
    --secondary: #d3fbff;
    --on-secondary-fixed-variant: #004f54;
    --on-primary-fixed: #23005b;
    --outline-variant: #4a4457;
    --on-secondary-fixed: #002022;
    --on-primary-fixed-variant: #5700c9;
    --on-error-container: #ffdad6;
    --on-primary: #3c0090;
    --on-secondary: #00363a;
    --on-tertiary-container: #ffc5d1;
    --outline: #958da3;
    --secondary-fixed: #7df4ff;
    --surface-container-lowest: #0d0d16;
    --tertiary-fixed-dim: #ffb1c3;
    --secondary-fixed-dim: #00dbe9;
    --surface: #13131b;
    --surface-dim: #13131b;
    --background: #13131b;
    --surface-container-highest: #34343d;
    --surface-container-high: #292932;
    --inverse-surface: #e4e1ed;
    --on-error: #690005;
    --on-tertiary-fixed-variant: #8f0041;
    --primary-fixed: #e9ddff;
    --secondary-container: #00eefc;
    --on-surface-variant: #ccc3da;
    --on-tertiary-fixed: #3f0019;
    --surface-tint: #d1bcff;
    --tertiary-fixed: #ffd9e0;
    --inverse-on-surface: #302f39;
    --primary-fixed-dim: #d1bcff;
    --surface-variant: #34343d;
    --tertiary-container: #b60055;
    --surface-bright: #393842;
    --primary: #d1bcff;
    --surface-container: #1f1f27;
    --on-surface: #e4e1ed;
    
    /* Spacing & Layout */
    --section-gap: 120px;
    --gutter: 24px;
    --margin-mobile: 20px;
    --margin-desktop: 80px;
    --unit: 8px;
}

body {
    background-color: #0A0A12;
    color: #e4e1ed;
    overflow-x: hidden;
}

/* Custom Element Style Integration */
.custom-geo-text {
    color: rgb(31, 31, 31); 
    font-family: Arial, sans-serif; 
    font-size: 14px; 
    background-color: rgb(255, 255, 255);
}

/* Visual Effects Styles */
.glass-card {
    background: rgba(27, 27, 35, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(209, 188, 255, 0.1);
}

.neon-border-primary {
    box-shadow: 0 0 15px rgba(209, 188, 255, 0.3);
    border: 1px solid rgba(209, 188, 255, 0.5);
}

.neon-glow-text {
    text-shadow: 0 0 10px rgba(209, 188, 255, 0.8), 0 0 20px rgba(0, 238, 252, 0.4);
}

/* Animation Classes & Keyframes */
.floating-note {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

.pulse-glow {
    animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.hero-image-zoom {
    animation: hero-zoom 20s linear infinite alternate;
}

@keyframes hero-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}