/* BH Agency v2.0 — offer.css: лише сторінка /smm-strategy (розбір ніші за $50, 24.10.2026, тест promo-50; offer-v3 25.10 — звіт скіла, зразок TriWork, ресерч, межі, хто робить).
   Мова сайту: темна тема за замовчуванням, сірий градієнт + лайм-сяйво (radial-gradient, без blur), металеві H2 (--metal), скло (--card-glass), hairline (--card-line).
   Рух лише transform/opacity: «лінія через $650» ($50 — статичний текст, fix-price 25.10), hover-підйом карток; bonus-v2 (24.10): сцена першого екрана — bonus.css,
   міні-графіка карток росте, коли картка з'являється (.in від pages.js [data-reveal]).
   prefers-reduced-motion — статичний фінальний стан. Світла тема — через токени + --of-lime. */
:root{--of-lime:#8fc10f;--of-glow:rgba(143,193,15,.2);--of-in1:#fff;--of-in2:#f3f2ec;--of-base:rgba(20,20,19,.1);--of-bar:rgba(20,20,19,.07);--of-tick:#fff}
:root[data-theme="dark"]{--of-lime:#c8ff3e;--of-glow:rgba(200,255,62,.2);--of-in1:#212327;--of-in2:#121315;--of-base:rgba(255,255,255,.1);--of-bar:rgba(255,255,255,.09);--of-tick:#111110}

/* ───────── перший екран (bonus-v2): заголовок + сцена-продукт (bonus.css) + рядок ціни; GEO-абзац — під першим екраном ───────── */
.of-hero{padding-block:clamp(16px,2.4vw,36px) clamp(36px,5vw,72px)}
.of-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);grid-template-areas:"hd v" "dt v";column-gap:clamp(28px,4.5vw,72px);align-items:center}
.of-hero__hd{grid-area:hd;align-self:end;min-width:0}
.of-hero__dt{grid-area:dt;align-self:start;min-width:0}
.of-hero__v{grid-area:v;min-width:0}
.of-hero .pg-eyebrow{color:var(--accent-text-sm)}
.of-hero .pg-eyebrow i{background:var(--accent-text)}
.of-h1.pg-title{margin-top:16px;font-weight:700;font-size:clamp(38px,4.3vw,62px);line-height:.98;letter-spacing:-.045em;text-wrap:balance;max-width:none;background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
.of-h1 span{padding-bottom:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.of-lime{color:var(--accent-text);-webkit-text-fill-color:var(--accent-text)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.of-metal{background:var(--metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}}
.of-pv{display:flex;align-items:flex-end;gap:16px;margin:clamp(18px,2.2vw,30px) 0 0;font-family:var(--f-tight);font-weight:700;letter-spacing:-.055em;line-height:.88;font-variant-numeric:tabular-nums}
.of-old{position:relative;align-self:center;font-size:clamp(24px,2.3vw,34px);font-weight:600;color:var(--muted);text-decoration:none}
.of-old::after{content:"";position:absolute;left:-5px;right:-5px;top:52%;height:3px;border-radius:2px;background:var(--of-lime);box-shadow:0 0 12px var(--of-lime);transform:rotate(-8deg);animation:of-strike .6s var(--ease-out-q) backwards .5s}
@keyframes of-strike{from{transform:rotate(-8deg) scaleX(0);transform-origin:left}}
/* fix-price 25.10: $50 — справжній текст, видимий з першого кадру (лічильник 650→50 давав порожнє місце 0,8 с і ривки під час завантаження) */
.of-new{display:inline-block;min-width:2.4em;font-size:clamp(68px,6.4vw,100px);padding-bottom:.05em;background:var(--metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.of-pv__u{margin-bottom:.5em;font:600 14.5px/1.35 var(--f-inter);letter-spacing:-.005em;color:var(--ink)}
.of-hero .of-geo{max-width:78ch;margin:clamp(28px,3.4vw,48px) 0 0;padding-left:16px;border-left:2px solid var(--of-lime);font:400 clamp(15px,1.15vw,16.5px)/1.6 var(--f-inter);letter-spacing:-.006em;color:var(--muted)}
.of-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.of-chips li{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 12px;border-radius:20px;background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi);font:600 13.5px/1 var(--f-inter);letter-spacing:-.005em;color:var(--ink)}
.of-chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--of-lime);box-shadow:0 0 8px var(--of-lime)}
.of-btns{margin-top:22px}
.of-hero__dt .of-chips{margin-top:18px}

/* ───────── секції ───────── */
.of-sec{padding-block:clamp(44px,6.5vw,92px)}
.of-h2{margin-top:12px;max-width:20ch;text-wrap:balance}
.of-lead.pg-sub{max-width:660px;margin-top:18px;font:400 clamp(16px,1.3vw,18px)/1.6 var(--f-inter);letter-spacing:-.008em}
.of-note{max-width:640px;margin:26px 0 0;padding-left:16px;border-left:2px solid var(--of-lime);font:500 15.5px/1.55 var(--f-inter);color:var(--muted)}

.of-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;list-style:none}
.of-group,.of-term{position:relative;isolation:isolate;overflow:hidden;padding:clamp(20px,2vw,26px);border-radius:22px;background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi);
  transition:translate .25s var(--ease-out-q),box-shadow .25s var(--ease-out-q)}
