/* ==========================================================================
   eRisk — Design tokens
   ========================================================================== */

:root {
  --font-display: 'Clash Display', 'Switzer', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Switzer', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --color-bg: #fdfcfa;
  --color-ink: #201e17;
  --color-ink-soft: #4a463c;
  --color-muted: #78735f;
  --color-line: #e7e2d5;
  --color-surface: #f6f2e9;
  --color-surface-alt: #efe9db;
  --color-white: #ffffff;

  --color-dark: #12110d;
  --color-dark-surface: rgba(255, 255, 255, 0.06);
  --color-dark-line: rgba(255, 255, 255, 0.14);
  --color-dark-text: #f4f1e8;
  --color-dark-muted: rgba(244, 241, 232, 0.72);

  --color-blue: #0094bc;
  --color-teal: #00b8a6;
  --color-green: #2bba6c;
  --gradient-brand: linear-gradient(135deg, var(--color-blue) 0%, var(--color-teal) 50%, var(--color-green) 100%);

  --color-blue-deep: #003c4d;
  --color-teal-deep: #00463f;
  --color-green-deep: #123c26;
  --gradient-brand-deep: linear-gradient(135deg, var(--color-blue-deep) 0%, var(--color-teal-deep) 50%, var(--color-green-deep) 100%);

  --gradient-surface-soft:
    radial-gradient(130% 150% at 5% -15%, rgba(0, 148, 188, 0.4), transparent 60%),
    radial-gradient(130% 150% at 100% 130%, rgba(43, 186, 108, 0.42), transparent 60%),
    radial-gradient(100% 120% at 100% 0%, rgba(0, 184, 166, 0.22), transparent 55%),
    var(--color-surface);

  --radius-lg: 1.75rem;
  --radius-md: 1.25rem;
  --radius-sm: 0.75rem;
  --radius-pill: 999px;

  --gutter: clamp(1.25rem, 1rem + 3vw, 5rem);
  --section-pad: clamp(3.5rem, 3rem + 4.5vw, 7.5rem);
  --gap-lg: clamp(1.5rem, 1.1rem + 2vw, 3rem);
  --gap-md: clamp(1rem, 0.8rem + 1vw, 1.75rem);

  --fs-hero: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
  --fs-h2: clamp(1.9rem, 1.55rem + 1.6vw, 3rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  --fs-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --fs-eyebrow: 0.8125rem;
  --fs-step-num: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-cta-title: clamp(2rem, 1.6rem + 2vw, 3.25rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: var(--section-pad); }

.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background-image: linear-gradient(to right, var(--color-line) 50%, transparent 0%);
  background-size: 10px 1px;
  background-repeat: repeat-x;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Typography
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gradient-brand);
  flex-shrink: 0;
}

.eyebrow--dark { color: var(--color-dark-muted); }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  max-width: 40rem;
}

.section-title--dark { color: var(--color-dark-text); }

.section-title strong,
.cta-final__title strong {
  font-weight: 700;
  background-image: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero__title strong {
  font-weight: 700;
  color: var(--color-white);
}

.section-text {
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
  max-width: 38rem;
  line-height: 1.6;
}

.section-text--dark { color: var(--color-dark-muted); }

.section-note {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  font-style: italic;
  color: var(--color-ink);
  max-width: 34rem;
}

.section-head { margin-bottom: var(--gap-lg); }
.section-head--center { max-width: 44rem; margin-inline: auto; text-align: center; }
.section-head--center .section-title,
.section-head--center .section-text { margin-inline: auto; }
.section-head--dark .section-text { margin-top: 1.25rem; max-width: 42rem; }

#solucao-1,
#solucao-2 { background: #f3faf6; }

#solucao-1 .section-head--center,
#solucao-2 .section-head--center { max-width: 66rem; }
#solucao-1 .section-text,
#solucao-2 .section-text { max-width: 62rem; }

.section-head--center .btn { margin-top: 2rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}

.btn--sm { padding: 0.7rem 1.25rem; font-size: 0.875rem; }

/* Longer CTA labels ("Agende uma conversa no estande", "Veja a jornada em
   90 segundos") are wider than the available content column on very narrow
   phones (~360px and below) — nowrap would clip the text against the pill
   edge there instead of just looking tight, so let it wrap to a second
   line on that one breakpoint only. */
@media (max-width: 380px) {
  .btn { white-space: normal; }
}

.btn--primary {
  background: var(--gradient-brand);
  background-size: 160% 160%;
  color: var(--color-white);
  box-shadow: 0 10px 30px -12px rgba(0, 148, 188, 0.45);
}

.btn--primary:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(0, 148, 188, 0.55);
}

