/* ===================== VARIABLES ===================== */
:root {
  --color-dark: #292929;
  --color-dark-2: #1c1c1c;
  --color-accent: #4F46E5;
  --color-accent-hover: #4338CA;
  --color-white: #ffffff;
  --color-light: #f7f7f5;
  --color-text-dark: #111827;
  --color-text-muted: #4b5563;
  --color-text-light: #f5f5f5;
  --color-text-light-muted: #b7b7b7;
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 10px;
  --max-width: 1120px;
}

/* ===================== RESET ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--color-text-dark);
  background: var(--color-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}
h3 { font-size: 1.1rem; font-weight: 700; }
.section-sub { color: var(--color-text-muted); margin-bottom: 2rem; max-width: 46ch; }

section { padding: 64px 0; }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--color-accent-hover); }
[data-cta="hero-primary"] {
  animation: ctaBreathe 5s ease-in-out infinite;
}
[data-cta="hero-primary"]:hover {
  animation: none;
}
@keyframes ctaBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
.btn-outline {
  background: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-small { padding: 10px 20px; font-size: 0.88rem; }
.btn-large { padding: 16px 32px; font-size: 1.05rem; }
.btn-full { width: 100%; }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
  padding: 6px 0;
}
.btn-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.btn-link-light { color: var(--color-text-light-muted); }
.btn-link-light:hover { color: var(--color-accent); }
.btn-whatsapp {
  color: var(--color-text-light-muted);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 12px;
  animation: whatsappFlicker 7s steps(1, end) infinite;
}
.btn-whatsapp-text-short { display: none; }
.btn-whatsapp-arrow { display: none; }
.btn-whatsapp:hover {
  animation: none;
  color: #25D366;
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  filter: drop-shadow(0 0 4px rgba(37,211,102,0.7));
}
@keyframes whatsappFlicker {
  /* blinks 1, 2 & 4 cluster at the start of every 7s cycle
     (short - long - short); blink 3 fires on its own 5s in */
  0%, 0.857%, 1.714%, 4.571%, 5.429%, 6.286%, 71.429%, 72.286%, 100% {
    color: var(--color-text-light-muted);
    filter: none;
    transform: translateX(0);
  }
  0% {
    color: #25D366;
    filter: drop-shadow(0 0 5px rgba(37,211,102,0.85));
    transform: translateX(-1px);
  }
  1.714% {
    color: #25D366;
    filter: drop-shadow(0 0 9px rgba(37,211,102,0.95));
    transform: translateX(0);
  }
  5.429% {
    color: #25D366;
    filter: drop-shadow(0 0 5px rgba(37,211,102,0.85));
    transform: translateX(1px);
  }
  71.429% {
    color: #25D366;
    filter: drop-shadow(0 0 5px rgba(37,211,102,0.85));
    transform: translateX(-1px);
  }
}

/* Lime variant of the flicker above, same timing, brand-accent color
   instead of WhatsApp green — used on the final contact card CTA. */
@keyframes whatsappFlickerLime {
  0%, 0.857%, 1.714%, 4.571%, 5.429%, 6.286%, 71.429%, 72.286%, 100% {
    color: var(--color-text-light-muted);
    filter: none;
    transform: translateX(0);
  }
  0% {
    color: #d8ff36;
    filter: drop-shadow(0 0 5px rgba(216,255,54,0.85));
    transform: translateX(-1px);
  }
  1.714% {
    color: #d8ff36;
    filter: drop-shadow(0 0 9px rgba(216,255,54,0.95));
    transform: translateX(0);
  }
  5.429% {
    color: #d8ff36;
    filter: drop-shadow(0 0 5px rgba(216,255,54,0.85));
    transform: translateX(1px);
  }
  71.429% {
    color: #d8ff36;
    filter: drop-shadow(0 0 5px rgba(216,255,54,0.85));
    transform: translateX(-1px);
  }
}

