/* Minimal, professional, mobile-first styles */

:root{
  --bg:#f8fafc;      /* slate-50 */
  --card:#ffffff;
  --ink:#0f172a;     /* slate-950 */
  --muted:#475569;   /* slate-600 */
  --line:#e2e8f0;    /* slate-200 */
  --accent:#1e40af;  /* blue-800 */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  color:var(--ink);
  background:linear-gradient(#eef2f7, var(--bg));
}

.container{max-width:1120px; margin-inline:auto; padding:0 1rem}
.section{padding:4rem 0}
.grid{display:grid; gap:1rem}
@media(min-width:768px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1rem;
  box-shadow:0 1px 2px rgba(2,8,23,.04);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.25rem .6rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.75rem;
  text-decoration:none;
  color:inherit;
  background:var(--card);
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--line);
}

.nav{display:flex; align-items:center; justify-content:space-between; height:56px}
.nav a{color:var(--ink); text-decoration:none; font-weight:600}
.nav .links a{opacity:.9; font-weight:500}
.nav .links a:hover{opacity:.7}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:800}
.brand img{width:22px; height:22px; border-radius:4px; border:1px solid var(--line)}

.hero h1{font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:0}
.hero p{color:var(--muted); max-width:60ch}
.hero .tagrow{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem}

.ul-plain{list-style:none; margin:0; padding:0}
.ul-plain li{display:flex; gap:.5rem}
.dot{margin-top:.6rem; width:.35rem; height:.35rem; border-radius:50%; background:#94a3b8}

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

.responsive-img{width:100%; height:auto; border-radius:12px; border:1px solid var(--line)}
.thumb{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; border:1px solid var(--line)}
.small{font-size:.9rem; color:var(--muted)}