/* ------------------------------------------------------------
   Brand layer — overrides + content-widget library on top of the
   (re-skinned) Dennis engine. Shell/animations stay 1:1 with the
   example; these classes only style MY content (numbers, cases,
   charts, accordions, reviews, education, formats).
   Colours mapped to the engine palette (var(--color-blue) etc.).
   ------------------------------------------------------------ */

:root{
  --b-canvas:#1C1D20;
  --b-white:#FFFFFF;
  --b-fog:#999D9E;
  --b-graphite:#494A4D;
  --b-accent:var(--color-blue);        /* #72C7F6 */
  --b-accent-deep:var(--color-blue-dark); /* #13294E */
  --b-line:rgba(255,255,255,.12);
  --b-ring:rgba(255,255,255,.2);
  --b-rcard:10px;
  --b-rpill:36.72px;
}

/* Cyrillic reads better slightly tighter than Neue Montreal */
h1, h2, h4 { letter-spacing:-0.01em; }

/* убрать точку в начале приветствий/слов на загрузочном экране (все переходы + главная) */
.loading-container .dot{ display:none; }

/* ---- brand logo (top-left, replaces "© Code by Dennis") ---- */
.nav-bar .credits-top{ display:flex; align-items:center; gap:clamp(14px,1.6vw,22px); }
.nav-bar .credits-top .brand-logo{ width:clamp(30px,2.4vw,40px); height:auto; display:block; }

