:root{--ink:#07131d;--cyan:#4bded1;--blue:#44a8ff;--green:#68dfa6;--amber:#ffc45b;--red:#ff6a78;--white:#f7fbfd;--muted:#c6d6df;--glass:#082637e8;--border:#5d8fa7}*{box-sizing:border-box}html,body{margin:0;background:#07131d;color:var(--white);font-family:Inter,system-ui,"Segoe UI",sans-serif;overflow:hidden}.film{height:100vh;min-height:620px;position:relative;isolation:isolate;overflow:hidden;background:var(--ink)}.film:before{content:"";position:absolute;z-index:0;inset:-2%;background:var(--image) center/cover;transform:scale(1.02);animation:film-camera 38s cubic-bezier(.2,.65,.25,1) both}.film:after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#071925ed 0%,#071925aa 47%,#0719252b 78%,#07192572);pointer-events:none}.scene{position:absolute;z-index:2;inset:0;opacity:0;pointer-events:none;transition:opacity 1.05s cubic-bezier(.4,0,.2,1)}.scene.on{opacity:1;pointer-events:auto}.top{position:absolute;z-index:10;left:5%;right:5%;top:5%;display:flex;align-items:center;justify-content:space-between;font-size:clamp(11px,.95vw,15px);letter-spacing:.12em;text-transform:uppercase}.top b{color:var(--cyan)}.count{font-variant-numeric:tabular-nums;color:#d3e0e6}.copy{position:absolute;left:8%;top:21%;width:min(44%,620px);opacity:0;transform:translateY(16px)}.scene.play .copy{animation:copy-in .65s .28s both}.scene.leaving .copy{animation:copy-out .22s both}.eyebrow{display:block;color:var(--cyan);font-size:clamp(11px,1vw,15px);font-weight:800;letter-spacing:.14em;text-transform:uppercase}.copy h1{font-size:clamp(34px,4.45vw,72px);line-height:1.04;letter-spacing:-.055em;margin:.28em 0}.copy p{margin:0;color:var(--muted);font-size:clamp(15px,1.22vw,20px);line-height:1.48;max-width:37ch}.case-card{position:absolute;z-index:6;right:7%;top:25%;width:min(27%,350px);padding:1.15em 1.2em;border:1px solid var(--border);border-radius:18px;background:var(--glass);box-shadow:0 22px 58px #0009;backdrop-filter:blur(9px);opacity:0;transform:translateY(18px)}.scene.play .case-card{animation:card-in .6s .75s both}.card-head{display:flex;align-items:center;gap:.55em;padding-bottom:.8em;border-bottom:1px solid #72a5b333;color:var(--white);font-size:clamp(13px,1.05vw,16px);font-weight:800}.card-head i{width:.68em;height:.68em;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.warn .card-head i{background:var(--amber);box-shadow:0 0 14px var(--amber)}.danger .card-head i{background:var(--red);box-shadow:0 0 14px var(--red)}.good .card-head i{background:var(--green);box-shadow:0 0 14px var(--green)}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;margin:1em 0}.metric-grid div{min-width:0;padding:.65em .36em;border-radius:10px;background:#ffffff0b;text-align:center;opacity:0;transform:translateY(8px)}.metric-grid span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:clamp(9px,.74vw,11px)}.metric-grid b{display:block;margin-top:.34em;font-size:clamp(13px,1.08vw,17px);font-variant-numeric:tabular-nums}.scene.play .metric-grid div:nth-child(1){animation:metric-in .42s 1.08s both}.scene.play .metric-grid div:nth-child(2){animation:metric-in .42s 1.26s both}.scene.play .metric-grid div:nth-child(3){animation:metric-in .42s 1.44s both}.action{padding-top:.82em;border-top:1px solid #72a5b333;opacity:0;transform:translateY(8px)}.scene.play .action{animation:metric-in .45s 1.7s both}.action span{display:block;margin-bottom:.3em;color:var(--cyan);font-size:clamp(10px,.8vw,12px);font-weight:800;letter-spacing:.1em;text-transform:uppercase}.action b{display:block;font-size:clamp(13px,1.04vw,16px);line-height:1.35}.action p{margin:.33em 0 0;color:var(--muted);font-size:clamp(11px,.84vw,13px);line-height:1.38}.end{display:grid;place-items:center;text-align:center}.final-inner{max-width:850px;padding:8%;opacity:0;transform:translateY(16px)}.scene.play .final-inner{animation:copy-in .68s .28s both}.final-inner h1{font-size:clamp(42px,5.8vw,90px);line-height:1.02;letter-spacing:-.065em;margin:.24em 0}.final-inner p{margin:0 auto;color:var(--muted);font-size:clamp(16px,1.4vw,22px);line-height:1.45;max-width:38ch}.tags{display:flex;justify-content:center;flex-wrap:wrap;gap:.55em;margin-top:1.8em}.tags span{padding:.55em .8em;border:1px solid #6b9bb255;border-radius:99px;font-size:clamp(11px,.9vw,14px)}#bar{position:absolute;z-index:20;bottom:0;left:0;width:0;height:5px;background:var(--cyan);box-shadow:0 0 16px var(--cyan)}#control{position:absolute;z-index:21;right:4%;bottom:3.5%;border:1px solid #70a2b4;background:#092638;color:var(--white);border-radius:99px;padding:.62em 1em;font-size:14px;cursor:pointer}@keyframes film-camera{to{transform:scale(1.075) translateX(-.55%)}}@keyframes copy-in{to{opacity:1;transform:none}}@keyframes copy-out{to{opacity:0;transform:translateY(-8px)}}@keyframes card-in{to{opacity:1;transform:none}}@keyframes metric-in{to{opacity:1;transform:none}}@media(max-width:720px){.film{min-height:650px}.top{left:6%;right:6%;top:4.5%}.copy{left:7%;top:14%;width:86%}.copy h1{font-size:clamp(34px,10.4vw,43px)}.copy p{font-size:16px;max-width:32ch}.case-card{right:7%;top:auto;bottom:12%;width:86%;padding:1em 1.05em}.metric-grid{gap:.4em;margin:.8em 0}.metric-grid b{font-size:13px}.action b{font-size:14px}.final-inner{padding:7%}.final-inner h1{font-size:46px}}@media(prefers-reduced-motion:reduce){.film:before{animation:none}.film *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.copy h1{font-size:clamp(38px,4.85vw,78px)}.copy p{font-size:clamp(17px,1.38vw,22px);line-height:1.5}.eyebrow{font-size:clamp(12px,1.1vw,16px)}.case-card{width:min(31%,410px);padding:1.35em 1.45em;border-radius:20px}.card-head{font-size:clamp(15px,1.2vw,19px);padding-bottom:.95em}.metric-grid{gap:.65em;margin:1.1em 0}.metric-grid div{padding:.78em .45em;border-radius:11px}.metric-grid span{font-size:clamp(10px,.84vw,13px)}.metric-grid b{font-size:clamp(15px,1.22vw,20px)}.action{padding-top:.95em}.action span{font-size:clamp(11px,.9vw,13px)}.action b{font-size:clamp(15px,1.16vw,18px)}.action p{font-size:clamp(12px,.94vw,15px)}.final-inner p{font-size:clamp(17px,1.5vw,24px)}@media(max-width:720px){.copy h1{font-size:clamp(36px,11vw,46px)}.copy p{font-size:17px}.case-card{bottom:8%;padding:1.15em 1.2em}.metric-grid b{font-size:15px}.action b{font-size:15px}.action p{font-size:13px}}