/* =====================================================================
   BZUB Solutions — стилі сторінки студії.

   Палітра, типографіка й механіка взяті з bzubs.com: мед і графіт,
   Sora на заголовках, Poppins у тексті, JetBrains Mono на службових
   рядках. Це окремий файл, не частина стилів магазину: у BeceN олива й
   лайм, і мішати дві айдентики в одному файлі означало б, що правка
   рекламної сторінки може зіпсувати вітрину.
   ===================================================================== */

:root{
  --gold:#FFCC30; --amber:#FFA100; --rust:#D75F15;
  --cream:#FAF3E0; --cream-2:#F3E9CE; --cream-3:#EFE2C0;
  --ink:#0E0A03; --ink-2:#171004; --ink-3:#0B0702;
  --white:#FFF9EC;
  --text:#241C0C; --text-dim:#6B5D3E;
  --dim:rgba(255,249,236,.66); --dim-2:rgba(255,249,236,.44);
  --grad:linear-gradient(115deg,var(--gold) 0%,var(--amber) 48%,var(--rust) 100%);
  --grad-text:linear-gradient(100deg,#FFF2CE 0%,#FFD84D 34%,#FFCC30 62%,#FFB03A 100%);
  --gd-bg:rgba(255,249,236,.07); --gd-brd:rgba(255,255,255,.14);
  --gd-spec:inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.3);
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --maxw:1240px;
  --disp:"Sora",system-ui,sans-serif;
  --body:"Poppins",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-l:0 22px 50px -32px rgba(120,80,20,.45);
}

/* Сторінка живе всередині магазину, тому все — усередині .bz-page.
   Жодне правило звідси не має дотягнутися до вітрини: у магазину інша
   палітра, і випадкове перекриття зіпсувало б каталог. */
.bz-page *,.bz-page *::before,.bz-page *::after{box-sizing:border-box}
.bz-page{
  background:var(--cream);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* overflow тут ставити НЕ можна: будь-який overflow робить із блока
     власний контейнер прокрутки, і смуга меню перестає липнути — вона
     просто їде вгору разом зі сторінкою. Саме так і сталося на першій
     перевірці. Оболонка магазину відступів навколо не дає, тож блок і
     без фокусів займає всю ширину. */
}
.bz-page img{max-width:100%;display:block}
.bz-page a{color:inherit;text-decoration:none}
.bz-page .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.bz-page .mono{font-family:var(--mono);letter-spacing:-.01em}
.bz-page .grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* ---------- кнопки ---------- */
.bz-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding:15px 26px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease);
}
.bz-page .btn:hover{transform:translateY(-2px)}
.bz-page .btn-primary{background:var(--grad);color:#241700;box-shadow:0 14px 34px -14px rgba(255,161,0,.8)}
.bz-page .btn-primary:hover{box-shadow:0 20px 44px -16px rgba(255,161,0,.9)}
.bz-page .btn-ghost{background:var(--gd-bg);color:var(--white);border:1.5px solid rgba(255,204,48,.38)}
.bz-page .btn-ghost:hover{background:rgba(255,204,48,.14)}
.bz-page .btn-dark{background:var(--ink);color:var(--white)}
.bz-page .btn-sm{padding:11px 18px;font-size:14px}
.bz-page .btn-block{width:100%}
.bz-page .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- смуга студії під шапкою магазину ---------- */
/* Шапка магазину лишається головною — це його сайт. Смуга студії
   прилипає під нею, щоб меню послуг та індустрій було під рукою на всій
   сторінці. Скло: розмите тло, світла кромка вгорі, тінь під низом. */
/* Смуга парковується під шапкою магазину, а не поверх неї: висоту шапки
   міряє скрипт і кладе у --bz-bar-top. Числом писати не можна — на
   телефоні шапка нижча. */
/* Колір тексту задаємо самій смузі. Вище стоїть .bz-page a{color:inherit},
   і воно сильніше за .bz-navtop — через це напис «Послуги» був майже
   чорним на темному склі, тобто ледь читався. Тепер темна смуга сама
   ставить світлий колір, а посилання його успадковують. */
.bz-bar{position:sticky;top:var(--bz-bar-top,76px);z-index:40;color:var(--cream);
  background:linear-gradient(180deg,rgba(23,16,4,.86),rgba(14,10,3,.78));
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--gd-brd);box-shadow:var(--gd-spec),0 18px 40px -30px rgba(0,0,0,.9)}
.bz-bar__in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px}
.bz-bar.stuck{box-shadow:var(--gd-spec),0 22px 48px -26px rgba(0,0,0,.95)}
.bz-logo{display:inline-flex;align-items:center;gap:10px}
.bz-logo img{height:30px;width:auto}