/* ---- "open to new projects" badge, left of the logo ---- */
.open-badge{ display:flex; align-items:center; gap:.55em; }
.open-badge-dot{ width:11px; height:11px; border-radius:50%; background:#3ecf6a; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(62,207,106,.6); animation:open-badge-pulse 1.8s ease-out infinite; }
.open-badge-text{ font-size:clamp(14px,1.2vw,19px); line-height:1.2; color:var(--color-white);
  white-space:nowrap; opacity:.85; }
@keyframes open-badge-pulse{
  0%{ box-shadow:0 0 0 0 rgba(62,207,106,.55); }
  70%{ box-shadow:0 0 0 6px rgba(62,207,106,0); }
  100%{ box-shadow:0 0 0 0 rgba(62,207,106,0); }
}

/* ---- location capsule: flag photo inside a GREY circle ---- */
.home-header .hanger .digital-ball{ background:var(--b-graphite); overflow:hidden; }
.home-header .hanger .flag-emoji{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:1.9em; height:1.9em; object-fit:cover; border-radius:50%; }

/* ---- photo: full height, natural width (transparent cutout, never cropped).
   max-width:none overrides the global `img{max-width:100%}` reset in
   styleguide.css, which otherwise silently caps/squishes this image. ---- */
.home-header .personal-image img{ left:50%; transform:translateX(-50%); width:auto; height:100%; max-width:none; }

/* desktop: shift the photo left so it doesn't crowd the h1 name underneath,
   and push it down a bit (top offset) so the portrait sits lower in the frame */
@media screen and (min-width:721px){
  .home-header .personal-image img{ left:36%; top:12%; }
}

/* ---- hero subtitle: to the RIGHT of the photo, bigger, closer to 3 lines ---- */
.home-header .row .flex-col h4{ font-size:clamp(20px,2vw,26px); line-height:1.4; max-width:32ch;
  font-weight:450; color:var(--color-white); }
.home-header .row .flex-col h4 span{ display:inline; font-weight:600; }

/* ---- mobile hero: tall dominant photo with the name + arrow/badge/subtitle
   overlaid at the bottom (like the reference). The photo is anchored to the
   BOTTOM (bottom:0), so its lower edge sits exactly on the hero's gray border
   with no gap. Because this is a transparent cutout (not a rectangular studio
   shot), the silhouette narrows to ~40-60% width through the torso but is
   ~90-99% wide near the bottom — so overlaying the text on the LOWER body
   keeps it on solid pixels, no ragged diagonal edge behind it. ---- */
.hero-meta-mobile{ display:none; }

@media screen and (max-width:720px){
  .home-header{
    display:flex; flex-direction:column; justify-content:flex-end;
    min-height:calc(var(--vh,1vh)*100); height:calc(var(--vh,1vh)*100); max-height:calc(var(--vh,1vh)*100);
    padding-top:0; padding-bottom:calc(var(--gap-padding)*1.5);
  }

  /* photo fills the header, anchored to the bottom edge → flush with the gray
     border, no gap. Sides crop under the header's overflow:hidden. */
  .home-header .personal-image{ position:absolute; inset:0; top:auto; bottom:0; left:0;
    width:100%; height:calc(var(--vh,1vh)*100); background:none; }
  /* height:100% + bottom:0 keeps the bottom flush; -64% (not -50%) centers on
     the real face, which sits at ~64% of the crop's width (the person is
     turned, so the image's own midpoint isn't where the face is) */
  .home-header .personal-image img{ position:absolute; bottom:0; top:auto; left:50%;
    transform:translateX(-64%); width:auto; height:100%; max-width:none; }

  /* name + arrow/badge/subtitle overlaid at the bottom, over the wide lower body */
  .home-header .big-name{ order:1; position:relative; top:auto; bottom:auto; left:auto; width:auto; padding-bottom:0; }
  .home-header .container{ order:2; padding-top:calc(var(--gap-padding)*1.4); padding-bottom:0; }
  /* arrow pinned in normal flow above the subtitle with a clear gap — no
     parallax/absolute offset on phones, so it never lands on the heading */
  .home-header .row .flex-col .header-above-h4{ position:relative !important; top:auto !important;
    transform:none !important; margin:0 0 1.5em; line-height:1; display:block; }
  .home-header .row .flex-col h4{ font-size:clamp(14px,3.6vw,18px); max-width:30ch; line-height:1.55; }

  /* the template's own badge/hanger are absolutely positioned for a one-line
     subtitle and collide with our longer copy — replace both with one row that
     lives in normal document flow, right above the arrow */
  .home-header .open-badge,
  .home-header .hanger{ display:none; }

  .hero-meta-mobile{ display:flex; align-items:center; flex-wrap:wrap; gap:.5em;
    margin-bottom:1.3em; font-size:12.5px; color:var(--color-white); opacity:.85; }
  .hero-meta-dot{ width:7px; height:7px; border-radius:50%; background:#3ecf6a; flex:0 0 auto; }
  .hero-meta-sep{ opacity:.5; }
  .hero-meta-flag{ width:16px; height:16px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
}

/* ---- "сейчас во Вьетнаме" — bigger, 2 lines (spans stay block from style-new.css) ---- */
.home-header .hanger p{ font-size:clamp(15px,1.5vw,19px); }
.home-header .hanger p span{ white-space:nowrap; }

/* ---- trust logos strip: bigger logos, running marquee.
   Two identical <ul> copies back to back, each with the same trailing margin
   as its own item gap, so translateX(-50%) of the whole track lands exactly
   on the second copy — a seamless loop with no jump. ---- */
.trust-logos{ background:var(--b-white); padding:clamp(32px,5vw,56px) 0; overflow:hidden; }
.trust-logos-track{ display:flex; width:max-content; animation:trust-marquee 26s linear infinite; }
.trust-logos-track:hover{ animation-play-state:paused; }
.trust-logos-list{ display:flex; flex-wrap:nowrap; align-items:center;
  gap:clamp(48px,7vw,96px); list-style:none; padding:0; margin:0 clamp(48px,7vw,96px) 0 0; flex:0 0 auto; }
.trust-logos-list img{ display:block; height:clamp(34px,4vw,52px); width:auto; max-width:180px; object-fit:contain; }
@keyframes trust-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* halve the gap between logos strip and the intro (second screen) */
.trust-logos + .home-intro{ padding-top:calc(var(--section-padding) / 2); }

/* ---- footer lead under "Расскажите о задаче" ---- */
.footer-lead{ margin-top:.75em; color:var(--b-fog); font-size:clamp(15px,1.4vw,18px);
  line-height:1.55; max-width:36ch; }

/* ---- "Все кейсы" button — sit higher under the grid, but keep clear of the footer curve ---- */
.center-grid-btn-home{ padding-top:calc(var(--section-padding) / 5); padding-bottom:clamp(3.5em,9vh,7em); }

/* ---- cases grid on mobile: bring back as a compact stacked list (title + category, no photo) ---- */
@media screen and (max-width:1024px){
  .large-work-grid{ display:block; }
  .large-work-grid .row{ flex-direction:column; align-items:flex-start; padding:1.2em 0; }
  .large-work-grid .work-items .flex-col:nth-child(1),
  .large-work-grid .work-items .flex-col:nth-child(2){ width:100%; padding:0; }
  .large-work-grid .work-items h4{ font-size:clamp(22px,7vw,32px); }
  .large-work-grid .work-items .flex-col:nth-child(2) p{ margin-top:.3em; color:var(--b-fog); font-size:14px; }
}

/* ---- fullscreen menu: compact type so links + bottom bar fit ---- */
.fixed-nav-inner{ overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.fixed-nav .nav-row h5{ margin-bottom:1.4em; }
.fixed-nav .nav-row ul{ padding-top:2.5vh; }
.fixed-nav .nav-row .btn-text-inner{ font-size:clamp(24px,3vw,40px); line-height:1.22; }
.fixed-nav .social-row .btn-text-inner,
.fixed-nav .menu-bottom-contacts .btn-text-inner{ font-size:clamp(15px,1.4vw,19px); }
.fixed-nav .socials h5{ padding-left:0; }

@media screen and (max-width:540px){
  /* Bottom bar owns the lower edge; nav list scrolls inside remaining space. */
  .fixed-nav-inner{ overflow:hidden; }
  .fixed-nav .nav-row h5{ margin-bottom:.85em; }
  .fixed-nav .nav-row ul{ padding-top:.6vh; }
  .fixed-nav .nav-row .btn-text-inner{ font-size:clamp(22px,6.2vw,28px); line-height:1.26; }
  .fixed-nav .menu-bottom-contacts .btn-text-inner{ font-size:clamp(15px,3.8vw,17px); }
}

/* content colour on dark inner sections */
.theme-dark .b-muted, .b-muted{ color:var(--b-fog); }
.b-hl,.hl{ color:var(--b-accent); }
.b-lead{ font-size:clamp(17px,1.6vw,21px); line-height:1.55; color:var(--b-white); max-width:62ch; }
.b-eyebrow{ font-size:12px; font-weight:450; color:var(--b-fog); letter-spacing:.14em; text-transform:uppercase; display:inline-block; }

/* section head (no top rule — a hairline between same-colour dark screens reads
   as a broken seam; keep the eyebrow + number, drop the divider line) */
.b-sec-head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding-top:0; margin-bottom:clamp(20px,3vw,36px); }
.b-sec-head .num{ font-size:12px; color:var(--b-fog); letter-spacing:.1em; }

/* ---- numbers ---- */
.b-nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); }
.b-numcard{ border-top:1px solid var(--b-line); padding-top:20px; }
.b-num{ font-size:clamp(44px,6vw,84px); font-weight:450; line-height:1; letter-spacing:-.01em; color:var(--b-white); }
.b-num small{ font-size:.42em; color:var(--b-fog); margin-left:.15em; }
.b-numcard p{ margin-top:14px; font-size:14px; line-height:1.5; color:var(--b-fog); }

/* ---- KPI ---- */
.b-kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.b-kpi{ background:var(--b-graphite); border-radius:var(--b-rcard); padding:16px 18px; }
.b-kpi .v{ font-size:clamp(24px,2.6vw,32px); font-weight:450; color:var(--b-accent); line-height:1; }
.b-kpi .l{ margin-top:8px; font-size:12.5px; line-height:1.4; color:var(--b-fog); }

/* ---- cases ---- */
.b-case{ border-top:1px solid var(--b-line); padding-top:clamp(28px,4vw,48px); }
.b-case + .b-case{ margin-top:clamp(48px,7vw,110px); }
.b-case__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.b-case__idx{ display:flex; align-items:center; gap:16px; }
.b-case__idx .n{ font-size:13px; color:var(--b-accent); font-weight:600; }
/* белые логотипы кейсов на тёмном фоне, без подложки */
.b-case__logo{ height:26px; width:auto; filter:brightness(0) invert(1); opacity:.9; }
.b-case__period{ font-size:12px; color:var(--b-fog); white-space:nowrap; }
.b-case__title{ margin-top:16px; font-size:clamp(22px,2.8vw,34px); font-weight:450; line-height:1.1; max-width:none; }
.b-case__task{ margin-top:16px; font-size:15px; line-height:1.6; color:var(--b-fog); max-width:70ch; }
.b-case__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); margin-top:32px; align-items:start; }
.b-list{ display:flex; flex-direction:column; gap:16px; }
.b-list li{ font-size:14.5px; line-height:1.55; color:var(--b-fog); padding-left:22px; position:relative; list-style:none; }
.b-list li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--b-accent); }
.b-list b{ color:var(--b-white); font-weight:600; }
.b-links{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.b-inline{ color:var(--b-accent); text-decoration:underline; text-underline-offset:3px; }

/* ---- chart box ---- */
.b-chart{ background:var(--b-graphite); border-radius:var(--b-rcard); padding:20px; }
.b-chart .t{ font-size:13px; color:var(--b-white); font-weight:450; margin-bottom:6px; }
.b-chart svg{ width:100%; height:auto; }
.b-chart-note{ margin-top:10px; font-size:12px; color:var(--b-fog); line-height:1.4; }
.b-brands{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.b-brand-pill{ font-size:12.5px; color:var(--b-white); padding:9px 15px; border-radius:var(--b-rpill); box-shadow:var(--b-ring) 0 0 0 1px inset; }

/* ---- steps ---- */
.b-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); }
.b-step{ border-top:1px solid var(--b-line); padding-top:22px; }
.b-step .k{ font-size:13px; color:var(--b-accent); font-weight:600; }
.b-step h4{ margin-top:14px; font-size:clamp(19px,2vw,24px); font-weight:450; }
.b-step p{ margin-top:12px; font-size:14px; line-height:1.55; color:var(--b-fog); }

