/* style.css — для предоставленного HTML (тёмная тема, адаптивный, готов к использованию) */

:root{
  --bg: #0b0f12;
  --surface: #0f1417;
  --panel-bg: rgba(255,255,255,0.03);
  --panel-bg-strong: rgba(255,255,255,0.06);
  --accent: #00b894;
  --accent-strong: rgba(0,184,148,0.15);
  --danger: #ff5252;
  --muted: #9aa4ac;
  --text: #eef2f7;
  --radius: 12px;
  --gap: 16px;
  --max-width: 1100px;
  --transition: 160ms;
  --glass-border: rgba(255,255,255,0.02);
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;display:block}

/* Layout */
.container{max-width:var(--max-width);margin:0 auto;padding:28px}
.wrap{max-width:var(--max-width);margin:0 auto;padding:20px}

/* Top header */
header.top{
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:space-between;
  padding:14px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border-bottom:1px solid var(--glass-border);
}
.brand{display:flex;gap:6px;align-items:center}
.logo{display:flex;align-items:center;justify-content:center;}
.logo img{width: 62px;height: auto;}
.brandTitle{font-weight:700;margin-bottom: 4px;}
.brandSub{font-size:13px;color:var(--muted)}
.nav{display:flex;gap:12px;align-items:center}
.navLink{padding:8px 10px;border-radius:8px;color:var(--text);font-weight:500}
.navLink:hover{background:rgba(255,255,255,0.02)}

/* Ticker */
.ticker{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:8px 16px;border-bottom:1px solid var(--glass-border)}
.tickerInner{display:flex;gap:18px;flex-wrap:wrap;align-items:center;max-width:var(--max-width);margin:0 auto}
.tick{font-size:13px;color:var(--muted)}
.tick .rate-badge{font-weight:700;color:var(--text);margin-left:6px}
.tick.muted{color:var(--muted)}
.tick.warn{color:var(--danger)}

/* HERO */
.hero{padding:28px 20px}
.heroBox{max-width:980px;margin:0 auto}
.heroTopRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}
/* GEO inside HERO */
.geoTop{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.geoTitle{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  white-space: nowrap;
}

.geoHint{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.3;
  max-width: 260px;
}
.hero h1{margin:0 0 8px 0;font-size:28px}
.lead{margin:0;color:var(--muted);font-size:14px}

/* Trust / pills */
.trustLine{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:14px}
.trustLeft{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid var(--glass-border);font-size:13px}
.chip.ok{border-color:rgba(0,184,148,0.18);background:linear-gradient(90deg, rgba(0,184,148,0.06), rgba(0,184,148,0.02))}
.chip.warn{background:rgba(255,190,0,0.04);color:#ffd79b}

/* Country pills */
.countrySwitch{display:inline-flex;gap:6px}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);cursor:pointer;color:var(--text);font-weight:600;min-width:64px;transition:all var(--transition) ease}
.pill:hover{transform:translateY(-2px)}
.pill.active{background:linear-gradient(90deg,var(--accent-strong), rgba(0,184,148,0.05));border-color:rgba(0,184,148,0.18)}

/* geoHint */
.geoHint{font-size:13px;color:var(--muted);margin-top:8px}

/* Panels / generic */
.panel, .glass-card, .panel.strong{
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  border-radius:var(--radius);
  padding:14px;
  border:1px solid var(--glass-border);
  box-shadow:0 8px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.02);
}
.panel.terminal{padding:10px}

/* Rates */
.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sectionHead h2{margin:0}
.ratesTable{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:8px}
.row .k{color:var(--muted);font-size:14px}
.row .v{font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.delta{color:var(--muted);font-weight:500;font-size:13px}
.val{min-width:60px;display:inline-block}

/* Calculator */
.calc{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.fieldRow{display:flex;flex-direction:column;gap:8px}
.fieldLabel{font-size:13px;color:var(--muted)}
.fieldBox{display:flex;gap:10px;align-items:center}
.fieldLeft{flex:1}
.fieldRight{min-width:120px}
.input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--text)}
.fieldInput{font-size:16px}
.fieldSelect{padding:10px;background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.03);color:var(--text);border-radius:8px}

/* swap */
.swapRow{display:flex;justify-content:center;margin:8px 0}
.swapBtn{background:var(--panel-bg);border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.swap-icon{width:20px;height:20px;display:block;stroke:var(--text);fill:none}

/* Result display */
.fieldResult{padding:10px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));min-height:42px;display:flex;align-items:center;color:var(--text);font-weight:700}
.hint{margin-top:8px;color:var(--muted);font-size:13px}

