:root{
  --bg:#0f1115; --text:#e7e7ea; --hint:#8a8f98; --link:#3390ec;
  --button:#2a62ff; --button-text:#fff; --sec-bg:#151821;
  --card:rgba(255,255,255,.05); --border:rgba(255,255,255,.09);
  --radius:18px; --shadow:0 8px 24px rgba(0,0,0,.25);
  --orange:#ff9f43; --green:#2ecc71; --red:#ff5c5c;

  /* динамика для HERO */
  --heroT: 0; /* 0..1 — выставляет JS при скролле */
}

/* Светлая тема */
:root[data-theme="light"]{
  --bg:#f6f7fb; --text:#0e1117; --hint:#6b7280; --link:#2563eb;
  --button:#2a62ff; --button-text:#fff; --sec-bg:#ffffff;
  --card:rgba(0,0,0,.04); --border:rgba(0,0,0,.10);
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:18px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Noto Sans";}
.wrap{max-width:780px;margin:0 auto;padding:0 16px 90px}

/* шапка ниже контента и не перехватывает клики */
.hero{
  position: sticky;
  top: 0;
  z-index: 1;          /* ↓ ниже .view */
  padding: 22px 0 12px;
  background: transparent;
  overflow: hidden;     /* обрезаем блюр в пределах шапки */
  pointer-events: none; /* чтобы не «накрывала» кнопки */
  transition: padding .25s ease;
}

/* Псевдослой стекла: ТОЛЬКО в пределах .hero, больше НИКУДА */
.hero::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;   /* <- раньше было bottom:-40px, из-за этого «ехал» на карточки */
  z-index: 0;
  pointer-events: none;

  /* мягкая вуаль + реальный backdrop-blur (размывает фон ПОЗАДИ) */
  background: linear-gradient(
    to bottom,
    rgba(15,17,21, calc(0.50 * var(--heroT))) 0%,
    rgba(15,17,21, calc(0.22 * var(--heroT))) 55%,
    rgba(15,17,21, 0) 100%
  );
  backdrop-filter: saturate(1.1) blur(calc(var(--heroT) * 10px));
  -webkit-backdrop-filter: saturate(1.1) blur(calc(var(--heroT) * 10px));

  /* плавное растворение внутри самого хедера */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 65%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 65%, rgba(0,0,0,0) 100%);
}

:root[data-theme="light"] .hero::before{
  background: linear-gradient(
    to bottom,
    rgba(246,247,251, calc(0.60 * var(--heroT))) 0%,
    rgba(246,247,251, calc(0.28 * var(--heroT))) 55%,
    rgba(246,247,251, 0) 100%
  );
}

/* Контент шапки поверх стекла, сам не блюрится */
/* Контент шапки: резко уезжает и отрезается как за стеной */
.hero-inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  /* скорость ухода вверх + лёгкий зум назад */
  transform: translateY(calc(var(--heroT) * -96px))
             scale(calc(1 - var(--heroT) * 0.08));

  /* быстро «гасим» видимость — почти к нулю после ~60–70px скролла */
  opacity: calc(1 - var(--heroT) * 1.2);

  /* «каменная стена»: сверху растёт зона отсечения */
  clip-path: inset(calc(var(--heroT) * 48px) 0 0 0);

  transition: transform .08s linear, opacity .08s linear, clip-path .08s linear;
}
.hero-logo{width:120px;height:120px;object-fit:cover;border-radius:999px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);}
.hero-title{margin:0;font-size:28px;font-weight:800;text-align:center}
.hero-subtitle{margin:0;color:var(--hint);text-align:center}
.hero--hide{display:none !important}

/* Главная утка */
.duck-anim{ width:min(320px, 70%); aspect-ratio:1/1; object-fit:contain; border-radius:24px; margin:auto; animation:duckFloat 3.2s ease-in-out infinite; filter: drop-shadow(0 10px 28px rgba(0,0,0,.35)); }
@keyframes duckFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* UI */
.grid{display:grid;gap:16px;padding:16px 0}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, opacity .35s ease;}
.card-title{font-size:22px;font-weight:800;margin-bottom:6px}
.row{display:flex;gap:12px;align-items:center;justify-content:space-between}
.muted{color:var(--hint)}
.hidden{display:none}
.country{display:flex;gap:10px;align-items:center}
.flag{font-size:22px}
.list{display:grid;gap:12px}
.price{font-weight:800;font-size:20px}

/* Красивая кнопка «Назад» */
.back{ display:inline-flex; align-items:center; gap:8px; background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:999px; padding:12px 16px; cursor:pointer;
  transition:transform .08s ease, background .18s ease, border-color .18s ease; }
.back:active{transform:scale(.98)}
.back-row{margin:4px 0 10px}