.bz-links{display:flex;align-items:center;gap:2px}
.bz-page .bz-navtop{display:inline-flex;align-items:center;gap:6px;color:rgba(255,249,236,.86);
  font-family:var(--body);font-size:14.5px;font-weight:500;padding:9px 13px;border-radius:999px;
  transition:color .45s var(--ease),background .45s var(--ease);cursor:pointer}
.bz-page .bz-navtop:hover,.bz-page .bz-has-mega.open .bz-navtop{color:var(--white);
  background:rgba(255,249,236,.1)}
.bz-navtop i{display:inline-block;width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-bottom:3px;
  transition:transform .4s var(--ease)}
.bz-has-mega.open .bz-navtop i{transform:rotate(225deg);margin-bottom:-2px}

/* випадаюче меню — те саме скло, що на bzubs.com */
.bz-has-mega{position:relative}
.bz-mega{position:absolute;left:50%;transform:translate(-50%,-12px);top:100%;padding-top:12px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s}
.bz-has-mega.open .bz-mega{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
.bz-mega-in{
  display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:22px 30px;
  padding:26px 30px;border-radius:var(--r-lg);width:max-content;max-width:min(92vw,880px);
  background:linear-gradient(180deg,rgba(23,16,4,.96),rgba(14,10,3,.94));
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--gd-brd);box-shadow:var(--gd-spec),0 30px 70px -30px rgba(0,0,0,.85);
}
.bz-mega h4{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);font-weight:500}
.bz-mega a{display:block;color:rgba(255,249,236,.82);font-size:14.5px;padding:5px 0;
  transition:color .3s var(--ease),transform .3s var(--ease)}
.bz-mega a:hover{color:var(--gold);transform:translateX(3px)}

.bz-right{display:flex;align-items:center;gap:10px}
.bz-burger{display:none;width:40px;height:40px;border:0;background:rgba(255,249,236,.1);
  border-radius:12px;cursor:pointer;padding:11px 10px}
.bz-burger span{display:block;height:2px;background:var(--white);border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.bz-burger span+span{margin-top:4px}
.bz-burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.bz-burger.on span:nth-child(2){opacity:0}
.bz-burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.bz-mobile{display:none;position:fixed;inset:0;z-index:39;padding:90px 24px 40px;
  flex-direction:column;gap:2px;overflow:auto;
  background:linear-gradient(180deg,rgba(14,10,3,.98),rgba(11,7,2,.99));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bz-mobile.open{display:flex}
.bz-mobile a{color:var(--white);font-family:var(--disp);font-size:18px;font-weight:600;
  padding:13px 0;border-bottom:1px solid rgba(255,249,236,.1)}
.bz-mobile h4{margin:16px 0 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold)}
.bz-mobile .sub{font-size:15px;font-weight:400;color:rgba(255,249,236,.78);padding:9px 0}

/* ---------- герой ---------- */
.bz-hero{position:relative;min-height:86svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:76px 0 34px;background:var(--ink-3);color:var(--white);
  isolation:isolate}
#bzHive{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.bz-scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(10,7,2,.97) 0%,rgba(10,7,2,.93) 38%,rgba(10,7,2,.72) 62%,
      rgba(10,7,2,.35) 85%,rgba(10,7,2,.15) 100%),
    radial-gradient(70% 60% at 24% 46%,rgba(8,5,1,.82),transparent 76%),
    linear-gradient(0deg,rgba(10,7,2,.92) 0%,rgba(10,7,2,.3) 34%,transparent 58%);
}
.bz-hero-in{position:relative;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.bz-badge{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  background:rgba(255,249,236,.07);border:1px solid rgba(255,204,48,.3);border-radius:999px;
  padding:8px 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cream-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bz-badge b{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(255,204,48,.2)}
.bz-h1{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  margin:26px 0 0;font-size:clamp(38px,7.2vw,92px)}
.bz-h1 span{display:block}
.bz-h1 .l1{font-size:.58em;font-weight:600;color:var(--cream-2);letter-spacing:-.02em}
.bz-h1 .l3{font-size:.52em;font-weight:500;color:var(--white);margin-top:.12em;
  padding-left:.5em;border-left:3px solid var(--amber)}
.bz-hero .lead{max-width:56ch;margin:26px 0 0;font-size:15px;line-height:1.75;
  color:var(--dim);font-family:var(--mono)}
.bz-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}
.bz-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;
  border-top:1px solid rgba(255,249,236,.14);padding-top:22px}