.btn--ghost {
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  background: transparent;
}

.btn--ghost:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}

.section-dark .btn--ghost { border-color: var(--color-dark-line); color: inherit; }
.hero .btn--ghost { border-color: var(--color-white); color: var(--color-white); }

.hero .btn--primary,
.section-bright .btn--primary {
  background: var(--color-white);
  color: var(--color-ink);
}

.hero .btn--primary:hover,
.section-bright .btn--primary:hover { background: var(--color-white); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 0.15rem;
  transition: border-color 0.3s var(--ease), gap 0.3s var(--ease);
}

.link-arrow::after { content: '\2192'; }
.link-arrow:hover { gap: 0.65rem; border-color: var(--color-ink); }

/* ==========================================================================
   Mesh gradient component
   ========================================================================== */

.mesh {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  isolation: isolate;
  transition: transform 0.4s var(--ease);
}

.mesh__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(clamp(28px, 6vw, 70px));
  opacity: 0.85;
  will-change: transform;
}

.mesh__blob--a {
  width: 65%; height: 65%;
  top: -15%; left: -10%;
  background: var(--color-blue);
  animation: meshDriftA 22s var(--ease) infinite alternate;
}

.mesh__blob--b {
  width: 60%; height: 60%;
  bottom: -20%; right: -10%;
  background: var(--color-green);
  animation: meshDriftB 26s var(--ease) infinite alternate;
}

.mesh__blob--c {
  width: 45%; height: 45%;
  top: 30%; left: 30%;
  background: var(--color-teal);
  opacity: 0.65;
  animation: meshDriftC 18s var(--ease) infinite alternate;
}

.mesh__grain {
  position: absolute;
  inset: -10%;
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes meshDriftA {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6%, 8%) scale(1.12); }
}
@keyframes meshDriftB {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-8%, -6%) scale(1.08); }
}
@keyframes meshDriftC {
  from { transform: translate(-6%, 4%) scale(1); }
  to   { transform: translate(5%, -8%) scale(1.15); }
}

.mesh--hero { aspect-ratio: 1 / 1; }

.mesh--full {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  background: var(--gradient-brand);
}

.mesh--full-clean {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  background: var(--color-surface);
}

.mesh--full-clean .mesh__blob { opacity: 0.55; }

/* Fades the whole wash out toward the bottom of its section instead of
   stopping abruptly at the section edge — colored top, clean to
   var(--color-bg) by the lower third. */
.mesh--top-fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 8%, transparent 40%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 8%, transparent 40%);
}

.mesh--soft { aspect-ratio: 4 / 5; }
.mesh--soft .mesh__blob { opacity: 0.55; }

.mesh--card-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  aspect-ratio: auto;
}

.mesh--card-bg.mesh--alt .mesh__blob--a { background: var(--color-green); }
.mesh--card-bg.mesh--alt .mesh__blob--b { background: var(--color-blue); }

.mesh--section {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: var(--gradient-brand-deep);
}

.mesh--section .mesh__blob { opacity: 0.6; filter: blur(clamp(50px, 10vw, 140px)); }


/* ==========================================================================
   Header
   ========================================================================== */

.announce {
  background: var(--color-dark);
  color: var(--color-dark-text);
  text-align: center;
  padding: 0.6rem var(--gutter);
}

.announce p {
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 252, 250, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow 0.3s var(--ease);
}

.site-header.is-scrolled { box-shadow: 0 8px 24px -18px rgba(18, 17, 13, 0.35); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

.site-header__logo img { height: 1.6rem; width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

.site-nav a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-ink-soft);
  transition: color 0.25s var(--ease);
}

.site-nav a:hover { color: var(--color-ink); }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  padding: 0.25rem;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem var(--gutter) 2rem;
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
}

.mobile-nav a { font-size: 1rem; font-weight: 500; }
.mobile-nav .btn { align-self: flex-start; margin-top: 0.5rem; }

@media (max-width: 1023px) {
  .site-nav { display: none; }
  .site-header__actions .btn--primary { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav.is-open { display: flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 2.4rem + 3vw, 6rem);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: center;
}

/* Grid/flex items default to min-width: auto, which for a replaced element
   like <video> falls back to its native pixel resolution — not the CSS
   width set on it. Without this, a grid column (or a max-width wrapper)
   gets blown out to the video's raw encoded size, most visibly on mobile
   where there's no spare track width to absorb it. */
.hero__visual,
.product-card,
.febraban-hero__visual {
  min-width: 0;
}

.fluid-video { min-width: 0; min-height: 0; }

.hero__visual-block {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 30px 70px -30px rgba(18, 17, 13, 0.25);
  overflow: hidden;
}

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

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-white);
  max-width: 22ch;
}

