/* Витрина без регистрации. Светлая тема, синий акцент, крупная типографика:
   раскладка повторяет лучшие магазины ниши, но код и стили — свои. */

:root,:root[data-theme="dark"]{
  /* Палитра с прежнего сайта: чёрный фон, голубой акцент Telegram.
     Светлая пара ниже — переключатель в шапке и системная настройка. */
  --ink:#f5f5f7; --ink-2:#a1a1a6; --ink-3:#86868b;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.08);
  --bg:#000; --bg-2:#0c0c0d; --card:#141416;
  --warn:#e0a106;      /* метка «код один раз»: заметно, но не тревожно */
  --blue:#2997ff; --blue-d:#48a6ff; --blue-l:rgba(41,151,255,.14);
  --green:#30d158; --amber:#ffb340; --red:#ff6961;
  --r:14px; --r-s:10px; --r-l:20px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.7);
  color-scheme: dark;
}

:root[data-theme="light"]{
  --ink:#1d1d1f; --ink-2:#4b5563; --ink-3:#6e6e73;
  --line:rgba(0,0,0,.12); --line-2:rgba(0,0,0,.07);
  --bg:#fff; --bg-2:#f5f5f7; --card:#fff;
  --warn:#a56a00;
  --blue:#0071e3; --blue-d:#0077ed; --blue-l:rgba(0,113,227,.1);
  --green:#1a7f37; --amber:#b45309; --red:#c81e1e;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.07);
  --on-blue:#fff;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.hd__logo b,.quick__t,.btn{font-family:'Space Grotesk', Inter, system-ui, sans-serif}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

.wrap{width:min(1180px, 100% - 40px); margin-inline:auto}
.wrap--narrow{width:min(820px, 100% - 40px)}

/* ─── шапка ─── */
.hd{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hd__in{display:flex; align-items:center; gap:28px; height:64px}
.hd__logo{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:18px}
.hd__logo:hover{text-decoration:none}
.hd__plane{color:var(--blue); flex:0 0 auto}
.hd__nav{display:flex; gap:22px; margin-left:12px}
.hd__nav a{color:var(--ink-2); font-size:15px; font-weight:500}
.hd__nav a:hover{color:var(--blue); text-decoration:none}
.hd__sup{margin-left:auto; font-weight:600; font-size:15px}
.hd__theme{
  display:grid; place-items:center; width:36px; height:36px; margin-left:16px;
  border:1px solid var(--line); border-radius:50%; background:transparent;
  color:var(--ink-2); cursor:pointer; line-height:0;
}
.hd__theme:hover{color:var(--blue); border-color:var(--blue)}
.hd__theme .ico-sun{display:none}
:root[data-theme="light"] .hd__theme .ico-sun{display:block}
:root[data-theme="light"] .hd__theme .ico-moon{display:none}

/* ─── первый экран ─── */
.hero{padding:44px 0 8px}
.hero__in{display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:40px; align-items:start}
.pill{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--ink-2); background:var(--card)}
.pill i{width:7px; height:7px; border-radius:50%; background:var(--blue)}
.hero h1{margin:18px 0 0; font-size:clamp(38px, 5.4vw, 60px); line-height:1.04; letter-spacing:-.02em; font-weight:700}
.hero h1 span{color:var(--blue)}
.lead{margin:18px 0 0; max-width:620px; font-size:18px; color:var(--ink-2)}

.feats{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:28px}
@media (max-width:1180px){ .feats{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .feats{grid-template-columns:repeat(2,1fr)} }
.feat{padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.feat__i{display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--blue-l); color:var(--blue); margin-bottom:10px}
.feat b{display:block; font-size:14px; font-weight:600}
.feat em{display:block; font-style:normal; font-size:13px; color:var(--ink-3); margin-top:2px}

/* ─── быстрый заказ ─── */
.quick{position:sticky; top:84px; padding:22px; border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); box-shadow:var(--shadow)}
.quick__t{margin:0; font-size:19px}
.quick__s{margin:2px 0 18px; font-size:14px; color:var(--ink-3)}
.fld{display:block; margin-bottom:14px}
.fld>span{display:block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.fld select,.fld input{
  width:100%; padding:12px 14px; font:inherit; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--card);
}
.fld select:focus,.fld input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.step{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden}
.step button{width:44px; height:44px; border:0; background:var(--card); font-size:20px; color:var(--ink-2); cursor:pointer}
.step button:hover{background:var(--bg-2)}
.step input{border:0; border-inline:1px solid var(--line); border-radius:0; text-align:center; -moz-appearance:textfield}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

.quick__sum{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 0; margin-top:4px; border-top:1px solid var(--line-2); color:var(--ink-3); font-size:14px}
.quick__sum b{font-size:24px; color:var(--ink); font-variant-numeric:tabular-nums}

.pays{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px}
.pay{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--card); cursor:pointer; text-align:left; font:inherit}
.pay__i{display:block; margin-bottom:9px; line-height:0}
/* у знаков своя подложка (тёмно-синяя у СБП, голубая у Crypto Bot) —
   скругляем её, чтобы они читались как иконки приложений */
