:root{
  --bg:#F5F7F2;--ink:#0B4F43;--green:#037A62;--deep:#0B4F43;--leaf:#2BB673;
  --mint:#DFF0E6;--line:#D6E0D6;--orange:#F2B670;--orange-bg:#FFF8EE;
  --gray:#8E9892;--gray-bg:#ECEFEA;--muted:#4F6B63;
  --ease:cubic-bezier(.2,.8,.2,1);
  --font:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg)}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
.topbar{position:fixed;inset:0 0 auto 0;height:4px;background:var(--mint);z-index:10}
.topbar i{display:block;height:100%;width:0;background:var(--green);transition:width .5s var(--ease)}

#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:0 0;background:var(--bg);overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.slide.active{opacity:1;visibility:visible;transition-delay:0s}
.slide>*{position:absolute}
h1,h2,h3,h4,p{margin:0}

/* header */
.hd{left:80px;top:34px}
.logo-full{width:165px;height:70px;background:url('assets/logo-green.png') -18.8px -18.4px/203px auto no-repeat}
.rule{left:80px;right:80px;top:124px;height:0;border:0;border-top:2px solid var(--line);margin:0}
.rule.low{top:782px}
h1{left:80px;top:138px;font-size:72px;font-weight:700;letter-spacing:-.01em;line-height:1.1;color:var(--deep)}

