/* ============================================================
   Arkeero — Onepage
   Brand: deep black + electric blue, code-style braces
   ============================================================ */

:root {
  /* Strict brand palette: black · white · #2997FF */
  --bg: #000000;
  --bg-2: #060606;
  --surface: #0c0c0c;
  --surface-2: #141414;
  --line: #1f1f1f;
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, .72);
  --text-dim: rgba(255, 255, 255, .45);
  --brand: #2997ff;
  --brand-2: #2997ff;
  /* alias kept for legacy refs */
  --brand-3: #2997ff;
  /* alias kept for legacy refs */
  --accent: #2997ff;
  /* alias kept for legacy refs */
  /* Layered: subtle white gloss on top + solid brand blue below.
     Keeps white text readable on every background element using --grad-brand. */
  --grad-brand: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 55%), #2997ff;
  --grad-text: linear-gradient(135deg, #ffffff 0%, #2997ff 100%);
  --shadow-glow: 0 20px 60px -10px rgba(41, 151, 255, .45);
  --radius: 18px;
  --radius-sm: 12px;
  --t-fast: .25s cubic-bezier(.2, .8, .2, 1);
  --t: .55s cubic-bezier(.2, .8, .2, 1);
  --t-slow: .9s cubic-bezier(.2, .8, .2, 1);
  --maxw: 1200px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   Slide layout: every section behaves like a presentation slide.
   - Same minimum height (100vh)
   - Vertically centered content
   - Smaller paddings so content fits without being cut
   ============================================================ */
body>section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
  scroll-margin-top: 64px;
}

/* Inserted by js/slide-fit.js. Vertical centering and CROSS-axis centering
   so children with their own max-width (like .hero__inner) stay anchored
   to the horizontal midline of the section. Transform-origin centred so
   scaled slides remain visually centred too. */
.section-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform-origin: center top;
  padding-top: 0;
  margin-bottom: 0;
  /* When slide-fit applies transform:scale(...) the wrapper becomes its
     own stacking context. Without an explicit z-index it would render at
     auto, which puts it BELOW any sibling that has its own positive
     z-index (e.g. .stats__planet z:1) — so the planet ends up covering
     the heading. z:2 keeps the wrapped flow content above decorative
     absolutely-positioned siblings while staying below the fixed nav. */
  position: relative;
  z-index: 2;
}

.section-inner>* {
  width: 100%;
}

/* Tighter vertical rhythm than the original 120px — and viewport-aware so
   short laptop screens (1366×768, 1280×720) don't lose a fifth of the
   slide to top/bottom padding. slide-fit.js reads the computed padding
   when scaling, so smaller padding here = less aggressive downscale =
   more readable text on short monitors. The 72px floor on padding-top
   keeps every slide's content below the fixed navigation bar (~64px),
   and we use the SAME value for padding-bottom so the content stays
   visually centred on the viewport (asymmetric padding would shift it). */
.stats,
.ecosystem,
.kpis,
.formula,
.data,
.network,
.studio,
.news-formats,
.catalog,
.ctv,
.konnect,
.cases,
.dooh,
.peoople,
.perf,
.prime,
.fmcases,
.awards {
  padding-top: 0;
  padding-bottom: clamp(72px, 8vh, 96px);
}

/* Section heads: smaller bottom margins so the body has room */
.stats__head,
.ecosystem__head,
.kpis__head,
.formula__head,
.data__head,
.network__head,
.news-formats__head,
.catalog__head,
.ctv__head,
.konnect__head,
.cases__head,
.dooh__head,
.peoople__head,
.perf__head,
.fmcases__head,
.awards__head {
  margin-bottom: clamp(18px, 3vh, 36px);
}

/* Keep slide 2 heading above the absolutely-positioned planet AND its
   globe.gl HTML pin overlay (which mounts inside #globeViz with its own
   stacking context). z-index needs to clear those. */
.stats__head {
  position: relative;
  z-index: 10;
}

.stats__planet {
  z-index: 1 !important;
}

#globeViz {
  z-index: 1;
}

/* The .section-inner wrapper (z:2) spans the full section width and sits
   above the planet (z:1) — even where it's visually empty, it eats pointer
   events and blocks dragging the globe. Make the wrapper transparent to
   the cursor and re-enable hits only on real interactive content (cards).
   The head holds no clickable elements, so it stays pass-through too. */
#stats>.section-inner {
  pointer-events: none;
}

#stats>.section-inner .stat-card {
  pointer-events: auto;
}

/* Constrain large media so it can't push content off-screen */
.stats__map {
  max-height: 38vh;
  overflow: hidden;
}

.stats__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.konnect__hero {
  max-height: 55vh;
}

.studio__reel-frame {
  max-height: 50vh;
  justify-self: center;
}

/* Brand-lift block in Formula: tighten to free vertical space */
.brandlift {
  padding: 24px 24px;
}

h1,
h2,
h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0;
}

/* ============================================================
   Liquid Ether — WebGL fluid simulation (deepest background layer)
   ============================================================ */
.liquid-ether {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  overflow: hidden;
}

.liquid-ether canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================================
   Background FX (orbs + grid)
   ============================================================ */
.bg-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Original brand orbs — restored as the deepest background layer. */
.bg-fx__orb {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .35;
  mix-blend-mode: screen;
  animation: floatOrb 22s ease-in-out infinite alternate;
}

.bg-fx__orb--a {
  top: -20vmax;
  left: -15vmax;
  background: radial-gradient(circle at 30% 30%, #2997ff, transparent 60%);
}

.bg-fx__orb--b {
  bottom: -25vmax;
  right: -15vmax;
  background: radial-gradient(circle at 70% 70%, #2997ff, transparent 60%);
  animation-duration: 30s;
  animation-direction: alternate-reverse;
}

@keyframes floatOrb {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(8vmax, 4vmax) scale(1.1);
  }
}

/* Aurora bands — three slanted, blurred ribbons that drift across the screen.
   Outer .aurora__band sets static rotation/position, inner runs the slide
   animation so the two transforms don't fight each other. */
.aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.aurora__band {
  position: absolute;
  width: 200%;
  height: 60vh;
  left: -50%;
  pointer-events: none;
}

.aurora__band-inner {
  width: 100%;
  height: 100%;
  filter: blur(80px) saturate(1.4);
  mix-blend-mode: screen;
  animation: auroraSlide 28s ease-in-out infinite alternate;
}

.aurora__band--1 {
  top: -62vh;
  transform: rotate(-14deg);
  opacity: .18;
}

.aurora__band--1 .aurora__band-inner {
  background: linear-gradient(100deg,
      transparent 8%,
      rgba(41, 151, 255, .55) 38%,
      rgba(255, 255, 255, .20) 50%,
      rgba(41, 151, 255, .55) 62%,
      transparent 92%);
}

.aurora__band--2 {
  top: -18vh;
  transform: rotate(8deg);
  opacity: .18;
}

.aurora__band--2 .aurora__band-inner {
  background: linear-gradient(260deg,
      transparent 6%,
      rgba(41, 151, 255, .45) 36%,
      rgba(255, 255, 255, .10) 52%,
      rgba(41, 151, 255, .40) 68%,
      transparent 96%);
  animation-duration: 38s;
  animation-direction: alternate-reverse;
  animation-delay: -12s;
}

.aurora__band--3 {
  top: 12vh;
  transform: rotate(-5deg);
  opacity: .18;
}

.aurora__band--3 .aurora__band-inner {
  background: linear-gradient(115deg,
      transparent 12%,
      rgba(41, 151, 255, .50) 48%,
      transparent 84%);
  animation-duration: 46s;
  animation-delay: -22s;
}

@keyframes auroraSlide {
  0% {
    transform: translate(-18%, -10%) scale(1);
  }

  50% {
    transform: translate(0%, 8%) scale(1.06);
  }

  100% {
    transform: translate(18%, -4%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora__band-inner {
    animation: none;
  }
}

.bg-fx__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 32px;
  backdrop-filter: blur(14px);
  background: rgba(5, 6, 8, .55);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.nav.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(5, 6, 8, .85);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  height: 32px;
}

.nav__brand img {
  height: 24px;
  width: auto;
  display: block;
}

.nav__brand-sep {
  display: block;
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.35);
  margin: 0 10px;
}

.nav__brand-partner {
  height: 32px !important;
  width: auto !important;
  opacity: 0.9;
}

.nav__links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--text-2);
  font-weight: 500;
}

.nav__links a {
  position: relative;
  padding: 6px 0;
  transition: color var(--t-fast);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--brand);
  transition: right var(--t-fast);
}

.nav__links a:hover {
  color: var(--text);
}

.nav__links a:hover::after {
  right: 0;
}

/* Presentation tools (slide counter + fullscreen) on the right side of the nav */
.nav__tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__counter {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
}

.nav__counter em {
  font-style: normal;
  color: var(--text-dim);
  margin: 0 2px;
}

#navCounterTotal {
  color: var(--text-dim);
}

.nav__icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform .25s var(--spring), background .25s ease, border-color .25s ease, color .25s ease;
}

.nav__icon-btn svg {
  width: 16px;
  height: 16px;
}

.nav__icon-btn:hover {
  transform: scale(1.08);
  background: rgba(41, 151, 255, .18);
  border-color: rgba(41, 151, 255, .55);
  color: var(--brand-2);
}

/* ============================================================
   Pickers (language + country in-presentation switchers)
   ============================================================ */
.picker {
  position: relative;
  display: inline-flex;
}

.picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.picker__trigger svg {
  width: 14px;
  height: 14px;
  opacity: .75;
}

.picker__trigger:hover,
.picker.is-open .picker__trigger {
  background: rgba(41, 151, 255, .14);
  border-color: rgba(41, 151, 255, .5);
  color: var(--brand-2);
}

.picker__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(8, 14, 26, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s var(--spring);
  z-index: 50;
}

.picker.is-open .picker__menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.picker__separator {
  height: 1px;
  background: var(--line);
  margin: 4px 12px;
}

.picker__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.picker__option:hover {
  background: rgba(41, 151, 255, .12);
  color: var(--brand-2);
}

.picker__option.is-active {
  background: rgba(41, 151, 255, .2);
  color: var(--brand-2);
}

.picker__code {
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: var(--text-dim);
  min-width: 34px;
  text-align: center;
}

.picker__option.is-active .picker__code {
  background: rgba(41, 151, 255, .25);
  color: var(--brand-2);
}

/* Flag image inside picker trigger + options */
.picker__flag{
  width:24px;
  height:18px;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.15);
  display:block;
  flex-shrink:0;
}
.picker__trigger .picker__flag{
  /* The trigger button is compact — flag takes the whole content. */
  width:26px;
  height:18px;
}

.picker__label {
  flex: 1;
}

/* Generic flag-img class used wherever a country flag appears in the deck
   (e.g. the reach slide title). */
.flag-img{
  display:inline-block;
  width:auto;
  height:1em;
  vertical-align:-0.12em;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.15);
}

/* Language picker is hidden for now — the country selector drives the deck
   language via each country's _meta.languages. Remove this rule to bring
   the manual language switcher back. */
.lang-picker {
  display: none !important;
}

/* ============================================================
   SPLASH — brand intro shown while assets load
   ============================================================ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: radial-gradient(ellipse at center, #0a1628 0%, #050a14 70%, #02060c 100%);
  transition: opacity .8s ease .4s, visibility .8s ease .4s;
}

.splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash__logo {
  width: min(60vw, 360px);
  height: auto;
  filter: drop-shadow(0 14px 40px rgba(41, 151, 255, .55));
  animation: splashLogo 1.2s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes splashLogo {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.splash__bar {
  width: 240px;
  height: 3px;
  background: rgba(255, 255, 255, .08);
  border-radius: 2px;
  overflow: hidden;
}

.splash__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  animation: splashFill 1.6s cubic-bezier(.4, 0, .2, 1) forwards;
  box-shadow: 0 0 12px rgba(41, 151, 255, .7);
}

@keyframes splashFill {
  0% {
    width: 0;
  }

  60% {
    width: 80%;
  }

  100% {
    width: 100%;
  }
}

/* ============================================================
   PRESENTER HUD — toggled with the P key
   ============================================================ */
.presenter {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  width: 300px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(8, 12, 22, .92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(41, 151, 255, .3);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  opacity: 0;
  transform: translateY(20px) scale(.96);
  pointer-events: none;
  transition: opacity .35s var(--spring), transform .4s var(--spring);
}

.presenter.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.presenter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.presenter__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brand-2);
}

.presenter__close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: color .2s ease, background .2s ease;
}

.presenter__close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .08);
}

.presenter__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.presenter__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
}

.presenter__label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}

.presenter__row strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}

.presenter__hint {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: .04em;
  line-height: 1.6;
}

.presenter__hint kbd {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 1px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  font-size: 10px;
  font-family: inherit;
  color: var(--text);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn--primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-glow);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 70px -8px rgba(41, 151, 255, .55);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

.btn--ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.contact__top {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform .35s var(--spring), border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.contact__top svg {
  width: 24px;
  height: 24px;
}

.contact__top:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 12px 30px -10px rgba(41, 151, 255, .6);
}

/* ============================================================
   HERO (logo intro with particles)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 120px 32px 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
  /* keep oversized particle canvas inside the section */
}

.hero__inner {
  position: relative;
  /* establish stacking above the particle canvas */
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin: 0 auto 32px;
}

.hero__logos-sep {
  display: block;
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
  margin: 0 32px;
  opacity: 0;
  transition: opacity .9s ease;
}

.hero.is-formed .hero__logos-sep {
  opacity: 1;
}

.hero__wpp-logo {
  height: 162px;
  width: auto;
  display: block;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .9s ease;
}

.hero.is-formed .hero__wpp-logo {
  opacity: 1;
}

.hero__logo-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 2439 / 790;
  flex-shrink: 1;
  /* Glow halo is now on the solid SVG only — the particle canvas lives
     outside the wrap, so this filter no longer affects the formation. */
  filter: drop-shadow(0 28px 72px rgba(41, 151, 255, .38));
}

.hero__logo-canvas {
  /* Fills the whole hero section so particles can fly in from the
     viewport edges. Sits behind the in-flow content via z-index:0. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}

.hero__logo-solid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}

.hero.is-formed .hero__logo-canvas {
  opacity: 0;
}

.hero.is-formed .hero__logo-solid {
  opacity: 1;
}

.hero__logo-fallback {
  width: 100%;
  height: auto;
  display: block;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-2);
  background: rgba(255, 255, 255, .02);
  backdrop-filter: blur(8px);
  margin-bottom: 24px;
}

.hero__event {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}

.hero__event-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  background: linear-gradient(90deg, #2997ff 0%, #66c2ff 60%, #a8daff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(41, 151, 255, .18);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(41, 151, 255, .18);
  }

  50% {
    box-shadow: 0 0 0 9px rgba(41, 151, 255, 0);
  }
}

.hero__lead {
  max-width: 680px;
  margin: 0 auto 32px;
  color: var(--text-2);
  font-size: clamp(15px, 1.4vw, 18px);
}

.hero__lead strong {
  color: var(--text);
  font-weight: 600;
}

.hero__lead em {
  color: var(--text);
  font-style: normal;
  font-weight: 500;
}

.hero__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   HERO formula: Data + IA avanzada (Apple-style entrance)
   ============================================================ */
.hero__formula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 28px;
  perspective: 1200px;
}

.fcard {
  position: relative;
  width: 170px;
  height: 110px;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(41, 151, 255, .22), transparent 60%),
    linear-gradient(160deg, rgba(41, 151, 255, .08), rgba(255, 255, 255, .02));
  border: 1px solid rgba(41, 151, 255, .35);
  overflow: hidden;
  box-shadow:
    0 22px 50px -22px rgba(41, 151, 255, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .04);
  animation: fcardFloat 7s ease-in-out infinite;
}

.fcard--ia {
  animation-delay: -3.5s;
}

.fcard::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  opacity: 0;
  pointer-events: none;
  animation: fcardShine 6s ease-in-out infinite;
}

.fcard--ia::before {
  animation-delay: -3s;
}

.fcard__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.fcard__label {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}

.fcard__big {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #2997ff 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.03em;
}

.fcard__sub {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
  letter-spacing: .04em;
  margin-top: 2px;
}

.fplus {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2997ff;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 0 24px rgba(41, 151, 255, .5);
  animation: fplusPulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

.fplus::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(41, 151, 255, .45);
  animation: fplusRing 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

.fplus svg {
  width: 22px;
  height: 22px;
}

@keyframes fcardFloat {

  0%,
  100% {
    transform: translateY(0) rotateX(0);
  }

  50% {
    transform: translateY(-6px) rotateX(2deg);
  }
}

@keyframes fcardShine {

  0%,
  100% {
    background-position: -100% 50%;
    opacity: 0;
  }

  45% {
    opacity: .9;
  }

  50% {
    background-position: 200% 50%;
    opacity: 0;
  }
}

@keyframes fplusPulse {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 24px rgba(41, 151, 255, .5);
  }

  50% {
    transform: scale(1.08) rotate(90deg);
    box-shadow: 0 0 40px rgba(41, 151, 255, .85);
  }
}

@keyframes fplusRing {

  0%,
  100% {
    transform: scale(1);
    opacity: .55;
  }

  50% {
    transform: scale(1.55);
    opacity: 0;
  }
}

/* Apple-style staggered entrance for the inner items (fires when parent gets .is-visible) */
.hero__formula>* {
  opacity: 0;
  transform: translateY(28px) scale(.84);
  filter: blur(6px);
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform .9s cubic-bezier(.16, 1, .3, 1),
    filter .7s ease;
}

.hero__formula.is-visible>* {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.hero__formula.is-visible>*:nth-child(1) {
  transition-delay: 0s, 0s, 0s;
}

.hero__formula.is-visible>*:nth-child(2) {
  transition-delay: .22s, .22s, .22s;
}

.hero__formula.is-visible>*:nth-child(3) {
  transition-delay: .42s, .42s, .42s;
}

@media (max-width:560px) {
  .hero__formula {
    flex-direction: column;
    gap: 12px;
  }

  .fcard {
    width: 180px;
    height: 110px;
  }

  .fcard__label {
    font-size: 32px;
  }

  .fcard__big {
    font-size: 44px;
  }
}

/* keyframe used by .contact__brace too */
@keyframes braceWobble {

  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-6px) rotate(-3deg);
  }
}

.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero__scroll span {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--brand));
  animation: scrollHint 2s ease-in-out infinite;
}

@keyframes scrollHint {

  0%,
  100% {
    transform: scaleY(.4);
    transform-origin: top;
    opacity: .4;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}

/* ============================================================
   STATS
   ============================================================ */
.stats {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.stats__head {
  /* Anchored to the left column with the cards so the right half of the
     slide is free for the globe + its pin labels — no more overlap with
     the title text. */
  text-align: left;
  max-width: 520px;
  margin: 0 0 clamp(20px, 3.5vh, 56px);
  align-self: flex-start;
}

@media (max-width:880px) {
  .stats__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(20px, 3.5vh, 56px);
    align-self: center;
  }
}

.kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
  font-weight: 600;
}

.stats__head h2 {
  font-size: clamp(22px, 3.2vw, 40px);
}
.placeholder__inner h2 {
  font-size: clamp(30px, 4.5vw, 56px);
}

.accent {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Slide 2 layout: cards left + planet absolutely positioned behind on the right */
.stats {
  position: relative;
  /* Use the standard centred flex from body > section so this slide aligns
     with the rest of the deck. The planet is absolutely positioned and
     the cards are on the left (align-self:flex-start), so vertically
     centring the head+cards block doesn't collide with the globe. */
}

.stats__layout {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  align-self: flex-start;
  /* push to left edge of section */
}

.stats__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width:880px) {
  .stats__layout {
    max-width: 520px;
    align-self: center;
  }
}

@media (max-width:480px) {
  .stats__cards {
    grid-template-columns: 1fr;
  }
}

.stat-card {
  position: relative;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(41, 151, 255, .12), transparent 40%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(41, 151, 255, .4);
  box-shadow: 0 20px 40px -20px rgba(41, 151, 255, .4);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card__num {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 6px;
  font-feature-settings: "tnum";
  letter-spacing: -.01em;
}

.stat-card__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.stat-card__sub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.35;
}

/* ============================================================
   3D PLANET (slide 2) — globe.gl + custom HTML pin labels
   ============================================================ */
.stats__planet {
  position: absolute;
  z-index: 1;
  /* behind the cards (z-2) */
  /* Responsive: was a hard 1100px before, which on 1366/1380p monitors
     pushed the globe deep into the title's column and made the heading
     visually unreadable. clamp() scales it down on narrower viewports
     and only opens up to the original ~1100px on very wide screens. */
  width: clamp(540px, 55vw, 1100px);
  height: clamp(540px, 55vw, 1100px);
  right: clamp(-320px, -18vw, -140px);
  top: -8%;
  pointer-events: auto;
  /* still interactive */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Cinematic entry: starts large (1.5×) and faded out, settles to 1.0× */
  opacity: 0;
  transform: translateY(-50%) scale(1.5);
  transition:
    opacity 1.4s cubic-bezier(.16, 1, .3, 1),
    transform 1.4s cubic-bezier(.16, 1, .3, 1);
}

.stats__planet.is-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.globe,
#globeViz {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: grab;
  overflow: hidden;
}

.globe:active,
#globeViz:active {
  cursor: grabbing;
}

/* globe.gl manages the canvas; just make sure it stays as a block */
#globeViz canvas {
  display: block;
}

/* Desktop breakpoints (1280, 1100) folded into the clamp() above —
   keeping the explicit pixel fallbacks would override the responsive
   sizing on those exact viewport widths. Mobile breakpoints below stay
   because they switch the planet from absolute to relative layout. */
@media (max-width:880px) {
  .stats {
    padding-bottom: 580px;
  }

  /* room for planet stacked below cards */
  .stats__planet {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: auto;
    aspect-ratio: 1 / 1;
    right: auto;
    top: auto;
    transform: none;
    margin: 24px auto 0;
  }
}

@media (max-width:560px) {
  .stats__planet {
    max-width: 340px;
  }

  .stats {
    padding-bottom: 480px;
  }
}

/* Subtle hint that the globe is draggable */
.stats__planet-hint {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  pointer-events: none;
  white-space: nowrap;
  animation: hintPulse 3s ease-in-out infinite;
}

@keyframes hintPulse {

  0%,
  100% {
    opacity: .4;
  }

  50% {
    opacity: .85;
  }
}

/* Pin labels rendered as HTML by globe.gl */
.gpin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 9px;
  background: rgba(0, 0, 0, .78);
  border: 1px solid rgba(41, 151, 255, .45);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(41, 151, 255, .35);
  transform: translate(-50%, -50%);
  transition: opacity .25s ease;
  pointer-events: auto;
}

.gpin:hover {
  border-color: #2997ff;
  box-shadow: 0 10px 28px rgba(41, 151, 255, .6);
}

.gpin__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--brand-2);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}
.gpin__icon svg { width: 14px; height: 14px; }

.gpin__flag {
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}

.gpin__label {
  font-size: 11px;
  color: #cfe8ff;
  letter-spacing: .02em;
}

/* Failed/unavailable globe.gl: hide canvas area gracefully */
#globeViz.is-failed {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(41, 151, 255, .12), transparent 60%);
  border: 1px dashed rgba(41, 151, 255, .3);
  border-radius: 50%;
  font-size: 12px;
  color: rgba(255, 255, 255, .45);
}

#globeViz.is-failed::before {
  content: "Sin conexión";
  padding: 12px;
}

@media (max-width:980px) {

  .globe,
  #globeViz {
    max-width: 380px;
  }
}

@media (max-width:560px) {

  .globe,
  #globeViz {
    max-width: 300px;
  }

  .gpin {
    font-size: 10px;
    padding: 4px 9px 4px 7px;
  }

  .gpin__flag {
    font-size: 12px;
  }
}

/* ============================================================
   ECOSYSTEM (slide 4) — vortex centerpiece + side panels
   ============================================================ */
.ecosystem {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: 1240px;
  margin: 0 auto;
}

.ecosystem__head {
  text-align: center;
  margin: 0 auto 28px;
}

.ecosystem__head h2,
.kpis__head h2,
.formula__head h2 {
  font-size: clamp(30px, 4.5vw, 56px);
}

.kpis__head p {
  color: var(--text-2);
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 17px);
}

/* ============================================================
   Ecosystem v2 — architecture stack (Data → Products → Channels)
   Three floating slabs with vertical data-flow pulses between them.
   Replaces the old vortex-hub layout (whose .eco-stage rules below
   are kept as harmless dead CSS; the HTML no longer references them).
   ============================================================ */
.eco-stack{
  position:relative;
  max-width:1000px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:8px 0 0;
}

.eco-layer{
  position:relative;
  padding:18px 28px;
  border-radius:18px;
  border:1px solid rgba(41,151,255,.30);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  /* Floating slab: depth shadow underneath + inner top highlight */
  box-shadow:
    0 18px 32px -10px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  isolation:isolate;
}
/* Thin glow line across the top edge of each slab */
.eco-layer::before{
  content:""; position:absolute;
  top:0; left:18px; right:18px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(41,151,255,.7), transparent);
  pointer-events:none;
}

.eco-layer--data{
  background:linear-gradient(135deg, rgba(41,151,255,.22), rgba(41,151,255,.04));
  border-color:rgba(41,151,255,.55);
}
.eco-layer--products{
  background:linear-gradient(135deg, rgba(120,180,255,.12), rgba(41,151,255,.04));
}
.eco-layer--channels{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.16);
}

.eco-layer__head{
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.eco-layer__name{
  font-family:'Montserrat',sans-serif;
  font-size:18px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text);
  text-align:center;
}

.eco-layer__items{
  display:flex; flex-wrap:wrap; gap:10px;
}

/* Channel chips — minimal pills */
.eco-layer__items--channels{ justify-content:center; }
.eco-layer__items--channels span{
  font-family:'Montserrat',sans-serif;
  font-size:13px; font-weight:500;
  padding:6px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text-2);
  transition:background .25s, color .25s, border-color .25s;
}
.eco-layer__items--channels span:hover{
  background:rgba(41,151,255,.18);
  border-color:rgba(41,151,255,.5);
  color:var(--brand-2);
}

