/* ============================================================
   site.css — основной сайт fireshow.ge
   Направление «Длинная выдержка». Тема одна, тёмная: продукт
   про ночь, поэтому все цвета заданы явно, светлой темы нет.
   ============================================================ */

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink-800); color:var(--text);
  font-family:var(--f-body); font-size:var(--step-0); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
p{margin:0 0 1em}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
.sprite{position:absolute; width:0; height:0; overflow:hidden}

:focus-visible{outline:2px solid var(--core); outline-offset:3px; border-radius:var(--radius)}
.skip{position:absolute; left:-9999px; top:8px; z-index:99; background:var(--ink-700); color:var(--text); padding:10px 16px; border-radius:var(--radius)}
.skip:focus{left:16px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- Каркас ---------- */
.shell{max-width:var(--shell); margin:0 auto; padding:0 24px; position:relative; z-index:1}
/* Ширину ограничиваем, но колонку не центрируем: весь сайт стоит
   на жёстком левом крае, и сдвиг узкого блока рвёт эту ось. */
.shell.narrow{max-width:var(--shell)}
.shell.narrow > *{max-width:780px}
/* Воздух пропорционален весу блока: таблице на восемь строк он нужен,
   строке из четырёх ссылок — нет. Раньше все секции получали одинаковые
   120 пикселей, и лёгкие блоки тонули в пустоте. */
.band{padding:var(--gap-xl) 0; position:relative}
.band-tight{padding:var(--gap-l) 0}
.band-alt{
  background:
    radial-gradient(110% 70% at 8% 0%, rgba(242,128,31,.05), transparent 56%),
    var(--ink-900);
  border-block:1px solid var(--ink-600);
}
@media(min-width:900px){
  .band{padding:92px 0}
  .band-tight{padding:52px 0}
}

/* ---------- Типографика ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--flame); margin:0 0 var(--gap-m);
}
h1{
  font-family:var(--f-display); font-weight:400; font-size:var(--step-5);
  line-height:1.04; letter-spacing:-.012em; margin:0 0 var(--gap-m);
  text-wrap:balance; overflow-wrap:break-word;
  background:linear-gradient(172deg, var(--text) 36%, var(--flame) 132%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-title{
  font-family:var(--f-display); font-weight:400; font-size:var(--step-4);
  line-height:1.08; letter-spacing:-.01em; margin:0 0 var(--gap-s);
  text-wrap:balance; color:var(--text);
}
.sub-title{
  font-family:var(--f-display); font-weight:400; font-size:var(--step-2);
  margin:var(--gap-l) 0 var(--gap-m); color:var(--text);
}
.lead{font-size:var(--step-1); color:var(--text-2); max-width:52ch; margin:0 0 var(--gap-m)}
.section-lead{color:var(--text-2); max-width:var(--measure); margin:0 0 var(--gap-l)}
.note{font-size:14px; color:var(--text-3); max-width:var(--measure)}
.after-table{margin-top:var(--gap-m)}

/* Заголовок секции: дуга следа плюс подпись */
.rule{
  display:flex; align-items:center; gap:var(--gap-s);
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--text-3);
  margin:0 0 var(--gap-m);
}
.rule::before{
  content:""; width:22px; height:22px; flex:none; border-radius:50%;
  border:1px solid var(--flame); border-right-color:transparent; border-bottom-color:transparent;
  transform:rotate(-45deg); box-shadow:0 0 16px -3px var(--flame-glow);
}
/* Линия горячая у метки и остывает вправо — как хвост следа */
.rule::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,
    rgba(242,128,31,.50) 0%, rgba(242,128,31,.12) 16%,
    var(--ink-500) 44%, transparent 100%);
}

/* --- LED: холодная половина продукта ---------------------------
   Пиксельные пои гонят программу вдоль ленты — здесь то же самое
   вдоль надписи. Цвет холодный намеренно: он отделяет LED от огня
   и наконец задействует второй акцент палитры.
   Движение линейное и медленное: светодиодная программа идёт
   с постоянной скоростью, а не разгоняется. */
/* Тот же градиент носит SHOW в логотипе: холодная половина продукта
   выглядит одинаково везде, где о ней заходит речь. */
