/* W74 — Identidade visual | tokens e tipografia | 2026 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  --color-primary: #24B987;
  --color-secondary: #174653;
  --color-background: #08151E;
  --color-accent: #8CE8C6;
  --color-text: #EDF7F5;
  --color-text-muted: #B4C9CC;
  --color-surface: rgba(20, 46, 55, .38);
  --color-border: rgba(140, 232, 198, .24);
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}
html, body {background-color:var(--color-background);color:var(--color-text);}
body, button, input, select, textarea {font-family:var(--font-body);}
h1,h2,h3,h4,h5,h6,.menu-title {font-family:var(--font-heading);letter-spacing:-.025em;}
h1,h2 {line-height:1.14;}
h3,h4 {line-height:1.3;}
p,li {line-height:1.65;}
.panel:not(.hero) {background-color:var(--color-surface);}
.panel h2,.panel h3,.panel .solution-subtitle,.panel .solution-list-heading {color:var(--color-accent);}
.menu a,.site-footer {color:var(--color-text);}
.menu a:hover,.menu a:focus-visible {color:var(--color-accent);}
:focus-visible {outline-color:var(--color-accent);}
::selection {background:var(--color-primary);color:var(--color-background);}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto;}}

/* Hierarquia tipográfica W74: títulos editoriais, seções e mensagem institucional */
.hero .hero-headline {
  font-family:var(--font-heading);
  font-size:clamp(3rem,5.7vw,5.2rem);
  line-height:1.03;
  letter-spacing:-.065em;
  font-weight:700;
  max-width:1000px;
  margin-inline:auto;
  text-wrap:balance;
}
.hero .hero-accent {
  color:var(--color-accent);
  text-shadow:0 0 30px rgba(65,209,160,.16);
}
#sobre .section-eyebrow,
#solucoes .section-eyebrow,
#como-funciona .section-eyebrow {
  font-family:var(--font-body);
  font-size:clamp(.8rem,1.1vw,1rem);
  line-height:1.4;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin:0;
}
#sobre .section-headline,
#solucoes .section-headline,
#como-funciona .section-headline {
  font-family:var(--font-heading);
  font-size:clamp(2.2rem,5.3vw,4.7rem);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.045em;
  color:var(--color-text);
  max-width:960px;
  margin:0 0 clamp(12px,2vw,22px);
  text-wrap:balance;
}
#sobre .positioning-statement {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  width:min(100%,780px);
  padding:clamp(16px,2.5vw,26px) clamp(18px,3vw,30px);
  margin:0 0 clamp(20px,3vw,32px);
  border-left:3px solid var(--color-primary);
  background:linear-gradient(90deg,rgba(36,185,135,.09),transparent 85%);
  border-radius:0 12px 12px 0;
  text-align:left;
}
#sobre .positioning-label {
  font-family:var(--font-body);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin:0;
}
#sobre .positioning-copy {
  font-family:var(--font-body);
  font-size:clamp(1rem,1.55vw,1.18rem);
  line-height:1.75;
  font-weight:400;
  color:var(--color-text);
  margin:0;
  text-align:left;
}
@media(max-width:767px) {
  .hero .hero-headline {font-size:clamp(2.65rem,10.5vw,4.3rem);letter-spacing:-.05em;}
  #sobre .section-headline,
  #solucoes .section-headline,
  #como-funciona .section-headline {font-size:clamp(2.05rem,8.2vw,3.25rem);}
  #sobre .positioning-statement {padding:16px 18px;}
}

/* CTA White Label abaixo do acordeão, dentro da seção Soluções. */
#solucoes .solutions-bottom-actions {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-top:clamp(20px,3vw,36px);
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
}
#solucoes .solutions-bottom-actions .solution-contact-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media(max-width:767px) {
  #solucoes .solutions-bottom-actions {justify-content:center;}
}

/* Fluxo: número e descrição em colunas visivelmente separadas. */
#como-funciona .how-flow-list > li {
  display:grid;
  grid-template-columns:clamp(48px,6vw,76px) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(16px,2.8vw,32px);
}
#como-funciona .how-flow-number {
  display:block;
  font-family:var(--font-heading);
  font-size:clamp(1.45rem,2.5vw,2.2rem);
  line-height:1;
  font-weight:700;
  letter-spacing:-.045em;
  color:var(--color-accent);
  text-align:center;
  font-variant-numeric:tabular-nums;
}
#como-funciona .how-flow-text {
  display:block;
  min-width:0;
  font-family:var(--font-body);
  line-height:1.5;
  text-align:left;
}
@media(max-width:767px) {
  #como-funciona .how-flow-list > li {
    grid-template-columns:42px minmax(0,1fr);
    column-gap:14px;
  }
  #como-funciona .how-flow-number {font-size:1.4rem;}
}