/* =========================================================
   NOLAVU — B2 SYSTEM ROLLOUT: HOME
   ------------------------------------------------------------
   Promoted from the approved B2 direction. Three things only:

     1. Hero product presence — the B2 breakout composition, WITHOUT the
        three capability annotations. Those were removed on review because
        a capability label is not a product structure; leader lines must
        only ever point at a structure the photograph actually shows.
     2. Category identity — asymmetric but balanced. B2 left the Mini Fuse
        tile visibly larger than Diamond; here the two carry near-equal
        image area and the asymmetry comes from a 26px offset, the tab
        side and the crop instead.
     3. Product Gap / Idea as the first anchor of the development process.

   Copy is untouched. Contact is not involved.
   ========================================================= */

/* ---------- 1. HERO — product presence ---------- */
.b-hero{ position:relative; overflow:hidden; }
.b-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(
    180deg, rgba(22,21,15,.026) 0 1px, transparent 1px 7px);
  -webkit-mask-image:radial-gradient(96% 64% at 76% 44%, #000 0%, transparent 68%);
          mask-image:radial-gradient(96% 64% at 76% 44%, #000 0%, transparent 68%);
  opacity:.85;
}
.b-hero .hero-copy{ position:relative; z-index:2; }
.b-hero .hero-grid{ position:relative; z-index:1; }
.b-hero .hero-visual{ position:relative; aspect-ratio:5/4; }
.b-hero .hero-visual::after{ display:none; }  /* the accent corner mark is replaced by the contour */
.b-hero .ph-hero{
  position:absolute; top:0; right:-56px; bottom:0; left:0;
  aspect-ratio:auto; border:0; border-radius:0;
  -webkit-mask-image:linear-gradient(105deg, #000 62%, transparent 99%);
          mask-image:linear-gradient(105deg, #000 62%, transparent 99%);
}
.b-hero .ph-hero .demo-img{ object-position:58% 52%; }
/* a 1px product contour, offset outside the frame */
.b-hero .hero-visual::before{
  content:''; position:absolute; z-index:1;
  top:12px; right:calc(-56px + 26px); bottom:26px; left:-14px;
  border:1px solid var(--line-strong); pointer-events:none;
}

@media (max-width:1080px){
  .b-hero .ph-hero{ right:-24px; }
  .b-hero .hero-visual::before{ right:calc(-24px + 18px); }
}
@media (max-width:880px){
  .b-hero{ overflow:visible; }
  .b-hero::before{
    background-image:repeating-linear-gradient(
      180deg, rgba(22,21,15,.013) 0 1px, transparent 1px 9px);
    -webkit-mask-image:radial-gradient(120% 40% at 50% 62%, #000 0%, transparent 74%);
            mask-image:radial-gradient(120% 40% at 50% 62%, #000 0%, transparent 74%);
  }
  .b-hero .hero-visual{ order:4; margin-top:26px; aspect-ratio:auto; }
  .b-hero .hero-visual::before{ display:none; }
  .b-hero .ph-hero{
    position:relative; inset:auto; right:auto; left:auto; top:auto; bottom:auto;
    width:100%; aspect-ratio:4/3;
    -webkit-mask-image:none; mask-image:none;
  }
}

/* ---------- 2. CATEGORIES — asymmetric but balanced ---------- */
/* Both tiles now carry the same image area. The offset, the tab side and
   the crop create the asymmetry instead of a size difference. */
.b-categories{ background:var(--tint-diamond); }
.b-categories .product-grid{ align-items:start; }
.b-categories .product-card:nth-child(1) .ph-card{ aspect-ratio:5/4; }
.b-categories .product-card:nth-child(2) .ph-card{ aspect-ratio:5/4; }
.b-categories .product-card:nth-child(2){ margin-top:26px; background:rgba(233,239,241,.55); }
.b-categories .product-card:nth-child(2) .card-body{ padding-top:26px; }
.b-categories .ph-card{ border:0; background:var(--surface); box-shadow:0 1px 0 rgba(22,21,15,.04); }
/* the second tile's crop is framed from the opposite side, so the two
   images do not read as duplicates */
.b-categories .product-card:nth-child(1) .ph-card .demo-img{ object-position:44% 50%; }
.b-categories .product-card:nth-child(2) .ph-card .demo-img{ object-position:56% 50%; }

@media (max-width:880px){
  /* asymmetry must not survive as a staggered column on mobile */
  .b-categories .product-card:nth-child(2){ margin-top:0; }
  .b-categories .product-card:nth-child(2) .ph-card{ aspect-ratio:5/4; }
}

/* ---------- 3. PRODUCT GAP / IDEA — first anchor ---------- */
/* The first step of the process is where the buyer's own problem enters
   the page, so it carries the weight. Steps 02-05 recede. The accent rule
   is reserved for step 01. */
.b-process{ position:relative; }
.b-process .process-track{ position:relative; }
.b-process .process-track::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--line-strong);
}
.b-process .process-step{ padding-top:38px; }
.b-process .process-step::after{
  content:''; position:absolute; top:-1px; left:0;
  width:52px; height:2px; background:var(--accent);
}
.b-process .process-step:not(:first-child)::after{ background:var(--line-strong); }
.b-process .process-step:first-child .step-index{ color:var(--accent-deep); }
.b-process .process-step:first-child .step-name{ color:var(--ink); font-weight:600; }

@media (max-width:880px){
  .b-process .process-step{ padding-top:0; padding-bottom:26px; }
  .b-process .process-track::before{ display:none; }
}

/* ---------- 4. VALUE — lower commitment, stated ---------- */
.b-value .value-num{
  font-size:48px; font-weight:600; line-height:1;
  letter-spacing:-0.04em; color:var(--tint-diamond-2);
  transition:color .3s var(--ease);
}
.b-value .value-item:hover .value-num{ color:var(--accent); }
.b-value .value-title{ font-size:22px; margin-top:14px; }

@media (max-width:880px){
  .b-value .value-num{ font-size:38px; }
}

/* ---------- 5. hit area for the category links ---------- */
/* The two "View ..." links measured 43.3px. Visual weight is unchanged;
   only the tap region grows. */
.b-categories .card-body .link-arrow.b-hit{ position:relative; }