:root{--u:min(1vw,1.78vh);--bg:#fff;--t:#111827;--m:#6b7280;--l:#e5e7eb;--a:#2563eb}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--t);font-family:'Be Vietnam Pro',system-ui,sans-serif}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}

/* slides */
.sl{position:absolute;inset:0;padding:10vh 8vw 11vh;display:flex;flex-direction:column;justify-content:center;gap:2.8vh;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .6s,transform .6s,visibility .6s}
.sl.prev{transform:translateY(-24px)}
.sl.act{opacity:1;visibility:visible;transform:none}
.pt{position:absolute;top:4vh;left:8vw;font-size:max(11px,calc(var(--u)*.8));letter-spacing:.2em;text-transform:uppercase;color:var(--m)}

/* type */
.k{font-size:max(12px,calc(var(--u)*.9));letter-spacing:.2em;text-transform:uppercase;color:var(--a);font-weight:600}
h1{font-size:clamp(34px,calc(var(--u)*5.6),104px);line-height:1.22;font-weight:700}
h2{font-size:clamp(26px,calc(var(--u)*3.6),66px);line-height:1.3;font-weight:700;max-width:22em}
h3{font-size:clamp(16px,calc(var(--u)*1.5),28px);font-weight:600}
p,small{color:var(--m);font-size:clamp(14px,calc(var(--u)*1.3),24px);line-height:1.55}
.big{font-size:clamp(20px,calc(var(--u)*2.1),40px);color:var(--t);line-height:1.5;font-weight:300}
.big b{color:var(--a);font-weight:700}
.src{font-size:max(11px,calc(var(--u)*.85));color:var(--m)}

/* reveal animation */
.r{opacity:0}
.act .r{animation:up .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*90ms + 150ms)}
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;opacity:0}
.act .ch{animation:up .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--c)*35ms + 100ms)}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* icons */
.ic{width:2.6vw;min-width:26px;fill:none;stroke:var(--a);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* layout helpers */
.two{display:grid;grid-template-columns:auto 1fr;gap:6vw;align-items:center}
.hero{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:4vw}
.hero p{margin-top:2vh}
.fig{width:100%;max-height:60vh}
.fig .ring{fill:none;stroke:var(--l);stroke-width:1.5}
.fig .tri{fill:none;stroke:var(--t);stroke-width:2;stroke-dasharray:800;stroke-dashoffset:800;stroke-linejoin:round}
.act .fig .tri{animation:dr 2.2s .6s forwards}
.fig .nd{fill:var(--a)}
.fig text{fill:var(--t);font-size:13px;text-anchor:middle;letter-spacing:.12em;paint-order:stroke;stroke:#fff;stroke-width:10px;stroke-linejoin:round}
@keyframes dr{to{stroke-dashoffset:0}}

/* cards (3 columns) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw;margin-top:1vh}
.card{border-top:2px solid var(--t);padding-top:2.4vh;display:flex;flex-direction:column;gap:1.2vh}
.card b{font-size:clamp(17px,calc(var(--u)*1.8),32px);font-weight:700;line-height:1.35}

/* steps */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2.4vw;margin-top:1vh}
.step{position:relative;border-top:2px solid var(--l);padding-top:2.2vh;display:flex;flex-direction:column;gap:.8vh}
.step::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--a)}
.act .step::before{animation:fill 1s calc(var(--i)*180ms + 500ms) forwards}
@keyframes fill{to{width:100%}}
.step i{font-style:normal;color:var(--a);font-weight:600;font-size:clamp(12px,calc(var(--u)*1.1),20px)}
.step b{font-size:clamp(16px,calc(var(--u)*1.7),30px);font-weight:700;line-height:1.35}

/* compare */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:4vw}
.side{border-left:3px solid var(--l);padding-left:1.6vw;display:flex;flex-direction:column;gap:.8vh}
.side.good{border-color:var(--a)}
.side h3{color:var(--m);margin-bottom:.6vh}
.side.good h3{color:var(--a)}
.side p{color:var(--t)}

/* chips */
.chips{display:flex;gap:1vw;flex-wrap:wrap}
.chips span{border:1px solid var(--l);border-radius:99px;padding:.8vh 1.4vw;font-size:clamp(12px,calc(var(--u)*1.15),22px)}

