/*
  LBS / autobizlab.com — shared stylesheet
  Source of truth: site_maker/projects/autobizlab/03_design_guide.md + 03_design_preview.html
  Mobile-first: base rules target ≤640px, then min-width media queries add complexity
  for tablet (641–1024px) and desktop (≥1025px) — see design guide §6 "Хедер — поведение
  по брейкпоинтам" for the rationale (no single hard breakpoint "flip" between full nav
  and hamburger).
*/

/* v3.1 (28.09.2026): colour system moved to the Logos brand book — navy #0B1B2E +
   ivory #F5F2EC + champagne #D8C3A0/#94784A; CTA = "Emerald Pine" #227A50 with white
   text (one green on every background, champagne 1px edge on dark areas).
   Source of truth: 03_design_guide.md §2 (v3.1) + :root of 03_design_preview.html.
   Token NAMES are kept from v2.4 (--ink, --indigo, --cta …) so components are untouched;
   --indigo is now a historical name for the champagne structural accent.
   Previous palette: css/styles_v2.4_backup.css. */
:root{
  /* brand primitives (use through semantic tokens below) */
  --brand-navy:#0B1B2E;
  --brand-ivory:#F5F2EC;
  --brand-champ:#D8C3A0;
  --brand-champ-deep:#94784A;

  /* dark base */
  --ink:#0B1B2E;
  --ink-surface:#12263D;
  --ink-border:#22364F;
  --ink-text:#F5F2EC;
  --ink-muted:#9BA7B8;

  /* light base */
  --paper:#F5F2EC;
  --surface:#FFFFFF;
  --line:#E3DDD2;
  --line-strong:#8A8070;   /* form field borders on light (3.89:1 on white) */
  --graphite:#0B1B2E;
  --slate:#4B5A6E;

  /* CTA — one emerald on all backgrounds (white text 5.29:1) */
  --cta:#227A50;
  --cta-dark:#288358;      /* hover — slightly lighter */
  --cta-active:#1D6B46;    /* pressed */
  --cta-text:#FFFFFF;

  --whatsapp:#25D366;

  /* niche pair (light bg / dark bg) — home & /yourbusiness = brand champagne;
     overridden per-vertical via body[data-vertical] below */
  --niche-light:#7A6238;
  --niche-dark:#D8C3A0;

  --radius-s:8px;
  --radius-m:10px;
  --radius-l:16px;
  --container:1200px;

  --section-pad: clamp(56px, 8vw, 112px);
  --side-pad: clamp(20px, 5vw, 64px);
}

/* /auto «Медь», /avia «Сталь-небо» — pairs for light / dark backgrounds (guide §2.4) */
body[data-vertical="auto"]{ --niche-light:#9A4F1C; --niche-dark:#E89A5F; }
body[data-vertical="avia"]{ --niche-light:#2A6390; --niche-dark:#86BFE3; }

/* Background-dependent tokens, resolved per AREA (guide §2.5).
   LIGHT area: default + light "islands" inside dark sections. `body` must be listed:
   var() is computed where it is declared, otherwise --accent-niche would freeze at the
   :root value and never see body[data-vertical]. */
:root, body, .pkg-card, .form-card, .calc-grid .panel:not(.panel-result){
  --cta-border:transparent;
  --cta-focus:#227A50;
  --cta-shadow:rgba(34,122,80,.28);
  --indigo:#7A6238;
  --indigo-soft:rgba(148,120,74,.14);
  --accent-niche:var(--niche-light);
}
/* DARK area */
.site-header, .sub-header, .hero, .methodology, .process, .trust, .final-cta,
.calc-grid .panel-result, .diff-accent, footer.site-footer, .sticky-cta, .lbs-toast, .redirect-screen{
  --cta-border:rgba(216,195,160,.6);
  --cta-focus:#D8C3A0;
  --cta-shadow:rgba(0,0,0,.28);
  --indigo:#D8C3A0;
  --indigo-soft:rgba(216,195,160,.14);
  --accent-niche:var(--niche-dark);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--graphite);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Manrope',system-ui,sans-serif;
  margin:0 0 .5em 0;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2rem, 1.55rem + 2.6vw, 3.5rem); line-height:1.12; font-weight:800; }
h2{ font-size:clamp(1.5rem, 1.25rem + 1.4vw, 2.375rem); line-height:1.18; font-weight:700; }
h3{ font-size:clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem); line-height:1.25; font-weight:700; }
p{ margin:0 0 1em 0; }
.lead{ font-size:clamp(1.05rem, 1rem + 0.3vw, 1.25rem); font-weight:400; }
small,.meta{ font-size:.875rem; font-weight:500; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img,svg{ max-width:100%; display:block; }

.container{ max-width:var(--container); margin:0 auto; padding-inline:var(--side-pad); }
section{ padding-block:var(--section-pad); }
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--cta); color:var(--cta-text); padding:10px 16px; border-radius:8px; z-index:200;
}
.skip-link:focus{ left:16px; top:16px; }

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Manrope',sans-serif; font-weight:700;
  font-size:clamp(.95rem, .9rem + .15vw, 1.05rem);
  border-radius:var(--radius-m);
  padding:14px 28px;
  border:none; cursor:pointer;
  text-align:center;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-primary{
  background:var(--cta); color:var(--cta-text);
  /* v3.1: 1px champagne edge on dark areas via box-shadow (size/layout unchanged) */
  box-shadow:0 0 0 1px var(--cta-border), 0 8px 20px var(--cta-shadow);
}
.btn-primary:hover{ background:var(--cta-dark); transform:translateY(-1px); }
.btn-primary:active{ background:var(--cta-active); transform:none; }
.btn-primary:focus-visible{ outline:2px solid var(--cta-focus); outline-offset:2px; }

.btn-ghost-dark{ background:transparent; color:var(--ink-text); border:1.5px solid rgba(245,242,236,.4); }
.btn-ghost-dark:hover{ border-color:var(--ink-text); }
.btn-ghost-dark:focus-visible{ outline:2px solid var(--ink-text); outline-offset:2px; }

.btn-ghost-light{ background:transparent; color:var(--indigo); border:1.5px solid var(--indigo); }
.btn-ghost-light:hover{ background:var(--indigo-soft); }
.btn-ghost-light:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }

.btn-small{ padding:10px 18px; font-size:.9rem; }
.btn-block{ width:100%; }

/* ================= HEADER (redesign v2 — no nav menu in the main row) =================
   The Home/Auto/Avia menu no longer lives in the main header row — it moved to
   the thin nav.sub-header strip right below (see that section). The main row is now:
   logo + caption/tagline (left) — WhatsApp/Telegram/phone + language + CTA (right).
   Behaviour by breakpoint mirrors the approved logos-business-solutions reference
   (see 03_design_guide.md §6.1): elements drop away by priority as the viewport
   narrows, rather than a single hard "menu vs hamburger" flip. */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,27,46,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-border);
}
.header-row1{
  display:flex; align-items:center; gap:12px;
  padding:10px var(--side-pad);
  max-width:var(--container); margin:0 auto;
  flex-wrap:nowrap;
}
@media (min-width:1025px){ .header-row1{ gap:20px; padding:14px var(--side-pad); } }

.logo-lockup{ display:flex; align-items:center; gap:10px; flex-shrink:0; white-space:nowrap; }
.logo-mark{ height:22px; width:auto; display:block; flex-shrink:0; } /* ≤640px: 22px per guide §1.1 (new brand logo is wider than the old LBS mark) */
@media (min-width:641px){ .logo-mark{ height:28px; } }

/* Caption/tagline next to the logo — kept hidden through the whole tablet range and
   only shown on desktop, so it never re-wraps .header-row1 on 641-1024px widths
   (same bug class documented for logos-business-solutions/.header-tagline). */
