/* ===================================
   WUP — faq.css
=================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --purple:#7C5CFC;
  --purple2:#9B7FFF;
  --purple3:#C4B2FF;
  --dark:#0C0A1A;
  --white:#fff;
  --light-bg:#F7F6FF;
  --gray:#888;
  --text:#1A1530;
  --border:rgba(0,0,0,0.08);
}

html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--white);
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
}

/* ── ANIMATIONS ── */
.fade-up{
  opacity:0;transform:translateY(22px);
  transition:opacity .55s ease,transform .55s ease;
}
.fade-up.in{opacity:1;transform:translateY(0)}

/* ─────────────────────────────────
   NAV
───────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;height:64px;
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,0.07);
}

.nav-left{display:flex;align-items:center;gap:28px}

.nav-logo{
  font-family:'Geologica',sans-serif;font-weight:900;font-size:20px;
  color:var(--dark);text-decoration:none;display:flex;align-items:center;gap:1px;
}
.nav-logo span{color:var(--purple2)}

.nav-pill-links{display:flex;align-items:center;gap:6px}
.nav-pill{
  display:flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:9px;
  font-size:13px;font-weight:600;font-family:'Inter',sans-serif;
  text-decoration:none;cursor:pointer;transition:all .2s;border:none;
}
.nav-pill.active{background:var(--purple);color:#fff;box-shadow:0 4px 16px rgba(124,92,252,0.3)}
.nav-pill.ghost{background:transparent;color:var(--gray)}
.nav-pill.ghost:hover{background:var(--light-bg);color:var(--text)}
.nav-pill .pill-icon{font-size:15px}

.nav-right{display:flex;align-items:center;gap:10px}
.nav-icon-btn{
  width:36px;height:36px;border-radius:9px;
  background:transparent;border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:17px;color:var(--gray);
  transition:background .2s;
}
.nav-icon-btn:hover{background:var(--light-bg)}

.btn-login-nav{
  padding:8px 20px;border-radius:9px;
  background:transparent;border:1.5px solid var(--border);
  color:var(--text);font-size:13px;font-weight:600;font-family:'Inter',sans-serif;
  cursor:pointer;transition:all .2s;text-decoration:none;
}
.btn-login-nav:hover{border-color:var(--purple);color:var(--purple)}

.btn-signup-nav{
  padding:8px 20px;border-radius:9px;
  background:var(--purple);color:#fff;
  font-size:13px;font-weight:700;font-family:'Inter',sans-serif;
  border:none;cursor:pointer;transition:all .2s;text-decoration:none;
  box-shadow:0 4px 16px rgba(124,92,252,0.28);
}
.btn-signup-nav:hover{background:var(--purple2);transform:translateY(-1px)}

.nav-hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;
}
.nav-hamburger span{width:22px;height:2px;background:var(--dark);border-radius:2px;display:block}

/* Mobile nav dropdown */
.nav-mobile-menu{
  display:none;position:fixed;top:64px;left:0;right:0;z-index:199;
  background:#fff;border-bottom:1px solid var(--border);
  padding:16px 20px;flex-direction:column;gap:8px;
  box-shadow:0 8px 32px rgba(0,0,0,0.08);
}
.nav-mobile-menu.open{display:flex}
.nav-mobile-menu a,.nav-mobile-menu button{
  display:block;padding:12px 16px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--text);
  text-decoration:none;border:none;background:transparent;
  text-align:left;cursor:pointer;font-family:'Inter',sans-serif;
  transition:background .15s;
}
.nav-mobile-menu a:hover,.nav-mobile-menu button:hover{background:var(--light-bg)}
.nav-mobile-menu .mob-signup{
  background:var(--purple);color:#fff;border-radius:10px;padding:13px 16px;text-align:center;
}
.nav-mobile-menu .mob-signup:hover{background:var(--purple2)}
.nav-socials-mob{display:flex;gap:8px;padding:8px 16px 0}
.nav-socials-mob a{
  width:34px;height:34px;border-radius:8px;
  background:var(--light-bg);
  display:flex;align-items:center;justify-content:center;
  color:var(--text);text-decoration:none;transition:all .2s;
}
.nav-socials-mob a:hover{background:var(--purple);color:#fff}
.nav-socials-mob svg{width:14px;height:14px}

/* Nav socials desktop */
.nav-socials-desk{display:flex;align-items:center;gap:8px}
.nav-socials-desk a{
  width:32px;height:32px;border-radius:8px;
  background:var(--light-bg);
  display:flex;align-items:center;justify-content:center;
  color:var(--text);text-decoration:none;transition:all .2s;
}
.nav-socials-desk a:hover{background:var(--purple);color:#fff}
.nav-socials-desk svg{width:13px;height:13px}

/* ─────────────────────────────────
   PAGE HERO
───────────────────────────────── */
.faq-hero{
  padding:120px 40px 64px;
  text-align:center;
  position:relative;overflow:hidden;
}
.faq-hero::before{
  content:'';position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:700px;height:500px;
  background:radial-gradient(ellipse,rgba(124,92,252,0.07) 0%,transparent 65%);
  pointer-events:none;
}

.faq-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 16px;border-radius:30px;
  background:var(--light-bg);border:1px solid rgba(124,92,252,0.15);
  font-size:12px;font-weight:700;color:var(--purple);
  letter-spacing:.5px;margin-bottom:22px;
}

.faq-hero h1{
  font-family:'Geologica',sans-serif;
  font-size:clamp(32px,5vw,52px);
  font-weight:800;line-height:1.1;
  color:var(--text);margin-bottom:16px;
}
.faq-hero p{
  font-size:16px;color:var(--gray);line-height:1.7;
  max-width:480px;margin:0 auto;
}

/* ─────────────────────────────────
   FAQ CONTENT
───────────────────────────────── */
.faq-content{
  max-width:720px;margin:0 auto;
  padding:0 24px 100px;
}

/* Category group */
.faq-group{margin-bottom:48px}

.faq-category{
  font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:2px;
  color:var(--gray);
  margin-bottom:16px;
  padding-left:2px;
}

/* Accordion item */
.faq-item{
  border:1.5px solid var(--border);
  border-radius:14px;
  margin-bottom:10px;
  overflow:hidden;
  background:#fff;
  transition:border-color .25s, box-shadow .25s;
}
.faq-item:hover{border-color:rgba(124,92,252,0.2)}
.faq-item.open{
  border-color:rgba(124,92,252,0.25);
  box-shadow:0 4px 24px rgba(124,92,252,0.07);
}

.faq-question{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;
  background:none;border:none;cursor:pointer;
  font-size:15px;font-weight:600;
  color:var(--text);font-family:'Inter',sans-serif;
  text-align:left;gap:16px;
  transition:color .2s;
}
.faq-question:hover{color:var(--purple)}
.faq-item.open .faq-question{color:var(--purple)}

.faq-icon{
  width:28px;height:28px;border-radius:8px;
  background:var(--light-bg);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:18px;color:var(--gray);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  line-height:1;
}
.faq-item.open .faq-icon{
  background:var(--purple);color:#fff;
  transform:rotate(45deg);
  box-shadow:0 4px 12px rgba(124,92,252,0.3);
}

.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .42s cubic-bezier(.16,1,.3,1), padding .35s ease;
  padding:0 22px;
}
.faq-item.open .faq-answer{
  max-height:400px;
  padding:0 22px 22px;
}

