/* ==========================================================
   CAMILLA — dark / glass / herobrine
   Чистый чёрный, костяной свет, кровь как единственный акцент
   ========================================================== */

:root{
  --void:     #000000;
  --void-2:   #000000;
  --void-3:   #0B0A0A;

  --glass:    rgba(255,255,255,.038);
  --glass-2:  rgba(255,255,255,.065);
  --line:     rgba(255,255,255,.085);
  --line-2:   rgba(255,255,255,.17);

  --txt:      #F1EEE9;
  --dim:      rgba(241,238,233,.55);
  --dim-2:    rgba(241,238,233,.33);

  --bone:     #F6F1E8;
  /* Акцент подсветки — белый: стиль чёрно-белый, цвет в интерфейсе не
     участвует. Имена оставлены прежними, чтобы правка была в одном месте. */
  --rose:     #F2F2F4;
  --rose-2:   rgba(255,255,255,.28);
  --rose-dim: rgba(255,255,255,.14);
  --blood:    #B9242E;
  --blood-2:  #E0333D;

  --wrap: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --out:  cubic-bezier(.16,1,.3,1);

  /* Все прежние варианты были из одного семейства — нейтральные гротески
     (Inter, Golos, Manrope), они отличаются друг от друга деталями, которых на
     экране не видно. Поэтому здесь смена не оттенка, а типа.
     --display — Jost: геометрический шрифт на круге, из линии Futura. Крупный
     кегль он держит за счёт формы, а не за счёт жира, поэтому «CAMILLA» и
     названия секций читаются дорого при лёгком начертании.
     --ui — Nunito Sans: гуманистический, с мягкими окончаниями штрихов. В
     мелком кегле геометрия читается хуже, поэтому абзацы и подписи набраны
     не заголовочным шрифтом, а тем, что рисовался под текст. */
  --ui:      "Nunito Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --display: "Jost","Nunito Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:    "Roboto Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--void); }

body{
  margin:0;
  background:var(--void);
  color:var(--txt);
  font-family:var(--ui);
  font-size:16px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500; line-height:1.05; letter-spacing:-.028em;
  margin:0; text-wrap:balance;
}
p{ margin:0; }
ul,dl{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
canvas,svg,img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

.wrap{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(20px,4vw,56px);
  position:relative; z-index:2;
}

/* ---------- поверхность ----------
   Стекло с толщиной.
   Плоская полупрозрачная заливка с ровной рамкой — это не стекло, а матовый
   пластик: у настоящей пластины край ловит свет неравномерно, сверху идёт
   блик, снизу — тень от собственной толщины.
   Здесь три слоя. Заливка сверху вниз чуть светлее у кромок — так ведёт себя
   стекло, у которого свет проходит через скос. ::before рисует фаску:
   градиентная рамка, яркая на верхней грани и слабая на нижней, — она и даёт
   ощущение объёма. ::after кладёт глянцевый блик, сходящий на нет к середине
   высоты. */
.glass{
  position:relative;
  /* Тот же материал, что у выпадающих меню: тёмная заливка с прозрачностью.
     Белый градиент поверх чёрного давал светлую плашку — видно заливку, а не
     то, что под ней. */
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:
    /* тень на фон — пластина висит над страницей */
    0 28px 64px -40px rgba(0,0,0,.95),
    /* внутренняя тень снизу: толщина стекла */
    inset 0 -22px 30px -26px rgba(0,0,0,.75);
  /* Свой композитный слой против светлой кромки. isolation здесь стоять не
     может: он создаёт backdrop root, и backdrop-filter остаётся без подложки —
     стекло перестаёт показывать то, что под ним. */
  transform:translateZ(0);
}
/* Градиентной фаски по контуру больше нет: на скруглениях она читалась яркой
   дугой в углу — обводкой ради обводки. Грань теперь обычная и ровная, её
   задаёт border в правиле выше. */
/* Глянцевой плёнки поверх карточки нет: любой градиент на всю площадь
   читается заливкой и убивает ощущение прозрачности. Свет на поверхность
   даёт только фаска по контуру. */

/* Фон — ровный чёрный, без единой подсветки.
   Здесь по очереди стояли: белая засветка, сетка, кольца, розовые пятна, шары,
   осколки, фонарь и дымка. Все они решали одну задачу — дать стеклу то, что
   оно показывает, — и все читались пятнами на пустом экране. Раз пятен быть не
   должно, стекло остаётся тёмной полупрозрачной пластиной: показывать ему
   нечего, и это осознанный размен, а не недоделка. */
.dust{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.7; }
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(5) infinite;
}
@keyframes grainShift{
  0%,100%{ transform:translate(0,0); }
  25%{ transform:translate(-3%,2%); }
  50%{ transform:translate(2%,-2%); }
  75%{ transform:translate(-2%,-3%); }
}

main,.foot,.nav{ position:relative; z-index:2; }

/* ==========================================================
   ШАПКА
   ========================================================== */
/* Шапка — не полоса во всю ширину, а плавающая капсула.
   Полоса с жёсткой нижней границей делит экран надвое и на тёмной странице
   читается наклейкой поверх макета. Капсула висит в отступе от края, стекло
   у неё то же, что у карточек, и граница только своя — страница под ней
   продолжается, а не обрезается.
   В самом верху страницы капсула прозрачная: там за ней ничего нет, и рамка
   вокруг пустоты выглядела бы рамкой ради рамки. Стекло появляется при
   прокрутке — тогда под шапку и правда что-то заезжает. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding-top:16px;
  transition:padding-top .45s var(--ease);
}
.nav.stuck{ padding-top:10px; }

.nav__in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:66px;
  border-radius:99px;
  border:1px solid transparent;
  padding-inline:clamp(14px,2vw,22px);
  transition:background .45s var(--ease), border-color .45s var(--ease),
             box-shadow .45s var(--ease), height .45s var(--ease);
}
.nav.stuck .nav__in{
  height:60px;
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.09);
  backdrop-filter:blur(48px) saturate(1.9);
  -webkit-backdrop-filter:blur(48px) saturate(1.9);
  box-shadow:
    0 22px 54px -34px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.07);
}
@media (max-width:820px){
  .nav{ padding-top:0; }
  .nav.stuck{ padding-top:0; }
  .nav__in{ border-radius:0; height:70px; }
  .nav.stuck .nav__in{ height:66px; border-inline-color:transparent; }
}

.mark img{
  width:38px; height:38px; border-radius:9px;
  border:1px solid var(--line);
  filter:saturate(.9) contrast(1.05);
  transition:transform .5s var(--out), box-shadow .5s var(--ease), border-color .4s;
}
.mark:hover img{
  transform:translateY(-1px) scale(1.03);
  border-color:var(--line-2);
  box-shadow:0 0 26px -6px rgba(255,255,255,.35);
}

.nav__links{ display:flex; gap:clamp(14px,2.2vw,32px); }
.nav__links a{
  font-size:13.5px; color:var(--dim); position:relative; padding:6px 0;
  letter-spacing:.01em; transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:linear-gradient(90deg,transparent,var(--bone));
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--out);
}
.nav__links a:hover{ color:var(--txt); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__act{ display:flex; align-items:center; gap:12px; }

.ghost{
  font-size:13.5px; color:var(--dim);
  padding:10px 17px; border:1px solid rgba(255,255,255,.09); border-radius:99px;
  background:rgba(255,255,255,.045); backdrop-filter:blur(16px) saturate(1.4);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ghost:hover{ color:var(--txt); border-color:var(--line-2); background:var(--glass-2); }
.ghost--lg{ padding:15px 27px; font-size:14.5px; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ui); font-size:13.5px; font-weight:600;
  color:#0A0808; background:var(--bone);
  padding:11px 20px; border-radius:99px;
  position:relative; isolation:isolate; overflow:hidden;
  transition:transform .3s var(--out), box-shadow .35s var(--ease), color .3s var(--ease);
}
.btn span{ transition:transform .35s var(--out); }
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 44px -22px rgba(255,255,255,.55); }
.btn:hover span{ transform:translateX(4px); }
.btn--lg{ padding:16px 30px; font-size:15px; }

/* аккаунт в шапке */
.acc{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 16px 6px 6px; border-radius:99px;
  border:1px solid var(--line); background:var(--glass);
  backdrop-filter:blur(10px);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .35s var(--out);
}
.acc:hover{ border-color:var(--line-2); background:var(--glass-2); }
.acc__av{
  width:30px; height:30px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bone); color:#0A0808;
  font-family:var(--display); font-size:13px; font-weight:500;
  box-shadow:0 0 18px -6px rgba(255,255,255,.7);
}
.acc__n{
  font-size:13.5px; color:var(--txt);
  max-width:15ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.burger{ display:none; width:34px; height:34px; padding:8px; }
.burger i{ display:block; height:1.4px; background:var(--txt); margin:5px 0; transition:transform .35s var(--out); }
.nav.open .burger i:first-child{ transform:translateY(3.2px) rotate(45deg); }
.nav.open .burger i:last-child{ transform:translateY(-3.2px) rotate(-45deg); }

@media (max-width:980px){ .nav__act .ghost{ display:none; } }
@media (max-width:820px){
  .burger{ display:block; order:3; }
  .nav__links{
    position:absolute; top:70px; left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(4,4,4,.97); backdrop-filter:blur(20px);
    border-block:1px solid var(--line);
    padding:6px clamp(20px,4vw,56px) 16px;
    clip-path:inset(0 0 100% 0); pointer-events:none;
    transition:clip-path .45s var(--out);
  }
  .nav.open .nav__links{ clip-path:inset(0 0 0 0); pointer-events:auto; }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-top:118px; padding-bottom:72px; overflow:hidden;
}
.scene{
  position:absolute; top:50%; right:-2%;
  width:min(820px,66vw); aspect-ratio:1;
  transform:translateY(-50%);
  z-index:1; pointer-events:none;
}
/* Текст стоял вплотную к левому краю обёртки. Это было под меч: он уходил из
   правой руки влево-вниз, то есть ровно в ту половину кадра, и всё, что стояло
   правее, он бы задел. Меча нет, руки прижаты к фигуре, и слева от неё
   освободилась полоса — блок сдвинут в неё, ближе к центру.
   Сдвиг снимается вместе с самой моделькой: ниже 900px сцена уезжает за край и
   гаснет, и отступ слева стал бы просто дырой. */
.hero__in{
  display:flex; flex-direction:column; align-items:flex-start; gap:26px;
  padding-left:clamp(0px,5vw,96px);
}
@media (max-width:900px){ .hero__in{ padding-left:0; } }

.chip{
  font-family:var(--ui);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line); border-radius:99px; padding:7px 15px;
  display:inline-flex; align-items:center; gap:13px;
  background:var(--glass); backdrop-filter:blur(10px);
}
.dot{
  position:relative; width:5px; height:5px; flex:none;
  border-radius:50%; background:#fff;
  box-shadow:0 0 3px 0 rgba(255,255,255,.8), 0 0 7px 1px rgba(255,255,255,.28);
}
/* ореол не должен наползать на текст: радиус меньше отступа до букв */
.dot::before{
  content:""; position:absolute; left:50%; top:50%;
  width:17px; height:17px; margin:-8.5px 0 0 -8.5px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.42) 0%,rgba(255,255,255,.12) 38%,rgba(255,255,255,0) 70%);
  filter:blur(1.5px);
  animation:bloom 3.2s ease-in-out infinite;
}
@keyframes bloom{
  0%,100%{ opacity:.55; transform:scale(.9); }
  50%{ opacity:1; transform:scale(1.18); }
}