/* ---- about / education ---- */
.b-about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.b-about img{ width:100%; border-radius:var(--b-rcard); object-fit:cover; }
.b-facts{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.b-facts li{ font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:var(--b-fog); padding-left:22px; position:relative; list-style:none; }
.b-facts li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--b-accent); }
.b-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px); }
.b-strip img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--b-rcard); }
.b-edu{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); }
.b-edu-item{ border-top:1px solid var(--b-line); padding:18px 0; }
.b-edu-item .name{ font-size:clamp(18px,1.7vw,22px); font-weight:450; color:var(--b-white); }
.b-edu-item .meta{ margin-top:8px; font-size:clamp(15px,1.4vw,18px); color:var(--b-fog); }
.b-certs{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.b-cert{ position:relative; border-radius:var(--b-rcard); overflow:hidden; display:block; }
.b-cert img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .4s; }
.b-cert:hover img{ transform:scale(1.03); }
.b-cert .cap{ position:absolute; left:0; right:0; bottom:0; padding:16px; font-size:12.5px;
  background:linear-gradient(0deg,rgba(0,0,0,.78),transparent); color:var(--b-white); }

/* ---- accordion: smooth open/close ----
   A native <details> pops open with zero animation. `::details-content` +
   `interpolate-size` let the browser animate to `height:auto` with no JS and no
   extra wrapper. Browsers without support simply keep the instant toggle.
   The height change is fed back to Locomotive via the `toggle` listener in
   index-new.js — it caches the scroll limit and would otherwise strand
   everything below the accordion. */
