/* ========== 
   ROOT & BASE
   ========== */

:root {
  color-scheme: light dark;
  --et-font-base: 'Manrope', 'Open Sans', Arial, sans-serif;
  --et-font-display: 'Space Grotesk', 'Poppins', sans-serif;
  --et-nav-offset: 5.5rem;

  /* Sombras e estados de botão */
  --et-button-shadow: 0 18px 40px rgba(32, 99, 255, 0.35);
  --et-button-shadow-hover: 0 22px 50px rgba(32, 99, 255, 0.45);

  --et-accent-shadow: 0 15px 30px rgba(31, 107, 255, 0.6);
  --et-accent-shadow-hover: 0 20px 40px rgba(31, 107, 255, 0.75);
  --et-accent-shadow-active: 0 10px 20px rgba(31, 107, 255, 0.55);

  --et-focus-outline: rgba(79, 172, 254, 0.85);
  --et-hero-panel-shadow: 0 28px 60px rgba(7, 16, 34, 0.55);
}

/* Tema claro */
html[data-bs-theme="light"] {
  --et-bg: #f4f5f9;
  --et-body-gradient:
    radial-gradient(circle at 18% 24%, rgba(183, 197, 224, 0.25), transparent 60%),
    radial-gradient(circle at 74% 12%, rgba(196, 206, 226, 0.22), transparent 65%),
    linear-gradient(135deg, #f4f6fb 0%, #eef1f7 55%, #ffffff 100%);
  --et-surface: #ffffff;
  --et-surface-alt: #e6eeff;
  --et-contrast: #0a1e3b;
  --et-muted: rgba(48, 58, 82, 0.72);
  --et-accent: #1f6bff;
  --et-accent-soft: rgba(31, 107, 255, 0.14);
  --et-border: rgba(31, 107, 255, 0.16);
  --et-border-strong: rgba(31, 107, 255, 0.25);
  --et-shadow-soft: 0 20px 48px rgba(8, 20, 43, 0.08);
  --et-shadow-strong: 0 26px 56px rgba(8, 20, 43, 0.16);
  --et-card-gradient: linear-gradient(150deg, #ffffff 0%, #f4f7ff 100%);
  --et-card-overlay: linear-gradient(160deg, rgba(31, 107, 255, 0.12), rgba(255, 255, 255, 0));
  --et-hero-overlay: rgba(7, 20, 42, 0.55);
}

/* Tema escuro */
html[data-bs-theme="dark"] {
  --et-bg: #050e1a;
  --et-body-gradient:
    radial-gradient(circle at 18% 24%, rgba(46, 65, 104, 0.38), transparent 60%),
    radial-gradient(circle at 74% 12%, rgba(33, 50, 86, 0.34), transparent 65%),
    linear-gradient(135deg, #091423 0%, #0c1a2d 55%, #071121 100%);
  --et-surface: #0f1d33;
  --et-surface-alt: #152843;
  --et-contrast: #f4f7ff;
  --et-muted: rgba(203, 215, 241, 0.72);
  --et-accent: #6ca8ff;
  --et-accent-soft: rgba(108, 168, 255, 0.28);
  --et-border: rgba(108, 168, 255, 0.26);
  --et-border-strong: rgba(108, 168, 255, 0.38);
  --et-shadow-soft: 0 20px 48px rgba(1, 7, 18, 0.7);
  --et-shadow-strong: 0 26px 56px rgba(2, 10, 24, 0.92);
  --et-card-gradient: linear-gradient(150deg, rgba(23, 36, 58, 0.96) 0%, rgba(15, 26, 44, 0.96) 100%);
  --et-card-overlay: linear-gradient(160deg, rgba(108, 168, 255, 0.18), rgba(9, 17, 33, 0));
  --et-hero-overlay: rgba(2, 6, 13, 0.6);
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
}

body {
  margin: 0;
  background-color: var(--et-bg);
  background-image: var(--et-body-gradient, none);
  color: var(--et-contrast);
  font-family: var(--et-font-base);
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--et-font-display);
  font-weight: 600;
  color: var(--et-contrast);
  letter-spacing: -0.01em;
}

p {
  color: var(--et-muted);
}

/* ========== 
   NAVBAR & BACK TO TOP
   ========== */

.navbar-landing {
  overflow: visible;
  z-index: 1000;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.9),
      rgba(0, 0, 0, 0.55));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.navbar-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.navbar-video.is-visible {
  opacity: 1;
}

.navbar-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
}

.navbar-brand .brand-logo {
  width: 42px;
  height: 70px;
  object-fit: contain;
}

.navbar-landing .navbar-brand span {
  color: #ffffff;
}

.navbar-landing .nav-link {
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  transition: color 0.2s ease;
}

.navbar-landing .nav-link:hover,
.navbar-landing .nav-link:focus,
.navbar-landing .nav-link.active {
  color: #ffffff;
}

/* Botão “back to top” */

.back-to-top-btn {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: var(--et-accent);
  color: #ffffff;
  box-shadow: var(--et-accent-shadow);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
  z-index: 1040;
  cursor: pointer;
}

.back-to-top-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--et-accent-shadow-hover);
}

.back-to-top-btn:active {
  transform: translateY(0);
  box-shadow: var(--et-accent-shadow-active);
}

.back-to-top-btn:focus-visible {
  outline: 3px solid var(--et-focus-outline);
  outline-offset: 2px;
}

.back-to-top-btn .fas {
  font-size: 1.05rem;
}

.theme-control-dropdown .dropdown-item>* {
  pointer-events: none;
}

/* ========== 
   HERO / BANNER
   ========== */

#banner {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 100vh;
  overflow: hidden;
}

#banner .bg-holder {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  transform: none !important;
  transition: none !important;
  will-change: auto;
  z-index: 0;
}

#banner .container,
#banner .container-fluid {
  position: relative;
  z-index: 1;
  padding-top: 8rem;
  padding-bottom: 6rem;
}

/* ========== 
   BOTÕES
   ========== */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 2.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.btn-pill.primary {
  background-color: var(--et-accent);
  color: #ffffff;
  box-shadow: var(--et-button-shadow);
}

.btn-pill.primary:hover {
  transform: translateY(-4px);
  box-shadow: var(--et-button-shadow-hover);
}

.btn-pill.secondary {
  border-color: var(--et-border);
  color: var(--et-contrast);
  background-color: var(--et-surface-alt);
}

.btn-pill.secondary:hover {
  background-color: var(--et-surface);
  transform: translateY(-3px);
}

.btn-pill:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

/* ========== 
   SessõeS & GRID
   ========== */

.grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.hero {
  padding-top: clamp(6rem, 12vw, 10rem);
}

.hero .container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.hero-text {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-overline {
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  color: var(--et-accent);
  font-weight: 600;
}

.hero h1 {
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  line-height: 1.05;
  margin: 0;
}

.hero h1 span {
  color: var(--et-accent);
}

.hero-summary {
  max-width: 600px;
  font-size: clamp(1rem, 1.8vw, 1.05rem);
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-insights {
  grid-column: span 5;
  align-self: stretch;
  background: var(--et-card-gradient);
  border-radius: 1.75rem;
  border: 1px solid var(--et-border);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  box-shadow: var(--et-hero-panel-shadow);
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 740px;
}

.section-heading .eyebrow {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  color: var(--et-accent);
  font-weight: 600;
}

.section-heading h2 {
  font-size: clamp(2rem, 4.5vw, 3.3rem);
  margin: 0;
}

.section-heading p {
  margin: 0;
}

/* Pilares */

.pillars-section {
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pillar-card {
  grid-column: span 6;
  background: var(--et-card-gradient);
  border-radius: 1.5rem;
  border: 1px solid var(--et-border);
  padding: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--et-shadow-soft);
  transform: translateZ(0);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.pillar-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--et-card-overlay);
  pointer-events: none;
}

.pillar-card span.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background-color: var(--et-accent-soft);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  width: fit-content;
}

