/* The public landing: screens drift behind glass, scroll pulls them into focus. */
.landing { position: relative; min-height: 100vh; overflow-x: clip; background:
    radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--sig-review) 22%, transparent), transparent 70%),
    radial-gradient(50% 40% at 0% 30%, color-mix(in srgb, var(--sig-live) 12%, transparent), transparent 70%),
    var(--bg-0, var(--bg)); color: var(--ink); }
.landing::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
    background-size: 64px 64px; opacity: 0.18; mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent); }

.landing-drift { position: fixed; inset: -10vh -5vw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; z-index: 0; pointer-events: none;
    transform: perspective(1600px) rotateX(24deg) rotateZ(-9deg) translateY(-6vh); opacity: 0.16;
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 60%, transparent); }
.drift-column { display: grid; gap: 3vw; align-content: start; animation: drift 90s linear infinite; }
.drift-column img { width: 100%; border: 1px solid var(--hairline); border-radius: 6px; filter: saturate(0.8); }
.drift-1 { animation-duration: 120s; animation-direction: reverse; margin-top: -30vh; }
.drift-2 { animation-duration: 105s; margin-top: -12vh; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* The drifting screens are dark captures. On light grounds they turn into light glass (invert, then turn the hues
   back) and sit fainter, so the layer reads as intended rather than as dark smudges. */
:root[data-theme="light"] .landing-drift { opacity: 0.12; }
:root[data-theme="light"] .drift-column img { filter: invert(1) hue-rotate(180deg) saturate(0.7); }
:root[data-theme="contrast"] .landing-drift { opacity: 0.06; }
:root[data-theme="contrast"] .drift-column img { filter: invert(1) hue-rotate(180deg) grayscale(1); }

.landing > main, .landing > header, .landing > footer { position: relative; z-index: 1; }
.landing-main { display: block; }
.landing-bar { position: sticky; top: 0; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) clamp(16px, 4vw, 48px);
    backdrop-filter: blur(14px) saturate(140%); background: color-mix(in srgb, var(--bg) 55%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent); }
.landing-bar .wordmark { margin: 0; }
.landing-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; font-size: 18px; }
.landing-by { margin-right: auto; }
.landing-signin { margin-left: auto; }

.landing-hero { min-height: 92vh; display: grid; align-content: center; gap: var(--s6); padding: var(--s12) clamp(16px, 6vw, 96px); max-width: 1280px; }
.landing-title { text-wrap: balance; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6.3vw, 108px); line-height: 0.92; letter-spacing: -0.055em; }
/* Every stop of the gradient keeps at least 3:1 (large text) on its theme's ground; the contrast theme uses ink. */
.landing-title span { background: linear-gradient(92deg, var(--ink) 0%, color-mix(in srgb, var(--sig-live) 80%, var(--ink)) 45%, #7F95FF 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .landing-title span { background-image: linear-gradient(92deg, var(--ink) 0%, var(--sig-live-text) 45%, var(--sig-review) 100%); }
:root[data-theme="contrast"] .landing-title span { background: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
.landing-lede { max-width: 620px; font-size: clamp(16px, 1.5vw, 20px); color: var(--ink-2); line-height: 1.5; }
.landing-spine { display: flex; gap: 8px; align-items: flex-end; height: 120px; }
.landing-spine i { width: 48px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--hairline); position: relative;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); animation: landing-breathe 5s var(--ease-settle, ease-in-out) infinite; }
.landing-spine i::before { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--cat); box-shadow: 0 0 18px var(--cat); }
.landing-spine i:nth-child(1) { height: 60%; animation-delay: 0s; }
.landing-spine i:nth-child(2) { height: 95%; animation-delay: .4s; }
.landing-spine i:nth-child(3) { height: 75%; animation-delay: .8s; }
.landing-spine i:nth-child(4) { height: 55%; animation-delay: 1.2s; }
.landing-spine i:nth-child(5) { height: 85%; animation-delay: 1.6s; }
@keyframes landing-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.86); } }
.landing-spine i { transform-origin: bottom; }
.landing-closed { max-width: 620px; border-left: 2px solid var(--sig-you); padding: var(--s2) var(--s3); background: color-mix(in srgb, var(--sig-you) 8%, transparent); }
.landing-cue { animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(6px); } }

.landing-stream { display: grid; gap: clamp(48px, 12vh, 140px); padding: var(--s12) clamp(16px, 5vw, 80px) clamp(64px, 16vh, 200px); }
.pane { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(16px, 3vw, 48px); align-items: end; margin: 0; }
.pane-right { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
.pane-right .pane-glass { order: 2; }
.pane-glass { position: relative; padding: clamp(6px, 1vw, 12px); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
    background: color-mix(in srgb, var(--surface) 30%, transparent); backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 40px 120px -40px color-mix(in srgb, var(--sig-review) 45%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.pane-glass::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, color-mix(in srgb, var(--ink) 10%, transparent), transparent 35%, transparent 70%, color-mix(in srgb, var(--sig-live) 8%, transparent)); }
.pane-glass img { display: block; width: 100%; height: auto; opacity: 0.92; }
.pane figcaption { display: grid; gap: var(--s2); padding-bottom: var(--s4); }
.pane-line { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.02em; }

@supports (animation-timeline: view()) {
    .pane-glass { animation: pane-in linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .pane figcaption { animation: caption-in linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
    @keyframes pane-in {
        from { opacity: 0; transform: perspective(1400px) rotateX(22deg) translateY(90px) scale(0.9); filter: blur(8px); }
        to { opacity: 1; transform: none; filter: none; }
    }
    @keyframes caption-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
}

.landing-mission { padding: clamp(64px, 14vh, 180px) clamp(16px, 8vw, 140px); display: grid; gap: var(--s6); max-width: 1180px; }
.mission-text { font-family: var(--font-display); font-size: clamp(24px, 3.1vw, 44px); line-height: 1.15; letter-spacing: -0.025em; }
/* Emphasis is weight and an underline in ink. Phosphor means an agent is working; it is not a marketing color. */
.mission-text em { font-style: normal; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.16em; }
.mission-sign { font-family: var(--font-mono); color: var(--ink-2); }

.landing-tenets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin: 0 clamp(16px, 5vw, 80px);
    border: 1px solid var(--hairline); background: var(--hairline); }
.tenet { padding: var(--s6); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(10px); display: grid; gap: var(--s2); align-content: start; }
.tenet-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.tenet p { color: var(--ink-2); }

.landing-close { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: end; padding: clamp(64px, 16vh, 200px) clamp(16px, 5vw, 80px) var(--s12); }
.landing-close .giant { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 12vw, 200px); line-height: 0.82; letter-spacing: -0.06em; }
.landing-close p { font-size: 18px; color: var(--ink-2); margin-bottom: var(--s4); }
.landing-cta { height: 48px; padding: 0 var(--s6); font-size: 16px; }
.landing-foot { padding: var(--s6) clamp(16px, 5vw, 80px); border-top: 1px solid var(--hairline); }

@media (max-width: 760px) {
    .pane, .pane-right { grid-template-columns: 1fr; }
    .pane-right .pane-glass { order: 0; }
    .landing-close { grid-template-columns: 1fr; }
    .landing-drift { grid-template-columns: repeat(2, 1fr); }
    .drift-2 { display: none; }
    .landing-by { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .drift-column, .landing-spine i, .landing-cue { animation: none; }
    .pane-glass, .pane figcaption { animation: none !important; }
}