/* ============================================================
   home-clone.css — 首页（克隆 shanlian.im 布局）
   全部规则限定在 .sl-home 内，不影响头部/页脚与其他页面
   ============================================================ */

.sl-home {
  --orange: hsl(27 100% 50%);
  --orange-light: hsl(30 100% 95%);
  --muted: hsl(0 0% 45%);
  --border: hsl(0 0% 90%);
  color: hsl(0 0% 13%);
  line-height: 1.6;
}
.sl-home *, .sl-home *::before, .sl-home *::after { box-sizing: border-box; }
.sl-home a { color: inherit; text-decoration: none; }
.sl-home img { max-width: 100%; height: auto; }
.sl-home h1 { font-size: 2.5rem; font-weight: 700; }
.sl-home h2 { font-size: 1.875rem; font-weight: 700; }
.sl-home h3 { font-size: 1.25rem; font-weight: 600; }
.sl-home ul { list-style: none; }

.sl-home .container { max-width: 1140px; margin: auto; padding: 0 2rem; }

.sl-home .btn-primary, .sl-home .btn-outline {
  display: inline-block; padding: .75rem 2rem; border-radius: 9999px;
  font-size: 1rem; font-weight: 500; cursor: pointer;
  transition: opacity .2s, background .2s;
}
.sl-home .btn-primary {
  color: #fff; border: 0;
  background: linear-gradient(135deg, var(--orange), hsl(35 100% 55%));
  box-shadow: 0 4px 20px -4px hsla(27 100% 50% / .3);
}
.sl-home .btn-primary:hover { opacity: .9; }
.sl-home .btn-outline { border: 1px solid var(--border); background: transparent; }
.sl-home .btn-outline:hover { background: hsl(30 10% 96%); }

.sl-home .hero-section { padding: 4rem 0; background: linear-gradient(135deg, hsl(30 100% 97%), #fff); }
.sl-home .section { padding: 4rem 0; }
.sl-home .section-alt { padding: 4rem 0; background: hsla(30 10% 96% / .3); }

.sl-home .text-center { text-align: center; }
.sl-home .text-gradient {
  color: var(--orange);
  background: linear-gradient(90deg, var(--orange), hsl(35 100% 55%));
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sl-home .text-muted { color: var(--muted); }
.sl-home .text-green { color: hsl(142 71% 45%); }
.sl-home .text-sm { font-size: .875rem; }
.sl-home .text-xs { font-size: .75rem; }
.sl-home .mb-2 { margin-bottom: .5rem; }
.sl-home .mb-4 { margin-bottom: 1rem; }
.sl-home .mb-8 { margin-bottom: 2rem; }
.sl-home .mb-12 { margin-bottom: 3rem; }
.sl-home .mt-8 { margin-top: 2rem; }

.sl-home .grid { display: grid; gap: 1.5rem; }
.sl-home .grid-3 { grid-template-columns: repeat(3, 1fr); }
.sl-home .grid-4 { grid-template-columns: repeat(4, 1fr); }
.sl-home .flex { display: flex; }
.sl-home .flex-1 { flex: 1; }
.sl-home .flex-wrap { flex-wrap: wrap; }
.sl-home .items-center { align-items: center; }
.sl-home .items-start { align-items: flex-start; }
.sl-home .justify-center { justify-content: center; }
.sl-home .justify-between { justify-content: space-between; }
.sl-home .gap-2 { gap: .5rem; }
.sl-home .gap-3 { gap: .75rem; }
.sl-home .gap-4 { gap: 1rem; }
.sl-home .gap-8 { gap: 2rem; }
.sl-home .gap-12 { gap: 3rem; }

.sl-home .card {
  padding: 2rem; border: 1px solid var(--border); border-radius: 1rem;
  background: #fff; transition: box-shadow .2s;
}
.sl-home .card:hover { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .1); }

.sl-home details { border: 1px solid var(--border); border-radius: .75rem; }
.sl-home details summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem; cursor: pointer; font-size: .875rem; font-weight: 500;
  list-style: none;
}
.sl-home details summary::-webkit-details-marker { display: none; }
.sl-home details summary::after {
  content: '▼'; color: var(--muted); font-size: .75rem; transition: transform .2s;
}
.sl-home details[open] summary::after { transform: rotate(180deg); }
.sl-home .faq-body {
  padding: 0 1.25rem 1.25rem; color: var(--muted);
  font-size: .875rem; line-height: 1.8;
}

.sl-home .fade-in { opacity: 0; transform: translateY(30px); transition: opacity .7s ease-out, transform .7s ease-out; }
.sl-home .fade-in.visible { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .sl-home .container { padding: 0 1rem; }
  .sl-home .hero-section, .sl-home .section, .sl-home .section-alt { padding: 2rem 0; }
  .sl-home .grid-3, .sl-home .grid-4 { grid-template-columns: 1fr; }
  .sl-home .flex-row-desktop { flex-direction: column; }
  .sl-home h1 { font-size: 1.75rem; }
  .sl-home h2 { font-size: 1.5rem; }
}
@media (min-width: 769px) { .sl-home .flex-row-desktop { flex-direction: row; } }