@supports (interpolate-size: allow-keywords) {
  :root{ interpolate-size: allow-keywords; }
  details::details-content{
    block-size:0; overflow:clip;
    transition:block-size .35s cubic-bezier(.4,0,.2,1), content-visibility .35s allow-discrete;
  }
  details[open]::details-content{ block-size:auto; }
  @media (prefers-reduced-motion:reduce){ details::details-content{ transition:none; } }
}

/* ---- accordion (services / faq) ---- */
.b-acc-list{ display:flex; flex-direction:column; }
.b-acc{ border-top:1px solid var(--b-line); }
.b-acc:last-child{ border-bottom:1px solid var(--b-line); }
.b-acc summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 0; font-size:clamp(17px,2vw,22px); font-weight:450; color:var(--b-white); }
.b-acc summary::-webkit-details-marker{ display:none; }
.b-acc .plus{ position:relative; width:18px; height:18px; flex:0 0 auto; }
.b-acc .plus::before,.b-acc .plus::after{ content:""; position:absolute; background:var(--b-accent); transition:transform .3s; }
.b-acc .plus::before{ top:8px; left:0; width:18px; height:2px; }
.b-acc .plus::after{ left:8px; top:0; width:2px; height:18px; }
.b-acc[open] .plus::after{ transform:scaleY(0); }
.b-acc__body{ padding:0 0 30px 0; font-size:clamp(19px,1.7vw,24px); line-height:1.6; color:var(--b-fog); max-width:none; }
.b-acc__body a{ color:var(--b-accent); text-decoration:underline; text-underline-offset:3px; }

/* ---- formats ---- */
.b-formats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.b-format{ background:var(--b-graphite); border-radius:var(--b-rcard); padding:24px; display:flex; flex-direction:column; gap:14px; }
.b-format h3{ font-size:19px; font-weight:450; }
.b-format .price{ font-size:clamp(22px,2.4vw,28px); font-weight:450; color:var(--b-accent); line-height:1; }
.b-format p{ font-size:13.5px; line-height:1.55; color:var(--b-fog); flex:1; }
.b-formats-note{ margin-top:20px; font-size:13px; color:var(--b-fog); }