.logo-caption{
  font-family:'Inter',sans-serif; font-weight:600; font-size:.78rem; line-height:1.35;
  color:var(--ink-muted); white-space:normal; display:none;
  border-left:1px solid var(--ink-border); padding-left:14px; max-width:230px;
}
@media (min-width:1025px){ .logo-caption{ display:inline-block; } }

.breadcrumb-caption{
  font-size:.72rem; color:var(--ink-muted); white-space:nowrap; display:none;
}

/* Right-hand cluster: contact icons, language switch, CTA — always pinned right. */
.header-right{ display:flex; align-items:center; gap:16px; margin-left:auto; flex-shrink:0; }
@media (max-width:1024px){ .header-right{ gap:12px; } }
@media (max-width:640px){ .header-right{ gap:8px; } }

.header-contacts{ display:flex; align-items:center; gap:8px; }
@media (max-width:640px){ .header-contacts{ gap:6px; } }

.contact-icon-link{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  color:var(--ink-muted); border:1px solid var(--ink-border);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
  flex-shrink:0;
}
@media (max-width:640px){ .contact-icon-link{ width:28px; height:28px; } }
.contact-icon-link.whatsapp:hover{ color:var(--whatsapp); border-color:var(--whatsapp); background:rgba(37,211,102,.12); }
.contact-icon-link.telegram:hover{ color:#4FA6E0; border-color:#4FA6E0; background:rgba(79,166,224,.12); }
.contact-icon-link.phone-icon:hover{ color:var(--indigo); border-color:var(--indigo); background:rgba(216,195,160,.12); }
/* Telegram is the secondary channel (WhatsApp is the confirmed priority channel per
   the brief) and the Telegram handle itself isn't confirmed yet — link stays inert
   (see HTML). Hidden from tablet width down, same economy-of-space principle as the
   reference this pattern is ported from. */
@media (max-width:1024px){ .contact-icon-link.telegram{ display:none; } }
/* Mobile keeps only the WhatsApp icon — phone icon drops too (number is still one tap
   away via WhatsApp/the sticky CTA bar on vertical pages). */
@media (max-width:640px){ .contact-icon-link.phone-icon{ display:none; } }

.contact-phone{
  font-family:'Inter',sans-serif; font-weight:600; font-size:.85rem;
  color:var(--ink-text); white-space:nowrap;
}
.contact-phone:hover{ color:var(--indigo); }
@media (max-width:1024px){ .contact-phone{ display:none; } }

.lang-switch{
  flex-shrink:0; display:flex; align-items:center; gap:6px;
  color:var(--ink-muted); font-weight:600; font-size:.85rem;
}
.lang-switch a{ padding:4px 6px; color:var(--ink-muted); }
.lang-switch a.current{ color:var(--ink-text); }
.lang-switch a:hover{ color:var(--ink-text); }

.header-cta{ flex-shrink:0; padding:10px 16px; font-size:.9rem; }
.header-cta .full{ display:none; }
.header-cta .short{ display:inline; }
/* ≤640px: slightly tighter CTA so logo + WhatsApp + lang switch + CTA fit on 320–390px
   without horizontal scroll (RU "Диагностика" used to overflow by up to ~20px). */
@media (max-width:640px){ .header-cta{ padding:9px 12px; font-size:.85rem; } }
@media (min-width:1025px){
  .header-cta{ padding:12px 22px; font-size:.95rem; }
  .header-cta .full{ display:inline; }
  .header-cta .short{ display:none; }
}

/* Extra-narrow phones (~320-374px): logo + WhatsApp icon + lang switch + CTA button
   together are wider than the viewport with the sizes above (found via mobile audit,
   2026-09-05 — real overflow of ~11-29px, not a headless-screenshot artifact). Nothing
   is hidden here (WhatsApp stays reachable, unlike the progressive icon drop-offs above)
   — every element is just tightened slightly so the row fits without horizontal scroll. */
@media (max-width:374px){
  /* v3.1 (28.09.2026): the brand logo is ~97px wide even at 22px, so the row still
     overflowed by 4-19px on 320px (RU "Диагностика"). Gaps/paddings tightened further;
     logo stays 22px (guide §1.1). */
  .header-row1{ gap:8px; }
  .logo-mark{ height:22px; }
  .header-right{ gap:5px; }
  .lang-switch{ font-size:.78rem; gap:2px; }
  .lang-switch a{ padding:3px 2px; }
  .header-cta{ padding:8px 9px; font-size:.76rem; }
}

/* ================= SUB-HEADER (new in v2) — thin strip with the Home/Auto/Avia
   menu, sitting in normal flow right below the (sticky) main header. Deliberately NOT
   sticky itself — see 03_design_guide.md §6.2 for the rationale (avoids stacking two
   sticky elements on mobile, which previously caused a "header eats half the screen"
   class of bug on the sibling logos-business-solutions project). ================= */
nav.sub-header{
  background:var(--ink-surface);
  border-bottom:1px solid var(--ink-border);
}
.sub-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:8px;
  position:relative;
}
.sub-nav-links{
  display:flex; gap:4px;
  overflow-x:auto; scrollbar-width:none;
}
.sub-nav-links::-webkit-scrollbar{ display:none; }
.sub-nav-links a{
  flex-shrink:0;
  font-size:.82rem; font-weight:600; color:var(--ink-muted);
  padding:6px 14px; border-radius:999px; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.sub-nav-links a:hover{ color:var(--ink-text); background:rgba(245,242,236,.06); }
.sub-nav-links a.active{ color:var(--ink); background:var(--ink-text); }

/* Mobile hamburger — pure CSS checkbox-hack, no JS: all 4 links stay in the HTML on
   every viewport (just hidden by CSS on ≤640px inside .subnav-mobile-panel), so
   crawlers see them regardless of viewport — same "no JS dependency" principle
   already used for the language switch. */
.subnav-toggle-input{ display:none; }
.subnav-toggle-label{ display:none; }
.subnav-mobile-panel{ display:none; }

@media (max-width:640px){
  .sub-header-inner{ flex-direction:column; align-items:stretch; padding-block:2px; }
  .sub-nav-links{ display:none; }
  .subnav-toggle-label{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 2px; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:.85rem; font-weight:700; color:var(--ink-text);
  }
  .burger-icon{ display:flex; flex-direction:column; justify-content:center; gap:4px; width:18px; height:14px; flex-shrink:0; }
  .burger-icon span{ display:block; height:2px; border-radius:2px; background:var(--ink-text); }
  .subnav-mobile-panel{ display:none; flex-direction:column; border-top:1px solid var(--ink-border); padding-bottom:4px; }
  .subnav-mobile-panel a{ padding:12px 2px; font-size:.92rem; font-weight:600; color:var(--ink-muted); border-bottom:1px solid var(--ink-border); }
  .subnav-mobile-panel a:last-child{ border-bottom:none; }
  .subnav-mobile-panel a.active{ color:var(--ink-text); }
  .subnav-toggle-input:checked ~ .subnav-mobile-panel{ display:flex; }
}

/* ================= HERO ================= */
.hero{
  background:
    radial-gradient(ellipse at 20% -10%, rgba(43,86,135,.40), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(216,195,160,.10), transparent 45%),
    var(--ink);
  color:var(--ink-text);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(245,242,236,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,242,236,.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom, black, transparent 75%);
  pointer-events:none;
}
.hero .container{ position:relative; z-index:2; }

/* ---------------------------------------------------------------------------------------
   Hero background photo (2026-08-08, part of the v2 redesign — see 03_design_guide.md
   §4.1/§6.3; extended 2026-09-15 to #home, /auto and /avia and /yourbusiness with final
   client-picked stock photos). Sits BEHIND the existing radial-gradient/grid pattern
   above (which stays the fallback background of .hero itself), under a strong darkening
   overlay so it reads as a faint texture, not a "photo with text slapped on top".
   Stacking (bottom to top): .hero-photo (z-index:0) -> .hero-photo::after overlay ->
   .hero::before grid pattern (z-index:1) -> .hero .container content (z-index:2).
   Used on #home, #auto-hero, #avia-hero and #yourbusiness-hero.

   SOURCE / LICENSE: all four photos are Pexels stock, free for commercial use under the
   Pexels License (attribution not required) — selected by the client from
   assets-tmp/stock-candidates/{home,auto,avia,yourbusiness}/. Optimised to ~1920px wide,
   JPEG quality ~78, before being placed in /assets/. */
/* 2026-10-13 "bright" (client decision): the hero photo is shown as bright as possible.
   Full-bleed overlay is minimal; readability (WCAG AA, checked by rendering) comes ONLY from
   compact local layers: translucent navy cards with backdrop blur behind the checklist
   column, the form and the stat strip, and a tight feathered scrim + text-shadow behind the
   breadcrumb and H1. Previous versions: 05_site_v3.8_backup_overlay_20261013/ (level A),
   05_site_v3.7_backup_hero_20261013/ (original strong overlay). */
.hero-photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:saturate(1.08) contrast(1.05) brightness(1);
}
.hero-photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,27,46,.06) 0%, rgba(11,27,46,.10) 50%, rgba(11,27,46,.30) 85%, rgba(11,27,46,.55) 100%);
}
.hero-photo-auto{ background-image:url('/assets/hero-auto-engine.jpg?v=20261014'); }
.hero-photo-avia{ background-image:url('/assets/hero-avia-runway-night.jpg?v=20261014'); background-position:60% 50%; }
/* /yourbusiness (2026-10-14, client pick "frame B", hero_photo_options/yourbusiness/stage2/):
   Museum of the Future + Sheikh Zayed Road at night, Pexels 7974827 (Denys Gromov), 1920x1280,
   metadata stripped. WebP with JPEG fallback. Old hero-yourbusiness-office-night.jpg removed 14.10.2026 (cleanup);
   Tablet/phone layers: see the (max-width:900px)/(max-width:640px) block below. */
