:root {
  --ink: #0b0c0f;
  --muted: #626976;
  --paper: #f4f5f7;
  --white: #ffffff;
  --line: #d9dde4;
  --blue: #4f6ee8;
  --cyan: #63e2df;
  --purple: #9274ed;
  --red: #ff5b55;
  --radius: 26px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); overflow-x: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.site-header {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 4vw, 72px);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(11,12,15,.09);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.brand img { width: 125px; height: auto; }
.brand > span { width: 1px; height: 25px; background: var(--line); }
.brand strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.site-header nav { display: flex; gap: 34px; margin-left: auto; margin-right: 34px; }
.site-header nav a { font-size: 13px; font-weight: 700; text-decoration: none; position: relative; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--ink); transition: right .25s ease; }
.site-header nav a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.language-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: white; color: #8a919c; cursor: pointer; font-size: 10px; font-weight: 850; letter-spacing: .06em; }
.language-toggle i { width: 1px; height: 13px; background: var(--line); }
.language-option { transition: color .2s ease; }
.language-option.is-active { color: var(--ink); }
.language-toggle:hover { border-color: #b8bec8; }
.language-toggle:focus-visible { outline: 3px solid rgba(79,110,232,.25); outline-offset: 2px; }
.header-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: white; border-radius: 999px; padding: 13px 18px; text-decoration: none; font-size: 13px; font-weight: 800; }
.header-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s; }
.header-cta:hover svg { transform: translateX(3px); }