.led,.lg-show{
  background:linear-gradient(90deg,
    #4FE0EC 0%, #6BB6F7 22%, #A98BFF 46%, #F07AD8 70%, #4FE0EC 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:led-flow 7s linear infinite;
}
.led{filter:drop-shadow(0 0 7px rgba(62,216,228,.42))}
.lg-show{filter:drop-shadow(0 0 6px rgba(62,216,228,.30))}
@keyframes led-flow{to{background-position:-200% center}}

/* В таблице цен надпись крупнее — свечение чуть плотнее */
.pk-name .led{filter:drop-shadow(0 0 10px rgba(62,216,228,.5))}

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; color:var(--core);
  font-weight:500; border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow svg{width:15px; height:15px}
.link-arrow:hover{border-bottom-color:var(--flame); gap:12px}

/* ---------- Шапка ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(10,12,15,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-600);
}
.head-in{
  max-width:var(--shell); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:var(--gap-m);
}
/* Знак собран строчным потоком, а не флексом. У флекса базовая линия
   для безтекстовых элементов синтезируется по-разному в зависимости
   от контекста: в шапке .logo — флекс-элемент и схлопывается в flex,
   в подвале это абзац и остаётся inline-flex, и знак вставал на 3,9 px
   выше строки. В строчном потоке vertical-align:baseline кладёт нижний
   край коробки ровно на базовую линию — по определению и везде
   одинаково. Никаких поправок на контекст. */
.logo{
  display:inline-block; white-space:nowrap;
  font-family:var(--f-display); font-size:15px; letter-spacing:.14em; color:var(--text);
}
/* --- Знак: огонь, LED и Грузия ---------------------------------
   Логотип говорит то же, что и первый экран, только короче.
   Раньше слева стоял нейтральный кружок — он не значил ничего. */
.logo-word{display:inline}

/* Коробка высотой в прописную, рисунок из неё растёт вверх. Так знак
   не распирает строку и шапка остаётся прежней высоты, а пламя всё
   равно поднимается выше букв. */
.flame{
  display:inline-block; vertical-align:baseline; position:relative;
  width:19px; height:11px; margin-right:9px;
  filter:drop-shadow(0 0 11px rgba(242,128,31,.62));
}
/* Минус пиксель: контур не доходит до низа своей коробки на 1/32
   высоты, без поправки огонь стоял бы над строкой. */
.flame svg{
  position:absolute; left:0; bottom:-1px;
  width:19px; height:25px; display:block; overflow:visible;
}
.flame-body,.flame-core,.flame-spark{transform-box:fill-box}
.flame-body,.flame-core{transform-origin:50% 100%}
.flame-body{animation:flame-body 2.6s var(--ease) infinite}
/* Периоды 2,6 и 1,7 несоизмеримы: совпадение слоёв не повторяется,
   и глаз не ловит цикл — огонь не тикает, как метроном. */
.flame-core{animation:flame-core 1.7s var(--ease) infinite}
/* Искра всплывает и гаснет — четвёртый ритм в знаке, ни с одним
   из трёх остальных не совпадающий. */
.flame-spark{transform-origin:50% 50%; animation:flame-spark 3.1s var(--ease) infinite}

@keyframes flame-body{
  0%,100%{transform:scale(1,1) translateX(0)}
  30%    {transform:scale(.94,1.07) translateX(.3px)}
  62%    {transform:scale(1.05,.95) translateX(-.35px)}
}
@keyframes flame-core{
  0%,100%{transform:scaleY(1)    translateX(0);     opacity:.92}
  40%    {transform:scaleY(1.13) translateX(.22px); opacity:1}
  70%    {transform:scaleY(.9)   translateX(-.2px); opacity:.76}
}
@keyframes flame-spark{
  0%     {transform:translateY(1.6px)  scale(.7); opacity:0}
  28%    {transform:translateY(0)      scale(1);  opacity:.95}
  66%    {transform:translateY(-1.8px) scale(.8); opacity:.45}
  100%   {transform:translateY(-3.4px) scale(.6); opacity:0}
}

.lg-fire{
  background:linear-gradient(92deg,#FFDCA8 0%,#FFA850 32%,#F2801F 64%,#E8621A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 6px rgba(242,128,31,.30));
}

/* Флаг ставится на белое поле, а вокруг почти чёрный фон: без тонкой
   тёмной обводки он выглядит наклеенным поверх, а не частью строки. */
.lg-flag{
  width:16.5px; height:11px; margin-left:9px;
  border-radius:1.5px; overflow:hidden; display:inline-block; vertical-align:baseline;
  /* position обязателен, хотя ничего не сдвигает. Блик складок ниже —
     absolute с inset:0, и содержащий блок ему нужен здесь. Без него
     ближайшим позиционированным предком оказывается липкая шапка,
     и градиент растягивается на всю её ширину: замерено 1280×66
     вместо 16,5×11. Анимация флага трансформирует его и содержащий
     блок создаёт сама — поэтому баг не виден ровно до того момента,
     когда анимацию выключают. */
  position:relative;
  box-shadow:0 0 0 1px rgba(0,0,0,.65), 0 0 9px -4px rgba(255,255,255,.3);
  /* Древко слева неподвижно, парусит свободный край — как у настоящего
     флага. Точка отсчёта у левого края, иначе полотнище болтается
     целиком и выглядит качающейся табличкой. */
  transform-origin:left center;
  animation:flag-wave 3.4s ease-in-out infinite;
}
.lg-flag svg{width:100%; height:100%; display:block}
/* Складки бегут от древка к свободному краю. На 17 пикселях настоящая
   рябь ткани неразличима — читается именно бегущий по полотнищу свет,
   поэтому вся работа здесь, а не в геометрии. */
.lg-flag::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(102deg,
    rgba(0,0,0,.22) 0%, rgba(255,255,255,.18) 20%, rgba(0,0,0,.19) 44%,
    rgba(255,255,255,.15) 66%, rgba(0,0,0,.16) 88%, rgba(0,0,0,.22) 100%);
  background-size:230% 100%;
  animation:flag-folds 3.4s linear infinite;
}
/* Период 3,4 с не совпадает ни с 2,6, ни с 1,7 у пламени: три движения
   в знаке никогда не выстраиваются в такт. */
@keyframes flag-wave{
  0%,100%{transform:perspective(70px) rotateY(0deg)   skewY(0deg)}
  28%    {transform:perspective(70px) rotateY(-10deg) skewY(-1.4deg)}
  60%    {transform:perspective(70px) rotateY(8deg)   skewY(1.1deg)}
}
@keyframes flag-folds{ to{background-position:-230% 0} }
.nav{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap}
.nav a{
  font-size:14px; color:var(--text-2); padding:8px 9px; border-radius:var(--radius);
  white-space:nowrap;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover{color:var(--text); background:var(--ink-700)}
.nav a[aria-current="page"]{color:var(--core)}
.head-side{display:flex; align-items:center; gap:var(--gap-s); margin-left:auto}
.nav + .head-side{margin-left:0}
.langs{display:flex; gap:1px}
.langs a{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--text-3);
  padding:6px 7px; border-radius:var(--radius); transition:color .2s var(--ease);
}
.langs a:hover{color:var(--text)}
.langs a[aria-current="true"]{color:var(--core); background:var(--flame-veil)}
.burger{display:none; width:40px; height:40px; background:none; border:1px solid var(--ink-600); border-radius:var(--radius); cursor:pointer; padding:0; position:relative}
.burger span{position:absolute; left:11px; width:18px; height:1.5px; background:var(--text); transition:transform .25s var(--ease), opacity .2s var(--ease)}
.burger span:first-child{top:16px}
.burger span:last-child{top:22px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
/* На узком экране в шапке одновременно стоят знак, четыре языка и
   бургер — вместе они шире 375px, и страница уезжала вбок на 7px.
   Ужимаем знак, а не языки: у языковых ссылок и так минимальная
   область нажатия, а логотип в 160px занимал почти половину строки. */
@media(max-width:420px){
  .logo{font-size:13px; letter-spacing:.10em}
  .flame{width:17px; height:10px; margin-right:7px}
  .flame svg{width:17px; height:22px}
}

@media(max-width:1180px){
  /* Специфичность выше .btn: иначе display:inline-flex из блока кнопок,
     объявленный ниже по файлу, перебивает это правило и кнопка остаётся. */
  .head-side .head-cta{display:none}
}
/* Грузинские слова заметно длиннее русских — меню поджимается,
   чтобы не разъезжаться на две строки. */
[lang="ka"] .nav a{font-size:13.5px; padding:8px 7px}
@media(max-width:900px){
  .burger{display:block}
  .nav{
    position:fixed; inset:57px 0 auto; flex-direction:column; gap:0; margin:0;
    background:var(--ink-900); border-bottom:1px solid var(--ink-600);
    padding:8px 24px 20px; transform:translateY(-8px); opacity:0;
    pointer-events:none; transition:opacity .2s var(--ease), transform .25s var(--ease);
  }
  .nav[data-open="true"]{opacity:1; transform:none; pointer-events:auto}
  .nav a{padding:13px 0; font-size:17px; border-bottom:1px solid var(--ink-600)}
  .head-side{margin-left:auto}
}

/* ---------- Герой ---------- */
.hero{position:relative; padding:var(--gap-xl) 0 var(--gap-l); overflow:hidden}
.hero::after{                       /* отсвет на «полу» под героем */
  content:""; position:absolute; left:0; right:0; bottom:0; height:200px;
  pointer-events:none; z-index:0;
  background:linear-gradient(to top, rgba(242,128,31,.055), transparent);
}
.hero-home{padding:var(--gap-2xl) 0 var(--gap-xl)}
.hero-short{padding:var(--gap-xl) 0 var(--gap-l)}
.stage-page{position:absolute; inset:0; height:min(96vh,880px); z-index:0; pointer-events:none}
.stage-page canvas{width:100%; height:100%}
.stage-page::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(6,8,11,.72) 0%, rgba(6,8,11,.24) 30%, rgba(6,8,11,.86) 82%, var(--ink-800) 100%);
}
@media(min-width:900px){
  .stage-page::after{
    background:
      linear-gradient(95deg, rgba(6,8,11,.96) 0%, rgba(6,8,11,.88) 34%, rgba(6,8,11,.32) 56%, rgba(6,8,11,.10) 100%),
      linear-gradient(to bottom, rgba(6,8,11,.62) 0%, transparent 22%, rgba(6,8,11,.80) 84%, var(--ink-800) 100%);
  }
  .hero .shell > *{max-width:68%}
}
.price-pill{
  font-family:var(--f-mono); font-size:13px; color:var(--core);
  border:1px solid rgba(242,128,31,.30); background:var(--flame-veil);
  padding:5px 12px; border-radius:999px; display:inline-block; margin:0 0 var(--gap-m);
  box-shadow:0 0 30px -12px var(--flame-glow);
  text-shadow:0 0 16px rgba(242,128,31,.45);
}

