body { font-family: "Satoshi", sans-serif; -webkit-font-smoothing: antialiased; opacity: 0; }
body.i18n-ready { opacity: 1; transition: opacity 0.1s; }

@keyframes reveal {
  from { clip-path: inset(0 0 100% 0); transform: translateY(3rem); opacity: 0; }
  to   { clip-path: inset(0 0 0 0);   transform: translateY(0);     opacity: 1; }
}

.reveal-element { opacity: 0; animation: reveal 1.2s cubic-bezier(0.16,1,0.3,1) forwards; }

.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
.faq-item.open .faq-answer { max-height: 500px; }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-icon { transition: transform .3s ease; }

body::before {
  content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 256px 256px;
}