.pay__i img{width:36px; height:36px; display:block; border-radius:9px}
.pay b{font-size:14px}
.pay em{font-style:normal; font-size:12px; color:var(--ink-3)}
.pay[aria-pressed=true]{border-color:var(--blue); background:var(--blue-l)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 22px; border:0; border-radius:999px; background:var(--blue); color:var(--on-blue, #00111f); font-size:16px; font-weight:600; cursor:pointer; transition:background .15s}
.btn:hover{background:var(--blue-d)}
.btn:disabled{background:rgba(255,255,255,.12); color:var(--ink-3); cursor:not-allowed}
.btn--pay{width:100%}
.btn--ghost{background:var(--card); color:var(--ink); border:1px solid var(--line)}
.btn--ghost:hover{background:var(--bg-2)}
.quick__note{margin:12px 0 0; font-size:12px; color:var(--ink-3); text-align:center}

/* ─── секции ─── */
.section{padding:56px 0}
.section--grey{background:var(--bg-2); border-block:1px solid var(--line)}
.sec__head{margin-bottom:24px}
.sec__head h2{margin:0; font-size:clamp(24px,3vw,32px); letter-spacing:-.01em}
.sec__head p{margin:6px 0 0; color:var(--ink-3)}
.kicker{display:block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:8px}

/* ─── отлежавшиеся аккаунты своего склада ───
   Каталог отсортирован по цене, и эти позиции оказываются на четвёртом
   десятке, где их никто не видит. При этом они и надёжнее (выдаёт наш
   бот, вход проверяем), и прибыльнее. Поэтому показываем тройку
   карточками над таблицей. Блок прячется сам, когда штук не осталось. */
.aged{margin:0 0 36px}
.aged[hidden]{display:none}
.sec__head--row{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.aged__note{margin:0; max-width:46ch; font-size:14px; color:var(--ink-3)}
.aged__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.aged__c{
  display:flex; flex-direction:column; gap:10px;
  padding:20px; border:1px solid var(--line); border-radius:var(--r-l);
  background:var(--card); box-shadow:var(--shadow);
}
.aged__f{border-radius:3px; align-self:flex-start}
.aged__n{font-size:18px; letter-spacing:-.01em}
.aged__t{
  align-self:flex-start; padding:3px 9px; border-radius:999px;
  background:color-mix(in srgb, var(--blue) 12%, transparent);
  color:var(--blue); font-size:12px; font-weight:600;
}
.aged__l{margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.aged__l li{position:relative; padding-left:18px; font-size:14px; color:var(--ink-2)}
.aged__l li::before{
  content:''; position:absolute; left:2px; top:7px; width:6px; height:6px;
  border-radius:50%; background:var(--blue);
}
.aged__p{margin-top:auto; padding-top:8px; font-size:24px; font-variant-numeric:tabular-nums}
.aged__b{width:100%; justify-content:center}
.aged__b.is-on{background:var(--ink); color:var(--card)}

@media (max-width:900px){
  .aged__grid{grid-template-columns:1fr; gap:12px}
  .aged__c{padding:16px}
  .aged__p{font-size:21px}
}

/* ─── таблица каталога ─── */
.tbl{border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); overflow:hidden}
.tbl__head,.row{
  display:grid;
  /* ширины фиксированные: иначе длинное название страны растягивает свою
     колонку, и цифры в соседних строках разъезжаются по горизонтали */
  grid-template-columns:minmax(0,1fr) 120px 150px 170px 150px 116px;
  align-items:center; gap:0 26px; padding:14px 18px;
}
.tbl__head{background:var(--bg-2); border-bottom:1px solid var(--line); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.tbl__head>span:nth-child(2),.tbl__head>span:nth-child(3){text-align:right}
.row{border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0}
.row:hover{background:rgba(255,255,255,.03)}
:root[data-theme="light"] .row:hover{background:#fafbfc}
/* колонки с числами: одна ширина цифры, выравнивание по правому краю —
   так «90 ₽» и «1 155 ₽» стоят столбиком, а не вразнобой */
.row__num{text-align:right; font-variant-numeric:tabular-nums}
.row__c{display:flex; align-items:center; gap:10px; min-width:0}
.row__c img{width:26px; height:20px; border-radius:4px; object-fit:cover; flex:0 0 auto}
.row__c b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row__c em{font-style:normal; font-size:12px; color:var(--ink-3); display:block}
.stock{display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.stock i{width:6px; height:6px; border-radius:50%; background:var(--green); flex:0 0 auto}
.stock.is-low i{background:var(--amber)}
.price{font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums; white-space:nowrap}
.price em{display:block; font-style:normal; font-size:12px; font-weight:400; color:var(--ink-3)}
.fmt{font-size:13px; color:var(--ink-2)}
.row .step{max-width:150px}
.row .step button{width:40px; height:38px}
.row .step input{font-variant-numeric:tabular-nums}
.row__add{width:100%; padding:9px 12px; font-size:14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font:inherit; text-align:center; display:inline-block}
.row__add:hover{border-color:var(--blue); color:var(--blue)}
.row__add.is-on{background:var(--blue); border-color:var(--blue); color:var(--on-blue, #00111f)}
.tbl__empty{padding:28px; text-align:center; color:var(--ink-3)}
.tbl__foot{margin:14px 2px 0; font-size:14px; color:var(--ink-3)}

/* ─── как это работает / почему мы / вопросы ─── */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.step3{padding:22px; border:1px solid var(--line); border-radius:var(--r-l); background:var(--card)}
.step3__n{display:inline-block; font:700 13px/1 'Space Grotesk',sans-serif; color:var(--blue); letter-spacing:.1em; margin-bottom:10px}
.step3 b{display:block; font-size:18px; margin-bottom:6px}
.step3 p{margin:0; color:var(--ink-2); font-size:15px}

.why{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.why__c{padding:20px; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.why__c b{display:block; margin-bottom:6px}
.why__c p{margin:0; color:var(--ink-2); font-size:15px}

.faq{display:grid; gap:10px}
.faq__i{border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:14px 18px}
.faq__i summary{cursor:pointer; font-weight:600; list-style:none}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:'+'; float:right; color:var(--ink-3)}
.faq__i[open] summary::after{content:'–'}
.faq__i p{margin:10px 0 0; color:var(--ink-2)}

/* ─── подвал ─── */
.ft{padding:40px 0 24px; border-top:1px solid var(--line); background:var(--bg-2)}
.ft__in{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between}
.ft__s{margin:10px 0 0; max-width:360px; color:var(--ink-3); font-size:14px}
.ft__links{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:flex-start}
.ft__links a{color:var(--ink-2); font-size:14px}
.ft__legal{margin-top:24px; padding-top:16px; border-top:1px solid var(--line); color:var(--ink-3); font-size:13px}

/* ─── экран заказа ─── */
.ord{padding:40px 0 64px}
.ord__box{max-width:720px; margin-inline:auto; border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); padding:28px; box-shadow:var(--shadow)}
.ord__state{display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:600; background:var(--blue-l); color:var(--blue)}
.ord__state.is-ok{background:rgba(48,209,88,.14); color:var(--green)}
.ord__state.is-wait{background:var(--card)7ed; color:var(--amber)}
.ord__state.is-bad{background:rgba(255,105,97,.14); color:var(--red)}
.ord h1{margin:14px 0 4px; font-size:28px}
.ord__num{color:var(--ink-3); font-size:14px}
.acc{margin-top:22px; padding:18px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2)}
.acc__top{display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:space-between}
.acc__phone{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.01em}
.copy{padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); font:inherit; font-size:14px; cursor:pointer}
.copy:hover{border-color:var(--blue); color:var(--blue)}
.copy.is-done{border-color:var(--green); color:var(--green)}
.acc__row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.codebox{margin-top:14px; padding:14px; border:1px dashed var(--line); border-radius:var(--r-s); text-align:center; color:var(--ink-3); font-size:14px}
/* Готовый код: плашка спокойная, как остальные блоки страницы, а на
   успех указывает зелёная черта слева. Сплошная зелёная рамка с
   заливкой перетягивала внимание на себя, хотя смотреть нужно на цифры. */
.codebox.is-ok{
  border:1px solid var(--line); border-left:3px solid var(--green);
  border-radius:14px; background:var(--bg-2); padding:20px 16px;
}
.codeval{font:700 34px/1 'Space Grotesk',sans-serif; letter-spacing:.22em; color:var(--ink); background:none; border:0; cursor:pointer}
.hint{margin:10px 0 0; font-size:13px; color:var(--ink-3)}
.save{margin-top:20px; padding:14px; border-radius:var(--r-s); background:var(--blue-l); color:var(--ink); font-size:14px}
.save code{display:block; margin-top:6px; word-break:break-all; font-size:12px; color:var(--blue)}

@media (max-width:960px){
  .hero__in{grid-template-columns:1fr}
  .quick{position:static; order:-1}
  .hd__nav{display:none}
  .tbl__head{display:none}
  .row{grid-template-columns:1fr 1fr; gap:10px 14px; padding:16px}
  .row__c{grid-column:1 / -1}
  .row .step{max-width:none}
  .row__add{grid-column:1 / -1}
}

/* ─────────── свой список стран ───────────
   Нативный <select> рисует опции пропорциональным шрифтом, поэтому цена и
   остаток в нём не выстраиваются в колонки ничем, кроме моноширинного
   шрифта. Свой список решает это сеткой: три колонки фиксированной ширины. */
.pick{position:relative}
.pick__btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:12px 14px; font:inherit; color:var(--ink); text-align:left;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--card); cursor:pointer;
}
.pick__btn:hover{border-color:var(--blue)}
.pick[aria-expanded=true] .pick__btn,.pick__btn[aria-expanded=true]{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-l)}
.pick__pop{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px);
  border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  box-shadow:var(--shadow); overflow:hidden;
}
.pick__find{
  width:100%; padding:11px 14px; font:inherit; color:var(--ink);
  border:0; border-bottom:1px solid var(--line-2); background:transparent; outline:none;
}
.pick__list{max-height:320px; overflow:auto; overscroll-behavior:contain}
.pick__i{
  display:grid; grid-template-columns:minmax(0,1fr) 78px 74px; align-items:center; gap:12px;
  width:100%; padding:9px 14px; font:inherit; color:var(--ink); text-align:left;
  border:0; background:transparent; cursor:pointer;
}
.pick__i:hover,.pick__i.is-cur{background:var(--blue-l)}
.pick__i[aria-selected=true]{color:var(--blue); font-weight:600}
.pick__i span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* обе числовые колонки — по правому краю и одинаковой шириной цифр */
.pick__i b,.pick__i em{text-align:right; font-variant-numeric:tabular-nums; font-style:normal; white-space:nowrap}
.pick__i b{font-weight:600}
.pick__i em{color:var(--ink-3); font-size:13px}
.pick__none{padding:14px; color:var(--ink-3); font-size:14px; text-align:center}

/* ─────────── выбор формата выдачи ───────────
   Спрашиваем уже после оплаты: у поставщика «номер» и «tdata» — две
   разные покупки, и выбрать надо до того, как мы потратим деньги. */
.fmts{display:grid; gap:12px; margin-top:18px}
@media (min-width:640px){ .fmts{grid-template-columns:1fr 1fr} }
.fmt-card{
  display:block; text-align:left; padding:18px; font:inherit; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r); background:var(--card); cursor:pointer;
}
.fmt-card:hover{border-color:var(--blue)}
.fmt-card:disabled{opacity:.6; cursor:default}
.fmt-card b{display:block; font-size:17px; margin-bottom:6px}
.fmt-card em{font-style:normal; font-size:14px; color:var(--ink-2); line-height:1.45}

/* кружок ожидания: показывается, пока ждём SMS или выдачу */
.spin{
  display:inline-block; width:15px; height:15px; margin-right:9px; vertical-align:-2px;
  border:2px solid var(--line); border-top-color:var(--blue); border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.codebox{display:flex; align-items:center; justify-content:center; gap:4px; text-align:left}
.codebox.is-ok{flex-direction:column; text-align:center}

/* ─────────── выбор формата в карточке заказа ───────────
   Два положения переключателя вместо списка: вариантов всего два, и
   покупатель должен видеть оба сразу, не открывая ничего лишнего. */
.segs{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.seg{
  padding:10px 12px; font:inherit; color:var(--ink); text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--card);
}
.seg:hover{border-color:var(--blue)}
.seg b{display:block; font-size:14px; font-weight:600}
.seg em{font-style:normal; font-size:12px; color:var(--ink-3)}
.seg[aria-checked=true]{border-color:var(--blue); background:var(--blue-l)}
.seg[disabled]{opacity:.45; cursor:not-allowed}
.seg[disabled]:hover{border-color:var(--line)}
.fld__note{margin:8px 0 0; font-size:12px; color:var(--ink-3)}

/* Обратный отсчёт ожидания SMS: секунды уменьшаются, по нулю появляется
   кнопка повтора — покупатель не гадает, сколько ещё ждать. */
.codebox .tick{font-variant-numeric:tabular-nums; color:var(--ink)}
.codebox small{display:inline-block; margin-top:4px; color:var(--ink-3); font-size:12px; line-height:1.4}
.codebox .btn{margin-top:12px}
.codebox{flex-wrap:wrap}

/* ─────────── страницы-ответы ───────────
   Короткий ответ в рамке — то, что ассистент цитирует дословно, поэтому
   он стоит первым и визуально отделён от разбора. */
.answer{
  margin:0 0 28px; padding:18px 20px; font-size:18px; line-height:1.55;
  border-left:3px solid var(--blue); border-radius:0 var(--r) var(--r) 0;
  background:var(--blue-l); color:var(--ink);
}
.prose{font-size:16px; line-height:1.65; color:var(--ink-2)}
.prose h2{margin:32px 0 12px; font-size:22px; color:var(--ink); font-family:'Space Grotesk',sans-serif}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px; padding-left:22px}
.prose li{margin-bottom:8px}
.prose b{color:var(--ink)}
.atable{width:100%; border-collapse:collapse; margin:4px 0 20px; font-size:15px}
.atable th{
  text-align:left; padding:10px 12px; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line);
}
.atable td{padding:10px 12px; border-bottom:1px solid var(--line-2); font-variant-numeric:tabular-nums}
.atable tr:last-child td{border-bottom:0}

