/* ===================================================================
   MagicStream LANDING — standalone design system (not the cabinet one).
   Own token prefix --ls-*. Cabinet files (tokens.css / app.css /
   cabinet.css) are intentionally NOT loaded on this page.

   Direction (design-taste-frontend read):
   light lilac premium product page (refs: aave.com, plaid.com,
   apple.com), brand violet #7C3AED + brand gradient for marketing
   surfaces only. Dials: VARIANCE 7 / MOTION 6 / DENSITY 4.

   Locks:
   - theme: light only (brand decision v2, owner 2026-09-19)
   - accent: one violet; brand gradient reserved for marketing glow,
     the hero gradient word and media-slot placeholders
   - radii: surfaces 24/16, chips 8, buttons pill
   - text: soft slates, never pure black
   - motion: transform/opacity only, everything collapses under
     prefers-reduced-motion
   =================================================================== */

/* ---------- tokens ---------- */
:root {
    /* ink (soft slates, brand-wide) */
    --ls-ink-1: #232836;
    --ls-ink-2: #465064;
    --ls-ink-3: #7B8296;
    --ls-ink-hint: #9AA0B2;

    /* surfaces */
    --ls-paper: #FDFCFF;
    --ls-wash: #F7F5FE;
    --ls-card: rgba(255, 255, 255, 0.74);

    /* accent: the one violet */
    --ls-acc: #7C3AED;
    --ls-acc-deep: #6D28D9;
    --ls-acc-ink: #5B21B6;
    --ls-acc-dim: rgba(124, 58, 237, 0.09);
    --ls-acc-line: rgba(124, 58, 237, 0.16);

    /* brand gradient: marketing surfaces only */
    --ls-grad: linear-gradient(135deg, #FFA1B2 0%, #B361F0 52%, #6D28D9 100%);

    /* lines + live red (semantic state) */
    --ls-line: #E9E7F2;
    --ls-live: #DC2626;

    /* shape */
    --ls-r-media: 24px;
    --ls-r-card: 16px;
    --ls-r-chip: 8px;

    /* elevation (violet-tinted, no pure black) */
    --ls-shadow-1: 0 1px 2px rgba(35, 40, 54, 0.06);
    --ls-shadow-2: 0 24px 60px rgba(109, 40, 217, 0.14);
    --ls-ring: 0 0 0 3px rgba(124, 58, 237, 0.28);

    /* motion */
    --ls-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ls-fast: 160ms;
    --ls-reveal: 640ms;

    /* z-scale: 0 glows / 1 content / 50 topbar */
    --ls-z-content: 1;
    --ls-z-top: 50;

    --ls-top-h: 64px;
}

/* ---------- reset lite ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--ls-paper);
    color: var(--ls-ink-2);
    line-height: 1.6;
    overflow-x: clip;
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: var(--ls-acc-deep); text-decoration: none; }
h1, h2, h3 { color: var(--ls-ink-1); font-weight: 700; line-height: 1.15; }

:focus-visible { outline: none; box-shadow: var(--ls-ring); border-radius: 6px; }

.skip-link {
    position: absolute;
    left: 16px;
    top: -48px;
    z-index: calc(var(--ls-z-top) + 1);
    background: var(--ls-acc-ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--ls-r-chip);
    font-size: 14px;
    transition: top var(--ls-fast) var(--ls-ease);
}
.skip-link:focus { top: 12px; }

/* ---------- ambient brand glow (decorative) ---------- */
.glow {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(72px);
}
.glow-a {
    width: 560px; height: 560px;
    top: -180px; left: -140px;
    background: radial-gradient(circle, rgba(255, 161, 178, 0.42), transparent 68%);
    animation: ls-drift 26s var(--ls-ease) infinite alternate;
}
.glow-b {
    width: 720px; height: 720px;
    top: 4%; right: -280px;
    background: radial-gradient(circle, rgba(179, 97, 240, 0.34), transparent 68%);
    animation: ls-drift 32s var(--ls-ease) infinite alternate-reverse;
}
.glow-c {
    width: 880px; height: 880px;
    top: 34%; left: 50%;
    margin-left: -440px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.20), transparent 66%);
    animation: ls-drift 38s var(--ls-ease) infinite alternate;
}
@keyframes ls-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(40px, 28px, 0) scale(1.07); }
}

