:root{
  --brand-g1: #00a3ff;
  --brand-g2: #7a00ff;
  --brand-g3: #ff2f8b;
  --accent: #ff8c2a;
  --bg: #0f1720;
  --muted: #6b7280;
  --maxWidth: 1100px;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
}

footer {
  margin-top: auto;
}

*{box-sizing:border-box}
body{margin:0px;font-family:Inter,Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#071122 0%, #0b1220 100%);color:#e6eef8}
.container{max-width:var(--maxWidth);margin:0 auto;padding:28px}
header{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo img{height:56px}
nav a{color:var(--muted);margin-left:14px;text-decoration:none}
.hero{display:flex;gap:20px;align-items:center;padding:40px 0}
.hero .left{flex:1}
.hero h1{font-size:32px;margin:0 0 10px 0}
.hero p{color:#cfe7ff}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));padding:18px;border-radius:10px}
footer{padding:28px 0;color:var(--muted);font-size:13px;text-align:center}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,var(--brand-g2),var(--brand-g3));color:white;text-decoration:none}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}