.of-group::before,.of-term::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--card-glow);background:radial-gradient(ellipse 280px 130px at 100% 0%,#C8FF3E,transparent 70%);transition:opacity .25s var(--ease-out-q)}
.of-group__n{display:block;margin-top:16px;font:700 13px/1 var(--f-tight);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--accent-text-sm)}
.of-group h3,.of-term h3{margin:8px 0 0;font:700 clamp(18px,1.5vw,21px)/1.2 var(--f-tight);letter-spacing:-.02em;color:var(--ink-strong)}
.of-group p,.of-term p{margin:10px 0 0;font:400 15.5px/1.55 var(--f-inter);letter-spacing:-.005em;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.of-group:hover,.of-term:hover{translate:0 -3px}.of-group:hover::before,.of-term:hover::before{opacity:calc(var(--card-glow) * 1.7)}}

/* offer-v3 · міні-графіка карток «Що всередині» (цифри зразка з showcase.stage), чипи замість абзаців */
.of-mv{display:flex;align-items:flex-end;gap:6px;height:64px;margin-bottom:6px;padding:12px;border-radius:14px;background:var(--of-bar);box-shadow:inset 0 0 0 1px var(--card-line)}
.of-mv i{font-style:normal}
.of-mv--five{align-items:center;gap:4px;padding:6px}
.of-mv--five i{flex:1;display:grid;place-items:center;height:100%;border-radius:10px;font:700 14px/1 var(--f-tight);color:var(--muted);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--card-line)}
.of-mv--five .is-on{background:var(--of-lime);color:#111110;box-shadow:0 6px 16px -8px var(--of-lime)}
.of-mv--markets{gap:10px;padding:10px 16px 0}
.of-mv--markets i{flex:1;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--of-lime),var(--of-glow));transform-origin:50% 100%}
.of-mv--markets i:last-child{background:repeating-linear-gradient(135deg,var(--of-lime) 0 5px,transparent 5px 9px);box-shadow:inset 0 0 0 1.5px var(--of-lime)}
.of-mv--rivals{align-items:center;gap:0;padding:0 14px}
.of-mv--rivals i{display:grid;place-items:center;width:38px;height:38px;margin-left:-6px;border-radius:50%;background:linear-gradient(135deg,#4b4e54,#25272b);box-shadow:0 0 0 3px var(--of-in1);font:700 14px/1 var(--f-tight);color:#fff}
:root:not([data-theme="dark"]) .of-mv--rivals i{background:linear-gradient(135deg,#ecebe5,#d0cec5);color:#141413}
.of-mv--rivals i:first-child{margin-left:0;background:var(--of-lime);color:#111110}
.of-mv--formats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-content:center;padding:7px 10px}
.of-mv--formats i{display:grid;place-items:center;height:21px;border-radius:6px;background:var(--of-bar);box-shadow:inset 0 0 0 1px var(--card-line);font:700 11px/1 var(--f-tight);letter-spacing:.02em;color:var(--muted)}
.of-mv--formats .is-l{background:var(--of-glow);box-shadow:inset 0 0 0 1px var(--of-lime);color:var(--accent-text-sm)}
.of-mv--script{align-items:center;gap:12px;padding:8px 12px}
.of-mv__f{flex:none;display:grid;place-items:center;width:78px;height:44px;border-radius:9px;background:linear-gradient(135deg,#3a3d42,#17181b);color:#fff}
.of-mv__f svg{width:22px;height:22px}
.of-mv__tl{position:relative;flex:1;height:6px;border-radius:3px;background:var(--card-line)}
.of-mv__tl b{position:absolute;left:0;top:0;bottom:0;width:22%;border-radius:3px;background:var(--of-lime);box-shadow:0 0 10px var(--of-lime);transform-origin:0 50%}
.of-mv--script em{font:700 13px/1 var(--f-tight);font-style:normal;color:var(--accent-text-sm);font-variant-numeric:tabular-nums}
.of-mv--plan{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;align-content:center;padding:8px 12px}
.of-mv--plan i{height:14px;border-radius:3px;background:var(--card-line)}
.of-mv--plan .is-m{background:var(--of-lime);box-shadow:0 0 8px -2px var(--of-lime)}
.of-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.of-tags li{padding:6px 10px;border-radius:10px;background:var(--of-bar);font:500 13px/1.25 var(--f-inter);letter-spacing:-.005em;color:var(--ink)}
.of-group.in .of-mv--markets i{animation:of-grow .8s cubic-bezier(.16,1,.3,1) backwards calc(var(--j) * 90ms + 150ms)}
.of-group.in .of-mv--formats i,.of-group.in .of-mv--rivals i{animation:of-pop .5s cubic-bezier(.34,1.56,.64,1) backwards calc(var(--j) * 50ms + 120ms)}
.of-group.in .of-mv__tl b{animation:of-growx 1s cubic-bezier(.16,1,.3,1) backwards .3s}
@keyframes of-grow{from{transform:scaleY(0)}}
@keyframes of-growx{from{transform:scaleX(0)}}
@keyframes of-pop{from{opacity:0;transform:scale(.4)}}

/* offer-v3 · зміст звіту: 10 розділів рядком */
.of-toc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px;padding:16px 18px;border-radius:20px;background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi)}
.of-toc__k{margin:0;font:700 12px/1.2 var(--f-manrope);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.of-toc__l{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.of-toc__l li{display:inline-flex;align-items:center;gap:7px;padding:7px 11px 7px 8px;border-radius:11px;background:var(--of-bar);font:500 13.5px/1.2 var(--f-inter);color:var(--ink)}
.of-toc__l span{font:700 12px/1 var(--f-tight);color:var(--accent-text-sm);font-variant-numeric:tabular-nums}

/* offer-v3 · «Як ми робимо ресерч»: 8 кроків + «що потрібно від вас» + «чому $650» */
.of-rs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;list-style:none;counter-reset:none}
.of-rs__i{position:relative;padding:clamp(18px,1.8vw,24px);border-radius:22px;background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi)}
.of-rs__n{display:inline-grid;place-items:center;min-width:38px;height:30px;padding:0 9px;border-radius:10px;background:var(--of-glow);font:700 14px/1 var(--f-tight);letter-spacing:-.01em;color:var(--accent-text-sm);font-variant-numeric:tabular-nums}
.of-rs__i h3{margin:14px 0 0;font:700 clamp(17px,1.4vw,19px)/1.2 var(--f-tight);letter-spacing:-.02em;color:var(--ink-strong)}
.of-rs__i p{margin:8px 0 0;font:400 14.5px/1.5 var(--f-inter);letter-spacing:-.005em;color:var(--muted)}
.of-rs2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.of-rs2__c{padding:clamp(20px,2.2vw,30px);border-radius:24px;background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi)}
.of-rs2__c--v{background:radial-gradient(ellipse 60% 120% at 100% 0%,var(--of-glow),transparent 70%),var(--card-glass)}
.of-rs2__c h3{margin:0;font:700 clamp(20px,1.8vw,24px)/1.15 var(--f-tight);letter-spacing:-.03em;color:var(--ink-strong)}
.of-rs2__c>p{margin:10px 0 0;font:400 15.5px/1.5 var(--f-inter);color:var(--muted)}
.of-rs2__c .of-rs2__n{margin-top:16px;padding-left:12px;border-left:2px solid var(--of-lime);font-weight:500;color:var(--ink)}
.of-chk{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.of-chk li{position:relative;padding-left:30px;font:500 15.5px/1.45 var(--f-inter);color:var(--ink)}
.of-chk li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:7px;background:var(--of-glow);box-shadow:inset 0 0 0 1px var(--of-lime)}
.of-chk li::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border:solid var(--accent-text-sm);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* offer-v3 · «Що не входить» */
.of-no{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;list-style:none}
.of-no__i{padding:clamp(18px,1.8vw,22px);border-radius:20px;background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line)}
.of-no__x{position:relative;display:block;width:30px;height:30px;border-radius:10px;background:var(--of-bar);box-shadow:inset 0 0 0 1px var(--card-line)}
.of-no__x::before,.of-no__x::after{content:"";position:absolute;left:8px;right:8px;top:14px;height:2px;border-radius:1px;background:var(--muted);transform:rotate(45deg)}
.of-no__x::after{transform:rotate(-45deg)}
.of-no__i h3{margin:14px 0 0;font:700 16.5px/1.25 var(--f-tight);letter-spacing:-.02em;color:var(--ink-strong)}
.of-no__i p{margin:8px 0 0;font:400 14px/1.5 var(--f-inter);color:var(--muted)}

/* offer-v3 · «Хто робить розбір»: три кейси команди */
.of-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:clamp(24px,3vw,36px) 0 0;padding:0;list-style:none}
.of-who__c{display:flex;flex-direction:column;gap:8px;height:100%;padding:clamp(20px,2vw,26px);border-radius:22px;background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi);color:var(--ink);text-decoration:none;
  transition:translate .25s var(--ease-out-q),box-shadow .25s var(--ease-out-q)}