/* ---- reviews: clean video grid, no card frame around the videos ---- */
.b-reviews{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.b-review{ border-radius:var(--b-rcard); overflow:hidden; background:transparent; aspect-ratio:9/16; }
.b-review iframe{ width:100%; height:100%; border:0; display:block; }

/* ---- role / column sub-heading (about, reviews) ---- */
.b-role-title{ font-size:clamp(21px,2.4vw,28px); font-weight:450; color:var(--b-white); margin-bottom:18px; }

/* ---- FIX: inner pages must be fully dark. `theme-dark` only flips TEXT to
   white — it does NOT paint a dark background on a generic .section (only
   home-header / footer-wrap / default-header carry that bg). Without this the
   content sections render white text on the default WHITE base = unreadable.
   Paint every section on the inner pages dark, AND the footer transition curve
   (.rounded-div defaults to WHITE — meant for a white→dark homepage handoff; on
   an all-dark page it must be dark or it flashes a white arc before the footer).
   Any element with a .default-header is an inner page; the homepage uses
   .home-header, so :has() cleanly excludes it and auto-covers future pages. ---- */
main:has(.default-header) .section,
main:has(.default-header) .footer-rounded-div .rounded-div{ background:var(--color-dark); }

/* ---- FIX: seamless dark-on-dark flow + tighter vertical rhythm on inner pages.
   1) The footer's curved reveal (.footer-rounded-div) exists to blend a WHITE
      content block into the dark footer on the homepage. On all-dark inner pages
      it only produces a faint crooked arc/seam between two same-colour screens —
      hide it so content flows flat into the footer. */
main:has(.default-header) .footer-rounded-div{ display:none; }
/* 2) The default-header + first section stacked far too much empty space under
      the page title, and inner sections were as tall as the homepage's. Pull
      them together so the screens sit closer. */
main:has(.default-header) .default-header{ padding-bottom:0; }
main:has(.default-header) .section{ padding-top:clamp(2em,6vh,4em); padding-bottom:clamp(2em,6vh,4em); }
main:has(.default-header) .default-header + .section{ padding-top:clamp(1em,3vh,2em); }

/* ---- FIX round 3 (feedback): nav grid, active state, footer, typography ---- */
/* nav-bar on the same grid as content: logo aligns with the page title's left
   edge, menu with the content's right edge (was hugging the viewport edge) */
main:has(.default-header) .nav-bar{ left:50%; transform:translateX(-50%) rotate(0.001deg);
  width:100%; max-width:100em; padding-left:var(--container-padding); padding-right:var(--container-padding); }
/* page title needs air below the nav — it was stuck to it */
main:has(.default-header) .default-header{ padding-top:clamp(7.5em,18vh,13em); }
/* the footer is a .section too, so the tightened section padding pulled it up;
   restore proper top breathing room on the last block */
main:has(.default-header) .footer{ padding-top:clamp(6em,13vh,10em); }
/* active page highlighted blue in BOTH the top nav and the fullscreen menu */
.btn-link.active .btn-text-inner{ color:var(--color-blue); }
/* bigger body text (cases list, case task, lead) — was too small to read */
main:has(.default-header) .b-list li{ font-size:clamp(16px,1.5vw,19px); line-height:1.6; }
.b-case__task{ font-size:clamp(16px,1.5vw,19px); line-height:1.6; }
.b-case__title{ font-size:clamp(24px,3vw,38px); }
.b-lead{ font-size:clamp(19px,1.9vw,24px); }

/* ---- responsive ---- */
@media (max-width:1080px){
  .b-nums{ grid-template-columns:repeat(2,1fr); }
  .b-steps{ grid-template-columns:repeat(2,1fr); }
  .b-formats{ grid-template-columns:repeat(2,1fr); }
  .b-reviews{ grid-template-columns:repeat(2,1fr); }
  .b-case__cols{ grid-template-columns:1fr; }
  .b-about,.b-edu{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .b-nums{ grid-template-columns:1fr 1fr; }
  /* KPI grids appear in every case and some pages set four columns inline.
     Keep the mobile layout readable by overriding those inline desktop grids. */
  .b-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .b-certs,.b-strip{ grid-template-columns:1fr; }
  .b-reviews{ grid-template-columns:1fr 1fr; }
}
@media (max-width:460px){
  .b-nums,.b-formats,.b-reviews{ grid-template-columns:1fr; }
}

/* ===== Image viewer ===== */
html.lb-open{ overflow:hidden; }
.lb-source{ position:relative; }
.lb-source--image{ display:block; min-width:0; overflow:hidden; border-radius:var(--b-rcard); }
.lb-source > img[data-lightbox], [data-lightbox-host] > img[data-lightbox]{ cursor:zoom-in; }
.lb-source__open{
  position:absolute; z-index:2; left:var(--lb-cursor-x,50%); top:var(--lb-cursor-y,50%); right:auto; bottom:auto; width:56px; height:56px; padding:0;
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.8); border-radius:50%;
  background:#fff; color:#171217; cursor:none; visibility:hidden; transform:translate(-50%,-50%) scale(.14);
  transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.18); -webkit-tap-highlight-color:transparent;
}
.lb-source:hover > .lb-source__open, .lb-source:focus-within > .lb-source__open,
[data-lightbox-host]:hover > .lb-source__open, [data-lightbox-host]:focus-within > .lb-source__open{ visibility:visible; transform:translate(-50%,-50%) scale(1); transition-delay:0s; }
.lb-source__open:hover{ transform:translate(-50%,-50%) scale(1.08); box-shadow:0 12px 26px rgba(0,0,0,.24); }
.lb-source__open svg, .lb__control svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.lb{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:clamp(18px,4vw,56px); background:rgba(12,13,15,.96); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .34s ease, visibility 0s linear .34s; -webkit-tap-highlight-color:transparent;
}
.lb.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.lb__fig{ position:relative; margin:0; max-width:100%; max-height:100%; transform:scale(.96); opacity:0; transition:transform .48s cubic-bezier(.16,1,.3,1), opacity .28s ease; }
.lb.is-open .lb__fig{ transform:scale(1); opacity:1; }
.lb__img{ max-width:92vw; max-height:82vh; width:auto; height:auto; object-fit:contain; border-radius:4px; display:block; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lb__toolbar{
  position:fixed; z-index:2; left:50%; bottom:clamp(18px,4vh,48px); display:flex; align-items:center; justify-content:center; gap:36px;
  transform:translateX(-50%);
  color:#fff; pointer-events:none;
}
.lb__control, .lb__count{
  height:72px; min-width:72px; border:0; border-radius:50%; background:#fff; color:#171217;
  display:grid; place-items:center; box-shadow:0 9px 20px rgba(0,0,0,.13);
}
.lb__control{ padding:0; cursor:pointer; pointer-events:auto; transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; }
.lb__control:hover{ box-shadow:0 13px 26px rgba(0,0,0,.2); }
.lb__prev:hover{ transform:translateX(-4px) scale(1.06); }
.lb__next:hover{ transform:translateX(4px) scale(1.06); }
.lb__x{ height:88px; min-width:88px; }
.lb__x:hover{ transform:rotate(8deg) scale(1.08); }
.lb__count{ display:none !important; }
.lb__count i{ margin:0 4px; font-style:normal; opacity:.55; }
@media (max-width:640px){
  .lb-source__open{ display:none; }
  .lb__img{ max-width:94vw; max-height:76vh; }
  .lb__toolbar{ bottom:calc(12px + env(safe-area-inset-bottom, 0px)); gap:18px; }
  .lb__control{ height:58px; min-width:58px; }
  .lb__x{ height:70px; min-width:70px; }
}
@media (hover:hover) and (pointer:fine){
  .lb-source:hover, [data-lightbox-host]:hover,
  .lb-source:hover > img[data-lightbox], [data-lightbox-host]:hover > img[data-lightbox]{ cursor:none; }
}
@media (prefers-reduced-motion:reduce){
  .lb, .lb__fig, .lb-source__open, .lb__control{ transition:none; }
}

/* ===== SEO: heading semantics on the homepage =====
   The giant name is a brand visual, not the page topic, so it drops from <h1>
   to <p class="name-title">, and the descriptive hero line becomes the real
   <h1>. These rules re-apply the exact declarations the old tags used
   (.home-header .big-name h1 / .home-header .row .flex-col h4), so nothing
   moves visually. */
.home-header .big-name .name-title{
  position:relative; display:flex; align-items:center; color:var(--color-white);
  line-height:1; font-size:max(9em,15vw); white-space:nowrap; pointer-events:none;
  margin:0; padding:0;
}
.home-header .row .flex-col h1.hero-lead{
  font-size:clamp(20px,2vw,26px); line-height:1.4; max-width:32ch;
  font-weight:450; color:var(--color-white); margin:0; padding:0;
}
.home-header .row .flex-col h1.hero-lead span{ display:inline; font-weight:600; }
@media screen and (max-width:720px){
  .home-header .row .flex-col h1.hero-lead{ font-size:clamp(14px,3.6vw,18px); max-width:30ch; line-height:1.55; }
}

/* ===== Visible breadcrumbs (mirror the BreadcrumbList schema) ===== */
.b-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.5em;
  font-size:13px; line-height:1.4; color:var(--b-fog); margin-bottom:clamp(12px,1.6vw,20px); }
