/* =====================================================
   The Loop — Content Machine VSL
   Theme: dark premium, sober educational, brand-aligned
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Light mode — minimaliste, neutres uniquement, pas de halo orange */
  --background-color: #FAFAFA;        /* zinc-50, fond presque blanc */
  --surface-color: #FFFFFF;
  --primary-color: #E8650A;           /* orange : usage parcimonieux, 1 accent par slide */
  --orange: #E8650A;
  --secondary-color: #F59E0B;
  --success-color: #16a34a;
  --text-color: #0A0A0A;              /* near-black, vrai contraste */
  --white: #FFFFFF;
  --muted-color: #525252;             /* neutral-600 */
  --gray: #525252;
  --dim-color: #A3A3A3;               /* neutral-400 */
  --gray-dark: #A3A3A3;
  --border-color: rgba(0, 0, 0, 0.07);
  --shadow-card: none;
  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.06);

  --heading-font: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --body-font: 'Inter', -apple-system, sans-serif;
  --base-font-size: 28px;
  --text-size: 17pt;
  --h1-size: 56pt;
  --h2-size: 36pt;
  --h3-size: 24pt;
}

html, body { background: var(--background-color); }

.reveal {
  font-family: var(--body-font);
  color: var(--text-color);
  background: var(--background-color);
}
.reveal-viewport { background: var(--background-color) !important; }

.reveal .slides { text-align: left; }
.reveal .slides section { padding: 44px 60px; height: 100%; box-sizing: border-box; }
.reveal .slides section section { padding: 44px 60px; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--heading-font);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--text-color);
  text-transform: none;
  margin: 0 0 22px 0;
}

.reveal h1 { font-size: var(--h1-size); }
.reveal h2 { font-size: var(--h2-size); }
.reveal h3 { font-size: var(--h3-size); }

.reveal p, .reveal li {
  font-size: var(--text-size);
  color: var(--text-color);
  line-height: 1.5;
}

.reveal p.muted, .reveal .muted, .reveal .text-muted { color: var(--muted-color); }

.reveal strong, .reveal b {
  color: var(--text-color);
  font-weight: 700;
}

.reveal em {
  color: var(--muted-color);
  font-style: italic;
}

.reveal ul, .reveal ol { margin: 14px 0; padding-left: 26px; }
.reveal li { margin-bottom: 10px; }

/* Section dividers */
.reveal .section-divider { text-align: center; }
.reveal .section-divider h1 {
  font-size: 84pt;
  letter-spacing: -0.035em;
}

/* The Loop signature components */
.reveal .eyebrow {
  display: inline-block;
  font-size: 11pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 14px;
}

.reveal .card {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 24px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  box-shadow: var(--shadow-card);
}

.reveal .card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-card-hover);
}

.reveal .card.primary {
  border-color: var(--primary-color);
  background: linear-gradient(180deg, rgba(232, 101, 10, 0.06), rgba(255, 255, 255, 1));
}

.reveal .stat { text-align: center; padding: 18px; }

.reveal .stat-value {
  font-family: var(--heading-font);
  font-weight: 800;
  color: var(--primary-color);
  font-size: 48pt;
  line-height: 1;
  letter-spacing: -0.025em;
}

.reveal .stat-label {
  font-size: 11pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-color);
  margin-top: 6px;
}

.reveal .stat-source {
  font-size: 10pt;
  color: var(--dim-color);
  margin-top: 8px;
  font-style: italic;
}

.reveal .pill {
  display: inline-block;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11pt;
  font-weight: 500;
  box-shadow: var(--shadow-card);
}

.reveal .pill.primary {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.reveal .cta-button {
  display: inline-block;
  background: var(--primary-color);
  color: white !important;
  padding: 18px 36px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16pt;
  text-decoration: none;
  transition: background-color 0.25s, transform 0.25s;
}

.reveal .cta-button:hover { background: #d05808; transform: translateY(-1px); }

.reveal blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 22px;
  margin: 20px 0;
  font-style: italic;
  background: none;
  box-shadow: none;
  width: 100%;
  color: var(--text-color);
  font-size: 17pt;
}

.reveal blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: var(--muted-color);
  font-size: 13pt;
}

.reveal .author-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 28px 0;
}

.reveal .author-name {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 26pt;
  text-align: center;
  color: var(--text-color);
}

