/* ============================================================
   sorrybutno — INNER-PAGE CONTENT bridge (light redesign)
   Restyles the legacy the_content() block vocabulary
   (.lead .trust .feature-grid .tiers .steps .faq .checklist
    .callout .cta-band .tags .btn--*) to the sbn-* system, so every
   inner page (60+ services, KB, «Цены», «Контакты», hubs) matches the
   homepage. Values sourced 1:1 from sbn-ui.css + sbn-tokens.css.

   Loads AFTER main.css + sbn-ui.css. Page CONTENT HTML/schema is left
   byte-for-byte untouched → zero SEO / FAQ-schema / link risk.

   Scope: .sbn-prose — the page body wrapper
   (0,3,0), matching old main.css depth so it wins by later load order.
   Template-rendered blocks (.page-hero, .related) are scoped directly.
   Motion mirrors sbn-ui: ease-out curves, press-scale, hover handoff,
   reduced-motion honored (inherited from sbn-ui's global block).
   ============================================================ */

/* ---------------------------------------------------------------
   PAGE HERO — flatten old lime-glow/grid hero to the light panel
   (sbn-inner-hero__panel: recessed sbn-bg-2, r28). Only applies if
   live page.php still emits .page-hero; harmless otherwise.
   --------------------------------------------------------------- */
.page-hero{
  background:transparent;border-bottom:0;overflow:visible;
  padding-block:clamp(20px,3vw,32px) 0}
.page-hero__fx{display:none}                 /* kill dark radial glow + grid mask */
.page-hero>.container{
  background:var(--sbn-bg-2);border-radius:var(--sbn-r-lg);
  padding:clamp(32px,6vw,72px);margin-top:14px}
.page-hero .crumbs,.page-hero__eyebrow{margin-bottom:0}
.page-hero__eyebrow{margin-top:14px}
.page-hero__title{
  font-family:var(--sbn-font-display);font-weight:600;letter-spacing:var(--sbn-tracking-tight);
  color:var(--sbn-ink);font-size:clamp(2.1rem,5vw,4rem);line-height:var(--sbn-leading-tight);
  max-width:18ch;margin:16px 0 0}
.page-hero__lead{
  margin-top:20px;max-width:56ch;font-size:var(--sbn-fz-lead);color:var(--sbn-body);line-height:1.55}
.page-hero__actions{margin-top:30px;gap:14px}
/* 3D pillar object (if present) floats on the flat panel, no boxed stage */
.page-hero__scene .scene__obj{filter:drop-shadow(0 24px 30px rgba(10,10,12,.16))}

/* ---------------------------------------------------------------
   BASE PROSE TYPOGRAPHY
   --------------------------------------------------------------- */
.sbn-prose{
  color:var(--sbn-body);font-family:var(--sbn-font-body);
  font-size:var(--sbn-fz-body);line-height:var(--sbn-leading-body)}
.sbn-prose>*+*{margin-top:1.25em}
.sbn-prose h2{
  font-family:var(--sbn-font-display);font-weight:600;color:var(--sbn-ink);
  letter-spacing:-.025em;line-height:1.12;font-size:clamp(1.7rem,3.4vw,2.6rem);
  margin-top:1.7em;margin-bottom:.5em}
.sbn-prose h3{
  font-family:var(--sbn-font-display);font-weight:600;color:var(--sbn-ink);
  letter-spacing:-.02em;font-size:clamp(1.2rem,2vw,1.5rem);margin-top:1.4em;margin-bottom:.35em}
.sbn-prose strong{color:var(--sbn-ink);font-weight:600}
.sbn-prose a:not(.btn):not(.sbn-btn){
  color:var(--sbn-ink);text-decoration:underline;text-decoration-color:var(--sbn-lime);
  text-decoration-thickness:2px;text-underline-offset:3px;
  transition:color var(--sbn-dur-ui) var(--sbn-ease-out)}