/* About grid */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.trust-card .panelTitle{font-weight:700;margin-bottom:8px}
.trust-badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill-break{width:8px;height:1px}
.list .li{margin:8px 0;color:var(--muted)}

/* Footer */
.footer{padding:16px;text-align:center;color:var(--muted);margin-top:24px}

/* Floating actions */
.float-actions{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:800}
.apply-float{background:var(--accent);color:#072018;padding:10px 12px;border-radius:12px;border:none;cursor:pointer;font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,0.45)}
.tg-float{
  display:inline-flex;
  width:48px;
  height:48px;
  border-radius:12px;
  background:linear-gradient(135deg, #0A1F33, #0E2A45);
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 20px rgba(0,0,0,.55);
  transition:transform .15s ease, box-shadow .15s ease;
}

.tg-float:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.7);
}

.tg-svg{
  width:20px;
  height:20px;
  fill:#ffffff;
  stroke:none;
}

/* Lead button (hidden on desktop maybe) */
.lead-btn{position:fixed;left:18px;bottom:18px;padding:10px 12px;border-radius:12px;border:none;background:rgba(255,255,255,0.02);color:var(--text);cursor:pointer;z-index:790}

/* Sheet / modal */
.sheet{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:1000}
.sheet[aria-hidden="false"]{display:flex}
.sheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6)}
.sheet__panel{position:relative;background:var(--surface);width:100%;max-width:520px;border-radius:14px;padding:14px;margin:12px;border:1px solid var(--glass-border);box-shadow:0 24px 60px rgba(0,0,0,0.7)}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet__title{font-weight:700}
.sheet__form{margin-top:10px;display:flex;flex-direction:column;gap:12px}
.fBlock .fLabel{font-size:13px;color:var(--muted);margin-bottom:6px}
.fInput,.exInput{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--text)}
.fHint{font-size:13px;color:var(--muted)}
.sheet__actions{display:flex;justify-content:flex-end}
.btnPrimary{background:var(--accent);color:#042018;padding:10px 14px;border-radius:10px;border:none;font-weight:700;cursor:pointer}

/* Success modal */
.successModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1100}
.successModal[aria-hidden="false"]{display:flex}
.successModal__box{background:var(--surface);border-radius:12px;padding:18px;max-width:420px;width:90%;box-shadow:0 18px 50px rgba(0,0,0,0.7);border:1px solid var(--glass-border)}
.successModal__title{font-weight:700;margin-bottom:10px}
.successRow{margin:6px 0}

/* Accessibility focus */
.pill:focus-visible,.swapBtn:focus-visible,.apply-float:focus-visible,.btnPrimary:focus-visible,.sheet__close:focus-visible{outline:2px solid rgba(0,184,148,0.12);outline-offset:2px}

/* Small helpers */
.muted{color:var(--muted)}
.small{font-size:13px}
.center{text-align:center}

/* Responsive */
@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  header.top{flex-direction:column;align-items:flex-start;gap:8px}
  .trustRight{align-items:flex-end}
  .ratesTable{font-size:14px}
}
@media (max-width:600px){
  .nav{display:none}
  .hero h1{font-size:22px}
  .trustLine{flex-direction:column;align-items:stretch}
  .fieldRight{min-width:100px}
  .float-actions{right:12px;bottom:12px}
  .lead-btn{left:12px;bottom:12px}
  .sheet__panel{margin:8px;border-radius:12px}
}

/* Minor polish */
input::placeholder{color:rgba(255,255,255,0.25)}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none}
button{font-family:inherit}

/* If any element has inline background watermark in old CSS, hide hero watermark on small screens */
@media (max-width:520px){
  .hero::before{display:none}
}
/* === APPLY MODAL — CENTERED === */
#applyModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none; /* включается через JS */
}

#applyModal[aria-hidden="false"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* затемнение фона */
#applyModal .sheet_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}

/* сама модалка */
#applyModal .sheet_panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  background: #0f1623;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  overflow-y: auto;
}
/* =========================
   GEO PILLS (UA / PL / EU)
========================= */

.geoPills {
  display: flex;
  gap: 6px;
}