.reveal .author-role {
  font-size: 11pt;
  text-align: center;
  color: var(--muted-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.reveal .pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0;
}

.reveal .pipeline-step {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.reveal .pipeline-step-number {
  font-size: 11pt;
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 6px;
}

.reveal .pipeline-step-title {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 16pt;
  line-height: 1.2;
  margin-bottom: 4px;
}

.reveal .pipeline-step-desc {
  font-size: 11pt;
  color: var(--muted-color);
}

/* 10/80/10 method block */
.reveal .ratio-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 18px;
  margin: 30px 0;
}

.reveal .ratio-cell {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.reveal .ratio-cell.center {
  border-color: var(--primary-color);
  background: #FFFFFF;
}

.reveal .ratio-value {
  font-family: var(--heading-font);
  font-size: 56pt;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1;
  letter-spacing: -0.03em;
}

.reveal .ratio-label {
  font-size: 12pt;
  color: var(--muted-color);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 8px;
  font-weight: 600;
}

.reveal .ratio-desc {
  font-size: 13pt;
  color: var(--text-color);
  margin-top: 10px;
  line-height: 1.4;
}

/* 3 pillars */
.reveal .pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0;
}

.reveal .pillar {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 22px 20px;
  position: relative;
  box-shadow: var(--shadow-card);
}

.reveal .pillar-num {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 36pt;
  color: var(--primary-color);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.reveal .pillar-title {
  font-family: var(--heading-font);
  font-size: 16pt;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
}

.reveal .pillar-desc {
  font-size: 12pt;
  color: var(--muted-color);
  line-height: 1.5;
}

.reveal .pain-list {
  list-style: none;
  padding-left: 0;
  margin-top: 18px;
}

.reveal .pain-list li {
  padding: 14px 0 14px 28px;
  position: relative;
  border-bottom: 1px solid var(--border-color);
  font-size: 17pt;
  color: var(--muted-color);
  line-height: 1.4;
}

.reveal .pain-list li::before {
  content: '−';
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: 700;
  font-size: 20pt;
  line-height: 1;
  top: 14px;
}

.reveal .pain-list li:last-child { border-bottom: none; }

.reveal .compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 22px 0;
}

.reveal .compare-col {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-card);
}

.reveal .compare-col.old { border-color: var(--border-color); opacity: 0.85; }
.reveal .compare-col.new { border-color: var(--primary-color); }

.reveal .compare-label {
  font-size: 11pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-color);
  margin-bottom: 10px;
  font-weight: 600;
}

.reveal .compare-col.new .compare-label { color: var(--primary-color); }

.reveal .roadmap {
  background: #FFFFFF;
  border: 1px dashed var(--primary-color);
  border-radius: 16px;
  padding: 28px;
  margin: 22px 0;
  box-shadow: var(--shadow-card);
}

.reveal .roadmap-label {
  color: var(--primary-color);
  font-size: 11pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 12px;
}

.reveal .footnote {
  font-size: 11pt;
  color: var(--dim-color);
  position: absolute;
  bottom: 20px;
  left: 70px;
  right: 70px;
}

.reveal .content { display: flex; flex-direction: column; height: 100%; }

/* Text size utilities */
.text-lg { font-size: 21pt; }
.text-xl { font-size: 24pt; }
.text-2xl { font-size: 30pt; }
.text-3xl { font-size: 38pt; }
.text-center { text-align: center; }
.text-muted { color: var(--muted-color); }
.text-accent { color: var(--primary-color); }

.reveal .progress { color: var(--primary-color); height: 3px; }
.reveal .controls { color: var(--muted-color); }

/* =====================================================
   DYNAMIC DEMO CARDS — adapted from landing page
   ===================================================== */

.demo-card-wrap {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 18px;
  overflow: hidden;
  width: 100%;
  max-width: 760px;
  margin: 14px auto 0;
  box-shadow: var(--shadow-card);
}

.demo-card-wrap.is-playing { border-color: rgba(232, 101, 10, 0.4); }

.demo-stage {
  position: relative;
  height: 340px;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 50%, rgba(232,101,10,0.09), rgba(0,0,0,0) 60%), #050505;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  cursor: pointer;
  perspective: 900px;
}

.demo-stage::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 78%);
  pointer-events: none;
}

.demo-stage::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 340px; height: 340px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232,101,10,0.28), transparent 60%);
  filter: blur(22px);
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}

.demo-card-wrap.is-playing .demo-stage::after { opacity: 1; }

