:root{
  --bg:#0b1020;
  --card:#121932;
  --accent:#4fd1c5;
  --accent-2:#6ea8ff;
  --text:#e6ecff;
  --muted:#9bb0d1;
  --ok:#22c55e;
  --warn:#f59e0b;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#0b1020,#0a0e1a 55%);color:var(--text)}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand svg{width:44px;height:44px}
.brand .name{font-weight:700;font-size:20px;letter-spacing:.2px}
.nav a{margin-left:18px;font-weight:600;color:var(--muted)}
.nav a.active,.nav a:hover{color:var(--text)}

.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:36px 0}
@media (max-width:860px){.hero{grid-template-columns:1fr}}
.badge{display:inline-flex;align-items:center;gap:8px;background-color:#10182e;border:1px solid #1b2746;padding:8px 12px;border-radius:999px;color:var(--muted);font-size:12px}
.title{font-size:44px;line-height:1.1;margin:16px 0 8px}
.subtitle{font-size:18px;color:var(--muted);max-width:60ch}
.cta{display:flex;gap:12px;margin-top:18px}
.button{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:#041127;padding:12px 18px;border-radius:12px;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 10px 30px rgba(79,209,197,.25)}
.button.secondary{background:#0e1630;color:var(--text);border:1px solid #1d2a4a}

.hero-art{min-height:280px;border-radius:18px;background:
  radial-gradient(60% 80% at 20% 10%, rgba(79,209,197,.3), transparent 60%),
  radial-gradient(80% 60% at 80% 30%, rgba(110,168,255,.25), transparent 70%),
  radial-gradient(40% 50% at 50% 80%, rgba(255,255,255,.05), transparent 70%),
  linear-gradient(180deg,#0e1731,#0b1228); border:1px solid #1b2746; position:relative; overflow:hidden}
.hero-art::after{content:""; position:absolute; inset:0; background-image:
  repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 10px);
  opacity:.15;mix-blend-mode:overlay}

.section{padding:28px 0;border-top:1px solid #142044}
.section h2{font-size:26px;margin:0 0 10px}
.section p{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid #1b2746;border-radius:16px;padding:18px;min-height:150px}
.card h3{margin:0 0 8px;font-size:18px}
.kv{display:grid;grid-template-columns:180px 1fr;gap:10px}
@media (max-width:600px){.kv{grid-template-columns:1fr}}
.kv .k{color:var(--muted)}

.form{display:grid;gap:12px;margin-top:8px}
.input, .select, .textarea{width:100%;background:#0f1630;border:1px solid #1c2746;border-radius:12px;color:var(--text);padding:12px 14px}
.textarea{min-height:120px;resize:vertical}
.inline-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.inline-2{grid-template-columns:1fr}}
.success{display:none;margin-top:8px;color:var(--ok);font-weight:700}
.footer{margin-top:28px;padding:20px 0;border-top:1px solid #142044;color:var(--muted);font-size:14px}
.small{font-size:12px;color:var(--muted)}
.icon{display:inline-block;width:18px;height:18px;margin-right:6px;vertical-align:-3px}
.icon.whatsapp{background:conic-gradient(from 180deg at 50% 50%, #25D366, #128C7E, #25D366)}