:root{
  --bg:#0b1020;
  --surface:#0f172a;
  --card:#0d1226;
  --glass:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.12);
  --fg:#e5e7eb;
  --muted:#a5b4fc;
  --primary:#5b8cff;
  --accent:#6ee7b7;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg); background:
  radial-gradient(1200px 600px at -10% -20%, rgba(91,140,255,.25), transparent 60%),
  radial-gradient(1000px 500px at 110% 0%, rgba(110,231,183,.18), transparent 60%),
  linear-gradient(180deg, #050816 0%, #0b1020 100%);
  line-height:1.6;
}
a{color:inherit}
.container{max-width:1200px; margin:0 auto; padding:0 1.25rem}
/* Glass Navbar */
nav{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(5,8,22,.8), rgba(5,8,22,.4));
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; font-weight:800}
.brand img{height:32px}
.brand span{letter-spacing:.5px}
.nav-links{display:flex; gap:.5rem; flex-wrap:wrap}
.nav-links a{
  text-decoration:none; padding:.5rem .75rem; border-radius:.6rem; font-weight:600; color:#e5e7eb;
  border:1px solid transparent; transition:all .2s ease;
}
.nav-links a:hover{border-color:var(--border); background:var(--glass)}
.nav-links a.active{background:linear-gradient(135deg, rgba(91,140,255,.35), rgba(110,231,183,.25)); border-color:transparent}

/* Hero */
.hero{padding:6rem 0 5rem; text-align:center; position:relative}
.hero h1{font-size:clamp(2.2rem, 2rem + 2vw, 3.8rem); line-height:1.1; margin:.25rem 0 .8rem}
.hero p{color:#cbd5e1; font-size:clamp(1.05rem, .9rem + .6vw, 1.25rem); max-width:900px; margin:0 auto 1.2rem}
.badge{display:inline-block; padding:.35rem .65rem; border-radius:999px; background:var(--glass); border:1px solid var(--border); color:#c7d2fe; font-weight:700; font-size:.8rem}
.cta{display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; margin-top:1rem}

/* logo */
.site-logo {
  height: 50px;
  width: auto;
}

/* Sections */
.section{padding:4rem 0}
.section h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem); text-align:center; margin:0 0 .5rem}
.lead{max-width:920px; margin:.25rem auto 2rem; color:#cbd5e1; text-align:center}

/* Grid & Cards */
.grid{display:grid; gap:1.25rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:1.05rem; padding:1.25rem; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 18px 50px rgba(0,0,0,.45)}
.card h3{display:flex; align-items:center; gap:.6rem; margin:.1rem 0 .5rem}
.icon{width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:.7rem;
  background:linear-gradient(135deg, rgba(91,140,255,.4), rgba(110,231,183,.35));}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.2rem; border-radius:.9rem; font-weight:700; border:1px solid transparent; text-decoration:none}
.btn-primary{background:linear-gradient(135deg, #5b8cff, #6ee7b7); color:#051022}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{border-color:#5b8cff; color:#c7d2fe; background:transparent}
.btn-outline:hover{background:rgba(91,140,255,.15)}

/* Forms */
input,textarea{width:100%; padding:.9rem; margin-bottom:.85rem; border:1px solid var(--border); border-radius:.8rem; background:#0b1329; color:#e5e7eb}
input::placeholder, textarea::placeholder{color:#93a4d1}

/* Footer */
footer{border-top:1px solid var(--border); text-align:center; padding:2rem 1rem; color:#93a4d1; font-size:.95rem}