/* SINVYX Design System — component classes compiled from Button/Badge/Card JSX */

*,*::before,*::after{box-sizing:border-box;}

.sx-btn{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:0.01em;
  border-radius:var(--radius-pill);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
  border:1px solid transparent;
  text-decoration:none;
  line-height:1;
}
a.sx-btn.sx-btn--primary{background:var(--accent-primary);color:var(--text-on-accent);}
a.sx-btn.sx-btn--primary:hover,a.sx-btn.sx-btn--primary:focus{background:var(--accent-primary-strong);color:var(--text-on-accent);}
a.sx-btn.sx-btn--secondary{background:transparent;color:var(--text-primary);border-color:var(--border-hairline);}
a.sx-btn.sx-btn--secondary:hover,a.sx-btn.sx-btn--secondary:focus{border-color:var(--accent-primary);color:var(--accent-primary);}
a.sx-btn.sx-btn--ghost{background:transparent;color:var(--accent-primary);}
a.sx-btn.sx-btn--ghost:hover,a.sx-btn.sx-btn--ghost:focus{color:var(--accent-primary-strong);}
.sx-btn{padding:11px 22px;font-size:14px;height:44px;}
.sx-btn--sm{padding:8px 16px;font-size:13px;height:34px;}
.sx-btn--lg{padding:15px 30px;font-size:15px;height:52px;}
.sx-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:3px;}

.sx-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:var(--radius-pill);
}
.sx-badge--neutral{background:var(--surface-overlay);color:var(--text-secondary);}
.sx-badge--accent{background:rgba(47,229,255,.12);color:var(--accent-primary);}

.sx-card{
  background:var(--surface-raised);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.sx-card:hover{border-color:var(--accent-primary);box-shadow:var(--glow-cyan-sm),var(--shadow-card);}

.sx-icon{width:24px;height:24px;color:var(--accent-primary);display:inline-block;flex-shrink:0;}
.sx-icon--sm{width:18px;height:18px;}
.sx-icon--xs{width:20px;height:20px;margin-top:2px;}

/* FAQ accordion — native <details>, no JS */
.sx-faq-item{border-bottom:1px solid var(--border-soft);}
.sx-faq-item summary{
  list-style:none;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:22px 0;
  cursor:pointer;
}
.sx-faq-item summary::-webkit-details-marker{display:none;}
.sx-faq-item summary .sx-faq-q{
  font-family:var(--font-body);
  color:var(--text-primary);
  font-size:var(--text-body-lg);
  font-weight:700;
}
.sx-faq-item summary .sx-icon{transition:transform var(--dur-base) var(--ease-out);}
.sx-faq-item[open] summary .sx-icon{transform:rotate(180deg);}
.sx-faq-item .sx-faq-a{
  font-family:var(--font-body);
  color:var(--text-secondary);
  font-size:var(--text-body);
  line-height:var(--lh-relaxed);
  margin:0 0 24px;
}

/* responsive tweaks */
@media (max-width:860px){
  .sx-grid-2{grid-template-columns:1fr !important;}
  .sx-grid-3{grid-template-columns:1fr !important;}
}