:root {
    --color-black: #0a0a0a;
    --color-dark-turquoise: #00CED1;
    --color-burnt-yellow: #DAA520;
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.85);
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-primary);
    background: var(--color-black);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.background-accent {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 206, 209, 0.03) 0%,
        rgba(218, 165, 32, 0.02) 30%,
        transparent 70%
    );
    pointer-events: none;
    animation: subtle-rotate 30s linear infinite;
}

@keyframes subtle-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.hero {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.content {
    text-align: center;
    padding: 2rem;
}

.brand {
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    background: linear-gradient(
        135deg,
        var(--color-text-primary) 0%,
        var(--color-dark-turquoise) 50%,
        var(--color-burnt-yellow) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    animation: fadeInUp 1.2s ease-out forwards, gradient-shift 8s ease-in-out infinite;
}

@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.tagline {
    font-size: clamp(1.2rem, 3vw, 1.75rem);
    font-weight: 300;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    opacity: 0;
    animation: fadeInUp 1.2s ease-out 0.6s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .brand {
        font-size: clamp(2.5rem, 12vw, 4rem);
        margin-bottom: 1rem;
    }
    
    .tagline {
        font-size: clamp(1rem, 4vw, 1.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .background-accent {
        animation: none;
    }
    
    .brand,
    .tagline {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 1440px) {
    .brand {
        font-size: 7rem;
    }
    
    .tagline {
        font-size: 2rem;
    }
}

.stars, .stars2, .stars3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.stars {
    background: transparent;
}

.stars::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 
        1245px 550px rgba(255, 255, 255, 0.35),
        1820px 780px rgba(255, 255, 255, 0.35),
        550px 1680px rgba(255, 255, 255, 0.35),
        420px 520px rgba(255, 255, 255, 0.35),
        1520px 1200px rgba(255, 255, 255, 0.35),
        320px 950px rgba(255, 255, 255, 0.35),
        1680px 320px rgba(255, 255, 255, 0.35),
        950px 1450px rgba(255, 255, 255, 0.35),
        780px 280px rgba(255, 255, 255, 0.35),
        1450px 950px rgba(255, 255, 255, 0.35),
        250px 1250px rgba(255, 255, 255, 0.35),
        1780px 620px rgba(255, 255, 255, 0.35),
        620px 820px rgba(255, 255, 255, 0.35),
        1120px 420px rgba(255, 255, 255, 0.35),
        150px 680px rgba(255, 255, 255, 0.35),
        880px 1520px rgba(255, 255, 255, 0.35),
        1520px 150px rgba(255, 255, 255, 0.35),
        450px 380px rgba(255, 255, 255, 0.35),
        1250px 720px rgba(255, 255, 255, 0.35),
        680px 1120px rgba(255, 255, 255, 0.35);
    animation: twinkle 5s ease-in-out infinite;
}

.stars2::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 
        1580px 250px rgba(0, 206, 209, 0.18),
        920px 1450px rgba(0, 206, 209, 0.18),
        1750px 920px rgba(0, 206, 209, 0.18),
        180px 780px rgba(0, 206, 209, 0.18),
        1320px 550px rgba(0, 206, 209, 0.18),
        750px 180px rgba(0, 206, 209, 0.18),
        420px 1320px rgba(0, 206, 209, 0.18),
        1120px 680px rgba(0, 206, 209, 0.18),
        550px 420px rgba(0, 206, 209, 0.18),
        1850px 1120px rgba(0, 206, 209, 0.18),
        320px 880px rgba(0, 206, 209, 0.18),
        1450px 380px rgba(0, 206, 209, 0.18),
        880px 1250px rgba(0, 206, 209, 0.18),
        250px 550px rgba(0, 206, 209, 0.18),
        1680px 720px rgba(0, 206, 209, 0.18);
    animation: twinkle 7s ease-in-out infinite;
    animation-delay: 1s;
}

.stars3::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 
        320px 1520px rgba(218, 165, 32, 0.12),
        1750px 150px rgba(218, 165, 32, 0.12),
        550px 950px rgba(218, 165, 32, 0.12),
        1120px 1680px rgba(218, 165, 32, 0.12),
        950px 520px rgba(218, 165, 32, 0.12),
        150px 1450px rgba(218, 165, 32, 0.12),
        1520px 820px rgba(218, 165, 32, 0.12),
        680px 250px rgba(218, 165, 32, 0.12),
        1280px 1120px rgba(218, 165, 32, 0.12),
        420px 720px rgba(218, 165, 32, 0.12),
        820px 1580px rgba(218, 165, 32, 0.12),
        1680px 480px rgba(218, 165, 32, 0.12),
        250px 320px rgba(218, 165, 32, 0.12),
        1450px 1250px rgba(218, 165, 32, 0.12),
        720px 880px rgba(218, 165, 32, 0.12);
    animation: twinkle 9s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* CTA Buttons */
.cta-buttons {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    animation: fadeInUp 1.2s ease-out 0.9s forwards;
    opacity: 0;
    font-family: var(--font-primary);
}

.cta-button.primary {
    background: linear-gradient(135deg, #00CED1, #00A8A8);
    color: #000000;
}

.cta-button.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 206, 209, 0.4);
    background: linear-gradient(135deg, #00E5E5, #00CED1);
}

.cta-button.secondary {
    background: transparent;
    color: var(--color-dark-turquoise);
    border: 2px solid var(--color-dark-turquoise);
    animation-delay: 1.1s;
}

.cta-button.secondary:hover {
    background: rgba(0, 206, 209, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(218, 165, 32, 0.3);
    border-color: var(--color-burnt-yellow);
    color: var(--color-burnt-yellow);
}

/* Auth Modal Styles */
.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.auth-modal.show {
    opacity: 1;
    visibility: visible;
}

.auth-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.auth-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.close-modal {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10;
}

.close-modal:hover {
    color: var(--color-dark-turquoise);
}

.auth-box {
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(0, 206, 209, 0.2);
    border-radius: 12px;
    padding: 3rem 2rem;
    width: 100%;
    max-width: 400px;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0, 206, 209, 0.1);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.auth-modal.show .auth-box {
    transform: scale(1);
}

.brand-small {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00CED1, #DAA520);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    margin-bottom: 2rem;
}

.auth-form h2 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-form input {
    width: 100%;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 1rem;
    font-family: var(--font-primary);
    transition: all 0.3s ease;
}

.auth-form input:focus {
    outline: none;
    border-color: #00CED1;
    background: rgba(0, 206, 209, 0.05);
    box-shadow: 0 0 0 3px rgba(0, 206, 209, 0.1);
}

.auth-form input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.btn-primary {
    width: 100%;
    padding: 0.875rem;
    margin-top: 0.5rem;
    background: linear-gradient(135deg, #00CED1, #00A8A8);
    border: none;
    border-radius: 8px;
    color: #000000;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 206, 209, 0.3);
}

.btn-secondary {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.875rem;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #DAA520;
}

.auth-switch {
    margin-top: 1.5rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

.auth-switch a {
    color: #00CED1;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.auth-switch a:hover {
    color: #DAA520;
}

.auth-error {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 6px;
    color: #ff6b6b;
    font-size: 0.875rem;
    text-align: center;
}

/* Dashboard Container */
.dashboard-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
}

.dashboard-container.show {
    opacity: 1;
    visibility: visible;
}

.app-header {
    background: rgba(10, 10, 10, 0.98);
    border-bottom: 1px solid rgba(0, 206, 209, 0.2);
    padding: 1rem 2rem;
    backdrop-filter: blur(10px);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-header {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00CED1, #DAA520);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: #00CED1;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #00CED1, #DAA520);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-email {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

.app-main {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

.dashboard {
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeIn 0.6s ease-out;
}

.dashboard h2 {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.coming-soon {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.125rem;
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(0, 206, 209, 0.05);
    border: 1px solid rgba(0, 206, 209, 0.2);
    border-radius: 12px;
}

.hidden {
    display: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-button {
        width: 100%;
        max-width: 280px;
    }
    
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-menu {
        width: 100%;
        justify-content: center;
    }
    
    .user-menu {
        width: 100%;
        justify-content: center;
    }
    
    .auth-container {
        padding: 1rem;
    }
}

/* Footer */
.copyright {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10;
}

.copyright p {
    font-size: 0.875rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .copyright {
        bottom: 1.5rem;
        right: 1.5rem;
    }
    
    .copyright p {
        font-size: 0.75rem;
    }
}