/* ═══════════════════════════════════════════════════════════════════════════
   HOME v3 «ІНСТРУМЕНТ» · кадр A «Перон» — накат мока redesign-2026/13-home-final.html
   Рішення Віктора 16.07: «повна перебудова, а не заплати старого дизайну».

   Неймспейс .h2026 — вільний (перевірено: 0 збігів у premium.css, ax-ds.css,
   at-ds.css, style-desktop.css). Тому війни специфічності тут не існує:
   легасі-селекторам у цій розмітці НЕМА ЩО матчити.

   ЩО ЦЕЙ ФАЙЛ ЗАМІНЯЄ (видалено тим самим комітом):
   • component/home/hero.phtml   → component/home/scene.phtml
   • component/home/extras.phtml → component/home/below.phtml
   • ax-ds.css: HERO (:325-442), MOOD CARDS (:501-545), СМУГА НАПРЯМКІВ
     (:546-565), ТАБЛО (:597-668), ЗАСТОСУНОК (:727-788), РЕЖИМ ВИДАЧІ
     (:789-800) — усе це описувало розмітку, якої більше немає.
     ax-ds.css лишається живим: у ньому шапка (.ax-hd) і підвал (.ax-ft),
     які поза Home і не чіпаються.
   • premium.css: .axsc сцена (:2517-2546), .ax-hero* хвости (:2550-2551,
     2594, 2841-2842, 2872-2877), SEO-колапс (:942-949), .phx .seo
     (:315-319), .phx .g-faq (:320-324), html.at-searching #homeExtras (:957).

   ЩО НЕ ЧІПАЄМО (SEO1 — дизайн переодягає, не перебудовує):
   • H1 «Квитки на потяг» — рівно як було.
   • 6 × H2 із seo_text, 7 × <details> із Faq::topList — увесь текст у DOM.
     Колапс ТІЛЬКИ CSS max-height (AP-99), як і на проді.
   • 7 напрямків із popular_routes + дубль у підвалі — це перелінковка.
   • .phx більше не потрібен: типографіку SEO/FAQ несе цей файл.

   ФОРМА: розмітка лишається ax-search (component/forms/ticket-search.phtml) —
   там 320 ctl-хуків грошового шляху. Мокова <form class="sf"> НЕ береться;
   натомість .h2026 .ax-search переодягнено під .sf із мока.
   ═══════════════════════════════════════════════════════════════════════════ */

.h2026{
  --at-scene:#0A1024; --at-panel:#16234E; --at-page:#F6F7FB; --at-card:#FFFFFF;
  --at-text:#101729; --at-text2:#4A5570; --at-muted:#667088;
  --at-amber:#FFB800; --at-on-amber:#231700;
  --at-link:#2F59B0; --at-focus:#3B6FD9;
  --at-live:#3ECF8E; --at-delay:#E4685F;
  --at-line:#E4E8F1; --at-line-scene:#FFFFFF17;
  --at-fh:'Manrope',system-ui,sans-serif; --at-fb:'Source Sans 3',system-ui,sans-serif;
  --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --block:32px; --between:56px; --sect:96px;
  --r-ctl:6px; --r-in:12px; --r-card:16px; --r-panel:24px; --r-pill:999px;
  --sh-lie:0 1px 2px rgba(10,16,36,.06);
  --sh-raised:0 14px 34px -12px rgba(10,16,36,.22);
  --sh-glow:0 14px 30px -8px rgba(255,184,0,.5);
  --e:cubic-bezier(.16,1,.3,1);
  container-type:inline-size; container-name:root;
  background:var(--at-page); color:var(--at-text);
  font:400 16px/1.55 var(--at-fb); margin:0 auto; overflow-x:clip;

  /* ⚠ БЕЗ ЦИХ ТРЬОХ РЯДКІВ ГОЛОВНА БІЛА. Стріляло на проді 17.07.
     .wrapper (батько) — display:flex, отже .h2026 це flex-item.
     Базовий розмір flex-item рахується з max-content вмісту — але
     container-type:inline-size вмикає inline-size containment, тобто
     «не бери ширину з вмісту». max-content стає 0 → width:0 → увесь
     контент схлопується в нульову ширину. Сторінка виглядає порожньою,
     хоч DOM цілий (перевірено: height 9902 при width 0).
     Стара розмітка .ax/.phx не мала container-type, тому й не падала. */
  width:100%; flex:1 1 auto; min-width:0;
}
.h2026 *,.h2026 *::before,.h2026 *::after{box-sizing:border-box}
.h2026 [hidden]{display:none !important}
.h2026 h1,.h2026 h2,.h2026 h3{font-family:var(--at-fh)}
.h2026 .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.h2026 button{font:inherit;color:inherit;cursor:pointer}
/* Вага .h2026 тег = (0,0,1,1) — рівно щоб побити Bootstrap a{text-decoration:underline}.
   :where() тут не працює: він дає 0 специфічності і програє. Урок ax-ds.css:63-68. */
