:root {
  --color-night: #100d1c;
  --color-night-soft: #171329;
  --color-night-raised: #201a37;
  --color-ink: #171525;
  --color-ink-soft: #625d72;
  --color-paper: #f4f1ea;
  --color-paper-raised: #fffdf8;
  --color-white: #ffffff;
  --color-accent: #7967ff;
  --color-accent-deep: #4f3fcb;
  --color-cyan: #26c6da;
  --color-gold: #d6b266;
  --color-line-dark: rgba(255, 255, 255, 0.12);
  --color-line-light: rgba(30, 25, 53, 0.12);
  --shadow-soft: 0 24px 80px rgba(18, 13, 38, 0.14);
  --shadow-glow: 0 30px 100px rgba(100, 75, 230, 0.24);
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 36px;
  --container: 1220px;
  --font-display: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --font-body: "PingFang SC", "Microsoft YaHei", sans-serif;
}

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

html, body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  color: var(--color-white);
  background: var(--color-night);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.modal-open { overflow: hidden; }

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }

::selection { color: #fff; background: var(--color-accent-deep); }

.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.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; z-index: 200; top: 12px; left: 12px; padding: 10px 16px; color: var(--color-ink); background: var(--color-paper); border-radius: 8px; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 25px;
  border: 1px solid transparent;
  border-radius: 4px 18px 4px 18px;
  font-weight: 650;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.button:hover { transform: translateY(-2px); }
.button:focus-visible, .site-nav a:focus-visible, .footer-links a:focus-visible, .footer-links button:focus-visible, .menu-toggle:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 4px; }
.button-primary { color: #fff; background: var(--color-accent); box-shadow: 0 14px 34px rgba(121, 103, 255, .28); }
.button-primary:hover { background: #8979ff; box-shadow: 0 18px 45px rgba(121, 103, 255, .38); }
.button-ghost { color: #fff; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.035); }
.button-ghost:hover { border-color: rgba(255,255,255,.52); background: rgba(255,255,255,.07); }
.button-outline { color: #fff; border-color: rgba(255,255,255,.2); }
.button-small { min-height: 42px; padding-inline: 18px; font-size: 14px; }
.button-dark { color: #fff; background: var(--color-ink); }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: 82px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: height .25s ease, background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}

.site-header.is-scrolled { height: 70px; background: rgba(16, 13, 28, .88); border-color: var(--color-line-dark); backdrop-filter: blur(18px); }
.nav-shell { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(121, 103, 255, .34)); }
.brand-copy { display: grid; line-height: 1.12; }
.brand-copy strong { font-family: var(--font-display); font-size: 20px; letter-spacing: .08em; }
.brand-copy small { margin-top: 5px; color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .13em; }
.site-nav { justify-self: center; display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); }
.site-nav a { position: relative; color: rgba(255,255,255,.66); font-size: 14px; transition: color .2s ease; }
.site-nav a::after { content: ""; position: absolute; inset: auto 0 -12px; height: 2px; background: var(--color-cyan); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.site-nav a:hover, .site-nav a[aria-current="location"] { color: #fff; }
.site-nav a[aria-current="location"]::after { transform: scaleX(1); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--color-line-dark); background: transparent; border-radius: 12px; }
.menu-toggle span:not(.sr-only) { display: block; width: 20px; height: 2px; margin: 4px auto; background: #fff; transition: transform .2s ease, opacity .2s ease; }

.hero {
  position: relative;
  min-height: 890px;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    var(--color-night);
  background-size: 72px 72px;
}

.hero::before { content: ""; position: absolute; z-index: -2; width: 720px; height: 720px; right: -190px; top: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(100, 74, 219, .32), rgba(38, 198, 218, .09) 38%, transparent 69%); filter: blur(4px); }
.hero::after { content: ""; position: absolute; z-index: -1; left: 5%; bottom: -300px; width: 700px; height: 480px; background: radial-gradient(ellipse, rgba(67, 48, 147, .2), transparent 68%); }
.hero-atmosphere { position: absolute; inset: 0; z-index: -1; opacity: .7; background-image: radial-gradient(circle at 12% 26%, rgba(255,255,255,.78) 0 1px, transparent 1.5px), radial-gradient(circle at 78% 62%, rgba(38,198,218,.8) 0 1px, transparent 1.5px), radial-gradient(circle at 58% 14%, rgba(214,178,102,.6) 0 1px, transparent 1.5px); background-size: 173px 191px, 227px 251px, 293px 271px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(480px, .95fr); gap: clamp(44px, 6vw, 92px); align-items: center; padding-top: 90px; }
.hero-copy { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--color-cyan); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow span { width: 30px; height: 1px; background: currentColor; box-shadow: 8px 0 0 -0.2px currentColor; }
.eyebrow-dark { color: var(--color-accent-deep); }
.hero h1 { max-width: 780px; margin-bottom: 26px; font-family: var(--font-display); font-size: clamp(48px, 5.45vw, 78px); line-height: 1.13; letter-spacing: -.04em; font-weight: 700; }
.hero h1 em { color: #fff; font-style: normal; text-shadow: 0 0 45px rgba(121,103,255,.35); }
.hero h1 em::after { content: ""; display: block; width: 150px; height: 5px; margin-top: 18px; background: linear-gradient(90deg, var(--color-accent), var(--color-cyan)); clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.hero-lead { max-width: 650px; margin-bottom: 34px; color: rgba(255,255,255,.68); font-size: 18px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 36px; color: rgba(255,255,255,.52); font-size: 13px; }
.hero-proof span { position: relative; padding-left: 15px; }
.hero-proof span::before { content: ""; position: absolute; left: 0; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-gold); box-shadow: 0 0 10px var(--color-gold); }

.hero-visual { position: relative; min-height: 580px; display: grid; place-items: center; }
.hero-orbit { position: relative; width: min(100%, 560px); aspect-ratio: 1; border-radius: 50%; }
.hero-orbit::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: radial-gradient(circle, rgba(121,103,255,.18), rgba(121,103,255,.03) 48%, transparent 68%); filter: blur(2px); }
.orbit-ring { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.orbit-ring::before, .orbit-ring::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--color-cyan); box-shadow: 0 0 16px var(--color-cyan); }
.orbit-ring-one { inset: 12%; animation: orbit-spin 24s linear infinite; }
.orbit-ring-one::before { top: 16%; left: 5%; }.orbit-ring-one::after { bottom: 9%; right: 16%; background: var(--color-gold); box-shadow: 0 0 16px var(--color-gold); }
.orbit-ring-two { inset: 26%; border-style: dashed; animation: orbit-spin-reverse 18s linear infinite; }
.orbit-ring-two::before { top: -4px; left: 48%; }.orbit-ring-two::after { bottom: -4px; left: 48%; }
.orbit-core { position: absolute; z-index: 2; inset: 35%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; text-align: center; background: rgba(28, 21, 55, .88); box-shadow: inset 0 0 35px rgba(121,103,255,.2), 0 0 65px rgba(121,103,255,.22); backdrop-filter: blur(12px); }
.orbit-core > span { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 10px; color: #fff; font-size: 17px; font-weight: 800; border-radius: 13px; background: var(--color-accent); transform: rotate(7deg); }
.orbit-core strong { max-width: 110px; font-family: var(--font-display); font-size: 16px; line-height: 1.3; }
.orbit-core small { margin-top: 8px; color: rgba(255,255,255,.48); font-size: 9px; }
.orbit-node { position: absolute; z-index: 3; min-width: 112px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.13); background: rgba(24,20,42,.9); box-shadow: 0 14px 34px rgba(0,0,0,.2); backdrop-filter: blur(10px); }
.orbit-node span { display: block; color: var(--color-cyan); font-size: 9px; letter-spacing: .18em; }
.orbit-node strong { display: block; margin-top: 2px; font-size: 13px; }
.node-assess { left: 2%; top: 25%; border-radius: 4px 18px 4px 18px; }.node-graph { right: 1%; top: 19%; border-radius: 18px 4px 18px 4px; }.node-task { right: -3%; bottom: 24%; border-radius: 4px 18px 4px 18px; }.node-practice { left: 5%; bottom: 14%; border-radius: 18px 4px 18px 4px; }.node-report { left: 40%; bottom: 0; border-radius: 4px 18px 4px 18px; }
.visual-caption { position: absolute; right: 7%; bottom: -10px; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.45); font-size: 11px; letter-spacing: .08em; }
.visual-caption span { width: 32px; height: 1px; background: var(--color-gold); }

.value-strip { position: relative; z-index: 3; border-block: 1px solid var(--color-line-dark); background: #141020; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.value-item { position: relative; min-height: 170px; padding: 38px 30px; border-right: 1px solid var(--color-line-dark); }
.value-item:first-child { border-left: 1px solid var(--color-line-dark); }
.value-index { position: absolute; right: 20px; top: 16px; color: rgba(255,255,255,.08); font-family: var(--font-display); font-size: 50px; }
.value-item strong { display: block; margin-bottom: 6px; color: #fff; font-family: var(--font-display); font-size: 28px; letter-spacing: .08em; }
.value-item p { margin: 0; color: rgba(255,255,255,.48); font-size: 13px; }

.section { position: relative; padding: 120px 0; }
.section-light, .section-paper { color: var(--color-ink); background: var(--color-paper); }
.section-paper { background: #eae6de; }
.section-heading { max-width: 710px; margin-bottom: 66px; }
.section-heading-center { margin-inline: auto; text-align: center; }
.section-heading-center .eyebrow { justify-content: center; }
.section-heading h2, .technology h2, .hardware h2, .final-cta h2 { margin-bottom: 20px; font-family: var(--font-display); font-size: clamp(38px, 4.5vw, 62px); line-height: 1.18; letter-spacing: -.03em; }
.section-heading > p:last-child { max-width: 610px; margin-bottom: 0; color: var(--color-ink-soft); font-size: 17px; }
.section-heading-center > p:last-child { margin-inline: auto; }

.advantage-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: 26px; align-items: stretch; }
.advantage-lead { position: relative; min-height: 520px; padding: clamp(34px, 5vw, 68px); color: #fff; overflow: hidden; border-radius: var(--radius-lg) 8px var(--radius-lg) 8px; background: var(--color-ink); box-shadow: var(--shadow-soft); }
.advantage-lead::before { content: ""; position: absolute; right: -130px; bottom: -150px; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,255,255,.02), 0 0 0 96px rgba(255,255,255,.015); }
.advantage-lead::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: linear-gradient(90deg, var(--color-accent), var(--color-cyan), var(--color-gold)); }
.advantage-number { color: var(--color-cyan); font-size: 12px; letter-spacing: .2em; }
.advantage-lead h3 { max-width: 520px; margin: 90px 0 22px; font-family: var(--font-display); font-size: clamp(30px, 3vw, 44px); line-height: 1.28; }
.advantage-lead > p { max-width: 560px; color: rgba(255,255,255,.62); font-size: 16px; }
.mini-flow { position: absolute; z-index: 1; left: clamp(34px, 5vw, 68px); right: clamp(34px, 5vw, 68px); bottom: 62px; display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.62); font-size: 11px; }
.mini-flow i { flex: 1; height: 1px; background: rgba(255,255,255,.18); }
.advantage-stack { display: grid; gap: 18px; }
.advantage-card { position: relative; min-height: 155px; padding: 28px 32px 28px 88px; border: 1px solid var(--color-line-light); background: rgba(255,255,255,.48); }
.advantage-card:nth-child(1) { border-radius: 8px var(--radius-md) 8px 8px; }.advantage-card:nth-child(3) { border-radius: 8px 8px var(--radius-md) 8px; }
.card-mark { position: absolute; left: 28px; top: 30px; display: grid; place-items: center; width: 38px; height: 38px; color: var(--color-accent-deep); border: 1px solid rgba(79,63,203,.26); font-family: var(--font-display); font-weight: 700; transform: rotate(-4deg); }
.advantage-card h3 { margin-bottom: 7px; font-size: 20px; }
.advantage-card p { margin: 0; color: var(--color-ink-soft); font-size: 14px; }

.learning-loop { overflow: hidden; background: #141020; }
.learning-loop::before { content: ""; position: absolute; inset: 0; opacity: .3; background: radial-gradient(circle at 50% 43%, rgba(121,103,255,.24), transparent 34%); }
.learning-loop .section-heading > p:last-child { color: rgba(255,255,255,.55); }
.loop-map { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding-top: 54px; }
.loop-track { position: absolute; left: 9%; right: 9%; top: 113px; height: 1px; background: rgba(255,255,255,.13); }
.loop-track::before { content: ""; position: absolute; inset: -1px auto -1px 0; width: 20%; background: linear-gradient(90deg, transparent, var(--color-cyan), transparent); animation: data-flow 5s ease-in-out infinite; }
.loop-step { position: relative; z-index: 1; min-height: 240px; padding: 22px 18px; text-align: center; border: 1px solid transparent; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.loop-step:hover { transform: translateY(-8px); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.025); }
.step-no { color: rgba(255,255,255,.25); font-size: 10px; letter-spacing: .18em; }
.step-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 25px auto 22px; color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: var(--color-night-raised); box-shadow: 0 0 0 8px #141020, 0 0 0 9px rgba(255,255,255,.08); font-family: var(--font-display); font-size: 24px; }
.loop-step:nth-child(3) .step-icon, .loop-step:nth-child(5) .step-icon { color: var(--color-cyan); }.loop-step:nth-child(4) .step-icon, .loop-step:nth-child(6) .step-icon { color: #b7abff; }.loop-step:nth-child(2) .step-icon { color: var(--color-gold); }
.loop-step h3 { margin-bottom: 5px; font-size: 18px; }.loop-step p { margin: 0; color: rgba(255,255,255,.43); font-size: 12px; }

.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.feature-card { min-height: 590px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid rgba(31,26,51,.11); border-radius: 8px var(--radius-lg) 8px var(--radius-lg); background: var(--color-paper-raised); box-shadow: 0 20px 50px rgba(38,30,63,.07); }
.feature-wide { grid-column: 1 / -1; min-height: 490px; grid-template-columns: .78fr 1.22fr; grid-template-rows: 1fr; }
.feature-reverse { grid-template-columns: 1.05fr .95fr; }
.feature-reverse .feature-copy { order: 2; }.feature-reverse .feature-visual { order: 1; }
.feature-copy { position: relative; z-index: 2; padding: clamp(28px, 4vw, 52px); }
.feature-tag { color: var(--color-accent-deep); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.feature-copy h3 { margin: 18px 0 14px; font-family: var(--font-display); font-size: clamp(27px, 3vw, 39px); line-height: 1.18; }
.feature-copy p { margin-bottom: 0; color: var(--color-ink-soft); font-size: 15px; }
.feature-copy ul { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 0; padding: 0; list-style: none; }
.feature-copy li { padding: 7px 11px; color: #514a61; border: 1px solid rgba(31,26,51,.1); border-radius: 999px; background: rgba(255,255,255,.58); font-size: 11px; }
.feature-visual { min-height: 290px; display: grid; place-items: center; padding: 24px 30px 30px; overflow: hidden; background: #e3ded4; }
.feature-wide .feature-visual { min-height: 100%; padding: 36px; }
.feature-visual svg { width: 100%; max-height: 360px; overflow: visible; }
.feature-card:nth-child(2) .feature-visual { background: #dfe9e6; }.feature-card:nth-child(3) .feature-visual { background: #e5dfed; }.feature-card:nth-child(4) .feature-visual { background: #dcd9e8; }.feature-card:nth-child(5) .feature-visual { background: #e7e1d7; }.feature-card:nth-child(6) .feature-visual { background: #dce5ed; }

/* SVG illustration system */
.feature-visual text { fill: #29243a; font-family: var(--font-body); font-size: 13px; }.feature-visual path, .feature-visual circle, .feature-visual rect { vector-effect: non-scaling-stroke; }
.route-shadow { fill: none; stroke: rgba(79,63,203,.12); stroke-width: 18; stroke-linecap: round; }.route-line { fill: none; stroke: url(#route-line); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 10; animation: route-dash 12s linear infinite; }.route-stop circle:first-child { fill: #fffdf8; stroke: #7967ff; stroke-width: 2; }.route-stop circle:nth-child(2) { fill: #7967ff; }.route-stop text { font-size: 12px; font-weight: 650; }.stop-four circle { fill: #201a37 !important; stroke: #26c6da !important; }.stop-four path { fill: none; stroke: #26c6da; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.ability-card rect { fill: rgba(255,255,255,.7); stroke: rgba(31,26,51,.12); }.ability-card text { font-size: 10px; fill: #686075; }.ability-card .ability-score { font-size: 10px; font-weight: 750; fill: #4f3fcb; }.signal path { fill: none; stroke: #26aabe; stroke-width: 2; }.signal text { fill: #47737b; font-size: 11px; }
.graph-lines path { fill: none; stroke: rgba(30,50,54,.2); stroke-width: 2; }.graph-node circle { fill: rgba(255,255,255,.72); stroke: #5a827b; stroke-width: 1.5; }.graph-node text { text-anchor: middle; font-size: 11px; font-weight: 650; }.node-master circle { fill: #202d31; stroke: #26c6aa; }.node-master text { fill: #fff; }.graph-pulse { fill: none; stroke: rgba(38,198,170,.45); stroke-width: 2; stroke-dasharray: 4 8; transform-origin: 244px 121px; animation: pulse-ring 4s ease-in-out infinite; }
.quiz-card > rect { fill: rgba(255,255,255,.72); stroke: rgba(49,38,70,.12); }.quiz-card text { font-size: 12px; font-weight: 650; }.quiz-card > rect:not(:first-child) { fill: #c5bdcf; stroke: none; }.option path { stroke: #8e839b; stroke-width: 5; stroke-linecap: round; }.option circle { fill: none; stroke: #7967ff; stroke-width: 1.5; }.difficulty-chart > path:first-of-type { fill: none; stroke: #aaa0b9; stroke-width: 1; }.difficulty-chart path:nth-of-type(2) { fill: rgba(121,103,255,.15); stroke: #7967ff; stroke-width: 1.5; }.difficulty-chart text { font-weight: 650; }.chart-arrow { fill: none !important; stroke: #7967ff !important; stroke-width: 3 !important; }.difficulty-chart circle { fill: #26c6da; stroke: #fff; stroke-width: 3; }.level-pill rect { fill: #201a37; }.level-pill text { fill: #fff; text-anchor: middle; font-size: 11px; }
.context-stack rect { fill: rgba(255,255,255,.72); stroke: rgba(31,26,51,.12); }.context-stack circle { fill: #7967ff; }.context-stack text { font-size: 10px; }.context-stack text:nth-of-type(even) { font-size: 12px; font-weight: 650; }.context-flow { fill: none; stroke: #7967ff; stroke-width: 2; stroke-dasharray: 5 6; }.context-flow.second { stroke: #26aabe; }.assistant-panel > rect:first-child { fill: #201a37; stroke: #7967ff; stroke-width: 1.5; }.assistant-panel circle { fill: #7967ff; }.assistant-panel path { stroke: #fff; stroke-width: 2; }.assistant-panel > text { fill: #fff; text-anchor: middle; font-size: 12px; font-weight: 650; }.assistant-panel rect:nth-of-type(2) { fill: rgba(255,255,255,.11); }.assistant-panel rect:nth-of-type(3) { fill: #26aabe; }.assistant-panel rect + path { stroke: rgba(255,255,255,.45); }.assistant-panel text:last-child { font-size: 9px; }
.phone > rect:first-child { fill: #211d30; stroke: #675f77; stroke-width: 2; }.phone rect:nth-child(2) { fill: #fffdf8; }.phone path { stroke: #837a91; stroke-width: 4; stroke-linecap: round; }.phone circle { fill: #625a6d; }.scan > path:first-child, .scan path { fill: none; stroke: #7967ff; stroke-width: 2; stroke-linecap: round; }.scan .scan-line { stroke: #26c6da; stroke-width: 2; filter: drop-shadow(0 0 4px #26c6da); animation: scan-move 3.2s ease-in-out infinite; }.scan text { font-family: var(--font-display); font-size: 20px; font-style: italic; }.upload-path { fill: none; stroke: #7967ff; stroke-width: 2; stroke-dasharray: 5 7; }.analysis-card > rect:first-child { fill: rgba(255,255,255,.72); stroke: rgba(31,26,51,.12); }.analysis-card circle { fill: #243a3e; }.analysis-card path { fill: none; stroke: #26c6aa; stroke-width: 3; }.analysis-card text { text-anchor: middle; font-size: 10px; font-weight: 650; }.analysis-card rect:not(:first-child) { fill: #bcb4c7; stroke: none; }.analysis-card rect:last-of-type { fill: #7967ff; }.analysis-card text:last-child { fill: #fff; font-size: 9px; }
.report-card > rect { fill: rgba(255,255,255,.72); stroke: rgba(31,26,51,.12); }.report-card > text { font-weight: 700; }.report-meta rect { fill: #e7e2d9; }.report-meta text { font-size: 8px; }.report-meta text:nth-of-type(even) { font-size: 12px; font-weight: 700; fill: #4f3fcb; }.trend > path:first-child { fill: none; stroke: #b3aabf; }.trend path:nth-child(2) { fill: none; stroke: #7967ff; stroke-width: 3; }.trend-fill { fill: rgba(121,103,255,.1) !important; stroke: none !important; }.trend circle { fill: #fff; stroke: #7967ff; stroke-width: 2; }.growth-badge circle { fill: #202b42; }.growth-badge text { fill: #fff; text-anchor: middle; font-size: 9px; }

.technology { overflow: hidden; background: var(--color-night); }
.technology::after { content: ""; position: absolute; inset: 0 0 0 53%; opacity: .34; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, transparent, #000 24%); }
.technology-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(55px, 7vw, 110px); align-items: center; }
.technology-copy > p:nth-of-type(2) { max-width: 580px; color: rgba(255,255,255,.58); font-size: 16px; }
.tech-points { display: grid; gap: 20px; margin-top: 45px; }
.tech-points > div { display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; }
.tech-points span { color: var(--color-cyan); font-family: var(--font-display); font-size: 11px; }
.tech-points p { margin: 0; color: rgba(255,255,255,.48); font-size: 13px; }.tech-points strong { display: block; margin-bottom: 2px; color: #fff; font-size: 15px; }
.architecture-visual { position: relative; min-height: 580px; padding: 74px 55px 38px 92px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px 42px 4px 42px; background: rgba(255,255,255,.025); box-shadow: inset 0 0 80px rgba(121,103,255,.06); }
.architecture-head { position: absolute; top: 28px; left: 34px; right: 34px; display: flex; align-items: center; gap: 15px; color: rgba(255,255,255,.35); font-size: 9px; letter-spacing: .18em; }.architecture-head i { flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.architecture-layer { position: relative; z-index: 2; min-height: 95px; display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 16px; padding: 20px 24px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(16,13,28,.76); box-shadow: 0 14px 32px rgba(0,0,0,.18); transition: transform .25s ease, border-color .25s ease; }
.architecture-layer:hover { transform: translateX(-8px); border-color: rgba(38,198,218,.42); }
.architecture-layer > span { color: var(--color-cyan); font-size: 11px; letter-spacing: .12em; }.architecture-layer strong { font-size: 16px; }.architecture-layer small { color: rgba(255,255,255,.38); font-size: 10px; }
.layer-interface { border-radius: 4px 20px 4px 4px; }.layer-ai { margin-left: 18px; }.layer-data { margin-left: 36px; }.layer-cloud { margin-left: 54px; border-radius: 4px 4px 20px 4px; }
.architecture-visual > svg { position: absolute; left: 10px; top: 82px; width: 82px; height: 430px; }.architecture-visual > svg path { stroke: rgba(255,255,255,.15); stroke-width: 1; }.architecture-visual > svg circle { fill: var(--color-night); stroke: var(--color-cyan); stroke-width: 2; }

.hardware { color: var(--color-ink); background: #ded9cf; }
.hardware-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(50px, 7vw, 100px); align-items: center; }
.hardware-copy .eyebrow { color: var(--color-accent-deep); }.hardware-copy > p:nth-of-type(2) { color: var(--color-ink-soft); font-size: 16px; }
.hardware-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 38px; }
.hardware-points article { padding: 20px; border-top: 1px solid rgba(31,26,51,.25); background: rgba(255,255,255,.22); }.hardware-points span { font-weight: 750; font-size: 14px; }.hardware-points p { margin: 6px 0 0; color: var(--color-ink-soft); font-size: 12px; }
.hardware-visual { min-height: 610px; display: grid; place-items: center; }
.hardware-scene { position: relative; width: min(100%, 570px); height: 550px; }
.network-cloud { position: absolute; top: 2px; left: 50%; width: 176px; padding: 15px 18px; text-align: center; border: 1px solid rgba(31,26,51,.13); border-radius: 60px; background: rgba(255,255,255,.44); transform: translateX(-50%); }.network-cloud > span { position: absolute; left: 24px; top: 18px; color: var(--color-accent-deep); font-size: 24px; }.network-cloud strong, .network-cloud small { display: block; }.network-cloud strong { font-size: 13px; }.network-cloud small { color: var(--color-ink-soft); font-size: 9px; }
.network-line { position: absolute; left: 50%; width: 1px; background: rgba(31,26,51,.19); }.line-cloud { top: 76px; height: 82px; }.line-local { top: 368px; height: 65px; }.network-line i { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--color-cyan); box-shadow: 0 0 10px var(--color-cyan); animation: packet-down 2.8s linear infinite; }
.device-box { position: absolute; left: 50%; top: 156px; width: 370px; height: 214px; padding: 33px 34px; border: 1px solid rgba(255,255,255,.15); border-radius: 18px 18px 34px 18px; color: #fff; background: #1b1826; box-shadow: 0 32px 65px rgba(33,25,50,.28), inset 0 1px rgba(255,255,255,.1); transform: translateX(-50%) perspective(900px) rotateX(4deg); }
.device-box::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.055); border-radius: 11px 11px 27px 11px; pointer-events: none; }.device-box::after { content: ""; position: absolute; left: 50px; right: 50px; bottom: -18px; height: 24px; background: rgba(31,24,46,.32); filter: blur(14px); }
.device-top { display: flex; align-items: center; gap: 18px; }.device-logo { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--color-gold); font-family: var(--font-display); font-size: 25px; background: #252033; box-shadow: 0 0 22px rgba(214,178,102,.13); }.device-top div { display: grid; }.device-top strong { letter-spacing: .14em; font-size: 13px; }.device-top small { margin-top: 3px; color: rgba(255,255,255,.38); font-size: 9px; letter-spacing: .1em; }
.device-lights { display: flex; align-items: center; gap: 8px; margin-top: 38px; }.device-lights i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-cyan); box-shadow: 0 0 10px var(--color-cyan); }.device-lights i:nth-child(2) { background: var(--color-gold); box-shadow: 0 0 10px var(--color-gold); }.device-lights i:nth-child(3) { background: #6ce09a; box-shadow: 0 0 10px #6ce09a; }.device-lights span { margin-left: 6px; color: rgba(255,255,255,.38); font-size: 8px; letter-spacing: .18em; }
.device-ports { position: absolute; right: 34px; bottom: 34px; display: flex; gap: 9px; }.device-ports i { width: 24px; height: 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; }
.local-devices { position: absolute; left: 50%; bottom: 22px; display: flex; gap: 16px; transform: translateX(-50%); }.local-devices > div { min-width: 128px; padding: 14px 17px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(31,26,51,.12); background: rgba(255,255,255,.38); }.local-devices span { color: var(--color-accent-deep); font-size: 20px; }.local-devices strong { font-size: 11px; }
.hardware-status { position: absolute; right: -10px; top: 152px; display: grid; gap: 9px; }.hardware-status span { padding: 8px 11px; color: #575063; border: 1px solid rgba(31,26,51,.1); background: rgba(255,255,255,.52); font-size: 9px; }.hardware-status i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #32a87d; }

.cooperation { padding-bottom: 0; }
.cooperation-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0 0 100px; list-style: none; counter-reset: steps; }
.cooperation-steps li { min-height: 210px; padding: 30px; border-top: 1px solid var(--color-line-light); border-right: 1px solid var(--color-line-light); }.cooperation-steps li:first-child { border-left: 1px solid var(--color-line-light); }.cooperation-steps span { color: var(--color-accent-deep); font-family: var(--font-display); font-size: 12px; }.cooperation-steps h3 { margin: 48px 0 7px; font-family: var(--font-display); font-size: 23px; }.cooperation-steps p { margin: 0; color: var(--color-ink-soft); font-size: 12px; }
.final-cta { position: relative; min-height: 390px; display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 70px clamp(36px, 6vw, 85px); color: #fff; overflow: hidden; border-radius: 8px 48px 0 0; background: #171328; }
.final-cta::before { content: ""; position: absolute; right: -90px; top: -150px; width: 460px; height: 460px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.016); }
.final-cta > * { position: relative; z-index: 1; }.final-cta h2 { margin-bottom: 0; font-size: clamp(34px, 4vw, 54px); }.final-actions { display: grid; gap: 12px; min-width: 240px; }

.site-footer { padding: 58px 0 26px; background: #0b0912; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; padding-bottom: 35px; }
.footer-brand { display: flex; align-items: center; gap: 13px; }.footer-brand img { width: 48px; height: 48px; }.footer-brand div { display: grid; }.footer-brand strong { font-family: var(--font-display); font-size: 19px; }.footer-brand span { color: rgba(255,255,255,.35); font-size: 10px; letter-spacing: .1em; }
.footer-grid > p { margin: 0; color: rgba(255,255,255,.38); font-size: 12px; }.footer-links { display: flex; gap: 20px; }.footer-links a, .footer-links button { padding: 0; color: rgba(255,255,255,.55); border: 0; background: transparent; font-size: 12px; cursor: pointer; }.footer-links a:hover, .footer-links button:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; color: rgba(255,255,255,.24); border-top: 1px solid rgba(255,255,255,.07); font-size: 10px; }

.modal[hidden] { display: none; }
.modal { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 24px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(7,5,13,.82); backdrop-filter: blur(10px); }
.modal-panel { position: relative; width: min(100%, 560px); padding: 48px; color: var(--color-ink); border-radius: 8px 36px 8px 36px; background: var(--color-paper-raised); box-shadow: 0 40px 120px rgba(0,0,0,.42); animation: modal-in .28s ease both; }
.modal-panel h2 { margin-bottom: 12px; font-family: var(--font-display); font-size: 36px; }.modal-panel > p:not(.eyebrow) { color: var(--color-ink-soft); font-size: 14px; }.modal-close { position: absolute; right: 20px; top: 18px; width: 38px; height: 38px; color: var(--color-ink); border: 1px solid var(--color-line-light); border-radius: 50%; background: transparent; font-size: 24px; cursor: pointer; }.modal-close:hover { color: #fff; background: var(--color-ink); }
.contact-placeholder { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; margin: 30px 0; padding: 24px; background: #ece8df; }.qr-placeholder { aspect-ratio: 1; display: grid; place-items: center; text-align: center; border: 1px dashed rgba(31,26,51,.3); background: repeating-linear-gradient(45deg, rgba(31,26,51,.025) 0 8px, transparent 8px 16px); }.qr-placeholder span { display: block; color: var(--color-accent-deep); font-family: var(--font-display); font-size: 28px; }.qr-placeholder small { display: block; color: var(--color-ink-soft); font-size: 10px; line-height: 1.4; }.contact-placeholder dl { margin: 0; }.contact-placeholder dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--color-line-light); }.contact-placeholder dt { color: var(--color-ink-soft); font-size: 12px; }.contact-placeholder dd { margin: 0; font-weight: 650; font-size: 13px; }.modal-done { width: 100%; }

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js section:target .reveal { opacity: 1; transform: none; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes data-flow { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 80%; opacity: 0; } }
@keyframes route-dash { to { stroke-dashoffset: -180; } }
@keyframes pulse-ring { 0%,100% { opacity: .35; transform: scale(.95); } 50% { opacity: .8; transform: scale(1.06); } }
@keyframes scan-move { 0%,100% { transform: translateY(-40px); opacity: .45; } 50% { transform: translateY(40px); opacity: 1; } }
@keyframes packet-down { from { transform: translateY(0); } to { transform: translateY(76px); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 1080px) {
  .nav-shell { gap: 16px; }
  .site-nav { gap: 15px; }.site-nav a { font-size: 12px; }
  .hero-grid { grid-template-columns: 1fr 440px; gap: 28px; }.hero h1 { font-size: clamp(45px, 5.4vw, 64px); }.hero-visual { min-height: 520px; }
  .feature-wide { grid-template-columns: .9fr 1.1fr; }
  .technology-grid { gap: 48px; }.architecture-visual { padding-right: 30px; }.architecture-layer { grid-template-columns: 78px 1fr; }.architecture-layer small { display: none; }
  .hardware-grid { gap: 30px; }.hardware-status { right: 0; }
}

@media (max-width: 900px) {
  .site-header { height: 70px; background: rgba(16,13,28,.92); backdrop-filter: blur(16px); }
  .nav-shell { grid-template-columns: 1fr auto auto; }
  .menu-toggle { display: block; order: 2; }.nav-platform { order: 3; }
  .site-nav { position: absolute; left: 24px; right: 24px; top: 64px; display: grid; gap: 0; padding: 12px; border: 1px solid var(--color-line-dark); border-radius: 14px; background: rgba(20,16,32,.98); box-shadow: 0 22px 50px rgba(0,0,0,.32); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }.site-nav a { padding: 13px 14px; font-size: 14px; }.site-nav a::after { display: none; }
  .menu-toggle[aria-expanded="true"] span:nth-of-type(1) { transform: translateY(6px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-of-type(2) { opacity: 0; }.menu-toggle[aria-expanded="true"] span:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); }
  .hero { min-height: auto; padding: 145px 0 90px; }.hero-grid { grid-template-columns: 1fr; }.hero-copy { max-width: 720px; }.hero-visual { width: min(620px, 100%); min-height: 570px; margin-inline: auto; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }.value-item:nth-child(3) { border-left: 1px solid var(--color-line-dark); }.value-item:nth-child(-n+2) { border-bottom: 1px solid var(--color-line-dark); }
  .advantage-layout, .technology-grid { grid-template-columns: 1fr; }.hardware-grid { grid-template-columns: minmax(0, 1fr); }.advantage-lead { min-height: 470px; }.architecture-visual { width: min(680px, 100%); margin-inline: auto; }.hardware-copy { order: 1; }.hardware-visual { order: 2; min-width: 0; width: 100%; }
  .loop-map { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }.loop-track { display: none; }
  .feature-list { grid-template-columns: 1fr; }.feature-wide { grid-column: auto; min-height: 620px; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }.feature-reverse .feature-copy { order: 1; }.feature-reverse .feature-visual { order: 2; }.feature-card { min-height: 620px; }.feature-visual, .feature-wide .feature-visual { min-height: 330px; padding: 28px; }
  .cooperation-steps { grid-template-columns: repeat(2, 1fr); }.cooperation-steps li:nth-child(3) { border-left: 1px solid var(--color-line-light); }.cooperation-steps li:nth-child(-n+2) { border-bottom: 1px solid var(--color-line-light); }
  .final-cta { align-items: flex-start; flex-direction: column; }.final-actions { width: min(100%, 380px); }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  .nav-shell { grid-template-columns: minmax(0, 1fr); }
  .menu-toggle, .site-nav, .nav-platform { display: none; }
  .brand-copy small { display: none; }.brand img { width: 39px; height: 39px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 125px; }.hero h1 { font-size: clamp(38px, 10vw, 52px); }.hero-lead { max-width: 100%; font-size: 16px; overflow-wrap: anywhere; }.hero-actions { width: 100%; align-items: stretch; flex-direction: column; }.hero-actions .button { width: 100%; }.hero-proof { gap: 12px 20px; }
  .hero-visual { min-height: 430px; }.hero-orbit { width: 420px; max-width: 100%; }.orbit-node { min-width: 96px; padding: 9px 11px; }.orbit-node strong { font-size: 11px; }.node-task { right: 0; }.node-report { left: 36%; }.visual-caption { display: none; }
  .value-item { min-height: 140px; padding: 28px 20px; }.value-item strong { font-size: 23px; }.value-index { font-size: 38px; }
  .section { padding: 86px 0; }.section-heading { margin-bottom: 44px; }.section-heading h2, .technology h2, .hardware h2, .final-cta h2 { font-size: clamp(34px, 10vw, 49px); }
  .advantage-lead { min-height: 490px; padding: 32px; }.advantage-lead h3 { margin-top: 70px; }.mini-flow { left: 32px; right: 32px; bottom: 40px; flex-wrap: wrap; }.mini-flow i { min-width: 24px; }.advantage-card { padding: 26px 24px 26px 76px; }.card-mark { left: 22px; }
  .loop-map { grid-template-columns: 1fr; gap: 0; padding: 10px 0 0 56px; }.loop-map::before { content: ""; position: absolute; left: 34px; top: 62px; bottom: 60px; width: 1px; background: rgba(255,255,255,.15); }.loop-step { min-height: 115px; display: grid; grid-template-columns: 70px 1fr; grid-template-rows: auto auto; align-items: center; padding: 12px 0; text-align: left; }.step-no { position: absolute; left: -48px; }.step-icon { grid-row: 1/3; width: 54px; height: 54px; margin: 0; font-size: 19px; box-shadow: 0 0 0 5px #141020, 0 0 0 6px rgba(255,255,255,.08); }.loop-step h3 { align-self: end; margin: 0; }.loop-step p { align-self: start; }
  .feature-card, .feature-wide { min-height: 560px; }.feature-copy { padding: 28px; }.feature-visual, .feature-wide .feature-visual { min-height: 280px; padding: 20px; }
  .technology-grid { gap: 48px; }.architecture-visual { min-height: 510px; padding: 70px 18px 24px 55px; }.architecture-layer { min-height: 86px; grid-template-columns: 1fr; gap: 2px; padding: 14px 16px; }.architecture-layer > span { font-size: 9px; }.architecture-layer strong { font-size: 13px; }.layer-ai { margin-left: 10px; }.layer-data { margin-left: 20px; }.layer-cloud { margin-left: 30px; }.architecture-visual > svg { left: -5px; width: 62px; }
  .hardware-points { grid-template-columns: 1fr; }.hardware-visual { min-height: 530px; }.hardware-scene { transform: scale(.86); transform-origin: center top; }.hardware-status { right: 10px; }.device-box { width: 340px; }
  .cooperation-steps { grid-template-columns: 1fr; padding-bottom: 70px; }.cooperation-steps li, .cooperation-steps li:nth-child(3) { min-height: 160px; border-left: 1px solid var(--color-line-light); border-bottom: 1px solid var(--color-line-light); }.cooperation-steps h3 { margin-top: 26px; }.final-cta { min-height: 450px; padding: 46px 28px; border-radius: 8px 32px 0 0; }
  .footer-grid { grid-template-columns: 1fr; }.footer-links { flex-wrap: wrap; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 7px; }
  .modal-panel { padding: 38px 24px 26px; }.contact-placeholder { grid-template-columns: 112px 1fr; gap: 17px; padding: 16px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 38px; line-height: 1.16; }
  .hero-visual { min-height: 340px; }.hero-orbit { width: min(300px, calc(100% - 20px)); }.orbit-node { min-width: 82px; padding: 7px 9px; }.orbit-node span { display: none; }.orbit-node strong { font-size: 10px; }.node-assess { left: 0; }.node-graph { right: 0; }.node-practice { left: 0; }.node-report { left: 34%; bottom: 0; }.orbit-core { inset: 32%; }.orbit-core > span { width: 38px; height: 38px; margin-bottom: 6px; font-size: 14px; }.orbit-core strong { font-size: 13px; }.orbit-core small { display: none; }
  .value-grid { grid-template-columns: 1fr; }.value-item, .value-item:nth-child(3) { border-left: 1px solid var(--color-line-dark); border-bottom: 1px solid var(--color-line-dark); }.value-item:last-child { border-bottom: 0; }
  .feature-card, .feature-wide { min-height: 510px; }.feature-copy h3 { font-size: 29px; }.feature-visual, .feature-wide .feature-visual { min-height: 245px; padding: 12px; }
  .hardware-visual { position: relative; overflow: hidden; }.hardware-scene { --hardware-scale: .68; position: absolute; left: 50%; top: 50%; width: 470px; transform: translate(-50%, -50%) scale(var(--hardware-scale)); transform-origin: center; }.hardware-status { right: 18px; }
  .contact-placeholder { grid-template-columns: 1fr; }.qr-placeholder { width: 128px; margin-inline: auto; }
}

@media (max-width: 360px) {
  .hardware-scene { --hardware-scale: .60; }
}

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