:root {
  --accent: #69D9E8;
  --bg: #0b0e11;
  --card: #13171c;
  --text: #e7e7e7;
  --muted: #9a9fa5;
  --radius: 14px;
  --maxw: 900px;
  --pad: 22px;
  font-size: 16px;
}
body {margin:0; font-family:system-ui; background:var(--bg); color:var(--text); line-height:1.6;}
.container{max-width:var(--maxw); margin:auto; padding:20px;}
.header{border-bottom:1px solid #1f242a; padding:16px 0;}
.nav{display:flex; gap:20px;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
.hero{padding:60px 0; display:flex; flex-wrap:wrap; align-items:center; gap:40px;}
.hero-text{flex:1;}
.hero-img{flex:1; text-align:center;}
.hero-img img{max-width:100%; border-radius:var(--radius);}
.card{background:var(--card); padding:var(--pad); border-radius:var(--radius); margin:20px 0; border:1px solid #1c2025;}
h1{font-size:2.3rem;} h2{font-size:1.6rem;}
.btn{display:inline-block; padding:12px 20px; border-radius:var(--radius); font-weight:600; border:1px solid var(--accent); color:var(--accent);}
.btn.primary{background:var(--accent); color:#000;}
.btn.primary:hover{opacity:0.85;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:30px;}
@media(max-width:700px){.grid2{grid-template-columns:1fr;}}
.footer{border-top:1px solid #1f242a; text-align:center; color:var(--muted); padding:20px; margin-top:40px;}