.hero-photo-yourbusiness{
  background-image:url('/assets/hero-yourbusiness-motf-night.jpg?v=20261014');
  background-image:image-set(url('/assets/hero-yourbusiness-motf-night.webp?v=20261014') type('image/webp'), url('/assets/hero-yourbusiness-motf-night.jpg?v=20261014') type('image/jpeg'));
  background-size:cover;
  background-position:50% 50%;
}
/* Home hero: photo "desk at night" (hero_photo_options/final/Photo_hero_2.jpg, 1376x768,
   client-supplied, AI-generated; metadata stripped). WebP with JPEG fallback (browsers
   without image-set type() keep the url() line). Sizes/positions fitted for the 16:9 frame
   so the lamp never sits behind the H1. Old hero-home-datacenter.jpg removed 14.10.2026 (cleanup). */
.hero-photo-home{
  background-image:url('/assets/hero-home-desk-night.jpg?v=20261014');
  background-image:image-set(url('/assets/hero-home-desk-night.webp?v=20261014') type('image/webp'), url('/assets/hero-home-desk-night.jpg?v=20261014') type('image/jpeg'));
  background-size:auto max(100%, 70vw);
  background-position:6% 0%;
}
@media (min-width:901px) and (max-width:1024px){
  .hero-photo-home{ background-position:15% 0%; }
}
@media (max-width:900px){
  /* phones/tablets: vertical pages keep the photo over the whole hero (cards carry the text) */
  .hero-photo-avia{ background-position:62% 50%; }
  .hero-photo::after{ background:linear-gradient(180deg, rgba(11,27,46,.06) 0%, rgba(11,27,46,.12) 60%, rgba(11,27,46,.45) 100%); }
}
/* phones, /avia (2026-10-13d): on a 360-640px phone the hero is ~1600-1900px tall, so
   "cover" scaled the 1920x1080 runway photo ~1.6x (x3-5 device px) and the 62% crop put
   only a blurred sliver of one plane behind the checklist card. Two layers of the same
   photo: (1) the whole 16:9 frame at ~0.42 scale (no upscale on 2x screens) with both
   planes at the top of the hero, behind the breadcrumb/H1 and to the right of the short
   H1 lines; its bottom edge (~420px) falls behind the checklist card; (2) the previous
   "cover" copy keeps the photo visible further down behind the cards. Tablets (641-900)
   and desktop are unchanged. */
@media (max-width:640px){
  .hero-photo-avia{
    background-image:url('/assets/hero-avia-runway-night.jpg?v=20261014'), url('/assets/hero-avia-runway-night.jpg?v=20261014');
    background-repeat:no-repeat;
    background-size:auto 450px, cover;
    background-position:64% -30px, 62% 50%;
  }
  /* the planes and runway lights now sit behind the H1: denser scrim keeps the champagne
     accent line >= 3:1 (WCAG AA, large text) */
  #avia-hero .hero-top .headline::before{ --scrim:.65; }
}
/* phones/tablets, /yourbusiness (2026-10-14): two layers of the same photo (as /avia):
   (1) the frame scaled to the width so the museum sits behind the breadcrumb/H1, its bottom
   edge hidden behind the checklist card; (2) a height-filling "cover" copy behind the cards,
   shifted on tablets so a piece of the museum shows to the right of the 420px form. */
@media (max-width:900px){
  .hero-photo-yourbusiness{
    background-image:url('/assets/hero-yourbusiness-motf-night.jpg?v=20261014'), url('/assets/hero-yourbusiness-motf-night.jpg?v=20261014');
    background-image:image-set(url('/assets/hero-yourbusiness-motf-night.webp?v=20261014') type('image/webp'), url('/assets/hero-yourbusiness-motf-night.jpg?v=20261014') type('image/jpeg')),
      image-set(url('/assets/hero-yourbusiness-motf-night.webp?v=20261014') type('image/webp'), url('/assets/hero-yourbusiness-motf-night.jpg?v=20261014') type('image/jpeg'));
    background-repeat:no-repeat;
    background-size:100% auto, cover;
    background-position:0% -100px, 39% 0;
  }
  /* lit towers/trails sit behind the 3-4 line H1 here: denser scrim keeps the champagne
     accent >= 3:1 (WCAG AA, large text; without it RU 768 fails at ~2.7:1) */
  #yourbusiness-hero .hero-top .headline::before{ --scrim:.68; }
}
@media (max-width:640px){
  .hero-photo-yourbusiness{
    background-size:153% auto, cover;
    background-position:0% -14px, 50% 100%;
  }
}
/* phones/tablets, home: the 16:9 photo is zoomed so the laptop screen sits behind the H1;
   below where that layer ends a second, height-filling copy of the same photo continues
   down the hero (behind the cards) instead of a solid navy fill. */