.b-crumbs a{ color:var(--b-fog); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; }
.b-crumbs a:hover{ color:var(--b-white); border-bottom-color:rgba(255,255,255,.35); }
.b-crumbs .sep{ opacity:.45; }
.b-crumbs [aria-current="page"]{ color:var(--b-white); }

/* intro lead promoted h4 -> h2 for heading order; keep the h4 metrics verbatim */
.home-intro h2.intro-lead{ font-size:clamp(1.55em,2.3vw,2.5em); line-height:1.45; margin-bottom:1em; }

/* homepage "Решения для вашего бизнеса" — heading on top, accordion full width.
   Light-theme sibling of .b-acc: that one targets the dark inner pages
   (--b-line / --b-fog) and is unreadable on this white section.
   Type scale is kept identical to .b-acc so the site has ONE accordion format. */
.home-services{ padding-bottom:calc(var(--section-padding) * .66); }
.home-services h2{ font-size:clamp(28px,3.4vw,44px); line-height:1.15; letter-spacing:-.01em;
  margin:0 0 clamp(18px,2.2vw,30px); }
.acc-light{ display:flex; flex-direction:column; }
.acc-light details{ border-top:1px solid rgba(28,29,32,.14); }
.acc-light details:last-child{ border-bottom:1px solid rgba(28,29,32,.14); }
.acc-light summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:24px 0; font-size:clamp(17px,2vw,22px); font-weight:450; color:var(--color-dark); }
.acc-light summary::-webkit-details-marker{ display:none; }
.acc-light summary:focus-visible{ outline:2px solid var(--color-dark); outline-offset:4px; border-radius:3px; }
.acc-light summary h3{ font:inherit; letter-spacing:inherit; color:inherit; margin:0; padding:0; display:inline; }
.acc-light .plus{ position:relative; width:18px; height:18px; flex:0 0 auto; }
.acc-light .plus::before,.acc-light .plus::after{ content:""; position:absolute; background:var(--color-dark); transition:transform .3s; }
.acc-light .plus::before{ top:8px; left:0; width:18px; height:2px; }
.acc-light .plus::after{ left:8px; top:0; width:2px; height:18px; }
.acc-light details[open] .plus::after{ transform:scaleY(0); }
.acc-light__body{ padding:0 0 30px 0; font-size:clamp(19px,1.7vw,24px); line-height:1.6;
  color:rgba(28,29,32,.66); max-width:72ch; }
