/* ============================================================
   Sabiá — Landing Page V1
   styles.css  — DARK-FIRST (on-brand)

   Colors & typography follow the official "Manual da Marca".
   Visual direction follows the Sabiá brand style: deep-navy base,
   dotted texture, vibrant accents (teal / coral / amber / blue),
   teal section headings, full-bleed colored blocks, mascot present.

   Organization:
     1. Design tokens
     2. Base / reset
     3. Layout helpers (container, section, section headings)
     4. Buttons / CTA
     5. Header / navigation
     6. Hero
     7. Client logos
     8. Cards (problem / testimonials)
     9. Steps (how it works / implementation)
    10. Split sections (employee / compliance)
    11. Metrics
    12. Tags / feature lists
    13. FAQ
     14. Contact / Tally
     15. Footer
     15.1 Legal pages
     15.2 Thank-you page (Tally redirect)
     16. Colored full-bleed section overrides
     17. Responsive
     18. Reduced motion
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS — official brand palette
   ------------------------------------------------------------ */
:root {
  /* Brand colors (Manual da Marca) */
  --color-navy-deep: #000036;   /* page base */
  --color-navy: #152a57;
  --color-navy-2: #25345c;
  --color-blue: #006faf;
  --color-blue-bright: #0086be;
  --color-coral: #f05c37;       /* warm accent / CTA */
  --color-coral-dark: #d94a27;
  --color-amber: #f9a731;
  --color-teal: #6accb9;        /* mint — headings/accents on dark */
  --color-teal-bright: #8bdcc9;
  --color-surface-dark: #07263a; /* header / footer / matches dark logo lockup */

  /* Dark-mode surfaces & text */
  --surface-panel: rgba(255, 255, 255, 0.05);
  --surface-border: rgba(255, 255, 255, 0.12);
  --text-on-dark: rgba(255, 255, 255, 0.86);
  --text-on-dark-soft: rgba(255, 255, 255, 0.68);

  /* Alternating dark section tones (avoid two same-color dark blocks in a row) */
  --dark-a: #000230;
  --dark-b: #071a3d;
  --dark-c: #0b1236;

  /* Light content cards (used on top of dark/colored sections) */
  --card-bg: #ffffff;
  --card-text: #2c3550;
  --card-text-soft: #5b6484;
  --card-border: #e3e8f2;
  --color-white: #ffffff;

  /* Typography — Poppins (brand font) with system fallback */
  --font-base: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-eyebrow: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.6rem, 4vw, 2.4rem);
  --fs-h1: clamp(2.1rem, 6vw, 3.5rem);
  --lh-tight: 1.12;
  --lh-body: 1.75;

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;

  /* Radii — no shadows/glow per design direction */
  --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-pill: 999px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --container-max: 1140px;
  --container-narrow: 760px;
  --header-h: 72px;
}

/* ------------------------------------------------------------
   2. BASE / RESET
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-on-dark);
  background: var(--dark-a);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { color: var(--color-white); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); margin: 0 0 var(--space-4); }
h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-4); }
h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); font-weight: 600; }
p { margin: 0 0 var(--space-4); }
.hl { color: var(--color-teal); }

a { color: var(--color-teal); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  position: relative;
  z-index: 1;
}
.container-narrow { max-width: var(--container-narrow); }

.section { padding: var(--space-8) 0; position: relative; }

/* Section headings — teal on dark (matches brand style) */
.section-title { color: var(--color-teal); max-width: 34ch; }
.section-title.center { max-width: none; text-align: center; margin-inline: auto; }
.section-intro { font-size: var(--fs-lead); color: var(--text-on-dark-soft); max-width: 62ch; }
.section-intro.center { text-align: center; margin-inline: auto; }
.section-kicker {
  text-align: center; font-size: var(--fs-body); font-weight: 600;
  color: var(--color-teal); margin-bottom: var(--space-6);
}
.section-cta { margin-top: var(--space-6); text-align: center; }

/* Small kicker line above section headings */
.section-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0 0 var(--space-2);
}
.section-eyebrow.center { text-align: center; }
.section-note {
  margin-top: var(--space-5); font-size: var(--fs-body);
  color: var(--card-text); background: var(--color-white);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
}

/* ------------------------------------------------------------
   4. BUTTONS / CTA — coral with deep-navy text (AA ~6.3:1)
   ------------------------------------------------------------ */
.btn {
  display: inline-block; font-weight: 700; text-align: center;
  border-radius: var(--radius-pill); padding: var(--space-3) var(--space-6);
  cursor: pointer; border: 2px solid transparent; min-height: 44px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--color-coral); color: var(--color-navy-deep);
}
.btn-primary:hover { background: var(--color-coral-dark); transform: translateY(-2px); }
.btn-mint {
  background: var(--color-teal); color: var(--color-navy-deep);
}
.btn-mint:hover { background: var(--color-teal-bright); text-decoration: none; transform: translateY(-2px); }
.btn-lg {
  font-size: var(--fs-lead);
  padding: var(--space-4) var(--space-7);
  white-space: normal;
  line-height: 1.25;
  max-width: 100%;
}

