/* ===== CSS RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Palette */
    --color-bg-primary: #0a0a0f;
    --color-bg-secondary: #13131a;
    --color-bg-card: rgba(25, 25, 35, 0.6);
    --color-text-primary: #ffffff;
    --color-text-secondary: #a0a0b0;
    --color-accent-primary: #8b5cf6;
    --color-accent-secondary: #ec4899;
    --color-accent-tertiary: #06b6d4;
    --color-success: #10b981;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    --gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    --gradient-accent: linear-gradient(135deg, #ec4899 0%, #f59e0b 100%);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.3);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* ===== ANIMATED STARFIELD BACKGROUND ===== */
.stars,
.stars2,
.stars3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

.stars {
    background: white;
    box-shadow:
        200px 300px white, 400px 100px white, 600px 500px white,
        800px 200px white, 1000px 600px white, 1200px 400px white,
        100px 700px white, 300px 900px white, 500px 800px white,
        700px 1000px white, 900px 1100px white, 1100px 900px white,
        1300px 700px white, 1500px 500px white, 1700px 300px white,
        150px 150px white, 350px 350px white, 550px 550px white,
        750px 750px white, 950px 950px white, 1150px 1150px white,
        250px 450px white, 450px 650px white, 650px 850px white,
        850px 1050px white, 1050px 250px white, 1250px 450px white;
    animation: animateStars 120s linear infinite;
    opacity: 0.8;
}

.stars2 {
    background: white;
    box-shadow:
        300px 200px white, 500px 400px white, 700px 600px white,
        900px 100px white, 1100px 300px white, 1300px 500px white,
        200px 800px white, 400px 1000px white, 600px 900px white,
        800px 1100px white, 1000px 1000px white, 1200px 800px white,
        1400px 600px white, 1600px 400px white, 1800px 200px white,
        250px 250px white, 450px 450px white, 650px 650px white,
        850px 850px white, 1050px 1050px white, 1250px 1250px white;
    animation: animateStars 180s linear infinite;
    opacity: 0.6;
}

.stars3 {
    background: white;
    box-shadow:
        400px 300px white, 600px 100px white, 800px 500px white,
        1000px 200px white, 1200px 600px white, 1400px 400px white,
        300px 700px white, 500px 900px white, 700px 800px white,
        900px 1000px white, 1100px 1100px white, 1300px 900px white,
        1500px 700px white, 1700px 500px white, 1900px 300px white;
    animation: animateStars 240s linear infinite;
    opacity: 0.4;
}

@keyframes animateStars {
    0% {
        transform: translateY(0) translateX(0);
    }

    100% {
        transform: translateY(-1200px) translateX(-100px);
    }
}

/* ===== CONTAINER & LAYOUT ===== */
.container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.content {
    max-width: 900px;
    width: 100%;
    text-align: center;
    animation: fadeInUp 1s ease;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== LOGO ===== */
.logo-container {
    margin-bottom: var(--spacing-lg);
    animation: float 3s ease-in-out infinite;
}

.logo {
    width: 120px;
    height: auto;
    filter: drop-shadow(var(--shadow-glow));
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ===== STATUS BADGE ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-bg-card);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
    margin-bottom: var(--spacing-lg);
    animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {

    0%,
    100% {
        border-color: rgba(139, 92, 246, 0.3);
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
    }

    50% {
        border-color: rgba(139, 92, 246, 0.6);
        box-shadow: 0 0 0 8px rgba(139, 92, 246, 0);
    }
}

.pulse {
    width: 8px;
    height: 8px;
    background: var(--color-success);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.status-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ===== TITLE & DESCRIPTION ===== */
.title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    animation: fadeInUp 1s ease 0.2s backwards;
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    animation: gradient-shift 3s ease infinite;
    background-size: 200% 200%;
}

@keyframes gradient-shift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 1s ease 0.4s backwards;
}

/* ===== FEATURE CARDS ===== */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    animation: fadeInUp 1s ease 0.6s backwards;
}

.feature-card {
    background: var(--color-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    backdrop-filter: blur(10px);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    color: white;
    transition: transform var(--transition-base);
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

.feature-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-primary);
}

.feature-card p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ===== PROGRESS BAR ===== */
.progress-container {
    margin-bottom: var(--spacing-xl);
    animation: fadeInUp 1s ease 0.8s backwards;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    width: 0%;
    animation: progress 4s ease-out infinite;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
}

@keyframes progress {
    0% {
        width: 0%;
        opacity: 1;
    }

    70% {
        width: 100%;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 0;
    }
}

.progress-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* ===== SOCIAL LINKS ===== */
.social-links {
    margin-bottom: var(--spacing-xl);
    animation: fadeInUp 1s ease 1s backwards;
}

.social-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.social-icons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.social-link {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    transition: all var(--transition-base);
    backdrop-filter: blur(10px);
}

.social-link:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent-primary);
    background: var(--gradient-primary);
    box-shadow: var(--shadow-md), 0 0 20px rgba(139, 92, 246, 0.4);
}

.social-link svg {
    width: 24px;
    height: 24px;
}

/* ===== FOOTER ===== */
.footer {
    margin-top: auto;
    padding-top: var(--spacing-xl);
    animation: fadeInUp 1s ease 1.2s backwards;
}

.footer p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .container {
        padding: var(--spacing-md);
    }

    .logo {
        width: 80px;
    }

    .features {
        grid-template-columns: 1fr;
    }

    .social-icons {
        gap: var(--spacing-sm);
    }

    .social-link {
        width: 44px;
        height: 44px;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {

    .stars,
    .stars2,
    .stars3 {
        display: none;
    }

    body {
        background: white;
        color: black;
    }
}