@media (prefers-reduced-motion:reduce){ .acc-light .plus::before,.acc-light .plus::after{ transition:none; } }

/* Keep the interface usable for visitors who ask the OS to reduce motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* ===== Mobile: text must use the full column width =====
   style-new caps the intro paragraph at 14em and never resets it below 720px,
   so on a phone it wraps after ~4 words. */
@media screen and (max-width:720px){
  .home-intro .flex-col:nth-child(2) p{ max-width:none; }

  /* Мобильный CTA: круглая кнопка едет по линии, стрелка указывает на неё —
     тот же приём, что в футере. Кнопка выходит из absolute/transform, иначе
     GSAP не сможет анимировать её x (Locomotive на мобилке параллакс не даёт). */
  .home-intro h2.intro-lead{ margin-bottom:.55em; }
  .home-intro .flex-col:nth-child(2){ padding-top:clamp(16px,4.5vw,28px); align-items:stretch; }
  .home-intro .flex-col:nth-child(2) p{ margin-bottom:clamp(30px,9vw,48px); }

  /* Отступы над/под кнопкой были 34 / 203px — выравниваем. */
  .home-intro{ padding-bottom:clamp(28px,8vw,44px); }
  .home-services{ padding-top:clamp(60px,21vw,84px); }

  /* Стрелка рисует луч под 45°. Чтобы он попал в кнопку, она должна стоять
     ВЫШЕ центра кнопки примерно на столько же, на сколько правее (было 25 vs 126px).
     Отсюда padding-top у .intro-cta — стрелка живёт в нём, как в футере. */
  .home-intro .flex-col:nth-child(2) .intro-cta{
    --cta-btn:clamp(9em,12vw,11em);
    --cta-pt:clamp(56px,20vw,88px);
    position:relative; width:100%; display:flex; align-items:center; justify-content:flex-end;
    padding-top:var(--cta-pt); padding-right:clamp(52px,17vw,84px); }
  /* НЕТ overflow:hidden — магнитный эффект сдвигает кнопку на ±50px при наведении,
     и она обрезалась бы плоско по краю. Стартовую позицию вместо этого ограничивает JS. */
  .home-intro .flex-col:nth-child(2) .intro-cta .btn{
    position:static; inset:auto; transform:none; z-index:2; }
  .intro-stripe{ display:block; position:absolute; left:0; right:0;
    top:calc(var(--cta-pt) + var(--cta-btn) / 2); z-index:1; }
  .intro-arrow{ display:block; position:absolute; right:0; top:6px;
    width:clamp(1.5em,5vw,2em); z-index:2; }
  /* footer does the same: the extra 90° turns ↘ into ↙ so the arrow points AT the button */
  .intro-arrow svg{ display:block; width:100%; height:auto; transform:rotate(90deg); }
  .home-services h2{ font-size:clamp(24px,6.2vw,32px); }
  .acc-light summary{ font-size:clamp(16px,4.4vw,19px); padding:20px 0; }
  .acc-light__body{ font-size:clamp(15px,4vw,18px); max-width:none; padding-bottom:24px; }
  .footer-lead{ max-width:none; }
}

