/* ==========================================================================
   SAFE-FOREST v3 — tema da marca (verde-azeitona + vermelho-tijolo do logo)
   mobile-first, multi-página
   --------------------------------------------------------------------------
   ÍNDICE
   1. Design tokens (:root)          ← ajustar cores/espaçamentos AQUI
   2. Reset + base
   3. Utilitários (container, section, títulos, botões)
   4. Brand (logótipo)
   5. NAVBAR (+ link ativo)
   6. HERO (home, panorâmica) + HUD "online"
   7. PAGE-HEADER (páginas interiores)
   8. STATS
   9. HOW IT WORKS (solution)
   10. PRODUCTS (+ browser/phone frames)
   11. FEATURES (solution)
   12. FIELD RESULTS (grelha; deteções fixas na secção 28)
   13. FAQ (acordeão)
   14. CONTACT (cards + formulário + demo em destaque)
   15. PARTNERS
   16. CTA
   17. FOOTER
   18. Reveal + reduced motion
   19. (removida na v4 — modo de revisão só na v3)
   20. (removida — frase migrou para o How it works da Solution)
   21. USE CASES (home — locais de aplicação)
   22. EXPERIENCE (home — vídeo internacional)
   23. TEASER (home — ponte para a Solution)
   24. UNITS (solution — grelha de câmaras/equipamento)
   25. APP GALLERY (solution — dashboards + telemóveis)
   26. Ajustes de página (enquadramentos, demo, slogan)
   27. v3.1 — home compacta + secções combinadas
   28. v3.1 — solution: how+tecnologia · deteções fixas
   29. v3.2 — solution: hero "nuvem" (texto à esquerda + varrimento)
   30. v3.3 — solution: RESULTS pilha de deteções com hover
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS — paleta tirada do logótipo Safe-Forest:
      verde-azeitona #636b2f · vermelho-tijolo #8b3a3a · carvão quente
   ========================================================================== */
:root {
  /* ---- cor: fundos (claros, quentes) ---- */
  --bg-0: #f1f0e7;                          /* secções alternadas (pedra clara) */
  --bg-1: #faf9f3;                          /* base das páginas (branco quente) */
  --bg-2: #ffffff;                          /* cards / painéis */
  --dark: #262a1c;                          /* carvão-azeitona: FUNDO de footer, CTA, modal */
  --dark-2: #343a22;
  --heading: #2c2f22;                       /* cor de títulos/texto forte */

  /* ---- cor: texto ---- */
  --ink: #33362b;                           /* texto principal (carvão quente) */
  --ink-2: #5f6452;                         /* texto secundário */
  --ink-3: #8a8f7c;                         /* legendas ténues */

  /* ---- cor: marca ---- */
  --brand-rgb: 99, 107, 47;                 /* verde-azeitona em RGB (glows, grelhas, seleção) */
  --fire-rgb: 139, 58, 58;                  /* vermelho-tijolo em RGB */
  --brand: #636b2f;                         /* verde-azeitona primário (do logo) */
  --brand-strong: #4e5525;                  /* links / hover (mais escuro) */
  --brand-bright: #99a341;                  /* detalhes vivos (sobre fundos escuros) */
  --brand-dim: rgba(99, 107, 47, 0.12);     /* preenchimentos suaves */
  --fire: #8b3a3a;                          /* vermelho-tijolo "fogo" (CTA e alertas, do logo) */
  --fire-bright: #b3524a;

  /* ---- botão primário (usado por hero-tweaks) ---- */
  --cta-bg: #8b3a3a;                        /* fundo do botão */
  --cta-bg-2: #a5473f;                      /* topo do gradiente */
  --cta-fg: #ffffff;                        /* texto */

  /* ---- cor: linhas e vidro ---- */
  --line: rgba(70, 74, 48, 0.16);           /* contornos subtis */
  --line-strong: rgba(70, 74, 48, 0.30);
  --glass: rgba(250, 249, 243, 0.88);       /* navbar com blur */

  /* ---- tipografia ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, "Roboto Mono", monospace;
  --fs-hero: clamp(2.4rem, 6.4vw + 0.4rem, 4.6rem);
  --fs-h2: clamp(1.7rem, 3.2vw + 0.6rem, 2.7rem);
  --fs-h3: 1.22rem;
  --fs-body: 1rem;
  --fs-small: 0.92rem;
  --fs-mono: 0.8rem;

  /* ---- layout ---- */
  --container: 1180px;
  --pad-x: clamp(1.25rem, 4.5vw, 2.25rem);
  --space-section: clamp(4.5rem, 8.5vw, 7.25rem);
  --radius: 16px;
  --radius-sm: 10px;

  /* ---- efeitos ---- */
  --shadow-card: 0 10px 30px rgba(44, 47, 32, 0.08);
  --shadow-card-hover: 0 18px 44px rgba(44, 47, 32, 0.14);
  --shadow-fire: 0 10px 28px rgba(139, 58, 58, 0.30);

  /* ---- HERO ---- */
  --hero-veil-rgb: 250, 249, 243;           /* cor do véu do hero, em componentes RGB */
  --hero-pos: 50% 45%;                       /* enquadramento da imagem de fundo */
}

/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

a { color: var(--brand-strong); text-decoration: none; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(var(--brand-rgb), 0.28); }

.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 2000;
  padding: 0.6rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

@media (max-width: 520px) {
  .hide-xs { display: none; }
}

/* ==========================================================================
   3. UTILITÁRIOS
   ========================================================================== */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--space-section); }
.section--alt { background: var(--bg-0); }

.section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-strong);
  margin-bottom: 1rem;
}

.section__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 26ch;
}
.section__title em { font-style: normal; color: var(--brand-strong); }

.section__intro {
  margin-top: 1.1rem;
  max-width: 58ch;
  color: var(--ink-2);
  font-size: 1.05rem;
}

/* ---- botões ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.82em 1.55em;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn--fire {
  background: linear-gradient(160deg, var(--fire-bright), var(--fire));
  color: #fff;
  box-shadow: var(--shadow-fire);
}
.btn--fire:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(var(--fire-rgb), 0.42);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
}
.btn--ghost:hover {
  border-color: var(--brand-strong);
  color: var(--brand-strong);
  transform: translateY(-2px);
}

.btn--sm { padding: 0.55em 1.1em; font-size: 0.9rem; border-radius: 10px; }
.btn--lg { padding: 0.95em 2em; font-size: 1.08rem; }

/* ==========================================================================
   4. BRAND
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
}

/* logótipo em imagem (substitui o antigo SVG + wordmark).
   No topo o logo assenta transparente sobre o hero (sem placa).
   A placa clara aparece só onde o fundo é escuro: footer e navbar após scroll. */