@media(hover:hover){.sbn-prose a:not(.btn):not(.sbn-btn):hover{color:#000}}
.sbn-prose blockquote{
  border:0;margin:1.6em 0;padding:0;font-family:var(--sbn-font-display);font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.25;letter-spacing:-.025em;color:var(--sbn-ink)}
.sbn-prose blockquote::before{
  content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--sbn-lime);margin-bottom:18px}
.sbn-prose code{
  background:#EDEDEA;color:#2a2a26;padding:.12em .4em;border-radius:6px;font-size:.9em}
.sbn-prose hr{border:0;border-top:1px solid var(--sbn-line);margin:2.4em 0}

/* intro lead line */
.sbn-prose .lead{
  font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.5;color:var(--sbn-ink);font-weight:500;max-width:64ch}

/* ---------------------------------------------------------------
   TRUST badges  (40+ · 8 лет · 2×)
   --------------------------------------------------------------- */
.sbn-prose .trust{
  list-style:none;padding:0;margin:1.7em 0;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.sbn-prose .trust{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.sbn-prose .trust{grid-template-columns:repeat(4,1fr)}}
.sbn-prose .trust__item{
  display:flex;flex-direction:column;gap:8px;padding:22px 24px;background:var(--sbn-card);
  border:1px solid var(--sbn-line);border-radius:var(--sbn-r)}
.sbn-prose .trust__v{
  font-family:var(--sbn-font-display);font-weight:600;font-size:2rem;letter-spacing:-.03em;
  color:var(--sbn-ink);line-height:1;display:flex;align-items:baseline;gap:.12em}
.sbn-prose .trust__v em{
  font-style:normal;font-size:.52em;font-weight:600;color:var(--sbn-muted);
  background:none;padding:0;border-radius:0}   /* kill old lime box */
.sbn-prose .trust__l{color:var(--sbn-muted);font-size:.95rem;line-height:1.4}

/* ---------------------------------------------------------------
   FEATURE grid  (numbered cards)
   --------------------------------------------------------------- */
.sbn-prose .feature-grid{
  padding:0;margin:1.6em 0;display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:560px){.sbn-prose .feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.sbn-prose .feature-grid{grid-template-columns:repeat(3,1fr)}}
.sbn-prose .feature{
  background:var(--sbn-card);border:1px solid var(--sbn-line);border-radius:var(--sbn-r);padding:30px;
  transition:transform var(--sbn-dur-ui) var(--sbn-ease-out),box-shadow var(--sbn-dur-ui) var(--sbn-ease-out),border-color var(--sbn-dur-ui) var(--sbn-ease-out)}
@media(hover:hover){.sbn-prose .feature:hover{
  transform:translateY(-4px);box-shadow:var(--sbn-shadow-card);border-color:transparent}}
.sbn-prose .feature__num{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;
  background:var(--sbn-lime-soft);color:var(--sbn-ink);border-radius:10px;
  font-family:var(--sbn-font-display);font-weight:600;font-size:.9rem;margin-bottom:16px}
.sbn-prose .feature__title{
  font-family:var(--sbn-font-display);font-weight:600;font-size:1.22rem;color:var(--sbn-ink);
  letter-spacing:-.02em;line-height:1.18;margin:0 0 .45rem}
.sbn-prose .feature p{color:var(--sbn-body);font-size:1rem;line-height:1.5;margin:0}
.sbn-prose .feature a{
  color:var(--sbn-ink);text-decoration:underline;text-decoration-color:var(--sbn-lime);
  text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------------------------------------------------------------
   PRICING tiers
   --------------------------------------------------------------- */
.sbn-prose .tiers{
  list-style:none;padding:0;margin:1.7em 0;display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:760px){.sbn-prose .tiers{grid-template-columns:repeat(3,1fr)}}
.sbn-prose .tier{
  display:flex;flex-direction:column;background:var(--sbn-card);border:1px solid var(--sbn-line);
  border-radius:var(--sbn-r);padding:30px}
.sbn-prose .tier--featured{
  border-color:var(--sbn-ink);box-shadow:0 0 0 1px var(--sbn-ink)}
.sbn-prose .tier__name{
  font-family:var(--sbn-font-display);font-weight:600;font-size:1.2rem;color:var(--sbn-ink);letter-spacing:-.02em}
.sbn-prose .tier__tagline{color:var(--sbn-muted);font-size:.95rem;margin-top:.25rem}
.sbn-prose .tier__price{
  font-family:var(--sbn-font-display);font-weight:600;font-size:1.9rem;color:var(--sbn-ink);
  letter-spacing:-.03em;margin:1rem 0 .2rem;white-space:nowrap}
.sbn-prose .tier__price small{
  display:block;font-family:var(--sbn-font-body);font-weight:500;font-size:.8rem;color:var(--sbn-muted);white-space:normal}
.sbn-prose .tier__list{
  list-style:none;padding:0;margin:1.1rem 0 1.5rem;display:grid;gap:12px}
.sbn-prose .tier__list li{position:relative;padding-left:26px;font-size:.98rem;color:var(--sbn-body);line-height:1.4}
.sbn-prose .tier__list li::before{
  content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:2px;background:var(--sbn-lime)}
.sbn-prose .tier .btn{margin-top:auto}

/* ---------------------------------------------------------------
   PROCESS steps  (ol.steps > li > .steps__t + p)
   --------------------------------------------------------------- */
.sbn-prose ol.steps,
.sbn-prose .steps{
  counter-reset:s;list-style:none;padding:0;margin:1.7em 0;background:none;border:0;
  display:grid;gap:16px}
@media(min-width:760px){.sbn-prose .steps{grid-template-columns:repeat(2,1fr)}}
.sbn-prose .steps li{
  counter-increment:s;list-style:none;margin:0;background:var(--sbn-card);border:1px solid var(--sbn-line);
  border-radius:var(--sbn-r);padding:26px 28px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start}
.sbn-prose .steps li::before{
  content:counter(s);grid-row:1 / span 2;align-self:start;
  font-family:var(--sbn-font-display);font-weight:600;font-size:1.05rem;color:var(--sbn-lime-ink);
  background:var(--sbn-lime);width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;margin:0;padding:0}
.sbn-prose .steps__t{
  display:block;font-family:var(--sbn-font-display);font-weight:600;font-size:1.15rem;color:var(--sbn-ink);letter-spacing:-.02em}
.sbn-prose .steps li p{margin:0;color:var(--sbn-muted);font-size:.98rem;line-height:1.5;grid-column:2}

/* ---------------------------------------------------------------
   CHECKLIST  (что входит / преимущества)
   --------------------------------------------------------------- */
.sbn-prose .checklist{
  list-style:none;padding:0;margin:1.4em 0;display:grid;gap:14px}
@media(min-width:560px){.sbn-prose .checklist{grid-template-columns:1fr 1fr;gap:14px 28px}}
.sbn-prose .checklist li{
  position:relative;padding-left:32px;margin:0;color:var(--sbn-body);line-height:1.5}
.sbn-prose .checklist li::before{
  content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;background:var(--sbn-lime-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111214' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}

/* ---------------------------------------------------------------
   FAQ accordion  (native details/summary — schema preserved)
   Mirrors sbn-ui .sbn-prose .faq exactly.
   --------------------------------------------------------------- */
.sbn-prose .faq{
  border:0;display:grid;gap:12px;margin:1.6em 0}
.sbn-prose .faq__item{
  border:1px solid var(--sbn-line);border-radius:var(--sbn-r);background:var(--sbn-card);padding:0 26px;overflow:hidden}
.sbn-prose .faq__q{
  list-style:none;cursor:pointer;padding:22px 0;font-family:var(--sbn-font-display);font-weight:500;
  font-size:1.08rem;letter-spacing:-.02em;color:var(--sbn-ink);
  display:flex;justify-content:space-between;align-items:center;gap:20px}
.sbn-prose .faq__q::-webkit-details-marker{display:none}
.sbn-prose .faq__q::after{
  content:"";width:20px;height:20px;flex:0 0 auto;background:none;position:static;transform:none;
  border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111214' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:contain;
  transition:transform var(--sbn-dur-ui) var(--sbn-ease-out)}
.sbn-prose .faq__item[open] .faq__q::after{content:"";transform:rotate(45deg)}
.sbn-prose .faq__a{padding:0 0 22px;color:var(--sbn-body);line-height:1.6}
.sbn-prose .faq__a>*+*{margin-top:.8em}
.sbn-prose .faq__a p{margin:0}

/* ---------------------------------------------------------------
   CALLOUT / note
   --------------------------------------------------------------- */
.sbn-prose .callout{
  background:var(--sbn-lime-soft);border:0;border-radius:var(--sbn-r-sm);
  padding:20px 24px;color:var(--sbn-ink);font-size:1.04rem;line-height:1.55}
.sbn-prose .callout strong{color:var(--sbn-ink)}

/* ---------------------------------------------------------------
   MID-CONTENT CTA band — LIGHT (per client), mirrors .sbn-cta
   --------------------------------------------------------------- */
.sbn-prose .cta-band{
  position:relative;overflow:hidden;text-align:center;color:var(--sbn-ink);
  background:linear-gradient(180deg,#F0F0EE,var(--sbn-bg));
  border-radius:var(--sbn-r-lg);padding:clamp(48px,7vw,96px) clamp(20px,4vw,40px);margin:2em 0}
.sbn-prose .cta-band__glow{
  position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:520px;height:320px;z-index:0;
  background:radial-gradient(ellipse,rgba(212,255,0,.22),transparent 66%)}
.sbn-prose .cta-band>*{position:relative;z-index:1}
.sbn-prose .cta-band h2,
.sbn-prose .cta-band h3{
  color:var(--sbn-ink);margin:0 0 .5em;font-size:clamp(1.9rem,4.6vw,3.2rem);letter-spacing:-.025em}
.sbn-prose .cta-band p{
  color:var(--sbn-body);max-width:52ch;margin:0 auto 1.6rem;font-size:var(--sbn-fz-lead)}

/* ---------------------------------------------------------------
   TAG pills
   --------------------------------------------------------------- */
.sbn-prose .tags{
  list-style:none;padding:0;margin:1.4em 0;display:flex;flex-wrap:wrap;gap:8px}
.sbn-prose .tags li{
  margin:0;font-size:.86rem;color:var(--sbn-body);padding:6px 14px;background:#F0F0EC;
  border:0;border-radius:var(--sbn-r-pill)}

/* ---------------------------------------------------------------
   BUTTONS — map legacy .btn--* to the sbn-btn look
   (Emil: press-scale, ease-out, hover shadow). Homepage uses .sbn-btn,
   so restyling .btn is scoped to content and never touches it.
   --------------------------------------------------------------- */
/* Scope = every inner-page context: hero actions, prose content, cta band,
   related section (inside .section--paper). Homepage uses .sbn-btn, untouched. */
.page-hero .btn,.sbn-prose .btn,.cta-band .btn{
  --h:56px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:var(--h);padding:0 26px;border-radius:var(--sbn-r);border:1px solid transparent;cursor:pointer;
  font-family:var(--sbn-font-body);font-weight:600;font-size:1rem;line-height:1;text-decoration:none;
  transition:transform var(--sbn-dur-press) var(--sbn-ease-out),
             background var(--sbn-dur-press) var(--sbn-ease-out),
             box-shadow var(--sbn-dur-ui) var(--sbn-ease-out),
             border-color var(--sbn-dur-ui) var(--sbn-ease-out);will-change:transform}
.page-hero .btn:active,.sbn-prose .btn:active,.cta-band .btn:active{transform:scale(.97)}
.page-hero .btn--lg,.sbn-prose .btn--lg,.cta-band .btn--lg{--h:60px;padding:0 30px;font-size:1.05rem}
.page-hero .btn--lime,.sbn-prose .btn--lime,.cta-band .btn--lime{background:var(--sbn-lime);color:var(--sbn-lime-ink);border-color:transparent}
.page-hero .btn--dark,.sbn-prose .btn--dark,.cta-band .btn--dark{background:var(--sbn-ink);color:#fff;border-color:transparent}
.page-hero .btn--ghost,.sbn-prose .btn--ghost,.cta-band .btn--ghost{background:var(--sbn-card);color:var(--sbn-ink);border-color:var(--sbn-line)}
@media(hover:hover){
  .page-hero .btn--lime:hover,.sbn-prose .btn--lime:hover,.cta-band .btn--lime:hover{box-shadow:var(--sbn-shadow-lime)}
  .page-hero .btn--dark:hover,.sbn-prose .btn--dark:hover,.cta-band .btn--dark:hover{box-shadow:var(--sbn-shadow-card)}
  .page-hero .btn--ghost:hover,.sbn-prose .btn--ghost:hover,.cta-band .btn--ghost:hover{border-color:#cfcfcf;background:#fafafa}
}

/* ---------------------------------------------------------------
   RELATED services / KB grid (template-rendered, outside prose)
   --------------------------------------------------------------- */
.related__grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.related__grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.related__grid{grid-template-columns:repeat(3,1fr)}}
.related__card{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px;background:var(--sbn-card);border:1px solid var(--sbn-line);border-radius:var(--sbn-r);
  font-family:var(--sbn-font-display);font-weight:600;color:var(--sbn-ink);letter-spacing:-.01em;
  transition:transform var(--sbn-dur-ui) var(--sbn-ease-out),box-shadow var(--sbn-dur-ui) var(--sbn-ease-out),border-color var(--sbn-dur-ui) var(--sbn-ease-out)}
@media(hover:hover){.related__card:hover{transform:translateY(-4px);box-shadow:var(--sbn-shadow-card);border-color:transparent}}
.related__arrow{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--sbn-line);
  display:flex;align-items:center;justify-content:center;color:var(--sbn-ink);
  transition:background var(--sbn-dur-ui) var(--sbn-ease-out),border-color var(--sbn-dur-ui) var(--sbn-ease-out)}
@media(hover:hover){.related__card:hover .related__arrow{background:var(--sbn-lime);border-color:var(--sbn-lime)}}

/* ============================================================
   v2 (2026-08) — full-width inner body + 2-col graphic service hero
   + lighter display font (Onest) with Unbounded kept on the wordmark
   and numeric accents. the_content() HTML/schema untouched.
   ============================================================ */

/* Display font switched to Onest via --sbn-font-display (sbn-tokens);
   re-assert Unbounded on the brand mark + numeric accents for character. */
.sbn-logo,.sbn-logo .m,.sbn-stat .n,.sbn-project .metric,
.sbn-prose .trust__v,.sbn-prose .tier__price{font-family:'Unbounded',system-ui,sans-serif}

/* lighter heading weight (Onest Medium) — "size, not weight", closer to the reference */
h1,h2,h3,.sbn-prose h2,.sbn-prose h3,.sbn-hero h1,.sbn-inner-hero h1,.sbn-cta h2{font-weight:500}

/* FULL-WIDTH BODY — free content from the 820px left-pinned column.
   Running text keeps a readable measure; structural grids span the container. */
/* content body: reduced bottom padding — the #contact block no longer adds its own top
   margin, so a single section rhythm (not double) sits between content and the form */
.sbn-lightpage .sbn-inner-body{padding-bottom:clamp(40px,5vw,72px)}
.sbn-lightpage .sbn-inner-body .sbn-prose{max-width:none}
.sbn-lightpage .sbn-prose>p,
.sbn-lightpage .sbn-prose>.lead,
.sbn-lightpage .sbn-prose>h2,
.sbn-lightpage .sbn-prose>h3,
.sbn-lightpage .sbn-prose>blockquote,
.sbn-lightpage .sbn-prose>ul:not([class]),
.sbn-lightpage .sbn-prose>ol:not([class]),
.sbn-lightpage .sbn-prose>.callout,
.sbn-lightpage .sbn-prose>.tags{max-width:74ch}
.sbn-lightpage .sbn-prose>.checklist{max-width:920px}
.sbn-lightpage .sbn-prose>.trust,
.sbn-lightpage .sbn-prose>.feature-grid,
.sbn-lightpage .sbn-prose>.tiers,
.sbn-lightpage .sbn-prose>.steps,
.sbn-lightpage .sbn-prose>ol.steps,
.sbn-lightpage .sbn-prose>.faq,
.sbn-lightpage .sbn-prose>.cta-band{max-width:none}

/* 2-COL SERVICE HERO with graphic slot */
.sbn-inner-hero__panel.has-art{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center}
.sbn-inner-hero__panel.has-art .sbn-inner-hero__copy{min-width:0;max-width:42ch}
.sbn-inner-hero__panel.has-art .sbn-inner-hero__copy h1{max-width:16ch}
.sbn-inner-hero__trust{margin-top:clamp(24px,3vw,34px);display:flex;flex-wrap:wrap;gap:14px 34px}
.sbn-inner-hero__trust span{color:var(--sbn-muted);font-size:.9rem;display:flex;flex-direction:column;gap:1px}
.sbn-inner-hero__trust b{font-family:'Unbounded',system-ui,sans-serif;font-weight:500;color:var(--sbn-ink);font-size:1.18rem;letter-spacing:-.02em}
/* placeholder graphic — swap for a per-direction PNG (~1200×1200) later */
.sbn-inner-hero__art{position:relative;aspect-ratio:4/3.2;min-height:240px;border-radius:var(--sbn-r);overflow:hidden;
  background:radial-gradient(130% 130% at 72% 18%,#fff,var(--sbn-bg) 74%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.03);
  display:flex;align-items:center;justify-content:center}
.sbn-inner-hero__art .art-obj{width:42%;aspect-ratio:1;border-radius:28%;position:relative;
  background:linear-gradient(155deg,#fff,var(--sbn-bg-2));box-shadow:0 30px 60px -32px rgba(0,0,0,.4),inset 0 2px 0 #fff}
.sbn-inner-hero__art .art-obj::after{content:"";position:absolute;right:15%;bottom:15%;width:26%;height:26%;border-radius:30%;
  background:var(--sbn-lime);box-shadow:var(--sbn-shadow-lime)}
.sbn-inner-hero__art .art-blob{position:absolute;border-radius:50%;filter:blur(9px);opacity:.8}
.sbn-inner-hero__art .art-blob--a{width:38%;height:38%;background:var(--sbn-tint-lime);top:6%;right:9%}
.sbn-inner-hero__art .art-blob--b{width:26%;height:26%;background:var(--sbn-tint-blue);bottom:8%;left:8%}
.sbn-inner-hero__art .art-note{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:.7rem;color:var(--sbn-muted);letter-spacing:.02em}
@media(max-width:820px){
  .sbn-inner-hero__panel.has-art{grid-template-columns:1fr}
  .sbn-inner-hero__panel.has-art .sbn-inner-hero__copy{max-width:none}
  .sbn-inner-hero__art{display:none}
}

/* MOBILE HEADER FIX — the CTA button kept the burger off-screen (~42px h-overflow
   on every page). Hide CTA + phone + links and tighten the gap ≤1023px so the row
   fits and the burger is reachable. (audit P0) */
@media(max-width:1023px){
  .sbn-header .sbn-nav ul,
  .sbn-header .sbn-nav .phone,
  .sbn-header .sbn-nav .sbn-btn{display:none!important}
  .sbn-header .sbn-nav{gap:12px}
}

/* home: why-us numbered cards (restored narrative block) */
.sbn-why__n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  background:var(--sbn-lime);color:var(--sbn-lime-ink);font-family:'Unbounded',system-ui,sans-serif;font-weight:500;
  font-size:1.05rem;letter-spacing:-.02em;margin-bottom:16px}

/* ============================================================
   MOBILE EMERGENCY FIXES (audit Phase 0)
   ============================================================ */
/* A11Y CONTRAST: darken muted (#8A8B90 = 3.1:1, FAILS AA) → #6C6D72 (~4.6:1).
   One override fixes every .sbn-muted/.sbn-eyebrow/meta/breadcrumb site-wide.
   (Canonical home is sbn-tokens.css; overridden here for a single-file deploy.) */
:root{--sbn-muted:#6C6D72}

/* A11Y FOCUS: lime ring was invisible on light (1.0:1). Ink ring = 17:1, visible everywhere. */
:focus-visible{outline:3px solid var(--sbn-ink);outline-offset:2px;border-radius:6px}

/* LIGHT MOBILE DRAWER: was legacy near-black (--ink #0A0A0C) with light text — jarring in a
   light site + poor legibility. Repaint to the light system, ink text, hairline borders. */
.mobile-nav{background:var(--sbn-bg)}
.mobile-nav .menu-item{border-color:var(--sbn-line)}
.mobile-nav .menu-item>a{color:var(--sbn-ink)}
.mobile-nav .sub-menu{border-left-color:var(--sbn-line)}
.mobile-nav .sub-menu .menu-item>a{color:var(--sbn-body)}
.mobile-nav .sub-menu .sub-menu .menu-item>a{color:var(--sbn-muted)}
.mobile-nav .m-toggle{color:var(--sbn-muted)}
.mobile-nav__foot{border-top-color:var(--sbn-line)}
.mobile-nav__phone{color:var(--sbn-ink)}
/* active/open state: ink (lime TEXT on light bg is unreadable) */
.mobile-nav .menu-item.is-open>a,.mobile-nav .menu-item>a:active,
.mobile-nav .menu-item.is-open>.m-toggle,
.mobile-nav .sub-menu .menu-item.is-open>a,.mobile-nav .sub-menu .menu-item>a:active,
.mobile-nav__phone:active{color:var(--sbn-ink)}

/* HOME HERO: the absolute grey panel (width:min(44%,520px)) had no mobile rule and read as a
   stray "seam" down the flagship page. Hide it on phones (it's decorative). */
@media(max-width:720px){.sbn-hero__panel{display:none}}

/* ============================================================
   MOBILE POLISH — imagegen-frontend-mobile methodology
   (safe-area §13 · readability §29 · breathe §31 · one textured surface §17)
   ============================================================ */
/* SAFE-AREA (§13): clear status bar / notch / home indicator. viewport-fit=cover already set. */
@supports(padding:max(0px)){
  .sbn-header{padding-top:env(safe-area-inset-top)}
  .mobile-nav{top:calc(76px + env(safe-area-inset-top))}
  .mobile-nav__inner{padding-bottom:max(1.75rem,env(safe-area-inset-bottom))}
  .sbn-wrap{padding-left:max(var(--sbn-pad),env(safe-area-inset-left));
            padding-right:max(var(--sbn-pad),env(safe-area-inset-right))}
}

/* DECLUTTER (§15 / anti-tell): breadcrumb becomes ONE calm scrollable line on phones,
   not a 4-line wrap. All crumbs preserved (SEO-safe); soft fade hints at overflow. */
@media(max-width:640px){
  .sbn-crumbs{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
  .sbn-crumbs::-webkit-scrollbar{display:none}
  /* BREATHE (§31) + READABLE (§29): a little more air under the sticky header, larger eyebrow */
  .sbn-inner-hero,.svc{padding-top:18px}
  .sbn-eyebrow{font-size:.86rem}
}

/* TEXTURE (§17, TEXTURE 7): one subtle grain-textured recessed surface — not sterile flat.
   Grain blends into the panel's own background only, never over content. Ultra-subtle. */
.sbn-inner-hero__panel{
  background-color:var(--sbn-bg-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
  background-blend-mode:multiply}

/* TOUCH TARGET (§31 touch-friendly): share links 40→44px */
.sbn-share a{height:44px}

/* SERVICE HERO OBJECT — real transparent PNG per pillar sits on the recessed panel */
.sbn-inner-hero__art.has-img{padding:clamp(14px,3vw,30px)}
.sbn-inner-hero__art.has-img img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.16))}

/* INK case card: legacy main.css sets a dark color directly on h3, which beats the card's
   inherited #fff (the paragraph is fine because its light color is explicit). Force light. */
.sbn-project--ink h3{color:#fff}
.sbn-project--ink .cat{color:#a8a8a8}
.sbn-project--ink p{color:#c7c7c7}

/* ===== #contact lead block — 2-col (info + form), 7winds-style, on a white card ===== */
.sbn-contact{background:var(--sbn-card);border:1px solid var(--sbn-line);border-radius:var(--sbn-r-lg);
  padding:clamp(28px,5vw,64px);margin-top:clamp(24px,3vw,44px);margin-bottom:clamp(56px,8vw,100px)}
/* content body: trim bottom rhythm so it doesn't double up with the #contact block's top gap
   (fixes the oversized empty band on short pages like /kontakty/) */
.sbn-lightpage .sbn-inner-body{padding-bottom:clamp(36px,4.5vw,60px)}
/* LIGHT native inputs everywhere (search box, any bare field) — legacy main.css paints them dark */
input[type=text],input[type=email],input[type=tel],input[type=search],input[type=url],
input[type=number],input[type=password],textarea,select{
  background-color:var(--sbn-card);color:var(--sbn-ink);border-color:var(--sbn-line)}
input[type=text]::placeholder,input[type=email]::placeholder,input[type=search]::placeholder,textarea::placeholder{color:var(--sbn-muted)}
.sbn-contact__grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,5vw,60px);align-items:start}
.sbn-contact__title{font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.02em;line-height:1.1;margin-top:14px;max-width:20ch}
.sbn-contact__lead{margin-top:16px;color:var(--sbn-body);font-size:var(--sbn-fz-lead);max-width:46ch}
.sbn-contact__links{margin-top:clamp(24px,3vw,32px);display:grid;gap:12px}
.sbn-contact__links a{font-family:var(--sbn-font-display);font-weight:500;font-size:1.12rem;letter-spacing:-.01em;
  color:var(--sbn-ink);width:max-content;transition:color var(--sbn-dur-ui) var(--sbn-ease-out)}
.sbn-contact__links .sbn-contact__phone{font-size:1.4rem}
@media(hover:hover){.sbn-contact__links a:hover{color:#000;text-decoration:underline;text-decoration-color:var(--sbn-lime);text-decoration-thickness:2px;text-underline-offset:4px}}
.sbn-contact__note{margin-top:20px;color:var(--sbn-muted);font-size:.92rem}
.sbn-contact__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sbn-contact__form .sbn-btn{margin-top:6px;width:100%}
.sbn-form__status{margin:0;font-size:.95rem;min-height:1.2em;font-weight:500}
.sbn-form__status.is-ok{color:var(--sbn-ok)}
.sbn-form__status.is-err{color:var(--sbn-err)}
.sbn-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:860px){.sbn-contact__grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:520px){.sbn-contact__row{grid-template-columns:1fr}}

/* FORM FIELDS — WHITE. Legacy main.css paints all inputs dark (input[type=…]{background:var(--surface)},
   specificity 0,1,1). Re-declare with .sbn-form input.sbn-input (0,2,1) so light wins definitively.
   Reference look: white field, hairline border, 14px radius, muted placeholder, lime focus ring. */
.sbn-form input.sbn-input,
.sbn-form textarea.sbn-input,
.sbn-form select.sbn-input{
  background:var(--sbn-card);color:var(--sbn-ink);border:1px solid var(--sbn-line);
  border-radius:14px;-webkit-text-fill-color:var(--sbn-ink)}
.sbn-form input.sbn-input::placeholder,
.sbn-form textarea.sbn-input::placeholder{color:var(--sbn-muted);opacity:1}
.sbn-form input.sbn-input:hover,
.sbn-form textarea.sbn-input:hover{border-color:#cfcfcf}
.sbn-form input.sbn-input:focus,
.sbn-form textarea.sbn-input:focus{
  border-color:var(--sbn-ink);box-shadow:0 0 0 3px rgba(212,255,0,.35);outline:none}
.sbn-form input.sbn-input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px var(--sbn-card) inset}
.sbn-contact__form .sbn-input{height:58px}
.sbn-contact__form textarea.sbn-input{height:auto;min-height:150px;padding-top:16px}
.sbn-contact__form{gap:16px}

/* ===== Web Interface Guidelines (Vercel) — self-check polish ===== */
/* balanced heading line-breaks (no orphan words); pretty for body */
h1,h2,h3,.sbn-contact__title,.sbn-project h3,.sbn-prose .feature__title{text-wrap:balance}
.sbn-prose p,.sbn-contact__lead,.sbn-head p{text-wrap:pretty}
/* hash-anchor jumps (#contact, section ids) clear the sticky header */
:target{scroll-margin-top:100px}
/* aligned numerals */
.sbn-stat .n,.sbn-contact__phone,.sbn-inner-hero__trust b,.sbn-prose .tier__price{font-variant-numeric:tabular-nums}
/* remove tap delay / accidental double-tap zoom on controls */
.sbn-btn,.sbn-pill,.burger,.sbn-share a,.pagination .page-numbers,.sbn-contact__links a{touch-action:manipulation}

/* ===== Contact person (form trust cue, 7winds-style) ============== */
.sbn-contact__person{display:flex;align-items:center;gap:14px;
  margin-top:clamp(20px,3vw,28px);padding-top:clamp(18px,2.4vw,24px);
  border-top:1px solid var(--sbn-line)}
.sbn-contact__ava{width:56px;height:56px;border-radius:50%;object-fit:cover;
  flex:none;border:1px solid var(--sbn-line);background:var(--sbn-bg-2)}
.sbn-contact__pname{font-weight:600;font-size:1rem;line-height:1.2;color:var(--sbn-ink)}
.sbn-contact__prole{font-size:.86rem;color:var(--sbn-muted);margin-top:3px}

/* ===== Blog card covers without a photo → branded, not empty ====== */
/* base: soft light gradient + a lime glow corner (only shows when no <img>) */
.sbn-postgrid .pcard__cover{
  background:radial-gradient(130% 130% at 100% 0%, rgba(212,255,0,.20), transparent 46%),
            linear-gradient(135deg,#ECEEE9,#F6F7F4)}
.sbn-postgrid .pcard__cover:has(img){background:var(--sbn-bg-2)}
/* fine dot-grid texture, kept beneath the category pill (.cat is z-index:1) */
.sbn-postgrid .pcard__cover:not(:has(img))::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 1px 1px, rgba(17,18,20,.05) 1.3px, transparent 1.7px) 0 0/20px 20px;
  opacity:.7;pointer-events:none}
/* subtle warm/cool rotation so a grid of coverless cards isn't monotone */
.sbn-postgrid .pcard:nth-child(3n+2) .pcard__cover:not(:has(img)){
  background:radial-gradient(130% 130% at 0% 0%, rgba(212,255,0,.17), transparent 46%),
            linear-gradient(135deg,#E9EDF0,#F5F7F9)}
.sbn-postgrid .pcard:nth-child(3n) .pcard__cover:not(:has(img)){
  background:radial-gradient(130% 130% at 100% 100%, rgba(212,255,0,.15), transparent 46%),
            linear-gradient(135deg,#F1EDE9,#F8F6F3)}

/* ===== Mega navigation ==================================================== */
/* Top-level links with drop panels. Opening is pure CSS (:hover / :focus-within)
   so it works without JS and stays keyboard reachable. */
.sbn-nav { position: relative; }
.sbn-mega > ul { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); list-style: none; margin: 0; padding: 0; }
.sbn-mega__item { position: relative; }
.sbn-mega__item.has-panel--wide { position: static; }   /* panel spans the header row */
.sbn-mega__item > a { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sbn-mega__chev { width: 10px; height: 7px; flex: none; opacity: .55;
  transition: transform var(--sbn-dur-ui) var(--sbn-ease-out); }
.sbn-mega__item.has-panel:hover > a .sbn-mega__chev,
.sbn-mega__item.has-panel:focus-within > a .sbn-mega__chev { transform: rotate(180deg); opacity: 1; }

.sbn-mega__panel { position: absolute; top: calc(100% + 14px); left: 0; z-index: 60;
  background: var(--sbn-card); border: 1px solid var(--sbn-line); border-radius: var(--sbn-r-lg);
  box-shadow: var(--sbn-shadow-card); padding: clamp(18px, 2vw, 26px);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--sbn-dur-ui) var(--sbn-ease-out), transform var(--sbn-dur-ui) var(--sbn-ease-out), visibility var(--sbn-dur-ui); }
.sbn-mega__panel.is-wide { left: 0; right: 0; }
.sbn-mega__item.has-panel:hover > .sbn-mega__panel,
.sbn-mega__item.has-panel:focus-within > .sbn-mega__panel { opacity: 1; visibility: visible; transform: none; }
/* hover bridge so the pointer can travel from the link to the panel */
.sbn-mega__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }

.sbn-mega__grid { display: grid; gap: clamp(16px, 1.8vw, 26px) clamp(20px, 2.4vw, 40px); }
.sbn-mega__panel.is-wide .sbn-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbn-mega__col { min-width: 0; }
.sbn-mega__head { display: block; font-weight: 600; font-size: .98rem; color: var(--sbn-ink);
  text-decoration: none; margin-bottom: 8px; }
@media (hover: hover) { .sbn-mega__head:hover { color: var(--sbn-ink); text-decoration: underline; } }
.sbn-mega__col ul { display: grid !important; gap: 2px; list-style: none; margin: 0; padding: 0; }
.sbn-mega__col li { margin: 0; }
.sbn-mega__col li a { display: block; padding: 4px 0; color: var(--sbn-muted); font-size: .9rem;
  line-height: 1.35; text-decoration: none; transition: color var(--sbn-dur-ui) var(--sbn-ease-out); }
@media (hover: hover) { .sbn-mega__col li a:hover { color: var(--sbn-ink); } }
.sbn-mega__panel:not(.is-wide) { min-width: 240px; }

@media (prefers-reduced-motion: reduce) {
  .sbn-mega__panel, .sbn-mega__chev { transition: none; }
}
@media (max-width: 1023px) { .sbn-mega { display: none; } }

/* ===== Footer ============================================================= */
.sbn-footer { padding: clamp(30px, 4vw, 54px) 0 clamp(22px, 3vw, 34px); }
.sbn-footer__grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 72px); align-items: start; }
.sbn-footer__copy { margin: 10px 0 0; color: var(--sbn-muted); font-size: .86rem; }

.sbn-footer__card { margin-top: clamp(18px, 2.4vw, 26px); background: var(--sbn-card);
  border: 1px solid var(--sbn-line); border-radius: var(--sbn-r-lg); padding: clamp(18px, 2.2vw, 24px); }
.sbn-footer__card strong { display: block; font-family: var(--sbn-font-display); font-weight: 500;
  font-size: 1.16rem; letter-spacing: var(--sbn-tracking-tight); }
.sbn-footer__card p { margin: 8px 0 14px; color: var(--sbn-muted); font-size: .92rem; line-height: 1.5; }
.sbn-footer__card .sbn-btn { width: 100%; justify-content: center; }
.sbn-footer__direct { margin: 14px 0 0 !important; font-size: .9rem; line-height: 1.7; }
.sbn-footer__direct a { color: var(--sbn-ink); font-weight: 600; text-decoration: none; }
@media (hover: hover) { .sbn-footer__direct a:hover { text-decoration: underline; } }

.sbn-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); }
.sbn-footer__col h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--sbn-muted); font-weight: 600; margin: 0 0 12px; }
.sbn-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.sbn-footer__col a { display: block; padding: 5px 0; color: var(--sbn-ink); font-size: .93rem;
  line-height: 1.4; text-decoration: none; transition: color var(--sbn-dur-ui) var(--sbn-ease-out); }
@media (hover: hover) { .sbn-footer__col a:hover { color: var(--sbn-muted); } }

.sbn-footer__bottom { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 12px 24px; margin-top: clamp(26px, 3.4vw, 44px); padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--sbn-line); }
.sbn-footer__bottom small { color: var(--sbn-muted); font-size: .84rem; line-height: 1.55; }
.sbn-footer__legal a { color: var(--sbn-muted); font-size: .84rem; text-decoration: none; }
@media (hover: hover) { .sbn-footer__legal a:hover { color: var(--sbn-ink); text-decoration: underline; } }

@media (max-width: 900px) {
  .sbn-footer__grid { grid-template-columns: 1fr; }
  .sbn-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .sbn-footer__cols { grid-template-columns: 1fr; gap: 20px; }
}

/* ===== Brand mark ========================================================= */
/* The lime "no" tile is replaced by the mark: the "o" of "no" IS the brand's
   lime full stop. Sized to the wordmark's cap height. */
.sbn-logo__mark { display: inline-flex; flex: none; width: 1.5em; height: 1.5em; margin-right: .42em; }
.sbn-logo__mark svg { width: 100%; height: 100%; display: block; }
/* The wordmark is split across nodes ("sorrybut" + "no."), so the flex gap was
   opening a hole inside the word. Spacing comes from the mark's own margin. */
.sbn-logo { gap: 0; }

/* ===== Mega menu: hover bridge + compact packing ========================== */
/* 1) Hover stability. The gap between the trigger and the panel used to drop
   :hover, so the panel flickered open/closed. An invisible extender under the
   trigger (always present) plus a taller bridge on the panel keep the pointer
   inside the hover chain the whole way down. */
.sbn-mega__item > a { position: relative; }
.sbn-mega__item.has-panel > a::after { content: ""; position: absolute; left: -14px; right: -14px;
  top: 100%; height: 30px; }
.sbn-mega__panel { top: calc(100% + 10px); }
.sbn-mega__panel::before { top: -30px; height: 30px; }

/* 2) Compact packing. A 3-column grid aligned rows to the tallest column, which
   left big holes under the short lists. CSS columns pack the blocks naturally. */
.sbn-mega__panel.is-wide .sbn-mega__grid { display: block; columns: 3; column-gap: clamp(24px, 3vw, 48px); }
.sbn-mega__panel.is-wide .sbn-mega__col { break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 22px; }
.sbn-mega__panel.is-wide .sbn-mega__col:last-child { margin-bottom: 0; }
.sbn-mega__panel { padding: clamp(16px, 1.7vw, 22px) clamp(18px, 2vw, 26px); }
.sbn-mega__head { margin-bottom: 6px; }
.sbn-mega__col li a { padding: 3px 0; font-size: .89rem; }

/* ===== Mega menu v2: cards, icons, promo ================================== */
/* The flat wall of links had no hierarchy and left the right half empty.
   Now: category cards with icons on the left, a CTA block filling the right. */
.sbn-mega__panel.is-wide { display: grid; grid-template-columns: minmax(0, 1fr) 248px;
  gap: clamp(16px, 1.6vw, 24px); padding: clamp(14px, 1.4vw, 18px); }
.sbn-mega__panel.is-wide .sbn-mega__grid { display: grid; columns: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 6px; }
.sbn-mega__panel.is-wide .sbn-mega__col { margin: 0; padding: 12px 14px 14px; border-radius: 14px;
  transition: background var(--sbn-dur-ui) var(--sbn-ease-out); }
@media (hover: hover) { .sbn-mega__panel.is-wide .sbn-mega__col:hover { background: var(--sbn-bg); } }

.sbn-mega__head { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem;
  margin-bottom: 8px; color: var(--sbn-ink); }
.sbn-mega__ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--sbn-lime); color: var(--sbn-ink); }
.sbn-mega__ic svg { width: 17px; height: 17px; }
.sbn-mega__panel.is-wide .sbn-mega__col li a { padding: 3px 0 3px 40px; font-size: .87rem; }

.sbn-mega__promo { background: var(--sbn-ink); color: #fff; border-radius: 16px;
  padding: clamp(16px, 1.6vw, 20px); display: flex; flex-direction: column; gap: 10px; }
.sbn-mega__promo strong { font-family: var(--sbn-font-display); font-weight: 500; font-size: 1.02rem;
  line-height: 1.25; letter-spacing: var(--sbn-tracking-tight); }
.sbn-mega__promo p { margin: 0; color: rgba(255, 255, 255, .68); font-size: .85rem; line-height: 1.45; }
.sbn-mega__promo .sbn-btn { width: 100%; justify-content: center; margin-top: 2px; }
.sbn-mega__all { color: var(--sbn-lime); font-size: .85rem; text-decoration: none; margin-top: auto; }
@media (hover: hover) { .sbn-mega__all:hover { text-decoration: underline; } }
@media (max-width: 1200px) { .sbn-mega__panel.is-wide { grid-template-columns: 1fr; } .sbn-mega__promo { display: none; } }
/* Legacy main.css colours <strong> and nav <a> with higher specificity than the
   promo block did, so its heading rendered near-black on near-black and the link
   grey instead of lime. Raise specificity and stop the block stretching. */
.sbn-mega .sbn-mega__promo { align-self: start; }
.sbn-mega .sbn-mega__promo strong { color: #fff; }
.sbn-mega .sbn-mega__promo p { color: rgba(255, 255, 255, .68); }
.sbn-mega .sbn-mega__promo .sbn-mega__all { color: var(--sbn-lime); margin-top: 4px; }

/* ===== Service cards with 3D objects ====================================== */
/* The cards used to be plain text. A soft 3D object anchors each one visually,
   the copy keeps clear of it, and the object lifts slightly on hover. */
.sbn-svc { position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 268px; padding-bottom: 18px; }
.sbn-svc h3 { font-size: 1.3rem; margin: 0; }
.sbn-svc p { margin: 10px 0 0; font-size: .97rem; max-width: 78%; }
.sbn-svc .sbn-more { margin-top: auto; padding-top: 18px; position: relative; z-index: 1; }
.sbn-svc__obj { position: absolute; right: -14px; bottom: -12px; width: 148px; height: auto;
  pointer-events: none; mix-blend-mode: multiply;
  transition: transform 420ms var(--sbn-ease-out); }
@media (hover: hover) { .sbn-svc:hover .sbn-svc__obj { transform: translateY(-6px) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .sbn-svc__obj { transition: none; } }
@media (max-width: 600px) { .sbn-svc { min-height: 232px; } .sbn-svc__obj { width: 118px; } .sbn-svc p { max-width: 72%; } }
/* Objects now carry their own alpha, so blending against the card is unnecessary
   (multiply also darkened them on the tinted card surface). */
.sbn-svc__obj { mix-blend-mode: normal; }

/* ===== Hero object ======================================================== */
.sbn-hero { position: relative; }
.sbn-hero__in { position: relative; z-index: 1; }
.sbn-hero__obj { position: absolute; right: clamp(16px, 5vw, 96px); top: 50%; z-index: 0;
  width: clamp(260px, 30vw, 460px); height: auto; pointer-events: none;
  transform: translateY(-50%); animation: sbn-float 7s ease-in-out infinite; }
@keyframes sbn-float { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 12px)); } }
@media (prefers-reduced-motion: reduce) { .sbn-hero__obj { animation: none; } }
@media (max-width: 1080px) { .sbn-hero__obj { display: none; } }

/* ===== "Почему мы": numerals carry the section instead of leaving cards bare = */
.sbn-why__n { display: block; font-family: var(--sbn-font-display); font-weight: 500;
  font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; letter-spacing: var(--sbn-tracking-tight);
  color: var(--sbn-ink); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.sbn-why__n::after { content: "."; color: var(--sbn-lime); }

/* ===== Contact block: soft blocks behind, like the reference ============== */
.sbn-contact { position: relative; isolation: isolate; }
.sbn-contact::before, .sbn-contact::after { content: ""; position: absolute; z-index: -1;
  background: var(--sbn-bg-2); border-radius: 28px; pointer-events: none; }
.sbn-contact::before { width: 190px; height: 190px; right: -40px; top: -30px; }
.sbn-contact::after { width: 120px; height: 120px; left: -56px; bottom: 40px; border-radius: 22px; }
@media (max-width: 1100px) { .sbn-contact::before, .sbn-contact::after { display: none; } }
/* The legacy lime chip behind the numeral reads as a highlighter smear at the new
   display size — the numeral carries itself, the lime lives in the full stop. */
.sbn-why__n { background: none; padding: 0; border-radius: 0; width: auto; height: auto; }

/* ===== Footer v2 ========================================================== */
/* v1 was sparse and unanchored: 15 links floating on the page background with
   half the width empty. Now the whole footer sits in a rounded surface and the
   link grid is built from the real service tree (33 links), like the reference. */
.sbn-footer { padding: clamp(20px, 3vw, 40px) 0 clamp(18px, 2.4vw, 28px); }
.sbn-footer__box { background: var(--sbn-bg-2); border-radius: clamp(22px, 2.6vw, 36px);
  padding: clamp(24px, 3.4vw, 52px); }

.sbn-footer__top { display: grid; grid-template-columns: minmax(0, 296px) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 64px); align-items: start; }

.sbn-footer__copy { margin: 10px 0 0; color: var(--sbn-muted); font-size: .85rem; }
.sbn-footer__card { margin-top: clamp(16px, 2vw, 22px); background: var(--sbn-card);
  border-radius: 18px; padding: clamp(16px, 1.9vw, 22px); border: 0; }
.sbn-footer__card strong { display: block; font-family: var(--sbn-font-display); font-weight: 500;
  font-size: 1.14rem; letter-spacing: var(--sbn-tracking-tight); }
.sbn-footer__card p { margin: 8px 0 14px; color: var(--sbn-muted); font-size: .9rem; line-height: 1.5; }
.sbn-footer__card .sbn-btn { width: 100%; justify-content: center; }
.sbn-footer__direct { display: grid; gap: 4px; margin-top: 14px; }
.sbn-footer__direct a { color: var(--sbn-ink); font-weight: 600; font-size: .95rem; text-decoration: none;
  font-variant-numeric: tabular-nums; }
@media (hover: hover) { .sbn-footer__direct a:hover { text-decoration: underline; } }

/* dense link grid — 7 groups (6 service categories + company) */
.sbn-footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px) clamp(14px, 1.8vw, 28px); }
.sbn-footer__col h3 { margin: 0 0 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; color: var(--sbn-muted); }
.sbn-footer__col h3 a { color: inherit; text-decoration: none; }
@media (hover: hover) { .sbn-footer__col h3 a:hover { color: var(--sbn-ink); } }
.sbn-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.sbn-footer__col li a { display: block; padding: 3px 0; color: var(--sbn-ink); font-size: .89rem;
  line-height: 1.42; text-decoration: none; transition: color var(--sbn-dur-ui) var(--sbn-ease-out); }
@media (hover: hover) { .sbn-footer__col li a:hover { color: var(--sbn-muted); } }

.sbn-footer__bottom { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 10px 24px; margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(17, 18, 20, .09); }
.sbn-footer__bottom small { color: var(--sbn-muted); font-size: .83rem; line-height: 1.55; }
.sbn-footer__legal a { color: var(--sbn-muted); font-size: .83rem; text-decoration: none; }
@media (hover: hover) { .sbn-footer__legal a:hover { color: var(--sbn-ink); text-decoration: underline; } }

@media (max-width: 1100px) { .sbn-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .sbn-footer__top { grid-template-columns: 1fr; }
  .sbn-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .sbn-footer__nav { grid-template-columns: 1fr; gap: 18px; } }
/* 7 groups in a 4-column grid left a hole bottom-right and a ragged second row.
   Multi-column packing balances them with no gaps (same fix as the mega menu). */
.sbn-footer__nav { display: block; columns: 4; column-gap: clamp(16px, 2vw, 30px); }
.sbn-footer__col { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 22px; }
.sbn-footer__col h3 { letter-spacing: .07em; font-size: .75rem; }
/* keep the legal link clear of the floating chat widget */
.sbn-footer__bottom { justify-content: flex-start; gap: 6px 22px; }
@media (max-width: 1100px) { .sbn-footer__nav { columns: 3; } }
@media (max-width: 900px)  { .sbn-footer__nav { columns: 2; } }
@media (max-width: 560px)  { .sbn-footer__nav { columns: 1; } }
/* The footer box was locked to the 1240px content column, so on wide screens it
   sat in the middle with huge side margins. It is a full-width surface, like the
   reference: near-bleed with a small gutter. Wider box also lets the link
   columns breathe, so the group headings stop wrapping. */
.sbn-footer > .sbn-wrap { max-width: 1720px; padding-inline: clamp(14px, 2.4vw, 40px); }
.sbn-footer__top { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.sbn-footer__nav { columns: 5; }
@media (max-width: 1400px) { .sbn-footer__nav { columns: 4; } }
@media (max-width: 1100px) { .sbn-footer__nav { columns: 3; } }
@media (max-width: 900px)  { .sbn-footer__nav { columns: 2; } }
@media (max-width: 560px)  { .sbn-footer__nav { columns: 1; } }
/* Copyright belongs in the legal row at the very bottom, not under the logo. */
.sbn-footer__copy { color: var(--sbn-muted); font-size: .83rem; margin: 0; }
.sbn-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
/* ===== Footer bottom: requisites, legal links, copyright ================== */
/* Was a marketing tagline plus two loose fragments. A footer bottom bar is for
   who you legally are and the documents that govern the forms. */
.sbn-footer__bottom { display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: flex-start; gap: 16px clamp(28px, 4vw, 72px);
  margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(17, 18, 20, .09); }
.sbn-footer__legalinfo { display: grid; gap: 3px; color: var(--sbn-muted); font-size: .83rem; line-height: 1.5; }
.sbn-footer__legalinfo span:first-child { color: var(--sbn-ink); font-weight: 600; }
.sbn-footer__legal { display: grid; gap: 4px; align-content: start; }
.sbn-footer__legal a { color: var(--sbn-muted); font-size: .83rem; text-decoration: none; }
@media (hover: hover) { .sbn-footer__legal a:hover { color: var(--sbn-ink); text-decoration: underline; } }
.sbn-footer__copy { color: var(--sbn-muted); font-size: .83rem; align-self: end; }
@media (max-width: 700px) { .sbn-footer__bottom { gap: 14px; } }
/* ===== Footer bottom v3 =================================================== */
/* The three blocks used to float at arbitrary x-positions and read as leftovers.
   Now the bar sits on the SAME two-column grid as the footer body: copyright
   under the brand column, requisites and documents under the link columns. */
.sbn-footer__bottom { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 10px clamp(26px, 3.6vw, 64px); align-items: start;
  margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(17, 18, 20, .09); }
.sbn-footer__copy { color: var(--sbn-muted); font-size: .82rem; align-self: start; }
.sbn-footer__legalcol { display: grid; gap: 7px; min-width: 0; }

/* requisites on one wrapping line, separated by dots */
.sbn-footer__req { margin: 0; color: var(--sbn-muted); font-size: .82rem; line-height: 1.6; }
.sbn-footer__req span::before { content: "·"; margin: 0 8px; opacity: .5; }

.sbn-footer__legal { display: flex; flex-wrap: wrap; gap: 0 8px; }
.sbn-footer__legal a { color: var(--sbn-muted); font-size: .82rem; line-height: 1.6; text-decoration: none; }
.sbn-footer__legal a + a::before { content: "·"; margin-right: 8px; opacity: .5; }
@media (hover: hover) { .sbn-footer__legal a:hover { color: var(--sbn-ink); text-decoration: underline; } }

@media (max-width: 900px) {
  .sbn-footer__bottom { grid-template-columns: 1fr; gap: 12px; }
  .sbn-footer__copy { order: 2; }
}
/* Decorative squares behind the contact block are removed: at this size they
   peeked out from behind the white card in random corners and read as a layout
   artefact rather than composition. */
.sbn-contact::before, .sbn-contact::after { content: none; }