.pillar-card h3 {
  font-size: 1.7rem;
  margin: 0;
}

.pillar-card ul {
  padding-left: 1.1rem;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  color: var(--et-muted);
}

/* Sinais */

.signal-grid {
  margin-top: clamp(3rem, 6vw, 4rem);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.signal-card {
  border: 1px solid var(--et-border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  background: var(--et-surface);
  display: grid;
  gap: 0.75rem;
  box-shadow: var(--et-shadow-soft);
  transform: translateZ(0);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.signal-card strong {
  font-size: 1.1rem;
}

/* Stories */

.stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.story-card {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border-radius: 1.5rem;
  background: var(--et-card-gradient);
  border: 1px solid var(--et-border-strong);
  display: grid;
  gap: 1.25rem;
  box-shadow: var(--et-shadow-strong);
  transform: translateZ(0);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.story-card .label {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.72rem;
  color: var(--et-muted);
  opacity: 0.7;
  font-weight: 600;
}

.story-card h3 {
  font-size: 1.4rem;
  margin: 0;
}

.story-card .stat {
  font-size: 2rem;
  color: var(--et-accent);
  font-family: var(--et-font-display);
}

/* Hovers comuns */

.pillar-card:hover,
.signal-card:hover,
.story-card:hover {
  transform: translateY(-4px) rotateX(0.5deg) rotateY(0.5deg);
  box-shadow: var(--et-shadow-strong);
}

/* CTA / contacto */

.cta-block {
  border-radius: 2rem;
  border: 1px solid var(--et-border);
  padding: clamp(3rem, 6vw, 4.5rem);
  background: var(--et-card-gradient);
  display: grid;
  gap: 2rem;
  box-shadow: var(--et-shadow-soft);
}

.cta-block h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 0;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ========== 
   MARQUEE
   ========== */

.marquee {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(120deg, rgba(5, 12, 30, 0.88), rgba(5, 12, 30, 0.58)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(31, 107, 255, 0.18), rgba(0, 0, 0, 0.35)),
    url('assets/img/landing-page/trucklol2.jpeg') center/cover fixed;
  border-top: 1px solid var(--et-border);
  border-bottom: 1px solid var(--et-border);
  overflow: hidden;
  padding: 1.5rem 0;
}

.marquee-overlay {
  position: absolute;
  inset: 0;
  display: block;
  background:
    radial-gradient(circle at 18% 40%, rgba(79, 172, 254, 0.35), transparent 36%),
    radial-gradient(circle at 82% 60%, rgba(255, 77, 106, 0.28), transparent 38%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  opacity: 0.9;
  pointer-events: none;
}

.marquee-track {
  display: flex;
  gap: 2.5rem;
  animation: marquee 22s linear infinite;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.86rem;
  color: #f6f9ff;
  opacity: 0.9;
  padding-inline: 2rem;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 767.98px) {
  .marquee {
    padding: 1.5rem 0;
  }

  .marquee-track {
    gap: 1.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    padding-inline: 1.25rem;
  }
}

/* ========== 
   FOOTER
   ========== */

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--et-border);
  font-size: 0.85rem;
  color: var(--et-muted);
}

footer .footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
}

footer a {
  color: inherit;
  text-decoration: none;
  opacity: 0.9;
}

footer a[aria-disabled='true'] {
  pointer-events: none;
  opacity: 0.5;
}

/* ========== 
   ANIMAÇÕES DE ENTRADA
   ========== */

[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== 
   TYPED.JS GRADIENT
   ========== */

.gradient-typed {
  --g1: #4facfe;
  --g2: #00f2fe;
  --cursor: #4facfe;
  background-image: linear-gradient(90deg, var(--g1), var(--g2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

#typedGradient {
  display: inline-block;
  min-width: 13ch;
  white-space: nowrap;
}

.typed-cursor {
  color: var(--cursor);
}

/* ========== 
   CAMIÃO ANIMADO
   ========== */

.loop-wrapper {
  margin: 2rem auto;
  position: relative;
  display: block;
  width: min(600px, 100%);
  height: 250px;
  overflow: hidden;
  border-bottom: 3px solid #005b17;
  color: #0f6600;
}

.mountain {
  position: absolute;
  right: -900px;
  bottom: -20px;
  width: 2px;
  height: 2px;
  box-shadow:
    0 0 0 50px #451616,
    60px 50px 0 70px #331919,
    90px 90px 0 50px #3d2424,
    250px 250px 0 50px #460f0f,
    290px 320px 0 50px #300505,
    320px 400px 0 50px #390404;
  transform: rotate(130deg);
  animation: mtn 20s linear infinite;
}

.hill {
  position: absolute;
  right: -900px;
  bottom: -50px;
  width: 400px;
  border-radius: 50%;
  height: 20px;
  box-shadow:
    0 0 0 50px #177d30,
    -20px 0 0 20px #00ff0879,
    -90px 0 0 50px #0d6100,
    250px 0 0 50px #10924c,
    290px 0 0 50px #113d00,
    620px 0 0 50px #117406;
  animation: hill 4s 2s linear infinite;
}

.tree,
.tree:nth-child(2),
.tree:nth-child(3) {
  position: absolute;
  height: 100px;
  width: 35px;
  bottom: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/tree.svg) no-repeat;
}

.rock {
  margin-top: -17%;
  height: 2%;
  width: 2%;
  bottom: -2px;
  border-radius: 20px;
  position: absolute;
  background: #075a00;
}

.truck,
.wheels {
  transition: all ease;
  width: 85px;
  margin-right: -60px;
  bottom: 0;
  right: 50%;
  position: absolute;
  background: #000cf9;
}

.truck {
  background: url(assets/img/landing-page/truck-blue.svg) no-repeat;
  background-size: contain;
  height: 60px;
}

.truck:before {
  content: ' ';
  position: absolute;
  width: 25px;
  box-shadow:
    -30px 28px 0 1.5px #04f2ff66,
    -35px 18px 0 1.5px #00fff6;
}

.wheels {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/wheels.svg) no-repeat;
  height: 15px;
  margin-bottom: 0;
}

/* animações truck */

.tree {
  animation: tree 3s 0s linear infinite;
}

.tree:nth-child(2) {
  animation: tree2 2s 0.15s linear infinite;
}

.tree:nth-child(3) {
  animation: tree3 8s 0.05s linear infinite;
}

.rock {
  animation: rock 4s -0.53s linear infinite;
}

.truck {
  animation: truck 4s 0.08s ease infinite;
}

.wheels {
  animation: truck 4s 0.001s ease infinite;
}

.truck:before {
  animation: wind 1.5s 0s ease infinite;
}

@keyframes tree {
  0% {
    transform: translate(1350px);
  }

  100% {
    transform: translate(-50px);
  }
}

@keyframes tree2 {
  0% {
    transform: translate(650px);
  }

  100% {
    transform: translate(-50px);
  }
}

@keyframes tree3 {
  0% {
    transform: translate(2750px);
  }

  100% {
    transform: translate(-50px);
  }
}

@keyframes rock {
  0% {
    right: -200px;
  }

  100% {
    right: 2000px;
  }
}

@keyframes truck {
  6% {
    transform: translateY(0);
  }

  7% {
    transform: translateY(-6px);
  }

  9% {
    transform: translateY(0);
  }

  10% {
    transform: translateY(-1px);
  }

  11% {
    transform: translateY(0);
  }
}

@keyframes wind {
  50% {
    transform: translateY(3px);
  }
}

@keyframes mtn {
  100% {
    transform: translateX(-2000px) rotate(130deg);
  }
}

@keyframes hill {
  100% {
    transform: translateX(-2000px);
  }
}

/* ========== 
   ACESSIBILIDADE & REDUZIR MOTION
   ========== */

@media (prefers-reduced-motion: reduce) {

  .back-to-top-btn,
  .navbar-video,
  [data-animate] {
    transition: none;
  }

  [data-animate] {
    transform: none;
    opacity: 1;
  }
}

/* ========== 
   BREAKPOINTS GERAIS
   ========== */

@media (max-width: 991.98px) {
  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero-text,
  .hero-insights {
    grid-column: span 1;
  }

  .pillars {
    grid-template-columns: 1fr;
  }

  .pillar-card {
    grid-column: span 1;
  }

  .explore-stack {
    height: calc(100vh * 4);
  }

  .explore-stack-layout {
    grid-template-columns: 1fr;
    width: min(92vw, 620px);
  }

  .explore-stack-media {
    display: none;
  }

  .explore-stack-stage {
    width: min(520px, 100%);
    min-height: clamp(60vh, 66vh, 72vh);
  }

  .explore-card {
    padding: clamp(1.85rem, 7vw, 2.4rem);
  }

  .hero-insights {
    padding: 2rem;
  }
}

/* Telemóvel */

@media (max-width: 767.98px) {
  .pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .stories {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

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

  .navbar-video {
    display: none;
  }

  #banner .row {
    padding-top: 0;
    padding-bottom: 0;
  }

  #banner .container,
  #banner .container-fluid {
    padding-top: 6rem;
    padding-bottom: 3rem;
  }

  h1 {
    font-size: 1.9rem;
    line-height: 1.2;
  }

  .navbar-brand .brand-logo {
    width: 32px;
    height: 50px;
  }

  .loop-wrapper {
    height: 220px;
  }
}

/* ========== 
   HYPER SPEED SCROLL (GSAP)
   ========== */

.hyper-speed-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, #1f6bff33, transparent 55%),
    radial-gradient(circle at 10% 90%, #00f2fe22, transparent 60%),
    radial-gradient(circle at 90% 80%, #ff4d6a22, transparent 55%),
    #020817;
  color: #f9fafb;
}

.hyper-speed-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hyper-speed-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.hyper-speed-kicker {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 1.75rem;
}

.hyper-speed-phrases {
  position: relative;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hyper-speed-phrase {
  position: absolute;
  margin: 0;
  font-family: var(--et-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(40px);
  filter: drop-shadow(0 0 24px rgba(31, 107, 255, 0.5));
  background-image: linear-gradient(120deg, #4facfe, #00f2fe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hyper-speed-sub {
  margin-top: 2.5rem;
  font-size: 0.95rem;
  opacity: 0.9;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  color: #cbd5f5;
}

@media (max-width: 767.98px) {
  .hyper-speed-section {
    padding-inline: 1.5rem;
  }

  .hyper-speed-kicker {
    letter-spacing: 0.22em;
    font-size: 0.75rem;
  }

  .hyper-speed-phrase {
    font-size: 1.6rem;
  }

  .hyper-speed-sub {
    font-size: 0.9rem;
  }
}

/* ========== 
   ET FLOW - STEP BY STEP
   ========== */

.et-flow-section {
  padding-top: clamp(4rem, 8vw, 5.5rem);
  padding-bottom: clamp(4rem, 8vw, 5.5rem);
  background: var(--et-bg);
}

/* container mais controlado no desktop para não “rebentar” para fora */
.et-flow-section .container {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(2rem, 4vw, 3rem);
  padding-right: clamp(2rem, 4vw, 3rem);
}

.et-flow-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.et-flow-intro {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.et-flow-intro h2 {
  margin: 0;
}

.et-flow-intro p {
  margin: 0;
}

.et-flow-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

/* 2 colunas no desktop, sem passar a largura do container */
.et-flow-item {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 3vw, 2.8rem);
  align-items: center;
}

.et-flow-item--reverse {
  grid-auto-flow: dense;
}

.et-flow-item--reverse .et-flow-copy {
  order: 2;
}

.et-flow-item--reverse .et-flow-media {
  order: 1;
}

.et-flow-copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.et-flow-step-index {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  font-family: var(--et-font-display);
  color: transparent;
  -webkit-text-stroke: 1px var(--et-accent);
  opacity: 0.6;
  line-height: 1;
}

@media (max-width: 575.98px) {
  .et-flow-step-index {
    font-size: 2rem;
  }
}

.et-flow-copy h3 {
  margin: 0;
  font-size: 1.3rem;
}

.et-flow-copy p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--et-muted);
  max-width: 34rem;
}

/* caixa da imagem sem sair do ecrã */
.et-flow-media {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--et-shadow-soft);
  max-width: 540px;
  justify-self: flex-end;
}

.et-flow-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 0%,
      rgba(79, 172, 254, 0.4),
      transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.et-flow-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* estado base animação */
.flow-anim-left {
  opacity: 0;
  transform: translate(-30px, 30px);
}

.flow-anim-right {
  opacity: 0;
  transform: translate(30px, 30px);
}

/* Tablet e abaixo → empilha e centra tudo */
@media (max-width: 991.98px) {

  .et-flow-item,
  .et-flow-item--reverse {
    grid-template-columns: 1fr;
  }

  .et-flow-item--reverse .et-flow-copy,
  .et-flow-item--reverse .et-flow-media {
    order: 0;
  }

  .et-flow-media {
    max-width: 520px;
    justify-self: center;
  }
}

@media (max-width: 575.98px) {
  .et-flow-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .et-flow-copy h3 {
    font-size: 1.15rem;
  }
}


/* ========== 
   AJUSTES EXTRA RESPONSIVO / TYPED
   ========== */

@media (max-width: 575.98px) {
  #typedGradient {
    min-width: 0;
    white-space: normal;
  }
}

/* Compensar navbar fixa para âncoras */
#banner,
#pillars,
#stories,
#contact,
#et-flow,
#hyper-speed {
  scroll-margin-top: 6rem;
}

/* ========== 
   MÉTRICAS
   ========== */

.metrics-draw {
  padding-top: clamp(4.5rem, 8vw, 6rem);
  padding-bottom: clamp(4.5rem, 8vw, 6rem);
}

/* Container centrado para o conteúdo (texto + barras) */
.metrics-draw>.container {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* Cada métrica: cartão + linha com texto e barra */
.metrics-draw .metric-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  border-radius: 18px;
  padding: 1.75rem 2rem;
  margin-bottom: 6rem;
  /* espaço entre métricas */
  background: rgba(5, 10, 25, 0.95);
}

/* Imagem de fundo a ocupar TODA a horizontal (100vw) */
.metrics-draw .metric-line::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  /* sempre igual à largura do viewport */
  transform: translateX(-50%);
  /* centra em relação ao ecrã */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
  z-index: 0;
  border-radius: 18px;
  /* segue o arredondado do cartão */
}