.bz-stats .sn{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--gold);opacity:.8}
.bz-stats b{display:block;font-family:var(--disp);font-size:clamp(26px,3.4vw,40px);
  font-weight:700;letter-spacing:-.03em;margin:4px 0 2px}
.bz-stats span:last-child{font-size:13px;color:var(--dim-2)}
.bz-scroll{align-self:center;margin-top:26px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);display:flex;
  flex-direction:column;align-items:center;gap:8px}
.bz-scroll i{width:1px;height:34px;background:linear-gradient(180deg,var(--gold),transparent);
  animation:bzDrop 2.4s var(--ease) infinite}
@keyframes bzDrop{0%{opacity:0;transform:scaleY(.2)}40%{opacity:1}100%{opacity:0;transform:scaleY(1)}}

/* ---------- секції ---------- */
/* scroll-margin — щоб перехід за посиланням «Рішення» чи «Проєкти» не
   ховав заголовок під пілюлею шапки: вона висить над сторінкою завжди. */
.bz-sec{padding:clamp(64px,9vw,120px) 0;position:relative;scroll-margin-top:96px}
.bz-sec--dark{background:var(--ink);color:var(--white)}
.bz-sec--cream{background:var(--cream)}
.bz-sec--cream2{background:var(--cream-2)}
.bz-eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rust);margin:0 0 14px}
.bz-eyebrow::before{content:'';width:34px;height:2px;background:var(--grad)}
.bz-sec--dark .bz-eyebrow{color:var(--gold)}
.bz-h2{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(27px,3.8vw,46px);margin:0 0 16px}
.bz-sub{max-width:62ch;margin:0 0 40px;font-size:16.5px;line-height:1.7;color:var(--text-dim)}
.bz-sec--dark .bz-sub{color:var(--dim)}

/* карточки */
.bz-grid{display:grid;gap:22px}
.bz-grid--2{grid-template-columns:repeat(2,1fr)}
.bz-grid--3{grid-template-columns:repeat(3,1fr)}
.bz-grid--4{grid-template-columns:repeat(4,1fr)}
/* Рідке скло. Саме воно робить айдентику bzubs.com пізнаваною: панель
   не біла, а прозора з розмиттям, зі світлою кромкою вгорі та мʼякою
   тінню всередині. Без цього карточки виглядають як звичайні плитки. */
.bz-card{
  position:relative;border-radius:var(--r-lg);padding:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.52));
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 1px rgba(180,130,40,.1),
             var(--shadow-l);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.bz-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,204,48,.16),transparent 42%);opacity:0;
  transition:opacity .5s var(--ease)}
