/* ======================================================================
   ZAUNTURA — FAQ  ·  "Signal" (adapted from provided FAQ1 component)
   Calm monochrome clarity · warm-walnut dark · aurora · glow cards ·
   spinning signal pill · rotating +/× · cursor glow. Bronze accent.
   ====================================================================== */

#faq.faqx{position:relative;overflow:hidden;border-block:1px solid var(--line);
  --glow:212,196,170;            /* warm light for card glow */
  --bronze:185,139,69;
  background:#1B1714;color:#F4EFE6}
#faq.faqx{ /* dark tokens so nested base components read correctly */
  --line:rgba(232,224,210,.14);--text:#F4EFE6;--text-dim:#A99F90}

/* aurora + overlay */
.faqx-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 100% at 12% -4%, rgba(var(--bronze),.16), transparent 60%),
    radial-gradient(ellipse 50% 80% at 92% 108%, rgba(90,168,156,.10), transparent 60%),
    #1B1714}
.faqx-aurora::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;opacity:.7;
  background:linear-gradient(130deg,rgba(255,255,255,.04) 0%,transparent 62%)}

.faqx-wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;
  padding-inline:var(--gut);display:flex;flex-direction:column;gap:clamp(34px,5vw,56px)}

/* ---- intro "Signal" pill ---- */
.faqx-pill{position:relative;display:flex;align-items:center;gap:14px;align-self:center;
  width:100%;max-width:30rem;padding:14px 22px;border-radius:9999px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(232,224,210,.14);background:rgba(12,11,10,.42);color:rgba(248,250,252,.92);
  text-transform:uppercase;letter-spacing:.34em;font-family:var(--font-display);font-size:10.5px;font-weight:600;
  opacity:0;transform:translateY(12px);filter:blur(8px);
  transition:opacity .72s ease,transform .72s ease,filter .72s ease}
.faqx-pill.in{opacity:1;transform:none;filter:none}
.faqx-pill__beam,.faqx-pill__pulse{position:absolute;inset:-110%;pointer-events:none;border-radius:50%}
.faqx-pill__beam{opacity:.5;
  background:conic-gradient(from 160deg, rgba(var(--bronze),.4), transparent 32%, rgba(212,196,170,.28) 58%, transparent 78%, rgba(var(--bronze),.3));
  animation:faqxSpin 18s linear infinite}
.faqx-pill__pulse{border:1px solid rgba(212,196,170,.5);opacity:.25;animation:faqxPulse 3.4s ease-out infinite}
.faqx-pill__label{position:relative;z-index:1;letter-spacing:.4em;white-space:nowrap}
.faqx-pill__meter{position:relative;z-index:1;flex:1 1 auto;height:1px;opacity:.7;transform-origin:left;
  background:linear-gradient(90deg,transparent,rgba(212,196,170,.9) 35%,transparent 85%);
  animation:faqxMeter 5.8s ease-in-out infinite}
.faqx-pill__tick{position:relative;z-index:1;width:.5rem;height:.5rem;border-radius:50%;
  background:rgba(212,196,170,.95);box-shadow:0 0 0 4px rgba(255,255,255,.08);animation:faqxTick 3.2s ease-in-out infinite}
@keyframes faqxSpin{to{transform:rotate(360deg)}}
@keyframes faqxPulse{0%{transform:scale(.7);opacity:.55}60%{opacity:.1}100%{transform:scale(1.25);opacity:0}}
@keyframes faqxMeter{0%,20%{transform:scaleX(0);transform-origin:left}45%,60%{transform:scaleX(1);transform-origin:left}80%,100%{transform:scaleX(0);transform-origin:right}}
@keyframes faqxTick{0%,30%{transform:translateX(-6px);opacity:.4}50%{transform:translateX(2px);opacity:1}100%{transform:translateX(20px);opacity:0}}