/* ---------- Кнопки ---------- */
.actions{display:flex; flex-wrap:wrap; gap:var(--gap-s)}
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px; font-family:var(--f-body);
  /* Единственное скруглённое место в системе, кроме ценника, —
     и намеренно: острые углы читались как невзрачная плашка,
     а действие должно выглядеть предметом, к которому тянут руку. */
  font-size:15px; font-weight:600; padding:14px 26px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--ease-out), box-shadow .3s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
/* Подпись в узкой колонке переносится, а не обрезается.
   nowrap выше нужен, чтобы кнопка не ломалась на просторе; но в
   конструкторе запроса колонка сужается до 277px, и «Отправить в
   WhatsApp» со значком «скоро» туда не влезает ни в русском, ни в
   грузинском — при overflow:hidden хвост подписи просто исчезал. */
@media(max-width:560px){
  .actions .btn{white-space:normal; text-align:center; padding-inline:20px}
}

/* Содержимое поверх свечений */
.btn > *{position:relative; z-index:2}
.btn svg{width:17px; height:17px; flex:none; transition:transform .35s var(--ease-flame)}
.btn:hover svg{transform:translateX(2px)}
.btn-sm{font-size:13.5px; padding:9px 18px}
.btn-sm svg{width:15px; height:15px}

/* --- Главная кнопка: раскалённый предмет --- */
/* Жар идёт из основания и остывает к концам — так выглядит предмет,
   вынутый из огня. Прежняя ровная заливка сверху вниз давала
   одинаковый оранжевый по всей ширине, отчего кнопка и читалась
   плоской при всех своих свечениях. */
.btn-primary{
  background:
    linear-gradient(180deg, rgba(255,241,217,.32) 0%, rgba(255,241,217,0) 44%),
    radial-gradient(104% 132% at 50% 118%, #FFB362 0%, #F2801F 42%, #C9490B 100%);
  color:#1C0D03;
  box-shadow:
    inset 0 1px 0 rgba(255,236,208,.55),          /* раскалённая верхняя кромка */
    inset 0 0 0 1px rgba(255,217,160,.16),
    0 10px 34px -14px rgba(242,128,31,.65);
}
/* Дыхание: жар поднимается от основания и оседает.
   Анимируется прозрачность — это работа композитора, не перерисовка. */
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(66% 132% at 50% 128%, rgba(255,232,196,.34), transparent 70%);
  animation:ember-breath 5.6s var(--ease) infinite;
}
/* Тепло под курсором: кнопка нагревается там, куда подносят руку */
.btn-primary::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(104px 104px at var(--hx,50%) var(--hy,50%),
    rgba(255,247,231,.62), transparent 68%);
  opacity:0; transition:opacity .45s var(--ease-flame);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,236,208,.68),
    inset 0 0 0 1px rgba(255,217,160,.26),
    0 16px 48px -16px rgba(242,128,31,.85);
}
.btn-primary:hover::after{opacity:1}
.btn-primary:active{
  transform:translateY(0) scale(.986);
  box-shadow:
    inset 0 1px 0 rgba(255,236,208,.4),
    inset 0 0 0 1px rgba(255,217,160,.2),
    0 4px 14px -8px rgba(242,128,31,.7);
}
@keyframes ember-breath{
  0%,100%{opacity:.38}
  50%    {opacity:.74}
}

/* --- Второстепенная: холодная, но греется от близости --- */
.btn-ghost{border-color:var(--ink-500); color:var(--text-2); background:rgba(26,32,40,.36)}
.btn-ghost::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120px 120px at var(--hx,50%) var(--hy,50%),
    rgba(242,128,31,.20), transparent 70%);
  opacity:0; transition:opacity .45s var(--ease-flame);
}
.btn-ghost:hover{border-color:var(--flame-line,var(--text-3)); color:var(--text)}
.btn-ghost:hover::after{opacity:1}
.btn-ghost:active{transform:scale(.986)}

/* --- Выключенная не реагирует вовсе --- */
.btn[aria-disabled="true"]{cursor:default; opacity:.62}
.btn[aria-disabled="true"]::before,
.btn[aria-disabled="true"]::after{display:none}
.btn[aria-disabled="true"]:hover{transform:none; box-shadow:none; border-color:var(--ink-500); color:var(--text-2)}
.btn[aria-disabled="true"]:hover svg{transform:none}

.tag{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  border:1px dashed var(--ink-500); color:var(--text-3); padding:2px 7px; border-radius:999px;
}

/* ---------- Карточки ---------- */
.cards{display:grid; gap:var(--gap-s); grid-template-columns:1fr}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr); gap:var(--gap-m)}}
@media(min-width:1000px){
  .cards{grid-template-columns:repeat(3,1fr)}
  /* Пять карточек в сетке из трёх оставляют пустую шестую ячейку —
     дыру в углу, которую глаз читает как недоделанную вёрстку.
     Шесть колонок вместо трёх: сверху три карточки по две колонки,
     снизу две по три. Ряды разной ширины ещё и ломают однообразие. */
  .cards[data-count="5"]{grid-template-columns:repeat(6,1fr)}
  .cards[data-count="5"] > *{grid-column:span 2}
  .cards[data-count="5"] > :nth-child(4),
  .cards[data-count="5"] > :nth-child(5){grid-column:span 3}
}
.card{
  position:relative; display:block; padding:26px 26px 30px; overflow:hidden; isolation:isolate;
  border:1px solid var(--ink-600); border-radius:var(--radius);
  background:var(--ink-700);
  transition:transform .5s var(--ease-flame), border-color .5s var(--ease-flame);
}
/* Свет идёт из того угла, где лежит фигура: карточка выглядит
   освещённой изнутри, а не залитой ровной краской. */
.card::before{
  content:""; position:absolute; inset:0; z-index:-2; border-radius:inherit;
  background:
    /* Текст лежит на плотной темноте, след выходит из правого угла:
       свет падает поперёк карточки и гаснет, не мешая читать. */
    linear-gradient(102deg, var(--ink-700) 38%, rgba(12,18,26,.92) 58%, rgba(12,18,26,.44) 78%, transparent 94%),
    radial-gradient(76% 76% at 104% 104%,
      rgba(242,128,31,.17) 0%, rgba(166,39,11,.06) 40%, transparent 68%);
  opacity:.9; transition:opacity .6s var(--ease-flame);
}
/* Кромка теплеет к источнику света */
.card::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  padding:1px; pointer-events:none;
  background:linear-gradient(122deg,
    rgba(255,217,160,.02) 0%, rgba(242,128,31,.06) 46%, rgba(242,128,31,.34) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.85; transition:opacity .6s var(--ease-flame);
}
a.card:hover{transform:translateY(-3px); border-color:var(--ink-500)}
a.card:hover::before{opacity:.98}
a.card:hover::after{opacity:1}

.card-fig{
  position:absolute; bottom:-46px; right:-42px; width:152px; height:152px;
  z-index:-1; opacity:.46; pointer-events:none;
  transition:opacity .6s var(--ease-flame), transform 1.1s var(--ease-flame);
}
.card-fig svg{width:100%; height:100%}

