/* ============================================================
   TOVIAN — Закупки на 1688 (центральный hub направления)
   Layered on pv-styles.css + dostavka.css (scn, flow, faq, ctx, lead2)
   + avto.css (ltf). Unique here: two firm "killer feature" banners
   (seller-check + delivery), 4 service cards, compact guide cards.
   ============================================================ */

.h8-hero__media img{object-position:80% 14%;}
/* taller, more premium hero slab on the 1688 hub (overrides pv-styles clamp 320–560) */
.h8-hero__media{height:clamp(400px,52vw,680px);}
@media(max-width:600px){ .h8-hero__media{height:340px;} .h8-hero__media img{object-position:74% 10%;} }
@media(max-width:480px){ .h8-hero__media{height:300px;} }

/* hero: text fills the first screen, statue banner sits fully below the fold */
@media(min-width:901px){
  .hero__screen{min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box;}
  .hero__screen > .crumb{flex:0 0 auto;}
  .hero__lead{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
    padding-top:clamp(8px,2vh,28px);padding-bottom:clamp(24px,5vh,56px);}
}
.btn--big{min-height:62px;padding:0 12px 0 30px;font-size:clamp(15px,1.1vw,16.5px);gap:16px;}
.btn--big .btn__ic{width:42px;height:42px;}
.btn--big .btn__ic svg{width:17px;height:17px;}

/* ============================================================
   FOUR SERVICES — 2×2 equal cards
   ============================================================ */
.svc4{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);}
.svc4__card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(168,232,12,.24);border-radius:var(--r);background:linear-gradient(150deg,rgba(168,232,12,.06),transparent 58%),var(--card);
  padding:clamp(26px,2.6vw,38px);transition:border-color .45s ease,transform .45s var(--ease),box-shadow .45s ease;}
.svc4__card:hover{transform:translateY(-4px);border-color:rgba(168,232,12,.5);box-shadow:0 24px 60px rgba(0,0,0,.4);}
.svc4__card--lead{background:linear-gradient(150deg,rgba(168,232,12,.06),transparent 58%),var(--card);border-color:rgba(168,232,12,.24);}
.svc4__top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:clamp(16px,1.8vw,22px);}
.svc4__n{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.04em;color:var(--lime-ink);font-variant-numeric:tabular-nums;}
.svc4__tag{font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);border-radius:999px;padding:4px 9px;line-height:1;}
.svc4__t{margin:0 0 11px;font-family:'Space Grotesk',sans-serif;font-weight:500;text-transform:lowercase;letter-spacing:-.03em;
  font-size:clamp(22px,2vw,30px);line-height:1.02;color:var(--ink);}
.svc4__p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);text-wrap:pretty;}
.svc4__list{list-style:none;margin:clamp(16px,1.8vw,22px) 0 0;padding:0;display:grid;gap:8px;}
.svc4__list li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.45;color:var(--ink);letter-spacing:-.01em;text-wrap:pretty;}
.svc4__list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:rgba(168,232,12,.6);}
.svc4__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:clamp(20px,2.2vw,28px);}
.svc4__go{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;text-transform:lowercase;letter-spacing:-.02em;color:#0a0b0a;
  background:var(--lime);border-radius:999px;padding:11px 18px;transition:background .3s ease,transform .35s var(--ease);}
.svc4__go svg{width:14px;height:14px;}
.svc4__go:hover{background:var(--lime-2);transform:translateY(-2px);}
.svc4__sec{font-size:13px;}
@media(max-width:760px){.svc4{grid-template-columns:1fr;}}
@media(max-width:600px){
  .svc4__cta{flex-direction:column;align-items:stretch;}
  .svc4__go{justify-content:space-between;width:100%;padding:13px 20px;}
  .svc4__sec{text-align:center;}
}

/* ============================================================
   GUIDE — 6 compact, non-clickable article cards
   (links go live once the articles are published)
   ============================================================ */
.kb{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);}
.kb__card{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line-2);border-radius:16px;background:var(--card);
  padding:clamp(20px,2vw,26px);}
a.kb__card{text-decoration:none;cursor:pointer;transition:border-color .2s ease,transform .2s ease,background .2s ease;}
a.kb__card:hover{border-color:var(--lime-ink);transform:translateY(-2px);}
.kb__n{font-family:'Space Grotesk',sans-serif;font-size:11px;color:var(--lime-ink);font-variant-numeric:tabular-nums;}
.kb__t{font-family:'Space Grotesk',sans-serif;font-weight:500;text-transform:lowercase;letter-spacing:-.02em;font-size:clamp(15px,1.25vw,18px);line-height:1.15;color:var(--ink);}
.kb__d{font-size:12.5px;line-height:1.45;color:var(--muted);text-wrap:pretty;}
@media(max-width:820px){.kb{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.kb{grid-template-columns:1fr;}}

/* self-vs-tovian reuses .ltf from avto.css */

/* process timeline — hub-1688 semantic accent (reuses .flow from dostavka.css) */
.flow__timeline[data-process-style="hub-1688"] .flow__step:nth-child(2) .flow__dot{box-shadow:0 0 0 4px rgba(168,232,12,.1);}

/* audiences (.scn) — informational only on the hub: descriptions stay visible
   on mobile (no tap-to-open) and cards don't look clickable. */
@media(max-width:600px){
  .scn__card{cursor:default;}
  .scn__card .scn__p{grid-template-rows:1fr;opacity:1;margin-top:11px;}
}

/* MOBILE-FIRST КАНОН — волна 2 (02.07.2026): floor интерфейсных тегов/лейблов на мобиле */
@media(max-width:700px){
.svc4__tag{font-size:11px;}
}