.of-who__c b{font:700 clamp(28px,2.6vw,38px)/1 var(--f-tight);letter-spacing:-.045em;color:var(--accent-text);font-variant-numeric:tabular-nums}
.of-who__c span{font:400 14.5px/1.45 var(--f-inter);color:var(--muted)}
.of-who__c em{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;font:600 15px/1.2 var(--f-inter);font-style:normal;color:var(--ink-strong)}
.of-who__c em svg{width:16px;height:16px}
.of-who__c:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.of-who__c:hover{translate:0 -3px;box-shadow:inset 0 0 0 1px var(--of-lime),var(--card-hi)}}

/* bonus-v2 · «Чотири кроки»: картки з іконками, лінія між ними */
.of-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;list-style:none}
.of-steps::before{content:"";position:absolute;left:12%;right:12%;top:calc(clamp(20px,2vw,26px) + 27px);height:1.5px;background:linear-gradient(90deg,transparent,var(--of-lime) 12%,var(--of-lime) 88%,transparent);opacity:.55}
.of-step{position:relative;padding:clamp(20px,2vw,26px);border-radius:22px;background:var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi)}
.of-step__ic{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:radial-gradient(circle at 30% 20%,var(--of-glow),transparent 70%),var(--of-in2);box-shadow:inset 0 0 0 1px var(--card-line),0 10px 24px -14px rgba(0,0,0,.6);color:var(--accent-text)}
.of-step__ic svg{width:26px;height:26px}
.of-step__n{position:absolute;right:clamp(20px,2vw,26px);top:clamp(22px,2.2vw,28px);font:700 15px/1 var(--f-tight);letter-spacing:-.02em;color:var(--accent-text-sm);font-variant-numeric:tabular-nums}
.of-step h3{margin:18px 0 0;font:700 clamp(18px,1.5vw,21px)/1.2 var(--f-tight);letter-spacing:-.02em;color:var(--ink-strong)}
.of-step p{margin:8px 0 0;font:400 14.5px/1.5 var(--f-inter);letter-spacing:-.005em;color:var(--muted)}

