/* ==========================================================================
   FR COMEX — Landing Page
   Aesthetic: "Comex Dossier / Motorsport" — dark premium base,
   dual red+blue accent system, condensed display type + technical mono.
   ========================================================================== */

:root {
  --ink:      #070A11;
  --ink-2:    #0C111C;
  --ink-3:    #121A2A;
  --paper:    #ECEFF6;
  --paper-2:  #FFFFFF;

  --blue:     #1F7CE6;
  --blue-br:  #3D9BFF;
  --blue-dp:  #0A2E6E;
  --red:      #E01623;   /* vermelho da marca — de volta como acento secundário (~30%) */
  --red-br:   #FF3A44;
  --chrome:   #EAF0FA;
  --steel:    #8A98AE;

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
}

* { -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--chrome);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* film grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--red); color: #fff; }

/* scroll progress (speedometer) */
#progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--red), var(--blue-br));
  z-index: 80;
  transition: width .1s linear;
}

/* ==========================================================================
   SECTION THEMING — components read these vars so light/dark just works
   ========================================================================== */
.sec {
  --fg:     var(--chrome);
  --muted:  var(--steel);
  --panel:  var(--ink-2);
  --panel-2:var(--ink-3);
  --border: rgba(255,255,255,.10);
  --bg:     var(--ink);
  position: relative;
  background: var(--bg);
  color: var(--fg);
}
.sec--paper {
  --fg:     #0A1120;
  --muted:  #56617A;
  --panel:  #FFFFFF;
  --panel-2:#F3F6FC;
  --border: rgba(10,20,45,.12);
  --bg:     var(--paper);
}
.sec--ink2 { --bg: var(--ink-2); }

/* thin red+blue rule that separates dark sections */
.sec + .sec:not(.sec--paper)::before,
.sec--paper + .sec::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red) 0 22%, transparent 22% 78%, var(--blue) 78% 100%);
  opacity: .8;
}

.wrap { max-width: 1220px; margin: 0 auto; padding-inline: 22px; }
@media (min-width: 1024px){ .wrap { padding-inline: 40px; } }

/* ==========================================================================
   TYPOGRAPHY HELPERS
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--blue));
}
.eyebrow .idx { color: var(--blue); font-weight: 600; }

.h-display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1.12; letter-spacing: .01em; }
.h-xl { font-size: clamp(2.5rem, 6.4vw, 5.4rem); }
.h-lg { font-size: clamp(2rem, 4.6vw, 3.7rem); }
.h-md { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.hl   { color: var(--blue-br); }  /* títulos sem vermelho — só azul */
.hl-b { color: var(--blue-br); }
.lead { color: var(--muted); font-size: 1.075rem; line-height: 1.7; }

/* ==========================================================================
   HEADER
   ========================================================================== */
#header {
  position: fixed;
  top: 0; inset-inline: 0;
  z-index: 60;
  transition: background .4s ease, border-color .4s ease, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
  color: var(--chrome);
}
#header.is-scrolled {
  background: rgba(7,10,17,.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgba(255,255,255,.10);
}
#header .wrap { max-width: 1460px; }   /* header mais largo — mais respiro entre logo, menu e CTA */
#header .bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 96px; }
#header .logo { height: 54px; width: auto; }

#header .nav-link {
  position: relative;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  font-weight: 500;
  color: rgba(234,240,250,.72);
  transition: color .25s ease;
}
#header .nav-link:hover { color: #fff; }
#header .nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -8px;
  width: 0; height: 2px;
  background: var(--red);
  transition: width .3s ease;
}
#header .nav-link:hover::after,
#header .nav-link.is-active::after { width: 100%; }
#header .nav-link.is-active { color: #fff; }

#navToggle .bar { background: #fff; }

/* mobile overlay */
.mobile-menu {
  display: none; opacity: 0;
  position: fixed; inset: 0;
  background: rgba(7,10,17,.97);
  backdrop-filter: blur(6px);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem; z-index: 55;
  transition: opacity .3s ease;
}
.mobile-menu.is-open { display: flex; opacity: 1; }
.mobile-link {
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: 1.05rem; color: #fff; font-weight: 500;
}
.mobile-link:hover { color: var(--red-br); }
#navToggle.is-open .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
#navToggle.is-open .bar:nth-child(2){ opacity: 0; }
#navToggle.is-open .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
body.no-scroll { overflow: hidden; }