/* ------------------------------------------------------------
   5. HEADER / NAVIGATION
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7, 38, 58, 0.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
}
.brand {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.brand img {
  display: block;
  height: 46px;
  width: 147px; /* 1000×312 lockup at 46px tall */
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer;
}
.nav-toggle-bar {
  display: block; width: 24px; height: 2px; background: var(--color-white);
  margin: 0 auto; transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.primary-nav {
  display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
  background: var(--color-surface-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.primary-nav.is-open { display: block; }

.nav-panel {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.nav-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-1);
}
.nav-links li { margin: 0; }
.nav-link {
  display: block; padding: var(--space-3) 0;
  color: var(--text-on-dark); font-weight: 600; line-height: 1.3;
}
.nav-link:hover { color: var(--color-teal); text-decoration: none; }
.nav-link.is-active { color: var(--color-teal); }

.nav-actions {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-nav {
  font-size: 0.875rem; font-weight: 600; line-height: 1.25;
  padding: var(--space-3) var(--space-4);
  min-height: 44px; white-space: nowrap; text-align: center;
}

/* ------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------ */
.hero {
  padding: var(--space-8) 0 var(--space-7);
  position: relative;
  overflow: hidden;
  background-color: var(--dark-a);
}
.hero-inner {
  position: relative;
  z-index: 1;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    105deg,
    rgba(9, 26, 62, 0.92) 0%,
    rgba(9, 26, 62, 0.72) 45%,
    rgba(10, 42, 102, 0.5) 100%
  );
}
.hero-bg-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--dark-a);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0;
  animation-duration: 27s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* Slide 1: LCP — WebP in CSS. JPEG sources in assets/_archive/ (not deployed). */
.hero-bg-slide--1 {
  background-image: url("assets/images/hero-image_1.webp");
  animation-name: hero-bg-fade-1;
}
/* Slides 2–4: background-image set on window load in script.js (hero lazy). */
.hero-bg-slide--2 {
  animation-name: hero-bg-fade-2;
}
.hero-bg-slide--3 {
  animation-name: hero-bg-fade-3;
}
.hero-bg-slide--4 {
  animation-name: hero-bg-fade-4;
}
@keyframes hero-bg-fade-1 {
  0%, 21% { opacity: 1; }
  25%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes hero-bg-fade-2 {
  0%, 21% { opacity: 0; }
  25%, 46% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes hero-bg-fade-3 {
  0%, 46% { opacity: 0; }
  50%, 71% { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes hero-bg-fade-4 {
  0%, 71% { opacity: 0; }
  75%, 96% { opacity: 1; }
  100% { opacity: 0; }
}
/* .hero-mascot { width: 120px; height: auto; margin-bottom: var(--space-4); } */ /* mascote removido a pedido */
.eyebrow {
  display: inline-block; font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--color-teal); background: rgba(106, 204, 185, 0.14);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  margin-bottom: var(--space-4); border: 1px solid rgba(106, 204, 185, 0.4);
}
.hero-support { font-size: var(--fs-lead); color: var(--text-on-dark); max-width: 55ch; }
.hero-support p:last-child { margin-bottom: 0; }
.hero-support ul {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}
.hero-support li { position: relative; padding-left: var(--space-6); }
.hero-support li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 18px;
  height: 18px;
  background: url("assets/icons/bullet-teal.svg") center / contain no-repeat;
}
.hero-actions { margin-top: var(--space-6); }
.hero-actions-note { margin-top: var(--space-3); font-size: var(--fs-eyebrow); color: var(--text-on-dark-soft); }
.hero-visual { position: relative; margin-top: var(--space-7); min-height: 320px; }
.hero-shot { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.hero-shot-1 { max-width: 62%; margin: 0 auto; }
.hero-shot-2 {
  max-width: 55%; position: absolute; right: 0; bottom: 0;
  border: 4px solid var(--color-white);
}

/* Product UI rendered as a lightweight CSS 3D device. */
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
  perspective-origin: 50% 40%;
}
.hero-device-blob {
  position: absolute;
  z-index: 0;
  top: 12%;
  right: 0;
  width: 300px;
  height: 300px;
  border-radius: 58% 42% 45% 55% / 55% 48% 52% 45%;
  background: radial-gradient(circle, var(--color-teal) 0 55%, transparent 70%);
  opacity: 0.9;
}
.hero-device-rig {
  --hero-device-rx: 0deg;
  --hero-device-ry: 0deg;
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(6deg + var(--hero-device-ry)))
    rotateY(calc(-20deg + var(--hero-device-rx)));
  transition: transform 0.25s ease-out;
  animation: hero-device-float 6s ease-in-out infinite;
}
@keyframes hero-device-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
.hero-device-phone {
  position: relative;
  width: 320px;
  height: 650px;
  padding: 12px;
  border-radius: 44px;
  background: linear-gradient(150deg, #2b3f74, #0e1c3d);
  box-shadow:
    0 2px 0 2px rgba(255,255,255,0.06) inset,
    30px 50px 80px -20px rgba(0,0,10,0.55),
    0 0 0 2px rgba(0,0,20,0.4);
}
.hero-device-phone::before,
.hero-device-phone::after {
  content: "";
  position: absolute;
  right: -3px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(#3a4d80, #1a294d);
}
.hero-device-phone::before { top: 130px; height: 56px; }
.hero-device-phone::after { top: 200px; height: 80px; }
.hero-device-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(180deg, #16265a, #101c44 55%, #0c1636);
  color: var(--color-white);
  line-height: 1.3;
}
.hero-device-notch {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  width: 120px;
  height: 22px;
  border-radius: 0 0 16px 16px;
  background: #0a1330;
  transform: translateX(-50%);
}
.hero-device-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 6px;
  color: #dfe8ff;
  font-size: 12px;
  font-weight: 600;
}
.hero-device-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.hero-device-status-icons span {
  width: 14px;
  height: 9px;
  border-radius: 2px;
  background: #dfe8ff;
  opacity: 0.85;
}
.hero-device-status-icons i {
  width: 20px;
  height: 10px;
  border: 1.5px solid #dfe8ff;
  border-radius: 3px;
}
.hero-device-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 48px;
  padding: 6px 16px 12px;
}
.hero-device-level {
  justify-self: start;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.12);
  font-size: 11px;
  font-weight: 700;
}
.hero-device-logo {
  width: 86px;
  height: 30px;
  object-fit: contain;
}
.hero-device-header-actions {
  justify-self: end;
  display: flex;
  gap: 5px;
}
.hero-device-header-actions svg {
  width: 27px;
  height: 27px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.hero-device-header-actions .hero-device-music { color: #ff7069; }
.hero-device-heading {
  margin: 0;
  padding: 2px 16px 5px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
}
.hero-device-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  padding: 0 16px 70px;
}
.hero-device-card {
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 16px;
  border-radius: 32px;
}
.hero-device-card strong {
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.2;
}
.hero-device-badge {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hero-device-featured {
  height: 170px;
  background: rgb(83,67,157);
}
.hero-device-featured .hero-device-badge { background: rgb(56,46,107); }
.hero-device-featured strong {
  max-width: 85%;
  font-size: 18px;
}
.hero-device-avatars {
  display: flex;
  align-items: center;
  margin-top: auto;
}
.hero-device-avatars i {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-right: -7px;
  border: 2px solid rgb(83,67,157);
  border-radius: 50%;
  background: var(--color-white);
  color: #18376c;
  font-size: 6px;
  font-style: normal;
  font-weight: 700;
}
.hero-device-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 10px;
}
.hero-device-themes,
.hero-device-access { height: 140px; }
.hero-device-themes {
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #1971c2;
  text-align: center;
}
.hero-device-themes img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.hero-device-themes strong {
  margin-top: 2px;
  font-size: 12px;
  text-transform: uppercase;
}
.hero-device-access { background: rgb(37,17,105); }
.hero-device-access .hero-device-badge {
  background: rgb(25,12,71);
  font-size: 7px;
}
.hero-device-access strong { font-size: 13px; }
.hero-device-access > svg {
  position: absolute;
  right: 13px;
  bottom: 13px;
  width: 17px;
  height: 17px;
}
.hero-device-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
}
.hero-device-section-head svg {
  width: 16px;
  height: 16px;
}
.hero-device-carousel {
  display: flex;
  width: calc(200% + 10px);
  gap: 10px;
}
.hero-device-track {
  flex: 0 0 40%;
  height: 145px;
  background: rgb(38,86,150);
}
.hero-device-track .hero-device-badge { background: rgb(26,58,102); }
.hero-device-track strong { font-size: 16px; }
.hero-device-track-alt { background: rgb(134,65,142); }
.hero-device-track-alt .hero-device-badge { background: rgb(91,44,97); }
.hero-device-tabs {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 58px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,18,44,0.92);
  backdrop-filter: blur(6px);
}
.hero-device-tabs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #8a97bf;
  font-size: 9px;
}
.hero-device-tabs .is-selected { color: #50ffce; }
.hero-device-tabs svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 420px) {
  .hero-device-phone {
    width: 280px;
    height: 580px;
  }
  .hero-device-blob {
    width: 240px;
    height: 240px;
  }
}