/* ─────────── бренд ───────────
   Сквозная врезка с логотипом и одной фразой о магазине. Стоит на всех
   поисковых страницах: имя рядом с темой на каждой странице — это то,
   из чего поиск собирает связь «Phantom» ↔ «Telegram-аккаунты». */
.bstrip{
  display:flex; align-items:center; gap:16px;
  padding:18px 20px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--card);
}
.bstrip__l{flex:0 0 auto; width:56px; height:56px; border-radius:14px}
.bstrip p{margin:0; font-size:15px; line-height:1.55; color:var(--ink-2)}
.bstrip b{color:var(--ink)}
.bstrip a{color:var(--blue); text-decoration:none}
.bstrip a:hover{text-decoration:underline}

/* Шапка брендовой страницы: знак и название рядом, как в карточке
   организации у Яндекса — чтобы человек узнал тот же логотип. */
.bhead{display:flex; align-items:center; gap:18px; margin:0 0 22px}
.bhead img{border-radius:20px; flex:0 0 auto}

@media (max-width:560px){
  .bstrip{gap:12px; padding:14px 16px}
  .bstrip__l{width:44px; height:44px; border-radius:12px}
  .bhead img{width:64px; height:64px}
}

/* ─────────── список заказа в карточке ───────────
   Что набрано в каталоге, видно прямо здесь: страна, цена, количество и
   крестик. До этого внизу менялась только сумма, и какие именно страны
   выбраны, покупатель не знал. */
