:root { --bg:#0F1013; --paper:#17191E; --paper2:#1E2128; --ink:#F2EFE8; --ink2:#A5A8B1; --hint:#6F737D; --line:#272A32; --accent:#7B96FF; --accentSoft:#1C2442; color-scheme:dark;
        --green:#4ADE9A; --greenSoft:#14301F; --red:#F87171; --redSoft:#3A1E1E; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:'Fraunces',Georgia,serif; font-weight:600; margin:0; letter-spacing:-0.015em; }
a { color:inherit; text-decoration:none; }
.ph { width:1em; height:1em; display:block; flex-shrink:0; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }

header .wrap { display:flex; align-items:center; justify-content:space-between; height:76px; }
/* marca "Carro :)" (Layout 3 · Marca — site, painel e e-mail): símbolo 34 + nome em Fraunces itálico SOFT 100, 24px, vão 10 */
.logo { display:flex; align-items:center; gap:10px; }
.logo img { width:34px; height:34px; display:block; flex-shrink:0; }
.logo .wm { font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:600; font-variation-settings:'SOFT' 100; font-size:24px; line-height:1; letter-spacing:-0.01em; }
.logo.sm { gap:8px; } .logo.sm img { width:28px; height:28px; } .logo.sm .wm { font-size:20px; }
nav { display:flex; align-items:center; gap:30px; font-size:14.5px; color:var(--ink2); font-weight:500; }
nav a:hover { color:var(--ink); }
.link-btn { color:var(--ink); font-weight:600; border-bottom:1.5px solid var(--ink); padding-bottom:2px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--ink); color:var(--bg); font-weight:600; font-size:16px; border-radius:999px; padding:17px 30px; transition:background .15s; }
.btn:hover { background:var(--accent); color:#0F1013; }
.btn .ph { font-size:18px; }

.hero { display:grid; grid-template-columns:1fr 360px; gap:64px; align-items:center; padding:64px 0 88px; }
.tag { display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 8px; font-size:13px; color:var(--ink2); font-weight:500; }
.tag b { background:var(--greenSoft); color:var(--green); border-radius:999px; padding:2px 9px; font-size:12px; }
.hero h1 { font-size:60px; line-height:1.04; margin:24px 0 22px; }
.hero h1 em { font-style:italic; color:var(--accent); }
.hero p { color:var(--ink2); font-size:19px; line-height:1.55; margin:0 0 32px; max-width:560px; }
.row { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.muted { color:var(--hint); font-size:13.5px; display:flex; gap:7px; align-items:center; }

/* celular ilustrativo */
.phone { background:#2A2D35; border:1px solid #3A3E48; border-radius:44px; padding:12px; box-shadow:0 40px 90px -30px rgba(123,150,255,.35); transform:rotate(2deg); }
.screen { background:#0A0E17; border-radius:34px; padding:22px 16px 26px; color:#F4F6FB; display:flex; flex-direction:column; gap:10px; }
.screen .t { font-family:'Inter'; font-size:12px; color:#8D96AF; display:flex; justify-content:space-between; padding:0 6px 8px; }
.screen h3 { font-family:'Inter'; font-size:18px; font-weight:700; padding:0 6px 6px; }
.card { background:#12182A; border:1px solid #1D2438; border-radius:16px; padding:13px; display:flex; gap:11px; align-items:center; }
.card .i { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:18px; flex-shrink:0; }
.card b { font-size:13px; display:block; } .card small { font-size:11.5px; color:#8D96AF; }

section { padding:80px 0; border-top:1px solid var(--line); }
.kicker { font-size:13px; color:var(--accent); font-weight:600; letter-spacing:.02em; margin-bottom:12px; }
section h2 { font-size:42px; line-height:1.1; max-width:640px; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.s { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:28px; }
.s .n { font-family:'Fraunces'; font-size:44px; font-weight:600; color:var(--accent); line-height:1; }
.s .n .ph { font-size:34px; }
.s .n small { font-family:'Inter'; font-size:14px; color:var(--hint); font-weight:500; margin-left:6px; }
.s p { margin:16px 0 0; font-size:16px; line-height:1.5; color:var(--ink2); } .s p b { color:var(--ink); font-weight:600; }

.plans { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; }
.plan { position:relative; background:var(--paper); border:1.5px solid var(--line); border-radius:26px; padding:32px; cursor:pointer; transition:border-color .15s, transform .15s; }
.plan:hover { transform:translateY(-2px); }
.plan.on { border-color:var(--accent); background:linear-gradient(180deg, var(--accentSoft), var(--paper) 70%); box-shadow:0 24px 50px -30px rgba(123,150,255,.45); }
.plan .top { display:flex; justify-content:space-between; align-items:center; }
.plan .name { font-size:15px; font-weight:600; color:var(--ink2); }
.radio { width:24px; height:24px; border-radius:50%; border:1.5px solid var(--hint); display:grid; place-items:center; }
.plan.on .radio { border-color:var(--accent); background:var(--accent); } .plan.on .radio::after { content:''; width:9px; height:9px; border-radius:50%; background:var(--bg); }
.big { font-family:'Fraunces'; font-size:58px; font-weight:600; margin:18px 0 4px; letter-spacing:-0.03em; } .big small { font-family:'Inter'; font-size:16px; color:var(--hint); font-weight:500; letter-spacing:0; }
.plan .desc { color:var(--ink2); font-size:14.5px; }
.badge { position:absolute; top:-13px; right:28px; background:var(--accent); color:#0F1013; font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; }
.save { display:inline-block; margin-top:14px; background:var(--greenSoft); color:var(--green); font-weight:600; font-size:13px; padding:5px 11px; border-radius:999px; }
.cta { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:32px; }
#fine { color:var(--hint); font-size:13px; text-align:center; max-width:520px; line-height:1.5; margin:0; }

.compare { margin-top:44px; background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:8px 32px; }
.cr { display:grid; grid-template-columns:1fr 140px 140px; align-items:center; padding:17px 0; border-top:1px solid var(--line); font-size:15px; }
.cr:first-child { border-top:0; font-size:12.5px; color:var(--hint); font-weight:600; letter-spacing:.04em; }
.cr > :not(:first-child) { text-align:center; display:flex; justify-content:center; }
.cr .ph { font-size:18px; color:var(--green); } .cr .x { color:var(--hint); } .cr .p { color:var(--accent); }
.extra { margin-top:20px; display:flex; gap:18px; align-items:center; background:var(--accentSoft); border-radius:20px; padding:22px 26px; }
.extra .ph { font-size:26px; color:var(--accent); } .extra p { margin:4px 0 0; color:var(--ink2); line-height:1.5; font-size:14.5px; }

.faq { display:grid; grid-template-columns:320px 1fr; gap:48px; }
details { border-bottom:1px solid var(--line); }
summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; font-size:17px; font-weight:600; }
summary::-webkit-details-marker { display:none; }
summary .ph { font-size:20px; color:var(--ink2); transition:transform .2s; } details[open] summary .ph { transform:rotate(180deg); }
details p { margin:0 0 22px; color:var(--ink2); line-height:1.65; font-size:15.5px; max-width:620px; }

.final { background:var(--paper); border:1px solid var(--line); color:var(--ink); background-image:radial-gradient(600px 240px at 50% 0%, var(--accentSoft), transparent); border-radius:32px; padding:64px 40px; text-align:center; margin:16px 0 0; }
.final h2 { font-size:46px; margin:0 auto; max-width:700px; } .final p { color:var(--ink2); margin:16px 0 30px; font-size:17px; }
.final .btn:hover { background:var(--accent); }
footer .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:40px 24px 48px; color:var(--hint); font-size:13.5px; }
footer .links { display:flex; gap:24px; }

@media (max-width: 880px) {
  nav a:not(.link-btn) { display:none; }
  .hero { grid-template-columns:1fr; padding:32px 0 56px; gap:40px; }
  .hero h1 { font-size:40px; } .hero p { font-size:17px; } .hero .btn { width:100%; }
  .phone { max-width:320px; margin:0 auto; transform:none; }
  section { padding:56px 0; } section h2 { font-size:30px; }
  .steps, .plans, .faq { grid-template-columns:1fr; } .faq { gap:8px; }
  .plan { padding:24px; } .big { font-size:46px; }
  .compare { padding:4px 18px; } .cr { grid-template-columns:1fr 64px 84px; font-size:14px; }
  .final { padding:44px 22px; border-radius:24px; } .final h2 { font-size:32px; } .final .btn, .cta .btn { width:100%; }
}

/* ---------- fluxo de compra (conta, retorno, minha assinatura) ---------- */
.flow { max-width:460px; margin:0 auto; padding:40px 0 72px; display:flex; flex-direction:column; gap:22px; }
.flow h1 { font-size:36px; line-height:1.1; }
.flow .lead { color:var(--ink2); font-size:16px; line-height:1.55; margin:-6px 0 0; }
.summary { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--accentSoft); border:1px solid var(--accent); border-radius:16px; padding:14px 18px; }
.summary b { display:block; font-size:15px; } .summary span { color:var(--ink2); font-size:13.5px; }
.summary a { color:var(--accent); font-weight:600; font-size:14px; }
.steps-bar { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--hint); font-weight:600; }
.steps-bar .st { display:flex; align-items:center; gap:7px; } .steps-bar .st i { width:22px; height:22px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-style:normal; font-size:12px; }
.steps-bar .st.on { color:var(--ink); } .steps-bar .st.on i { background:var(--accent); border-color:var(--accent); color:#0F1013; }
.steps-bar .sep { width:18px; height:1px; background:var(--line); }
form { display:flex; flex-direction:column; gap:16px; }
label { display:flex; flex-direction:column; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink2); }
input[type=text], input[type=email], input[type=password] { font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 16px; outline:none; transition:border-color .15s, box-shadow .15s; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accentSoft); }
input[aria-invalid=true] { border-color:var(--red); }
.check { flex-direction:row; align-items:flex-start; gap:10px; font-weight:500; line-height:1.5; }
.check input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--accent); flex-shrink:0; }
.check a, .link { color:var(--accent); font-weight:600; }
.code { display:flex; gap:10px; } .code input { width:100%; text-align:center; font-size:22px; font-weight:700; padding:14px 0; letter-spacing:.3em; }
.err { background:var(--redSoft); color:var(--red); border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.45; }
.err:empty { display:none; }
.ok { background:var(--greenSoft); color:var(--green); border-radius:12px; padding:12px 14px; font-size:14px; }
.btn.full { width:100%; } .btn[disabled] { opacity:.6; pointer-events:none; }
.btn.danger { background:transparent; color:var(--red); border:1.5px solid var(--red); } .btn.danger:hover { background:var(--redSoft); color:var(--red); }
.btn.ghost { background:transparent; color:var(--ink); border:1.5px solid var(--line); } .btn.ghost:hover { border-color:var(--ink); background:transparent; color:var(--ink); }
.spin { width:20px; height:20px; border-radius:50%; border:2.5px solid rgba(15,16,19,.3); border-top-color:#0F1013; animation:spin .8s linear infinite; }
.spin.big { width:34px; height:34px; border-width:3px; border-color:rgba(123,150,255,.25); border-top-color:var(--accent); }
@keyframes spin { to { transform:rotate(360deg); } }
.center { text-align:center; align-items:center; } .center .lead { margin:0; }
.badge-ico { width:76px; height:76px; border-radius:24px; display:grid; place-items:center; font-size:36px; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:6px 20px; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-top:1px solid var(--line); font-size:14.5px; } .kv:first-child { border-top:0; }
.kv span { color:var(--ink2); } .kv b { font-weight:600; text-align:right; }
.pill { display:inline-block; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; }
.pill.g { background:var(--greenSoft); color:var(--green); } .pill.r { background:var(--redSoft); color:var(--red); } .pill.n { background:var(--paper2); color:var(--ink2); }
.row-card { display:flex; align-items:center; gap:14px; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px 18px; }
.row-card .ph { font-size:22px; color:var(--accent); } .row-card div { flex:1; } .row-card b { display:block; } .row-card small { color:var(--ink2); }
.note { color:var(--hint); font-size:13px; line-height:1.5; text-align:center; }
[hidden] { display:none !important; }
@media (max-width: 880px) { .flow { padding:24px 0 56px; } .flow h1 { font-size:30px; } }
.legal h2 { font-size:22px; margin-top:12px; } .legal p { color:var(--ink2); line-height:1.7; margin:0; font-size:15.5px; }
.flow section { padding:0; border-top:0; display:flex; flex-direction:column; gap:18px; }
.flow section[hidden] { display:none; }
.flow section.center { align-items:center; text-align:center; }