/*-- -------------------------- -->
<---           FAQ             -->
<--- -------------------------- -*/
#faq-hero { padding-top: 10rem; padding-bottom: 0; text-align: center; background-color: var(--background); position: relative; z-index: 1;}
.dark #faq-hero { background: linear-gradient(145deg, #00031F 0%, #0C2B33 96%); }
#faq-section { background-color: var(--secondary); padding-top: 0; overflow: visible; overflow-x: clip; }
#faq-section .cs-container { width: 100%; max-width: 67.5rem; margin: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(2rem, 4vw, 3rem); position: relative; z-index: 1; padding-top: 2rem; }
@media (min-width: 1024px) { #faq-section .cs-container { padding-top: 3rem; } }
#faq-section .cs-content { text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; }
#faq-section .cs-flex-group { width: 100%; display: flex; flex-direction: column; gap: 2rem; position: relative; }
#faq-section .cs-button-group { display: flex; justify-content: center; align-items: stretch; align-content: flex-start; gap: 0.75rem; align-self: stretch; flex-wrap: wrap; }
/* --- FAQ Category Buttons --- */
#faq-section .cs-option { font-family: var(--font-inter); font-size: clamp(0.875rem, 2vw, 1rem); font-weight: 700; text-transform: uppercase; line-height: 1.2em; box-sizing: border-box; padding: 0.75rem 1.5rem; background-color: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 0.5rem; position: relative; z-index: 1; transition: all 0.3s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic); }
#faq-section .cs-option:before { content: ""; width: 100%; height: 100%; background: var(--primary); opacity: 0; display: block; position: absolute; top: 0; left: 0; z-index: -1; transition: opacity 0.3s; border-radius: 0.5rem; }
#faq-section .cs-option:hover { cursor: pointer; border-color: var(--primary); transform: translateY(2px); }
#faq-section .cs-option:hover:before { opacity: 0.15; }
#faq-section .cs-option.cs-active { color: var(--primary); border-color: var(--primary); transform: scale(1.05) translateY(-2px); box-shadow: 0 4px 12px hsla(var(--primary-hsl), 0.1); }
#faq-section .cs-option.cs-active:before { opacity: 0.1; }
#faq-section .cs-wrapper { position: relative; }
#faq-section .cs-faq-group { width: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(0.5rem, 2vw, 1rem); transform-style: preserve-3d; perspective: 900px; transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s, left 0.3s; transform-origin: top; }
#faq-section .cs-faq-group.cs-hidden { pointer-events: none; opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; transform: scaleY(0); }
#faq-section .cs-faq-group.cs-hidden .cs-faq-item { opacity: 0; transform: rotateX(270deg); }
#faq-section .cs-faq-item { list-style: none; width: 100%; padding: clamp(1rem, 4vw, 1.5rem); box-shadow: 0 8px 16px hsla(var(--foreground-hsl), 0.05); box-sizing: border-box; opacity: 1; border-radius: 1rem; background-color: var(--card); top: 0; transform: rotateX(0deg); transition: transform 0.6s, opacity 0.3s; border: 1px solid var(--border); cursor: pointer; }
#faq-section .cs-faq-item:nth-of-type(2) { transition-delay: 0.1s; }
#faq-section .cs-faq-item:nth-of-type(3) { transition-delay: 0.2s; }
#faq-section .cs-faq-item:nth-of-type(4) { transition-delay: 0.3s; }
#faq-section .cs-faq-item:nth-of-type(5) { transition-delay: 0.4s; }
#faq-section .cs-faq-item:nth-of-type(6) { transition-delay: 0.5s; }
#faq-section .cs-faq-item:nth-of-type(7) { transition-delay: 0.6s; }
#faq-section .cs-faq-item:nth-of-type(8) { transition-delay: 0.7s; }
#faq-section .cs-faq-item:nth-of-type(9) { transition-delay: 0.8s; }
#faq-section .cs-faq-item:nth-of-type(10) { transition-delay: 0.9s; }
/* --- FAQ Item Hover Effect --- */
#faq-section .cs-faq-item:hover { 
	cursor: pointer; 
	transform: scale(1.02); 
	box-shadow: 0 10px 20px hsla(var(--foreground-hsl), 0.08);
	z-index: 10;
}
.dark #faq-section .cs-faq-item:hover {
	box-shadow: 0 10px 20px hsla(var(--foreground-hsl), 0.15);
}
#faq-section .cs-button { font-family: var(--font-inter); font-size: clamp(1rem, 2vw, 1.1rem); font-weight: bold; line-height: 1.2em; text-align: left; width: 100%; color: var(--foreground); border: none; display: block; position: relative; background-color: transparent; transition: color 0.3s; padding: 0; }
#faq-section .cs-button:hover { cursor: pointer; }
#faq-section .cs-button:before, #faq-section .cs-button:after { content: ""; width: 0.75rem; height: 2px; background-color: var(--foreground); opacity: 1; border-radius: 2px; display: block; position: absolute; top: 50%; transform-origin: center; transition: transform 0.5s var(--ease-out-cubic), background-color 0.4s var(--ease-out-cubic); }
#faq-section .cs-button:before { right: 0.75rem; transform: translateY(-50%) rotate(45deg); }
#faq-section .cs-button:after { right: 0.25rem; transform: translateY(-50%) rotate(-45deg); }
#faq-section .cs-button-text { width: 90%; display: block; }
#faq-section .cs-item-p { font-family: var(--font-inter); font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.6em; width: 95%; height: 0; margin: 0; padding: 0; overflow: hidden; color: var(--muted-foreground); opacity: 0; transition: height 0.5s var(--ease-out-cubic), opacity 0.45s var(--ease-out-cubic), padding-top 0.45s var(--ease-out-cubic); will-change: height, opacity; }
#faq-section .cs-faq-item.active .cs-button { color: var(--primary); padding-bottom: 1.5rem; }
#faq-section .cs-faq-item.active .cs-button:before { background-color: var(--primary); transform: translateY(-50%) rotate(315deg); }
#faq-section .cs-faq-item.active .cs-button:after { background-color: var(--primary); transform: translateY(-50%) rotate(-315deg); }
#faq-section .cs-faq-item.active .cs-item-p { padding-top: 1rem; padding-bottom: 0.25rem; opacity: 1; }
#faq-section .cs-item-p a { color: var(--primary); text-decoration: underline; }
/* Tablet and up: 768px - Horizontal button group */
@media (min-width: 768px) { 
  #faq-section .cs-button-group { 
    flex-direction: row; 
  } 
}
.dark #faq-section .cs-option { color: var(--muted-foreground); background-color: transparent; border-color: var(--border); }
.dark #faq-section .cs-option:hover { border-color: #ffffff; color: #ffffff; }
.dark #faq-section .cs-option.cs-active { 
  border-color: #ffffff;
  color: #ffffff;
  animation: ulGlow 7.2s forwards infinite;
  box-shadow:
    rgba(67, 183, 255, 0.2) 0px 0px 14px,
    inset rgba(67, 183, 255, 0.2) 0px 0px 10px,
    inset rgba(67, 183, 255, 0.2) 0px 0px 25px,
    rgba(67, 183, 255, 0.2) 0px 0px 25px;
}
.dark #faq-section .cs-faq-item { background-color: var(--card); border: 1px solid var(--border); box-shadow: none; }
.dark #faq-section .cs-faq-item.active { 
  border-color: #ffffff;
  animation: ulGlow 7.2s forwards infinite;
  box-shadow:
    rgba(67, 183, 255, 0.2) 0px 0px 14px,
    inset rgba(67, 183, 255, 0.2) 0px 0px 10px,
    inset rgba(67, 183, 255, 0.2) 0px 0px 25px,
    rgba(67, 183, 255, 0.2) 0px 0px 25px;
}
/* Sequential glow colors for FAQ accordions - white borders, sequential blue glows */
.dark #faq-section .cs-faq-item:nth-of-type(1).active { 
  box-shadow: rgba(67, 183, 255, 0.2) 0px 0px 14px, inset rgba(67, 183, 255, 0.2) 0px 0px 10px, inset rgba(67, 183, 255, 0.2) 0px 0px 25px, rgba(67, 183, 255, 0.2) 0px 0px 25px;
}
.dark #faq-section .cs-faq-item:nth-of-type(2).active { 
  box-shadow: rgba(67, 200, 255, 0.2) 0px 0px 14px, inset rgba(67, 200, 255, 0.2) 0px 0px 10px, inset rgba(67, 200, 255, 0.2) 0px 0px 25px, rgba(67, 200, 255, 0.2) 0px 0px 25px;
}
.dark #faq-section .cs-faq-item:nth-of-type(3).active { 
  box-shadow: rgba(67, 220, 255, 0.2) 0px 0px 14px, inset rgba(67, 220, 255, 0.2) 0px 0px 10px, inset rgba(67, 220, 255, 0.2) 0px 0px 25px, rgba(67, 220, 255, 0.2) 0px 0px 25px;
}
.dark #faq-section .cs-faq-item:nth-of-type(4).active { 
  box-shadow: rgba(67, 240, 255, 0.2) 0px 0px 14px, inset rgba(67, 240, 255, 0.2) 0px 0px 10px, inset rgba(67, 240, 255, 0.2) 0px 0px 25px, rgba(67, 240, 255, 0.2) 0px 0px 25px;
}
.dark #faq-section .cs-faq-item:nth-of-type(5).active { 
  box-shadow: rgba(67, 255, 200, 0.2) 0px 0px 14px, inset rgba(67, 255, 200, 0.2) 0px 0px 10px, inset rgba(67, 255, 200, 0.2) 0px 0px 25px, rgba(67, 255, 200, 0.2) 0px 0px 25px;
}
.dark #faq-section .cs-faq-item:nth-of-type(6).active { 
  box-shadow: rgba(100, 255, 150, 0.2) 0px 0px 14px, inset rgba(100, 255, 150, 0.2) 0px 0px 10px, inset rgba(100, 255, 150, 0.2) 0px 0px 25px, rgba(100, 255, 150, 0.2) 0px 0px 25px;
}
.dark #faq-section .cs-faq-item:nth-of-type(7).active { 
  box-shadow: rgba(150, 255, 100, 0.2) 0px 0px 14px, inset rgba(150, 255, 100, 0.2) 0px 0px 10px, inset rgba(150, 255, 100, 0.2) 0px 0px 25px, rgba(150, 255, 100, 0.2) 0px 0px 25px;
}
.dark #faq-section .cs-faq-item:nth-of-type(8).active { 
  box-shadow: rgba(200, 255, 67, 0.2) 0px 0px 14px, inset rgba(200, 255, 67, 0.2) 0px 0px 10px, inset rgba(200, 255, 67, 0.2) 0px 0px 25px, rgba(200, 255, 67, 0.2) 0px 0px 25px;
}
.dark #faq-section .cs-faq-item:nth-of-type(9).active { 
  box-shadow: rgba(255, 240, 67, 0.2) 0px 0px 14px, inset rgba(255, 240, 67, 0.2) 0px 0px 10px, inset rgba(255, 240, 67, 0.2) 0px 0px 25px, rgba(255, 240, 67, 0.2) 0px 0px 25px;
}
.dark #faq-section .cs-faq-item:nth-of-type(10).active { 
  box-shadow: rgba(255, 200, 67, 0.2) 0px 0px 14px, inset rgba(255, 200, 67, 0.2) 0px 0px 10px, inset rgba(255, 200, 67, 0.2) 0px 0px 25px, rgba(255, 200, 67, 0.2) 0px 0px 25px;
}
.dark #faq-section .cs-faq-item.active .cs-button { color: #ffffff; }
.dark #faq-section .cs-faq-item.active .cs-button:before, .dark #faq-section .cs-faq-item.active .cs-button:after { background-color: #ffffff; }
.dark #faq-section .cs-button { color: var(--foreground); }
.dark #faq-section .cs-button:before, .dark #faq-section .cs-button:after { background-color: var(--foreground); }

