/* =========================================================
   Bento Sistemas — Landing page
   Medidas de referência: frame Figma "Lp" (1440 × 9027)
   ========================================================= */

/* ---------- Fontes (as mesmas do Figma) ---------- */
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

@font-face { font-family: "Neue Haas Display"; src: url("../fonts/NeueHaasDisplayThin.ttf") format("truetype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Neue Haas Display"; src: url("../fonts/NeueHaasDisplayLight.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Neue Haas Display"; src: url("../fonts/NeueHaasDisplayRoman.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Haas Display"; src: url("../fonts/NeueHaasDisplayMediu.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Neue Haas Display"; src: url("../fonts/NeueHaasDisplayBold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --black: #000;
  --white: #fff;
  --blue: #2c6eff;          /* Azul Avante */
  --blue-strong: #1d50dc;
  --blue-mid: #8abaff;      /* Azul médio */
  --grey: #95a7b5;          /* Cool Grey 3 */
  --cyan: #a1fffd;

  --container: 1294px;
  --gutter: clamp(20px, 5.035vw, 73px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  --font: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Neue Haas Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-inter: "Inter", system-ui, sans-serif;

  --panel-h: clamp(560px, 100svh, 926px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

h1, h2, h3, p, figure, blockquote, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.text-blue { color: var(--blue); }
.text-gradient {
  background-image: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 110.61%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Fontes da UI do dashboard */
.nh-thin   { font-family: var(--font-ui); font-weight: 200; }
.nh-light  { font-family: var(--font-ui); font-weight: 300; }
.nh-roman  { font-family: var(--font-ui); font-weight: 400; }
.nh-medium { font-family: var(--font-ui); font-weight: 500; }
.nh-bold   { font-family: var(--font-ui); font-weight: 700; }

/* Borda em gradiente (traço de vidro do Figma) */
.glass-border { position: relative; }
.glass-border::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gb, linear-gradient(225deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 38%, rgba(255,255,255,.3) 100%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Botões ---------- */
/* Microinterações: resposta rápida no hover (≈220ms) e no toque (≈90ms).
   O hover só existe em dispositivos com ponteiro, para não "grudar" no mobile. */
:root { --btn-ease: cubic-bezier(.2, .8, .2, 1); }
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  --sheen: rgba(255,255,255,.28);
  transition: transform .22s var(--btn-ease), box-shadow .25s var(--btn-ease), background-color .25s var(--ease-soft), color .25s var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  will-change: transform;
}
/* Brilho deslizante, entre o fundo e o texto */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 32%, var(--sheen) 50%, transparent 68%);
  transform: translateX(-110%);
  pointer-events: none;
}
.btn:active { transform: scale(.97); transition-duration: .09s; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px) scale(1.03); }
  .btn:hover::after { transform: translateX(110%); transition: transform .7s var(--ease-soft); }
  .btn:active { transform: translateY(0) scale(.97); }
}

.btn--primary {
  background: var(--blue-strong);
  color: var(--white);
  font-weight: 700;
  border-radius: 83px;
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #2460ec; box-shadow: 0 10px 26px -12px rgba(44,110,255,.7); }
}

.btn--white { background: var(--white); color: var(--black); --sheen: rgba(29,80,220,.11); }
@media (hover: hover) and (pointer: fine) {
  .btn--white:hover { box-shadow: 0 10px 26px -14px rgba(255,255,255,.5); }
}
.btn--white:active { background: #f1f4fb; }

.btn--sm {
  width: 227.292px; max-width: 100%;
  padding: 9.631px;
  border-radius: 25.041px;
  font-size: 15.41px; font-weight: 500;
}
.btn--lg {
  width: 343px; max-width: 100%;
  padding: 10px;
  border-radius: 135px;
  font-size: clamp(18px, 1.667vw, 24px); font-weight: 700;
}

/* Link com sublinhado animado */
.nav-link { position: relative; transition: color .3s var(--ease-soft); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: 76px;
  transition: padding .5s var(--ease), background-color .5s var(--ease-soft), box-shadow .5s var(--ease-soft), backdrop-filter .5s var(--ease-soft);
}
.site-header::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: rgba(255,255,255,.08);
  opacity: 0; transition: opacity .5s var(--ease-soft);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; transition: height .5s var(--ease); }
.header__logo img { width: 144px; height: 75.5445px; transform-origin: left center; transition: transform .5s var(--ease); }
.header__nav { display: flex; align-items: center; gap: 28.688px; font-size: 20px; }
.header__cta { width: 270px; height: 64px; padding: 10px; font-size: 24px; transition: transform .22s var(--btn-ease), box-shadow .25s var(--btn-ease), background-color .25s var(--ease-soft), height .5s var(--ease), width .5s var(--ease), font-size .5s var(--ease); }

.site-header.is-scrolled {
  padding-top: 0;
  background: rgba(3, 6, 16, .62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.8);
}
.site-header.is-scrolled::after { opacity: 1; }
.site-header.is-scrolled .header__inner { height: 76px; }
.site-header.is-scrolled .header__logo img { transform: scale(.72); }
.site-header.is-scrolled .header__cta { height: 50px; width: 230px; font-size: 20px; }

.header__toggle { display: none; width: 44px; height: 44px; position: relative; border-radius: 50%; }
.header__toggle span {
  position: absolute; left: 11px; right: 11px; height: 2px; background: var(--white); border-radius: 2px;
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.header__toggle span:first-child { top: 17px; }
.header__toggle span:last-child { top: 25px; }
.header__toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.header__toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: -1;
  padding: 120px var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background: rgba(0,0,0,.86);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease-soft), visibility 0s linear .45s;
}
.mobile-menu[hidden] { display: flex; }
.mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-soft); }
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu nav a {
  font-size: 34px; font-weight: 500; padding: 6px 0;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-menu.is-open nav a { opacity: 1; transform: none; }
.mobile-menu.is-open nav a:nth-child(2) { transition-delay: .05s; }
.mobile-menu.is-open nav a:nth-child(3) { transition-delay: .1s; }
.mobile-menu.is-open nav a:nth-child(4) { transition-delay: .15s; }
.mobile-menu.is-open nav a:nth-child(5) { transition-delay: .2s; }
.mobile-menu .btn { height: 60px; font-size: 20px; }

/* =========================================================
   FUNDO DECORATIVO (Vector 291)
   ========================================================= */
main { position: relative; }
.page-bg {
  position: absolute; z-index: 0; pointer-events: none;
  left: 0; right: 0; top: 0; height: 2111px;
  overflow: hidden;
}
.page-bg img {
  position: absolute;
  left: calc(50% - 720px - 800.3px); top: -258px;
  width: 2983.6px; height: 2369.17px; max-width: none;
}
main > section { position: relative; z-index: 1; }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding-top: 293px; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 607fr) minmax(0, 610fr);
  column-gap: clamp(32px, 5.35vw, 77px);
  align-items: start;
}
.hero__content {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 538px; gap: 40px;
}
.hero__title {
  max-width: 600px;
  font-size: clamp(42px, 5.694vw, 82px);
  line-height: 1.0122;
  font-weight: 500;
}
/* No Figma a descrição (621px) e os chips (636.8px) ultrapassam a coluna de 607px */
.hero__desc { width: min(621px, 100% + 21px); font-size: clamp(18px, 2.222vw, 32px); line-height: 1.35; }

.chips { display: flex; flex-wrap: nowrap; gap: 13.415px; }
.chip {
  height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(44,110,255,.25);
  font-size: 16.654px; white-space: nowrap;
  transition: background-color .35s var(--ease-soft), transform .45s var(--ease);
}
.chip:hover { background: rgba(44,110,255,.38); transform: translateY(-2px); }
.chip--1 { width: 229px; border-radius: 46.26px; gap: 10.177px; }
.chip--2 { width: 205px; border-radius: 49.036px; gap: 9.715px; }
.chip--3 { width: 176px; border-radius: 47.185px; gap: 13.415px; }
.chip > img { flex: none; }
.chip { --gb: linear-gradient(225deg, rgba(255,255,255,.08) 0%, rgba(140,175,255,.55) 60%, rgba(140,175,255,.4) 100%); }
.chip { position: relative; }
.chip::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--gb);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.icon-suporte { position: relative; width: 10.5px; height: 17.12px; flex: none; transform: scaleX(-1); }
.icon-suporte img { position: absolute; max-width: none; }