/* Кнопки */
.btn{width:100%;background:var(--button);color:var(--button-text);
  border:none;border-radius:16px;padding:16px 18px;font-weight:800;font-size:16px;
  cursor:pointer;transition:transform .08s ease,filter .08s ease;position:relative;overflow:hidden;}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.small{padding:12px 16px;width:auto;font-size:15px}

/* Badge статуса */
.badge{padding:6px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;white-space:nowrap}
.badge-pending{background:rgba(255,159,67,.12);color:var(--orange);border-color:rgba(255,159,67,.35)}
.badge-paid{background:rgba(46,204,113,.12);color:var(--green);border-color:rgba(46,204,113,.35)}
.badge-refund{background:rgba(255,92,92,.12);color:var(--red);border-color:rgba(255,92,92,.35)}

/* MODAL */
.modal .actions{display:flex;gap:10px;margin-top:12px;justify-content:space-between}
.modal .actions.one{display:block}
.modal .actions.one .btn{width:100%}

/* Свитчер темы */
.toggle{ display:flex; align-items:center; gap:12px; }
.toggle .track{ position:relative; width:54px; height:30px; border-radius:30px; background:var(--card); border:1px solid var(--border); transition:background .18s ease,border-color .18s ease; }
.toggle .thumb{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:var(--text); transform:translateX(0); transition:transform .18s ease, background .18s ease; }
.toggle input{ display:none }
.toggle input:checked + .track{ background:var(--button); border-color:transparent }
.toggle input:checked + .track .thumb{ background:var(--button-text); transform:translateX(24px) }
.toggle-label{ user-select:none }

/* Анимации появления */
.view-enter{animation:fadeUp .22s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(16px)}
.reveal.visible{opacity:1;transform:translateY(0);transition:opacity .55s ease, transform .55s ease}

/* Ripple */
.ripple{position:absolute;border-radius:50%;width:12px;height:12px;background:rgba(255,255,255,.25);pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:ripple .54s ease-out}
@keyframes ripple{from{transform:scale(0);opacity:.25}to{transform:scale(16);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .btn,.card,.reveal,.overlay,.modal,.view-enter,.snackbar{transition:none;animation:none}
}

/* Views enter/exit */
/* каждый экран поверх шапки */
.view{
  position: relative;
  z-index: 2;                 /* ← поднимаем контент выше .hero */
  will-change: transform, opacity;
}
.view-exit{animation:viewOut .14s ease both}
@keyframes viewOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(6px)}}

/* Snackbar */
.snackbar{position:fixed;left:50%;bottom:90px;transform:translate(-50%,8px);opacity:0;transition:opacity .18s ease,transform .18s ease;pointer-events:none;z-index:9999}
.snackbar.show{opacity:1;transform:translate(-50%,0)}

/* ----- TABBAR (постоянный фон) ----- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;
  padding:8px calc(16px + env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-right));
  background:var(--sec-bg);
  border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:center;z-index:10000;
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  height:56px;border-radius:16px;border:1px solid var(--border);
  background:var(--sec-bg);color:var(--text);font-weight:800;cursor:pointer;
  transition:transform .08s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.tab:active{ transform:scale(.98) }
.tab.pressed{ animation:btnPop .18s ease }
.tab[aria-current="page"]{ box-shadow:var(--shadow); outline:2px solid rgba(255,255,255,.08); }
.tab-ico{ width:22px;height:22px; display:block }
.tab-ico svg{ width:100%;height:100%; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.tab-txt{ font-size:14px }

/* Оверлеи */
/* Оверлеи — поверх таббара */
.overlay{
  position: fixed; inset: 0;
  display: grid;
  align-content: center;            /* было place-items:center — заменяем */
  justify-items: center;
  background: rgba(15,17,21,.92);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 12000;
}
:root[data-theme="light"] .overlay{ background: rgba(246,247,251,.92); }
.overlay.show{ opacity:1; visibility:visible; pointer-events:auto; }