/* ---------- sections share one rhythm ---------- */
main { position: relative; z-index: var(--ls-z-content); }
section {
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 32px);
    padding-block: clamp(76px, 9vw, 128px);
}
.section-title {
    font-size: clamp(1.85rem, 3.4vw, 2.7rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
}
section[id] { scroll-margin-top: calc(var(--ls-top-h) + 12px); }

/* ---------- topbar ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: var(--ls-z-top);
    background: rgba(253, 252, 255, 0.78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--ls-fast) var(--ls-ease), box-shadow var(--ls-fast) var(--ls-ease);
}
.topbar.is-scrolled {
    border-bottom-color: var(--ls-line);
    box-shadow: var(--ls-shadow-1);
}
.topbar-in {
    max-width: 1160px;
    margin-inline: auto;
    height: var(--ls-top-h);
    padding-inline: clamp(20px, 4vw, 32px);
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
}
.brand { display: block; flex: 0 0 auto; }
.brand img { height: 34px; width: auto; }
.top-links {
    display: flex;
    gap: clamp(16px, 2.5vw, 28px);
    margin-inline: auto;
}
.top-links a {
    color: var(--ls-ink-2);
    font-size: 14px;
    font-weight: 500;
    transition: color var(--ls-fast) var(--ls-ease);
}
.top-links a:hover { color: var(--ls-acc-ink); }
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* ---------- buttons (pill, one size per role) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--ls-fast) var(--ls-ease),
                transform var(--ls-fast) var(--ls-ease),
                box-shadow var(--ls-fast) var(--ls-ease);
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-solid {
    background: var(--ls-acc);
    color: #fff;
}
.btn-solid:hover { background: var(--ls-acc-deep); box-shadow: 0 10px 24px rgba(109, 40, 217, 0.28); }
.btn-ghost {
    background: transparent;
    color: var(--ls-ink-1);
    border: 1px solid var(--ls-line);
}
.btn-ghost:hover { border-color: var(--ls-acc-line); background: rgba(124, 58, 237, 0.05); }
.btn-sm { height: 38px; padding: 0 18px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 30px; font-size: 16px; }

/* ---------- hero (full-bleed, background loop under the slogan) ---------- */
.hero {
    position: relative;
    max-width: none;
    padding: 0;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-bg .media-slot {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    border: none;
    border-radius: 0;
    display: block;
}
.hero-bg .media-dim {
    position: absolute;
    right: 20px;
    bottom: 18px;
    opacity: 0.75;
}
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* crossfade between playlist clips (gated on html.js; no-JS = first clip loops) */
html.js .hero-bg-video { opacity: 0; transition: opacity 900ms ease; }
html.js .hero-bg-video.is-active { opacity: 1; }
.hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(90% 70% at 18% 8%, rgba(255, 161, 178, 0.30), transparent 60%),
        radial-gradient(90% 80% at 85% 20%, rgba(179, 97, 240, 0.26), transparent 62%),
        linear-gradient(180deg, rgba(253, 252, 255, 0.88) 0%, rgba(253, 252, 255, 0.55) 42%, rgba(253, 252, 255, 0.62) 72%, rgba(253, 252, 255, 0.94) 100%);
}
.hero-in {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    padding: clamp(72px, 11vw, 130px) clamp(20px, 4vw, 32px);
    min-height: calc(100svh - var(--ls-top-h));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ls-acc-dim);
    color: var(--ls-acc-ink);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
}
.hero-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ls-grad);
}
.hero-title {
    margin-top: 22px;
    font-size: clamp(2.7rem, 5.8vw, 4.4rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
    max-width: 15ch;
}
.grad-word {
    background: var(--ls-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-sub {
    margin-top: 20px;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--ls-ink-2);
    max-width: 46ch;
}
.hero-cta {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* ---------- media slots (placeholders for generated assets) ---------- */
.media-slot {
    position: relative;
    aspect-ratio: var(--ar, 16 / 9);
    width: 100%;
    border-radius: var(--ls-r-media);
    border: 1.5px dashed rgba(124, 58, 237, 0.32);
    background:
        radial-gradient(120% 90% at 20% 0%, rgba(255, 161, 178, 0.20), transparent 55%),
        radial-gradient(120% 100% at 85% 15%, rgba(179, 97, 240, 0.22), transparent 60%),
        radial-gradient(140% 110% at 50% 110%, rgba(124, 58, 237, 0.16), transparent 62%),
        #FBFAFE;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.media-dim {
    font-family: ui-monospace, Consolas, "Cascadia Mono", monospace;
    font-size: 12px;
    color: var(--ls-ink-3);
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--ls-line);
    padding: 5px 10px;
    border-radius: var(--ls-r-chip);
}

/* ---------- live now (centered carousel) ---------- */
.live {
    max-width: none;
    padding-inline: 0;
    padding-block: clamp(76px, 9vw, 128px) 0;
    background: linear-gradient(180deg, rgba(247, 245, 254, 0) 0%, var(--ls-wash) 12%, var(--ls-wash) 88%, rgba(247, 245, 254, 0) 100%);
}
.live-head {
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 32px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 30px;
}
.live-head .section-title { margin-bottom: 0; }
.live-nav { display: flex; gap: 10px; }
.nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--ls-acc-line);
    background: #fff;
    color: var(--ls-acc-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color var(--ls-fast) var(--ls-ease),
                opacity var(--ls-fast) var(--ls-ease);
}
.nav-btn:hover:not(:disabled) { background: var(--ls-acc-dim); }
.nav-btn:disabled { opacity: 0.35; cursor: default; }
.live-track {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block: 10px 30px;
    padding-inline: calc((100% - min(720px, 92vw)) / 2);
    scroll-padding-inline: calc((100% - min(720px, 92vw)) / 2);
    scrollbar-width: none;
    user-select: none;
    -webkit-user-select: none;
}
.live-track::-webkit-scrollbar { display: none; }
.live-track .live-thumb img { -webkit-user-drag: none; user-drag: none; }
.live-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.live-track.is-dragging .live-card { pointer-events: none; }
.live-card {
    flex: 0 0 auto;
    width: min(720px, 92vw);
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    background: var(--ls-card);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--ls-acc-line);
    border-radius: var(--ls-r-card);
    overflow: hidden;
    color: inherit;
    box-shadow: var(--ls-shadow-1);
    transition: transform 420ms var(--ls-ease), opacity 420ms var(--ls-ease),
                box-shadow 320ms var(--ls-ease);
}
.live-card.is-center {
    box-shadow: var(--ls-shadow-2);
    border-color: var(--ls-acc-line);
}
.live-card:not(.is-center) {
    transform: scale(0.94);
    opacity: 0.72;
}
.live-card:hover { box-shadow: var(--ls-shadow-2); }
.live-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ls-acc-dim);
}
.live-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 480ms var(--ls-ease);
}
.live-card:hover .live-thumb img { transform: scale(1.045); }
.live-thumb-slot { border: none; border-radius: 0; height: 100%; }
.live-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--ls-live);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 9px;
    border-radius: 999px;
}
.live-format {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(35, 40, 54, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--ls-r-chip);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.live-format svg, .watch-format svg { flex: 0 0 auto; }
.watch-format {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--ls-acc-dim);
    color: var(--ls-acc-ink);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    vertical-align: middle;
}
.live-meta {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
}
.live-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ls-acc-dim);
    color: var(--ls-acc-ink);
    font-size: 15px;
    font-weight: 600;
    display: grid;
    place-items: center;
}
.live-lines { display: flex; flex-direction: column; min-width: 0; }
.live-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ls-ink-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-sub { font-size: 12px; color: var(--ls-ink-3); }
.live-empty {
    background: var(--ls-card);
    border: 1px solid var(--ls-acc-line);
    border-radius: var(--ls-r-card);
    padding: 44px 28px;
    text-align: center;
    color: var(--ls-ink-2);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
/* on the full-bleed live section the empty panel needs container insets */
.live .live-empty {
    max-width: 1160px;
    margin-inline: auto;
}

/* ---------- how it works ---------- */
.how-flow { margin-top: 40px; }
.how-row {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: clamp(24px, 4vw, 52px);
    margin-top: 44px;
}
.how-step {
    border-top: 1px solid var(--ls-line);
    padding-top: 22px;
}
.how-step h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
.how-step p { margin-top: 8px; font-size: 15px; color: var(--ls-ink-2); }

/* ---------- features (bento, 4 items -> 4 cells) ---------- */
.bento {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.bento-cell {
    background: #FFFFFF;
    border: 1px solid var(--ls-line);
    border-radius: var(--ls-r-card);
    padding: 28px;
    box-shadow: var(--ls-shadow-1);
}
.bento-cell h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
.bento-cell p { margin-top: 8px; font-size: 15px; color: var(--ls-ink-2); }
.bento-wide { grid-column: span 2; }
.bento-wide2 { grid-column: span 2; }
.bento-wide {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 24px;
    align-items: center;
}
.bento-wide .bento-img { border-radius: 12px; border-style: solid; border-color: var(--ls-acc-line); }
.bento-tint {
    background: linear-gradient(160deg, #F3EDFF 0%, #FDF0F4 100%);
    border-color: transparent;
}

/* ---------- interact (viewer benefits) ---------- */
.why-grid {
    margin-top: 44px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 56px;
}
.why-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.why-ico {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--ls-acc-dim);
    color: var(--ls-acc-ink);
    display: grid;
    place-items: center;
}
.why-copy h3 { font-size: 1.1rem; letter-spacing: -0.01em; }
.why-copy p { margin-top: 6px; font-size: 15px; color: var(--ls-ink-2); max-width: 42ch; }

/* ---------- for streamers (split) ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: center;
}
.split-body { margin-top: 18px; font-size: 17px; max-width: 46ch; }
.split-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    gap: 14px;
}
.split-list li {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 15px;
    color: var(--ls-ink-2);
}
.split-list .why-ico { width: 38px; height: 38px; border-radius: 12px; }
.split .btn { margin-top: 28px; }
.split-note { margin-top: 16px; font-size: 12px; color: var(--ls-ink-hint); }
.split-img { border-style: solid; border-color: var(--ls-acc-line); }

/* ---------- watch page (player) ---------- */
.watch-main {
    position: relative;
    z-index: var(--ls-z-content);
    max-width: 1160px;
    margin-inline: auto;
    padding: 32px clamp(20px, 4vw, 32px) 64px;
}
.watch-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.watch-title {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.watch-meta { margin-top: 8px; font-size: 14px; color: var(--ls-ink-3); }
.watch-desc { margin-top: 20px; color: var(--ls-ink-2); max-width: 70ch; }
.watch-panel {
    background: #FFFFFF;
    border: 1px solid var(--ls-line);
    border-radius: var(--ls-r-card);
    padding: 28px;
    margin-top: 28px;
    box-shadow: var(--ls-shadow-1);
}
.watch-panel h3 { font-size: 1.1rem; letter-spacing: -0.01em; }
.watch-steps {
    margin: 14px 0 0 18px;
    display: grid;
    gap: 8px;
    color: var(--ls-ink-2);
    font-size: 15px;
}
.watch-panel .btn { margin-top: 18px; }
.watch-panel .section-title { margin-bottom: 10px; }

.player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 24px;
    background: #0E1015;
    border-radius: var(--ls-r-media);
    overflow: hidden;
    box-shadow: var(--ls-shadow-2);
}
.player .video-js { width: 100%; height: 100%; }
.player.is-unsupported .video-js { display: none; }
.player-block {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
    background: rgba(14, 16, 21, 0.94);
    color: #E8EAF2;
}
.player-block h3 { color: #fff; font-size: 1.2rem; }
.player-block p { max-width: 46ch; font-size: 15px; }
.player-block-muted { color: #9AA0B2; font-size: 13px; }
[hidden] { display: none !important; }
.live-pill.is-off {
    background: var(--ls-ink-3);
    letter-spacing: 0.06em;
}

/* ---------- compatibility strip + footer ---------- */
.compat {
    padding-block: 0 24px;
    text-align: center;
    font-size: 15px;
    color: var(--ls-ink-2);
}
.compat strong { color: var(--ls-ink-1); font-weight: 600; }

/* ---------- footer (sections mirror the cabinet footer) ---------- */
.foot {
    position: relative;
    z-index: var(--ls-z-content);
    border-top: 1px solid var(--ls-line);
    background: linear-gradient(180deg, rgba(247, 245, 254, 0) 0%, var(--ls-wash) 34%);
}
.foot-in {
    max-width: 1160px;
    margin-inline: auto;
    padding: 56px clamp(20px, 4vw, 32px) 48px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
    gap: 32px;
}
.foot-brand img { height: 30px; width: auto; }
/* футерные <section> не должны наследовать глобальные section-паддинги
   и центрирование — колонки заполняют свои ячейки сетки */
.foot-brand, .foot-col {
    margin-inline: 0;
    max-width: none;
    padding: 0;
}
.foot-copy { margin-top: 14px; font-size: 13px; color: var(--ls-ink-3); }
.foot-col h3 { font-size: 14px; font-weight: 600; color: var(--ls-ink-1); }
.foot-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.foot-list a { font-size: 14px; color: var(--ls-ink-2); transition: color var(--ls-fast) var(--ls-ease); }
.foot-list a:hover { color: var(--ls-acc-ink); }
.foot-social { gap: 12px; }
.foot-social a { display: flex; align-items: center; gap: 10px; }
.foot-social svg { color: var(--ls-ink-3); transition: color var(--ls-fast) var(--ls-ease); }
.foot-social a:hover svg { color: var(--ls-acc-ink); }

/* ---------- scroll reveals (gated on html.js; no-JS = visible) ---------- */
html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--ls-reveal) var(--ls-ease), transform var(--ls-reveal) var(--ls-ease);
}
html.js .reveal.in-view { opacity: 1; transform: none; }

/* hero entrance: CSS keyframes, staggered; no-JS = visible */
html.js .hero-kicker,
html.js .hero-title,
html.js .hero-sub,
html.js .hero-cta { opacity: 0; animation: ls-rise 700ms var(--ls-ease) forwards; }
html.js .hero-kicker { animation-delay: 60ms; }
html.js .hero-title  { animation-delay: 140ms; }
html.js .hero-sub    { animation-delay: 240ms; }
html.js .hero-cta    { animation-delay: 340ms; }
@keyframes ls-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- reduced motion: everything collapses to static ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .glow { animation: none; }
    html.js .reveal { opacity: 1; transform: none; transition: none; }
    html.js .hero-kicker, html.js .hero-title, html.js .hero-sub, html.js .hero-cta {
        opacity: 1;
        animation: none;
    }
    .live-card, .live-card:hover .live-thumb img, .btn { transition: none; }
}

/* ---------- responsive collapses ---------- */
@media (max-width: 1020px) {
    .bento { grid-template-columns: 1fr 1fr; }
    .bento-wide, .bento-wide2 { grid-column: span 2; }
}
@media (max-width: 900px) {
    .how-row { grid-template-columns: 1fr; gap: 20px; }
    .split { grid-template-columns: 1fr; }
    .bento { grid-template-columns: 1fr; }
    .bento-wide, .bento-wide2 { grid-column: auto; }
    .bento-wide { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; gap: 24px; }
    .foot-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .top-links { display: none; }
    section:not(.hero) { padding-block: clamp(56px, 10vw, 88px); }
}
@media (max-width: 560px) {
    .foot-in { grid-template-columns: 1fr; gap: 30px; padding-block: 44px 40px; }
}
@media (max-width: 480px) {
    .hero-cta { width: 100%; flex-direction: column; }
    .hero-cta .btn { width: 100%; }
    .topbar-actions { gap: 8px; }
    .topbar-actions .btn { height: 36px; padding: 0 14px; font-size: 13px; }
    .topbar-actions .btn-ghost { display: none; }
}


/* ---------- login page (magic link + Google) ---------- */
.login-main {
    position: relative;
    z-index: var(--ls-z-content);
    max-width: 1160px;
    margin-inline: auto;
    padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 32px) 64px;
    display: flex;
    justify-content: center;
}
.login-card {
    width: min(440px, 100%);
    background: var(--ls-card);
    border: 1px solid var(--ls-acc-line);
    border-radius: var(--ls-r-media);
    padding: 36px 32px;
    box-shadow: var(--ls-shadow-2);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.login-title {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    text-align: center;
}
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ls-line);
    color: var(--ls-ink-1);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background-color var(--ls-fast) var(--ls-ease);
}
.btn-google:hover { background: var(--ls-wash); }
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: var(--ls-ink-3);
    font-size: 13px;
}
.login-divider::before, .login-divider::after {
    content: "";
    height: 1px;
    background: var(--ls-line);
    flex: 1;
}
.login-email {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--ls-line);
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--ls-ink-1);
}
.login-email:focus { outline: none; box-shadow: var(--ls-ring); border-color: transparent; }
.login-submit {
    width: 100%;
    margin-top: 14px;
    padding: 12px 16px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    background: var(--ls-acc);
    color: #fff;
    transition: background-color var(--ls-fast) var(--ls-ease);
}
.login-submit:hover { background: var(--ls-acc-deep); }
.login-note {
    margin-top: 16px;
    font-size: 13px;
    color: var(--ls-ink-3);
    text-align: center;
}
.login-note.is-error {
    color: #B3261E;
    font-weight: 600;
    margin-bottom: 16px;
}
.login-sent h2 { font-size: 1.2rem; letter-spacing: -0.01em; }
.login-sent p { margin-top: 12px; font-size: 15px; color: var(--ls-ink-2); }
.login-sent .login-again { margin-top: 14px; font-size: 13px; }