/* ============================================================
   A/B hero — спільний каркас, кольори з теми (--ab-*)
   ============================================================ */
.section--abhero{
  position:relative; height:100svh; min-height:34rem;
  display:flex; align-items:stretch; overflow:hidden;
  padding:var(--header-h) 0 0;
  background:var(--ab-bg); color:var(--ab-fg);
  --fg:var(--ab-fg); --fg-muted:var(--ab-fg2); --fg-faint:var(--ab-fg3);
  --accent:var(--ab-acc); --accent-contrast:var(--ab-acc-tx); --hairline:var(--ab-brd);
}
.abh__field{position:absolute;inset:0;z-index:0;pointer-events:none}
.abh__grid{position:absolute;inset:0;
  background-image:linear-gradient(to right,var(--ab-grid) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--ab-grid) 1px,transparent 1px);
  background-size:clamp(46px,4.6vw,74px) clamp(46px,4.6vw,74px);
  -webkit-mask-image:radial-gradient(ellipse 82% 72% at 42% 46%,#000 18%,transparent 80%);
  mask-image:radial-gradient(ellipse 82% 72% at 42% 46%,#000 18%,transparent 80%)}
.abh__glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;
  width:38vw;height:38vw;left:-6vw;top:-8vw;
  background:radial-gradient(circle,var(--ab-soft),transparent 68%)}

.abh__wrap{position:relative;z-index:3;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  grid-template-rows:minmax(0,1fr);
  gap:clamp(1.25rem,.5rem + 3vw,3.5rem);align-items:stretch;width:100%;height:100%}

.abh__copy{align-self:stretch;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(.7rem,.3rem + 1.5svh,1.5rem);
  padding-block:clamp(1.5rem,.5rem + 3.5svh,4rem) clamp(4.5rem,3rem + 5svh,7rem);min-height:0}
.abh__eyebrow{font-family:var(--font-mono);font-size:clamp(.66rem,.6rem + .2vw,.76rem);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ab-fg3);
  display:flex;align-items:center;gap:.8rem;margin:0}
.abh__eyebrow::before{content:'';width:2.2rem;height:1px;background:currentColor;opacity:.55;flex:none}
.abh__title{font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.05rem,min(3.6vw + .55rem, 8svh),4.7rem);
  line-height:1.02;letter-spacing:-.042em;color:var(--ab-fg);margin:0;max-width:14ch}
.abh__title em{font-style:normal;color:var(--ab-acc)}
.abh__lead{font-size:clamp(.95rem,min(.55vw + .8rem, 2.3svh),1.24rem);line-height:1.55;
  color:var(--ab-fg2);max-width:46ch;margin:0}
.abh__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:clamp(.5rem,.2rem + 1.4svh,1.4rem) 0 0}
.abh__b1{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;
  font-size:clamp(.94rem,.88rem + .25vw,1.02rem);padding:.92em 1.7em;border-radius:99px;
  background:var(--ab-acc);color:var(--ab-acc-tx);border:0;cursor:pointer;
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 62%);
  transition:transform var(--d-base) var(--ease-spring),box-shadow var(--d-base) var(--ease-out)}
.abh__b1:hover{transform:translateY(-2px);box-shadow:0 14px 34px - 12px var(--ab-acc)}
.abh__b2{display:inline-flex;align-items:center;font-weight:600;
  font-size:clamp(.94rem,.88rem + .25vw,1.02rem);padding:.92em 1.6em;border-radius:99px;
  color:var(--ab-fg);border:1px solid var(--ab-brd);
  transition:background var(--d-base) var(--ease-out)}
.abh__b2:hover{background:color-mix(in srgb,var(--ab-fg) 8%,transparent)}
.abh__kpis{display:flex;flex-wrap:wrap;column-gap:clamp(1.5rem,.8rem + 2vw,3rem);row-gap:.6rem;
  margin:clamp(.4rem,.2rem + 1svh,1rem) 0 0;padding:0;list-style:none}
.abh__kpis li{display:flex;align-items:baseline;gap:.4rem}
.abh__kpis b{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.4rem,1rem + 1.1vw,2rem);color:var(--ab-fg);font-variant-numeric:tabular-nums;line-height:1}
.abh__kpis li:first-child b{color:var(--ab-acc)}
.abh__kpis span{font-size:clamp(.76rem,.72rem + .15vw,.86rem);color:var(--ab-fg3);white-space:nowrap}

.abh__portrait{position:relative;align-self:stretch;justify-self:end;
  height:auto;min-height:0;max-height:100%;width:100%;min-width:0;
  margin-right:calc(var(--gutter) * -.55)}
