:root{
  --bg:#08090C; --fg:#F5F5F3; --mute:rgba(245,245,243,.62); --faint:rgba(245,245,243,.14);
  --line:rgba(255,255,255,.10); --surface:rgba(255,255,255,.035); --accent:#5E9FE8;
  --pad-x:clamp(24px,7vw,128px); --pad-y:clamp(24px,9vh,110px);
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--fg);font-family:var(--f);overflow:hidden;-webkit-font-smoothing:antialiased}
body{opacity:0;transition:opacity .6s}
body.ready{opacity:1}
a{color:inherit}

/* ---------- ambient background ---------- */
.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(40px);
  transition:left 1.6s cubic-bezier(.76,0,.24,1),top 1.6s cubic-bezier(.76,0,.24,1),transform 1.6s cubic-bezier(.76,0,.24,1);will-change:left,top,transform}
#orbA{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent) 0%,transparent 62%)}
#orbB{background:radial-gradient(circle,rgba(120,110,255,.14) 0%,transparent 60%)}
.grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px;opacity:.35;mask-image:radial-gradient(ellipse at 50% 50%,#000 10%,transparent 75%)}
.grain{position:absolute;inset:-50%;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- HUD ---------- */
.hud{position:fixed;z-index:5;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.hud-tl{top:28px;left:var(--pad-x);display:flex;gap:10px;align-items:center}
.hud-tl b{color:var(--fg);font-weight:600}
.hud-tl #hud-for{color:var(--accent)}
.hud-tr{top:22px;right:var(--pad-x);display:flex;gap:16px;align-items:center;font-variant-numeric:tabular-nums}
#fs{background:none;border:1px solid var(--line);color:var(--mute);width:36px;height:36px;border-radius:8px;cursor:pointer;display:grid;place-items:center;transition:.2s}
#fs:hover{color:var(--fg);border-color:var(--faint)}
#dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:4px}
#dots button{width:20px;height:20px;border:0;background:none;cursor:pointer;position:relative}
#dots button::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:var(--faint);transform:translate(-50%,-50%);transition:all .5s cubic-bezier(.16,1,.3,1)}
#dots button.on::after{background:var(--accent);height:18px;border-radius:3px}
#progress{position:fixed;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.76,0,.24,1);z-index:5}
.hint{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:5;display:flex;gap:10px;align-items:center;color:var(--mute);font-size:13px;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .6s}
body.first .hint{opacity:1;transition-delay:1.6s}
.hint kbd{font-family:var(--f);border:1px solid var(--faint);border-radius:6px;padding:4px 8px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}

/* ---------- slides ---------- */
#deck{position:fixed;inset:0;z-index:2}
.slide{position:absolute;inset:0;padding:calc(var(--pad-y) + 20px) var(--pad-x) var(--pad-y);display:flex;flex-direction:column;justify-content:center;visibility:hidden}
.slide.active{visibility:visible}
.slide.entering{z-index:2}

.kicker,.chapter,.label{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
.chapter{margin-bottom:24px}
.label{color:var(--mute);margin-bottom:16px}
h1.display{font-size:clamp(48px,8.2vw,148px);line-height:.95;letter-spacing:-.045em;font-weight:650;margin:20px 0 28px}
h2{font-size:clamp(28px,3.3vw,56px);line-height:1.08;letter-spacing:-.03em;font-weight:600;max-width:17ch}
h2.wide{max-width:24ch}
h2.xl{font-size:clamp(36px,4.6vw,78px);max-width:13ch}
h3{font-size:clamp(18px,1.4vw,24px);letter-spacing:-.01em;font-weight:600;line-height:1.25}
.lead{font-size:clamp(18px,1.6vw,28px);line-height:1.4;color:var(--mute);max-width:36ch}
.body{font-size:clamp(16px,1.25vw,21px);line-height:1.55;color:var(--mute);max-width:46ch;margin-top:20px}
p{color:var(--mute);font-size:clamp(15px,1.05vw,18px);line-height:1.5}

/* intro */
.prepared{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:8px 14px 8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:14px;color:var(--mute);margin-bottom:28px}
.prepared b{color:var(--fg)}
.prep-logo img{height:22px;display:block}
.prep-logo .wordmark{display:none}
.intro,.closing{display:flex;flex-direction:column}
.stat-row{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(24px,4.5vw,80px);margin-top:clamp(32px,7vh,80px);padding-top:28px;border-top:1px solid var(--line)}
.stat-v{font-size:clamp(28px,2.8vw,48px);font-weight:600;letter-spacing:-.03em;display:inline-block;transform-origin:center;font-variant-numeric:tabular-nums}
.stat-l{font-size:14px;color:var(--mute);margin-top:6px}

/* hero numbers */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,110px);align-items:center}
.hero-num{padding-right:.08em;font-size:clamp(120px,17vw,310px);font-weight:700;letter-spacing:-.06em;line-height:.85;display:inline-block;transform-origin:center;
  background:linear-gradient(180deg,#fff 30%,color-mix(in srgb,var(--accent) 70%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.hero-num.md{font-size:clamp(84px,11vw,190px)}
.hero-num.sm{font-size:clamp(64px,8.6vw,150px);margin-bottom:20px}
.facts{display:flex;gap:clamp(20px,3vw,48px);margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.fact b{display:block;font-size:clamp(20px,1.8vw,30px);letter-spacing:-.02em;font-weight:600}
.fact span{font-size:14px;color:var(--mute)}
.fact.big{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.fact.big b{font-size:clamp(36px,3.6vw,64px);color:var(--accent)}

/* shelf */
.shelf{position:absolute;top:max(84px,calc(var(--pad-y) - 4px));right:calc(var(--pad-x) + 8px);display:flex;gap:12px}
.shelf-chip{display:flex;align-items:baseline;gap:8px;padding:8px 14px;border:1px solid var(--line);background:var(--surface);border-radius:10px;transform-origin:center;backdrop-filter:blur(8px)}
.shelf-chip b{font-size:18px;letter-spacing:-.02em}
.shelf-chip span{font-size:13px;color:var(--mute)}

.stack{display:flex;flex-direction:column}

/* pipeline */
.pipe-head{display:flex;align-items:flex-end;gap:clamp(24px,4vw,64px)}
.pipe-head h2{padding-bottom:12px}
.bars{margin-top:clamp(28px,5vh,56px);display:grid;gap:16px;max-width:1100px}
.bar-row{display:grid;grid-template-columns:150px 1fr 90px;align-items:center;gap:20px;font-size:15px}
.bar-l{color:var(--mute)}
.bar-row b{font-size:20px;text-align:right;font-variant-numeric:tabular-nums}
.bar{height:14px;border-radius:7px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--faint);border-radius:7px;transition:width 1.6s cubic-bezier(.16,1,.3,1) .5s}
.bar.accent i{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 40%,transparent),var(--accent));transition-delay:.8s}
.played .bar i{width:var(--w)}
.pipe-foot{display:flex;align-items:center;gap:clamp(24px,4vw,64px);margin-top:clamp(28px,5vh,56px)}
.ring-wrap{position:relative;width:140px;height:140px;flex:none}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:var(--line);stroke-width:8}
.ring .ring-fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1) .9s}
.played .ring .ring-fg{stroke-dashoffset:calc(326.7 - 326.7 * var(--p) / 100)}
.ring-t{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring-t b{font-size:30px;letter-spacing:-.02em}
.ring-t > span{font-size:13px;color:var(--mute)}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{display:inline-block;font-size:14px;padding:7px 12px;border:1px solid var(--line);border-radius:8px;color:var(--fg);background:var(--surface)}
.lg-tag{font-size:clamp(15px,1.15vw,19px);padding:10px 16px}

/* network */
.net-split{grid-template-columns:1fr 1.1fr}
.net-split .hero-num{margin-bottom:16px}
.net{position:relative;aspect-ratio:1/1;max-height:66vh;width:100%;justify-self:center}
.net-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.net-lines ellipse{fill:none;stroke:var(--line);stroke-width:.15;stroke-dasharray:.6 .8}
.net-lines line{stroke:color-mix(in srgb,var(--accent) 45%,transparent);stroke-width:.12;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d) + .3s)}
.played .net-lines line{stroke-dashoffset:0}
.net-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 35%,transparent),color-mix(in srgb,var(--accent) 8%,transparent));border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);font-size:clamp(12px,.95vw,15px);font-weight:600;padding:8px;
  box-shadow:0 0 80px color-mix(in srgb,var(--accent) 35%,transparent)}
