:root {
  color-scheme: light;
  --brand-cosmic: #112d5f;
  --brand-secondary: #244d8c;
  --brand-ice: #d6deeb;
  --brand-dawn: #e8ebf0;
  --brand-system: #14c4e7;
  --brand-aurora: #00d4d4;
  --brand-ink: #112d5f;
  --neutral-0: #ffffff;
  --neutral-1: #f7f8fa;
  --neutral-2: #f0f2f5;
  --neutral-4: #c9cfd8;
  --neutral-6: #7b8494;
  --neutral-7: #555f70;
  --neutral-8: #353f50;
  --neutral-9: #1a2332;
  --accent-ink: #112d5f;
  --active-indicator: var(--brand-secondary);
  --canvas: var(--neutral-1);
  --surface: #ffffff;
  --section-surface: #ffffff;
  --surface-subtle: var(--neutral-2);
  --text: var(--neutral-9);
  --text-heading: var(--brand-cosmic);
  --text-muted: var(--neutral-8);
  --line: var(--neutral-4);
  --line-strong: var(--neutral-6);
  --header: rgba(17, 45, 95, 0.98);
  --header-text: #ffffff;
  --focus: var(--brand-secondary);
  --shadow-float: 0 16px 40px rgba(17, 45, 95, 0.12);
  --radius-xs: 4px;
  --radius-sm: 8px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --container: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --type-display: 72px;
  --type-section: 48px;
  --type-statement: 56px;
  --type-lead: 22px;
  --type-title: 24px;
  --type-card-title: 34px;
  --type-layer-title: 42px;
  --type-feature-title: 42px;
  --type-metric: 40px;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 700ms;
  --autoplay-duration: 5500ms;
  --carousel-duration: 6800ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 128px; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: "Source Han Sans CN", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nav-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--brand-aurora); color: var(--brand-ink); }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 1000; transform: translateY(-160%);
  padding: 10px 16px; border-radius: var(--radius-sm); background: var(--brand-aurora); color: var(--brand-ink); font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }

.site-header {
  position: sticky; top: 0; z-index: 100; height: 72px; background: var(--header); color: var(--header-text); border-bottom: 1px solid rgba(255,255,255,.14);
  transition: background-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled { border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 8px 24px rgba(5,16,36,.16); }
.header-inner { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.brand { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: 132px; height: auto; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.main-nav {
  --nav-x: 0px; --nav-w: 88px; --nav-line-x: 32px; --nav-opacity: 0;
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 8px; height: 72px;
}
.main-nav::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: 12px; width: var(--nav-w); height: 48px;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(3,15,35,.12);
  opacity: var(--nav-opacity); transform: translate3d(var(--nav-x), 0, 0);
  transition: width 420ms var(--ease-enter), transform 420ms var(--ease-enter), opacity var(--duration-fast);
}
.main-nav::after {
  content: ""; position: absolute; left: 0; bottom: 8px; width: 24px; height: 2px; border-radius: 1px;
  background: var(--brand-aurora); box-shadow: 0 0 12px rgba(0,212,212,.55); opacity: var(--nav-opacity);
  transform: translate3d(var(--nav-line-x), 0, 0);
  transition: transform 420ms var(--ease-enter), opacity var(--duration-fast);
}
.main-nav a {
  position: relative; display: grid; place-items: center; min-width: 88px; min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-xs); color: var(--brand-dawn); font-size: 15px; font-weight: 500;
  transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), text-shadow var(--duration-fast);
}
.main-nav a::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
}
.main-nav a:hover, .main-nav a:focus-visible { color: #ffffff; transform: translateY(-1px); text-shadow: 0 0 18px rgba(255,255,255,.2); }
.main-nav a.active { color: #ffffff; font-weight: 600; }
.icon-button {
  width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-sm); background: transparent; color: #ffffff; cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast), border-color var(--duration-fast);
}
.icon-button:hover { background: rgba(255,255,255,.08); border-color: #ffffff; transform: translateY(-1px); }
.icon-button:active { transform: translateY(0) scale(.96); }
.menu-toggle { display: none; }
.menu-lines, .menu-lines::before, .menu-lines::after { width: 20px; height: 2px; background: currentColor; transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast); }
.menu-lines { position: relative; }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; }
.menu-lines::before { top: -6px; }
.menu-lines::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-lines { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-lines::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines::after { transform: translateY(-6px) rotate(-45deg); }

.subnav { position: sticky; top: 72px; z-index: 90; background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav-scroll { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.subnav-scroll::-webkit-scrollbar { display: none; }
.subnav a {
  position: relative; flex: 0 0 auto; min-height: 44px; display: grid; place-items: center; padding: 0 16px;
  border-radius: var(--radius-xs); color: var(--text-muted); font-size: 15px; font-weight: 500; scroll-snap-align: center;
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.subnav a::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 20px; height: 2px; border-radius: 1px;
  background: var(--active-indicator); transform: translateX(-50%) scaleX(0); transform-origin: center;
  transition: transform var(--duration-base) var(--ease-enter);
}
.subnav a:hover { color: var(--text); background: var(--surface-subtle); }
.subnav a.active { color: var(--text); font-weight: 700; }
.subnav a:hover::after, .subnav a.active::after { transform: translateX(-50%) scaleX(1); }

.hero { position: relative; min-height: min(820px, calc(100svh - 72px)); display: grid; align-items: center; overflow: clip; background: var(--canvas); }
.hero-grid { position: relative; z-index: 1; align-items: center; padding-block: clamp(48px, 6vw, 96px); }
.hero-copy { grid-column: 1 / span 5; }
.hero-visual { grid-column: 7 / -1; position: relative; min-height: clamp(420px, 52vw, 680px); display: grid; place-items: center; }
.hero-visual::before { content: ""; position: absolute; inset: 8% 4%; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); }
.hero-visual img { position: relative; z-index: 2; width: min(88%, 620px); max-height: 650px; object-fit: contain; filter: drop-shadow(0 20px 24px rgba(11,30,63,.18)); transform: translate3d(var(--px, 0), calc(var(--py, 0px) + var(--sy, 0px)), 0) scale(var(--hover-scale, 1)); transition: transform 500ms var(--ease-enter); }
.hero-visual:hover img { --hover-scale: 1.012; }
.hero-visual.diagram img { width: min(94%, 720px); filter: none; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: var(--accent-ink); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--brand-aurora); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--text-heading); letter-spacing: 0; }
h1 { margin-bottom: 24px; font-size: var(--type-display); line-height: 1.08; font-weight: 700; }
h1 em { display: block; color: var(--text-heading); font-style: normal; }
h2 { margin-bottom: 20px; font-size: var(--type-section); line-height: 1.18; font-weight: 700; }
h3 { margin-bottom: 12px; font-size: var(--type-title); line-height: 1.35; font-weight: 600; }
.lead { margin-bottom: 20px; color: var(--text); font-size: var(--type-lead); line-height: 1.55; font-weight: 500; }
.copy { max-width: 680px; color: var(--text-muted); line-height: 1.8; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid var(--brand-ink); border-radius: var(--radius-sm); background: var(--brand-ink); color: #ffffff; font-size: 15px; font-weight: 700; cursor: pointer; transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast); }
.button:hover { background: var(--neutral-9); border-color: var(--neutral-9); transform: translateY(-1px); }
.button:active { transform: translateY(0) scale(.985); }
.button > span[aria-hidden="true"] { display: inline-block; transition: transform var(--duration-base) var(--ease-enter); }
.button:hover > span[aria-hidden="true"] { transform: translateX(4px); }
.button[href*="#"]:hover > span[aria-hidden="true"] { transform: translateY(3px); }
.button.secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.button.secondary:hover { border-color: var(--brand-secondary); color: var(--text-heading); background: var(--surface); }
.button.light { background: var(--brand-aurora); border-color: var(--brand-aurora); color: var(--brand-ink); }
.button.light:hover { background: var(--brand-system); border-color: var(--brand-system); }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); font-weight: 700; border-bottom: 2px solid var(--brand-aurora); transition: gap var(--duration-base) var(--ease-enter), color var(--duration-fast); }
.text-link:hover { gap: 12px; }

