:root { --bg:#0b1020; --card:#121a33; --txt:#eef2ff; --muted:#b9c2e6; --acc:#8dd7ff; --acc2:#9bffb7; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:linear-gradient(180deg,var(--bg),#070a14); color:var(--txt); }
a{ color:inherit; }

.wrap{ max-width:1040px; margin:0 auto; padding:28px 18px 64px; }
.top{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 0 22px; }
.brand{ font-weight:700; letter-spacing:.2px; }
.pill{ display:inline-flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:var(--muted); text-decoration:none; }

.hero{ padding:28px 0 10px; }
h1{ font-size:clamp(28px,4vw,44px); line-height:1.05; margin:0 0 12px; }
.lead{ color:var(--muted); font-size:clamp(16px,2vw,18px); max-width:70ch; }

.ctaRow{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px; text-decoration:none; font-weight:650;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.btn.primary{ background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#081022; border:none; }

.grid{ display:grid; gap:14px; grid-template-columns:repeat(12,1fr); margin-top:22px; }
.card{ background:rgba(18,26,51,.86); border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:16px; }
.span6{ grid-column:span 6; }
.span12{ grid-column:span 12; }

.kicker{ color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.14em; }
h2{ margin:8px 0 10px; font-size:22px; }
h3{ margin:0 0 6px; font-size:16px; }
ul{ margin:10px 0 0 18px; color:var(--muted); }
.muted{ color:var(--muted); }
.small{ font-size:12px; color:var(--muted); }

.services a{ text-decoration:none; }
.services .item{ display:flex; justify-content:space-between; gap:12px; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); margin-top:10px; }
.services .item:hover{ border-color:rgba(141,215,255,.45); }

.tag{ font-size:12px; color:#0b1020; background:linear-gradient(90deg,var(--acc),var(--acc2)); padding:4px 8px; border-radius:999px; height:fit-content; white-space:nowrap; }

.faq details{ border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); border-radius:14px; padding:12px 12px; margin-top:10px; }
.faq summary{ cursor:pointer; font-weight:650; }

footer{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.10); color:var(--muted); font-size:14px; }

/* small helpers */
.mt8{ margin-top:8px; }
.mt10{ margin-top:10px; }
.mt14{ margin-top:14px; }

@media (max-width:820px){
  .span6{ grid-column:span 12; }
}