:root{
  --brand-green:#2ecc71;
  --text:#222;
  --muted:#7a7a7a;
  --line:#32b9d6;   /* верхняя бирюзовая полоса */
  --underline:#000; /* подчёркивание активного пункта */
  --bg:#fff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

.topbar{height:4px;background:var(--line)}

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* Header */
/* ===== Header (твои стили + адаптив) ===== */
.site-header{
  background:#fff;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:72px;
}

/* Логотип */
.logo-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.logo{height:36px;width:auto;display:block}
.brand{font-weight:700;font-size:24px;color:#2a9b4b;}

/* Меню слева (десктоп) */
.main-nav{
  display:flex;
  align-items:center;
  gap:32px;
  margin-left:40px;
  flex-grow:1;
}
.nav-link{
  position:relative;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  letter-spacing:.3px;
  color:#555;
  text-transform:uppercase;
  padding:6px 0;
}
.nav-link:hover{color:#000}
.nav-link.active{ color:#000; }
.nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:3px; background:#2a9b4b; border-radius:2px;
}

/* Telegram справа */
.head-actions{ display:flex; align-items:center; }
.tg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; background:#f3f3f3;
  text-decoration:none; transition:filter .15s ease, transform .05s ease;
}
.tg-btn:hover{filter:brightness(.95)}
.tg-btn:active{transform:translateY(1px)}
.tg-btn img{width:22px;height:22px;display:block}

/* Кнопка гамбургера */
.menu-toggle{
  display:none; background:transparent; border:0; padding:6px; cursor:pointer;
}

/* ===== Мобильное меню ===== */
.mnav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  z-index:80; opacity:0; transition:opacity .2s ease;
}
.mnav-backdrop.show{opacity:1}

.mobile-nav{
  position:fixed; left:0; right:0; top:0;
  background:#f2eeeb; z-index:90;
  transform:translateY(-100%); transition:transform .25s ease;
  border-bottom:1px solid #e7e7e7;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.mobile-nav.open{ transform:translateY(0); }
.mnav-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:#fff; border-bottom:1px solid #efefef;
}
.mnav-close{
  width:34px; height:34px; border-radius:8px;
  background:#fff; border:2px solid #f0b33b; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.mnav-link{
  display:block; text-align:center; text-transform:uppercase;
  font-weight:800; padding:16px 12px; color:#222; text-decoration:none;
  border-top:1px solid #dcd8d5; background:#f2eeeb;
}
.mnav-link:active{background:#ebe7e4}
.mnav-link.active{ position:relative; color:#000; }
.mnav-link.active::after{
  content:""; position:absolute; left:20%; right:20%; bottom:0;
  height:3px; background:#2a9b4b; border-radius:2px;
}

/* Блокировка скролла, когда меню открыто */
body.noscroll{ overflow:hidden }

/* ===== Адаптивность ===== */
@media (max-width: 768px){
  .main-nav{ display:none; }      /* скрываем десктоп-меню */
  .head-actions{ display:none; }  /* скрываем TG справа */
  .menu-toggle{ display:inline-flex; } /* показываем бургер */
}

/* ===== Slider ===== */
.hero-slider{
  margin:20px auto;
  max-width:1100px;
  border-radius:16px;
  overflow:hidden;
  position:relative;
}

/* Верхняя полоска-индикатор */
.slider-progress{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:4px;
  background:rgba(255,255,255,.35);
  z-index:3;
}
.slider-progress__fill{
  height:100%;
  width:0%;
  background:#2a9b4b;  /* цвет активного */
  transition:width .35s ease;
}

.slider-container{
  position:relative;
  width:100%;
  height:320px;
}

.slide{display:none;width:100%;height:100%}
.slide.active{display:block}
.slide img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:16px; /* мягкие углы */
}

/* Стрелки: inline SVG, 50% прозрачности */
.svg-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:none;
  padding:8px;
  border-radius:8px;
  background:rgba(255,255,255,.5);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .05s ease;
  z-index:4;
}
.svg-btn:hover{background:rgba(255,255,255,.7)}
.svg-btn:active{transform:translateY(-50%) scale(.98)}
.svg-btn.prev{left:10px}
.svg-btn.next{right:10px}

.svg-btn .icon{
  display:block;
  width:24px; height:24px;
  fill:#1e1e1e; /* цвет иконки */
  pointer-events:none;
}

/* Мобильная адаптация */
@media (max-width: 640px){
  .slider-container{height:220px}
  .svg-btn{padding:6px}
  .svg-btn .icon{width:20px;height:20px}
}



/* ====== Карточка покупки ====== */
.buy-card{
  max-width:1100px;
  margin:24px auto 40px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:22px 20px 28px;
}
.buy-title{
  text-align:center;
  margin:0 0 16px;
  color:#2a9b4b;
  font-weight:800;
  letter-spacing:.5px;
}

/* Плитки */
/* Плитки */
.buy-presets{
  display:grid;
  grid-template-columns:repeat(3, 1fr); /* теперь по 3 в ряд */
  gap:14px;
  margin-bottom:18px;
}

@media (max-width: 700px){
  .buy-presets{grid-template-columns:repeat(2, 1fr);} /* на мобилке по 2 */
}
@media (max-width: 420px){
  .buy-presets{grid-template-columns:1fr;} /* на очень узких — по одной */
}
.preset{
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  height:44px;
  border-radius:12px;
  border:1px solid #e6e6e6;
  background:#fff;
  cursor:pointer;
  font-weight:700;
  transition:box-shadow .15s ease, transform .05s ease, border-color .15s ease, background .15s ease;
}
.preset:hover{box-shadow:0 4px 12px rgba(0,0,0,.05)}
.preset-ico{width:18px;height:18px}
.preset.active{
  background:#eaf6ef;
  border-color:#2a9b4b;
  box-shadow:0 0 0 2px rgba(42,155,75,.15) inset;
}

/* Два поля */
.buy-rows{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:18px;
}
.buy-col{}
.buy-label{
  font-size:12px;
  font-weight:700;
  color:#7d7d7d;
  background:#f1f3f2;
  border-radius:12px 12px 0 0;
  padding:10px 12px;
}
.input-wrap{
  position:relative;
  border:1px solid #e6e6e6;
  border-top:none;
  border-radius:0 0 12px 12px;
  padding:0;
  overflow:hidden;
  background:#fff;
}
.input-wrap input{
  width:100%;
  height:54px;
  border:none;
  outline:none;
  padding:0 44px 0 14px;
  font-size:24px;
  font-weight:700;
}
.input-wrap .suffix{
  position:absolute;
  right:12px; top:50%; transform:translateY(-50%);
  color:#7d7d7d; font-weight:700;
}

/* Ползунок */
.range-wrap{
  position:relative;
  padding:12px 4px 8px;
  margin:10px 0 8px;
}
.range{
  width:100%;
  -webkit-appearance:none;
  height:8px;
  border-radius:999px;
  background:linear-gradient(to right, #2a9b4b var(--p,0%), #e0e0e0 var(--p,0%));
  outline:none;
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:26px; height:26px;
  border-radius:50%;
  border:2px solid #2a9b4b;
  background:#fff url("../img/robux-mini.svg") center/14px 14px no-repeat;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  cursor:pointer;
}
.range::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%;
  border:2px solid #2a9b4b; background:#fff;
  cursor:pointer;
}

/* Пузырёк значения возле ползунка */
.range-bubble{
  position:absolute; top:-4px; left:0; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px;
  padding:6px 10px;
  background:#2a9b4b; color:#fff;
  border-radius:10px;
  font-weight:800; font-size:14px;
  box-shadow:0 4px 12px rgba(42,155,75,.25);
  pointer-events:none;
}
.range-bubble img{width:16px;height:16px; filter:brightness(0) invert(1);}

/* Кнопка */
.buy-actions{display:flex; justify-content:center; margin-top:12px}
.btn-buy{
  min-width:260px; height:56px;
  border:none; border-radius:12px;
  font-size:18px; font-weight:800;
  color:#fff; background:#2a9b4b;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(42,155,75,.35);
  transition:transform .05s ease, filter .15s ease;
}
.btn-buy:hover{filter:brightness(.97)}
.btn-buy:active{transform:translateY(1px)}

/* Адаптив */
@media (max-width: 900px){
  .buy-presets{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 560px){
  .buy-rows{grid-template-columns:1fr}
}
/* ===== Delivery (GamePass) ===== */
.delivery-box{
  margin-top:16px;
  border:1px solid #e6e6e6;
  border-radius:12px;
  background:#f7faf7;
  padding:14px 16px;
}

.delivery-label{
  font-size:13px;
  font-weight:700;
  color:#7d7d7d; /* вторичный заголовок */
  margin-bottom:8px;
  letter-spacing:.3px;
}

.delivery-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.delivery-method{
  font-weight:800;
  font-size:18px;      /* крупнее */
  color:#2a9b4b;
}

.delivery-sum{
  font-weight:900;
  font-size:22px;      /* крупнее */
  color:#2a9b4b;
}

.delivery-note{
  margin-top:6px;
  font-size:14px;      /* крупнее */
  color:var(--muted);  /* вторичный цвет из темы */
}
/* ====== Как купить (только заголовок + картинки) ====== */
.how-steps{
  max-width:1100px;
  margin:24px auto 40px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:22px 20px 26px;
}

.how-title{
  margin:0 0 16px;
  text-align:center;
  color:#2a9b4b;
  font-weight:900;
  letter-spacing:.4px;
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr); /* по умолчанию 3 */
  gap:20px;
  justify-items:center; /* центрируем карточки */
}

.step-card img{
  display:block;
  width:300px;
  height:300px;
  object-fit:cover;
  border-radius:14px;
}

.step-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.12);
}
.step-card img{
  display:block;
  width:300px;
  height:300px;
  margin:0 auto;
  object-fit:cover;
  border-radius:14px;
}
/* планшет: 2 в ряд */
@media (max-width: 960px){
  .steps-grid{grid-template-columns:repeat(2, 1fr);}
}

