/* Hallmark · shape: Mission and hangar (full-screen chapters with the picture edge to edge, then each product shown on its own stand with a spec strip) · genre: modern-minimal · theme: custom · redesign: full · job: try · idea: "Announce AI products the way launches are announced: one picture, one sentence, one action per screen" · vibe: "black, engineered, full bleed, quiet confidence"
 * paper: oklch(9% 0.004 260) · accent: oklch(76% 0.12 236), the BOLATEK logo blue, only on what is live · display: Archivo condensed 600, capitals · body: Archivo · hero: the AI as a light in the dark, fine dust drifting into it; it breathes at rest and changes shape while it thinks, the headline low and left · nav: edge-aligned bar on a scrim · footer: colophon block · imagery: the AI light, then one photograph (Guangzhou at dusk from the office window) held still behind the last three chapters, the user's office photographs, real INOS and Filmily output, Frey and PiEv built as live interfaces · signature: Frey's replay full screen, the agent stopping to ask before it runs a command
 * axes: dark/display-condensed/neutral · posture: drenched (the black ground, pictures edge to edge, the blue only on live status and focus) · motion: the AI light (thinks on its own and when a visitor reaches for an action), the Frey replay, the Filmily reel and the INOS voice line; one control in the nav stops all of it, phones get a lighter render, reduced motion keeps the posters · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V5 · weakest: S, a launch-page voice could fit any company; every chapter carries a real product and its real facts, and the hero is our own office view */
