/* ===== FUTURISTIC FAQ TERMINAL (scoped) ===== */
#faq .faq-terminal{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:30px;
  margin-top:60px;
}
#faq .faq-queries{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  align-content:start;
}
#faq .query-btn{
  text-align:left;
  padding:14px 18px;
  background:var(--glass-bg);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--muted);
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  position:relative;
  overflow:hidden;
  line-height:1.25;
  -webkit-tap-highlight-color:transparent;
}
#faq .query-btn:hover{color:var(--ink);background-color:rgba(255,255,255,.9)}
#faq .query-btn.is-active{
  color:var(--ink);
  background-color:var(--accent-base);
  border-color:var(--accent-base);
  box-shadow:0 5px 20px -5px var(--accent-glow);
}

#faq .faq-display{
  background:#0D1117;
  border:1px solid var(--line);
  border-radius:12px;
  font-family:'Space Mono',monospace;
  min-height:450px;
  display:flex;
  flex-direction:column;
  /* DO NOT auto-scroll this into view on click (handled in JS at section level) */
}
#faq .display-header{
  padding:8px 15px;
  background-color:rgba(255,255,255,.05);
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}
#faq .display-body{
  padding:20px;
  flex-grow:1;
  color:#c9d1d9;
  font-size:15px;
  line-height:1.8;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  word-break:break-word;
  font-variant-ligatures:none;
}
#faq #terminal-output .prompt{color:var(--muted);margin:0}
#faq #terminal-output .question-line{color:var(--accent-base);margin:20px 0 10px}
#faq #terminal-output .answer-line{color:#c9d1d9;margin:0;white-space:pre-wrap}
#faq .blinking-cursor{
  display:inline-block;width:.55em;height:1.2em;
  background-color:var(--accent-base);
  animation:faq-blink 1s step-end infinite;vertical-align:baseline;
}
@keyframes faq-blink{from,to{background-color:transparent}50%{background-color:var(--accent-base)}}

/* Keep the section from hiding under sticky header when scrolled to */
#faq{scroll-margin-top:96px}
#faq,.wrap{overflow:visible}

/* Footer CTA as primary button */
#faq .faq-footer-link{margin-top:40px;text-align:center}
#faq .faq-footer-link a{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 22px;border-radius:999px;background:var(--accent-base);
  color:var(--ink);font-weight:700;letter-spacing:.2px;border:1px solid var(--accent-base);
  box-shadow:0 10px 22px -8px var(--accent-glow);
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease;
  text-decoration:none;
}
#faq .faq-footer-link a:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px var(--accent-glow)}
#faq .faq-footer-link a:active{transform:translateY(0);box-shadow:0 8px 18px -10px var(--accent-glow)}
#faq .faq-footer-link a:focus-visible{outline:2px solid var(--accent-base);outline-offset:3px}

/* ===== Breakpoints ===== */
@media (max-width:1200px){
  #faq .faq-terminal{grid-template-columns:.9fr 1.4fr;gap:24px}
}
@media (max-width:992px){
  #faq .faq-terminal{grid-template-columns:1fr;gap:20px}
  #faq .faq-display{min-height:420px}
  /* Keep queries visible while user scrolls */
  #faq .faq-queries{
    position:sticky;
    top:64px; /* marquee + header stack (adjust if your header differs) */
    z-index:3;
    background:var(--bg);
    padding-top:6px;
  }
}
@media (max-width:767px){
  #faq .faq-display{min-height:380px}
  #faq .display-body{font-size:14px;line-height:1.7;padding:16px}
  #faq .query-btn{padding:12px 14px}
  #faq .faq-footer-link a{padding:11px 18px;font-size:14px}
}
@media (max-width:575px){
  /* Horizontal pill scroller, still sticky */
  #faq .faq-queries{
    display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;padding-bottom:6px;margin:0 -10px;padding-inline:10px;
    position:sticky;top:64px;background:var(--bg);
  }
  #faq .query-btn{
    white-space:nowrap;flex:0 0 auto;scroll-snap-align:start;border-radius:999px;
    font-size:13px;padding:10px 14px;
  }
  #faq .faq-display{min-height:340px}
  #faq .display-body{max-height:260px}
}
@media (max-width:380px){
  #faq .query-btn{font-size:12px;padding:9px 12px}
  #faq .display-body{max-height:230px;font-size:13px;line-height:1.6}
  #faq .display-header{font-size:11px;padding:6px 12px}
  #faq .blinking-cursor{height:1.1em}
  #faq .faq-footer-link a{padding:10px 16px;font-size:13px}
}
/* Motion preference */
@media (prefers-reduced-motion:reduce){
  #faq .blinking-cursor{animation:none}
  #faq .faq-footer-link a{transition:none}
}

/* === FAQ fix for short landscape devices === */
@media (max-height: 600px) {
  #faq .faq-terminal {
    grid-template-columns: 1fr;   /* stack vertically */
    gap: 15px;
  }

  #faq .faq-queries {
    position: relative !important;  /* override sticky */
    top: auto !important;
    padding-top: 0;
  }

  #faq .faq-display {
    min-height: 260px;              /* reduce min height */
    max-height: 50vh;               /* keep it contained */
  }

  #faq .display-body {
    max-height: 40vh;               /* scrollable content */
  }
}