/* мобильный: по одной карточке */
@media (max-width: 560px){
  .steps-grid{grid-template-columns:1fr;}
  .step-card img{
    width:100%;   /* во всю ширину */
    height:335px; /* фиксированная высота */
  }
}
/* ===== Отзывы ===== */
.reviews{
  max-width:1100px;
  margin:24px auto 40px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:22px 20px 26px;
}
.reviews-title{
  margin:0;
  text-align:center;
  color:#2a9b4b;
  font-weight:900;
  letter-spacing:.4px;
}
.reviews-sub{
  text-align:center;
  color:#6f6f6f;
  margin:6px 0 16px;
}
.reviews-sub a{color:#2a9b4b;text-decoration:none}
.reviews-sub a:hover{text-decoration:underline}

.rv-slider{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
}
.rv-viewport{
  overflow:hidden;
  width:100%;
}
.rv-track{
  list-style:none; margin:0; padding:0;
  display:flex;
  gap:20px;
  transition:transform .35s ease;
}

/* карточка */
.rv-card{
  flex:0 0 calc(33.333% - 13.333px); /* 3 в кадре по умолчанию */
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  padding:18px 16px;
  text-align:center;
}
.rv-ava{
  width:120px; height:120px; border-radius:50%; object-fit:cover;
  display:block; margin:0 auto 10px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.rv-name{font-weight:800;margin:6px 0 6px}
.rv-stars{display:flex;justify-content:center;gap:4px;margin-bottom:8px}
.rv-stars .star{fill:#f6b01e}
.rv-text{color:#4b4b4b;margin:0 6px 12px}
.rv-date{color:#9a9a9a;font-size:12px}

/* стрелки */
.rv-arrow{
  flex:0 0 auto;
  width:36px; height:36px;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .05s ease, filter .15s ease;
}
.rv-arrow:hover{filter:brightness(.97)}
.rv-arrow:active{transform:translateY(1px)}
.rv-arrow[disabled]{opacity:.4; cursor:not-allowed}

/* адаптив ширины карточек */
@media (max-width: 960px){
  .rv-card{flex-basis:calc(50% - 10px);} /* 2 в кадре */
}
@media (max-width: 560px){
  .rv-card{flex-basis:100%;}            /* 1 в кадре */
}

/* кнопка снизу */
.reviews-actions{display:flex;justify-content:center;margin-top:18px}
.btn-primary{
  display:inline-block;
  background:#2a9b4b; color:#fff; text-decoration:none;
  font-weight:900; font-size:18px;
  padding:14px 22px; border-radius:12px;
  box-shadow:0 8px 22px rgba(42,155,75,.3);
  transition:transform .05s ease, filter .15s ease;
}
.btn-primary:hover{filter:brightness(.97)}
.btn-primary:active{transform:translateY(1px)}
/* ===== Footer ===== */
.site-footer{
  width:100%;
  background:#fbfbfb;               /* единый фон на всю ширину */
  border-top:1px solid #efefef;
  margin-top:32px;
}
.footer-inner{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1.1fr 1fr 1.1fr; /* бренд | разделы | сотрудничество (центр) | соглашения | контакты */
  gap:28px;
  padding:26px 20px 28px;
}

/* Общие элементы */
.foot-col{}
.foot-title{
  margin:0 0 10px;
  font-size:20px;
  font-weight:800;
  color:#2a9b4b;
}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin:8px 0}
.foot-list a{color:#555;text-decoration:none}
.foot-list a:hover{color:#2a9b4b}

.foot-muted{color:#7d7d7d;margin:6px 0 12px}
.foot-contacts{list-style:none;margin:0;padding:0;color:#555}
.foot-contacts li{margin:6px 0}
.foot-contacts a{color:#2a9b4b;text-decoration:none}
.foot-contacts a:hover{text-decoration:underline}

/* Брендовый блок */
.foot-brand .logo{height:36px}
.foot-brand .brand{font-weight:800;font-size:24px;color:#2a9b4b}
.foot-brand .logo-wrap{display:flex;align-items:center;gap:10px;text-decoration:none}
.foot-brand .foot-tagline{color:#555;margin:10px 0 12px}
.foot-copy{color:#9a9a9a;font-size:12px}
.foot-brand-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px
}

/* tg квадрат справа от бренда */
.site-footer .tg-btn{
  width:36px;height:36px;border-radius:10px;background:#f3f3f3;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none
}
.site-footer .tg-btn img{width:20px;height:20px}

/* Сотрудничество (центр) */
.foot-coop{text-align:center}
.btn-outline{
  display:inline-block;
  padding:10px 16px;
  border:2px solid #2a9b4b;
  color:#2a9b4b;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  transition:filter .15s ease, transform .05s ease;
}
.btn-outline:hover{filter:brightness(.95)}
.btn-outline:active{transform:translateY(1px)}

/* Адаптив */
@media (max-width: 1100px){
  .footer-inner{
    grid-template-columns: 1.2fr 1fr 1fr 1fr; /* объединяем: бренд | разделы | сотрудничество | соглашения+контакты ниже */
  }
  .footer-inner > .foot-col:last-child{grid-column: 1 / -1} /* контакты на всю ширину ниже */
}
@media (max-width: 800px){
  .footer-inner{
    grid-template-columns: 1fr 1fr;  /* 2 колонки */
  }
  .foot-coop{grid-column:auto}       /* центр останется в своей колонке */
}
@media (max-width: 560px){
  .footer-inner{
    grid-template-columns: 1fr;       /* всё в колонку */
    gap:18px;
  }
  .foot-brand .logo{height:32px}
  .foot-brand .brand{font-size:22px}
}

.step-username { padding: 8px 0 6px; }
.back-btn {
  display:inline-flex; align-items:center; gap:8px;
  border:0; background:transparent; font-weight:600; color:#2a9b4b;
  margin-bottom:8px; cursor:pointer;
}
.back-btn .back-ico { font-size:18px; line-height:1; }

.step-title { text-align:center; color:#2a9b4b; margin:2px 0 4px; }
.step-sub   { text-align:center; color:#666; margin:0 0 10px; }

.nick-input-wrap input{
  width:100%; height:46px; border-radius:10px; border:1px solid #e6e6e6;
  padding:0 14px; font-size:16px; outline:0;
}
.nick-input-wrap input:focus{ border-color:#2a9b4b; box-shadow:0 0 0 3px rgba(42,155,75,.12); }

.suggest-list{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.suggest-hint, .suggest-empty{
  padding:12px 14px; border:1px dashed #e6e6e6; border-radius:10px; color:#666; background:#fafafa;
}

.suggest-item{
  width:100%; display:flex; align-items:center; gap:12px;
  border:1px solid #e6e6e6; background:#fff; border-radius:12px;
  padding:10px 12px; cursor:pointer; transition:.15s;
}
.suggest-item:hover{ border-color:#2a9b4b22; box-shadow:0 4px 14px rgba(0,0,0,.05); }
.suggest-item .avatar{
  width:40px; height:40px; border-radius:50%; background:#f2f2f2 center/cover no-repeat;
}
.suggest-item .who{ flex:1 1 auto; min-width:0; }
.suggest-item .dname{ font-weight:700; }
.suggest-item .uname{ color:#888; font-size:13px; }

.suggest-item .ok{
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; background:#2a9b4b;
  transform:scale(0); transition:.12s;
}
.suggest-item.selected { background:#eefd f2; border-color:#2a9b4b; }
.suggest-item.selected .ok{ transform:scale(1); }

.step-actions{ display:flex; justify-content:center; margin-top:14px; }
.btn-continue{
  min-width:260px; height:50px; border:0; border-radius:12px;
  background:#2a9b4b; color:#fff; font-weight:800; font-size:18px; cursor:pointer;
}
.btn-continue .arr{ margin-left:6px; }

/* Общий контейнер шага оплаты */
.step-pay {
  font-family: "Inter", Arial, sans-serif;
  color: #222;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Заголовок */
.step-pay .step-title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin: 10px 0 20px;
  color: #2a9b4b;
}

/* Кнопка "Назад" */
.step-pay .back-btn {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-bottom: 10px;
}
.step-pay .back-btn:hover {
  color: #2a9b4b;
}
.back-ico {
  font-size: 18px;
}

/* Блоки */
.step-pay .box {
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 15px 18px;
  margin-bottom: 15px;
  position: relative;
}
.step-pay .box .cap {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}
.step-pay .pill {
  display: inline-block;
  background: #e6f7ec;
  color: #2a9b4b;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
}

/* Способ оплаты */
.step-pay .pay-method {
  cursor: pointer;
  transition: all 0.2s ease;
}
.step-pay .pay-method:hover {
  border-color: #2a9b4b;
  background: #f6fff9;
}
.step-pay .pay-method.selected {
  border-color: #2a9b4b;
  background: #f6fff9;
}
.step-pay .pay-method .title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}
.step-pay .pay-method .sub {
  font-size: 13px;
  color: #666;
}
.step-pay .pay-method .check {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: #2a9b4b;
}
.pay-method .note-gray {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #8b8b8b; /* серый */
}

.summary.box .row {
  display:flex; justify-content:space-between; align-items:center;
  padding: 8px 0;
}

.summary.box .row-small span { opacity: 0.8; }
.summary.box .total {
  margin-top: 6px;
  border-top: 1px dashed rgba(0,0,0,.1);
  padding-top: 10px;
  font-weight: 700;
}

/* Сводка */
.step-pay .summary .row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 14px;
}
.step-pay .summary .row b {
  font-weight: 600;
  color: #111;
}

/* Кнопка оплаты */
.step-pay .step-actions {
  text-align: center;
  margin-top: 20px;
}
.step-pay .btn-continue {
  background: #2a9b4b;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.step-pay .btn-continue:hover {
  background: #24873f;
}
/* ===== HOW: базовые блоки — остаются как раньше ===== */
.how-page { padding: 24px 0 40px; }
.how-title { text-align:center; font:700 22px/1.2 "Inter",Arial; color:#2a9b4b; margin:0 0 18px; }
.how-subtitle { font:700 20px/1.2 "Inter",Arial; color:#2a9b4b; margin:24px 0 12px; }
.how-text { font-size:15px; line-height:1.6; color:#222; margin:0 0 10px; }
.how-figure { background:#fff; border:1px solid #eee; border-radius:12px; padding:8px; margin:8px 0 16px; }
.how-figure img { width:100%; height:auto; display:block; border-radius:8px; }
.how-line { height:1px; border:0; background:linear-gradient(90deg,transparent,#e8e8e8,transparent); margin:24px 0; }

/* ===== Видео (локальный файл) ===== */
.how-video.local {
  width:100%; max-width:980px; margin:8px auto 16px; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.how-video.local video { display:block; width:100%; height:auto; background:#000; }

/* ===== Текстовой вариант с вертикальной полосой ===== */
.how-note { margin:6px 0 10px; font-size:15px; }

.how-list-lined {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 28px;          /* отступ для линии слева */
  position: relative;
}
.how-list-lined::before {
  content: "";
  position: absolute;
  left: 14px;                   /* центр линии */
  top: 0; bottom: 0;
  width: 2px;
  background: #2a9b4b22;       /* мягкая зелёная линия */
}

.step-item {
  position: relative;
  margin: 0 0 18px;
  padding-left: 8px;
}
.step-item::before {
  content: "";
  position: absolute;
  left: -14px;                 /* выровнять по линии */
  top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2a9b4b;
  box-shadow: 0 0 0 4px #2a9b4b12; /* свечение вокруг точки */
}

/* Текст жирный, как просили */
.step-text { font-weight: 700; color:#1e1e1e; line-height:1.6; margin-bottom:10px; }

/* Картинка под пунктом */
.step-figure {
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
  padding:8px;
}
.step-figure img { width:100%; height:auto; display:block; border-radius:6px; }

/* ===== HOW: базовые блоки — остаются как раньше ===== */
.how-page { padding: 24px 0 40px; }
.how-title { text-align:center; font:700 22px/1.2 "Inter",Arial; color:#2a9b4b; margin:0 0 18px; }
.how-subtitle { font:700 20px/1.2 "Inter",Arial; color:#2a9b4b; margin:24px 0 12px; }
.how-text { font-size:15px; line-height:1.6; color:#222; margin:0 0 10px; }
.how-figure { background:#fff; border:1px solid #eee; border-radius:12px; padding:8px; margin:8px 0 16px; }
.how-figure img { width:100%; height:auto; display:block; border-radius:8px; }
.how-line { height:1px; border:0; background:linear-gradient(90deg,transparent,#e8e8e8,transparent); margin:24px 0; }

/* ===== Видео (локальный файл) ===== */
.how-video.local {
  width:100%; max-width:980px; margin:8px auto 16px; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.how-video.local video { display:block; width:100%; height:auto; background:#000; }

/* ===== Текстовой вариант с вертикальной полосой ===== */
.how-note { margin:6px 0 10px; font-size:15px; }

.how-list-lined {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 28px;          /* отступ для линии слева */
  position: relative;
}
.how-list-lined::before {
  content: "";
  position: absolute;
  left: 14px;                   /* центр линии */
  top: 0; bottom: 0;
  width: 2px;
  background: #2a9b4b22;       /* мягкая зелёная линия */
}

.step-item {
  position: relative;
  margin: 0 0 18px;
  padding-left: 8px;
}
.step-item::before {
  content: "";
  position: absolute;
  left: -14px;                 /* выровнять по линии */
  top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2a9b4b;
  box-shadow: 0 0 0 4px #2a9b4b12; /* свечение вокруг точки */
}

/* Текст жирный */
.step-text { font-weight: 700; color:#1e1e1e; line-height:1.6; margin-bottom:10px; }

/* Картинка под пунктом */
.step-figure {
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
  padding:8px;
}
.step-figure img { width:100%; height:auto; display:block; border-radius:6px; }

/* Адаптивность */
@media (min-width: 900px) {
  .how-title { font-size: 26px; }
  .how-subtitle {
    font: 700 20px/1.2 "Inter", Arial;
    color: #2a9b4b;
    margin: 24px 0 12px;
    text-align: left;
  }
  .how-subtitle.center {
    text-align: center;
    font-size: 24px;
    margin-top: 32px;
  }
  .how-text { font-size: 16px; }
  .step-text { font-size: 16px; }
}

/* === MOBILE: +10% шире/выше визуально === */
@media (max-width: 899px) {
  /* контейнеры держат границы, чтобы «лишнее» было скрыто */
  .how-figure,
  .step-figure {
    overflow: hidden;
    /* чтобы картинка, став на 110%, была по центру */
    margin-left: -5%;
    margin-right: -5%;
    width: 110%;
  }

  /* сами изображения увеличиваем */
  .how-figure img,
  .step-figure img {
    width: 110%;
    max-width: none;   /* выключаем ограничение */
    height: auto;      /* высота вырастет пропорционально ширине */
    display: block;
  }
}

@media (min-width: 900px) {
  .how-figure,
  .step-figure {
    width: 720px;          /* уменьшенный фикс */
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .how-figure img,
  .step-figure img {
    width: 720px;          /* фикс под контейнер */
    max-width: 720px;
    height: auto;
  }
}
/* ===== Result pages ===== */
.result-page { padding: 40px 0 56px; }
.result-page .container { max-width: 840px; margin: 0 auto; padding: 0 16px; }

.result-hero { text-align: center; margin-bottom: 24px; }
.result-ico { width: 96px; height: 96px; display: block; margin: 0 auto 14px; }
.result-title { font-size: 34px; line-height: 1.2; margin: 0 0 8px; font-weight: 800; }
.result-lead { font-size: 16px; color: #5b6570; margin: 0; }

.result-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  padding: 20px;
  margin: 24px 0;
}

.result-row { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(0,0,0,.07); }
.result-row:last-child { border-bottom: 0; }
.result-row .cap { color: #6b7280; font-size: 14px; }
.result-row .val { font-size: 16px; font-weight: 600; }

.result-note { font-size: 14px; color: #6b7280; margin-top: 8px; }

.result-actions { display: flex; gap: 12px; margin-top: 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px; border-radius: 10px; font-weight: 700;
  background: #23a455; color: #fff; text-decoration: none;
}
.btn:hover { filter: brightness(0.95); }
.btn-ghost { background: transparent; color: #23a455; border: 1px solid #23a455; }

.result-success .result-ico { filter: none; }
.result-fail .result-ico { filter: none; }

@media (max-width: 640px) {
  .result-hero { text-align: center; }
  .result-ico { width: 80px; height: 80px; }
  .result-title { font-size: 28px; }
  .result-row { grid-template-columns: 1fr; gap: 4px; }
  .result-row .cap { font-size: 13px; }
  .result-row .val { font-size: 16px; }
}