/* Hallmark · waive 84 · Frey and PiEv are shown as built live interfaces · the owner asked for products expressed in their own interfaces rather than screenshots */
/* Hallmark · waive 37 · Archivo for Latin plus one system face per page picked by :lang and a code face for the replay · eleven languages each need their own script, and each page renders only one fallback */
/* Hallmark · waive 49b · the BOLATEK office address on a phone wraps to two lines · a postal address cannot shorten and stays one link to the map for every visitor to BOLATEK */
/* Hallmark · waive 83 · full-screen photographs and product pictures edge to edge · the owner asked for the SpaceX manner, where the picture is each chapter */
/* Hallmark · dropped the outsourcing record (50+ clients, 100+ projects, 6 teams, 500+ consulting clients), the client logo wall, the service list and 塔洛数智人 (intro.pdf, dhintro.pptx) · the owner is retiring the outsourcing story and the digital human product for the AI products */
/* Hallmark · dropped assets/js/jquery.min.js, assets/js/jquery.dropotron.min.js, assets/js/jquery.scrollex.min.js, assets/js/browser.min.js, assets/js/breakpoints.min.js, assets/js/util.js, assets/js/main.js, #navPanel · the template's jQuery menu chrome; the new nav is plain links and details menus */
/* Hallmark · dropped /images/bolatek/dhintro.pptx, /images/bolatek/intro.pdf, index.html, logow.png, #banner, 2024 as a figure · 塔洛数智人 is retired at the owner's request, the wordmark links to /, the logo banner gave way to the headline and 2024 is now a timeline year */
/* Hallmark · dropped headings BOLATEK INC., 联系我们, 关于我们, 产品及技术储备, 项目经验, mov, takiroki ai, 塔洛数智人, OSZERO 手表应用, 公司简介, 技术人才储备, 解决方案, 企业文化 and images logow.png, mov.png, logo1.png, dh.jpg, oszero-default.png, 20241209124154.png, 20241209123721.png, 20241209114642.png, 20241209130200.png, 20241207162046.jpg · the owner asked to retire the outsourcing story and 塔洛数智人; mov, takiroki ai and OSZERO stay as links under earlier work */
/* Hallmark · dismissed kept · BOLATEK INC., 企业文化, the 2024 figure and #banner are on the record as dropped above; 2024 survives as a timeline year */
/* Hallmark · waive 59 · full-screen AI chapters meet edge to edge on the home page · each chapter is its own picture, so the change of photograph is the seam */
/* Hallmark · dismissed 77 · the about page is a short record of BOLATEK: the banner, the timeline with the office, and the contact chapter */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- type ---------- */
body { background: var(--color-paper); color: var(--color-ink); }
h1, h2 { font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; line-height: 1.02; letter-spacing: var(--tracking-display); }
h1 { font-size: clamp(2.75rem, 6vw, 6rem); max-width: 14ch; }
h2 { font-size: clamp(2.25rem, 4.2vw, 4.25rem); max-width: 18ch; }
h3 { font-size: var(--text-title); font-weight: 600; line-height: 1.25; }
:lang(zh) h1, :lang(zh) h2, :lang(ja) h1, :lang(ja) h2, :lang(ko) h1, :lang(ko) h2 { line-height: 1.18; letter-spacing: 0.02em; font-weight: 600; }
:lang(zh) h1, :lang(ja) h1, :lang(ko) h1 { max-width: 10em; }
:lang(zh) h2, :lang(ja) h2, :lang(ko) h2 { max-width: 14em; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) .stand__tag, :lang(ja) h1, :lang(ja) h2, :lang(ja) .stand__tag { word-break: keep-all; overflow-wrap: anywhere; }
:lang(ko) { word-break: keep-all; }
:lang(zh) .chapter__body .lead, :lang(ja) .chapter__body .lead, :lang(ko) .chapter__body .lead { max-width: 28em; }
:lang(zh) body, :lang(ja) body, :lang(ko) body { line-height: 1.75; }
:lang(ar) h1, :lang(ar) h2 { line-height: 1.3; letter-spacing: 0; }
:lang(ar) body { line-height: 1.8; }
p { margin: 0; }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.caption, figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.muted { color: var(--color-muted); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-xl); border: 2px solid var(--color-ink); border-radius: 0; background: none; color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); }
.btn--ghost { border-color: var(--color-rule-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.link { color: var(--color-ink); text-decoration-line: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-ink); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.skip { position: absolute; inset-inline-start: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- nav ---------- */
.nav { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-sticky-nav); background: linear-gradient(180deg, var(--color-shade), transparent); transition: background-color var(--dur-short) var(--ease-out); }
.nav.is-solid { background: var(--color-scrim); }
.nav__bar { display: flex; align-items: center; gap: var(--space-lg); min-height: 72px; }
.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.wordmark__en { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; font-stretch: 78%; text-transform: uppercase; letter-spacing: 0.02em; }
.wordmark { align-items: center; }
.mark { width: auto; height: 26px; }
.wordmark__en--ai { text-transform: none; font-stretch: 85%; letter-spacing: 0; }
.mark--light { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, var(--color-ink) 0%, var(--color-ink) 22%, color-mix(in oklch, var(--color-ink) 45%, transparent) 45%, transparent 70%); }
.wordmark__ai { font-size: var(--text-sm); color: var(--color-muted); padding-inline-start: var(--space-sm); border-inline-start: var(--rule-hair) solid var(--color-rule-2); }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__primary { margin-inline-start: var(--space-xl); }
.nav__links { display: flex; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.nav__links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--color-ink); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.nav__tools { display: flex; align-items: center; gap: var(--space-2xs); margin-inline-start: auto; }
.nav__tools .btn { min-height: 40px; padding: 0 var(--space-lg); }
.pop { position: relative; }
.pop > summary { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; list-style: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.pop > summary::-webkit-details-marker { display: none; }
.pop > summary:hover, .pop[open] > summary { color: var(--color-ink); }
.pop > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.pop > summary svg { width: 16px; height: 16px; flex-shrink: 0; }
.pop__panel { color: var(--color-ink); position: absolute; inset-inline-end: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); min-width: 16rem; margin: 0; padding: var(--space-xs); list-style: none; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.pop__panel--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 30rem; }
.pop__panel a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.pop__panel a:hover { background: var(--color-paper-3); color: var(--color-ink); }
.pop__panel a[aria-current] { color: var(--color-accent); }
.pop__panel a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.menu { display: none; }
.fx-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--color-ink-2); cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.fx-toggle:hover { color: var(--color-ink); }
.fx-toggle:active { transform: translateY(1px); }
.fx-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.fx-toggle svg { width: 16px; height: 16px; }
.fx-toggle .i-play, .fx-toggle[aria-pressed="true"] .i-pause { display: none; }
.fx-toggle[aria-pressed="true"] .i-play { display: block; }
html:not(.js) .fx-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .fx-toggle { display: none; } }

