/* CarHelp — site. Linguagem visual: preto profundo, Outfit regular, títulos gigantes,
   vidro com borda em gradiente, luz difusa e um telemóvel que acompanha o scroll. */

:root {
  --black: #0a0a0b;
  --ink: #17191d;          /* "light black" — fundo de botões/cartões */
  --dim: #ceced7;          /* texto principal */
  --grey: #676a79;         /* texto secundário */
  --line: #2a2d33;
  --accent: #3b6bff;       /* azul CarHelp */
  --accent-2: #8d3bff;     /* violeta da luz */
  --ok: #3fd27f;
  --ease: cubic-bezier(.625, .05, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --pad: 50px;
}
@media (max-width: 1024px) { :root { --pad: 30px; } }
@media (max-width: 680px) { :root { --pad: 24px; } }

* { box-sizing: border-box; }
html {
  background: var(--black); color: var(--dim);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
/* tamanho de letra fluido: 16px num ecrã de 1440px */
body { margin: 0; font-size: clamp(11px, 1.1111vw, 20px); line-height: 1.35; overflow-x: hidden; }
@media (max-width: 1024px) { body { font-size: 14px; } }
@media (max-width: 680px) { body { font-size: 16px; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

/* ─── Tipografia (escala do Flowty) ─── */
.h0 { font-size: 15.625em; line-height: .96; font-weight: 400; letter-spacing: -.02em; }
.h1 { font-size: 10.625em; line-height: .88; font-weight: 400; letter-spacing: -.02em; margin: 0; }
.h2 { font-size: 6em; line-height: .94; font-weight: 400; letter-spacing: -.02em; margin: 0; }
.h3 { font-size: 3em; line-height: 1.17; font-weight: 400; letter-spacing: -.01em; margin: 0; }
.h4 { font-size: 2.375em; line-height: 1.26; font-weight: 400; margin: 0; }
.h5 { font-size: 1.75em; line-height: 1.21; font-weight: 400; letter-spacing: -.01em; margin: 0; }
.p1 { font-size: 1.375em; line-height: 1.32; letter-spacing: -.01em; margin: 0; }
.p2 { font-size: 1.0625em; line-height: 1.35; letter-spacing: -.01em; margin: 0; }
.p3 { font-size: .9375em; line-height: 1.2; letter-spacing: -.01em; margin: 0; }
.grey { color: var(--grey); }
.white { color: #fff; }
@media (max-width: 1024px) {
  .h1 { font-size: 6.4em; line-height: .93; }
  .h0 { font-size: 8.5em; }
  .h2 { font-size: 4.2em; }
  .p1 { font-size: 1.28em; }
}
@media (max-width: 680px) {
  .h1 { font-size: min(3em, calc((100vw - 48px) / 6.9)); line-height: 1; }
  .h0 { font-size: 4em; line-height: 1; }
  .h2 { font-size: min(2.6em, calc((100vw - 48px) / 8.2)); line-height: 1.02; }
  .h3 { font-size: 1.875em; line-height: 1.07; }
  .h4 { font-size: 1.5em; }
  .h5 { font-size: 1.25em; }
  .p1 { font-size: 1em; line-height: 1.31; }
  .p2 { font-size: .95em; }
  .br-d { display: none; }
}
.star { display: inline-block; width: .62em; height: .62em; vertical-align: .08em; margin: 0 .06em; color: var(--accent); }
.star svg { width: 100%; height: 100%; display: block; }

/* linhas que sobem por trás de uma máscara */
.line { display: block; overflow: hidden; padding: .1em 0 .12em; margin: -.1em 0 -.12em; }
.line > span { display: inline-block; will-change: transform; }

/* ─── Vidro com borda em gradiente ─── */
.glass { position: relative; isolation: isolate; background: rgba(23, 25, 29, .4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.glass::before, .gborder::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(227deg, #373d40, #141d23 50%, #383c40);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
}
.gborder { position: relative; isolation: isolate; }

/* ─── Botões ─── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 3.625em; padding: 0 2.5em; border-radius: 22px; border: 0; cursor: pointer; overflow: hidden; isolation: isolate;
  font-size: 1.0625em; font-weight: 500; letter-spacing: -.01em; color: var(--black); white-space: nowrap;
}
.btn .bg { position: absolute; inset: 0; border-radius: inherit; background: var(--dim); transition: inset .6s var(--ease); z-index: -1; }
.btn:hover .bg { inset: 3px; }
.btn.accent { color: #fff; }
.btn.accent .bg { background: linear-gradient(259deg, #5b7dff, #2f4fe0 55%, #1a2a9a); }
@media (max-width: 680px) { .btn { height: 48px; border-radius: 18px; padding: 0 22px; font-size: 16px; } }

/* botão quadrado com círculo que enche a partir do cursor */
.ibtn {
  position: relative; width: 3.625em; height: 3.625em; border-radius: 22px; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate;
  background: var(--black); color: var(--dim); flex: none;
}
.ibtn.ink { background: var(--ink); }
.ibtn .fill {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 300%; aspect-ratio: 1; border-radius: 50%;
  background: var(--dim); transform: translate(-50%, -50%) scale(0); transition: transform .7s var(--ease); z-index: 0; pointer-events: none;
}
.ibtn:hover .fill { transform: translate(-50%, -50%) scale(1); }
.ibtn svg { position: relative; z-index: 1; width: 1.25em; height: 1.25em; transition: color .7s var(--ease); }
.ibtn:hover svg { color: var(--black); }
@media (max-width: 680px) { .ibtn { width: 48px; height: 48px; border-radius: 18px; } }
.circle-btn { width: 2.625em; height: 2.625em; border-radius: 50%; background: var(--dim); color: var(--black); display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; transition: background .3s, color .3s; }
.circle-btn svg { width: 1.1em; height: 1.1em; }

/* ─── Carregamento: contador que rola, imagem da app ao centro, texto em baixo ─── */
.loader { position: fixed; inset: 0; z-index: 200; background: var(--black); pointer-events: auto; }
.ld-count { position: absolute; left: 34px; top: 26px; display: flex; font-size: 6em; line-height: 1; height: 1em; overflow: hidden; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ld-col { display: block; position: relative; height: 1em; overflow: hidden; width: .56em; }
.ld-col .strip { position: absolute; left: 0; top: 0; display: block; will-change: transform; }
.ld-col .strip span { display: block; height: 1em; line-height: 1; text-align: center; }
.ld-brand { position: absolute; right: var(--pad); top: 34px; font-size: 1.25em; letter-spacing: -.02em; color: var(--dim); }
.ld-img { position: absolute; left: 50%; top: 50%; width: 9em; aspect-ratio: 2 / 3; margin: -6.6em 0 0 -4.5em; }
.ld-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.ld-text { position: absolute; left: 34px; bottom: 34px; margin: 0; font-size: 1.375em; line-height: 1.2; color: var(--dim); letter-spacing: -.01em; }
.ld-mark { position: absolute; right: var(--pad); bottom: 34px; width: 1.6em; height: 1.6em; color: var(--grey); }
.ld-mark svg { width: 100%; height: 100%; }
@media (max-width: 680px) { .ld-count { font-size: 4.2em; left: 24px; } .ld-text { left: 24px; font-size: 1.15em; } .ld-img { width: 7.4em; margin: -5.6em 0 0 -3.7em; } }
.no-js .loader { display: none; }

/* cortina das transições de página */
.curtain { position: fixed; inset: 0; z-index: 190; background: var(--ink); transform: translateY(100%); pointer-events: none; }

/* ─── Barra: cápsula clara em baixo ao centro ─── */
.navbar {
  --nb-w: 26em; --nb-h: 3em;
  position: fixed; left: 50%; bottom: 24px; z-index: 130; width: min(var(--nb-w), calc(100vw - 32px)); height: var(--nb-h); transform: translateX(-50%);
  border-radius: 999px; overflow: hidden; color: var(--black);
  background: linear-gradient(100deg, #d7d7e0, #c4c4ce 50%, #d3d3dc);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 14px 40px rgba(0, 0, 0, .45);
  transition: width .65s var(--ease) 0s, opacity .4s, transform .6s var(--ease);
}
.navbar.mini { width: 4.75em; transition-delay: .18s, 0s, 0s; cursor: pointer; }
.navbar.hide { transform: translate(-50%, 160%); }
.navbar > * { position: absolute; top: 50%; transform: translateY(-50%); }
.nb-menu { left: 1.15em; width: 1.6em; height: 1.6em; border: 0; padding: 0; background: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: .32em; }
.nb-menu i { display: block; height: 1.5px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease); }
.nb-menu:hover i:first-child { transform: translateX(.15em); }
.nb-menu:hover i:last-child { transform: translateX(-.15em); }
.nb-logo { left: 50%; transform: translate(-50%, -50%); width: 1.9em; height: 1.9em; border-radius: .55em; overflow: hidden; display: block; }
.nb-logo img { width: 100%; height: 100%; display: block; }
.nb-cta { right: .28em; height: calc(var(--nb-h) - .56em); padding: 0 1.25em; border-radius: 999px; background: var(--black); color: var(--dim) !important;
  display: inline-flex; align-items: center; font-size: .92em; font-weight: 500; white-space: nowrap; transition: background .3s; }
.nb-cta:hover { background: #24262c; }
.nb-cta .s { display: none; }
.nb-menu, .nb-cta { transition: opacity .3s ease .32s, transform .4s var(--ease); }
.navbar.mini .nb-menu, .navbar.mini .nb-cta { opacity: 0; pointer-events: none; transition-delay: 0s; }
.navbar.hold { visibility: hidden; }

/* ─── Menu: o cartão nasce da barra ─── */
.nav-dim { position: fixed; inset: 0; z-index: 125; background: rgba(4, 4, 6, .62); opacity: 0; pointer-events: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.nav-card { position: fixed; left: 50%; bottom: 24px; z-index: 140; width: 22em; height: 3em; transform: translateX(-50%); border-radius: 1.5em;
  background: linear-gradient(160deg, #d9d9e2, #c9c9d3); color: var(--black); overflow: hidden; visibility: hidden; }
.nc-inner { position: absolute; left: 0; right: 0; bottom: 0; width: 22.6em; margin: 0 auto; padding: 2.3em 2.2em 2.1em; }
.nc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.nc-links { display: flex; flex-direction: column; }
.nc-links a { font-size: 1.9em; line-height: 1.17; letter-spacing: -.02em; color: var(--black) !important; transition: color .3s; width: max-content; }
.nc-links:hover a { color: #8a8b96 !important; }
.nc-links a:hover, .nc-links a.cur:hover { color: var(--black) !important; }
.nc-links a.cur { color: #8a8b96 !important; }
.nc-mark { width: 1.9em; height: 1.9em; border-radius: .55em; }
.nav-card hr { border: 0; height: 1px; background: rgba(10, 10, 11, .14); margin: 1.6em 0 1.3em; }
.nc-small { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; font-size: .92em; }
.nc-small div { display: flex; flex-direction: column; gap: .32em; }
.nc-small a { color: var(--black) !important; opacity: .85; transition: opacity .3s; }
.nc-small a:hover { opacity: .5; }
.nc-cta { display: flex; align-items: center; justify-content: center; height: 2.9em; margin-top: 1.7em; border-radius: 1em; background: var(--black); color: var(--dim) !important; font-weight: 500; font-size: .95em; transition: background .3s; }
.nc-cta:hover { background: #24262c; }
.nc-close { position: fixed; left: 50%; bottom: 24px; z-index: 141; width: 3em; height: 3em; margin-left: -1.5em; border-radius: 1em; border: 1px solid #2c2f36;
  background: #15171b; color: var(--dim); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transition: background .3s, color .3s; }
.nc-close:hover { background: var(--dim); color: var(--black); }
.nc-close svg { width: 1.1em; height: 1.1em; }
@media (max-width: 680px) { .navbar { --nb-w: 21em; } .nb-cta .l { display: none; } .nb-cta .s { display: inline; } .nav-card, .nc-inner { width: calc(100vw - 32px); max-width: 22.6em; } .nc-links a { font-size: 1.7em; } }

/* ─── "Ainda mais": scroll horizontal ─── */
.more { padding: 0; overflow: hidden; }
.more .pinbox { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 80px 0 100px; }
.more .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 0 var(--pad); margin-bottom: 40px; }
.more-hint { max-width: 17em; text-align: right; }
.track { display: flex; gap: 8px; padding: 0 var(--pad); will-change: transform; width: max-content; }
.mcard { flex: none; width: 26em; height: min(30em, 50vh); border-radius: 30px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.mcard .big { font-size: 5.5em; line-height: 1; color: #fff; letter-spacing: -.03em; }
.mcard .icon { width: 3.6em; height: 3.6em; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: rgba(59, 107, 255, .14); color: #8fb0ff; }
.mcard .icon svg { width: 1.7em; height: 1.7em; }
.mcard .glow { position: absolute; width: 70%; height: 60%; right: -20%; top: -20%; border-radius: 50%; filter: blur(50px); background: radial-gradient(circle, rgba(141, 59, 255, .45), transparent 70%); z-index: -1; }
@media (max-width: 1024px) {
  .more .pinbox { min-height: 0; padding: 100px 0 60px; }
  .more .head { flex-direction: column; align-items: flex-start; margin-bottom: 30px; }
  .more-hint { text-align: left; }
  .track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 10px; scrollbar-width: none; }
  .track::-webkit-scrollbar { display: none; }
  .mcard { scroll-snap-align: start; width: 78vw; max-width: 26em; height: 26em; }
}

/* ─── Secções base ─── */
main { position: relative; }
section { position: relative; }
.wrapx { padding-left: var(--pad); padding-right: var(--pad); }

/* luz difusa (desenhada em CSS, não é imagem) */
.aurora { position: absolute; pointer-events: none; z-index: 0; filter: blur(60px); opacity: .9; }
.aurora::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, rgba(141, 59, 255, 0) 10%, rgba(141, 59, 255, .45) 40%, rgba(59, 107, 255, .55) 62%, rgba(20, 40, 160, 0) 88%); }
.aurora.a1 { width: 120vw; height: 34vw; right: -38vw; top: 8vh; transform: rotate(-28deg); }
.aurora.a2 { width: 90vw; height: 26vw; left: -40vw; top: 30%; transform: rotate(24deg); opacity: .6; }
.aurora.a3 { width: 110vw; height: 30vw; left: -10vw; top: 10%; transform: rotate(-12deg); opacity: .7; }

/* ─── Coluna de texto vs. coluna do telemóvel (desktop) ───
   O texto vive na metade esquerda; a metade direita fica livre para o telemóvel. */
:root { --col: 46vw; --phone-x: 75vw; --pw: calc(min(76vh, 46em) * .462); }
.col { max-width: var(--col); }
.col-h { font-size: min(10.625em, 7.4vw); }
@media (max-width: 1024px) { .col { max-width: none; } .col-h { font-size: 6em; } }
@media (max-width: 680px) { .col-h { font-size: 3.4em; line-height: .95; } }
.eyebrow { display: inline-block; font-size: .9375em; color: var(--grey); letter-spacing: .02em; }

/* ─── Hero ─── */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.hero .top { display: flex; justify-content: space-between; align-items: flex-start; padding: 34px var(--pad) 0 36px; position: relative; z-index: 6; }
.hero .logo { display: inline-flex; align-items: center; gap: 12px; font-size: 1.5em; letter-spacing: -.02em; }
.hero .logo img { width: 42px; height: 42px; border-radius: 12px; }
.hero .bottom { padding: 0 var(--pad) 50px; position: relative; z-index: 6; }
.hero .actions { display: flex; gap: 8px; margin-top: 40px; }
.hero .note { margin-top: 20px; }
@media (max-width: 1024px) {
  .hero { min-height: 0; }
  .hero .top { padding: 30px var(--pad) 0; flex-direction: column-reverse; gap: 30px; }
  .hero .bottom { padding: 30px var(--pad) 20px; }
}

/* ─── Telemóvel 3D fixo (desktop): canvas WebGL por trás do texto ─── */
.rig { position: fixed; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; }
.rig canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 1024px) { .rig { display: none; } }

/* ─── Secções do percurso do telemóvel ─── */
.feature { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--pad) 80px; position: relative; }
.feature .copy { position: relative; z-index: 6; display: flex; flex-direction: column; gap: 34px; align-items: flex-start; }
.feature .copy .p1 { max-width: 30em; }
.feature .row { display: flex; gap: 8px; }
.feature .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: .55em 1em; border-radius: 99px; border: 1px solid #2a2d33; font-size: .9375em; color: var(--dim); }
.tag i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: .1em; background: var(--accent); }

/* cartões de vidro que flutuam junto ao telemóvel (só na coluna direita) */
.callouts { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.callout { position: absolute; width: 13em; padding: 1.2em 1.35em; border-radius: 24px; pointer-events: auto; }
.callout b { display: block; font-weight: 500; color: #fff; margin-bottom: 6px; font-size: 1.0625em; }
.callout span { color: var(--dim); font-size: 1em; line-height: 1.35; display: block; }
.callout i { display: inline-flex; width: 2.2em; height: 2.2em; border-radius: 12px; margin-bottom: 14px; align-items: center; justify-content: center; background: rgba(59, 107, 255, .16); color: #8fb0ff; font-style: normal; }
.callout i svg { width: 1.1em; height: 1.1em; }
.callout.c-a { left: calc(var(--phone-x) - var(--pw) / 2 - 13em + 1.1em); top: 24%; }
.callout.c-b { left: calc(var(--phone-x) + var(--pw) / 2 - 1.1em); top: 60%; }

/* tablet e telemóvel: imagens renderizadas do mesmo telemóvel 3D (fundo transparente) */
.m-phone { display: none; }
.m-phone img { display: block; height: auto; margin: 0 auto; will-change: transform; }
@media (max-width: 1024px) {
  .feature { min-height: 0; padding: 110px var(--pad) 40px; gap: 40px; }
  .callouts { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .callout { position: relative; left: auto !important; top: auto !important; width: auto; }
  .m-phone { display: block; padding: 0 0 10px; }
  .m-phone img { width: min(380px, 84vw); }
}
@media (max-width: 680px) { .callouts { grid-template-columns: 1fr; } .feature { padding-top: 90px; } }
/* computador sem WebGL: as mesmas imagens, na coluna da direita */
@media (min-width: 1025px) {
  .no-webgl .m-phone { display: block; position: absolute; left: var(--phone-x); top: 50%; transform: translate(-50%, -50%); z-index: 3; }
  .no-webgl .m-phone img { width: auto; height: min(82vh, 50em); }
}

/* ─── Percebe o carro (três cartões) ─── */
.trio-sec { padding: 180px var(--pad) 60px; position: relative; z-index: 3; }
.trio-sec .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 60px; }
.trio-sec .head .p1 { max-width: 22em; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tcard { border-radius: 34px; padding: 30px; min-height: 31em; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; overflow: hidden; }
.tcard .h4 { color: #fff; margin: 10px 0 12px; }
.tvis { position: relative; height: 13em; border-radius: 24px; background: radial-gradient(80% 90% at 50% 40%, rgba(59, 107, 255, .16), transparent 70%), #0d0e12; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vis-light svg { width: 34%; color: #ffb020; filter: drop-shadow(0 0 24px rgba(255, 176, 32, .75)); animation: lightPulse 2.4s ease-in-out infinite; }
@keyframes lightPulse { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.vis-wave { gap: 6px; }
.vis-wave i { width: 7px; border-radius: 4px; background: linear-gradient(180deg, #8fb0ff, #8d3bff); height: 20%; animation: bar 1.1s ease-in-out infinite; }
.vis-wave i:nth-child(2n) { animation-delay: -.3s; } .vis-wave i:nth-child(3n) { animation-delay: -.6s; } .vis-wave i:nth-child(5n) { animation-delay: -.85s; }
@keyframes bar { 0%, 100% { height: 18%; } 50% { height: 78%; } }
.vis-code { flex-direction: column; gap: 10px; }
.vis-code b { font-size: 4.6em; font-weight: 500; letter-spacing: .02em; color: #ff6b6f; text-shadow: 0 0 30px rgba(255, 90, 95, .45); }
.vis-code span { color: var(--grey); }
@media (max-width: 1024px) { .trio { grid-template-columns: 1fr; } .tcard { min-height: 0; } .trio-sec .head { flex-direction: column; align-items: flex-start; } .trio-sec { padding-top: 110px; } }

/* ─── Cartão grande com vídeo: inclina-se ao entrar e mostra-se sempre inteiro ─── */
.media-sec { padding: 200px var(--pad) 0; }
.media-sec .heads { display: flex; justify-content: space-between; margin-bottom: 60px; gap: 20px; }
.media-wrap { perspective: 1500px; --mw: min(100%, calc((100vh - 170px) * 16 / 9)); }
@supports (height: 100svh) { .media-wrap { --mw: min(100%, calc((100svh - 170px) * 16 / 9)); } }
.media-card { position: relative; width: var(--mw); aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #000; transform-origin: 50% 0; will-change: transform; }
.media-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.media-foot { width: var(--mw); margin: 28px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.media-foot .h5 { color: var(--dim); max-width: 24em; margin: 0; }
@media (max-width: 760px), (orientation: portrait) {
  .media-wrap { --mw: min(100%, calc((100vh - 210px) * 9 / 16)); }
  @supports (height: 100svh) { .media-wrap { --mw: min(100%, calc((100svh - 210px) * 9 / 16)); } }
  .media-card { aspect-ratio: 9 / 16; border-radius: 26px; }
  .media-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1024px) { .media-sec { padding-top: 120px; } }
@media (max-width: 680px) { .media-sec .heads { flex-direction: column; margin-bottom: 30px; } }

/* ─── Estatística ─── */
.stats { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 200px var(--pad); overflow: hidden; }
.stats .h0 { color: var(--dim); white-space: nowrap; }
.stats .h0 { line-height: 1; }
.odo { display: inline-block; overflow: hidden; height: 1em; line-height: 1; vertical-align: top; white-space: nowrap; }
.odo .col { display: inline-block; vertical-align: top; will-change: transform; }
.odo .col span { display: block; height: 1em; line-height: 1; }
.stats .h3 { margin-top: 50px; color: var(--dim); }
.stats .p1 { margin-top: 50px; }
@media (max-width: 680px) { .stats { min-height: 0; padding: 100px 24px; } .stats .h3 { margin-top: 30px; } .stats .p1 { margin-top: 20px; } }

/* ─── Para quem é ─── */
.who { padding: 200px var(--pad) 100px; }
.who .intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 70px; }
.who .intro .p1 { max-width: 25em; }
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.who-card { --mx: 70%; --my: 0%; position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; padding: 28px 28px 30px;
  min-height: 20em; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  background: linear-gradient(180deg, rgba(28, 31, 40, .72), rgba(16, 18, 24, .72)); border: 1px solid #23262e;
  transition: border-color .5s var(--ease), transform .6s var(--ease); }
.who-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(91, 125, 255, .16), transparent 60%); }
.who-card:hover { border-color: #3a3f4c; transform: translateY(-4px); }
.who-card:hover::before { opacity: 1; }
.wc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.wc-ic { width: 3.4em; height: 3.4em; border-radius: 16px; display: grid; place-items: center; color: #9db6ff;
  background: rgba(91, 125, 255, .1); border: 1px solid rgba(124, 152, 255, .2); }
.wc-ic svg { width: 1.6em; height: 1.6em; }
.wc-n { font-size: .9375em; color: #4b4f5c; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.wc-t { margin: 0 0 10px; font-size: 1.75em; font-weight: 400; letter-spacing: -.02em; color: #fff; }
.wc-d { margin: 0; font-size: 1.0625em; line-height: 1.45; color: var(--grey); max-width: 22em; }
.wc-tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: .45em .9em; border-radius: 99px;
  font-size: .875em; color: var(--dim); border: 1px solid #2a2d35; }
.wc-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5b7dff; box-shadow: 0 0 10px #5b7dff; }
.wc-ghost { position: absolute; right: -1.2em; bottom: -1.4em; width: 9.5em; height: 9.5em; color: #fff; opacity: .035; z-index: -1;
  transition: opacity .6s, transform .9s var(--ease); pointer-events: none; }
.wc-ghost svg { width: 100%; height: 100%; }
.who-card:hover .wc-ghost { opacity: .07; transform: rotate(-8deg) scale(1.05); }
@media (max-width: 1024px) { .who-grid { grid-template-columns: repeat(2, 1fr); } .who .intro { flex-direction: column; align-items: flex-start; margin-bottom: 40px; } }
@media (max-width: 680px) { .who { padding: 100px 24px 60px; } .who-grid { grid-template-columns: 1fr; } .who-card { border-radius: 24px; min-height: 0; padding: 22px 22px 24px; gap: 28px; } .wc-t { font-size: 1.45em; } }

/* ─── Pergunta o que quiseres: notificações da app a flutuar pela secção ─── */
.ask { position: relative; min-height: 136vh; padding: 140px var(--pad); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ask-copy { position: relative; z-index: 1; text-align: center; max-width: 34em; }
.ask-h { font-size: min(8em, 5.6vw); }
.ask-copy .p1 { margin: 28px auto 0; max-width: 23em; }
.nf-field { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.nf-wrap { position: absolute; left: var(--x); top: var(--y); width: 21.5em; will-change: transform; }
.nf-wrap:nth-child(1) { --x: 4%; --y: 9%; }
.nf-wrap:nth-child(2) { --x: 70%; --y: 6%; }
.nf-wrap:nth-child(3) { --x: 1.5%; --y: 41%; }
.nf-wrap:nth-child(4) { --x: 72.5%; --y: 35%; }
.nf-wrap:nth-child(5) { --x: 6%; --y: 73%; }
.nf-wrap:nth-child(6) { --x: 69%; --y: 68%; }
.nf-wrap:nth-child(7) { --x: 37%; --y: 2.5%; }
.nf-wrap:nth-child(8) { --x: 39%; --y: 85%; }
.nf { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .9em; row-gap: .5em; align-items: start;
  padding: 1em 1.15em .85em .9em; border-radius: 1.4em; background: #1c1e23; border: 1px solid #2c2f36; pointer-events: auto;
  box-shadow: 0 1.6em 3.6em rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04) inset;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; color: #e9ebee; cursor: default; will-change: transform; }
.nf-ic { position: relative; width: 2.75em; height: 2.75em; border-radius: .78em; display: grid; place-items: center; background: var(--tb); color: var(--tc); }
.nf-ic svg { width: 1.5em; height: 1.5em; }
.nf-ic::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--tc); opacity: 0; pointer-events: none; }
.nf.ping .nf-ic::after { animation: nfPing 1s ease-out; }
@keyframes nfPing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
.nf-tx b { display: block; font-weight: 700; font-size: 1.03em; line-height: 1.25; color: #f1f3f5; }
.nf-tx p { margin: .2em 0 0; font-size: .94em; line-height: 1.38; color: #c5c8ce; }
.nf time { grid-column: 1 / -1; font-size: .82em; color: #8b9097; }
.nf[data-tone="green"] { --tb: #163322; --tc: #3fcf6c; }
.nf[data-tone="amber"] { --tb: #3a2a0b; --tc: #ffb020; }
.nf[data-tone="blue"] { --tb: #13264a; --tc: #6b95ff; }
.nf[data-tone="violet"] { --tb: #281d48; --tc: #a888ff; }
.nf[data-tone="teal"] { --tb: #0e3333; --tc: #35d0c3; }
.nf[data-tone="red"] { --tb: #3c1618; --tc: #ff7074; }
.nf[data-tone="slate"] { --tb: #262a33; --tc: #b9c1cd; }
.nf[data-tone="pink"] { --tb: #3b1530; --tc: #ff74b8; }
@media (max-width: 1024px) {
  .ask { min-height: 0; display: block; padding: 110px var(--pad) 70px; }
  .ask-copy { text-align: left; max-width: none; }
  .ask-copy .p1 { margin-left: 0; }
  .ask-h { font-size: 6em; }
  .nf-field { position: relative; inset: auto; margin-top: 44px; display: flex; flex-direction: column; gap: 14px; }
  .nf-wrap { position: relative; left: auto; top: auto; width: min(22em, 88%); }
  .nf-wrap:nth-child(even) { align-self: flex-end; }
}
@media (max-width: 680px) { .ask-h { font-size: min(3.4em, calc((100vw - 48px) / 6.9)); } .nf-wrap:nth-child(n+7) { display: none; } }

/* ─── Planos ─── */
.plans-sec { padding: 160px var(--pad) 80px; }
.plans-sec .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 60px; }
/* duas colunas iguais: a pill (metade da largura) cobre sempre um botão inteiro */
.switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 22px; background: var(--ink); }
.switch button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--grey); height: 3em; padding: 0 1.4em; border-radius: 17px; cursor: pointer; transition: color .4s; white-space: nowrap; text-align: center; display: flex; align-items: center; justify-content: center; }
.switch button.on { color: var(--black); }
.switch .pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 17px; background: var(--dim); transition: transform .7s var(--ease); }
.switch.year .pill { transform: translateX(100%); }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan { border-radius: 40px; padding: 44px; min-height: 34em; display: flex; flex-direction: column; overflow: hidden; }
.plan .price { font-size: min(6em, 15vw); line-height: .94; letter-spacing: -.03em; color: #fff; margin: 30px 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan .price small { font-size: .25em; color: var(--grey); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px; }
.plan li { display: flex; gap: 12px; font-size: 1.0625em; }
.plan li::before { content: ""; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; margin-top: .05em;
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / 62% no-repeat; }
.plan li.off { color: var(--grey); }
.plan li.off::before { background: #22252c; }
.plan.pro { background: radial-gradient(120% 90% at 100% 0%, rgba(59, 107, 255, .3), transparent 60%), rgba(23, 25, 29, .4); }
.plan .badge { align-self: flex-start; padding: .5em 1em; border-radius: 99px; background: var(--dim); color: var(--black); font-weight: 500; font-size: .9375em; }
.plan .fine { margin-top: auto; padding-top: 30px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } .plan { padding: 28px; border-radius: 30px; min-height: 0; } .plans-sec .head { flex-direction: column; align-items: flex-start; margin-bottom: 30px; } .plans-sec { padding-top: 100px; } }

/* ─── FAQ ─── */
.faq-sec { padding: 160px 0 100px; overflow: hidden; }
.marquee { display: flex; width: max-content; will-change: transform; }
.marquee span { font-size: 15.625em; line-height: .96; letter-spacing: -.03em; padding-right: .3em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px #3a3e47; }
.marquee span:nth-child(odd) { color: var(--dim); -webkit-text-stroke: 0; }
@media (max-width: 680px) { .marquee span { font-size: 5em; } }
.faq { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; padding: 100px var(--pad) 0; }
.faq .side .p1 { margin-top: 24px; max-width: 18em; }
.faq .side .btn { margin-top: 36px; }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 30px 0; background: none; border: 0; cursor: pointer; text-align: left; font-size: 1.75em; letter-spacing: -.01em; color: var(--dim); }
.qa button .pm { position: relative; flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--ink); }
.qa button .pm::before, .qa button .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40%; height: 2px; background: var(--dim); transform: translate(-50%, -50%); transition: transform .6s var(--ease); }
.qa button .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa.open button .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa .ans { height: 0; overflow: hidden; }
.qa .ans p { padding: 0 3em 30px 0; color: var(--grey); font-size: 1.375em; line-height: 1.32; margin: 0; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; padding-top: 50px; } .qa button { font-size: 1.25em; padding: 22px 0; } .qa .ans p { font-size: 1em; padding-right: 0; } }

/* ─── CTA final ─── */
.final { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 160px var(--pad); overflow: hidden; }
.final .icon { width: 7.5em; height: 7.5em; border-radius: 1.9em; margin-bottom: 50px; box-shadow: 0 30px 100px rgba(59, 107, 255, .45); }
.final .p1 { margin-top: 30px; }
.stores { display: flex; gap: 8px; justify-content: center; margin-top: 50px; flex-wrap: wrap; }
.store { display: inline-flex; align-items: center; gap: 14px; height: 4em; padding: 0 1.8em 0 1.3em; border-radius: 22px; background: var(--dim); color: var(--black); position: relative; overflow: hidden; isolation: isolate; }
.store svg { width: 1.9em; height: 1.9em; }
.store small { display: block; font-size: .72em; text-transform: uppercase; letter-spacing: .05em; opacity: .65; text-align: left; }
.store strong { display: block; font-weight: 500; font-size: 1.15em; line-height: 1.1; text-align: left; }
.store.soon { background: var(--ink); color: var(--dim); pointer-events: none; }
.store.soon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(227deg, #373d40, #141d23 50%, #383c40);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }

/* ─── Rodapé ─── */
footer { padding: 80px var(--pad) 120px; border-top: 1px solid var(--line); overflow: hidden; }
footer .cols { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
footer nav { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 60px; }
footer nav a, footer .legal a { color: var(--grey); transition: color .3s; }
footer nav a:hover, footer .legal a:hover { color: var(--dim); }
footer .word { font-size: 22vw; line-height: .8; letter-spacing: -.05em; color: var(--dim); margin: 80px 0 30px; white-space: nowrap; }
footer .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; color: var(--grey); }

/* ─── Lightbox do vídeo ─── */
.lightbox { position: fixed; inset: 0; z-index: 170; background: rgba(5, 5, 7, .92); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.lightbox.on { opacity: 1; pointer-events: auto; }
.lightbox video { max-width: 100%; max-height: 100%; border-radius: 24px; }
.lightbox .ibtn { position: absolute; top: 24px; right: 24px; }

/* menu sem GSAP (degradação simples) */
.nav-card.static-open { visibility: visible; width: min(22.6em, calc(100vw - 32px)); height: auto; bottom: calc(24px + 3em + 14px); border-radius: 40px; }
.nav-card.static-open .nc-inner { position: relative; }
.nc-close.static-open { opacity: 1; visibility: visible; }

.more-hint .hint-m { display: none; }
@media (max-width: 1024px) { .more-hint .hint-d { display: none; } .more-hint .hint-m { display: inline; } }

/* ajustes de títulos para caberem numa linha */
.media-h { font-size: min(10.625em, 7.4vw); white-space: nowrap; }
.who .intro .h2 { font-size: min(6em, 4.9vw); }
.ta-r { text-align: right; }
@media (max-width: 680px) { .media-h { font-size: 2.6em; white-space: normal; } .ta-r { text-align: left; } .who .intro .h2 { font-size: min(2.12em, calc((100vw - 48px) / 9.9)); } }

@media (max-width: 680px) { .feature .tags { gap: 5px; } .tag { font-size: .84em; padding: .5em .78em; } }

/* ─── Com e sem CarHelp: o mesmo orçamento em papel e analisado; a linha revela a análise ─── */
.vs-sec { position: relative; padding: 200px var(--pad) 60px; z-index: 3; }
.vs-sec .aurora.a2 { top: 34%; left: -30vw; opacity: .5; }
.vs-head { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 64px; }
.vs-head .eyebrow { display: block; margin-bottom: 26px; }
.vs-head .p1 { max-width: 21em; }
.vs-head .h2, .trio-sec .head .h2 { font-size: min(6em, 4.9vw); }
@media (min-width: 681px) { .vs-head .h2 .line, .trio-sec .head .h2 .line { white-space: nowrap; } }
@media (max-width: 1024px) { .trio-sec .head .h2 { font-size: 4.2em; } }
@media (max-width: 680px) { .trio-sec .head .h2 { font-size: min(2.6em, calc((100vw - 48px) / 8.6)); } }
@media (max-width: 1024px) { .vs-head .h2 { font-size: 4.2em; } }
@media (max-width: 680px) { .vs-head .h2 { font-size: min(2.6em, calc((100vw - 48px) / 8.6)); } }
.vs-bar, .vs-wrap, .vs-fine { max-width: 70em; margin-left: auto; margin-right: auto; }
.vs-bar { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.vs-lab { display: inline-flex; align-items: center; gap: .65em; font-size: .9375em; color: var(--dim); transition: opacity .4s; }
.vs-lab i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vs-lab-l i { background: #e9e3d3; }
.vs-lab-r i { background: #5b7dff; box-shadow: 0 0 12px #5b7dff; }
.vs-wrap { position: relative; perspective: 1600px; }
.vs-stage {
  --pos: 50%; position: relative; display: grid; border-radius: 30px; overflow: hidden; isolation: isolate; transform-origin: 50% 0;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: ew-resize; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 50px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
}
.vs-layer { grid-area: 1 / 1; position: relative; min-width: 0; }
.vs-app { clip-path: inset(0 0 0 var(--pos)); }
.vs-fine { margin-top: 20px; text-align: center; }

/* a "folha": a mesma grelha nas duas camadas, para cada linha ficar exatamente por cima da outra */
.vs-doc { --rh: 3.75em; display: grid; grid-template-rows: 6.4em 2.9em 2.7em repeat(6, var(--rh)) 7.6em; padding: 2.5em 3.1em 2.3em; height: 100%; }
.vs-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5em; }
.vs-car { display: flex; align-items: center; gap: .5em; min-width: 0; }
.vs-th { display: flex; justify-content: space-between; align-items: center; font-size: .78em; letter-spacing: .09em; text-transform: uppercase; }
.vs-r { position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 1.2em; min-width: 0; }
.vs-r > div { display: flex; flex-direction: column; gap: .22em; min-width: 0; }
.vs-r b { font-size: 1em; line-height: 1.2; }
.vs-r small { font-size: .84em; line-height: 1.25; }
.vs-ft { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5em; }

/* papel da oficina */
.vs-paper {
  color: #2a2620; font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .22  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(120% 90% at 25% 0%, #f8f5ed, #ede7d8 62%, #ddd4bf);
}
.vs-paper::before { content: ""; position: absolute; left: 0; right: 0; top: 41%; height: 3px; pointer-events: none;
  background: linear-gradient(180deg, rgba(90, 76, 52, .1), rgba(255, 255, 255, .55) 60%, transparent); }
.vs-paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(120, 100, 60, .18); }
.vs-co b { display: block; font-size: 1.32em; letter-spacing: .05em; }
.vs-co span { display: block; margin-top: .3em; font-size: .8em; color: #6f6656; }
.vs-no { text-align: right; flex: none; }
.vs-no b { display: block; font-size: 1.55em; letter-spacing: .16em; }
.vs-no span { display: block; margin-top: .35em; font-size: .8em; color: #6f6656; }
.vs-paper .vs-car { border-top: 1px dashed rgba(42, 38, 32, .35); font-size: .9em; }
.vs-paper .vs-th { border-top: 2px solid #2a2620; border-bottom: 1px solid #2a2620; font-weight: 700; }
.vs-paper .vs-r { border-bottom: 1px dotted rgba(42, 38, 32, .4); }
.vs-paper .vs-r b { font-weight: 700; }
.vs-paper .vs-r small { color: #7a705f; }
.vs-v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vs-tot { display: flex; flex-direction: column; gap: .3em; text-align: right; font-size: .9em; flex: none; }
.vs-tot b { display: inline-block; min-width: 6.4em; font-variant-numeric: tabular-nums; }
.vs-total { margin-top: .2em; padding-top: .35em; border-top: 2px solid #2a2620; font-size: 1.3em; font-weight: 700; }
.vs-note { display: flex; align-items: center; gap: 1.1em; flex-wrap: wrap; min-width: 0; }
.vs-scrawl { position: relative; display: inline-block; font-family: "Caveat", "Segoe Print", cursive; font-weight: 600; font-size: 2.2em; line-height: 1; color: #c42f28; transform: rotate(-5deg); white-space: nowrap; }
.vs-scrawl::after { content: ""; position: absolute; left: -2%; right: -4%; bottom: -.28em; height: .32em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 C 40 3, 80 12, 120 6 S 180 4, 198 8' fill='none' stroke='%23c42f28' stroke-width='3' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat; }
.vs-stamp { display: inline-block; padding: .4em .8em; border: 2px solid rgba(38, 70, 170, .72); border-radius: 6px; color: rgba(38, 70, 170, .8);
  font-weight: 700; font-size: .78em; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-7deg); white-space: nowrap;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.9'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.9'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>"); }

/* o mesmo orçamento, lido pela CarHelp */
.vs-app {
  color: var(--dim);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(59, 107, 255, .22), transparent 62%),
    radial-gradient(60% 60% at 0% 100%, rgba(141, 59, 255, .12), transparent 62%),
    #0e1015;
}
.vs-ah { display: flex; align-items: center; gap: .9em; min-width: 0; }
.vs-ah img { width: 2.9em; height: 2.9em; border-radius: .85em; flex: none; }
.vs-ah b { display: block; font-size: 1.35em; font-weight: 400; letter-spacing: -.01em; color: #fff; }
.vs-ah span { display: block; margin-top: .2em; font-size: .85em; color: var(--grey); }
.vs-verdict { display: flex; flex-direction: column; align-items: flex-end; gap: .45em; flex: none; }
.vs-verdict > span:last-child { font-size: .85em; color: var(--grey); }
.vs-pill { display: inline-flex; align-items: center; gap: .5em; padding: .42em 1em; border-radius: 99px; font-weight: 500;
  color: #ff8d90; background: rgba(255, 112, 116, .13); border: 1px solid rgba(255, 112, 116, .35); }
.vs-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.vs-chips { flex-wrap: nowrap; overflow: hidden; }
.vs-chips span { padding: .34em .85em; border-radius: 99px; border: 1px solid #2a2d35; font-size: .8em; white-space: nowrap; color: var(--dim); }
.vs-chips .r { color: #ff8d90; border-color: rgba(255, 112, 116, .3); }
.vs-chips .a { color: #ffc35a; border-color: rgba(255, 176, 32, .3); }
.vs-app .vs-th { color: var(--grey); border-bottom: 1px solid #23262e; }
.vs-app .vs-r { border-bottom: 1px solid #1b1e25; }
.vs-app .vs-r b { font-weight: 500; color: #fff; }
.vs-r.ok small { color: #74d99c; }
.vs-r.warn small { color: #ffc35a; }
.vs-r.bad small { color: #ff8d90; }
.vs-app .vs-r::before { content: ""; position: absolute; z-index: -1; top: .4em; bottom: .4em; left: -1.1em; right: -1.1em; border-radius: 14px;
  opacity: 0; transform: scaleX(.4); transform-origin: 100% 50%; transition: transform .8s var(--ease-out), opacity .5s; }
.vs-r.bad::before { background: linear-gradient(90deg, rgba(255, 112, 116, .16), rgba(255, 112, 116, .05)); box-shadow: inset 3px 0 0 #ff7074; }
.vs-r.warn::before { background: linear-gradient(90deg, rgba(255, 176, 32, .13), rgba(255, 176, 32, .04)); box-shadow: inset 3px 0 0 #ffb020; }
.vs-r.ok::before { display: none; }
.vs-r.in::before { opacity: 1; transform: none; }
.vs-c { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-width: 3.6em; padding: .42em .85em; border-radius: 99px;
  font-size: .85em; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;
  transform: scale(.55); opacity: 0; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
.vs-r.ok .vs-c { color: #74d99c; background: rgba(63, 207, 108, .12); }
.vs-r.ok .vs-c::before { content: ""; width: .8em; height: .8em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374d99c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / contain no-repeat; }
.vs-r.bad .vs-c { color: #fff; background: #e5484d; box-shadow: 0 6px 22px rgba(229, 72, 77, .45); }
.vs-r.warn .vs-c { color: #1b1404; background: #ffb020; box-shadow: 0 6px 22px rgba(255, 176, 32, .3); }
.vs-r.in .vs-c, .vs-pop.in { transform: none; opacity: 1; }
.vs-pop { transform: translateY(12px) scale(.94); opacity: 0; transition: transform .7s var(--ease-out), opacity .45s; }
.vs-calm { display: inline-flex; align-items: center; gap: .7em; padding: .7em 1.05em; border-radius: 16px; max-width: 24em;
  font-size: .9em; line-height: 1.3; color: #9ae8b8; background: rgba(63, 207, 108, .09); border: 1px solid rgba(63, 207, 108, .28); }
.vs-calm i { width: 8px; height: 8px; border-radius: 50%; background: #3fcf6c; box-shadow: 0 0 10px #3fcf6c; flex: none; }
.vs-fair { display: flex; flex-direction: column; align-items: flex-end; gap: .25em; text-align: right; flex: none; }
.vs-fair > span { font-size: .85em; color: var(--grey); }
.vs-fair b { font-size: 2.5em; line-height: 1; font-weight: 400; letter-spacing: -.03em; color: #74d99c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vs-fair small { font-size: .95em; color: #fff; }
.no-js .vs-c, .no-js .vs-pop { transform: none; opacity: 1; }
.no-js .vs-app .vs-r::before { opacity: 1; transform: none; }

/* a linha e o puxador */
.vs-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 5; outline: none; }
.vs-handle::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 7em; pointer-events: none;
  background: linear-gradient(90deg, rgba(91, 125, 255, .2), rgba(91, 125, 255, 0)); }
.vs-line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), #fff 14%, #fff 86%, rgba(255, 255, 255, .2));
  box-shadow: 0 0 16px rgba(91, 125, 255, .95), 0 0 3px rgba(255, 255, 255, .8); }
.vs-knob { position: absolute; left: 0; top: 50%; z-index: 2; width: 3.7em; height: 3.7em; border-radius: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; gap: .05em; background: var(--dim); color: var(--black); cursor: grab;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 0 7px rgba(206, 206, 215, .16); transition: transform .45s var(--ease-out), box-shadow .45s; }
.vs-knob svg { width: 1.05em; height: 1.05em; }
.vs-knob::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75); opacity: 0; pointer-events: none; }
.vs-stage.hint .vs-knob::after { animation: vsRing 1.9s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes vsRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.65); } }
.vs-stage:hover .vs-knob { transform: translate(-50%, -50%) scale(1.06); }
.vs-stage.drag .vs-knob { transform: translate(-50%, -50%) scale(1.12); cursor: grabbing; box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 10px rgba(91, 125, 255, .28); }
.vs-handle:focus-visible .vs-knob { box-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 0 4px var(--accent); }
.vs-stage.drag { cursor: grabbing; }

@media (max-width: 1024px) {
  .vs-sec { padding-top: 120px; }
  .vs-head { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
}
@media (max-width: 860px) {
  .vs-stage { font-size: 14px; }
  .vs-doc { --rh: 4.3em; grid-template-rows: 6.6em 2.8em 2.6em repeat(6, var(--rh)) 8.6em; padding: 1.9em 1.8em 1.7em; }
  .vs-co span:last-child { display: none; }
  .vs-ft { align-items: flex-end; }
  .vs-calm { max-width: 15em; }
}
@media (max-width: 680px) {
  .vs-sec { padding: 100px 24px 40px; }
  .vs-stage { font-size: 12px; border-radius: 22px; }
  .vs-doc { --rh: 4.9em; grid-template-rows: 6.2em 3.2em 2.6em repeat(6, var(--rh)) 10.4em; padding: 1.7em 1.45em 1.5em; }
  .vs-hd { gap: 1em; }
  .vs-co b { font-size: 1.12em; }
  .vs-no b { font-size: 1.2em; letter-spacing: .1em; }
  .vs-paper .vs-car { font-size: .95em; line-height: 1.25; }
  .vs-r b { font-size: 1.08em; }
  .vs-r small { font-size: .92em; }
  .vs-ah img { width: 2.6em; height: 2.6em; }
  .vs-ah b { font-size: 1.2em; }
  .vs-ah span { font-size: .9em; }
  .vs-chips span { font-size: .86em; padding: .3em .7em; }
  .vs-chips span:first-child { display: none; }
  .vs-ft { flex-direction: column-reverse; align-items: stretch; justify-content: flex-end; gap: .9em; }
  .vs-tot, .vs-fair { align-self: flex-end; }
  .vs-note { justify-content: flex-start; }
  .vs-scrawl { font-size: 2em; }
  .vs-calm { max-width: none; font-size: .95em; }
  .vs-fair b { font-size: 2.2em; }
  .vs-knob { width: 3.6em; height: 3.6em; font-size: 13px; }
  .vs-lab { font-size: .84em; }
}

/* ─── Idioma: botão no topo, segmento no menu, ligação no rodapé e aviso ─── */
.top-r { display: flex; align-items: center; gap: 14px; }
.lang-chip { display: inline-flex; align-items: center; gap: .55em; height: 2.7em; padding: 0 1.05em 0 .9em; border-radius: 99px; font-size: .9375em; letter-spacing: .04em;
  color: var(--dim); background: rgba(23, 25, 29, .55); border: 1px solid #2a2d33; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .35s, color .35s, border-color .35s; }
.lang-chip svg { width: 1.15em; height: 1.15em; transition: transform .8s var(--ease); }
.lang-chip:hover { background: var(--dim); color: var(--black); border-color: var(--dim); }
.lang-chip:hover svg { transform: rotate(180deg); }
@media (max-width: 1024px) { .hero .top-r { justify-content: space-between; } }
.nc-lang { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 1.3em; font-size: .92em; }
.nc-lang > span { opacity: .6; }
.nc-seg { display: inline-flex; padding: 3px; border-radius: 99px; background: rgba(10, 10, 11, .08); }
.nc-seg a, .nc-seg span { padding: .38em 1em; border-radius: 99px; font-weight: 500; letter-spacing: .05em; color: var(--black) !important; opacity: .55; transition: opacity .3s, background .3s; }
.nc-seg a:hover { opacity: 1; }
.nc-seg .on { background: var(--black); color: var(--dim) !important; opacity: 1; }
.ft-lang [aria-current] { color: var(--dim); }
.lang-hint { position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 150; display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px); padding: 7px 7px 7px 18px; border-radius: 99px; color: var(--dim); font-size: .95em;
  background: rgba(23, 25, 29, .84); border: 1px solid #2c2f36; box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translate(-50%, calc(-100% - 40px)); transition: transform .8s var(--ease); }
.lang-hint.on { transform: translate(-50%, 0); }
.lang-hint svg { width: 1.1em; height: 1.1em; flex: none; color: #9db6ff; }
.lang-hint a { padding: .55em 1.1em; border-radius: 99px; background: var(--dim); color: var(--black) !important; font-weight: 500; white-space: nowrap; transition: background .3s; }
.lang-hint a:hover { background: #fff; }
.lang-hint button { flex: none; width: 2.3em; height: 2.3em; border: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--grey); cursor: pointer; display: grid; place-items: center; transition: background .3s, color .3s; }
.lang-hint button:hover { background: #2a2d33; color: var(--dim); }
.lang-hint button svg { color: inherit; width: 1em; height: 1em; }
@media (max-width: 680px) { .lang-hint { font-size: 14px; width: max-content; padding-left: 14px; gap: 8px; } }