.brand__logo {
  height: 46px;                      /* logo ampliado (~2×) */
  width: auto;
  display: block;
  background: transparent;
}
@media (min-width: 900px) {
  .brand__logo { height: 80px; }
}

/* slogan em texto ao lado do logo (home, solution, contact) — só no topo,
   sobre a foto. É texto (não faz parte do logo) para poder DESAPARECER quando
   a navbar fica branca ao fazer scroll. Mesmo estilo de letra do .hero__slogan:
   monospace, MAIÚSCULAS, muito espaçado. */
.brand__slogan { display: none; }
@media (min-width: 760px) {
  .brand__slogan {
    display: block;
    max-width: 15rem;
    margin-left: 0.2rem;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1.5;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.3s ease, max-width 0.35s ease,
                padding 0.3s ease, margin 0.3s ease, border-color 0.3s ease;
  }
  /* navbar branca (scroll) → o slogan desaparece e recolhe */
  .navbar.is-scrolled .brand__slogan {
    opacity: 0;
    max-width: 0;
    padding-left: 0;
    margin-left: 0;
    border-left-color: transparent;
  }
}
/* footer: usa o logótipo recolorido "para o fim da página" (logo-footer.png),
   que já traz o slogan em texto branco — assenta direto no fundo escuro,
   sem placa nem filtros. (O slogan não se repete em texto: vem na imagem.) */
.footer .brand__logo {
  height: 58px;
}
@media (min-width: 900px) {
  .footer .brand__logo { height: 74px; }
}

.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__corners { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; }
.brand__flame { fill: none; stroke: var(--fire); stroke-width: 2; stroke-linejoin: round; }
.brand__eye { fill: var(--brand-strong); }

.brand__word {
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: 0.05em;
  color: var(--heading);
}
.brand__word em { font-style: normal; color: var(--brand-strong); }
.brand__word sup { font-size: 0.5em; color: var(--ink-3); margin-left: 1px; }

/* footer: marca sobre fundo escuro */
.footer .brand__word { color: #f0efe4; }
.footer .brand__word em { color: var(--brand-bright); }

/* ==========================================================================
   5. NAVBAR
   ========================================================================== */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding-block: 0.8rem;                 /* banda mais alta + folga acima/abaixo do logo */
  background: transparent;               /* topo: sem banda — só o conteúdo sobre o hero */
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

/* ao fazer scroll, a banda (fundo com blur) reaparece */
.navbar.is-scrolled {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(44, 47, 32, 0.08);
}

/* menu móvel aberto: o backdrop-filter tem de sair — um filtro na navbar
   fá-la "containing block" do .navbar__nav (position: fixed), que deixaria
   de cobrir o ecrã e o menu ficava sem fundo após o scroll */
.navbar.is-nav-open,
.navbar.is-nav-open.is-scrolled {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: none;             /* sai já, sem animar o blur (evita salto do overlay) */
}

/* navbar transparente sobre a foto: halo claro para os links lerem
   (só no topo; ao scroll a banda branca dá o contraste e o halo sai) */
.navbar:not(.is-scrolled) .navbar__nav a:not(.btn) {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65), 0 0 8px rgba(255, 255, 255, 0.4);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
}

.navbar__nav {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.9rem;
  background: rgba(250, 249, 243, 0.98);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.navbar__nav.is-open { opacity: 1; visibility: visible; }

/* NAVBAR NEUTRA: só preto (ou branco sobre a foto, via hero-tweaks) —
   nada de verde-azeitona nesta banda */
.navbar__nav a:not(.btn) {
  color: #1a1a1a;
  font-size: 1.35rem;
  font-weight: 650;
}
.navbar__nav a:not(.btn):hover { color: #000000; }

/* página atual */
.navbar__nav a[aria-current="page"] {
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: #111111;
}

.navbar__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.navbar__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #1a1a1a;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.navbar__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__burger.is-open span:nth-child(2) { opacity: 0; }
.navbar__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* seletor de idioma EN/PT (ao lado de Home) */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 999px;
  overflow: hidden;
  line-height: 1;
}
.lang-switch__opt {
  font: 700 0.78rem/1 inherit;
  letter-spacing: 0.03em;
  padding: 5px 9px;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.lang-switch__opt:hover { opacity: 0.9; }
.lang-switch__opt.is-active { background: var(--fire); color: #fff; opacity: 1; }

@media (min-width: 900px) {
  .navbar__burger { display: none; }

  .navbar__nav {
    position: static;
    z-index: auto;
    flex-direction: row;
    gap: 1.9rem;
    background: none;
    opacity: 1;
    visibility: visible;
  }
  .navbar__nav a:not(.btn) {
    font-size: 0.95rem;
    font-weight: 550;
    color: #3f4142;
  }
  .navbar__nav a:not(.btn):hover { color: #111111; }
  .navbar__nav a[aria-current="page"] { color: #111111; }
}

/* ==========================================================================
   6. HERO (home) — panorâmica com a torre SafeForest
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;                            /* imagem preenche o ecrã todo; branco só ao fazer scroll */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg-0);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos);  /* enquadramento (cada tema ajusta) */
}

/* legibilidade: véu claro à esquerda + fusão com a página em baixo.
   Em mobile o texto cobre a foto toda → véu mais denso e uniforme. */
.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--hero-veil-rgb), 0.42) 0%, rgba(var(--hero-veil-rgb), 0.68) 55%, var(--bg-1) 100%);
}
@media (min-width: 760px) {
  .hero__shade {
    background:
      linear-gradient(90deg, rgba(var(--hero-veil-rgb), 0.92) 0%, rgba(var(--hero-veil-rgb), 0.55) 38%, rgba(var(--hero-veil-rgb), 0) 62%),
      linear-gradient(180deg, rgba(var(--hero-veil-rgb), 0) 55%, rgba(var(--hero-veil-rgb), 0.85) 88%, var(--bg-1) 100%);
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  padding-top: 7.5rem;
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
}

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  color: var(--heading);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.75);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  margin-bottom: 1.6rem;
  box-shadow: var(--shadow-card);
}
#hero-clock { font-variant-numeric: tabular-nums; }