/* ------------------------------------------------------------
   6.1 GAME UI MOCKUPS
   ------------------------------------------------------------ */
.game-device-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  /* Full outer box; internal lines come from each cell's right/bottom border. */
  border: 1px solid #2E5DBD;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto;
  width: 92%;
  aspect-ratio: 1;
}
.game-device-cell {
  /* position:relative guarantees z-index wins over the highlight overlay */
  position: relative;
  border-right: 1px solid #2E5DBD;
  border-bottom: 1px solid #2E5DBD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #66AAFF;
  font-size: 13px;
  font-weight: 500;
  z-index: 2;
}
.game-device-cell.is-found-text {
  color: #FFFFFF;
  font-weight: 700;
}
/* Hollow outline (like the real app) so letters stay fully readable.
   Absolutely positioned so it does NOT push the auto-placed letter cells. */
.word-highlight {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #50FFCE;
  background: transparent;
  border-radius: 999px;
  pointer-events: none;
  z-index: 3;
}

/* --- Three-phone games stage: STACKED on load, FANS OUT on scroll ---
   JS sets --spread (0..1) on #gamesStage as the section scrolls into view.
   At --spread:0 the three phones share the exact same centered transform
   (same size, stacked); at --spread:1 they open like a fan from a shared
   bottom pivot, tilting away from the center. All three keep the same scale.
   The float animation uses the `translate` property, so it composes with
   these transforms without conflict. */
.games-stage {
  --end-scale: 0.82;
  position: relative;
  min-height: 520px;
}

.games-stage .hero-device-rig {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Pivot near the bottom so they open like a fan, not a side-slide. */
  transform-origin: 50% 85%;
  transform:
    translate(-50%, -50%)
    rotateZ(calc(var(--rz, 0deg) * var(--spread, 0)))
    rotateY(calc(var(--ry, 0deg) * var(--spread, 0)))
    translateX(calc(var(--tx, 0%) * var(--spread, 0)))
    scale(calc(1 - (1 - var(--end-scale)) * var(--spread, 0)));
  transition: transform 0.12s linear;
}

/* Same size for all three. Outer phones tilt away from the center. */
.games-phone-back  { z-index: 1; --tx: -18%; --rz: -18deg; --ry: -24deg; }
.games-phone-mid {
  z-index: 2; --tx: 0%; --rz: 0deg; --ry: 0deg;
  filter: drop-shadow(-22px 26px 38px rgba(0, 0, 10, 0.45));
  animation-delay: -2s;
}
.games-phone-front {
  z-index: 3; --tx: 18%; --rz: 18deg; --ry: 24deg;
  filter: drop-shadow(-26px 30px 42px rgba(0, 0, 10, 0.5));
  animation-delay: -4s;
}

/* --- Forca: fichas da palavra (word-complete) --- */
.game-word {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-bottom: 22px;
}
.game-word-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 38px;
  border-radius: 6px;
  background: #1B4079;
  color: #50FFCE;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.game-word-tile.is-blank { color: transparent; }

/* --- Forca: teclado virtual 5x5 --- */
.game-keyboard {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: 84%;
  margin: 0 auto;
}
.game-key {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  color: #7FC6FF;
  font-weight: 600;
  font-size: 15px;
}

/* --- Quiz: cenário, pergunta destacada, alternativas e botão --- */
.quiz-scenario {
  font-size: 10.5px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.5;
  text-align: left;
  padding: 0 16px;
  margin-bottom: 9px;
}
.quiz-question {
  font-size: 12px;
  font-weight: 700;
  color: #7FC6FF;
  line-height: 1.4;
  text-align: left;
  padding: 0 16px;
  margin-bottom: 14px;
}
.quiz-answers {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;
}
.quiz-answer {
  border: 1px solid rgba(127, 198, 255, 0.35);
  border-radius: 10px;
  padding: 8px 10px;
  color: #ffffff;
  font-size: 10px;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.03);
}
.quiz-check {
  align-self: stretch;
  margin: 0 16px;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: #2E80E6;
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  font-family: inherit;
}

/* ------------------------------------------------------------
   7. CLIENT LOGOS
   ------------------------------------------------------------ */
.logos-section { padding: var(--space-7) 0; border-bottom: 1px solid rgba(255,255,255,0.08); }

/* Single-line auto-scrolling carousel; pauses on hover/focus.
   Edge fade is done with gradient overlays (matching the section
   background) instead of mask-image, so the moving logos are NOT
   pushed onto a masked compositor layer that would blur/jag them. */
.logo-carousel {
  position: relative;
  overflow: hidden;
}
.logo-carousel::before,
.logo-carousel::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 120px);
  z-index: 2; pointer-events: none;
}
.logo-carousel::before { left: 0; background: linear-gradient(90deg, var(--dark-b), rgba(7,26,61,0)); }
.logo-carousel::after { right: 0; background: linear-gradient(270deg, var(--dark-b), rgba(7,26,61,0)); }
.logo-track {
  list-style: none; margin: 0; padding: var(--space-2) 0;
  display: flex; flex-wrap: nowrap; gap: var(--space-5);
  width: max-content;
  will-change: transform;
  /* Fallback sem JS: animação CSS. Com JS, o script assume o transform
     para poder desacelerar (não parar) no hover. */
  animation: logo-scroll 40s linear infinite;
}
/* Hover não pausa mais; o JS reduz a velocidade para 5% (ver script.js). */
/* .logo-carousel:hover .logo-track,
.logo-carousel:focus-within .logo-track { animation-play-state: paused; } */
.logo-slot {
  flex: 0 0 auto; width: 240px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
}
.logo-slot img {
  max-width: 100%; max-height: 56px; width: auto; height: auto;
  object-fit: contain;
}
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   8. CARDS (problem / testimonials) — white cards for readability
   ------------------------------------------------------------ */
