:root{
  --bg:#0f1720; /* deep slate */
  --card:#0f1a24;
  --muted:#9aa6b2;
  --accent:#ff6b6b; /* coral */
  --accent-2:#2dd4bf; /* teal */
  --header-height:64px;
  --glass: rgba(255,255,255,0.04);
  --max-width:1100px;
}

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

.container{max-width:var(--max-width);margin:0 auto;padding:1rem}


.site-header{backdrop-filter: blur(6px);position:fixed;top:0;left:0;right:0;z-index:9999;height:var(--header-height);background:linear-gradient(180deg, rgba(15,23,32,0.95), rgba(15,23,32,0.98));box-shadow:0 1px 0 rgba(0,0,0,0.6)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 0;height:100%}
.brand{font-family:'Playfair Display', serif;color:var(--accent-2);font-weight:700;font-size:1.15rem;text-decoration:none}

/* nav toggle is hidden on larger screens; visible only on small screens via media query */
#nav-toggle{background:transparent;border:0;color:var(--muted);font-size:1.25rem;padding:0.25rem 0.5rem;border-radius:6px;display:none}

.main-nav{display:flex;gap:1rem}
.main-nav a{color:var(--muted);text-decoration:none;padding:0.25rem 0.5rem;border-radius:6px;font-weight:600}
.main-nav a:hover{color:#fff}

.hero{display:none}

.section{padding:1.4rem 0 2rem}
.section h2{font-family:'Playfair Display',serif;margin:0 0 .25rem;color:#fff}
.section-sub{color:var(--muted);margin:0 0 1rem}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:0.9rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:0.9rem;border-radius:12px;box-shadow:0 6px 18px rgba(2,6,8,0.6);border:1px solid rgba(255,255,255,0.03)}
.card h3{margin:0 0 .25rem;font-size:1.05rem}
.meta{color:var(--muted);font-size:0.9rem;margin:0 0 .4rem}
.desc{margin:0;color:var(--muted);font-size:0.95rem}

.list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.5rem}
.list li{background:var(--glass);padding:0.7rem;border-radius:10px;color:#e8f0f8}

.site-footer{padding:1.2rem 0;color:var(--muted);text-align:center}

/* Larger screens tweaks */
@media(min-width:760px){
  /* show nav toggle only on small screens; hide it on desktop */
  #nav-toggle{display:none}
  .cards{grid-template-columns:repeat(3,1fr)}
  .main-nav a{color:var(--muted)}
}

/* Mobile-first nav collapse */
/* ensure page content is visible below fixed header */
main{padding-top:var(--header-height)}

@media(max-width:760px){
  /* on mobile show toggle */
  #nav-toggle{display:inline-block}
  .main-nav{position:absolute;right:1rem;top:var(--header-height);background:linear-gradient(180deg, rgba(11,16,22,0.95), rgba(11,16,22,0.98));padding:0.6rem;border-radius:10px;display:none;flex-direction:column;min-width:160px}
  .main-nav a{padding:0.6rem 0.85rem}
  .card{border-radius:10px}
  .cards{grid-template-columns:1fr}

  /* add comfortable padding on mobile */
  .container{padding:1rem}
  body{padding-bottom:24px}
}

/* small visual flourish */
.brand::after{content:'';display:inline-block;width:8px;height:8px;background:linear-gradient(45deg,var(--accent),var(--accent-2));margin-left:8px;border-radius:2px;vertical-align:middle}