/* bonus-v2 · умови: іконка + міні-графіка заліку $50 */
.of-ic{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:15px;background:var(--of-bar);box-shadow:inset 0 0 0 1px var(--card-line);color:var(--accent-text)}
.of-ic svg{width:24px;height:24px}
.of-cr{position:absolute;right:clamp(20px,2vw,26px);top:clamp(20px,2vw,26px);display:flex;align-items:stretch;width:min(52%,210px);height:46px;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--card-line)}
.of-cr i{flex:1;display:flex;align-items:center;padding:0 10px;background:var(--of-bar);font:500 11.5px/1.15 var(--f-inter);font-style:normal;color:var(--muted)}
.of-cr b{display:grid;place-items:center;padding:0 10px;background:var(--of-lime);font:700 15px/1 var(--f-tight);letter-spacing:-.03em;color:#111110}

/* ───────── зразок звіту (offer-v3): 4 скриншоти розділів TriWork — обкладинка на всю ширину, три розділи в рамках 10:9 (обріз знизу) ───────── */
.of-bar{display:flex;align-items:center;gap:14px;margin-top:clamp(26px,3vw,40px);height:44px;padding:0 16px;border-radius:16px;background:var(--of-bar);box-shadow:inset 0 0 0 1px var(--card-line)}
.of-bar__d{display:flex;gap:6px}
.of-bar__d i{width:10px;height:10px;border-radius:50%;background:var(--faint);opacity:.55}
.of-bar__u{display:flex;align-items:center;gap:8px;min-width:0;font:500 13.5px/1 var(--f-inter);color:var(--muted);white-space:nowrap;overflow:hidden}
.of-bar__u svg{flex:none;width:15px;height:15px}
.of-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:14px 0 0;padding:0;list-style:none}   /* 25.10: 5 кадрів — обкладинка на всю ширину + 2 × 2 */
.of-shot{min-width:0}
.of-shot:first-child{grid-column:1/-1}
.of-shot figure{display:flex;flex-direction:column;height:100%;margin:0}
.of-shot__img{position:relative;display:block;aspect-ratio:10/9;overflow:hidden;border-radius:20px;background:#08090A;box-shadow:inset 0 0 0 1px var(--card-line),0 24px 44px -34px rgba(0,0,0,.55);
  transition:translate .3s var(--ease-out-q),box-shadow .3s var(--ease-out-q)}
