:root{--bg:#071210;--ink:#E7F1ED;--muted:#B7C8C2;--lime:#B8FF5B;--line:rgba(231,241,237,.14);--step:0}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Figtree,"Segoe UI",Helvetica,Arial,sans-serif}
button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--lime);outline-offset:7px}[hidden]{display:none!important}
.journey{min-height:100svh;background:radial-gradient(ellipse at 25% 45%,rgba(186,255,104,.055),transparent 55%)}
.sticky-stage{position:relative;max-width:1720px;min-height:100svh;margin:auto;padding:28px clamp(20px,4vw,72px) 22px;display:grid;grid-template-rows:auto 1fr auto;isolation:isolate}
.intro{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}
.eyebrow,.kicker{margin:0;color:var(--lime);font-size:.875rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700}
.intro h1{margin:0;text-align:right;font-size:1rem;line-height:1.4;font-weight:500;letter-spacing:-.025em}.intro h1 span{color:var(--muted)}
.start-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:28px;padding:64px 0 100px}
.start-button{width:clamp(160px,18vw,240px);height:clamp(160px,18vw,240px);display:grid;place-items:center;background:transparent;border:0;color:var(--lime);transition:transform .3s,filter .3s}
.start-button svg{display:block;width:100%;height:100%;filter:drop-shadow(0 16px 34px rgba(186,255,104,.12))}.start-button:hover{transform:translateY(-5px);filter:brightness(1.1)}
.start-screen p{margin:0;font-size:clamp(1.25rem,2.2vw,2rem);line-height:1.35;letter-spacing:-.035em;font-weight:600}
.progress{height:2px;position:absolute;bottom:0;left:0;right:0;background:var(--line)}.progress-fill{display:block;height:100%;width:0;background:var(--lime)}
.steps{display:grid;align-self:center;width:min(100%,1100px);margin:60px auto}
.step{grid-area:1/1;display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,80px);opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s .8s}
.step.is-active{opacity:1;visibility:visible;transform:translateY(0);transition-delay:.15s,0s,0s}
.number{width:144px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--bg);font-size:4rem;font-weight:600;line-height:1;box-shadow:0 0 0 9px rgba(186,255,104,.06);transform:scale(.85);transition:transform .8s cubic-bezier(.16,1,.3,1)}.is-active .number{transform:scale(1)}
.copy h2{margin:12px 0 24px;font-size:clamp(2rem,3.3vw,3.35rem);line-height:1.1;letter-spacing:-.045em;font-weight:600;text-wrap:balance}
.copy>p:last-child{max-width:68ch;margin:0;color:var(--muted);font-size:1rem;line-height:1.6}
.film-controls{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding-bottom:12px}
.playback,.restart{min-height:44px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);padding:10px 16px;font-size:.875rem}.playback{min-width:120px}.playback:hover,.restart:hover{border-color:var(--lime)}
.step-nav{display:flex;justify-content:center;gap:clamp(16px,3vw,40px)}.step-nav button{min-height:44px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);padding:14px 2px;font-size:.875rem;font-weight:600;line-height:1.3}.step-nav button span{margin-right:.55rem;font-variant-numeric:tabular-nums}.step-nav button.is-active{color:var(--lime);border-color:var(--lime)}
@media(max-width:1050px){.sticky-stage{padding-inline:24px}.copy h2{font-size:2.4rem}.step{grid-template-columns:120px minmax(0,1fr);gap:32px}.number{width:110px;font-size:3.5rem}}
@media(max-width:650px){.sticky-stage{padding:28px 16px 20px}.intro{gap:12px}.eyebrow{font-size:.875rem}.intro h1{font-size:.875rem}.steps{margin:40px auto}.step{grid-template-columns:1fr;align-content:center;gap:28px}.number{width:80px;font-size:2.7rem}.copy h2{font-size:2.15rem;letter-spacing:-.04em;line-height:1.12;margin-bottom:20px}.film-controls{flex-wrap:wrap;gap:12px}.step-nav{order:-1;width:100%;justify-content:space-between;gap:8px}.step-nav button{font-size:.875rem}.step-nav button span{display:block;margin:0 0 4px}.start-screen{padding:64px 0}.start-screen p{max-width:23ch}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.start-button:hover{transform:none}}
/* Compact, ten-second film with animated explanatory diagrams. */
.journey,.sticky-stage{min-height:70svh}
.sticky-stage{padding-top:20px;padding-bottom:16px}
.start-screen{padding:24px 0 40px;gap:20px}
.start-button{width:clamp(140px,16vw,200px);height:clamp(140px,16vw,200px)}
.steps{width:100%;margin:28px auto}
.step{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px 48px;transition-duration:.3s,.45s,0s;transform:translateY(14px)}
.step.is-active{transition-delay:0s}
.number{grid-column:1;grid-row:1;position:relative;display:flex;align-items:flex-end;justify-content:flex-start;gap:24px;width:auto;aspect-ratio:auto;justify-self:start;align-self:start;padding:0 0 8px;border:0;border-radius:0;background:transparent;color:var(--ink);font-size:clamp(5rem,7vw,7.5rem);font-weight:400;font-variant-numeric:lining-nums tabular-nums;line-height:.9;letter-spacing:-.065em;box-shadow:none;transform:none}
.number::after{content:"";display:block;width:clamp(40px,4vw,64px);height:2px;margin-bottom:.09em;background:linear-gradient(90deg,var(--lime),rgba(186,255,104,.15));flex-shrink:0}
.copy{grid-column:1;align-self:start}
.copy h2{font-size:clamp(1.8rem,3vw,3rem);margin:10px 0 16px}
.copy>p:last-child{max-width:42ch}
.scene-visual{grid-column:2;grid-row:1/3;position:relative;width:100%;max-width:560px;min-height:270px;justify-self:center;display:flex;flex-direction:column;justify-content:center;perspective:900px;padding:18px;color:var(--ink);isolation:isolate}
.scene-visual::before{content:"";position:absolute;inset:8% 4%;background:radial-gradient(ellipse,rgba(186,255,104,.12),transparent 70%);z-index:-1}
.data-stack{display:flex;gap:12px;transform:rotateX(14deg) rotateY(-12deg);transform-style:preserve-3d}
.data-card{flex:1;min-width:0;padding:18px 12px;background:linear-gradient(145deg,#213529,#0c1914);border:1px solid #587348;border-radius:12px;box-shadow:10px 16px 24px #0005;font-size:.875rem}
.data-card span{display:block;margin-bottom:20px;color:var(--lime)}
.data-card i{display:block;height:5px;margin-top:12px;border-radius:2px;background:#72978066}.data-card i:nth-child(3){width:65%}.data-card i:nth-child(4){width:82%}
.model-base{padding:14px 20px;margin:22px 12px 0;text-align:center;border:1px solid #779954;border-radius:10px;background:#182819;color:var(--lime);font-size:.875rem;box-shadow:0 12px 25px #0005}
.org-root{align-self:center;padding:12px 24px;border-radius:10px;border:1px solid #91bb62;background:#203221;color:var(--lime);box-shadow:0 10px 24px #0005;font-size:.875rem}
.org-links{display:flex;height:40px;margin:0 16.66%;border-top:1px solid #78965e;position:relative;top:20px}.org-links::before{content:"";position:absolute;height:20px;left:50%;top:-20px;border-left:1px solid #78965e}.org-links span{position:absolute;top:0;height:20px;border-left:1px solid #78965e}.org-links span:nth-child(2){left:50%}.org-links span:nth-child(3){right:0}
.org-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.org-roles div{padding:14px 4px;text-align:center;border:1px solid #476153;border-radius:9px;background:linear-gradient(145deg,#21372d,#101e18);font-size:.875rem;box-shadow:0 12px 22px #0004}
.process-track{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:26px;padding:15px 12px;border-top:1px solid #45663d;font-size:.875rem}.process-track b{font-weight:400;color:var(--lime)}
.layer-visual{gap:10px;padding:12px 34px}
.layer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border:1px solid #536c5d;border-radius:10px;background:linear-gradient(130deg,#21372c,#101d17);transform:rotateY(-12deg) rotateX(12deg);box-shadow:12px 13px 20px #0005;font-size:1rem}
.layer small{font-size:.875rem;color:var(--muted)}
.layer-middle{position:relative;background:#baff68;color:#07110f;border-color:#c8ff92;z-index:2;overflow:hidden}.layer-middle strong{font-weight:600}.signal{position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-100%)}
.action-result{align-self:center;margin-top:8px;font-size:.875rem;color:var(--lime)}
.is-active .data-card{animation:organize 1.25s both cubic-bezier(.2,.8,.2,1)}.is-active .data-card:nth-child(2){animation-delay:.15s}.is-active .data-card:nth-child(3){animation-delay:.3s}
.is-active .model-base,.is-active .action-result{animation:resolve .7s .95s both}
.is-active .org-root,.is-active .org-links,.is-active .org-roles div,.is-active .process-track{animation:resolve .65s both}.is-active .org-links{animation-delay:.25s}.is-active .org-roles div:nth-child(1){animation-delay:.4s}.is-active .org-roles div:nth-child(2){animation-delay:.6s}.is-active .org-roles div:nth-child(3){animation-delay:.8s}.is-active .process-track{animation-delay:1.1s}
.is-active .layer-top{animation:join-top 1.1s both}.is-active .layer-bottom{animation:join-bottom 1.1s both}.is-active .layer-middle{animation:resolve .75s .45s both}.is-active .signal{animation:signal-pass 1.4s 1s both}
[data-state="paused"] .scene-visual *{animation-play-state:paused!important}
@keyframes organize{from{opacity:0;transform:translate3d(-20px,35px,-90px) rotate(-9deg)}to{opacity:1;transform:translate3d(0,0,0) rotate(0)}}
@keyframes resolve{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
@keyframes join-top{from{opacity:0;transform:translateY(-24px) rotateY(-12deg) rotateX(12deg)}to{opacity:1;transform:translateY(0) rotateY(-12deg) rotateX(12deg)}}
@keyframes join-bottom{from{opacity:0;transform:translateY(24px) rotateY(-12deg) rotateX(12deg)}to{opacity:1;transform:translateY(0) rotateY(-12deg) rotateX(12deg)}}
@keyframes signal-pass{to{transform:translateX(100%)}}
@media(max-width:1050px){.step{gap:12px 24px}.scene-visual{padding:12px 0}.layer-visual{padding-inline:10px}.layer{padding:16px 12px}.layer small{font-size:.875rem}}
@media(max-width:650px){.step{grid-template-columns:1fr;gap:8px}.steps{margin:20px auto}.number,.copy{grid-column:1}.scene-visual{grid-column:1;grid-row:3;min-height:210px;max-width:420px;padding:12px 4px}.copy h2{font-size:1.8rem;margin:8px 0 12px}.copy h2 br{display:none}.copy>p:last-child{line-height:1.45}.layer-visual{gap:7px}.layer{padding:12px 16px}.data-card{padding:12px}.data-card span{margin-bottom:12px}.model-base{margin-top:16px;padding:10px}.start-screen{padding:24px 0 32px}}
@media(prefers-reduced-motion:reduce){.scene-visual *{animation:none!important}.signal{display:none}}
/* Three explanatory motion diagrams; all system structures are schematic. */
.step{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px 38px}
.scene-visual{max-width:680px;min-height:340px;padding:12px;perspective:1000px}
.scene-visual b,.scene-visual strong{font-weight:600}.scene-visual em{font-style:normal}
.source-structures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;transform:rotateX(12deg) rotateY(-7deg)}
.source{padding:12px;border:1px solid #47685d;border-radius:10px;background:linear-gradient(130deg,#213c32,#0d1c17);box-shadow:9px 13px 20px #0005;min-height:104px;font-size:.875rem}.source b{display:block;min-height:36px;color:#d7e8df}
.list-lines{display:grid;gap:7px;padding-top:10px}.list-lines i{height:4px;background:#82b8a7;border-radius:3px}.list-lines i:nth-child(2){width:65%}.list-lines i:nth-child(3){width:85%}
.tree-mini,.core-tree{display:flex;justify-content:space-around;position:relative;padding-top:24px}.tree-mini:before,.core-tree:before{content:"";position:absolute;left:18%;right:18%;top:16px;border-top:1px solid #89b2a2}.tree-mini i,.core-tree i{width:18px;height:12px;background:#7291d0;border-radius:3px}.tree-mini i:before,.core-tree i:before{content:"";display:block;height:9px;border-left:1px solid #89b2a2;transform:translate(8px,-8px)}
.tech-mini{display:grid;grid-template-columns:repeat(2,15px);justify-content:center;gap:6px 18px;padding-top:8px;transform:rotate(-12deg)}.tech-mini i{border:1px solid #baff68;border-radius:50%;height:12px;position:relative}.tech-mini i:nth-child(odd):after{content:"";position:absolute;width:20px;left:13px;top:5px;border-top:1px solid #baff6899}
.translation-paths{width:100%;height:42px;overflow:visible}.translation-paths path,.assignment-paths path,.bridge-paths path{fill:none;stroke:#baff68;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px #baff6855)}
.translator{position:relative;overflow:hidden;align-self:center;display:flex;align-items:center;gap:18px;padding:12px 24px;border:1px solid var(--lime);border-radius:10px;color:var(--lime);background:#203820;box-shadow:0 0 35px #baff6817;font-size:.875rem}.translator span{color:#c8d7cb}
.scan-beam{position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,#ecffd066,transparent 75%);transform:translateX(-110%);pointer-events:none}
.standard-output{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;padding:15px;background:linear-gradient(110deg,#213d28,#102219);border:1px solid #688d50;border-radius:10px;box-shadow:0 10px 28px #0005}.standard-output strong{display:block;font-size:1rem}.standard-output span{display:block;color:var(--lime);font-size:.875rem;margin-top:5px}.standard-grid{display:grid;grid-template-columns:repeat(4,10px);gap:4px}.standard-grid i{height:10px;background:var(--lime);border-radius:2px}.norm-note{display:block;text-align:center;color:var(--muted);font-size:.75rem;margin-top:10px;line-height:1.4}
.assignment-scene{height:340px}.assignment-core{position:absolute;left:36%;right:36%;top:38%;padding:16px 8px;text-align:center;border:1px solid var(--lime);border-radius:12px;background:#233e27;box-shadow:0 0 45px #baff6822;z-index:2;color:var(--lime);font-size:.875rem}.core-tree{padding-top:20px}.core-tree i{background:var(--lime);width:12px;height:8px}
.assignment-paths{position:absolute;inset:0;width:100%;height:100%}.assignment-item{position:absolute;width:38%;padding:12px 14px;border:1px solid #486e5f;border-radius:10px;background:linear-gradient(135deg,#213e33,#0b1c16);box-shadow:0 10px 24px #0005}.assignment-item em{float:right;color:var(--lime);font-size:.75rem}.assignment-item strong{display:block;font-size:.875rem}.assignment-item span{display:block;margin-top:5px;font-size:.875rem;color:var(--muted)}.assign-role{left:0;top:5%}.assign-owner{right:0;top:5%}.assign-delivery{left:0;bottom:12%}.assign-duty{right:0;bottom:12%}.assignment-result{position:absolute;bottom:0;width:100%;text-align:center;color:var(--lime);font-size:.875rem}
.connection-scene{min-height:360px;padding:0 6px;justify-content:space-between;gap:6px}.organization-zone,.systems-zone{position:relative;text-align:center;z-index:2}.organization-zone>b,.systems-zone>b{display:block;font-size:1rem;letter-spacing:-.02em}.organization-zone>b{margin-bottom:5px}.systems-zone>b{margin-top:5px}
.org-hierarchy{display:flex;flex-direction:column;align-items:center;font-size:.875rem}.org-hierarchy>span{padding:5px 28px;border:1px solid #739e69;border-radius:6px;background:#233b28}.org-hierarchy>div{display:flex;justify-content:space-around;width:90%;gap:10px;position:relative;padding-top:14px}.org-hierarchy>div:before{content:"";position:absolute;left:16%;right:16%;top:7px;border-top:1px solid #7f9f76}.org-hierarchy>div span{position:relative;padding:5px 10px;background:#172b20;border:1px solid #57714c;border-radius:6px}.org-hierarchy>div span:before{content:"";position:absolute;height:7px;left:50%;top:-8px;border-left:1px solid #7f9f76}
.bridge-zone{position:relative;flex:1;min-height:138px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px}.bridge-paths{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.translation-problem{position:absolute;top:25%;left:20%;right:20%;text-align:center;font-size:1rem;color:#ffc292;z-index:4;background:#201c15;border:1px dashed #c18a5b;border-radius:9px;padding:8px}.translation-problem span{display:block;font-size:.875rem;margin-top:4px;color:#d6b79e}
.operating-bridge{position:relative;overflow:hidden;width:85%;text-align:center;padding:10px 16px;background:linear-gradient(115deg,#a7ed59,#d4ff9c,#a4e568);color:#10200e;border-radius:9px;box-shadow:0 0 40px #baff6833;z-index:3}.operating-bridge strong{display:block;font-size:1.1rem}.operating-bridge>span{display:block;margin-top:3px;font-size:.875rem}.preparation{font-size:.875rem;z-index:3;padding:4px 12px;color:var(--lime);background:#102218;border-radius:5px}.excel-resolution{position:absolute;bottom:0;color:var(--lime);font-size:.75rem;text-align:center}
.system-nodes{display:grid;grid-template-columns:.9fr 1.2fr .85fr;gap:16px;align-items:end;transform:rotateY(-8deg)}.system-nodes>div{border:1px solid #53798a;border-radius:7px;background:linear-gradient(130deg,#1c333b,#0d1e23);padding:8px 10px;box-shadow:7px 10px 16px #0004}.system-nodes>div:nth-child(2){border-radius:16px 16px 6px 6px}.system-nodes>div:nth-child(3){transform:translateY(-5px)}.system-nodes span{font-size:.875rem;color:#b4d6e2}.system-nodes .list-lines{padding-top:6px;gap:4px}.system-nodes .tech-mini{padding:4px 0}.table-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:7px}.table-mini i{height:8px;background:#6c9caa55;border:1px solid #6c9caa88}
.sheet{position:absolute;width:85px;padding:6px;border:1px solid #68ae83;border-radius:4px;background:#153b2a;box-shadow:0 9px 20px #0006;z-index:5}.sheet>b{display:block;font-size:.75rem;color:#d4f5df;margin-bottom:5px}.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.sheet-grid i{height:8px;background:#ccebd7;border-radius:1px}.excel-one{left:1%;top:18%;transform:rotate(-10deg)}.excel-two{right:1%;top:44%;transform:rotate(9deg)}
.is-active .source{animation:source-arrive .5s both}.is-active .source-contract{animation-delay:.12s}.is-active .source-tech{animation-delay:.24s}.is-active .translation-paths path{animation:draw-wire .65s .35s both}.is-active .translator{animation:brighten .8s .45s both}.is-active .translator .scan-beam{animation:scan-through .75s .7s both}.is-active .standard-output{animation:output-arrive .65s 1.25s both}.is-active .standard-grid i{animation:resolve .25s calc(1.25s + var(--cell)*.025s) both}
.is-active .assignment-core{animation:source-arrive .45s both}.is-active .assignment-paths path{animation:draw-wire .9s .3s both}.is-active .assignment-item{animation:attach .5s both}.is-active .assign-role{animation-delay:.3s}.is-active .assign-owner{animation-delay:.6s}.is-active .assign-delivery{animation-delay:.9s}.is-active .assign-duty{animation-delay:1.2s}.is-active .assignment-result{animation:resolve .45s 1.7s both}
.is-active .organization-zone{animation:source-arrive .4s both}.is-active .systems-zone{animation:output-arrive .45s .1s both}.is-active .translation-problem{animation:problem-phase 1.65s both}.is-active .operating-bridge{animation:bridge-arrive .65s 1.6s both}.is-active .preparation{animation:resolve .4s 1.15s both}.is-active .bridge-paths path{animation:draw-wire .8s 1.7s both}.is-active .operating-bridge .scan-beam{animation:scan-through .8s 2.3s both}.is-active .sheet{animation:sheet-frame 3.65s both}.is-active .sheet-grid i{animation:cell-dissolve .8s calc(2.6s + var(--cell)*.035s) both}.is-active .excel-resolution{animation:resolve .35s 3.6s both}
@keyframes source-arrive{from{opacity:0;transform:translateY(-18px) rotateX(18deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}
@keyframes output-arrive{from{opacity:0;transform:translateY(20px) scale(.93)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes attach{from{opacity:0;transform:scale(.85);filter:blur(5px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes draw-wire{from{stroke-dasharray:700;stroke-dashoffset:700;opacity:0}to{stroke-dasharray:700;stroke-dashoffset:0;opacity:1}}
@keyframes brighten{from{opacity:.4;box-shadow:0 0 0 #baff6800}to{opacity:1;box-shadow:0 0 35px #baff6825}}
@keyframes scan-through{to{transform:translateX(110%)}}
@keyframes problem-phase{0%,12%{opacity:0;transform:scale(.95)}25%,75%{opacity:1;transform:scale(1)}100%{opacity:0;visibility:hidden;transform:scale(1.04)}}
@keyframes bridge-arrive{from{opacity:0;transform:scaleX(.65) rotateX(40deg);filter:blur(5px)}to{opacity:1;transform:scaleX(1) rotateX(0);filter:blur(0)}}
@keyframes sheet-frame{0%{opacity:0}12%,73%{opacity:1;border-color:#68ae83;background:#153b2a}85%{opacity:1;border-color:transparent;background:transparent;box-shadow:none}100%{opacity:0;border-color:transparent;background:transparent;box-shadow:none}}
@keyframes cell-dissolve{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(calc((var(--cell) - 5)*7px),-40px) scale(.1);filter:blur(3px)}}
[data-state="paused"] .scene-visual *{animation-play-state:paused!important}
@media(max-width:1050px){.step{gap:12px 22px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.source{padding:8px}.source-structures{gap:8px}.scene-visual{padding-inline:0}.assignment-item{padding:10px}.system-nodes{gap:8px}.org-hierarchy>div span{padding:5px}.translator{padding:10px 16px}}
@media(max-width:760px){.step{grid-template-columns:1fr;gap:8px}.number,.copy{grid-column:1}.scene-visual{grid-column:1;grid-row:3;max-width:620px}.steps{margin:18px auto}.copy h2{font-size:1.8rem}.copy h2 br{display:none}.scene-visual{min-height:330px}.connection-scene{min-height:360px}.assignment-item strong{font-size:.875rem}.source b{min-height:50px}.standard-output{gap:12px}.standard-output strong{font-size:.875rem}.standard-output span{font-size:.875rem}.translator{gap:12px}.sheet{width:62px}.system-nodes>div{padding:7px}.system-nodes span{font-size:.875rem}.operating-bridge{width:90%}.excel-resolution{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.scene-visual *{animation:none!important}.translation-problem,.sheet,.scan-beam{display:none}.excel-resolution{position:static}.bridge-zone{padding-block:10px}.standard-output,.operating-bridge{opacity:1}}
/* Screenshot revisions: organization assignment, management and data quality routes. */
.assignment-core{left:30%;right:30%;top:39%;min-height:72px;display:flex;align-items:center;justify-content:center;padding:12px;line-height:1.4;font-size:1rem}
.org-hierarchy>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:12px;padding-top:16px}
.org-hierarchy>div span{line-height:1.3;padding:6px 8px;min-width:0}
.connection-scene{min-height:390px}
.bridge-zone{min-height:160px}
.excel-one{left:1%;top:20%}.excel-two{right:1%;top:31%}
.excel-routes{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
.excel-routes>path{fill:none;stroke:#e7b17a;stroke-width:2;stroke-dasharray:7 5;vector-effect:non-scaling-stroke}
.excel-routes marker path{fill:#e7b17a;stroke:none}
.is-active .excel-routes{animation:excel-route-phase 2.55s both}
.is-active .excel-routes>path{animation:route-flow .65s linear infinite}
.is-active .excel-routes .route-to-quality{animation-delay:.25s}
.is-active .excel-routes .route-to-organization{animation-delay:.5s}
@keyframes route-flow{to{stroke-dashoffset:-24}}
@keyframes excel-route-phase{0%,8%{opacity:0}22%,82%{opacity:1}100%{opacity:0;visibility:hidden}}
@media(max-width:1050px){.org-hierarchy>div{gap:7px}.org-hierarchy>div span{padding:6px 3px}.assignment-core{font-size:.875rem}}
@media(max-width:760px){.connection-scene{min-height:390px}.assignment-core{left:27%;right:27%;font-size:.875rem}.org-hierarchy>div span{font-size:.875rem}}
@media(prefers-reduced-motion:reduce){.excel-routes{display:none}}

/* Keep each completed diagram still for its two-second hold. */
[data-phase="hold"] .scene-visual *{animation-play-state:paused!important}

/* A real extruded house model with an accessible native start button. */
.start-button{position:relative;width:clamp(190px,21vw,270px);height:clamp(180px,20vw,250px)}
.brand-model{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.start-button.has-model .brand-model{display:block}
.start-button.has-model>.brand-fallback{visibility:hidden}
/* Closing view follows the supplied reference: heading, symbol, three text cards. */
.conclusion{padding:30px 0 6px;align-self:center;width:100%}
.conclusion-heading{margin-bottom:36px}
.conclusion-heading h2{margin:0;font-size:clamp(2rem,3.8vw,3.75rem);font-weight:600;line-height:1.12;letter-spacing:-.04em;max-width:30ch}
.conclusion-content{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(24px,3vw,48px);align-items:center}
.evidence-symbol{margin:0}
.evidence-symbol-panel{display:grid;place-items:center;min-height:240px;aspect-ratio:1.6;background:#101a1c;border-radius:8px;color:var(--lime)}
.evidence-symbol-panel svg{width:100px;height:100px}
.evidence-symbol figcaption{margin-top:16px;font-size:1rem;color:var(--muted);line-height:1.55}
.logic-cards{display:grid;gap:16px}
.logic-cards article{padding:24px 28px;border:1px solid #29332f;border-radius:8px;background:#151e1b}
.logic-cards h3{margin:0 0 14px;font-size:clamp(1.3rem,1.8vw,1.75rem);line-height:1.25;font-weight:600;letter-spacing:-.025em}
.logic-cards p{margin:0;font-size:1rem;line-height:1.6;color:var(--muted)}
.conclusion-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:24px;padding-top:16px}
.conclusion-footer p{margin:0;color:var(--muted);font-size:.875rem}
.conclusion-footer>div{display:flex;gap:12px}
.conclusion-footer button{min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font-size:.875rem}
@media(max-width:760px){.conclusion{padding-top:24px}.conclusion-heading{margin-bottom:24px}.conclusion-content{grid-template-columns:1fr;gap:24px}.evidence-symbol-panel{min-height:160px;aspect-ratio:2.3}.evidence-symbol-panel svg{width:76px;height:76px}.logic-cards article{padding:22px}.conclusion-footer{flex-wrap:wrap}.conclusion-footer>div{flex-wrap:wrap}}

.start-button .brand-fallback{display:block;width:76%;height:auto;filter:drop-shadow(0 16px 26px #b8ff5b22)}

/* The film opens directly on its content, without the former top labels. */
.sticky-stage{grid-template-rows:1fr auto}
/* Compact symbol row with explanations revealed on interaction. */
.start-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:44px;padding:32px 0 190px;width:100%}
.start-screen .start-caption{margin:0;max-width:none;font-size:clamp(1.2rem,1.7vw,1.75rem);line-height:1.35;text-align:center}
.solution-row{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;justify-items:center;gap:clamp(12px,2.6vw,44px);width:100%}
.solution-row .start-button{width:100%;height:auto;aspect-ratio:1;min-width:0}
.solution-tile{position:relative;min-width:0;width:100%}
.tile-icon{display:grid;place-items:center;width:100%;aspect-ratio:1;padding:0;border:1px solid #d2ff9d66;border-radius:22%;background:linear-gradient(135deg,#c4ff70,#8adeba);color:#102c1a;box-shadow:3px 6px 0 #487b50,7px 12px 20px #0004;transition:transform .2s,box-shadow .2s}
.tile-icon svg{width:48%;height:48%}
.tile-icon:hover,.tile-icon[aria-expanded="true"]{transform:translateY(-4px);box-shadow:3px 8px 0 #487b50,7px 18px 28px #0005}
.tile-copy{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:300px;padding:28px 24px 24px;text-align:left;z-index:5}
.tile-copy:before{content:"";position:absolute;inset:12px 0 0;z-index:-1;border:1px solid #41674e;border-radius:16px;background:linear-gradient(130deg,#223d30,#0e1f18);box-shadow:0 6px 0 #0a1710,0 18px 28px #0005}
.tile-copy h2{font-size:1.125rem;line-height:1.3;font-weight:650;margin:0 0 10px}
.start-screen .tile-copy p{max-width:none;font-size:1rem;line-height:1.5;font-weight:400;letter-spacing:normal;color:var(--muted);margin:0;overflow-wrap:break-word}
.tile-copy abbr{text-decoration:none}
.solution-tile:first-child .tile-copy{left:0;transform:none}
.solution-tile:last-child .tile-copy{left:auto;right:0;transform:none}
@media(max-width:760px){.start-screen{gap:36px;padding-bottom:210px}.solution-row{gap:6px}.solution-tile{position:static}.tile-copy,.solution-tile:first-child .tile-copy,.solution-tile:last-child .tile-copy{top:100%;left:0;right:0;transform:none;width:100%;padding:28px 22px 22px}.tile-icon{min-height:44px}.tile-icon svg{width:60%;height:60%}.solution-row .start-button{min-height:44px}}
@media(max-width:380px){.sticky-stage{padding-inline:8px}.solution-row{gap:3px}}
@media(prefers-reduced-motion:reduce){.tile-icon{transition:none}.tile-icon:hover,.tile-icon[aria-expanded="true"]{transform:none}}

/* Every symbol uses the brand button's geometry, lighting, scale and motion. */
.solution-row .start-button,.solution-row .tile-icon{position:relative;width:100%;height:auto;aspect-ratio:1;min-width:0;transition:transform .3s,filter .3s}
.solution-row .tile-icon.has-model{border:0;border-radius:0;background:transparent;box-shadow:none}
.tile-icon.has-model>svg{visibility:hidden}
.tile-icon.has-model .brand-model{display:block}
.solution-row .tile-icon:hover,.solution-row .tile-icon[aria-expanded="true"]{transform:translateY(-5px);filter:brightness(1.1)}
@media(prefers-reduced-motion:reduce){.solution-row .tile-icon,.solution-row .start-button{transition:none}.solution-row .tile-icon:hover,.solution-row .tile-icon[aria-expanded="true"]{transform:none}}

/* Quiet interaction cues: film start above the caption, hover on the symbols. */
.start-screen{gap:76px}
.start-caption{position:relative}
.start-arrow{position:absolute;bottom:calc(100% + 10px);left:50%;width:24px;height:52px;margin-left:-12px;color:var(--lime);pointer-events:none;animation:point-to-start 2.2s ease-in-out infinite}
.start-arrow svg{display:block;width:100%;height:100%}
.hover-hint{position:absolute;right:13%;bottom:17%;z-index:2;display:grid;place-items:center;width:24px;height:28px;border:1px solid #baff6870;border-radius:8px;background:#102018;color:var(--lime);box-shadow:0 3px 8px #0004;pointer-events:none}
.tile-icon .hover-hint svg{display:block;visibility:visible;width:15px;height:20px}
@keyframes point-to-start{0%,100%{transform:translateY(3px);opacity:.55}50%{transform:translateY(-4px);opacity:1}}
@media(max-width:760px){.hover-hint{right:0;bottom:6%;width:16px;height:20px;border-radius:5px}.tile-icon .hover-hint svg{width:11px;height:15px}}
@media(prefers-reduced-motion:reduce){.start-arrow{animation:none}}

/* Fit the opening section to its content instead of reserving viewport space. */
.journey:has(.sticky-stage[data-state="idle"]){min-height:0}
.sticky-stage[data-state="idle"]{min-height:0;padding-top:0;padding-bottom:0}
.sticky-stage[data-state="idle"] .start-screen{justify-content:flex-start;padding-top:0;padding-bottom:40px}

/* Longer explanations share a readable panel below the symbol row. */
.solution-row .solution-tile{position:static}
.solution-row .solution-tile .tile-copy{left:50%;right:auto;top:100%;transform:translateX(-50%);width:min(760px,100%);max-height:65svh;overflow:auto;overscroll-behavior:contain;padding:24px 28px;border:1px solid #41674e;border-radius:16px;background:linear-gradient(130deg,#223d30,#0e1f18);box-shadow:0 12px 28px #0005}
.solution-row .tile-copy:before{display:none}
.start-screen .tile-copy p+p{margin-top:16px}
.start-screen:has(.tile-copy:not([hidden])) .start-caption{visibility:hidden}
.tile-copy:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
@media(max-width:760px){.solution-row .solution-tile .tile-copy{padding:20px}}

/* Model principle film, using the original model scene and labels. */
.conclusion-content{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
#model-principle-film{min-width:0}
.principle-film{--card:#13211b;--foreground:#edf3ef;--muted-foreground:#aab6af;--border:#34463b;--cc-selection:#2a4028;--cc-selection-text:#d6ffa9;--cc-lime:#baff68;--accent:#baff68;--ring:#baff68;--cc-shadow:0 4px 12px #0003;--cc-symbol-tint:15%;--cc-symbol-ink:#d3e3d8;--cc-light-ink:#d3e3d8;--cc-subtle:#aab6af;border:1px solid #34463b;border-top:3px solid #789f44;border-radius:18px;background:radial-gradient(ellipse at 60% 25%,#1a2d22,#0d1814);overflow:hidden}
.principle-heading{display:flex;justify-content:space-between;gap:16px;padding:20px 22px;color:var(--muted);font-size:.875rem}
.principle-heading span:last-child{font-size:.75rem}
.principle-scene{position:relative;height:540px}
.principle-scene:has(.structure-scene){height:760px}
.principle-film .scene-wrapper{position:absolute;inset:0;overflow:hidden}
.principle-film .scene-canvas,.principle-film .scene-labels{position:absolute;inset:0}
.principle-film .scene-canvas canvas{display:block;width:100%;height:100%;touch-action:none}
.principle-film .scene-labels{pointer-events:none;overflow:hidden}
.principle-film .scene-label{position:absolute;left:0;top:0;white-space:nowrap;font-size:12px;color:var(--muted)}
.principle-film .axis-label{letter-spacing:.04em}
.principle-film .cross-label,.principle-film .row-label{padding:5px 7px;background:#102019e8;border:1px solid #34463b;border-radius:6px}
.principle-film .phase-label{padding:4px 6px;background:#102019e8;border:1px solid #34463b;border-radius:4px}
.principle-film .phase-label.active{color:#d6ffa9;border-color:#baff68}
.principle-film .scene-message{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
.principle-film .structure-nodes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.principle-film .structure-node{position:absolute;left:0;top:0;width:var(--node-width);min-height:48px;display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--symbol-color);border-left:3px solid var(--symbol-color);border-radius:9px;background:var(--card);color:var(--foreground);text-align:left;pointer-events:auto}
.principle-film .structure-symbol{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center;color:var(--symbol-color)}
.principle-film .node-copy{min-width:0;flex:1}
.principle-film .node-copy strong{display:block;font-size:14px;line-height:1.2;overflow-wrap:anywhere}
.principle-film .node-copy small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.principle-film .node-order{font-size:12px;color:var(--muted)}
.principle-film .structure-node.selected{background:#2a4028;outline:2px solid #baff68;outline-offset:2px;z-index:4}
.principle-film .structure-node.muted{opacity:.55}
.principle-current{display:flex;flex-direction:column;gap:7px;min-height:78px;padding:14px 22px;border-top:1px solid #34463b}
.principle-current strong{font-size:1rem;color:var(--lime)}
.principle-current span{font-size:.875rem;color:var(--muted)}
.principle-controls{display:flex;align-items:center;gap:18px;padding:0 22px 20px}
.principle-controls button{min-height:44px;padding:8px 12px;border:1px solid #476153;border-radius:8px;background:#14251d;color:var(--ink);font-size:.875rem}
.principle-progress{display:flex;flex:1;gap:5px}
.principle-progress>span{height:3px;flex:1;background:#34463b}
.principle-progress i{display:block;height:100%;background:var(--lime)}
@media(max-width:1100px){.conclusion-content{grid-template-columns:1fr}.principle-scene{height:560px}.logic-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.logic-cards article{padding:20px}}
@media(max-width:650px){.principle-heading{padding:16px}.principle-scene{height:460px}.principle-scene:has(.structure-scene){height:860px}.principle-film .row-label{display:none}.principle-film .axis-label{font-size:12px;letter-spacing:0}.principle-controls{flex-wrap:wrap}.logic-cards{grid-template-columns:1fr}.principle-film .node-order{display:none}}

/* Align the model panel with the full stack of explanation cards. */
.conclusion-statement{margin:28px 0 0;font-size:clamp(1.125rem,1.6vw,1.5rem);line-height:1.45}
@media(min-width:1101px){
 .conclusion-content{align-items:stretch}
 #model-principle-film{position:relative;min-height:0}
 .principle-film{position:absolute;inset:0;display:flex;flex-direction:column}
 .principle-scene,.principle-scene:has(.structure-scene){flex:1;min-height:0;height:auto}
 .principle-heading,.principle-current,.principle-controls{flex-shrink:0}
}
@media(max-width:1100px){
 .principle-scene,.principle-scene:has(.structure-scene){height:460px}
 .logic-cards{grid-template-columns:1fr}
}
.principle-film .structure-node{min-height:32px;padding:4px 7px;gap:6px}
.principle-film .structure-node .node-copy small{display:none}
.principle-film .structure-symbol{width:22px;height:22px;flex-basis:22px}

/* Oversized editorial numerals, with a quiet brand accent and generous spacing. */
.step{row-gap:24px}
@media(max-width:760px){.step{row-gap:20px}.step .number{width:auto;font-size:5rem;gap:20px}.number::after{width:40px}}

/* The film uses only the height required by its content. */
.journey,.sticky-stage{min-height:0}
.sticky-stage{grid-template-rows:auto auto;padding-top:12px;padding-bottom:12px}
.steps{margin:12px auto 20px}
.standalone-conclusion{max-width:1720px;margin:0 auto;padding:20px clamp(20px,4vw,72px) 28px}
.conclusion-footer a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none;font-size:.875rem}
.conclusion-footer a:hover{border-color:var(--lime)}
.conclusion-footer a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
@media(max-width:760px){.steps{margin:8px auto 16px}.standalone-conclusion{padding:12px 16px 20px}}

/* Match the wide reference height while keeping small screens content-sized. */
.sticky-stage[data-state="idle"]{box-shadow:inset 0 -1px 0 var(--line)}
@media(min-width:1600px){.sticky-stage[data-state="idle"] .start-screen{padding-bottom:105px}}

/* Landing-page placement: the spacer is half the reserved animation height. */
:root{--landing-animation-height:70svh}
.animation-spacer{height:calc(var(--landing-animation-height)/2);background:var(--bg)}
.journey{min-height:var(--landing-animation-height);content-visibility:auto;contain-intrinsic-size:auto var(--landing-animation-height)}
@media(max-width:760px){:root{--landing-animation-height:82svh}}

/* Einbindung: oberer Abstand entfällt im Iframe */
.animation-spacer{display:none}

h1,h2,h3,.headline,.title{font-family:Outfit,Figtree,sans-serif}