/* ==========================================================================
   Orca — Presentación de producto · Emma & Martín
   1920×1080 slides · HTML first → PDF (see export-pdf.sh)
   Direction: "Name-badge editorial" — navy cinema, mint for Emma, violet for
   Martín, Instrument Serif headlines, mono nameplates, arch portrait windows.
   ========================================================================== */

:root {
  --navy: #02102b;
  --navy-2: #0a1f3d;
  --navy-3: #073270;
  --abyss: #010810;
  --mint: #80ffdb;
  --mint-2: #5ce0c0;
  --mint-deep: #087f67;
  --mint-wash: #e5fff8;
  --violet: #8c7cff;
  --violet-soft: #b3a8ff;
  --violet-deep: #5a4bcc;
  --violet-wash: #eeebff;
  --paper: #f7f9fc;
  --ink: #02102b;
  --muted: #64748b;
  --line: rgba(2, 16, 43, 0.12);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #05070d; }
body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
img, svg, video { display: block; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Stage / modes ---------- */
.stage { position: fixed; inset: 0; overflow: hidden; background: #05070d; }
.deck {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transform-origin: center center;
}
.slide {
  position: absolute; inset: 0; width: 1920px; height: 1080px;
  overflow: hidden; background: var(--navy); color: #fff;
  opacity: 0; visibility: hidden; transition: opacity 0.55s ease, visibility 0.55s;
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide.light { background: var(--paper); color: var(--ink); }

body[data-mode="scroll"] { overflow: auto; }
body[data-mode="scroll"] .stage { position: static; overflow: visible; padding: 36px 0 80px; background: #0b0f1a; min-height: 100%; }
body[data-mode="scroll"] .deck {
  position: static; transform: none; width: auto; height: auto;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
body[data-mode="scroll"] .slide {
  position: relative; opacity: 1; visibility: visible; zoom: var(--sz, 0.5); flex: none;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}

/* grain + vignette on every slide */
.slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 60;
  background: url("assets/img/noise.png"); opacity: 0.55;
}
.slide.light::after { opacity: 0.25; }

/* ---------- Reveal choreography ---------- */
.r { opacity: 0; }
.is-active .r { animation: rise 0.95s var(--ease) both; animation-delay: calc(var(--i, 0) * 85ms + 140ms); }
.is-active .r.pop { animation-name: pop; }
@keyframes rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
body[data-mode="scroll"] .r { opacity: 1; animation: none !important; transform: none; }

/* ---------- Chrome (header / footer) ---------- */
.chrome { position: absolute; left: 104px; right: 104px; top: 50px; display: flex; justify-content: space-between; align-items: center; z-index: 30; }
.chrome .brand img { height: 28px; }
.tag { font: 500 17px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.62; }
.foot { position: absolute; left: 104px; right: 104px; bottom: 42px; display: flex; justify-content: space-between; font: 500 15px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.4; z-index: 30; }

/* ---------- Atmosphere ---------- */
.glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.glow.mint { background: radial-gradient(closest-side, rgba(128, 255, 219, 0.34), rgba(128, 255, 219, 0) 100%); }
.glow.violet { background: radial-gradient(closest-side, rgba(140, 124, 255, 0.42), rgba(140, 124, 255, 0) 100%); }
.glow.blue { background: radial-gradient(closest-side, rgba(7, 50, 112, 0.9), rgba(7, 50, 112, 0) 100%); }
.glow.mint-lt { background: radial-gradient(closest-side, rgba(128, 255, 219, 0.5), rgba(128, 255, 219, 0) 100%); }
.glow.violet-lt { background: radial-gradient(closest-side, rgba(140, 124, 255, 0.28), rgba(140, 124, 255, 0) 100%); }
.grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 20%, transparent 100%);
}
.light .grid-bg { background-image: linear-gradient(rgba(2, 16, 43, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(2, 16, 43, 0.045) 1px, transparent 1px); }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font: 600 19px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mint);
}
.eyebrow::before { content: ""; width: 44px; height: 2px; background: currentColor; opacity: 0.85; }
.light .eyebrow, .eyebrow.on-light { color: var(--mint-deep); }
.v .eyebrow { color: var(--violet-soft); }
.light.v .eyebrow { color: var(--violet-deep); }

.h { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; line-height: 0.98; text-wrap: balance; }
.h em { font-style: italic; color: var(--mint); }
.v .h em { color: var(--violet-soft); }
.light .h em { color: var(--mint-deep); }
.light.v .h em { color: var(--violet-deep); }
.h-xl { font-size: 144px; }
.h-l { font-size: 104px; }
.h-m { font-size: 84px; }
.h-s { font-size: 64px; }
.lead { font-size: 31px; line-height: 1.42; color: rgba(255, 255, 255, 0.78); text-wrap: pretty; }
.light .lead { color: #3b4a63; }
.mono { font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.dim { opacity: 0.6; }

/* nameplate chip — echoes the badge on Emma's scrubs */
.nameplate {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px; border-radius: 10px;
  font: 600 17px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); background: linear-gradient(180deg, #eaf6f3 0%, #bfe3da 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 18px -8px rgba(0, 0, 0, 0.5);
}
.nameplate.m { background: linear-gradient(180deg, #ece9ff 0%, #c6bfff 100%); }
.nameplate.n { background: linear-gradient(180deg, #eef1f6 0%, #cfd6e2 100%); }
.nameplate i { width: 9px; height: 9px; border-radius: 50%; background: var(--mint-deep); }
.nameplate.m i { background: var(--violet-deep); }
.nameplate.n i { background: #64748b; }

.pilltag { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; font: 600 16px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.pilltag.e { color: var(--mint); background: rgba(128, 255, 219, 0.12); border: 1px solid rgba(128, 255, 219, 0.35); }
.pilltag.m { color: var(--violet-soft); background: rgba(140, 124, 255, 0.14); border: 1px solid rgba(140, 124, 255, 0.4); }
.light .pilltag.e { color: var(--mint-deep); background: rgba(128, 255, 219, 0.28); border-color: rgba(8, 127, 103, 0.3); }
.light .pilltag.m { color: var(--violet-deep); background: rgba(140, 124, 255, 0.16); border-color: rgba(90, 75, 204, 0.3); }

/* cards */
.card {
  position: relative; border-radius: 30px; padding: 36px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.13);
}
.light .card { background: #fff; border-color: var(--line); box-shadow: 0 1px 0 rgba(2, 16, 43, 0.04), 0 30px 50px -34px rgba(2, 16, 43, 0.28); }

.icon-tile { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 34px; color: var(--mint); background: rgba(128, 255, 219, 0.12); border: 1px solid rgba(128, 255, 219, 0.3); }
.v .icon-tile { color: var(--violet-soft); background: rgba(140, 124, 255, 0.14); border-color: rgba(140, 124, 255, 0.38); }
.light .icon-tile { color: var(--mint-deep); background: var(--mint-wash); border-color: rgba(8, 127, 103, 0.22); }
.light.v .icon-tile { color: var(--violet-deep); background: var(--violet-wash); border-color: rgba(90, 75, 204, 0.25); }

.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cap { padding: 28px 34px 30px; display: flex; flex-direction: column; gap: 14px; min-height: 250px; }
.cap .icon-tile { width: 62px; height: 62px; font-size: 30px; border-radius: 20px; }
.cap .n { position: absolute; right: 30px; top: 28px; font: 500 17px/1 var(--mono); letter-spacing: 0.16em; opacity: 0.4; }
.cap h3 { font-size: 35px; line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; }
.cap p { font-size: 23px; line-height: 1.4; color: #4a5a73; }
.dark .cap p, .slide:not(.light) .cap p { color: rgba(255, 255, 255, 0.7); }

/* ==========================================================================
   S1 · Cover
   ========================================================================== */
.cover .copy { position: absolute; left: 104px; top: 190px; width: 1000px; z-index: 5; }
.cover .hbadge { display: flex; align-items: center; gap: 22px; margin-bottom: 44px; flex-wrap: wrap; }
.cover .hb-pill { display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px 14px 20px; border-radius: 999px; font-size: 24px; font-weight: 700; color: var(--mint); background: rgba(128, 255, 219, 0.1); border: 1.5px solid rgba(128, 255, 219, 0.45); }
.cover .hb-pill .ico { width: 26px; height: 26px; }
.cover .hb-proof { display: inline-flex; align-items: center; gap: 12px; font: 500 15px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.cover .hb-proof::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.cover .h { font-size: 104px; line-height: 1; }
.cover .lead { margin-top: 36px; max-width: 800px; font-size: 27px; }
.cover .byline { position: absolute; left: 104px; bottom: 96px; display: flex; gap: 40px; align-items: center; font: 500 17px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; z-index: 5; }
.cover .byline span { opacity: 0.55; }
.cover .byline b { font-weight: 600; color: var(--mint); }

.arch {
  position: absolute; overflow: hidden; border-radius: 200px 200px 40px 40px;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.arch.e { background: radial-gradient(120% 70% at 50% 18%, rgba(128, 255, 219, 0.7) 0%, rgba(30, 150, 140, 0.55) 38%, #07304a 78%, #051a30 100%); }
.arch.m { background: radial-gradient(120% 70% at 50% 18%, rgba(160, 145, 255, 0.78) 0%, rgba(90, 75, 204, 0.55) 38%, #17206a 78%, #0b1240 100%); }
.arch img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); max-width: none; }
.arch .plate { position: absolute; left: 22px; bottom: 22px; z-index: 3; }
.cover .arch-e { left: 1120px; top: 120px; width: 380px; height: 810px; }
.cover .arch-e img { width: 540px; }
.cover .arch-m { left: 1450px; top: 215px; width: 380px; height: 770px; border: 8px solid var(--navy); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.14); }
.cover .arch-m img { width: 520px; }
.floatchip {
  position: absolute; z-index: 8; display: flex; align-items: center; gap: 14px;
  padding: 14px 20px 14px 14px; border-radius: 20px; background: #fff; color: var(--ink);
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.65);
}
.floatchip .dot { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 22px; }
.floatchip.e .dot { background: var(--mint); color: var(--navy); }
.floatchip.m .dot { background: var(--violet); color: #fff; }
.floatchip b { display: block; font-size: 20px; line-height: 1.15; }
.floatchip span { display: block; font-size: 16px; color: var(--muted); margin-top: 3px; }

/* ==========================================================================
   S2 · Problem (orbit)
   ========================================================================== */
.problem .copy { position: absolute; left: 104px; top: 168px; width: 800px; z-index: 5; }
.problem .h { margin: 34px 0 44px; }
.problem .closing { position: absolute; left: 104px; bottom: 120px; width: 760px; font-size: 30px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); z-index: 5; }
.problem .closing b { color: var(--mint); font-weight: 700; }
.orbit { position: absolute; left: 1390px; top: 556px; width: 0; height: 0; z-index: 4; }
.orbit .spin { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: spin 140s linear infinite; }
.orbit .ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(128, 255, 219, 0.28); }
.orbit .ring.a { width: 640px; height: 640px; left: -320px; top: -320px; }
.orbit .ring.b { width: 430px; height: 430px; left: -215px; top: -215px; border-style: solid; border-color: rgba(255, 255, 255, 0.07); }
.orbit .chip {
  position: absolute; left: 0; top: 0;
  transform: rotate(var(--a)) translateX(320px) rotate(calc(var(--a) * -1)) translate(-50%, -50%);
}
.orbit .chip > span {
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 15px 24px 15px 18px; border-radius: 999px; font-size: 24px; font-weight: 600;
  background: rgba(10, 31, 61, 0.92); border: 1px solid rgba(255, 255, 255, 0.16);
  animation: spin 140s linear infinite reverse;
}
.orbit .chip .ico { color: var(--mint); font-size: 24px; }
.orbit .core {
  position: absolute; left: -120px; top: -120px; width: 240px; height: 240px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #12356b, #07204a 70%); border: 1.5px solid rgba(128, 255, 219, 0.55);
  box-shadow: 0 0 0 18px rgba(128, 255, 219, 0.06), 0 0 120px rgba(128, 255, 219, 0.2);
}
.orbit .core b { font: 400 112px/0.9 var(--serif); font-style: italic; color: #fff; }
.orbit .core small { margin-top: 8px; font: 500 15px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mint); }
@keyframes spin { to { transform: rotate(360deg); } }
body[data-mode="scroll"] .orbit .spin, body[data-mode="scroll"] .orbit .chip > span { animation: none; }

/* ==========================================================================
   S3 · Doctor → CEO
   ========================================================================== */
.ceo .head { position: absolute; left: 104px; top: 150px; width: 1500px; z-index: 5; }
.ceo .h { margin-top: 28px; }
.ceo .duo { position: absolute; left: 104px; right: 104px; top: 410px; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; z-index: 5; }
.ceo .col { border-radius: 34px; padding: 44px 52px 48px; height: 460px; }
.ceo .col.then { background: #eceff4; border: 1px solid var(--line); }
.ceo .col.now { background: linear-gradient(160deg, #0a1f3d, #02102b 70%); color: #fff; box-shadow: 0 50px 70px -40px rgba(2, 16, 43, 0.7); position: relative; overflow: hidden; }
.ceo .col.now::before { content: ""; position: absolute; right: -160px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(128, 255, 219, 0.35), transparent); }
.ceo .col .lab { font: 600 18px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.ceo .col.then .lab { color: #7a879b; }
.ceo .col.now .lab { color: var(--mint); }
.ceo ul { list-style: none; margin-top: 34px; display: grid; gap: 22px; position: relative; }
.ceo li { display: flex; align-items: center; gap: 20px; font-size: 36px; font-weight: 600; letter-spacing: -0.01em; }
.ceo li .mk { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 22px; }
.ceo .then li { color: #4a5a73; }
.ceo .then .mk { background: #fff; color: #c2410c; border: 1px solid var(--line); }
.ceo .now .mk { background: var(--mint); color: var(--navy); }
.ceo .arrow { justify-self: center; width: 84px; height: 84px; border-radius: 50%; background: var(--navy); color: var(--mint); display: grid; place-items: center; font-size: 38px; box-shadow: 0 0 0 10px var(--paper), 0 20px 40px -14px rgba(2, 16, 43, 0.6); }
.ceo .insight { position: absolute; left: 104px; right: 104px; bottom: 100px; display: flex; align-items: center; gap: 28px; font-size: 32px; line-height: 1.35; color: #34445e; z-index: 5; }
.ceo .insight .bar { width: 6px; align-self: stretch; border-radius: 3px; background: var(--mint-deep); }
.ceo .insight b { color: var(--ink); }

/* ==========================================================================
   S4 · The system (platform + Emma + Martín)
   ========================================================================== */
.system .head { position: absolute; left: 104px; top: 150px; width: 1700px; z-index: 5; }
.system .h { margin-top: 26px; font-size: 92px; }
.system .eq { position: absolute; left: 104px; right: 104px; top: 404px; height: 500px; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: 470px 62px 1fr 62px 1fr; align-items: stretch; z-index: 5; }
.system .plus { align-self: center; justify-self: center; font: 400 64px/1 var(--serif); color: rgba(255, 255, 255, 0.4); }
.system .tile { border-radius: 34px; padding: 40px 42px; position: relative; overflow: hidden; }
.system .tile.plat { background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.16); }
.system .tile.e { background: linear-gradient(160deg, rgba(128, 255, 219, 0.28), rgba(8, 127, 103, 0.22) 55%, rgba(5, 40, 60, 0.9)); border: 1px solid rgba(128, 255, 219, 0.45); }
.system .tile.m { background: linear-gradient(160deg, rgba(140, 124, 255, 0.34), rgba(90, 75, 204, 0.22) 55%, rgba(12, 18, 64, 0.95)); border: 1px solid rgba(140, 124, 255, 0.5); }
.system .tile .k { font: 600 16px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
.system .tile h3 { margin-top: 20px; font: 400 72px/0.95 var(--serif); }
.system .tile p { margin-top: 18px; font-size: 25px; line-height: 1.4; color: rgba(255, 255, 255, 0.8); max-width: 330px; }
.system .tile ul { margin-top: 20px; list-style: none; display: grid; gap: 10px; font-size: 23px; color: rgba(255, 255, 255, 0.82); }
.system .tile ul li { display: flex; gap: 12px; align-items: center; }
.system .tile ul li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none; }
.system .tile .mk { width: 84px; height: 84px; border-radius: 28px; background: var(--mint); display: grid; place-items: center; }
.system .tile .mk img { width: 50px; }
.system .tile .cut { position: absolute; right: -30px; bottom: 0; width: 330px; z-index: 0; }
.system .tile .copy { position: relative; z-index: 2; }
.system .tile .chip-out { position: absolute; left: 42px; bottom: 36px; z-index: 3; }
.system .statement { position: absolute; left: 104px; right: 104px; bottom: 96px; display: flex; align-items: center; gap: 24px; font-size: 29px; color: rgba(255, 255, 255, 0.82); z-index: 5; }
.system .statement b { color: var(--mint); }
.system .statement .ico { font-size: 34px; color: var(--mint); }

/* ==========================================================================
   S5 · Meet the team
   ========================================================================== */
.team .head { position: absolute; left: 104px; top: 150px; right: 104px; display: flex; justify-content: space-between; align-items: flex-end; z-index: 5; }
.team .head .lead { max-width: 560px; font-size: 27px; }
.team .people { position: absolute; left: 104px; right: 104px; top: 372px; height: 618px; display: grid; grid-template-columns: 620px 620px 1fr; gap: 26px; z-index: 5; }
.person { position: relative; border-radius: 34px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); display: flex; flex-direction: column; }
.person.e { background: radial-gradient(90% 55% at 50% 0%, rgba(128, 255, 219, 0.5), rgba(8, 127, 103, 0.3) 45%, #062b3f 100%); }
.person.m { background: radial-gradient(90% 55% at 50% 0%, rgba(160, 145, 255, 0.55), rgba(90, 75, 204, 0.32) 45%, #111a5a 100%); }
.person.n { background: linear-gradient(180deg, #14233f, #0a1830); }
.person .pic { position: relative; height: 340px; flex: none; overflow: hidden; }
.person .pic img { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 440px; max-width: none; }
.person.n .pic img { width: 100%; top: -10px; left: 0; transform: none; height: 100%; object-fit: cover; object-position: 50% 12%; }
.person .pic::after { content: ""; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(180deg, transparent, rgba(2, 16, 43, 0.7)); }
.person .bd { padding: 6px 34px 30px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.person .nm { font: 400 82px/0.9 var(--serif); letter-spacing: -0.01em; }
.person.n .nm { font-size: 64px; }
.person .role { font: 600 15px/1.2 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8; }
.person .q { font-size: 23px; line-height: 1.42; color: rgba(255, 255, 255, 0.86); margin-top: auto; text-wrap: pretty; }
.person .where { position: absolute; top: 20px; right: 20px; z-index: 4; }
.person.e .role { color: var(--mint); }
.person.m .role { color: var(--violet-soft); }

/* ==========================================================================
   S6 · Videos
   ========================================================================== */
.videos .head { position: absolute; left: 104px; top: 150px; z-index: 5; }
.videos .h { margin-top: 26px; }
.videos .pair { position: absolute; left: 104px; right: 104px; top: 372px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; z-index: 5; }
.vid { display: flex; flex-direction: column; gap: 26px; }
.vid .frame { position: relative; border-radius: 30px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.9); }
.vid.e .frame { border: 2px solid rgba(128, 255, 219, 0.55); }
.vid.m .frame { border: 2px solid rgba(140, 124, 255, 0.65); }
.vid video, .vid .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 112px; height: 112px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 44px; color: var(--navy); background: rgba(255, 255, 255, 0.94); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); transition: transform 0.25s var(--ease); }
.vid .play:hover { transform: translate(-50%, -50%) scale(1.07); }
.vid .play svg { margin-left: 6px; }
.vid .frame.playing .play, .vid .frame.playing .poster { display: none; }
.vid .cap2 { display: flex; gap: 22px; align-items: flex-start; }
.vid .cap2 p { font-size: 25px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); font-family: var(--serif); font-size: 31px; font-style: italic; line-height: 1.32; }
.videos .hint { position: absolute; right: 104px; top: 168px; z-index: 6; font: 500 15px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.5; }

/* ==========================================================================
   Chapter dividers (Emma / Martín)
   ========================================================================== */
.chapter .ghost { position: absolute; z-index: 1; font: 400 620px/0.8 var(--serif); font-style: italic; letter-spacing: -0.04em; color: transparent; pointer-events: none; }
.chapter.e .ghost { right: -60px; top: 150px; -webkit-text-stroke: 2px rgba(128, 255, 219, 0.2); }
.chapter.m .ghost { left: -40px; top: 150px; -webkit-text-stroke: 2px rgba(140, 124, 255, 0.28); }
.chapter .cutout { position: absolute; bottom: 0; z-index: 3; max-width: none; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5)); }
.chapter.e .cutout { right: 24px; width: 836px; }
.chapter.m .cutout { left: 24px; width: 860px; }
.chapter .copy { position: absolute; top: 170px; width: 900px; z-index: 5; }
.chapter.e .copy { left: 104px; }
.chapter.m .copy { right: 104px; left: auto; width: 880px; }
.chapter .num { font: 600 19px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; display: flex; align-items: center; gap: 18px; }
.chapter.e .num { color: var(--mint); }
.chapter.m .num { color: var(--violet-soft); }
.chapter .big { font: 400 330px/0.82 var(--serif); letter-spacing: -0.03em; margin: 34px 0 6px -10px; }
.chapter .big em { font-style: italic; }
.chapter.e .big em { color: var(--mint); }
.chapter.m .big em { color: var(--violet-soft); }
.chapter .tagline { font: 400 80px/1 var(--serif); }
.chapter .tagline em { font-style: italic; }
.chapter.e .tagline em { color: var(--mint); }
.chapter.m .tagline em { color: var(--violet-soft); }
.chapter .lead { margin-top: 30px; max-width: 760px; font-size: 29px; }
.chapter .quote { margin-top: 34px; padding-left: 26px; border-left: 3px solid; max-width: 700px; font: italic 400 36px/1.25 var(--serif); color: rgba(255, 255, 255, 0.92); }
.chapter.e .quote { border-color: var(--mint); }
.chapter.m .quote { border-color: var(--violet); }
.chapter .hub { position: absolute; bottom: 104px; display: flex; flex-wrap: wrap; gap: 12px; width: 800px; z-index: 5; }
.chapter.e .hub { left: 104px; }
.chapter.m .hub { right: 104px; }
.hub span { padding: 11px 20px; border-radius: 999px; font-size: 21px; font-weight: 600; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); }
.chapter.e .hub span:nth-child(odd) { border-color: rgba(128, 255, 219, 0.4); }
.chapter.m .hub span:nth-child(odd) { border-color: rgba(140, 124, 255, 0.55); }

/* ==========================================================================
   Capabilities (light)
   ========================================================================== */
.caps .head { position: absolute; left: 104px; top: 150px; width: 1500px; z-index: 5; }
.caps .h { margin-top: 24px; font-size: 80px; }
.caps .who { position: absolute; right: 104px; top: 134px; z-index: 6; display: flex; align-items: center; gap: 16px; padding: 10px 24px 10px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 30px -18px rgba(2, 16, 43, 0.3); }
.caps .who img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; }
.caps .who b { display: block; font-size: 22px; }
.caps .who span { display: block; font: 600 13px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.caps .cap-grid { position: absolute; left: 104px; right: 104px; top: 384px; z-index: 5; }

/* ==========================================================================
   S9 · A day with Emma (timeline)
   ========================================================================== */
.day .head { position: absolute; left: 104px; top: 150px; right: 104px; z-index: 5; display: flex; justify-content: space-between; align-items: flex-end; }
.day .note { font: 500 15px/1.6 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; text-align: right; max-width: 420px; }
.day .line { position: absolute; left: 104px; right: 104px; top: 624px; height: 3px; background: linear-gradient(90deg, rgba(128, 255, 219, 0.9), rgba(128, 255, 219, 0.15)); z-index: 3; }
.day .stop { position: absolute; width: 440px; z-index: 5; --x: 0; left: calc(104px + var(--x) * 254.4px); }
.day .stop .dot { position: absolute; left: -9px; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 8px rgba(128, 255, 219, 0.18), 0 0 30px rgba(128, 255, 219, 0.6); }
.day .stop .box { position: absolute; left: 0; width: 440px; padding: 0 0 0 28px; border-left: 2px solid rgba(128, 255, 219, 0.5); }
.day .stop.up .dot { top: 616px; }
.day .stop.dn .dot { top: 616px; }
.day .stop.up .box { bottom: calc(1080px - 618px); }
.day .stop.dn .box { top: 636px; }
.day .stop .t { font: 600 24px/1 var(--mono); letter-spacing: 0.14em; color: var(--mint); }
.day .stop h4 { margin-top: 12px; font-size: 32px; line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; }
.day .stop p { margin-top: 10px; font-size: 22px; line-height: 1.42; color: rgba(255, 255, 255, 0.72); }
.day .stop.up .box { padding-bottom: 28px; }
.day .stop.dn .box { padding-top: 28px; }
.day .stop.dn .box::before, .day .stop.up .box::before { content: ""; }

/* ==========================================================================
   Screens (mock panels)
   ========================================================================== */
.scr .head { position: absolute; left: 104px; top: 150px; width: 1700px; z-index: 5; }
.scr .h { margin-top: 24px; font-size: 76px; }
.scr .trio { position: absolute; left: 104px; right: 104px; top: 350px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; z-index: 5; }
.scr .col > .lab { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font: 600 17px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mint); }
.scr.v .col > .lab { color: var(--violet-soft); }
.scr .col > .lab .ico { font-size: 24px; }
.scr .col > .lab em { font-style: normal; opacity: 0.5; margin-left: auto; letter-spacing: 0.12em; }
.mock { height: 612px; border-radius: 26px; overflow: hidden; background: #fff; color: #1a1a1a; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; position: relative; }
.mock .bar { height: 62px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 22px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); font-weight: 700; font-size: 20px; }
.mock .bar .av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 10%; }
.mock .bar small { margin-left: auto; font: 600 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a8a; font-weight: 600; }
.mock .body { flex: 1; padding: 20px 22px 44px; display: flex; flex-direction: column; gap: 12px; font-size: 19px; line-height: 1.38; min-height: 0; }
/* whatsapp */
.mock.wa { background: #efeae2; }
.mock.wa .bar { background: #008069; color: #fff; border: 0; }
.mock.wa .bar .av { background: #fff; padding: 7px; object-fit: contain; }
.mock.wa .bar small { color: rgba(255, 255, 255, 0.75); }
.mock.wa .body { background: #efeae2; gap: 10px; }
.bub { max-width: 82%; padding: 11px 15px 9px; border-radius: 14px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); font-size: 18.5px; line-height: 1.35; position: relative; }
.bub.me { align-self: flex-end; background: #d9fdd3; }
.bub time { display: block; text-align: right; font-size: 12px; color: #8a9a95; margin-top: 3px; }
.bub .btn { display: block; margin-top: 8px; padding: 9px; text-align: center; font-weight: 700; color: #027eb5; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.dayline { align-self: center; padding: 5px 14px; border-radius: 8px; background: #e1f2fb; color: #54656f; font-size: 13px; font-weight: 600; }
/* crm */
.mock.crm { background: #fafaf8; }
.mock.crm .bar { background: #fff; }
.crm .gold { color: #b8982f; }
.msg-u { align-self: flex-end; max-width: 80%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: #1a1a1a; color: #fff; }
.msg-a { align-self: flex-start; max-width: 92%; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); }
.approve { border-radius: 18px; border: 1px solid rgba(201, 168, 62, 0.55); background: #fffbea; padding: 16px 18px; }
.approve .t { display: flex; align-items: center; gap: 10px; font: 700 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8a6d12; }
.approve .t i { width: 22px; height: 22px; border-radius: 50%; background: #c9a83e; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 14px; }
.approve .row { margin: 10px 0 14px; font-size: 19px; line-height: 1.35; }
.approve .row b { font-weight: 700; }
.approve .row s { color: #9a9a9a; }
.btns { display: flex; gap: 10px; }
.btn2 { padding: 11px 20px; border-radius: 12px; font-weight: 700; font-size: 17px; border: 1px solid rgba(0, 0, 0, 0.15); background: #fff; }
.btn2.pri { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.btn2.mint { background: var(--mint); color: var(--navy); border-color: var(--mint-2); }
.btn2.vio { background: var(--violet-deep); color: #fff; border-color: var(--violet-deep); }
.inputbar { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); color: #8a8a8a; font-size: 18px; }
.inputbar .ico { margin-left: auto; color: #b8982f; font-size: 22px; }
.doc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed rgba(8, 127, 103, 0.5); background: #effcf8; }
.doc .ft { width: 44px; height: 52px; border-radius: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.12); display: grid; place-items: center; font: 800 12px/1 var(--mono); color: #c2410c; }
.doc b { display: block; font-size: 18px; }
.doc span { font-size: 14px; color: #087f67; font-weight: 700; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.fields div { padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); }
.fields div.w { grid-column: 1 / -1; }
.fields small { display: block; font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 5px; }
.fields b { font-size: 18px; }
.fields .ok { background: #effcf8; border-color: rgba(8, 127, 103, 0.3); }
.illus { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 22px; font: 600 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: #9a9a9a; background: rgba(255, 255, 255, 0.82); }
.mock.wa .illus { background: rgba(239, 234, 226, 0.9); }

/* Martín mocks */
.promptbox { padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(90, 75, 204, 0.4); box-shadow: 0 0 0 4px rgba(140, 124, 255, 0.12); font-size: 20px; line-height: 1.4; }
.flt { display: flex; flex-wrap: wrap; gap: 8px; }
.flt span { padding: 8px 14px; border-radius: 999px; font-size: 16px; font-weight: 700; background: var(--violet-wash); color: var(--violet-deep); border: 1px solid rgba(90, 75, 204, 0.2); }
.result { display: flex; align-items: baseline; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); }
.result b { font: 400 66px/1 var(--serif); color: var(--violet-deep); }
.result span { font-size: 18px; color: #555; line-height: 1.3; }
.consent { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #087f67; font-weight: 700; }
.post { border-radius: 18px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.08); background: #fff; }
.post .img { height: 190px; position: relative; background: linear-gradient(135deg, #0b1d44 0%, #5a4bcc 55%, #80ffdb 130%); display: grid; place-items: center; }
.post .img img { width: 120px; opacity: 0.95; }
.post .img em { position: absolute; left: 14px; top: 14px; font: 700 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(2, 16, 43, 0.5); padding: 6px 10px; border-radius: 6px; font-style: normal; }
.post .cp { padding: 14px 16px; font-size: 17px; line-height: 1.4; color: #2b2b2b; }
.post .cp b { color: #5a4bcc; }
.camp { padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); }
.camp .top { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 20px; }
.camp .top i { margin-left: auto; font: 700 11px/1 var(--mono); font-style: normal; letter-spacing: 0.12em; padding: 6px 10px; border-radius: 6px; background: #fff5d6; color: #8a6d12; text-transform: uppercase; }
.camp .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.camp .meta span { padding: 6px 12px; border-radius: 8px; background: #f2f2ee; font-size: 15px; font-weight: 600; color: #444; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpis div { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); }
.kpis small { display: block; font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a; }
.kpis b { display: block; margin-top: 8px; font: 400 40px/1 var(--serif); }
.kpis .dn b { color: #087f67; }
.spark { height: 74px; border-radius: 14px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); padding: 10px 14px; display: flex; align-items: flex-end; gap: 6px; }
.spark i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #8c7cff, #5a4bcc); }

/* ==========================================================================
   Retorno (light, big number)
   ========================================================================== */
.ret .head { position: absolute; left: 104px; top: 150px; z-index: 5; }
.ret .num { position: absolute; left: 104px; top: 290px; z-index: 5; }
.ret .num .over { font: 600 20px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mint-deep); }
.ret.v .num .over { color: var(--violet-deep); }
.ret .num .fig { margin-top: 14px; font: 400 208px/0.9 var(--serif); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.ret .num .fig sup { font-size: 0.4em; vertical-align: 0.9em; margin-left: 10px; color: var(--mint-deep); }
.ret.v .num .fig sup { color: var(--violet-deep); }
.ret .num .cap { margin-top: 12px; font-size: 34px; font-weight: 600; letter-spacing: -0.01em; }
.ret .cut { position: absolute; left: 20px; bottom: 0; width: 540px; z-index: 3; }
.ret .stats { position: absolute; left: 880px; right: 104px; top: 150px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; z-index: 5; }
.ret .st { padding: 34px 36px 34px; border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 50px -36px rgba(2, 16, 43, 0.3); min-height: 322px; display: flex; flex-direction: column; }
.ret .st .d { font: 400 118px/0.9 var(--serif); letter-spacing: -0.02em; color: var(--mint-deep); display: flex; align-items: baseline; gap: 6px; }
.ret.v .st .d { color: var(--violet-deep); }
.ret .st .d small { font: 400 56px/1 var(--serif); }
.ret .st h4 { margin-top: 18px; font-size: 28px; line-height: 1.15; font-weight: 700; }
.ret .st p { margin-top: 10px; font-size: 21px; line-height: 1.42; color: #4a5a73; }
.ret .foot-note { position: absolute; left: 880px; right: 104px; bottom: 96px; font-size: 16px; line-height: 1.5; color: #64748b; z-index: 5; }

/* ==========================================================================
   S14 · pipeline
   ========================================================================== */
.pipe .head { position: absolute; left: 104px; top: 150px; z-index: 5; }
.pipe .h { margin-top: 24px; font-size: 88px; }
.pipe .flow { position: absolute; left: 104px; right: 104px; top: 372px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; z-index: 5; }
.pipe .st { position: relative; padding-right: 22px; }
.pipe .chev { height: 108px; display: flex; align-items: center; padding-left: 54px; font: 400 46px/1 var(--serif); color: #fff; clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 50%, calc(100% - 38px) 100%, 0 100%, 38px 50%); background: linear-gradient(90deg, var(--c1), var(--c2)); }
.pipe .st:first-child .chev { clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 50%, calc(100% - 38px) 100%, 0 100%); padding-left: 34px; }
.pipe .chev span { display: flex; align-items: center; gap: 14px; }
.pipe .chev small { font: 600 15px/1 var(--mono); letter-spacing: 0.14em; opacity: 0.75; }
.pipe .st .tx { margin-top: 26px; padding-left: 10px; }
.pipe .st .tx h4 { font-size: 27px; font-weight: 700; line-height: 1.15; }
.pipe .st .tx p { margin-top: 10px; font-size: 20px; line-height: 1.42; color: rgba(255, 255, 255, 0.72); }
.pipe .st .tx .ico { font-size: 34px; color: var(--violet-soft); margin-bottom: 14px; }
.pipe .attr { position: absolute; left: 104px; right: 104px; bottom: 96px; padding: 28px 36px; border-radius: 26px; display: flex; align-items: center; gap: 34px; z-index: 5; background: linear-gradient(90deg, rgba(140, 124, 255, 0.22), rgba(140, 124, 255, 0.06)); border: 1px solid rgba(140, 124, 255, 0.45); }
.pipe .attr .l { font-size: 27px; line-height: 1.35; max-width: 820px; }
.pipe .attr .l b { color: var(--violet-soft); }
.pipe .attr .trail { margin-left: auto; display: flex; align-items: center; gap: 12px; font: 600 15px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.pipe .attr .trail span { padding: 11px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); }
.pipe .attr .trail .ico { opacity: 0.55; font-size: 18px; }
.pipe .attr .trail span:last-child { background: var(--violet); border-color: var(--violet); color: #fff; }

/* ==========================================================================
   S17 · Together (ring)
   ========================================================================== */
.together .head { position: absolute; left: 104px; top: 150px; width: 760px; z-index: 5; }
.together .h { margin-top: 26px; font-size: 92px; }
.together .legend { position: absolute; left: 104px; bottom: 120px; width: 700px; display: grid; gap: 22px; z-index: 5; }
.together .lg { display: flex; align-items: center; gap: 22px; }
.together .lg img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; }
.together .lg.e img { border: 3px solid var(--mint); }
.together .lg.m img { border: 3px solid var(--violet); }
.together .lg b { display: block; font: 400 46px/1 var(--serif); }
.together .lg span { display: block; margin-top: 6px; font-size: 22px; color: rgba(255, 255, 255, 0.72); }
.together .together-note { margin-top: 12px; font-size: 24px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
.together .together-note b { color: var(--mint); }
.ringwrap { position: absolute; left: 1295px; top: 576px; width: 0; height: 0; z-index: 4; }
.ringwrap svg { position: absolute; left: -380px; top: -380px; width: 760px; height: 760px; overflow: visible; }
.ringwrap .core { position: absolute; left: -150px; top: -150px; width: 300px; height: 300px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 35% 30%, #12356b, #07204a 72%); border: 1.5px solid rgba(255, 255, 255, 0.22); }
.ringwrap .core b { font: 400 54px/0.95 var(--serif); }
.ringwrap .core b em { font-style: italic; color: var(--mint); }
.ringwrap .core small { margin-top: 10px; font: 500 14px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; }
.rnode { position: absolute; left: 0; top: 0; transform: rotate(var(--a)) translateX(318px) rotate(calc(var(--a) * -1)) translate(-50%, -50%); }
.rnode > div { display: flex; align-items: center; gap: 12px; white-space: nowrap; padding: 13px 22px 13px 13px; border-radius: 999px; font-size: 22px; font-weight: 700; background: #0a1f3d; border: 1.5px solid; }
.rnode.e > div { border-color: rgba(128, 255, 219, 0.7); }
.rnode.m > div { border-color: rgba(140, 124, 255, 0.85); }
.rnode i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 16px/1 var(--mono); font-style: normal; }
.rnode.e i { background: var(--mint); color: var(--navy); }
.rnode.m i { background: var(--violet); color: #fff; }

/* ==========================================================================
   S18 · Control
   ========================================================================== */
.control .copy { position: absolute; left: 104px; top: 150px; width: 760px; z-index: 5; }
.control .h { margin: 26px 0 40px; font-size: 92px; }
.control .pr { display: grid; gap: 28px; }
.control .p { display: flex; gap: 22px; align-items: flex-start; }
.control .p .icon-tile { width: 62px; height: 62px; font-size: 30px; border-radius: 20px; }
.control .p b { display: block; font-size: 29px; line-height: 1.15; }
.control .p span { display: block; margin-top: 7px; font-size: 22px; line-height: 1.42; color: rgba(255, 255, 255, 0.72); }
.crm-shell { position: absolute; left: 960px; top: 150px; width: 856px; height: 830px; border-radius: 30px; overflow: hidden; background: #fafaf8; box-shadow: 0 60px 100px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.12); z-index: 5; color: #1a1a1a; }
.crm-top { height: 76px; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.07); display: flex; align-items: center; padding: 0 24px; gap: 18px; }
.crm-top .cl { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 19px; }
.crm-top .cl i { width: 34px; height: 34px; border-radius: 50%; background: #c9a83e; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 17px; }
.crm-top .sp { flex: 1; }
.crm-top .ag { position: relative; }
.crm-top .ag img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; display: block; }
.crm-top .ag.e img { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(8, 127, 103, 0.7); }
.crm-top .ag.m img { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(90, 75, 204, 0.7); }
.crm-top .ag.on::after { content: "3"; position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: #ef4444; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.crm-top .gauge { padding: 8px 16px; border-radius: 999px; background: #f2f2ee; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.crm-top .gauge i { width: 84px; height: 8px; border-radius: 4px; background: #e0e0da; position: relative; overflow: hidden; }
.crm-top .gauge i::after { content: ""; position: absolute; inset: 0 18% 0 0; background: linear-gradient(90deg, #5ce0c0, #087f67); border-radius: 4px; }
.crm-nav { display: flex; gap: 26px; padding: 16px 28px 0; font-size: 17px; font-weight: 600; color: #777; border-bottom: 1px solid rgba(0, 0, 0, 0.06); background: #fff; }
.crm-nav span { padding-bottom: 14px; }
.crm-nav .a { color: #b8982f; border-bottom: 2px solid #c9a83e; }
.agpop { position: absolute; right: 118px; top: 84px; width: 468px; border-radius: 22px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 40px 70px -20px rgba(0, 0, 0, 0.4); padding: 22px 22px 18px; z-index: 5; }
.agpop h5 { font-size: 21px; font-weight: 800; }
.agpop .sub { margin-top: 5px; font-size: 15px; color: #777; line-height: 1.35; }
.job { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(0, 0, 0, 0.07); font-size: 17px; font-weight: 600; }
.job:first-of-type { margin-top: 14px; }
.job small { display: block; font-size: 13px; font-weight: 500; color: #8a8a8a; margin-top: 3px; }
.tg { margin-left: auto; width: 50px; height: 28px; border-radius: 14px; background: #d7d7d0; position: relative; flex: none; }
.tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.tg.on { background: #087f67; }
.tg.on::after { left: 25px; }
.agpop .acts { display: flex; gap: 10px; margin-top: 14px; }
.inbox-card { position: absolute; left: 28px; bottom: 28px; width: 500px; border-radius: 22px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.09); box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.35); padding: 20px 22px; }
.inbox-card .who { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 18px; }
.inbox-card .who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(8, 127, 103, 0.6); }
.inbox-card .who small { margin-left: auto; font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a; }
.inbox-card p { margin: 12px 0 14px; font-size: 18px; line-height: 1.42; color: #333; }
.inbox-card p b { color: #087f67; }
.crm-body-ghost { position: absolute; left: 28px; top: 190px; width: 360px; display: grid; gap: 14px; opacity: 0.9; }
.crm-body-ghost div { height: 22px; border-radius: 8px; background: linear-gradient(90deg, #eceae4, #f4f3ee); }
.crm-body-ghost div:nth-child(3n) { width: 70%; }
.crm-body-ghost div:nth-child(4n) { width: 50%; }

/* ==========================================================================
   S19 · Jobs
   ========================================================================== */
.jobs .head { position: absolute; left: 104px; top: 150px; width: 1700px; z-index: 5; }
.jobs .h { margin-top: 24px; font-size: 70px; }
.jobs .two { position: absolute; left: 104px; right: 104px; top: 320px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; z-index: 5; }
.jobcol { border-radius: 30px; padding: 30px 34px 14px; }
.jobcol.e { background: linear-gradient(180deg, rgba(128, 255, 219, 0.14), rgba(128, 255, 219, 0.03)); border: 1px solid rgba(128, 255, 219, 0.4); }
.jobcol.m { background: linear-gradient(180deg, rgba(140, 124, 255, 0.2), rgba(140, 124, 255, 0.04)); border: 1px solid rgba(140, 124, 255, 0.5); }
.jobcol .ch { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; }
.jobcol .ch img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; }
.jobcol.e .ch img { border: 3px solid var(--mint); }
.jobcol.m .ch img { border: 3px solid var(--violet); }
.jobcol .ch b { font: 400 54px/1 var(--serif); }
.jobcol .ch span { margin-left: auto; font: 600 14px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.65; }
.jr { display: flex; align-items: center; gap: 18px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.jr .ico { font-size: 28px; color: var(--mint); }
.jobcol.m .jr .ico { color: var(--violet-soft); }
.jr b { display: block; font-size: 23px; line-height: 1.2; font-weight: 700; }
.jr small { display: block; margin-top: 4px; font-size: 17px; color: rgba(255, 255, 255, 0.62); }
.jr .tg { background: rgba(255, 255, 255, 0.25); }
.jr .tg.on { background: var(--mint); }
.jobcol.m .jr .tg.on { background: var(--violet); }
.jr .tg::after { background: #fff; }
.jr .tg.on::after { background: var(--navy); }
.jobcol.m .jr .tg.on::after { background: #fff; }
.jobs .credits { position: absolute; left: 104px; right: 104px; bottom: 84px; display: flex; align-items: center; gap: 26px; z-index: 5; font-size: 22px; color: rgba(255, 255, 255, 0.78); }
.jobs .credits .big { font: 400 54px/1 var(--serif); color: #fff; white-space: nowrap; }
.jobs .credits .big em { color: var(--mint); font-style: italic; }
.jobs .credits .refs { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 10px; }
.jobs .credits .refs span { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 16px; white-space: nowrap; }
.jobs .credits .refs b { color: var(--mint); }

/* ==========================================================================
   S20 · Platform bento
   ========================================================================== */
.plat .head { position: absolute; left: 104px; top: 150px; width: 1500px; z-index: 5; }
.plat .h { margin-top: 24px; font-size: 84px; }
.plat .sub { position: absolute; right: 104px; top: 214px; width: 420px; z-index: 5; font-size: 22px; line-height: 1.45; color: #4a5a73; }
.bento { position: absolute; left: 104px; right: 104px; top: 372px; bottom: 100px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 22px; z-index: 5; }
.tile { position: relative; overflow: hidden; border-radius: 28px; padding: 28px 30px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 50px -38px rgba(2, 16, 43, 0.3); display: flex; flex-direction: column; }
.tile.w2 { grid-column: span 2; }
.tile.dark { background: linear-gradient(150deg, #0a1f3d, #02102b); color: #fff; border-color: transparent; }
.tile .ti { display: flex; align-items: center; gap: 14px; }
.tile .ti .ico { font-size: 30px; color: var(--mint-deep); }
.tile.dark .ti .ico { color: var(--mint); }
.tile h4 { font-size: 29px; font-weight: 700; letter-spacing: -0.01em; }
.tile p { margin-top: 10px; font-size: 20px; line-height: 1.4; color: #4a5a73; max-width: 440px; }
.tile.dark p { color: rgba(255, 255, 255, 0.72); }
.tile .viz { margin-top: auto; padding-top: 12px; }
.tile .cal { display: grid; grid-template-columns: 56px repeat(3, 1fr); gap: 6px; font: 600 12px/1 var(--mono); color: #8a97ab; }
.tile .cal .c { height: 30px; border-radius: 8px; background: #f0f3f8; }
.tile .cal .c.a { background: var(--mint); }
.tile .cal .c.b { background: #c9c1ff; }
.tile .cal .c.d { background: #0a1f3d; }
.tile .cal span { align-self: center; }
.tile .teeth { display: flex; gap: 6px; align-items: flex-end; }
.tile .teeth i { flex: 1; height: 54px; border-radius: 14px 14px 18px 18px; background: #eef2f8; border: 1.5px solid #d6deea; position: relative; }
.tile .teeth i.t1 { background: var(--mint); border-color: var(--mint-2); }
.tile .teeth i.t2 { background: #ffd9b3; border-color: #f2b878; }
.tile .teeth i.t3 { background: #c9c1ff; border-color: #a99cff; }
.tile .bars { display: flex; align-items: flex-end; gap: 8px; height: 76px; }
.tile .bars i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #5ce0c0, #087f67); }
.tile.dark .bars i { background: linear-gradient(180deg, #80ffdb, #2aa990); }
.tile .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tile .tags span { padding: 7px 13px; border-radius: 999px; font-size: 16px; font-weight: 600; background: #eef2f8; color: #34445e; }
.tile.dark .tags span { background: rgba(255, 255, 255, 0.1); color: #fff; }
.plat .base { position: absolute; left: 104px; right: 104px; bottom: 44px; z-index: 6; }

/* ==========================================================================
   S21 · Onboarding / Nico
   ========================================================================== */
.onb .copy { position: absolute; left: 104px; top: 150px; width: 1020px; z-index: 5; }
.onb .h { margin-top: 22px; font-size: 80px; }
.onb .kpis3 { display: flex; gap: 20px; margin-top: 28px; }
.onb .kpis3 div { padding: 16px 24px; border-radius: 18px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); }
.onb .kpis3 b { display: block; font: 400 52px/1 var(--serif); color: var(--mint); }
.onb .kpis3 span { display: block; margin-top: 6px; font: 600 14px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.onb .steps { position: absolute; left: 104px; top: 528px; width: 1020px; z-index: 5; display: grid; gap: 14px; }
.onb .step { display: grid; grid-template-columns: 74px 1fr; gap: 24px; align-items: start; padding: 18px 28px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.14); }
.onb .step .nb { width: 64px; height: 64px; border-radius: 20px; background: rgba(128, 255, 219, 0.14); border: 1px solid rgba(128, 255, 219, 0.4); display: grid; place-items: center; font: 600 24px/1 var(--mono); color: var(--mint); }
.onb .step b { display: block; font-size: 30px; line-height: 1.1; }
.onb .step span { display: block; margin-top: 6px; font-size: 21px; line-height: 1.4; color: rgba(255, 255, 255, 0.74); }
.nico { position: absolute; left: 1210px; top: 150px; width: 606px; height: 830px; border-radius: 34px; overflow: hidden; z-index: 5; border: 1px solid rgba(255, 255, 255, 0.18); background: #14233f; box-shadow: 0 60px 100px -50px rgba(0, 0, 0, 0.9); }
.nico .ph { height: 470px; position: relative; }
.nico .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.nico .ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(180deg, transparent, #14233f); }
.nico .bd { padding: 0 38px 32px; margin-top: -40px; position: relative; z-index: 2; }
.nico .nm { font: 400 82px/0.9 var(--serif); margin-top: 16px; }
.nico .q { margin-top: 18px; font: italic 400 31px/1.28 var(--serif); color: rgba(255, 255, 255, 0.92); }
.nico .sub { margin-top: 16px; font-size: 20px; color: rgba(255, 255, 255, 0.62); line-height: 1.4; }

/* ==========================================================================
   S22 · Social proof (light)
   ========================================================================== */
.proof .head { position: absolute; left: 104px; top: 150px; width: 1500px; z-index: 5; }
.proof .h { margin-top: 24px; font-size: 96px; }
.proof .quads { position: absolute; left: 104px; right: 104px; top: 372px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; z-index: 5; }
.qd { border-radius: 30px; padding: 34px 32px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 50px -36px rgba(2, 16, 43, 0.3); display: flex; flex-direction: column; height: 560px; }
.qd.hero { background: linear-gradient(160deg, #0a1f3d, #02102b); color: #fff; border-color: transparent; position: relative; overflow: hidden; }
.qd.hero::before { content: ""; position: absolute; right: -120px; top: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(closest-side, rgba(128, 255, 219, 0.4), transparent); }
.qd .lg { height: 84px; display: flex; align-items: center; }
.qd .lg img { max-height: 84px; max-width: 220px; object-fit: contain; border-radius: 10px; }
.qd.hero .lg img { background: #fff; padding: 8px 14px; }
.qd blockquote { margin-top: 26px; font: 400 40px/1.1 var(--serif); letter-spacing: -0.005em; text-wrap: pretty; }
.qd.hero blockquote { font-size: 36px; margin-top: 20px; }
.qd .who { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
.qd.hero .who { border-color: rgba(255, 255, 255, 0.2); }
.qd .who b { display: block; font-size: 22px; }
.qd .who span { display: block; margin-top: 4px; font-size: 18px; color: var(--muted); }
.qd.hero .who span { color: rgba(255, 255, 255, 0.65); }
.qd .st { display: flex; gap: 22px; margin-top: 18px; }
.qd .st div b { display: block; font: 400 50px/1 var(--serif); color: var(--mint); white-space: nowrap; }
.qd .st div span { display: block; font: 600 13px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; margin-top: 4px; }
.proof .src { position: absolute; left: 104px; bottom: 92px; font-size: 16px; color: var(--muted); z-index: 5; }

/* ==========================================================================
   S23 · Pricing
   ========================================================================== */
.price .head { position: absolute; left: 104px; top: 150px; width: 1500px; z-index: 5; }
.price .h { margin-top: 24px; font-size: 70px; text-wrap: nowrap; }
.price .badge { position: absolute; right: 104px; top: 160px; z-index: 6; padding: 14px 22px; border-radius: 14px; font: 700 16px/1.25 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); background: linear-gradient(180deg, #fff3b8, #f5d764); box-shadow: 0 12px 30px -10px rgba(245, 215, 100, 0.5); transform: rotate(2.5deg); }
.price .plans { position: absolute; left: 104px; right: 104px; top: 336px; display: grid; grid-template-columns: 340px 372px 1fr 1fr; gap: 22px; z-index: 5; height: 520px; }
.pl { border-radius: 30px; padding: 30px 32px; display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); }
.pl.e { background: linear-gradient(170deg, rgba(128, 255, 219, 0.26), rgba(8, 127, 103, 0.14) 60%, rgba(5, 40, 60, 0.85)); border-color: rgba(128, 255, 219, 0.5); }
.pl.m { background: linear-gradient(170deg, rgba(140, 124, 255, 0.32), rgba(90, 75, 204, 0.16) 60%, rgba(12, 18, 64, 0.9)); border-color: rgba(140, 124, 255, 0.55); }
.pl .kk { font: 600 14px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; display: flex; align-items: center; gap: 12px; }
.pl .nm { margin-top: 14px; font: 400 52px/1 var(--serif); }
.pl .pr { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; }
.pl .pr b { font: 400 104px/0.9 var(--serif); letter-spacing: -0.03em; }
.pl .pr b small { font-size: 0.42em; vertical-align: 0.9em; margin-left: 4px; }
.pl .pr span { font: 600 15px/1.25 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65; }
.pl .was { margin-top: 6px; font-size: 20px; color: rgba(255, 255, 255, 0.55); }
.pl .was s { text-decoration-thickness: 2px; }
.pl .was em { font-style: normal; color: var(--mint); font-weight: 700; margin-left: 8px; }
.pl ul { margin-top: 22px; list-style: none; display: grid; gap: 11px; font-size: 20px; line-height: 1.3; color: rgba(255, 255, 255, 0.82); }
.pl ul li { display: flex; gap: 11px; align-items: flex-start; }
.pl ul li::before { content: ""; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--mint); flex: none; }
.pl.m ul li::before { background: var(--violet-soft); }
.pl .port { position: absolute; right: 22px; top: 22px; width: 82px; height: 82px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; border: 3px solid var(--mint); }
.pl.m .port { border-color: var(--violet); }
.pl .req { margin-top: auto; padding-top: 14px; font: 600 13px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
.price .sum { position: absolute; left: 104px; right: 104px; bottom: 100px; z-index: 5; display: flex; align-items: center; gap: 30px; padding: 22px 34px; border-radius: 24px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); }
.price .sum .eq2 { display: flex; align-items: center; gap: 16px; font: 400 40px/1 var(--serif); white-space: nowrap; }
.price .sum .eq2 .o { font: 700 17px/1 var(--mono); }
.price .sum .eq2 i { font-style: normal; opacity: 0.4; }
.price .sum .eq2 b { color: var(--mint); font-size: 54px; font-weight: 400; }
.price .sum .nt { margin-left: auto; font-size: 18px; line-height: 1.45; color: rgba(255, 255, 255, 0.68); max-width: 780px; }

/* ==========================================================================
   S24 · Closing
   ========================================================================== */
.close .cut-e { position: absolute; left: -40px; bottom: 0; width: 700px; z-index: 3; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)); }
.close .cut-m { position: absolute; right: -50px; bottom: 0; width: 700px; z-index: 3; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)); }
.close .mid { position: absolute; left: 520px; right: 520px; top: 150px; text-align: center; z-index: 6; display: flex; flex-direction: column; align-items: center; }
.close .h { margin-top: 30px; font-size: 116px; }
.close .lead { margin-top: 28px; font-size: 28px; max-width: 760px; }
.close .ctas { margin-top: 38px; display: grid; gap: 14px; width: 100%; max-width: 820px; }
.cta { display: flex; align-items: center; gap: 18px; padding: 18px 26px; border-radius: 22px; text-align: left; background: rgba(2, 16, 43, 0.88); border: 1px solid rgba(255, 255, 255, 0.2); }
.cta.pri { background: var(--mint); color: var(--navy); border-color: var(--mint); }
.cta .ico { font-size: 30px; }
.cta b { display: block; font-size: 25px; line-height: 1.15; }
.cta span { display: block; margin-top: 3px; font: 500 15px/1 var(--mono); letter-spacing: 0.1em; opacity: 0.72; }
.cta .go { margin-left: auto; font-size: 26px; }
.close .qr { margin-top: 22px; display: flex; align-items: center; gap: 22px; padding: 14px 24px 14px 14px; border-radius: 22px; background: #fff; color: var(--ink); text-align: left; }
.close .qr img { width: 120px; height: 120px; }
.close .qr b { display: block; font-size: 22px; }
.close .qr span { display: block; margin-top: 4px; font-size: 16px; color: var(--muted); max-width: 230px; line-height: 1.35; }
.close .sig { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; font: 500 15px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.45; z-index: 6; }

/* ---------- Presenter UI ---------- */
.ui { position: fixed; z-index: 1000; }
.ui.progress { left: 0; top: 0; right: 0; height: 4px; background: rgba(255, 255, 255, 0.08); }
.ui.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), var(--violet)); transition: width 0.4s var(--ease); }
.ui.nav { left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 999px; background: rgba(2, 16, 43, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font: 500 13px/1 var(--mono); letter-spacing: 0.12em; opacity: 0; transition: opacity 0.3s; }
body:hover .ui.nav { opacity: 1; }
.ui.nav button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 17px; cursor: pointer; }
.ui.nav button:hover { background: var(--mint); color: var(--navy); }
.ui.nav .ct { padding: 0 12px; min-width: 76px; text-align: center; }
.ui.help { right: 18px; bottom: 18px; font: 500 12px/1.5 var(--mono); letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.55); text-align: right; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
body:hover .ui.help { opacity: 1; }
body[data-mode="scroll"] .ui.progress, body[data-mode="scroll"] .ui.nav { display: none; }

/* ---------- Print / PDF ---------- */
@page { size: 1920px 1080px; margin: 0; }
@media print {
  html, body { height: auto; background: #fff; overflow: visible; margin: 0; padding: 0; }
  body[data-mode] .stage { position: static; overflow: visible; padding: 0; margin: 0; background: none; min-height: 0; }
  body[data-mode] .deck { position: static; transform: none; width: 1920px; height: auto; display: block; margin: 0; padding: 0; gap: 0; }
  body[data-mode] .slide { position: relative; margin: 0; zoom: 1 !important; transform: none; opacity: 1; visibility: visible; box-shadow: none; border-radius: 0; }
  .stage { position: static; overflow: visible; background: none; padding: 0; }
  .deck { position: static; transform: none; width: 1920px; height: auto; display: block; }
  .slide { position: relative; opacity: 1; visibility: visible; zoom: 1 !important; box-shadow: none !important; break-after: page; page-break-after: always; break-inside: avoid; transition: none; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .r { opacity: 1 !important; animation: none !important; transform: none !important; }
  .orbit .spin, .orbit .chip > span { animation: none !important; }
  .ui, .no-print { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}