.geoPill {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.geoPill:hover {
  background: rgba(255,255,255,.12);
}

.geoPill.is-active {
  background: #1fbf75;
  border-color: #1fbf75;
  color: #08140e;
  font-weight: 600;
}
/* ===== Apply modal currency pills (FORCE) ===== */
#applyModal button,
#applyModal .pill,
#applyModal .currency,
#applyModal .currencyBtn,
#applyModal .currencyTag,
#applyModal .exchange-currency,
#applyModal .selectCurrencyBtn {
  min-width: 68px !important;
  height: 38px !important;
  padding: 0 14px !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  border-radius: 12px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #d7e7ff !important;
}

#applyModal button:hover,
#applyModal .pill:hover,
#applyModal .currency:hover,
#applyModal .currencyBtn:hover,
#applyModal .currencyTag:hover,
#applyModal .exchange-currency:hover,
#applyModal .selectCurrencyBtn:hover {
  background: rgba(80,160,255,.15) !important;
  border-color: rgba(80,160,255,.45) !important;
}

#applyModal .active,
#applyModal .is-active,
#applyModal [aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(80,160,255,.45), rgba(40,120,220,.45)) !important;
  border-color: rgba(120,190,255,.9) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(120,190,255,.25), 0 6px 18px rgba(80,160,255,.35) !important;
}
/* ===== Apply Modal: currency selects (USDT / USD) ===== */
#applyModal select.exSelect,
#applyModal .exSelect,
#applyModal select#applyFrom,
#applyModal select#applyTo{
  -webkit-appearance: none;
  appearance: none;

  height: 32px;              /* ↓ было 38 */
  min-width: 64px;           /* ↓ было 78 */
  padding: 0 10px;           /* ↓ было 12 */

  border-radius: 10px;       /* ↓ было 12 */
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,15,25,.55);

  color: #fff;
  font-size: 12px;           /* ↓ было 13 */
  font-weight: 600;          /* ↓ было 700 */
  letter-spacing: .15px;     /* ↓ было .2 */

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* focus */
#applyModal select.exSelect:focus,
#applyModal .exSelect:focus,
#applyModal select#applyFrom:focus,
#applyModal select#applyTo:focus{
  outline: none;
  border-color: rgba(80,160,255,.6);
  box-shadow:
    0 0 0 3px rgba(80,160,255,.16),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* выглядят как кнопки */
#applyModal select.exSelect{
  background-image: none;
}

/* options */
#applyModal select.exSelect option{
  color: #111;
}
/* ===== Apply Modal typography (FINAL) ===== */

/* Заголовок */
#applyModal .sheet__title{
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #ffffff;
  margin-bottom: 2px;
}

/* Подзаголовок */
#applyModal .sheet__sub{
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  line-height: 1.4;
  margin-bottom: 16px;
}

/* Лейблы секций */
#applyModal .fLabel,
#applyModal .exLabel{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}

/* Небольшой визуальный отступ между блоками */
#applyModal .exBlock{
  margin-bottom: 14px;
}
/* ===== Apply Modal: centered accent title ===== */
#applyModal .sheet__head--center{
  position: relative;
  text-align: center;
  padding: 18px 44px 14px;
}

#applyModal .sheet__title--accent{
  position: relative;
  display: inline-block;

  font-size: 18px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #fff;
}

/* декоративные линии */
#applyModal .sheet__title--accent::before,
#applyModal .sheet__title--accent::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 42px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.45)
  );
}

#applyModal .sheet__title--accent::before{
  right: 100%;
  margin-right: 14px;
}

#applyModal .sheet__title--accent::after{
  left: 100%;
  margin-left: 14px;
}

/* лёгкое свечение */
#applyModal .sheet__title--accent{
  text-shadow:
    0 0 12px rgba(80,160,255,.25);
}

/* крестик аккуратно */
#applyModal .sheet__close{
  position: absolute;
  right: 14px;
  top: 14px;
}
/* ===== Apply Modal: Submit button (premium) ===== */
#applyModal .sheet_actions{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

#applyModal .btnPrimary,
#applyModal button[type="submit"]{
  min-width: 220px;
  height: 44px;

  border-radius: 14px;
  border: 1px solid rgba(120,200,255,.45);

  background:
    linear-gradient(
      180deg,
      rgba(120,200,255,.22),
      rgba(60,140,220,.18)
    ),
    rgba(20,30,45,.85);

  color: #eaf4ff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;

  cursor: pointer;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
  
  box-shadow:
    0 8px 22px rgba(80,160,255,.22),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* hover */
