:root{
  --brand:#4f46e5;
  --brand-2:#06b6d4;
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;
  --card:#ffffff;
  --ring:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Inter,system-ui;line-height:1.5}
a{color:var(--brand);text-decoration:none}
.container{max-width:1100px;margin-inline:auto;padding:0 16px}
header{
  position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--border); z-index:50
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.nav-left{display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:34px;width:auto}
.brand{font-weight:800;letter-spacing:.3px}
.badge{font-size:12px;padding:2px 8px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.nav a{font-weight:600;color:var(--text)}
.nav-links{display:flex;gap:20px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:12px;border:1px solid var(--border);font-weight:700;
  transition:transform .05s ease, box-shadow .2s ease, background .2s ease,color .2s ease;
  box-shadow:0 1px 0 #0000000d;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #00000014}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;border:none}
.btn.ghost{background:#fff}
.hero{padding:56px 0 32px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.hero h1{font-size:clamp(28px,4.2vw,44px);line-height:1.1;margin:10px 0}
.hero p{color:var(--muted);font-size:18px;margin:6px 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-weight:600;color:var(--muted);font-size:14px;background:#fff}
.mock{
  position:relative;border:1px solid var(--border);border-radius:28px;background:#fff;box-shadow:0 10px 30px #00000014;
  padding:18px;min-height:480px;overflow:hidden
}
.phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:110px;height:20px;border-radius:10px;background:#1111;backdrop-filter:blur(3px)}
.bubble{max-width:78%;padding:10px 12px;border-radius:16px;margin:8px 0;font-size:14px;box-shadow:0 1px 0 #0000000a}
.bubble.me{background:linear-gradient(90deg,#eef2ff,#f0f9ff);align-self:flex-end;border:1px solid var(--ring)}
.bubble.you{background:#f8fafc;border:1px solid var(--ring)}
.phone{display:flex;flex-direction:column;gap:6px;margin-top:38px}
.token{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px dashed var(--border);border-radius:10px;background:#f8fafc;color:#334155;font-weight:700}
.token small{font-weight:600;color:#64748b}
section{padding:56px 0;border-top:1px solid var(--border)}
.section-title{font-size:24px;margin:4px 0 18px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.card h3{margin:8px 0 6px}
.muted{color:var(--muted)}
.how{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.step{border:1px dashed var(--border);border-radius:14px;padding:14px;background:#fff}
.step span{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;background:var(--text);color:#fff;border-radius:999px;font-weight:800}
details{border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:#fff}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:700}
footer{padding:28px 0;color:#64748b}
.footer-cols{display:grid;gap:16px;grid-template-columns:2fr 1fr 1fr}
.legal{font-size:12px;margin-top:14px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width: 920px){
  .hero{grid-template-columns:1fr;gap:18px;padding-top:36px}
  .grid{grid-template-columns:1fr}
  .how{grid-template-columns:1fr 1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .how{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
}


/* --- Fixes for "Como funciona" steps (accessible ordered list) --- */
.how-ol{counter-reset: step; display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); padding-left:0; margin:0}
.how-ol li{
  list-style:none; border:1px dashed var(--border); border-radius:14px; padding:16px; background:#fff; min-height:120px;
  display:flex; flex-direction:column; gap:8px
}
.how-ol li::before{
  counter-increment: step;
  content: counter(step);
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:999px; background:var(--text); color:#fff; font-weight:800; margin-bottom:6px;
}
.how-ol b{display:block; margin-bottom:4px}
.how-ol .muted{margin-top:auto}

/* Anchor offset so in-page links don't hide content under sticky header */
:target{scroll-margin-top:90px}

/* Slightly larger tap targets for nav on mobile */
.nav a{padding:6px 4px}

/* Responsive tweaks */
@media (max-width: 920px){
  .how-ol{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .how-ol{grid-template-columns:1fr}
}