/* Conteúdo por cima da imagem */
.metrics-draw .metric-line * {
  position: relative;
  z-index: 1;
}

/* Caminhos das imagens */
.metric-bg-1::before {
  background-image: url('assets/img/landing-page/SpeedPower.jpeg');
}

.metric-bg-2::before {
  background-image: url('assets/img/landing-page/SpeedPower2.jpeg');
}

.metric-bg-4::before {
  background-image: url('assets/img/landing-page/SpeedPower3.jpeg');
}

.metric-bg-5::before {
  background-image: url('assets/img/landing-page/SpeedPower4.jpg');
}

/* Cabeçalho da métrica (texto) */
.metric-header {
  flex: 0 0 340px;
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.metric-header h2 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: #f9fbff;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(0, 0, 0, 0.95),
    1px 1px 2px rgba(0, 0, 0, 0.9),
    -1px -1px 2px rgba(0, 0, 0, 0.9);
}

/* se não usares ícone, esconde */
.metric-icon {
  display: none;
}

/* Barra + % */
.metric-bar-row {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* SVG barra */
.metric-svg,
.metric-bar-row svg {
  display: block;
  width: 100%;
  height: 88px;
}

/* Wrapper da percentagem */
.metric-bar-row .metric-value-wrapper {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

/* Estilo do número da % */
.metric-value {
  font-family: var(--et-font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: #f9fbff;
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-block;
}

/* Layout tablet das métricas */
@media (max-width: 991.98px) {
  .metrics-draw>.container {
    margin-left: auto;
    margin-right: auto;
    padding-inline: 1.5rem;
    max-width: 100%;
  }

  .metrics-draw .metric-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .metric-header {
    flex: none;
    width: 100%;
    min-height: auto;
  }

  .metric-header h2 {
    font-size: 1.4rem;
    line-height: 1.3;
  }

  .metric-bar-row svg {
    height: 64px;
  }

  .metric-value {
    font-size: 2rem;
  }
}

/* Layout mobile */
@media (max-width: 767.98px) {
  .metrics-draw .metric-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .metric-header {
    flex: none;
    width: 100%;
    min-height: auto;
  }
}

/* MÉTRICAS – MOBILE EXTRA */
@media (max-width: 575.98px) {
  .metrics-draw {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .metrics-draw .metric-line {
    padding: 1.25rem 1.25rem;
    margin-bottom: 2.25rem;
  }

  .metric-header h2 {
    font-size: 1.2rem;
  }

  .metric-bar-row svg {
    height: 52px;
  }

  .metric-value {
    font-size: 1.7rem;
  }
}


/* ========== 
   CONTACTO – SECÇÃO FINAL
   ========== */

.contact-section {
  padding-top: clamp(4.5rem, 8vw, 6rem);
  padding-bottom: clamp(4.5rem, 8vw, 6rem);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 3.75rem);
  align-items: flex-start;
}

.contact-copy {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  max-width: 640px;
}

.contact-copy .eyebrow {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  color: var(--et-accent);
  font-weight: 600;
}

.contact-copy h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.6rem);
}

.contact-copy p {
  margin: 0;
  font-size: 0.98rem;
}

/* Lista de highlights */

.contact-highlights {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: grid;
  gap: 0.55rem;
}

.contact-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--et-muted);
}

