/* eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t400);margin-bottom:1.1rem}
.eyebrow::before{content:'';display:block;width:18px;height:2px;background:var(--t400);border-radius:2px;flex-shrink:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;font-family:var(--fb);font-size:.9375rem;font-weight:600;border-radius:var(--rmd);border:none;cursor:pointer;transition:background var(--ease),transform var(--spring),box-shadow var(--ease);white-space:nowrap;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background 200ms}
.btn:hover::after{background:rgba(255,255,255,.06)}
.btn:active{transform:scale(.975)!important}
.btn-lg{padding:15px 32px;font-size:1rem}
.btn-primary{background:var(--t400);color:var(--wh);box-shadow:0 2px 8px rgba(29,158,117,.25)}
.btn-primary:hover{background:var(--t500);box-shadow:var(--sht);transform:translateY(-2px)}
.btn-secondary{background:transparent;border:1.5px solid var(--t400);color:var(--t400)}
.btn-secondary:hover{background:var(--t50);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.20);color:var(--wh);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.36);transform:translateY(-1px)}
.btn-arr{display:inline-block;transition:transform var(--ease)}
.btn:hover .btn-arr{transform:translateX(3px)}

/* FAQ Accordions */
.faq-group {
  max-width: 800px;
  margin: 0 auto;
}
details[name="faq"] {
  background: var(--wh);
  border: 1px solid var(--n100);
  border-radius: var(--rmd);
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  transition: all var(--ease);
}
details[name="faq"]:hover {
  border-color: var(--n200);
  box-shadow: var(--shm);
}
details[name="faq"][open] {
  border-color: var(--t400);
  box-shadow: 0 8px 24px rgba(29, 158, 117, 0.08);
}
details[name="faq"] summary {
  padding: 20px 24px;
  font-family: var(--fh);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--n900);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details[name="faq"] summary::-webkit-details-marker {
  display: none;
}
details[name="faq"] summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--t500);
  font-weight: 400;
  transition: transform var(--ease);
}
details[name="faq"][open] summary::after {
  transform: rotate(45deg);
}
.faq-content {
  padding: 0 24px 24px;
  color: var(--g600);
  font-size: 1rem;
  line-height: 1.6;
  border-top: 1px solid transparent;
}
details[name="faq"][open] .faq-content {
  border-top-color: var(--n100);
  padding-top: 16px;
}

/* WhatsApp Float */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: var(--t400); /* aligned to theme */
  color: var(--wh);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(29, 158, 117, 0.3);
  z-index: 9999;
  transition: transform var(--spring), box-shadow var(--ease), background var(--ease);
}
.wa-float:hover {
  transform: translateY(-4px) scale(1.05);
  background: var(--t500);
  box-shadow: 0 12px 24px rgba(29, 158, 117, 0.4);
}
.wa-float svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}