/* System Hub – minimal, modern CSS */
:root{
  --bg:#0b0d10;
  --card:#101418;
  --muted:#9aa4af;
  --text:#e9edf2;
  --primary:#2ea44f; /* green */
  --accent1:#06b6d4; /* cyan */
  --accent2:#7c3aed; /* violet */
  --ring: rgba(46,164,79,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;background:rgba(11,13,16,.7);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid #1b2229;z-index:50}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:36px;width:36px;object-fit:contain}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid #23303a;padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.02)}
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30%;z-index:-1;
  background:
  radial-gradient(80% 60% at 50% 0%, rgba(124,58,237,.25), transparent 60%),
  radial-gradient(60% 50% at 80% 30%, rgba(34,197,94,.20), transparent 50%),
  radial-gradient(60% 50% at 20% 30%, rgba(6,182,212,.25), transparent 50%);
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:32px;padding:60px 0 90px}
@media(min-width:992px){.hero-grid{grid-template-columns:7fr 5fr;align-items:center}}
h1{font-size:42px;line-height:1.1;margin:16px 0 0}
@media(min-width:768px){h1{font-size:56px}}
p.lead{color:var(--muted);max-width:640px}
.btn{display:inline-block;border-radius:999px;padding:12px 18px;border:1px solid #22303a;transition:.2s ease;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent2),var(--accent1),var(--primary));border:0;color:#0b0d10;font-weight:600}
.btn.outline:hover{border-color:#35576a;color:#cfe7f6}
.row{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.kv{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.card{background:var(--card);border:1px solid #1b2229;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card .content{padding:22px}
.grid{display:grid;gap:20px}
@media(min-width:768px){.grid.cols-2{grid-template-columns:1fr 1fr} .grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.section{padding:72px 0}
.section h2{font-size:32px;margin:0 0 8px}
.section .sub{color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{border:1px solid #26313a;border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted)}
.product{display:flex;gap:16px;align-items:flex-start}
.product img{height:48px;width:auto;object-fit:contain}
.stars{color:#fbbf24}
.cta{border:1px solid #23303a;border-radius:24px;padding:30px;background:
  radial-gradient(80% 60% at 50% 0%, rgba(124,58,237,.15), transparent 60%),
  radial-gradient(60% 50% at 80% 30%, rgba(34,197,94,.15), transparent 50%),
  radial-gradient(60% 50% at 20% 30%, rgba(6,182,212,.2), transparent 50%);
}
.footer{border-top:1px solid #1b2229;padding:40px 0;color:var(--muted)}
small, .fine{color:var(--muted)}
hr.sep{border:0;border-top:1px solid #1b2229;margin:24px 0}


/* Modal styles */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:1000}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-card{
  position:relative;z-index:1001;max-width:560px;margin:6vh auto;background:var(--card);
  border:1px solid #1b2229;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.4);
  padding:22px;
}
.modal-close{
  position:absolute;top:8px;right:12px;background:transparent;border:0;color:var(--muted);
  font-size:28px;line-height:1;cursor:pointer
}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
input[type=text], input[type=email], textarea{
  background:#0e1216;color:var(--text);border:1px solid #1f2a33;border-radius:10px;padding:10px 12px;
  outline:none;box-shadow:0 0 0 0 var(--ring);transition:.15s ease;
}
input:focus, textarea:focus{border-color:#2b4454;box-shadow:0 0 0 6px var(--ring)}
.field.check{flex-direction:row;align-items:center}
.modal-card h3{margin:6px 0 6px;font-size:22px}


/* Toggle switch */
.toggle {display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}
.toggle input{appearance:none;width:36px;height:20px;border-radius:20px;background:#444;position:relative;outline:none;cursor:pointer;transition:.3s}
.toggle input:checked{background:#3b82f6}
.toggle input::before{content:"";position:absolute;width:16px;height:16px;top:2px;left:2px;background:#fff;border-radius:50%;transition:.3s}
.toggle input:checked::before{transform:translateX(16px)}


/* Toggle switch */
.switch { display:inline-flex; align-items:center; gap:10px; }
.switch input { appearance:none; -webkit-appearance:none; width:48px; height:28px; background:#1b2229; border:1px solid #22303a; border-radius:999px; position:relative; outline:none; cursor:pointer; transition:.2s ease; }
.switch input:before { content:""; width:22px; height:22px; border-radius:999px; background:#6b7280; position:absolute; top:2px; left:2px; transition:.2s ease; }
.switch input:checked { background:linear-gradient(90deg,var(--accent2),var(--accent1),var(--primary)); border-color:transparent; }
.switch input:checked:before { left:24px; background:#0b0d10; }
.switch span { font-size:14px; color:var(--muted); }

.back-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(90deg, var(--primary), var(--accent1), var(--accent2));
  padding: 10px 16px;
  text-align: left;
}
.back-bar .btn {
  background: #fff;
  color: #000;
  border: none;
  font-size: 0.9rem;
}