:root{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#ef4444; /* красная подчеркивающая плашка под 'PUMP' */
  --green:#10b981;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 100% -50%, #fff, transparent 70%),
    radial-gradient(900px 600px at -20% 0%, #eef2ff, transparent 70%),
    var(--bg);
}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:0 28px}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;min-height:64px;
}
.left{display:flex;align-items:center;gap:36px}
.brand{display:flex;align-items:center;gap:12px}
.logo{ height:24px; width:auto; }
.brand-col{display:flex;flex-direction:column;gap:2px}
.brand-name{font-weight:800;letter-spacing:.3px;margin-top:1px}
.mini-ticker{font-size:12px;color:#0f172a}
.mini-ticker .price{font-weight:700}
.mini-ticker .change{font-weight:800;color:var(--green);margin-left:2px}

.nav{display:flex;gap:22px}
.navlink{
  position:relative;color:#1f2937;text-decoration:none;font-weight:600
}
.navlink.active::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:-14px;width:26px;height:3px;background:var(--accent);border-radius:2px;
}

.right{display:flex;align-items:center;gap:14px}
.muted{color:var(--muted);text-decoration:none}
.sep{color:#c0c5d0}
.icon-btn{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:#fff;position:relative;cursor:pointer;
}
.icon-btn .dot{
  position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:#ef4444;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:8px;font-weight:700;border:1px solid #111;cursor:pointer
}
.btn-black{background:#111;color:#fff;border-color:#111}
.btn-lg{padding:12px 18px;border-radius:10px}

/* Hero */
.hero{padding:36px 0 22px}
.hero-inner{
  display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;
}
.hero-text h1{margin:10px 0 14px;font-size:22px;letter-spacing:-.5px}
.accent{
  position:relative;font-weight:600;padding:0 .18em;
  background:linear-gradient(transparent 46%, var(--accent) 0);
}
.hero-text p{color:#4b5563;line-height:1.7;max-width:58ch;margin:0 0 22px}
.hero-illustration{
  display:flex;align-items:center;justify-content:center;
  min-height:340px;background:var(--panel);border:1px dashed #d6dae6;
  border-radius:14px;box-shadow:0 12px 35px rgba(25,35,75,.08);overflow:hidden
}
.hero-illustration img{max-width:100%;height:auto;opacity:.96;animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.hero-text {
  text-align: center;            /* центрирует текст, заголовок и абзац */
  display: flex;
  flex-direction: column;        /* располагает элементы вертикально */
  align-items: center;           /* центрирует по горизонтали */
  justify-content: center;       /* если хочешь — выровняет по вертикали внутри родителя */
}
.hero-text .btn {
  margin-top: 10px;              /* отступ от текста */
  display: inline-flex;
  justify-content: center;
}


/* Stats strip */
.stats-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{
  display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr 1px 1fr;align-items:stretch;gap:0;
  padding:22px 0;
}
.divider{background:var(--line)}
.stat{padding:12px 24px}
.label{color:#6b7280;font-size:14px;margin-bottom:4px}
.value{font-size:32px;font-weight:800;letter-spacing:.2px}

/* Placeholders */
.section-placeholder{padding:48px 0}
.section-placeholder h2{margin:0 0 10px}
.section-placeholder p{color:#4b5563}

/* Footer */
.footer{padding:36px 0;color:#6b7280;text-align:center;border-top:1px solid var(--line);background:#fff}

/* Responsive */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr;gap:18px}
  .stats-grid{grid-template-columns:1fr;row-gap:10px}
  .divider{display:none}
  .value{font-size:28px}
}

.topbar .nav { display: none !important; }
#connectBtn, .cta { display: none !important; }

/* === УБРАТЬ "КАРТОЧКУ" в герое — делаем как у TronScan === */
.hero { padding: 28px 0 18px; } /* чуть меньше отступ сверху */
.hero-illustration{
  background: transparent;      /* без белой плашки */
  border: 0;
  box-shadow: none;
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-illustration img{
  max-width: 100%; height: auto;
  border-radius: 12px;          /* аккуратные уголки */
  box-shadow: 0 8px 26px rgba(20,30,60,.10);
  opacity: .96;
}

/* === СДЕЛАТЬ Register / Log In МЕНЬШЕ и аккуратнее === */
.right { gap: 10px; }
.muted {
  font-size: 13px;              /* уменьшили размер */
  color: #9aa3b2;
  font-weight: 500;
}
.muted:hover { color: #6b7280; }
.sep { color: #d1d5db; margin: 0 4px; opacity: .6; transform: translateY(-1px); }

/* Иконки справа чуть компактнее */
.icon-btn { width: 30px; height: 30px; }
.icon-btn svg { opacity: .7; }
.icon-btn:hover svg { opacity: 1; }
.icon-btn .dot{
  position:absolute; top:6px; right:6px; width:6px; height:6px;
  border-radius:50%; background:#ef4444;
}

/* Шапка без «лишнего блока»: тонкая, полупрозрачная, как у TronScan */
.topbar{
  position: sticky; top:0; z-index:30;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--line);
}

/* убираем линию под хедером */
.topbar{
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.topbar{
  background: transparent !important;   /* убираем белую подложку */
  backdrop-filter: none !important;      /* отключаем “матовое стекло” */
  border: 0 !important;                  /* чтобы не было линии */
  box-shadow: none !important;           /* и тени */
}

/* стекуем лого и тикер вертикально */
.brand--stack{
  display: flex;
  flex-direction: column;   /* ← главное */
  align-items: flex-start;
  gap: 4px;
}

/* стили тикера (как было) */
.mini-ticker{ font-size:12px; line-height:1; color:#0f172a; }
.mini-ticker .price{ font-weight:700; }
.mini-ticker .change{ font-weight:800; color:var(--green); margin-left:4px; }

/* если хочешь, чтобы тикер начинался чуть правее — под словом, а не под кубиком */
.brand--stack .mini-ticker{ padding-left: 28px; } /* можно подогнать 20–36px или убрать строку */

/* === Секция метрик без белой "карточки" === */
.stats-strip{
  background: transparent !important;    /* убираем белую плашку */
  border: 0 !important;                   /* убираем верх/низ линию */
  box-shadow: none !important;
}

/* сетка компактнее и без внутренних паддингов, как простой текст на фоне страницы */
.stats-grid{
  padding: 8px 0 !important;              /* было 22px — сделаем легче */
  gap: 24px;                               /* расстояние между колонками */
}

/* сами элементы без "карточности" */
.stat{
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* убираем вертикальные разделители */
.divider{ display: none !important; }

/* косметика под TronScan */
.label{ color:#9aa3b2; font-size:13px; margin-bottom:6px; }
.value{ font-size:28px; font-weight:800; letter-spacing:.2px; }

/* на всякий случай отключим любые псевдо-элементы, если кто-то рисует "полоску" */
.stats-strip::before,
.stats-strip::after{ content:none !important; border:0 !important; box-shadow:none !important; }

/* Кнопки-иконки как на TronScan */
.icon-btn{
  position: relative;
  width: 34px; height: 34px;               /* чуть больше, круглая */
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e7eb;               /* светлый бордер */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);   /* лёгкая тень */
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.icon-btn svg{
  width: 18px; height: 18px;
  stroke: #6b7280;                          /* серый как на рефе */
  stroke-width: 1.8;                        /* тоньше линия */
  opacity: .9;
}
.icon-btn:hover{ border-color: #d1d5db; }
.icon-btn:hover svg{ stroke: #374151; opacity: 1; }

/* Красная точка — чуть вынесена наружу и с белым ободком */
.icon-btn .dot{
  position: absolute;
  top: -2px;                                /* выносим за пределы круга */
  right: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px #fff;               /* белая окантовка как у TronScan */
}

/* Расстояния справа */
.right{ gap: 12px; }


/* === iPhone/мобайл базовые правки === */
html { -webkit-text-size-adjust: 100%; }          /* корректный размер текста на iOS */
body {
  padding-top: env(safe-area-inset-top);          /* отступ у «чёлки» */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
* { -webkit-tap-highlight-color: transparent; }    /* без серого подсвета тапов */

/* Мобильный контейнер — как у TronScan (меньше поля) */
@media (max-width: 480px){
  .container{ padding: 0 16px; }                   /* было 28px */
  .topbar-inner{ min-height: 56px; }               /* ниже шапку */
  .left{ gap: 14px; }                              /* меньше зазор слева */

  /* Лого + тикер под ним */
  .brand--stack .logo{ height: 22px; }
  .brand--stack .mini-ticker{
    font-size: 12px;
    line-height: 1.05;
    padding-left: 22px;                            /* подвинь 18–26 по вкусу */
  }

  /* Register | Log In + иконки */
  .right{ gap: 8px; }
  .muted{ font-size: 12px; color:#a3acb9; }        /* как на рефе — светлые */
  .sep{ margin: 0 6px; opacity: .5; }              /* тонкий разделитель */

  .icon-btn{
    width: 36px; height: 36px;                     /* удобная «тап-зона» */
    border: 1px solid #e6e9ef;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    background:#fff;
  }
  .icon-btn svg{ width:18px; height:18px; stroke:#6b7280; stroke-width:1.8; }
  .icon-btn .dot{
    top:-2px; right:-2px;                          /* точка чуть «снаружи» */
    width:8px; height:8px; box-shadow:0 0 0 2px #fff; border-radius:50%;
  }

  /* Герой — одна колонка, центр */
  .hero{ padding: 16px 0 12px; }
  .hero-inner{ display:grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-text{ text-align:center; align-items:center; }
  .hero-text h1{ font-size: 28px; letter-spacing:-.6px; margin: 6px 0 10px; }
  .hero-text p{ font-size: 16px; line-height: 1.6; margin: 0 0 12px; }
  .hero-illustration{ min-height:0; }
  .hero-illustration img{ width: 88%; max-width: 420px; border-radius:12px; box-shadow: 0 8px 24px rgba(20,30,60,.10); }

  /* Полоска метрик — в столбик, легко и без карточки */
  .stats-strip{ background: transparent !important; border:0 !important; box-shadow:none !important; }
  .stats-grid{
    display: grid;
    grid-template-columns: 1fr;                    /* одна колонка */
    row-gap: 14px; padding: 8px 0 !important;
  }
  .divider{ display:none !important; }
  .stat{ padding: 0 !important; }
  .label{ font-size:12px; color:#9aa3b2; margin-bottom:4px; }
  .value{ font-size:22px; font-weight:800; }
}

/* Доп. твики для очень узких (375px и меньше — iPhone mini/SE) */
@media (max-width: 375px){
  .brand--stack .mini-ticker{ padding-left: 18px; } /* подгон под слово TRONSCAN */
  .muted{ font-size: 11.5px; }
  .icon-btn{ width: 34px; height: 34px; }
  .hero-text h1{ font-size: 26px; }
  .hero-illustration img{ width: 92%; }
}

/* === Quick Stats 2x2 без "карточки" === */
.quick-stats{ background: transparent; padding: 10px 0 22px; }

.qs-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  row-gap: 16px;
  align-items: start;
}

.qs-item .qs-label{
  color: #9aa3b2;
  font-size: 13px;
  margin-bottom: 6px;
}

.qs-item .qs-value{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #111827;
}

/* горизонтальная линия между двумя строками */
.qs-divider{
  grid-column: 1 / -1;
  height: 1px;
  background: #e5e7eb;
  margin: 4px 0 8px;
}

/* мобильная адаптация */
@media (max-width: 640px){
  .qs-grid{ grid-template-columns: 1fr; row-gap: 18px; }
  .qs-item .qs-value{ font-size: 22px; }
  .qs-divider{ margin: 6px 0; }
}


/* === Quick Stats: белый блок + мелкий шрифт, как у TronScan === */
.quick-stats{
  background:#fff;                           /* белая полоса */
  border-top:1px solid #e5e7eb;              /* тонкая линия сверху */
  border-bottom:1px solid #e5e7eb;           /* тонкая линия снизу */
}

.qs-grid{
  padding:16px 0;                            /* компактнее */
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:48px;
  row-gap:14px;
  align-items:start;
}

/* подпись меньше и светлее */
.qs-item .qs-label{
  color:#9aa3b2;
  font-size:12px;
  margin-bottom:6px;
}

/* число меньше */
.qs-item .qs-value{
  font-size:21px;                            /* было крупнее → уменьшили */
  line-height:1.2;
  font-weight:600;
  letter-spacing:.1px;
}

/* разделительная линия между строками */
.qs-divider{
  grid-column:1 / -1;
  height:1px;
  background:#e5e7eb;
  margin:10px 0 6px;
}

/* адаптив под iPhone/мобайл */
@media (max-width:640px){
  .qs-grid{ grid-template-columns:1fr; row-gap:16px; padding:12px 0; }
  .qs-item .qs-value{ font-size:22px; }      /* ещё компактнее на телефоне */
  .qs-divider{ margin:8px 0; }
}

/* === Центрируем Quick Stats === */

/* 1) Центрируем контейнер блока и делаем комфортную ширину */
.quick-stats .container{
  max-width: 980px;            /* можно 920–1040 по вкусу */
  margin: 0 auto;              /* центр по странице */
}

/* 2) Центрируем элементы сетки */
.qs-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  column-gap: 56px;            /* расстояние между лев/прав колонками */
  row-gap: 16px;
  justify-items: center;       /* центрируем содержимое ячеек по горизонтали */
  align-items: center;         /* и по вертикали */
  text-align: center;          /* центрируем текст */
}

/* 3) Линия-разделитель на всю ширину блока */
.qs-divider{
  grid-column: 1 / -1;
  width: 100%;
  height: 1px;
  background: #e5e7eb;
  margin: 8px 0;
}

/* Мобайл: одна колонка — всё остаётся по центру */
@media (max-width: 640px){
  .qs-grid{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 14px;
  }
}

/* === Governance teaser (текст сразу после TRX Staked) === */
.gov-teaser{
  text-align: center;
  padding: 22px 0 10px;
  background: transparent;
}
.gov-title{
  margin: 0 0 6px;
  font-size: 28px;              /* можно 26–30 по вкусу */
  font-weight: 800;
  color: #111827;
}
.gov-sub{
  margin: 0 0 16px;
  font-size: 14px;
  color: #9aa3b2;
}
.gov-headline{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.badge{
  background: #f59e0b;          /* оранжевый бейдж */
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.5;
}

/* === Белый блок с иллюстрацией по центру === */
.feature-visual{
  background: #fff;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 18px 0 28px;
}
.feature-visual .container{
  max-width: 980px;             /* ширина как у центра */
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.feature-img{
  width: 100%;
  max-width: 720px;             /* подгони 640–820 */
  height: auto;
  border-radius: 14px;
  filter: drop-shadow(0 8px 24px rgba(20,30,60,.08));
}

/* Мобайл-подгон под iPhone */
@media (max-width: 480px){
  .gov-title{ font-size: 22px; }
  .gov-headline{ font-size: 16px; }
  .feature-img{ max-width: 560px; border-radius: 12px; }
}

/* === Governance section — как у TronScan === */
.gov-sections{
  padding: 22px 0 28px;
  background: transparent;
}
.gov-sections .container{
  max-width: 980px;          /* центрируем и сужаем блок */
  margin: 0 auto;
  text-align: center;
}

/* Заголовки */
.gov-title{
  margin: 0 0 6px;
  font-size: 28px;           /* 26–30 по вкусу */
  font-weight: 800;
  color: #111827;
}
.gov-sub{
  margin: 0 0 16px;
  font-size: 14px;
  color: #9aa3b2;
}
.gov-headline{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.badge{
  background: #f59e0b; color: #fff;
  font-weight: 700; font-size: 12px;
  padding: 2px 8px; border-radius: 999px;
}

/* Карточки по очереди */
.gov-card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(20,30,60,.06);
  padding: 18px 18px 20px;
  margin: 14px 0;            /* промежуток между карточками */
  text-align: left;          /* текст как на рефе */
}
.gov-card h4{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}
.gov-card p{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
}
.gov-img{
  width: 100%; max-width: 860px; height: auto;
  display: block; margin: 0 auto;
  border-radius: 12px;
  filter: drop-shadow(0 8px 24px rgba(20,30,60,.08));
}

/* Мобайл (iPhone) */
@media (max-width: 480px){
  .gov-title{ font-size: 22px; }
  .gov-headline{ font-size: 16px; }
  .gov-card{ padding: 14px; }
  .gov-card h4{ font-size: 16px; }
  .gov-card p{ font-size: 13.5px; }
  .gov-img{ border-radius: 10px; }
}

/* === Центрируем Governance и задаём "наш" размер === */
.gov-sections .container{
  max-width: 900px;         /* ширина всего блока по центру (подгони 860–980) */
  margin: 0 auto;
  text-align: center;
}

/* Карточки — по центру и одной колонкой, комфортная ширина */
.gov-card{
  max-width: 740px;         /* ширина карточки (подгони 680–780) */
  margin: 14px auto;        /* центрируем карточку */
  text-align: center;       /* центрируем заголовок/текст */
  display: flex;
  flex-direction: column;
  align-items: center;      /* центрируем всё внутри */
}

/* Текст в карточках — не растягиваем на всю ширину */
.gov-card h4,
.gov-card p{
  max-width: 62ch;          /* читаемая ширина строки */
}

/* Картинки — строго под "наш размер" и по центру */
.gov-img{
  width: 100%;
  max-width: 680px;         /* "наш" размер для иллюстраций */
  height: auto;
  margin: 8px auto 0;
  display: block;
}

/* Заголовки сверху и бейдж уже центрируются через .container; оставим мобильный твик */
@media (max-width: 480px){
  .gov-sections .container{ max-width: 100%; }
  .gov-card{ max-width: 94%; }
  .gov-img{ max-width: 100%; }
}

/* === Новый футер под PUMP (как у TronScan) === */
.site-footer{ background:#fff; border-top:1px solid var(--line); }
.footer-top{
  padding:28px 0;
  display:grid;
  grid-template-columns: 1.2fr 2fr; /* слева бренд, справа 3 колонки */
  gap:32px;
}
.ft-brand{ display:flex; flex-direction:column; gap:8px; }
.ft-logo{ height:24px; width:auto; }
.ft-tag{ margin:0; color:#6b7280; font-size:14px; }

/* Desktop как у TronScan: 2 колонки сверху + Resources во всю ширину строкой ниже */
.ft-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* две колонки */
  column-gap: 40px;
  row-gap: 16px;
  align-items: start;
}

/* About Us (1) и Services (2) — остаются в своей колонке */
.ft-cols .ft-col:nth-child(1){ grid-column: 1; }
.ft-cols .ft-col:nth-child(2){ grid-column: 2; }

/* Resources (3) — на отдельной строке во всю ширину */
.ft-cols .ft-col:nth-child(3){ grid-column: 1 / -1; }

.ft-col h5{
  margin:0 0 10px;
  font-size:14px;
  font-weight:700;
  color:#111827;
}
.ft-link{
  display:block;
  margin:6px 0;
  font-size:14px;
  color:#6b7280;
  text-decoration:none;
}
.ft-link:hover{ color:#374151; }

/* Соц-кнопки */
.ft-social{ display:flex; gap:14px; margin-top:16px; }
.soc{
  width:28px; height:28px;
  border:1px solid #e5e7eb; border-radius:50%;
  background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.soc svg{ width:16px; height:16px; color:#6b7280; }
.soc:hover{ border-color:#d1d5db; }

/* Нижняя плашка */
.footer-bottom{
  border-top:1px solid #f0f2f6;
  padding:12px 0;
}
.footer-bottom p{
  margin:0; color:#9aa3b2; font-size:12px;
}

/* Адаптив */
@media (max-width: 900px){
  .footer-top{ grid-template-columns: 1fr; }
  .ft-cols{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .ft-cols{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px){
  .ft-cols{ grid-template-columns: 1fr; }
  .ft-social{ justify-content:flex-start; }
}

/* === FOOTER — Desktop/Tablet как сейчас, Mobile как на TronScan === */

/* Базовые стили (десктоп/планшет) — оставляем */
.site-footer{ background:#fff; border-top:1px solid #e5e7eb; }
.footer-top{
  padding:28px 0;
  display:grid;
  grid-template-columns: 1.2fr 2fr;
  gap:32px;
}
.ft-brand{ display:flex; flex-direction:column; gap:8px; }
.ft-logo{ height:24px; width:auto; }
.ft-tag{ margin:0; color:#6b7280; font-size:14px; }
.ft-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.ft-col h5{ margin:0 0 10px; font-size:14px; font-weight:700; color:#111827; }
.ft-link{ display:block; margin:6px 0; font-size:14px; color:#6b7280; text-decoration:none; }
.ft-link:hover{ color:#374151; }
.ft-social{ display:flex; gap:14px; margin-top:16px; }
.soc{ width:28px; height:28px; border:1px solid #e5e7eb; border-radius:50%; background:#fff;
      display:inline-flex; align-items:center; justify-content:center; }
.soc svg{ width:16px; height:16px; color:#6b7280; }
.soc:hover{ border-color:#d1d5db; }
.footer-bottom{ border-top:1px solid #eef1f5; padding:12px 0; }
.footer-bottom p{ margin:0; color:#9aa3b2; font-size:12px; }

/* === MOBILE EXACT (<=480px): сетка как у TronScan === */
@media (max-width: 480px){


  /* Делаем явные grid-области под мобильную раскладку */
  .footer-top{
    padding:16px 0 12px;
    display:grid;
    grid-template-columns: 1fr 1fr;             /* две колонки */
    grid-template-areas:
      "brand   brand"                           /* логотип+текст */
      "col1    col2"                            /* About | Services */
      "col3    col3"                            /* Resources во всю ширину */
      "social  social";                         /* иконки во всю ширину */
    gap:14px 18px;
  }

  /* Привязываем блоки к областям */
  .ft-brand{ grid-area: brand; align-items:flex-start; gap:6px; }
  .ft-cols{ display:contents; }                 /* дети будут как реальные колонки */
  .ft-cols .ft-col:nth-child(1){ grid-area: col1; }
  .ft-cols .ft-col:nth-child(2){ grid-area: col2; }
  .ft-cols .ft-col:nth-child(3){ grid-area: col3; }

  .ft-logo{ height:22px; }
  .ft-tag{ margin:2px 0 6px; font-size:13px; color:#9aa3b2; }

  .ft-col h5{ margin:0 0 8px; font-size:13px; }
  .ft-link{ margin:6px 0; font-size:13px; }

  .ft-social{ grid-area: social; margin-top:6px; gap:12px; justify-content:flex-start; }
  .soc{ width:28px; height:28px; }
  .soc svg{ width:16px; height:16px; }

  .footer-bottom .container{ padding: 0 16px; }
  .footer-bottom p{ text-align:left; font-size:12px; }
}

/* Узкие айфоны (<=375px) — ещё слегка компактнее */
@media (max-width: 375px){
  .ft-logo{ height:20px; }
  .ft-tag, .ft-link{ font-size:12.5px; }
  .soc{ width:26px; height:26px; }
  .soc svg{ width:15px; height:15px; }
  .footer-top{ gap:12px 14px; }
}

/* Десктоп: копирайт по центру */
.footer-bottom p{ text-align: center; }

/* === FOOTER: раскладка "как на TronScan" === */

/* База */
.site-footer{ background:#fff; border-top:1px solid #e5e7eb; }
.footer-top{ padding:28px 0; }
.ft-brand{ display:flex; flex-direction:column; gap:8px; }
.ft-logo{ height:24px; width:auto; }
.ft-tag{ margin:0; color:#6b7280; font-size:14px; }
.ft-col h5{ margin:0 0 10px; font-size:14px; font-weight:700; color:#111827; }
.ft-link{ display:block; margin:6px 0; font-size:14px; color:#6b7280; text-decoration:none; }
.ft-link:hover{ color:#374151; }
.ft-social{ display:flex; gap:14px; margin-top:12px; }
.soc{ width:28px; height:28px; border:1px solid #e5e7eb; border-radius:50%; background:#fff;
      display:inline-flex; align-items:center; justify-content:center; }
.soc svg{ width:16px; height:16px; color:#6b7280; }
.soc:hover{ border-color:#d1d5db; }
.footer-bottom{ border-top:1px solid #eef1f5; padding:12px 0; }
.footer-bottom p{ margin:0; color:#9aa3b2; font-size:12px; text-align:center; }

/* ====== DESKTOP (>= 901px):
   brand слева, под ним resources и иконки; справа — About и Services ====== */
@media (min-width: 901px){
  .footer-top{
    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr;             /* левая широкая колонка + 2 правых */
    grid-template-areas:
      "brand   col1    col2"                          /* верхняя строка */
      "res     col1    col2"                          /* Resources под логотипом */
      "social  col1    col2";                         /* соц-иконки под Resources */
    column-gap: 40px;
    row-gap: 16px;
    align-items:start;
  }

  /* превращаем три .ft-col в независимые grid-элементы */
  .ft-cols{ display: contents; }

  /* Привязки к областям */
  .ft-brand{ grid-area: brand; }
  .ft-cols .ft-col:nth-child(1){ grid-area: col1; }   /* About Us */
  .ft-cols .ft-col:nth-child(2){ grid-area: col2; }   /* Services & Support */
  .ft-cols .ft-col:nth-child(3){ grid-area: res; }    /* Resources под логотипом */
  .ft-social{ grid-area: social; justify-content:flex-start; }
}

/* ====== TABLET (641–900px): две колонки сверху, resources на всю ширину, соц-иконки снизу ====== */
@media (min-width: 641px) and (max-width: 900px){
  .footer-top{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand   brand"
      "col1    col2"
      "res     res"
      "social  social";
    column-gap: 24px;
    row-gap: 14px;
  }
  .ft-cols{ display: contents; }
  .ft-brand{ grid-area: brand; align-items:flex-start; }
  .ft-cols .ft-col:nth-child(1){ grid-area: col1; }
  .ft-cols .ft-col:nth-child(2){ grid-area: col2; }
  .ft-cols .ft-col:nth-child(3){ grid-area: res; }
  .ft-social{ grid-area: social; }
}

/* ====== MOBILE (<=640px): как у TronScan мобильного ====== */
@media (max-width: 640px){
  .footer-top{
    padding:16px 0 12px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand   brand"
      "col1    col2"
      "res     res"
      "social  social";
    gap:14px 18px;
  }
  .ft-cols{ display: contents; }
  .ft-brand{ grid-area: brand; align-items:flex-start; gap:6px; }
  .ft-logo{ height:22px; }
  .ft-tag{ margin:2px 0 6px; font-size:13px; color:#9aa3b2; }

  .ft-cols .ft-col:nth-child(1){ grid-area: col1; }
  .ft-cols .ft-col:nth-child(2){ grid-area: col2; }
  .ft-cols .ft-col:nth-child(3){ grid-area: res; }

  .ft-col h5{ margin:0 0 8px; font-size:13px; }
  .ft-link{ margin:6px 0; font-size:13px; }

  .ft-social{ grid-area: social; margin-top:6px; gap:12px; justify-content:flex-start; }
  .soc{ width:28px; height:28px; }
  .soc svg{ width:16px; height:16px; }

  .footer-bottom .container{ padding: 0 16px; }
  .footer-bottom p{ text-align:left; }  /* на мобиле как у TronScan — слева */
}

/* Очень узкие айфоны */
@media (max-width: 375px){
  .ft-logo{ height:20px; }
  .ft-tag, .ft-link{ font-size:12.5px; }
  .soc{ width:26px; height:26px; }
  .soc svg{ width:15px; height:15px; }
}

/* === Смещение футера чуть правее, как у TronScan === */
:root{
  --footer-shift-desktop: 22px;  /* подстрой 18–28px по вкусу */
  --footer-shift-mobile:  12px;  /* подстрой 8–16px по вкусу */
}

/* Десктоп/планшет: двигаем всю верхнюю часть футера вправо */
@media (min-width: 641px){
  .footer-top{
    padding-left: calc(28px + var(--footer-shift-desktop));
    padding-right: 28px;                 /* оставляем стандартный правый отступ */
  }
}

/* Мобайл: тоже чуть смещаем вправо */
@media (max-width: 640px){
  .footer-top{
    padding-left: calc(16px + var(--footer-shift-mobile));
    padding-right: 16px;                 /* правый как был */
  }
}

/* === Фиксируем топбар === */
:root{
  --topbar-h: 64px;             /* высота на десктопе */
}
@media (max-width: 480px){
  :root{ --topbar-h: 56px; }     /* высота на мобиле */
}

.topbar{
  position: fixed;               /* ← фиксируем */
  top: 0; left: 0; right: 0;
  z-index: 1000;
  width: 100%;
  background: rgba(255,255,255,.86);           /* лёгкая «дымка» как у TronScan */
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid #e5e7eb;
}

/* Отступ под фикс-шапку, чтобы контент не уезжал под неё */
body{
  padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
}
.topbar-inner{ min-height: var(--topbar-h); }

/* в css/style.css */
a.btn { text-decoration: none; }

/* Фон в зоне Hero + плавный переход вниз в белый */
.hero{
  position: relative;
  overflow: hidden;               /* чтобы градиенты не вылезали */
}

/* собственно фон как на TronScan */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                    /* фон за контентом */
  background:
    /* немного «молочной дымки» по краям, как у TronScan */
    radial-gradient(900px 700px at 100% -10%,
      rgba(255,255,255,.92), rgba(255,255,255,0) 60%),
    radial-gradient(700px 540px at 15% 0%,
      rgba(255,255,255,.90), rgba(255,255,255,0) 60%),
    url("assets/hero-bg.webp") center/cover no-repeat;
  opacity: .12;                   /* общая «лёгкость» фона: 0.08–0.16 по вкусу */
  filter: saturate(.95) contrast(.98) blur(.3px);
  pointer-events: none;
}

/* плавный уход фона в белый снизу (чтобы слиться со stats-блоком) */
.hero::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 160px;                  /* высота «растушёвки» */
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.85) 60%,
    #ffffff 100%);                /* если у тебя панель белая — оставь #fff */
  z-index: -1;
  pointer-events: none;
}

/* мобильный твик: фон ещё мягче, растушёвка ниже */
@media (max-width: 480px){
  .hero::before{ opacity: .10; filter: saturate(.95) blur(.2px); }
  .hero::after{ height: 120px; }
}

/* Добавь в конец своего CSS */
#btn-connect-hero{
  font-weight: 300;   /* тоньше буквы */
  font-size: 12px;    /* меньше текст */
  line-height: 1.1;   /* компактнее по высоте */
}

/* скорость анимации меню — меняй при желании */
:root{ --drawer-speed: 0.32s; }

/* фон */
#drawer-backdrop{
  position:fixed; inset:0; background:rgba(17,24,39,.35);
  opacity:0; pointer-events:none; transition:opacity var(--drawer-speed) ease;
  z-index:1000;
}
#drawer-backdrop.show{ opacity:1; pointer-events:auto; }

/* drawer */
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:320px; max-width:88vw;
  background:#fff; box-shadow:-12px 0 32px rgba(0,0,0,.12);
  transform:translateX(100%); transition:transform var(--drawer-speed) cubic-bezier(.22,1,.36,1);
  z-index:1001; padding:64px 22px 22px; overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }

.drawer-close{
  position:absolute; top:16px; right:16px; font-size:28px; line-height:1;
  background:transparent; border:0; color:#374151; cursor:pointer;
}

/* список и ссылки */
.drawer-list{ list-style:none; margin:0; padding:0; }
.drawer-list > li{ margin:0; }
.drawer-list a{
  display:block; padding:12px 6px; text-decoration:none;
  color:#111827; font-size:16px; font-weight:500;
}
.drawer-list a:hover{ color:#ef4444; }

/* блок с подпунктами Blockchain */
.subhead{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px; border:0; cursor:pointer; background:#f8fafc; color:#111827;
  border-radius:12px; font-size:16px; font-weight:600;
}
.has-sub.open .subhead{ color:#ef4444; }            /* активный — красным */
.subhead .chev{ transition:transform var(--drawer-speed) ease; color:#6b7280; }
.has-sub.open .subhead .chev{ transform:rotate(180deg); }

/* подпункты */
.submenu{
  overflow:hidden; max-height:0; transition:max-height var(--drawer-speed) ease;
  padding-left:10px; margin-left:6px; border-left:2px solid #f3f4f6;
}
.has-sub.open .submenu{ max-height:400px; }          /* хватит для 10 пунктов */
.submenu a{ font-weight:400; font-size:15px; color:#374151; padding:10px 6px; }
.submenu a:hover{ color:#ef4444; }

:root{
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --panel:#ffffff;
  --accent:#ef4444; /* красный как на TronScan */
}

/* --- backdrop --- */
#drawer-backdrop{
  position:fixed; inset:0;
  background:rgba(17,24,39,.5);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  z-index:49;
}
#drawer-backdrop.show{ opacity:1; pointer-events:auto; }

/* --- drawer --- */
.drawer{
  position:fixed; inset:0 0 0 auto; /* закреплен справа */
  width:320px; max-width:calc(100% - 64px);
  background:var(--panel);
  box-shadow: -12px 0 36px rgba(0,0,0,.12);
  transform:translateX(100%);
  transition:transform .32s ease;
  z-index:50;
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding:20px 16px 28px;
  border-left:1px solid var(--line);
}
.drawer.open{ transform:translateX(0); }

.drawer-close{
  position:absolute; top:8px; right:8px;
  border:0; background:transparent; cursor:pointer;
  font-size:28px; line-height:1; color:var(--muted);
  padding:6px 10px; border-radius:8px;
}
.drawer-close:hover{ background:#f3f4f6; color:var(--ink); }

/* --- nav inside drawer --- */
.drawer-nav{ margin-top:24px; }
.drawer-list{ list-style:none; margin:0; padding:0; }

.drawer-list > li > a{
  display:block; padding:10px 12px;
  text-decoration:none; color:var(--ink);
  border-radius:10px;
}
.drawer-list > li > a:hover{ background:#f9fafb; }

/* групповой пункт */
.has-sub{ margin-top:8px; }
.has-sub .subhead{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px;
  border:0; background:#f9fafb; color:var(--ink);
  border-radius:12px; cursor:pointer;
  transition:background .2s ease;
}
.has-sub .subhead:hover{ background:#f3f4f6; }
.has-sub .chev{ transition:transform .2s ease; }

/* когда раскрыто — делаем заголовок красным и поворачиваем стрелку */
.has-sub.open .subhead{ color:var(--accent); background:#fff1f2; }
.has-sub.open .chev{ transform:rotate(180deg); }

/* выпадающее меню */
.submenu{
  list-style:none; margin:6px 0 0; padding:0;
  overflow:hidden; max-height:0;
  transition:max-height .22s ease;
}
.submenu li a{
  display:block; padding:10px 14px 10px 16px;
  color:var(--ink); text-decoration:none;
  border-radius:10px;
}
.submenu li a:hover{ background:#f9fafb; }


/* Основной блок с фоном */
.tron-light .tron-wrapper {
    background: url('assets/header-bg.jpg') no-repeat;
    background-size: 100% 438px;   /* ширина 100%, высота фиксированная — как у них */
}

/* Чтобы убрать тень от логотипа при липком состоянии */
.tron-light .tron-wrapper:has(.tron-sticky-content):not(:has(.switch-network-tip-wrapper)) .main-logo-wrapper {
    box-shadow: none;
}

/* Адаптив для телефонов */
@media screen and (max-width: 768px) {
    .tron-light .tron-wrapper {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

#captcha-video {
  background: none !important;
  mix-blend-mode: multiply;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  isolation: isolate !important;
  backdrop-filter: none !important;
}

:root{ --drawer-speed: 0.32s; }

#drawer-backdrop{
  position:fixed; inset:0;
  background:rgba(17,24,39,.35);
  opacity:0; pointer-events:none;
  transition:opacity var(--drawer-speed) ease;
  z-index:1000;
}
#drawer-backdrop.show{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; right:0; height:100vh; width:320px; max-width:88vw;
  background:#fff; box-shadow:-12px 0 32px rgba(0,0,0,.12);
  transform:translateX(100%);
  transition:transform var(--drawer-speed) cubic-bezier(.22,1,.36,1);
  z-index:1001; padding:64px 22px 22px; overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }

.drawer-close{
  position:absolute; top:16px; right:16px; font-size:28px; line-height:1;
  background:transparent; border:0; color:#374151; cursor:pointer;
}

/* === Notifications dropdown === */
.notif-dropdown {
  position: absolute;
  top: 60px; /* под колокольчиком */
  right: 70px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  width: 260px;
  display: none;
  z-index: 1000;
  overflow: hidden;
  animation: fadeIn 0.2s ease;
}

.notif-card {
  padding: 16px 18px;
  font-family: Inter, sans-serif;
  text-align: left;
}

.notif-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #111;
}

.notif-card p {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* стрелочка сверху */
.notif-dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 26px;
  width: 14px;
  height: 14px;
  background: white;
  transform: rotate(45deg);
  box-shadow: -2px -2px 6px rgba(0,0,0,0.05);
}

.notif-dropdown {
  position: absolute;
  top: 60px;
  right: 90px;
  width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  padding: 16px;
  display: none;
  z-index: 1000;
  font-family: Inter, sans-serif;
}

.notif-dropdown.show {
  display: block;
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-6px);}
  to {opacity: 1; transform: translateY(0);}
}

/* пример карточки */
.notif-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: #111;
}

.notif-card p {
  color: #666;
  font-size: 13px;
  margin: 0;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  z-index: 100;
}

.topbar.scrolled {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

body {
  padding-top: 70px; /* чтобы контент не прятался под шапкой */
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  zoom: 0.8; /* чуть уменьшает только внутренние элементы */
}

body {
  font-size: 14px;
}

/* === HERO-БЛОК === */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0 0;
  background: none;
}

/* внутренний контейнер */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

/* текст */
.hero-text {
  max-width: 700px;
  margin-bottom: 20px;
}

.hero-illustration img {
  display: block;
  width: 360px;
  height: auto;
  margin: 0 auto 60px auto; /* ← добавили 60px снизу */
  border-radius: 0;
  box-shadow: none;
  background: none;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  position: relative;
}

.hero-text h1 {
  font-size: 32px;           /* ← увеличь до нужного (36–56px оптимально) */
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #111;
  text-transform: uppercase; /* если хочешь капсом */
}

.brand {
  display: flex;
  flex-direction: column; /* логотип сверху, цифры под ним */
  align-items: flex-start;
  justify-content: center;
  gap: 4px; /* расстояние между логотипом и цифрами */
}

.mini-ticker {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 13px;       /* как на оригинале */
  color: #111;
  line-height: 1.2;
}

.mini-ticker .symbol {
  font-weight: 300;
  margin-right: 4px;
}

.mini-ticker .price {
  font-weight: 300;
}

.mini-ticker .change {
  margin-left: 4px;
  font-weight: 600;
  color: #16a34a; /* зелёный как у TronScan (+%) */
}

.brand--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ← выравнивание по левому краю */
  gap: 2px; /* расстояние между логотипом и текстом */
}

.brand--stack .logo {
  display: block;
  width: auto;
  height: 26px; /* при необходимости подгони размер */
}

.mini-ticker {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #111;
  display: flex;
  align-items: center;
  gap: x;
  margin-top: 4px; /* чтобы текст был чуть ниже логотипа */
  padding-left: 0; /* без смещения — строго под логотипом */
}

.mini-ticker .change {
  font-weight: 600;
}

/* ---- HEADER ICONS ---- */
.topbar .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px; /* расстояние между иконками */
  min-width: 70px; /* фикс. область справа */
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: #111;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  background: rgba(255,255,255,0.8);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.icon-btn .dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
}

/* ---- MOBILE FIX ---- */
@media (max-width: 768px) {
  .topbar {
    padding: 10px 14px;
  }

  .topbar .right {
    gap: 8px;
  }

  .icon-btn {
    width: 34px;
    height: 34px;
  }

  .icon-btn svg {
    width: 17px;
    height: 17px;
  }
}

/* === ПОЛНОЕ ПРИЛИПАНИЕ ЛОГОТИПА И ТИКЕРА ВЛЕВО === */
.topbar {
  padding-left: 0 !important;
}

.topbar .container.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.topbar .left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 0 !important;
}

.topbar .brand img.logo {
  display: block;
  margin: 0 !important;
}

.topbar .mini-ticker {
  margin-left: 22px;
}

/* правая часть — остаётся справа */
.topbar .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- Прижимаем вообще всё к самому краю --- */
.topbar .container {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Тонкая настройка — подвинуть лого ещё левее */
.topbar .left {
  position: relative;
  left: 0px; /* подбери: -8 / -10 / -12 */
}

.topbar .brand {
  position: relative;
  left: -25px; /* двигай это значение: -8, -10, -15 и т.д. */
}

/* ЛОГОТИП (верхний) */
.brand--stack .logo {
  position: relative;
  top: -3px;    /* ↑ вниз/вверх */
  left: -6px;   /* ←→ влево/вправо */
  transition: all 0.2s ease; /* плавно */
}

/* ТЕКСТ ПОД ЛОГОТИПОМ (TRX: $...) */
.brand--stack .mini-ticker {
  position: relative;
  top: -3px;    /* ↑↓ вертикаль */
  left: 1px;  /* ←→ горизонталь */
  transition: all 0.2s ease;
}

/* === Только чёрный фон в зоне статус-бара iPhone === */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: env(safe-area-inset-top);
  background: #000;
  z-index: 9999;
  pointer-events: none; /* чтобы не блокировал клики */
}


.icon-btn.bell {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.icon-btn.bell:hover {
  background: rgba(0,0,0,0.05);
}

.icon-btn.bell svg {
  width: 20px;
  height: 20px;
}

/* 🔴 Красная точка уведомления */
.icon-btn.bell .dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background-color: #c62828;
  border-radius: 50%;
  border: 2px solid white; /* обводка, как на скрине */
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

/* === 🔔 Колокольчик и уведомления === */
.icon-btn.bell {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15); /* ← обводка (слегка темнее) */
  background: #f1f3f5;  /* ← сам круг: светло-серый, чуть светлее обводки */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); /* лёгкий “воздух” */
}

/* эффект при наведении */
.icon-btn.bell:hover {
  background: #f1f5f9; /* немного темнее серый */
  border-color: rgba(0, 0, 0, 0.25);
}
/* сам SVG-колокольчик */
.icon-btn.bell svg {
  width: 28px;          
  height: 28px;
  stroke: #111;         
  stroke-width: 2px;  
  transition: stroke 0.2s ease;

  /* 👇 добавь эти параметры для тонкой подгонки */
  position: relative;
  top: 3px;   /* ↑ поднимает вверх, увеличивай значение для сильнее */
  left: -0.5px; /* → смещает чуть вправо/влево (−0.5px влево, +0.5px вправо) */
}


/* верхняя черная точка */
.icon-btn.bell::before {
  content: "";
  position: absolute;
  top: 7.5px;       /* ← вертикальное положение */
  left: 47%;
  transform: translateX(-50%);
  width: 4px;     /* ← размер точки */
  height: 4px;
  background: #111; /* ← цвет */
  border-radius: 50%;
  font-weight: 600; /* ← жирность (визуально влияет при увеличении) */
}

/* красная (теперь бордовая) точка уведомления */
.icon-btn.bell .dot {
  position: absolute;
  top: -4px;
  right: -3px;
  width: 8px;
  height: 8px;
  background: rgb(183, 62, 49); /* ← бордовый, сбалансированный */
  border-radius: 50%;
  border: none;
  box-shadow: none;
}

/* нижняя часть колокольчика (язычок) */
.icon-btn.bell svg #bell-bottom {
  transform-box: fill-box;      /* чтобы трансформации считались внутри viewBox */
  transform-origin: center;     /* центр координат трансформации */
  transform: translateY(-4px) scale(0.85, 0.7); /* ↑↑ поднимаем и уменьшаем */
  stroke-width: 2.6px;          /* ← толщина линий (можно менять: 2.0 / 2.4) */
  transition: transform 0.25s ease, stroke-width 0.25s ease;
}

/* кнопка меню */
.icon-btn.menu {
  position: relative;
  width: 38px;
  height: 38px;
  border: none;          /* 🔹 убираем обводку */
  background: transparent; /* 🔹 убираем круг */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.icon-btn.menu:hover {
  opacity: 0.7; /* лёгкий эффект наведения */
}

/* svg — делаем немного больше */
.icon-btn.menu svg {
  width: 29px;
  height: 29px;
  stroke: #111;
  stroke-width: 2.4px;
  transform: scale(1.15) translateY(-0.5px); /* ↑ немного поднимаем */
  transform-origin: center;
  transition: transform 0.2s ease;
}