.cards-grid { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.cards-grid.cards-3, .cards-grid.cards-4 { grid-template-columns: 1fr; }

.card {
  background: var(--card-bg); color: var(--card-text);
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card h3 { color: var(--color-navy); }
.card-icon {
  width: 56px; height: 56px; margin-bottom: var(--space-3);
  padding: var(--space-2); background: #eef7f4; border-radius: var(--radius-md);
}
.cards-4 .card:nth-child(1) .card-icon { background: #fde5de; }
.cards-4 .card:nth-child(2) .card-icon { background: #e2f1fb; }
.cards-4 .card:nth-child(3) .card-icon { background: #fef2dd; }
.cards-4 .card:nth-child(4) .card-icon { background: #e6f7f2; }
.card p { margin-bottom: 0; color: var(--card-text-soft); }

.testimonial {
  margin: 0; background: var(--card-bg); color: var(--card-text);
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-md);
}
.testimonial blockquote { margin: 0 0 var(--space-4); font-size: var(--fs-lead); color: var(--color-navy); }
.testimonial figcaption { display: flex; flex-direction: column; gap: 2px; }
.testi-name { font-weight: 700; color: var(--color-navy); }
.testi-role, .testi-company { font-size: 0.9rem; color: var(--card-text-soft); }

/* ------------------------------------------------------------
   9. STEPS — white cards, colorful numbers
   ------------------------------------------------------------ */
.steps-grid { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.step {
  background: var(--card-bg); color: var(--card-text);
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-md);
}
.step h3 { color: var(--color-navy); }
.step p { margin-bottom: 0; color: var(--card-text-soft); }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--color-coral); color: var(--color-white);
  font-weight: 800; margin-bottom: var(--space-3);
}
.steps-grid .step:nth-child(2) .step-number { background: var(--color-blue); }
.steps-grid .step:nth-child(3) .step-number { background: var(--color-amber); color: var(--color-navy-deep); }
.steps-grid .step:nth-child(4) .step-number { background: var(--color-teal); color: var(--color-navy-deep); }

/* Implementation timeline */
.timeline {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  position: relative;
  align-items: start;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: rgba(255, 255, 255, 0.45);
}
.timeline-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  align-items: start;
  align-content: start;
  position: relative;
}
.timeline-marker {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-coral);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.timeline-content {
  background: var(--color-white);
  color: var(--card-text);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  align-self: start;
}
.timeline-content h3 { color: var(--color-navy); margin-bottom: var(--space-2); }
.timeline-content p { margin: 0; color: var(--card-text-soft); }

/* ------------------------------------------------------------
   10. SPLIT SECTIONS (employee / compliance)
   ------------------------------------------------------------ */
.split { display: grid; gap: var(--space-6); align-items: center; }
.split-visual { order: -1; }
.img-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 260px; border: 2px dashed rgba(106, 204, 185, 0.6);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(106,204,185,0.16), rgba(0,111,175,0.16));
  color: var(--color-teal); font-weight: 600; padding: var(--space-5);
}

/* ------------------------------------------------------------
   10.2 CONTENT CATALOG (sober split: themes + editorial seal)
   ------------------------------------------------------------ */
.content-section .section-title { max-width: 22ch; }
.content-layout { align-items: start; }
.content-layout > * { min-width: 0; }
.content-layout .section-intro { max-width: 46ch; }
.content-section .split-visual { order: 2; } /* copy first on small screens */
.theme-chips {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: 100%;
}
.theme-chips li {
  margin: 0;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--surface-border);
  background: var(--surface-panel);
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  max-width: 100%;
}
.theme-more {
  margin: var(--space-4) 0 0;
  color: var(--color-teal);
  font-weight: 600;
  font-size: 0.95rem;
}
.content-validation {
  margin: var(--space-5) 0 0;
  color: var(--text-on-dark);
  max-width: 42ch;
}
.content-cta { text-align: left; }
.content-cta .hero-actions-note { max-width: 42ch; }
.content-author {
  margin: 0;
  display: grid;
  grid-template-areas:
    "photo"
    "caption"
    "cards";
  gap: var(--space-4) var(--space-3);
  align-items: start;
  overflow: visible;
}
.content-author-photo {
  grid-area: photo;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  /* Placeholder box (dashed) — kept only while the photo was pending.
  min-height: 0;
  aspect-ratio: 3 / 4;
  */
}
.content-cred-rig {
  grid-area: cards;
  --hero-device-rx: 0deg;
  --hero-device-ry: 0deg;
  transform-style: preserve-3d;
}
.content-author-caption {
  grid-area: caption;
  display: grid;
  gap: var(--space-1);
  max-width: 100%;
  /* margin-top: var(--space-4); — gap on the figure grid now handles spacing */
}
/* .content-author-caption strong { color: var(--color-white); font-size: 1.05rem; } */
.content-author-name {
  color: var(--color-white);
  font-size: 1.05rem;
  font-weight: 700;
  width: fit-content;
}
.content-author-name:hover,
.content-author-name:focus-visible {
  color: var(--color-teal);
  text-decoration: underline;
}
.content-author-role {
  color: var(--text-on-dark-soft);
  font-size: 0.95rem;
}
.content-author-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  transform-style: preserve-3d;
}
/* Stacked list under the photo — replaced by floating cards.
.content-author-stats {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.content-author-stats li {
  display: grid;
  grid-template-columns: 4.1rem 1fr;
  gap: var(--space-3);
  align-items: start;
}
*/
.content-cred-card {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-panel);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  transform-style: preserve-3d;
}
.content-author-stat-value {
  display: inline-block;
  color: var(--color-teal);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}
/* Quadrados laranja copiados do site da Letícia — removidos a pedido.
.content-author-stat-value::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0.18em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 0.2em;
  background: linear-gradient(135deg, var(--color-amber), var(--color-coral));
}
*/
.content-author-stat-label {
  color: var(--text-on-dark-soft);
  font-size: 0.8rem;
  line-height: 1.4;
}
.content-author-flags {
  display: inline-block;
  margin-left: 0.15em;
  letter-spacing: 0.08em;
}
.content-validation a:hover,
.content-validation a:focus-visible { text-decoration: underline; }
/* .content-author-caption .content-author-cred { color: var(--color-teal); font-weight: 600; } */

