:root{
  --bg: #0f1724;
  --card: rgba(255,255,255,0.04);
  --muted: #9aa4b2;
  --accent: linear-gradient(135deg,#7c5cff,#2ec0ff);
  --glass: rgba(255,255,255,0.03);
  --radius: 14px;
  --gap: 20px;
  --maxw: 1100px;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* Background image (place `background.jpeg` in the project root). A dark overlay keeps text readable. */
  background-image: linear-gradient(rgba(6,10,18,0.65), rgba(6,10,18,0.45)), url('background.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding-bottom:40px;
}

.container{max-width:var(--maxw);margin:0 auto;padding:32px;}

.site-header{backdrop-filter: blur(6px);position:sticky;top:0;z-index:30;background:transparent}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}

.logo a{color:inherit;text-decoration:none;font-weight:700;letter-spacing:-0.4px}
.controls{display:flex;gap:12px;align-items:center}

.search{
  background:var(--glass);
  border:1px solid rgba(255,255,255,0.04);
  padding:10px 14px;border-radius:12px;color:inherit;min-width:220px;
  outline:none;transition:box-shadow .18s ease;
}
.search:focus{box-shadow:0 6px 22px rgba(0,0,0,0.5);}

.btn{background:transparent;border:0;color:inherit;cursor:pointer;font-size:16px;padding:8px;border-radius:10px}
.icon{font-size:18px}
.btn.close{position:absolute;right:18px;top:18px}

.hero{margin-top:20px;padding:28px;background:linear-gradient(90deg, rgba(124,92,255,0.08), rgba(46,192,255,0.04));
border-radius:12px;display:flex;flex-direction:column;gap:8px}
.hero h2{margin:0;font-size:1.85rem}
.hero .lead{margin:0;color:var(--muted)}

.filters{display:flex;align-items:center;justify-content:space-between;margin:20px 0}
.tags{display:flex;gap:10px;flex-wrap:wrap}
.tag{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  padding:6px 10px;border-radius:999px;font-size:13px;color:var(--muted);
  cursor:pointer;border:1px solid rgba(255,255,255,0.02);
}
.tag.active{color:white;background:var(--accent);box-shadow:0 6px 20px rgba(44,140,255,0.06)}

.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
  margin-top:12px;
}
.card{
  background:var(--card);padding:18px;border-radius:var(--radius);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;min-height:180px;transition:transform .18s ease, box-shadow .18s ease;
  border:1px solid rgba(255,255,255,0.02);
}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(12,14,26,0.6)}

.preview{
  height:120px;border-radius:10px;background:linear-gradient(135deg,#15202B,#1e2936);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.85);
  font-weight:600;
}
.card h3{margin:0;font-size:1.05rem}
.card p{margin:0;color:var(--muted);font-size:0.95rem}

.card .meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.card .meta .left{display:flex;gap:8px;align-items:center}
.card .meta a{color:inherit;text-decoration:none}

.modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(10,12,18,0.5), rgba(10,12,18,0.7));
  padding:28px;z-index:60;
}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:linear-gradient(180deg,#071021 0%, #081223 100%);padding:28px;border-radius:12px;max-width:720px;width:100%;position:relative;box-shadow:0 40px 80px rgba(2,6,23,0.75)}

.modal-links{display:flex;gap:12px;margin-top:14px}
.modal-links a{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.03);text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,0.02)}

.site-footer{margin-top:60px;color:var(--muted);text-align:center}

.link{color:var(--muted);cursor:pointer}
.link:hover{text-decoration:underline}

/* Responsive */
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){
  .grid{grid-template-columns:1fr}
  .header-inner{flex-direction:column;align-items:stretch;gap:12px}
  .hero{padding:18px}
}

/* Light theme (optional) */
:root.light{
  --bg:#f7f9fc; --card:#ffffff; --muted:#516172; color-scheme:light; color:#0e1721;
  background:linear-gradient(180deg,#ffffff 0%, #f0f5fb 100%);
}
:root.light .search{background:#fff;border:1px solid rgba(2,6,23,0.05)}

/* Navigation */
.main-nav{display:flex;gap:18px;align-items:center;margin-left:18px}
.main-nav a{color:inherit;text-decoration:none;padding:6px 8px;border-radius:8px}
.main-nav a:hover{background:rgba(255,255,255,0.02)}

/* Blog / Home styles */
.post-list{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:12px}
.post-card{background:var(--card);padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.post-card h3{margin:0 0 6px 0}
.post-card p.muted,.muted{color:var(--muted);margin:0;font-size:0.9rem}
.post{max-width:720px;margin:18px auto;padding:8px}
.featured .grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){.featured .grid{grid-template-columns:1fr}}