.section { padding-block: clamp(80px, 9vw, 144px); border-top: 1px solid var(--line); }
.section.surface { background: var(--section-surface); }
.section.dark { background: var(--brand-ink); color: #ffffff; border-top: 0; }
.section.dark h2, .section.dark h3, .section.dark .lead { color: #ffffff; }
.section.dark .copy, .section.dark .section-intro { color: var(--brand-dawn); }
.section.dark .eyebrow { color: var(--brand-aurora); }
.section.dark .metric-band { border-color: var(--neutral-6); }
.section.dark .metric { border-color: var(--neutral-6); }
.section.dark .metric strong { color: #ffffff; }
.section.dark .metric span { color: var(--brand-dawn); }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.section-head > div { grid-column: 1 / span 7; }
.section-head > p { grid-column: 9 / -1; margin-bottom: 4px; color: var(--text-muted); }
.kicker { color: var(--accent-ink); font-size: 15px; font-weight: 700; letter-spacing: 0; }

.statement { padding-block: clamp(72px, 10vw, 160px); text-align: center; }
.statement p { width: min(980px, 100%); margin: 0 auto; color: var(--text); font-size: var(--type-statement); line-height: 1.25; font-weight: 600; }
.statement strong { color: var(--text-heading); }

/* Current event and source-backed product detail */
.event-section { background: var(--section-surface); }
.event-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); align-items: center; }
.event-layout.reveal { opacity: 1; transform: none; }
.event-copy { grid-column: 1 / span 6; }
.event-copy > p:not(.eyebrow, .event-date, .event-lead) { max-width: 680px; color: var(--text-muted); line-height: 1.8; }
.event-date { margin: 0 0 16px; color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.event-lead { margin-bottom: 24px; color: var(--text); font-size: 22px; font-weight: 600; }
.event-facts { margin: 36px 0 0; border-top: 1px solid var(--line); }
.event-facts div { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.event-facts dt { color: var(--text-muted); }
.event-facts dd { margin: 0; color: var(--text); font-weight: 600; }
.event-poster { grid-column: 8 / -1; position: relative; justify-self: end; width: min(100%, 520px); margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-float); }
.event-poster img { width: 100%; max-height: 720px; display: block; object-fit: cover; object-position: top; }

.hero-visual-source img { width: min(82%, 600px); max-height: 580px; border-radius: var(--radius-sm); filter: none; }
.evidence-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 7vw, 112px); align-items: center; }
.evidence-visual { grid-column: 1 / span 6; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.evidence-visual img { width: 100%; max-height: 720px; display: block; object-fit: cover; object-position: center; }
.evidence-visual-contain img { padding: clamp(16px, 3vw, 40px); object-fit: contain; }
.evidence-visual figcaption { padding: 14px 18px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 13px; }
.evidence-copy { grid-column: 8 / -1; }
.evidence-copy > p:not(.eyebrow) { color: var(--text-muted); line-height: 1.8; }
.evidence-layout-reverse .evidence-copy { grid-column: 1 / span 5; grid-row: 1; }
.evidence-layout-reverse .evidence-visual { grid-column: 7 / -1; grid-row: 1; }
.spec-list { margin: 36px 0 0; border-top: 1px solid var(--line-strong); }
.spec-list div { display: grid; grid-template-columns: minmax(112px, 1fr) 2fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.spec-list dt { color: var(--text-muted); }
.spec-list dd { margin: 0; color: var(--text); font-weight: 600; }
.plain-points { margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.plain-points li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.feature-media.source-detail img { width: min(94%, 620px); max-height: 500px; }
.application-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.application-strip article { min-height: 220px; padding: 32px 28px; border-right: 1px solid var(--line); }
.application-strip article:last-child { border-right: 0; }
.application-strip b { color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; }
.application-strip h3 { margin-top: 40px; font-size: 20px; }
.application-strip p { margin: 0; color: var(--text-muted); font-size: 15px; }
.variant-table-wrap { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.variant-comparison { width: 100%; border-collapse: collapse; table-layout: fixed; }
.variant-comparison th, .variant-comparison td { padding: 24px 28px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; vertical-align: middle; }
.variant-comparison tr:last-child > * { border-bottom: 0; }
.variant-comparison tr > *:last-child { border-right: 0; }
.variant-comparison thead th { background: var(--surface); color: var(--text-heading); font-size: 22px; }
.variant-comparison thead th:first-child { width: 22%; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.variant-comparison thead span { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.variant-comparison tbody th { background: var(--surface); color: var(--text); font-weight: 600; }
.variant-comparison tbody td { color: var(--text); font-weight: 600; }
.variant-comparison tbody td:last-child { background: color-mix(in srgb, var(--brand-aurora) 5%, var(--surface)); }
.comparison-note { max-width: 840px; margin: 24px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.7; }

.metric-band { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric { min-width: 0; padding: 32px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric strong { display: block; color: var(--text); font-family: "Open Sans", system-ui, sans-serif; font-size: var(--type-metric); line-height: 1.2; }
.metric span { display: block; margin-top: 8px; color: var(--text-muted); font-size: 16px; font-weight: 500; }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.product-card { position: relative; min-height: 640px; display: grid; grid-template-rows: minmax(320px, 1fr) auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-base) var(--ease-enter), box-shadow var(--duration-base) var(--ease-enter); }
.product-card:hover { border-color: var(--brand-secondary); transform: translateY(-4px); box-shadow: var(--shadow-float); }
.product-card:active { transform: translateY(-1px); }
.product-media { min-height: 360px; display: grid; place-items: center; padding: 40px; background: var(--surface-subtle); overflow: hidden; }
.product-media img { width: min(88%, 520px); height: 340px; object-fit: contain; transition: transform 640ms var(--ease-enter); }
.product-card:hover .product-media img { transform: scale(1.035); }
.product-card:hover .text-link { gap: 12px; }
.product-media.diagram img { width: 96%; }
.product-body { padding: 32px; border-top: 1px solid var(--line); }
.product-body .kicker { margin-bottom: 8px; }
.product-body p { color: var(--text-muted); }
.product-body :is(h2, h3) { font-size: var(--type-card-title); line-height: 1.25; }
.product-body .text-link::after { content: "→"; }

.workflow-rail {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 80px; padding: 0; list-style: none;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
}
.workflow-rail::before {
  content: ""; position: absolute; left: 0; top: -2px; width: 100%; height: 3px; background: var(--brand-aurora);
  transform: scaleX(0); transform-origin: left center;
}
.workflow-rail.workflow-animated::before { transform: scaleX(1); transition: transform 1500ms linear; }
.workflow-rail li { position: relative; min-width: 0; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 28px 24px; border-right: 1px solid var(--line); }
.workflow-rail.workflow-ready li { opacity: .52; transform: translateY(4px); }
.workflow-rail.workflow-animated li { animation: workflow-step-in 520ms var(--ease-enter) both; animation-delay: calc(var(--workflow-step) * 300ms); }
.workflow-rail li:nth-child(1) { --workflow-step: 0; }
.workflow-rail li:nth-child(2) { --workflow-step: 1; }
.workflow-rail li:nth-child(3) { --workflow-step: 2; }
.workflow-rail li:nth-child(4) { --workflow-step: 3; }
.workflow-rail li:last-child { border-right: 0; }
.workflow-rail li:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; right: -11px; top: 50%; translate: 0 -50%; width: 21px; height: 24px; display: grid; place-items: center; background: var(--section-surface); color: var(--brand-secondary); font-size: 15px; }
.workflow-rail b { color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; font-size: 14px; }
.workflow-rail span, .workflow-rail small { display: block; }
.workflow-rail span { color: var(--text-heading); font-weight: 700; }
.workflow-rail small { margin-top: 4px; color: var(--text-muted); font-size: 14px; }
@keyframes workflow-step-in {
  0% { opacity: .52; transform: translateY(4px); }
  58% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.solution-layer { display: block; }
.layer-intro { width: min(920px, 100%); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; margin-bottom: 40px; }
.layer-index { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--brand-secondary); color: var(--brand-cosmic); font-family: "Open Sans", system-ui, sans-serif; font-size: 14px; font-weight: 700; }
.layer-intro h3 { margin-bottom: 16px; font-size: var(--type-layer-title); }
.layer-intro p:last-child { width: min(720px, 100%); color: var(--text-muted); }
.layer-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.workflow-product-card { min-width: 0; min-height: 336px; display: grid; grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color var(--duration-fast), transform var(--duration-base) var(--ease-enter), box-shadow var(--duration-base) var(--ease-enter); }
.workflow-product-card:hover { border-color: var(--brand-secondary); transform: translateY(-4px); box-shadow: var(--shadow-float); }
.workflow-product-card:active { transform: translateY(-1px); }
.workflow-product-media { min-height: 336px; display: grid; place-items: center; padding: 32px; overflow: hidden; background: var(--surface-subtle); }
.workflow-product-media img { width: 82%; height: clamp(216px, 18vw, 272px); object-fit: contain; transition: transform 640ms var(--ease-enter); }
.workflow-product-media.diagram img { width: 100%; }
.workflow-product-card:hover .workflow-product-media img { transform: scale(1.035); }
.workflow-product-copy { display: flex; flex-direction: column; justify-content: center; padding: 40px; border-left: 1px solid var(--line); }
.workflow-product-copy h3 { margin-bottom: 12px; font-size: 30px; }
.workflow-product-copy p { color: var(--text-muted); }
.workflow-product-copy .text-link::after { content: "→"; }
.workflow-handoff { position: relative; display: flex; align-items: center; justify-content: center; min-height: 144px; }
.workflow-handoff::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--brand-secondary); }
.workflow-handoff::after { content: "↓"; position: absolute; bottom: -2px; left: 50%; translate: -50% 0; padding: 0 8px; background: var(--section-surface); color: var(--brand-secondary); font-size: 20px; }
.workflow-handoff span { position: relative; z-index: 1; padding: 8px 16px; background: var(--section-surface); color: var(--text-muted); font-size: 14px; font-weight: 600; }

.product-carousel { min-width: 0; }
.carousel-viewport { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.carousel-viewport::-webkit-scrollbar { display: none; }
.product-carousel .product-grid {
  display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 2);
  gap: 24px; align-items: stretch;
}
.product-carousel .product-card { scroll-snap-align: start; scroll-snap-stop: always; }
.carousel-footer { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; }
.carousel-status { min-width: 0; display: flex; align-items: center; gap: 16px; }
.carousel-range { margin: 0; color: var(--text-muted); font-family: "Open Sans", system-ui, sans-serif; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.carousel-pagination { display: flex; align-items: center; gap: 4px; }
.carousel-page { position: relative; width: 32px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.carousel-page::before, .carousel-page::after { content: ""; position: absolute; left: 3px; right: 3px; top: 21px; height: 2px; border-radius: 1px; }
.carousel-page::before { background: var(--line); }
.carousel-page::after { background: var(--brand-secondary); transform: scaleX(0); transform-origin: left center; }
.carousel-page.active::before { background: color-mix(in srgb, var(--brand-secondary) 28%, var(--line)); }
.carousel-page.active.progress-running::after { animation: carousel-progress var(--carousel-duration) linear forwards; }
.product-carousel.autoplay-paused .carousel-page.active::after { animation-play-state: paused; }
.carousel-page:hover::before, .carousel-page:focus-visible::before { background: var(--brand-secondary); }
@keyframes carousel-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.carousel-controls { display: flex; align-items: center; gap: 8px; }
.carousel-button {
  width: 48px; height: 48px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast), background-color var(--duration-fast), transform var(--duration-fast) var(--ease-standard);
}
.carousel-button:hover:not(:disabled) { color: var(--accent-ink); border-color: var(--brand-secondary); background: var(--surface-subtle); transform: translateX(var(--arrow-shift, 0)); }
.carousel-button[data-carousel-prev] { --arrow-shift: -2px; }
.carousel-button[data-carousel-next] { --arrow-shift: 2px; }
.carousel-button:active:not(:disabled) { transform: scale(.94); }
.carousel-button:disabled { color: var(--line-strong); border-color: var(--line); background: var(--surface-subtle); cursor: default; }

.capability-list { border-top: 1px solid var(--line); }
.capability-row { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 32px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line); }
.capability-row > b { color: var(--accent-ink); font-family: "Open Sans", system-ui, sans-serif; }
.capability-row p { color: var(--text-muted); margin-bottom: 0; }

.feature-shell { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.feature-slide { display: none; grid-template-columns: 7fr 5fr; min-height: 560px; }
.feature-slide.active { display: grid; animation: feature-in 480ms var(--ease-enter); }
.feature-media { min-height: 460px; display: grid; place-items: center; padding: 48px; overflow: hidden; background: var(--surface-subtle); }
.feature-media img { width: min(88%, 600px); max-height: 480px; object-fit: contain; }
.feature-slide.active .feature-media img { animation: feature-media-in 620ms var(--ease-enter) both; }
.feature-media.diagram img { width: 100%; }
.feature-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 72px); border-left: 1px solid var(--line); }
.feature-slide.active .feature-copy > * { animation: feature-copy-in 520ms var(--ease-enter) both; }
.feature-slide.active .feature-copy p { animation-delay: 70ms; }
.feature-copy :is(h2, h3) { font-size: var(--type-feature-title); }
.feature-copy p { color: var(--text-muted); }
.feature-copy .feature-index { margin-bottom: 16px; color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; font-size: 13px; font-weight: 700; }
.feature-controls { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line); }
.feature-controls button { position: relative; min-height: 72px; padding: 16px 20px; border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--text-muted); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; transition: color var(--duration-fast), background-color var(--duration-fast), padding-left var(--duration-base) var(--ease-enter); }
.feature-controls button:last-child { border-right: 0; }
.feature-controls button:hover { color: var(--text); background: var(--surface-subtle); padding-left: 24px; }
.feature-controls button.active { color: var(--text); background: color-mix(in srgb, var(--brand-aurora) 7%, var(--surface)); }
.feature-controls button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--active-indicator); transform: scaleX(0); transform-origin: left center; }
.feature-controls button.active.progress-running::after { animation: feature-progress var(--autoplay-duration) linear forwards; }
.feature-shell.autoplay-paused .feature-controls button.active::after { animation-play-state: paused; }
@keyframes feature-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes feature-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes feature-media-in { from { opacity: .2; transform: scale(.965); } to { opacity: 1; transform: scale(1); } }
@keyframes feature-copy-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }

/* Teleoperation software page */
.teleop-hero .hero-grid { align-items: center; }
.teleop-hero .hero-copy { grid-column: 1 / span 5; }
.teleop-hero .teleop-window { grid-column: 6 / -1; }
.teleop-window { min-height: 0; display: block; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #090b0e; box-shadow: var(--shadow-float); }
.teleop-window::before { display: none; }
.teleop-window-bar { height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid #30343a; background: #171a1f; }
.teleop-window-bar span { width: 8px; height: 8px; border-radius: 50%; background: #69717c; }
.teleop-window-bar span:first-child { background: var(--brand-secondary); }
.teleop-window-bar b { margin-left: 8px; color: #c9cdd3; font-size: 12px; font-weight: 600; }
.teleop-window > img { width: 100%; aspect-ratio: 874 / 402; display: block; object-fit: cover; transition: transform 900ms var(--ease-enter); }
.teleop-window:hover > img { transform: scale(1.018); }

.teleop-proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.teleop-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.teleop-proof article { min-width: 0; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 32px; border-right: 1px solid var(--line); }
.teleop-proof article:last-child { border-right: 0; }
.teleop-proof b { color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; font-size: 13px; }
.teleop-proof h2 { margin: 0 0 6px; font-size: 20px; }
.teleop-proof p { margin: 0; color: var(--text-muted); font-size: 15px; }

.teleop-feature-shell .feature-slide { grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr); min-height: 520px; }
.teleop-feature-shell .feature-media { min-height: 520px; padding: clamp(24px, 3vw, 48px); background: #11151a; }
.teleop-software-media img { width: 100%; max-width: 920px; max-height: none; aspect-ratio: 874 / 402; border: 1px solid #343a43; border-radius: 4px; object-fit: cover; box-shadow: 0 24px 56px rgb(0 0 0 / 22%); }
.teleop-feature-shell .feature-copy { background: var(--surface); }

.teleop-flow-section { overflow: hidden; }
.teleop-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); list-style: none; }
.teleop-flow::before { content: ""; position: absolute; top: -2px; left: 0; width: 25%; height: 3px; background: var(--active-indicator); animation: teleop-flow-scan 5.2s var(--ease-standard) infinite; }
.teleop-flow li { position: relative; min-height: 176px; display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-content: center; padding: 32px 28px; border-right: 1px solid var(--line); }
.teleop-flow li:last-child { border-right: 0; }
.teleop-flow li:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; top: 50%; right: -13px; translate: 0 -50%; width: 26px; height: 26px; display: grid; place-items: center; background: var(--section-surface); color: var(--brand-secondary); }
.teleop-flow b { color: var(--brand-secondary); font-family: "Open Sans", system-ui, sans-serif; font-size: 13px; }
.teleop-flow h3 { margin-bottom: 8px; font-size: 20px; }
.teleop-flow p { margin: 0; color: var(--text-muted); font-size: 14px; }
@keyframes teleop-flow-scan { 0% { transform: translateX(0); } 25% { transform: translateX(100%); } 50% { transform: translateX(200%); } 75%, 100% { transform: translateX(300%); } }

.process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.process article { position: relative; min-height: 240px; padding: 32px 24px; border-right: 1px solid var(--line); background: var(--surface); }
.process article:last-child { border-right: 0; }
.process b { color: var(--accent-ink); font-family: "Open Sans", system-ui, sans-serif; }
.process h3 { margin-top: 40px; font-size: 19px; }
.process p { color: var(--text-muted); font-size: 16px; }

.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 8vw, 128px); }
.number-list { border-top: 1px solid var(--line); }
.number-list article { display: grid; grid-template-columns: 48px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.number-list b { color: var(--accent-ink); font-family: "Open Sans", system-ui, sans-serif; }
.number-list p { margin-bottom: 0; color: var(--text-muted); }

.fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fact { min-height: 180px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.fact span { display: block; margin-bottom: 36px; color: var(--accent-ink); font-size: 15px; font-weight: 700; }
.fact strong { color: var(--text); font-size: 18px; }
.milestone { display: grid; grid-template-columns: 160px 1fr 2fr; gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); }
.milestone:last-child { border-bottom: 1px solid var(--line); }
.milestone time { color: var(--accent-ink); font-family: "Open Sans", system-ui, sans-serif; font-weight: 700; }
.milestone p { color: var(--text-muted); }

.form-shell { width: min(100%, 1200px); display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; margin-inline: auto; }
.topic-panel, .form-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.topic-panel { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; padding-top: 24px; }
.topic-panel .eyebrow, .topic-panel h2 { grid-column: 1 / -1; margin-inline: 24px; }
.topic-panel h2 { margin-bottom: 24px; font-size: var(--type-title); }
.topic-panel button { position: relative; width: 100%; min-height: 56px; padding: 0 24px; border: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--surface); color: var(--text-muted); text-align: center; cursor: pointer; transition: background-color var(--duration-fast), color var(--duration-fast); }
.topic-panel button:last-child { border-right: 0; }
.topic-panel button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--active-indicator); opacity: 0; transform: scaleX(.3); transform-origin: center; transition: opacity var(--duration-fast), transform var(--duration-base) var(--ease-enter); }
.topic-panel button:hover { background: var(--surface-subtle); color: var(--text); }
.topic-panel button.active { color: var(--text); background: color-mix(in srgb, var(--brand-aurora) 7%, var(--surface)); font-weight: 700; }
.topic-panel button.active::after { opacity: 1; transform: scaleX(1); }
.form-card { padding: clamp(24px, 4vw, 56px); }
.form-context { display: grid; grid-template-columns: 112px minmax(160px, 220px) minmax(0, 1fr); gap: 24px; align-items: baseline; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.form-context p, .form-context strong, .form-context span { margin: 0; }
.form-context p { color: var(--accent-ink); font-size: 14px; font-weight: 700; }
.form-context strong { color: var(--text-heading); font-size: 20px; }
.form-context > span { color: var(--text-muted); }
.form-card.topic-updated .form-context { animation: topic-context-in 360ms var(--ease-enter); }
@keyframes topic-context-in { from { opacity: .45; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.form-section { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 8px; color: var(--text); font-size: 15px; font-weight: 600; }
input, select, textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--canvas); color: var(--text); transition: border-color var(--duration-fast), background-color var(--duration-fast), box-shadow var(--duration-fast); }
textarea { min-height: 160px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-secondary); outline: 3px solid color-mix(in srgb, var(--brand-secondary) 34%, transparent); outline-offset: 1px; }
input:user-invalid, textarea:user-invalid { border-color: #d54941; }
.form-note { margin-top: 16px; color: var(--text-muted); font-size: 14px; }

.cta { padding-block: clamp(72px, 8vw, 112px); background: var(--brand-aurora); color: var(--brand-ink); }
.cta-inner { display: grid; grid-template-columns: 8fr 4fr; gap: 32px; align-items: end; }
.cta h2 { margin: 0; color: var(--brand-ink); }
.cta .actions { justify-content: flex-end; margin: 0; }
.footer { padding: 64px 0 24px; background: var(--neutral-9); color: var(--brand-dawn); }
.footer-main { display: grid; grid-template-columns: 4fr 2fr 2fr 2fr 3fr; gap: 32px; padding-bottom: 56px; }
.footer-brand img { width: 132px; margin-bottom: 24px; }
.footer p { color: var(--brand-dawn); }
.footer h3 { color: #ffffff; font-size: 16px; }
.footer-nav { display: grid; align-content: start; gap: 0; }
.footer-nav a { min-height: 44px; display: flex; align-items: center; }
.footer-contact a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-social p { margin: -4px 0 16px; font-size: 14px; }
.social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.social-link {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--neutral-7); border-radius: var(--radius-sm); background: transparent; color: #ffffff; cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast), transform var(--duration-fast) var(--ease-standard);
}
.social-link img { width: 22px; height: 22px; object-fit: contain; }
.social-link:first-child img { width: 28px; }
.social-link:hover { border-color: var(--brand-aurora); background: rgba(255,255,255,.07); transform: translateY(-2px); }
.social-link:active { transform: translateY(0) scale(.96); }
.social-tooltip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 2; translate: -50% 4px; width: max-content;
  padding: 5px 8px; border-radius: var(--radius-xs); background: #ffffff; color: var(--neutral-9); font-size: 12px; font-weight: 600;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration-fast), translate var(--duration-fast) var(--ease-enter), visibility 0s linear var(--duration-fast);
}
.social-link:hover .social-tooltip, .social-link:focus-visible .social-tooltip { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
.social-dialog { width: min(360px, calc(100% - 32px)); padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(5,16,36,.3); }
.social-dialog::backdrop { background: rgba(5,16,36,.72); backdrop-filter: blur(4px); }
.social-dialog-inner { position: relative; padding: 32px; text-align: center; }
.social-dialog-close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer;
}
.social-dialog h2 { margin: 8px 48px 8px; font-size: 24px; }
.social-dialog p { margin-bottom: 24px; color: var(--text-muted); }
.social-dialog img { width: min(256px, 100%); margin-inline: auto; border: 1px solid var(--line); }
.footer a { color: var(--brand-dawn); transition: color var(--duration-fast), transform var(--duration-fast) var(--ease-standard); }
.footer a:hover { color: var(--brand-aurora); }
.footer-nav a:hover { transform: translateX(3px); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--neutral-7); color: var(--brand-dawn); font-size: 14px; }