/* ==========================================================================
   BUTTONS — sharp, automotive, sweep on hover
   ========================================================================== */
.btn {
  --b: var(--blue);
  position: relative;
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; font-size: .78rem;
  color: #fff;
  background: var(--b);
  padding: 1.05rem 1.7rem;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.18);
  transform: translateX(-102%) skewX(-14deg);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.btn:hover::before { transform: translateX(0) skewX(-14deg); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.4); }
.btn .arw { transition: transform .3s ease; }
.btn:hover .arw { transform: translateX(4px); }
.btn--red   { --b: var(--red); }   /* CTAs voltam ao vermelho da marca (títulos seguem azuis) */
.btn--green { --b: #1FBE5A; }
.btn--wa    { --b: var(--blue); }   /* WhatsApp na cor da marca (azul) — menos verde */
.btn--light { --b: #fff; color: var(--ink); }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
}
.btn--ghost::before { background: rgba(31,124,230,.16); }
.btn--ghost:hover { border-color: var(--blue-br); color: #fff; }

/* ==========================================================================
   PANELS / CARDS
   ========================================================================== */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.panel::after {
  content: "";
  position: absolute; left: 0; top: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--red), var(--blue-br));
  transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.panel:hover {
  transform: translateY(-7px);
  border-color: rgba(31,124,230,.45);
  box-shadow: 0 24px 54px rgba(0,0,0,.4);
}
.panel:hover::after { width: 100%; }

.ico {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: linear-gradient(150deg, rgba(31,124,230,.16), rgba(31,124,230,.12));
  border: 1px solid var(--border);
  color: var(--blue-br);
}
.card-title { font-family: var(--font-body); font-weight: 700; }

/* mini-ícone (line) dos cards de tipos de veículo */
.tico { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); transition: border-color .3s ease, background .3s ease; }
.panel:hover .tico { border-color: rgba(31,124,230,.4); background: rgba(31,124,230,.08); }

/* stat/spec chips */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: .06em; font-size: .74rem; font-weight: 500;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: .55rem 1rem;
  background: var(--panel);
}
.chip::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--blue); }
.chip.red::before { background: var(--red); }

