:root{
  --bg: #0b1220;
  --bg-2:#0f172a;
  --card:#111a2e;
  --text:#e6edf3;
  --muted:#94a3b8;
  --accent:#a3e635; /* lime-400 */
  --accent-2:#84cc16; /* lime-500 */
  --ring: rgba(255,255,255,.12);
  --radius: 16px;

  /* Pink matte palette */
  --pp-rose:    #ff4d8d;
  --pp-rose-12: rgba(255,77,141,.12);
  --pp-rose-08: rgba(255,77,141,.08);
  --pp-rose-06: rgba(255,77,141,.06);
  --pp-rose-24: rgba(255,77,141,.24);

  /* Marquee */
  --marquee-speed: 8s;
  --brand-gap: 28px;
  --brand-size: 36px;

  /* Hero media max width */
  --hero-img-max: clamp(260px, 60vw, 760px);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, #1e293b33, transparent),
    radial-gradient(900px 500px at 100% 10%, #22c55e12, transparent),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  /* безопасные зоны iOS */
  padding-left: env(safe-area-inset-left,0);
  padding-right: env(safe-area-inset-right,0);
}
img{ max-width:100%; display:block; }
.container{ width:100%; max-width:1160px; margin:0 auto; padding:0 20px; }

/* A11y focus */
:focus-visible{ outline:2px solid #6ee7b7; outline-offset:2px; border-radius:8px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; border-radius: 14px; padding:12px 18px;
  font-weight:600; text-decoration:none; transition:.2s;
  border:1px solid var(--ring); color:var(--text);
  min-height:44px; /* удобно тапать */
}
.btn-small{ padding:10px 14px; font-size:14px; min-height:40px; }
.btn-accent{ background:var(--accent); color:#0a0f1a; border-color:transparent; }
.btn-accent:hover{ box-shadow:0 10px 30px rgba(163,230,53,.35); transform:translateY(-1px); }
.btn-ghost{ background: transparent; color:var(--text); }
.btn-ghost:hover{ border-color:#ffffff33; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,18,32,.7); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--ring);
  padding-left: env(safe-area-inset-left,0);
  padding-right: env(safe-area-inset-right,0);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:600; }
.brand-mark{ height:36px; width:36px; border-radius:12px; background:var(--accent); color:#0a0f1a; display:grid; place-items:center; font-weight:800; }
.nav{ display:flex; align-items:center; gap:16px; }
.nav-list{ display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.nav-list a{ color:#cbd5e1; text-decoration:none; font-size:14px; padding:8px 10px; border-radius:10px; }
.nav-list a:hover{ color:#fff; background:#ffffff10; }
.nav-toggle{ display:none; background:none; border:0; padding:8px; }
.nav-toggle-bar{ width:22px; height:2px; background:#cbd5e1; display:block; margin:4px 0; border-radius:2px; }

/* Hero */
.section{ padding:64px 0; }
.hero{ padding-top:88px; }
.hero-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; }
.hero-text h1{
  font-size: clamp(32px, 6vw, 64px); line-height:1.1; margin:12px 0; color:#fff;
  text-shadow:
    0 0 1px rgba(255,255,255,0.9),
    0 0 6px rgba(255,255,255,0.6),
    0 0 16px rgba(255,77,141,0.45),
    0 2px 28px rgba(255,77,141,0.35);
}
.hero-text p{ font-size:18px; color:#d0d8f0; max-width:620px; }
.badge{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:#c6f6d5;
  background: #a3e6351a; border:1px solid #84cc1626; padding:6px 10px; border-radius:999px;
}
.hero-cta{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:18px; margin-top:16px; color:#cbd5e1; font-size:14px; flex-wrap:wrap; }
.hero-media .hero-card{ padding:0; background:transparent; border:0; box-shadow:none; transform: scale(1.12); transform-origin:center right; }
.card{
  background: linear-gradient(180deg, #0f172a, #0b1220);
  border:1px solid var(--ring);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

/* Hero media (адаптивная, без фикс. высоты) */
.hero-art{
  position: relative;
  overflow: visible;
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-img{
  width: var(--hero-img-max);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.35))
    drop-shadow(0 8px 26px rgba(255,77,141,.45))
    brightness(1.06);
  transition: transform .5s ease;
}
.hero-art:hover .hero-img{ transform: scale(1.05); }

.hero-emoji{ font-size:64px; margin-bottom:6px; }
.hero-art-title{ font-weight:700; font-size:18px; }
.muted{ color:var(--muted); }
.tiny{ font-size:12px; }

/* Trust */
.trust-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.trust-item{ text-align:center; padding:12px 0; border:1px solid var(--ring); border-radius:12px; opacity:.75; }

/* Features */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature{ padding:20px; }
.feature .ico{
  height:40px; width:40px; display:grid; place-items:center; background:#a3e63524; color:#bef264;
  border:1px solid #84cc1633; border-radius:12px; margin-bottom:8px;
}

/* Chips */
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{ padding:10px 14px; border-radius:999px; background:#ffffff0a; border:1px solid var(--ring); font-size:14px; }
.chip:hover{ border-color:#ffffff33; }

/* Promo */
.promo{ padding:22px; display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.promo-kicker{ color:#bef264; font-weight:700; font-size:12px; letter-spacing:.02em; }

/* Pricing */
.plan{ padding:22px; position:relative; }
.plan.popular{ box-shadow: 0 0 0 1px #a3e63566; }
.plan .ribbon{ position:absolute; left:18px; top:-10px; background:var(--accent); color:#0a0f1a; font-size:12px; font-weight:700; padding:4px 8px; border-radius:999px; }
.price{ display:flex; align-items:baseline; gap:8px; }
.price .num{ font-size:40px; font-weight:800; }
.price .per{ color:var(--muted); }
.plan-features{ margin-top:10px; color:var(--muted); font-size:14px; }
.plan-features li{ display:flex; gap:8px; align-items:center; margin:6px 0; }
.plan .btn{ margin-top:14px; }

/* Steps */
.step{ padding:18px; }

/* FAQ */
.faq-item{ border:1px solid var(--ring); border-radius:14px; padding:16px 18px; }
.faq-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; background:transparent; color:var(--text); border:0; font-weight:600; font-size:16px; text-align:left; padding:0; }
.faq-content{ display:none; margin-top:10px; color:var(--muted); }
.faq-item.open .faq-content,
.faq-item.is-open .faq-content,
.faq .is-open > .faq-content{ display:block; }

/* Footer */
.site-footer{ border-top:0; position: relative; overflow: hidden; background: transparent; }
.footer-top{ display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:16px; padding:18px 0; }
.footer-brand{ display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:600; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; padding:28px 0; gap:16px; }
.footer-brand .brand-logo{ filter: drop-shadow(0 0 6px rgba(255,77,141,.45)); }

.footer-nav{ display:flex; gap:16px; }
.footer-nav a{ color:#cbd5e1; text-decoration:none; font-weight:500; }
.footer-nav a:hover{ color:#fff; }

.footer-rule{ height:1px; width:100%; background: var(--ring); display:none; } /* гасим линию */

.footer-bottom{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px;
  padding:14px 0 22px;
  color:#9aa7b9; font-size:14px; line-height:1.4;
}
.footer-bottom .legal-link{ color:#cbd5e1; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#334155; }
.footer-bottom .legal-link:hover{ color:#ffffff; text-decoration-color:#94a3b8; }
.footer-bottom .dot{ opacity:.35; }
.footer-bottom .heart{ display:inline-block; transform: translateY(1px); filter: drop-shadow(0 0 6px rgba(244,114,182,.55)); }

/* matte footer backdrop */
.site-footer::before{
  content:"";
  position: absolute; inset: -24px 0 -24px 0;
  background:
    radial-gradient(900px 240px at 50% -80%, rgba(255,77,141,.08), transparent),
    linear-gradient(180deg, rgba(8,12,20,.95), rgba(6,10,18,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 -30px 60px rgba(0,0,0,.45);
  z-index: 0;
}
.site-footer > .container{ position: relative; z-index: 1; }

.site-footer .footer-nav{
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, var(--pp-rose-06), var(--pp-rose-08));
  border: 1px solid var(--pp-rose-24);
  border-radius: 999px; padding: 6px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.22);
}
.site-footer .footer-nav a{
  color: #e6edf3; text-decoration: none; padding: 8px 12px; border-radius: 10px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  border: 1px solid transparent;
}
.site-footer .footer-nav a:hover{
  background: var(--pp-rose-12); border-color: var(--pp-rose-24); color: #ffffff;
}

/* Fixed scratches layer */
.fx-scratches{ position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.fx-scratches .scratch{
  position: absolute; opacity: .95; mix-blend-mode: screen;
  filter: brightness(1.05) saturate(1.6)
          drop-shadow(0 0 10px rgba(255,77,141,.55))
          drop-shadow(0 0 24px rgba(255,77,141,.35));
  animation: scratchPulse 3.6s ease-in-out infinite;
}
.scratch--tr{ top: 40px; right: 40px; width: 260px; }
.scratch--bl{ bottom: 58px; left: 40px; width: 210px; transform: rotate(-12deg); }

@keyframes scratchPulse{
  0%, 100% {
    filter: brightness(1.00) saturate(1.5)
            drop-shadow(0 0 8px rgba(255,77,141,.45))
            drop-shadow(0 0 20px rgba(255,77,141,.28));
    transform: translateY(0);
  }
  50% {
    filter: brightness(1.08) saturate(1.7)
            drop-shadow(0 0 14px rgba(255,77,141,.60))
            drop-shadow(0 0 30px rgba(255,77,141,.45));
    transform: translateY(-2px);
  }
}

/* Marquee */
.marquee{
  overflow: hidden; border: 0 !important; background: transparent !important; border-radius: 0 !important; padding: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display: inline-flex; gap: var(--brand-gap); padding: 0; white-space: nowrap;
  will-change: transform;
  animation: brandRun var(--marquee-speed) linear infinite !important;
}
.marquee-track > *{ flex: 0 0 auto; }
.marquee-item{ display:inline-flex; align-items:center; }
.brand-img{
  height: var(--brand-size); width: auto; display: block; opacity: .85; filter: grayscale(10%);
  transition: opacity .2s, transform .2s, filter .2s;
}
.brand-img:hover{ opacity:1; filter:none; transform:translateY(-1px); }
@keyframes brandRun{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* Reduce motion: бегущую строку НЕ выключаем */
@media (prefers-reduced-motion: reduce){
  .marquee-track{
    animation: brandRun var(--marquee-speed) linear infinite !important;
  }
  /* «царапины»: оставь, если тоже должны анимироваться; иначе просто удали строку */
  .fx-scratches .scratch{
    animation: scratchPulse 3.6s ease-in-out infinite !important;
  }
}


/* Highlight blocks */
.highlights{ display:grid; grid-template-columns:2fr 2fr 2fr; gap:18px; }
.hl-card{ border:1px solid var(--ring); border-radius:24px; padding:22px; background:var(--card); }
.hl-card.lime{ background:#a3e635; color:#0a0f1a; }
.hl-card.lime .muted{ color:#0a0f1acc; }
.hl-card.code pre{ background:#0b1220; color:#a7f3d0; padding:14px; border-radius:14px; overflow:auto; border:1px solid #134e4a; }
.os-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
.os-badge{ background:#ffffff; color:#111827; border-radius:999px; padding:10px 12px; text-align:center; font-weight:600; }

/* ======= Responsive ======= */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns:1fr; }
  .fx-scratches{ display:none; }
}
@media (max-width: 960px){
  .highlights{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .grid-3{ grid-template-columns:1fr 1fr; }
  .trust-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 740px){
  .container{ padding:0 16px; }
  .hero-media .hero-card{ transform: none; }  /* убираем излишний масштаб */
}
@media (max-width: 640px){
  /* Mobile menu as dropdown */
  .nav-toggle{ display:block; }
  .nav-list{
    display:none; position:absolute; right:16px; top:60px; background:var(--bg-2);
    padding:12px; border-radius:12px; border:1px solid var(--ring);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    min-width: 220px;
  }
  .nav-list.open{ display:block; }
  .nav-list a{ display:block; padding:10px 12px; }

  .grid-3{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-text h1{
    font-size:28px;
    text-shadow:
      0 0 2px rgba(255,255,255,0.9),
      0 0 10px rgba(255,255,255,0.5),
      0 0 16px rgba(255,77,141,0.35);
  }

  /* Скрыть дублирующую CTA в шапке */
  .site-header .js-telegram.hide-mobile{ display:none; }

  .brand-logo{ height:28px; }

  .footer-top{ grid-template-columns: 1fr; gap:12px; text-align:center; }
  .footer-nav{ justify-content:center; }
  .footer-top .btn{ justify-self:center; }

  :root{
    --marquee-speed: 10s;
    --brand-gap: 22px;
    --brand-size: 22px;
    --hero-img-max: clamp(220px, 70vw, 520px);
  }
}

/* общее для лого */
.brand-logo{
  height:58px;       /* десктопная высота в шапке */
  width:auto;        /* сохраняем пропорции */
  object-fit:contain;
  display:block;
}

/* во футере лого меньше (если нужно отличать от шапки) */
.site-footer .brand-logo{ height:46px; }

/* ===== Flags in locations ===== */
#locations img.flag{ height: 64px; width: auto; }
@media (max-width: 900px){ #locations img.flag{ height: 48px; } }
@media (max-width: 640px){ #locations img.flag{ height: 36px; } }

/* Контейнер ряда флагов = горизонтальный скролл по центру */
#locations .chips{
  display: inline-flex;
  gap: 14px;

  /* скролл */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  /* чтобы ряд не переносился */
  flex-wrap: nowrap;

  /* центрируем сам «трек» */
  justify-content: center;
  width: 100%;
  padding: 8px 6px;

  /* приятные края и скрытая полоска */
  scrollbar-width: none;          /* Firefox */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

  /* snap — чтобы чипы ловились по центру при броске */
  scroll-snap-type: x mandatory;

  /* жесты: курсор «рука» */
  cursor: grab;
}
#locations .chips:active { cursor: grabbing; }
#locations .chips::-webkit-scrollbar{ display: none; }
#locations .chip{ scroll-snap-align: center; white-space: nowrap; }

/* ===== Modal (privacy) ===== */
.modal{ position:fixed; inset:0; display:none; z-index:1000; }
.modal.is-open{ display:block; }

.modal__overlay{
  position:absolute; inset:0;
  background: rgba(2,6,23,.65);
  backdrop-filter: blur(4px);
}

.modal__dialog{
  position:relative;
  margin:6vh auto;
  max-width:820px; width:calc(100% - 32px);
  max-height:86vh; overflow:auto;
  background: var(--bg-2);
  border:1px solid var(--ring);
  border-radius:20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding:24px 20px 20px;
}

.modal__close{
  position:sticky; top:0; float:right;
  border:0; background:transparent; color:#cbd5e1;
  font-size:20px; line-height:1; padding:8px; border-radius:10px;
}
.modal__close:hover{ background:#ffffff14; color:#fff; }
.modal__content{ color:var(--muted); }
.modal__content h4{ color:#e6edf3; margin:18px 0 8px; }
.modal__content p, .modal__content li{ font-size:14.5px; }

body.modal-open{ overflow:hidden; }

/* на очень узких — плотнее */
@media (max-width:640px){
  .modal__dialog{ padding:18px 14px; border-radius:16px; }
}




/* --- FIX 1: футер раньше в 1 колонку, кнопка ниже --- */
@media (max-width: 860px){
  .footer-top{
    grid-template-columns: 1fr;       /* одна колонка */
    gap: 12px;
    text-align: center;
  }
  .footer-top .btn{ justify-self: center; }
  .footer-nav{ justify-content: center; }
}

/* --- FIX 2: пилюля-меню в футере не ломает ширину --- */
.site-footer .footer-nav{
  flex-wrap: wrap;            /* можно переносить */
  max-width: 100%;
}
.site-footer .footer-nav a{
  white-space: nowrap;        /* аккуратные «таблетки» */
}
@media (max-width: 360px){
  .site-footer .footer-nav a{ padding-inline: 8px; } /* компактнее на сверхузких */
}

/* --- FIX 3: страховка от горизонтального скролла --- */
html, body{ overflow-x: hidden; }

/* на всякий случай: все карточки не вылезают за контейнер */
.card, .hl-card, .feature, .promo, .step, .plan, .faq-item{
  max-width: 100%;
}



/* --- Stop horizontal overflow on highlights / sections --- */
.section > .container{ overflow-x: clip; }

/* Страховка: элементы внутри карточек не становятся шире контейнера */
.highlights,
.hl-card{ max-width: 100%; }
.hl-card > *{ max-width: 100%; }

/* Код-блок не раздвигает карточку: внутри — свой скролл/перенос */
.hl-card.code pre{
  max-width: 100%;
  overflow: auto;
  white-space: pre;            /* и скролл, и ровный вид */
}
@media (max-width: 480px){
  .hl-card.code pre{ white-space: pre-wrap; word-break: break-word; }
  /* на сверхузких лучше переносить длинные токены */
}

/* Пилюля-меню в футере не раздувает ширину */
.site-footer .footer-nav{ flex-wrap: wrap; max-width: 100%; }
.site-footer .footer-nav a{ white-space: nowrap; }
@media (max-width: 360px){
  .site-footer .footer-nav a{ padding-inline: 8px; }
}

/* Сетка «highlights» — безопасные внутренние поля на мобиле */
@media (max-width: 640px){
  .highlights{ grid-template-columns: 1fr; padding-inline: 1px; } /* сглаживаем субпиксельные округления */
}

/* Глобальная страховка: никаких горизонтальных полос */
html, body{ overflow-x: hidden; }





/* === MOBILE OVERFLOW FIXES === */

/* 1) Внутри гридов элементы могут сжиматься (иначе вылезают за экран) */
.highlights > *,
.grid-3 > *{
  min-width: 0;            /* ключевая строка */
}

/* 2) Карточки и контентные блоки не шире контейнера/экрана */
.hl-card,
.feature,
.promo,
.step,
.plan,
.faq-item{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 3) На телефоне подстраиваемся ровно под видимую ширину (минус отступы контейнера) */
@media (max-width: 640px){
  .hl-card,
  .feature,
  .promo,
  .step,
  .plan,
  .faq-item{
    max-width: calc(100vw - 32px);   /* 16px + 16px паддинги контейнера */
    margin-inline: auto;              /* центрируем */
  }
}

/* 4) Код-блок не раздвигает карточку */
.hl-card.code pre{
  max-width: 100%;
  overflow: auto;          /* свой скролл при необходимости */
  white-space: pre-wrap;   /* переносим длинные строки */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 5) Подстраховка: никаких горизонтальных полос */
html, body{ overflow-x: hidden; }

/* 6) Контейнер секции не даёт теням/маскам создавать «призрачную» ширину */
.section > .container{ overflow-x: clip; }



/* OS-бейджи: адаптивная сетка без вылета за экран */
.os-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 1–4 колонки по месту */
  gap: 10px;
}

.os-badge{
  width: 100%;                 /* бейдж занимает всю ячейку */
  text-align: center;
  white-space: nowrap;         /* не ломаем слова внутри */
}

/* Сверхузкие экраны — делаем бейджи компактнее */
@media (max-width: 360px){
  .os-grid{ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
  .os-badge{ padding: 8px 10px; font-size: 14px; }
}






/* ===== Locations: компактные икон-чипы с флагом ===== */
#locations .chips{
  gap: 16px;
  justify-content: flex-start; /* на десктопе не растягиваем по всей ширине */
}

#locations .chip{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  padding: 96px 14px 14px;            /* место под круг и подпись */
  min-width: 120px;                    /* одинаковая оптика ширины */
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--ring);
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}

#locations .chip:hover{
  transform: translateY(-2px);
  border-color: #ffffff2b;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

/* Круглая «иконка» за флагом */
#locations .chip::before{
  content: "";
  position: absolute;
  top: 16px; left: 50%;
  width: 68px; height: 68px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(255,255,255,.12), transparent),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08));
  box-shadow:
    inset 0 0 0 1px var(--ring),
    0 8px 24px rgba(0,0,0,.35);
}

/* Сам флаг — чуть меньше круга, с мягкими углами */
#locations .chip .flag{
  position: absolute;
  top: 28px; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 36px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(0,0,0,.35);
  image-rendering: -webkit-optimize-contrast; /* чётче на ретине */
}

/* Подпись под флагом */
#locations .chip{ color:#e6edf3; font-weight:600; }
#locations .chip small{ display:block; color:var(--muted); font-weight:500; }

/* ——— Мобила: поменьше круг/флаг, уже чип ——— */
@media (max-width: 640px){
  #locations .chip{
    padding: 84px 12px 12px;
    min-width: 108px;
  }
  #locations .chip::before{ width: 60px; height: 60px; top: 14px; }
  #locations .chip .flag{ width: 44px; height: 28px; top: 24px; }
  #locations .chips{ gap: 12px; }
}

/* На сверх-узких — ещё компактнее */
@media (max-width: 360px){
  #locations .chip{
    padding: 76px 10px 12px;
    min-width: 96px;
  }
  #locations .chip::before{ width: 54px; height: 54px; top: 12px; }
  #locations .chip .flag{ width: 40px; height: 26px; top: 21px; }
}






/* ===== Scroll hint for flags ===== */
#locations .chips{ position: relative; }

/* Пузырёк со стрелками справа (показывается, пока есть класс .hint) */
@media (max-width: 640px){
  #locations .chips.hint::after{
    content: "››";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px; font-weight: 700; line-height: 1;
    color: #cbd5e1;
    background: rgba(2,6,23,.65);
    border: 1px solid var(--ring);
    border-radius: 999px;
    padding: 6px 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,.35);
    pointer-events: none;
    animation: ppv-nudge 1.2s ease-in-out infinite;
  }
}

/* Лёгкое «подталкивание» вправо-влево */
@keyframes ppv-nudge{
  0%,100%{ transform: translate(0, -50%); opacity:.55; }
  50%    { transform: translate(-6px, -50%); opacity: 1; }
}



/* Мобильная уплотнённая вёрстка секций */
@media (max-width: 640px){
  .section{ padding: 36px 0; }             /* было 64px */
  .hero{ padding: 56px 0 20px; }           /* сверху меньше, снизу ещё компактнее */
  .hero-grid{ gap: 16px; }                 /* вместо ~32px */
  .trust{ padding-top: 12px; }             /* чтобы бегущая строка поджалась к герою */

  /* иллюстрация в герое чуть крупнее */
  :root{ --hero-img-max: clamp(240px, 78vw, 560px); }
}