/* Minimal, mobile-first blue theme with popup modal */
:root{
  --bg:#f7fbff;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --blue:#1d4ed8;
  --blue-600:#2563eb;
  --blue-700:#1e40af;
  --ring:rgba(29,78,216,.18);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
.site-header{
  position:sticky;top:0;z-index:10;
  background:#eaf2ff;
  border-bottom:1px solid #dbeafe;
  padding:.75rem 1rem;
}
.brand{display:flex;align-items:center;gap:.75rem;max-width:960px;margin:0 auto}
.logo{width:40px;height:40px;object-fit:contain}
.brand-text h1{font-size:1.125rem;line-height:1.2;margin:0;color:var(--blue-700)}
.brand-text .sub{margin:0;color:var(--muted);font-size:.85rem}

.container{max-width:960px;margin:0 auto;padding:1rem}
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
@media (min-width:640px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:980px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
.card{
  background:var(--card);
  border:1px solid #e2e8f0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.hero{width:100%;height:auto;display:block;background:#eef2ff}
.card-body{padding:1rem}
.card h2{margin:.25rem 0 .25rem;font-size:1.1rem;color:var(--blue-700)}
.lede{margin:.25rem 0 .75rem;color:var(--muted);font-size:.95rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap}
.btn{
  display:inline-block;
  background:var(--blue);
  color:#fff;
  padding:.6rem .9rem;
  border-radius:12px;
  font-weight:600;
  border:1px solid var(--blue-700);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.btn:hover{background:var(--blue-600);text-decoration:none}
.btn.outline{
  background:transparent;color:var(--blue-700);border:1px solid var(--blue-700)
}
.site-footer{
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
  padding:2rem .5rem 1rem;
}

/* Modal styles */
.modal[hidden]{display:none}
.modal{
  position:fixed;inset:0;z-index:50;
}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(15,23,42,.42);backdrop-filter:saturate(140%) blur(2px);
}
.modal-dialog{
  position:relative;
  background:#fff; border-radius:18px;
  margin: max(8vh,2rem) auto 2rem; padding:0;
  width:min(640px,92vw);
  box-shadow:0 15px 40px rgba(0,0,0,.18);
  overflow:hidden;
}
.modal-header, .modal-footer{padding:1rem;border-bottom:1px solid #e2e8f0}
.modal-footer{border-bottom:0;border-top:1px solid #e2e8f0}
.modal-header{display:flex;align-items:center;justify-content:space-between}
.modal-header h3{margin:0;font-size:1.05rem;color:var(--blue-700)}
.modal-content{padding:1rem}
.icon.close{
  background:transparent;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:#334155;
}
.modal ul{margin:.25rem 0 .5rem 1rem}