.hero__lead {
  margin-top: 1.5rem;
  font-size: var(--fs-lead);
  color: var(--color-white);
  text-shadow: 0 2px 20px rgba(8, 10, 8, 0.18);
  max-width: 34rem;
  line-height: 1.6;
}

.hero .eyebrow { color: var(--color-white); opacity: 0.85; }
.hero .eyebrow::before { background: var(--color-white); }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 22rem; margin-inline: auto; width: 100%; }
}

/* Hero stays pinned under the header while "O problema" (opaque, higher
   z-index) scrolls up and covers it — the wrapper's extra height is the
   runway that gives the pin something to hold through. Desktop only: on a
   short mobile viewport the extra scroll distance costs more than the
   effect is worth, so it's skipped there and the hero scrolls normally. */
@media (min-width: 1024px) {
  .hero-pin { position: relative; height: 145vh; }

  .hero-pin .hero {
    position: sticky;
    top: var(--header-h, 84px);
    z-index: 0;
    height: calc(100vh - var(--header-h, 84px));
    min-height: unset;
  }

  .hero-pin__cover { position: relative; z-index: 1; background: var(--color-bg); }
}

/* ==========================================================================
   O problema
   ========================================================================== */

.problem__inner {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: center;
}

.problem__visual-block {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(18, 17, 13, 0.25);
}

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

@media (max-width: 1023px) {
  .problem__inner { grid-template-columns: 1fr; }
  .problem__visual { max-width: 20rem; margin-inline: auto; width: 100%; }
}

/* ==========================================================================
   O produto
   ========================================================================== */

.product__layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 1.5rem + 2.5vw, 5rem);
  align-items: start;
}

.product__sticky {
  position: sticky;
  top: 9rem;
}

.product__grid {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.product-card {
  position: relative;
  isolation: isolate;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
}

.product-card__visual {
  aspect-ratio: 16 / 10;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-card__visual img,
.product-card__visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  font-weight: 500;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #000;
}

.product-card p { color: var(--color-ink-soft); padding-right: 8rem; }

@media (max-width: 1023px) {
  .product__layout { grid-template-columns: 1fr; }
  .product__sticky { position: static; }
}

/* ==========================================================================
   Dark sections (Solução 1 / 2, Aprendizado, CTA final)
   ========================================================================== */

.section-dark {
  position: relative;
  color: var(--color-dark-text);
  padding-block: var(--section-pad);
}

.section-dark__inner { position: relative; z-index: 1; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-md);
  margin-top: var(--gap-lg);
}

.card {
  background: var(--gradient-surface-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

.card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  margin-bottom: 0.85rem;
  line-height: 1.25;
}

.card p { color: var(--color-ink-soft); }

.card--dark {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-line);
  backdrop-filter: blur(6px);
}

.card--dark p { color: var(--color-dark-muted); }

.card--wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
}

@media (max-width: 1023px) {
  .feature-grid { grid-template-columns: 1fr; }
  .card--wide { grid-column: span 1; grid-template-columns: 1fr; }
}

.solution-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: start;
  margin-top: var(--gap-lg);
}

.solution-split__visual-block {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 3px dashed var(--color-dark-line);
  box-shadow: 0 30px 70px -30px rgba(8, 10, 8, 0.35);
  padding: 0.75rem;
  overflow: hidden;
}

.solution-split__visual-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 0.5rem);
  display: block;
}

.solution-split__accordion,
.solution-split__accordion .faq-item {
  border-color: var(--color-dark-line);
}

.solution-split__accordion .faq-item__trigger { color: var(--color-dark-text); }

.solution-split__accordion .faq-item__icon::before,
.solution-split__accordion .faq-item__icon::after {
  background: var(--color-dark-text);
}

.solution-split__accordion .faq-item__panel > * {
  color: var(--color-dark-muted);
}

@media (max-width: 1023px) {
  .solution-split { grid-template-columns: 1fr; }
  .solution-split__visual-block { max-width: 22rem; margin-inline: auto; width: 100%; }
}

/* Horizontal pinned scroll — the section (title + cards) stays stuck as one
   block right under the header while vertical scroll drives the track
   sideways. The block is sized to its own content (not forced to fill the
   screen) so it never reserves blank space before or after itself — it
   simply appears the moment you scroll to it and stays put while the cards
   slide by. `.hscroll` gets its runway height set by JS (script.js); without
   JS it just falls back to a normal-height section whose card row scrolls
   horizontally on its own (touch/drag/wheel). */
.hscroll { position: relative; }

