:root{
  --accent:#0b5cff; /* blue accent */
  --muted:#6b7280;
  --surface:#ffffff;
  --glass: rgba(11,92,255,0.06);
  --card-shadow: 0 6px 20px rgba(14,30,37,0.08);
  --max-width:1200px;
  --container-padding:20px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
body{margin:0;background:#f6f8fb;color:#0f1724;line-height:1.6}
.wrap{max-width:var(--max-width);margin:24px auto;padding:var(--container-padding)}

/* breadcrumb */
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:12px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

header.site-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}
.title{display:flex;gap:16px;align-items:center}
.logo{width:72px;height:72px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#6c8cff);display:flex;align-items:center;justify-content:center;color:white;font-weight:800;font-size:20px}
.title h1{font-size:20px;margin:0}
.subtitle{color:var(--muted);font-size:13px}

/* layout grid: left blank space (sidebar), main, right card */
.grid{display:grid;grid-template-columns:200px 1fr 320px;gap:24px;align-items:start}
@media (max-width:1100px){.grid{grid-template-columns: 1fr 320px}}
@media (max-width:760px){.grid{grid-template-columns:1fr;gap:12px}}

/* base card */
.card{background:var(--surface);padding:18px;border-radius:10px;box-shadow:var(--card-shadow)}
.hero{display:flex;flex-direction:column;gap:14px}
.hero p.lead{margin:0;color:var(--muted)}
.meta{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}

/* sections */
section h2{margin-top:0;font-size:18px}
h3{margin:8px 0;font-size:16px}
.cols{display:flex;gap:16px}
@media (max-width:760px){.cols{flex-direction:column}}

/* tables */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #eef2f7}
th{background:#fbfdff;font-weight:600;position:sticky;top:0}
.small{font-size:13px;color:var(--muted)}

/* anchors and toggles (left sidebar) */
.left-space .card{position:sticky;top:24px}
.anchors{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.toggle{background:transparent;border:1px solid transparent;padding:10px;text-align:left;cursor:pointer;font-weight:600;border-radius:8px;color:var(--accent)}
.toggle:hover{background:rgba(11,92,255,0.06)}
.toggle.active{background:linear-gradient(90deg, rgba(11,92,255,0.08), rgba(108,140,255,0.04));box-shadow:inset 0 0 0 2px rgba(11,92,255,0.06)}
.toggle + .toggle-content{display:none;padding:8px 10px;border-radius:8px;margin-bottom:6px;background:#fbfdff}
.toggle-content a{display:block;color:var(--accent);text-decoration:none;padding:4px 0}
.toggle-content a:hover{text-decoration:underline}

/* right-side actions */
.cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn{background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;display:inline-block}
.btn.ghost{background:transparent;border:1px solid #e6eefe;color:var(--accent)}

/* FAQ accordion */
.accordion{background:transparent;border:1px solid transparent;padding:12px 14px;text-align:left;cursor:pointer;border-radius:8px;font-weight:700;margin-top:8px;display:block;width:100%}
.accordion:hover{background:rgba(11,92,255,0.04)}
.panel{padding:0 12px;display:none;overflow:hidden;background:#fbfdff;border-radius:6px;margin-top:6px}
.faq .panel p{margin:10px 0;color:var(--muted)}

/* chips */
.chip{display:inline-block;background:var(--glass);padding:6px 10px;border-radius:999px;font-size:13px;color:var(--accent);font-weight:600}

.muted{color:var(--muted)}
footer{margin-top:18px;text-align:center;color:var(--muted);font-size:13px}

/* responsive tweaks */
@media (max-width:520px){
  .logo{width:56px;height:56px}
  .grid{grid-template-columns:1fr}
  .left-space{order:2}
}
/* Left sidebar buttons */
.left-space .card .toggle {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: 10px 0;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.left-space .card .toggle:hover {
  background: #094fcf;
  transform: translateY(-2px);
}

.left-space .card .toggle.active {
  background: #083bbd;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3);
}

.left-space .card .toggle + .toggle-content {
  display: none;
  margin-top: 6px;
  background: #f9faff;
  border-radius: 6px;
  padding: 8px 10px;
}
/* Page Grid */
.grid {
  display: grid;
  grid-template-columns: 240px 1fr 300px; /* left | main | right */
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}

/* Sidebar (left quick links) */
.left-space {
  position: sticky;
  top: 100px; /* header ke niche fix */
}

/* Main content */
main {
  min-width: 0; /* text wrapping ke liye */
}

/* Right aside */
aside {
  position: sticky;
  top: 100px;
}
@media (max-width: 992px) {
  .grid {
    grid-template-columns: 1fr; /* ek column */
  }
  .left-space, aside {
    position: static; /* sticky hata do mobile me */
  }
}
.grid {
  display: grid;
  grid-template-columns: 240px 1fr 300px; /* Left | Center | Right */
  gap: 20px;
  align-items: start;
}

.left-space {
  position: sticky;
  top: 100px;
}

main {
  min-width: 0;
}

.grid > aside:last-child {
  width: 300px;
}