.reveal { opacity: 1; transform: none; }
.has-js .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) var(--ease-enter), transform var(--duration-slow) var(--ease-enter); transition-delay: var(--reveal-delay, 0ms); }
.has-js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.is-visible :is(.metric, .fact, .process article) { animation: content-step-in 620ms var(--ease-enter) both; animation-delay: calc(var(--step-index, 0) * 70ms); }
@keyframes content-step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1600px) {
  :root {
    --container: 1536px;
    --type-display: 80px;
    --type-section: 52px;
    --type-statement: 64px;
  }
  .hero { min-height: 820px; }
}
@media (min-width: 2560px) {
  :root { --container: 1760px; --gutter: 96px; }
  body { font-size: 18px; }
}
@media (max-width: 1279px) {
  :root {
    --type-display: 60px;
    --type-section: 42px;
    --type-statement: 48px;
    --type-lead: 20px;
    --type-card-title: 32px;
    --type-layer-title: 38px;
    --type-feature-title: 38px;
    --type-metric: 36px;
  }
  .hero-copy { grid-column: 1 / span 6; }
  .hero-visual { grid-column: 7 / -1; }
  .product-card { min-height: 580px; }
  .process { grid-template-columns: repeat(3, 1fr); }
  .process article { border-bottom: 1px solid var(--line); }
}
@media (max-width: 1023px) {
  .hero { min-height: auto; }
  .hero-copy { grid-column: 1 / -1; }
  .hero-visual { grid-column: 1 / -1; min-height: 480px; }
  .section-head > div { grid-column: 1 / span 8; }
  .section-head > p { grid-column: 9 / -1; }
  .feature-slide { grid-template-columns: 1fr; }
  .feature-copy { border-left: 0; border-top: 1px solid var(--line); }
  .feature-controls { grid-template-columns: repeat(2, 1fr); }
  .metric-band, .fact-grid { grid-template-columns: repeat(2,1fr); }
  .event-copy { grid-column: 1 / span 6; }
  .event-poster { grid-column: 7 / -1; }
  .evidence-visual { grid-column: 1 / span 6; }
  .evidence-copy { grid-column: 7 / -1; }
  .evidence-layout-reverse .evidence-copy { grid-column: 1 / span 6; }
  .evidence-layout-reverse .evidence-visual { grid-column: 7 / -1; }
  .application-strip { grid-template-columns: repeat(2, 1fr); }
  .application-strip article:nth-child(2) { border-right: 0; }
  .application-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .footer-main { grid-template-columns: 2fr 1fr 1fr; }
  .footer-contact, .footer-social { grid-column: span 1; }
  .topic-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-panel button:nth-of-type(2n) { border-right: 0; }
  .layer-products { grid-template-columns: 1fr; }
  .workflow-product-card { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); }
  .teleop-hero .hero-copy, .teleop-hero .teleop-window { grid-column: 1 / -1; }
  .teleop-hero .teleop-window { min-height: 0; }
  .teleop-feature-shell .feature-slide { grid-template-columns: 1fr; }
  .teleop-feature-shell .feature-media { min-height: 0; }
  .teleop-flow { grid-template-columns: repeat(2, 1fr); }
  .teleop-flow::before { width: 50%; animation-name: teleop-flow-scan-tablet; }
  .teleop-flow li:nth-child(2) { border-right: 0; }
  .teleop-flow li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .teleop-flow li::after { display: none; }
}
@keyframes teleop-flow-scan-tablet { 0%, 20% { transform: translate(0, 0); } 40% { transform: translate(100%, 0); } 60% { transform: translate(0, 176px); } 80%, 100% { transform: translate(100%, 176px); } }
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --type-display: 44px;
    --type-section: 34px;
    --type-statement: 36px;
    --type-lead: 18px;
    --type-title: 22px;
    --type-card-title: 30px;
    --type-layer-title: 32px;
    --type-feature-title: 32px;
    --type-metric: 32px;
  }
  html { scroll-padding-top: 112px; }
  .site-header { height: 64px; }
  .brand img { width: 116px; }
  .header-inner { display: flex; justify-content: space-between; }
  .main-nav { display: flex; position: fixed; inset: 64px 0 0; height: auto; justify-content: flex-start; padding: 32px 20px; flex-direction: column; align-items: stretch; background: var(--neutral-9); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-enter), visibility 0s linear var(--duration-base); }
  .main-nav::before, .main-nav::after { display: none; }
  .main-nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
  .main-nav a { min-height: 56px; justify-content: start; place-items: center start; border-bottom: 1px solid var(--neutral-7); font-size: 17px; }
  .main-nav a:hover, .main-nav a:focus-visible { background: rgba(255,255,255,.06); transform: none; }
  .main-nav a.active { background: rgba(255,255,255,.04); }
  .main-nav.open a { animation: mobile-nav-in 420ms var(--ease-enter) both; animation-delay: calc(var(--nav-index, 0) * 45ms); }
  .main-nav a::after { left: 0; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; background: var(--brand-aurora); opacity: 1; transform: scaleY(0); transform-origin: center; transition: transform var(--duration-base) var(--ease-enter); }
  .main-nav a:hover::after, .main-nav a.active::after { transform: scaleY(1); }
  .menu-toggle { display: inline-grid; }
  .subnav { top: 64px; }
  .subnav-scroll { justify-content: flex-start; min-height: 56px; scroll-snap-type: x mandatory; }
  .subnav a { min-height: 44px; padding-inline: 14px; scroll-snap-align: start; }
  .hero-grid { padding-block: 72px 56px; }
  .hero-visual { min-height: 400px; }
  .section-head { display: block; }
  .event-layout, .evidence-layout { grid-template-columns: 1fr; gap: 48px; }
  .event-copy, .event-poster, .evidence-visual, .evidence-copy, .evidence-layout-reverse .evidence-copy, .evidence-layout-reverse .evidence-visual { grid-column: 1; grid-row: auto; }
  .event-poster { justify-self: stretch; width: 100%; }
  .event-poster img { max-height: none; }
  .evidence-visual img { max-height: 560px; }
  .spec-list div { grid-template-columns: 1fr; gap: 4px; }
  .section-head > p { margin-top: 24px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-carousel .product-grid { grid-template-columns: none; grid-auto-columns: 92%; padding-right: 8%; }
  .product-card { min-height: 0; }
  .product-carousel .product-card { min-height: 560px; }
  .product-media { min-height: 320px; }
  .workflow-rail { grid-template-columns: 1fr 1fr; margin-bottom: 56px; }
  .workflow-rail::before { width: 100%; }
  .workflow-rail li:nth-child(2) { border-right: 0; }
  .workflow-rail li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .workflow-rail li::after { display: none !important; }
  .layer-intro { margin-bottom: 32px; }
  .workflow-handoff { min-height: 96px; margin-left: 0; }
  .workflow-product-card { min-height: 0; grid-template-columns: 1fr; }
  .workflow-product-media { min-height: 280px; }
  .workflow-product-copy { padding: 32px; border-left: 0; border-top: 1px solid var(--line); }
  .capability-row { grid-template-columns: 48px 1fr; gap: 16px; }
  .capability-row p { grid-column: 2; }
  .feature-controls { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .feature-controls::-webkit-scrollbar { display: none; }
  .feature-controls button { flex: 0 0 72%; min-height: 64px; scroll-snap-align: start; }
  .process { grid-template-columns: 1fr; }
  .application-strip { grid-template-columns: 1fr; }
  .application-strip article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .application-strip article:last-child { border-bottom: 0; }
  .variant-table-wrap { border-bottom: 0; }
  .variant-comparison, .variant-comparison tbody, .variant-comparison tr, .variant-comparison th, .variant-comparison td { display: block; width: 100%; }
  .variant-comparison thead { display: none; }
  .variant-comparison tbody tr { padding: 24px 0; border-bottom: 1px solid var(--line-strong); }
  .variant-comparison tbody th, .variant-comparison tbody td { padding: 0; border: 0; background: transparent; }
  .variant-comparison tbody th { margin-bottom: 16px; color: var(--text-heading); font-size: 19px; }
  .variant-comparison tbody td { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 10px 0; font-size: 15px; }
  .variant-comparison tbody td::before { content: attr(data-model); color: var(--text-muted); font-size: 13px; font-weight: 600; }
  .process article { min-height: 0; border-right: 0; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .form-shell { grid-template-columns: 1fr; }
  .form-context { grid-template-columns: 1fr; gap: 6px; }
  .fields { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .cta-inner { grid-template-columns: 1fr; }
  .cta .actions { justify-content: flex-start; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-contact, .footer-social { grid-column: 1 / -1; }
  .milestone { grid-template-columns: 1fr; gap: 8px; }
  .teleop-proof-grid { grid-template-columns: 1fr; }
  .teleop-proof article { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .teleop-proof article:last-child { border-bottom: 0; }
  .teleop-feature-shell .feature-media { padding: 16px; }
  .teleop-feature-shell .feature-copy { padding: 32px 24px; }
  .teleop-flow { grid-template-columns: 1fr; }
  .teleop-flow::before { display: none; }
  .teleop-flow li { min-height: 136px; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .teleop-flow li:last-child { border-bottom: 0; }
}
@keyframes mobile-nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 479px) {
  :root {
    --type-display: 40px;
    --type-section: 32px;
    --type-statement: 32px;
    --type-card-title: 28px;
    --type-layer-title: 28px;
    --type-feature-title: 28px;
    --type-metric: 30px;
  }
  .hero-visual { min-height: 340px; }
  .hero-visual::before { inset: 4% 0; }
  .workflow-rail li { grid-template-columns: 32px 1fr; gap: 8px; padding: 20px 16px; }
  .workflow-rail small { font-size: 13px; }
  .layer-intro { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .workflow-product-media { min-height: 264px; padding: 24px; }
  .workflow-product-copy { padding: 28px 24px; }
  .metric-band, .fact-grid { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }
  .fact-grid { border-left: 0; }
  .fact { min-height: 144px; }
  .feature-media { min-height: 320px; padding: 24px; }
  .feature-controls button { flex-basis: 86%; }
  .topic-panel { grid-template-columns: 1fr; }
  .topic-panel button { border-right: 0; text-align: left; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-brand, .footer-contact, .footer-social { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; --type-display: 38px; --type-section: 30px; --type-statement: 30px; }
  .button { width: 100%; }
  .actions { display: grid; }
  .carousel-footer { gap: 10px; }
  .carousel-status { gap: 10px; }
  .carousel-pagination { gap: 2px; }
  .carousel-page { width: 26px; }
}
@media (hover: none) {
  .hero-visual:hover img { --hover-scale: 1; }
  .product-card:hover { transform: none; box-shadow: none; }
  .product-card:hover .product-media img { transform: none; }
  .feature-controls button:hover { padding-left: 20px; }
  .teleop-window:hover > img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-viewport { scroll-behavior: auto; }
  .feature-controls button.active::after { animation: none; transform: scaleX(1); }
  .teleop-flow::before { animation: none; transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-visual img { transform: none !important; }
  .main-nav a, .feature-slide.active .feature-media img, .feature-slide.active .feature-copy > *, .reveal.is-visible :is(.metric, .fact, .process article) { animation: none !important; }
}