/* Прочерчивание следа.
   Штрих стоит на самом <path>: от корневого <svg> он не наследуется,
   а pathLength браузеры игнорируют — поэтому длина кривой считается
   при сборке и приезжает в переменной --len.
   Кривая ведёт себя как след: почти равномерно и мягко оседает
   в конце, а не выстреливает в начале. */
.card-fig path{
  stroke-dasharray:var(--len);
  stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 2.8s cubic-bezier(.32,.14,.24,1);
}
.card-fig[data-drawn="true"] path{stroke-dashoffset:0}
a.card:hover .card-fig{opacity:.78; transform:rotate(12deg) scale(1.05)}
.card h3{
  font-family:var(--f-display); font-weight:400; font-size:var(--step-2);
  line-height:1.2; margin:0 0 8px; color:var(--text); position:relative;
}
.card p{font-size:15px; color:var(--text-2); margin:0 0 .6em; position:relative; max-width:30ch}
.card-meta{font-family:var(--f-mono); font-size:11.5px; color:var(--text-3); letter-spacing:.04em}
.card-go{
  display:inline-flex; align-items:center; gap:8px; margin-top:6px;
  font-family:var(--f-mono); font-size:12px; color:var(--core);
  transition:gap .2s var(--ease);
}
.card-go svg{width:15px; height:15px}
a.card:hover .card-go{gap:12px}

/* ---------- Слоты под медиа ----------
   Четыре колонки на широком экране: широкий слот занимает две,
   вертикальные — по одной. Так пропорции остаются честными,
   а пустой слот не превращается в экран пустоты. */
.gallery{display:grid; gap:var(--gap-s); grid-template-columns:1fr}
@media(min-width:640px){.gallery{grid-template-columns:repeat(2,1fr); gap:var(--gap-m)}}
@media(min-width:900px){.gallery{grid-template-columns:repeat(4,1fr)}}
/* Разворот за поля страницы: один такой блок сбивает однообразный
   ритм колонки, который тянется через всю страницу.
   Плюс 24 пикселя компенсируют отступ .shell. Единица vw считается
   вместе с полосой прокрутки, поэтому блок вылезает вправо примерно
   на её ширину — этот излишек срезает overflow-x:hidden у body. */
@media(min-width:900px){
  .gallery-bleed{
    margin-inline:calc(50% - 50vw + 24px);
    grid-template-columns:repeat(4,1fr);
  }
}
/* Кадр длинной выдержки на месте будущей фотографии.
   Пунктирная рамка и подпись «что снять» отсюда убраны: на экране
   они читались как битая картинка. */
.plate{
  margin:0; aspect-ratio:var(--ratio); position:relative; overflow:hidden;
  border:1px solid var(--ink-600); border-radius:var(--radius);
  background:
    radial-gradient(70% 56% at 50% 46%, rgba(242,128,31,.07), transparent 72%),
    var(--ink-900);
  max-height:420px;
}
@media(min-width:640px){.plate[data-span="2"]{grid-column:span 2}}
.plate canvas{width:100%; height:100%; display:block}
/* Кадры с пиксельными пои светят холодным — подсветка рамки за ними.
   Метку ставит plates.js: какие фигуры LED, знает только он. */
.plate[data-led]{
  background:
    radial-gradient(70% 56% at 50% 46%, rgba(62,216,228,.08), transparent 72%),
    var(--ink-900);
}
/* Виньетка. У снимка край всегда темнее центра — без неё фигура
   выглядит наклейкой на плашке, а не кадром. */
.plate::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(76% 64% at 50% 48%, transparent 40%, rgba(4,6,10,.66) 100%);
}

/* ---------- Таблица пакетов ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--ink-600); border-radius:var(--radius); background:var(--ink-900)}
.packages{border-collapse:collapse; width:100%; min-width:620px; font-size:15px}
.packages th,.packages td{text-align:left; padding:16px 18px; border-bottom:1px solid var(--ink-600); vertical-align:top}
.packages thead th{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3); background:var(--ink-700);
}
.packages tbody tr:last-child th,.packages tbody tr:last-child td{border-bottom:0}
.packages tbody tr{transition:background-color .2s var(--ease)}
.packages tbody tr:hover{background:rgba(26,32,40,.44)}
.packages .num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.packages tbody th{font-weight:400}
.pk-name{display:block; font-family:var(--f-display); font-size:18px; color:var(--text); margin-bottom:3px}
.pk-desc{display:block; font-size:13.5px; color:var(--text-3); max-width:44ch}
.pk-price{color:var(--text-2); font-size:13px}
.pk-price b{
  color:var(--core); font-size:19px; font-weight:500; margin:0 2px;
  text-shadow:0 0 20px rgba(242,128,31,.45);
}
.pk-unit{display:block; font-size:11px; color:var(--text-3); margin-top:2px}
/* На телефоне таблица — стопка карточек. Колонкой она была шире экрана,
   и цена — ради которой таблицу и открывают — уезжала за правый край
   под горизонтальную прокрутку. Здесь цена стоит справа от названия,
   артисты и минуты — строкой ниже, с подписями из шапки таблицы. */
@media(max-width:640px){
  .packages{min-width:0; font-size:14px}
  .packages thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .packages tbody tr{
    display:grid; grid-template-columns:auto auto 1fr;
    grid-template-areas:"name name price" "art min min";
    gap:10px 18px; padding:16px 16px 14px; border-bottom:1px solid var(--ink-600);
  }
  .packages tbody tr:last-child{border-bottom:0}
  .packages tbody th,.packages tbody td{padding:0; border:0}
  .packages tbody th{grid-area:name}
  .packages .pk-price{grid-area:price; text-align:right}
  .packages .pk-artists{grid-area:art}
  .packages .pk-minutes{grid-area:min}
  .pk-artists::before,.pk-minutes::before{
    content:attr(data-label); margin-right:6px;
    font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
  }
  .pk-desc{max-width:none}
}

/* ---------- Вопрос-ответ ---------- */
.faq{border-top:1px solid var(--ink-600)}
.faq details{border-bottom:1px solid var(--ink-600)}
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--gap-m);
  padding:20px 0; cursor:pointer; list-style:none;
  font-family:var(--f-display); font-size:var(--step-1); color:var(--text);
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--core)}
.faq-mark{position:relative; width:16px; height:16px; flex:none; margin-top:.35em}
.faq-mark::before,.faq-mark::after{
  content:""; position:absolute; background:var(--flame); transition:transform .28s var(--ease);
}
.faq-mark::before{top:7.5px; left:0; width:16px; height:1.5px}
.faq-mark::after{top:0; left:7.5px; width:1.5px; height:16px}
.faq details[open] .faq-mark::after{transform:scaleY(0)}
/* Открытый вопрос теплеет: метка разгорается, а ответ отбивается
   слева тонкой линией — читателю видно, где он находится в списке. */
.faq details[open] summary{color:var(--core)}
.faq details[open] .faq-mark::before{box-shadow:0 0 12px 1px rgba(242,128,31,.75)}
.faq-body{
  padding:0 0 22px 18px; max-width:var(--measure);
  border-left:1px solid rgba(242,128,31,.28);
}
.faq-body p{color:var(--text-2); margin:0}