@media (max-width:900px){
  .hero-photo-home{
    background-image:url('/assets/hero-home-desk-night.jpg?v=20261014'), url('/assets/hero-home-desk-night.jpg?v=20261014');
    background-image:
      image-set(url('/assets/hero-home-desk-night.webp?v=20261014') type('image/webp'), url('/assets/hero-home-desk-night.jpg?v=20261014') type('image/jpeg')),
      image-set(url('/assets/hero-home-desk-night.webp?v=20261014') type('image/webp'), url('/assets/hero-home-desk-night.jpg?v=20261014') type('image/jpeg'));
    background-repeat:no-repeat;
  }
}
@media (min-width:641px) and (max-width:900px){
  .hero-photo-home{ background-size:190% auto, auto 100%; background-position:42% -150px, 62% 0; }
  .hero-photo-home::after{
    background:linear-gradient(180deg, rgba(11,27,46,.06) 0px, rgba(11,27,46,.12) 500px, rgba(11,27,46,.55) 664px, rgba(11,27,46,.28) 780px, rgba(11,27,46,.45) 100%);
  }
}
@media (max-width:640px){
  .hero-photo-home{ background-size:300% auto, auto 100%; background-position:41% -150px, 60% 0; }
  .hero-photo-home::after{
    background:linear-gradient(180deg, rgba(11,27,46,.06) 0px, rgba(11,27,46,.12) 380px, rgba(11,27,46,.55) 503px, rgba(11,27,46,.28) 600px, rgba(11,27,46,.45) 100%);
  }
}
/* 2026-10-14 "slightly less bright" (client decision), desktop only (>=901px), vertical
   pages /auto, /avia, /yourbusiness (EN+RU): one equal step down from the "bright" level —
   photo brightness 1 -> .88 and the full-bleed navy layer a little denser
   (.06/.10/.30/.55 -> .12/.16/.34/.58). Home and phone/tablet rules are unchanged.
   Previous level: 05_site_v3.16_backup_hero_dim_20261014/.
   Same date, load speed: desktop gets lighter WebP copies (*-desktop.webp, same 1920px
   frame/crop: /yourbusiness 293 -> 228 KB, /auto 275 -> 146 KB JPEG -> WebP, /avia
   234 -> 112 KB), preloaded from <head> with media="(min-width:901px)". Phones/tablets keep
   the original files (their rules above are untouched). Keep URLs in sync with the
   <link rel="preload"> tags in en|ru/{auto,avia,yourbusiness}/index.html. */
@media (min-width:901px){
  .hero-photo-auto{
    background-image:url('/assets/hero-auto-engine.jpg?v=20261014');
    background-image:image-set(url('/assets/hero-auto-engine-desktop.webp?v=20261014') type('image/webp'), url('/assets/hero-auto-engine.jpg?v=20261014') type('image/jpeg'));
  }
  .hero-photo-avia{
    background-image:url('/assets/hero-avia-runway-night.jpg?v=20261014');
    background-image:image-set(url('/assets/hero-avia-runway-night-desktop.webp?v=20261014') type('image/webp'), url('/assets/hero-avia-runway-night.jpg?v=20261014') type('image/jpeg'));
  }
  .hero-photo-yourbusiness{
    background-image:url('/assets/hero-yourbusiness-motf-night.jpg?v=20261014');
    background-image:image-set(url('/assets/hero-yourbusiness-motf-night-desktop.webp?v=20261014') type('image/webp'), url('/assets/hero-yourbusiness-motf-night.jpg?v=20261014') type('image/jpeg'));
  }
  .hero-photo-auto,
  .hero-photo-avia,
  .hero-photo-yourbusiness{ filter:saturate(1.08) contrast(1.05) brightness(.88); }
  .hero-photo-auto::after,
  .hero-photo-avia::after,
  .hero-photo-yourbusiness::after{
    background:linear-gradient(180deg, rgba(11,27,46,.12) 0%, rgba(11,27,46,.16) 50%, rgba(11,27,46,.34) 85%, rgba(11,27,46,.58) 100%);
  }
}
/* Hero photo: local readability layers (only in heroes with a .hero-photo sibling).
   Each .container is its own stacking context (z-index:2), so the layers are ::before
   pseudo-elements with z-index:-1 — behind the text of their own block, above the photo. */
.hero-photo ~ .container{ --ink-muted:#C5CDD8; } /* lighter muted grey only over photos (AA) */
.vertical-hero .hero-photo ~ .hero-grid{ margin-top:28px; } /* room for the card under the H1 */
.hero-photo ~ .hero-top .headline,
.hero-photo ~ .hero-top .breadcrumb,
.hero-photo ~ .hero-grid > *,
.hero-photo ~ .hero-meta-strip{ position:relative; }
/* cards: checklist column, form, stat strip */
.hero-photo ~ .hero-grid > *::before,
.hero-photo ~ .hero-meta-strip::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-16px -22px; border-radius:18px;
  background:rgba(11,27,46,var(--card,.72));
  border:1px solid rgba(245,242,236,.10);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero-photo ~ .hero-meta-strip{ border-top-color:transparent; } /* the card replaces the divider */
.hero-photo ~ .hero-meta-strip::before{ top:8px; bottom:-14px; left:calc(var(--side-pad) - 22px); right:calc(var(--side-pad) - 22px); }
#avia-hero{ --card:.78; } /* brightest photo (runway lights) */
@media (min-width:901px){
  /* two columns: keep a visible gap between the two cards and align the form card's right
     edge with the stat-strip card (form column is wider than the 420px form) */
  .hero-photo ~ .hero-grid{ column-gap:60px; }
  .hero-photo ~ .hero-grid > .hero-form-wrap{ justify-self:end; width:100%; }
}
@media (max-width:640px){
  /* side padding is only 20px here: cards stop 8px from the screen edge */
  .hero-photo ~ .hero-grid > *::before{ left:-12px; right:-12px; }
  .hero-photo ~ .hero-meta-strip::before{ left:calc(var(--side-pad) - 12px); right:calc(var(--side-pad) - 12px); }
}
/* tight feathered scrim behind breadcrumb + H1 */
.hero-photo ~ .hero-top .headline::before,
.hero-photo ~ .hero-top .breadcrumb::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-8px -18px; border-radius:30px;
  background:rgba(11,27,46,var(--scrim,.58)); filter:blur(14px);
}
.hero-photo ~ .hero-top .breadcrumb::before{ inset:-4px -12px; filter:blur(6px); --scrim:.72; }
.hero-photo ~ .hero-top .breadcrumb{ display:table; } /* scrim hugs the short crumb, not the full row */
.hero-photo ~ .hero-top .headline,
.hero-photo ~ .hero-top .breadcrumb{ text-shadow:0 1px 3px rgba(11,27,46,.55), 0 2px 18px rgba(11,27,46,.6); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-text); background:rgba(245,242,236,.08);
  border:1px solid rgba(245,242,236,.14);
  padding:8px 14px; border-radius:999px; margin-bottom:20px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--indigo); flex-shrink:0; }
.niche-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; letter-spacing:.02em;
  padding:8px 14px; border-radius:999px; margin-bottom:20px;
  background:color-mix(in srgb, var(--accent-niche) 18%, transparent);
  color:var(--accent-niche);
  border:1px solid color-mix(in srgb, var(--accent-niche) 45%, transparent);
}
.breadcrumb{
  font-size:.82rem; color:var(--ink-muted); margin-bottom:18px;
}
.breadcrumb a{ color:var(--ink-muted); }
.breadcrumb a:hover{ color:var(--ink-text); }
.breadcrumb .sep{ margin:0 6px; opacity:.5; }
.breadcrumb .current{ color:var(--ink-text); }

.hero-grid{ display:grid; gap:40px; grid-template-columns:1fr; align-items:center; }
.hero h1 .hl{ color:var(--indigo); }
.hero .lead{ color:var(--ink-muted); max-width:56ch; }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }

.brand-bridge{
  margin-top:28px; padding:16px 18px; border-radius:var(--radius-m);
  background:var(--ink-surface); border:1px solid var(--ink-border);
  font-size:.9rem; color:var(--ink-muted); max-width:60ch;
}
.brand-bridge strong{ color:var(--ink-text); }

/* ================= HOME HERO — new v2 composition (H1 full-width -> checklist/form
   two-column zone -> 5-card stat strip). Only used on the home page (#home) — /auto
   and /avia keep their existing hero-panel composition unchanged in this round.
   See 03_design_guide.md §6.3. ================= */
