:root {
  color-scheme: dark;
  --black: #070808;
  --section-bg: #111517;
  --near: #0d1013;
  --panel: #14191f;
  --line: #303943;
  --white: #f3f6f8;
  --muted: #aab3be;
  --blue: #2268f4;
  --bright: #74aaff;
  --display: 'Saira Extra Condensed', Impact, sans-serif;
  --mono: 'DM Mono', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--section-bg); color: var(--white); font-family: Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a, summary { touch-action: manipulation; }
:focus-visible { outline: 2px solid #b2d0ff; outline-offset: 5px; }
.skip-link { position: absolute; z-index: 100; top: -80px; left: 18px; padding: 11px 15px; background: white; color: #060809; }
.skip-link:focus { top: 12px; }
.wrap { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.site-header { position: relative; z-index: 20; border-bottom: 1px solid #dfe9ff20; background: #070a0c; }
.header-inner { height: 76px; display: flex; align-items: center; gap: 40px; }
.site-logo { flex: none; }
.site-logo img { width: 176px; height: auto; }
.primary-nav { display: flex; align-items: center; gap: 38px; margin-inline: auto; }
.primary-nav a, .header-cta { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.primary-nav a { color: #b4bec8; transition: color .2s; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: #fff; }
.header-cta { display: inline-flex; align-items: center; gap: 19px; min-height: 39px; padding: 0 15px; border: 1px solid #8b9bb0; border-radius: 3px; white-space: nowrap; transition: background .2s, border-color .2s; }
.header-cta:hover { background: #1b2637; border-color: #8bb6ff; }
.header-cta span { font: 20px/1 Inter, sans-serif; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 0 22px; border: 1px solid transparent; border-radius: 4px; font: 600 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-3px); }
.button span { font: 22px/1 Inter, sans-serif; }
.button-primary { background: #f4f7fb; color: #0b111b; }
.button-primary:hover { background: #a8ccff; }
.button-ghost { border-color: #738095; background: #0b101795; color: #f5f8fa; }
.button-ghost:hover { border-color: #b6d2ff; background: #1a2433; }
.button-identity { background: #2268f4; color: white; }
.button-identity:hover { background: #397cff; }
.inline-link { display: inline-flex; align-items: center; gap: 15px; padding-bottom: 8px; border-bottom: 1px solid #729ffe; color: #d7e8ff; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.inline-link span { font: 19px/1 Inter, sans-serif; }
.inline-link:hover { color: white; }

/* Hero with Componentry Aurora Flow as the full-bleed motion layer. */
.hero { position: relative; min-height: 770px; overflow: hidden; isolation: isolate; background: #020817; }
#hero-aurora { position: absolute; inset: 0; z-index: 0; }
#hero-aurora > div { position: relative; width: 100%; height: 100%; min-height: 770px; overflow: hidden; }
#hero-aurora > div > div[aria-hidden="true"], #hero-aurora canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#hero-aurora canvas { pointer-events: none; }
.hero-grid-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(#a4c7ff0a 1px, transparent 1px), linear-gradient(90deg, #a4c7ff0a 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, transparent 4%, #000 40%, #000 83%, transparent 100%); }
.hero-inner { position: relative; z-index: 2; min-height: 770px; display: flex; flex-direction: column; pointer-events: none; }
.hero-inner a { pointer-events: auto; }
.hero-copy { width: 100%; max-width: 1080px; margin-block: auto; padding: 72px 0 60px; }
.hero h1 { margin: 0 0 25px; font: 800 clamp(95px, 11.7vw, 164px)/.79 var(--display); letter-spacing: .002em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 6px 40px #020817b3; }
.hero h1 span { color: #d9f6ff; }
.hero-lede { max-width: 625px; margin: 0; color: #e0edf7; font-size: 17px; line-height: 1.6; text-shadow: 0 2px 14px #020817; }
.hero-platforms { display: flex; align-items: center; gap: 22px; width: fit-content; margin-top: 32px; padding: 12px 16px 12px 18px; border: 1px solid #a7dfff66; border-radius: 5px; background: #031326b0; box-shadow: 0 12px 40px #02081766; backdrop-filter: blur(14px); }
.hero-platform-icons { display: flex; align-items: center; gap: 4px; }
.hero-platform-icons > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 84px; min-height: 66px; }
.hero-platform-icons > span + span { border-left: 1px solid #a8dfff24; }
.hero-platform-icons img { width: 31px; height: 31px; object-fit: contain; filter: drop-shadow(0 2px 8px #39bfe655); }
.hero-platform-icons small { color: #d3e9f7; font: 500 8px/1 var(--mono); letter-spacing: .04em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 29px; }
.play-strip { overflow: hidden; border-block: 1px solid #649dff; background: #2268f4; color: white; }
.play-strip-track { width: max-content; display: flex; gap: 0; }
.play-strip-track.is-ready { animation: marquee var(--ticker-duration, 60s) linear infinite; animation-play-state: paused; }
.play-strip.in-view .play-strip-track.is-ready { animation-play-state: running; }
.play-strip-track span { flex: none; padding: 12px 20px 10px 0; font: 700 31px/.95 var(--display); white-space: nowrap; letter-spacing: .06em; }
.section-pad { padding: 110px 0; }
.manifesto { position: relative; overflow: hidden; background: var(--section-bg); }
.manifesto-grid { position: relative; }
.manifesto h2, .features-head h2, .connections-copy h2, .identity-copy h2, .insights-title h2, .faq-grid h2, .closing-inner h2 { margin: 0; font: 700 clamp(58px, 6.8vw, 100px)/.87 var(--display); letter-spacing: .008em; text-transform: uppercase; }
.manifesto h2 span, .connections-copy h2 span, .insights-title h2 span { color: #7ba9ff; }
.manifesto p { max-width: 640px; margin: 30px 0 25px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.features-section { background: var(--section-bg); }
.features-head { display: flex; align-items: end; justify-content: space-between; gap: 45px; margin-bottom: 35px; }
.features-head>p { max-width: 300px; margin: 0 0 8px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.feature-card { min-width: 0; overflow: hidden; border: 1px solid #3e454b; border-radius: 9px; background: #171c20; transition: transform .25s, border-color .25s; }
.feature-card:hover { transform: translateY(-7px); border-color: #84aaff; }
.feature-art { position: relative; height: 260px; margin: 0; overflow: hidden; background: #0b1428; }
.feature-copy { min-height: 225px; padding: 24px 22px 30px; }
.feature-copy h3 { margin: 0 0 14px; font: 700 42px/.88 var(--display); letter-spacing: .012em; }
.feature-copy p { max-width: 350px; margin: 0; color: #b9c1c9; font-size: 13px; line-height: 1.68; }
.art-library { background: radial-gradient(circle at 66% 18%, #5889fc67, transparent 48%), linear-gradient(145deg, #131e36, #09203d); }
.game-sleeve { position: absolute; bottom: 12px; width: 120px; height: 190px; display: flex; flex-direction: column; padding: 13px; border: 1px solid #c6d9ff70; border-radius: 5px; background: linear-gradient(140deg, #144a9b, #0d1a32); box-shadow: 0 11px 20px #0007; transition: transform .25s ease-out; }
.game-sleeve span { position: relative; z-index: 1; font: 500 9px var(--mono); letter-spacing: .03em; white-space: nowrap; }
.game-sleeve b { position: absolute; inset: 62px 0 auto; padding: 0 10px; color: #dbe9ff; font: 700 33px/.88 var(--display); text-align: left; }
.game-sleeve small { position: relative; z-index: 1; margin-top: auto; color: #c9d9f5; font: 500 7px/1.2 var(--mono); letter-spacing: .03em; }
.sleeve-back { left: 13%; transform: var(--sleeve-back-transform, rotate(-17deg)); background: linear-gradient(150deg, #143554, #101925); }
.sleeve-middle { left: 35%; transform: var(--sleeve-middle-transform, rotate(-3deg)); background: linear-gradient(150deg, #303e85, #12182d); }
.sleeve-front { left: 57%; transform: var(--sleeve-front-transform, rotate(12deg)); background: linear-gradient(150deg, #2360b7, #102047); }
.feature-library:hover .sleeve-back { transform: rotate(-23deg) translate(-8px, -8px); }
.feature-library:hover .sleeve-middle { transform: rotate(-4deg) translateY(-15px); }
.feature-library:hover .sleeve-front { transform: rotate(16deg) translate(8px, -9px); }
.art-progress { background: radial-gradient(circle at 72% 50%, #245ad066 0, #12305c 33%, #0a142b 78%); }
.sync-paths { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #8db7ff; stroke-width: 1.5; opacity: .85; }
.sync-paths path { stroke-dasharray: 1; stroke-dashoffset: var(--sync-dash, 0); }
.sync-source { position: absolute; z-index: 1; left: 12px; width: 155px; min-height: 68px; display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid #8eb6fa8c; border-radius: 7px; background: #12223eea; box-shadow: 0 10px 25px #0006; transform: translateX(var(--sync-shift, 0px)); transition: transform .25s ease-out; }
.sync-steam { top: 36px; }
.sync-ra { bottom: 36px; }
.sync-source img { flex: none; width: 27px; height: 27px; object-fit: contain; }
.sync-source strong, .sync-source small { display: block; }
.sync-source strong { color: #f1f7ff; font: 600 8px/1.2 var(--mono); letter-spacing: .03em; }
.sync-source small { margin-top: 5px; color: #a9c8f5; font: 500 7px/1.2 var(--mono); letter-spacing: .02em; }
.sync-hub { position: absolute; z-index: 1; top: 50%; right: 13px; width: 145px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 13px; border: 1px solid #9dc3ff; border-radius: 14px; background: linear-gradient(145deg, #2758a4, #0b254d 67%, #0a1730); box-shadow: 0 0 35px #4b8ef866; text-align: center; transform: var(--sync-hub-transform, translateY(-50%)); opacity: var(--sync-hub-opacity, 1); transition: transform .25s ease-out, opacity .25s; }
.sync-hub img { width: 41px; height: 41px; object-fit: contain; filter: brightness(0) invert(1); }
.sync-hub small { margin-top: 9px; color: #bdd7ff; font: 600 8px/1 var(--mono); letter-spacing: .09em; }
.sync-hub strong { margin-top: 6px; color: #fff; font: 700 24px/.88 var(--display); }
.feature-progress:hover .sync-source { transform: translateX(14px); }
.feature-progress:hover .sync-hub { transform: translateY(-50%) scale(1.04); opacity: 1; }
.art-review { display: grid; place-items: center; background: radial-gradient(circle at 80% 10%, #445b9680, transparent 55%), #141b2b; }
.review-paper { width: 79%; min-height: 210px; display: flex; flex-direction: column; padding: 19px; border: 1px solid #9eb9ec8c; border-radius: 6px; background: #1a263c; transform: var(--review-transform, rotate(-6deg)); transition: transform .25s ease-out; }
.feature-reviews:hover .review-paper { transform: rotate(-2deg) translateY(-5px); }
.review-paper small { color: #aac5ee; font: 500 9px var(--mono); }
.review-stars { margin-top: 17px; color: #adccff; font-size: 17px; letter-spacing: .18em; }
.review-paper strong { margin-top: 7px; font: 700 34px/.87 var(--display); }
.review-rule { height: 1px; margin: auto 0 12px; background: #aec8ec5a; }
.review-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.review-tags i { padding: 4px 5px; border: 1px solid #9eb9ec7a; border-radius: 2px; color: #cbdcf7; font: normal 7px var(--mono); }
.connections-section { position: relative; overflow: hidden; background: var(--section-bg); }
.connections-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; }
.connections-art { position: relative; height: 540px; display: grid; place-items: center; }
.connection-orbit { position: absolute; border: 1px solid #4376d35e; border-radius: 50%; }
.orbit-a { width: 375px; height: 375px; }
.orbit-b { width: 525px; height: 525px; border-style: dashed; border-color: #96b4e240; animation: orbit-spin 85s linear infinite; }
.connection-center { position: relative; z-index: 1; width: 160px; height: 160px; display: grid; place-items: center; border: 1px solid #8bb8ff; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #315fa8, #123469 60%, #091b36); box-shadow: 0 0 85px #2768e260; }
.connection-center img { width: 88px; height: 88px; object-fit: contain; filter: brightness(0) invert(1); }
.connection-ring { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; transform: translate(-50%, -50%); }
.connection-track { position: absolute; inset: 0; animation: orbit-spin 42s linear infinite; }
.connection-node { position: absolute; width: 132px; transform: translate(-50%, -50%); }
.connection-node-content { display: flex; flex-direction: column; align-items: center; gap: 7px; animation: orbit-counter-spin 42s linear infinite; }
.connection-card { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid #93b7f387; border-radius: 15px; background: #1a2639; box-shadow: 0 12px 30px #0008; }
.connection-card img { width: 38px; height: 38px; object-fit: contain; }
.connection-card-manual { color: #b8d2ff; font: 44px/1 Inter, sans-serif; }
.connection-label { color: #b8cbeb; font: 600 8px/1.2 var(--mono); letter-spacing: .05em; text-align: center; text-shadow: 0 2px 8px #020817; white-space: nowrap; }
.connection-steam { left: 50%; top: 0; }
.connection-ra { left: 93.301%; top: 25%; }
.connection-playstation { left: 93.301%; top: 75%; }
.connection-xbox { left: 50%; top: 100%; }
.connection-nintendo { left: 6.699%; top: 75%; }
.connection-manual { left: 6.699%; top: 25%; }
.connections-copy h2 { margin: 0 0 20px; }
.connections-copy>p, .identity-copy>p { max-width: 530px; color: #b3bdc8; font-size: 16px; line-height: 1.7; }
.connection-methods { display: grid; gap: 0; margin-top: 32px; border-top: 1px solid #394451; }
.connection-methods>div { display: flex; gap: 16px; align-items: center; min-height: 72px; border-bottom: 1px solid #394451; }
.connection-methods img { flex: none; object-fit: contain; }
.connection-methods strong, .connection-methods small { display: block; }
.connection-methods strong { font-size: 13px; }.connection-methods small { margin-top: 3px; color: #9daab8; font-size: 11px; }
.manual-icon { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #a0bde6; border-radius: 4px; color: #a0bde6; font-size: 20px; }

.identity-section { overflow: hidden; background: #e6edf8; color: #0b1420; }
.identity-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 58px; }
.identity-copy h2 { margin: 0 0 24px; }
.identity-copy h2 span { color: #2268f4; }
.identity-copy>p { max-width: 485px; color: #38485b; font-size: 16px; line-height: 1.7; }
.identity-copy .button { margin-top: 30px; border-radius: 9px; }
.retro-console-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.retro-console-card { position: relative; min-width: 0; height: 120px; overflow: hidden; border: 1px solid #5f7390; border-radius: 10px; background: #101722; color: #fff; }
.retro-console-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.retro-console-shade { position: absolute; inset: 0; background: linear-gradient(0deg, #02050bf2 0%, #02050b91 55%, #02050b35 100%); }
.retro-console-icon { position: absolute; top: 13px; left: 15px; width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 5px #000b); }
.retro-console-card strong { position: absolute; right: 12px; bottom: 11px; left: 15px; font: 700 28px/.9 var(--display); letter-spacing: .01em; text-shadow: 0 2px 9px #000; }
.insights-section { overflow: hidden; background: radial-gradient(ellipse at 50% 100%, #17366a33, transparent 70%), #0f1419; }
.insights-title { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 43px; }
.insights-title>p { max-width: 300px; margin: 0 0 7px; color: #b4bec8; font-size: 15px; line-height: 1.65; }
.insights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.insight-card { min-width: 0; padding: 16px 16px 26px; border: 1px solid #384658; border-radius: 16px; background: linear-gradient(155deg, #1b2737, #121920 65%); transition: transform .55s ease, opacity .55s ease, border-color .25s; }
.insights-grid.motion-ready .insight-card { opacity: 0; transform: translateY(28px); }
.insights-grid.motion-ready .insight-card.is-visible { opacity: 1; transform: translateY(0); }
.insight-card:nth-child(2) { transition-delay: .1s, .1s, 0s; }.insight-card:nth-child(3) { transition-delay: .2s, .2s, 0s; }
.insight-card:hover { border-color: #83acff; }
.insight-art { position: relative; min-width: 0; height: 270px; margin-bottom: 25px; padding: 18px; overflow: hidden; border: 1px solid #35547c; border-radius: 10px; background: radial-gradient(ellipse at 50% 0, #245cad22, transparent 75%), #0a111c; transition: transform .3s, border-color .3s; }
.insight-card:hover .insight-art { transform: translateY(-3px); border-color: #719ce2; }
.insight-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; margin-bottom: 16px; }
.insight-panel-heading>strong { color: #f0f5ff; font: 600 12px/1.2 Inter, sans-serif; }
.insight-panel-heading>span { display: flex; align-items: center; gap: 5px; color: #91a5bf; font: 400 9px/1.2 Inter, sans-serif; }
.insight-panel-heading img { width: 14px; height: 14px; object-fit: contain; }
.insight-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.insight-totals>div { padding: 9px 11px; border: 1px solid #303b4b; border-radius: 7px; background: #171e29; }
.insight-totals small { display: block; color: #94a4b9; font: 400 9px/1.2 Inter, sans-serif; }
.insight-totals strong { display: block; margin-top: 4px; color: #edf4ff; font: 600 23px/1.1 Inter, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.insight-chart-label { display: flex; justify-content: space-between; gap: 10px; margin: 17px 0 9px; color: #b5c5dc; font: 400 9px/1 Inter, sans-serif; }
.insight-chart-label>strong { font-weight: 600; }.insight-chart-label>span { color: #8294ae; }
.insight-share-bar { display: flex; gap: 3px; height: 9px; overflow: hidden; border-radius: 4px; }
.insight-share-bar i { background: var(--source); }
.insight-source-legend { display: flex; justify-content: space-between; gap: 4px; margin-top: 10px; color: #b5c5dc; font: 400 8px/1 Inter, sans-serif; }
.insight-source-legend>span { display: flex; align-items: center; gap: 4px; }.insight-source-legend i { width: 5px; height: 5px; border-radius: 50%; background: var(--source); }.insight-source-legend b { color: #edf4ff; font-weight: 600; }
.insight-completion { position: relative; width: 144px; height: 144px; margin: -3px auto 10px; }
.insight-completion svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.insight-completion circle { fill: none; stroke-width: 9px; }.insight-ring-track { stroke: #243347; }.insight-ring-fill { stroke: #7ba9ff; stroke-linecap: round; }
.insight-completion>div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.insight-completion strong { color: #ecf4ff; font: 600 38px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.05em; }.insight-completion strong>span { margin-left: 2px; font-size: 17px; letter-spacing: 0; }
.insight-completion small { margin-top: 7px; color: #98b1d5; font: 500 7px/1 var(--mono); letter-spacing: .05em; }
.insight-game-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 13px; border-top: 1px solid #2a3b51; }
.insight-game-totals>span { text-align: center; }.insight-game-totals>span+span { border-left: 1px solid #2a3b51; }
.insight-game-totals strong { display: block; color: #e6f0ff; font: 600 13px/1 Inter, sans-serif; }.insight-game-totals small { display: block; margin-top: 6px; color: #91a5bf; font: 400 9px/1 Inter, sans-serif; }
.insight-columns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 10px; height: 120px; padding: 10px 6px 0; border-bottom: 1px solid #354962; }
.insight-columns>div { position: relative; display: flex; flex-direction: column; justify-content: end; height: 100%; min-width: 0; padding-top: 20px; }
.insight-columns b { position: absolute; bottom: calc(var(--bar-height) * .84 + 5px); width: 100%; color: #bcd3f5; text-align: center; font: 500 9px/1 Inter, sans-serif; }
.insight-column { display: block; height: var(--bar-height); border-radius: 4px 4px 0 0; background: linear-gradient(0deg, #3465ae, #8ab5ff); }
.insight-columns>div:last-child .insight-column { background: linear-gradient(0deg, #5d8ede, #c8e0ff); }
.insight-columns small { position: absolute; top: calc(100% + 9px); width: 100%; color: #91a5bf; text-align: center; font: 500 7px/1 var(--mono); }
.insight-era-label { margin-top: 32px; color: #91a5bf; font: 400 9px/1 Inter, sans-serif; }
.insight-eras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.insight-eras>span { padding: 7px 2px; border: 1px solid #324760; border-radius: 4px; color: #bcd3f5; background: #14253b; text-align: center; font: 500 8px/1 var(--mono); }
.insight-card h3 { margin: 0 7px 12px; font: 700 37px/.95 var(--display); }
.insight-card>p { margin: 0 7px; color: #b4bec8; font-size: 13px; line-height: 1.65; }
.insight-fill { transform-origin: left; animation: insight-fill 1.6s cubic-bezier(.22,1,.36,1) both paused; }
.insight-column { transform-origin: bottom; animation: insight-grow 1.4s cubic-bezier(.22,1,.36,1) var(--delay) both paused; }
.insight-columns b { animation: insight-label .5s ease calc(var(--delay) + .7s) both paused; }
.insight-ring-fill { animation: insight-ring 1.8s cubic-bezier(.22,1,.36,1) both paused; }
.insight-card.is-animating :is(.insight-fill, .insight-column, .insight-columns b, .insight-ring-fill) { animation-play-state: running; }
.insights-grid:not(.motion-ready) :is(.insight-fill, .insight-column, .insight-columns b, .insight-ring-fill) { animation: none; }
@keyframes insight-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes insight-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes insight-label { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes insight-ring { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 76 100; } }
.faq-section { background: var(--section-bg); }
.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; }
.faq-grid h2 { margin: 0 0 20px; }
.faq-grid h2 span { color: #7aa8ff; }
.faq-grid>div>p { max-width: 340px; color: #aeb9c5; font-size: 15px; line-height: 1.65; }
.faq-list { border-top: 1px solid #485362; }
.faq-list details { padding: 23px 4px; border-bottom: 1px solid #485362; }
.faq-list summary { position: relative; padding-right: 36px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; line-height: 1.4; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:after { content: '+'; position: absolute; right: 0; top: -7px; color: #99bcff; font-size: 26px; font-weight: 400; }
.faq-list details[open] summary:after { content: '−'; }
.faq-list details p { max-width: 570px; margin: 15px 35px 0 0; color: #aeb9c5; font-size: 13px; line-height: 1.7; }
.closing-section { position: relative; overflow: hidden; padding: 140px 0 130px; background: #0a1429; text-align: center; }
.closing-aurora { position: absolute; left: 50%; bottom: -380px; width: 1100px; height: 700px; border-radius: 50%; background: radial-gradient(ellipse, #2873e5b0 0, #193e8d78 34%, transparent 69%); filter: blur(55px); transform: translateX(-50%); animation: closing-glow 11s ease-in-out infinite alternate; }
.closing-inner { position: relative; }
.closing-inner h2 { margin: 0 0 18px; font-size: clamp(95px, 11vw, 160px); }
.closing-inner h2 span { color: #a7c9ff; }
.closing-inner>p { margin: 0 0 27px; color: #c8d3e2; font-size: 16px; }
.site-footer { border-top: 1px solid #33455f; background: #070a0e; }
.footer-inner { min-height: 150px; display: flex; align-items: center; gap: 28px; }
.footer-inner .site-logo img { width: 164px; }
.footer-inner p, .footer-inner small { color: #9ba9bb; font-size: 11px; }
.footer-inner nav { display: flex; gap: 22px; margin-left: auto; color: #c0cbd8; font: 400 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.footer-inner nav a:hover { color: white; }

@keyframes orbit-spin { to { rotate: 360deg; } }
@keyframes orbit-counter-spin { to { rotate: -360deg; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes closing-glow { to { transform: translateX(-50%) scale(1.18); opacity: .6; } }

.orbit-b, .connection-track, .connection-node-content, .closing-aurora { animation-play-state: paused; }
.connections-art.in-view .orbit-b, .connections-art.in-view .connection-track, .connections-art.in-view .connection-node-content, .closing-section.in-view .closing-aurora { animation-play-state: running; }

@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(87px, 12vw, 140px); }
  .connections-grid { gap: 50px; }
  .identity-grid { gap: 35px; }
  .feature-copy h3 { font-size: 36px; }
  .feature-copy { min-height: 245px; }
}
@media (max-width: 800px) {
  .wrap { width: min(100% - 40px, 620px); }
  .header-inner { height: 66px; }
  .site-logo img { width: 145px; }
  .primary-nav { display: none; }
  .header-cta { margin-left: auto; padding-inline: 11px; font-size: 9px; }
  .hero, .hero-inner, #hero-aurora > div { min-height: 700px; }
  .hero-copy { padding: 60px 0; }
  .hero h1 { font-size: clamp(78px, 15.3vw, 121px); }
  .hero-lede { max-width: 520px; font-size: 15px; }
  .hero-platforms { gap: 12px; }
  .section-pad { padding: 80px 0; }
  .features-head { align-items: start; flex-direction: column; gap: 12px; }
  .feature-grid, .connections-grid, .identity-grid, .insights-grid, .faq-grid { grid-template-columns: 1fr; }
  .feature-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .feature-art { height: 250px; }
  .feature-copy { min-height: 0; }
  .sync-source { width: 120px; min-height: 64px; gap: 5px; padding: 7px; }
  .sync-source img { width: 22px; height: 22px; }
  .sync-source strong { font-size: 7px; }
  .sync-source small { font-size: 6px; }
  .sync-hub { width: 115px; height: 130px; }
  .sync-hub img { width: 34px; height: 34px; }
  .sync-hub strong { font-size: 20px; }
  .review-paper strong { font-size: 28px; }
  .connections-grid { gap: 0; }
  .connections-art { height: 430px; order: 2; transform: scale(.8); margin-bottom: -60px; }
  .connections-copy { order: 1; }
  .identity-copy { padding-top: 4px; }
  .insights-title { display: block; }
  .insights-title>p { max-width: 440px; margin-top: 20px; }
  .insight-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; padding: 16px; }
  .insight-card:nth-child(n) { transition-delay: 0s; }
  .insight-art { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; }
  .insight-card h3 { align-self: end; margin-top: 20px; }
  .insight-card>p { grid-column: 2; padding-bottom: 20px; }
  .faq-grid { gap: 28px; }
  .footer-inner { min-height: 0; display: grid; grid-template-columns: 1fr auto; gap: 14px; padding-block: 30px; }
  .footer-inner p { justify-self: end; }
  .footer-inner nav { grid-column: 1 / -1; margin-left: 0; flex-wrap: wrap; }
  .footer-inner small { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .header-cta { min-height: 35px; gap: 6px; }
  .hero, .hero-inner, #hero-aurora > div { min-height: 690px; }
  .hero-copy { padding: 48px 0; }
  .hero h1 { font-size: clamp(69px, 17.5vw, 96px); }
  .hero-lede { margin-top: 24px; }
  .hero-platforms { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 24px; padding: 10px 11px; }
  .hero-platform-icons { gap: 0; }
  .hero-platform-icons > span { min-width: 73px; min-height: 58px; }
  .hero-platform-icons img { width: 27px; height: 27px; }
  .hero-platform-icons small { font-size: 7px; }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { min-height: 49px; }
  .manifesto h2, .features-head h2, .connections-copy h2, .identity-copy h2, .insights-title h2, .faq-grid h2 { font-size: clamp(53px, 13vw, 78px); }
  .manifesto h2 { font-size: clamp(45px, 12vw, 64px); }
  .manifesto p { font-size: 15px; }
  .feature-card { display: block; }
  .feature-art { height: 240px; }
  .feature-copy { padding-bottom: 26px; }
  .feature-copy h3 { font-size: 43px; }
  .connections-art { left: 50%; width: 590px; margin-left: -295px; transform: scale(.61); margin-bottom: -133px; }
  .retro-console-card { height: 112px; }
  .retro-console-card strong { font-size: clamp(20px, 6vw, 28px); }
  .insight-card { display: block; padding-bottom: 26px; }
  .insight-art { max-width: 360px; margin: 0 auto 24px; }
  .insight-card>p { padding-bottom: 0; }
  .closing-section { padding: 110px 0 100px; }
  .closing-inner h2 { font-size: clamp(80px, 18vw, 113px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .connection-track, .connection-node-content { animation: none !important; }
  .sleeve-back { transform: rotate(-17deg) !important; }
  .sleeve-middle { transform: rotate(-3deg) !important; }
  .sleeve-front { transform: rotate(12deg) !important; }
  .sync-paths path { stroke-dashoffset: 0 !important; }
  .sync-source { transform: none !important; }
  .sync-hub { transform: translateY(-50%) !important; opacity: 1 !important; }
  .review-paper { transform: rotate(-6deg) !important; }
  .insights-grid.motion-ready .insight-card { opacity: 1; transform: none; }
  .insights-grid :is(.insight-fill, .insight-column, .insight-columns b, .insight-ring-fill) { animation: none !important; }
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.identity-pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.identity-pillar-grid h3 { font-size: 26px; margin-bottom: 12px; }
.identity-pillar-grid p { line-height: 1.6; margin-bottom: 20px; }
@media (max-width: 760px) { .identity-pillar-grid { grid-template-columns: 1fr; } }