/* =========================================================
   PayRu — Marketing Pages
   ========================================================= */

/* Prevent horizontal scroll from decorative off-canvas elements.
   overflow-x:clip (not hidden) avoids creating a scroll-container
   that breaks position:fixed children (e.g. the mobile nav drawer). */
body {
  overflow-x: clip;
  /* Push content below the fixed navbar */
  padding-top: var(--header-h);
}

/* ---------- Hero ---------- */
.hero {
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(0, 224, 168, 0.18), transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -240px;
  left: -160px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(124, 108, 246, 0.16), transparent 70%);
  pointer-events: none;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 56px);
  margin-bottom: 20px;
}

.hero p.lead {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 520px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-stats .stat strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 26px;
  font-weight: 800;
}

.hero-stats .stat span {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* Hero mockup card */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  padding-top: 20px;
}

/* ---------- Crypto card stack ---------- */
.crypto-card-stack {
  position: relative;
  width: 360px;
  height: 300px;
  cursor: pointer;
  flex-shrink: 0;
}

.crypto-card {
  position: absolute;
  top: 0; left: 0;
  width: 360px;
  height: 210px;
  border-radius: 22px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.5s ease;
}

/* Decorative circles on card face */
.crypto-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.crypto-card::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -50px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

/* Position layers */
.crypto-card[data-pos="0"] { transform: translateY(0)  scale(1);    z-index: 5; opacity: 1;   }
.crypto-card[data-pos="1"] { transform: translateY(18px) scale(0.95); z-index: 4; opacity: 1;   }
.crypto-card[data-pos="2"] { transform: translateY(32px) scale(0.90); z-index: 3; opacity: 0.85; }
.crypto-card[data-pos="3"] { transform: translateY(44px) scale(0.85); z-index: 2; opacity: 0.65; }
.crypto-card[data-pos="4"] { transform: translateY(54px) scale(0.80); z-index: 1; opacity: 0.45; }

/* Slide-out animation */
.crypto-card.sliding-out {
  transform: translateX(140%) rotate(14deg) scale(0.92) !important;
  opacity: 0 !important;
  z-index: 10 !important;
}

