/* styles.css - simple, clean, responsive */
:root{
  --accent:#0b5fff;
  --bg:#f7f9fc;
  --text:#222;
}

*{box-sizing:border-box}
body{font-family:Inter, Arial, Helvetica, sans-serif; margin:0; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased}
.container{max-width:980px; margin:0 auto; padding:20px}

.site-header{background:white; border-bottom:1px solid #e6eef9}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:18px 20px}
.brand{margin:0; font-size:20px; color:var(--accent)}
.nav a{margin-left:18px; color:#334; text-decoration:none; font-size:14px}

.hero{padding:60px 20px 40px; text-align:center; background:linear-gradient(180deg, rgba(11,95,255,0.06), transparent); border-radius:6px; margin-top:20px}
.hero h2{font-size:28px; margin:0 0 8px}
.hero p{color:#334; margin:0 0 18px}

.actions{display:flex; gap:12px; justify-content:center; align-items:center; margin-top:12px}
button#btn-demo{background:var(--accent); border:none; color:white; padding:10px 16px; border-radius:6px; cursor:pointer}
.btn-link{padding:10px 14px; border-radius:6px; background:#fff; border:1px solid #d6e4ff; color:var(--accent); text-decoration:none}

.info{margin:28px 0; background:white; padding:18px; border-radius:6px; box-shadow:0 1px 0 rgba(0,0,0,0.03)}
.info h3{margin-top:0}

.site-footer{margin-top:30px; text-align:center; color:#6b7280; padding:18px 0}
@media (max-width:560px){
  .nav{display:none}
  .hero h2{font-size:22px}
  .container{padding:14px}
}