:root{
  --bg:#000;
  --text:#fff;
  --muted:#b8b8c2;
  --gold:#ffd700;
}

*{ box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 60px);
  min-height: 100vh;
  padding: 0 5%;
}

/* متن سمت چپ */
.hero-text {
  position: relative;
  z-index: 1;
  max-width: 45%;
  text-align: left;
}
.gold-text {
  margin: 0 0 16px;
  font-size: clamp(28px, 5.6vw, 60px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: .3px;
  background: linear-gradient(90deg, #ffd700, #ffec8b, #f5deb3, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: shine 6s linear infinite;
}
@keyframes shine { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* تصویر سمت راست */
.hero-image {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  opacity: 1;
  filter: brightness(1.6) contrast(1.3) saturate(1.2); /* پررنگ‌تر */
  z-index: 0;
}

/* دکمه شیشه‌ای */
button, 
a.primary, 
button.ghost {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 14px;
  border: 1px solid rgba(255, 215, 0, 0.8);
  background: rgba(255, 215, 0, 0.05); /* شیشه‌ای شفاف */
  color: #ffd700;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  backdrop-filter: blur(8px); /* حالت شیشه‌ای */
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.1) inset;
}

/* افکت هاور */
button:hover, 
a.primary:hover, 
button.ghost:hover {
  background: rgba(255, 215, 0, 0.15);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.6);
  transform: translateY(-2px);
}

/* وقتی کلیک میشه */
button:active, 
a.primary:active, 
button.ghost:active {
  transform: scale(0.96);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.8) inset;
}

/* ===== CARD (اتصال) ===== */
.card{
  width:100%;
  max-width:550px;
  margin: 60px auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.card h2{ margin: 6px 0 8px; font-size: 22px; font-weight: 900 }
.muted{ margin:0 0 16px; color: var(--muted); font-size: 13px }
.foot-note{ margin:14px 0 0; font-size:12px; color:var(--muted) }
.foot-note b{ color: var(--gold) }

/* اندازه سکه داخل کارت */
.hero-coin {
  width: 120px;   /* ← کوچیک/بزرگ کن */
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

/* ===== ریسپانسیو ===== */
@media (max-width: 980px){
  .hero { gap: 28px }
  .hero-text { max-width: 60% }
}
@media (max-width: 760px){
  .hero {
    min-height: 90vh;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .hero-text { max-width: 100% }
  .hero-image { opacity: .85; filter: brightness(1.4) contrast(1.2) saturate(1.1) }
}
.glass-btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 14px;
  border: 1px solid rgba(255, 215, 0, 0.9);
  background: rgba(255, 215, 0, 0.05); /* حالت شیشه‌ای */
  color: #ffd700;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.15) inset;
}

/* هاور */
.glass-btn:hover {
  background: rgba(255, 215, 0, 0.2);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
  transform: translateY(-3px);
}

/* کلیک */
.glass-btn:active {
  transform: scale(0.95);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8) inset;
}
/* Smooth scroll برای رفتن به کارت تلگرام */
html { scroll-behavior: smooth; }

/* CTA شیشه‌ای طلایی */
.cta-gold-glass{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:12px; font-weight:800; color:#fff;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,215,0,.6);
  box-shadow: inset 0 0 18px rgba(255,215,0,.18), 0 8px 22px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  margin-top: 12px;   /* فاصله از شعار */
}
.cta-gold-glass:hover{ 
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 22px rgba(255,215,0,.24), 0 10px 28px rgba(0,0,0,.42);
  transform: translateY(-1px);
}
.cta-gold-glass:active{ transform: translateY(0); }
/* Desktop: تصویر راست، متن چپ (مثل قبل) */
.hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(24px,5vw,60px);
  flex-direction:row-reverse;  /* تصویر راست */
}

/* Mobile: تصویر بالا، متن زیرِ تصویر */
@media (max-width: 1500px){
  .hero{
    flex-direction: column;    /* نه column-reverse */
    text-align: center;
    gap: 20px;
  }
  .hero .hero-image{
    width: min(250px, 120vw) !important;
    margin: 0 auto;            /* مرکز */
    height: auto !important;
  }
  .hero .hero-text{
    max-width: 92vw;
    margin: 0 auto;
  }
  .hero .hero-text .btn{
    margin-top: 12px;          /* فاصله زیر تیتر */
  }
}
/* Side golden rails */
.landing-wrap { position: relative; }

/* نوار طلایی پایه */
.gold-rail{
  position: fixed;
  top: 0;
  height: 100vh;
  width: 10px;
  pointer-events: none;      /* کلیک‌ها را مسدود نکند */
  z-index: 0;                /* پشتِ محتوا */
  background: linear-gradient(180deg,
    rgba(255,215,0,0) 0%,
    rgba(255,215,0,.55) 15%,
    rgba(255,215,0,.90) 50%,
    rgba(255,215,0,.55) 85%,
    rgba(255,215,0,0) 100%);
  box-shadow:
    0 0 20px rgba(255,215,0,.35),
    0 0 60px rgba(255,215,0,.18),
    inset 0 0 10px rgba(255,255,255,.25);
  border-radius: 12px;
}
.gold-rail.left  { left: max(8px, env(safe-area-inset-left)); }
.gold-rail.right { right: max(8px, env(safe-area-inset-right)); }

/* مطمئن شو بخش‌های اصلی بالای ریل‌ها هستند */
.hero, .card { position: relative; z-index: 1; }

/* موبایل: باریک‌تر/مخفی */
@media (max-width: 520px){ .gold-rail{ width: 6px; } }
@media (max-width: 360px){ .gold-rail{ display: none; } }
/* === Telegram card — mobile sizing only === */
@media (max-width: 480px){
  #telegram-card{
    width: min(360px, 94vw);     /* قبلاً بزرگ بود؛ جمع‌ترش کردیم */
    padding: 12px 12px;
    border-radius: 14px;
    gap: 6px;                    /* اگر .card با display:grid هست */
    margin-top: 8px;
  }
  #telegram-card .hero-coin{ width: 34px; height: 34px; }
  #telegram-card h2{ font-size: 18px; margin: 4px 0 2px; }
  #telegram-card .muted{ font-size: 12px; }
  #telegram-card .foot-note{ font-size: 11px; }

  /* دکمه‌ها تمام‌عرض و جمع‌وجور */
  #telegram-card .btn,
  #telegram-card .primary,
  #telegram-card .ghost{
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 10px;
  }
}

@media (max-width: 360px){
  #telegram-card{
    width: 92vw;                 /* خیلی موبایل‌های کوچک */
    padding: 10px 10px;
    gap: 6px;
  }
  #telegram-card h2{ font-size: 17px; }
  #telegram-card .btn,
  #telegram-card .primary,
  #telegram-card .ghost{
    padding: 9px 10px;
    font-size: 13px;
  }
}
/* === Size fix for coin inside the Telegram card === */

/* دسکتاپ و تبلت (کمی کوچک‌تر) */
#telegram-card .hero-coin{
  width: 70px;      /* ← عرض دلخواه */
  height: 70px;     /* ← ارتفاع دلخواه */
  object-fit: contain;
}

/* موبایل: باز هم جمع‌وجورتر */
@media (max-width: 480px){
  #telegram-card .hero-coin{
    width: 95px;    /* ← اگر هنوز بزرگ است، این اعداد را کمتر کن */
    height: 95px;
  }
}