.hero-top{ padding-top:12px; }
#home .hero-top{ padding-top:0; }
#home.hero{ padding-top:28px; }

/* Vertical page heroes (auto/avia, 2026-08-11) — same v2 composition as #home
   but breadcrumb replaces the sub-header menu that home still has. Same fix as above:
   a more specific selector (2 classes) beats the generic `section{padding-block:...}`
   rule regardless of source order. */
.hero.vertical-hero{ padding-top:14px; }
.vertical-hero .hero-top{ padding-top:0; }

h1.headline{ margin:0; }
h1.headline .accent{
  display:block; width:100%; text-align:center;
  color:var(--indigo); margin-top:8px;
}

#home .hero-grid{ margin-top:44px; gap:52px; align-items:start; }

.hero-check-heading{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:1.2rem;
  color:var(--ink-text); margin:0 0 18px;
}
.hero-check-list{
  list-style:none; margin:0 0 22px; padding:0;
  display:flex; flex-direction:column; gap:14px;
  max-width:520px;
}
.hero-check-item{ display:flex; align-items:flex-start; gap:12px; }
.check-icon-wrap{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:var(--indigo-soft);
  display:flex; align-items:center; justify-content:center;
  margin-top:2px;
}
.check-icon-wrap svg{ width:13px; height:13px; }
.check-icon-wrap{ color:var(--indigo); } /* v3.1: SVG tick uses currentColor → champagne on dark hero */
.hero-check-item .check-text{ font-size:.98rem; line-height:1.55; color:var(--ink-muted); }
.hero-check-item .check-text strong{ color:var(--ink-text); font-weight:700; }

.hero-soft-link{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; font-size:.9rem; color:var(--ink-muted);
  text-decoration:underline; text-decoration-color:var(--ink-border); text-underline-offset:4px;
}
.hero-soft-link:hover{ color:var(--indigo); text-decoration-color:var(--indigo); }

/* Hero form — no card wrapper, fields float directly on the hero background. */
.hero-form-wrap{ max-width:420px; }
.hero-form-title{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:1.1rem;
  color:var(--ink-text); margin:0 0 18px; line-height:1.35;
}
.form-field-flat{ margin-bottom:12px; }
.form-field-flat input[type="text"],
.form-field-flat input[type="tel"],
.form-field-flat input[type="email"]{
  width:100%; padding:14px 16px; border-radius:8px;
  border:none; background:rgba(255,255,255,.94);
  font-family:'Inter',sans-serif; font-size:.95rem; color:var(--graphite);
}
.form-field-flat input::placeholder{ color:var(--slate); }
.form-field-flat input:focus{ outline:2px solid var(--cta-focus); outline-offset:2px; }
.hero-form-wrap .form-consent{ color:var(--ink-muted); margin:14px 0 18px; }
.hero-form-wrap .form-consent label{ color:var(--ink-muted); font-size:.8rem; }
.hero-form-wrap .btn-primary{ width:100%; }

/* Horizontal strip of 5 stat cards, separated from the two-column zone above by a rule. */
.hero-meta-strip{
  margin-top:48px; padding-top:28px; border-top:1px solid var(--ink-border);
  display:grid; grid-template-columns:repeat(5, 1fr); gap:24px 20px;
}
@media (max-width:860px){ .hero-meta-strip{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:560px){ .hero-meta-strip{ grid-template-columns:repeat(2, 1fr); } }
.hero-stat-card{ display:flex; align-items:center; gap:12px; min-width:0; }
.hero-stat-icon{ width:30px; height:30px; flex-shrink:0; stroke:var(--ink-muted); fill:none; }
.hero-stat-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.hero-stat-number{
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(.95rem, .8rem + .6vw, 1.3rem);
  color:var(--ink-text); font-variant-numeric:tabular-nums; line-height:1.15;
  overflow-wrap:anywhere; hyphens:auto; -webkit-hyphens:auto;
}
/* launch audit 2026-10-14: RU "Индивидуально" broke as "Индивидуальн/о" in the 2-col strip — slightly smaller on phones. */
@media (max-width:560px){ .hero-stat-number{ font-size:clamp(.88rem, .7rem + .9vw, 1rem); } }
/* min-width:0 + overflow-wrap: on narrow 2-col layouts (<=560px, see .hero-meta-strip
   below) a long unbroken RU word (e.g. "Автоматизация,") could otherwise force the grid
   column past the viewport edge — found via mobile audit, 2026-09-05. */
.hero-stat-caption{ font-size:.8rem; color:var(--ink-muted); line-height:1.4; overflow-wrap:anywhere; hyphens:auto; -webkit-hyphens:auto; }

.hero-panel{
  background:var(--ink-surface); border:1px solid var(--ink-border);
  border-radius:var(--radius-l); padding:24px;
}
.hero-panel .row{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--ink-border); }
.hero-panel .row:last-child{ border-bottom:none; }
.hero-panel .icon{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.hero-panel .txt strong{ display:block; color:var(--ink-text); font-size:.95rem; }
.hero-panel .txt span{ color:var(--ink-muted); font-size:.82rem; }

@media (min-width:901px){
  .hero-grid{ grid-template-columns:1.1fr .9fr; }
}

/* ================= SECTION HEAD ================= */
.section-head{ max-width:66ch; margin-bottom:40px; }
.section-head .kicker{
  display:block; color:var(--indigo); font-weight:700; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px;
}
.section-head p{ color:var(--slate); }
.section-light .section-head p{ color:var(--slate); }
.section-dark .section-head p{ color:var(--ink-muted); }
.section-dark .section-head .kicker{ color:var(--ink-text); opacity:.7; }

/* ================= NAVIGATOR (home vertical cards) ================= */
.navigator{ background:var(--paper); }
.card-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:641px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1025px){ .card-grid{ grid-template-columns:repeat(3,1fr); } }

.nv-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-l); padding:24px;
  border-top:3px solid var(--card-accent, var(--indigo));
  display:flex; flex-direction:column; height:100%;
}
.nv-card .icon{
  width:44px; height:44px; border-radius:12px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  background:color-mix(in srgb, var(--card-accent) 15%, transparent);
  color:var(--card-accent);
}
.nv-card h3{ margin-bottom:8px; }
.nv-card .pain{ color:var(--slate); font-size:.92rem; margin-bottom:6px; }
.nv-card .auto-ex{
  font-size:.85rem; color:var(--graphite); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-s);
  padding:10px 12px; margin-bottom:16px;
}
.nv-card .auto-ex b{ color:var(--card-accent); }
.nv-card .card-link{ margin-top:auto; font-weight:700; font-size:.9rem; color:var(--card-accent); display:inline-flex; align-items:center; gap:6px; }
.nv-card .card-link:hover{ text-decoration:underline; }

/* --- price + packages entry point (2026-08-08, added to the same 3 navigator cards) --- */
.nv-card .nv-packages{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.nv-card .nv-price{
  display:block; font-family:'Manrope',sans-serif; font-weight:800; font-size:.92rem;
  color:var(--graphite); margin-bottom:6px;
}
.nv-card .nv-packages-link{ font-weight:700; font-size:.85rem; color:var(--card-accent); display:inline-flex; align-items:center; gap:6px; }
.nv-card .nv-packages-link:hover{ text-decoration:underline; }

/* ================= DARK PROCESS SECTIONS (methodology / how it works) ================= */
.methodology,
.process{ background:var(--ink); color:var(--ink-text); }
.methodology .lead,
.process .lead{ color:var(--ink-muted); }

/* ================= STEPS (methodology / how it works) ================= */
.steps-list{ display:grid; gap:20px; grid-template-columns:1fr; counter-reset:step; }
@media (min-width:641px){ .steps-list{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1025px){ .steps-list.steps-5{ grid-template-columns:repeat(5,1fr); } .steps-list.steps-4{ grid-template-columns:repeat(4,1fr); } }
.step-item{
  background:var(--ink-surface); border:1px solid var(--ink-border); border-radius:var(--radius-l);
  padding:20px; counter-increment:step;
}
.step-item .step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--cta); color:var(--cta-text); font-family:'Manrope',sans-serif; font-weight:800; font-size:.9rem;
  margin-bottom:14px;
}
.step-item h3{ font-size:1.05rem; color:var(--ink-text); margin-bottom:6px; }
.step-item p{ color:var(--ink-muted); font-size:.9rem; margin-bottom:0; }