.cart{
  margin:0 0 16px; border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--bg-2);
  /* ширина карточки заказа зависит не от экрана, а от колонки: на широком
     мониторе она 326px, а на планшете - 776px. Поэтому строки
     перестраиваются по ширине самого списка, а не по медиазапросу. */
  container-type:inline-size; container-name:cart;
}
.cart__h{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--line-2);
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.cart__h button{
  border:0; background:none; padding:0; cursor:pointer; font:inherit;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.cart__h button:hover{color:var(--blue)}
.cart__l{display:flex; flex-direction:column}
/* Каждая строка - отдельная сетка, поэтому колонка суммы задана жёстко:
   иначе «115 ₽» шире «95 ₽» и счётчики в соседних строках разъезжаются
   по горизонтали. minmax - чтобы крупная сумма не налезла на крестик. */
.cart__i{
  display:grid; grid-template-columns:22px 1fr auto minmax(72px, auto) 28px;
  align-items:center; gap:10px; padding:10px 12px;
  border-bottom:1px solid var(--line-2);
}
.cart__i:last-child{border-bottom:0}
.cart__i img{border-radius:2px}
.cart__n{
  display:flex; flex-direction:column; font-size:14px; color:var(--ink);
  min-width:0; overflow-wrap:anywhere;
}
.cart__n em{font-style:normal; font-size:12px; color:var(--ink-3)}
.cart__s{
  font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums;
  white-space:nowrap; text-align:right;
}
.cart__x{
  width:28px; height:28px; border:0; border-radius:8px; background:none;
  color:var(--ink-3); font-size:19px; line-height:1; cursor:pointer;
}
.cart__x:hover{background:var(--card); color:var(--ink)}

/* Компактный счётчик: в карточке места меньше, чем в таблице каталога. */
.step--sm button{width:30px; height:30px; font-size:16px}
.step--sm input{width:38px; height:30px; font-size:14px; padding:0}

/* Узкий список: название занимает всю строку, счётчик и сумма уходят вниз.
   Иначе «Французская Полинезия» наползает на кнопки. */
@container cart (max-width:430px){
  .cart__i{grid-template-columns:22px 1fr auto; row-gap:8px}
  .cart__i .step--sm{grid-column:2; justify-self:start}
  .cart__s{grid-column:3; justify-self:end}
  .cart__x{grid-column:3; grid-row:1; justify-self:end}
}
/* Запасной вариант для браузеров без контейнерных запросов. */
@media (max-width:560px){
  .cart__i{grid-template-columns:22px 1fr auto; row-gap:8px}
  .cart__i .step--sm{grid-column:2; justify-self:start}
  .cart__s{grid-column:3; justify-self:end}
  .cart__x{grid-column:3; grid-row:1; justify-self:end}
}

/* ─────────── код входа ───────────
   Цифры разложены по ячейкам: так их проще прочитать с экрана и
   перенести в Telegram, не теряя место. Весь блок - одна кнопка:
   нажатие копирует код целиком. */
.otp{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
  margin:2px 0 0; padding:0; border:0; background:none; cursor:pointer; font:inherit;
}
.otp__cap{
  display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:10px;
}
.otp__d{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:58px; border-radius:12px;
  border:1px solid var(--line); background:var(--card);
  font:700 28px/1 'Space Grotesk',sans-serif; color:var(--ink);
  font-variant-numeric:tabular-nums;
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.03);
  transition:border-color .15s, transform .15s;
}
.otp:hover .otp__d{border-color:var(--blue)}
.otp.is-done .otp__d{border-color:var(--green)}
.otp__copy{
  display:inline-flex; align-items:center; gap:6px; margin-left:4px;
  padding:9px 12px; border-radius:10px; border:1px solid var(--line);
  color:var(--ink-3); font-size:13px; white-space:nowrap;
}
.otp:hover .otp__copy{color:var(--blue); border-color:var(--blue)}
.otp.is-done .otp__copy{color:var(--green); border-color:var(--green)}

