/* Landing motion and original product illustrations. Existing Common tokens remain authoritative. */
:root { --motion-ease: cubic-bezier(.16, 1, .3, 1); }
.hero { isolation: isolate; }
.hero h1 { perspective: 900px; background: none; -webkit-text-fill-color: initial; }
.hero-letter { display: inline-block; background: linear-gradient(140deg, #e0edff 10%, #91b7f1 55%, #e4efff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transform-origin: 50% 100%; }
.hero .spotlight { clip-path: none; filter: none; top: -4rem; width: min(1100px, 145%); height: 1050px; background: conic-gradient(from 157deg at 50% 0%, transparent 0deg, #819fda03 3deg, #819fda1b 17deg, #a2bce523 23deg, #819fda1b 29deg, #819fda03 43deg, transparent 46deg); mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, #0009 45%, transparent 73%); }
.hero-showcase { perspective: 1200px; }
.hero-login { transform-style: preserve-3d; }
.hero-login::after { content: ''; position: absolute; pointer-events: none; inset: 0; background: radial-gradient(ellipse at 50% 0, #b3cfff12, transparent 60%); }
.hero-grid::after { content: ''; position: absolute; left: calc(50% - 400px); right: calc(50% - 400px); top: 80px; height: 4px; background: linear-gradient(90deg, transparent, #acc7ed66, transparent); opacity: .2; }
.under-showcase { position: relative; }
.edge-light { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; padding: 1px; overflow: hidden; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; opacity: .6; }
.edge-light > i { position: absolute; width: 640px; height: 640px; top: calc(50% - 320px); left: calc(50% - 320px); background: conic-gradient(transparent 0deg 220deg, #678ecc70 250deg, #d5e7ff 280deg, transparent 305deg); animation: common-rotate 12s linear infinite; animation-play-state: paused; }
.chip-face .edge-light > i, .access-detail-card .edge-light > i { width: 360px; height: 360px; top: calc(50% - 180px); left: calc(50% - 180px); }
.is-active .edge-light > i { animation-play-state: running; }
.section-anchor { scroll-margin-top: 2rem; }
[data-reveal] { transition: opacity 1.3s var(--motion-ease), transform 1.3s var(--motion-ease); }
.reveal-pending { opacity: 0; transform: translateY(28px); }
.visual-section-heading { position: relative; z-index: 1; text-align: center; margin: 0 auto 2.5rem; }
.visual-section-heading h2 { color: #c4d9f6; text-shadow: 0 2px 24px #aecfff19; font-size: clamp(2rem, 4vw, 3.1rem); }
.visual-section-heading h2 span { color: #a1bddf; }
.visual-section-heading p { max-width: 590px; margin: 0 auto; color: #8e9fba; font-size: .9rem; }
.visual-footnote { text-align: center; font-size: .65rem !important; color: #8496b3; max-width: 750px !important; margin: 1.5rem auto 0; padding: 0 1rem; }
.system-section { position: relative; padding-bottom: 3rem; max-width: 1200px; }
.system-section::before { content: ''; position: absolute; inset: 6rem 0 0; z-index: -1; background: radial-gradient(ellipse at 50% 45%, #31438227, transparent 65%); pointer-events: none; }
.circuit-scene { position: relative; }
.circuit-board { position: relative; max-width: 1040px; margin: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .8rem; padding: 1rem .5rem; isolation: isolate; }
.board-aura { position: absolute; inset: -3rem 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 45%, #4c64c221 0%, #4c64c210 45%, transparent 90%); }
.circuit-traces, .circuit-energy, .circuit-pulses, .pcb-components { display: none; }
.circuit-pulses { pointer-events: none; }
.circuit-flow { opacity: .68; transition: opacity .65s; }
.circuit-packet { stroke-linecap: round; stroke-dasharray: 8 112; stroke-dashoffset: 10; animation: circuit-travel var(--travel-time) linear infinite; animation-delay: var(--travel-delay); animation-play-state: paused; }
.packet-glow { stroke: #91bbff; stroke-width: 6; opacity: .3; filter: blur(1.5px); }
.packet-tail { stroke: #9ebff0; stroke-width: 1.4; opacity: .8; }
.packet-head { stroke: #e3f1ff; stroke-width: 2.2; stroke-dasharray: 1.2 118.8; --packet-start: 3.2; --packet-end: -116.8; }
.is-active .circuit-packet { animation-play-state: running; }
[data-circuit-stage="trading"] .flow-trading,
[data-circuit-stage="treasury"] .flow-treasury,
[data-circuit-stage="models"] .flow-models,
[data-circuit-stage="account"] .flow-account,
[data-circuit-stage="holdings"] .flow-holdings,
[data-circuit-stage="budget"] .flow-budget { opacity: 1; }
.circuit-node { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; min-width: 0; gap: 1rem; -webkit-tap-highlight-color: transparent; }
.node-treasury { grid-column: 1 / -1; grid-row: 1; }
.node-budget { grid-column: 1 / -1; }
.chip-mount { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid #2a334e; border-radius: 14px; padding: 8px; background: linear-gradient(145deg, #141a2c, #0b1020); box-shadow: 0 0 0 7px #0c11206b, inset 0 1px 1px #e3eaff09, 0 8px 30px #0002; }
.chip-mount::before { content: ''; position: absolute; inset: 5px; border-radius: 10px; border: 1px solid #48547344; }
.chip-face { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 8px; border: 1px solid #34415d; background: linear-gradient(145deg, #27314a, #101729 80%); box-shadow: 0 0 0 2px #060a14, inset 0 2px 1px #d0dcff1b, 0 0 0 3px #48536f3b; transition: border-color .6s, box-shadow .6s, transform .7s var(--motion-ease); isolation: isolate; }
.chip-face::after { content: ''; position: absolute; z-index: -1; inset: 8px; border-radius: 4px; border: 1px solid #050a157a; background: linear-gradient(145deg, #323e5929, #080d1a19); }
.circuit-node .edge-light { opacity: .2; transition: opacity .5s; }
.circuit-node.selected .edge-light, .circuit-node:hover .edge-light { opacity: 1; }
.circuit-node.selected .chip-face, .circuit-node:hover .chip-face { border-color: #a7c5f5a3; box-shadow: 0 0 0 2px #060a14, 0 0 0 3px #667da13d, 0 0 22px #90b6ff28, inset 0 0 20px #adc6ff0a; transform: translateY(-2px); }
.chip-screw { position: absolute; width: 3px; height: 3px; border-radius: 1px; background: #020712; box-shadow: inset 0 1px #59729966; }
.screw-one { top: 5px; left: 5px; }.screw-two { bottom: 5px; right: 5px; }
.node-label { position: relative; z-index: 3; display: inline-block; border: 1px solid #36436177; border-radius: 5px; background: linear-gradient(#1a2338, #0f1423); padding: .3rem .55rem; font-size: .65rem; white-space: nowrap; color: #8e9fbd; transition: color .4s, border-color .4s; }
.selected .node-label { color: #c8ddfc; border-color: #6481ad88; }
.node-treasury .chip-mount { width: 156px; height: 156px; padding: 15px; border-radius: 15px; background: repeating-linear-gradient(90deg, #0b1222 0 3px, #33405c 3px 5px, #0b1222 5px 8px); box-shadow: 0 0 0 7px #141b3077, 0 0 0 8px #2b34515e, 0 0 60px #778bdb1b; }
.node-treasury .chip-mount::before { inset: 8px; background: #101729; border-color: #3e4f79; border-radius: 9px; }
.node-treasury .chip-face { border-color: #788dba8f; background: linear-gradient(145deg, #3b4667, #19223c 78%); }
.core-emblem { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 17px; background: linear-gradient(130deg, #52638855, #202b4544); border: 1px solid #7c91bd44; box-shadow: inset 0 1px #b9d2ff24, 0 0 30px #929be530; }
.core-emblem .brand-symbol { width: 58px; height: 58px; filter: drop-shadow(0 3px 6px #91acff44); }
.chip-serial { position: absolute; bottom: 10px; left: 0; right: 0; font-size: 4px; color: #8e9fc0; letter-spacing: .1em; }
.core-status { display: flex; position: absolute; top: 9px; right: 10px; gap: 3px; }.core-status i { display: block; width: 9px; height: 2px; background: #687dac5c; }
.core-pins { position: absolute; top: 10px; left: 9px; width: 10px; height: 12px; border: 1px solid #6d80a36b; border-radius: 2px; background: repeating-linear-gradient(90deg, #172139 0 1px, #5b6f9533 1px 2px); }
.signal-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 30px; }
.signal-bars i { display: block; height: var(--bar, 65%); width: 3px; background: linear-gradient(#b1d5ff, #506ba2); border-radius: 1px; transform-origin: center bottom; animation: signal-breathe 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); animation-play-state: paused; opacity: .65; }
.trading-display { width: 48px; padding: 7px 4px; border: 1px solid #0a101e; border-radius: 4px; background: #0c1425; box-shadow: 0 1px #57759932 inset; }
.trading-display .signal-bars { height: 27px; gap: 2px; }.trading-display .signal-bars i { width: 2px; }
.tiny-led { display: block; height: 2px; width: 20px; margin: 6px auto 0; background: #9bcae980; box-shadow: 0 0 4px #89b9fdaa; }
.model-orbit { position: relative; width: 49px; height: 49px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #6e618b8c; box-shadow: 0 0 0 6px #131b2d, 0 0 0 7px #3a415d; }
.model-orbit b { font-size: 22px; color: #d5b4ed; font-weight: 400; text-shadow: 0 0 12px #dda2fb99; }
.model-orbit i { position: absolute; inset: 3px; border: 1px solid transparent; border-top-color: #99c0f9; border-radius: 50%; animation: common-rotate 7s linear infinite; animation-play-state: paused; }
.model-orbit i:nth-child(2) { inset: 8px; animation-direction: reverse; animation-duration: 5s; border-top-color: #d9b1ed; }.model-orbit i:nth-child(3) { inset: -5px; opacity: .3; }
.identity-chip { display: flex; flex-direction: column; gap: 5px; padding: 5px; }.identity-chip > i { display: grid; place-items: center; color: #a1cfc2; margin-bottom: 3px; }.identity-chip .icon { width: 19px; height: 19px; }.identity-chip > span { display: flex; gap: 4px; }.identity-chip b { width: 7px; height: 3px; background: #94b5bb44; border: 1px solid #121b2c; border-radius: 1px; }
.token-stack { position: relative; width: 43px; height: 43px; }.token-stack i { display: grid; place-items: center; position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #758ab59e; background: linear-gradient(135deg, #3b4b6c, #111b30); box-shadow: inset 0 0 0 3px #1a28417d, 0 2px 4px #080c18; color: #acbee7; font-size: 21px; font-style: normal; animation: token-rise 4s ease-in-out infinite; animation-play-state: paused; }
.token-stack i:nth-child(1) { top: 10px; left: 0; }.token-stack i:nth-child(2) { top: 5px; left: 4px; animation-delay: -.3s; }.token-stack i:nth-child(3) { top: 0; left: 8px; animation-delay: -.6s; }
.allowance-chip .signal-bars { gap: 3px; height: 22px; }.allowance-chip .signal-bars i { width: 2px; height: 90%; background: #b9c9f0; }.chip-budget-line { display: block; height: 2px; border-radius: 2px; width: 36px; background: #8796c444; margin-top: 8px; }
.system-narration { max-width: 560px; margin: 2.5rem auto 0; display: flex; gap: 1rem; align-items: flex-start; min-height: 135px; }
.narration-number { display: grid; place-items: center; flex-shrink: 0; width: 35px; height: 35px; border-radius: 9px; border: 1px solid #46587966; background: #17223866; color: #a6c5ee; font-size: .7rem; font-variant-numeric: tabular-nums; }
.system-narration h3 { color: #c9dcf7; font-size: 1rem; margin: .25rem 0 .5rem; letter-spacing: -.02em; }.system-narration p { font-size: .8rem; max-width: 460px; color: #8a9ebf; }
.circuit-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 1.8rem; row-gap: .5rem; }
.step-dots { display: flex; align-items: center; }.step-dots button { min-width: 44px; min-height: 44px; display: grid; place-items: center; }.step-dots button > span { display: block; width: 5px; height: 5px; border-radius: 3px; background: #425572; transition: transform .4s, background .4s; }.step-dots button.selected > span { background: #c1daff; transform: scale(1.4); box-shadow: 0 0 10px #aac7ff55; }
.motion-toggle { display: flex; align-items: center; gap: .45rem; color: #90a7c8; font-size: .65rem; min-height: 44px; border: 1px solid #34435f88; border-radius: 7px; padding: .4rem .8rem; }.motion-toggle:hover { color: #d5e7ff; background: #b7d0ff08; }.pause-symbol { font-size: .85rem; }.motion-toggle:disabled { cursor: default; }

/* The dashboard is real local markup, with sample-only controls around it. */
.dashboard-showcase { max-width: 1200px; position: relative; padding-top: 5rem; padding-bottom: 4rem; }
.dashboard-showcase::before { content: ''; pointer-events: none; position: absolute; top: 0; bottom: 0; left: 1.5rem; right: 1.5rem; z-index: -1; border-left: 1px solid #26314644; border-right: 1px solid #26314644; mask-image: linear-gradient(transparent, #000 30%, #000 90%, transparent); }
.product-theater { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 3.8rem .8rem 1rem; border: 1px solid #39425a80; border-radius: 15px; background: radial-gradient(ellipse at 50% 30%, #313e722a, transparent 70%), linear-gradient(140deg, #111523 0%, #090d1780 80%); box-shadow: inset 0 1px #ccdafa15, 0 -10px 75px #6e8be511; isolation: isolate; }
.theater-grid { pointer-events: none; position: absolute; inset: 2rem 0 0; z-index: -1; background-image: linear-gradient(#819ccc0a 1px, transparent 1px), linear-gradient(90deg, #819ccc0b 1px, transparent 1px), radial-gradient(#9bb8dd33 .65px, transparent .8px); background-size: 100% 140px, 180px 100%, 33px 33px; background-position: center; mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 90%); }
.theater-aura { position: absolute; z-index: -1; inset: -100px 10% 25%; pointer-events: none; background: radial-gradient(ellipse, #738ebc18, transparent 70%); }
.theater-window-bar { position: absolute; top: 0; left: 0; right: 0; padding: .8rem 1rem; border-bottom: 1px solid #3c466126; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #7c8eac; font-size: .56rem; }.theater-window-bar > span:first-child { display: flex; gap: 5px; }.theater-window-bar i { width: 5px; height: 5px; background: #4e5a774f; border-radius: 50%; }.theater-window-bar b { font-weight: 400; }.theater-preview-label { display: none; }
.floating-control { position: relative; z-index: 3; border: 1px solid #48536e8c; border-radius: 11px; padding: .85rem; min-width: 0; background: linear-gradient(145deg, #1b2335ef, #101522f5); box-shadow: inset 0 1px #d6e3ff10, 0 10px 30px #0003; }
.floating-control::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 1px solid #7490bb12; border-radius: 15px; pointer-events: none; }
.float-label { display: block; font-size: .58rem; color: #9cabc7; margin-bottom: .6rem; }.float-subtext { display: block; color: #7188ac; font-size: .57rem; line-height: 1.5; margin-top: .65rem; }.float-subtext b { color: #aac7ef; font-weight: 400; }
.float-model { grid-column: 1 / -1; }.preview-model-options { display: flex; gap: .3rem; }.preview-model-options button { display: flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid #44547366; border-radius: 6px; min-height: 44px; padding: .45rem; flex: 1; color: #8197b7; font-size: .63rem; background: #0d1524; }.preview-model-options button span { font-size: 1.1rem; }.preview-model-options button.selected { color: #d0e1fa; background: #2b3b5780; border-color: #7a98c67a; box-shadow: 0 0 0 2px #aecbff08; }
.float-credits { grid-column: 1 / -1; }.float-credits strong { display: block; color: #c4d9f7; font-size: 1.7rem; line-height: 1.15; font-weight: 500; font-variant-numeric: tabular-nums; }.float-credits strong small { font-size: .65rem; font-weight: 400; color: #859dbf; }.preview-credit-bars { display: flex; gap: 4px; margin-top: .8rem; }.preview-credit-bars i { height: 13px; flex: 1; border-radius: 2px; background: #9ebfe66b; box-shadow: 0 0 4px #a5c8ff14; }.preview-credit-bars i:nth-last-child(-n+3) { background: #33435b; }
.showcase-dashboard { position: relative; grid-column: 1 / -1; border: 1px solid #596c92aa; border-radius: 11px; background: #0d1423; overflow: hidden; box-shadow: 0 0 0 5px #121b2e88, 0 0 0 6px #45567530, 0 20px 40px #0005; min-width: 0; }
.preview-app-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .8rem; border-bottom: 1px solid #34445c69; background: linear-gradient(#202b4060, #111a2a60); }.preview-app-top > span:first-child { display: flex; align-items: center; gap: .25rem; font-size: .9rem; letter-spacing: -.05em; color: #c7d9f4; }.preview-app-top .brand-symbol { width: 20px; height: 20px; }.preview-app-top > span:last-child { font-size: .5rem; display: flex; align-items: center; gap: .4rem; color: #8197b9; }
.preview-app-body { display: flex; flex-direction: column; min-width: 0; }.preview-app-nav { display: flex; gap: .25rem; padding: .5rem; border-bottom: 1px solid #34445c55; }.preview-app-nav button { display: flex; flex: 1; justify-content: center; align-items: center; gap: .35rem; border-radius: 5px; min-height: 44px; padding: .4rem; color: #7e96bb; font-size: .55rem; }.preview-app-nav button .icon { width: 13px; height: 13px; }.preview-app-nav button.selected { color: #bfdaff; background: #243652; }.preview-nav-label, .preview-nav-footer { display: none; }
.preview-app-content { padding: 1.2rem .8rem; min-width: 0; min-height: 305px; width: 100%; }.preview-view-kicker { color: #748baa; font-size: .45rem; letter-spacing: .13em; margin-bottom: .7rem; }.preview-app-content h3 { font-size: 1rem; letter-spacing: -.03em; line-height: 1.35; color: #d0e0f7; }.preview-app-content .preview-subheading { font-size: .55rem; margin-top: .4rem; color: #7c96b8; }.preview-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 1.2rem 0; }.preview-metrics > div { border: 1px solid #3a4c686b; border-radius: 6px; padding: .65rem; min-width: 0; background: linear-gradient(135deg, #23304a60, #121c2d80); }.preview-metrics span:first-child { font-size: .5rem; color: #869ebd; display: block; margin-bottom: .45rem; }.preview-metrics b { color: #c5dcfc; font-size: 1.2rem; font-weight: 400; line-height: 1.4; letter-spacing: -.04em; white-space: nowrap; }.preview-metrics small { font-size: .5rem; letter-spacing: 0; color: #829abd; }.preview-metrics .preview-level { font-size: .86rem; letter-spacing: -.02em; }.preview-meter { display: block; width: 100%; height: 3px; background: #2b3c5b; border-radius: 3px; margin-top: .7rem; }.preview-meter i { display: block; width: 82%; height: 100%; border-radius: 3px; background: #accbf7; }.preview-green { display: block; font-size: .5rem; color: #a5cdbd; margin-top: .6rem; }
.preview-creation-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }.preview-creation-row > span { display: flex; flex-direction: column; padding: .6rem .5rem; gap: .4rem; border: 1px solid #3445618c; border-radius: 6px; min-width: 0; background: #19284055; }.preview-creation-row i { font-style: normal; font-size: 1.1rem; color: #afc9ed; }.preview-creation-row b { font-size: .49rem; font-weight: 400; line-height: 1.5; color: #b4cbea; }.preview-creation-row small { color: #748aac; font-size: .45rem; line-height: 1.6; }.preview-activity { display: flex; align-items: center; gap: .4rem; font-size: .5rem; color: #8da5c7; margin-top: 1.1rem; }.preview-activity > span:last-child { margin-left: auto; }
.float-level { grid-column: 1 / -1; }.preview-tier-options { display: flex; gap: .25rem; }.preview-tier-options button { min-height: 44px; flex: 1; border: 1px solid #334761; border-radius: 5px; color: #768ba9; font-size: .62rem; padding: .35rem .3rem; }.preview-tier-options .selected { background: #2f415e; color: #c6ddfc; border-color: #7593ba; }
.float-health { grid-column: 1 / -1; }.preview-treasury-toggle { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0; text-align: left; font-size: .66rem; color: #b6cbe8; }.mini-switch { display: inline-block; width: 31px; height: 17px; border-radius: 10px; border: 1px solid #4d6182; background: #172338; padding: 2px; }.mini-switch i { display: block; width: 11px; height: 11px; background: #839ec4; border-radius: 50%; transition: transform .4s var(--motion-ease), background .4s; }.preview-treasury-toggle[aria-pressed=true] .mini-switch i { transform: translateX(12px); background: #bcd7ff; }.preview-treasury-toggle[aria-pressed=true] .mini-switch { background: #2a446b; }
.preview-chat-view { text-align: center; padding-top: 1rem; }.preview-chat-logo { margin: 1rem auto; width: 46px; height: 46px; }.preview-chat-logo img { width: 100%; height: 100%; object-fit: contain; }.preview-chat-view p { font-size: .62rem; margin-top: .5rem; }.preview-prompt-example { margin-top: 1.5rem; border: 1px solid #516b92; border-radius: 7px; display: flex; justify-content: space-between; gap: .4rem; padding: .7rem .6rem; font-size: .58rem; color: #91a9cc; background: #1c2b4380; }.preview-prompt-example b { color: #c9e0ff; font-size: .9rem; }.preview-chat-meta { display: flex; justify-content: space-between; margin-top: .6rem; color: #748fb4; font-size: .49rem; }.preview-chart { border: 1px solid #3b4e6c66; border-radius: 6px; padding: .7rem; background: #15213888; }.preview-chart > div { display: flex; justify-content: space-between; color: #8da6c9; font-size: .55rem; }.preview-chart b { font-weight: 400; color: #b8d2f6; }.preview-chart svg { width: 100%; margin-top: .8rem; display: block; }.preview-caption { font-size: .56rem !important; color: #8ba5c7 !important; margin-top: .8rem; }
.showcase-bottom { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 1.5rem; row-gap: .7rem; padding: 1.5rem 0; }.showcase-bottom p { font-size: .7rem; color: #8095b5; }.showcase-bottom .button { font-size: .7rem; }

/* Five small explanatory scenes, following the reference's 3 + 2 composition. */
.access-details { max-width: 1100px; padding-top: 3rem; }
.access-card-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; }
.access-detail-card { display: flex; flex-direction: column; flex: 0 1 330px; min-width: 0; width: 100%; padding: 0 1.15rem 1.4rem; border: 1px solid #343d5366; border-radius: 16px; overflow: hidden; position: relative; isolation: isolate; background: radial-gradient(ellipse at 50% 0, #33426038, transparent 85%), #0a0e18; box-shadow: inset 0 1px #cedcf909; }
.access-detail-card:nth-child(2) { background: radial-gradient(ellipse at 50% 0, #44517c44, transparent 85%), #0d1221; }
.access-detail-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background-image: radial-gradient(#8eacd636 .55px, transparent .8px); background-size: 13px 13px; mask-image: radial-gradient(ellipse at 50% 35%, #0009, transparent 62%); }
.access-detail-card h3 { text-align: center; color: #b4c6e1; font-size: .96rem; letter-spacing: -.015em; margin-bottom: .5rem; }.access-detail-card > p { font-size: .65rem; line-height: 1.6; color: #7e94b5; text-align: center; max-width: none; }.detail-illustration { position: relative; display: flex; align-items: center; justify-content: center; min-height: 175px; width: 100%; }
.linked-core { display: grid; place-items: center; position: relative; width: 62px; height: 67px; background: linear-gradient(135deg, #263650, #0c1526); border: 1px solid #80a4d3; border-radius: 19px 19px 25px 25px; box-shadow: 0 0 0 5px #0c1322, 0 0 0 6px #40587566, 0 0 22px #94c3fb33, inset 0 0 20px #c4ddff0d; z-index: 2; }.linked-core > .icon { width: 27px; height: 27px; color: #b9d8ff; }
.identity-tile { position: absolute; width: 53px; height: 49px; top: calc(50% - 25px); border: 1px solid #3b4c69; border-radius: 8px; display: grid; place-items: center; background: #151e30; box-shadow: inset 0 1px #d9e5ff11; }.identity-left { left: 8%; animation: identity-join-left 5.5s ease-in-out infinite; animation-play-state: paused; }.identity-right { right: 8%; animation: identity-join-right 5.5s ease-in-out infinite; animation-play-state: paused; color: #cad8ec; }.identity-tile .provider-icon { width: 20px; height: 20px; }.identity-track { position: absolute; left: 10%; right: 10%; top: 50%; border-top: 1px solid #6787b650; }.identity-track span { position: absolute; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #b6d9ff, transparent); animation: connector-pulse 5.5s ease-in-out infinite; animation-play-state: paused; }.linked-check { display: grid; place-items: center; width: 21px; height: 21px; position: absolute; top: calc(50% + 20px); left: calc(50% + 18px); border: 1px solid #6c9bb5; border-radius: 50%; background: #263f4c; z-index: 3; color: #bbe3d3; animation: identity-check 5.5s ease-in-out infinite; animation-play-state: paused; }.linked-check .icon { width: 12px; height: 12px; }
.holder-slot { position: absolute; left: 5%; top: 47px; width: 75%; height: 82px; border: 1px solid #364764; border-radius: 5px; background: linear-gradient(135deg, #263149, #121b2f); box-shadow: inset 0 1px #d0e3fc13; }.holder-slot::before { content: ''; position: absolute; top: 23px; left: 8px; width: 4px; height: 24px; background: #080f1e; border: 1px solid #354765; border-radius: 3px; }
.access-pass { position: relative; width: 122px; padding: 11px; background: linear-gradient(135deg, #2d3a57, #141c31); border: 1px solid #586e9a; border-radius: 9px; margin-left: 40px; box-shadow: 0 0 0 4px #0c1321, 0 0 0 5px #3c4c695e, 0 8px 25px #0006; transform: rotate(-4deg); animation: holder-unlock 6s var(--motion-ease) infinite; animation-play-state: paused; }.pass-chip { width: 24px; height: 23px; display: grid; place-items: center; color: #b8c4e7; border: 1px solid #657fa167; border-radius: 5px; background: #3b4a672e; margin-bottom: 12px; }.access-pass > span { font-size: 5px; letter-spacing: .12em; color: #91a6cb; display: block; }.access-pass > b { display: block; font-weight: 400; font-size: 21px; color: #b5cdef; margin: 5px 0 10px; }.access-pass small { font-size: 7px; color: #819abf; }.pass-dots { display: flex; gap: 4px; }.pass-dots i { width: 3px; height: 3px; background: #aec1e766; border-radius: 1px; }.holder-spark { position: absolute; right: 9%; top: 25%; font-size: 24px; color: #c4d7fa; animation: soft-beacon 6s ease-in-out infinite; animation-play-state: paused; }
.elastic-display { position: relative; width: 205px; border: 1px solid #3b4d6c; border-radius: 9px; padding: 12px; box-shadow: 0 0 0 4px #0c1321, 0 0 0 5px #36465f66, inset 0 1px #d7e4ff15; background: linear-gradient(#182238, #0d1423); }.elastic-display > div:first-child { display: flex; justify-content: space-between; font-size: 6px; letter-spacing: .12em; color: #8fa4c7; }.elastic-display > div:first-child b { color: #b4d5c6; font-size: 15px; line-height: 10px; font-weight: 400; }.elastic-columns { margin: 7px 0 10px; }.elastic-columns .signal-bars { height: 28px; justify-content: flex-start; gap: 5px; }.elastic-columns .signal-bars i { width: 7px; opacity: .7; }.elastic-threshold { display: flex; justify-content: space-between; align-items: center; padding-top: 7px; border-top: 1px solid #283b58; }.elastic-threshold > span { font-size: 5px; letter-spacing: .05em; color: #7f98ba; }.threshold-window { height: 18px; overflow: hidden; }.threshold-window > div { animation: threshold-roll 8s var(--motion-ease) infinite; animation-play-state: paused; }.threshold-window b { display: block; height: 18px; line-height: 18px; font-size: 13px; color: #b6cdef; font-weight: 400; font-variant-numeric: tabular-nums; }
.radar-illustration { overflow: hidden; margin: 0 -1.15rem; width: calc(100% + 2.3rem); }.access-radar { position: absolute; width: 285px; height: 285px; border-radius: 50%; top: -149px; left: calc(50% - 142px); background: repeating-conic-gradient(#99b9e210 0deg 1deg, transparent 1deg 30deg); }.radar-ring { position: absolute; border-radius: 50%; border: 1px solid #5f759733; box-shadow: 0 0 0 1px #0a112280, inset 0 0 14px #9bbdef06; }.ring-1 { inset: 0; }.ring-2 { inset: 30px; }.ring-3 { inset: 60px; }.ring-4 { inset: 90px; }.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 60deg, transparent 0deg 295deg, #aac9ee05 300deg, #b4d4ff3a 357deg, #d1e6ff6b 359deg, transparent 360deg); animation: common-rotate 7s linear infinite; animation-play-state: paused; mask-image: radial-gradient(circle, transparent 13%, #000 16%, #000 95%, transparent 100%); }.radar-center { display: grid; place-items: center; position: absolute; width: 40px; height: 40px; top: calc(50% - 20px); left: calc(50% - 20px); border-radius: 50%; border: 1px solid #425775; background: #28364f; color: #a9c5e9; }.radar-center .icon { width: 20px; }.radar-blip { position: absolute; width: 5px; height: 5px; background: #d6b7e2; border-radius: 50%; box-shadow: 0 0 0 4px #dfb4e719, 0 0 10px #dab9fa55; animation: radar-detect 7s linear infinite; animation-play-state: paused; }.blip-1 { top: 77%; left: 25%; animation-delay: -.5s; }.blip-2 { top: 87%; left: 61%; animation-delay: -3s; }
.budget-counter { position: relative; width: 224px; border: 1px solid #344a6c; background: linear-gradient(145deg, #1b273c, #0b1323); border-radius: 13px; padding: 11px; box-shadow: 0 0 0 4px #0d1424, 0 0 0 5px #394d6e77, 0 7px 35px #0a1120; }.budget-pips { display: flex; gap: 5px; }.budget-pips > span { height: 39px; flex: 1; border: 1px solid #4962856b; border-radius: 12px; background: #080f1c; display: grid; place-items: center; box-shadow: inset 0 1px #0005; }.budget-pips i { width: 4px; height: 4px; border-radius: 50%; background: #b8d8ff; box-shadow: 0 0 7px #a5cfff99; animation: budget-use 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.65s); animation-play-state: paused; }.budget-caption { display: flex; justify-content: space-between; align-items: center; font-size: 5px; color: #7c96bb; letter-spacing: .1em; margin: 10px 2px 0; }.budget-caption b { font-weight: 400; font-size: 12px; color: #a3bada; }
.is-active .signal-bars i, .is-active .model-orbit i, .is-active .token-stack i, .is-active .identity-tile, .is-active .identity-track span, .is-active .linked-check, .is-active .access-pass, .is-active .holder-spark, .is-active .threshold-window > div, .is-active .radar-sweep, .is-active .radar-blip, .is-active .budget-pips i { animation-play-state: running; }
.motion-paused .motion-scene *, .motion-paused .motion-scene *::before, .motion-paused .motion-scene *::after { animation-play-state: paused !important; }

@keyframes common-rotate { to { transform: rotate(360deg); } }
@keyframes circuit-travel { from { stroke-dashoffset: var(--packet-start, 10); } to { stroke-dashoffset: var(--packet-end, -110); } }
@keyframes signal-breathe { 0%,100% { transform: scaleY(.45); opacity: .45; } 45% { transform: scaleY(1); opacity: .9; } 75% { transform: scaleY(.7); opacity: .7; } }
@keyframes token-rise { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes identity-join-left { 0%,100% { transform: translateX(-6px); opacity: .55; } 35%,70% { transform: translateX(12px); opacity: 1; } }
@keyframes identity-join-right { 0%,100% { transform: translateX(6px); opacity: .55; } 35%,70% { transform: translateX(-12px); opacity: 1; } }
@keyframes connector-pulse { 0%,100% { opacity: .15; transform: scaleX(.3); } 45%,65% { opacity: .8; transform: scaleX(1); } }
@keyframes identity-check { 0%,22%,100% { opacity: .2; transform: scale(.7); } 38%,85% { opacity: 1; transform: scale(1); } }
@keyframes holder-unlock { 0%,100% { transform: translateX(-12px) rotate(-7deg); } 45%,70% { transform: translateX(7px) rotate(1deg); } }
@keyframes soft-beacon { 0%,100% { opacity: .15; transform: scale(.8); } 45%,65% { opacity: 1; transform: scale(1); } }
@keyframes threshold-roll { 0%,27% { transform: translateY(0); } 42%,77% { transform: translateY(-18px); } 92%,100% { transform: translateY(-36px); } }
@keyframes radar-detect { 0%,20%,100% { opacity: .1; transform: scale(.65); } 29%,45% { opacity: 1; transform: scale(1); } 65% { opacity: .4; transform: scale(.9); } }
@keyframes budget-use { 0%,15%,100% { opacity: .15; transform: scale(.55); } 25%,75% { opacity: 1; transform: scale(1); } }

@media (min-width: 414px) {
  .float-credits, .float-health { grid-column: auto; }.float-credits { grid-row: 2; }.float-health { grid-row: 2; }.float-level { grid-column: 1 / -1; }
}
@media (min-width: 600px) {
  .circuit-board { display: block; aspect-ratio: 1040 / 540; padding: 0; }
  .circuit-traces { display: block; width: 100%; height: 100%; position: absolute; inset: 0; opacity: .65; }
  .circuit-energy { display: block; position: absolute; inset: 0; mask-image: url('/circuit-traces.svg'); -webkit-mask-image: url('/circuit-traces.svg'); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; overflow: hidden; opacity: .35; }
  .circuit-pulses { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .circuit-energy i { display: block; position: absolute; left: 0; top: -50%; width: 100%; height: 200%; background: conic-gradient(from 0deg, transparent 0deg 265deg, #769dd522 280deg, #b9d8ff 310deg, transparent 328deg); animation: common-rotate 10s linear infinite; animation-play-state: paused; }
  .is-active .circuit-energy i { animation-play-state: running; }
  .pcb-components { display: block; position: absolute; inset: 0; mask-image: radial-gradient(ellipse, #000 30%, transparent 90%); opacity: .6; }
  .pcb-part { display: flex; flex-wrap: wrap; gap: 3px; position: absolute; width: 30px; }.pcb-part i { width: 4px; height: 6px; border: 1px solid #43567a44; background: #35456433; border-radius: 1px; box-shadow: 0 -2px #46587822, 0 2px #46587822; }.pcb-part-1 { width: 55px; gap: 4px; }.pcb-part-1 i { width: 2px; height: 2px; }.pcb-part-2 { width: 60px; }.pcb-part-2 i { width: 8px; height: 2px; }
  .circuit-node { position: absolute; width: 10%; height: 20%; top: 46%; left: 17.5%; transform: translate(-50%, -50%); display: block; }
  .chip-mount { width: 100%; height: 100%; padding: 7px; border-radius: 11px; }
  .node-label { position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%); font-size: .58rem; padding: .25rem .4rem; }
  .node-treasury { width: 18%; height: 34%; top: 31%; left: 50%; }.node-treasury .chip-mount { width: 100%; height: 100%; padding: 14px; }.node-treasury .node-label { top: calc(100% + 20px); }
  .node-models { left: 82.5%; }.node-account { left: 30.5%; top: 80%; }.node-holdings { left: 50%; top: 80%; }.node-budget { left: 69.5%; top: 80%; }
  .node-account .chip-mount { height: 90%; }.chip-serial { font-size: 4px; }.core-emblem { width: 60%; height: 60%; border-radius: 13px; }.core-emblem .brand-symbol { width: 90%; height: 90%; }.trading-display { width: 75%; padding: 4px; }.trading-display .signal-bars { height: 20px; }.model-orbit { width: 34px; height: 34px; }.model-orbit b { font-size: 19px; }.identity-chip { gap: 3px; }.identity-chip .icon { height: 16px; }.token-stack { transform: scale(.8); }.allowance-chip .signal-bars { height: 19px; }
  .system-narration { margin-top: 3rem; min-height: 100px; }.visual-section-heading { margin-bottom: 3rem; }.system-section { padding-bottom: 4rem; }
  .product-theater { padding: 4rem 1.3rem 1.3rem; gap: 1rem; }.float-model { grid-column: 1; grid-row: 1; }.float-credits { grid-column: 2; grid-row: 1; }.float-health { grid-column: 2; grid-row: 3; }.float-level { grid-column: 1; grid-row: 3; }.showcase-dashboard { grid-row: 2; }.preview-model-options button { flex-direction: column; min-height: 60px; }.preview-app-content { min-height: 330px; padding: 1.5rem; }.preview-app-body { flex-direction: row; }.preview-app-nav { width: 120px; flex-shrink: 0; flex-direction: column; border-right: 1px solid #34445c55; border-bottom: none; padding: 1rem .55rem; gap: .25rem; }.preview-app-nav button { flex: 0 0 auto; justify-content: flex-start; font-size: .56rem; }.preview-nav-label { display: block; font-size: .44rem; letter-spacing: .1em; color: #687fa0; padding: .3rem .4rem .7rem; }.preview-nav-footer { display: block; margin-top: auto; padding: 1rem .4rem .1rem; font-size: .65rem; line-height: 1.6; color: #627b9e; }.preview-app-content h3 { font-size: 1.2rem; }.preview-metrics b { font-size: 1.55rem; }.preview-creation-row b { font-size: .58rem; }.preview-creation-row small { font-size: .5rem; }.preview-app-top { padding: .75rem 1.2rem; }.preview-app-top > span:first-child { font-size: 1rem; }.preview-activity { font-size: .55rem; }.theater-preview-label { display: inline; }.preview-tier-options { flex-direction: column; gap: .25rem; }.preview-tier-options button { min-height: 32px; }.float-label { font-size: .63rem; }.float-subtext { font-size: .6rem; }.floating-control { padding: 1rem; }.float-credits strong { font-size: 2rem; }
  .access-detail-card { flex-basis: calc(50% - .3rem); }.detail-illustration { min-height: 178px; }
}
@media (min-width: 900px) {
  .node-label { font-size: .72rem; padding: .3rem .65rem; }.chip-mount { padding: 10px; }.node-treasury .chip-mount { padding: 19px; }.chip-serial { font-size: 6px; bottom: 13px; }.core-pins { top: 12px; left: 12px; width: 14px; height: 17px; }.core-status { top: 15px; right: 13px; }.core-status i { width: 12px; height: 3px; }.core-emblem { border-radius: 24px; }.model-orbit { width: 48px; height: 48px; }.model-orbit b { font-size: 25px; }.trading-display .signal-bars { height: 30px; }.trading-display { padding: 7px 5px; }.identity-chip { gap: 5px; }.identity-chip .icon { width: 22px; height: 22px; }.token-stack { transform: scale(1.1); }.allowance-chip .signal-bars { height: 28px; }.chip-budget-line { width: 45px; }.system-narration { margin-top: 2rem; }.circuit-controls { gap: 2.3rem; }
  .product-theater { display: block; min-height: 650px; padding: 0; margin-top: 5rem; }.dashboard-showcase { padding-top: 7rem; padding-bottom: 5rem; }.dashboard-showcase .visual-section-heading { margin-bottom: 4rem; }.showcase-dashboard { position: absolute; width: 68%; left: 16%; top: 124px; z-index: 2; border-radius: 13px; }.preview-app-content { min-height: 325px; padding: 1.5rem; }.preview-app-nav { width: 120px; }.preview-app-content h3 { font-size: 1.1rem; }.preview-metrics { margin: 1.2rem 0; }.preview-metrics > div { padding: .8rem; }.preview-metrics b { font-size: 1.45rem; }.preview-metrics .preview-level { font-size: 1rem; }.preview-view-kicker { font-size: .47rem; }.preview-app-content .preview-subheading { font-size: .61rem; }.preview-creation-row { gap: .55rem; }.preview-creation-row > span { padding: .7rem; }.preview-creation-row b { font-size: .56rem; }.preview-creation-row small { font-size: .5rem; }.preview-activity { font-size: .54rem; }.floating-control { position: absolute; }.float-model { left: 2%; top: 67px; width: 205px; }.float-model .preview-model-options button { min-height: 48px; font-size: .6rem; }.float-credits { right: 0%; top: 78px; width: 174px; }.float-level { left: 0%; top: 418px; width: 166px; }.float-health { right: 1%; top: 457px; width: 202px; }.float-health .float-subtext { font-size: .58rem; }.preview-tier-options button { font-size: .61rem; }.preview-treasury-toggle { font-size: .61rem; }.float-subtext { font-size: .56rem; }.float-label { font-size: .6rem; }.preview-chat-logo { width: 53px; height: 53px; }.preview-chat-view { padding-top: .3rem; }.preview-chart svg { margin-top: 1rem; }.preview-chart { padding: .8rem; }
  .access-card-grid { gap: .6rem; }.access-detail-card { flex-basis: calc((100% - 1.2rem) / 3); padding-bottom: 1.6rem; }.access-detail-card h3 { font-size: .94rem; }.access-detail-card > p { font-size: .64rem; }.detail-illustration { min-height: 183px; }.access-details { padding-top: 5rem; }
}
@media (min-width: 1200px) {
  .product-theater { margin-left: 1rem; margin-right: 1rem; min-height: 690px; }.float-model { left: 1%; top: 95px; width: 205px; }.float-credits { right: -1%; top: 93px; width: 195px; }.float-level { left: -1.2%; top: 425px; width: 179px; }.float-health { right: .5%; top: 475px; width: 225px; }.showcase-dashboard { top: 155px; width: 68%; left: 16%; }.preview-app-content { padding: 1.7rem; min-height: 340px; }.preview-app-nav { width: 136px; }.preview-app-content h3 { font-size: 1.25rem; }.preview-metrics b { font-size: 1.6rem; }.preview-creation-row b { font-size: .62rem; }.preview-creation-row small { font-size: .56rem; }.preview-app-nav button { font-size: .61rem; }.preview-activity { font-size: .6rem; }.preview-app-top { padding: .8rem 1.2rem; }.preview-app-top > span:last-child { font-size: .59rem; }.float-label { font-size: .65rem; }.float-subtext { font-size: .61rem; }.preview-tier-options button { font-size: .66rem; }.preview-treasury-toggle { font-size: .7rem; }.float-health .float-subtext { font-size: .62rem; }.preview-model-options button span { font-size: 1.2rem; }.float-model .preview-model-options button { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .circuit-pulses { display: none; }
  [data-reveal], .reveal-pending { opacity: 1 !important; transform: none !important; transition: none !important; }
  .motion-scene *, .motion-scene *::before, .motion-scene *::after { animation: none !important; transition: none !important; }
  .threshold-window > div { transform: none; }.signal-bars i, .radar-blip, .budget-pips i { opacity: .75; }
}
@media (prefers-reduced-transparency: reduce) {
  .floating-control, .showcase-dashboard, .access-detail-card, .chip-face { background: #141d2e; }
}

@media (pointer: coarse) {
  .preview-tier-options button { min-height: 44px; }
}