.node{position:absolute;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:all .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--d)}
.played .node{transform:translate(-50%,-50%) scale(1);opacity:1}
.node-logo{display:flex;align-items:center;justify-content:center;min-width:92px;height:44px;padding:0 14px;border-radius:10px;background:rgba(14,16,20,.85);border:1px solid var(--line);backdrop-filter:blur(6px);white-space:nowrap}
.node.r0 .node-logo{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.node-logo img{max-height:26px;max-width:110px;display:block}
.node-logo .wordmark{font-size:clamp(12px,.9vw,15px);font-weight:600}
.legend{display:flex;gap:20px;margin-top:28px;font-size:14px;color:var(--mute)}
.lg::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;border:1px solid var(--line);vertical-align:-1px}
.lg0::before{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 25%,transparent)}

/* logos */
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:clamp(28px,5vh,56px)}
.logo-cell{height:clamp(84px,13vh,128px);border:1px solid var(--line);border-radius:12px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative;transition:border-color .3s}
.logo-cell:hover{border-color:var(--faint)}
.logo img{max-height:40px;max-width:150px;display:block;filter:grayscale(1) brightness(1.8);opacity:.9}
.wordmark{font-weight:650;letter-spacing:-.01em;font-size:clamp(15px,1.25vw,21px);text-align:center}
.logo-cell em{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,5vh,56px)}
.card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:28px;display:flex;flex-direction:column;gap:14px;min-height:clamp(200px,28vh,280px);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.card-n{font-size:clamp(40px,3.6vw,64px);font-weight:700;letter-spacing:-.05em;color:var(--faint);line-height:1}
.card .tag{align-self:flex-start;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.card h3{font-size:clamp(20px,1.6vw,28px);margin-top:auto}

/* ranking */
.medals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.medal{border:1px solid var(--line);border-radius:12px;padding:24px 20px;background:var(--surface);text-align:center}
.medal b{display:block;font-size:clamp(40px,3.8vw,68px);letter-spacing:-.04em;color:var(--accent);line-height:1}
.medal span{display:block;margin-top:10px;color:var(--mute);font-size:15px}

/* timeline */
.tl{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:clamp(40px,8vh,90px)}
.tl-line{position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line)}
.tl-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 30%,transparent),var(--accent));transition:width 1.8s cubic-bezier(.65,0,.35,1) .3s}
.played .tl-line i{width:calc((100% - 80px) * 5 / 6 + 80px)}
.tl-item{position:relative;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(16px);transition:all .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--d)}
.played .tl-item{opacity:1;transform:none}
.tl-dot{width:15px;height:15px;border-radius:50%;background:var(--bg);border:2px solid var(--faint)}
.tl-item.now .tl-dot{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 20%,transparent)}
.tl-year{font-size:clamp(28px,2.6vw,44px);font-weight:650;letter-spacing:-.03em;margin-top:8px}
.tl-item.now .tl-year{color:var(--accent)}
.tl-logo{height:34px;display:flex;align-items:center}
.tl-logo img{max-height:30px;max-width:130px}
.tl-logo .wordmark{font-size:clamp(15px,1.15vw,19px);text-align:left}
.tl-role{font-size:clamp(14px,1vw,16px);color:var(--mute);line-height:1.4}

