:root {
    --navy: #0b1726;
    --navy-light: #16324a;
    --sea-glass: #4ae0c4;
    --text: #e8eef4;
    --muted: #9fb2c4;
    --card: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.12);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 70px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    color: var(--text);
    background: linear-gradient(160deg, var(--navy-light), var(--navy) 55%) fixed;
    min-height: 100vh;
    overflow-x: hidden;
}

main, header, footer { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

a { color: var(--sea-glass); }

h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; }

/* Slowly drifting glows behind the page. */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient span {
    position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
    filter: blur(80px); opacity: 0.22;
    animation: drift 28s ease-in-out infinite alternate;
}
.ambient span:nth-child(1) { background: #4ae0c4; top: -18vmax; left: -12vmax; }
.ambient span:nth-child(2) { background: #3b5bdb; top: 30vh; right: -20vmax; animation-duration: 34s; animation-delay: -8s; }
.ambient span:nth-child(3) { background: #f28c6a; bottom: -24vmax; left: 20vw; opacity: 0.12; animation-duration: 40s; animation-delay: -16s; }
@keyframes drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(6vmax, 4vmax) scale(1.15); }
}

/* Top bar: brand, links, and a download button, over the page on frosted glass. */
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px max(24px, calc((100vw - 1200px) / 2 + 24px));
    background: rgba(11, 23, 38, 0.55); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 17px; text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.topbar-links { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.topbar-links a:not(.button) { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.topbar-links a:not(.button):hover { color: var(--text); }

/* Hero: a big headline over a slowly drifting wall of stills. */
header.hero {
    position: relative; max-width: none; padding: 0; overflow: hidden;
    min-height: min(860px, calc(100vh - 53px)); display: grid; place-items: center; text-align: center;
}
.wall { position: absolute; inset: -10% -20%; z-index: 0; perspective: 1400px; pointer-events: none; }
.wall-tilt { display: flex; flex-direction: column; gap: 22px; transform: rotateX(24deg) rotateZ(-8deg) translateY(0%); transform-origin: center; }
.wall-row { display: flex; gap: 22px; width: max-content; animation: wall-drift 90s linear infinite; }
.wall-row:nth-child(2) { animation-direction: reverse; animation-duration: 110s; margin-left: -240px; }
.wall-row:nth-child(3) { animation-duration: 100s; margin-left: -120px; }
.wall-row:nth-child(4) { animation-direction: reverse; animation-duration: 120s; margin-left: -300px; }
.wall figure { position: relative; margin: 0; width: 360px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
               box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); opacity: 0.8; }
.wall img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall figcaption { position: absolute; left: 14px; bottom: 10px; font-size: 14px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
@keyframes wall-drift { to { transform: translateX(-50%); } }
/* Darkens the middle so the headline reads, and fades the wall into the page. */
header.hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse 55% 50% at 50% 50%, rgba(11, 23, 38, 0.9), rgba(11, 23, 38, 0.45) 70%, rgba(11, 23, 38, 0.1)),
        linear-gradient(to bottom, rgba(11, 23, 38, 0.6), transparent 25%, transparent 70%, var(--navy));
}
.hero-content { position: relative; z-index: 2; max-width: 820px; padding: 80px 24px 110px; }
.pill {
    display: inline-block; margin: 0 0 22px; padding: 6px 14px; border-radius: 999px;
    font-size: 14px; font-weight: 600; color: var(--sea-glass);
    background: rgba(74, 224, 196, 0.1); border: 1px solid rgba(74, 224, 196, 0.35);
    animation: rise 0.9s cubic-bezier(.2, .7, .2, 1) both;
}
header.hero h1 {
    font-size: clamp(44px, 7.4vw, 88px); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 22px;
    animation: rise 0.9s 0.08s cubic-bezier(.2, .7, .2, 1) both;
}
.glow {
    background: linear-gradient(100deg, #4ae0c4 10%, #8fd3ff 50%, #f2b38c 90%);
    background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 8s ease-in-out infinite alternate;
}
@keyframes shimmer { to { background-position: 100% 0; } }
header.hero .tagline { font-size: 21px; color: var(--muted); margin: 0 auto 34px; max-width: 640px; animation: rise 0.9s 0.16s cubic-bezier(.2, .7, .2, 1) both; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: center; align-items: center; animation: rise 0.9s 0.24s cubic-bezier(.2, .7, .2, 1) both; }
.text-link { color: var(--text); font-weight: 600; text-decoration: none; }
.text-link span { display: inline-block; transition: transform 0.2s; }
.text-link:hover span { transform: translateY(3px); }
.beta-note { margin: 26px auto 0; max-width: 560px; font-size: 14px; color: var(--muted); animation: rise 0.9s 0.3s cubic-bezier(.2, .7, .2, 1) both; }
.perks {
    list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
    font-size: 14px; color: var(--muted); animation: rise 0.9s 0.32s cubic-bezier(.2, .7, .2, 1) both;
}
.perks li::before { content: "✓"; color: var(--sea-glass); margin-right: 7px; font-weight: 700; }
.scroll-hint {
    position: absolute; z-index: 2; left: 50%; bottom: 28px; width: 24px; height: 38px; margin-left: -12px;
    border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 12px;
}
.scroll-hint::after {
    content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px;
    border-radius: 2px; background: var(--sea-glass); animation: scroll-hint 1.8s ease-in-out infinite;
}
@keyframes scroll-hint { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.button {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 14px;
    background: var(--sea-glass);
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(74, 224, 196, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(74, 224, 196, 0.5); }
.button.small { padding: 7px 16px; border-radius: 10px; font-size: 14px; box-shadow: none; }
.note { color: var(--muted); font-size: 14px; margin-top: 10px; }

/* Screenshots are AVIF with transparency, so the windows keep their own corners and shadow. */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; }
img.rounded { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }

/* The hero scene, a 9-second loop: a file drops onto the TV's tile in the Kinomist window, the tile lights up and starts
   playing, lines carry the stream to the TV, and the TV turns on. */
.stage { position: relative; height: 520px; width: 980px; margin: 56px auto 0; }
.stage-window { position: absolute; left: 0; top: 20px; width: 300px; transform: rotate(-3deg); animation: rise 1s 0.3s cubic-bezier(.2, .7, .2, 1) both; }
/* The idle window is shorter; the playing one replaces it from the top, as the real window grows. */
.stage-window img.before { animation: window-before 9s infinite; }
.stage-window img.after { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; animation: window-after 9s infinite; }
.drop-zone {
    position: absolute; left: 12%; top: 27%; width: 76%; height: 16.5%; border-radius: 16px;
    box-shadow: 0 0 0 2px var(--sea-glass), 0 0 32px rgba(74, 224, 196, 0.7);
    opacity: 0; animation: drop-zone 9s infinite;
}
.tv { position: absolute; right: 0; top: 80px; width: 540px; animation: rise 1s 0.45s cubic-bezier(.2, .7, .2, 1) both; }
.tv-screen {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    background: #04070c; border: 12px solid #0d0f14; border-radius: 14px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.tv-screen .layer { position: absolute; inset: 0; }
.tv-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.layer.harbor img { opacity: 0; animation: tv-on 9s infinite; }
.tv-stand { width: 150px; height: 32px; margin: 0 auto; background: linear-gradient(#1a1e26, #0b0d12); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.tv-osd {
    position: absolute; left: 6%; right: 6%; bottom: 8%;
    display: flex; flex-direction: column; gap: 8px; text-align: left;
    opacity: 0; animation: osd 9s infinite;
}
.tv-title { font-weight: 600; font-size: 18px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.tv-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.tv-bar span { display: block; height: 100%; width: 43%; background: var(--sea-glass); transform-origin: left; animation: bar 9s infinite; }
.tv-osd.still { opacity: 1; animation: none; }
.tv-osd.still .tv-bar span { width: 4%; animation: none; }
.tv-subtitle {
    position: absolute; left: 0; right: 0; bottom: 9%; margin: 0; text-align: center;
    font-size: 20px; font-weight: 600; text-shadow: 0 0 3px #000, 0 2px 10px #000;
}

.beams { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; opacity: 0; animation: beams 9s infinite; }
.beams path {
    fill: none; stroke: url(#beam); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 10;
    filter: drop-shadow(0 0 6px rgba(74, 224, 196, 0.8));
    animation: flow 0.8s linear infinite;
}
.packet {
    position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%;
    background: #d9fff6; box-shadow: 0 0 12px 4px rgba(74, 224, 196, 0.9);
    offset-rotate: 0deg; opacity: 0; animation: packet 9s infinite;
}
.packet.p1 { offset-path: path("M292,118 C360,86 384,196 446,182"); }
.packet.p2 { offset-path: path("M292,150 C364,150 378,246 446,242"); animation-delay: 0.18s; }
.packet.p3 { offset-path: path("M292,182 C354,232 386,304 446,302"); animation-delay: 0.36s; }

.chip {
    position: absolute; left: 44px; top: 98px; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 12px;
    background: rgba(22, 50, 74, 0.94); border: 1px solid rgba(74, 224, 196, 0.5);
    font-size: 14px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    animation: drop-in 9s infinite;
}
.chip-icon { color: var(--sea-glass); }

/* Scroll story. Without it (narrow windows, Reduce Motion, no JavaScript), the scene loops on its own and only these
   extra layers stay hidden. */
.story { margin-top: 24px; }
.story-only, .story-captions, .story-dots { display: none; }
.stage-window img.library, .stage-window img.tracks { position: absolute; top: 0; opacity: 0; }
/* The library and track screenshots are wider than the window; these offsets keep the window itself in place. */
.stage-window img.library { left: -1.53%; width: 103.07%; }
.stage-window img.tracks { left: 0; width: 110.12%; }
.claude-card {
    position: absolute; left: -10px; top: 120px; z-index: 3; width: 430px; height: auto;
    border-radius: 12px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); opacity: 0;
}
.menubar-panel {
    position: absolute; left: -6px; top: 34px; z-index: 3; width: 300px; height: auto; opacity: 0;
    filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.5));
}
.packet.relay { animation: none; opacity: 0; }

.story-js .story { height: 620vh; margin: 0; }
.story-js .story-pin {
    position: sticky; top: var(--bar, 53px); height: calc(100vh - var(--bar, 53px));
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.story-js .story-only { display: block; }
.story-js .story-captions { display: grid; width: min(760px, 100% - 48px); text-align: center; }
.story-js .caption { grid-area: 1 / 1; align-self: end; }
.story-js .caption h2 { font-size: 36px; margin: 0 0 10px; }
.story-js .caption p { margin: 0; color: var(--muted); }
.story-js .caption .eyebrow { margin-bottom: 8px; }
.story-js .stage { margin: 0; }
.story-js .stage-window, .story-js .tv { animation: none; }
.story-js .feature.in-story { display: none; }
.story-js .story-dots { display: flex; flex-direction: column; gap: 10px; position: absolute; right: 28px; top: 50%; transform: translateY(-50%); }
.story-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transition: background 0.3s, transform 0.3s; }
.story-dots span.active { background: var(--sea-glass); transform: scale(1.3); }
/* Scrolling sets --t, the moment of the first scene's 9-second loop, so the scene plays forward and back with the page. */
.story-js .stage-window img.before, .story-js .stage-window img.after, .story-js .drop-zone, .story-js .chip,
.story-js .layer.harbor img, .story-js .layer.harbor .tv-osd, .story-js .layer.harbor .tv-bar span,
.story-js .beams, .story-js .packet.p1:not(.relay) {
    animation-play-state: paused; animation-delay: calc(var(--t, 0s) * -1);
}
.story-js .packet.p2:not(.relay) { animation-play-state: paused; animation-delay: calc(var(--t, 0s) * -1 + 0.18s); }
.story-js .packet.p3:not(.relay) { animation-play-state: paused; animation-delay: calc(var(--t, 0s) * -1 + 0.36s); }

@keyframes drop-in {
    0%, 3% { transform: translate(-70px, -150px) rotate(-8deg); opacity: 0; }
    8% { opacity: 1; }
    17% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
    22%, 100% { transform: translate(0, 0) scale(0.6); opacity: 0; }
}
@keyframes drop-zone { 0%, 12% { opacity: 0; } 17%, 21% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes window-after { 0%, 20% { opacity: 0; } 25%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes window-before { 0%, 20% { opacity: 1; } 25%, 92% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes beams { 0%, 24% { opacity: 0; } 30%, 50% { opacity: 1; } 60%, 88% { opacity: 0.45; } 95%, 100% { opacity: 0; } }
@keyframes flow { to { stroke-dashoffset: -32; } }
@keyframes packet {
    0%, 27% { offset-distance: 0%; opacity: 0; }
    29% { opacity: 1; }
    41% { offset-distance: 100%; opacity: 1; }
    43%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes tv-on {
    0%, 41% { opacity: 0; transform: scale(1.12); filter: brightness(2); }
    49% { opacity: 1; filter: brightness(1.3); }
    57% { filter: brightness(1); }
    92% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}
@keyframes osd { 0%, 52% { opacity: 0; } 58%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes bar { 0%, 52% { transform: scaleX(0.95); } 92%, 100% { transform: scaleX(1.12); } }

/* Feature sections alternate text and screenshot. */
section { margin: 120px 0; }
section h2 { font-size: 40px; margin: 0 0 16px; }
.feature { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; }
.feature.flip { grid-template-columns: 1.2fr 0.8fr; }
.feature.flip .feature-text { order: 2; }
.feature-text p { color: var(--muted); font-size: 18px; }
.eyebrow { color: var(--sea-glass) !important; font-weight: 600; font-size: 15px !important; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px; }
.feature-shot { margin: 0; justify-self: center; width: 100%; max-width: 680px; }
.feature-shot.small { max-width: 400px; }
.feature-shot.wide { max-width: 760px; }

.more h2 { text-align: center; margin-bottom: 32px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.feature-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 22px 24px;
    transition: transform 0.25s, border-color 0.25s;
}
.feature-card:hover { transform: translateY(-4px); border-color: rgba(74, 224, 196, 0.45); }
.feature-card h3 { margin: 0 0 8px; font-size: 19px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 15px; }

.cta { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.cta p { color: var(--muted); }

/* Scroll reveal, switched on by the page's script only when motion is welcome. */
.animate .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(.2, .7, .2, 1), transform 0.9s cubic-bezier(.2, .7, .2, 1); }
.animate .reveal.visible { opacity: 1; transform: none; }
.animate .features .reveal:nth-child(2) { transition-delay: 0.1s; }
.animate .features .reveal:nth-child(3) { transition-delay: 0.2s; }

/* A gentle parallax on screenshots where the browser supports scroll-driven animations. */
@supports (animation-timeline: view()) {
    .feature-shot img { animation: parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes parallax { from { transform: translateY(30px); } to { transform: translateY(-30px); } }
}

/* The scene is drawn at 980 points so its lines meet the window and the TV; narrower windows scale it down. */
@media (min-width: 901px) and (max-width: 1060px) { .stage { zoom: 0.85; } }

@media (max-width: 900px) {
    .topbar-links a:not(.button) { display: none; }
    .wall figure { width: 240px; }
    header.hero .tagline { font-size: 18px; }
    .stage { height: auto; width: auto; display: flex; flex-direction: column; align-items: center; }
    .stage-window, .beams, .packet, .chip { display: none; }
    .tv { position: relative; top: 0; width: 100%; max-width: 560px; }
    section { margin: 80px 0; }
    section h2 { font-size: 30px; }
    .feature, .feature.flip { grid-template-columns: 1fr; gap: 28px; }
    .feature.flip .feature-text { order: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .layer.harbor img, .tv-osd, .stage-window img.after { opacity: 1; }
    .stage-window img.before { opacity: 0; }
    .beams { opacity: 0.45; }
    .chip, .packet, .drop-zone { display: none; }
}

/* Policy pages */
article { padding-top: 48px; padding-bottom: 24px; max-width: 760px; }
article h1 { font-size: 36px; margin-bottom: 4px; }
article h2 { font-size: 22px; margin-top: 32px; }
article .updated { color: var(--muted); margin-top: 0; }
article li { margin-bottom: 6px; }

footer { padding-top: 24px; padding-bottom: 48px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--border); }
footer a { color: var(--muted); margin-right: 16px; }
nav.top { padding-top: 20px; }
nav.top a { text-decoration: none; font-weight: 600; }