/* ===== Design tokens ===== */
:root{
  --w: 1100px;
  --bg: #fafafa;
  --surface: #ffffff;
  --text: #111111;
  --muted: #666666;
  --border: #ececec;
  --primary: #111111;
  --tag-bg: #f3f3f3;
  --shadow: 0 6px 20px rgba(0,0,0,.06);
  --radius: 14px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0b0c; --surface:#121214; --text:#f3f3f3; --muted:#b3b3b3;
    --border:#242424; --primary:#f3f3f3; --tag-bg:#1b1b1d;
    --shadow: 0 10px 24px rgba(0,0,0,.35);
  }
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ===== Layout ===== */
.container{ max-width:var(--w); margin:0 auto; padding:0 20px }
header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(160%) blur(6px);
}
header .wrap{ padding:28px 0 }
h1{
  font-size: clamp(24px, 2.6vw, 34px);
  line-height:1.2; margin:0 0 6px;
  letter-spacing:-.015em;
}
.lead{
  margin:0;
  color:var(--muted);
  font-size: clamp(14px, 1.4vw, 16px);
}

main{ padding: 28px 0 36px }

/* ===== Cards grid ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  border-color:#ddd;
}
.card h2{
  font-size: clamp(18px, 1.8vw, 20px);
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.card p{ margin:0 0 12px; color:var(--text) }

.meta{
  margin-top:10px; color:var(--muted); font-size:13px;
  word-break: break-word;
}

/* ===== Tags ===== */
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px }
.tag{
  font-size:12px; padding:5px 10px; border-radius:999px;
  background:var(--tag-bg); border:1px solid var(--border); color:var(--text);
}

/* ===== Buttons ===== */
.btn{
  display:inline-block; text-decoration:none; font-weight:600;
  padding:10px 14px; border-radius:10px; border:1px solid var(--primary);
  color:var(--surface); background:var(--primary);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.16) }
.btn:active{ transform: translateY(0) scale(.98) }
.btn:focus-visible{ outline: 3px solid #4d9fff55; outline-offset:3px }

/* ===== Footer ===== */
footer{
  background:var(--surface);
  border-top:1px solid var(--border);
  color:var(--muted); font-size:14px;
}
footer .wrap{ padding:26px 0 }
.contact{
  display:grid; gap:8px;
}
@media (min-width:700px){
  .contact{
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap:4px 14px;
    justify-items:start;
  }
}
footer a{ color:inherit }
footer a:hover{ text-decoration:underline }

/* ===== Accessibility & motion ===== */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}