:root {
  --orange: #FF8C00; --orange-dark: #D97700; --navy: #001A4D; --navy-2: #0B2A66;
  --bg: #F4F5F8; --bg-alt: #E9ECF2; --surface: #fff;
  --text: #0B1A3A; --muted: #4F5E7D; --border: #D9DEE8;
  --accent-text: #A85400; --accent-ink: #001A4D;
  --dark: #001A4D; --dark-2: #0B2A66; --on-dark: #F2F4F8; --on-dark-muted: #A9B6CF;
  --header-bg: rgba(244, 245, 248, .86);
  --shadow: 0 1px 2px rgba(0, 26, 77, .06), 0 8px 24px rgba(0, 26, 77, .08);
  --shadow-lg: 0 20px 50px rgba(0, 26, 77, .22);
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --container: 1200px; --gutter: 20px; --radius: 14px; --header-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

:root[data-theme="dark"] {
  --bg: #00112F; --bg-alt: #041A44; --surface: #0B2150;
  --text: #EEF1F7; --muted: #A9B6CF; --border: #1C3566;
  --accent-text: #FFA033; --header-bg: rgba(0, 17, 47, .86);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --dark: #000D26; --dark-2: #0B2150;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h) }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden }
img, svg { max-width: 100%; display: block }
a { color: inherit }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) }
.skip { position: absolute; left: -999px; top: 8px; background: var(--orange); color: var(--accent-ink); padding: 8px 14px; border-radius: 8px; z-index: 100 }
.skip:focus { left: 8px }
@media(max-width:480px) { :root { --gutter: 16px } }

/* tipografia de impacto */
h1, h2 { font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: .92; margin: 0 }
h1 { font-size: clamp(50px, 7vw, 92px) }
h2 { font-size: clamp(36px, 5vw, 56px); line-height: .98 }
h1 em, h2 em { font-style: inherit; color: var(--orange) }
.eyebrow { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 18px }
.eyebrow::before { content: ""; width: 30px; height: 3px; background: var(--orange); border-radius: 2px; flex: none }
.on-dark .eyebrow { color: var(--orange) }
.lead { font-size: 19px; color: var(--muted); max-width: 36em; margin: 0 0 28px }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 16px/1.2 var(--font-body); padding: 15px 26px; border-radius: 999px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background .25s, box-shadow .25s, color .25s }
.btn:hover { transform: translateY(-2px) }
.btn--primary { background: var(--orange); color: var(--accent-ink); box-shadow: 0 8px 22px -8px rgba(255, 140, 0, .75) }
.btn--primary:hover { background: #FFA033 }
.btn--ghost { border-color: currentColor; color: var(--text) }
.btn--ghost:hover { background: var(--text); color: var(--bg) }
.on-dark .btn--ghost { color: #fff }
.on-dark .btn--ghost:hover { background: #fff; color: var(--navy) }
.btn--sm { padding: 10px 20px; font-size: 15px }

/* placa branca das logos */
.plate { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; padding: 6px 12px; border: 1px solid var(--border) }
.plate img { height: 40px; width: auto }

/* cabeçalho */
.header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s }
.header.scrolled { box-shadow: var(--shadow); border-color: var(--border) }
.header__in { height: var(--header-h); display: flex; align-items: center; gap: 22px }
.nav { margin-left: auto; display: flex; align-items: center; gap: 26px }
.nav a { font-weight: 600; font-size: 15.5px; text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent; transition: border-color .2s }
.nav a:hover, .nav a.active { border-color: var(--orange) }
.nav .btn { border: 2px solid transparent; padding: 10px 22px; color: var(--accent-ink) }
.theme, .burger { width: 42px; height: 42px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; place-items: center; flex: none }
.theme { border-radius: 50%; display: grid }
.theme svg, .burger svg { width: 20px; height: 20px }
.theme .sun { display: none }
:root[data-theme="dark"] .theme .sun { display: block }
:root[data-theme="dark"] .theme .moon { display: none }
.burger { display: none; border-radius: 10px }
@media(max-width:940px) {
  .burger { display: grid; margin-left: auto }
  .nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--bg); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 22px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateY(-130%); visibility: hidden; opacity: 0; transition: transform .35s var(--ease), opacity .25s, visibility 0s .35s; margin: 0 }
  .nav.open { transform: none; visibility: visible; opacity: 1; transition: transform .35s var(--ease), opacity .25s, visibility 0s }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 18px }
  .nav .btn { margin-top: 14px; text-align: center }
  .header__in { gap: 12px }
}
@media(max-width:420px) { .header .plate img { height: 32px } }