/* ---------- Шаги ---------- */
.steps{counter-reset:s; display:grid; gap:var(--gap-m); grid-template-columns:1fr}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){
  .steps{grid-template-columns:repeat(4,1fr); gap:var(--gap-s); position:relative}
  /* Четыре шага — не четыре отдельных блока, а одна линия времени:
     от первого сообщения до огня на площадке. Раньше её рвали
     границы отдельных колонок; теперь линия сплошная и разогревается
     слева направо, потому что вечер к финалу именно разогревается. */
  .steps::before{
    content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,
      var(--ink-500) 0%, rgba(242,128,31,.22) 38%, rgba(242,128,31,.85) 100%);
  }
  .steps li{border-top:none}
  /* Узел на линии — там, где начинается шаг */
  .steps li::after{
    content:""; position:absolute; top:-3.5px; left:0; width:8px; height:8px;
    border-radius:50%; background:var(--ink-800); border:1px solid var(--flame);
    box-shadow:0 0 16px -2px var(--flame-glow);
  }
  .steps li::before{border-top:none; top:0}
}
.steps li{counter-increment:s; position:relative; padding-top:var(--gap-m); border-top:1px solid var(--ink-600)}
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; top:-1px; left:0;
  font-family:var(--f-mono); font-size:11px; color:var(--flame);
  border-top:1px solid var(--flame); padding-top:var(--gap-m);
  text-shadow:0 0 14px rgba(242,128,31,.5);
}
.steps h3{font-family:var(--f-display); font-weight:400; font-size:var(--step-2); margin:26px 0 8px; color:var(--text)}
.steps p{font-size:15px; color:var(--text-2); margin:0}

/* ---------- Города крупным планом ----------
   Единственный широкий разворот на главной. До него семь секций шли
   одной колонкой в одном ритме — глаз переставал за них цепляться.
   Кадр во всю ширину карточки заодно даёт городу собственную фигуру:
   раньше её не было только у них. */
.places{display:grid; gap:var(--gap-s); grid-template-columns:1fr}
@media(min-width:640px){.places{grid-template-columns:repeat(3,1fr); gap:var(--gap-m)}}
.place{
  display:flex; flex-direction:column; gap:var(--gap-s);
  border:1px solid var(--ink-600); border-radius:var(--radius);
  background:var(--ink-700); overflow:hidden;
  transition:transform .25s var(--ease-out), border-color .25s var(--ease);
}
.place:hover{transform:translateY(-3px); border-color:var(--ink-500)}
/* Силуэт города. Пропорция горизонтальная на любой ширине: панорама
   с башней и колесом в вертикальный кадр не помещается. */
.place-art{
  display:block; aspect-ratio:16/10; overflow:hidden;
  background:radial-gradient(72% 86% at 50% 92%, rgba(242,128,31,.10), transparent 72%);
}
/* Свечение вешаем на весь рисунок, а не на каждый штрих: фильтр
   на десятке отдельных путей стоит вдесятеро дороже одного. */
.lm{
  width:100%; height:100%; display:block; overflow:visible;
  filter:drop-shadow(0 0 4px rgba(242,128,31,.55));
}
.lm-main{fill:none; stroke:var(--flame); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.lm-far{fill:none; stroke:rgba(242,128,31,.42); stroke-width:1; stroke-linecap:round; stroke-linejoin:round}
/* Колесо обозрения крутится. fill-box обязателен: без него точка
   отсчёта берётся от холста svg, и колесо уезжает по дуге вместо
   того, чтобы вращаться вокруг своей втулки. Оборот за 44 секунды —
   спица проходит место соседней за пять с половиной, это читается
   движением, но не тянет на себя внимание. */
.lm-spin{
  transform-box:fill-box; transform-origin:50% 50%;
  animation:wheel-spin 44s linear infinite;
}
@keyframes wheel-spin{to{transform:rotate(360deg)}}
.place-body{display:flex; flex-direction:column; gap:6px; padding:0 var(--gap-m) var(--gap-m)}
.place-name{font-family:var(--f-display); font-size:var(--step-2); color:var(--text)}
.place-text{font-size:14.5px; color:var(--text-2)}
.place .card-go{margin-top:4px}

/* ---------- Списки с отметкой ---------- */
.ticks{display:grid; gap:12px; align-content:start}
@media(min-width:700px){.ticks-wide{grid-template-columns:repeat(2,1fr) ; gap:12px var(--gap-l)}}
.ticks li{position:relative; padding-left:26px; color:var(--text-2); font-size:15px}
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%;
  border:1px solid var(--flame);
  box-shadow:inset 0 0 0 2px var(--ink-800), 0 0 12px -1px rgba(242,128,31,.65);
}

/* ---------- Две колонки ---------- */
.split{display:grid; gap:var(--gap-l); grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr; gap:var(--gap-xl)}}
.split-media .gallery{grid-template-columns:repeat(2,1fr)}
.split-text{max-width:var(--measure)}
.split-text p{color:var(--text-2)}
/* Один абзац рядом со списком — это тезис, зачем всё перечисленное
   справа. Набран крупнее, чтобы колонки уравновесились: мелким кеглем
   он выглядел обрубком над пустотой. */
.split-text p:only-child{font-size:var(--step-1); line-height:1.5; color:var(--text)}

/* ---------- Конструктор запроса ---------- */
.brief{
  border:1px solid var(--ink-600); border-radius:var(--radius); position:relative;
  background:
    radial-gradient(120% 100% at 88% 0%, var(--flame-veil), transparent 62%),
    linear-gradient(180deg,rgba(26,32,40,.46),rgba(10,12,15,.30));
  padding:var(--gap-l) var(--gap-m);
}
@media(min-width:700px){.brief{padding:var(--gap-xl)}}
.brief-head h2{font-family:var(--f-display); font-weight:400; font-size:var(--step-3); margin:0 0 8px; color:var(--text)}
.brief-head p{color:var(--text-2); max-width:52ch; margin:0 0 var(--gap-l)}
.brief-steps{display:grid; gap:var(--gap-m); margin-bottom:var(--gap-l)}
@media(min-width:900px){.brief-steps{grid-template-columns:repeat(3,1fr); gap:var(--gap-l)}}
.brief-label{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3);
}
.brief-n{
  min-width:22px; height:20px; padding:0 5px; flex:none; display:grid; place-items:center; border-radius:999px;
  border:1px solid var(--flame); color:var(--flame); font-size:10px; letter-spacing:.06em;
}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  font-family:var(--f-body); font-size:13.5px; color:var(--text-2); cursor:pointer;
  background:rgba(10,12,15,.5); border:1px solid var(--ink-600); border-radius:999px;
  padding:8px 14px; transition:color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.chip:hover{color:var(--text); border-color:var(--ink-500)}
.chip[aria-pressed="true"]{
  color:var(--core); border-color:rgba(242,128,31,.44); background:var(--flame-veil);
  box-shadow:0 0 20px -8px var(--flame-glow);
}
/* --- Сцена «Ваш вечер» ---------------------------------------
   Кадр слева, три акта выбора справа; на узком экране — кадр сверху.
   Рассказ стоит под кадром, а не поверх: передний план сцены живёт
   у нижнего края, и плашка с текстом закрыла бы ровно его. */
