:root{
  --bg:#f7f7f7;
  --ink:#1f2937;
  --brand:#2e7d6d;
  --brand-weak:#e6f2ef;
  --border:#d7e2de;
}

*{ box-sizing:border-box; }
html{ font-size:16px; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

.site-header{
  background:#fff;
  border-bottom:1px solid var(--border);
}

.nav{
  max-width:1100px;
  margin:0 auto;
  padding:.75rem 1rem;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:1rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.brand img{
  width:40px;
  height:40px;
  border-radius:50%;
  display:block;
}

.menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1.25rem;
}
.menu > li{ margin:0; }

.menu a{
  text-decoration:none;
  color:var(--ink);
  padding:.5rem .8rem;
  border-radius:.4rem;
}
.menu a:hover,
.menu li:focus-within > a{
  background:#f3faf8;
}
.menu a[aria-current="page"]{
  font-weight:600;
}

/* Dropdown */
.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  margin-top:.25rem;
  min-width:13rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:.4rem;
  padding:.4rem 0;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  display:none;
  z-index:10;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  display:block;
}
.dropdown-menu a{
  display:block;
  padding:.5rem 1rem;
  border-radius:0;
}

.container{
  max-width:1200px;
  margin:2rem auto;
  padding:0 1rem;
}

.hero{
  background:#fff;
  border:1px solid var(--border);
  border-radius:.8rem;
  padding:2rem;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:2rem;
  align-items:center;
}

.hero-media{ margin:0; }
.hero-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:.8rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.hero-content h1{ margin-top:0; }
.hero h1{ margin-top:0; }

.section{ margin-top:2rem; }
.section h2{
  font-size:1.8rem;
  margin:0 0 1rem;
}
.section ul{ list-style:disc; padding-left:1.5rem; }
.section li{ margin:.35rem 0; }

.table-wrapper{
  background:#fff;
  border:1px solid var(--border);
  border-radius:.8rem;
  padding:1.5rem;
}
.table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--border);
  border-radius:.6rem;
  overflow:hidden;
}
.table th, .table td{
  padding:.75rem 1rem;
  border-bottom:1px solid var(--border);
  text-align:left;
}
.table th{
  background:#fafafa;
  font-weight:600;
}
.table tr:last-child td{ border-bottom:none; }

.site-footer{
  border-top:1px solid var(--border);
  margin-top:3rem;
  background:#fff;
}
.site-footer .container{
  padding:1rem;
  font-size:.95rem;
  color:#475569;
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ order:-1; }
}

@media (max-width:720px){
  .menu{ flex-wrap:wrap; gap:1rem; }
  .brand img{ width:36px; height:36px; }
}