/* FAQ infographic section styling inspired by the provided image */
:root{
  /* Tie FAQ to the site footer (see --onyx, --porcelain, --champagne in style.css) */
  --faq-bg-start: var(--onyx);   /* base matches footer background */
  --faq-bg-end:   var(--onyx);   /* keep solid for continuity */
  --faq-accent:   var(--champagne); /* brand blue accent like footer links/borders */
  --faq-card:     rgba(255,255,255,.04); /* subtle glass on dark */
  --faq-card-glass: rgba(255,255,255,.06);
  --faq-card-stroke: rgba(255,255,255,.12);
  --faq-text:     var(--porcelain);
  --faq-muted:    rgba(245,246,247,.75);
  --faq-title:    var(--porcelain);
}

.faq-section{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(900px 520px at 15% 10%, rgba(14,42,71,.28), transparent 60%),
    radial-gradient(700px 480px at 82% 28%, rgba(74,144,226,.22), transparent 65%),
    linear-gradient(135deg,var(--faq-bg-start),var(--faq-bg-end));
  color:var(--faq-text);
  padding:64px 0 96px;
  overflow:hidden;
}

/* Decorative slim rail on the far right (like image) */
.faq-section::after{
  content:"";
  position:absolute; inset:0 28px 0 auto; width:2px; border-radius:2px;
  background:linear-gradient(to bottom, transparent, var(--faq-accent) 40%, rgba(74,144,226,.2) 60%, transparent);
  opacity:.35; pointer-events:none; z-index:0;
}

/* Top corner circuitry-like lines (simplified) */
.faq-section::before{
  content:""; position:absolute; left:-120px; top:-120px; width:520px; height:520px; z-index:0;
  background:
    linear-gradient(90deg, rgba(151,195,220,.25), transparent 40%),
    radial-gradient(2px 2px at 140px 200px, rgba(151,195,220,.9), transparent 40%),
    radial-gradient(2px 2px at 220px 120px, rgba(151,195,220,.9), transparent 40%),
    radial-gradient(2px 2px at 320px 300px, rgba(151,195,220,.9), transparent 40%);
  filter:blur(.2px);
}

.faq-container{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 20px; }

.faq-title{
  font-family: var(--font-main, "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  font-size: clamp(28px, 5vw, 56px);
  font-weight:800;
  color:var(--faq-title);
  text-align:center;
  letter-spacing:.3px;
  margin:8px auto 40px;
}

/* Subtle top mini-brand labels (BITCEN in image) */
.faq-brand{ position:absolute; top:18px; font-size:14px; letter-spacing:.4em; color:#8ea0db80; z-index:1; }
.faq-brand-left{ left:20px; }
.faq-brand-right{ right:20px; }

.faq-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:28px 56px;
}

.faq-item{ position:relative; display:flex; align-items:center; gap:18px; min-height:96px; }

/* Number badge with folded ribbon shadow */
.faq-badge{ position:relative; flex:0 0 64px; height:64px; background:var(--faq-accent); border-radius:6px; display:grid; place-items:center; box-shadow: 0 12px 24px rgba(74,144,226,.28); }
.faq-badge span{ font-weight:800; color:#fff; font-size:22px; }
.faq-badge::after{ content:""; position:absolute; left:0; bottom:-12px; width:0; height:0; border-left:16px solid #3A7BC8; border-top:12px solid transparent; filter:brightness(.95); }
.faq-badge::before{ content:""; position:absolute; right:-12px; top:12px; width:0; height:0; border-top:12px solid #5FA3F0; border-right:12px solid transparent; opacity:.9; }

/* Glass card with subtle border */
.faq-card{
  position:relative; flex:1 1 auto; min-height:86px; padding:18px 22px; border-radius:10px; color:var(--faq-text);
  background:linear-gradient(180deg, var(--faq-card-glass), rgba(255,255,255,.025));
  border:1px solid var(--faq-card-stroke);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.25);
}
.faq-card::after{ content:""; position:absolute; left:12px; bottom:-12px; width:0; height:0; border-left:18px solid rgba(255,255,255,.06); border-top:12px solid transparent; filter:brightness(.9); }
.faq-card:hover{ border-color: rgba(74,144,226,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 36px rgba(74,144,226,.15); }

.faq-question{ margin:0 0 6px; font-size:16px; font-weight:600; color:var(--porcelain); }
.faq-answer{ margin:0; font-size:14px; line-height:1.6; color:var(--faq-muted); }

/* Responsive */
@media (max-width: 900px){
  .faq-grid{ gap:22px 30px; }
}
@media (max-width: 700px){
  .faq-grid{ grid-template-columns:1fr; }
  .faq-section{ padding:48px 0 72px; }
  .faq-badge{ flex-basis:56px; height:56px; }
}

/* ========================================
   ENHANCED MOBILE RESPONSIVE STYLES
   ======================================== */

@media (max-width: 480px) {
  .faq-section {
    padding: 40px 0 60px;
  }

  .faq-container {
    padding: 0 16px;
  }

  .faq-title {
    font-size: clamp(24px, 6vw, 32px);
    margin: 6px auto 32px;
  }

  .faq-grid {
    gap: 18px;
  }

  .faq-item {
    min-height: 80px;
    gap: 14px;
  }

  .faq-badge {
    flex-basis: 52px;
    height: 52px;
    border-radius: 5px;
  }

  .faq-badge span {
    font-size: 20px;
  }

  .faq-card {
    min-height: 76px;
    padding: 16px 18px;
    border-radius: 8px;
  }

  .faq-question {
    font-size: 15px;
    margin-bottom: 5px;
  }

  .faq-answer {
    font-size: 13px;
    line-height: 1.55;
  }

  .faq-brand {
    font-size: 12px;
    letter-spacing: 0.3em;
  }
}

@media (max-width: 375px) {
  .faq-section {
    padding: 36px 0 52px;
  }

  .faq-container {
    padding: 0 12px;
  }

  .faq-title {
    font-size: clamp(22px, 6.5vw, 28px);
    margin: 4px auto 28px;
  }

  .faq-grid {
    gap: 16px;
  }

  .faq-item {
    min-height: 72px;
    gap: 12px;
  }

  .faq-badge {
    flex-basis: 48px;
    height: 48px;
  }

  .faq-badge span {
    font-size: 18px;
  }

  .faq-card {
    min-height: 70px;
    padding: 14px 16px;
  }

  .faq-question {
    font-size: 14px;
  }

  .faq-answer {
    font-size: 12px;
  }
}

@media (max-width: 320px) {
  .faq-section {
    padding: 32px 0 48px;
  }

  .faq-container {
    padding: 0 10px;
  }

  .faq-title {
    font-size: 20px;
    margin: 4px auto 24px;
  }

  .faq-grid {
    gap: 14px;
  }

  .faq-badge {
    flex-basis: 44px;
    height: 44px;
  }

  .faq-badge span {
    font-size: 16px;
  }

  .faq-card {
    padding: 12px 14px;
  }

  .faq-question {
    font-size: 13px;
  }

  .faq-answer {
    font-size: 11px;
  }

  .faq-brand {
    font-size: 10px;
  }
}

/* Touch Optimization */
@media (hover: none) and (pointer: coarse) {
  .faq-item {
    min-height: 88px;
  }

  .faq-card:active {
    transform: scale(0.99);
    transition: transform 0.1s ease;
  }
}