/* ================= WHY-US / THESES ================= */
.thesis-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:641px){ .thesis-grid{ grid-template-columns:repeat(2,1fr); } }
.thesis-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:20px; border-left:3px solid var(--indigo);
}
.thesis-item p{ margin-bottom:0; color:var(--slate); }

/* ================= PAINS ================= */
.pains{ background:var(--paper); }
.pains-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:641px){ .pains-grid{ grid-template-columns:repeat(2,1fr); } }
.pain-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:18px 20px; display:flex; gap:12px; align-items:flex-start;
}
.pain-item .mark{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:color-mix(in srgb, var(--accent-niche) 16%, transparent);
  color:var(--accent-niche); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85rem;
}
.pain-item p{ margin-bottom:0; color:var(--graphite); }

/* ================= SOLUTION GRID (vertical: 4 components) ================= */
.solution{ background:var(--surface); }
.solution-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:641px){ .solution-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1025px){ .solution-grid{ grid-template-columns:repeat(4,1fr); } }
.sol-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-l); padding:22px; }
.sol-card .icon{
  width:40px; height:40px; border-radius:10px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  background:color-mix(in srgb, var(--accent-niche) 15%, transparent);
  color:var(--accent-niche);
}
.sol-card .tag{
  display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; color:var(--accent-niche); margin-bottom:8px;
}
.sol-card p{ color:var(--slate); font-size:.92rem; margin-bottom:0; }

/* ================= DIFFERENTIATION ================= */
.diff{ background:var(--paper); }
.diff-list{ display:grid; gap:16px; margin-bottom:0; }
.diff-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:18px 20px; color:var(--slate);
}
.diff-item p{ margin-bottom:0; }
.diff-accent{
  margin-top:24px; padding:26px; border-radius:var(--radius-l);
  background:var(--ink); border:2px solid var(--accent-niche);
  color:var(--ink-text);
}
.diff-accent h3{ color:var(--ink-text); margin-bottom:10px; }
.diff-accent p{ color:var(--ink-muted); margin-bottom:0; }

/* ================= ROI CALCULATOR (auto vertical, 2026-08-08) =================
   Pattern ported from the approved logos-business-solutions reference calculator
   (light input panel + dark result panel), recoloured to this site's tokens so the
   accent automatically follows body[data-vertical] per page. ================= */
section.calculator{
  background:color-mix(in srgb, var(--accent-niche) 6%, var(--paper));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:860px){ .calc-grid{ grid-template-columns:1fr; } }
.calc-grid .panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:32px;
}
@media (max-width:640px){ .calc-grid .panel{ padding:24px 20px; } }
.calc-grid .field{ margin-bottom:28px; }
.calc-grid .field:last-child{ margin-bottom:0; }
.calc-grid .field-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; gap:10px; flex-wrap:wrap; }
.calc-grid .field-label{ font-weight:700; font-size:.96rem; color:var(--graphite); }
.calc-grid .field-value{ font-weight:800; color:var(--accent-niche); font-size:1.05rem; font-variant-numeric:tabular-nums; }
.calc-grid .field-hint{ font-size:.8rem; color:var(--slate); margin-bottom:14px; }

.calc-grid input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px;
  background:color-mix(in srgb, var(--accent-niche) 20%, var(--line));
  outline:none; margin:8px 0;
}
.calc-grid input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--accent-niche); border:3px solid var(--ink);
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.calc-grid input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%;
  background:var(--accent-niche); border:3px solid var(--ink); cursor:pointer;
}
.calc-grid input[type=range]:focus-visible{ outline:2px solid var(--accent-niche); outline-offset:4px; }

.calc-grid .fixed-box{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:16px 18px;
}
.calc-grid .fixed-box .label{ font-weight:700; font-size:.95rem; color:var(--graphite); }
.calc-grid .fixed-box .sub{ font-size:.78rem; color:var(--slate); }
.calc-grid .fixed-box .val{ font-weight:800; font-size:1.1rem; color:var(--accent-niche); }

.calc-grid .panel-result{ background:var(--ink); color:var(--ink-text); border:none; }
.calc-grid .result-kicker{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-niche); margin-bottom:8px; }
.calc-grid .result-sub-top{ font-size:.85rem; color:var(--ink-muted); margin-bottom:18px; }
.calc-grid .result-big{
  font-family:'Manrope',sans-serif; font-size:clamp(2rem, 1.6rem + 1.5vw, 3rem);
  font-weight:800; letter-spacing:-0.02em; line-height:1; margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}
.calc-grid .result-big .unit{ font-size:1.2rem; color:var(--ink-muted); font-weight:700; margin-left:8px; }
.calc-grid .breakdown{ border-top:1px solid var(--ink-border); padding-top:18px; margin:18px 0 24px; }
.calc-grid .b-row{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:.92rem; color:var(--ink-muted); }
.calc-grid .b-row b{ color:var(--ink-text); font-weight:700; font-variant-numeric:tabular-nums; }
.calc-grid .b-row.pos b{ color:var(--accent-niche); }
.calc-grid .b-row.neg b{ color:#E2574C; }

/* ================= TRUST ================= */
.trust{ background:var(--ink); color:var(--ink-text); }
.trust .section-head p{ color:var(--ink-muted); }
.trust-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:641px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
.trust-item{
  background:var(--ink-surface); border:1px solid var(--ink-border); border-radius:var(--radius-l);
  padding:20px; color:var(--ink-muted);
}
.trust-item p{ margin-bottom:0; }
.trust-item.is-honest-note{ border-style:dashed; font-style:italic; }
.trust--emphasized{ padding-block:calc(var(--section-pad) + 16px); border-top:3px solid var(--accent-niche); border-bottom:3px solid var(--accent-niche); }

/* ================= ILLUSTRATIVE EXAMPLE (2026-08-08, inside Trust block) ================= */
.illustrative-example{
  margin-top:32px; padding:24px clamp(20px,4vw,32px);
  border-radius:var(--radius-l);
  background:var(--ink-surface); border:1px solid var(--ink-border);
  border-left:4px solid var(--accent-niche);
  scroll-margin-top:90px;
}
.illustrative-label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; font-style:italic; letter-spacing:.01em;
  color:var(--accent-niche);
  background:color-mix(in srgb, var(--accent-niche) 16%, transparent);
  border:1px dashed color-mix(in srgb, var(--accent-niche) 55%, transparent);
  padding:7px 14px; border-radius:999px; margin-bottom:16px;
}
.illustrative-example h3{ color:var(--ink-text); margin-bottom:10px; }
.illustrative-example p{ color:var(--ink-muted); margin-bottom:0; }

/* ================= PACKAGES (redesign v2, 2026-08-08) — card style ported from the
   approved logos-business-solutions reference: badges, big price, checkmark feature
   list, one featured/"top pick" card per vertical. Still lives inside the existing
   Trust block (structure unchanged, see 03_design_guide.md §6.4) — cards are
   deliberately light/elevated islands against the dark section, same principle as the
   light form fields already used on the dark hero. ================= */
