/* ── PAGE ── */
.faq-wrap{ max-width:1100px; margin:0 auto; padding:120px 32px 110px; }

.faq-breadcrumb{ display:flex; align-items:center; gap:8px; margin-bottom:56px; }
.faq-breadcrumb a{ font-size:13px; color:#8AA0B8; text-decoration:none; transition:color 150ms; }
.faq-breadcrumb a:hover,.faq-breadcrumb a:focus-visible{ color:#fff; }
.faq-breadcrumb-sep{ color:#2A3F55; font-size:13px; user-select:none; }
.faq-breadcrumb-current{ font-size:13px; color:#38BDF8; }

.faq-layout{ display:grid; grid-template-columns:1fr 1.6fr; gap:96px; align-items:start; }

/* ── ASIDE ── */
.faq-aside{ position:sticky; top:100px; }

.faq-aside-logo{ position:relative; display:inline-grid; place-items:center; width:160px; height:160px; margin-bottom:32px; }
.faq-aside-ring-outer{ position:absolute; width:140px; height:140px; border:1px solid rgba(56,189,248,.18); border-radius:50%; animation:sm-spin 26s linear infinite; }
.faq-aside-ring-inner{ position:absolute; width:105px; height:105px; border:1px dashed rgba(56,189,248,.22); border-radius:50%; animation:sm-spin 18s linear infinite reverse; }
.faq-aside-logo-img{ display:block; width:64px; height:64px; filter:brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(165deg) brightness(1.4) drop-shadow(0 0 16px rgba(56,189,248,.45)); animation:sm-float 6s ease-in-out infinite; }
.faq-aside-glow{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle,rgba(56,189,248,.14),transparent 65%); filter:blur(10px); pointer-events:none; }

.faq-aside-name{ margin:0 0 4px; font-size:18px; font-weight:700; letter-spacing:.12em; color:#fff; }
.faq-aside-tagline{ margin:0 0 20px; font-size:14px; color:#8AA0B8; line-height:1.5; }
.faq-aside-desc{ margin:0 0 28px; font-size:14px; color:#fff; line-height:1.65; max-width:300px; }

.faq-contact-card{ border:1px solid #1A2D40; border-radius:14px; padding:20px; background:rgba(13,31,51,.5); display:flex; flex-direction:column; gap:14px; margin-bottom:24px; }
.faq-contact-label{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.faq-contact-link{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#A8C4D8; font-size:14px; transition:color 150ms; }
.faq-contact-link:hover,.faq-contact-link:focus-visible{ color:#fff; outline:none; }
.faq-contact-link:focus-visible .faq-contact-icon{ border-color:#38BDF8; }
.faq-contact-icon{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.2); flex-shrink:0; transition:border-color 150ms; }

@media (prefers-reduced-motion: reduce){
  .faq-aside-ring-outer,.faq-aside-ring-inner,.faq-aside-logo-img{ animation:none; }
}

/* ── FAQ COLUMN ── */
.faq-col{ }

.faq-col-meta{ display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid #1A2D40; margin-bottom:4px; }
.faq-col-label{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#38BDF8; }
.faq-col-count{ font-size:12px; color:#2A3F55; }

.faq-list{ list-style:none; margin:0; padding:0; }
.faq-item{ border-bottom:1px solid #1A2D40; }
.faq-summary{
  display:grid;
  grid-template-columns:28px 1fr 32px;
  align-items:center;
  gap:16px;
  padding:10px 0;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.faq-summary::-webkit-details-marker{ display:none; }
.faq-summary:focus-visible{ outline:2px solid #38BDF8; outline-offset:4px; border-radius:4px; }
.faq-num{ font-size:11px; font-weight:700; color:#2A3F55; letter-spacing:.06em; line-height:1; transition:color 150ms; }
.faq-q{ font-size:16px; font-weight:600; color:#C8DFF0; line-height:1.35; transition:color 150ms; }
.faq-toggle{ display:grid; place-items:center; width:28px; height:28px; border-radius:8px; border:1px solid #1A2D40; color:#8AA0B8; font-size:20px; font-weight:300; line-height:1; transition:border-color 150ms,color 150ms,transform 150ms,background 150ms; justify-self:end; }

details[open] .faq-num{ color:#38BDF8; }
details[open] .faq-q{ color:#fff; }
details[open] .faq-toggle{ transform:rotate(45deg); border-color:rgba(56,189,248,.5); color:#38BDF8; background:rgba(56,189,248,.07); }

#faq-view details .faq-answer{ display:block !important; overflow:hidden; }

.faq-answer{ margin:0; padding:0 0 22px 44px; font-size:15px; line-height:1.72; color:#fff; }

/* ── BOTTOM CALLOUT ── */
.faq-callout{ margin-top:40px; padding:24px 28px; border-radius:14px; border:1px solid #1A2D40; background:rgba(13,31,51,.45); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.faq-callout-copy{ }
.faq-callout-copy strong{ display:block; font-size:15px; font-weight:600; color:#fff; margin-bottom:4px; }
.faq-callout-copy span{ font-size:13px; color:#8AA0B8; }
.faq-callout-btn{ flex-shrink:0; }

/* === RESPONSIVE === */

@media (max-width:900px){
  .faq-layout{ grid-template-columns:1fr; gap:48px; }
  .faq-aside{ position:static; display:flex; flex-direction:column; align-items:center; text-align:center; }
  .faq-aside-desc{ max-width:100%; }
  .faq-contact-card{ max-width:360px; width:100%; }
}

@media (max-width:640px){
  .faq-wrap{ padding:96px 20px 72px; }

  .faq-callout{ flex-direction:column; text-align:center; }
  .faq-callout-btn{ width:100%; text-align:center; display:block; }
  .faq-summary{ grid-template-columns:24px 1fr 28px; gap:10px; padding:10px 0; }
  .faq-q{ font-size:15px; }
  .faq-answer{ padding-left:34px; font-size:14px; }
}

@media (max-width:400px){
  .faq-wrap{ padding:80px 14px 56px; }
  .faq-q{ font-size:14px; }
  .faq-answer{ padding-left:28px; }
}