@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#1a1008;--surface:#312E81;
  --purple:#6C63FF;--orange:#FF4A00;
  --text:#F5F0EB;--dim:rgba(245,240,235,.35);--mid:rgba(245,240,235,.6);
  --border:rgba(245,240,235,.07);
  --mono:'Space Grotesk',system-ui,sans-serif;
  --italic:'Instrument Serif',Georgia,serif;
}

html,body{width:1920px;height:1080px;overflow:hidden;background:var(--bg);font-family:var(--mono);color:var(--text)}

/* ── TEXTURE ── */
body::before{content:'';position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.035;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── DIAGONAL ACCENT LINE ── */
body::after{content:'';position:fixed;z-index:9991;pointer-events:none;
  width:2px;height:300%;top:-100%;left:62%;
  background:linear-gradient(180deg,transparent,var(--purple),var(--orange),transparent);
  transform:rotate(25deg);opacity:.06}

/* ── MESH BG ── */
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mesh i{position:absolute;border-radius:50%;filter:blur(160px);animation:drift 20s ease-in-out infinite alternate}
.mesh i:nth-child(1){width:900px;height:900px;background:rgba(108,99,255,.07);top:-30%;right:-10%}
.mesh i:nth-child(2){width:700px;height:700px;background:rgba(255,74,0,.06);bottom:-20%;left:-5%;animation-delay:-7s}
.mesh i:nth-child(3){width:500px;height:500px;background:rgba(61,41,20,.15);top:40%;left:40%;animation-delay:-14s}
@keyframes drift{to{transform:translate(60px,-40px) scale(1.15)}}

/* ── SCENE ENGINE ── */
.sc{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  transition:opacity .65s cubic-bezier(.4,0,.2,1)}
.sc.on{opacity:1;z-index:2;pointer-events:auto}

/* Per-scene animation resets */
.sc:not(.on) [data-a]{opacity:0;transform:none;animation:none!important}

/* ── ANIMATION ATOMS ── */
@keyframes wipeR{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes wipeL{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes wipeUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes slideR{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideL{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes expandW{from{width:0}to{width:100%}}
@keyframes growH{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rotIn{from{opacity:0;transform:rotate(-4deg) scale(.9)}to{opacity:1;transform:rotate(0) scale(1)}}

.sc.on [data-a="wr"]{animation:wipeR .8s cubic-bezier(.16,1,.3,1) both}
.sc.on [data-a="wl"]{animation:wipeL .8s cubic-bezier(.16,1,.3,1) both}
.sc.on [data-a="wu"]{animation:wipeUp .7s cubic-bezier(.16,1,.3,1) both}
.sc.on [data-a="sr"]{animation:slideR .7s cubic-bezier(.16,1,.3,1) both}
.sc.on [data-a="sl"]{animation:slideL .7s cubic-bezier(.16,1,.3,1) both}
.sc.on [data-a="su"]{animation:slideUp .7s cubic-bezier(.16,1,.3,1) both}
.sc.on [data-a="sd"]{animation:slideDown .7s cubic-bezier(.16,1,.3,1) both}
.sc.on [data-a="si"]{animation:scaleIn .7s cubic-bezier(.16,1,.3,1) both}
.sc.on [data-a="fi"]{animation:fadeIn .9s ease both}
.sc.on [data-a="ri"]{animation:rotIn .8s cubic-bezier(.16,1,.3,1) both}

[data-d="1"]{animation-delay:.1s!important}[data-d="2"]{animation-delay:.2s!important}
[data-d="3"]{animation-delay:.3s!important}[data-d="4"]{animation-delay:.45s!important}
[data-d="5"]{animation-delay:.6s!important}[data-d="6"]{animation-delay:.75s!important}
[data-d="7"]{animation-delay:.9s!important}[data-d="8"]{animation-delay:1.05s!important}

/* ── FIXED CHROME ── */
.chrome-top{position:fixed;top:0;left:0;right:0;height:72px;z-index:9999;display:flex;align-items:center;justify-content:space-between;padding:0 56px}
.logo{font-size:13px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--dim)}
.logo b{color:var(--purple);font-weight:700}.logo span{color:var(--orange)}
.counter{font-size:42px;font-weight:300;color:rgba(245,240,235,.12);letter-spacing:-2px;
  position:fixed;top:32px;right:56px;z-index:9999;font-family:var(--italic);font-style:italic}

.progress{position:fixed;top:0;left:0;height:2px;z-index:99999;
  background:#6366F1;transition:width .65s cubic-bezier(.4,0,.2,1)}

.nav-strip{position:fixed;bottom:0;left:0;right:0;height:56px;z-index:9999;display:flex;align-items:center;justify-content:center;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;border:none;padding:0;background:var(--dim);cursor:pointer;transition:all .4s}
.dot.on{background:var(--text);width:28px;border-radius:3px}
.arr{position:fixed;z-index:9999;bottom:14px;width:32px;height:28px;border:1px solid var(--border);border-radius:8px;
  background:transparent;color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}
.arr:hover{color:var(--text);border-color:#6366F1}
.arr svg{width:14px;height:14px}
.arr.l{right:104px}.arr.r{right:56px}

/* ── S1 INTRO — centered brand reveal ── */
.s1{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}
.s1-tag{font-size:11px;font-weight:600;letter-spacing:6px;text-transform:uppercase;color:var(--mid);margin-bottom:56px}
.s1-brands{display:flex;align-items:center;gap:48px;margin-bottom:40px}
.s1-mihu{font-family:var(--mono);font-size:72px;font-weight:700;color:#F5F0EB!important;letter-spacing:-2px}
.s1-x{font-family:var(--italic);font-style:italic;font-size:32px;color:var(--dim);padding:0 4px}
.s1-zapier-mark{display:flex;align-items:center;gap:14px}
.s1-zapier-mark .zap-bolt{width:52px;height:52px}
.s1-zapier-mark .zap-word{font-family:var(--mono);font-size:68px;font-weight:700;color:#FF4A00;letter-spacing:-2px}
.s1-desc{font-size:20px;font-weight:400;color:var(--mid);line-height:1.7;max-width:600px;margin:0 auto 56px}
.s1-divider{width:48px;height:2px;background:#6366F1;margin:0 auto 40px;border-radius:1px}
.s1-stats{display:flex;gap:56px;justify-content:center}
.s1-stat{text-align:center}
.s1-stat-n{font-family:var(--italic);font-style:italic;font-size:52px;line-height:1}
.s1-stat-n.p{color:#6366F1}.s1-stat-n.o{color:#6366F1}
.s1-stat-l{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-top:8px}

/* ── S2 CAPABILITIES — editorial list ── */
.s2{padding:80px 120px}
.s2-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px;border-bottom:1px solid var(--border);padding-bottom:32px}
.s2-title{font-family:var(--italic);font-style:italic;font-size:64px;line-height:1}
.s2-sub{font-size:14px;color:var(--dim);letter-spacing:3px;text-transform:uppercase;text-align:right}
.s2-list{display:flex;flex-direction:column}
.s2-row{display:flex;align-items:center;padding:24px 0;border-bottom:1px solid var(--border);gap:40px}
.s2-num{font-family:var(--italic);font-style:italic;font-size:48px;color:rgba(245,240,235,.08);width:80px;flex-shrink:0}
.s2-name{font-size:24px;font-weight:600;width:340px;flex-shrink:0}
.s2-name.p{color:#6366F1}.s2-name.o{color:#6366F1}
.s2-desc{font-size:15px;color:var(--dim);line-height:1.6;flex:1}
.s2-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.s2-dot.p{background:#6366F1}.s2-dot.o{background:#6366F1}

/* ── S3 TRIGGERS — left strip + bleed right ── */
.s3{display:flex;align-items:stretch}
.s3-strip{width:340px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;padding:0 48px 0 80px;
  border-right:1px solid var(--border)}
.s3-tag{font-size:11px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:#6366F1;margin-bottom:16px}
.s3-title{font-family:var(--italic);font-style:italic;font-size:48px;line-height:1.1;margin-bottom:20px}
.s3-desc{font-size:15px;color:var(--dim);line-height:1.7}
.s3-embed{flex:1;position:relative;overflow:hidden;background:#0a0a0a}
.s3-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* ── S4 ACTIONS — bleed left + right strip ── */
.s4{display:flex;align-items:stretch;flex-direction:row-reverse}
.s4-strip{width:380px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;padding:0 80px 0 48px;
  border-left:1px solid var(--border)}
.s4-count{font-family:var(--italic);font-style:italic;font-size:160px;color:rgba(108,99,255,.08);line-height:.8;margin-bottom:8px}
.s4-tag{font-size:11px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:#6366F1;margin-bottom:16px}
.s4-title{font-family:var(--italic);font-style:italic;font-size:44px;line-height:1.1;margin-bottom:20px}
.s4-desc{font-size:15px;color:var(--dim);line-height:1.7}
.s4-embed{flex:1;position:relative;overflow:hidden;background:#0a0a0a}
.s4-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* ── S5 UC1 — full bleed embed + floating panel ── */
.s5{position:relative}
.s5-bg{position:absolute;inset:0;overflow:hidden;background:#0a0a0a}
.s5-bg iframe{position:absolute;top:50%;left:50%;width:110%;height:110%;transform:translate(-50%,-50%);border:0}
.s5-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(26,16,8,.92) 0%,rgba(26,16,8,.4) 50%,transparent 100%)}
.s5-panel{position:absolute;left:72px;bottom:80px;width:520px;
  padding:44px;border-radius:24px;border:1px solid var(--border);
  background:rgba(26,16,8,.8);backdrop-filter:blur(32px)}
.s5-num{font-family:var(--italic);font-style:italic;font-size:120px;color:rgba(108,99,255,.1);line-height:.7;margin-bottom:4px}
.s5-tag{font-size:11px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:#6366F1;margin-bottom:12px}
.s5-title{font-family:var(--italic);font-style:italic;font-size:36px;line-height:1.1;margin-bottom:28px}
.s5-flow{display:flex;gap:12px}
.s5-step{flex:1;padding:16px;border-radius:12px;border:1px solid var(--border);background:rgba(245,240,235,.02)}
.s5-step-n{font-size:11px;font-weight:700;margin-bottom:6px}
.s5-step-n.p{color:#6366F1}.s5-step-n.o{color:#6366F1}
.s5-step-t{font-size:13px;font-weight:600;margin-bottom:2px}
.s5-step-d{font-size:11px;color:var(--dim)}

/* ── S6 UC2 — hard vertical split ── */
.s6{display:flex}
.s6-left{width:50%;height:100%;position:relative;overflow:hidden;background:#0a0a0a}
.s6-left iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.s6-right{width:50%;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 80px;position:relative}
.s6-right::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,transparent,var(--orange),var(--purple),transparent)}
.s6-num{font-family:var(--italic);font-style:italic;font-size:180px;color:rgba(255,74,0,.06);line-height:.7;margin-bottom:0}
.s6-tag{font-size:11px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:#6366F1;margin-bottom:12px}
.s6-title{font-family:var(--italic);font-style:italic;font-size:42px;line-height:1.1;margin-bottom:40px}
.s6-steps{display:flex;flex-direction:column;gap:20px}
.s6-step{display:flex;align-items:flex-start;gap:20px}
.s6-step-bar{width:3px;height:48px;border-radius:2px;flex-shrink:0;margin-top:4px}
.s6-step-bar.p{background:#6366F1}.s6-step-bar.o{background:#6366F1}
.s6-step-title{font-size:18px;font-weight:600}
.s6-step-desc{font-size:14px;color:var(--dim);margin-top:2px}

/* ── S7 UC3 — landscape embed top + horizontal timeline bottom ── */
.s7{display:flex;flex-direction:column}
.s7-embed{flex:1;position:relative;overflow:hidden;background:#0a0a0a;border-bottom:1px solid var(--border)}
.s7-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.s7-bar{height:220px;flex-shrink:0;display:flex;align-items:center;padding:0 80px;gap:0;position:relative}
.s7-bar::before{content:'';position:absolute;top:50%;left:80px;right:80px;height:1px;background:var(--border)}
.s7-info{width:400px;flex-shrink:0;padding-right:48px}
.s7-tag{font-size:11px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:#6366F1;margin-bottom:8px}
.s7-title{font-family:var(--italic);font-style:italic;font-size:32px;line-height:1.1}
.s7-timeline{flex:1;display:flex;justify-content:space-between;position:relative;z-index:1}
.s7-node{display:flex;flex-direction:column;align-items:center;gap:10px}
.s7-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);background:var(--bg)}
.s7-dot.p{border-color:#6366F1}.s7-dot.o{border-color:#6366F1}
.s7-node-t{font-size:13px;font-weight:600;text-align:center;max-width:160px}
.s7-node-d{font-size:11px;color:var(--dim);text-align:center;max-width:160px}

/* ── S8 METRICS — horizontal bands ── */
.s8{display:flex;flex-direction:column;justify-content:center;padding:0 120px}
.s8-row{display:flex;align-items:baseline;justify-content:space-between;padding:28px 0;border-bottom:1px solid var(--border);overflow:hidden}
.s8-row:first-child{border-top:1px solid var(--border)}
.s8-val{font-family:var(--italic);font-style:italic;font-size:128px;line-height:1;letter-spacing:-4px}
.s8-val.p{color:#6366F1}.s8-val.o{color:#6366F1}
.s8-label{font-size:18px;color:var(--dim);letter-spacing:3px;text-transform:uppercase;text-align:right}

/* ── S9 CTA — massive type ── */
.s9{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.s9-pre{font-size:11px;font-weight:700;letter-spacing:6px;text-transform:uppercase;color:var(--dim);margin-bottom:24px}
.s9-headline{font-family:var(--italic);font-style:italic;font-size:120px;line-height:.92;margin-bottom:12px}
.s9-headline em{font-style:italic;color:#6366F1}
.s9-sub{font-size:18px;color:var(--dim);margin-bottom:56px;letter-spacing:1px}
.s9-btn{display:inline-flex;align-items:center;gap:10px;
  padding:18px 44px;border:1px solid #6366F1;border-radius:60px;font-size:15px;font-weight:600;font-family:var(--mono);
  color:var(--text);background:transparent;text-decoration:none;letter-spacing:1px;
  transition:all .4s;position:relative;overflow:hidden}
.s9-btn::before{content:'';position:absolute;inset:0;background:var(--purple);opacity:0;transition:opacity .4s;border-radius:60px}
.s9-btn:hover::before{opacity:1}
.s9-btn span,.s9-btn svg{position:relative;z-index:1}
.s9-btn svg{width:16px;height:16px}
.s9-glow{position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(108,99,255,.15),transparent 70%);
  animation:breathe 3s ease-in-out infinite;pointer-events:none}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.2);opacity:1}}
.s9-url{margin-top:32px;font-size:12px;color:var(--dim);letter-spacing:4px;text-transform:uppercase}