/* JoyTech V4 FAQ page */
.faq-page { padding-top: var(--nav-h); }
.faq-hero { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 78px) 0 clamp(72px, 8vw, 108px); color: #fff; background: radial-gradient(circle at 86% 8%, rgba(14,165,233,.25), transparent 34%), linear-gradient(135deg, #061426 0%, #0a2540 62%, #0b5f91 145%); }
.faq-hero::after { content: ''; position: absolute; left: -12%; bottom: -65%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: rgba(14,165,233,.10); filter: blur(48px); pointer-events: none; }
.faq-hero .container { position: relative; z-index: 1; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-height: 44px; margin-bottom: clamp(28px, 4vw, 52px); color: #bfdbfe; font-size: 14px; font-weight: 700; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: #e0f2fe; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: #fff; }
.faq-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: clamp(36px, 7vw, 96px); align-items: end; }
.faq-kicker { margin: 0 0 12px; color: #7dd3fc; font-size: 13px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.faq-hero h1 { max-width: 760px; margin: 0 0 20px; color: #fff; font-size: clamp(46px, 6vw, 76px); line-height: 1.08; text-wrap: balance; }
.faq-hero-lead { max-width: 760px; margin: 0; color: #dbeafe; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.72; }
.faq-hero-note { padding: 26px; border: 1px solid rgba(191,219,254,.25); border-radius: 22px; background: rgba(255,255,255,.08); box-shadow: 0 24px 60px rgba(2,6,23,.22); backdrop-filter: blur(10px); }
.faq-hero-note strong { display: block; margin-bottom: 10px; color: #fff; font-size: 20px; }
.faq-hero-note p { margin: 0 0 18px; color: #dbeafe; }
.faq-hero-note a { display: inline-flex; align-items: center; min-height: 44px; color: #7dd3fc; font-weight: 850; }
.faq-category-nav-section { padding-bottom: clamp(64px, 8vw, 94px); }
.faq-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.faq-category-link { min-height: 68px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--slate-200); border-radius: 16px; background: #fff; color: var(--navy-900); font-weight: 800; box-shadow: 0 6px 20px rgba(10,37,64,.045); }
.faq-category-link > span:first-child { flex: 0 0 36px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--blue-100); color: var(--blue-600); font-size: 12px; font-weight: 900; }
.faq-category-link > span:last-child { flex: 1 1 auto; min-width: 0; display: block; line-height: 1.4; }
.faq-category-link:hover, .faq-category-link:focus-visible { border-color: #93c5fd; background: #f8fcff; transform: translateY(-1px); }
.faq-categories { padding-bottom: clamp(76px, 9vw, 118px); }
.faq-category { display: grid; grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); gap: clamp(32px, 6vw, 82px); padding: clamp(54px, 7vw, 86px) 0; border-top: 1px solid var(--slate-200); scroll-margin-top: calc(var(--nav-h) + 24px); }
.faq-category-head { align-self: start; position: sticky; top: calc(var(--nav-h) + 28px); }
.faq-category-number { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 999px; background: var(--navy-900); color: #fff; font-size: 13px; font-weight: 900; }
.faq-category-head h2 { margin-bottom: 14px; font-size: clamp(28px, 3vw, 40px); }
.faq-category-head p { max-width: 360px; margin: 0; color: var(--slate-600); }
.faq-list { display: grid; gap: 12px; }
.faq-item { overflow: hidden; border: 1px solid var(--slate-200); border-radius: 18px; background: #fff; box-shadow: 0 6px 18px rgba(10,37,64,.04); }
.faq-item > summary { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; color: var(--navy-900); font-size: 18px; font-weight: 850; cursor: pointer; list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: '+'; flex: 0 0 auto; color: var(--blue-600); font-size: 27px; font-weight: 650; line-height: 1; }
.faq-item[open] > summary::after { content: '−'; }
.faq-item[open] > summary { padding-bottom: 12px; }
.faq-answer p { margin: 0; padding: 0 22px 22px; color: var(--slate-600); font-size: 16px; line-height: 1.8; }
.faq-contact-cta { padding: clamp(68px, 8vw, 108px) 0; color: #fff; background: linear-gradient(135deg, #061426, #0a2540 70%, #0b5f91 140%); }
.faq-contact-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.faq-contact-inner h2 { max-width: 760px; margin-bottom: 14px; color: #fff; }
.faq-contact-inner p:not(.faq-kicker) { max-width: 720px; margin: 0; color: #dbeafe; font-size: 18px; }
.faq-contact-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.desktop-nav [aria-current="page"], .mobile-drawer [aria-current="page"] { color: var(--blue-600); }
@media (max-width: 1000px) {
  .faq-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-hero-grid { grid-template-columns: 1fr; }
  .faq-hero-note { max-width: 680px; }
  .faq-category { grid-template-columns: 1fr; gap: 26px; }
  .faq-category-head { position: static; }
  .faq-contact-inner { grid-template-columns: 1fr; }
  .faq-contact-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .faq-hero { padding-top: 28px; padding-bottom: 68px; }
  .breadcrumb { margin-bottom: 22px; }
  .faq-hero h1 { font-size: clamp(38px, 11vw, 50px); }
  .faq-hero-lead { font-size: 18px; }
  .faq-hero-note { padding: 22px; }
  .faq-category-grid { grid-template-columns: 1fr; }
  .faq-category { padding: 50px 0; }
  .faq-item > summary { min-height: 72px; padding: 16px 18px; font-size: 17px; }
  .faq-answer p { padding: 0 18px 20px; }
  .faq-contact-actions, .faq-contact-actions .btn { width: 100%; }
}