/* Products row — 5 cards in a grid */
.eco-layer__items--products{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
  width:100%;
}
@media (max-width:760px){
  .eco-layer__items--products{ grid-template-columns:repeat(3, 1fr); }
}
.eco-prod{
  display:flex; flex-direction:column; align-items:center;
  gap:8px;
  padding:14px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  transition:background .25s, border-color .25s, transform .25s var(--spring);
}
.eco-prod:hover{
  background:rgba(41,151,255,.15);
  border-color:rgba(41,151,255,.55);
  transform:translateY(-2px);
}
.eco-prod__icon{
  display:grid; place-items:center;
  width:38px; height:38px;
  color:var(--brand-2);
}
.eco-prod__icon svg{ width:30px; height:30px; }
.eco-prod__icon-img{
  width:38px; height:38px;
  object-fit:contain;
}
.eco-prod__name{
  font-family:'Montserrat',sans-serif;
  font-size:12px; font-weight:700;
  color:var(--text);
  text-align:center;
}
.eco-prod--soon{ opacity:.78; }
.eco-prod__badge{
  position:absolute; top:-8px; right:-6px;
  font-family:'Montserrat',sans-serif;
  font-size:9px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:3px 7px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;
  box-shadow:0 4px 10px rgba(41,151,255,.4);
}

/* Data foundation — 3 emphasis pills, centered */
.eco-layer__items--data{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
}
.eco-data{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px;
  border-radius:14px;
  background:rgba(41,151,255,.18);
  border:1px solid rgba(41,151,255,.4);
}
.eco-data svg{ width:22px; height:22px; color:var(--brand-2); }
.eco-data strong{
  font-family:'Montserrat',sans-serif;
  font-size:13px; font-weight:700;
  color:var(--text);
}

/* Vertical pulse connectors between layers */
.eco-stack__flow{
  display:flex; justify-content:center; gap:64px;
  height:30px;
  position:relative;
}
.eco-stack__flow i{
  display:block;
  width:2px; height:100%;
  background:linear-gradient(180deg, rgba(41,151,255,.5), rgba(41,151,255,.05));
  position:relative;
  border-radius:1px;
}
.eco-stack__flow i::before{
  content:""; position:absolute;
  left:-3px; top:0;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--brand-2);
  box-shadow:0 0 12px var(--brand);
  animation:ecoFlowPulse 2.6s ease-in-out infinite;
}
.eco-stack__flow i:nth-child(2)::before{ animation-delay:.65s; }
.eco-stack__flow i:nth-child(3)::before{ animation-delay:1.30s; }
.eco-stack__flow i:nth-child(4)::before{ animation-delay:1.95s; }
@keyframes ecoFlowPulse{
  0%   { top:100%; opacity:0; }
  15%  { opacity:1; }
  85%  { opacity:1; }
  100% { top:0; opacity:0; }
}
/* Downward variant — pulse spawns at top and falls toward the layer below.
   Used between Channels (top) and Data Foundation (middle) so both flows
   visually converge into the Data hub. */
.eco-stack__flow--down i{
  background:linear-gradient(0deg, rgba(41,151,255,.5), rgba(41,151,255,.05));
}
.eco-stack__flow--down i::before{
  animation-name:ecoFlowPulseDown;
}
@keyframes ecoFlowPulseDown{
  0%   { top:0;   opacity:0; }
  15%  { opacity:1; }
  85%  { opacity:1; }
  100% { top:100%; opacity:0; }
}

/* Peoople logo a tad bigger than the rest — it's a wordmark, the others
   are letter-marks, so it visually balances better at +25%. */
.eco-prod__icon-img--peoople{
  width:58px !important;
  height:58px !important;
}

/* The 3-column stage: text blocks · vortex · orbs */
.eco-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  align-items: center;
  gap: 18px;
  /* Viewport-relative so the ecosystem slide doesn't force a 760+px
     section on a 768px laptop monitor (which makes slide-fit scale the
     whole thing down to ~0.7×). */
  min-height: clamp(440px, 60vh, 680px);
}

@media (max-width:980px) {
  .eco-stage {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: auto;
  }

  .eco-stage__center {
    order: 0;
    min-height: 420px;
    height: 420px;
  }

  .eco-stage__left {
    order: 1;
  }

  .eco-stage__right {
    order: 2;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* LEFT — Product cards with icon + chips */
.eco-stage__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.eco-prod {
  position: relative;
  padding: 22px 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(41, 151, 255, .06), rgba(255, 255, 255, .01));
  border: 1px solid rgba(41, 151, 255, .18);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.eco-prod:hover {
  transform: translateY(-3px);
  border-color: rgba(41, 151, 255, .45);
  box-shadow: 0 16px 32px -10px rgba(41, 151, 255, .45);
}

.eco-prod__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.eco-prod__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(41, 151, 255, .14);
  border: 1px solid rgba(41, 151, 255, .30);
  color: var(--brand);
  flex: 0 0 auto;
}

.eco-prod__icon svg {
  width: 22px;
  height: 22px;
}

.eco-prod h3 {
  font-size: 20px;
  margin: 0;
  font-weight: 700;
  color: var(--text);
}

.eco-prod__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.eco-prod__chips span {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.eco-prod:hover .eco-prod__chips span {
  background: rgba(41, 151, 255, .10);
  border-color: rgba(41, 151, 255, .30);
  color: var(--text);
}

/* Slide-in from left for the product cards */
.eco-prod--left {
  --x-from: -60px;
}

.eco-prod--left.reveal {
  opacity: 0;
  transform: translateX(var(--x-from, -60px));
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform .9s cubic-bezier(.16, 1, .3, 1),
    border-color .3s ease,
    box-shadow .3s ease;
}

.eco-prod--left.reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide-in from right for the product orbs */
.eco-orb--right.reveal {
  opacity: 0;
  transform: translateX(60px) scale(.85);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform .9s cubic-bezier(.16, 1, .3, 1),
    box-shadow .3s ease;
}

.eco-orb--right.reveal.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Continuous breathing halo around each orb */
.eco-orb__halo {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(41, 151, 255, .45);
  pointer-events: none;
  animation: orbHaloPulse 3s ease-in-out infinite;
}

.eco-orb--right:nth-child(2) .eco-orb__halo {
  animation-delay: -1s;
}

.eco-orb--right:nth-child(3) .eco-orb__halo {
  animation-delay: -2s;
}

@keyframes orbHaloPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .55;
  }

  50% {
    transform: scale(1.18);
    opacity: 0;
  }
}

/* CENTER — vortex + glowing core */
.eco-stage__center {
  position: relative;
  width: 100%;
  height: clamp(440px, 60vh, 680px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.eco-vortex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Accept mouse so the ripple grid can react to cursor proximity */
  pointer-events: auto;
  cursor: crosshair;
}

.eco-core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 22px;
  border-radius: 14px;
  background: rgba(8, 12, 22, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(41, 151, 255, .35), 0 0 40px rgba(41, 151, 255, .35) inset;
  pointer-events: none;
}

.eco-core span {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, .85),
    0 2px 8px rgba(0, 0, 0, .65),
    0 0 28px rgba(41, 151, 255, .85);
}

.eco-core span:last-child {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Curved glowing connectors — dashes flow inward, particles ride the path */
.eco-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.eco-connectors__dashes use {
  animation: connectorFlow 10s linear infinite;
}

@keyframes connectorFlow {
  to {
    stroke-dashoffset: -40;
  }
}

.eco-connectors__pulse circle {
  filter: drop-shadow(0 0 4px #2997ff) drop-shadow(0 0 10px rgba(41, 151, 255, .7));
}

@media (max-width:980px) {
  .eco-connectors {
    display: none;
  }
}

/* RIGHT — product orb logos (align to the left of the column so they
   sit right next to the connector lines coming from the central vortex) */
.eco-stage__right {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.eco-orb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 14px 30px -10px rgba(41, 151, 255, .55), 0 0 0 1px rgba(41, 151, 255, .2);
  transition: transform var(--t), box-shadow var(--t);
  cursor: default;
  padding: 18px;
}

.eco-orb:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -10px rgba(41, 151, 255, .85), 0 0 0 2px rgba(41, 151, 255, .4);
}

.eco-orb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Gentle continuous float + breath, staggered between orbs */
  animation: ecoOrbFloat 4.5s ease-in-out infinite;
}

.eco-stage__right .eco-orb:nth-child(1) .eco-orb__img {
  animation-delay: 0s;
}

.eco-stage__right .eco-orb:nth-child(2) .eco-orb__img {
  animation-delay: -1.5s;
}

.eco-stage__right .eco-orb:nth-child(3) .eco-orb__img {
  animation-delay: -3s;
}

@keyframes ecoOrbFloat {

  0%,
  100% {
    transform: translateY(0) scale(1) rotate(0);
  }

  50% {
    transform: translateY(-3px) scale(1.035) rotate(.6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eco-orb__img {
    animation: none;
  }
}

.eco-orb__soon-tag {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--brand);
  white-space: nowrap;
}

/* Subtle entry: orbs pop in */
.eco-orb.reveal {
  transform: scale(.85);
}

.eco-orb.reveal.is-visible {
  transform: scale(1);
}

/* ---- Partners / certifications row (slide 5, under KPI rings) ---- */
.kpi-partners__caption {
  text-align: center;
  color: var(--text-2);
  font-size: clamp(13px, 1.2vw, 15px);
  margin: clamp(20px, 3.5vh, 56px) auto 14px;
  max-width: 760px;
}

.kpi-partners {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

@media (max-width:1080px) {
  .kpi-partners {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:560px) {
  .kpi-partners {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kpi-partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px) scale(.94);
  filter: blur(4px);
  transition:
    opacity .8s cubic-bezier(.16, 1, .3, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1),
    filter .6s ease;
}

.kpi-partners.is-visible .kpi-partner {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.kpi-partners.is-visible .kpi-partner:nth-child(1) {
  transition-delay: 0s;
}

.kpi-partners.is-visible .kpi-partner:nth-child(2) {
  transition-delay: .08s;
}

.kpi-partners.is-visible .kpi-partner:nth-child(3) {
  transition-delay: .16s;
}

.kpi-partners.is-visible .kpi-partner:nth-child(4) {
  transition-delay: .24s;
}

.kpi-partners.is-visible .kpi-partner:nth-child(5) {
  transition-delay: .32s;
}

.kpi-partners.is-visible .kpi-partner:nth-child(6) {
  transition-delay: .40s;
}

.kpi-partner__box {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 6px 20px -6px rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(41, 151, 255, .08);
  transition:
    transform .45s cubic-bezier(.16, 1, .3, 1),
    box-shadow .45s cubic-bezier(.16, 1, .3, 1);
  transform-style: preserve-3d;
  perspective: 600px;
}

.kpi-partner__box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.kpi-partner:hover .kpi-partner__box {
  transform: translateY(-6px) rotateX(6deg);
  box-shadow:
    0 22px 38px -10px rgba(41, 151, 255, .55),
    inset 0 0 0 1px rgba(41, 151, 255, .25);
}

.kpi-partner:hover .kpi-partner__box img {
  transform: translateZ(20px) scale(1.04);
}

.kpi-partner small {
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .55);
  text-align: center;
  font-weight: 500;
}

.kpi-partner:hover small {
  color: rgba(255, 255, 255, .8);
}

/* ============================================================
   KPIs (slide 5)
   ============================================================ */
.kpis {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.kpis__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(20px, 3.5vh, 64px);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
  perspective: 1200px;
}

@media (max-width:780px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

.kpi {
  position: relative;
  text-align: center;
  padding: 28px 16px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  transform-style: preserve-3d;
  /* Composite 3D transform:
     - translateX is the entrance offset (--kpi-enter-x)
     - rotateX combines scroll-driven tilt (--kpi-tilt) + mouse-driven (--kpi-hover-y)
     - rotateY follows mouse horizontal (--kpi-hover-x)
     - scale follows scroll position */
  transform: perspective(1100px) translateX(var(--kpi-enter-x, 0px)) rotateX(calc(var(--kpi-tilt, 0deg) + var(--kpi-hover-y, 0deg))) rotateY(var(--kpi-hover-x, 0deg)) scale(var(--kpi-scale, 1));
  transition:
    transform .9s cubic-bezier(.16, 1, .3, 1),
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    border-color .3s ease,
    box-shadow .3s ease;
}

/* Entrance: slide in from a side. Direction set by .kpi--from-left / --from-right.
   Reapply the full composite transform here so .reveal.is-visible (which sets
   transform: translateY(0)) cannot override our 3D composition. */
.kpi.kpi--enter {
  opacity: 0;
}

.kpi.kpi--from-left {
  --kpi-enter-x: -110px;
}

.kpi.kpi--from-right {
  --kpi-enter-x: 110px;
}

.kpi.kpi--enter.is-visible {
  --kpi-enter-x: 0px;
  opacity: 1;
}

.kpi.kpi--enter,
.kpi.kpi--enter.is-visible {
  transform: perspective(1100px) translateX(var(--kpi-enter-x, 0px)) rotateX(calc(var(--kpi-tilt, 0deg) + var(--kpi-hover-y, 0deg))) rotateY(var(--kpi-hover-x, 0deg)) scale(var(--kpi-scale, 1));
}

.kpi.is-hover {
  /* Tighter transition while hovered so the tilt tracks the cursor crisply */
  transition: transform .12s linear, border-color .3s ease, box-shadow .3s ease;
}

.kpi:hover {
  border-color: rgba(41, 151, 255, .5);
  box-shadow: 0 18px 44px -10px rgba(41, 151, 255, .55);
}

/* Mouse-following highlight that mimics a glossy surface */
.kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--kpi-mx, 50%) var(--kpi-my, 50%),
      rgba(41, 151, 255, .22),
      transparent 55%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.kpi:hover::before {
  opacity: 1;
}

/* Push the inner ring forward in 3D so the parallax depth is felt */
.kpi__ring,
.kpi h3 {
  transform: translateZ(20px);
}

.kpi__ring {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 18px;
}

.kpi__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.kpi__track {
  fill: none;
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 8;
}

.kpi__bar {
  fill: none;
  stroke: var(--col, var(--brand));
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  /* 2 * pi * 52 */
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 1.6s cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 0 8px var(--col, var(--brand)));
}

.kpi.is-anim .kpi__bar {
  stroke-dashoffset: calc(326.7 - (326.7 * var(--pct) / 100));
}

.kpi__val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--text);
}

.kpi__val small {
  font-size: 14px;
  color: var(--text-2);
  font-weight: 500;
}

.kpi h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ============================================================
   FORMULA (slide 6)
   ============================================================ */
.formula {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.formula__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(20px, 3.5vh, 64px);
}

.formula__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 32px;
}

@media (max-width:980px) {
  .formula__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:560px) {
  .formula__grid {
    grid-template-columns: 1fr;
  }
}

.pillar {
  position: relative;
  padding: 32px 24px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--t), border-color var(--t);
}

.pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}

.pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(41, 151, 255, .4);
}

.pillar:hover::before {
  transform: scaleX(1);
}

/* Corner reveal: each card "unfolds" from a different corner.
   We use transform (translate + scale + rotate) anchored at the chosen corner,
   plus opacity. Pure transform/opacity → reliable across browsers and GPU-friendly. */
.pillar.pillar--mask {
  opacity: 0;
  transform: translate(var(--mask-tx, 0), var(--mask-ty, 0)) scale(.6) rotate(var(--mask-rot, 0deg));
  transform-origin: var(--mask-ox, 50%) var(--mask-oy, 50%);
  transition:
    transform 1.1s cubic-bezier(.16, 1, .3, 1),
    opacity .7s ease,
    border-color .3s ease;
}

.pillar.pillar--mask.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0deg);
}

/* Per-corner origin + arrival direction.
   Card arrives offset from its corner and lightly rotated → diagonal "fly-in". */
.pillar--from-tl {
  --mask-ox: 0%;
  --mask-oy: 0%;
  --mask-tx: -60px;
  --mask-ty: -50px;
  --mask-rot: -6deg;
}

.pillar--from-tr {
  --mask-ox: 100%;
  --mask-oy: 0%;
  --mask-tx: 60px;
  --mask-ty: -50px;
  --mask-rot: 6deg;
}

.pillar--from-br {
  --mask-ox: 100%;
  --mask-oy: 100%;
  --mask-tx: 60px;
  --mask-ty: 50px;
  --mask-rot: 6deg;
}

.pillar--from-bl {
  --mask-ox: 0%;
  --mask-oy: 100%;
  --mask-tx: -60px;
  --mask-ty: 50px;
  --mask-rot: -6deg;
}

@media (prefers-reduced-motion: reduce) {
  .pillar.pillar--mask {
    transform: none;
    opacity: 1;
  }
}

.pillar__num {
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 14px;
  opacity: .85;
}

/* Centered icon replacing the numeric badge */
.pillar {
  text-align: center;
}

.pillar__icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: radial-gradient(circle at 30% 25%, rgba(41, 151, 255, .20), rgba(41, 151, 255, .05) 60%, transparent 80%);
  position: relative;
  /* Subtle continuous breath/float */
  animation: pillarIconFloat 5s ease-in-out infinite;
}

.pillar__icon::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(41, 151, 255, .25);
  opacity: .6;
  animation: pillarIconRing 3.6s ease-in-out infinite;
}

.pillar__icon img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(41, 151, 255, .4));
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .35s ease;
}

.pillar:hover .pillar__icon img {
  transform: scale(1.12) rotate(-4deg);
  filter: drop-shadow(0 0 18px rgba(41, 151, 255, .85));
}

@keyframes pillarIconFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes pillarIconRing {

  0%,
  100% {
    transform: scale(1);
    opacity: .55;
  }

  50% {
    transform: scale(1.10);
    opacity: .05;
  }
}

.pillar h3 {
  font-size: 20px;
  margin-bottom: 4px;
}

.pillar__sub {
  font-size: 12px;
  color: var(--brand);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 14px;
}

.pillar p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
}

.brandlift {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 48px 32px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(41, 151, 255, .10), rgba(41, 151, 255, .08));
  border: 1px solid rgba(41, 151, 255, .25);
}

.brandlift__item {
  text-align: center;
}

.brandlift__num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.brandlift__num small {
  font-size: .5em;
  color: var(--text-2);
  -webkit-text-fill-color: var(--text-2);
}

.brandlift__lbl {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
}

.brandlift__sep {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--line), transparent);
}

.brandlift__src {
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: .04em;
}

/* ============================================================
   DATA (slides 7 + 8)
   ============================================================ */
.data {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.data__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(18px, 3vh, 56px);
}

.data__head h2 {
  font-size: clamp(30px, 4.5vw, 56px);
}

.data__head p {
  color: var(--text-2);
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 17px);
}

/* Categories panel — 90% of viewport width (breaks out of the section's max-width) */
.data__cats-wide {
  position: relative;
  width: 90vw;
  max-width: none;
  /* Break out of the parent's max-width:1200 by anchoring to viewport center */
  left: 50%;
  margin-left: -45vw;
  padding: 32px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
}

.data__cats-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.kicker--small {
  font-size: 11px;
  margin: 0;
}

.data__reach {
  text-align: right;
}

.data__reach-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 34px;
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  line-height: 1;
}

.data__reach-lbl {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* Infinite category ticker — animated cards with image + name */
.cat-ticker {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  /* Mask the edges so cards fade in/out softly instead of clipping hard */
}

.cat-ticker__track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: catTickerScroll 70s linear infinite;
}

.cat-ticker:hover .cat-ticker__track {
  animation-play-state: paused;
}

@keyframes catTickerScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.cat-card {
  position: relative;
  flex: 0 0 220px;
  width: 220px;
  height: 280px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(41, 151, 255, .20);
  background: #000;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), filter .35s ease;
  filter: saturate(.85) brightness(.78);
}

.cat-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85));
  pointer-events: none;
}

.cat-card span {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

.cat-card:hover {
  border-color: rgba(41, 151, 255, .6);
  box-shadow: 0 12px 30px -8px rgba(41, 151, 255, .55);
  transform: translateY(-3px);
}

.cat-card:hover img {
  filter: saturate(1.05) brightness(.95);
  transform: scale(1.06);
}

/* Flag-style card: circular icon centered on a brand-blue gradient background */
.cat-card--flag {
  background:
    radial-gradient(circle at 50% 40%, rgba(41, 151, 255, .25), transparent 65%),
    linear-gradient(160deg, #0e1d33 0%, #050608 100%);
  border-color: rgba(41, 151, 255, .45);
}

.cat-card--flag img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -58%);
  object-fit: contain;
  filter: none !important;
}

.cat-card--flag::after {
  /* gradient under label is already provided by the base ::after */
}

.cat-card--flag:hover img {
  filter: none !important;
  transform: translate(-50%, -58%) scale(1.06);
}

/* Soft fade gradients on the left/right edges */
.cat-ticker__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 2;
}

.cat-ticker__fade--l {
  left: 0;
  background: linear-gradient(90deg, var(--bg-2, #060606) 0%, transparent 100%);
}

.cat-ticker__fade--r {
  right: 0;
  background: linear-gradient(270deg, var(--bg-2, #060606) 0%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .cat-ticker__track {
    animation: none;
  }
}

/* ============================================================
   ARKEERO CDP (slide 8) — restructured per reference image
   ============================================================ */
.cdp {
  position: relative;
  z-index: 1;
  padding: 0 48px clamp(72px, 8vh, 96px);
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
}

/* Drifting data-grid backdrop — subtle activity behind the whole slide */
.cdp::before {
  content: "";
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(rgba(41, 151, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 151, 255, .08) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  animation: cdpGridDrift 26s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.cdp>* {
  position: relative;
  z-index: 1;
}

@keyframes cdpGridDrift {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(40px, 40px);
  }
}

/* Floating ambient orbs */
.cdp::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  left: -12%;
  top: 30%;
  background: radial-gradient(closest-side, rgba(41, 151, 255, .18), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  animation: cdpOrbDrift 14s ease-in-out infinite;
  z-index: 0;
}

@keyframes cdpOrbDrift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: .55;
  }

  50% {
    transform: translate(60px, -40px) scale(1.15);
    opacity: .95;
  }
}

.cdp__head {
  text-align: center;
  margin: 0 auto clamp(14px, 2.5vh, 36px);
}

.cdp__title {
  font-size: clamp(40px, 5.5vw, 72px);
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0;
  background: linear-gradient(110deg, var(--text) 30%, var(--brand-2) 50%, var(--text) 70%);
  background-size: 220% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cdpTitleSheen 7s ease-in-out 1.4s infinite;
}

@keyframes cdpTitleSheen {

  0%,
  65%,
  100% {
    background-position: 200% 0;
  }

  85% {
    background-position: -100% 0;
  }
}

.cdp__title .accent {
  -webkit-text-fill-color: var(--brand);
  color: var(--brand);
}

.cdp__dot {
  -webkit-text-fill-color: var(--brand);
  color: var(--brand);
  display: inline-block;
  animation: cdpDotPulse 2.4s ease-in-out infinite;
}

@keyframes cdpDotPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.3);
    opacity: .7;
  }
}

.cdp__subtitle {
  margin: 10px 0 0;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--text-2);
  font-weight: 400;
}

/* Title fade-up entrance (centered, matches other section heads) */
.cdp__head.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform .9s cubic-bezier(.16, 1, .3, 1);
}

.cdp__head.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Top row: 5 outlined feature cards ---- */
.cdp-feats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: clamp(20px, 3.5vh, 48px);
}

@media (max-width:980px) {
  .cdp-feats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:560px) {
  .cdp-feats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cdp-feat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  min-height: 130px;
  text-align: center;
  border-radius: 18px;
  border: 1.5px solid rgba(120, 170, 235, .45);
  background: rgba(0, 0, 0, .25);
  /* Soft inner glow */
  box-shadow: inset 0 0 22px rgba(41, 151, 255, .08);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

/* Continuous breathing border */
.cdp-feat::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(41, 151, 255, .55);
  opacity: 0;
  pointer-events: none;
  animation: cdpFeatBreathe 3.6s ease-in-out infinite;
}

.cdp-feat:nth-child(1)::before {
  animation-delay: 0s;
}

.cdp-feat:nth-child(2)::before {
  animation-delay: -.7s;
}

.cdp-feat:nth-child(3)::before {
  animation-delay: -1.4s;
}

.cdp-feat:nth-child(4)::before {
  animation-delay: -2.1s;
}

.cdp-feat:nth-child(5)::before {
  animation-delay: -2.8s;
}

@keyframes cdpFeatBreathe {

  0%,
  100% {
    opacity: 0;
    transform: scale(1);
  }

  50% {
    opacity: .55;
    transform: scale(1.025);
  }
}

.cdp-feat:hover {
  transform: translateY(-3px);
  border-color: rgba(41, 151, 255, .75);
  box-shadow: 0 14px 30px -10px rgba(41, 151, 255, .45),
    inset 0 0 26px rgba(41, 151, 255, .15);
}

.cdp-feat strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.2;
}

.cdp-feat small {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
  margin-top: 6px;
  line-height: 1.35;
}

.cdp-feat strong+small {
  margin-top: 8px;
}

.cdp-feat small+strong {
  margin-top: 8px;
}

/* Apple-style staggered drop-in for the 5 cards */
.cdp-feat.reveal {
  opacity: 0;
  transform: translateY(-30px) scale(.92);
  filter: blur(4px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform .9s cubic-bezier(.16, 1, .3, 1),
    filter .55s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.cdp-feat.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  /* Continuous "wave" zoom: cards smoothly grow & shrink in sequence.
     The animation owns transform once visible — keyframes always include
     scale, so there's no jump from the reveal end-state (scale 1). */
  animation: cdpFeatWave 4.6s ease-in-out infinite;
}

@keyframes cdpFeatWave {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.07);
  }
}

/* Per-card stagger so the wave travels left → right.
   Base delay 1s lets the reveal transition finish smoothly first. */
.cdp-feat:nth-child(1).is-visible {
  animation-delay: 1.0s;
}

.cdp-feat:nth-child(2).is-visible {
  animation-delay: 1.4s;
}

.cdp-feat:nth-child(3).is-visible {
  animation-delay: 1.8s;
}

.cdp-feat:nth-child(4).is-visible {
  animation-delay: 2.2s;
}

.cdp-feat:nth-child(5).is-visible {
  animation-delay: 2.6s;
}

@media (prefers-reduced-motion: reduce) {
  .cdp-feat.reveal.is-visible {
    animation: none;
    transform: scale(1);
  }
}

/* ---- Composition panel ---- */
.cdp-panel {
  position: relative;
  padding: 48px 28px 28px;
  border-radius: 24px;
  background:
    radial-gradient(900px circle at 100% 100%, rgba(41, 151, 255, .18), transparent 65%),
    linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid rgba(41, 151, 255, .25);
  /* overflow visible so the floating "Composición" pill isn't clipped at the top */
}

.cdp-panel.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1),
    transform 1s cubic-bezier(.16, 1, .3, 1);
}

.cdp-panel.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* "Composición Arkeero ID" pill that overlaps the top edge */
.cdp-panel__pill {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 36px;
  border-radius: 999px;
  background: var(--grad-brand);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 14px 30px -8px rgba(41, 151, 255, .6);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
}

