/* ---------- Root / Tokens ---------- */
:root{
  --bg: #0a0b0e;
  --panel: #0f1116;
  --panel-2:#131722;
  --text: #e9eef4;
  --muted:#a6b0bf;
  --accent:#6aa3ff;
  --accent-2:#8ae6ff;
  --border:#1d2330;
  --ok:#25d07d;
  --warn:#ffd166;
  --danger:#ff6b6b;
  --radius: 14px;
  --shadow: 0 10px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}
.container{width:min(1100px,92vw);margin-inline:auto}
.flex{display:flex;gap:20px}
.between{justify-content:space-between;align-items:center}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#0b0d12,rgba(11,13,18,.85));
  border-bottom:1px solid var(--border);backdrop-filter: blur(10px)
}
.logo{font-weight:700;letter-spacing:.5px;color:#fff}
.logo span{color:var(--accent)}
/* NEW: brand + nav wrappers used in HTML */
.brand{display:inline-flex;gap:10px;align-items:center;color:#fff;font-weight:700}
.nav{display:flex;align-items:center;gap:18px}
nav a{color:var(--text);opacity:.9;margin-left:18px}
nav a.active{color:var(--accent)}

/* ---------- Hero / Sections ---------- */
.hero{padding:80px 0;background:
  radial-gradient(80% 100% at 50% 0%, rgba(106,163,255,.12),rgba(0,0,0,0) 60%),
  linear-gradient(180deg,rgba(19,23,34,.7), rgba(19,23,34,0))
}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 14px}
.lead{color:var(--muted);max-width:760px}
.cta-row{margin-top:24px}

/* Buttons: keep .btn, add .button alias for HTML consistency */
.btn,
.button{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#081223;font-weight:600;
  padding:12px 18px;border-radius:10px;border:1px solid transparent
}
.btn.secondary,
.button.secondary{background:transparent;border-color:var(--border);color:var(--text)}
.badge{display:inline-block;background:var(--panel-2);border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:var(--muted);font-size:13px}

/* ---------- Generic Section ---------- */
.section{padding:64px 0;border-top:1px solid var(--border);background:var(--panel)}
.section.alt{background:var(--panel-2)}
.section h2{margin:0 0 10px}
.section p.desc{color:var(--muted);margin:0 0 28px}

/* ---------- Cards / Grid ---------- */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.0));
  border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px;box-shadow:var(--shadow)
}
.card h3{margin:0 0 6px}
.kicker{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.12em}

/* NEW: .panel container (used in index hero + closing CTA) */
.panel{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

/* NEW: logo row styling used in index */
.logos{display:flex;gap:18px;align-items:center;opacity:.9}
.logos img{height:24px}

/* ---------- Steps ---------- */
.steps{display:grid;gap:14px;margin:20px 0 0;padding:0;list-style:none}
.steps li{
  border:1px dashed var(--border);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.02)
}
.step-num{
  display:inline-grid;place-items:center;width:24px;height:24px;
  background:var(--accent);color:#081223;border-radius:50%;font-weight:700;margin-right:8px
}

/* ---------- Footer ---------- */
.site-footer{background:#0b0d12;border-top:1px solid var(--border);padding:28px 0}
.site-footer p{color:var(--muted);margin:4px 0}

/* ---------- Helpers ---------- */
.mute{color:var(--muted)}
/* NEW: alias for mixed usage across pages */
.muted{color:var(--muted)}
.note{font-size:14px;color:var(--muted)}
.callout{border-left:3px solid var(--accent);padding-left:12px}
.table-like{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table-like .row{display:grid;grid-template-columns:220px 1fr;border-top:1px solid var(--border)}
.table-like .row:first-child{border-top:0}
.table-like .cell{padding:12px 14px}

/* ---------- Accessibility ---------- */
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}