/* Коробка модалки — ограничиваем высоту и даём скролл внутри */
.overlay .modal{
  width: min(92vw, 560px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
  overflow: auto;
  transform: translateY(8px); opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
.overlay.show .modal{ transform: translateY(0); opacity:1; }

/* Когда открыта клавиатура — прижимаем модалку к верху, чтобы её не съедало */
.overlay.kb{ align-content: start; }
.overlay.kb .modal{ margin-top: 12px; }
.modal{width:min(560px,94vw);max-height:88dvh;overflow:auto;margin:12px;background:var(--sec-bg);border:1px solid var(--border);border-radius:22px;padding:18px;box-shadow:var(--shadow)}

/* Микропресс */
.btn.pop,.back.pop{animation:btnPop .18s ease}
@keyframes btnPop{0%{transform:scale(1)}50%{transform:scale(.98)}100%{transform:scale(1)}}
.btn-row .btn{width:auto;flex:1 1 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Пилюли стран */
.pill{display:block;border-radius:14px;background:var(--card);border:1px solid var(--border);padding:14px 16px;text-align:left}

/* Крупнее названия стран в магазине */
.country .name{
  font-size: 20px;
  font-weight: 800;
}
@media (max-width: 360px){
  .country .name{ font-size: 18px; }
}

#utya{
  width: 100%;
  min-height: 260px;   /* можно 300–320, если хочешь крупнее */
  display: grid;
  place-items: center;
  overflow: hidden;
}
#utya canvas, #utya svg{
  width: min(380px, 90vw);
  height: auto;
}

/* Экран «Магазин»: мягкий вход всей сцены */
#view-subs{
  padding-top: clamp(28px, 7vh, 72px);  /* зазор под шапкой */
  opacity: 0;
  transform: translateY(6px);
}
#view-subs.is-ready{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .24s ease, transform .24s ease;
}

/* Список стран — стаггер без reveal-on-scroll */
#countries.country-list .pill{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .20s ease, transform .20s ease;  /* мягче и быстрее */
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
#countries.country-list .pill.visible{
  opacity: 1;
  transform: translateY(0);
}

/* Названия стран крупнее */
.country .name{ font-size:20px; font-weight:800; }

@media (prefers-reduced-motion: reduce){
  #countries.country-list .pill{ transition: none; transform:none; opacity:1; }
}

#plans.card{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
#plans.card:not(.hidden){
  opacity: 1;
  transform: translateY(0);
}

/* Экран «Магазин»: мягкий вход всей сцены */
#view-subs{
  opacity: 0;
  transform: translateY(6px);
}
#view-subs.is-ready{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease;
}

/* === HARD FIX: страны в две колонки, без выпираний и внешних отступов === */
#countries {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
  max-width: 520px;
  margin: 0 auto;
}

/* ВАЖНО: дочерние обёртки, которые JS вставляет вокруг кнопок, не должны иметь свои width/margin */
#countries > * {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Сами кликабельные элементы – всегда ровно по колонке, без внешних margin */
#countries .btn,
#countries button,
#countries a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;                 /* ломаем внешние отступы */
  padding: 9px 10px !important;          /* компактнее */
  border-radius: 12px !important;
  min-height: 38px !important;
  font-size: 13.5px !important;
  line-height: 1.15 !important;
  overflow: hidden !important;           /* ничего не распирает */
  box-sizing: border-box !important;
  transform: translateZ(0);
}

/* Иконка/флаг – фикс. размер, не тянет ширину */
#countries .icon, #countries .flag {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}

/* Текст – в одну строку, с троеточием */
#countries .label, #countries .title, #countries span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* На очень узких экранах ещё компактнее */
@media (max-width: 360px) {
  #countries .btn, #countries button, #countries a {
    padding: 7px 9px !important;
    font-size: 13px !important;
    min-height: 36px !important;
  }
}

/* Во время тапа не «выпихиваем» колонку */
#countries .btn:active, #countries button:active, #countries a:active {
  transform: scale(0.985) translateZ(0);
  transform-origin: center;
}

/* ===== iOS-like плавность и "живость" ===== */

/* Глобально делаем более мягкие переходы */
* {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* iOS spring curve */
}

/* Карточки — лёгкое дыхание при наведении */
.card:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Кнопки — приятное нажатие */
.btn:active {
  transform: scale(0.96);
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Мягкое "всплытие" элементов (entry motion) */
.fade-in {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  animation: fadeInSmooth 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes fadeInSmooth {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Плавное исчезновение (exit motion) */
.fade-out {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: fadeOutSmooth 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes fadeOutSmooth {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(6px) scale(0.98); }
}

/* View переходы между страницами */
.view-enter {
  animation: viewSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes viewSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  70%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* При смене табов */
.tab {
  transition: all .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tab[aria-current="page"] {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* Snackbar — мягкий выезд снизу */
.snackbar.show {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity .45s cubic-bezier(0.22, 1, 0.36, 1),
              transform .45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Overlay (модалки) — плавное затемнение и масштаб */
.overlay.show {
  backdrop-filter: blur(10px) saturate(1.2);
  transition: opacity .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.overlay.show .modal {
  transform: translateY(0) scale(1);
  animation: modalPop .45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes modalPop {
  from { transform: translateY(10px) scale(0.96); opacity: 0; }
  70%  { transform: translateY(-2px) scale(1.02); opacity: 1; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}


/* === Пробный период === */
#trial-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  margin-top: 16px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform .25s cubic-bezier(.25,.1,.25,1), box-shadow .25s ease;
}
#trial-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
#trial-card .card-title {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
}
#trial-card .muted {
  font-size: 16px;
  margin-bottom: 12px;
}