.cdp-panel__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  background-size: 300% 100%;
  background-position: 200% 0;
  animation: cdpPillSheen 4s ease-in-out 1.6s infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes cdpPillSheen {

  0%,
  60%,
  100% {
    background-position: 200% 0;
  }

  85% {
    background-position: -100% 0;
  }
}

.cdp-panel__body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: stretch;
  margin-top: 14px;
}

@media (max-width:880px) {
  .cdp-panel__body {
    grid-template-columns: 1fr;
  }
}

.cdp-attrs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width:560px) {
  .cdp-attrs {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cdp-attr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.cdp-attr--wide {
  grid-column: 1 / -1;
}

.cdp-attr:hover {
  transform: translateY(-2px);
  border-color: rgba(41, 151, 255, .4);
  background: rgba(41, 151, 255, .08);
}

.cdp-attr__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(41, 151, 255, .12);
  color: var(--brand);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}

.cdp-attr__icon::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(41, 151, 255, .6);
  opacity: 0;
  pointer-events: none;
}

.cdp-panel.is-visible .cdp-attr__icon::after {
  animation: cdpIconRing 3.6s ease-in-out infinite;
}

.cdp-panel.is-visible .cdp-attr:nth-child(1) .cdp-attr__icon::after {
  animation-delay: 0s;
}

.cdp-panel.is-visible .cdp-attr:nth-child(2) .cdp-attr__icon::after {
  animation-delay: .45s;
}

.cdp-panel.is-visible .cdp-attr:nth-child(3) .cdp-attr__icon::after {
  animation-delay: .9s;
}

.cdp-panel.is-visible .cdp-attr:nth-child(4) .cdp-attr__icon::after {
  animation-delay: 1.35s;
}

.cdp-panel.is-visible .cdp-attr:nth-child(5) .cdp-attr__icon::after {
  animation-delay: 1.8s;
}

.cdp-panel.is-visible .cdp-attr:nth-child(6) .cdp-attr__icon::after {
  animation-delay: 2.25s;
}

.cdp-panel.is-visible .cdp-attr:nth-child(7) .cdp-attr__icon::after {
  animation-delay: 2.7s;
}

@keyframes cdpIconRing {

  0%,
  100% {
    opacity: 0;
    transform: scale(1);
  }

  40% {
    opacity: 1;
    transform: scale(1.4);
  }

  60% {
    opacity: 0;
    transform: scale(1.6);
  }
}

.cdp-attr__icon svg {
  width: 18px;
  height: 18px;
  transition: transform .4s var(--spring);
}

/* Each icon has its own subtle continuous motion */
.cdp-panel.is-visible .cdp-attr:nth-child(1) .cdp-attr__icon svg {
  animation: cdpIconSpin 14s linear infinite;
}

.cdp-panel.is-visible .cdp-attr:nth-child(2) .cdp-attr__icon svg {
  animation: cdpIconSwing 4s ease-in-out infinite;
}

.cdp-panel.is-visible .cdp-attr:nth-child(3) .cdp-attr__icon svg {
  animation: cdpIconWiggle 3s ease-in-out infinite;
}

.cdp-panel.is-visible .cdp-attr:nth-child(4) .cdp-attr__icon svg {
  animation: cdpIconSpin 18s linear infinite reverse;
}

.cdp-panel.is-visible .cdp-attr:nth-child(5) .cdp-attr__icon svg {
  animation: cdpIconBob 3.4s ease-in-out infinite;
}

.cdp-panel.is-visible .cdp-attr:nth-child(6) .cdp-attr__icon svg {
  animation: cdpIconBob 4.4s ease-in-out infinite;
}

.cdp-panel.is-visible .cdp-attr:nth-child(7) .cdp-attr__icon svg {
  animation: cdpIconSwing 5s ease-in-out infinite;
}

@keyframes cdpIconSpin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes cdpIconSwing {

  0%,
  100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(-8deg);
  }

  75% {
    transform: rotate(8deg);
  }
}

@keyframes cdpIconWiggle {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-2px);
  }

  75% {
    transform: translateX(2px);
  }
}

@keyframes cdpIconBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

.cdp-attr__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Stagger reveal for inner attributes once panel is visible */
.cdp-panel .cdp-attr {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16, 1, .3, 1),
    border-color .3s ease, background .3s ease;
}

.cdp-panel.is-visible .cdp-attr {
  opacity: 1;
  transform: translateY(0);
}

.cdp-panel.is-visible .cdp-attr:nth-child(1) {
  transition-delay: .20s;
}

.cdp-panel.is-visible .cdp-attr:nth-child(2) {
  transition-delay: .28s;
}

.cdp-panel.is-visible .cdp-attr:nth-child(3) {
  transition-delay: .36s;
}

.cdp-panel.is-visible .cdp-attr:nth-child(4) {
  transition-delay: .44s;
}

.cdp-panel.is-visible .cdp-attr:nth-child(5) {
  transition-delay: .52s;
}

.cdp-panel.is-visible .cdp-attr:nth-child(6) {
  transition-delay: .60s;
}

.cdp-panel.is-visible .cdp-attr:nth-child(7) {
  transition-delay: .68s;
}

/* +500 hero card on the right */
.cdp-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(160deg, #0a0a0a, #050608);
  border: 1px solid rgba(41, 151, 255, .4);
  box-shadow: 0 20px 40px -16px rgba(41, 151, 255, .4);
  text-align: center;
  overflow: visible;
  /* Continuous subtle pulse */
  animation: cdpHeroPulse 3s ease-in-out infinite;
}

/* Container for the floating "+N" notifications — sits ABOVE the +500 card
   so chips never cover "atributos por usuario" inside */
.cdp-hero__pop {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  height: 90px;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.cdp-hero__chip {
  position: absolute;
  left: 50%;
  bottom: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(41, 151, 255, .18);
  border: 1px solid rgba(41, 151, 255, .45);
  color: var(--brand-2);
  font-size: 11px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  transform: translate(-50%, 0);
  opacity: 0;
  animation: cdpHeroChip 2.6s ease-out forwards;
  box-shadow: 0 4px 14px rgba(41, 151, 255, .35);
}

@keyframes cdpHeroChip {
  0% {
    transform: translate(calc(-50% + var(--dx, 0)), 10px) scale(.7);
    opacity: 0;
  }

  20% {
    transform: translate(calc(-50% + var(--dx, 0)), 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(calc(-50% + var(--dx, 0)), -80px) scale(.85);
    opacity: 0;
  }
}

@keyframes cdpHeroPulse {

  0%,
  100% {
    box-shadow: 0 20px 40px -16px rgba(41, 151, 255, .4),
      0 0 0 0 rgba(41, 151, 255, .0);
  }

  50% {
    box-shadow: 0 20px 50px -14px rgba(41, 151, 255, .6),
      0 0 0 4px rgba(41, 151, 255, .10);
  }
}

.cdp-hero__big {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 800;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.cdp-hero__big small {
  font-size: .55em;
  color: var(--brand);
  -webkit-text-fill-color: var(--brand);
  font-weight: 700;
}

.cdp-hero__sub {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
  letter-spacing: .04em;
}

/* Hero card inside panel: stagger entry */
.cdp-panel .cdp-hero {
  opacity: 0;
  transform: scale(.9);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: .55s;
}

.cdp-panel.is-visible .cdp-hero {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   NETWORK (slides 9 + 10)
   ============================================================ */
.network {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.network__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.network__head h2 {
  font-size: clamp(30px, 4.5vw, 56px);
}

.network__head p {
  color: var(--text-2);
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 17px);
}

/* Highlight the ARKEERO NETWORK kicker — bolder, larger, and badged */
.network__head .kicker {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .32em;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(41, 151, 255, .18), rgba(120, 180, 255, .10));
  border: 1px solid rgba(41, 151, 255, .45);
  box-shadow: 0 8px 22px -10px rgba(41, 151, 255, .6);
  color: #ffffff;
  background-clip: padding-box;
  margin-bottom: 22px;
}

.net-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

@media (max-width:980px) {
  .net-grid {
    grid-template-columns: 1fr 1fr;
  }

  .net-hero {
    grid-column: 1 / -1;
  }
}

@media (max-width:560px) {
  .net-grid {
    grid-template-columns: 1fr;
  }
}

.net-hero {
  position: relative;
  padding: 36px;
  border-radius: var(--radius);
  background:
    radial-gradient(600px circle at 0% 100%, rgba(41, 151, 255, .18), transparent 55%),
    linear-gradient(160deg, rgba(41, 151, 255, .10), rgba(255, 255, 255, .01));
  border: 1px solid rgba(41, 151, 255, .25);
  overflow: hidden;
}

.net-hero__big {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 8vw, 100px);
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 6px;
}

.net-hero__big small {
  font-size: .5em;
  color: var(--brand);
  -webkit-text-fill-color: var(--brand);
  font-weight: 700;
}

.net-hero__lbl {
  font-size: 14px;
  color: var(--text-2);
  letter-spacing: .04em;
  margin-bottom: 28px;
}

.net-hero__bar-track {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  overflow: hidden;
}

.net-hero__bar-fill {
  height: 100%;
  width: 0;
  background: var(--grad-brand);
  border-radius: 999px;
  transition: width 1.6s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 0 12px rgba(41, 151, 255, .6);
}

.net-hero.is-anim .net-hero__bar-fill {
  width: var(--w);
}

.net-hero__bar-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-2);
}

.net-hero__bar-meta strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  color: var(--text);
}

.net-hero__bar-cap {
  color: var(--text-dim);
  font-size: 12px;
}

.net-card {
  padding: 28px 22px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  transition: transform var(--t), border-color var(--t);
}

.net-card:hover {
  transform: translateY(-4px);
  border-color: rgba(41, 151, 255, .4);
}

.net-card__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(41, 151, 255, .12);
  border: 1px solid rgba(41, 151, 255, .25);
  color: var(--brand);
  margin-bottom: 16px;
}

.net-card__icon svg {
  width: 22px;
  height: 22px;
}

.net-card h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.net-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 13.5px;
}

.net-card p strong {
  color: var(--text);
}

/* ============================================================
   STUDIO (slide 11)
   ============================================================ */
.studio {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  overflow: hidden;
}

.studio__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px circle at 20% 30%, rgba(41, 151, 255, .18), transparent 55%),
    radial-gradient(900px circle at 85% 70%, rgba(41, 151, 255, .15), transparent 60%);
  pointer-events: none;
}

.studio__inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

.studio__title {
  font-size: clamp(34px, 5vw, 68px);
  margin: 14px auto 18px;
  max-width: 900px;
}

.studio__lead {
  max-width: 640px;
  margin: 0 auto clamp(18px, 3vh, 56px);
  color: var(--text-2);
  font-size: clamp(15px, 1.3vw, 18px);
}

.studio__lead strong {
  color: var(--text);
  font-weight: 600;
}

.studio__reel {
  position: relative;
  display: grid;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.studio__reel-frame {
  position: relative;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/9;
  transform-origin: center;
  will-change: transform, border-radius;
  /* Apple-style entrance — starts almost fullscreen with no border/radius/shadow,
     settles to a framed monitor with rounded corners + blue glow + 1px border.
     Triggered when the parent .studio__reel gets the .is-visible class. */
  transform: scale(1.95);
  border: 1px solid transparent;
  border-radius: 0px;
  box-shadow: 0 0 0 0 rgba(41, 151, 255, 0);
  transition:
    transform 1.6s cubic-bezier(.16, 1, .3, 1) .15s,
    border-radius 1.2s cubic-bezier(.16, 1, .3, 1) .55s,
    border-color 1.2s ease .55s,
    box-shadow 1.2s ease .55s;
}

.studio__reel.is-visible .studio__reel-frame {
  transform: scale(1);
  border-radius: 20px;
  border-color: rgba(41, 151, 255, .3);
  box-shadow:
    0 30px 80px -20px rgba(41, 151, 255, .4),
    inset 0 0 0 1px rgba(255, 255, 255, .05);
}

@media (prefers-reduced-motion: reduce) {
  .studio__reel-frame {
    transform: scale(1);
    border-radius: 20px;
    border-color: rgba(41, 151, 255, .3);
    box-shadow: 0 30px 80px -20px rgba(41, 151, 255, .4);
    transition: none;
  }
}

.studio__reel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.studio__reel-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .4));
}

.studio__reel-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.studio__reel-stats>div {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  text-align: center;
  /* Sequential entry — appear after the video has settled into its frame */
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1);
}

.studio__reel.is-visible .studio__reel-stats>div {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Cascade in AFTER the video settles into its frame (~1.75s) */
.studio__reel.is-visible .studio__reel-stats>div:nth-child(1) {
  transition-delay: 1.85s;
}

.studio__reel.is-visible .studio__reel-stats>div:nth-child(2) {
  transition-delay: 2.00s;
}

.studio__reel.is-visible .studio__reel-stats>div:nth-child(3) {
  transition-delay: 2.15s;
}

/* Continuous shine sweep — same effect as the Data + IA cards on the hero */
.studio__reel-stats>div::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  opacity: 0;
  pointer-events: none;
  animation: studioStatShine 7s ease-in-out infinite;
  /* Don't shine until after the card has appeared (~2.15s entry) */
  animation-delay: 3s;
}

.studio__reel-stats>div:nth-child(2)::before {
  animation-delay: 5.4s;
}

.studio__reel-stats>div:nth-child(3)::before {
  animation-delay: 7.8s;
}

@keyframes studioStatShine {

  0%,
  100% {
    background-position: -100% 50%;
    opacity: 0;
  }

  45% {
    opacity: .85;
  }

  50% {
    background-position: 200% 50%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio__reel-stats>div::before {
    animation: none;
  }
}

.studio__reel-stats strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 6px;
}

.studio__reel-stats span {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ============================================================
   NOVEDADES (slides 12, 13, 14) — click-to-expand horizontal accordion
   ============================================================ */
.news-formats {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.news-formats__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(14px, 2.5vh, 36px);
}

.news-formats__head h2 {
  font-size: clamp(30px, 4.5vw, 56px);
}

.news-formats__hint {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Stack of 3 cards. The CSS variable on the parent drives which card is active. */
.news-stack {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  /* Viewport-relative — 750px was forcing this slide to ~1000px total
     on a 768p monitor, which made slide-fit shrink the cards to an
     unreadable ~0.6×. clamp lets it stay generous on tall screens. */
  height: clamp(520px, 70vh, 750px);
  transition: grid-template-columns .8s cubic-bezier(.16, 1, .3, 1);
}

.news-stack[data-active="0"] {
  grid-template-columns: 4.5fr 1fr 1fr;
}

.news-stack[data-active="1"] {
  grid-template-columns: 1fr 4.5fr 1fr;
}

.news-stack[data-active="2"] {
  grid-template-columns: 1fr 1fr 4.5fr;
}

@media (max-width:880px) {
  .news-stack {
    grid-template-columns: 1fr;
    height: auto;
    gap: 14px;
  }

  .news-stack[data-active="0"],
  .news-stack[data-active="1"],
  .news-stack[data-active="2"] {
    grid-template-columns: 1fr;
  }
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}

.news-card:hover {
  border-color: rgba(41, 151, 255, .4);
}

.news-card[data-active="true"] {
  border-color: rgba(41, 151, 255, .55);
  box-shadow: 0 24px 60px -20px rgba(41, 151, 255, .55);
  cursor: default;
}

.news-card__head {
  position: relative;
  padding: 22px 22px 16px;
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease;
}

.news-card[data-active="true"] .news-card__head {
  border-bottom-color: rgba(41, 151, 255, .18);
}

.news-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-brand);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(41, 151, 255, .45);
  margin-bottom: 10px;
}

.news-card__title {
  font-size: clamp(20px, 1.7vw, 26px);
  margin: 0 0 6px;
  line-height: 1.15;
}

.news-card__sub {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.4;
}

/* Body holds details + media. Hidden when card is collapsed. */
.news-card__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 16px;
  padding: 18px 22px 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
  transition-delay: .05s;
  overflow: hidden;
}

.news-card[data-active="true"] .news-card__body {
  opacity: 1;
  pointer-events: auto;
  transition-delay: .25s;
}

@media (max-width:1100px) {
  .news-card__body {
    grid-template-columns: 1fr;
  }
}

@media (max-width:880px) {
  .news-card__body {
    padding: 0 22px 22px;
  }

  .news-card[data-active="true"] .news-card__body {
    display: grid;
  }

  .news-card[data-active="false"] .news-card__body {
    display: none;
  }
}

/* Details column: 3 stacked blocks — no internal scroll */
.news-card__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.news-card__block h4 {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 6px;
  font-weight: 700;
}

.news-card__block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.news-card__block li {
  font-size: 13.5px;
  color: var(--text-2);
  padding-left: 14px;
  position: relative;
  line-height: 1.4;
}

.news-card__block li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700;
}

.news-card__verticals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.news-card__verticals span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  background: rgba(41, 151, 255, .08);
  border: 1px solid rgba(41, 151, 255, .2);
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
}

.news-card__verticals svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--brand);
}

.news-card__verticals .is-meta {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: .04em;
  padding-left: 0;
}

.news-card__verticals--alt span:not(.is-meta) {
  background: rgba(41, 151, 255, .16);
  border-color: rgba(41, 151, 255, .4);
  color: #fff;
}

/* Media column: video or adaptive demo */
.news-card__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  min-height: 200px;
}

.news-card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* AdVenture card: ¿Qué es? | vídeo (fila 1) · Tipos | Ventajas (fila 2) · KPIs (fila 3) */
.news-card--video-top .news-card__body {
  grid-template-columns: 1fr 1.4fr;
  grid-template-rows: auto auto auto;
  align-items: start;
}

.nca__what     { grid-column: 1; grid-row: 1; }
.nca__video    { grid-column: 2; grid-row: 1; align-self: start; }
.nca__types    { grid-column: 1; grid-row: 2; }
.nca__benefits { grid-column: 2; grid-row: 2; }
.nca__kpis     { grid-column: 1 / 3; grid-row: 3; }

.news-card__media--16x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.news-card__media--16x9 video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Phone-style media container (Inter-Act Adaptive) — same look as Peoople phone */
.news-card__media--phone {
  position: relative;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: auto;
}

.phone--news {
  width: 240px;
  aspect-ratio: 9/19;
  border-radius: 16px;
  background: #0a0d14;
  border: 2px solid #1f2330;
  box-shadow:
    inset 0 0 0 5px #050608,
    0 30px 70px -20px rgba(41, 151, 255, .5),
    0 0 0 1px rgba(41, 151, 255, .2);
  overflow: hidden;
  position: relative;
}

/* Hide the static "notch" pill — looked like a hard black hole over the video */
.phone--news .phone__notch {
  display: none;
}

.phone--news video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "Ver demo en vivo" CTA button */
.news-card__demo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(41, 151, 255, .12);
  border: 1px solid rgba(41, 151, 255, .35);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.news-card__demo-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.news-card__demo-link:hover {
  transform: translateY(-2px);
  background: rgba(41, 151, 255, .22);
  border-color: rgba(41, 151, 255, .65);
  box-shadow: 0 10px 24px -8px rgba(41, 151, 255, .55);
}

/* "Powered by Konnect" badge inside the "¿Qué es?" block of the Reel card */
.news-card__powered {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 6px 12px 6px 14px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 6px 18px -6px rgba(41, 151, 255, .45);
}

.news-card__powered small {
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .5);
  font-weight: 700;
}

.news-card__powered img {
  height: 20px;
  width: auto;
  display: block;
}

/* Format size chips (300×600 / 300×250 / 300×100) inside the "¿Qué es?" block */
.news-card__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.news-card__sizes span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  color: #cfe6ff;
  background: rgba(41, 151, 255, .12);
  border: 1px solid rgba(41, 151, 255, .30);
  padding: 5px 11px 5px 9px;
  border-radius: 6px;
}

.news-card__sizes svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--brand);
}

/* Collapsed-card visual: title rotated to read vertically (only on desktop) */
@media (min-width:881px) {
  .news-card[data-active="false"] .news-card__head {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 22px 12px;
    text-align: center;
  }

  .news-card[data-active="false"] .news-card__title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: auto 0;
    font-size: 18px;
    letter-spacing: .02em;
  }

  .news-card[data-active="false"] .news-card__sub {
    display: none;
  }

  .news-card[data-active="false"] .news-card__tag {
    margin-bottom: 0;
  }
}

/* ============================================================
   CTV SHOWCASE (slides 16-23)
   ============================================================ */
.ctv {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: 1280px;
  margin: 0 auto;
}

.ctv__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(18px, 3vh, 56px);
}

.ctv__head h2 {
  font-size: clamp(30px, 4.5vw, 56px);
}

.ctv__head p {
  color: var(--text-2);
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 17px);
}

.ctv__stage {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width:980px) {
  .ctv__stage {
    grid-template-columns: 1fr;
  }
}

.ctv__tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ctv-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num name";
  align-items: center;
  gap: 0 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--line);
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: inherit;
}

.ctv-tab__desc,
.ctv-tab__kpis {
  display: none;
}

.ctv-tab:hover {
  border-color: rgba(41, 151, 255, .4);
  background: rgba(41, 151, 255, .06);
  color: var(--text);
}

.ctv-tab.is-active {
  border-color: var(--brand);
  background: linear-gradient(135deg, rgba(41, 151, 255, .18), rgba(41, 151, 255, .10));
  color: var(--text);
  box-shadow: 0 10px 30px -15px rgba(41, 151, 255, .5);
}

.ctv-tab__num {
  grid-area: num;
  align-self: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--brand);
  width: 36px;
}

.ctv-tab.is-active .ctv-tab__num {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ctv-tab__name {
  grid-area: name;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

.ctv-tab__desc {
  grid-area: desc;
  font-size: 12.5px;
  color: var(--text-2);
}

.ctv-tab__kpis {
  grid-area: kpis;
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

.ctv-tab.is-active .ctv-tab__kpis {
  color: var(--brand-2);
}

.ctv__player {
  position: sticky;
  top: 88px;
  /* Grid: all devices share row 1 (stacked + crossfade), caption is row 2.
     Reserved min-height keeps the stage steady when switching devices.
     Viewport-relative so short laptop monitors don't reserve more height
     than they actually have for the mockup. */
  display: grid;
  grid-template-rows: auto auto;
  gap: 14px;
}

/* All devices share grid cell (1,1) and crossfade in place */
.ctv__device {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transform: scale(.96) translateY(8px);
  filter: blur(6px);
  pointer-events: none;
  transition:
    opacity .55s cubic-bezier(.16, 1, .3, 1),
    transform .55s cubic-bezier(.16, 1, .3, 1),
    filter .4s ease;
}

.ctv__device.is-active {
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: visible;
  transform: scale(1) translateY(0);
  filter: blur(0);
  pointer-events: auto;
  z-index: 2;
}

/* Caption sits in row 2 of the player grid */
.ctv__caption {
  grid-row: 2;
  grid-column: 1;
}

/* Scroll Gallery (tab 10): phone with video + side text */
.ctv__device--gallery {
  flex-direction: column;
  gap: 18px;
}

.ctv__gallery-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
}

.ctv__gallery-row .phone {
  flex: 0 0 auto;
  width: 240px;
}

.ctv__gallery-text {
  flex: 1 1 0;
  min-width: 0;
  max-width: 380px;
}

.ctv__gallery-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
  line-height: 1;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 18px;
  letter-spacing: -.02em;
}

.ctv__gallery-dot {
  color: var(--brand);
}

.ctv__gallery-size {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-2);
  letter-spacing: .04em;
}

@media (max-width:780px) {
  .ctv__gallery-row {
    flex-direction: column;
    gap: 24px;
  }

  .ctv__gallery-text {
    text-align: center;
    max-width: none;
  }

  .ctv__gallery-title {
    font-size: 36px;
  }
}

/* Out of the box (tab 08): smaller TV + phone slideshow side-by-side */
.ctv__device--ootb {
  flex-direction: column;
  gap: 14px;
}

.ctv__ootb-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
}

.ctv__ootb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ctv__ootb-item .phone {
  width: 200px;
}

.ctv__ootb-item .ctv__device-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
  transition: opacity .4s ease;
}

.ctv__tv--small {
  width: 420px;
  max-width: 100%;
}

.ctv__tv--small .ctv__screen {
  box-shadow: 0 0 0 10px #11141b, 0 0 0 11px #1f2330, 0 30px 70px -20px rgba(41, 151, 255, .5);
}

.ctv__tv--small .ctv__base {
  width: 140px;
}

.ctv__ootb-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease-in-out;
}

.ctv__ootb-slide.is-active {
  opacity: 1;
}

@media (max-width:980px) {
  .ctv__ootb-row {
    flex-direction: column;
    gap: 32px;
  }

  .ctv__tv--small {
    width: 100%;
    max-width: 360px;
  }
}

/* Gaming (tab 09): coming-soon badge + cycling phone images + side text */
.ctv__device--gaming {
  flex-direction: column;
  gap: 18px;
  position: relative;
}

.ctv__coming-soon {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0a0c10;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 14px 30px -12px rgba(41, 151, 255, .6);
}

.ctv__gaming-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  width: 100%;
}

.ctv__gaming-row .phone {
  flex: 0 0 auto;
  width: 240px;
}

.ctv__gaming-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease-in-out;
}

.ctv__gaming-slide.is-active {
  opacity: 1;
}

.ctv__gaming-text {
  flex: 1 1 0;
  min-width: 0;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ctv__gaming-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.ctv__gaming-text p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}

@media (max-width:780px) {
  .ctv__gaming-row {
    flex-direction: column;
    gap: 24px;
  }

  .ctv__gaming-text {
    max-width: none;
    text-align: center;
    align-items: center;
  }
}

/* Triple mobile (tab 06: Inter-Act! Fullscreen) */
.ctv__device--triple-mobile {
  flex-direction: column;
}

.ctv__triple-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.ctv__triple-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ctv__triple-item .phone {
  width: 240px;
  max-width: 100%;
}

.ctv__triple-item .ctv__device-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

@media (max-width:780px) {
  .ctv__triple-row {
    flex-wrap: wrap;
    gap: 18px;
  }

  .ctv__triple-item {
    flex: 0 0 calc(50% - 9px);
  }

  .ctv__triple-item .phone {
    max-width: 160px;
  }
}

/* Dual mobile (tab 05: Waterfall + Strawpoll) */
.ctv__device--dual-mobile {
  flex-direction: column;
}

.ctv__dual-mobile-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  width: 100%;
}

.ctv__dual-mobile-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ctv__dual-mobile-item .phone {
  width: 240px;
  max-width: 100%;
}

.ctv__dual-mobile-item .ctv__device-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
}

.ctv__mini-bullets {
  list-style: none;
  margin: 6px 0 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 280px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
}

.ctv__mini-bullets li {
  position: relative;
  padding: 2px 0 2px 16px;
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.4;
}

.ctv__mini-bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