/* ---- header ---- */
.faqx-head{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
@media(min-width:760px){.faqx-head{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.faqx-head .kick{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(212,196,170,.85);margin:0 0 16px}
.faqx-head h2{font-family:var(--font-serif);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(33px,4.6vw,56px);line-height:1.02;margin:0;color:#F8F5EE;max-width:16ch}
.faqx-head h2 .em{font-style:italic;color:rgb(var(--bronze))}
.faqx-head .sub{color:rgba(244,239,230,.62);font-size:16px;line-height:1.6;margin:18px 0 0;max-width:42ch}
.faqx-head .hcta{flex:none}
.faqx-head .btn-ghost{border-color:rgba(232,224,210,.22);color:#F4EFE6}
.faqx-head .btn-ghost:hover{border-color:rgba(212,196,170,.7);color:#fff}

/* ---- cards ---- */
.faqx-list{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}
.faqx-card{position:relative;overflow:hidden;border-radius:22px;
  border:1px solid rgba(232,224,210,.12);background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 36px 120px -70px rgba(0,0,0,.9);
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .5s,background .5s}
.faqx-card:hover{transform:translateY(-2px);border-color:rgba(232,224,210,.22)}
.faqx-card.open{border-color:rgba(var(--bronze),.5);background:rgba(255,255,255,.05)}
.faqx-card__glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(240px circle at var(--fx,50%) var(--fy,50%), rgba(var(--glow),.1), transparent 70%)}
.faqx-card:hover .faqx-card__glow,.faqx-card.open .faqx-card__glow{opacity:1}

.faqx-q{appearance:none;width:100%;background:transparent;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:22px;padding:26px 30px}
.faqx-q:focus-visible{outline:2px solid rgba(212,196,170,.6);outline-offset:-6px;border-radius:22px}

/* icon */
.faqx-ic{position:relative;flex:none;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(232,224,210,.2);background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .5s,background .5s}
.faqx-card:hover .faqx-ic{transform:scale(1.05)}
.faqx-ic::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(212,196,170,.4);opacity:0}
.faqx-card.open .faqx-ic{border-color:rgb(var(--bronze));background:rgba(var(--bronze),.16)}
.faqx-card.open .faqx-ic::before{animation:faqxPing 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes faqxPing{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(1.5);opacity:0}}
.faqx-ic svg{position:relative;width:20px;height:20px;color:#F4EFE6;
  transition:transform .5s cubic-bezier(.16,1,.3,1),color .5s}
.faqx-card.open .faqx-ic svg{transform:rotate(45deg);color:rgb(var(--bronze))}

/* body */
.faqx-top{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
@media(min-width:600px){.faqx-top{flex-direction:row;align-items:center;gap:16px}}
.faqx-qt{font-family:var(--font-serif);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(18px,1.6vw,22px);line-height:1.3;color:#F8F5EE;margin:0}
.faqx-tag{display:inline-flex;width:fit-content;align-items:center;border:1px solid rgba(232,224,210,.18);
  border-radius:9999px;padding:5px 13px;font-family:var(--font-display);font-size:9.5px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(244,239,230,.6)}
@media(min-width:600px){.faqx-tag{margin-left:auto}}

.faqx-a-wrap{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1)}
.faqx-card.open .faqx-a-wrap{grid-template-rows:1fr}
.faqx-a{overflow:hidden;min-height:0}
.faqx-a p{margin:0;padding:2px 30px 28px 100px;color:rgba(244,239,230,.66);font-size:15.5px;line-height:1.66;
  max-width:64ch;opacity:0;transform:translateY(8px);
  transition:opacity .5s ease .08s,transform .5s cubic-bezier(.16,1,.3,1) .08s}
.faqx-card.open .faqx-a p{opacity:1;transform:none}
@media(max-width:600px){.faqx-a p{padding-left:30px}}

/* entrance fade-up (cards) */
.js .faqx-card{opacity:0;transform:translateY(22px);filter:blur(10px);
  transition:opacity .8s cubic-bezier(.22,.68,0,1),transform .8s cubic-bezier(.22,.68,0,1),filter .8s ease,
    border-color .5s,background .5s}
.js .faqx-card.rin{opacity:1;transform:translateY(0);filter:none}

@media (prefers-reduced-motion:reduce){
  .faqx-pill__beam,.faqx-pill__pulse,.faqx-pill__meter,.faqx-pill__tick{animation:none}
  .faqx-card.open .faqx-ic::before{animation:none}
  .faqx-pill{opacity:1;transform:none;filter:none}
  .js .faqx-card{opacity:1;transform:none;filter:none}
  .faqx-a-wrap,.faqx-a p,.faqx-ic svg{transition:none}
}