:root{
  /* Light theme — Blue & White */
  --bg:#ffffff;
  --card:#ffffff;
  --text:#0f172a;      /* slate-900 */
  --muted:#475569;     /* slate-600 */
  --accent:#2563eb;    /* blue-600 */
  --border:#e5e7eb;    /* gray-200 */
  --ring:#c7d2fe;      /* indigo-200 */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
  background: var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:#ffffffee; backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}

.logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px;height:40px;border-radius:10px;background:#fff;
  color:var(--accent); font-weight:800; letter-spacing:.5px;
  border:2px solid var(--accent);
}

.nav-toggle{
  background:#fff;border:1px solid var(--border);color:var(--text);
  padding:8px 10px;border-radius:8px;display:none;cursor:pointer;
}
.menu{display:flex; gap:18px; list-style:none; margin:0; padding:0;}
.menu a{padding:8px 10px;border-radius:8px}
.menu a[aria-current="page"]{background:#eff6ff; border:1px solid #dbeafe}

@media (max-width: 760px){
  .nav-toggle{display:inline-block}
  .menu{display:none; position:absolute; right:14px; top:56px; flex-direction:column; background:#fff; padding:10px; border:1px solid var(--border); border-radius:10px; width:min(92vw,320px); box-shadow:0 10px 32px rgba(15,23,42,.12)}
  .menu.open{display:flex}
}

.hero{
  position:relative;
  padding: clamp(48px, 8vw, 96px) 20px;
  text-align:center;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-bottom:1px solid var(--border);
}
.hero-inner{max-width:900px; margin:0 auto}
h1{font-size: clamp(28px, 6vw, 52px); margin:0 0 8px}
.lead{font-size: clamp(16px, 3.2vw, 20px); color:var(--muted); margin:0 auto 22px; max-width:720px}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{
  display:inline-block; padding:10px 16px; border-radius:10px; border:1px solid var(--accent);
  background: #ffffff; color:var(--accent); font-weight:700;
}
.btn:hover{transform: translateY(-1px)}
.btn-ghost{background:#eff6ff}

.hero-art{width:min(100%, 840px); height:auto; margin:28px auto 0; display:block; color:var(--accent)}

.cards{display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 20px; max-width:1000px; margin:0 auto}
.card{
  background: var(--card); border:1px solid var(--border); border-radius:14px; padding:16px;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.card h3{margin:0 0 6px}
.card p{margin:0 0 10px; color:var(--muted)}
.card-link{font-weight:600}

.grid{display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding:20px; max-width:1000px; margin:0 auto}
.tile{background: var(--card); border:1px solid var(--border); border-radius:14px; padding:16px}
.tile h3{margin:0 0 8px}
.meta{margin:8px 0 0; padding-left:18px; color:var(--muted)}

.prose{padding: 24px 20px; max-width: 820px; margin: 0 auto}
.prose h1{margin-top:0}

.contact-form{display:grid; gap:10px; max-width:640px}
.contact-form input, .contact-form textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--text);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
}
.contact-form button{justify-self:start}

.small{color:var(--muted); font-size: 14px}

.site-footer{padding:20px; text-align:center; color:var(--muted); border-top:1px solid var(--border); margin-top:28px}