.contact-highlights .dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--et-accent);
  margin-top: 0.4rem;
}

.contact-meta {
  margin-top: 0.75rem;
}

.contact-meta .small {
  font-size: 0.85rem;
  color: var(--et-muted);
}

.contact-meta a {
  color: var(--et-accent);
  font-weight: 600;
  text-decoration: none;
}

.contact-meta a:hover {
  text-decoration: underline;
}

/* Cartão de formulário */

.contact-form-card {
  border-radius: 1.5rem;
  border: 1px solid var(--et-border);
  background: var(--et-card-gradient);
  box-shadow: var(--et-shadow-soft);
  padding: clamp(2rem, 4vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-form-card h3 {
  margin: 0;
  font-size: 1.6rem;
}

.contact-form-sub {
  margin: 0;
  font-size: 0.95rem;
  color: var(--et-muted);
}

/* Layout do formulário */

.contact-form {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact-field label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--et-muted);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  border-radius: 0.9rem;
  border: 1px solid var(--et-border);
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  font-family: var(--et-font-base);
  background-color: rgba(255, 255, 255, 0.94);
  color: var(--et-contrast);
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

html[data-bs-theme="dark"] .contact-field input,
html[data-bs-theme="dark"] .contact-field select,
html[data-bs-theme="dark"] .contact-field textarea {
  background-color: rgba(7, 16, 34, 0.96);
  color: var(--et-contrast);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--et-accent);
  box-shadow: 0 0 0 1px var(--et-accent-soft);
}

/* Checkbox de consentimento */

.contact-consent {
  margin-top: 0.25rem;
}

.contact-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
}

.contact-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact-checkbox span {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--et-border);
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  position: relative;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

html[data-bs-theme="dark"] .contact-checkbox span {
  background-color: rgba(10, 18, 35, 0.96);
}

.contact-checkbox small {
  font-size: 0.8rem;
  color: var(--et-muted);
}

.contact-checkbox input:checked+span {
  border-color: var(--et-accent);
  background-color: var(--et-accent);
  box-shadow: 0 0 0 1px var(--et-accent-soft);
}

.contact-checkbox input:checked+span::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  border: 2px solid #ffffff;
}

/* Botão submit alinhado */

.contact-submit {
  margin-top: 0.5rem;
  align-self: flex-start;
}

/* Responsivo contacto */

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

  .contact-copy {
    max-width: 100%;
  }

  .contact-form-card {
    max-width: 620px;
    justify-self: stretch;
  }
}

@media (max-width: 767.98px) {
  .contact-row {
    grid-template-columns: 1fr;
  }

  .contact-submit {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .contact-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .contact-form-card {
    padding: 1.6rem 1.4rem;
  }
}


/* ============================
   AJUSTES MOBILE - TUDO CENTRADO
   ============================ */

@media (max-width: 767.98px) {

  /* Hero / título principal (já tem text-center, isto é só por segurança) */
  #banner .row,
  #banner .col-md-11,
  #banner h1,
  #banner .btn {
    text-align: center;
    justify-content: center;
  }

  /* ET FLOW - intro e passos */
  .et-flow-intro,
  .et-flow-intro h2,
  .et-flow-intro h5,
  .et-flow-copy {
    text-align: center;
  }

  .et-flow-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .et-flow-media {
    margin-left: auto;
    margin-right: auto;
  }

  /* MÉTRICAS – títulos e percentagens centradas */
  .metrics-draw .metric-line {
    text-align: center;
  }

  .metrics-draw .metric-header {
    justify-content: center;
  }

  .metrics-draw .metric-bar-row {
    justify-content: center;
  }

  .metrics-draw .metric-value-wrapper {
    left: 50% !important;
    transform: translate(-50%, -50%);
  }

  /* CONTACTO – texto e formulário centrados */
  .contact-copy,
  .contact-copy h2,
  .contact-copy p,
  .contact-highlights,
  .contact-form-card,
  .contact-form {
    text-align: center;
  }

  .contact-highlights li {
    justify-content: center;
  }

  .contact-highlights .dot {
    margin-top: 0.45rem;
  }

  .contact-submit {
    width: 100%;
    justify-content: center;
  }

  /* Footer centrado em mobile */
  footer .footer-row {
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
  }
}


