/* ===== Tokens ===== */
:root {
  --bg: #000000;
  --bg-alt: #000000;
  --fg: #ffffff;
  --muted: #9a9a9a;
  --muted-label: #727272;
  --card: #2a2a2a;
  --card-border: #3a3a3a;
  --radius-btn: 2px;
  --radius-card: 6px;
  --radius-pill: 40px;
  --container-w: 1216px;
  --content-w: 1340px;
  --header-h: 76px;
  --ff: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ===== Reset ===== */
* { box-sizing: border-box; }
/* scroll-behavior intentionally omitted: js/smooth-scroll.js (Lenis) owns smoothing */
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* site-wide: no text selection, so clicking/dragging (carousels, buttons,
     the custom cursor) never turns into an accidental text-selection highlight */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
/* site rule: balanced line lengths, so short texts never leave a long line over
   a stub (browsers skip balancing on long paragraphs, which wrap as usual) */
h1, h2, h3, h4, p, li, blockquote, figcaption { text-wrap: balance; }
h1, h2 { font-weight: 700; } /* site rule: page and section titles (h1, h2) are bold, 700 — no 800 accents */
button { font-family: inherit; cursor: pointer; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #fff;
  color: #000;
  padding: 10px 16px;
  z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }

.container {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 96px 0; }
.section-title {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.3;
  max-width: 780px;
  margin: 0 auto 56px;
}
.section-title strong { font-weight: 700; }
@media (min-width: 861px) {
  .solutions .section-title,
  .stats .section-title {
    max-width: none;
    white-space: nowrap;
  }
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-size: 17px;
  font-weight: 800;
  padding: 12px 24px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
  white-space: nowrap;
  text-transform: uppercase;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: #fff;
  color: #202020;
}
.btn-primary:hover { opacity: .92; }
.btn-secondary {
  background: #fff;
  color: #202020;
  font-size: 14px;
  letter-spacing: 1.95px;
  padding: 8px 18px;
}
.btn-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020a07;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.95px;
  padding: 0 18px;
  height: 29px;
  box-sizing: border-box;
  line-height: 1;
  border: 1px solid rgba(80, 234, 154, 0.3);
}

/* ===== Glow buttons (mouse-tracked spotlight + rotating border glow) ===== */
.glow-button {
  --button-background: #020a07;
  --button-color: #fff;
  --button-shadow: rgba(80, 234, 154, 0.1);
  --button-border-dim: rgba(80, 234, 154, 0.3);
  --button-border-bright: #d4fff0;
  --button-glow-start: #baffe0;
  --button-glow-end: #0d8f5f;

  appearance: none;
  outline: none;
  border: none;
  font-family: inherit;
  border-radius: var(--radius-btn);
  position: relative;
  line-height: 1;
  cursor: pointer;
  color: var(--button-color);
  padding: 0;
  margin: 0;
  background: none;
  z-index: 1;
  box-shadow: 0 4px 10px var(--button-shadow);
}
.glow-button .gradient {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.glow-button .gradient::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  padding-bottom: 220%;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg,
    var(--button-border-dim) 0deg,
    var(--button-border-dim) 280deg,
    var(--button-border-bright) 320deg,
    var(--button-border-dim) 360deg);
  animation: glowRotate 2.4s linear infinite;
}
/* 15/10 (performance): no spinning while the button is off screen (js/main.js) */
.glow-button.is-offscreen .gradient::before { animation-play-state: paused; }
.glow-button span {
  z-index: 1;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: fit-content;
  border-radius: inherit;
  background-color: var(--button-background);
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.95px;
  padding: 8px 18px;
}
.glow-button span::before {
  content: '';
  position: absolute;
  left: -16px;
  top: -16px;
  transform: translate(var(--pointer-x, 0px), var(--pointer-y, 0px)) translateZ(0);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--button-glow, transparent);
  opacity: var(--button-glow-opacity, 0);
  transition: opacity var(--button-glow-duration, .5s);
  filter: blur(20px);
}
.glow-button:hover {
  --button-glow-opacity: 1;
  --button-glow-duration: .25s;
}
.glow-button--tight span {
  padding: 8px 18px;
}
.glow-button--sm span {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.95px;
}
@keyframes glowRotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .glow-button .gradient::before { animation: none; }
}

/* ===== Custom crosshair cursor (js/cursor.js, body[data-cursor="crosshair"]) =====
   A small, light white cross. Over something clickable the cross
   folds away while a thin ring draws itself round, like a loader. */
@property --cx-gap {
  syntax: '<length>';
  inherits: true;
  initial-value: 4px;
}
html.cx-on, html.cx-on * { cursor: none !important; }
.cx-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 10000;
  pointer-events: none;
  transition: opacity .2s var(--ease);
  /* dark hairline so it still reads over the white cards */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .8)) drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.cx-cursor.is-hidden { opacity: 0; }
.cx-inner {
  position: absolute;
  left: 0;
  top: 0;
  --cx-gap: 4px;
  transition: --cx-gap .3s cubic-bezier(.16,1,.3,1);
}
.cx-arm {
  position: absolute;
  background: rgba(255, 255, 255, .95);
  border-radius: 1px;
  transition: opacity .2s var(--ease);
}
.cx-t, .cx-b { width: 1.5px; height: 7px; left: -.75px; }
.cx-l, .cx-r { width: 7px; height: 1.5px; top: -.75px; }
.cx-t { top: -7px; transform: translateY(calc(-1 * var(--cx-gap))); }
.cx-b { top: 0; transform: translateY(var(--cx-gap)); }
.cx-l { left: -7px; transform: translateX(calc(-1 * var(--cx-gap))); }
.cx-r { left: 0; transform: translateX(var(--cx-gap)); }
.cx-dot { display: none; }
/* the ring: drawn stroke only, starting at 12 o'clock */
.cx-ring {
  position: absolute;
  left: -16px;
  top: -16px;
  overflow: visible;
  transform: rotate(-90deg);
  transition: transform .2s var(--ease);
}
.cx-ring circle {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  /* leaving: un-draws quickly */
  transition: stroke-dashoffset .16s var(--ease);
}
/* over something clickable: the cross folds in and fades, the ring draws itself */
.cx-cursor.is-hover .cx-inner { --cx-gap: -2px; }
.cx-cursor.is-hover .cx-arm { opacity: 0; }
.cx-cursor.is-hover .cx-ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset .3s cubic-bezier(.65,0,.35,1); }
/* pressing: a small give */
.cx-cursor.is-down .cx-inner { --cx-gap: 1px; transition-duration: .1s; }
.cx-cursor.is-down .cx-ring { transform: rotate(-90deg) scale(.85); transition-duration: .12s; }
@media (prefers-reduced-motion: reduce) {
  .cx-inner, .cx-ring, .cx-arm, .cx-ring circle { transition: none !important; }
}
/* 29/10 (her request): no more crosshair. A small white outline circle; over
   something clickable it grows a little and the outline turns neon green.
   The stroke keeps its width while the ring scales. */
