:root {
  --bg: #090d16;
  --card: #121826;
  --card-hover: #1a2235;
  --border: #1e293b;
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --text: #f8fafc;
  --text-dim: #94a3b8;
}
* { margin:0; padding:0; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
body { background:var(--bg); color:var(--text); line-height:1.6; min-height:100vh; display:flex; flex-direction:column; }
header { border-bottom:1px solid var(--border); background:rgba(9,13,22,0.85); backdrop-filter:blur(12px); position:sticky; top:0; z-index:50; }
.nav-wrap { max-width:1100px; margin:0 auto; padding:1rem 1.5rem; display:flex; justify-content:space-between; align-items:center; }
.logo { display:flex; align-items:center; gap:0.75rem; font-weight:700; font-size:1.25rem; color:#fff; text-decoration:none; }
.logo-badge { width:32px; height:32px; background:linear-gradient(135deg,var(--primary),#8b5cf6); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:900; }
.nav-menu { display:flex; gap:1.75rem; list-style:none; }
.nav-menu a { color:var(--text-dim); text-decoration:none; font-size:0.95rem; transition:color 0.2s; }
.nav-menu a:hover, .nav-menu a.active { color:#fff; }
.container { max-width:1100px; margin:0 auto; padding:3rem 1.5rem; flex:1; }
.hero { text-align:center; padding:4rem 0 3rem; }
.badge { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.3); color:#60a5fa; font-size:0.85rem; font-weight:600; padding:0.35rem 0.85rem; border-radius:9999px; margin-bottom:1.5rem; }
.hero h1 { font-size:2.8rem; font-weight:800; line-height:1.2; margin-bottom:1.25rem; }
.hero p { font-size:1.15rem; color:var(--text-dim); max-width:700px; margin:0 auto 2.5rem; }
.btn-row { display:flex; gap:1rem; justify-content:center; }
.btn { padding:0.75rem 1.75rem; border-radius:8px; font-weight:600; font-size:0.95rem; text-decoration:none; transition:all 0.2s; display:inline-flex; align-items:center; gap:0.5rem; border:none; cursor:pointer; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-outline:hover { background:var(--card); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; margin-top:2.5rem; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:2rem; transition:all 0.2s; text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.card:hover { transform:translateY(-3px); border-color:rgba(59,130,246,0.4); background:var(--card-hover); }
.card-icon { width:44px; height:44px; background:rgba(59,130,246,0.12); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--primary); margin-bottom:1.25rem; font-size:1.5rem; }
.card h3 { font-size:1.25rem; margin-bottom:0.75rem; color:#fff; }
.card p { color:var(--text-dim); font-size:0.95rem; flex:1; }
.card-footer { margin-top:1.5rem; color:var(--primary); font-size:0.85rem; font-weight:600; display:flex; align-items:center; gap:0.35rem; }
footer { border-top:1px solid var(--border); background:rgba(9,13,22,0.9); padding:2.5rem 1.5rem; text-align:center; color:var(--text-dim); font-size:0.85rem; }
.search-input { width:100%; padding:0.85rem 1.25rem; background:var(--card); border:1px solid var(--border); border-radius:8px; color:#fff; font-size:1rem; margin-bottom:2rem; outline:none; }
.search-input:focus { border-color:var(--primary); }