/* ---------- chapters: one picture, one sentence, one action ---------- */
.chapter { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--color-paper); scroll-margin-top: 0; }
.chapter__media { position: absolute; inset: 0; z-index: -1; margin: 0; }
.chapter__media > img, .chapter__media .reel img { width: 100%; height: 100%; object-fit: cover; }
.chapter__media > img { filter: brightness(0.62) saturate(0.9); }
.hero .chapter__media > img { filter: brightness(0.82); }
.chapter__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-shade) 0%, transparent 50%), linear-gradient(90deg, var(--color-shade) 0%, var(--color-shade) 30%, transparent 72%); pointer-events: none; }
[dir="rtl"] .chapter__media::after { background: linear-gradient(0deg, var(--color-shade) 0%, transparent 50%), linear-gradient(270deg, var(--color-shade) 0%, var(--color-shade) 30%, transparent 72%); }
.chapter__body { display: grid; gap: var(--space-lg); justify-items: start; max-width: 40rem; padding-block: var(--space-4xl) var(--space-3xl); }
.chapter__body .lead { max-width: 45ch; }
/* the AI light and the horizon: a poster picture, and a canvas that fades in over it once WebGL is running */
.scene picture, .scene img, .scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene img { object-fit: cover; }
.scene canvas { display: block; opacity: 0; transition: opacity 1200ms var(--ease-out); }
.scene canvas.is-live { opacity: 1; }
[dir="rtl"] .hero .scene img { transform: scaleX(-1); }
.hero .chapter__media::after { background: linear-gradient(0deg, var(--color-shade) 0%, transparent 40%), linear-gradient(90deg, var(--color-shade) 0%, transparent 55%); }
[dir="rtl"] .hero .chapter__media::after { background: linear-gradient(0deg, var(--color-shade) 0%, transparent 40%), linear-gradient(270deg, var(--color-shade) 0%, transparent 55%); }
.kicker { font-size: var(--text-md); font-weight: 500; color: var(--color-ink-2); }
/* the run: one photograph held still behind the last chapters while their content scrolls over it */
.run { position: relative; isolation: isolate; }
.backdrop { position: sticky; top: 0; z-index: -1; height: 100svh; margin: 0 0 -100svh; overflow: hidden; }
.backdrop > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.9); }
.backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-shade) 0%, transparent 50%), linear-gradient(90deg, var(--color-shade) 0%, var(--color-shade) 30%, transparent 72%); pointer-events: none; }
[dir="rtl"] .backdrop::after { background: linear-gradient(0deg, var(--color-shade) 0%, transparent 50%), linear-gradient(270deg, var(--color-shade) 0%, var(--color-shade) 30%, transparent 72%); }
.chapter--clear { background: transparent; }
.settle { animation: settle 900ms var(--ease-out) both; }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .settle { animation: none; } }

/* ---------- the hangar: products on their own stand ---------- */
.hangar-head { padding-block: var(--section-gap-s) var(--space-2xl); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md) var(--gap-columns); align-items: end; }
.hangar-head .lead { max-width: 40ch; }
.index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 var(--space-2xl); padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.index .brand-link { display: grid; gap: var(--space-2xs); padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-bottom: 2px solid transparent; color: var(--color-ink); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
.index .brand-link:hover { border-color: var(--color-ink); }
.index .brand-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.index b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; font-stretch: 78%; text-transform: uppercase; }
.index span { font-size: var(--text-sm); color: var(--color-muted); }