/* hero */
.hero { position: relative; overflow: hidden; padding: clamp(34px, 6vw, 70px) 0 clamp(60px, 8vw, 110px) }
.hero::before { content: ""; position: absolute; right: -12vw; top: -18vw; width: 62vw; height: 62vw; max-width: 880px; max-height: 880px; border-radius: 50%; border: clamp(34px, 6vw, 84px) solid rgba(255, 140, 0, .12); pointer-events: none }
.hero__grid { position: relative; display: grid; gap: 44px; align-items: center }
@media(min-width:960px) { .hero__grid { grid-template-columns: 1.08fr .92fr; gap: 56px } }
.hero .lead { margin-top: 26px }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 28px }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-weight: 600; font-size: 15.5px }
.checks li { display: flex; align-items: center; gap: 9px }
.checks li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001A4D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat; flex: none }
.hero__visual { position: relative; padding: 0 0 26px }
.panel { position: relative; background: var(--dark); color: var(--on-dark); border-radius: 28px 28px 28px 110px; padding: 32px 30px 36px 30px; box-shadow: var(--shadow-lg); overflow: hidden; isolation: isolate }
.panel .waves { height: 160px }
.panel h3 { margin: 0 0 20px; font: 700 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted) }
.stair { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1 }
.stair li { position: relative; padding: 0 0 18px 0; display: flex; gap: 14px; align-items: flex-start }
.stair li:nth-child(2) { margin-left: 18px } .stair li:nth-child(3) { margin-left: 36px } .stair li:nth-child(4) { margin-left: 54px } .stair li:nth-child(5) { margin-left: 72px }
.stair i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: var(--accent-ink); font: 800 15px/34px var(--font-display); font-style: italic; text-align: center }
.stair b { display: block; font: 800 21px/1.05 var(--font-display); font-style: italic; text-transform: uppercase }
.stair span { font-size: 14.5px; color: var(--on-dark-muted); line-height: 1.4; display: block; margin-top: 3px }
.badge { position: absolute; left: -10px; bottom: 0; background: var(--orange); color: var(--accent-ink); border-radius: 18px 18px 18px 4px; padding: 12px 18px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); transform: rotate(-3deg); z-index: 2 }
.badge strong { font: 800 40px/1 var(--font-display); font-style: italic; text-transform: uppercase }
.badge span { font-weight: 700; font-size: 14.5px; line-height: 1.15 }
@media(max-width:520px) { .badge { left: 6px } .panel { border-radius: 22px 22px 22px 70px; padding: 26px 20px 30px } .stair li:nth-child(n) { margin-left: 0 } .stair li:nth-child(2) { margin-left: 5px } .stair li:nth-child(3) { margin-left: 10px } .stair li:nth-child(4) { margin-left: 15px } .stair li:nth-child(5) { margin-left: 20px } }

/* seções */
section { position: relative }
.section { padding: clamp(64px, 9vw, 116px) 0 }
.section--alt { background: var(--bg-alt) }
.on-dark { background: var(--dark); color: var(--on-dark) }
.on-dark .lead { color: var(--on-dark-muted) }
.section__head { margin: 0 0 clamp(32px, 5vw, 54px); max-width: 780px }
.section__head p { color: var(--muted); font-size: 18px; margin: 18px 0 0 }
.on-dark .section__head p { color: var(--on-dark-muted) }
.grid { display: grid; gap: 22px }
.has-waves { overflow: hidden; isolation: isolate }
.has-waves>.container { position: relative; z-index: 1 }
.waves { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; pointer-events: none; overflow: hidden; z-index: 0 }
.waves i { position: absolute; inset: 0; background-repeat: repeat-x; background-size: 1200px 100%; background-position: 0 100%; animation: drift 60s linear infinite }
.waves i:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 180' preserveAspectRatio='none'%3E%3Cpath d='M0 99 Q150 29 300 99 T600 99 T900 99 T1200 99 V180 H0Z' fill='%234F78B3' fill-opacity='0.28'/%3E%3C/svg%3E"); animation-duration: 70s }
.waves i:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 180' preserveAspectRatio='none'%3E%3Cpath d='M0 110 Q150 55 300 110 T600 110 T900 110 T1200 110 V180 H0Z' fill='%23FF8C00' fill-opacity='0.16'/%3E%3C/svg%3E"); animation-duration: 48s; animation-direction: reverse }
.waves i:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 180' preserveAspectRatio='none'%3E%3Cpath d='M0 125 Q150 85 300 125 T600 125 T900 125 T1200 125 V180 H0Z' fill='%23143A78' fill-opacity='0.75'/%3E%3C/svg%3E"); animation-duration: 36s }
@keyframes drift { to { background-position-x: -1200px } }