.scene-grid{display:grid; gap:var(--gap-l); margin-bottom:var(--gap-l); align-items:start}
@media(min-width:900px){
  .scene-grid{grid-template-columns:1.15fr .85fr; gap:var(--gap-xl)}
  .scene-grid .brief-steps{grid-template-columns:1fr; gap:var(--gap-m); margin:0}
}
.scene-view{
  margin:0; border:1px solid var(--ink-600); border-radius:var(--radius); overflow:hidden;
  background:var(--ink-900);
}
/* Небо в сумерках: тёплая полоса у горизонта гаснет в ночь. */
.scene-stage{
  position:relative; aspect-ratio:4/3;
  background:
    radial-gradient(70% 46% at 50% 86%, rgba(242,128,31,.16), transparent 70%),
    linear-gradient(180deg, #07090C 0%, #0D1118 58%, #171516 84%, #0A0C0F 100%);
}
/* На телефоне кадр выше — 4:3, с 700px — 16:10. Рисунок режется по
   бокам (slice в разметке): холст и рисунок заполняют один и тот же
   прямоугольник по высоте, поэтому огонь стоит у рук артиста при
   любой пропорции. */
@media(min-width:700px){.scene-stage{aspect-ratio:16/10}}
.scene-stage{overflow:hidden}
.scene-art,.scene-fire{position:absolute; inset:0; width:100%; height:100%}
/* И приближаем: рисунок и холст вместе на 135% высоты, от земли.
   Уходит только пустое небо сверху и края, где ничего нет; артист,
   огонь и город крупнеют. Оба слоя в одной коробке — огонь не съезжает
   с рук артиста. */
.scene-art,.scene-fire{top:auto; bottom:0; height:135%}
.scene-fire{pointer-events:none}
/* Город — дальний план: виден, но огонь перед ним главнее. */
.scene-city,.scene-front{opacity:0; transition:opacity .6s var(--ease)}
.scene-city[data-on]{opacity:.34}
.scene-performer{transition:opacity .5s var(--ease)}
/* На свадьбе в центре пара, огонь вокруг неё — артист не нужен. */
.scene-stage[data-segment="wedding"] .scene-performer{opacity:0}
.scene-front[data-on]{opacity:1}
/* Искры холодных фонтанов: пунктир, который мерцает. Два фонтана
   вразнобой — синхронное мерцание читается гирляндой. */
.scene-spark{stroke:#FFE7C4; stroke-width:1.4; stroke-linecap:round; stroke-dasharray:.5 3.5; animation:spark-rise .7s linear infinite}
.scene-spark-late{animation-duration:.9s}
@keyframes spark-rise{to{stroke-dashoffset:-8}}

/* Рассказ — реплика визуальной новеллы: три строки, печатаются по
   буквам. Высоту каждой строки заранее держит scene.js по готовому
   тексту — так кнопки ниже не прыгают, пока текст печатается. */
.scene-say{
  border-top:1px solid rgba(242,128,31,.28);
  background:linear-gradient(180deg, rgba(242,128,31,.06), transparent 60%), var(--ink-900);
  padding:14px 18px 16px;
  font-size:14.5px; line-height:1.5; color:var(--text-2);
}
.scene-say p{margin:0}
.scene-say p + p{margin-top:2px}
.scene-say p:last-child{color:var(--text)}
.scene-say .typing::after{
  content:""; display:inline-block; width:.5em; height:1em; margin-left:2px; vertical-align:-.12em;
  background:var(--flame); opacity:.8; animation:caret 1s steps(2) infinite;
}
@keyframes caret{50%{opacity:0}}

.brief-out{border-top:1px solid var(--ink-600); padding-top:var(--gap-m)}
.brief-preview-label{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3); margin:0 0 8px;
}
.brief-preview{
  font-size:15.5px; color:var(--text); background:var(--ink-900); border:1px solid var(--ink-600);
  border-left:2px solid var(--flame); border-radius:var(--radius);
  padding:15px 18px; margin:0 0 var(--gap-m); max-width:64ch;
}
.brief-note{font-size:13px; color:var(--text-3); max-width:56ch; margin:var(--gap-s) 0 0}
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  background:var(--ink-700); border:1px solid var(--flame-line,var(--ink-500));
  color:var(--text); font-size:14px; padding:12px 20px; border-radius:999px;
  box-shadow:0 12px 40px -14px rgba(0,0,0,.8); opacity:0; pointer-events:none; z-index:60;
  transition:opacity .28s var(--ease), transform .28s var(--ease-out);
}
.toast[data-show="true"]{opacity:1; transform:translate(-50%,0)}

/* ---------- Финальный призыв ---------- */
.cta-block{
  position:relative; overflow:hidden;
  border-top:1px solid var(--ink-600);
  background:
    radial-gradient(90% 120% at 50% 120%, var(--flame-veil), transparent 62%),
    var(--ink-900);
  padding:var(--gap-xl) 24px;
}
@media(min-width:900px){.cta-block{padding:118px 24px}}
/* Финал закрывается тем же, чем открывается первый экран: живым огнём.
   Фигура здесь медленнее и тише — под ней стоит текст, спорить с ним
   она не должна. */
.stage-cta{position:absolute; inset:0; z-index:0; pointer-events:none}
.stage-cta canvas{width:100%; height:100%}
/* Тёмное пятно ровно под словами: строки читаются, а огонь вокруг
   остаётся заметным. Пятно узкое и мягкое — широкое гасило фигуру
   целиком, и от неё оставался еле различимый след по краю. */
.stage-cta::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(42% 46% at 50% 46%,
    rgba(4,6,10,.90) 0%, rgba(4,6,10,.52) 52%, rgba(4,6,10,0) 100%);
}
.cta-inner{max-width:640px; margin:0 auto; text-align:center; position:relative; z-index:1}
.cta-inner h2{font-family:var(--f-display); font-weight:400; font-size:var(--step-4); line-height:1.1; margin:0 0 var(--gap-s); color:var(--text); text-wrap:balance}
/* Грузинские слова длиннее: «ღონისძიებისთვის» на 360px не влезает
   в строку при размере step-4 и вылезает за край на 8px. Ломать слово
   посередине некрасиво — на узком экране чуть уменьшаем кегль. */
@media(max-width:420px){[lang="ka"] .cta-inner h2,[lang="ka"] .section-title{font-size:clamp(24px,8.2vw,34px)}}
.cta-inner p{color:var(--text-2); margin:0 0 var(--gap-m)}
.cta-inner .actions{justify-content:center}
.cta-price{font-family:var(--f-mono); font-size:12.5px; color:var(--text-3); margin-top:var(--gap-m) !important}

/* ---------- Соседние направления ---------- */
.related{display:grid; gap:1px; background:var(--ink-600); border:1px solid var(--ink-600); border-radius:var(--radius); overflow:hidden}
@media(min-width:700px){.related{grid-template-columns:repeat(4,1fr)}}
.related a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap-s);
  background:var(--ink-800); padding:20px; font-size:15px; color:var(--text-2);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.related a svg{width:15px; height:15px; color:var(--flame); transition:transform .2s var(--ease)}
.related a:hover{background:var(--ink-700); color:var(--text)}
.related a:hover svg{transform:translateX(4px)}