.live-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #23b55b;
  box-shadow: 0 0 0 0 rgba(35, 181, 91, 0.5);
  animation: pulse-dot 2.2s ease-out infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(35, 181, 91, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(35, 181, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(35, 181, 91, 0); }
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 830;
  letter-spacing: -0.028em;
  line-height: 1.02;
  max-width: 14ch;
  color: var(--heading);
}
.hero__title-accent { color: var(--brand-strong); }

.hero__lead {
  margin-top: 1.4rem;
  max-width: 50ch;
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  color: var(--ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.1rem;
}

.hero__slogan {
  margin-top: 2.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- HUD "unidade online" apontada à torre --- */
.hero__hud {
  position: absolute;
  z-index: 1;
  left: var(--hud-x, 77%);
  top: var(--hud-y, 26%);
  transform: translate(-50%, -50%);
  display: none;
}

.hud-ring {
  width: 74px;
  height: 74px;
  margin-inline: auto;
  border: 2px solid var(--brand-bright);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 24px rgba(153, 163, 65, 0.55);
  animation: hud-breathe 3.2s ease-in-out infinite;
}
@keyframes hud-breathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.75; }
}

.hud-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--heading);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line-strong);
  padding: 0.34rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
}
.hud-label__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #23b55b;
}

@media (min-width: 860px) {
  .hero__hud { display: block; --hud-x: 77%; --hud-y: 27%; }
}
@media (min-width: 1400px) {
  .hero__hud { --hud-x: 76.5%; --hud-y: 28%; }
}

/* ==========================================================================
   7. PAGE-HEADER (Technology, FAQ, Contact)
   ========================================================================== */
.page-header {
  padding-top: clamp(7rem, 14vh, 9.5rem);
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
  background:
    radial-gradient(90% 120% at 85% -20%, rgba(var(--brand-rgb), 0.16), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  border-bottom: 1px solid var(--line);
}

.page-header__title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 830;
  letter-spacing: -0.025em;
  color: var(--heading);
}

.page-header__lead {
  margin-top: 1rem;
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 1.05rem;
}

/* ---- variante com fotografia de fundo (ex.: Technology) ---- */
.page-header--photo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: min(64vh, 520px);
  border-bottom: 0;
  background: var(--bg-1);
}
/* width:100% — como filho flex, sem isto o container encolhe para o
   conteúdo e o margin:auto centra-o fora do eixo (texto desalinhado) */
.page-header--photo .container { position: relative; z-index: 2; width: 100%; }

.page-header__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 76% 42%;
}

.page-header__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--hero-veil-rgb), 0.35) 0%, rgba(var(--hero-veil-rgb), 0.55) 55%, var(--bg-1) 100%);
}
@media (min-width: 760px) {
  .page-header__shade {
    background:
      linear-gradient(90deg, rgba(var(--hero-veil-rgb), 0.9) 0%, rgba(var(--hero-veil-rgb), 0.5) 42%, rgba(var(--hero-veil-rgb), 0.08) 72%),
      linear-gradient(180deg, rgba(var(--hero-veil-rgb), 0) 55%, rgba(var(--hero-veil-rgb), 0.7) 88%, var(--bg-1) 100%);
  }
}

/* ==========================================================================
   8. STATS
   ========================================================================== */
.stats { background: var(--bg-1); }

.stats__grid {
  display: grid;
  grid-template-columns: 1fr;              /* 3 números: empilhados em mobile */
  gap: 1.7rem 1.5rem;
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
  border-block: 1px solid var(--line);
}

.stat { text-align: center; }

.stat__num {
  display: block;
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  font-weight: 830;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}
.stat__label {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (min-width: 640px) {
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
  .stat + .stat { border-left: 1px solid var(--line); }
}

/* ==========================================================================
   9. HOW IT WORKS
   ========================================================================== */
.how__steps {
  display: grid;
  gap: 1.4rem;
  margin-top: 3rem;
}

.how-step {
  padding: 1.7rem 1.6rem 1.8rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.how-step__num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--brand-strong);
}
.how-step__num::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 0.7rem;
  background: linear-gradient(90deg, var(--brand), transparent);
}

.how-step__title {
  margin-top: 0.9rem;
  font-size: 1.35rem;
  font-weight: 750;
  color: var(--heading);
}

.how-step__text {
  margin-top: 0.65rem;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

@media (min-width: 900px) {
  .how__steps { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
}

/* ==========================================================================
   10. SOLUTIONS / PRODUCTS
   ========================================================================== */
.product {
  display: grid;
  gap: 2.2rem;
  align-items: center;
  margin-top: clamp(3rem, 7vw, 5rem);
}

.product__media--unit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 3.2rem);
  background:
    radial-gradient(85% 75% at 50% 42%, rgba(var(--brand-rgb), 0.14), transparent 70%),
    linear-gradient(rgba(var(--brand-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--brand-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff, var(--bg-0));
  background-size: auto, 42px 42px, 42px 42px, auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.product__media--unit img {
  position: relative;
  z-index: 2;                                  /* câmara acima do símbolo + vinheta */
  max-height: 320px;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 22px 30px rgba(40, 43, 28, 0.28));
}

/* R1: emblema Safe-Forest (só o círculo, sem colchetes) como selo, sempre no
   canto superior-direito — consistente em todas as imagens de tecnologia.
   Fica por cima da grelha e atrás da imagem. */
.product__media--unit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/logo-emblem.png") right 7% top 9% / auto 34% no-repeat;
  opacity: 0.16;                               /* afinar aqui a presença do emblema */
  pointer-events: none;
}
/* R1: vinheta azeitona nas bordas (também atrás da imagem) */
.product__media--unit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(118% 118% at 50% 48%,
              transparent 52%, rgba(var(--brand-rgb), 0.18) 100%);
  pointer-events: none;
}

.product__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  color: var(--brand-strong);
}

.product__name {
  margin-top: 0.7rem;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 790;
  letter-spacing: -0.015em;
  color: var(--heading);
}