.bz-card:hover{transform:translateY(-5px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 34px 66px -32px rgba(120,80,20,.55)}
.bz-card:hover::after{opacity:1}
.bz-card h3{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.bz-card p{margin:0 0 14px;color:var(--text-dim);font-size:15px}
.bz-card ul{margin:0;padding:0;list-style:none;font-size:14.5px}
.bz-card li{padding:7px 0 7px 24px;position:relative;border-top:1px solid rgba(120,90,30,.1)}
.bz-card li:first-child{border-top:0}
.bz-card li::before{content:'';position:absolute;left:0;top:14px;width:11px;height:12px;
  background:var(--grad);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.bz-sec--dark .bz-card{
  background:linear-gradient(180deg,rgba(255,249,236,.1),rgba(255,249,236,.04));
  border-color:var(--gd-brd);color:var(--white);
  box-shadow:var(--gd-spec),0 26px 54px -34px rgba(0,0,0,.8)}
.bz-sec--dark .bz-card p{color:var(--dim)}
.bz-sec--dark .bz-card li{border-color:rgba(255,249,236,.1)}
.bz-num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--rust)}
.bz-sec--dark .bz-num{color:var(--gold)}

/* готові рішення — плитки */
.bz-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bz-tile{display:block;border-radius:var(--r-md);padding:20px;color:var(--white);
  background:linear-gradient(180deg,rgba(255,249,236,.1),rgba(255,249,236,.04));
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--gd-brd);box-shadow:var(--gd-spec);
  transition:transform .45s var(--ease),background .45s var(--ease),
             border-color .45s var(--ease),box-shadow .45s var(--ease)}
.bz-tile:hover{transform:translateY(-4px) scale(1.015);
  background:linear-gradient(180deg,rgba(255,204,48,.18),rgba(255,161,0,.08));
  border-color:rgba(255,204,48,.45);box-shadow:var(--gd-spec),0 22px 44px -26px rgba(255,161,0,.5)}
.bz-tile i{display:block;width:30px;height:34px;background:var(--grad);margin-bottom:12px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.bz-tile b{display:block;font-family:var(--disp);font-size:15.5px;font-weight:600;margin-bottom:4px}
.bz-tile span{font-size:13px;color:var(--dim)}

/* пакети */
.bz-pack{display:flex;flex-direction:column;height:100%}
/* Блок ціни. Ніяких градієнтних заливок тексту тут бути НЕ МОЖЕ.
   Раніше на виділеній картці градієнт стояв на всьому блоці разом із
   background-clip:text — і забирав із собою підпис, перечеркнуту суму й
   відсоток: підпис ставав майже невидимим, а плашка «−52%» перетворилась
   на порожню оранжеву пігулку без цифр. Тому колір тут суцільний і
   темний, а кожен елемент задає свій -webkit-text-fill-color явно, щоб
   ніяке успадкування його вже не з'їло. */
.bz-price{margin:6px 0 2px}
.bz-price small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:#7C6134;-webkit-text-fill-color:#7C6134;
  font-weight:500;margin-bottom:7px}
/* Ціна мусить лишатися в один рядок: «від 22 000 грн» при 32px не
   влазило у картку й слово «грн» падало вниз окремим рядком. */
.bz-sum{display:block;font-family:var(--disp);font-size:clamp(21px,1.9vw,27px);font-weight:700;
  letter-spacing:-.03em;white-space:nowrap;color:var(--text);-webkit-text-fill-color:var(--text)}
/* Перечеркнута ціна й відсоток. Стоять НАД новою ціною й дрібніші за
   неї: головна цифра в картці мусить бути та, яку людина реально
   заплатить, інакше око чіпляється за велике перечеркнуте число і
   картка читається дорожчою, ніж вона є. */
.bz-wasrow{display:flex;align-items:center;gap:9px;margin:0 0 4px}
.bz-was{font-family:var(--disp);font-size:17px;font-weight:600;
  color:#6E5A34;-webkit-text-fill-color:#6E5A34;
  text-decoration:line-through;text-decoration-thickness:2.5px;
  text-decoration-color:#C22B12;letter-spacing:-.02em;white-space:nowrap}
.bz-off{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.04em;color:#FFF6E4;-webkit-text-fill-color:#FFF6E4;
  background:#C22B12;border-radius:999px;padding:4px 10px;white-space:nowrap}
.bz-pack--hot{border-color:rgba(255,161,0,.5);box-shadow:0 26px 60px -28px rgba(255,161,0,.45)}
/* Виділена картка: ціна темно-мідна, а не світло-жовта. Жовтий градієнт
   на кремовому тлі не читається — це і був «слишком бледно». */
.bz-pack--hot .bz-sum{color:#9C3A06;-webkit-text-fill-color:#9C3A06}
/* Плашка «ціни для України»: скло на світлому тлі + тепла кромка. */
.bz-deal{display:flex;align-items:flex-start;gap:16px;margin:26px 0 30px;padding:18px 22px;
  border-radius:var(--r-md);background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,161,0,.34);box-shadow:0 18px 40px -26px rgba(120,80,10,.4)}
.bz-deal-tag{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#3A1D00;background:var(--grad);border-radius:999px;
  padding:7px 13px}
.bz-deal p{margin:2px 0 0;font-size:14.5px;line-height:1.55;color:var(--text)}

/* Аргументація ціни: шість коротких пунктів у три колонки. */
.bz-why-head{margin:44px 0 20px;max-width:70ch}
.bz-why-head h3{font-family:var(--disp);font-size:clamp(22px,2.3vw,30px);font-weight:700;
  letter-spacing:-.03em;margin:0}
.bz-why-head p{margin:8px 0 0;font-size:15px;color:var(--text-dim)}
.bz-whys{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bz-why{padding:22px 22px 24px;border-radius:var(--r-md);background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(120,90,30,.14);box-shadow:0 16px 40px -30px rgba(90,60,10,.5)}
.bz-why-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--amber)}
.bz-why h4{font-family:var(--disp);font-size:17.5px;font-weight:700;letter-spacing:-.02em;
  margin:8px 0 6px}
.bz-why p{margin:0;font-size:14px;line-height:1.6;color:var(--text-dim)}
.bz-cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:30px 0 0}
.bz-cta-note{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--text-dim)}
.bz-note{font-size:13.5px;color:var(--text-dim);margin:18px 0 0}
.bz-sec--dark .bz-note{color:var(--dim-2)}

/* проєкти: знімок у рамці «вікна браузера» (смужка з трьома кружечками
   згори), під ним підпис — рівно так, як на bzubs.com. Раніше тут було
   фото на весь фон із затемненням; власник сказав, що це не схоже на
   живий сайт, тому рамку відтворюємо. Знімок обрізаємо у 4:3 по верхньому
   краю (як в оригіналі), щоб було видно «перший екран» сайту. */
.bz-proj{position:relative;overflow:hidden;border-radius:var(--r-lg);
  display:flex;flex-direction:column;color:var(--cream);
  background:rgba(255,249,236,.055);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--gd-brd);box-shadow:var(--gd-spec);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease)}
.bz-proj:hover{transform:translateY(-6px);border-color:rgba(255,204,48,.4);
  box-shadow:0 36px 72px -34px rgba(0,0,0,.7)}
.bz-proj-frame{display:block;background:#15100A;padding:26px 0 0;position:relative}
.bz-proj-bar{position:absolute;top:0;left:0;right:0;height:26px;display:flex;align-items:center;
  gap:6px;padding-left:12px;background:rgba(255,255,255,.05)}
.bz-proj-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,249,236,.28)}
.bz-proj-shot{display:block;aspect-ratio:4/3;overflow:hidden}
.bz-proj-shot img{display:block;width:100%;height:auto;
  transition:transform 1.1s var(--ease),filter .55s var(--ease);filter:saturate(.95)}
