/* ============================================
   DunCrew Landing Page - Contact Page Styles
   Specific to contact.html (一起聊聊)
   ============================================ */

/* ---- Contact Hero ---- */
.contact-hero{
  position:relative;padding:8rem 0 4rem;background:var(--bg-secondary);overflow:hidden;text-align:center;
}
.contact-hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(232,168,56,0.06) 0%,transparent 70%)}
.contact-hero .container{position:relative;z-index:2}
.contact-hero .sec-title{font-size:2.5rem}
.contact-hero .sec-desc{margin-left:auto;margin-right:auto;max-width:480px;margin-bottom:0}

/* ---- Email card ---- */
.email-section{padding:4rem 0}
.email-card{
  max-width:560px;margin:0 auto;padding:3rem;text-align:center;
  position:relative;overflow:hidden;
}
.email-card::before{content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(94,186,174,0.05) 0%,transparent 70%);pointer-events:none}
.email-icon{
  width:64px;height:64px;border-radius:var(--radius-full);
  background:var(--teal-glow);border:1.5px solid rgba(94,186,174,0.2);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;
}
.email-icon svg{width:28px;height:28px;color:var(--teal)}
.email-addr{
  font-family:'JetBrains Mono','Consolas',monospace;font-size:1.25rem;font-weight:600;
  color:var(--text-primary);margin-bottom:.75rem;letter-spacing:-.01em;
  word-break:break-all;
}
.email-desc{font-size:.9rem;color:var(--text-secondary);line-height:1.7;margin-bottom:2rem;max-width:400px;margin-left:auto;margin-right:auto}
.email-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.btn-copy{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.5rem;
  background:var(--bg-elevated);border:1px solid var(--border-medium);border-radius:var(--radius-full);
  color:var(--text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;
  transition:all .3s var(--ease)}
.btn-copy:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-glow)}
.btn-copy.copied{border-color:var(--green);color:var(--green);background:var(--green-glow)}
.btn-copy svg{width:16px;height:16px}

/* ---- Collaboration cards ---- */
.collab-section{padding:3rem 0 5rem}
.collab-section .sec-title{text-align:center;margin-bottom:.5rem}
.collab-section .sec-desc{text-align:center;margin-left:auto;margin-right:auto}
.collab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
.collab-card{padding:2rem 1.5rem;text-align:center}
.collab-card .feat-icon{margin:0 auto 1.25rem}
.collab-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem}
.collab-tag{
  display:inline-block;padding:.25rem .75rem;font-size:.75rem;color:var(--text-muted);
  background:var(--bg-secondary);border-radius:var(--radius-full);
}

/* ---- FAQ ---- */
.faq-section{padding:3rem 0 5rem;background:var(--bg-secondary)}
.faq-section .sec-title{text-align:center;margin-bottom:.5rem}
.faq-section .sec-desc{text-align:center;margin-left:auto;margin-right:auto}
.faq-list{max-width:680px;margin:2.5rem auto 0}
.faq-item{
  background:var(--bg-panel);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);margin-bottom:.75rem;overflow:hidden;
  transition:all .3s var(--ease);
}
.faq-item:hover{border-color:var(--border-accent)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.125rem 1.5rem;cursor:pointer;font-weight:600;font-size:.95rem;
  color:var(--text-primary);background:none;border:none;width:100%;text-align:left;
  transition:color .2s var(--ease);
}
.faq-q:hover{color:var(--teal)}
.faq-arrow{
  width:20px;height:20px;transition:transform .3s var(--ease);flex-shrink:0;color:var(--text-muted);
}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .3s var(--ease);
}
.faq-item.open .faq-a{max-height:300px}
.faq-a-inner{
  padding:0 1.5rem 1.25rem;font-size:.875rem;color:var(--text-secondary);line-height:1.75;
}

/* ---- Responsive (contact-specific) ---- */
@media(max-width:768px){
  .contact-hero{padding:6rem 0 2.5rem}
  .contact-hero .sec-title{font-size:2rem}
  .collab-grid{grid-template-columns:1fr}
  .email-card{padding:2rem 1.25rem}
  .email-addr{font-size:1rem}
}