.demo-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,101,10,0.9), transparent);
  box-shadow: 0 0 14px rgba(232,101,10,0.8);
  opacity: 0; z-index: 6; pointer-events: none;
}

.demo-card-wrap.is-playing .demo-scan { animation: demo-scan 1.1s ease-out; }
@keyframes demo-scan { 0% { opacity: 0; top: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; top: 100%; } }

.demo-cta {
  position: absolute; left: 50%; bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(232,101,10,0.22), rgba(232,101,10,0.08));
  border: 1px solid rgba(232,101,10,0.45);
  border-radius: 999px;
  font-size: 12pt; font-weight: 600;
  color: var(--white);
  backdrop-filter: blur(10px);
  z-index: 20;
  cursor: pointer;
  transition: opacity .4s, transform .4s;
}

.demo-card-wrap.is-playing .demo-cta { opacity: 0; transform: translate(-50%, 24px); }

.demo-reset {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  transition: opacity .35s ease .35s;
  z-index: 25;
  display: flex; align-items: center; justify-content: center;
  font-size: 14pt;
}

.demo-card-wrap.is-playing .demo-reset { opacity: 1; }

/* Stage variant: COMPARE (before/after magazine) */
.demo-stage--compare { display: flex; align-items: center; justify-content: center; padding: 18px; }
.demo-compare-frame {
  position: relative;
  height: 100%; aspect-ratio: 1299 / 1600;
  max-width: 100%; max-height: 300px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 22px 44px -12px rgba(0,0,0,0.75),
              0 0 0 1px rgba(232,101,10,0.35),
              0 0 32px rgba(232,101,10,0.2);
  transform: perspective(900px) rotateY(-10deg) rotateX(4deg);
  transition: transform .8s cubic-bezier(.2,.9,.25,1);
}
.demo-card-wrap.is-playing .demo-compare-frame {
  transform: perspective(900px) rotateY(-2deg) rotateX(0) scale(1.02);
}
.demo-compare-before, .demo-compare-after {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.demo-compare-after {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s cubic-bezier(.62,0,.22,1);
}
.demo-card-wrap.is-playing .demo-compare-after { clip-path: inset(0 0 0 0); }

.demo-compare-label {
  position: absolute; top: 8px;
  font-size: 9pt; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.65);
  padding: 4px 10px;
  border-radius: 5px;
  z-index: 5;
  transition: opacity .4s ease;
}
.demo-compare-label--before { left: 8px; }
.demo-compare-label--after {
  right: 8px;
  background: var(--primary-color);
  opacity: 0;
}
.demo-card-wrap.is-playing .demo-compare-label--before { opacity: 0; }
.demo-card-wrap.is-playing .demo-compare-label--after { opacity: 1; transition: opacity .4s ease 1.3s; }