@media (max-width:780px) {
  .ctv__dual-mobile-row {
    flex-direction: column;
    gap: 36px;
  }

  .ctv__dual-mobile-item {
    width: 100%;
    max-width: 320px;
  }
}

/* Shared icons strip — same look across tabs 01–04 */
.ctv__icons-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 22px;
}

.ctv__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  color: #0a0c10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 14px 30px -12px rgba(41, 151, 255, .5),
    0 0 0 1px rgba(255, 255, 255, .2);
}

.ctv__icon svg {
  width: 30px;
  height: 30px;
}

.ctv__device.is-active .ctv__icons-strip .ctv__icon:nth-child(1) {
  animation: ctvIconPop .7s .05s cubic-bezier(.16, 1, .3, 1) both;
}

.ctv__device.is-active .ctv__icons-strip .ctv__icon:nth-child(2) {
  animation: ctvIconPop .7s .15s cubic-bezier(.16, 1, .3, 1) both;
}

.ctv__device.is-active .ctv__icons-strip .ctv__icon:nth-child(3) {
  animation: ctvIconPop .7s .25s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes ctvIconPop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.85);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Multi-device (tab 04): icons strip + video screen, info lives in caption */
.ctv__device--multi {
  flex-direction: column;
  gap: 0;
}

.ctv__multi-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(41, 151, 255, .3);
  box-shadow:
    0 0 0 10px #11141b,
    0 0 0 11px #1f2330,
    0 40px 80px -25px rgba(41, 151, 255, .5);
}

.ctv__multi-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* TV (tab 01) and Mobile (tab 02): show the icons strip above the mockup */
.ctv__device--tv,
.ctv__device--mobile,
.ctv__device--email {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* SMS (tab 12): same layout as Waterfall/Strawpoll (tab 05) — icon strip
   above, two-phone row below, with the strip centered horizontally by
   the strip's own justify-content rather than shrink-wrapping the row. */
.ctv__device--sms {
  flex-direction: column;
}

@media (max-width:780px) {
  .ctv__icons-strip {
    gap: 14px;
  }

  .ctv__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .ctv__icon svg {
    width: 24px;
    height: 24px;
  }
}

.ctv__device--dual {
  flex-direction: column;
  align-items: center;
}

.ctv__dual-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  width: 100%;
}

/* Tab 11 — one laptop + chip selector below (Email Standard / Video / Native) */
.ctv__email-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:100%;
}
.ctv__laptop--big{
  max-width:560px;
  width:100%;
}
.ctv__email-chips{
  display:flex;
  gap:10px;
  margin-top:4px;
}
.ctv__email-chip{
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:600;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text-2);
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--spring);
}
.ctv__email-chip:hover{
  background:rgba(41,151,255,.14);
  border-color:rgba(41,151,255,.5);
  color:var(--brand-2);
  transform:translateY(-1px);
}
.ctv__email-chip.is-active{
  background:linear-gradient(135deg, rgba(41,151,255,.45), rgba(120,180,255,.25));
  border-color:rgba(41,151,255,.7);
  color:#fff;
  box-shadow:0 6px 18px -6px rgba(41,151,255,.7);
}

/* Each item in the dual layout: device + small label below */
.ctv__dual-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex: 1 1 0;
  min-width: 0;
}

.ctv__dual-item .phone {
  width: 240px;
  max-width: 100%;
}

.ctv__dual-item .ctv__laptop {
  width: 100%;
  max-width: 640px;
}

/* CTV mobile phones — wear the same layered frame as the TV in tab 01 */
.ctv__device--mobile .phone,
.ctv__dual-item .phone,
.ctv__triple-item .phone,
.ctv__device--gaming .phone,
.ctv__ootb-item .phone,
.ctv__device--gallery .phone {
  box-shadow:
    inset 0 0 0 6px #050608,
    0 0 0 6px #11141b,
    0 0 0 7px #1f2330,
    0 0 0 8px rgba(41, 151, 255, .25),
    0 50px 100px -30px rgba(41, 151, 255, .5);
}

/* Hide the notch on the triple-mobile phones (tabs 06 + 07) */
.ctv__triple-item .phone__notch {
  display: none;
}


/* Laptop mockup (used in dual) */
.ctv__laptop {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.ctv__laptop-screen {
  position: relative;
  aspect-ratio: 16/10;
  background: #000;
  border: 12px solid #1a1d24;
  border-bottom-width: 0;
  border-radius: 14px 14px 4px 4px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(41, 151, 255, .5);
}

.ctv__laptop-screen::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 12px;
  background: #1a1d24;
  border-radius: 0 0 6px 6px;
  z-index: 2;
}

.ctv__laptop-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ctv__laptop-base {
  height: 9px;
  background: linear-gradient(180deg, #2a2d34, #1a1d24 40%, #0e1014);
  border-radius: 0 0 14px 14px;
  margin: 0 -28px;
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .6);
}

.ctv__laptop-base::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #0a0c10;
  border-radius: 0 0 4px 4px;
  margin: 0 auto;
}

.ctv__device--dual .ctv__laptop-screen {
  border-width: 10px;
  border-bottom-width: 0;
}

/* Format labels under the icon, above the device */
.ctv__device-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand);
  white-space: nowrap;
  text-transform: uppercase;
}

@media (max-width:980px) {
  .ctv__dual-row {
    flex-direction: column;
    gap: 36px;
    align-items: center;
  }

  .ctv__dual-item {
    width: 100%;
    max-width: 420px;
  }

  .ctv__dual-item .ctv__laptop {
    max-width: 420px;
  }
}

.ctv__tv {
  position: relative;
}

.ctv__screen {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(41, 151, 255, .3);
  box-shadow:
    0 0 0 14px #11141b,
    0 0 0 15px #1f2330,
    0 50px 100px -30px rgba(41, 151, 255, .5);
}

.ctv__screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--t);
}

.ctv__screen.is-swapping video {
  opacity: .2;
}

.ctv__screen-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 30%, transparent 70%, rgba(0, 0, 0, .3));
}

.ctv__stand {
  width: 8px;
  height: 30px;
  background: #1f2330;
  margin: 30px auto 0;
}

.ctv__base {
  width: 200px;
  height: 8px;
  background: #1f2330;
  border-radius: 4px;
  margin: 0 auto;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .6);
}

.ctv__caption {
  text-align: center;
  margin-top: 10px;
  padding: 14px 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
}

.ctv__caption-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 6px;
  font-weight: 700;
}

.ctv__caption strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  color: var(--text);
  margin-bottom: 4px;
}

.ctv__caption small {
  display: block;
  font-size: 13px;
  color: var(--text-2);
}

/* ============================================================
   CATÁLOGO (slide 15) — bento grid of channel cards
   ============================================================ */
.catalog {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: 1240px;
  margin: 0 auto;
}

.catalog__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(16px, 2.8vh, 40px);
}

.catalog__head h2 {
  font-size: clamp(28px, 3.6vw, 46px);
}

/* ============================================================
   Hero stats: total formats · channels · platform
   ============================================================ */
.cat-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 0 auto clamp(14px, 2.5vh, 36px);
  padding: 18px 32px;
  max-width: 920px;
  perspective: 1200px;
}

.cat-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transform-style: preserve-3d;
}

/* Reveal: each stat flips down from above (3D rotateX) — Apple "billboard flip" */
.cat-hero.reveal .cat-hero__stat {
  opacity: 0;
  transform: rotateX(-90deg) translateY(-30px);
  transform-origin: 50% 100%;
  transition: opacity .25s ease, transform .25s ease;
}

.cat-hero.reveal.is-visible .cat-hero__stat {
  opacity: 1;
  transform: rotateX(0) translateY(0);
  transition: opacity .9s var(--spring), transform 1s var(--spring);
}

/* Strategy filter — chip row between the hero stats and the carousel */
.cat-filter{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:18px auto;
}
.cat-filter__label{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-dim);
  font-weight:700;
  margin-right:4px;
}
.cat-filter__btn{
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:600;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text-2);
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--spring);
}
.cat-filter__btn:hover{
  background:rgba(41,151,255,.14);
  border-color:rgba(41,151,255,.5);
  color:var(--brand-2);
  transform:translateY(-1px);
}
.cat-filter__btn.is-active{
  background:linear-gradient(135deg, rgba(41,151,255,.45), rgba(120,180,255,.25));
  border-color:rgba(41,151,255,.7);
  color:#fff;
  box-shadow:0 6px 18px -6px rgba(41,151,255,.7);
}

/* Global strategy filter — JS sets `html[data-strategy]` and any element
   tagged with the OPPOSITE strategy is hidden everywhere on the page
   (catalog lanes, CTV tabs + devices, etc.). The catalog carousel has
   additional JS to recalculate its visible-slide bookkeeping. */
html[data-strategy="performance"] [data-strategy="awareness"]{ display:none !important; }
html[data-strategy="awareness"]  [data-strategy="performance"]{ display:none !important; }

.cat-hero.reveal.is-visible .cat-hero__stat:nth-of-type(1) {
  transition-delay: .15s;
}

.cat-hero.reveal.is-visible .cat-hero__stat:nth-of-type(2) {
  transition-delay: .35s;
}

.cat-hero.reveal.is-visible .cat-hero__stat:nth-of-type(3) {
  transition-delay: .55s;
}

/* Separators draw vertically as scale */
.cat-hero.reveal .cat-hero__sep {
  transform: scaleY(0);
  transform-origin: center;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.cat-hero.reveal.is-visible .cat-hero__sep {
  transform: scaleY(1);
  opacity: 1;
  transition: opacity .6s ease, transform .9s var(--spring);
}

.cat-hero.reveal.is-visible .cat-hero__sep:nth-of-type(1) {
  transition-delay: .55s;
}

.cat-hero.reveal.is-visible .cat-hero__sep:nth-of-type(2) {
  transition-delay: .75s;
}

/* Subtle "flash" pulse on each number once it lands */
.cat-hero.reveal.is-visible .cat-hero__num {
  animation: catHeroFlash 1.5s ease-out;
}

.cat-hero.reveal.is-visible .cat-hero__stat:nth-of-type(2) .cat-hero__num {
  animation-delay: .2s;
}

.cat-hero.reveal.is-visible .cat-hero__stat:nth-of-type(3) .cat-hero__num {
  animation-delay: .4s;
}

@keyframes catHeroFlash {
  0% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(41, 151, 255, 0));
  }

  60% {
    filter: brightness(1.4) drop-shadow(0 0 16px rgba(41, 151, 255, .65));
  }

  100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(41, 151, 255, 0));
  }
}

.cat-hero__num {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.cat-hero__num small {
  font-size: .45em;
  -webkit-text-fill-color: var(--brand);
  color: var(--brand);
  font-weight: 700;
}

.cat-hero__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cat-hero__sep {
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(41, 151, 255, .5), transparent);
}

@media (max-width:780px) {
  .cat-hero {
    flex-wrap: wrap;
    gap: 24px 32px;
  }

  .cat-hero__sep {
    display: none;
  }
}

/* ============================================================
   Channel CAROUSEL — Apple-style horizontal slider, one channel
   visible at a time, auto-advances + arrow + keyboard control.
   ============================================================ */
.cat-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 14px 14px;
  padding: 0 0 56px;
}

/* Progress strip on top — channel names with active highlight + counter */
.cat-carousel__progress {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
}

.cat-carousel__steps {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cat-carousel__step {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .25s var(--spring);
  white-space: nowrap;
}

.cat-carousel__step:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  transform: translateY(-1px);
}

.cat-carousel__step.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(41, 151, 255, .35), rgba(41, 151, 255, .18));
  border-color: rgba(41, 151, 255, .55);
  box-shadow: 0 6px 18px -8px rgba(41, 151, 255, .6);
}

.cat-carousel__step.is-visited {
  color: var(--text-2);
}

.cat-carousel__counter {
  flex: 0 0 auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.cat-carousel__counter em {
  font-style: normal;
  color: var(--text-dim);
  margin: 0 2px;
}

.cat-carousel__counter-total {
  color: var(--text-dim);
}

#catCounterCurrent {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 18px;
  font-weight: 800;
}

@media (max-width:780px) {
  .cat-carousel__progress {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .cat-carousel__counter {
    align-self: flex-end;
  }
}

@media (max-width:780px) {
  .cat-carousel {
    grid-template-columns: 36px 1fr 36px;
  }
}

.cat-carousel__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.cat-carousel__track {
  display: flex;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

/* Each slide = one channel lane, full viewport width inside the carousel */
.cat-carousel__track>.cat-lane {
  flex: 0 0 100%;
  width: 100%;
  min-height: 200px;
}

/* Round nav buttons */
.cat-carousel__nav {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .25s var(--spring), background .25s ease, border-color .25s ease, color .25s ease;
  padding: 0;
}

.cat-carousel__nav svg {
  width: 22px;
  height: 22px;
}

.cat-carousel__nav:hover {
  transform: scale(1.08);
  background: rgba(41, 151, 255, .18);
  border-color: rgba(41, 151, 255, .55);
  color: var(--brand-2);
}

.cat-carousel__nav:active {
  transform: scale(.95);
}

.cat-carousel__nav:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
}

@media (max-width:780px) {
  .cat-carousel__nav {
    width: 36px;
    height: 36px;
  }

  .cat-carousel__nav svg {
    width: 16px;
    height: 16px;
  }
}

/* Dot pagination */
.cat-carousel__dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}

.cat-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .3s var(--spring), background .3s ease, border-color .3s ease;
}

.cat-carousel__dot:hover {
  border-color: rgba(41, 151, 255, .6);
}

.cat-carousel__dot.is-active {
  background: var(--brand);
  border-color: var(--brand);
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(41, 151, 255, .6);
}

.cat-lane {
  position: relative;
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: center;
  gap: 48px;
  padding: 48px 56px;
  border-radius: 18px;
  background: linear-gradient(110deg, rgba(41, 151, 255, .12) 0%, rgba(41, 151, 255, .05) 22%, rgba(255, 255, 255, .01) 45%);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .4s var(--spring), border-color .3s ease, box-shadow .3s ease;
}

.cat-lane::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  opacity: 0;
  transition: opacity .3s ease;
}

.cat-lane:hover {
  transform: translateX(4px);
  border-color: rgba(41, 151, 255, .45);
  box-shadow: 0 14px 30px -10px rgba(41, 151, 255, .45);
}

.cat-lane:hover::before {
  opacity: 1;
}

@media (max-width:780px) {
  .cat-lane {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.cat-lane__head {
  display: flex;
  align-items: center;
  gap: 22px;
}

.cat-lane__icon {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(41, 151, 255, .26), rgba(41, 151, 255, .08));
  border: 1px solid rgba(41, 151, 255, .5);
  color: var(--brand-2);
  box-shadow: 0 12px 30px -10px rgba(41, 151, 255, .5);
}

.cat-lane__icon svg {
  width: 40px;
  height: 40px;
}

.cat-lane__head h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.05;
}

.cat-lane__head h3 small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 6px;
}

.cat-lane__count {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-2);
  margin-top: 8px;
  letter-spacing: .04em;
}

.cat-lane__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: center;
}

.cat-lane__pills span {
  display: inline-block;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  cursor: default;
}

.cat-lane__pills span:hover {
  transform: translateY(-2px);
  background: rgba(41, 151, 255, .16);
  border-color: rgba(41, 151, 255, .45);
  color: #fff;
}

/* In carousel mode each lane is always rendered; its inner elements animate
   only when the lane becomes the active slide (.is-active set by JS). */
.cat-carousel__track>.cat-lane {
  opacity: 1;
  transform: none;
  clip-path: none;
}

/* Drawing line traces across the active slide */
.cat-carousel__track>.cat-lane::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41, 151, 255, .85), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.cat-carousel__track>.cat-lane.is-active::before {
  animation: catLaneLine 1.6s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes catLaneLine {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  35% {
    transform: scaleX(1);
    opacity: 1;
  }

  60% {
    transform: scaleX(1);
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

/* Inner-lane micro-animations: triggered when the lane becomes the
   active carousel slide (.is-active). Re-runs each time the user
   navigates to that slide. */
.cat-lane .cat-lane__icon {
  opacity: 0;
  transform: scale(.4) rotate(-30deg);
  transition: opacity .25s ease, transform .25s ease;
}

.cat-lane.is-active .cat-lane__icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: opacity .6s var(--spring) .35s, transform .7s cubic-bezier(.34, 1.56, .64, 1) .35s;
}

.cat-lane .cat-lane__head h3,
.cat-lane .cat-lane__count {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}

.cat-lane.is-active .cat-lane__head h3 {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--spring) .45s, transform .55s var(--spring) .45s;
}

.cat-lane.is-active .cat-lane__count {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--spring) .58s, transform .55s var(--spring) .58s;
}

.cat-lane .cat-lane__pills span {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .55s var(--spring), transform .55s var(--spring), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.cat-lane.is-active .cat-lane__pills span {
  opacity: 1;
  transform: translateX(0);
}

.cat-lane.is-active .cat-lane__pills span:nth-child(1) {
  transition-delay: .65s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(2) {
  transition-delay: .72s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(3) {
  transition-delay: .79s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(4) {
  transition-delay: .86s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(5) {
  transition-delay: .93s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(6) {
  transition-delay: 1.00s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(7) {
  transition-delay: 1.07s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(8) {
  transition-delay: 1.14s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(9) {
  transition-delay: 1.21s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(10) {
  transition-delay: 1.28s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(11) {
  transition-delay: 1.35s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(12) {
  transition-delay: 1.42s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(13) {
  transition-delay: 1.49s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(14) {
  transition-delay: 1.56s;
}

.cat-lane.is-active .cat-lane__pills span:nth-child(15) {
  transition-delay: 1.63s;
}

/* Subtle moving sheen across each lane (staggered) */
.cat-lane::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 35%, rgba(41, 151, 255, .10) 50%, transparent 65%);
  background-size: 280% 100%;
  background-position: 200% 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.cat-lane.reveal.is-visible::after {
  opacity: 1;
  animation: catLaneSheen 9s ease-in-out infinite;
}

.cat-lane.reveal.is-visible:nth-of-type(2)::after {
  animation-delay: 1.2s;
}

.cat-lane.reveal.is-visible:nth-of-type(3)::after {
  animation-delay: 2.4s;
}

.cat-lane.reveal.is-visible:nth-of-type(4)::after {
  animation-delay: 3.6s;
}

.cat-lane.reveal.is-visible:nth-of-type(5)::after {
  animation-delay: 4.8s;
}

.cat-lane.reveal.is-visible:nth-of-type(6)::after {
  animation-delay: 6.0s;
}

.cat-lane.reveal.is-visible:nth-of-type(7)::after {
  animation-delay: 7.2s;
}

.cat-lane.reveal.is-visible:nth-of-type(8)::after {
  animation-delay: 8.4s;
}

@keyframes catLaneSheen {

  0%,
  70%,
  100% {
    background-position: 200% 0;
  }

  85% {
    background-position: -100% 0;
  }
}

.cat-lane>* {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {

  .cat-lane.reveal,
  .cat-lane .cat-lane__pills span {
    opacity: 1 !important;
    transform: none !important;
  }

  .cat-lane.reveal.is-visible::after {
    animation: none;
    opacity: 0;
  }
}

/* Bento grid: 4 columns, with the two "wide" cards spanning 2 columns each */
.cat-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}

@media (max-width:980px) {
  .cat-bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:520px) {
  .cat-bento {
    grid-template-columns: 1fr;
  }
}

.cat-channel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 900px;
  transition: border-color var(--t), box-shadow var(--t);
}

/* ── Distinct entrance: 3D tilt-up + scale + blur (Apple-style) ── */
.cat-channel.reveal {
  opacity: 0;
  transform: scale(.85) rotateX(-18deg);
  filter: blur(8px);
  transform-origin: center bottom;
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform .9s cubic-bezier(.16, 1, .3, 1),
    filter .55s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.cat-channel.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  /* Idle: subtle float, kicks in after the entry transition (1s) */
  animation: catFloat 6s ease-in-out 1s infinite;
}

/* Stagger the float so cards aren't all bobbing in sync */
.cat-bento>.cat-channel:nth-child(1).is-visible {
  animation-delay: 1.0s;
}

.cat-bento>.cat-channel:nth-child(2).is-visible {
  animation-delay: 1.7s;
}

.cat-bento>.cat-channel:nth-child(3).is-visible {
  animation-delay: 2.4s;
}

.cat-bento>.cat-channel:nth-child(4).is-visible {
  animation-delay: 3.1s;
}

.cat-bento>.cat-channel:nth-child(5).is-visible {
  animation-delay: 3.8s;
}

.cat-bento>.cat-channel:nth-child(6).is-visible {
  animation-delay: 4.5s;
}

.cat-bento>.cat-channel:nth-child(7).is-visible {
  animation-delay: 5.2s;
}

.cat-bento>.cat-channel:nth-child(8).is-visible {
  animation-delay: 5.9s;
}

@keyframes catFloat {

  0%,
  100% {
    transform: translateY(0) scale(1) rotateX(0);
  }

  50% {
    transform: translateY(-4px) scale(1) rotateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cat-channel.reveal.is-visible {
    animation: none;
    transform: none;
  }
}

/* Mouse-following spotlight */
.cat-channel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(41, 151, 255, .16), transparent 50%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
  z-index: 1;
}

/* Continuous diagonal shine sweep — runs forever, staggered between cards
   so the eye always has something happening on screen. */
.cat-channel::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 38%, rgba(255, 255, 255, .10) 50%, transparent 62%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: catChannelShine 11s ease-in-out infinite;
}

.cat-bento>.cat-channel:nth-child(1)::after {
  animation-delay: 0s;
}

.cat-bento>.cat-channel:nth-child(2)::after {
  animation-delay: -1.4s;
}

.cat-bento>.cat-channel:nth-child(3)::after {
  animation-delay: -2.8s;
}

.cat-bento>.cat-channel:nth-child(4)::after {
  animation-delay: -4.2s;
}

.cat-bento>.cat-channel:nth-child(5)::after {
  animation-delay: -5.6s;
}

.cat-bento>.cat-channel:nth-child(6)::after {
  animation-delay: -7.0s;
}

.cat-bento>.cat-channel:nth-child(7)::after {
  animation-delay: -8.4s;
}

.cat-bento>.cat-channel:nth-child(8)::after {
  animation-delay: -9.8s;
}

@keyframes catChannelShine {

  0%,
  100% {
    background-position: -100% 50%;
    opacity: 0;
  }

  45% {
    opacity: .85;
  }

  50% {
    background-position: 200% 50%;
    opacity: 0;
  }
}

.cat-channel:hover {
  border-color: rgba(41, 151, 255, .45);
  box-shadow: 0 22px 44px -16px rgba(41, 151, 255, .45);
}

.cat-channel:hover::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cat-channel::after {
    animation: none;
  }
}

/* Wide cards span 2 columns */
.cat-channel--wide {
  grid-column: span 2;
}

@media (max-width:520px) {
  .cat-channel--wide {
    grid-column: span 1;
  }
}

/* Center the 2 last mini cards (CTV + SMS) on the last row */
@media (min-width:981px) {
  .cat-bento>.cat-channel:nth-child(7) {
    grid-column-start: 2;
  }
}

.cat-channel__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(41, 151, 255, .14);
  border: 1px solid rgba(41, 151, 255, .30);
  color: var(--brand);
  flex: 0 0 auto;
}

.cat-channel__icon svg {
  width: 22px;
  height: 22px;
}

.cat-channel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cat-channel__head h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.15;
}

.cat-channel__head h3 small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px;
}

.cat-channel__count {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  background: rgba(41, 151, 255, .12);
  border: 1px solid rgba(41, 151, 255, .30);
  border-radius: 999px;
  padding: 4px 10px;
  flex: 0 0 auto;
}

.cat-channel__formats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.cat-channel__formats span {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  cursor: default;
}

.cat-channel__formats span:hover {
  transform: translateY(-1px);
  background: rgba(41, 151, 255, .14);
  border-color: rgba(41, 151, 255, .40);
  color: #fff;
}

.cat-channel:hover .cat-channel__formats span {
  background: rgba(41, 151, 255, .10);
  border-color: rgba(41, 151, 255, .28);
}

/* ============================================================
   KONNECT / AUDIENCES (slides 26-29)
   ============================================================ */
.konnect {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.konnect--compare {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
}

.konnect--compare .konnect__compare {
  width: 100%;
}

/* "¿Qué es Konnect?" definition under the heading */
.konnect__what {
  max-width: 780px;
  margin: 18px auto 0;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--text-2);
  line-height: 1.6;
}

.konnect__what strong {
  color: var(--text);
  font-weight: 600;
}

/* ============================================================
   New KONNECT-CMP: dramatic Antes/Ahora split-screen
   ============================================================ */
.konnect-cmp {
  display: grid;
  grid-template-columns: 1fr 140px 1.4fr;
  gap: 24px;
  align-items: stretch;
  position: relative;
}

@media (max-width:980px) {
  .konnect-cmp {
    grid-template-columns: 1fr;
  }
}

/* Generic side card */
.konnect-cmp__side {
  position: relative;
  padding: 32px 28px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.konnect-cmp__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .06);
  color: var(--text-dim);
  border: 1px solid var(--line);
}

.konnect-cmp__tag--accent {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 22px -8px rgba(41, 151, 255, .6);
}

.konnect-cmp__side h3 {
  font-size: clamp(18px, 1.7vw, 22px);
  margin: 0;
  line-height: 1.35;
}

.konnect-cmp__side h3 em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.konnect-cmp__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* === ANTES side: smaller, desaturated, faded === */
.konnect-cmp__side--before {
  filter: saturate(.45) brightness(.85);
  opacity: .85;
  transform: scale(.97);
  transition: filter .8s ease, opacity .8s ease, transform .8s var(--spring);
}

.konnect-cmp__side--before.is-visible {
  /* no extra changes — stays muted */
}

.konnect-cmp__side--before h3 {
  color: var(--text-2);
}

.konnect-cmp__side--before .konnect-cmp__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
}

.konnect-cmp__side--before .konnect-cmp__list li>div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.konnect-cmp__side--before .konnect-cmp__list li strong {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
}

.konnect-cmp__side--before .konnect-cmp__list li small {
  color: var(--text-dim);
  font-size: 11.5px;
}

/* Platform tile (used in both sides at different sizes) */
.konnect-cmp__plat-tile {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5);
}

.konnect-cmp__plat-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.konnect-cmp__plat-tile--mono {
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}

.konnect-cmp__plat-tile--mono img {
  filter: grayscale(1) brightness(1.7);
  opacity: .5;
}

.konnect-cmp__plat-tile--abstract {
  background: rgba(255, 255, 255, .06);
  color: var(--text-dim);
}

.konnect-cmp__plat-tile--abstract svg {
  width: 24px;
  height: 24px;
}

/* === AHORA side: vibrant, dominant === */
.konnect-cmp__side--after {
  background:
    radial-gradient(800px circle at 100% 0%, rgba(41, 151, 255, .18), transparent 55%),
    linear-gradient(160deg, rgba(41, 151, 255, .10), rgba(41, 151, 255, .04));
  border-color: rgba(41, 151, 255, .4);
  box-shadow: 0 30px 80px -30px rgba(41, 151, 255, .45);
  padding: 36px 32px;
}

.konnect-cmp__side--after.is-visible {
  animation: konnectAfterBreath 5s ease-in-out 1.4s infinite;
}

@keyframes konnectAfterBreath {

  0%,
  100% {
    box-shadow: 0 30px 80px -30px rgba(41, 151, 255, .45);
  }

  50% {
    box-shadow: 0 30px 100px -20px rgba(41, 151, 255, .7);
  }
}

.konnect-cmp__list--vibrant {
  gap: 14px;
}

.konnect-cmp__bullet {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.konnect-cmp__bullet:hover {
  transform: translateX(3px);
  border-color: rgba(41, 151, 255, .5);
  background: rgba(41, 151, 255, .08);
}

.konnect-cmp__check {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 4px 12px rgba(41, 151, 255, .5);
}

.konnect-cmp__check svg {
  width: 16px;
  height: 16px;
}

.konnect-cmp__bullet strong {
  color: var(--text);
  font-weight: 700;
}

.konnect-cmp__bullet>span:not(.konnect-cmp__check) {
  font-size: 14px;
  color: var(--text-2);
}

/* Platforms row in Ahora — big tiles */
.konnect-cmp__plats-row {
  padding: 18px 16px;
  border-radius: 14px;
  background: rgba(41, 151, 255, .10);
  border: 1px solid rgba(41, 151, 255, .35);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.konnect-cmp__plats-label {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-2);
  font-weight: 700;
}

.konnect-cmp__plats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.konnect-cmp__plats .konnect-cmp__plat-tile {
  width: auto;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 14px;
  background: #ffffff;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.konnect-cmp__plats .konnect-cmp__plat-tile img {
  display: block;
  width: auto;
  height: auto;
  max-height: 34px;
  max-width: 80%;
  object-fit: contain;
  margin: 0 auto;
}

.konnect-cmp__plats .konnect-cmp__plat-tile small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #0a0c10;
  text-align: center;
  line-height: 1;
}

.konnect-cmp__plats .konnect-cmp__plat-tile--brand {
  background: linear-gradient(160deg, #0a0c10, #0a0c10 60%, #0d2238);
  border: 1px solid rgba(41, 151, 255, .45);
}

.konnect-cmp__plats .konnect-cmp__plat-tile--brand img {
  filter: none;
  max-height: 28px;
}

.konnect-cmp__plats .konnect-cmp__plat-tile--brand small {
  color: #fff;
}

.konnect-cmp__plats .konnect-cmp__plat-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -8px rgba(41, 151, 255, .55);
}

/* === CENTER: Konnect transformer === */
.konnect-cmp__pivot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

@media (max-width:980px) {
  .konnect-cmp__pivot {
    flex-direction: row;
    gap: 12px;
    transform: rotate(90deg);
    padding: 24px 0;
  }
}

.konnect-cmp__pivot-orb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffffff;
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 1px rgba(41, 151, 255, .5),
    0 0 40px rgba(41, 151, 255, .7);
  z-index: 2;
}

.konnect-cmp__pivot-k {
  display: block;
  width: 55%;
  height: auto;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .4));
}

.konnect-cmp__pivot-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(41, 151, 255, .6);
  pointer-events: none;
  animation: konnectPivotRing 2.6s ease-out infinite;
}

