:root{
  --bg:#0b1220;--card:#0f172a;--muted:#94a3b8;--text:#e5e7eb;
  --accent:#22c55e;--accent2:#fb8500;--ring:#38bdf8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px}
.navlinks{display:flex;gap:20px}
.navlinks a{opacity:.9}
.navlinks a:hover{opacity:1;text-decoration:underline}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #1f2937;background:#111827;color:#f8fafc;cursor:pointer}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn:hover{border-color:var(--ring);box-shadow:0 0 0 3px rgba(56,189,248,.25)}
.btn-primary{background:linear-gradient(135deg,var(--accent),#16a34a)}
.btn-warning{background:linear-gradient(135deg,var(--accent2),#ff7a00)}
.hero{background:url('./assets/hero.svg') no-repeat center/cover;border-bottom:1px solid #1f2937}
.hero .wrap{padding:72px 24px}
.h-title{font-size:44px;line-height:1.1;margin:16px 0 12px 0;color:#0a0a0a}
.h-title strong{color:#000}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.badge{background:#111827;border:1px solid #1f2937;color:#e5e7eb;padding:8px 12px;border-radius:999px;font-size:14px}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid #1f2937;border-radius:16px;padding:16px}
.card p{color:var(--muted);margin:0}
.section{padding:40px 0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:#0b1329;border:1px solid #1f2937;border-radius:14px;padding:16px;text-align:center}
.kpi b{font-size:24px}
.footer{border-top:1px solid #1f2937;padding:20px 0;color:var(--muted)}
.input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #334155;background:#0b1320;color:#e5e7eb}
.select{padding:10px;border-radius:10px;border:1px solid #334155;background:#0b1320;color:#e5e7eb}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.product{background:#0f172a;border:1px solid #1f2937;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.product img{width:100%;height:160px;object-fit:cover;background:#0b1220}
.product .info{padding:12px;display:flex;flex-direction:column;gap:6px}
.tag{font-size:12px;border:1px solid #334155;color:#9ca3af;padding:4px 8px;border-radius:999px;width:max-content}
.actions{display:flex;gap:8px;margin-top:8px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #1f2937;padding:8px 6px;text-align:left}
.small{font-size:12px;color:var(--muted)}
.cta-row{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
/* --- Instagram button --- */
/* Instagram button */
.btn-ig{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; border:0; color:#fff;
  background: radial-gradient(115% 115% at 0% 100%, #feda75 0%, #fa7e1e 35%, #d62976 65%, #962fbf 85%, #4f5bd5 100%);
  padding:12px 16px; border-radius:14px; cursor:pointer;
  box-shadow: 0 8px 24px rgba(214,41,118,0.35);
}
.btn-ig:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(214,41,118,0.45); }
.btn-ig:active{ transform: translateY(0); }
.btn-ig:focus{ outline:none; box-shadow: 0 0 0 3px rgba(79,91,213,.35); }
.btn-ig svg{ width:18px; height:18px; flex:0 0 18px }


@media(max-width:992px){.products{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.products{grid-template-columns:1fr}}