:root{
  --bg:#0e1418; --bg-alt:#111a20; --card:#0f1820;
  --text:#e8f0f5; --muted:#9bb0bd;
  --accent:#19c3d8; --accent-2:#0fb3c8;
  --ring: rgba(25,195,216,.35); --shadow: 0 10px 25px rgba(0,0,0,.35);
}
*{ box-sizing:border-box }
html,body{ margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial; color:var(--text); background:var(--bg) }
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
img{ max-width:100%; display:block }

/* Container + sections */
.container{ width:min(1040px, 94%); margin-inline:auto }
.section{ padding:clamp(3.25rem, 6vw, 6rem) 0 }
.section-alt{ background:var(--bg-alt) }

/* Header / Nav */
.header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(to bottom, rgba(10,14,18,.8), rgba(10,14,18,.35)); border-bottom:1px solid rgba(255,255,255,.06); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0 }
.brand{ font-weight:800; letter-spacing:.3px; color:var(--text); text-decoration:none; font-size:1.15rem }
.brand span{ color:var(--accent) }
.menu{ display:flex; align-items:center; gap:1rem }
.menu a{ color:var(--text); text-decoration:none; padding:.55rem .9rem; border-radius:999px; opacity:.9 }
.menu a:hover{ opacity:1; background:rgba(255,255,255,.04) }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1rem; border-radius:.9rem;
  font-weight:700; border:1px solid transparent; cursor:pointer; text-decoration:none }
.btn-primary{ background:var(--accent); color:#042028; box-shadow:0 8px 20px var(--ring) }
.btn-primary:hover{ transform:translateY(-1px); background:var(--accent-2) }
.btn-outline {
  border-color: rgba(255, 255, 255, .14);
  color: var(--text);
  background: transparent;
  transition: all .2s ease;
}

.btn-outline:hover {
  background: rgba(25, 195, 216, .12);
  border-color: var(--accent);
  color: var(--accent);
}

.copy.btn {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
  color: var(--text);
  font-weight: 600;
}

.copy.btn:hover {
  background: var(--accent);
  color: #042028;
}


/* Cards / Features (used on index) */
.card{ background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:20px; overflow:hidden; box-shadow:var(--shadow) }
.pill{ display:inline-block; background:rgba(25,195,216,.12); color:var(--accent); border:1px solid var(--ring); padding:.6rem .8rem; border-radius:.8rem; font-weight:700 }
.feature{ background:var(--card); border:1px solid rgba(255,255,255,.06); padding:1.2rem; border-radius:16px; text-align:center; box-shadow:var(--shadow) }

/* Footer */
.footer{ border-top:1px solid rgba(255,255,255,.08); background:#0a1014; padding:1.2rem 0; margin-top:2rem }
.footer__inner{ display:flex; align-items:center; justify-content:space-between }
.backtop{ color:var(--muted); text-decoration:none }
.backtop:hover{ color:var(--text) }

/* Prose for legal pages */
.wrap{ width:min(900px,94%); margin:2.25rem auto }
h1{ font-size:clamp(1.8rem,2.2vw,2.4rem); margin:.2rem 0 1rem }
h2{ font-size:clamp(1.2rem,1.2vw+1rem,1.4rem); margin:1.6rem 0 .75rem }
p,li{ color:var(--text); line-height:1.65; margin:.65rem 0 }
.muted{ color:var(--muted) }

/* Mobile menu */
@media (max-width: 900px){
  html{ scroll-padding-top:72px }
  .menu{ position:fixed; top:64px; right:16px; left:16px; flex-direction:column; background:#0a1116; border:1px solid rgba(255,255,255,.12);
    padding:.6rem; border-radius:14px; display:none; box-shadow:var(--shadow) }
  .menu.open{ display:flex }
}