/* Hos — quiet technology, precise typography, continuous reading. */

@font-face {
  font-family: "Hos Sans SC";
  src: url("fonts/hos-sans-sc.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("fonts/sora-latin.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jbmono-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #050507;
  --bg-soft: rgba(12, 12, 14, .56);
  --panel: rgba(18, 18, 20, .4);
  --text: #f2f2f2;
  --text-2: #b8b8bc;
  --muted: #9c9ca2;
  --faint: #888890;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .22);
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Segoe UI Variable Text", "Hos Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "DengXian", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --container: 960px;
  --gutter: clamp(24px, 4.5vw, 64px);
  --header-h: 64px;
  --ambient-strength: 1;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(220,228,240,.22) transparent;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(220,228,240,.22); }
::-webkit-scrollbar-thumb:hover { background: rgba(220,228,240,.38); }
::-webkit-scrollbar-button { display: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 450;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open { overflow: hidden; }
::selection { background: #dedee4; color: var(--bg); }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: 0; background: none; color: inherit; font: inherit; }
img, svg { display: block; }
img { max-width: 100%; }
p, h1, h2, h3, h4, blockquote { margin-top: 0; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid #d4d4de; outline-offset: 5px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 120;
  padding: 10px 16px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.mono {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.container {
  position: relative;
  z-index: 1;
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
.reveal-ready .reveal-group .container { opacity: 1; transform: none; transition: opacity .95s var(--ease), transform 1.05s var(--ease); }
.reveal-ready .reveal-group:not(.is-in) .container { opacity: .82; transform: translateY(16px) scale(.992); }
.reveal-ready .reveal-group.is-in .container { opacity: 1; transform: none; }

/* One restrained navigation bar; all interaction hooks remain unchanged. */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 1px;
  z-index: 110;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #d1d1d8;
  transform: scaleX(0);
  transform-origin: left center;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 5, 7, .88);
  transition: background .3s ease;
}
.site-header.is-scrolled { background: rgba(5, 5, 7, .94); }
.header-inner {
  width: calc(100% - 64px);
  height: var(--header-h);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; }
.brand-mark { flex: none; }
.brand-type { display: flex; flex-direction: column; gap: 5px; }
/* The three-letter mark needs a little more presence in the header. */
.brand-name { font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.brand-sub { font-family: var(--font-mono); font-size: 7px; line-height: 1; letter-spacing: .16em; color: var(--muted); }
.site-header .brand-name { font-family: var(--font-mono); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .22em; }
.main-nav { display: flex; align-items: center; justify-self: end; gap: clamp(22px, 2.6vw, 38px); }
.main-nav a { position: relative; padding: 20px 0; font-size: 13px; color: var(--muted); transition: color .2s ease; }
.main-nav a::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--text); transform: scaleX(0); transition: transform .25s var(--ease); }
.main-nav a:hover, .main-nav a.is-active { color: var(--text); }
.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); }
.header-contact {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #d4d4db;
  transition: background .2s ease;
}
.header-contact:hover { background: rgba(255, 255, 255, .06); }
.status-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #c8c8d0; }
.menu-toggle {
  display: none;
  justify-self: end;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.menu-toggle span { display: block; width: 17px; height: 1px; background: #d7d7df; }
.menu-toggle:hover { background: rgba(255, 255, 255, .05); }
.no-script-nav { display: none; }

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px var(--gutter) max(28px, env(safe-area-inset-bottom));
  background: rgba(5, 5, 7, .98);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.menu-panel.is-open { opacity: 1; visibility: visible; }
.menu-panel:focus { outline: none; }
.menu-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.menu-close { min-height: 44px; min-width: 44px; padding: 8px 0 8px 12px; font-size: 12px; color: var(--text); }
.menu-nav { display: flex; flex-direction: column; margin-top: 8px; }
.menu-nav a { display: flex; align-items: baseline; gap: 16px; padding: clamp(14px, 3vh, 24px) 0; border-bottom: 1px solid var(--line); font-size: clamp(24px, 4vw, 36px); line-height: 1.2; font-weight: 500; }
.menu-nav a:hover { color: #fff; }
.menu-nav a span { width: 24px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.menu-nav a em { margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-style: normal; letter-spacing: .14em; color: var(--muted); }
.menu-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 28px; font-size: 12px; color: var(--muted); }
.menu-panel-foot strong { font-family: var(--font-mono); font-size: 16px; font-weight: 400; color: var(--text); }

.side-rail { position: fixed; z-index: 40; top: 50%; left: 24px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.side-rail::before { content: ""; position: absolute; top: 28px; bottom: 9px; left: 1.5px; width: 1px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.035)); }
.rail-title { margin-bottom: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; color: var(--faint); }
.side-rail a { display: inline-flex; align-items: center; gap: 10px; min-height: 20px; padding-right: 10px; font-size: 10px; color: var(--muted); }
.side-rail i { flex: none; display: block; width: 4px; height: 4px; border: 1px solid #777782; border-radius: 50%; }
.side-rail a span { max-width: 0; overflow: hidden; opacity: 0; text-shadow: 0 1px 6px #050506, 0 0 14px #050506; white-space: nowrap; transition: opacity .2s ease, max-width .24s var(--ease); }
.side-rail a:hover span, .side-rail a:focus-visible span { max-width: 120px; opacity: 1; }
@media (min-width: 1520px) {
  .side-rail a span { max-width: 120px; opacity: .55; }
  .side-rail a:hover span, .side-rail a.is-active span, .side-rail a:focus-visible span { opacity: 1; }
}
.side-rail a.is-active { color: var(--text); }
.side-rail a.is-active i { background: var(--text); border-color: var(--text); }

/* Solid silver actions, never metallic gradients or oversized glow. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.btn svg { flex: none; }
.btn-primary { background: #ededf0; border-color: #ededf0; color: #101014; }
.btn-primary:hover { background: #fff; border-color: #fff; }
.btn-ghost { border-color: var(--line-strong); background: rgba(5, 5, 7, .45); color: #d2d2da; }
.btn-ghost:hover { background: rgba(255, 255, 255, .055); border-color: #757580; color: #fff; }
.text-link { display: inline-flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; min-height: 36px; margin-top: 20px; padding-bottom: 4px; border-bottom: 1px solid #686873; font-size: 14px; color: #e0e0e7; transition: color .2s ease, border-color .2s ease; }
.text-link:hover { border-color: #fff; color: #fff; }

/* Full-page geometric field: a drifting dot lattice beneath a sparse starfield. */
body { position: relative; background: #050506; }
main, .site-footer { position: relative; z-index: 1; }
.ambient-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 94% 72% at 50% 42%, #0c0c10, #050506 72%); }
.ambient-background::before { display: none; }
.ambient-board { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: calc(.92 * var(--ambient-strength)); transition: opacity 1s ease; }
.dunos-flow { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ambient-particles { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ambient-vignette { position: absolute; z-index: 2; inset: 0; background: radial-gradient(ellipse 45% 48% at 50% 44%, rgba(5,5,6,.7), transparent 88%), radial-gradient(ellipse 130% 100%, transparent 42%, rgba(5,5,6,.7)); }
.ambient-glow { position: absolute; z-index: 3; top: 0; left: 0; display: block; width: 520px; height: 520px; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255,255,255,.12) 0, rgba(255,255,255,.055) 110px, transparent 240px), radial-gradient(circle, rgba(255,255,255,.045), transparent 66%); transform: translate3d(-260px, -260px, 0); will-change: transform, opacity; }
@media (max-width: 700px), (hover: none), (pointer: coarse) { .ambient-glow { display: none; } }
.ambient-fallback .ambient-board { display: none; }
.grain { display: none; }

/* Decorative layers that are safe to ship: a quiet ticker and oversized ghosts. */
.marquee { display: block; overflow: hidden; border-block: 1px solid var(--line); background: rgba(7, 7, 9, .5); }
.marquee-track { display: flex; width: max-content; animation: marquee-slide 38s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 18px; padding: 13px 22px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; color: #6f6f7a; white-space: nowrap; }
.marquee-track i { font-style: normal; color: #3d3d46; }
@keyframes marquee-slide { to { transform: translateX(-50%); } }
html.motion-paused .marquee-track, html.motion-suspended .marquee-track, .is-offscreen .marquee-track { animation-play-state: paused; }

.section-ghost { display: block; position: absolute; z-index: 0; pointer-events: none; user-select: none; font-family: var(--font-sans); font-weight: 600; line-height: .8; letter-spacing: -.06em; color: rgba(255, 255, 255, .03); }
.section-ghost { top: clamp(32px, 5vw, 84px); right: clamp(16px, 3vw, 48px); font-size: clamp(180px, 21vw, 300px); }

/* Hero: a centered brand statement with technical edge readouts and a slow light. */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: hidden; padding-top: var(--header-h); }
.hero::before { content: ""; position: absolute; z-index: 0; inset: -18% -12%; pointer-events: none; background: radial-gradient(ellipse 24% 54% at 16% 34%, rgba(204,219,240,.11), transparent 64%), radial-gradient(ellipse 20% 44% at 84% 66%, rgba(150,170,204,.07), transparent 72%), conic-gradient(from 196deg at 24% 30%, transparent 0deg, rgba(255,255,255,.06) 16deg, transparent 42deg); filter: blur(46px); opacity: .9; transform: rotate(-7deg) scale(1.06); animation: hero-light 30s ease-in-out infinite alternate; }
@keyframes hero-light { from { opacity: .72; transform: rotate(-7deg) scale(1.04) translate3d(-1%, 0, 0); } to { opacity: 1; transform: rotate(-4deg) scale(1.08) translate3d(2%, -1%, 0); } }
.hero::after { content: ""; position: absolute; z-index: 0; inset: -64px; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 68% 62% at 50% 48%, #000 4%, transparent 82%); mask-image: radial-gradient(ellipse 68% 62% at 50% 48%, #000 4%, transparent 82%); opacity: .7; }
.motion-enabled .hero::after { animation: hero-grid-drift 28s linear infinite; }
.hero-hud { position: absolute; z-index: 2; top: calc(var(--header-h) + 28px); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 20px; color: #656570; pointer-events: none; }
.hero-hud .mono { font-size: 8px; letter-spacing: .13em; }
.hero-inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(980px, calc(100% - var(--gutter) * 2)); margin-inline: auto; padding: 94px 0 82px; text-align: center; }
.hero-eyebrow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 9px; line-height: 1.6; letter-spacing: .18em; color: #8e8e99; }
.hero-eyebrow span { color: #52525c; }
.hero-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 34px auto 0; }
.hero-brand-wordmark { display: block; width: clamp(188px, 24vw, 296px); height: auto; filter: drop-shadow(0 18px 50px rgba(0,0,0,.5)); }
.hero-brand-sub { font-size: 8px; line-height: 1.5; letter-spacing: .32em; color: #777781; }
.hero-title { margin: 24px 0 0; font-family: var(--font-sans); font-size: clamp(26px, calc(21px + 1vw), 34px); font-weight: 500; line-height: 1.4; letter-spacing: .01em; color: #dedee6; text-wrap: balance; }
.hero-lede { max-width: 700px; margin: 18px 0 0; font-size: 15px; line-height: 1.8; color: #9b9ba5; text-wrap: pretty; }
.hero-lede-keep, .hero-lede-hold { white-space: nowrap; }
.hero-lede-break { display: block; }
.hero-index { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 24px 0 0; font-size: 8px; line-height: 1.8; letter-spacing: .12em; color: #62626c; }
.hero-index span { color: #c3c3cc; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.hero-actions .btn { min-height: 42px; }
.hero-actions .btn-primary { border-color: rgba(255,255,255,.34); border-radius: 10px; background: rgba(255,255,255,.06); color: #f3f3f6; }
.hero-actions .btn-primary:hover { background: rgba(255,255,255,.12); }
.hero-actions .btn-ghost { border-color: rgba(255,255,255,.12); border-radius: 10px; background: rgba(10,10,12,.35); color: #b9b9c3; }
.hero-actions .btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.hero-specs { margin: 18px 0 0; font-size: 8px; line-height: 1.7; letter-spacing: .14em; color: #656570; }

@keyframes hero-grid-drift { to { transform: translate3d(64px, 64px, 0); } }

@media (min-width: 981px) and (max-height: 820px) {
  .hero-inner { padding: 66px 0 54px; }
  .hero-hud { top: calc(var(--header-h) + 18px); }
  .hero-brand { margin-top: 22px; }
  .hero-title { margin-top: 20px; }
  .hero-lede { margin-top: 14px; }
  .hero-index { margin-top: 18px; }
  .hero-actions { margin-top: 20px; }
  .hero-specs { margin-top: 12px; }
}
.hero-foot { position: relative; z-index: 2; width: 100%; border-top: 1px solid rgba(255,255,255,.08); background: rgba(5,5,6,.2); }
.motion-toggle { position: absolute; z-index: 3; right: var(--gutter); bottom: 84px; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 2px; background: rgba(5,5,7,.58); color: #9898a1; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { border-color: rgba(255,255,255,.32); color: #f2f2f4; }
.motion-indicator { width: 4px; height: 4px; border-radius: 50%; background: #d8d8df; box-shadow: 0 0 8px rgba(255,255,255,.6); animation: signal-breathe 2.4s ease-in-out infinite; }
.motion-toggle[aria-pressed="true"] .motion-indicator { box-shadow: none; background: #6b6b73; }
@keyframes signal-breathe { 50% { opacity: .3; } }
@keyframes edge-travel { from { transform: translateX(-110%); } to { transform: translateX(440%); } }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after,
html.motion-suspended *, html.motion-suspended *::before, html.motion-suspended *::after,
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after, .is-offscreen::before, .is-offscreen::after { animation-play-state: paused !important; }

.hero-foot-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; width: min(1360px, calc(100% - var(--gutter) * 2)); min-height: 64px; margin-inline: auto; }
.hero-foot p { margin: 0; color: var(--faint); font-size: 9px; }
.hero-foot p span { padding: 0 6px; color: #5d5d68; }
.hero-foot-right { text-align: right; }
.scroll-cue { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: #b2b2bd; }
.scroll-cue .mono { font-size: 9px; }
.scroll-cue i { position: relative; display: block; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.scroll-cue:hover { color: #fff; }

/* Continuous sections: strong type, generous whitespace, thin structural lines. */
.section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(88px, 9vw, 144px) 0; border-bottom: 1px solid rgba(255, 255, 255, .09); background: transparent; }
.section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,5,7,.08), rgba(5,5,7,.24)); }
.section::after { content: ""; position: absolute; top: 0; left: 0; width: 22%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: edge-travel 16s linear infinite; }
section[id] { scroll-margin-top: calc(var(--header-h) + 20px); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); align-items: end; gap: clamp(40px, 8vw, 112px); margin-bottom: 64px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font-family: var(--font-mono); font-size: 10px; font-weight: 400; line-height: 1.7; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.eyebrow-index { color: #dedee5; }
.eyebrow-line { display: block; flex: none; width: 24px; height: 1px; background: #52525e; }
.section-title { margin: 0; font-size: clamp(38px, 4.5vw, 62px); font-weight: 600; line-height: 1.18; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.cn-serif { font-family: inherit; font-weight: inherit; color: #b6b6c0; }
.nowrap { white-space: nowrap; }
.lede { max-width: 580px; font-size: 16px; line-height: 1.72; color: var(--text-2); }
.section-head-copy .lede { margin: 0; }
.signature { display: flex; align-items: center; gap: 10px; margin: 24px 0 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; color: var(--muted); }
.signature span { color: #54545f; }
.fine-print { margin: 20px 0 0; font-size: 12px; line-height: 1.8; color: var(--muted); }
.origin { }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.principle { padding: 30px 32px 8px; border-left: 1px solid var(--line); }
.principle:first-child { padding-left: 0; border-left: 0; }
.principle:last-child { padding-right: 0; }
.principle-index { display: block; margin-bottom: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.principle h3 { margin: 0 0 12px; font-size: 20px; font-weight: 600; }
.principle p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--text-2); }
.compare-block { margin-top: 80px; }
.compare-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.compare-heading .eyebrow { margin-bottom: 20px; }
.compare-scroll { overflow-x: auto; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: #454550 transparent; }
.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.compare-table th, .compare-table td { padding: 20px; text-align: left; vertical-align: top; line-height: 1.85; }
.compare-table thead th { padding-block: 16px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--muted); }
.compare-table thead th:first-child { width: 120px; }
.compare-table tbody th { font-weight: 400; color: var(--text-2); }
.compare-table tbody td { color: var(--muted); }
.compare-table tbody tr { border-bottom: 1px solid var(--line); }
.compare-table tbody tr:last-child { border-bottom: 0; }
.compare-table .brand-col { color: #e4e4eb; background: rgba(255,255,255,.035); border-left: 1px solid var(--line); }
.compare-table thead .brand-col { color: #f2f2f6; }

/* Service scope uses one editorial grid rather than six floating cards. */
.service { }
.service-grid { display: block; }
.service-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); column-gap: clamp(40px, 8vw, 112px); margin-bottom: 64px; align-items: start; }
.service-aside > .eyebrow { grid-column: 1 / -1; }
.service-aside > .section-title { grid-column: 1; grid-row: 2 / 4; }
.service-aside > .lede { grid-column: 2; margin: 0; }
.readout { grid-column: 2; margin-top: 24px; border-top: 1px solid var(--line); }
.readout > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.readout span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.readout strong { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; color: #d4d4de; text-align: right; }
.aside-quote { grid-column: 1 / -1; max-width: 720px; margin: 32px 0 0; padding-left: 20px; border-left: 1px solid var(--line-strong); font-size: 15px; line-height: 1.75; color: var(--muted); }
.service-focus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); margin-bottom: 18px; border: 1px solid rgba(255,255,255,.13); background: linear-gradient(110deg, rgba(255,255,255,.035), rgba(255,255,255,.008) 60%); }
.service-focus-main { display: flex; flex-direction: column; justify-content: center; padding: 20px 22px; border-right: 1px solid var(--line); }
.service-focus-main .mono { font-size: 8px; line-height: 1.5; letter-spacing: .14em; color: #767680; }
.service-focus-main strong { margin-top: 10px; font-size: clamp(18px, 2vw, 24px); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; color: #dedee4; }
.service-focus > p { align-self: center; margin: 0; padding: 20px 22px; font-size: 12px; line-height: 1.8; color: #8b8b95; }
@media (max-width: 980px) {
  .service-focus { grid-template-columns: 1fr; }
  .service-focus-main { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .service-focus-main, .service-focus > p { padding: 16px 18px; }
  .service-focus-main strong { font-size: 17px; }
}
.service-list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line); }
.service-row { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 248px; padding: 25px 24px 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(5,5,7,.24); transition: background .35s ease; }
.service-row:nth-child(2), .service-row:nth-child(4), .service-row:nth-child(6) { background: rgba(255,255,255,.026); }
.service-row::before { content: ""; position: absolute; top: 13px; right: 13px; width: 6px; height: 6px; border-top: 1px solid rgba(255,255,255,.35); border-right: 1px solid rgba(255,255,255,.35); opacity: .36; transition: opacity .25s ease; }
.service-row::after { content: attr(data-step); position: absolute; right: 20px; bottom: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.16); }
.service-row:hover { background: rgba(255,255,255,.075); }
.service-row:hover::before { opacity: 1; }
.service-copy { display: flex; flex-direction: column; flex: 1; }
.service-num { display: block; margin-bottom: 30px; font-family: var(--font-mono); font-size: 10px; font-weight: 400; line-height: 1.4; letter-spacing: .1em; color: #909099; }
.service-row-head { display: flex; flex-direction: column-reverse; gap: 6px; margin: 0 0 14px; }
.service-row-head h3 { margin: 0; font-size: 23px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: #ededf0; }
.service-row-head span { font-family: var(--font-mono); font-size: 8px; letter-spacing: .13em; color: #7a7a83; }
.service-row p { margin: 0; font-size: 14px; line-height: 1.72; color: #a0a0a9; }
.service-row .tags { margin-top: 18px; }
.tags { display: flex; gap: 8px; margin-top: 20px; }
.tags span { min-width: 32px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 2px; font-family: var(--font-mono); font-size: 10px; line-height: 1.6; color: var(--muted); text-align: center; }
.process { margin-top: 72px; padding-top: 30px; border-top: 1px solid var(--line-strong); }
.process-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.process-head .eyebrow { margin: 0; }
.process-head h3 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.process-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.step { position: relative; padding-top: 18px; border-top: 1px solid var(--line); }
.step > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.step h4 { margin: 12px 0 8px; font-size: 15px; font-weight: 600; }
.step p { margin: 0; font-size: 14px; line-height: 1.72; color: var(--text-2); }

/* Software: the long-term layer that keeps a one-time tune alive. */
.software-head { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: end; gap: clamp(36px, 7vw, 86px); margin-bottom: 56px; }
.software-heading .section-title { max-width: 720px; }
.software-intro .lede { margin: 0; }
@media (min-width: 981px) {
  .software-heading .section-title { font-size: clamp(36px, 4vw, 44px); }
}
@media (min-width: 981px) and (max-width: 1279px) {
  .software-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); column-gap: 48px; }
  .software-heading .section-title { font-size: clamp(38px, 4.2vw, 44px); }
}
.software-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 18px; align-items: stretch; }
.software-product { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; min-width: 0; padding: 30px; border: 1px solid rgba(255,255,255,.13); background: rgba(9,9,11,.57); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); overflow: hidden; }
.software-product::before { content: ""; position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-top: 1px solid rgba(255,255,255,.36); border-right: 1px solid rgba(255,255,255,.36); }
.software-kicker { margin: 0 0 18px; font-family: var(--font-mono); font-size: 9px; line-height: 1.6; letter-spacing: .14em; color: #8f8f98; }
.software-kicker span { color: #4d4d55; }
.software-product h3 { max-width: 410px; margin: 0 0 16px; font-size: clamp(27px, 3vw, 38px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; color: #f0f0f3; }
.software-product .software-copy > p:not(.software-kicker) { margin: 0; font-size: 14px; line-height: 1.72; color: #a1a1a9; }
.software-points { display: grid; gap: 0; margin: 24px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.1); }
.software-points li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.software-points strong { font-size: 13px; font-weight: 600; color: #dedee4; }
.software-points span { font-size: 13px; line-height: 1.7; color: #93939c; }
.software-toolbox { background: linear-gradient(180deg, rgba(17,17,19,.68), rgba(8,8,10,.6)); }
.software-visual { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.software-shot { position: relative; display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.17); background: #0a0b0e; box-shadow: 0 22px 44px rgba(0,0,0,.32); }
.software-shot img { display: block; width: 100%; height: auto; transition: transform .5s var(--ease); }
.software-shot:hover img { transform: scale(1.018); }
.shot-meta { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 28px 12px 9px; background: linear-gradient(transparent, rgba(0,0,0,.8)); font-family: var(--font-mono); font-size: 8px; line-height: 1.5; letter-spacing: .08em; color: #dedee4; }
.shot-meta b { font-weight: 400; white-space: nowrap; }
.software-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.software-thumbs-single { grid-template-columns: 1fr; }
.software-thumbs a { display: block; aspect-ratio: 1501 / 938; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #0a0b0e; }
.software-toolbox .software-thumbs a { aspect-ratio: 1200 / 850; }
.software-thumbs img { width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: .82; transition: opacity .25s ease, transform .4s var(--ease); }
.software-thumbs a:hover img { opacity: 1; transform: scale(1.025); }
.software-caption { margin: 2px 0 0; font-size: 10px; line-height: 1.7; color: #83838c; }
.software-longterm { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; column-gap: clamp(32px, 7vw, 84px); row-gap: 24px; margin-top: 64px; padding-top: 30px; border-top: 1px solid var(--line-strong); }
.longterm-lead { margin: 0; font-size: clamp(24px, 2.7vw, 34px); font-weight: 500; line-height: 1.4; letter-spacing: -.02em; color: #dedee4; }
.longterm-lead span { color: #85858e; }
.longterm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.longterm-steps li { min-width: 0; padding: 0 18px; border-left: 1px solid var(--line); }
.longterm-steps li:first-child { padding-left: 0; border-left: 0; }
.longterm-steps li:last-child { padding-right: 0; }
.longterm-steps span { display: block; margin-bottom: 18px; font-family: var(--font-mono); font-size: 8px; line-height: 1.5; letter-spacing: .1em; color: #7f7f88; }
.longterm-steps strong { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: #e8e8ed; }
.longterm-steps p { margin: 0; font-size: 13px; line-height: 1.7; color: #96969f; }
.software-longterm > .text-link { grid-column: 1; margin-top: 0; }

.service-scope { margin: 60px 0 46px; padding-top: 28px; border-top: 1px solid var(--line); }
.service-scope-head { max-width: 560px; margin-bottom: 24px; }
.service-scope-head .mono { color: var(--muted); }
.service-scope-head h3 { margin: 14px 0 0; font-size: clamp(23px, 2.8vw, 32px); font-weight: 500; line-height: 1.4; }
.service-scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.service-scope-grid article { position: relative; min-width: 0; padding: 24px; background: rgba(7,8,10,.5); transition: background .3s ease, transform .45s var(--ease), opacity .6s var(--ease); }
.service-scope-grid article:hover { z-index: 1; background: rgba(18,20,25,.88); transform: translateY(-3px); }
.service-scope-grid article > .mono { font-size: 8px; color: var(--faint); animation: service-number-breathe 4.5s ease-in-out infinite; }
.service-scope-grid h4 { margin: 14px 0 8px; font-size: 16px; font-weight: 600; }
.service-scope-grid p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--muted); }
.service-card-foot { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-family: var(--font-mono); font-size: 8px; line-height: 1; }
.service-card-foot em { font-style: normal; color: var(--faint); }
.service-card-foot > i { position: relative; flex: 1; height: 1px; overflow: hidden; background: rgba(255,255,255,.1); }
.service-card-foot > i::after { content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 1px; background: linear-gradient(90deg, transparent, #c7d3e5, transparent); animation: service-scan 3.2s linear infinite; }
.service-card-foot b { font-weight: 400; color: #aebdce; animation: service-ready 3.6s ease-in-out infinite; }
.service-scope-grid article:nth-child(2n) .service-card-foot > i::after { animation-delay: -1.5s; }
@keyframes service-scan { from { transform: translateX(-110%); } to { transform: translateX(440%); } }
@keyframes service-ready { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
.service-meter { position: absolute; top: 22px; right: 22px; display: flex; align-items: flex-end; gap: 3px; height: 15px; color: #bbc7d8; }
.service-meter i { display: block; width: 2px; height: 6px; background: currentColor; opacity: .42; transform-origin: center bottom; animation: service-eq 2.2s ease-in-out infinite; }
.service-meter i:nth-child(2) { height: 11px; animation-delay: -.35s; }
.service-meter i:nth-child(3) { height: 15px; animation-delay: -.7s; }
.service-meter i:nth-child(4) { height: 9px; animation-delay: -1.05s; }
.service-meter i:nth-child(5) { height: 5px; animation-delay: -1.4s; }
.service-scope-grid article:nth-child(2n) .service-meter i { animation-delay: -1.1s; }
.service-scope-grid article:hover .service-meter i { opacity: .85; animation-duration: .85s; }
.service-scope-grid article:nth-child(1) { --service-order: 0; }
.service-scope-grid article:nth-child(2) { --service-order: 1; }
.service-scope-grid article:nth-child(3) { --service-order: 2; }
.service-scope-grid article:nth-child(4) { --service-order: 3; }
.service-scope-grid article:nth-child(5) { --service-order: 4; }
.service-scope-grid article:nth-child(6) { --service-order: 5; }
.reveal-ready .service-scope:not(.is-in) article { opacity: 0; transform: translateY(14px); }
.reveal-ready .service-scope.is-in article { transition-delay: calc(var(--service-order) * 75ms); }
@keyframes service-eq { 0%, 100% { transform: scaleY(.35); opacity: .28; } 50% { transform: scaleY(1); opacity: .72; } }
@keyframes service-number-breathe { 0%, 100% { color: var(--faint); } 50% { color: #d5deeb; } }
@media (max-width: 760px) { .service-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .service-scope-grid { grid-template-columns: 1fr; } }

.parameter-console { margin-bottom: 46px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(7,8,10,.46)); transition: border-color .5s ease, box-shadow .5s ease; }
.parameter-console-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; }
.parameter-console-head .mono { font-size: 9px; color: #c5cbd5; }
.parameter-console-head p { margin: 7px 0 0; font-family: var(--font-mono); font-size: 9px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.parameter-sequence { flex: none; color: var(--faint); }
.parameter-console.is-calibrated { border-color: rgba(215,226,241,.25); box-shadow: 0 14px 46px rgba(0,0,0,.2); }
.parameter-console.is-calibrated .parameter-sequence { color: #d8e0eb; }
.parameter-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.parameter-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 62px 16px 60px; align-items: center; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--line); transition: background .25s ease, transform .35s var(--ease); }
.parameter-row:nth-child(even) { border-left: 1px solid var(--line); }
.parameter-row:nth-child(5) { grid-column: 1 / -1; border-left: 0; }
.parameter-row::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 0; width: 1px; background: #34343c; transition: background .3s ease, box-shadow .3s ease; }
.parameter-row.is-ready::before { background: #c5d3e7; box-shadow: 0 0 9px rgba(197,211,231,.35); }
.parameter-row:hover, .parameter-row:focus-visible { background: rgba(255,255,255,.03); transform: translateX(3px); }
.parameter-name span { display: block; font-family: var(--font-mono); font-size: 8px; line-height: 1.5; letter-spacing: .06em; color: var(--muted); }
.parameter-name strong { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; color: #d9dce3; }
.parameter-before, .parameter-value, .parameter-arrow { font-family: var(--font-mono); font-size: 9px; font-weight: 400; }
.parameter-before { color: var(--faint); }
.parameter-arrow { color: #62626d; transition: color .3s ease, transform .3s var(--ease); }
.parameter-row.is-ready .parameter-arrow { color: #bcc9dc; transform: translateX(2px); }
.parameter-value { color: #92929c; transition: color .3s ease, text-shadow .3s ease; }
.parameter-row.is-ready .parameter-value { color: #edf2f9; text-shadow: 0 0 12px rgba(208,222,242,.24); }
@media (max-width: 760px) {
  .parameter-rows { grid-template-columns: 1fr; }
  .parameter-row:nth-child(5), .parameter-row:nth-child(even) { grid-column: auto; border-left: 0; }
}
.parameter-note { margin: 0; padding: 14px 22px 18px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.7; color: var(--muted); }
.reveal-ready .parameter-console .parameter-row { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease), background .25s ease; transition-delay: calc(.12s + var(--parameter-order) * 85ms); }
.reveal-ready .parameter-console:not(.is-in) .parameter-row { opacity: 0; transform: translateY(8px); }
@media (max-width: 520px) {
  .parameter-console-head { align-items: flex-start; flex-direction: column; gap: 10px; padding: 18px; }
  .parameter-row { grid-template-columns: minmax(0, 1fr) 44px 10px 54px; gap: 6px; padding: 13px 14px; }
  .parameter-before, .parameter-value, .parameter-arrow { font-size: 7px; }
  .parameter-name strong { font-size: 12px; }
  .parameter-note { padding-inline: 16px; }
}

/* Pricing is a single three-column comparison, not a stack of shiny cards. */
.tiers { background: rgba(5,5,6,.3); }
.tier-hint { margin: 22px 0 0; font-size: 12px; line-height: 1.8; color: var(--muted); }
.tiers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.tier { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 32px 28px; border-left: 1px solid var(--line); transition: background .35s ease; }
.tier::before { content: ""; position: absolute; inset: -1px 0 auto; height: 1px; background: linear-gradient(90deg, transparent, #dedee4, transparent); opacity: 0; transition: opacity .3s ease; }
.tier:hover { background: rgba(255, 255, 255, .035); }
.tier:hover::before, .tier-featured::before { opacity: 1; }
.tier:first-child { padding-left: 0; border-left: 0; }
.tier:last-child { padding-right: 0; }
.tier-featured { background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .075), transparent 70%); }
.tier-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 30px; }
.tier-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; color: #d1d1db; }
.tier-id { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.tier-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 22px; line-height: 1; }
.currency { font-family: var(--font-sans); font-size: 23px; color: var(--text-2); }
.amount { font-size: clamp(54px, 5.2vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -.065em; font-variant-numeric: tabular-nums; color: var(--text); }
.unit { margin-left: 8px; font-size: 12px; color: var(--muted); }
.tier h3 { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.tier-tagline { margin: 0 0 26px; font-size: 15px; color: var(--text-2); }
.tier-rule { height: 1px; margin-bottom: 14px; background: var(--line); }
.tier-list { list-style: none; }
.tier-list li { position: relative; padding: 10px 0 10px 14px; font-size: 14px; line-height: 1.7; }
.tier-list li::before { content: ""; position: absolute; top: 19px; left: 0; width: 3px; height: 3px; background: #878793; }
.tier-list strong { display: block; font-size: 14px; font-weight: 600; color: #dcdce4; }
.tier-list span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.tier-list-long li { padding-block: 10px; }
.tier-bespoke { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.tier-trail { display: block; flex: none; width: 100%; height: 180px; min-height: 180px; margin-bottom: 20px; background: linear-gradient(90deg, transparent, rgba(215,222,235,.025) 50%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tier-bespoke p { margin: 0 0 16px; font-size: 23px; line-height: 1.6; letter-spacing: -.03em; }
.tier-bespoke p span { color: var(--muted); }
.tier-bespoke > .mono { color: var(--muted); }
.tier-foot { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; padding-top: 36px; }
.tier-foot p { margin: 0 0 10px; font-size: 12px; line-height: 1.8; color: var(--text-2); }
.tier-foot .tier-note { margin: 0; font-size: 11px; color: var(--muted); }
.tier-foot .text-link { margin-top: 20px; }
.tier-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; width: 100%; margin-top: 20px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 13px; color: var(--text); transition: background .2s ease; }
.tier-cta:hover { background: rgba(255,255,255,.06); }
.tier-ecosystem { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.ecosystem-head { max-width: 620px; margin-bottom: 28px; }
.ecosystem-head > .mono { color: var(--muted); }
.ecosystem-head h3 { margin: 16px 0 10px; font-size: clamp(24px, 3vw, 34px); font-weight: 500; line-height: 1.35; letter-spacing: -.025em; }
.ecosystem-head > p:last-child { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-2); }
.ecosystem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.ecosystem-card { display: grid; grid-template-rows: auto 240px; min-width: 0; overflow: hidden; background: rgba(9,9,11,.5); }
.ecosystem-copy { padding: 28px 28px 24px; }
.ecosystem-copy > .mono { font-size: 9px; color: var(--muted); }
.ecosystem-copy h4 { margin: 16px 0 10px; font-size: 20px; font-weight: 600; }
.ecosystem-copy p { min-height: 50px; margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-2); }
.ecosystem-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 12px; color: #d9d9e1; }
.ecosystem-link b { font-weight: 400; transition: transform .3s var(--ease); }
.ecosystem-card > img { width: 100%; height: 190px; object-fit: cover; object-position: center top; border-top: 1px solid var(--line); opacity: .7; filter: saturate(.55) contrast(1.04); transition: opacity .45s ease, transform .6s var(--ease), filter .45s ease; }
.ecosystem-card:hover > img { opacity: .92; filter: saturate(.75) contrast(1.04); transform: scale(1.015); }
.ecosystem-card:hover .ecosystem-link b { transform: translate(2px, -2px); }
.ecosystem-core-visual { position: relative; height: 240px; overflow: hidden; border-top: 1px solid var(--line); background: radial-gradient(ellipse at 50% 52%, rgba(182,198,219,.07), transparent 66%); }
.core-photo-stage { display: grid; place-items: center; perspective: 900px; }
.core-photo-3d { position: relative; width: 58%; margin-bottom: 24px; border: 1px solid rgba(211,222,237,.2); border-radius: 6px; background: #0b0d11; box-shadow: 0 2px 0 #181c23, 0 8px 0 #0c0f14, 0 24px 42px rgba(0,0,0,.65); transform: rotateX(9deg) rotateY(-13deg) translateY(-3px); transform-style: preserve-3d; animation: core-photo-float 8s ease-in-out infinite; transition: transform .65s var(--ease), box-shadow .65s var(--ease); }
.core-photo-3d::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 5px; background: linear-gradient(120deg, rgba(255,255,255,.1), transparent 36%, transparent 72%, rgba(170,190,216,.05)); }
.core-photo-3d img { display: block; width: 100%; height: auto; border-radius: 5px; opacity: .88; filter: saturate(.65) contrast(1.05); }
.ecosystem-card:hover .core-photo-3d { animation-play-state: paused; box-shadow: 0 2px 0 #181c23, 0 8px 0 #0c0f14, 0 34px 56px rgba(0,0,0,.72); transform: rotateX(4deg) rotateY(-6deg) translateY(-8px); }
@keyframes core-photo-float { 0%, 100% { transform: rotateX(9deg) rotateY(-13deg) translateY(-3px); } 50% { transform: rotateX(7deg) rotateY(-10deg) translateY(-8px); } }
.toolbox-photo-stage { display: grid; place-items: center; perspective: 900px; }
.toolbox-photo-3d { width: 56%; margin-bottom: 24px; overflow: hidden; border: 1px solid rgba(211,222,237,.22); border-radius: 6px; background: #0b0d11; box-shadow: 0 2px 0 #181c23, 0 7px 0 #0c0f14, 0 22px 38px rgba(0,0,0,.62); transform: rotateX(6deg) rotateY(10deg) translateY(-2px); transition: transform .65s var(--ease), box-shadow .65s var(--ease); animation: toolbox-photo-float 9s ease-in-out infinite; }
.toolbox-photo-3d img { display: block; width: 100%; height: auto; opacity: .76; filter: saturate(.55) contrast(1.02) brightness(.88); }
.ecosystem-card:hover .toolbox-photo-3d { box-shadow: 0 2px 0 #181c23, 0 7px 0 #0c0f14, 0 30px 48px rgba(0,0,0,.68); transform: rotateX(3deg) rotateY(4deg) translateY(-7px); }
@keyframes toolbox-photo-float { 0%, 100% { transform: rotateX(6deg) rotateY(10deg) translateY(-2px); } 50% { transform: rotateX(8deg) rotateY(7deg) translateY(-7px); } }
.core-visual-labels { position: absolute; right: 22px; bottom: 14px; left: 22px; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; font-family: var(--font-mono); font-size: 7px; letter-spacing: .14em; color: var(--muted); }
.tiers-footnote { margin: 24px 0 0; font-size: 12px; line-height: 1.85; color: var(--muted); }
.tiers-callout { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 36px; padding: 24px 0; border-top: 1px solid var(--line); }
.tiers-callout p { margin: 0; font-size: 14px; color: var(--text-2); }
.tiers-callout .text-link { flex: none; margin: 0; }

/* Aftercare: all terms stay expanded, visible, and readable. */
.aftercare { }
.aftercare-philosophy { position: relative; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; margin: -18px 0 52px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.aftercare-philosophy > .mono { font-size: 9px; color: var(--muted); }
.aftercare-philosophy p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--text-2); }
.aftercare-philosophy strong { display: block; margin-bottom: 4px; font-weight: 600; color: #e2e5eb; }
.aftercare-philosophy i { position: absolute; right: 0; bottom: -1px; width: 24%; height: 1px; background: linear-gradient(90deg, transparent, rgba(218,228,242,.65)); animation: aftercare-line 5s ease-in-out infinite; }
@keyframes aftercare-line { 0%, 100% { transform: translateX(-280%); opacity: 0; } 35%, 65% { opacity: .75; } 80%, 100% { transform: translateX(0); opacity: 0; } }
@media (max-width: 760px) { .aftercare-philosophy { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; } }
.aftercare-grid { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr); align-items: start; gap: clamp(40px, 8vw, 112px); }
.aftercare-card { padding: 26px 0 0; border-top: 1px solid var(--line-strong); }
.aftercare-card > .mono { color: var(--muted); }
.aftercare-number { display: flex; align-items: baseline; gap: 14px; margin: 24px 0 20px; }
.aftercare-number span { font-size: clamp(100px, 10vw, 132px); font-weight: 600; line-height: .95; letter-spacing: -.06em; }
.aftercare-number em { font-size: 20px; font-style: normal; color: var(--text-2); }
.aftercare-label { font-size: 15px; color: #dddde5; }
.aftercare-rule { height: 1px; margin: 28px 0 22px; background: var(--line); }
.aftercare-card p:not(.mono) { margin: 0; font-size: 13px; line-height: 1.9; color: var(--text-2); }
.aftercare-card .text-link { margin-top: 22px; }
.rules { border-top: 1px solid var(--line-strong); }
.rule-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.rule-head .mono { font-size: 9px; }
.rule { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.rule-num { padding-top: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.rule h3 { margin: 0 0 9px; font-size: 16px; font-weight: 600; }
.rule p { max-width: 650px; margin: 0; font-size: 15px; line-height: 1.75; color: var(--text-2); }
.rule-footnote { margin-top: 20px; }

/* Real service sheet: a quiet document frame, original pixels and direct link. */
.studio { }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); align-items: start; gap: clamp(48px, 7vw, 96px); }
.studio-copy .lede { margin: 28px 0 0; }
.studio-copy .lede + .lede { margin-top: 18px; }
.studio-statement { margin: 32px 0 0; padding-left: 20px; border-left: 1px solid var(--line-strong); font-size: 18px; line-height: 1.7; color: #d1d1dc; }
.studio-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.studio-values > div { min-width: 0; }
.studio-values .mono { display: block; margin-bottom: 14px; font-size: 8px; letter-spacing: .08em; color: var(--muted); overflow-wrap: anywhere; }
.studio-values strong { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.studio-values p { margin: 0; font-size: 12px; color: var(--text-2); }
.studio-visual { min-width: 0; }
.poster-card { display: block; border: 1px solid var(--line-strong); background: var(--bg-soft); transition: border-color .2s ease; }
.poster-image { height: auto; max-height: 620px; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 0; scrollbar-width: thin; scrollbar-color: #3a3a44 transparent; -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); }
.poster-image.is-at-end { -webkit-mask-image: none; mask-image: none; }
.poster-image img { width: 100%; height: auto; object-fit: contain; object-position: top center; }
.poster-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.poster-meta .mono { display: block; margin-bottom: 5px; font-size: 9px; color: var(--muted); }
.poster-meta strong { display: block; font-size: 15px; font-weight: 500; }
.poster-open { flex: none; padding-bottom: 4px; border-bottom: 1px solid #686873; font-size: 12px; color: #d1d1da; }
.poster-card:hover { border-color: #686875; }
.poster-caption { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.studio-lower { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); align-items: end; gap: clamp(40px, 8vw, 112px); margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--line); }
.studio-facts { border-bottom: 1px solid var(--line); }
.studio-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.studio-facts .mono { font-size: 9px; color: var(--muted); }
.studio-facts strong { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: #d0d0d9; text-align: right; }
.studio-quote { margin: 0; text-align: right; }
.studio-quote p { margin: 0; font-size: clamp(36px, 4vw, 56px); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.studio-quote footer { margin-top: 18px; font-size: 9px; color: var(--muted); }

/* Contact: a quiet connection sequence around the real action. */
.contact { overflow: hidden; padding: clamp(96px, 10vw, 160px) 0; }
.contact-bg { position: absolute; inset: 0; pointer-events: none; }
.contact-bg::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.1) 46%, transparent 86%); opacity: .34; }
.contact-inner { position: relative; z-index: 1; max-width: 900px; margin-inline: auto; text-align: center; }
.contact-inner .eyebrow { justify-content: center; }
.contact-title { font-size: clamp(34px, 4.4vw, 60px); }
.contact-inner > .lede { max-width: 560px; margin: 28px auto 0; }
.wechat-card { position: relative; max-width: 560px; margin: 44px auto 0; padding: 26px 0; overflow: hidden; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); text-align: left; transition: border-color .4s ease, box-shadow .5s ease; }
.wechat-card::before, .wechat-card::after { content: ""; position: absolute; z-index: 2; left: 0; width: 34%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(231,237,247,.8), transparent); animation: wechat-scan 6.5s ease-in-out infinite; }
.wechat-card::before { top: -1px; }
.wechat-card::after { bottom: -1px; animation-direction: reverse; animation-delay: -3s; }
.wechat-card.is-copied { border-color: rgba(226,234,246,.58); box-shadow: 0 0 34px rgba(203,216,237,.08); }
.wechat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.wechat-top .mono { color: var(--muted); }
.wechat-id-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wechat-id { font-family: var(--font-mono); font-size: clamp(29px, 3.5vw, 38px); line-height: 1.2; letter-spacing: -.04em; user-select: all; }
.wechat-id-row .btn { flex: none; padding-inline: 18px; font-size: 12px; }
.wechat-card > p { margin: 20px 0 0; font-size: 12px; color: var(--muted); }
.copy-status { min-height: 22px; margin: 12px 0 0; font-size: 12px; color: #d4d4de; }
.contact-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 800px; margin: 48px auto 0; text-align: left; }
.contact-steps::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(220,228,240,.38), transparent); transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--ease) .18s; }
.contact-steps.is-in::before { transform: scaleX(1); }
.contact-steps .step { position: relative; padding: 20px 28px 0; border-top: 0; border-left: 1px solid var(--line); }
.contact-steps .step::after { content: ""; position: absolute; top: -2px; left: 28px; width: 5px; height: 5px; background: #55555e; transition: background .45s ease, box-shadow .45s ease; }
.contact-steps.is-in .step::after { background: #d6dce6; box-shadow: 0 0 12px rgba(215,225,240,.32); }
.contact-steps.is-in .step:nth-child(2)::after { transition-delay: .22s; }
.contact-steps.is-in .step:nth-child(3)::after { transition-delay: .44s; }
.contact-steps .step:first-child { padding-left: 0; border-left: 0; }
.contact-steps .step:first-child::after { left: 0; }
.contact-steps .step:last-child { padding-right: 0; }
.contact-steps h3 { margin: 12px 0 8px; font-size: 15px; font-weight: 600; }
.contact-steps p { font-size: 12px; }
.contact-sign { margin: 48px 0 0; font-size: 14px; letter-spacing: .02em; color: #a8a8b2; }
@keyframes wechat-scan { 0%, 18% { transform: translateX(-110%); opacity: 0; } 35%, 65% { opacity: .8; } 82%, 100% { transform: translateX(295%); opacity: 0; } }

.site-footer { padding: 40px 0 26px; }
.footer-main { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: 28px; }
.footer-line { margin: 0; font-size: 12px; color: var(--muted); }
.footer-contact { display: flex; align-items: center; gap: 12px; }
.footer-contact .mono { color: var(--muted); }
.footer-copy { min-height: 36px; padding: 4px 0; border-bottom: 1px solid #595965; font-family: var(--font-mono); font-size: 13px; color: #dedee6; }
.footer-copy:hover { color: #fff; border-color: #ddd; }
.footer-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.footer-bottom p { margin: 0; font-size: 11px; line-height: 1.85; color: var(--muted); }
.footer-bottom > p:first-child { flex: none; }
.footer-bottom .icp:hover { color: #fff; text-decoration: underline; }
.footer-disclaimer { max-width: 620px; }
.back-top { flex: none; font-size: 11px; line-height: 1.85; color: #b5b5bf; }
.back-top:hover { color: #fff; }

/* The Chinese game name stays on the system CJK stack because the bundled subset does not include 永/劫. */
.game-cn { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif; font-size: .8em; font-weight: 400; letter-spacing: .02em; color: #9999a3; white-space: nowrap; }

/* Feedback: three honest reserved archives, with a real submission path. */
.feedback-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
.feedback-copy { max-width: 820px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.feedback-lead { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; line-height: 1.4; letter-spacing: -.02em; color: #dedee4; }
.feedback-lead span { color: #8c8c96; }
.feedback-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.feedback-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.feedback-steps > li > span { padding-top: 3px; font-family: var(--font-mono); font-size: 9px; color: #777782; }
.feedback-steps strong { display: block; font-size: 13px; font-weight: 600; color: #dedee4; }
.feedback-steps p { margin: 5px 0 0; font-size: 12px; line-height: 1.7; color: #8d8d96; }
.feedback-note { margin: 20px 0 0; font-size: 11px; line-height: 1.8; color: #777782; }
.feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.feedback-actions .btn { min-height: 40px; }
.feedback-actions .text-link { margin-top: 0; }
.feedback-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.feedback-channel { min-width: 0; min-height: 230px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(8,8,10,.45)); }
.feedback-channel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.feedback-channel > header .mono { font-size: 8px; color: var(--muted); }
.feedback-channel > header > span:last-child { font-size: 15px; font-weight: 600; color: #dedee4; }
.feedback-channel-empty { padding-top: 24px; }
.feedback-empty-label { display: block; font-size: 8px; line-height: 1.5; letter-spacing: .12em; color: #777781; }
.feedback-channel-empty p { margin: 18px 0 8px; font-size: 18px; font-weight: 500; color: #d7d7df; }
.feedback-channel-empty > span:last-child { display: block; font-size: 12px; line-height: 1.8; color: var(--muted); }
.feedback-galleries { display: grid; gap: 64px; }
.feedback-gallery-group { min-width: 0; padding-top: 26px; border-top: 1px solid var(--line); }
.feedback-gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.feedback-gallery-head .mono { font-size: 9px; color: var(--muted); }
.feedback-gallery-head h3 { margin: 8px 0 0; font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.feedback-gallery-grid { display: grid; gap: 12px; }
.feedback-gallery-grid.is-streamer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feedback-gallery-grid.is-veteran { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.feedback-gallery-grid.is-player { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.streamer-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8,9,11,.48); }
.streamer-card-head { min-height: 76px; }
.streamer-card-head strong { display: block; margin-bottom: 7px; font-size: 16px; font-weight: 600; }
.streamer-card-head span { display: block; font-size: 12px; line-height: 1.65; color: var(--muted); }
.streamer-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.feedback-photo { display: block; min-width: 0; padding: 0; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: #0b0d11; cursor: zoom-in; }
.feedback-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: .86; transition: transform .55s var(--ease), opacity .35s ease; }
.feedback-photo:hover img, .feedback-photo:focus-visible img { opacity: 1; transform: scale(1.035); }
.feedback-photo:focus-visible { outline: 1px solid #d7e0ed; outline-offset: 3px; }
.feedback-more { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 170px; min-height: 42px; margin: 20px auto 0; padding: 10px 18px; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; color: var(--text-2); transition: color .25s ease, border-color .25s ease, background .25s ease; }
.feedback-more:hover { border-color: var(--line-strong); background: rgba(255,255,255,.03); color: #fff; }
.feedback-more span { font-size: 15px; line-height: 1; }
.feedback-more[hidden] { display: none; }
.feedback-gallery-group.is-expanded .feedback-more { min-width: 170px; }
@media (max-width: 980px) {
  .feedback-gallery-grid.is-streamer { grid-template-columns: 1fr; }
  .streamer-card-head { min-height: 0; margin-bottom: 16px; }
  .feedback-gallery-grid.is-veteran, .feedback-gallery-grid.is-player { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .feedback-galleries { gap: 48px; }
  .feedback-gallery-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .feedback-gallery-head h3 { font-size: 23px; }
  .feedback-gallery-grid.is-veteran, .feedback-gallery-grid.is-player { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.aftercare-followup { margin-top: clamp(48px, 6vw, 72px); padding-top: 30px; border-top: 1px solid var(--line-strong); }
.aftercare-followup-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: end; gap: clamp(32px, 7vw, 80px); }
.followup-kicker { display: block; font-size: 8px; line-height: 1.5; letter-spacing: .12em; color: #7f7f89; }
.aftercare-followup-head h3 { margin: 14px 0 0; font-size: clamp(24px, 2.8vw, 34px); font-weight: 500; line-height: 1.35; letter-spacing: -.02em; color: #dedee4; }
.aftercare-followup-head p { margin: 0; font-size: 13px; line-height: 1.8; color: #8e8e98; }
.aftercare-followup-head .text-link { margin-top: 16px; }
.aftercare-followup-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.aftercare-followup-steps li { min-width: 0; padding: 18px 16px 0; border-left: 1px solid var(--line); }
.aftercare-followup-steps li:first-child { padding-left: 0; border-left: 0; }
.aftercare-followup-steps li:last-child { padding-right: 0; }
.aftercare-followup-steps .mono { display: block; margin-bottom: 12px; font-size: 8px; line-height: 1.5; letter-spacing: .1em; color: #777781; }
.aftercare-followup-steps strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; color: #dedee4; }
.aftercare-followup-steps p { margin: 6px 0 0; font-size: 11px; line-height: 1.7; color: #8a8a94; }
@media (max-width: 980px) {
  .aftercare-followup-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .aftercare-followup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aftercare-followup-steps li { padding: 16px 14px 0; border-top: 1px solid var(--line); }
  .aftercare-followup-steps li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .aftercare-followup-steps li:nth-child(even) { padding-right: 0; }
  .aftercare-followup-steps li:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 520px) {
  .aftercare-followup-steps { grid-template-columns: 1fr; }
  .aftercare-followup-steps li { padding: 16px 0; border-left: 0; border-top: 1px solid var(--line); }
  .aftercare-followup-steps li:first-child { border-top: 0; }
}

@media (max-width: 980px) {
  .feedback-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .feedback-steps { grid-template-columns: 1fr; }
  .feedback-actions { flex-direction: column; align-items: stretch; }
  .feedback-actions .btn { width: 100%; }
  .feedback-channels { grid-template-columns: 1fr; }
  .feedback-channel { min-height: 0; padding: 20px; }
}

/* Motion is progressive enhancement: all content stays visible without JS. */
@keyframes hero-enter {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes hero-mark-enter {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.975); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes cue-drift {
  0%, 100% { transform: translate3d(0, -2px, 0); }
  50% { transform: translate3d(0, 3px, 0); }
}
.motion-enabled .hero-eyebrow,
.motion-enabled .hero-title,
.motion-enabled .hero-lede,
.motion-enabled .hero-index,
.motion-enabled .hero-actions,
.motion-enabled .hero-specs,
.motion-enabled .hero-hud,
.motion-enabled .hero-foot,
.motion-enabled .motion-toggle {
  animation: hero-enter 1.1s var(--ease) both;
}
.motion-enabled .hero-eyebrow { animation-delay: 0s; }
.motion-enabled .hero-brand { animation: hero-mark-enter 1.1s var(--ease) .12s both; }
.motion-enabled .hero-title { animation-delay: .28s; }
.motion-enabled .hero-lede { animation-delay: .42s; }
.motion-enabled .hero-index { animation-delay: .42s; }
.motion-enabled .hero-actions { animation-delay: .6s; }
.motion-enabled .hero-specs { animation-delay: .7s; }
.motion-enabled .hero-hud { animation-delay: .5s; }
.motion-enabled .hero-foot { animation-delay: .6s; }
.motion-enabled .motion-toggle { animation-delay: .95s; }
.scroll-cue > span { animation: cue-drift 2.8s ease-in-out infinite; }
.motion-paused .hero-eyebrow,
.motion-paused .hero-brand,
.motion-paused .hero-title,
.motion-paused .hero-lede,
.motion-paused .hero-index,
.motion-paused .hero-actions,
.motion-paused .hero-specs,
.motion-paused .hero-hud,
.motion-paused .hero-foot,
.motion-paused .motion-toggle {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}

.menu-panel { transform: translate3d(0, -8px, 0); transition: opacity .32s ease, transform .45s var(--ease), visibility .32s ease; }
.menu-panel.is-open { transform: none; }
.menu-nav a { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .35s ease, transform .45s var(--ease), color .2s ease; transition-delay: 0s; }
.menu-panel.is-open .menu-nav a { opacity: 1; transform: none; transition-delay: calc(.06s + var(--menu-order, 0) * .035s); }
.menu-nav a:nth-child(1) { --menu-order: 1; }
.menu-nav a:nth-child(2) { --menu-order: 2; }
.menu-nav a:nth-child(3) { --menu-order: 3; }
.menu-nav a:nth-child(4) { --menu-order: 4; }
.menu-nav a:nth-child(5) { --menu-order: 5; }
.menu-nav a:nth-child(6) { --menu-order: 6; }
.menu-nav a:nth-child(7) { --menu-order: 7; }
.menu-nav a:nth-child(8) { --menu-order: 8; }

.btn { transition: color .25s ease, background .25s ease, border-color .25s ease, transform .35s var(--ease); }
.btn svg, .text-link > span, .tier-cta > span { transition: transform .35s var(--ease); }
.btn:active, .tier-cta:active { transform: scale(.975); transition-duration: .1s; }
.copy-trigger { position: relative; }
.copy-trigger.is-copied { border-color: rgba(222, 232, 222, .48); }
.copy-trigger.copy-failed { border-color: rgba(222, 190, 190, .5); }
.copy-status { transition: opacity .25s ease, transform .35s var(--ease); }
.copy-status:empty { opacity: 0; transform: translate3d(0, 4px, 0); }
.service-row, .tier, .principle, .rule { transition: background .4s ease, border-color .4s ease; }
.principle, .rule { background: transparent; }
.side-rail a i, .scroll-cue i, .brand-mark { transition: transform .35s var(--ease), background .25s ease, border-color .25s ease; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate3d(0, -2px, 0); }
  .btn:hover svg, .text-link:hover > span, .tier-cta:hover > span { transform: translate3d(2px, -2px, 0); }
  .tiers-callout .text-link:hover > span { transform: translate3d(3px, 0, 0); }
  .principle:hover, .rule:hover { background: rgba(255,255,255,.018); }
  .service-row:hover .service-num { color: #e5e5ec; }
  .service-num { transition: color .3s ease; }
  .tier:hover .tier-id { color: #c7c7d0; }
  .tier-id { transition: color .3s ease; }
  .side-rail a:hover i, .side-rail a.is-active i { transform: scale(1.55); }
  .scroll-cue:hover i { transform: rotate(45deg) translate3d(2px, 2px, 0); }
  .brand:hover .brand-mark { transform: rotate(-4deg); }
}

/* Progressive enhancement: visible by default, including absent/failed JS. */
.section-transition { display: none; }
.reveal-ready .section-transition { position: absolute; z-index: 8; inset: 0; display: block; pointer-events: none; background: linear-gradient(180deg, rgba(10,11,14,.97), rgba(5,5,6,.99)); box-shadow: inset 0 -1px rgba(215,225,240,.12); transform: translateY(0); transition: transform 1s var(--ease), visibility 0s linear 1s; }
.reveal-ready .section-transition::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 28%, rgba(209,222,241,.11) 48%, rgba(255,255,255,.18) 50%, rgba(209,222,241,.06) 53%, transparent 74%); transform: translateX(-110%); }
.reveal-ready .section-transition::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(230,238,249,.7), transparent); box-shadow: 0 0 22px rgba(195,214,237,.24); }
.reveal-ready .reveal-group.is-in .section-transition { visibility: hidden; transform: translateY(-101%); }
.reveal-ready .section-transition--fade { background: rgba(5,6,8,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: opacity .9s ease, visibility 0s linear .9s, -webkit-backdrop-filter .9s ease, backdrop-filter .9s ease; }
.reveal-ready .section-transition--fade::before { display: none; }
.reveal-ready .reveal-group.is-in .section-transition--fade { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transform: none; }
.reveal-ready .section-transition--side { background: linear-gradient(100deg, #090a0d, #050506); box-shadow: inset 1px 0 rgba(220,230,244,.2); transform: translateX(0); transition: transform 1.05s var(--ease), visibility 0s linear 1.05s; }
.reveal-ready .section-transition--side::after { top: 0; bottom: 0; right: auto; left: 0; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(230,238,249,.7), transparent); box-shadow: 0 0 24px rgba(195,214,237,.3); }
.reveal-ready .reveal-group.is-in .section-transition--side { transform: translateX(105%); }
.reveal-ready .section-transition--grid { background-color: #07080a; background-image: linear-gradient(rgba(211,223,239,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(211,223,239,.035) 1px, transparent 1px); background-size: 72px 72px; }
.reveal-ready .section-transition--split { background: transparent; box-shadow: none; }
.reveal-ready .section-transition--split::before { inset: 0 0 50%; width: auto; height: auto; background: #08090c; transform: translateY(0); transition: transform 1s var(--ease); }
.reveal-ready .section-transition--split::after { inset: 50% 0 0; width: auto; height: auto; background: #050506; box-shadow: 0 -1px rgba(215,225,240,.14); transform: translateY(0); transition: transform 1s var(--ease); }
.reveal-ready .reveal-group.is-in .section-transition--split::before { animation: none; transform: translateY(-101%); }
.reveal-ready .reveal-group.is-in .section-transition--split::after { transform: translateY(101%); }
.reveal-ready .section-transition--focus { background: rgba(5,6,8,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: scale(1); transition: opacity .9s ease, transform .95s var(--ease), visibility 0s linear .95s; }
.reveal-ready .section-transition--focus::before { display: none; }
.reveal-ready .reveal-group.is-in .section-transition--focus { opacity: 0; visibility: hidden; transform: scale(1.035); }
.reveal-ready .section-transition--columns { background: linear-gradient(90deg, #08090c, #050506); clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease), visibility 0s linear 1.1s; }
.reveal-ready .section-transition--columns::before { background: repeating-linear-gradient(90deg, rgba(210,224,241,.1) 0 1px, transparent 1px 96px), linear-gradient(105deg, transparent 30%, rgba(255,255,255,.13) 50%, transparent 70%); }
.reveal-ready .reveal-group.is-in .section-transition--columns { visibility: hidden; clip-path: inset(0 0 0 100%); transform: none; }
.reveal-ready .section-transition--zoom { background: radial-gradient(ellipse at 50% 48%, #121720, #050506 68%); transform: scale(1.06); transition: opacity .9s ease, transform 1s var(--ease), visibility 0s linear 1s; }
.reveal-ready .section-transition--zoom::before { display: none; }
.reveal-ready .reveal-group.is-in .section-transition--zoom { opacity: 0; visibility: hidden; transform: scale(1); }
.reveal-ready .section-transition--diagonal { background: linear-gradient(100deg, #090a0d, #050506); transform: translateX(0) skewX(-8deg) scale(1.15); transition: transform 1.1s var(--ease), visibility 0s linear 1.1s; }
.reveal-ready .section-transition--diagonal::before { display: none; }
.reveal-ready .reveal-group.is-in .section-transition--diagonal { transform: translateX(115%) skewX(-8deg) scale(1.15); }
.reveal-ready .section-transition--signal { background: rgba(5,6,8,.76); transition: opacity .85s ease .15s, visibility 0s linear 1s; }
.reveal-ready .section-transition--signal::before, .reveal-ready .section-transition--signal::after { top: 50%; bottom: auto; width: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(220,231,245,.65)); box-shadow: 0 0 18px rgba(195,214,237,.22); transform: scaleX(0); transition: transform .9s var(--ease); }
.reveal-ready .section-transition--signal::before { right: auto; left: 0; transform-origin: left center; }
.reveal-ready .section-transition--signal::after { right: 0; left: auto; transform-origin: right center; }
.reveal-ready .reveal-group.is-in .section-transition--signal { opacity: 0; visibility: hidden; }
.reveal-ready .reveal-group.is-in .section-transition--signal::before, .reveal-ready .reveal-group.is-in .section-transition--signal::after { animation: none; transform: scaleX(1); }
.reveal-ready .reveal-group.is-in .section-transition::before { animation: section-sheen 1.1s var(--ease) both; }
@keyframes section-sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
.reveal { opacity: 1; transform: none; filter: none; }
.reveal-ready .reveal { --reveal-y: 16px; transition: opacity .95s var(--ease), transform .95s var(--ease), filter .95s var(--ease); transition-delay: var(--delay, 0s); }
.reveal-ready .section-title.reveal { --reveal-y: 24px; }
.reveal-ready .service-row.reveal, .reveal-ready .rule.reveal { --reveal-y: 16px; }
.reveal-ready .reveal:not(.is-in) { opacity: 0; transform: translate3d(0, var(--reveal-y), 0); filter: blur(3px); }
.reveal-ready .reveal.is-in { opacity: 1; transform: none; filter: blur(0); }
.eyebrow-line, .tier-rule { transform-origin: left center; }
.reveal-ready .eyebrow.reveal .eyebrow-line,
.reveal-ready .tier.reveal .tier-rule { transform: scaleX(1); transition: transform .85s var(--ease); transition-delay: calc(var(--delay, 0s) + .12s); }
.reveal-ready .eyebrow.reveal:not(.is-in) .eyebrow-line,
.reveal-ready .tier.reveal:not(.is-in) .tier-rule { transform: scaleX(0); }

/* Layout breakpoints; menu threshold stays in sync with script.js at 980px. */
@media (max-width: 1120px) {
  .side-rail { display: none; }
}

@media (max-width: 1120px) {
  .section-head, .service-aside { column-gap: 48px; }
  .tier { padding-inline: 22px; }
  .studio-grid { gap: 48px; }
  .studio-values { gap: 12px; }
  .studio-values .mono { font-size: 7.5px; }
}

@media (max-width: 980px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .main-nav, .header-contact { display: none; }
  .menu-toggle { display: inline-flex; }
  .no-script-nav { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 22px; margin-top: var(--header-h); padding: 12px var(--gutter); border-bottom: 1px solid var(--line); font-size: 13px; }
  .no-script-nav a { padding: 8px 0; }
  .section-head { grid-template-columns: 1fr; align-items: start; gap: 28px; margin-bottom: 48px; }
  .section-head-copy .lede { max-width: 680px; }
  .section-title { font-size: clamp(38px, 5.4vw, 54px); }
  .service-aside { column-gap: 40px; }
  .service-aside > .section-title { font-size: clamp(34px, 4.6vw, 46px); }
  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .software-head { grid-template-columns: 1fr; gap: 26px; }
  .software-grid { grid-template-columns: 1fr; }
  .software-longterm { grid-template-columns: 1fr; gap: 28px; }
  .software-longterm > .text-link { grid-column: 1; margin-top: 0; }
  .aftercare-grid { grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 40px; }
  .studio-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .studio-values { grid-template-columns: 1fr; gap: 16px; }
  .studio-values > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .studio-values > div:last-child { padding-bottom: 0; border-bottom: 0; }
  .studio-values .mono { grid-column: 1 / -1; margin-bottom: 2px; font-size: 9px; }
  .studio-values strong { margin: 0; }
  .studio-values p { text-align: right; }
  .poster-image { height: auto; max-height: 540px; padding: 14px 14px 0; }
  .poster-meta { flex-wrap: wrap; padding: 18px; }
  .studio-lower { gap: 40px; }
  .contact-title { font-size: clamp(34px, 5vw, 50px); }
  .footer-main { flex-wrap: wrap; }
  .footer-line { order: 3; width: 100%; }
  .footer-bottom { flex-wrap: wrap; gap: 16px 24px; }
  .footer-disclaimer { order: 3; max-width: none; width: 100%; }
}

@media (max-width: 980px) {
  .hero-hud { top: calc(var(--header-h) + 20px); }
  .hero-inner { padding: 80px 0 68px; }
  .hero-lede { max-width: 620px; }
}

@media (max-width: 900px) {
  .compare-scroll { overflow: visible; border: 0; }
  .compare-table, .compare-table tbody { display: block; min-width: 0; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .compare-table tbody tr { display: block; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 0; }
  .compare-table tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .compare-table tbody th { display: block; padding: 0 0 12px; font-size: 14px; font-weight: 500; color: var(--text); }
  .compare-table tbody td { display: grid; grid-template-columns: 98px minmax(0, 1fr); gap: 20px; padding: 9px 0; border: 0; font-size: 13px; }
  .compare-table tbody td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
  .compare-table tbody .brand-col { padding: 12px; background: rgba(255,255,255,.035); }
  .compare-table tbody .brand-col::before { color: #dddde5; }
}

@media (max-width: 760px) {
  :root { --gutter: 24px; }
  .hero-hud { display: none; }
  .hero-inner { padding: 68px 0 58px; }
  .hero-eyebrow { gap: 8px; font-size: 8px; letter-spacing: .15em; }
  .hero-brand { margin-top: 24px; gap: 12px; }
  .hero-brand-sub { font-size: 7.5px; letter-spacing: .26em; }
  .hero-title { margin-top: 20px; }
  .hero-lede { max-width: 560px; margin-top: 16px; font-size: 14px; line-height: 1.75; }
  .hero-lede-break { display: none; }
  .hero-index { margin-top: 20px; font-size: 7.5px; }
  .hero-actions { margin-top: 24px; }
  .hero-specs { margin-top: 14px; }
  .hero-foot-inner { display: flex; justify-content: center; min-height: 56px; }
  .hero-foot p { display: none; }
  .section { padding: 80px 0; }
  .section-head { margin-bottom: 40px; }
  .section-title { font-size: clamp(32px, 6.6vw, 46px); }
  .eyebrow { margin-bottom: 20px; font-size: 9px; letter-spacing: .12em; }
  .lede { font-size: 15px; }
  .principles { grid-template-columns: 1fr; }
  .principle, .principle:first-child, .principle:last-child { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .principle-index { margin-bottom: 16px; }
  .principle h3 { font-size: 19px; }
  .compare-block { margin-top: 56px; }
  .service-aside { display: block; margin-bottom: 40px; }
  .service-aside > .section-title { font-size: clamp(32px, 6.6vw, 46px); }
  .service-aside > .lede { margin-top: 24px; }
  .readout { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin-top: 28px; }
  .readout > div { gap: 12px; }
  .readout span { font-size: 9px; }
  .readout strong { font-size: 10px; }
  .aside-quote { margin-top: 28px; font-size: 13px; }
  .service-list { max-width: 100%; }
  .service-row { min-height: 226px; padding: 22px 20px 24px; }
  .service-row-head h3 { font-size: 22px; }
  .service-row p { font-size: 14px; }
  .process { margin-top: 48px; }
  .process-head { display: block; margin-bottom: 28px; }
  .process-head h3 { margin-top: 16px; font-size: 25px; }
  .process-steps { grid-template-columns: 1fr 1fr; gap: 24px; }
  .tiers-grid { grid-template-columns: 1fr; }
  .tier-bespoke { flex: 0 0 auto; }
  .tier-trail { flex: 0 0 auto; height: 140px; min-height: 140px; }
  .tier-ecosystem { margin-top: 44px; }
  .ecosystem-grid { grid-template-columns: 1fr; }
  .ecosystem-card { grid-template-rows: auto 230px; }
  .ecosystem-card > img, .ecosystem-core-visual { height: 230px; }
  .tier, .tier:first-child, .tier:last-child { padding: 32px 0; border-left: 0; border-bottom: 1px solid var(--line-strong); }
  .tier:last-child { border-bottom: 0; }
  .tier-top { margin-bottom: 24px; }
  .amount { font-size: 68px; }
  .tier-list li { padding-block: 10px; }
  .tier-list strong { font-size: 14px; }
  .tier-list span { font-size: 14px; }
  .tier-foot { padding-top: 28px; }
  .tier-cta { width: auto; min-width: 180px; }
  .tiers-callout { flex-direction: column; align-items: flex-start; gap: 18px; }
  .aftercare-grid { grid-template-columns: 1fr; gap: 40px; }
  .aftercare-card { max-width: 460px; }
  .aftercare-number span { font-size: 104px; }
  .rule { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 22px 0; }
  .rule p { font-size: 14px; }
  .studio-grid { grid-template-columns: 1fr; gap: 40px; }
  .studio-statement { font-size: 17px; }
  .studio-visual { width: 100%; max-width: 520px; margin-inline: auto; }
  .poster-image { height: auto; max-height: 540px; padding: 20px 20px 0; }
  .poster-meta { padding: 20px; }
  .studio-lower { grid-template-columns: 1fr; gap: 36px; margin-top: 56px; }
  .studio-facts { max-width: 480px; }
  .studio-quote { text-align: left; }
  .studio-quote p { font-size: 38px; }
  .contact-title { font-size: clamp(28px, 6.4vw, 44px); }
  .contact-inner > .lede { margin-top: 24px; }
  .contact-steps { margin-top: 36px; }
  .contact-steps .step { padding-inline: 18px; }
  .contact-sign { margin-top: 36px; }
  .footer-main { display: grid; grid-template-columns: 1fr auto; gap: 24px; }
  .footer-line { grid-column: 1 / -1; order: initial; font-size: 11px; }
  .footer-contact { gap: 8px; }
  .footer-contact .mono { font-size: 9px; }
}

@media (max-width: 520px) {
  :root { --gutter: 20px; }
  .hero-inner { padding: 56px 0 46px; }
  .motion-toggle { right: 16px; bottom: 12px; min-height: 32px; font-size: 8px; }
  .hero-eyebrow { gap: 7px; font-size: 7.5px; letter-spacing: .11em; }
  .hero-brand { margin-top: 20px; gap: 10px; }
  .hero-brand-sub { font-size: 7px; letter-spacing: .2em; }
  .hero-title { margin-top: 16px; letter-spacing: 0; }
  .hero-lede { margin-top: 14px; font-size: 14px; line-height: 1.75; }
  .hero-lede-tail { white-space: nowrap; }
  .hero-index { margin-top: 16px; gap: 4px 8px; font-size: 7px; letter-spacing: .09em; }
  .hero-actions { flex-direction: column; width: 100%; max-width: 280px; gap: 10px; margin-top: 22px; }
  .hero-actions .btn { width: 100%; min-height: 44px; }
  .hero-specs { margin-top: 14px; font-size: 7.5px; letter-spacing: .08em; }
  .section { padding: 72px 0; }
  .section-title { font-size: clamp(29px, 7.7vw, 38px); }
  .service-aside > .section-title { font-size: clamp(29px, 8vw, 38px); }
  .readout { grid-template-columns: 1fr; }
  .readout span, .readout strong { font-size: 10px; }
  .service-list { grid-template-columns: 1fr; }
  .service-row { min-height: 0; padding: 22px 20px 24px; background: rgba(5,5,7,.24); }
  .service-row:nth-child(even) { background: rgba(255,255,255,.026); }
  .service-num { margin-bottom: 24px; }
  .service-row-head { gap: 6px; margin-bottom: 12px; }
  .service-row-head h3 { font-size: 23px; }
  .service-row p { font-size: 14px; }
  .software-head { margin-bottom: 34px; }
  .software-product { gap: 26px; padding: 22px 16px; }
  .software-product h3 { font-size: clamp(24px, 7vw, 30px); }
  .software-points li { grid-template-columns: 1fr; gap: 3px; }
  .software-thumbs a { height: auto; }
  .shot-meta { padding: 24px 9px 7px; font-size: 7px; }
  .software-longterm { margin-top: 48px; }
  .longterm-steps { grid-template-columns: 1fr; }
  .longterm-steps li, .longterm-steps li:first-child, .longterm-steps li:last-child { padding: 17px 0; border-left: 0; border-top: 1px solid var(--line); }
  .longterm-steps li:first-child { padding-top: 0; border-top: 0; }
  .compare-table tbody td { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .compare-table tbody .brand-col { padding: 12px 8px; }
  .process-steps { gap: 24px 20px; }
  .step p { font-size: 13px; }
  .tier-label { font-size: 10px; }
  .tier h3 { font-size: 22px; }
  .rule-head .mono { font-size: 8px; }
  .rule { gap: 12px; grid-template-columns: 34px minmax(0, 1fr); }
  .rule h3 { font-size: 15px; }
  .studio-values > div { grid-template-columns: 1fr; }
  .studio-values p { text-align: left; }
  .studio-statement { font-size: 16px; padding-left: 16px; }
  .poster-image { height: auto; max-height: 460px; padding: 14px 14px 0; }
  .poster-meta { padding: 18px 14px; gap: 12px; }
  .poster-meta .mono { font-size: 8px; }
  .poster-open { font-size: 11px; }
  .poster-caption { font-size: 11px; }
  .contact-title { font-size: clamp(25px, 6.5vw, 34px); }
  .contact-inner > .lede br { display: none; }
  .wechat-card { margin-top: 32px; padding: 24px 0; }
  .wechat-id-row { align-items: flex-start; flex-direction: column; gap: 22px; }
  .wechat-id-row .btn { width: 100%; }
  .wechat-id { font-size: 34px; }
  .contact-steps { grid-template-columns: 1fr; }
  .contact-steps::before { right: auto; bottom: 0; width: 1px; height: auto; transform: scaleY(0); transform-origin: center top; }
  .contact-steps.is-in::before { transform: scaleY(1); }
  .contact-steps .step, .contact-steps .step:first-child, .contact-steps .step:last-child { padding: 20px 0 20px 22px; border-left: 0; border-top: 0; }
  .contact-steps .step::after, .contact-steps .step:first-child::after { top: 26px; left: -2px; }
  .contact-steps h3 { margin-top: 8px; }
  .contact-sign { margin-top: 24px; }
  .footer-contact { align-items: flex-end; flex-direction: column; gap: 0; }
  .footer-copy { font-size: 12px; }
  .footer-bottom { gap: 14px; }
  .footer-bottom p, .back-top { font-size: 10px; }
}

html.motion-paused .menu-panel,
html.motion-paused .menu-nav a { transition: none; }
html.motion-paused .menu-panel { transform: none; }

/* Image lightbox: DunOS-style FLIP zoom with a slow 3D tilt and moving glare. */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 56px);
  background: rgba(5, 5, 7, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: zoom-out;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s var(--ease), visibility 0s; }
.lightbox-close {
  position: fixed;
  z-index: 2;
  top: clamp(16px, 2.6vw, 30px);
  right: clamp(16px, 2.6vw, 30px);
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px;
  background: rgba(5,5,7,.72);
  color: #c7c7d0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.lightbox-close:hover { color: #fff; border-color: rgba(255,255,255,.42); }
.lightbox-figure { display: flex; flex-direction: column; align-items: center; max-width: min(1180px, 92vw); margin: 0; perspective: 1100px; }
.lightbox-shot { position: relative; transform-style: preserve-3d; will-change: transform; }
.lightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: #0a0b0e;
  box-shadow: 0 50px 120px rgba(0,0,0,.75);
  will-change: transform;
}
.lightbox-glare {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(circle, rgba(255,255,255,.07), transparent 58%) 50% 50% / 190% 190%;
}
.lightbox.is-open .lightbox-glare { opacity: 1; }
.lightbox-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s var(--ease);
}
.lightbox-caption b { color: #e3e3ea; font-weight: 500; }
.lightbox.is-open .lightbox-caption { opacity: 1; transform: none; transition-delay: .3s; }
.lightbox.is-closing .lightbox-caption { opacity: 0; transform: none; transition-duration: .12s; transition-delay: 0s; }
.lightbox.is-long .lightbox-figure { width: min(780px, 92vw); }
.lightbox.is-long .lightbox-shot {
  width: 100%;
  max-height: 76vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: #0a0b0e;
  box-shadow: 0 50px 120px rgba(0,0,0,.75);
  scrollbar-width: thin;
  scrollbar-color: rgba(220,228,240,.24) transparent;
}
.lightbox.is-long .lightbox-image {
  width: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.lightbox.is-long .lightbox-glare { display: none; }
.lightbox-nav {
  position: fixed;
  z-index: 2;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 5px;
  background: rgba(8,10,13,.78);
  color: #b9c0ca;
  font-size: 11px;
  transform: translateY(-50%);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.lightbox-nav:hover, .lightbox-nav:focus-visible { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(20,23,28,.9); }
.lightbox-nav span { font-size: 17px; }
.lightbox-prev { left: clamp(16px, 2.6vw, 36px); }
.lightbox-next { right: clamp(16px, 2.6vw, 36px); }
.lightbox-count { position: fixed; z-index: 2; top: clamp(25px, 3.4vw, 40px); left: 50%; color: #a7afb9; font-size: 10px; letter-spacing: .18em; transform: translateX(-50%); }
.lightbox-nav[hidden], .lightbox-count[hidden] { display: none; }

.software-shot,
.software-thumbs a {
  cursor: zoom-in;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s ease;
}
.software-shot:not(.interaction-card):hover { transform: translateY(-4px); border-color: rgba(255,255,255,.28); box-shadow: 0 30px 60px rgba(0,0,0,.42); }
.software-thumbs a:not(.interaction-card):hover { transform: translateY(-3px); border-color: rgba(255,255,255,.28); }

@media (max-width: 700px) {
  .lightbox { padding: 18px; }
  .lightbox-figure { max-width: 100%; }
  .lightbox-image { max-height: 74vh; border-radius: 8px; }
  .lightbox-caption { flex-direction: column; gap: 4px; font-size: 9px; letter-spacing: .1em; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-nav { top: auto; bottom: 14px; min-height: 38px; padding: 0 11px; transform: none; }
  .lightbox-prev { left: 14px; }
  .lightbox-next { right: 14px; }
  .lightbox-count { top: 23px; }
  .lightbox.has-gallery .lightbox-figure { padding-bottom: 50px; }
}

/* Pointer-driven card depth, isolated from the reveal transforms. */
.interaction-card {
  --card-rx: 0deg;
  --card-ry: 0deg;
  --card-lift: 0px;
  --card-press: 1;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-o: 0;
  --card-radius: 0px;
  position: relative;
  border-radius: var(--card-radius);
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translate3d(0, var(--card-lift), 0) scale(var(--card-press));
  transition: background .35s ease, border-color .35s ease, border-radius .45s var(--ease), box-shadow .35s ease;
  will-change: transform;
}
.reveal-ready .reveal.is-in.interaction-card {
  transform: perspective(1100px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translate3d(0, var(--card-lift), 0) scale(var(--card-press));
}
.interaction-card > :not(.card-glare) { position: relative; z-index: 1; }
.card-glare {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glow-o);
  background: radial-gradient(circle 360px at var(--glow-x) var(--glow-y), rgba(224,232,246,.16), rgba(190,201,222,.045) 36%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(225,232,245,.12);
  transition: opacity .3s ease;
}
.software-shot .card-glare, .software-thumbs a .card-glare { z-index: 2; box-shadow: inset 0 0 0 1px rgba(236,241,250,.2); }
.software-shot .shot-meta { z-index: 3; }
.interaction-card.is-hovering { --card-radius: 10px; border-color: rgba(225,232,244,.34); }
.software-shot.interaction-card.is-hovering, .software-thumbs a.interaction-card.is-hovering { box-shadow: 0 28px 64px rgba(0,0,0,.48), 0 0 28px rgba(190,204,230,.055); }
.software-product.interaction-card.is-hovering { box-shadow: 0 24px 68px rgba(0,0,0,.32); }
.interaction-card.is-pressing { --card-press: .982; }
@media (hover: none), (pointer: coarse) {
  .interaction-card { transition: transform .22s var(--ease), border-color .25s ease, box-shadow .25s ease; }
  .interaction-card.is-pressing { --card-rx: 0deg; --card-ry: 0deg; --card-lift: 0px; --card-press: .985; }
  .card-glare { display: none; }
}
/* Scroll choreography: masked titles, chapter ghosts and charged stations. */
.section-title { overflow: hidden; }
.title-mask { display: inline-block; }
.reveal-ready .section-title .title-mask { transform: translateY(0); transition: transform .95s var(--ease) .08s; }
.reveal-ready .section-title.reveal:not(.is-in) .title-mask { transform: translateY(115%); }
.stagger-item { opacity: 1; transform: none; }
.reveal-ready .stagger-item { opacity: 0; transform: translateY(12px); filter: blur(2px); transition: opacity .95s var(--ease), transform .95s var(--ease), filter .95s var(--ease); transition-delay: var(--delay, 0s); }
.reveal-ready .reveal-group.is-in .stagger-item { opacity: 1; transform: none; filter: blur(0); }
.section-ghost-number { position: absolute; z-index: 0; top: 9%; right: 3%; pointer-events: none; user-select: none; font-size: clamp(140px, 19vw, 270px); font-weight: 200; line-height: .9; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.045); opacity: .5; transform: none; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), -webkit-text-stroke-color .6s ease; }
.service .section-ghost-number, .software .section-ghost-number, .tiers .section-ghost-number { opacity: .9; -webkit-text-stroke-color: rgba(255,255,255,.16); }
.reveal-ready .section-ghost-number { opacity: 0; transform: translateY(42px) rotate(2deg); }
.reveal-ready .reveal-group.is-in .section-ghost-number { opacity: .5; transform: none; }
.reveal-ready .service.is-in .section-ghost-number, .reveal-ready .software.is-in .section-ghost-number, .reveal-ready .tiers.is-in .section-ghost-number { opacity: .9; }
.service-list::before, .service-list::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: -26px; width: 1px; pointer-events: none; }
.service-list::before { background: rgba(255,255,255,.08); }
.service-list::after { background: rgba(235,239,247,.7); box-shadow: 0 0 12px rgba(215,225,245,.35); transform: scaleY(var(--service-charge, 0)); transform-origin: top center; }
.service-node { position: absolute; z-index: 3; top: 27px; left: -30px; display: none; width: 7px; height: 7px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: #08080b; box-shadow: 0 0 10px rgba(255,255,255,.18); transition: background .4s ease, box-shadow .4s ease; }
.service-row:nth-child(3n+1) .service-node { display: block; }
.service-row.is-lit .service-node { background: #f0f2f7; border-color: #fff; box-shadow: 0 0 18px rgba(255,255,255,.7); animation: dotpop .55s var(--ease); }
@keyframes dotpop { 0% { transform: scale(.5); } 55% { transform: scale(1.4); } 100% { transform: scale(1); } }
.reveal-ready .software-product.reveal:not(.is-in) { transform: translate3d(var(--deal-x, 0), 30px, 0) rotate(var(--deal-r, 0deg)) scale(.96); }
.software-product:first-child { --deal-x: 56px; --deal-r: 1.8deg; }
.software-product:last-child { --deal-x: -56px; --deal-r: -1.8deg; }
@media (max-width: 980px) {
  .service-row .service-node { display: none; }
  .service-row:nth-child(2n+1) .service-node { display: block; }
  .section-ghost-number { right: 2%; font-size: clamp(120px, 25vw, 210px); }
}
@media (max-width: 700px) {
  .section-ghost-number { top: 5%; font-size: 118px; -webkit-text-stroke-color: rgba(255,255,255,.032); }
  .software-product:first-child, .software-product:last-child { --deal-x: 0px; }
}
@media (max-width: 520px) {
  .service-list::before, .service-list::after, .service-row .service-node { display: none; }
}
/* DunOS hero composition: light type, quiet metadata and pointer parallax. */
.hero::after { display: none; }
.hero-inner { will-change: transform; }
.hero-eyebrow { font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: #777781; }
.hero-brand { margin-top: 4vh; }
.hero-brand-wordmark { width: auto; font-family: "Sora", sans-serif; font-size: clamp(48px, 6.4vw, 82px); font-weight: 200; line-height: 1.28; letter-spacing: .01em; color: #f2f2f5; }
.hero-title {
  margin-top: 3.2vh;
  font-family: "Sora", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: .06em;
  color: #898991;
}
.hero-title span { color: #e0e0e5; }
.hero-lede { display: flex; justify-content: center; flex-wrap: wrap; column-gap: .42em; max-width: 760px; margin-top: 3.2vh; font-size: 18px; line-height: 1.8; letter-spacing: .02em; }
.hero-lede-lead { color: #d5d5dc; font-weight: 600; }
.hero-lede-lead strong { margin-right: .12em; font: inherit; color: #f4f4f7; }
.hero-lede span + span { color: #7d7d86; }
.hero-index { margin-top: 4vh; font-size: 10px; letter-spacing: .3em; color: #696973; }
.hero-actions { display: none; }
.hero-specs { display: block; margin-top: 3.2vh; font-size: 9px; letter-spacing: .24em; color: #62626c; }
.hero-hud .mono { font-size: 10px; letter-spacing: .24em; }
.hero-foot { border-top: 0; background: transparent; }
@media (max-width: 760px) {
  .hero-eyebrow { font-size: 8px; letter-spacing: .24em; }
  .hero-title { font-size: clamp(24px, 6vw, 32px); letter-spacing: .045em; }
  .hero-lede { font-size: 16px; }
  .hero-lede span { display: block; width: 100%; }
  .hero-lede span + span { margin-top: 5px; }
  .hero-index { font-size: 8px; letter-spacing: .18em; }
  .hero-specs { margin-top: 3vh; font-size: 8px; letter-spacing: .12em; }
  .hero-hud .mono { font-size: 8px; }
}
@media (max-width: 520px) {
  .hero-brand-wordmark { width: 205px; }
  .hero-title { font-size: 25px; }
  .hero-index { font-size: 8px; letter-spacing: .16em; }
}