:root{--ink:#101728;--muted:#647089;--line:#dce3ef;--blue:#356df3;--cyan:#20b9d1;--violet:#7657ed;--lime:#b6ef5b;--paper:#f8faff;--max:1280px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:"Be Vietnam Pro",sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}.topbar{position:fixed;z-index:20;top:0;left:0;right:0;height:76px;padding:0 38px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(130,145,175,.2);background:rgba(248,250,255,.72);backdrop-filter:blur(18px)}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--ink);font-size:.76rem;font-weight:800;letter-spacing:.08em}.brand>i{width:20px;height:20px;border:5px solid var(--blue);border-radius:50%;box-shadow:10px 0 0 -5px var(--cyan)}.brand span span{color:var(--blue)}.topbar>p{font-size:.65rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}.counter{display:flex;gap:7px;align-items:center;font-size:.72rem;color:#8490a8}.counter b{font-size:1.05rem;color:var(--ink)}.deck{width:100%;height:100%;overflow:hidden;touch-action:none;cursor:grab}.deck.is-dragging{cursor:grabbing}.track{height:100%;display:flex;will-change:transform;transition:transform .75s cubic-bezier(.72,0,.18,1)}.deck.is-dragging .track{transition:none}.slide{position:relative;flex:0 0 100vw;width:100vw;height:100dvh;min-height:560px;overflow:hidden;display:grid;place-items:center;padding:100px 7vw 90px;background:var(--paper)}.slide:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(53,109,243,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(53,109,243,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent)}.content{position:relative;z-index:2;width:min(100%,var(--max));margin:auto}.eyebrow{margin:0 0 30px;text-transform:uppercase;letter-spacing:.18em;font-size:.65rem;font-weight:700;color:var(--blue)}.eyebrow span{display:inline-grid;place-items:center;width:34px;height:24px;margin-right:11px;border-radius:15px;background:#e6edff;color:var(--blue)}h1,h2{margin:0;font-weight:700;letter-spacing:-.055em;line-height:1.12}h1{font-size:clamp(3.6rem,7.4vw,7.8rem)}h2{font-size:clamp(3rem,6.2vw,6.8rem)}h1 em,h2 em,.statement em{font-style:normal;color:var(--blue)}.lead{max-width:820px;margin:32px 0 0;color:var(--muted);font-size:clamp(.9rem,1.3vw,1.12rem);line-height:1.8}.hero-content{padding-right:25%}.hint{margin-top:55px;display:flex;gap:15px;align-items:center;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em}.hint i{font-style:normal;font-size:1.5rem;color:var(--blue);animation:nudge 1.5s ease-in-out infinite}.system-orbit{position:absolute;right:7vw;top:50%;transform:translateY(-45%);width:min(34vw,500px);aspect-ratio:1;border:1px solid rgba(53,109,243,.2);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(53,109,243,.12),transparent 65%)}.system-orbit:before,.system-orbit:after{content:"";position:absolute;border:1px dashed rgba(53,109,243,.24);border-radius:50%}.system-orbit:before{inset:15%}.system-orbit:after{inset:32%}.system-orbit b{z-index:2;font-size:1.1rem;color:var(--blue)}.system-orbit span{position:absolute;padding:8px 12px;border:1px solid var(--line);background:#fff;border-radius:30px;font-size:.62rem;box-shadow:0 10px 35px rgba(35,65,130,.09)}.system-orbit span:nth-child(1){top:1%;left:42%}.system-orbit span:nth-child(2){top:31%;right:-5%}.system-orbit span:nth-child(3){bottom:12%;right:6%}.system-orbit span:nth-child(4){bottom:10%;left:6%}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:9vw;align-items:center}.split.reverse{grid-template-columns:1.1fr .9fr}.statement{margin:30px 0 0;color:var(--muted);font-size:clamp(1.2rem,2.3vw,2.1rem);line-height:1.5}.logic-flow{display:grid;gap:14px}.logic-flow article{padding:24px 28px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(41,68,125,.08);display:grid;grid-template-columns:50px 1fr;gap:3px 15px}.logic-flow article b{grid-row:1/3;color:var(--blue);font-size:1.5rem}.logic-flow article span{font-weight:700}.logic-flow article small{color:var(--muted)}.logic-flow>i{text-align:center;font-style:normal;color:var(--blue);transform:rotate(90deg)}.dark{color:#fff;background:#0f1730}.dark:after{background-image:linear-gradient(rgba(116,145,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(116,145,255,.07) 1px,transparent 1px)}.dark .eyebrow{color:#8eb2ff}.dark .eyebrow span{background:rgba(93,135,255,.16);color:#9abbff}.dark h2 em{color:#78d8e9}.dark .lead{margin-inline:auto;color:#aeb9d2}.centered{text-align:center}.insight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:55px;text-align:left}.insight-grid article{min-height:190px;padding:28px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:18px}.insight-grid article span{color:#7ad8e8;font-size:.65rem}.insight-grid article b,.insight-grid article small{display:block}.insight-grid article b{margin:35px 0 10px;font-size:1.1rem}.insight-grid article small{color:#aab5cf;line-height:1.6}.position-card{position:relative;min-height:470px;padding:50px;border-radius:30px;background:linear-gradient(145deg,#121b39,#253c85);color:#fff;box-shadow:0 35px 80px rgba(39,73,160,.25);overflow:hidden}.position-card>span{font-size:.67rem;text-transform:uppercase;letter-spacing:.17em;color:#91b4ff}.position-card h3{margin:70px 0 45px;font-size:clamp(2rem,4vw,4rem);line-height:1}.position-card p{display:inline-block;padding:8px 13px;margin:5px;border:1px solid rgba(255,255,255,.18);border-radius:30px;color:#c8d5f5;font-size:.7rem}.pulse{position:absolute;width:240px;height:240px;border:1px solid rgba(102,203,236,.35);border-radius:50%;right:-60px;bottom:-60px;box-shadow:0 0 0 35px rgba(102,203,236,.06),0 0 0 70px rgba(102,203,236,.035)}.gradient{background:linear-gradient(145deg,#f5f8ff 10%,#eaf7fb 100%)}.funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:58px}.funnel article{position:relative;padding:30px;min-height:200px;background:rgba(255,255,255,.75);border:1px solid rgba(53,109,243,.14);border-radius:20px}.funnel article:after{content:"→";position:absolute;right:-12px;top:48%;z-index:3;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;font-size:.7rem}.funnel article:last-child:after{display:none}.funnel span{font-size:.65rem;color:var(--blue)}.funnel b,.funnel small{display:block}.funnel b{margin:55px 0 8px;font-size:1.1rem}.funnel small{color:var(--muted)}.channel-map{position:relative;min-height:500px;display:grid;place-items:center}.channel-map:before,.channel-map:after{content:"";position:absolute;border:1px solid var(--line);border-radius:50%}.channel-map:before{width:430px;height:430px}.channel-map:after{width:270px;height:270px}.channel-map b{z-index:2;width:130px;height:130px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;box-shadow:0 20px 60px rgba(53,109,243,.3)}.channel-map span{position:absolute;padding:11px 18px;background:#fff;border:1px solid var(--line);border-radius:30px;font-size:.7rem;box-shadow:0 12px 35px rgba(34,66,130,.1)}.channel-map span:nth-child(2){top:3%;left:43%}.channel-map span:nth-child(3){top:24%;right:2%}.channel-map span:nth-child(4){bottom:18%;right:3%}.channel-map span:nth-child(5){bottom:2%;left:44%}.channel-map span:nth-child(6){bottom:20%;left:3%}.channel-map span:nth-child(7){top:22%;left:3%}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:60px;text-align:left}.metrics article{padding:30px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}.metrics small,.metrics b,.metrics span{display:block}.metrics small{color:#7bd4e4;text-transform:uppercase;letter-spacing:.12em}.metrics b{font-size:clamp(1.5rem,3vw,2.8rem);margin:50px 0 8px}.metrics span{color:#aab5cd;font-size:.7rem}.revenue-loop{position:relative;min-height:500px;display:grid;grid-template-columns:1fr 50px 1fr;align-items:center}.revenue-loop div{aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;border:1px solid var(--line);background:#fff;box-shadow:0 25px 70px rgba(37,70,140,.1)}.revenue-loop div span{font-weight:700;font-size:1.3rem}.revenue-loop div small{color:var(--muted)}.revenue-loop i{font-style:normal;text-align:center;font-size:1.8rem;color:var(--blue)}.revenue-loop b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:14px 18px;background:var(--blue);border-radius:30px;color:#fff;font-size:.75rem}.final{background:linear-gradient(145deg,#eef3ff,#f7fbff)}.final h2{font-size:clamp(2.7rem,5.6vw,6.2rem)}.final .lead{margin-inline:auto}.formula{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:50px;flex-wrap:wrap}.formula span,.formula b{padding:12px 19px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(35,65,130,.07);font-size:.75rem}.formula b{background:var(--blue);border-color:var(--blue);color:#fff}.formula i{font-style:normal;color:#8995ad}.restart{margin-top:45px;padding:13px 20px;border:1px solid var(--blue);border-radius:30px;background:transparent;color:var(--blue);font:600 .7rem "Be Vietnam Pro",sans-serif;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.mesh{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}.mesh-a{width:40vw;height:40vw;left:-20vw;bottom:-22vw;background:radial-gradient(circle,rgba(53,109,243,.18),transparent 70%)}.mesh-b{width:35vw;height:35vw;right:-18vw;top:-15vw;background:radial-gradient(circle,rgba(32,185,209,.18),transparent 70%)}.mesh-c{width:55vw;height:55vw;left:22vw;top:10%;background:radial-gradient(circle,rgba(118,87,237,.1),transparent 66%)}.controls{position:fixed;z-index:20;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:17px;padding:9px 14px;border:1px solid rgba(135,150,180,.24);background:rgba(255,255,255,.72);backdrop-filter:blur(16px);border-radius:30px;box-shadow:0 10px 35px rgba(35,65,125,.1)}.controls>button{width:34px;height:34px;border:0;border-radius:50%;background:#eff3fb;color:var(--ink);cursor:pointer}.controls>button:disabled{opacity:.3;cursor:not-allowed}.dots{display:flex;gap:7px}.dots button{width:6px;height:6px;padding:0;border:0;border-radius:10px;background:#b8c1d2;cursor:pointer;transition:.25s}.dots button.is-active{width:24px;background:var(--blue)}.progress{position:fixed;z-index:25;left:0;right:0;bottom:0;height:3px;background:rgba(90,110,150,.12)}.progress i{display:block;height:100%;width:11.111%;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .6s ease}.slide .content>*{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}.slide.is-active .content>*{opacity:1;transform:none}.slide.is-active .content>*:nth-child(2){transition-delay:.12s}.slide.is-active .content>*:nth-child(3){transition-delay:.22s}.slide.is-active .content>*:nth-child(4){transition-delay:.3s}@keyframes nudge{50%{transform:translateX(8px)}}@media(max-width:850px){.topbar{height:66px;padding:0 20px}.topbar>p{display:none}.slide{padding:86px 24px 88px}.hero-content{padding-right:0}.system-orbit{opacity:.35;width:75vw;right:-30vw}.split,.split.reverse{grid-template-columns:1fr;gap:35px}.logic-flow{grid-template-columns:repeat(3,1fr);gap:8px}.logic-flow article{display:block;padding:18px}.logic-flow article b{display:block;margin-bottom:15px}.logic-flow article small{display:block}.logic-flow>i{display:none}.insight-grid,.funnel,.metrics{grid-template-columns:repeat(2,1fr)}.position-card{min-height:320px;padding:32px}.position-card h3{margin:45px 0 25px}.channel-map,.revenue-loop{min-height:320px}.channel-map:before{width:310px;height:310px}.channel-map:after{width:190px;height:190px}.channel-map b{width:100px;height:100px}.revenue-loop{max-width:620px;margin:auto}.controls{bottom:max(14px,env(safe-area-inset-bottom))}}@media(max-width:560px){.brand{font-size:.65rem}.counter{font-size:.62rem}h1{font-size:clamp(2.8rem,14vw,4.2rem)}h2{font-size:clamp(2.35rem,11vw,3.6rem)}.lead{font-size:.8rem;margin-top:22px}.eyebrow{margin-bottom:22px}.hint{margin-top:35px}.system-orbit{display:none}.logic-flow{grid-template-columns:1fr}.logic-flow article{display:grid}.insight-grid,.funnel,.metrics{grid-template-columns:1fr 1fr;gap:8px;margin-top:28px}.insight-grid article,.funnel article,.metrics article{min-height:130px;padding:16px}.insight-grid article b,.funnel b,.metrics b{margin:23px 0 5px;font-size:.9rem}.insight-grid article small,.funnel small,.metrics span{font-size:.58rem}.funnel article:after{display:none}.position-card{min-height:280px}.channel-map{transform:scale(.8);margin:-30px}.revenue-loop{min-height:280px}.revenue-loop div span{font-size:.9rem}.formula{gap:8px;margin-top:28px}.formula span,.formula b{padding:9px 12px}.controls{gap:10px}.dots{gap:5px}.dots button{width:5px;height:5px}.dots button.is-active{width:16px}}@media(prefers-reduced-motion:reduce){.track,.slide .content>*,.progress i{transition:none}.hint i{animation:none}}
.profile-brand,
.author-chip,
.closing-author {
  display: flex;
  align-items: center;
}

.profile-brand {
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
}

.profile-brand img {
  width: 42px;
  height: 42px;
  padding: 2px;
  object-fit: cover;
  border: 1px solid rgba(53, 109, 243, 0.5);
  border-radius: 50%;
  background: #fff;
}

.profile-brand span,
.author-chip span,
.closing-author span {
  display: grid;
  line-height: 1.25;
}

.profile-brand b {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.profile-brand small {
  color: var(--blue);
  font-size: 0.58rem;
}

.author-chip {
  width: max-content;
  gap: 12px;
  margin-bottom: 34px;
  padding: 7px 14px 7px 7px;
  border: 1px solid rgba(53, 109, 243, 0.18);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 35px rgba(35, 65, 130, 0.08);
  backdrop-filter: blur(12px);
}

.author-chip img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
}

.author-chip b,
.closing-author b {
  color: var(--ink);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.author-chip small,
.closing-author small {
  color: var(--blue);
  font-size: 0.57rem;
}

.closing-author {
  width: max-content;
  gap: 12px;
  margin: 34px auto 0;
  padding: 8px 15px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 40px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(35, 65, 130, 0.08);
}

.closing-author img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
}

.slide-hero .content > .author-chip,
.final .content > .closing-author {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.slide-hero.is-active .content > .author-chip,
.final.is-active .content > .closing-author {
  opacity: 1;
  transform: none;
}

@media (max-width: 560px) {
  .profile-brand img {
    width: 38px;
    height: 38px;
  }

  .profile-brand b {
    font-size: 0.6rem;
  }

  .profile-brand small {
    font-size: 0.52rem;
  }

  .author-chip {
    margin-bottom: 22px;
  }

  .author-chip img {
    width: 36px;
    height: 36px;
  }
}
/* Fit every message inside one viewport without internal scrolling. */
.slide {
  min-height: 0;
  padding: 88px 6vw 76px;
}

.content {
  width: min(100%, 1160px);
  max-height: calc(100dvh - 164px);
}

h1 {
  font-size: clamp(2.7rem, min(5.6vw, 8.5vh), 5.7rem);
  line-height: 1.13;
}

h2,
.final h2 {
  font-size: clamp(2.35rem, min(4.6vw, 7.2vh), 4.8rem);
  line-height: 1.16;
}

.hero-content {
  padding-right: 24%;
}

.eyebrow {
  margin-bottom: clamp(14px, 2.5vh, 24px);
}

.lead {
  margin-top: clamp(16px, 3vh, 26px);
  line-height: 1.65;
}

.author-chip {
  margin-bottom: clamp(14px, 2.5vh, 24px);
}

.hint {
  margin-top: clamp(18px, 4vh, 38px);
}

.insight-grid,
.funnel,
.metrics {
  margin-top: clamp(22px, 5vh, 42px);
}

.insight-grid article,
.funnel article {
  min-height: 150px;
  padding: 22px;
}

.insight-grid article b,
.funnel article b {
  margin-top: clamp(20px, 4vh, 36px);
}

.metrics article {
  padding: 24px;
}

.metrics b {
  margin: clamp(22px, 5vh, 40px) 0 8px;
}

.position-card {
  min-height: min(410px, 58vh);
  padding: clamp(28px, 5vh, 44px);
}

.position-card h3 {
  margin: clamp(34px, 8vh, 62px) 0 clamp(22px, 5vh, 38px);
}

.channel-map,
.revenue-loop {
  min-height: min(410px, 58vh);
}

.formula {
  margin-top: clamp(20px, 4vh, 34px);
}

.closing-author {
  margin-top: clamp(16px, 3vh, 26px);
}

.restart {
  margin-top: clamp(14px, 2.5vh, 24px);
}

@media (max-width: 850px) {
  .slide {
    padding: 78px 24px 72px;
  }

  .content {
    max-height: calc(100dvh - 150px);
  }

  .hero-content {
    padding-right: 0;
  }

  .split,
  .split.reverse {
    gap: clamp(18px, 4vh, 30px);
  }
}

@media (max-width: 560px) {
  .slide {
    padding: 72px 18px 68px;
  }

  .content {
    max-height: calc(100dvh - 136px);
  }

  h1 {
    font-size: clamp(2.35rem, min(11vw, 7.6vh), 3.5rem);
  }

  h2,
  .final h2 {
    font-size: clamp(2rem, min(9.3vw, 6.8vh), 3.05rem);
  }

  .lead {
    font-size: 0.72rem;
    line-height: 1.55;
  }

  .statement {
    margin-top: 16px;
    font-size: clamp(1rem, 4.6vw, 1.4rem);
  }

  .insight-grid,
  .funnel,
  .metrics {
    margin-top: 18px;
  }

  .insight-grid article,
  .funnel article,
  .metrics article {
    min-height: 112px;
    padding: 13px;
  }

  .position-card {
    min-height: min(250px, 42vh);
  }

  .channel-map,
  .revenue-loop {
    min-height: min(270px, 43vh);
  }
}

/* Short laptops, landscape tablets and rotated phones. */
@media (max-height: 720px) {
  .topbar {
    height: 60px;
  }

  .profile-brand img {
    width: 36px;
    height: 36px;
  }

  .slide {
    padding-top: 68px;
    padding-bottom: 58px;
  }

  .content {
    max-height: calc(100dvh - 126px);
  }

  h1 {
    font-size: clamp(2.3rem, min(5vw, 7.5vh), 4.2rem);
  }

  h2,
  .final h2 {
    font-size: clamp(2rem, min(4.3vw, 6.4vh), 3.7rem);
  }

  .author-chip {
    margin-bottom: 12px;
    padding-block: 5px;
  }

  .author-chip img {
    width: 34px;
    height: 34px;
  }

  .eyebrow {
    margin-bottom: 12px;
  }

  .lead {
    margin-top: 14px;
    font-size: 0.75rem;
  }

  .hint {
    margin-top: 16px;
  }

  .insight-grid,
  .funnel,
  .metrics {
    margin-top: 18px;
  }

  .insight-grid article,
  .funnel article,
  .metrics article {
    min-height: 120px;
    padding: 15px;
  }

  .insight-grid article b,
  .funnel article b,
  .metrics article b {
    margin-top: 18px;
  }

  .position-card,
  .channel-map,
  .revenue-loop {
    min-height: min(320px, 50vh);
  }

  .position-card h3 {
    margin: 30px 0 20px;
  }

  .controls {
    bottom: 10px;
    padding-block: 6px;
  }

  .controls > button {
    width: 30px;
    height: 30px;
  }
}

@media (max-height: 580px) and (orientation: landscape) {
  .topbar > p,
  .hint {
    display: none;
  }

  .slide {
    padding: 58px 28px 48px;
  }

  .content {
    max-height: calc(100dvh - 106px);
  }

  h1 {
    font-size: clamp(2rem, 6.5vh, 3rem);
  }

  h2,
  .final h2 {
    font-size: clamp(1.8rem, 5.8vh, 2.7rem);
  }

  .split,
  .split.reverse {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5vw;
  }

  .logic-flow {
    grid-template-columns: repeat(3, 1fr);
  }

  .logic-flow article {
    padding: 12px;
  }

  .logic-flow > i {
    display: none;
  }

  .insight-grid,
  .funnel,
  .metrics {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 12px;
  }

  .insight-grid article,
  .funnel article,
  .metrics article {
    min-height: 100px;
    padding: 12px;
  }

  .channel-map,
  .revenue-loop,
  .position-card {
    min-height: 240px;
  }

  .closing-author {
    margin-top: 10px;
  }

  .restart {
    margin-top: 8px;
  }
}