/* ---------- Каналы связи ---------- */
.channels{display:grid; gap:var(--gap-s); grid-template-columns:1fr}
@media(min-width:640px){.channels{grid-template-columns:repeat(2,1fr); gap:var(--gap-m)}}
@media(min-width:1000px){
  .channels{grid-template-columns:repeat(3,1fr)}
  /* Пять каналов в сетке из трёх оставляли пустую шестую ячейку.
     Та же беда, что была у карточек направлений, и решение то же:
     шесть колонок, сверху три по две, снизу две по три. */
  .channels[data-count="5"]{grid-template-columns:repeat(6,1fr)}
  .channels[data-count="5"] > *{grid-column:span 2}
  .channels[data-count="5"] > :nth-child(4),
  .channels[data-count="5"] > :nth-child(5){grid-column:span 3}
}
.channel{
  display:flex; flex-direction:column; gap:5px; padding:22px;
  border:1px solid var(--ink-600); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(26,32,40,.40),rgba(10,12,15,.26));
  transition:border-color .25s var(--ease), transform .25s var(--ease-out);
}
a.channel:hover{transform:translateY(-2px); border-color:var(--ink-500)}
.ch-icon{width:20px; height:20px; color:var(--flame); margin-bottom:6px}
.ch-icon svg{width:100%; height:100%}
.ch-label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3)}
.ch-value{font-family:var(--f-display); font-size:var(--step-2); color:var(--text); word-break:break-word}
.ch-note{font-size:12.5px; color:var(--text-3)}
.channel[data-ready="false"]{opacity:.66}
.channel .tag{align-self:flex-start; margin-top:6px}

/* ---------- Подвал ----------
   Подвал — не четвёртый очаг, а место, где огонь уже погас. Правило
   «огонь кончается перед подвалом» в проекте принято давно: wick.js
   в bounds() останавливает ленту выше финального блока. Здесь остаётся
   только след — горячий слева шов и короткий тёплый подхват в верхней
   полосе, где нет ни одной буквы. Ниже только остывание.

   Огня за ссылками не будет по арифметике, а не по вкусу: --text-3
   на фоне подвала даёт 4,95:1 при пороге 4,5, и весь подвал мелкий —
   подписи 10,5 px, ссылки 14,5. Любая тёплая вуаль поверх съедает
   этот запас целиком.

   Воздух сверху равен воздуху финального блока: блок после самого
   медленного огня на сайте не может быть плотнее его. Обе величины
   переключаются на одном брейкпоинте 900. */
.site-foot{
  --foot-air:var(--gap-xl);
  padding:var(--foot-air) 0 var(--gap-m);
  background-color:var(--ink-900);
  background-image:
    linear-gradient(90deg,
      rgba(242,128,31,.50) 0%, rgba(242,128,31,.12) 16%,
      var(--ink-500) 44%, transparent 100%),
    radial-gradient(78% 100% at 50% 0%,
      rgba(242,128,31,.11) 0%, rgba(242,128,31,.035) 46%, transparent 76%);
  background-repeat:no-repeat, no-repeat;
  background-position:0 0, 0 0;
  /* Подхват физически кончается вместе с полосой воздуха, а не «почти
     гаснет»: за --foot-air он не выходит и до текста не достаёт. */
  background-size:100% 1px, 100% var(--foot-air);
}
@media(min-width:900px){.site-foot{--foot-air:118px}}

/* Общая ось. У .shell padding 24px стоит ВНУТРИ max-width, а у подвала
   он стоял на .site-foot — и с ширины окна 1228 подвал уезжал на 24 px
   левее всего текста над ним. Замерено при 1440: подвал на 130,
   заголовки на 154. Сайт стоит на жёстком левом крае, такой сдвиг
   эту ось рвёт. */
.foot-in,.foot-say,.foot-end{max-width:var(--shell); margin-inline:auto; padding-inline:24px}

.foot-in{display:grid; gap:var(--gap-l); grid-template-columns:1fr}
/* minmax(0,1fr) обязателен: без него длинное грузинское слово
   распирает колонку и ломает сетку. */
@media(min-width:700px){
  .foot-in{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap-m)}
  .foot-brand{grid-column:1 / -1}
}
@media(min-width:1000px){
  .foot-in{grid-template-columns:1.45fr repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:auto}
}
.foot-brand .logo{margin:0 0 12px}
.foot-note{color:var(--text-3); font-size:14px; max-width:34ch; margin:0}

.foot-col{display:flex; flex-direction:column; align-items:flex-start; gap:9px}
.foot-title{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin:0 0 4px}
.foot-col a{font-size:14.5px; color:var(--text-2); transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--core)}
/* align-items:flex-start выше — чтобы рамка фокуса обнимала слово,
   а не растягивалась на всю колонку. */
.foot-col a[aria-current="page"]{color:var(--core)}

/* Второй регистр: связь и условия. Плотность уже ниже, чем у навигации. */
.foot-say{
  margin-top:var(--gap-l); padding-top:var(--gap-m);
  border-top:1px solid var(--ink-600);
  display:flex; flex-wrap:wrap; gap:var(--gap-m) var(--gap-xl);
  align-items:flex-start; justify-content:space-between;
}
.foot-social{display:flex; flex-wrap:wrap; gap:8px var(--gap-m)}
.foot-social a{
  display:inline-flex; align-items:baseline; gap:9px;
  font-size:13px; color:var(--text-2); transition:color .2s var(--ease);
}
.foot-social a svg{width:15px; height:15px; color:var(--flame); align-self:center}
.foot-social a:hover{color:var(--core)}
/* Город впереди ника: два одинаково серых адреса различаются
   с одного взгляда, а не после чтения. */
.fs-city{color:var(--text)}
.fs-at{font-family:var(--f-mono); font-size:12px; color:var(--text-3)}
.foot-terms{font-size:13px; color:var(--text-3); max-width:46ch; margin:0}

/* Третий регистр: самый тихий. */
.foot-end{
  margin-top:var(--gap-m); padding-top:var(--gap-s);
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--gap-s) var(--gap-m); flex-wrap:wrap;
  font-family:var(--f-mono); font-size:11px; color:var(--text-3);
}
.foot-langs{display:flex; gap:2px}
.foot-langs a{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--text-3);
  padding:4px 7px; border-radius:var(--radius); transition:color .2s var(--ease);
}
.foot-langs a:hover{color:var(--text)}
.foot-langs a[aria-current="true"]{color:var(--core); background:var(--flame-veil)}

/* ---------- Липкая панель на мобильном ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:none; gap:8px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,12,15,.92); backdrop-filter:blur(14px); border-top:1px solid var(--ink-600);
}
.sticky-cta .btn{flex:1 1 0; min-width:0; justify-content:center; padding:13px 12px; font-size:14.5px}
@media(max-width:700px){
  .sticky-cta{display:flex}
  body{padding-bottom:76px}
}

/* ---------- Огонь по правому полю ----------
   Коробку целиком считает CSS, а JS её только читает. Левый край —
   ровно правый край .shell, то есть на её же 24 px правее последней
   буквы: наезд на текст невозможен арифметически. Прежняя нить шла
   от ЛЕВОГО края колонки и по построению заезжала на заголовки.

   min(50%, ...) вместо простого 590px: при окне уже 1180 колонка
   перестаёт быть шире окна, левый край доходит до 100%, ширина
   схлопывается в ноль — и ленты просто нет, без переполнения. */
/* height задана явно: canvas — замещаемый элемент, пара top/bottom
   его не растягивает, он остаётся при своей собственной высоте.
   Для fixed-элемента 100% — это высота окна. */