.stand { position: relative; isolation: isolate; scroll-margin-top: 72px; border-top: var(--rule-hair) solid var(--color-rule); }
.stand__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: min(100svh, 860px); padding-block: var(--section-gap-s); }
.stand--flip .stand__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.stand--flip .stand__text { order: 2; }
.stand__text { display: grid; gap: var(--space-md); justify-items: start; }
.stand h3 { font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 5.25rem); font-weight: 600; font-stretch: 72%; text-transform: uppercase; line-height: 1.02; letter-spacing: 0; }
.status { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.status--live { color: var(--color-accent); }
.stand__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.stand__tag { font-size: var(--text-xl); font-weight: 600; color: var(--color-ink); line-height: 1.3; max-width: 22ch; }
:lang(zh) .stand__tag, :lang(ja) .stand__tag, :lang(ko) .stand__tag { max-width: 16em; }
.stand__body { color: var(--color-ink-2); max-width: 46ch; }
.points { display: grid; gap: var(--space-sm); width: 100%; margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
.points li { display: grid; gap: var(--space-3xs); padding-inline-start: var(--space-md); border-inline-start: 2px solid var(--color-rule-2); }
.points b { font-weight: 600; color: var(--color-ink); }
.points span { font-size: var(--text-sm); color: var(--color-ink-2); }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); width: 100%; margin: var(--space-sm) 0 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.specs > div { display: grid; align-content: start; gap: var(--space-2xs); }
.specs dd { order: 1; margin: 0; font-size: var(--text-md); font-weight: 600; color: var(--color-ink); line-height: 1.35; }
.specs dt { order: 2; font-size: var(--text-sm); color: var(--color-muted); }
.stand__visual { margin: 0; position: relative; }
.stage { position: relative; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); overflow: hidden; }
.stage__bar, .stage__foot { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); color: var(--color-muted); font-family: var(--font-outlier); font-size: var(--text-xs); direction: ltr; }
.stage__bar { border-bottom: var(--rule-hair) solid var(--color-rule); }
.stage__foot { border-top: var(--rule-hair) solid var(--color-rule); }
.stage__foot .on { color: var(--color-accent); }

/* Frey: the replay */
.replay { display: grid; grid-template-rows: auto 1fr auto; min-height: 540px; font-family: var(--font-outlier); font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2); }
.replay__log { display: grid; align-content: start; gap: var(--space-md); margin: 0; padding: var(--space-xl); list-style: none; direction: ltr; text-align: left; }
.replay__log li { overflow-wrap: anywhere; }
.replay__log code { font: inherit; }
.replay__log .t { color: var(--color-ink); font-weight: 600; margin-inline-end: var(--space-sm); }
.replay__log .p { color: var(--color-accent); margin-inline-end: var(--space-xs); }
.replay__log .l-prompt { color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-lg); padding-bottom: var(--space-xs); }
.replay__log .diff { color: var(--color-muted); margin-inline-start: var(--space-sm); }
.replay__log .l-ok { color: var(--color-success); }
.replay__log .l-say { color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-lg); padding-top: var(--space-xs); }
.ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); padding: var(--space-md); background: var(--color-paper-3); font-family: var(--font-body); }
.ask__q { color: var(--color-ink); margin-inline-end: auto; }
.choices { display: inline-flex; gap: var(--space-sm); white-space: nowrap; }
.choice { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-muted); font-size: var(--text-sm); }
.choice.is-on { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
:lang(ar) .replay__log .l-prompt, :lang(ar) .replay__log .l-say, :lang(ar) .ask { direction: rtl; text-align: right; }
.js .replay.is-live .replay__log li:not(.l-prompt) { opacity: 0; transform: translateY(4px); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.js .replay.is-live .replay__log li.is-shown { opacity: 1; transform: none; }
.js .replay.is-live .choice.is-on { background: transparent; border-color: var(--color-rule-2); color: var(--color-muted); }
.js .replay.is-live .choice.is-on.is-picked { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
@media (prefers-reduced-motion: reduce) { .js .replay.is-live .replay__log li:not(.l-prompt) { opacity: 1; transform: none; } }
.vendors { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 46ch; }

/* PiEv: a proposal */
.proposal { display: grid; gap: var(--space-lg); padding: var(--space-xl); }
.proposal dl { display: grid; gap: var(--space-sm); margin: 0; }
.proposal__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-family: var(--font-outlier); font-size: var(--text-sm); direction: ltr; text-align: left; }
.proposal__row dt { color: var(--color-muted); } .proposal__row dd { margin: 0; color: var(--color-ink); }
.versions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: baseline; font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); direction: ltr; }
.versions b { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; font-stretch: 78%; color: var(--color-ink); }

