/* style.css */
:root {
  --bg-dark: #0d0d0d;
  --bg-light: #1a1a1a;
  --text-light: #eaeaea;
  --accent: #00aeff;
  --accent-hover: #008fcc;
}
* {margin:0; padding:0; box-sizing:border-box;}
body {background:var(--bg-dark); color:var(--text-light); font-family:'Segoe UI',sans-serif;}
.container {width:90%; max-width:1200px; margin:0 auto;}
a {text-decoration:none; color:inherit;}
.header {background:var(--bg-light); padding:.75rem 0;}
.header-inner {display:flex; align-items:center; justify-content:space-between;}
.logo {font-size:1.75rem; font-weight:bold; color:var(--accent);}
.nav-list {display:flex; gap:1.5rem; list-style:none;}
.nav-list a {font-weight:500; transition:color .2s;}
.nav-list a:hover {color:var(--accent);}
.nav-toggle {display:none; background:none; border:none; font-size:1.5rem; color:var(--text-light);}
.hero {padding:4rem 0; text-align:center; background:linear-gradient(135deg, #1a1a1a, #111);}
.hero h1 {font-size:2.5rem; margin-bottom:1rem;}
.hero p {font-size:1.125rem; margin-bottom:2rem; max-width:600px; margin-left:auto; margin-right:auto;}
.hero-cta .btn {margin:0 .5rem;}
.section {padding:3rem 0;}
.section.alt {background:var(--bg-light);}
.section-title {text-align:center; font-size:2rem; margin-bottom:2rem;}
.grid {display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));}
.cards {align-items:start;}
.card {background:var(--bg-light); padding:1.5rem; border-radius:8px; text-align:center; transition:transform .2s,box-shadow .2s;}
.card:hover {transform:translateY(-5px); box-shadow:0 4px 15px rgba(0,0,0,0.5);}
.card-icon {font-size:2rem; margin-bottom:.75rem; color:var(--accent);}
.cta {background: var(--accent); color:#fff; text-align:center;}
.cta p {max-width:600px; margin:0 auto 1.5rem;}
.btn {display:inline-block; padding:.75rem 1.5rem; border-radius:6px; font-weight:600; transition:background .2s;}
.btn-primary {background:var(--bg-light); color:var(--accent);}
.btn-primary:hover {background:#2a2a2a;}
.btn-secondary {border:2px solid var(--accent); color:var(--accent);}
.btn-secondary:hover {background:var(--accent); color:#000;}
.footer {background:var(--bg-light); padding:1.5rem 0;}
.footer-inner {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.social a {margin-left:1rem; font-size:.9rem; color:var(--text-light); transition:color .2s;}
.social a:hover {color:var(--accent);}
@media(max-width:768px) {
  .nav-list {display:none;}
  .nav-toggle {display:block;}
}