:root{
  --bg: #0c0f14;
  --bg-elev: #11151c;
  --fg: #e8ecf1;
  --muted:#9aa4af;
  --accent:#65d6ff;
  --accent-2:#7c5cff;
  --card:#121723;
  --line:#1f2633;
  --radius:16px;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
:root.light{
  --bg:#f7f8fa;
  --bg-elev:#fff;
  --fg:#0f1216;
  --muted:#566273;
  --accent:#0ea5e9;
  --accent-2:#6d28d9;
  --card:#fff;
  --line:#e6eaf0;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--sans); color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:1300; display:flex; justify-content:space-between; align-items:center;
  padding:.75rem 1rem; background:linear-gradient(180deg,var(--bg-elev),rgba(0,0,0,0));
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}

#mobileMenu {
  position: sticky; 
}

.brand{display:flex; align-items:center; gap:.6rem}
.brand .dot{width:.7rem; height:.7rem; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--accent), var(--accent-2))}
.brand-name{font-weight:700; text-decoration:none; color:var(--fg); letter-spacing:.2px}
.nav{display:flex; align-items:center; gap:.8rem}
.nav-link{padding:.4rem .6rem; border-radius:10px; text-decoration:none; color:var(--fg)}
.nav-link:hover{background:var(--line)}
.icon-link{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; color:var(--fg); text-decoration:none}
.icon-link:hover{background:var(--line)}
.theme-toggle{all:unset; cursor:pointer; width:36px; height:36px; text-align:center; line-height:36px; border-radius:10px}
.theme-toggle:hover{background:var(--line)}

/* Show hamburger on small screens, hide desktop nav */
.hamburger{all:unset; display:none; cursor:pointer; width:44px; height:44px; border-radius:12px; z-index:1400; position:relative;}
.hamburger:hover{background:var(--line)}
.hamburger span{
  display:block; width:24px; height:2px; margin:6px auto; background:var(--fg); transition:transform .2s, opacity .2s
}
@media (max-width:720px){
  .hamburger{display:inline-block}
  .nav { display:none; }
}


/* Dimmer overlay for mobile menu */
.dimmer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1100;
  background: rgba(0,0,0,0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.menu-open .dimmer {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile menu overlay */
.menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.2rem;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 999;
}
.menu-open .menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

.card-title-link {
  color: var(--accent);
}

:root.light .card-title-link {
  color: var(--fg);
}

#mobileMenu {
  position: fixed;
  top: 56px; /* height of topbar, adjust if needed */
  left: 0;
  width: 100vw;
  max-width: 100vw;
  background: var(--bg);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0 2rem 0;
  z-index: 1200;
}
.menu-open #mobileMenu {
  display: flex;
}

.menu-link {
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: var(--fg);
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.1;
  padding: .25rem .75rem;
  border-radius: 12px;
}
.menu-link:hover,
.menu-link:focus-visible {
  outline: none;
  background: var(--line);
}

/* Prevent body scroll when menu is open */
.menu-open { overflow: hidden; }

/* Optional: animate hamburger into an "X" when open */
.menu-open .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .hamburger span:nth-child(2) { opacity: 0; }
.menu-open .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* Hero */
.hero{
  position:relative; overflow:hidden; border-bottom:1px solid var(--line);
}
.hero-inner{
  max-width:1100px; margin:0 auto; padding:6rem 1rem 4rem;
}
.hero h1{font-size:clamp(2.1rem,4.5vw,3.2rem); margin:0 0 .5rem; font-weight:800; letter-spacing:.2px}
.hero p{margin:.4rem 0 1.2rem; color:var(--muted); font-size:1.05rem}
.hero .accent{background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-cta{display:flex; gap:.6rem; flex-wrap:wrap}
.btn{display:inline-block; padding:.7rem 1rem; border-radius:12px; background:var(--fg); color:var(--bg); text-decoration:none; font-weight:700; box-shadow:var(--shadow)}
.btn:hover{filter:brightness(.95)}
.btn-ghost{background:transparent; color:var(--fg); border:1px solid var(--line); box-shadow:none}
.btn-ghost:hover{background:var(--line)}

.mesh{
  position:absolute; inset:-20% -10% auto -10%; height:70%;
  background:
    radial-gradient(50% 40% at 20% 60%, rgba(101,214,255,.15), transparent 60%),
    radial-gradient(55% 40% at 80% 40%, rgba(124,92,255,.12), transparent 60%);
  pointer-events:none;
}

/* Sections */
.section{max-width:1100px; margin:0 auto; padding:2.5rem 1rem 3.5rem}
.section-header{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.8rem}
.section-header h2{margin:0; font-size:1.6rem}
.section-sub{margin:0; color:var(--muted); font-family:var(--mono); font-size:.9rem}

/* Filters */
.filters{display:flex; justify-content:flex-end; margin: .5rem 0 1.2rem}
.filters select{
  background:var(--bg-elev); color:var(--fg); border:1px solid var(--line);
  border-radius:10px; padding:.5rem .7rem; outline:none;
}

/* Grid + Cards */
.grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(12,1fr);
}
@media (max-width:640px){ .grid{grid-template-columns:repeat(6,1fr)} }
.card{
  grid-column: span 4;
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-height:100%;
}
@media (max-width:1024px){ .card{grid-column: span 6} }
@media (max-width:640px){ .card{grid-column: span 6} }

.card-media{display:block; position:relative; background:#0b0f16}
.card-media img{display:block; width:100%; height:220px; object-fit:cover}
.card-body{padding:.9rem}
.card-head{display:flex; justify-content:space-between; align-items:center; gap:.8rem}
.card-title{margin:0; font-size:1.05rem; font-weight:700}
.card-date{color:var(--muted); font-size:.85rem}
.card-desc{color:var(--muted); margin:.4rem 0 .7rem}
.card-tags{display:flex; flex-wrap:wrap; gap:.35rem}
.card-tags .tag{
  font-family:var(--mono); font-size:.75rem; padding:.2rem .45rem; border-radius:999px;
  border:1px solid var(--line); color:var(--fg); background:linear-gradient(180deg,var(--bg-elev),transparent)
}

/* Status + Footer */
.status{margin-top:.8rem; color:var(--muted); font-size:.9rem}
.footer{border-top:1px solid var(--line); padding:1.2rem; text-align:center; color:var(--muted); font-size:.95rem}

/* Accessibility helpers */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}