/* =========================
   FAQ PAGE (LIGHT THEME)
   Primary: rgb(17,119,255)
   Soft:    rgb(233,254,255)
========================= */

.faq-hero{
  padding: 4.2rem 0 2.2rem;
  text-align:center;
}

.faq-title{
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: .9rem 0 0;
  color:#0f172a;
}

.faq-sub{
  max-width: 760px;
  margin: .9rem auto 0;
  color:#334155;          /* FIX: readable on light bg */
  line-height: 1.65;
}

/* CTA row */
.faq-cta-row{
  display:flex;
  gap: 14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 1.6rem;
}

/* Layout */
.faq-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: start;
  margin-top: 2.2rem;
}

@media (max-width: 980px){
  .faq-grid{ grid-template-columns: 1fr; }
}

/* Accordion shell (light glass) */
.faq-accordion{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(17,119,255,.20);
  background: rgba(233,254,255,.72);
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
  position: relative;
}

.faq-accordion::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(620px 240px at 15% 0%, rgba(17,119,255,.10), transparent 60%),
    radial-gradient(620px 240px at 90% 10%, rgba(233,254,255,.95), transparent 55%);
  pointer-events:none;
  z-index:0;
}

/* Item button */
.faq-item{
  width: 100%;
  display:block;
  text-align:left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  color:#0f172a;
  position: relative;
  z-index:1;
}

.faq-item + .faq-item{
  border-top: 1px solid rgba(17,119,255,.14);
}

/* Question row */
.faq-q{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 18px;
}

.faq-q span:first-child{
  font-weight: 750;
  color:#0f172a;
  font-size: 1.05rem;
}

/* Plus/minus */
.faq-icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(17,119,255,.22);
  background: rgba(17,119,255,.08);
  position: relative;
  flex: 0 0 auto;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.faq-icon::before,
.faq-icon::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: rgba(15,23,42,.85);
  transform: translate(-50%,-50%);
}

.faq-icon::after{
  width: 2px;
  height: 14px;
}

.faq-item.is-open .faq-icon{
  background: rgba(17,119,255,.12);
  border-color: rgba(17,119,255,.35);
}

/* open -> minus */
.faq-item.is-open .faq-icon::after{
  height: 0;
}

/* Answer panel */
.faq-a{
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  color:#334155;
  line-height: 1.65;
  transition: max-height .28s ease, padding .22s ease;
}

.faq-item.is-open .faq-a{
  max-height: 420px;
  padding: 0 18px 18px;
}

/* Right side card */
.faq-side .demo-card{
  border-radius: 18px;
  padding: 18px;
  background: rgba(233,254,255,.72);
  border: 1px solid rgba(17,119,255,.20);
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
  position: sticky;
  top: 92px;
  overflow: hidden;
}

.faq-side .demo-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(620px 240px at 15% 0%, rgba(17,119,255,.10), transparent 60%),
    radial-gradient(620px 240px at 90% 10%, rgba(233,254,255,.95), transparent 55%);
  pointer-events:none;
  z-index:0;
}

.faq-side .demo-card > *{ position:relative; z-index:1; }

@media (max-width: 980px){
  .faq-side .demo-card{ position: static; }
}

.demo-side-title{
  margin: 0 0 .7rem;
  font-size: 1.15rem;
  color:#0f172a;
}

.demo-list{
  margin: 0;
  padding-left: 1.1rem;
  color:#334155;
}

.demo-list li{ margin: .55rem 0; }

.faq-side-note{
  margin: .9rem 0;
  color:#334155;
}

/* Light-theme ghost button */
.page-faq .btn-ghost{
  color: #0f172a !important;
  background: rgba(233,254,255,.9);
  border: 1px solid rgba(17,119,255,.35);
  box-shadow: 0 8px 22px rgba(17,119,255,.12);
}

.page-faq .btn-ghost:hover{
  background: rgba(17,119,255,.12);
  border-color: rgba(17,119,255,.55);
}

.btn-whatsapp{
  background: linear-gradient(180deg,#25D366,#1ebe5d);
  color:#fff;
  border: none;
  box-shadow: 0 10px 28px rgba(37,211,102,.35);
}

.btn-whatsapp:hover{
  filter: brightness(1.05);
}