/* Полоса ожидания: отсчёт идёт посекундно, цифры не должны дёргать строку. */
.codebox .tick{
  font-variant-numeric:tabular-nums; color:var(--ink);
  font-family:'Space Grotesk',sans-serif; font-weight:600;
}

@media (max-width:560px){
  .otp{gap:6px}
  .otp__d{width:40px; height:50px; font-size:24px; border-radius:10px}
  .otp__copy{margin-left:0; width:100%; justify-content:center}
}

/* Порядок действий на странице заказа. Раньше под номером была одна
   строка подсказки, и покупатели жали кнопку до того, как Telegram
   запросил код, — тогда приходить было нечему. */
.acc__steps{
  margin:14px 0 16px; padding:0 0 0 20px; list-style:decimal;
  color:var(--ink-3); font-size:14px; line-height:1.65;
}
.acc__steps li{margin-bottom:3px}
.acc__steps li::marker{color:var(--blue); font-weight:600}

/* Атрибут hidden сам по себе не справляется: у .codebox задан display:flex,
   и он перебивает скрытие - под кнопкой оставалась пустая рамка. */
.codebox[hidden]{display:none}

/* ─────────── код приходит один раз ───────────
   По части стран поставщик читает код входа только с первого раза.
   Покупатель должен знать это до оплаты, а не после. */
