:root{
  --bg:#02060d;--bg2:#06101e;--white:#f7f9fc;--muted:#a8b5c7;
  --blue:#0866ff;--cyan:#00d8ef;--violet:#7657ff;--line:rgba(54,142,255,.34);
  --pad:clamp(36px,4.1vw,82px);--top:clamp(28px,3vw,56px);
  font-family:Inter,"Segoe UI Variable","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#000;overflow:hidden;color:var(--white)}
body{display:grid;place-items:center}.stage{position:relative;width:min(100vw,177.777vh);height:min(100vh,56.25vw);background:#000;overflow:hidden;isolation:isolate}
.slide{position:absolute;inset:0;background:radial-gradient(circle at 68% 45%,#081c39 0,#030a14 39%,#010307 77%);opacity:0;visibility:hidden;transform:translateX(2.2%);transition:opacity .42s ease,transform .42s ease,visibility .42s;overflow:hidden}
.slide.active{opacity:1;visibility:visible;transform:none;z-index:2}.slide.active .reveal{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}.slide.active .reveal:nth-child(2){animation-delay:.06s}.slide.active .reveal:nth-child(3){animation-delay:.12s}.slide.active .reveal:nth-child(4){animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.meta{position:absolute;top:5.3%;z-index:8;font-size:clamp(10px,.78vw,15px);letter-spacing:.23em;line-height:1.65}.meta strong,.meta span{display:block}.meta-left{left:4.3%}.meta-right{right:4.3%;text-align:right}
.accent-line{display:block;width:54px;height:4px;background:linear-gradient(90deg,var(--blue),var(--cyan));margin-top:32px;box-shadow:0 0 15px rgba(0,216,239,.25)}
.mesh{position:absolute;inset:0;pointer-events:none;opacity:.56;background-image:radial-gradient(circle,rgba(23,118,255,.72) 0 1.2px,transparent 1.4px);background-size:15px 15px;mask-image:radial-gradient(ellipse at 73% 51%,#000 0 34%,transparent 68%);transform:perspective(800px) rotateX(54deg) rotateZ(-8deg) scale(1.4);animation:meshMove 18s ease-in-out infinite alternate}
.mesh-b{mask-image:radial-gradient(ellipse at 25% 50%,#000 0 20%,transparent 62%);opacity:.28}.mesh-c{mask-image:radial-gradient(ellipse at 77% 50%,#000 0 26%,transparent 67%)}
@keyframes meshMove{from{background-position:0 0}to{background-position:45px 28px}}

/* cover + closing */
.cover-copy{position:absolute;left:4.8%;top:27%;z-index:9;width:38%}.cover-copy h1{margin:0;font-size:clamp(58px,5.8vw,112px);line-height:.96;letter-spacing:-.055em;font-weight:800}.cover-copy h1 em,.closing-copy h1 em{font-style:normal;background:linear-gradient(90deg,#0874ff,#09dff0);-webkit-background-clip:text;background-clip:text;color:transparent}.cover-copy p{font-size:clamp(20px,1.75vw,34px);line-height:1.2;color:#c6ced9;margin:30px 0 0}
.hands-scene{position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,transparent 0 47%,rgba(0,0,0,.18) 53%,#02050a 100%)}
.robot-hand,.human-hand{position:absolute;display:block;object-fit:cover;filter:saturate(1.04) contrast(1.03);user-select:none;pointer-events:none}.robot-hand{width:48%;height:auto;left:27%;top:-1%;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 92%,transparent 100%);animation:robotFloat 8s ease-in-out infinite alternate}.human-hand{width:36%;height:auto;right:-1%;top:37%;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 100%);animation:humanFloat 7s ease-in-out infinite alternate}
@keyframes robotFloat{to{transform:translate(-7px,8px) rotate(-.4deg)}}@keyframes humanFloat{to{transform:translate(7px,-4px)}}
.beam{position:absolute;left:63.5%;top:-3%;width:2px;height:108%;background:linear-gradient(transparent,#13a5ff 18%,#38eaff 50%,#0d76ff 84%,transparent);box-shadow:0 0 7px #0b8cff,0 0 20px #0b8cff,0 0 42px #0b8cff;animation:beamPulse 2.2s ease-in-out infinite}.spark{position:absolute;left:63.5%;top:43%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 10px #fff,0 0 22px #05bdff,0 0 52px #096dff;animation:sparkPulse 1.6s ease-in-out infinite}
@keyframes beamPulse{50%{opacity:.62;box-shadow:0 0 4px #0b8cff,0 0 13px #0b8cff,0 0 30px #0b8cff}}@keyframes sparkPulse{50%{transform:translate(-50%,-50%) scale(1.45);opacity:.85}}

/* slide labels */
.slide-label{position:absolute;left:3.1%;top:3.5%;display:flex;align-items:flex-start;gap:18px;z-index:8}.slide-label strong{font-size:clamp(32px,3.2vw,62px);line-height:.9;color:#0a75ff}.slide-label span{border-left:1px solid #13bfe8;padding-left:17px;color:#d8e0ec;font-size:clamp(10px,.75vw,14px);letter-spacing:.19em;line-height:1.35;text-transform:uppercase}

/* slide 2 */
.origin{background:linear-gradient(110deg,#02060c 0,#051122 54%,#03101d 100%)}.circuit-sky{position:absolute;inset:0 44% 0 0;opacity:.32;background:linear-gradient(90deg,transparent 42%,rgba(15,104,255,.18));clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.circuit-sky:before,.circuit-sky:after{content:"";position:absolute;left:5%;right:8%;height:26%;top:5%;background:repeating-linear-gradient(90deg,transparent 0 28px,rgba(21,111,255,.35) 29px 31px,transparent 32px 70px);transform:skewX(-22deg);filter:drop-shadow(0 0 5px #096cff)}.circuit-sky:after{top:auto;bottom:10%;transform:skewX(18deg);opacity:.65}
.origin-copy{position:absolute;left:3.2%;top:27%;width:22%;z-index:4}.origin-copy h1,.analysis-copy h1,.validation-copy h1{font-size:clamp(48px,4.9vw,94px);line-height:.92;letter-spacing:-.04em;margin:0;font-weight:800}.origin-copy h1 em,.analysis-copy h1 em,.validation-copy h1 em{font-style:normal;color:#0fb7f0}.origin-copy p,.analysis-copy p,.validation-copy p{color:#bac4d2;font-size:clamp(16px,1.2vw,23px);line-height:1.3;margin-top:24px}
.timeline{position:absolute;left:28%;right:5%;top:18%;bottom:16%;display:grid;grid-template-columns:repeat(3,1fr);gap:4.2%;align-items:start}.timeline-line{position:absolute;left:12%;right:7%;top:31%;height:2px;background:linear-gradient(90deg,#2686ff,#0fe1ed);box-shadow:0 0 12px rgba(9,183,255,.4);transform-origin:left;animation:none}.active .timeline-line{animation:drawLine 1.15s .35s ease both}@keyframes drawLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.timeline-step{position:relative;padding-top:0;z-index:2;opacity:0;transform:translateY(16px)}.active .timeline-step{animation:rise .58s ease forwards}.active .t1{animation-delay:.36s}.active .t2{animation-delay:.56s}.active .t3{animation-delay:.76s}.step-top{display:flex;gap:14px;align-items:flex-end}.step-top b{font-size:clamp(24px,2vw,38px);color:#2c86ff}.step-top span{font-size:clamp(12px,.9vw,18px);font-weight:800;letter-spacing:.06em}.opportunity-step .step-top b{color:var(--cyan)}.step-icon{margin-top:42px;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:#07172c;border:3px solid #2787ff;box-shadow:0 0 22px rgba(24,111,255,.3)}.opportunity-step .step-icon{border-color:var(--cyan);box-shadow:0 0 24px rgba(0,216,239,.32)}.step-icon svg{width:42px;height:42px;fill:none;stroke:#eef7ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.timeline-step p{font-size:clamp(15px,1.15vw,22px);line-height:1.28;color:#d0d7e2;max-width:95%;margin-top:26px}

/* slide 3 */
.analysis{background:linear-gradient(110deg,#02060c,#03101f 48%,#041020)}.analysis-copy{position:absolute;left:3%;top:25%;width:23%;z-index:4}.analysis-flow{position:absolute;left:27%;right:2.8%;top:14%;bottom:7%;display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr;gap:1.2%;align-items:center}.analysis-stage{height:79%;align-self:center;padding:22px 24px;background:linear-gradient(150deg,rgba(6,18,39,.9),rgba(8,17,42,.78));border:1px solid rgba(48,117,255,.25);border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.28)}.analysis-stage header{display:flex;gap:14px;align-items:flex-start}.analysis-stage header b{font-size:clamp(26px,2.2vw,42px);line-height:1;color:#147cff}.analysis-stage header span{font-size:clamp(13px,1vw,20px);font-weight:800;line-height:1.15;letter-spacing:.05em}.analysis-stage>p{font-size:clamp(13px,.95vw,18px);color:#b9c5d3;line-height:1.25;margin:12px 0 0}.flow-arrow{font-size:42px;color:#0dd7ec;text-align:center;filter:drop-shadow(0 0 7px #0c9dff)}
.file-stack{position:relative;height:56%;margin-top:6%;perspective:900px}.paper{position:absolute;width:47%;height:43%;border-radius:10px;border:1px solid rgba(83,135,255,.5);background:linear-gradient(145deg,rgba(48,83,170,.96),rgba(37,31,93,.94));box-shadow:0 14px 30px rgba(0,0,0,.32);padding:14px;font-weight:800}.paper small{display:block;position:absolute;left:14px;bottom:12px;font-weight:500;color:#dae5f4}.paper-xlsx{left:1%;top:22%;transform:rotate(-4deg)}.paper-pdf{left:25%;top:1%}.paper-doc{left:51%;top:19%;transform:rotate(3deg)}.paper-folder{left:38%;top:48%;background:linear-gradient(145deg,#263f9b,#332062)}
.map-ui{margin-top:6%;display:grid;gap:8px}.map-ui div{position:relative;padding:9px 42px 9px 14px;border-radius:7px;border:1px solid rgba(40,109,255,.46);background:linear-gradient(90deg,rgba(14,77,183,.76),rgba(16,31,75,.78));font-size:clamp(11px,.8vw,15px)}.map-ui i{position:absolute;right:12px;top:50%;width:18px;height:5px;border-radius:4px;background:linear-gradient(90deg,#8d63ff,#08d6ef);transform:translateY(-50%)}
.dashboard-ui{position:relative;margin-top:6%;height:54%;border:1px solid rgba(55,119,255,.55);border-radius:12px;background:linear-gradient(150deg,#112d6d,#10134a);padding:13px;display:grid;grid-template-columns:1.2fr 1fr .9fr;grid-template-rows:18px 1fr .75fr;gap:9px}.dash-top{grid-column:1/-1;border-bottom:1px solid rgba(101,156,255,.25)}.dash-image{border-radius:6px;background:linear-gradient(135deg,#306ee1,#102654)}.dash-text{padding:6px}.dash-text i{display:block;height:6px;background:#335599;border-radius:5px;margin:8px 0}.dash-bars{display:flex;align-items:flex-end;gap:6px;padding:8px;background:#0d2354;border-radius:6px}.dash-bars i{flex:1;background:linear-gradient(#11dcf0,#684aff);border-radius:2px 2px 0 0}.dash-bars i:nth-child(1){height:36%}.dash-bars i:nth-child(2){height:72%}.dash-bars i:nth-child(3){height:54%}.dash-bars i:nth-child(4){height:90%}.dash-small{background:#142f6e;border-radius:6px}.dash-donut{width:52px;height:52px;border-radius:50%;border:10px solid #6249ea;border-right-color:#10cfeb;margin:auto}

/* slide 4 */
.validation{background:linear-gradient(110deg,#02060d,#041124 54%,#020810)}.validation-copy{position:absolute;left:2.7%;top:25%;width:22%}.validation-copy p{font-size:clamp(14px,1.02vw,19px)}.proposal-row{position:absolute;left:25%;right:2.3%;top:16%;bottom:12%;display:grid;grid-template-columns:repeat(4,1fr);gap:1.7%;align-items:center}.proposal-card{height:74%;display:flex;flex-direction:column}.proposal-card header{min-height:62px}.proposal-card header b{display:block;font-size:clamp(12px,.85vw,17px);letter-spacing:.05em}.proposal-card header span{display:block;color:#9eabba;font-size:clamp(10px,.72vw,14px);margin-top:3px}.mock{position:relative;height:52%;margin-top:12px;border-radius:12px;border:1px solid rgba(43,116,255,.52);background:linear-gradient(150deg,#0b1835,#081128);overflow:hidden;box-shadow:0 0 22px rgba(10,80,255,.12)}.mock-a{display:grid;grid-template-columns:26% 1fr}.mock-a aside{border-right:1px solid rgba(63,120,219,.3);background:linear-gradient(#132b61,#091732)}.mock-a main{padding:16px}.mock-a main i,.copy-lines i{display:block;height:8px;border-radius:7px;background:#1c3c77;margin:9px 0}.mock-a main i:nth-child(1){width:70%}.mock-a main i:nth-child(2){width:90%}.mock-a main i:nth-child(3){width:50%}.mini-chart{position:absolute;right:14px;bottom:14px;width:43%;height:34%;border-radius:7px;background:repeating-linear-gradient(90deg,#1150c6 0 8%,transparent 8% 16%);border-bottom:1px solid #137cff}.mock-b,.mock-c,.mock-approved{padding:14px}.hero{height:37%;border-radius:8px;background:linear-gradient(135deg,#2a62dd,#132a5a)}.copy-lines{width:52%;margin-top:13px}.mini-donut{position:absolute;right:16px;bottom:16px;width:54px;height:54px;border-radius:50%;border:10px solid #6549eb;border-right-color:#13d6ee}.slash{position:absolute;right:-22px;top:-34px;width:105px;height:140px;background:linear-gradient(150deg,#6938ff,#1c54e5);transform:rotate(25deg);opacity:.72}.mini-cards{position:absolute;left:14px;right:14px;bottom:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mini-cards i{height:45px;border-radius:6px;background:#10285e;border:1px solid #2451a5}.proposal-card footer{position:relative;color:#aab7c6;font-size:clamp(10px,.74vw,14px);padding-left:23px;margin-top:12px}.proposal-card footer i{position:absolute;left:0;top:1px;width:15px;height:15px;border:1px solid #158dff;border-radius:50%}.approved-card{border-left:1px dashed rgba(20,213,236,.48);padding-left:16px}.approved-card header b{color:var(--cyan)}.mock-approved{border-color:#0ad9ef;box-shadow:0 0 28px rgba(0,216,239,.2)}.approval{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;background:var(--cyan);display:grid;place-items:center;color:#052039;font-size:23px;font-weight:900;box-shadow:0 0 16px rgba(0,216,239,.5)}.approved-card ul{list-style:none;margin:13px 0 0;padding:0}.approved-card li{font-size:clamp(10px,.72vw,14px);color:#c3cfdd;margin:8px 0;padding-left:20px;position:relative}.approved-card li:before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:900}

/* closing */
.closing-copy{position:absolute;left:4.1%;top:25%;z-index:9;width:49%}.closing-copy h1{font-size:clamp(46px,4.2vw,82px);line-height:.99;letter-spacing:-.045em;margin:0;font-weight:800}.closing-copy h1 em{background:linear-gradient(90deg,#04cced,#7b58ff);-webkit-background-clip:text;background-clip:text;color:transparent}.closing-copy p{font-size:clamp(22px,1.7vw,33px);line-height:1.25;color:#f1f4f8;margin:34px 0 0}.closing-copy p strong{color:#0bd8ec}.closing-copy p:last-of-type strong{color:#8b62ff}.closing-hands .robot-hand{width:46%;left:31%;top:-2%}.closing-hands .human-hand{width:35%;right:-1%;top:39%}.closing-hands .beam{left:66.2%}.closing-hands .spark{left:66.2%;top:43.5%}

/* navigation */
.nav{position:fixed;z-index:50;top:50%;transform:translateY(-50%);width:48px;height:84px;border:0;border-radius:14px;background:rgba(3,15,30,.18);color:#dcebff;font-size:42px;opacity:0;cursor:pointer;transition:.2s;backdrop-filter:blur(9px)}body:hover .nav{opacity:.28}.nav:hover{opacity:1;background:rgba(7,31,62,.75)}.prev{left:12px}.next{right:12px}.pager{position:fixed;z-index:52;bottom:17px;left:50%;transform:translateX(-50%);display:flex;gap:8px;opacity:.22;transition:.2s}body:hover .pager{opacity:.8}.page-dot{width:7px;height:7px;border:0;border-radius:50%;background:#637895;padding:0;cursor:pointer}.page-dot.active{width:26px;border-radius:9px;background:var(--cyan)}.help{position:fixed;left:50%;bottom:42px;transform:translateX(-50%);z-index:55;padding:8px 12px;border-radius:8px;background:rgba(5,16,33,.82);color:#aebdce;font-size:12px;opacity:0;pointer-events:none;animation:help 4.2s ease forwards}@keyframes help{0%,12%{opacity:0}28%,70%{opacity:.9}100%{opacity:0}}
@media (max-width:900px){.nav,.help{display:none}.stage{width:100vw;height:56.25vw;max-height:100vh}.pager{bottom:7px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* =========================================================
   FIXED 16:9 PRESENTATION CANVAS
   The presentation is authored on a 1600x900 logical canvas
   and only scaled as a whole. This prevents browser-width
   units from reflowing titles/cards at different screen ratios.
   ========================================================= */
html,body{width:100%;height:100%;min-width:0;min-height:0}
body{position:relative;display:block;overflow:hidden;background:#000}
.stage{
  position:absolute;
  left:50%;top:50%;
  width:1600px;height:900px;
  min-width:1600px;min-height:900px;
  transform:translate(-50%,-50%) scale(var(--stage-scale,1));
  transform-origin:center center;
  overflow:hidden;
}
.slide{
  display:none;
  opacity:1;
  visibility:visible;
  transform:none;
  transition:none;
}
.slide.active{display:block;opacity:1;visibility:visible;transform:none;z-index:2}

/* Keep animated content visible throughout: motion, not disappearing content. */
.slide.active .reveal{animation:riseFixed .48s cubic-bezier(.2,.8,.2,1) both}
.slide.active .reveal:nth-child(2){animation-delay:.025s}
.slide.active .reveal:nth-child(3){animation-delay:.05s}
.slide.active .reveal:nth-child(4){animation-delay:.075s}
@keyframes riseFixed{from{transform:translateY(14px)}to{transform:none}}

/* Typography is tied to the presentation canvas, not the browser viewport. */
.meta{font-size:13px}
.cover-copy{left:4.8%;top:27%;width:39%}
.cover-copy h1{font-size:94px}
.cover-copy p{font-size:28px}
.slide-label strong{font-size:49px}
.slide-label span{font-size:12px}

/* Slide 2 */
.origin-copy{left:3.2%;top:27%;width:24.5%}
.origin-copy h1{font-size:58px;line-height:.94}
.origin-copy p{font-size:18px;line-height:1.32;max-width:330px}
.timeline{left:30%;right:5%;top:18%;bottom:16%;gap:4%}
.step-top b{font-size:31px}
.step-top span{font-size:14px}
.step-icon{width:72px;height:72px;margin-top:38px}
.step-icon svg{width:37px;height:37px}
.timeline-step{opacity:1;transform:none}
.active .timeline-step{animation:stepRiseFixed .44s ease both}
.active .t1{animation-delay:.12s}.active .t2{animation-delay:.21s}.active .t3{animation-delay:.30s}
@keyframes stepRiseFixed{from{transform:translateY(10px)}to{transform:none}}
.timeline-step p{font-size:17px;line-height:1.3;margin-top:22px}

/* Slide 3 */
.analysis-copy{left:3%;top:24%;width:23.5%}
.analysis-copy h1{font-size:53px;line-height:.95}
.analysis-copy p{font-size:17px;line-height:1.34;margin-top:22px}
.analysis-flow{left:27%;right:2.8%;top:14%;bottom:7%;grid-template-columns:1fr 42px 1fr 42px 1fr;gap:1.15%}
.analysis-stage{height:78%;padding:20px 22px}
.analysis-stage header b{font-size:34px}
.analysis-stage header span{font-size:15px}
.analysis-stage>p{font-size:14px;line-height:1.3}
.flow-arrow{font-size:36px}
.map-ui div{font-size:12px}

/* Slide 4 */
.validation-copy{left:2.7%;top:24%;width:21.5%}
.validation-copy h1{font-size:51px;line-height:.95}
.validation-copy p{font-size:15px;line-height:1.34;margin-top:20px}
.proposal-row{left:24.5%;right:2.3%;top:15%;bottom:10%;gap:1.55%}
.proposal-card{height:76%}
.proposal-card header b{font-size:13px}
.proposal-card header span{font-size:11px}
.proposal-card footer{font-size:11px}
.approved-card li{font-size:11px}

/* Closing slide */
.closing-copy{left:4.1%;top:25%;width:54%}
.closing-copy h1{font-size:64px;line-height:1.0}
.closing-copy p{font-size:25px;line-height:1.28;margin-top:30px}

/* Controls stay in browser coordinates, independent of stage scale. */
@media (max-width:900px){
  .stage{width:1600px;height:900px;min-width:1600px;min-height:900px;max-height:none}
  .pager{bottom:7px}
}

/* Clean isolated hand assets: no baked-in text or slide background. */
.robot-hand,.human-hand{
  object-fit:contain;
  mix-blend-mode:normal;
  -webkit-mask-image:none;
  mask-image:none;
}
.cover .robot-hand{width:45%;left:22%;top:-1%}
.cover .human-hand{width:42%;right:-3%;top:31%}
.cover .beam{left:63.9%}
.cover .spark{left:63.9%;top:43.2%}
.closing-hands .robot-hand{width:45%;left:22%;top:-1%}
.closing-hands .human-hand{width:42%;right:-3%;top:31%}
.closing-hands .beam{left:63.9%}
.closing-hands .spark{left:63.9%;top:43.2%}

/* Keep the long closing statement fully legible over the hand composition. */
.closing::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:55%;
  z-index:6;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(2,6,13,1) 0%,rgba(2,6,13,.98) 70%,rgba(2,6,13,.76) 86%,rgba(2,6,13,0) 100%);
}
.closing-copy,.closing .meta{z-index:9}