.hscroll__sticky {
  position: sticky;
  top: var(--header-h, 0px);
  padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-bottom: clamp(1.25rem, 0.9rem + 1.5vw, 2.25rem);
}

.hscroll__head { margin-bottom: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); }
.hscroll__head .eyebrow { margin-bottom: 0.5rem; }
.hscroll__head .section-title { font-size: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem); }
.hscroll__head .section-text { margin-top: 0.6rem; font-size: var(--fs-body); }
.hscroll__head.section-head--center .btn { margin-top: 1rem; }

/* Solução 1 (trial): title left, complementary copy right, instead of the
   centered stacked header. */
.hscroll__head--split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--gap-lg);
  align-items: start;
  text-align: left;
}

.hscroll__head--split .section-title { margin-inline: 0; max-width: none; font-size: var(--fs-h2); }

.hscroll__head-copy > * + * { margin-top: 0.9rem; }

.hscroll__head--split .section-text { margin-inline: 0; margin-top: 0; max-width: none; }

.hscroll__lead {
  font-weight: 700;
  color: var(--color-dark-text);
}

.hscroll__head--split .btn { margin-top: 1.5rem; }

@media (max-width: 767px) {
  .hscroll__head--split { grid-template-columns: 1fr; }
}

.hscroll__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.hscroll.is-active .hscroll__viewport {
  overflow: hidden;
  scroll-snap-type: none;
}

.hscroll__track {
  display: flex;
  gap: var(--gap-lg);
  padding-inline: var(--gutter);
  will-change: transform;
}

.hscroll__slide {
  flex: 0 0 auto;
  width: min(66rem, 84vw);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--gap-md);
  scroll-snap-align: start;
}

.hscroll__slide .solution-split__visual-block {
  height: 100%;
  aspect-ratio: auto;
  max-width: none;
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.hscroll__slide .solution-split__visual-block img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }

.hscroll__slide .card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-inline: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
}

.hscroll__slide .card h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); line-height: 1.1; padding-bottom: 1rem; border-bottom: 1px solid #000; }
.hscroll__slide .card p { margin-top: 0.75rem; }
.hscroll__slide .card p:not(:has(+ .check-list)) { padding-right: 3rem; }
.hscroll__slide .check-list { margin-top: 1.25rem; }

/* One unified card — shared background wraps both the inset photo and the
   text, instead of two separate floating blocks. */
.hscroll__slide {
  position: relative;
  isolation: isolate;
  align-items: center;
  overflow: hidden;
  background: #fffaf2;
  border: 1px solid #000;
  border-radius: var(--radius-lg);
  padding: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
}

.hscroll__slide .solution-split__visual-block {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hscroll__slide .solution-split__visual-block img { border-radius: var(--radius-md); }

.hscroll__slide .card {
  background: none;
  padding: 0;
  padding-inline: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
  justify-content: space-between;
}

.hscroll__track { gap: clamp(4rem, 3rem + 5vw, 8rem); }

/* Solução 1 (trial): a full-bleed loading bar pinned to the bottom of the
   screen, visible only while this section is in view. */
.hscroll__progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: rgba(18, 17, 13, 0.12);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}

.hscroll__progress.is-visible { opacity: 1; }

.hscroll__progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gradient-brand);
}

.hscroll__dots {
  margin-top: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.hscroll__dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-dark-line);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.hscroll__dots span.is-active {
  background: var(--gradient-brand);
  transform: scale(1.4);
}

@media (max-width: 1023px) {
  /* While the section is pinned, scrolling down drives the horizontal
     reveal instead of showing more content below — so the head + one
     slide together must fully fit inside the screen at once, or whatever
     doesn't fit is simply unreachable. The long description duplicates
     what the slides themselves say, so it's dropped here to make room. */
  .hscroll__head--split .section-text { display: none; }
  .hscroll__head { margin-bottom: 1rem; }
  .hscroll__head--split .section-title { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); }

  /* This is a horizontal scroll — the slide doesn't need to fit inside
     one screen width, the pin reveals the rest as the visitor keeps
     scrolling. So it's sized generously wide instead of squeezed to fit,
     which also gives the text column enough room that it wraps to fewer
     lines and keeps the slide's HEIGHT (the one dimension that does have
     to fit on screen, since the pin can't reveal anything below the fold)
     shorter than the cramped version did. */
  .hscroll__slide {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 1.25rem;
    width: clamp(26rem, 170vw, 40rem);
    padding: 1.5rem;
  }
  .hscroll__slide .card { padding-inline: 0; justify-content: center; }

  .hscroll__slide .card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; line-height: 1.2; padding-bottom: 0.6rem; }
  .hscroll__slide .card p { margin-top: 0.4rem; font-size: var(--fs-small); line-height: 1.4; }

  /* Two of these slides carry a long checklist instead of a paragraph —
     left unbounded it would make that one slide much taller than the
     others and blow past the screen height budget above. Capped and
     internally scrollable instead, same idea as the outer page just at
     a smaller scale. */
  .hscroll__slide .check-list {
    max-height: 8rem;
    overflow-y: auto;
    margin-top: 0.5rem;
    gap: 0.4rem;
  }
  .hscroll__slide .check-list li { font-size: 0.78rem; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  .hscroll__sticky { position: static; }
  .hscroll__viewport { overflow-x: auto; }
  .hscroll__track { transform: none !important; }
}