.cx-arm { display: none; }
.cx-ring {
  transform: scale(.5);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.cx-ring circle {
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
  transition: stroke .2s var(--ease);
}
.cx-cursor.is-hover .cx-ring { transform: scale(.8); }
.cx-cursor.is-hover .cx-ring circle { stroke: #50ea9a; transition: stroke .2s var(--ease); }
.cx-cursor.is-down .cx-ring { transform: scale(.42); transition-duration: .12s; }
.cx-cursor.is-hover.is-down .cx-ring { transform: scale(.68); }
/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled {
  /* 09/10: a see-through bar (same strength as the bar's own fade at the top
     of the page) with everything passing behind it blurred (her comment:
     "30%" blur → 30% stronger than the original 8px). At 92% black the blur
     could hardly be seen. 09/10: +10 points of black (55% → 65%). */
  background: rgba(0,0,0,.65);
  -webkit-backdrop-filter: blur(10.4px);
  backdrop-filter: blur(10.4px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.header-inner {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.logo { flex: 0 0 auto; line-height: 0; margin-right: auto; }
.logo img { height: 34px; width: auto; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}

.primary-nav { flex: none; }
.primary-nav > ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}
.nav-link {
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.95px;
  padding: 4px 0;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: #50ea9a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-link:hover::after,
.has-dropdown.is-open > .nav-link::after {
  transform: scaleX(1);
}
.has-dropdown { position: relative; }
.has-dropdown .nav-link { display: flex; align-items: center; gap: 6px; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 120px;
  background: #111;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown.is-open .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown-menu li a {
  display: block;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 4px;
}
.dropdown-menu li a:hover { background: rgba(255,255,255,.08); }

.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.lang-select {
  position: relative;
}
.lang-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 29px;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(80, 234, 154, 0.3);
  border-radius: var(--radius-btn);
  padding: 0 7px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 10px rgba(80, 234, 154, 0.1);
}
.lang-trigger .chevron {
  color: #50ea9a;
  transition: transform .2s var(--ease);
}
.lang-select.is-open .lang-trigger .chevron { transform: rotate(180deg); }
.lang-flag { display: block; border-radius: 1px; }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 120px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #111;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 50;
}
.lang-select.is-open .lang-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.lang-option:hover { background: rgba(255,255,255,.08); }
.lang-option.is-active { color: #50ea9a; }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 950px;
  display: flex;
  align-items: flex-start;
  padding-top: 223px;
  /* 05/10: the threads run on over the logo strip below, on top of it, so the
     hero isn't clipped and stacks above the strip; the threads layer ignores
     the mouse, so the logos still react */
  overflow: visible;
  z-index: 2;
  background: transparent; /* body black + site grain show through */
}
.hero-bg {
  position: absolute;
  inset: 0;
  bottom: calc(-1 * var(--marquee-h));   /* down to the bottom of the logo strip */
  z-index: 0;
  pointer-events: none;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* only the last few px (the bottom of the logo strip) fade out, so the
     threads cross the logos and don't end in a hard cut (05/10; was 88%) */
  background: linear-gradient(to bottom, transparent 95%, #000 100%);
}
.hero-bg.web-threads-container {
  position: absolute;
  inset: 0;
  bottom: calc(-1 * var(--marquee-h));
  width: 100%;
  height: auto;
  overflow: hidden;
}
.web-threads-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 940px;
  pointer-events: none;
}
.hero-content a {
  pointer-events: auto;
}
.hero-content h1 {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.3;
  margin-bottom: 28px;
}
.hero-lead {
  font-size: 16px;
  color: #e8e8e8;
  max-width: 650px;
  margin: 0 auto 36px;
}

/* Scroll cue: two chevrons drifting down and fading (codepen.io/TommiTikall/pen/xZwpGR) */
.scroll-indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 46px;
  margin: 0 auto;
  width: 40px;
  height: 44px;
  z-index: 2;
  opacity: .8;
  transition: opacity .2s var(--ease);
  animation: fadeUp .8s var(--ease) .5s both;
}
.scroll-indicator:hover { opacity: 1; }
.scroll-indicator__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  margin-left: -11px;
  opacity: 0;
  animation: scrollArrow 2s ease-in-out infinite;
}
.scroll-indicator__arrow--delay { animation-delay: 1s; }
.scroll-indicator__arrow::before,
.scroll-indicator__arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 2px;
  background: #fff;
}
.scroll-indicator__arrow::before {
  transform: rotate(45deg) translateX(-23%);
  transform-origin: top left;
}
.scroll-indicator__arrow::after {
  transform: rotate(-45deg) translateX(23%);
  transform-origin: top right;
}
@keyframes scrollArrow {
  0% { opacity: 0; transform: translateY(-16px); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-indicator__arrow { animation: none; opacity: 1; transform: translateY(-8px); }
  .scroll-indicator__arrow--delay { display: none; }
}

/* Hero entrance */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-content h1 { animation: fadeUp .8s var(--ease) both; }
.hero-content .hero-lead { animation: fadeUp .8s var(--ease) .15s both; }
.hero-content .btn { animation: fadeUp .8s var(--ease) .3s both; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-visible { opacity: 1; transform: none; }
.section-title.reveal,
.stat.reveal,
.about-lead.reveal,
.about-banner.reveal,
.client-logos.reveal,
.testimonial-card.reveal {
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.stats-grid > .reveal:nth-child(1) { transition-delay: 0ms; }
.stats-grid > .reveal:nth-child(2) { transition-delay: 70ms; }
.stats-grid > .reveal:nth-child(3) { transition-delay: 140ms; }
.stats-grid > .reveal:nth-child(4) { transition-delay: 210ms; }
.stats-grid > .reveal:nth-child(5) { transition-delay: 70ms; }
.stats-grid > .reveal:nth-child(6) { transition-delay: 140ms; }
.stats-grid > .reveal:nth-child(7) { transition-delay: 210ms; }
.stats-grid > .reveal:nth-child(8) { transition-delay: 280ms; }
.testimonial-track > .reveal:nth-child(2) { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .hero-content h1, .hero-content .hero-lead, .hero-content .btn { animation: none; }
  .reveal { transition: none !important; opacity: 1; transform: none; }
  .stat-number::before { transition: none; width: 100%; }
}

/* ===== Pinned sections (desktop only, native CSS sticky, not JS scroll-jacking) ===== */
.pin-stage .container { width: 100%; }
@media (min-width: 861px) {
  .section[data-pin-reveal] { min-height: 145vh; }
  .pin-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
  }
}

/* ===== Client logos marquee (right below the hero) ===== */
:root { --marquee-h: 112px; }
.logo-marquee {
  position: relative;
  height: var(--marquee-h);
  display: flex;
  align-items: center;
  background: transparent; /* body black + site grain show through */
}
.logo-marquee > .container { width: 100%; }
/* logos only travel inside the content width and fade at its edges. One full
   set (logos + gaps ≈ 1410px) is wider than this window (≈1292px max), so the
   same logo never shows twice at once. */
.logo-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
.logo-marquee__track {
  display: flex;
  width: max-content;
  animation: logoMarquee 40s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 160px;
  padding-right: 160px;
}
.logo-marquee__list img { opacity: .85; }
@keyframes logoMarquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}

/* ===== Full-screen section navigator (home, desktop + fine pointer; js/fullpage.js) ===== */
html.fp-on, html.fp-on body { height: 100%; overflow: hidden; }
.fp-slide { position: fixed; inset: 0; visibility: hidden; }
.fp-outer, .fp-inner { width: 100%; height: 100%; }
.fp-outer { overflow: hidden; --fp-feather: 30%; }
/* soft reveal edge during a transition; --fp-edge is animated by fullpage.js */
.fp-slide.fp-fade-down .fp-outer {
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--fp-edge) - var(--fp-feather)), #000 var(--fp-edge));
  mask-image: linear-gradient(to bottom, transparent calc(var(--fp-edge) - var(--fp-feather)), #000 var(--fp-edge));
}
.fp-slide.fp-fade-up .fp-outer {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--fp-edge), transparent calc(var(--fp-edge) + var(--fp-feather)));
  mask-image: linear-gradient(to bottom, #000 var(--fp-edge), transparent calc(var(--fp-edge) + var(--fp-feather)));
}
/* 09/10, card stack on the way back: the bottom edge of the screen coming
   down dissolves over --fp-foot px (animated by fullpage.js with the motion
   blur: 0 at rest, deepest mid-way, 0 before landing) */
