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

/* Palette derived from MetamerTheme (#487BD9 primary) and the Okabe-Ito
   colorblind-safe palette used by the app icon and color-naming registry. */
:root {
    --primary: #487BD9;
    --primary-deep: #295AB3;
    --primary-soft: #A9C2EE;
    --oi-orange: #E69F00;
    --oi-sky: #56B4E9;
    --oi-green: #009E73;
    --oi-vermillion: #D55E00;
    --oi-purple: #CC79A7;
    --oi-blue: #0072B2;
    --text: #1A1A1A;
    --text-muted: #525A66;
    --text-light: #6E7682;
    --bg: #F0F3F7;
    --surface: #FFFFFF;
    --surface-alt: #F7F8FA;
    --surface-tint: #E9ECF2;
    --border: #D7DADE;
    --border-soft: #E3E7ED;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --shadow-soft: 0 4px 20px rgba(41, 90, 179, 0.07);
    --shadow-deep: 0 12px 32px rgba(41, 90, 179, 0.12);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
}

.container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
}

a {
    color: var(--primary-deep);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--primary);
}

/* Hero — Ishihara-dot scatter in Okabe-Ito colors behind the masthead */
.hero {
    padding: 40px 24px 64px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle 56px at 88% 18%, rgba(230, 159, 0, 0.16) 98%, transparent),
        radial-gradient(circle 34px at 79% 52%, rgba(86, 180, 233, 0.18) 98%, transparent),
        radial-gradient(circle 22px at 93% 64%, rgba(0, 158, 115, 0.14) 98%, transparent),
        radial-gradient(circle 42px at 70% 84%, rgba(204, 121, 167, 0.12) 98%, transparent),
        radial-gradient(circle 26px at 96% 40%, rgba(213, 94, 0, 0.12) 98%, transparent),
        radial-gradient(circle 48px at 6% 88%, rgba(0, 114, 178, 0.10) 98%, transparent),
        radial-gradient(circle 18px at 16% 72%, rgba(230, 159, 0, 0.10) 98%, transparent),
        radial-gradient(circle 14px at 84% 80%, rgba(86, 180, 233, 0.12) 98%, transparent);
}

.hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 3rem;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.lang-switcher {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
}

.lang-switcher a {
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 999px;
    transition: background 0.2s, color 0.2s;
}

.lang-switcher a:hover {
    background: var(--surface-tint);
    color: var(--primary-deep);
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-icon {
    width: 112px;
    height: 112px;
    border-radius: 26px;
    box-shadow: var(--shadow-deep);
    flex-shrink: 0;
}

.hero-text {
    min-width: 0;
}

.app-name {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-weight: 600;
    font-size: 3.25rem;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.tagline {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-deep);
    margin-bottom: 1rem;
}

.description {
    font-size: 1.0625rem;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 680px;
}

/* Filter-mode pills — one per camera filter, dot tinted per CVD axis */
.mode-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1.75rem;
}

.mode-pill {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    box-shadow: 0 2px 6px rgba(41, 90, 179, 0.05);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mode-pill .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot--protan { background: var(--oi-vermillion); }
.dot--deutan { background: var(--oi-green); }
.dot--tritan { background: var(--oi-blue); }
.dot--achroma { background: var(--text-light); }
.dot--daltonize-protan { background: var(--oi-vermillion); box-shadow: inset 0 0 0 2.5px var(--surface); border: 1.5px solid var(--oi-vermillion); }
.dot--daltonize-deutan { background: var(--oi-green); box-shadow: inset 0 0 0 2.5px var(--surface); border: 1.5px solid var(--oi-green); }
.dot--daltonize-tritan { background: var(--oi-blue); box-shadow: inset 0 0 0 2.5px var(--surface); border: 1.5px solid var(--oi-blue); }

/* Coming-soon pill — stands in for App Store badges until release */
.coming-soon-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--primary);
    color: var(--primary-deep);
    background: var(--surface);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.coming-soon-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oi-orange);
    flex-shrink: 0;
}

/* Main */
main {
    padding: 16px 24px 64px;
}

section {
    margin-bottom: 72px;
}

section:last-child {
    margin-bottom: 0;
}

h2 {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-weight: 600;
    font-size: 1.85rem;
    color: var(--text);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

h2 .emoji {
    margin-right: 8px;
    font-size: 0.9em;
}

.section-lede {
    color: var(--text-muted);
    font-size: 1.0625rem;
    max-width: 560px;
    margin-bottom: 2rem;
}

/* Stats strip */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-soft);
}