/* FAQ Responsive Fix + Swipeable Enhancement */
@media (max-width: 1024px) {
  #faq .faq-queries {
    display: flex;
    flex-wrap: nowrap;              /* prevent wrapping */
    overflow-x: auto;               /* enable swipe */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
  }

  #faq .query-btn {
    flex: 0 0 auto;                 /* fixed width pills */
    scroll-snap-align: start;
    white-space: nowrap;
    min-width: 200px;               /* comfortable tap target */
  }

  #faq .faq-display {
    margin-top: 16px;               /* spacing below pills */
  }
}


/* ================================
   FUTURISTIC Neural-Linked Testimonials (scoped)
   ================================ */

/* Layout */
.neural-deck{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:30px;
  margin-top:60px;
  min-height:420px;
}

/* Left panel (nodes) */
.neural-nav{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.neural-node{
  display:flex;align-items:center;gap:15px;width:100%;
  padding:12px 15px;border-radius:8px;border:1px solid var(--line);
  background:var(--glass-bg);cursor:pointer;text-align:left;position:relative;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.neural-node:hover{transform:translateX(5px);background-color:rgba(255,255,255,.9)}
.neural-node:focus-visible{
  outline:2px solid var(--accent-base);outline-offset:2px;
}
.neural-node.is-active{box-shadow:0 6px 18px -10px var(--accent-glow)}
.neural-node-avatar{
  width:48px;height:48px;border-radius:50%;
  border:2px solid transparent;transition:border-color .25s ease;flex-shrink:0;object-fit:cover;
}
.neural-node.is-active .neural-node-avatar{border-color:var(--accent-base)}
.neural-node-name{font-weight:700;color:var(--ink)}
.neural-node-title{font-size:14px;color:var(--muted)}

/* Right panel (display) */
.neural-display{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:40px;border-radius:16px;border:1px solid var(--line);background:#fff;overflow:hidden;
  min-height:360px;
}
.neural-display-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size:20px 20px;opacity:.5;animation:bg-pan 60s linear infinite;
}
@keyframes bg-pan{0%{background-position:0 0}100%{background-position:1200px 1200px}}
.neural-content{position:relative;z-index:2}

.neural-author{
  display:flex;align-items:center;gap:15px;margin-bottom:20px;
}
.neural-author-avatar{
  width:60px;height:60px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.neural-author-name{font-size:1.1rem;font-weight:700;color:var(--ink)}
.neural-author-title{color:var(--muted)}

.neural-quote{
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  font-weight:600;line-height:1.6;color:var(--ink);margin:0;
}
.neural-quote .word{opacity:0;animation:fadeInWord .5s ease forwards}
@keyframes fadeInWord{to{opacity:1}}

/* Scanline */
.neural-scanline{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent-base);box-shadow:0 0 15px var(--accent-glow);
  opacity:0;transform:scaleX(0);
}
.neural-display.is-decoding .neural-scanline{
  animation:scan-neural .6s cubic-bezier(.25,1,.5,1);
}
@keyframes scan-neural{
  0%{transform:scaleX(0) translateY(0);opacity:0}
  20%{transform:scaleX(1) translateY(0);opacity:.7}
  100%{transform:scaleX(1) translateY(100%);opacity:0}
}

/* ========= Breakpoints ========= */

/* <= 1200px: slightly narrower left column */
@media (max-width:1200px){
  .neural-deck{grid-template-columns:260px 1fr}
}

/* <= 992px: stack; keep nodes as horizontal scroller, sticky under header */
@media (max-width:992px){
  .neural-deck{grid-template-columns:1fr;gap:24px}
  .neural-nav{
    flex-direction:row;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;padding-bottom:10px;margin:0 -10px;padding-inline:10px;
    position:sticky;top:64px;background:var(--bg);z-index:2; /* adjust 64px if your sticky header differs */
  }
  .neural-node{
    min-width:220px;flex:0 0 auto;scroll-snap-align:start;
  }
  .neural-display{min-height:340px;padding:32px}
}

/* <= 767px: tighter */
@media (max-width:767px){
  .neural-display{padding:26px}
  .neural-quote{font-size:1.05rem}
  .neural-author-avatar{width:52px;height:52px}
}

/* <= 575px: extra compact + pill-like nodes */
@media (max-width:575px){
  .neural-node{
    min-width:200px;padding:10px 12px;border-radius:999px;
  }
  .neural-node-avatar{width:40px;height:40px}
  .neural-node-title{font-size:13px}
  .neural-display{min-height:320px}
}

/* <= 380px: tiny devices (Jio-like) */
@media (max-width:380px){
  .neural-node{min-width:180px}
  .neural-author-avatar{width:46px;height:46px}
  .neural-quote{font-size:1rem}
}

/* Motion preference */
@media (prefers-reduced-motion:reduce){
  .neural-display-bg{animation:none}
  .neural-quote .word{animation:none;opacity:1}
  .neural-display.is-decoding .neural-scanline{animation:none;opacity:0}
  .neural-node{transition:none}
}

/* ===== FUTURISTIC 3D Payment Flipper (stable, centered, with halo) ===== */
.flipper-viewport{
  position:relative;
  width:100%;
  max-width:420px;                 /* small bump for desktop */
  height:250px;
  margin:60px auto 0;
  perspective:1200px;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;                 /* prevent horizontal overflow */
  contain:layout paint;            /* isolate layout/paint */
}

.flipper-deck{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  /* driven by CSS vars from JS for perfect first paint */
  transform:translateZ(calc(var(--radius, 0px) * -1)) rotateY(var(--angle, 0deg));
  transition:transform .6s cubic-bezier(.25,1,.5,1);
  cursor:grab;
  touch-action:pan-y;              /* allow vertical page scroll */
  will-change:transform;
}
.flipper-deck.is-dragging{ cursor:grabbing; }

/* --- Cards --- */
.flipper-card{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:20px; box-sizing:border-box;
  border-radius:16px;
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  /* Subtle border that blends with brand; no heavy stacked shadows */
  border:1px solid color-mix(in oklab, var(--line) 70%, var(--accent-base));
  box-shadow:none;

  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  user-select:none;
  outline: none;
}

/* Brand halo (appears on hover/focus/active) */
.flipper-card::after{
  content:"";
  position:absolute;
  inset:-2px;                           /* sit just outside the border */
  border-radius:inherit;
  pointer-events:none;
  /* soft brand glow; single layer – no heavy stacking */
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--accent-base) 80%, transparent),
    0 0 28px 8px var(--accent-glow);
  opacity:0;
  transition:opacity .25s ease;
}

