:root {
  color-scheme: dark;
  --bg: #07090c;
  --bg-2: #0b0f13;
  --panel: #0e1318;
  --panel-2: #11171d;
  --text: #eef2f4;
  --muted: #8d99a3;
  --muted-2: #74818b;
  --line: rgba(238, 242, 244, 0.11);
  --line-strong: rgba(238, 242, 244, 0.21);
  --signal: #b8ff4f;
  --cyan: #4ed8ff;
  --orange: #ff995f;
  --max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 76px;
  --ease: cubic-bezier(.22,1,.36,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Tahoma, Arial, sans-serif; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--signal); color: #071008; }
.skip-link { position: fixed; inset: 8px auto auto 8px; padding: 10px 14px; background: var(--signal); color: #081007; z-index: 1000; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
main:focus { outline: none; }
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(600px circle at var(--mx, 72%) var(--my, 16%), rgba(78,216,255,.055), transparent 56%); }
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E"); }
.shell { width: min(var(--max), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
.section { position: relative; z-index: 1; scroll-margin-top: calc(var(--nav-h) + 12px); }
.section-code, .story-index, .menu-label, .chapter-kicker, .muted, .credential-meta, .shot-bar, .portrait-code { font-family: Consolas, "Courier New", monospace; letter-spacing: .13em; text-transform: uppercase; font-size: 11px; color: var(--muted); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .62s var(--ease), transform .62s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

.topbar { position: fixed; inset: 0 0 auto; height: var(--nav-h); z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--gutter); border-bottom: 1px solid transparent; transition: background .24s ease, border-color .24s ease, backdrop-filter .24s ease; }
.topbar.is-scrolled { background: rgba(7,9,12,.86); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { justify-self: start; display: inline-flex; align-items: baseline; font-weight: 800; letter-spacing: .04em; font-size: 19px; }
.brand-dot { color: var(--signal); font-size: 24px; }
.topbar-center { display: flex; align-items: center; gap: 12px; color: var(--muted); font-family: Consolas, monospace; font-size: 11px; letter-spacing: .12em; }
.chapter-current { color: var(--text); }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.language-toggle { display: flex; border: 1px solid var(--line); }
.language-toggle button { border: 0; min-width: 42px; height: 40px; color: var(--muted); background: transparent; cursor: pointer; }
.language-toggle button.is-active { background: var(--panel-2); color: var(--signal); }
.project-pill { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; background: var(--signal); color: #071008; font-weight: 700; font-size: 13px; }
.menu-button { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; color: var(--text); position: relative; cursor: pointer; }
.menu-button span { position: absolute; left: 12px; right: 12px; height: 1px; background: currentColor; transition: transform .25s var(--ease); }
.menu-button span:first-child { top: 18px; } .menu-button span:last-child { top: 25px; }
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.chapter-rail { position: fixed; z-index: 80; left: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; padding-left: 14px; }
[dir="rtl"] .chapter-rail { left: auto; right: 18px; padding-left: 0; padding-right: 14px; }
.chapter-rail::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--line); }
[dir="rtl"] .chapter-rail::before { left: auto; right: 0; }
.rail-progress { position: absolute; left: 0; top: 2px; width: 1px; height: var(--rail,0%); background: var(--signal); transition: height .18s linear; }
[dir="rtl"] .rail-progress { left: auto; right: 0; }
.chapter-rail a { display: grid; grid-template-columns: 26px 0fr; align-items: center; color: var(--muted-2); font-family: Consolas, monospace; font-size: 10px; letter-spacing: .08em; transition: color .2s ease, grid-template-columns .25s var(--ease); overflow: hidden; white-space: nowrap; }
.chapter-rail a span { opacity: 0; transition: opacity .2s ease; }
.chapter-rail a:hover, .chapter-rail a.is-active { color: var(--text); grid-template-columns: 26px 82px; }
.chapter-rail a:hover span, .chapter-rail a.is-active span { opacity: 1; }
.chapter-rail a.is-active b { color: var(--signal); }
.mobile-menu { position: fixed; inset: var(--nav-h) 0 0; z-index: 90; background: rgba(7,9,12,.98); visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s ease; }
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu-inner { padding: 36px var(--gutter); }
.mobile-menu nav { margin-top: 20px; display: grid; }
.mobile-menu nav a { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(24px, 7vw, 48px); }

.hero { min-height: 100svh; padding-top: calc(var(--nav-h) + 54px); display: flex; flex-direction: column; justify-content: space-between; }
.hero::before { content: ""; position: absolute; inset: var(--nav-h) 0 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg,var(--line) 1px, transparent 1px); background-size: 82px 82px; opacity: .15; mask-image: linear-gradient(to bottom, black, transparent 88%); pointer-events:none; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(370px,.88fr); gap: clamp(48px,7vw,110px); align-items: center; flex: 1; }
.hero-copy { padding-block: 16px 48px; }
.availability { display: flex; align-items: center; gap: 10px; color: #bdc6cd; font-family: Consolas, monospace; font-size: 11px; letter-spacing: .13em; margin-bottom: 28px; }
.availability-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(184,255,79,.09); }
.hero-overline { margin: 0 0 8px; color: var(--cyan); font-family: Consolas, monospace; letter-spacing: .13em; font-size: 11px; }
.hero-name { margin: 0; font-size: clamp(62px,7.35vw,118px); line-height: .86; letter-spacing: -.065em; max-width: 9ch; font-weight: 760; }
[dir="rtl"] .hero-name { letter-spacing: -.04em; max-width: 10ch; line-height: .98; }
.hero-name span { display: block; }
.hero-role { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; align-items: start; margin-top: 34px; max-width: 650px; }
.role-index { color: var(--signal); font-family: Consolas, monospace; font-size: 11px; padding-top: 8px; }
.hero-role p { margin: 0; padding-left: 18px; border-left: 1px solid var(--signal); font-size: clamp(24px,3vw,45px); line-height: 1.06; color: #bdc6cd; letter-spacing: -.035em; }
[dir="rtl"] .hero-role p { padding-left: 0; padding-right: 18px; border-left: 0; border-right: 1px solid var(--signal); }
.hero-statement { max-width: 660px; font-size: clamp(18px,1.75vw,25px); line-height: 1.42; margin: 34px 0 0; color: #d9dfe3; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.btn { min-height: 52px; display: inline-flex; align-items: center; gap: 26px; padding: 0 20px; border: 1px solid var(--line); font-weight: 700; font-size: 14px; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.btn-primary { background: var(--signal); color: #081007; border-color: var(--signal); }
.btn-ghost { background: rgba(255,255,255,.02); }
.hero-visual { align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 560px; }
.portrait-stage { width: min(100%,520px); height: min(72vh,700px); min-height: 520px; position: relative; overflow: hidden; border: 1px solid rgba(78,216,255,.25); background: linear-gradient(180deg, rgba(78,216,255,.03), rgba(184,255,79,.015)); }
.portrait-stage::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(78,216,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(78,216,255,.08) 1px,transparent 1px); background-size:54px 54px; opacity:.35; }
.portrait-stage::after { content:""; position:absolute; inset:auto 0 0; height:22%; background:linear-gradient(to bottom,transparent,var(--bg)); z-index:4; pointer-events:none; }
.portrait-stage img { position:absolute; z-index:3; width:118%; max-width:none; left:50%; bottom:-7%; transform:translateX(-50%); filter:saturate(.92) contrast(1.02); }
[dir="rtl"] .portrait-stage img { left:auto; right:50%; transform:translateX(50%); }
.portrait-giant { position:absolute; z-index:1; inset: 3% auto auto -4%; font-weight:900; font-size:clamp(180px,25vw,390px); line-height:.75; color:transparent; -webkit-text-stroke:1px rgba(184,255,79,.13); }
[dir="rtl"] .portrait-giant { left:auto; right:-4%; }
.portrait-code { position:absolute; z-index:5; top:16px; left:16px; color:var(--cyan); }
[dir="rtl"] .portrait-code { left:auto; right:16px; }
.portrait-status { position:absolute; z-index:5; bottom:18px; right:18px; display:flex; gap:8px; align-items:center; font-family:Consolas,monospace; font-size:10px; letter-spacing:.12em; }
[dir="rtl"] .portrait-status { right:auto; left:18px; }
.portrait-status i { width:6px;height:6px;border-radius:50%;background:var(--signal); }
.portrait-axis { position:absolute; z-index:2; background:rgba(78,216,255,.33); }
.axis-x { height:1px; width:70%; top:36%; right:0; } .axis-y { width:1px; height:58%; right:29%; top:0; }
[dir="rtl"] .axis-x { right:auto; left:0; } [dir="rtl"] .axis-y { right:auto; left:29%; }
.hero-footer { border-top:1px solid var(--line); min-height:84px; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; gap:24px; }
.hero-footer div { display:flex; gap:12px; align-items:baseline; }
.hero-footer b { font-family:Consolas,monospace; font-size:11px; font-weight:500; }

.flagship { padding: 150px 0 170px; background: linear-gradient(180deg,var(--bg),#080c10 26%,#080c10 80%,var(--bg)); }
.case-sticky { display:grid; grid-template-columns:minmax(310px,.72fr) minmax(0,1.28fr); gap:clamp(50px,7vw,110px); align-items:start; }
.case-intro { position:sticky; top:calc(var(--nav-h) + 36px); }
.case-intro h2 { font-size:clamp(38px,4.2vw,66px); line-height:.98; letter-spacing:-.045em; margin:14px 0 24px; max-width:12ch; }
[dir="rtl"] .case-intro h2 { max-width:14ch; letter-spacing:-.02em; line-height:1.08; }
.case-lead { color:#aeb8c0; line-height:1.7; font-size:16px; max-width:46ch; }
.case-facts { margin-top:36px; border-top:1px solid var(--line); }
.case-facts div { display:grid; grid-template-columns:110px 1fr; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.case-facts strong { color:var(--signal); font-size:20px; letter-spacing:-.03em; }
.case-facts span { color:var(--muted); font-size:12px; }
.chip-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; }
.chip-row span { border:1px solid var(--line); padding:7px 9px; font:10px Consolas,monospace; color:#b6c0c7; }
.case-story { display:grid; gap:30px; min-width:0; }
.story-card { border-top:1px solid var(--line-strong); padding-top:22px; min-width:0; }
.story-index { display:flex; justify-content:space-between; margin-bottom:18px; }
.story-card h3 { margin:0 0 22px; font-size:clamp(28px,3.2vw,46px); line-height:1.04; letter-spacing:-.035em; }
.system-map { border:1px solid var(--line); background:rgba(255,255,255,.015); padding:clamp(28px,4vw,52px); display:flex; flex-direction:column; align-items:center; min-height:520px; justify-content:center; overflow:hidden; position:relative; }
.system-map::before { content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:42px 42px;opacity:.14; }
.system-node { position:relative; z-index:2; min-width:min(100%,280px); text-align:center; border:1px solid var(--line-strong); background:#0b1015; padding:14px 20px; font-size:13px; font-weight:700; }
.system-node small { display:block;color:var(--muted);font:10px Consolas,monospace;margin-top:5px; }
.node-control { border-color:rgba(184,255,79,.5); }
.node-engine { border-color:rgba(78,216,255,.42); }
.map-line { position:relative; z-index:2; width:1px;height:34px;background:linear-gradient(var(--cyan),var(--line)); }
.accounts-rail { position:relative; z-index:2; width:100%; padding-top:36px; }
.accounts-rail>span { position:absolute; top:0; left:10%; right:10%; height:1px; background:rgba(78,216,255,.32); }
.accounts-rail>span::before { content:"";position:absolute;left:50%;bottom:0;width:1px;height:36px;background:rgba(78,216,255,.32); }
.accounts-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:8px; }
.account-node { position:relative; border:1px solid var(--line); padding:14px 8px;text-align:center;background:#0a0e12; }
.account-node::before { content:"";position:absolute;left:50%;bottom:100%;height:36px;width:1px;background:rgba(78,216,255,.28); }
.account-node b { display:block;color:var(--signal);font:18px Consolas,monospace; }.account-node span{display:block;font-size:10px;margin-top:6px}.account-node small{display:block;color:var(--muted);font:9px Consolas,monospace;margin-top:4px}
.evidence-head { display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:end;margin-bottom:22px; }.evidence-head p{color:var(--muted);line-height:1.6;margin:0}
.terminal-shot { margin:0;border:1px solid var(--line);background:#050709;overflow:hidden; }.shot-bar{min-height:34px;padding:0 12px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);}.terminal-shot img{width:100%;height:auto;}
.process-sequence { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:26px; }.process-step{padding:20px 14px;border-right:1px solid var(--line);min-height:124px;display:flex;flex-direction:column;gap:15px}.process-step:last-child{border-right:0}.process-step b{font:11px Consolas,monospace;color:var(--signal)}.process-step span{font-size:13px;line-height:1.5}
[dir="rtl"] .process-step { border-right:0;border-left:1px solid var(--line); } [dir="rtl"] .process-step:last-child{border-left:0}
.evidence-pair { display:grid;gap:18px; }.evidence-pair .terminal-shot:first-child{width:92%}.evidence-pair .terminal-shot:last-child{width:77%;margin-left:auto}[dir="rtl"] .evidence-pair .terminal-shot:last-child{margin-left:0;margin-right:auto}
.boundary-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;border-left:2px solid var(--orange);padding:20px 0 20px 22px}[dir="rtl"] .boundary-grid{border-left:0;border-right:2px solid var(--orange);padding:20px 22px 20px 0}.boundary-grid p{color:var(--muted);line-height:1.7}.boundary-list{display:flex;flex-wrap:wrap;gap:8px}.boundary-list span{border:1px solid rgba(255,153,95,.28);color:#e7b49a;padding:9px 10px;font:10px Consolas,monospace}

.workflows { padding:150px 0; }
.section-heading { display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.52fr);gap:50px;align-items:end;margin-bottom:70px }.section-heading h2{margin:12px 0 0;font-size:clamp(50px,6vw,88px);line-height:.9;letter-spacing:-.055em;max-width:11ch}.section-heading>p:last-child{color:var(--muted);line-height:1.7}
.workflow-stage { border:1px solid var(--line);padding:clamp(24px,4vw,48px);position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(78,216,255,.018),transparent); }.flow-label{display:flex;justify-content:space-between;gap:20px;font:11px Consolas,monospace;color:var(--muted);margin-bottom:58px}.flow-label b{color:var(--text);font-size:12px}.workflow-nodes{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;position:relative;z-index:2}.flow-node{border-top:1px solid var(--line-strong);padding-top:14px;min-height:122px}.flow-node b{display:block;color:var(--signal);font:10px Consolas,monospace}.flow-node span{display:block;margin-top:24px;font-size:14px;font-weight:700}.flow-node small{display:block;color:var(--muted);font:10px Consolas,monospace;margin-top:7px}.flowline{position:absolute;left:7%;right:7%;top:48%;height:1px;background:var(--line);overflow:hidden}.flowline span{display:block;height:1px;width:18%;background:linear-gradient(90deg,transparent,var(--signal),transparent);animation:signal 4.5s ease-in-out infinite}@keyframes signal{0%,18%{transform:translateX(-120%)}70%,100%{transform:translateX(650%)}}
@media (prefers-reduced-motion: reduce){.flowline span{animation:none;display:none}}
.micro-flow{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:34px;border-top:1px solid var(--line);padding-top:32px}.micro-copy h3{font-size:30px;margin:8px 0}.micro-copy p{color:var(--muted);line-height:1.65;max-width:52ch}.micro-pipeline{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.micro-pipeline span{border:1px solid var(--line);padding:12px 14px;font:11px Consolas,monospace}.micro-pipeline i{font-style:normal;color:var(--signal)}

.services{padding:150px 0;background:#080b0e}.services-head{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:end;margin-bottom:65px}.services-head h2{font-size:clamp(48px,6.5vw,94px);letter-spacing:-.055em;line-height:.9;margin:12px 0 0;max-width:12ch}.services-head>p{color:var(--muted);line-height:1.75}
.service-index{border-top:1px solid var(--line)}.service-row{width:100%;display:grid;grid-template-columns:56px minmax(170px,.7fr) minmax(200px,1fr) 30px;align-items:center;gap:18px;padding:22px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);text-align:left;cursor:pointer;position:relative}.service-row::before{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--signal);transition:width .4s var(--ease)}.service-row:hover::before,.service-row.is-open::before{width:100%}.service-number{font:11px Consolas,monospace;color:var(--signal)}.service-name{font-size:clamp(22px,3vw,38px);letter-spacing:-.03em}.service-tags{color:var(--muted);font:11px Consolas,monospace}.service-toggle{font-size:22px;transition:transform .25s var(--ease)}.service-row.is-open .service-toggle{transform:rotate(45deg)}.service-detail{grid-column:2/4;max-height:0;overflow:hidden;color:#aeb8c0;line-height:1.7;transition:max-height .4s var(--ease),padding .4s var(--ease);padding-top:0}.service-row.is-open .service-detail{max-height:120px;padding-top:8px}
[dir="rtl"] .service-row{text-align:right}.toolbelt{margin-top:42px;display:flex;flex-wrap:wrap;gap:8px}.toolbelt span{border:1px solid var(--line);padding:10px 12px;color:#b9c3ca;font:10px Consolas,monospace}

.about{padding:160px 0}.about-layout{display:grid;grid-template-columns:1fr .85fr;gap:clamp(60px,9vw,130px)}.about-copy h2{font-size:clamp(56px,7vw,100px);line-height:.9;letter-spacing:-.06em;margin:14px 0 30px;max-width:9ch}.about-copy>p:not(.section-code){color:#b3bdc4;line-height:1.8;font-size:17px;max-width:57ch}.education-strip{margin-top:40px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}.education-strip div{padding:18px 14px 18px 0;border-right:1px solid var(--line)}[dir="rtl"] .education-strip div{padding:18px 0 18px 14px;border-right:0;border-left:1px solid var(--line)}.education-strip div:last-child{border:0}.education-strip span{display:block;color:var(--muted);font:9px Consolas,monospace;letter-spacing:.1em}.education-strip b{display:block;margin-top:8px;font-size:13px}
.trajectory{position:relative;padding-left:34px}[dir="rtl"] .trajectory{padding-left:0;padding-right:34px}.timeline-line{position:absolute;left:0;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--signal),var(--line),var(--cyan))}[dir="rtl"] .timeline-line{left:auto;right:0}.trajectory article{position:relative;padding:0 0 52px}.trajectory article::before{content:"";position:absolute;left:-38px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--bg);border:1px solid var(--signal)}[dir="rtl"] .trajectory article::before{left:auto;right:-38px}.trajectory time{font:11px Consolas,monospace;color:var(--signal)}.trajectory h3{font-size:28px;margin:8px 0}.trajectory p{color:var(--muted);line-height:1.65}

.proof{padding:150px 0;background:#080b0e}.proof-heading{grid-template-columns:1fr}.proof-heading h2{max-width:13ch}.credential-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.credential{min-height:250px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--text);padding:24px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:background .25s ease}.credential:last-child{border-right:0}.credential:hover{background:rgba(184,255,79,.035)}.credential b{font-size:22px;line-height:1.18;letter-spacing:-.025em}.credential>span:last-child{font:10px Consolas,monospace;color:var(--signal)}[dir="rtl"] .credential{text-align:right;border-right:0;border-left:1px solid var(--line)}[dir="rtl"] .credential:last-child{border-left:0}

.contact{padding:170px 0 44px}.contact-title{font-size:clamp(68px,10vw,150px);line-height:.78;letter-spacing:-.075em;margin:24px 0 34px;max-width:9ch}[dir="rtl"] .contact-title{letter-spacing:-.04em;line-height:.9}.contact-copy{color:#aeb8c0;line-height:1.75;font-size:18px;max-width:60ch;margin-bottom:56px}.contact-actions{border-top:1px solid var(--line)}.contact-link{display:grid;grid-template-columns:120px 1fr 30px;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);transition:padding .2s ease,background .2s ease}.contact-link:hover{padding-inline:12px;background:rgba(184,255,79,.025)}.contact-link span{color:var(--muted);font:10px Consolas,monospace}.contact-link b{font-size:clamp(18px,2.5vw,30px);font-weight:600}.contact-link i{font-style:normal;color:var(--signal);font-size:20px}.contact-foot{margin-top:90px;border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted);font:10px Consolas,monospace;letter-spacing:.08em}

.credential-modal{width:min(920px,calc(100% - 36px));max-height:90vh;border:1px solid var(--line-strong);background:#0a0e12;color:var(--text);padding:0;box-shadow:0 30px 120px rgba(0,0,0,.5)}.credential-modal::backdrop{background:rgba(0,0,0,.75);backdrop-filter:blur(8px)}.modal-close{position:absolute;right:12px;top:10px;width:40px;height:40px;border:1px solid var(--line);background:#0a0e12;color:var(--text);font-size:24px;cursor:pointer}[dir="rtl"] .modal-close{right:auto;left:12px}.modal-head{padding:18px 62px 18px 18px;border-bottom:1px solid var(--line);display:flex;gap:14px;flex-direction:column}.modal-head span{font:9px Consolas,monospace;color:var(--signal);letter-spacing:.12em}.modal-head b{font-size:16px}.credential-modal img{width:100%;height:auto;max-height:72vh;object-fit:contain;background:#fff}

@media (max-width: 1120px) {
  .chapter-rail { display:none; }
  .menu-button { display:block; }
  .hero-grid{grid-template-columns:1fr .72fr;gap:40px}.hero-name{font-size:clamp(58px,8vw,90px)}
  .case-sticky{grid-template-columns:1fr}.case-intro{position:relative;top:auto;display:grid;grid-template-columns:1fr .8fr;gap:30px}.case-intro h2,.case-intro .section-code{grid-column:1}.case-lead,.case-facts,.chip-row{grid-column:2}.case-lead{grid-row:1/3;margin-top:28px}.case-facts{grid-row:3}.chip-row{grid-row:4}.case-story{margin-top:32px}
  .credential-strip{grid-template-columns:repeat(2,1fr)}.credential:nth-child(2){border-right:0}.credential:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width: 820px) {
  :root{--nav-h:68px;--gutter:20px}.topbar{grid-template-columns:1fr auto}.topbar-center,.project-pill{display:none}.menu-button{display:block}.chapter-rail{display:none}.hero{padding-top:calc(var(--nav-h) + 26px);min-height:auto}.hero-grid{grid-template-columns:1fr}.hero-copy{padding-bottom:0}.hero-name{font-size:clamp(52px,15vw,84px);max-width:10ch}.hero-visual{min-height:auto}.portrait-stage{height:620px;min-height:0;width:100%;margin-top:20px}.portrait-stage img{width:128%;bottom:-5%}.hero-footer{grid-template-columns:1fr;padding:20px 0;gap:10px}.hero-footer div{justify-content:space-between}.flagship,.workflows,.services,.about,.proof,.contact{padding:100px 0}.case-intro{display:block}.case-lead,.case-facts,.chip-row{margin-top:22px}.case-intro h2{max-width:15ch}.case-story{margin-top:60px}.evidence-head,.boundary-grid,.section-heading,.services-head,.about-layout,.micro-flow{grid-template-columns:1fr}.workflow-nodes{grid-template-columns:repeat(3,1fr);row-gap:28px}.flowline{display:none}.micro-pipeline{justify-content:flex-start}.process-sequence{grid-template-columns:1fr 1fr}.process-step:nth-child(2){border-right:0}.process-step:nth-child(-n+2){border-bottom:1px solid var(--line)}.accounts-grid{grid-template-columns:1fr}.accounts-rail>span{left:50%;right:auto;top:0;bottom:0;height:100%;width:1px}.accounts-rail>span::before{display:none}.account-node{width:min(100%,320px);margin:auto}.account-node::before{height:10px;bottom:100%}.system-map{min-height:760px}.section-heading h2,.services-head h2,.about-copy h2{max-width:12ch}.service-row{grid-template-columns:42px 1fr 28px}.service-tags{grid-column:2}.service-toggle{grid-column:3;grid-row:1/3}.service-detail{grid-column:2/4}.education-strip{grid-template-columns:1fr}.education-strip div{border-right:0;border-bottom:1px solid var(--line);padding:14px 0}.education-strip div:last-child{border-bottom:0}.credential-strip{grid-template-columns:1fr}.credential{border-right:0!important;border-left:0!important;border-bottom:1px solid var(--line)!important;min-height:180px}.credential:last-child{border-bottom:0!important}.contact-title{font-size:clamp(60px,18vw,100px)}
}
@media (max-width: 520px) {
  .language-toggle button{min-width:38px}.portrait-stage{height:510px}.hero-statement{font-size:17px}.btn{width:100%;justify-content:space-between}.workflow-nodes{grid-template-columns:1fr 1fr}.process-sequence{grid-template-columns:1fr}.process-step{border-right:0!important;border-left:0!important;border-bottom:1px solid var(--line)}.evidence-pair .terminal-shot:first-child,.evidence-pair .terminal-shot:last-child{width:100%;margin:0}.contact-link{grid-template-columns:1fr 26px}.contact-link span{grid-column:1}.contact-link b{grid-column:1}.contact-link i{grid-column:2;grid-row:1/3}.system-map{padding-inline:14px}.topbar-actions{gap:6px}
}

/* =========================================================
   SIGNAL ROOM / MOTION CUT — creative interaction layer
   ========================================================= */

/* First-visit boot: fast, decorative, never blocks reduced-motion users. */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #05070a;
  color: var(--text);
  transition: opacity .48s var(--ease), visibility .48s ease;
}
.boot-screen.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-lockup { width: min(420px, calc(100% - 48px)); display: grid; gap: 13px; }
.boot-code { font: 10px Consolas, monospace; letter-spacing: .18em; color: var(--signal); }
.boot-lockup strong { font-size: clamp(28px, 5vw, 48px); line-height: .94; letter-spacing: -.045em; }
.boot-lockup i { display: block; width: 100%; height: 1px; background: var(--line); overflow: hidden; position: relative; }
.boot-lockup i::after { content:""; position:absolute; inset:0 auto 0 0; width:42%; background:var(--signal); animation: bootLine .72s var(--ease) both; }
@keyframes bootLine { from { transform:translateX(-110%) } to { transform:translateX(240%) } }

/* Hero: use the original high-resolution photograph as an intentional photo object.
   The darker treatment makes the mall environment read as texture instead of noise. */
.portrait-stage {
  --portrait-x: 0px;
  --portrait-y: 0px;
  clip-path: polygon(8% 0, 100% 0, 100% 89%, 91% 100%, 0 100%, 0 10%);
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(184,255,79,.035);
}
.portrait-stage .portrait-photo {
  position: absolute;
  inset: -3%;
  z-index: 2;
  width: 106%;
  height: 106%;
  max-width: none;
  object-fit: cover;
  object-position: 51% 55%;
  transform: translate3d(var(--portrait-x), var(--portrait-y), 0) scale(1.035);
  filter: saturate(.62) contrast(1.08) brightness(.69);
  transition: transform .22s ease-out, filter .35s ease;
}
.portrait-stage:hover .portrait-photo { filter: saturate(.76) contrast(1.07) brightness(.75); }
[dir="rtl"] .portrait-stage .portrait-photo { inset: -3%; transform: translate3d(var(--portrait-x), var(--portrait-y), 0) scale(1.035); }
.portrait-tint { position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(90deg,rgba(7,9,12,.30),transparent 44%,rgba(78,216,255,.035)),linear-gradient(0deg,rgba(7,9,12,.76),transparent 38%); mix-blend-mode:multiply; }
.portrait-stage::before { z-index:4; mix-blend-mode:screen; opacity:.24; }
.portrait-stage::after { z-index:6; height:17%; }
.portrait-giant { z-index:5; transform: translate3d(calc(var(--portrait-x) * -.4), calc(var(--portrait-y) * -.4), 0); transition:transform .22s ease-out; }
.portrait-code,.portrait-status,.portrait-axis,.portrait-corner { z-index:7; }
.portrait-scan { position:absolute; z-index:7; left:0; right:0; top:-18%; height:18%; pointer-events:none; background:linear-gradient(to bottom,transparent,rgba(184,255,79,.11),rgba(78,216,255,.16),transparent); opacity:0; }
.hero-visual.is-visible .portrait-scan { animation: portraitScan 1.05s .22s var(--ease) 1 both; }
@keyframes portraitScan { 0%{transform:translateY(0);opacity:0} 14%{opacity:.8} 100%{transform:translateY(690%);opacity:0} }
.portrait-corner { position:absolute; width:38px; height:38px; pointer-events:none; }
.portrait-corner::before,.portrait-corner::after { content:""; position:absolute; background:var(--signal); opacity:.52; }
.portrait-corner::before { width:100%;height:1px; }
.portrait-corner::after { width:1px;height:100%; }
.corner-a { left:12px; top:12px; }
.corner-b { right:12px; bottom:12px; transform:rotate(180deg); }
[dir="rtl"] .corner-a { left:auto; right:12px; transform:scaleX(-1); }
[dir="rtl"] .corner-b { right:auto; left:12px; transform:rotate(180deg) scaleX(-1); }

/* Hero copy reveal gets its own choreography instead of generic section fade. */
.hero-name { overflow: visible; }
.hero-name span { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path .72s var(--ease), transform .72s var(--ease); }
.hero-name.is-visible span { clip-path: inset(0 0 0 0); transform: translateY(0); }
.hero-name.is-visible span:nth-child(2) { transition-delay: .08s; }
.hero-role.is-visible p { animation: roleSweep .58s .05s var(--ease) both; }
@keyframes roleSweep { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }
[dir="rtl"] .hero-role.is-visible p { animation-name: roleSweepRtl; }
@keyframes roleSweepRtl { from{clip-path:inset(0 0 0 100%)} to{clip-path:inset(0 0 0 0)} }

/* Chapter rail becomes a signal carrier, not just a static progress line. */
.chapter-rail::after { content:""; position:absolute; left:-3px; top:calc(2px + var(--rail,0%)); width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px rgba(184,255,79,.08),0 0 18px rgba(184,255,79,.28); transform:translateY(-50%); transition:top .12s linear; }
[dir="rtl"] .chapter-rail::after { left:auto; right:-3px; }

/* Flagship: a scroll-reactive signal line runs beside the story. */
.case-sticky { position:relative; }
.case-signal-track { position:absolute; top:0; bottom:0; left:calc(36.1% + clamp(25px,3.5vw,55px)); width:1px; background:var(--line); pointer-events:none; opacity:.72; }
.case-signal-track span { position:absolute; inset:0 0 auto; height:var(--case-progress,0%); background:linear-gradient(var(--signal),var(--cyan)); }
.case-signal-track i { position:absolute; left:50%; top:var(--case-progress,0%); width:7px; height:7px; border-radius:50%; background:var(--signal); transform:translate(-50%,-50%); box-shadow:0 0 16px rgba(184,255,79,.38); }
[dir="rtl"] .case-signal-track { left:auto; right:calc(36.1% + clamp(25px,3.5vw,55px)); }

/* Architecture activation: control -> engine -> manager -> isolated accounts. */
.architecture-card .system-node,
.architecture-card .map-line,
.architecture-card .accounts-rail>span,
.architecture-card .account-node { transition: opacity .42s var(--ease), transform .48s var(--ease), border-color .34s ease, background .34s ease; }
.architecture-card:not(.is-visible) .system-node { opacity:.22; transform:translateY(12px); }
.architecture-card:not(.is-visible) .map-line { opacity:0; transform:scaleY(0); transform-origin:top; }
.architecture-card:not(.is-visible) .accounts-rail>span { opacity:0; transform:scaleX(.1); }
.architecture-card:not(.is-visible) .account-node { opacity:.16; transform:translateY(18px); }
.architecture-card.is-visible .node-control { transition-delay:.08s; border-color:rgba(184,255,79,.72); }
.architecture-card.is-visible .map-line:nth-of-type(1) { transition-delay:.20s; }
.architecture-card.is-visible .node-engine { transition-delay:.28s; border-color:rgba(78,216,255,.62); }
.architecture-card.is-visible .map-line:nth-of-type(2) { transition-delay:.40s; }
.architecture-card.is-visible .node-manager { transition-delay:.48s; }
.architecture-card.is-visible .accounts-rail>span { transition-delay:.58s; }
.architecture-card.is-visible .account-node:nth-child(1){transition-delay:.66s}.architecture-card.is-visible .account-node:nth-child(2){transition-delay:.72s}.architecture-card.is-visible .account-node:nth-child(3){transition-delay:.78s}.architecture-card.is-visible .account-node:nth-child(4){transition-delay:.84s}.architecture-card.is-visible .account-node:nth-child(5){transition-delay:.90s}
.architecture-card.is-visible .account-node { background:linear-gradient(180deg,rgba(184,255,79,.022),#0a0e12); }

/* Evidence is treated as a forensic capture. Real image stays untouched and can be opened full-size. */
.evidence-shot { position:relative; box-shadow:0 28px 90px rgba(0,0,0,.22); transform-origin:center; }
.evidence-shot::before { content:""; position:absolute; z-index:4; inset:34px 0 30px; pointer-events:none; background:linear-gradient(to bottom,transparent 0 46%,rgba(184,255,79,.08) 50%,transparent 54%); transform:translateY(-120%); opacity:0; }
.evidence-shot.is-visible::before { animation:evidenceScan 1.3s .28s var(--ease) 1 both; }
@keyframes evidenceScan { 0%{transform:translateY(-115%);opacity:0} 12%{opacity:.8} 100%{transform:translateY(115%);opacity:0} }
.shot-viewport { position:relative; overflow:hidden; background:#020304; }
.shot-viewport img { width:100%; height:auto; transition:transform .65s var(--ease),filter .35s ease; filter:saturate(.88) contrast(1.03); }
.evidence-shot:hover .shot-viewport img { transform:scale(1.018); filter:saturate(1) contrast(1.04); }
.evidence-shot figcaption { min-height:38px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 12px; color:var(--muted); font:9px Consolas,monospace; letter-spacing:.08em; }
.inspect-shot { border:0; background:transparent; color:var(--signal); padding:9px 0; cursor:pointer; font:9px Consolas,monospace; letter-spacing:.08em; }
.inspect-shot:hover { color:var(--text); }
.evidence-card .evidence-shot { width:96%; margin-inline:auto; }
.evidence-pair .evidence-shot:first-child{width:96%}.evidence-pair .evidence-shot:last-child{width:84%;margin-inline-start:auto;margin-inline-end:0}
[dir="rtl"] .evidence-pair .evidence-shot:last-child{margin-inline-start:0;margin-inline-end:auto}

.evidence-modal { width:min(1200px,calc(100% - 30px)); max-height:92vh; border:1px solid var(--line-strong); background:#06090c; color:var(--text); padding:0; box-shadow:0 34px 140px rgba(0,0,0,.68); }
.evidence-modal::backdrop { background:rgba(0,0,0,.86); backdrop-filter:blur(10px); }
.evidence-modal-stage { overflow:auto; max-height:80vh; background:#030405; }
.evidence-modal-stage img { display:block; width:max(100%,900px); height:auto; max-width:none; }
.evidence-modal .modal-close { z-index:2; }

/* Workflow: one packet passes once; nodes wake up in sequence. */
.flowline span { animation:none; transform:translateX(-120%); opacity:0; }
.workflow-stage.is-visible .flowline span { animation:signalOnce 2.45s .25s var(--ease) 1 both; }
@keyframes signalOnce { 0%{transform:translateX(-120%);opacity:0} 8%{opacity:1} 82%{opacity:1} 100%{transform:translateX(650%);opacity:0} }
.flow-node { transition:transform .42s var(--ease),border-color .32s ease,background .32s ease; }
.workflow-stage.is-visible .flow-node { animation:nodeWake .52s var(--ease) both; }
.workflow-stage.is-visible .flow-node:nth-child(1){animation-delay:.18s}.workflow-stage.is-visible .flow-node:nth-child(2){animation-delay:.36s}.workflow-stage.is-visible .flow-node:nth-child(3){animation-delay:.54s}.workflow-stage.is-visible .flow-node:nth-child(4){animation-delay:.72s}.workflow-stage.is-visible .flow-node:nth-child(5){animation-delay:.90s}.workflow-stage.is-visible .flow-node:nth-child(6){animation-delay:1.08s}
@keyframes nodeWake { 0%{opacity:.35;transform:translateY(10px)} 100%{opacity:1;transform:translateY(0)} }
.flow-node:hover { transform:translateY(-4px); border-color:rgba(184,255,79,.52); background:rgba(184,255,79,.018); }

/* Services: hover is spatial rather than card-like. */
.service-row { overflow:hidden; }
.service-row::after { content:""; position:absolute; left:-12%; top:0; width:10%; height:100%; background:linear-gradient(90deg,transparent,rgba(184,255,79,.07),transparent); transform:skewX(-14deg); opacity:0; }
.service-row:hover::after { animation:rowSweep .62s var(--ease) 1; }
@keyframes rowSweep { 0%{left:-15%;opacity:0} 18%{opacity:1} 100%{left:108%;opacity:0} }
.service-name { transition:transform .28s var(--ease),color .25s ease; }
.service-row:hover .service-name,.service-row.is-open .service-name { transform:translateX(7px); color:#fff; }
[dir="rtl"] .service-row:hover .service-name,[dir="rtl"] .service-row.is-open .service-name { transform:translateX(-7px); }

/* About timeline draws itself once. */
.timeline-line { transform:scaleY(0); transform-origin:top; transition:transform 1.05s var(--ease); }
.trajectory.is-visible .timeline-line { transform:scaleY(1); }
.trajectory article { transition:transform .35s var(--ease); }
.trajectory article:hover { transform:translateX(6px); }
[dir="rtl"] .trajectory article:hover { transform:translateX(-6px); }

/* Credentials: a restrained cursor-follow light without 3D gimmicks. */
.credential { position:relative; overflow:hidden; }
.credential::after { content:""; position:absolute; width:160px; height:160px; border-radius:50%; left:var(--cx,50%); top:var(--cy,50%); transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(78,216,255,.07),transparent 68%); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.credential:hover::after { opacity:1; }
.credential > * { position:relative; z-index:1; }

/* Contact: the ending behaves like a final transmission. */
.contact-title { overflow:hidden; }
.contact-title.is-visible { animation:contactResolve .82s var(--ease) both; }
@keyframes contactResolve { from{clip-path:inset(0 0 100% 0);transform:translateY(24px)} to{clip-path:inset(0 0 0 0);transform:translateY(0)} }
.contact-link i { transition:transform .25s var(--ease),color .25s ease; }
.contact-link:hover i { transform:translate(4px,-4px); color:var(--cyan); }
[dir="rtl"] .contact-link:hover i { transform:translate(-4px,-4px); }

@media (max-width:1120px){
  .case-signal-track{display:none}
}
@media (max-width:820px){
  .portrait-stage{clip-path:polygon(6% 0,100% 0,100% 92%,92% 100%,0 100%,0 7%)}
  .portrait-stage .portrait-photo{object-position:50% 52%;filter:saturate(.66) contrast(1.06) brightness(.72)}
  .evidence-card .evidence-shot,.evidence-pair .evidence-shot:first-child,.evidence-pair .evidence-shot:last-child{width:100%;margin-inline:0}
  .evidence-modal-stage img{width:max(100%,760px)}
}
@media (max-width:520px){
  .evidence-shot figcaption{align-items:flex-start;flex-direction:column;padding:9px 10px;min-height:0}
  .inspect-shot{padding:4px 0}
  .evidence-modal-stage img{width:max(100%,640px)}
}
@media (prefers-reduced-motion: reduce){
  .boot-screen{display:none!important}
  .portrait-scan,.evidence-shot::before{display:none!important}
  .portrait-stage .portrait-photo,.portrait-giant,.timeline-line{transform:none!important;transition:none!important}
  .hero-name span{clip-path:none!important;transform:none!important;transition:none!important}
  .hero-role p,.contact-title,.workflow-stage.is-visible .flow-node{animation:none!important}
  .architecture-card .system-node,.architecture-card .map-line,.architecture-card .accounts-rail>span,.architecture-card .account-node{opacity:1!important;transform:none!important;transition:none!important}
  .flowline span{display:none!important}
  .trajectory .timeline-line{transform:scaleY(1)!important}
}
.story-card.is-visible .evidence-shot::before { animation:evidenceScan 1.3s .28s var(--ease) 1 both; }

/* =========================================================
   SIGNAL ROOM V3 / CINEMATIC SYSTEMS
   The raw screenshots remain available, but the main story uses
   purpose-built, crisp system reconstructions that explain the work.
   ========================================================= */

/* Chapter handoff: a fast signal sweep whenever the active chapter changes. */
.chapter-flash { position:absolute; inset:auto 0 0; height:1px; overflow:hidden; pointer-events:none; }
.chapter-flash::after { content:""; position:absolute; inset:0 auto 0 -28%; width:28%; background:linear-gradient(90deg,transparent,var(--cyan),var(--signal),transparent); opacity:0; }
.topbar.chapter-pulse .chapter-flash::after { animation:chapterFlash .72s var(--ease) 1 both; }
@keyframes chapterFlash { 0%{transform:translateX(0);opacity:0} 15%{opacity:.95} 100%{transform:translateX(460%);opacity:0} }
[dir="rtl"] .chapter-flash::after { left:auto; right:-28%; transform-origin:right; }
[dir="rtl"] .topbar.chapter-pulse .chapter-flash::after { animation-name:chapterFlashRtl; }
@keyframes chapterFlashRtl { 0%{transform:translateX(0);opacity:0} 15%{opacity:.95} 100%{transform:translateX(-460%);opacity:0} }

/* Slight magnetic feedback — translated through CSS variables so the base hover remains intact. */
.btn,.project-pill,.inspect-shot { --mag-x:0px; --mag-y:0px; }
.btn:hover,.project-pill:hover,.inspect-shot:hover { translate:var(--mag-x) var(--mag-y); }

/* The reconstruction language: intentionally not a fake Telegram UI. */
.recon-shell {
  position:relative;
  border:1px solid rgba(238,242,244,.16);
  background:
    linear-gradient(180deg,rgba(78,216,255,.024),transparent 34%),
    #080c10;
  overflow:hidden;
  box-shadow:0 30px 110px rgba(0,0,0,.22);
  isolation:isolate;
}
.recon-shell::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.18;
  background-image:
    linear-gradient(rgba(78,216,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(78,216,255,.13) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 85%);
}
.recon-shell::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border:1px solid transparent;
  background:linear-gradient(120deg,transparent 20%,rgba(184,255,79,.08),transparent 52%) border-box;
  opacity:0;
  transform:translateX(-55%);
}
.recon-shell.scene-active::after { animation:reconSweep 1.05s .08s var(--ease) 1 both; }
@keyframes reconSweep { 0%{transform:translateX(-60%);opacity:0} 18%{opacity:.9} 100%{transform:translateX(70%);opacity:0} }

.recon-toolbar,.recon-footer {
  position:relative;
  z-index:3;
  min-height:40px;
  padding:0 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid var(--line);
  background:rgba(5,8,11,.76);
  backdrop-filter:blur(10px);
  font:9px Consolas,monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.recon-footer { min-height:50px; border-bottom:0; border-top:1px solid var(--line); text-transform:none; letter-spacing:.045em; color:var(--muted); line-height:1.45; }
.recon-tag { color:var(--signal); }
.recon-source { color:var(--muted); }
.recon-footer > span { max-width:64ch; }

/* ---------------------------------------------------------
   Account control reconstruction
   --------------------------------------------------------- */
.account-console {
  display:grid;
  grid-template-columns:minmax(180px,.54fr) minmax(0,1.46fr);
  min-height:470px;
  position:relative;
}
.console-spine {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:14px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(184,255,79,.018),rgba(78,216,255,.018));
  overflow:hidden;
}
[dir="rtl"] .console-spine { border-right:0; border-left:1px solid var(--line); }
.telegram-core {
  width:94px;
  height:94px;
  border:1px solid rgba(78,216,255,.46);
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  color:var(--cyan);
  font:700 22px Consolas,monospace;
  box-shadow:inset 0 0 42px rgba(78,216,255,.045);
}
.telegram-core::before,.telegram-core::after { content:""; position:absolute; border:1px solid rgba(78,216,255,.2); border-radius:50%; inset:-12px; }
.telegram-core::after { inset:-25px; border-style:dashed; opacity:.52; }
.telegram-core i { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--signal); top:-3px; left:50%; transform:translateX(-50%); box-shadow:0 0 18px rgba(184,255,79,.55); }
.console-spine b { color:#d7dee3; font:10px Consolas,monospace; letter-spacing:.13em; }
.console-spine small { color:var(--muted); font:8px Consolas,monospace; letter-spacing:.09em; }
.bus-line { position:absolute; right:-1px; top:50%; width:46%; height:1px; background:linear-gradient(90deg,transparent,var(--cyan)); transform:translateY(-50%); }
[dir="rtl"] .bus-line { right:auto; left:-1px; transform:translateY(-50%) scaleX(-1); }
.bus-line i { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--signal); right:-4px; top:-3.5px; opacity:0; box-shadow:0 0 20px rgba(184,255,79,.6); }
[dir="rtl"] .bus-line i { right:auto; left:-4px; }
.scene-active .telegram-core::after { animation:coreOrbit 3.8s linear infinite; }
.scene-active .telegram-core i { animation:corePulse 1.45s ease-in-out infinite; }
.scene-active .bus-line i { animation:legacyBusPacket 1.4s .22s var(--ease) 2 both; }
@keyframes coreOrbit { to{transform:rotate(360deg)} }
@keyframes corePulse { 0%,100%{opacity:.35;transform:translateX(-50%) scale(.72)} 50%{opacity:1;transform:translateX(-50%) scale(1.15)} }
@keyframes legacyBusPacket { 0%{opacity:0;transform:translateX(-150px)} 15%{opacity:1} 100%{opacity:0;transform:translateX(0)} }
[dir="rtl"] .scene-active .bus-line i { animation-name:legacyBusPacketRtl; }
@keyframes legacyBusPacketRtl { 0%{opacity:0;transform:translateX(150px)} 15%{opacity:1} 100%{opacity:0;transform:translateX(0)} }

.account-stack { display:grid; align-content:center; padding:34px; gap:9px; position:relative; }
.account-stack::before { content:""; position:absolute; left:0; top:9%; bottom:9%; width:1px; background:linear-gradient(transparent,var(--cyan),var(--signal),transparent); opacity:.42; }
[dir="rtl"] .account-stack::before { left:auto; right:0; }
.account-row {
  position:relative;
  min-height:66px;
  display:grid;
  grid-template-columns:34px 42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:1px solid rgba(238,242,244,.10);
  background:rgba(8,12,16,.72);
  opacity:.3;
  transform:translateX(22px);
  transition:border-color .28s ease,background .28s ease,transform .4s var(--ease),opacity .4s var(--ease);
}
[dir="rtl"] .account-row { transform:translateX(-22px); }
.account-row::before { content:""; position:absolute; left:-35px; top:50%; width:34px; height:1px; background:var(--line); }
[dir="rtl"] .account-row::before { left:auto; right:-35px; }
.account-row > b { color:var(--muted-2); font:10px Consolas,monospace; }
.account-glyph { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(78,216,255,.26); color:var(--cyan); font:9px Consolas,monospace; background:rgba(78,216,255,.025); }
.account-row strong { display:block; font-size:14px; font-weight:650; }
.account-row small { display:block; margin-top:4px; color:var(--muted); font:8px Consolas,monospace; letter-spacing:.08em; }
.account-row em { font-style:normal; color:var(--signal); font:8px Consolas,monospace; letter-spacing:.12em; opacity:.0; }
.account-recon.scene-active .account-row { opacity:1; transform:translateX(0); }
.account-recon.scene-active .account-row:nth-child(1){transition-delay:.18s}.account-recon.scene-active .account-row:nth-child(2){transition-delay:.30s}.account-recon.scene-active .account-row:nth-child(3){transition-delay:.42s}.account-recon.scene-active .account-row:nth-child(4){transition-delay:.54s}.account-recon.scene-active .account-row:nth-child(5){transition-delay:.66s}
.account-recon.scene-active .account-row em { animation:readyIn .36s var(--ease) both; }
.account-recon.scene-active .account-row:nth-child(1) em{animation-delay:.45s}.account-recon.scene-active .account-row:nth-child(2) em{animation-delay:.57s}.account-recon.scene-active .account-row:nth-child(3) em{animation-delay:.69s}.account-recon.scene-active .account-row:nth-child(4) em{animation-delay:.81s}.account-recon.scene-active .account-row:nth-child(5) em{animation-delay:.93s}
@keyframes readyIn { from{opacity:0;transform:translateX(6px)} to{opacity:1;transform:none} }
.account-row:hover { border-color:rgba(184,255,79,.38); background:rgba(184,255,79,.025); }

/* ---------------------------------------------------------
   Monitoring reconstruction
   --------------------------------------------------------- */
.cinematic-pair { display:grid; gap:22px; }
.monitor-console { min-height:390px; display:grid; grid-template-columns:1.15fr .85fr; align-items:stretch; }
.monitor-settings { padding:34px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--line); position:relative; }
[dir="rtl"] .monitor-settings { border-right:0; border-left:1px solid var(--line); }
.mini-label { color:var(--cyan); font:9px Consolas,monospace; letter-spacing:.13em; margin-bottom:22px; }
.range-line { display:grid; grid-template-columns:54px auto minmax(30px,1fr) auto; gap:10px; align-items:center; padding:12px 0; border-top:1px solid var(--line); font:10px Consolas,monospace; }
.range-line:last-of-type { border-bottom:1px solid var(--line); }
.range-line b { color:var(--muted); font-size:8px; }
.range-line span { color:#d7dee3; }
.range-line i { height:1px; background:linear-gradient(90deg,var(--cyan),var(--signal)); position:relative; }
.range-line i::before,.range-line i::after { content:""; position:absolute; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--bg); border:1px solid var(--signal); }
.range-line i::before{left:0}.range-line i::after{right:0}
.monitor-log { margin-top:24px; padding:15px 16px; border-left:2px solid var(--signal); background:rgba(184,255,79,.025); }
[dir="rtl"] .monitor-log { border-left:0; border-right:2px solid var(--signal); }
.monitor-log span { color:var(--signal); font:9px Consolas,monospace; letter-spacing:.1em; }
.monitor-log p { margin:8px 0 0; color:#aeb8c0; line-height:1.62; font-size:13px; }
.watch-core { display:grid; place-items:center; position:relative; min-height:390px; overflow:hidden; }
.watch-core::before { content:""; position:absolute; inset:12%; border:1px dashed rgba(78,216,255,.12); transform:rotate(45deg); }
.watch-ring { position:absolute; border-radius:50%; border:1px solid rgba(78,216,255,.22); }
.ring-a{width:200px;height:200px}.ring-b{width:150px;height:150px;border-color:rgba(184,255,79,.24)}.ring-c{width:102px;height:102px;border-style:dashed}
.watch-center { width:84px; height:84px; border-radius:50%; background:#080d10; border:1px solid rgba(184,255,79,.38); display:grid; place-items:center; align-content:center; z-index:2; box-shadow:0 0 60px rgba(184,255,79,.04); }
.watch-center strong { font:700 24px Consolas,monospace; color:var(--text); }
.watch-center small { font:7px Consolas,monospace; color:var(--muted); letter-spacing:.12em; }
.watch-sweep { position:absolute; z-index:1; width:100px; height:1px; left:50%; top:50%; transform-origin:left center; background:linear-gradient(90deg,var(--signal),transparent); opacity:.0; }
.monitor-recon.scene-active .ring-c { animation:watchSpin 5s linear infinite; }
.monitor-recon.scene-active .ring-b { animation:watchBreathe 2s ease-in-out infinite; }
.monitor-recon.scene-active .watch-sweep { opacity:.82; animation:watchSweep 3s linear infinite; }
.monitor-recon.scene-active .watch-center { animation:watchCenter 2.2s ease-in-out infinite; }
@keyframes watchSpin { to{transform:rotate(360deg)} }
@keyframes watchBreathe { 0%,100%{transform:scale(.98);opacity:.45} 50%{transform:scale(1.04);opacity:1} }
@keyframes watchSweep { to{transform:rotate(360deg)} }
@keyframes watchCenter { 0%,100%{box-shadow:0 0 0 0 rgba(184,255,79,.0)} 50%{box-shadow:0 0 0 12px rgba(184,255,79,.035)} }

/* ---------------------------------------------------------
   Recovery reconstruction
   --------------------------------------------------------- */
.recovery-console { min-height:330px; padding:50px 34px 30px; display:grid; grid-template-columns:1fr 48px 1fr 48px 1fr 48px 1fr; align-items:center; gap:0; }
.recovery-state { min-height:142px; border:1px solid var(--line); background:rgba(8,12,16,.82); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; opacity:.28; transform:translateY(12px); transition:opacity .35s var(--ease),transform .42s var(--ease),border-color .3s ease,background .3s ease; }
.recovery-state b { color:var(--muted-2); font:9px Consolas,monospace; }
.recovery-state span { margin-top:auto; font:700 11px Consolas,monospace; letter-spacing:.08em; color:#d8dfe4; }
.recovery-state small { margin-top:7px; color:var(--muted); font-size:10px; line-height:1.4; }
.state-link { height:1px; background:var(--line); position:relative; transform:scaleX(.15); transform-origin:left; opacity:.3; }
[dir="rtl"] .state-link { transform-origin:right; }
.state-link::after { content:""; position:absolute; right:-2px; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--signal); opacity:0; }
[dir="rtl"] .state-link::after { right:auto; left:-2px; }
.recovery-recon.scene-active .recovery-state { opacity:1; transform:none; }
.recovery-recon.scene-active .is-start{transition-delay:.12s;border-color:rgba(78,216,255,.34)}
.recovery-recon.scene-active .is-human{transition-delay:.42s;border-color:rgba(255,153,95,.46);background:rgba(255,153,95,.022)}
.recovery-recon.scene-active .is-reconnect{transition-delay:.72s;border-color:rgba(184,255,79,.34)}
.recovery-recon.scene-active .is-restored{transition-delay:1.02s;border-color:rgba(184,255,79,.58);background:rgba(184,255,79,.026)}
.recovery-recon.scene-active .state-link { animation:linkGrow .32s var(--ease) both; }
.recovery-recon.scene-active .state-link:nth-of-type(1){animation-delay:.30s}.recovery-recon.scene-active .state-link:nth-of-type(2){animation-delay:.60s}.recovery-recon.scene-active .state-link:nth-of-type(3){animation-delay:.90s}
.recovery-recon.scene-active .state-link::after { animation:linkDot .38s var(--ease) both; }
.recovery-recon.scene-active .state-link:nth-of-type(1)::after{animation-delay:.36s}.recovery-recon.scene-active .state-link:nth-of-type(2)::after{animation-delay:.66s}.recovery-recon.scene-active .state-link:nth-of-type(3)::after{animation-delay:.96s}
@keyframes linkGrow { to{transform:scaleX(1);opacity:1;background:linear-gradient(90deg,var(--cyan),var(--signal))} }
@keyframes linkDot { 0%{opacity:0;transform:translateX(-34px)} 30%{opacity:1} 100%{opacity:0;transform:translateX(0)} }
[dir="rtl"] .recovery-recon.scene-active .state-link::after { animation-name:linkDotRtl; }
@keyframes linkDotRtl { 0%{opacity:0;transform:translateX(34px)} 30%{opacity:1} 100%{opacity:0;transform:translateX(0)} }
.recovery-callout { margin:0 34px 30px; border-top:1px solid var(--line); padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.recovery-callout span { color:var(--orange); font:9px Consolas,monospace; letter-spacing:.13em; }
.recovery-callout b { font-size:13px; color:#d8dfe4; font-weight:600; }

/* Architecture gets a visible traveling signal after the structural wake-up. */
.system-map::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--signal); left:50%; top:23%; opacity:0; box-shadow:0 0 18px rgba(184,255,79,.6); }
.architecture-card.scene-active .system-map::after,.architecture-card.is-visible .system-map::after { animation:archPacket 1.7s .72s var(--ease) 1 both; }
@keyframes archPacket { 0%{opacity:0;transform:translate(-50%,-30px)} 14%{opacity:1} 58%{transform:translate(-50%,118px)} 78%{opacity:1;transform:translate(-50%,220px)} 100%{opacity:0;transform:translate(-50%,294px)} }

/* Slight depth and focus change as a story card becomes the current scene. */
.story-card.scene-card { transition:opacity .4s ease,filter .4s ease; }
.story-card.scene-card:not(.scene-active) .recon-shell { filter:saturate(.78) brightness(.92); }
.story-card.scene-card.scene-active .recon-shell { filter:none; }

@media (max-width: 980px) {
  .account-console{grid-template-columns:1fr}.console-spine{min-height:220px;border-right:0;border-left:0;border-bottom:1px solid var(--line)}
  [dir="rtl"] .console-spine{border-left:0}.bus-line{right:50%;top:auto;bottom:-1px;width:1px;height:54px;background:linear-gradient(transparent,var(--cyan));transform:none}.bus-line i{right:-3px;top:auto;bottom:-3px}.account-stack::before{display:none}.account-row::before{display:none}
  [dir="rtl"] .bus-line{left:50%;right:auto;transform:none}.account-stack{padding:24px}
  .monitor-console{grid-template-columns:1fr}.monitor-settings{border-right:0;border-left:0;border-bottom:1px solid var(--line)}[dir="rtl"] .monitor-settings{border-left:0}
  .watch-core{min-height:300px}
  .recovery-console{grid-template-columns:1fr;gap:0;padding:28px}.recovery-state{min-height:104px}.state-link{width:1px;height:34px;justify-self:center;transform:scaleY(.15);transform-origin:top}.recovery-recon.scene-active .state-link{animation-name:linkGrowY}.state-link::after{right:-2px;top:auto;bottom:-2px}[dir="rtl"] .state-link::after{left:auto;right:-2px}
  @keyframes linkGrowY{to{transform:scaleY(1);opacity:1;background:linear-gradient(var(--cyan),var(--signal))}}
  .recovery-recon.scene-active .state-link::after,.recovery-recon.scene-active .state-link:nth-of-type(1)::after,.recovery-recon.scene-active .state-link:nth-of-type(2)::after,.recovery-recon.scene-active .state-link:nth-of-type(3)::after{animation:none;opacity:1}
}
@media (max-width: 620px) {
  .recon-toolbar,.recon-footer{align-items:flex-start;flex-direction:column;padding:10px 12px;min-height:0}.recon-source{line-height:1.4}.recon-footer{gap:8px}
  .account-stack{padding:16px 12px}.account-row{grid-template-columns:26px 36px minmax(0,1fr);padding:10px}.account-row em{grid-column:3;margin-top:2px}.account-row small{font-size:7px;letter-spacing:.05em}
  .monitor-settings{padding:24px 18px}.range-line{grid-template-columns:44px auto minmax(18px,1fr) auto}.watch-core{min-height:260px}.ring-a{width:176px;height:176px}.ring-b{width:132px;height:132px}.ring-c{width:92px;height:92px}
  .recovery-console{padding:18px 12px}.recovery-callout{margin:0 12px 20px;align-items:flex-start;flex-direction:column}
}
@media (prefers-reduced-motion: reduce) {
  .chapter-flash,.recon-shell::after,.telegram-core::after,.telegram-core i,.bus-line i,.watch-ring,.watch-sweep,.watch-center,.system-map::after{animation:none!important}
  .account-row,.recovery-state,.state-link{opacity:1!important;transform:none!important;transition:none!important}
  .account-row em{opacity:1!important;animation:none!important}
  .state-link{background:var(--line)!important}
}

/* ==========================================================
   V3.1 — LIVE EVIDENCE THEATRE
   Real Telegram captures stay real; presentation becomes cinematic.
   ========================================================== */
.capture-theatre {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(78,216,255,.18);
  background:
    radial-gradient(circle at 50% 18%, rgba(78,216,255,.055), transparent 34%),
    linear-gradient(180deg, rgba(8,13,18,.97), rgba(5,9,13,.99));
  box-shadow: 0 34px 120px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025);
  isolation: isolate;
}
.capture-theatre::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background-image:
    linear-gradient(rgba(78,216,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,216,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
  z-index: 0;
}
.capture-theatre::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(110deg, transparent 10%, rgba(184,255,79,.22) 42%, rgba(78,216,255,.3) 52%, transparent 68%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  z-index: 5;
}
.capture-theatre.scene-active::after { animation: evidenceEdgeSweep 6.4s ease-in-out infinite; }
@keyframes evidenceEdgeSweep { 0%,72%,100%{opacity:0;transform:translateX(-35%)} 78%{opacity:.9} 90%{opacity:.25;transform:translateX(35%)} }

.capture-hud,
.capture-controls {
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(4,8,12,.72);
  backdrop-filter: blur(10px);
}
.capture-controls { border-top: 1px solid var(--line); border-bottom: 0; min-height: 64px; }
.capture-hud-left,.capture-hud-right { display:flex; align-items:center; gap:12px; min-width:0; }
.capture-hud-left span:not(.live-dot),.capture-hud-right span,.capture-hud-left b {
  font: 9px/1.2 Consolas,monospace;
  letter-spacing: .12em;
  white-space: nowrap;
}
.capture-hud-left span:not(.live-dot){color:var(--cyan)}
.capture-hud-left b{color:var(--muted-2);font-weight:500}
.capture-hud-right span{color:var(--muted-2)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 14px rgba(184,255,79,.65)}
.capture-theatre.scene-active .live-dot{animation:evidenceHeartbeat 1.55s ease-in-out infinite}
@keyframes evidenceHeartbeat{0%,100%{transform:scale(.78);opacity:.42}45%{transform:scale(1.12);opacity:1;box-shadow:0 0 20px rgba(184,255,79,.85)}}

.capture-stage {
  --capture-tilt-x: 0deg;
  --capture-tilt-y: 0deg;
  position: relative;
  z-index: 2;
  min-height: 610px;
  overflow: hidden;
  perspective: 1500px;
  background:
    radial-gradient(circle at 50% 52%, rgba(78,216,255,.045), transparent 42%),
    linear-gradient(180deg, rgba(4,8,12,.2), rgba(2,5,8,.72));
}
.capture-stage::before {
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:72%; height:72%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(78,216,255,.08);
  box-shadow:0 0 0 46px rgba(78,216,255,.012),0 0 0 92px rgba(78,216,255,.008);
  pointer-events:none;
}
.capture-stage::after {
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(2,5,8,.92),transparent 11%,transparent 89%,rgba(2,5,8,.92)),linear-gradient(180deg,rgba(2,5,8,.55),transparent 16%,transparent 86%,rgba(2,5,8,.75));
  z-index:4;
}
.capture-ambient{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.capture-ambient i{position:absolute;border:1px solid rgba(78,216,255,.12);border-radius:50%;width:280px;height:280px;filter:blur(.1px)}
.capture-ambient i:nth-child(1){left:-90px;top:8%}.capture-ambient i:nth-child(2){right:-120px;bottom:-40px;width:360px;height:360px;border-color:rgba(184,255,79,.09)}.capture-ambient i:nth-child(3){left:56%;top:42%;width:140px;height:140px;border-color:rgba(78,216,255,.07)}
.capture-theatre.scene-active .capture-ambient i:nth-child(1){animation:ambientOrbitA 14s ease-in-out infinite alternate}
.capture-theatre.scene-active .capture-ambient i:nth-child(2){animation:ambientOrbitB 18s ease-in-out infinite alternate}
.capture-theatre.scene-active .capture-ambient i:nth-child(3){animation:ambientOrbitA 11s 1s ease-in-out infinite alternate-reverse}
@keyframes ambientOrbitA{to{transform:translate(42px,28px) scale(1.08);opacity:.45}}@keyframes ambientOrbitB{to{transform:translate(-46px,-24px) scale(.94);opacity:.5}}

.capture-slide {
  position: absolute;
  inset: 42px 34px 76px;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(9%, 18px, -90px) scale(.935) rotateY(-3deg);
  clip-path: inset(0 100% 0 0);
  transition: opacity .72s var(--ease), transform .9s var(--ease), clip-path .82s var(--ease), filter .7s ease;
  filter: saturate(.55) brightness(.55);
  z-index: 1;
}
[dir="rtl"] .capture-slide { transform:translate3d(-9%,18px,-90px) scale(.935) rotateY(3deg); clip-path:inset(0 0 0 100%); }
.capture-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0,0,0) scale(1) rotateY(0);
  clip-path: inset(0 0 0 0);
  filter: saturate(.92) brightness(.92);
  z-index: 3;
}
.capture-slide.is-leaving { opacity:0; transform:translate3d(-6%,0,-70px) scale(.96); filter:saturate(.5) brightness(.5); }
[dir="rtl"] .capture-slide.is-leaving{transform:translate3d(6%,0,-70px) scale(.96)}
.capture-plane {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(78,216,255,.22);
  background: rgba(0,4,7,.94);
  box-shadow: 0 26px 70px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.018);
  transform-style: preserve-3d;
  transform: rotateX(var(--capture-tilt-y)) rotateY(var(--capture-tilt-x));
  transition: transform .22s ease-out, border-color .35s ease, box-shadow .35s ease;
}
.capture-slide.is-active .capture-plane{border-color:rgba(78,216,255,.34);box-shadow:0 32px 86px rgba(0,0,0,.4),0 0 52px rgba(78,216,255,.035),inset 0 0 0 1px rgba(255,255,255,.025)}
.capture-plane::before {
  content:"";
  position:absolute; inset:0;
  z-index:3; pointer-events:none;
  background:
    linear-gradient(90deg,var(--cyan),var(--cyan)) left top/34px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left top/1px 34px no-repeat,
    linear-gradient(90deg,var(--signal),var(--signal)) right bottom/34px 1px no-repeat,
    linear-gradient(var(--signal),var(--signal)) right bottom/1px 34px no-repeat;
  opacity:.72;
}
.capture-plane::after {
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:4;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.013) 0 1px,transparent 1px 4px),radial-gradient(circle at 50% 30%,transparent 42%,rgba(0,0,0,.22) 100%);
  mix-blend-mode:screen;
}
.capture-plane img {
  display:block;
  width:100%; height:100%;
  object-fit:contain;
  transform:scale(1.018) translate3d(0,0,0);
  transform-origin:center;
  will-change:transform,filter;
}
.capture-theatre.scene-active .capture-slide.is-active .capture-plane img{animation:captureDrift 11s ease-in-out infinite alternate}
@keyframes captureDrift{0%{transform:scale(1.014) translate3d(-.25%,.1%,0);filter:contrast(1.02) brightness(.96)}100%{transform:scale(1.034) translate3d(.35%,-.32%,0);filter:contrast(1.06) brightness(1.02)}}
.capture-scan {
  position:absolute; z-index:5; left:0; right:0; top:-18%; height:16%;
  pointer-events:none; opacity:0;
  background:linear-gradient(180deg,transparent,rgba(78,216,255,.055),rgba(184,255,79,.16),rgba(78,216,255,.055),transparent);
  filter:blur(.2px);
}
.capture-theatre.scene-active .capture-slide.is-active .capture-scan{animation:captureScan 4.2s linear infinite}
@keyframes captureScan{0%{top:-18%;opacity:0}7%{opacity:.78}80%{opacity:.42}100%{top:112%;opacity:0}}
.capture-focus{position:absolute;z-index:6;width:10px;height:10px;border:1px solid var(--signal);border-radius:50%;opacity:0;pointer-events:none;box-shadow:0 0 14px rgba(184,255,79,.34)}
.capture-slide[data-capture-index="0"] .focus-a{left:78%;top:20%}.capture-slide[data-capture-index="0"] .focus-b{left:60%;top:44%}
.capture-slide[data-capture-index="1"] .focus-a{left:18%;top:13%}.capture-slide[data-capture-index="1"] .focus-b{left:23%;top:76%}
.capture-slide[data-capture-index="2"] .focus-a{left:73%;top:38%}.capture-slide[data-capture-index="2"] .focus-b{left:48%;top:55%}
.capture-theatre.scene-active .capture-slide.is-active .capture-focus{animation:focusPing 3.4s ease-out infinite}
.capture-theatre.scene-active .capture-slide.is-active .focus-b{animation-delay:1.65s}
@keyframes focusPing{0%,68%,100%{opacity:0;transform:scale(.35)}74%{opacity:1}86%{opacity:.45;transform:scale(2.8);box-shadow:0 0 24px rgba(184,255,79,.48)}}
.capture-slide figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 2px;color:var(--muted)}
.capture-slide figcaption b{font:700 10px Consolas,monospace;letter-spacing:.13em;color:#dce5ea}.capture-slide figcaption span{font-size:12px;color:var(--muted)}
.capture-readout{position:absolute;left:24px;right:24px;bottom:20px;z-index:5;display:flex;align-items:center;gap:12px;color:var(--muted-2);font:8px Consolas,monospace;letter-spacing:.12em;pointer-events:none}
.capture-readout i{height:1px;flex:1;background:linear-gradient(90deg,rgba(78,216,255,.08),rgba(78,216,255,.34),rgba(184,255,79,.24),rgba(78,216,255,.08));position:relative;overflow:hidden}
.capture-readout i::after{content:"";position:absolute;top:0;bottom:0;width:18%;background:linear-gradient(90deg,transparent,var(--signal),transparent);transform:translateX(-120%)}
.capture-theatre.scene-active .capture-readout i::after{animation:readoutSignal 3.8s linear infinite}
@keyframes readoutSignal{to{transform:translateX(680%)}}

.capture-tabs{display:flex;align-self:stretch;min-width:0;flex:1}.capture-tab{position:relative;min-width:0;flex:0 1 180px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);display:grid;grid-template-columns:26px 1fr;align-content:center;gap:2px 8px;padding:10px 14px;text-align:left;cursor:pointer;overflow:hidden}
[dir="rtl"] .capture-tab{border-right:0;border-left:1px solid var(--line);text-align:right}
.capture-tab b{grid-row:1/3;color:var(--muted-2);font:9px Consolas,monospace;align-self:center}.capture-tab span{font-size:11px}.capture-tab i{grid-column:2;height:1px;background:rgba(255,255,255,.07);overflow:hidden;position:relative}.capture-tab i::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--cyan),var(--signal))}[dir="rtl"] .capture-tab i::after{transform-origin:right}
.capture-tab.is-active{color:#e2e9ed;background:rgba(78,216,255,.025)}.capture-tab.is-active b{color:var(--signal)}
.capture-theatre.scene-active .capture-tab.is-active i::after{animation:tabEvidenceProgress 6.8s linear both}
@keyframes tabEvidenceProgress{to{transform:scaleX(1)}}
.theatre-inspect{white-space:nowrap;margin-left:auto}[dir="rtl"] .theatre-inspect{margin-left:0;margin-right:auto}

/* Recovery is now a living state cycle rather than a one-shot entrance. */
.recovery-recon.scene-active .recovery-state{animation:recoveryStateLoop 8.4s ease-in-out infinite}
.recovery-recon.scene-active .is-start{animation-delay:0s}.recovery-recon.scene-active .is-human{animation-delay:2.1s}.recovery-recon.scene-active .is-reconnect{animation-delay:4.2s}.recovery-recon.scene-active .is-restored{animation-delay:6.3s}
@keyframes recoveryStateLoop{0%,100%{box-shadow:none;transform:translateY(0)}6%{box-shadow:0 0 0 1px rgba(78,216,255,.22),0 0 34px rgba(78,216,255,.07);transform:translateY(-3px)}15%{box-shadow:0 0 0 1px rgba(184,255,79,.14),0 0 22px rgba(184,255,79,.04);transform:translateY(0)}24%,96%{box-shadow:none;transform:translateY(0)}}
.recovery-recon.scene-active .state-link::after{animation:recoveryLinkPacket 8.4s linear infinite!important;opacity:0}
.recovery-recon.scene-active .state-link:nth-of-type(1)::after{animation-delay:.9s!important}.recovery-recon.scene-active .state-link:nth-of-type(2)::after{animation-delay:3s!important}.recovery-recon.scene-active .state-link:nth-of-type(3)::after{animation-delay:5.1s!important}
@keyframes recoveryLinkPacket{0%,88%,100%{opacity:0;transform:translateX(-34px)}90%{opacity:1}96%{opacity:.8;transform:translateX(0)}}
[dir="rtl"] .recovery-recon.scene-active .state-link::after{animation-name:recoveryLinkPacketRtl!important}@keyframes recoveryLinkPacketRtl{0%,88%,100%{opacity:0;transform:translateX(34px)}90%{opacity:1}96%{opacity:.8;transform:translateX(0)}}

@media (max-width:980px){
  .capture-stage{min-height:520px}.capture-slide{inset:34px 18px 72px}.capture-hud-right{display:none}.capture-controls{align-items:stretch;flex-direction:column;padding:0}.capture-tabs{width:100%}.capture-tab{flex:1}.theatre-inspect{margin:0 14px 12px!important;align-self:flex-start}.capture-slide figcaption{gap:10px;align-items:flex-start;flex-direction:column}.capture-readout{left:14px;right:14px}
}
@media (max-width:620px){
  .capture-hud{padding:0 12px}.capture-hud-left{gap:8px}.capture-hud-left span:not(.live-dot){font-size:7px}.capture-hud-left b{font-size:7px}.capture-stage{min-height:390px}.capture-slide{inset:24px 10px 64px;gap:8px}.capture-plane{border-color:rgba(78,216,255,.18)}.capture-plane img{width:100%;height:100%;object-fit:contain}.capture-slide figcaption b{font-size:8px}.capture-slide figcaption span{font-size:10px}.capture-tabs{overflow-x:auto}.capture-tab{min-width:0;padding:9px 8px;grid-template-columns:18px 1fr}.capture-readout{bottom:12px;font-size:6px}.capture-readout span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  .capture-theatre::after,.live-dot,.capture-ambient i,.capture-plane img,.capture-scan,.capture-focus,.capture-readout i::after,.capture-tab i::after,.recovery-state,.state-link::after{animation:none!important}
  .capture-slide{transition:none!important}.capture-plane{transform:none!important}.capture-slide.is-active{opacity:1;clip-path:none;transform:none;filter:none}
}

/* =========================================================
   V3.2 — SYSTEM THEATRE / NAVIGATION REFINEMENT
   Fixes chapter tracking, contact typography, and replaces
   raw screenshot-first presentation with crisp animated system views.
   ========================================================= */

/* 01 — Chapter rail: the locator now represents the active chapter,
   then travels only toward the next chapter as that section progresses. */
.chapter-rail { --rail-dot: 9px; --rail-fill: 7px; }
.rail-progress {
  height: var(--rail-fill) !important;
  background: linear-gradient(to bottom, rgba(184,255,79,.96), rgba(78,216,255,.55));
  transition: height .16s linear;
}
.chapter-rail::after {
  top: var(--rail-dot) !important;
  width: 8px;
  height: 8px;
  left: -3.5px;
  transition: top .16s linear, box-shadow .24s ease, transform .24s ease;
}
[dir="rtl"] .chapter-rail::after { left:auto; right:-3.5px; }
.chapter-rail a.is-active::before {
  content:"";
  position:absolute;
  inset-inline-start:-14px;
  width:1px;
  height:18px;
  background:var(--signal);
  box-shadow:0 0 14px rgba(184,255,79,.26);
}
.chapter-rail a { position:relative; }

/* 02 — Topbar chapter readout: less dead space, more like a live signal index. */
.topbar-center {
  min-width: 300px;
  justify-content:center;
  gap:9px;
  padding:8px 14px;
  border-inline:1px solid rgba(238,242,244,.055);
  background:linear-gradient(90deg,transparent,rgba(78,216,255,.025),transparent);
}
.chapter-kicker { color:var(--muted-2); font-size:9px; letter-spacing:.16em; }
.chapter-number { color:var(--signal); font:700 10px Consolas,monospace; letter-spacing:.12em; min-width:20px; text-align:center; }
.chapter-divider { color:rgba(238,242,244,.22); font:10px Consolas,monospace; }
.chapter-current { color:#dfe6ea; font:700 10px Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; min-width:74px; }
.chapter-meter { width:58px; height:1px; background:rgba(238,242,244,.09); position:relative; overflow:hidden; margin-inline:3px 5px; }
.chapter-meter i { position:absolute; inset:0 auto 0 -28%; width:28%; background:linear-gradient(90deg,transparent,var(--cyan),var(--signal),transparent); }
.topbar.chapter-pulse .chapter-meter i { animation:chapterMeterPulse .72s var(--ease) 1 both; }
@keyframes chapterMeterPulse { from{transform:translateX(0);opacity:0} 15%{opacity:1} to{transform:translateX(460%);opacity:0} }
[dir="rtl"] .chapter-meter i { inset:0 -28% 0 auto; }
[dir="rtl"] .topbar.chapter-pulse .chapter-meter i { animation-name:chapterMeterPulseRtl; }
@keyframes chapterMeterPulseRtl { from{transform:translateX(0);opacity:0} 15%{opacity:1} to{transform:translateX(-460%);opacity:0} }

/* 03 — Contact headline: no glyph clipping; two intentional transmission lines. */
.contact-title {
  overflow:visible !important;
  max-width:11ch;
  line-height:.86;
  padding-block:.09em .14em;
  margin-block:18px 26px;
}
.contact-title.is-visible { animation:none !important; }
.contact-line {
  display:block;
  width:max-content;
  max-width:100%;
  clip-path:inset(0 0 110% 0);
  transform:translateY(32px);
  opacity:.01;
  transition:clip-path .82s var(--ease), transform .82s var(--ease), opacity .35s ease;
}
.contact-title.is-visible .contact-line { clip-path:inset(-8% 0 -12% 0); transform:translateY(0); opacity:1; }
.contact-title.is-visible .contact-line:nth-child(2) { transition-delay:.09s; }
.contact-focus {
  position:relative;
  color:var(--signal);
  text-shadow:0 0 34px rgba(184,255,79,.055);
}
.contact-focus::after {
  content:"";
  position:absolute;
  inset:auto 0 -.08em;
  height:1px;
  background:linear-gradient(90deg,var(--signal),rgba(78,216,255,.4),transparent 88%);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .88s .28s var(--ease);
}
[dir="rtl"] .contact-focus::after { transform-origin:right; background:linear-gradient(270deg,var(--signal),rgba(78,216,255,.4),transparent 88%); }
.contact-title.is-visible .contact-focus::after { transform:scaleX(1); }
[dir="rtl"] .contact-title { max-width:12ch; line-height:1.02; }

/* 04 — Evidence theatre now presents animated system reconstructions.
   Raw Telegram captures remain available through VIEW RAW CAPTURE. */
.capture-stage { min-height:620px; }
.capture-plane.evidence-system {
  display:block;
  padding:clamp(28px,4vw,54px);
  background:
    radial-gradient(circle at 50% 45%,rgba(78,216,255,.045),transparent 43%),
    linear-gradient(180deg,rgba(4,10,15,.985),rgba(2,6,10,.995));
}
.evidence-system > * { position:relative; z-index:2; }
.evidence-grid {
  position:absolute!important;
  inset:0;
  z-index:0!important;
  opacity:.2;
  background-image:linear-gradient(rgba(78,216,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(78,216,255,.055) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 48%,black 10%,transparent 82%);
}
.system-eyebrow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:var(--muted-2);
  font:9px Consolas,monospace;
  letter-spacing:.14em;
  min-height:24px;
}
.system-eyebrow::before { content:""; width:28px; height:1px; background:var(--cyan); box-shadow:0 0 12px rgba(78,216,255,.22); }
.system-eyebrow span { margin-inline-end:auto; }
.system-eyebrow b { color:var(--signal); font-weight:600; }
.evidence-system svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* Account control scene */
.account-orchestrator {
  min-height:380px;
  display:grid;
  grid-template-rows:150px 52px 1fr;
  align-items:center;
  padding-top:10px;
}
.orchestrator-core {
  justify-self:center;
  width:min(300px,74%);
  min-height:126px;
  display:grid;
  grid-template-columns:50px 1fr;
  grid-template-rows:auto auto auto;
  align-content:center;
  column-gap:16px;
  padding:20px 24px;
  border:1px solid rgba(78,216,255,.28);
  background:linear-gradient(135deg,rgba(78,216,255,.045),rgba(184,255,79,.018));
  position:relative;
  box-shadow:0 20px 70px rgba(0,0,0,.26);
}
.orchestrator-core svg { width:48px; height:48px; grid-row:1/4; color:var(--cyan); filter:drop-shadow(0 0 12px rgba(78,216,255,.18)); }
.orchestrator-core span,.orchestrator-core small { font:9px Consolas,monospace; letter-spacing:.12em; color:var(--muted-2); }
.orchestrator-core b { font-size:17px; letter-spacing:.01em; color:#e6edf0; }
.core-wave { position:absolute; inset:50% auto auto 50%; width:74px; height:74px; border:1px solid rgba(78,216,255,.14); border-radius:50%; transform:translate(-50%,-50%) scale(.5); opacity:0; pointer-events:none; }
.capture-theatre.scene-active .capture-slide.is-active .core-wave { animation:coreWave 3s ease-out infinite; }
.capture-theatre.scene-active .capture-slide.is-active .wave-b { animation-delay:1.5s; }
@keyframes coreWave { 0%{opacity:0;transform:translate(-50%,-50%) scale(.45)} 18%{opacity:.65} 78%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.25)} }
.session-bus { width:calc(80% - 20px); height:52px; justify-self:center; position:relative; }
.session-bus::before { content:""; position:absolute; left:50%; top:0; bottom:24px; width:1px; background:linear-gradient(var(--cyan),rgba(78,216,255,.18)); }
.session-bus::after { content:""; position:absolute; left:0; right:0; bottom:24px; height:1px; background:linear-gradient(90deg,transparent,rgba(78,216,255,.28) 8%,rgba(184,255,79,.28) 50%,rgba(78,216,255,.28) 92%,transparent); }
.bus-packet { position:absolute; bottom:21px; left:0; width:7px; height:7px; border-radius:50%; background:var(--signal); opacity:0; box-shadow:0 0 16px rgba(184,255,79,.62); }
.capture-theatre.scene-active .capture-slide.is-active .bus-packet { animation:busPacket 4.6s linear infinite; }
@keyframes busPacket { 0%,5%{left:50%;bottom:48px;opacity:0} 10%{opacity:1} 28%{left:50%;bottom:21px} 35%{left:5%;bottom:21px} 68%{left:95%;bottom:21px;opacity:1} 76%,100%{left:95%;bottom:21px;opacity:0} }
[dir="rtl"] .capture-theatre.scene-active .capture-slide.is-active .bus-packet { animation-name:busPacketRtl; }
@keyframes busPacketRtl { 0%,5%{left:50%;bottom:48px;opacity:0} 10%{opacity:1} 28%{left:50%;bottom:21px} 35%{left:95%;bottom:21px} 68%{left:5%;bottom:21px;opacity:1} 76%,100%{left:5%;bottom:21px;opacity:0} }
.session-matrix { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; align-self:start; }
.session-block {
  min-height:112px;
  border:1px solid rgba(238,242,244,.105);
  background:rgba(7,12,17,.78);
  display:grid;
  grid-template-columns:24px 1fr 8px;
  grid-template-rows:28px auto auto;
  align-content:center;
  gap:3px 8px;
  padding:13px 12px;
  position:relative;
  transition:border-color .25s ease, background .25s ease, transform .25s var(--ease);
}
.session-block::before { content:""; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:.15; }
.session-block svg { width:20px; height:20px; grid-column:1; grid-row:1/4; align-self:center; color:#6d7d89; }
.session-block .session-no { position:absolute; top:7px; right:8px; color:var(--muted-2); font:7px Consolas,monospace; letter-spacing:.08em; }
[dir="rtl"] .session-block .session-no { right:auto; left:8px; }
.session-block b { font:700 10px Consolas,monospace; letter-spacing:.07em; color:#d8e1e6; }
.session-block small { font:8px Consolas,monospace; letter-spacing:.08em; color:var(--muted-2); }
.session-block em { width:6px;height:6px;border-radius:50%;background:#53616a;align-self:center;justify-self:end;grid-column:3;grid-row:1/4;box-shadow:0 0 0 3px rgba(255,255,255,.015); }
.capture-theatre.scene-active .capture-slide.is-active .session-block { animation:sessionWake 6.5s ease-in-out infinite; }
.capture-theatre.scene-active .capture-slide.is-active .session-block:nth-child(2){animation-delay:1.15s}.capture-theatre.scene-active .capture-slide.is-active .session-block:nth-child(3){animation-delay:2.3s}.capture-theatre.scene-active .capture-slide.is-active .session-block:nth-child(4){animation-delay:3.45s}.capture-theatre.scene-active .capture-slide.is-active .session-block:nth-child(5){animation-delay:4.6s}
@keyframes sessionWake { 0%,16%,100%{border-color:rgba(238,242,244,.105);background:rgba(7,12,17,.78);transform:translateY(0)} 3%,8%{border-color:rgba(184,255,79,.5);background:rgba(184,255,79,.035);transform:translateY(-4px);box-shadow:0 0 32px rgba(184,255,79,.045)} }
.capture-theatre.scene-active .capture-slide.is-active .session-block em { animation:sessionLed 2.2s ease-in-out infinite; }
@keyframes sessionLed { 0%,100%{background:#52616a;box-shadow:none} 42%{background:var(--signal);box-shadow:0 0 12px rgba(184,255,79,.55)} }

/* Monitoring scene */
.monitor-layout { min-height:390px; display:grid; grid-template-columns:.9fr 1.05fr 1.15fr; gap:18px; align-items:center; padding-top:18px; }
.preference-panel,.monitor-events { border:1px solid rgba(238,242,244,.1); background:rgba(5,10,14,.76); min-height:290px; padding:18px; }
.panel-title,.event-head { display:flex; align-items:center; gap:9px; padding-bottom:14px; border-bottom:1px solid var(--line); color:#dbe4e8; font:9px Consolas,monospace; letter-spacing:.11em; }
.panel-title svg { width:18px;height:18px;color:var(--cyan); }
.pref-row { display:grid; grid-template-columns:1fr auto; gap:7px 12px; padding:15px 0 11px; border-bottom:1px solid rgba(238,242,244,.055); }
.pref-row small { color:var(--muted-2); font:7px Consolas,monospace; letter-spacing:.13em; }
.pref-row b { color:#dbe3e7; font:10px Consolas,monospace; font-weight:600; }
.pref-row i { grid-column:1/3; height:2px; background:rgba(238,242,244,.06); overflow:hidden; position:relative; }
.pref-row i::after { content:""; position:absolute; inset:0; transform:translateX(-110%); background:linear-gradient(90deg,transparent,var(--cyan),var(--signal),transparent); }
.capture-theatre.scene-active .capture-slide.is-active .pref-row i::after { animation:prefSignal 3.9s linear infinite; }
.pref-row:nth-child(3) i::after{animation-delay:.7s!important}.pref-row:nth-child(4) i::after{animation-delay:1.4s!important}
@keyframes prefSignal { to{transform:translateX(110%)} }
.watch-visual { aspect-ratio:1; width:min(100%,300px); justify-self:center; position:relative; display:grid; place-items:center; }
.watch-orbit { position:absolute; border-radius:50%; border:1px solid rgba(78,216,255,.18); }
.orbit-a{inset:4%}.orbit-b{inset:18%;border-color:rgba(184,255,79,.15)}.orbit-c{inset:32%;border-style:dashed}
.capture-theatre.scene-active .capture-slide.is-active .orbit-a{animation:watchRotate 10s linear infinite}.capture-theatre.scene-active .capture-slide.is-active .orbit-b{animation:watchRotate 7s linear infinite reverse}.capture-theatre.scene-active .capture-slide.is-active .orbit-c{animation:watchPulse 2.6s ease-in-out infinite}
@keyframes watchRotate{to{transform:rotate(360deg)}}@keyframes watchPulse{50%{transform:scale(1.06);border-color:rgba(184,255,79,.44);box-shadow:0 0 30px rgba(184,255,79,.04)}}
.watch-radar { position:absolute; inset:11%; border-radius:50%; overflow:hidden; background:conic-gradient(from 0deg,rgba(78,216,255,.16),transparent 18%,transparent); opacity:.68; }
.capture-theatre.scene-active .capture-slide.is-active .watch-radar{animation:watchRotate 3s linear infinite}
.watch-readout { position:relative; z-index:2; width:42%; aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center; background:#071016; border:1px solid rgba(78,216,255,.24); box-shadow:0 0 46px rgba(78,216,255,.045); }
.watch-readout strong { font:700 26px Consolas,monospace; color:var(--signal); }.watch-readout span,.watch-readout small{font:7px Consolas,monospace;letter-spacing:.11em;color:var(--muted-2)}
.event-head{justify-content:space-between}.event-head b{color:var(--signal);font-weight:500}.event-head b i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--signal);margin-inline-end:5px;box-shadow:0 0 12px rgba(184,255,79,.5)}
.event-row { display:grid; grid-template-columns:68px 1fr auto; gap:9px; padding:13px 0; border-bottom:1px solid rgba(238,242,244,.05); font:8px Consolas,monospace; color:#9aa7b0; }
.event-row time{color:var(--muted-2)}.event-row em{font-style:normal;color:var(--cyan)}
.capture-theatre.scene-active .capture-slide.is-active .event-row { animation:eventGlow 5.4s ease-in-out infinite; }
.capture-theatre.scene-active .capture-slide.is-active .event-row:nth-child(3){animation-delay:1.7s}.capture-theatre.scene-active .capture-slide.is-active .event-row:nth-child(4){animation-delay:3.4s}
@keyframes eventGlow{0%,22%,100%{background:transparent;color:#9aa7b0}5%,11%{background:rgba(78,216,255,.035);color:#dce5e9}}
.event-wave{height:74px;margin-top:12px;overflow:hidden}.event-wave svg{width:100%;height:100%;overflow:visible}.event-wave path{stroke:var(--cyan);stroke-width:1.4;fill:none;stroke-dasharray:12 10;filter:drop-shadow(0 0 4px rgba(78,216,255,.18))}
.capture-theatre.scene-active .capture-slide.is-active .event-wave path{animation:waveDash 3s linear infinite}@keyframes waveDash{to{stroke-dashoffset:-44}}

/* Recovery scene */
.recovery-layout { min-height:390px; display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:center; padding-top:18px; }
.trust-module { min-height:240px; border:1px solid rgba(255,153,95,.18); background:linear-gradient(145deg,rgba(255,153,95,.035),rgba(5,9,13,.72)); padding:24px 20px; display:flex; flex-direction:column; justify-content:center; gap:8px; }
.trust-module svg{width:48px;height:48px;color:var(--orange);margin-bottom:18px}.trust-module span,.trust-module small{font:8px Consolas,monospace;letter-spacing:.1em;color:var(--muted-2)}.trust-module b{font:700 14px Consolas,monospace;color:#e5e9eb}
.recovery-path { display:grid; grid-template-columns:1fr 54px 1fr 54px 1fr 54px 1fr; align-items:center; }
.recovery-node { min-height:156px; border:1px solid rgba(238,242,244,.1); background:rgba(5,10,14,.8); display:grid; place-items:center; align-content:center; gap:7px; text-align:center; position:relative; }
.recovery-node>span{position:absolute;top:9px;left:10px;font:7px Consolas,monospace;color:var(--muted-2)}[dir="rtl"] .recovery-node>span{left:auto;right:10px}.recovery-node svg{width:30px;height:30px;color:#788894}.recovery-node b{font:700 9px Consolas,monospace;letter-spacing:.09em;color:#dce4e8}.recovery-node small{font:7px Consolas,monospace;color:var(--muted-2)}.recovery-node.human svg{color:var(--orange)}.recovery-node.restored svg{color:var(--signal)}
.recovery-link { height:1px; background:rgba(78,216,255,.15); position:relative; overflow:visible; }
.recovery-link em { position:absolute; top:50%; left:-7px; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--cyan); opacity:0; box-shadow:0 0 14px rgba(78,216,255,.5); }
.capture-theatre.scene-active .capture-slide.is-active .recovery-node { animation:theatreRecoveryNode 8s ease-in-out infinite; }
.capture-theatre.scene-active .capture-slide.is-active .recovery-node:nth-of-type(2){animation-delay:2s}.capture-theatre.scene-active .capture-slide.is-active .recovery-node:nth-of-type(3){animation-delay:4s}.capture-theatre.scene-active .capture-slide.is-active .recovery-node:nth-of-type(4){animation-delay:6s}
@keyframes theatreRecoveryNode{0%,24%,100%{transform:translateY(0);border-color:rgba(238,242,244,.1);box-shadow:none}4%,12%{transform:translateY(-5px);border-color:rgba(184,255,79,.38);box-shadow:0 0 36px rgba(184,255,79,.045)}}
.capture-theatre.scene-active .capture-slide.is-active .recovery-link em { animation:theatreRecoveryPacket 8s linear infinite; }
.capture-theatre.scene-active .capture-slide.is-active .recovery-link:nth-of-type(2) em{animation-delay:2s}.capture-theatre.scene-active .capture-slide.is-active .recovery-link:nth-of-type(3) em{animation-delay:4s}
@keyframes theatreRecoveryPacket{0%,22%,100%{left:-7px;opacity:0}8%{opacity:1}18%{left:calc(100% - 1px);opacity:.9}21%{opacity:0}}
[dir="rtl"] .capture-theatre.scene-active .capture-slide.is-active .recovery-link em{animation-name:theatreRecoveryPacketRtl}@keyframes theatreRecoveryPacketRtl{0%,22%,100%{left:calc(100% - 1px);opacity:0}8%{opacity:1}18%{left:-7px;opacity:.9}21%{opacity:0}}

/* Generic theatre motion remains continuous, now over code-drawn scenes. */
.capture-theatre.scene-active .capture-slide.is-active .capture-scan { animation:captureScan 4.4s linear infinite; }
.capture-slide.is-active .evidence-system { border-color:rgba(78,216,255,.34); box-shadow:0 32px 86px rgba(0,0,0,.4),0 0 54px rgba(78,216,255,.04),inset 0 0 0 1px rgba(255,255,255,.025); }
.capture-readout span:last-child { color:rgba(184,255,79,.62); }

@media (max-width:980px){
  .topbar-center{min-width:240px}.chapter-meter{width:38px}.chapter-kicker{display:none}
  .capture-stage{min-height:650px}
  .capture-plane.evidence-system{padding:28px 24px}
  .session-matrix{grid-template-columns:repeat(3,1fr)}
  .session-block:nth-child(4),.session-block:nth-child(5){transform:translateX(55%)}
  .monitor-layout{grid-template-columns:1fr 1fr}.monitor-events{grid-column:1/3;min-height:220px}.preference-panel{min-height:260px}
  .recovery-layout{grid-template-columns:1fr}.trust-module{min-height:150px;display:grid;grid-template-columns:44px 1fr;align-content:center}.trust-module svg{grid-row:1/4;margin:0}.recovery-path{grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr}
}
@media (max-width:620px){
  .contact-title{font-size:clamp(54px,17vw,88px);max-width:100%;line-height:.9}.contact-line{width:100%}.contact-focus{font-size:.92em}
  .capture-stage{min-height:610px}.capture-slide{inset:24px 10px 64px}.capture-plane.evidence-system{padding:22px 14px}.system-eyebrow{font-size:7px}.system-eyebrow::before{width:16px}
  .account-orchestrator{min-height:440px;grid-template-rows:138px 44px 1fr}.orchestrator-core{width:92%;grid-template-columns:42px 1fr;padding:16px}.orchestrator-core svg{width:38px;height:38px}.orchestrator-core b{font-size:13px}.session-bus{width:80%}.session-matrix{grid-template-columns:1fr 1fr;gap:8px}.session-block{min-height:84px}.session-block:nth-child(4),.session-block:nth-child(5){transform:none}.session-block:last-child{grid-column:1/3;width:50%;justify-self:center}
  .monitor-layout{grid-template-columns:1fr;gap:12px;padding-top:10px}.preference-panel,.monitor-events{min-height:0;padding:12px}.watch-visual{width:170px}.monitor-events{grid-column:auto}.event-wave{height:46px}.pref-row{padding:9px 0 7px}.event-row{padding:8px 0;grid-template-columns:54px 1fr auto;font-size:7px}
  .recovery-layout{min-height:440px;gap:14px}.trust-module{min-height:112px;padding:14px;grid-template-columns:38px 1fr}.trust-module svg{width:32px;height:32px}.trust-module b{font-size:11px}.recovery-path{grid-template-columns:1fr;gap:8px}.recovery-node{min-height:68px;grid-template-columns:28px 1fr;grid-template-rows:auto auto;text-align:left;place-items:initial;align-items:center;padding:10px 12px 10px 42px}.recovery-node>span{top:50%;transform:translateY(-50%)}.recovery-node svg{grid-row:1/3;width:24px;height:24px}.recovery-node b,.recovery-node small{grid-column:2}.recovery-link{width:1px;height:18px;margin:auto}.recovery-link em{left:50%;top:-5px;margin:0 0 0 -3.5px}.capture-theatre.scene-active .capture-slide.is-active .recovery-link em{animation-name:theatreRecoveryPacketMobile}@keyframes theatreRecoveryPacketMobile{0%,22%,100%{top:-5px;left:50%;opacity:0}8%{opacity:1}18%{top:16px;left:50%;opacity:.9}21%{opacity:0}}
}
@media (prefers-reduced-motion: reduce){
  .topbar.chapter-pulse .chapter-meter i,.core-wave,.bus-packet,.session-block,.session-block em,.pref-row i::after,.watch-orbit,.watch-radar,.event-row,.event-wave path,.recovery-node,.recovery-link em{animation:none!important}
  .contact-line{clip-path:none!important;transform:none!important;opacity:1!important;transition:none!important}.contact-focus::after{transform:scaleX(1)!important;transition:none!important}
}

/* Recovery theatre final fit: trust boundary becomes a horizontal preface,
   leaving the full width for the four-state animated path. */
@media (min-width:981px){
  .recovery-layout { grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:18px; min-height:390px; }
  .trust-module { min-height:96px; display:grid; grid-template-columns:46px 1fr auto; grid-template-rows:auto auto; align-items:center; column-gap:16px; padding:15px 18px; }
  .trust-module svg { grid-row:1/3; width:38px; height:38px; margin:0; }
  .trust-module span { grid-column:2; align-self:end; }
  .trust-module b { grid-column:2; align-self:start; }
  .trust-module small { grid-column:3; grid-row:1/3; max-width:190px; text-align:right; line-height:1.45; }
  [dir="rtl"] .trust-module small { text-align:left; }
  .recovery-path { grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px; position:relative; }
  .recovery-path::before { content:""; position:absolute; inset:50% 7% auto; height:1px; background:linear-gradient(90deg,rgba(78,216,255,.1),rgba(78,216,255,.34),rgba(184,255,79,.3)); z-index:0; }
  [dir="rtl"] .recovery-path::before { background:linear-gradient(270deg,rgba(78,216,255,.1),rgba(78,216,255,.34),rgba(184,255,79,.3)); }
  .recovery-path > .recovery-link { position:absolute; top:50%; width:calc((100% - 102px)/4 + 34px); z-index:1; background:transparent; overflow:visible; }
  .recovery-path > .recovery-link:nth-of-type(1){left:calc(25% - 17px)}
  .recovery-path > .recovery-link:nth-of-type(2){left:calc(50% - 17px)}
  .recovery-path > .recovery-link:nth-of-type(3){left:calc(75% - 17px)}
  [dir="rtl"] .recovery-path > .recovery-link:nth-of-type(1){left:auto;right:calc(25% - 17px)}
  [dir="rtl"] .recovery-path > .recovery-link:nth-of-type(2){left:auto;right:calc(50% - 17px)}
  [dir="rtl"] .recovery-path > .recovery-link:nth-of-type(3){left:auto;right:calc(75% - 17px)}
  .recovery-node { min-height:138px; z-index:2; }
}
@media (max-width:620px){
  .capture-stage{min-height:760px}
}


/* =========================================================
   V3.3 — RELEASE CANDIDATE POLISH
   Accessibility, performance, and production-readiness only.
   ========================================================= */

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
  box-shadow: 0 0 0 1px rgba(7,9,12,.95), 0 0 0 5px rgba(184,255,79,.12);
}
.language-toggle button:focus-visible,
.capture-tab:focus-visible,
.service-row:focus-visible,
.credential:focus-visible {
  position: relative;
  z-index: 4;
}
.chapter-rail a:focus-visible {
  color: var(--text);
  grid-template-columns: 26px 82px;
}
.chapter-rail a:focus-visible span { opacity: 1; }

.flow-label { align-items:center; }
.flow-label em {
  margin-inline-start:auto;
  color:var(--signal);
  font:8px Consolas,monospace;
  font-style:normal;
  letter-spacing:.1em;
  padding:7px 9px;
  border:1px solid rgba(184,255,79,.18);
  background:rgba(184,255,79,.025);
  white-space:nowrap;
}

.service-row[aria-expanded="true"] .service-toggle { transform:rotate(45deg); }
.capture-tab[aria-selected="true"] { color:#e2e9ed; background:rgba(78,216,255,.025); }

/* Keep lower chapters cheap until they approach the viewport. */
.workflows,.services,.about,.proof,.contact {
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}

/* Mobile GPUs benefit from less translucent compositing without changing identity. */
@media (max-width:820px) {
  .topbar.is-scrolled { backdrop-filter: blur(10px); }
  .flow-label { align-items:flex-start; gap:8px; flex-wrap:wrap; }
  .flow-label em { margin-inline-start:0; }
}

@media (max-width:520px) {
  :where(a, button, [tabindex]):focus-visible { outline-offset:2px; }
  .contact-link { grid-template-columns: 88px minmax(0,1fr) 24px; gap:12px; }
  .contact-link b { overflow-wrap:anywhere; }
  .flow-label em { white-space:normal; max-width:100%; }
  .capture-theatre,.capture-controls,.capture-tabs { min-width:0; max-width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient { background: radial-gradient(560px circle at 72% 16%, rgba(78,216,255,.035), transparent 56%); }
  .chapter-rail::after,.rail-progress { transition:none!important; }
}