.stat-item {
    text-align: center;
}

.stat-item .num {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--primary-deep);
    line-height: 1;
    display: block;
    margin-bottom: 0.25rem;
}

.stat-item .label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Feature rows — icon tile tinted per row accent */
.feature-stack {
    display: grid;
    gap: 20px;
}

.feature-row {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-soft);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: start;
}

.feature-row-emoji {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--surface-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    flex-shrink: 0;
}

.feature-row h3 {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.feature-row ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-row li {
    padding: 0.35rem 0 0.35rem 1.5rem;
    position: relative;
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.feature-row li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
}

/* Row accents — Okabe-Ito tints on the icon tile and bullets */
.feature-row--blue .feature-row-emoji { background: #E3EBF9; }
.feature-row--blue li::before { background: var(--primary); }

.feature-row--orange .feature-row-emoji { background: #FBF0DB; }
.feature-row--orange li::before { background: var(--oi-orange); }

.feature-row--green .feature-row-emoji { background: #DDF1EA; }
.feature-row--green li::before { background: var(--oi-green); }

.feature-row--sky .feature-row-emoji { background: #E2F1FA; }
.feature-row--sky li::before { background: var(--oi-sky); }

.feature-row--purple .feature-row-emoji { background: #F7E8F0; }
.feature-row--purple li::before { background: var(--oi-purple); }

.feature-row--vermillion .feature-row-emoji { background: #FAE7DB; }
.feature-row--vermillion li::before { background: var(--oi-vermillion); }

/* Color-science spotlight */
.spotlight {
    background: linear-gradient(135deg, var(--primary) 0%, #295AB3 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    text-align: center;
    box-shadow: var(--shadow-deep);
    position: relative;
    overflow: hidden;
}

.spotlight::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.spotlight::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -30px;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.spotlight-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
}

.spotlight h2 {
    color: #fff;
    font-size: 2rem;
}

.spotlight p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.05rem;
    line-height: 1.7;
}

.spotlight-emoji {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.spotlight .refs {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Links on the blue gradient need white, not the default primary-deep. */
.spotlight a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-underline-offset: 3px;
}

.spotlight a:hover {
    color: #fff;
    text-decoration-color: #fff;
}

/* Download */
.download-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.download-card .app-icon {
    width: 88px;
    height: 88px;
    border-radius: 20px;
    margin: 0 auto 1rem;
    display: block;
    box-shadow: var(--shadow-deep);
}

.download-card h3,
.download-card h1 {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.download-card .subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.download-requirements {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-top: 1.25rem;
}

/* Support */
.support-card {
    background: var(--surface-alt);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
}

.support-card p {
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.support-card a {
    color: var(--primary-deep);
    font-weight: 700;
}

/* Footer */
footer {
    margin-top: 80px;
    padding: 32px 24px;
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

footer p {
    margin: 0.25rem 0;
}

footer a {
    color: var(--text-muted);
}

footer a:hover {
    color: var(--primary-deep);
}

/* Privacy page — centered hero variant */
.hero-inner--centered {
    grid-template-columns: 1fr;
    text-align: center;
}

.hero-inner--centered .hero-text {
    max-width: 720px;
    margin: 0 auto;
}

/* 404 / standalone centered content */
.error-content {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
}

.error-card {
    max-width: 520px;
    width: 100%;
}

.error-card .actions {
    margin-top: 1.5rem;
}

.error-card .actions a {
    display: inline-block;
    text-decoration: none;
}

.privacy-content {
    max-width: 820px;
    margin: 0 auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 48px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-soft);
}

.privacy-content h1 {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    color: var(--text);
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
    text-align: center;
    font-weight: 600;
}

.privacy-content .last-updated {
    text-align: center;
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 2.5rem;
}

.privacy-content h2 {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    color: var(--primary-deep);
    font-size: 1.5rem;
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.privacy-content h3 {
    color: var(--text);
    font-size: 1.15rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.privacy-content p {
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-size: 0.9625rem;
    line-height: 1.75;
}

.privacy-content ul, .privacy-content ol {
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
    color: var(--text-muted);
    font-size: 0.9625rem;
    line-height: 1.75;
}

.privacy-content li {
    margin-bottom: 0.5rem;
}

.privacy-content strong {
    color: var(--text);
}

.privacy-content .contact-info {
    background: var(--surface-tint);
    padding: 20px 24px;
    border-radius: var(--radius);
    border-left: 4px solid var(--primary);
    margin: 1.5rem 0;
}

.privacy-content .contact-info p {
    margin-bottom: 0.5rem;
}

.back-link {
    display: inline-block;
    margin-top: 2rem;
    color: var(--primary-deep);
    font-weight: 700;
}

.back-link:hover {
    color: var(--primary);
}

.lang-switcher-inline {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 760px) {
    .hero {
        padding: 24px 24px 48px;
    }

    .hero-top {
        margin-bottom: 2rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .hero-icon {
        margin: 0 auto;
        width: 96px;
        height: 96px;
    }

    .description, .mode-pills {
        max-width: none;
    }

    .mode-pills {
        justify-content: center;
    }

    .app-name {
        font-size: 2.5rem;
    }

    section {
        margin-bottom: 56px;
    }

    h2 {
        font-size: 1.55rem;
    }

    .feature-row {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 16px;
    }

    .feature-row-emoji {
        width: 56px;
        height: 56px;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 20px;
    }

    .stat-item {
        padding: 10px 0;
    }

    .spotlight {
        padding: 36px 24px;
    }

    .spotlight h2 {
        font-size: 1.55rem;
    }

    .download-card {
        padding: 32px 20px;
    }

    .privacy-content {
        padding: 28px 20px;
    }

    .privacy-content h1 {
        font-size: 1.85rem;
    }
}

@media (max-width: 460px) {
    .app-name {
        font-size: 2.1rem;
    }

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

    .stat-item {
        border-bottom: 1px solid var(--border-soft);
    }

    .stat-item:last-child {
        border-bottom: none;
    }
}

/* Dark mode — applied via .theme-dark class on <html> by js/theme.js.
   Two states only: light (default) and dark, switched by the in-page toggle.
   Values track MetamerTheme's dark palette (#1D1D1F background family). */
:root.theme-dark {
    --primary: #4A7FE0;
    --primary-deep: #7AA3EC;
    --primary-soft: #3666BF;
    --text: #F0F1F3;
    --text-muted: #B3B9C2;
    --text-light: #8E949D;
    --bg: #1D1D1F;
    --surface: #292A2B;
    --surface-alt: #242526;
    --surface-tint: #333538;
    --border: #3B3C3D;
    --border-soft: #333435;
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.45);
    --shadow-deep: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.theme-dark .hero::before {
    opacity: 0.55;
}

.theme-dark .tagline {
    color: #7AA3EC;
}

.theme-dark .coming-soon-pill {
    border-color: #4A7FE0;
    color: #9FBDF2;
}

.theme-dark .spotlight {
    background: linear-gradient(135deg, #3666BF 0%, #24468C 100%);
}

/* Feature row icon tiles — dark variants of the light tints. */
.theme-dark .feature-row--blue .feature-row-emoji { background: #1F2A3D; }
.theme-dark .feature-row--orange .feature-row-emoji { background: #332A18; }
.theme-dark .feature-row--green .feature-row-emoji { background: #18302A; }
.theme-dark .feature-row--sky .feature-row-emoji { background: #1B2C38; }
.theme-dark .feature-row--purple .feature-row-emoji { background: #32222B; }
.theme-dark .feature-row--vermillion .feature-row-emoji { background: #34231A; }

.theme-dark .dot--achroma {
    background: #8E949D;
}

.theme-dark .privacy-content .contact-info {
    border-left-color: #4A7FE0;
}

/* App icon — swap to dark-mode artwork (light variant ships in <img src>). */
.theme-dark .hero-icon,
.theme-dark .download-card .app-icon {
    content: url('../resources/app_icon_dark.png');
}

/* Theme toggle button — hidden until js/theme.js marks it ready, so no-JS users
   never see a non-functional control. */
.theme-toggle {
    display: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    align-items: center;
    justify-content: center;
}

.theme-toggle.theme-toggle--ready {
    display: inline-flex;
}

.theme-toggle:hover {
    background: var(--surface-tint);
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* Accessibility */
:focus-visible {
    outline: 2px solid var(--primary-deep);
    outline-offset: 3px;
    border-radius: 4px;
}

a:focus-visible,
.mode-pill:focus-visible {
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}