.konnect-cmp__pivot-ring:nth-of-type(2) {
  animation-delay: 1.3s;
}

@keyframes konnectPivotRing {
  0% {
    transform: scale(1);
    opacity: .85;
  }

  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* Flowing pipes that connect the orb to each side, with traveling particles */
.konnect-cmp__pivot-flow {
  position: relative;
  flex: 1 1 auto;
  width: 3px;
  min-height: 80px;
  background: linear-gradient(180deg, transparent, rgba(41, 151, 255, .4), transparent);
  overflow: hidden;
}

.konnect-cmp__pivot-flow::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 12px rgba(41, 151, 255, .9);
  animation: konnectFlowDot 2.4s linear infinite;
}

.konnect-cmp__pivot-flow--in {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(120, 180, 255, .5) 100%);
}

.konnect-cmp__pivot-flow--in::before {
  /* particle from top → center: moving down */
  top: -12px;
  animation-name: konnectFlowDownward;
}

.konnect-cmp__pivot-flow--out {
  background: linear-gradient(180deg, rgba(120, 180, 255, .5) 0%, rgba(120, 180, 255, .2) 100%);
}

.konnect-cmp__pivot-flow--out::before {
  top: 0;
  animation-name: konnectFlowDownward;
  animation-delay: 1.2s;
}

@keyframes konnectFlowDownward {
  0% {
    top: -12px;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    top: calc(100% + 4px);
    opacity: 0;
  }
}

@media (max-width:980px) {
  .konnect-cmp__pivot-flow {
    width: 80px;
    height: 3px;
    min-height: 0;
    background: linear-gradient(90deg, transparent, rgba(41, 151, 255, .4), transparent);
  }
}

/* Reveal entrances */
.konnect-cmp__side.reveal {
  opacity: 0;
  transform: translateX(0) scale(.94);
  transition: opacity .9s var(--spring), transform .9s var(--spring), filter .8s ease;
}

.konnect-cmp__side--before.reveal {
  transform: translateX(-24px) scale(.94);
}

.konnect-cmp__side--after.reveal {
  transform: translateX(24px) scale(.94);
}

.konnect-cmp__side.reveal.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.konnect-cmp__side--before.reveal.is-visible {
  /* keep the desaturation */
  opacity: .85;
}

.konnect-cmp__pivot.reveal {
  opacity: 0;
  transform: scale(.5);
  transition: opacity .6s ease, transform .8s cubic-bezier(.34, 1.56, .64, 1);
}

.konnect-cmp__pivot.reveal.is-visible {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {

  .konnect-cmp__pivot-ring,
  .konnect-cmp__pivot-flow::before,
  .konnect-cmp__side--after.is-visible {
    animation: none !important;
  }
}

.konnect__quote {
  margin: 0;
  padding: 36px 56px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(41, 151, 255, .16), rgba(41, 151, 255, .06));
  border: 1px solid rgba(41, 151, 255, .35);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.konnect__quote-text {
  display: block;
  position: relative;
  z-index: 1;
  max-width: 100%;
}

.konnect__quote em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

.konnect__quote-mark {
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  font-size: 80px;
  color: var(--brand);
  font-weight: 900;
  line-height: 1;
  opacity: .45;
  pointer-events: none;
  user-select: none;
}

.konnect__quote-mark--start {
  top: 6px;
  left: 14px;
}

.konnect__quote-mark--end {
  bottom: -22px;
  right: 14px;
}

.konnect__quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
  background-size: 300% 100%;
  background-position: 200% 0;
  pointer-events: none;
  animation: konnectQuoteSheen 6s ease-in-out 1.5s infinite;
}

@keyframes konnectQuoteSheen {

  0%,
  70%,
  100% {
    background-position: 200% 0;
  }

  85% {
    background-position: -100% 0;
  }
}

/* Reveal entrance for the value section */
.konnect__value.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--spring), transform 1s var(--spring);
}

.konnect__value.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.konnect__value.reveal.is-visible .konnect__value-bullets li {
  animation: konnectValuePop .55s var(--spring) both;
}

.konnect__value.reveal.is-visible .konnect__value-bullets li:nth-child(1) {
  animation-delay: .30s;
}

.konnect__value.reveal.is-visible .konnect__value-bullets li:nth-child(2) {
  animation-delay: .42s;
}

.konnect__value.reveal.is-visible .konnect__value-bullets li:nth-child(3) {
  animation-delay: .54s;
}

.konnect__value.reveal.is-visible .konnect__value-bullets li:nth-child(4) {
  animation-delay: .66s;
}

@keyframes konnectValuePop {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.konnect__head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 28px;
}

/* Brand logo as a section badge — wrapped in white pill so it reads on dark bg */
.brand-logo {
  display: inline-block;
  height: auto;
  background: #ffffff;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(41, 151, 255, .30);
  margin-bottom: 18px;
}

.brand-logo--konnect {
  height: 80px;
  padding: 14px 26px;
}

.brand-logo--kapture {
  height: 80px;
  padding: 14px 26px;
}

.brand-logo--peoople {
  height: 80px;
  padding: 14px 26px;
}

/* ============================================================
   BRAND STAGE — spectacular intro effect for Konnect/Kapture/Peoople
   Each brand has its own character; the effect plays once on slide entry
   and re-plays whenever the slide is re-entered.
   ============================================================ */
.brand-stage {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
  z-index: 1;
  isolation: isolate;
}

.brand-stage>.brand-logo {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}

/* ===== KONNECT — concentric data rings + radial light beams ===== */
.brand-stage--konnect .brand-stage__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 2px solid rgba(41, 151, 255, .6);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0;
  z-index: 1;
}

.brand-stage--konnect .brand-stage__beams {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  background:
    conic-gradient(from 0deg,
      rgba(41, 151, 255, .45) 0deg,
      transparent 14deg 45deg,
      rgba(120, 180, 255, .4) 60deg,
      transparent 75deg 110deg,
      rgba(41, 151, 255, .45) 130deg,
      transparent 145deg 180deg,
      rgba(120, 180, 255, .4) 200deg,
      transparent 215deg 250deg,
      rgba(41, 151, 255, .45) 270deg,
      transparent 285deg 320deg,
      rgba(120, 180, 255, .4) 340deg,
      transparent 355deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 28%, #000 50%, transparent 80%);
  mask: radial-gradient(closest-side, transparent 28%, #000 50%, transparent 80%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}

.is-visible>.brand-stage--konnect .brand-stage__ring {
  animation: konnectRingBurst 1.6s ease-out forwards;
}

.is-visible>.brand-stage--konnect .brand-stage__ring:nth-of-type(2) {
  animation-delay: .2s;
}

.is-visible>.brand-stage--konnect .brand-stage__ring:nth-of-type(3) {
  animation-delay: .4s;
}

@keyframes konnectRingBurst {
  0% {
    transform: translate(-50%, -50%) scale(.5);
    opacity: .85;
  }

  100% {
    transform: translate(-50%, -50%) scale(3.2);
    opacity: 0;
  }
}

.is-visible>.brand-stage--konnect .brand-stage__beams {
  animation: konnectBeams 1.8s ease-out forwards;
}

@keyframes konnectBeams {
  0% {
    transform: translate(-50%, -50%) scale(.4) rotate(0deg);
    opacity: 0;
  }

  30% {
    transform: translate(-50%, -50%) scale(1) rotate(20deg);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(2) rotate(60deg);
    opacity: 0;
  }
}

.is-visible>.brand-stage--konnect .brand-logo {
  animation: konnectLogoEnter 1.2s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes konnectLogoEnter {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(1.7);
    filter: brightness(2.2) blur(6px);
  }

  60% {
    opacity: 1;
    transform: translateY(6px) scale(.96);
    filter: brightness(1.15) blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1) blur(0);
  }
}

/* ===== KAPTURE — camera shutter aperture + flash ===== */
.brand-stage--kapture .brand-stage__flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260%;
  height: 260%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 210, 90, .35) 40%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  filter: blur(2px);
}

.brand-stage--kapture .brand-stage__shutter {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240%;
  height: 240%;
  transform: translate(-50%, -50%) scale(0);
  border: 3px solid rgba(255, 210, 90, .85);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    0 0 60px rgba(255, 210, 90, .6),
    inset 0 0 30px rgba(255, 210, 90, .4);
}

.is-visible>.brand-stage--kapture .brand-stage__flash {
  animation: kaptureFlash 1.1s ease-out forwards;
}

@keyframes kaptureFlash {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  20% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }

  60% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: .4;
  }

  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.is-visible>.brand-stage--kapture .brand-stage__shutter {
  animation: kaptureShutter 1.4s ease-out forwards;
}

@keyframes kaptureShutter {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  30% {
    transform: translate(-50%, -50%) scale(.6);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}

.is-visible>.brand-stage--kapture .brand-logo {
  animation: kaptureLogoEnter 1.3s cubic-bezier(.16, 1, .3, 1) both;
  clip-path: circle(75% at 50% 50%);
}

@keyframes kaptureLogoEnter {
  0% {
    opacity: 0;
    transform: scale(.4);
    clip-path: circle(0% at 50% 50%);
    filter: brightness(2);
  }

  40% {
    opacity: 1;
    clip-path: circle(35% at 50% 50%);
    filter: brightness(1.4);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    clip-path: circle(75% at 50% 50%);
    filter: brightness(1);
  }
}

/* ===== PEOOPLE — heart burst out of the logo ===== */
.brand-stage--peoople .brand-stage__heart {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 28px;
  color: #ff5474;
  text-shadow:
    0 6px 18px rgba(255, 84, 116, .6),
    0 0 36px rgba(255, 84, 116, .45);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.brand-stage--peoople .brand-stage__heart:nth-of-type(1) {
  --tx: -160px;
  --ty: -50px;
  --rot: -25deg;
}

.brand-stage--peoople .brand-stage__heart:nth-of-type(2) {
  --tx: 150px;
  --ty: -70px;
  --rot: 30deg;
}

.brand-stage--peoople .brand-stage__heart:nth-of-type(3) {
  --tx: -100px;
  --ty: 60px;
  --rot: 18deg;
}

.brand-stage--peoople .brand-stage__heart:nth-of-type(4) {
  --tx: 120px;
  --ty: 50px;
  --rot: -22deg;
}

.brand-stage--peoople .brand-stage__heart:nth-of-type(5) {
  --tx: -30px;
  --ty: -110px;
  --rot: 8deg;
}

.brand-stage--peoople .brand-stage__heart:nth-of-type(6) {
  --tx: 40px;
  --ty: -100px;
  --rot: -12deg;
}

.is-visible>.brand-stage--peoople .brand-stage__heart {
  animation: peoopleHeartShoot 1.6s ease-out forwards;
}

.is-visible>.brand-stage--peoople .brand-stage__heart:nth-of-type(1) {
  animation-delay: .10s;
}

.is-visible>.brand-stage--peoople .brand-stage__heart:nth-of-type(2) {
  animation-delay: .20s;
}

.is-visible>.brand-stage--peoople .brand-stage__heart:nth-of-type(3) {
  animation-delay: .16s;
}

.is-visible>.brand-stage--peoople .brand-stage__heart:nth-of-type(4) {
  animation-delay: .26s;
}

.is-visible>.brand-stage--peoople .brand-stage__heart:nth-of-type(5) {
  animation-delay: .13s;
}

.is-visible>.brand-stage--peoople .brand-stage__heart:nth-of-type(6) {
  animation-delay: .30s;
}

@keyframes peoopleHeartShoot {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }

  20% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx) * .35), calc(-50% + var(--ty) * .35)) scale(1.4) rotate(var(--rot));
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.7) rotate(calc(var(--rot) + 30deg));
  }
}

.is-visible>.brand-stage--peoople .brand-logo {
  animation: peoopleLogoEnter 1.1s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes peoopleLogoEnter {
  0% {
    opacity: 0;
    transform: scale(.3) rotate(-12deg);
  }

  60% {
    opacity: 1;
    transform: scale(1.12) rotate(3deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-stage * {
    animation: none !important;
    opacity: 1;
  }

  .brand-stage>.brand-logo {
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
  }
}

.brand-logo--konnect img,
.brand-logo img {
  display: block;
  height: 100%;
  width: auto;
}

/* Some browsers ignore height when wrap has padding; force max-height on the img if used inside .brand-logo */
.brand-logo>img,
.brand-logo--konnect>img,
.brand-logo--kapture>img,
.brand-logo--peoople>img {
  max-height: 52px;
  width: auto;
}

.konnect__head h2 {
  font-size: clamp(30px, 4.5vw, 56px);
}

.konnect__head p {
  color: var(--text-2);
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 17px);
}

.konnect__hero {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 28px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(41, 151, 255, .3);
  aspect-ratio: 16/9;
  background: radial-gradient(ellipse at center, #0a1628 0%, #050a14 70%);
  box-shadow: 0 30px 80px -20px rgba(41, 151, 255, .4);
}

.konnect__hero video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

/* ============================================================
   KONNECT STORY � see css/konnect-story.css (extracted module).
   All .konnect-story / .kstory-* rules and @keyframes live there.
   ============================================================ */

.konnect__hero-overlay {
  /* faint top vignette only — never cover the subtitle area */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 18%);
  pointer-events: none;
}

.konnect__compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
}

@media (max-width:880px) {
  .konnect__compare {
    grid-template-columns: 1fr;
  }

  .konnect__arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
}

.konnect-col {
  padding: 32px 28px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
}

.konnect-col--after {
  background: linear-gradient(160deg, rgba(41, 151, 255, .10), rgba(41, 151, 255, .06));
  border-color: rgba(41, 151, 255, .3);
}

.konnect-col__tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.konnect-col__tag--before {
  background: rgba(255, 255, 255, .06);
  color: var(--text-dim);
  border: 1px solid var(--line);
}

.konnect-col__tag--after {
  background: var(--grad-brand);
  color: #fff;
}

.konnect-col h3 {
  font-size: 20px;
  margin-bottom: 18px;
}

.konnect-col h3 em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.konnect-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.konnect-col li {
  font-size: 14px;
  color: var(--text-2);
  padding: 10px 14px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.konnect-col li strong {
  color: var(--text);
  font-weight: 600;
}

.konnect-col li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.konnect-col__plogo {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* "Antes" col platform logos rendered desaturated/dim */
.konnect-col:not(.konnect-col--after) .konnect-col__plogo {
  filter: grayscale(1) brightness(2);
  opacity: .55;
}

.konnect-col__icondot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  margin: 0 8px;
}

.konnect-col--after .konnect-col__icondot {
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(41, 151, 255, .18);
}

.konnect-col__platforms {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background: rgba(41, 151, 255, .08) !important;
  border-color: rgba(41, 151, 255, .28) !important;
}

.konnect-col__pgroup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
}

.konnect-col__pgroup img {
  height: 18px;
  width: auto;
  object-fit: contain;
}

.konnect-col__pgroup-arkeero {
  height: 14px !important;
}

.konnect__arrow {
  align-self: center;
  color: var(--brand);
  width: 60px;
  filter: drop-shadow(0 0 8px rgba(41, 151, 255, .6));
}

/* ============================================================
   CASES (slide 30)
   ============================================================ */
.cases {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.cases__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(18px, 3vh, 56px);
}

.cases__head h2 {
  font-size: clamp(30px, 4.5vw, 56px);
}

.cases__head p {
  color: var(--text-2);
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 17px);
}

.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width:880px) {
  .cases__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:520px) {
  .cases__grid {
    grid-template-columns: 1fr;
  }
}

.case-card {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--t), border-color var(--t);
}

.case-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad-brand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t);
}

.case-card:hover {
  transform: translateY(-4px);
  border-color: rgba(41, 151, 255, .4);
}

.case-card:hover::before {
  transform: scaleY(1);
}

.case-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 24px;
  min-height: 48px;
}

.case-card__logo {
  flex: 0 1 auto;
  max-width: 60%;
  height: 40px;
  display: flex;
  align-items: center;
}

.case-card__logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* render mark in white on dark surfaces, regardless of original color */
  filter: brightness(0) invert(1);
  opacity: .95;
  transition: opacity var(--t-fast);
}

.case-card:hover .case-card__logo img {
  opacity: 1;
}

.case-card__ind {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  flex: 0 0 auto;
}

.case-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.case-card__metrics>div {
  text-align: center;
  padding: 14px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--line);
}

.case-card__metrics span {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.case-card__metrics .m-up {
  color: var(--brand-2);
}

.case-card__metrics .m-down {
  color: #ffffff;
}

.case-card__metrics small {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 6px;
}

.case-card__note {
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
}

/* ============================================================
   DOOH (slides 31-32)
   ============================================================ */
/* ── Diagrama WPP × Arkeero ── */
.diagram-slide {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 20px 40px 100px;
  gap: 0;
  text-align: center;
}

.diagram-slide__header {
  text-align: center;
  margin-bottom: 80px;
}

.diagram-slide__title {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  margin: 0;
}

.diagram-slide__title em {
  font-style: normal;
  background: linear-gradient(90deg,#2997ff 0%,#66c2ff 60%,#a8daff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.diagram-slide__title-logo {
  height: 0.75em;
  width: auto;
  vertical-align: middle;
  display: inline-block;
  margin-left: 4px;
}

/* Container */
.diagram-wpp {
  position: relative;
  width: 100%;
  max-width: 860px;
}

.diagram-wpp__svg {
  width: 100%;
  display: block;
}

/* Ring draw-in animation */
.diagram-wpp__ring {
  transition: stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1);
}

.diagram-wpp.is-visible .diagram-wpp__ring {
  stroke-dashoffset: 0;
}

/* Ring node dots */
.d-ring-dot {
  opacity: 0;
  transition: opacity 0.4s ease 1.8s;
}

.diagram-wpp.is-visible .d-ring-dot {
  opacity: 1;
}

/* Pulse rings */
.d-ring-pulse {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.diagram-wpp.is-visible .d-ring-pulse {
  animation: dRingPing 2.4s ease-out infinite;
}

@keyframes dRingPing {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(4);   opacity: 0; }
}

/* DATA line fade-in */
.diagram-wpp__data-line {
  opacity: 0;
  transition: opacity 0.6s ease 1.8s;
}

.diagram-wpp.is-visible .diagram-wpp__data-line {
  opacity: 1;
}

/* ── Node cards ── */
.d-node {
  position: absolute;
  left: var(--nx);
  top: var(--ny);
  transform: translate(-50%, calc(-50% + 10px));
  text-align: center;
  opacity: 0;
  transition: opacity 0.55s ease var(--nd, 0.5s),
              transform 0.55s ease var(--nd, 0.5s);
  pointer-events: none;
  padding: 14px 22px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  transition: opacity 0.55s ease var(--nd, 0.5s),
              transform 0.55s ease var(--nd, 0.5s),
              border-color .3s ease;
}

.diagram-wpp.is-visible .d-node {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.d-node--right { text-align: left; }
.d-node--left  { text-align: right; }

.d-node__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.d-node__icon svg {
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,0.7);
}

.d-node--external .d-node__icon svg {
  color: #2997ff;
}

.d-node--external {
  background: rgba(41,151,255,0.08);
  border: 1px dashed rgba(41,151,255,0.5);
  box-shadow: 0 0 16px rgba(41,151,255,0.15);
}

.d-node--external .d-node__label {
  color: #2997ff;
}

.d-node--external .d-node__sub {
  color: rgba(41,151,255,0.65);
}

.d-node::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(41,151,255,.18) 50%, transparent 65%);
  background-size: 280% 100%;
  background-position: 200% 0;
  pointer-events: none;
  z-index: 0;
}

.diagram-wpp.is-visible .d-node::after {
  animation: kvalueShine 6s ease-in-out infinite;
}

.d-node__label {
  display: block;
  position: relative;
  z-index: 1;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.d-node__sub {
  display: block;
  position: relative;
  z-index: 1;
  font-size: clamp(11px, 1.1vw, 13px);
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  white-space: nowrap;
}

/* Konnect highlight */
.d-node__konnect {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg,#2997ff,#0a6bcc);
  color: #fff;
  box-shadow: 0 0 24px rgba(41,151,255,0.5);
}

.d-node__konnect-logo {
  display: block;
  width: clamp(80px, 8vw, 120px);
  height: auto;
}

.d-node:has(.d-node__konnect-logo) {
  background: #fff;
  border-color: rgba(255,255,255,0.2);
  padding: 20px 28px;
  width: max-content;
}

/* DATA badge */
.d-node__data {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid #2997ff;
  border-radius: 999px;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #2997ff;
  background: rgba(41,151,255,0.08);
}

.dooh {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.dooh__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(18px, 3vh, 56px);
}

.dooh__head h2 {
  font-size: clamp(30px, 4.5vw, 56px);
  white-space: nowrap;
}

.dooh__head p {
  color: var(--text-2);
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 17px);
}

/* Closing tagline below the 4 cards */
.dooh__closing {
  margin: 0px auto 0;
  max-width: 880px;
  padding: 22px 32px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(41, 151, 255, .14), rgba(41, 151, 255, .04));
  border: 1px solid rgba(41, 151, 255, .35);
  text-align: center;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--text);
  line-height: 1.55;
}

.dooh__closing strong {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.dooh__closing.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--spring), transform .9s var(--spring);
}

.dooh__closing.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.dooh__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width:980px) {
  .dooh__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:560px) {
  .dooh__grid {
    grid-template-columns: 1fr;
  }
}

/* New 2-column layout: feature list on the left + mockup on the right */
.dooh__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width:980px) {
  .dooh__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.dooh__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dooh-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  transition: transform var(--t), border-color var(--t);
}

.dooh-row:hover {
  transform: translateX(4px);
  border-color: rgba(41, 151, 255, .4);
}

.dooh-row__icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(41, 151, 255, .18), rgba(41, 151, 255, .05));
  border: 1px solid rgba(41, 151, 255, .35);
}

.dooh-row__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  /* Force the PNG to render in pure white (brightness 0 → black, invert →
     white), then layer the original brand glow on top. */
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(41, 151, 255, .4));
}

.dooh-row h3 {
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--text);
}

.dooh-row p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
}

/* Phone + billboard mockup on the right */
.dooh__mockup {
  position: relative;
  width: 100%;
  min-height: clamp(320px, 48vh, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dooh__mockup-board {
  position: relative;
  max-width: 78%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
  z-index: 1;
}

.dooh__mockup-phone {
  position: absolute;
  left: 0;
  bottom: 6%;
  max-width: 42%;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .65));
  animation: doohPhoneFloat 5.5s ease-in-out infinite;
}

@keyframes doohPhoneFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-10px) rotate(-1deg);
  }
}

@media (max-width:980px) {
  .dooh__mockup {
    min-height: 380px;
  }
}

.dooh-card {
  position: relative;
  padding: 32px 26px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  transition: transform var(--t), border-color var(--t);
}

.dooh-card:hover {
  transform: translateY(-4px);
  border-color: rgba(41, 151, 255, .4);
}

.dooh-card__num {
  font-family: 'Montserrat', sans-serif;
  font-size: 42px;
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 14px;
  opacity: .85;
}

.dooh-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.dooh-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 13.5px;
}

/* ============================================================
   PEOOPLE (slides 33-34)
   ============================================================ */
