/* nine71 — micro1-inspired dark identity */

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

:root {
    --bg: #121212;
    --surface: rgba(255, 255, 255, 0.06);
    --surface-2: rgba(255, 255, 255, 0.10);
    --border: rgba(255, 255, 255, 0.10);
    --border-2: rgba(255, 255, 255, 0.20);
    --brand: #7065f0;
    --brand-light: #9fa3fc;
    --brand-lighter: #caccfd;
    --light: #ebebf4;
    --text: rgba(255, 255, 255, 0.90);
    --text-2: rgba(255, 255, 255, 0.60);
    --text-3: rgba(255, 255, 255, 0.40);
    --font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-logo: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --container: 1200px;
    --pad: 2rem;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }

.logo-wordmark {
    font-family: var(--font-logo);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text);
    user-select: none;
    text-decoration: none;
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border: none;
    border-radius: 100px;
    padding: 0.8rem 1.5rem;
    font: 500 0.95rem var(--font);
    cursor: pointer;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.btn-small { padding: 0.55rem 1.1rem; font-size: 0.88rem; }
.btn-light { background: #fff; color: #121212; }
.btn-light:hover { background: var(--brand-lighter); }
.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-2);
}
.btn-ghost:hover { border-color: var(--brand-light); color: var(--brand-lighter); }
.btn-arrow { display: inline-flex; align-items: center; }
.btn-light .btn-arrow { color: var(--brand); }

/* ---------- nav ---------- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: background 200ms ease, border-color 200ms ease;
    border-bottom: 1px solid transparent;
}
.nav.scrolled {
    background: rgba(18, 18, 18, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom-color: var(--border);
}
/* Three columns with the wordmark centred: links left, brand middle, one CTA
   right. Deliberately not a logo-left bar - the centred mark is what makes the
   header read as a masthead instead of an app chrome strip. */
.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 1.4rem var(--pad);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
}
.nav-logo {
    font-size: 1.15rem;
    line-height: 1;
    grid-column: 2;
    justify-self: center;
    /* 900, the heaviest the system stack actually has. Checked rather than
       assumed: rendered width goes 56.4 / 58.1 / 59.9 / 61.6 px across
       600/700/800/900, so all four are real faces and none is a synthesised
       fake-bold. The centred mark anchors the masthead and has to out-weigh the
       nav links either side of it. */
    font-weight: 900;
    color: #fff;
}
.nav-links {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    gap: 1.9rem;
    justify-self: start;
}
.nav-cta { grid-column: 3; justify-self: end; }
.nav-links a {
    color: var(--text-2);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 400;
    transition: color 140ms ease;
}
.nav-links a:hover { color: var(--text); }

/* ---------- hero ---------- */
/* The hero is atmosphere plus one sentence. Everything that competed with the
   headline - a second CTA, the illustrated crowd - is gone: the depth now comes
   from layered gradients and grain, which cannot look cheap the way a drawn
   crowd does at 2x. */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 9rem var(--pad) 14vh;
    /* Four layers, because a single gradient on near-black reads as flat: a
       violet bloom low and off-centre, a cool counter-tint on the opposite
       side, a soft top light behind the headline, and the base ramp. Values are
       higher than they look like they should be - at these luminances anything
       subtler disappears into the black entirely, which is what the first pass
       got wrong. */
    background:
        radial-gradient(70% 55% at 34% 112%, rgba(112, 101, 240, 0.38) 0%, rgba(112, 101, 240, 0) 68%),
        radial-gradient(60% 45% at 78% 96%, rgba(90, 140, 220, 0.16) 0%, rgba(90, 140, 220, 0) 70%),
        radial-gradient(75% 48% at 50% 2%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(180deg, #1a1a20 0%, #141418 46%, var(--bg) 100%);
}
.hero-inner {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 60rem;
}
.hero-heading {
    font-size: clamp(2.9rem, 7.2vw, 6.1rem);
    font-weight: 300;
    letter-spacing: -0.035em;
    line-height: 1.04;
    color: #fff;
}
.hero-sub {
    margin: 1.9rem auto 0;
    max-width: 34rem;
    color: var(--text-2);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.6;
}
.hero-ctas {
    /* Larger than before because the subtitle that used to sit between the
       headline and the button is gone; without the extra gap the CTA crowds the
       headline. */
    margin-top: 3.4rem;
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    flex-wrap: wrap;
}
/* Scroll cue: a hairline, not an animated chevron. */
.hero-cue {
    position: absolute;
    bottom: 2.6rem; left: 50%;
    transform: translateX(-50%);
    width: 1px; height: 3.4rem;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 100%);
    z-index: 5;
}
.hero-noise {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0.4;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- sections ---------- */
.section { padding: 7.5rem 0; position: relative; }

.section-head { text-align: center; max-width: 46rem; margin: 0 auto 4rem; }

.heading-gradient {
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.25;
    background-image: linear-gradient(180deg, #fff, #999);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.section-sub {
    margin-top: 1.1rem;
    color: var(--text-2);
    font-size: 1.05rem;
}

/* cards */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}
.card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1.9rem 1.8rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
a.card:hover {
    border-color: var(--brand-light);
    background: var(--surface-2);
    transform: translateY(-3px);
}
.card-top { display: flex; }
.badge {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    border-radius: 100px;
    padding: 0.22rem 0.7rem;
    border: 1px solid var(--border);
    color: var(--text-2);
}
.badge-live { color: var(--brand-lighter); border-color: rgba(112, 101, 240, 0.55); background: rgba(112, 101, 240, 0.14); }
.badge-private { color: var(--text-2); background: rgba(255, 255, 255, 0.05); }
.badge-soon { color: var(--text-3); border-style: dashed; }
.card-title { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; }
.card-desc { color: var(--text-2); font-size: 0.95rem; flex: 1; }
.card-go {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--brand-light);
    font-size: 0.9rem;
    font-weight: 500;
}
a.card:hover .card-go { color: var(--brand-lighter); }
.card-go-muted { color: var(--text-3); }