/* donut */
.don{position:relative;width:min(42vh,32vw);aspect-ratio:1}
.don svg{transform:rotate(-90deg);width:100%}
.don circle{fill:none;stroke-width:10}
.don .bg{stroke:var(--l)}
.don .arc{stroke:var(--a);stroke-linecap:round;stroke-dasharray:0 100}
.act .arc{animation:d 1.6s .3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes d{to{stroke-dasharray:var(--v) 100}}
.don>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.don em{line-height:1.2;font-style:normal;font-size:clamp(40px,calc(var(--u)*5.6),100px);font-weight:700}
.don span{font-size:calc(var(--u)*2);color:var(--a);font-weight:600}
.don small{display:block;max-width:12em;margin:0 auto}

/* ranking list */
.rk{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:1.4vh 3vw}
.rw{display:grid;grid-template-columns:2.4vw 1fr;gap:1vw;align-items:baseline;padding-bottom:1.2vh;border-bottom:1px solid var(--l);font-size:clamp(14px,calc(var(--u)*1.3),24px)}
.rw span{color:var(--m)}
.rw.top{font-weight:600}
.rw.top span{color:var(--a)}
.rw.low{color:var(--m)}

/* microsoft */
.who{display:flex;align-items:center;gap:1.6vw}
.who img{width:7vw;aspect-ratio:1;border-radius:50%;object-fit:cover}
.who em{font-style:normal;font-weight:700;color:var(--a)}
.stat{line-height:1.3;font-size:clamp(24px,calc(var(--u)*3),54px);font-weight:700}

/* conclusion */
.mega{font-size:clamp(30px,calc(var(--u)*5),92px);font-weight:700;line-height:1.28}
.mega em{font-style:normal;color:var(--a)}
.dual{display:flex;gap:4vw}
.dual div{border-left:3px solid var(--a);padding-left:1.2vw;color:var(--m)}
.dual b{display:block;color:var(--t);font-size:clamp(16px,calc(var(--u)*1.6),30px)}

/* quiz */
.qz{border-bottom:1px solid var(--l);padding:1.6vh 0;cursor:pointer}
.qz p{color:var(--t);font-size:clamp(15px,calc(var(--u)*1.5),28px)}
.qz small{color:var(--a);font-weight:600}
.qa{max-height:0;opacity:0;overflow:hidden;transition:all .6s cubic-bezier(.2,.8,.2,1)}
.qz.ans .qa{max-height:30vh;opacity:1;margin-top:1vh;padding-left:1.2vw;border-left:3px solid var(--a);color:var(--t)}
.qz.ans small{display:none}

.refs{list-style:none;margin-top:2vh}
.refs li{color:var(--t);font-size:clamp(14px,calc(var(--u)*1.3),24px);margin:1vh 0;padding-left:1.2vw;border-left:2px solid var(--l)}

/* ui */
#bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:9;background:var(--l)}
#bar i{display:block;height:100%;width:0;background:var(--a);transition:width .6s}
#ui{position:fixed;bottom:2.4vh;left:50%;transform:translateX(-50%);z-index:9;display:flex;gap:1vw;align-items:center;opacity:.5;transition:opacity .3s}
#ui:hover{opacity:1}
#ui button{font-size:max(18px,calc(var(--u)*1.4));padding:0 .8vw;color:var(--t)}
#ui button:hover{color:var(--a)}
#cnt{font-size:max(12px,calc(var(--u)*.9));color:var(--m);min-width:5vw;text-align:center}

@media(max-width:800px){
  .hero,.two,.cmp,.cards,.rk{grid-template-columns:1fr}
  .steps{grid-auto-flow:row}
  .rk{grid-auto-flow:row;grid-template-rows:none}
  .sl{overflow:auto;justify-content:flex-start;padding-top:9vh}
  .pt{display:none}
  .ic{width:28px}
  .don{width:60vw}
  .rw{grid-template-columns:28px 1fr}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}


/* ===== slide 1: continuous motion ===== */
.fig{overflow:visible;animation:flo 7s ease-in-out infinite}
.fig .ring{stroke:#cbd5e1}
.fig .rg1{stroke-dasharray:2 9;animation:rot 70s linear infinite}
.fig .rg2{stroke:#93b4f5;stroke-dasharray:46 20 6 20;animation:rot 46s linear infinite reverse}
.fig .orbit{animation:rot linear infinite}
.fig .o1{animation-duration:16s}.fig .o2{animation-duration:11s;animation-direction:reverse}.fig .o3{animation-duration:26s}
.fig .pd{fill:var(--a);filter:drop-shadow(0 0 6px rgba(37,99,235,.7))}
.fig .pd.s{fill:#60a5fa}
.fig .orb{animation:rot 42s linear infinite}
.fig .ctr{animation:rot 42s linear infinite reverse}
.fig .core{animation:pul 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.fig .rip{fill:none;stroke:var(--a);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:rpl 2.7s ease-out infinite}
.fig .c0{animation:pul 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes flo{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6vh)}}
@keyframes pul{0%,100%{transform:scale(.88);opacity:.7}50%{transform:scale(1.1);opacity:1}}
@keyframes rpl{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.2);opacity:0}}
@media(prefers-reduced-motion:reduce){.fig,.fig *{animation:none!important}}