.check-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }

.check-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-dark-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--gradient-brand);
}

.check-list--tight li { padding-left: 1.4rem; }

.benefit-row {
  margin-top: var(--gap-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
  padding-top: var(--gap-lg);
}

.benefit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 22rem;
  background: transparent;
  border: 1px solid #000;
  border-radius: var(--radius-md);
  padding: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.benefit__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #000;
}

.benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-white);
}

.benefit__icon svg { width: 1.3rem; height: 1.3rem; }

.benefit h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.1;
}

.benefit p { margin-bottom: 0.75rem; padding-right: 1.5rem; font-size: var(--fs-small); color: var(--color-dark-muted); }

@media (max-width: 1023px) {
  .benefit-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .benefit-row { grid-template-columns: 1fr; }
}

.comprehension {
  position: relative;
  isolation: isolate;
  grid-column: span 2;
  height: 22rem;
  overflow: hidden;
  padding: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-radius: var(--radius-md);
  background: var(--gradient-surface-soft);
}

.comprehension .mesh--card-bg { background: transparent; }

.comprehension h3 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  margin-bottom: 1rem;
  color: var(--color-ink);
}

.comprehension p { position: relative; max-width: 32rem; color: var(--color-ink-soft); }

@media (max-width: 1023px) {
  .comprehension { grid-column: span 2; }
}
@media (max-width: 599px) {
  .comprehension { grid-column: 1 / -1; }
}

.learning {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--gap-lg);
  align-items: start;
}

.learning > .section-head { padding-right: clamp(1rem, 0.5rem + 3vw, 4rem); }

#aprendizado .section-text { color: var(--color-ink); text-shadow: none; }

/* Height is fixed on the wrapper (not the sticky card) so the card's tall
   content can't stretch the sticky range past the image's own bounds. */
.learning__visual {
  position: relative;
  aspect-ratio: 4 / 5;
}

.learning__visual-block {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gradient-surface-soft);
}

.learning__visual-block::after {
  content: '';
  position: absolute;
  inset: -10%;
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.card--overlay {
  position: sticky;
  top: 6.5rem;
  margin: 1.5rem;
  padding: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
  background: rgba(255, 255, 255, 0.7);
  border: none;
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
}

.card--overlay { color: var(--color-ink); }
.card--overlay p { color: var(--color-ink-soft); padding-right: 3rem; }

@media (max-width: 1023px) {
  .learning { grid-template-columns: 1fr; }
  .learning > .section-head { padding-right: 0; }
  /* Height comes from the card (the only in-flow child now that it's
     static instead of sticky); the image block stays absolute/inset:0
     so it fills exactly that height and the card reads as sitting
     inside it, like the desktop overlap, just without the scroll-pin. */
  .learning__visual { aspect-ratio: auto; }
  .card--overlay { position: static; margin: 1.5rem; }

  #aprendizado .section-head,
  #aprendizado .section-head * {
    color: var(--color-ink);
    text-shadow: none;
    -webkit-text-fill-color: var(--color-ink);
  }
}

/* For sections with a vivid/dark mesh background: text stays white with a
   soft shadow for legibility over the lighter patches of the mesh; cards
   become frosted glass (translucent white + blur) instead of opaque. */
.section-bright {
  color: var(--color-white);
  text-shadow: 0 2px 20px rgba(8, 10, 8, 0.18);
  --color-dark-text: var(--color-white);
  --color-dark-muted: rgba(255, 255, 255, 0.82);
  --color-dark-line: rgba(255, 255, 255, 0.35);
  --color-dark-surface: rgba(255, 255, 255, 0.14);
}

.section-bright .btn--ghost { border-color: var(--color-white); color: inherit; }

.section-bright .card--dark {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 24px 48px -28px rgba(8, 10, 8, 0.35);
}

.section-bright .section-title strong {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--color-white);
  -webkit-text-fill-color: var(--color-white);
}