/* ---------- Dashboard ---------- */
.dash-wrap {
  --dash-s: 1;
  position: relative;
  width: 100%; max-width: 610px;
  aspect-ratio: 610 / 538.08;
  justify-self: end;
}
.dash {
  position: absolute; left: 0; top: 0;
  width: 610px; height: 538.08px;
  transform: scale(var(--dash-s)); transform-origin: 0 0;
}
.dash > div { position: absolute; }
.dash p { margin: 0; line-height: normal; }

.glass {
  -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px);
}
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: .8px;
  background: linear-gradient(200deg, rgba(255,255,255,.28), rgba(255,255,255,.06) 45%, rgba(255,255,255,.14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

.dash__resumo {
  left: 89.59px; top: 0; width: 397.318px; height: 337.332px;
  padding: 18.697px 20.255px;
  display: flex; flex-direction: column; gap: 18.697px;
  background: var(--blue-strong);
  border-radius: 24.93px;
  filter: drop-shadow(0 3.895px 5.843px rgba(60,61,63,.1));
}
.dash__title-row { display: flex; justify-content: space-between; align-items: stretch; height: 26px; }
.dash__title { display: flex; flex-direction: column; justify-content: space-between; white-space: nowrap; }
.dash__dropdown {
  width: 109.068px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12.465px 0 9.349px;
  border: .779px solid var(--grey); border-radius: 3.895px;
  font-size: 9.349px; white-space: nowrap;
}
.dash__chevron { position: relative; width: 6.232px; height: 2.726px; flex: none; }
.dash__chevron > span { position: absolute; left: 1.753px; top: -1.753px; width: 2.726px; height: 6.232px; transform: rotate(90deg); }
.dash__chevron img { position: absolute; inset: -12.5% -28.58%; width: 157.16%; height: 125%; max-width: none; }
.dash__chart { position: relative; width: 356.807px; height: 218.136px; flex: none; }
.dash__values {
  position: absolute; left: 0; top: 2.15px; height: 183.854px; width: 2.47%;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 6.232px; color: var(--grey);
}
.dash__months {
  position: absolute; left: 5.15%; top: 209.02px; width: 93.07%; height: 9.117px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 6.232px; color: var(--grey);
}
.dash__lines {
  position: absolute; left: 5.96%; top: 0; width: 92.26%; height: 186.12px;
  display: flex; align-items: center; justify-content: space-between; overflow: hidden;
}
.dash__lines i { width: .584px; height: 190.089px; background: var(--grey); opacity: .25; flex: none; }
.dash__v { position: absolute; }
.dash__v > div { position: absolute; }
.dash__v img { width: 100%; height: 100%; max-width: none; }
.dash__v--nfces { left: 6.04%; top: 68.51px; width: 93.96%; height: 117.196px; }
.dash__v--289 { left: 5.93%; top: 136.04px; width: 92.26%; height: 49.672px; }
.dash__v--290 { left: 6.01%; top: 140.18px; width: 92.14%; height: 45.625px; }
.dash__v--nfes { left: 5.93%; top: 136.04px; width: 92.26%; height: 49.672px; }

.dash__legend { display: flex; gap: 18.697px; }
.dash__legend-item { display: flex; align-items: flex-start; gap: 6.232px; font-size: 7.791px; white-space: nowrap; }
.dash__legend-item p { line-height: normal; }
.dash__legend-item--sm { gap: 5.708px; font-size: 7.135px; }

.dash__cards {
  left: 449.51px; top: 85.7px; width: 160.485px;
  display: flex; flex-direction: column; gap: 11.368px;
}
.dash__mini {
  position: relative;
  height: 90.273px; padding: 10.699px 12.036px;
  display: flex; flex-direction: column; justify-content: center; gap: 5.35px;
  background: rgba(0,0,0,.25);
  border-radius: 19.476px;
  box-shadow: 0 3.343px 10.03px rgba(60,61,63,.1);
}
.dash__mini-title { font-size: 8.024px; }
.dash__mini-body { display: flex; flex-direction: column; gap: 2.675px; }
.dash__mini-value { font-size: 13.374px; color: var(--blue); white-space: nowrap; }
.dash__mini-trend { display: flex; align-items: center; gap: 4.012px; font-size: 6.687px; color: var(--grey); white-space: nowrap; }

.dash__saldo {
  left: 126.99px; top: 305.39px; width: 309.285px; height: 232.691px;
  padding: 23.269px 25.208px;
  display: flex; flex-direction: column; gap: 15.513px;
  overflow: hidden;
  background: #16202c;
  border-radius: 24.239px;
  box-shadow: 0 4.848px 14.543px rgba(60,61,63,.1);
}
.dash__saldo .dash__title { height: 33px; }
.dash__banks { display: flex; flex-direction: column; gap: 3.878px; }
.dash__bank {
  display: flex; align-items: center; gap: 11.635px;
  padding: 7.756px 15.513px;
  background: #373737; border-radius: 4.848px; overflow: hidden;
}
.dash__bank-icon {
  width: 23.269px; height: 23.269px; flex: none; overflow: hidden; border-radius: 4.848px;
  filter: drop-shadow(0 4.848px 7.272px rgba(60,61,63,.1));
}
.dash__bank-icon img { width: 100%; height: 100%; object-fit: cover; }
.dash__bank-name { flex: 1; display: flex; flex-direction: column; line-height: 1; }
.dash__bank-name .nh-medium { font-size: 11.635px; color: var(--blue); }
.dash__bank-name .nh-light { font-size: 9.695px; }
.dash__bank-bal { font-size: 9.695px; line-height: 1; white-space: nowrap; }
.dash__saldo-fade { position: absolute; left: 0; bottom: 0; width: 582.212px; height: 23.269px; background: #16202c; }

.dash__pedidos {
  left: 0; top: 103.61px; width: 189.078px; height: 220.473px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11.416px;
  background: rgba(0,0,0,.25);
  border-radius: 28.54px;
  white-space: nowrap;
}
.dash__pedidos > img { width: 107.026px; height: 107.026px; }
.dash__pedidos-legend { display: flex; gap: 17.124px; }

/* =========================================================
   ESTATÍSTICAS
   ========================================================= */
.stats-section { margin-top: 75px; }
.stats {
  min-height: 152px;
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(32px, 9.65vw, 139px);
  border-radius: 34px;
  padding: 27px 24px;
  background: linear-gradient(100deg, rgba(255,255,255,.025), rgba(255,255,255,0) 70%);
}
.stat { display: flex; flex-direction: column; }
.stat__value { font-size: 40px; font-weight: 700; line-height: normal; white-space: nowrap; }
.stat__label { font-size: 16px; line-height: normal; }

/* =========================================================
   VOCÊ RECONHECE ESSA ROTINA?
   ========================================================= */
.recognition-section { margin-top: 75px; }
.recognition {
  position: relative;
  min-height: 437px;
  border-radius: 36px;
  overflow: hidden;
  isolation: isolate;
}
.recognition__stripes { position: absolute; inset: 0; z-index: -2; }
.recognition__stripes i {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--i) * 2.80824%);
  width: 4.52%;
  background: linear-gradient(to left, #000 0%, #081330 var(--v, 98.568%), var(--c, #081330) 100%);
}
.recognition__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, #000, rgba(0,0,0,0));
}
.recognition__content {
  padding: 64.6px 4.54% 60px 6.69%;
  display: flex; flex-direction: column; gap: 34px;
}
.recognition__title {
  max-width: 7.13em;
  font-size: clamp(36px, 4.694vw, 67.599px);
  font-weight: 400;
  line-height: normal;
}
.challenges { display: flex; gap: 27.612px; }
.challenge {
  flex: 0 1 364.482px;
  min-height: 79.523px;
  padding: 5.962px;
  display: flex; align-items: center; justify-content: center; gap: 19.676px;
  background: rgba(50,50,50,.46);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 15.502px;
  transition: transform .5s var(--ease), background-color .4s var(--ease-soft);
}
.challenge:hover { transform: translateY(-4px); background: rgba(60,60,60,.55); }
.challenge p { width: 263.534px; max-width: 100%; font-size: 14.31px; line-height: normal; }
.challenge__icon { position: relative; flex: none; width: 42.929px; height: 42.929px; overflow: hidden; border-radius: 5.366px; }
.challenge__icon--box { background: var(--blue); }
.challenge__icon img { position: absolute; max-width: none; }

/* =========================================================
   TRÊS FRENTES
   ========================================================= */
.fronts { margin-top: 75px; }
.fronts__head { display: flex; flex-direction: column; align-items: center; gap: 19px; text-align: center; }
.fronts__title {
  max-width: 1004px;
  font-size: clamp(40px, 5.694vw, 82px);
  font-weight: 500; line-height: normal;
  background-image: linear-gradient(89.99deg, var(--blue) 0%, var(--cyan) 110.61%);
}
.fronts__sub { max-width: 756px; font-size: clamp(18px, 2.222vw, 32px); line-height: normal; }

.fronts__row { display: flex; justify-content: center; gap: 44.54px; margin-top: 42px; padding-block: 3px; }
.feature {
  border-radius: 19.262px;
  background: linear-gradient(to bottom, #000 40.708%, var(--blue) 105.58%);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.feature:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(44,110,255,.55); }
.feature--pdv, .feature--analytics {
  flex: 0 1 624px; min-height: 786px;
  padding: 9.631px;
  display: flex; align-items: center; justify-content: center;
}
.feature__content { width: 532px; max-width: 100%; display: flex; flex-direction: column; gap: 90px; }
.feature__content--analytics { width: 531.633px; padding-inline: 12.893px; gap: 41.413px; }
.feature__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 23.114px; }
.feature__title { font-size: clamp(30px, 3.21vw, 46.229px); font-weight: 500; line-height: normal; }
.feature__desc { max-width: 478.662px; font-size: clamp(17px, 1.605vw, 23.114px); line-height: normal; }

.feature__visual { overflow: hidden; }
.feature__visual img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.feature:hover .feature__visual img { transform: scale(1.02); }
.feature__visual--pdv { width: 532px; max-width: 100%; aspect-ratio: 532 / 321.676; border-radius: 25.041px; }
.feature__visual--pdv img { height: 100%; object-fit: cover; object-position: right top; }
.feature__visual--analytics { width: 511.159px; max-width: 100%; border-radius: 24.614px; }

.feature--fiscal { margin-top: 25px; min-height: 417px; padding: 31.782px 65.491px; display: flex; align-items: center; }
.fiscal__content { flex: 1; display: flex; align-items: center; gap: 45.266px; min-height: 353.458px; }
.fiscal__copy { flex: 0 1 625.902px; min-width: 0; }
.fiscal__visual { flex: 0 0 488.118px; display: flex; flex-direction: column; gap: 14.407px; }

.ui-frame {
  position: relative;
  padding: 10.228px; border-radius: 24px;
  background: rgba(255,255,255,.04);
}
.ui-frame::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.ui-card {
  display: flex; flex-direction: column; gap: 12.006px;
  padding: 16.808px;
  background: #fff; color: #1b1b1c;
  border-radius: 16.808px;
  box-shadow: inset 0 0 0 1.201px #e3e8f2, 0 12.006px 28.813px rgba(27,27,28,.08);
  overflow: hidden;
}
.ui-row { display: flex; align-items: center; gap: 9.604px; }
.ui-h { flex: 1; font-size: 15.007px; line-height: 1; }
.ui-note { flex: 1; font-size: 13.806px; line-height: 1; }
.ui-btn { padding: 8.404px 14.407px; border-radius: 9.604px; background: var(--blue-strong); color: #fff; font-size: 13.206px; line-height: 1; }
.ui-field {
  display: flex; flex-direction: column; gap: 3.602px;
  padding: 8.404px 12.006px 9.604px;
  background: #fcfdff; box-shadow: inset 0 0 0 1.201px #e3e8f2; border-radius: 9.604px;
  line-height: 1; white-space: nowrap;
}
.ui-fields { display: flex; gap: 9.604px; }
.ui-fields .ui-field { flex: 1; }
.ui-label { font-size: 10.805px; color: #9aa1ae; }
.ui-value { font-size: 13.206px; color: #1b1b1c; }
.ui-tag { padding: 4.802px 12.006px; border-radius: 999px; background: #e7f5ec; color: #15803d; font-size: 12.006px; line-height: 1; }

/* =========================================================
   SEGMENTOS — painéis empilhados (stacking)
   ========================================================= */
.segments { margin-top: 168px; z-index: 2; }
.segments__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.segments__title { font-size: clamp(40px, 5.694vw, 82px); font-weight: 700; line-height: normal; }
.segments__sub {
  max-width: 577px; min-height: 49px;
  font-size: clamp(14px, 1.667vw, 24px); line-height: normal;
  text-transform: uppercase;
  background-image: linear-gradient(90deg, var(--blue), var(--cyan));
}

.stack { position: relative; margin-top: 61px; }
.panel {
  position: sticky; top: 0;
  height: var(--panel-h);
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.panel:nth-child(1) { z-index: 1; }
.panel:nth-child(2) { z-index: 2; }
.panel:nth-child(3) { z-index: 3; }
/* Sem will-change fixo: as camadas só são promovidas (translate3d) enquanto há transição */
.panel__inner { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 20%; }
.panel__media { position: absolute; transform-origin: 50% 50%; }
.panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Gradiente azul em camada própria, com 10% de sobra em cada lado para poder se mover
   sem revelar bordas. O SVG foi expandido com a mesma geometria, então em repouso o
   gradiente é idêntico ao do Figma.
   .panel__grad   → movimento controlado pelo scroll (JS)
   ::before       → deriva orgânica autônoma (CSS, ciclos de 6–8s) */
.panel__grad { position: absolute; inset: -10%; pointer-events: none; --g-amp: 1; }
.panel__grad::before {
  content: ""; position: absolute; inset: 0;
  background-size: 100% 100%; background-repeat: no-repeat;
  transform-origin: 50% 28%;
  animation: gradDrift var(--g-dur, 7s) ease-in-out var(--g-delay, 0s) infinite alternate both;
  animation-play-state: paused;
}
.panel.is-live .panel__grad::before { animation-play-state: running; }
.panel--comercio    { --g-dur: 7s;   --g-delay: -1.5s; }
.panel--alimentacao { --g-dur: 8s;   --g-delay: -4s; }
.panel--agro        { --g-dur: 6.5s; --g-delay: -2.5s; }
@keyframes gradDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  35%  { transform: translate3d(calc(1.1% * var(--g-amp)), calc(-1.8% * var(--g-amp)), 0) scale(calc(1 + .03 * var(--g-amp))); }
  70%  { transform: translate3d(calc(-.8% * var(--g-amp)), calc(-.6% * var(--g-amp)), 0) scale(calc(1 + .045 * var(--g-amp))); }
  100% { transform: translate3d(calc(.4% * var(--g-amp)), calc(1.4% * var(--g-amp)), 0) scale(calc(1 + .015 * var(--g-amp))); }
}
.panel__shade { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; will-change: opacity; }

/* Geometria das imagens exatamente como no Figma (relativa ao painel 1441 × 926) */
.panel--comercio .panel__media { left: -10.965%; top: -1.62%; width: 121.444%; height: 105.508%; }
.panel--alimentacao .panel__media { left: 0; top: -.648%; width: 100%; height: 103.78%; }
.panel--agro .panel__media { left: 0; top: -6.156%; width: 108.119%; height: 112.203%; }

.panel--comercio .panel__grad::before {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='-175.0 -97.7 2100.0 1172.4' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='-175.0' y='-97.7' height='1172.4' width='2100.0' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-7.25 103.75 -185.84 -12.986 890 164)'><stop stop-color='rgba(0,0,0,0)' offset='0'/><stop stop-color='rgba(11,28,64,0.1875)' offset='0.16989'/><stop stop-color='rgba(22,55,128,0.375)' offset='0.33977'/><stop stop-color='rgba(33,83,191,0.5625)' offset='0.50966'/><stop stop-color='rgba(44,110,255,0.75)' offset='0.67955'/><stop stop-color='rgba(33,83,191,0.8125)' offset='0.75966'/><stop stop-color='rgba(22,55,128,0.875)' offset='0.83977'/><stop stop-color='rgba(17,41,96,0.90625)' offset='0.87983'/><stop stop-color='rgba(11,28,64,0.9375)' offset='0.91989'/><stop stop-color='rgba(6,14,32,0.96875)' offset='0.95994'/><stop stop-color='rgba(3,7,16,0.98438)' offset='0.97997'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
}
.panel--alimentacao .panel__grad::before {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='-144.1 -96.1 1729.2 1153.2' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='-144.1' y='-96.1' height='1153.2' width='1729.2' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-16.14 104.9 -209.35 -32.253 780.84 180.12)'><stop stop-color='rgba(0,0,0,0)' offset='0'/><stop stop-color='rgba(11,28,64,0.1875)' offset='0.18285'/><stop stop-color='rgba(22,55,128,0.375)' offset='0.3657'/><stop stop-color='rgba(33,83,191,0.5625)' offset='0.54855'/><stop stop-color='rgba(44,110,255,0.75)' offset='0.73139'/><stop stop-color='rgba(33,83,191,0.8125)' offset='0.79855'/><stop stop-color='rgba(22,55,128,0.875)' offset='0.8657'/><stop stop-color='rgba(17,41,96,0.90625)' offset='0.89927'/><stop stop-color='rgba(11,28,64,0.9375)' offset='0.93285'/><stop stop-color='rgba(6,14,32,0.96875)' offset='0.96642'/><stop stop-color='rgba(3,7,16,0.98438)' offset='0.98321'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
}
.panel--agro .panel__grad::before {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='-155.8 -103.9 1869.6 1246.8' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='-155.8' y='-103.9' height='1246.8' width='1869.6' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-12.2 97.55 -200.39 -25.061 804.5 332)'><stop stop-color='rgba(0,0,0,0)' offset='0'/><stop stop-color='rgba(11,28,64,0.1875)' offset='0.152'/><stop stop-color='rgba(22,55,128,0.375)' offset='0.304'/><stop stop-color='rgba(33,83,191,0.5625)' offset='0.456'/><stop stop-color='rgba(44,110,255,0.75)' offset='0.60799'/><stop stop-color='rgba(33,83,191,0.8125)' offset='0.706'/><stop stop-color='rgba(22,55,128,0.875)' offset='0.804'/><stop stop-color='rgba(17,41,96,0.90625)' offset='0.853'/><stop stop-color='rgba(11,28,64,0.9375)' offset='0.902'/><stop stop-color='rgba(6,14,32,0.96875)' offset='0.951'/><stop stop-color='rgba(3,7,16,0.98438)' offset='0.9755'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
}

.panel__content {
  position: absolute; z-index: 1;
  left: max(var(--gutter), 9.514vw);
  top: calc(50% - 10px);
  transform: translateY(-50%);
  width: min(var(--w), 100vw - 2 * var(--gutter));
  display: flex; flex-direction: column; align-items: flex-start; gap: 33px;
}
/* Atraso escalonado do conteúdo durante a entrada do painel (--lag vem do scroll) */
.panel__content > * { translate: 0 calc(var(--lag, 0) * var(--k, 1) * var(--lag-px, 90px)); }
.panel__content > :nth-child(1) { --k: .55; }
.panel__content > :nth-child(2) { --k: 1; }
.panel__content > :nth-child(3) { --k: 1.5; }
.panel__label {
  width: var(--lw); max-width: 100%;
  height: 77px; padding: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 67px;
  font-size: clamp(26px, 2.778vw, 40px); font-weight: 700; line-height: normal; white-space: nowrap;
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  --gb: linear-gradient(48deg, rgba(255,255,255,0) 6%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 94%);
}
.panel__text { max-width: 100%; }
.panel__title { max-width: var(--tw); }
.panel__desc { max-width: var(--dw); }
.panel__title { font-size: clamp(26px, 2.778vw, 40px); font-weight: 700; line-height: normal; margin-bottom: 37px; }
.panel__desc { font-size: clamp(17px, 1.667vw, 24px); line-height: normal; }

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.testimonials {
  --tl: max(var(--gutter), calc((100% - var(--container)) / 2 + 80px));
  margin-top: -55px;
  min-height: 945px;
  padding: 169px 0 169px;
  overflow: hidden;
  z-index: 1;
}
.testimonials__bg {
  position: absolute; top: 0; bottom: 0; left: -1.458%; width: 143.889%;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 2072 945' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(46.7 46.639 -298.31 263.57 1574 689.02)'><stop stop-color='rgba(0,0,0,1)' offset='0'/><stop stop-color='rgba(3,7,16,1)' offset='0.03125'/><stop stop-color='rgba(6,14,32,1)' offset='0.0625'/><stop stop-color='rgba(11,28,64,1)' offset='0.125'/><stop stop-color='rgba(17,41,96,1)' offset='0.1875'/><stop stop-color='rgba(22,55,128,1)' offset='0.25'/><stop stop-color='rgba(33,83,191,1)' offset='0.375'/><stop stop-color='rgba(44,110,255,1)' offset='0.5'/><stop stop-color='rgba(33,83,191,1)' offset='0.625'/><stop stop-color='rgba(22,55,128,1)' offset='0.75'/><stop stop-color='rgba(17,41,96,1)' offset='0.8125'/><stop stop-color='rgba(11,28,64,1)' offset='0.875'/><stop stop-color='rgba(6,14,32,1)' offset='0.9375'/><stop stop-color='rgba(3,7,16,1)' offset='0.96875'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
  pointer-events: none;
}
.testimonials__inner { position: relative; }
.testimonials__head {
  margin-left: var(--tl);
  width: min(1109px, 100% - var(--tl) - var(--gutter));
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.testimonials__title { max-width: 9.521em; font-size: clamp(32px, 3.333vw, 48px); font-weight: 700; line-height: 1.0833; letter-spacing: .2px; }
.testimonials__nav { display: flex; gap: 21px; flex: none; }
.testimonials__nav.is-idle { visibility: hidden; }
.arrow-btn {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--white);
  display: grid; place-items: center;
  font-size: 16px;
  transition: background-color .22s var(--ease-soft), color .22s var(--ease-soft), transform .22s var(--btn-ease), opacity .3s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.arrow-btn i { transition: transform .22s var(--btn-ease); }
.arrow-btn:active { transform: scale(.97); transition-duration: .09s; background: rgba(255,255,255,.18); }
@media (hover: hover) and (pointer: fine) {
  .arrow-btn:hover { background: var(--white); color: var(--black); transform: translateY(-2px) scale(1.03); }
  .arrow-btn:active { transform: translateY(0) scale(.97); background: var(--white); }
  [data-carousel-next]:hover i { transform: translateX(3px); }
  [data-carousel-prev]:hover i { transform: translateX(-3px); }
}
.arrow-btn[disabled] { opacity: .35; pointer-events: none; }

.carousel {
  margin-top: 103px;
  display: flex; gap: 30px;
  padding: 0 var(--gutter) 13px var(--tl);
  scroll-padding-left: var(--tl);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.carousel::-webkit-scrollbar { display: none; }
.testi {
  flex: 0 0 556px; min-height: 335px;
  padding: 44px 40.5px 40px;
  scroll-snap-align: start;
  background: #fff; color: #000;
  border-radius: 35px;
  box-shadow: 0 15px 35px rgba(0,0,0,.05);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.testi:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -20px rgba(0,0,0,.45); }
.testi__author { display: flex; align-items: flex-start; gap: 16.5px; }
.testi__author img { width: 56px; height: 56px; border-radius: 50%; flex: none; }
.testi__author span { display: flex; flex-direction: column; }
.testi__author strong { font-weight: 500; font-size: 20px; line-height: 24px; letter-spacing: .2px; }
.testi__author small { font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 28px; color: #5a7184; }
.testi blockquote { margin-top: 40px; max-width: 475px; font-size: clamp(17px, 1.389vw, 20px); line-height: normal; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { margin-top: 34px; padding: 98px 0; }
/* line-height do Figma (58px); o padding compensado mantém o gradiente visível nos acentos */
.faq__title { text-align: center; font-size: clamp(36px, 5.694vw, 82px); font-weight: 700; line-height: .7073; padding-block: .3em; margin-block: -.3em; }
.faq__list {
  width: min(1076px, 100%);
  margin: 121px auto 0;
  background: #fff;
  border-radius: 35px;
  overflow: hidden;
}
.faq__item { color: #000; transition: background-color .45s var(--ease-soft), color .45s var(--ease-soft); }
.faq__item.is-open { background: var(--blue); color: #fff; }
.faq__q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 30px 40px 25px;
  text-align: left;
  font-family: var(--font-inter); font-weight: 600; font-size: clamp(16px, 1.389vw, 20px); line-height: 28px;
}
.faq__item.is-open .faq__q { padding-bottom: 0; }
.faq__item:last-child:not(.is-open) .faq__q { padding-bottom: 30px; }
.faq__icon { position: relative; flex: none; width: 15px; height: 28px; }
.faq__icon img { position: absolute; left: 0; transition: opacity .35s var(--ease-soft), transform .45s var(--ease); }
.faq__plus { top: 6px; width: 15px; height: 15px; }
.faq__minus { top: 13px; width: 15px; height: 2.143px; opacity: 0; transform: rotate(-90deg); }
.faq__item.is-open .faq__plus { opacity: 0; transform: rotate(90deg); }
.faq__item.is-open .faq__minus { opacity: 1; transform: none; }
.faq__q:hover .faq__plus { transform: rotate(90deg); }

.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p {
  max-width: calc(896px + 80px);
  padding: 16px 40px 21px;
  font-family: var(--font-inter); font-size: clamp(16px, 1.25vw, 18px); line-height: 30px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .4s var(--ease-soft), transform .5s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a p { opacity: .8; transform: none; transition-delay: .12s; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { position: relative; margin-top: 75px; padding-bottom: 76px; overflow: hidden; }
.footer__box {
  position: relative;
  width: min(1280px, 100%); min-height: 698px; margin-inline: auto;
  padding: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 64px;
  background: #000;
}
.footer__top { width: min(1092px, 100%); }
.footer__menu { display: flex; flex-wrap: wrap; gap: 12px 28.688px; font-size: 14px; font-weight: 500; }
.footer__bottom { width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; gap: 29px; }
.footer__row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.footer__legal { max-width: 413px; font-size: 12px; font-weight: 300; line-height: 1.2; letter-spacing: 1.2px; }
.footer__legal .muted { color: #666; }
.footer__legal a { color: #666; text-decoration: underline; text-underline-offset: 2px; transition: color .3s var(--ease-soft); }
.footer__legal a:hover { color: #fff; }
.footer__social { width: 121px; height: 40px; padding: 10px; display: flex; align-items: center; gap: 25px; }
.social { display: block; transition: transform .4s var(--ease), opacity .3s; }
.social:hover { transform: translateY(-3px); opacity: .8; }
.social--fb img { width: 12px; height: 21px; }
.social--in img { width: 21px; height: 20px; }
.social--ig img { width: 21px; height: 21px; }
.footer__line { width: 100%; height: 1px; }
.footer__brand { width: 1074px; max-width: 100%; height: auto; }
.footer__glow {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%);
  width: 1280px; height: 192px; pointer-events: none;
}
.footer__glow img { position: absolute; left: -18.67%; right: -6.33%; top: -61.8%; bottom: -644.52%; width: 125%; height: 806.32%; max-width: none; }

/* =========================================================
   ANIMAÇÕES DE ENTRADA
   ========================================================= */
/* Curvas de movimento
   --ease-pc:     curva do PayConductor para a hero (arranque contido, encaixe longo)
   --ease-reveal: desaceleração forte para as entradas no scroll (sem overshoot)
   --ease-nav:    navbar desce de cima com um "encaixe" mínimo */
:root {
  --ease-pc: cubic-bezier(.44, 0, 0, .97);
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);
  --ease-nav: cubic-bezier(.09, -.08, 0, 1.04);
  --ease-fade: cubic-bezier(.33, 1, .68, 1);
}

/* ---------- Hero: uma vez, no carregamento ---------- */
.js [data-intro] {
  opacity: 0;
  translate: 0 32px;
  transition-property: opacity, translate, scale;
  transition-duration: var(--fade, .7s), var(--dur, .8s), var(--dur, .8s);
  transition-timing-function: var(--ease-fade), var(--ease-pc), var(--ease-pc);
  transition-delay: var(--d, 0s);
}
.js [data-intro="nav"]   { translate: 0 -120px; --dur: .8s; transition-timing-function: var(--ease-fade), var(--ease-nav), var(--ease-nav); }
.js [data-intro="rise"]  { translate: 0 28px; --dur: 1s; }
.js [data-intro="left"]  { translate: -24px 0; --dur: 1s; }
.js [data-intro="right"] { translate: 24px 0; --dur: 1s; }
.js [data-intro="zoom"]  { translate: none; scale: 1.06; --dur: 1.4s; --fade: .9s; transition-timing-function: var(--ease-fade), var(--ease-reveal), var(--ease-reveal); }
.js [data-intro="glow"]  { translate: none; scale: 1.08; --dur: 1.8s; --fade: 1.4s; transition-timing-function: var(--ease-fade), var(--ease-reveal), var(--ease-reveal); }
.js [data-intro="lines"] { translate: none; transition: none; }
.js [data-intro="lines"].is-split { opacity: 1; }
.js.is-loaded [data-intro] { opacity: 1; translate: none; scale: none; }

/* ---------- Títulos linha a linha: cada linha sobe por trás de uma máscara ---------- */
.line {
  display: block;
  padding: .14em .08em .24em;
  margin: -.14em -.08em -.24em;
  clip-path: inset(0);
}
.line__in {
  display: block;
  translate: 0 130%;
  opacity: 0;
  transition: translate var(--ldur, 1s) var(--lease, var(--ease-reveal)) var(--d, 0s), opacity .5s var(--ease-fade) var(--d, 0s);
}
.hero__title .line__in { --ldur: .95s; --lease: var(--ease-pc); }
.is-loaded .hero__title .line__in,
.is-in > .line > .line__in { translate: none; opacity: 1; }

/* Brilho azul do fundo: deriva lenta depois da entrada */
.page-bg img { animation: glowDrift 9s ease-in-out 1.6s infinite alternate both; animation-play-state: paused; }
.page-bg.is-live img { animation-play-state: running; }
@keyframes glowDrift {
  from { translate: 0 0; }
  to   { translate: 1.2% 1%; }
}

/* ---------- Entradas no scroll (uma vez) ----------
   translate/scale/clip-path ficam para a entrada; transform fica livre para os hovers. */
.js [data-reveal] {
  opacity: 0;
  translate: 0 var(--ry, 40px);
  transition-property: opacity, translate, scale, clip-path, transform, box-shadow, background-color, color;
  transition-duration: var(--rfade, .7s), var(--rdur, .9s), var(--rdur, .9s), var(--rdur, .9s), .5s, .5s, .35s, .35s;
  transition-timing-function: var(--ease-fade), var(--ease-reveal), var(--ease-reveal), var(--ease-reveal), var(--ease), var(--ease), var(--ease-soft), var(--ease-soft);
  transition-delay: var(--d, 0s), var(--d, 0s), var(--d, 0s), var(--d, 0s), 0s, 0s, 0s, 0s;
}
/* textos de apoio: deslocamento menor */
.js [data-reveal="up-sm"] { --ry: 20px; --rdur: .8s; }
/* botões: sobem e "assentam" na escala */
.js [data-reveal="cta"]   { --ry: 24px; scale: .94; }
/* cartões e blocos: mais profundidade */
.js [data-reveal="card"]  { --ry: 56px; --rdur: 1.1s; --rfade: .8s; scale: .97; }
/* títulos com gradiente ou destaque: revelação por máscara, de baixo para cima */
.js [data-reveal="mask"]  { --ry: 32px; --rdur: 1.1s; clip-path: inset(100% -10% -30% -10%); }
.js [data-reveal="mask"].is-in { clip-path: inset(-30% -10% -30% -10%); }
/* imagens e visuais: janela que se abre + imagem que assenta (zoom out) */
.js [data-reveal="visual"] { --ry: 48px; --rdur: 1.2s; --rfade: .9s; clip-path: inset(24% 0 0 0 round var(--r, 24px)); }
.js [data-reveal="visual"].is-in { clip-path: inset(0 0 0 0 round var(--r, 24px)); }
.js [data-reveal="visual"] img { scale: 1.1; transition: scale 1.5s var(--ease-reveal) var(--d, 0s); }
.js [data-reveal="visual"].is-in img { scale: none; }
/* títulos linha a linha: o container fica visível, as linhas fazem o movimento */
.js [data-reveal="lines"] { translate: none; transition: none; }
.js [data-reveal="lines"].is-split { opacity: 1; }

.js [data-reveal].is-in { opacity: 1; translate: none; scale: none; }

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1380px) {
  .chips { flex-wrap: wrap; }
}

/* Notebook */
@media (max-width: 1280px) {
  .header__nav { gap: 22px; font-size: 18px; }
  .header__cta { width: 230px; height: 56px; font-size: 20px; }
  .feature--fiscal { padding-inline: 40px; }
  .fiscal__visual { flex-basis: 440px; }
}

/* Tablet */
@media (max-width: 1080px) {
  .header__nav, .header__cta { display: none; }
  .header__toggle { display: block; }
  .site-header { padding-top: 32px; }
  .header__logo img { width: 120px; height: auto; }

  .hero { padding-top: 170px; }
  .hero__grid { grid-template-columns: 1fr; row-gap: 56px; }
  .hero__content { min-height: 0; }
  .hero__desc { width: auto; max-width: 621px; }
  .chips { flex-wrap: wrap; }
  .dash-wrap { justify-self: center; }

  .stats { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-around; gap: 32px 40px; padding: 36px 32px; }

  .challenges { flex-direction: column; }
  .challenge { flex-basis: auto; justify-content: flex-start; padding: 12px; }
  .challenge p { width: auto; }

  .fronts__row { flex-direction: column; align-items: center; gap: 24px; }
  .feature--pdv, .feature--analytics { flex: none; width: 100%; max-width: 624px; min-height: 0; padding: 40px 24px; }
  .feature__content { gap: 48px; }
  .feature__content--analytics { padding-inline: 0; }
  .feature--fiscal { padding: 40px 24px; max-width: 624px; margin-inline: auto; }
  .fiscal__content { flex-direction: column; align-items: stretch; gap: 40px; }
  .fiscal__copy { flex: none; }
  .fiscal__visual { flex: none; width: 100%; }
  .feature__title { min-height: 0 !important; }

  .testimonials { min-height: 0; padding: 120px 0; }
  .faq__title { line-height: 1.08; padding-block: .06em; margin-block: 0; }
  .faq__list { margin-top: 72px; }
}

/* Mobile */
@media (max-width: 640px) {
  :root { --panel-h: 100svh; }
  .panel { --lag-px: 60px; }
  .site-header { padding-top: 20px; }
  .header__inner { height: 56px; }
  .header__logo img { width: 104px; }
  .site-header.is-scrolled .header__inner { height: 64px; }

  .hero { padding-top: 136px; }
  .hero__content { gap: 28px; }
  .chips { gap: 10px; }

  .stats-section, .recognition-section, .fronts { margin-top: 56px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 28px 22px; border-radius: 26px; }
  .stat__value { font-size: 32px; }
  .stat__label { width: auto !important; font-size: 14px; }
  .stat__value[style] { width: auto !important; }

  .recognition { border-radius: 28px; }
  .recognition__content { padding: 40px 20px 28px; gap: 26px; }

  .fronts__head { gap: 14px; }
  .feature--pdv, .feature--analytics, .feature--fiscal { padding: 32px 18px 20px; }
  .feature__content { gap: 36px; }
  .btn--sm { width: auto; padding-inline: 18px; }

  .segments { margin-top: 110px; }
  .stack { margin-top: 36px; }
  .panel__content { gap: 24px; top: auto; bottom: 48px; transform: none; }
  .panel__label { width: auto; height: 60px; padding: 10px 28px; }
  .panel__title { margin-bottom: 18px; }
  .btn--lg { width: 100%; max-width: 343px; }
  .panel__grad { --g-amp: .6; }
  .panel__grad::after {
    content: ""; position: absolute; inset: 8.333%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 100%);
  }

  .testimonials { padding: 100px 0 90px; margin-top: 0; }
  .testimonials__head { flex-direction: column; gap: 28px; }
  .carousel { margin-top: 48px; gap: 16px; }
  .testi { flex-basis: min(86vw, 556px); min-height: 0; padding: 32px 24px; border-radius: 28px; }
  .testi blockquote { margin-top: 28px; }

  .faq { padding: 72px 0; }
  .faq__list { margin-top: 56px; border-radius: 26px; }
  .faq__q { padding: 24px 22px 20px; line-height: 24px; }
  .faq__icon { height: 24px; }
  .faq__plus { top: 4px; } .faq__minus { top: 11px; }
  .faq__a p { padding: 12px 22px 22px; line-height: 26px; }

  .footer { margin-top: 24px; }
  .footer__box { min-height: 0; padding: 40px 20px; gap: 56px; }
  .footer__menu { justify-content: center; }
  .footer__row { flex-direction: column-reverse; align-items: center; text-align: center; }
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .panel__inner, .panel__media, .panel__grad { transform: none !important; }
  .panel__grad::before, .page-bg img { animation: none !important; }
  .line__in { translate: none !important; opacity: 1 !important; }
  .js [data-reveal] { clip-path: none !important; }
  .js [data-reveal] img { scale: none !important; }
  .panel__content > * { translate: none !important; }
  .js [data-intro] { opacity: 1 !important; translate: none !important; scale: none !important; }
  .btn::after { display: none; }
  .panel__shade { opacity: 0 !important; }
}

/* =========================================================
   PÁGINAS LEGAIS (Política de Privacidade / Termos de Uso)
   ========================================================= */
.legal-page main > section { position: relative; z-index: 1; }

.legal-hero { padding: 236px 0 72px; }
.legal-hero__eyebrow {
  font-size: 14px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-mid);
}
.legal-hero__title {
  display: inline-block;
  margin-top: 16px;
  font-size: clamp(42px, 5.694vw, 82px); font-weight: 700; line-height: 1.05;
  padding-bottom: .06em;
}
.legal-hero__lead {
  max-width: 760px; margin-top: 20px;
  font-size: clamp(18px, 1.528vw, 22px); line-height: 1.5;
  color: rgba(255,255,255,.78);
}
.legal-hero__lead a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.legal-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  margin-top: 36px;
  font-size: 15px; color: rgba(255,255,255,.55);
}
.legal-switch {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  color: var(--white);
  background: rgba(44,110,255,.16);
  transition: background-color .22s var(--ease-soft), transform .22s var(--btn-ease);
}
.legal-switch::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(225deg, rgba(255,255,255,.08), rgba(140,175,255,.55) 60%, rgba(140,175,255,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.legal-switch span { transition: transform .22s var(--btn-ease); }
.legal-switch:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .legal-switch:hover { background: rgba(44,110,255,.3); transform: translateY(-2px); }
  .legal-switch:hover span { transform: translateX(3px); }
}

.legal { padding-bottom: 96px; }
.legal__grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(40px, 6.25vw, 96px);
  align-items: start;
}

/* Índice lateral */
.legal-toc {
  position: sticky; top: 112px;
  padding: 24px 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.legal-toc__title {
  margin-bottom: 14px;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  position: relative;
  display: flex; gap: 10px;
  padding: 7px 10px; border-radius: 10px;
  font-size: 14.5px; line-height: 1.35;
  color: rgba(255,255,255,.58);
  transition: color .2s var(--ease-soft), background-color .2s var(--ease-soft);
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none; width: 20px;
  font-size: 12px; line-height: 19.5px; font-weight: 700;
  color: rgba(138,186,255,.55);
}
.legal-toc a:hover { color: var(--white); background: rgba(255,255,255,.04); }
.legal-toc a.is-active { color: var(--white); background: rgba(44,110,255,.16); }
.legal-toc a.is-active::before { color: var(--blue-mid); }

/* Conteúdo */
.legal__content { max-width: 780px; min-width: 0; }
.legal__section {
  padding: 44px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  scroll-margin-top: 104px;
}
.legal__section:first-child { padding-top: 0; border-top: 0; }
.legal__section h2 {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 20px;
  font-size: clamp(24px, 2.222vw, 32px); font-weight: 500; line-height: 1.2;
}
.legal__num { flex: none; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--blue); }
.legal__section h3 { margin: 28px 0 10px; font-size: 19px; font-weight: 500; }
.legal__section p,
.legal__section li { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.76); }
.legal__section p + p { margin-top: 14px; }
.legal__section strong { color: var(--white); font-weight: 500; }
.legal__section a { color: var(--blue-mid); text-decoration: underline; text-decoration-color: rgba(138,186,255,.4); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.legal__section a:hover { text-decoration-color: currentColor; }
.legal__section ul { margin: 14px 0; padding: 0; list-style: none; }
.legal__section ul li { position: relative; padding-left: 22px; }
.legal__section ul li + li { margin-top: 6px; }
.legal__section ul li::before {
  content: ""; position: absolute; left: 4px; top: .78em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
}

.legal-note {
  margin: 24px 0 4px;
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(44,110,255,.1);
  box-shadow: inset 3px 0 0 var(--blue);
}
.legal-note p { color: rgba(255,255,255,.85); }

.legal-table {
  margin-top: 20px;
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.02);
}
.legal-table table { width: 100%; min-width: 620px; border-collapse: collapse; }
.legal-table th {
  padding: 16px 18px;
  text-align: left;
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.03);
}
.legal-table td {
  padding: 16px 18px; vertical-align: top;
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.78);
  border-top: 1px solid rgba(255,255,255,.07);
}
.legal-table td:first-child { color: var(--white); }

.legal-card {
  display: grid; gap: 14px;
  margin-top: 20px; padding: 24px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.legal-card p { display: flex; flex-direction: column; gap: 2px; }
.legal-card__label { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }

/* Campos a preencher pela empresa (destacados para não irem ao ar por engano) */
.fill {
  padding: 0 6px; border-radius: 6px;
  background: rgba(255,200,40,.14);
  color: #ffd666;
}

.footer__legal a[aria-current="page"] { color: #fff; }

@media (max-width: 1080px) {
  .legal-hero { padding: 170px 0 56px; }
  .legal__grid { grid-template-columns: 1fr; gap: 40px; }
  .legal-toc { position: static; }
  .legal-toc ol { columns: 2; column-gap: 16px; }
  .legal-toc li { break-inside: avoid; }
  .legal__content { max-width: none; }
}
@media (max-width: 640px) {
  .legal-hero { padding: 132px 0 44px; }
  .legal-toc { padding: 18px 14px; }
  .legal-toc ol { columns: 1; }
  .legal__section { padding: 34px 0; }
  .legal__section h2 { gap: 12px; }
  .legal__section p, .legal__section li { font-size: 16px; }
  .legal { padding-bottom: 56px; }
}

/* =========================================================
   PÁGINA DE CADASTRO
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.signup { padding: 210px 0 120px; }
.signup__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 584px);
  gap: clamp(40px, 6.25vw, 96px);
  align-items: start;
}
.signup__grid > * { min-width: 0; }
.signup__intro { position: sticky; top: 140px; }
.signup__title {
  max-width: 11em;
  margin-top: 16px;
  font-size: clamp(40px, 4.444vw, 64px); font-weight: 500; line-height: 1.05;
}
.signup__lead {
  max-width: 520px; margin-top: 24px;
  font-size: clamp(17px, 1.389vw, 20px); line-height: 1.55;
  color: rgba(255,255,255,.76);
}
.signup__steps { margin: 40px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.signup__steps li { display: flex; align-items: flex-start; gap: 16px; }
.signup__step-num {
  flex: none;
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--blue);
  font-size: 14px; font-weight: 700;
}
.signup__steps li > span:last-child { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; font-size: 15px; color: rgba(255,255,255,.6); }
.signup__steps strong { font-size: 17px; font-weight: 500; color: var(--white); }
.signup__stats {
  display: flex; flex-wrap: wrap; gap: 12px 36px;
  margin: 44px 0 0; padding: 24px 0 0; list-style: none;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 14px; color: rgba(255,255,255,.6);
}
.signup__stats li { display: flex; flex-direction: column; }
.signup__stats strong { font-size: 28px; font-weight: 700; color: var(--white); line-height: 1.2; }

/* Cartão do formulário */
.signup__card {
  position: relative;
  padding: 40px;
  border-radius: 32px;
  background: linear-gradient(160deg, rgba(44,110,255,.12), rgba(255,255,255,.02) 45%, rgba(255,255,255,.03));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  scroll-margin-top: 110px;
}
.signup-form { display: flex; flex-direction: column; gap: 20px; }
.signup-form[hidden] { display: none; }
.signup-form__head h2 { font-size: 26px; font-weight: 500; }
.signup-form__head p { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.55); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row--city { grid-template-columns: 1fr 120px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.82); }
.field label span[aria-hidden], .check span[aria-hidden] { color: var(--blue-mid); }
.field__opt { font-weight: 400; color: rgba(255,255,255,.45); }

.field input, .field select, .field textarea {
  width: 100%;
  height: 54px; padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--white);
  font: inherit; font-size: 16px;
  transition: border-color .2s var(--ease-soft), background-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
  -webkit-appearance: none; appearance: none;
}
.field textarea { height: auto; min-height: 104px; padding: 14px 18px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.35); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255,255,255,.22); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: rgba(44,110,255,.08);
  box-shadow: 0 0 0 4px rgba(44,110,255,.22);
}
.select { position: relative; }
.select::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid rgba(255,255,255,.7); border-bottom: 1.5px solid rgba(255,255,255,.7);
  transform: rotate(45deg); pointer-events: none;
}
.field select { padding-right: 42px; cursor: pointer; }
.field select:invalid { color: rgba(255,255,255,.35); }
.field select option { color: #fff; background: #0b1020; }

.field.is-invalid input, .field.is-invalid select { border-color: #ff6b6b; background: rgba(255,107,107,.06); }
.field.is-invalid input:focus, .field.is-invalid select:focus { box-shadow: 0 0 0 4px rgba(255,107,107,.18); }
.field__error { min-height: 0; font-size: 13px; color: #ff8f8f; }
.field__error:empty { display: none; }

/* Checkboxes */
.checks { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.check { position: relative; display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.check__box {
  flex: none; position: relative;
  width: 20px; height: 20px; margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.04);
  transition: background-color .2s var(--ease-soft), border-color .2s var(--ease-soft), transform .2s var(--btn-ease);
}
.check__box::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform .2s var(--btn-ease);
}
.check input:checked + .check__box { background: var(--blue); border-color: var(--blue); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 4px rgba(44,110,255,.3); }
.check:active .check__box { transform: scale(.92); }
.check.is-invalid .check__box { border-color: #ff6b6b; }
.check a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }

/* Botão de envio */
.signup-form__submit {
  width: 100%; height: 60px; margin-top: 6px;
  gap: 12px; font-size: 19px;
}
.signup-form__submit .fa-whatsapp { font-size: 22px; }
.signup-form__arrow { font-size: 15px; transition: transform .22s var(--btn-ease); }
@media (hover: hover) and (pointer: fine) {
  .signup-form__submit:hover .signup-form__arrow { transform: translateX(4px); }
}
.signup-form__submit[aria-busy="true"] { pointer-events: none; opacity: .8; }
.signup-form__note { margin-top: -6px; text-align: center; font-size: 13px; color: rgba(255,255,255,.5); }

/* Estado de sucesso */
.signup-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 8px; outline: none; }
.signup-done[hidden] { display: none; }
.signup-done__icon {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(44,110,255,.18); color: var(--blue-mid); font-size: 28px;
  box-shadow: inset 0 0 0 1px rgba(138,186,255,.4);
  animation: doneIn .7s var(--ease-reveal) both;
}
.signup-done h2 { margin-top: 24px; font-size: 30px; font-weight: 500; animation: doneUp .7s var(--ease-reveal) .08s both; }
.signup-done p { max-width: 380px; margin-top: 10px; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.7); animation: doneUp .7s var(--ease-reveal) .16s both; }
.signup-done__btn { margin-top: 28px; min-height: 56px; max-width: 100%; padding: 14px 28px; gap: 10px; font-size: 17px; white-space: normal; text-align: center; animation: doneUp .7s var(--ease-reveal) .24s both; }
.signup-done__back { margin-top: 16px; font-size: 14px; color: rgba(255,255,255,.6); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.signup-done__back:hover { color: #fff; }
@keyframes doneIn { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes doneUp { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: none; } }

@media (max-width: 1080px) {
  .signup { padding: 160px 0 80px; }
  .signup__grid { grid-template-columns: minmax(0, 1fr); }
  .signup__intro { position: static; }
  .signup__steps, .signup__stats { margin-top: 32px; }
  .signup__card { max-width: 640px; }
}
@media (max-width: 640px) {
  .signup { padding: 128px 0 56px; }
  .signup__card { padding: 26px 20px; border-radius: 26px; }
  .field-row { grid-template-columns: 1fr; gap: 20px; }
  .field-row--city { grid-template-columns: 1fr 104px; gap: 12px; }
  .signup__stats strong { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .signup-done__icon, .signup-done h2, .signup-done p, .signup-done__btn { animation: none; }
}