.demo-magic-line {
  position: absolute; top: -2%; bottom: -2%; width: 2px; left: 0;
  background: linear-gradient(180deg, transparent, #fff 20%, #fff 80%, transparent);
  box-shadow: 0 0 18px 4px rgba(232,101,10,0.95);
  opacity: 0; z-index: 6;
}
.demo-card-wrap.is-playing .demo-magic-line {
  animation: magic-sweep 1.8s cubic-bezier(.62,0,.22,1) forwards;
}
@keyframes magic-sweep { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* Stage variant: ADS DECLINATOR */
.demo-stage--ads { background: radial-gradient(ellipse at 50% 50%, rgba(232,101,10,0.1), rgba(0,0,0,0) 62%), #050505; }
.demo-ads-input {
  position: absolute; left: 50%; top: 50%;
  width: 140px; height: 140px;
  transform: translate(-50%, -50%) rotateY(-14deg) rotateX(5deg);
  transition: transform .8s cubic-bezier(.2,.9,.25,1);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7),
              0 0 0 1px rgba(232,101,10,0.45),
              0 0 34px rgba(232,101,10,0.28);
  z-index: 5;
}
.demo-ads-input img { width: 100%; height: 100%; object-fit: cover; }
.demo-ads-input-label {
  position: absolute; top: -10px; left: 8px;
  font-size: 9pt; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--primary-color);
  padding: 3px 8px; border-radius: 5px; z-index: 2;
}
.demo-card-wrap.is-playing .demo-ads-input {
  transform: translate(-50%, -50%) rotateY(0) rotateX(0) scale(0.6);
}

.demo-ads-out {
  position: absolute; left: 50%; top: 50%;
  width: 100px; height: 100px;
  border-radius: 10px; overflow: hidden;
  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0;
  box-shadow: 0 14px 32px -8px rgba(0,0,0,0.85), 0 0 0 1px rgba(232,101,10,0.25);
  transition: transform .9s cubic-bezier(.2,.9,.25,1), opacity .6s ease;
  pointer-events: none;
}
.demo-ads-out img { width: 100%; height: 100%; object-fit: cover; }
.demo-card-wrap.is-playing .demo-ads-out { opacity: 1; }
.demo-card-wrap.is-playing .demo-ads-out:nth-of-type(1) { transform: translate(calc(-50% - 130px), calc(-50% - 90px)) rotate(-7deg); transition-delay: .12s; }
.demo-card-wrap.is-playing .demo-ads-out:nth-of-type(2) { transform: translate(calc(-50% + 130px), calc(-50% - 90px)) rotate(7deg); transition-delay: .22s; }
.demo-card-wrap.is-playing .demo-ads-out:nth-of-type(3) { transform: translate(calc(-50% + 0px), calc(-50% + 110px)) rotate(-3deg); transition-delay: .32s; }

.demo-ads-ghost {
  position: absolute; left: 50%; top: 50%;
  width: 80px; height: 80px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  transition: all .9s cubic-bezier(.2,.9,.25,1);
  pointer-events: none;
}
.demo-card-wrap.is-playing .demo-ads-ghost { opacity: .55; }
.demo-card-wrap.is-playing .demo-ads-ghost:nth-of-type(4) { transform: translate(calc(-50% - 145px), calc(-50% + 30px)) rotate(-10deg); transition-delay: .4s; }
.demo-card-wrap.is-playing .demo-ads-ghost:nth-of-type(5) { transform: translate(calc(-50% + 145px), calc(-50% + 30px)) rotate(10deg); transition-delay: .45s; }
.demo-card-wrap.is-playing .demo-ads-ghost:nth-of-type(6) { transform: translate(calc(-50% - 70px), calc(-50% - 130px)) rotate(-14deg) scale(0.85); transition-delay: .5s; }
.demo-card-wrap.is-playing .demo-ads-ghost:nth-of-type(7) { transform: translate(calc(-50% + 70px), calc(-50% - 130px)) rotate(14deg) scale(0.85); transition-delay: .55s; }

.demo-ads-counter {
  position: absolute; top: 14px; right: 50px;
  font-family: var(--heading-font);
  font-weight: 800; font-size: 24pt;
  color: var(--primary-color);
  letter-spacing: -0.02em;
  z-index: 6;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .4s, transform .4s;
}
.demo-ads-counter sup {
  font-size: 11pt;
  color: var(--gray);
  font-weight: 500;
  margin-left: 3px;
  vertical-align: top;
}
.demo-card-wrap.is-playing .demo-ads-counter { opacity: 1; transform: translateY(0); transition-delay: .6s; }

/* Stage variant: CAROUSEL (phone) */
.demo-stage--carousel { display: flex; align-items: center; justify-content: center; padding: 14px; }
.demo-phone {
  position: relative;
  width: 170px; aspect-ratio: 9/16;
  border-radius: 24px;
  overflow: hidden;
  background: #0f0f10;
  box-shadow: 0 22px 44px -12px rgba(0,0,0,0.75),
              0 0 0 3px #2a2a2e,
              0 0 0 4px #444,
              inset 0 0 0 1px rgba(255,255,255,0.08);
  transform: perspective(900px) rotateY(-4deg) rotateX(3deg);
  transition: transform .7s cubic-bezier(.2,.9,.25,1);
}
.demo-card-wrap.is-playing .demo-phone {
  transform: perspective(900px) rotateY(0) rotateX(0) translateY(-2px) scale(1.04);
}
.demo-phone-notch {
  position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 14px;
  background: #000; border-radius: 8px;
  z-index: 3;
}
.demo-phone-slide {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.demo-phone-slide.is-active { opacity: 1; }
.demo-phone-home {
  position: absolute; bottom: 5px; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 3px;
  background: rgba(255,255,255,0.6);
  border-radius: 2px;
  z-index: 3;
}

/* Demo header */
.demo-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.demo-badge {
  font-size: 9pt; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--primary-color);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(232,101,10,0.1);
  border: 1px solid rgba(232,101,10,0.22);
}
.demo-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success-color);
  box-shadow: 0 0 10px rgba(74,222,128,0.7);
  animation: demo-pulse 2s infinite;
}
@keyframes demo-pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
.demo-card-title {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 14pt;
  color: var(--text-color);
  margin: 0;
}

