/* Lumi 2036 capabilities showcase (builds on styles.css tokens) */
body.show { background: radial-gradient(1200px 800px at 80% -10%, rgba(107,77,255,.16), transparent 60%), radial-gradient(900px 700px at -10% 40%, rgba(44,100,227,.10), transparent 60%), var(--bg); background-attachment: fixed; }
body.show .nav { background: none; }

/* ─── hero ─── */
.s-hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 120px 48px 80px; overflow: hidden; }
#memory { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(4,5,11,.85) 0%, rgba(4,5,11,.4) 35%, transparent 60%), linear-gradient(0deg, var(--bg) 0%, transparent 18%); }
.hero-inner { position: relative; z-index: 2; max-width: 620px; animation: rise 1.4s .3s both cubic-bezier(.2,.8,.2,1); }
.year-scrub { margin: 34px 0 26px; max-width: 520px; }
.ys-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ys-head b { font: 600 34px/1 var(--sans); letter-spacing: -0.03em; color: #fff; background: linear-gradient(90deg, #c9b6ff, #7de3ff, #ffd88a); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; --p: 0%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, #6b4dff, #7de3ff calc(var(--p) * .6), #ffd88a var(--p), rgba(255,255,255,.1) var(--p)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, #6b4dff, #7de3ff calc(var(--p) * .6), #ffd88a var(--p), rgba(255,255,255,.1) var(--p)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(125,227,255,.25), 0 0 20px #7de3ff; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(125,227,255,.25), 0 0 20px #7de3ff; }
.ys-ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 4px; }
.mem-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 28px; margin: 0; padding-top: 22px; border-top: 1px solid var(--line); max-width: 600px; }
.mem-stats div { display: flex; flex-direction: column-reverse; }
.mem-stats dt { font: 400 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mem-stats dd { margin: 0 0 4px; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vision-note { position: absolute; z-index: 2; right: 48px; bottom: 32px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; background: rgba(10,13,28,.5); }

/* ─── sections ─── */
.s { position: relative; padding: 140px 48px 60px; max-width: 1280px; margin: 0 auto; }
.s-head { max-width: 720px; margin-bottom: 48px; }
.s-head.center { margin: 80px auto 40px; text-align: center; }
.s-head p:last-child { color: var(--ink-2); font-size: 17px; margin: 0; }
.s-head h2 { font-size: clamp(32px, 4.2vw, 58px); }
.reveal { opacity: 0; transform: translateY(40px); filter: blur(8px); transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1), filter 1.1s; }
.reveal.in { opacity: 1; transform: none; filter: none; }
.card-glass { background: linear-gradient(160deg, rgba(18, 22, 46, 0.7), rgba(8, 10, 22, 0.6)); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 50px 100px -40px rgba(0,0,0,.8); }

/* ─── ask console ─── */
.console { display: grid; grid-template-columns: 340px 1fr; gap: 18px; }
.q-list { display: grid; gap: 8px; align-content: start; }
.q-list button { position: relative; text-align: left; padding: 16px 16px 16px 50px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--ink-2); font: 500 14px/1.45 var(--sans); cursor: pointer; transition: all .3s; }
.q-list button span { position: absolute; left: 16px; top: 17px; font-size: 11px; color: var(--muted); }
.q-list button em { display: inline-block; margin-left: 8px; font-style: normal; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); border: 1px solid rgba(94,234,212,.3); padding: 2px 6px; border-radius: 99px; vertical-align: 2px; }
.q-list button:hover { color: #fff; border-color: var(--line-2); transform: translateX(3px); }
.q-list button.on { color: #fff; border-color: rgba(125,227,255,.45); background: linear-gradient(120deg, rgba(125,227,255,.10), rgba(107,77,255,.08)); box-shadow: 0 0 40px -10px rgba(125,227,255,.35); }
.q-list button.on span { color: var(--cyan); }
.chat { min-height: 560px; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(160deg, rgba(18, 22, 46, 0.72), rgba(8, 10, 22, 0.62)); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 50px 100px -40px rgba(0,0,0,.8); }
.chat-top { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: ping 2s infinite; }
.chat-body { flex: 1; padding: 24px; overflow: auto; max-height: 640px; scrollbar-width: thin; }
.msg.user { margin-left: auto; width: fit-content; max-width: 80%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: linear-gradient(120deg, #e8f4ff, #cbd9ff); color: #0b1430; font-weight: 500; font-size: 14.5px; animation: pop .4s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.msg.bot { display: grid; grid-template-columns: 34px 1fr; gap: 14px; margin-top: 22px; animation: pop .4s cubic-bezier(.2,.8,.2,1); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9fd8ff 40%, #6b4dff); box-shadow: 0 0 20px #7de3ff88; animation: breathe 2.4s ease-in-out infinite; }
.trace { list-style: none; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px dashed rgba(125,227,255,.2); display: grid; gap: 6px; transition: all .5s; }
.trace li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); animation: pop .35s both; }
.trace .sys { flex: none; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); padding: 3px 7px; border-radius: 6px; background: rgba(125,227,255,.08); min-width: 64px; text-align: center; }
.trace .spin { margin-left: auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(125,227,255,.25); border-top-color: var(--cyan); animation: spin .8s linear infinite; flex: none; }
.trace li.done .spin { animation: none; border: 0; width: auto; height: auto; }
.trace li.done .spin::after { content: '✓'; color: var(--mint); font-style: normal; font-size: 12px; }
.trace.folded { opacity: .55; }
.ans { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65; color: #eef2ff; min-height: 1em; }
.rich { opacity: 0; transform: translateY(10px); transition: all .6s cubic-bezier(.2,.8,.2,1); }
.rich.show { opacity: 1; transform: none; }
.rich-chart, .rich-map, .kpis, .check { padding: 16px; border-radius: 16px; background: rgba(5,8,20,.5); border: 1px solid var(--line); }
.rc-head { display: flex; flex-wrap: wrap; gap: 14px; font-size: 10.5px; color: var(--ink-2); margin-bottom: 8px; }
.rc-head i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.rc-cap { font-size: 10px; color: var(--muted); letter-spacing: .06em; margin: 6px 0 0; }
.lc { width: 100%; height: auto; display: block; overflow: visible; }
.lc .grid { stroke: rgba(255,255,255,.06); }
.lc .split { stroke: rgba(255,255,255,.25); stroke-dasharray: 3 3; }
.lc .band { fill: rgba(255,159,178,.18); }
.lc .ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s .1s forwards cubic-bezier(.4,0,.2,1); filter: drop-shadow(0 0 3px rgba(125,227,255,.5)); stroke-linejoin: round; stroke-linecap: round; }
.lc .ln.dash { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; opacity: .7; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.lc .pt { animation: pop .3s 1.5s both; }
.lbl-t { font: 400 9px var(--mono); fill: var(--muted); }
.rich-map { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.cmap { width: 100%; height: auto; display: block; overflow: hidden; }
.cmap path { stroke: rgba(160,190,255,.3); stroke-width: 1.2; transition: fill .5s; }
.pin text { font: 600 30px var(--sans); fill: #fff; }
.pin-ring { fill: none; stroke: var(--c); stroke-width: 3; opacity: .6; transform-origin: center; animation: ring 2s ease-out infinite; }
@keyframes ring { from { transform: scale(.3); opacity: .9; } to { transform: scale(1); opacity: 0; } }
.bars { display: grid; gap: 10px; }
.bars div { display: grid; grid-template-columns: 54px 1fr 44px; gap: 10px; align-items: center; font-size: 12.5px; }
.bars i { height: 10px; border-radius: 99px; background: var(--c); width: var(--w); box-shadow: 0 0 14px var(--c); animation: grow 1.2s both cubic-bezier(.2,.8,.2,1); transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.bars b { font-variant-numeric: tabular-nums; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kpi { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); }
.kpi small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kpi b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin: 2px 0; }
.kpi span { font-size: 11.5px; color: var(--ink-2); }
.check { list-style: none; margin: 0; display: grid; gap: 8px; }
.check li { display: flex; gap: 12px; align-items: center; font-size: 14px; animation: pop .4s var(--d) both; }
.check i { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--mint); position: relative; flex: none; }
.check i::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--mint); font-style: normal; }
.remind { display: inline-block; margin-top: 10px; padding: 8px 12px; border-radius: 99px; background: rgba(245,182,82,.1); border: 1px solid rgba(245,182,82,.3); color: #ffd79a; font-size: 11px; }
.srcs, .fups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.srcs span { font-size: 10px; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--ink-2); animation: pop .3s both; }
.srcs .simtag { color: #7f530e; background: #fcefd8; font-weight: 600; }
.fups span { font-size: 12.5px; padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(125,227,255,.3); color: #bfefff; animation: pop .3s both; }

/* ─── studio ─── */
.studio { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: center; }
.prompt-box { padding: 22px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.prompt-box small, .m-brief small { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.prompt-box p, .m-brief p { font-size: 16px; line-height: 1.55; margin: 8px 0 18px; }
.build-steps { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 4px; }
.build-steps li { position: relative; padding: 9px 0 9px 30px; font-size: 13.5px; color: var(--muted); transition: color .3s; }
.build-steps li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.build-steps li.active { color: #fff; }
.build-steps li.active::before { border-color: var(--cyan); border-top-color: transparent; animation: spin .7s linear infinite; }
.build-steps li.done { color: var(--ink-2); }
.build-steps li.done::before { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 10px var(--mint); }
.exports { display: flex; gap: 6px; opacity: .3; transition: opacity .6s; }
.exports.ready { opacity: 1; }
.exports span { font: 500 11px var(--mono); padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line-2); }
.exports.ready span { border-color: rgba(94,234,212,.4); color: #c8fff3; }
.doc-stage { --fan: 1; position: relative; height: 520px; perspective: 1800px; overflow: clip; overflow-clip-margin: 40px; }
.page { position: absolute; left: 50%; top: 50%; width: 300px; height: 400px; margin: -200px 0 0 -150px; padding: 26px; border-radius: 10px; background: linear-gradient(170deg, #fbfcff, #eef2fa); color: #0f1f44; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.4); opacity: 0; transform: translateY(80px) rotateX(30deg) scale(.85); transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .8s; overflow: hidden; }
.page small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #5b6b83; }
.page.built { opacity: 1; transform: translate(calc(var(--i, 0) * 14px), calc(var(--i, 0) * -10px)) rotateY(-14deg) rotateX(6deg); }
.page:nth-child(1) { --i: 0; z-index: 5; } .page:nth-child(2) { --i: 1; z-index: 4; } .page:nth-child(3) { --i: 2; z-index: 3; } .page:nth-child(4) { --i: 3; z-index: 2; } .page:nth-child(5) { --i: 4; z-index: 1; }
.fanned .page:nth-child(1) { transform: translate(calc(-240px * var(--fan)), 30px) rotateY(18deg) rotateZ(-6deg); }
.fanned .page:nth-child(2) { transform: translate(calc(-120px * var(--fan)), -10px) rotateY(10deg) rotateZ(-2deg); }
.fanned .page:nth-child(3) { transform: translate(0, -30px) rotateY(0deg); }
.fanned .page:nth-child(4) { transform: translate(calc(120px * var(--fan)), -10px) rotateY(-10deg) rotateZ(2deg); }
.fanned .page:nth-child(5) { transform: translate(calc(240px * var(--fan)), 30px) rotateY(-18deg) rotateZ(6deg); }
.p-cover { background: linear-gradient(160deg, #0f1f44, #13286a 60%, #1c3a99) !important; color: #fff !important; display: flex; flex-direction: column; justify-content: flex-end; }
.p-cover small { color: #9fc2ff; }
.p-cover h4 { font-size: 26px; line-height: 1.1; margin: 8px 0 12px; letter-spacing: -0.02em; }
.p-cover span { font-size: 9.5px; color: #9fc2ff; }
.pc-orb { position: absolute; top: 40px; right: 30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9fd8ff 35%, #6b4dff 80%); box-shadow: 0 0 60px #7de3ff; }
.p-summary p { font-size: 11.5px; line-height: 1.6; color: #24324f; margin-top: 10px; }
.p-chart svg, .p-map svg { width: 100%; margin-top: 12px; }
.p-chart rect { transform-origin: bottom; transform-box: fill-box; animation: grow-y 1s var(--d) both cubic-bezier(.2,.8,.2,1); }
.p-chart .lbl-t { fill: #5b6b83; font-size: 10px; }
@keyframes grow-y { from { transform: scaleY(0); } }
.p-map svg { height: 320px; }
.rep-map path { stroke: #fff; stroke-width: 1.5; }
.p-map .rep-map path { fill-opacity: 1; }
.p-table table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 11px; }
.p-table th { text-align: left; font: 500 9px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #5b6b83; padding: 6px 4px; border-bottom: 1px solid #d9e1ee; }
.p-table td { padding: 9px 4px; border-bottom: 1px solid #e6ebf3; }
.p-table td:last-child { font-weight: 700; color: #2c64e3; }
.studio-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.studio-stats div { padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.studio-stats b { display: block; font-size: 44px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, #fff, #7de3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.studio-stats span { font: 400 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

/* ─── foresight ─── */
.sim { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; padding: 28px; border-radius: 28px; background: linear-gradient(160deg, rgba(18, 22, 46, 0.7), rgba(8, 10, 22, 0.6)); border: 1px solid var(--line); }
.sim-map { position: relative; display: grid; place-items: center; }
#simMap { width: 100%; max-height: 640px; height: auto; overflow: hidden; --rw: 4px; }
#simMap path[data-n] { stroke: rgba(170,195,255,.35); stroke-width: 1.4; transition: fill .6s, filter .6s; }
#simMap .lv0 { fill: rgba(125,160,255,.08); }
#simMap .lv1 { fill: rgba(125,227,255,.3); }
#simMap .lv2 { fill: rgba(245,182,82,.55); filter: drop-shadow(0 0 6px rgba(245,182,82,.6)); }
#simMap .lv3 { fill: rgba(255,95,120,.7); filter: drop-shadow(0 0 10px rgba(255,95,120,.8)); animation: hazard 1.6s ease-in-out infinite; }
@keyframes hazard { 50% { fill: rgba(255,95,120,.45); } }
#simMap .river { fill: none; stroke: #9fe3ff; stroke-width: var(--rw); stroke-linecap: round; stroke-dasharray: 14 10; animation: flow 1.2s linear infinite; transition: stroke-width .6s; }
#simMap .river-glow { fill: none; stroke: rgba(125,227,255,.35); stroke-width: calc(var(--rw) * 3.5); stroke-linecap: round; filter: blur(6px); transition: stroke-width .6s; }
@keyframes flow { to { stroke-dashoffset: -24; } }
#simMap .gauge circle:first-child { fill: #fff; }
#simMap .g-ring { fill: none; stroke: #fff; stroke-width: 2; animation: ring 1.8s infinite; transform-origin: center; transform-box: fill-box; }
#simMap.alarm .gauge circle:first-child { fill: #ff5f78; }
#simMap.alarm .g-ring { stroke: #ff5f78; }
#simMap .m-lbl { font: 500 15px var(--mono); fill: rgba(255,255,255,.75); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(4,5,11,.7); stroke-width: 3px; }
.map-legend { display: flex; gap: 14px; font-size: 10.5px; color: var(--ink-2); margin-top: 10px; }
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.l0 { background: rgba(125,160,255,.2); } .l1 { background: rgba(125,227,255,.5); } .l2 { background: #f5b652; } .l3 { background: #ff5f78; }
.attr { font-size: 9.5px; color: var(--muted); margin: 6px 0 0; }
.sim-ctrl { display: flex; flex-direction: column; gap: 18px; }
.ctl { display: grid; gap: 6px; }
.ctl span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ctl b { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ctl b output { background: linear-gradient(120deg, #fff, #9fe3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.toggles { display: grid; gap: 10px; }
.tg { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.tg input { position: absolute; opacity: 0; }
.tg span { width: 38px; height: 22px; border-radius: 99px; background: rgba(255,255,255,.1); position: relative; flex: none; transition: background .3s; }
.tg span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.tg input:checked + span { background: linear-gradient(90deg, #7de3ff, #5eead4); box-shadow: 0 0 16px rgba(94,234,212,.5); }
.tg input:checked + span::after { transform: translateX(16px); }
.tg input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sim-out { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sim-out div { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.sim-out small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sim-out b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.hot { font-style: normal; font-size: 10px; font-weight: 600; color: #ffb3c0; background: rgba(255,95,120,.15); border: 1px solid rgba(255,95,120,.4); padding: 3px 6px; border-radius: 99px; vertical-align: 4px; letter-spacing: .04em; }
.lumi-says { padding: 18px; border-radius: 18px; background: linear-gradient(150deg, rgba(44,100,227,.22), rgba(107,77,255,.12)); border: 1px solid rgba(125,180,255,.25); }
.lumi-says small { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #9fc2ff; }
.lumi-says small::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9fd8ff 45%, #6b4dff); box-shadow: 0 0 12px #7de3ff; }
.lumi-says p { font-size: 14.5px; line-height: 1.6; margin: 10px 0 12px; }
.analog { font-size: 10.5px; color: var(--ink-2); line-height: 1.9; }
.analog span { display: inline-block; padding: 2px 8px; margin: 0 4px 0 0; border-radius: 6px; background: rgba(255,255,255,.06); }

/* ─── watch ─── */
.watch { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }
.watch-radar { display: grid; justify-items: center; gap: 16px; position: sticky; top: 120px; }
.radar { position: relative; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(94,234,212,.08), transparent 70%); border: 1px solid rgba(94,234,212,.25); overflow: hidden; }
.radar i { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(94,234,212,.15); }
.radar i:nth-child(1) { width: 70%; height: 70%; } .radar i:nth-child(2) { width: 40%; height: 40%; } .radar i:nth-child(3) { width: 10%; height: 10%; background: var(--mint); box-shadow: 0 0 20px var(--mint); }
.radar b { position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(94,234,212,.45), transparent 25%); animation: spin 3.2s linear infinite; border-radius: 50%; }
.w-count { text-align: center; }
.w-count b { display: block; font-size: 40px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.w-count span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.al { display: grid; grid-template-columns: 6px 1fr; gap: 16px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(160deg, rgba(18, 22, 46, 0.7), rgba(8, 10, 22, 0.6)); border: 1px solid var(--line); opacity: 0; transform: translateY(-16px) scale(.98); transition: all .6s cubic-bezier(.2,.8,.2,1); }
.al.in { opacity: 1; transform: none; }
.al .lv { border-radius: 99px; }
.al.high .lv { background: #ff5f78; box-shadow: 0 0 14px #ff5f78; } .al.med .lv { background: #f5b652; box-shadow: 0 0 14px #f5b652; } .al.low .lv { background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.al-top { display: flex; gap: 12px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.al.high .al-top span:first-child { color: #ffb3c0; } .al.med .al-top span:first-child { color: #ffd79a; } .al.low .al-top span:first-child { color: #9fe3ff; }
.al-top .t { margin-left: auto; }
.al b { font-size: 16px; font-weight: 600; }
.al p { margin: 4px 0 8px; font-size: 13.5px; color: var(--ink-2); }
.seen { font-size: 10px; padding: 3px 8px; border-radius: 99px; background: rgba(177,151,252,.1); color: #d6c8ff; }

/* ─── missions ─── */
.mission { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: start; }
.m-brief { padding: 22px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid var(--line); position: sticky; top: 120px; }
.m-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: m; }
.m-steps li { counter-increment: m; position: relative; padding: 18px 20px 18px 66px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.02); transition: all .5s; overflow: hidden; }
.m-steps li::before { content: counter(m, decimal-leading-zero); position: absolute; left: 20px; top: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 500 10px var(--mono); border: 1px solid var(--line-2); color: var(--muted); }
.m-steps li::after { content: attr(data-sys); position: absolute; right: 18px; top: 20px; font: 400 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.m-steps b { display: block; font-size: 15px; font-weight: 600; }
.m-steps span { font-size: 13px; color: var(--ink-2); }
.m-steps li.active { border-color: rgba(125,227,255,.45); background: linear-gradient(120deg, rgba(125,227,255,.08), rgba(107,77,255,.05)); }
.m-steps li.active::before { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 16px rgba(125,227,255,.5); }
.m-steps li:not(.gate).active { background-image: linear-gradient(90deg, rgba(125,227,255,.14), rgba(125,227,255,.14)); background-size: 0% 100%; background-repeat: no-repeat; animation: prog 1.3s linear forwards; }
@keyframes prog { to { background-size: 100% 100%; } }
.m-steps li.done::before { content: '✓'; background: var(--mint); color: #04221c; border-color: var(--mint); }
.m-steps li.done { border-color: rgba(94,234,212,.25); }
.m-steps .gate { border-style: dashed; border-color: rgba(245,182,82,.35); }
.m-steps .gate.active { border-style: solid; border-color: #f5b652; background: rgba(245,182,82,.07); box-shadow: 0 0 40px -10px rgba(245,182,82,.5); }
.m-steps .gate.active::before { border-color: #f5b652; color: #f5b652; animation: ping-gold 1.6s infinite; }
@keyframes ping-gold { 0% { box-shadow: 0 0 0 0 rgba(245,182,82,.6); } 100% { box-shadow: 0 0 0 12px rgba(245,182,82,0); } }
.btn-approve { margin-top: 12px; background: linear-gradient(110deg, #fff3d6, #ffd88a); color: #2a1a06; border: 0; font-weight: 600; }
.btn-approve:disabled { opacity: .35; cursor: not-allowed; }
.btn:disabled { cursor: default; transform: none; }

/* ─── briefing ─── */
.brief { display: grid; grid-template-columns: 420px 1fr; gap: 40px; align-items: center; }
.voice { position: relative; height: 420px; border-radius: 28px; background: radial-gradient(circle at 50% 45%, rgba(107,77,255,.25), rgba(8,10,22,.6) 65%); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
#wave { position: absolute; left: 0; right: 0; top: 50%; height: 200px; width: 100%; transform: translateY(-55%); }
.voice-orb { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9fd8ff 35%, #6b4dff 80%); box-shadow: 0 0 60px #7de3ff, 0 0 140px rgba(107,77,255,.6); animation: breathe 3s ease-in-out infinite; position: relative; top: -20px; }
.langs { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.langs button { border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink-2); font: 500 12px var(--sans); padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.langs button.on { background: #fff; color: #0b1430; border-color: #fff; }
.voice > .btn { position: absolute; bottom: 22px; }
.captions { min-height: 360px; }
.captions .greet { font-family: var(--serif); font-style: italic; font-size: clamp(34px, 4vw, 54px); line-height: 1.1; margin: 0 0 22px; background: linear-gradient(100deg, #fff, var(--cyan) 50%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.captions .hint { color: var(--muted); font-size: 12px; }
.captions .ln { display: grid; grid-template-columns: 96px 1fr; gap: 14px; font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; animation: pop .5s both; transition: color .4s; }
.captions .ln span { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); padding-top: 5px; }
.captions .ln.now { color: #fff; }

/* ─── decade ─── */
.decade { display: grid; grid-auto-flow: column; grid-auto-columns: 250px; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 0 30px; position: relative; scrollbar-width: thin; }
.decade article { scroll-snap-align: start; position: relative; padding: 50px 22px 0 0; }
.decade article::before { content: ''; position: absolute; top: 34px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, hsl(calc(260 - var(--i) * 13) 90% 70% / .7), hsl(calc(247 - var(--i) * 13) 90% 70% / .7)); }
.decade .yr { position: absolute; top: 0; left: 0; font-size: 22px; font-weight: 500; color: hsl(calc(260 - var(--i) * 13) 90% 78%); }
.decade .node { position: absolute; top: 28px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: hsl(calc(260 - var(--i) * 13) 90% 70%); box-shadow: 0 0 16px hsl(calc(260 - var(--i) * 13) 90% 70%); }
.decade b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.decade p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.decade .mile { font-size: 10px; letter-spacing: .08em; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--ink-2); display: inline-block; }
.decade article:last-child .node { width: 20px; height: 20px; top: 25px; animation: ping 2s infinite; }

/* ─── numbers & guardrails ─── */
.big-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.big-nums div { padding: 30px 24px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(18, 22, 46, 0.6), rgba(8, 10, 22, 0.4)); }
.big-nums b { display: block; font-size: clamp(48px, 6vw, 84px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; background: linear-gradient(120deg, #fff 20%, #7de3ff 60%, #b197fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big-nums span { font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.guard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.guard article { padding: 24px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.guard i { font: 500 11px var(--mono); font-style: normal; color: var(--gold); }
.guard b { display: block; font-size: 17px; margin: 10px 0 6px; }
.guard p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
#trust2 .final-copy { text-align: center; margin: 60px auto 0; }
#trust2 .foot { text-align: center; }

/* ─── responsive ─── */
@media (max-width: 1100px) {
  .console, .studio, .sim, .watch, .mission, .brief { grid-template-columns: 1fr; }
  .watch-radar, .m-brief { position: static; }
  .radar { width: 200px; height: 200px; }
  .guard, .big-nums, .studio-stats { grid-template-columns: repeat(2, 1fr); }
  .doc-stage { --fan: .7; }
}
@media (max-width: 760px) {
  .s-hero { padding: 52vh 16px 60px; align-items: flex-end; }
  #memory { height: 62vh; bottom: auto; }
  .s-hero::after { background: linear-gradient(0deg, rgba(4,5,11,.95) 0%, rgba(4,5,11,.6) 50%, transparent 75%); }
  .mem-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .vision-note { display: none; }
  .s { padding: 100px 16px 40px; }
  .rich-map { grid-template-columns: 1fr; }
  .rich-map .cmap { max-width: 200px; margin: auto; }
  .doc-stage { --fan: .28; height: 320px; }
  .page { width: 168px; height: 228px; margin: -114px 0 0 -84px; padding: 14px; }
  .p-cover h4 { font-size: 17px; }
  .pc-orb { width: 64px; height: 64px; top: 22px; right: 18px; }
  .p-summary p { font-size: 9px; }
  .p-map svg { height: 190px; }
  .p-table table { font-size: 9px; }
  .p-table td { padding: 5px 3px; }
  .sim { padding: 16px; }
  .sim-out { grid-template-columns: 1fr 1fr; }
  .captions .ln { grid-template-columns: 1fr; gap: 2px; }
  .guard, .big-nums, .studio-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .al-top { flex-wrap: wrap; gap: 6px; }
  .voice { height: 340px; }
}

/* ═════ Layout audit fixes (Nov 2026) ═════ */
@media (min-width: 1101px) and (max-width: 1440px) { .doc-stage { --fan: .8; } }
.langs button { min-height: 36px; }
input[type=range] { height: 32px; }
@media (max-width: 1100px) {
  .captions { min-height: 0; }
}
@media (max-width: 760px) {
  .chat-body { max-height: none; overflow: visible; }
  .chat { min-height: 0; }
  #simMap .m-lbl { font-size: 24px; stroke-width: 5px; }
  .m-steps li { padding: 16px 16px 16px 60px; }
  .m-steps li::after { position: static; display: block; margin-top: 8px; }
  .brief { gap: 24px; }
}