/* Aprendizado contínuo uses the same clean, cream-based gradient as the
   product cards instead of the vivid full-strength one — text goes back to
   dark ink since the background reads much lighter overall. */
.section-clean {
  color: var(--color-ink);
  --color-dark-text: var(--color-ink);
  --color-dark-muted: var(--color-ink-soft);
  --color-dark-line: var(--color-line);
  --color-dark-surface: var(--color-surface);
}

.section-clean .card--dark {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 24px 48px -30px rgba(18, 17, 13, 0.18);
}

.section-clean .benefit__icon {
  background: var(--gradient-brand);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--color-white);
}

/* Solução 1 (trial): light outline icons instead of filled gradient circles. */
#solucao-1 .benefit__icon {
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid var(--color-green);
  color: var(--color-green);
}

/* ==========================================================================
   Compliance
   ========================================================================== */

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-md);
}

/* Same format as the Solução 1 benefit cards: title + icon in a head row,
   divider, fixed height so all four match regardless of text length. */
.compliance-grid .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 30rem;
  padding: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
  background: transparent;
  border: 1px solid #000;
  border-radius: var(--radius-md);
}

.compliance-grid .card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #000;
}

.compliance-grid .card h3 { margin-bottom: 0; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); }
.compliance-grid .card p { margin-bottom: 0.75rem; padding-right: 6rem; }

.compliance-grid .benefit__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid var(--color-green);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--color-green);
}

.compliance-grid .benefit__icon svg { width: 1.7rem; height: 1.7rem; }

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

/* ==========================================================================
   Como funciona
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
}

.step { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--color-line); }

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.5rem, 2.2rem + 1vw, 3.25rem);
  height: clamp(2.5rem, 2.2rem + 1vw, 3.25rem);
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-step-num);
  margin-bottom: 1.25rem;
}

.step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  margin-bottom: 0.65rem;
  line-height: 1.25;
}

.step p { color: var(--color-ink-soft); font-size: var(--fs-small); }

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

/* ==========================================================================
   Para quem é
   ========================================================================== */

/* Reuses .product__layout / .product__sticky / .product__grid (see "O
   produto" below) — same sticky-left-column-while-cards-scroll-by pattern,
   just with audience-card content instead of product-card. */
.audience-card {
  padding: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface-soft);
}

.audience-card__visual {
  aspect-ratio: 16 / 10;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}

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

.audience-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  padding-right: 6rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #000;
}

.audience-card p { color: var(--color-ink-soft); padding-right: 6rem; }

/* ==========================================================================
   Piloto
   ========================================================================== */

.pilot__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.pilot__head { max-width: 42rem; margin-inline: auto; text-align: center; }
.pilot__head .section-title,
.pilot__head .section-text { margin-inline: auto; }

.pilot__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.pilot-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
}

.pilot-step {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 26rem;
  padding: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  background: #fffaf2;
  border: 1px solid #000;
  border-radius: var(--radius-md);
}

.pilot-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #000;
}

.pilot-step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
}

.pilot-step .step__num {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid var(--color-green);
  color: var(--color-green);
  margin-bottom: 0;
}

.pilot-step p { color: var(--color-ink-soft); font-size: var(--fs-small); padding-right: 2rem; }

@media (max-width: 1023px) {
  .pilot-steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--gap-lg);
  align-items: start;
}

.faq .section-head { margin-bottom: 0; position: sticky; top: 9rem; }

.faq-list { display: flex; flex-direction: column; gap: 1rem; }

.faq-item {
  border: 1px solid #000;
  border-radius: var(--radius-md);
  padding-inline: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 500;
  color: var(--color-ink);
}

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--color-ink);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}

.faq-item__icon::before { width: 100%; height: 2px; }
.faq-item__icon::after { width: 2px; height: 100%; }

.faq-item.is-open .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}

.faq-item__panel > * {
  overflow: hidden;
  color: var(--color-ink-soft);
  padding-right: 3rem;
}

.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; padding-bottom: 1.5rem; }

@media (max-width: 1023px) {
  .faq__inner { grid-template-columns: 1fr; }
  .faq .section-head { position: static; margin-bottom: var(--gap-lg); }
}

/* ==========================================================================
   CTA final
   ========================================================================== */

.cta-final { text-align: center; }

.cta-final__inner {
  max-width: 42rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.cta-final__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-cta-title);
  line-height: 1.08;
  color: var(--color-white);
}

.cta-final__title strong {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--color-white);
  -webkit-text-fill-color: var(--color-white);
}

.cta-final .section-text { color: rgba(255, 255, 255, 0.85); }