.of-shot__img picture,.of-shot__img img{display:block;width:100%;height:100%}
.of-shot__img img{object-fit:cover;object-position:50% 0}
.of-shot__img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(8,9,10,.9))}
.of-shot:first-child .of-shot__img{aspect-ratio:1120/686}
.of-shot:first-child .of-shot__img::after{display:none}
@media (hover:hover) and (pointer:fine){div.of-shot__img:hover{translate:none;box-shadow:inset 0 0 0 1px var(--card-line),0 24px 44px -34px rgba(0,0,0,.55)}}
.of-shot__img:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.of-shot__img:hover{translate:0 -4px;box-shadow:inset 0 0 0 1px var(--of-lime),0 30px 50px -32px rgba(0,0,0,.6)}}
.of-shot figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:baseline;padding:14px 4px 0}
.of-shot__n{font:700 13px/1 var(--f-tight);color:var(--accent-text-sm);font-variant-numeric:tabular-nums}
.of-shot figcaption b{font:700 17px/1.2 var(--f-tight);letter-spacing:-.02em;color:var(--ink-strong)}
.of-shot__d{grid-column:2;font:400 14.5px/1.5 var(--f-inter);color:var(--muted)}
.of-shot figcaption .pg-more{grid-column:2;justify-self:start;margin-top:4px;min-height:36px}
.of-full{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(24px,3vw,36px)}
.of-foot{margin:0;font:500 13.5px/1.45 var(--f-inter);color:var(--faint)}

/* ───────── умови, власник, що далі ───────── */
.of-terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;list-style:none}
.of-term h3{margin-top:0}
.of-owner{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:18px;padding:clamp(24px,3vw,40px);border-radius:26px;
  background:radial-gradient(ellipse 50% 160% at 0% 0%,var(--of-glow),transparent 70%),var(--card-glass);box-shadow:inset 0 0 0 1px var(--card-line),var(--card-hi)}
.of-owner__t{max-width:60ch}
.of-owner__h{margin:10px 0 0;font:700 clamp(24px,2.6vw,36px)/1.08 var(--f-tight);letter-spacing:-.035em;color:var(--ink-strong)}
.of-owner__p{margin:14px 0 0;font:400 16px/1.6 var(--f-inter);color:var(--muted)}
.of-owner__b{flex:none}
.of-sec .of-next{margin-top:clamp(26px,3vw,40px)}