.product__desc { margin-top: 0.85rem; color: var(--ink-2); }

/* 4·HOW: informação justificada (descrições + tópicos) */
.flow .product__desc,
.flow .product__list li { text-align: justify; hyphens: auto; }

.product__list {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.6rem;
}
.product__list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-2);
  font-size: var(--fs-small);
}
.product__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--brand);
  border-radius: 5px;
  background:
    linear-gradient(45deg, transparent 44%, var(--brand-strong) 45%, var(--brand-strong) 55%, transparent 56%) no-repeat center / 9px 9px,
    var(--brand-dim);
}

/* ponto do tópico = ícone SVG (substitui o quadrado ::before quando presente) */
.product__list li:has(.li-ic) { padding-left: 2rem; }
.product__list li:has(.li-ic)::before { display: none; }
.li-ic {
  position: absolute;
  left: 0;
  top: 0.08em;
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: var(--brand-strong);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Cloud SaaS: browser + telemóvel */
.product__media--saas { position: relative; padding-bottom: 3.5rem; }

.browser-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 54px rgba(44, 47, 32, 0.16);
}
.browser-frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--line);
}
.browser-frame__bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-3);
  opacity: 0.4;
}
.browser-frame__bar b {
  margin-left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.phone-frame {
  position: absolute;
  right: clamp(0.4rem, 3vw, 2rem);
  bottom: 0;
  width: clamp(96px, 24%, 150px);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px rgba(44, 47, 32, 0.22);
}

@media (min-width: 900px) {
  .product { grid-template-columns: repeat(2, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .product--reverse .product__media { order: 2; }
  .product--reverse .product__body  { order: 1; }
}

/* ==========================================================================
   11. FEATURES (Technology)
   ========================================================================== */
.features__grid {
  display: grid;
  gap: 1.1rem;
  margin-top: 3rem;
}

.card {
  padding: 1.55rem 1.45rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: var(--brand-dim);
  border: 1px solid var(--line);
  margin-bottom: 1.05rem;
}
.card__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--brand-strong);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card__title { font-size: var(--fs-h3); font-weight: 720; color: var(--heading); }
.card__text {
  margin-top: 0.55rem;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

@media (min-width: 640px)  { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features__grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }

/* ==========================================================================
   12. FIELD RESULTS — grelha (os cartões de deteção fixa estão na secção 28;
   a versão clicável com modal de inferência ficou arquivada na v2)
   ========================================================================== */
.results__grid {
  display: grid;
  gap: 1.6rem;
  margin-top: 3rem;
}
@media (min-width: 900px) {
  .results__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */
.faq__list {
  margin-top: 2.6rem;
  display: grid;
  gap: 0.9rem;
  max-width: 860px;
}

.faq-item {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-weight: 700;
  color: var(--heading);
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--brand-strong);
  font-weight: 600;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
  content: "–";
  transform: rotate(180deg);
}

.faq-item__body {
  padding: 0 1.25rem 1.2rem;
  color: var(--ink-2);
  font-size: var(--fs-small);
  max-width: 68ch;
}

/* ==========================================================================
   14. CONTACT
   ========================================================================== */
.contact__grid {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.6rem;
}
@media (min-width: 960px) {
  .contact__grid { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: start; }
}

/* texto de ligação (branco, sobre a foto) entre "Contact us" e os cartões */
.contact__lead {
  max-width: 52ch;
  margin: 0.9rem 0 clamp(1.2rem, 3vw, 1.8rem);
  color: #ffffff;
  font-size: clamp(1.12rem, 1.6vw, 1.28rem);          /* um pouco maior */
  font-weight: 600;
  line-height: 1.6;
  /* contraste reforçado sobre a foto: dupla sombra nítida + halo escuro largo */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 24px rgba(0, 0, 0, 0.55);
}

/* entrada sequenciada dos 2 blocos (3·CONTACT e 4·FORM); a ORDEM é definida
   no main.js conforme o link de origem (contact-us vs demo) */
.contact-anim {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.contact-anim.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .contact-anim { opacity: 1; transform: none; transition: none; }
}

.contact__cards {
  display: grid;
  gap: 0.9rem;
}
@media (min-width: 560px) {
  .contact__cards { grid-template-columns: repeat(2, 1fr); }
}

.contact-card {
  padding: 1.3rem 1.25rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.contact-card svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--brand-strong);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 0.7rem;
}
.contact-card h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact-card p { margin-top: 0.35rem; font-weight: 650; color: var(--heading); }
.contact-card a { color: var(--heading); }
.contact-card a:hover { color: var(--brand-strong); }
.contact-card small { display: block; margin-top: 0.15rem; color: var(--ink-2); font-weight: 400; }

/* formulário */
.contact-form {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.contact-form h2 { font-size: 1.35rem; font-weight: 780; color: var(--heading); }
.contact-form > p { margin-top: 0.5rem; color: var(--ink-2); font-size: var(--fs-small); }

.form-field { margin-top: 1.1rem; }
.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.4rem;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 0;
  border-color: transparent;
}
.form-field textarea { min-height: 130px; resize: vertical; }

.contact-form .btn { margin-top: 1.4rem; width: 100%; }
.contact-form__note {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--ink-3);
  text-align: center;
}

/* ==========================================================================
   15. PARTNERS
   ========================================================================== */
.partners__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  margin-top: 2.8rem;
}

