/* ── СВІТЛОВІ СЦЕНИ ───────────────────────────────────────────────────────
   Сайт виробника світла живе не «темною і світлою темою», а сценою — так само,
   як зал під його світильниками. Сцена = колірна температура + рівень
   диммування, і каталог це підтримує напряму: CCT 2700…5000 K, DALI, Casambi.

     S1 «Ніч»        2700 K · 30 %   темний зал, презентація
     S2 «День»       4000 K · 70 %   робота й друк
     S3 «Презентація» 5000 K · 100 % сонце в вікні, слабкий екран

   Кожна сцена — окрема продумана палітра, а не обчислена середина: на
   проміжних значеннях текст і фон сходились, і контраст падав до сірого
   по сірому. Усі пари перевірені за WCAG.

   Правило для нових стилів: НЕ писати кольори числами. Поверхня — var(--white),
   підкладка — var(--bg), текст — var(--ink), приглушений — var(--soft),
   текст НА темному блоці — var(--on-ink). Плитка під фото — var(--imgbg),
   вона лишається світлою в усіх сценах, бо фото накладаються режимом
   multiply і на темному просто зникли б. */

:root{
  color-scheme:light;
  /* 4000 K · 70 % — робоче світло: тепла підкладка, тіні на місці.
     🔴 14.08 підкладку опущено (#f6f2ea → #f1ebdd), щоб «День» і «Показ»
     розрізнялись не лише відтінком, а РІВНЕМ світла: раніше обидві сцени
     читались як «світла», і перемикання між ними майже не відчувалось. */
  --ink:#161412;--soft:#6a6258;--white:#fffdf8;--bg:#f1ebdd;
  --on-ink:#fff;--on-accent:#fff;--imgbg:#faf7f1;--on-img:#6a6258;--accent-hi:#ffd98a;--hero-dim:1;--spot:.12;
  --accent:#c6890f;--accent-d:#8a5c06;--ambersoft:#fbf1dc;--amber100:#f6e6c4;
  --line:#e7dfd0;--line2:#f0eadd;
  /* Смислові кольори — теж частина сцени. 🔴 15.08: до цього тривога, успіх і
     очікування були прописані числами прямо у в'ю, тож на темній сторінці
     червоне #b3423a лягало на майже чорне і не читалось. Тепер вони живуть
     тут і міняються разом зі світлом, як і решта поверхонь. */
  --danger:#b3423a;--danger-bg:#fdf0ee;--ok:#3d6b45;--ok-bg:#eef6ee;--warn:#8a6b1f;--warn-bg:#fff6e0;
  --sans:"Space Grotesk","Helvetica Neue","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  /* Технічний моноширинний для ДАНИХ: коди, артикули, характеристики. */
  --mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  /* Висота, а не серпанок: 1px рамка + широка розмита тінь разом дають той
     самий «згенерований» вигляд картки. Тримаємо тінь короткою — рамка вже
     відділяє блок від фону. */
  --shadow:0 2px 8px rgba(30,24,14,.05),0 10px 26px rgba(30,24,14,.08);
  --shadow-sm:0 1px 2px rgba(30,24,14,.05),0 6px 18px rgba(30,24,14,.05);
}

:root[data-scene="night"]{
  color-scheme:dark;
  --ink:#f4f1ea;--soft:#a89f93;--white:#141210;--bg:#0d0c0b;
  --on-ink:#14120f;--on-accent:#14120f;--imgbg:#efece5;--on-img:#6a6258;--accent-hi:#6f4a02;--hero-dim:.52;--spot:.34;
  --accent:#e0b356;--accent-d:#e0b356;--ambersoft:#1e1a15;--amber100:#2a231a;
  --line:#2a2724;--line2:#221f1c;
  /* на темному ті самі смисли беруться світлішими, інакше червоне зливається з фоном */
  --danger:#f2907f;--danger-bg:#2b1a17;--ok:#8fd0a0;--ok-bg:#16241a;--warn:#e8c76e;--warn-bg:#2a2313;
  --shadow:0 2px 8px rgba(0,0,0,.45),0 10px 26px rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);
}

:root[data-scene="bright"]{
  color-scheme:light;
  /* 5000 K · 100 % — холодне денне світло: поверхні синіють, тіні зникають,
     усе стає рівним і різким, як під стельовим світлом у залі показу.
     🔴 14.08 підкладку піднято майже до білого (#e9eff5 → #f8fbfd) і додано
     яскравості герою: різниця з «Днем» тепер саме в РІВНІ світла — тепла
     приглушена сцена проти холодної засвіченої, а не два відтінки сірого. */
  --ink:#05080b;--soft:#3f4a54;--white:#ffffff;--bg:#f8fbfd;
  --on-ink:#fff;--on-accent:#fff;--imgbg:#f2f6fa;--on-img:#3f4a54;--accent-hi:#ffe6ad;--hero-dim:1.2;--spot:.02;
  --accent:#0f6c8e;--accent-d:#0b5a78;--ambersoft:#e4edf4;--amber100:#d7e6f0;
  --line:#c8d5df;--line2:#dde7ee;
  /* під засвіченою сценою смисли беруться трохи глибшими, щоб не бліднули */
  --danger:#a5372f;--danger-bg:#fdeeec;--ok:#2f5c38;--ok-bg:#e9f4ec;--warn:#7a5d14;--warn-bg:#fdf4dd;
  --shadow:0 1px 2px rgba(10,30,45,.06),0 10px 26px rgba(10,30,45,.07);
  --shadow-sm:0 1px 1px rgba(10,30,45,.05),0 3px 10px rgba(10,30,45,.05);
}

/* Перехід між сценами — розгін світла, а не перемальовування кадру:
   фон іде довше й з уповільненням наприкінці, текст — швидше. */
body,nav.top,section,footer,.pill-card,.cat,.fcard,.seg,.pcard,.chip,.opt,
.ltable,.aibox,.cabcard,.authbox,.mega,.faq details,.arw,.cfg,.drawbox{
  transition:background-color .55s cubic-bezier(.22,.61,.36,1),
             color .3s ease,border-color .4s ease;
}
@media(prefers-reduced-motion:reduce){
  body,nav.top,section,footer,.pill-card,.cat,.fcard,.seg,.pcard,.chip,.opt,
  .ltable,.aibox,.cabcard,.authbox,.mega,.faq details,.arw,.cfg,.drawbox{transition:none}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* ── ФОКУС З КЛАВІАТУРИ ───────────────────────────────────────────────────
   🔴 21.08: фокус-стилі були лише у 8 дрібних елементів, а навігація, кнопки
   дій, опції конфігуратора й перемикач виду не показували фокус узагалі —
   людина з клавіатури не бачила, де вона (WCAG 2.4.7). Одне правило на всі
   інтерактивні, з відступом, щоб кільце не зливалося з рамкою елемента. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2.5px solid var(--accent-d);outline-offset:2px;border-radius:6px}
/* На темних поверхнях кільце беремо світлим, інакше тоне у фоні. */
.btn-dark:focus-visible,.cfgline a:focus-visible,footer a:focus-visible{
  outline-color:var(--accent-hi)}

/* Тап-таргети самостійних посилань: 18–23.6px замало для пальця (WCAG 2.5.8
   вимагає 24). Стосується акцентних посилань-дій, «усі …» і футерної навігації —
   інлайнові посилання всередині абзацу свідомо не чіпаємо. */
.linkacc,.seeall,footer .office a,.offcard .lnks a,.offcard .acts a{display:inline-flex;align-items:center;min-height:24px}
/* Логотип — головне посилання «на головну»: клікабельна зона була 19px. */
nav.top a.logo{display:inline-flex;align-items:center;min-height:28px}

/* «Перейти до вмісту» — з'являється лише під фокусом клавіатури. */
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--on-ink);
  padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-weight:700;font-size:.9rem}
.skiplink:focus{left:0}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-.011em}
/* ── Дані як показник приладу ──
   Коди, артикули й числові характеристики — технічним моноширинним: так
   специфікація читається як гравіювання на корпусі, а не звичайний текст.
   Це підпис бренду. Цифри табличні (tnum), трекінг трохи стиснутий. */
code,.mono,.code,.bd{font-family:var(--mono);font-feature-settings:"tnum" 1;letter-spacing:-.02em}
.bd small{font-family:var(--sans);letter-spacing:.04em}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.03em;text-wrap:balance;margin:0;font-weight:800}
/* Надзаголовок: слова лишились, форма зникла.
   Було .74rem капслоком із розрідженням .18em — це «плашка над героєм», з якої
   складається кожен другий згенерований сайт, і читалась вона гірше за звичайний
   рядок. Тексти в мовних файлах написані реченням, тож без text-transform вони
   одразу читаються природно всіма чотирма мовами. */
.eyebrow{font-size:.84rem;letter-spacing:.005em;color:var(--soft);font-weight:600}
.sec-eyebrow{color:var(--accent-d)}

/* ── ШАПКА ──
   Було: емодзі замість іконок, кнопки трьох різних висот і форм, чорна
   «пігулка» кабінету, що перетягувала на себе увагу, і трек освітлення
   впритул до всього цього. Разом читалось як звалище.

   Стало: єдина сітка. Усі органи керування — 34 px заввишки, один радіус,
   іконки намальовані, а не набрані шрифтом емодзі. Утиліти згруповані й
   відділені від треку тонкою рискою, щоб око бачило дві групи, а не сім
   різних предметів. */
nav.top{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--white) 88%,transparent);
  backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:1.4rem;height:64px}
.logo{color:var(--ink);display:inline-flex;align-items:center;line-height:0;flex:0 0 auto}
.logo svg{height:19px;width:auto}
.navlinks{display:flex;align-items:center;gap:1.35rem;font-size:.92rem;color:var(--soft);font-weight:500}
.navlinks>a,.navlinks .has-mega>a{position:relative;padding:.35rem 0;white-space:nowrap;transition:color .18s}
.navlinks a:hover{color:var(--ink)}
/* підкреслення виростає з-під слова, а не блимає рамкою */
.navlinks>a::after,.navlinks .has-mega>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:2px;background:var(--accent-d);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.navlinks>a:hover::after,.navlinks .has-mega:hover>a::after{transform:scaleX(1)}
.spacer{flex:1}

.util{display:flex;align-items:center;gap:.45rem;flex:0 0 auto}
.util .sep{width:1px;height:22px;background:var(--line);margin:0 .35rem;flex:0 0 auto}