/* Hover / keyboard focus halo */
.flipper-deck:not(.is-dragging) .flipper-card:hover::after,
.flipper-card:focus-visible::after,
.flipper-card.is-active::after{
  opacity:1;
}

/* Optional: slight border brighten on interaction (no extra shadow) */
.flipper-deck:not(.is-dragging) .flipper-card:hover,
.flipper-card:focus-visible,
.flipper-card.is-active{
  border-color: var(--accent-base);
}

/* Logos */
.flipper-card img {
  width: 100%;
  max-width: 180px;  /* adjust as needed */
  height: auto;
  object-fit: contain;
}
.flipper-card img.icon-dark{ filter:invert(.1); }

/* Responsive */
@media (max-width:480px){
  .flipper-viewport{ max-width:92vw; height:220px; }
}

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce){
  .flipper-deck{ transition:none; }
  .flipper-card::after{ transition:none; }
}

/* =========================================================
   Markets section — brand-accent skeleton loader (Mintarex)
   Scope: ONLY within #markets to avoid bleed
   ========================================================= */

/* Container behavior on small screens */
#markets .market-table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* -------------------------------
   Skeleton shimmer + pulse
   ------------------------------- */
@keyframes mx-skel-shimmer {
  0%   { background-position: -240px 0; }
  100% { background-position: calc(240px + 100%) 0; }
}
@keyframes mx-skel-pulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

/* Accent fallbacks (stay within your palette) */
:root {
  --mx-accent: var(--accent-base, var(--brand-mint, #A2EBCC));
  --mx-accent-weak: color-mix(in srgb, var(--mx-accent) 20%, transparent);
  --mx-accent-strong: color-mix(in srgb, var(--mx-accent) 55%, #fff);
}

/* Base skeleton */
#markets .skel {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;

  /* base tint behind the shimmer (light accent wash) */
  background-color: var(--mx-accent-weak);

  /* shimmering sweep using the brand accent */
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    var(--mx-accent-strong) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 240px 100%;
  background-repeat: no-repeat;

  animation:
    mx-skel-shimmer 1.15s linear infinite,
    mx-skel-pulse   1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #markets .skel { animation: none; }
}

/* Skeleton shapes */
#markets .skel-icon { width: 20px; height: 20px; border-radius: 50%; margin-right: 10px; }
#markets .skel-name { display: flex; flex-direction: column; gap: 6px; }
#markets .skel-line { height: 10px; border-radius: 999px; background-color: var(--mx-accent-weak); }
#markets .skel-line--lg { width: 160px; }
#markets .skel-line--md { width: 120px; }
#markets .skel-line--sm { width: 48px; }
#markets .skel-pill     { height: 16px; width: 110px; border-radius: 999px; display: inline-block; }
#markets .skel-btn      { height: 28px; width: 64px;  border-radius: 999px; display: inline-block; }

/* Skeleton row spacing */
#markets tr.skel-row td {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
#markets tr.skel-row .asset-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Optional: soften table border while loading (non-invasive) */
#markets table[data-market-table].is-loading {
  opacity: 0.98;
}

/* -------------------------------
   Ultra small devices safety net
   ------------------------------- */
@media (max-width: 320px) {
  #markets .skel-line--lg { width: 120px; }
  #markets .skel-line--md { width: 90px; }
  #markets .skel-pill     { width: 90px; }
  #markets .skel-btn      { width: 56px; height: 26px; }
}