.hero__title{
  font-size:clamp(46px,8.4vw,124px);
  font-weight:500; letter-spacing:-.035em; line-height:1;
  text-shadow:0 0 60px rgba(255,255,255,.12);
}
.hero__sub{ font-size:clamp(15px,1.2vw,17.5px); color:var(--dim); max-width:44ch; }
.hero__act{ display:flex; flex-wrap:wrap; align-items:center; gap:13px; }

/* ── HERO SOCIALS ────────────────────────────────────────────────────────
   Брендовые кнопки Discord / Telegram / YouTube в hero-CTA.
   DS и TG — идентичные круги 34×34.  YT — брендовый squircle 42×30
   (пропорция ≈1.4:1 как настоящий YouTube-логотип) с крупным белым
   play-треугольником. */
.hero__socials{ display:inline-flex; align-items:center; gap:9px; }
.social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
}
.social-btn svg{ display:block; }
.social-btn--discord{  background:#5865F2; }
.social-btn--telegram{ background:transparent; }
.social-btn--youtube{  background:#FF0000; border-radius:28%; width:40px; height:28px; }
.social-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.social-btn--discord:hover{  box-shadow:0 8px 18px rgba(88,101,242,.45); }
.social-btn--telegram:hover{ box-shadow:0 8px 18px rgba(34,158,217,.45); }
.social-btn--youtube:hover{  box-shadow:0 8px 18px rgba(255,0,0,.40); }

/* блоки стоят на одинаковом расстоянии друг от друга */
.hero__stats{
  display:flex; flex-wrap:wrap;
  gap:clamp(26px,4.4vw,64px);
  margin-top:12px; padding-top:22px;
  border-top:1px solid var(--line);
  width:100%; max-width:620px;
}
.hero__stats > div{ flex:0 0 auto; }
.hero__stats dt{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim-2); margin-bottom:8px;
}
.hero__stats dd{
  margin:0; font-family:var(--display);
  font-size:clamp(20px,2.3vw,30px); font-weight:500;
  letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums;
}
.hero__fade{
  position:absolute; left:0; right:0; bottom:0; height:200px;
  background:linear-gradient(to top,var(--void),transparent);
  z-index:1; pointer-events:none;
}
@media (max-width:1080px){ .scene{ right:-16%; width:min(720px,92vw); opacity:.8; } }
@media (max-width:680px){
  .scene{ top:16%; right:-26%; opacity:.5; }
  .hero__stats{ gap:16px; }
  .hero__stats dd{ font-size:19px; }
}

/* ==========================================================
   СЕКЦИИ
   ========================================================== */
.sec{ padding-block:clamp(74px,10vw,140px); position:relative; }
.sec + .sec{ border-top:1px solid var(--line); }

.sec__head{
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(16px,2vw,26px); row-gap:16px;
  align-items:end; margin-bottom:clamp(34px,4.5vw,60px);
}
.sec__title{ grid-column:1 / 8; font-size:clamp(28px,4.2vw,54px); font-weight:500; }
.sec__note{
  grid-column:9 / -1; align-self:end;
  font-size:14px; color:var(--dim);
  border-left:1px solid var(--line); padding-left:18px;
}
.sec__head--sm{ margin-bottom:clamp(26px,3vw,40px); }
@media (max-width:940px){
  .sec__title,.sec__note{ grid-column:1 / -1; }
  .sec__note{ border-left:none; border-top:1px solid var(--line); padding:14px 0 0; }
}

/* ---------- панель возможностей ---------- */
.panel__lead{
  font-family:var(--display); font-weight:500;
  font-size:clamp(16px,1.7vw,22px); letter-spacing:-.01em;
  margin-bottom:16px;
}
.panel{
  border-radius:20px;
  min-height:clamp(300px,42vw,520px);
  display:grid; place-items:center;
  position:relative; overflow:hidden;
}
.panel::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 78%);
}
.panel__soon{
  position:relative;
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim-2);
}

