:root {
    color-scheme: dark;
    --ink: #f8f2e8;
    --muted: #b6aa99;
    --ground: #211f1c;
    --surface: #2b2824;
    --line: #464039;
    --amber: #f2b766;
    --aqua: #64c9c4;
}

html, body, #app { min-height: 100%; margin: 0; }
html { scroll-behavior: smooth; background: var(--ground); }
body {
    color: var(--ink);
    background: radial-gradient(circle at 80% 10%, rgba(100, 201, 196, .08), transparent 28rem), var(--ground);
    font-family: "DM Sans", sans-serif;
}
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
h1[tabindex="-1"]:focus { outline: none; }

.hero-section { min-height: 72vh; display: flex; align-items: center; padding: 7rem 0 5rem; }
.align-center { align-items: center; }
.hero-section h1 {
    max-width: 800px; margin: 1.5rem 0; color: var(--ink);
    font-size: clamp(3.6rem, 8vw, 7rem); font-weight: 700;
    letter-spacing: -.07em; line-height: .9;
}
.hero-section h1 span {
    color: var(--amber); font-family: "Instrument Serif", serif;
    font-style: italic; font-weight: 400; letter-spacing: -.035em;
}
.hero-copy { max-width: 680px; color: var(--muted); line-height: 1.65 !important; }
.hero-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 2rem; color: var(--muted); }

.sound-card {
    min-height: 380px; border: 1px solid var(--line); border-radius: 2rem !important;
    background: linear-gradient(145deg, rgba(242, 183, 102, .15), rgba(43, 40, 36, .9)) !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
}
.sound-card::before {
    content: ""; position: absolute; width: 240px; height: 240px;
    border: 1px solid rgba(242, 183, 102, .25); border-radius: 50%;
    box-shadow: 0 0 0 50px rgba(242, 183, 102, .035), 0 0 0 100px rgba(242, 183, 102, .02);
}
.sound-icon { color: var(--amber); font-size: 4rem !important; z-index: 1; }
.sound-card .mud-typography { z-index: 1; margin-top: 1.2rem; color: var(--muted); letter-spacing: .15em; }
.wave-bars { height: 62px; display: flex; align-items: center; gap: 7px; z-index: 1; }
.wave-bars i { display: block; width: 6px; height: 18px; border-radius: 9px; background: var(--aqua); }
.wave-bars i:nth-child(2), .wave-bars i:nth-child(6) { height: 34px; }
.wave-bars i:nth-child(3), .wave-bars i:nth-child(5) { height: 51px; }
.wave-bars i:nth-child(4) { height: 62px; background: var(--amber); }

.features-section { padding: 6rem 0; border-top: 1px solid var(--line); }
.section-title {
    max-width: 720px; margin: .7rem 0 2.5rem !important;
    font-family: "Instrument Serif", serif !important;
    font-size: clamp(2.6rem, 5vw, 4.5rem) !important; line-height: 1 !important;
}
.feature-card {
    height: 100%; padding: 2rem; border: 1px solid var(--line);
    border-radius: 1.25rem !important; background: var(--surface) !important;
}
.feature-card .mud-icon-root { margin-bottom: 2.5rem; }
.feature-card h5 { margin-bottom: .8rem; color: var(--ink); font-weight: 700; }
.feature-card p { color: var(--muted); line-height: 1.65; }

.cta-section { padding: 7rem 1rem; text-align: center; background: var(--amber); color: #261f17; }
.cta-section h3 { font-family: "Instrument Serif", serif; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; }
.cta-section p { margin: 1.25rem 0 2rem; }
.cta-section .mud-button-root { background: #261f17 !important; color: var(--ink) !important; }
footer { padding: 2.2rem 0; color: var(--muted); background: #191815; }

#blazor-error-ui {
    display: none; position: fixed; z-index: 1000; right: 1rem; bottom: 1rem; left: 1rem;
    padding: .8rem 1rem; border-radius: .75rem; background: #6e2c2c; color: white;
}
#blazor-error-ui .dismiss { position: absolute; right: .8rem; cursor: pointer; }
.loading-progress { position: absolute; display: block; width: 6rem; height: 6rem; inset: 25vh 0 auto; margin: auto; }
.loading-progress circle {
    fill: none; stroke: var(--line); stroke-width: .5rem;
    transform-origin: 50% 50%; transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--amber); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%;
}
.loading-progress-text { position: absolute; inset: calc(25vh + 2.5rem) 0 auto; text-align: center; color: var(--muted); }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }

@media (max-width: 959px) {
    .hero-section { padding-top: 5rem; }
    .sound-card { min-height: 300px; margin-top: 1rem; }
}
@media (max-width: 600px) {
    .hero-section h1 { font-size: 3.5rem; }
    .hero-actions { align-items: flex-start; flex-direction: column; }
    .features-section { padding: 4rem 0; }
}