/* process */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:clamp(36px,7vh,80px);counter-reset:s}
.step{border-top:2px solid var(--line);padding-top:20px;position:relative}
.step::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--accent);transition:width .8s cubic-bezier(.16,1,.3,1)}
.played .step::before{width:100%}
.played .step:nth-child(2)::before{transition-delay:.15s}.played .step:nth-child(3)::before{transition-delay:.3s}
.played .step:nth-child(4)::before{transition-delay:.45s}.played .step:nth-child(5)::before{transition-delay:.6s}.played .step:nth-child(6)::before{transition-delay:.75s}
.step-n{font-size:13px;letter-spacing:.14em;color:var(--accent);font-weight:600}
.step h3{margin:12px 0 10px;font-size:clamp(20px,1.6vw,28px)}

/* chips */
.chip-groups{display:grid;gap:32px;margin-top:clamp(32px,6vh,64px)}
.chip-group{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:24px;padding-top:24px;border-top:1px solid var(--line)}
.chip-group .label{margin:0}

/* gallery */
.gallery{display:grid;gap:16px;margin-top:clamp(28px,5vh,56px);height:clamp(260px,48vh,520px)}
.gallery.g1{grid-template-columns:1fr}.gallery.g2{grid-template-columns:1fr 1fr}
.gallery.g3{grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr}.gallery.g3 .ph:first-child{grid-row:span 2}
.gallery.g4{grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:1fr 1fr}.gallery.g4 .ph:first-child{grid-row:span 2}
.ph{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 6s ease-out}
.played .ph img{transform:scale(1)}
.ph-hint{display:none;position:absolute;inset:0;place-items:center;font-size:13px;color:rgba(255,255,255,.28);letter-spacing:.04em}
.ph.missing .ph-hint{display:grid}
.ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 16px;font-size:15px;background:linear-gradient(transparent,rgba(0,0,0,.7))}