.fp-slide.fp-foot .fp-outer {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fp-foot, 0px)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fp-foot, 0px)), transparent 100%);
}
.fp-inner {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.fp-inner::-webkit-scrollbar { display: none; }
/* section indicator (js/fullpage.js, body[data-fp-nav]): the testimonial
   dots turned upright, down the left edge */
.fp-nav {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-35%);   /* 27/10 (her request): sits 15% of its own height below the centre */
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fp-nav__dot {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;   /* 27/10 (her request): dashes taller than the original 12px, same width */
  padding: 0;
  border: 0;
  background: none;
  transition: height .35s var(--ease);
}
.fp-nav__dot::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .35);
  transition: background .25s var(--ease);
}
.fp-nav__dot:hover::before { background: rgba(255, 255, 255, .7); }
.fp-nav__dot.is-active { height: 47px; }   /* 27/10: was 40px */
.fp-nav__dot.is-active::before { background: #fff; }
.fp-nav__label {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translate(-6px, -50%);
  padding: 4px 8px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .25s var(--ease);
}
.fp-nav__dot:hover .fp-nav__label,
.fp-nav__dot:focus-visible .fp-nav__label { opacity: 1; transform: translate(0, -50%); }
@media (prefers-reduced-motion: reduce) {
  .fp-nav__dot, .fp-nav__label { transition: none; }
}
/* testimonials fit one screen: the photo keeps its full frame when there is
   room and only gives up height on short screens (down to 120px), so card,
   quote and dots stay visible without scrolling inside the section; the
   title gets air below the header */
html.fp-on .trust .pin-stage { padding-top: calc(var(--header-h) + 36px); padding-bottom: 16px; }
html.fp-on .trust .section-title { margin-bottom: 32px; }
html.fp-on .trust .testimonial-photo { max-height: max(120px, calc(100vh - 643px)); }
html.fp-on .trust .testimonial-card { padding-bottom: 24px; }
html.fp-on .trust .testimonial-card blockquote { font-size: 15px; line-height: 1.6; }
html.fp-on .trust .testimonial-dots { margin-top: 20px; }
/* hero + logo strip share the first screen */
html.fp-on .hero { min-height: 0; height: calc(100vh - var(--marquee-h)); }
html.fp-on .section[data-pin-reveal] { min-height: 100vh; padding: 0; }
html.fp-on .pin-stage {
  position: relative;
  height: auto;
  min-height: 100vh;
  padding: calc(var(--header-h) + 24px) 0 48px;
}

/* ===== Features ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  max-width: 1080px;
  margin: 0 auto;
}
.feature-card {
  --active: 0;
  --start: 0;
  --spread: 60;
  --border-width: 2px;
  --glow-border: rgba(80, 234, 154, .35);
  --glow-gradient: conic-gradient(from 180deg at 50% 70%,
    #d9fff0 0deg, #50ea9a 90deg, #0d8f5f 180deg, #baffe0 270deg, #d9fff0 1turn);
  background: #fff;
  color: #202020;
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 317px;
  position: relative;
  transition: opacity .6s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(80,234,154,.35);
}
.feature-body { padding: 20px 22px 0; text-align: center; }
.feature-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
}
.feature-card p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}
.feature-card img {
  width: 100%;
  height: 148px;
  object-fit: cover;
  margin-top: 20px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* ===== Big numbers (home, section 2) =====
   The headline card spans the full width on top (.bn-card--wide); the other
   two share the row below, 12/8 like the original layout (20-column grid). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.bn-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
}
.bn-card {
  /* proximity glow (js/proximity-glow.js): same border light as the solution cards */
  --active: 0;
  --start: 0;
  --spread: 60;
  --border-width: 2px;
  --glow-border: rgba(80, 234, 154, .35);
  --glow-gradient: conic-gradient(from 180deg at 50% 70%,
    #d9fff0 0deg, #50ea9a 90deg, #0d8f5f 180deg, #baffe0 270deg, #d9fff0 1turn);
  position: relative;
  grid-column: span 11;
  background: var(--card);
  border-radius: var(--radius-card);
  min-height: 224px;
  padding: 36px 32px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bn-card--wide { grid-column: span 20; }
/* the full-width card has room for its caption on one line (desktop) */
@media (min-width: 861px) {
  .bn-card--wide .bn-label { max-width: none; white-space: nowrap; }
}
/* tighter title gap so title + two rows of cards still fit a 768px-tall screen */
.bignumbers .section-title { margin-bottom: 32px; }
/* bottom row stays asymmetric: +300Bi 11/20, ~18Mi 9/20 */
.bn-card--narrow { grid-column: span 9; }
.bn-number {
  display: block;
  /* one size for all three, sized to fit the half-width cards */
  font-size: min(128px, 8.9vw);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: #fff;
  margin-bottom: 22px;
  /* equal-width digits: the centred number doesn't jitter while counting */
  font-variant-numeric: tabular-nums;
}
.bn-label {
  max-width: 32ch;
  font-size: 16px;
  line-height: 1.6;
  color: #e8e8e8;
}
/* entrance when not in full-screen mode (fullpage.js drives it otherwise, via
   data-fp-from / data-fp-stagger / data-fp-scale): the grid assembles, each
   card sliding in from its own side and settling into place */
.bn-card.reveal {
  transform: translate(var(--bn-from-x, 0), var(--bn-from-y, 40px)) scale(.94);
  transition: opacity .8s var(--ease), transform .9s cubic-bezier(.16,1,.3,1);
}
.bn-card:nth-child(1) { --bn-from-x: 0px; --bn-from-y: -70px; }
.bn-card:nth-child(2) { --bn-from-x: -90px; --bn-from-y: 0px; }
.bn-card:nth-child(3) { --bn-from-x: 90px; --bn-from-y: 0px; }
/* decoding: every character gets a fixed slot, so scrambling never shifts the number */
.bn-number .bn-ch { display: inline-block; text-align: center; }
.bn-number .bn-ch.is-scrambling { color: rgba(80, 234, 154, .85); }
.bn-card.reveal.is-visible { transform: none; }
/* hover: same lift + 3% zoom as the solution cards */
.bn-card, .bn-card.reveal.is-visible { transition: opacity .8s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
/* 15/10: no lift / zoom on hover for these cards (only the neon light of
   js/glass-cards.js reacts); was translateY(-6px) scale(1.03) + shadow */
.bn-grid > .reveal:nth-child(2) { transition-delay: .1s; }
.bn-grid > .reveal:nth-child(3) { transition-delay: .2s; }
@media (max-width: 860px) {
  .bn-card, .bn-card--wide, .bn-card--narrow { grid-column: span 20; min-height: 0; padding: 32px 24px; }
  .bn-number { font-size: min(88px, 17vw); }
}

/* ===== Solutions ===== */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* same outer width and gutter as the big numbers grid above (.bn-grid) */
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
}
@property --start {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.solution-card {
  --active: 0;
  --start: 0;
  --spread: 60;
  --border-width: 2px;
  --glow-border: rgba(80, 234, 154, .35);
  --glow-gradient: conic-gradient(from 180deg at 50% 70%,
    #d9fff0 0deg, #50ea9a 90deg, #0d8f5f 180deg, #baffe0 270deg, #d9fff0 1turn);
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 47px 20px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid transparent;
  position: relative;
  transition: opacity .6s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* desktop: one spacing rhythm (--sol-gap) repeated three times: card top → logo,
   text → button, button → card bottom; the card's height comes from it */
@media (min-width: 861px) {
  .solution-card {
    --sol-gap: 52px;
    padding: var(--sol-gap) 28px var(--sol-gap);
  }
  /* .solutions-grid prefix: outranks the base .solution-card rules further down */
  .solutions-grid .solution-icon { height: 44px; margin-bottom: 40px; }
  /* 4 lines reserved: a shorter text doesn't break the rhythm (cards share one height) */
  .solutions-grid .solution-card p { flex: 0 0 auto; min-height: calc(1.6em * 4); margin-bottom: var(--sol-gap); }
  /* the Score text is shorter: a narrower column so it also runs on 4 lines,
     like the other two cards (05/10) */
  .solutions-grid .solution-card p.solution-card__text--4 { max-width: 232px; margin-left: auto; margin-right: auto; }
}
/* while a screen entrance moves the cards (js/fullpage.js), drop the costly
   glow layers and let the compositor carry the motion */
.is-entering { will-change: transform, opacity; }
/* 08/10: only the heavy proximity-glow layer is switched off while entering;
   the card's border (::before/::after) now comes in with the card instead of
   popping in after the entrance. The card is its own GPU layer while
   .is-entering (will-change above), so the border rides along without repaints. */
:is(.solution-card, .feature-card, .testimonial-card, .bn-card, .bfm-card, .ins-pillar, .video-frame).is-entering .glows { display: none; }
.solution-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 32px rgba(0,0,0,.4);
}
.solution-card .glows,
.feature-card .glows,
.testimonial-card .glows,
.bn-card .glows,
.bfm-card .glows,
.ins-pillar .glows,
.video-frame .glows {
  pointer-events: none;
  position: absolute;
  inset: 0;
  filter: blur(20px);
  border-radius: inherit;
}
.solution-card .glows::before,
.solution-card .glows::after,
.feature-card .glows::before,
.feature-card .glows::after,
.testimonial-card .glows::before,
.testimonial-card .glows::after,
.bn-card .glows::before,
.bn-card .glows::after,
.bfm-card .glows::before,
.ins-pillar .glows::before,
.video-frame .glows::before,
.bfm-card .glows::after,
.ins-pillar .glows::after,
.video-frame .glows::after {
  content: '';
  background: var(--glow-gradient);
  background-attachment: fixed;
  position: absolute;
  inset: -5px;
  border: 10px solid transparent;
  border-radius: inherit;
  mask:
    linear-gradient(#0000, #0000),
    conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
  mask-clip: padding-box, border-box;
  opacity: var(--active);
  transition: opacity 1s;
}
.solution-card::before,
.feature-card::before,
.testimonial-card::before,
.bn-card::before,
.bfm-card::before,
.ins-pillar::before,
.video-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border-width) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background: var(--glow-border);
  background-attachment: fixed;
  mask:
    linear-gradient(#0000, #0000),
    conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),
      hsl(0 0% 100% / .15) 0deg, white, hsl(0 0% 100% / .15) calc(var(--spread) * 2.5deg));
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
  mask-clip: padding-box, border-box;
  opacity: var(--active);
  transition: opacity 1s;
}
.solution-card::after,
.feature-card::after,
.testimonial-card::after,
.bn-card::after,
.bfm-card::after,
.ins-pillar::after,
.video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border-width) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background: var(--glow-gradient);
  background-attachment: fixed;
  filter: brightness(1.5);
  mask:
    linear-gradient(#0000, #0000),
    conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
  mask-clip: padding-box, border-box;
  opacity: var(--active);
  transition: opacity 1s;
}
.solution-icon {
  height: 36px;
  width: auto;
  margin-bottom: 47px;
}
/* icon slot: placeholder until the product icons are chosen (swap the span for
   an <img class="solution-icon">); same dashed circle as the Insights pillars */
.solution-icon--placeholder {
  display: block;
  width: 56px;
  border-radius: 50%;
  border: 1px dashed rgba(98, 236, 164, .45);
  background: radial-gradient(circle, rgba(98, 236, 164, .14), transparent 70%);
}
.solutions-grid .solution-icon--placeholder { height: 56px; margin-bottom: 28px; }
/* 05/10: the team's 3D scanline icons (js/home-icons.js) in place of the dashed
   circles. Own compositing layer, so each frame doesn't repaint the glass card.
   The canvas has empty margins round the icon, so it is pulled up a little. */
.solution-art { display: block; width: 160px; max-width: 100%; height: 130px; margin: -28px auto 6px; flex-shrink: 0; will-change: transform; transform: translateZ(0); }
.solution-art.is-fallback { width: 56px; height: 56px; margin: 0 auto 28px; border-radius: 50%; border: 1px dashed rgba(98, 236, 164, .45); background: radial-gradient(circle, rgba(98, 236, 164, .14), transparent 70%); }
.solution-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
}
.solution-card p {
  font-size: 16px;
  color: #d5d5d5;
  margin-bottom: 22px;
  flex: 1;
}
.solution-card .glow-button {
  --button-background: var(--card);
}
/* 05/10: on glass cards the button is see-through, so the card's glass shows
   in it; the rotating gradient is masked down to a 1px ring (the border) */
.glass .glow-button { --button-background: transparent; }
.glass .glow-button .gradient {
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ===== Stats ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 56px;
  column-gap: 25px;
  max-width: 1080px;
  margin: 0 auto;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  width: 100%;
}
.stat-number {
  position: relative;
  z-index: 1;
  font-size: clamp(48px, 6.4vw, 94px);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 14px;
}
.stat-number::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.16em;
  width: 0;
  height: 8px;
  background: #fff;
  border-radius: 3px;
  z-index: -1;
  transition: width 1.1s cubic-bezier(.16,.8,.24,1);
}
.stat-number.is-counted::before {
  width: 100%;
}
.stat-label {
  font-size: 16px;
  color: #d5d5d5;
  max-width: 190px;
}

/* ===== About / Quem somos ===== */
.about { position: relative; padding-bottom: 0; }
/* full-screen mode: the fixed header sits over the top of the screen, so the
   96px section padding left only ~20px between it and the title; clear the
   header and keep a real gap below it */
html.fp-on .about { padding-top: calc(var(--header-h) + 80px); }
.about .container { position: relative; z-index: 1; text-align: center; }
.about .section-title { margin-bottom: 32px; }
.about-lead {
  max-width: 1000px;
  margin: 0 auto 32px;
  font-size: 16px;
  color: #d5d5d5;
}
.about-banner {
  margin-top: -90px;
  line-height: 0;
  position: relative;
  z-index: 0;
  height: 430px;
  /* 08/10: no longer clips, so the particles' drawing area can run past it
     (below); the globe clips itself to the banner instead */
  overflow: visible;
  background:
    radial-gradient(ellipse 60% 70% at 50% 78%, rgba(80,234,154,.22), transparent 65%),
    #000;
}
.about-banner-bg {
  /* 08/10: drawing area larger than the banner (220px above it, up behind
     the text): the dots are still laid out over the banner only
     (js/particles.js), but a dot pushed by the cursor stays visible instead of
     vanishing at the edge. Below, the footer comes right after the banner and
     would hide them, so there the dots bounce back at the banner's bottom. */
  position: absolute;
  top: -220px;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: calc(100% + 220px);
  pointer-events: none;
}
/* 05/10: glass plates (js/about-glass.js, same as the Score closing call) in
   place of the sphere below; the particles canvas behind stays. The WebGL
   canvas renders on black, so it is screen-blended: black adds nothing and
   the particles show through. Reveals left to right as the section comes in. */