.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  padding: 1.1rem 1.3rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.chip img {
  max-height: 42px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.chip--dark { background: #0d0d0d; border-color: rgba(0, 0, 0, 0.4); }
.chip--dark img { max-height: 58px; }

@media (min-width: 900px) { .partners__grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }

/* ==========================================================================
   16. CTA
   ========================================================================== */
.cta__panel {
  position: relative;
  text-align: center;
  padding: clamp(2.6rem, 7vw, 4.6rem) clamp(1.4rem, 5vw, 4rem);
  border-radius: 22px;
  color: #f0efe4;
  background:
    radial-gradient(120% 170% at 85% 0%, rgba(var(--fire-rgb), 0.22), transparent 55%),
    radial-gradient(110% 150% at 10% 100%, rgba(var(--brand-rgb), 0.30), transparent 60%),
    linear-gradient(180deg, var(--dark-2), var(--dark));
  box-shadow: 0 26px 60px rgba(24, 26, 16, 0.40);
  overflow: hidden;
}

.cta__title {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.cta__text {
  margin: 1.1rem auto 0;
  max-width: 46ch;
  color: rgba(240, 239, 228, 0.85);
  font-size: 1.04rem;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2rem;
}
.cta__actions .btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.cta__actions .btn--ghost:hover {
  border-color: var(--brand-bright);
  color: var(--brand-bright);
}

/* ==========================================================================
   17. FOOTER (azul-marinho)
   ========================================================================== */
.footer {
  margin-top: var(--space-section);
  background: var(--dark);
  color: #cfd2bd;
}

.footer__inner {
  display: grid;
  gap: 2.4rem;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.6rem;
}

.footer .brand__corners { stroke: var(--brand-bright); }

.footer__tag {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(207, 210, 189, 0.55);
  max-width: 30ch;
}

.footer__leitek {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1.4rem;
}
.footer__by {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(207, 210, 189, 0.55);
}
.footer__leitek img {
  height: 80px;
  width: auto;
}

.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(207, 210, 189, 0.55);
  margin-bottom: 1rem;
}
.footer__col p { margin-bottom: 0.55rem; }
.footer__col a { color: #cfd2bd; }
.footer__col a:hover { color: var(--brand-bright); }

.footer__bar {
  border-top: 1px solid rgba(207, 210, 189, 0.22);
  padding-block: 1.3rem;
}
.footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(207, 210, 189, 0.6);
}

@media (min-width: 900px) {
  .footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; }
}

/* ==========================================================================
   18. REVEAL + REDUCED MOTION
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

.features__grid .reveal:nth-child(2), .results__grid .reveal:nth-child(2),
.how__steps .reveal:nth-child(2), .contact__cards .reveal:nth-child(2) { transition-delay: 0.08s; }
.features__grid .reveal:nth-child(3), .results__grid .reveal:nth-child(3),
.how__steps .reveal:nth-child(3), .contact__cards .reveal:nth-child(3) { transition-delay: 0.16s; }
.features__grid .reveal:nth-child(4), .contact__cards .reveal:nth-child(4) { transition-delay: 0.24s; }
.features__grid .reveal:nth-child(5) { transition-delay: 0.32s; }
.features__grid .reveal:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .live-dot, .hud-ring, .inf-status__dot, .inf-scan::before { animation: none; }
  .inf-box { transition: none; }
  .btn, .card, .chip, .det-card { transition: none; }
}

/* ==========================================================================
   19. (removida na v4 — o modo de revisão ficou só na v3)
   ========================================================================== */

/* ==========================================================================
   20. (removida na v3.2 — a frase "it has to be early" passou para o título
   da secção "How it works" da página Solution)
   ========================================================================== */

/* ==========================================================================
   21. USE CASES (home) — onde se aplica: 4 cartões
   (os cartões reutilizam .card / .card__icon / .card__title / .card__text)
   ========================================================================== */
.uses__grid {
  display: grid;
  gap: 1.1rem;
  margin-top: 3rem;
}
@media (min-width: 640px)  { .uses__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .uses__grid { grid-template-columns: repeat(4, 1fr); gap: 1.3rem; } }

/* ==========================================================================
   22. EXPERIENCE (home) — vídeo da experiência internacional
   ========================================================================== */
.experience__places {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.6rem;
}

.place-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.place-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.video-frame {
  position: relative;                  /* âncora para a tampa do QR */
  margin-top: 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #101208;
  box-shadow: 0 26px 60px rgba(24, 26, 16, 0.26);
}
.video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #101208;
  pointer-events: none;                /* vídeo decorativo: sem clique, sem menu de contexto */
}
/* tampa do QR: quadrado preto com o emblema (sem texto) centrado.
   posição/tamanho vêm das vars --qr-x/--qr-y/--qr-size (inline no HTML). */
.video-cover {
  position: absolute;
  left: var(--qr-x, 1.4%);
  top: var(--qr-y, 1.7%);
  width: var(--qr-size, 11.5%);
  aspect-ratio: 1 / 1;
  background: #fff center / 84% auto no-repeat url("../img/logo-square.png");
  pointer-events: none;
}

/* ==========================================================================
   23. TEASER (home) — ponte para a página Solution
   ========================================================================== */
.teaser__panel {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.8rem, 4.5vw, 3.2rem);
  background:
    radial-gradient(120% 160% at 90% -10%, rgba(var(--brand-rgb), 0.16), transparent 55%),
    linear-gradient(rgba(var(--brand-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--brand-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff, var(--bg-0));
  background-size: auto, 42px 42px, 42px 42px, auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
@media (min-width: 900px) {
  .teaser__panel { grid-template-columns: 1.05fr 0.95fr; }
}

.teaser__media { display: flex; justify-content: center; }
.teaser__media img {
  max-height: 300px;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 22px 30px rgba(40, 43, 28, 0.28));
}

.teaser__title {
  margin-top: 0.6rem;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.teaser__text { margin-top: 0.85rem; color: var(--ink-2); max-width: 48ch; }
.teaser__actions { margin-top: 1.6rem; }

/* ==========================================================================
   24. UNITS (solution) — grelha de câmaras de monitorização + edge
   ========================================================================== */
.units__grid {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.8rem;
}
@media (min-width: 760px) { .units__grid { grid-template-columns: repeat(3, 1fr); } }

.unit-card {
  padding: 1.5rem 1.4rem 1.6rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.unit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }

.unit-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 185px;
  margin-bottom: 1.2rem;
  background: radial-gradient(80% 72% at 50% 45%, rgba(var(--brand-rgb), 0.10), transparent 72%);
}
.unit-card__media img {
  max-height: 168px;
  max-width: 100%;
  width: auto;
  filter: drop-shadow(0 14px 20px rgba(40, 43, 28, 0.22));
}

.unit-card__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  color: var(--brand-strong);
}
.unit-card__name { margin-top: 0.5rem; font-size: 1.12rem; font-weight: 760; color: var(--heading); }
.unit-card__text { margin-top: 0.5rem; color: var(--ink-2); font-size: var(--fs-small); }

/* ==========================================================================
   25. APP GALLERY (solution) — 2 dashboards web + 2 ecrãs de telemóvel
   ========================================================================== */