/* ===================== HEADER ===================== */
.site-header, .site-footer {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.site-header {
  background: var(--color-dark-2);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}
.header-nav {
  display: none;
  align-items: center;
  gap: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header-nav a {
  font-size: 0.76rem;
  color: #a3a3a3;
  transition: color 0.2s ease;
}
.header-nav a:hover {
  color: #fff;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-status {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(216,255,54,0.3);
  background: rgba(216,255,54,0.08);
  font-size: 0.68rem;
  font-weight: 600;
  color: #d8ff36;
  white-space: nowrap;
}
.header-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8ff36;
  flex-shrink: 0;
  animation: statPulse 1.8s ease-in-out infinite;
}
@media (min-width: 640px) {
  .header-status { display: flex; }
}
@media (min-width: 1024px) {
  .header-nav { display: flex; }
}
.header-cta {
  background: #5252ff;
  border-color: #5252ff;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 25px -5px rgba(82,82,255,0.2);
}
/* Without this it inherits a near-black default link color, which is
   effectively invisible against the dark header. */
.header-lang-switch {
  color: #a3a3a3;
  font-size: 0.76rem;
  font-weight: 600;
  transition: color 0.2s ease;
}
.header-lang-switch:hover { color: #fff; }
.header-cta:hover { background: #4343e0; border-color: #4343e0; }
.logo {
  display: inline-flex;
  align-items: baseline;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}
.logo:hover {
  opacity: 0.9;
}
.logo-sub {
  font-weight: 400;
  color: #a3a3a3;
  margin-left: 6px;
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #303030 0%, #262626 55%, #1c1c1c 100%);
  color: var(--color-text-light);
  padding: 56px 0 64px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 275px at 80% 50%, rgba(99,102,241,0.24), transparent 70%),
    radial-gradient(circle 200px at 85% 42%, rgba(124,58,237,0.16), transparent 70%),
    radial-gradient(circle 175px at 8% 10%, rgba(99,91,235,0.12), transparent 70%);
  filter: blur(110px);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.hero-video-disclaimer {
  width: 100%;
  max-width: 576px;
  /* The "2.4x Higher ROAS" stat badge is absolutely positioned off
     the bottom-left of the carousel and can extend a bit past the
     carousel's own declared height, so this needs real clearance
     below it rather than sitting right up against the carousel. */
  margin: 40px auto 0;
  padding: 0 16px;
  text-align: center;
  pointer-events: none;
  user-select: none;
  /* Matches .hero-carousel's own translateX(10%) so this stays
     centered under the carousel itself, not under the wider
     (unshifted) column it sits in. */
  transform: translateX(10%);
}
.hero-video-disclaimer p {
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(163,163,163,0.8);
}
.hero-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 14px 0;
  margin-top: 48px;
}
.hero-marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: heroMarquee 112s linear infinite;
}
.hero-marquee-track span {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
}
.hero-marquee-track span::after {
  content: "•";
  color: var(--color-accent);
  margin: 0 28px;
  font-size: 1rem;
}
@keyframes heroMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 36px;
}
.hero-copy-mobile { display: none; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(30,27,75,0.6);
  border: 1px solid rgba(99,102,241,0.3);
  color: #a5b4fc;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #818cf8;
  flex-shrink: 0;
  animation: eyebrowPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes eyebrowPing {
  0% { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(2.4); opacity: 0; }
}
.h1-gradient {
  background: linear-gradient(to right, #a5b4fc, #818cf8, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.hero-sub {
  font-size: 0.95rem;
  color: #d4d4d4;
  max-width: 32em;
  line-height: 1.6;
  margin-top: 16px;
  margin-bottom: 24px;
}
.hero-sub-break { display: none; }
.proof-title-break, .why-title-break { display: none; }
.hero-h1-tablet-break { display: none; }
@media (min-width: 1024px) {
  .hero-sub { font-size: 1rem; }
}
.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.hero-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  margin-top: 24px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hero-social-proof:hover {
  background: rgba(255,255,255,0.07);
}
.google-icon { flex-shrink: 0; display: block; }
.google-score {
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.google-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #FBBC05;
}
.google-stars svg { display: block; }
.google-dot { color: #737373; font-size: 0.76rem; }
.google-count { font-size: 0.76rem; color: #a3a3a3; font-weight: 400; }
.google-check { flex-shrink: 0; color: #34d399; }

/* ===================== VIDEO GRID / PLACEHOLDERS ===================== */
.video-grid {
  display: grid;
  gap: 14px;
}
.play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  padding-left: 3px;
  box-shadow: 0 0 20px rgba(99,102,241,0.5);
  transition: transform 0.25s ease, background 0.2s ease;
}

/* ===================== VIDEO WALL (proof section, swipeable reel) ===================== */
.video-wall-container {
  position: relative;
  /* Full-bleed breakout: this section lives inside .container (which
     has a max-width + side padding), but the track itself should run
     edge-to-edge across the viewport. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Plain native horizontal scroll (swipe or the arrow buttons) on every
   breakpoint, with the closest-to-center tile always dock-scaled up
   (see .is-video-active below) - no more JS transform-driven
   auto-marquee, so nothing here fights a user's own scroll input. */
.video-wall-wrapper {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 56px 0;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none;
  scroll-behavior: smooth;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.video-wall-wrapper::-webkit-scrollbar { display: none; }
/* The edge fade/tag/bottom-gradient overlays and the iframe's slight
   scale overscan all compositing on top of each other while the row
   scroll-snaps is what used to read as a visible seam/black bar under
   touch scrolling (originally found on mobile) - stripped everywhere
   now that every breakpoint scrolls the same way. */
.video-wall-fade,
.video-wall-tag,
.video-wall-tile::before { display: none; }
.video-wall-tile video { transform: none; }
.video-wall {
  display: flex;
  gap: 20px;
  width: max-content;
  padding-left: 20px;
  touch-action: pan-x;
}
@media (min-width: 768px) {
  .video-wall { gap: 24px; }
}
@media (min-width: 1024px) {
  .video-wall { gap: 28px; }
}
.video-wall-mount,
.video-wall-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}
.video-wall-tile video {
  /* Slight overscan: some source videos don't perfectly fill a 9:16
     frame, leaving a 1-2px black sliver at an edge. Scaling the
     video up a hair (cropped by the tile's own overflow:hidden)
     hides that without being visible as "zoomed in". */
  transform: scale(1.03);
}
@media (min-width: 1024px) {
  .video-wall-tile video { transform: scale(1.04); }
}
.video-wall-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.video-wall-arrow:hover {
  background: rgba(23,23,23,1);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.video-wall-arrow-left { left: 16px; }
.video-wall-arrow-right { right: 16px; }
@media (min-width: 1024px) {
  .video-wall-arrow-left { left: 32px; }
  .video-wall-arrow-right { right: 32px; }
}
.video-wall-tile {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  background-color: #000;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  cursor: pointer;
  transform-origin: center;
  /* Permanent "dock" effect (not hover-triggered): whichever tile is
     closest to center is always scaled up and highlighted (see
     .is-video-active, tracked on scroll in script.js), everything
     else sits dimmed/scaled down beside it. */
  transform: scale(0.95);
  opacity: 0.7;
  transition: transform 0.3s ease, opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.video-wall-tile::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  pointer-events: none;
}
.video-wall-tile:hover { opacity: 0.85; }
.video-wall-tile.is-video-active {
  transform: scale(1.05);
  opacity: 1;
  z-index: 10;
}
/* Currently playing with sound (script.js toggles this off watchingIndex,
   not scroll position) - comes after .is-video-active so it wins
   whenever both would apply to the same tile, since scale/border/glow
   here need to dominate the plain scroll-position dock highlight above. */
.video-wall-tile.is-unmuted {
  transform: scale(1.2);
  opacity: 1;
  border: 2px solid rgba(82,82,255,0.8);
  /* Kept well inside the wrapper's vertical padding (64px at desktop)
     so it never gets clipped by .video-wall-wrapper's overflow-y:hidden
     - the 1.2 scale itself already eats ~43px of that padding per side
     (a 240x427px tile growing 20% taller), leaving only ~20px of real
     headroom before the glow starts getting cut off top and bottom. */
  box-shadow: 0 0 8px rgba(82,82,255,0.45);
  z-index: 25;
}
/* Hovered clip (desktop only, toggled in script.js) - border/glow only,
   no transform here since the hover-magnify scale is applied inline
   (it needs live per-tile math, not a fixed value a CSS class can hold). */
.video-wall-tile.is-hover-focus {
  border: 2px solid rgba(82,82,255,0.8);
  box-shadow: 0 0 35px rgba(82,82,255,0.35);
}
/* Mobile-only countdown/watch bar (own class, not Hero's .progress-bar -
   a shared class was what accidentally leaked an edit into Hero earlier
   in this project, so anything Portfolio-specific gets its own name).
   Hidden by default; shown only in the mobile breakpoint below, where
   script.js drives its width both for the 5s auto-advance countdown
   and for real playback progress once a clip is tapped. */
.video-wall-progress-bar {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: rgba(82,82,255,0.9);
  z-index: 4;
  transition: width 0.1s linear;
}
.video-wall-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.video-wall-tile:hover .video-wall-tag {
  opacity: 1;
}
.video-wall-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  z-index: 3;
  border: 0;
  border-radius: 50%;
  background: rgba(79,70,229,0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.2s ease;
}
.video-wall-tile:hover .video-wall-play {
  opacity: 1;
}
.video-wall-play:hover {
  transform: scale(1.1);
}
.proof-disclaimer {
  width: 100%;
  max-width: 576px;
  margin: 24px auto 0;
  padding: 0 16px;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
.proof-disclaimer p {
  font-size: 0.68rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.4);
}
/* ===================== HERO CAROUSEL =====================
   Center and side tiles have independent widths (not a shared
   width + scale) so the gap between them is real empty space,
   not just two overlapping boxes at different opacity. */
.hero-carousel {
  position: relative;
  height: 440px;
  max-width: 546px;
  margin: 0 auto;
  transform: translateX(10%);
}
/* Entrance: grows/fades in from its own center instead of the
   left/right position transition (see .carousel-tile below) visibly
   animating tiles into place on first paint, which read as sliding up
   from underneath. Applied to the wrapper, not .hero-carousel itself,
   since .hero-carousel's own transform already varies per breakpoint
   (translateX(10%) on wide desktop, none on mobile/tablet) and a second
   animation-driven transform on the same element would fight that. */
.hero-visual {
  animation: heroVisualAppear 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroVisualAppear {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}
/* No transition on the very first position assignment (JS adds
   .is-ready one frame after that first render()) - without this, the
   tiles' own transform transition (0.6s, below) fires the instant
   data-pos is set, which is what actually produced the "slides up from
   below" look; every position change after that first frame still
   transitions normally. */
.hero-carousel:not(.is-ready) .carousel-tile {
  transition: none;
}
/* Used behind the Hero carousel - kept at its original values (this used
   to be shared with the Portfolio video wall too, which is why it was
   brightened at one point, but that instance was removed and this one
   was explicitly asked to stay untouched, so it's back to how it was). */
.carousel-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  height: 340px;
  border-radius: 999px;
  background: rgba(82,82,255,0.2);
  filter: blur(130px);
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 768px) {
  .carousel-glow { width: 500px; height: 450px; filter: blur(160px); }
}
.carousel-tile {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 237px;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease, width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.carousel-tile[data-pos="center"] {
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index: 3;
  cursor: default;
  border: 2px solid rgba(129,140,248,0.6);
  box-shadow:
    0 8px 30px -4px rgba(99,102,241,0.45),
    0 0 20px -2px rgba(139,92,246,0.35),
    0 0 0 1px rgba(129,140,248,0.3),
    0 10px 30px rgba(0,0,0,0.4);
}
.carousel-tile[data-pos="left"] {
  width: 169px;
  transform: translate(calc(-50% - 158px), -50%) scale(0.95);
  opacity: 0.9;
  z-index: 2;
}
.carousel-tile[data-pos="right"] {
  width: 169px;
  transform: translate(calc(-50% + 158px), -50%) scale(0.95);
  opacity: 0.9;
  z-index: 2;
}
.carousel-tile:not([data-pos="center"]):hover {
  opacity: 1;
}
/* Pool videos beyond the visible 3 sit here, fully invisible and
   non-interactive, and cross-fade into "left"/"right" as the
   carousel rotates — this is what makes a clip "float in/out".
   Opacity fades out quicker than the tile travels, so it reads
   as "dissolving" rather than a long visible flight off-screen. */
.carousel-tile[data-pos="far-left"],
.carousel-tile[data-pos="far-right"] {
  width: 169px;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  cursor: default;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-tile[data-pos="far-left"] {
  transform: translate(calc(-50% - 22vw), -50%) scale(0.8);
}
.carousel-tile[data-pos="far-right"] {
  transform: translate(calc(-50% + 22vw), -50%) scale(0.8);
}
.carousel-mount,
.carousel-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}
.carousel-tile video {
  /* Slight overscan to hide a 1-2px black sliver some source videos
     leave at an edge when they don't perfectly fill 9:16. */
  transform: scale(1.03);
}
@media (min-width: 1024px) {
  .carousel-tile video { transform: scale(1.04); }
}
.carousel-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.2);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease;
}
.carousel-tile[data-pos="center"] .carousel-overlay {
  background: transparent;
}
.carousel-tile .play-btn { width: 40px; height: 40px; font-size: 0.75rem; pointer-events: none; opacity: 1; }
/* Center tile gets a bigger, highlighted "tap for sound" invite; it
   disappears once that clip has been picked and is playing with sound
   (clicking a clip only ever turns sound on - there's no click-to-mute
   toggle, so once hidden this stays hidden until a different clip
   becomes centered). */
.carousel-tile[data-pos="center"] .play-btn {
  width: 48px;
  height: 48px;
  background: rgba(82,82,255,0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.carousel-tile[data-pos="center"].is-unmuted .play-btn { opacity: 0; pointer-events: none; }
.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color-accent);
  z-index: 1;
  transition: width 0.1s linear;
}
.platform-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.carousel-tile[data-pos="center"] .platform-tag {
  opacity: 1;
}
/* Positioned relative to .hero-carousel (not the tile itself) so it
   can float outside the center card's corner without being clipped
   by the tile's own overflow:hidden. The center card always sits
   dead-center in .hero-carousel, so this stays correctly placed
   regardless of which clip is currently active. */
.stat-badge {
  position: absolute;
  top: calc(50% + 201px);
  left: calc(50% - 137px);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(23,23,23,0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.stat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  animation: statPulse 1.8s ease-in-out infinite;
}
@keyframes statPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* ===================== CAROUSEL ARROWS =====================
   Hidden below 1280px: at narrower widths the carousel doesn't
   have enough spare width beside the enlarged side videos to
   fit an arrow without sitting on top of them. Below 1280px,
   tapping a side video promotes it instead. */
.carousel-arrow {
  display: none;
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 21;
  opacity: 1;
}
.arrow-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(23,23,23,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.carousel-arrow-right .arrow-icon { padding-left: 1px; }
.carousel-arrow:hover .arrow-icon { background: rgba(38,38,38,1); color: #fff; }

@media (min-width: 768px) {
  .hero-carousel { height: 560px; max-width: 806px; }
  .carousel-tile { width: 299px; }
  .carousel-tile[data-pos="left"] { width: 215px; transform: translate(calc(-50% - 205px), -50%) scale(0.95); }
  .carousel-tile[data-pos="right"] { width: 215px; transform: translate(calc(-50% + 205px), -50%) scale(0.95); }
  .stat-badge { top: calc(50% + 256px); left: calc(50% - 168px); }
}

@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr 1.1fr; }
  .carousel-tile { width: 276px; }
  .carousel-tile[data-pos="left"] { width: 195px; transform: translate(calc(-50% - 186px), -50%) scale(0.95); }
  .carousel-tile[data-pos="right"] { width: 195px; transform: translate(calc(-50% + 186px), -50%) scale(0.95); }
  .stat-badge { top: calc(50% + 235px); left: calc(50% - 156px); }

  /* Fit the whole hero (copy + carousel + ticker) into one viewport
     on desktop instead of pushing the ticker below the fold.
     min-height (not a hard height) so a genuinely short viewport
     still just scrolls a little rather than clipping content -
     .hero keeps overflow:hidden for the glow/grid pseudo-elements,
     so a hard max-height here would risk silently cutting content
     off instead of scrolling. */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    padding-top: 72px;
    padding-bottom: 12px;
  }
  .hero-carousel { height: 480px; }
}

@media (min-width: 1280px) {
  .carousel-arrow { display: flex; align-items: center; justify-content: center; }
  .carousel-arrow-left { left: 50%; transform: translate(calc(-50% - 311px), -50%); }
  .carousel-arrow-right { left: 50%; transform: translate(calc(-50% + 311px), -50%); }
}

/* ===================== PAIN ===================== */
.pain { background: var(--color-white); padding-bottom: 32px; }
.pain-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin-bottom: 28px;
}
.pain-card {
  background: var(--color-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.pain-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 28px rgba(79,70,229,0.12);
  transform: translateY(-2px);
}
.pain-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(79,70,229,0.08);
  color: var(--color-accent);
  margin-bottom: 16px;
}
.pain-card h3 { margin-bottom: 8px; font-size: 1.05rem; }
.pain-card p { color: var(--color-text-muted); font-size: 0.94rem; }
.pain-callout {
  background: rgba(79,70,229,0.06);
  border: 1px solid rgba(79,70,229,0.22);
  color: var(--color-text-dark);
  border-radius: 14px;
  padding: 14px 24px;
  text-align: center;
}
.pain-callout strong { color: var(--color-accent); }
.pain-callout p { font-size: 1.02rem; margin: 0; }
.pain-callout-dot { display: none; }

/* ===================== PROCESS ===================== */
.process { background: var(--color-light); padding-top: 32px; }
.process-timeline-mobile { display: none; }
.process-grid {
  position: relative;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
.process-grid::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, #e5e5e2 0 6px, transparent 6px 12px);
  z-index: 0;
}
.process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.25s ease;
}
.process-step:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(79,70,229,0.08);
  border: 1px solid rgba(79,70,229,0.25);
  color: var(--color-accent);
  font-weight: 800;
  font-size: 0.82rem;
  margin-bottom: 14px;
}
.process-step h3 { margin-bottom: 6px; }
.process-step p { color: var(--color-text-muted); font-size: 0.95rem; margin-bottom: 14px; }
.step-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-light);
  border: 1px solid #e5e5e2;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text-dark);
  white-space: nowrap;
}
.process-cta {
  text-align: center;
  margin-top: 32px;
}
.process-cta a {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-dark);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.process-cta a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.process-cta-arrow-down { display: none; }

