:root{
  --bg: #f6f8ff;
  --surface: #ffffff;
  --surface2: #f3f6ff;
  --text: #0f172a;         /* slate-900 */
  --muted: #475569;        /* slate-600 */
  --border: #e2e8f0;       /* slate-200 */
  --primary: #2563eb;      /* blue-600 */
  --primary-2: #1d4ed8;    /* blue-700 */
  --shadow: 0 14px 40px rgba(15,23,42,.10);
  --radius: 18px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(900px 380px at 18% 0%, rgba(37,99,235,.10), transparent 60%),
              radial-gradient(800px 420px at 82% 10%, rgba(2,132,199,.10), transparent 58%),
              var(--bg);
  color: var(--text);
}

.text-subtle{ color: var(--muted) !important; }
.fw-extrabold{ font-weight: 800; }

.nav-clean{
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226,232,240,.85);
}

.brand-mark{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(37,99,235,.06));
  border: 1px solid rgba(37,99,235,.18);
  color: var(--primary);
}
.brand-name{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text);
}

.navbar .nav-link{
  font-weight: 700;
  color: rgba(15,23,42,.82);
}
.navbar .nav-link:hover{ color: rgba(15,23,42,1); }
.navbar .nav-link.active{ color: var(--primary); }

.badge-soft{
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: rgba(15,23,42,.92);
  font-weight: 700;
  padding: .55rem .8rem;
  border-radius: 999px;
}

.pill{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  font-weight: 700;
  font-size: .85rem;
}

.hero{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.0));
}
.hero-bottom{
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, rgba(15,23,42,.05));
}

.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}
.stat{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.stat-icon{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: var(--primary);
}
.stat-title{ font-weight: 800; line-height: 1.1; }
.stat-sub{ font-size: .9rem; color: var(--muted); }

.section{
  padding: 44px 0;
}

.surface{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.section-title{
  margin-bottom: 12px;
}

.card-soft{
  border: 1px solid rgba(226,232,240,.95);
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
}

.clean-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.clean-list li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: #ffffff;
  margin-bottom: 10px;
}
.clean-list i{ color: var(--primary); margin-top: 2px; }
.clean-list code{
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.14);
  padding: 2px 6px;
  border-radius: 8px;
}

.steps{
  padding-left: 1.2rem;
}
.steps li{ margin: .65rem 0; }
.steps code{
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.14);
  padding: 2px 6px;
  border-radius: 8px;
}

.download-card{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.95);
  background: #fff;
}
.download-icon{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: var(--primary);
  flex: 0 0 auto;
}

.callout{
  display:flex;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.95);
  background: var(--surface2);
}
.callout-icon{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: var(--primary);
  flex: 0 0 auto;
}

.toc{
  display:grid;
  gap: 10px;
}
.toc-link{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: #fff;
  color: rgba(15,23,42,.88);
  text-decoration: none;
  font-weight: 700;
}
.toc-link:hover{
  border-color: rgba(37,99,235,.30);
  background: rgba(37,99,235,.06);
}

.mini-icon{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: var(--primary);
  flex: 0 0 auto;
}

.divider{
  height: 1px;
  background: rgba(226,232,240,.95);
}

.accordion-clean .accordion-item{
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 12px;
}
.accordion-clean .accordion-button{
  font-weight: 800;
  color: var(--text);
  background: #fff;
}
.accordion-clean .accordion-button:not(.collapsed){
  color: var(--primary-2);
  background: rgba(37,99,235,.06);
  box-shadow: none;
}
.accordion-clean .accordion-body{
  color: rgba(15,23,42,.88);
}

.pagehead{
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(226,232,240,.75);
}

.footer{
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(226,232,240,.85);
}
.footer-inner{
  background: #fff;
  border: 1px solid rgba(226,232,240,.95);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.footer-link{
  color: rgba(15,23,42,.82);
  font-weight: 800;
  text-decoration: none;
}
.footer-link:hover{ color: var(--primary); text-decoration: underline; }

.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px; height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: 0 14px 40px rgba(15,23,42,.12);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.back-to-top:hover{
  background: rgba(37,99,235,.08);
  color: var(--primary);
}

.btn-primary{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-primary:hover{
  background: var(--primary-2) !important;
  border-color: var(--primary-2) !important;
}
.btn-outline-primary{
  border-color: rgba(37,99,235,.55) !important;
  color: var(--primary) !important;
}
.btn-outline-primary:hover{
  background: rgba(37,99,235,.08) !important;
  border-color: rgba(37,99,235,.75) !important;
}