/* один розмір і одна форма на всі іконки-кнопки */
.iconbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:9px;background:none;cursor:pointer;padding:0;
  color:var(--soft);transition:background-color .18s,color .18s,border-color .18s}
.iconbtn:hover{color:var(--ink);background:var(--bg);border-color:var(--line)}
.iconbtn:focus-visible{outline:2px solid var(--accent-d);outline-offset:2px}
.iconbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.langbtn{width:auto;padding:0 .6rem;gap:.35rem;font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.02em}
.langbtn svg{width:15px;height:15px}

.cartlink{position:relative}
.cartlink b{position:absolute;top:-3px;right:-3px;background:var(--accent-d);color:var(--on-accent);
  /* 9.6px свідомо: це цифра в бульбашці 16px над іконкою кошика, а не текст.
     Більший кегль розпирає бульбашку; замок на кегль знає про цей виняток. */
  font-size:.6rem;font-weight:800;border-radius:999px;min-width:16px;height:16px;display:flex;
  align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--white)}
.cartlink b:empty,.cartlink b[data-zero]{display:none}

/* кабінет більше не кричить чорним: рівний за вагою з рештою, виділений кольором бренду */
.util .pillbtn{height:34px;display:inline-flex;align-items:center;padding:0 .95rem;border-radius:9px;
  border:1px solid var(--accent-d);color:var(--accent-d);background:none;font-size:.85rem;font-weight:700;
  white-space:nowrap;transition:background-color .18s,color .18s}
.util .pillbtn:hover{background:var(--accent-d);color:var(--on-accent)}
.util .pillbtn:focus-visible{outline:2px solid var(--accent-d);outline-offset:2px}

.burger{display:none;width:34px;height:34px;border:1px solid var(--line);background:var(--white);
  border-radius:9px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;padding:0}
.burger svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;fill:none}
/* 🔴 31.08, ручний прохід: між 1080 і ~1320px шапка була ШИРША за свою
   обгортку на 108px — логотип, шість пунктів меню й права панель просто не
   вміщались у 1160. Сторінка від цього їхала вбік ГОРИЗОНТАЛЬНО: на ноуті
   1366x768 (найпоширеніший розмір) унизу зʼявлялась смуга прокрутки, а
   кнопка «Кабінет» частково виїжджала за екран. Нічого не ховаємо —
   підтискаємо проміжки рівно на цих ширинах. */
@media(max-width:1400px){
  nav.top .wrap{gap:.75rem;padding-left:18px;padding-right:18px}
  .navlinks{gap:.75rem}
  .util{gap:.3rem}
}
/* Поріг підняли 1080 → 1180: у вузькому вікні між ними шість пунктів меню
   плюс права панель не вміщались навіть після підтискання, і сторінка їхала
   вбік. Нижче 1180 меню й далі повне — воно просто під бургером. */
@media(max-width:1180px){.navlinks{display:none}.burger{display:inline-flex}}
@media(max-width:900px){.util .sep{display:none}}
@media(max-width:560px){.util .uhide{display:none}nav.top .wrap{gap:.8rem}}

/* мобільна навігація */
.mnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:1rem 28px 1.3rem;z-index:40}
.mnav.open{display:block}
.mnav a{display:block;padding:.6rem 0;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line2)}
.mnav a.sub{padding-left:1.1rem;font-weight:500;color:var(--soft);font-size:.94rem}
.mnav a:last-child{border-bottom:0}
/* обгортки таблиць: скрол всередині, не сторінкою */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tblwrap .ltable{min-width:640px}
.cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmpwrap .ctable{min-width:560px}

/* hero */
.hero{position:relative;overflow:hidden}
.aurora{position:absolute;inset:0;z-index:0;background:
  radial-gradient(40% 55% at 84% 18%, rgba(245,200,105,.55), transparent 62%),
  radial-gradient(32% 40% at 97% 44%, rgba(255,225,150,.5), transparent 60%),
  radial-gradient(44% 58% at 76% 76%, rgba(230,175,70,.4), transparent 64%),
  radial-gradient(30% 40% at 60% 6%, rgba(120,170,210,.20), transparent 62%),
  var(--white);
  filter:blur(6px);animation:drift 20s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(-2%,1%,0) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.aurora{animation:none}}
/* Фон героя — знімок реального об'єкта клієнта (пул у App\Services\HeroBackdrop).
   Над знімком лежить завіса кольору --white. Це навмисно: у денних сценах
   --white світлий, у «Вечорі» він темний, тому завіса темніє РАЗОМ зі сценою,
   і читабельність тексту не залежить від того, який знімок випав цього разу. */
.hero-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:50% 45%;
  filter:brightness(var(--hero-dim)) saturate(.95);transform:scale(1.03)}
/* Завіса тримає щільність рівно там, де стоїть текст (ліва колонка до 38%),
   а далі швидко тане — інакше знімок перетворюється на однотонну пляму.
   Останній шар знизу гасить різкий стик зі смугою цифр під героєм. */
.hero.has-photo .aurora{background:
  radial-gradient(40% 55% at 84% 18%, color-mix(in oklab,var(--accent-hi) 26%,transparent), transparent 62%),
  radial-gradient(44% 58% at 76% 76%, color-mix(in oklab,var(--accent) 12%,transparent), transparent 64%),
  linear-gradient(180deg, transparent 58%, color-mix(in oklab,var(--white) 78%,transparent) 100%),
  linear-gradient(100deg,
    color-mix(in oklab,var(--white) 93%,transparent) 0%,
    color-mix(in oklab,var(--white) 88%,transparent) 38%,
    color-mix(in oklab,var(--white) 52%,transparent) 62%,
    color-mix(in oklab,var(--white) 22%,transparent) 82%,
    color-mix(in oklab,var(--white) 12%,transparent) 100%)}
@media(max-width:820px){
  /* одна колонка: текст іде на всю ширину, тому завіса стає вертикальною */
  .hero.has-photo .aurora{background:
    radial-gradient(60% 40% at 80% 8%, color-mix(in oklab,var(--accent-hi) 28%,transparent), transparent 64%),
    linear-gradient(180deg,
      color-mix(in oklab,var(--white) 95%,transparent) 0%,
      color-mix(in oklab,var(--white) 90%,transparent) 48%,
      color-mix(in oklab,var(--white) 58%,transparent) 100%)}
}
.hero .wrap{position:relative;z-index:1;padding:clamp(3.4rem,8vw,6.6rem) 28px clamp(2.8rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center}
h1{font-size:clamp(2.5rem,6vw,4.4rem);line-height:.99}
.hero p.sub{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--soft);max-width:38ch;margin:1.3rem 0 0;letter-spacing:-.01em}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.85rem 1.5rem;font-weight:700;font-size:.98rem;border:1px solid transparent;transition:transform .15s,box-shadow .15s;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:var(--on-ink);box-shadow:var(--shadow-sm)}
/* Вторинна кнопка — хайрлайн, не важка ink-рамка: щоб не конкурувала з
   темною головною. Ховер підсвічує рамку до ink. */
.btn-ghost{background:var(--white);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn .r{color:var(--accent)}
/* Діагональна штрихівка під героєм прибрана: це була текстура заради текстури,
   яку не видно свідомо, а лише «відчувається» як шум за фото виробу. */
.hero-prod{aspect-ratio:1/1;border-radius:26px;background:linear-gradient(150deg,color-mix(in oklab,var(--imgbg) 70%,transparent),color-mix(in oklab,var(--ambersoft) 70%,transparent));border:1px solid color-mix(in oklab,var(--imgbg) 75%,transparent);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:8%;backdrop-filter:blur(3px)}
.hero-prod img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-prod{max-width:380px;margin-top:1rem}}

/* прев'ю чернетки — має бути видно з першого погляду */
.draftbar{background:#8a5f05;color:#fff;text-align:center;padding:.55rem 1rem;font-size:.86rem;
  font-weight:700;letter-spacing:.02em}

/* панель масової дії над списком користувачів */
.bulkbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem;padding:.7rem .9rem;
  border:1px solid var(--line);border-radius:12px;background:var(--white);font-size:.9rem}
.bulkbar button[disabled]{opacity:.4;cursor:not-allowed}
.bulkn{color:var(--soft);font-size:.85rem;margin-left:auto}

/* сортування колонок в адмінці */
.thsort{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line);white-space:nowrap}
.thsort:hover{border-bottom-color:var(--accent);color:var(--accent-d)}

/* пошук у переліку матеріалів адмінки */
.cfind{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 1.1rem}
.cfind input[type=search]{flex:1 1 260px;max-width:420px}
.cfind-clear{color:var(--soft);font-size:.85rem;text-decoration:underline;text-underline-offset:3px}

/* сторінки переліку */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:2.2rem 0 .5rem;padding-top:1.4rem;border-top:1px solid var(--line2)}
.pg{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 .55rem;
  border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);
  text-decoration:none;font-size:.9rem;font-weight:600;transition:border-color .15s}
.pg:hover{border-color:var(--accent)}
.pg.cur{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.pg.gap{border:0;background:none;min-width:20px;color:var(--soft)}
.pg.off{opacity:.35;pointer-events:none}
.pg-arrow{font-size:1.15rem;line-height:1}
.pgcount{margin-left:auto;color:var(--soft);font-size:.85rem}
@media(max-width:560px){.pgcount{width:100%;margin:.5rem 0 0;text-align:center}}

/* перелінковка на сторінці моделі: куди йти далі, якщо ця серія не підійшла */
.pd-rel{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--line2)}
.pd-rel-h{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);font-weight:700;margin-bottom:.6rem}
.pd-rel-row{display:flex;flex-wrap:wrap;gap:.45rem}
.pd-rel-row a{display:inline-flex;align-items:baseline;gap:.4rem;padding:.42rem .8rem;border:1px solid var(--line);
  border-radius:999px;font-size:.86rem;font-weight:600;color:var(--ink);text-decoration:none;background:var(--white);
  transition:border-color .15s,transform .15s}
.pd-rel-row a:hover{border-color:var(--accent);transform:translateY(-1px)}
.pd-rel-row a i{font-style:normal;font-weight:500;font-size:.78rem;color:var(--soft)}

/* trust */
.trust{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:var(--white)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:center;padding:1rem 28px;font-size:.86rem;color:var(--soft);font-weight:600}
.trust b{color:var(--ink);font-weight:700}