/* para quem é */
.about { display: grid; gap: 44px; align-items: start }
@media(min-width:960px) { .about { grid-template-columns: 1.1fr .9fr; gap: 60px } }
.about p { color: var(--muted) }
.about p strong { color: var(--text) }
.values { display: grid; gap: 16px }
.value { background: var(--surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); border-top: 4px solid var(--orange) }
.value h3 { margin: 0 0 8px; font: 800 24px/1 var(--font-display); font-style: italic; text-transform: uppercase }
.value p { margin: 0; font-size: 15.5px; color: var(--muted) }

/* recursos */
.services { grid-template-columns: 1fr }
@media(min-width:700px) { .services { grid-template-columns: 1fr 1fr } }
@media(min-width:1000px) { .services { grid-template-columns: repeat(4, 1fr) } }
.card-d { background: var(--dark-2); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius); padding: 26px 24px; transition: transform .35s var(--ease), border-color .35s; position: relative; overflow: hidden }
.card-d:hover { transform: translateY(-6px); border-color: rgba(255, 140, 0, .6) }
.card-d .ic { width: 50px; height: 50px; border-radius: 14px; background: var(--orange); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: 18px }
.card-d .ic svg { width: 26px; height: 26px }
.card-d h3 { margin: 0 0 10px; font: 800 25px/1 var(--font-display); font-style: italic; text-transform: uppercase; color: #fff }
.card-d p { margin: 0; color: var(--on-dark-muted); font-size: 15.5px }

/* por dentro: app + painel */
.inside { display: grid; gap: 38px; align-items: center }
@media(min-width:960px) { .inside { grid-template-columns: 1fr 1fr; gap: 56px } }
.inside p { color: var(--muted); margin: 0 0 16px }
.bullets { list-style: none; padding: 0; margin: 0 0 24px }
.bullets li { padding: 5px 0 5px 22px; position: relative }
.bullets li::before { content: ""; position: absolute; left: 0; top: 16px; width: 10px; height: 3px; background: var(--orange); border-radius: 2px }
.shots { position: relative; display: flex; justify-content: center; padding: 34px 20px 44px; border-radius: 28px; background: var(--dark); overflow: hidden; isolation: isolate }
.shots .waves { height: 130px }

/* mock da tela de contagem do app */
.phone { position: relative; z-index: 1; width: 100%; max-width: 280px; background: #000D26; border-radius: 36px; padding: 12px; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .12) }
.screen { background: #F4F5F8; color: #0B1A3A; border-radius: 26px; overflow: hidden }
.screen__bar { background: #001A4D; color: #fff; padding: 16px 18px 12px; font-size: 13px; line-height: 1.3 }
.screen__bar b { display: block; font: 800 20px/1.05 var(--font-display); font-style: italic; text-transform: uppercase }
.scan { margin: 14px; height: 116px; border-radius: 14px; background: #0B2150; position: relative; overflow: hidden }
.scan::before { content: ""; position: absolute; inset: 28px 40px; background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 6px, #fff 6px 7px, transparent 7px 11px); opacity: .85 }
.scan::after { content: ""; position: absolute; left: 24px; right: 24px; top: 50%; height: 2px; background: var(--orange); box-shadow: 0 0 12px var(--orange) }
.last { margin: 0 14px 14px; background: #fff; border-radius: 14px; padding: 12px 14px; font-size: 13px; border: 1px solid #D9DEE8; line-height: 1.35 }
.last small { color: #4F5E7D; display: block; margin-bottom: 4px }
.last .qty { font: 800 34px/1 var(--font-display); font-style: italic; color: #001A4D }
.last .tag { display: inline-block; margin-top: 6px; font: 700 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: rgba(255, 140, 0, .16); color: #A85400 }
.mic { margin: 0 14px 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #4F5E7D }
.mic span { width: 42px; height: 42px; border-radius: 50%; background: var(--orange); color: #001A4D; display: grid; place-items: center; flex: none }
.mic svg { width: 20px; height: 20px }

/* planos */
.plans { grid-template-columns: 1fr }
@media(min-width:700px) { .plans { grid-template-columns: repeat(2, 1fr) } }
@media(min-width:1100px) { .plans { grid-template-columns: repeat(4, 1fr) } .plans .card { padding: 26px 22px } .plans .price { font-size: 34px } }
.card { background: var(--surface); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow); border-top: 4px solid var(--orange); transition: transform .35s var(--ease); display: flex; flex-direction: column }
.card:hover { transform: translateY(-6px) }
.card h3 { margin: 0 0 8px; font: 800 30px/1 var(--font-display); font-style: italic; text-transform: uppercase }
.card>p { margin: 0 0 14px; color: var(--muted); font-size: 15.5px }
.card ul { margin: 0 0 22px; padding: 0; list-style: none; font-size: 15px; flex: 1 }
.card li { padding: 4px 0 4px 18px; position: relative }
.card li::before { content: ""; position: absolute; left: 0; top: 14px; width: 9px; height: 2px; background: var(--orange) }
.card .btn { align-self: flex-start }
.price { font: 800 40px/1 var(--font-display); font-style: italic; text-transform: uppercase; color: var(--accent-text); margin: 4px 0 16px }
.card--feat { background: var(--dark); color: var(--on-dark) }
.card--feat>p { color: var(--on-dark-muted) }
.card--feat .price { color: var(--orange) }
.card--feat .btn--ghost { color: #fff }
.card--feat .btn--ghost:hover { background: #fff; color: var(--navy) }
:root[data-theme="dark"] .card--feat { background: var(--dark-2); border: 1px solid var(--border); border-top: 4px solid var(--orange) }
.plans-note { margin: 26px 0 0; color: var(--muted); font-size: 15.5px }

/* privacidade */
.lgpd { grid-template-columns: 1fr }
@media(min-width:700px) { .lgpd { grid-template-columns: 1fr 1fr } }
@media(min-width:1060px) { .lgpd { grid-template-columns: repeat(4, 1fr) } }
.lgpd .card h3 { font-size: 26px }
.lgpd .card>p { margin: 0 }
.lgpd-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px }

/* contato */
.contact { display: grid; gap: 44px; align-items: start }
@media(min-width:960px) { .contact { grid-template-columns: 1fr 1fr; gap: 56px } }
.contact__list { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none }
.contact__list li { display: flex; gap: 14px; align-items: center }
.contact__list .ic { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--orange); color: var(--accent-ink); display: grid; place-items: center }
.contact__list svg { width: 22px; height: 22px }
.contact__list small { display: block; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); font-weight: 700 }
.contact__list a { font-weight: 600; font-size: 18px; text-decoration: none; color: #fff }
.contact__list a:hover { color: var(--orange) }
.access { background: #fff; color: #0B1A3A; border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-lg) }
.access h3 { margin: 0 0 6px; font: 800 32px/1 var(--font-display); font-style: italic; text-transform: uppercase }
.access p { margin: 0 0 22px; color: #4F5E7D; font-size: 15.5px }
.access .btn { width: 100% }
.access .btn + .btn { margin-top: 12px }
.access .btn--ghost { color: #0B1A3A }
.access .btn--ghost:hover { background: #0B1A3A; color: #fff }
.access small { display: block; margin-top: 14px; color: #72829F; font-size: 13px }

/* rodapé */
.footer { background: #000D26; color: var(--on-dark-muted); padding: 50px 0 34px; font-size: 15px }
.footer__top { display: grid; gap: 30px }
@media(min-width:800px) { .footer__top { grid-template-columns: 1.3fr 1fr 1fr } }
.footer h4 { margin: 0 0 12px; color: #fff; font: 700 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase }
.footer a { display: block; text-decoration: none; padding: 3px 0; color: var(--on-dark-muted) }
.footer a:hover { color: var(--orange) }
.footer p { margin: 14px 0 0; max-width: 26em }
.footer .by { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13.5px }
.footer .by .plate { padding: 4px 8px }
.footer .by .plate img { height: 24px }
.footer__bot { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; font-size: 13.5px }
.footer__bot a { display: inline }

/* whatsapp flutuante */
.wa { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .45); transition: transform .25s var(--ease) }
.wa:hover { transform: scale(1.08) }
.wa svg { width: 30px; height: 30px }
.wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: ping 2.6s ease-out infinite }
@keyframes ping { 0% { transform: scale(1); opacity: .8 } 100% { transform: scale(1.6); opacity: 0 } }
@media(max-width:600px) { .wa { width: 50px; height: 50px; right: 14px; bottom: 14px } .wa svg { width: 26px; height: 26px } }

/* revelar ao rolar */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s var(--ease); transition-delay: var(--d, 0s) }
.js .rv.in { opacity: 1; transform: none }
@media(prefers-reduced-motion:reduce) { * { animation: none !important; transition: none !important } html { scroll-behavior: auto } }