:root {
  --pearl: #f5f7fb;
  --pearl-deep: #e9eef6;
  --ink: #161821;
  --ink-soft: #555d6e;
  --ice: #c5d9ef;
  --aqua: #8fd2d1;
  --lilac: #c9bde9;
  --peach: #f6c8b7;
  --orange: #ff8a32;
  --glass: rgba(255, 255, 255, 0.48);
  --glass-strong: rgba(255, 255, 255, 0.68);
  --glass-line: rgba(255, 255, 255, 0.78);
  --line: rgba(79, 91, 113, 0.15);
  --shell: min(1180px, calc(100% - 48px));
  --radius: 28px;
  --shadow: 0 34px 90px rgba(89, 104, 137, 0.18);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--pearl);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: 0; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: #fff;
  background: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.ambient {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--pearl);
}

.ambient-wash,
.ambient-shine {
  position: absolute;
  border-radius: 48% 52% 63% 37% / 53% 46% 54% 47%;
  filter: blur(86px);
  opacity: 0.72;
  will-change: transform;
}

.ambient-wash-a {
  top: -18vh;
  left: -14vw;
  width: 68vw;
  height: 62vw;
  background: radial-gradient(circle at 54% 44%, rgba(255,255,255,.96) 0 14%, rgba(177,208,239,.62) 42%, rgba(201,189,233,.18) 70%, transparent 76%);
}

.ambient-wash-b {
  top: 22vh;
  right: -22vw;
  width: 76vw;
  height: 72vw;
  background: radial-gradient(circle at 46% 48%, rgba(255,255,255,.86) 0 12%, rgba(149,216,211,.42) 38%, rgba(198,185,232,.42) 60%, transparent 76%);
}

.ambient-wash-c {
  bottom: -30vh;
  left: 8vw;
  width: 78vw;
  height: 58vw;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.9) 0 16%, rgba(246,200,183,.42) 42%, rgba(190,210,238,.4) 64%, transparent 77%);
}

.ambient-shine {
  top: 8vh;
  left: 29vw;
  width: 42vw;
  height: 76vh;
  background: rgba(255,255,255,.82);
  filter: blur(120px);
}

@media (prefers-reduced-motion: no-preference) {
  .ambient-wash-a { animation: liquid-a 18s ease-in-out infinite alternate; }
  .ambient-wash-b { animation: liquid-b 22s ease-in-out infinite alternate; }
  .ambient-wash-c { animation: liquid-c 26s ease-in-out infinite alternate; }
}

@keyframes liquid-a { to { transform: translate3d(8vw, 6vh, 0) rotate(8deg) scale(1.08); } }
@keyframes liquid-b { to { transform: translate3d(-9vw, 10vh, 0) rotate(-7deg) scale(.94); } }
@keyframes liquid-c { to { transform: translate3d(7vw, -8vh, 0) rotate(9deg) scale(1.06); } }

.glass-surface {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-line);
  background: linear-gradient(138deg, rgba(255,255,255,.74), rgba(255,255,255,.28)), rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25), var(--shadow);
  backdrop-filter: blur(34px) saturate(140%);
  -webkit-backdrop-filter: blur(34px) saturate(140%);
}

.glass-surface::after {
  position: absolute;
  z-index: -1;
  inset: 1px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  right: 0;
  left: 0;
}

.nav-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: min(1220px, calc(100% - 32px));
  min-height: 66px;
  margin: auto;
  padding: 8px 10px 8px 16px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  background: rgba(255,255,255,.54);
  box-shadow: 0 16px 54px rgba(75,90,121,.1), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  transition: background 240ms ease, box-shadow 240ms ease;
}

.site-header.is-scrolled .nav-shell {
  background: rgba(249,251,255,.74);
  box-shadow: 0 18px 60px rgba(75,90,121,.16), inset 0 1px 0 rgba(255,255,255,.96);
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.brand img,
.footer-brand img {
  width: 42px;
  height: 34px;
  object-fit: contain;
}

.brand span { font-size: 18px; }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 38px);
  color: #565e70;
  font-size: 13px;
}

.site-nav a { transition: color 180ms ease; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); }

.nav-download,
.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.36);
  background: linear-gradient(135deg, #2a2d39, #15171f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 28px rgba(32,35,47,.2);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.nav-download {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 800;
}

.nav-download:hover,
.nav-download:focus-visible,
.primary-action:hover,
.primary-action:focus-visible {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 18px 34px rgba(32,35,47,.25);
}

.nav-toggle { display: none; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  padding: 112px 0 38px;
}

.hero-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(500px, 1.12fr);
  align-items: center;
  width: var(--shell);
  min-height: calc(100dvh - 150px);
  margin: auto;
  gap: clamp(40px, 6vw, 90px);
}

.hero-copy { max-width: 580px; }

.hero-label,
.section-title > span,
.scenes-copy > span,
.boundary-copy > span,
.download-copy > span {
  display: block;
  margin-bottom: 20px;
  color: #687083;
  font-size: 12px;
  font-weight: 800;
}

.hero h1 {
  margin-bottom: 24px;
  font-size: clamp(48px, 5.8vw, 78px);
  font-weight: 300;
}

.hero h1 span { font-weight: 900; }

.hero-lead {
  max-width: 430px;
  margin-bottom: 34px;
  color: var(--ink-soft);
  font-size: 18px;
}

.hero-actions { display: flex; align-items: center; gap: 14px; }

.primary-action,
.secondary-action {
  min-height: 56px;
  padding: 0 21px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 800;
}

.secondary-action {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background 180ms ease, transform 180ms ease;
}

.secondary-action:hover,
.secondary-action:focus-visible { background: rgba(255,255,255,.7); transform: translateY(-2px); }

.hero-object {
  position: relative;
  display: grid;
  min-height: min(650px, 72vh);
  place-items: center;
}

.logo-aura {
  position: absolute;
  width: min(580px, 90%);
  aspect-ratio: 1;
  border-radius: 45% 55% 59% 41% / 54% 46% 54% 46%;
  background: conic-gradient(from 140deg, rgba(255,255,255,.8), rgba(146,210,215,.42), rgba(197,183,231,.46), rgba(246,193,171,.4), rgba(255,255,255,.88));
  filter: blur(34px);
  opacity: .88;
}

.liquid-lens {
  position: relative;
  display: grid;
  width: min(530px, 86%);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 46% 54% 61% 39% / 53% 45% 55% 47%;
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(255,255,255,.12));
  box-shadow: inset 20px 20px 70px rgba(255,255,255,.65), inset -20px -20px 80px rgba(147,170,218,.16), 0 44px 100px rgba(89,104,137,.18);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.liquid-lens img {
  position: relative;
  z-index: 2;
  width: 82%;
  filter: drop-shadow(0 26px 36px rgba(20,22,29,.22));
}

.lens-refraction {
  position: absolute;
  inset: -25%;
  background: conic-gradient(from 60deg, transparent 0 22%, rgba(198,234,255,.34) 29%, rgba(234,198,255,.3) 36%, rgba(255,220,196,.26) 43%, transparent 51% 100%);
  mix-blend-mode: color-dodge;
}

@media (prefers-reduced-motion: no-preference) {
  .liquid-lens { animation: lens-float 7s ease-in-out infinite alternate; }
  .lens-refraction { animation: refract 14s linear infinite; }
}

@keyframes lens-float { to { transform: translate3d(0,-12px,0) rotate(-1.2deg); border-radius: 54% 46% 43% 57% / 44% 55% 45% 56%; } }
@keyframes refract { to { transform: rotate(360deg); } }

.time-chip,
.status-chip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  border-radius: 20px;
}

.time-chip {
  top: 12%;
  right: -2%;
  flex-direction: column;
  align-items: flex-start;
  padding: 17px 22px;
}