section{padding:clamp(3.4rem,7vw,5.6rem) 0}
.h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:.5rem 0 0}
.lead{color:var(--soft);font-size:1.06rem;max-width:58ch;margin:.8rem 0 0}
.h2row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.seeall{color:var(--accent-d);font-weight:700;font-size:.95rem}

/* pillars */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.2rem}
.pill-card{border:1px solid var(--line);border-radius:22px;padding:2rem;background:var(--white);box-shadow:var(--shadow-sm)}
.pill-card.amber{background:linear-gradient(180deg,var(--ambersoft),var(--white))}
.pill-card h3{font-size:1.4rem;margin-bottom:.5rem}
.pill-card p{color:var(--soft);margin:0}
/* Підпис над заголовком картки. Була плашка-стікер: капслок у бурштиновому
   прямокутнику із заокругленням. Слова корисні («Дані», «Світлорозподіл»),
   форма — ні: наліпка над заголовком нічого не додає, лише кричить. Лишився
   тихий підпис кольором акценту. */
.badge{display:inline-block;font-size:.82rem;font-weight:600;letter-spacing:.005em;color:var(--accent-d);margin-bottom:.55rem}
.linkacc{color:var(--accent-d);font-weight:700;margin-top:1rem;display:inline-block;font-size:.95rem}
.pillars.p3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:760px){.pillars,.pillars.p3{grid-template-columns:1fr}}

/* compare */
.compare{background:var(--ink);color:var(--on-ink);border-radius:28px;padding:clamp(2rem,4vw,3rem)}
.compare .h2{color:var(--on-ink)}.compare .lead{color:color-mix(in oklab,var(--on-ink) 70%,transparent)}
/* Надпис над заголовком у вивернутих картках. Був прибитий білим просто в
   розмітці — і в темній сцені ставав білим по світлому: контраст 1.08, тобто
   текст зникав. Тут він іде від того самого токена, що й решта картки. */
.compare .eyebrow,.b2b-b .eyebrow{color:color-mix(in oklab,var(--on-ink) 62%,transparent)}
.ctable{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:.98rem}
.ctable th,.ctable td{text-align:left;padding:.85rem .4rem;border-bottom:1px solid color-mix(in oklab,var(--on-ink) 14%,transparent)}
.ctable thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:color-mix(in oklab,var(--on-ink) 62%,transparent);font-weight:700}
.ctable td.us{color:var(--accent-hi);font-weight:700}
.ctable td.them{color:color-mix(in oklab,var(--on-ink) 64%,transparent)}

/* category cards */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2rem}
.cat{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm);transition:.15s}
.cat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cat .im{aspect-ratio:1/1;background:var(--imgbg);display:flex;align-items:center;justify-content:center;padding:16%}
.cat .im img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.cat .b{padding:.9rem 1.1rem 1.2rem}
.cat .t{font-weight:800;font-size:1.15rem}
.cat .c{color:var(--soft);font-size:.86rem}
@media(max-width:760px){.cats{grid-template-columns:1fr 1fr}}

/* features */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem}
.fcard{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm)}
.fcard .top{height:120px;display:flex;align-items:center;justify-content:center;font-size:2rem}
.fcard:nth-child(1) .top{background:var(--ambersoft)}
.fcard:nth-child(2) .top{background:linear-gradient(135deg,var(--ambersoft),#eef4fa)}
.fcard:nth-child(3) .top{background:radial-gradient(60% 70% at 70% 30%,rgba(245,200,105,.55),transparent 60%),radial-gradient(60% 70% at 35% 80%,rgba(230,175,70,.4),transparent 60%),var(--white)}
.fcard .body{padding:1.3rem 1.5rem 1.6rem}
.fcard h3{font-size:1.16rem;margin-bottom:.35rem}
.fcard p{color:var(--soft);margin:0;font-size:.96rem}
@media(max-width:820px){.feat{grid-template-columns:1fr}}

/* segments */
.segs{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
/* 🔴 Картки застосувань були <div>. Сторінки /use/{сегмент} існували, у меню на
   них вели посилання — а з головної, де людина їх і бачить, перейти було нікуди:
   вона наводила курсор і нічого не відбувалось. Тепер картка — це посилання. */
.seg{border:1px solid var(--line);border-radius:16px;padding:1.3rem;background:var(--white);box-shadow:var(--shadow-sm);
  display:block;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
a.seg:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--ink)}
a.seg .t::after{content:" →";color:var(--accent-d);opacity:0;transition:opacity .15s}
a.seg:hover .t::after{opacity:1}
.seg .t{font-weight:800;font-size:1.05rem}
.seg .d{color:var(--soft);font-size:.9rem;margin-top:.3rem}
@media(max-width:760px){.segs{grid-template-columns:1fr 1fr}}

/* proof */
.proof{background:linear-gradient(180deg,var(--ambersoft),var(--white));border:1px solid var(--line);border-radius:28px;padding:clamp(2.2rem,4vw,3.2rem);text-align:center}
.stars{color:var(--accent-d);font-size:1.3rem;letter-spacing:.1em}
.quote{font-size:clamp(1.3rem,2.6vw,1.85rem);font-weight:800;letter-spacing:-.02em;max-width:26ch;margin:.9rem auto 0;line-height:1.22}
.qby{color:var(--soft);margin-top:1rem;font-size:.92rem}
.logos{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.6rem}
.logos span{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:.45rem 1rem;font-weight:700;color:var(--soft);font-size:.9rem}

/* b2b */
.b2b{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1rem}
.b2b-card{border-radius:24px;padding:2.4rem;box-shadow:var(--shadow-sm)}
.b2b-a{background:linear-gradient(160deg,var(--white),var(--ambersoft));border:1px solid var(--line)}
.b2b-b{background:var(--ink);color:var(--on-ink)}
.b2b-card h3{font-size:1.5rem;margin-bottom:.5rem}
.b2b-a p{color:var(--soft)}.b2b-b p{color:color-mix(in oklab,var(--on-ink) 74%,transparent)}
.b2b-b .btn-dark{background:var(--on-ink);color:var(--ink)}
@media(max-width:760px){.b2b{grid-template-columns:1fr}}

/* footer */
footer{background:var(--bg);border-top:1px solid var(--line2);margin-top:clamp(3rem,6vw,5rem)}
footer .cols{padding:3rem 28px 2.2rem;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:1.5rem}
footer .logo{color:var(--ink)}footer .logo svg{height:18px}
footer h4,footer .fh{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);margin:0 0 .8rem}
footer .desc{color:var(--soft);font-size:.9rem;max-width:32ch;margin:.9rem 0 0}
footer .office{font-size:.88rem;color:var(--soft);line-height:1.7}
footer .office b{color:var(--ink)}
/* Адреса окремим рядком: у підвалі три офіси поспіль, і без невеликого
   відступу перед наступною країною вони зливаються в суцільний абзац. */
footer .office .ofadr{display:inline-block;margin-bottom:.15rem}
footer .office b:not(:first-child){display:inline-block;margin-top:.55rem}
footer a:hover{color:var(--accent-d)}
.socials{display:flex;gap:.6rem;margin-top:1.1rem}
.socials a{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--soft)}
.socials a:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.socials svg{width:17px;height:17px;fill:currentColor}
/* Мови в підвалі — рядом, без випадання: у шапці меню треба «ловити», а тут
   потрібна проста дублююча точка входу, яку видно з будь-якого місця сторінки. */
.flang{border-top:1px solid var(--line2)}
.flang .wrap{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.9rem 28px}
.flang .fh{margin:0}
.flang__list{display:flex;flex-wrap:wrap;gap:.45rem}
.flang__list a,.flang__list .soon{border:1px solid var(--line);border-radius:999px;padding:.3rem .85rem;
  font-size:.85rem;font-weight:600;color:var(--soft);display:inline-flex;align-items:center;gap:.35rem;min-height:24px}