/* =====================================================
   CREATIVE TRANSITIONS — 5 refined effects
   ===================================================== */

/* 1. UNDERLINE DRAW — accent words in headings */
.reveal h1 > .text-accent,
.reveal h2 > .text-accent,
.reveal h3 > .text-accent {
  position: relative;
  display: inline-block;
}
.reveal h1 > .text-accent::after,
.reveal h2 > .text-accent::after,
.reveal h3 > .text-accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 2px;
}
.reveal section.present h1 > .text-accent::after,
.reveal section.present h2 > .text-accent::after,
.reveal section.present h3 > .text-accent::after {
  animation: ul-draw 650ms 450ms cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes ul-draw { to { transform: scaleX(1); } }

/* 2. CARDS STAGGER ENTRY — grids on slide enter (skip elements with data-id to avoid conflict with auto-animate morphs) */
.reveal section.present .card:not([data-id]),
.reveal section.present .pillar:not([data-id]),
.reveal section.present .pipeline-step:not([data-id]),
.reveal section.present .ratio-cell:not([data-id]),
.reveal section.present .compare-col:not([data-id]) {
  opacity: 0;
  animation: stagger-in 500ms ease-out forwards;
}
.reveal section.present .card:nth-child(1),
.reveal section.present .pillar:nth-child(1),
.reveal section.present .pipeline-step:nth-child(1),
.reveal section.present .ratio-cell:nth-child(1),
.reveal section.present .compare-col:nth-child(1) { animation-delay: 150ms; }

.reveal section.present .card:nth-child(2),
.reveal section.present .pillar:nth-child(2),
.reveal section.present .pipeline-step:nth-child(2),
.reveal section.present .ratio-cell:nth-child(2),
.reveal section.present .compare-col:nth-child(2) { animation-delay: 280ms; }

.reveal section.present .card:nth-child(3),
.reveal section.present .pillar:nth-child(3),
.reveal section.present .pipeline-step:nth-child(3),
.reveal section.present .ratio-cell:nth-child(3),
.reveal section.present .compare-col:nth-child(3) { animation-delay: 410ms; }

.reveal section.present .card:nth-child(4),
.reveal section.present .pipeline-step:nth-child(4) { animation-delay: 540ms; }

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 3. COUNTER-UP — opacity entry, JS animates the number */
.reveal .counter { transition: none; }

/* 4. BLUR-TO-SHARP — slide 1 promise + final CTA */
.reveal section#slide-01.present h1,
.reveal section#slide-14.present h1,
.reveal section#slide-15-cta.present h1 {
  animation: blur-in 900ms ease-out both;
}
@keyframes blur-in {
  from { filter: blur(14px); opacity: 0; transform: scale(0.97); }
  to   { filter: blur(0);    opacity: 1; transform: scale(1); }
}

/* For/Not-for layout (slide 2) */
.reveal .for-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 36px;
}
.reveal .for-header {
  font-size: 11pt;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}
.reveal .for-header.for-not { color: var(--muted-color); }
.reveal .for-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.reveal .for-grid li {
  font-size: 16pt;
  line-height: 1.55;
  margin-bottom: 14px;
  color: var(--text-color);
}
.reveal .for-grid .for-not-list li { color: var(--muted-color); }

/* Mega stat (slide 3) — with subtle breathing motion */
.reveal .stat-mega {
  font-family: var(--heading-font);
  font-weight: 800;
  color: var(--primary-color);
  font-size: 180pt;
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin: 24px 0 14px;
  display: inline-block;
}
.reveal section.present .stat-mega {
  animation: mega-breathe 5s ease-in-out infinite;
}
@keyframes mega-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* ============================================================
   VISUAL ELEMENTS — animated, on-brand, non-neon
   ============================================================ */

/* Slide 1 — Multiplier visual (polished: no container, refined geometry, breathing room) */
.hook-multiplier {
  display: grid;
  grid-template-columns: 1fr auto 2fr;
  gap: 56px;
  align-items: center;
  margin: 40px 0 0;
  padding: 0;
  background: transparent;
  border: none;
  max-width: 760px;
}
.hook-side { text-align: left; }
.hook-team {
  display: flex;
  gap: 14px;
  align-items: center;
  height: 80px;
}
.hook-dot {
  width: 28px; height: 28px;
  background: var(--text-color);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
}
.reveal section.present .hook-dot {
  animation: hook-pop 500ms cubic-bezier(.34,1.56,.64,1) forwards;
}
.reveal section.present .hook-dot:nth-child(1) { animation-delay: 400ms; }
.reveal section.present .hook-dot:nth-child(2) { animation-delay: 540ms; }
.reveal section.present .hook-dot:nth-child(3) { animation-delay: 680ms; }