/* light statement section */
.section-light {
    background: var(--light);
    color: #121212;
}
.statement { max-width: 52rem; margin: 0 auto; text-align: center; }
.statement-heading {
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #121212;
}
.statement-text {
    margin: 1.4rem auto 0;
    max-width: 42rem;
    color: rgba(18, 18, 18, 0.65);
    font-size: 1.12rem;
}

/* contact */
.section-contact { padding-bottom: 6rem; }
.contact-wrap { text-align: center; max-width: 44rem; margin: 0 auto; }
.contact-wrap .btn { margin-top: 2rem; }

/* ---------- footer ---------- */
.footer {
    border-top: 1px solid var(--border);
    padding-top: 4.5rem;
    overflow: hidden;
    position: relative;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
    padding-bottom: 3rem;
}
.footer-logo { font-size: 1.4rem; margin-bottom: 0.6rem; }
.footer-tagline { color: var(--text-2); font-size: 0.92rem; max-width: 18rem; }
.footer-links { display: flex; gap: 4rem; }
.footer-column { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-column h4 {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 0.35rem;
}
.footer-column a {
    color: var(--text-2);
    text-decoration: none;
    font-size: 0.94rem;
    transition: color 140ms ease;
}
.footer-column a:hover { color: var(--text); }
.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 1.4rem 0;
    color: var(--text-3);
    font-size: 0.85rem;
}



/* Fade-in on scroll.
 *
 * Gated on .js, which script.js sets on <html> as its first act. Without that
 * gate, these elements start at opacity 0 and only JS can reveal them - so if
 * script.js fails to load or is blocked, the products, the statement and the
 * contact section are permanently invisible and the page looks broken. Content
 * must not depend on an animation to exist. */
.js .section-head,
.js .card,
.js .statement,
.js .contact-wrap {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 600ms ease;
}
.js .fade-in { opacity: 1 !important; transform: translateY(0) !important; }

/* Someone who asked for less motion gets the content, not the animation. */
@media (prefers-reduced-motion: reduce) {
    .js .section-head,
    .js .card,
    .js .statement,
    .js .contact-wrap {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .cards { grid-template-columns: 1fr; }
    .footer-links { gap: 2.5rem; }
    .section { padding: 5rem 0; }

    /* The old 42vh bottom padding reserved room for the illustrated crowd that
       used to occupy the lower half of the hero. That image is gone, so the same
       padding just left a screen of dead space under the headline. */
    .hero { padding: 7rem var(--pad) 6rem; }
    .hero-heading { font-size: clamp(2.4rem, 10vw, 3.4rem); }
    .hero-sub { font-size: 1rem; }

    /* The headline carries a hard <br> that balances it into two lines on a
       wide screen. On a phone the first line wraps anyway, so the break left
       "layer" orphaned on a line of its own. Let it flow instead. */
    .hero-heading br { display: none; }

    /* Two rows instead of hiding the links: wordmark centred on top, links
       centred underneath. Previously .nav-links was display:none on mobile,
       which silently removed the only route to /tracks/ and /sets/ from the
       header - and I had just added a third link into it. */
    .nav-inner {
        grid-template-columns: 1fr auto;
        row-gap: 0.85rem;
        padding: 1rem var(--pad);
    }
    .nav-logo { grid-column: 1; grid-row: 1; justify-self: start; }
    .nav-cta { grid-column: 2; grid-row: 1; }
    .nav-links {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
        gap: 1.4rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 420px) {
    .nav-links { gap: 1.05rem; font-size: 0.84rem; }
    .hero { padding-top: 8.5rem; }
}