/* Public index — same liquid-glass field and modules as login and SAI Home.
   #02040F field, translucent modules, #E5DADA text, #5FC4A4 headers and links. */

html:has(body.sai-index.sai-liquid-glass) {
    background: #02040f;
}

body.sai-index.sai-liquid-glass {
    --lg-text: #e5dada;
    --lg-muted: rgba(229, 218, 218, 0.72);
    --lg-accent: #5fc4a4;
    --lg-edge: rgba(229, 218, 218, 0.14);
    --lg-fill: linear-gradient(180deg, rgba(229, 218, 218, 0.045) 0%, transparent 14%), rgba(10, 10, 10, 0.62);
    --lg-shadow: 0 22px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(229, 218, 218, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.55);
    --lg-blur: blur(28px) saturate(1.35);
    --lg-radius: 28px;
    --tm-bg: #02040f;
    --tm-teal: #5fc4a4;
    --tm-text: #e5dada;
    --tm-border: rgba(229, 218, 218, 0.14);
    --white: #e5dada;
    --light-gray: rgba(229, 218, 218, 0.78);
    --body-background-color: #02040f;
    --body-text-color: #e5dada;
    --accent-color: #5fc4a4;
    --accent-light: #8ed8c2;
    --btn-bg: #5fc4a4;
    --btn-border: #5fc4a4;
    --btn-text: #02040f;
    --btn-hover-bg: #8ed8c2;
    --btn-hover-text: #02040f;
    --sans-font: "Lato", sans-serif;
    color: #e5dada;
    font-family: "Lato", sans-serif;
    background-color: #02040f !important;
    background-image:
        radial-gradient(ellipse 70% 42% at 18% -8%, rgba(95, 196, 164, 0.18), transparent 58%),
        radial-gradient(ellipse 46% 36% at 92% 8%, rgba(95, 196, 164, 0.08), transparent 62%),
        radial-gradient(ellipse 50% 32% at 80% 100%, rgba(229, 218, 218, 0.06), transparent 55%) !important;
    background-attachment: fixed;
}

body.sai-index.sai-liquid-glass .content {
    gap: 22px;
    padding: 28px 18px 18px;
}

body.sai-index.sai-liquid-glass .downtime-container,
body.sai-index.sai-liquid-glass .sai-info-container,
body.sai-index.sai-liquid-glass .seo-sections {
    background: var(--lg-fill);
    border: 1px solid var(--lg-edge);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    margin: 0;
}

body.sai-index.sai-liquid-glass .sai-info-heading,
body.sai-index.sai-liquid-glass .seo-section-heading {
    color: var(--lg-accent);
}

body.sai-index.sai-liquid-glass .sai-info-text p,
body.sai-index.sai-liquid-glass .seo-section p {
    color: var(--lg-muted);
    font-family: "Lato", sans-serif;
}

body.sai-index.sai-liquid-glass .seo-section a {
    color: var(--lg-accent);
    font-weight: 700;
}

body.sai-index.sai-liquid-glass .seo-section a:hover {
    color: #8ed8c2;
}

body.sai-index.sai-liquid-glass .auth-links a {
    border-radius: 16px;
    border-width: 0;
    font-family: "Lato", sans-serif;
    letter-spacing: 0.04em;
    box-shadow: inset 0 1px 0 rgba(229, 218, 218, 0.45), 0 8px 18px rgba(95, 196, 164, 0.22);
}

body.sai-index.sai-liquid-glass .video-carousel {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 22px;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    line-height: 0;
    transform: translateZ(0);
}

/* Production wordmark is 800x300. */
body.sai-index.sai-liquid-glass .logo-section img {
    width: min(100%, 340px);
    max-width: 100%;
    height: auto;
}

body.sai-index.sai-liquid-glass .video-carousel video {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    border-radius: 22px;
}

body.sai-index.sai-liquid-glass .sai-info-image img {
    border-radius: 22px;
    border: 1px solid var(--lg-edge);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(229, 218, 218, 0.12);
}

body.sai-index.sai-liquid-glass .footer {
    width: min(1200px, calc(100% - 36px));
    margin: 8px auto 22px;
    padding: 18px 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(229, 218, 218, 0.04) 0%, transparent 18%), rgba(8, 8, 8, 0.55);
    border: 1px solid var(--lg-edge);
    box-shadow: var(--lg-shadow);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    color: var(--lg-muted);
}

body.sai-index.sai-liquid-glass .footer a,
body.sai-index.sai-liquid-glass .footer-social-link {
    color: var(--lg-text);
}

body.sai-index.sai-liquid-glass .footer a:hover,
body.sai-index.sai-liquid-glass .footer-social-link:hover {
    color: var(--lg-accent);
}

body.sai-index.sai-liquid-glass .footer-tagline,
body.sai-index.sai-liquid-glass .footer-legal-sep {
    color: var(--lg-muted);
}

@media (max-width: 768px) {
    body.sai-index.sai-liquid-glass {
        padding: 0;
    }

    body.sai-index.sai-liquid-glass .footer {
        width: auto;
        margin: 8px 10px 16px;
    }
}

@media (max-width: 480px) {
    body.sai-index.sai-liquid-glass .footer {
        margin: 8px 5px 12px;
    }
}

@media (prefers-reduced-transparency: reduce) {
    body.sai-index.sai-liquid-glass .downtime-container,
    body.sai-index.sai-liquid-glass .sai-info-container,
    body.sai-index.sai-liquid-glass .seo-sections,
    body.sai-index.sai-liquid-glass .footer {
        background: #0a0a0a;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}