.bz-proj:hover .bz-proj-shot img{transform:scale(1.04);filter:saturate(1.05)}
.bz-proj-body{display:block;padding:20px 22px 22px}
.bz-proj-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;background:rgba(255,249,236,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 12px;margin-bottom:12px}
.bz-proj b{display:block;font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.02em}
.bz-proj-desc{display:block;margin:6px 0 0;font-size:14.5px;color:rgba(255,249,236,.82)}
.bz-proj-note{display:block;margin-top:10px;font-size:13px;color:rgba(255,249,236,.62)}
.bz-proj-url{display:block;margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--gold)}
.bz-proj-go{position:absolute;top:44px;right:20px;z-index:2;width:44px;height:44px;border-radius:50%;
  background:rgba(255,249,236,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.34);display:flex;align-items:center;justify-content:center;
  font-size:17px;transition:transform .5s var(--ease),background .5s var(--ease)}
.bz-proj:hover .bz-proj-go{transform:rotate(45deg) scale(1.08);background:rgba(255,204,48,.3)}

/* відгуки */
.bz-rev{background:#fff;border-radius:var(--r-lg);padding:28px;border:1px solid rgba(120,90,30,.12);
  box-shadow:var(--shadow-l);display:flex;flex-direction:column;gap:14px}
.bz-stars{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--amber);letter-spacing:2px}
.bz-stars b{font-family:var(--disp);font-size:17px;color:var(--text);letter-spacing:0}
.bz-rev blockquote{margin:0;font-size:16px;line-height:1.65}
.bz-rev-who{display:flex;align-items:center;gap:12px;margin-top:auto}
.bz-ava{width:42px;height:42px;border-radius:50%;background:var(--grad);color:#241700;
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700}
.bz-rev-who b{display:block;font-size:15px}
.bz-rev-who span{font-size:13px;color:var(--text-dim)}
.bz-marks{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px;
  border-top:1px solid rgba(120,90,30,.12);padding-top:14px;font-size:13px;color:var(--text-dim)}
.bz-marks b{color:var(--text);font-family:var(--disp)}

/* кроки */
.bz-steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0;padding:0;list-style:none}
.bz-steps li{position:relative;padding-top:52px}
.bz-steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:0;left:0;font-family:var(--disp);font-size:34px;font-weight:700;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.bz-steps h3{margin:0 0 6px;font-family:var(--disp);font-size:17.5px;font-weight:700}
.bz-steps p{margin:0;font-size:14.5px;color:var(--dim)}

/* заявка */
.bz-lead{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.bz-lead-facts{margin:26px 0 0;padding:0;list-style:none}
.bz-lead-facts li{position:relative;padding:10px 0 10px 30px;font-size:15px;color:var(--dim)}
.bz-lead-facts li::before{content:'';position:absolute;left:0;top:16px;width:13px;height:14px;
  background:var(--grad);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.bz-mail{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--mono);
  font-size:15px;color:var(--gold);border-bottom:1px solid rgba(255,204,48,.4);padding-bottom:3px}
.bz-form{background:rgba(255,249,236,.05);border:1px solid var(--gd-brd);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--gd-spec)}
.bz-f{margin-bottom:16px}
.bz-f label,.bz-f legend{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:7px;padding:0}
.bz-f input,.bz-f select,.bz-f textarea{
  width:100%;background:rgba(11,7,2,.55);border:1px solid rgba(255,249,236,.16);
  border-radius:var(--r-sm);color:var(--white);font-family:var(--body);font-size:16px;
  padding:13px 15px;transition:border-color .35s var(--ease),background .35s var(--ease)}
.bz-f input:focus,.bz-f select:focus,.bz-f textarea:focus{outline:0;border-color:var(--gold);
  background:rgba(11,7,2,.8)}