/* ===================== PROOF ===================== */
.proof { background: var(--color-dark); color: var(--color-text-light); }
.proof h2 { color: var(--color-text-light); margin-bottom: 0; }
.proof-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.proof-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #a3a3a3;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.proof-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5252ff;
  flex-shrink: 0;
  animation: statPulse 1.8s ease-in-out infinite;
}
.proof-sub {
  color: var(--color-text-light-muted);
  font-size: 0.85rem;
  margin-top: 6px;
  max-width: 42ch;
}
.proof-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.3);
  color: #5252ff;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background 0.2s ease;
}
.proof-cta:hover { background: rgba(99,102,241,0.2); }
.proof-cta-arrow { font-size: 0.9rem; }

/* ===================== PRICING (3-tier + configurator) ===================== */
.pricing { background: var(--color-dark-2); color: var(--color-text-light); }
.pricing-title {
  color: #fff;
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.pricing-title-standalone {
  margin-bottom: 40px;
}
.pricing-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-bottom: 20px;
}

/* Two-tier card: a "top" tier (badges/heading/price/CTA) sitting
   above a visually distinct "tray" (checkmarks) that stretches to
   fill any extra height so all 3 cards stay equal-height in the grid. */
.pricing-card {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.pricing-card.is-featured {
  border-color: rgba(99,102,241,0.5);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.3), 0 25px 50px rgba(99,102,241,0.15);
}
@media (min-width: 1024px) {
  .pricing-card.is-featured { transform: translateY(-8px); }
}
.pricing-card-top {
  padding: 28px;
  background: rgba(23,23,23,0.9);
}
.pricing-card.is-featured .pricing-card-top {
  background: linear-gradient(to bottom, rgba(49,46,129,0.4), rgba(23,23,23,0.95) 65%);
}
.pricing-card-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 22px;
}
.pricing-card-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-light-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pricing-card.is-featured .pricing-card-label { color: #a5b4fc; }
.pricing-pill {
  font-size: 0.68rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #d4d4d4;
  white-space: nowrap;
}
.pricing-pill-accent {
  background: rgba(99,102,241,0.2);
  border-color: rgba(99,102,241,0.4);
  color: #a5b4fc;
}
.pricing-card-heading {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 24px;
}
@media (min-width: 1024px) {
  .pricing-card-heading { font-size: 1.75rem; }
}
.pricing-price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.pricing-price-from {
  font-size: 1.15rem;
  font-weight: 700;
  color: #d4d4d4;
}
@media (min-width: 1024px) {
  .pricing-price-from { font-size: 1.3rem; }
}
/* Soft rounded pill instead of the previous skewed/rotated rectangle -
   a plain background+border-radius reads as a deliberate premium price
   tag; the skew read as a rough "price sticker" marker-pen effect. */
.price-highlight {
  display: inline-flex;
  align-items: center;
  color: #0a0a0a;
  font-weight: 900;
  letter-spacing: -0.01em;
  padding: 2px 10px;
  border-radius: 8px;
  background: #d8ff36;
  box-shadow: 0 0 15px rgba(216,255,54,0.25);
}
.price-unit {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-light-muted);
}
.pricing-card-top .btn {
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.pricing-card-tray {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 28px;
  background: rgba(10,10,10,0.6);
}
.pricing-card.is-featured .pricing-card-tray {
  background: rgba(49,46,129,0.15);
  border-top: 1px solid rgba(99,102,241,0.15);
}
.pricing-features { display: grid; gap: 12px; }
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #d4d4d4;
}
.pricing-card.is-featured .pricing-features li { color: #e5e5e5; }
.pricing-features li strong { color: #fff; font-weight: 600; }
.pricing-check {
  flex-shrink: 0;
  color: #d8ff36;
  font-weight: 700;
}
.btn-white {
  background: #fff;
  color: #0a0a0a;
}
.btn-white:hover { background: #e5e5e5; }
.pricing-legal {
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.35);
  max-width: 60ch;
  margin: 0 auto 40px;
}

/* ---- Configurator: clean, airy Linear/Stripe-style layout ---- */
.configurator {
  max-width: 760px;
  margin: 0 auto;
  background: rgba(23,23,23,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 36px 32px;
}
.configurator-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #d8ff36;
  margin-bottom: 10px;
}
.configurator-header h3 { color: #fff; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.configurator-header p { color: var(--color-text-light-muted); font-size: 0.82rem; max-width: 46ch; }

.cfg-row {
  padding: 32px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.configurator-header + .cfg-row { padding-top: 36px; }
.cfg-row--last { border-bottom: 0; padding-bottom: 8px; }
.cfg-row--split {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .cfg-row--split { grid-template-columns: 5fr 7fr; }
}
.cfg-col { display: flex; flex-direction: column; gap: 14px; }
.cfg-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-light-muted);
}
.cfg-label-note {
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(255,255,255,0.3);
  margin-left: 6px;
}
.cfg-note { font-size: 0.76rem; line-height: 1.55; color: var(--color-text-light-muted); max-width: 56ch; margin-top: 6px; }

/* Video quantity */
.cfg-qty-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cfg-hint { font-size: 0.74rem; color: rgba(255,255,255,0.35); }
.cfg-badge {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  color: #d8ff36;
  background: rgba(216,255,54,0.1);
}
.config-stepper--lg .config-stepper-btn { width: 38px; height: 38px; font-size: 1.05rem; }
.config-stepper--lg .config-stepper-value { font-size: 1.15rem; min-width: 26px; }

/* Creator tier */
.cfg-tier-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.cfg-tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 92px;
  padding: 13px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cfg-tier-card:hover { border-color: rgba(255,255,255,0.22); }
.cfg-tier-card.is-selected { border-color: #d8ff36; box-shadow: 0 0 0 1px rgba(216,255,54,0.2); }
.cfg-tier-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cfg-tier-top { display: flex; flex-direction: column; }
.cfg-tier-tag { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-light-muted); }
.cfg-tier-card.is-selected .cfg-tier-tag { color: #d8ff36; }
.cfg-tier-name { font-size: 0.78rem; font-weight: 700; color: #fff; margin-top: 5px; }
.cfg-tier-mult { font-size: 0.76rem; font-weight: 700; color: #d8ff36; }

/* Video length */
.cfg-length-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .cfg-length-grid { grid-template-columns: repeat(3, 1fr); }
}
.cfg-length-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cfg-length-card:hover { border-color: rgba(255,255,255,0.22); }
.cfg-length-card.is-selected { border-color: #d8ff36; box-shadow: 0 0 0 1px rgba(216,255,54,0.18); }
.cfg-length-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cfg-length-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.cfg-length-time { font-size: 0.94rem; font-weight: 800; color: #fff; }
.cfg-length-price { font-size: 1.05rem; font-weight: 800; color: #d8ff36; }
.cfg-length-sub { font-size: 0.76rem; color: var(--color-text-light-muted); }

/* Hook / photo counters */
.cfg-counter-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.cfg-counter-title { font-size: 0.8rem; font-weight: 700; color: #fff; }
.cfg-counter-sub { font-size: 0.74rem; color: var(--color-text-light-muted); margin-top: 3px; }

.config-stepper { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.config-stepper-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.config-stepper-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }
.config-stepper-value { min-width: 20px; text-align: center; font-size: 0.86rem; font-weight: 800; color: #fff; }

/* Usage channels — chip toggles */
.cfg-placements-head { margin-bottom: 16px; }
.cfg-chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.cfg-chip {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: var(--color-text-light-muted);
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cfg-chip:hover { border-color: rgba(255,255,255,0.25); color: #fff; }
.cfg-chip.is-active {
  border-color: #d8ff36;
  background: rgba(216,255,54,0.15);
  color: #fff;
}

/* Add-ons & production — hairline list, no card backgrounds */
.cfg-list { border-top: 1px solid rgba(255,255,255,0.06); }
.cfg-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
}
.cfg-list-item-main { display: flex; align-items: center; gap: 12px; }
.cfg-list-item-main input { flex-shrink: 0; width: 16px; height: 16px; accent-color: #d8ff36; }
.cfg-list-item-title { display: block; font-size: 0.8rem; font-weight: 600; color: #fff; }
.cfg-list-item-desc { display: block; font-size: 0.72rem; color: var(--color-text-light-muted); margin-top: 2px; }
.cfg-list-item-desc strong { color: #d4d4d4; font-weight: 700; }
.cfg-list-item-price { font-size: 0.8rem; font-weight: 700; color: #d4d4d4; white-space: nowrap; }
.cfg-list-item--counter { cursor: default; }

.configurator-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.configurator-total-info { display: flex; flex-direction: column; gap: 4px; }
.configurator-total-label { font-size: 0.82rem; color: #d4d4d4; }
.configurator-total-eyebrow { display: none; }
.configurator-total-price { display: flex; align-items: baseline; gap: 8px; }
.configurator-total-price strong { color: #a5b4fc; font-size: 1.4rem; font-weight: 800; }
.configurator-total-strike { font-size: 0.85rem; color: rgba(255,255,255,0.35); text-decoration: line-through; }
.configurator-total-unit { font-size: 0.7rem; color: var(--color-text-light-muted); }
.configurator-disclaimer {
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.35);
  margin-top: 20px;
}

/* ===================== WHY ===================== */
.why { background: #f4f5f7; }
.why h2 { text-align: center; margin-bottom: 2rem; }
.why-tabs { display: none; }
.why-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); }
}
.why-col {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s ease;
}
.why-col:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
@media (min-width: 640px) {
  .why-col { padding: 28px; }
}
.why-col-head { min-height: 72px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.why-col-head h3 { color: var(--color-text-dark); margin-bottom: 4px; }
.why-col-sub { color: var(--color-text-muted); font-size: 0.82rem; }
.why-col-list { display: grid; gap: 14px; }
.why-col-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; line-height: 1.5; color: var(--color-text-muted); }
.why-icon { flex-shrink: 0; width: 16px; font-size: 0.92rem; font-weight: 700; line-height: 1.5; text-align: center; }
.why-icon-yes { color: #10b981; }
.why-icon-no { color: #f43f5e; }
.why-col.is-highlight {
  background: #171717;
  border: 2px solid #5252ff;
  box-shadow: 0 25px 50px -12px rgba(82,82,255,0.15);
}
.why-col.is-highlight:hover { box-shadow: 0 25px 50px -12px rgba(82,82,255,0.25); }
.why-col.is-highlight .why-col-head { border-bottom-color: rgba(255,255,255,0.08); }
.why-col.is-highlight .why-col-head h3 { color: #fff; }
.why-col.is-highlight .why-col-sub { color: var(--color-text-light-muted); }
.why-col.is-highlight .why-col-list li { color: #e5e5e5; }
.why-recommended {
  position: absolute;
  top: -12px;
  left: 24px;
  display: inline-flex;
  width: fit-content;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: #5252ff;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ===================== FAQ ===================== */
.faq { background: var(--color-dark-2); }
.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #a3a3a3;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.faq h2 { color: var(--color-text-light); }
.faq-sub { color: var(--color-text-light-muted); font-size: 0.85rem; max-width: 42ch; margin-top: 6px; margin-bottom: 24px; }
.faq-list { display: grid; gap: 10px; }
.faq-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  color: var(--color-text-light);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Real SVG chevron span - only used by the mobile hairline-accordion
   layout below; desktop keeps the existing ::after "+/-" glyph. */
.faq-chevron { display: none; }
.faq-item summary::after {
  content: "+";
  float: right;
  color: #d8ff36;
  font-weight: 700;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin-top: 10px; color: var(--color-text-light-muted); font-size: 0.94rem; }

/* ===================== FINAL CTA ===================== */
.final-cta {
  background: var(--color-dark);
  color: var(--color-text-light);
}
.final-cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 1024px) {
  .final-cta-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
}

/* ---- Left column: trust & value props ---- */
.final-cta-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #737373;
  margin-bottom: 14px;
}
.final-cta h2 { color: var(--color-text-light); font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.final-cta-sub { color: var(--color-text-light-muted); font-size: 0.94rem; line-height: 1.55; margin: 14px 0 30px; max-width: 46ch; }
.final-cta-guarantee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.2);
  color: #a5b4fc;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 24px;
}
.final-cta-guarantee-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5252ff;
  flex-shrink: 0;
  animation: statPulse 1.8s ease-in-out infinite;
}
.final-cta-trust { display: grid; gap: 16px; margin-bottom: 30px; }
.final-cta-trust li { display: flex; align-items: flex-start; gap: 12px; }
.final-cta-trust li span:last-child { font-size: 0.86rem; line-height: 1.55; color: var(--color-text-light-muted); }
.final-cta-trust li strong { color: #fff; font-weight: 700; }
.final-cta-trust-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(216,255,54,0.12);
  color: #d8ff36;
  font-size: 0.68rem;
  font-weight: 800;
}
.final-cta-whatsapp-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.final-cta-whatsapp-card svg { flex-shrink: 0; }
.final-cta-whatsapp-card span { font-size: 0.84rem; line-height: 1.4; }
.final-cta-whatsapp-card strong { color: #fff; font-weight: 700; }
.final-cta-whatsapp-arrow {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--color-text-light-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
.btn-whatsapp-lime { animation: whatsappFlickerLime 7s steps(1, end) infinite; }
.btn-whatsapp-lime:hover,
.final-cta-whatsapp-card:hover {
  animation: none;
  border-color: rgba(216,255,54,0.5);
  background: rgba(216,255,54,0.08);
}
.btn-whatsapp-lime:hover span,
.btn-whatsapp-lime:hover svg { color: #d8ff36; filter: drop-shadow(0 0 4px rgba(216,255,54,0.6)); }
.final-cta-whatsapp-card:hover .final-cta-whatsapp-arrow { color: #d8ff36; transform: translateX(3px); }
.final-cta-whatsapp-line { display: none; }

/* ---- Right column: interactive card ---- */
.final-cta-card {
  position: relative;
  background: rgba(23,23,23,0.9);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 28px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}
.final-cta-card::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,255,54,0.14), transparent 70%);
  pointer-events: none;
}
.final-cta-card > * { position: relative; }
.config-summary {
  margin-bottom: 22px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(216,255,54,0.08);
  border: 1px solid rgba(216,255,54,0.25);
}
.config-summary-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #d8ff36;
  margin-bottom: 4px;
}
.config-summary p { font-size: 0.8rem; line-height: 1.5; color: #e5e5e5; margin: 0; }
.lead-form { display: grid; gap: 16px; }
.form-row-split { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 480px) {
  .form-row-split { grid-template-columns: 1fr 1fr; }
}
.form-row { display: grid; gap: 6px; }
.form-row label { font-size: 0.85rem; color: var(--color-text-light-muted); font-weight: 600; }
.form-row input, .form-row textarea {
  font-family: var(--font-main);
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: var(--color-text-light);
  font-size: 0.96rem;
  resize: vertical;
  width: 100%;
}
.form-row input:focus, .form-row textarea:focus {
  outline: none;
  border-color: #d8ff36;
  box-shadow: 0 0 0 1px #d8ff36;
}
.form-budget-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.final-cta-submit {
  border-radius: 14px;
  padding: 17px 28px;
  font-size: 0.98rem;
  background: #d8ff36;
  border-color: #d8ff36;
  color: #0a0a0a;
  font-weight: 800;
}
.final-cta-submit:hover { background: #c6ec28; border-color: #c6ec28; }
.final-cta-microcopy { font-size: 0.72rem; color: rgba(255,255,255,0.35); text-align: center; margin-top: 12px; }
.form-status { min-height: 1.2em; font-size: 0.88rem; color: var(--color-accent); text-align: center; }

/* ===================== FOOTER ===================== */
.site-footer {
  background: #0a0a0a;
  color: var(--color-text-light-muted);
  padding: 40px 0;
  font-size: 0.88rem;
}
.footer-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding-bottom: 28px;
}
@media (min-width: 768px) {
  .footer-top { flex-direction: row; justify-content: space-between; }
}
.footer-brand { display: inline-flex; align-items: baseline; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.footer-brand-link { display: inline-flex; align-items: baseline; text-decoration: none; transition: opacity 0.2s ease; }
.footer-brand-link:hover { opacity: 0.9; }
.footer-brand-name { color: #fff; }
.footer-brand-suffix { font-weight: 400; color: #a3a3a3; margin-left: 6px; }
.footer-tagline { color: #737373; font-size: 0.76rem; margin-top: 2px; }
.footer-contact-link {
  display: block;
  margin-top: 12px;
  font-size: 0.78rem;
  color: #a3a3a3;
  transition: color 0.2s ease;
}
.footer-contact-link:hover { color: #fff; }
.footer-whatsapp-link { margin-top: 4px; }
.footer-whatsapp-link:hover { color: #d8ff36; }
.footer-icon { display: none; }
.footer-whatsapp-badge { display: none; }
.footer-legal-dot { display: none; }
@media (min-width: 768px) {
  .footer-col-legal { text-align: right; }
}
.footer-heading {
  color: #737373;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.footer-nav-link {
  display: block;
  font-size: 0.78rem;
  color: #a3a3a3;
  margin-bottom: 4px;
  transition: color 0.2s ease;
}
.footer-nav-link:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-copyright { font-size: 0.78rem; color: #737373; }
.footer-disclaimer { font-size: 0.7rem; color: #525252; line-height: 1.6; max-width: 32rem; }
@media (min-width: 768px) {
  .footer-disclaimer { text-align: right; }
}

/* ===================== RESPONSIVE ===================== */
@media (min-width: 768px) {
  section { padding: 88px 0; }
  .hero { padding: 72px 0 88px; }
  .hero-cta { flex-direction: row; align-items: center; }
  .pain-grid { grid-template-columns: repeat(3, 1fr); }
  .process-grid { grid-template-columns: repeat(4, 1fr); }
  .process-grid::before {
    top: 47px;
    bottom: auto;
    left: 12.5%;
    right: 12.5%;
    width: auto;
    height: 2px;
    transform: none;
    background: repeating-linear-gradient(to right, #e5e5e2 0 6px, transparent 6px 12px);
  }
  .video-wall-tile { width: 220px; }
  .proof-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .hero h1 { font-size: 3.4rem; }
  .hero-inner { align-items: center; }
  .hero-copy { transform: translateY(-56px); }
  /* Back to a stacked column at this width specifically (the 768px
     rule above puts the CTA button and WhatsApp link side by side,
     which is what tablet keeps) - stacked gives the WhatsApp link its
     own full-width row to sit on a single line under the button,
     with the Google rating row following underneath both. */
  .hero-cta { flex-direction: column; align-items: flex-start; }

  .video-wall-tile { width: 240px; }
  .configurator { padding: 32px; }
  .video-wall-wrapper { padding: 64px 0; }

  /* Compact-but-comfortable density pass so Block 2 + Block 3 sit
     close together on desktop, without touching their mobile/tablet
     spacing (which stays roomier since scrolling is expected there). */
  .pain { padding-top: 48px; padding-bottom: 16px; }
  .pain h2 { font-size: 1.5rem; margin-bottom: 12px; }
  .pain-grid { gap: 16px; margin-bottom: 16px; }
  .pain-card { padding: 24px; }
  .pain-icon { margin-bottom: 10px; }
  .pain-card h3 { font-size: 0.95rem; margin-bottom: 4px; }
  .pain-card p { font-size: 0.82rem; line-height: 1.5; }
  .pain-callout { padding: 8px 16px; }
  .pain-callout p { font-size: 0.82rem; }

  .process { padding-top: 16px; padding-bottom: 48px; }
  .process h2 { font-size: 1.5rem; margin-bottom: 12px; }
  .process-grid { gap: 16px; }
  .process-grid::before { top: 39px; }
  .process-step { padding: 24px; }
  .step-number { width: 28px; height: 28px; font-size: 0.7rem; margin-bottom: 8px; }
  .process-step h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
  .process-step p { font-size: 0.8125rem; line-height: 1.6; margin-bottom: 12px; }
  .step-pill { padding: 4px 10px; font-size: 0.6875rem; margin-top: 0; }
  .process-cta { margin-top: 20px; }
}

/* ===================== MOBILE OPTIMIZATION (<=767px) =====================
   Consolidated pass for modern phones (iPhone 17 Pro etc, ~393-402px):
   overflow guards, tighter section/card spacing, bigger tap targets, and
   a couple of layout swaps (touch-scroll carousel, sticky configurator
   total). Kept as one block at the end of the sheet, after every desktop
   breakpoint, so it wins the cascade for anything <=767px without having
   to touch the mobile-first rules those breakpoints build on. */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; width: 100%; }
  .container { padding: 0 16px; }
  section { padding: 48px 0; }
  .proof-title-break, .why-title-break { display: inline; }

  /* Touch targets */
  .btn { min-height: 44px; }
  .form-row input, .form-row textarea { min-height: 44px; }
  .config-stepper-btn { width: 36px; height: 36px; }

  /* Header - true fixed bar (not sticky) so it's pinned from the very
     top of the page, not just once scrolled past; .hero picks up the
     matching top padding below so its content doesn't start underneath
     it. */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(10,10,10,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: rgba(255,255,255,0.1);
  }
  .header-inner { min-height: 56px; padding: 0 16px; }

  /* Examples / video wall - hand off to native touch scroll-snap instead
     of the JS-driven auto-scroll marquee + mouse-only dock hover (both
     already skipped on this layout in script.js via isTouchLayout). */
  .proof h2 { font-size: 1.5rem; font-weight: 900; text-align: center; margin-bottom: 8px; }
  .proof-header { gap: 4px; margin-bottom: 20px; align-items: center; text-align: center; }
  .proof-sub { font-size: 0.75rem; line-height: 1.625; max-width: 20rem; margin: 0 auto 12px; }

  .video-wall-arrow { display: none; }
  .video-wall-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 24px 0;
  }
  /* Mandatory snap fighting animateScrollBy's own per-frame scrollLeft
     writes (the auto-advance tween below) is exactly what read as
     "jerky" - same underlying conflict as the one already fixed for
     the desktop wrapper, just still present here since manual swipe on
     mobile genuinely needs the snap. Switched off only for the
     duration of a script-driven tween, restored right after so a real
     swipe still snaps normally. */
  .video-wall-wrapper.is-wall-tweening { scroll-snap-type: none; }
  .video-wall-wrapper::-webkit-scrollbar { display: none; }
  .video-wall, .video-wall-tile { touch-action: pan-x; }
  .video-wall { will-change: auto; }
  /* Every soft edge/overlay layer in this tile removed on mobile - a
     scaled iframe, a bottom gradient overlay and two edge vignettes all
     compositing on top of each other while the row snap-scrolls is what
     was reading as a "black bar/seam" across the clip. Left with a
     plain bordered card and a crisp, unmodified video. */
  .video-wall-fade { display: none; }
  .video-wall-tile::before { display: none; }
  .video-wall-tag { display: none; }
  .video-wall-tile video { transform: none; }
  .video-wall-tile {
    width: 76vw;
    max-width: 290px;
    scroll-snap-align: center;
    /* Without this, a fast flick's momentum could carry the native
       snap-scroll straight past several cards before it settled,
       instead of always stopping at the very next one - "swipe once,
       move three" instead of one at a time. */
    scroll-snap-stop: always;
    background: #171717;
    border-color: rgba(255,255,255,0.1);
    box-shadow: none;
    /* Same easing curve as the Hero carousel (cubic-bezier(0.4,0,0.2,1))
       - this tile used to jump straight from 0.88 to 1.08 the instant
       is-video-active toggled, with no transition at all, which is what
       read as "jerky" once the auto-advance below started moving the
       scroll AND the scale at once. Halved twice from an initial
       0.5s/0.5s - the scale swap (stop the old clip, size up whichever
       one is now centered) kept reading as sluggish until it landed here. */
    transition: transform 0.125s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.125s ease, border-color 0.3s ease;
    /* Stronger than the shared base (0.95/1.05) so the centered card
       reads as clearly bigger on a small screen - the shared values
       were tuned for desktop's hover-magnify system stacking on top,
       which mobile doesn't have, so its own dock effect needed more
       contrast to carry the whole "this one's the focus" signal alone. */
    transform: scale(0.88);
    opacity: 0.6;
  }
  .video-wall-tile.is-video-active {
    transform: scale(1.08);
    opacity: 1;
    border-color: rgba(82,82,255,0.6);
    box-shadow: none;
  }
  /* .is-unmuted (playing with sound) is a base rule with no breakpoint
     of its own - its scale(1.2) assumes the desktop wrapper's 64px
     vertical padding has room to spare. This wrapper only has 24px, so
     that same scale pushed the tile past it and .video-wall-wrapper's
     overflow-y:hidden cropped the top and bottom clean off. Toned down
     to match .is-video-active's own mobile scale, with a border instead
     of a scale+glow to still read as "this one's playing". */
  .video-wall-tile.is-unmuted {
    transform: scale(1.08);
    opacity: 1;
    border-color: rgba(82,82,255,0.8);
    box-shadow: none;
  }
  .video-wall-progress-bar { display: block; }
  .video-wall { padding: 0 24px; gap: 16px; }

  .proof-disclaimer { margin-top: 16px; padding: 0 24px 24px; }
  .proof-disclaimer p { font-size: 0.5625rem; line-height: 1.5; color: #737373; }

  /* Configurator */
  .configurator { padding: 28px 16px; }
  .cfg-row { padding: 20px 0; }

  .cfg-row { padding: 24px 0; margin-bottom: 4px; }
  /* .cfg-label had no margin-bottom at all - fine on rows where a
     wrapping flex container's own gap happened to cover it (like the
     qty/tier split), but Language and Length sit directly under the
     label with nothing supplying that space, so the heading pressed
     straight into the buttons/cards below it. */
  .cfg-label { margin-bottom: 14px; }
  #languageChips { margin-bottom: 24px; }

  /* Creator tier - row layout (label+name left, multiplier right)
     instead of the stacked card, so 3 tiers don't eat half the screen. */
  .cfg-tier-grid { grid-template-columns: 1fr; gap: 8px; }
  .cfg-tier-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    padding: 14px 16px;
    border-radius: 12px;
  }
  .cfg-tier-top { gap: 2px; }
  .cfg-tier-tag { font-size: 0.5625rem; margin-bottom: 2px; }
  .cfg-tier-name { margin-top: 0; font-size: 0.75rem; line-height: 1.25; }
  .cfg-tier-mult { font-size: 1rem; margin-left: 12px; flex-shrink: 0; }

  /* Video length - one row of 3 compact cards. Taller min-height + a
     bottom-pinned description (margin-top: auto) so "Problem + Solution
     + CTA" has real room instead of hugging the card's bottom edge. */
  .cfg-length-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cfg-length-card {
    align-items: center;
    justify-content: space-between;
    text-align: center;
    min-height: 92px;
    padding: 12px;
  }
  .cfg-length-top { flex-direction: column; align-items: center; margin-bottom: 0; }
  .cfg-length-time { font-size: 1rem; font-weight: 900; line-height: 1; }
  .cfg-length-price { font-size: 0.75rem; margin-top: 4px; }
  .cfg-length-sub { font-size: 0.625rem; line-height: 1.2; margin-top: auto; padding-top: 4px; }
  .cfg-length-card.is-selected { border-width: 2px; }

  /* Language / placement chips - fixed grids instead of wrapped flex so
     rows stay even instead of ragged, with a comfortable tap height.
     Placements specifically get a taller target since their labels
     are the longest ("Meta Ads (IG & FB)" etc, shortened in the HTML
     too so it doesn't wrap and blow the row's height out unevenly). */
  #languageChips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #placementChips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cfg-chip { height: 40px; padding: 0 8px; font-size: 0.75rem; font-weight: 600; }
  #placementChips .cfg-chip { height: 44px; text-align: center; line-height: 1.2; }

  /* Hook / photo counters - explicit row-gap (independent of the
     row's own column-gap) so wrapped rows on narrow screens get real
     space between the description and the stepper underneath it. */
  .cfg-counter-row { row-gap: 12px; }
  .cfg-counter-sub { font-size: 0.6875rem; line-height: 1.5; margin-bottom: 4px; }

  /* Steppers - bigger tap targets, active feedback */
  .config-stepper-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    font-size: 1rem;
  }
  .config-stepper-btn:active { transform: scale(0.95); }
  .config-stepper-value { width: 32px; min-width: 32px; font-size: 1rem; font-weight: 900; }

  /* Add-ons - each row becomes its own tappable bordered card instead of
     a plain hairline list item. Title truncates with an ellipsis and
     the price is pinned nowrap, so a long title can never push the
     price into a second line or off the card. */
  .cfg-list { border-top: 0; }
  .cfg-list-item {
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 14px;
    gap: 12px;
    margin-bottom: 10px;
  }
  .cfg-list-item:has(input:checked) { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.03); }
  .cfg-list-item-main { flex: 1; min-width: 0; }
  .cfg-list-item-main input { width: 20px; height: 20px; border-radius: 6px; accent-color: #5252ff; flex-shrink: 0; }
  .cfg-list-item-main > span:last-child { flex: 1; min-width: 0; padding-right: 8px; }
  .cfg-list-item-title { display: block; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cfg-list-item-desc { font-size: 0.625rem; line-height: 1.25; margin-top: 2px; }
  .cfg-list-item-price { font-size: 0.78rem; font-weight: 800; color: #fff; white-space: nowrap; flex-shrink: 0; }

  /* Sticky total - position:sticky (not fixed) so it's pinned only
     while the configurator's own content is in view, scrolling away
     naturally after the disclaimer below it - a literal position:fixed
     bar would show up site-wide from page load, not just "inside the
     configurator" as intended. */
  .configurator-total {
    position: sticky;
    bottom: 0;
    z-index: 40;
    flex-wrap: nowrap;
    gap: 16px;
    margin: 20px -16px 0;
    padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
    background: rgba(10,10,10,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 0;
  }
  .configurator-total-label,
  .configurator-total-unit { display: none; }
  .configurator-total-info { justify-content: center; gap: 2px; }
  .configurator-total-eyebrow {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a3a3a3;
  }
  .configurator-total-price strong { font-size: 1.5rem; line-height: 1; }
  #configContinueBtn {
    flex-shrink: 0;
    padding: 12px 20px;
    border-radius: 12px;
    background: #5252ff;
    font-size: 0.75rem;
    box-shadow: 0 8px 20px -6px rgba(82,82,255,0.3);
  }
  #configContinueBtn:hover { background: #4343e0; }
  #configContinueBtn:active { transform: scale(0.98); }

  /* Why comparison - segmented tabs instead of 3 stacked full cards.
     Card visibility is driven by .is-why-active (toggled in script.js);
     .why-grid keeps display:grid from its base rule, one visible child
     just fills the single column. */
  .why h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: 16px; padding: 0 8px; }
  .why-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    max-width: 24rem;
    margin: 0 auto 20px;
    border-radius: 12px;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
  }
  .why-tab {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 500;
    color: #737373;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .why-tab:hover { color: #262626; }
  .why-tab.is-active { background: #fff; color: var(--color-text-dark); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

  /* The accent tab needs its own inactive style - the shared .why-tab
     inactive state (gray text, transparent bg) left it as near-white
     text on the light tab-strip background whenever another tab was
     selected, unreadable. It's always indigo now, just filled solid
     when active vs. a soft tinted outline when it isn't. */
  .why-tab-accent {
    background: rgba(82,82,255,0.1);
    color: #5252ff;
    border: 1px solid rgba(82,82,255,0.3);
    font-weight: 700;
  }
  .why-tab-accent:hover { background: rgba(82,82,255,0.2); color: #5252ff; }
  .why-tab-accent.is-active {
    background: #5252ff;
    color: #fff;
    border-color: transparent;
    font-weight: 800;
    box-shadow: 0 4px 10px -2px rgba(82,82,255,0.25);
  }
  .why-col { display: none; padding: 20px; }
  .why-col.is-why-active { display: flex; }
  .why-col-list { gap: 12px; margin-top: 16px; }

  /* FAQ - deep near-black background matching the header/footer tone
     (was --color-dark-2, a visibly lighter gray that read as a seam/
     stripe right under the blurred fixed header), plus one hairline
     accordion container instead of 8 separately bordered/gapped boxes. */
  .faq { background: #0a0a0a; }
  .faq h2 { font-size: 1.5rem; font-weight: 900; }
  .faq-sub { font-size: 0.75rem; margin-bottom: 20px; }
  .faq-list {
    gap: 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    background: rgba(23,23,23,0.5);
    overflow: hidden;
  }
  .faq-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .faq-item:last-child { border-bottom: 0; }
  .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    font-size: 0.8rem;
    line-height: 1.35;
    transition: background 0.15s ease;
  }
  .faq-item summary:hover { background: rgba(255,255,255,0.02); }
  /* Real SVG chevron (see .faq-chevron below) replaces the old ::after
     glyph entirely on mobile - a text character never centers exactly
     the same across fonts/renderers, which is what read as "off-center
     and dull". content:none removes the pseudo-element outright rather
     than leaving it sized-but-empty. */
  .faq-item summary::after,
  .faq-item[open] summary::after { content: none; }
  .faq-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #a3a3a3;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .faq-chevron svg { width: 14px; height: 14px; display: block; transition: transform 0.2s ease; }
  .faq-item[open] .faq-chevron {
    background: rgba(82,82,255,0.15);
    border-color: rgba(82,82,255,0.4);
    color: #5252ff;
  }
  .faq-item[open] .faq-chevron svg { transform: rotate(180deg); }
  .faq-item p {
    margin: 4px 16px 16px;
    padding-left: 12px;
    border-left: 2px solid #5252ff;
    font-size: 0.75rem;
    line-height: 1.625;
  }

  /* Header - compact bar, secondary CTA sized down. Logo is left
     untouched so it renders identically to desktop (no mobile override). */
  .header-cta {
    min-height: auto;
    padding: 6px 14px;
    font-size: 0.6875rem;
    font-weight: 600;
  }

  /* Hero - compress vertical rhythm so the offer, CTA, center video and
     the marquee all land closer to one screen; exact fit still depends
     on device chrome, verify on a real phone/DevTools. */
  .hero { padding: 80px 0 32px; }
  .hero-inner { gap: 20px; }
  .btn-whatsapp { font-size: 0.6875rem; } /* also used by the final-cta WhatsApp card */

  /* Swap the wide-viewport hero copy for the mobile-only centered
     composition (separate markup - see the HTML comment above
     .hero-copy-mobile for why this isn't just a reflow of one block). */
  .hero-copy-desktop { display: none; }
  .hero-copy-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
    padding: 0 8px;
  }
  .eyebrow-mobile {
    display: inline-flex;
    align-items: center;
    padding: 3.2px 9.6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #d4d4d4;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
  }
  .hero-h1-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
  }
  /* Guaranteed single line at this size/width - this is the fix for
     "Ads" orphaning onto its own line as a lopsided third line. */
  .hero-h1-mobile > span:first-child { white-space: nowrap; }
  .h1-gradient-mobile {
    display: block;
    margin-top: 4px;
    color: #5252ff;
  }
  .hero-sub-mobile {
    font-size: 0.75rem;
    line-height: 1.625;
    color: #a3a3a3;
    max-width: 320px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .hero-cta-mobile { display: flex; flex-direction: column; align-items: center; }
  .btn-mobile-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 290px;
    padding: 12px 24px;
    border-radius: 12px;
    background: #5252ff;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 24px -6px rgba(82,82,255,0.3);
    transition: background 0.15s ease;
  }
  .btn-mobile-primary:hover { background: #4343e0; }

  .hero-mobile-google {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #d4d4d4;
  }
  .hero-mobile-google-stars { display: inline-flex; align-items: center; gap: 1px; color: #FBBC05; }
  .hero-mobile-google-dot { color: #737373; }

  .hero-mobile-whatsapp-line {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.6875rem;
    color: #a3a3a3;
  }
  .hero-whatsapp-word-mobile {
    color: var(--color-text-light-muted);
    animation: whatsappFlickerLime 7s steps(1, end) infinite;
  }

  /* Carousel + disclaimer: the 10% rightward shift is a desktop balance
     trick (offsets against the wider copy column beside it) - on the
     single-column mobile layout it just pushes both off-center and
     clips the disclaimer against the viewport edge, so it's zeroed out
     here for both (they always move together). Center tile is height-
     driven (vh-based, ~20% bigger than the previous pass) instead of
     width-driven so it can't push the marquee below the fold. Side
     tiles keep the same fixed offset and are now allowed to bleed past
     the viewport edge (.hero already clips horizontally) - that peek
     is the intended "there's a carousel here" cue, not a bug. */
  .hero-carousel {
    height: 53vh;
    max-height: 460px;
    min-height: 330px;
    transform: none;
  }
  .carousel-tile[data-pos="center"] { width: auto; height: 100%; }
  .carousel-tile[data-pos="left"] { transform: translate(calc(-50% - 158px), -50%) scale(0.82); }
  .carousel-tile[data-pos="right"] { transform: translate(calc(-50% + 158px), -50%) scale(0.82); }
  .stat-badge { top: auto; left: 50%; bottom: 12px; transform: translateX(-50%); }

  /* Unlike the old play/pause toggle, tapping this now turns sound on -
     the icon stays visible here (unlike the previous icon-less mobile
     treatment) so there's still a visual cue for what tapping the
     center clip actually does. */

  .hero-video-disclaimer {
    width: 100%;
    max-width: none;
    margin: 16px auto 0;
    padding: 0 24px;
    transform: none;
  }
  .hero-video-disclaimer p { font-size: 0.5625rem; color: #737373; }

  /* Marquee - sits right after the disclaimer in document order already;
     .hero's own bottom padding (above) is what keeps its border/text
     from reading as clipped by the white section right after it. */
  .hero-marquee { margin-top: 12px; padding: 10px 0; }

  /* "Sound familiar?" pain cards - compact horizontal icon+title head,
     tighter padding/gap, indented copy so it lines up under the title
     rather than the icon. Desktop keeps its existing icon-above-title
     card (this head wrapper has no desktop rule of its own). */
  .pain h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: 20px; padding: 0 4px; }
  .pain-grid { gap: 12px; margin-bottom: 16px; }
  .pain-card { padding: 16px; border-radius: 12px; border-color: rgba(0,0,0,0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
  .pain-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
  .pain-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.06);
    color: #404040;
    margin-bottom: 0;
  }
  .pain-card h3 { font-size: 0.86rem; line-height: 1.25; margin-bottom: 0; }
  .pain-card p { font-size: 0.75rem; line-height: 1.625; color: #737373; padding-left: 44px; }

  /* Callout becomes a dark, contrasting conclusion instead of a pale
     plate that blends into the white cards above it - a pulsing dot
     (same keyframe as the header status pill) plus a bolder lead-in
     line make it read as the bridge into "How it works" below. */
  .pain-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 16px;
    margin-top: 16px;
    border-radius: 12px;
    background: #171717;
    border: 1px solid #262626;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  .pain-callout-dot {
    display: block;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: #5252ff;
    flex-shrink: 0;
    animation: statPulse 1.8s ease-in-out infinite;
  }
  .pain-callout p { color: #d4d4d4; font-size: 0.75rem; line-height: 1.625; }
  .pain-callout strong { color: #fff; }

  /* "How it works" - swap the 4 isolated cards for a connected vertical
     timeline (separate markup from .process-grid, which is hidden here -
     see the HTML comment above .process-timeline-mobile for why). */
  .process { padding-top: 8px; }
  .process h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: 24px; padding: 0 4px; }
  .process-grid { display: none; }
  .process-timeline-mobile {
    display: block;
    position: relative;
    padding-left: 4px;
  }
  .process-timeline-spine {
    position: absolute;
    left: 19px;
    top: 14px;
    bottom: 24px;
    width: 2px;
    background: linear-gradient(to bottom, #5252ff, #a5b4fc, #e5e5e5);
  }
  .process-timeline-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
  }
  .process-timeline-step:last-child { margin-bottom: 0; }
  .process-timeline-number {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid #5252ff;
    color: #5252ff;
    font-weight: 800;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }
  .process-timeline-card {
    width: 100%;
    background: var(--color-white);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .process-timeline-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }
  .process-timeline-card-head h3 { font-size: 0.86rem; font-weight: 700; color: var(--color-text-dark); }
  .process-timeline-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f5f5f5;
    color: #525252;
    font-size: 0.625rem;
    font-weight: 500;
    white-space: nowrap;
  }
  .process-timeline-card p { font-size: 0.75rem; line-height: 1.625; color: #737373; text-align: left; }

  /* Contact / lead form - the trust bullets repeat what's already been
     said earlier on the page by this point, and the subtitle duplicates
     the new guarantee badge's "2 business hours" claim, so both are
     dropped here in favor of the compact badge + form itself. The
     bulky icon+flicker WhatsApp card is removed entirely on this
     layout - a single slim WhatsApp line lives under the form instead
     (.final-cta-whatsapp-line, below). .final-cta-grid's own 48px gap
     (a sane amount when it's holding a full column of copy) is what
     was actually leaving the big dark gap once this column shrank
     down to just the eyebrow/h2/badge. */
  .final-cta-grid { gap: 16px; }
  .final-cta-sub { display: none; }
  .final-cta-trust { display: none; }
  .final-cta-guarantee { margin-bottom: 16px; }
  .final-cta-whatsapp-card { display: none; }

  .final-cta-card { padding: 16px; border-radius: 20px; }
  .form-row label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
  .form-row input, .form-row textarea {
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(10,10,10,0.8);
    font-size: 0.75rem;
  }
  .form-row textarea { height: 96px; padding: 12px 14px; resize: none; }
  .form-row input:focus, .form-row textarea:focus { border-color: #5252ff; box-shadow: 0 0 0 1px #5252ff; }
  .form-budget-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #budgetChips .cfg-chip {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
  }
  #budgetChips .cfg-chip.is-active { background: #5252ff; border-color: #5252ff; color: #fff; }
  .final-cta-submit {
    padding: 14px 28px;
    border-radius: 12px;
    background: #5252ff;
    border-color: #5252ff;
    color: #fff;
    font-size: 0.86rem;
    box-shadow: 0 12px 24px -6px rgba(82,82,255,0.3);
  }
  .final-cta-submit:hover { background: #4343e0; border-color: #4343e0; }
  .final-cta-submit:active { transform: scale(0.99); }
  .final-cta-microcopy { font-size: 0.625rem; margin-top: 12px; }

  .final-cta-whatsapp-line {
    display: block;
    text-align: center;
    margin-top: 5.88px;
    font-size: 0.6875rem;
    color: #a3a3a3;
  }

  /* Footer - compact single-column layout: two-tone brand mark, icon-led
     contact links instead of a plain stacked list, and an inline Legal
     row (dot separator, no heading) instead of a second vertical list.
     footer-top's own row-gap is zeroed here since each block now carries
     its own explicit margin-bottom, matching the tighter mobile rhythm. */
  .footer-top { gap: 0; padding-bottom: 0; }
  .footer-col-brand { margin-bottom: 24px; }
  .footer-tagline { font-size: 0.75rem; color: #737373; margin-top: 4px; margin-bottom: 16px; }

  .footer-contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    font-size: 0.75rem;
    color: #d4d4d4;
  }
  .footer-contact-link + .footer-contact-link { margin-top: 8px; }
  .footer-icon { display: inline-flex; flex-shrink: 0; }
  .footer-email-icon { color: #737373; }
  .footer-whatsapp-icon { color: #34d399; }
  .footer-whatsapp-prefix { display: none; }
  .footer-whatsapp-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.2);
    color: #34d399;
    font-size: 0.625rem;
    font-weight: 600;
  }

  .footer-col-legal {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    text-align: left;
  }
  .footer-heading { display: none; }
  .footer-nav-link { display: inline; margin-bottom: 0; font-size: 0.75rem; color: #a3a3a3; text-underline-offset: 4px; }
  .footer-nav-link:hover { color: #fff; text-decoration: underline; }
  .footer-legal-dot { display: inline; color: #525252; }

  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; gap: 0; }
  .footer-copyright { font-size: 0.6875rem; color: #737373; margin-bottom: 8px; }
  .footer-disclaimer { font-size: 0.5625rem; color: #525252; max-width: 24rem; }
  .site-footer { padding-bottom: 32px; }
}

@media (min-width: 640px) and (max-width: 767px) {
  .hero-marquee { margin-top: 16px; }
  .hero-copy-mobile { max-width: 28rem; }
  .hero-h1-mobile { font-size: 28px; }
  .hero { padding-top: 96px; }
  .site-footer { padding-bottom: 40px; }
}

/* ===================== TABLET (iPad Mini / iPad Pro, 768-1023px) =====================
   Everything below this point is scoped strictly to the tablet band. The
   768px+ rules elsewhere in this file were tuned either for the mobile
   hairline layout's upper edge or for full desktop width (1024px+), so
   several of them (process-grid's 4-across, pricing-grid's 3-across, the
   hero carousel's wide desktop sizing, final-cta's single column) read as
   either too cramped or as stretched single-column mobile cards at this
   in-between width. This block overrides just those, without touching the
   mobile (<768) or desktop (1024+) rules on either side of it. */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 1. Global container - caps content width so nothing stretches edge to
     edge across a 768-1024px viewport. */
  .container { max-width: 768px; padding: 0 32px; }
  .proof-title-break, .why-title-break { display: inline; }
  .hero-h1-tablet-break { display: inline; }

  /* 2. Header */
  .header-inner { padding: 14px 32px; }

  /* 3. Hero - centered single-column composition instead of the
     left-aligned desktop layout (which assumes a second column beside
     it), plus a carousel resized for this narrower width. */
  .hero-copy-desktop {
    max-width: 42rem;
    margin: 0 auto;
    text-align: center;
  }
  .hero-copy-desktop .eyebrow { margin-left: auto; margin-right: auto; }
  .hero h1 { font-size: 2.25rem; font-weight: 900; }
  .hero-sub {
    font-size: 0.875rem;
    color: #a3a3a3;
    max-width: 32rem;
    margin: 12px auto 24px;
    text-align: center;
  }
  .hero-sub-break { display: inline; }
  .hero-cta {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 28rem;
    margin: 24px auto;
  }
  .hero-social-proof { margin-left: auto; margin-right: auto; }

  /* WhatsApp link - icon dropped entirely, text shortened to a single
     non-wrapping line, arrow added; a shorter phrase (not just
     white-space:nowrap on the old one) is what actually keeps this
     fitting on one line next to the CTA button in the row's available
     width. */
  .btn-whatsapp-icon { display: none; }
  .btn-whatsapp-text-full { display: none; }
  .btn-whatsapp-text-short { display: inline; }
  .btn-whatsapp-arrow { display: inline; color: #34d399; font-weight: 700; margin-left: 2px; }
  .btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0;
    border: 0;
  }
  .btn-whatsapp:hover { color: #fff; background: transparent; border-color: transparent; filter: none; }

  .hero-carousel { max-width: 600px; height: 520px; transform: none; }
  .carousel-tile { width: 280px; }
  .carousel-tile[data-pos="left"],
  .carousel-tile[data-pos="right"] { opacity: 0.6; }
  .carousel-tile[data-pos="left"] { width: 200px; transform: translate(calc(-50% - 190px), -50%) scale(0.95); }
  .carousel-tile[data-pos="right"] { width: 200px; transform: translate(calc(-50% + 190px), -50%) scale(0.95); }
  .stat-badge { top: calc(50% + 236px); left: calc(50% - 150px); }
  .hero-video-disclaimer { transform: none; }

  /* Tablet wrapper - the min-height:100vh + justify-content:center
     "arts board" centering from the first pass is what was actually
     producing the white gap reported here: once the cards inside got
     compacted over the last couple of edits, the leftover viewport
     space that centering distributes above/below the content grew into
     a visible band of plain (unstyled) white sitting right before the
     dark Proof section. Dropped back to normal document flow - width
     is still handled by the sitewide .container override above. */
  .pain-process-tablet-wrap { display: block; }

  /* 4. Sound familiar? - premium white cards (soft shadow, amber icon
     chip) instead of the plain bordered boxes from the previous pass. */
  .pain { padding-top: 32px; padding-bottom: 0; margin: 0; }
  .pain h2 { font-size: 1.875rem; font-weight: 900; color: #171717; letter-spacing: -0.025em; margin-bottom: 20px; }
  .pain-grid { gap: 16px; margin-bottom: 0; }
  .pain-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    border-radius: 16px;
    border-color: rgba(229,229,229,0.9);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  }
  .pain-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255,251,235,0.8);
    border: 1px solid rgba(253,230,138,0.6);
    color: #d97706;
    font-size: 0.875rem;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .pain-card h3 { font-size: 0.875rem; font-weight: 900; color: #171717; line-height: 1.375; margin-bottom: 6px; }
  .pain-card p { font-size: 0.75rem; color: #737373; line-height: 1.625; }

  /* Callout - soft indigo bridge between the two sections, not the dark
     high-contrast pill from the previous pass (too heavy against this
     otherwise light, airy tablet composition). */
  .pain-callout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: left;
    padding: 16px;
    margin-top: 16px;
    margin-bottom: 40px;
    border-radius: 16px;
    background: rgba(238,242,255,0.5);
    border: 1px solid rgba(224,231,255,0.8);
    box-shadow: none;
  }
  .pain-callout-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5252ff;
    flex-shrink: 0;
    animation: statPulse 2s ease-in-out infinite;
  }
  .pain-callout p { color: #404040; font-size: 0.75rem; line-height: 1.5; }
  .pain-callout strong { color: #5252ff; }

  /* 5. How it works - same 2x2 grid, restyled to match the premium card
     language above: shadow instead of flat border, a grid-template-areas
     layout (rather than the old top-to-bottom flex stack) so the badge
     can sit in the header row next to the number without touching the
     DOM order the desktop layout still relies on. */
  .process { margin: 0; padding-top: 0; padding-bottom: 32px; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .process-grid::before { display: none; }
  .process-step {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "number badge" "title title" "desc desc";
    align-items: start;
    gap: 0;
    padding: 20px;
    border-radius: 16px;
    min-height: 175px;
    text-align: left;
    border-color: rgba(229,229,229,0.9);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    transition: border-color 0.2s ease;
  }
  .process-step:hover { border-color: rgba(82,82,255,0.4); box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
  .step-number {
    grid-area: number;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    color: #5252ff;
    font-weight: 900;
    font-size: 0.75rem;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .step-pill {
    grid-area: badge;
    align-self: start;
    justify-self: end;
    margin-top: 0;
    padding: 4px 10px;
    border-radius: 8px;
    background: #f5f5f5;
    border: 1px solid rgba(229,229,229,0.5);
    color: #525252;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: normal;
  }
  .process-step h3 { grid-area: title; font-size: 1rem; font-weight: 900; color: #171717; line-height: 1.375; margin-bottom: 6px; }
  .process-step p { grid-area: desc; font-size: 0.75rem; color: #737373; line-height: 1.625; margin-bottom: 0; }

  /* 4. Pill CTA into Pricing - light bordered B2B button, not the dark
     filled pill from the previous pass (same "too heavy" issue as the
     callout above). */
  .process-cta { margin-top: 32px; }
  .process-cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    background: #fff;
    color: #262626;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(229,229,229,0.9);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .process-cta a:hover { color: #5252ff; border-color: rgba(82,82,255,0.4); }
  .process-cta a:active { transform: scale(0.98); }
  .process-cta-arrow-right { display: none; }
  .process-cta-arrow-down { display: inline; color: #5252ff; }

  /* 6. Portfolio - full-height "showcase reel". .proof itself owns the
     min-height:100vh + dark canvas + glow; .proof .container (its only
     real child - header/carousel/disclaimer are all grandchildren, not
     direct children of .proof) is what actually does the flex
     alignment the spec describes for the section. justify-between (the
     previous pass) pushed the header and disclaimer apart from the
     carousel into two big empty bands of bare dark canvas once the
     content itself didn't fill a full viewport height - justify-center
     instead pulls all three into one tight, vertically-centered group. */
  .proof {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 32px;
    padding-bottom: 32px;
    background: #0a0a0c;
  }
  .proof .container {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  /* Header - centered single column (badge, title, sub, CTA stacked in
     that order) instead of the left-text/right-button row used above
     1024px. DOM order already matches (the text block comes before the
     CTA link), so this only needs flex-direction + centering. */
  .proof-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 36rem;
    margin: 0 auto 32px;
    gap: 0;
  }
  .proof-eyebrow { margin-left: auto; margin-right: auto; padding: 6px 14px; font-size: 0.75rem; color: #d4d4d4; }
  .proof h2 { font-size: 2.375rem; font-weight: 900; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 10px; }
  .proof-sub { font-size: 0.875rem; color: #d4d4d4; max-width: 24rem; margin-left: auto; margin-right: auto; line-height: 1.625; margin-bottom: 16px; }
  .proof-cta {
    margin: 0 auto;
    padding: 12px 24px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.8125rem;
  }
  .proof-cta:hover { background: rgba(255,255,255,0.1); }
  .proof-cta:active { transform: scale(0.95); }

  /* Reel cards - a mix of the mobile carousel's own polish (finger-
     swipe snaps one card at a time, the centered card is clearly
     bigger, the 5s auto-advance + its countdown bar) and the desktop
     arrows' paging distance (3 cards per click, via script.js's
     ARROW_STEP - tablet still counts as "not mobile" there). Sizing/
     radius stays whatever this breakpoint already had. */
  .video-wall-tile {
    width: 250px;
    border-radius: 24px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition: transform 0.125s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.125s ease, border-color 0.3s ease;
    transform: scale(0.88);
    opacity: 0.6;
  }
  .video-wall-tile.is-video-active {
    transform: scale(1.08);
    opacity: 1;
  }
  .video-wall-tile.is-unmuted {
    transform: scale(1.08);
    opacity: 1;
    box-shadow: none;
  }
  .video-wall-progress-bar { display: block; }
  .video-wall-wrapper { scroll-snap-type: x mandatory; }
  .video-wall-wrapper.is-wall-tweening { scroll-snap-type: none; }
  .video-wall-arrow {
    width: 44px;
    height: 44px;
    background: rgba(23,23,23,0.8);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
  }
  .video-wall-arrow:hover { background: #262626; }

  .proof-disclaimer { margin-top: 24px; margin-left: auto; margin-right: auto; max-width: 32rem; padding-bottom: 8px; }
  .proof-disclaimer p { font-size: 0.75rem; color: #a3a3a3; line-height: 1.625; }

  /* 7. Pricing - narrowed to 2 columns in a centered rail instead of 3
     full-width columns (which leave each of the 3 cards too cramped at
     this width). The 3rd (retainer) card used to just wrap to its own
     row, alone, at half the grid's width - a visibly orphaned card
     with a wall of empty space beside it. It now spans both columns
     and switches from the stacked top/tray layout to a side-by-side
     banner (badges/price/CTA on the left, the checklist on the right,
     divided by a vertical rule) - the two-tier layout only ever
     existed to stay narrow-column-friendly, and a full-width card has
     no need for it. */
  .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 46rem; margin-left: auto; margin-right: auto; }
  .pricing-card-wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  .pricing-card-wide .pricing-card-top {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .pricing-card-wide .pricing-card-top-header { margin-bottom: 14px; }
  .pricing-card-wide .pricing-card-heading { margin-bottom: 16px; }
  .pricing-card-wide .pricing-card-top .btn { width: auto; align-self: flex-start; }
  .pricing-card-wide .pricing-card-tray {
    flex: 1 1 50%;
    justify-content: center;
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,0.1);
  }

  /* 8. Configurator */
  .configurator { max-width: 42rem; padding: 32px; }
  #languageChips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  #placementChips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

  /* 9. Why - already a full 3-column comparison table from 768px up
     (.why-grid) with the segmented tabs already hidden outside the
     mobile band (.why-tabs). What wasn't scoped to any breakpoint was
     .why-grid's own align-items:start, which lets each card size to
     its own content instead of stretching to match its row - fine at
     desktop width where all 3 headings happen to wrap the same, but at
     this narrower column width "Freelancer Marketplaces" and "Cheap
     per asset, but high self-management" wrap onto more lines than the
     other two cards' shorter headings, so the cards ended up visibly
     different heights with their checklists starting at different
     points. Stretching the row plus a taller shared header floor (big
     enough for the narrowest column's worst-case wrap) fixes both. */
  .why-grid { align-items: stretch; }
  .why-col-head { min-height: 110px; }
  /* Centered on the narrow tablet card instead of the fixed 24px-from-
     left position that works fine on a much wider desktop card, where
     it doesn't read as visibly off-balance the way it does here. */
  .why-recommended { left: 50%; transform: translateX(-50%); }

  /* 10. FAQ - narrower centered column plus the same hairline
     accordion (divider lines instead of separately bordered/gapped
     boxes) already used on mobile, reused here rather than rebuilt. */
  .faq .container { max-width: 42rem; }
  .faq-list {
    gap: 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    background: rgba(23,23,23,0.5);
    overflow: hidden;
  }
  .faq-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .faq-item:last-child { border-bottom: 0; }
  .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    transition: background 0.15s ease;
  }
  .faq-item summary:hover { background: rgba(255,255,255,0.02); }
  .faq-item summary::after,
  .faq-item[open] summary::after { content: none; }
  .faq-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #a3a3a3;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .faq-chevron svg { width: 14px; height: 14px; display: block; transition: transform 0.2s ease; }
  .faq-item[open] .faq-chevron {
    background: rgba(82,82,255,0.15);
    border-color: rgba(82,82,255,0.4);
    color: #5252ff;
  }
  .faq-item[open] .faq-chevron svg { transform: rotate(180deg); }
  .faq-item p {
    margin: 0 20px 18px;
    padding-left: 12px;
    border-left: 2px solid #5252ff;
  }

  /* 11. Contact / lead form - 5:7 two-column split instead of the
     single column that otherwise only breaks into columns at 1024px. */
  .final-cta-grid { grid-template-columns: 5fr 7fr; gap: 32px; align-items: start; }
  /* Grid items default to min-width:auto, meaning the 7fr track can't
     actually shrink past its content's natural (unwrapped) minimum
     width - and .btn's own white-space:nowrap makes the German submit
     button's text ("Kostenlose Analyse Ihrer aktuellen Video-Ads")
     refuse to wrap at all, so that one line's width was what was
     forcing the whole card - and the grid track under it - wider than
     the container, pushing the card visibly off the right edge. */
  .final-cta-card { min-width: 0; }
  .final-cta-submit { white-space: normal; text-align: center; }
  /* Name/Email revert to stacked - .form-row-split's own min-width:480px
     switch only checks viewport width, not the actual form column width.
     At this width the 7fr column is ~330-390px wide (container capped
     to 768px, then split 5:7, then card padding), so the two-up split
     it fires unconditionally squeezes both fields to ~150px - too
     cramped to type an email into. Real desktop has a wide enough
     single form column that the same rule is fine there untouched. */
  .form-row-split { grid-template-columns: 1fr; }

  /* The lime submit button/focus rings and flat budget-chip row below
     are the same base (non-breakpointed) styling desktop still uses -
     mobile already moved to the site's actual brand purple and a 2x2
     budget grid instead of that leftover lime, which reads as an
     off-brand accent this size and this close to everything else on
     the card. Reusing mobile's own recipe rather than inventing a
     third variant. */
  .form-row label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a3a3a3;
  }
  .form-row input, .form-row textarea {
    height: 48px;
    padding: 0 16px;
    border-radius: 12px;
    background: rgba(23,23,23,0.9);
    border-color: rgba(255,255,255,0.1);
    font-size: 0.8125rem;
  }
  .form-row textarea { height: 112px; padding: 14px 16px; resize: none; }
  .form-row input:focus, .form-row textarea:focus { border-color: #5252ff; box-shadow: 0 0 0 1px #5252ff; }
  .form-budget-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #budgetChips .cfg-chip {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
  }
  #budgetChips .cfg-chip.is-active { background: #5252ff; border-color: #5252ff; color: #fff; }
  .final-cta-submit {
    border-radius: 16px;
    padding: 16px 28px;
    background: #5252ff;
    border-color: #5252ff;
    color: #fff;
    font-size: 0.86rem;
    box-shadow: 0 12px 24px -6px rgba(82,82,255,0.3);
  }
  .final-cta-submit:hover { background: #4343e0; border-color: #4343e0; }
  .final-cta-submit:active { transform: scale(0.99); }

  /* .final-cta-guarantee restates the exact same "2 business hours"
     promise .final-cta-sub already opens with, one element above it -
     harmless duplication at desktop's wider column where the two never
     visually compete, but here they sit right on top of each other. */
  .final-cta-guarantee { display: none; }

  /* WhatsApp card: a smaller, quieter pill instead of the bulky bordered
     block desktop uses - the flickering brand icon replaced with a
     plain pulsing status dot (a lighter "someone's actually there"
     signal than an animated logo demands at this size). */
  .final-cta-whatsapp-card {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    gap: 12px;
    /* .btn-whatsapp-lime's own flicker keyframes nudge this element's
       color/filter/position every 7s - fine for the flashy lime icon
       version, but fights the calm, static pulsing-dot redesign below. */
    animation: none;
  }
  /* Overrides the base hover rule's lime border+background (shared
     with .btn-whatsapp-lime) - this redesign drops the lime accent
     entirely in favor of the emerald "online" dot, so hover needs its
     own matching color instead of leftover lime peeking through. */
  .final-cta-whatsapp-card:hover { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.05); }
  .final-cta-whatsapp-card svg { display: none; }
  .final-cta-whatsapp-card::before {
    content: "";
    position: relative;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 rgba(16,185,129,0.6);
    animation: whatsappDotPing 1.8s ease-in-out infinite;
  }
  .final-cta-whatsapp-card span { font-size: 0.75rem; }
  .final-cta-whatsapp-card strong { display: block; color: #d4d4d4; font-weight: 600; margin-bottom: 1px; }
  .final-cta-whatsapp-subtext { display: block; color: #34d399; font-weight: 700; }
  .final-cta-whatsapp-card:hover .final-cta-whatsapp-arrow { color: #34d399; transform: translateX(3px); }
  @keyframes whatsappDotPing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
    50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
  }

  /* 12. Footer - already flex row + space-between from 768px up
     (.footer-top / .footer-bottom); only the vertical rhythm needs
     trimming to match this band's tighter py-8. */
  .site-footer { padding: 32px 0; }
}

/* ===================== THANK YOU PAGE ===================== */
.thankyou-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #303030 0%, #262626 55%, #1c1c1c 100%);
  color: var(--color-text-light);
  padding: 96px 0;
  min-height: 64vh;
  display: flex;
  align-items: center;
}
.thankyou-inner {
  /* .thankyou-section is display:flex, and a flex item's default
     min-width:auto refuses to shrink below its content's intrinsic
     width - without this override, the nowrap WhatsApp text below
     forced this whole column (and every viewport) to a fixed ~441px
     minimum, silently clipped by the section's own overflow:hidden
     instead of actually fitting the real viewport width. */
  min-width: 0;
  max-width: 560px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.thankyou-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(79,70,229,0.15);
  border: 1px solid rgba(79,70,229,0.4);
  color: var(--color-accent);
  font-size: 1.8rem;
  margin-bottom: 24px;
}
.thankyou-section h1 {
  /* Sized to keep the EN copy ("Thanks! Your request just landed.")
     on one line down to narrow phones - the German version is
     noticeably longer, so it gets its own smaller sizing below via
     the html[lang="de"] scope rather than sharing this size and
     wrapping. */
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: #fff;
}
@media (min-width: 768px) {
  /* Tablet and desktop share the same ~560px container width (see
     .thankyou-inner's max-width), so one size covers both - a further
     desktop-only bump here is what caused the 2-line wrap on desktop
     before, since the container never actually grows past tablet's. */
  .thankyou-section h1 { font-size: 2rem; }
}
html[lang="de"] .thankyou-section h1 { font-size: 0.85rem; }
@media (min-width: 768px) {
  html[lang="de"] .thankyou-section h1 { font-size: 1.4rem; }
}
.thankyou-sub {
  font-size: 1rem;
  color: var(--color-text-light-muted);
  line-height: 1.6;
  margin-bottom: 32px;
}
/* Self-contained - deliberately does NOT reuse .final-cta-whatsapp-card,
   which reskins itself per breakpoint (icon swapped for a pulsing dot on
   tablet, hidden under 768px) for reasons specific to the homepage's
   final-CTA layout. This page wants one identical look and a single
   unwrapped line of text at every width instead. */
.thankyou-whatsapp {
  display: flex;
  align-items: center;
  gap: 10px;
  /* fit-content: only as wide as the (single-line) text needs, capped
     at the parent's real available width - reliable now that
     .thankyou-inner's own min-width:0 fix (above) stops that parent
     from inflating past the viewport in the first place. */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 24px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.thankyou-whatsapp:hover { border-color: rgba(216,255,54,0.4); background: rgba(216,255,54,0.05); }
.thankyou-whatsapp svg { flex-shrink: 0; color: #d8ff36; }
.thankyou-whatsapp-text {
  /* min-width:0 overrides the flex-item default of min-width:auto,
     which otherwise refuses to shrink below the nowrap text's full
     intrinsic width and pushes the whole card past the viewport on
     narrow phones - same root cause as the tablet contact-form
     overflow fixed earlier on the homepage. Letting this span (and
     only this span) shrink/ellipsis keeps the row a true single line
     everywhere, with graceful truncation as the last resort on
     extremely narrow screens instead of page-level horizontal scroll. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  color: #e5e5e5;
}
.thankyou-whatsapp-text strong { color: #fff; font-weight: 700; }
.thankyou-whatsapp-arrow {
  flex-shrink: 0;
  font-size: 1.05rem;
  color: var(--color-text-light-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
.thankyou-whatsapp:hover .thankyou-whatsapp-arrow { color: #d8ff36; transform: translateX(3px); }
@media (max-width: 480px) {
  /* The full-length phrase plus icon and arrow simply doesn't fit one
     line at a legible size below ~480px - the icon is dropped here
     (decorative, not essential info) to buy back enough width to keep
     the arrow and the full text on a single line at a still-readable
     size instead of shrinking the font to the point of illegibility. */
  .thankyou-whatsapp { gap: 5px; padding: 12px 10px; }
  .thankyou-whatsapp svg { display: none; }
  .thankyou-whatsapp-text { font-size: 0.6rem; }
  .thankyou-whatsapp-arrow { font-size: 0.82rem; }
}
.thankyou-back {
  display: inline-block;
  font-size: 0.86rem;
  color: var(--color-text-light-muted);
  transition: color 0.2s ease;
}
.thankyou-back:hover { color: #fff; }
.thankyou-redirect-note {
  display: block;
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--color-text-light-muted);
  opacity: 0.7;
}