:root{
  --bg:#ffffff;
  --surface:#f9fafb;
  --card:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --acc:#1b9db3;
  --line:#e5e7eb;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:1100px; margin:0 auto; padding:0 20px}
.small{font-size:14px}
.center{display:grid; place-content:center; min-height:70vh}
.muted{color:var(--muted)}
a{color:var(--acc)}
a:hover{opacity:.9}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.btn{
  display:inline-block; background:var(--acc); color:#fff;
  padding:12px 20px; border-radius:10px; text-decoration:none; font-weight:600;
  transition:transform .04s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 6px 14px rgba(27,157,179,.25);
}
.btn:hover{transform:translateY(-1px)}
.ghost{
  display:inline-block; padding:12px 20px; border-radius:10px;
  border:1px solid var(--acc); color:var(--acc); text-decoration:none; font-weight:600;
}
.notice{margin:20px 0; padding:12px 16px; border-left:3px solid var(--acc); background:#eef8fb}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:#ffffffcc; backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:.2px}
.brand img{width:32px; height:32px; border-radius:4px; object-fit:cover}
.links a{color:var(--ink); text-decoration:none; margin-left:18px; opacity:.8}
.links a:hover{opacity:1}
.links a[aria-current="page"]{opacity:1; font-weight:600}
.menu{display:none; background:none; border:1px solid var(--line); color:var(--ink); padding:8px 10px; border-radius:8px}

/* Hero */
.hero{
  display:grid; grid-template-columns:1.2fr 1fr; gap:28px;
  padding:48px 0 24px;
}
.hero .hero-media{overflow:hidden; border-radius:16px}
.hero .hero-media img{border-radius:16px}
.hero .lead{color:var(--muted)}
.cta{display:flex; gap:12px; margin-top:10px}
.hero-band{
  background:linear-gradient(180deg,#f2fbff, #ffffff);
  border:1px solid var(--line);
  border-left:0; border-right:0;
}

/* Sections */
main section{margin:28px 0}
.features h2{margin-bottom:6px}
.cap .cap-ico{width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:#eef8fb; margin-bottom:8px}
.cap .icon{width:22px; height:22px}
.cta-band{
  background:var(--surface);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:28px 0; text-align:center
}

.form input,.form select,.form textarea{
  width:100%; margin-top:6px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--ink)
}
.form .agree{display:flex; align-items:center; gap:6px; margin:10px 0}
.form .hp{position:absolute; left:-9999px}
input[type=checkbox]{accent-color:var(--acc);}

/* Float portrait helper */
.portrait-right{float:right; margin:0 0 1em 1em; border-radius:50%; max-width:220px; height:auto; object-fit:cover}

/* Footer */
.site-footer{border-top:1px solid var(--line); background:var(--surface); color:var(--muted); padding:22px 0; margin-top:28px}

/* Accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #9fd1ff; outline-offset:2px}

/* Mobile */
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .menu{display:inline-block}
  .links{display:none}
  .links.open{display:block; position:absolute; right:20px; top:56px; background:#fff; border:1px solid var(--line); padding:12px 16px; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.08)}
  .links a{display:block; margin:10px 0}
  .portrait-right{float:none; display:block; margin:0 auto 1em auto}
}

.portrait{border-radius:50%; max-width:220px; height:auto; object-fit:cover; justify-self:end}

.leadership-grid{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:start}

.card::after{content:""; display:block; clear:both}