.faq-answer p{
  font-size:14px;color:#555;line-height:1.75;
  border-top:1px solid rgba(0,0,0,0.05);
  padding-top:16px;
}

/* ─────────────────────────────────
   FOOTER
───────────────────────────────── */
footer{
  background:#0C0B1A;
  padding:24px 40px;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,0.05);
  flex-wrap:wrap;gap:16px;
}
.footer-logo{
  font-family:'Geologica',sans-serif;font-weight:900;font-size:19px;color:#fff;
}
.footer-logo span{color:var(--purple2)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{
  font-size:12px;color:rgba(255,255,255,0.3);
  text-decoration:none;transition:color .2s;
}
.footer-links a:hover{color:rgba(255,255,255,0.8)}

/* ─────────────────────────────────
   RESPONSIVE
───────────────────────────────── */
@media(max-width:768px){
  nav{padding:0 20px;height:56px}
  .nav-mobile-menu{top:56px}
  .nav-pill-links,.nav-right .btn-login-nav,.nav-right .btn-signup-nav,
  .nav-right .nav-socials-desk,.nav-icon-btn{display:none}
  .nav-hamburger{display:flex}

  .faq-hero{padding:90px 20px 48px}
  .faq-hero h1{font-size:28px}
  .faq-hero p{font-size:14px}

  .faq-content{padding:0 16px 72px}
  .faq-question{padding:16px 18px;font-size:14px}
  .faq-item.open .faq-answer{padding:0 18px 18px}
  .faq-answer p{font-size:13.5px}

  footer{padding:20px;flex-direction:column;align-items:flex-start}
  .footer-links{gap:16px}
}

@media(max-width:400px){
  .faq-hero h1{font-size:24px}
  .faq-category{font-size:10px}
}