@property --about-glass { syntax: '<percentage>'; inherits: false; initial-value: 114%; }
.about-glass {
  --about-glass: 0%;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--about-glass) - 14%), transparent var(--about-glass));
  mask-image: linear-gradient(to right, #000 calc(var(--about-glass) - 14%), transparent var(--about-glass));
  transition: --about-glass 0s;
}
.about-glass.is-in { --about-glass: 114%; transition: --about-glass 2.2s cubic-bezier(.45, 0, .2, 1) .45s; }
@media (prefers-reduced-motion: reduce) {
  .about-glass, .about-glass.is-in { --about-glass: 114%; transition: none; }
}
.about-banner-sphere {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(760px, 74%);
  height: auto;
  pointer-events: none;
  z-index: 1;
  /* the banner used to clip the globe (overflow: hidden); it now clips itself
     to the banner's box: top at the banner's top (430px above its bottom),
     bottom at the banner's bottom, open to the sides */
  clip-path: inset(max(0px, calc(100% - 430px)) -100vw 0 -100vw);
}
.about-banner-sphere img { display: block; width: 100%; height: auto; position: relative; }
/* a band of light sweeping across the rings, left to right, every ~6s. It is
   masked by the sphere image's own luminance, so it only lights the bright
   rings, never the dark core or the transparent surround */
.about-banner-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: url('../assets/about_sphere2.webp') center / 100% 100% no-repeat;
  mask: url('../assets/about_sphere2.webp') center / 100% 100% no-repeat luminance;
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
}
/* 15/10 (performance), same sweep: the band used to be a background 3x as wide
   as the element, animated with background-position (a repaint of the masked,
   blended element on every frame). Now it is a child 3x as wide moved with
   transform, which the compositor does without repainting: position 100% of a
   300% background is the band shifted by -2 widths, i.e. translateX(-66.667%)
   of the child; position 0% is translateX(0). Same timing and easing. */
.about-banner-shine::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 300%;
  background: linear-gradient(105deg,
    transparent 40%, rgba(186, 255, 224, .55) 47%, rgba(255, 255, 255, .95) 50%,
    rgba(186, 255, 224, .55) 53%, transparent 60%);
  will-change: transform;
  animation: sphereSweep 6s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes sphereSweep {
  0% { transform: translateX(-66.667%); }
  45%, 100% { transform: translateX(0); }
}
/* soft green halo behind the globe, breathing slowly */
.about-banner-sphere::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 10%;
  bottom: -10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(80, 234, 154, .22), transparent 65%);
  filter: blur(24px);
  animation: sphereBreathe 5s ease-in-out infinite;
}
@keyframes sphereBreathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .about-banner-shine { opacity: 0; }
  .about-banner-shine::before { animation: none; }
  .about-banner-sphere::before { animation: none; opacity: .75; }
}
/* ===== Trust / Testimonials ===== */
.client-logos {
  display: flex;
  justify-content: center;
  margin: 0 auto 72px;
  max-width: 840px;
}
.client-logos img { width: 100%; height: auto; }

