:root{
  --bg:#FFFFFF;
  --text:#0B1220;
  --muted-text:#445065;
  --border:#E6EAF0;
  --primary:#1E6FE8;
  --primary-dark:#1557B5;
  --primary-soft:#EAF2FF;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 14px}
ul{margin:0; padding-left:18px}
li{margin:6px 0}
code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 18px;
}

/* Header */
.site-header{
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:var(--bg);
  z-index:10;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  text-decoration:none;
  font-weight:650;
  letter-spacing:0.2px;
}
.brand-logo{height:36px; width:auto; display:block}
.brand-mark{
  width:22px;
  height:22px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--primary-soft);
}
.menu-btn{
  appearance:none;
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
}
.menu-btn:focus{outline:2px solid var(--primary-soft); outline-offset:2px}
.hamburger{
  width:18px;
  height:12px;
  display:inline-block;
  position:relative;
}
.hamburger span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:var(--text);
  border-radius:2px;
}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:5px}
.hamburger span:nth-child(3){top:10px}
.menu-label{
  font-size:13px;
  color:var(--muted-text);
}

/* Drawer */
.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(11,18,32,0.22);
  display:none;
  z-index:20;
}
.drawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:min(360px, 92vw);
  background:var(--bg);
  border-left:1px solid var(--border);
  transform:translateX(100%);
  transition:transform 180ms ease;
  z-index:30;
  display:flex;
  flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer-overlay.open{display:block}
.drawer-header{
  padding:16px 16px 10px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.drawer-title{
  font-weight:650;
}
.drawer-close{
  appearance:none;
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.drawer-nav{
  padding:10px 8px 16px;
}
.nav-list{
  list-style:none;
  padding:0;
  margin:0;
}
.nav-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:10px;
  color:var(--text);
}
.nav-list a:hover{
  background:var(--primary-soft);
  text-decoration:none;
}
.nav-list a[aria-current="page"]{
  background:var(--primary-soft);
  border:1px solid var(--border);
}

/* Main */
main{padding:34px 0 26px}
.page-title{
  font-size:32px;
  letter-spacing:-0.2px;
  margin:0 0 10px;
}

/* Hero */
.hero{
  display:flex;
  align-items:center;
  gap:28px;
  margin-bottom:10px;
}
.hero-image{flex:0 0 52%; max-width:520px}
.hero-image img{width:100%; height:auto; display:block; border-radius:10px}
.hero-text{flex:1}

@media (max-width:760px){
  .hero{flex-direction:column; gap:18px}
  .hero-image{width:100%; max-width:100%; flex:auto}
  .brand-logo{height:30px}
}
.lead{
  font-size:16px;
  color:var(--muted-text);
  margin:0 0 18px;
  max-width:72ch;
}
.block{
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  background:var(--bg);
  margin:14px 0;
}
.block h2{
  margin:0 0 10px;
  font-size:18px;
}
.block h3{
  margin:16px 0 8px;
  font-size:15px;
}
.note{
  background:var(--primary-soft);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px;
  margin:14px 0;
}
.kicker{
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted-text);
  margin:0 0 10px;
}
.hr{
  height:1px;
  background:var(--border);
  margin:18px 0;
}
.small{
  font-size:13px;
  color:var(--muted-text);
}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  padding:18px 0 26px;
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  justify-content:space-between;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
}
.footer-links a{color:var(--muted-text)}
.footer-links a:hover{color:var(--text)}
.footer-note{color:var(--muted-text); font-size:13px}

/* Responsive */
@media (max-width:560px){
  .page-title{font-size:28px}
  .menu-label{display:none}
}