@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-var-latin.woff2') format('woff2');
}

:root{
  --ink: #0d0e13;
  --cream: #f3ede3;
  --cream-soft: #fbf8f3;
  --paper: #e5e2dd;
  --paper-2: #dcd8d3;
  --muted-on-dark: #6f6f73;
  --muted-on-light: #67625e;
  --teal: #0d9488;
  --teal-dark: #0b7e73;

  --padding-lado-tela: 4.60vw;
  --grid-espaco-tela: 2.9vw;
  --side-pad: 4.60rem;
  --gap: 2.9rem;
  --radius: 0.87rem;
  --ease: cubic-bezier(.22,.61,.14,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

*{ box-sizing: border-box; }
html{
  font-size: 1vw;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--teal) transparent;
}
@media (max-width: 479px){
  html{ font-size: 1.6vw; }
}

/* custom scrollbar: just the thumb, in the same teal as the CTA button —
   no track/background box around it */
::-webkit-scrollbar{ width: .6rem; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background-color: var(--teal);
  border-radius: 999px;
  border: .15rem solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{ background-color: var(--teal-dark); background-clip: padding-box; }

body{
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1,h2,h3,h4,h5,h6,p{ margin: 0; }

.theme-dark{ background: var(--ink); color: var(--cream); }
.theme-light{ background: var(--paper); color: var(--ink); }

/* ---------- page-load splash ----------
   Injected by js/loader.js before <body> even parses, and only on the
   first page of the session (sessionStorage). The real logo mark sits
   dimmed and perfectly still in the center; a ring drawn just outside it
   spins around it; a teal, mask-clipped copy of that same logo fills up
   from the bottom as the page finishes loading. Once ready, the whole
   thing lifts away and the hero plays its own entrance underneath. */
html.is-loading, html.is-loading-out{ overflow: hidden; }
html.is-loading #cursor{ opacity: 0 !important; }

#pageLoader{
  position: fixed; inset: 0; z-index: 100000;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s var(--ease), transform .65s var(--ease);
}
html.is-loading-out #pageLoader{
  opacity: 0;
  transform: translateY(-4%);
  pointer-events: none;
}
.page-loader-mark{
  position: relative;
  width: 8rem; height: 8rem; /* well over 3x the size this used to be */
}
.page-loader-ring{
  position: absolute; inset: -18%;
  border-radius: 50%;
  border: .22rem solid rgba(243,237,227,.15);
  border-top-color: var(--teal);
  border-right-color: var(--teal);
  animation: loaderSpin 1.1s linear infinite;
}
.page-loader-logo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: .38; /* the still base — the ring does the moving, not the mark */
}
.page-loader-fill{
  position: absolute; inset: 0;
  background: var(--teal);
  -webkit-mask-image: url('../assets/img/favicon.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('../assets/img/favicon.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  clip-path: inset(100% 0 0 0);
  animation: loaderFill .9s var(--ease) forwards;
}
@keyframes loaderSpin{ to{ transform: rotate(360deg); } }
@keyframes loaderFill{ to{ clip-path: inset(0% 0 0 0); } }
@media (prefers-reduced-motion: reduce){
  #pageLoader{ display: none; }
}

/* reveal-on-scroll: JS toggles .is-visible, CSS owns the motion */
[data-reveal], [data-reveal-lines]{
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
/* hero/section photos get a bouncier "pop into place" instead of a flat fade */
[data-reveal-img]{
  opacity: 0;
  transform: scale(.86) translateY(2rem);
  transition: opacity .9s var(--ease-bounce), transform 1s var(--ease-bounce);
}
.is-visible[data-reveal], .is-visible[data-reveal-lines]{ opacity: 1; transform: none; }
.is-visible[data-reveal-img]{ opacity: 1; transform: none; }

/* once JS has split an element's text into words, the element itself just
   sits there at full opacity — the words underneath carry the motion */
.text-split{ opacity: 1 !important; transform: none !important; }
.word-mask{ display: inline-block; overflow: hidden; vertical-align: top; }
.word-inner{
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform .6s var(--ease), opacity .5s ease;
}
.is-visible .word-inner{ transform: translateY(0); opacity: 1; }

/* icons/photos inside a reveal block pop in on their own, slightly staggered
   from the heading next to them, so content visibly "renders in" piece by
   piece instead of the block just fading as one flat slab */
.media-reveal{
  opacity: 0;
  transform: scale(.92) translateY(.6rem);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.is-visible .media-reveal{ opacity: 1; transform: none; }

/* footer: rises up from behind the page instead of a plain fade */
[data-reveal-rise]{
  opacity: 0;
  transform: scale(.96) translateY(4rem);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.is-visible[data-reveal-rise]{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-lines], [data-reveal-img], [data-reveal-rise]{ transition: none; opacity: 1; transform: none; }
  .word-inner, .media-reveal{ transition: none; transform: none; opacity: 1; }
}

/* ---------- custom cursor ---------- */
.cursor{
  position: fixed;
  top: 0; left: 0;
  width: 2.5rem; height: 2.5rem;
  margin-left: -1.25rem; margin-top: -1.25rem;
  border-radius: 50%;
  background: rgba(13,14,19,.28);
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-100px,-100px,0) scale(1);
  transition: opacity .3s, background-color .3s;
  will-change: transform;
  opacity: 0;
}
.cursor.is-active{ opacity: 1; }
.cursor.is-hover{ background: rgba(13,14,19,.5); }
.cursor.is-down{ background: var(--teal); }
.theme-dark ~ .cursor,
body:has(.hero:hover) .cursor{ }
@media (hover: none), (pointer: coarse){
  .cursor{ display: none; }
}

/* ---------- header ---------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 1.3rem 0;
  color: var(--cream);
  transition: transform .5s var(--ease), background-color .4s, color .4s, padding .4s;
}
.site-header.is-scrolled{ padding: 0.9rem 0; }
.site-header.is-hidden{ transform: translateY(-110%); }
.site-header.on-light{ color: var(--ink); }
.site-header.on-light .brand-logo--bright{ opacity: 0; }
.site-header.on-light .brand-logo--dark{ opacity: 1; }
.header-inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--side-pad);
}
.brand{ position: relative; display: block; width: 13.8rem; height: 3.4rem; justify-self: start; }
.brand-logo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: left center;
  transition: opacity .3s;
}
.brand-logo--dark{ opacity: 0; }

.nav{ display: flex; align-items: center; justify-content: center; gap: 2.3rem; justify-self: center; }
.nav > a{
  font-size: 1rem;
  font-weight: 450;
  letter-spacing: -0.02em;
  position: relative;
  padding: .2rem 0;
}
.nav > a::after{
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -0.15rem;
  height: 1px; background: currentColor;
  transition: right .35s var(--ease);
}
.nav > a:hover::after{ right: 0; }
.nav > a[aria-current="page"]::after{ right: 0; }

.header-actions{ display: flex; align-items: center; gap: 1.2rem; justify-self: end; }

.btn{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 600; letter-spacing: -0.02em;
  padding: .8rem 1.5rem;
  border: 1px solid var(--teal);
  color: var(--cream-soft);
  background: var(--teal);
  transition: background-color .3s, border-color .3s, transform .3s;
}
.btn:hover{ background: var(--teal-dark); border-color: var(--teal-dark); transform: translateY(-2px); }
.btn-dot{ width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }

.burger{
  display: none;
  flex-direction: column; justify-content: center; gap: .4rem;
  width: 2.5rem; height: 2.5rem;
}
.burger span{ display: block; width: 100%; height: 1px; background: currentColor; transition: transform .35s var(--ease), opacity .2s; }
.burger.is-active span:first-child{ transform: translateY(.22rem) rotate(45deg); }
.burger.is-active span:last-child{ transform: translateY(-.22rem) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{ padding: 9.5rem 0 5.5rem; }
.hero-inner{
  padding: 0 var(--side-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-title{
  font-size: 7.9rem;
  font-weight: 500;
  line-height: .9;
  letter-spacing: -0.07em;
  max-width: 62rem;
}
.hero-media{
  width: min(100%, 59rem);
  margin-top: 2.5rem;
}
.hero-img{ width: 100%; border-radius: 1.2rem; object-fit: cover; max-height: 30rem; }
.hero-sub{ margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.hero-lead{
  font-size: 1.36rem; line-height: 1.4; font-weight: 500;
  letter-spacing: -0.03em; color: var(--muted-on-dark);
  max-width: 27rem;
}

/* ---------- about ---------- */
.about{ padding: 10rem 0 7rem; }
.about-grid{
  padding: 0 var(--side-pad);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--gap);
  align-items: center;
}
.about-media img{ width: 100%; max-width: 21rem; margin: 0 auto; }
.about-copy h4{
  font-size: 1.78rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.05em;
  max-width: 34rem;
}
.text-link{
  display: inline-block; margin-top: 1.8rem;
  font-size: 1.08rem; font-weight: 450; letter-spacing: -0.02em;
  border-bottom: 1px solid currentColor;
  transition: opacity .3s;
}
.text-link:hover{ opacity: .6; }

/* ---------- marquee ---------- */
.marquee-section{ padding: 2rem 0; overflow: hidden; }
.marquee{ overflow: hidden; white-space: nowrap; }
.marquee-track{ display: inline-flex; will-change: transform; }
.marquee-item{
  display: inline-block;
  font-size: 10.3rem; font-weight: 500; line-height: 1;
  letter-spacing: -0.07em;
  padding-right: 3.5rem;
}
.marquee--footer{ padding: 3rem 0 5rem; }
.marquee--footer .marquee-item{ color: var(--cream); }

/* ---------- shared side-grid: label sits ABOVE its content, always ---------- */
.side-grid{
  padding: 6rem var(--side-pad);
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
.side-grid--wide{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.side-grid--wide .eyebrow{ grid-column: 1 / -1; }
.eyebrow span{
  font-size: 1rem; font-weight: 450; letter-spacing: -0.02em;
  text-transform: capitalize;
  position: relative;
  padding-left: 1.1rem;
}
.eyebrow span::before{
  content: ''; position: absolute; left: 0; top: 50%;
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--teal); transform: translateY(-50%);
}

/* ---------- how it works grid ---------- */
.how-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.how-card{ position: relative; }
.card-hit{ position: absolute; inset: 0; z-index: 2; }
.how-card-img{
  border-radius: var(--radius);
  background: var(--paper-2);
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform .5s var(--ease);
}
.how-card:hover .how-card-img{ transform: translateY(-.4rem); }
.how-card-img img{ width: 62%; transition: transform .5s var(--ease); }
.how-card:hover .how-card-img img{ transform: scale(1.06); }
.how-card-title{
  margin-top: 1.3rem;
  font-size: 1.51rem; font-weight: 600; letter-spacing: -0.03em;
}
.tag-row{ display: flex; gap: .3rem; margin-top: .8rem; flex-wrap: wrap; }
.tag{
  font-size: .62rem; font-weight: 600; text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: .3rem .6rem;
}
.section-cta{ margin-top: 1rem; }
.text-link-lg{
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: 1.78rem; font-weight: 600; letter-spacing: -0.05em;
}
.text-link-lg img{ width: 1.2rem; transition: transform .35s var(--ease); }
.text-link-lg:hover img{ transform: translateX(.4rem); }

/* ---------- benefits ---------- */
.benefits{ padding-bottom: 6rem; }
.benefits .eyebrow{ padding: 0 var(--side-pad); margin-bottom: 2.5rem; }
.benefits-grid{
  padding: 0 var(--side-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.benefit-card{
  position: relative;
  border-radius: .87rem;
  overflow: hidden;
  aspect-ratio: 1.13/1;
  background: var(--ink);
  padding: 1.8rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.benefit-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .16;
  transition: opacity .5s, transform .6s var(--ease);
}
.benefit-card:hover .benefit-bg{ opacity: .28; transform: scale(1.06); }
.benefit-top{ position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.benefit-top h4{ font-size: 1.78rem; font-weight: 600; letter-spacing: -0.05em; color: var(--cream); }
.arrow-icon{
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid rgba(243,237,227,.35);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .4s var(--ease), background-color .3s;
}
.arrow-icon img{ width: .9rem; }
.benefit-card:hover .arrow-icon{ transform: rotate(45deg); background: var(--teal); border-color: var(--teal); }
.benefit-copy{ position: relative; font-size: 1rem; line-height: 1.5; color: var(--muted-on-dark); max-width: 22rem; }

/* ---------- learn more ---------- */
.learn-media{ position: relative; height: 24rem; }
.learn-img{
  position: absolute;
  width: 60%;
  border-radius: var(--radius);
  box-shadow: 0 1.5rem 3rem rgba(13,14,19,.15);
  transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}
.learn-img--1{ top: 0; left: 0; z-index: 1; }
.learn-img--2{ top: 10%; left: 18%; z-index: 2; }
.learn-img--3{ top: 22%; left: 34%; z-index: 3; }
/* images tied to a "Saiba mais" tab dim out until their tab is the active one */
.learn-img[data-tab-index]{ opacity: .5; filter: grayscale(.4); }
.learn-img[data-tab-index].is-active{ opacity: 1; filter: none; transform: scale(1.04); z-index: 4; }

.learn-links{ display: flex; flex-direction: column; }
.underline-link{
  display: flex; align-items: center; justify-content: space-between;
  padding: 2rem 0;
  position: relative;
}
.underline-link h3{ font-size: 1.78rem; font-weight: 600; letter-spacing: -0.05em; color: rgba(13,14,19,.38); transition: color .4s; }
.underline-link.is-active h3{ color: var(--ink); }
.underline-link .arrow-icon{ border-color: var(--ink); }
.underline-link:hover .arrow-icon, .underline-link.is-active .arrow-icon{ transform: rotate(45deg); background: var(--teal); border-color: var(--teal); }
.underline-link .arrow-icon img{ filter: none; }
.underline-link:hover .arrow-icon img, .underline-link.is-active .arrow-icon img{ filter: invert(1) brightness(2); }

/* the "loading" progress track — doubles as the link's bottom rule */
.underline-progress{
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(13,14,19,.14);
  overflow: hidden;
}
.underline-link:first-child::before{
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(13,14,19,.14);
}
.underline-progress-fill{
  display: block; height: 100%; width: 0%;
  background: var(--ink);
}
.underline-link.is-active .underline-progress-fill{
  animation: underlineFill 4.2s linear forwards;
}
@keyframes underlineFill{ from{ width: 0%; } to{ width: 100%; } }
@media (prefers-reduced-motion: reduce){
  .underline-link.is-active .underline-progress-fill{ animation: none; width: 100%; }
}

/* ---------- final cta ---------- */
.cta-final{ padding: 6rem var(--side-pad) 8rem; }
.cta-final-inner{ text-align: center; max-width: 40rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.cta-final-inner h3{ font-size: 2.6rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1.2; }

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: var(--cream); padding-top: 1rem; }
.footer-grid{
  padding: 0 var(--side-pad) 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: var(--gap);
  position: relative;
}
.footer-col--brand{ grid-column: 1; }
.footer-mark{ width: 5.2rem; opacity: .8; }
.footer-heading{ font-size: 1rem; font-weight: 450; margin-bottom: 1rem; }
.footer-col ul{ display: flex; flex-direction: column; gap: .6rem; }
.footer-col a{ font-size: 1rem; color: var(--muted-on-dark); transition: color .3s; }
.footer-col a:hover{ color: var(--cream); }
.muted{ color: var(--muted-on-dark); }
.footer-copyright{ grid-column: 1 / -1; margin-top: 2rem; font-size: 1rem; color: var(--muted-on-dark); }
.scroll-top{
  grid-column: 5;
  justify-self: end;
  align-self: start;
  width: 2.6rem; height: 4.3rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease);
}
.scroll-top:hover{ transform: translateY(-.4rem); }

/* ==========================================================================
   Inner pages — about / technology / efficiency / contact
   ========================================================================== */

/* shared "big statement" page hero (about, technology-less-so, contact) */
.page-hero{ padding: 11rem 0 9rem; position: relative; overflow: hidden; }
.glow-hero::before{
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 25% 15%, rgba(13,148,136,.38), transparent 65%),
    radial-gradient(50% 40% at 85% 85%, rgba(13,148,136,.22), transparent 60%);
  pointer-events: none;
}
.page-hero-inner{
  position: relative; padding: 0 var(--side-pad); max-width: 78rem;
  display: flex; flex-direction: column; gap: 3.2rem;
}
.page-hero-inner h1{ font-size: 4.6rem; font-weight: 500; line-height: 1; letter-spacing: -0.06em; max-width: 44rem; }
.lead-strong{ font-size: 1.95rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.04em; max-width: 34rem; }
/* each block sits in its own row (top/middle/bottom) but leans left or
   right within that row — a staggered, zig-zag composition, not columns */
.lead-strong--left{ align-self: flex-start; text-align: left; }
.lead-strong--right{ align-self: flex-end; text-align: left; }

/* stats row (about) */
.stats-grid{ padding: 5rem var(--side-pad) 6rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.stats-grid .eyebrow{ grid-column: 1 / -1; margin-bottom: 1rem; }
.stat-item{ }
.stat-number{ font-size: 8.2rem; font-weight: 500; line-height: 1; letter-spacing: -0.06em; }
.stat-label{ margin-top: 1rem; font-size: 1.36rem; font-weight: 500; letter-spacing: -0.03em; color: var(--muted-on-light); max-width: 16rem; }

/* alternating feature rows (about / technology / efficiency / contact) */
.feature-rows{ padding: 4rem var(--side-pad); display: flex; flex-direction: column; gap: 5rem; }
.feature-row{ display: flex; align-items: center; gap: 4rem; }
.feature-row.is-reverse{ flex-direction: row-reverse; }
.feature-row-media{ flex: 0 0 38%; }
.feature-row-media img{ width: 100%; border-radius: var(--radius); }
.feature-row-body{ flex: 1; max-width: 34rem; }
.feature-row-index{ font-size: 1rem; color: var(--teal); font-weight: 600; margin-bottom: 1rem; }
.feature-row-body h2{ font-size: 2.6rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1.15; }
.feature-row-body p{ margin-top: 1.2rem; font-size: 1.08rem; line-height: 1.55; opacity: .78; max-width: 28rem; }
.feature-row-body p + p{ margin-top: .8rem; }
.feature-row-body .text-link{ margin-top: 1.4rem; }

/* values list (about) */
.values-list{ padding: 1rem var(--side-pad) 2rem; display: flex; flex-direction: column; }
.value-row{
  display: grid; grid-template-columns: 4rem 1fr 1.4fr;
  gap: var(--gap); align-items: baseline;
  padding: 2.2rem 0; border-top: 1px solid currentColor; border-color: rgba(13,14,19,.12);
}
.values-list .value-row:last-child{ border-bottom: 1px solid rgba(13,14,19,.12); }
.value-letter{ font-size: 1rem; font-weight: 600; color: var(--teal); }
.value-row h3{ font-size: 2.8rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1.1; }
.value-row p{ font-size: 1.08rem; line-height: 1.55; color: var(--muted-on-light); }

/* reusable indicator + copy block (About's "Nosso Time", generic content sections) */
.content-block{ padding: 6rem var(--side-pad); display: grid; grid-template-columns: 12rem 1fr; gap: var(--gap); }
.content-block .content-copy h3{ font-size: 2.6rem; font-weight: 600; letter-spacing: -0.05em; max-width: 32rem; }
.content-block .content-copy p{ margin-top: 1.2rem; font-size: 1.08rem; line-height: 1.55; color: var(--muted-on-light); max-width: 30rem; }

/* dark cta band (technology) */
.cta-final.theme-dark .cta-final-inner h3{ color: var(--cream); }

/* giant section-name ribbon, sitting in normal flow ABOVE the hero visual —
   never overlapping it (efficiency / technology) */
.marquee-header{ position: relative; overflow: hidden; padding: 1.2rem 0; opacity: .4; }
.marquee-header .marquee-item{ color: currentColor; }
.hero-image-wrap{ display: flex; justify-content: center; padding: 0 var(--side-pad); margin: 1rem 0 2rem; }
.hero-image-wrap img{ width: min(56rem, 70%); }

/* ---------------- technology page: interactive diagram ---------------- */
.tech-hero{ padding: 6rem 0 5rem; }
.tech-diagram{
  position: relative;
  width: min(30rem, 74vw); aspect-ratio: 1/1;
  margin: 1rem auto 3rem;
  border-radius: 1.4rem;
  background: linear-gradient(155deg, #0f9c8f 0%, #0b6e64 100%);
  overflow: hidden;
}
.tech-diagram::before, .tech-diagram::after{
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.10);
}
.tech-diagram::before{ width: 55%; height: 55%; top: -18%; right: -14%; }
.tech-diagram::after{ width: 40%; height: 40%; bottom: -14%; left: -10%; background: rgba(255,255,255,.07); }
.tech-diagram-svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.tech-diagram-svg line{ stroke: rgba(243,237,227,.7); stroke-width: 1.5; }
.hot-dot{
  position: absolute;
  width: 1.1rem; height: 1.1rem; margin: -0.55rem;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 0 rgba(243,237,227,.5);
  animation: hotDotPulse 2.4s ease-out infinite;
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: background-color .25s, transform .25s;
}
.hot-dot:hover, .hot-dot:focus-visible{ background: var(--ink); transform: scale(1.15); }
@keyframes hotDotPulse{
  0%{ box-shadow: 0 0 0 0 rgba(243,237,227,.5); }
  70%{ box-shadow: 0 0 0 .9rem rgba(243,237,227,0); }
  100%{ box-shadow: 0 0 0 0 rgba(243,237,227,0); }
}
.tech-center{ text-align: center; padding: 0 var(--side-pad); }
.tech-center h1{ font-size: 4.2rem; font-weight: 500; line-height: 1; letter-spacing: -0.06em; max-width: 46rem; margin: 0 auto; }
.tech-center p{ margin: 1.6rem auto 0; max-width: 34rem; font-size: 1.08rem; line-height: 1.55; color: var(--muted-on-dark); }

.tech-overlay{
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,14,19,.86);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.tech-overlay.is-open{ opacity: 1; visibility: visible; pointer-events: auto; }
.tech-overlay-content{
  position: relative;
  width: min(34rem, 88vw);
  background: var(--ink);
  border: 1px solid rgba(243,237,227,.14);
  border-radius: var(--radius);
  padding: 3rem;
  text-align: center;
  color: var(--cream);
  transform: translateY(1rem); transition: transform .35s var(--ease);
}
.tech-overlay.is-open .tech-overlay-content{ transform: translateY(0); }
.tech-overlay-number{ font-size: 1rem; color: var(--teal); font-weight: 600; }
.tech-overlay-title{ margin-top: .6rem; font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; }
.tech-overlay-description{ margin-top: .8rem; font-size: 1rem; line-height: 1.55; color: var(--muted-on-dark); }
.tech-overlay-close{
  position: absolute; top: 1rem; right: 1rem;
  width: 2.4rem; height: 2.4rem; font-size: 1.4rem; line-height: 1;
  color: var(--cream); display: flex; align-items: center; justify-content: center;
}
.tech-overlay-arrows{ position: absolute; bottom: -3.4rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; }
.tech-overlay-arrows button{
  width: 3rem; height: 2.4rem; border: 1px solid rgba(243,237,227,.35);
  display: flex; align-items: center; justify-content: center;
}
.tech-overlay-arrows button img{ width: .9rem; filter: invert(1); }

/* ---------------- contact page ---------------- */
.contact-hero{ padding: 9rem 0 6rem; position: relative; overflow: hidden; }
.contact-grid{ position: relative; padding: 0 var(--side-pad); display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.contact-grid h1{ font-size: 3.6rem; font-weight: 500; line-height: 1.05; letter-spacing: -0.05em; max-width: 24rem; }
.contact-info-grid{ margin-top: 2.6rem; display: grid; gap: 1.6rem; }
.contact-info-item h5{ font-size: 1rem; font-weight: 450; color: var(--muted-on-dark); }
.contact-info-item p, .contact-info-item a{ margin-top: .4rem; font-size: 1.2rem; font-weight: 500; }
.contact-info-item a{ border-bottom: 1px solid currentColor; }

.contact-form{ display: flex; flex-direction: column; gap: 1rem; }
.contact-form .row-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form input, .contact-form textarea{
  width: 100%;
  background: transparent;
  border: 1px solid rgba(243,237,227,.25);
  color: var(--cream);
  padding: 1rem 1.1rem;
  font: inherit;
  font-size: 1rem;
  border-radius: .5rem;
  transition: border-color .3s;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color: var(--muted-on-dark); }
.contact-form input:focus, .contact-form textarea:focus{ outline: none; border-color: var(--teal); }
.contact-form textarea{ min-height: 7rem; resize: vertical; }
.contact-form .btn{ align-self: flex-start; margin-top: .4rem; }
.form-note{ font-size: .9rem; color: var(--muted-on-dark); margin-top: .6rem; }
.form-success{ display: none; font-size: 1.08rem; color: var(--cream); }
.contact-form.is-sent .row-2, .contact-form.is-sent textarea, .contact-form.is-sent input:not(.hp), .contact-form.is-sent .btn, .contact-form.is-sent .form-note, .contact-form.is-sent .cf-turnstile{ display: none; }
.contact-form.is-sent .form-success{ display: block; }

/* Honeypot — invisível pra humano, sem display:none (bots simples ignoram
   isso). Fora da ordem de tab também. */
.contact-form .hp{
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
}

.contact-form .form-error{
  display: none; font-size: .9rem; color: #f87171; margin-top: .2rem;
}
.contact-form.has-error .form-error{ display: block; }

.contact-form .btn[disabled]{ opacity: .6; cursor: default; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width: 991px){
  :root{ --side-pad: 2.4rem; --gap: 1.6rem; }
  .hero{ padding-top: 8rem; }
  .hero-title{ font-size: 6rem; }
  .about-grid{ grid-template-columns: 1fr; text-align: center; }
  .about-media{ order: -1; }
  .about-copy h4{ margin: 0 auto; }
  .side-grid, .side-grid--wide{ padding-left: 2.4rem; padding-right: 2.4rem; }
  .how-grid{ grid-template-columns: repeat(2, 1fr); }
  .benefits-grid{ grid-template-columns: repeat(2, 1fr); }
  .side-grid--wide{ display: flex; flex-direction: column; }
  .learn-media{ order: 2; margin-top: 1rem; height: 20rem; }
  .footer-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-col--brand{ grid-column: 1 / -1; }
  .scroll-top{ grid-column: 3; }

  .page-hero-inner h1, .tech-center h1{ font-size: 3.4rem; }
  .page-hero-inner{ gap: 1.8rem; }
  .lead-strong{ font-size: 1.6rem; max-width: 100%; }
  .stats-grid{ grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .stat-number{ font-size: 5.6rem; }
  .feature-row, .feature-row.is-reverse{ flex-direction: column; text-align: center; gap: 2rem; }
  .feature-row-media{ flex: none; width: 100%; max-width: 24rem; }
  .feature-row-body{ max-width: 100%; }
  .feature-row-body p{ margin-left: auto; margin-right: auto; }
  .value-row{ grid-template-columns: 3rem 1fr; }
  .value-row p{ grid-column: 1 / -1; }
  .content-block{ grid-template-columns: 1fr; }
  .tech-overlay-content{ grid-template-columns: 1fr; text-align: center; padding: 2rem; }
  .contact-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-grid h1{ max-width: 100%; }
}

@media (max-width: 767px){
  html{ font-size: 2.1vw; }
  .header-inner{ padding: 0 1.6rem; }
  .nav{
    position: fixed; inset: 0; top: 0;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 2rem;
    background: var(--ink); color: var(--cream);
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
  }
  .site-header.menu-open .nav{ transform: translateY(0); }
  .nav > a{ font-size: 1.6rem; }
  .header-actions{ gap: .7rem; }
  .header-actions .btn{ padding: .65rem 1rem; font-size: .8rem; }
  .burger{ display: flex; }
  .hero-title{ font-size: 15rem; letter-spacing: -0.06em; }
  .hero{ padding-top: 7.5rem; }
  .marquee-item{ font-size: 13rem; }
  .how-grid{ grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .benefits-grid{ grid-template-columns: 1fr; }
  .cta-final-inner h3{ font-size: 3.6rem; }
  .footer-grid{ grid-template-columns: repeat(2, 1fr); }
  .scroll-top{ grid-column: 2; }

  .page-hero-inner h1, .tech-center h1{ font-size: 3rem; }
  .lead-strong{ font-size: 1.5rem; }
  .stats-grid{ grid-template-columns: 1fr; text-align: center; }
  .stat-label{ margin-left: auto; margin-right: auto; }
  .value-row{ grid-template-columns: 1fr; text-align: center; }
  .value-row h3{ font-size: 2.2rem; }
  .contact-form .row-2{ grid-template-columns: 1fr; }
  .tech-diagram{ width: min(20rem, 88vw); }
}

@media (max-width: 479px){
  .how-grid{ grid-template-columns: 1fr; }
  .hero-title{ font-size: 14rem; }
  .page-hero-inner h1, .tech-center h1{ font-size: 2.4rem; }
  .stat-number{ font-size: 4.2rem; }
}