/* ------------------------------------------------------------
   10.1 ADMIN DESKTOP MOCKUP (CSS 3D laptop + anonymized dashboard)
   Designed at 1080×640 and scaled to the laptop screen via --admin-dash-scale.
   ------------------------------------------------------------ */
.admin-device-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  perspective: 1600px;
  perspective-origin: 50% 40%;
}
.admin-device-blob {
  top: 8%;
  right: -8%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, var(--color-blue) 0 55%, transparent 70%);
}
.admin-device-rig {
  --hero-device-rx: 0deg;
  --hero-device-ry: 0deg;
  position: relative;
  z-index: 1;
  width: 100%;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(6deg + var(--hero-device-ry)))
    rotateY(calc(-10deg + var(--hero-device-rx)));
  transition: transform 0.25s ease-out;
  animation: hero-device-float 6s ease-in-out infinite;
}
.admin-device-laptop { width: 100%; max-width: 560px; margin: 0 auto; }
.admin-device-bezel {
  padding: 10px 10px 14px;
  border-radius: 14px 14px 8px 8px;
  background: linear-gradient(150deg, #2b3f74, #0e1c3d);
  box-shadow:
    0 2px 0 2px rgba(255,255,255,0.06) inset,
    28px 40px 70px -18px rgba(0,0,10,0.55),
    0 0 0 2px rgba(0,0,20,0.4);
}
.admin-device-camera {
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto 7px;
  border-radius: 50%;
  background: #0a1330;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.admin-device-screen {
  --admin-dash-scale: 0.48;
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 640;
  overflow: hidden;
  border-radius: 6px;
  background: #eef5ff;
}
.admin-dash {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 1080px;
  height: 640px;
  overflow: hidden;
  color: #2e80e6;
  font-family: "Poppins", system-ui, sans-serif;
  background: #f4f8ff;
  transform: scale(var(--admin-dash-scale));
  transform-origin: 0 0;
}
.admin-dash-nav {
  display: flex;
  flex-direction: column;
  width: 168px;
  padding: 18px 10px 12px;
  color: #fff;
  background: linear-gradient(#152b57, #2e5dbd);
}
.admin-dash-logo {
  display: block;
  width: 118px;
  height: auto;
  margin: 0 auto 22px;
}
.admin-dash-menu { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.admin-dash-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}
.admin-dash-item svg { width: 16px; height: 16px; flex: 0 0 16px; }
.admin-dash-chevron { margin-left: auto; width: 14px; height: 14px; flex-basis: 14px; opacity: 0.8; }
.admin-dash-item.is-active { background: #2e80e6; }
.admin-dash-exit { margin-top: auto; }
.admin-dash-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.admin-dash-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 52px;
  padding: 0 18px;
  background: #e1eeff;
}
.admin-dash-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2e5dbd;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.admin-dash-main {
  display: flex;
  flex: 1;
  gap: 8px;
  min-height: 0;
  padding: 8px;
}
.admin-dash-center {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 10px 12px 12px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}
.admin-dash-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-dash-heading strong { font-size: 16px; font-weight: 700; color: #2e80e6; }
.admin-dash-select {
  min-width: 148px;
  padding: 7px 12px;
  border: 1px solid #d5e4f7;
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237492ba' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: #7492ba;
  font-size: 12px;
}
.admin-dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.admin-dash-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 72px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #e1eeff;
}
.admin-dash-kpi p {
  margin: 0 0 4px;
  color: #2e80e6;
  font-size: 11px;
  font-weight: 500;
}
.admin-dash-kpi strong,
.admin-dash-kpi-value { color: #2e80e6; font-size: 13px; font-weight: 700; white-space: nowrap; }
.admin-dash-kpi-value { display: flex; align-items: center; gap: 10px; }
.admin-dash-online { position: relative; padding-left: 14px; }
.admin-dash-online::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #40c057;
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(64,192,87,0.25);
}
.admin-dash-kpi-value i { width: 1px; height: 16px; background: #ced4da; }
.admin-dash-kpi em {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #2e80e6;
  font-style: normal;
}
.admin-dash-kpi em svg { width: 18px; height: 18px; }
.admin-dash-kpi.is-ok { background: #ebfbee; }
.admin-dash-kpi.is-ok p,
.admin-dash-kpi.is-ok strong { color: #2b8a3e; }
.admin-dash-kpi.is-ok em { color: #2f9e44; }
.admin-dash-kpi.is-bad { background: #fff5f5; }
.admin-dash-kpi.is-bad p,
.admin-dash-kpi.is-bad strong { color: #c92a2a; }
.admin-dash-kpi.is-bad em { color: #fa5252; }
.admin-dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-dash-card {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #e9eef6;
  border-radius: 10px;
  background: #fff;
}
.admin-dash-card > p,
.admin-dash-aside-head strong {
  margin: 0 0 10px;
  color: #7492ba;
  font-size: 13px;
  font-weight: 600;
}
.admin-dash-donut-row { display: flex; align-items: center; gap: 12px; }
.admin-dash-donut {
  flex: 0 0 118px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent 54%, #000 55%);
  mask: radial-gradient(farthest-side, transparent 54%, #000 55%);
}
.admin-dash-donut-days {
  background: conic-gradient(#ff8787 0 18%, #4c6ef5 18% 48%, #69db7c 48% 82%, #ffe066 82% 100%);
}
.admin-dash-donut-content {
  background: conic-gradient(#ff8787 0 28%, #4c6ef5 28% 54%, #69db7c 54% 78%, #ffe066 78% 100%);
}
.admin-dash-donut-row ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.admin-dash-donut-row li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #7492ba;
  font-size: 12px;
  font-weight: 500;
}
.admin-dash-donut-row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
.admin-dash-donut-row .c-red { background: #ff8787; }
.admin-dash-donut-row .c-blue { background: #4c6ef5; }
.admin-dash-donut-row .c-green { background: #69db7c; }
.admin-dash-donut-row .c-yellow { background: #ffe066; }
.admin-dash-bars-card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.admin-dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex: 1;
  min-height: 92px;
  padding: 4px 4px 0;
  border-top: 1px dashed #edf2fa;
}
.admin-dash-bars span {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: #ffa8a8;
}
.admin-dash-bars span.is-line {
  flex: 0.35;
  background: #ff6b6b;
  opacity: 0.85;
}
.admin-dash-aside {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 236px;
  flex: 0 0 236px;
}
.admin-dash-aside .admin-dash-card { padding: 10px 12px; }
.admin-dash-aside-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.admin-dash-aside-head strong { margin: 0; }
.admin-dash-aside-head span {
  padding: 4px 8px;
  border: 1px solid #d5e4f7;
  border-radius: 6px;
  color: #2e80e6;
  font-size: 11px;
}
.admin-dash-rank,
.admin-dash-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.admin-dash-rank li,
.admin-dash-games li { display: flex; align-items: center; gap: 8px; }
.admin-dash-rank b,
.admin-dash-games em {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e1eeff;
  color: #2e5dbd;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  flex: 0 0 28px;
}
.admin-dash-rank div,
.admin-dash-games div { min-width: 0; }
.admin-dash-rank strong,
.admin-dash-games strong {
  display: block;
  overflow: hidden;
  color: #2e80e6;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.admin-dash-rank small,
.admin-dash-games small { color: #7492ba; font-size: 10px; }
.admin-device-base {
  height: 11px;
  margin: 0 28px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(#1a2a52, #0c1636);
  box-shadow: 0 16px 28px -10px rgba(0,0,10,0.45);
}

/* ------------------------------------------------------------
   11. METRICS
   ------------------------------------------------------------ */
.metrics-section { background: var(--color-navy-deep); overflow: hidden; }
.metrics-section .section-title { color: var(--color-white); }
.metrics-section .section-eyebrow { color: var(--color-teal); }
/* .metrics-note movido para dentro dos boxes (.metric-desc) a pedido */
.metrics-note {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
}
.metrics-grid { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; text-align: center; }
.metrics-grid { align-items: stretch; }
.metric { padding: var(--space-6) var(--space-5); background: var(--surface-panel); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); }
.metric-value { display: block; font-size: clamp(2.2rem, 8vw, 3.2rem); font-weight: 800; line-height: 1; margin-bottom: var(--space-2); }
.metrics-grid .metric:nth-child(1) .metric-value { color: var(--color-teal); }
.metrics-grid .metric:nth-child(2) .metric-value { color: var(--color-amber); }
.metrics-grid .metric:nth-child(3) .metric-value { color: var(--color-coral); }
.metric-label { color: var(--text-on-dark); font-weight: 600; }
.metric-desc { display: block; margin-top: var(--space-3); font-size: 0.8rem; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.42); }

/* ------------------------------------------------------------
   12. TAGS / FEATURE LISTS
   ------------------------------------------------------------ */
.feature-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.feature-list li { position: relative; padding-left: var(--space-6); color: var(--text-on-dark); }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 0.35em; width: 18px; height: 18px;
  background: url("assets/icons/bullet-teal.svg") center / contain no-repeat;
}
.feature-list-cols { grid-template-columns: 1fr; }

.tag-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tag-list li {
  background: var(--surface-panel); color: var(--color-white);
  font-weight: 600; font-size: 0.9rem; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill); border: 2px solid var(--color-teal);
}
.tag-list li:nth-child(3n+1) { border-color: var(--color-coral); }
.tag-list li:nth-child(3n+2) { border-color: var(--color-amber); }
.tag-list li:nth-child(3n+3) { border-color: var(--color-teal); }

/* ------------------------------------------------------------
   13. FAQ — dark translucent items, teal questions
   ------------------------------------------------------------ */
.faq-item {
  background: var(--surface-panel); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); margin-bottom: var(--space-3); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: var(--space-4) var(--space-5);
  font-weight: 600; color: var(--color-teal);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.5rem; color: var(--color-coral); line-height: 1; flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 var(--space-5) var(--space-4); }
.faq-answer p { margin: 0; color: var(--text-on-dark); }

.faq-split {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
  align-items: start;
}
.faq-list { min-width: 0; }
.faq-visual { order: -1; } /* quotes above the accordion on small screens */
/* .faq-visual .img-placeholder { min-height: 320px; } */

.faq-quotes { min-width: 0; }
.faq-quotes-label {
  margin: 0 0 var(--space-4);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
}
.faq-quotes-cluster {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: stretch;
}
.faq-quotes-blob {
  position: absolute;
  z-index: 0;
  width: 220px;
  height: 220px;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(106, 204, 185, 0.28) 0 55%, transparent 70%);
  pointer-events: none;
}
.faq-quote {
  position: relative;
  z-index: 1;
  margin: 0;
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.faq-quote blockquote {
  margin: 0 0 var(--space-3);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-navy);
}
.faq-quote blockquote::before {
  content: "“";
  display: block;
  margin-bottom: 0.15rem;
  font-size: 1.75rem;
  line-height: 0.7;
  font-weight: 700;
  color: var(--color-coral);
}
.faq-quote--nps blockquote::before { color: var(--color-teal); }
.faq-quote--fast blockquote::before { color: var(--color-amber); }
.faq-quote--themes blockquote::before { color: var(--color-blue-bright); }
.faq-quote figcaption {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--card-text-soft);
}
.faq-quote--anchor { grid-column: 1 / -1; }
.faq-quote--anchor blockquote { font-size: 1rem; }
.faq-quote--themes { grid-column: 1 / -1; max-width: 22rem; }

/* ------------------------------------------------------------
   14. CONTACT / TALLY
   ------------------------------------------------------------ */
.contact-section { overflow: hidden; text-align: center; }
/* .contact-mascot { width: 96px; height: auto; margin: 0 auto var(--space-4); } */ /* mascote removido a pedido */
.tally-embed-shell {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--card-border);
}
.tally-embed {
  min-height: 240px;
  background: var(--color-white);
  text-align: left;
}
.tally-embed iframe {
  display: block;
  width: 100%;
  min-height: 280px;
  border: 0;
}

/* ------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------ */
.site-footer { background: var(--color-surface-dark); color: rgba(255,255,255,0.82); padding: var(--space-8) 0 var(--space-6); }
.footer-inner {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0 0 var(--space-3);
}
.footer-brand img { height: 52px; width: auto; }
.footer-tagline {
  margin: var(--space-4) 0 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.72);
  max-width: 28ch;
}
.footer-col a { color: rgba(255,255,255,0.82); }
.footer-col a:hover { color: var(--color-teal); }
.footer-copy { margin: var(--space-5) 0 0; font-size: 0.85rem; opacity: 0.7; }
.footer-credit { margin: var(--space-2) 0 0; font-size: 0.9rem; }
.footer-credit a { color: var(--color-teal); font-weight: 600; }

/* ------------------------------------------------------------
   15.1 LEGAL PAGES (privacy policy, etc.)
   ------------------------------------------------------------ */
.legal-page { background: var(--dark-a); }
.legal-document {
  text-align: left;
  color: rgba(255, 255, 255, 0.88);
}
.legal-document .section-title {
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  margin-bottom: var(--space-3);
}
.legal-meta {
  margin: 0 0 var(--space-7);
  font-size: 0.95rem;
  opacity: 0.85;
}
.legal-document h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-teal);
  margin: var(--space-7) 0 var(--space-3);
}
.legal-document h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
}
.legal-document p,
.legal-document li {
  line-height: 1.65;
  font-size: 0.95rem;
}
.legal-document ul,
.legal-document ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
}
.legal-document a { color: var(--color-teal); font-weight: 500; }
.legal-document a:hover { color: var(--color-teal-bright); }
.legal-document code {
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.legal-table-wrap {
  overflow-x: auto;
  margin: var(--space-4) 0 var(--space-5);
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.legal-table th,
.legal-table td {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: var(--space-3);
  vertical-align: top;
  text-align: left;
}
.legal-table th {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-teal);
  font-weight: 600;
}
.legal-back {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------
   15.2 THANK-YOU PAGE (Tally redirect)
   ------------------------------------------------------------ */
.thanks-header-link {
  font-weight: 600;
  color: var(--text-on-dark);
  white-space: nowrap;
}
.thanks-header-link:hover {
  color: var(--color-teal);
  text-decoration: none;
}

.thanks-hero { background: var(--dark-a); }
.thanks-hero-split { align-items: center; }
.thanks-hero-copy .section-intro { max-width: 38ch; margin-bottom: 0; }
.thanks-hero-title {
  margin: 0 0 var(--space-4);
  font-size: clamp(2.75rem, 8vw, 4.25rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-teal);
  letter-spacing: -0.02em;
}
.thanks-steps-title {
  margin: var(--space-6) 0 var(--space-3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
}
.thanks-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 42ch;
  display: grid;
  gap: var(--space-4);
  font-size: var(--fs-lead);
  color: var(--text-on-dark);
  line-height: 1.55;
}
.thanks-next-list li {
  position: relative;
  padding-left: var(--space-6);
}
.thanks-next-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 18px;
  height: 18px;
  background: url("assets/icons/bullet-teal.svg") center / contain no-repeat;
}
.thanks-next-list strong {
  display: block;
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.thanks-hero-split .split-visual { order: 2; }
.thanks-hero-visual.hero-visual {
  margin-top: 0;
  min-height: 380px;
  overflow: visible;
}

.thanks-video-section { background: var(--dark-b); }
.thanks-quotes-section { background: var(--dark-c); }

.thanks-video {
  position: relative;
  width: 100%;
  max-width: 840px;
  margin: var(--space-6) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-navy-deep);
}
.thanks-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.thanks-quotes {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}
.thanks-quotes .faq-quote {
  display: flex;
  flex-direction: column;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  max-width: none;
  animation: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.thanks-quotes .faq-quote:nth-child(1) {
  transform: rotate(-2.5deg) translateY(8px);
  z-index: 1;
}
.thanks-quotes .faq-quote:nth-child(2) {
  transform: rotate(3deg) translateY(-6px);
  z-index: 2;
}
.thanks-quotes .faq-quote:nth-child(3) {
  transform: rotate(-1.5deg) translateY(12px);
  z-index: 1;
}
.thanks-quotes .faq-quote:nth-child(4) {
  transform: rotate(2deg) translateY(-10px);
  z-index: 3;
}
.thanks-quotes .faq-quote:hover {
  transform: rotate(0deg) translateY(0);
  z-index: 4;
}
.thanks-quotes .faq-quote blockquote { flex: 1; }
.thanks-quote--blue blockquote::before { color: var(--color-blue-bright); }

.thanks-back {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

/* ------------------------------------------------------------
   16. SECTION BACKGROUNDS
   Alternating dark tones so no two adjacent dark blocks share the
   same color; plus the vibrant full-bleed colored blocks.
   ------------------------------------------------------------ */
/* Dark blocks — alternate a/b/c between colored blocks */
.logos-section       { background: var(--dark-b); }
.problem-section     { background: var(--dark-c); }  /* #desafio */
.experience-section  { background: var(--dark-b); }  /* after teal block */
.content-section     { background: var(--dark-a); }  /* after employee experience */
.compliance-section  { background: var(--dark-c); }
.metrics-section     { background: var(--color-navy-deep); }
.testimonials-section{ background: var(--dark-b); }
.faq-section         { background: var(--dark-c); }
.contact-section     { background: var(--dark-b); }

/* How it works — teal→blue gradient block */
.howitworks-section { background: linear-gradient(135deg, var(--color-teal), var(--color-blue-bright)); }
.howitworks-section .section-title { color: var(--color-navy-deep); }
.howitworks-section .section-intro { color: rgba(0, 0, 40, 0.78); }
.howitworks-section .section-eyebrow { color: rgba(0, 0, 40, 0.68); }

/* Implementation — coral/orange block (section hidden 2026-09-16)
.implementation-section { background: var(--color-coral); }
.implementation-section .section-title { color: var(--color-white); }
.implementation-section .section-eyebrow { color: rgba(255, 255, 255, 0.92); }
*/

/* Security — blue block (section hidden 2026-09-16)
.security-section { background: var(--color-blue); }
.security-section .section-title { color: var(--color-white); }
.security-section .section-eyebrow { color: rgba(255, 255, 255, 0.92); }
.security-section .section-intro { color: rgba(255, 255, 255, 0.92); }
.security-section .tag-list li { background: var(--color-white); color: var(--color-navy); border-color: transparent; }
*/

/* ------------------------------------------------------------
   17. RESPONSIVE
   ------------------------------------------------------------ */
@media (min-width: 640px) {
  .cards-grid.cards-3 { grid-template-columns: repeat(3, 1fr); }
  .cards-grid.cards-4 { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-list { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .thanks-quotes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .section { padding: var(--space-9) 0; }

  .nav-toggle { display: none; }
  .header-inner { gap: 1.5rem; }
  .brand { flex: 0 0 auto; }
  /* .brand img { height: 40px; width: auto; max-width: 128px; object-fit: contain; object-position: left center; } */
  .brand img { height: 40px; width: 128px; }

  .primary-nav {
    display: flex; position: static; flex: 1 1 auto; min-width: 0;
    background: transparent; border: 0;
  }
  .nav-panel {
    flex-direction: row; align-items: center;
    /* justify-content: flex-end; */ /* overflow went left and covered the logo */
    justify-content: flex-start;
    flex-wrap: nowrap; gap: var(--space-3) var(--space-4);
    padding: 0; margin: 0;
    width: 100%; min-width: 0;
  }
  .nav-links {
    flex-direction: row; align-items: center; flex-wrap: nowrap;
    flex: 0 1 auto; min-width: 0; justify-content: flex-start;
    gap: clamp(0.65rem, 1.2vw, 1.15rem);
  }
  .nav-link {
    padding: var(--space-2) 0;
    font-size: clamp(0.75rem, 0.9vw, 0.875rem);
    white-space: nowrap;
  }
  .nav-actions {
    flex-direction: row; align-items: center; flex-shrink: 0;
    gap: var(--space-2); padding-top: 0; border-top: 0;
    margin-left: auto; /* keep CTAs on the right when space allows */
  }
  .btn-nav {
    font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
    padding: 0.5rem 0.85rem;
    min-height: 36px;
  }

  .faq-split { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); }
  .faq-visual {
    order: 0;
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
  }
  .faq-quotes-cluster {
    display: block;
    min-height: 42rem;
  }
  .faq-quote {
    position: absolute;
    animation: hero-device-float 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.55s);
  }
  .faq-quote--nps {
    top: 0;
    left: 0;
    width: 66%;
    transform: rotate(5deg);
    z-index: 3;
  }
  .faq-quote--themes {
    top: 23%;
    left: auto;
    right: 0;
    width: 62%;
    max-width: none;
    grid-column: auto;
    transform: rotate(-6deg);
    z-index: 3;
  }
  .faq-quote--anchor {
    top: 47%;
    left: 4%;
    width: 90%;
    grid-column: auto;
    transform: rotate(-2deg);
    z-index: 4;
    padding: var(--space-5);
  }
  .faq-quote--fast {
    top: 78%;
    bottom: auto;
    left: auto;
    right: 2%;
    width: 74%;
    transform: rotate(4deg);
    z-index: 3;
  }

  .hero { padding: var(--space-9) 0; }
  .hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); align-items: center; }
  .hero-visual { margin-top: 0; min-height: 460px; }

  .cards-grid.cards-4 { grid-template-columns: repeat(4, 1fr); }
  .steps-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .thanks-quotes { grid-template-columns: repeat(4, 1fr); }

  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split-visual { order: 0; }
  .thanks-hero-split .split-visual { order: 0; }
  .thanks-hero-visual.hero-visual { min-height: 460px; }
  .content-section .split-visual { order: 0; }
  .content-layout { grid-template-columns: 0.95fr 1.05fr; }
  .content-author {
    grid-template-columns: minmax(0, 1fr) minmax(152px, 200px);
    grid-template-areas:
      "photo cards"
      "caption cards";
    perspective: 1200px;
  }
  .content-cred-rig {
    align-self: start;
    padding-top: var(--space-2);
    transform:
      rotateX(calc(4deg + var(--hero-device-ry)))
      rotateY(calc(-8deg + var(--hero-device-rx)));
    transition: transform 0.25s ease-out;
  }
  .content-author-stats { grid-template-columns: 1fr; }
  .content-cred-card {
    animation: hero-device-float 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.4s);
  }
  .content-cred-card:nth-child(odd) { transform: rotateY(-6deg) rotateX(2deg); }
  .content-cred-card:nth-child(even) { transform: rotateY(6deg) rotateX(-2deg); }
  /* Cards now sit beside the photo, so the 420px cap no longer applies.
  .content-author-photo,
  .content-author-caption { max-width: 420px; }
  */
  .split-reverse .split-copy { order: 2; }
  .split-reverse .split-visual { order: 1; }
  .feature-list-cols { grid-template-columns: repeat(2, 1fr); }
  .admin-device-stage { min-height: 340px; }
  .admin-device-laptop { max-width: none; }

  .timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
  .timeline::before {
    left: 8%;
    right: 8%;
    top: 22px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .timeline-item {
    grid-template-columns: 1fr;
    justify-items: stretch;
    align-items: start;
    align-content: start;
  }
  .timeline-marker { justify-self: center; }
  .timeline-content { text-align: left; width: 100%; }

  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); align-items: start; }
}

@media (min-width: 1400px) {
  .nav-panel { gap: var(--space-5) var(--space-6); }
  .nav-links { gap: 1.25rem; }
  .nav-link { font-size: 0.875rem; }
  .btn-nav { font-size: 0.8125rem; padding: 0.55rem 1rem; }
}

/* ------------------------------------------------------------
   17.1 GAMES STAGE — MOBILE
   On small screens show a single phone at the bottom of the section,
   bleeding downward. The next section (#conteudo) sits on a
   higher stacking context so it visually "clips" the phone in half.
   ------------------------------------------------------------ */
@media (max-width: 899px) {
  #experiencia { position: relative; z-index: 0; overflow: visible; }
  #conteudo { position: relative; z-index: 1; overflow-x: hidden; } /* paints over the bleed */
  #para-compliance { position: relative; z-index: 1; }

  /* Put the mockup at the bottom of the section (default .split-visual is order:-1) */
  #experiencia .split-visual { order: 2; margin-top: var(--space-4); }

  /* Admin laptop sits above the copy on small screens; flatten the 3D a bit. */
  #para-compliance .split-visual { margin-bottom: var(--space-4); }
  .admin-device-rig {
    transform: rotateX(2deg) rotateY(-4deg);
  }
  .admin-device-laptop { width: 92%; max-width: 100%; margin: 0 auto; }
  #para-compliance { overflow-x: hidden; }

  #experiencia .games-phone-mid,
  #experiencia .games-phone-front { display: none; } /* um celular só no mobile */
  #experiencia .hero-visual {
    min-height: 0;
    align-items: flex-start;
    overflow: visible;
  }
  #experiencia .games-phone-back {
    position: relative;
    left: auto;
    top: auto;
    transform: rotateX(4deg) rotateY(-8deg) scale(0.96);
  }
  /* Empurra a metade inferior para baixo do limite da seção */
  #experiencia .games-phone-back .hero-device-phone {
    margin-bottom: -330px;
  }
}

/* ------------------------------------------------------------
   17b. COOKIE CONSENT (GA4)
   ------------------------------------------------------------ */
.cookie-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1000;
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: rgba(7, 38, 58, 0.96);
  border-top: 1px solid var(--surface-border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}
.cookie-consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.cookie-consent-text {
  margin: 0;
  flex: 1 1 16rem;
  max-width: 52rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-on-dark);
}
.cookie-consent-text a {
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
}
.cookie-consent-reject,
.cookie-consent-accept {
  min-height: 44px;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   18. REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .thanks-quotes .faq-quote,
  .thanks-quotes .faq-quote:nth-child(n) { transform: none !important; }
  .hero-bg-slide--1 { opacity: 1; }
  .hero-bg-slide--2,
  .hero-bg-slide--3,
  .hero-bg-slide--4 { opacity: 0; }
}