/* credentials */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(32px,6vh,64px)}
.col{border-top:1px solid var(--line);padding-top:24px}
.cred{margin-bottom:20px}
.cred b{display:block;font-size:clamp(17px,1.3vw,22px);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.cred span{display:block;margin-top:4px;font-size:15px;color:var(--mute)}

/* company */
.why-logo{margin-bottom:28px}
.big-logo img{max-height:56px;max-width:240px}
.big-logo .wordmark{font-size:28px}
.why-pt{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:22px 0;border-top:1px solid var(--line)}
.why-pt h3{margin-bottom:6px}
.match{margin-top:clamp(28px,5vh,56px);display:grid}
.match-h{display:grid;grid-template-columns:1fr 60px 1.25fr;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-bottom:12px}
.match-h span:last-child{grid-column:3}
.match-r{display:grid;grid-template-columns:1fr 60px 1.25fr;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.need{font-size:clamp(17px,1.35vw,23px);font-weight:600;letter-spacing:-.01em;padding-right:16px}
.arrow{color:var(--accent);font-size:22px}
.proof{color:var(--mute);font-size:clamp(15px,1.1vw,19px);line-height:1.45}

/* closing */
.contact{display:flex;flex-wrap:wrap;gap:12px;margin-top:48px}
.contact a{text-decoration:none;padding:12px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:16px;transition:.25s}
.contact a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  html,body{overflow:hidden}
  .slide{overflow-y:auto;justify-content:flex-start;padding-top:84px}
  .split,.net-split{grid-template-columns:1fr;gap:24px}
  .stat-row{grid-template-columns:1fr 1fr}
  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .cards,.cols,.medals{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .tl{grid-template-columns:1fr 1fr;row-gap:28px}.tl-line{display:none}
  .shelf{display:none}
  .pipe-head{flex-direction:column;align-items:flex-start}
  .bar-row{grid-template-columns:90px 1fr 60px}
  .chip-group{grid-template-columns:1fr}
  .match-h{display:none}.match-r{grid-template-columns:1fr}.arrow{display:none}
  .gallery{height:auto;grid-template-columns:1fr!important;grid-template-rows:none!important}.ph{aspect-ratio:4/3}.ph:first-child{grid-row:auto!important}
  #dots{display:none}
  .net{max-height:none}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}