.faq-pro {
  --gap:1.8rem;
  --rad:12px;
  --shadow:0 6px 22px rgba(0,0,0,.08);
  --trans:.25s cubic-bezier(.4,0,.2,1);
  --bg-card:#fff;
  --bg-rose:#fff6fb;
  position:relative;
  margin:4rem 0;
  grid-column:1/-1;
  padding:calc(var(--gap)*1.2) var(--gap);
  background:linear-gradient(135deg,#ffe8fa 0%,#fff 100%);
  border-radius:var(--rad);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.faq-pro::before,.faq-pro::after {
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--accent);
  opacity:.06;
  pointer-events:none;
}
.faq-pro::before {
  width:360px;
  height:360px;
  right:-140px;
  top:-140px;
}
.faq-pro::after {
  width:260px;
  height:260px;
  left:-120px;
  bottom:-120px;
}
.faq-pro h2 {
  font-size:2.8rem;
  margin-bottom:calc(var(--gap)*.8);
  position:relative;
  display:inline-block;
}
.faq-pro h2::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:68px;
  height:4px;
  background:var(--accent);
  border-radius:4px;
}
.faq-pro details {
  background:var(--bg-card);
  border-radius:var(--rad);
  margin-top:1rem;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  overflow:hidden;
  transition:box-shadow var(--trans),transform var(--trans);
}
.faq-pro details[open] {
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.faq-pro summary {
  cursor:pointer;
  padding:1.6rem 1.8rem;
  list-style:none;
  font-size:1.7rem;
  font-weight:700;
  position:relative;
  line-height:1.4;
  transition:color var(--trans),background var(--trans);
}
.faq-pro summary:hover {
  background:var(--bg-rose);
}
.faq-pro summary::-webkit-details-marker {
  display:none;
}
.faq-pro summary::after {
  content:"";
  position:absolute;
  right:1.8rem;
  top:50%;
  width:11px;
  height:11px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:translateY(-50%) rotate(45deg);
  transition:transform var(--trans);
}
.faq-pro details[open] summary::after {
  transform:translateY(-50%) rotate(225deg);
}
.faq-pro .answer {
  padding:0 1.8rem 1.8rem 1.8rem;
  color:var(--muted);
  line-height:1.65;
  animation:fade .28s ease-out;
}
@keyframes fade {
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
@media(max-width:480px){
  .faq-pro{padding:calc(var(--gap)*1) 1.2rem}
  .faq-pro h2{font-size:2.4rem}
}