/* ============================
   SAFETY NET ANTI-SCROLL LATERAL
   ============================ */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================
   AJUSTES HERO EM MOBILE
   ============================ */

@media (max-width: 767.98px) {

  /* Limpar o padding lateral exagerado do HERO */
  #banner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #banner .container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 6rem;
    padding-bottom: 3rem;
  }

  /* Garantir que a row centra tudo no ecrã pequeno */
  #banner .row {
    justify-content: center !important;
    text-align: center;
  }

  #banner .col-md-11.col-lg-8.col-xl-5 {
    padding-bottom: 0;
  }

  /* Título mais compacto em mobile */
  #banner h1 {
    font-size: 1.9rem;
    line-height: 1.2;
  }

  /* Typed text não rebentar a largura */
  #typedGradient {
    min-width: 0;
    white-space: normal;
    display: inline-block;
  }

  /* Botão CTA centrado */
  #banner #ctaEtFlow {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
  }
}

/* ============================
   HERO - LAYOUT RESPONSIVO
   ============================ */

/* MOBILE (até 767px) → centrado e compacto */
@media (max-width: 767.98px) {

  #banner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #banner .container-fluid {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 6rem !important;
    padding-bottom: 3rem !important;
  }

  #banner .row {
    justify-content: center !important;
    text-align: center !important;
  }

  #banner h1 {
    font-size: 1.9rem;
    line-height: 1.2;
  }

  #typedGradient {
    white-space: normal !important;
  }
}


/* ============================
   KPI HERO – TRANSIÇÃO IMAGENS
   ============================ */

.kpi-stage {
  position: relative;
  background: #020617;
  color: #e5e7eb;
}

.kpi-stage-inner {
  position: relative;
}

.kpi-hero-visual {
  position: relative;
  min-height: 120vh;
  width: 100vw;
  /* full-bleed width */
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

/* Camadas de imagem */
.kpi-hero-bg {
  position: absolute;
  inset: 0;

  background-size: cover;
  /* preenche sempre a área */
  background-position: center;
  /* mantém centrado */
  background-repeat: no-repeat;
  transform-origin: 55% 52%;
  will-change: transform, opacity;
}

/* EXTERIOR */
.kpi-hero-bg--outer {
  background-image: url("assets/img/landing-page/entrada01.png");
  z-index: 2;
  /* fica acima da interior no arranque */
}

/* INTERIOR */
.kpi-hero-bg--inner {
  background-image: url("assets/img/landing-page/entrada02.png");
  z-index: 1;
  /* fica por baixo da exterior */
}

/* Overlay */
.kpi-hero-overlay {

  display: block;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 55% 52%, rgba(14, 165, 233, 0.18), transparent 60%),
    radial-gradient(circle at 55% 60%, rgba(0, 0, 0, 0.2) 15%, rgba(0, 0, 0, 0.7) 80%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.92));
  opacity: var(--kpiOverlay);
  display: none !important;
}

/* Titulo + copy centrados no overlay */
.kpi-hero-title {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  z-index: 5;
  text-align: center;
  color: #e5e7eb;
  font-family: var(--et-font-display, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw + 0.8rem, 4.2rem);
  line-height: 1.05;
  text-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
  letter-spacing: 0.03em;
}

.kpi-hero-title .c {
  margin: 0 0 0.5rem;
  font-size: clamp(5.8rem, 8vw + 6.7rem, 8.8rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-shadow: 0 24px 55px rgba(0, 0, 0, 0.75);
}

.kpi-card--title {
  --kpiTitleCardWidth: 500px;
  --kpiTitleCardHeight: clamp(120px, 12vw, 160px);
  width: var(--kpiTitleCardWidth) !important;
  max-width: none;
  min-width: 500px;
  height: var(--kpiTitleCardHeight);
  margin: 0 auto;
  aspect-ratio: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2.6vw, 1.8rem);
  border-radius: 24px;
  background:
    radial-gradient(140% 160% at 10% 20%, rgba(56, 189, 248, 0.18), transparent 55%),
    radial-gradient(120% 140% at 85% 30%, rgba(99, 102, 241, 0.16), transparent 50%),
    linear-gradient(120deg, rgba(7, 16, 43, 0.95) 0%, rgba(13, 30, 78, 0.92) 50%, rgba(6, 13, 32, 0.96) 100%);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.45),
    0 0 48px rgba(125, 211, 255, 0.32);
  overflow: hidden;
  pointer-events: none;
}

.kpi-card--title::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(125, 211, 255, 0.18), rgba(14, 165, 233, 0.05));
  opacity: 0.7;
  pointer-events: none;
}

.kpi-card--title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 1px solid rgba(125, 211, 255, 0.32);
  box-shadow: inset 0 0 22px rgba(125, 211, 255, 0.22);
  pointer-events: none;
}

.kpi-card--title .kpi-card__shell,
.kpi-card--title .kpi-card__scan {
  display: none;
}

.kpi-card--title .kpi-card__content {
  position: relative;
  inset: 0;
  padding: clamp(1.2rem, 3vw, 2rem);
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
}

.kpi-card__title-text {
  margin: 0;
  font-family: var(--et-font-display, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #ffffff;
  -webkit-text-stroke: 0.9px #7dd3ff;
  text-shadow:
    0 0 8px rgba(125, 211, 255, 0.22),
    0 22px 50px rgba(0, 0, 0, 0.65);
  text-align: center;
  line-height: 1.2;
  paint-order: stroke fill;
  -webkit-font-smoothing: antialiased;
}

.kpi-hero-eyebrow {
  display: inline-block;
  margin: 0;
  padding: clamp(0.6rem, 1.5vw, 1rem) clamp(1.4rem, 3vw, 2.2rem);
  font-size: clamp(2.4rem, 5vw + 0.8rem, 4.6rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0.06em;
  text-transform: none;
  white-space: pre-line;
  color: #7dd3ff;
  -webkit-text-stroke: 1.6px #0c2f61;
  text-shadow:
    0 0 18px rgba(12, 47, 97, 0.35),
    0 0 32px rgba(125, 211, 255, 0.28),
    0 18px 60px rgba(0, 0, 0, 0.7);
}

.kpi-hero-content {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8.75rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  pointer-events: none;
  transform: translateY(-5vh);
}

.kpi-hero-title h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #e5e7eb;
}

.kpi-hero-cards {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  pointer-events: auto;
}

.kpi-card-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.kpi-card {
  position: relative;
  width: 100%;
  aspect-ratio: 7 / 10;
  isolation: isolate;
  text-align: center;
}

.kpi-card__shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.35));
  z-index: 0;
}