.bz-f.has-err input,.bz-f.has-err select{border-color:#E0662F}
.bz-err{display:block;min-height:16px;font-size:12.5px;color:#FFB08A;margin-top:5px}
.bz-budget{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0 0 16px;padding:0}
.bz-budget label{display:inline-flex;align-items:center;gap:7px;background:rgba(255,249,236,.06);
  border:1px solid var(--gd-brd);border-radius:999px;padding:9px 14px;cursor:pointer;
  font-family:var(--body);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--dim);
  margin:0;transition:.35s var(--ease)}
.bz-budget input{width:auto;margin:0;accent-color:var(--gold)}
.bz-budget label:has(input:checked){background:rgba(255,204,48,.16);border-color:rgba(255,204,48,.5);
  color:var(--white)}
.bz-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bz-ok{margin:14px 0 0;font-size:14.5px;color:var(--gold)}
.bz-ok.bad{color:#FFB08A}

/* підвал */
.bz-foot{background:var(--ink-3);color:var(--dim);padding:56px 0 30px;font-size:14px}
.bz-foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding-bottom:30px;
  border-bottom:1px solid rgba(255,249,236,.12)}
.bz-foot h4{margin:0 0 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold)}
.bz-foot a:hover{color:var(--gold)}
.bz-foot-bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  padding-top:22px;font-size:12.5px;color:var(--dim-2)}
.bz-back{display:inline-flex;align-items:center;gap:8px;background:rgba(255,249,236,.06);
  border:1px solid var(--gd-brd);border-radius:999px;padding:9px 16px;color:var(--cream-2);
  font-size:13.5px;transition:.35s var(--ease)}
.bz-back:hover{background:rgba(255,204,48,.14);color:var(--white)}
.bz-legal{max-width:70ch;line-height:1.6}

/* Поява блоків. Алекс просив саме механіку оригіналу: карточки не
   просто проявляються, а вилітають з різних боків. Напрямок задає
   data-dir у розмітці — сусідні карточки летять з протилежних сторін,
   інакше рух виглядає як одна суцільна хвиля.

   Ховаємо блоки ТІЛЬКИ під класом .bz-anim, який ставить сам bzub.js.
   Це не косметика, а страховка: один раз Cloudflare віддав під адресою
   скрипта сторінку-заглушку, скрипт не завантажився — і вся сторінка
   нижче шапки лишилася прозорою, тобто для покупця просто порожньою.
   Тепер немає скрипта — немає й приховування: сторінка видна вся, лише
   без анімації. */
.bz-anim .bz-rv{opacity:0;transform:translateY(54px) scale(.97);
  transition:opacity .75s var(--ease),transform .95s var(--ease)}
.bz-anim .bz-rv[data-dir="left"]{transform:translate3d(-70px,26px,0) rotate(-2.2deg) scale(.96)}
.bz-anim .bz-rv[data-dir="right"]{transform:translate3d(70px,26px,0) rotate(2.2deg) scale(.96)}
.bz-anim .bz-rv[data-dir="up"]{transform:translate3d(0,64px,0) scale(.96)}
.bz-anim .bz-rv.in{opacity:1;transform:none}

/* ---------- телефон і планшет ---------- */
@media(max-width:1080px){
  .bz-grid--4,.bz-tiles,.bz-steps{grid-template-columns:repeat(2,1fr)}
  .bz-grid--3,.bz-whys{grid-template-columns:repeat(2,1fr)}
  .bz-lead{grid-template-columns:1fr;gap:30px}
}
@media(max-width:860px){
  .bz-links{display:none}
  .bz-burger{display:block}
  .bz-bar__in{height:58px}
  .bz-hero{min-height:92svh;padding:120px 0 28px}
  .bz-stats{grid-template-columns:repeat(2,1fr);gap:14px}
  .bz-scroll{display:none}
}
@media(max-width:640px){
  .bz-grid--2,.bz-grid--3,.bz-grid--4,.bz-tiles,.bz-steps,.bz-whys{grid-template-columns:1fr}
  .bz-deal{flex-direction:column;gap:12px}
  .bz-card{padding:24px}
  .bz-form{padding:22px}
  .bz-foot-top{grid-template-columns:1fr;gap:22px}
  .bz-h1 .l3{padding-left:.4em}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bz-anim .bz-rv{opacity:1;transform:none;transition:none}
  .bz-scroll i{animation:none}
  .btn:hover,.bz-card:hover,.bz-proj:hover,.bz-tile:hover{transform:none}
}