/* =========================================================
   TRADE 101 — Stylesheet
   ساختار: Tokens → Reset → Layout → Components → Pages → Utils
   تمام رنگ‌ها، فاصله‌ها و شعاع‌ها به صورت متغیر CSS تعریف شده‌اند
   تا تغییر برند در آینده ساده باشد.
   ========================================================= */

/* -------------------- 1. DESIGN TOKENS -------------------- */
:root{
  /* --- Dark theme (پیش‌فرض) --- */
  --bg:            #0a0607;
  --bg-soft:       #120b0d;
  --card:          #191113;
  --card-hover:    #221619;
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  --burgundy:       #7a1128;
  --burgundy-deep:  #4a0a19;
  --burgundy-soft:  #35131a;
  --pomegranate:    #a11c34;
  --neon-red:       #ff3357;
  --neon-red-soft:  rgba(255,51,87,0.35);

  --blue-neon:      #35b7ff;
  --blue-neon-soft: rgba(53,183,255,0.35);
  --blue-deep:      #0d3a52;

  --text:           #f4ece9;
  --text-dim:       #b7a6a7;
  --text-faint:     #7d6b6c;

  --success:        #38c98a;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-card: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-card-hover: 0 18px 46px rgba(0,0,0,0.6);

  --font-fa: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --header-h: 76px;
  --ticker-h: 36px;

  color-scheme: dark;
}

/* --- Light theme --- */
[data-theme="light"]{
  --bg:            #faf5f3;
  --bg-soft:       #f2e9e6;
  --card:          #ffffff;
  --card-hover:    #fff9f8;
  --border:        rgba(20,10,11,0.10);
  --border-strong: rgba(20,10,11,0.18);

  --burgundy:       #7a1128;
  --burgundy-deep:  #5c0d1f;
  --burgundy-soft:  #f4dde1;
  --pomegranate:    #921a30;
  --neon-red:       #c81d3e;
  --neon-red-soft:  rgba(200,29,62,0.18);

  --blue-neon:      #0e86c8;
  --blue-neon-soft: rgba(14,134,200,0.16);
  --blue-deep:      #d7edfa;

  --text:           #201415;
  --text-dim:       #5d484a;
  --text-faint:     #8a7576;

  --shadow-card: 0 8px 24px rgba(60,20,25,0.08);
  --shadow-card-hover: 0 14px 34px rgba(60,20,25,0.14);

  color-scheme: light;
}

/* -------------------- 2. RESET -------------------- */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-fa);
  direction: rtl;
  line-height: 1.7;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
  min-height: 100vh;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font-family:inherit; }
.ltr{ direction: ltr; font-family: var(--font-mono); unicode-bidi: isolate; }

/* Background ambience — noise-free, just soft radial glow */
body::before{
  content:"";
  position: fixed; inset:0;
  background:
    radial-gradient(650px 420px at 85% -5%, var(--burgundy-soft) 0%, transparent 60%),
    radial-gradient(500px 380px at 5% 10%, rgba(53,183,255,0.06) 0%, transparent 65%);
  pointer-events:none;
  z-index:0;
}
[data-theme="light"] body::before{
  background:
    radial-gradient(650px 420px at 85% -5%, rgba(122,17,40,0.08) 0%, transparent 60%),
    radial-gradient(500px 380px at 5% 10%, rgba(14,134,200,0.05) 0%, transparent 65%);
}

.container{
  width:100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count:1 !important; transition-duration: 0.01ms !important; scroll-behavior:auto !important; }
}

/* -------------------- 3. TICKER (Signature element) -------------------- */
.ticker{
  height: var(--ticker-h);
  background: var(--burgundy-deep);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  display:flex;
  align-items:center;
}
.ticker-track{
  display:flex;
  gap: 48px;
  white-space: nowrap;
  animation: ticker-scroll 32s linear infinite;
  padding-inline-start: 100%;
}
.ticker-item{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .3px;
  color: #f0d9de;
  display:flex; align-items:center; gap:8px;
}
.ticker-item .up{ color: var(--success); }
.ticker-item .down{ color: var(--neon-red); }
.ticker-dot{ width:5px; height:5px; border-radius:50%; background: var(--neon-red); box-shadow:0 0 8px var(--neon-red); }
@keyframes ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}

