:root {
  --bg: #0a1622; --surface: #122536; --surface-2: #0d1e2c; --text: #eaf6f8;
  --muted: #8fa5ae; --line: rgba(255,255,255,.08); --accent: #21d9f0;
  --accent-2: #0d9fc9; --gold: #f3b95f; --shadow: 0 24px 80px rgba(0,0,0,.4);
  --card-a: rgba(18,43,58,.98); --card-b: rgba(8,25,36,.98); --card-flat: rgba(13,32,45,.85);
  --glass-a: rgba(18,43,58,.72); --glass-b: rgba(8,25,36,.68);
}
:root[data-theme="light"] {
  --bg: #eef6f8; --surface: #fff; --surface-2: #f3fafc; --text: #0d2530;
  --muted: #5c7580; --line: rgba(13,37,48,.12); --shadow: 0 24px 80px rgba(13,37,48,.14);
  --card-a: #ffffff; --card-b: #f3fafc; --card-flat: #ffffff;
  --glass-a: rgba(255,255,255,.85); --glass-b: rgba(243,250,252,.8);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 12% 0%, rgba(33,217,240,.14), transparent 34rem), radial-gradient(circle at 100% 90%, rgba(243,185,95,.08), transparent 30rem), var(--bg); font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; }
h1, h2, h3, .brand span, .login-brand span { font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 32px 32px; }
a { color: inherit; }
.home-shell { position: relative; z-index: 1; width: min(1180px, calc(100% - 40px)); margin: auto; }
.home-header { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; }
.brand, .login-brand { display: grid; justify-items: start; gap: 5px; text-decoration: none; }
.brand img { width: 174px; height: 54px; object-fit: contain; object-position: left center; }
.brand span, .login-brand span { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .24em; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.text-link, .back-link { color: var(--muted); font-size: .88rem; text-decoration: none; }
.text-link:hover, .back-link:hover { color: var(--accent); }
.icon-button, .theme-toggle { min-height: 40px; width: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--surface-2); cursor: pointer; }
.hero { display: grid; grid-template-columns: 1fr .88fr; gap: clamp(30px, 8vw, 110px); align-items: center; min-height: 570px; padding: 40px 0 76px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow i { color: var(--gold); font-style: normal; }
h1 { margin: 18px 0 18px; font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: .98; letter-spacing: -.075em; }
h1 em { color: var(--accent); font-style: normal; }
.hero-lead { max-width: 520px; margin: 0; color: var(--muted); font-size: 1.12rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 24px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 0; border-radius: 12px; color: #04212b; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight: 850; text-decoration: none; cursor: pointer; transition: transform .2s, filter .2s; }
.button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.button-large { min-height: 52px; padding: 14px 20px; }
.button-ghost { color: var(--text); border: 1px solid var(--line); background: var(--surface-2); }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .73rem; }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #eaf6f8; color: #0a1622; font-weight: 700; }
.trust-row svg { color: var(--accent); }
.hero-art { position: relative; min-height: 410px; display: grid; place-items: center; }
.glow { position: absolute; width: 330px; height: 330px; border-radius: 50%; background: rgba(33,217,240,.18); filter: blur(42px); }
.car-card { position: relative; width: min(100%, 390px); padding: 20px; border: 1px solid rgba(33,217,240,.3); border-radius: 25px; background: linear-gradient(150deg, var(--card-a), var(--card-b)); box-shadow: 0 25px 70px rgba(0,0,0,.35); transform: rotate(3deg); }
.car-card-top { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .08em; }
.car-time { margin-left: auto; color: var(--accent); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #28d17c; box-shadow: 0 0 0 5px rgba(40,209,124,.12); }
.car-illustration { display: grid; place-items: center; height: 170px; margin: 16px 0; border-radius: 18px; color: var(--accent); background: radial-gradient(circle, rgba(33,217,240,.25), transparent 48%), var(--card-b); overflow: hidden; }
.car-illustration img { width: 82%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
.car-card-bottom { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 16px; }
.car-card-bottom span { color: var(--muted); font-size: .8rem; }
.car-card-bottom { display: none; }
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--line); }
.feature-strip article { display: flex; gap: 14px; padding: 24px; background: var(--card-flat); }
.feature-strip p { margin: 5px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.feature-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; color: var(--accent); background: rgba(33,217,240,.12); font-size: .72rem; font-weight: 900; }
.feature-icon svg { display: block; }
.home-footer { display: flex; flex-direction: column; gap: 16px; padding: 28px 0; color: var(--muted); font-size: .75rem; }
.footer-contact { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-contact a, .footer-contact span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); text-decoration: none; }
.footer-contact a:hover { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--accent); }
.section-label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; }
.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 10px 0 30px; }
.section-heading-row h2 { margin: 8px 0 0; font-size: clamp(1.6rem,3vw,2rem); letter-spacing: -.03em; }
.section-heading-row p { margin: 0; max-width: 320px; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.service-card { padding: 22px 18px; border-radius: 18px; background: linear-gradient(150deg, var(--glass-a), var(--glass-b)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); }
.service-card .feature-icon { background: rgba(33,217,240,.12); margin-bottom: 14px; }
.service-card h3 { margin: 0; font-size: .95rem; }
.service-card p { margin: 6px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.service-card .price { display: block; margin-top: 12px; font-size: .76rem; font-weight: 800; color: var(--accent); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.why-card { display: flex; gap: 14px; padding: 20px; border-radius: 16px; background: linear-gradient(150deg, var(--glass-a), var(--glass-b)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); }
.why-card .feature-icon { flex: 0 0 38px; background: rgba(33,217,240,.14); }
.why-card strong { display: block; font-size: .92rem; }
.why-card p { margin: 5px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.cta-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 60px 0; padding: 32px 36px; border-radius: 22px; background: linear-gradient(120deg, var(--surface-2), var(--bg)); border: 1px solid rgba(33,217,240,.18); }
.cta-banner strong { display: block; font-size: 1.25rem; }
.cta-banner span { display: block; margin-top: 6px; color: var(--muted); font-size: .85rem; }
section.page-section { padding: 48px 0; }
@media (max-width: 760px) { .services-grid { grid-template-columns: repeat(2,1fr); } .why-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .services-grid { grid-template-columns: 1fr; } }
.login-page { display: grid; place-items: center; padding: 20px; }
.login-shell { position: relative; z-index: 1; width: min(100%, 460px); padding: 42px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg, var(--card-a), var(--card-b)); box-shadow: var(--shadow); }
.login-brand { justify-items: center; margin: 0 auto 42px; }
.login-brand img { width: 190px; height: 68px; object-fit: contain; }
.login-heading { margin-bottom: 26px; }
.login-heading h1 { margin: 12px 0 8px; font-size: 2.3rem; }
.login-heading p { margin: 0; color: var(--muted); line-height: 1.5; }
form { display: grid; gap: 10px; }
label { color: var(--muted); font-size: .78rem; font-weight: 700; }
input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: var(--surface-2); font: inherit; }
input:focus { outline: 2px solid rgba(33,217,240,.35); border-color: var(--accent); }
output { min-height: 20px; color: #ff9aa5; font-size: .84rem; }
.back-link { display: block; margin-top: 24px; text-align: center; }
.theme-text-button { display: block; width: auto; margin: 22px auto 0; padding: 8px 13px; border-radius: 999px; font-size: .78rem; }
@media (max-width: 760px) { .home-shell { width: min(100% - 28px, 560px); } .hero { grid-template-columns: 1fr; padding-top: 25px; } .hero-art { min-height: 330px; } .hero-copy { text-align: center; } .hero-lead { margin: auto; } .hero-actions, .trust-row { justify-content: center; } .feature-strip { grid-template-columns: 1fr; } .feature-strip article { padding: 18px; } }
@media (max-width: 480px) { .home-header { padding: 18px 0; } .text-link { display: none; } h1 { font-size: 3.2rem; } .login-shell { padding: 30px 22px; } }

/* VWS-99b: mini celular animado do hero. Sem JS ou com prefers-reduced-motion, as cenas aparecem como lista estática. */
.demo { margin-top: 4px; }
.phone { padding: 10px; border: 1px solid var(--line); border-radius: 22px; background: var(--card-b); }
.scenes { display: grid; gap: 10px; }
.scene { display: grid; gap: 6px; }
.screen { display: grid; gap: 7px; justify-items: start; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.scr-title { font-size: .8rem; }
.chip, .slot { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: .72rem; font-weight: 700; }
.chip-on, .slot { color: var(--text); border-color: var(--accent); }
.pix-btn, .ok-btn { display: inline-grid; padding: 8px 12px; border-radius: 10px; color: #04212b; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-size: .74rem; font-weight: 850; }
.pix-btn .t-b { display: none; }
.photos { display: flex; gap: 6px; }
.photos i { width: 34px; height: 24px; border-radius: 6px; background: var(--card-b); border: 1px solid var(--line); }
.tl { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; width: 100%; }
.tl li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.tl li.done, .tl li.now { color: var(--text); }
.tl-dot { width: 11px; height: 11px; border: 2px solid var(--accent); border-radius: 50%; }
.tl li.done .tl-dot, .tl li.now .tl-dot { background: var(--accent); }
.thumb { width: 26px; height: 18px; margin-left: auto; border-radius: 4px; background: var(--card-b); border: 1px solid var(--line); }
.cap { margin: 0; padding: 0 4px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.demo-nav { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 6px; }
.demo-nav[hidden], .replay[hidden] { display: none; }
.dot { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.dot::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 2px solid var(--accent); }
.dot.on::after { background: var(--accent); }
.replay { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface-2); font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer; }
.demo-on .scenes { position: relative; display: block; min-height: 150px; }
.demo-on .scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s; }
.demo-on .scene.on { opacity: 1; visibility: visible; }
.demo-on .scene.copied .pix-btn .t-a { display: none; }
.demo-on .scene.copied .pix-btn .t-b { display: inline; }
@media (prefers-reduced-motion: reduce) { .scene { transition: none !important; } }.local-kicker { margin: 4px 0 10px; color: var(--accent); font-weight: 700; font-size: .95rem; }
.local-info { padding: 28px 0; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.local-info h2 { font-size: 1.15rem; color: var(--text, inherit); margin: 0 0 8px; }
.local-info h3 { font-size: 1rem; color: var(--text, inherit); margin: 18px 0 6px; }
.local-info a { color: var(--accent); }
.local-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }