/* =====================================================
   ROOT
===================================================== */

.hero-light-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.96),
    rgba(255,255,255,.88)
  );
}

.hero-content{
  position:relative;
  z-index:2;
}

.hero-intro{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}

.hero-intro h1{
  font-size:34px;
  font-weight:800;
  margin-bottom:10px;
}

.hero-intro h1 span{
  color:var(--accent);
}

.hero-intro p{
  font-size:15px;
  color:#475569;
  margin-bottom:18px;
}

.hero-badges{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.hero-badges span{
  background:rgba(255,255,255,.75);
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}

/* =====================================================
   FAQ PAGE
===================================================== */
.faq-page{
  padding:90px 0;
  background:linear-gradient(180deg,#f8fafc,#ffffff);
}

.faq-page-wrap{
  max-width:860px;
  margin:0 auto;
}

/* FAQ ITEM */
.faq-item{
  margin-bottom:16px;
  border-radius:20px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 24px 60px rgba(0,0,0,.12);
  overflow:hidden;
}

/* QUESTION */
.faq-item summary{
  padding:18px 22px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  list-style:none;
  position:relative;
}

/* ICON */
.faq-item summary::after{
  content:"+";
  position:absolute;
  right:22px;
  top:18px;
  font-size:18px;
  color:var(--accent);
  transition:.25s ease;
}

.faq-item[open] summary::after{
  content:"–";
}

/* ANSWER */
.faq-content{
  padding:0 22px 20px;
}

.faq-content p{
  font-size:14px;
  color:#475569;
  line-height:1.7;
}

/* =====================================================
   CTA
===================================================== */
.faq-cta{
  padding:80px 0;
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#fff;
}

.faq-cta h2{
  font-size:32px;
  font-weight:800;
  margin-bottom:10px;
}

.faq-cta p{
  font-size:15px;
  opacity:.9;
  margin-bottom:22px;
}

.btn-faq{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#22c55e;
  color:#fff;
  padding:14px 30px;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 14px 30px rgba(34,197,94,.35);
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:768px){
  .hero-apple{ padding:60px 0 40px }
  .hero-intro h1{ font-size:26px }
  .faq-page{ padding:70px 0 }
}

@media(max-width:420px){
  .hero-intro h1{ font-size:24px }
}