/* ============================================================
   Rework — POLISH layer (loaded LAST, after rework-fix.css).
   Purely additive: removing this one <link> fully reverts.
   Goals: calmer vertical rhythm · balanced bento · richer depth
   & micro-interactions · legible dark-on-dark cards.
   ============================================================ */

/* ---------- 1. VERTICAL RHYTHM — less dead space ----------
   clean.css uses 148px (≈296px between sections) — cavernous on
   wide screens. Keep generous, make it intentional. */
section.block{padding:clamp(74px, 7.4vw, 108px) 0;}
.sec-head{margin-bottom:clamp(36px, 3.2vw, 52px);}
.cta-band{padding-top:clamp(96px, 10vw, 132px);}

/* ---------- 2. BENTO — balance the big hero card ----------
   Desktop: centre the copy block and vertically centre a larger
   phone so the empty mid-band disappears. */
@media(min-width:901px){
  .bcard.b-lg{justify-content:center;padding:40px 42px;}
  .bcard.b-lg .btop{margin-bottom:24px;}
  .bcard.b-lg h3,
  .bcard.b-lg p{max-width:54%;}
  .bcard.b-lg .phone-mini{width:158px;top:50%;right:34px;
    transform:translateY(-50%) rotate(6deg);}
  .bcard.b-lg:hover .phone-mini{transform:translateY(-50%) rotate(2deg) scale(1.03);}
}
/* Mobile/tablet: tighten the icon→label gap so short cards read
   full instead of hollow, and let rows hug their content. */
@media(max-width:900px){
  .bento{grid-auto-rows:auto;}
  .bento .bcard .btop{margin-bottom:16px;}
}

/* ---------- 3. DEPTH — dark cards get a real lift on hover ---------- */
.step,.city,.cat{
  transition:transform .26s var(--ease), border-color .25s, background .25s, box-shadow .3s;
}
.step:hover{box-shadow:0 28px 60px -34px rgba(0,0,0,.85);}
.city:hover{transform:translateY(-3px);box-shadow:0 20px 44px -30px rgba(0,0,0,.8);}
.fcard:hover{box-shadow:0 36px 72px -40px rgba(0,0,0,.85);}
.bcard:hover{box-shadow:0 30px 64px -36px rgba(0,0,0,.8);}
/* light-world cards already carry their own soft shadow — don't double up */
.light .bcard:hover,.light .story:hover{box-shadow:0 28px 60px -30px rgba(20,20,12,.30);}

/* primary button: resting depth + crisper hover glow */
.btn-primary{box-shadow:0 10px 28px -16px rgba(var(--glow-1),.45);}
.btn-primary:hover{box-shadow:0 18px 46px -12px rgba(var(--glow-1),.6);}

/* ---------- 4. BUSINESS BENEFITS — fix dark-on-dark legibility ----------
   Original cards sit at rgba(12,12,16,.6) inside a dark spotlight and
   nearly vanish. Lift the surface + body text. */
.benefit{background:rgba(255,255,255,.05);border-color:var(--line-2);
  transition:background .22s, border-color .22s, transform .26s var(--ease);}
.benefit:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);transform:translateY(-2px);}
.benefit h4{font-size:17px;}
.benefit p{color:var(--soft);}

/* ---------- 5. category chip — warmer hover accent ---------- */
.cat:hover .d{box-shadow:0 0 0 4px rgba(var(--glow-1),.2);}

/* ---------- 6. counters — keep tails clear, add weight ---------- */
.trust .stat b{padding-bottom:.08em;}

/* ---------- 7. footer contact — quieter, evenly spaced ---------- */
.foot-bottom .contact span{position:relative;}

/* ---------- 8. HEADINGS — kill mid-word breaks ----------
   #why sec-head is pinned to an inline max-width:24ch (≈249px). A 60px
   headline can't fit "работает" (~264px) on one line, so overflow-wrap:
   break-word shatters the word into an orphan "т". Give it a real measure
   and forbid mid-word breaks on every display heading. */
#why .sec-head{max-width:min(92vw, 560px) !important;}
.sec-head h2,.act-copy h1,.spot h2,.dl h2,.cta-title{
  overflow-wrap:normal;word-break:keep-all;
}