#applyModal .btnPrimary:hover,
#applyModal button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px rgba(80,160,255,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* active */
#applyModal .btnPrimary:active,
#applyModal button[type="submit"]:active{
  transform: translateY(0) scale(.98);
  box-shadow:
    0 6px 14px rgba(80,160,255,.25),
    inset 0 2px 4px rgba(0,0,0,.25);
}
/* ===== Apply Modal: UI labels (Region / You give / You get / Telegram) ===== */
#applyModal .fLabel,
#applyModal .exLabel,
#applyModal .label,
#applyModal .sheet_form label{
  display: block;

  margin-bottom: 6px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(255,255,255,.55);

  user-select: none;
}

/* чуть плотнее внутри блоков */
#applyModal .fBlock{
  margin-bottom: 14px;
}

/* TELEGRAM можно сделать ещё спокойнее */
#applyModal .fLabel.telegram,
#applyModal .exLabel.telegram{
  color: rgba(255,255,255,.45);
}

/* если где-то label слишком жирный — приглушаем */
#applyModal .fLabel strong,
#applyModal .exLabel strong{
  font-weight: 600;
}
/* SUCCESS MODAL OVERLAY */
.successModal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.successModal[aria-hidden="false"]{
  display: flex;
}

.successModal_box{
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg,#1a1f2a,#141821);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  text-align: center;
}
/* ===== ABOUT / TRUST (О нас) ===== */

/* Заголовок секции "О нас" — выделяем */
#about .sectionHead{
  max-width: 980px;
  margin: 0 auto 14px;
  padding: 0 4px;
}
#about .sectionHead h2{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 18px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;

  color: rgba(255,255,255,.96);
  margin: 0;
}
#about .sectionHead h2::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(134,247,182,.95);
  box-shadow: 0 0 18px rgba(134,247,182,.35);
}

/* Сетка 2 карточки — по центру и "не пустая" */
#about .trust-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;

  max-width: 980px;
  margin: 0 auto;
}

/* База карточки */
#about .trust-card{
  position: relative;
  padding: 16px 18px 18px;
  border-radius: 16px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 14px 36px rgba(0,0,0,.32);

  /* ключевое: убираем "пустоту сверху" */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  /* чтобы карточки выглядели одинаково "плотно" */
  min-height: 210px;
}

/* Лёгкая "дорогая" кромка */
#about .trust-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(80,160,255,.18), transparent 55%),
    radial-gradient(420px 220px at 90% 10%, rgba(134,247,182,.14), transparent 60%);
  opacity: .9;
}

/* Заголовок карточки */
#about .trust-card .panelTitle{
  position: relative;
  z-index: 1;

  font-size: 14px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;

  color: rgba(255,255,255,.95);
  margin-bottom: 10px;
  padding-bottom: 10px;

  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Бейджи */
#about .trust-badges{
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  margin: 10px 0 10px;
}

#about .trust-badges .pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,15,25,.35);

  font-weight: 800;
  font-size: 12px;
  letter-spacing: .25px;
}

#about .trust-badges .tg-link{
  color: rgba(134,247,182,.95);
  text-decoration: none;
  font-weight: 900;
}

/* Левый список (плотнее) */
#about .trust-card .list{
  position: relative;
  z-index: 1;

  display: grid;
  gap: 8px;
  margin-top: 6px;
}

#about .trust-card .li{
  font-size: 13px;
  line-height: 1.25;
  color: rgba(255,255,255,.92);
}

/* Низ карточки — аккуратный UI-hint */
#about .trust-card .small.muted{
  position: relative;
  z-index: 1;

  margin-top: auto;            /* прижимает подсказку вниз = выглядит солидно */
  padding-top: 12px;

  border-top: 1px dashed rgba(255,255,255,.10);

  font-size: 12px;
  letter-spacing: .25px;
  color: rgba(255,255,255,.62);
}

/* Шаги справа — убираем "пусто сверху" и делаем объёмнее */
#about .steps{
  position: relative;
  z-index: 1;

  display: grid;
  gap: 10px;
  margin-top: 10px;
}

#about .step{
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;

  font-size: 13px;
  line-height: 1.25;
  color: rgba(255,255,255,.94);
}

#about .step .n{
  width: 26px;
  height: 26px;
  border-radius: 10px;

  display: grid;
  place-items: center;

  font-weight: 900;
  font-size: 12px;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,15,25,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Адаптив */