/* reveal */
.rv{opacity:0}
.slide.active .rv{animation:rise .7s var(--ease) var(--d,0s) both}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.pop{opacity:0}
.slide.active .pop{animation:pop .55s cubic-bezier(.3,1.5,.5,1) var(--d,0s) both}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* logo tiles: identical box, logo contained */
.tile{width:96px;height:96px;background:#fff;border:2px solid var(--line);border-radius:22px;display:grid;place-items:center;box-shadow:0 2px 8px rgba(11,79,67,.06)}
.tile img{display:block;width:72px;height:56px;object-fit:contain}
.tile.sm{width:76px;height:76px;border-radius:18px}
.tile.sm img{width:52px;height:44px}

/* wires + dots */
.wires{left:0;top:0;width:1920px;height:1080px;pointer-events:none}
.wire path{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.slide.active .wire path{animation:draw .9s var(--ease) var(--d,0s) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.wire path{pathLength:1}
.dot{left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 5px rgba(43,182,115,.22);offset-path:var(--p);offset-rotate:0deg;opacity:0;z-index:2}
.slide.active .dot{animation:flow 3.2s linear infinite}
@keyframes flow{0%{offset-distance:0%;opacity:0}10%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}

/* ---------- slide 1 ---------- */
.legend{right:80px;top:172px;display:flex;gap:34px;list-style:none;margin:0;padding:0;font-size:24px;color:var(--muted);align-items:center}
.legend li{display:flex;align-items:center;gap:12px}
.sw{width:54px;height:34px;border-radius:12px;display:block}
.sw.active{background:var(--mint);border:2px solid var(--green)}
.sw.progress{background:var(--orange-bg);border:2px dashed var(--orange)}
.sw.building{border:2px dotted var(--gray);background:repeating-linear-gradient(135deg,var(--gray-bg) 0 6px,#DDE2DC 6px 12px)}

.chief{left:80px;top:235px;width:560px;height:140px;background:var(--deep);border-radius:20px;display:flex;align-items:center;gap:26px;padding:0 34px;color:#fff}
.chief-ico{width:92px;height:92px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none;position:relative}
.chief-ico::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.35);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.chief h3{font-size:46px;font-weight:700;line-height:1.1}
.chief p{font-size:26px;opacity:.92}
.brain{left:670px;top:235px;width:1170px;height:140px;background:var(--mint);border:2px solid var(--leaf);border-radius:20px;display:flex;align-items:center;gap:26px;padding:0 34px}
.brain-ico{width:92px;height:92px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;overflow:hidden}
.logo-mark{display:block;width:63px;height:64px;background:url('assets/logo-green.png') -158px -34.5px/379px auto no-repeat}
.brain-txt{flex:1;min-width:0}
.brain h3{font-size:42px;font-weight:700;line-height:1.1}
.brain p{font-size:24px;margin-top:4px;color:var(--deep)}
.brain-logos{display:flex;gap:14px;flex:none}
.cols{left:80px;top:470px;width:1760px;height:560px;display:grid;grid-template-columns:repeat(6,273px);gap:24px;align-items:start}
.cols .col{position:relative;background:#fff;border:2px solid var(--line);border-radius:16px;overflow:hidden;height:560px}
.col h4{background:var(--green);color:#fff;font-size:29px;font-weight:600;height:72px;display:grid;place-items:center;letter-spacing:.01em}
.pills{padding:20px 16px;display:flex;flex-direction:column;gap:16px}
.pill{position:relative;height:88px;border-radius:26px;display:flex;align-items:center;gap:14px;padding:0 18px;font-size:27px;font-weight:500;line-height:1.1;color:var(--deep)}
.pill b{width:18px;height:18px;border-radius:50%;flex:none}
.pill.active{background:var(--mint);border:2px solid var(--green)}
.pill.active b{background:var(--leaf)}
.pill.progress{background:var(--orange-bg);border:2.5px dashed var(--orange)}
.pill.progress b{background:var(--orange)}
.pill.building{background:repeating-linear-gradient(135deg,var(--gray-bg) 0 8px,#DDE2DC 8px 16px);border:2.5px dotted var(--gray);color:#4B5550}
.pill.building b{background:var(--gray);border-radius:4px;transform:rotate(45deg) scale(.85)}
.pill em{position:absolute;right:12px;bottom:-14px;background:var(--orange);color:var(--deep);font-style:normal;font-weight:700;font-size:17px;letter-spacing:.06em;padding:3px 12px;border-radius:12px}
.slide.s1.active .pill.progress{animation:rise .7s var(--ease) var(--d,0s) both,breathe 3s ease-in-out calc(var(--d,0s) + 1s) infinite}
@keyframes breathe{50%{border-color:#e69a3f}}


/* cloudflare pill */
.cf{background:#fff;border-radius:999px;padding:4px 12px;display:flex;align-items:center;flex:none}
.cf img{display:block;height:28px;width:auto;object-fit:contain}
.brain-logos{align-items:center}

/* ---------- slide 2 ---------- */
.bubble{left:80px;width:560px;background:#fff;border:3px solid var(--green);border-radius:30px;padding:26px 34px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.bubble h3{font-size:44px;font-weight:700;line-height:1.1}
.bubble .tiles{display:flex;gap:18px;align-items:center}
.bubble .tile{width:80px;height:80px;border-radius:22px;box-shadow:none}
.bubble .tile img{width:52px;height:48px}
.b1{top:250px;height:250px}
.b2{top:524px;height:276px}
.tags{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tag{font-size:28px;font-weight:600;color:var(--deep);background:var(--mint);border:2px solid var(--green);border-radius:999px;padding:6px 18px;white-space:nowrap}
.tag.more{background:#fff;color:var(--green)}
.tags.ch .tag{font-size:23px;padding:5px 14px}
.stat{left:80px;top:830px;width:560px;white-space:nowrap}
.big{font-size:124px;font-weight:700;line-height:1;color:var(--green);letter-spacing:-.01em;font-feature-settings:'tnum' 1}
.stat p{font-size:38px;color:var(--muted);margin-top:4px}

.hub{left:760px;top:415px;width:400px;height:400px}
.ring{position:absolute;inset:0;border-radius:50%;border:9px solid var(--leaf)}
.ring::before,.ring::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--leaf);opacity:0;animation:pulse 3.2s ease-out infinite}
.ring::after{animation-delay:1.6s}
@keyframes pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.18);opacity:0}}
.core{position:absolute;inset:26px;border-radius:50%;background:var(--deep);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.core .logo-mark{margin-bottom:24px;background:url('assets/logo-green.png') -158px -34.5px/379px auto no-repeat,#fff;border-radius:50%;box-shadow:0 0 0 12px #fff;transform:scale(1.15)}
.core h2{font-size:58px;font-weight:700;line-height:1.05}
.core p{font-size:30px;margin-top:10px;opacity:.9}
.cf-hub{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:26px;border:2px solid var(--line);padding:6px 18px}
.cf-hub img{height:34px}
.brain-note{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:100px;white-space:nowrap;font-size:24px;color:#6b7771;letter-spacing:.01em}

.branches{left:1260px;top:259px;width:580px}
.br{position:relative;height:128px;margin-bottom:18px;background:var(--mint);border:2px solid var(--green);border-left:12px solid var(--green);border-radius:14px;padding:12px 26px;display:flex;flex-direction:column;justify-content:center}
.br:last-child{margin-bottom:0}
.br h3{font-size:38px;font-weight:700;line-height:1.1}
.br p{font-size:25px;color:var(--muted);margin-top:5px;white-space:nowrap}
.br.live{background:var(--deep);border-color:var(--deep);border-left-color:var(--leaf)}
.br.live h3{color:#fff}.br.live p{color:#cfe8dd}
.slide.active .br.live{animation:rise .7s var(--ease) var(--d,0s) both,glow 2.8s ease-in-out 4s infinite}
@keyframes glow{50%{box-shadow:0 0 0 8px rgba(43,182,115,.25)}}

/* ---------- slide 3 ---------- */
.sub{left:80px;top:226px;font-size:34px;color:var(--muted)}
.grid9{left:80px;top:300px;width:1030px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lg{height:180px;background:#fff;border:2px solid var(--line);border-radius:26px;box-shadow:0 2px 8px rgba(11,79,67,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
a.lg{text-decoration:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}
a.lg:hover{border-color:var(--deep);box-shadow:0 6px 18px rgba(11,79,67,.16)}
.lg img{display:block;width:150px;height:84px;object-fit:contain}
.lg span{font-size:28px;font-weight:500;color:var(--deep);white-space:nowrap}
.benefits{left:1160px;top:300px;width:680px;display:flex;flex-direction:column;gap:22px}
.chip{display:flex;align-items:center;gap:24px;text-wrap:balance;height:180px;padding:0 36px;border-radius:26px;background:var(--mint);border:3px solid var(--green);font-size:38px;font-weight:600;line-height:1.2;color:var(--deep);text-wrap:balance}
.chip b{width:30px;height:30px;border-radius:50%;background:var(--leaf);flex:none}
.closing{left:80px;top:912px;width:1760px;height:108px;border-radius:26px;background:var(--deep);color:#fff;font-size:50px;font-weight:600;display:grid;place-items:center;text-align:center;letter-spacing:-.005em}
.slide.active .closing{animation:rise .7s var(--ease) var(--d,0s) both,glow 2.8s ease-in-out 3s infinite}

/* nav dots */
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:12px;z-index:5}
.dots button{width:12px;height:12px;padding:0;border-radius:50%;border:2px solid var(--green);background:transparent;cursor:pointer}
.dots button.on{background:var(--green)}

/* static mode: final state, no animation */
body.static *,body.static *::before,body.static *::after{animation:none!important;transition:none!important}
body.static .rv,body.static .pop{opacity:1}
body.static .wire path{stroke-dashoffset:0}
body.static .dot{display:none}
@media (prefers-reduced-motion:reduce){
  .dot{display:none}
}