@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Space+Mono&display=swap');

:root {
    --black: #080808;
    --yellow: #FAFF00;
    --white: #FFFFFF;
    --dark-gray: #121212;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    background-color: var(--black);
    color: var(--white);
    font-family: 'Space Grotesk', sans-serif;
    margin: 0; padding: 0; line-height: 1.5; overflow-x: hidden;
}

/* Typography */
h1 { font-weight: 700; text-transform: uppercase; letter-spacing: -2px; line-height: 0.9; font-size: 3.5rem; margin: 10px 0; }
h2, h3 { font-weight: 700; text-transform: uppercase; margin: 0 0 10px; }
.mono { font-family: 'Space Mono', monospace; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; color: var(--yellow); }

/* Navigation */
nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px; position: fixed; width: 100%; top: 0; z-index: 1000;
    background: rgba(8, 8, 8, 0.9); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.logo { font-weight: 700; font-size: 1.2rem; text-transform: uppercase; text-decoration: none; color: var(--white); }
.logo span { color: var(--yellow); }
.nav-links a { color: var(--white); text-decoration: none; font-size: 0.7rem; margin-left: 15px; font-family: 'Space Mono'; }

/* Layout */
.container { padding: 110px 20px 100px; }
.card { background: var(--dark-gray); padding: 25px; border-radius: 20px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.05); }

/* Fixed Call Button */
.cta-fixed {
    position: fixed; bottom: 20px; left: 20px; right: 20px;
    background: var(--yellow); color: var(--black);
    text-align: center; padding: 20px; border-radius: 15px;
    font-weight: 700; text-decoration: none; z-index: 2000;
    text-transform: uppercase; font-size: 1.1rem;
    box-shadow: 0 10px 40px rgba(250, 255, 0, 0.2);
}

/* Video Slider (TikTok Style) */
.video-slider {
    display: flex; overflow-x: auto; gap: 15px; 
    padding: 20px 0; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.video-slider::-webkit-scrollbar { display: none; }
.video-card {
    min-width: 85%; aspect-ratio: 9/16; background: var(--dark-gray);
    border-radius: 20px; scroll-snap-align: center;
    overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1);
}
iframe { width: 100%; height: 100%; border: none; }

.map-container {
    width: 100%; height: 250px; border-radius: 15px; overflow: hidden;
    filter: grayscale(1) contrast(1.2) invert(1); margin-top: 15px;
}