.app-gallery {
  display: grid;
  gap: 3rem 1.8rem;
  margin-top: 3rem;
}
@media (min-width: 900px) { .app-gallery { grid-template-columns: repeat(2, 1fr); } }

.app-shot { position: relative; padding-bottom: 2.4rem; }

/* telemóvel sobreposto ao canto inferior direito do browser */
.app-shot .phone-frame {
  right: clamp(0.4rem, 2.5vw, 1.2rem);
  bottom: 0;
  width: clamp(88px, 20%, 118px);
}

.app-shot__cap {
  margin-top: 0.95rem;
  padding-right: clamp(104px, 26%, 148px);   /* espaço para o telemóvel */
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   26. AJUSTES DE PÁGINA — enquadramentos + demo em destaque + hero slogan
   ========================================================================== */
/* enquadramento das fotos de cabeçalho (Solution / Contact) */
.page-header__bg--tower   { object-position: 60% 58%; }
.page-header__bg--cascais { object-position: 50% 40%; }

/* ---- Contact: foto em fundo de altura total, com painéis sobrepostos ---- */
.page-header--contact .page-header__title {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* a secção cresce com o conteúdo; a foto (position:absolute, inset:0) cobre
   toda a altura, ficando por trás dos cartões e do formulário */
.page-header--full {
  align-items: stretch;
  min-height: 0;
  /* título à mesma altura dos hero das outras páginas (livre da navbar) */
  padding-top: clamp(7.5rem, 14vh, 9.5rem);
  padding-bottom: clamp(2.6rem, 6vw, 4.5rem);
}
.page-header--full .container { align-self: stretch; }

/* os cartões e o formulário flutuam sobre a foto */
.page-header--full .contact__grid { margin-top: clamp(1.6rem, 4vw, 2.6rem); }
/* título dentro da coluna esquerda: topo alinhado com o topo do formulário */
.page-header--full .contact__grid .page-header__title { margin: 0 0 clamp(1.4rem, 3vw, 2rem); }

/* varrimento pendular da foto — mesma receita do hero da home */
.page-header--contact .page-header__bg {
  transform: scale(1.14) translateY(2%);
  animation: header-sweep 8s ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .page-header--contact .page-header__bg {
    animation: none;
    transform: none;
  }
}

/* slogan por cima do título do hero (home) */
.hero__slogan--top { margin: 0 0 1.2rem; }

/* formulário "Request a demo" em destaque (contact) */
.contact-form { scroll-margin-top: 96px; }

.contact-form--demo {
  position: relative;
  border: 2px solid rgba(var(--fire-rgb), 0.5);
  box-shadow: 0 18px 44px rgba(var(--fire-rgb), 0.14);
}

.contact-form__badge {
  position: absolute;
  top: -13px;
  left: clamp(1.2rem, 4vw, 2rem);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(160deg, var(--cta-bg-2), var(--cta-bg));
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(var(--fire-rgb), 0.35);
}

/* ==========================================================================
   27. v3.1 — HOME COMPACTA + SECÇÕES COMBINADAS
   ========================================================================== */

/* home mais compacta: menos respiro vertical entre secções (só na home) */
.page-home .section { padding-block: clamp(3.2rem, 6.5vw, 5rem); }

/* gap stats↔teaser a metade: mantém o gap dos stats (padding-bottom),
   zera o topo do teaser */
.page-home .teaser { padding-top: 0; }

/* ---- STATS + USES na mesma secção ---- */
.stats-uses .stats__grid { padding-block: clamp(1.6rem, 4vw, 2.4rem); margin-top: clamp(2.6rem, 6vw, 3.6rem); }
.stats-uses__head { margin-top: 0; }
.stats-uses .uses__grid { margin-top: 2.2rem; }

/* sub-eyebrow: segundo bloco dentro da mesma secção */
.section__sub { margin: clamp(2.8rem, 6vw, 3.8rem) 0 1rem; }

/* ---- EXPERIENCE em 2 colunas (texto | vídeo); parceiros vêm PRIMEIRO ---- */
.exp-cols {
  display: grid;
  gap: 1.8rem;
  margin-top: clamp(2.8rem, 6vw, 3.8rem);   /* espaçamento que estava no título */
}
@media (min-width: 900px) {
  .exp-cols { grid-template-columns: 1fr 1fr; align-items: start; gap: 2.8rem; }
}
.exp-cols .video-frame { margin-top: 0; }
.exp-cols .experience__places { margin-top: 1.3rem; }

.exp-cols__title {
  margin: 0 0 0.6rem;                        /* topo do título = topo do vídeo */
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.exp-cols__lead {
  color: var(--ink-2);
  font-size: 1.02rem;
  max-width: 48ch;
}

.exp-partners { margin-top: 1.8rem; }
.exp-partners .partners__grid { margin-top: 0; }

/* ---- CTA em 2 colunas: texto | fotografia emoldurada (não colados) ---- */
.cta-cols {
  display: grid;
  gap: 1.8rem;
  margin-top: 0;
}
@media (min-width: 900px) {
  .cta-cols { grid-template-columns: 1fr 1fr; align-items: center; gap: 2.8rem; }
}

/* Variante box escura (mesmo estilo do CTA da Solution): imagem | texto */
.cta__panel--split {
  text-align: left;
  align-items: center;
  padding: clamp(1.6rem, 4vw, 3rem);
  gap: 1.8rem;
}
@media (min-width: 900px) {
  .cta__panel--split { gap: 3rem; }
}
.cta__panel--split .section__eyebrow { color: var(--brand-bright); }
.cta__panel--split .section__title  { color: #fff; }
.cta__panel--split .section__intro  { color: rgba(240, 239, 228, 0.85); }

.photo-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #101208;
  box-shadow: 0 26px 60px rgba(24, 26, 16, 0.26);
}
.photo-frame img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 40% 62%;          /* chamas na vista */
}
/* CTA da Solution: imagem panorâmica da câmara — manter a câmara (lado direito) no enquadramento */
.photo-frame--camera img { aspect-ratio: 16 / 11; object-position: 68% 45%; }

/* ==========================================================================
   28. v3.1 — SOLUTION: HOW+TECNOLOGIA juntos · deteções fixas
   ========================================================================== */

/* media de produto com DUAS imagens lado a lado (ex.: Axis + Bosch) */
.product__media--duo img { max-width: 46%; max-height: 250px; }
.product__media--duo { gap: 1.2rem; }

/* fluxo pano-style: menos espaço entre linhas alternadas dentro da secção */
.flow .product { margin-top: clamp(2.8rem, 6vw, 4.5rem); }

/* reduz o gap branco acima do HOW (só deste lado; o padding-bottom da intro fica) */
.flow { padding-top: clamp(1rem, 2.5vw, 2rem); }

/* v3.x — SOLUTION: intro de duas colunas (texto à esquerda · título à direita)
   o título sobe para dentro da base do header (névoa clara); o texto fica no
   branco por baixo, com ar (padding-bottom) antes do 4·HOW */
.solution-intro {
  position: relative;
  z-index: 4;                                  /* o título pode subir por cima do rebordo do header */
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
  padding-bottom: clamp(4.5rem, 10vw, 8rem);   /* espaço branco entre o texto e o 4·HOW */
}

.solution-intro__grid { position: relative; }

.solution-intro__title { max-width: none; }

.solution-intro__text {
  color: var(--ink-2);
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 68ch;
  text-align: justify;
  hyphens: auto;
}
.solution-intro__text p { margin: 0; }
.solution-intro__text strong { color: var(--heading); font-weight: 700; }

@media (min-width: 760px) {
  /* título ancorado ao canto sup. direito, subindo para dentro do header
     (afinar a subida no top: maior nº → mais alto) */
  .solution-intro__title {
    position: absolute;
    right: var(--pad-x);                       /* alinha com a borda direita do texto (dentro do padding) */
    top: calc(-1 * clamp(3rem, 7vw, 6.5rem));
    margin: 0;
    text-align: right;
    text-shadow: 0 1px 10px rgba(250, 249, 243, 0.85);   /* halo suave p/ legibilidade sobre a névoa */
  }
  /* o texto ocupa a largura toda (as duas colunas) — o título já não reserva coluna */
  .solution-intro__text { max-width: none; }
}

/* deteções fixas: imagem + bounding box estática (sem clique, sem modal) */
.det-fig {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.det-fig__media { position: relative; }
.det-fig__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.det-fig__box {
  position: absolute;
  left: var(--box-x, 50%);
  top: var(--box-y, 50%);
  width: var(--box-w, 13%);
  height: var(--box-h, auto);          /* se --box-h não for dado, usa o aspect-ratio */
  aspect-ratio: 1 / 0.82;
  transform: translate(-50%, -50%);
  border: 1px solid #ffd24a;                 /* amarelo de deteção (linha fina) */
  border-radius: 0;                          /* retângulo de ângulos retos */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 16px rgba(255, 210, 74, 0.45);
  pointer-events: none;
}

.det-fig__tag {
  position: absolute;
  left: -2px;
  bottom: calc(100% + 8px);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #f2d7cd;
  background: rgba(20, 10, 4, 0.85);
  border: 1px solid rgba(179, 82, 74, 0.7);
  padding: 0.26rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
}
.det-fig__tag b { color: #fff; font-weight: 650; }

.det-fig__body { padding: 0.95rem 1.1rem 1.1rem; }
.det-fig__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--brand-strong);
}
.det-fig__note {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

/* ==========================================================================
   29. v3.2 — SOLUTION: hero "nuvem" (page-header--clouds)
   · texto (título+subtítulo) à esquerda, alinhado como na home (--home-shift)
   · varrimento pendular da fotografia igual ao hero principal
   · base da imagem dissolve-se num rebordo de nuvem NÃO uniforme
   ========================================================================== */

/* alinhamento igual à home: logo da navbar + texto do header no mesmo eixo,
   puxados para a borda esquerda (mesma fórmula do hero-tweaks) */
.page-solution {
  --home-shift: clamp(0.5rem, calc((100vw - 1180px) / 2 - 0.75rem), 4.2rem);
}
.page-solution .navbar .brand,
.page-solution .page-header--clouds .container {
  transform: translateX(calc(-1 * var(--home-shift)));
}

/* contact: alinha o logo da navbar na mesma posição das outras páginas */
.page-contact {
  --home-shift: clamp(0.5rem, calc((100vw - 1180px) / 2 - 0.75rem), 4.2rem);
}
.page-contact .navbar .brand {
  transform: translateX(calc(-1 * var(--home-shift)));
}

/* ==========================================================================
   LOGIN — página simples de manutenção (sem foto de fundo)
   ========================================================================== */
.page-login {
  --home-shift: clamp(0.5rem, calc((100vw - 1180px) / 2 - 0.75rem), 4.2rem);
}
.page-login .navbar .brand {
  transform: translateX(calc(-1 * var(--home-shift)));
}
/* não há foto: navbar leva sempre banda, e o slogan fica em tom escuro */
.page-login .navbar {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.page-login .brand__slogan {
  color: var(--ink-3);
  text-shadow: none;
  border-left-color: var(--line-strong);
}

.login-status {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 7rem 3rem;                /* topo livre para a navbar fixa */
}
.login-status__inner {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.login-status__icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: var(--brand-dim);
  border: 1px solid var(--line);
}
.login-status__icon svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: var(--brand-strong);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-status__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fire);
  margin-bottom: 0.8rem;
}
.login-status__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.login-status__text {
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: 1.08rem;
  line-height: 1.6;
}
.login-status__actions {
  margin-top: 2.2rem;
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* bloco de texto: sai do fundo e centra na vertical (como o hero da home) */
.page-header--clouds {
  align-items: center;
  min-height: min(72vh, 600px);
}
/* DESKTOP: a altura do cabeçalho segue o rácio da própria foto (2400×944),
   por isso a imagem aparece INTEIRA na vertical (todos os pixels), sem corte.
   No telemóvel mantém-se a min-height acima (senão ficaria baixo demais). */
@media (min-width: 760px) {
  .page-header--clouds {
    min-height: 0;
    aspect-ratio: 2400 / 944;
  }
}
.page-header--clouds .container {
  z-index: 3;                               /* acima do rebordo de nuvem */
  padding-top: clamp(7.5rem, 14vh, 9.5rem); /* empurra o bloco para baixo (como na home) */
  padding-bottom: clamp(3rem, 7vw, 4.5rem);
}

/* título/subtítulo: BRANCO como o hero da home — mesma letra e as mesmas
   sombras escuras suaves do hero-tweaks (para ler sobre a fotografia) */
.page-header--clouds .section__eyebrow {
  color: rgba(255, 255, 255, 0.8);
}
.page-header--clouds .page-header__title {
  max-width: 16ch;
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}
.page-header--clouds .page-header__title em {
  font-style: normal;
  color: inherit;
}
.page-header--clouds .page-header__lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  margin-top: 1.4rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* SEM véu lateral nem superior: a única opacidade sobre a foto é o
   nevoeiro de baixo (::after) + este "selo" fino na base — os últimos ~8%
   ficam garantidamente opacos para o fim da imagem nunca aparecer
   (nota-se sobretudo na metade esquerda, onde a linha do nevoeiro é baixa) */
.page-header--clouds .page-header__shade {
  background: linear-gradient(180deg,
    rgba(250, 249, 243, 0) 78%,
    rgba(250, 249, 243, 0.55) 88%,
    rgba(250, 249, 243, 0.92) 95%,
    #faf9f3 99%);
}
/* sem halos nem nuvem de contraste: texto preto liso direto na fotografia */

/* MÁSCARA DE NEVOEIRO — versão simples (desenho do utilizador):
   O nevoeiro é UM fade uniforme (opaco em baixo → nada em cima, como no
   contact us), RECORTADO por uma máscara SVG com UMA linha ondulada
   contínua: baixa e suave à esquerda/meio, sobe à direita numa crista
   grande, vale, segunda crista e desce para o canto. O feGaussianBlur do
   SVG enevoa o rebordo (nada de recortes duros).
   → Para mudar a FORMA da linha: editar os pontos do path d='…'
     (viewBox 1300×520: x=0 esquerda, x=1300 direita; y=0 topo, y=520 base).
   → Para mudar a DENSIDADE do nevoeiro: os rgba() do linear-gradient.
   → Para mais/menos esbatimento do rebordo: stdDeviation do blur. */
.page-header--clouds::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* cor sólida da página: a DENSIDADE do nevoeiro é igual em toda a linha;
     o esbatimento vem só do blur da máscara (perpendicular à linha),
     por isso a crista da direita fica tão densa como a faixa da esquerda */
  background: #faf9f3;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 520' preserveAspectRatio='none'><defs><filter id='b' x='-12%' y='-45%' width='124%' height='190%'><feGaussianBlur stdDeviation='22'/></filter></defs><path filter='url(%23b)' fill='white' d='M-30,465 C40,477 100,487 170,492 C240,496 300,493 370,489 C440,485 510,479 580,472 C650,465 720,457 790,448 C860,438 930,427 1000,413 C1070,397 1150,377 1230,354 C1270,336 1300,324 1360,300 L1360,600 L-30,600 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 520' preserveAspectRatio='none'><defs><filter id='b' x='-12%' y='-45%' width='124%' height='190%'><feGaussianBlur stdDeviation='22'/></filter></defs><path filter='url(%23b)' fill='white' d='M-30,465 C40,477 100,487 170,492 C240,496 300,493 370,489 C440,485 510,479 580,472 C650,465 720,457 790,448 C860,438 930,427 1000,413 C1070,397 1150,377 1230,354 C1270,336 1300,324 1360,300 L1360,600 L-30,600 Z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* varrimento pendular da fotografia — mesma receita do hero da home
   (transform acelerado por GPU, amplitude pequena, ease-in-out alternado) */
.page-header--clouds .page-header__bg {
  object-position: 50% 50%;                /* foto centrada — sem corte vertical */
  transform: scale(1);                     /* sem zoom → foto inteira na vertical */
  animation: header-sweep 9s ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
}
/* varrimento subtil só por escala (nunca desloca na vertical, para não cortar) */
@keyframes header-sweep {
  from { transform: scale(1); }
  to   { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .page-header--clouds .page-header__bg {
    animation: none;
    transform: none;
    object-position: 60% 40%;
  }
}

/* ==========================================================================
   30. v3.3 — RESULTS: pilha de deteções com hover
   3 imagens sobrepostas; há SEMPRE uma selecionada: por defeito a do meio,
   ou a que estiver debaixo do rato. A selecionada cresce e fica por cima;
   as outras encolhem por trás (os 3 casos do esboço do utilizador).
   Afinações: escala grande (1.16) / pequena (0.94) · sobreposição
   (margin-inline negativa) · velocidade (transition).
   ========================================================================== */
.det-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  padding-block: 4.6rem;               /* espaço para a selecionada crescer */
}

.det-item {
  position: relative;
  width: 26%;                          /* 5 frames em leque */
  margin-inline: -4%;                  /* sobreposição entre vizinhas */
  z-index: 1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transform: scale(0.94);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;
}

.det-item img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

/* só em desktop (≥760px): a seleção que cresce. No telemóvel estas regras
   não podem existir — o toque dispara :hover e a frame tocada crescia 1.5×
   por cima da vizinha dentro do carrossel (tapava a imagem do meio). */
@media (min-width: 760px) {
  /* sem hover na pilha: a do MEIO é a selecionada (5 frames → 3.ª) */
  .det-stage:not(:hover) .det-item:nth-child(3) {
    transform: scale(1.5);
    z-index: 3;
    box-shadow: var(--shadow-card-hover);
  }

  /* com o rato em cima: essa passa a ser a selecionada */
  .det-stage .det-item:hover {
    transform: scale(1.5);
    z-index: 3;
    box-shadow: var(--shadow-card-hover);
  }
}

/* mobile (sem rato): carrossel horizontal — deslizar com o dedo, uma deteção
   de cada vez (scroll-snap). Mostra um resto da próxima frame para se perceber
   que desliza. */
@media (max-width: 759px) {
  .det-stage {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.85rem;
    padding-block: 0.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;                 /* Firefox: esconde a barra */
  }
  .det-stage::-webkit-scrollbar { display: none; }   /* WebKit: esconde a barra */

  .det-stage .det-item,
  .det-stage:not(:hover) .det-item:nth-child(3) {
    flex: 0 0 88%;
    width: 88%;
    margin-inline: 0;
    transform: none;
    z-index: auto;
    box-shadow: var(--shadow-card);
    scroll-snap-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .det-item { transition: none; }
}