:root { --bg: #fff; --text: #0b0b0b; --muted: #666; --border: #e5e5e5; --accent: #111; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.site-header { position: sticky; top:0; backdrop-filter: saturate(1.2) blur(6px); background:rgba(255,255,255,0.85); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:16px 20px; z-index:10; }
.brand { font-weight:700; text-decoration:none; color:var(--text); letter-spacing:-0.01em; }
.site-nav .nav-toggle { width:32px; height:32px; border:1px solid var(--border); border-radius:8px; background:transparent; position:relative; }
.site-nav .nav-toggle::before, .site-nav .nav-toggle::after { content:""; position:absolute; left:8px; right:8px; height:2px; background:var(--text); transition:transform .2s ease; }
.site-nav .nav-toggle::before { top:11px; } .site-nav .nav-toggle::after { top:19px; }
.site-nav .nav-list { list-style:none; display:flex; gap:20px; margin:0; padding:0; }
.site-nav a { text-decoration:none; color:var(--text); padding:8px 10px; border-radius:8px; transition:opacity .18s ease; }
.site-nav a:hover { opacity:.7; }
@media (max-width:900px){ .site-nav .nav-list{ display:none; } .site-nav.open .nav-list{ display:flex; flex-direction:column; position:absolute; top:56px; right:20px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.08); padding:10px; } }

.hero { display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center; padding:60px 20px; max-width:1200px; margin:0 auto; }
.hero h1 { font-size: clamp(32px, 6vw, 56px); line-height:1.05; margin:0 0 12px; }
.hero p { color:var(--muted); margin:0 0 22px; max-width:52ch; }
.hero-media img { width:100%; height:auto; border-radius:16px; border:1px solid var(--border); box-shadow:0 12px 40px rgba(0,0,0,.06); }
.cta { display:flex; gap:12px; }
.btn { display:inline-block; background:var(--text); color:#fff; padding:12px 16px; border-radius:10px; text-decoration:none; transition:transform .14s ease, opacity .18s ease; }
.btn:hover { transform:translateY(-1px); opacity:.9; }
.btn.outline {
  background: #fff;
  color: var(--text);
  border: 2px solid var(--text); /* stronger black/primary lining for prominence */
  box-shadow: 0 1px 0 rgba(0,0,0,0.04); /* subtle depth to separate from background */
  padding: 11px 15px; /* slight adjustment to balance the thicker border */
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* max 3 cards per row on wide screens */
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  padding: 30px 20px 80px;
  margin: 0 auto;
}
.card { border:1px solid var(--border); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:10px; transition:box-shadow .2s ease, transform .18s ease; }
.card img { width:100%; border-radius:12px; border:1px solid var(--border); }
.card:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08); }
.card h3 { margin:6px 0; }
.card p { color:var(--muted); margin:0 0 6px; }
.link { color:var(--accent); text-decoration:none; font-weight:500; }
.link:hover { opacity:.7; }

.section { max-width:1100px; padding:40px 20px 60px; margin:0 auto; }
.section h2 { font-size: clamp(28px, 4vw, 40px); margin:0 0 12px; }
.section p { color:var(--muted); max-width:70ch; }

.split { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start; }
.kbd { font-family:"Space Mono", monospace; background:#f7f7f7; border:1px solid var(--border); padding:2px 6px; border-radius:6px; }

.list { display:grid; gap:10px; }
.list li { border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.figure { border:1px solid var(--border); border-radius:16px; padding:14px; }
.figure img { width:100%; border-radius:12px; border:1px solid var(--border); }

.table { width:100%; border-collapse:collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:12px; text-align:left; }
.table th { font-weight:600; }
.badge { display:inline-block; padding:4px 8px; border:1px solid var(--border); border-radius:999px; font-size:.85rem; color:var(--muted); }

.site-footer { border-top:1px solid var(--border); padding:24px 20px; }
.footer-inner { max-width:1100px; margin:0 auto; display:flex; gap:20px; align-items:center; justify-content:space-between; }
.footer-inner a { text-decoration:none; color:var(--text); }
.reveal { opacity:0; transform:translateY(8px); }

@media (max-width:1000px){ .grid{ grid-template-columns: repeat(2, 1fr); } .hero{ grid-template-columns: 1fr; } .split{ grid-template-columns: 1fr; } }
@media (max-width:560px){ .grid{ grid-template-columns: 1fr; } }