/* -------------------- 4. HEADER -------------------- */
header.site-header{
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap: 20px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size: 20px; letter-spacing:.2px;
}
.brand-mark{
  width:34px; height:34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--burgundy), var(--neon-red));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 1px var(--border-strong), 0 6px 16px rgba(255,51,87,.25);
  position:relative;
  flex-shrink:0;
}
.brand-mark svg{ width:18px; height:18px; }
.brand-name{ font-family: var(--font-mono); }
.brand-name b{ color: var(--neon-red); }

nav.main-nav{ display:flex; align-items:center; gap: 6px; }
nav.main-nav a{
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--text-dim);
  transition: color .2s ease, background .2s ease;
  position:relative;
}
nav.main-nav a:hover{ color: var(--text); background: var(--card); }
nav.main-nav a.active{ color: var(--text); background: var(--burgundy-soft); }
nav.main-nav a.active::after{
  content:"";
  position:absolute; bottom:5px; right:16px; left:16px; height:2px;
  background: var(--neon-red); border-radius:2px;
  box-shadow: 0 0 8px var(--neon-red-soft);
}

.header-actions{ display:flex; align-items:center; gap: 10px; }

/* Theme toggle */
.theme-toggle{
  width:44px; height:44px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  background: var(--card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.theme-toggle:hover{ border-color: var(--neon-red); box-shadow: 0 0 14px var(--neon-red-soft); }
.theme-toggle:active{ transform: scale(.92); }
.theme-toggle svg{ width:19px; height:19px; }
.icon-sun{ display:none; }
[data-theme="light"] .icon-moon{ display:none; }
[data-theme="light"] .icon-sun{ display:block; }

/* Mobile nav toggle */
.nav-burger{
  display:none;
  width:44px; height:44px; border-radius: var(--radius-sm);
  border:1px solid var(--border-strong);
  align-items:center; justify-content:center;
  background: var(--card);
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after{
  content:""; display:block; width:18px; height:2px; background: var(--text);
  position:relative; transition: transform .25s ease, opacity .25s ease;
}
.nav-burger span::before{ position:absolute; top:-6px; }
.nav-burger span::after{ position:absolute; top:6px; }

/* -------------------- 5. BUTTONS -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-weight:700; font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--burgundy), var(--pomegranate));
  color: #fff;
  box-shadow: 0 8px 24px rgba(161,28,52,.35);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,51,87,.4); }
.btn-primary:active{ transform: translateY(0); }
.btn-outline{
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-outline:hover{ border-color: var(--neon-red); color: var(--neon-red); }
.btn-block{ width:100%; }
.btn-lg{ padding: 17px 28px; font-size: 16.5px; border-radius: var(--radius-md); }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* -------------------- 6. HERO -------------------- */
.hero{
  padding: 90px 0 70px;
  position: relative;
  overflow: hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing:.6px;
  color: var(--neon-red);
  background: var(--burgundy-soft);
  border: 1px solid var(--neon-red-soft);
  padding: 7px 14px; border-radius: 999px;
  margin-bottom: 22px;
}
.eyebrow .pulse{
  width:6px; height:6px; border-radius:50%; background: var(--neon-red);
  box-shadow: 0 0 10px var(--neon-red);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.hero h1{
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 22px;
}
.hero h1 em{
  font-style:normal;
  background: linear-gradient(90deg, var(--neon-red), var(--pomegranate));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{
  color: var(--text-dim);
  font-size: 17px;
  max-width: 520px;
  margin-bottom: 34px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap: 28px; margin-top: 44px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-size: 24px; font-family: var(--font-mono); color: var(--text); }
.hero-stat span{ font-size: 13px; color: var(--text-faint); }

/* Signature visual: glowing candlestick chart */
.hero-chart{
  position: relative;
  aspect-ratio: 1/1;
  max-width: 460px;
  margin-inline-start: auto;
}
.hero-chart svg{ width:100%; height:100%; }
.candle{ animation: rise .9s ease both; transform-origin: bottom; }
@keyframes rise{ from{ transform: scaleY(0); opacity:0; } to{ transform: scaleY(1); opacity:1; } }
.hero-chart .glow-line{ filter: drop-shadow(0 0 8px var(--neon-red)); }
.hero-chart .glow-blue{ filter: drop-shadow(0 0 8px var(--blue-neon)); }

.fade-up{ animation: fadeUp .7s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform:none; } }

/* -------------------- 7. SECTION HEADINGS -------------------- */
.section{ padding: 80px 0; position:relative; }
.section-head{ text-align:center; max-width: 620px; margin: 0 auto 48px; }
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{ font-size: clamp(26px, 3.6vw, 38px); font-weight:800; margin-bottom:14px; }
.section-head p{ color: var(--text-dim); font-size: 16px; }

/* -------------------- 8. SOCIAL SECTION -------------------- */
.social-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.social-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align:center;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
  position:relative;
  overflow:hidden;
}
.social-card::before{
  content:""; position:absolute; inset:0; opacity:0; transition: opacity .3s ease;
  background: radial-gradient(120px 90px at 50% 0%, var(--glow-color, var(--neon-red)) , transparent 70%);
}
.social-card:hover, .social-card:focus-visible{
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card-hover);
  background: var(--card-hover);
}
.social-card:hover::before{ opacity:.18; }
.social-icon{
  width:52px; height:52px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 16px;
  background: var(--icon-bg, var(--burgundy-soft));
  color: var(--icon-color, var(--neon-red));
  transition: box-shadow .25s ease, transform .25s ease;
}
.social-card:hover .social-icon{ box-shadow: 0 0 22px var(--icon-color, var(--neon-red)); transform: scale(1.06); }
.social-icon svg{ width:26px; height:26px; }
.social-card h3{ font-size: 15.5px; margin-bottom:4px; }
.social-card span{ font-size: 12.5px; color: var(--text-faint); font-family: var(--font-mono); direction:ltr; display:block; }

/* per-platform accent colors */
.social-card.youtube   { --icon-color:#ff3b3b; --icon-bg:rgba(255,59,59,.14); --glow-color:#ff3b3b; }
.social-card.instagram { --icon-color:#e1306c; --icon-bg:rgba(225,48,108,.14); --glow-color:#e1306c; }
.social-card.telegram  { --icon-color:#35b7ff; --icon-bg:rgba(53,183,255,.14); --glow-color:#35b7ff; }
.social-card.bale      { --icon-color:#f9a11b; --icon-bg:rgba(249,161,27,.14); --glow-color:#f9a11b; }

/* -------------------- 9. FEATURE / WHY CARDS (home) -------------------- */
.features-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:20px;
}
.feature-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover{ transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.feature-icon{
  width:46px; height:46px; border-radius:12px;
  background: var(--burgundy-soft); color: var(--neon-red);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.feature-icon svg{ width:22px; height:22px; }
.feature-card h3{ font-size:17px; margin-bottom:8px; }
.feature-card p{ color: var(--text-dim); font-size: 14.5px; }

/* CTA banner */
.cta-banner{
  background: linear-gradient(120deg, var(--burgundy-deep), var(--burgundy) 60%, var(--pomegranate));
  border-radius: var(--radius-lg);
  padding: 52px 40px;
  text-align:center;
  position:relative; overflow:hidden;
  box-shadow: 0 20px 50px rgba(122,17,40,.35);
}
.cta-banner::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(300px 200px at 80% 0%, rgba(255,255,255,.12), transparent 70%);
}
.cta-banner h2{ font-size: clamp(22px,3vw,30px); margin-bottom:14px; color:#fff; position:relative; }
.cta-banner p{ color: rgba(255,255,255,.82); margin-bottom:26px; position:relative; }
.cta-banner .btn-outline{ border-color: rgba(255,255,255,.4); color:#fff; position:relative; }
.cta-banner .btn-outline:hover{ background: rgba(255,255,255,.12); border-color:#fff; color:#fff; }

/* -------------------- 10. PLANS PAGE -------------------- */
.plans-grid{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: 26px; max-width: 900px; margin: 0 auto;
}
.plan-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  position:relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.plan-card:hover, .plan-card:focus-within, .plan-card.touch-active{
  transform: translateY(-8px);
  border-color: var(--neon-red);
  box-shadow: 0 20px 46px var(--neon-red-soft), var(--shadow-card-hover);
}
.plan-card.featured{ border-color: var(--border-strong); }
.plan-card.featured::before{
  content: "پیشنهادی";
  position:absolute; top:-13px; right: 28px;
  background: linear-gradient(135deg, var(--neon-red), var(--pomegranate));
  color:#fff; font-size:12px; font-weight:700;
  padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 6px 16px var(--neon-red-soft);
}
.plan-badge{
  font-family: var(--font-mono); font-size:12.5px; color: var(--text-faint);
  letter-spacing:.4px; margin-bottom:8px; display:block;
}
.plan-card h3{ font-size: 22px; margin-bottom: 6px; }
.plan-sub{ color: var(--text-dim); font-size: 14px; margin-bottom: 22px; }
.plan-price{ display:flex; align-items:baseline; gap:8px; margin-bottom:26px; }
.plan-price b{ font-size: 40px; font-family: var(--font-mono); }
.plan-price span{ color: var(--text-faint); font-size: 14px; }
.plan-features{ margin-bottom: 30px; display:flex; flex-direction:column; gap:12px; }
.plan-features li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color: var(--text-dim); }
.plan-features svg{ width:16px; height:16px; color: var(--success); flex-shrink:0; }

/* -------------------- 11. TRANSACTION PAGE -------------------- */
.plan-summary{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  margin-bottom: 36px;
}
.plan-summary .ps-left{ display:flex; align-items:center; gap:16px; }
.plan-summary .ps-icon{
  width:48px; height:48px; border-radius:14px;
  background: var(--burgundy-soft); color: var(--neon-red);
  display:flex; align-items:center; justify-content:center;
}
.plan-summary h3{ font-size:17px; margin-bottom:2px; }
.plan-summary p{ color: var(--text-dim); font-size: 13.5px; }
.plan-summary .ps-amount{ text-align:left; }
.plan-summary .ps-amount b{ font-size: 26px; font-family: var(--font-mono); color: var(--neon-red); }
.plan-summary .ps-amount span{ display:block; font-size:12px; color: var(--text-faint); }

.wallets-grid{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: 22px; margin-bottom: 40px;
}
.wallet-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  position: relative;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.wallet-card.ton{ --wc: var(--blue-neon); --wc-soft: var(--blue-neon-soft); }
.wallet-card.trc20{ --wc: var(--neon-red); --wc-soft: var(--neon-red-soft); }
.wallet-card:hover{ border-color: var(--wc); box-shadow: 0 0 0 1px var(--wc-soft), 0 18px 40px var(--wc-soft); }

.wallet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.wallet-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:12.5px; font-weight:600;
  color: var(--wc); background: var(--wc-soft);
  border: 1px solid var(--wc); padding: 6px 12px; border-radius: 999px;
}
.wallet-tag svg{ width:14px; height:14px; }
.wallet-net{ font-size:13px; color: var(--text-faint); }

.wallet-address-box{
  background: var(--bg-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
  direction: ltr; text-align:left;
  color: var(--text);
  margin-bottom: 14px;
}
.wallet-qr{
  width: 130px; height:130px; margin: 4px auto 16px;
  background:#fff; border-radius: 12px; padding:8px;
  box-shadow: 0 0 0 1px var(--border), 0 0 22px var(--wc-soft);
}
.wallet-qr canvas, .wallet-qr img{ width:100%; height:100%; }
.wallet-note{ font-size: 12.5px; color: var(--text-faint); margin-bottom:16px; }
.copy-btn{
  width:100%; padding: 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--wc); color: var(--wc);
  font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition: background .2s ease, color .2s ease;
}
.copy-btn svg{ width:16px; height:16px; }
.copy-btn:hover{ background: var(--wc-soft); }
.copy-btn.copied{ background: var(--success); border-color: var(--success); color:#04231a; }

.warning-box{
  display:flex; gap:14px; align-items:flex-start;
  background: var(--burgundy-soft);
  border: 1px solid var(--neon-red-soft);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 40px;
}
.warning-box svg{ width:22px; height:22px; color: var(--neon-red); flex-shrink:0; margin-top:2px; }
.warning-box p{ font-size: 14px; color: var(--text); }
.warning-box b{ color: var(--neon-red); }

.steps-list{ counter-reset: step; margin-bottom: 40px; display:flex; flex-direction:column; gap:16px; }
.step-item{
  display:flex; gap:16px; align-items:flex-start;
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px 18px;
}
.step-num{
  counter-increment: step;
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, var(--burgundy), var(--pomegranate));
  color:#fff; font-family: var(--font-mono); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.step-num::before{ content: counter(step); }
.step-item p{ font-size: 14.5px; color: var(--text-dim); padding-top:5px; }

.txid-box{
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px; margin-bottom: 40px;
}
.txid-box h3{ font-size:16.5px; margin-bottom:10px; }
.txid-box p{ color: var(--text-dim); font-size: 14px; margin-bottom:16px; }
.txid-input-row{ display:flex; gap:10px; }
.txid-input-row input{
  flex:1; min-width:0;
  background: var(--bg-soft); border:1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 13px 14px;
  color: var(--text); font-family: var(--font-mono); font-size:13.5px;
  direction:ltr; text-align:left;
}
.txid-input-row input:focus{ outline:2px solid var(--neon-red); outline-offset:1px; }

.pay-final{ text-align:center; padding: 44px 20px; }
.pay-final p{ color: var(--text-dim); margin: 14px 0 26px; max-width:480px; margin-inline:auto; }

/* -------------------- 12. FOOTER -------------------- */
footer.site-footer{
  border-top: 1px solid var(--border);
  padding: 56px 0 28px;
  margin-top: 60px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px; margin-bottom: 40px;
}
.footer-brand p{ color: var(--text-dim); font-size:14px; margin-top:14px; max-width: 320px; }
.footer-col h4{ font-size:14.5px; margin-bottom:16px; color: var(--text-faint); font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:14px; color: var(--text-dim); transition: color .2s ease; }
.footer-col a:hover{ color: var(--neon-red); }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:38px; height:38px; border-radius:10px;
  background: var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .2s ease, color .2s ease;
}
.footer-social a:hover{ border-color: var(--neon-red); color: var(--neon-red); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{
  border-top: 1px solid var(--border);
  padding-top: 24px;
  text-align:center;
  font-size: 13px; color: var(--text-faint);
}

/* -------------------- 13. RESPONSIVE -------------------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-chart{ margin-inline: auto; max-width: 340px; order:-1; }
  .features-grid{ grid-template-columns: repeat(2,1fr); }
  .social-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
}

@media (max-width: 760px){
  nav.main-nav{
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--bg);
    flex-direction: column; align-items: stretch;
    padding: 18px;
    gap: 8px;
    transform: translateY(-8px);
    opacity:0; visibility:hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index: 40;
    border-top: 1px solid var(--border);
  }
  nav.main-nav.open{ opacity:1; visibility:visible; transform:none; }
  nav.main-nav a{ padding:14px 16px; font-size:16px; text-align:center; }
  .nav-burger{ display:flex; }

  .hero{ padding: 56px 0 46px; }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  .hero-stats{ justify-content:space-between; gap:14px; }

  .plans-grid{ grid-template-columns: 1fr; }
  .wallets-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap:28px; }
  .plan-summary{ flex-direction:column; align-items:flex-start; }
  .plan-summary .ps-amount{ text-align:right; }
  .txid-input-row{ flex-direction:column; }
}

@media (max-width: 520px){
  .features-grid{ grid-template-columns: 1fr; }
  .social-grid{ grid-template-columns: 1fr 1fr; }
  .container{ padding: 0 18px; }
}

/* -------------------- 14. MISC UTIL -------------------- */
.mt-0{ margin-top:0; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
::selection{ background: var(--neon-red); color:#fff; }
:focus-visible{ outline: 2px solid var(--neon-red); outline-offset: 2px; }