* {
  box-sizing: border-box;
}

body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #333;
  background: #f8f9fa;
}

.container {
  max-width: 90%;
  margin: 30px auto;
  padding: 0;
}

/* Hero matches other pages */
.hero {
  background: linear-gradient(135deg, #024173 0%, #1a5490 100%);
  color: #fff;
  text-align: center;
  padding:4rem;
  position: relative;
  overflow: hidden;
  height: min-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="bd-pattern" width="26" height="26" patternUnits="userSpaceOnUse"><path d="M13,0 L26,13 L13,26 L0,13 Z" fill="rgba(255,255,255,0.06)"/></pattern></defs><rect width="100" height="100" fill="url(%23bd-pattern)"/></svg>');
  animation: bd-float 22s ease-in-out infinite;
  opacity: .9;
}

@keyframes bd-float {
  0%,100% {
    transform:translateY(0) rotate(0);
  }

  50% {
    transform:translateY(-14px) rotate(2deg);
  }

}

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

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  margin-bottom: .75rem;
  background: linear-gradient(45deg, #C8A451, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

.hero-lead {
  font-size: 1.1rem;
  opacity: .95;
  max-width: 1000px;
  margin: 0.5rem auto 0;
}

/* Minimal accordion styles following site pattern */
.faq-accordion {
  display: grid;
  gap: 14px;
}

.faq-item {
  border: 1px solid rgba(2,65,115,0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(2,65,115,.08);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: #fff;
  color: #024173;
  border: 0;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-weight: 600;
  cursor: pointer;
}

.faq-question:hover {
  background: #f7f9fb;
}

.faq-question .q-text {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

.faq-question .q-text i {
  color: #024173;
}

.faq-question .chevron {
  transition: transform 220ms ease;
  color: #024173;
}

.faq-question[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.faq-panel {
  overflow: hidden;
  height: 0;
  transition: height 260ms ease;
  background: #fff;
  will-change: height;
}

.faq-panel-inner {
  padding: 0 1.1rem 1.1rem;
  color: #444;
}

.faq-panel-inner p {
  margin: .5rem 0;
}

.faq-panel-inner .fe-list {
  margin-top: .25rem;
}

@media (prefers-reduced-motion: reduce) {
  .faq-panel {
    transition: none;
  }

  .faq-question .chevron {
    transition: none;
  }

}

/* -------------------------------------------------- */
/*  Enhanced FAQ Design Additions                     */
/*  (Pattern-respecting visual improvements)          */
/* -------------------------------------------------- */

/* Title accent underline */
.fe-title {
  position: relative;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.15;
}

.fe-title::after {
  content: '';
  display: block;
  width: 110px;
  height: 4px;
  margin-top: .65rem;
  background: linear-gradient(90deg,#C8A451,#f3e6c0,#ffffff);
  border-radius: 3px;
}

/* Subtle container spacing refinement */
.fe-section {
  margin-top: 2.5rem;
  margin-bottom: 4rem;
}

/* FAQ item hover & open elevation */
.faq-item {
  position: relative;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

.faq-item:hover {
  box-shadow: 0 16px 40px -5px rgba(2,65,115,.15);
  transform: translateY(-3px);
  border-color: rgba(2,65,115,0.18);
}

/* Open state marker */
.faq-item.is-open {
  border-color: rgba(2,65,115,0.35);
  box-shadow: 0 18px 46px -6px rgba(2,65,115,.20);
}

/* Left accent bar when open */
.faq-item.is-open::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg,#C8A451,#b8923f,#024173);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  opacity: .9;
}

/* Question button refinement */
.faq-question {
  font-size: 1rem;
  line-height: 1.25;
  position: relative;
  isolation: isolate;
}

.faq-question:focus-visible {
  outline: 2px solid #C8A451;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(200,164,81,.25);
}

/* Expanded visual feedback */
.faq-question[aria-expanded="true"] {
  background: linear-gradient(135deg,#f7f9fb,#ffffff 60%);
}

.faq-question[aria-expanded="true"] .q-text i {
  color: #C8A451;
}

.faq-question[aria-expanded="true"] .chevron {
  color: #C8A451;
}

/* Icon badges inside list items (reuse existing markup icons) */
.fe-list .fe-item i {
  width: 26px;
  height: 26px;
  margin: 0 0 10px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #024173, #1a5490);
  color: #fff;
  border-radius: 8px;
  font-size: .9rem;
  box-shadow: 0 4px 10px rgba(2,65,115,.25);
}

/* Improve spacing in list items */
.fe-list .fe-item span {
  line-height: 1.55;
}

/* Panel inner subtle divider for paragraphs + lists */
.faq-panel-inner > p + .fe-list,
.faq-panel-inner > .fe-list + p {
  margin-top: .85rem;
}

/* Smooth panel content entrance (opacity) */
.faq-panel-inner {
  animation: faqFadeIn .35s ease;
}

@keyframes faqFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Chevron animation smoothing */
.faq-question .chevron {
  transition: transform .26s ease, color .26s ease;
}

/* Responsive adjustments */
@media (max-width: 680px) {
  .hero { padding: 3rem 1.25rem; }
  .fe-title { font-size: clamp(1.75rem,6vw,2.4rem); }
  .faq-question { padding: .9rem .95rem; }
  .faq-panel-inner { padding: 0 .95rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-question .chevron,
  .faq-panel-inner {
    animation: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------- */
/*  Additional Component Enhancements (Requested)     */
/*  Targets: #faq-title, .fe-card-header, .fe-icon,    */
/*           .fe-card-title, .fe-card p, .fe-item,     */
/*           .fe-item i, .fe-item span                 */
/* -------------------------------------------------- */

/* Section title refinement */
#faq-title {
  font-size: clamp(2rem, 5vw, 2.85rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: .5px;
  background: linear-gradient(45deg, #024173, #1a5490 60%, #3a7ec8);
  color: #fff;
  position: relative;
  padding: 1rem;
  margin-bottom: 2.25rem;
}

#faq-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 150px;
  height: 5px;
  background: linear-gradient(90deg,#C8A451,#efd79a,#ffffff);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Card header (intro card container) */
.fe-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .85rem;
  flex-wrap: wrap;
}

/* Icon visual container */
.fe-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg,#024173,#1a5490 65%,#3a7ec8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.75rem;
  position: relative;
  box-shadow: 0 12px 28px -6px rgba(2,65,115,.45), 0 6px 14px -4px rgba(2,65,115,.35);
  overflow: hidden;
}

.fe-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg,rgba(255,255,255,.25),rgba(255,255,255,0));
  mix-blend-mode: overlay;
}

/* Card title */
.fe-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: #024173;
  letter-spacing: .25px;
  position: relative;
}

/* Emphasis variant inside content blocks */
.fe-card-title + p { margin-top: .35rem; }

/* Paragraphs in main card content */
.fe-card p, .fe-card > p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #3c4550;
  margin: .75rem 0;
  max-width: 100%;
}

/* List item container */
.fe-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  position: relative;
  padding: .55rem 0 .55rem .15rem;
  border-bottom: 1px dashed rgba(2,65,115,.12);
}

.fe-list .fe-item:last-child { border-bottom: 0; }

/* Icon within list item (already enhanced previously) override spacing */
.fe-item i {
  flex: 0 0 26px;
  margin-top: 2px;
  box-shadow: 0 4px 10px rgba(2,65,115,.25);
}

/* Text span inside list item */
.fe-item span {
  display: inline-block;
  flex: 1;
  font-size: .95rem;
  line-height: 1.55;
  color: #3d4a55;
  letter-spacing: .15px;
}

/* Hover affordance on larger screens */
@media (hover: hover) {
  .fe-item:hover span { color: #024173; }
  .fe-item:hover i { filter: brightness(1.05); }
}

/* Card container helper (if you wrap FAQ intro) */
.fe-card {
  background: #ffffff;
  border: 1px solid rgba(2,65,115,.08);
  border-radius: 18px;
  padding: 1.75rem 1.65rem 2rem;
  box-shadow: 0 14px 38px -8px rgba(2,65,115,.10), 0 6px 18px -6px rgba(2,65,115,.08);
  position: relative;
  overflow: hidden;
}

.fe-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 15%, rgba(255,255,255,.35), rgba(255,255,255,0)), linear-gradient(135deg, rgba(2,65,115,.05), rgba(26,84,144,.08));
  opacity: .8;
  pointer-events: none;
}

/* Responsive refinements for new components */
@media (max-width: 880px) {
  .fe-card { padding: 1.6rem 1.35rem 1.75rem; }
  .fe-card-title { font-size: 1.25rem; }
  .fe-icon { width: 56px; height: 56px; font-size: 1.5rem; }
}

@media (max-width: 620px) {
  #faq-title { margin-bottom: 1.9rem; }
  .fe-card { padding: 1.4rem 1.2rem 1.5rem; }
  .fe-icon { width: 52px; height: 52px; border-radius: 16px; }
  .fe-card-header { gap: .85rem; }
  .fe-card-title { font-size: 1.15rem; }
  .fe-item { gap: .55rem; }
  .fe-item span { font-size: .9rem; }
}

@media (max-width: 480px) {
  #faq-title { font-size: 1.9rem; }
  .fe-icon { width: 48px; height: 48px; font-size: 1.35rem; }
  .fe-card { padding: 1.25rem 1rem 1.35rem; }
  .fe-item span { line-height: 1.5; }
}