/* Dark Theme */
:root{--bg:#0a0a0a;--panel:#141414;--muted:#9aa0a6;--text:#e8eaed;--accent:#7aa2ff;--border:#222;--maxw:1100px;--radius:18px;--pad:16px;}
*{box-sizing:border-box}
html{font-size:15px;}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.55;}

/* Sticky Nav */
.nav{position:fixed;top:0;left:0;right:0;background:#0d0d0f;backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--border);z-index:1000;}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px var(--pad);gap:10px;}
.brand{font-family:"Arial Black",Arial,Helvetica,sans-serif;font-size:1rem;color:var(--text);}
.menu{display:flex;flex-wrap:wrap;gap:10px}
.menu a{font-family:"Arial Black",Arial,Helvetica,sans-serif;color:var(--text);text-decoration:none;padding:8px 10px;border-radius:12px;font-size:.92rem;border:1px solid transparent;}
.menu a:hover{border-color:var(--accent);color:var(--accent);}

/* Mobile nav toggle (simple) */
.menu-toggle{display:none;background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:12px;}
@media (max-width:560px){
  .menu{display:none;width:100%}
  .menu.open{display:flex}
  .menu-toggle{display:block}
  .nav-inner{flex-wrap:wrap}
}

/* Layout */
.container{max-width:var(--maxw);margin:88px auto 56px;padding:0 var(--pad);text-align:center;}
h1{font-family:"Arial Black",Arial,Helvetica,sans-serif;font-size:2rem;margin:0 0 6px;color:var(--text);}
.lead{margin:0 0 24px;color:var(--muted)}

/* Grid & Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;align-items:start;justify-items:center;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:0 2px 10px rgba(0,0,0,.35);width:100%;max-width:360px;}
.card img{display:block;width:100%;height:240px;object-fit:cover;border-radius:14px;margin:0 auto 10px;}
.card h3{font-size:1.05rem;margin:6px 0 4px;color:var(--text)}
.card p{font-size:.95rem;color:var(--muted);margin:0 0 10px}
.btn{display:inline-block;border:1px solid var(--accent);padding:8px 12px;border-radius:12px;text-decoration:none;color:var(--accent);font-size:.92rem}
.btn:hover{background:var(--accent);color:#0a0a0a}

/* Small screens */
@media (max-width:480px){
  html{font-size:14px;}
  .card img{height:200px;}
}