/* Панель настроек клиента, вживую. Сетка-подложка и центрирование заглушки
   тут только мешают: кадр занимает блок целиком. */
/* Стекло этому блоку не досталось намеренно, и класса .glass на нём больше нет.
   Кадр внутри непрозрачный и закрывает подложку целиком: ни градиент, ни
   размытие сквозь него не видны — наружу торчала только белая подсветка
   верхней грани (inset 0 1px 0) светлой полосой над панелью. Гасить её
   переопределением тени было ненадёжно: любая правка .glass возвращала полосу.
   Поэтому здесь свои рамка и тень, а грани все четыре одного цвета. */
.panel--live{
  display:block; padding:0;
  min-height:0; height:clamp(560px,78vh,1100px);
  background:var(--void);
  border:1px solid var(--line);
  box-shadow:0 30px 80px -60px rgba(0,0,0,.9);
}
.panel--live::before{ content:none; }
/* Фон кадра — не transparent: пустой iframe браузер рисует белым, и до того,
   как его документ отрисуется, сверху выглядывала светлая полоса. */
.panel__frame{
  display:block; width:100%; height:100%;
  border:0; border-radius:inherit; background:var(--void);
  color-scheme:dark;
}

/* ---------- версии ---------- */
.vers{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.ver{
  font-size:13px; letter-spacing:.02em; color:var(--dim);
  border:1px solid var(--line); border-radius:12px;
  padding:11px 18px; background:var(--glass); backdrop-filter:blur(14px);
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--out);
}
.ver:hover{ color:var(--txt); border-color:var(--line-2); background:var(--glass-2); }
.ver.is-live{ color:#100C0C; background:var(--bone); border-color:var(--bone); font-weight:600; }
.ver.is-live:hover{ color:#100C0C; }
.ver.is-soon{ color:var(--dim-2); border-style:dashed; }

.os{
  border-radius:16px; padding:20px 24px;
  display:flex; align-items:baseline; gap:14px;
}
.os__n{ font-family:var(--display); font-weight:500; font-size:17px; }
.os__s{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim-2); }

/* ==========================================================
   ЦЕНЫ
   ========================================================== */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(13px,1.5vw,18px); align-items:stretch; }