.hero { min-height: calc(100svh - 82px); display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: clamp(40px, 7vw, 112px); padding: clamp(70px, 8vw, 125px) clamp(24px, 7vw, 118px); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 620px; height: 620px; right: -120px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(99,226,223,.27), rgba(146,116,237,.13) 45%, transparent 70%); filter: blur(4px); }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 11px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; color: #555d69; }
.eyebrow > span { width: 24px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.hero h1 { margin: 0; font-size: clamp(55px, 6.6vw, 112px); line-height: .87; letter-spacing: -.065em; font-weight: 900; }
.hero h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.07em; }
.hero-lede { max-width: 560px; margin: 34px 0 27px; color: #555d69; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 850; font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 7px; }
.text-link span { font-size: 18px; }

.hero-art { position: relative; min-height: 600px; display: grid; place-items: center; z-index: 1; }
.hero-frame { width: min(100%, 710px); aspect-ratio: 16/10.2; border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 42px 80px rgba(13,18,34,.28); transform: perspective(1100px) rotateY(-5deg) rotateX(1.5deg); }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-frame-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,8,15,.94), rgba(7,11,18,.3) 60%, rgba(4,8,15,.12)), linear-gradient(0deg, rgba(3,5,9,.7), transparent 60%); }
.hero-frame > p, .hero-frame > h2, .hero-frame-meta { position: absolute; left: 7%; color: white; }
.hero-frame > p { top: 13%; margin: 0; font-size: 9px; letter-spacing: .24em; font-weight: 800; }
.hero-frame > h2 { top: 20%; margin: 0; font-size: clamp(40px, 5vw, 72px); line-height: .82; letter-spacing: -.07em; }
.hero-frame-meta { bottom: 10%; display: flex; gap: 9px; }
.hero-frame-meta span { border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 9px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; backdrop-filter: blur(5px); }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(79,110,232,.22); }
.orbit-one { width: 620px; height: 620px; }
.orbit-two { width: 790px; height: 790px; border-color: rgba(99,226,223,.16); }
.signal-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.8); border-radius: 14px; box-shadow: 0 18px 40px rgba(10,18,35,.17); padding: 13px 16px; backdrop-filter: blur(12px); animation: float 5s ease-in-out infinite; }
.signal-card-top { top: 14%; right: -2%; }
.signal-card-bottom { bottom: 13%; left: -2%; animation-delay: -2.5s; }
.signal-card strong, .signal-card small { display: block; }
.signal-card strong { font-size: 12px; }
.signal-card small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.signal-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #e8edff; color: var(--blue); font-size: 22px; }
.signal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(99,226,223,.18); }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.experience { background: #101115; color: white; padding: clamp(72px, 8vw, 126px) clamp(24px, 5vw, 84px) clamp(82px, 9vw, 145px); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; max-width: 1440px; margin: 0 auto 46px; }
.section-heading h2, .value-intro h2 { margin: 0; font-size: clamp(42px, 5.2vw, 78px); line-height: .95; letter-spacing: -.055em; }
.section-heading > p { max-width: 410px; color: #9da4b0; font-size: 16px; line-height: 1.55; margin: 0; }
.experience .eyebrow { color: #9ba4b1; }
.surface-switcher { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1440px; margin: 0 auto; border: 1px solid #30333a; border-radius: 16px 16px 0 0; overflow: hidden; }
.surface-tab { border: 0; border-right: 1px solid #30333a; background: #16181d; color: #828995; padding: 18px 22px; font-size: 13px; font-weight: 800; cursor: pointer; text-align: left; transition: background .2s, color .2s; }
.surface-tab:last-child { border-right: 0; }
.surface-tab span { color: #545b66; margin-right: 18px; font-size: 11px; }
.surface-tab.is-active { background: white; color: var(--ink); }
.surface-tab.is-active span { color: var(--blue); }
.surface-tab b, .screen-story li b, .demo-note b, .closing-copy a b { font: inherit; }
.demo-stage { max-width: 1440px; margin: 0 auto; background: #191b20; border: 1px solid #30333a; border-top: 0; border-radius: 0 0 22px 22px; overflow: hidden; }
.screen { grid-template-columns: minmax(0, 1fr) 360px; min-height: 735px; }
.screen.is-active { display: grid; }
.screen[hidden] { display: none !important; }
.screen-story { border-left: 1px solid #30333a; padding: 70px 44px 50px; display: flex; flex-direction: column; background: #14161a; }
.story-number { margin: 0 0 auto; font-size: 10px; letter-spacing: .2em; font-weight: 850; color: #737b88; }
.screen-story h3 { font-size: 38px; line-height: 1.02; letter-spacing: -.05em; margin: 30px 0 22px; }
.screen-story > p:not(.story-number) { color: #9ca3ae; line-height: 1.6; font-size: 14px; margin: 0; }
.screen-story ul { list-style: none; padding: 0; margin: 30px 0 42px; display: grid; gap: 14px; font-size: 13px; font-weight: 650; }
.screen-story li { display: flex; gap: 12px; align-items: center; }
.screen-story li span { color: var(--cyan); }
.demo-note { margin-top: auto; border-top: 1px solid #2a2d34; padding-top: 19px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8d94a0; display: flex; align-items: center; gap: 9px; }
.demo-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(99,226,223,.11); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .35; } }

.browser-window { margin: 34px; background: white; color: var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,.35); align-self: center; }
.browser-bar { height: 40px; background: #ebedf1; display: grid; grid-template-columns: 90px 1fr 70px; align-items: center; padding: 0 14px; color: #8b929e; }
.window-dots { display: flex; gap: 6px; }
.window-dots span { width: 8px; height: 8px; border-radius: 50%; background: #c2c6ce; }
.window-dots span:first-child { background: #ff756b; }.window-dots span:nth-child(2) { background: #ffc85f; }.window-dots span:nth-child(3) { background: #56cf75; }
.address-bar { justify-self: center; background: #f8f9fa; border: 1px solid #dfe2e7; border-radius: 6px; width: min(70%, 430px); padding: 5px 12px; text-align: center; font-size: 8px; }
.browser-actions { text-align: right; font-size: 12px; letter-spacing: 2px; }
.publisher-site { background: #fff; }
.publisher-header { height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px; border-bottom: 1px solid #e1e3e7; }
.icon-button { border: 0; background: none; width: 28px; height: 28px; display: grid; align-content: center; gap: 5px; padding: 4px 0; cursor: pointer; }
.icon-button span { height: 1px; background: var(--ink); width: 19px; }
.publisher-logo { justify-self: center; font-family: Georgia, serif; font-weight: 900; font-size: 20px; letter-spacing: -.05em; text-decoration: none; }
.publisher-logo span { color: var(--red); }
.publisher-links { justify-self: end; display: flex; align-items: center; gap: 15px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.publisher-links button { border: 1px solid var(--ink); padding: 7px 9px; background: var(--ink); color: white; font-size: 7px; font-weight: 800; }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 28px; padding: 34px 36px 28px; }
.article-kicker { font-size: 8px; letter-spacing: .18em; font-weight: 850; color: #606773; margin: 0 0 12px; }
.article-grid article h3 { font-family: Georgia, serif; margin: 0; font-size: clamp(29px, 3vw, 43px); letter-spacing: -.045em; line-height: .97; font-weight: 500; }
.article-deck { max-width: 580px; color: #626874; font-family: Georgia, serif; font-size: 13px; line-height: 1.35; margin: 14px 0 13px; }
.byline { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.avatar { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #d6e3ea; font-size: 7px; font-weight: 850; }
.byline p { margin: 0; font-size: 7px; font-weight: 750; line-height: 1.45; }
.byline span { color: #858b95; font-weight: 500; }
.player { position: relative; width: 100%; aspect-ratio: 16/8.5; background: #0c1017; overflow: hidden; cursor: pointer; outline: none; }
.player video { width: 100%; height: 100%; object-fit: cover; }
.player-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,7,12,.72), transparent 55%), linear-gradient(0deg, rgba(3,5,9,.7), transparent 50%); }
.player-topline { position: absolute; inset: 13px 15px auto; display: flex; justify-content: space-between; align-items: center; color: white; font-size: 6px; letter-spacing: .1em; font-weight: 800; }
.anyclip-bug { display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; font-size: 7px; letter-spacing: .12em; }
.anyclip-bug i, .vertical-anyclip i { width: 13px; height: 13px; border-radius: 50%; background: white; position: relative; display: inline-block; }
.anyclip-bug i::after, .vertical-anyclip i::after { content: ""; position: absolute; left: 5px; top: 4px; border-left: 4px solid #111; border-top: 2.5px solid transparent; border-bottom: 2.5px solid transparent; }
.play-button, .vertical-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(7,10,16,.28); color: white; display: grid; place-items: center; backdrop-filter: blur(7px); cursor: pointer; transition: transform .2s, background .2s; }
.play-button:hover { transform: translate(-50%,-50%) scale(1.08); background: rgba(255,255,255,.18); }
.play-button:focus { outline: none; }.play-button:focus-visible { box-shadow: 0 0 0 3px var(--cyan); }
.play-button svg { width: 23px; height: 23px; fill: currentColor; }
.pause-icon { display: none; }
.is-playing .play-icon { display: none; }.is-playing .pause-icon { display: block; }
.player-copy { position: absolute; left: 16px; bottom: 31px; color: white; display: grid; }
.player-copy, .vertical-copy, .vertical-actions, .vertical-anyclip, .vertical-top, .episode-progress { transition: opacity .25s ease; }
.player.is-playing .player-copy { opacity: 0; }
.player-copy small { font-size: 6px; letter-spacing: .18em; margin-bottom: 3px; }
.player-copy strong { font-size: clamp(12px, 1.6vw, 22px); letter-spacing: -.04em; }
.player-controls { position: absolute; left: 15px; right: 15px; bottom: 10px; color: white; display: flex; align-items: center; gap: 8px; font-size: 7px; }
.control-play { font-size: 8px; }.progress { height: 2px; background: rgba(255,255,255,.3); flex: 1; overflow: hidden; }.progress i { display: block; height: 100%; width: 12%; background: var(--cyan); transition: width .25s linear; }.timecode { font-variant-numeric: tabular-nums; white-space: nowrap; }
.context-strip { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #f1f4fa; border: 1px solid #e1e5ed; }
.context-strip .pulse { width: 7px; height: 7px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 0 4px rgba(79,110,232,.12); }
.context-strip p { margin: 0; font-size: 7px; flex: 1; color: #707784; }.context-strip p strong { color: #252a33; margin-right: 5px; }.confidence { font-size: 7px; font-weight: 850; color: var(--blue); }
.article-body { font-family: Georgia, serif; font-size: 10px; line-height: 1.6; color: #424853; }
.article-rail { border-left: 1px solid #e2e4e8; padding-left: 20px; }
.article-rail > p { margin: 0 0 13px; font-size: 8px; letter-spacing: .2em; font-weight: 850; }
.rail-story { display: grid; grid-template-columns: 58px 1fr; gap: 9px; align-items: center; width: 100%; border: 0; border-bottom: 1px solid #e5e6e9; background: none; padding: 9px 0; text-align: left; cursor: pointer; }
.rail-story strong { font-family: Georgia, serif; font-size: 9px; line-height: 1.2; }.rail-thumb { aspect-ratio: 16/10; background-image: url("assets/eleven-minutes-key-art.png"); background-size: cover; position: relative; }.thumb-one { background-position: 58% center; }.thumb-two { background-position: 30% center; filter: saturate(.7); }.rail-thumb i { position: absolute; right: 2px; bottom: 2px; background: rgba(0,0,0,.7); color: white; font-size: 5px; padding: 2px; font-style: normal; }
.rail-story.is-selected { color: var(--blue); }.rail-note { margin-top: 18px; background: #f2f4f7; padding: 11px; display: flex; gap: 8px; }.rail-note > span { color: var(--blue); }.rail-note p { margin: 0; color: #777e89; font-size: 6px; line-height: 1.5; }.rail-note strong { color: #272b32; }

.mobile-showcase { min-height: 735px; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 47%, #303342 0, #1d1f25 45%, #16181d 75%); }
.phone-shadow { position: absolute; width: 260px; height: 60px; border-radius: 50%; background: rgba(0,0,0,.68); filter: blur(25px); bottom: 35px; }
.phone { width: 300px; height: 618px; border: 9px solid #090a0c; border-radius: 45px; background: #090a0c; box-shadow: inset 0 0 0 1px #3b3f48, 0 35px 70px rgba(0,0,0,.48); position: relative; overflow: hidden; }
.phone-speaker { position: absolute; z-index: 5; left: 50%; top: 9px; transform: translateX(-50%); width: 82px; height: 23px; border-radius: 20px; background: #08090b; }
.vertical-player { position: absolute; inset: 0; border-radius: 35px; overflow: hidden; cursor: pointer; }
.vertical-player > video { width: 100%; height: 100%; object-fit: cover; object-position: 66% center; }
.vertical-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2,4,8,.96), transparent 58%), linear-gradient(180deg, rgba(2,4,8,.55), transparent 25%); }
.phone-status { position: absolute; top: 11px; left: 20px; right: 17px; display: flex; justify-content: space-between; color: white; font-size: 9px; font-weight: 800; z-index: 6; }
.vertical-top { position: absolute; top: 38px; left: 13px; right: 13px; display: flex; justify-content: space-between; align-items: center; color: white; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.vertical-top button { border: 0; color: white; background: rgba(0,0,0,.23); width: 28px; height: 28px; border-radius: 50%; font-size: 18px; display: grid; place-items: center; line-height: 1; }
.episode-progress { position: absolute; top: 72px; left: 14px; right: 14px; display: flex; gap: 4px; }.episode-progress i { flex: 1; height: 2px; background: rgba(255,255,255,.28); }.episode-progress i:first-child { background: white; }
.vertical-play { width: 54px; height: 54px; }.vertical-play svg { width: 25px; fill: white; }.vertical-player.is-playing .vertical-play { opacity: 0; }
.vertical-actions { position: absolute; right: 13px; bottom: 122px; display: grid; gap: 18px; color: white; text-align: center; }.vertical-actions > span { display: grid; font-size: 23px; line-height: 1; }.vertical-actions small { font-size: 7px; margin-top: 5px; }
.vertical-copy { position: absolute; left: 17px; right: 60px; bottom: 29px; color: white; }.vertical-copy small { font-size: 7px; letter-spacing: .13em; color: #b9c0cc; }.vertical-copy strong { display: block; font-family: Georgia, serif; margin: 8px 0; font-size: 18px; line-height: 1.1; }.vertical-copy p { font-size: 9px; margin: 0; color: var(--cyan); font-weight: 800; }
.vertical-anyclip { position: absolute; right: 15px; bottom: 15px; color: white; display: flex; align-items: center; gap: 5px; font-size: 7px; font-weight: 850; letter-spacing: .1em; }.vertical-anyclip i { width: 12px; height: 12px; }.vertical-anyclip i::after { left: 4.5px; top: 3.5px; }
.vertical-player.is-playing .vertical-copy, .vertical-player.is-playing .vertical-actions, .vertical-player.is-playing .vertical-anyclip, .vertical-player.is-playing .vertical-top, .vertical-player.is-playing .episode-progress { opacity: 0; }
.mobile-float { position: absolute; border: 1px solid #40434c; border-radius: 13px; padding: 12px 15px; background: rgba(25,27,32,.82); backdrop-filter: blur(10px); box-shadow: 0 18px 36px rgba(0,0,0,.28); min-width: 130px; }.mobile-float strong, .mobile-float small { display: block; }.mobile-float strong { font-size: 12px; }.mobile-float small { font-size: 8px; color: #8f96a1; margin-top: 4px; }.float-one { left: 8%; top: 24%; }.float-two { right: 6%; bottom: 23%; }

.ctv-showcase { min-height: 735px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; padding: 35px; background: radial-gradient(circle at 50% 45%, #343746 0, #1e2027 44%, #15171b 75%); }
.tv { width: min(100%, 940px); filter: drop-shadow(0 35px 40px rgba(0,0,0,.42)); }.tv-screen { aspect-ratio: 16/9; border: 10px solid #08090b; border-radius: 8px; position: relative; overflow: hidden; background: #05080d; }.ctv-backdrop, .ctv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }.ctv-video { opacity: 0; z-index: 8; background: #05080d; pointer-events: none; }.ctv-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,6,11,.95) 0, rgba(3,6,11,.68) 35%, rgba(3,6,11,.05) 74%), linear-gradient(0deg, rgba(3,5,9,.9), transparent 55%); transition: opacity .35s ease; }
.tv-screen.is-playing .ctv-video { opacity: 1; }.tv-screen.is-playing .ctv-backdrop, .tv-screen.is-playing .ctv-shade, .tv-screen.is-playing .ctv-hero-copy, .tv-screen.is-playing .ctv-row { opacity: 0; pointer-events: none; }.tv-screen.is-playing .ctv-nav { z-index: 9; text-shadow: 0 1px 7px black; }
.ctv-nav { position: absolute; left: 3.5%; right: 3.5%; top: 4%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: white; font-size: clamp(7px, .7vw, 10px); }.ctv-nav > strong { font-family: Georgia, serif; font-size: clamp(13px, 1.6vw, 22px); }.ctv-nav > strong span { color: var(--red); }.ctv-nav nav { display: flex; gap: 24px; }.ctv-nav nav span { color: #aeb5c0; }.ctv-nav div { justify-self: end; }
.ctv-hero-copy { position: absolute; left: 5%; top: 13%; color: white; width: 42%; }.ctv-hero-copy > p:first-child { margin: 0 0 7px; font-size: clamp(6px, .55vw, 8px); font-weight: 850; letter-spacing: .19em; }.ctv-hero-copy h3 { margin: 0; font-size: clamp(32px, 4.8vw, 70px); line-height: .8; letter-spacing: -.075em; }.ctv-hero-copy > div { display: flex; gap: 9px; align-items: center; margin: 12px 0; font-size: clamp(6px, .55vw, 9px); color: #b8bec8; }.ctv-hero-copy > div span:nth-child(3), .ctv-hero-copy > div span:nth-child(4) { border: 1px solid #747b87; padding: 2px 4px; }.ctv-description { font-size: clamp(7px, .72vw, 10px); line-height: 1.45; color: #c1c7d0; max-width: 330px; }.ctv-play { border: 0; background: white; color: #101116; padding: clamp(6px, .7vw, 10px) clamp(10px, 1.3vw, 19px); border-radius: 4px; font-size: clamp(7px, .65vw, 10px); font-weight: 850; cursor: pointer; }
.ctv-row { position: absolute; left: 4%; right: 0; bottom: 1%; color: white; }.ctv-row > p { margin: 0 0 7px; font-size: clamp(7px, .7vw, 10px); font-weight: 750; }.episode-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-right: 4%; }.episode-card { color: white; background: none; border: 2px solid transparent; padding: 3px; text-align: left; cursor: pointer; min-width: 0; }.episode-card.is-focused { border-color: white; background: rgba(255,255,255,.12); transform: scale(1.035); }.episode-card strong, .episode-card small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.episode-card strong { font-size: clamp(6px, .6vw, 9px); margin-top: 4px; }.episode-card small { font-size: clamp(5px, .5vw, 7px); color: #aeb5c0; margin-top: 2px; }.ep-image { display: grid; place-items: center; aspect-ratio: 16/8.2; background-image: url("assets/eleven-minutes-key-art.png"); background-size: cover; }.ep-one { background-position: 65% center; }.ep-two { background-position: 35% center; filter: grayscale(.25); }.ep-three { background-position: 80% center; filter: hue-rotate(-10deg); }.ep-four { background-position: 50% 80%; filter: saturate(.65) brightness(.7); }.ep-image i { width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; font-style: normal; font-size: 7px; }.tv-chin { height: 18px; background: linear-gradient(#15171b,#08090b); margin: 0 2%; border-radius: 0 0 50% 50%; display: grid; place-items: center; }.tv-chin span { width: 30px; height: 2px; background: #292d34; }.platform-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; color: #808894; font-size: 8px; letter-spacing: .08em; }.platform-strip strong { color: #cfd4dc; font-size: 11px; }

.value { padding: clamp(85px, 10vw, 150px) clamp(24px, 7vw, 112px); background: #fff; }
.value-intro { display: flex; align-items: end; justify-content: space-between; margin-bottom: 70px; }
.value-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 24px; align-items: center; border-top: 1px solid var(--line); padding-top: 38px; }
.value-flow article { min-height: 270px; position: relative; display: flex; flex-direction: column; }.value-flow article > span { position: absolute; top: 0; right: 0; font-size: 10px; color: #7b828d; }.value-icon { width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 24px; margin-bottom: auto; }.value-flow h3 { font-size: 24px; margin: 28px 0 10px; letter-spacing: -.04em; }.value-flow p { margin: 0; font-size: 13px; color: #676e79; line-height: 1.55; max-width: 230px; }.value-flow > i { font-style: normal; color: #9da3ad; font-size: 21px; }

.closing { min-height: 650px; display: grid; grid-template-columns: 1.05fr .95fr; background: #0d0f13; color: white; }.closing-art { position: relative; overflow: hidden; min-height: 500px; }.closing-art img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }.closing-art div { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, #0d0f13), linear-gradient(0deg, rgba(13,15,19,.5), transparent 50%); }.closing-copy { padding: clamp(70px, 9vw, 135px) clamp(30px, 7vw, 110px) 70px 45px; display: flex; flex-direction: column; justify-content: center; }.eyebrow.light { color: #a7aeb9; }.closing-copy h2 { font-size: clamp(42px, 5vw, 74px); line-height: .98; letter-spacing: -.06em; margin: 0 0 28px; }.closing-copy h2 em { font-family: Georgia, serif; font-weight: 400; }.closing-copy > p:not(.eyebrow) { max-width: 600px; color: #9ca3ae; line-height: 1.6; font-size: 16px; }.closing-copy a { align-self: flex-start; margin-top: 24px; background: linear-gradient(100deg, #79c8ff, #67ead8); color: #0d1014; border-radius: 999px; padding: 16px 22px; font-size: 13px; font-weight: 850; text-decoration: none; }.closing-copy a span { margin-left: 15px; }
footer { min-height: 110px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 25px clamp(24px, 5vw, 72px); background: #07080a; color: #747b86; border-top: 1px solid #202228; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } footer img { width: 100px; filter: invert(1); } footer p:last-child { justify-self: end; }

html[lang="zh-CN"] { font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif; }
html[lang="zh-CN"] .hero h1,
html[lang="zh-CN"] .section-heading h2,
html[lang="zh-CN"] .value-intro h2,
html[lang="zh-CN"] .closing-copy h2 { letter-spacing: -.045em; }
html[lang="zh-CN"] .article-grid article h3,
html[lang="zh-CN"] .article-deck,
html[lang="zh-CN"] .article-body,
html[lang="zh-CN"] .rail-story strong,
html[lang="zh-CN"] .vertical-copy strong { font-family: "Songti SC", "STSong", Georgia, serif; }
html[lang="zh-CN"] .eyebrow,
html[lang="zh-CN"] .article-kicker,
html[lang="zh-CN"] .demo-note { letter-spacing: .1em; }
html[lang="zh-CN"] .hero-lede { max-width: 610px; }
html[lang="zh-CN"] .screen-story h3 { line-height: 1.12; letter-spacing: -.035em; }
html[lang="zh-CN"] .ctv-hero-copy h3 { line-height: .95; letter-spacing: -.04em; }

@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr 1.15fr; gap: 35px; padding-left: 45px; padding-right: 45px; }
  .hero-art { min-height: 520px; }.signal-card-top { right: -1%; }.screen { grid-template-columns: minmax(0,1fr) 300px; }.screen-story { padding: 50px 30px 40px; }.browser-window { margin: 24px; }.article-grid { grid-template-columns: 1fr 145px; padding: 28px 27px 22px; }.mobile-float { display: none; }
}

@media (max-width: 900px) {
  .site-header nav { display: none; }.brand strong { display: none; }.brand > span { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 80px; text-align: center; }.hero-copy { display: flex; flex-direction: column; align-items: center; }.eyebrow { justify-content: center; }.hero h1 { font-size: clamp(58px, 13vw, 95px); }.hero-art { width: 100%; max-width: 760px; margin: 0 auto; }.orbit-two { width: 680px; height: 680px; }
  .section-heading { display: block; text-align: center; }.section-heading .eyebrow { justify-content: center; }.section-heading > p { margin: 22px auto 0; }.surface-switcher { grid-template-columns: 1fr; border-radius: 16px 16px 0 0; }.surface-tab { border-right: 0; border-bottom: 1px solid #30333a; }.screen.is-active { grid-template-columns: 1fr; }.screen-story { border-left: 0; border-top: 1px solid #30333a; min-height: 440px; }.story-number { margin-bottom: 60px; }.screen-story h3 br { display: none; }.browser-window { margin: 22px; }.mobile-showcase, .ctv-showcase { min-height: 700px; }.value-intro { display: block; }.value-flow { grid-template-columns: 1fr 1fr; gap: 45px; }.value-flow > i { display: none; }.closing { grid-template-columns: 1fr; }.closing-art { min-height: 460px; }.closing-art div { background: linear-gradient(0deg,#0d0f13,transparent 45%); }.closing-copy { padding: 30px 40px 90px; text-align: center; align-items: center; }.closing-copy .eyebrow { justify-content: center; }
}

@media (max-width: 640px) {
  .site-header { height: 72px; padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
  .brand img { width: 96px; }
  .header-actions { gap: 6px; }
  .language-toggle { min-height: 44px; padding: 0 9px; gap: 5px; font-size: 9px; }
  .header-cta { font-size: 0; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .header-cta svg { width: 19px; }
  .hero { min-height: auto; padding: 60px 18px 48px; }
  .hero h1 { font-size: clamp(48px, 15vw, 58px); line-height: .9; }
  html[lang="zh-CN"] .hero h1 { font-size: clamp(46px, 14vw, 55px); line-height: .98; }
  .hero-lede { margin-top: 26px; font-size: 16px; }
  .hero-art { min-height: 410px; }
  .hero-frame { transform: none; aspect-ratio: 4/5; width: 85%; }
  .hero-frame img { object-position: 66% center; }
  .hero-frame-shade { background: linear-gradient(0deg, rgba(4,8,15,.94), transparent 68%); }
  .hero-frame > p, .hero-frame > h2, .hero-frame-meta { left: 8%; }
  .hero-frame > p { top: auto; bottom: 30%; }
  .hero-frame > h2 { top: auto; bottom: 13%; }
  .hero-frame-meta { display: none; }
  .orbit { display: none; }
  .signal-card { padding: 10px 12px; max-width: 54%; }
  .signal-card-top { top: 11%; right: 0; }
  .signal-card-bottom { left: 0; bottom: 6%; }
  .signal-card strong { font-size: 10px; }
  .signal-card small { font-size: 8px; }
  .experience { padding: 70px 10px 85px; }
  .section-heading { padding: 0 12px; }
  .section-heading h2 { font-size: 43px; }
  .surface-switcher { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .surface-tab { min-height: 66px; padding: 11px 5px; border-right: 1px solid #30333a; border-bottom: 0; text-align: center; font-size: 10px; line-height: 1.25; }
  .surface-tab:last-child { border-right: 0; }
  .surface-tab span { display: block; margin: 0 0 5px; }
  .surface-tab b { display: block; }
  .demo-stage { border-radius: 0 0 16px 16px; }
  .screen-story { padding: 42px 25px; min-height: 0; }
  .story-number { margin-bottom: 48px; }
  .screen-story h3 { font-size: 35px; }
  .screen-story ul { margin-bottom: 34px; }
  .demo-note { min-height: 44px; }
  .browser-window { margin: 10px; border-radius: 8px; }
  .browser-bar { grid-template-columns: 55px 1fr 35px; padding: 0 8px; }
  .address-bar { width: 94%; overflow: hidden; white-space: nowrap; }
  .publisher-header { padding: 0 13px; height: 52px; }
  .icon-button { min-width: 44px; min-height: 44px; }
  .publisher-links span { display: none; }
  .publisher-links button { min-height: 32px; padding: 6px; }
  .article-grid { display: block; padding: 22px 18px; }
  .article-grid article h3 { font-size: 34px; }
  .article-rail { display: none; }
  .player { aspect-ratio: 16/10.5; }
  .play-button { width: 52px; height: 52px; }
  .context-strip { padding: 8px; }
  .context-strip p { font-size: 6px; }
  .confidence { display: none; }
  .mobile-showcase { min-height: 665px; }
  .phone { width: min(286px, calc(100vw - 44px)); height: min(590px, calc((100vw - 44px) * 2.06)); min-height: 540px; }
  .vertical-top button { width: 44px; height: 44px; }
  .ctv-showcase { min-height: 420px; padding: 22px 8px; }
  .tv-screen { border-width: 5px; }
  .ctv-description { display: none; }
  .ctv-play { min-height: 28px; }
  .episode-row { gap: 3px; }
  .platform-strip { gap: 12px; }
  .value { padding: 80px 24px; }
  .value-intro h2 { font-size: 52px; }
  .value-flow { grid-template-columns: 1fr; gap: 40px; }
  .value-flow article { min-height: 220px; border-bottom: 1px solid var(--line); padding-bottom: 35px; }
  .value-flow article:last-child { border-bottom: 0; }
  .closing-art { min-height: 400px; }
  .closing-copy { padding: 18px 24px calc(75px + env(safe-area-inset-bottom)); }
  .closing-copy h2 { font-size: 44px; }
  .closing-copy a { min-height: 48px; display: inline-flex; align-items: center; }
  footer { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 38px 20px calc(38px + env(safe-area-inset-bottom)); }
  footer p:last-child { justify-self: center; }
}

@media (max-width: 360px) {
  .site-header { padding-left: 10px; padding-right: 10px; }
  .brand img { width: 88px; }
  .language-toggle { padding: 0 7px; }
  .header-actions { gap: 4px; }
  .hero { padding-left: 14px; padding-right: 14px; }
  .hero h1 { font-size: 46px; }
  html[lang="zh-CN"] .hero h1 { font-size: 43px; }
  .section-heading h2 { font-size: 38px; }
  .surface-tab { font-size: 9px; }
  .screen-story h3 { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}