.flang__list a:hover{border-color:var(--ink);color:var(--ink)}
.flang__list a.cur{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.flang__list .soon{opacity:.5}
.flang__list .soon i{font-style:normal;font-size:.72rem}
.fbot{border-top:1px solid var(--line2)}
/* 🔴 Правовий рядок — суцільний рядок дрібного тексту, а НЕ чотири колонки.
   Було space-between: українською чотири написи розповзались по всій ширині
   1160px, а португальською рядок переносився — і підпис студії лишався сам на
   другому рядку. Виглядало як зламана верстка, хоч кожен елемент був на місці.

   Заміна на flex-start це не полагодила, і виміряти це варто було одразу:
   написи у flex атомарні, а їхня сума з проміжками на вікні 1160 давала
   1093px проти 1089px доступних — рядок не влазив рівно на 4 пікселі, і
   підпис студії знову лишався сам. Будь-яка мова з довшими словами
   повторювала б це на іншій ширині.

   Тому тут звичайний текстовий потік: написи inline, розділені крапкою, і
   переносяться ПО СЛОВАХ, як речення. Тоді другий рядок ніколи не порожній
   на три чверті — він просто продовження першого. */
.fbot .wrap{padding:1.1rem 28px;font-size:.8rem;line-height:1.7;color:var(--soft)}
.fbot .wrap>*{display:inline}
/* 🔴 Розділювач бере колір ТЕКСТУ й приглушується прозорістю, а не фарбується
   в токен рамки. З `var(--line2)` на світлій темі виходило #dde7ee на майже
   білому — контраст 1.2:1, тобто крапки не було видно взагалі, і чотири
   написи читались як один злиплий рядок із дивними проміжками. currentColor
   тримається за текстом і в світлій, і в темній темі. */
.fbot .wrap>*:not(:last-child)::after{content:' · ';color:currentColor;opacity:.45}
@media(max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}

/* carousel */
.caro{position:relative}
.track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track>*{scroll-snap-align:start;flex:0 0 auto}
.caro .cat{width:236px}.caro .cat.sm{width:180px}.caro .seg{width:250px}
.arrows{display:flex;gap:.5rem}
.arw{width:38px;height:38px;border:1px solid var(--line);border-radius:999px;background:var(--white);cursor:pointer;font-size:1.1rem;line-height:0;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:.15s}
.arw:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* ── новини: перелік, теги, сторінки ──
   Було: вертикальний стовпчик карток 220px+текст, максимум 900px завширшки, без
   дати, без тегів і без жодного посилання далі. Читач доходив до кінця списку й
   опинявся в глухому куті. */
.nlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.ncard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.ncard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ncard .im{aspect-ratio:16/10;background:var(--bg);overflow:hidden}
.ncard .im img{width:100%;height:100%;object-fit:cover;display:block}
.ncard .b{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.ncard .meta{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);font-weight:700}
.ncard .t{font-size:1.12rem;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.ncard .s{font-size:.88rem;color:var(--soft);line-height:1.55}
.ncard .more{margin-top:auto;padding-top:.7rem;font-size:.85rem;font-weight:700;color:var(--accent-d)}
/* Перша новина ширша: у списку має бути головне, а не чотири рівні прямокутники */
@media(min-width:900px){
  /* Головна новина займає весь рядок: половинчастий спан лишав поруч колонку
     різної висоти, і рядок виглядав як збій верстки, а не як акцент. */
  .nlist .ncard--lead{grid-column:1/-1;flex-direction:row}
  .nlist .ncard--lead .im{aspect-ratio:auto;width:44%;flex:0 0 44%;min-height:260px}
  .nlist .ncard--lead .b{padding:1.8rem 2rem 1.9rem;justify-content:center}
  .nlist .ncard--lead .t{font-size:1.65rem}
  .nlist .ncard--lead .s{font-size:.98rem;max-width:56ch}
  .nlist .ncard--lead .more{margin-top:1rem;padding-top:0}
}

/* Посторінкова навігація. Показуємо номери, а не саме «далі»: читач має бачити,
   скільки всього, і мати змогу стрибнути в кінець. */
.pager{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:2.4rem}
.pager a,.pager span{min-width:40px;height:40px;padding:0 .7rem;border:1px solid var(--line);border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.92rem;color:var(--ink);background:var(--white)}
.pager a:hover{border-color:var(--ink)}
.pager .on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.pager .gap{border:0;background:none;color:var(--soft);min-width:20px;padding:0}
.pager .off{color:var(--soft);opacity:.5}

/* Блок «читати далі» під переліком — вихід у сусідні розділи */
.nextup{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:3rem}
.nextup a{border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;background:var(--white);
  text-decoration:none;color:inherit;transition:.15s}
.nextup a:hover{border-color:var(--ink);transform:translateY(-2px)}
.nextup .k{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-d);font-weight:700}
.nextup .n{font-weight:800;margin-top:.3rem}
.nextup .d{color:var(--soft);font-size:.88rem;margin-top:.25rem;line-height:1.5}

/* Сусідні матеріали всередині статті */
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.6rem}
.prevnext a{border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;text-decoration:none;color:inherit;background:var(--white)}
.prevnext a:hover{border-color:var(--ink)}
.prevnext .k{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);font-weight:700}
.prevnext .n{font-weight:700;margin-top:.3rem;line-height:1.35}
.prevnext .nx{text-align:right;grid-column:2}
/* 🔴 grid-column:2 — щоб «раніше» лишалось праворуч навіть тоді, коли
   «новішого» немає. Раніше цю роль грали <div>-обгортки, через які
   саме посилання переставало бути коміркою сітки й лишалось РЯДКОВИМ:
   рамка малювалась завширшки 55px, а назва вивалювалась поруч. */
@media(max-width:640px){.prevnext{grid-template-columns:1fr}.prevnext .nx{text-align:left;grid-column:auto}}
/* mega menu */
.has-mega{position:relative}
.has-mega>a{cursor:pointer}
.mega{position:absolute;left:0;top:100%;margin-top:14px;width:min(640px,90vw);background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1.5rem;display:none;grid-template-columns:1fr 1fr;gap:1.6rem;z-index:30}
.has-mega:hover .mega,.has-mega:focus-within .mega{display:grid}
/* 🔴 Міст наведення. Панель висіла на 14px нижче за пункт меню, і ці 14px не
   належали жодному з них: щойно курсор сходив із напису, .has-mega переставав
   бути наведеним, і меню зникало ДО того, як миша долітала до пунктів. Саме це
   Борис описав як «важко спіймати вікно».
   Тепер цей проміжок накриває невидимий місток — прямокутник, який належить
   самому пункту меню. Курсор іде до панелі, не залишаючи наведений елемент,
   а вигляд не змінився: місток прозорий. */
.has-mega::after{content:"";position:absolute;left:0;top:100%;width:min(640px,90vw);height:16px;display:none}
.has-mega:hover::after{display:block}
.mega h5{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);margin:0 0 .8rem}
.mega .ml{display:flex;flex-direction:column;gap:.55rem;font-size:.96rem}
.mega .ml a{color:var(--ink);font-weight:500}.mega .ml a:hover{color:var(--accent-d)}
.mega .ml a .mut{color:var(--soft);font-weight:400}
@media(max-width:860px){.mega,.has-mega::after{display:none!important}}

/* faq */
.faq{max-width:780px;margin:2rem auto 0}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--white);margin-bottom:.7rem;box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;font-weight:700;font-size:1.02rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-d);font-weight:700;font-size:1.35rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 1.3rem 1.2rem;color:var(--soft);font-size:.98rem}

/* ── каталог/продукт ── */
.pagehead{background:linear-gradient(180deg,var(--ambersoft),var(--white));border-bottom:1px solid var(--line2)}
/* 🔴 Відступи 31.08 стиснуто. Було clamp(2rem,4vw,3rem) згори й стільки ж знизу
   плюс власний padding секції — під заголовком «Новини.» лишалась порожня
   третина екрана, а перша картка починалась нижче за згин. */
.pagehead .wrap{padding:clamp(1.15rem,2.4vw,1.8rem) 28px clamp(1.3rem,2.6vw,2rem)}
/* Заголовок сторінки. Стояв інлайновим стилем у 14 виглядах — тепер один клас. */
.pagehead__t{font-size:clamp(1.9rem,4vw,2.8rem);margin:.1rem 0 0;line-height:1.08}
.pagehead .lead{margin-top:.55rem}
/* Секція одразу під шапкою не потребує повного відступу: band уже дав повітря */
.pagehead+section{padding-top:clamp(1.6rem,3vw,2.4rem)}
/* Шапка з медіа праворуч (слот `aside` у x-pagehead). Праворуч від
   заголовка лишалась порожня третина екрана — саме туди Борис і попросив
   поставити відео (01.09). На вузькому екрані колонки складаються в одну,
   і відео йде під текстом: 16:9 поруч із заголовком на телефоні лишило б
   від тексту смужку. */
.pagehead .phsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,36%,480px));
  gap:clamp(1.2rem,3vw,2.4rem);align-items:center}
.pagehead__aside .vid{margin-top:0}
@media(max-width:900px){.pagehead .phsplit{grid-template-columns:1fr}
  .pagehead__aside{margin-top:1.2rem}}
/* Тонкий варіант — коли в шапці лише хлібні крихти (сторінка моделі): band на
   пів-екрана заради одного рядка був завеликий. */
.pagehead--slim .wrap{padding:.7rem 28px .75rem}
.pagehead--slim .crumbs{margin-bottom:0}
.crumbs{font-size:.85rem;color:var(--soft);margin-bottom:.5rem}
/* Тап-таргет крихт: 17px заввишки — надто дрібно для пальця (WCAG 2.5.8 = 24). */
.crumbs a{display:inline-block;padding:.22rem 0;min-height:24px}
.crumbs a:hover{color:var(--accent-d)}
.crumbs b{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.chip{border:1px solid var(--line);border-radius:999px;padding:.42rem 1rem;font-size:.9rem;font-weight:600;color:var(--soft);background:var(--white);transition:.12s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.chip .n{opacity:.6;font-weight:400}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2rem}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.pgrid{grid-template-columns:1fr 1fr}}
.pcard{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm);transition:.15s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
/* 08.10: у <img> картки стоять width/height="400" (щоб сторінка не стрибала). Без явної висоти в CSS
   картинка тримала 400px і розпирала квадрат: на телефоні поле ставало 435px заввишки, а Safari ще й
   обрізав фото до шматка стіни (скрін клієнта, «Катастрофа»). Тому фото — шаром рівно в межах квадрата. */