/* Per-coin gradients */
.crypto-card[data-asset="BTC"]  { background: linear-gradient(135deg, #F7931A 0%, #C8620A 100%); }
.crypto-card[data-asset="ETH"]  { background: linear-gradient(135deg, #627EEA 0%, #3A4FBD 100%); }
.crypto-card[data-asset="USDT"] { background: linear-gradient(135deg, #26A17B 0%, #126B50 100%); }
.crypto-card[data-asset="BNB"]  { background: linear-gradient(135deg, #F3BA2F 0%, #C49010 100%); }
.crypto-card[data-asset="USDC"] { background: linear-gradient(135deg, #2775CA 0%, #0F4FA0 100%); }

/* Card inner layout */
.crypto-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.crypto-card-brand {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.crypto-card-chip {
  width: 36px;
  height: 26px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0.12));
  border: 1px solid rgba(255,255,255,0.3);
}

.crypto-card-center {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.crypto-card-center .coin-icon {
  width: 58px;
  height: 58px;
  font-size: 26px;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.crypto-card-coin-name strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.crypto-card-coin-name span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

.crypto-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.crypto-card-label {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.crypto-card-network {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
}

/* Hint text below the stack */
.card-stack-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: absolute;
  bottom: 0; left: 0; right: 0;
}

/* ---------- Hero "live rates" carousel ---------- */
.rate-carousel {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.rate-carousel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: var(--gradient);
  opacity: 0.12;
  z-index: -1;
  filter: blur(30px);
}

.rate-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.rate-carousel-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.rate-carousel-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulseDot 1.6s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.rate-carousel-viewport {
  overflow: hidden;
  border-radius: var(--radius);
}

.rate-carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.rate-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 4px 2px;
}

.rate-slide-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.rate-slide-top .coin-icon {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.rate-slide-top strong {
  display: block;
  font-size: 15px;
}

.rate-slide-top span {
  font-size: 12.5px;
  color: var(--text-dim);
}

.rate-trend {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.rate-trend.up {
  color: var(--success);
  background: var(--success-soft);
}

.rate-trend.down {
  color: var(--danger);
  background: var(--danger-soft);
}

.rate-slide-price {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rate-usd {
  font-family: "Sora", sans-serif;
  font-size: 26px;
  font-weight: 800;
}

.rate-ngn {
  font-size: 13px;
  color: var(--text-muted);
}

.rate-slide-convert {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--primary-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13.5px;
}

.rate-slide-convert strong {
  color: var(--primary);
  font-family: "Sora", sans-serif;
  font-size: 15px;
  white-space: nowrap;
}

.rate-slide-actions {
  display: flex;
  gap: 10px;
}

.rate-slide-actions .btn {
  flex: 1;
}

.rate-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.rate-carousel-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
}

.rate-carousel-dots .dot.active {
  background: var(--primary);
  width: 22px;
  border-radius: 4px;
}

/* ---------- Live rate ticker (scrolling marquee) ---------- */
.ticker-section {
  padding: 18px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
  background: var(--bg-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  gap: 36px;
  animation: tickerScroll 38s linear infinite;
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.ticker-item .coin-icon {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.ticker-item span {
  color: var(--text-muted);
  font-weight: 500;
}

.ticker-change {
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.ticker-change.up {
  color: var(--success);
  background: var(--success-soft);
}

.ticker-change.down {
  color: var(--danger);
  background: var(--danger-soft);
}

/* ---------- Live Rates Slider ---------- */
.rates-slider {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rates-slider-viewport {
  flex: 1;
  overflow: hidden;
}

.rates-slider-track {
  display: flex;
  gap: 20px;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.rate-slide-card {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.35s ease;
}

.rate-slide-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient);
}

.rate-slide-card:hover {
  border-color: var(--primary);
  box-shadow: 0 20px 48px rgba(0, 224, 168, 0.12);
  transform: translateY(-5px);
}

.rate-slide-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  position: relative;
}

.rate-slide-header .coin-icon {
  width: 38px;
  height: 38px;
  font-size: 17px;
}

.rate-slide-header .rate-live-indicator {
  position: absolute;
  top: 0;
  right: 0;
}

.rate-slide-meta { flex: 1; min-width: 0; }

.rate-slide-meta strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.rate-slide-meta span {
  font-size: 12.5px;
  color: var(--text-dim);
}

.rate-live-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.rate-blink-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  animation: blinkPulse 1.4s ease-in-out infinite;
}

@keyframes blinkPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 224, 168, 0.7);
  }
  50% {
    opacity: 0.2;
    transform: scale(0.65);
    box-shadow: 0 0 0 9px rgba(0, 224, 168, 0);
  }
}

.rate-slide-card:nth-child(1) .rate-blink-dot { animation-delay: 0s; }
.rate-slide-card:nth-child(2) .rate-blink-dot { animation-delay: 0.28s; }
.rate-slide-card:nth-child(3) .rate-blink-dot { animation-delay: 0.56s; }
.rate-slide-card:nth-child(4) .rate-blink-dot { animation-delay: 0.84s; }
.rate-slide-card:nth-child(5) .rate-blink-dot { animation-delay: 1.12s; }

.rate-slide-price {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 5px;
}

.rate-slide-ngn {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.rate-slide-change {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rates-controls {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* ---------- Trade with Us ---------- */
.trade-stats {
  display: flex;
  gap: 32px;
  margin: 24px 0 8px;
  flex-wrap: wrap;
}

.trade-stat strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 28px;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradShift 6s ease-in-out infinite;
}

.trade-stat span {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Countries grid ---------- */
.countries-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 16px;
}

.country-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 28px 16px 22px;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.country-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.country-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: 0 20px 48px rgba(0, 224, 168, 0.1);
}

.country-card:hover::before { opacity: 1; }

.country-card--more {
  background: var(--bg-soft);
  border-style: dashed;
}

.country-card--more:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 48px rgba(124, 108, 246, 0.1);
}

.country-flag {
  font-size: 44px;
  line-height: 1;
  display: block;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
}

.country-name {
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 6px;
  color: var(--text);
}

.country-currency {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.country-currency strong {
  color: var(--primary);
  font-weight: 700;
}

.country-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--success-soft);
  color: var(--success);
}

.country-badge i { font-size: 13px; }

.country-badge--soon {
  background: var(--warning-soft);
  color: var(--warning);
}

/* ---------- Steps ---------- */
.steps-grid {
  grid-template-columns: repeat(4, 1fr);
}

.step-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.step-card .step-number {
  margin-bottom: 18px;
}

.step-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.step-card p {
  color: var(--text-muted);
  font-size: 14.5px;
}

/* ---------- Asset grid ---------- */
.assets-grid {
  grid-template-columns: repeat(5, 1fr);
}

.asset-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-align: center;
  transition: all var(--transition);
}

.asset-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
}

.asset-card .coin-icon {
  margin: 0 auto 14px;
  width: 52px;
  height: 52px;
  font-size: 16px;
}

.asset-card h4 {
  font-size: 16px;
  margin-bottom: 4px;
}

.asset-card span {
  font-size: 13px;
  color: var(--text-dim);
}

/* ---------- Features (image + list) ---------- */
.features-split {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.features-image {
  position: relative;
}

.features-image img {
  width: 100%;
  aspect-ratio: 4/4.7;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg);
}

.features-image--wide img {
  aspect-ratio: 5/4;
}

.features-image-badge {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-lg);
}

.features-image-badge i {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.features-image-badge strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.features-image-badge span {
  font-size: 12.5px;
  color: var(--text-dim);
}

.lead-sm {
  color: var(--text-muted);
  font-size: 16px;
  margin-bottom: 32px;
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feature-row {
  display: flex;
  gap: 18px;
}

.feature-row .feature-icon {
  flex-shrink: 0;
  margin-bottom: 0;
}

.feature-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
}

.feature-row h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.feature-row p {
  color: var(--text-muted);
  font-size: 14px;
}

/* ---------- Testimonials slider ---------- */
.testimonial-slider {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.testimonial-track {
  display: flex;
  transition: transform 0.5s ease;
}

.testimonial-card {
  flex: 0 0 100%;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  text-align: left;
  box-shadow: var(--shadow-lg);
}

.testimonial-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.testimonial-header .avatar {
  width: 48px;
  height: 48px;
  font-size: 16px;
  flex-shrink: 0;
}

.testimonial-meta {
  flex: 1;
  min-width: 0;
}

.testimonial-meta strong {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
}

.testimonial-meta strong .bx-badge-check {
  color: var(--primary);
  font-size: 15px;
}

.testimonial-meta span {
  font-size: 12.5px;
  color: var(--text-dim);
}

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.slider-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all var(--transition);
}

.slider-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
}

.slider-dots {
  display: flex;
  gap: 8px;
}

.slider-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
}

.slider-dots .dot.active {
  background: var(--primary);
  width: 22px;
  border-radius: 4px;
}

.testimonial-stars {
  color: var(--warning);
  font-size: 14px;
  letter-spacing: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.testimonial-card p {
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.7;
  margin: 0;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
}

.faq-question i {
  font-size: 22px;
  color: var(--text-dim);
  transition: transform var(--transition);
  flex-shrink: 0;
  margin-left: 16px;
}

.faq-item.open .faq-question i {
  transform: rotate(180deg);
  color: var(--primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-answer-inner {
  padding: 0 24px 20px;
  color: var(--text-muted);
  font-size: 14.5px;
}

.faq-item.open .faq-answer {
  max-height: 220px;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--gradient);
  border-radius: var(--radius-lg);
  padding: 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner h2 {
  color: #06140F;
  font-size: clamp(26px, 4vw, 36px);
  margin-bottom: 12px;
}

.cta-banner p {
  color: rgba(6, 20, 15, 0.7);
  font-size: 16px;
  margin-bottom: 28px;
}

.cta-banner .btn-primary {
  background: #06140F;
  color: #fff;
  box-shadow: none;
}

.cta-banner .btn-primary:hover {
  background: #0a1f17;
}

.cta-banner .btn-outline {
  border-color: rgba(6, 20, 15, 0.3);
  color: #06140F;
}

.cta-banner .btn-outline:hover {
  border-color: #06140F;
  background: rgba(6, 20, 15, 0.08);
}

.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Static / legal pages ---------- */
.page-header {
  padding: 64px 0 40px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}

.page-header .section-tag {
  margin-bottom: 18px;
}

.page-header h1 {
  font-size: clamp(30px, 4.5vw, 46px);
  margin-bottom: 14px;
}

.page-header p {
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
}

.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 0 100px;
}

.legal-content h2 {
  font-size: 20px;
  margin: 36px 0 14px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 12px;
}

.legal-content ul {
  padding-left: 22px;
  list-style: disc;
  margin-bottom: 12px;
}

.legal-content .updated {
  color: var(--text-dim);
  font-size: 13.5px;
  margin-bottom: 30px;
}

/* About page */
.about-grid {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.about-grid img,
.about-visual {
  width: 100%;
  aspect-ratio: 4/3.2;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  object-fit: cover;
  display: block;
  position: relative;
  overflow: hidden;
}

/* ---------- Stats band ---------- */
.stats-band {
  padding: 48px 0;
  background: var(--gradient);
}

.stats-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.stat-block strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  color: #06140F;
  margin-bottom: 4px;
}

.stat-block span {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(6, 20, 15, 0.65);
}

.values-grid {
  grid-template-columns: repeat(4, 1fr);
}

.value-card {
  text-align: center;
  padding: 26px;
}

.value-card .feature-icon {
  margin: 0 auto 16px;
}

.value-card h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.value-card p {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .countries-grid { grid-template-columns: repeat(3, 1fr); }
  .rate-slide-card { flex: 0 0 calc((100% - 20px) / 2); }
}

@media (max-width: 980px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }

  /* Show card stack BEFORE the hero text on mobile */
  .hero-visual { order: -1; }

  /* Prevent card stack from touching screen edges */
  .crypto-card-stack {
    width: min(360px, calc(100% - 32px));
    margin: 0 auto;
  }

  .crypto-card {
    width: 100%;
  }

  .hero-text,
  .hero-visual {
    min-width: 0;
  }

  .hero p.lead {
    margin: 0 auto 32px;
  }

  .hero-actions,
  .hero-stats {
    justify-content: center;
  }

  .rate-carousel {
    max-width: 460px;
    margin: 0 auto;
  }

  .steps-grid,
  .assets-grid,
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-split,
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .features-image {
    order: -1;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .countries-grid { grid-template-columns: repeat(2, 1fr); }

  /* Give the card stack breathing room from screen edges */
  .crypto-card-stack {
    width: calc(100% - 28px);
    margin: 0 14px;
  }

  .crypto-card {
    width: 100%;
  }

  /* Expand rate slider cards on mobile */
  .rate-slide-card {
    flex: 0 0 100%;
    padding: 20px 18px;
  }
  .rate-slide-price { font-size: 22px; }
  .rate-slide-header .coin-icon { width: 34px; height: 34px; font-size: 15px; }
  .rate-slide-meta strong { font-size: 14px; }
  .rates-slider { gap: 6px; }
  .rates-slider .slider-btn { width: 34px; height: 34px; font-size: 16px; }

  .trade-stats { gap: 20px; }

  .steps-grid,
  .assets-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }

  .cta-banner {
    padding: 36px 20px;
  }

  .hero-stats {
    gap: 24px;
  }

  .testimonial-card {
    padding: 24px;
  }

  .ticker-track {
    animation-duration: 24s;
  }

  .stats-band-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

/* =================================================================
   ANIMATIONS & GLASSMORPHISM
   ================================================================= */

/* ---- Scroll-triggered fade-up — visibility entirely managed by AOS ---- */
/* Do NOT add opacity:0 here — it fights [data-aos] and prevents AOS from working */

/* ---- Animated hero background blobs ---- */
.hero::before {
  animation: blobDrift1 12s ease-in-out infinite alternate;
}
.hero::after {
  animation: blobDrift2 16s ease-in-out infinite alternate-reverse;
}
@keyframes blobDrift1 {
  0%   { transform: scale(1) translate(0, 0); opacity: 0.18; }
  50%  { transform: scale(1.18) translate(50px, 25px); opacity: 0.1; }
  100% { transform: scale(0.92) translate(-15px, 50px); opacity: 0.22; }
}
@keyframes blobDrift2 {
  0%   { transform: scale(1) translate(0, 0); opacity: 0.16; }
  50%  { transform: scale(1.12) translate(-35px, -20px); opacity: 0.08; }
  100% { transform: scale(1.08) translate(20px, 40px); opacity: 0.2; }
}

/* ---- Animated gradient headline ---- */
.text-gradient {
  background-size: 200% 200% !important;
  animation: gradShift 6s ease-in-out infinite;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---- Hero stats: gradient numbers + pop-in ---- */
.hero-stats .stat strong {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradShift 6s ease-in-out infinite;
}
.hero-stats .stat {
  animation: statPopIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-stats .stat:nth-child(1) { animation-delay: 0.35s; }
.hero-stats .stat:nth-child(2) { animation-delay: 0.5s;  }
.hero-stats .stat:nth-child(3) { animation-delay: 0.65s; }
@keyframes statPopIn {
  from { opacity: 0; transform: scale(0.8) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Floating rate carousel (glassmorphism) ---- */
.hero-visual .rate-carousel {
  animation: floatCard 7s ease-in-out infinite;
  background: rgba(19, 26, 44, 0.72) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 224, 168, 0.08) !important;
}
:root[data-theme="light"] .hero-visual .rate-carousel {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(0, 224, 168, 0.18) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 224, 168, 0.1) !important;
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0px)   rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(0.4deg); }
  66%       { transform: translateY(-6px)  rotate(-0.3deg); }
}

/* ---- Step cards — glassmorphism + hover lift ---- */
.step-card {
  background: rgba(19, 26, 44, 0.68) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease !important;
}
.step-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 224, 168, 0.7), transparent);
  transform: scaleX(0);
  transition: transform 0.45s ease;
}
.step-card:hover {
  transform: translateY(-12px) !important;
  border-color: rgba(0, 224, 168, 0.25) !important;
  box-shadow: 0 28px 64px rgba(0, 224, 168, 0.1),
              0 10px 30px rgba(0, 0, 0, 0.25) !important;
}
.step-card:hover::after { transform: scaleX(1); }
:root[data-theme="light"] .step-card {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(0, 224, 168, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05) !important;
}
:root[data-theme="light"] .step-card:hover {
  box-shadow: 0 28px 64px rgba(0, 224, 168, 0.12),
              0 4px 20px rgba(0, 0, 0, 0.07) !important;
}

/* ---- Step number — pill + hover glow ---- */
.step-card .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
  font-family: "Sora", sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover .step-number {
  transform: scale(1.1);
  box-shadow: 0 0 0 8px rgba(0, 224, 168, 0.1), 0 0 0 16px rgba(0, 224, 168, 0.04);
}

/* ---- Section tag shimmer ---- */
.section-tag {
  position: relative;
  overflow: hidden;
}
.section-tag::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 70%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: tagShimmer 5s ease-in-out infinite 2s;
}
@keyframes tagShimmer {
  0%   { left: -100%; }
  100% { left: 220%;  }
}

/* ---- Feature image hover zoom + floating badge ---- */
.features-image {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.features-image img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.features-image:hover img {
  transform: scale(1.05) !important;
}
.features-image-badge {
  animation: badgeFloat 5s ease-in-out infinite;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(19, 26, 44, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
:root[data-theme="light"] .features-image-badge {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-9px); }
}

/* ---- Testimonial cards — glassmorphism ---- */
.testimonial-card {
  background: rgba(26, 34, 56, 0.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3) !important;
}
:root[data-theme="light"] .testimonial-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* ---- CTA banner — animated gradient ---- */
.cta-banner {
  background: var(--gradient) !important;
  background-size: 200% 200% !important;
  animation: ctaWave 8s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -60%; left: -20%;
  width: 140%; height: 220%;
  background: radial-gradient(ellipse at 60% 40%, rgba(255,255,255,0.14) 0%, transparent 55%);
  pointer-events: none;
  animation: ctaOrb 9s ease-in-out infinite alternate;
}
@keyframes ctaWave {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes ctaOrb {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, 20px) scale(1.15); }
}

/* ---- Nav link — animated underline (desktop only) ---- */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 50%; right: 50%;
  height: 2px;
  background: var(--gradient);
  border-radius: 2px;
  transition: left 0.3s ease, right 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { left: 0; right: 0; }

/* On mobile the full-border active style (style.css) replaces the underline */
@media (max-width: 860px) {
  .nav-links a::after,
  .nav-links a:hover::after,
  .nav-links a.active::after { display: none; }
}

/* ---- FAQ hover ---- */
.faq-item {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item:hover {
  border-color: rgba(0, 224, 168, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ---- Page-header glow (about page) ---- */
.page-header {
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: 640px; height: 320px;
  background: radial-gradient(ellipse, rgba(0, 224, 168, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* ---- Ticker: pause on hover ---- */
.ticker-section:hover .ticker-track { animation-play-state: paused; }

/* ---- tsParticles hero canvas ---- */
#hero-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#hero-particles canvas {
  position: absolute !important;
  inset: 0;
}

/* ---- Floating particles keyframe ---- */
@keyframes particleFloat {
  0%, 100% { transform: translateY(0)    scale(1);   opacity: 0.55; }
  50%       { transform: translateY(-28px) scale(1.3); opacity: 0.15; }
}

/* ---- Reduced-motion safety ---- */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero::before, .hero::after,
  .hero-visual .rate-carousel,
  .text-gradient,
  .hero-stats .stat strong,
  .hero-stats .stat,
  .step-card::after,
  .features-image-badge,
  .cta-banner,
  .cta-banner::before,
  .section-tag::after { animation: none !important; }
}

/* On a touch screen a tap leaves :hover stuck, so the lift made rate cards
   jump up and stay there. Only lift where there's a real pointer. */
@media (hover: none) {
  .rate-slide-card:hover { transform: none; box-shadow: none; }
}

/* On a phone, blocks that slide in from the left or right start 100px
   off-screen — the content visibly "jumps out" past the edge before it
   settles. Below 768px they fade up instead, and sections clip anything
   that still pokes out (clip, not hidden, so sticky elements keep working). */
@media (max-width: 768px) {
  [data-aos="fade-left"],
  [data-aos="fade-right"] {
    transform: translate3d(0, 24px, 0) !important;
  }
  [data-aos="fade-left"].aos-animate,
  [data-aos="fade-right"].aos-animate {
    transform: none !important;
  }
  .section, .hero { overflow-x: clip; }
}