/* ===== Nav: 7 links + logo + badge stop fitting below ~840px.
   The template only swaps to the burger under 540px, so between 541–900px the
   links shrink and the labels break mid-word ("Как / работаю"). Keep labels on
   one line and hand over to the burger earlier. ===== */
.nav-bar .links-wrap li .btn-text-inner{ white-space:nowrap; }
@media screen and (max-width:900px){
  .nav-bar .links-wrap li{ display:none; }
  .nav-bar .links-wrap li:last-child{ display:block; }
}

/* service names become <h3> for heading order; font:inherit keeps <summary> look */
.b-acc summary h3,
.b-acc summary h4{ font:inherit; letter-spacing:inherit; color:inherit; margin:0; padding:0; display:inline; }

/* Case accordions: .b-acc__body is sized for the FAQ/services pages (24px, max-width:none).
   Inside a full-width case card that reproduces the wall of text — cap the measure. */
.b-case .b-acc-list{ margin-top:clamp(22px,2.6vw,32px); }
.b-case .b-acc__body{ font-size:clamp(16px,1.4vw,19px); line-height:1.7; max-width:78ch; padding-bottom:26px; }
.b-case .b-acc summary{ font-size:clamp(17px,1.5vw,21px); padding:clamp(16px,1.8vw,22px) 0; }

/* intro CTA is a mobile-only treatment; desktop keeps the template's floating button.
   Scoped to min-width so it can't out-cascade the mobile rules above. */
@media screen and (min-width:721px){
  .intro-stripe, .intro-arrow{ display:none; }
}

/* ---- Санкт-Петербург на экране перехода ----
   Линейный силуэт по нижнему краю loading-screen. Штрихи перекрашены в белый
   при экспорте (в исходнике они почти чёрные и на тёмном экране не читались).
   z-index:0 + isolation на родителе держат его под словом-заголовком.
   Ширина всегда во весь экран, поэтому высота слоя задана пропорцией картинки
   (1200×549 = 2.186). Никакого max-height: он бы включил `contain` и сжал
   рисунок по ширине. В низких окнах верх (пустое небо) просто уходит за край —
   .loading-container режет по overflow:hidden. */
/* стекинг-контекст уже создаёт will-change:transform на .loading-screen */
.loading-screen::after{
  content:""; position:absolute; z-index:0; left:0; right:0; bottom:0;
  height:calc(100vw / 2.186); pointer-events:none;
  background:url(../photos/perimetr/spb.webp) no-repeat bottom center / 100% auto;
  opacity:.17;
}
.loading-words{ position:relative; z-index:1; }