.packages{ margin-top:44px; scroll-margin-top:90px; }
.packages > h3{ color:var(--ink-text); margin-bottom:8px; }
.packages-note{ color:var(--ink-muted); font-size:.9rem; margin-bottom:24px; max-width:70ch; }
.pkg-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:641px){ .pkg-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1025px){ .pkg-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .pkg-grid{ max-width:420px; margin:0 auto; } }
/* Modifier for verticals with exactly 2 package cards (2026-09-05 premium repricing —
   /yourbusiness dropped its Quick Start tier, same fix pattern as .steps-4/.steps-5 above:
   an explicit count-based class instead of relying on the generic 3-col grid, which would
   otherwise leave an empty third column at desktop width). */
@media (min-width:1025px){ .pkg-grid.pkg-grid-2{ grid-template-columns:repeat(2,1fr); max-width:820px; margin:0 auto; } }

.pkg-card{
  position:relative;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-l); padding:26px 22px;
  display:flex; flex-direction:column; height:100%;
}
.pkg-card.featured{
  border:2px solid var(--cta);
  box-shadow:0 20px 46px -26px rgba(34,122,80,.45);
}
.pkg-pill{
  position:absolute; top:-13px; left:22px;
  background:var(--cta); color:var(--cta-text);
  font-family:'Manrope',sans-serif; font-size:.7rem; font-weight:800;
  padding:5px 12px; border-radius:999px;
}
.pkg-name{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:1.15rem;
  color:var(--graphite); margin-bottom:14px;
}
/* Small muted keyword-rich subtitle under .pkg-name — see 08_updated_site_copy_plan.md §10.1
   v3.1: --slate instead of --ink-muted (was 2.44:1 on the white card — WCAG fix, guide §2.6) */
.pkg-subtitle{
  font-family:'Inter',sans-serif; font-weight:500; font-size:.78rem;
  color:var(--slate); line-height:1.4; margin:-9px 0 16px;
}
.pkg-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.pkg-badge{
  background:color-mix(in srgb, var(--accent-niche) 14%, transparent);
  color:var(--accent-niche);
  font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:6px;
}
.pkg-badge.pkg-badge-monthly{
  background:color-mix(in srgb, var(--indigo) 16%, transparent);
  color:var(--indigo);
}
.pkg-price{
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
  margin-bottom:18px; color:var(--graphite);
  font-variant-numeric:tabular-nums;
}
.pkg-feats{ list-style:none; padding:0; margin:0 0 22px; flex:1; }
.pkg-feats li{
  display:flex; gap:8px; font-size:.9rem; color:var(--slate); line-height:1.55;
  padding:8px 0; border-top:1px solid var(--line);
}
.pkg-feats li:first-child{ border-top:none; }
.pkg-feats li .check{ color:var(--indigo); font-weight:800; flex-shrink:0; }
.pkg-card .btn{ width:100%; }

/* ================= LEAD MAGNET ================= */
.leadmagnet{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.leadmagnet--emphasized{
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent-niche) 8%, var(--surface)), var(--surface));
  border-top:3px solid var(--accent-niche);
}
.leadmagnet-inner{ display:grid; gap:28px; grid-template-columns:1fr; align-items:start; }
@media (min-width:901px){ .leadmagnet-inner{ grid-template-columns:1.1fr .9fr; } }
.leadmagnet-copy p{ color:var(--slate); }

/* ================= FAQ (native <details>/<summary>) ================= */
.faq{ background:var(--paper); }
.faq-list{ display:grid; gap:12px; max-width:840px; }
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:18px 20px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:1rem; color:var(--graphite);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:1.4rem; font-weight:400; color:var(--indigo); flex-shrink:0; line-height:1;
  transition:transform .15s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-answer{ padding:0 20px 20px; color:var(--slate); }
.faq-item .faq-answer p{ margin-bottom:0; }

/* ================= FINAL CTA ================= */
.final-cta{ background:var(--ink); color:var(--ink-text); }
.final-cta .lead{ color:var(--ink-muted); }
.final-cta-inner{ display:grid; gap:36px; grid-template-columns:1fr; }
@media (min-width:901px){ .final-cta-inner{ grid-template-columns:.9fr 1.1fr; } }