.testimonials {
  position: relative;
  --tcard-w: 620px;
  --peek: calc(50% - (var(--tcard-w) / 2));
}
.testimonials::before,
.testimonials::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 28px;
  width: clamp(20px, calc(var(--peek) * 0.55), 140px);
  pointer-events: none;
  z-index: 2;
}
.testimonials::before {
  left: 0;
  background: linear-gradient(to right, #000, transparent);
}
.testimonials::after {
  right: 0;
  background: linear-gradient(to left, #000, transparent);
}
.testimonial-track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* 28px top/bottom: the horizontal scroll clips vertically too, and the
     hover zoom below needs the room; the negative margin keeps the spacing
     around the carousel as it was with the old 4px */
  padding: 28px var(--peek);
  margin: -24px 0;
}
.testimonial-track::-webkit-scrollbar { display: none; }
/* hover: same lift + 3% zoom as the solution cards */
.testimonial-card { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.testimonial-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 16px 32px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) {
  .testimonial-card:hover { transform: none; }
}
.testimonial-card {
  --active: 0;
  --start: 0;
  --spread: 60;
  --border-width: 2px;
  --glow-border: rgba(80, 234, 154, .35);
  --glow-gradient: conic-gradient(from 180deg at 50% 70%,
    #d9fff0 0deg, #50ea9a 90deg, #0d8f5f 180deg, #baffe0 270deg, #d9fff0 1turn);
  flex: 0 0 var(--tcard-w);
  width: var(--tcard-w);
  scroll-snap-align: center;
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 0 0 32px;
  overflow: hidden;
  position: relative;
}
/* wide photos (1326x633): the box follows the image's own proportion, so the
   whole frame shows instead of a tall crop */
.testimonial-photo {
  width: 100%; /* explicit, so a max-height trims height only, never width */
  aspect-ratio: 1326 / 633;
  overflow: hidden;
  position: relative;
}
.testimonial-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
/* only matters when a short screen trims the photo height: keep faces in frame */
.testimonial-card:nth-child(1) .testimonial-photo img { object-position: center 40%; }
.testimonial-card:nth-child(2) .testimonial-photo img { object-position: center 35%; }
.testimonial-brand {
  height: 22px;
  width: auto;
  margin: 24px 36px 0;
}
.testimonial-card blockquote {
  margin: 18px 36px 0;
  font-size: 16px;
  line-height: 1.6;
  color: #eaeaea;
}
.testimonial-card footer {
  margin: 20px 36px 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testimonial-card cite {
  font-style: normal;
  font-weight: 800;
  font-size: 17px;
}
.testimonial-card footer span {
  font-size: 14px;
  font-weight: 400;
  color: #ccc;
}
.testimonial-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
/* 05/10: same look as the side section indicator (.fp-nav__dot) laid flat,
   like the BFM carousel dots: 6px-thick pills, 12px long, 40px current */
.dot {
  width: 12px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255,255,255,.35);
  border: none;
  padding: 0;
  transition: width .35s var(--ease), background .25s var(--ease);
}
.dot:hover { background: rgba(255,255,255,.7); }
.dot.is-active { width: 40px; background: #fff; }

/* autoplay (js/main.js): the active dot fills up as the countdown to the next card */
.testimonials.is-auto .dot { position: relative; overflow: hidden; }
.testimonials.is-auto .dot.is-active { background: rgba(255,255,255,.35); }
.testimonials.is-auto .dot.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform-origin: left;
  animation: tDotFill 7s linear forwards;
}
.testimonials.is-paused .dot.is-active::after { animation-play-state: paused; }
@keyframes tDotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* ===== Footer ===== */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 40px 0 32px;
}
.footer-grid { max-width: var(--container-w); padding-bottom: 56px; }
.footer-brand {
  display: flex;
  align-items: flex-start;
  margin-bottom: 48px;
}
.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-label {
  display: block;
  font-size: 14px;
  color: var(--muted-label);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 16px; }
.footer-col a { transition: color .2s var(--ease); }
.footer-col a:hover { color: #50ea9a; text-decoration: underline; }
.footer-col p { font-size: 16px; line-height: 1.6; }
.footer-cert-badges { display: flex; align-items: center; gap: 20px; }

.footer-bottom {
  max-width: var(--container-w);
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.social-links { display: flex; gap: 12px; }
.social-links a {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #50ea9a;
  color: #0a1f16;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.social-links a svg { width: 16px; height: 16px; }
.social-links a:hover { background: #baffe0; transform: translateY(-2px); }
.copyright {
  font-size: 14px;
  color: var(--muted-label);
  text-align: right;
  line-height: 1.6;
}

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .footer-links {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .primary-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    bottom: 0;
    background: rgba(0,0,0,.98);
    backdrop-filter: blur(6px);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    overflow-y: auto;
    padding: 24px 0;
  }
  .primary-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .primary-nav > ul { flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 24px; width: 100%; }
  .primary-nav > ul > li { width: 100%; }
  .nav-link { padding: 14px 0; width: 100%; }
  .dropdown-menu {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: none;
    background: transparent;
    border: none;
    padding: 0 0 0 12px;
  }
  .has-dropdown.is-open .dropdown-menu { display: block; }
  .nav-toggle { display: flex; }
  .header-actions .btn-nav { display: none; }
  .solutions-grid { grid-template-columns: 1fr; }
  .testimonials { --tcard-w: min(500px, 82vw); }
  .hero-content h1 { font-size: 34px; }
  .section-title { font-size: 28px; }
  .hero { min-height: 820px; padding-top: 140px; }
}

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .features-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-number { font-size: 52px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .copyright { text-align: left; }
  .hero { min-height: 760px; padding-top: 110px; }
  .hero-content h1 { font-size: 28px; }
  .testimonials { --tcard-w: 88vw; }
  .testimonials::before, .testimonials::after { width: 14px; }
}

/* ===== Vídeo (home, after "Quem confia na Celero") — placeholder frame until
   the video arrives: swap .video-frame's contents for a <video> or an embed ===== */
.video-frame {
  /* same proximity border glow as the cards (js/proximity-glow.js) */
  --active: 0;
  --start: 0;
  --spread: 60;
  --border-width: 2px;
  --glow-border: rgba(80, 234, 154, .35);
  --glow-gradient: conic-gradient(from 180deg at 50% 70%,
    #d9fff0 0deg, #50ea9a 90deg, #0d8f5f 180deg, #baffe0 270deg, #d9fff0 1turn);
  position: relative;
  width: min(1200px, 100%);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--radius-card);
  background: radial-gradient(ellipse at 50% 55%, rgba(80, 234, 154, .10), transparent 60%), var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
}
.video-frame__play {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1.5px solid rgba(80, 234, 154, .8);
  box-shadow: 0 0 28px rgba(80, 234, 154, .25);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.video-frame__play::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-38%, -50%);
}
.video-frame:hover .video-frame__play { transform: scale(1.08); box-shadow: 0 0 40px rgba(80, 234, 154, .4); }
.video-frame__note { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #9aa59f; }
html.fp-on .video-section { min-height: 100vh; display: flex; align-items: center; padding: calc(var(--header-h) + 24px) 0 40px; box-sizing: border-box; }
html.fp-on .video-section > .container { width: 100%; }
html.fp-on .video-frame { width: min(1200px, 100%, calc((100vh - var(--header-h) - 90px) * 16 / 9)); }
/* the YouTube poster fills the frame, darkened so the play button reads */
.video-frame__link { appearance: none; border: 0; padding: 0; margin: 0; background: none; color: inherit; font: inherit; cursor: pointer; width: 100%; position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; border-radius: inherit; overflow: hidden; }
.video-frame__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: filter .4s var(--ease), transform .6s var(--ease); }
.video-frame__link .video-frame__play { z-index: 1; background: rgba(0, 0, 0, .35); }
/* 21/10 (her comment: the play sat high): the "Assistir ao vídeo" note is hidden under the
   poster but still took a line below the play, pushing it ~18px up. Out of the flow now,
   so the play is centred in the frame (the button keeps its aria-label) */
.video-frame__link .video-frame__note { display: none; }
/* 21/10: the poster is now her designed thumb ("Visa + celero", already toned), so no extra
   darkening; a slight lift on hover instead */
.video-frame__poster { filter: brightness(.5); transform: translateY(-2.13%) scale(1.045); }   /* 21/10 (her request): a darker layer over the thumb */
/* 21/10 (her request): the "+" between the logos sits 22px (of 1080) below the image centre;
   the poster goes up by that (2.13% = 22 x 1.045 / 1080) so the "+" is right behind the play,
   with a 4.5% zoom so no gap opens at the bottom. Hover keeps the "+" in place (it was scale 1.02) */
.video-frame:hover .video-frame__poster { filter: brightness(.62); transform: translateY(-2.17%) scale(1.065); }
.video-frame__player { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; border-radius: inherit; background: #000; object-fit: contain; }

/* ===== Site-wide film grain: a soft static noise (inline SVG turbulence, no
   extra request). Fixed, so it doesn't scroll, and click-through.
   05/10: no blend mode any more. The noise is white specks whose ALPHA is the
   noise value (last feColorMatrix, x3.8 to make up for the colour-space
   brightening the old RGB output got; measured equal), which composites like screen over
   black, without forcing the whole screen to be re-blended every frame.
   It sits ON TOP of everything (02/10), originally in screen blend, so it looks exactly
   the same over every section, solid black or transparent: no seams. The
   noise is pushed toward black (gamma 8 in the SVG) so it reads as sparse
   light specks on a background that stays black on average; screen only
   ever adds light, never tints. It used to sit behind the content at 12%,
   which lifted the black to grey only where a section was transparent,
   leaving seams next to solid-black areas (e.g. "Quem somos"). */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: .05;   /* 05/10: softer, as asked (was .14, then .07) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' exponent='8'/%3E%3CfeFuncG type='gamma' exponent='8'/%3E%3CfeFuncB type='gamma' exponent='8'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.3333 0.3333 0.3333 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='3.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Glass cards (.glass), site-wide since 02/10.
   Port of the colleague's approved prototype (celero-base-solida.html), first
   tried on the home big numbers. Applied to every dark card: big numbers,
   solution and testimonial cards (home), Insights pillars and Score cards,
   BFM benefit cards (dark section only; the white cards keep their style) and
   the Institucional feature/press cards. Very dark translucent base; light
   comes in at the top-left corner (lit top edge, bright corner border) and the
   glass melts into the black toward the bottom-right. ::before is a faint
   diagonal reflection that drifts with the cursor (--shift); ::after is the
   1px border. On hover, js/glass-cards.js draws a green neon light along the
   border near the cursor. These replace the proximity-glow layers (.glows and
   the old ::before/::after) on these cards. Doubled class: pages.css loads
   after this file and sets these cards' own backgrounds. */
.glass.glass {
  --glass-base: #050606;
  --edge-light: 255, 255, 255;
  --fade: linear-gradient(to bottom right, #000 30%, rgba(0,0,0,.45) 62%, transparent 92%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
  background:
    linear-gradient(to bottom right, rgba(0,0,0,0) 32%, rgba(0,0,0,.65) 68%, #000 96%),
    radial-gradient(260px 150px at 0 0, rgba(255,255,255,.055), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.038) 0%, rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,0) 55%),
    var(--glass-base);
  box-shadow:
    inset 0 1px 0 rgba(var(--edge-light), .18),
    inset 0 0 40px rgba(255,255,255,.01),
    0 20px 50px -20px rgba(0,0,0,.9);
}
.glass.glass .glows { display: none; }
.glass.glass::before,
.glass.glass::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 0;
  border-radius: inherit;
  opacity: 1;
  filter: none;
  transition: none;
  background-attachment: scroll;
  -webkit-mask-composite: initial;
  mask-composite: initial;
  mask-clip: initial;
}
/* diagonal reflection, fading toward the bottom-right corner */
.glass.glass::before {
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,.035) 42%,
      rgba(255,255,255,.01) 47%,
      rgba(255,255,255,0) 52%,
      rgba(255,255,255,.018) 58%,
      rgba(255,255,255,0) 64%) no-repeat;
  background-size: 150% 100%;
  background-position: calc(50% + var(--shift, 0px)) 0;
  transition: background-position .9s cubic-bezier(.2,.7,.2,1);
  -webkit-mask: var(--fade);
  mask: var(--fade);
}
/* border: strong at the top-left corner, lighter along the top, gone at the bottom-right */
.glass.glass::after {
  padding: 1px;
  background:
    radial-gradient(380px 210px at 0 0, rgba(var(--edge-light),.3) 0, rgba(var(--edge-light),.3) 22%, rgba(var(--edge-light),.1) 58%, rgba(var(--edge-light),0) 100%) border-box,
    linear-gradient(160deg, rgba(var(--edge-light),.28) 0, rgba(var(--edge-light),.04) 35%, rgba(var(--edge-light),0) 60%) border-box,
    linear-gradient(to bottom right, rgba(255,255,255,.07) 0, rgba(255,255,255,.02) 30%, rgba(255,255,255,0) 55%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* while a screen entrance moves the cards (.is-entering, js/fullpage.js) the
   big soft shadow is switched off (05/10). 08/10: the glass border (::after)
   and reflection (::before) stay on, so the border enters WITH the card
   instead of appearing after the entrance; the card is a GPU layer while
   entering (will-change), so they move with it without repainting. */
.glass.glass.is-entering { box-shadow: inset 0 1px 0 rgba(var(--edge-light), .18); }
/* 16/10 (performance): with js/glass-cards.js running, the drifting reflection
   is a real child (.glass-refl > i) moved with a compositor transform instead
   of the ::before transition on background-position, which repainted the whole
   card (four gradients, two masked pseudo-elements, the shadows) on every frame
   the cursor moved. Same gradient, same 150% size and -25% start (= background-
   position 50%), same fade mask on the parent, same 0.9s curve. The ::before
   stays on cards that don't have the child (no pointer, or a clone made before). */
.glass.glass.has-refl::before { display: none; }
.glass-refl {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  -webkit-mask: var(--fade); mask: var(--fade);
}
.glass-refl > i {
  position: absolute; top: 0; bottom: 0; left: -25%; width: 150%; display: block;
  background: linear-gradient(115deg,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,.035) 42%,
      rgba(255,255,255,.01) 47%,
      rgba(255,255,255,0) 52%,
      rgba(255,255,255,.018) 58%,
      rgba(255,255,255,0) 64%);
  transform: translateX(0);
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
  /* no will-change: at rest the card is painted exactly as before (no layer, so
     its text keeps its sub-pixel position and anti-aliasing); while the drift
     transition runs the browser composites the element by itself */
}
@media (prefers-reduced-motion: reduce) {
  .glass-refl > i { transition: none; }
}
/* the neon layer: one fixed canvas over the viewport (js/glass-cards.js), so it
   follows the cards through hover zoom, carousels and screen transitions */
.glass-glow { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 95; mix-blend-mode: screen; }
/* 08/10: with js/glass-cards.js running (mouse), the hover lift + zoom of glass
   cards is animated there, in step with the neon light (a CSS transform
   transition runs on the compositor and drifted from the light, leaving a
   ghost). Cards still waiting for their scroll reveal keep the CSS rules. */
html.glass-hover-js .glass.glass:hover:not(.reveal:not(.is-visible)) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .glass.glass::before { transition: none; }
}
/* 16/10: the 92% card is back, big numbers in 2 x 2 (11/9 on both rows) */
.bn-grid > .reveal:nth-child(4) { transition-delay: .3s; }
/* +10 ANOS now sits in an 11/20 card: the numbers (one size for all four) a bit smaller to fit (was min(128px, 8.9vw)) */
@media (min-width: 861px) { .bn-number { font-size: min(108px, 7.5vw); } }
/* 16/10 (her comment): card sizes from the designer's original layout, 2 x 2 on the 20-column grid */
.bn-card--s12 { grid-column: span 12; }
.bn-card--s8 { grid-column: span 8; }
@media (max-width: 860px) { .bn-card--s12, .bn-card--s8 { grid-column: span 20; } }
/* 16/10 (her comment): waves of digits and code behind the big numbers (js/bn-wave.js).
   The cards of this section turn see-through, with a blur, so the data shows through */
.bignumbers { position: relative; }
.bn-wave { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bignumbers .container { position: relative; z-index: 1; }
.bignumbers .glass.glass {
  --glass-base: rgba(5, 6, 6, .62);
  /* 19/10 (her comment): the characters passing behind the cards 70% more blurred (5px -> 8.5px) */
  -webkit-backdrop-filter: blur(8.5px);
          backdrop-filter: blur(8.5px);
}
/* 17/10 (her comment): the data waves darker where they pass behind the cards, so the cards read clearly (glass .62 -> .84) */
.bignumbers .glass.glass { --glass-base: rgba(5, 6, 6, .84); }
/* 19/10 (her request): the number cards see-through, so the data waves show behind them,
   out of focus. The blur is drawn on the waves' own canvas (js/bn-wave.js) only where they
   pass behind a card, so the cards drop their backdrop blur (it erased the faint glyphs) and
   the "melt into black" toward the bottom-right, keeping the lit corner and edge */
.bignumbers .glass.glass {
  --glass-base: rgba(5, 6, 6, .17);   /* 19/10 (her requests): 30% less opaque twice (.35 -> .245 -> .17) */
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background:
    linear-gradient(to bottom right, rgba(0,0,0,0) 40%, rgba(0,0,0,.108) 100%),
    radial-gradient(260px 150px at 0 0, rgba(255,255,255,.055), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.038) 0%, rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,0) 55%),
    var(--glass-base);
}
/* 26/10 (her comment): the extra tracking for +R$300Bi was removed now that the number is +R$1,5 Tri */
/* 17/10 (her comment): the divider between testimonial and name in neon green */
.testimonial-card footer { border-top-color: #50ea9a; box-shadow: 0 -1px 8px -2px rgba(80, 234, 154, .55); }
/* 17/10 (her comment): the shadow outlined the whole footer box; only the top line glows now */
.testimonial-card footer { box-shadow: none; border-top-color: transparent; position: relative; }
.testimonial-card footer::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: #50ea9a; box-shadow: 0 0 6px rgba(80, 234, 154, .6); }
/* 17/10 (her request): the testimonial divider thinner (half a pixel, softer glow) */
.testimonial-card footer::before { transform: scaleY(.5); transform-origin: top; box-shadow: 0 0 4px rgba(80, 234, 154, .35); }
/* 17/10 (her comment): divider lines and names aligned across the testimonial cards: the cards\n   share the row's height and the footer sits at the bottom of each one */
.testimonial-card { display: flex; flex-direction: column; }
.testimonial-card blockquote { margin-bottom: 20px; }
.testimonial-card footer { margin-top: auto; }
/* 17/10: in the flex column the logos were stretched to the card's width; they keep their own width */
.testimonial-card > .testimonial-brand { align-self: flex-start; flex: none; }
/* 20/10 (her request): the home hero adapts to the screen's size and zoom. The title,
   text and button scale with the visible height (and width), so on laptop screens
   they take less room; js/web-threads.js then places the threads (position and a
   slightly taller or shorter wave) so they always run below the text and the button,
   never in front of them. Full-size screens keep the original sizes. */
@media (min-width: 861px) {
  html.fp-on .hero { padding-top: clamp(calc(var(--header-h) + 22px), 20.6vh, 340px); }
  /* 20/10 (her follow-up: too small on big monitors): one size drives the whole block
     (--hf, the title's size). It follows the screen: on short laptop screens it stays as
     it was (~38px at 650px of height); on taller and wider screens it grows well past
     the original 56px (up to 96px), and the text, the button and the gaps grow with it */
  html.fp-on .hero-content { --hf: clamp(32px, min(4vw, calc(9.43vh - 23.6px)), 96px); max-width: var(--content-w); }
  html.fp-on .hero-content h1 { font-size: var(--hf); margin-bottom: max(14px, calc(var(--hf) * .5)); }
  html.fp-on .hero-lead { font-size: max(14px, calc(var(--hf) * .29)); max-width: 41em; margin-bottom: max(18px, calc(var(--hf) * .64)); }
  html.fp-on .hero-content .glow-button span { font-size: max(14px, calc(var(--hf) * .25)); padding: .57em 1.29em; letter-spacing: .14em; }
  .hero .scroll-indicator { transition: opacity .3s var(--ease); }
  .hero .scroll-indicator.is-crowded { visibility: hidden; }   /* (its entrance animation holds opacity) */
}

/* 21/10 (her request, a test): the home hero threads fade to black at both sides of the
   screen, the same eased fade as the product pages' lines (12% of the width per side).
   Laid over the threads (in the layer that already holds their bottom fade), not a mask */
.hero-bg::after {
  background:
    linear-gradient(to right, rgba(0,0,0,1.000) 0.00%, rgba(0,0,0,0.980) 8.33%, rgba(0,0,0,0.926) 16.67%, rgba(0,0,0,0.844) 25.00%, rgba(0,0,0,0.741) 33.33%, rgba(0,0,0,0.624) 41.67%, rgba(0,0,0,0.500) 50.00%, rgba(0,0,0,0.376) 58.33%, rgba(0,0,0,0.259) 66.67%, rgba(0,0,0,0.156) 75.00%, rgba(0,0,0,0.074) 83.33%, rgba(0,0,0,0.020) 91.67%, rgba(0,0,0,0.000) 100.00%) left top / 12% 100% no-repeat,
    linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.020) 8.33%, rgba(0,0,0,0.074) 16.67%, rgba(0,0,0,0.156) 25.00%, rgba(0,0,0,0.259) 33.33%, rgba(0,0,0,0.376) 41.67%, rgba(0,0,0,0.500) 50.00%, rgba(0,0,0,0.624) 58.33%, rgba(0,0,0,0.741) 66.67%, rgba(0,0,0,0.844) 75.00%, rgba(0,0,0,0.926) 83.33%, rgba(0,0,0,0.980) 91.67%, rgba(0,0,0,1.000) 100.00%) right top / 12% 100% no-repeat,
    linear-gradient(to bottom, transparent 95%, #000 100%);
}
/* 22/10: the "Explorers of the future" video (Institucional) in the home video's frame. Its
   thumb has its own framing, so not the home thumb's crop (that one moves the poster up
   to put the "+" behind the play); same 50% darkening */