.cta-final .btn { margin-top: 0.75rem; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-dark);
  color: var(--color-dark-text);
  padding-top: clamp(3rem, 2.5rem + 2vw, 5rem);
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-bottom: 1px solid var(--color-dark-line);
}

.site-footer__logo { height: 1.6rem; width: auto; filter: brightness(0) invert(1); margin-bottom: 1rem; }

.site-footer__brand p { color: var(--color-dark-muted); max-width: 20rem; }

.site-footer__nav { display: flex; gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); flex-wrap: wrap; }

.site-footer__nav a { font-size: var(--fs-small); color: var(--color-dark-muted); transition: color 0.25s var(--ease); }
.site-footer__nav a:hover { color: var(--color-dark-text); }

.site-footer__bottom { padding-block: 1.5rem; }
.site-footer__bottom p { font-size: var(--fs-small); color: var(--color-dark-muted); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
  /* Elements later in a stagger (higher --reveal-delay) travel a little
     further too, not just later — reads as depth/parallax rather than a
     flat "everything pops in on a timer" reveal. */
  --reveal-y: clamp(1.25rem, calc(1.25rem + var(--reveal-delay, 0) * 0.3rem), 2.75rem);
  opacity: 0;
  transform: translateY(var(--reveal-y)) scale(0.985);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0) * 110ms);
}

[data-reveal].is-inview { opacity: 1; transform: translateY(0) scale(1); }

/* Continuous scroll-linked drift, independent of the one-shot reveal above
   (applied to a different, inner element — e.g. the image inside a
   [data-reveal] visual block — so the two transforms never fight over the
   same element). Speed via data-parallax-speed; --parallax-y is written by
   script.js on scroll, rAF-throttled. */
[data-parallax] {
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}

/* Oversized + recentred so the parallax drift never uncovers an edge
   inside its overflow:hidden frame. !important because this utility only
   ever gets applied alongside a more specific "<block> img { height:100% }"
   rule it needs to beat, regardless of source order. */
.parallax-cover {
  position: relative;
  height: 120% !important;
  top: -10%;
}

/* ==========================================================================
   Página: Sobre a eRisk
   ========================================================================== */

.about-banner {
  width: 100%;
  aspect-ratio: 1440 / 566;
  overflow: hidden;
}

.about-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 767px) {
  .about-banner { aspect-ratio: 4 / 3; }
}

/* Mesma proporção visual da seção "O problema" (imagem + texto, 0.85fr/1fr),
   só que com o texto vindo primeiro no DOM — a ordem já resolve o espelhamento
   sem precisar de um modificador de grid separado. */
.purpose__inner {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: center;
}

.purpose__copy .section-text { margin-top: 1.1rem; }
.purpose__copy .section-text:first-of-type { margin-top: 1.5rem; }

.purpose__visual-block {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(18, 17, 13, 0.25);
}

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

@media (max-width: 1023px) {
  .purpose__inner { grid-template-columns: 1fr; }
  .purpose__visual { max-width: 20rem; margin-inline: auto; width: 100%; }
}

/* Infinite marquee — decorative continuation of the CTA final statement,
   sharing that section's mesh background instead of starting a new one.
   Two identical .marquee__group blocks back to back; animating the track
   exactly -50% (= one group's width) loops seamlessly since group 2 lands
   pixel-for-pixel where group 1 started. */
.marquee {
  overflow: hidden;
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}

.marquee__group { display: flex; flex: 0 0 auto; }

.marquee__group span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  padding-inline: 1.5rem;
  color: var(--color-ink);
}

.marquee__group span::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 3rem;
  border-radius: 50%;
  background: var(--color-ink);
  opacity: 0.4;
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

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

/* Standalone big statement — same big centered line used on other pages,
   without the marquee/mesh treatment (no colored section above it to
   continue from here). */
.big-statement { text-align: center; }

/* The marquee's own margin-top is meant for when it follows real content
   (the CTA text on the merged sections) — here it's the section's only
   child, so that extra margin only pushed it below center against the
   section's symmetric top/bottom padding. */
.big-statement .marquee { margin-top: 0; }

/* ==========================================================================
   Página: Febraban Tech
   ========================================================================== */

.febraban-hero { text-align: center; }

.febraban-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.febraban-hero__visual { width: min(20rem, 72vw); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }

.febraban-hero__visual-block {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(18, 17, 13, 0.25);
}

.febraban-hero__visual-block img,
.febraban-hero__visual-block video { width: 100%; height: 100%; object-fit: cover; display: block; }

.febraban-hero__title { max-width: 52rem; margin-inline: auto; }

