:root {
    --black: #000000;
    --dark-gray: #121212;
    --medium-gray: #1E1E1E;
    --red: #FF3B30;
    --light-gray: #F5F5F5;
    --spacing: 1rem;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--light-gray);
    background-color: var(--dark-gray);
}
h1, h2, h3 { font-family: 'Poppins', sans-serif; font-weight: 700; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: var(--spacing); }
.header { background-color: var(--red); padding: 0.75rem 0; position: fixed; width: 100%; top: 0; z-index: 100; }
.construction-notice { display: flex; align-items: center; justify-content: center; gap: 0.75rem; color: white; font-weight: 500; }
.notice-icon { font-size: 1.25rem; animation: bounce 1s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--dark-gray); padding: 6rem 0; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 2rem; animation: fadeInDown 1s ease-out forwards; }
.logo-symbol { color: var(--red); font-size: 4rem; font-weight: bold; text-shadow: 0 0 20px rgba(255, 59, 48, 0.3); }
.logo h1 { color: var(--light-gray); font-size: 3.5rem; letter-spacing: 2px; }
.hero-tagline { font-size: 2rem; font-family: 'Poppins', sans-serif; margin-bottom: 1rem; animation: fadeIn 1s ease-out 0.3s forwards; opacity: 0; }
.hero-subtitle { color: #999; font-size: 1.1rem; animation: fadeIn 1s ease-out 0.6s forwards; opacity: 0; }
.footer { background-color: var(--black); padding: 3rem 0; }
.copyright { text-align: center; font-size: 0.875rem; color: #999; }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 768px) {
    .logo-symbol { font-size: 6rem; }
    .logo h1 { font-size: 5rem; }
    .hero-tagline { font-size: 2.5rem; }
}