:root{
  --bg:#0C131F;
  --fg:#0C131F;
  --muted:#597685;
  --accent:#91AED9;
  --card:#ffffff;
  --border:rgba(12,19,31,.12);
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:16px;
  --max:1100px;
  --pad:18px;
  --font: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--fg);
  background:#f6f8fb;
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,248,251,.85);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--border);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 0;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand img{width:44px; height:44px; border-radius:12px; object-fit:cover; box-shadow:var(--shadow)}
.brand-title{font-weight:800; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}
.nav-toggle:focus{outline:2px solid rgba(145,174,217,.35); outline-offset:2px}
nav.site-nav ul{list-style:none; display:flex; gap:14px; margin:0; padding:0; align-items:center}
nav.site-nav a{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
}
nav.site-nav a.active{
  background:rgba(145,174,217,.18);
  border:1px solid rgba(145,174,217,.28);
}
main{padding:18px 0 34px}
.hero{
  border-radius:24px;
  overflow:hidden;
  background:var(--bg);
  box-shadow:var(--shadow);
}
.hero-inner{
  position:relative;
  min-height:320px;
  display:flex;
  align-items:flex-end;
}
.hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.02);
  transform:scale(1.01);
}
.hero .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,19,31,.08) 0%, rgba(12,19,31,.68) 70%, rgba(12,19,31,.78) 100%);
}
.hero .content{
  position:relative;
  padding:26px;
  color:#fff;
}
.hero h1{margin:0 0 6px 0; font-size:32px; line-height:1.15}
.hero p{margin:0; opacity:.92; max-width:60ch}
.section{margin-top:26px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.grid{display:grid; gap:16px}
.grid.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3, minmax(0,1fr))}
.gallery{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
.gallery img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
h2{margin:0 0 10px 0}
.muted{color:var(--muted)}
.content-html h1, .content-html h2, .content-html h3{margin:0 0 10px 0}
.content-html p{margin:0 0 10px 0}
.content-html a{color:#0b5bd3; text-decoration:underline}
.form-row{display:grid; gap:10px}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  font:inherit;
}
textarea{min-height:130px; resize:vertical}
.btn{
  display:inline-block;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid rgba(145,174,217,.38);
  background:rgba(145,174,217,.18);
  cursor:pointer;
  font-weight:700;
}
.btn:hover{filter:brightness(0.98)}
footer.site-footer{
  border-top:1px solid var(--border);
  background:#fff;
  padding:22px 0;
}
.footer-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
}
.footer-links{display:flex; flex-wrap:wrap; gap:10px}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
}
@media (max-width: 820px){
  .grid.two{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gallery img{height:220px}
}
@media (max-width: 740px){
  .nav-toggle{display:inline-flex; align-items:center; gap:10px}
  nav.site-nav{display:none; width:100%}
  header.site-header[data-open="1"] nav.site-nav{display:block}
  nav.site-nav ul{flex-direction:column; align-items:stretch}
  nav.site-nav a{border:1px solid var(--border); background:#fff}
  .header-row{flex-wrap:wrap}
}