.peoople {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.peoople__head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.peoople__head .brand-logo {
  margin-bottom: 0;
}

.peoople__head .kicker {
  margin-bottom: 0;
}

.peoople__head h2 {
  font-size: clamp(30px, 4.5vw, 56px);
  margin-top: 6px;
}

.peoople__layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width:880px) {
  .peoople__layout {
    grid-template-columns: 1fr;
  }
}

.peoople__lead {
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--text-2);
  margin: 0 0 22px;
  line-height: 1.6;
}

.peoople__lead strong {
  color: var(--text);
  font-weight: 600;
}

.peoople__lead em {
  color: var(--brand-2);
  font-style: normal;
  font-weight: 500;
}

/* Forecast banner — "Se espera generar 20M de usuarios en 2025" */
.peoople__forecast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(41, 151, 255, .20), rgba(120, 180, 255, .08));
  border: 1px solid rgba(41, 151, 255, .45);
  color: var(--text);
  font-size: 15px;
  position: relative;
  overflow: hidden;
}

.peoople__forecast strong {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

.peoople__forecast-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(41, 151, 255, .25);
  border: 1px solid rgba(41, 151, 255, .5);
  color: var(--brand-2);
}

.peoople__forecast-icon svg {
  width: 20px;
  height: 20px;
}

.peoople__forecast::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
  background-size: 300% 100%;
  background-position: 200% 0;
  pointer-events: none;
  animation: peoopleForecastSheen 5s ease-in-out 1.4s infinite;
}

@keyframes peoopleForecastSheen {

  0%,
  70%,
  100% {
    background-position: 200% 0;
  }

  85% {
    background-position: -100% 0;
  }
}

.peoople__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 22px;
}

@media (max-width:560px) {
  .peoople__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.peoople__stats>div {
  padding: 14px 10px !important;
  text-align: center;
}

.peoople__stats strong {
  font-size: 24px !important;
}

.peoople__stats>div {
  padding: 18px 16px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(41, 151, 255, .08), rgba(255, 255, 255, .02));
  border: 1px solid rgba(41, 151, 255, .2);
}

.peoople__stats strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 6px;
}

.peoople__stats small {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.peoople__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.peoople__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  transition: transform var(--t-fast), border-color var(--t-fast);
}

.peoople__bullets li:hover {
  transform: translateX(4px);
  border-color: rgba(41, 151, 255, .4);
}

.peoople__bullet-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(41, 151, 255, .15);
  border: 1px solid rgba(41, 151, 255, .35);
  color: var(--brand-2);
}

.peoople__bullet-icon svg {
  width: 18px;
  height: 18px;
}

.peoople__bullets li>div {
  min-width: 0;
}

.peoople__bullets li strong {
  display: block;
  color: var(--text);
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 2px;
}

.peoople__bullets li p {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

.peoople__bullets li em {
  font-style: normal;
  color: var(--brand-2);
  font-weight: 500;
}

.peoople__device {
  display: flex;
  justify-content: center;
}

.peoople__device-wrap {
  position: relative;
  width: 340px;
  display: flex;
  justify-content: center;
  perspective: 1400px;
}

.peoople__device-wrap .phone {
  width: 300px !important;
}

/* Animated halo behind the phone — bigger, more dramatic breathing */
.peoople__halo {
  position: absolute;
  inset: -110px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(41, 151, 255, .65), transparent 65%),
    radial-gradient(closest-side at 30% 30%, rgba(255, 84, 116, .35), transparent 60%),
    radial-gradient(closest-side at 70% 70%, rgba(120, 180, 255, .45), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: peoopleHaloBreath 4s ease-in-out infinite;
}

@keyframes peoopleHaloBreath {

  0%,
  100% {
    transform: scale(.85) rotate(0);
    opacity: .55;
  }

  33% {
    transform: scale(1.18) rotate(12deg);
    opacity: 1;
  }

  66% {
    transform: scale(1.05) rotate(-8deg);
    opacity: .85;
  }
}

/* Additional pulsing ring behind the halo */
.peoople__halo::before,
.peoople__halo::after {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  border: 2px solid rgba(41, 151, 255, .55);
  animation: peoopleHaloRing 3.5s ease-out infinite;
}

.peoople__halo::after {
  animation-delay: 1.75s;
}

@keyframes peoopleHaloRing {
  0% {
    transform: scale(.7);
    opacity: .7;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Layer for the floating heart particles */
.peoople__hearts {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.peoople__heart {
  position: absolute;
  bottom: 6%;
  left: 50%;
  font-size: 28px;
  color: #ff5474;
  text-shadow:
    0 6px 18px rgba(255, 84, 116, .65),
    0 0 36px rgba(255, 84, 116, .5),
    0 0 60px rgba(41, 151, 255, .4);
  opacity: 0;
  transform: translate(-50%, 0) scale(.6);
  animation: peoopleHeartRise 3.6s ease-out forwards;
  user-select: none;
}

@keyframes peoopleHeartRise {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0)), 0) scale(.4) rotate(var(--rot, 0deg));
  }

  10% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dx, 0)), -30px) scale(1.3) rotate(var(--rot, 0deg));
  }

  30% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dx, 0)), -90px) scale(1.1) rotate(calc(var(--rot, 0deg) + 8deg));
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0)), -340px) scale(.7) rotate(calc(var(--rot, 0deg) + 30deg));
  }
}

/* Phone wears a 3D tilt with idle parallax sway */
.peoople__device-wrap .phone {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  animation: peoopleDeviceSway 10s ease-in-out infinite;
}

@keyframes peoopleDeviceSway {

  0%,
  100% {
    transform: rotateY(-9deg) rotateX(4deg);
  }

  50% {
    transform: rotateY(9deg) rotateX(-4deg);
  }
}

/* Subtle scan-line glow drifting down the phone screen */
.peoople__device-wrap .phone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20%;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(150, 200, 255, .18) 50%, transparent 100%);
  pointer-events: none;
  z-index: 3;
  animation: peoopleScanLine 6s ease-in-out 2s infinite;
  border-radius: inherit;
}

@keyframes peoopleScanLine {

  0%,
  60%,
  100% {
    top: -30%;
    opacity: 0;
  }

  70% {
    top: 50%;
    opacity: .85;
  }

  85% {
    top: 120%;
    opacity: 0;
  }
}

.phone {
  position: relative;
  width: 240px;
  aspect-ratio: 9/19;
  border-radius: 18px;
  background: #0a0d14;
  border: 2px solid #1f2330;
  box-shadow:
    inset 0 0 0 6px #050608,
    0 30px 80px -20px rgba(41, 151, 255, .5),
    0 0 0 1px rgba(41, 151, 255, .2);
  overflow: hidden;
}

.phone__notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 18px;
  background: #000;
  border-radius: 12px;
  z-index: 2;
}

.phone video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   PERFORMANCE (slides 35-36)
   ============================================================ */
.perf {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.perf__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(18px, 3vh, 56px);
}

.perf__head h2 {
  font-size: clamp(30px, 4.5vw, 56px);
}

.perf__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

@media (max-width:1080px) {
  .perf__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:680px) {
  .perf__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:420px) {
  .perf__grid {
    grid-template-columns: 1fr;
  }
}

.perf-card {
  position: relative;
  padding: 36px 22px 28px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  transition: transform .4s var(--spring), border-color .3s ease;
  text-align: center;
  isolation: isolate;
}

.perf-card:hover {
  transform: translateY(-6px);
  border-color: rgba(41, 151, 255, .5);
}

.perf-card__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(41, 151, 255, .18), rgba(41, 151, 255, .04));
  border: 1px solid rgba(41, 151, 255, .4);
  color: var(--brand);
  position: relative;
  overflow: hidden;
}

.perf-card__icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(41, 151, 255, .5));
}

.perf-card__icon svg {
  width: 28px;
  height: 28px;
}

.perf-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.perf-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ============================================================
   PRIME (slide 37) — luxury split layout, animated gradient bars
   ============================================================ */
.prime {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Subtle diagonal divider line that swims across the slide */
.prime__divider {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(41, 151, 255, .5) 30%, rgba(41, 151, 255, .5) 70%, transparent);
  transform: rotate(8deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}

.prime__divider::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 120px;
  background: linear-gradient(180deg, transparent, rgba(41, 151, 255, .18) 50%, transparent);
  transform: translateX(-60px);
  filter: blur(28px);
}

/* Rotating circular seal in the top-right corner */
.prime__seal {
  position: absolute;
  top: 64px;
  right: 64px;
  width: 130px;
  height: 130px;
  z-index: 2;
  pointer-events: none;
}

.prime__seal-svg {
  width: 100%;
  height: 100%;
  animation: primeSealSpin 22s linear infinite;
}

.prime__seal-svg text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .32em;
  fill: var(--text);
  opacity: .85;
}

.prime__seal-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(41, 151, 255, .55));
}

@keyframes primeSealSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width:980px) {
  .prime__seal {
    top: 32px;
    right: 32px;
    width: 96px;
    height: 96px;
  }

  .prime__seal-svg text {
    font-size: 18px;
  }

  .prime__seal-mark {
    font-size: 26px;
  }
}

.prime__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

@media (max-width:980px) {
  .prime__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* LEFT: brand wordmark */
.prime__brand {
  position: relative;
}

.prime__sup {
  display: block;
  height: clamp(48px, 5vw, 80px);
  width: auto;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 12px rgba(41, 151, 255, .4));
}

.prime__title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(72px, 12vw, 168px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.03em;
  margin: 0;
  background: linear-gradient(135deg, #ffffff 30%, rgba(255, 255, 255, .6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.prime__dot {
  -webkit-text-fill-color: var(--brand);
  color: var(--brand);
}

.prime__lead {
  margin: 24px 0 0;
  max-width: 440px;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--text-2);
  line-height: 1.6;
}

.prime__lead em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

/* RIGHT: list of modules with animated gradient progress bars */
.prime__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.prime__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Base offset from the diagonal divider + leftward cascade as you go down,
     so items follow the 8° slope without ever touching the line */
  padding-left: 48px;
  margin-left: calc(var(--i) * -10px);
}

@media (max-width:980px) {
  .prime__item {
    padding-left: 0;
    margin-left: 0;
  }
}

.prime__item-name {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.prime__item-name strong {
  font-weight: 700;
  color: var(--brand-2);
  text-transform: none;
  letter-spacing: 0;
}

.prime__bar {
  position: relative;
  display: block;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.prime__bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(41, 151, 255, .0) 0%, rgba(41, 151, 255, 1) 30%, #b3d6ff 70%, rgba(41, 151, 255, .0) 100%);
  transform: translateX(-100%);
  transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}

/* Reveal entrances */
.prime__inner.reveal .prime__brand {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 1s var(--spring), transform 1s var(--spring);
}

.prime__inner.reveal.is-visible .prime__brand {
  opacity: 1;
  transform: none;
}

.prime__inner.reveal .prime__item {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .7s var(--spring), transform .7s var(--spring);
}

.prime__inner.reveal.is-visible .prime__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(.25s + var(--i) * .12s);
}

.prime__inner.reveal.is-visible .prime__bar-fill {
  transform: translateX(0);
  transition-delay: calc(.55s + var(--i) * .12s);
  /* gentle continuous shimmer once filled */
  animation: primeBarShimmer 4s ease-in-out calc(2.4s + var(--i) * .18s) infinite;
}

@keyframes primeBarShimmer {

  0%,
  70%,
  100% {
    filter: brightness(1);
  }

  85% {
    filter: brightness(1.45) saturate(1.2);
  }
}

/* Title shimmer once visible */
.prime__inner.reveal.is-visible .prime__title {
  animation: primeTitleSheen 7s ease-in-out 1s infinite;
  background: linear-gradient(110deg, #ffffff 25%, rgba(41, 151, 255, .95) 50%, #ffffff 75%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes primeTitleSheen {

  0%,
  70%,
  100% {
    background-position: 200% 0;
  }

  85% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .prime__seal-svg,
  .prime__inner.reveal .prime__brand,
  .prime__inner.reveal .prime__item,
  .prime__inner.reveal.is-visible .prime__bar-fill,
  .prime__inner.reveal.is-visible .prime__title {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .prime__inner.reveal.is-visible .prime__bar-fill {
    transform: translateX(0) !important;
  }
}

/* ============================================================
   FORMAT CASES (slides 38-39)
   ============================================================ */
.fmcases {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.fmcases__head {
  text-align: center;
  margin: 0 auto clamp(18px, 3vh, 56px);
}

.fmcases__head h2 {
  font-size: clamp(30px, 4.5vw, 56px);
  white-space: nowrap;
  text-align: center;
}

.fmcases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.fmcase {
  padding: 28px 24px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  transition: transform var(--t), border-color var(--t);
  display: flex;
  flex-direction: column;
}

.fmcase:hover {
  transform: translateY(-4px);
  border-color: rgba(41, 151, 255, .4);
}

/* Brand logo at the top of each card (Samsung / Prime Video / McDonald's)
   Uniform height across all cards so layouts align horizontally. */
.fmcase__brand {
  height: 90px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.fmcase__brand img {
  max-height: 100%;
  max-width: 50%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .95;
}

.fmcase__type {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 6px;
}

.fmcase h3 {
  font-size: 22px;
  margin-bottom: 20px;
}

.fmcase__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fmcase__metrics>div {
  text-align: center;
  padding: 18px 12px;
  border-radius: 12px;
  background: rgba(41, 151, 255, .06);
  border: 1px solid rgba(41, 151, 255, .2);
}

.fmcase__metrics strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 6px;
}

.fmcase__metrics small {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Device area below the metrics (phone or laptop mockup) */
.fmcase__device {
  position: relative;
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* vertically center the device — phones fill, laptop centers */
  flex: 1;
  perspective: 1200px;
  min-height: 340px;
}

.fmcase__halo {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(41, 151, 255, .45), transparent 65%),
    radial-gradient(closest-side at 30% 30%, rgba(120, 180, 255, .35), transparent 60%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: peoopleHaloBreath 5s ease-in-out infinite;
}

.fmcase__device>.phone,
.fmcase__device>.fmcase__laptop {
  position: relative;
  z-index: 1;
}

/* Phone mockup (cards 1 and 3) — uses the global .phone frame + a swap of .phone img instead of video */
.fmcase__phone {
  width: 200px !important;
}

.fmcase__phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Layered TV-style border (consistent with other phones) */
.fmcase__phone {
  box-shadow:
    inset 0 0 0 6px #050608,
    0 0 0 6px #11141b,
    0 0 0 7px #1f2330,
    0 0 0 8px rgba(41, 151, 255, .25),
    0 50px 100px -30px rgba(41, 151, 255, .5);
}

.fmcase__phone .phone__notch {
  top: 10px;
  width: 70px;
  height: 14px;
}

/* Continuous 3D sway like Peoople */
.fmcase--phone .fmcase__device .phone {
  transform-style: preserve-3d;
  animation: fmcasePhoneSway 9s ease-in-out infinite;
}

@keyframes fmcasePhoneSway {

  0%,
  100% {
    transform: rotateY(-7deg) rotateX(3deg) translateY(0);
  }

  50% {
    transform: rotateY(7deg) rotateX(-3deg) translateY(-6px);
  }
}

/* Laptop mockup (card 2) */
.fmcase__laptop {
  position: relative;
  width: 100%;
  max-width: 300px;
  transform-style: preserve-3d;
  animation: fmcaseLaptopSway 9s ease-in-out infinite;
}

@keyframes fmcaseLaptopSway {

  0%,
  100% {
    transform: rotateX(6deg) translateY(0);
  }

  50% {
    transform: rotateX(-2deg) translateY(-6px);
  }
}

.fmcase__laptop-screen {
  position: relative;
  aspect-ratio: 16/10;
  background: #000;
  border: 10px solid #1a1d24;
  border-bottom-width: 0;
  border-radius: 12px 12px 4px 4px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(41, 151, 255, .5);
}

.fmcase__laptop-screen::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background: #1a1d24;
  border-radius: 0 0 5px 5px;
  z-index: 2;
}

.fmcase__laptop-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fmcase__laptop-base {
  height: 8px;
  background: linear-gradient(180deg, #2a2d34, #1a1d24 40%, #0e1014);
  border-radius: 0 0 12px 12px;
  margin: 0 -22px;
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .6);
}

.fmcase__laptop-base::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #0a0c10;
  border-radius: 0 0 3px 3px;
  margin: 0 auto;
}

/* ============================================================
   AWARDS (slide 40) — Chanel watermark + bold typography
   ============================================================ */
.awards {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 0 32px clamp(72px, 8vh, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ===== Chanel logo cinematic mask ===== */
.awards__chanel {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Initial state: logo fills the screen (set in .reveal rule below) */
  transform: translate(-50%, -50%) scale(1);
  width: min(85vh, 80%);
  aspect-ratio: 1/1;
  pointer-events: none;
  z-index: 0;
}

/* Cinematic intro: logo enters scaled up to fill the viewport, then scales
   down to its final size as the slide settles. Apple-style reveal.
   Reverse transition is fast (no delay) so re-entering plays the zoom again. */
.awards__chanel.reveal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(2.6);
  transition: transform .35s ease, opacity .25s ease;
}

.awards__chanel.reveal.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 1.8s cubic-bezier(.16, 1, .3, 1), opacity 1s ease;
}

/* Soft brand-blue halo behind the logo shape — very subtle */
.awards__chanel-glow {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(41, 151, 255, .12), transparent 70%);
  filter: blur(40px);
  animation: awardsGlowBreath 6s ease-in-out infinite;
}

@keyframes awardsGlowBreath {

  0%,
  100% {
    transform: scale(.92);
    opacity: .25;
  }

  50% {
    transform: scale(1.1);
    opacity: .4;
  }
}

/* The logo silhouette filled with a slowly drifting brand-aurora gradient
   — kept low-opacity so the awards text on top stays crisp */
.awards__chanel-aurora {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(41, 151, 255, .85),
      rgba(180, 220, 255, .95) 35%,
      rgba(150, 90, 255, .75) 65%,
      rgba(41, 151, 255, .85));
  background-size: 220% 220%;
  -webkit-mask-image: url('../assets/img/awards/chanel.png');
  mask-image: url('../assets/img/awards/chanel.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: awardsAuroraShift 14s ease-in-out infinite;
  opacity: .13;
}

@keyframes awardsAuroraShift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* Diagonal sheen sweep that passes through the logo silhouette */
.awards__chanel-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
      transparent 25%,
      rgba(255, 255, 255, .55) 50%,
      transparent 75%);
  background-size: 300% 100%;
  background-position: 200% 0;
  -webkit-mask-image: url('../assets/img/awards/chanel.png');
  mask-image: url('../assets/img/awards/chanel.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: awardsShineSweep 6s ease-in-out 1.5s infinite;
  mix-blend-mode: screen;
  opacity: .22;
}

@keyframes awardsShineSweep {

  0%,
  65%,
  100% {
    background-position: 200% 0;
  }

  82% {
    background-position: -100% 0;
  }
}

/* The Chanel logo itself overlaid in white at very low opacity — subtle outline */
.awards__chanel-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(2) drop-shadow(0 0 22px rgba(41, 151, 255, .5));
  opacity: .05;
  mix-blend-mode: screen;
}

.awards__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

/* Arkeero wordmark above the awards — centered and prominent */
.awards__brand {
  display: block;
  height: clamp(64px, 7vw, 110px);
  width: auto;
  margin: 0 auto 48px;
  filter: drop-shadow(0 0 18px rgba(41, 151, 255, .55));
}

/* The two big award lines */
.awards__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.award-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 5.6vw, 72px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
}

.award-line__name {
  background: linear-gradient(135deg, #ffffff 30%, rgba(255, 255, 255, .7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.award-line__year {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Thin divider between awards block and the client name */
.awards__divider {
  width: 90px;
  height: 1px;
  background: rgba(255, 255, 255, .4);
  margin: 48px auto;
}

/* Client name footer */
.awards__client {
  text-align: center;
}

.awards__client-name {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--text);
}

.awards__client-tag {
  display: block;
  margin-top: 6px;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--brand-2);
}

/* Reveal entrances — staged AFTER the Chanel logo finishes its zoom-out.
   Delays only apply on the FORWARD transition so reverse (when slide leaves
   the viewport) snaps back instantly, ready for a clean replay. */
#awards .awards__inner.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .25s ease, transform .25s ease;
}

#awards .awards__inner.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--spring) 1.3s, transform 1s var(--spring) 1.3s;
}

#awards .award-line.reveal {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(10px);
  transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}

#awards .award-line.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity .9s var(--spring) 1.5s, transform .9s var(--spring) 1.5s, filter .7s ease 1.5s;
}

#awards .award-line.reveal.is-visible:nth-child(2) {
  transition: opacity .9s var(--spring) 1.7s, transform .9s var(--spring) 1.7s, filter .7s ease 1.7s;
}

#awards .award-line.reveal.is-visible .award-line__year {
  animation: awardYearShine 4.5s ease-in-out 1.4s infinite;
}

#awards .award-line.reveal.is-visible:nth-child(2) .award-line__year {
  animation-delay: 1.9s;
}

@keyframes awardYearShine {

  0%,
  70%,
  100% {
    filter: brightness(1);
  }

  85% {
    filter: brightness(1.5) drop-shadow(0 0 16px rgba(41, 151, 255, .7));
  }
}

#awards .awards__divider {
  transform-origin: center;
  transform: scaleX(0);
  transition: transform .25s ease;
}

#awards .awards__inner.is-visible .awards__divider {
  transform: scaleX(1);
  transition: transform .8s var(--spring) 2.0s;
}

#awards .awards__client.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
}

#awards .awards__client.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--spring) 2.2s, transform .9s var(--spring) 2.2s;
}

#awards .awards__brand {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease;
}

#awards .awards__inner.is-visible .awards__brand {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--spring) 1.4s, transform .9s var(--spring) 1.4s;
}

/* ============================================================
   CONTACT / CTA (slide 41)
   ============================================================ */
.contact {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(72px, 8vh, 96px);
  text-align: center;
  overflow: hidden;
}

.contact__inner {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
}

.contact__brace {
  position: absolute;
  top: -40px;
  left: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 160px;
  font-weight: 700;
  color: var(--brand);
  opacity: .18;
  line-height: 1;
  pointer-events: none;
  animation: braceWobble 5s ease-in-out infinite;
}

.contact__brace--end {
  left: auto;
  right: 0;
  top: auto;
  bottom: -40px;
  animation-delay: -2.5s;
}

/* Solid Arkeero logo above the title — same wordmark as slide 1, half the size */
.contact__logo {
  display: block;
  width: 100%;
  max-width: 390px;
  aspect-ratio: 2439 / 790;
  height: auto;
  margin: 0 auto clamp(18px, 3vh, 56px);
  object-fit: contain;
  filter: drop-shadow(0 14px 36px rgba(41, 151, 255, .4));
}

.contact__title {
  font-size: clamp(34px, 5vw, 64px);
  margin-bottom: 32px;
}

.contact__lead {
  color: var(--text-2);
  font-size: clamp(15px, 1.3vw, 18px);
  margin: 0 auto clamp(18px, 3vh, 56px);
  max-width: 580px;
  line-height: 1.6;
}

.contact__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   PUBLISHER TICKER (slide 10) — taller + center spotlight
   ============================================================ */
.ticker {
  position: relative;
  margin: 8px 0;
  padding: 8px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  overflow: hidden;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: tickerScroll 60s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 22px;
  flex-shrink: 0;
}

/* Each logo in a white rounded box, all the same dimensions */
.ticker__row img {
  width: 170px;
  height: 80px;
  padding: 14px 20px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 14px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.ticker__row img:hover {
  transform: scale(1.04);
  box-shadow: 0 12px 28px -8px rgba(41, 151, 255, .55);
}

/* Spotlight overlay: black with mix-blend-mode:saturation strips colour at
   the edges, letting the center 2-3 logos stay in full colour. */
.ticker::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(90deg,
      transparent 0%, transparent 22%,
      transparent 38%, transparent 62%,
      transparent 78%, transparent 100%);
  mix-blend-mode: saturation;
}

/* Soft horizontal fade so the edges literally fade to background too */
.ticker__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 160px;
  pointer-events: none;
  z-index: 2;
}

.ticker__fade--l {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}

.ticker__fade--r {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}

@keyframes tickerScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}

/* ============================================================
   NETWORK — Certifications row (small static row, between heading and cards)
   ============================================================ */
.net-certs {
  margin: 32px auto 0;
  text-align: center;
  max-width: 720px;
}

.net-certs__label {
  display: block;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
  font-weight: 600;
}

.net-certs__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

@media (max-width:760px) {
  .net-certs__row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:440px) {
  .net-certs__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.net-certs__box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(41, 151, 255, .08);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.net-certs__box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(41, 151, 255, .5), inset 0 0 0 1px rgba(41, 151, 255, .30);
}

.net-certs__box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ============================================================
   NETWORK — Bottom layout (certs + optional country-specific sources)
   ============================================================ */
.net-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-top:16px;
}
/* When stacked, both rows handle their own top spacing via .net-bottom's gap. */
.net-bottom .net-certs{ margin-top:0; }

/* Default: only certs visible (left/center). When the country is UK or FR,
   the sources block reveals on the right of the certs. */
.net-sources{ display:none; }
body.country-uk .net-sources,
body.country-fr .net-sources,
body.country-es .net-sources,
body.country-it .net-sources,
body.country-nl .net-sources,
body.country-be-en .net-sources,
body.country-be-fr .net-sources,
body.country-se .net-sources,
body.country-fi .net-sources,
body.country-no .net-sources,
body.country-dk .net-sources{ display:block; }

.net-sources{
  text-align:center;
  margin-top:0;
}
.net-sources__label{
  display:block;
  font-size:10px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:8px;
  font-weight:600;
}
.net-sources__row{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:flex-start;
  gap:18px;
}
.net-sources__group{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
/* One box per group: cert-style rectangular pill that holds 1-N logos
   side-by-side. Width auto-grows with content; height fixed at 48px. */
.net-sources__box{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:80px;
  height:48px;
  padding:8px 14px;
  border-radius:10px;
  background:#fff;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.5), inset 0 0 0 1px rgba(41,151,255,.08);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.net-sources__box:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px -6px rgba(41,151,255,.5), inset 0 0 0 1px rgba(41,151,255,.30);
}
.net-sources__box img{
  /* Fixed-width slot for every logo so the row reads visually consistent.
     object-fit:contain keeps each brand's aspect ratio centered within
     the slot, regardless of whether the PNG is square or a wide wordmark. */
  width:80px;
  height:30px;
  object-fit:contain;
}
.net-sources__cat{
  font-size:11px;
  line-height:1.3;
  color:var(--text-dim);
  text-align:center;
}

/* ============================================================
   PEOOPLE BRAND BADGE
   ============================================================ */
.peoople__brand {
  height: 40px;
  width: auto;
  display: block;
  margin: 0 auto 18px;
  /* Peoople logo is a blue gradient on white — needs a white container or invert.
     We render it on a soft pill so it reads on dark bg without distortion. */
  padding: 8px 18px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(41, 151, 255, .28);
}

/* ============================================================
   Placeholder sections (kept for legacy nav targets)
   ============================================================ */
.placeholder {
  position: relative;
  z-index: 1;
  padding: 140px 32px;
  text-align: center;
  border-top: 1px solid var(--line);
}

.placeholder__inner {
  max-width: 720px;
  margin: 0 auto;
}

.placeholder p {
  color: var(--text-dim);
}

/* ============================================================
   Footer
   ============================================================ */
.foot {
  position: relative;
  z-index: 1;
  padding: 48px 32px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--text-dim);
  font-size: 13px;
}

