:root {
  --slate-dark: #1A1F3A;
  --slate-light: #2D3E5F;
  --gold: #D4AF37;
  --platinum: #E8E8E8;
  --teal-professional: #0F7B8F;
  --navy-deep: #0A1929;
  --white: #FFFFFF;
  --accent-copper: #B8860B;

  --font-family-base: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-family-display: 'Oswald', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Lato:wght@300;400;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* FAQ Section - PREMIUM EXECUTIVE */
.faq-section {
  padding: 54px 0 40px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f0f3f7 50%, #e8ecf1 100%);
  border-radius: 36px;
  scroll-margin-top: 70px;
  box-shadow: 0 10px 40px rgba(26, 31, 58, 0.12);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.faq-section::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(15,123,143,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.faq-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 26px;
  position: relative;
  z-index: 2;
}
.faq-header {
  text-align: center;
  margin-bottom: 34px;
}
#faq-heading, .faq-heading {
  color: var(--slate-dark);
  font-family: var(--font-family-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(26,31,58,0.03);
}
.faq-subtitle, .faq-subtext {
  color: var(--slate-light);
  font-family: var(--font-family-base);
  font-size: 1.04rem;
  font-weight: 500;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
  margin-bottom: 8px;
  text-align: center;
}
/* FAQ Items */
.faq-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(26, 31, 58, 0.07);
  border: 2px solid transparent;
  background-clip: padding-box;
  background-image: linear-gradient(var(--white),var(--white)),linear-gradient(135deg,var(--teal-professional) 0%, var(--gold) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: all 0.21s cubic-bezier(0.25,0.46,0.45,0.94);
  position: relative;
}
.faq-item:hover {
  box-shadow: 0 10px 34px rgba(15,123,143,0.13);
  transform: translateY(-2.5px);
}
.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.20s;
  font-family: var(--font-family-display);
  color: var(--slate-dark);
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-align: left;
}
.faq-title {
  font-family: var(--font-family-display);
  color: var(--slate-dark);
  font-weight: 700;
  font-size: 1.11rem;
  letter-spacing: 0.2px;
  line-height: 1.4;
  flex: 1;
}
.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--white);
  background: linear-gradient(135deg,var(--teal-professional) 0%,var(--slate-light) 100%);
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.2rem;
  margin-left: 14px;
  transition: all 0.22s;
}
.faq-question[aria-expanded="true"] .faq-icon,
.faq-item.active .faq-icon {
  background: linear-gradient(135deg,var(--gold) 0%,var(--accent-copper) 100%);
  transform: rotate(45deg);
}
.faq-answer {
  display: none;
  padding: 0 22px 16px 22px;
  color: var(--slate-dark);
  font-family: var(--font-family-base);
  font-size: 0.99rem;
  line-height: 1.66;
  border-top: 1px solid rgba(15,123,143,0.08);
  animation: slideDown 0.24s cubic-bezier(0.25,0.46,0.45,0.94);
}
.faq-item.active .faq-answer {
  display: block;
}
/* Animation for answer reveal */
@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 600px; }
}
.faq-answer p {
  margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .faq-container { padding: 0 16px; }
  .faq-header h2, #faq-heading {
    font-size: 2rem;
  }
  .faq-question { padding: 14px 14px; }
  .faq-title { font-size: 1rem; }
  .faq-icon { width: 27px; height: 27px; font-size: 1.05rem; margin-left: 11px; }
  .faq-answer { padding: 0 14px 12px 14px; font-size: 0.97rem; }
}
@media (max-width: 700px) {
  .faq-section { padding: 26px 0 14px 0; border-radius: 19px; }
  .faq-container { padding: 0 7px; }
  .faq-items { gap: 8px; }
  .faq-header h2, #faq-heading { font-size: 1.23rem; margin-bottom:6px;}
  .faq-subtitle, .faq-subtext { font-size: 0.93rem; }
  .faq-question { padding: 12px 11px; font-size: 0.94rem; }
  .faq-title { font-size: 0.97rem;}
  .faq-icon { width: 24px; height: 24px; font-size: 0.85rem; margin-left: 7px; }
  .faq-answer { padding: 0 9px 10px 9px; font-size: 0.9rem;}
}

/* Accessibility focus */
.faq-question:focus {
  box-shadow: 0 0 0 2px var(--teal-professional);
}