/* The "que" / "a eRisk foi construída." break only makes sense at wider
   widths — on a narrow phone "É exatamente assim que" already wraps on
   its own, so the hard break just strands "que" alone. Drop it there and
   let that line reflow naturally. */
@media (max-width: 599px) {
  .febraban-hero__break { display: none; }
}

.febraban-hero__lead { max-width: 42rem; margin-inline: auto; }
.febraban-hero__lead p + p { margin-top: 0.75rem; }

.febraban-hero__countdown-label {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.febraban-countdown {
  display: flex;
  justify-content: center;
  gap: clamp(0.75rem, 0.6rem + 0.8vw, 1.25rem);
  flex-wrap: wrap;
  margin-top: 0.85rem;
}

.febraban-countdown__item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.5rem;
  min-width: 5.5rem;
}

.febraban-countdown__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.febraban-countdown__unit {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.febraban-hero__ctas {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

.agenda { position: relative; background: var(--color-surface); }

.agenda__layout {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: start;
}

.agenda__info .section-title { margin-top: 0.5rem; }

.agenda__facts {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.agenda__facts li { display: flex; align-items: center; gap: 0.85rem; }

.agenda__facts li span:last-child { font-size: var(--fs-body); color: var(--color-ink); }

.agenda__fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: rgba(18, 17, 13, 0.06);
  color: var(--color-ink);
}

.agenda__fact-icon svg { width: 1.1rem; height: 1.1rem; }

/* Form card */
.agenda__form {
  position: relative;
  background: var(--gradient-brand);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.6rem + 2vw, 2.75rem);
  box-shadow: 0 30px 70px -30px rgba(18, 17, 13, 0.25);
}

.agenda__form h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--color-white);
}

.agenda__form-sub { margin-top: 0.35rem; margin-bottom: 1.75rem; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.85); }

.agenda__field { margin-top: 1.1rem; }
.agenda__field:first-child { margin-top: 0; }

.agenda__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.agenda__field-row .agenda__field { margin-top: 0; }

.agenda__field label,
.agenda__field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.agenda__field input,
.agenda__field select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: border-color 0.25s var(--ease);
}

.agenda__field input::placeholder { color: var(--color-muted); }

.agenda__field input:focus,
.agenda__field select:focus {
  outline: none;
  border-color: var(--color-white);
}

.agenda__field select { appearance: auto; cursor: pointer; }

.agenda__slots-hint { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.85); }

.agenda__slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.agenda__slot-btn {
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}

.agenda__slot-btn:hover { border-color: var(--color-white); }

.agenda__slot-btn.is-selected {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-teal);
}

.agenda__slot-btn--taken {
  background: rgba(255, 255, 255, 0.4);
  color: rgba(18, 17, 13, 0.5);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: 0.7;
}

.agenda__slot-btn--taken:hover { border-color: rgba(255, 255, 255, 0.5); }

.agenda__form-error { margin-top: 0.85rem; font-size: var(--fs-small); color: var(--color-white); font-weight: 600; }
.agenda__form-error[hidden] { display: none; }

.agenda__submit {
  width: 100%;
  margin-top: 1.5rem;
  background: var(--color-ink);
  color: var(--color-white);
  box-shadow: none;
}

.agenda__submit:hover { background: var(--color-ink); opacity: 0.88; }

.agenda__form-note { margin-top: 1rem; text-align: center; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.85); line-height: 1.5; }

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

@media (max-width: 599px) {
  .agenda__field-row { grid-template-columns: 1fr; }
  .agenda__slots { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: the "padding-right on paragraphs/titles" sophistication trick
   only makes sense on wide desktop cards — on a narrow phone screen it
   just eats into an already-tight text column, so it's switched off here. */
@media (max-width: 599px) {
  .product-card p,
  .audience-card p,
  .audience-card h3,
  .compliance-grid .card p,
  .benefit p,
  .pilot-step p,
  .hscroll__slide .card p,
  .card--overlay p {
    padding-right: 0;
  }

  /* These cards use a fixed desktop height so every card in a row matches;
     on a single-column mobile layout that fixed height can be shorter than
     the text needs, so text was overflowing past the card's rounded
     border. Mobile just lets the card grow with its content instead. */
  .benefit,
  .comprehension,
  .compliance-grid .card,
  .pilot-step {
    height: auto;
  }

  /* With height:auto the justify-content: space-between on these cards has
     no leftover space left to distribute, so the paragraph was landing
     glued to the divider right below the title. A fixed gap replaces that
     space-between-driven spacing on mobile. */
  .benefit,
  .compliance-grid .card,
  .pilot-step {
    gap: 1.5rem;
  }

  .benefit h4 { font-weight: 600; }
}