.once{
  display:inline-block; margin-left:8px; padding:1px 7px;
  border:1px solid var(--warn, #c98a00); border-radius:999px;
  font-style:normal; font-size:11px; line-height:1.6; color:var(--warn, #c98a00);
  white-space:nowrap; vertical-align:middle;
}
.once-dot{font-style:normal; color:var(--warn, #c98a00)}

.oncebox{
  margin:0 0 16px; padding:12px 14px; border-radius:var(--r-s);
  border:1px solid var(--warn, #c98a00);
  background:color-mix(in srgb, var(--warn, #c98a00) 10%, transparent);
  font-size:13px; line-height:1.55;
}
.oncebox b{display:block; margin-bottom:3px; color:var(--ink)}
.oncebox span{color:var(--ink-2)}

/* ─────────── согласие с документами ───────────
   Стоит прямо над кнопкой оплаты: пока галочки нет, кнопка не нажимается.
   Сам факт принятия и редакция документов уходят в заказ. */
.agree{
  display:flex; align-items:flex-start; gap:9px;
  margin:2px 0 14px; font-size:13px; line-height:1.5; color:var(--ink-3);
  cursor:pointer; user-select:none;
}
.agree input{
  flex:0 0 auto; width:17px; height:17px; margin-top:1px;
  accent-color:var(--blue); cursor:pointer;
}
.agree a{color:var(--blue); text-decoration:none}
.agree a:hover{text-decoration:underline}

/* Короткая подсветка только что добавленной строки заказа: покупатель
   видит, куда уехала выбранная страна, и не думает, что она заменила
   прежнюю. */
@keyframes cartNew{
  0%{background:color-mix(in srgb, var(--blue) 22%, transparent)}
  100%{background:transparent}
}
.cart__i.is-new{animation:cartNew 1.2s ease-out}

/* Тематические разделы в подвале: тринадцать ссылок, которые не влезают
   в верхнюю навигацию, но нужны и роботу, и человеку с конкретным
   случаем - «оплата криптой», «спам-блок», «второй аккаунт». */
.ft__hubs{
  display:flex; flex-wrap:wrap; gap:8px 18px;
  max-width:1160px; margin:18px auto 0; padding:16px 20px 0;
  border-top:1px solid var(--line-2);
}
.ft__hubs a{font-size:13px; color:var(--ink-3); text-decoration:none}
.ft__hubs a:hover{color:var(--blue)}