/* Filmily: the reel */
.film { aspect-ratio: 16 / 9; }
.reel { position: absolute; inset: 0; }
.reel img { width: 100%; height: 100%; object-fit: cover; }
.reel img { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms var(--ease-in-out); }
.reel img.is-on { opacity: 1; }
html:not(.js) .reel img:first-child { opacity: 1; }
.tracks { container-type: inline-size; position: relative; display: grid; gap: var(--space-2xs); margin-top: var(--space-md); direction: ltr; width: 100%; }
.track-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-ink-2); }
.lane { position: relative; height: 14px; background: var(--color-paper-2); }
.lane span { position: absolute; top: 0; bottom: 0; background: var(--color-ink-2); }
.lane--voice span { background: var(--color-accent); }
.playhead { position: absolute; top: -4px; bottom: -4px; left: calc(4.5rem + var(--space-sm)); width: 2px; background: var(--color-ink); animation: play 20s linear infinite; }
@keyframes play { from { transform: translateX(0); } to { transform: translateX(calc(100cqi - 4.5rem - var(--space-sm))); } }
html:not(.js) .playhead, html.fx-off .playhead { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .playhead { animation: none; } }

/* INOS: the product on its stand, voice line over it */
.screen { position: relative; margin: 0 0 var(--space-xl); aspect-ratio: 1568 / 720; overflow: visible; }
.screen > img { border: var(--rule-hair) solid var(--color-rule); }
.voice { z-index: 2; position: absolute; inset-inline-end: var(--space-lg); bottom: calc(-1 * var(--space-xl)); display: grid; gap: var(--space-sm); width: min(24rem, 80%); }
.bubble { padding: var(--space-md) var(--space-lg); font-size: var(--text-md); }
.bubble--you { justify-self: end; background: var(--color-ink); color: var(--color-paper); }
.bubble--ai { justify-self: start; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink); }
.wave { display: flex; gap: var(--space-2xs); align-items: center; height: 24px; }
.wave i { width: 3px; height: 100%; background: var(--color-accent); transform: scaleY(0.25); animation: wave 1.2s var(--ease-in-out) infinite alternate; animation-delay: calc(var(--d) * 90ms); }
@keyframes wave { to { transform: scaleY(1); } }
html.fx-off .wave i, html:not(.js) .wave i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .wave i { animation: none; transform: scaleY(0.6); } }

/* INOS Platform: one definition, six ways in */
.diagram { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, 0.8fr) minmax(0, 1.1fr); align-items: center; align-content: center; min-height: 460px; margin: 0; padding: var(--space-xl); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); direction: ltr; }
.diagram__core { justify-self: end; padding: var(--space-md) var(--space-lg); border: 2px solid var(--color-ink); color: var(--color-ink); font-family: var(--font-outlier); font-size: var(--text-md); }
.diagram__out { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.diagram__out li { padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); font-size: var(--text-sm); }
.diagram__lines { align-self: stretch; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.diagram__lines path { fill: none; stroke: var(--color-rule-2); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---------- method ---------- */
.method { padding-block: var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.method .head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md) var(--gap-columns); align-items: end; margin-bottom: var(--space-3xl); }
.seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: seat; }
.seats li { counter-increment: seat; display: grid; align-content: start; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 2px solid var(--color-rule-2); }
.seats li:first-child { border-top-color: var(--color-ink); }
.seats li::before { content: counter(seat, decimal-leading-zero); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; font-stretch: 78%; color: var(--color-muted); font-variant-numeric: tabular-nums; line-height: 1; }
.seats h3 { font-size: var(--text-xl); }
.seats p { color: var(--color-ink-2); }
.method__note { margin-top: var(--space-2xl); max-width: 60ch; color: var(--color-muted); }

