:root {
  --bg: #0a0a0a;
  --ink: #111;
  --ink-2: #555;
  --ink-3: #777;
  --paper: #ffffff;
  --muted: #f5f5f5;
  --brand: #111111;
  --accent: #16a34a; /* whatsapp-like */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif; color: var(--ink); background: #fafafa;}
.container { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.row { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px){ .row-2 { grid-template-columns: 1.2fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr);} .grid-4 { grid-template-columns: repeat(4, 1fr);} .grid-2 { grid-template-columns: repeat(2, 1fr);}}

.topbar { background:#111; color:#eee; font-size: 14px; }
.topbar a { color: #eee; text-decoration: none; opacity: .9; }
.topbar a:hover { opacity: 1; }

.header { position: sticky; top:0; z-index:10; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border-bottom:1px solid #eee;}
.nav { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight: 800; letter-spacing:.5px; }
.brand-badge { width:36px; height:36px; border-radius:12px; background:#111; color:#fff; display:grid; place-content:center; font-weight:900; }
.menu { display:none; gap:20px; font-weight:600; font-size:14px;}
@media(min-width:900px){ .menu{display:flex;} }
.menu a { color:#222; text-decoration:none; }
.cta-btn { background:#111; color:#fff; padding:10px 16px; border-radius:14px; text-decoration:none; font-weight:700; }
.cta-btn.outline { background:transparent; color:#111; border:1px solid #111; }

.hero { position: relative; overflow:hidden; background: radial-gradient(800px 400px at 20% 20%, #e9e9e9, transparent), radial-gradient(800px 400px at 80% 20%, #ececec, transparent); }
.hero h1 { font-size: clamp(28px, 5vw, 52px); line-height:1.05; margin:0; }
.hero p { font-size: 18px; color:#444; }

.card { background:#fff; border:1px solid #eee; border-radius:16px; padding:18px; }
.badge { display:inline-grid; place-content:center; width:36px; height:36px; border-radius:10px; background:#f3f3f3; margin-right:10px; }
.kicker { color:#666; font-size:14px; }

.section { padding:72px 0; }
.section.dark { background:#111; color:#eee; }
.section.dark .muted { color:#cfcfcf; }
.section h2 { font-size: clamp(22px, 3.2vw, 34px); margin:0 0 20px; }
.list { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.list li { display:flex; gap:8px; align-items:center; color:#444; }

.grid { display:grid; gap:16px; }
.footer { border-top:1px solid #eee; background:#fff; }
.footer .cols { display:grid; gap:16px; }
@media(min-width:900px){ .footer .cols{ grid-template-columns: 1.2fr .8fr .8fr .8fr; } }
.footer a { color:#222; text-decoration:none; }
.floating-wa { position:fixed; right:16px; bottom:16px; background:#22c55e; color:#fff; padding:12px 16px; border-radius:999px; font-weight:700; text-decoration:none; display:flex; gap:8px; align-items:center; box-shadow:0 8px 24px rgba(0,0,0,.18); }
</style>