/* ================= FORMS ================= */
.form-card{
  background:var(--surface); color:var(--graphite); border-radius:var(--radius-l);
  border:1px solid var(--line); padding:24px;
}
.form-card h3{ color:var(--graphite); }
form .form-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:641px){ form .form-grid.two-col{ grid-template-columns:1fr 1fr; } }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field.full{ grid-column:1/-1; }
.form-field label{ font-size:.85rem; font-weight:600; color:var(--graphite); }
.form-field input,
.form-field textarea,
.form-field select{
  border:1px solid var(--line-strong); border-radius:var(--radius-s);
  padding:12px 14px; font-family:'Inter',sans-serif; font-size:1rem; color:var(--graphite);
  background:var(--surface); width:100%;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-soft);
}
.form-field textarea{ resize:vertical; min-height:88px; }
.form-field .hint{ font-size:.78rem; color:var(--slate); }
.form-consent{
  display:flex; align-items:flex-start; gap:10px; grid-column:1/-1;
  font-size:.85rem; color:var(--slate);
}
.form-consent input{ margin-top:3px; flex-shrink:0; width:18px; height:18px; }
.form-actions{ grid-column:1/-1; margin-top:4px; }
.form-note{ font-size:.78rem; color:var(--slate); margin-top:10px; }
.form-status{ font-size:.9rem; margin-top:12px; display:none; }
.form-status.is-success{ display:block; color:#1a7f4b; }
.form-status.is-error{ display:block; color:#b0271f; }

/* ================= TOAST NOTIFICATIONS (form submit feedback) =================
   Injected at runtime by js/form.js (function showToast) into a single
   #lbs-toast-region appended to <body> — no markup needed per page. Sits at
   the top of the viewport on every breakpoint so it never overlaps the
   fixed .sticky-cta bar at the bottom of mobile vertical pages. */
.lbs-toast-region{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:500; display:flex; flex-direction:column; gap:14px;
  width:calc(100% - 32px); max-width:800px; pointer-events:none;
}
@media (min-width:641px){ .lbs-toast-region{ top:20px; } }
.lbs-toast{
  pointer-events:auto; display:flex; align-items:flex-start; gap:18px;
  background:var(--ink); color:var(--ink-text);
  border:1px solid var(--ink-border); border-left:5px solid var(--cta);
  border-radius:var(--radius-l); padding:28px 32px;
  box-shadow:0 20px 56px rgba(11,27,46,.5);
  font-size:1.6rem; line-height:1.45;
  opacity:0; transform:translateY(-14px);
  transition:opacity .25s ease, transform .25s ease;
}
.lbs-toast.is-visible{ opacity:1; transform:translateY(0); }
.lbs-toast.is-error{ border-left-color:#b0271f; }
.lbs-toast-icon{
  flex-shrink:0; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:800; background:var(--cta); color:var(--cta-text); margin-top:1px;
}
.lbs-toast.is-error .lbs-toast-icon{ background:#b0271f; }
.lbs-toast-message{ flex:1; word-break:break-word; }
.lbs-toast-close{
  flex-shrink:0; background:none; border:0; color:var(--ink-muted);
  font-size:1.6rem; line-height:1; cursor:pointer; padding:2px 4px; margin:-2px -4px 0 0;
}
.lbs-toast-close:hover{ color:var(--ink-text); }
/* Scale back down on narrow screens so long error messages (e.g. the
   WhatsApp fallback text) stay readable and never overflow horizontally. */
@media (max-width:640px){
  .lbs-toast{ gap:12px; padding:18px 20px; font-size:1.05rem; }
  .lbs-toast-icon{ width:32px; height:32px; font-size:1rem; }
  .lbs-toast-close{ font-size:1.3rem; }
}

/* Honeypot anti-spam field — off-screen, not display:none (some bots skip
   hidden fields but still fill visually-offscreen ones, so this alone isn't
   the real defence; the n8n workflow drops any submission with this field
   filled server-side). Real users never see or fill it. */
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

/* leadmagnet form on dark hero panel */
.leadmagnet .form-card,
.hero .form-card{ }

/* ================= FOOTER ================= */
footer.site-footer{ background:var(--ink); border-top:1px solid var(--ink-border); color:var(--ink-muted); }
.footer-grid{ display:grid; gap:32px; grid-template-columns:1fr; padding-block:48px; }
@media (min-width:641px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.footer-col h4{ color:var(--ink-text); font-family:'Manrope',sans-serif; font-size:.95rem; margin-bottom:14px; }
.footer-col ul{ display:grid; gap:8px; }
.footer-col a{ font-size:.9rem; color:var(--ink-muted); }
.footer-col a:hover{ color:var(--ink-text); }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand .logo-mark{ height:24px; }
.footer-legal{ font-size:.8rem; color:var(--ink-muted); }
.footer-bottom{
  border-top:1px solid var(--ink-border); padding-block:20px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.8rem; color:var(--ink-muted);
}
.footer-whatsapp{
  display:inline-flex; align-items:center; gap:8px; color:var(--ink-text); font-weight:600;
}
.footer-whatsapp .dot{ width:8px; height:8px; border-radius:50%; background:var(--whatsapp); }

/* ================= STICKY MOBILE CTA (vertical pages, ≤640px) ================= */
.sticky-cta{ display:none; }
.sticky-cta.is-visible{ display:flex; }
@media (max-width:640px){
  .sticky-cta{
    display:none; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(11,27,46,.96); backdrop-filter:blur(8px);
    border-top:1px solid var(--ink-border);
  }
  .sticky-cta.is-visible{ display:flex; }
  .sticky-cta .btn-primary{ flex:1; padding:12px 16px; box-shadow:0 0 0 1px var(--cta-border); } /* v3.1: keep champagne edge, no drop shadow */
  .sticky-cta .wa{
    flex:0 0 48px; width:48px; height:48px; border-radius:var(--radius-m);
    background:var(--whatsapp); color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:1.3rem;
  }
  body.has-sticky-cta{ padding-bottom:76px; }
}

/* ================= FOOTER: privacy link + cookie settings (2026-10-09) ================= */
.footer-policy{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 18px; }
.footer-policy a,
.footer-cookie-btn{ color:var(--ink-muted); font:inherit; text-decoration:underline; text-underline-offset:3px; }
.footer-cookie-btn{ background:none; border:0; padding:0; cursor:pointer; }
.footer-policy a:hover,
.footer-cookie-btn:hover{ color:var(--ink-text); }
.footer-policy a:focus-visible,
.footer-cookie-btn:focus-visible{ outline:2px solid var(--brand-champ); outline-offset:3px; border-radius:2px; }

/* consent checkbox: policy link inside the label */
.form-consent a{ color:inherit; text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.form-consent a:hover{ color:var(--indigo); }

/* ================= COOKIE BANNER (js/consent.js) =================
   Bottom bar, sits above the mobile .sticky-cta (z 60) only while open.
   Both buttons share one class — equal size and visual weight by design
   (privacy memo 5.4). */
.lbs-cc{
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  background:var(--ink); color:var(--ink-text);
  border-top:2px solid var(--brand-champ);
  box-shadow:0 -10px 32px rgba(11,27,46,.35);
  padding:16px var(--side-pad) calc(16px + env(safe-area-inset-bottom));
}
.lbs-cc[hidden]{ display:none; }
.lbs-cc-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; gap:16px 32px;
}
.lbs-cc-text{ margin:0; flex:1 1 auto; font-size:.875rem; line-height:1.55; color:var(--ink-text); }
.lbs-cc-text a{ color:var(--brand-champ); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.lbs-cc-actions{ flex:0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lbs-cc-btn{
  min-height:44px; padding:10px 20px; min-width:180px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.92rem; line-height:1.2;
  color:var(--ink-text); background:transparent;
  border:1.5px solid var(--brand-champ); border-radius:var(--radius-m);
  cursor:pointer; transition:background .15s ease, color .15s ease;
}
.lbs-cc-btn:hover{ background:var(--brand-champ); color:var(--brand-navy); }
.lbs-cc-btn:focus-visible,
.lbs-cc-text a:focus-visible{ outline:2px solid var(--brand-ivory); outline-offset:2px; }
@media (max-width:900px){
  .lbs-cc-inner{ flex-direction:column; align-items:stretch; }
  .lbs-cc-btn{ min-width:0; }
}
@media (max-width:640px){
  .lbs-cc{ padding:12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .lbs-cc-inner{ gap:10px; }
  .lbs-cc-text{ font-size:.78rem; line-height:1.45; }
  .lbs-cc-btn{ padding:10px 8px; font-size:.85rem; }
}

/* ================= PRIVACY POLICY PAGE (/en|ru/privacy/) ================= */
.legal-page{ padding-block:clamp(40px, 6vw, 80px) var(--section-pad); }
.legal-doc{ max-width:780px; margin:0 auto; color:var(--graphite); font-size:1rem; line-height:1.7; overflow-wrap:break-word; }
.legal-doc h1{ font-size:clamp(1.5rem, 1.1rem + 2.4vw, 2.75rem); margin-bottom:.4em; hyphens:auto; -webkit-hyphens:auto; }
/* launch audit 2026-10-14: at 390px RU "конфиденциальности" was split mid-word without a hyphen — smaller floor + hyphenation. */
.legal-doc .legal-dates{ color:var(--slate); font-size:.9rem; margin-bottom:1.6em; }
.legal-doc h2{ font-size:clamp(1.25rem, 1.1rem + .7vw, 1.6rem); margin:2em 0 .6em; scroll-margin-top:90px; }
.legal-doc p{ margin:0 0 1em; }
.legal-doc ul{ list-style:disc; padding-left:1.4em; margin:0 0 1.1em; }
.legal-doc li{ margin-bottom:.4em; }
.legal-doc strong{ font-weight:600; color:var(--brand-navy); }
.legal-doc a{ color:var(--niche-light); text-decoration:underline; text-underline-offset:2px; }
.legal-doc a:hover{ color:var(--brand-navy); }
.legal-doc code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em; background:rgba(11,27,46,.06); border:1px solid var(--line); border-radius:4px; padding:1px 5px; white-space:nowrap; }
.legal-doc hr{ border:0; border-top:1px solid var(--line); margin:2em 0; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 1.4em; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); }
.table-wrap:focus-visible{ outline:2px solid var(--cta-focus); outline-offset:2px; }
.legal-doc table{ width:100%; min-width:560px; border-collapse:collapse; font-size:.9rem; line-height:1.5; }
.legal-doc th, .legal-doc td{ text-align:left; vertical-align:top; padding:10px 14px; border-bottom:1px solid var(--line); }
.legal-doc th{ background:var(--paper); font-family:'Manrope',sans-serif; font-weight:700; color:var(--brand-navy); white-space:nowrap; }
.legal-doc tr:last-child td{ border-bottom:0; }
@media (max-width:640px){
  .legal-doc{ font-size:.95rem; }
  .legal-doc table{ font-size:.85rem; }
}

/* ================= REDIRECT PAGE (root) ================= */
.redirect-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--ink-text); text-align:center; padding:24px;
}
.redirect-screen .box{ max-width:480px; }
.redirect-screen a{ color:var(--indigo); font-weight:700; text-decoration:underline; }

/* ================= UTILITIES ================= */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}