.plan{
  border-radius:20px;
  padding:clamp(24px,2.6vw,34px);
  display:flex; flex-direction:column; gap:16px;
  position:relative; overflow:hidden;
  transition:border-color .4s var(--ease), transform .5s var(--out), box-shadow .5s var(--ease);
}
/* Без подъёма: сдвиг слоя с backdrop-filter заставляет браузер пересобирать
   подложку и оставляет светлую кромку по краю карточки. */
.plan:hover{
  border-color:var(--rose-2);
  background:rgba(255,255,255,.05);
  box-shadow:
    0 34px 74px -46px rgba(0,0,0,.95),
    0 0 44px -22px var(--rose-dim),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.28);
}

/* Отдельной линии сверху у выделенного тарифа больше нет: она занимала
   ::before, то есть место фаски. Тариф выделяется самой фаской — ярче, чем у
   соседей. */
.plan--top .glass::before,.plan--top::before{ content:none; }
.plan--top{ isolation:isolate; }
.plan__n{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim-2);
}
.plan__p{ display:flex; align-items:baseline; gap:7px; }
.plan__p b{
  font-family:var(--display); font-weight:500;
  font-size:clamp(32px,3.4vw,44px); letter-spacing:-.03em; line-height:1;
}
.plan__p span{ font-size:15px; color:var(--dim-2); }
.plan__l{ display:flex; flex-direction:column; gap:11px; padding-top:16px; border-top:1px solid var(--line); }
.plan__l li{ font-size:14px; color:var(--dim); padding-left:20px; position:relative; }
.plan__l li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:7px; height:7px; border-radius:50%;
  background:var(--bone); box-shadow:0 0 9px rgba(255,255,255,.55);
}
.plan__b{
  margin-top:auto; text-align:center;
  border:1px solid var(--line-2); border-radius:99px;
  padding:14px 20px; font-size:14px; font-weight:500;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.plan__b:hover{ background:var(--glass-2); border-color:var(--txt); }
.plan__b--main{ background:var(--bone); color:#0A0808; border-color:var(--bone); font-weight:600; }
.plan__b--main:hover{ background:#fff; border-color:#fff; color:#0A0808; box-shadow:0 16px 40px -24px rgba(255,255,255,.7); }
@media (max-width:940px){ .plans{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .plan{ padding:22px 20px; gap:14px; }
  .plan__p b{ font-size:36px; }
  .plan__l{ padding-top:14px; gap:9px; }
  .plan__b{ padding:13px 18px; font-size:13.5px; }
}

/* ==========================================================
   ОТЗЫВЫ — горизонтальный марки-скролл
   Одна бесконечно циклящая полоса содержимого. Дубль карточек в HTML
   даёт seamless-loop: translateX(-50%) доводит первую копию точно до
   позиции второй, animation-iteration-count:infinite сбрасывает обратно
   в 0 → визуально ничего не прыгает.
   ========================================================== */
.sec__title--nowrap{
  white-space:nowrap;
  grid-column:1 / -1;
  font-size:clamp(24px,4vw,54px);
}
.rvs{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  /* scroll-snap: карточки цепляются краями к вьюпорту при пассивном
     скролле — руки не нужны, но с drag-to-scroll (см. script.js) тоже
     ощущается «щёлкающим». */
  scroll-snap-type:x mandatory;
  scroll-padding-inline:clamp(20px,4vw,64px);
  cursor:grab;
  /* Скрываем скроллбар: полосы под кастомными карточками смотрятся
     инородно, а вертикальные подсказки и мягкий mask по краям и так
     дают понять что можно тащить. */
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  /* Sticky-ловушка «not selecting» пока drag активен. */
  user-select:none;
  -webkit-user-select:none;
}
.rvs::-webkit-scrollbar{ display:none; }
.rvs.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.rvs__track{
  display:flex;
  gap:clamp(14px,1.6vw,22px);
  padding:2px clamp(20px,4vw,56px);
  width:max-content;
  /* Когда весь ряд помещается во вьюпорт — margin:auto центрирует его,
     давая одинаковый воздух слева и справа. Когда шире вьюпорта —
     margin:auto сдаётся до 0 и включается горизонтальный скролл
     (rvs — overflow-x:auto). Ничего лишнего. */
  margin-inline:auto;
}

/* Минималистичная карточка: узкая колонка ~ 300px, лёгкий стеклянный
   слой без крикливых границ, цитата обычным весом, автор — тихая строка
   снизу. Никакого glass::before кромкового блика, никаких больших теней.
   Внутренний ритм: quote → тонкая отсечка → author. */
.rv{
  flex:none;
  width:clamp(260px,26vw,320px);
  border-radius:14px;
  padding:18px 22px 16px;
  display:flex; flex-direction:column; gap:12px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.055);
  scroll-snap-align:start;
  transition:border-color .35s var(--ease),
             background .35s var(--ease);
}
.rv:hover{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
}
.rv__t{
  font-size:14px; line-height:1.55; color:var(--dim);
  margin:0; font-weight:400;
  /* Максимум ~3 строки — если чей-то отзыв позже перерастёт, обрежется
     троеточием, не ломая ритм полосы. */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.rv__hd{
  margin-top:auto;
  display:flex; align-items:center; gap:10px;
}
.rv__av{
  width:28px; height:28px; flex:none; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:500; font-size:12px;
  color:#0A0808; text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
.rv__av[data-c="1"]{ background:linear-gradient(140deg,#D8CFC0,#B4A99A); }
.rv__av[data-c="2"]{ background:linear-gradient(140deg,#C9BFB2,#9C8E7C); color:#F1EEE9; }
.rv__av[data-c="3"]{ background:linear-gradient(140deg,#E5DBCB,#C0B29E); }
.rv__av[data-c="4"]{ background:linear-gradient(140deg,#B6ADA0,#877E70); color:#F1EEE9; }
.rv__av[data-c="5"]{ background:linear-gradient(140deg,#D0C6B6,#A99D8A); }
.rv__n{
  font-family:var(--display); font-weight:500;
  font-size:13px; color:var(--dim); letter-spacing:-.005em;
}
@media (max-width:640px){
  .sec__title--nowrap{ font-size:clamp(20px,7vw,32px); }
  .rv{ width:clamp(240px,80vw,300px); padding:16px 18px 14px; }
  .rv__t{ font-size:13.5px; }
}

/* ==========================================================
   FAQ
   ========================================================== */
.faq__wrap{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:start; }
.faq__wrap .sec__head{ display:block; margin-bottom:0; position:sticky; top:104px; }

.qa{ border-top:1px solid var(--line); }
.qa:last-child{ border-bottom:1px solid var(--line); }
.qa__q{
  width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:23px 0;
  font-family:var(--display); font-weight:500;
  font-size:clamp(14.5px,1.25vw,17px); letter-spacing:-.01em;
  transition:color .3s var(--ease);
}
.qa__q:hover,.qa.open .qa__q{ color:#fff; }
.qa__q i{ width:16px; height:16px; flex:none; position:relative; }
.qa__q i::before,.qa__q i::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.4px;
  background:currentColor; transition:transform .4s var(--out);
}
.qa__q i::after{ transform:rotate(90deg); }
.qa.open .qa__q i::after{ transform:rotate(0); }
.qa__a{ height:0; overflow:hidden; opacity:0; transition:height .5s var(--out), opacity .4s var(--ease); }
.qa.open .qa__a{ opacity:1; }
.qa__a > p{ font-size:14.5px; color:var(--dim); max-width:64ch; padding-bottom:24px; }
@media (max-width:860px){
  .faq__wrap{ grid-template-columns:1fr; }
  .faq__wrap .sec__head{ position:static; }
}

/* ==========================================================
   ФИНАЛ
   ========================================================== */
.final{
  padding-block:clamp(92px,12vw,170px);
  border-top:1px solid var(--line);
  position:relative; overflow:hidden;
  background:radial-gradient(70% 110% at 50% 118%,rgba(255,255,255,.07),transparent 62%);
}
.final__in{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; }
.final__title{
  font-size:clamp(34px,6vw,86px); font-weight:500; letter-spacing:-.03em;
  text-shadow:0 0 70px rgba(255,255,255,.14);
}
.final__sub{ font-size:15.5px; color:var(--dim); max-width:44ch; }

/* ==========================================================
   ПОДВАЛ
   ========================================================== */
.foot{ border-top:1px solid var(--line); background:var(--void-2); padding-top:clamp(44px,6vw,70px); }
/* Колонок стало две — «Медиа» и «Правовое» вместо прежних трёх. Доли равные:
   при прежних 1.7fr у бренда на месте убранной колонки оставалась дыра, а
   ссылки продолжали стоять там, где стояли при четырёх столбцах. */
.foot__in{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,44px); padding-bottom:clamp(34px,5vw,56px);
}
/* Правая колонка: сдвинута к правому краю подвала, но ссылки внутри
   центрированы относительно h4 «ПРАВОВОЕ» — заголовок стоит по центру
   стопки ссылок, а не над правой границей самой длинной из них. */
.foot__col:last-child{ grid-column:3; justify-self:end; text-align:center; }
.foot__col:last-child h4{ padding-inline:6px; }
.foot__brand img{ width:42px; height:42px; border-radius:10px; border:1px solid var(--line); }
.foot__brand p{ font-size:13.5px; color:var(--dim-2); margin-top:14px; max-width:30ch; }
.foot__col{ display:flex; flex-direction:column; gap:9px; }
.foot__col h4{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim-2); font-weight:400; margin-bottom:6px;
  font-family:var(--ui);
}
.foot__col a,.foot__col span{ font-size:13.5px; color:var(--dim); }
.foot__col a{ transition:color .3s var(--ease); }
.foot__col a:hover{ color:#fff; }
.foot__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  border-top:1px solid var(--line); padding-block:18px 24px;
  font-size:12px; color:var(--dim-2);
}
@media (max-width:820px){ .foot__in{ grid-template-columns:minmax(0,1fr) auto; } }
@media (max-width:480px){ .foot__in{ grid-template-columns:1fr; } }

/* ==========================================================
   ПРОЧЕЕ
   ========================================================== */
/* Появление: короткий подъём и лёгкое приближение. Смещение меньше прежних
   26px — на длинной странице крупный сдвиг превращает прокрутку в качели;
   масштаб отличается от единицы на полпроцента, этого хватает, чтобы движение
   читалось как «проявилось», а не «приехало снизу». */
.rise{
  opacity:0; transform:translateY(18px) scale(.995);
  transition:opacity .85s var(--out), transform .85s var(--out);
  will-change:opacity,transform;
}
.rise.in{ opacity:1; transform:none; will-change:auto; }
.rise[data-d="1"]{ transition-delay:.08s; }
.rise[data-d="2"]{ transition-delay:.16s; }
.rise[data-d="3"]{ transition-delay:.24s; }
.rise[data-d="4"]{ transition-delay:.32s; }

::selection{ background:var(--bone); color:#0A0808; }
:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; border-radius:6px; }
section[id]{ scroll-margin-top:88px; }
/* «Возможности» уезжает на один прокрут колеса ниже */
#features{ scroll-margin-top:-14px; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{ background:#1A1818; border-radius:99px; border:3px solid var(--void); }
::-webkit-scrollbar-thumb:hover{ background:#2A2626; }

/* ==========================================================
   СТРАНИЦА ВХОДА
   ========================================================== */
.auth-body{ min-height:100svh; }
.auth{
  position:relative; z-index:2;
  min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:88px clamp(18px,4vw,40px) 56px;
  background:radial-gradient(60% 55% at 50% 10%,rgba(255,255,255,.05),transparent 70%);
}
.auth__back{
  position:absolute; top:26px; left:clamp(18px,4vw,44px);
  font-size:13.5px; color:var(--dim-2);
  transition:color .3s var(--ease);
}
.auth__back:hover{ color:var(--txt); }

.auth__card{
  width:100%; max-width:436px;
  border-radius:26px;
  padding:clamp(24px,3.4vw,36px);
  display:flex; flex-direction:column; gap:20px;
}
.auth__logo{ align-self:center; }
.auth__logo img{ width:52px; height:52px; border-radius:13px; border:1px solid var(--line); }

.auth__step{ display:none; flex-direction:column; gap:18px; }
.auth__step.is-active{ display:flex; animation:stepIn .5s var(--out); }
@keyframes stepIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.auth__h{ font-size:clamp(21px,2.4vw,27px); font-weight:500; text-align:center; }
.auth__lead{ font-size:14px; color:var(--dim); text-align:center; }
.auth__lead b{ color:var(--txt); font-weight:500; overflow-wrap:anywhere; }
.auth__fine{ font-size:11.5px; color:var(--dim-2); text-align:center; }

/* вкладки */
.tabs{ position:relative; display:flex; gap:6px; border-bottom:1px solid var(--line); }
.tab{
  flex:1; padding:12px 6px 14px; font-size:14px; color:var(--dim-2);
  transition:color .3s var(--ease);
}
.tab.is-on{ color:var(--txt); }
.tabs__ink{
  position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:linear-gradient(90deg,#000,var(--bone));
  transition:transform .45s var(--out), width .45s var(--out);
}

.pane{ display:none; flex-direction:column; gap:15px; }
.pane.is-on{ display:flex; }

.fld{ display:flex; flex-direction:column; gap:7px; }
.fld > span{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim-2); }
.fld input{
  font:inherit; font-size:15px; color:var(--txt);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:14px;
  padding:13px 15px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.fld input::placeholder{ color:rgba(241,238,233,.24); }
.fld input:focus{ outline:none; border-color:var(--line-2); background:rgba(255,255,255,.07); }
.fld.is-bad input{ border-color:rgba(255,120,120,.55); }

.fld-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.linkish{
  font-size:12.5px; color:var(--dim-2);
  transition:color .3s var(--ease);
}
.linkish:hover:not(:disabled){ color:var(--txt); }
.linkish:disabled{ cursor:default; opacity:.6; }
.linkish b{ color:var(--dim); font-weight:500; }

.check{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--dim); cursor:pointer; user-select:none;
}
/* Текст с двумя ссылками внутри переносится на вторую строку — квадратик при
   этом должен остаться у первой, а не уехать в вертикальный центр абзаца. */
.check--wide{ font-size:13px; align-items:flex-start; line-height:1.5; }
.check--wide i{ margin-top:2px; }
.check a{ color:var(--txt); text-decoration:underline; text-underline-offset:3px; }
.check a:hover{ color:#fff; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check i{
  width:16px; height:16px; border-radius:5px; flex:none;
  border:1px solid var(--line-2); position:relative;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.check i::after{
  content:""; position:absolute; left:4.6px; top:1.6px;
  width:4px; height:8px; border:solid #0A0808; border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg) scale(.4); opacity:0;
  transition:opacity .25s var(--ease), transform .3s var(--out);
}
.check.is-bad i{ border-color:rgba(255,120,120,.75); box-shadow:0 0 0 3px rgba(255,120,120,.1); }
.check input:checked + i{ background:var(--bone); border-color:var(--bone); }
.check input:checked + i::after{ opacity:1; transform:rotate(45deg) scale(1); }

.btn--full{ width:100%; justify-content:center; padding:15px 20px; font-size:15px; }

.auth__msg{ font-size:13px; min-height:1.1em; text-align:center; color:var(--dim); }
.auth__msg.is-bad{ color:#FF9A9A; }

.code{ display:flex; flex-direction:column; gap:16px; }
.code__row{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.code__row input{
  width:100%; min-width:0; box-sizing:border-box;
  font:inherit; font-size:22px; text-align:center; color:var(--txt);
  font-family:var(--display); font-weight:500;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:14px;
  padding:12px 0;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.code__row input:focus{
  outline:none; border-color:var(--line-2); background:rgba(255,255,255,.08);
  box-shadow:0 0 22px -8px rgba(255,255,255,.6);
}

.auth__ok{
  width:56px; height:56px; align-self:center; color:var(--bone);
  filter:drop-shadow(0 0 18px rgba(255,255,255,.45));
}

/* ==========================================================
   ЛИЧНЫЙ КАБИНЕТ / НАСТРОЙКИ КЛИЕНТА
   ========================================================== */
.page{ padding-top:clamp(112px,12vw,150px); padding-bottom:clamp(70px,9vw,120px); }
.page__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:18px; margin-bottom:clamp(26px,3.4vw,44px);
}
.page__title{ font-size:clamp(28px,4.2vw,52px); font-weight:500; }
.page__note{ font-size:14px; color:var(--dim); }
.page__back{ font-size:13.5px; color:var(--dim-2); transition:color .3s var(--ease); }
.page__back:hover{ color:var(--txt); }

.who{
  border-radius:22px; padding:clamp(22px,2.6vw,32px);
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2.4vw,28px);
  margin-bottom:clamp(18px,2.4vw,28px);
}
.who__av{
  width:66px; height:66px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bone); color:#0A0808;
  font-family:var(--display); font-size:26px; font-weight:500;
  box-shadow:0 0 34px -10px rgba(255,255,255,.75);
}
.who__txt{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.who__n{ font-family:var(--display); font-size:clamp(19px,2vw,25px); font-weight:500; }
.who__m{ font-size:13.5px; color:var(--dim); overflow-wrap:anywhere; }
.who__act{ margin-left:auto; display:flex; flex-wrap:wrap; gap:10px; }

/* Карточка подписки одна и растянута на всю ширину — тем же силуэтом, что и
   блок аккаунта над ней: слева подпись со значением, справа действия.
   Раньше рядом стояли ещё «Ключ» и «Версии», но обе повторяли то, что и так
   написано на главной, и ради них сетка резалась на три колонки. */
.cards{ margin-bottom:clamp(26px,3.4vw,40px); }
.card{
  border-radius:22px; padding:clamp(22px,2.6vw,32px);
  display:flex; flex-direction:column; gap:10px;
}
.card__k{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim-2); }
.card__v{ font-family:var(--display); font-weight:500; font-size:clamp(17px,1.8vw,21px); }
.card__s{ font-size:13px; color:var(--dim); }

.sub{ gap:0; }
.sub__row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(16px,2.4vw,28px);
}
.sub__txt{ display:flex; flex-direction:column; min-width:0; }
.sub__txt .card__v{ margin-top:9px; }
.sub__act{ margin-left:auto; display:flex; flex-wrap:wrap; gap:10px; }
/* Действующая подписка: значение крупнее, потому что это одна короткая
   метка — «∞» или число дней. Отступ сверху заменил снятую строку
   «Осталось дней использования»: без неё значение стояло вплотную к подписи. */
.sub__txt .card__v--sub{ font-size:clamp(26px,2.8vw,34px); line-height:1; margin-top:15px; }
.sub__d{ font-size:.5em; color:var(--dim-2); margin-left:2px; }

/* Ввод ключа. Кнопка стоит в строке с полем, а не растянута под ним: у неё
   ширина по надписи, а не по карточке. Отступ сверху равен нижнему полю
   карточки — сверху до строки и снизу до края одинаково. */
.sub__key{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:clamp(22px,2.6vw,32px);
}
.sub__key input{
  flex:1 1 240px; min-width:0; box-sizing:border-box;
  height:46px; padding:0 15px;
  border:1px solid var(--line); border-radius:15px;
  background:rgba(255,255,255,.05); color:var(--txt);
  font-family:var(--display); font-size:14px; letter-spacing:.08em;
  text-transform:uppercase;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.sub__key input:focus{ outline:none; border-color:var(--line-2); background:rgba(255,255,255,.08); }
.sub__key .btn{ flex:none; height:46px; padding:0 24px; }
.sub__msg{ font-size:13px; color:var(--dim); margin-top:12px; }
.sub__msg:empty{ display:none; }
.sub__msg.is-bad{ color:#FF9A9A; }
.sub__msg.is-ok{ color:#5AE696; }
/* Размер по строке, а не по карточке.
   Было 2em × 1em — при кегле карточки это знак шириной под 64px, вдвое выше
   любой цифры рядом. В соседнем состоянии на этом же месте стоит число дней, и
   знак должен весить столько же: 1.35em в ширину оставляет петлям высоту
   примерно в рост цифры, а не в рост всей карточки.
   Обводка при этом стала толще, а не тоньше, хотя знак уменьшился, — и это не
   противоречие: stroke-width задан в единицах viewBox и уменьшается вместе с
   ним. На 2.2 после уменьшения линия выходила в полтора пикселя — заметно
   жиже, чем штрих цифры рядом. 3.6 держит её вровень со шрифтом. */
.inf{
  width:1.35em; height:.675em; display:block;
  fill:none; stroke:currentColor; stroke-width:3.6;
  stroke-linecap:round; stroke-linejoin:round;
  shape-rendering:geometricPrecision;
}
@media (max-width:560px){
  .sub__act{ margin-left:0; width:100%; }
  .sub__act .ghost{ flex:1 1 auto; text-align:center; }
  .sub__key .btn{ width:100%; justify-content:center; }
}

/* ==========================================================
   МОДАЛЬНОЕ ОКНО: вход и оформление
   ========================================================== */
.modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,4vw,40px);
  overflow-y:auto; overscroll-behavior:contain;
}
.modal[hidden]{ display:none; }

.modal__veil{
  position:absolute; inset:0;
  background:rgba(2,2,2,.72);
  backdrop-filter:blur(9px) saturate(.9);
  -webkit-backdrop-filter:blur(9px) saturate(.9);
  opacity:0; transition:opacity .4s var(--ease);
}
.modal.is-on .modal__veil{ opacity:1; }

.modal__box{
  position:relative; z-index:1; margin:auto;
  width:100%; max-width:428px;
  border-radius:26px;
  padding:clamp(26px,3.2vw,36px);
  display:flex; flex-direction:column; gap:18px;
  opacity:0; transform:translateY(14px) scale(.975);
  transition:opacity .45s var(--out), transform .45s var(--out);
}
.modal.is-on .modal__box{ opacity:1; transform:none; }

.modal__logo{
  align-self:center;
  width:46px; height:46px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 0 34px -12px rgba(255,255,255,.5);
}
.modal__logo img{ width:100%; height:100%; object-fit:cover; }

.modal__x{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .35s var(--out);
}
.modal__x:hover{ border-color:var(--line); background:var(--glass); transform:rotate(90deg); }
.modal__x i{
  position:absolute; width:13px; height:1.4px; background:var(--dim);
  transition:background .3s var(--ease);
}
.modal__x i:first-child{ transform:rotate(45deg); }
.modal__x i:last-child{ transform:rotate(-45deg); }
.modal__x:hover i{ background:var(--txt); }

.modal__box .auth__step{ gap:16px; }
.modal__box .auth__h{ font-size:clamp(20px,2.2vw,25px); }

/* ---------- промокод ---------- */
.promo__in{ position:relative; display:block; }
.promo__in input{
  width:100%; font:inherit; font-size:15px; color:var(--txt);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:14px;
  padding:13px 104px 13px 15px;
  letter-spacing:.04em;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.promo__in input::placeholder{ color:rgba(241,238,233,.24); letter-spacing:0; }
.promo__in input:focus{ outline:none; border-color:var(--line-2); background:rgba(255,255,255,.07); }

.promo__tag{
  position:absolute; top:50%; right:11px; transform:translateY(-50%) translateX(6px);
  display:none; align-items:center; gap:6px;
  font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:5px 11px; border-radius:99px;
  opacity:0; transition:opacity .3s var(--ease), transform .35s var(--out);
  pointer-events:none; white-space:nowrap;
}
.promo__tag.is-on{ display:inline-flex; opacity:1; transform:translateY(-50%); }
.promo__tag.is-ok{
  color:#7BF0A8; background:rgba(60,220,130,.12);
  border:1px solid rgba(90,230,150,.42);
  box-shadow:0 0 22px -8px rgba(80,230,150,.75);
}
.promo__tag.is-bad{
  color:#FF9A9A; background:rgba(255,110,110,.1);
  border:1px solid rgba(255,120,120,.35);
}
.promo__in.is-ok input{ border-color:rgba(90,230,150,.42); background:rgba(60,220,130,.05); }

/* ---------- выбор способа оплаты ----------
   Три строки во всю ширину окна, а не плитки в ряд: у каждого способа есть
   пояснение в одну фразу, и в колонке шириной в треть модалки оно рассыпается
   на четыре строки. Стрелка справа говорит, что это переход к следующему шагу,
   а не переключатель, который останется нажатым. */
.ways{ display:flex; flex-direction:column; gap:9px; }
.way{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:15px 17px; border-radius:18px;
  border:1px solid rgba(255,255,255,.075); background:rgba(255,255,255,.03);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .35s var(--out);
}
.way:hover{ border-color:var(--line-2); background:rgba(255,255,255,.07); }
.way__i{
  width:38px; height:38px; flex:none; border-radius:13px;
  display:grid; place-items:center; color:var(--txt);
  border:1px solid var(--line); background:rgba(255,255,255,.04);
}
.way__i svg{ width:19px; height:19px; }
.way__t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.way__t b{ font-family:var(--display); font-size:15px; font-weight:500; letter-spacing:-.015em; }
.way__t i{ font-style:normal; font-size:12.5px; color:var(--dim); }
.way__go{
  margin-left:auto; color:var(--dim-2); font-size:16px; flex:none;
  transition:transform .35s var(--out), color .3s var(--ease);
}
.way:hover .way__go{ transform:translateX(4px); color:var(--txt); }

/* ---------- счёт ---------- */
.ord{
  display:flex; flex-direction:column; gap:11px;
  padding-top:16px; border-top:1px solid var(--line);
}
.ord__k{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim-2); text-align:center; }
.ord__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:14px; color:var(--dim);
}
.ord__row b{ font-family:var(--display); font-weight:500; font-size:15px; color:var(--txt); }
.ord__row--off{ color:#7BF0A8; }
.ord__row--off b{ color:#7BF0A8; }
.ord__row--off i{ font-style:normal; font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.75; }
.ord__row--off[hidden]{ display:none; }
/* Строка со способом оплаты: значение и ссылка «изменить» стоят рядом, поэтому
   b здесь не жирная подпись, а контейнер из двух элементов. */
.ord__row--way b{ display:inline-flex; align-items:baseline; gap:9px; }
.ord__row--way .linkish{ font-size:12px; }
.ord__row--tot{ padding-top:11px; border-top:1px solid var(--line); color:var(--txt); }
.ord__row--tot b{ font-size:clamp(22px,2.4vw,28px); letter-spacing:-.02em; }
.ord__row--tot s{ font-size:14px; color:var(--dim-2); font-family:var(--ui); margin-right:9px; }

/* ==========================================================
   ПРАВОВЫЕ СТРАНИЦЫ
   Один шаблон на условия, политику и оплату: колонка текста в читаемую
   ширину, нумерация пунктов из счётчика, а не руками в разметке.
   ========================================================== */
.legal{ max-width:860px; }
.legal__meta{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim-2); margin-bottom:10px;
}
.legal__lead{
  font-size:15px; color:var(--dim); max-width:70ch;
  padding-bottom:clamp(22px,3vw,32px); border-bottom:1px solid var(--line);
  margin-bottom:clamp(26px,3.4vw,40px);
}
.legal__sec{ counter-increment:legalsec; margin-bottom:clamp(28px,3.6vw,44px); }
.legal{ counter-reset:legalsec; }
.legal__sec h2{
  font-size:clamp(18px,2vw,23px); font-weight:500;
  margin-bottom:16px; display:flex; gap:12px; align-items:baseline;
}
.legal__sec h2::before{
  content:counter(legalsec) ".";
  font-family:var(--mono); font-size:.72em; color:var(--dim-2);
  font-weight:500; flex:none;
}
.legal__sec ol{ counter-reset:legalp; display:flex; flex-direction:column; gap:13px; }
.legal__sec li{
  counter-increment:legalp;
  font-size:14.5px; color:var(--dim); line-height:1.68;
  padding-left:44px; position:relative; max-width:72ch;
}
.legal__sec li::before{
  content:counter(legalsec) "." counter(legalp);
  position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:12.5px; color:var(--dim-2);
}
.legal__sec li b{ color:var(--txt); font-weight:500; }
.legal__sec li ul{ margin-top:9px; display:flex; flex-direction:column; gap:7px; }
.legal__sec li ul li{ padding-left:18px; font-size:14px; }
.legal__sec li ul li::before{ content:"—"; font-family:var(--ui); }

/* Пункт, который важнее прочитать, чем пролистать: невозврат средств. */
.legal__flag{
  border:1px solid rgba(255,120,120,.28);
  background:rgba(255,110,110,.05);
  border-radius:16px; padding:clamp(18px,2.2vw,24px);
  margin-bottom:clamp(26px,3.4vw,40px);
}
.legal__flag b{ color:var(--txt); display:block; margin-bottom:7px; font-weight:500; }
.legal__flag p{ font-size:14px; color:var(--dim); max-width:72ch; }

.legal__foot{
  border-top:1px solid var(--line); padding-top:24px; margin-top:8px;
  font-size:13.5px; color:var(--dim-2);
}
.legal__foot a{ color:var(--dim); text-decoration:underline; text-underline-offset:3px; }
.legal__foot a:hover{ color:var(--txt); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rise{ opacity:1; transform:none; }
}