.foot__brand {
  display: inline-flex;
  align-items: center;
}

.foot__brand img {
  height: 22px;
  width: auto;
  display: block;
}

/* ============================================================
   Reveal animations
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   ENRICHED ANIMATIONS — slides from Konnect-Compare to Contact
   Each slide has a distinct entrance + idle behavior (Apple-style)
   ============================================================ */

/* shared spring */
:root {
  --spring: cubic-bezier(.16, 1, .3, 1);
}

/* ----- KONNECT COMPARE: Antes glides from left muted; Ahora glides from right alive ----- */
#konnect-compare .konnect-col.reveal {
  opacity: 0;
  transform: translateX(-40px) scale(.96);
  transition: opacity 1s var(--spring), transform 1s var(--spring), filter 1s var(--spring);
  will-change: transform, opacity;
  filter: saturate(.4) brightness(.85);
}

#konnect-compare .konnect-col--after.reveal {
  transform: translateX(40px) scale(.96);
  filter: saturate(.6) brightness(.95);
}

#konnect-compare .konnect-col.reveal.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: saturate(1) brightness(1);
}

#konnect-compare .konnect-col--after.reveal.is-visible {
  animation: konnectAlive 6s var(--spring) infinite;
}

@keyframes konnectAlive {

  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(41, 151, 255, .3), 0 30px 80px -30px rgba(41, 151, 255, .45);
  }

  50% {
    box-shadow: 0 0 0 1px rgba(41, 151, 255, .5), 0 30px 100px -20px rgba(41, 151, 255, .7);
  }
}

/* the arrow draws itself + pulses */
#konnect-compare .konnect__arrow.reveal {
  opacity: 0;
  transform: scale(.4);
  transition: opacity .8s var(--spring), transform .8s var(--spring);
}

#konnect-compare .konnect__arrow.reveal.is-visible {
  opacity: 1;
  transform: scale(1);
  animation: konnectArrowPulse 2.4s ease-in-out infinite;
}

@keyframes konnectArrowPulse {

  0%,
  100% {
    transform: scale(1) translateX(0);
    filter: drop-shadow(0 0 6px rgba(41, 151, 255, .5));
  }

  50% {
    transform: scale(1.08) translateX(4px);
    filter: drop-shadow(0 0 16px rgba(41, 151, 255, 1));
  }
}

/* list items in Ahora column light up sequentially */
#konnect-compare .konnect-col--after.is-visible li {
  animation: konnectItemPop .7s var(--spring) both;
}

#konnect-compare .konnect-col--after.is-visible li:nth-child(1) {
  animation-delay: .2s;
}

#konnect-compare .konnect-col--after.is-visible li:nth-child(2) {
  animation-delay: .32s;
}

#konnect-compare .konnect-col--after.is-visible li:nth-child(3) {
  animation-delay: .44s;
}

#konnect-compare .konnect-col--after.is-visible li:nth-child(4) {
  animation-delay: .56s;
}

@keyframes konnectItemPop {
  from {
    opacity: 0;
    transform: translateX(14px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ----- CASES (Resultados): cards rise from below with rotateX, sheen on idle ----- */
#results .case-card.reveal {
  opacity: 0;
  transform: translateY(40px) rotateX(-12deg) scale(.96);
  transform-origin: bottom center;
  transition: opacity .9s var(--spring), transform .9s var(--spring), border-color .4s ease;
  perspective: 1000px;
  will-change: transform, opacity;
}

#results .case-card.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) rotateX(0) scale(1);
}

#results .case-card {
  position: relative;
  isolation: isolate;
}

#results .case-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(41, 151, 255, .18) 50%, transparent 70%);
  background-size: 280% 100%;
  background-position: 200% 0;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

#results .case-card.reveal.is-visible::after {
  animation: caseSheen 7s ease-in-out infinite;
  opacity: 1;
}

#results .case-card.reveal.is-visible:nth-child(2)::after {
  animation-delay: 1.3s;
}

#results .case-card.reveal.is-visible:nth-child(3)::after {
  animation-delay: 2.6s;
}

#results .case-card.reveal.is-visible:nth-child(4)::after {
  animation-delay: 3.9s;
}

#results .case-card.reveal.is-visible:nth-child(5)::after {
  animation-delay: 5.2s;
}

#results .case-card.reveal.is-visible:nth-child(6)::after {
  animation-delay: 6.5s;
}

@keyframes caseSheen {

  0%,
  60%,
  100% {
    background-position: 200% 0;
  }

  80% {
    background-position: -100% 0;
  }
}

#results .case-card .case-card__metrics>div {
  transition: transform .35s var(--spring);
}

#results .case-card.is-visible:hover .case-card__metrics>div {
  transform: translateY(-3px) scale(1.05);
}

/* ----- DOOH: feature rows slide in from left, mockup glides in from right ----- */
#dooh .dooh-row.reveal {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .9s var(--spring), transform .9s var(--spring), border-color .3s ease;
}

#dooh .dooh-row.reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
}

#dooh .dooh-row.reveal.is-visible .dooh-row__icon {
  animation: doohRowIcon 4s ease-in-out infinite;
}

#dooh .dooh-row.reveal.is-visible:nth-child(2) .dooh-row__icon {
  animation-delay: .5s;
}

#dooh .dooh-row.reveal.is-visible:nth-child(3) .dooh-row__icon {
  animation-delay: 1s;
}

#dooh .dooh-row.reveal.is-visible:nth-child(4) .dooh-row__icon {
  animation-delay: 1.5s;
}

@keyframes doohRowIcon {

  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-2px) rotate(-3deg);
  }
}

#dooh .dooh__mockup.reveal {
  opacity: 0;
  transform: translateX(40px) scale(.95);
  transition: opacity 1.1s var(--spring), transform 1.1s var(--spring);
}

#dooh .dooh__mockup.reveal.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

#dooh .dooh-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#dooh .dooh-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(41, 151, 255, .22) 50%, transparent 100%);
  height: 80px;
  width: 100%;
  top: -80px;
  pointer-events: none;
  z-index: 0;
}

#dooh .dooh-card.reveal.is-visible::before {
  animation: doohScan 5.5s ease-in-out infinite;
}

#dooh .dooh-card.reveal.is-visible:nth-child(2)::before {
  animation-delay: .9s;
}

#dooh .dooh-card.reveal.is-visible:nth-child(3)::before {
  animation-delay: 1.8s;
}

#dooh .dooh-card.reveal.is-visible:nth-child(4)::before {
  animation-delay: 2.7s;
}

@keyframes doohScan {

  0%,
  60%,
  100% {
    top: -80px;
  }

  80% {
    top: calc(100% + 20px);
  }
}

#dooh .dooh-card__num {
  display: inline-block;
  transition: transform .6s var(--spring);
}

#dooh .dooh-card.reveal.is-visible .dooh-card__num {
  animation: doohNumPop 1.1s var(--spring) both;
}

@keyframes doohNumPop {
  0% {
    transform: scale(.4);
    opacity: 0;
  }

  60% {
    transform: scale(1.15);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

/* ----- PEOOPLE: phone tilts in 3D, bullets cascade, brand-colored heart pulses ----- */
#peoople {
  position: relative;
  overflow: hidden;
}

#peoople::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 40, 90, .22), transparent 70%);
  pointer-events: none;
  filter: blur(20px);
  animation: peoopleHeartPulse 5s ease-in-out infinite;
  z-index: 0;
}

@keyframes peoopleHeartPulse {

  0%,
  100% {
    opacity: .55;
    transform: translate(-50%, -50%) scale(.9);
  }

  50% {
    opacity: .95;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

#peoople>* {
  position: relative;
  z-index: 1;
}

#peoople .peoople__copy.reveal {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .9s var(--spring), transform .9s var(--spring);
}

#peoople .peoople__copy.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Apple-style staggered entrance for inner peoople__copy children */
#peoople .peoople__copy>* {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity .9s var(--spring),
    transform .9s var(--spring),
    filter .6s ease;
}

#peoople .peoople__copy.is-visible>* {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

#peoople .peoople__copy.is-visible>.peoople__lead {
  transition-delay: .10s;
}

#peoople .peoople__copy.is-visible>.peoople__forecast {
  transition-delay: .25s;
}

#peoople .peoople__copy.is-visible>.peoople__bullets {
  transition-delay: .40s;
}

#peoople .peoople__copy.is-visible>.peoople__stats {
  transition-delay: 1.10s;
}

/* Bullets cascade individually */
#peoople .peoople__bullets li {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .6s var(--spring), transform .6s var(--spring), border-color .3s ease;
}

#peoople .peoople__copy.is-visible .peoople__bullets li:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: .55s;
}

#peoople .peoople__copy.is-visible .peoople__bullets li:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: .72s;
}

#peoople .peoople__copy.is-visible .peoople__bullets li:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: .89s;
}

/* Each bullet's icon does its own breathing motion once visible */
#peoople .peoople__copy.is-visible .peoople__bullets li:nth-child(1) .peoople__bullet-icon {
  animation: peoopleBulletIcon 4.4s ease-in-out 1.0s infinite;
}

#peoople .peoople__copy.is-visible .peoople__bullets li:nth-child(2) .peoople__bullet-icon {
  animation: peoopleBulletIcon 4.4s ease-in-out 1.4s infinite;
}

#peoople .peoople__copy.is-visible .peoople__bullets li:nth-child(3) .peoople__bullet-icon {
  animation: peoopleBulletIcon 4.4s ease-in-out 1.8s infinite;
}

@keyframes peoopleBulletIcon {

  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-3px) rotate(-4deg);
  }
}

/* Stats numbers also pulse on entry */
#peoople .peoople__copy.is-visible .peoople__stats>div {
  animation: peoopleStatPop .6s var(--spring) both;
}

#peoople .peoople__copy.is-visible .peoople__stats>div:nth-child(1) {
  animation-delay: 1.15s;
}

#peoople .peoople__copy.is-visible .peoople__stats>div:nth-child(2) {
  animation-delay: 1.25s;
}

#peoople .peoople__copy.is-visible .peoople__stats>div:nth-child(3) {
  animation-delay: 1.35s;
}

#peoople .peoople__copy.is-visible .peoople__stats>div:nth-child(4) {
  animation-delay: 1.45s;
}

@keyframes peoopleStatPop {
  from {
    opacity: 0;
    transform: scale(.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

#peoople .peoople__device.reveal {
  opacity: 0;
  transform: perspective(1200px) rotateY(-22deg) translateX(60px) scale(.92);
  transition: opacity 1.1s var(--spring), transform 1.1s var(--spring);
}

#peoople .peoople__device.reveal.is-visible {
  opacity: 1;
  transform: perspective(1200px) rotateY(0) translateX(0) scale(1);
  animation: peoopleFloat 6s ease-in-out 1.1s infinite;
}

@keyframes peoopleFloat {

  0%,
  100% {
    transform: perspective(1200px) rotateY(0) translateY(0);
  }

  50% {
    transform: perspective(1200px) rotateY(-3deg) translateY(-10px);
  }
}

#peoople .peoople__bullets li {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .55s var(--spring), transform .55s var(--spring);
}

#peoople .peoople__copy.reveal.is-visible .peoople__bullets li {
  opacity: 1;
  transform: none;
}

#peoople .peoople__copy.reveal.is-visible .peoople__bullets li:nth-child(1) {
  transition-delay: .55s;
}

#peoople .peoople__copy.reveal.is-visible .peoople__bullets li:nth-child(2) {
  transition-delay: .7s;
}

#peoople .peoople__copy.reveal.is-visible .peoople__bullets li:nth-child(3) {
  transition-delay: .85s;
}

#peoople .peoople__stats>div {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--spring), transform .55s var(--spring);
}

#peoople .peoople__copy.reveal.is-visible .peoople__stats>div {
  opacity: 1;
  transform: none;
}

#peoople .peoople__copy.reveal.is-visible .peoople__stats>div:nth-child(1) {
  transition-delay: .25s;
}

#peoople .peoople__copy.reveal.is-visible .peoople__stats>div:nth-child(2) {
  transition-delay: .35s;
}

#peoople .peoople__copy.reveal.is-visible .peoople__stats>div:nth-child(3) {
  transition-delay: .45s;
}

#peoople .peoople__copy.reveal.is-visible .peoople__stats>div:nth-child(4) {
  transition-delay: .55s;
}

/* ----- PERFORMANCE: holographic rim + iris-reveal icon + materialize entrance -----
   Fresh Apple-style effect: cards "materialize" from blur, then a slowly rotating
   conic-gradient rim sits behind their border like an irridescent halo, while
   each icon does a clip-path iris reveal that opens from the center. */
#performance .perf-card.reveal {
  opacity: 0;
  transform: translateY(28px) scale(1.04);
  filter: blur(14px);
  transition: opacity 1s var(--spring), transform 1s var(--spring), filter .8s ease;
}

#performance .perf-card.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Holographic gradient rim — contained to a thin ring on the card's
   border, with the angle of the conic gradient animated via @property
   so the sweep rotates *inside* the ring without rotating the element. */
@property --perf-rim-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

#performance .perf-card {
  position: relative;
}

#performance .perf-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--perf-rim-angle, 0deg),
      rgba(41, 151, 255, 0) 0deg,
      rgba(41, 151, 255, .9) 60deg,
      rgba(180, 220, 255, 1) 100deg,
      rgba(150, 90, 255, .85) 140deg,
      rgba(41, 151, 255, 0) 220deg,
      rgba(41, 151, 255, 0) 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}

#performance .perf-card.reveal.is-visible::before {
  opacity: .85;
  animation: perfRimSpin 8s linear infinite;
}

#performance .perf-card.reveal.is-visible:nth-child(2)::before {
  animation-delay: -1.6s;
}

#performance .perf-card.reveal.is-visible:nth-child(3)::before {
  animation-delay: -3.2s;
}

#performance .perf-card.reveal.is-visible:nth-child(4)::before {
  animation-delay: -4.8s;
}

#performance .perf-card.reveal.is-visible:nth-child(5)::before {
  animation-delay: -6.4s;
}

#performance .perf-card:hover::before {
  opacity: 1;
}

@keyframes perfRimSpin {
  from {
    --perf-rim-angle: 0deg;
  }

  to {
    --perf-rim-angle: 360deg;
  }
}

/* Iris reveal for the icon — clip-path circle expanding from center */
#performance .perf-card__icon {
  position: relative;
  z-index: 1;
  transform-origin: center;
}

#performance .perf-card__icon img,
#performance .perf-card__icon svg {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.1s var(--spring);
}

#performance .perf-card.reveal.is-visible .perf-card__icon img,
#performance .perf-card.reveal.is-visible .perf-card__icon svg {
  clip-path: circle(75% at 50% 50%);
}

/* Once visible the icon container does a continuous gentle breathe */
#performance .perf-card.reveal.is-visible .perf-card__icon {
  animation: perfIconBreathe 4.8s ease-in-out 1.1s infinite;
}

@keyframes perfIconBreathe {

  0%,
  100% {
    transform: scale(1) rotate(0);
  }

  50% {
    transform: scale(1.08) rotate(-3deg);
  }
}

#performance .perf-card.reveal.is-visible:nth-child(2) .perf-card__icon {
  animation-delay: 1.3s;
}

#performance .perf-card.reveal.is-visible:nth-child(3) .perf-card__icon {
  animation-delay: 1.5s;
}

#performance .perf-card.reveal.is-visible:nth-child(4) .perf-card__icon {
  animation-delay: 1.7s;
}

#performance .perf-card.reveal.is-visible:nth-child(5) .perf-card__icon {
  animation-delay: 1.9s;
}

/* Heading + paragraph staggered fade once card is visible */
#performance .perf-card h3,
#performance .perf-card p {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--spring), transform .6s var(--spring);
}

#performance .perf-card.reveal.is-visible h3 {
  opacity: 1;
  transform: none;
  transition-delay: .55s;
}

#performance .perf-card.reveal.is-visible p {
  opacity: 1;
  transform: none;
  transition-delay: .7s;
}

/* ----- PRIME: badge zooms with flash, pills cascade in arc ----- */
#prime .prime__inner.reveal {
  opacity: 0;
  transform: scale(.94);
  transition: opacity .9s var(--spring), transform .9s var(--spring);
}

#prime .prime__inner.reveal.is-visible {
  opacity: 1;
  transform: scale(1);
}

#prime .prime__badge {
  display: inline-block;
  transform-origin: center;
}

#prime .reveal.is-visible .prime__badge {
  animation: primeBadgeZoom 1s var(--spring) both, primeBadgeShimmer 4s ease-in-out 1s infinite;
}

@keyframes primeBadgeZoom {
  0% {
    transform: scale(.3);
    opacity: 0;
    filter: brightness(2) blur(8px);
  }

  60% {
    transform: scale(1.15);
    opacity: 1;
    filter: brightness(1.5) blur(0);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes primeBadgeShimmer {

  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(41, 151, 255, 0));
  }

  50% {
    filter: brightness(1.18) drop-shadow(0 0 16px rgba(41, 151, 255, .7));
  }
}

#prime .prime__modules {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

#prime .prime__modules>* {
  opacity: 0;
  transform: translateY(20px) rotate(-6deg);
  transition: opacity .55s var(--spring), transform .55s var(--spring);
}

#prime .reveal.is-visible .prime__modules>* {
  opacity: 1;
  transform: none;
}

#prime .reveal.is-visible .prime__modules>*:nth-child(1) {
  transition-delay: .5s;
}

#prime .reveal.is-visible .prime__modules>*:nth-child(2) {
  transition-delay: .6s;
}

#prime .reveal.is-visible .prime__modules>*:nth-child(3) {
  transition-delay: .7s;
}

#prime .reveal.is-visible .prime__modules>*:nth-child(4) {
  transition-delay: .8s;
}

#prime .reveal.is-visible .prime__modules>*:nth-child(5) {
  transition-delay: .9s;
}

#prime .reveal.is-visible .prime__modules>*:nth-child(6) {
  transition-delay: 1.0s;
}

#prime .reveal.is-visible .prime__modules>*:nth-child(7) {
  transition-delay: 1.1s;
}

#prime .prime__pill {
  transition: transform .35s var(--spring), background-color .35s ease;
}

#prime .reveal.is-visible .prime__pill:hover {
  transform: translateY(-3px) scale(1.05);
}

#prime .reveal.is-visible h2 {
  animation: primeTitleSheen 6s ease-in-out infinite;
  background: linear-gradient(110deg, var(--text) 30%, var(--brand-2) 50%, var(--text) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes primeTitleSheen {

  0%,
  100% {
    background-position: 200% 0;
  }

  50% {
    background-position: -100% 0;
  }
}

/* ----- FORMAT-CASES: tab switcher ----- */
.fmcases__tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: clamp(12px, 2vh, 24px);
}

.fmcases__tab {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--text-2);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--spring);
}

.fmcases__tab:hover {
  background: rgba(41, 151, 255, .14);
  border-color: rgba(41, 151, 255, .5);
  color: var(--brand-2);
  transform: translateY(-1px);
}

.fmcases__tab.is-active {
  background: linear-gradient(135deg, rgba(41, 151, 255, .45), rgba(120, 180, 255, .25));
  border-color: rgba(41, 151, 255, .7);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(41, 151, 255, .7);
}

.fmcases__panels {
  position: relative;
}

/* General siempre en el flujo para fijar la altura del contenedor */
.fmcases__panel[data-panel="general"] {
  display: block !important;
}
.fmcases__panel[data-panel="general"]:not(.is-active) {
  visibility: hidden;
}

/* Konnect y Performance se superponen sobre General */
.fmcases__panel:not([data-panel="general"]) {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.fmcases__panel:not([data-panel="general"]).is-active {
  display: block;
}

/* Konnect panel: reuse .cases__grid but scoped inside format-cases */
#format-cases .cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(16px, 2.5vh, 32px);
}

/* ----- FORMAT-CASES: cards "dealt" entrance, metrics tick + progress fill ----- */
#format-cases .fmcase.reveal {
  opacity: 0;
  transform: translate3d(-40px, 30px, 0) rotate(-5deg);
  transition: opacity .9s var(--spring), transform .9s var(--spring);
}

#format-cases .fmcase.reveal:nth-child(2) {
  transform: translate3d(0, 30px, 0) rotate(0deg);
}

#format-cases .fmcase.reveal:nth-child(3) {
  transform: translate3d(40px, 30px, 0) rotate(5deg);
}

#format-cases .fmcase.reveal.is-visible {
  opacity: 1;
  transform: none;
}

#format-cases .fmcase {
  position: relative;
  overflow: hidden;
}

#format-cases .fmcase::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--grad-brand);
  transition: width 1.5s var(--spring);
}

#format-cases .fmcase.reveal.is-visible::after {
  width: 100%;
  transition-delay: .4s;
}

#format-cases .fmcase__type {
  display: inline-block;
  transform-origin: left center;
}

#format-cases .fmcase.reveal.is-visible .fmcase__type {
  animation: fmTypeTilt 4s ease-in-out infinite;
}

@keyframes fmTypeTilt {

  0%,
  100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(-1.5deg);
  }

  75% {
    transform: rotate(1.5deg);
  }
}

/* ═══════════════════════════════════════════════
   PERFORMANCE PANEL — perf-case cards
   ═══════════════════════════════════════════════ */

/* All cases hidden by default; body.country-* selectors reveal the right one */
.perf-case { display: none; }

/* Shared grid setup for all visible cases */
body.country-es    .perf-case[data-perf-case="es"],
body.country-uk    .perf-case[data-perf-case="uk"],
body.country-usa   .perf-case[data-perf-case="uk"],
body.country-fr    .perf-case[data-perf-case="fr"],
body.country-it    .perf-case[data-perf-case="it"],
body.country-nl    .perf-case[data-perf-case="nl"],
body.country-be-en .perf-case[data-perf-case="be"],
body.country-be-fr .perf-case[data-perf-case="be"],
body.country-se    .perf-case[data-perf-case="se"],
body.country-fi    .perf-case[data-perf-case="fi"],
body.country-no    .perf-case[data-perf-case="no"],
body.country-dk    .perf-case[data-perf-case="dk"],
body.country-mx    .perf-case[data-perf-case="mx"],
body.country-br    .perf-case[data-perf-case="br"],
body.country-co    .perf-case[data-perf-case="co"],
body.country-cl    .perf-case[data-perf-case="clpe"],
body.country-pe    .perf-case[data-perf-case="clpe"],
body.country-ar    .perf-case[data-perf-case="ar"],
body.country-latam .perf-case[data-perf-case="latam"] {
  display: grid;
  grid-template-columns: clamp(180px, 24%, 240px) 1fr;
  column-gap: clamp(32px, 5vw, 64px);
  row-gap: 0;
}

/* Entry animation when the Performance panel becomes active */
.fmcases__panel[data-panel="performance"].is-active .perf-case {
  animation: perfCaseEnter .55s cubic-bezier(.22,1,.36,1) both;
}

@keyframes perfCaseEnter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Card shell */
.perf-cases {
  padding: clamp(12px, 2vh, 24px) 0;
}

.perf-case {
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  padding: clamp(20px, 3vh, 32px) clamp(20px, 3vw, 36px);
}

/* Inner 2-column: left = logo+meta, right = laptop+results */
.perf-case__inner {
  display: grid;
  grid-template-columns: clamp(180px, 24%, 240px) 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

/* ── Left column: logo + meta list ── */
.perf-case__left {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 20px);
}

.perf-case__logo {
  height: 117px;
  display: flex;
  align-items: center;
}

.perf-case__logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .85;
}

.perf-meta {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.perf-meta__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.perf-meta__row:last-child { border-bottom: none; }

.perf-meta__row dt {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  flex-shrink: 0;
}

.perf-meta__row dd {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  text-align: right;
  margin: 0;
}

/* ── Right column: laptop stacked above results ── */
.perf-case__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vh, 22px);
}

/* Results grid full width of the column */
.perf-case__results {
  width: 100%;
}

.perf-laptop {
  position: relative;
  width: 100%;
  animation: perfLaptopSway 9s ease-in-out infinite;
}

@keyframes perfLaptopSway {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50%       { transform: translateY(-7px) rotate(.4deg); }
}

/* Lid — outer casing */
.perf-laptop__screen {
  position: relative;
  background: linear-gradient(160deg, #1a1a28 0%, #121220 100%);
  border-radius: 10px 10px 0 0;
  border: 2px solid rgba(255,255,255,.18);
  border-bottom: 2px solid rgba(255,255,255,.10);
  padding: 10px 10px 0;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 0 40px -8px rgba(41,151,255,.22),
    0 24px 70px -18px rgba(0,0,0,.95);
}

/* Webcam dot */
.perf-laptop__screen::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  margin: 0 auto 6px;
}

/* Screen glass */
.perf-laptop__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.perf-laptop__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}

/* Hinge bar */
.perf-laptop__hinge {
  height: 7px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.06) 50%,
    rgba(0,0,0,.4) 100%);
  border-left: 2px solid rgba(255,255,255,.10);
  border-right: 2px solid rgba(255,255,255,.10);
  margin: 0 6%;
}

/* Palmrest / keyboard deck */
.perf-laptop__base {
  height: 34px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.09) 0%,
    rgba(255,255,255,.04) 60%,
    rgba(0,0,0,.2) 100%);
  border: 2px solid rgba(255,255,255,.10);
  border-top: none;
  border-radius: 0 0 8px 8px;
  position: relative;
  box-shadow: 0 8px 24px -4px rgba(0,0,0,.7);
}

/* Trackpad */
.perf-laptop__base::after {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 3px;
}

/* Feet shadow */
.perf-laptop__base::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 8%;
  right: 8%;
  height: 6px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, transparent 70%);
  border-radius: 50%;
}

/* Results block (inside right column, below laptop) */
.perf-case__results {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 20px);
}

.perf-results__label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin: 0;
}