.abh__portrait img{width:100%;height:100%;max-height:100%;object-fit:contain;
  object-position:bottom right;filter:drop-shadow(-26px 18px 46px rgba(0,0,0,.42))}

/* стрічка модулів */
.abh__ticker{position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;gap:clamp(.9rem,.5rem + 1.3vw,2rem);
  padding:.85rem var(--gutter);border-top:1px solid var(--ab-brd);
  background:color-mix(in srgb,var(--ab-fg) 5%,transparent);
  font-family:var(--font-mono);font-size:clamp(.62rem,.56rem + .2vw,.74rem);
  letter-spacing:.12em;color:var(--ab-fg3);overflow:hidden;white-space:nowrap}
.abh__ticker i{width:6px;height:6px;border-radius:50%;background:var(--ab-acc);flex:none}
.abh__ticker s{text-decoration:none;color:var(--ab-fg);opacity:.5}

/* ---------- елементи цифровізації ---------- */
.viz{position:absolute;z-index:2;pointer-events:none}
.viz-card{border-radius:14px;padding:.8rem 1rem;min-width:9.5rem;
  background:color-mix(in srgb,var(--ab-fg) 8%,transparent);
  border:1px solid var(--ab-brd);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:.3rem}
.viz-card .t{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;color:var(--ab-fg3)}
.viz-card .v{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--ab-fg);letter-spacing:-.02em}
.viz-card .v i{font-style:normal;color:var(--ab-acc);font-size:.8rem;margin-left:.25rem}
.viz-card .bar{height:4px;border-radius:99px;background:color-mix(in srgb,var(--ab-fg) 14%,transparent);overflow:hidden}
.viz-card .bar b{display:block;height:100%;background:var(--ab-acc);border-radius:99px}

.viz-funnel{display:flex;flex-direction:column;gap:.42rem;width:clamp(11rem,17vw,15.5rem)}
.viz-funnel span{height:1.75rem;border-radius:6px;display:flex;align-items:center;
  justify-content:space-between;padding:0 .7rem;
  font-family:var(--font-mono);font-size:.62rem;color:var(--ab-acc-tx);
  background:linear-gradient(90deg,var(--ab-acc),color-mix(in srgb,var(--ab-acc) 24%,transparent))}
.viz-funnel span:nth-child(2){width:83%} .viz-funnel span:nth-child(3){width:64%}
.viz-funnel span:nth-child(4){width:45%}

.viz-bars{display:flex;align-items:flex-end;gap:.4rem;height:clamp(3.5rem,7vw,6rem)}
.viz-bars i{width:clamp(.55rem,1vw,1rem);border-radius:3px 3px 0 0;
  background:color-mix(in srgb,var(--ab-fg) 20%,transparent)}
.viz-bars i.on{background:var(--ab-acc)}

.viz-node{width:14px;height:14px;border-radius:50%;background:var(--ab-acc);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--ab-acc) 20%,transparent)}
.viz-node.sm{width:9px;height:9px;background:color-mix(in srgb,var(--ab-fg) 34%,transparent);box-shadow:none}

.viz-ring{width:clamp(4.5rem,8vw,7rem);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--ab-acc) var(--p,68%),color-mix(in srgb,var(--ab-fg) 12%,transparent) 0)}
.viz-ring::after{content:attr(data-v);width:72%;height:72%;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ab-fg)}
[data-ab="paper"] .viz-ring::after,[data-ab="sand"] .viz-ring::after,
[data-ab="studio"] .viz-ring::after{background:rgba(255,255,255,.72)}

@media (max-width:1080px){
  .section--abhero{height:auto;min-height:100svh;align-items:center;
    padding-block:clamp(6.5rem,5rem + 6vw,8.5rem) 0}
  .abh__wrap{grid-template-columns:1fr;grid-template-rows:auto;align-items:start}
  .abh__copy{padding-bottom:1.5rem}
  .abh__title{max-width:18ch}
  .abh__portrait{height:auto;max-height:none;width:100%;max-width:24rem;
    margin:1.5rem auto 4rem;aspect-ratio:1200/1914}
  .viz{display:none}
}
@media (max-width:640px){
  .abh__portrait{max-width:19rem}
  .abh__ticker{gap:.7rem}
}

/* --- A/B заголовків: ?h=2 --- */
[data-hv="2"] { display: none; }
[data-h="2"] [data-hv="1"] { display: none; }
[data-h="2"] [data-hv="2"] { display: inline; }