/* --- DECORATIVE BUBBLES (positions only; base in root.css) --- */
#faq-section { background-color: var(--secondary); padding-top: 0; overflow: clip; }
#faq-section .cs-container { position: relative; }
#faq-section .cs-bubbles:not(.cs-bubbles2) { font-size: min(2.5vw, 0.8em); height: 26.6875em; width: 26.1875em; bottom: 0.625em; right: -16.25em; }
#faq-section .cs-bubbles.cs-bubbles2 { font-size: min(1.5vw, 0.5rem); height: 26.6875em; width: 26.1875em; bottom: auto; right: auto; left: -7.5rem; top: 15.625rem; transform: rotate(45deg); }

/* --- UPDATED: FAQ Light-up Animation --- */
@keyframes fadeInGlow {
	from {
		background-color: var(--card);
		border-color: var(--border); /* Start with normal border */
		box-shadow: none;
	}
	to {
		background-color: hsla(var(--primary-hsl), 0.05); /* Lighter glow */
		border-color: var(--primary);
		box-shadow: 0 0 14px hsla(var(--primary-hsl), 0.2), 
					inset 0 0 10px hsla(var(--primary-hsl), 0.1); /* Adjusted inset glow */
	}
}

/* Apply animation properties to all items when .is-illuminating is active */
.is-illuminating .cs-faq-item {
	animation-name: fadeInGlow;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

/* Staggered delays for ALL items, starting the first one at 0s */
.is-illuminating .cs-faq-item:nth-of-type(1) { animation-delay: 0s; }
.is-illuminating .cs-faq-item:nth-of-type(2) { animation-delay: 0.1s; }
.is-illuminating .cs-faq-item:nth-of-type(3) { animation-delay: 0.2s; }
.is-illuminating .cs-faq-item:nth-of-type(4) { animation-delay: 0.3s; }
.is-illuminating .cs-faq-item:nth-of-type(5) { animation-delay: 0.4s; }
.is-illuminating .cs-faq-item:nth-of-type(6) { animation-delay: 0.5s; }
.is-illuminating .cs-faq-item:nth-of-type(7) { animation-delay: 0.6s; }
.is-illuminating .cs-faq-item:nth-of-type(8) { animation-delay: 0.7s; }
.is-illuminating .cs-faq-item:nth-of-type(9) { animation-delay: 0.8s; }
.is-illuminating .cs-faq-item:nth-of-type(10) { animation-delay: 0.9s; }