@media (max-width:991.98px){
  .of-hero__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"hd" "v" "dt"}
  .of-hero__v{width:100%;max-width:640px;justify-self:center;margin-top:20px}
  .of-groups,.of-terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .of-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .of-steps::before{display:none}
  .of-shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .of-rs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .of-no{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767.98px){
  .of-groups,.of-terms{grid-template-columns:minmax(0,1fr);gap:12px}
  .of-shots{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:-20px;padding:6px 20px 14px;scroll-padding-inline:20px;scrollbar-width:none}
  .of-shots::-webkit-scrollbar{display:none}
  .of-shot{flex:0 0 86%;scroll-snap-align:start}
  .of-shot__img,.of-shot:first-child .of-shot__img{aspect-ratio:9/14}
  .of-shot:first-child .of-shot__img::after{display:block}
  .of-full .pg-btn{width:100%}
  .of-rs,.of-rs2,.of-no,.of-who{grid-template-columns:minmax(0,1fr);gap:10px}
  .of-toc{padding:14px}
  .of-no__i{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;padding:14px 16px}
  .of-no__x{grid-row:1/3}
  .of-no__i h3{margin:5px 0 0}
  .of-no__i p{margin-top:4px}
  .of-owner{flex-direction:column;align-items:flex-start;gap:20px}
  .of-owner__b .pg-btn{width:100%}
  .of-btns .pg-btn{width:100%}
  .of-hero__v{justify-self:stretch;margin:14px -6px 0;width:auto;max-width:none}
  .of-pv{margin-top:10px}
  .of-new{font-size:clamp(68px,20vw,84px)}
  .of-steps{grid-template-columns:minmax(0,1fr);gap:10px}
  .of-steps::before{display:block;left:calc(16px + 27px);right:auto;top:30px;bottom:30px;width:1.5px;height:auto;background:linear-gradient(180deg,transparent,var(--of-lime) 8%,var(--of-lime) 92%,transparent)}
  .of-step{display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:14px;padding:16px}
  .of-step__ic{grid-row:1/3}
  .of-step h3{margin:4px 0 0;padding-right:28px}
  .of-step p{margin-top:4px}
  .of-step__n{top:20px;right:16px}
  .of-cr{position:static;width:100%;margin:0 0 14px}
  .of-bar__u{font-size:12.5px}
}
@media (max-width:767.98px){
  .of-bar__d{display:none}
  .of-group{padding:16px 16px 18px}
  .of-tags li{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.of-old::after,.of-group.in .of-mv i,.of-group.in .of-mv b{animation:none}.of-group,.of-term,.of-shot__img,.of-who__c{transition:none}}

/* hubs-v2 25.10 — «Розбір для вашої ніші»: плитки з міні-сценами ніш. Тут лише розкладка плитки й місце під сцену (без зсуву до підвантаження);
   компоненти сцени (.hs-*) — hub.css, який hub.js вантажить після load, коли секція близько; сцени — /_data/hub-scenes.json. */
.of-nz__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:clamp(26px,3vw,40px) 0 0;padding:0;list-style:none}
@media (max-width:1099.98px){.of-nz__g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599.98px){
  .of-nz__g{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:4px}
  .of-nz__g::-webkit-scrollbar{display:none}
  .of-nz__i{scroll-snap-align:start}
}
.of-nz__a{position:relative;display:flex;flex-direction:column;height:100%;padding:6px 6px 0;border-radius:22px;background:var(--card);box-shadow:var(--hair);color:var(--ink);text-decoration:none;overflow:hidden;isolation:isolate;
  transition:translate .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.of-nz__a::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:calc(var(--card-glow) * .6);background:radial-gradient(ellipse 240px 110px at 100% 100%,#C8FF3E,transparent 70%);transition:opacity .35s}
.of-nz__s{position:relative;display:block;aspect-ratio:100/82;container-type:size;overflow:hidden;border-radius:17px;
  background:radial-gradient(ellipse 62% 56% at 50% 52%,rgba(200,255,62,.12),transparent 72%),radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1.3px) 0 0/16px 16px,#0e0f10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.of-nz__s .hs{left:50%}
.of-nz__n{display:block;padding:16px 56px 18px 14px;font:700 clamp(17px,1.35vw,19px)/1.2 var(--f-tight);letter-spacing:-.02em;color:var(--ink-strong);text-wrap:balance}
.of-nz__a>svg{position:absolute;right:14px;bottom:16px;width:32px;height:32px;padding:8px;border-radius:50%;background:var(--lime);color:#111110;transition:rotate .35s cubic-bezier(.16,1,.3,1)}
.of-nz__a:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .of-nz__a:hover{translate:0 -4px;box-shadow:var(--hair),0 0 0 1px color-mix(in srgb,var(--lime) 50%,transparent),0 20px 36px -26px rgba(0,0,0,.7)}
  .of-nz__a:hover::before{opacity:calc(var(--card-glow) * 1.6)}
  .of-nz__a:hover>svg{rotate:-45deg}
}
.of-nz__more{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin:22px 0 0;font:500 15px/1.4 var(--f-inter);color:var(--muted)}
.of-nz__more .pg-more{min-height:44px}
@media (prefers-reduced-motion:reduce){.of-nz__a,.of-nz__a>svg{transition:none}.of-nz__a:hover{translate:none}}