.pcard .im{aspect-ratio:1/1;background:var(--imgbg);display:flex;align-items:center;justify-content:center;padding:12%;position:relative}
.pcard .im img{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain;mix-blend-mode:multiply}
.pcard .b{padding:.85rem 1rem 1.1rem}
.pcard .t{font-weight:800;font-size:1.02rem}
.pcard .code{font-family:var(--mono);font-size:.74rem;color:var(--soft);margin-top:.2rem;word-break:break-all}
.pcard .meta{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.pcard .meta span{font-size:.72rem;font-weight:600;color:var(--soft);background:var(--bg);border:1px solid var(--line2);border-radius:7px;padding:.15rem .5rem}

/* product page */
.pd{display:grid;grid-template-columns:1fr 1.05fr;gap:2.4rem;align-items:stretch;margin-top:1rem}
@media(max-width:860px){.pd{grid-template-columns:1fr}}
/* Ліва колонка тягнеться на висоту правого блоку, а креслення притиснуте
   донизу — щоб його нижній край був у рівень із правим блоком. */
.pd-left{display:flex;flex-direction:column}
.pd-left .drawac{margin-top:auto}
/* Фото без рамки: лишається світла підкладка зі спотом (бренд-світло, а не
   картка) — на ній працює mix-blend photo; рамку/тінь/жорсткі кути прибрано. */
.pd-photo{border-radius:16px;background:var(--imgbg);display:flex;align-items:center;justify-content:center;padding:6%}
.pd-photo img{max-width:100%;max-height:460px;object-fit:contain;mix-blend-mode:multiply}
.pd h1.pt{font-size:clamp(1.9rem,4vw,2.8rem)}
.pd .code{font-family:var(--mono);font-size:.9rem;color:var(--soft);margin-top:.3rem}
.spec{width:100%;border-collapse:collapse;margin-top:1rem}
.spec td{padding:.4rem 2px;border-bottom:1px solid var(--line2);vertical-align:baseline;font-size:.92rem}
.spec td.k{color:var(--soft);width:34%;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.spec td.v{font-weight:600}
/* ── Права колонка = паспорт виробу ──────────────────────────────────────
   Артикул як «part number», три головні числа крупно, технічна смуга
   парами без рамок. Таблиця прибрана свідомо: рядки k/v зрівнювали
   ієрархію, а тут performance-числа мають вести. */
.ppart{font-family:var(--mono);font-size:.82rem;color:var(--soft);margin-top:.55rem;letter-spacing:-.01em;word-break:break-all}
/* Розшифровка літери модифікації — під кодом позиції. Не картка й не
   плашка: це виноска до коду, і виглядати вона має як виноска. */
.pnote{font-size:.82rem;color:var(--soft);margin-top:.35rem}
.pnote b{font-family:var(--mono);color:var(--ink);font-weight:700}
.pperf{display:flex;flex-wrap:wrap;gap:1.1rem 2rem;margin-top:1.4rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.pperf b{display:block;font-family:var(--mono);font-size:clamp(1.35rem,2.4vw,1.7rem);font-weight:700;letter-spacing:-.035em;color:var(--ink);line-height:1}
.pperf span{display:block;margin-top:.4rem;font-size:.74rem;letter-spacing:.005em;color:var(--soft)}
.pspec{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;margin:1.2rem 0 0}
.pspec > div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line2);min-width:0}
.pspec dt{font-size:.76rem;color:var(--soft);white-space:nowrap}
.pspec dd{margin:0;font-size:.86rem;font-weight:600;color:var(--ink);text-align:right;overflow-wrap:anywhere}
@media(max-width:560px){.pspec{grid-template-columns:1fr;gap:0}}
.pcerts{margin-top:1.15rem;font-size:.8rem;color:var(--soft)}
.cctbar{display:flex;justify-content:space-between;align-items:flex-end;margin-top:6px;height:20px;border-radius:4px;padding:0 6px 2px;
  background:linear-gradient(90deg,#ff9a2a 0%,#ffc879 22%,#fff3df 45%,#ffffff 55%,#d9e9ff 75%,#9cc7ff 100%);border:1px solid var(--line)}
.cctbar i{font-style:normal;font-size:11px;font-weight:700;color:#3a3630}
.beams{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.beam{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.beam svg{width:32px;height:32px;display:block}
.beam i{font-style:normal;font-size:11px;color:var(--soft);font-weight:600}
.sws{display:flex;gap:6px;margin-top:7px}
.sw{width:21px;height:21px;border-radius:5px;border:1px solid var(--line);display:inline-block}
.sw.wheel{background:conic-gradient(#e33,#f90,#fe0,#3c3,#39f,#93f,#e33)}
.pd-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:1.1rem}
.bd{border:1.3px solid var(--ink);border-radius:8px;padding:5px 11px;font-size:.72rem;font-weight:700;letter-spacing:.03em}
.bd small{display:block;font-weight:400;font-size:.7rem;color:var(--soft);letter-spacing:.08em}
.pd-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
/* Відступ від лівої колонки (креслення) до панелі вибору режиму. */
.pviews{margin:2.2rem 0 1.1rem}
/* Дубль панелі дій під конструктором. */
.cfg-cta{margin-top:1.5rem}
/* SEO-текст на сторінках застосувань /use/{slug}. */
.seg-seo{max-width:74ch}
.seg-seo p{color:var(--soft);margin:0 0 1rem;line-height:1.7}
.seg-seo p:last-child{margin-bottom:0}
.drawbox{border:1px solid var(--line);border-radius:20px;background:var(--white);box-shadow:var(--shadow-sm);padding:1.6rem;display:flex;justify-content:center}
.drawbox img{max-width:min(560px,100%);max-height:320px;object-fit:contain}
.drawcap{margin:.7rem 0 0;width:100%;flex-basis:100%;text-align:center;font-size:.9rem;font-weight:600;color:var(--soft)}

/* Офіси з картами — «Контакти» і «Про компанію». Карта стоїть у картці офісу,
   а не однією спільною внизу: людина шукає конкретне місто, і мітка має бути
   поруч із адресою й телефоном, а не за три екрани від них. */
.offgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.3rem;margin-top:1.4rem}
.offcard{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--white);
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.offcard .b{padding:1.2rem 1.3rem .9rem}
.offcard .t{font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.offcard .s{color:var(--soft);font-size:.92rem;margin-top:.35rem;line-height:1.5}
.offcard .lnks{display:flex;flex-direction:column;gap:.25rem;margin-top:.7rem}
.offcard .lnks a{color:var(--accent-d);font-weight:700;font-size:.92rem}
.offcard .lnks a:hover{text-decoration:underline}
/* заставка карти: своя, без жодного запиту назовні до кліку */
.offcard .map{position:relative;aspect-ratio:16/10;background:var(--imgbg);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.offcard .map button{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;color:var(--ink);font:inherit}
.offcard .map .pin{width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;transition:transform .18s}
.offcard .map .pin svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8}
.offcard .map button:hover .pin,.offcard .map button:focus-visible .pin{transform:scale(1.07)}
.offcard .map .lbl{font-size:.9rem;font-weight:700;color:var(--on-img)}
.offcard .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.offcard .acts{padding:.8rem 1.3rem 1.1rem;font-size:.86rem}
.offcard .acts a{color:var(--soft);font-weight:600}
.offcard .acts a:hover{color:var(--accent-d)}
@media(prefers-reduced-motion:reduce){.offcard .map .pin{transition:none}}

/* Cookie-банер: смуга внизу екрана, поверх усього, але не на весь екран —
   вона не має перекривати сайт, поки людина читає. Кольори токенами сцен,
   тож у «Ночі» банер темніє разом зі сторінкою. */
.ckbar{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--white);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.10)}
.ckbar .ckin{display:flex;align-items:center;gap:1.2rem;padding:.9rem 28px;flex-wrap:wrap;box-sizing:border-box;max-width:100%}
.ckbar p{margin:0;flex:1 1 340px;font-size:.86rem;line-height:1.5;color:var(--soft)}
.ckbar a{color:var(--accent-d);font-weight:700;text-decoration:underline}
.ckbar .ckbtns{display:flex;gap:.6rem;flex-shrink:0}
.ckbar .btn{font-size:.86rem;padding:.5rem 1rem;white-space:nowrap}
@media(max-width:560px){.ckbar .ckbtns{width:100%}.ckbar .ckbtns .btn{flex:1}}

/* Габаритне креслення під акордеоном: розгорнуте, воно з'їдало пів-колонки
   під фото, а потрібне не всім і не завжди. Кнопка на всю ширину фото, і в
   ній — прев'ю самої схеми: без нього рядок читається як абстрактне
   посилання, а з ним одразу видно, що всередині креслення. */
.drawac{border:1px solid var(--line);border-radius:20px;background:var(--white);
  box-shadow:var(--shadow-sm);overflow:hidden;margin-top:1.1rem}
.drawac summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.9rem;
  padding:.7rem .9rem .7rem .7rem}
.drawac summary::-webkit-details-marker{display:none}
.drawac summary:hover{background:var(--ambersoft)}
.drawac summary:focus-visible{outline:2px solid var(--accent-d);outline-offset:-3px}
/* прев'ю схеми — саме зображення, зменшене, а не іконка: показуємо те, що всередині */
/* підкладка під зображення — завжди --imgbg: він світлий у всіх сценах,
   тож креслення (чорні лінії, часто на прозорому тлі) видно і вночі */
.drawac .prev{flex:0 0 auto;width:64px;height:44px;border:1px solid var(--line);border-radius:10px;
  background:var(--imgbg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.drawac .prev img{max-width:88%;max-height:88%;object-fit:contain}
.drawac .lbl{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.drawac .lbl b{display:block;font-size:.86rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--soft);opacity:.85}
.drawac .chev{margin-left:auto;flex:0 0 auto;width:26px;height:26px;color:var(--accent-d);transition:transform .2s}
.drawac .chev svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.drawac[open] .chev{transform:rotate(180deg)}
.drawac[open] summary{border-bottom:1px solid var(--line)}
/* 🔴 display задаємо ЛИШЕ для відкритого стану. `display:flex` на самому .body
   перебиває те, як браузер ховає вміст закритого <details> — і креслення
   лишалось видимим у згорнутому вигляді, тобто акордеон не згортався взагалі. */
.drawac .body{display:none;padding:1.2rem;justify-content:center;flex-wrap:wrap;background:var(--imgbg)}
.drawac[open] .body{display:flex}
.drawac .body img{max-width:min(560px,100%);max-height:320px;object-fit:contain}
@media(prefers-reduced-motion:reduce){.drawac .chev{transition:none}}

/* конфігуратор */
.cfg{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--ambersoft),var(--white) 42%);padding:1.4rem 1.5rem;margin-top:1.4rem;box-shadow:var(--shadow-sm)}
.cfg h6,.cfg .cfgh{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent-d);margin:0 0 .9rem;font-weight:700}
.cfg-hint{margin:-.4rem 0 1.1rem;font-size:.86rem;color:var(--soft);max-width:60ch}
.cfg .grp{margin-top:1rem}
.cfg .grp:first-of-type{margin-top:0}
.cfg .gl{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--soft);font-weight:600;margin-bottom:.45rem}
.optrow{display:flex;gap:.45rem;flex-wrap:wrap}
.opt{cursor:pointer;border:1.4px solid var(--line);border-radius:10px;background:var(--white);padding:.35rem .7rem;font-size:.88rem;font-weight:600;color:var(--ink);transition:.12s;user-select:none}
.opt:hover{border-color:var(--ink)}
.opt.on{border-color:var(--accent-d);background:var(--amber100);box-shadow:0 0 0 1px var(--accent-d) inset}
.opt.beamopt{padding:.35rem .45rem .25rem;display:inline-flex;flex-direction:column;align-items:center;gap:1px}
.opt.beamopt svg{width:30px;height:30px;display:block}
.opt.beamopt i{font-style:normal;font-size:11px;color:var(--soft);font-weight:600}
/* Керування (квадратики) + Колір (праворуч) — в один ряд. */
.cfg-ctlcol{display:flex;gap:1.6rem;align-items:flex-start;margin-top:1rem;flex-wrap:wrap}
.cfg-ctlcol .grp{margin-top:0}
/* «Керування» — квадратики: кожне значення (тип / підключення / клас) з рядка. */
.grp[data-g="ctl"]{flex:1 1 320px}
.grp[data-g="ctl"] .optrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:.5rem}
.opt.ctlopt{width:auto;text-align:left;display:flex;flex-direction:column;gap:.22rem;padding:.7rem .8rem;min-height:90px;justify-content:center;font-weight:500}
.opt.ctlopt b{font-size:.9rem;font-weight:700;line-height:1.15}
.opt.ctlopt span{font-size:.76rem;color:var(--soft);line-height:1.3}
.opt.ctlopt.on b,.opt.ctlopt.on span{color:var(--accent-d)}
/* Колір — більші плитки, праворуч від керування. */
.grp[data-g="col"]{flex:0 0 auto}
.grp[data-g="col"] .optrow{gap:.6rem}
.opt.swopt{width:48px;height:48px;padding:0;border-radius:12px}
.opt.swopt span{display:block;width:100%;height:100%;border-radius:10px}
/* Вивід конфігуратора = приладовий дисплей: темна смуга, артикул крупним
   моноширинним. Це результат усього конфігуратора — має читатись як показник. */
.cfgline{margin-top:1.4rem;background:var(--ink);color:var(--on-ink);border-radius:12px;padding:.8rem 1.1rem;display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;box-shadow:var(--shadow-sm)}
.cfgline .cfglbl{font-size:.72rem;letter-spacing:.01em;opacity:.55;flex:0 0 auto}
.cfgline code{font-family:var(--mono);font-size:.98rem;font-weight:700;color:var(--on-ink);letter-spacing:-.01em;word-break:break-all}
.cfgline #optline{font-family:var(--mono);font-size:.82rem;font-weight:400;color:var(--accent-hi)}
.cfgline b{color:var(--ink)}
.cfgline code{font-family:var(--mono);background:var(--white);border:1px solid var(--line);border-radius:7px;padding:.15rem .5rem;color:var(--ink);font-size:.84rem}
/* прайс-вигляд каталогу */
/* 🔴 max-width + власний скрол: підписи режимів різні за довжиною в різних
   мовах, і португальське «Configurador · Lista de preços · Visual» вилазило
   за екран телефона на 11px — сторінку можна було тягнути вбік. Ширина
   перекладу змінюється, тому лікуємо не числом, а тим, щоб зайве скролилось
   УСЕРЕДИНІ контрола, а не сторінкою. */
.vtoggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow-x:auto;overflow-y:hidden;background:var(--white);max-width:100%;scrollbar-width:none}
.vtoggle::-webkit-scrollbar{display:none}
.vtoggle a{flex:0 0 auto;display:inline-flex;align-items:center;gap:.42rem;padding:.44rem 1rem;font-size:.86rem;font-weight:600;color:var(--soft);transition:color .15s,background-color .15s}
@media (max-width:520px){.vtoggle a{padding:.44rem .7rem;font-size:.8rem;gap:.32rem}}
.vtoggle a:hover{color:var(--ink)}
.vtoggle a.on{background:var(--ink);color:var(--on-ink)}
.vtoggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ltable{width:100%;border-collapse:collapse;margin-top:2rem;font-size:.92rem;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.ltable thead th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--soft);background:var(--bg);padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.ltable td{padding:.6rem .9rem;border-bottom:1px solid var(--line2);vertical-align:middle}
.ltable tr:hover td{background:var(--ambersoft)}
.ltable .mono{font-family:var(--mono);font-size:.8rem;color:var(--soft)}
.ltable img{width:44px;height:44px;object-fit:contain;mix-blend-mode:multiply;background:var(--imgbg);border-radius:8px;display:block}
.ltable a.dl{color:var(--accent-d);font-weight:700;font-size:.85rem;white-space:nowrap;display:inline-flex;align-items:center;min-height:24px}
/* Прибрати позицію — дія незворотна, а ціль була 12x18px: на телефоні в неї
   не поцілиш, а поруч стоїть «+1». Тепер квадрат 28px і підпис для читача екрана. */