.time-chip span { color: #6b7386; font-size: 10px; }
.time-chip strong { font: 700 24px/1.2 Consolas, monospace; }

.status-chip {
  bottom: 14%;
  left: -4%;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 800;
}

.semantic-dot {
  display: inline-block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(255,138,50,.12);
}

.hero-glare {
  position: absolute;
  top: 6%;
  right: 18%;
  width: 28vw;
  height: 20vh;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  filter: blur(80px);
}

.section { position: relative; padding: clamp(96px, 12vw, 166px) 0; }
.section-shell { width: var(--shell); margin: auto; }

.section-title { max-width: 780px; margin-bottom: 66px; }
.section-title h2,
.scenes-copy h2,
.boundary-copy h2,
.download-copy h2 {
  margin-bottom: 24px;
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 700;
}

.section-title-centered { margin-inline: auto; text-align: center; }
.section-title-centered p { max-width: 520px; margin: 0 auto; color: var(--ink-soft); }

.flow-stage {
  position: relative;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(48px, 8vw, 110px);
  min-height: 610px;
  padding: clamp(34px, 6vw, 78px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 44px;
  background: rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 45px 110px rgba(90,105,138,.14);
  backdrop-filter: blur(36px) saturate(140%);
  -webkit-backdrop-filter: blur(36px) saturate(140%);
}

.flow-stage::before {
  position: absolute;
  top: -30%;
  right: -16%;
  width: 58%;
  height: 74%;
  border-radius: 50%;
  background: rgba(201,189,233,.2);
  filter: blur(50px);
  content: "";
}

.flow-arc {
  position: absolute;
  top: 34px;
  right: 34px;
  left: 34px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(94,103,122,.09);
}

.flow-arc span { display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--orange); transition: width 500ms cubic-bezier(.16,1,.3,1); }

.flow-copy { position: relative; z-index: 2; align-self: center; }
.flow-time { display: block; margin-bottom: 34px; color: var(--orange); font: 700 15px Consolas, monospace; }
.flow-speaker { margin-bottom: 12px; color: #697184; font-size: 12px; font-weight: 800; }
.flow-copy h3 { max-width: 520px; margin-bottom: 22px; font-size: clamp(28px, 3.3vw, 46px); font-weight: 600; }
.flow-copy > p:last-child { max-width: 480px; margin: 0; color: var(--ink-soft); }

.flow-panel {
  z-index: 2;
  align-self: center;
  padding: clamp(26px, 4vw, 42px);
  border-radius: 30px;
}
.flow-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.flow-panel-head span { color: #3f4655; font-size: 12px; font-weight: 800; }
.flow-panel-head small { color: #858b9a; font: 10px Consolas, monospace; }
.flow-panel > strong { display: block; margin-bottom: 28px; font-size: 25px; }
.flow-panel dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 28px; }
.flow-panel dl div { padding: 16px; border-radius: 16px; background: rgba(255,255,255,.36); }
.flow-panel dt { color: #7a8292; font-size: 10px; }
.flow-panel dd { margin: 2px 0 0; font-size: 13px; font-weight: 800; }
.flow-panel > p { margin: 0; padding-top: 18px; color: #656d7f; border-top: 1px solid rgba(88,98,118,.12); font-size: 11px; }

.flow-controls {
  position: absolute;
  z-index: 3;
  right: clamp(34px, 6vw, 78px);
  bottom: clamp(30px, 4vw, 54px);
  left: clamp(34px, 6vw, 78px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.flow-controls button { min-height: 66px; padding: 8px; border: 1px solid rgba(255,255,255,.65); border-radius: 18px; background: rgba(255,255,255,.28); cursor: pointer; transition: background 180ms ease, transform 180ms ease; }
.flow-controls button:hover, .flow-controls button:focus-visible { transform: translateY(-2px); background: rgba(255,255,255,.58); }
.flow-controls button.is-active { color: #fff; background: linear-gradient(135deg,#2b2e39,#171921); box-shadow: 0 12px 26px rgba(39,42,54,.2); }
.flow-controls span { display: block; margin-bottom: 2px; font-size: 20px; font-weight: 900; }
.flow-controls small { color: #707889; font-size: 10px; }
.flow-controls button.is-active small { color: #d8dbe2; }

.capabilities { overflow: hidden; }
.capabilities::before { position: absolute; top: 22%; left: -12%; width: 46vw; height: 48vw; border-radius: 50%; background: rgba(144,211,209,.16); filter: blur(80px); content: ""; }
.capability-orbit { position: relative; display: grid; grid-template-columns: 1.2fr .8fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; min-height: 620px; }
.capability { display: flex; flex-direction: column; justify-content: flex-end; padding: 34px; border-radius: var(--radius); overflow: hidden; }
.capability-wide { grid-column: 1 / 3; flex-direction: row; align-items: flex-end; gap: 48px; justify-content: flex-start; }
.capability-tall { grid-column: 3; grid-row: 1 / 3; }
.capability h3 { margin-bottom: 12px; font-size: 22px; }
.capability p { max-width: 440px; margin: 0; color: var(--ink-soft); font-size: 14px; }
.capability-number { color: rgba(255,138,50,.84); font: 300 clamp(88px,11vw,150px)/.8 Consolas, monospace; }
.capability-glyph { margin-bottom: auto; color: var(--orange); font: 300 48px/1 Arial, sans-serif; }
.mini-clock { position: relative; display: grid; width: min(260px, 80%); aspect-ratio: 1; margin: auto auto 50px; place-items: center; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(255,255,255,.28); box-shadow: inset 0 0 50px rgba(255,255,255,.7), 0 28px 60px rgba(103,114,145,.14); }
.mini-clock::before { width: 72%; height: 72%; border: 5px solid rgba(255,138,50,.76); border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; content: ""; transform: rotate(-45deg); }
.mini-clock i, .mini-clock b { position: absolute; bottom: 50%; left: 50%; width: 2px; height: 29%; background: #21232d; transform-origin: bottom; }
.mini-clock i { transform: rotate(0); }
.mini-clock b { transform: rotate(90deg); }

.scenes-shell { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(70px, 10vw, 150px); align-items: center; }
.scenes-copy p { max-width: 500px; margin: 0; color: var(--ink-soft); }
.scene-cloud { position: relative; min-height: 520px; }
.scene-cloud::before { position: absolute; inset: 8% 10%; border-radius: 50%; background: conic-gradient(from 30deg, rgba(255,255,255,.7), rgba(199,217,239,.55), rgba(201,189,233,.45), rgba(247,200,181,.4), rgba(255,255,255,.75)); filter: blur(32px); content: ""; }
.scene-cloud span { position: absolute; display: grid; min-width: 128px; min-height: 64px; padding: 12px 20px; place-items: center; border: 1px solid rgba(255,255,255,.78); border-radius: 22px; background: rgba(255,255,255,.44); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 40px rgba(91,105,138,.12); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); font-size: 13px; font-weight: 800; }
.scene-cloud span:nth-child(1) { top: 8%; left: 12%; }
.scene-cloud span:nth-child(2) { top: 18%; right: 4%; }
.scene-cloud span:nth-child(3) { top: 43%; left: 28%; }
.scene-cloud span:nth-child(4) { top: 60%; right: 5%; }
.scene-cloud span:nth-child(5) { bottom: 7%; left: 4%; }
.scene-cloud span:nth-child(6) { bottom: 1%; right: 28%; }
@media (prefers-reduced-motion: no-preference) {
  .scene-cloud span:nth-child(odd) { animation: chip-float 5s ease-in-out infinite alternate; }
  .scene-cloud span:nth-child(even) { animation: chip-float 6s ease-in-out -2s infinite alternate-reverse; }
}
@keyframes chip-float { to { transform: translate3d(0,-10px,0); } }

.boundary-shell { display: grid; grid-template-columns: .42fr 1fr; align-items: center; gap: clamp(48px,8vw,110px); padding: clamp(42px,7vw,82px); border-radius: 42px; }
.boundary-mark { display: grid; aspect-ratio: 1; place-items: center; border-radius: 50%; background: rgba(255,255,255,.28); box-shadow: inset 0 0 70px rgba(255,255,255,.7); }
.boundary-mark img { width: 86%; opacity: .9; }
.boundary-copy p { max-width: 650px; margin: 0; color: var(--ink-soft); }

.download { overflow: hidden; padding-bottom: 120px; }
.download-light { position: absolute; top: 10%; left: 20%; width: 60vw; height: 70%; border-radius: 50%; background: rgba(255,255,255,.84); filter: blur(85px); }
.download-shell { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(60px,10vw,150px); align-items: center; }
.download-copy img { width: min(330px, 76%); margin-bottom: 32px; filter: drop-shadow(0 28px 40px rgba(20,22,29,.14)); }
.download-copy p { max-width: 500px; margin: 0; color: var(--ink-soft); }
.download-panel { padding: 12px 30px 24px; border-radius: 34px; }
.download-option { display: grid; grid-template-columns: .7fr 1fr 28px; gap: 22px; align-items: center; min-height: 104px; padding: 16px 8px; border-bottom: 1px solid rgba(80,90,111,.12); transition: padding 180ms ease, background 180ms ease; }
.download-option:not(.is-disabled):hover, .download-option:not(.is-disabled):focus-visible { padding-inline: 18px; border-radius: 20px; background: rgba(255,255,255,.42); }
.download-option.is-disabled { color: #858c9a; cursor: not-allowed; }
.platform-name { font-size: 18px; font-weight: 900; }
.platform-detail { display: grid; gap: 3px; }
.platform-detail strong { font-size: 13px; }
.platform-detail small { color: #8d94a2; font-size: 10px; }
.platform-arrow { justify-self: end; font-size: 20px; }
.download-state { display: flex; align-items: center; gap: 10px; min-height: 50px; color: #737b8d; font-size: 11px; }
.download-state[data-state="ready"] .semantic-dot { background: #73bba9; }
.download-state[data-state="error"] .semantic-dot,
.download-state[data-state="loading"] .semantic-dot { background: var(--orange); }

.site-footer { padding: 34px 0 46px; }
.footer-shell { display: grid; grid-template-columns: auto 1fr auto; align-items: center; width: var(--shell); margin: auto; padding-top: 30px; border-top: 1px solid rgba(82,92,112,.13); gap: 30px; }
.footer-brand img { width: 38px; height: 30px; }
.footer-brand span { font-size: 16px; }
.footer-shell nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; color: #666e80; font-size: 12px; }
.footer-shell p { margin: 0; color: #858c9b; font-size: 11px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms ease, transform 800ms cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.legal-page .ambient-wash-b { opacity: .4; }
.legal-main { min-height: calc(100vh - 180px); padding: 150px 0 100px; }
.legal-shell { width: min(960px, calc(100% - 48px)); margin: auto; }
.legal-header { margin-bottom: 52px; }
.legal-header h1 { margin-bottom: 18px; font-size: clamp(44px,6vw,72px); }
.legal-header p { color: #737b8c; }
.legal-content { padding: clamp(34px,6vw,64px); border-radius: 36px; }
.legal-content section { margin-bottom: 44px; }
.legal-content section:last-child { margin-bottom: 0; }
.legal-content h2 { margin-bottom: 14px; font-size: 22px; }
.legal-content p, .legal-content li { color: var(--ink-soft); }
.legal-content ul { padding-left: 22px; }

@media (max-width: 980px) {
  .hero-shell { grid-template-columns: 1fr; padding-top: 60px; }
  .hero-copy { max-width: 720px; }
  .hero-object { min-height: 580px; }
  .flow-stage { grid-template-columns: 1fr; padding-bottom: 150px; }
  .flow-panel { max-width: 620px; }
  .capability-orbit { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .capability-wide { grid-column: 1 / 3; }
  .capability-tall { grid-column: auto; grid-row: auto; }
  .scenes-shell, .download-shell { grid-template-columns: 1fr; }
  .download-copy img { width: 270px; }
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 32px, 640px); --radius: 24px; }
  .site-header { top: 10px; }
  .nav-shell { grid-template-columns: 1fr auto; min-height: 58px; border-radius: 19px; }
  .brand img { width: 38px; height: 30px; }
  .nav-download { display: none; }
  .nav-toggle { display: grid; width: 42px; height: 42px; padding: 11px; border: 0; border-radius: 14px; background: rgba(255,255,255,.46); place-content: center; gap: 6px; cursor: pointer; }
  .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform 180ms ease; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-nav { position: fixed; z-index: 99; top: 78px; right: 16px; left: 16px; display: flex; align-items: stretch; flex-direction: column; gap: 0; padding: 16px; border: 1px solid rgba(255,255,255,.78); border-radius: 24px; background: rgba(248,250,254,.86); box-shadow: 0 30px 70px rgba(70,83,112,.2); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease; }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav a { padding: 15px 8px; border-bottom: 1px solid rgba(80,90,110,.1); font-size: 16px; font-weight: 800; }
  .hero { padding-top: 98px; }
  .hero-shell { min-height: auto; padding-top: 34px; }
  .hero h1 { font-size: clamp(43px,13vw,62px); }
  .hero-lead { font-size: 16px; }
  .hero-object { min-height: 470px; }
  .liquid-lens { width: min(420px, 92%); }
  .time-chip { right: 0; }
  .status-chip { left: 0; }
  .section { padding: 88px 0; }
  .section-title { margin-bottom: 44px; }
  .section-title h2, .scenes-copy h2, .boundary-copy h2, .download-copy h2 { font-size: clamp(36px,10vw,50px); }
  .flow-stage { min-height: 760px; padding: 58px 22px 182px; border-radius: 30px; }
  .flow-copy h3 { font-size: 29px; }
  .flow-controls { right: 22px; bottom: 22px; left: 22px; grid-template-columns: 1fr 1fr; }
  .flow-controls button { min-height: 58px; }
  .capability-orbit { grid-template-columns: 1fr; min-height: 0; }
  .capability, .capability-wide, .capability-tall { grid-column: auto; min-height: 260px; }
  .capability-wide { flex-direction: column; align-items: flex-start; gap: 46px; }
  .capability-tall { min-height: 520px; }
  .scene-cloud { min-height: 480px; margin-top: 24px; }
  .scene-cloud span { min-width: 112px; padding: 10px 14px; }
  .boundary-shell { grid-template-columns: 1fr; padding: 38px 24px; border-radius: 30px; }
  .boundary-mark { width: min(330px, 100%); margin: auto; }
  .download-copy img { width: 240px; }
  .download-panel { padding: 8px 18px 18px; }
  .download-option { grid-template-columns: .7fr 1.15fr 22px; gap: 12px; }
  .footer-shell { grid-template-columns: 1fr; justify-items: start; }
  .footer-shell nav { justify-content: flex-start; }
}

@media (max-width: 430px) {
  .hero-actions { align-items: stretch; flex-direction: column; }
  .primary-action, .secondary-action { width: 100%; }
  .hero-object { min-height: 400px; }
  .time-chip { top: 7%; padding: 13px 16px; }
  .status-chip { bottom: 9%; }
  .flow-panel dl { grid-template-columns: 1fr; }
  .scene-cloud span:nth-child(1) { left: 2%; }
  .scene-cloud span:nth-child(2) { right: 0; }
  .scene-cloud span:nth-child(3) { left: 18%; }
  .scene-cloud span:nth-child(4) { right: 0; }
  .scene-cloud span:nth-child(6) { right: 14%; }
  .download-option { grid-template-columns: .65fr 1.35fr 18px; }
  .platform-name { font-size: 16px; }
}

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

@media (prefers-reduced-transparency: reduce) {
  .glass-surface, .nav-shell, .site-nav, .secondary-action, .scene-cloud span { background: rgba(248,250,254,.96); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* 2026-07-25 refinement: kinetic task clock, richer copy, fewer brand marks */
:root {
  --pointer-x: 0px;
  --pointer-y: 0px;
}

.page-progress {
  position: fixed;
  z-index: 130;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--orange), #ffc19a);
  box-shadow: 0 0 18px rgba(255, 138, 50, .42);
  pointer-events: none;
}

.ambient-shine {
  transform: translate3d(var(--pointer-x), var(--pointer-y), 0);
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.hero-shell {
  grid-template-columns: minmax(0, 1.03fr) minmax(440px, .97fr);
  gap: clamp(44px, 7vw, 104px);
}

.hero-copy { max-width: 640px; }
.hero-lead { max-width: 520px; margin-bottom: 22px; }
.hero-actions { margin-top: 34px; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: #596174;
  font-size: 12px;
  font-weight: 700;
}

.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof b { color: var(--orange); font: 700 10px/1.4 Consolas, monospace; }

.hero-object { min-height: min(560px, 66vh); }
.logo-aura { width: min(470px, 88%); opacity: .72; }

.liquid-lens {
  width: min(440px, 82%);
  border-radius: 44% 56% 58% 42% / 51% 43% 57% 49%;
}

.clock-interface {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(330px, 76%);
  min-height: 392px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 30px;
  background: linear-gradient(155deg, rgba(255,255,255,.72), rgba(255,255,255,.24));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 28px 60px rgba(83,99,132,.16);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  transition: transform 500ms cubic-bezier(.16,1,.3,1);
}

.clock-interface-top,
.clock-interface-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #697184;
  font-size: 10px;
  font-weight: 800;
}

.clock-interface-top strong { color: var(--ink); font: 700 12px/1 Consolas, monospace; text-transform: uppercase; }
.clock-interface-bottom { justify-content: flex-start; gap: 9px; }

.clock-face {
  position: relative;
  display: grid;
  width: 228px;
  aspect-ratio: 1;
  margin: auto;
  place-items: center;
  border: 1px solid rgba(94,105,126,.16);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.96), rgba(241,245,251,.65) 45%, rgba(216,227,241,.48));
  box-shadow: inset 0 0 44px rgba(255,255,255,.9), 0 20px 44px rgba(93,107,139,.14);
}

.clock-face::before {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--orange) 0 50%, rgba(95,106,126,.1) 50% 100%);
  content: "";
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

.clock-tick {
  position: absolute;
  width: 2px;
  height: 10px;
  border-radius: 999px;
  background: #333744;
}
.tick-1 { top: 25px; }
.tick-2 { right: 29px; transform: rotate(90deg); }
.tick-3 { bottom: 25px; }
.tick-4 { left: 29px; transform: rotate(90deg); }

.clock-hand {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 1px);
  display: block;
  width: 2px;
  border-radius: 999px;
  background: #232630;
  transform-origin: 50% 100%;
}
.clock-hand-hour { height: 54px; transform: rotate(0deg); }
.clock-hand-minute { height: 73px; background: var(--orange); transform: rotate(90deg); }
.clock-center { position: absolute; width: 12px; height: 12px; border: 4px solid #fff; border-radius: 50%; background: var(--ink); box-shadow: 0 4px 12px rgba(31,34,43,.2); }
.clock-sweep { position: absolute; inset: 23px; border: 1px solid rgba(255,138,50,.16); border-radius: 50%; }
.clock-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,138,50,.12); }

.time-chip { top: 9%; right: -1%; }
.status-chip { bottom: 11%; left: -2%; }

.section-intro {
  max-width: 650px;
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.85;
}

.scenes-note {
  margin-top: 22px !important;
  padding-top: 20px;
  border-top: 1px solid rgba(80,90,111,.13);
  color: #313643 !important;
  font-weight: 800;
}

.capability {
  transition: transform 500ms cubic-bezier(.16,1,.3,1), box-shadow 500ms ease, background 500ms ease;
}
.capability:hover {
  transform: translateY(-8px);
  background: linear-gradient(138deg, rgba(255,255,255,.84), rgba(255,255,255,.34)), rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 42px 95px rgba(89,104,137,.22);
}

.boundary-shell { grid-template-columns: .32fr 1fr; }
.boundary-mark { background: transparent; box-shadow: none; }
.boundary-signal {
  position: relative;
  display: grid;
  width: min(210px, 100%);
  aspect-ratio: 1;
  margin: auto;
  place-items: center;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  box-shadow: inset 0 0 50px rgba(255,255,255,.82), 0 26px 60px rgba(92,107,140,.14);
}
.boundary-signal::before,
.boundary-signal::after,
.boundary-signal span {
  position: absolute;
  border: 1px solid rgba(255,138,50,.28);
  border-radius: 50%;
  content: "";
}
.boundary-signal::before { inset: 20px; }
.boundary-signal::after { inset: 42px; }
.boundary-signal span { inset: 63px; background: rgba(255,138,50,.08); }
.boundary-signal b { position: relative; z-index: 2; color: #3e4555; font-size: 15px; line-height: 1.4; text-align: center; }

.download-shell { grid-template-columns: 1fr 1.08fr; }
.download-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 28px;
  color: #5f6779;
  font-size: 12px;
  font-weight: 800;
}
.download-kicker .semantic-dot { flex-basis: 8px; }

.flow-copy,
.flow-panel { transition: opacity 240ms ease, transform 420ms cubic-bezier(.16,1,.3,1); }
.flow-stage.is-switching .flow-copy { opacity: 0; transform: translateY(12px); }
.flow-stage.is-switching .flow-panel { opacity: .25; transform: translateY(-8px) scale(.985); }

@media (prefers-reduced-motion: no-preference) {
  .clock-hand-minute { animation: task-second-hand 30s linear infinite; }
  .clock-sweep { animation: clock-pulse 2.6s ease-in-out infinite; }
  .clock-live-dot { animation: live-dot 1.8s ease-in-out infinite; }
  .time-chip { animation: chip-drift-a 5.2s ease-in-out infinite alternate; }
  .status-chip { animation: chip-drift-b 6.4s ease-in-out -1.5s infinite alternate; }
  .boundary-signal::before { animation: signal-ring 3.4s ease-out infinite; }
  .boundary-signal::after { animation: signal-ring 3.4s ease-out 1.1s infinite; }
  .capability-orbit .reveal:nth-child(2) { transition-delay: 90ms; }
  .capability-orbit .reveal:nth-child(3) { transition-delay: 180ms; }
  .capability-orbit .reveal:nth-child(4) { transition-delay: 270ms; }
}

@keyframes task-second-hand { to { transform: rotate(450deg); } }
@keyframes clock-pulse { 50% { transform: scale(1.05); opacity: .35; } }
@keyframes live-dot { 50% { box-shadow: 0 0 0 9px rgba(255,138,50,0); } }
@keyframes chip-drift-a { to { transform: translate3d(-5px, -9px, 0); } }
@keyframes chip-drift-b { to { transform: translate3d(7px, -7px, 0); } }
@keyframes signal-ring { 0% { opacity: .75; transform: scale(.72); } 72%,100% { opacity: 0; transform: scale(1.25); } }

@media (max-width: 980px) {
  .hero-shell { grid-template-columns: 1fr; }
  .hero-object { min-height: 510px; }
  .boundary-shell { grid-template-columns: .32fr 1fr; }
}

@media (max-width: 760px) {
  .hero-proof { gap: 8px 14px; }
  .hero-object { min-height: 440px; }
  .liquid-lens { width: min(390px, 90%); }
  .clock-interface { width: min(300px, 78%); min-height: 350px; }
  .clock-face { width: 198px; }
  .boundary-shell { grid-template-columns: 1fr; }
  .boundary-mark { width: min(220px, 70%); }
  .download-shell { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .hero-object { min-height: 390px; }
  .liquid-lens { width: min(350px, 96%); }
  .clock-interface { width: min(260px, 76%); min-height: 310px; padding: 18px; }
  .clock-face { width: 166px; }
  .clock-hand-hour { height: 40px; }
  .clock-hand-minute { height: 54px; }
  .time-chip { top: 5%; right: -2%; }
  .status-chip { bottom: 7%; left: -1%; }
}
.clock-interface { transform: perspective(800px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); }
/* 2026-07-25 hero direction: CSS ferris-wheel task instrument */
.hero-object {
  min-height: min(600px, 70vh);
  isolation: isolate;
}

.logo-aura,
.liquid-lens,
.lens-refraction,
.hero-glare { display: none !important; }

.wheel-stage {
  position: relative;
  display: grid;
  width: min(540px, 94%);
  aspect-ratio: 1;
  margin: auto;
  place-items: center;
}

.wheel-orbit {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
}

.wheel-orbit::before {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(105,116,139,.18);
  border-radius: inherit;
  content: "";
}

.wheel-orbit::after {
  position: absolute;
  inset: -2px;
  border: 6px solid transparent;
  border-radius: inherit;
  background: conic-gradient(from -50deg, #b8d8f2, #cfc1ed 24%, #f2c2b4 49%, #ffad6d 68%, #b9d8ee 86%, #b8d8f2) border-box;
  content: "";
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .9;
}

.wheel-orbit-outer { transform: rotate(-12deg); }
.wheel-spoke {
  position: absolute;
  width: 1px;
  height: 42%;
  background: linear-gradient(180deg, rgba(182,207,235,0), rgba(255,138,50,.55), rgba(201,189,233,0));
  transform-origin: 50% 100%;
  opacity: .66;
}
.spoke-a { transform: rotate(0deg); }
.spoke-b { transform: rotate(90deg); }
.spoke-c { transform: rotate(180deg); }
.spoke-d { transform: rotate(270deg); }

.wheel-node {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 72px;
  height: 72px;
  place-content: center;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(214,225,242,.56));
  box-shadow: 0 16px 34px rgba(92,106,138,.15), inset 0 1px 0 rgba(255,255,255,.95);
  text-align: center;
}
.wheel-node b { color: var(--ink); font-size: 22px; line-height: 1; }
.wheel-node small { margin-top: 4px; color: #737b8c; font-size: 10px; font-weight: 800; }
.wheel-node-a { top: -22px; left: calc(50% - 36px); }
.wheel-node-b { top: calc(50% - 36px); right: -22px; }
.wheel-node-c { bottom: -22px; left: calc(50% - 36px); }
.wheel-node-d { top: calc(50% - 36px); left: -22px; }

.task-clock {
  position: relative;
  z-index: 5;
  display: grid;
  width: min(300px, 58%);
  aspect-ratio: .84;
  align-content: space-between;
  padding: 24px 22px 20px;
  border-left: 1px solid rgba(255,255,255,.75);
  border-right: 1px solid rgba(255,255,255,.75);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
  box-shadow: 0 18px 40px rgba(88,102,135,.08), inset 0 0 36px rgba(255,255,255,.36);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.task-clock-top,
.task-clock-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #697184;
  font-size: 10px;
  font-weight: 800;
}
.task-clock-top strong { color: var(--ink); font: 700 12px/1 Consolas, monospace; letter-spacing: .08em; }
.task-clock-bottom { justify-content: flex-start; gap: 9px; }
.task-clock-face {
  position: relative;
  display: grid;
  width: min(220px, 82%);
  aspect-ratio: 1;
  margin: auto;
  place-items: center;
  border: 1px solid rgba(101,113,137,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.46);
  box-shadow: inset 0 0 38px rgba(255,255,255,.88), 0 18px 34px rgba(94,108,141,.12);
}
.task-clock-face::before {
  position: absolute;
  inset: 9px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--orange) 0 50%, rgba(173,201,230,.5) 50% 76%, rgba(201,189,233,.46) 76% 100%) border-box;
  content: "";
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
.task-clock-face .clock-tick { height: 8px; background: #4b5363; }
.task-clock-face .tick-1 { top: 21px; }
.task-clock-face .tick-2 { right: 23px; }
.task-clock-face .tick-3 { bottom: 21px; }
.task-clock-face .tick-4 { left: 23px; }
.task-clock-face .clock-hand-hour { height: 48px; }
.task-clock-face .clock-hand-minute { height: 69px; }
.task-clock-face .clock-center { width: 11px; height: 11px; }
.task-clock-face .clock-sweep { inset: 19px; border-color: rgba(255,138,50,.2); }

.time-chip { top: 10%; right: -2%; padding: 13px 16px; border-radius: 15px; }
.status-chip { bottom: 10%; left: -3%; min-height: 46px; padding: 0 14px; border-radius: 15px; font-size: 11px; }

@media (prefers-reduced-motion: no-preference) {
  .wheel-orbit::after { animation: wheel-spectrum 16s linear infinite; }
  .wheel-node-a { animation: node-float-a 5.6s ease-in-out infinite alternate; }
  .wheel-node-b { animation: node-float-b 6.4s ease-in-out -1.2s infinite alternate; }
  .wheel-node-c { animation: node-float-c 5.9s ease-in-out -2.1s infinite alternate; }
  .wheel-node-d { animation: node-float-d 6.8s ease-in-out -3.2s infinite alternate; }
}

@keyframes wheel-spectrum { to { transform: rotate(348deg); } }
@keyframes node-float-a { to { transform: translate3d(4px, -8px, 0); } }
@keyframes node-float-b { to { transform: translate3d(8px, 2px, 0); } }
@keyframes node-float-c { to { transform: translate3d(-4px, 8px, 0); } }
@keyframes node-float-d { to { transform: translate3d(-8px, -2px, 0); } }

@media (max-width: 980px) {
  .hero-object { min-height: 530px; }
  .wheel-stage { width: min(500px, 88%); }
}

@media (max-width: 760px) {
  .hero-object { min-height: 450px; }
  .wheel-stage { width: min(440px, 94%); }
  .task-clock { width: min(260px, 60%); }
  .task-clock-face { width: min(190px, 82%); }
  .time-chip { right: -1%; }
  .status-chip { left: -1%; }
}

@media (max-width: 430px) {
  .hero-object { min-height: 390px; }
  .wheel-stage { width: min(350px, 100%); }
  .wheel-node { width: 58px; height: 58px; }
  .wheel-node-a { top: -16px; left: calc(50% - 29px); }
  .wheel-node-b { right: -16px; top: calc(50% - 29px); }
  .wheel-node-c { bottom: -16px; left: calc(50% - 29px); }
  .wheel-node-d { left: -16px; top: calc(50% - 29px); }
  .wheel-node b { font-size: 18px; }
  .task-clock { width: min(220px, 62%); padding: 18px 14px 15px; }
  .task-clock-face { width: min(160px, 82%); }
  .task-clock-face .clock-hand-hour { height: 37px; }
  .task-clock-face .clock-hand-minute { height: 52px; }
  .time-chip { top: 8%; }
  .status-chip { bottom: 8%; }
}
/* Theme-matched clock gradient */
.task-clock-face {
  background: radial-gradient(circle at 34% 27%, rgba(255,255,255,.92), rgba(218,231,245,.52) 48%, rgba(222,209,240,.34) 74%, rgba(255,213,195,.24));
}
.task-clock-face::before {
  background: conic-gradient(from -90deg, #ff8a32 0 24%, #f6c8b7 24% 45%, #c9bde9 45% 70%, #c5d9ef 70% 88%, #ff8a32 88% 100%) border-box;
}
.task-clock-face .clock-hand {
  background: linear-gradient(180deg, #91bfe4 0%, #c9bde9 52%, #f6c8b7 100%);
  box-shadow: 0 0 10px rgba(181,194,225,.48);
}
.task-clock-face .clock-hand-minute {
  background: linear-gradient(180deg, #ff8a32 0%, #f6c8b7 48%, #c9bde9 100%);
  box-shadow: 0 0 12px rgba(255,138,50,.22);
}
.task-clock-face .clock-center {
  border-color: rgba(255,255,255,.94);
  background: conic-gradient(from 35deg, #ff8a32, #f6c8b7, #c9bde9, #c5d9ef, #ff8a32);
}
.task-clock-face .clock-tick { background: linear-gradient(180deg, #9ec8e9, #c9bde9 55%, #f6c8b7); }
.task-clock-face .clock-sweep { border-color: rgba(201,189,233,.44); }.task-clock { transform: perspective(800px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); transition: transform 500ms cubic-bezier(.16,1,.3,1); }
/* Text-only hero */
.hero { min-height: 92dvh; padding-bottom: 54px; }
.hero-shell { grid-template-columns: minmax(0, 1fr); min-height: calc(92dvh - 150px); }
.hero-copy { max-width: 850px; padding: clamp(48px, 9vh, 96px) 0 24px; }
.hero h1 { font-size: clamp(58px, 7.1vw, 96px); }
.hero-lead { max-width: 620px; font-size: 20px; }
@media (max-width: 760px) {
  .hero { min-height: auto; padding-bottom: 72px; }
  .hero-shell { min-height: auto; }
  .hero-copy { padding-top: 44px; }
  .hero h1 { font-size: clamp(48px, 14vw, 68px); }
  .hero-lead { font-size: 17px; }
}
/* Website preview of the real uni-app manager task card */
.project-card {
  position: relative;
  z-index: 2;
  align-self: center;
  min-width: 0;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 28px;
  color: #3d3351;
  background: linear-gradient(145deg, #f4e1ff 0%, #dfc8f5 52%, #c9b1e9 100%);
  box-shadow: 0 24px 46px rgba(112,129,166,.18), 0 -1px 0 rgba(255,255,255,.38), inset 0 1px 0 rgba(255,255,255,.48);
  transition: color 420ms ease, background 500ms ease, transform 420ms cubic-bezier(.16,1,.3,1), opacity 240ms ease;
}
.project-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.5), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.24), transparent 46%), linear-gradient(0deg, rgba(71,82,117,.06), transparent 38%);
  content: "";
  pointer-events: none;
}
.project-card--gold { color: #3d3351; background: linear-gradient(145deg, #f4e1ff 0%, #dfc8f5 52%, #c9b1e9 100%); }
.project-card--teal { color: #314633; background: linear-gradient(145deg, #f5f7c8 0%, #e0efa7 50%, #c7dfa0 100%); }
.project-card--rose { color: #2f3b64; background: linear-gradient(145deg, #dfe7ff 0%, #bccaf5 50%, #9eadde 100%); }
.project-card--brown { color: #59372f; background: linear-gradient(145deg, #ffe0d2 0%, #f2b39e 50%, #df927d 100%); }
.project-card__head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.project-card__avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36);
  font-size: 22px;
  font-weight: 900;
}
.project-card__go {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(49,52,71,.58);
  box-shadow: 0 8px 18px rgba(55,68,99,.16);
  font-size: 18px;
  font-weight: 900;
}
.project-card__name { position: relative; z-index: 1; margin: 13px 0 0; font-size: 27px; font-weight: 900; }
.project-card__meta { position: relative; z-index: 1; margin: 7px 0 0; font-size: 13px; font-weight: 700; opacity: .88; }
.project-card__pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  margin-top: 13px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  font-size: 11px;
  font-weight: 800;
}
.project-card__tasks { position: relative; z-index: 1; margin-top: 18px; }
.project-card__tasks-title { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 900; opacity: .86; }
.project-task-item {
  position: relative;
  width: 100%;
  min-height: 132px;
  margin-top: 9px;
  padding: 14px;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  font-size: 11px;
  font-weight: 800;
  transition: box-shadow 300ms ease, background 300ms ease;
}
.project-task-item.is-pending { box-shadow: inset 0 0 0 1px rgba(227,125,100,.5); }
.project-task-item__copy { display: grid; min-width: 0; gap: 5px; padding-right: 70px; }
.project-task-item__copy strong { overflow: hidden; font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.project-task-item__copy span { line-height: 1.45; opacity: .72; overflow-wrap: anywhere; }
.project-task-item__copy time { margin-top: 2px; font-size: 10px; font-weight: 700; opacity: .58; }
.project-task-status {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 64px;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid rgba(84,75,88,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  color: rgba(55,48,60,.72);
  font-size: 10px;
  line-height: 1.25;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-task-status[data-status="待接收"],
.project-task-status[data-status="待处理"] { border-color: rgba(227,125,100,.52); background: rgba(255,226,216,.92); color: #d45f45; }
.project-task-status[data-status="进行中"] { border-color: rgba(91,141,239,.46); background: rgba(222,235,255,.92); color: #3f77d7; }
.project-task-status[data-status="已完成"] { border-color: rgba(79,183,131,.46); background: rgba(218,246,231,.92); color: #3f9569; }
.project-task-status[data-status="已拒绝"] { border-color: rgba(126,121,140,.4); background: rgba(235,233,243,.94); color: #716a82; }
.flow-stage.is-switching .project-card { opacity: .42; transform: translateY(-7px) scale(.985); }
@media (max-width: 760px) {
  .project-card { padding: 22px; }
  .project-card__name { font-size: 23px; }
  .project-task-item { min-height: 146px; }
}
/* Flow stage spacing and four distinct project-card states */
.flow-stage { min-height: 760px; padding-bottom: 178px; }
.project-task-status[data-status="待发布"] { border-color: rgba(210,132,89,.48); background: rgba(255,235,219,.92); color: #bd6942; }
.project-task-item.is-draft { background: rgba(255,255,255,.28); box-shadow: inset 0 0 0 1px rgba(210,132,89,.38); }
.project-task-item.is-completed { background: rgba(240,255,245,.28); box-shadow: inset 0 0 0 1px rgba(79,183,131,.38); }
.project-card[data-card-mode="draft"] .project-card__go { background: rgba(143,87,63,.56); }
.project-card[data-card-mode="completed"] .project-card__go { background: rgba(63,149,105,.76); }
.project-card[data-card-mode="completed"] .project-task-item__copy strong { color: #2f7552; }
@media (max-width: 980px) {
  .flow-stage { min-height: 980px; padding: 64px 54px 178px; }
  .project-card { width: min(620px, 100%); }
}
@media (max-width: 760px) {
  .flow-stage { min-height: 1020px; padding: 58px 22px 194px; }
  .project-card { width: 100%; }
}
@media (max-width: 430px) {
  .flow-stage { min-height: 1060px; }
}
/* Four real product views: compose, receive, process, detail */
.flow-visual { position: relative; z-index: 2; align-self: center; min-width: 0; min-height: 470px; }
.flow-visual .product-panel {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(-50% + 18px)) scale(.975);
  transition: opacity 320ms ease, visibility 320ms ease, transform 520ms cubic-bezier(.16,1,.3,1);
}
.flow-visual .product-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) scale(1); }
.flow-stage.is-switching .product-panel.is-active { opacity: .18; transform: translateY(calc(-50% + 8px)) scale(.985); }

.publish-preview {
  position: relative;
  min-height: 430px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(213,231,255,.94), rgba(248,238,250,.94) 55%, rgba(225,248,248,.9));
  box-shadow: 0 24px 46px rgba(112,129,166,.16), inset 0 1px 0 rgba(255,255,255,.72);
}
.publish-preview__head { display: flex; align-items: center; gap: 10px; color: #28263a; font-size: 17px; }
.publish-preview__head span { color: #666c7d; font-size: 28px; line-height: 1; }
.publish-preview__target { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.28); }
.publish-preview__target > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.48); font-size: 18px; font-weight: 900; }
.publish-preview__target div { display: grid; gap: 3px; }
.publish-preview__target strong { font-size: 15px; }
.publish-preview__target small { color: rgba(46,37,62,.58); font-size: 10px; font-weight: 700; }
.publish-composer-preview {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 72px;
  grid-template-rows: 36px 42px;
  align-items: center;
  column-gap: 10px;
  row-gap: 5px;
  min-height: 92px;
  padding: 9px 10px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,251,244,.96), rgba(238,247,250,.94));
  box-shadow: 0 16px 38px rgba(117,141,162,.16), inset 0 1px 0 rgba(255,255,255,.84), inset 0 0 0 1px rgba(255,255,255,.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.publish-deadline-preview { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; color: #5d7891; font-size: 12px; font-weight: 800; }
.publish-deadline-preview span { padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(122,148,190,.12); text-align: center; }
.publish-voice-preview { grid-column: 1; grid-row: 2; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(46,37,62,.1); }
.publish-voice-preview img { width: 22px; height: 22px; object-fit: contain; opacity: .68; }
.publish-input-preview { grid-column: 2; grid-row: 2; min-width: 0; height: 42px; padding: 11px 14px; overflow: hidden; border: 1.5px solid rgba(46,37,62,.18); border-radius: 19px; color: rgba(46,37,62,.34); background: rgba(255,255,255,.54); box-shadow: 0 8px 18px rgba(111,125,138,.08); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.publish-submit-preview { grid-column: 3; grid-row: 2; height: 42px; padding: 0; border: 0; border-radius: 21px; color: #fff; background: linear-gradient(135deg, #84b8ff, #5dc9e7); box-shadow: 0 10px 20px rgba(92,174,224,.26); font-size: 14px; font-weight: 900; }

.preview-task-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.preview-task-actions button { min-width: 86px; height: 34px; padding: 0 18px; border: 0; border-radius: 999px; font-size: 11px; font-weight: 900; }
.preview-task-accept { color: #fff; background: linear-gradient(135deg, #f5a08d, #e37d64); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 4px 12px rgba(227,125,100,.35); }
.preview-task-reject { color: #7a5a50; background: linear-gradient(135deg, rgba(255,240,234,.9), rgba(227,125,100,.18)); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 3px 8px rgba(0,0,0,.06); }
.preview-task-remind { color: #fff; background: linear-gradient(135deg, #80b9ff, #3f7ddd); box-shadow: 0 8px 16px rgba(63,125,221,.24); }
.preview-task-complete { color: #fff; background: linear-gradient(135deg, #7fd0a6, #4fb783); box-shadow: 0 8px 16px rgba(79,183,131,.28); }

.task-detail-preview {
  min-height: 400px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 12px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 18px 42px rgba(78,78,142,.14), inset 0 0 0 1px rgba(255,255,255,.74);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.task-detail-preview__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.task-detail-preview__head > div { display: grid; min-width: 0; gap: 5px; }
.task-detail-preview__head span,
.task-detail-preview__section > span { color: rgba(46,37,62,.58); font-size: 10px; font-weight: 900; }
.task-detail-preview__head h3 { margin: 0; color: #2e253e; font-size: 24px; line-height: 1.35; font-weight: 900; }
.task-detail-preview__section { margin-top: 20px; padding-top: 17px; border-top: 1px solid rgba(46,37,62,.1); }
.task-detail-preview__section p { margin: 8px 0 0; color: #40384d; font-size: 14px; line-height: 1.75; font-weight: 650; }
.task-detail-preview__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(46,37,62,.1); }
.task-field-preview { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
.task-field-preview > span { display: inline-flex; align-items: center; gap: 6px; color: rgba(46,37,62,.66); font-size: 12px; font-weight: 800; }
.task-field-preview i { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: #fff; background: #77748c; font-size: 12px; line-height: 1; font-style: normal; font-weight: 900; }
.task-field-preview i.is-started { padding-left: 1px; font-size: 9px; }
.task-field-preview i.is-planned { font-size: 11px; }
.task-field-preview i.is-ended { font-size: 7px; }
.task-field-preview strong { color: #12162f; font-size: 11px; line-height: 1.15; text-align: right; }

@media (max-width: 980px) {
  .flow-visual { min-height: 480px; }
  .flow-visual .product-panel { right: auto; left: 0; width: min(620px,100%); }
}
@media (max-width: 760px) {
  .flow-visual { min-height: 500px; }
  .publish-preview { min-height: 450px; padding: 20px; }
  .publish-composer-preview { right: 14px; bottom: 14px; left: 14px; grid-template-columns: 38px minmax(0,1fr) 64px; column-gap: 7px; }
  .publish-voice-preview { width: 38px; height: 38px; }
  .publish-input-preview { height: 38px; padding: 9px 11px; }
  .publish-submit-preview { height: 38px; }
  .task-detail-preview { padding: 22px; }
}
@media (max-width: 430px) {
  .flow-visual { min-height: 540px; }
  .publish-composer-preview { grid-template-columns: 36px minmax(0,1fr) 58px; }
  .task-detail-preview__fields { grid-template-columns: 1fr; }
}
/* Screenshot-aligned four-step product previews */
.voice-publish-preview {
  min-height: 470px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(235,239,255,.96), rgba(219,247,249,.88) 54%, rgba(230,224,255,.94));
  box-shadow: 0 24px 46px rgba(112,129,166,.16), inset 0 1px 0 rgba(255,255,255,.72);
}
.voice-record-preview {
  display: grid;
  min-height: 280px;
  padding: 22px;
  place-items: center;
  align-content: center;
  border-radius: 26px;
  background: rgba(255,255,255,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
  text-align: center;
}
.voice-record-preview > strong { color: #807782; font-size: 12px; }
.voice-record-preview > em { margin-top: 12px; color: #393334; font-size: 20px; line-height: 1; font-style: normal; font-weight: 900; }
.voice-record-preview > small { margin-top: 12px; color: #a5a0aa; font-size: 12px; font-weight: 700; }
.voice-record-rings { position: relative; display: grid; width: 92px; height: 92px; margin-top: 10px; place-items: center; }
.voice-record-rings span { position: absolute; border: 1px solid rgba(232,126,99,.24); border-radius: 50%; }
.voice-record-rings span:nth-child(1) { inset: 7px; }
.voice-record-rings span:nth-child(2) { inset: 14px; }
.voice-record-rings span:nth-child(3) { inset: 21px; background: rgba(246,190,174,.22); }
.voice-record-rings b { position: relative; z-index: 2; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #fff; background: #e87d63; box-shadow: 0 8px 18px rgba(232,125,99,.24); font-size: 18px; }
.screenshot-composer { right: 18px; bottom: 18px; left: 18px; }
.publish-input-preview.is-filled { height: 46px; padding-block: 7px; color: #2e253e; font-size: 12px; line-height: 16px; white-space: normal; }
@media (prefers-reduced-motion: no-preference) {
  .voice-record-rings span:nth-child(1) { animation: voice-ring-breathe 1.8s ease-in-out infinite; }
  .voice-record-rings span:nth-child(2) { animation: voice-ring-breathe 1.8s ease-in-out .25s infinite; }
  .voice-record-rings span:nth-child(3) { animation: voice-ring-breathe 1.8s ease-in-out .5s infinite; }
}
@keyframes voice-ring-breathe { 50% { opacity: .36; transform: scale(1.12); } }

.notification-preview {
  min-height: 430px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 28px;
  color: #24223b;
  background: linear-gradient(135deg, rgba(255,245,215,.94), rgba(235,246,239,.92) 48%, rgba(205,242,249,.94));
  box-shadow: 0 24px 46px rgba(112,129,166,.15), inset 0 1px 0 rgba(255,255,255,.76);
}
.notification-preview__head { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; }
.notification-preview__head > span { color: #646878; font-size: 30px; line-height: 1; }
.notification-preview__head h3 { margin: 0; font-size: 28px; font-weight: 900; }
.notification-preview__head small { display: block; margin-top: 2px; color: #998b67; font-size: 11px; }
.notification-preview__head button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; color: #ef765d; background: rgba(255,255,255,.72); font-size: 12px; font-weight: 900; }
.notification-preview__filters { display: flex; align-items: center; gap: 9px; margin-top: 18px; overflow: hidden; white-space: nowrap; }
.notification-preview__filters strong,
.notification-preview__filters span { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.72); color: #9a8159; font-size: 11px; font-weight: 900; }
.notification-preview__filters strong { color: #fff; background: #df775f; }
.notification-preview__filters a { margin-left: auto; color: #ee705c; font-size: 11px; font-weight: 900; }
.notification-preview__item { display: grid; grid-template-columns: 42px 1fr; gap: 12px; margin-top: 18px; padding: 18px; border: 1px solid rgba(245,219,199,.55); border-radius: 22px; background: rgba(255,252,246,.9); box-shadow: 0 12px 24px rgba(114,126,145,.08); }
.notification-preview__icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #3f77d7; background: #e3efff; font-size: 16px; font-weight: 900; }
.notification-preview__copy h4 { margin: 0; font-size: 17px; font-weight: 900; }
.notification-preview__copy h4 i { display: inline-block; width: 8px; height: 8px; margin-left: 7px; border-radius: 50%; background: #e37d64; }
.notification-preview__copy p { margin: 7px 0 0; color: #6d5360; font-size: 12px; line-height: 1.55; font-weight: 700; }
.notification-preview__copy > div { display: flex; gap: 8px; margin-top: 9px; }
.notification-preview__copy > div span { padding: 3px 8px; border-radius: 999px; color: #e5684e; background: #fff1eb; font-size: 9px; font-weight: 900; }
.notification-preview__copy small { display: block; margin-top: 9px; color: #9b9198; font-size: 10px; }

.manager-preview-card { min-height: 420px; }
.manager-preview-card .project-task-item { min-height: 148px; }
.manager-preview-card .project-task-item__copy strong { max-width: 100%; padding-right: 52px; overflow: visible; white-space: normal; }
.manager-preview-card .project-task-item__copy time { margin-top: 0; }

.screenshot-detail { min-height: 430px; padding: 24px; }
.screenshot-detail .task-detail-preview__head h3 { max-width: 360px; font-size: 22px; line-height: 1.3; }
.screenshot-detail .task-detail-preview__section p { font-size: 13px; }
.screenshot-detail .task-detail-preview__fields { margin-top: 22px; }

@media (max-width: 760px) {
  .voice-publish-preview { min-height: 500px; padding: 14px; }
  .voice-record-preview { min-height: 300px; }
  .screenshot-composer { right: 14px; bottom: 14px; left: 14px; }
  .notification-preview { min-height: 470px; padding: 18px; }
  .notification-preview__head h3 { font-size: 24px; }
  .notification-preview__filters span:nth-of-type(4),
  .notification-preview__filters span:nth-of-type(5) { display: none; }
  .notification-preview__filters a { display: none; }
  .manager-preview-card { min-height: 450px; }
}
@media (max-width: 430px) {
  .notification-preview__item { grid-template-columns: 34px 1fr; padding: 14px; }
  .notification-preview__icon { width: 32px; height: 32px; }
  .screenshot-detail .task-detail-preview__head h3 { font-size: 18px; }
}
/* Keep semantic phrases together in large display headings */
.keep-together { display: inline-block; white-space: nowrap; }
.scenes-copy h2,
.download-copy h2 { font-size: clamp(40px, 4.4vw, 56px); line-height: 1.12; }
@media (max-width: 760px) {
  .scenes-copy h2,
  .download-copy h2 { font-size: clamp(36px, 10vw, 48px); }
}
@media (max-width: 430px) {
  .scenes-copy h2,
  .download-copy h2 { font-size: 34px; }
}
/* Unified fade-up entrance choreography */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 780ms ease, transform 880ms cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.stagger-children > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 760ms cubic-bezier(.16,1,.3,1);
  transition-delay: calc(110ms + var(--stagger-index, 0) * 90ms);
}
.reveal.stagger-children.is-visible > * { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.stagger-children > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Preserve the palette; animate only position, shape and light intensity */
@media (prefers-reduced-motion: no-preference) {
  .ambient-wash-a { animation: ambient-swim-a 16s cubic-bezier(.45,.05,.2,1) infinite; }
  .ambient-wash-b { animation: ambient-swim-b 20s cubic-bezier(.42,0,.25,1) infinite; }
  .ambient-wash-c { animation: ambient-swim-c 23s cubic-bezier(.4,.05,.2,1) infinite; }
  .ambient-shine { animation: ambient-light-breathe 8s ease-in-out infinite; }
}
@keyframes ambient-swim-a {
  0%, 100% { transform: translate3d(-2vw,-2vh,0) rotate(-3deg) scale(1); border-radius: 48% 52% 63% 37% / 53% 46% 54% 47%; opacity: .66; }
  28% { transform: translate3d(7vw,5vh,0) rotate(5deg) scale(1.07); border-radius: 58% 42% 47% 53% / 43% 61% 39% 57%; opacity: .78; }
  56% { transform: translate3d(3vw,11vh,0) rotate(10deg) scale(.96); border-radius: 39% 61% 57% 43% / 62% 38% 58% 42%; opacity: .7; }
  78% { transform: translate3d(10vw,2vh,0) rotate(2deg) scale(1.04); border-radius: 54% 46% 40% 60% / 48% 56% 44% 52%; opacity: .82; }
}
@keyframes ambient-swim-b {
  0%, 100% { transform: translate3d(3vw,-4vh,0) rotate(4deg) scale(1); border-radius: 48% 52% 63% 37% / 53% 46% 54% 47%; opacity: .65; }
  24% { transform: translate3d(-6vw,4vh,0) rotate(-5deg) scale(.94); border-radius: 42% 58% 39% 61% / 57% 43% 63% 37%; opacity: .78; }
  52% { transform: translate3d(-10vw,11vh,0) rotate(-10deg) scale(1.06); border-radius: 61% 39% 55% 45% / 38% 59% 41% 62%; opacity: .7; }
  76% { transform: translate3d(-3vw,6vh,0) rotate(-2deg) scale(1.02); border-radius: 46% 54% 67% 33% / 61% 39% 48% 52%; opacity: .82; }
}
@keyframes ambient-swim-c {
  0%, 100% { transform: translate3d(-3vw,5vh,0) rotate(-4deg) scale(1.02); border-radius: 48% 52% 63% 37% / 53% 46% 54% 47%; opacity: .64; }
  30% { transform: translate3d(6vw,-5vh,0) rotate(6deg) scale(.95); border-radius: 65% 35% 48% 52% / 44% 58% 42% 56%; opacity: .78; }
  58% { transform: translate3d(11vw,-10vh,0) rotate(11deg) scale(1.08); border-radius: 37% 63% 59% 41% / 62% 38% 54% 46%; opacity: .72; }
  82% { transform: translate3d(3vw,-2vh,0) rotate(1deg) scale(1.03); border-radius: 55% 45% 38% 62% / 47% 64% 36% 53%; opacity: .8; }
}
@keyframes ambient-light-breathe {
  0%, 100% { opacity: .64; filter: blur(112px); }
  50% { opacity: .88; filter: blur(132px); }
}
/* Rebalance display type for the restored split hero */
.hero h1 { font-size: clamp(52px, 5.4vw, 76px); }
@media (max-width: 760px) { .hero h1 { font-size: clamp(46px, 13vw, 62px); } }
/* Large static brand mark in the split hero */
.hero-shell {
  grid-template-columns: minmax(0, .94fr) minmax(460px, 1.06fr);
  gap: clamp(36px, 5vw, 76px);
}
.hero-copy { max-width: 640px; }
.hero-logo-display {
  display: grid;
  min-width: 0;
  min-height: min(640px, 70vh);
  place-items: center;
}
.hero-logo-display img {
  width: min(680px, 116%);
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 34px 50px rgba(35,39,50,.16));
}
@media (max-width: 980px) {
  .hero-shell { grid-template-columns: 1fr; }
  .hero-logo-display { min-height: 520px; }
  .hero-logo-display img { width: min(610px, 94vw); }
}
@media (max-width: 760px) {
  .hero-logo-display { min-height: 430px; margin-top: 10px; }
  .hero-logo-display img { width: min(480px, 96vw); }
}
@media (max-width: 430px) {
  .hero-logo-display { min-height: 350px; }
  .hero-logo-display img { width: min(390px, 98vw); }
}

/* Small scale lift for the hero, with a tighter capability rhythm below. */
.hero h1 {
  font-size: clamp(56px, 5.8vw, 82px);
}
.hero-lead {
  font-size: 19px;
}
.hero-actions {
  transform: scale(1.04);
  transform-origin: left center;
}
.hero-logo-display img {
  width: min(740px, 124%);
}

.capabilities {
  padding-top: clamp(70px, 8vw, 112px);
}
.capabilities .section-title {
  margin-bottom: clamp(36px, 4vw, 50px);
}
.capability-orbit {
  min-height: 540px;
}
.capability {
  justify-content: flex-start;
  padding: 30px;
}
.capability-wide {
  align-items: center;
}
.capability-glyph {
  margin: 0 0 28px;
}
.capability-tall {
  justify-content: flex-start;
}
.mini-clock {
  margin: 4px auto 28px;
}
@media (max-width: 760px) {
  .hero h1 {
    font-size: clamp(50px, 14vw, 68px);
  }
  .hero-lead {
    font-size: 17px;
  }
  .hero-actions {
    transform: none;
  }
  .hero-logo-display img {
    width: min(520px, 104vw);
  }
  .capabilities {
    padding-top: 68px;
  }
}
/* Strengthen the two explanatory lines in the hero. */
.hero-label {
  color: #444c5c;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}
.hero-lead {
  color: #414959;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.7;
}
@media (max-width: 760px) {
  .hero-label {
    font-size: 14px;
  }
  .hero-lead {
    font-size: 18px;
  }
}
/* Lift the complete hero copy scale as one visual group. */
.hero-label {
  font-size: 17px;
}
.hero h1 {
  font-size: clamp(62px, 6.3vw, 92px);
}
.hero-lead {
  font-size: 23px;
  line-height: 1.65;
}
.hero-proof {
  font-size: 14px;
}
.hero-proof b {
  font-size: 11px;
}
.primary-action,
.secondary-action {
  font-size: 16px;
}
@media (max-width: 760px) {
  .hero-label {
    font-size: 15px;
  }
  .hero h1 {
    font-size: clamp(52px, 14vw, 72px);
  }
  .hero-lead {
    font-size: 20px;
  }
  .hero-proof {
    font-size: 13px;
  }
  .primary-action,
  .secondary-action {
    font-size: 14px;
  }
}
/* Keep the enlarged hero copy on deliberate lines. */
.hero h1 {
  font-size: clamp(62px, 5.8vw, 86px);
  line-height: 1.04;
}
.hero h1 span {
  display: inline-block;
  white-space: nowrap;
}
.hero-lead > span {
  display: block;
}
@media (max-width: 760px) {
  .hero h1 {
    font-size: clamp(48px, 12.5vw, 68px);
  }
}
/* Prevent orphaned punctuation in the three hero explanation lines. */
.hero-lead > span {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hero-lead > span {
    white-space: normal;
  }
}
/* Layered holographic tide radiating from the hero mark. */
.hero {
  --logo-tilt-x: 0deg;
  --logo-tilt-y: 0deg;
  --logo-shift-x: 0px;
  --logo-shift-y: 0px;
  --wave-drift-x: 0px;
  --wave-drift-y: 0px;
  isolation: isolate;
}

.hero-wave-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 900px;
  transform: translate3d(var(--wave-drift-x), var(--wave-drift-y), 0);
  transition: transform 900ms cubic-bezier(.16,1,.3,1);
}

.hero-wave-field::before {
  position: absolute;
  top: 53%;
  left: 73%;
  width: clamp(250px, 30vw, 470px);
  aspect-ratio: 1.55;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.76) 0, rgba(186,231,241,.26) 34%, rgba(208,196,238,.14) 54%, transparent 72%);
  content: "";
  filter: blur(26px);
  opacity: .72;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.hero-wave {
  --wave-delay: 0s;
  --wave-rotate: -5deg;
  position: absolute;
  top: 53%;
  left: 73%;
  width: clamp(310px, 38vw, 590px);
  height: clamp(130px, 18vw, 270px);
  border: clamp(4px, .45vw, 8px) solid transparent;
  border-radius: 46% 54% 48% 52% / 54% 45% 55% 46%;
  background:
    linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)) padding-box,
    conic-gradient(
      from 208deg,
      rgba(255,255,255,.08),
      rgba(144,218,235,.62) 14%,
      rgba(255,255,255,.88) 25%,
      rgba(199,184,235,.56) 39%,
      rgba(249,187,157,.48) 54%,
      rgba(255,145,74,.38) 66%,
      rgba(255,255,255,.82) 79%,
      rgba(144,218,235,.5) 91%,
      rgba(255,255,255,.08)
    ) border-box;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.78),
    inset 0 -7px 12px rgba(119,159,202,.12),
    0 -7px 18px rgba(255,255,255,.34),
    0 16px 30px rgba(113,143,187,.15);
  filter: drop-shadow(0 12px 16px rgba(112,145,185,.13));
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity, border-radius;
}

.hero-wave::before,
.hero-wave::after {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.hero-wave::before {
  inset: -12px;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 -5px 12px rgba(128,204,221,.1);
  opacity: .62;
}

.hero-wave::after {
  inset: 6px;
  border-top: 2px solid rgba(255,255,255,.7);
  border-right: 1px solid rgba(205,190,239,.28);
  filter: blur(.4px);
  opacity: .76;
}

.hero-wave-1 { --wave-delay: -1.2s; --wave-rotate: -7deg; }
.hero-wave-2 { --wave-delay: -4.25s; --wave-rotate: 4deg; }
.hero-wave-3 { --wave-delay: -7.3s; --wave-rotate: -2deg; }
.hero-wave-4 { --wave-delay: -10.35s; --wave-rotate: 7deg; }

.hero-logo-display {
  position: relative;
  z-index: 2;
  perspective: 1000px;
}

.hero-logo-display::before,
.hero-logo-display::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.hero-logo-display::before {
  width: min(520px, 82%);
  aspect-ratio: 1.3;
  background: conic-gradient(from 120deg, rgba(255,255,255,.1), rgba(145,221,235,.32), rgba(207,190,239,.3), rgba(249,190,160,.28), rgba(255,255,255,.56), rgba(145,221,235,.2));
  filter: blur(30px);
  opacity: .7;
}

.hero-logo-display::after {
  width: min(460px, 72%);
  aspect-ratio: 1.55;
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 16px 50px rgba(139,177,206,.12), inset 0 -8px 18px rgba(183,193,232,.1);
  opacity: .48;
}

.hero-logo-core {
  position: relative;
  display: grid;
  width: 100%;
  min-height: inherit;
  place-items: center;
  transform: translate3d(var(--logo-shift-x), var(--logo-shift-y), 0) rotateX(var(--logo-tilt-x)) rotateY(var(--logo-tilt-y));
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.16,1,.3,1);
}

.hero-logo-core img {
  backface-visibility: hidden;
  transform-origin: 50% 55%;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-wave {
    animation: hero-wave-radiate 12.2s cubic-bezier(.18,.35,.22,1) var(--wave-delay) infinite;
  }

  .hero-logo-core img {
    animation: hero-logo-tide 7.6s ease-in-out infinite;
  }

  .hero-logo-display::before {
    animation: hero-halo-breathe 7.6s ease-in-out infinite;
  }
}


@keyframes hero-logo-tide {
  0%, 100% { transform: translate3d(0,0,24px) rotate(-.25deg) scale(1); }
  46% { transform: translate3d(0,-8px,34px) rotate(.35deg) scale(1.012); }
  72% { transform: translate3d(2px,-3px,28px) rotate(.1deg) scale(1.006); }
}

@keyframes hero-halo-breathe {
  0%, 100% { opacity: .58; transform: translate(-50%,-50%) scale(.96) rotate(-4deg); }
  50% { opacity: .8; transform: translate(-50%,-50%) scale(1.06) rotate(4deg); }
}

@media (max-width: 980px) {
  .hero-wave-field::before,
  .hero-wave { top: 72%; left: 50%; }
  .hero-wave { width: clamp(300px, 72vw, 560px); height: clamp(120px, 31vw, 245px); }
}

@media (max-width: 760px) {
  .hero-wave-field::before,
  .hero-wave { top: 76%; }
  .hero-wave { width: 74vw; height: 33vw; }
  .hero-wave-field { perspective: 720px; }
  .hero-logo-display::before { width: 78vw; }
  .hero-logo-display::after { width: 68vw; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave-field { transform: none; transition: none; }
  .hero-wave { display: none; animation: none; }
  .hero-logo-core,
  .hero-logo-core img,
  .hero-logo-display::before { animation: none; transform: none; transition: none; }
}

/* Front-facing silk-glass wave plane, aligned to the logo center. */
.hero-copy {
  position: relative;
  z-index: 3;
}

.hero-logo-display {
  z-index: 1;
  transform-style: preserve-3d;
}

.hero-wave-field {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: max(180vw, 1800px);
  height: max(180vh, 1200px);
  inset: auto;
  overflow: visible;
  perspective: none;
  transform: translate3d(calc(-50% + var(--logo-shift-x)), calc(-50% + var(--logo-shift-y)), 0) rotateX(var(--logo-tilt-x)) rotateY(var(--logo-tilt-y));
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.16,1,.3,1);
}

.hero-wave-field::before {
  top: 50%;
  left: 50%;
  width: clamp(360px, 34vw, 610px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.62) 0 30%, rgba(177,229,240,.2) 45%, rgba(211,197,238,.13) 58%, rgba(249,207,188,.1) 66%, transparent 76%);
  filter: blur(30px);
  opacity: .64;
  transform: translate(-50%, -50%);
}

.hero-wave {
  --wave-alpha: .72;
  --wave-mid-alpha: .56;
  --wave-fade-alpha: .28;
  --wave-trace-alpha: .07;
  --wave-softness: 0px;
  --wave-depth-y: 12px;
  --wave-depth-blur: 16px;
  top: 50%;
  left: 50%;
  width: clamp(360px, 34vw, 610px);
  height: auto;
  aspect-ratio: 1;
  border: 0;
  border-radius: 47% 53% 49% 51% / 52% 47% 53% 48%;
  background:
    linear-gradient(118deg, transparent 8%, rgba(255,255,255,.76) 22%, rgba(255,255,255,.08) 38%, rgba(218,242,247,.48) 49%, transparent 63%, rgba(255,224,211,.42) 78%, transparent 94%),
    conic-gradient(
      from 194deg,
      rgba(255,255,255,.48) 0deg,
      rgba(168,226,239,.72) 42deg,
      rgba(225,248,248,.74) 78deg,
      rgba(205,193,239,.64) 124deg,
      rgba(249,213,199,.7) 169deg,
      rgba(255,241,218,.62) 205deg,
      rgba(203,239,235,.66) 246deg,
      rgba(197,215,247,.62) 292deg,
      rgba(240,203,229,.6) 330deg,
      rgba(255,255,255,.48) 360deg
    );
  box-shadow: none;
  backdrop-filter: blur(13px) saturate(132%) brightness(1.04);
  -webkit-backdrop-filter: blur(13px) saturate(132%) brightness(1.04);
  filter:
    blur(var(--wave-softness))
    drop-shadow(0 var(--wave-depth-y) var(--wave-depth-blur) rgba(112,150,190,.2))
    drop-shadow(0 -3px 5px rgba(255,255,255,.68));
  mix-blend-mode: screen;
  -webkit-mask: radial-gradient(farthest-side, transparent 0 88%, rgba(0,0,0,.35) 89%, #000 92.5%, #000 98%, transparent 100%);
  mask: radial-gradient(farthest-side, transparent 0 88%, rgba(0,0,0,.35) 89%, #000 92.5%, #000 98%, transparent 100%);
}

.hero-wave::before {
  inset: 0;
  border: 0;
  background:
    repeating-conic-gradient(from 24deg, transparent 0 16deg, rgba(255,255,255,.58) 18deg 22deg, transparent 25deg 46deg);
  box-shadow: none;
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: .58;
}

.hero-wave::after {
  inset: 0;
  border: 0;
  background:
    conic-gradient(from 110deg, transparent 0 18%, rgba(255,255,255,.78) 24%, transparent 31% 56%, rgba(170,228,239,.46) 64%, rgba(224,196,238,.38) 72%, transparent 81%);
  filter: blur(4px);
  mix-blend-mode: soft-light;
  opacity: .78;
}

.hero-wave-1 {
  --wave-alpha: .82;
  --wave-mid-alpha: .68;
  --wave-fade-alpha: .34;
  --wave-trace-alpha: .1;
  --wave-delay: -1.1s;
  --wave-rotate: -4deg;
  --wave-softness: 0px;
  --wave-depth-y: 14px;
  --wave-depth-blur: 18px;
  z-index: 4;
}

.hero-wave-2 {
  --wave-alpha: .7;
  --wave-mid-alpha: .58;
  --wave-fade-alpha: .29;
  --wave-trace-alpha: .08;
  --wave-delay: -3.85s;
  --wave-rotate: 3deg;
  --wave-softness: .3px;
  --wave-depth-y: 11px;
  --wave-depth-blur: 16px;
  z-index: 3;
}

.hero-wave-3 {
  --wave-alpha: .58;
  --wave-mid-alpha: .47;
  --wave-fade-alpha: .23;
  --wave-trace-alpha: .06;
  --wave-delay: -6.6s;
  --wave-rotate: -2deg;
  --wave-softness: .7px;
  --wave-depth-y: 8px;
  --wave-depth-blur: 14px;
  z-index: 2;
}

.hero-wave-4 {
  --wave-alpha: .46;
  --wave-mid-alpha: .36;
  --wave-fade-alpha: .17;
  --wave-trace-alpha: .04;
  --wave-delay: -9.35s;
  --wave-rotate: 5deg;
  --wave-softness: 1.1px;
  --wave-depth-y: 5px;
  --wave-depth-blur: 12px;
  z-index: 1;
}

.hero-logo-core {
  z-index: 6;
}

.hero-logo-display::before {
  width: min(560px, 88%);
  aspect-ratio: 1;
  background:
    conic-gradient(from 135deg, rgba(255,255,255,.16), rgba(167,227,239,.3), rgba(255,255,255,.42), rgba(208,194,239,.28), rgba(249,207,188,.26), rgba(255,255,255,.38), rgba(167,227,239,.22));
  filter: blur(34px);
  opacity: .66;
}

.hero-logo-display::after {
  width: min(520px, 82%);
  aspect-ratio: 1;
  border-color: rgba(255,255,255,.46);
  box-shadow:
    0 22px 62px rgba(119,159,195,.13),
    inset 0 2px 8px rgba(255,255,255,.54),
    inset 0 -12px 26px rgba(183,196,232,.09);
  opacity: .36;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-wave {
    animation: hero-wave-radiate 11s cubic-bezier(.2,.38,.2,1) var(--wave-delay) infinite;
  }
}

@keyframes hero-wave-radiate {
  0% {
    opacity: 0;
    transform: translate3d(-50%,-50%,0) rotateZ(var(--wave-rotate)) scale(.62);
    border-radius: 47% 53% 49% 51% / 52% 47% 53% 48%;
  }
  12% { opacity: var(--wave-alpha); }
  34% {
    opacity: var(--wave-mid-alpha);
    transform: translate3d(-50%,-50%,18px) rotateZ(calc(var(--wave-rotate) + 4deg)) scale(1.36);
    border-radius: 54% 46% 57% 43% / 45% 56% 44% 55%;
  }
  62% {
    opacity: var(--wave-fade-alpha);
    transform: translate3d(-50%,-50%,9px) rotateZ(calc(var(--wave-rotate) - 3deg)) scale(2.55);
    border-radius: 44% 56% 46% 54% / 58% 42% 55% 45%;
  }
  84% { opacity: var(--wave-trace-alpha); }
  100% {
    opacity: 0;
    transform: translate3d(-50%,-50%,0) rotateZ(calc(var(--wave-rotate) + 2deg)) scale(4.25);
    border-radius: 52% 48% 58% 42% / 43% 57% 46% 54%;
  }
}

@media (max-width: 980px) {
  .hero-wave-field::before,
  .hero-wave {
    top: 50%;
    left: 50%;
  }

  .hero-wave {
    width: clamp(330px, 76vw, 560px);
    height: auto;
  }
}

@media (max-width: 760px) {
  .hero-wave-field {
    width: max(220vw, 1100px);
    height: max(160vh, 1000px);
    perspective: none;
  }

  .hero-wave-field::before,
  .hero-wave {
    top: 50%;
    left: 50%;
  }

  .hero-wave {
    width: clamp(300px, 82vw, 500px);
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave-field {
    transform: translate3d(-50%,-50%,0);
  }
}

/* Increase separation from the pale page while preserving the source palette. */
.hero-wave {
  --wave-inner: 84%;
  --wave-shadow: rgba(83,119,170,.32);
  background:
    linear-gradient(116deg, rgba(255,255,255,.96) 4%, rgba(105,205,229,.82) 19%, rgba(255,255,255,.48) 31%, rgba(151,132,222,.72) 44%, rgba(255,255,255,.62) 55%, rgba(245,151,119,.72) 69%, rgba(248,202,105,.62) 78%, rgba(134,225,204,.7) 89%, rgba(255,255,255,.92) 100%),
    conic-gradient(
      from 188deg,
      rgba(103,197,226,.9) 0deg,
      rgba(226,250,252,.96) 42deg,
      rgba(142,128,222,.8) 88deg,
      rgba(233,184,228,.78) 132deg,
      rgba(247,153,119,.8) 176deg,
      rgba(252,214,128,.78) 218deg,
      rgba(119,220,201,.76) 260deg,
      rgba(112,160,225,.8) 306deg,
      rgba(205,154,224,.76) 338deg,
      rgba(103,197,226,.9) 360deg
    );
  background-blend-mode: screen, normal;
  backdrop-filter: blur(15px) saturate(155%) contrast(1.08);
  -webkit-backdrop-filter: blur(15px) saturate(155%) contrast(1.08);
  filter:
    blur(var(--wave-softness))
    drop-shadow(0 var(--wave-depth-y) var(--wave-depth-blur) var(--wave-shadow))
    drop-shadow(0 -4px 7px rgba(255,255,255,.92));
  mix-blend-mode: normal;
  -webkit-mask: radial-gradient(farthest-side, transparent 0 var(--wave-inner), rgba(0,0,0,.42) calc(var(--wave-inner) + 1%), #000 calc(var(--wave-inner) + 4.5%), #000 97.5%, rgba(0,0,0,.72) 99%, transparent 100%);
  mask: radial-gradient(farthest-side, transparent 0 var(--wave-inner), rgba(0,0,0,.42) calc(var(--wave-inner) + 1%), #000 calc(var(--wave-inner) + 4.5%), #000 97.5%, rgba(0,0,0,.72) 99%, transparent 100%);
}

.hero-wave::before {
  background:
    repeating-conic-gradient(from 12deg, transparent 0 12deg, rgba(255,255,255,.88) 15deg 18deg, rgba(78,155,205,.16) 21deg, transparent 25deg 43deg);
  filter: blur(1.2px);
  opacity: .82;
}

.hero-wave::after {
  background:
    conic-gradient(from 102deg, rgba(63,119,181,.18), transparent 9% 19%, rgba(255,255,255,.96) 25%, transparent 34% 49%, rgba(83,196,222,.54) 58%, rgba(151,126,220,.48) 67%, rgba(244,148,116,.5) 76%, transparent 85%, rgba(255,255,255,.72));
  filter: blur(2.6px);
  mix-blend-mode: soft-light;
  opacity: .86;
}

.hero-wave-1 {
  --wave-alpha: .96;
  --wave-mid-alpha: .82;
  --wave-fade-alpha: .44;
  --wave-trace-alpha: .12;
  --wave-inner: 80.5%;
  --wave-shadow: rgba(77,108,158,.38);
  --wave-softness: 0px;
}

.hero-wave-2 {
  --wave-alpha: .88;
  --wave-mid-alpha: .72;
  --wave-fade-alpha: .38;
  --wave-trace-alpha: .1;
  --wave-inner: 83%;
  --wave-shadow: rgba(89,122,174,.32);
  --wave-softness: .2px;
}

.hero-wave-3 {
  --wave-alpha: .78;
  --wave-mid-alpha: .62;
  --wave-fade-alpha: .32;
  --wave-trace-alpha: .08;
  --wave-inner: 85%;
  --wave-shadow: rgba(99,133,181,.27);
  --wave-softness: .55px;
}

.hero-wave-4 {
  --wave-alpha: .68;
  --wave-mid-alpha: .52;
  --wave-fade-alpha: .26;
  --wave-trace-alpha: .06;
  --wave-inner: 87%;
  --wave-shadow: rgba(110,143,187,.22);
  --wave-softness: .9px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-wave::before {
    animation: hero-wave-sheen 5.4s ease-in-out var(--wave-delay) infinite alternate;
  }
}

@keyframes hero-wave-sheen {
  0% { opacity: .58; transform: rotate(-8deg) scale(.98); }
  48% { opacity: .92; transform: rotate(7deg) scale(1.025); }
  100% { opacity: .7; transform: rotate(15deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave::before { animation: none; }
}

/* Stable compositor path: no live backdrop sampling on animated masks. */
.hero-wave-field {
  width: 1px;
  height: 1px;
  perspective: none;
  transform: translate3d(-50%,-50%,0);
  transform-style: flat;
  transition: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-wave {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  transform-style: flat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

.hero-wave::before,
.hero-wave::after {
  filter: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-wave::after {
  mix-blend-mode: normal;
  opacity: .48;
}

.hero-wave-1 {
  --wave-delay: 0s;
  border-radius: 47% 53% 49% 51% / 52% 47% 53% 48%;
  filter: drop-shadow(0 12px 16px rgba(77,108,158,.28));
}

.hero-wave-2 {
  --wave-delay: -3s;
  border-radius: 53% 47% 56% 44% / 46% 55% 45% 54%;
  filter: drop-shadow(0 9px 14px rgba(89,122,174,.2));
}

.hero-wave-3 {
  --wave-delay: -6s;
  border-radius: 45% 55% 47% 53% / 57% 43% 54% 46%;
}

.hero-wave-4 {
  --wave-delay: -9s;
  border-radius: 51% 49% 57% 43% / 44% 56% 47% 53%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-wave {
    animation: hero-wave-radiate-stable 12s linear var(--wave-delay) infinite;
  }

  .hero-wave::before {
    animation: hero-wave-sheen-stable 7.2s ease-in-out var(--wave-delay) infinite alternate;
  }
}

@keyframes hero-wave-radiate-stable {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) rotate(var(--wave-rotate)) scale(.7);
  }
  10% {
    opacity: .16;
    transform: translate(-50%,-50%) rotate(calc(var(--wave-rotate) + 1deg)) scale(.86);
  }
  20% {
    opacity: var(--wave-alpha);
    transform: translate(-50%,-50%) rotate(calc(var(--wave-rotate) + 2deg)) scale(1.14);
  }
  45% {
    opacity: var(--wave-mid-alpha);
    transform: translate(-50%,-50%) rotate(calc(var(--wave-rotate) + 4deg)) scale(1.92);
  }
  70% {
    opacity: var(--wave-fade-alpha);
    transform: translate(-50%,-50%) rotate(calc(var(--wave-rotate) + 1deg)) scale(2.82);
  }
  90% {
    opacity: var(--wave-trace-alpha);
    transform: translate(-50%,-50%) rotate(calc(var(--wave-rotate) - 2deg)) scale(3.62);
  }
  100% {
    opacity: 0;
    transform: translate(-50%,-50%) rotate(var(--wave-rotate)) scale(4.05);
  }
}

@keyframes hero-wave-sheen-stable {
  0% { transform: rotate(-6deg) scale(.99); }
  50% { transform: rotate(5deg) scale(1.015); }
  100% { transform: rotate(11deg) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave::before { animation: none; }
}

/* Keep the large ambient light breathing without animating its blur radius. */
@media (prefers-reduced-motion: no-preference) {
  .ambient-shine {
    animation: ambient-light-stable 14s ease-in-out infinite;
  }
}

@keyframes ambient-light-stable {
  0%, 100% { opacity: .68; }
  50% { opacity: .77; }
}

/* Vector silk wavefronts: irregular paths, no masks or live blur sampling. */
.hero-wave-field {
  width: min(2200px, 220vw);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  transform: translate3d(-50%,-50%,0);
}

.hero-wave-field::before {
  display: none;
}

.hero-wave-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-wave-ribbon {
  --ribbon-delay: 0s;
  --ribbon-angle: 0deg;
  --ribbon-peak: .76;
  --ribbon-mid: .52;
  --ribbon-fade: .24;
  --ribbon-trace: .06;
  opacity: 0;
  transform-box: view-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.hero-wave-ribbon use {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hero-wave-air {
  stroke: url(#hero-wave-spectrum);
  stroke-width: 72;
  opacity: .12;
}

.hero-wave-shadow {
  stroke: rgba(99,126,169,.34);
  stroke-width: 40;
  opacity: .24;
  transform: translateY(9px);
}

.hero-wave-body {
  stroke: url(#hero-wave-spectrum);
  stroke-width: 30;
  opacity: .82;
}

.hero-wave-highlight {
  stroke: url(#hero-wave-highlight);
  stroke-width: 6;
  stroke-dasharray: 190 54 104 66;
  opacity: .78;
  transform: translateY(-5px);
}

.hero-wave-ribbon-1 {
  --ribbon-delay: 0s;
  --ribbon-angle: -5deg;
  --ribbon-peak: .82;
  --ribbon-mid: .58;
}

.hero-wave-ribbon-2 {
  --ribbon-delay: -3.2s;
  --ribbon-angle: 4deg;
  --ribbon-peak: .72;
  --ribbon-mid: .48;
}

.hero-wave-ribbon-3 {
  --ribbon-delay: -6.4s;
  --ribbon-angle: -2deg;
  --ribbon-peak: .62;
  --ribbon-mid: .4;
}

.hero-wave-ribbon-4 {
  --ribbon-delay: -9.6s;
  --ribbon-angle: 7deg;
  --ribbon-peak: .52;
  --ribbon-mid: .32;
}

.hero-logo-display::before,
.ambient-shine {
  animation: none !important;
}

.hero-logo-display::before {
  opacity: .58;
}

.ambient-shine {
  opacity: .72;
  filter: blur(118px);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-wave-ribbon {
    animation: hero-ribbon-expand 12.8s linear var(--ribbon-delay) infinite;
  }

  .hero-wave-highlight {
    animation: hero-ribbon-glint 8s linear var(--ribbon-delay) infinite;
  }
}

@keyframes hero-ribbon-expand {
  0% {
    opacity: 0;
    transform: rotate(var(--ribbon-angle)) scale(.78);
  }
  12% {
    opacity: .14;
    transform: rotate(calc(var(--ribbon-angle) + 1deg)) scale(.94);
  }
  22% {
    opacity: var(--ribbon-peak);
    transform: rotate(calc(var(--ribbon-angle) + 2deg)) scale(1.18);
  }
  48% {
    opacity: var(--ribbon-mid);
    transform: rotate(calc(var(--ribbon-angle) + 4deg)) scale(1.9);
  }
  74% {
    opacity: var(--ribbon-fade);
    transform: rotate(calc(var(--ribbon-angle) + 1deg)) scale(2.85);
  }
  90% {
    opacity: var(--ribbon-trace);
    transform: rotate(calc(var(--ribbon-angle) - 2deg)) scale(3.65);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--ribbon-angle)) scale(4.15);
  }
}

@keyframes hero-ribbon-glint {
  to { stroke-dashoffset: -414; }
}

@media (max-width: 760px) {
  .hero-wave-field {
    width: 230vw;
    height: auto;
  }

  .hero-wave-air { stroke-width: 92; }
  .hero-wave-shadow { stroke-width: 52; }
  .hero-wave-body { stroke-width: 40; }
  .hero-wave-highlight { stroke-width: 9; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave-ribbon {
    opacity: .26;
    transform: rotate(var(--ribbon-angle)) scale(1.55);
  }

  .hero-wave-highlight {
    animation: none;
  }
}

/* Make the vector wave motion legible from the logo edge. */
.hero-wave-field {
  width: min(3000px, 300vw);
}

.hero-wave-air {
  opacity: .18;
}

.hero-wave-shadow {
  opacity: .3;
}

.hero-wave-body {
  opacity: .94;
}

.hero-wave-highlight {
  opacity: .9;
}

.hero-wave-ribbon-1 {
  --ribbon-delay: 0s;
  --ribbon-peak: .88;
  --ribbon-mid: .62;
  --ribbon-fade: .28;
  --ribbon-trace: .07;
}

.hero-wave-ribbon-2 {
  --ribbon-delay: -2.5s;
  --ribbon-peak: .78;
  --ribbon-mid: .52;
  --ribbon-fade: .24;
  --ribbon-trace: .06;
}

.hero-wave-ribbon-3 {
  --ribbon-delay: -5s;
  --ribbon-peak: .68;
  --ribbon-mid: .44;
  --ribbon-fade: .2;
  --ribbon-trace: .05;
}

.hero-wave-ribbon-4 {
  --ribbon-delay: -7.5s;
  --ribbon-peak: .58;
  --ribbon-mid: .36;
  --ribbon-fade: .16;
  --ribbon-trace: .04;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-wave-ribbon {
    animation: hero-ribbon-visible 10s linear var(--ribbon-delay) infinite;
  }

  .hero-wave-highlight {
    animation: hero-ribbon-glint 5.5s linear var(--ribbon-delay) infinite;
  }

  .hero-logo-core img {
    animation: hero-logo-tide-visible 6.4s ease-in-out infinite;
  }
}

@keyframes hero-ribbon-visible {
  0% {
    opacity: 0;
    transform: rotate(var(--ribbon-angle)) scale(.88);
  }
  10% {
    opacity: .18;
    transform: rotate(calc(var(--ribbon-angle) + 1deg)) scale(1.06);
  }
  18% {
    opacity: var(--ribbon-peak);
    transform: rotate(calc(var(--ribbon-angle) + 2deg)) scale(1.36);
  }
  45% {
    opacity: var(--ribbon-mid);
    transform: rotate(calc(var(--ribbon-angle) + 4deg)) scale(2.1);
  }
  72% {
    opacity: var(--ribbon-fade);
    transform: rotate(calc(var(--ribbon-angle) + 1deg)) scale(2.9);
  }
  90% {
    opacity: var(--ribbon-trace);
    transform: rotate(calc(var(--ribbon-angle) - 2deg)) scale(3.45);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--ribbon-angle)) scale(3.8);
  }
}

@keyframes hero-logo-tide-visible {
  0%, 100% { transform: translate3d(0,0,24px) rotate(-.2deg) scale(1); }
  48% { transform: translate3d(0,-7px,30px) rotate(.3deg) scale(1.014); }
  74% { transform: translate3d(2px,-3px,26px) rotate(.08deg) scale(1.006); }
}

@media (max-width: 760px) {
  .hero-wave-field {
    width: 420vw;
  }
}

/* Direct SVG paths use native SVG timing; keep CSS from overriding it. */
.hero-wave-ribbon {
  opacity: 1;
  transform: none;
  animation: none !important;
  will-change: auto;
}

.hero-wave-ribbon path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave-ribbon {
    display: none;
  }
}

/* Keep the liquid wave surface locked to the logo's own center plane. */
.hero-logo-core > .hero-wave-field {
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(1800px, 180vw);
  height: auto;
  aspect-ratio: 1;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 50%;
}

.hero-logo-core > img {
  position: relative;
  z-index: 2;
}

.hero-wave-air {
  stroke-width: 104;
  opacity: .16;
}

.hero-wave-shadow {
  stroke: rgba(71, 99, 151, .46);
  stroke-width: 56;
  opacity: .36;
  transform: translateY(14px);
}

.hero-wave-body {
  stroke-width: 38;
  opacity: .9;
}

.hero-wave-highlight {
  stroke-width: 8;
  stroke-dasharray: 118 42 72 48;
  opacity: .9;
  transform: translateY(-8px);
}

@media (max-width: 760px) {
  .hero-logo-core > .hero-wave-field {
    width: 320vw;
  }
}

/* Atmospheric wavefronts: background color rises from the logo without hard rings. */
.hero-logo-core > .hero-wave-field {
  width: min(2200px, 220vw);
}

.hero-wave-svg {
  opacity: .96;
  shape-rendering: geometricPrecision;
}

.hero-wave-air {
  stroke: url(#hero-wave-spectrum) !important;
  stroke-width: 220;
  opacity: .07;
}

.hero-wave-shadow {
  stroke: url(#hero-wave-spectrum) !important;
  stroke-width: 132;
  opacity: .11;
  transform: translateY(10px);
}

.hero-wave-body {
  stroke: url(#hero-wave-spectrum) !important;
  stroke-width: 76;
  opacity: .34;
}

.hero-wave-highlight {
  stroke: url(#hero-wave-highlight) !important;
  stroke-width: 5;
  stroke-dasharray: 210 120 86 150;
  opacity: .38;
  transform: translateY(-4px);
}

/* Final hero wave: long, slow, and blended into the page atmosphere. */
.hero-logo-core > .hero-wave-field {
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(1800px, 180vw);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 50%;
  transform-style: flat;
}

.hero-logo-core > .hero-wave-field .hero-wave {
  display: none !important;
  animation: none !important;
}

.hero-wave-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 1;
  shape-rendering: geometricPrecision;
}

#hero-wave-spectrum stop:first-child,
#hero-wave-spectrum stop:last-child {
  stop-opacity: .66;
}

#hero-wave-highlight stop:first-child,
#hero-wave-highlight stop:last-child {
  stop-opacity: .4;
}

.hero-wave-air {
  stroke: url(#hero-wave-spectrum) !important;
  stroke-width: 336;
  opacity: .4;
}

.hero-wave-shadow,
.hero-wave-highlight {
  display: none;
}

.hero-wave-body {
  stroke: url(#hero-wave-spectrum) !important;
  stroke-width: 150;
  opacity: 1;
}

.hero-wave-ribbon {
  --wave-peak: .9;
  --wave-mid: .7;
  --wave-fade: .3;
}

.hero-wave-ribbon-1 {
  --wave-peak: .98;
  --wave-mid: .94;
  --wave-fade: .54;
}

.hero-wave-ribbon-2 {
  --wave-peak: .96;
  --wave-mid: .89;
  --wave-fade: .5;
}

.hero-wave-ribbon-3 {
  --wave-peak: .92;
  --wave-mid: .85;
  --wave-fade: .46;
}

.hero-wave-ribbon-4 {
  --wave-peak: .86;
  --wave-mid: .8;
  --wave-fade: .42;
}

.hero-wave-layer {
  transform-box: fill-box;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-wave-layer {
    animation: hero-wave-composited 30s linear infinite;
  }

  .hero-wave-ribbon-1 .hero-wave-layer { animation-delay: 0s; }
  .hero-wave-ribbon-2 .hero-wave-layer { animation-delay: -7.5s; }
  .hero-wave-ribbon-3 .hero-wave-layer { animation-delay: -15s; }
  .hero-wave-ribbon-4 .hero-wave-layer { animation-delay: -22.5s; }
}

@keyframes hero-wave-composited {
  0% {
    opacity: 0;
    transform: scale(.94);
  }
  16% {
    opacity: var(--wave-peak);
    transform: scale(1.34);
  }
  47% {
    opacity: var(--wave-mid);
    transform: scale(2.02);
  }
  76% {
    opacity: var(--wave-fade);
    transform: scale(2.62);
  }
  100% {
    opacity: 0;
    transform: scale(3.12);
  }
}

@keyframes hero-logo-tide-visible {
  0%, 100% { transform: translate3d(0,0,0) rotate(-.2deg) scale(1); }
  48% { transform: translate3d(0,-5px,0) rotate(.25deg) scale(1.01); }
  74% { transform: translate3d(1px,-2px,0) rotate(.06deg) scale(1.004); }
}

@media (max-width: 760px) {
  .hero-logo-core > .hero-wave-field {
    width: 240vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave-ribbon {
    display: block;
  }

  .hero-wave-ribbon-1 .hero-wave-layer {
    opacity: .42;
    transform: scale(1.58);
  }

  .hero-wave-ribbon:not(.hero-wave-ribbon-1) .hero-wave-layer {
    opacity: 0;
  }
}

/* The logo is decorative and remains visually unchanged under the pointer. */
.hero-logo-display {
  pointer-events: none;
}

.hero-logo-core {
  transform: none !important;
  transition: none !important;
}

.hero-logo-core > img {
  opacity: 1;
  mix-blend-mode: normal;
  filter: drop-shadow(0 34px 50px rgba(35,39,50,.16)) !important;
  transition: none !important;
}

.ambient-shine {
  transform: none !important;
  transition: none !important;
}

/* Keep scroll work on composited layers and pause ambient motion while the page moves. */
.ambient {
  contain: layout paint;
}

.ambient-wash,
.ambient-shine {
  filter: none;
}

.ambient-shine {
  background: radial-gradient(ellipse at center, rgba(255,255,255,.78) 0 26%, rgba(255,255,255,.38) 48%, transparent 74%);
}

.hero-wave-svg {
  shape-rendering: auto;
}

.hero-wave-svg.is-paused .hero-wave-layer,
body.is-scrolling .hero-wave-layer,
body.is-scrolling .ambient-wash,
body.is-scrolling .hero-logo-core > img {
  animation-play-state: paused !important;
}

.site-header.is-scrolled .nav-shell,
body.is-scrolling .site-header .nav-shell {
  background: rgba(249,251,255,.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Every product view uses the same transition while keeping its own interface. */
.flow-visual .product-panel {
  transform-origin: 50% 54%;
  transition: opacity 170ms ease, visibility 0s linear 170ms;
}

.flow-visual .product-panel.is-active,
.flow-stage.is-switching .product-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .flow-visual .product-panel.is-active {
    animation: flow-panel-enter 460ms cubic-bezier(.16,1,.3,1) both;
  }
}

@keyframes flow-panel-enter {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 18px)) scale(.975);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-visual .product-panel.is-active {
    animation: none;
  }
}
/* Static atmospheric field: soft color remains, large moving shapes do not. */
.ambient {
  background:
    radial-gradient(ellipse 72% 64% at 4% 18%, rgba(177,208,239,.34) 0, rgba(201,189,233,.12) 48%, transparent 74%),
    radial-gradient(ellipse 68% 62% at 94% 42%, rgba(149,216,211,.26) 0, rgba(198,185,232,.2) 50%, transparent 76%),
    radial-gradient(ellipse 74% 58% at 48% 100%, rgba(246,200,183,.24) 0, rgba(190,210,238,.2) 52%, transparent 78%),
    var(--pearl);
}

.ambient-wash,
.ambient-shine {
  display: none !important;
  animation: none !important;
}
/* One stable stage and one transition for all four product views. */
.flow-visual {
  height: 470px;
  min-height: 470px;
}

.flow-visual .product-panel,
.flow-visual .product-panel.is-active,
.flow-stage.is-switching .product-panel.is-active,
.flow-stage.is-switching .project-card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  contain: layout paint;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none !important;
}

.flow-visual .product-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 14px, 0) scale(.985);
  transition:
    opacity 220ms ease,
    transform 420ms cubic-bezier(.16,1,.3,1),
    visibility 0s linear 420ms;
  will-change: opacity, transform;
}

.flow-visual .product-panel.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
}

.flow-stage.is-copy-switching .flow-copy {
  opacity: 0;
  transform: translateY(12px);
}

@media (max-width: 980px) {
  .flow-visual {
    height: 480px;
    min-height: 480px;
  }
}

@media (max-width: 760px) {
  .flow-visual {
    height: 500px;
    min-height: 500px;
  }
}

@media (max-width: 430px) {
  .flow-visual {
    height: 540px;
    min-height: 540px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-visual .product-panel {
    transform: none;
    transition: none;
  }
}
/* Preserve the demo button's text-to-icon spacing after swapping CTA colors. */
.hero-actions .secondary-action {
  gap: 22px;
  color: #171923;
  border-color: rgba(105,120,151,.24);
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(237,244,252,.72));
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(56,70,102,.17);
}

.hero-action-arrow {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  align-self: center;
}

.hero-actions .secondary-action:hover,
.hero-actions .secondary-action:focus-visible {
  background: linear-gradient(145deg, #fff, rgba(242,247,253,.9));
  box-shadow: inset 0 1px 0 #fff, 0 16px 34px rgba(56,70,102,.21);
}

/* Final narrow-screen pass: keep the first viewport useful and prevent decorative art from widening the layout. */
@media (max-width: 760px) {
  .nav-shell { width: calc(100% - 32px); }
  .nav-toggle {
    position: relative;
    z-index: 1;
    justify-self: end;
    border: 1px solid rgba(80, 90, 111, .16);
    box-shadow: 0 8px 18px rgba(75, 90, 121, .12), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .nav-toggle span { background: #161821; }

  /* The large brand mark is already represented in the fixed brand bar on phones. */
  .hero-logo-display { display: none; }
  .hero { min-height: auto; padding-bottom: 28px; }
  .hero-shell { width: var(--shell); min-height: auto; }
  .hero-copy { width: 100%; }
  .hero-proof { grid-template-columns: 1fr; gap: 7px; }
  .hero-proof span { white-space: normal; }

  .flow-stage { width: 100%; max-width: 100%; overflow: hidden; }
  .flow-stage::before { right: -8%; width: 64%; }
  .flow-visual { width: 100%; max-width: 100%; }
  .flow-controls { width: auto; }

  .download-option { min-width: 0; }
  .platform-name, .platform-detail { min-width: 0; }
  .platform-detail strong, .platform-detail small { overflow-wrap: anywhere; }
}

@media (max-width: 430px) {
  .hero h1 { font-size: clamp(46px, 13vw, 62px); }
  .hero-lead { font-size: 18px; line-height: 1.58; }
  .hero-actions { gap: 10px; }
  .flow-stage { min-height: 980px; padding: 52px 20px 174px; }
  .flow-visual { height: 510px; min-height: 510px; }
  .download-panel { padding-right: 14px; padding-left: 14px; }
  .download-option { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) 18px; gap: 10px; }
}

/* Mobile hero keeps the desktop composition: copy in front, brand tide behind. */
@media (max-width: 760px) {
  .hero { padding-bottom: 72px; }
  .hero-shell { position: relative; isolation: isolate; }
  .hero-copy { position: relative; z-index: 3; }

  .hero-logo-display {
    display: grid;
    position: absolute;
    z-index: 1;
    right: -48px;
    bottom: -40px;
    width: 260px;
    min-height: 0;
    margin: 0;
    opacity: .68;
  }
  .hero-logo-display::before { width: 280px; opacity: .55; }
  .hero-logo-display::after { width: 230px; opacity: .24; }
  .hero-logo-core { min-height: 0; }
  .hero-logo-core > img { width: 210px; max-width: none; }
  .hero-logo-core > .hero-wave-field { width: 760px; height: 760px; }

  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(104px, .75fr);
    gap: 10px;
    width: 100%;
    max-width: 430px;
    transform: none;
  }
  .hero-actions .primary-action,
  .hero-actions .secondary-action {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 0 15px;
    font-size: 13px;
  }
  .hero-actions .primary-action { justify-content: center; }
  .hero-actions .secondary-action { justify-content: space-between; }
}

@media (max-width: 360px) {
  .hero-actions { grid-template-columns: 1fr; }
  .hero-actions .primary-action,
  .hero-actions .secondary-action { min-height: 52px; }
  .hero-logo-display { right: -80px; width: 230px; opacity: .52; }
  .hero-logo-core > img { width: 180px; }
}

/* Reserve a compact mobile stage for the complete desktop clock mark. */
@media (max-width: 760px) {
  .hero { padding-bottom: 180px; }
  .hero-logo-display {
    right: 4px;
    bottom: -152px;
    width: 190px;
    opacity: .92;
  }
  .hero-logo-display::before { width: 228px; opacity: .6; }
  .hero-logo-display::after { width: 198px; opacity: .3; }
  .hero-logo-core > img { width: 170px; }
  .hero-logo-core > .hero-wave-field { width: 620px; height: 620px; }
}

@media (max-width: 360px) {
  .hero { padding-bottom: 158px; }
  .hero-logo-display { right: -4px; bottom: -136px; width: 172px; opacity: .86; }
  .hero-logo-core > img { width: 152px; }
}

@media (max-width: 360px) {
  .hero-actions {
    grid-template-columns: minmax(0, 1.55fr) minmax(90px, .75fr);
    gap: 8px;
  }
  .hero-actions .primary-action,
  .hero-actions .secondary-action {
    min-height: 52px;
    padding: 0 12px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .hero-proof { gap: 4px 8px; font-size: 11px; }
  .hero-proof span { gap: 4px; }
  .hero-proof b { font-size: 9px; }
}
/* Final mobile composition: preserve desktop hierarchy on phones. */
@media (max-width:760px){
  :where(#flow,#capabilities,#scenes,#download){scroll-margin-top:92px}
  .hero{min-height:0;padding-top:96px;padding-bottom:58px}
  .hero-shell{display:block;min-height:0;padding-top:28px}
  .hero-copy{width:100%;max-width:none}
  .hero-label,.hero-lead,.hero-proof,.hero-actions{position:relative;z-index:4}
  .hero-label{max-width:72%;margin-bottom:16px;font-size:13px;line-height:1.45}
  .hero h1{max-width:70%;margin-bottom:20px;font-size:clamp(46px,13.5vw,64px);line-height:1.03}
  .hero-lead{max-width:94%;margin-bottom:20px;font-size:17px;line-height:1.58}
  .hero-proof{max-width:82%;grid-template-columns:1fr 1fr;gap:8px 12px}
  .hero-actions{max-width:100%;margin-top:28px}
  .hero-logo-display{display:grid;position:absolute;z-index:1;top:-4px;right:-58px;bottom:auto;width:238px;height:238px;min-height:0;margin:0;opacity:.82;pointer-events:none}
  .hero-logo-display::before{width:252px;opacity:.5}.hero-logo-display::after{width:218px;opacity:.26}
  .hero-logo-core{min-height:0}.hero-logo-core>img{width:194px;max-width:none}.hero-logo-core>.hero-wave-field{width:660px;height:660px}
  .flow-stage{display:block;min-height:0;padding:0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .flow-stage::before,.flow-arc{display:none}
  .flow-copy{margin-bottom:26px}.flow-time{margin-bottom:16px}
  .flow-copy h3{max-width:31rem;margin-bottom:14px;font-size:clamp(27px,7.4vw,36px);line-height:1.2}.flow-copy>p:last-child{max-width:36rem}
  .flow-visual{position:relative;width:100%;height:clamp(320px,87vw,390px);min-height:0;margin:0}
  .flow-visual .product-panel,.flow-visual .product-panel.is-active,.flow-stage.is-switching .product-panel.is-active,.flow-stage.is-switching .project-card{top:0;right:0;bottom:0;left:0;width:100%;height:100%;min-height:0!important;max-height:100%;overflow:hidden;border-radius:24px}
  .voice-publish-preview,.notification-preview,.manager-preview-card,.screenshot-detail{padding:14px}
  .voice-record-preview{min-height:0;height:54%}.voice-record-rings{transform:scale(.78)}.voice-record-preview small{font-size:10px}.screenshot-composer{right:12px;bottom:12px;left:12px}
  .notification-preview__head h3{font-size:21px}.notification-preview__item{padding:12px}.notification-preview__copy p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
  .manager-preview-card .project-card__tasks{margin-top:16px}.manager-preview-card .project-task-item{min-height:0;padding:12px}.manager-preview-card .project-task-item__copy strong{padding-right:0;font-size:12px}.manager-preview-card .project-task-item__copy span{font-size:10px}
  .screenshot-detail .task-detail-preview__head h3{font-size:clamp(17px,4.7vw,21px)}.screenshot-detail .task-detail-preview__fields{grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.task-field-preview{padding:10px}
  .flow-controls{position:static;width:100%;margin-top:16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.flow-controls button{min-height:56px;padding:7px 8px;border-radius:15px}.flow-controls span{font-size:18px}.flow-controls small{font-size:9px}
  .capabilities{padding-top:72px}.capability-orbit{gap:14px}.capability,.capability-wide,.capability-tall{min-height:0;padding:24px}.capability-wide{min-height:190px;gap:22px}.capability-wide .capability-number{font-size:86px}.capability-tall{min-height:278px}.mini-clock{width:min(150px,48vw);margin:0 auto 20px}
  .scenes-shell{gap:30px}.scene-cloud{min-height:300px;margin-top:0}.scene-cloud span{min-width:104px;min-height:52px;padding:9px 12px;border-radius:17px}
  .boundary-shell{gap:28px;padding:28px 22px}.boundary-mark{width:min(190px,60vw)}.boundary-signal{width:min(180px,58vw)}
  .download{padding-bottom:84px}.download-shell{gap:34px}.download-copy img{width:190px;margin-bottom:22px}.download-panel{padding:8px 14px 14px;border-radius:24px}.download-option{min-height:82px;padding:12px 4px}.platform-name{font-size:15px}.platform-detail strong{font-size:12px}.platform-detail small{font-size:9px}
}
@media (max-width:380px){
  .hero-logo-display{right:-72px;width:220px;height:220px}.hero-logo-core>img{width:178px}.hero h1{max-width:74%}.hero-lead{font-size:16px}.hero-proof{max-width:100%;gap:6px 8px}
  .flow-copy h3{font-size:26px}.flow-visual{height:306px}.flow-controls button{min-height:52px}.capability-wide .capability-number{font-size:76px}.scene-cloud{min-height:280px}
}
/* Ensure every mobile product state fits its card. */
@media (max-width:760px){.flow-visual{height:clamp(360px,92vw,410px)}}
@media (max-width:380px){.flow-visual{height:360px}}
/* Mobile keeps the desktop composition and scales dense visuals instead of stacking them. */
@media (max-width:760px){
  .hero-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(132px,.72fr);gap:10px;align-items:center;padding-top:28px}
  .hero-copy{width:100%;max-width:none}
  .hero-label{max-width:78%}.hero h1{max-width:100%}.hero-lead{max-width:100%}.hero-proof{max-width:100%}
  .hero-logo-display{right:-58px;top:-4px;width:238px;height:238px}
  .hero-actions{grid-column:1/-1}
  .flow-stage{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:16px;align-items:center;padding:18px 0 82px}
  .flow-copy{grid-column:1;align-self:center;margin:0}
  .flow-copy h3{font-size:clamp(23px,6.2vw,31px);line-height:1.18}
  .flow-copy>p:last-child{font-size:13px}
  .flow-visual{grid-column:2;grid-row:1;height:clamp(280px,72vw,330px);overflow:visible}
  .flow-visual .product-panel,.flow-visual .product-panel.is-active,.flow-stage.is-switching .product-panel.is-active,.flow-stage.is-switching .project-card{width:125%;height:125%;transform-origin:0 0}
  .flow-visual .product-panel{transform:translate3d(0,10px,0) scale(.79)!important}
  .flow-visual .product-panel.is-active{transform:translate3d(0,0,0) scale(.8)!important}
  .flow-controls{grid-column:1/-1;grid-row:2;margin-top:0}
  .capability-orbit{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-rows:auto auto;gap:12px;min-height:0}
  .capability,.capability-wide,.capability-tall{min-height:0;padding:20px}
  .capability-wide{grid-column:1/-1;min-height:160px;gap:18px;flex-direction:row;align-items:center}
  .capability-wide .capability-number{font-size:clamp(68px,18vw,90px)}
  .capability-tall{grid-column:2;grid-row:2 / span 2;min-height:250px}
  .capability-orbit>.capability:nth-of-type(2){grid-column:1;grid-row:2;min-height:150px}
  .capability-orbit>.capability:nth-of-type(4){grid-column:1;grid-row:3;min-height:150px}
  .mini-clock{width:min(122px,30vw);margin:0 auto 14px}
  .scenes-shell{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:center}
  .scene-cloud{min-height:270px;margin:0}.scene-cloud span{min-width:86px;min-height:48px;padding:8px 10px;border-radius:15px;font-size:11px}
  .boundary-shell{grid-template-columns:minmax(120px,.58fr) minmax(0,1fr);gap:20px;padding:26px 20px}
  .boundary-mark,.boundary-signal{width:min(150px,100%)}.boundary-signal b{font-size:12px}
  .download-shell{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:center}
  .download-copy img{width:min(160px,100%)}.download-panel{padding:8px 10px 12px}.download-option{grid-template-columns:.62fr 1fr 16px;gap:8px;min-height:74px}.platform-name{font-size:13px}.platform-detail strong{font-size:10px}.platform-detail small{font-size:8px}
}
@media (max-width:380px){
  .hero-shell{grid-template-columns:minmax(0,1fr) minmax(118px,.7fr);gap:8px}.hero-logo-display{right:-72px;width:220px;height:220px}
  .flow-stage{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:10px}.flow-copy h3{font-size:22px}.flow-copy>p:last-child{font-size:12px}.flow-visual{height:280px}
  .capability-wide{min-height:148px}.capability-tall{min-height:228px;padding:16px}.capability,.capability-wide{padding:16px}.capability h3{font-size:17px}.capability p{font-size:12px}.mini-clock{width:100px}
  .scenes-shell{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:12px}.scene-cloud{min-height:245px}.scene-cloud span{min-width:76px;font-size:10px}
  .boundary-shell{grid-template-columns:108px minmax(0,1fr);gap:14px;padding:22px 16px}.boundary-mark,.boundary-signal{width:108px}
  .download-shell{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:12px}.download-option{grid-template-columns:.58fr 1fr 14px;gap:6px}.platform-name{font-size:12px}
}
/* Keep hero copy full-width while the mark stays pinned to the right. */
@media (max-width:760px){.hero-shell{display:block}.hero-actions{grid-column:auto}}
/* XR ratio calibration. */
@media (max-width:760px){
.flow-stage{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;padding:12px 0 60px}
.flow-copy h3{font-size:clamp(18px,5vw,24px);line-height:1.14}.flow-copy>p:last-child{font-size:11px;line-height:1.45}.flow-time{font-size:12px;margin-bottom:10px}
.flow-visual{height:210px}.flow-visual .product-panel,.flow-visual .product-panel.is-active,.flow-stage.is-switching .product-panel.is-active,.flow-stage.is-switching .project-card{width:125%;height:125%}
.flow-controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.flow-controls button{min-height:48px;padding:5px 2px;border-radius:12px}.flow-controls span{font-size:16px}.flow-controls small{font-size:8px;white-space:nowrap}
.capability-orbit{grid-template-rows:auto auto auto}.capability-tall{grid-column:1/-1;grid-row:3;min-height:180px;flex-direction:row;align-items:center;gap:16px}.capability-orbit>.capability:nth-of-type(2){grid-column:1;grid-row:2}.capability-orbit>.capability:nth-of-type(4){grid-column:2;grid-row:2}.capability-tall .mini-clock{flex:0 0 92px;margin:0}
}
@media (max-width:380px){.flow-stage{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:8px;padding-bottom:52px}.flow-copy h3{font-size:18px}.flow-visual{height:196px}.flow-controls button{min-height:46px}.flow-controls small{font-size:7px}.capability-tall{min-height:164px}.capability-tall .mini-clock{flex-basis:82px}}
/* Compact the later mobile sections to the desktop rhythm. */
@media (max-width:760px){
.section{padding:68px 0}.section-title{margin-bottom:30px}.section-title h2,.scenes-copy h2,.boundary-copy h2,.download-copy h2{font-size:clamp(28px,8vw,36px);line-height:1.08}.section-intro,.section-title-centered p,.scenes-copy p,.boundary-copy p,.download-copy p{font-size:13px;line-height:1.55}
.capability-orbit{gap:10px}.capability,.capability-wide,.capability-tall{padding:14px}.capability-wide{min-height:126px}.capability-orbit>.capability:nth-of-type(2),.capability-orbit>.capability:nth-of-type(4){min-height:118px}.capability-tall{min-height:136px}.capability h3{margin-bottom:7px;font-size:15px}.capability p{font-size:11px;line-height:1.45}.capability-wide .capability-number{font-size:60px}.capability-tall .mini-clock{flex-basis:74px;width:74px}.capability-glyph{margin-bottom:14px;font-size:32px}
.scenes-copy h2,.boundary-copy h2,.download-copy h2{font-size:clamp(24px,6.8vw,30px)}.scene-cloud{min-height:220px}.scene-cloud span{min-width:78px;min-height:42px;font-size:10px}.scenes-note{margin-top:12px!important}
.boundary-shell{min-height:0;padding:20px 16px}.boundary-copy>span{margin-bottom:12px}.boundary-copy h2{margin-bottom:14px}.boundary-copy p{font-size:11px}
.download-shell{min-height:0}.download-copy h2{margin-bottom:14px}.download-copy p{font-size:11px}.download-panel{min-height:0}.download-option{min-height:66px}
}
@media (max-width:380px){.section{padding:60px 0}.capability-wide{min-height:116px}.capability-orbit>.capability:nth-of-type(2),.capability-orbit>.capability:nth-of-type(4){min-height:110px}.capability-tall{min-height:126px}.scene-cloud{min-height:205px}}
/* Mobile-only clipping, overlap and rhythm fixes. */
@media (max-width:760px){
.section{padding:50px 0}.section-title{margin-bottom:22px}.flow{padding-top:60px;padding-bottom:44px}.capabilities{padding-top:44px}.scenes,.boundary,.download{padding-top:52px;padding-bottom:52px}
.flow-stage{padding-bottom:14px}.flow-visual{overflow:visible}
.flow-visual .product-panel,.flow-visual .product-panel.is-active,.flow-stage.is-switching .product-panel.is-active,.flow-stage.is-switching .project-card{width:238%;height:238%;max-height:none;overflow:hidden;transform-origin:0 0}
.flow-visual .product-panel{transform:translate3d(0,5px,0) scale(.415)!important}.flow-visual .product-panel.is-active{transform:translate3d(0,0,0) scale(.42)!important}
.scenes-copy,.download-copy{min-width:0}.scenes-copy .keep-together,.download-copy .keep-together{display:inline;white-space:normal}
.scene-cloud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:44px;align-content:center;gap:8px;min-width:0}
.scene-cloud span,.scene-cloud span:nth-child(n){position:static;width:100%;min-width:0;min-height:44px;padding:7px 5px;transform:none!important;animation:none!important;text-align:center}
.download-shell{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:12px}.download-panel{width:100%;min-width:0}.download-option{grid-template-columns:minmax(0,.62fr) minmax(0,1fr) 14px;gap:5px}.platform-name,.platform-detail{min-width:0}.platform-detail strong,.platform-detail small{overflow-wrap:anywhere}
}
@media (max-width:380px){.section{padding:44px 0}.flow{padding-top:52px;padding-bottom:38px}.capabilities{padding-top:38px}.scenes,.boundary,.download{padding-top:46px;padding-bottom:46px}.flow-stage{padding-bottom:10px}.download-shell{gap:8px}}
/* Tighter mobile section-to-section rhythm. */
@media (max-width:760px){.flow{padding-bottom:24px}.capabilities{padding-top:24px;padding-bottom:36px}.scenes,.boundary,.download{padding-top:36px;padding-bottom:36px}}
@media (max-width:380px){.flow{padding-bottom:22px}.capabilities{padding-top:22px;padding-bottom:32px}.scenes,.boundary,.download{padding-top:32px;padding-bottom:32px}}
/* Mobile type scale and desktop-like scene chip placement. */
@media (max-width:760px){
.hero h1{max-width:64%;font-size:clamp(38px,10.5vw,46px);line-height:1.04}.hero-lead{font-size:15px;line-height:1.55}.hero-logo-display{top:8px;right:-36px;width:200px;height:200px}.hero-logo-display::before{width:214px}.hero-logo-display::after{width:184px}.hero-logo-core>img{width:164px}
.section-title h2{font-size:clamp(28px,7.2vw,32px)}.scenes-copy h2,.boundary-copy h2,.download-copy h2{font-size:clamp(22px,5.9vw,26px);line-height:1.12}.scenes-copy p,.boundary-copy p,.download-copy p{font-size:12px}.scenes-note{font-size:12px!important}
.scene-cloud{position:relative;display:block;min-height:220px}
.scene-cloud span,.scene-cloud span:nth-child(n){position:absolute;width:86px;min-width:0;min-height:42px;padding:7px 5px}
.scene-cloud span:nth-child(1){top:2px;left:0}.scene-cloud span:nth-child(2){top:20px;right:0}.scene-cloud span:nth-child(3){top:74px;left:18px}.scene-cloud span:nth-child(4){top:88px;right:0}.scene-cloud span:nth-child(5){bottom:20px;left:0}.scene-cloud span:nth-child(6){right:4px;bottom:0}
}
@media (max-width:380px){.hero h1{max-width:66%;font-size:38px}.hero-logo-display{right:-42px;width:186px;height:186px}.hero-logo-core>img{width:152px}.scene-cloud span,.scene-cloud span:nth-child(n){width:76px;font-size:9px}.scene-cloud span:nth-child(3){left:10px}.scene-cloud span:nth-child(6){right:0}}
/* Smaller mobile hero title, separated from the clock. */
@media (max-width:760px){.hero h1{max-width:62%;font-size:clamp(34px,8.8vw,38px)}.hero-logo-display{right:-58px}}
@media (max-width:380px){.hero h1{max-width:62%;font-size:34px}.hero-logo-display{right:-56px}}
/* Match the desktop product-card ratio on narrow screens. */
@media (max-width:760px){
.hero-logo-display{right:-36px}
.flow-visual{height:200px}.flow-visual .product-panel,.flow-visual .product-panel.is-active,.flow-stage.is-switching .product-panel.is-active,.flow-stage.is-switching .project-card{width:250%;height:250%}
.flow-visual .product-panel{transform:translate3d(0,4px,0) scale(.4)!important}.flow-visual .product-panel.is-active{transform:translate3d(0,0,0) scale(.4)!important}.flow-controls{margin-top:8px}
}
@media (max-width:380px){.hero-logo-display{right:-36px}.flow-visual{height:190px}.flow-visual .product-panel{transform:translate3d(0,4px,0) scale(.38)!important}.flow-visual .product-panel.is-active{transform:translate3d(0,0,0) scale(.38)!important}}
/* Fill the complete product canvas on the narrowest phones. */
@media (max-width:380px){.flow-visual .product-panel,.flow-visual .product-panel.is-active,.flow-stage.is-switching .product-panel.is-active,.flow-stage.is-switching .project-card{width:263.2%;height:263.2%}}
/* Bring mobile hero art inward and rebalance dense two-column sections. */
@media (max-width:760px){
.hero h1{max-width:54%}.hero-logo-display{right:0;width:190px;height:190px}.hero-logo-display::before{width:202px}.hero-logo-display::after{width:176px}.hero-logo-core>img{width:156px}
.capability-orbit{gap:8px}.capability,.capability-wide,.capability-tall{padding:12px}.capability-wide{min-height:116px}.capability-orbit>.capability:nth-of-type(2),.capability-orbit>.capability:nth-of-type(4){min-height:136px}.capability h3{font-size:14px}.capability p{font-size:10px}.capability-glyph{margin-bottom:8px;font-size:28px}
.capability-tall{display:grid;grid-template-columns:74px 92px minmax(0,1fr);grid-row:3;gap:12px;min-height:118px;align-items:center}.capability-tall .mini-clock{width:74px;margin:0}.capability-tall h3{margin:0}.capability-tall p{margin:0}
.scenes-shell{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:14px}.scenes-copy h2{font-size:23px}.scenes-copy p{font-size:11.5px}.scene-cloud span,.scene-cloud span:nth-child(n){width:72px}.scene-cloud span:nth-child(3){left:8px}.scene-cloud span:nth-child(6){right:0}
}
@media (max-width:380px){.hero h1{max-width:54%}.hero-logo-display{right:0;width:174px;height:174px}.hero-logo-core>img{width:146px}.capability-tall{grid-template-columns:66px 76px minmax(0,1fr);gap:9px}.capability-tall .mini-clock{width:66px}.scenes-shell{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:10px}.scene-cloud span,.scene-cloud span:nth-child(n){width:66px}.scene-cloud span:nth-child(3){left:4px}}
/* Mobile target position for the clock and readable download rows. */
@media (max-width:760px){
.hero-logo-display{top:64px;right:-16px}
.download-option{grid-template-columns:60px minmax(0,1fr) 16px;gap:6px;padding:10px 0}.platform-name{font-size:12px;white-space:nowrap}.platform-detail strong{font-size:10px;white-space:normal}.platform-detail small{font-size:8px}
}
@media (max-width:380px){.hero-logo-display{top:58px;right:-14px}.download-option{grid-template-columns:52px minmax(0,1fr) 14px;gap:4px}}
/* Stronger mobile menu contrast over the hero artwork. */
@media (max-width:760px){
.site-nav{background:rgba(229,235,244,.98);border-color:rgba(80,92,116,.18);box-shadow:0 28px 70px rgba(42,52,74,.28),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%)}
.site-nav a{color:#171a23;border-bottom-color:rgba(56,64,82,.14);text-shadow:0 1px 0 rgba(255,255,255,.5)}.site-nav a:hover,.site-nav a:focus-visible{background:rgba(255,255,255,.5)}
}

/* Keep the signature wave on phones without forcing four large SVG layers to repaint. */
@media (max-width: 760px) {
  .hero-logo-core > .hero-wave-field {
    width: min(520px, 150vw);
    height: auto;
    overflow: hidden;
    contain: layout paint;
  }

  .hero-wave-ribbon:nth-of-type(n + 3) {
    display: none !important;
  }

  .hero-wave-air {
    stroke-width: 280;
    opacity: .32;
  }

  .hero-wave-body {
    stroke-width: 132;
    opacity: .86;
  }

  .hero-wave-layer {
    will-change: transform, opacity;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .hero-wave-layer {
    animation: hero-wave-mobile 24s linear infinite;
  }

  .hero-wave-ribbon-1 .hero-wave-layer { animation-delay: 0s; }
  .hero-wave-ribbon-2 .hero-wave-layer { animation-delay: -12s; }
}

@keyframes hero-wave-mobile {
  0% {
    opacity: 0;
    transform: scale(.98);
  }
  20% {
    opacity: var(--wave-peak);
    transform: scale(1.28);
  }
  58% {
    opacity: var(--wave-mid);
    transform: scale(1.82);
  }
  100% {
    opacity: 0;
    transform: scale(2.42);
  }
}