.hook-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateX(-6px);
}
.reveal section.present .hook-arrow {
  animation: hook-arrow-in 600ms cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: 820ms;
}
@keyframes hook-arrow-in {
  to { opacity: 1; transform: translateX(0); }
}
.hook-arrow-label {
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-color);
}
.hook-arrow-line {
  position: relative;
  width: 92px;
  height: 2px;
  background: var(--text-color);
}
.hook-arrow-line::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--text-color);
  border-right: 2px solid var(--text-color);
  transform: translateY(-50%) rotate(45deg);
}

.hook-output {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  height: 80px;
}
.hook-sq {
  background: var(--primary-color);
  border-radius: 5px;
  opacity: 0;
  transform: scale(0.4);
}
.reveal section.present .hook-sq {
  animation: hook-pop 480ms cubic-bezier(.34,1.56,.64,1) forwards;
}
.reveal section.present .hook-sq:nth-child(1)  { animation-delay: 950ms; }
.reveal section.present .hook-sq:nth-child(2)  { animation-delay: 1010ms; }
.reveal section.present .hook-sq:nth-child(3)  { animation-delay: 1070ms; }
.reveal section.present .hook-sq:nth-child(4)  { animation-delay: 1130ms; }
.reveal section.present .hook-sq:nth-child(5)  { animation-delay: 1190ms; }
.reveal section.present .hook-sq:nth-child(6)  { animation-delay: 1250ms; }
.reveal section.present .hook-sq:nth-child(7)  { animation-delay: 1310ms; }
.reveal section.present .hook-sq:nth-child(8)  { animation-delay: 1370ms; }
.reveal section.present .hook-sq:nth-child(9)  { animation-delay: 1430ms; }
.reveal section.present .hook-sq:nth-child(10) { animation-delay: 1490ms; }
@keyframes hook-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
.hook-label {
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-color);
  margin-top: 18px;
  font-weight: 600;
}

/* Slide 7 — Pipeline arrows with traveling flow dot */
.reveal .pipeline { position: relative; }
.pipeline-arrows {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
}
.pipeline-arrows svg {
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  height: 32px;
  overflow: visible;
}
.pipeline-arrows .pipe-track {
  stroke: var(--border-color);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 6 6;
}
.pipeline-arrows .pipe-dot {
  fill: var(--primary-color);
  filter: drop-shadow(0 0 6px rgba(232, 101, 10, 0.6));
}
.reveal .pipeline { z-index: 1; }
.reveal .pipeline-step { background: #FFFFFF; z-index: 2; position: relative; }

/* Slide 8 — Segmented 10/80/10 horizontal bar (replaces 3 cells) */
.segmented-bar {
  display: grid;
  grid-template-columns: 10fr 80fr 10fr;
  gap: 2px;
  height: 96px;
  margin: 32px 0 22px;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
}
.seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  position: relative;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
}
.seg.middle { background: var(--primary-color); }
.seg.middle .seg-pct,
.seg.middle .seg-label,
.seg.middle .seg-desc { color: #FFFFFF; }
.seg-pct {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 28pt;
  color: var(--primary-color);
  line-height: 1;
  letter-spacing: -0.02em;
}
.seg-label {
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-color);
  font-weight: 600;
  margin-top: 6px;
}
.seg-desc {
  font-size: 11pt;
  color: var(--muted-color);
  margin-top: 4px;
}
.reveal section.present .seg {
  animation: seg-fill 700ms cubic-bezier(.65,0,.35,1) forwards;
}
.reveal section.present .seg.left   { animation-delay: 200ms; }
.reveal section.present .seg.middle { animation-delay: 380ms; }
.reveal section.present .seg.right  { animation-delay: 560ms; }
@keyframes seg-fill {
  to { transform: scaleX(1); opacity: 1; }
}

