/* ========== RESET ========== */
* { margin:0; padding:0; box-sizing:border-box; font-family: "Inter", Arial, sans-serif; }

/* ========== THEME ========== */
:root{
  --bg:#0d0d0f;
  --card:#16161a;
  --accent:#4d88ff;
  --accent2:#7af0d6;
  --text:#e6e6e6;
  --glow: 0 0 12px rgba(77,136,255,0.45);
}

html,body{height:100%; background:var(--bg); color:var(--text);}

/* HEADER */
header{
  background:#121216;
  border-bottom:1px solid rgba(255,255,255,0.04);
  padding:1rem 2rem;
  position:sticky; top:0; z-index:1000;
}
header nav{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
header nav div strong{ font-size:1.4rem; color:var(--accent2); text-shadow:0 0 8px rgba(122,240,214,0.12); }
.menu a{
  margin-left:0.6rem; padding:0.45rem 0.9rem; border-radius:8px; text-decoration:none;
  color:var(--text); background:#1f1f23; border:1px solid transparent; transition:.22s;
}
.menu a:hover{ border-color:var(--accent); color:var(--accent); box-shadow:var(--glow); transform:translateY(-2px); }
.menu a.active{ background:linear-gradient(90deg, rgba(77,136,255,0.12), rgba(122,240,214,0.06)); border-color:var(--accent); color:var(--accent); }

/* MAIN / CARD */
main{ max-width:1100px; margin:2rem auto; padding:1rem; }
.card{
  background:var(--card); padding:2rem; border-radius:12px;
  border:1px solid rgba(255,255,255,0.03); box-shadow:0 6px 18px rgba(0,0,0,0.6); margin-bottom:1.6rem;
  transition:transform .25s, box-shadow .25s;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 14px 40px rgba(0,0,0,0.7), var(--glow); }

/* Titles & text */
h1,h2,h3{ color:var(--accent2); margin-bottom:0.8rem; text-shadow:0 0 6px rgba(122,240,214,0.06); }
p,ul,ol{ margin-bottom:1rem; color:var(--text); }
.cta{
  display:inline-block; background:var(--accent); color:#fff; padding:.85rem 1.4rem; border-radius:10px; text-decoration:none;
  font-weight:700; box-shadow:var(--glow); transition:.2s;
}
.cta:hover{ transform:scale(1.03); filter:brightness(1.05); }

/* FAQ */
.faq-item{ background:#1b1b1f; padding:.9rem; border-radius:10px; border:1px solid rgba(255,255,255,0.03); cursor:pointer; margin-bottom:1rem; }
.faq-item:hover{ border-color:var(--accent2); box-shadow:0 0 10px rgba(122,240,214,0.08); }
.faq-answer{ display:none; padding-top:.6rem; color:#c8fff6; }

/* FOOTER */
footer{ text-align:center; padding:2rem; margin-top:2rem; color:#bfc9cc; background:#0f1012; border-top:1px solid rgba(255,255,255,0.02); border-radius:8px 8px 0 0; }