.wick{
  position:fixed; top:0; height:100%;
  left:calc(50% + min(50%, var(--shell) / 2));
  width:min(136px, calc(50% - min(50%, var(--shell) / 2)));
  z-index:0; pointer-events:none;
}
/* .shell поднят на z-index 1, .band своего стека не создаёт — лента
   гарантированно уходит ПОД текст. Это инвариант: при любой ошибке
   в расчётах огонь окажется за словами, а не на них. */
@media print{ .wick{display:none} }
@media (forced-colors:active){ .wick{display:none} }

/* ---------- Появление при скролле ---------- */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
[data-reveal][data-shown="true"]{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card-fig path{stroke-dashoffset:0}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  [data-reveal]{opacity:1; transform:none}
  .btn-primary::before{animation:none; opacity:.6}
  .led,.lg-show{animation:none; background-position:28% center}
  .flame-body,.flame-core,.flame-spark{animation:none}
  .lm-spin{animation:none}
  .scene-spark{animation:none}
  .lg-flag,.lg-flag::after{animation:none; transform:none}
}

/* ================================================================
   ОДНА НОЧЬ (пробная ветка spike/night-story)
   Прокрутка — это время: сверху сумерки, внизу угли.
   ================================================================ */

/* --- Небо. Высокая полоса градиента едет за прокруткой: на первом
   экране сине-фиолетовые сумерки, к середине — ночь, у финала тёплый
   отсвет огня, в подвале — пепел. Где браузер не умеет привязывать
   анимацию к прокрутке, остаётся ровная ночь. */
.sky{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
    #1A2142 0%, #141831 9%, #0D1020 20%, #090B12 34%,
    #07090D 58%, #0A0908 72%, #1C0F07 84%, #120A06 90%, #060606 100%);
  background-size:100% 700%;
  background-position:0 45%;
}
@supports (animation-timeline: scroll()){
  .sky{animation:sky-time linear both; animation-timeline:scroll(root)}
  @keyframes sky-time{from{background-position:0 0} to{background-position:0 100%}}
}
@media (prefers-reduced-motion: reduce){ .sky{animation:none; background-position:0 45%} }

/* Сквозь чередующиеся полосы, подвал и низ первого экрана небо
   должно просвечивать — иначе у каждой полосы свой ровный цвет и
   ночь рвётся на куски. */
.band-alt{
  background:
    radial-gradient(110% 70% at 8% 0%, rgba(242,128,31,.05), transparent 56%),
    rgba(4,6,10,.55);
}
.stage-page::after{
  background:
    linear-gradient(to bottom, rgba(6,8,11,.55) 0%, rgba(6,8,11,.18) 30%, rgba(6,8,11,.42) 70%, rgba(6,8,11,0) 100%);
}
@media(min-width:900px){
  .stage-page::after{
    background:
      linear-gradient(95deg, rgba(6,8,11,.90) 0%, rgba(6,8,11,.78) 34%, rgba(6,8,11,.22) 56%, rgba(6,8,11,.04) 100%),
      linear-gradient(to bottom, rgba(6,8,11,.40) 0%, transparent 22%, rgba(6,8,11,.36) 66%, rgba(6,8,11,0) 100%);
  }
}
/* Затемнение под текстом первого экрана тает книзу целиком, вместе
   с горизонтальной частью — иначе по нижнему краю сцены огня идёт
   ступенька между затемнением и небом. */
.stage-page::after{
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
}
/* Отсвет на «полу» под героем был самым ярким у нижнего края — на
   ровном фоне это незаметно, на небе даёт ступеньку. Гасим к краю. */
.hero::after{
  -webkit-mask-image:linear-gradient(to top, transparent 0%, #000 55%);
          mask-image:linear-gradient(to top, transparent 0%, #000 55%);
}
.site-foot{background-color:rgba(4,6,10,.45)}

/* --- Метки времени. Стоят в конце линии секции, как таймкод на
   плёнке. Пока огонь справа до них не дошёл — серые; дошёл —
   загораются и так и остаются: ночь не отматывается назад. */
.rule-time{
  order:3; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  color:var(--text-3); transition:color .6s var(--ease), text-shadow .6s var(--ease);
}
.rule[data-night]::after{order:2}
.rule[data-lit] .rule-time{color:var(--core); text-shadow:0 0 14px rgba(242,128,31,.7)}

/* --- Голос рассказчика: одна строка на первом экране и одна в
   подвале. Мелко, моноширинным — ремарка, а не заголовок. */
.night-say{
  display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.04em;
  color:var(--text-3); margin:var(--gap-l) 0 0; max-width:60ch;
}
.night-say time{color:var(--core); letter-spacing:.14em; text-shadow:0 0 12px rgba(242,128,31,.55)}
.night-say-end{
  max-width:var(--shell); margin:var(--gap-m) auto 0; padding-inline:24px;
}
.night-say-end time{color:var(--text-2); text-shadow:none}

/* --- Артист под огнём первого экрана: тот же силуэт, что в сцене
   «Ваш вечер». Руки — в центре фигуры пои (cx .76, cy .5 из site.js),
   размер — от меньшей стороны сцены, как и сама фигура. */
.stage-page{container-type:size}
.hero-performer{display:none}
@media(min-width:900px){
  .hero-performer{
    display:block; position:absolute; left:76%; top:50%;
    height:22cqmin; width:auto; transform:translate(-50%,-22%);
    stroke:var(--flame); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
    filter:drop-shadow(0 0 5px rgba(242,128,31,.55)); opacity:.8; z-index:1;
  }
  /* Толщина штриха — в пикселях экрана, как у силуэтов городов: иначе
     растянутый рисунок тянет за собой и линию, и артист выходит жирным. */
  .hero-performer *{vector-effect:non-scaling-stroke
  }
}

/* --- Страница «не найдено»: три пути обратно под кнопками --- */
.nf-links{display:flex; flex-wrap:wrap; gap:8px 22px; margin:var(--gap-l) 0 0; font-size:15px}
.nf-links a{color:var(--text-2); border-bottom:1px solid var(--ink-500); padding-bottom:2px; transition:color .2s var(--ease), border-color .2s var(--ease)}
.nf-links a:hover{color:var(--core); border-color:var(--flame)}

/* ================================================================
   Телефон: страница короче без потери смысла
   Страница направления занимала почти 12 экранов. Тексты не тронуты —
   ужата только вёрстка, и только на узком экране.
   ================================================================ */
@media(max-width:639px){
  /* Воздух между секциями: 72 → 52. Девять секций по два отступа —
     это больше полутора экранов пустоты. */
  .band{padding:52px 0}
  .band-tight{padding:28px 0}

  /* Галерея направления: один горизонтальный кадр вместо трёх. Пока
     в ней нет съёмки, три кадра подряд — полтора экрана графики без
     информации. Когда придут фотографии, вернём ленту с прокруткой. */
  .gallery-bleed .plate:not(:first-child){display:none}

  /* Шаги: номер слева от заголовка, а не отдельной строкой над ним. */
  .steps{gap:0}
  .steps li{
    display:grid; grid-template-columns:34px 1fr; column-gap:4px;
    padding:16px 0 18px;
  }
  .steps li::before{position:static; grid-row:1 / span 2; border-top:none; padding-top:5px}
  .steps h3{margin:0 0 4px; font-size:var(--step-1)}
  .steps p{font-size:14.5px}

  /* Карточки дополнений плотнее. */
  .card{padding:18px 18px 20px}
}