.h2026 a{color:inherit;text-decoration:none}
.h2026 svg{display:block}
.h2026 .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.h2026 :focus-visible{outline:3px solid var(--at-focus);outline-offset:2px;border-radius:var(--r-ctl)}
.h2026 .hwrap{max-width:1240px;margin:0 auto;padding:0 40px}
@container root (max-width:900px){.h2026 .hwrap{padding:0 18px}}
.h2026 .hsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── КАДР A «ПЕРОН»: нічне небо, що світлішає до горизонту (П.8) ─────────
   padding-bottom мусить бути більший за наїзд табло — інакше сцена існує в
   DOM, але її не видно, і кадр лишається без світла (L1/D3). 150 проти 70. */
.h2026 .top{position:relative;color:#fff;padding:var(--between) 0 150px;
  background:linear-gradient(180deg,#070C1B 0%,#0A1024 40%,#0E1730 78%,#132043 100%);
  overflow:hidden}
/* Сцена — декор (IL1/IL2: «поїзд, який чекає», не іконка поїзда).
   Вікна вагона мають право світитись амбером (C1: «амбер = світло вікон
   поїзда», L2 дозволяє). Але це АТМОСФЕРА, не дія: драма у фоні, спокій у
   роботі (E3). На повній яскравості шість вікон перетягували увагу з єдиної
   дії кадру — кнопки. Тому приглушена. */
.h2026 .scene{position:absolute;left:0;right:0;bottom:0;height:190px;pointer-events:none;opacity:.62}
@container root (max-width:900px){.h2026 .scene{height:130px;opacity:.45}}
.h2026 .top__in{position:relative;z-index:2}

/* Персональний рядок. Жоден стан не вигадує цифр (П.71) */
.h2026 .me{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s5);padding:11px 14px;
  border-radius:var(--r-in);background:#FFFFFF14;border:1px solid var(--at-line-scene);
  max-width:760px}