.ltable a.rmbtn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;border-radius:8px;color:var(--danger);font-weight:700;text-decoration:none}
.ltable a.rmbtn:hover{background:var(--amber100)}
.qbtn{display:inline-flex;width:28px;height:28px;border:1px solid var(--line);border-radius:7px;align-items:center;justify-content:center;font-weight:700;color:var(--ink);background:var(--white)}
.qbtn:hover{border-color:var(--ink)}
.chip.dis{opacity:.35;pointer-events:none}
.fltbar{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--line)}
.fltbar .gl{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--soft);font-weight:700;margin:0 .6rem 0 0;display:inline-block}

/* тестова смуга + попап */
.testbar{background:var(--ink);color:color-mix(in oklab,var(--on-ink) 86%,var(--accent));font-size:.78rem;text-align:center;padding:.42rem 14px;letter-spacing:.01em;line-height:1.35}
.testbar b{color:var(--on-ink)}
.btn-soon{background:var(--bg);color:var(--soft);border:1px dashed var(--line);cursor:not-allowed}
.soon{font-size:.78rem;color:var(--soft);font-style:italic}

/* Перемикач мов у бургер-меню (див. коментар у layouts/site.blade.php).
   Кольори — лише токенами: інакше в темному режимі виходить чорне на чорному. */
