/* Define your CSS variables here, or ensure they are loaded from a global stylesheet */
 :root {
     /* ✳ Base Colors - Bold & Vibrant Dark Theme */
     --dark-bg-color: #0d0d1f;
     /* Extra deep navy for body */
     --primary-cta: #e94560;
     /* Vivid Neon Pink/Red for actions */
     --cta-hover: #c22941;
     /* Darkened tone for hover state */
     --accent-blue: #182747;
     /* Navy-Blue with depth */
     --accent-purple: #6C4AB6;
     /* Rich royal purple */
     --accent-cyan: #00FFF5;
     /* Glowing cyan for neon-like accents */
     --accent-gold: #FFD369;
     /* Futuristic gold for highlights */

     /* ✍ Text Colors */
     --text-light: #e5e7eb;
     /* Soft white */
     --text-muted: #94a3b8;
     /* Cool muted grey-blue */

     /* 🃏 Card & Surface */
     --card-bg-dark: rgba(255, 255, 255, 0.05);
     /* Translucent for depth */
     --card-border-dark: rgba(255, 255, 255, 0.12);
     /* Subtle border */
     --card-hover-glow: rgba(0, 255, 245, 0.1);
     /* Cyan card glow on hover */

     /* 🧱 Shadows */
     --shadow-dark-light: rgba(0, 0, 0, 0.3);
     --shadow-dark-medium: rgba(0, 0, 0, 0.6);
     --shadow-dark-heavy: rgba(0, 0, 0, 0.8);

     /* 🟢 Utility Colors */
     --success-color: #00d181;
     /* Bright Emerald */
     --error-color: #ff4d4f;
     /* Sharp danger red */
     --warning-color: #facc15;
     /* Yellow/Gold alert */

     /* ✨ Effects */
     --glow-color: rgba(233, 69, 96, 0.5);
     /* CTA glow */
     --cyan-glow: rgba(0, 255, 245, 0.4);
     /* Accent glow */
     --neon-ring: 0 0 10px var(--accent-cyan), 0 0 20px var(--accent-cyan);

     /* ⚙ General Styles */
     --transition-speed: 0.3s ease;
     --border-radius: 10px;

     /* 🔝 Header */
     --header-transparent-link-color: var(--text-light);
     --header-logo-initial: var(--accent-gold);
     --header-logo-accent: var(--primary-cta);
     --header-scrolled-bg: var(--accent-blue);
     --header-scrolled-link-color: var(--text-light);
     --header-dropdown-bg: var(--accent-blue);
     --header-dropdown-text: var(--text-light);
     --header-dropdown-hover: var(--primary-cta);
     --header-dropdown-border: var(--card-border-dark);
     --header-mobile-menu-bg: var(--accent-blue);

     /* 🦸 Hero Section */
     --hero-section-bg: var(--dark-bg-color);
     --hero-container-bg: var(--card-bg-dark);
     --hero-text-color: var(--text-light);
     --hero-heading-color: var(--accent-gold);
     --hero-accent-color: var(--accent-cyan);
     --hero-button-bg: var(--primary-cta);
     --hero-button-hover-bg: var(--cta-hover);
     --hero-countdown-bg: var(--accent-purple);
     --hero-countdown-text: #ffffff;
     --hero-discount-badge-bg: var(--success-color);
     --hero-discount-badge-text: #000000;
     --hero-guarantee-text: var(--text-muted);
     --hero-guarantee-icon: var(--accent-cyan);
     --hero-check-mark: var(--success-color);
     --hero-image-bg-shape: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-cyan) 100%);

     /* 🦶 Footer */
     --footer-bg: var(--accent-blue);
     --footer-text: var(--text-light);
     --footer-link: var(--accent-cyan);
     --footer-link-hover: var(--primary-cta);
 }

 /* Sitemap specific styles */
 body {
     background-color: var(--dark-bg-color);
     font-family: Arial, sans-serif;
     /* Or your site's primary font */
     color: var(--text-light);
     line-height: 1.6;
     margin: 0;
     padding: 20px;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     /* Align to the top */
     min-height: 100vh;
     /* Ensure it takes full viewport height */
 }

 .sitemap-container {
     max-width: 900px;
     width: 100%;
     background-color: var(--accent-blue);
     /* Deeper accent blue for container */
     border-radius: var(--border-radius);
     padding: 40px;
     box-shadow: 0 10px 30px var(--shadow-dark-heavy);
     border: 1px solid var(--card-border-dark);
     margin-top: 50px;
     /* Space from top */
     position: relative;
     overflow: hidden;
     /* For potential background elements */
 }

 .sitemap-container::before {
     content: '';
     position: absolute;
     top: -50px;
     left: -50px;
     width: 200px;
     height: 200px;
     background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
     opacity: 0.1;
     filter: blur(50px);
     z-index: 0;
 }

 .sitemap-container::after {
     content: '';
     position: absolute;
     bottom: -50px;
     right: -50px;
     width: 250px;
     height: 250px;
     background: radial-gradient(circle, var(--accent-purple) 0%, transparent 70%);
     opacity: 0.1;
     filter: blur(60px);
     z-index: 0;
 }

 .content-wrapper {
     position: relative;
     z-index: 1;
     /* Ensure content is above pseudo-elements */
 }

 h1 {
     color: var(--accent-gold);
     /* Futuristic gold for main heading */
     text-align: center;
     margin-bottom: 40px;
     font-size: 2.8em;
     text-shadow: 0 0 15px var(--cyan-glow);
     /* Subtle cyan glow */
 }

 h2 {
     color: var(--primary-cta);
     /* Neon pink/red for section headings */
     border-bottom: 2px solid var(--card-border-dark);
     padding-bottom: 10px;
     margin-top: 35px;
     margin-bottom: 20px;
     font-size: 1.8em;
     letter-spacing: 0.5px;
 }

 ul {
     list-style-type: none;
     padding-left: 0;
     margin-bottom: 20px;
 }

 ul li {
     margin-bottom: 12px;
     position: relative;
     padding-left: 20px;
     /* Space for custom bullet */
 }

 ul li::before {
     content: '•';
     /* Custom bullet point */
     color: var(--accent-cyan);
     /* Cyan bullet */
     position: absolute;
     left: 0;
     font-size: 1.2em;
     line-height: 1;
 }

 ul ul {
     /* Nested lists for sub-categories */
     list-style-type: none;
     /* No default bullets */
     padding-left: 25px;
     /* Deeper indent */
     margin-top: 8px;
 }

 ul ul li::before {
     content: '–';
     /* Dash for sub-list items */
     color: var(--accent-gold);
     /* Gold dash */
 }

 a {
     color: var(--text-light);
     /* Default link color from text-light */
     text-decoration: none;
     transition: color var(--transition-speed), text-shadow var(--transition-speed);
 }

 a:hover {
     color: var(--accent-cyan);
     /* Cyan on hover */
     text-decoration: underline;
     text-shadow: 0 0 8px var(--cyan-glow);
     /* Subtle glow on hover */
 }

 .note {
     margin-top: 40px;
     padding: 25px;
     background-color: var(--card-bg-dark);
     /* Translucent card background */
     border-left: 4px solid var(--accent-gold);
     /* Gold accent border */
     border-radius: var(--border-radius);
     font-size: 0.95em;
     color: var(--text-muted);
     /* Muted text for notes */
     box-shadow: 0 5px 15px var(--shadow-dark-medium);
 }

 .note h3 {
     color: var(--accent-gold);
     margin-top: 0;
     font-size: 1.4em;
     border-bottom: 1px solid var(--card-border-dark);
     padding-bottom: 10px;
     margin-bottom: 15px;
 }

 .note code {
     background-color: rgba(0, 255, 245, 0.1);
     /* Light cyan background for code */
     color: var(--accent-cyan);
     padding: 3px 6px;
     border-radius: 4px;
     font-family: 'Courier New', Courier, monospace;
     font-size: 0.9em;
 }