.h2026 .me__ic{flex:0 0 auto;color:#FFD36B}
.h2026 .me__t{min-width:0;flex:1}
.h2026 .me__t b{display:block;font-family:var(--at-fh);font-weight:700;font-size:14.5px}
.h2026 .me__t span{font-size:13px;color:#FFFFFFC7}
.h2026 .me__go{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:38px;
  padding:0 14px;border-radius:var(--r-pill);background:#FFFFFF1F;border:1px solid #FFFFFF33;
  font-family:var(--at-fh);font-weight:700;font-size:13.5px}
.h2026 .me__go:hover{background:#FFFFFF33}
.h2026 .me__x{flex:0 0 auto;width:32px;height:32px;border:0;border-radius:50%;background:none;
  color:#FFFFFFA8;display:grid;place-items:center}
.h2026 .me__x:hover{background:#FFFFFF1F;color:#fff}
@container root (max-width:620px){.h2026 .me{flex-wrap:wrap}.h2026 .me__go{width:100%;justify-content:center}}

/* Кікер був амбером — це другий амбер у кадрі поруч зі «Знайти квитки»
   (П.1/§30.5), до того ж амбер тут декор, а не дія (C1). Факт №1 довіри
   тримається вагою і місцем, не кольором (TR2/П.72). */
.h2026 .kick{display:inline-flex;align-items:center;gap:7px;margin:0 0 var(--s3);
  padding:5px 11px;border-radius:var(--r-pill);background:#FFFFFF14;
  border:1px solid var(--at-line-scene);
  font-family:var(--at-fh);font-weight:700;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff}
.h2026 .top h1{margin:0 0 var(--s5);font-size:clamp(32px,4.4vw,52px);font-weight:800;
  letter-spacing:-.035em;line-height:1.04;max-width:640px;color:#fff}

/* ── ФОРМА: три поля + одна дія (SE1/П.41). Пасажирів тут не існує ───────
   Переодягаємо ax-search, а не замінюємо: ctl-хуки — грошовий шлях. */
.h2026 .ax-search{background:#FFFFFFF2;backdrop-filter:blur(8px);border-radius:var(--r-panel);
  padding:var(--s4);box-shadow:0 24px 60px -20px rgba(4,8,20,.7);max-width:980px;
  border:0;margin:0}
.h2026 .ax-search__row{display:grid;grid-template-columns:1fr 44px 1fr 190px auto;
  gap:var(--s3);align-items:end}
@container root (max-width:900px){
  .h2026 .ax-search__row{grid-template-columns:1fr;gap:var(--s2)}
}
.h2026 .ax-search__f{min-width:0}
/* РАМКА В РАМЦІ В РАМЦІ — тут була, прибрано 17.07.
   ax-ds.css:447+ малює рамку і фон на .ax-field (обгортці), бо в його дизайні
   поле — це вся картка з лейблом усередині. Мок 13-home-final малює рамку на
   самому <input>, а лейбл виносить НАД полем. Я додав другу рамку на
   .ax-field__in, не знявши першу — плюс focus-ring зверху = три контури.
   Рішення: обгортка стає голою розміткою, рамку несе тільки input. */
.h2026 .ax-field{
  display:flex;flex-direction:column;gap:5px;min-width:0;margin:0;
  border:0;background:transparent;border-radius:0;padding:0;height:auto;box-shadow:none;
}
.h2026 .ax-field:hover,
.h2026 .ax-field:focus-within{border:0;background:transparent;box-shadow:none}
.h2026 .ax-field__lb{font-family:var(--at-fh);font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--at-muted);padding-left:2px}
.h2026 .ax-field__in{width:100%;min-height:52px;padding:0 14px;border-radius:var(--r-in);
  border:1px solid var(--at-line);background:#fff;color:var(--at-text);
  font:600 16px var(--at-fh);letter-spacing:-.01em}
.h2026 .ax-field__in::placeholder{font-weight:400;color:#9AA3B5;font-family:var(--at-fb)}
.h2026 .ax-field__in:hover{border-color:#C3CBDC}
.h2026 .ax-field__in:focus{outline:none;border-color:var(--at-focus);box-shadow:0 0 0 3px #3B6FD933}
.h2026 .ax-search__f--date{position:relative}
.h2026 .ax-field__ic{position:absolute;right:13px;bottom:17px;color:var(--at-muted);pointer-events:none}
.h2026 .ax-search__swap{align-self:end;width:44px;height:52px;border:1px solid var(--at-line);
  border-radius:var(--r-in);background:#fff;color:var(--at-text2);display:grid;place-items:center;
  transition:background .18s,transform .2s var(--e);padding:0}
.h2026 .ax-search__swap:hover{background:#F0F3F8;transform:rotate(180deg)}
@container root (max-width:900px){
  .h2026 .ax-search__swap{width:100%;height:44px}
  .h2026 .ax-search__swap svg{transform:rotate(90deg)}
}
.h2026 .ax-search__go{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border:0;border-radius:var(--r-in);
  background:var(--at-amber);color:var(--at-on-amber);box-shadow:var(--sh-glow);
  font-family:var(--at-fh);font-weight:800;font-size:15.5px;white-space:nowrap;
  transition:background .18s,transform .18s var(--e)}
.h2026 .ax-search__go:hover{background:#E9A800;transform:translateY(-1px);color:var(--at-on-amber)}

/* Пам'ять поваги: нещодавні маршрути (SE3/П.43). Локальні дані, не бек */
.h2026 .recent{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:var(--s4)}
.h2026 .recent__t{font-size:13px;color:#FFFFFFA8;margin-right:2px}
/* min-height:44px — Apple HIG / Material вимагають 44×44 для тач-цілі.
   Мок мав 36px: він малювався під десктоп, де це не критично. На телефоні
   чіпси — головна навігація по датах і маршрутах, у них не можна не влучати. */
.h2026 .chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;
  border-radius:var(--r-pill);background:#FFFFFF14;border:1px solid var(--at-line-scene);
  color:#fff;font-family:var(--at-fh);font-weight:600;font-size:13.5px}
.h2026 .chip:hover{background:#FFFFFF29;border-color:#FFFFFF4D}
.h2026 .chip.is-on{background:#fff;border-color:#fff;color:var(--at-text)}
.h2026 .recent__sep{width:1px;height:22px;background:var(--at-line-scene);margin:0 4px}

/* ── LIVE-РЯДОК: живі дані УЗ над фолдом ──────────────────────────────────
   Мок його не має (табло тільки під фолдом), але це єдина наша унікальна
   перевага — у Trainline такого немає взагалі. Ховати її під фолд = програш.
   Зелена крапка пульсує: рух означає «дані живі зараз» (motion-meaning). */
.h2026 .lstrip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:var(--s5) 0 0;padding:10px 14px;border-radius:var(--r-pill);
  background:#FFFFFF0F;border:1px solid var(--at-line-scene);
  font-size:13.5px;color:#FFFFFFC7;width:max-content;max-width:100%}
.h2026 .lstrip b{color:#fff;font-family:var(--at-fh);font-weight:700}
.h2026 .lstrip__pulse{width:7px;height:7px;border-radius:50%;background:var(--at-live);
  flex:0 0 auto;animation:h2026pl 2.4s ease-in-out infinite}
.h2026 .lstrip__sep{color:#FFFFFF4D}
.h2026 .lstrip__go{color:#A9C4FF;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:24px}
.h2026 .lstrip__go:hover{color:#fff}
@container root (max-width:620px){.h2026 .lstrip{width:auto}}

/* ── MOOD CARDS «Куди тягне» ──────────────────────────────────────────────
   Єдине місце на головній, де ми говоримо людською мовою, а не таблицею.
   Сцена в картці — мальована (IL1), фото немає і не буде (P1). */
.h2026 .mood{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@container root (max-width:900px){.h2026 .mood{grid-template-columns:1fr}}
.h2026 .mood__i{position:relative;display:block;padding:0;text-align:left;
  border:1px solid var(--at-line);border-radius:var(--r-card);overflow:hidden;
  background:var(--at-card);box-shadow:var(--sh-lie);
  transition:transform .18s var(--e),box-shadow .18s,border-color .18s}
.h2026 .mood__i:hover{transform:translateY(-2px);box-shadow:var(--sh-raised);border-color:#C3CBDC}
.h2026 .mood__sc{display:block;height:104px;position:relative}
/* Три різні світанки — не декор заради декору: колір відрізняє напрямок */
.h2026 .mood__sc--a{background:linear-gradient(180deg,#0A1024 0%,#1B2C63 70%,#3B6FD9 100%)}
.h2026 .mood__sc--b{background:linear-gradient(180deg,#0A1024 0%,#16234E 60%,#1D9E75 100%)}
.h2026 .mood__sc--c{background:linear-gradient(180deg,#0A1024 0%,#3A2A10 65%,#FFB800 100%)}
.h2026 .mood__sc::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:#FFFFFF29}
.h2026 .mood__b{display:block;padding:var(--s4)}
.h2026 .mood__t{display:inline-block;margin-bottom:6px;padding:3px 9px;border-radius:var(--r-pill);
  background:#EEF2FB;color:var(--at-link);
  font-family:var(--at-fh);font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.h2026 .mood__c{display:block;font-family:var(--at-fh);font-weight:800;font-size:19px;
  letter-spacing:-.02em;color:var(--at-text)}
.h2026 .mood__l{display:block;margin-top:5px;font-size:13.5px;line-height:1.45;color:var(--at-text2)}
.h2026 .mood__go{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);min-height:24px;
  font-family:var(--at-fh);font-weight:700;font-size:13.5px;color:var(--at-link)}
.h2026 .mood__i:hover .mood__go{color:var(--at-amber)}
.h2026 .mood__i:hover .mood__go svg{transform:translateX(2px)}
.h2026 .mood__go svg{transition:transform .18s var(--e)}

/* Довіра — поведінкою, не словами (TR1). Факт №1 найважчий (TR2/П.72) */
.h2026 .facts{display:flex;gap:var(--s5);flex-wrap:wrap;margin:var(--s5) 0 0;
  font-size:13.5px;color:#FFFFFFC7}
.h2026 .facts span{display:inline-flex;align-items:center;gap:8px}
.h2026 .facts svg{flex:0 0 auto;color:#FFFFFF80}
.h2026 .facts b{font-weight:600;color:#fff}

/* ── ТАБЛО ЗАТРИМОК: живі дані УЗ = наша унікальна перевага ────────────── */
.h2026 .board{background:var(--at-panel);border-radius:var(--r-panel);color:#fff;
  box-shadow:var(--sh-raised),inset 0 1px 0 #FFFFFF1F;
  margin-top:-70px;position:relative;z-index:3;overflow:hidden}
.h2026 .board__hd{display:flex;align-items:center;gap:var(--s3);padding:var(--s5);
  border-bottom:1px solid #FFFFFF14;background:#FFFFFF08;flex-wrap:wrap}
/* color:#fff ОБОВ'ЯЗКОВО, успадкування від .board{color:#fff} тут не працює:
   premium.css має ПРЯМЕ правило h1,h2,h3,h4,h5,h6{color:var(--at-ink)}, а пряме
   правило завжди б'є inherit — незалежно від специфічності батька. Через це
   заголовок табло був темний на темному (перевірено в DevTools 17.07). */
.h2026 .board__hd h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff}
.h2026 .live{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--r-pill);
  background:#3ECF8E1F;color:#8FEFC4;font-family:var(--at-fh);font-weight:700;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase}
.h2026 .live i{width:6px;height:6px;border-radius:50%;background:var(--at-live);
  animation:h2026pl 2.4s ease-in-out infinite}
@keyframes h2026pl{0%,100%{opacity:1}50%{opacity:.3}}
.h2026 .board__st{margin-left:auto;font-size:12.5px;color:#FFFFFFA8}
.h2026 .board__b{display:grid;grid-template-columns:1fr 300px;gap:0}
@container root (max-width:900px){.h2026 .board__b{grid-template-columns:1fr}}
.h2026 .dl{padding:var(--s4) var(--s5)}
.h2026 .dl__r{display:grid;grid-template-columns:64px 1fr auto;gap:var(--s4);align-items:center;
  padding:11px 0;border-bottom:1px solid #FFFFFF0F}
.h2026 .dl__r:last-child{border:0}
.h2026 .dl__n{font-family:var(--at-fh);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.h2026 .dl__t{min-width:0}
.h2026 .dl__t b{display:block;font-weight:600;font-size:14.5px;font-family:var(--at-fb)}
.h2026 .dl__t span{font-size:12.5px;color:#FFFFFFA8}
/* Семантичний колір ЗАВЖДИ дубльований знаком і словом (C5/П.5/A4) */
.h2026 .dl__s{display:inline-flex;align-items:center;gap:6px;font-family:var(--at-fh);
  font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.h2026 .dl__s--ok{color:#8FEFC4}
.h2026 .dl__s--w{color:#FFD36B}
.h2026 .dl__s--b{color:#FF9E96}
.h2026 .nums{border-left:1px solid #FFFFFF14;padding:var(--s5);display:flex;flex-direction:column;
  justify-content:center;gap:var(--s5)}
@container root (max-width:900px){.h2026 .nums{border-left:0;border-top:1px solid #FFFFFF14;
  flex-direction:row;justify-content:space-around}}
.h2026 .n b{display:block;font-family:var(--at-fh);font-weight:800;font-size:34px;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.h2026 .n span{font-size:12.5px;color:#FFFFFFA8;display:block;margin-top:5px}
.h2026 .board__f{margin:0;padding:var(--s4) var(--s5);border-top:1px solid #FFFFFF14;
  background:#FFFFFF08;font-size:14px;color:#FFFFFFC7}
.h2026 .board__f a{color:#A9C4FF;font-weight:600}
.h2026 .board__f a:hover{color:#fff}

/* ── СЕКЦІЇ ───────────────────────────────────────────────────────────── */
.h2026 .sect{padding:var(--sect) 0 0}
.h2026 .sect__h{margin:0 0 var(--block);font-size:clamp(22px,2.4vw,28px);font-weight:800;
  letter-spacing:-.025em}
.h2026 .sect__k{margin:0 0 8px;font-family:var(--at-fh);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--at-muted)}

/* Напрямки — це ПЕРЕЛІНКОВКА (SEO-вага), не декор.
   Цін і тривалості немає: Seo::getStations('routes') тягне з popular_routes
   рівно назви станцій. RoutePrice.php у репо мертвий — жодного виклику.
   Отже картка напрямку = НАЗВА + стрілка. Усе (П.71). */
.h2026 .dirs{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:10px}
.h2026 .dir{display:flex;align-items:center;gap:var(--s3);padding:15px 16px;border-radius:var(--r-card);
  background:var(--at-card);border:1px solid var(--at-line);box-shadow:var(--sh-lie);
  transition:border-color .18s,transform .18s var(--e),box-shadow .18s}
.h2026 .dir:hover{border-color:#C3CBDC;transform:translateY(-2px);box-shadow:var(--sh-raised)}
.h2026 .dir__t{min-width:0;flex:1}
.h2026 .dir__t b{display:block;font-family:var(--at-fh);font-weight:700;font-size:15px;
  letter-spacing:-.01em}
.h2026 .dir__t span{font-size:12.5px;color:var(--at-muted)}
.h2026 .dir__a{flex:0 0 auto;color:#C3CBDC;transition:color .18s,transform .18s var(--e)}
.h2026 .dir:hover .dir__a{color:var(--at-amber);transform:translateX(2px)}

/* Довіра */
.h2026 .trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s4)}
.h2026 .tr__i{width:38px;height:38px;border-radius:10px;background:#EEF2FB;color:var(--at-link);
  display:grid;place-items:center;margin-bottom:var(--s3)}
.h2026 .trust h3{margin:0 0 5px;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.h2026 .trust p{margin:0;font-size:13.5px;color:var(--at-text2);line-height:1.5}

/* ── ЗАСТОСУНОК: реальні скріни продукту ────────────────────────────────
   P1 каже «за замовчуванням фото немає», P2 дає виняток саме на це:
   справжні знімки продукту як АРТЕФАКТИ. Не сток і не мокап із вигаданим
   UI (П.77 такі забороняє) — реальні store-скріни білда 1.4. */
.h2026 .app{position:relative;display:grid;grid-template-columns:1fr 470px;gap:var(--s6);
  align-items:center;padding:var(--block) 0 0 var(--block);border-radius:var(--r-panel);
  color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#0B1226 0%,#16234E 62%,#1B2C63 100%)}
@container root (max-width:1000px){.h2026 .app{grid-template-columns:1fr;padding:var(--block)}}
/* Заграва за телефонами — те саме джерело світла, що на пероні (L1) */
.h2026 .app::before{content:'';position:absolute;right:8%;top:-30%;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,#FFB80024 0%,transparent 66%);
  pointer-events:none}
.h2026 .app__t{position:relative;z-index:2;padding-bottom:var(--block)}
/* Той самий випадок, що й у табло: premium.css h1..h6{color:var(--at-ink)} б'є
   inherit від .app{color:#fff}. Заголовок був майже невидимий на темній панелі. */
.h2026 .app h2{margin:0 0 10px;font-size:clamp(21px,2.2vw,26px);font-weight:800;letter-spacing:-.025em;color:#fff}
.h2026 .app p{margin:0 0 var(--s5);color:#FFFFFFC7;font-size:14.5px;max-width:440px;line-height:1.55}
.h2026 .app__f{margin:0 0 var(--s5);padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.h2026 .app__f li{display:flex;align-items:center;gap:9px;font-size:14px;color:#FFFFFFC7}
.h2026 .app__f svg{flex:0 0 auto;color:#8FEFC4}
.h2026 .app__b{display:flex;gap:10px;flex-wrap:wrap}
.h2026 .app__b a{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 18px;
  border-radius:var(--r-in);background:#FFFFFF14;border:1px solid #FFFFFF29;
  font-family:var(--at-fh);font-weight:700;font-size:14px;transition:background .18s}
.h2026 .app__b a:hover{background:#FFFFFF29}
/* width:100% обов'язковий — це та сама пастка, що вбила головну 17.07:
   усі діти .app__sh — position:absolute, отже intrinsic width = 0. Поки .app
   двоколонковий, ширину дає grid-трек (470px). Але на ≤1000 .app стає в одну
   колонку, трек зникає — і .app__sh схлопується в нуль. Телефони, позиційовані
   від left:50%, роз'їжджались за краї. */
.h2026 .app__sh{position:relative;height:400px;align-self:end;width:100%}
@container root (max-width:1000px){
  .h2026 .app__sh{height:300px;margin:0 auto;max-width:420px}
}
.h2026 .phone{position:absolute;bottom:-40px;border-radius:26px;overflow:hidden;
  border:5px solid #05080F;box-shadow:0 30px 70px -18px rgba(0,0,0,.75);
  background:#05080F;transition:transform .3s var(--e)}
.h2026 .phone img{display:block;width:100%;height:auto}
.h2026 .phone--a{left:14px;width:200px;transform:rotate(-4deg);z-index:1}
.h2026 .phone--b{left:210px;width:216px;transform:rotate(3deg);bottom:-16px;z-index:2}
.h2026 .app:hover .phone--a{transform:rotate(-5.5deg) translateY(-6px)}
.h2026 .app:hover .phone--b{transform:rotate(4deg) translateY(-10px)}
@container root (max-width:1000px){
  .h2026 .phone--a{left:50%;margin-left:-190px;width:180px}
  .h2026 .phone--b{left:50%;margin-left:0;width:190px}
}

/* ── FAQ. Більша частина SEO-маси (≈2000 слів) — і вона ВСЯ в DOM ──────── */
.h2026 .faq{display:grid;grid-template-columns:300px 1fr;gap:var(--s6);align-items:start}
@container root (max-width:900px){.h2026 .faq{grid-template-columns:1fr}}
.h2026 .faq__a{position:sticky;top:var(--s5)}
@container root (max-width:900px){.h2026 .faq__a{position:static}}
.h2026 .faq__a h2{margin:0 0 10px;font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.025em}
.h2026 .faq__a p{margin:0;font-size:14px;color:var(--at-text2);line-height:1.55}
.h2026 .faq__a a{color:var(--at-link);font-weight:600;border-bottom:1px solid #2F59B040}
.h2026 .faq__l{background:var(--at-card);border:1px solid var(--at-line);border-radius:var(--r-card);
  box-shadow:var(--sh-lie);overflow:hidden}
.h2026 .q{border-bottom:1px solid var(--at-line)}
.h2026 .q:last-child{border:0}
.h2026 .q > summary{display:flex;align-items:flex-start;gap:var(--s3);padding:17px var(--s5);
  cursor:pointer;list-style:none;font-family:var(--at-fh);font-weight:700;font-size:15.5px;
  letter-spacing:-.01em;transition:background .15s;min-height:44px}
.h2026 .q > summary::-webkit-details-marker{display:none}
.h2026 .q > summary:hover{background:#F6F7FB}
.h2026 .q__x{margin-left:auto;flex:0 0 auto;color:var(--at-muted);transition:transform .2s var(--e)}
.h2026 .q[open] > summary .q__x{transform:rotate(180deg)}
.h2026 .q__b{padding:0 var(--s5) var(--s5);color:var(--at-text2);font-size:15px;line-height:1.6}
.h2026 .q__b p{margin:0 0 12px}
.h2026 .q__b p:last-child{margin:0}
.h2026 .q__b ol,.h2026 .q__b ul{margin:0 0 12px;padding-left:20px}
.h2026 .q__b li{margin-bottom:6px}
.h2026 .q__b strong{color:var(--at-text);font-weight:600}
.h2026 .q__b a{color:var(--at-link);font-weight:600}
.h2026 .q__b figure{margin:14px 0}
/* Скріншоти в довгих відповідях — «артефакти» в рамці паперу (P2).
   Текст FAQ приходить із БД сирим HTML, тому картинки в ньому — <img>. */
.h2026 .q__b img{max-width:100%;height:auto;border:1px solid var(--at-line);
  border-radius:10px;display:block;margin:14px 0}
.h2026 .q__b figcaption{margin-top:7px;font-size:12.5px;color:var(--at-muted)}

/* ── SEO-СТАТТІ. «Туди клієнти не ходять» (Віктор) — нуль дизайну,
      щільний текст для Google. Але читабельний, не сміття (SEO4/П.15) ──── */
.h2026 .seo{padding:var(--sect) 0 var(--between)}
.h2026 .seo__c{columns:2;column-gap:46px}
@container root (max-width:900px){.h2026 .seo__c{columns:1}}
.h2026 .seo__c h2{margin:0 0 10px;font-size:17px;font-weight:700;letter-spacing:-.015em;
  break-after:avoid}
.h2026 .seo__c section{break-inside:avoid-column;margin-bottom:26px}
.h2026 .seo__c p{margin:0 0 10px;font-size:14.5px;line-height:1.62;color:var(--at-text2)}
.h2026 .seo__c ul,.h2026 .seo__c ol{margin:0 0 10px;padding-left:19px}
.h2026 .seo__c li{font-size:14.5px;line-height:1.6;color:var(--at-text2);margin-bottom:5px}
.h2026 .seo__c strong{color:var(--at-text);font-weight:600}
.h2026 .seo__c a{color:var(--at-link);font-weight:600}
.h2026 .seo__c img{max-width:100%;height:auto;border-radius:8px}
/* Колапс — ТІЛЬКИ CSS. Увесь текст лишається в DOM (AP-99), як і на проді */
.h2026 .seo__cut{max-height:320px;overflow:hidden;position:relative;transition:max-height .3s var(--e)}
.h2026 .seo__cut[data-open="1"]{max-height:9000px}
.h2026 .seo__fade{position:absolute;left:0;right:0;bottom:0;height:130px;pointer-events:none;
  background:linear-gradient(180deg,#F6F7FB00,#F6F7FB)}
.h2026 .seo__cut[data-open="1"] .seo__fade{display:none}
.h2026 .seo__more{margin-top:var(--s4);min-height:44px;padding:0 20px;border-radius:var(--r-pill);
  border:1px solid var(--at-line);background:var(--at-card);color:var(--at-text);
  font-family:var(--at-fh);font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;gap:8px}
.h2026 .seo__more:hover{border-color:#C3CBDC;background:#fff}
.h2026 .seo__more svg{transition:transform .2s var(--e)}
.h2026 .seo__more[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ── РЕЖИМ ВИДАЧІ ────────────────────────────────────────────────────────
   html.at-searching — готовий контракт resultsUx.js, не наш винахід.
   Коли людина шукає, головна зникає: лишається компактний перон із формою. */
html.at-searching .h2026 .top{padding:var(--s5) 0 var(--s5)}
html.at-searching .h2026 .top h1,
html.at-searching .h2026 .kick,
html.at-searching .h2026 .scene,
html.at-searching .h2026 .recent,
html.at-searching .h2026 .facts,
html.at-searching .h2026 .me{display:none !important}
html.at-searching .h2026 .below{display:none !important}
html.at-searching .h2026 .ax-search{box-shadow:none;max-width:none}

@media (prefers-reduced-motion:reduce){.h2026 *{animation:none!important;transition:none!important}}