/* Exogenic / second pass: copper light, deep ink, and visible permission. */
:root {
  --bg: #090e13;
  --surface: #111920;
  --surface-2: #17212a;
  --line: #2b343d;
  --line-soft: #202a33;
  --text: #f3f1eb;
  --secondary: #b3b9bf;
  --muted: #929ca6;
  --accent: #e99b7b;
  --accent-dark: #bc6046;
  --green: #88ccc3;
  --copper: #e99b7b;
  --amber: #edcd95;
  --teal: #88ccc3;
}
body { background: var(--bg); font-size: 16px; isolation: isolate; }
body::before { background: linear-gradient(90deg, #bb604a, #edcd95 45%, #7ebcb7); }
main, .site-footer { position: relative; }
.atmosphere { position: absolute; inset: 0; height: 1400px; pointer-events: none; overflow: hidden; z-index: -1; }
.atmosphere-warm { position: absolute; width: 1100px; height: 1050px; right: -170px; top: -260px; background: radial-gradient(ellipse, #a7513529, #8e442414 40%, transparent 69%); }
.atmosphere-cool { position: absolute; width: 1100px; height: 1100px; right: -400px; top: 350px; background: radial-gradient(ellipse, #2c828127, #16435212 45%, transparent 70%); }
.atmosphere-grain { position: absolute; inset: 0; opacity: .028; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.site-header { background: #0a0f14dc; border-color: #c4d1da13; }
.site-header nav { font-size: 14px; gap: 25px; }
.nav-shell { height: 84px; }
.brand img { width: 154px; }
.button { background: linear-gradient(135deg, #eaa181, #d78468); border-color: #f9bf9a4d; border-radius: 7px; font-size: 14px; min-height: 50px; box-shadow: inset 0 1px #ffe8cd38, 0 5px 24px #b45a3320; }
.button:hover { background: linear-gradient(135deg, #f5b190, #e59473); box-shadow: inset 0 1px #ffe8cd60, 0 8px 35px #b45a3335; }
.button-small { min-height: 40px; font-size: 13px; padding: 10px 15px; gap: 17px; }
.text-link { font-size: 14px; }
.eyebrow { font-size: 12px; letter-spacing: 1.35px; }
.hero { padding-top: 32px; }
.hero-topline { margin-bottom: 30px; }
.hero-topline .eyebrow { font-size: 11px; }
.network-label { font-size: 12px; }
.hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 35px; padding: 22px 0 38px; align-items: start; }
.hero-copy { padding-top: 28px; }
.hero h1 { font-size: clamp(52px, 5.2vw, 72px); font-weight: 500; line-height: 1.045; letter-spacing: -3.6px; }
.hero h1 .spectrum { display: inline-block; padding-bottom: .07em; margin-bottom: -.07em; color: var(--accent); background: linear-gradient(115deg, #e59076 4%, #f0b68b 31%, #efd1a0 52%, #99c9bb 82%, #75bfc3 100%); background-size: 130% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: spectrum-shift 14s ease-in-out infinite alternate; }
@keyframes spectrum-shift { from { background-position: 0 50%; } to { background-position: 90% 50%; } }
.hero-copy>p { max-width: 450px; font-size: 16px; line-height: 1.8; margin-top: 24px; }
.hero-actions { margin-top: 29px; gap: 24px; }
.hero-footnote { font-size: 12px; margin-top: 24px; color: #a4a9ac; }
.hero-footnote .icon { width: 15px; height: 15px; color: var(--amber); }
.principles-strip { padding-block: 28px; border-color: #b2cad522; }
.principles-strip strong { font-size: 14px; }
.principles-strip p { font-size: 12px; }
.strip-number { font-size: 12px; }

/* The hero's connections carry requests, signatures, and finally payment. */
.flow-demo { min-width: 0; position: relative; }
.flow-scene { height: 652px; position: relative; isolation: isolate; --flow: var(--copper); }
.flow-halo { position: absolute; inset: 40px -25px 90px; z-index: -1; display: grid; place-items: center; pointer-events: none; }
.flow-halo::before { content: ''; position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 40deg, transparent 10%, #cb694631 30%, #e9be7814 48%, #4c939735 72%, transparent 94%); filter: blur(27px); animation: halo-breathe 14s ease-in-out infinite alternate; }
.flow-halo img { position: absolute; width: 80%; max-width: 460px; aspect-ratio: 1; opacity: .08; transform: rotate(-23deg); filter: drop-shadow(0 0 25px #e7bf9944); }
.halo-orbit { width: 96%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #c8c7b319; position: relative; }
.halo-orbit::before { content: ''; position: absolute; inset: 22px; border: 1px dashed #bad7de16; border-radius: 50%; animation: orbit-spin 70s linear infinite; }
.halo-orbit::after { content: ''; width: 7px; height: 7px; background: #d1aa84; border: 2px solid #53392b; box-shadow: 0 0 20px #efc89655; border-radius: 50%; position: absolute; top: 13%; right: 13%; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes halo-breathe { to { opacity: .65; transform: rotate(20deg) scale(1.07); } }
.flow-wiring { position: absolute; inset: 0; height: 100%; width: 100%; overflow: visible; pointer-events: none; }
.wire { fill: none; stroke: #9ab9c029; stroke-width: 1; stroke-dasharray: 4 5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .6s; }
.wire-terminal { fill: #65676a; }
.signal { fill: #f3b38b; opacity: 0; offset-rotate: 0deg; }
.signal-aura { filter: url(#signal-glow); opacity: 0; }
.signal-request { offset-path: path('M128 85 V135 Q128 150 146 150 H202'); }
.signal-verify { offset-path: path('M403 341 H486 Q504 341 504 363 V485 Q504 508 480 508 H130 V537'); fill: var(--amber); }
.signal-pay { offset-path: path('M200 575 V610 Q200 629 220 629 H395'); fill: var(--teal); }
@keyframes travel { 0% { offset-distance: 0%; opacity: 0; } 14% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.flow-scene[data-phase=request] .signal-request { animation: travel 1.7s ease-in-out infinite; }
.flow-scene[data-phase=review] .signal-request { animation: travel 4s ease-in-out infinite; }
.flow-scene[data-phase=verify] .signal-verify { animation: travel 1.6s ease-in-out infinite; }
.flow-scene[data-phase=paid] .signal-pay { animation: travel 2.2s ease-in-out infinite; }
.flow-scene[data-phase=request] .wire-request, .flow-scene[data-phase=review] .wire-request { stroke: #d7956d88; }
.flow-scene[data-phase=verify] .wire-signature { stroke: #edcd9599; }
.flow-scene[data-phase=paid] .wire-payment { stroke: #88ccc399; }
.flow-kicker { font: 10px/1.4 var(--mono); letter-spacing: .75px; color: #aab1b5; display: block; }
.agent-node { position: absolute; top: 0; left: 0; width: 266px; z-index: 3; display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #29211fe8, #191c20f5); border: 1px solid #9c725246; padding: 14px; border-radius: 9px; box-shadow: 0 14px 35px #0004, inset 0 1px #f7dbad0b; transform: rotate(-3deg); transition: border-color .5s, box-shadow .5s; }
.flow-node-icon { width: 33px; height: 33px; border: 1px solid #d5966755; border-radius: 7px; color: #e9b990; background: #48302144; display: grid; place-items: center; flex-shrink: 0; }
.flow-node-icon .icon { width: 21px; height: 21px; }
.agent-node p { font-size: 13px; margin-top: 4px; line-height: 1.5; }
.node-indicator { width: 5px; height: 5px; background: var(--copper); border-radius: 50%; margin-left: auto; }
.flow-scene[data-phase=request] .agent-node { border-color: #e9aa7780; box-shadow: 0 14px 35px #0004, 0 0 30px #c3754020; }
.flow-scene[data-phase=request] .node-indicator, .flow-scene[data-phase=review] .node-indicator { animation: beacon 2.2s ease-in-out infinite; }
@keyframes beacon { 50% { box-shadow: 0 0 0 4px #e9b9900d, 0 0 12px #e9b99080; } }
.consent-card { position: absolute; top: 92px; left: 50%; transform: translateX(-44%); width: 320px; z-index: 2; background: linear-gradient(135deg, #222127f5, #141e27f8 70%); border: 1px solid #bfb5a43b; border-radius: 13px; overflow: hidden; box-shadow: 0 28px 60px #0007, inset 0 1px #f4deb31c; transition: box-shadow .7s, border-color .7s, transform .7s; }
.consent-header { height: 40px; padding: 0 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d7d2c317; background: #e4d2ae04; }
.consent-header img { width: 112px; height: auto; }
.consent-header .flow-kicker { font-size: 9px; }
.consent-content { padding: 16px 20px; }
.consent-status { display: flex; align-items: center; gap: 7px; font-size: 11px; line-height: 1.6; color: var(--copper); }
.consent-status>span:first-child { width: 4px; height: 4px; background: currentColor; border-radius: 50%; flex-shrink: 0; }
.consent-amount { font-size: 42px; line-height: 1.1; letter-spacing: -1.5px; margin-top: 9px; }
.consent-amount>span { font-size: 16px; letter-spacing: 0; color: #afb8bd; margin-left: 4px; }
.consent-reason { font-size: 11px; color: #a6aeb5; line-height: 1.5; margin-top: 5px; }
.consent-details { margin: 14px 0 0; font-size: 11px; }
.consent-details>div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; line-height: 1.65; }
.consent-details dt { color: #a9b0b6; }
.consent-details dd { margin: 0; color: #e6e7e2; display: flex; align-items: center; gap: 5px; font-size: 11px; }
.consent-details dd>span:not(.base-mark) { color: #949ea5; font-size: 10px; }
.consent-total { border-top: 1px solid #bed1df20; margin-top: 6px; padding-top: 8px!important; }
.consent-total dt { color: #e6e7e2; }
.scan-zone { display: flex; gap: 13px; align-items: center; justify-content: center; min-height: 38px; margin: 13px 0; }
.scan-zone p { font-size: 11px; line-height: 1.5; color: #bbb8ad; max-width: 176px; }
.biometric-mark { width: 36px; height: 36px; position: relative; color: var(--amber); display: grid; place-items: center; flex-shrink: 0; }
.biometric-mark>.icon { width: 28px; height: 28px; stroke-width: 1.25; }
.scan-beam { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #ffe4b6, transparent); box-shadow: 0 0 8px #f1c28c80; opacity: 0; }
.scan-ring { position: absolute; inset: -5px; border-radius: 10px; border: 1px solid #efcd9540; opacity: 0; }
.flow-scene[data-phase=review] .scan-ring { opacity: 1; animation: scanner-breathe 3s ease-in-out infinite; }
.flow-scene[data-phase=sign] .scan-beam { animation: scan 1.2s ease-in-out infinite; }
.flow-scene[data-phase=sign] .scan-ring { opacity: 1; border-color: #efcd9570; }
@keyframes scan { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(36px); opacity: 0; } }
@keyframes scanner-breathe { 50% { box-shadow: 0 0 18px #efcd9526; border-color: #efcd9580; } }
.consent-actions { display: flex; gap: 8px; }
.consent-actions button { min-height: 37px; border-radius: 5px; font-size: 12px; padding: 8px; border: 1px solid #69738155; background: #ffffff03; color: #d7dbdc; flex: 1; }
.consent-actions button:hover { border-color: #dfcbb288; background: #ffffff08; }
.consent-actions #demo-approve { display: flex; align-items: center; justify-content: center; gap: 7px; flex: 1.55; background: linear-gradient(115deg, #e39877, #edbe91); border-color: #f9c49a77; color: #251b15; font-weight: 600; }
.consent-actions #demo-approve:hover { background: linear-gradient(115deg, #edac8e, #f7cf9e); }
.consent-actions .icon { width: 17px; height: 17px; }
.consent-footer { height: 29px; border-top: 1px solid #d0d1c418; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 10px; color: #a9b3b8; }
.consent-footer .icon { width: 11px; height: 11px; color: var(--amber); }
.consent-edge { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px #f1cc9400; transition: box-shadow .7s; }
.flow-scene[data-phase=review] .consent-card, .flow-scene[data-phase=sign] .consent-card { border-color: #d3a57570; box-shadow: 0 28px 60px #0006, 0 0 40px #d3a57513, inset 0 1px #f4deb340; }
.flow-scene[data-phase=sign] .consent-edge { box-shadow: inset 0 0 0 1px #f1cc9445, inset 0 0 30px #edbe7e14; }
.flow-scene[data-phase=paid] .consent-card { border-color: #8bd0c260; }
.flow-scene[data-phase=paid] .consent-status { color: var(--teal); }
.flow-scene[data-phase=rejected] .consent-status { color: #ed9d99; }
.flow-reset { min-height: 37px; width: 100%; background: #6baca41a; border: 1px solid #a0d0c63b; color: #d1e7e1; font-size: 12px; border-radius: 5px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.flow-reset:hover { background: #6baca42b; }
.flow-reset .icon { width: 16px; height: 16px; }
.verification-node { position: absolute; left: 0; bottom: 53px; width: 245px; display: flex; gap: 12px; align-items: center; padding: 14px; background: linear-gradient(115deg, #202327f5, #18252bee); border: 1px solid #88999545; border-radius: 9px; z-index: 3; box-shadow: 0 12px 40px #0004; transition: border-color .6s, box-shadow .6s; }
.verification-icon { color: #adbfc1; width: 31px; height: 34px; display: grid; place-items: center; flex-shrink: 0; }
.verification-icon .icon { width: 25px; height: 25px; stroke-width: 1.3; }
.verification-node p { font-size: 11px; line-height: 1.5; margin-top: 4px; color: #c4cbcb; }
.verification-node .flow-kicker { font-size: 9px; }
.verification-checks { display: flex; gap: 8px; margin-top: 8px; font: 8px/1.5 var(--mono); color: #889799; }
.verification-checks>span::before { content: '·'; padding-right: 3px; }
.verification-checks>span.is-checked { color: #a9dfd0; }
.verification-checks>span.is-checked::before { content: '✓'; }
.flow-scene[data-phase=verify] .verification-node { border-color: #edcd9588; box-shadow: 0 12px 40px #0004, 0 0 28px #edcd951c; }
.flow-scene[data-phase=verify] .verification-icon { color: var(--amber); }
.flow-scene[data-phase=paid] .verification-node { border-color: #88ccc370; }
.payment-node { position: absolute; right: 0; bottom: 0; width: 245px; padding: 13px; display: flex; align-items: center; gap: 10px; border: 1px solid #72a4a132; border-radius: 9px; background: linear-gradient(110deg, #173033e6, #152028f5); box-shadow: 0 12px 35px #0003; z-index: 3; transition: box-shadow .6s, border-color .6s; }
.payment-token { width: 29px; height: 29px; font: 18px/1 var(--sans); border: 1px solid #8cccc344; color: #96bdb9; display: grid; place-items: center; border-radius: 50%; flex-shrink: 0; }
.payment-node .flow-kicker { font-size: 9px; color: #9fc3bd; }
.payment-node p { font-size: 11px; margin-top: 4px; color: #c4d9d3; line-height: 1.5; }
.payment-tick { margin-left: auto; width: 16px; color: #90d6c5; opacity: .12; transition: opacity .5s; }
.flow-scene[data-phase=paid] .payment-node { border-color: #88ccc38c; box-shadow: 0 0 35px #88ccc31c, 0 12px 35px #0003; }
.flow-scene[data-phase=paid] .payment-tick { opacity: 1; }
.flow-progress { margin-top: 24px; display: flex; align-items: center; gap: 10px; justify-content: center; font: 11px/1.5 var(--mono); color: #87959d; }
.flow-progress i { height: 1px; width: 20px; background: #8198a440; }
.flow-progress>span { transition: color .5s, text-shadow .5s; }
.flow-progress>span.is-active { color: #eed0a4; text-shadow: 0 0 20px #e7b27944; }
.flow-progress>span.is-complete { color: #9cc6bf; }
.flow-toolbar { margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.flow-toolbar>span { font-size: 10px; color: #94a1aa; }
.flow-toolbar button { display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #8fb1c52d; background: #8fb1c505; color: #c9c6ba; border-radius: 5px; padding: 6px 8px; font-size: 10px; min-height: 31px; }
.flow-toolbar button:hover { border-color: #dfb58580; }
.flow-toolbar #flow-motion { padding-inline: 10px; font-size: 15px; }
.play-symbol { color: var(--copper); font-size: 9px; }

/* A material change between sections, without a repeating card grid. */
.how-section { background: radial-gradient(ellipse at 15% 0, #97614813, transparent 60%), linear-gradient(120deg, #131b22, #101820); border-color: #829cb926; }
.section-heading h2, h2 { font-size: clamp(35px, 3.6vw, 49px); line-height: 1.15; }
.section-heading>p, .steps p, .trust-intro>p, .trust-list details>p, .developer-copy>p, .connection-info p { font-size: 16px; }
.section-heading>p { max-width: 350px; }
.steps { border-color: #72889848; }
.steps>li+li::before { background: #7288982c; }
.step-top { color: #a1b1bd; }
.steps h3 { font-size: 19px; }
.step-top>span { font-size: 13px; }
.step-label { color: #9daab4; font-size: 11px; letter-spacing: .7px; }
.how-note { border-color: #7288982c; }
.how-note p { font-size: 14px; color: #bbc6cd; }
.how-note a { font-size: 13px; }
.trust-list summary { font-size: 16px; }
.trust-intro h3 { font-size: 28px; }
.trust-symbol { stroke: #91a7b26b; }
.developer-section { background: radial-gradient(ellipse at 95% 60%, #3f768024, transparent 60%), #101820; border-color: #72889826; }
.client-list { font-size: 14px; color: #d4d9dc; }
.client-list .mono { font-size: 12px; }
.connection-tabs { background: #080f15; border-color: #6c95ac45; }
.connection-tabs button { font-size: 13px; padding: 11px 14px; }
.connection-tabs [aria-selected=true] { background: #263b45; color: #e2eeee; }
.connection-info h3 { font-size: 16px; }
.connection-note { font-size: 13px; color: #a2d1c5; }
.terminal { background: #0a131b; border-color: #62859057; box-shadow: 0 22px 50px #0003, inset 0 1px #a0c4d212; }
.terminal-bar { background: #182731; border-color: #62859038; font-size: 12px; }
.terminal-dots i { background: #53707c; }
.terminal pre { font-size: 12px; }
.tool-list { background: #0f1d26; border-color: #62859030; }
.tool-list>.micro { font-size: 11px; color: #8eb0bd; }
.tool-list dt, .tool-list dd { font-size: 11px; }
.tool-list dt { color: #c2d7da; }
.tool-list dd { color: #a1b5c1; }
.terminal-footer { border-color: #62859030; font-size: 10px; color: #9fbbb9; }
#copy-config { font-size: 11px; color: #b6cbce; }
.syntax-key { color: #cfdce1; }
.syntax-string { color: #ebbb97; }
.proof-stat p { font-size: 13px; }
.proof-checks { font-size: 13px; color: #a8d0c6; }
.transaction-link { background: linear-gradient(110deg, #15212b, #132928); border-color: #6c989953; }
.transaction-link:hover { background: #1c3036; border-color: #93c5bc88; }
.transaction-description strong { font-size: 15px; }
.transaction-description>span { font-size: 10px; color: #adc2c7; }
.transaction-cta { font-size: 13px; }
.proof-note { font-size: 12px; }
.closing-section { background: radial-gradient(ellipse at 50% 130%, #ae654338, transparent 70%), linear-gradient(120deg, #191b24, #172c30); border-color: #b4ad9a27; }
.closing-inner h2>span { color: #eebc91; }
.closing-inner p { font-size: 16px; color: #bac4c8; }
.closing-enso { opacity: .1; }
.footer-main>span, .footer-main>.text-link { font-size: 12px; }
.footer-bottom { font-size: 11px; }

/* Exploded architecture: readable controls, selectable planes, one approval boundary. */
.architecture { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 46px; align-items: center; border-block: 1px solid var(--line); padding: 42px 0 30px; }
.architecture-intro .eyebrow { color: #d8a78a; }
.architecture-intro>p { font-size: 16px; color: #c3c9ce; margin-top: 12px; }
.layer-controls { margin-top: 25px; display: grid; gap: 4px; }
.layer-control { display: flex; align-items: center; gap: 14px; padding: 15px 13px; border: 1px solid transparent; border-radius: 8px; color: #b6c0c8; background: transparent; text-align: left; transition: background .3s, border-color .3s; }
.layer-control:hover { background: #f1bd8706; border-color: #dac1a320; }
.layer-control.is-selected { background: linear-gradient(110deg, #d0926320, #96c3c405); border-color: #caaa793d; color: #f3e1c9; }
.layer-number { font: 12px var(--mono); color: #94a6ae; }
.layer-control.is-selected .layer-number { color: var(--copper); }
.layer-control strong { display: block; font-size: 16px; font-weight: 500; line-height: 1.5; }
.layer-control small { display: block; font-size: 13px; line-height: 1.5; margin-top: 4px; color: #a8b5bd; }
.layer-control>.icon { margin-left: auto; width: 16px; color: #98acb5; opacity: .4; }
.layer-control.is-selected>.icon { opacity: 1; color: var(--amber); }
.layer-detail { padding: 25px 14px 0; min-height: 210px; }
.layer-detail-tag { font: 10px/1.6 var(--mono); letter-spacing: 1.1px; color: #caaf8d; }
.layer-detail h3 { font-size: 23px; letter-spacing: -.6px; line-height: 1.3; margin: 11px 0 12px; }
.layer-detail p { font-size: 14px; line-height: 1.85; color: #aebbc3; max-width: 365px; }
.trace-button { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 9px; font-size: 13px; color: #edc49e; background: transparent; border: 0; text-align: left; }
.trace-button:hover { color: #ffdeb8; }
.trace-button .icon { width: 18px; }
.stack-visual { position: relative; min-width: 0; height: 665px; perspective: 1200px; --active-light: #edcd95; }
.stack-coordinate { position: absolute; left: 10px; right: 0; top: 5px; display: flex; justify-content: space-between; gap: 15px; font: 10px/1.6 var(--mono); letter-spacing: .7px; color: #92a2ae; }
.stack-aura { position: absolute; width: 90%; height: 75%; top: 8%; left: 4%; border-radius: 50%; background: radial-gradient(ellipse at 55% 55%, #db9f5d15, #688eb70c 42%, transparent 68%); transition: background 1s; pointer-events: none; }
.stack-grid { position: absolute; width: 100%; height: 290px; top: 305px; background-image: linear-gradient(#65919e12 1px, transparent 1px), linear-gradient(90deg, #65919e12 1px, transparent 1px); background-size: 30px 30px; transform: rotateX(60deg) rotateZ(-30deg); mask-image: radial-gradient(ellipse, #000 10%, transparent 69%); pointer-events: none; }
.stack-stage { position: absolute; width: 310px; height: 240px; left: 50%; top: 40%; margin-left: -155px; margin-top: -100px; transform: rotateX(52deg) rotateZ(-32deg); transform-style: preserve-3d; }
.stack-plane { position: absolute; inset: 0; width: 100%; height: 100%; padding: 22px; border: 1px solid var(--plate-line, #8da8b55c); border-radius: 15px; background: var(--plate-fill, #1b2833); color: #e0e8eb; text-align: center; transform: translateZ(var(--plate-z)); transform-style: preserve-3d; box-shadow: 0 10px 26px #0004, inset 0 1px #e9f2f428; transition: background .55s, border-color .55s, box-shadow .55s, filter .55s; }
.stack-plane::after { content: ''; position: absolute; inset: auto 0 -10px; height: 12px; border-radius: 0 0 8px 8px; background: var(--plate-side, #101e2a); border: 1px solid var(--plate-line, #8da8b544); transform-origin: top; transform: rotateX(-90deg); }
.stack-plane::before { content: ''; position: absolute; inset: 12px; border: 1px solid #cadde610; border-radius: 8px; pointer-events: none; }
.stack-plane:focus-visible { outline: 3px solid #fce0b6; outline-offset: 5px; }
.stack-plane.plane-apps { --plate-z: 170px; --plate-fill: linear-gradient(130deg, #293b48f5, #1a2a38fa); --plate-line: #8cabb968; --plate-side: #142230; }
.stack-plane.plane-interface { --plate-z: 63px; --plate-fill: linear-gradient(130deg, #343640f8, #262a35fa); --plate-line: #a9a0ba68; --plate-side: #1c2432; }
.stack-plane.plane-permission { --plate-z: -44px; --plate-fill: linear-gradient(130deg, #544033f8, #352c29fc); --plate-line: #c9a17588; --plate-side: #3a2d25; }
.stack-plane.plane-settlement { --plate-z: -151px; --plate-fill: linear-gradient(130deg, #23404bf7, #162e3afb); --plate-line: #7bb0b380; --plate-side: #102830; }
.stack-plane.is-selected { border-color: #f2d19ed4; box-shadow: 0 12px 30px #0004, 0 0 28px #d8ac6d30, inset 0 0 30px #e9bd7620, inset 0 1px #f5dcb17a; }
.stack-plane.plane-settlement.is-selected { border-color: #9ddcd6; box-shadow: 0 12px 30px #0004, 0 0 28px #7bd3d233, inset 0 0 30px #7ed2d520; }
.plane-corner { position: absolute; left: 20px; top: 18px; font: 12px var(--mono); color: #bdd1d6; }
.plane-content { position: absolute; inset: 24px 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.plane-content>.icon { width: 35px; height: 35px; stroke-width: 1.3; color: #d3e2e1; }
.plane-content>img { width: 34px; height: 34px; }
.plane-content strong { font-size: 22px; font-weight: 500; letter-spacing: -.5px; }
.plane-content>span { font: 10px var(--mono); letter-spacing: 1px; color: #bdcbc9; }
.plane-permission .plane-content>.icon { color: #f4d4a0; }
.plane-content>.plane-apps { display: flex; gap: 7px; }
.plane-content>.plane-apps>span { padding: 5px 8px; font-size: 11px; border: 1px solid #b5d0e029; border-radius: 4px; background: #d1e0eb09; }
.plane-port { position: absolute; right: 24px; bottom: 20px; width: 8px; height: 8px; background: #a1babf; border-radius: 50%; box-shadow: 0 0 8px #adced966; }
.stack-plane.is-selected .plane-port { background: #ffdfaa; box-shadow: 0 0 16px #f5d1a2bb; animation: port-glow 2.4s ease-in-out infinite; }
@keyframes port-glow { 50% { box-shadow: 0 0 6px 3px #f5d1a255, 0 0 23px #f5d1a280; } }
.stack-spine { position: absolute; width: 1px; height: 1px; right: 28px; bottom: 24px; transform-style: preserve-3d; pointer-events: none; }
.stack-spine::before { content: ''; position: absolute; width: 1px; height: 327px; background: linear-gradient(#edcd9599, #7bc6c280); transform-origin: top; transform: translateZ(170px) rotateX(-90deg); }
.stack-spine>span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ffe6bd; box-shadow: 0 0 14px 4px #e4be8677; transform: translateZ(var(--signal-z, -44px)); opacity: 0; transition: transform 1.4s ease-in-out, opacity .5s; }
.stack-visual[data-tracing=true] .stack-spine>span { opacity: 1; }
.stack-visual[data-active=apps] { --signal-z: 170px; }
.stack-visual[data-active=interface] { --signal-z: 63px; }
.stack-visual[data-active=permission] { --signal-z: -44px; }
.stack-visual[data-active=settlement] { --signal-z: -151px; }
.stack-wallet { position: absolute; bottom: 66px; left: 30px; right: 0; display: flex; gap: 12px; align-items: center; background: linear-gradient(120deg, #1b2b34ee, #14222cf5); padding: 17px 18px; border: 1px solid #8cb2b640; border-radius: 9px; z-index: 1; }
.stack-wallet-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #91b8c33b; border-radius: 8px; color: #aad4cb; flex-shrink: 0; }
.stack-wallet strong { display: block; font-size: 14px; font-weight: 500; }
.stack-wallet div>span { display: block; font-size: 12px; color: #b2c4cb; margin-top: 3px; }
.wallet-link { margin-left: auto; height: 26px; width: 26px; position: relative; }
.wallet-link::before { content: ''; position: absolute; top: 12px; right: 0; left: 0; height: 1px; background: #a9d1c35e; }
.wallet-link::after { content: ''; position: absolute; width: 5px; height: 5px; top: 10px; left: 0; border-radius: 50%; background: #bfe3d7; opacity: .4; }
.stack-visual[data-tracing=true][data-active=settlement] .wallet-link::after { animation: wallet-signal 1.6s ease-in-out infinite; }
@keyframes wallet-signal { 0% { transform: translateX(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(22px); opacity: 0; } }
.stack-status { position: absolute; left: 30px; right: 0; bottom: 25px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: #a1c3c0; }
.stack-status .status-dot { color: #9ed3be; }
.trust-layout { margin-top: 90px; }

/* Motion remains optional, including CSS-only ambient effects. */
body[data-motion=paused] *, body[data-page-hidden=true] * { animation-play-state: paused!important; }
@media (max-width: 1100px) {
  .hero-layout { gap: 20px; }
  .hero h1 { font-size: 58px; letter-spacing: -2.8px; }
  .hero-copy>p { font-size: 15px; }
  .hero-actions { gap: 18px; }
  .hero-actions .text-link { font-size: 12px; }
  .consent-card { width: 292px; transform: translateX(-47%); }
  .agent-node { width: 242px; padding: 12px; }
  .agent-node p { font-size: 12px; }
  .verification-node { width: 226px; left: 0; }
  .payment-node { width: 221px; }
  .flow-toolbar { flex-wrap: wrap; column-gap: 10px; row-gap: 8px; }
  .flow-toolbar>span { font-size: 9px; }
  .architecture { gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .stack-stage { width: 270px; height: 220px; margin-left: -135px; transform: rotateX(52deg) rotateZ(-28deg); }
  .stack-wallet { left: 5px; padding-inline: 13px; }
  .stack-status { left: 5px; }
  .stack-coordinate { font-size: 9px; }
  .stack-coordinate>span:last-child { display: none; }
  .plane-content strong { font-size: 20px; }
  .layer-control { padding-inline: 9px; gap: 11px; }
  .layer-control small { font-size: 12px; }
  .layer-detail { padding-inline: 9px; }
  .flow-progress { font-size: 10px; gap: 8px; }
}
@media (max-width: 900px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 55px; }
  .hero-copy { padding-top: 0; }
  .hero h1 { font-size: clamp(52px, 8vw, 70px); max-width: 690px; }
  .hero h1 br:first-child, .hero h1 .spectrum br { display: none; }
  .hero-copy>p { max-width: 530px; font-size: 16px; }
  .hero-actions .text-link { font-size: 14px; }
  .flow-demo { width: min(560px, 100%); margin-inline: auto; }
  .consent-card { width: 320px; transform: translateX(-44%); }
  .flow-toolbar>span { font-size: 11px; }
  .flow-toolbar button { font-size: 11px; }
  .architecture { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .architecture-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .architecture-intro { grid-column: 1 / -1; }
  .layer-controls { grid-column: 1; grid-row: 2 / 4; }
  .layer-detail { grid-column: 2; grid-row: 2; padding-top: 30px; min-height: 0; }
  .trace-button { grid-column: 2; align-self: start; }
  .stack-visual { height: 650px; width: min(590px, 100%); margin-inline: auto; }
  .stack-stage { width: 310px; height: 240px; margin-left: -155px; transform: rotateX(52deg) rotateZ(-32deg); }
  .stack-coordinate { font-size: 10px; }
  .stack-coordinate>span:last-child { display: block; }
  .stack-wallet, .stack-status { left: 30px; right: 30px; }
  .section-heading>p, .steps p, .trust-intro>p, .trust-list details>p, .developer-copy>p, .connection-info p { font-size: 15px; }
  .trust-list summary { font-size: 14px; }
  .trust-layout { gap: 35px; }
}
@media (max-width: 620px) {
  .atmosphere { height: 1700px; }
  .atmosphere-warm { right: -530px; top: -200px; }
  .atmosphere-cool { right: -550px; top: 400px; }
  .nav-shell { height: 70px; }
  .brand img { width: 126px; }
  .nav-cta { font-size: 11px; min-height: 37px; padding: 9px 11px; }
  .site-header nav { top: 70px; background: #111d27; border-color: #7f9fb735; font-size: 15px; }
  .hero { padding-top: 27px; }
  .hero-topline { gap: 15px; margin-bottom: 20px; }
  .hero-topline .eyebrow { font-size: 9px; max-width: 210px; letter-spacing: .7px; }
  .network-label { font-size: 10px; white-space: nowrap; }
  .tiny-cross { display: none; }
  .hero h1 { font-size: clamp(42px, 10vw, 60px); letter-spacing: -1.9px; line-height: 1.1; }
  .hero-copy>p { font-size: 15px; line-height: 1.8; margin-top: 24px; }
  .hero-actions { gap: 20px; flex-wrap: wrap; }
  .hero-actions .button { font-size: 14px; min-height: 48px; }
  .hero-actions .text-link { font-size: 13px; }
  .hero-footnote { font-size: 11px; }
  .hero-layout { gap: 47px; padding-bottom: 35px; }
  .flow-scene { height: 689px; }
  .flow-halo { inset: 60px 0 90px; }
  .flow-halo img { width: 94%; }
  .flow-wiring { opacity: .7; }
  .agent-node { width: 243px; max-width: 91%; left: 1px; padding: 12px; }
  .agent-node p { font-size: 12px; }
  .flow-kicker { font-size: 9px; }
  .consent-card { width: min(320px, 94%); left: 50%; top: 90px; transform: translateX(-50%); }
  .consent-content { padding: 16px 18px; }
  .consent-amount { font-size: 40px; }
  .consent-details { margin-top: 15px; }
  .verification-node { bottom: 75px; left: 0; width: 246px; max-width: 95%; }
  .payment-node { width: 245px; right: 0; bottom: 0; }
  .flow-progress { margin-top: 24px; gap: 10px; font-size: 10px; }
  .flow-progress i { width: 12px; }
  .flow-toolbar { column-gap: 10px; }
  .flow-toolbar>span { width: 100%; text-align: center; font-size: 11px; }
  .flow-toolbar button { font-size: 12px; min-height: 35px; }
  .principles-strip { padding-block: 4px; }
  .principles-strip>div { gap: 13px; }
  .principles-strip p { font-size: 11px; gap: 10px; }
  .principles-strip strong { font-size: 12px; white-space: normal; }
  .principles-strip p>span { max-width: 125px; }
  .strip-number { font-size: 11px; }
  .section-heading h2, h2 { font-size: 35px; }
  .section-heading>p { font-size: 16px; }
  .steps p { font-size: 14px; }
  .steps h3 { font-size: 16px; }
  .step-label { font-size: 10px; letter-spacing: .4px; }
  .steps>li:nth-child(3), .steps>li:nth-child(4) { border-color: #72889830; }
  .how-note p { font-size: 13px; }
  .how-note a { font-size: 13px; }
  .architecture { padding-top: 30px; gap: 24px; }
  .architecture-copy { display: block; }
  .architecture-intro>p { font-size: 15px; }
  .layer-controls { margin-top: 22px; }
  .layer-control { padding: 14px 10px; gap: 13px; }
  .layer-control strong { font-size: 16px; }
  .layer-control small { font-size: 13px; }
  .layer-detail { padding: 24px 10px 0; min-height: 215px; }
  .layer-detail h3 { font-size: 24px; }
  .layer-detail p { font-size: 15px; }
  .trace-button { font-size: 13px; padding: 12px 10px; }
  .stack-visual { height: 612px; perspective: 950px; }
  .stack-coordinate { left: 0; font-size: 9px; }
  .stack-coordinate>span:last-child { display: none; }
  .stack-stage { width: 230px; height: 185px; margin-left: -115px; top: 39%; margin-top: -70px; transform: rotateX(47deg) rotateZ(-22deg); }
  .stack-plane { padding: 14px; border-radius: 12px; }
  .stack-plane.plane-apps { --plate-z: 145px; }
  .stack-plane.plane-interface { --plate-z: 50px; }
  .stack-plane.plane-permission { --plate-z: -45px; }
  .stack-plane.plane-settlement { --plate-z: -140px; }
  .plane-content { inset: 18px 12px; gap: 9px; }
  .plane-content strong { font-size: 18px; }
  .plane-content>.icon { width: 29px; height: 29px; }
  .plane-content>img { width: 29px; height: 29px; }
  .plane-content>span { font-size: 8px; letter-spacing: .6px; }
  .plane-corner { top: 14px; left: 14px; font-size: 10px; }
  .plane-content>.plane-apps>span { font-size: 9px; padding: 4px 6px; }
  .stack-spine::before { height: 285px; transform: translateZ(145px) rotateX(-90deg); }
  .stack-visual[data-active=apps] { --signal-z: 145px; }
  .stack-visual[data-active=interface] { --signal-z: 50px; }
  .stack-visual[data-active=permission] { --signal-z: -45px; }
  .stack-visual[data-active=settlement] { --signal-z: -140px; }
  .stack-wallet { left: 0; right: 0; bottom: 69px; padding: 14px 12px; gap: 10px; }
  .stack-wallet strong { font-size: 14px; }
  .stack-wallet div>span { font-size: 11px; max-width: 200px; }
  .stack-status { left: 0; right: 0; bottom: 25px; font-size: 11px; align-items: baseline; }
  .trust-layout { margin-top: 60px; }
  .trust-list summary { font-size: 15px; }
  .trust-intro>p, .trust-list details>p, .developer-copy>p, .connection-info p { font-size: 16px; }
  .connection-note { font-size: 12px; }
  .terminal pre { font-size: 11px; }
  .tool-list dt, .tool-list dd { font-size: 11px; }
  .terminal-footer { font-size: 10px; }
  .proof-stat p { font-size: 12px; }
  .proof-checks { font-size: 11px; }
  .transaction-description strong { font-size: 13px; }
  .transaction-description>span { font-size: 9px; }
  .transaction-cta { font-size: 12px; }
  .proof-note { font-size: 11px; }
  .closing-inner p { font-size: 15px; }
  .footer-main>span, .footer-main>.text-link { font-size: 11px; }
  .footer-bottom { font-size: 10px; }
}
@media (max-width: 359px) {
  .brand img { width: 111px; }
  .nav-cta { font-size: 10px; gap: 6px; }
  .hero h1 { font-size: 39px; }
  .hero-topline .eyebrow { font-size: 8px; }
  .network-label { font-size: 9px; }
  .hero-actions { gap: 14px; }
  .hero-actions .text-link { font-size: 12px; }
  .consent-content { padding-inline: 14px; }
  .flow-progress { gap: 8px; font-size: 9px; }
  .stack-stage { width: 210px; margin-left: -105px; transform: rotateX(47deg) rotateZ(-19deg); }
  .plane-content strong { font-size: 17px; }
  .plane-content>span { font-size: 7px; }
  .plane-content>.plane-apps>span { font-size: 8px; }
  .layer-control small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none!important; transition: none!important; }
  .hero h1 .spectrum { background-position: 30% 50%; }
  .signal, .scan-beam { display: none; }
  .stack-spine>span { transition: none; }
}

.flow-scene[data-motion=paused] *, .stack-visual[data-motion=paused] * { animation-play-state: paused!important; }

/* Fan the shallow plates enough to expose the face labels on every level. */
.stack-stage { width: 300px; height: 180px; margin-left: -150px; margin-top: -90px; top: 39%; }
.stack-plane { transform: translate3d(calc(var(--fan) * -18px), calc(var(--fan) * 18px), var(--plate-z)); }
.stack-plane.plane-apps { --fan: 0; }
.stack-plane.plane-interface { --fan: 1; }
.stack-plane.plane-permission { --fan: 2; }
.stack-plane.plane-settlement { --fan: 3; }
.plane-content { inset: auto 20px 20px; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: flex-end; align-items: center; gap: 8px 10px; }
.plane-content>.icon, .plane-content>img { width: 27px; height: 27px; }
.plane-content strong { font-size: 20px; }
.plane-content>span, .plane-content>.plane-apps { width: 100%; padding-left: 37px; text-align: left; }
.plane-content>.plane-apps { gap: 6px; }
.plane-content>.plane-apps>span { font-size: 10px; padding: 4px 6px; }
.plane-corner { font-size: 11px; color: #a4b8bf; }
.stack-spine::before { height: 330px; transform: translateZ(170px) rotateZ(45deg) rotateX(-76.62deg); }
.stack-spine>span { transform: translate3d(var(--signal-x, -36px), var(--signal-y, 36px), var(--signal-z, -44px)); }
.stack-visual[data-active=apps] { --signal-x: 0px; --signal-y: 0px; }
.stack-visual[data-active=interface] { --signal-x: -18px; --signal-y: 18px; }
.stack-visual[data-active=permission] { --signal-x: -36px; --signal-y: 36px; }
.stack-visual[data-active=settlement] { --signal-x: -54px; --signal-y: 54px; }
body[data-motion=paused] *::before, body[data-motion=paused] *::after,
body[data-page-hidden=true] *::before, body[data-page-hidden=true] *::after,
.flow-scene[data-motion=paused] *::before, .flow-scene[data-motion=paused] *::after,
.stack-visual[data-motion=paused] *::before, .stack-visual[data-motion=paused] *::after { animation-play-state: paused!important; }
@media (min-width: 901px) and (max-width: 1100px) {
  .stack-stage { width: 265px; margin-left: -132.5px; }
  .plane-content { inset: auto 16px 18px; gap: 8px; }
  .plane-content strong { font-size: 18px; }
  .plane-content>span, .plane-content>.plane-apps { padding-left: 35px; font-size: 9px; }
}
@media (max-width: 620px) {
  .stack-stage { width: 230px; height: 155px; margin-left: -106px; margin-top: -77px; top: 38%; }
  .stack-plane { transform: translate3d(calc(var(--fan) * -12px), calc(var(--fan) * 12px), var(--plate-z)); }
  .plane-content { inset: auto 14px 17px; gap: 7px; }
  .plane-content>.icon, .plane-content>img { width: 23px; height: 23px; }
  .plane-content strong { font-size: 17px; }
  .plane-content>span, .plane-content>.plane-apps { padding-left: 30px; font-size: 8px; }
  .plane-content>.plane-apps>span { font-size: 8px; padding: 3px 5px; }
  .stack-spine::before { height: 289.51px; transform: translateZ(145px) rotateZ(45deg) rotateX(-79.87deg); }
  .stack-visual[data-active=interface] { --signal-x: -12px; --signal-y: 12px; }
  .stack-visual[data-active=permission] { --signal-x: -24px; --signal-y: 24px; }
  .stack-visual[data-active=settlement] { --signal-x: -36px; --signal-y: 36px; }
}
@media (max-width: 359px) {
  .stack-stage { width: 212px; margin-left: -98px; }
  .plane-content strong { font-size: 15px; }
  .plane-content>.plane-apps>span { font-size: 7px; }
}
.flow-scene { height: 690px; }
.consent-status, .consent-reason, .consent-details, .consent-details dd, .scan-zone p { font-size: 12px; }
.verification-node { bottom: 75px; }
.verification-node p, .payment-node p { font-size: 12px; }
@media (min-width: 621px) { .stack-stage { top: calc(39% - 28px); } }