/* ────────────────────────────────────────────────────────────
   Landing — editorial broadcast cover
   ──────────────────────────────────────────────────────────── */

body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--signal) 4%, transparent), transparent 70%),
        var(--ink-0);
    overflow-x: hidden;
}

.lp-grid {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-6);
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--sp-7);
}

/* ── Masthead ────────────────────────────────────────────── */
.masthead {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--bone-dim);
}
.masthead .left, .masthead .right { display: flex; gap: var(--sp-4); align-items: center; }
.masthead .right { justify-content: flex-end; }
.masthead .center { color: var(--bone); }
.masthead .dot {
    width: 8px; height: 8px;
    background: var(--signal);
    border-radius: var(--r-pill);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 22%, transparent);
    animation: signal-pulse 1.6s var(--ease) infinite;
}
@keyframes signal-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.85); }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--sp-7);
    align-items: end;
    padding: var(--sp-7) 0;
    position: relative;
}

.hero-title {
    font-family: var(--font-sans);
    font-size: var(--t-display-1);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: var(--ls-display);
    color: var(--bone);
}
.hero-title .it {
    color: var(--signal);
    font-style: normal;
}
.hero-title .ampersand {
    display: inline-block;
    transform: translateY(0.08em);
    color: var(--bone-dim);
    margin: 0 0.08em;
}
.hero-title .line {
    display: block;
    overflow: hidden;
}
.hero-title .line > span {
    display: inline-block;
    animation: rise var(--dur-slow) var(--ease) backwards;
}
.hero-title .line:nth-child(1) > span { animation-delay: 0.05s; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.20s; }
.hero-title .line:nth-child(3) > span { animation-delay: 0.35s; }
@keyframes rise {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.hero-aside {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-left: 1px solid var(--rule);
    padding-left: var(--sp-5);
    align-self: end;
}
.hero-lead {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--bone);
    max-width: 36ch;
}
.hero-lead .em { color: var(--signal); font-weight: 500; }

.cta-block { display: flex; flex-direction: column; gap: var(--sp-2); }
.cta-twitch {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--signal);
    color: var(--signal-ink);
    padding: 14px 18px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    border: 1px solid var(--signal);
    border-radius: var(--r-1);
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cta-twitch:hover { background: #c8ff5e; color: var(--signal-ink); }
.cta-twitch:active { transform: translateY(1px); }
.cta-twitch svg { width: 16px; height: 18px; }
.cta-twitch .arrow { margin-left: auto; font-family: var(--font-mono); }

.cta-fine { font-size: var(--t-meta); color: var(--bone-dim); }

/* ── Spec sheet (features as catalog entries) ────────────── */
.spec-sheet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.spec {
    padding: var(--sp-6) var(--sp-5);
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    position: relative;
}
.spec:last-child { border-right: 0; }
.spec-num {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    color: var(--bone-faint);
}
.spec-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--bone);
    letter-spacing: var(--ls-tight);
}
.spec-body {
    font-size: var(--t-body);
    color: var(--bone-dim);
    line-height: 1.55;
    max-width: 32ch;
}
.spec:hover .spec-num { color: var(--signal); }

/* ── Footer ──────────────────────────────────────────────── */
.lp-foot {
    border-top: 1px solid var(--rule);
    padding-top: var(--sp-4);
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--bone-faint);
}
.lp-foot a { color: var(--bone-dim); }
.lp-foot a:hover { color: var(--signal); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .hero { grid-template-columns: 1fr; gap: var(--sp-5); }
    .hero-aside { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: var(--sp-5); }
    .spec-sheet { grid-template-columns: 1fr; }
    .spec { border-right: 0; border-bottom: 1px solid var(--rule); }
    .spec:last-child { border-bottom: 0; }
    .masthead { grid-template-columns: 1fr 1fr; }
    .masthead .center { display: none; }
}