@media (max-width: 860px){
  #about .trust-grid{
    grid-template-columns: 1fr;
    max-width: 620px;
  }
  #about .trust-card{
    min-height: auto;
  }
}
/* ===== RATES: section head (title + subtitle under it) ===== */
.ratesHead{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 6px;
  margin-bottom: 10px;
}

.ratesHead h2{
  margin: 0;
}

.ratesSub{
  font-size: 12.5px;
  opacity: .72;
  letter-spacing: .2px;
}
/* ===== RATES: A (clean premium list) ===== */
#rates .panel.terminal{
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}

#rates .ratesTable{
  display: grid;
  gap: 8px;
}

#rates .row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

#rates .row:nth-child(odd){
  background: rgba(255,255,255,.035);
}

#rates .row:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.12);
}

#rates .k{
  font-weight: 700;
  letter-spacing: .2px;
  opacity: .92;
}

#rates .v{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#rates .v .val{
  min-width: 86px;
  text-align: right;
  opacity: .95;
}

/* мелкий статус снизу */
#rates #ratesStatus{
  margin-top: 10px;
  opacity: .65;
  font-size: 12px;
}
#rates .row{
  background: none;
  border: none;
  padding-left: 0;
  padding-right: 0;
}

#rates .k{
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
}#rates .row:hover{
  background: rgba(255,255,255,.06);
}
/* =========================
   CALCULATOR (OTC terminal look)
   ========================= */

#calc .calcPanel{
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22,28,34,.88), rgba(14,18,22,.92));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}

#calc .calcGrid{
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  grid-template-areas:
    "give swap get"
    "meta meta meta";
  gap: 14px;
  align-items: center;
}

#calc .calcField{ min-width: 0; }

#calc .calcLabel{
  font-size: 12px;
  opacity: .75;
  letter-spacing: .2px;
  margin-bottom: 8px;
}

#calc .calcRow{
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 10px;
  align-items: center;
}

#calc .calcInput,
#calc .calcSelect{
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,15,20,.55);
  color: rgba(255,255,255,.92);
  outline: none;
}

#calc .calcInput{
  padding: 0 12px;
  font-size: 15px;
}

#calc .calcInput::placeholder{
  color: rgba(255,255,255,.45);
}

#calc .calcSelect{
  padding: 0 10px;
  font-size: 13px;
  cursor: pointer;
}

#calc .calcSelect:focus,
#calc .calcInput:focus{
  border-color: rgba(80,160,255,.35);
  box-shadow: 0 0 0 3px rgba(80,160,255,.10);
}

#calc .calcSwap{
  grid-area: swap;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,15,20,.35);
  color: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  font-size: 18px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#calc .calcSwap:hover{
  transform: translateY(-1px);
  border-color: rgba(80,160,255,.30);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

#calc .calcSwap:active{
  transform: translateY(0) scale(.98);
}

#calc .calcMeta{
  grid-area: meta;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.12);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

#calc #calcRate{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .2px;
}

#calc #calcHint{
  opacity: .7;
}

/* адаптив */
@media (max-width: 820px){
  #calc .calcGrid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "give"
      "swap"
      "get"
      "meta";
  }
  #calc .calcSwap{
    width: 100%;
    height: 44px;
    border-radius: 12px;
  }
  #calc .calcRow{
    grid-template-columns: 1fr 110px;
  }
}
#calc .calcSwap{
  background: radial-gradient(
    circle at 30% 30%,
    rgba(80,160,255,.35),
    rgba(10,15,20,.6)
  );
}

#calc .calcSwap:hover{
  box-shadow:
    0 0 0 1px rgba(80,160,255,.45),
    0 12px 30px rgba(80,160,255,.25);
}
.site-footer{
  grid-column: 1 / -1;   /* занять всю ширину grid (обе колонки) */
  justify-self: center;  /* центр внутри grid */
  text-align: center;

  padding: 18px 12px;
  font-size: 14px;
  color: #aaa;
}
/* ===== MOBILE HERO FIX ===== */
@media (max-width: 520px){

  .hero{
    flex-direction: column !important;
    gap: 20px;
  }

  .heroLeft,
  .heroRight{
    width:100% !important;
  }

  .countrySwitch{
    display:flex;
    gap:6px;
  }

  .countrySwitch button{
    flex:1;
    font-size:13px;
    padding:8px 0;
  }

  .official{
    width:100%;
    font-size:14px;
    padding:12px;
    text-align:center;
  }

  .official span{
    word-break:break-word;
  }

  .heroRight .geoHint{
    font-size:13px;
    line-height:1.3;
  }

}