/* Shared violet palette inspired by the application's Ascension Network. */
:root {
  color-scheme: dark;
  --ink: #090711;
  --panel: #110d20;
  --paper: #f4f0ff;
  --muted: #a29ab6;
  --line: rgba(202,177,255,.15);
  --lilac: #c7a9ff;
  --violet: #9257ef;
  --mono: 'SFMono-Regular', Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.menu-open, body.modal-open { overflow: hidden; }
::selection { background: #7544aa; color: #fff; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid #ddc8ff; outline-offset: 6px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1 em, h2 em { color: var(--lilac); font-style: normal; }
main { overflow: clip; }
.site-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.site-progress span { display: block; height: 100%; background: #bf94ff; width: 0; box-shadow: 0 0 12px #9257ef; }
.noise { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .018; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }

/* Navigation */
.site-nav { position: fixed; inset: 0 0 auto; z-index: 50; height: 80px; padding: 0 max(5vw, calc((100vw - 1340px)/2)); display: flex; align-items: center; gap: 40px; background: rgba(10,7,19,.82); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 39px; background: linear-gradient(140deg, #e5d1ff, #9862e9); color: #160c2b; font: 700 12px var(--mono); clip-path: polygon(24% 0,100% 0,100% 77%,76% 100%,0 100%,0 23%); }
.brand-copy { display: grid; gap: 2px; }.brand-copy strong { font-size: 14px; letter-spacing: .12em; }.brand-copy small { font: 8px var(--mono); color: var(--muted); letter-spacing: .22em; }
.nav-links { display: flex; justify-content: center; gap: 30px; margin-left: auto; color: #b8aecb; font-size: 12px; }.nav-links a { padding: 18px 0; transition: color .2s; }.nav-links a:hover { color: #eee0ff; }
.nav-play { display: flex; align-items: center; gap: 20px; padding: 9px 16px; border: 1px solid #7751a6; border-radius: 6px; background: #211332; font-size: 12px; }.nav-play:hover { background: #38204f; }.nav-play b { color: #ceabff; font-size: 17px; font-weight: 400; }
.nav-toggle { display: none; border: 1px solid var(--line); width: 44px; height: 44px; background: transparent; border-radius: 6px; }.nav-toggle span { display: block; margin: 5px auto; width: 17px; height: 1px; background: var(--paper); }

/* Opening: typography, a single halo, and a sculptural card stack. */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 4vw; min-height: 850px; min-height: max(780px,100svh); padding: 160px max(7vw, calc((100vw - 1280px)/2)) 115px; background: radial-gradient(ellipse at 78% 46%,#281444 0, #150d25 31%, #090711 68%); }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(transparent,var(--ink)); pointer-events: none; }
.hero-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }.hero-ambient img { display: none; }.hero-ambient::after { content:''; position:absolute; inset:10% -10% 0 42%; background: radial-gradient(ellipse,rgba(173,95,255,.1),transparent 65%); }
.hero-grid { position: absolute; inset: 0; z-index: -1; opacity: .18; background-image: radial-gradient(#ac85da .7px,transparent .7px); background-size: 30px 30px; -webkit-mask-image: linear-gradient(90deg,transparent 45%,#000); mask-image: linear-gradient(90deg,transparent 45%,#000); }
.hero-copy { position: relative; z-index: 4; }.eyebrow { display: flex; align-items: center; gap: 10px; color: #b7a2d1; font: 9px var(--mono); letter-spacing: .14em; }.eyebrow i { width: 24px; height: 1px; background: #624676; }.eyebrow strong { font-weight: 400; color: #d6b3ff; }.live-dot,.status-signal,.network-note i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#bf94ff; box-shadow:0 0 12px #a85cff; }
.hero h1 { margin: 32px 0 0; font-size: clamp(48px,4.6vw,76px); font-weight: 650; line-height: 1.2; letter-spacing: -.055em; }.hero h1 em { background: linear-gradient(100deg,#ece1ff 0,#c09aef 48%,#8c5bd2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lede { margin-top: 26px; max-width: 360px; font-size: 14px; color: var(--muted); line-height: 2; }.hero-actions { display: flex; gap: 25px; align-items: center; margin-top: 36px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 28px; min-height: 50px; padding: 0 24px; font-size: 12px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; transition: transform .25s, box-shadow .25s, background .25s; }.button span { font-size: 18px; font-weight: 400; }.button:hover { transform: translateY(-3px); }.button-primary { background: linear-gradient(120deg,#b987f8,#8150d6); color: #fff; border-color: #b288df; box-shadow: 0 8px 40px #8146d329; }.button-primary:hover { box-shadow: 0 8px 45px #a370ee55; background: linear-gradient(120deg,#c497ff,#9668e6); }.button-quiet { padding: 0; color:#c5b9d6; font-weight:400; }
.hero-facts { display: flex; gap: 0; margin-top: 56px; }.hero-facts div { display: grid; gap: 5px; padding-right: 27px; }.hero-facts div+div { padding-left: 27px; border-left: 1px solid var(--line); }.hero-facts b { font: 400 21px var(--mono); color: #e3d8f3; }.hero-facts span { color: #847990; font-size: 10px; }
.hero-stage { position: relative; width: 100%; aspect-ratio: .94; perspective: 1400px; transform-style: preserve-3d; }.hero-stage::before { content: ''; position: absolute; inset: 8% -3%; border-radius: 50%; background: radial-gradient(ellipse,#a254ee27,transparent 67%); }
.stage-orbit { position: absolute; pointer-events: none; border-radius: 50%; }.orbit-a { inset: 4% -5% 2%; border:1px solid #9763da40; box-shadow: 0 0 80px #9650e812,inset 0 0 60px #9350dc12; }.orbit-b { inset: 11% 2% 9%; border:1px dashed #bb8beb26; transform:rotate(-25deg); }
.stage-status { position:absolute; top:0; right:3%; display:flex; align-items:center; gap:9px; font:8px var(--mono); letter-spacing:.12em; color:var(--muted); }.stage-status b { color:#cda2ff; font-weight:400; }
.stage-card { position:absolute; width:44%; aspect-ratio:450/629; background:#21132f; padding:0; border:1px solid #ddc2ff6b; border-radius:12px; overflow:hidden; box-shadow:0 30px 65px #030106bb,0 0 22px #9257ef16; transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .3s; }.stage-card img { width:100%; height:100%; object-fit:cover; }.card-back { left:0; top:22%; transform:rotate(-16deg) scale(.91); filter:brightness(.68) saturate(.6); }.card-mid { right:0; top:19%; transform:rotate(17deg) scale(.92); filter:brightness(.7) saturate(.65); }.card-front { left:28%; top:11%; transform:rotate(-4deg); z-index:3; }.stage-card:hover { z-index:5; filter:brightness(1); }.card-front:hover { transform:translateY(-14px) rotate(0); }.card-back:hover { transform:rotate(-12deg) translateY(-12px); }.card-mid:hover { transform:rotate(12deg) translateY(-12px); }
.card-index { display:none; }.card-glint { position:absolute; inset:0; background:linear-gradient(115deg,transparent 20%,#fff3 48%,transparent 70%); opacity:0; transition:opacity .6s; pointer-events:none; }.stage-card:hover .card-glint { opacity:.7; }.stage-crosshair { display:none; }.stage-readout { position:absolute; left:0; bottom:0; display:flex; gap:6px; align-items:baseline; font:8px var(--mono); color:#9a84b4; }.stage-readout b { font-size:19px; color:#cdb0f3; font-weight:400; }.stage-readout i { font-style:normal; }.stage-readout small { display:none; }.stage-caption { position:absolute; right:0; bottom:0; display:flex; gap:12px; color:#a78fc1; font-size:10px; line-height:1.8; }.stage-caption > span { font:10px var(--mono); color:#d2a8ff; }.stage-caption em { font-style:normal; color:#d1c3e0; }
.scroll-cue { position:absolute; bottom:32px; left:7vw; display:flex; align-items:center; gap:13px; color:#9b87b4; font:8px var(--mono); letter-spacing:.14em; z-index:3; }.scroll-cue span { width:34px; height:1px; background:#ac79e7; }

/* Three full-width chapters replace the crowded five-card film montage. */
.film-sequence { position:relative; padding:80px 6vw; background:linear-gradient(#090711,#100b1d,#090711); }
.film-backdrop { display:none; }.film-sticky { max-width:1240px; margin:auto; }.film-topline { display:flex; align-items:center; gap:16px; color:#857795; font:9px var(--mono); letter-spacing:.18em; }.film-topline i { height:1px; width:55px; background:var(--line); }.film-topline b { margin-left:auto; font-weight:400; color:#b490df; }.film-heading { display:flex; align-items:end; justify-content:space-between; margin:24px 0 36px; }.section-kicker { color:#b28cdd; font:9px var(--mono); letter-spacing:.2em; }.film-heading h2 { margin-top:15px; font-size:clamp(32px,3vw,48px); line-height:1.35; font-weight:600; letter-spacing:-.03em; }.film-heading h2 br { display:none; }.film-heading p { color:var(--muted); font-size:12px; line-height:1.9; }
.film-marker,.film-stack-copy { display:none; }.film-stage-wrap { position:relative; }.film-stack { display:grid; gap:24px; }
.film-card { position:relative; isolation:isolate; min-height:410px; border:1px solid #c397ff33; border-radius:20px; background:linear-gradient(120deg,#1c1230,#100c1b); overflow:hidden; padding:45px 6%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; box-shadow:0 20px 70px #03010855; }
.film-card img { position:absolute; z-index:-2; right:4%; top:-21%; height:150%; width:43%; object-fit:cover; object-position:50% 18%; transform:rotate(9deg); opacity:.85; filter:saturate(.68); }.film-card::before { content:''; z-index:-1; position:absolute; inset:0; background:linear-gradient(90deg,#1b1130 0,#1b1130ed 24%,#1b113033 63%,#1b113066),linear-gradient(0deg,#110b20d9,transparent 65%); }.film-card::after { content:''; position:absolute; inset:15px; border:1px solid #ceadff13; border-radius:12px; pointer-events:none; }.film-card-no { color:#ae8ace; font:10px var(--mono); letter-spacing:.2em; margin-bottom:26px; }.film-card b { font-size:clamp(28px,4vw,57px); font-weight:550; letter-spacing:.02em; line-height:1.22; }.film-card small { color:#d0badf; font-size:13px; margin-top:25px; letter-spacing:.06em; }.film-card:nth-child(2) { background:#23143b; }.film-card:nth-child(2)::before { background:linear-gradient(90deg,#23143b,#23143bc9 35%,#23143b11),linear-gradient(0deg,#170e29,transparent); }.film-card:nth-child(3)::before { background:linear-gradient(90deg,#191b34,#191b34c9 35%,#191b3411),linear-gradient(0deg,#0f1021,transparent); }
.film-bottomline { display:flex; align-items:center; gap:22px; color:#9380aa; font:8px var(--mono); letter-spacing:.12em; margin-top:26px; }.film-progress { flex:1; height:2px; background:#31213f; }.film-progress i { display:block; width:0; height:100%; background:#bb8af2; }.film-bottomline span:last-child { color:#d1b4f7; }
.motion-ready .film-sequence { height:320vh; padding-top:0; padding-bottom:0; }.motion-ready .film-sticky { position:sticky; top:80px; height:calc(100svh - 80px); min-height:550px; padding:30px 0 25px; display:flex; flex-direction:column; }.motion-ready .film-stage-wrap { flex:1; min-height:270px; perspective:1600px; }.motion-ready .film-stack { position:absolute; inset:0; display:block; }.motion-ready .film-card { position:absolute; inset:0; min-height:0; will-change:transform; }.motion-ready .film-card:nth-child(2) { transform:translateY(110%); }.motion-ready .film-card:nth-child(3) { transform:translateY(110%); }.motion-ready .film-stage-wrap { overflow:hidden; border-radius:20px; }

/* Feature sections share a consistent editorial rhythm. */
.section-shell,.interface-section,.network-section { max-width:1280px; margin:auto; padding:135px 6vw; }
.experience { display:grid; grid-template-columns: .82fr 1.18fr; gap:8%; }.section-intro h2,.interface-copy h2,.network-copy h2,.platform-copy h2 { margin-top:22px; font-size:clamp(34px,3.4vw,52px); font-weight:600; line-height:1.28; letter-spacing:-.04em; }.section-intro>p,.interface-copy>p,.network-copy>p,.platform-copy>p { color:var(--muted); font-size:13px; line-height:2; margin-top:24px; max-width:370px; }.signal-line { display:none; }
.feature-list { display:grid; }.feature-row { position:relative; display:grid; grid-template-columns:35px 1fr; column-gap:20px; padding:30px 0; border-bottom:1px solid var(--line); }.feature-row:first-child { padding-top:0; }.feature-number { font:10px var(--mono); color:#a980d4; padding-top:5px; }.feature-icon { display:none; }.feature-body h3 { font-size:18px; font-weight:500; }.feature-body p { margin-top:10px; color:var(--muted); font-size:12px; line-height:1.9; }.feature-meta { grid-column:2; display:flex; gap:15px; align-items:center; margin-top:16px; color:#877298; font:8px var(--mono); letter-spacing:.12em; }.feature-meta b { color:#b79acb; font-weight:400; }
.interface-section { display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:7%; padding-top:50px; }.interface-frame { position:relative; padding:12px; border-radius:14px; border:1px solid #9674c148; background:linear-gradient(145deg,#251637,#100c1c); box-shadow:0 0 90px #7f3dbd15,0 32px 70px #0006; }.window-bar { display:flex; align-items:center; gap:5px; height:27px; font:7px var(--mono); color:#b198c3; letter-spacing:.08em; }.window-bar span { width:4px; height:4px; border-radius:50%; background:#9270ab; }.window-bar b { margin-left:8px; font-weight:400; }.window-bar em { margin-left:auto; font-style:normal; color:#cdb0f2; }.interface-media { overflow:hidden; border:1px solid var(--line); border-radius:5px; }.interface-media img { width:100%; height:auto; }.interface-scan { display:none; }.interface-note { position:absolute; display:grid; grid-template-columns:20px auto; gap:2px 8px; background:rgba(31,19,49,.96); border:1px solid #8b60ae6b; box-shadow:0 10px 30px #0006; border-radius:6px; padding:12px; }.interface-note span { grid-row:span 2; font:10px var(--mono); color:#cfaaff; }.interface-note b { font-size:11px; font-weight:500; }.interface-note small { color:var(--muted); font-size:9px; }.note-left { left:-18px; top:24%; }.note-right { right:-15px; bottom:12%; }.text-link { display:inline-flex; align-items:center; gap:25px; padding:8px 0; margin-top:24px; color:#d6b8fa; font-size:12px; border-bottom:1px solid #76549d; }.text-link span { font-size:17px; }.text-link:hover { color:#fff; }

.deck-section { display:grid; grid-template-columns:.72fr 1.28fr; gap:7%; align-items:center; border-top:1px solid var(--line); }.deck-tabs { display:flex; gap:4px; width:fit-content; margin-top:30px; padding:4px; border:1px solid var(--line); background:#151020; border-radius:8px; }.deck-tab { border:0; background:transparent; color:#978ba8; padding:10px 18px; font-size:11px; min-height:40px; border-radius:5px; }.deck-tab.active { background:#483062; color:#eee0ff; }.deck-gallery { min-width:0; }.gallery-rail { display:flex; gap:16px; padding:20px 6px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#74538e transparent; scroll-snap-type:x mandatory; }.gallery-card { position:relative; flex:0 0 38%; aspect-ratio:450/629; padding:0; border:1px solid #8965ad55; border-radius:10px; overflow:hidden; background:#160d24; transition:transform .4s,border-color .4s,opacity .4s; scroll-snap-align:center; opacity:.58; }.gallery-card img { width:100%; height:100%; object-fit:cover; }.gallery-card.is-active { opacity:1; border-color:#c59af1; box-shadow:0 0 30px #9b55ee25; }.gallery-card:hover { opacity:1; transform:translateY(-7px); }.gallery-card span { position:absolute; inset:auto 0 0; padding:25px 10px 10px; background:linear-gradient(transparent,#10091ced); font:8px var(--mono); color:#e4d5f8; }.gallery-control { display:flex; align-items:center; gap:13px; color:#81718f; font:9px var(--mono); margin-top:9px; }.gallery-current { color:#d4b4ff; }.gallery-control i { width:70px; height:1px; background:var(--line); }.gallery-next { margin-left:auto; width:44px; height:44px; background:#21132f; border:1px solid #79569e; border-radius:50%; font-size:18px; }.gallery-next:hover { background:#40245b; }.gallery-caption { display:grid; gap:7px; margin-top:24px; }.gallery-caption span { font:8px var(--mono); letter-spacing:.2em; color:#a07cbc; }.gallery-caption b { font-size:18px; font-weight:500; }.gallery-caption small { color:var(--muted); font-size:11px; }

.network-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10%; }.network-visual { position:relative; aspect-ratio:1; width:100%; background:radial-gradient(ellipse,#56288633,transparent 65%); }.network-radar { position:absolute; inset:8%; border:1px solid #9b65cf40; border-radius:50%; }.network-radar::before,.network-radar::after { content:''; position:absolute; inset:16%; border:1px solid #9b65cf33; border-radius:50%; }.network-radar::after { inset:32%; }.network-radar i { position:absolute; left:50%; top:50%; height:100%; width:1px; background:#9b65cf20; }.network-radar i:nth-child(1) { transform:translate(-50%,-50%); }.network-radar i:nth-child(2) { transform:translate(-50%,-50%) rotate(60deg); }.network-radar i:nth-child(3) { transform:translate(-50%,-50%) rotate(-60deg); }.network-radar b { position:absolute; width:7px; height:7px; border-radius:50%; left:50%; top:0; background:#e0c0ff; box-shadow:0 0 20px #a96cef; }.network-node { position:absolute; display:grid; grid-template-columns:5px auto; align-items:center; gap:5px 8px; padding:12px 15px; background:#1b102be8; border:1px solid #8760ad77; border-radius:8px; font:9px var(--mono); box-shadow:0 12px 40px #0004; }.network-node span { width:4px; height:4px; border-radius:50%; background:#c79bf8; }.network-node b { font-weight:400; color:#dfcdf2; }.network-node small { grid-column:2; color:#9982af; font-size:7px; }.node-one { left:34%; top:7%; }.node-two { right:0; bottom:26%; }.node-three { left:1%; bottom:17%; }.network-connection { display:none; }.network-readout { position:absolute; inset:40% 15% auto; display:grid; text-align:center; gap:7px; font:8px var(--mono); color:#93809f; letter-spacing:.15em; }.network-readout b { font-size:39px; font-weight:400; color:#e9dafa; letter-spacing:-.04em; }.network-readout small { font-size:7px; color:#c89aee; }.network-actions { display:flex; gap:18px; align-items:center; margin-top:28px; }.network-note { display:flex; align-items:center; gap:8px; font-size:9px; color:var(--muted); }

.platform-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8%; border-top:1px solid var(--line); }.platform-list { display:grid; grid-template-columns:repeat(3,1fr); margin-top:32px; border-top:1px solid var(--line); }.platform-list>div { display:grid; gap:9px; padding:20px 8px 0 0; }.platform-symbol { font:11px var(--mono); color:#c29ae6; }.platform-list b { font-size:11px; font-weight:400; }.platform-list small { color:#94829f; font-size:10px; }.device-stack { position:relative; height:360px; }.device { position:absolute; background:#20182a; border:1px solid #9571b577; box-shadow:0 30px 60px #020005aa; }.device-screen { position:absolute; inset:9px; overflow:hidden; background:#08050e; border-radius:7px; }.device-screen img { width:100%; height:100%; object-fit:cover; object-position:top left; }.device-desktop { left:0; top:12%; width:90%; aspect-ratio:1.6; border-radius:12px; transform:rotate(-3deg); }.device-phone { width:30%; aspect-ratio:.48; right:-1%; bottom:0; border-radius:24px; transform:rotate(7deg); }.device-phone .device-screen { inset:6px; border-radius:18px; }.device-phone .device-screen img { object-position:top center; }.device-speaker { position:absolute; top:8px; left:36%; width:28%; height:6px; border-radius:10px; background:#050208; z-index:2; }.device>span { position:absolute; top:calc(100% + 13px); left:7px; font:7px var(--mono); color:#a187b7; letter-spacing:.17em; }

.final-cta { position:relative; isolation:isolate; min-height:620px; padding:100px 24px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(ellipse at 50% 100%,#412064 0,#160c25 47%,#090711 77%); border-top:1px solid var(--line); }.cta-content { position:relative; z-index:2; text-align:center; }.cta-content h2 { margin-top:24px; font-size:clamp(42px,5vw,72px); line-height:1.25; font-weight:550; letter-spacing:-.04em; }.cta-content p { color:var(--muted); font-size:13px; margin-top:24px; }.button-large { margin-top:32px; min-width:185px; }.cta-grid { display:none; }.cta-orbit { position:absolute; pointer-events:none; border:1px solid #b18ad626; border-radius:50%; left:50%; top:78%; transform:translate(-50%,-50%); width:850px; height:850px; }.orbit-d { width:1040px; height:1040px; border-color:#b18ad615; }.site-footer { max-width:1440px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:25px; padding:30px 6vw; font:8px var(--mono); color:#9686a7; }.footer-brand { display:flex; gap:12px; align-items:center; }.footer-brand .brand-mark { width:26px; height:29px; font-size:9px; }.footer-meta { display:flex; gap:20px; }.footer-meta a:hover { color:#fff; }

.card-modal { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px; visibility:hidden; opacity:0; transition:opacity .25s,visibility .25s; }.card-modal.is-open { visibility:visible; opacity:1; }.modal-backdrop { position:absolute; inset:0; background:#05020dd9; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }.modal-panel { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; width:min(670px,100%); max-height:90svh; overflow:auto; padding:30px; border:1px solid #986dc070; border-radius:16px; background:linear-gradient(135deg,#2b193c,#100b1c); box-shadow:0 30px 100px #0009; }.modal-panel>img { width:100%; border-radius:9px; align-self:center; }.modal-info { align-self:center; padding-right:10px; }.modal-info>span { color:#b78ed4; font:8px var(--mono); letter-spacing:.1em; }.modal-info h2 { margin-top:20px; font-size:25px; line-height:1.45; font-weight:550; }.modal-info p { color:var(--muted); font-size:12px; margin-top:18px; }.modal-close { position:absolute; right:10px; top:10px; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:#180f24; font-size:24px; }.modal-close:hover { background:#4e2d67; }
.reveal-ready [data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .7s,transform .9s cubic-bezier(.16,1,.3,1); }.reveal-ready [data-reveal].is-visible { opacity:1; transform:none; }

@media(min-width:1600px) { .section-shell,.interface-section,.network-section { padding-left:35px; padding-right:35px; } }
@media(max-width:1050px) { .site-nav { gap:25px; }.nav-links { gap:20px; }.hero { padding-left:6vw; padding-right:6vw; gap:2vw; }.hero h1 { font-size:49px; }.network-actions { flex-wrap:wrap; }.film-heading h2 { font-size:36px; }.film-heading p { font-size:11px; }.device-stack { height:290px; } }
@media(max-width:760px) {
  html { scroll-padding-top:85px; }.site-nav { height:68px; gap:12px; padding-left:max(5vw,env(safe-area-inset-left)); padding-right:max(5vw,env(safe-area-inset-right)); }.brand-copy strong { font-size:12px; }.brand-copy small { font-size:7px; }.brand-mark { width:28px; height:33px; }.nav-play { margin-left:auto; padding:7px 11px; gap:10px; font-size:10px; min-height:40px; }.nav-toggle { display:block; flex-shrink:0; }.nav-links { visibility:hidden; position:absolute; top:68px; left:0; right:0; display:grid; gap:0; padding:12px 6vw 20px; margin:0; background:#130c20; border-bottom:1px solid var(--line); opacity:0; transform:translateY(-8px); transition:opacity .2s,transform .2s,visibility .2s; }.nav-links a { border-bottom:1px solid var(--line); padding:14px 0; }.menu-open .nav-links { visibility:visible; opacity:1; transform:none; }
  .hero { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:128px 7vw 80px; gap:30px; background:radial-gradient(ellipse at 65% 63%,#2a1545,#110b1f 45%,#090711 78%); }.hero-copy { max-width:500px; }.hero h1 { margin-top:26px; font-size:clamp(37px,9.5vw,55px); }.eyebrow { font-size:8px; letter-spacing:.06em; gap:8px; }.eyebrow i { width:18px; }.hero-lede { margin-top:20px; font-size:12px; max-width:330px; }.hero-actions { margin-top:26px; gap:20px; }.button { font-size:11px; padding:0 19px; min-height:46px; gap:20px; }.button-quiet { padding:0; }.hero-facts { margin-top:32px; }.hero-facts b { font-size:18px; }.hero-facts span { font-size:9px; }.hero-facts div { padding-right:20px; }.hero-facts div+div { padding-left:20px; }.hero-stage { width:87%; align-self:center; max-width:390px; margin-top:13px; }.stage-status { font-size:7px; }.stage-caption { font-size:8px; }.stage-readout { font-size:6px; }.stage-readout b { font-size:16px; }.scroll-cue { left:7vw; bottom:24px; font-size:7px; }
  .film-sequence { padding:60px 5vw; }.motion-ready .film-sequence { height:280vh; }.motion-ready .film-sticky { top:68px; height:calc(100svh - 68px); min-height:490px; padding:24px 0 20px; }.film-topline { font-size:7px; gap:10px; letter-spacing:.08em; }.film-topline span:nth-of-type(2),.film-topline i { display:none; }.film-heading { display:block; margin:24px 0; }.film-heading h2 { font-size:30px; }.film-heading p { margin-top:12px; font-size:11px; }.film-heading p br { display:none; }.film-heading .section-kicker { font-size:8px; }.film-card { min-height:420px; padding:30px 7%; justify-content:flex-end; border-radius:13px; }.film-card img { width:77%; right:-12%; top:-4%; height:110%; transform:rotate(8deg); }.film-card::before { background:linear-gradient(0deg,#190f2dec 5%,#190f2d88 45%,#190f2d11),linear-gradient(90deg,#190f2dbb,transparent); }.film-card:nth-child(2)::before { background:linear-gradient(0deg,#241539f2 5%,#24153977 45%,transparent); }.film-card:nth-child(3)::before { background:linear-gradient(0deg,#171a32f2 5%,#171a3277 45%,transparent); }.film-card b { font-size:38px; }.film-card small { font-size:11px; margin-top:15px; }.film-card-no { font-size:9px; margin-bottom:15px; }.film-bottomline { font-size:7px; gap:12px; margin-top:20px; }.motion-ready .film-stage-wrap { min-height:245px; border-radius:13px; }
  .section-shell,.interface-section,.network-section { padding:80px 7vw; }.experience,.deck-section,.platform-section,.network-section { display:flex; flex-direction:column; gap:45px; align-items:stretch; }.section-intro h2,.interface-copy h2,.network-copy h2,.platform-copy h2 { font-size:34px; }.section-intro>p,.interface-copy>p,.network-copy>p,.platform-copy>p { font-size:12px; }.feature-row { padding:25px 0; column-gap:10px; }.feature-body h3 { font-size:16px; }.feature-body p { font-size:11px; }.feature-meta { margin-top:12px; }
  .interface-section { display:flex; flex-direction:column-reverse; gap:35px; }.interface-copy { align-self:stretch; }.interface-frame { width:100%; padding:8px; }.note-left { left:-8px; top:23%; }.note-right { right:-8px; bottom:10%; }.interface-note { padding:8px; gap:1px 5px; grid-template-columns:14px auto; }.interface-note small { font-size:7px; }.interface-note b { font-size:9px; }.interface-note span { font-size:8px; }.window-bar { font-size:6px; }.deck-tabs { margin-top:24px; }.gallery-card { flex-basis:47%; }.gallery-rail { gap:12px; }.gallery-caption { margin-top:18px; }.network-visual { width:90%; align-self:center; }.network-copy { order:-1; }.network-actions { gap:16px; }.network-note { font-size:8px; }.device-stack { height:285px; max-width:420px; width:100%; margin:0 auto; }.platform-list b { font-size:10px; }.platform-list small { font-size:9px; }
  .final-cta { min-height:530px; padding:80px 20px; }.cta-content h2 { font-size:46px; }.cta-content p { font-size:12px; }.cta-orbit { width:610px; height:610px; }.orbit-d { width:760px; height:760px; }.site-footer { flex-direction:column; align-items:flex-start; gap:22px; padding:26px 7vw max(26px,env(safe-area-inset-bottom)); }.footer-meta { flex-wrap:wrap; gap:10px 20px; font-size:7px; }.modal-panel { padding:44px 20px 24px; gap:20px; }.modal-info h2 { font-size:18px; }.modal-info p { font-size:10px; }.modal-info .text-link { font-size:10px; gap:8px; }.modal-info>span { font-size:6px; }
}
@media(max-height:650px) and (min-width:761px) { .motion-ready .film-sticky { min-height:0; padding:18px 0; }.film-heading { margin:12px 0 20px; }.film-heading h2 { font-size:30px; }.film-heading .section-kicker { display:none; }.motion-ready .film-stage-wrap { min-height:180px; }.film-card b { font-size:34px; }.film-card-no { margin-bottom:14px; }.film-card small { margin-top:15px; } }
@media(max-width:760px) and (max-height:650px) { .motion-ready .film-sequence { height:auto; padding:50px 5vw; }.motion-ready .film-sticky { position:relative; top:0; height:auto; min-height:0; }.motion-ready .film-stack { position:relative; display:grid; }.motion-ready .film-card { position:relative; min-height:350px; transform:none!important; }.motion-ready .film-stage-wrap { overflow:visible; }.film-bottomline { display:none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; }.reveal-ready [data-reveal] { opacity:1; transform:none; } }

/* ── 双入口区块（线上对战 / 客户端下载）+ 次要动作按钮 · 2026-10-14 ── */
.button-ghost { background: #1d1329; border-color: #7d5aa8; color: #dcc6ff; }.button-ghost:hover { background: #2c1b42; border-color: #a97fe0; box-shadow: 0 8px 40px #8146d333; }
.hero-actions { flex-wrap: wrap; row-gap: 16px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 32px; }.cta-actions .button-large { margin-top: 0; }
.entry-section { max-width: 1280px; margin: auto; padding: 135px 6vw; border-top: 1px solid var(--line); }
.entry-intro { max-width: 640px; }
.entry-intro h2 { margin-top: 22px; font-size: clamp(34px,3.4vw,52px); font-weight: 600; line-height: 1.28; letter-spacing: -.04em; }
.entry-intro>p { margin-top: 24px; max-width: 420px; color: var(--muted); font-size: 13px; line-height: 2; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 48px; }
.entry-card { position: relative; isolation: isolate; display: grid; gap: 13px; padding: 34px 32px 30px; border: 1px solid #9571b566; border-radius: 12px; background: linear-gradient(160deg,#1c1130,#0d0918); overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.entry-card::before { content: ''; position: absolute; z-index: -1; right: -90px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle,#8a4ede4d,transparent 68%); }
.entry-card:hover { transform: translateY(-6px); border-color: #b98cf0; box-shadow: 0 26px 70px #6b34b533; }
.entry-tag { font: 9px var(--mono); letter-spacing: .22em; color: #b394d8; }
.entry-card b { font-size: clamp(23px,2.3vw,30px); font-weight: 600; letter-spacing: -.02em; }
.entry-card small { color: var(--muted); font-size: 12.5px; line-height: 1.85; }
.entry-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #dcc6ff; }
.entry-cta i { font-style: normal; transition: transform .3s ease; }
.entry-card:hover .entry-cta i { transform: translate(4px,-4px); }
.entry-card-app { background: linear-gradient(160deg,#111c2c,#0a0d18); }
.entry-card-app::before { background: radial-gradient(circle,#22d3ee40,transparent 68%); }
.entry-card-app:hover { border-color: #67e8f9; box-shadow: 0 26px 70px #0e749033; }
.entry-card-app .entry-tag { color: #7fc9dd; }
.entry-card-app .entry-cta { color: #a5e8f7; }
.entry-card-app:hover .entry-cta i { transform: translateY(4px); }
@media(max-width:1050px) { .entry-card { padding: 30px 26px 26px; } }
@media(max-width:760px) {
  .entry-section { padding: 80px 7vw; }
  .entry-intro h2 { font-size: 34px; }
  .entry-intro>p { font-size: 12px; }
  .entry-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
  .entry-card { padding: 26px 22px 24px; }
  .entry-card b { font-size: 22px; }
  .entry-card small { font-size: 11.5px; }
  .entry-cta { font-size: 11.5px; }
}