/* Layout & Header / Sidebar / Main */
.site-header {
  position: sticky;
  top:0;
  z-index:80;
  backdrop-filter: blur(16px);
  background: rgba(255,255,255,.75);
  border-bottom:1px solid var(--color-border);
  transition: background var(--trans), transform var(--trans), height var(--trans);
}
.site-header[data-shrink="true"] { transform: translateY(-6px); background: rgba(255,255,255,.92); }

.header-inner {
  max-width: 1320px;
  margin:0 auto;
  padding:.65rem 1.3rem;
  display:flex;
  align-items:center;
  gap:1rem;
}

.brand { display:flex; align-items:center; gap:.6rem; font-weight:600; }
.logo { width:38px; height:38px; }

.primary-nav { position:relative; }
.nav-list { list-style:none; display:flex; gap:1.4rem; font-size:.92rem; font-weight:500; }
.nav-link {
  position:relative; padding:.55rem .3rem;
  display:inline-flex; align-items:center;
  letter-spacing:.4px;
  color:var(--color-muted);
  transition: color var(--trans);
}
.nav-link.active, .nav-link:hover { color: var(--color-primary); }
.nav-indicator {
  position:absolute; height:2px; background:var(--color-primary);
  bottom:0; left:0; width:0; border-radius:2px;
  transition: transform var(--trans), width var(--trans), left var(--trans);
}

.header-tools { margin-left:auto; display:flex; gap:.6rem; align-items:center; }
.theme-toggle {
  border:none; background:var(--color-bg-alt);
  width:42px; height:42px; border-radius:50%;
  box-shadow: var(--shadow-sm); display:grid; place-items:center;
  font-size:1.15rem; transition: background var(--trans), transform var(--trans);
}
.theme-toggle:hover { background:#eef2f9; }
.theme-toggle:active { transform:scale(.9); }
.theme-quick { display:flex; gap:.35rem; }
.theme-pill {
  border:1px solid var(--color-border);
  background:var(--color-bg-alt);
  font-size:.65rem; letter-spacing:.5px;
  padding:.35rem .55rem; border-radius:999px;
  color:var(--color-muted);
  transition: background var(--trans), color var(--trans), transform var(--trans);
}
.theme-pill:hover { background:#eef2f9; color:var(--color-primary); }
.menu-toggle {
  display:none; width:44px; height:44px; border:none;
  background:var(--color-bg-alt); border-radius:50%;
  box-shadow: var(--shadow-sm); padding:0 .75rem;
  flex-direction:column; justify-content:center; gap:6px;
  transition: background var(--trans);
}
.menu-toggle span {
  display:block; height:3px; background:var(--color-primary); border-radius:2px;
  transition: transform var(--trans), opacity var(--trans);
}

.mobile-nav {
  background:var(--color-bg-alt);
  border-bottom:1px solid var(--color-border);
  padding:.7rem 1rem .9rem;
}
.mobile-nav-list { list-style:none; display:flex; flex-direction:column; gap:.35rem; }
.mobile-nav-list a {
  display:block; padding:.65rem .75rem; border-radius:var(--radius-sm);
  color:var(--color-text); font-size:.9rem;
  transition: background var(--trans), color var(--trans);
}
.mobile-nav-list a:hover { background:#eef2f9; }

.sidebar {
  position:fixed; top:72px; left:0;
  width:280px; padding:1rem 1.15rem 2.2rem;
  height:calc(100vh - 72px);
  overflow-y:auto; display:flex; flex-direction:column; gap:1.05rem;
  scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width:8px; }
.sidebar::-webkit-scrollbar-thumb {
  background:rgba(0,0,0,.15); border-radius:4px;
}
.main {
  margin-left:280px;
  padding:1.6rem 2.1rem 4rem;
  max-width:1040px;
  margin-right:auto;
}

.section { margin-top:3.3rem; position:relative; }
.section.alt {
  background:var(--color-bg-alt);
  padding:2rem;
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-top:4rem;
}
.section-head { margin-bottom:1.2rem; }
.section-title {
  font-size:1.55rem; font-weight:600; letter-spacing:.5px;
}
.section-desc { color:var(--color-muted); font-size:.92rem; margin-top:.3rem; }

.hero {
  position:relative;
  background:var(--gradient-hero);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:3.8rem 2.7rem 3.7rem;
  overflow:hidden;
  box-shadow: var(--shadow-md);
  margin-top:1.2rem;
}
.hero-content { position:relative; z-index:2; max-width:650px; }
.hero-title { font-size:clamp(2rem,5.2vw,3rem); line-height:1.1; margin-bottom:1rem; font-weight:700; }
.hero-subtitle { font-size:1.05rem; opacity:.95; margin-bottom:1.9rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

.hero-decor .pulse-dot {
  position:absolute; width:14px; height:14px; background:#fff;
  border-radius:50%; opacity:.65; animation:pulse 3.5s ease-in-out infinite;
}
.pulse-dot.d1 { top:18%; left:70%; animation-delay:.2s; }
.pulse-dot.d2 { top:40%; left:80%; animation-delay:1s; }
.pulse-dot.d3 { top:65%; left:60%; animation-delay:1.8s; }

.site-footer {
  text-align:center;
  padding:3.2rem 1rem 2.2rem;
  color:var(--color-muted);
  font-size:.82rem;
}

/* Responsive */
@media (max-width:1200px) {
  .main { max-width:950px; }
}
@media (max-width:1150px) {
  .sidebar { display:none; }
  .main { margin-left:0; }
}
@media (max-width:860px) {
  .primary-nav { display:none; }
  .menu-toggle { display:flex; }
  .main { padding:1.25rem 1.15rem 3.5rem; }
  .hero { padding:3rem 1.55rem 3rem; }
  .header-inner { padding:.5rem 1rem; }
  .theme-quick { display:none; }
}
@media (max-width:520px) {
  .hero-title { font-size:2.25rem; }
  .hero-actions { flex-direction:column; }
  .header-inner { padding:.4rem .8rem; }
  .brand-name { display:none; }
  .logo { width:32px; height:32px; }
  .theme-toggle { width:36px; height:36px; font-size:1rem; }
  .menu-toggle { width:38px; height:38px; }
  .main { padding:1rem .8rem 3rem; }
  .hero { padding:2.5rem 1.2rem 2.5rem; }
  .section { margin-top:2.5rem; }
}

@keyframes pulse {
  0%,100% { transform: scale(.8); opacity:.5; }
  50% { transform: scale(1.6); opacity:.15; }
}