.kpi-card__bg {
  fill: url(#kpiGrad);
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2;
}

.kpi-card__neon {
  fill: none;
  stroke: url(#kpiStroke);
  stroke-width: 3;
  stroke-linejoin: round;
  filter: url(#kpiGlow);
}

.kpi-card__content {
  position: absolute;
  inset: 0;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: #e5e7eb;
  pointer-events: none;
  clip-path: polygon(24% 6%, 76% 6%, 98% 50%, 76% 94%, 24% 94%, 2% 50%);
  z-index: 2;
}

.kpi-card__scan {
  position: absolute;
  inset: 10px 12px 14px 12px;
  border-radius: 18px;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0.05) 70%,
      rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  opacity: 0.22;
  animation: kpiCardScan 2.8s linear infinite;
  clip-path: polygon(24% 6%, 76% 6%, 98% 50%, 76% 94%, 24% 94%, 2% 50%);
  z-index: 1;
}

@keyframes kpiCardScan {
  0% {
    transform: translateY(-18%);
  }

  100% {
    transform: translateY(18%);
  }
}

.kpi-card__label {
  margin: 0 0 0.2rem 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a5b4fc;
}

.kpi-card__value {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #f8fafc;
}

.kpi-card__number {
  color: #ffffff;
  -webkit-text-stroke: 0.85px #7dd3ff;
  text-shadow: 0 0 6px rgba(125, 211, 255, 0.22);
  paint-order: stroke fill;
  -webkit-font-smoothing: antialiased;
}

.kpi-card__text {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  color: #ffffff;
  -webkit-text-stroke: 0.8px #7dd3ff;
  text-shadow: 0 0 6px rgba(125, 211, 255, 0.18);
  paint-order: stroke fill;
  -webkit-font-smoothing: antialiased;
}

.kpi-card__text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.kpi-card__delta {
  margin: 0.15rem 0 0 0;
  font-size: 0.9rem;
  color: #67e8f9;
}

@media (max-width: 768px) {
  .kpi-hero-visual {
    min-height: 80vh;
  }

  .kpi-hero-title {
    font-size: clamp(2.2rem, 7vw + 0.6rem, 3.6rem);
  }

  .kpi-hero-title .c {
    font-size: clamp(2.4rem, 8vw + 0.5rem, 4rem);
  }

  .kpi-hero-eyebrow {
    padding: 0.45rem 1.2rem;
    font-size: clamp(2rem, 9vw + 0.4rem, 3.4rem);
    letter-spacing: 0.045em;
  }
}










/* DESKTOP (a partir de 768px) → recuperar layout original */
@media (min-width: 768px) {

  #banner .container-fluid {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
    padding-top: 8rem !important;
    padding-bottom: 6rem !important;
  }

  #banner .row {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* ============================
   SAFE ZONE EM MOBILE (X CENTRADO)
   ============================ */

@media (max-width: 767.98px) {

  /* Classe para aplicar em secções que queres proteger em mobile */
  .et-safe-x {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Garantir que media não rebenta a largura */
  img,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }
}


/* ============================
   KPI CARDS 
  
   ============================ */

/* Overlay (tu tinhas display none duplicado) */
.kpi-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 55% 52%, rgba(14, 165, 233, 0.18), transparent 60%),
    radial-gradient(circle at 55% 60%, rgba(0, 0, 0, 0.2) 15%, rgba(0, 0, 0, 0.7) 80%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.70));
  opacity: 1;
}

/* GRID: 4 cards no desktop */
.kpi-hero-cards {
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  pointer-events: auto;
}

/* Tablet */
@media (max-width: 992px) {
  .kpi-hero-cards {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

/* Mobile */
@media (max-width: 520px) {
  .kpi-hero-cards {
    grid-template-columns: 1fr;
  }
}

/* Card base */
.kpi-card.kpi-card--tech {
  position: relative;
  width: 100%;
  aspect-ratio: 560 / 520;
  isolation: isolate;
  text-align: left;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
}

.kpi-card.kpi-card--tech:hover {
  transform: translateY(-4px);
  filter: brightness(1.06);
}

/* SVG ocupa tudo */
.kpi-card--tech .kpi-card__shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, .35));
  z-index: 0;
}

