.page-support{
  --support-bg:#F4F7FB;
  --support-card:#FFFFFF;
  --support-text:#1F2D3D;
  --support-border:#D6E2FF;
  --support-primary:#2F6BFF;
  --support-secondary:#6FA3FF;
  --support-glow:#A5C4FF;
  --support-btn:linear-gradient(180deg, #4A8BFF 0%, #2F6BFF 100%);
  background:var(--support-bg);
  color:var(--support-text);
  max-width:100%;
  overflow-x:hidden;
}

.page-support__hero{
  padding:10px 16px 0;
}

.page-support__hero-image{
  width:100%;
  max-width:1200px;
  margin:0 auto 0;
  max-height:320px;
  overflow:hidden;
  border-radius:12px;
}

.page-support__hero-img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:17/5;
  object-fit:cover;
}

.page-support__hero-content{
  width:100%;
  max-width:1200px;
  margin:16px auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}

.page-support__hero-title{
  font-weight:800;
  line-height:1.2;
  letter-spacing:-0.5px;
  color:var(--support-text);
  max-width:720px;
  margin:0;
  font-size:clamp(1.6rem, 2.8vw, 2.4rem);
}

.page-support__hero-sub{
  font-size:1rem;
  line-height:1.6;
  color:#3A4A5E;
  max-width:640px;
  margin:0;
}

.page-support__hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:4px;
  width:100%;
  max-width:100%;
  overflow:hidden;
  box-sizing:border-box;
}

.page-support__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 28px;
  border-radius:999px;
  font-weight:700;
  font-size:0.95rem;
  text-decoration:none;
  transition:transform 0.2s, box-shadow 0.2s;
  max-width:100%;
  box-sizing:border-box;
  white-space:normal;
  word-wrap:break-word;
  border:1px solid transparent;
}

.page-support__btn--primary{
  background:var(--support-btn);
  color:#FFFFFF;
  box-shadow:0 4px 14px rgba(47,107,255,0.35);
}

.page-support__btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(47,107,255,0.45);
}

.page-support__btn--ghost{
  background:transparent;
  color:var(--support-primary);
  border-color:var(--support-primary);
}

.page-support__btn--ghost:hover{
  background:rgba(47,107,255,0.08);
}

.page-support__faq{
  background:var(--support-card);
  margin:24px 0 0;
  padding:24px 16px 32px;
  border-top:1px solid var(--support-border);
  border-bottom:1px solid var(--support-border);
}

.page-support__faq-inner{
  max-width:880px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.page-support__faq-title{
  font-size:1.8rem;
  font-weight:800;
  color:var(--support-primary);
  margin:0;
  text-align:center;
  line-height:1.2;
}

.page-support__faq-desc{
  font-size:0.98rem;
  color:#3A4A5E;
  text-align:center;
  margin:0 0 8px;
  line-height:1.5;
}

.page-support__faq-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.page-support__faq-item{
  background:var(--support-bg);
  border:1px solid var(--support-border);
  border-radius:12px;
  padding:0 16px;
  overflow:hidden;
}

.page-support__faq-question{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px 0;
  cursor:pointer;
  font-weight:600;
  font-size:1rem;
  color:var(--support-text);
  list-style:none;
}

.page-support__faq-question::-webkit-details-marker{
  display:none;
}

.page-support__faq-icon{
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--support-primary);
  color:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  font-weight:700;
}

.page-support__faq-item[open] .page-support__faq-icon{
  background:var(--support-secondary);
}

.page-support__faq-answer{
  padding:0 0 16px;
  border-top:1px dashed var(--support-border);
  padding-top:12px;
  font-size:0.95rem;
  line-height:1.6;
  color:#2A3A4E;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}

.page-support__faq-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 18px;
  border-radius:999px;
  background:var(--support-btn);
  color:#FFFFFF;
  font-weight:600;
  font-size:0.9rem;
  text-decoration:none;
  max-width:100%;
  box-sizing:border-box;
  white-space:normal;
  word-wrap:break-word;
}

.page-support__guide{
  background:var(--support-bg);
  padding:24px 16px 40px;
}

.page-support__guide-inner{
  max-width:1000px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.page-support__guide-title{
  font-size:1.8rem;
  font-weight:800;
  color:var(--support-primary);
  text-align:center;
  margin:0;
  line-height:1.2;
}

.page-support__guide-figure{
  margin:0;
  border-radius:12px;
  overflow:hidden;
  background:var(--support-card);
  border:1px solid var(--support-border);
}

.page-support__guide-figure img{
  display:block;
  width:100%;
  max-width:800px;
  aspect-ratio:2/1;
  object-fit:cover;
  margin:0 auto;
}

.page-support__guide-figure figcaption{
  font-size:0.85rem;
  color:#3A4A5E;
  text-align:center;
  padding:10px 12px;
  line-height:1.4;
}

.page-support__guide-subtitle{
  font-size:1.2rem;
  font-weight:700;
  color:var(--support-text);
  margin:12px 0 0;
}

.page-support__guide-inner p{
  font-size:0.95rem;
  line-height:1.6;
  color:#2A3A4E;
  margin:0;
}

.page-support__guide-inner strong{
  color:var(--support-primary);
}

@media (max-width:768px){
  .page-support__hero{
    padding:10px 12px 0;
  }

  .page-support__hero-image{
    max-height:220px;
  }

  .page-support__hero-img{
    aspect-ratio:2/1;
  }

  .page-support__hero-content{
    gap:10px;
  }

  .page-support__hero-title{
    font-size:1.25rem;
    line-height:1.3;
  }

  .page-support__hero-sub{
    font-size:0.9rem;
    line-height:1.5;
  }

  .page-support__btn{
    width:auto;
    max-width:100%;
    box-sizing:border-box;
    white-space:normal;
    word-wrap:break-word;
    padding:10px 20px;
    font-size:0.9rem;
  }

  .page-support__hero-actions{
    width:100%;
    max-width:100%;
    overflow:hidden;
    box-sizing:border-box;
    flex-direction:column;
    align-items:stretch;
  }

  .page-support__btn--ghost,
  .page-support__btn--primary{
    width:100%;
  }

  .page-support__faq-title,
  .page-support__guide-title{
    font-size:1.4rem;
  }

  .page-support__guide-figure img{
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:2/1;
    object-fit:cover;
  }

  .page-support__guide-inner p{
    font-size:0.9rem;
  }

  .page-support img{
    max-width:100% !important;
    height:auto !important;
  }

  .page-support{
    max-width:100%;
    overflow-x:hidden;
  }
}

@media (max-width:480px){
  .page-support__hero-title{
    font-size:1.1rem;
  }

  .page-support__hero-sub{
    font-size:0.85rem;
  }

  .page-support__faq-question{
    font-size:0.9rem;
  }

  .page-support__faq-answer{
    font-size:0.88rem;
  }

  .page-support__faq{
    padding:20px 12px 28px;
  }

  .page-support__guide{
    padding:20px 12px 32px;
  }
}