.perf-results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.perf-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(12px, 2vh, 18px) 8px;
  border-radius: 14px;
  background: rgba(41,151,255,.06);
  border: 1px solid rgba(41,151,255,.2);
  gap: 4px;
}

.perf-metric strong {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 800;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  letter-spacing: -.02em;
}

.perf-metric__kpi {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  line-height: 1;
}

.perf-metric__desc {
  font-size: 10px;
  color: rgba(255,255,255,.3);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Slider: show/hide slides ── */
.perf-slide { display: none; }
.perf-slide.is-active { display: block; animation: perfSlideIn .4s cubic-bezier(.22,1,.36,1) both; }

@keyframes perfSlideIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* Slides span both columns (same as .perf-case__inner) */
.perf-slides {
  grid-column: 1 / -1;
}

/* ── Slider nav: arrows + dots — column 2 only (below laptop) ── */
.perf-slider__nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(8px, 1.2vh, 14px);
}

.perf-slider__btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.7);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
  display: flex;
  align-items: center;
  justify-content: center;
}

.perf-slider__btn:hover {
  background: rgba(41,151,255,.15);
  border-color: rgba(41,151,255,.5);
  color: #fff;
}

.perf-slider__dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.perf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.2);
  cursor: pointer;
  transition: background var(--t), transform var(--t);
  padding: 0;
}

.perf-dot.is-active {
  background: var(--brand);
  transform: scale(1.3);
}

/* ── Brand text (fallback when no logo img) ── */
.perf-brand-text {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: -.01em;
}

/* ── Pending results ── */
.perf-case__results--pending {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.perf-pending-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  margin: 0;
}

/* Laptop fills the right column entirely */
.perf-laptop { max-width: 100%; }

/* Responsive: stack on narrow viewports */
@media (max-width: 700px) {
  .perf-case__inner { grid-template-columns: 1fr; }
  .perf-case__left  { flex-direction: row; align-items: flex-start; gap: 16px; }
  .perf-meta        { flex: 1; }
}

/* ----- AWARDS: trophies drop with bounce + sparkle halo ----- */
#awards .award.reveal {
  opacity: 0;
  transform: translateY(-60px);
  transition: opacity .8s var(--spring), transform .9s var(--spring);
}

#awards .award.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#awards .award {
  position: relative;
  overflow: visible;
}

#awards .award.reveal.is-visible {
  animation: awardLand 1.4s var(--spring);
}

@keyframes awardLand {
  0% {
    transform: translateY(-60px);
  }

  60% {
    transform: translateY(8px);
  }

  80% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0);
  }
}

#awards .award__trophy {
  display: inline-block;
  transform-origin: center bottom;
  position: relative;
}

#awards .award.reveal.is-visible .award__trophy {
  animation: awardWobble 5s ease-in-out 1.4s infinite;
}

@keyframes awardWobble {

  0%,
  100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(-3deg);
  }

  75% {
    transform: rotate(3deg);
  }
}

#awards .award.reveal.is-visible .award__trophy::before,
#awards .award.reveal.is-visible .award__trophy::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 12px var(--brand-2);
  pointer-events: none;
}

#awards .award.reveal.is-visible .award__trophy::before {
  top: 10%;
  left: -12%;
  animation: awardSparkle1 2.6s ease-in-out infinite;
}

#awards .award.reveal.is-visible .award__trophy::after {
  top: 20%;
  right: -12%;
  animation: awardSparkle2 3.2s ease-in-out .8s infinite;
}

@keyframes awardSparkle1 {

  0%,
  100% {
    opacity: 0;
    transform: scale(0);
  }

  40% {
    opacity: 1;
    transform: scale(1.3);
  }

  60% {
    opacity: .7;
    transform: scale(1);
  }
}

@keyframes awardSparkle2 {

  0%,
  100% {
    opacity: 0;
    transform: scale(0) translateY(0);
  }

  50% {
    opacity: 1;
    transform: scale(1.2) translateY(-6px);
  }
}

#awards .award__year {
  position: relative;
  display: inline-block;
}

#awards .award.reveal.is-visible .award__year {
  animation: awardYearGlow 3s ease-in-out 1s infinite;
}

@keyframes awardYearGlow {

  0%,
  100% {
    text-shadow: 0 0 0 rgba(41, 151, 255, 0);
  }

  50% {
    text-shadow: 0 0 14px rgba(41, 151, 255, .7);
  }
}

/* ----- CONTACT: braces fly in, title fades, ambient spotlight ----- */
#contact {
  position: relative;
  overflow: hidden;
}

#contact::before {
  content: "";
  position: absolute;
  inset: -50% -50%;
  background: radial-gradient(closest-side, rgba(41, 151, 255, .18), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: contactSpot 8s ease-in-out infinite;
}

@keyframes contactSpot {

  0%,
  100% {
    transform: translate(-10%, -5%);
  }

  50% {
    transform: translate(10%, 5%);
  }
}

#contact>* {
  position: relative;
  z-index: 1;
}

#contact .contact__inner.reveal {
  opacity: 0;
}

#contact .contact__inner.reveal.is-visible {
  opacity: 1;
  transition: opacity .9s ease;
}

#contact .contact__brace {
  display: inline-block;
  opacity: 0;
  transform: translateX(-60px) scale(.6);
  transition: opacity 1s var(--spring), transform 1s var(--spring);
}

#contact .contact__brace--end {
  transform: translateX(60px) scale(.6);
}

#contact .reveal.is-visible .contact__brace {
  opacity: 1;
  transform: none;
  transition-delay: .1s;
  animation: contactBraceBreathe 4s ease-in-out 1s infinite;
}

#contact .reveal.is-visible .contact__brace--end {
  transition-delay: .2s;
}

@keyframes contactBraceBreathe {

  0%,
  100% {
    transform: scale(1);
    color: var(--brand);
  }

  50% {
    transform: scale(1.08);
    color: var(--brand-2);
  }
}

#contact .contact__logo {
  opacity: 0;
  transform: translateY(-12px) scale(.96);
  transition: opacity .25s ease, transform .25s ease;
}

#contact .reveal.is-visible .contact__logo {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .9s var(--spring) .25s, transform .9s var(--spring) .25s;
}

#contact .contact__title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--spring) .35s, transform .9s var(--spring) .35s;
}

#contact .reveal.is-visible .contact__title {
  opacity: 1;
  transform: none;
}

#contact .contact__lead {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--spring) .55s, transform .8s var(--spring) .55s;
}

#contact .reveal.is-visible .contact__lead {
  opacity: 1;
  transform: none;
}

#contact .contact__cta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--spring) .75s, transform .8s var(--spring) .75s;
}

#contact .reveal.is-visible .contact__cta {
  opacity: 1;
  transform: none;
}

#contact .contact__cta .btn--primary {
  position: relative;
  overflow: hidden;
}

#contact .contact__cta .btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  background-size: 300% 100%;
  background-position: 200% 0;
  pointer-events: none;
}

#contact .reveal.is-visible .contact__cta .btn--primary::after {
  animation: contactBtnSheen 3.5s ease-in-out 1.4s infinite;
}

@keyframes contactBtnSheen {

  0%,
  60%,
  100% {
    background-position: 200% 0;
  }

  85% {
    background-position: -100% 0;
  }
}

/* ============================================================
   KONNECT VALUE SLIDE — "Lo que cambia para ti" + tagline closer
   ============================================================ */
#konnect-value {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 0 32px clamp(72px, 8vh, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 4vh, 48px);
  overflow: hidden;
}

/* Drifting blue orb on the side — same family as CDP slide for cohesion */
#konnect-value::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  right: -10%;
  top: 20%;
  background: radial-gradient(closest-side, rgba(41, 151, 255, .16), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  animation: kvalueOrb 14s ease-in-out infinite;
  z-index: 0;
}

@keyframes kvalueOrb {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: .5;
  }

  50% {
    transform: translate(-60px, 40px) scale(1.15);
    opacity: .95;
  }
}

#konnect-value>* {
  position: relative;
  z-index: 1;
}

.konnect-value__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.konnect-value__kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-2);
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(41, 151, 255, .18), rgba(120, 180, 255, .10));
  border: 1px solid rgba(41, 151, 255, .4);
  margin-bottom: 22px;
}

.konnect-value__head h2 {
  font-size: clamp(32px, 5vw, 60px);
}

/* 4-card grid */
.konnect-value__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width:1080px) {
  .konnect-value__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:540px) {
  .konnect-value__grid {
    grid-template-columns: 1fr;
  }
}

.kvalue {
  position: relative;
  padding: 32px 26px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--spring), border-color .3s ease;
}

.kvalue:hover {
  transform: translateY(-6px);
  border-color: rgba(41, 151, 255, .5);
}

.kvalue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(41, 151, 255, .18) 50%, transparent 65%);
  background-size: 280% 100%;
  background-position: 200% 0;
  pointer-events: none;
  z-index: 0;
}

.kvalue.reveal.is-visible::after {
  animation: kvalueShine 7s ease-in-out infinite;
}

.kvalue.reveal.is-visible:nth-child(2)::after {
  animation-delay: 1.6s;
}

.kvalue.reveal.is-visible:nth-child(3)::after {
  animation-delay: 3.2s;
}

.kvalue.reveal.is-visible:nth-child(4)::after {
  animation-delay: 4.8s;
}

@keyframes kvalueShine {

  0%,
  70%,
  100% {
    background-position: 200% 0;
  }

  85% {
    background-position: -100% 0;
  }
}

.kvalue>* {
  position: relative;
  z-index: 1;
}

.kvalue__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(41, 151, 255, .22), rgba(41, 151, 255, .06));
  border: 1px solid rgba(41, 151, 255, .4);
  color: var(--brand-2);
  margin-bottom: 18px;
  transition: transform .5s var(--spring);
}

.kvalue.reveal.is-visible .kvalue__icon {
  animation: kvalueIconBob 4.4s ease-in-out infinite;
}

.kvalue.reveal.is-visible:nth-child(2) .kvalue__icon {
  animation-delay: .4s;
}

.kvalue.reveal.is-visible:nth-child(3) .kvalue__icon {
  animation-delay: .8s;
}

.kvalue.reveal.is-visible:nth-child(4) .kvalue__icon {
  animation-delay: 1.2s;
}

@keyframes kvalueIconBob {

  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-4px) rotate(-3deg);
  }
}

.kvalue__icon svg {
  width: 26px;
  height: 26px;
}

.kvalue h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text);
}

.kvalue p {
  font-size: 14px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.5;
}

/* Cards entrance: rise + scale with rotateX */
.kvalue.reveal {
  opacity: 0;
  transform: translateY(40px) rotateX(-12deg) scale(.94);
  transform-origin: bottom center;
  perspective: 900px;
  transition: opacity .9s var(--spring), transform .9s var(--spring), border-color .3s ease;
  will-change: transform, opacity;
}

.kvalue.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) rotateX(0) scale(1);
}

/* Tagline closer — giant typography, words appear one by one */
.konnect-value__quote {
  margin: 0 auto;
  max-width: 980px;
  padding: 50px 40px;
  border-radius: 24px;
  background:
    radial-gradient(900px circle at 50% 50%, rgba(41, 151, 255, .14), transparent 70%),
    linear-gradient(135deg, rgba(41, 151, 255, .14), rgba(41, 151, 255, .04));
  border: 1px solid rgba(41, 151, 255, .45);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  text-align: center;
  letter-spacing: -.01em;
  position: relative;
  overflow: hidden;
}

.konnect-value__qword {
  display: inline-block;
  margin: 0 .12em;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  transition: opacity .7s var(--spring), filter .7s var(--spring), transform .7s var(--spring);
}

.konnect-value__quote.reveal.is-visible .konnect-value__qword {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.konnect-value__quote.reveal.is-visible .konnect-value__qword[data-w="0"] {
  transition-delay: .10s;
}

.konnect-value__quote.reveal.is-visible .konnect-value__qword[data-w="1"] {
  transition-delay: .25s;
}

.konnect-value__quote.reveal.is-visible .konnect-value__qword[data-w="2"] {
  transition-delay: .40s;
}

.konnect-value__quote.reveal.is-visible .konnect-value__qword[data-w="3"] {
  transition-delay: .55s;
}

.konnect-value__quote.reveal.is-visible .konnect-value__qword[data-w="4"] {
  transition-delay: .78s;
}

.konnect-value__quote.reveal.is-visible .konnect-value__qword[data-w="5"] {
  transition-delay: .95s;
}

.konnect-value__quote em {
  font-style: normal;
  /* gradient is applied per-word below so the inline-block animation children
     each carry their own background-clip text fill */
}

.konnect-value__quote em .konnect-value__qword {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.konnect-value__qdot {
  color: var(--brand);
  margin-left: -.22em;
}

.konnect-value__qmark {
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  font-size: 140px;
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
  opacity: .35;
  pointer-events: none;
  user-select: none;
}

.konnect-value__qmark--start {
  top: 8px;
  left: 24px;
}

.konnect-value__qmark--end {
  bottom: -46px;
  right: 24px;
}

.konnect-value__quote.reveal {
  opacity: 0;
  transform: translateY(40px) scale(.97);
  transition: opacity 1s var(--spring), transform 1s var(--spring);
}

.konnect-value__quote.reveal.is-visible {
  opacity: 1;
  transform: none;
  top: 30px;
  position: relative;
}

/* Soft sheen sweep behind the words */
.konnect-value__quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
  background-size: 300% 100%;
  background-position: 200% 0;
  pointer-events: none;
  animation: kvalueQuoteSheen 7s ease-in-out 1.6s infinite;
}

@keyframes kvalueQuoteSheen {

  0%,
  70%,
  100% {
    background-position: 200% 0;
  }

  85% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  #konnect-value::before,
  #konnect-value * {
    animation: none !important;
  }

  .kvalue.reveal,
  .konnect-value__quote.reveal,
  .konnect-value__quote .konnect-value__qword {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  #konnect-compare .konnect-col,
  #konnect-compare .konnect-col--after,
  #konnect-compare .konnect__arrow,
  #results .case-card,
  #dooh .dooh-card,
  #peoople .peoople__copy,
  #peoople .peoople__device,
  #performance .perf-card,
  #prime .prime__inner,
  #format-cases .fmcase,
  #awards .award,
  #contact .contact__inner,
  #contact .contact__brace {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  #peoople::before,
  #contact::before {
    animation: none;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:780px) {
  .nav {
    padding: 14px 18px;
  }

  .nav__links {
    display: none;
  }

  .nav__counter {
    display: none;
  }

  .hero {
    padding: 120px 20px 100px;
  }

  .stats {
    padding: 80px 20px;
  }

  .placeholder {
    padding: 100px 20px;
  }

  .presenter {
    display: none;
  }
}

/* ============================================================
   REACH slide (between #data and #data-id)
   ============================================================
   Animated reach + demographics for the active country. Donut and pie
   arcs are driven by CSS variables written by js/reach.js — the section
   acts as a custom-property carrier so child SVGs animate purely in CSS. */

.reach {
  position: relative;
  z-index: 1;
  padding: 0 32px clamp(56px, 7vh, 88px);
  max-width: var(--maxw);
  margin: 0 auto;
  /* Donut bar palette (declared here so legend dots inherit the same hues
     as the SVG arc fill). */
  --reach-brand:    #2997ff;
  --reach-brand-2:  #6fb6ff;
  --reach-soft:     rgba(255, 255, 255, .14);
  --reach-soft-2:   rgba(255, 255, 255, .28);
  --reach-unknown:  rgba(255, 255, 255, .08);
  --reach-circ: 301.59;
}

.reach__head {
  margin: 0 auto clamp(20px, 3vh, 48px);
  max-width: 920px;
  text-align: center;
}

.reach__title {
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--text);
  justify-content: center;
}

.reach__title .accent {
  color: var(--brand);
}

.reach__flag--card {
  font-size: 1.6rem;
  line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .3));
  position: absolute;
  top: 16px;
  left: 18px;
}

.reach__sub {
  margin-top: 10px;
  color: var(--text-2);
  font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: .04em;
}

/* Grid — 4 columns wide, collapses to 2 then 1. */
.reach__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1100px) {
  .reach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .reach__grid { grid-template-columns: 1fr; }
}

.reach__card {
  position: relative;
  padding: 22px 22px 24px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
}

.reach__pill {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(41, 151, 255, .35);
  background: rgba(41, 151, 255, .08);
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── Totals card ────────────────────────────────────────────── */

.reach__totals-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
}

.reach__big {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reach__big strong {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.reach__big small {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.reach__unit {
  /* The "M" / "%" suffix that lives outside the counted span so it isn't
     overwritten by country.js's textContent swap. */
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  margin-left: 2px;
}

/* Totals card — números y etiquetas más grandes sin alterar el alto */
.reach__totals .reach__totals-row { gap: 6px; }
.reach__totals .reach__big strong  { font-size: clamp(42px, 5vw, 62px); }
.reach__totals .reach__big small   { font-size: 13px; }

/* ── Donut chart ────────────────────────────────────────────── */

.reach-donut {
  position: relative;
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1 / 1;
  margin: 4px auto 6px;
}

.reach-donut__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* arc starts at 12 o'clock */
}

.reach-donut__track {
  fill: none;
  stroke: var(--reach-soft);
  stroke-width: 12;
}

.reach-donut__bar {
  fill: none;
  stroke: var(--reach-brand);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: var(--reach-circ);
  /* Start "empty" — animate to the per-country offset when the section
     enters the viewport. The dominant slice (Mobile / Women) is what we
     draw; the remaining percentage stays as the lighter track. */
  stroke-dashoffset: var(--reach-circ);
  transition: stroke-dashoffset 1.2s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 0 12px rgba(41, 151, 255, .35));
}

.reach.is-anim .reach-donut__bar--mobile {
  stroke-dashoffset: calc(var(--reach-circ) * (1 - var(--pct-mobile, 0) / 100));
}

.reach.is-anim .reach-donut__bar--women {
  stroke-dashoffset: calc(var(--reach-circ) * (1 - var(--pct-women, 0) / 100));
}

.reach-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

.reach-donut__center strong {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.reach-donut__center small {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.reach-donut__legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.reach-donut__legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reach-donut__legend strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.reach-donut__legend small {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.reach-donut__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex-shrink: 0;
}

.reach-donut__dot--mobile,
.reach-donut__dot--women  { background: var(--reach-brand); box-shadow: 0 0 6px rgba(41,151,255,.6); }
.reach-donut__dot--desktop,
.reach-donut__dot--men    { background: var(--reach-soft-2); }

/* ── Pie chart ──────────────────────────────────────────────── */

.reach-pie {
  position: relative;
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1 / 1;
  margin: 4px auto 6px;
}

.reach-pie__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  /* Slices fade in from 0 → 1 when .is-anim is added, so the chart
     visually "completes" rather than popping. */
  opacity: 0;
  transition: opacity .8s ease .15s;
}

.reach.is-anim .reach-pie__svg { opacity: 1; }

.reach-pie__bg {
  fill: rgba(255, 255, 255, .03);
}

.reach-pie__slice {
  stroke: rgba(0, 0, 0, .45);
  stroke-width: .8;
  transform-origin: 60px 60px;
  transform: scale(.92);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.reach.is-anim .reach-pie__slice { transform: scale(1); }

.reach-pie__slice--1824   { fill: var(--reach-brand); }
.reach-pie__slice--2534   { fill: #4daeff; }
.reach-pie__slice--3544   { fill: var(--reach-brand-2); }
.reach-pie__slice--45     { fill: rgba(255, 255, 255, .82); }
.reach-pie__slice--unknown{ fill: var(--reach-unknown); }

.reach-pie__hole {
  fill: rgb(8, 10, 14);
  /* Match the section's dark background so the pie reads as a donut. */
}

.reach-pie__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-2);
  pointer-events: none;
}

.reach-pie__legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.reach-pie__legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reach-pie__legend strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  min-width: 38px;
}

.reach-pie__legend small {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: .06em;
}

.reach-pie__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.reach-pie__dot--1824 { background: var(--reach-brand); }
.reach-pie__dot--2534 { background: #4daeff; }
.reach-pie__dot--3544 { background: var(--reach-brand-2); }
.reach-pie__dot--45   { background: rgba(255, 255, 255, .82); }

/* Reduced-motion users get the final state with no transitions */
@media (prefers-reduced-motion: reduce) {
  .reach-donut__bar,
  .reach-pie__svg,
  .reach-pie__slice { transition: none !important; }
  .reach-pie__svg { opacity: 1; }
  .reach-pie__slice { transform: none; }
}
/* === JOHNNIE WALKER — case study === */
#johnnie-walker.jw-case{
  display:flex; flex-direction:column;
  gap:36px;
  padding:60px 64px;
}
.jw-case__head{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
  margin-bottom:60px;
}
.jw-case__head .kicker{ margin:0; }
.jw-case__head h2{ margin:0; }
.jw-case__head-logo{
  height:96px; width:auto; max-width:100%;
  filter:brightness(0) invert(1) drop-shadow(0 6px 18px rgba(41,151,255,.35));
}
.jw-case__brands{
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin-top:6px;
}
.jw-case__brand-jw{ height:48px; width:auto; filter:brightness(1.1); }
.jw-case__brand-ark{ height:40px; width:auto; }

.jw-case__result{
  display:flex; align-items:center; gap:22px;
  margin-top:-4px;
  margin-bottom:68px;
}
.jw-case__result-line{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(41,151,255,.6), transparent);
}
.jw-case__result-tag{
  font-family:'Montserrat',sans-serif;
  font-size:28px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  padding:0 6px;
}
.jw-case__result-tag .accent{ color:var(--brand-2); }

.jw-case__grid{
  display:grid; grid-template-columns:1fr 1.35fr; gap:36px;
  align-items:start;
}
@media (max-width:1100px){ .jw-case__grid{ grid-template-columns:1fr; } }

.jw-case__label{
  font-family:'Montserrat',sans-serif;
  font-size:15px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#fff;
  margin:0 0 18px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.18);
  text-align:center;
}
.jw-case__label span{
  color:rgba(255,255,255,.7); font-weight:500; letter-spacing:.12em;
}

/* Branding tiles */
.jw-tiles{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.jw-tile{
  position:relative;
  padding:22px 18px;
  border-radius:16px;
  background:linear-gradient(160deg, #2997ff 0%, #1e6fbf 100%);
  box-shadow:0 12px 30px -12px rgba(41,151,255,.55);
  color:#fff;
  min-height:118px;
  display:flex; flex-direction:column; justify-content:center;
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.jw-tile:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -10px rgba(41,151,255,.7); }
.jw-tile__num{
  font-family:'Montserrat',sans-serif;
  font-size:38px; font-weight:800; line-height:1; letter-spacing:-.02em;
}
.jw-tile__lbl{
  margin-top:8px;
  font-family:'Montserrat',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.jw-tile__badge{
  position:absolute; top:-14px; right:-12px;
  background:#0a0c10;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:13px; font-weight:800;
  width:50px; height:50px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(41,151,255,.55);
  box-shadow:0 8px 18px -6px rgba(0,0,0,.6);
  animation:jwBadgePop .9s ease-out both;
}
@keyframes jwBadgePop{
  0%{ transform:scale(0); opacity:0; }
  60%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(1); }
}

/* Comparison table */
.jw-table{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:22px;
  display:flex; flex-direction:column; gap:14px;
}
.jw-table__row{
  display:grid;
  grid-template-columns:130px 1fr 1fr 1fr;
  gap:14px;
  align-items:center;
}
.jw-table__row--head .jw-pill{ height:44px; }
.jw-pill{
  display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif;
  font-size:12px; font-weight:800; letter-spacing:.10em;
  text-transform:uppercase;
  padding:10px 12px;
  border-radius:10px;
  text-align:center;
  line-height:1.2;
}
.jw-pill--blue{ background:#2997ff; color:#fff; box-shadow:0 6px 16px -8px rgba(41,151,255,.6); }
.jw-pill--side{ height:42px; }
.jw-cell{
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  color:#0a0c10;
  font-family:'Montserrat',sans-serif;
  font-size:15px; font-weight:700;
  height:42px;
  border-radius:10px;
}
.jw-cell--muted{ color:rgba(10,12,16,.45); }
.jw-cell--accent{ background:#2997ff; color:#fff; }

/* Highlights */
.jw-highlights{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
  margin-top:56px;
}
@media (max-width:1000px){ .jw-highlights{ grid-template-columns:1fr; } }
.jw-hl{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:16px;
}
.jw-hl__icon{
  width:64px; height:64px; border-radius:50%;
  background:rgba(41,151,255,.18);
  border:1px solid rgba(41,151,255,.45);
  display:flex; align-items:center; justify-content:center;
  color:var(--brand-2);
  box-shadow:0 8px 22px -8px rgba(41,151,255,.55);
  animation:jwIconFloat 3.4s ease-in-out infinite;
}
.jw-hl__icon svg{ width:30px; height:30px; }
.jw-hl__icon--wow{
  background:transparent; border:none; box-shadow:none;
  width:auto; height:auto;
}
.jw-hl__icon--wow span{
  font-family:'Montserrat',sans-serif;
  font-size:28px; font-weight:900;
  color:var(--brand-2);
  letter-spacing:-.02em;
  transform:rotate(-6deg);
  text-shadow:0 4px 14px rgba(41,151,255,.55);
}
@keyframes jwIconFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
.jw-hl p{
  margin:0;
  font-size:15px; line-height:1.5;
  color:rgba(255,255,255,.85);
  max-width:340px;
}
.jw-hl p strong{ color:var(--brand-2); font-weight:700; }

/* Stats — offices list under the 4 cards */
.stats__offices{
  margin-top:18px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(41,151,255,.25);
  position:relative; z-index:2;
}
.stats__offices-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px;
  color:var(--brand-2);
}
.stats__offices-icon{
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
}
.stats__offices-icon svg{ width:18px; height:18px; }
.stats__offices-title{
  font-family:'Montserrat',sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
}
.stats__offices-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.stats__offices-list li{
  display:inline-flex; align-items:center; gap:4px;
  font-family:'Montserrat',sans-serif;
  font-size:10px; font-weight:600;
  color:var(--text-2);
  padding:3px 7px;
  border-radius:999px;
  background:rgba(41,151,255,.10);
  border:1px solid rgba(41,151,255,.28);
}
.stats__office-flag{ font-size:11px; line-height:1; }

/* Globe — coverage country markers (no label, distinct highlight) */
.gpin--coverage{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  box-shadow:none !important;
  pointer-events:none;
}
.gpin--coverage .gpin__dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px;
  color:#2997ff;
  filter:drop-shadow(0 0 6px rgba(41,151,255,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.7));
  animation:gpinCoveragePulse 2.4s ease-in-out infinite;
}
.gpin--coverage .gpin__dot svg{ width:18px; height:18px; display:block; }
@keyframes gpinCoveragePulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.18); opacity:.85; }
}