/* Fundo + neon (usa os teus defs) */
.kpi-card--tech .kpi-card__bg {
  fill: url(#kpiGrad);
  stroke: rgba(255, 255, 255, 0.65);
  stroke-width: 2;
}

.kpi-card--tech .kpi-card__neon {
  fill: none;
  stroke: url(#kpiStroke);
  stroke-width: 2.6;
  stroke-linejoin: round;
  filter: url(#kpiGlow);
}

/* Linhas circuito */
.kpi-card--tech .kpi-card__circuit {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 2;
  stroke-linecap: round;
}

.kpi-card--tech .kpi-card__node {
  fill: transparent;
  stroke: #ffffff;
  stroke-width: 2;
}

.kpi-card--tech .kpi-card__node2 {
  fill: transparent;
  stroke: #ffffff;
  stroke-width: 2;
}

/* Conteúdo (IMPORTANTE: remover clip-path hexágono!) */
.kpi-card--tech .kpi-card__content {
  position: absolute;
  inset: 0;
  padding: 30px 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  color: #e5e7eb;
  pointer-events: none;
  z-index: 2;
  text-align: center;
}

/* Número + texto */
.kpi-card--tech .kpi-card__value {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  -webkit-text-stroke: 0.8px #7dd3ff;
  text-shadow: 0 0 4px rgba(125, 211, 255, 0.16);
  paint-order: stroke fill;
  -webkit-font-smoothing: antialiased;
}

.kpi-card--tech .kpi-card__number {
  font-family: var(--et-font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: .02em;
  color: #ffffff;
  -webkit-text-stroke: 0.9px #7dd3ff;
  text-shadow: 0 0 6px rgba(125, 211, 255, 0.22);
  paint-order: stroke fill;
  -webkit-font-smoothing: antialiased;
}

.kpi-card--tech .kpi-card__text {
  opacity: 1;
  transform: none;
  transition: none;
  color: #ffffff;
  -webkit-text-stroke: 0.8px #7dd3ff;
  text-shadow: 0 0 4px rgba(125, 211, 255, 0.16);
  paint-order: stroke fill;
  -webkit-font-smoothing: antialiased;
  font-size: 19px;
  line-height: 1.3;
}

.kpi-card__text--xl {
  font-size: 22px;
  line-height: 1.35;
  text-align: center;
}

/* Scanline (sem clip-path hexágono) */
.kpi-card--tech .kpi-card__scan {
  position: absolute;
  inset: 10px 12px 14px 12px;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0.05) 70%,
      rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  opacity: .22;
  animation: kpiCardScanTech 2.8s linear infinite;
  z-index: 1;
}

@keyframes kpiCardScanTech {
  0% {
    transform: translateY(-18%);
  }

  100% {
    transform: translateY(18%);
  }
}

/* KPI – texto XL (ex: "Custo Anual") */
.kpi-card--tech .kpi-card__text--xl {
  font-size: 25px;
  /* aumenta aqui */
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.02em;
}


/* ============================
   KPI TITLE REVEAL (CARD)
   ============================ */

.kpi-hero-title {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 0.75rem;
}





.kpi-card--title .kpi-card__content {
  justify-content: center;
  align-items: center;
  padding: clamp(1.2rem, 3vw, 2rem);
}

.kpi-card--title {
  --kpiTitleCardWidth: 500px;
  --kpiTitleCardHeight: clamp(120px, 12vw, 160px);
  width: var(--kpiTitleCardWidth) !important;         /* force wider */
  max-width: none;
  min-width: 500px;
  height: var(--kpiTitleCardHeight);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2.6vw, 1.8rem);
  margin: 0 auto;                   /* continua centrado */
  opacity: 1;
  transform: none;
  pointer-events: none;
  border-radius: 24px;
  background:
    radial-gradient(140% 160% at 10% 20%, rgba(56, 189, 248, 0.18), transparent 55%),
    radial-gradient(120% 140% at 85% 30%, rgba(99, 102, 241, 0.16), transparent 50%),
    linear-gradient(120deg, rgba(7, 16, 43, 0.95) 0%, rgba(13, 30, 78, 0.92) 50%, rgba(6, 13, 32, 0.96) 100%);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.45),
    0 0 48px rgba(125, 211, 255, 0.32);
  overflow: hidden;
}

/* Override base .kpi-card width:100% so the title can grow wider */
.kpi-card.kpi-card--title{
  width: var(--kpiTitleCardWidth) !important;
  max-width: none;
  min-width: 500px;
  flex: 0 1 var(--kpiTitleCardWidth);
}

.kpi-card__title-text {
  margin: 0;
  font-family: var(--et-font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  letter-spacing: 0.05em;
  color: #eaf4ff;
  -webkit-text-stroke: 0.9px #7dd3ff;
  text-shadow:
    0 0 18px rgba(125, 211, 255, 0.35),
    0 18px 50px rgba(0, 0, 0, 0.65);
  text-align: center;
  line-height: 1.18;
  paint-order: stroke fill;
  -webkit-font-smoothing: antialiased;
}












/* =========================
   EASYTRACK CONTACT (premium)
   ========================= */

.et-contact{
  position: relative;
  padding: clamp(4rem, 6vw, 7rem) 0;
  background: url("assets/img/landing-page/contactos2.png") center / cover no-repeat;
  overflow: hidden;
}

/* overlay + vinheta para “aconchego” */
.et-contact::before{
  content:"";
  position:absolute;
  inset:0;

}

.et-contact > *{ position: relative; z-index: 1; }

/* bloco principal “solto” mas com micro-estrutura */
.et-contact__wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(1.25rem, 2vw, 2rem);
}

/* Cabeçalho */
.et-contact__eyebrow{
  display:inline-block;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 0.75rem;
}

.et-contact__title{
  position: relative;
  display: inline-block;
  font-size: clamp(2.2rem, 3.6vw, 3.3rem);
  line-height: 1.05;
  margin: 0 0 0.8rem;
  color: #eaf4ff;
  background: linear-gradient(110deg, #baf3ff 0%, #ffffff 40%, #6bc7ff 58%, #bff0ff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 12px rgba(110, 197, 255, 0.55),
    0 0 28px rgba(90, 150, 255, 0.35),
    0 0 55px rgba(50, 120, 220, 0.25);
  animation: etLightningSheen 2.3s linear infinite, etLightningPulse 3.6s ease-in-out infinite;
}

.et-contact__title::after{
  content: "";
  position: absolute;
  top: 52%;
  left: -12%;
  width: 124%;
  height: 56%;
  transform: translateY(-50%) skewX(-18deg);
  background: linear-gradient(
    120deg,
    transparent 15%,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(118, 218, 255, 0.65) 52%,
    rgba(255, 255, 255, 0.35) 60%,
    transparent 85%
  );
  filter: blur(12px);
  opacity: 0.85;
  mix-blend-mode: screen;
  animation: etLightningStreak 1.9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes etLightningSheen{
  0%{ background-position: 190% center; }
  100%{ background-position: -50% center; }
}

@keyframes etLightningPulse{
  0%, 100%{
    text-shadow:
      0 0 12px rgba(110, 197, 255, 0.45),
      0 0 28px rgba(90, 150, 255, 0.30),
      0 0 55px rgba(50, 120, 220, 0.20);
  }
  45%{
    text-shadow:
      0 0 15px rgba(150, 230, 255, 0.65),
      0 0 34px rgba(120, 190, 255, 0.45),
      0 0 68px rgba(90, 160, 255, 0.32);
  }
  50%{
    text-shadow:
      0 0 18px rgba(180, 245, 255, 0.95),
      0 0 40px rgba(140, 210, 255, 0.65),
      0 0 80px rgba(110, 180, 255, 0.40);
  }
  55%{
    text-shadow:
      0 0 13px rgba(110, 197, 255, 0.55),
      0 0 30px rgba(90, 150, 255, 0.35),
      0 0 60px rgba(50, 120, 220, 0.24);
  }
}

@keyframes etLightningStreak{
  0%{
    transform: translate(-22%, -50%) skewX(-18deg) scaleX(0.9);
    opacity: 0;
  }
  40%{
    opacity: 0.6;
  }
  55%{
    transform: translate(12%, -50%) skewX(-18deg) scaleX(1.05);
    opacity: 1;
  }
  100%{
    transform: translate(120%, -50%) skewX(-18deg) scaleX(0.8);
    opacity: 0;
  }
}

.et-contact__sub{
  margin: 0 0 2rem;
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  opacity: 0.85;
}

/* Form “glass” sem parecer card rígido */
.et-contact__form{
  background: linear-gradient(
    135deg,
    rgba(31, 107, 255, 0.16),
    rgba(0, 242, 254, 0.06)
  );
  border: 1px solid rgba(125, 211, 255, 0.25);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}


/* Grid elegante */
.et-contact__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}

/* Campo */
.et-field label{
  display:block;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
  opacity: 0.95;
}

.et-field input,
.et-field select,
.et-field textarea{
  width: 100%;
  padding: 18px 18px;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: #00000000;
  outline: none;
}

.et-field textarea{
  min-height: 180px;
  resize: vertical;
}

.et-field input::placeholder,
.et-field textarea::placeholder{
  opacity: 0.65;
}

/* Focus premium */
.et-field input:focus,
.et-field select:focus,
.et-field textarea:focus{
  border-color: rgba(79,124,255,0.65);
  box-shadow: 0 0 0 5px rgba(79,124,255,0.22);
}

/* Full width rows */
.et-field--full{ grid-column: 1 / -1; }

/* Checkbox elegante */
.et-check{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin: 6px 0 0;
}

.et-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.et-check__box{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  flex: 0 0 22px;
  margin-top: 2px;
}

.et-check__text{
  font-size: 1.05rem;
  line-height: 1.35;
  opacity: 0.9;
}

/* “checked” */
.et-check input:checked + .et-check__box{
  box-shadow: 0 0 0 5px rgba(79,124,255,0.20), inset 0 0 0 7px rgba(79,124,255,0.85);
  border-color: rgba(79,124,255,0.55);
}

/* Botão e nota */
.et-contact__submit{
  min-width: unset;
  padding: 10px 18px;
  font-size: 0.95rem;
  opacity: 0.9;
}

.et-contact__note{
  margin-top: 10px;
  font-size: 1rem;
  opacity: 0.75;
  text-align: center;
}

/* Mobile */
@media (max-width: 768px){
  .et-contact__grid{ grid-template-columns: 1fr; }
  .et-contact__form{ border-radius: 18px; }
}





/* =========================
   EASYTRACK CONTACT (premium)
   ========================= */

.et-contact{
  position: relative;
  padding: clamp(3.2rem, 4.8vw, 5.2rem) 0; /* ligeiramente mais curto para caber melhor */
  background: url("assets/img/landing-page/contactos2.png") center / cover no-repeat;
  overflow: hidden;
}

/* overlay + vinheta para “aconchego” */
.et-contact::before{
  content:"";
  position:absolute;
  inset:0;
}

.et-contact > *{
  position: relative;
  z-index: 1;
}

/* bloco principal (15% mais pequeno) */
.et-contact__wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(1.25rem, 2vw, 2rem);

  transform: scale(0.85);           /* ✅ -15% */
  transform-origin: top center;     /* encolhe para dentro */
  margin-bottom: -7rem;             /* compensa o “espaço” do scale (ajusta se precisares) */
}

/* Cabeçalho */
.et-contact__eyebrow{
  display:inline-block;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 0.75rem;
}

.et-contact__title{
  font-size: clamp(2.2rem, 3.6vw, 3.3rem);
  line-height: 1.05;
  margin: 0 0 0.8rem;
}

.et-contact__sub{
  margin: 0 0 2rem;
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  opacity: 0.85;
}

/* Form “glass” */
.et-contact__form{
  background: rgba(255, 255, 255, 0.618);
  border: 1px solid rgba(0, 0, 0, 0.478);
  border-radius: 22px;
  padding: clamp(1.25rem, 2vw, 2rem);
  backdrop-filter: blur(50px);
/*background: rgba(79, 124, 255, 0.22);*/
background: rgba(7, 16, 34, 0.45);

}

/* Grid elegante */
.et-contact__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}