/* checklist */
.check li { display: flex; align-items: flex-start; gap: .7rem; }
.check li::before {
  content: "";
  margin-top: .5rem; flex: 0 0 auto;
  width: 8px; height: 8px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--red), var(--blue));
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { min-height: 100svh; display: flex; align-items: center; padding: 130px 0 70px; overflow: hidden; }
.hero .wrap { width: 100%; }  /* evita que o container encolha como item flex e desalinhe do logo/menu */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__photo {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 58%;
  background: url("../img/hero-navio.jpg") center/cover no-repeat;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 6% 100%);
  filter: contrast(1.05) brightness(.62) saturate(1.05);
}
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--ink) 0%, rgba(7,10,17,.75) 34%, rgba(31,124,230,.32) 78%, rgba(31,124,230,.28) 100%);
  mix-blend-mode: multiply;
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 80% 15%, rgba(31,124,230,.20), transparent 55%),
    radial-gradient(80% 70% at 12% 90%, rgba(31,124,230,.16), transparent 60%),
    linear-gradient(90deg, var(--ink) 30%, transparent 92%);
}
.hero__streak {
  position: absolute; z-index: 1; top: -10%; right: 30%;
  width: 3px; height: 130%;
  background: linear-gradient(180deg, transparent, var(--blue-br), transparent);
  transform: rotate(18deg); opacity: .5;
}
.hero__streak.two { right: 27%; background: linear-gradient(180deg, transparent, var(--red), transparent); opacity: .4; height: 120%; }
.hero__rail {
  position: absolute; right: 26px; top: 50%; z-index: 3;
  transform: translateY(-50%) rotate(90deg); transform-origin: right center;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .4em;
  font-size: .68rem; color: rgba(234,240,250,.4); white-space: nowrap;
}
.hero__spec {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  background: rgba(12,17,28,.5); backdrop-filter: blur(4px);
}
.hero__spec > div { padding: .9rem 1.3rem; border-right: 1px solid var(--border); }
.hero__spec > div:last-child { border-right: 0; }
.hero__spec .k { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--steel); }
.hero__spec .v { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 500; font-size: 1.12rem; letter-spacing: .015em; text-transform: uppercase; color: #fff; line-height: 1.18; margin-top: .3rem; white-space: nowrap; }

/* atalhos de áreas de atuação no hero */
.hero-cat { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 500; color: var(--chrome);
  border: 1px solid rgba(255,255,255,.16); background: rgba(12,17,28,.45); backdrop-filter: blur(4px); border-radius: 40px; padding: .55rem 1.05rem; transition: border-color .25s ease, background .25s ease, transform .2s ease; }
.hero-cat:hover { border-color: var(--blue-br); background: rgba(31,124,230,.14); transform: translateY(-1px); }
.hero-cat .d { width: 7px; height: 7px; transform: rotate(45deg); background: var(--blue-br); flex: 0 0 auto; }
.hero-cat .d.red { background: var(--red); }

/* ==========================================================================
   MARQUEE (brand names)
   ========================================================================== */
.marquee { overflow: hidden; border-block: 1px solid var(--border); padding: 1.15rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__t { display: inline-flex; align-items: center; white-space: nowrap; animation: marq 34s linear infinite; }
.marquee__t span {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  color: var(--fg); opacity: .82; padding-inline: 1.6rem;
}
.marquee__t span::after { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--blue); margin-left: 3.2rem; }
.marquee__t span:nth-child(odd)::after { background: var(--red); }
@keyframes marq { to { transform: translateX(-50%); } }

/* faixa de containers (foto de fundo) com a marquee de marcas por cima + logo FR */
.container-band { position: relative; height: 240px; overflow: hidden; display: flex; align-items: center; border-block: 1px solid var(--border); }
.container-band__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.5) saturate(1.05); }
.container-band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,17,.78) 0%, rgba(7,10,17,.28) 50%, rgba(7,10,17,.78) 100%); }
.marquee--onband { position: relative; z-index: 2; width: 100%; border: 0; background: rgba(7,10,17,.32); padding: 1.05rem 0; }
.marquee--onband .marquee__t span { color: #fff; opacity: .95; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.container-band__logo { position: absolute; right: 22px; bottom: 14px; height: 34px; width: auto; z-index: 3; opacity: .92; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }

/* ==========================================================================
   STEP NUMBER
   ========================================================================== */
.stepnum {
  font-family: var(--font-display); line-height: 1;
  font-size: clamp(3rem, 7vw, 5rem);
  color: transparent; -webkit-text-stroke: 1.5px rgba(31,124,230,.5);
  position: absolute; top: 14px; right: 20px; pointer-events: none;
}
.panel.hot .stepnum { -webkit-text-stroke-color: rgba(31,124,230,.6); }

/* ==========================================================================
   FRAME (duotone photo)
   ========================================================================== */
.frame { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) contrast(1.06) brightness(.92); transition: filter .7s ease, transform .9s ease; }
.frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(150deg, rgba(31,124,230,.5), rgba(7,10,17,.1) 55%, rgba(31,124,230,.32));
  mix-blend-mode: screen; transition: opacity .6s ease;
}
.frame:hover img { filter: none; transform: scale(1.045); }
.frame:hover::before { opacity: .2; }
.frame .tag {
  position: absolute; z-index: 2; left: 14px; bottom: 14px;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: .64rem; color: #fff; background: rgba(7,10,17,.6);
  border: 1px solid rgba(255,255,255,.2); border-radius: 3px; padding: .35rem .6rem;
}

/* ==========================================================================
   LOCALIDADES — radar de acessos + lista de distâncias
   ========================================================================== */