.mlang{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 0 .9rem;border-bottom:1px solid var(--line2);margin-bottom:.2rem}
.mlang a,.mlang span{display:inline-block;padding:.34rem .8rem;border:1px solid var(--line);border-radius:999px;font-size:.9rem;font-weight:600;color:var(--soft)}
.mlang a{color:var(--ink)}
.mlang a.cur{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.mlang .soon{border-style:dashed;font-style:normal}
/* Значок «скоро» — окремим елементом, інакше злипається в «Portuguêssoon»:
   у шапці його розводить .langmenu i, а сюди те правило не дістає. */
.mlang i{font-style:italic;font-size:.74rem;color:var(--soft);margin-left:.4rem}

/* AI-пошук overlay */
.iconbtn{background:none;border:0;cursor:pointer;font-size:1rem;padding:0;line-height:1;color:var(--soft)}
.iconbtn:hover{color:var(--ink)}
.aiwrap{position:fixed;inset:0;z-index:60;background:rgba(20,16,10,.42);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:8vh 20px 20px}
.aiwrap.on{display:flex}
.aibox{background:var(--white);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);width:min(680px,100%);padding:1.7rem 1.8rem 1.9rem;position:relative;max-height:84vh;overflow:auto}
.aiclose{position:absolute;top:1rem;right:1.1rem;background:none;border:0;font-size:1.1rem;cursor:pointer;color:var(--soft)}
.aiclose:hover{color:var(--ink)}
.aiform{display:flex;gap:.6rem;margin-top:1.1rem}
.aiinput{flex:1;border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;font-size:1rem;font-family:inherit;background:var(--bg);color:var(--ink)}
.aiinput:focus{outline:2px solid var(--amber100);border-color:var(--accent-d)}
.aiex{margin-top:.9rem;font-size:.82rem;color:var(--soft);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.aichip{border:1px solid var(--line);border-radius:999px;background:var(--white);padding:.3rem .7rem;font-size:.8rem;color:var(--soft);cursor:pointer}
.aichip:hover{border-color:var(--ink);color:var(--ink)}
.airesult{margin-top:1.3rem}
.aiload{color:var(--soft);font-size:.95rem;padding:.5rem 0}
.aisum{background:linear-gradient(180deg,var(--ambersoft),var(--white));border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;font-size:.96rem;margin:0 0 1rem}
.aigrid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:560px){.aigrid{grid-template-columns:1fr}}
.aicard{display:flex;gap:.8rem;border:1px solid var(--line);border-radius:14px;padding:.7rem;background:var(--white);box-shadow:var(--shadow-sm);transition:.12s}
.aicard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.aicard .im{width:64px;height:64px;flex:0 0 64px;background:var(--imgbg);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.aicard .im img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.aicard .t{font-weight:800;font-size:.98rem}
.aicard .mono{font-family:var(--mono);font-size:.72rem;color:var(--soft);word-break:break-all;margin:.1rem 0 .3rem}
.aicard .rs{font-size:.82rem;color:var(--ink)}

/* ── форми й кабінет ── */
.fin{display:block;width:100%;border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;font-size:.95rem;font-family:inherit;background:var(--white);color:var(--ink)}
.fin:focus{outline:2px solid var(--amber100);border-color:var(--accent-d)}
.fl{display:block;font-size:.82rem;color:var(--soft);font-weight:600;margin-bottom:.9rem}
.fl>.fin,.fl>select.fin{margin-top:.35rem}
.ferr{color:#b3423a;font-size:.82rem;margin-top:.3rem;font-weight:600}
.fnote{color:var(--soft);font-size:.86rem}
.authbox{max-width:440px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:2rem 1.9rem;box-shadow:var(--shadow-sm)}
.okbox{background:#eef6ee;border:1px solid #b8d8b8;color:#2c5f2c;border-radius:12px;padding:.75rem 1rem;font-size:.9rem;margin-bottom:1.2rem}
.errbox{background:#fdf1ee;border:1px solid #e8b6ac;color:#8d3a2c;border-radius:12px;padding:.75rem 1rem;font-size:.9rem;margin-bottom:1.2rem}
.cabgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.cabcard{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.3rem;box-shadow:var(--shadow-sm)}
.cabcard .rl{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:700}
.cabcard .rv{font-size:2rem;font-weight:800;margin-top:.25rem}
.rolechip{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--line)}
.rolechip.admin{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.rolechip.manager{background:var(--ambersoft);border-color:var(--accent-d);color:var(--accent-d)}
.rolechip.client{background:var(--white);color:var(--soft)}
/* Конструктор — зовнішній, як клієнт, але його треба відрізняти в переліку очима */
.rolechip.designer{background:var(--white);color:var(--accent-d);border-color:var(--accent-d)}

/* A6: варіант набору зі своїм знаком — картинка над написом */
.opt.iconopt{display:flex;flex-direction:column;align-items:center;gap:.25rem;line-height:1.15}
.opt.iconopt .optic{width:30px;height:30px;object-fit:contain;display:block}
.opt.iconopt i{font-style:normal;font-size:.78rem}

/* C5: перелік «що вказати в запиті» — читається як чек-ліст, а не як абзац */
.brings{margin:0;padding:0;list-style:none;max-width:62ch;display:grid;gap:.55rem}
.brings li{position:relative;padding-left:1.6rem;color:var(--soft);line-height:1.55}
.brings li::before{content:"";position:absolute;left:.35rem;top:.62em;width:6px;height:6px;border-radius:999px;background:var(--accent-d)}

/* C3: «скоро зʼявиться» замість порожньої рамки. Позиція лишається в каталозі —
   ховати її означало б утратити продаж заради охайності каталогу. */
/* Колір тут --on-img, а не --soft: плитка під фото світла В УСІХ сценах, а
   --soft уночі світлішає під темну сторінку — підпис ставав ледь видимим
   (контраст 2.21). Знайдено 31.08 ручним проходом у темній сцені. */
.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
  width:100%;height:100%;min-height:64px;padding:.6rem;text-align:center;color:var(--on-img)}
/* Той самий випадок, що й .soon: підпис «— немає —» лежить на світлій плитці
   під фото, тож колір бере від неї, а не від сторінки. */
.im .fnote{color:var(--on-img)}
.soon__ic{width:30px;height:30px;opacity:.5}
.soon__ic svg{width:100%;height:100%}
.soon__t{font-size:.72rem;line-height:1.25;letter-spacing:.02em}
/* У прайс-таблиці й дрібних картках підпис не влазить — лишається сам знак,
   а текст доступний екранному читачеві через aria-label. */
td .soon__t,.cfcard .soon__t{display:none}
td .soon,.cfcard .soon{min-height:40px}
.drawsoon{margin-top:.8rem;border:1px dashed var(--line);border-radius:14px;padding:1.1rem;background:var(--imgbg)}
.userbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.4rem}

/* фіча-картка AI на головній: увесь блок відкриває пошук */
.fcard-ai{cursor:pointer;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.fcard-ai:hover{box-shadow:0 10px 26px rgba(25,23,20,.13);transform:translateY(-3px);border-color:var(--accent-d)}
.fcard-ai:hover .top{filter:saturate(1.15)}

.mocktag{position:fixed;bottom:12px;left:12px;z-index:50;background:var(--ink);color:var(--on-ink);font-size:.7rem;padding:.3rem .6rem;border-radius:6px;letter-spacing:.05em;opacity:.85}
@media print{.mocktag,nav.top{position:static}.aurora{animation:none}}

/* ── фільтр під кнопкою ──
   Вісім рядків характеристик відсували каталог на екран вниз, а потрібні
   вони не всім. Тепер згорнуті; відкриті самі, якщо фільтр уже застосований. */
.fltbox{margin-top:1rem;border-top:1px dashed var(--line);padding-top:.9rem}
.fltbox>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--line);border-radius:999px;padding:.42rem 1rem;background:var(--white);
  font-size:.86rem;font-weight:700;color:var(--soft);transition:.15s;user-select:none}
.fltbox>summary::-webkit-details-marker{display:none}
.fltbox>summary:hover{border-color:var(--ink);color:var(--ink)}
.fltbox>summary::after{content:"⌄";font-size:1rem;line-height:1;transition:transform .2s}
.fltbox[open]>summary::after{transform:rotate(180deg)}
.fltbox[open]>summary{border-color:var(--ink);color:var(--ink)}
.fltbox>summary b{background:var(--accent-d);color:var(--on-accent);border-radius:999px;
  min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.7rem;padding:0 5px}
.fltbox .fltbar{border-top:0;padding-top:.2rem;margin-top:.9rem}
/* ── СЦЕНАРНА ПАНЕЛЬ — орган керування сценою (у шапці) ──
   Не сегментований перемикач, а накладка з утопленими клавішами: над кожною
   світлова смуга. Активна сцена не «виділена», вона ГОРИТЬ — смуга загоряється
   з коротким кидком яскравості й дає ореол.

   🔴 14.08 повернено на прохання Бориса. Трек освітлення нижче лишається в
   стилях, бо його показує сторінка вибору /design/switches. */
/* Перемикач сцени — «Tunable White» (варіант 4, вибір Бориса 18.08).
   Доріжка від теплого до холодного: показує саме те, що змінюється —
   колірну температуру, а не абстрактну «тему».

   Градієнт доріжки навмисно ЛІТЕРАЛЬНИЙ, а не з токенів сцени: це шкала
   кольору світла (2700 K -> 5000 K), вона однакова в усіх сценах і не має
   перефарбовуватись разом зі сторінкою. */
.scenes{display:inline-flex;align-items:center;gap:.55rem}
.scenes .k{font-family:var(--mono);font-size:.7rem;font-weight:700;color:var(--soft);white-space:nowrap;letter-spacing:0}
/* Сяйво ручки відповідає сцені — тепле вночі, холодне на показі. */
:root{--thumb-glow:rgba(245,205,120,.55)}
:root[data-scene="night"]{--thumb-glow:rgba(224,179,86,.7)}
:root[data-scene="bright"]{--thumb-glow:rgba(120,180,230,.6)}
.srange{position:relative;display:inline-flex;align-items:center;height:24px}
/* Три засічки = три сцени; тонкі крапки просто на доріжці, без браузерних ticks. */
.srange__ticks{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;justify-content:space-between;padding:0 9px;pointer-events:none}
.srange__ticks i{width:3px;height:3px;border-radius:50%;background:rgba(80,60,30,.28)}
:root[data-scene="night"] .srange__ticks i{background:rgba(255,240,210,.3)}
.scenes input[type="range"]{-webkit-appearance:none;appearance:none;width:120px;height:24px;background:transparent;cursor:pointer;outline:none;margin:0;position:relative;z-index:1}
/* Доріжка = саме світло: тепле → нейтральне → холодне. */
.scenes input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:6px;
  background:linear-gradient(90deg,#f4a94e,#ffedd0 50%,#dbeeff);box-shadow:inset 0 1px 2px rgba(0,0,0,.14)}
.scenes input[type="range"]::-moz-range-track{height:6px;border-radius:6px;
  background:linear-gradient(90deg,#f4a94e,#ffedd0 50%,#dbeeff);box-shadow:inset 0 1px 2px rgba(0,0,0,.14)}
/* Ручка = світлова точка: тепле ядро + м'яке сяйво кольору сцени. */
.scenes input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fffef9,#ffe7b4 66%,#f0b667);border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(150,100,20,.3),0 0 9px 1px var(--thumb-glow),0 2px 5px rgba(0,0,0,.22);
  transition:transform .16s ease,box-shadow .22s ease}
.scenes input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fffef9,#ffe7b4 66%,#f0b667);border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(150,100,20,.3),0 0 9px 1px var(--thumb-glow),0 2px 5px rgba(0,0,0,.22)}
/* Наведення — «додаємо світла»: сяйво росте. */
.scenes input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.14);box-shadow:0 0 0 1px rgba(150,100,20,.3),0 0 15px 3px var(--thumb-glow),0 2px 6px rgba(0,0,0,.25)}
.scenes input[type="range"]:hover::-moz-range-thumb{transform:scale(1.14)}
.scenes input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.06)}
.scenes input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent-hi),0 0 14px 3px var(--thumb-glow),0 2px 6px rgba(0,0,0,.25)}
/* тісно — спершу зникають підписи температур, повзунок лишається робочим */
@media(max-width:1180px){.scenes input[type="range"]{width:100px}}
@media(max-width:980px){.scenes .k{display:none}.scenes input[type="range"]{width:78px}.srange__ticks{padding:0 7px}}
@media(prefers-reduced-motion:reduce){.scenes input[type="range"]::-webkit-slider-thumb,.scenes input[type="range"]::-moz-range-thumb{transition:none}}

/* ── ТРЕК ОСВІТЛЕННЯ — орган керування сценою ──
   На демо-сторінці стояла клавішна панель. На самому шаблоні вона читалась
   як звичайний перемикач вкладок, тож тут інший орган: шинопровід із трьома
   світильниками. Світло набирається накопичувально — один, два, три промені,
   як коли в залі піднімають рівень. Зв'язок «натиснув — стало світліше»
   видно без підпису. */
.ltrack{display:inline-flex;align-items:flex-start;gap:0;padding:0 .35rem;position:relative}
.ltrack::before{content:"";position:absolute;left:0;right:0;top:5px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent)}
.ltrack button{position:relative;border:0;background:none;cursor:pointer;padding:0 .28rem;
  width:44px;display:flex;flex-direction:column;align-items:center;font:inherit}
.ltrack .lamp{width:20px;height:10px;border-radius:0 0 4px 4px;background:var(--soft);opacity:.45;
  margin-top:6px;transition:background-color .3s ease,opacity .3s ease}
/* Промінь під лампою — трикутник через clip-path, а не через фальшиву рамку.
   Раніше він малювався трюком width:0;height:0 + border-top:30px, і детектор
   «нейронного» дизайну справедливо читав це як товсту рамку-акцент на
   заокругленій картці. Розмір, колір і розмиття ті самі — 30×30. */
.ltrack .beam{width:30px;height:30px;background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%);
  opacity:0;filter:blur(1.5px);margin-top:-1px;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1)}
.ltrack .cap{position:absolute;top:44px;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  color:var(--soft);white-space:nowrap;transition:color .3s ease}
.ltrack button.lit .lamp{background:var(--accent);opacity:1;
  box-shadow:0 0 10px 1px color-mix(in oklab,var(--accent) 60%,transparent)}
.ltrack button.lit .beam{opacity:.42}
.ltrack button.on .cap{color:var(--ink)}
.ltrack button:hover:not(.lit) .lamp{opacity:.8}
.ltrack button:focus-visible{outline:2px solid var(--accent-d);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.ltrack .beam,.ltrack .lamp{transition:none}}
@media(max-width:980px){.ltrack .cap{display:none}.ltrack button{width:34px}.ltrack .beam{border-top-width:22px}}