/* Campo */
.et-field label{
  display:block;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
  opacity: 0.95;
}

.et-field input,
.et-field select,
.et-field textarea{
  width: 100%;
  padding: 18px 18px;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    140deg,
    rgba(6, 10, 22, 0.72),
    rgba(10, 18, 38, 0.58)
  );
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 20px rgba(0, 0, 0, 0.25);
  outline: none;
}

.et-field select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  padding-right: 3rem;
  background:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.7) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
    linear-gradient(140deg, rgba(6, 10, 22, 0.72), rgba(10, 18, 38, 0.58));
  background-repeat: no-repeat;
  background-position:
    calc(100% - 1.3rem) 50%,
    calc(100% - 0.9rem) 50%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.et-field select option{
  background-color: #0b142a;
  color: #ffffff;
}

.et-field textarea{
  min-height: 180px;
  resize: vertical;
}

.et-field input::placeholder,
.et-field textarea::placeholder{
  opacity: 0.65;
}

/* Focus premium */
.et-field input:focus,
.et-field select:focus,
.et-field textarea:focus{
  border-color: rgb(0, 0, 0);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
}

/* Full width rows */
.et-field--full{
  grid-column: 1 / -1;
}

/* Checkbox elegante */
.et-check{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin: 6px 0 0;
}

.et-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.et-check__box{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.949);
  background: rgba(255, 255, 255, 0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  flex: 0 0 22px;
  margin-top: 2px;
}

.et-check__text{
  font-size: 1.05rem;
  line-height: 1.35;
  opacity: 0.9;
}

/* checked */
.et-check input:checked + .et-check__box{
  box-shadow: 0 0 0 5px rgb(2, 26, 97), inset 0 0 0 7px rgba(79,124,255,0.85);
  border-color: rgba(79,124,255,0.55);
}

/* Botão pequeno + alinhado à direita (mais elegante) */
.et-field--full:last-child{
  display: flex;
  justify-content: flex-end;
}

.et-contact__submit{
  min-width: 140px;
  padding: 10px 18px;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  opacity: 0.95;
  background: var(--et-accent);
  color: #ff0000;
  border: none;
  border-radius: 999px;
  box-shadow: var(--et-button-shadow);
  transition: transform 0.2s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.et-contact__submit:hover{
  transform: translateY(-4px);
  box-shadow: var(--et-button-shadow-hover);
}

.et-contact__submit:active{
  transform: translateY(0);
  box-shadow: none;
}

/* Mobile */
@media (max-width: 768px){
  .et-contact{
    padding: 3.2rem 0;
  }

  .et-contact__wrap{
    transform: none;        /* no mobile não vale a pena encolher */
    margin-bottom: 0;
  }

  .et-contact__grid{
    grid-template-columns: 1fr;
  }

  .et-contact__form{
    border-radius: 18px;
  }

  .et-field--full:last-child{
    justify-content: stretch;
  }

  .et-contact__submit{
    width: 100%;
    min-width: 0;
  }
}



/* BOTÃO */
.et-rfidbtn{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  padding:1rem 1.3rem;
  border:0;
  border-radius:16px;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,#1f6bff,#6db5ff);
  box-shadow:0 18px 40px rgba(31,107,255,.35);
  transition:transform .18s ease, filter .18s ease;
}

.et-rfidbtn:hover{ transform:translateY(-2px); filter:brightness(1.03); }
.et-rfidbtn:active{ transform:translateY(0) scale(.99); }

.et-rfidicon{ width:58px; height:40px; display:block; }
.et-rfidsvg{ width:58px; height:40px; overflow:visible; }

.et-rfidtext{
  font-weight:800;
  letter-spacing:.2px;
  white-space:nowrap;
}

/* CHIP */
.chip{ fill:#0b1b3d; opacity:.95; }
.chip-inner{ fill:rgba(255,255,255,.12); }
.pins rect{ fill:rgba(255,255,255,.65); }

.rfid-mark, .rfid-mark2{
  fill:none;
  stroke:rgba(255,255,255,.8);
  stroke-width:3;
  stroke-linecap:round;
}

/* ONDAS */
.wave{
  fill:none;
  stroke:rgba(255,255,255,.75);
  stroke-width:4;
  stroke-linecap:round;
  opacity:0;
  stroke-dasharray:60 120;
}

/* PULSO */
.pulse{
  fill:none;
  stroke:rgba(255,255,255,.75);
  stroke-width:3.5;
  opacity:0;
  transform-origin:center;
}

/* IDLE */
.et-rfidbtn .chip{
  animation: chipPulse 2.2s ease-in-out infinite;
}

.et-rfidbtn .pulse{
  animation: rfidPulse 1.8s ease-out infinite;
}

/* A ENVIAR */
.et-rfidbtn.is-sending .chip{
  animation:none;
  filter:brightness(1.3);
}

.et-rfidbtn.is-sending .wave{
  opacity:1;
  animation: rfidWave .6s linear infinite;
}

.et-rfidbtn.is-sending .w2{
  animation-duration:.8s;
  opacity:.85;
}

.et-rfidbtn.is-sending .pulse{
  animation: rfidPulse .9s ease-out infinite;
  stroke-width:4.5;
  opacity:1;
}

/* ENVIADO */
.et-rfidbtn.is-sent .pulse,
.et-rfidbtn.is-sent .wave{
  animation:none;
  opacity:0;
}

@keyframes chipPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.04); }
}

@keyframes rfidPulse{
  0%{ opacity:0; transform:scale(.9); }
  15%{ opacity:1; }
  100%{ opacity:0; transform:scale(4); }
}

@keyframes rfidWave{
  0%{ stroke-dashoffset:140; opacity:0; }
  25%{ opacity:1; }
  100%{ stroke-dashoffset:0; opacity:0; }
}