.faq-masonry { column-count: 1; column-gap: 1rem; }
@media (min-width: 768px) { .faq-masonry { column-count: 2; } }
.faq-item { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; display: block; margin-bottom: 1rem; }

.faq-card { position: relative; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; box-shadow: 0 8px 18px -12px rgba(0,0,0,.25); border: 1px solid var(--faq-border, rgba(0,0,0,.08)); border-radius: 0.75rem; background: #fff; overflow: hidden; }
.faq-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.3); }
.faq-card summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; font-weight: 600; font-size: .95rem; line-height: 1.25rem; cursor: pointer; position: relative; color: inherit; }
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary::marker { content: ""; }
.faq-card summary::after { content: "+"; font-weight: 700; font-size: .9rem; opacity: .75; transition: transform .2s ease, opacity .2s ease; }
.faq-card[open] summary::after { content: "−"; opacity: .9; }
.faq-card[open] { --faq-border: rgba(22,163,74,.25); background: #fff; }
.faq-card[open]::before { content: ""; position: absolute; inset: 0 0 0 auto; left: 0; width: 4px; border-radius: 8px 0 0 8px; background: linear-gradient(180deg, #4CAF50, #16a34a); }
.faq-card .faq-content { padding: 0 .95rem .9rem; font-size: .9rem; color: rgba(0,0,0,.7); background: #fff; }

.hero-perspective { perspective: 1200px; perspective-origin: 50% 20%; transform-style: preserve-3d; }
.hero-tilt { transform-origin: center top; transform: rotateX(15deg) translateZ(0); will-change: transform; backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .hero-tilt { transform: none; } }

.how-step { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(10px); will-change: transform, opacity, filter; }
.how-step.is-visible { animation: lp-puff-in 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.how-step.is-hidden { animation: lp-puff-out 520ms ease forwards; }

@keyframes lp-puff-in {
  0% { opacity: 0; transform: translateY(12px) scale(0.92); filter: blur(12px); }
  60% { opacity: 1; transform: translateY(0) scale(1.03); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes lp-puff-out {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.98); filter: blur(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .how-step { opacity: 1; transform: none; filter: none; }
  .how-step.is-visible, .how-step.is-hidden { animation: none; }
}