/* ── сцена керує самим шаблоном, а не лише фоном ── */
.aurora{filter:blur(6px) brightness(var(--hero-dim))}
.hero-prod{filter:brightness(var(--hero-dim));transition:filter .55s cubic-bezier(.22,.61,.36,1)}
/* пляма світла на плитці: у «Ночі» товар стоїть під світильником, у «Показі» — рівне світло */
.cat .im,.pcard .im,.pd-photo,.aicard .im{
  background-image:radial-gradient(58% 52% at 50% 34%,
    color-mix(in oklab,#ffdf9e calc(var(--spot) * 100%),transparent),transparent 70%);
  transition:background-color .55s cubic-bezier(.22,.61,.36,1)}
/* згода на обробку даних: помітна, до кнопки, з посиланням на політику */
.consent{display:flex;gap:.6rem;align-items:flex-start;margin:1.1rem 0 .2rem;
  font-size:.88rem;color:var(--soft);line-height:1.45;cursor:pointer;max-width:56ch}
.consent input{margin-top:.22rem;width:17px;height:17px;accent-color:var(--accent-d);flex:0 0 auto;cursor:pointer}
.consent a{color:var(--accent-d);font-weight:700;text-decoration:underline}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
/* навігація адмінки: розділи завжди на екрані, поточний підсвічений */
.adminnav{margin-top:1.2rem;gap:.4rem}
.adminnav .chip{font-size:.86rem;padding:.42rem 1rem}
.adminnav .chip.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
/* картка огляду — клікабельна цілком, а не лише заголовок */
a.cabcard{display:block;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
a.cabcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent-d)}
a.cabcard .rv{color:var(--ink)}

/* ============================================================================
   ПІДПИС СТУДІЇ — компонент студії, скопійований БЕЗ ЗМІН із
   control/_credit/impeca-credit.css. Не правити тут: він самодостатній, з
   власним префіксом impc-, і оновлюється централізовано на всі сайти.
   ============================================================================ */
/* ============================================================================
   ПІДПИС СТУДІЇ IMPECA — рядок у правовому підвалі.

   🔴 01.09, рішення Бориса: підпис стоїть У ТОМУ САМОМУ рядку, що копірайт,
   політика приватності й штамп версії, і НЕ виділяється серед них — той самий
   кегль, той самий колір. Попередня версія була пігулкою зі знаком, стрілкою
   й власним рядком під підвалом: на сайті клієнта це читалось як чужа
   реклама. (14.08 рішення було протилежне — «робимо помітним»; 01.09 воно
   змінилось, і саме тому стара версія тут не лежить закоментованою.)

   Єдина реакція — наведення: колір тексту й підкреслення. Посилання лишається
   тим, чим було: текстовий анкор, dofollow, з UTM — тобто робочим беклінком,
   а не декором.

   Префікс `impc-` лишається: клас їде й на інші клієнтські сайти й не має
   перетинатись із класами господаря.
   ============================================================================ */
.impc-credit {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.impc-credit:hover,
.impc-credit:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.impc-credit:focus-visible {
  outline: 2px solid var(--accent-d);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) { .impc-credit { transition: none; } }

/* Прайсова таблиця: посилання-дії (14–18px) замалі для пальця. Таблиця
   щільна навмисно (професійний режим), тож нарощуємо саме клікабельну
   зону, не міняючи ритм рядків. */
.ptable td a,.ptable th a{display:inline-flex;align-items:center;min-height:24px}

/* Останні дрібні таргети (<24px): вузьке сортування «CRI», посилання в
   порівняльній таблиці.

   🔴 `.fbot a` звідси прибрано свідомо: inline-flex робив посилання правового
   рядка нерозривними блоками, через що рядок ламався переносом цілого напису.
   Там вони тепер стоять усередині суцільного тексту, а для посилань у реченні
   виняток WCAG 2.5.8 (inline) діє — розмір задає сам рядок. */
.compare .us a{display:inline-flex;align-items:center;min-height:24px}
.ptable th a{min-width:24px;justify-content:flex-start}

/* ── Семантика без зміни вигляду ─────────────────────────────────────────
   21.08: секційні назви були <div class="h2"> — виглядали як заголовки, але
   для пошуку й скрінрідера сторінка йшла h1 → h3, з пропуском рівня. Тепер це
   справжні <h2>. Щоб КАРТИНКА не змінилась ані на піксель, пришпилюємо тут те,
   що ці елементи мали як div: вагу 400 (правило h1,h2,h3 дало б 800), успадкований
   трекінг (замість -.03em) і звичайне перенесення рядків (замість balance). */
h2.h2{font-weight:400;letter-spacing:inherit;text-wrap:wrap}
/* Футерні мітки були <h4> (700), конфігуратор — <h6> (700): лишаємо як було. */
footer .fh{font-weight:700}

/* ══ ВІДГУК НА КУРСОР І НАТИСК ══════════════════════════════════════════
   Запит Бориса 03.09: «щоб кожен блок реагував на мишку, кожна кнопка».

   Що зроблено і чого НЕ зроблено — свідомо:

   · відгук отримує те, що справді можна натиснути. Картка, яка підіймається
     під курсором, але нікуди не веде, — це обіцянка, якої інтерфейс не
     виконує; людина клацає й нічого не відбувається. Тому статичні блоки
     (цитата, порівняльна таблиця, характеристики) лишились нерухомі;
   · натомість там, де картка мала посилання в кутку, клікабельною стала ВСЯ
     картка (`.linkacc::after` розтягнутий на весь блок) — і тоді підйом чесний;
   · додано НАТИСК. До 03.09 на весь сайт було рівно одне правило `:active`:
     кнопка підіймалась під курсором і не реагувала на клац. Саме натиск
     людина відчуває як «інтерфейс мене почув».

   Числа не з голови: наведення 140мс, натиск 100мс — це нижня межа, за якою
   рух ще помітний, але вже не сповільнює. Криві — м'який ease-out; рух лише
   `transform` і `opacity`, тобто без перерахунку розкладки.

   Два запобіжники обов'язкові й стоять тут-таки:
   · `(hover:hover) and (pointer:fine)` — на дотику браузер вигадує наведення
     під час тапу, і без цієї межі кнопка «залипає» піднятою;
   · `prefers-reduced-motion` — кому рух заважає, лишається зміна кольору. */

:root{--ease-out:cubic-bezier(.23,1,.32,1)}

/* ── НАТИСК: працює і мишею, і пальцем, тому поза межею hover ── */
.btn:active,.chip:active,.opt:active,.arw:active,.iconbtn:active,
.util .pillbtn:active,.pg:active,.qbtn:active,.aichip:active,
.cfind-clear:active,.thsort:active{transform:translateY(1px) scale(.99)}
.btn,.chip,.opt,.arw,.iconbtn,.util .pillbtn,.pg,.qbtn,.aichip,
.cfind-clear,.thsort{transition:transform .1s var(--ease-out),
  background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}

/* картка під натиском не «провалюється», а лише повертається на місце */
a.cat:active,a.seg:active,a.pcard:active,a.ncard:active,a.scard:active,
a.cabcard:active,.pill-card:has(.linkacc):active{transform:translateY(0)}

/* ── НАВЕДЕННЯ ── */
@media (hover:hover) and (pointer:fine){

  /* Картки з посиланням: клікає вся картка, а не лише рядок у кутку. */
  .pill-card:has(.linkacc){position:relative;transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .14s ease}
  .pill-card:has(.linkacc) .linkacc::after{content:"";position:absolute;inset:0;border-radius:inherit}
  .pill-card:has(.linkacc):hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent-d)}
  .pill-card:has(.linkacc):hover .linkacc{text-decoration:underline;text-underline-offset:4px}

  /* Картка проєкту на «Про компанію» — посилання, поводиться як решта карток. */
  a.scard{transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .14s ease}
  a.scard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent-d)}
  a.scard:hover .t{color:var(--accent-d)}

  /* Акцентні посилання-дії: «До каталогу →», «Переглянути все», файли. */
  .linkacc,.seeall,.seelink,.ltable a.dl,.cfind-clear{transition:color .14s ease}
  .linkacc:hover,.seeall:hover,.seelink:hover,.ltable a.dl:hover,.cfind-clear:hover{
    color:var(--accent-d);text-decoration:underline;text-underline-offset:4px}

  /* Питання у FAQ: під курсором видно, що рядок розкривається. */
  .faq summary{transition:background-color .14s ease}
  .faq summary:hover{background:var(--ambersoft)}
  .faq summary:hover::after{color:var(--ink)}

  /* ── СТАТИЧНІ БЛОКИ: рамка темнішає, і тільки ──
     Запит Бориса 03.09: «підсвітка рамки статичним блокам». Тут навмисно НЕ
     повторено поводження карток-посилань: ні підйому, ні тіні, ні акцентного
     кольору. Підйом і акцент читаються як «клікни мене», а ці блоки нікуди не
     ведуть — лишається сама лише вказівка, де стоїть курсор.
     Колір — нейтральний, темніша волосина з того ж токена рамки. */
  .pill-card:not(:has(.linkacc)),.fcard:not(.fcard-ai),.proof,.scard:not(a),
  .offcard{transition:border-color .14s ease}
  .pill-card:not(:has(.linkacc)):hover,.fcard:not(.fcard-ai):hover,.proof:hover,
  .scard:not(a):hover,.offcard:hover{border-color:color-mix(in oklab,var(--ink) 26%,var(--line))}

  /* Рядки таблиць — не прикраса, а допомога читати впоперек: у характеристиках
     і в порівнянні око губить рядок на широкому екрані. */
  .spec tbody tr:hover td{background:var(--ambersoft)}
  .ctable tbody tr:hover td{background:color-mix(in oklab,var(--on-ink) 7%,transparent)}
  .spec tbody tr,.ctable tbody tr{transition:background-color .14s ease}

  /* Логотип у шапці — теж посилання (на головну). */
  .logo{transition:opacity .14s ease}
  .logo:hover{opacity:.72}
}

@media(prefers-reduced-motion:reduce){
  .btn,.chip,.opt,.arw,.iconbtn,.util .pillbtn,.pg,.qbtn,.aichip,
  .cfind-clear,.thsort,.pill-card:has(.linkacc),a.scard{transition:background-color .14s ease,color .14s ease,border-color .14s ease}
  .btn:active,.chip:active,.opt:active,.arw:active,.iconbtn:active,
  .util .pillbtn:active,.pg:active,.qbtn:active,.aichip:active,
  .cfind-clear:active,.thsort:active,
  .pill-card:has(.linkacc):hover,a.scard:hover{transform:none}
}

/* ── ДОТИК: наведення, якого людина не просила ──────────────────────────
   Браузер на телефоні вигадує :hover під час тапу й лишає його на елементі,
   доки не тапнеш деінде. Через це картка після дотику зависає піднятою, а
   підкреслення в меню — намальованим. Нові правила вище вже стоять за межею
   (hover:hover), а ці тринадцять жили в темі до 03.09 без неї — гасимо їх
   одним місцем, щоб гасіння не розповзлось по файлу й не забулось.

   🔴 Гасити треба «у нейтральний стан», а не `transform:none`: у підкреслення
   меню нейтральний стан — scaleX(0), і `none` показав би його назавжди. */
@media (hover:none),(pointer:coarse){
  .btn:hover,.pd-rel-row a:hover,.cat:hover,a.seg:hover,.ncard:hover,
  .nextup a:hover,.pcard:hover,.aicard:hover,.fcard-ai:hover,
  a.cabcard:hover{transform:none}
  .offcard .map button:hover .pin{transform:none}
  .scenes input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1)}
  .scenes input[type="range"]:hover::-moz-range-thumb{transform:scale(1)}
  .navlinks>a:hover::after,.navlinks .has-mega:hover>a::after{transform:scaleX(0)}
}