@font-face {
  font-family: "AIIOQ Sans";
  src: url("assets/fonts/aiioq-sans-sc.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #08090b; --surface: #111317; --text: #f2f3f5;
  --muted: #a2a7b0; --accent: #dcba91; --line: #2b2e35;
  --sans: "AIIOQ Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 100px }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased }
button, select { font: inherit }
button, a { -webkit-tap-highlight-color: transparent }
button { cursor: pointer; color: inherit }
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100%; height: auto }
h1, h2, h3, p, figure { margin: 0 }
[hidden] { display: none !important }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px }
.container { width: min(1160px, calc(100% - 80px)); margin-inline: auto }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 40; background: var(--text); color: #111; padding: 12px }
.skip-link:focus { top: 8px }
.site-header { height: 76px; position: sticky; top: 0; z-index: 20; background: #08090bd9; backdrop-filter: blur(20px); border-bottom: 1px solid #ffffff0b }
.navigation { max-width: 1440px; margin: auto; height: 76px; padding-inline: 40px; display: flex; align-items: center; gap: 28px }
.brand { display: inline-flex; align-items: center; flex-shrink: 0 }
.brand img { width: 108px; height: auto }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 13px; color: #c4c7ce }
.desktop-nav button, .footer button, #mobile-nav button { background: none; border: 0; padding: 0; color: inherit; text-align: left }
.desktop-nav button { font-size: inherit }
.desktop-nav a, .desktop-nav button { padding-block: 12px }
.nav-actions { display: flex; align-items: center; gap: 10px }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; border: 1px solid #ffffffb0; border-radius: 100px; background: #f1f2f4; color: #14161b; font-size: 14px; font-weight: 500; min-height: 48px; padding: 11px 25px; line-height: 1.5; box-shadow: inset 0 2px 1px #fff, 0 4px 20px #0003; transition: background .2s, transform .2s var(--ease) }
.button.compact { font-size: 12px; min-height: 38px; padding: 8px 20px }
.button:active, .text-action:active { transform: scale(.97) }
.text-action { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 4px; min-height: 44px; border: 0; background: none; color: #d3d5da; font-size: 14px; line-height: 1.5; transition: color .2s, transform .2s var(--ease) }
.text-action span { color: var(--accent); transition: transform .2s var(--ease) }
.menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 100px; padding: 8px 13px; min-height: 44px; font-size: 12px }
#mobile-nav { background: #111317; padding: 12px 24px 20px; border-bottom: 1px solid var(--line) }
#mobile-nav a, #mobile-nav button { display: block; padding: 12px 0; width: 100%; font-size: 14px }
.hero { position: relative; min-height: 710px; text-align: center; overflow: clip; background: radial-gradient(ellipse at 50% 90%, #23252644, transparent 65%) }
.hero-copy { position: relative; z-index: 2; padding: 74px 24px 0 }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; color: #b9bdc5; font-size: 12px; letter-spacing: .06em; line-height: 24px }
.signal { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px #e3bb7180 }
h1 { font-size: clamp(44px, 5.8vw, 82px); font-weight: 500; line-height: 1.18; letter-spacing: -.045em; margin: 25px auto 0; text-wrap: balance }
h1>span { display: block }
.headline-metal { background: linear-gradient(110deg,#c1c5cd 8%,#f5f3ed 33%,#dfc3a1 60%,#b3b7c2 92%); color: transparent; background-clip: text; -webkit-background-clip: text }
.hero-description { font-size: 17px; font-weight: 400; line-height: 1.85; color: #a7abb4; margin-top: 26px; letter-spacing: .005em }
.hero-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 30px }
.availability { font-size: 11px; letter-spacing: .035em; color: #9297a2; margin-top: 19px }
#hero-ribbon { position: absolute; left: 0; bottom: -20px; width: 100%; height: 350px; pointer-events: none; opacity: .85 }
.motion-control { position: absolute; right: 40px; bottom: 116px; z-index: 3; border: 1px solid #ffffff22; background: #13161aa6; border-radius: 100px; padding: 9px 15px; font-size: 11px; min-height: 40px; color: #c1c6ce; backdrop-filter: blur(12px) }
.product-section { position: relative; margin-top: -76px; overflow: clip; padding-top: 8px; scroll-margin-top: 10px }
.product-stage { position: relative; width: min(1440px, 100%); margin: auto; perspective: 1600px; padding: 0 0 24px; isolation: isolate }
.stage-halo { position: absolute; inset: -10% 5% 20%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, #767d8b26, #ad895b0c 45%, transparent 70%); pointer-events: none }
.product-display { position: relative; width: 76%; max-width: 1050px; margin: 0 auto; border: 1px solid #b6bdc14d; border-radius: 15px; background: #101216; padding: 6px; box-shadow: 0 45px 100px #000b, 0 1px 0 #fff4 inset; transform: perspective(1600px) rotateX(10deg) translateY(0) scale(.94); transform-origin: 50% 20%; z-index: 2; will-change: transform }
.display-label { display: flex; justify-content: space-between; padding: 8px 13px 12px; font-size: 9px; color: #a3a9b4; letter-spacing: .12em; line-height: 1.5 }
.display-label>span:last-child { letter-spacing: .04em; color: #c3ad93 }
.label-divider { padding: 0 9px; color: #626972 }
.stage-side { position: absolute; top: 7%; width: 48%; z-index: 1; background: #13161b; padding: 5px; border: 1px solid #abb3c138; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px #0008; opacity: .48; pointer-events: none; will-change: transform }
.stage-side img { width: 100%; border-radius: 8px; opacity: .68 }
.stage-side span { display: block; font-size: 10px; color: #c6cbd3; padding: 8px 12px; letter-spacing: .1em }
.stage-left { left: -7%; transform: perspective(1100px) rotateY(23deg) rotateZ(-7deg) translateY(20px) }
.stage-right { right: -7%; transform: perspective(1100px) rotateY(-23deg) rotateZ(7deg) translateY(20px) }
#screen-panel { border-radius: 10px; overflow: hidden }
.screen-zoom { display: block; width: 100%; border: 0; padding: 0; position: relative; background: #08090b; line-height: 0 }
.screen-zoom>img { width: 100%; aspect-ratio: 16/9; object-fit: contain }
.zoom-label { position: absolute; bottom: 14px; right: 14px; background: #151a22e8; border: 1px solid #a3afc347; color: #edf1f6; font-size: 11px; line-height: 1.5; padding: 9px 15px; border-radius: 100px; backdrop-filter: blur(12px) }
.zoom-label span { margin-left: 12px }
.workflow-controls { padding-top: 32px; text-align: center }
.flow-tabs { display: inline-grid; grid-template-columns: repeat(4,1fr); padding: 5px; gap: 3px; border: 1px solid #ffffff1f; border-radius: 100px; background: #181b20; box-shadow: 0 12px 40px #0003 }
.flow-tabs button { font-size: 13px; min-height: 43px; border: 0; border-radius: 100px; padding: 10px 21px; background: transparent; color: #a9afb9; transition: background .2s, color .2s }
.flow-tabs button span { font-size: 10px; margin-right: 8px; opacity: .6; font-variant-numeric: tabular-nums }
.flow-tabs button[aria-selected=true] { background: #e8eaed; color: #171a21; box-shadow: 0 2px 8px #0003 }
.product-display .flow-tabs { display: grid; width: 100%; padding: 2px 8px 12px; gap: 6px; border: 0; border-radius: 0; background: none; box-shadow: none }
.product-display .flow-tabs button { min-height: 44px; border-radius: 8px }
.product-display .flow-tabs button[aria-selected=true] { background: #252a32; color: #f2f3f5; box-shadow: inset 0 0 0 1px #ffffff1f }
.product-display .flow-tabs button[aria-selected=true] span { color: var(--accent); opacity: 1 }
.screen-caption { min-height: 112px; padding: 28px 0 0 }
.screen-caption h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em }
.screen-caption p { color: var(--muted); font-size: 14px; margin-top: 9px }
.features { padding-top: 118px }
.section-heading { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 24px }
.eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .13em; font-weight: 500 }
.section-heading .eyebrow { grid-column: 1/-1 }
.section-heading h2 { font-size: clamp(30px,3.6vw,48px); font-weight: 500; line-height: 1.3; letter-spacing: -.035em }
.section-heading h2 span { color: #a7adb7 }
.section-heading>p:last-child { font-size: 15px; color: var(--muted); line-height: 1.85; padding-bottom: 5px }
.feature-grid { display: grid; grid-template-columns: 1.22fr 1fr; gap: 24px; margin-top: 50px }
.feature-card { position: relative; background: #101216; border: 1px solid #ffffff13; border-radius: 24px; overflow: hidden; padding: 40px 35px 0; min-height: 590px }
.feature-copy { position: relative; z-index: 2; max-width: 340px }
.feature-copy h3, .browser-copy h3 { font-size: clamp(26px,2.5vw,36px); font-weight: 500; line-height: 1.35; letter-spacing: -.025em; margin-top: 20px }
.feature-copy>p:not(.eyebrow), .browser-copy>p:not(.eyebrow) { color: #a3a9b4; font-size: 14px; line-height: 1.85; margin-top: 18px }
.feature-copy .text-action, .browser-copy .text-action { font-size: 13px; margin-top: 12px; padding-left: 0; justify-content: flex-start }
.feature-shot { width: 140%; margin-top: 32px; border: 1px solid #aab5c33d; border-radius: 12px 0 0 0; overflow: hidden; box-shadow: -15px -10px 60px #0006; transform: perspective(1000px) rotateY(-8deg) rotateX(5deg); transform-origin: 0 0 }
.feature-shot img { width: 120%; max-width: none; margin-left: -20% }
.feature-studio { background: radial-gradient(ellipse at 100% 100%, #272c365e, transparent 65%),#101216 }
.feature-research { margin-top: 70px; background: radial-gradient(ellipse at 50% 100%, #31282070, transparent 65%),#101216 }
.feature-research .feature-shot { margin-top: 30px; width: 160% }
.browser-feature { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 70px; margin-top: 30px; padding: 56px 48px; border: 1px solid #ffffff15; border-radius: 24px; background: radial-gradient(ellipse at 85% 50%,#20283355,transparent 65%),#101216 }
.browser-copy { max-width: 350px }
.execution-map { text-align: center; position: relative; padding: 10px 0 }
.map-label { font-size: 10px; letter-spacing: .15em; color: #8e96a3; margin-bottom: 20px }
.map-node { width: 76%; margin: auto; padding: 15px 20px; border: 1px solid #6d788a4a; border-radius: 14px; background: linear-gradient(120deg,#242a34b3,#14181d); box-shadow: inset 0 1px 0 #ffffff12, 0 14px 32px #0005; display: flex; align-items: center; gap: 18px; text-align: left }
.map-node>span { font-size: 13px; color: var(--accent) }
.map-node strong { font-size: 14px; font-weight: 500; display: block }
.map-node small { display: block; color: #a3aab6; font-size: 10px }
.node-user { flex-wrap: wrap; gap: 3px 12px }
.node-user small { flex-basis: 100%; padding-left: 27px }
.map-connector { width: 1px; height: 24px; margin: auto; background: linear-gradient(#e1c29a90,#a6bdd76b) }
.node-agent { border-color: #b3bfc46b; padding-block: 18px }
.node-agent img { width: 33px; height: 33px; object-fit: contain; flex-shrink: 0 }
.map-branches { display: flex; justify-content: center; gap: 9px; padding-top: 27px; position: relative }
.map-branches:before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 27px; background: #76839866 }
.map-branches span { border: 1px solid #6674873b; border-radius: 7px; background: #181e26; padding: 10px 12px; font-size: 10px; color: #b7c0cd }
.map-note { font-size: 10px; color: #9ca5b2; margin-top: 20px }
.capabilities { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px 32px; margin-top: 48px; color: #989eaa; font-size: 12px }
.capabilities span:not(:last-child):after { content: "·"; margin-left: 32px; color: #525b69 }
.cta-panel { position: relative; overflow: hidden; text-align: center; margin-top: 120px; padding: 90px 24px 80px; border-top: 1px solid #ffffff1c; border-bottom: 1px solid #ffffff12; background: radial-gradient(ellipse at 50% 95%,#32303350,transparent 70%) }
.cta-panel h2 { font-size: clamp(34px,4.8vw,60px); font-weight: 500; line-height: 1.26; letter-spacing: -.045em; margin-top: 22px }
.cta-description { margin-top: 22px; font-size: 16px; color: var(--muted) }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 50px; padding-top: 65px }
.footer-brand p { font-size: 12px; color: #989eaa; margin-top: 18px }
.footer-columns { display: flex; gap: 66px }
.footer-columns>div { display: flex; flex-direction: column; gap: 12px; font-size: 12px; color: #a8adb7 }
.footer-columns h2 { font-size: 12px; font-weight: 500; color: #e2e4e9; margin: 0 0 4px }
.footer-columns button { font-size: inherit }
.footer-bottom { border-top: 1px solid #ffffff12; padding-block: 24px; width: 100%; display: flex; justify-content: space-between; color: #969ca8; font-size: 11px }
dialog { padding: 0; width: min(1260px,calc(100% - 32px)); max-height: 92dvh; background: #14171c; color: var(--text); border: 1px solid #636e7f7a; border-radius: 18px; box-shadow: 0 30px 120px #0009 }
dialog::backdrop { background: #030406dc; backdrop-filter: blur(9px) }
.dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; background: #14171c }
.dialog-top h2 { font-size: 17px; font-weight: 500 }
.dialog-top button { border: 1px solid #ffffff28; background: #222832; border-radius: 100px; padding: 8px 16px; min-height: 44px; font-size: 13px }
.dialog-image { overflow: auto }
#zoomed-image { width: 100%; max-width: none; min-width: 760px }
#zoomed-caption { padding: 16px 22px; font-size: 13px; color: #b2b9c5 }
#info-dialog { width: min(560px,calc(100% - 32px)) }
.info-body { padding: 26px; font-size: 14px; color: #b7bdc8; line-height: 1.9 }
.info-body p+p { margin-top: 15px }
.info-body label { display: block; color: #eef0f5; margin: 24px 0 8px }
.info-body select { width: 100%; background: #212730; color: #eef1f6; border: 1px solid #596474; padding: 12px; border-radius: 8px }
.download-status { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; padding: 18px 0 0; font-size: 13px }
.download-status strong { font-weight: 500; color: #d5dbe5 }
.download-status span { color: var(--accent) }
.price { display: flex; align-items: baseline; gap: 8px; color: var(--text) }
.price strong { font-size: 64px; letter-spacing: -.06em; font-weight: 500; line-height: 1.4 }
.price>span { font-size: 16px }
.fee { padding: 18px 0; border-block: 1px solid var(--line); margin: 12px 0 18px; display: flex; justify-content: space-between; color: #e3e5eb }
.fee strong { color: var(--accent); font-size: 22px }
.info-body ul { padding-left: 20px }
.info-body li+li { margin-top: 10px }
.info-body details { padding: 16px 0; border-bottom: 1px solid var(--line) }
.info-body details:first-child { padding-top: 0 }
.info-body summary { color: #eef1f7; cursor: pointer; min-height: 32px }
.info-body details p { margin-top: 10px; font-size: 13px }
@media (hover:hover) and (pointer:fine) {
  .button:hover { background: #fff; transform: translateY(-2px) }
  .text-action:hover, .desktop-nav a:hover, .desktop-nav button:hover, .footer a:hover, .footer button:hover { color: var(--accent) }
  .text-action:hover span { transform: translate(2px,-2px) }
  .screen-zoom:hover .zoom-label { background: #2c3441 }
  .flow-tabs button:not([aria-selected=true]):hover { background: #ffffff0c; color: #fff }
}
@media(min-width:801px) {
  .motion-ready .hero-badge { animation: enter .7s var(--ease) both }
  .motion-ready h1 { animation: enter .9s .07s var(--ease) both }
  .motion-ready .hero-description { animation: enter .9s .14s var(--ease) both }
  .motion-ready .hero-actions { animation: enter .9s .21s var(--ease) both }
  .motion-ready .hero-copy .availability { animation: enter .9s .28s var(--ease) both }
}
@keyframes enter { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }
@media(max-width:1050px) {
  .navigation { gap: 20px; padding-inline: 28px }
  .desktop-nav { gap: 18px; font-size: 12px }
  .container { width: calc(100% - 56px) }
  .hero { min-height: 665px }
  .hero-copy { padding-top: 70px }
  .product-display { width: 83% }
  .feature-grid { gap: 20px }
  .feature-card { padding: 32px 26px 0; min-height: 540px }
  .browser-feature { padding: 40px 32px; gap: 28px }
}
@media(max-width:800px) {
  html { scroll-padding-top: 88px }
  .site-header, .navigation { height: 68px }
  .navigation { justify-content: space-between; padding-inline: 24px }
  .desktop-nav { display: none }
  .menu-toggle { display: block }
  .container { width: calc(100% - 48px) }
  .hero { min-height: 640px }
  .hero-copy { padding-top: 66px }
  h1 { font-size: clamp(36px,7vw,55px); line-height: 1.24 }
  .hero-description { font-size: 15px; margin-top: 24px }
  #hero-ribbon { height: 260px; bottom: 6px }
  .motion-control { bottom: 80px; right: 24px; min-height: 44px }
  .product-section { margin-top: -40px; padding-top: 0 }
  .product-display { width: calc(100% - 48px); transform: none !important }
  .stage-side { display: none }
  .display-label { font-size: 9px; padding: 7px 8px 10px }
  .workflow-controls { padding-top: 18px }
  .flow-tabs button { padding-inline: 18px; font-size: 12px }
  .features { padding-top: 75px }
  .section-heading { grid-template-columns: 1fr; gap: 18px }
  .section-heading>p:last-child { font-size: 14px }
  .section-heading h2 { font-size: 36px }
  .feature-grid { margin-top: 35px; grid-template-columns: 1fr 1fr; gap: 16px }
  .feature-card { min-height: 490px; padding: 28px 22px 0 }
  .feature-copy h3 { font-size: 27px }
  .feature-copy>p:not(.eyebrow) { font-size: 13px }
  .feature-research { margin-top: 45px }
  .feature-shot { width: 185% }
  .feature-research .feature-shot { width: 200% }
  .browser-feature { padding: 36px 28px; gap: 30px; grid-template-columns: 1fr }
  .browser-copy { max-width: 430px }
  .execution-map { max-width: 500px; width: 100%; margin: auto }
  .footer-columns { gap: 44px }
  .cta-panel { margin-top: 80px; padding-block: 65px }
}
@media(max-width:560px) {
  .navigation { padding-inline: 18px; gap: 16px }
  .brand img { width: 94px }
  .button.compact { padding-inline: 13px; min-height: 44px; font-size: 11px }
  .nav-actions { gap: 8px }
  .container { width: calc(100% - 36px) }
  .hero { min-height: 595px }
  .hero-copy { padding: 56px 16px 0 }
  .hero-badge { font-size: 10px; letter-spacing: .01em; gap: 7px }
  h1 { font-size: clamp(29px,7.5vw,43px); margin-top: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -.035em }
  .hero-description { font-size: 12px; line-height: 1.9; margin-top: 24px }
  .hero-actions { gap: 20px; margin-top: 28px }
  .button { font-size: 12px; padding: 11px 19px; gap: 14px }
  .text-action { font-size: 12px; gap: 8px }
  .availability { font-size: 10px }
  #hero-ribbon { height: 220px; bottom: -20px }
  .motion-control { right: 18px; bottom: 60px; font-size: 10px; padding: 8px 12px }
  .product-section { margin-top: -20px; scroll-margin-top: 0 }
  .product-display { width: calc(100% - 28px); padding: 4px; border-radius: 10px }
  .display-label { font-size: 9px; letter-spacing: 0; padding: 5px 5px 9px }
  .label-divider { padding: 0 4px }
  #screen-panel { border-radius: 6px }
  .zoom-label { right: 7px; bottom: 7px; padding: 7px 11px; font-size: 9px }
  .zoom-label span { margin-left: 5px }
  .workflow-controls { padding-top: 2px }
  .flow-tabs { width: 100%; padding: 4px; gap: 1px }
  .flow-tabs button { font-size: 12px; padding: 8px 4px; min-height: 44px }
  .flow-tabs button span { display: none }
  .screen-caption { padding-top: 22px; min-height: 100px }
  .screen-caption h2 { font-size: 17px }
  .screen-caption p { font-size: 11px; margin-top: 8px }
  .features { padding-top: 58px }
  .section-heading { gap: 17px }
  .section-heading h2 { font-size: 31px }
  .section-heading>p:last-child { font-size: 13px }
  .desktop-break { display: none }
  .feature-grid { grid-template-columns: 1fr }
  .feature-card { min-height: 480px; padding: 28px 25px 0; border-radius: 18px }
  .feature-research { margin-top: 0 }
  .feature-copy h3 { font-size: 30px }
  .feature-copy>p:not(.eyebrow) { font-size: 14px }
  .feature-shot, .feature-research .feature-shot { width: 150% }
  .browser-feature { padding: 30px 22px; border-radius: 18px }
  .browser-copy h3 { font-size: 30px }
  .map-node { width: 94%; padding-inline: 16px }
  .map-branches { gap: 5px }
  .map-branches span { padding: 9px 7px; font-size: 10px }
  .map-note { font-size: 10px }
  .capabilities { gap: 16px 22px; display: grid; grid-template-columns: repeat(3,1fr); text-align: center; margin-top: 32px; font-size: 10px }
  .capabilities span:after { display: none }
  .cta-panel { margin-top: 60px; padding: 60px 0 }
  .cta-panel h2 { font-size: 32px }
  .cta-description { font-size: 13px }
  .cta-panel .hero-actions { gap: 17px }
  .footer { padding-top: 45px; gap: 30px }
  .footer-columns { width: 100%; justify-content: space-between; gap: 16px }
  .footer-columns>div { font-size: 11px }
  .footer-bottom { font-size: 9px; gap: 12px }
  .info-body { padding: 22px; font-size: 13px }
  .dialog-top { padding: 13px 16px }
  .dialog-top h2 { font-size: 15px }
}
/* 键盘交互不播过渡；商品与平台标识循环仍由暂停按钮控制。 */
.motion-paused *, .keyboard-input :not(.goods-lane):not(.platform-logo-track) { animation: none !important; transition: none !important; scroll-behavior: auto !important }
.motion-paused .product-display, .motion-paused .stage-side { transform: none }
.motion-paused .reveal { opacity: 1 !important; transform: none !important }
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
  .product-display { transform: none !important }
  .stage-side { display: none }
}

/* A4: editorial content and dedicated product pages. Shared components stay local. */
@media(min-width:801px) {
  .hero { min-height: 735px }
  .hero-copy { padding-top: 38px }
  .hero h1 { font-size: clamp(44px,5.8vw,76px) }
  #hero-ribbon { height: 260px }
}
.desktop-nav [aria-current=page], #mobile-nav [aria-current=page] { color: var(--accent) }
.newcomer-section { padding-top: 90px }
.journey-rail { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 42px; border-top: 1px solid var(--line) }
.journey-rail a { padding-top: 26px; position: relative }
.journey-rail a:before { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); top: -3px }
.journey-rail span { font-size: 11px; letter-spacing: .06em; color: var(--accent) }
.journey-rail h3 { font-size: 17px; font-weight: 500; margin-top: 18px }
.journey-rail p { font-size: 13px; color: var(--muted); margin-top: 9px }
.content-section { margin-top: 110px }
.value-rows { margin-top: 40px; border-top: 1px solid var(--line) }
.value-rows a { display: grid; grid-template-columns: 40px 1fr 1.3fr 20px; align-items: center; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line) }
.value-rows span { font-size: 13px; color: var(--accent) }
.value-rows h3 { font-size: 22px; font-weight: 500 }
.value-rows p { font-size: 14px; color: var(--muted) }
.responsibility { display: grid; grid-template-columns: 1fr 1fr; margin-top: 100px; border-block: 1px solid var(--line) }
.responsibility>div { padding: 50px 48px 50px 0 }
.responsibility>div+div { padding-left: 48px; border-left: 1px solid var(--line) }
.responsibility h2 { font-size: 34px; font-weight: 500; line-height: 1.4; letter-spacing: -.03em; margin: 20px 0 }
.responsibility p:not(.eyebrow), .responsibility ul { font-size: 14px; color: var(--muted); line-height: 1.9; max-width: 400px }
.responsibility ul { padding-left: 20px }
.responsibility li+li { margin-top: 10px }
.home-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px }
.home-faq h2 { font-size: 32px; font-weight: 500; margin-top: 20px }
.home-faq details, .faq-groups details { border-bottom: 1px solid var(--line); padding: 22px 0 }
.home-faq summary, .faq-groups summary { cursor: pointer; font-size: 16px; padding-right: 16px; line-height: 1.7 }
.home-faq details p, .faq-groups details p { font-size: 14px; color: var(--muted); line-height: 1.9; padding-top: 16px }
.home-faq details:first-child { padding-top: 0 }
.page-intro { padding-top: 34px; padding-bottom: 55px }
.back-link { font-size: 12px; color: var(--muted); display: inline-block; padding: 8px 0 }
.back-link span { color: #5a626e; padding: 0 12px }
.page-intro .eyebrow { margin-top: 55px }
.page-intro h1 { margin: 20px 0 0; font-size: clamp(38px,5.2vw,68px); font-weight: 500; line-height: 1.3; letter-spacing: -.04em; text-wrap: initial }
.page-intro h1>span { display: inline }
.page-lead { font-size: 17px; color: var(--muted); line-height: 1.9; max-width: 720px; margin-top: 24px }
.chapter-nav { display: flex; flex-wrap: wrap; gap: 10px 34px; border-block: 1px solid var(--line); padding-block: 16px; font-size: 13px; color: #bcc3ce }
.chapter-nav a { padding-block: 8px }
.product-chapter { margin-top: 90px; scroll-margin-top: 20px }
.chapter-top { display: grid; grid-template-columns: 50px 1.6fr 1fr; gap: 28px; margin-bottom: 32px; align-items: start }
.chapter-number { font-size: 28px; color: #7e8999; line-height: 1.1; font-weight: 300 }
.chapter-top h2 { font-size: 28px; font-weight: 500; line-height: 1.45; margin: 12px 0; letter-spacing: -.03em }
.chapter-top p:not(.eyebrow) { font-size: 14px; color: var(--muted); max-width: 550px }
.benefit-list { list-style: none; padding: 0; margin: 0; font-size: 13px; color: #c7ccd5 }
.benefit-list li { padding: 12px 0 12px 18px; border-bottom: 1px solid var(--line); position: relative }
.benefit-list li:before { content: ""; position: absolute; width: 4px; height: 4px; top: 22px; left: 0; background: var(--accent); border-radius: 50% }
.detail-shot { padding: 7px 7px 0; border: 1px solid #65708055; background: #11151b; border-radius: 16px; overflow: hidden }
.detail-shot .screen-zoom { width: 100%; display: block; overflow: hidden; border-radius: 10px }
.detail-shot img { width: 100% }
.detail-shot figcaption { font-size: 11px; color: #c7b198; padding: 13px 18px }
.detail-page .footer { margin-top: 90px }
.advantage-opening { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; padding-block: 55px; border-block: 1px solid var(--line) }
.large-statement { font-size: 40px; letter-spacing: -.03em; line-height: 1.6 }
.large-statement span { color: #909aaa }
.advantage-aside h2 { font-size: 26px; line-height: 1.5; font-weight: 500; margin: 16px 0 }
.advantage-aside>p:last-of-type { font-size: 14px; color: var(--muted) }
.comparison { margin-top: 36px; overflow-x: auto }
.comparison table { border-collapse: collapse; width: 100%; text-align: left; font-size: 14px }
.comparison th, .comparison td { padding: 22px 20px; border-bottom: 1px solid var(--line); vertical-align: top }
.comparison th { font-weight: 500 }
.comparison td { color: var(--muted); min-width: 210px }
.comparison th:first-child { min-width: 100px; padding-left: 0 }
.comparison td:last-child { color: #d4d9e2; background: #15191f; width: 43% }
.comparison thead th:last-child { background: #242830; color: var(--accent) }
.audience-list { margin-top: 40px; display: grid; grid-template-columns: repeat(3,1fr); gap: 40px }
.audience-list article { border-top: 1px solid var(--line); padding-top: 24px }
.audience-list span { font-size: 12px; color: var(--accent) }
.audience-list h3 { font-size: 20px; font-weight: 500; margin: 18px 0 12px }
.audience-list p { font-size: 14px; color: var(--muted) }
.browser-showcase { padding: 30px 36px 26px; border: 1px solid #49556366; border-radius: 24px; background: radial-gradient(ellipse at 55% 60%,#2b353e88,transparent 70%),#101318; overflow: hidden }
.browser-showcase-label { display: flex; justify-content: space-between; font-size: 11px; color: #b8c3d0 }
.browser-showcase-label span:last-child { color: var(--accent) }
.window-stack { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin: 55px 10px 35px; perspective: 1200px }
.environment-window { border: 1px solid #6d7c8f88; background: linear-gradient(130deg,#252e3b,#11171f); border-radius: 13px; min-height: 260px; box-shadow: 0 25px 45px #0006; padding: 0 22px 22px }
.environment-window:first-child { transform: rotateY(12deg) translateY(20px) }
.environment-window:last-child { transform: rotateY(-12deg) translateY(20px) }
.window-top { margin-inline: -22px; padding: 14px 17px; font-size: 11px; border-bottom: 1px solid #ffffff15; color: #a5b3c4; display: flex; align-items: center; gap: 8px }
.window-dot { background: #c3a984; width: 5px; height: 5px; border-radius: 50% }
.environment-window strong { display: block; font-weight: 500; font-size: 20px; margin-top: 24px }
.environment-window p { color: #9faebe; font-size: 11px; margin-top: 5px }
.environment-lines { display: grid; gap: 8px; margin-block: 22px }
.environment-lines i { height: 5px; border-radius: 2px; background: #ffffff15; width: 86% }
.environment-lines i:nth-child(2) { width: 65% }
.environment-lines i:nth-child(3) { width: 74% }
.environment-tag { display: inline-block; padding: 7px 9px; color: #c6b599; border: 1px solid #baa78333; border-radius: 5px; font-size: 10px }
.diagram-caption { font-size: 11px; color: #a6afbd; text-align: center; margin-top: 55px }
.journey-list { list-style: none; padding: 0; margin: 40px 0 0 }
.journey-list li { display: flex; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--line) }
.journey-list li>span { color: var(--accent); font-size: 14px }
.journey-list h3 { font-size: 22px; font-weight: 500; margin-bottom: 8px }
.journey-list p { color: var(--muted); font-size: 14px }
.boundary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px }
.boundary-grid article { border-top: 1px solid var(--line); padding-top: 32px }
.boundary-grid h2 { font-size: 30px; font-weight: 500; margin-block: 20px; line-height: 1.5 }
.boundary-grid p:last-child { font-size: 14px; color: var(--muted) }
.pricing-layout, .download-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: start }
.pricing-card, .download-picker { padding: 40px; border: 1px solid #a5987966; border-radius: 24px; background: radial-gradient(ellipse at 0 0,#3b352b88,transparent 65%),#14171c }
.pricing-card>.price { margin-top: 25px }
.pricing-card>p:not(.eyebrow):not(.price) { font-size: 14px; color: var(--muted) }
.pricing-card .button { width: 100%; margin-top: 30px }
.pricing-card small { display: block; text-align: center; font-size: 11px; color: var(--muted); margin-top: 14px }
.pricing-includes h2, .download-checklist h2 { font-size: 32px; font-weight: 500; line-height: 1.5; margin-bottom: 26px }
.pricing-includes>p { font-size: 13px; color: var(--muted); margin-top: 24px }
.cost-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 55px; margin-top: 36px }
.cost-list article { border-top: 1px solid var(--line); padding-block: 24px }
.cost-list h3 { font-size: 20px; font-weight: 500; margin-bottom: 12px }
.cost-list p { font-size: 14px; color: var(--muted) }
.faq-layout { display: grid; grid-template-columns: 220px 1fr; gap: 60px }
.faq-index { position: sticky; top: 112px; align-self: start; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted) }
.faq-index a { padding: 9px 0 }
.faq-groups section { margin-bottom: 50px; scroll-margin-top: 20px }
.faq-groups h2 { font-size: 24px; font-weight: 500; padding-bottom: 8px }
.download-picker label { display: block; margin: 24px 0 10px; font-size: 14px; color: #ced4dd }
.download-picker select { font: inherit; width: 100%; background: #171c23; border: 1px solid #657082; padding: 12px; color: var(--text); border-radius: 8px }
.release-note { display: flex; align-items: start; gap: 12px; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 26px; font-size: 14px; color: #c7cfdb }
.release-note .signal { margin-top: 10px; flex-shrink: 0 }
.release-note small { font-size: 12px; color: var(--muted) }
.download-picker .text-action { margin-top: 20px }
.download-checklist h2 { margin-top: 18px }
.download-checklist ol { padding-left: 22px; color: var(--accent) }
.download-checklist li { padding: 5px 0 18px 10px }
.download-checklist strong { color: #d8dce5; font-weight: 500; font-size: 16px }
.download-checklist p { color: var(--muted); font-size: 13px; margin-top: 6px }
@media (hover:hover) and (pointer:fine) {
  .journey-rail a:hover h3, .value-rows a:hover h3, .chapter-nav a:hover, .faq-index a:hover { color: var(--accent) }
}
@media(max-width:1050px) {
  .pricing-layout, .download-layout { gap: 40px }
  .window-stack { gap: 12px; margin-inline: 0 }
  .environment-window { padding-inline: 15px }
  .window-top { margin-inline: -15px }
  .environment-window strong { font-size: 17px }
  .environment-tag { font-size: 9px; padding-inline: 5px }
  .journey-rail { gap: 15px }
  .journey-rail h3 { font-size: 15px }
}
@media(max-width:800px) {
  .content-section, .responsibility { margin-top: 70px }
  .newcomer-section { padding-top: 50px }
  .journey-rail { grid-template-columns: 1fr 1fr; gap: 32px 24px }
  .journey-rail a:before { display: none }
  .journey-rail h3 { font-size: 17px }
  .value-rows a { grid-template-columns: 24px 1fr 20px; gap: 16px }
  .value-rows h3 { font-size: 20px }
  .value-rows p { grid-column: 2; font-size: 13px }
  .value-rows a>span:last-child { grid-column: 3; grid-row: 1 }
  .responsibility>div { padding: 32px 24px 32px 0 }
  .responsibility>div+div { padding-left: 24px }
  .responsibility h2 { font-size: 27px }
  .home-faq { grid-template-columns: 1fr; gap: 30px }
  .page-intro { padding-top: 24px; padding-bottom: 40px }
  .page-intro .eyebrow { margin-top: 35px }
  .page-intro h1 { font-size: 42px }
  .page-lead { font-size: 15px }
  .chapter-top { grid-template-columns: 36px 1fr; gap: 20px }
  .chapter-top .benefit-list { grid-column: 2 }
  .chapter-top h2 { font-size: 25px }
  .chapter-top .benefit-list li { padding-block: 8px }
  .chapter-top .benefit-list li:before { top: 18px }
  .advantage-opening { gap: 35px }
  .large-statement { font-size: 28px }
  .advantage-aside h2 { font-size: 22px }
  .audience-list { grid-template-columns: 1fr; gap: 25px }
  .window-stack { grid-template-columns: 1fr; gap: 16px; max-width: 440px; margin: 30px auto }
  .environment-window { min-height: auto; transform: none !important; padding: 0 24px 22px; position: relative }
  .window-top { margin-inline: -24px }
  .environment-lines { margin-block: 18px; width: 65% }
  .environment-tag { position: absolute; right: 24px; bottom: 24px; background: #161c24; font-size: 10px }
  .diagram-caption { margin-top: 24px }
  .boundary-grid { gap: 35px }
  .boundary-grid h2 { font-size: 26px }
  .pricing-layout, .download-layout { gap: 35px; grid-template-columns: 1fr }
  .pricing-card, .download-picker { padding: 32px }
  .faq-layout { grid-template-columns: 1fr; gap: 35px }
  .faq-index { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; border-block: 1px solid var(--line); padding-block: 12px }
}
@media(max-width:560px) {
  .journey-rail { grid-template-columns: 1fr; gap: 0; margin-top: 26px }
  .journey-rail a { padding: 22px 0; border-bottom: 1px solid var(--line) }
  .journey-rail h3 { margin-top: 9px; font-size: 19px }
  .journey-rail p { font-size: 13px }
  .value-rows h3 { font-size: 18px }
  .value-rows a { padding-block: 24px; gap: 10px }
  .responsibility { grid-template-columns: 1fr }
  .responsibility>div { padding: 30px 0 }
  .responsibility>div+div { padding: 30px 0; border-left: 0; border-top: 1px solid var(--line) }
  .home-faq h2 { font-size: 28px }
  .home-faq summary, .faq-groups summary { font-size: 15px }
  .page-intro h1 { font-size: clamp(26px,7.4vw,40px) }
  .page-lead { font-size: 14px }
  .chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12px }
  .product-chapter { margin-top: 55px }
  .chapter-top { grid-template-columns: 25px 1fr; gap: 12px }
  .chapter-number { font-size: 20px }
  .chapter-top h2 { font-size: 22px }
  .chapter-top p:not(.eyebrow) { font-size: 13px }
  .detail-shot { padding: 4px 4px 0; border-radius: 11px }
  .detail-shot figcaption { font-size: 10px; padding: 10px }
  .advantage-opening { grid-template-columns: 1fr; padding-block: 35px }
  .large-statement { font-size: 27px }
  .comparison th, .comparison td { padding: 18px 12px; font-size: 13px }
  .browser-showcase { padding: 22px 18px; border-radius: 18px }
  .environment-window { padding-inline: 16px }
  .window-top { margin-inline: -16px }
  .environment-tag { right: 16px; font-size: 9px }
  .diagram-caption { text-align: left }
  .journey-list li { gap: 18px }
  .journey-list h3 { font-size: 19px }
  .boundary-grid, .cost-list { grid-template-columns: 1fr; gap: 25px }
  .pricing-card, .download-picker { padding: 26px 22px; border-radius: 18px }
  .price strong { font-size: 55px }
  .pricing-includes h2, .download-checklist h2 { font-size: 28px }
  .download-picker select { font-size: 14px }
  .faq-index { font-size: 12px; gap: 6px 22px }
  .detail-page .footer { margin-top: 65px }
}

/* A6: one editorial type family across all seven pages, with optical hierarchy. */
body { font-weight: 400; letter-spacing: .005em; font-synthesis: none }
.desktop-nav, #mobile-nav, .chapter-nav, .faq-index { font-weight: 500 }
.desktop-nav { font-size: 13px; letter-spacing: .02em }
.button, .text-action, .flow-tabs button { font-weight: 550 }
.eyebrow { font-size: 12px; font-weight: 550; letter-spacing: .12em }
.section-heading h2, .feature-copy h3, .browser-copy h3, .cta-panel h2,
.responsibility h2, .home-faq h2, .chapter-top h2, .boundary-grid h2,
.pricing-includes h2, .download-checklist h2, .advantage-aside h2 {
  font-weight: 580; letter-spacing: -.035em; line-height: 1.45;
}
.journey-rail h3, .value-rows h3, .audience-list h3, .journey-list h3,
.cost-list h3, .faq-groups h2, .screen-caption h2 { font-weight: 560; letter-spacing: -.02em }
.page-intro h1 { font-weight: 610; letter-spacing: -.04em; line-height: 1.32 }
.page-lead { line-height: 1.95; letter-spacing: .02em }
.home-faq summary, .faq-groups summary { font-weight: 500 }
.price strong { font-weight: 600; font-variant-numeric: lining-nums tabular-nums }
.large-statement { font-weight: 500 }
.footer-columns h2 { font-weight: 600 }
.footer-columns>div, .footer-brand p { font-size: 13px }
.home-page .hero-copy { max-width: 1100px; margin-inline: auto; padding-top: 36px }
.home-page .hero h1 { font-family: var(--sans); font-size: clamp(54px, 5.7vw, 78px); font-weight: 620; line-height: 1.3; letter-spacing: -.045em; margin-top: 24px; color: #f4f1ec }
.home-page .hero h1>span { white-space: nowrap }
.home-page .hero .headline-metal { background: none; color: #e1c9a7; font-size: .94em; font-weight: 560; margin-top: 4px }
.home-page .hero-description { max-width: 580px; margin: 22px auto 0; color: #adb2bc; font-size: 16px; line-height: 1.95; letter-spacing: .025em }
.home-page .hero-description>span { display: block; text-wrap: balance }
.home-page .hero-badge { letter-spacing: .12em; font-weight: 500; font-size: 11px }
.home-page #hero-ribbon { height: 320px; bottom: 10px; opacity: 1 }
.home-page .motion-control { bottom: 85px; right: 30px }
.home-page .section-heading h2 span { color: #aeb1b8 }
.home-page .section-heading>p:last-child { line-height: 1.95 }
@media(min-width:801px) {
  .home-page .hero { min-height: 820px }
}
/* Keep products and their track in view on a typical laptop-height window. */
@media(min-width:801px) and (max-height:800px) {
  .home-page .hero { min-height: 644px }
  .home-page .hero-copy { padding-top: 18px }
  .home-page .hero h1 { font-size: clamp(48px, 4.7vw, 64px); margin-top: 14px; line-height: 1.24 }
  .home-page .hero-description { font-size: 15px; margin-top: 18px; line-height: 1.8 }
  .home-page .hero-actions { margin-top: 22px }
  .home-page .availability { margin-top: 14px }
  .home-page #hero-ribbon { height: 250px; bottom: 0 }
  .home-page .motion-control { bottom: 32px }
  .home-page .product-section { margin-top: 0 }
}
@media(max-width:800px) {
  .home-page .hero { min-height: 750px }
  .home-page .hero-copy { padding-top: 48px }
  .home-page .hero h1 { font-size: clamp(42px, 7.4vw, 58px) }
  .home-page .hero-description { font-size: 15px; max-width: 480px }
}
@media(max-width:560px) {
  .home-page .hero { min-height: 650px }
  .home-page .hero-copy { padding-top: 44px }
  .home-page .hero h1 { font-size: clamp(38px, 9.6vw, 53px); line-height: 1.3; letter-spacing: -.045em; margin-top: 26px }
  .home-page .hero .headline-metal { font-size: clamp(25px, 7.5vw, 40px); margin-top: 10px }
  .home-page .hero-description { font-size: 13px; max-width: 300px; margin-top: 23px; line-height: 1.9 }
  .home-page .hero-description>span+span { margin-top: 5px }
  .home-page .hero .hero-actions { gap: 18px; margin-top: 25px }
  .home-page .hero-badge { font-size: 10px; letter-spacing: .055em }
  .home-page #hero-ribbon { height: 250px; bottom: 0 }
  .home-page .motion-control { bottom: 35px; right: 16px; font-size: 10px }
  .eyebrow { font-size: 11px; letter-spacing: .08em }
  .footer-columns>div { font-size: 12px }
  .page-intro h1 { line-height: 1.4; letter-spacing: -.035em }
}