/* Slide 14 CTA — pulsing ring around the button */
.cta-button-wrap {
  display: inline-block;
  position: relative;
  margin-top: 36px;
}
.cta-button-wrap::before,
.cta-button-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 2px solid var(--primary-color);
  opacity: 0;
  pointer-events: none;
}
.reveal section.present .cta-button-wrap::before {
  animation: cta-ring 2.4s ease-out infinite;
}
.reveal section.present .cta-button-wrap::after {
  animation: cta-ring 2.4s ease-out infinite 1.2s;
}
@keyframes cta-ring {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.18); opacity: 0; }
}
.reveal .cta-button-wrap .cta-button { margin-top: 0; }

/* 5. WORD-BY-WORD FADE — slide 1 punchline */
.words-fade > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
}
.reveal section.present .words-fade > span {
  animation: word-in 500ms ease-out forwards;
  animation-delay: calc(var(--i, 0) * 130ms + 250ms);
}
@keyframes word-in {
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   CASE STUDY GALLERY — 10 production cases
   Consistent text | visual split, light theme, 1 orange accent
   ===================================================== */

/* Intro / divider */
.reveal .cases-formats {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 30px;
}
.reveal .cases-formats .pill { font-size: 12pt; padding: 7px 14px; }

/* Two-column case layout */
.reveal .case-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 46px;
  align-items: center;
  flex: 1;
  min-height: 0;
  margin-top: 4px;
}
.reveal .case-grid.flip { grid-template-columns: 0.96fr 1.04fr; }
.reveal .case-grid.flip .case-text { order: 2; }
.reveal .case-grid.flip .case-visual { order: 1; }

.reveal .case-text .case-body {
  font-size: 16.5pt;
  line-height: 1.55;
  color: var(--muted-color);
  margin: 0;
}
.reveal .case-text .case-body strong { color: var(--text-color); font-weight: 700; }

.reveal .case-metric {
  margin-top: 24px;
  padding-left: 18px;
  border-left: 3px solid var(--primary-color);
}
.reveal .case-metric .case-metric-value {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 25pt;
  color: var(--primary-color);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}
.reveal .case-metric .case-metric-label {
  font-size: 11pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-color);
  font-weight: 600;
  margin: 7px 0 0;
}

/* Visual column + framed media */
.reveal .case-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
}
.reveal .case-frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,0.32);
  background: #fff;
  display: flex;
  max-height: 432px;
  max-width: 100%;
}
.reveal .case-frame img,
.reveal .case-frame video {
  display: block;
  max-height: 432px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Carousel strip (3 phone slides, slight fan) */
.reveal .case-strip { display: flex; gap: 14px; align-items: center; justify-content: center; }
.reveal .case-strip img {
  height: 322px; width: auto;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 16px 38px -16px rgba(0,0,0,0.4);
}
.reveal .case-strip img:nth-child(1) { transform: rotate(-4deg) translateY(6px); }
.reveal .case-strip img:nth-child(3) { transform: rotate(4deg) translateY(6px); }
.reveal .case-strip img:nth-child(2) { z-index: 2; }

/* Input → output (selfie→portraits, brief→ads) */
.reveal .case-io { display: flex; align-items: center; gap: 22px; justify-content: center; }
.reveal .case-io-in img {
  width: 150px; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--border-color);
  box-shadow: 0 14px 32px -14px rgba(0,0,0,0.34);
}
.reveal .case-io-in .case-io-tag,
.reveal .case-io-out .case-io-tag {
  display: block; text-align: center;
  font-size: 9.5pt; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted-color); font-weight: 600; margin-top: 8px;
}
.reveal .case-io-arrow { color: var(--primary-color); font-size: 30pt; font-weight: 800; line-height: 1; }
.reveal .case-io-out .case-io-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px;
}
.reveal .case-io-out .case-io-grid img {
  width: 104px; aspect-ratio: 1; object-fit: cover;
  border-radius: 9px; border: 1px solid var(--border-color);
  box-shadow: 0 8px 20px -12px rgba(0,0,0,0.3);
}
.reveal .case-io-out .case-io-grid .case-io-more {
  display: flex; align-items: center; justify-content: center;
  width: 104px; aspect-ratio: 1; border-radius: 9px;
  background: linear-gradient(135deg, rgba(232,101,10,0.13), rgba(232,101,10,0.04));
  border: 1px solid rgba(232,101,10,0.32);
  color: var(--primary-color);
  font-family: var(--heading-font); font-weight: 800; font-size: 17pt;
}

