:root{
  --bg:#09090b;
  --card:#121214;
  --muted:#9ca3af;
  --accent:#4f46e5;
  --accent2:#06b6d4;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:#f8fafc;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Container */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* Nav */
.nav-wrap{backdrop-filter:blur(8px); border-bottom:1px solid #222; background:linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)); position:sticky; top:0; z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand .logo, .logo{font-weight:800;letter-spacing:-0.02em;color:#fff;text-decoration:none}
.brand .accent{color:var(--accent);font-style:italic;margin-left:4px}
.badge{background:#1f2937;color:#d1fae5;padding:4px 8px;margin-left:10px;border-radius:999px;font-size:12px;font-weight:700}
.links a{color:var(--muted);text-decoration:none;margin-left:18px}
.links a:hover{color:#fff}

/* Hero */
.hero{padding:60px 0 48px}
.hero-inner{text-align:center}
.hero h1{font-size:36px;margin:0 0 14px;line-height:1.02}
@media(min-width:768px){ .hero h1{font-size:56px} }
.gradient{background:linear-gradient(90deg,var(--accent) 0%, var(--accent2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lead{color:var(--muted);max-width:900px;margin:0 auto 20px}
.hero-cta{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:18px;flex-wrap:wrap}
.btn{padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 8px 30px rgba(79,70,229,0.12)}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.search{padding:10px 12px;border-radius:10px;background:#0b0b0c;border:1px solid #202024;color:#ddd;min-width:200px}

/* Sections */
.section{padding:28px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-head h2{margin:0;font-size:20px}
.muted{color:var(--muted)}

/* cards grid */
.cards{display:grid;gap:14px}
.grid{grid-template-columns:repeat(1,1fr)}
@media(min-width:700px){ .grid{grid-template-columns:repeat(2,1fr)}}
.grid-side{grid-template-columns:1fr}
.card, .bento{
  background:var(--card);
  border:1px solid #232326;
  padding:18px;border-radius:14px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover, .bento:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(0,0,0,0.6);border-color:var(--accent)}

/* card details */
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14px}
.card .meta{margin-top:10px;font-size:12px;color:var(--muted)}
.grid .card{display:flex;flex-direction:column;justify-content:space-between}

/* CTA card */
.cta-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px}
.cta-card h3{margin:0}

/* Footer */
.footer{border-top:1px solid #111;padding:28px 0;text-align:center;color:var(--muted)}
.noscript{background:#0b0b0b;padding:12px;border-radius:8px;margin:18px}