/* ---------- enterprise and contact chapters ---------- */
.offers { display: grid; gap: 0; margin: var(--space-sm) 0 0; padding: 0; list-style: none; width: 100%; border-top: var(--rule-hair) solid var(--color-rule-2); }
.offers li { display: grid; gap: var(--space-3xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.offers h3 { font-size: var(--text-lg); }
.offers p { color: var(--color-ink-2); font-size: var(--text-md); }
.contacts { display: grid; width: 100%; margin: var(--space-sm) 0 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.contacts > div { display: grid; grid-template-columns: minmax(5rem, 1fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.contacts dt { color: var(--color-ink-2); font-size: var(--text-sm); padding-top: 0.15em; }
.contacts dd { margin: 0; overflow-wrap: anywhere; }
.contacts a { color: var(--color-ink); text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
.contacts a:hover { text-decoration-color: var(--color-ink); }

/* ---------- about ---------- */
.banner { padding-block: calc(72px + var(--space-4xl)) var(--space-xl); }
.banner__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: end; }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-md) var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.timeline li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.timeline .year { font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 600; font-stretch: 72%; text-transform: uppercase; line-height: 1; font-variant-numeric: tabular-nums; }
.timeline p { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 46ch; }
.section { padding-block: var(--space-2xl) var(--section-gap); }
.banner + .section { padding-top: var(--space-xl); }
.gallery { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.gallery [data-slot] { min-height: 560px; height: 100%; }
.gallery figure { margin: 0; }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md) var(--gap-columns); align-items: end; }

/* ---------- footer ---------- */
.footer { padding-block: var(--space-3xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.footer__statement { max-width: 24ch; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; font-stretch: 78%; text-transform: uppercase; line-height: 1.15; }
:lang(zh) .footer__statement, :lang(ja) .footer__statement, :lang(ko) .footer__statement { max-width: 20em; line-height: 1.4; }
.footer__cols { display: grid; grid-template-columns: minmax(0, 6fr) repeat(3, minmax(0, 2fr)); gap: var(--space-xl) var(--gap-columns); margin-top: var(--space-2xl); }
.footer__brand { display: grid; gap: var(--space-xs); align-content: start; }
.footer__cols h2 { margin-bottom: var(--space-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; font-stretch: 100%; text-transform: none; letter-spacing: 0; color: var(--color-muted); }
.footer__cols ul { display: grid; margin: 0; padding: 0; list-style: none; }
.footer__cols a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-ink-2); text-decoration: none; }
.footer__cols a:hover { color: var(--color-ink); text-decoration: underline; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.footer__legal a { color: var(--color-muted); }
.footer__legal a:hover { color: var(--color-ink); }

/* ---------- one reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- tablet ---------- */
@media (max-width: 64rem) {
  .nav__primary { display: none; }
  .menu { display: block; }
  .hangar-head, .stand__grid, .stand--flip .stand__grid, .method .head, .banner__grid, .head { grid-template-columns: minmax(0, 1fr); }
  .stand--flip .stand__text { order: 0; }
  .stand__grid { min-height: 0; gap: var(--space-2xl); padding-block: var(--space-3xl); }
  .index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .screen { margin-bottom: 0; }
  .voice { position: absolute; inset-inline: var(--space-sm); bottom: auto; top: calc(100% + var(--space-sm)); width: auto; }
  .stand:has(.screen) .stand__visual { padding-bottom: 13rem; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 40rem) {
  .nav__bar { gap: var(--space-xs); min-height: 64px; }
  .wordmark__ai { display: none; }
  .nav__tools .btn { display: none; }
  .pop__panel--grid { grid-template-columns: minmax(0, 1fr); min-width: 0; width: 15rem; max-height: 70svh; overflow-y: auto; }
  .chapter__body { padding-block: var(--space-4xl) var(--space-2xl); }
  .chapter__media::after, [dir="rtl"] .chapter__media::after, .backdrop::after, [dir="rtl"] .backdrop::after { background: linear-gradient(0deg, var(--color-paper) 0%, var(--color-shade) 45%, transparent 75%); }
  .backdrop > img { filter: brightness(0.42) saturate(0.9); }
  .chapter .actions .btn { flex: 1 1 auto; }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .replay { font-size: var(--text-xs); min-height: 0; }
  .replay__log { padding: var(--space-md); gap: var(--space-sm); }
  .replay__log .l-prompt, .replay__log .l-say { font-size: var(--text-md); }
  .proposal { padding: var(--space-lg); }
  .proposal__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .diagram { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-lg); min-height: 0; padding: var(--space-lg); }
  .diagram__lines { display: none; }
  .diagram__core { justify-self: center; }
  .diagram__out { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seats { grid-template-columns: minmax(0, 1fr); }
  .timeline li { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery [data-slot] { min-height: 0; aspect-ratio: 4 / 3; }
  .gallery figure:last-child [data-slot] { aspect-ratio: 3 / 4; }
  .contacts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}