.video-frame--explorers .video-frame__poster { transform: none; }
.video-frame--explorers:hover .video-frame__poster { transform: scale(1.02); }

/* ===== Contact modal (23/10, her requests; js/main.js) =====
   Every contact button opens it. In the site's style: the glass card (.glass), the site's
   glow buttons, Outfit, the green as the only accent. Two steps: the question (financial
   institution?) and then the HubSpot form, or the "we only serve financial institutions"
   message. The HubSpot form (.hs-form) is restyled to match. */
html.cm-open, html.cm-open body { overflow: hidden; }
.cm { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px 16px; }
.cm[hidden] { display: none; }
.cm__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s var(--ease); }
.cm .cm__box.glass {
  --glass-base: rgba(5, 6, 6, .92);
  position: relative; width: min(620px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  padding: 56px 52px 44px; border-radius: var(--radius-card); text-align: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity .3s var(--ease), transform .4s cubic-bezier(.2,.8,.2,1);
  scrollbar-width: thin; scrollbar-color: rgba(80,234,154,.4) transparent;
}
.cm.is-open .cm__backdrop { opacity: 1; }
.cm.is-open .cm__box.glass { opacity: 1; transform: none; }
.cm__close {
  position: absolute; top: 16px; right: 16px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: #e8e8e8; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.cm__close:hover, .cm__close:focus-visible { border-color: #50ea9a; color: #50ea9a; outline: none; }
.cm__step.is-in { animation: cmStep .35s var(--ease) both; }
@keyframes cmStep { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cm__eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #50ea9a; }
.cm__title { margin: 0 auto 14px; max-width: 480px; font-size: 32px; font-weight: 700; line-height: 1.2; color: #fff; }
.cm__lead { margin: 0 auto 32px; max-width: 470px; font-size: 16px; line-height: 1.6; color: #b5b5b5; }
.cm__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cm__actions .glow-button { min-width: 140px; }
.cm__back {
  margin-top: 24px; padding: 4px 2px; background: none; border: 0; font-family: var(--ff); font-size: 13px; color: #9a9a9a;
  cursor: pointer; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.cm__back:hover, .cm__back:focus-visible { color: #50ea9a; border-bottom-color: rgba(80,234,154,.5); outline: none; }
.cm__form { text-align: left; }
.cm__placeholder { margin: 0; padding: 48px 20px; text-align: center; font-size: 14px; color: #6f6f6f; border: 1px dashed rgba(255,255,255,.12); border-radius: 4px; }
/* HubSpot form, in the site's look */
.cm .hs-form fieldset { max-width: none !important; }
.cm .hs-form .hs-form-field { margin-bottom: 16px; }
.cm .hs-form label { display: block; margin-bottom: 6px; font-family: var(--ff); font-size: 13px; font-weight: 700; color: #e8e8e8; }
.cm .hs-form .hs-input:not([type=checkbox]):not([type=radio]) {
  width: 100% !important; padding: 12px 14px; font-family: var(--ff); font-size: 15px; color: #fff;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-btn); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.cm .hs-form .hs-input:focus { border-color: #50ea9a; box-shadow: 0 0 0 3px rgba(80,234,154,.12); }
.cm .hs-form textarea.hs-input { min-height: 110px; resize: vertical; }
.cm .hs-form .hs-error-msgs { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; color: #F9465C; }
.cm .hs-form .legal-consent-container, .cm .hs-form .hs-richtext { font-size: 12px; line-height: 1.5; color: #9a9a9a; }
.cm .hs-form .actions { text-align: center; }
.cm .hs-form .hs-button {
  margin-top: 10px; padding: 14px 30px; font-family: var(--ff); font-size: 17px; font-weight: 800; text-transform: uppercase;
  color: #fff; background: #020a07; border: 1px solid rgba(80,234,154,.5); border-radius: var(--radius-btn); cursor: pointer;
  box-shadow: 0 4px 10px rgba(80,234,154,.1); transition: box-shadow .2s, border-color .2s, transform .2s;
}
.cm .hs-form .hs-button:hover { border-color: #d4fff0; box-shadow: 0 0 22px rgba(80,234,154,.45); transform: translateY(-2px); }
.cm .submitted-message { text-align: center; font-size: 16px; line-height: 1.6; color: #e8e8e8; }
@media (max-width: 600px) {
  .cm .cm__box.glass { padding: 48px 22px 32px; }
  .cm__title { font-size: 26px; }
  .cm__lead { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .cm__backdrop, .cm .cm__box.glass { transition: none; } .cm__step.is-in { animation: none; } }
/* 23/10 (her comment: too generic, buttons off-centre): the modal borrows the site's
   pieces: the neon line with its travelling pulse ("Como funciona"), a green glow from
   the top, the institution types as tags, and two choice cards with a neon edge on hover
   instead of the two buttons. The glow buttons keep their natural width (the min-width
   left their text off-centre). */
.cm__actions .glow-button { min-width: 0; }
.cm .cm__box.glass { width: min(680px, 100%); padding-top: 60px; }
.cm__neon {
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(80,234,154,.9) 25%, rgba(80,234,154,.9) 75%, transparent);
  box-shadow: 0 0 10px rgba(80,234,154,.7), 0 0 24px rgba(80,234,154,.35);
}
.cm__neon i {
  position: absolute; top: -1px; left: 0; width: 90px; height: 3px; border-radius: 3px;
  background: radial-gradient(closest-side, #eafff5, rgba(80,234,154,.9) 45%, transparent);
  filter: blur(.4px); box-shadow: 0 0 14px #50ea9a;
  animation: cmPulse 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes cmPulse { 0% { transform: translateX(-90px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(calc(min(680px, 100vw) * .84)); opacity: 0; } }
.cm__glow {
  position: absolute; top: -170px; left: 50%; width: 560px; height: 320px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(80,234,154,.16), rgba(80,234,154,.05) 55%, transparent);
  pointer-events: none; z-index: -1;
}
.cm__title { font-size: 34px; }
/* institution types */
.cm__chips { list-style: none; margin: 4px auto 34px; padding: 0; max-width: 520px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cm__chips li {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; font-size: 13px; line-height: 1.2; color: #d6d6d6;
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-pill); background: rgba(255,255,255,.025);
}
.cm__chips li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #50ea9a; box-shadow: 0 0 6px rgba(80,234,154,.9); }
.cm.is-open [data-step="ask"].is-in .cm__chips li { animation: cmChip .4s var(--ease) both; animation-delay: calc(.12s + var(--i) * .05s); }
@keyframes cmChip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* choice cards */
.cm__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.cm-choice {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 20px 44px 20px 18px; font-family: var(--ff); text-align: left; color: #fff; cursor: pointer;
  background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 60%);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-card);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.cm-choice:hover, .cm-choice:focus-visible {
  outline: none; transform: translateY(-3px); border-color: rgba(80,234,154,.7);
  background: linear-gradient(150deg, rgba(80,234,154,.1), rgba(80,234,154,.02) 60%);
  box-shadow: 0 0 0 1px rgba(80,234,154,.25), 0 0 26px -4px rgba(80,234,154,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.cm-choice__icon {
  grid-row: 1 / 3; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #e8e8e8;
  border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.35); transition: color .25s, border-color .25s, box-shadow .25s;
}
.cm-choice:hover .cm-choice__icon, .cm-choice:focus-visible .cm-choice__icon { color: #50ea9a; border-color: rgba(80,234,154,.6); box-shadow: 0 0 16px rgba(80,234,154,.35); }
.cm-choice__label { align-self: end; font-size: 17px; font-weight: 700; line-height: 1.25; }
.cm-choice__sub { align-self: start; margin-top: 3px; font-size: 13px; line-height: 1.4; color: #9a9a9a; }
.cm-choice__arrow { position: absolute; right: 18px; top: 50%; margin-top: -7px; color: #6f6f6f; transition: color .25s, transform .25s var(--ease); }
.cm-choice:hover .cm-choice__arrow, .cm-choice:focus-visible .cm-choice__arrow { color: #50ea9a; transform: translateX(4px); }
/* "não" step: a badge with a neon ring */
.cm__badge {
  display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%; color: #50ea9a;
  border: 1px solid rgba(80,234,154,.55); background: rgba(80,234,154,.06);
  box-shadow: 0 0 22px rgba(80,234,154,.3), inset 0 0 14px rgba(80,234,154,.12);
}
@media (max-width: 600px) {
  .cm__choices { grid-template-columns: 1fr; }
  .cm__title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .cm__neon i { animation: none; opacity: 0; } .cm__chips li { animation: none !important; } }
/* 23/10 (her comment: a scrollbar flashing at the bottom): the neon pulse ran past the
   card's right edge on every pass and the card (overflow: auto) scrolled sideways. The
   pulse now travels only within its line (fading in and out at the ends), and the card
   never scrolls sideways. */
.cm .cm__box.glass { overflow-x: hidden; overflow-y: auto; }
.cm__neon i { left: 0; animation-name: cmPulse2; }
@keyframes cmPulse2 { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 90px); opacity: 0; } }
/* 23/10: the form's remaining pieces (HubSpot's markup, also used by the preview copy in
   js/main.js): required mark, helper text, dropdown, consent checkboxes, error state */
.cm .hs-form .hs-form-required { margin-left: 3px; color: #50ea9a; }
.cm .hs-form .hs-field-desc { margin: 6px 0 0; font-size: 12px; color: #9a9a9a; }
.cm .hs-form select.hs-input {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px !important;
  background: rgba(0,0,0,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M.7.7l5.8 6 5.8-6' fill='none' stroke='%2350ea9a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.cm .hs-form select.hs-input:invalid { color: #8a8a8a; }
.cm .hs-form select.hs-input option { color: #fff; background: #0b0d0c; }
.cm .hs-form .hs-input.invalid, .cm .hs-form .hs-input.error { border-color: #F9465C; }
.cm .hs-form .legal-consent-container { margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.cm .hs-form .legal-consent-container p { margin: 0 0 12px; }
.cm .hs-form .legal-consent-container a { color: #50ea9a; }
.cm .hs-form .hs-form-booleancheckbox-display {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; font-size: 13px; font-weight: 400; line-height: 1.45; color: #d6d6d6; cursor: pointer;
}
.cm .hs-form .hs-form-booleancheckbox-display input {
  flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: #50ea9a; cursor: pointer;
}
.cm .hs-form .hs-form-booleancheckbox-display input.invalid { outline: 1px solid #F9465C; outline-offset: 2px; }
.cm .submitted-message { padding: 40px 10px; }
/* ===== Background reveal (23/10, her comment; js/main.js) =====
   The home hero threads and the big numbers' data wave are revealed from left to right
   (a soft-edged mask sweeping across, 2.4 s) each time their screen comes in. */
html.bg-rv .hero-bg, html.bg-rv canvas.bn-wave {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 40%, transparent 60%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 40%, transparent 60%, transparent 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
html.bg-rv .hero-bg.bg-reveal, html.bg-rv canvas.bn-wave.bg-reveal { animation: bgReveal 2.4s cubic-bezier(.45,0,.25,1) .15s both; }
@keyframes bgReveal {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}
/* 23/10 (her comment: the form step was too tall; ideally no scrolling): fields in two
   columns (e-mail | name, phone | company, job | product), aligned at the bottom so the
   inputs line up when a label wraps; consents and the button across the whole width;
   tighter spacing. Works on HubSpot's real markup (one fieldset per field) and on the
   preview copy (one .hs-form-field per field). */
.cm [data-step="form"] .cm__title { font-size: 26px; margin-bottom: 6px; }
.cm [data-step="form"] .cm__lead { margin-bottom: 20px; font-size: 14px; }
.cm [data-step="form"] .cm__eyebrow { margin-bottom: 10px; }
.cm .cm__box.glass:has([data-step="form"]:not([hidden])) { padding-top: 44px; padding-bottom: 28px; }
.cm .hs-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: end; }
.cm .hs-form > *:has(textarea), .cm .hs-form > *:has(input[type=checkbox]), .cm .hs-form > .legal-consent-container,
.cm .hs-form > .hs_submit, .cm .hs-form > .actions, .cm .hs-form > .hs-richtext, .cm .hs-form > .hs_error_rollup,
.cm .hs-form > fieldset:has(.legal-consent-container) { grid-column: 1 / -1; }
.cm .hs-form .hs-form-field { margin-bottom: 12px; }
.cm .hs-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.cm .hs-form fieldset .input { margin-right: 0 !important; }
.cm .hs-form label { margin-bottom: 5px; font-size: 12.5px; line-height: 1.3; }
.cm .hs-form .hs-input:not([type=checkbox]):not([type=radio]) { padding: 10px 12px; font-size: 14px; }
.cm .hs-form .hs-field-desc { margin-top: 4px; font-size: 11px; }
.cm .hs-form .hs-error-msgs { margin-top: 4px; font-size: 11px; }
.cm .hs-form .legal-consent-container { margin-top: 2px; padding-top: 12px; }
.cm .hs-form .legal-consent-container, .cm .hs-form .hs-richtext { font-size: 11.5px; line-height: 1.45; }
.cm .hs-form .legal-consent-container p { margin-bottom: 8px; }
.cm .hs-form .hs-form-booleancheckbox-display { margin-bottom: 6px; font-size: 12px; }
.cm .hs-form .hs-button { margin-top: 6px; padding: 12px 28px; font-size: 15px; }
.cm [data-step="form"] .cm__back { margin-top: 14px; }
@media (max-width: 600px) { .cm .hs-form { grid-template-columns: 1fr; } }/* the e-mail's helper line hangs below its input, so the two inputs of that row stay level */
.cm .hs-form .hs-form-field { position: relative; margin-bottom: 18px; }
.cm .hs-form .hs-field-desc { position: absolute; left: 0; top: 100%; margin-top: 3px; white-space: nowrap; }
.cm .hs-form .hs-form-field:has(.hs-error-msgs:not([hidden]):not(:empty)) .hs-field-desc { display: none; }
/* 23/10 (her comment: spacing, and the product question on one line): a 6-column grid.
   Row 1: e-mail | full name (half each). Row 2: phone | company | job (a third each; the
   labels are short). Row 3: the product question across the whole width, so its label fits
   on one line. Even gaps between rows (room for the e-mail's helper line), the privacy text
   across the whole width. Fields are matched by name, on HubSpot's markup and the copy. */
.cm .hs-form { grid-template-columns: repeat(6, 1fr); column-gap: 14px; row-gap: 22px; align-items: start; }
.cm .hs-form > * { grid-column: 1 / -1; }
.cm .hs-form > *:has([name="email"]), .cm .hs-form > *:has([name="firstname"]) { grid-column: span 3; }
.cm .hs-form > *:has([name="phone"]), .cm .hs-form > *:has([name="company"]), .cm .hs-form > *:has([name="jobtitle"]) { grid-column: span 2; }
.cm .hs-form > *:has(select) { grid-column: 1 / -1; }
.cm .hs-form .hs-form-field { margin-bottom: 0; }
.cm .hs-form fieldset .hs-form-field { margin-bottom: 0; }
.cm .hs-form label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm .hs-form .legal-consent-container label, .cm .hs-form .hs-form-booleancheckbox-display { white-space: normal; overflow: visible; }
/* 29/10 (site live): HubSpot writes its error messages as <label>s, so the rule above cut them
   to one line ("O número que você inseriu nã…" under the phone); errors wrap in full */
.cm .hs-form .hs-error-msgs label { white-space: normal; overflow: visible; text-overflow: clip; }
.cm .hs-form .hs-field-desc { margin-top: 4px; }
.cm .hs-form .legal-consent-container { margin-top: 4px; padding-top: 16px; }
.cm .hs-form .legal-consent-container p, .cm .hs-form .hs-richtext p { max-width: none; margin-bottom: 12px; }
.cm .hs-form .hs-form-booleancheckbox-display { margin-bottom: 8px; }
.cm .hs-form > .actions, .cm .hs-form > .hs_submit { margin-top: -4px; }
@media (max-width: 600px) {
  .cm .hs-form { grid-template-columns: 1fr; row-gap: 18px; }
  .cm .hs-form > * { grid-column: 1 / -1 !important; }
  .cm .hs-form label { white-space: normal; }
}
/* 23/10 (her comment): a bit more room between the rows of fields, and a shorter
   "Solicitar contato" button */
.cm .hs-form { row-gap: 28px; }
.cm .hs-form .hs-button { padding: 9px 26px; font-size: 14px; line-height: 1.2; }
.cm .hs-form > .actions, .cm .hs-form > .hs_submit { margin-top: -8px; }
/* 23/10 (her comments): field labels in regular weight (400) at 13px, easier to read than
   700 at that size; the privacy text fills the card's width (the site-wide text-wrap:
   balance was making its lines short) */
.cm .hs-form label { font-weight: 400; font-size: 13px; color: #d6d6d6; }
.cm .hs-form .legal-consent-container p, .cm .hs-form .hs-richtext p,
.cm .hs-form .hs-form-booleancheckbox-display span { text-wrap: pretty; max-width: none; width: 100%; }
/* 23/10 (her comment): the choice cards' icons are the site's green 3D scanline icons
   (js/icons3d.js: bfmProducts for "Sim", shop for "Não"); no circle, no turning on hover */
.cm-choice__icon { width: 64px; height: 56px; border: 0; border-radius: 0; background: none; box-shadow: none !important; }
.cm-choice__art { display: block; width: 64px; height: 56px; pointer-events: none; }
.cm-choice:hover .cm-choice__icon, .cm-choice:focus-visible .cm-choice__icon { border: 0; box-shadow: none; }
.cm-choice { padding-left: 12px; column-gap: 10px; }
/* 23/10 (her comment): the "Solicitar contato" button fills with neon green on hover, dark text */
.cm .hs-form .hs-button { transition: background-color .2s, color .2s, box-shadow .2s, border-color .2s, transform .2s; }
.cm .hs-form .hs-button:hover, .cm .hs-form .hs-button:focus-visible {
  background: #50ea9a; color: #020a07; border-color: #50ea9a; outline: none;
  box-shadow: 0 0 24px rgba(80,234,154,.6), 0 0 48px rgba(80,234,154,.25);
}
/* 23/10 (her comment): the dropdown arrow on the product field. It was there, but the
   general input rule (more specific) overrode its background; now set on its own, in the
   stroke style of the language selector's chevron */
.cm .hs-form select.hs-input:not([type=checkbox]):not([type=radio]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M.7.7l5.8 6 5.8-6' fill='none' stroke='%2350ea9a' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 13px 8px;
  padding-right: 40px !important;
}
/* 23/10 (her request): carousel arrows (js/carousel-arrows.js), every view: only a thin
   neon green line, no box, no circle. Centred on the carousel's strip, just outside it when
   the screen has room at the sides, otherwise just inside its edges. Only on the pages that
   load the script (Portuguese for now) */
.car-arrows { position: relative; }
.car-arrow {
  position: absolute; z-index: 6; top: var(--car-top, 50%); width: 44px; height: 44px; margin-top: -22px;
  padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.car-arrow--prev { left: var(--car-left, 6px); }
.car-arrow--next { right: var(--car-right, 6px); }
.car-arrow::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  border-top: 2px solid #50ea9a; border-right: 2px solid #50ea9a;
  filter: drop-shadow(0 0 4px rgba(80, 234, 154, .7));
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.car-arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.car-arrow--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.car-arrow:hover::before { filter: drop-shadow(0 0 7px rgba(80, 234, 154, 1)); }
.car-arrow--prev:hover::before { transform: translate(-50%, -50%) rotate(-135deg); }
.car-arrow--next:hover::before { transform: translate(-50%, -50%) rotate(45deg); }
.car-arrow:focus-visible { outline: 1px solid rgba(80, 234, 154, .6); outline-offset: 2px; }
/* 23/10 (her request): no arrow where there is no card in that direction */
.car-arrow { transition: opacity .25s var(--ease); }
.car-arrow.is-off { opacity: 0; pointer-events: none; }
/* 27/10 (her comment): phone field with HubSpot's country code list (real form and the preview
   copy share the markup): code list on the left, number on the right, no box around both */
.cm .hs-form div.hs-fieldtype-intl-phone.hs-input:not([type=checkbox]):not([type=radio]) {
  display: flex; gap: 6px; padding: 0; background: none; border: 0; box-shadow: none;
}
.cm .hs-form .hs-fieldtype-intl-phone select.hs-input:not([type=checkbox]):not([type=radio]) {
  flex: 0 0 auto; width: 86px !important; float: none; padding-left: 10px; padding-right: 26px !important; background-position: right 9px center; font-size: 14px;
}
.cm .hs-form .hs-fieldtype-intl-phone input.hs-input:not([type=checkbox]):not([type=radio]) { flex: 1 1 auto; width: auto !important; min-width: 0; float: none; }
/* 29/10 (site live, her print): the real HubSpot form groups its fields two by two in
   fieldsets (e-mail | note | name + phone | company + job | product | privacy), with its own
   50% floats, so the 6-column grid above squeezed four fields into one row. Only on the real
   form (.hs-form-private, which the preview copy doesn't have): the fieldsets step aside
   (display: contents) and each field takes the same place as in the copy. Row 1: e-mail |
   name; the "*Utilize um e-mail corporativo" note (a rich-text block of its own in HubSpot,
   orange) hangs small and grey under the e-mail; row 2: phone | company | job; row 3: product. */
.cm .hs-form-private fieldset { display: contents; }
.cm .hs-form-private .hs-form-field { width: auto !important; float: none !important; padding: 0 !important; min-width: 0; }
.cm .hs-form-private .input { margin-right: 0 !important; }
.cm .hs-form-private .hs_email { grid-column: 1 / 4; grid-row: 1; }
.cm .hs-form-private .hs_firstname { grid-column: 4 / 7; grid-row: 1; }
.cm .hs-form-private fieldset.form-columns-0 > .hs-richtext {
  grid-column: 1 / 4; grid-row: 1; align-self: end; transform: translateY(calc(100% + 4px)); margin: 0;
}
.cm .hs-form-private fieldset.form-columns-0 > .hs-richtext,
.cm .hs-form-private fieldset.form-columns-0 > .hs-richtext * {
  font-family: var(--ff) !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.3 !important; color: #9a9a9a !important;
}
.cm .hs-form-private fieldset.form-columns-0 > .hs-richtext p { margin: 0 !important; }
.cm .hs-form-private .hs_phone { grid-column: 1 / 3; grid-row: 2; }
.cm .hs-form-private .hs_company { grid-column: 3 / 5; grid-row: 2; }
.cm .hs-form-private .hs_jobtitle { grid-column: 5 / 7; grid-row: 2; }
.cm .hs-form-private .hs-fieldtype-select { grid-column: 1 / -1; grid-row: 3; }
.cm .hs-form-private .legal-consent-container, .cm .hs-form-private .hs_submit,
.cm .hs-form-private .hs_error_rollup, .cm .hs-form-private .hs_recaptcha { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .cm .hs-form-private .hs-form-field, .cm .hs-form-private fieldset.form-columns-0 > .hs-richtext { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .cm .hs-form-private fieldset.form-columns-0 > .hs-richtext { transform: none; margin-top: -14px; }
}

/* ===== Cookie banner (28/10, LGPD; js/analytics.js) =====
   A glass card at the bottom centre, after the page has loaded. Accept and decline are the
   same button, side by side (equal weight, as the ANPD guide asks). Below the contact modal. */
.cb {
  position: fixed; left: 0; right: 0; margin: 0 auto; bottom: 24px; z-index: 9000;
  width: min(860px, calc(100% - 32px));
  display: flex; align-items: center; gap: 28px;
  padding: 20px 24px; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-card);
  background: rgba(5, 6, 6, .92); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(16px);
  transition: opacity .35s var(--ease), transform .45s cubic-bezier(.2,.8,.2,1);
}
/* 28/10: plain dark card (not .glass): no neon edge or lift on hover; centred with margin, not a transform */
.cb.is-in { opacity: 1; transform: none; }
.cb__text { margin: 0; flex: 1 1 auto; font-size: 14px; line-height: 1.55; color: #b5b5b5; }
.cb__text a { color: #50ea9a; border-bottom: 1px solid rgba(80,234,154,.4); transition: border-color .2s; }
.cb__text a:hover, .cb__text a:focus-visible { border-bottom-color: #50ea9a; outline: none; }
.cb__actions { flex: 0 0 auto; display: flex; gap: 12px; }
.cb__actions .glow-button { min-width: 120px; cursor: pointer; font-family: var(--ff); }
.cb__actions .glow-button span { width: 100%; text-align: center; }
@media (max-width: 600px) {
  .cb { bottom: 16px; flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 18px 16px; }
  .cb__actions .glow-button { flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .cb { transition: opacity .2s linear; } }