:root {
  --bg: #07090d;
  --panel: #111820;
  --panel2: #0b1016;
  --cream: #f3f0e9;
  --grey: #aeb8bd;
  --dim: #68747b;
  --gold: #ff6b22;
  --gold-l: #ffad54;
  --orange: #ff6b22;
  --orange-d: #d94c18;
  --red: #e34b32;
  --fd: "Barlow Condensed", "Arial Narrow", sans-serif;
}

body {
  background: #07090d;
  color: var(--cream);
}

body::before {
  opacity: .45;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 38px 38px;
}

body::after {
  background: radial-gradient(55% 36% at 50% 0%, rgba(255,107,34,.18), transparent 72%), radial-gradient(40% 30% at 92% 90%, rgba(255,107,34,.07), transparent 70%);
}

.header {
  background: rgba(7,9,13,.9);
  border-bottom-color: rgba(255,107,34,.24);
}

.header-in { max-width: 1180px; padding-top: 14px; }
.logo { gap: 10px; }
.logo-icon {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 0 22px rgba(255,107,34,.25);
}
.logo-word { font-family: var(--fd); font-size: 25px; letter-spacing: .08em; }
.logo-badge {
  border-radius: 2px;
  padding: 8px 13px;
  background: var(--orange);
  color: #1b0e08;
  box-shadow: 0 0 22px rgba(255,107,34,.28);
}
.support-btn {
  border-radius: 2px;
  color: var(--gold-l);
  border-color: rgba(255,107,34,.42);
}
.support-btn:hover { background: rgba(255,107,34,.12); }

.nav { max-width: 1180px; }
.nav-tabs {
  border-radius: 3px;
  background: rgba(17,24,32,.9);
  border-color: rgba(255,107,34,.16);
}
.nav-tab { border-radius: 2px; font-family: var(--fd); letter-spacing: .09em; }
.nav-tab.active { background: var(--orange); color: #1b0e08; box-shadow: 0 0 20px rgba(255,107,34,.28); }
.nav-tab:hover { color: var(--gold-l); }

.ticker { background: #05070a; border-bottom-color: rgba(255,107,34,.16); }
.ticker-label { color: var(--gold-l); background: #05070a; }
.ticker-label i { background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.tk b { color: var(--gold-l); }

.stores { max-width: 1180px; margin-top: 20px; }
.stores-row { grid-template-columns: repeat(2, 1fr); border-radius: 3px; background: rgba(17,24,32,.9); border-color: rgba(255,107,34,.18); }
.store-btn { min-height: 72px; border-color: rgba(255,255,255,.08); }
.store-btn:hover { background: rgba(255,107,34,.1); }

.hero--shop {
  min-height: 370px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,107,34,.18);
  background-image: linear-gradient(90deg, rgba(7,9,13,.96) 0%, rgba(7,9,13,.86) 48%, rgba(7,9,13,.45) 100%), url('img/hero-shop.jpg');
  box-shadow: 0 28px 70px rgba(0,0,0,.34);
}
.hero--shop::after {
  display: none;
}
.hero-content { position: relative; z-index: 1; }
.hero-title { font-family: var(--fd); letter-spacing: .01em; }
.hero-title span { color: var(--orange); text-shadow: 0 0 30px rgba(255,107,34,.36); }
.id-form { border-radius: 3px; border-color: rgba(255,107,34,.5); background: rgba(7,9,13,.82); }
.id-form.ready { border-color: var(--orange); box-shadow: 0 0 24px rgba(255,107,34,.2); }
.find-btn, .pay-btn, .modal-btn { border-radius: 2px; background: var(--orange); color: #1b0e08; }
.find-btn:hover, .pay-btn:hover, .modal-btn:hover { background: var(--gold-l); }

.wrap { max-width: 1180px; }
.sec-title { font-family: var(--fd); letter-spacing: .02em; }
.card-block, .pack, .user-card, .sale { border-radius: 3px; border-color: rgba(255,107,34,.14); background: rgba(17,24,32,.9); }
.pack:hover, .pack.selected { border-color: var(--orange); box-shadow: 0 0 24px rgba(255,107,34,.18); }
.pack-price { border-radius: 2px; background: var(--orange); color: #1b0e08; }
.pack-price:hover { background: var(--gold-l); }
.pack-tag, .pack-badge { color: var(--gold-l); }
.order-total b, .ok { color: var(--gold-l); }
.pay-method.active { border-color: var(--orange); background: rgba(255,107,34,.1); }

.about-label, .c-label { color: var(--gold-l); }
.about-title, .c-title, .about-h2 { font-family: var(--fd); }
.f-card, .c-card { border-radius: 3px; border-color: rgba(255,107,34,.16); background: rgba(17,24,32,.86); }
.f-card:hover, .c-card:hover { border-color: var(--orange); }

.footer { border-top-color: rgba(255,107,34,.2); background: #05070a; }
.footer .logo-icon { width: 36px; height: 36px; }
.footer .logo-word { font-size: 20px; }
.footer .logo-badge { font-size: 10px; padding: 7px 10px; }
.foot-h { color: var(--gold-l); }
.foot-links a:hover { color: var(--gold-l); }

.paybar { border-top-color: rgba(255,107,34,.35); background: rgba(7,9,13,.94); }
.paybar-btn { border-radius: 2px; background: var(--orange); color: #1b0e08; }

@media (max-width: 620px) {
  .header-right .status { display: none; }
  .logo-word { font-size: 20px; }
  .logo-icon { width: 38px; height: 38px; }
  .logo-badge { padding: 7px 9px; font-size: 10px; }
  .hero--shop::after { right: -12%; opacity: .18; }
  .stores-row { grid-template-columns: repeat(2, 1fr); }
}