/* Translation pair FR → EN */
.reveal .case-pair { display: flex; align-items: center; gap: 16px; justify-content: center; }
.reveal .case-pair figure { margin: 0; text-align: center; }
.reveal .case-pair img {
  height: 372px; width: auto;
  border-radius: 12px; border: 1px solid var(--border-color);
  box-shadow: 0 16px 38px -16px rgba(0,0,0,0.38);
}
.reveal .case-pair figcaption {
  font-size: 10pt; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted-color); margin-top: 9px; font-weight: 600;
}
.reveal .case-pair-arrow { color: var(--primary-color); font-size: 26pt; font-weight: 800; }

/* Manuscript card (literary case) */
.reveal .case-manuscript {
  position: relative;
  background: #FBF7EE;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 14px;
  padding: 28px 30px 22px;
  max-height: 432px;
  width: 100%;
  max-width: 470px;
  overflow: hidden;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,0.3);
}
.reveal .case-manuscript .ms-meta {
  font-family: var(--body-font);
  font-size: 9pt; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--primary-color); margin: 0 0 8px;
}
.reveal .case-manuscript .ms-title {
  font-family: var(--heading-font);
  font-size: 22pt; font-weight: 800; font-style: italic;
  color: #160f0a; line-height: 1.05; margin: 0 0 4px; letter-spacing: -0.01em;
}
.reveal .case-manuscript .ms-sub {
  font-family: var(--body-font);
  font-size: 9.5pt; color: #6b5a48; margin: 0 0 16px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,0.1);
}
.reveal .case-manuscript .ms-body p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12pt; line-height: 1.62; color: #2a1f17; margin: 0 0 9px;
}
.reveal .case-manuscript .ms-body .dropcap::first-letter {
  font-family: var(--heading-font); font-weight: 800;
  float: left; font-size: 46pt; line-height: 0.78;
  padding: 4px 9px 0 0; color: var(--primary-color);
}
.reveal .case-manuscript .ms-stamp {
  position: absolute; right: 18px; top: 18px;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid rgba(232,101,10,0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--body-font);
  font-size: 7.5pt; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary-color); text-align: center; line-height: 1.2;
  transform: rotate(-11deg); background: rgba(251,247,238,0.6);
}
.reveal .case-manuscript::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 92px;
  background: linear-gradient(transparent, #FBF7EE 78%);
  pointer-events: none;
}

/* LinkedIn post card */
.reveal .li-card {
  width: 392px; max-width: 100%;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,0.3);
  font-family: var(--body-font);
}
.reveal .li-head { display: flex; gap: 11px; align-items: center; padding: 15px 16px 9px; }
.reveal .li-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  background: #efe7df; flex-shrink: 0;
}
.reveal .li-avatar--ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ececec, #dcdcdc);
}
.reveal .li-avatar--ph svg { width: 26px; height: 26px; color: #9a9a9a; }
.reveal .li-name { font-size: 12.5pt; font-weight: 700; color: var(--text-color); line-height: 1.15; margin: 0; }
.reveal .li-sub { font-size: 9.5pt; color: var(--muted-color); margin: 2px 0 0; }
.reveal .li-text {
  padding: 2px 16px 12px; margin: 0;
  font-size: 10.5pt; line-height: 1.5; color: #1a1a1a;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.reveal .li-media { width: 100%; max-height: 168px; overflow: hidden; background: #f3f3f3; }
.reveal .li-media img { width: 100%; height: 100%; max-height: 168px; object-fit: cover; display: block; }
.reveal .li-stats {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 16px; border-top: 1px solid var(--border-color);
  font-size: 10pt; color: var(--muted-color);
}
.reveal .li-stats .li-likes { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-color); }
.reveal .li-stats .li-likes .li-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary-color); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.reveal .li-stats .li-likes .li-thumb svg { width: 11px; height: 11px; }

/* Big number-only case (team ×3) */
.reveal .case-bignum-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.reveal .case-bignum {
  font-family: var(--heading-font); font-weight: 800;
  color: var(--primary-color); font-size: 168pt; line-height: 0.86;
  letter-spacing: -0.04em; margin: 0;
}
.reveal .case-bignum-sub {
  font-size: 13pt; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted-color); font-weight: 600; margin-top: 14px;
}

/* Soft entry for case media + metric */
.reveal section.present .case-visual { animation: stagger-in 620ms ease-out 180ms both; }
.reveal section.present .case-metric { animation: stagger-in 560ms ease-out 360ms both; }