.geo { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: center; margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
@media (min-width: 900px){ .geo { grid-template-columns: 0.95fr 1.05fr; gap: 2.4rem; } }

.radar { position: relative; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 100%, rgba(31,124,230,.16), transparent 60%), var(--panel-2);
  border: 1px solid var(--border); }
.radar svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.radar .lbl { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); text-align: center; z-index: 2; }
.radar .lbl b { font-family: var(--font-display); font-size: clamp(1rem,2.2vw,1.35rem); text-transform: uppercase; color: var(--fg); display: block; line-height: 1; }
.radar .lbl span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.radar .node { position: absolute; z-index: 2; transform: translate(-50%,-50%); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .58rem; color: var(--fg); white-space: nowrap; }
.radar .node i { display: block; font-weight: 600; font-size: .74rem; color: #fff; font-style: normal; }

.dist-group + .dist-group { margin-top: 1.1rem; }
.dist-group h4 { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: .64rem; color: var(--blue); margin-bottom: .35rem; }
.dist-row { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: 1px dashed var(--border); }
.dist-row:last-child { border-bottom: 0; }
.dist-row .di { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--blue-br); }
.dist-row .n { font-size: .92rem; color: var(--fg); }
.dist-row .k { margin-left: auto; font-family: var(--font-mono); font-weight: 600; font-size: .9rem; color: var(--fg); }
.dist-row .k small { color: var(--muted); font-weight: 400; }
.dist-row .k.here { color: #22c55e; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-item { border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--panel); transition: border-color .3s; }
.faq-item.is-open { border-color: rgba(31,124,230,.45); }
.faq-item .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: 1.35rem 1.5rem; color: var(--fg); font-weight: 600; font-size: 1.02rem; }
.faq-item .faq-question .num { font-family: var(--font-mono); color: var(--blue); font-size: .8rem; margin-right: .8rem; }
.faq-item .faq-answer { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.faq-item.is-open .faq-answer { max-height: 340px; }
.faq-item .faq-answer p { color: var(--muted); line-height: 1.7; padding: 0 1.5rem 1.4rem 3.2rem; }
.faq-icon { flex: 0 0 auto; transition: transform .35s ease; color: var(--red); }
.faq-item.is-open .faq-icon { transform: rotate(135deg); }

/* ==========================================================================
   FORM
   ========================================================================== */
.field { display: block; }
.field label { display: block; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; color: var(--muted); margin-bottom: .5rem; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 5px;
  padding: .85rem 1rem; color: var(--fg); font-family: var(--font-body); font-size: .95rem;
  transition: border-color .25s, box-shadow .25s;
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,124,230,.18);
}

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .09s; }
.reveal-delay-2 { transition-delay: .18s; }
.reveal-delay-3 { transition-delay: .27s; }
.reveal-delay-4 { transition-delay: .36s; }
.reveal-delay-5 { transition-delay: .45s; }

/* hero entrance */
.hero .anim { opacity: 0; transform: translateY(26px); animation: rise .9s cubic-bezier(.16,.84,.44,1) forwards; }
.hero .d1 { animation-delay: .1s; } .hero .d2 { animation-delay: .22s; }
.hero .d3 { animation-delay: .34s; } .hero .d4 { animation-delay: .46s; } .hero .d5 { animation-delay: .58s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* floating whatsapp */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 75; width: 64px; height: 64px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 14px 34px rgba(0,0,0,.45); transition: transform .25s; }
.wa-float:hover { transform: scale(1.08); }
.wa-float::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(31,190,90,.4); animation: ping 2.4s ease-out infinite; }

/* botão flutuante do Instagram, ao lado do WhatsApp */
.ig-float { position: fixed; right: 98px; bottom: 22px; z-index: 75; width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 22%, #dc2743 46%, #cc2366 70%, #bc1888 100%);
  display: grid; place-items: center; box-shadow: 0 14px 34px rgba(0,0,0,.45); transition: transform .25s; }
.ig-float:hover { transform: scale(1.08); }
@keyframes ping { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero .anim { opacity: 1 !important; transform: none !important; animation: none !important; }
  .marquee__t { animation: none; }
  .wa-float::after { animation: none; }
  html { scroll-behavior: auto; }
}