:root{
  --orange: #FF5300;
  --orange-2: #f2711f;
  --ink: #1C1D1D;
  --muted: #8a8781;
  --cream: #f6f4f1;
}

/* ===== articles ===== */
.page.page-articles{
  width:100%;
  max-width:1440px;
  overflow-x:hidden;
  background:var(--cream);
}
.page-articles .nav a[aria-current="page"]{ color:var(--orange); }
.page-articles .site-header{ padding-left:64px; padding-right:64px; }
.articles-hero{
  padding:96px 64px 64px;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);
  gap:48px;
  align-items:end;
}
.articles-hero h1{
  margin:10px 0 0;
  max-width:none;
  font-size:clamp(31px,2.9vw,43px);
  line-height:.98;
  letter-spacing:-.055em;
  white-space:nowrap;
}
.articles-hero h1 .accent{ color:var(--orange); }
.articles-hero-copy{ margin:0 0 8px; font-size:18px; line-height:1.55; max-width:500px; }
.articles-grid{
  padding:0 64px 100px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.article-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  border-radius:34px;
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease;
}
.article-card:hover{ transform:translateY(-5px); box-shadow:0 24px 60px rgba(20,20,20,.1); }
.article-card:focus-visible,
.articles-route a:focus-visible,
.article-content a:focus-visible,
.article-toc a:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:4px;
}
.article-card-media{ overflow:hidden; background:#edeae5; display:flex; justify-content:center; }
.article-card-media img{ display:block; width:min(100%,420px); height:auto; object-fit:contain; transition:transform .45s ease; }
.article-card:hover .article-card-media img{ transform:scale(1.025); }
.article-card-body{ padding:28px 28px 30px; display:flex; flex:1; flex-direction:column; }
.article-kicker{ margin:0 0 14px; color:var(--orange); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.article-card h2{ margin:0; font-size:clamp(25px,2.1vw,36px); line-height:1.08; letter-spacing:-.035em; }
.article-card-text{ margin:18px 0 24px; font-size:16px; line-height:1.55; color:#595653; }
.article-card-meta{ margin-top:auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; color:var(--muted); }
.article-card-views{ color:#77736f; }
.article-card-like-state{ width:100%; color:var(--orange); font-weight:700; }
.article-card.is-liked{ box-shadow:0 18px 46px rgba(255,83,0,.14); }
.articles-route{
  margin:0 64px 100px;
  padding:48px;
  border-radius:38px;
  background:var(--ink);
  color:#fff;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.articles-route h2{ grid-column:1/-1; margin:0 0 14px; font-size:clamp(36px,4vw,62px); line-height:1; }
.route-card{
  min-width:0;
  height:100%;
  padding:28px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:26px;
  display:flex;
  flex-direction:column;
}
.route-card h3{ margin:0 0 10px; font-size:25px; }
.route-card p{ margin:0 0 22px; color:#cfcdca; line-height:1.5; flex:1 1 auto; }
.route-card .btn-solid,.route-card .btn-outline{ display:inline-flex; align-self:flex-start; margin-top:auto; }
.route-card .btn-outline{ color:#fff; border-color:#fff; }

.article-page-main{ padding:52px 64px 100px; }
.article-shell{ max-width:1040px; margin:0 auto; }
.article-breadcrumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:42px; color:var(--muted); font-size:14px; }
.article-breadcrumbs a{ color:inherit; text-decoration:none; }
.article-breadcrumbs a:hover{ color:var(--orange); }
.article-header{ max-width:930px; }
.article-header h1{ margin:12px 0 24px; font-size:clamp(48px,6vw,84px); line-height:1; letter-spacing:-.055em; }
.article-lead{ margin:0; max-width:820px; font-size:clamp(20px,2vw,27px); line-height:1.45; }
.article-meta{ display:flex; flex-wrap:wrap; gap:16px 28px; margin:28px 0 46px; color:var(--muted); font-size:14px; }
.article-cover{ width:min(100%,560px); margin:0 auto 58px; overflow:hidden; border-radius:36px; background:transparent; }
.article-cover img{ display:block; width:100%; height:auto; object-fit:contain; }
.article-cover figcaption{ margin-top:12px; color:var(--muted); font-size:13px; line-height:1.45; text-align:center; }
.article-layout{ display:grid; grid-template-columns:260px minmax(0,700px); gap:68px; align-items:start; }
.article-toc{ position:sticky; top:28px; padding:24px; border-radius:24px; background:#fff; }
.article-toc strong{ display:block; margin-bottom:14px; }
.article-toc a{ display:block; padding:7px 0; color:#6b6864; text-decoration:none; font-size:14px; line-height:1.35; }
.article-toc a:hover{ color:var(--orange); }
.article-content{ min-width:0; font-size:18px; line-height:1.68; }
.article-content h2{ margin:56px 0 18px; font-size:clamp(31px,3vw,44px); line-height:1.08; letter-spacing:-.035em; }
.article-content h2:first-child{ margin-top:0; }
.article-content h3{ margin:34px 0 12px; font-size:24px; line-height:1.2; }
.article-content p{ margin:0 0 22px; }
.article-content ul,.article-content ol{ margin:0 0 28px; padding-left:24px; }
.article-content li{ margin:9px 0; }
.article-content a{ color:var(--orange); text-underline-offset:3px; }
.article-note{ margin:34px 0; padding:26px 28px; border-radius:24px; background:#fff; border-left:5px solid var(--orange); }
.article-figure{ width:min(100%,520px); margin:40px auto; }
.article-figure img{ width:100%; height:auto; object-fit:contain; display:block; border-radius:28px; }
.article-figure figcaption{ margin-top:12px; color:var(--muted); font-size:13px; line-height:1.45; }
.article-decision{ margin:52px 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.article-decision-card{ padding:26px; border-radius:24px; background:#fff; }
.article-decision-card h3{ margin-top:0; }
.article-author{
  margin-top:60px;
  padding:28px 0;
  border-top:1px solid #d9d6d2;
  border-bottom:1px solid #d9d6d2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}
.article-author-name{ margin:0; font-weight:700; font-size:18px; }
.article-author-role{ margin:5px 0 0; color:var(--muted); font-size:14px; }
.article-actions{ display:flex; align-items:center; gap:10px; }
.article-action{
  min-height:46px;
  padding:0 18px;
  border:1.5px solid var(--ink);
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  font:600 14px 'Montserrat',sans-serif;
  cursor:pointer;
}
.article-action.is-active{ color:#fff; background:var(--orange); border-color:var(--orange); }
.article-view-count{ display:inline-flex; align-items:center; min-height:auto; padding:0; border:0; border-radius:0; background:transparent; cursor:default; color:var(--muted); font-weight:500; }
.article-action-status{ min-width:1px; color:var(--muted); font-size:12px; }
.article-bottom-cta{
  margin-top:60px;
  padding:38px;
  border-radius:32px;
  background:var(--ink);
  color:#fff;
}
.article-bottom-cta h2{ margin:0 0 10px; font-size:clamp(34px,4vw,52px); line-height:1.02; }
.article-bottom-cta>p{ margin:0 0 26px; color:#cfcdca; line-height:1.5; }
.article-cta-buttons{ display:flex; flex-wrap:wrap; gap:12px; }
.article-bottom-cta .btn-outline{ color:#fff; border-color:#fff; }
.article-bottom-cta .article-cta-buttons .btn-solid,
.article-bottom-cta .article-cta-buttons .btn-outline{
  width:auto;
  max-width:100%;
  min-height:50px;
  padding:12px 22px;
  flex:0 0 auto;
  font-size:16px;
  line-height:1.2;
  text-indent:0;
  white-space:normal;
}
.article-bottom-cta .article-cta-buttons .btn-solid{
  color:#fff;
}

@media(max-width:1359px){
  .articles-hero{ padding-left:32px; padding-right:32px; grid-template-columns:1fr; gap:24px; }
  .articles-hero h1{ font-size:clamp(26px,4.2vw,45px); }
  .articles-grid{ padding:0 32px 72px; grid-template-columns:1fr 1fr; }
  .article-page-main{ padding:40px 32px 72px; }
  .article-layout{ grid-template-columns:1fr; gap:34px; }
  .article-toc{ position:static; }
}

@media(max-width:1359px){
  body.nav-open{ overflow:hidden; }
  .page-articles .site-header{ z-index:901; }
  .page-articles .nav-toggle{ position:relative; z-index:902; width:44px; height:44px; }
  .page-articles .mobile-nav-links a[aria-current="page"]{ color:var(--orange); }
  .articles-hero{ padding:72px 32px 46px; grid-template-columns:1fr; gap:24px; }
  .articles-grid{ padding:0 32px 72px; grid-template-columns:1fr 1fr; }
  .articles-route{ margin:0 32px 72px; }
  .article-page-main{ padding:40px 32px 72px; }
  .article-layout{ grid-template-columns:1fr; gap:34px; }
  .article-toc{ position:static; }
}
@media(max-width:640px){
  .articles-hero{ padding:52px 20px 34px; }
  .articles-hero h1{ font-size:clamp(14px,4.2vw,26px); }
  .articles-hero-copy{ font-size:16px; }
  .articles-grid{ padding:0 20px 56px; grid-template-columns:1fr; }
  .article-card{ border-radius:26px; }
  .article-card-body{ padding:22px; }
  .article-card h2{ font-size:23px; line-height:1.12; }
  .article-card-meta{ justify-content:flex-start; gap:8px 16px; }
  .article-card:hover{ transform:none; box-shadow:none; }
  .article-card:hover .article-card-media img{ transform:none; }
  .articles-route{ margin:0 20px 56px; padding:28px 20px; grid-template-columns:1fr; border-radius:28px; }
  .articles-route h2{ grid-column:auto; font-size:clamp(28px,8vw,36px); }
  .route-card{ padding:22px; }
  .route-card h3{ font-size:22px; line-height:1.18; }
  .route-card .btn-solid,.route-card .btn-outline{
    width:100%;
    min-height:48px;
    padding:10px;
    justify-content:center;
    font-size:15px;
    line-height:1.2;
    text-align:center;
    white-space:normal;
  }
  .article-page-main{ padding:30px 20px 60px; }
  .article-breadcrumbs{ margin-bottom:30px; }
  .article-header h1{ font-size:44px; }
  .article-lead{ font-size:19px; }
  .article-cover{ margin-bottom:36px; border-radius:24px; }
  .article-content{ font-size:16px; line-height:1.62; }
  .article-content h2{ margin-top:42px; }
  .article-note{ padding:22px; }
  .article-figure img{ border-radius:20px; }
  .article-decision{ grid-template-columns:1fr; }
  .article-author{ align-items:flex-start; flex-direction:column; }
  .article-actions{ flex-wrap:wrap; }
  .article-bottom-cta{ padding:28px 22px; border-radius:26px; }
  .article-bottom-cta .article-cta-buttons{
    flex-direction:column;
    align-items:stretch;
  }
  .article-bottom-cta .article-cta-buttons .btn-solid,
  .article-bottom-cta .article-cta-buttons .btn-outline{
    width:100%;
    flex:0 0 auto;
  }
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  font-family:'Montserrat', sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:none;}
a{color:inherit; text-decoration:none;}

.page{
  position:relative;
  width:1440px;
  margin:0 auto;
  background:var(--cream);
}

/* ===== header ===== */
.site-header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:28px 120px 0;
}
.logo{
  width:192px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:32px;
  line-height:normal;
  letter-spacing:0;
  color:#1C1D1D;
}
.logo span{
  display:block;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:20px;
  line-height:normal;
  letter-spacing:.38em;
  color:#1C1D1D;
  margin-top:0;
}
.nav{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:flex;
  gap:30px;
}
.nav a{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:normal;
  letter-spacing:0;
  color:var(--muted);
  transition:color .2s ease;
}
.nav a:hover{
  color:var(--ink);
}
.nav a:active{
  color:var(--orange);
}
.nav a:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:4px;
  border-radius:4px;
}
.header-icons{
  display:flex;
  gap:14px;
  margin-left:auto;
}
.header-icons .badge{
  position:relative;
  width:32px; height:32px;
  border-radius:8px;
  background:var(--orange);
  border:none;
  font:inherit;
  cursor:pointer;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
}
.header-icons .badge:hover{ background:var(--orange-2); }
.header-icons .badge svg{ width:16px; height:16px; }
.header-icons .copy-toast{
  left:50%;
  top:40px;
  transform:translateX(-50%) translateY(4px);
}
.header-icons .copy-toast.is-visible{
  transform:translateX(-50%) translateY(0);
}

/* ===== hero ===== */
.hero{
  position:relative;
  box-sizing:border-box;
  display:flex;
  align-items:flex-start;
  gap:60px;
  padding:70px 124px 0;
  min-height:640px;
}
.hero-left{
  width:600px;
  flex:0 0 auto;
}
.eyebrow{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:normal;
  letter-spacing:0;
  color:var(--ink);
}
.eyebrow .accent{ color:var(--orange); }
.hero h1{
  margin-top:8px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:42px;
  line-height:1.2;
  letter-spacing:0;
  color:var(--ink);
}
.hero h1 .accent{ color:var(--orange); }
.hero h1 .line-mask{
  display:block;
  overflow:hidden;
  padding-bottom:.2em;
  margin-bottom:-.2em;
}
.hero h1 .line-text{
  display:block;
  transform:translateY(115%);
  opacity:0;
  animation:heroLineReveal .8s cubic-bezier(.22,1,.36,1) forwards;
}
.hero h1 .line-mask:nth-child(1) .line-text{ animation-delay:.05s; }
.hero h1 .line-mask:nth-child(2) .line-text{ animation-delay:.2s; }
.hero h1 .line-mask:nth-child(3) .line-text{ animation-delay:.35s; }
@keyframes heroLineReveal{
  to{ transform:translateY(0); opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .hero h1 .line-text{ animation:none; transform:none; opacity:1; }
}
.hero-desc{
  margin-top:40px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:28px;
  letter-spacing:0;
  color:var(--ink);
  max-width:460px;
}
.hero-buttons{
  margin-top:68px;
  display:flex;
  gap:16px;
}
.btn-solid, .btn-outline, .btn-dark{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  border-radius:20px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-dark{
  background:var(--ink);
  color:#F6F8F9;
  border:2px solid var(--ink);
}
.btn-dark:hover{
  background:#333536;
  box-shadow:0 8px 22px rgba(23,20,15,.28);
  transform:translateY(-2px);
}
.btn-dark:active{ transform:translateY(0); box-shadow:0 4px 10px rgba(23,20,15,.24); }
.btn-dark:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; }
.btn-solid{
  background:var(--orange);
  color:#F6F8F9;
  border:2px solid var(--orange);
}
.btn-solid:hover{
  background:var(--orange-2);
  border-color:var(--orange-2);
  box-shadow:0 8px 22px rgba(255,83,0,.32);
  transform:translateY(-2px);
}
.btn-solid:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(255,83,0,.28);
}
.btn-outline{
  border:2px solid var(--ink);
  color:var(--ink);
  background:transparent;
}
.btn-outline:hover{
  background:var(--ink);
  color:#F6F8F9;
}
.btn-outline:active{
  transform:translateY(0px);
}
.btn-solid:focus-visible, .btn-outline:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:4px;
}
@media (prefers-reduced-motion: reduce){
  .btn-solid, .btn-outline, .btn-dark, .nav a{
    transition:none;
  }
  .btn-solid:hover, .btn-solid:active, .btn-outline:active, .btn-dark:hover, .btn-dark:active{
    transform:none;
  }
}

.hero-right{
  position:absolute;
  left:724px;
  top:104px;
  width:600px;
  height:536px;
}
@media (hover:hover) and (pointer:fine){
  .hero-photo, .stat-panel{
    transition:transform .25s cubic-bezier(.22,1,.36,1);
  }
}
.hero-photo{
  width:100%;
  height:100%;
  border-radius:34px;
  object-fit:none;
  object-position:-12px -260px;
  display:block;
}
.stat-panel{
  position:absolute;
  top:32px; left:50px;
  width:156px;
  height:236px;
  padding:24px;
  border-radius:34px;
  background:rgba(208,211,215,.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 2px rgba(255,255,255,.25) inset;
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-sizing:border-box;
}
.stat strong{
  display:block;
  font-family:'Unbounded', sans-serif;
  font-size:36px;
  font-weight:600;
  line-height:normal;
  letter-spacing:0;
  color:#F6F8F9;
}
.stat span{
  display:block;
  font-family:'Montserrat', sans-serif;
  font-size:18px;
  font-weight:500;
  line-height:normal;
  letter-spacing:0;
  color:#F6F8F9;
  margin-top:-8px;
}
.stat-plain{
  font-family:'Montserrat', sans-serif;
  font-size:18px;
  font-weight:500;
  line-height:normal;
  letter-spacing:0;
  color:#F6F8F9;
}
.stat-mobile-extra{ display:none; }

/* ===== trust bar ===== */
/* Бегущая строка: логотипы едут непрерывно слева направо. Реализовано через
   трек с двумя одинаковыми группами логотипов подряд (ширина трека = 200%
   контента) и анимацией translateX(-50%) -> translateX(0) — когда трек
   доезжает до конца, вторая группа выглядит идентично первой в начальном
   положении, и цикл повторяется без видимого скачка. */
.trust-bar{
  margin-top:14px;
  padding:9px 124px;
  box-sizing:border-box;
  background:#fff;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.trust-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:trustScroll 24s linear infinite;
  will-change:transform;
}
/* margin-right (не gap на .trust-track) — так каждая группа «носит» свой
   отступ вместе с собой, и обе половины трека получаются математически
   ровно по 50% его ширины, без чего цикл дёргался бы на стыке */
.trust-track-group{
  display:flex;
  align-items:center;
  gap:64px;
  margin-right:64px;
  flex:0 0 auto;
}
@keyframes trustScroll{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}
@media (hover:hover) and (pointer:fine){
  .trust-bar:hover .trust-track{ animation-play-state:paused; }
}
@media (prefers-reduced-motion:reduce){
  .trust-track{ animation:none; }
}
.trust-bar .client{
  width:auto;
  flex:0 0 auto;
}
.client-uralprofi{ height:65px; }
.client-fsh{ height:55px; }
.client-uraltoys{ height:58px; }
.client-interplay{ height:53px; }

/* ===== approach ===== */
.approach{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:28px;
  padding:0 120px 44px;
  background:var(--cream);
}
.approach-left{
  width:512px;
  flex:0 0 auto;
}
.approach .eyebrow{ margin-bottom:4px; color:#696B6C; }
.approach-title{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:42px;
  line-height:1.2;
  letter-spacing:0;
  color:var(--ink);
}
.approach-title .accent{ color:var(--orange); }
.approach-desc-nowrap{
  white-space:nowrap;
}
.approach-desc{
  margin-top:14px;
  max-width:340px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:normal;
  color:var(--ink);
}
.approach-cards{
  display:flex;
  gap:24px;
  flex:1 1 auto;
}
.approach-card{
  width:152px;
  height:260px;
  flex:0 0 auto;
  background:#fff;
  border-radius:34px;
  padding:12px 22px 28px 20px;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
.approach-num{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:52px;
  line-height:1;
  letter-spacing:0;
  color:var(--ink);
}
.approach-q{
  margin-top:6px;
  min-height:66px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:normal;
  color:var(--ink);
}
.approach-q.accent{ color:var(--orange); }
.approach-a{
  margin-top:32px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:normal;
  color:#696B6C;
}

/* ===== process ===== */
.process{
  display:flex;
  justify-content:space-between;
  gap:60px;
  padding:40px 124px 46px;
  background:#1C1D1D;
}
.process-col{
  width:276px;
  flex:0 0 auto;
  opacity:0;
  transform:translate(-24px, 16px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.process-col.is-visible{
  opacity:1;
  transform:translate(0,0);
}
.process-col:nth-child(1){ transition-delay:0s; }
.process-col:nth-child(2){ transition-delay:.15s; }
.process-col:nth-child(3){ transition-delay:.3s; }
@media (prefers-reduced-motion:reduce){
  .process-col{ opacity:1; transform:none; transition:none; }
}
.process-title{
  display:flex;
  align-items:center;
  gap:16px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:42px;
  line-height:1;
  letter-spacing:0;
  color:#F6F8F9;
}
.process-arrow{
  width:40px;
  height:12px;
  color:var(--orange);
  flex:0 0 auto;
}
.process-icon-slot{
  margin-top:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.process-icon{
  width:238px;
  height:238px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.process-icon img{ width:100%; height:100%; object-fit:contain; }
.process-icon.tilt img{ transform:rotate(0.6deg); }
.process-icon.sz-analysis{ width:146px; height:156px; }
.process-icon.sz-strategy{ width:160px; height:156px; }
.process-icon.sz-design{ width:152px; height:156px; }
.process-desc{
  margin-top:24px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:normal;
  letter-spacing:0;
  color:#F6F8F9;
  max-width:276px;
}

/* ===== case study (draft) ===== */
.case-section{
  padding:60px 116px;
  background:#f5f4f2;
}
.case-carousel{
  display:flex;
  align-items:center;
  gap:32px;
}
.case-arrow{
  flex:0 0 auto;
  width:50px;
  height:50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
  background:#fff;
  color:#1C1D1D;
  cursor:pointer;
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.case-arrow svg{ width:22px; height:22px; }
.case-arrow:hover{
  background:#E9EBEC;
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.case-arrow:active{ transform:translateY(0) scale(1); }
.case-carousel .case-card{
  flex:1 1 auto;
  min-width:0;
  will-change:transform, opacity;
}
.case-dots{
  margin-top:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.case-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:none;
  background:#D9D9D9;
  cursor:pointer;
  padding:0;
  transition:background-color .3s cubic-bezier(.33,1,.68,1), transform .3s cubic-bezier(.33,1,.68,1);
}
.case-dot.is-active{
  background:var(--orange);
  transform:scale(1.3);
}
.case-slider{ display:none; }
@media (prefers-reduced-motion:reduce){
  .case-arrow, .case-dot{ transition:none; }
  .case-carousel .case-card{ transition:none !important; transform:none !important; }
  .case-stats.is-animating .case-stat{ animation:none; opacity:1; transform:none; }
}
.case-card{
  display:flex;
  gap:52px;
  background:#fff;
  border-radius:34px;
  padding:14px 18px;
  box-sizing:border-box;
}
.case-photos{
  display:flex;
  gap:18px;
  flex:0 0 auto;
}
.case-photo{
  position:relative;
  width:282px;
  height:auto;
  aspect-ratio:3 / 4;
  border-radius:24px;
  overflow:hidden;
}
.case-photo::before{
  content:'';
  position:absolute;
  inset:0;
  background:#CBD1D3;
}
.case-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (hover:hover) and (pointer:fine){
  .case-photo::before,
  .case-photo img{
    transition:transform .3s cubic-bezier(.33,1,.68,1);
  }
  .case-photo:hover::before,
  .case-photo:hover img{
    transform:scale(1.025);
  }
}
@media (prefers-reduced-motion:reduce){
  .case-photo::before, .case-photo img{ transition:none; }
  .case-photo:hover::before, .case-photo:hover img{ transform:none; }
}
.case-info{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.case-tools-row{
  display:flex;
  align-items:baseline;
  gap:14px;
}
.case-tools-title{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:20px;
  color:var(--ink);
}
.case-platform{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:24px;
  color:var(--ink);
}
.case-stats{
  margin-top:20px;
  background:#F5F5F5;
  border-radius:30px;
  padding:20px 22px;
}
.case-stat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  border-bottom:2px solid #CBD1D3;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:24px;
  color:var(--ink);
}
.case-stat:last-child{ border-bottom:none; }
@keyframes caseStatIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.case-stats.is-animating .case-stat{
  animation:caseStatIn .38s cubic-bezier(.33,1,.68,1) both;
}
.case-stats.is-animating .case-stat:nth-child(1){ animation-delay:0ms; }
.case-stats.is-animating .case-stat:nth-child(2){ animation-delay:70ms; }
.case-stats.is-animating .case-stat:nth-child(3){ animation-delay:140ms; }
.case-stat strong{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:22px;
  color:#FF842C;
}
.case-desc{
  margin-top:20px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14.4px;
  line-height:21.6px;
  color:var(--ink);
  max-width:334px;
}

.case-proof-wrap{
  display:flex;
  justify-content:center;
  margin-top:24px; /* confirmed exact via arrow measurement */
}
.case-proof-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 24px;
  border-radius:20px;
  background:#fff;
}
.case-proof-icon{
  width:18px;
  height:18px;
  color:var(--orange);
  flex:0 0 auto;
}
.case-proof-badge span{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:normal;
  letter-spacing:0;
  color:#1C1D1D;
  white-space:nowrap;
}

/* ===== services (draft — waiting on exact spacing from Figma) ===== */
.services{
  padding:80px 120px 100px;
  background:var(--cream);
}
.services .eyebrow{ color:#696B6C; }
.services-title{
  margin-top:8px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:52px;
  line-height:1.2;
  letter-spacing:0;
  color:var(--ink);
}
.services-grid{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:24px;
}
.services-dots{ display:none; }
.service-card{
  background:#fff;
  border-radius:34px;
  min-height:260px;
  padding:24px 20px 20px;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  position:relative;
  border:2px solid transparent;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.33,1,.68,1), transform .5s cubic-bezier(.33,1,.68,1);
}
.service-card.is-visible{
  opacity:1;
  transform:translateY(0);
}
.services-grid .service-card:nth-child(1){ transition-delay:0ms; }
.services-grid .service-card:nth-child(2){ transition-delay:70ms; }
.services-grid .service-card:nth-child(3){ transition-delay:140ms; }
.services-grid .service-card:nth-child(4){ transition-delay:210ms; }
.services-grid .service-card:nth-child(5){ transition-delay:280ms; }
.services-grid .service-card:nth-child(6){ transition-delay:350ms; }
.services-grid .service-card:nth-child(7){ transition-delay:420ms; }
.services-grid .service-card:nth-child(8){ transition-delay:490ms; }
.services-grid .service-card:nth-child(9){ transition-delay:560ms; }
@media (prefers-reduced-motion:reduce){
  .service-card{ transition:none; opacity:1; transform:none; }
}
.service-card--top{
  border-color:var(--orange);
}
.service-badge{
  position:absolute;
  top:-16px;
  left:24px;
  background:var(--orange);
  color:#fff;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:12px;
  line-height:1;
  padding:6px 14px;
  border-radius:20px;
}
.service-title{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:normal;
  letter-spacing:0;
  color:var(--ink);
  max-width:188px;
}
.service-desc{
  margin-top:8px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:normal;
  letter-spacing:0;
  color:#696B6C;
  max-width:188px;
}
.service-bottom{
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
}
.service-num{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:58px;
  line-height:1;
  letter-spacing:0;
  color:#D5DBDE;
}
.service-icon{
  width:110px;
  height:110px;
  object-fit:contain;
}

/* ===== pricing (draft) ===== */
.pricing{
  padding:80px 124px 100px;
  background:var(--cream);
}
.pricing .eyebrow{ color:#696B6C; }
.pricing-title{
  margin-top:8px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:52px;
  line-height:1.2;
  letter-spacing:0;
  color:var(--ink);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.33,1,.68,1), transform .5s cubic-bezier(.33,1,.68,1);
}
.pricing-title.is-visible{
  opacity:1;
  transform:translateY(0);
}
.pricing-title .accent{ color:var(--orange); }
.pricing-cards{
  margin-top:36px;
  display:flex;
  align-items:stretch;
  gap:16px;
}
.pricing-dots{ display:none; }
.price-card{
  flex:1 1 0;
  background:#fff;
  border-radius:34px;
  padding:40px 34px 26px;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  position:relative;
  color:var(--ink);
  opacity:0;
  transform:translateY(16px) scale(1);
  transition:opacity .5s cubic-bezier(.33,1,.68,1), transform .32s cubic-bezier(.33,1,.68,1), box-shadow .32s cubic-bezier(.33,1,.68,1);
}
.price-card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.pricing-cards .price-card:nth-child(1){ transition-delay:0s; }
.pricing-cards .price-card:nth-child(2){ transition-delay:.12s; }
.pricing-cards .price-card:nth-child(3){ transition-delay:.24s; }
@media (hover:hover) and (pointer:fine){
  .price-card.is-visible:hover{
    transform:translateY(-7px) scale(1.015);
    box-shadow:0 20px 40px rgba(23,20,15,.16);
  }
}
.price-card:active{ transform:translateY(0) scale(.985); }
@media (prefers-reduced-motion:reduce){
  .pricing-title{ transition:none; opacity:1; transform:none; }
  .price-card{ transition:none; opacity:1; transform:none; }
  .price-card.is-visible:hover, .price-card:active{ transform:none; }
}
.price-card--popular{
  background:#1C1D1D;
  color:#fff;
}
.price-badge{
  position:absolute;
  top:24px;
  right:28px;
  border:2px solid var(--orange);
  color:var(--orange);
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  padding:6px 16px;
  border-radius:20px;
}
.price-num{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:22px;
  color:#CBD1D3;
}
.price-card--popular .price-num{ color:rgba(255,255,255,.5); }
.price-name{
  margin-top:14px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:32px;
  color:inherit;
}
.price-desc{
  margin-top:18px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:28px;
  color:inherit;
  opacity:.85;
  max-width:318px;
}
.price-value{
  margin-top:66px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:48px;
  color:inherit;
}
.price-features{
  margin-top:38px;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1 1 auto;
}
.price-features li{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  color:inherit;
  padding-left:32px;
  position:relative;
}
.price-features li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--orange);
  font-weight:700;
}
.price-btn{
  margin-top:60px;
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  border-radius:20px;
  background:#FF5300;
  border:2px solid #FF5300;
  color:#F6F8F9;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .price-btn:hover{
    background:var(--orange-2);
    border-color:var(--orange-2);
    box-shadow:0 8px 22px rgba(255,83,0,.32);
    transform:translateY(-1px);
  }
}
.price-btn:active{
  transform:translateY(0) scale(.97);
  box-shadow:0 4px 10px rgba(255,83,0,.28);
}
.price-btn:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:4px;
}
@media (prefers-reduced-motion: reduce){
  .price-btn{ transition:none; }
  .price-btn:hover, .price-btn:active{ transform:none; }
}

/* ===== cta builder (draft) ===== */
.cta-builder{
  position:relative;
  padding:80px 80px;
  background:var(--cream);
}
.cta-row{
  margin-top:28px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
}
.cta-left{
  flex:0 0 auto;
}
.cta-title{
  max-width:1186px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:52px;
  line-height:1.2;
  letter-spacing:0;
  color:var(--ink);
}
.cta-title .accent{ color:var(--orange); }
/* блок «Не нашли подходящий готовый дизайн» на странице магазина — шрифт заголовка уменьшен на 20% по просьбе Юли */
.shop-custom-cta .cta-title{ font-size:41.6px; }
.cta-desc{
  margin-top:20px;
  max-width:640px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:28px;
  color:var(--ink);
}
.cta-features{
  margin-top:40px;
  margin-bottom:40px;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.cta-features li{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  color:var(--ink);
  padding-left:32px;
  position:relative;
}
.cta-features li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--orange);
  font-weight:700;
}
.cta-buttons{
  margin-top:68px;
  display:flex;
  gap:16px;
}
.cta-right{
  position:relative;
  width:716px;
  height:564px;
  flex:0 0 auto;
  margin-top:-110px;
  margin-left:-40px;
  overflow:hidden;
}
.cta-figma-combo-img{
  display:block;
  width:716px;
  height:564px;
}
@media (hover:hover) and (pointer:fine){
  .cta-figma-combo-img{
    transition:transform .3s cubic-bezier(.33,1,.68,1);
  }
  .cta-right:hover .cta-figma-combo-img{
    transform:scale(1.025);
  }
}
@media (prefers-reduced-motion:reduce){
  .cta-figma-combo-img{ transition:none; }
  .cta-right:hover .cta-figma-combo-img{ transform:none; }
}

/* ===== quote bar ===== */
.quote-bar{
  margin-top:14px;
  height:100px;
  box-sizing:border-box;
  background:#1C1D1D;
  color:#fff;
  padding:0 124px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.footer-quote{
  display:flex;
  align-items:center;
  gap:20px;
}
.footer-quote .asterisk{
  color:var(--orange);
  width:48px;
  height:48px;
  flex:0 0 auto;
}
.footer-quote p{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:normal;
  letter-spacing:0;
  color:#F6F8F9;
  max-width:408px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:24px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:normal;
  letter-spacing:0;
  color:#F6F8F9;
}
.footer-brand .line{
  width:358px;
  height:2px;
  background:var(--orange);
  display:block;
}

/* ===== gallery ===== */
.gallery{
  padding:80px 0 100px;
  background:var(--cream);
  overflow:hidden;
}
.coverflow{
  position:relative;
  outline:none;
}
.coverflow-viewport{
  position:relative;
  height:520px;
  perspective:1600px;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  cursor:grab;
  touch-action:pan-y;
}
.coverflow-viewport:active{ cursor:grabbing; }
.coverflow-track{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.gallery-item{
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  width:300px;
  height:400px;
  margin:-200px 0 0 -150px;
  border-radius:20px;
  border:none;
  padding:0;
  background:#CBCFD3;
  cursor:pointer;
  overflow:hidden;
  backface-visibility:hidden;
  will-change:transform, opacity;
  box-shadow:0 30px 60px rgba(23,20,15,.18);
}
.gallery-item::before,
.gallery-item::after{
  content:none !important;
  display:none !important;
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  user-select:none;
}
.gallery-item:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:4px;
}
.coverflow-counter{
  margin-top:20px;
  text-align:center;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--muted);
}
@media (prefers-reduced-motion:reduce){
  .gallery-item{ transition:transform .3s ease, opacity .3s ease; }
}

/* ===== lightbox ===== */
.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(23,20,15,.92);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.lightbox.is-open{
  opacity:1;
  visibility:visible;
}
.lightbox-frame{
  height:86vh;
  width:auto;
  aspect-ratio:1200/1600;
  max-width:90vw;
  background:#CBCFD3;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:scale(.96);
  transition:transform .25s ease;
}
.lightbox.is-open .lightbox-frame{
  transform:scale(1);
}
.lightbox-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lightbox-close{
  position:fixed;
  top:32px;
  right:32px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--orange);
  border:none;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .2s ease, transform .2s ease;
}
.lightbox-close svg{ width:20px; height:20px; }
.lightbox-close:hover{
  background:var(--orange-2);
  transform:scale(1.06);
}

/* ===== testimonials ===== */
.testimonials{
  padding:64px 80px 72px;
  background:#1C1D1D;
  text-align:center;
  overflow:hidden;
}
.testimonials-eyebrow{ color:#9CA0A1; }
.testimonials-title{
  margin-top:8px;
  font-family:'Unbounded',sans-serif;
  font-weight:600;
  font-size:40px;
  line-height:1.2;
  color:#fff;
}
.testi-carousel{
  margin-top:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  outline:none;
}
.testi-arrow{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
  background:#fff;
  color:#1C1D1D;
  cursor:pointer;
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.testi-arrow svg{ width:19px; height:19px; }
.testi-arrow:hover{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  background:#E9EBEC;
}
.testi-arrow:active{ transform:translateY(0) scale(1); }
@media (prefers-reduced-motion:reduce){
  .testi-arrow{ transition:none; }
}
.testi-track{
  position:relative;
  width:430px;
  height:570px;
  flex:0 0 auto;
  overflow:visible;
  cursor:grab;
  touch-action:pan-y;
  perspective:1200px;
}
.testi-track:active{ cursor:grabbing; }
.testi-card{
  position:absolute;
  top:0;
  left:50%;
  width:430px;
  height:570px;
  border-radius:26px;
  background:#fff;
  color:#1C1D1D;
  padding:38px 28px 22px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  transform:translateX(-50%);
  transform-origin:center center;
  transition:transform .42s cubic-bezier(.33,1,.68,1), opacity .42s cubic-bezier(.33,1,.68,1), filter .42s cubic-bezier(.33,1,.68,1), box-shadow .42s cubic-bezier(.33,1,.68,1);
}
.testi-card--active{
  z-index:2;
  transform:translateX(-50%) scale(1);
  box-shadow:0 22px 52px rgba(0,0,0,.24);
}
.testi-card--side{
  opacity:.5;
  filter:saturate(.78) brightness(.9);
  box-shadow:0 12px 30px rgba(0,0,0,.15);
  pointer-events:none;
}
.testi-card--left{ transform:translateX(calc(-150% - 12px)) scale(.82); }
.testi-card--right{ transform:translateX(calc(50% + 12px)) scale(.82); }
.testi-stars{
  display:flex;
  gap:10px;
  color:var(--orange);
  font-size:20px;
  line-height:1;
}
.testi-head{
  margin-top:28px;
  display:flex;
  align-items:center;
  gap:16px;
}
.testi-avatar{
  flex:0 0 auto;
  width:72px;
  height:72px;
  border-radius:23px;
  background:linear-gradient(135deg,var(--orange),var(--orange-2));
  color:#fff;
  font-family:'Unbounded',sans-serif;
  font-weight:600;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.testi-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (hover:hover) and (pointer:fine){
  .testi-avatar img{ transition:transform .3s cubic-bezier(.33,1,.68,1); }
  .testi-avatar:hover img{ transform:scale(1.025); }
}
@media (prefers-reduced-motion:reduce){
  .testi-avatar img{ transition:none; }
  .testi-avatar:hover img{ transform:none; }
}
.testi-name{
  font-family:'Unbounded',sans-serif;
  font-weight:600;
  font-size:28px;
  line-height:1;
  color:#1C1D1D;
}
.testi-role{
  margin-top:4px;
  font-family:'Montserrat',sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:22px;
  color:#1C1D1D;
}
.testi-text{
  margin-top:22px;
  font-family:'Montserrat',sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:22px;
  color:#1C1D1D;
}
.testi-divider{
  margin:auto 0 18px;
  width:100%;
  height:2px;
  background:#CBD1D3;
  flex:0 0 auto;
}
.testi-stats{
  display:flex;
  align-items:center;
  gap:24px;
}
.testi-stat{ display:flex; flex-direction:column; }
.testi-stat strong{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:1;
  color:#1C1D1D;
}
.testi-stat span{
  margin-top:4px;
  font-family:'Montserrat',sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:20px;
  color:#1C1D1D;
}
.testi-platform{
  margin-left:auto;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:18px;
  color:#CBD1D3;
}
.testi-dots{
  margin-top:48px;
  display:none;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:20px;
  row-gap:16px;
}
.testi-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:none;
  background:#D9D9D9;
  cursor:pointer;
  padding:0;
  transition:background-color .3s cubic-bezier(.33,1,.68,1), transform .3s cubic-bezier(.33,1,.68,1);
}
.testi-dot.is-active{
  background:var(--orange);
  transform:scale(1.3);
}
.testi-slider-counter{
  display:block;
  margin-top:28px;
  text-align:center;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.06em;
  color:#9CA0A1;
}
.testi-stats.is-animating .testi-stat{
  animation:caseStatIn .38s cubic-bezier(.33,1,.68,1) both;
}
.testi-stats.is-animating .testi-stat:nth-child(1){ animation-delay:0ms; }
.testi-stats.is-animating .testi-stat:nth-child(2){ animation-delay:70ms; }
@media (prefers-reduced-motion:reduce){
  .testi-card, .testi-dot{ transition:none; }
  .testi-card--active{ transition:opacity .2s ease !important; transform:translateX(-50%) !important; }
  .testi-stats.is-animating .testi-stat{ animation:none; opacity:1; transform:none; }
}
.lightbox-close:focus-visible{
  outline:2px solid #fff;
  outline-offset:4px;
}
@media (prefers-reduced-motion: reduce){
  .gallery-item, .lightbox, .lightbox-frame, .lightbox-close{
    transition:none;
  }
  .gallery-item:hover{ transform:none; }
}

/* ===== faq (draft — heading + one item, rest to follow) ===== */
.faq{
  padding:80px 120px 100px;
  background:var(--cream);
}
.faq .eyebrow{ color:#696B6C; }
.faq-title{
  margin-top:8px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:52px;
  line-height:1.2;
  letter-spacing:0;
  color:var(--ink);
}
.faq-list{
  margin-top:36px;
}
.faq-list .faq-item:nth-child(n+5){
  display:none;
}
.faq-list.is-expanded .faq-item:nth-child(n+5){
  display:block;
}
.faq-item{
  border-bottom:2px solid rgba(28,29,29,.1);
}
.faq-toggle-btn{
  margin:36px auto 0 0;
  width:max-content;
}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  gap:24px;
  padding:28px 0;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font:inherit;
  color:inherit;
}
.faq-num{
  flex:0 0 auto;
  width:40px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  color:#9a9a9a;
}
.faq-q-text{
  flex:1 1 auto;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:22px;
  line-height:1.3;
  color:var(--ink);
}
.faq-icon{
  position:relative;
  flex:0 0 auto;
  width:24px;
  height:24px;
}
.faq-icon-h, .faq-icon-v{
  position:absolute;
  top:50%;
  left:50%;
  background:var(--ink);
}
.faq-icon-h{
  width:16px;
  height:2px;
  transform:translate(-50%,-50%);
}
.faq-icon-v{
  width:2px;
  height:16px;
  transform:translate(-50%,-50%) scaleY(1);
  transition:transform .25s ease;
}
.faq-item.is-open .faq-icon-v{
  transform:translate(-50%,-50%) scaleY(0);
}
.faq-answer-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s ease;
}
.faq-item.is-open .faq-answer-wrap{
  grid-template-rows:1fr;
}
.faq-answer-inner{
  overflow:hidden;
}
.faq-answer-content{
  padding:0 0 28px 64px;
}
.faq-answer-p{
  max-width:800px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.6;
  color:#696B6C;
}
.faq-answer-p + .faq-answer-p,
.faq-answer-p + .faq-answer-list,
.faq-answer-list + .faq-answer-p{
  margin-top:12px;
}
.faq-answer-list{
  max-width:800px;
  list-style:none;
  margin-top:12px;
}
.faq-answer-list li{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.6;
  color:#696B6C;
}
.faq-answer-list li strong{
  font-weight:600;
  color:var(--ink);
}
.faq-cta{
  margin-top:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  background:#fff;
  border-radius:34px;
  padding:32px 56px;
}
.faq-cta-title{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:42px;
  line-height:1;
  letter-spacing:0;
  color:var(--ink);
}
.faq-cta-desc{
  margin-top:8px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:1.5;
  letter-spacing:0;
  color:var(--ink);
}
.faq-cta-buttons{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.trust-block{
  position:relative;
  box-sizing:border-box;
  width:1440px;
  height:854px;
  overflow:hidden;
  background:linear-gradient(135deg,var(--orange),var(--orange-2));
}
.trust-photo{
  position:absolute;
  left:68px;
  top:82px;
  width:582px;
  height:772px;
  border-radius:34px 34px 0 0;
  overflow:hidden;
}
.trust-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  display:block;
}
.trust-badge{
  position:absolute;
  left:120px;
  top:86px;
  text-align:left;
}
.trust-badge-logo{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:28px;
  line-height:1.22;
  letter-spacing:0;
  color:#fff;
}
.trust-badge-logo span{
  display:block;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:1.23;
  letter-spacing:0.38em;
  margin-top:2px;
}
.trust-badge-role{
  margin-top:18px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:1.571;
  color:#fff;
}
.trust-content{
  position:absolute;
  left:688px;
  top:86px;
  width:650px;
}
.trust-eyebrow{
  color:#fff;
}
.trust-eyebrow .accent{ color:#fff; }
.trust-title{
  margin-top:14px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:52px;
  line-height:1.2;
  letter-spacing:0;
  color:#fff;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.33,1,.68,1), transform .5s cubic-bezier(.33,1,.68,1);
}
.trust-title.is-visible{ opacity:1; transform:translateY(0); }
.trust-desc{
  margin-top:20px;
  max-width:522px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:1.5;
  letter-spacing:0;
  color:#fff;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.33,1,.68,1) .08s, transform .5s cubic-bezier(.33,1,.68,1) .08s;
}
.trust-desc.is-visible{ opacity:1; transform:translateY(0); }
.trust-stats{
  margin-top:34px;
  margin-left:-28px;
  width:674px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 32px;
  border-radius:34px;
  background:rgba(208,211,215,.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 2px rgba(255,255,255,.25) inset;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.33,1,.68,1) .16s, transform .5s cubic-bezier(.33,1,.68,1) .16s;
}
.trust-stats.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .trust-title, .trust-desc, .trust-stats{ transition:none; opacity:1; transform:none; }
}
.trust-stat{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-right:22px;
}
.trust-stat + .trust-stat{
  padding-left:22px;
}
.trust-stat + .trust-stat::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:2px;
  height:58px;
  background:#d9d9d9;
}
.trust-stat strong{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:44px;
  line-height:1;
  letter-spacing:0;
  color:#fff;
}
.trust-stat span{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:1.5;
  color:#fff;
}
.trust-features{
  margin-top:36px;
  width:538px;
  display:grid;
  grid-template-columns:240px 240px;
  column-gap:58px;
  row-gap:12px;
}
.trust-feature{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.33,1,.68,1), transform .5s cubic-bezier(.33,1,.68,1);
}
.trust-feature.is-visible{ opacity:1; transform:translateY(0); }
.trust-features .trust-feature:nth-child(1){ transition-delay:.24s; }
.trust-features .trust-feature:nth-child(2){ transition-delay:.32s; }
.trust-features .trust-feature:nth-child(3){ transition-delay:.4s; }
.trust-features .trust-feature:nth-child(4){ transition-delay:.48s; }
@media (prefers-reduced-motion:reduce){
  .trust-feature{ transition:none; opacity:1; transform:none; }
}
.trust-feature h4{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:1.5;
  color:#fff;
}
.trust-feature p{
  margin-top:0;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:1.571;
  color:rgba(255,255,255,.85);
}
.trust-signature{
  position:absolute;
  left:674px;
  top:718px;
  width:272px;
  height:auto;
}
@media (prefers-reduced-motion: reduce){
  .faq-icon-v, .faq-answer-wrap{ transition:none; }
}

/* ===== contact ===== */
.contact-section{
  padding:80px 120px 100px;
  background:var(--cream);
}
.contact-card{
  display:flex;
  align-items:stretch;
  gap:56px;
  background:#fff;
  border-radius:40px;
  padding:56px;
}
.contact-info, .contact-form{
  flex:1 1 0;
  min-width:0;
}
.contact-divider{
  flex:0 0 auto;
  width:2px;
  background:rgba(28,29,29,.1);
}
.contact-eyebrow{ color:#696B6C; }
.contact-title{
  margin-top:8px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:40px;
  line-height:1.2;
  letter-spacing:0;
  color:var(--ink);
}
.contact-desc{
  margin-top:16px;
  max-width:380px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:1.5;
  color:#696B6C;
}
.contact-items{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.contact-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
}
.contact-icon{
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--orange);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s ease;
}
.contact-icon:hover{
  background:var(--orange-2);
}
.contact-icon svg{
  width:22px;
  height:22px;
}
.copy-toast{
  position:absolute;
  left:60px;
  top:2px;
  background:var(--ink);
  color:#fff;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:1;
  padding:8px 12px;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.copy-toast.is-visible{
  opacity:1;
  transform:translateY(0);
}
.contact-item-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-decoration:none;
}
.contact-item-text:hover strong{ color:var(--orange); }
.contact-item-text strong{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:18px;
  color:var(--ink);
}
.contact-item-text span{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  color:#696B6C;
}
.contact-remote{
  margin-top:40px;
}
.contact-remote h4{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:20px;
  color:var(--ink);
}
.contact-remote p{
  margin-top:6px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  color:#696B6C;
}
.contact-form-fields[hidden]{
  display:none;
}
.contact-form-fields{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.contact-honeypot{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.contact-submit-status{
  min-height:20px;
  margin:0;
  font-family:'Montserrat',sans-serif;
  font-weight:500;
  font-size:13px;
  line-height:1.5;
  color:#B33A16;
}
.contact-submit:disabled{
  cursor:wait;
  opacity:.7;
}
.contact-input, .contact-textarea{
  width:100%;
  box-sizing:border-box;
  border:none;
  border-radius:16px;
  background:var(--cream);
  padding:16px 20px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  color:var(--ink);
}
.contact-input::placeholder, .contact-textarea::placeholder{
  color:#9a9a9a;
}
.contact-input:focus, .contact-textarea:focus{
  outline:2px solid var(--orange);
  outline-offset:2px;
}
.contact-textarea{
  min-height:120px;
  resize:vertical;
  font-family:inherit;
}
.contact-submit{
  margin-top:10px;
  align-self:flex-start;
}
.contact-field{
  display:flex;
  flex-direction:column;
}
.contact-field-error{
  display:none;
  margin-top:6px;
  padding-left:4px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  color:#E23B3B;
}
.contact-field.has-error .contact-input{
  outline:2px solid #E23B3B;
  outline-offset:2px;
}
.contact-field.has-error .contact-field-error{
  display:block;
}
.contact-success[hidden]{
  display:none;
}
.contact-success{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.contact-success-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-success-icon svg{ width:24px; height:24px; }
.contact-success h3{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:26px;
  line-height:1.2;
  color:var(--ink);
}
.contact-success p{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.5;
  color:#696B6C;
  max-width:380px;
}
.contact-prepared-message{
  max-width:540px;
  min-height:168px;
  background:var(--cream);
}
.contact-prepared-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.contact-prepared-actions .btn-solid,
.contact-prepared-actions .btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.contact-copy-status{
  min-height:1.5em;
  font:500 14px/1.5 'Montserrat',sans-serif;
  color:#696B6C;
}

/* Не показываем только ещё не подключённые ссылки документов. */
.page-home a[href="#"],
.page-shop a[href="#"]:not(#shopOthersLink),
.page-shop .contact-item:has(> a[href="#"]){
  display:none;
}

/* ===== footer ===== */
.site-footer{
  box-sizing:border-box;
  background:#1C1D1D;
  color:#F6F8F9;
  padding:56px 124px 40px;
}
.footer-top{
  display:grid;
  grid-template-columns:168px minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(36px,5vw,72px);
}
.footer-logo{
  width:168px;
  flex:0 0 auto;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:28px;
  line-height:normal;
  letter-spacing:0;
  color:#fff;
}
.footer-logo span{
  display:block;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:17px;
  line-height:normal;
  letter-spacing:.36em;
  color:#fff;
}
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
}
.footer-nav a{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:normal;
  letter-spacing:0;
  color:rgba(246,248,249,.6);
  transition:color .2s ease;
}
.footer-nav a:hover{
  color:#fff;
}
.footer-nav a:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:4px;
  border-radius:4px;
}
.footer-icons{
  display:flex;
  gap:14px;
  margin-left:0;
}
.footer-badge{
  position:relative;
  width:32px; height:32px;
  border-radius:8px;
  background:transparent;
  border:2px solid rgba(246,248,249,.3);
  font:inherit;
  cursor:pointer;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s ease, background .2s ease;
}
.footer-badge svg{ width:16px; height:16px; }
.footer-badge:hover{
  border-color:var(--orange);
  background:rgba(255,83,0,.12);
}
.footer-icons .copy-toast{
  left:50%;
  top:40px;
  transform:translateX(-50%) translateY(4px);
}
.footer-icons .copy-toast.is-visible{
  transform:translateX(-50%) translateY(0);
}
.footer-divider{
  margin-top:40px;
  height:2px;
  background:rgba(246,248,249,.12);
}
.footer-bottom{
  margin-top:24px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.footer-copy,
.footer-policy{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:normal;
  letter-spacing:0;
  color:rgba(246,248,249,.5);
}
.footer-policy{
  transition:color .2s ease;
}
.footer-policy:hover{
  color:#fff;
}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  max-width:820px;
  gap:8px 20px;
}

/* ===== error page ===== */
.error-page{
  min-height:100vh;
  box-sizing:border-box;
  background:var(--cream);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 24px;
}
.error-logo{
  position:absolute;
  top:28px;
  left:120px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:24px;
  line-height:normal;
  color:var(--ink);
}
.error-logo span{
  display:block;
  font-size:16px;
  letter-spacing:.38em;
}
.error-ship{
  width:120px;
  height:160px;
  margin-bottom:12px;
  animation:error-ship-float 2.6s ease-in-out infinite;
}
.error-ship svg{ width:100%; height:100%; }
.error-ship-flame{
  transform-origin:60px 122px;
  animation:error-ship-flame 0.5s ease-in-out infinite alternate;
}
@keyframes error-ship-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-18px); }
}
@keyframes error-ship-flame{
  0%{ transform:scaleY(0.8); opacity:.7; }
  100%{ transform:scaleY(1.15); opacity:1; }
}
.error-eyebrow{
  margin-top:8px;
  justify-content:center;
}
.error-title{
  margin-top:12px;
  max-width:640px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:44px;
  line-height:1.2;
  color:var(--ink);
}
.error-title .accent{ color:var(--orange); }
.error-desc{
  margin-top:16px;
  max-width:460px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:1.5;
  color:#696B6C;
}
.error-retry{
  margin-top:32px;
}
@media (prefers-reduced-motion: reduce){
  .error-ship, .error-ship-flame{ animation:none; }
}

/* ===== shop page ===== */
.page[data-mode="catalog"] .shop-only-product{ display:none; }
.page[data-mode="product"] .shop-only-catalog{ display:none; }
.site-header.shop-header .header-icons .badge{
  width:28px;
  height:28px;
  background:transparent;
  border:1.5px solid #E3E0D9;
  color:var(--muted);
}
.site-header.shop-header .header-icons .badge:hover{
  background:#EDEAE3;
  color:var(--ink);
}
.site-header.shop-header .header-icons .badge svg{ width:14px; height:14px; }
.shop-articles-link{
  margin-left:auto;
  padding:8px 14px;
  border:1px solid #E3E0D9;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  transition:color .2s ease,border-color .2s ease;
}
.shop-articles-link:hover{ color:var(--orange); border-color:var(--orange); }
.site-header.shop-header .shop-articles-link + .header-icons{ margin-left:14px; }
.shop-crumb{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:56px;
}
.shop-crumb a{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--muted);
  transition:color .2s ease;
}
.shop-crumb a:hover{ color:var(--ink); }
.shop-crumb .sep{ color:#CBD1D3; }
.shop-crumb .current{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--ink);
}

.shop-product{
  display:flex;
  gap:64px;
  padding:56px 124px 0;
  align-items:flex-start;
}
.shop-gallery-wrap{ flex:0 0 auto; width:420px; display:flex; flex-direction:column; gap:20px; }
.shop-cover{
  width:420px;
  aspect-ratio:3/4;
  border-radius:24px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:32px;
  box-sizing:border-box;
  color:#fff;
  border:none;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.shop-cover .shop-play{
  position:absolute;
  top:38%; left:50%;
  transform:translate(-50%,-50%);
  width:72px; height:72px;
}
.shop-cover .shop-play svg{ width:26px; height:26px; }
.cover-bg-ink{ background:var(--ink); }
.cover-bg-orange{ background:var(--orange); }
.cover-bg-cream{ background:#EDEAE3; }
.shop-cover.cover-bg-cream,
.shop-thumb.cover-bg-cream{ color:var(--ink); }
.cover-pattern-diag::before{
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 2px, transparent 2px 26px);
}
.cover-bg-cream.cover-pattern-diag::before{
  background:repeating-linear-gradient(135deg, rgba(28,29,29,.06) 0 2px, transparent 2px 26px);
}
.cover-pattern-grid::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.10) 2px, transparent 2px);
  background-size:40px 40px;
}
.cover-bg-cream.cover-pattern-grid::before{
  background-image:
    linear-gradient(rgba(28,29,29,.06) 2px, transparent 2px),
    linear-gradient(90deg, rgba(28,29,29,.06) 2px, transparent 2px);
}
.cover-pattern-ring::before{
  content:'';
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  border:40px solid rgba(255,255,255,.10);
  right:-140px; top:-140px;
}
.cover-bg-cream.cover-pattern-ring::before{ border-color:rgba(28,29,29,.06); }
.cover-pattern-dot::before{
  content:'';
  position:absolute;
  width:280px; height:280px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  left:-90px; bottom:-100px;
}
.cover-bg-cream.cover-pattern-dot::before{ background:rgba(28,29,29,.05); }

.shop-info{ flex:1 1 auto; padding-top:8px; }
.shop-count-badge{
  border:2px solid var(--orange);
  color:var(--orange);
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  padding:6px 16px;
  border-radius:20px;
  display:inline-block;
}
.shop-cat-eyebrow{
  margin-top:20px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--muted);
}
.shop-title{
  margin-top:12px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:42px;
  line-height:1.08;
  color:var(--ink);
  max-width:520px;
}
.shop-desc{
  margin-top:20px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:28px;
  color:var(--ink);
  max-width:480px;
}
.shop-price-row{
  margin-top:36px;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.shop-price{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:48px;
  color:var(--ink);
}
.shop-price-note{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--muted);
}
.shop-buy-row{ margin-top:32px; display:flex; gap:16px; }
.shop-buy-hint{
  margin-top:16px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--muted);
}

.shop-cover-frame{ position:relative; }
.shop-thumbs{ display:flex; gap:12px; }
.shop-thumb{
  flex:1 1 0;
  aspect-ratio:3/4;
  min-width:0;
  position:relative;
  border-radius:14px;
  border:none;
  overflow:hidden;
  cursor:pointer;
  color:#fff;
  display:flex;
  align-items:flex-end;
  padding:10px;
  box-sizing:border-box;
  opacity:.55;
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.shop-thumb:hover{ opacity:.85; transform:translateY(-2px); }
.shop-thumb.is-active{ opacity:1; box-shadow:0 10px 20px rgba(23,20,15,.16); }
.shop-thumb:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.shop-thumb-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
}
.shop-thumb-play svg{ width:14px; height:14px; }
.shop-play{
  position:absolute;
  top:38%; left:50%;
  transform:translate(-50%,-50%);
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  display:none;
  align-items:center;
  justify-content:center;
}
.shop-cover.is-video .shop-play{ display:flex; }
.shop-play svg{ width:20px; height:20px; }
.shop-gallery-toast{
  position:absolute;
  left:50%; bottom:14px;
  transform:translateX(-50%) translateY(6px);
  background:#fff;
  color:var(--ink);
  box-shadow:0 10px 24px rgba(23,20,15,.28);
  padding:8px 16px;
  border-radius:12px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:13px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.shop-gallery-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

.shop-description{ padding:80px 124px 0; }
.shop-included{
  background:#fff;
  border-radius:24px;
  padding:36px 40px;
  box-sizing:border-box;
}
/* на экране одного товара блок «что входит» переехал в info-колонку — между
   ценой и кнопкой покупки, без карточки-подложки, как в общей колонке текста */
.shop-included--inline{
  margin-top:32px;
  background:none;
  border-radius:0;
  padding:0;
  max-width:480px;
}
.shop-included h3, .shop-how h3{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:20px;
  color:var(--ink);
}
.shop-section-qty{
  margin-left:10px;
  padding-left:14px;
  border-left:2px solid rgba(28,29,29,.15);
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--muted);
  vertical-align:middle;
}
.shop-included-list{
  margin-top:20px;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  column-gap:32px;
  row-gap:12px;
}
.shop-included-list li{
  position:relative;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.4;
  color:var(--ink);
  padding-right:32px;
}
.shop-included-list li:not(:last-child)::after{
  content:'';
  position:absolute;
  right:12px; top:50%;
  transform:translateY(-50%);
  width:4px; height:4px;
  border-radius:50%;
  background:#CBD1D3;
}

.shop-how{
  margin-top:24px;
  background:#fff;
  border-radius:24px;
  padding:36px 40px;
  box-sizing:border-box;
}
.shop-description .shop-how:first-child{ margin-top:0; }
.shop-how-steps{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.shop-how-step{
  border-left:2px solid var(--orange);
  padding-left:18px;
}
.shop-how-num{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--orange);
}
.shop-how-step p{
  margin-top:8px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.4;
  color:var(--ink);
}
.shop-how-note{
  margin-top:20px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--muted);
}

.shop-contact-section{ padding:80px 124px 100px; }
.shop-contact-cta{
  background:#fff;
  border-radius:24px;
  padding:32px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.shop-contact-title{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:26px;
  line-height:1.2;
  color:var(--ink);
}
.shop-contact-title .accent{ color:var(--orange); }
.shop-contact-desc{
  margin-top:10px;
  max-width:420px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:24px;
  color:var(--muted);
}
.shop-contact-icons{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.shop-contact-primary{ gap:10px; flex:0 0 auto; }
.shop-contact-primary svg{ width:20px; height:20px; }
.shop-contact-secondary{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

.shop-others{ padding:80px 124px 0; }
.shop-others-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.shop-others-title{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:32px;
  color:var(--ink);
}
/* блоки типов и сетки карточек переиспользуют .shop-type-block/.shop-card-grid
   из каталога — «другие товары» показывают всё, поделённое по типам, так же */
.shop-mini{
  cursor:pointer;
  border:none;
  background:none;
  text-align:left;
  padding:0;
  font:inherit;
  color:inherit;
  min-width:0;
}
.shop-mini-cover{
  width:100%;
  aspect-ratio:3/4;
  border-radius:18px;
  position:relative;
  overflow:hidden;
  color:#fff;
  display:flex;
  align-items:flex-end;
  padding:16px;
  box-sizing:border-box;
  opacity:.8;
  transition:opacity .2s ease, transform .25s ease, box-shadow .25s ease;
}
.shop-mini:hover .shop-mini-cover{ opacity:1; transform:translateY(-10px) scale(1.04); box-shadow:0 20px 34px rgba(23,20,15,.2); }
.shop-mini.is-active .shop-mini-cover{ opacity:1; }
/* Тёмный градиент снизу — держит название/цену читаемыми поверх любой
   фотографии, когда плейсхолдер-фон сменится на реальный кадр. */
.shop-mini-cover::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(15,14,12,.72) 100%);
  pointer-events:none;
}
.shop-mini-glyph{
  position:absolute;
  right:-14px; bottom:-30px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:96px;
  opacity:.14;
}
/* Название, тип и цена/количество — весь текст карточки поверх фото,
   ничего не остаётся под изображением. */
.shop-mini-text{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
}
.shop-mini-label{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:14px;
}
.shop-mini-type{
  display:block;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.shop-mini-price-row{
  display:block;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:12px;
  color:rgba(255,255,255,.85);
}

/* ===== каталог: переключатель товаров ===== */
.shop-catalog{ padding:64px 124px 0; }
.shop-catalog-head{ max-width:720px; }
.shop-catalog-title{
  margin-top:12px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:52px;
  line-height:1.05;
  color:var(--ink);
}
.shop-catalog-title .accent{ color:var(--orange); }
.shop-catalog-sub{
  margin-top:16px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:28px;
  color:var(--muted);
}
.shop-filter{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.shop-filter-btn{
  border:2px solid #E3E0D9;
  background:#fff;
  color:var(--ink);
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:15px;
  padding:10px 20px;
  border-radius:20px;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.shop-filter-btn:hover{ border-color:var(--ink); }
.shop-filter-btn.is-active{
  background:var(--ink);
  border-color:var(--ink);
  color:#F6F8F9;
}
@media (prefers-reduced-motion:reduce){ .shop-filter-btn{ transition:none; } }
.shop-type-block{ margin-top:56px; }
.shop-type-block[hidden]{ display:none; }
.shop-type-title{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:28px;
  color:var(--ink);
}
.shop-type-caption{
  margin-top:8px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  color:var(--muted);
}
.shop-card-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:24px;
}
/* блоки типов без заголовка/подписи (фильтр сверху уже называет типы) —
   деление на типы показано только визуально, тонкой линией между группами */
.shop-type-block--plain .shop-card-grid{ margin-top:0; }
.shop-type-block--plain + .shop-type-block--plain{
  padding-top:40px;
  border-top:2px solid rgba(28,29,29,.1);
}
@media (max-width:1100px){
  .shop-card-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* buy modal */
.buy-modal{
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(23,20,15,.92);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
  padding:24px;
}
.buy-modal.is-open{ opacity:1; visibility:visible; }
.buy-panel{
  width:480px;
  max-width:100%;
  background:#fff;
  border-radius:34px;
  padding:40px;
  box-sizing:border-box;
  position:relative;
  transform:scale(.96);
  transition:transform .25s ease;
}
.buy-modal.is-open .buy-panel{ transform:scale(1); }
.buy-close{
  position:absolute;
  top:24px; right:24px;
  width:40px; height:40px;
  border-radius:50%;
  border:none;
  background:var(--cream);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .2s ease;
}
.buy-close:hover{ background:#E9E6E0; }
.buy-close svg{ width:16px; height:16px; }
.buy-eyebrow{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--muted);
}
.buy-title{
  margin-top:6px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:24px;
  color:var(--ink);
  max-width:340px;
}
.buy-price{
  margin-top:16px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:32px;
  color:var(--ink);
}
.buy-step{ display:none; }
.buy-step.is-active{ display:block; }
.buy-form-fields{ margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.buy-pay-note{
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:13px;
  color:var(--muted);
}
.buy-pay-tag{
  border:2px solid #CBD1D3;
  border-radius:8px;
  padding:2px 8px;
  font-weight:600;
  color:var(--ink);
}
.buy-submit{ margin-top:24px; width:100%; }
.buy-demo-note{
  margin-top:16px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  text-align:center;
}
.buy-processing{
  padding:40px 0 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.buy-spinner{
  width:40px; height:40px;
  border-radius:50%;
  border:4px solid #F0EDE7;
  border-top-color:var(--orange);
  animation:buy-spin .8s linear infinite;
}
@keyframes buy-spin{ to{ transform:rotate(360deg); } }
.buy-processing p{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  color:var(--ink);
}
.buy-result{
  padding:24px 0 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
}
.buy-result-icon{
  width:56px; height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.buy-step--success .buy-result-icon{ background:var(--orange); }
.buy-step--error .buy-result-icon{ background:#E23B3B; }
.buy-result-icon svg{ width:24px; height:24px; }
.buy-result h3{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:22px;
  color:var(--ink);
}
.buy-result p{
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:15px;
  line-height:1.5;
  color:#696B6C;
  max-width:320px;
}
.buy-result .btn-solid, .buy-result .btn-outline{ margin-top:8px; width:100%; }

/* ===== shop: отзывы (компактная карусель) ===== */
.shop-testimonials{
  padding:80px 124px 0;
  text-align:center;
}
.shop-testi-eyebrow{ color:var(--muted); }
.shop-testi-title{
  margin-top:8px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:32px;
  color:var(--ink);
}
.shop-testi-carousel{
  margin-top:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.shop-testi-arrow{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--ink);
  background:#fff;
  color:var(--ink);
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.shop-testi-arrow svg{ width:18px; height:18px; }
.shop-testi-arrow:hover{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
  transform:translateY(-2px);
}
.shop-testi-arrow:active{ transform:translateY(0); }
.shop-testi-track{
  position:relative;
  width:1040px;
  height:260px;
  flex:0 0 auto;
  overflow:visible;
}
.shop-testi-card{
  position:absolute;
  top:0;
  left:50%;
  width:460px;
  height:230px;
  border-radius:24px;
  background:#fff;
  color:var(--ink);
  padding:26px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  text-align:left;
  box-shadow:0 10px 24px rgba(23,20,15,.08);
  transition:transform .35s ease, opacity .35s ease;
}
.shop-testi-card--active{ z-index:3; opacity:1; transform:translate(-50%,5px) scale(1.04); box-shadow:0 22px 44px rgba(23,20,15,.16); }
.shop-testi-card--n1{ z-index:2; opacity:.6; transform:translate(calc(-50% - 215px),8px) scale(.82); pointer-events:none; }
.shop-testi-card--p1{ z-index:2; opacity:.6; transform:translate(calc(-50% + 215px),8px) scale(.82); pointer-events:none; }
.shop-testi-card--n2{ z-index:1; opacity:.3; transform:translate(calc(-50% - 355px),12px) scale(.64); pointer-events:none; }
.shop-testi-card--p2{ z-index:1; opacity:.3; transform:translate(calc(-50% + 355px),12px) scale(.64); pointer-events:none; }
.shop-testi-stars{
  display:none; /* рейтинг пока не основан на реальных оценках — временно скрыт */
}
.shop-testi-name{
  flex:0 0 auto;
  margin-top:10px;
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:15px;
  line-height:1.2;
  color:var(--ink);
}
.shop-testi-role{
  flex:0 0 auto;
  margin-top:2px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:12px;
  color:var(--muted);
}
.shop-testi-text{
  margin-top:10px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:13px;
  line-height:18px;
  color:var(--ink);
  overflow:hidden;
}
.shop-testi-dots{
  margin-top:32px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.shop-testi-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:none;
  background:#D9D5CD;
  opacity:.6;
  cursor:pointer;
  padding:0;
  transition:opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.shop-testi-dot:hover{ opacity:.85; }
.shop-testi-dot.is-active{ background:var(--orange); opacity:1; transform:scale(1.3); }
.shop-testi-mobile{ display:none; }

@media (prefers-reduced-motion:reduce){
  .shop-thumb, .shop-mini-cover, .buy-modal, .buy-panel, .buy-spinner, .shop-testi-card, .shop-testi-arrow, .shop-testi-dot{ transition:none; animation:none; }
}

/* =====================================================================
   МОБИЛЬНАЯ И ПЛАНШЕТНАЯ АДАПТИВНОСТЬ — ГЛАВНАЯ СТРАНИЦА (index.html)
   Добавлено 2026-09-05 по просьбе Юли: «переделываем в мобильный формат
   главную и шоп». Это первый этап — только главная страница.

   Правила ниже НЕ трогают десктопную вёрстку (≥1440px остаётся визуально
   идентичной): все изменения даются через @media(max-width:...), кроме
   единственного исключения — `.page-home` (см. ниже), которое при
   viewport ≥1440px даёт точно тот же результат, что и раньше (1440px по
   центру), а при более узком экране позволяет странице сжиматься.

   Брейкпоинты:
     — компактный: max-width: 1180px (планшеты и узкие окна)
     — масштабируемый десктоп: 1181-1439px (композиция 1440px без обрезки)
     — мобильный: max-width: 640px  (телефоны, ~375-430 и уже)

   Классы вида .shop-* / .site-header.shop-header / .cta-builder внутри
   .shop-custom-cta НЕ трогаем — страница магазина адаптируется отдельным
   этапом. Там, где стили общие для обеих страниц (шапка, футер, cta-builder,
   кнопки), правки сделаны так, чтобы не портить desktop и не аффектить
   магазин там, где это возможно — см. комментарии по месту.
   ===================================================================== */

/* .page-home ставится только на index.html (в отличие от shop.html, где
   контейнер тот же .page, но без этого модификатора) — поэтому это
   изменение безопасно только для главной страницы. При ширине экрана
   ≥1440px width:100% упирается в max-width:1440px и даёт точно те же
   1440px по центру, что и раньше. */
.page-home{
  width:100%;
  max-width:1440px;
  overflow-x:hidden;
}

/* ---------- гамбургер-меню (кнопка), скрыта на десктопе ---------- */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px;
  height:40px;
  flex:0 0 auto;
  margin-left:auto;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
}
.nav-toggle-bar{
  display:block;
  width:24px;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- панель мобильного меню (скрыта на десктопе) ---------- */
.mobile-nav{
  display:none;
  position:fixed;
  inset:0;
  z-index:900;
  background:var(--cream);
  padding:96px 32px 40px;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.mobile-nav-links{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.mobile-nav-links a{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:22px;
  color:var(--ink);
}
.mobile-nav-icons.header-icons{
  margin-left:0;
  margin-top:36px;
}
@media (prefers-reduced-motion:reduce){
  .nav-toggle-bar, .mobile-nav{ transition:none; }
}

/* До 1180px используем цельную компактную схему — без провала между
   планшетным и десктопным состояниями при ручном изменении окна. */
@media (max-width:1180px){
  body.nav-open{ overflow:hidden; }
  /* ---------- шапка / навигация (только главная — не .shop-header) ---------- */
  .site-header:not(.shop-header){ z-index:901; }
  .site-header:not(.shop-header){ padding:20px 24px 0; }
  .page-articles .site-header:not(.shop-header){ padding-left:32px; padding-right:32px; }
  .site-header:not(.shop-header) .logo{ width:auto; font-size:22px; }
  .site-header:not(.shop-header) .logo span{ font-size:12px; letter-spacing:.3em; }
  .site-header:not(.shop-header) .nav,
  .site-header:not(.shop-header) .header-icons{ display:none; }
  .nav-toggle{ position:relative; z-index:902; display:flex; width:44px; height:44px; }
  .mobile-nav{ display:flex; flex-direction:column; }
  .mobile-nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); }

  /* ---------- hero ---------- */
  .hero{ flex-direction:column; align-items:stretch; gap:0; padding:32px 24px 0; min-height:0; }
  /* hero-left "растворяется" — его дети становятся прямыми flex-элементами
     .hero, чтобы фото-блок можно было переставить между заголовком и
     описанием через order, не трогая структуру/расстояния остальных версий */
  .hero-left{ width:100%; display:contents; }
  .eyebrow{ order:1; }
  .hero h1{ font-size:42px; order:2; }
  /* Фото стоит между заголовком и описанием; одинаковый отступ с обеих сторон
     делает эту связку визуально цельной на планшете. */
  .hero-desc{ max-width:100%; margin-top:24px; order:4; }
  .hero-buttons{ margin-top:32px; flex-wrap:wrap; order:5; }
  .hero-right{ position:relative; left:0; top:0; width:100%; height:380px; margin-top:24px; order:3; overflow:hidden; border-radius:34px; }
  /* object-fit:contain + padding — весь объект (человек) виден целиком с небольшим
     отступом до стенки контейнера, вместо обрезки как на десктопе (object-fit:none) */
  .hero-photo{ object-fit:contain; object-position:center; box-sizing:border-box; padding:18px; background:var(--orange); transform:scale(1.3); transform-origin:center; }
  /* justify-content:center — выравнивает верхний и нижний отступ до текста
     (без этого при фиксированной высоте карточки весь лишний воздух уходил
     вниз, отступ под «лидеры категорий» был заметно больше, чем над «10») */
  .stat-panel{ left:20px; top:20px; justify-content:center; }

  /* ---------- trust-bar ---------- */
  .trust-bar{ padding:9px 24px; }
  .trust-track-group{ gap:40px; margin-right:40px; }

  /* ---------- quote-bar ---------- */
  /* звезда убрана — освобождает место, чтобы текст слева и «KAYUMOVA DESIGN»
     справа помещались в один ряд, без переноса блоков друг под друга */
  .footer-quote .asterisk{ display:none; }
  .quote-bar{ height:auto; padding:20px 24px; gap:16px; }
  /* text-align:right — при переносе «KAYUMOVA DESIGN» в две строки обе строки
     выравниваются по правому краю (а не только по левому от разной длины слов) */
  .footer-brand{ text-align:right; }
  .footer-brand .line{ display:none; }

  /* ---------- gallery / coverflow ---------- */
  .coverflow-viewport{ height:420px; }
  .gallery-item{ width:240px; height:320px; margin:-160px 0 0 -120px; }

  /* ---------- approach ---------- */
  .approach{ flex-direction:column; padding:0 24px 32px; gap:24px; }
  .approach-left{ width:100%; }
  .approach-title{ font-size:32px; }
  .approach-desc{ max-width:100%; }
  .approach-desc-nowrap{ white-space:normal; }
  .approach-cards{ flex-wrap:wrap; gap:16px; }
  /* убрали текст-описание и сделали равные отступы по всем сторонам — только
     номер и вопрос, карточки компактнее и стоят сеткой 2×2 */
  .approach-card{ width:calc(50% - 8px); height:auto; min-height:180px; padding:20px; }
  .approach-a{ display:none; }

  /* ---------- process ---------- */
  .process{ flex-direction:row; gap:24px; padding:32px 24px; align-items:flex-start; }
  .process-col{ width:calc((100% - 48px) / 3); max-width:none; min-width:0; }
  .process-title{ font-size:clamp(20px, 3.1vw, 32px); gap:clamp(8px, 1.5vw, 16px); }
  .process-arrow{ width:clamp(24px, 3.5vw, 40px); }

  /* ---------- case-section ---------- */
  .case-section{ padding:40px 24px; }
  /* десктопная карусель "до/после" (одна карточка + стрелки + анимация fade)
     скрыта — вместо неё показываем новый .case-slider: настоящий
     горизонтальный скролл-слайдер с "peek" следующей карточки, как у тарифов.
     Так у всех слайдеров сайта одинаковое поведение: без стрелок, свайп
     пальцем, видно, что контента больше одного экрана. */
  .case-carousel{ display:none; }
  .case-dots{ display:none; }
  .case-slider{
    display:block;
    margin-top:0;
  }
  .case-slider-track{
    display:flex;
    flex-wrap:nowrap;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin:0 -24px;
    padding:4px 24px 10px;
    scrollbar-width:none;
  }
  .case-slider-track::-webkit-scrollbar{ display:none; }
  .case-slider-track .case-card{
    flex:0 0 auto;
    width:80%;
    max-width:360px;
    scroll-snap-align:start;
    flex-direction:column;
    gap:24px;
    padding:20px;
  }
  .case-slider-track .case-photos{ justify-content:center; }
  .case-slider-track .case-photo{ width:200px; height:auto; aspect-ratio:3 / 4; }
  /* Одинаковая вертикальная сетка во всех кейсах: две строки
     резервируются под заголовок, поэтому показатели и описания
     начинаются на одной высоте независимо от длины названия. */
  .case-slider-track .case-tools-row{
    height:50px;
    align-items:flex-start;
  }
  .case-slider-track .case-desc{ max-width:100%; }
  .case-slider-dots{ display:flex; margin-top:20px; justify-content:center; gap:8px; }
  .case-slider-dot{
    width:8px; height:8px; padding:0; border:none; border-radius:50%;
    background:#D5DBDE; cursor:pointer;
    transition:background-color .2s ease, width .2s ease, border-radius .2s ease;
  }
  .case-slider-dot.is-active{ background:var(--orange); width:22px; border-radius:5px; }

  /* ---------- pricing ---------- */
  .pricing{ padding:48px 24px; }
  /* тарифы — горизонтальный слайдер со свайпом пальцем (нативный scroll-snap)
     и "peek" следующей карточки справа, чтобы было видно, что тарифов больше
     одного. Правило единое для всех слайдеров сайта: без стрелок, точки —
     индикатор. Отступы секции "продолжаются" в трек через отрицательный
     margin + такой же padding, чтобы первая карточка стояла на месте старой. */
  .pricing-cards{
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin:36px -24px 0;
    padding:4px 24px 10px;
    scrollbar-width:none;
  }
  .pricing-cards::-webkit-scrollbar{ display:none; }
  .price-card{
    flex:0 0 auto;
    width:80%;
    max-width:360px;
    scroll-snap-align:start;
    opacity:1 !important;
    transform:none !important;
  }
  .pricing-dots{ display:flex; margin-top:20px; justify-content:center; gap:8px; }
  .pricing-dot{
    width:8px; height:8px; padding:0; border:none; border-radius:50%;
    background:#D5DBDE; cursor:pointer;
    transition:background-color .2s ease, width .2s ease, border-radius .2s ease;
  }
  .pricing-dot.is-active{ background:var(--orange); width:22px; border-radius:5px; }

  /* ---------- cta-builder (общий с магазином — безопасные правки) ---------- */
  .cta-builder{ padding:48px 24px; display:flex; flex-direction:column; }
  /* картинка Figma переставлена выше — сразу после заголовка, перед списком
     галочек и кнопками. .cta-row/.cta-left "растворяются" (display:contents),
     чтобы их дети стали прямыми flex-элементами .cta-builder и их можно было
     переставить через order, как и в hero */
  .cta-row{ display:contents; }
  .cta-left{ width:100%; display:contents; }
  .cta-title{ order:1; font-size:36px; max-width:100%; }
  /* отступы сверху/снизу от картинки уменьшены втрое: сама картинка обрезана
     (assets/cta-figma-combo-mobile.png — прозрачные поля внутри png уменьшены
     в ~3 раза через crop), а margin-top у .cta-right и .cta-features также
     уменьшены втрое (28→9, 40→13), чтобы суммарный видимый отступ (поле
     картинки + margin) тоже сократился примерно в три раза */
  .cta-right{ order:2; width:100%; height:auto; max-width:100%; margin:9px 0 0; }
  .cta-features{ order:3; margin-top:13px; }
  .cta-buttons{ order:4; }
  .cta-figma-combo-img{ width:100%; height:auto; }

  /* ---------- testimonials ---------- */
  .testimonials{ padding:44px 24px 56px; }
  .testimonials-title{ font-size:32px; }
  /* На всех экранах используем одну карусель: активная карточка по центру,
     соседние уменьшены и частично обрезаются краями секции. */
  .testi-carousel{
    display:flex;
    width:100%;
    margin-top:28px;
    gap:0;
  }
  .testi-track{
    width:min(380px, calc(100vw - 96px));
    height:550px;
  }
  .testi-card{
    width:100%;
    height:550px;
    padding:34px 22px 22px;
  }
  .testi-name{ font-size:24px; }
  .testi-text{ font-size:14px; line-height:22px; }
  .testi-dots{ display:none; }
  .testi-slider-counter{ margin-top:20px; }

  /* ---------- services ---------- */
  .services{ padding:48px 24px 64px; }
  .services-title{ font-size:36px; }
  /* услуги — тот же слайдер-паттерн, что у тарифов/кейсов/отзывов: свайп
     пальцем, peek следующей карточки, без стрелок, точки-индикатор снизу.
     Раньше карточки просто вертикально складывались в 2 колонки и занимали
     очень много места по высоте — карусель компактнее. */
  .services-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin:36px -24px 0;
    /* padding-top увеличен с 4 до 20px: overflow-x:auto заставляет overflow-y
       тоже стать auto (по спецификации), поэтому плашка "Топ" (top:-16px)
       обрезалась верхним краем скролл-контейнера — теперь у неё есть запас */
    padding:20px 24px 10px;
    scrollbar-width:none;
  }
  .services-grid::-webkit-scrollbar{ display:none; }
  .service-card{
    flex:0 0 auto;
    width:62%;
    max-width:260px;
    min-height:220px;
    scroll-snap-align:start;
    opacity:1 !important;
    transform:none !important;
  }
  .services-dots{ display:flex; margin-top:20px; flex-wrap:wrap; justify-content:center; gap:8px; }
  .services-dot{
    width:8px; height:8px; padding:0; border:none; border-radius:50%;
    background:#D5DBDE; cursor:pointer;
    transition:background-color .2s ease, width .2s ease, border-radius .2s ease;
  }
  .services-dot.is-active{ background:var(--orange); width:22px; border-radius:5px; }

  /* ---------- faq ---------- */
  .faq{ padding:48px 24px 64px; }
  .faq-title{ font-size:36px; }
  .faq-q-text{ font-size:18px; }
  .faq-answer-content{ padding:0 0 24px 0; }
  .faq-cta{ flex-direction:column; align-items:flex-start; gap:20px; padding:28px 32px; }
  .faq-cta-title{ font-size:30px; }

  /* ---------- trust-block (только главная, класс уникален для неё) ---------- */
  /* по Фигма-макету порядок на моб./планшете: текст+статы, потом сетка
     "Работаю лично/Авторское право/..." и только потом фото. .trust-content
     "растворяется" (display:contents — тот же приём, что в hero/cta-builder),
     чтобы его дети стали прямыми flex-элементами .trust-block и их можно
     было переставить через order. gap на контейнере убран (0) — спейсинг
     между блоками теперь держат их собственные margin-top, иначе с display:
     contents отступы задвоились бы (margin-top элемента + gap контейнера). */
  .trust-block{
    width:100%;
    height:auto;
    padding:48px 24px;
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .trust-content{ display:contents; }
  .trust-eyebrow{ order:1; }
  .trust-title{ order:2; font-size:36px; }
  .trust-desc{ order:3; }
  /* статы — та же самая десктопная "таблетка" (ширина/паддинги/радиус/шрифты
     не переопределяются), просто пропорционально уменьшена через zoom, а не
     растянута на всю ширину и переверстана заново — это и было "как на
     десктопе, просто уменьшить". margin-left:0 — десктопный -28px тут не нужен
     (это компенсация под десктопную сетку, которой здесь нет). */
  .trust-stats{ order:4; margin-left:0; zoom:0.75; }
  .trust-features{ order:5; width:100%; grid-template-columns:1fr 1fr; column-gap:24px; }
  /* фото — как на десктопе (582×772), но не фиксированная высота, а
     aspect-ratio от реальных пропорций фото, чтобы object-fit:cover не
     обрезал кадр сильнее, чем на десктопе. Высота теперь всегда = ширина
     блока × (772/582), т.е. зависит только от ширины контейнера. */
  .trust-photo{ order:6; position:static; width:100%; height:auto; aspect-ratio:582/772; margin-top:32px; }
  /* бейдж и подпись наложены ПРЯМО НА фото (как на десктопе) через
     отрицательный margin-top — .trust-badge/.trust-signature остаются
     обычными потоковыми flex-элементами (не position:absolute), просто
     "подтянуты" наверх поверх нижней части предыдущего элемента (фото).
     Раз высота фото теперь = ширина × 772/582, а margin-top в % всегда
     считается от ШИРИНЫ контейнера (не высоты) — можно выразить отступ
     в % от ширины (что при данном aspect-ratio равно нужной доле высоты
     фото) плюс фиксированную поправку в px под собственную высоту
     бейджа/подписи (она не масштабируется, т.к. заданы фиксированным
     шрифтом). Числа подобраны и проверены через замер реальных координат
     (Playwright getBoundingClientRect). */
  .trust-badge{ order:7; position:relative; left:auto; top:auto; margin-top:calc(-132.65% + 16px); padding:0 20px; z-index:2; }
  .trust-badge-logo{ font-size:22.4px; }
  .trust-badge-logo span{ font-size:14.4px; }
  .trust-signature{ order:8; position:relative; left:auto; top:auto; align-self:flex-end; width:150px; height:auto; margin:calc(132.65% - 224px) 20px 0 0; z-index:2; }

  /* ---------- contact (только главная) ---------- */
  .contact-section{ padding:48px 24px 64px; }
  .contact-card{ flex-direction:column; padding:32px; gap:32px; }
  .contact-divider{ width:100%; height:2px; }

  /* ---------- footer (общий с магазином — безопасные правки) ---------- */
  .site-footer{ padding:40px 24px 32px; }
  .footer-top{
    grid-template-columns:150px minmax(0,1fr) auto;
    align-items:start;
    gap:28px;
  }
  .footer-logo{ width:150px; font-size:24px; }
  .footer-logo span{ font-size:14px; letter-spacing:.34em; }
  .footer-nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; }
  .footer-icons{ margin-left:0; }
  .footer-bottom{ gap:18px 28px; }
  .footer-legal{ max-width:68%; }
}

@media (max-width:640px){
  /* ---------- шапка ---------- */
  .site-header:not(.shop-header){ padding:16px 20px 0; }
  .page-articles .site-header:not(.shop-header){ padding-left:20px; padding-right:20px; }
  .mobile-nav{ padding:88px 24px 32px; }

  /* ---------- hero ---------- */
  .hero{ padding:24px 20px 0; }
  .hero h1{ font-size:26.4px; }
  .hero-desc{ margin-top:20px; font-size:16px; line-height:24px; }
  .hero-buttons{ margin-top:24px; gap:12px; }
  .hero-buttons .btn-solid, .hero-buttons .btn-outline, .hero-buttons .btn-dark{ font-size:15px; padding:10px 18px; }
  /* border-radius на hero-right — иначе увеличенное/сдвинутое фото обрезается
     прямоугольной рамкой overflow:hidden и скругление углов пропадает.
     margin-top:20px — тот же зазор, что раньше был между h1 и описанием
     на мобильной версии, просто теперь он стоит перед фото-блоком */
  .hero-right{ height:280px; overflow:hidden; border-radius:34px; margin-top:20px; }
  .hero-photo{ padding:12px; transform:translateX(10px) translateY(-20px) scale(1.8); transform-origin:center; }
  .stat-panel{
    width:148px;
    height:112px;
    padding:0;
    gap:0;
    overflow:hidden;
    border-radius:28px;
  }
  .stat-panel .stat,
  .stat-panel .stat-plain{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    opacity:0;
    transform:translateY(10px);
    animation:heroMobileStatCycle 21s infinite;
  }
  .stat-panel .stat:nth-child(2){ animation-delay:3s; }
  .stat-panel .stat-plain:nth-child(3){ animation-delay:6s; }
  .stat-panel .stat-plain:nth-child(4){ animation-delay:9s; }
  .stat-panel .stat-plain:nth-child(5){ animation-delay:12s; }
  .stat-panel .stat-plain:nth-child(6){ animation-delay:15s; }
  .stat-panel .stat-plain:nth-child(7){ animation-delay:18s; }
  .stat strong{ font-size:34px; }
  .stat span{ margin-top:-4px; font-size:14px; }
  .stat-plain{ font-size:18px; font-weight:600; }
  .stat-panel .stat::after,
  .stat-panel .stat-plain::after{
    position:absolute;
    top:12px;
    right:14px;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:9px;
    letter-spacing:.06em;
    color:rgba(255,255,255,.7);
  }
  .stat-panel > :nth-child(1)::after{ content:'01 / 07'; }
  .stat-panel > :nth-child(2)::after{ content:'02 / 07'; }
  .stat-panel > :nth-child(3)::after{ content:'03 / 07'; }
  .stat-panel > :nth-child(4)::after{ content:'04 / 07'; }
  .stat-panel > :nth-child(5)::after{ content:'05 / 07'; }
  .stat-panel > :nth-child(6)::after{ content:'06 / 07'; }
  .stat-panel > :nth-child(7)::after{ content:'07 / 07'; }

  /* ---------- trust-bar ---------- */
  .trust-track-group{ gap:28px; margin-right:28px; }
  /* логотипы брендов увеличены на 20%, затем ещё на 10% — раньше были слишком мелкими */
  .client-uralprofi{ height:45px; }
  .client-fsh{ height:40px; }
  .client-uraltoys{ height:40px; }
  .client-interplay{ height:37px; }

  /* ---------- quote-bar ---------- */
  .footer-quote p{ font-size:13px; max-width:220px; }
  .footer-brand{ font-size:14px; gap:10px; }
  .footer-brand .line{ width:50px; }

  /* ---------- gallery / coverflow ---------- */
  .gallery{ padding:48px 0 64px; }
  .coverflow-viewport{ height:340px; }
  .gallery-item{ width:190px; height:254px; margin:-127px 0 0 -95px; }

  /* ---------- approach ---------- */
  .approach-title{ font-size:26px; }
  /* сетка 2×2 вместо стопки в одну колонку — как уже было на планшете */
  .approach-card{ width:calc(50% - 8px); min-height:160px; padding:20px; }
  .approach-num{ font-size:40px; }
  /* В узких карточках вопросы должны уменьшаться вместе с экраном,
     иначе длинные слова выходят за правую границу. */
  .approach-q{
    min-width:0;
    max-width:100%;
    font-size:clamp(14px, 4vw, 16px);
    overflow-wrap:anywhere;
  }

  /* ---------- process ---------- */
  .process{
    flex-direction:column;
    gap:12px;
    align-items:stretch;
    padding:24px 20px 32px;
    perspective:900px;
  }
  .process-col{
    position:relative;
    width:100%;
    max-width:none;
    min-height:184px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 96px;
    grid-template-rows:auto 1fr;
    column-gap:12px;
    padding:20px;
    box-sizing:border-box;
    overflow:hidden;
    border:2px solid rgba(246,248,249,.12);
    border-radius:20px;
    background:rgba(246,248,249,.04);
    opacity:0;
    transform:perspective(900px) rotateX(24deg) translateY(32px) scale(.96);
    transform-origin:center bottom;
    backface-visibility:hidden;
    transition:opacity .64s ease, transform .72s cubic-bezier(.22,1,.36,1), background-color .64s ease;
  }
  .process-col:nth-child(1),
  .process-col:nth-child(2),
  .process-col:nth-child(3){ transition-delay:0s; }
  .process-col.is-visible{
    opacity:1;
    transform:perspective(900px) rotateX(0) translateY(0) scale(1);
    background:rgba(246,248,249,.06);
  }
  .process-title{
    grid-column:1;
    grid-row:1;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    font-size:22px;
    line-height:1.12;
  }
  .process-title::before{
    font-family:'Montserrat', sans-serif;
    font-weight:600;
    font-size:12px;
    line-height:1;
    letter-spacing:.08em;
    color:var(--orange);
  }
  .process-col:nth-child(1) .process-title::before{ content:'01'; }
  .process-col:nth-child(2) .process-title::before{ content:'02'; }
  .process-col:nth-child(3) .process-title::before{ content:'03'; }
  .process-arrow{ display:none; }
  .process-icon-slot{
    grid-column:2;
    grid-row:1 / 3;
    align-self:center;
    margin-top:0;
  }
  .process-icon,
  .process-icon.sz-analysis,
  .process-icon.sz-strategy,
  .process-icon.sz-design{
    width:88px;
    height:96px;
    opacity:0;
    transform:scale(.72) rotate(-10deg);
    transition:opacity .4s ease .16s, transform .56s cubic-bezier(.22,1,.36,1) .16s;
  }
  .process-col.is-visible .process-icon{
    opacity:1;
    transform:scale(1) rotate(0);
  }
  .process-desc{
    grid-column:1;
    grid-row:2;
    align-self:end;
    max-width:none;
    margin-top:14px;
    font-size:14px;
    line-height:20px;
  }

  /* ---------- case-section ---------- */
  .case-slider-track{
    box-sizing:border-box;
    width:calc(100% + 48px);
    padding-left:48px;
    padding-right:48px;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:48px;
    overscroll-behavior-x:contain;
  }
  .case-slider-track .case-card{
    width:100%;
    max-width:none;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
  .case-arrow{ width:40px; height:40px; }
  .case-arrow svg{ width:18px; height:18px; }
  .case-photos{ gap:10px; }
  .case-photo{ width:118px; height:auto; aspect-ratio:3 / 4; }
  /* Заголовок и площадка занимают одну строку внутри карточки кейса.
     Размер плавно уменьшается на узких телефонах. */
  .case-info{ min-width:0; max-width:100%; }
  .case-tools-row{
    width:100%;
    min-width:0;
    gap:clamp(4px, 1.5vw, 8px);
  }
  .case-tools-title{
    min-width:0;
    font-size:clamp(14px, 4vw, 16px);
    line-height:1.2;
    white-space:nowrap;
  }
  .case-platform{
    min-width:0;
    font-size:clamp(12px, 3.6vw, 14px);
    line-height:1.2;
    white-space:nowrap;
  }
  .case-proof-badge span{ white-space:normal; text-align:center; font-size:16px; }

  /* ---------- pricing ---------- */
  .pricing-cards{
    box-sizing:border-box;
    width:calc(100% + 48px);
    padding-left:48px;
    padding-right:48px;
    scroll-padding-inline:48px;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
  }
  .pricing-cards .price-card{
    width:100%;
    max-width:none;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
  .pricing-title{ font-size:30px; }
  .price-card{ padding:32px 24px 24px; }
  .price-value{ font-size:36px; margin-top:32px; }
  .price-name{ font-size:26px; }
  .price-btn{
    font-size:14.4px;
    white-space:nowrap;
  }

  /* ---------- cta-builder ---------- */
  .cta-title{ font-size:26px; }
  .cta-buttons{ flex-wrap:wrap; margin-top:32px; }

  /* ---------- testimonials ---------- */
  .testimonials-eyebrow{ font-size:14.4px; }
  .testimonials-title{ font-size:22.4px; }
  .testi-carousel{ gap:0; }
  .testi-arrow{ width:34px; height:34px; }
  .testi-arrow svg{ width:16px; height:16px; }
  .testi-track{
    width:min(330px, calc(100vw - 64px));
    height:540px;
    min-height:0;
  }
  .testi-card{
    width:100%;
    height:540px;
    padding:28.8px 12.8px 16px;
  }
  .testi-stars{ gap:12.8px; font-size:19.2px; }
  .testi-head{ margin-top:25.6px; gap:12.8px; }
  .testi-avatar{ width:60.8px; height:60.8px; border-radius:25.6px; font-size:17.6px; }
  .testi-name{ font-size:16px; }
  .testi-role{ margin-top:4.8px; font-size:12.8px; line-height:22.4px; }
  .testi-text{ margin-top:16px; font-size:12px; line-height:19.2px; }
  .testi-divider{ margin-bottom:19.2px; }
  .testi-stats{ gap:16px; }
  .testi-stat strong{ font-size:25.6px; }
  .testi-stat span{ margin-top:4.8px; font-size:14.4px; line-height:22.4px; }
  .testi-platform{ font-size:16px; }
  .testi-slider-counter{
    display:block;
    margin-top:20px;
    text-align:center;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:.06em;
    color:#9CA0A1;
  }

  /* ---------- services ---------- */
  .services-title{ font-size:28px; }
  .services-grid{
    box-sizing:border-box;
    width:calc(100% + 48px);
    padding-left:56px;
    padding-right:56px;
    scroll-padding-inline:56px;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
  }
  .services-grid .service-card{
    width:100%;
    max-width:none;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }

  /* ---------- faq ---------- */
  .faq-title{ font-size:28px; }
  .faq-question{ gap:16px; padding:22px 0; }
  .faq-q-text{ font-size:16px; }
  .faq-cta-title{ font-size:24px; }
  .faq-cta-desc{ font-size:16px; }

  /* ---------- trust-block ---------- */
  /* фото теперь везде на aspect-ratio (см. @media(max-width:1180px)) —
     здесь высоту переопределять не нужно, она сама пересчитывается от
     ширины. margin-top бейджа/подписи — тоже в % от ширины, поэтому
     формула из тablet-блока продолжает работать и здесь без изменений. */
  .trust-title{ font-size:28px; }
  /* На телефоне четыре слишком широких показателя живут в одном компактном
     контейнере и сменяют друг друга после появления блока в зоне просмотра. */
  .trust-stats{
    width:100%;
    height:112px;
    zoom:1;
    padding:0;
    position:relative;
    overflow:hidden;
    border-radius:28px;
  }
  .trust-stat,
  .trust-stat:last-child{
    position:absolute;
    inset:0;
    padding:0;
    align-items:center;
    justify-content:center;
    gap:6px;
    opacity:0;
    transform:translateY(10px);
  }
  .trust-stat + .trust-stat{ padding-left:0; }
  .trust-stat + .trust-stat::before{ display:none; }
  .trust-stat strong{ font-size:42px; }
  .trust-stat span{ font-size:14px; }
  .trust-stat::after{
    position:absolute;
    top:14px;
    right:18px;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:11px;
    letter-spacing:.06em;
    color:rgba(255,255,255,.7);
  }
  .trust-stat:nth-child(1)::after{ content:'01 / 04'; }
  .trust-stat:nth-child(2)::after{ content:'02 / 04'; }
  .trust-stat:nth-child(3)::after{ content:'03 / 04'; }
  .trust-stat:nth-child(4)::after{ content:'04 / 04'; }
  .trust-stats.is-visible .trust-stat{ animation:trustMobileStatCycle 12s infinite; }
  .trust-stats.is-visible .trust-stat:nth-child(2){ animation-delay:3s; }
  .trust-stats.is-visible .trust-stat:nth-child(3){ animation-delay:6s; }
  .trust-stats.is-visible .trust-stat:nth-child(4){ animation-delay:9s; }
  /* по макету сетка "Работаю лично/Авторское право/..." остаётся 2 колонки
     даже на самом узком экране (раньше здесь была 1 колонка) — column-gap
     сужен под мобильную ширину, текст переносится на 2 строки внутри своей
     колонки, как на присланном референсе */
  .trust-features{ grid-template-columns:1fr 1fr; column-gap:16px; row-gap:20px; }
  .trust-feature h4{ font-size:11.52px; }
  .trust-feature p{ font-size:8.96px; }
  .trust-badge{
    width:max-content;
    max-width:100%;
    align-self:flex-start;
    padding-left:0;
    padding-right:0;
    text-align:left;
    box-sizing:border-box;
  }
  .trust-badge-logo,
  .trust-badge-logo span,
  .trust-badge-role{ text-align:left; }
  .trust-badge-role{ width:100%; }
  .trust-badge-logo{ font-size:17.92px; }
  .trust-badge-logo span{ font-size:11.52px; }

  /* ---------- contact ---------- */
  .contact-card{ padding:24px; }
  .contact-title{ font-size:30px; }

  /* ---------- footer ---------- */
  .site-footer{ padding:36px 20px 28px; }
  .footer-top{ grid-template-columns:1fr; gap:28px; }
  .footer-logo{ width:auto; font-size:24px; }
  .footer-logo span{ font-size:14px; letter-spacing:.34em; }
  .footer-nav{ width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; }
  .footer-nav a{ font-size:14px; line-height:1.35; }
  .footer-icons{ margin-top:2px; }
  .footer-divider{ margin-top:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; text-align:left; justify-content:flex-start; gap:18px; }
  .footer-legal{ max-width:none; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:12px; }
}

@media (max-width:390px){
  .footer-logo{ font-size:22px; }
  .footer-logo span{ font-size:13px; }
}

/* ===== shop: responsive layout ===== */
.page-shop{ width:100%; max-width:1440px; overflow-x:hidden; }
.page-shop .shop-mini-cover::before{
  background:linear-gradient(180deg, transparent 30%, rgba(15,14,12,.88) 100%);
}

@media (max-width:1180px){
  .shop-header{ padding:24px 32px 0; }
  .shop-header .logo{ width:auto; font-size:26px; }
  .shop-header .logo span{ font-size:16px; }
  .shop-crumb{ margin-left:36px; }
  .shop-catalog{ padding:52px 32px 0; }
  .shop-catalog-title{ font-size:44px; }
  .shop-card-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .shop-product{ gap:44px; padding:48px 32px 0; }
  .shop-gallery-wrap{ width:min(38vw,390px); }
  .shop-cover{ width:100%; }
  .shop-title{ font-size:36px; }
  .shop-price{ font-size:42px; }
  .shop-description,.shop-others,.shop-testimonials{ padding-left:32px; padding-right:32px; }
  .shop-contact-section{ padding:64px 32px 80px; }
  .shop-testi-track{ width:min(74vw,820px); }
  .shop-custom-cta{ padding:64px 32px; }
  .shop-custom-cta .cta-title{ font-size:36px; }
}

@media (max-width:1023px){
  .shop-header{ padding:20px 24px 0; }
  .shop-header .logo{ font-size:22px; }
  .shop-header .logo span{ font-size:12px; letter-spacing:.3em; }
  .shop-crumb{ margin-left:24px; min-width:0; }
  .shop-crumb .current{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .shop-catalog{ padding:48px 24px 0; }
  .shop-catalog-title{ font-size:40px; }
  .shop-filter-btn{ min-height:44px; }
  .shop-card-grid{ gap:16px; }
  .shop-mini-cover{ opacity:1; }
  .shop-mini:hover .shop-mini-cover{ transform:none; box-shadow:none; }
  .shop-product{ display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr); gap:32px; padding:40px 24px 0; }
  .shop-gallery-wrap{ width:100%; gap:14px; }
  .shop-cover{ width:100%; padding:24px; }
  .shop-info{ padding-top:0; min-width:0; }
  .shop-cat-eyebrow{ margin-top:16px; }
  .shop-title{ font-size:clamp(28px,3.6vw,36px); }
  .shop-desc{ font-size:16px; line-height:24px; }
  .shop-price-row{ margin-top:28px; flex-wrap:wrap; }
  .shop-price{ font-size:38px; }
  .shop-included--inline{ margin-top:26px; }
  .shop-included-list{ column-gap:20px; }
  .shop-included-list li{ padding-right:20px; }
  .shop-included-list li:not(:last-child)::after{ right:7px; }
  .shop-buy-row{ margin-top:28px; flex-wrap:wrap; }
  .shop-buy-row .btn-solid,.shop-buy-row .btn-outline{ min-height:48px; }
  .shop-description{ padding:56px 24px 0; }
  .shop-how{ padding:30px 28px; }
  .shop-how-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .shop-others{ padding:56px 24px 0; }
  .shop-others-title{ font-size:28px; }
  .shop-type-block{ margin-top:40px; }
  .shop-custom-cta{ padding:56px 24px; }
  .shop-custom-cta .cta-title{ font-size:32px; }
  .shop-custom-cta .cta-desc{ max-width:680px; }
  .shop-testimonials{ padding:56px 24px 0; overflow:hidden; }
  .shop-testi-carousel{ margin-top:36px; gap:10px; }
  .shop-testi-track{ width:min(72vw,680px); }
  .shop-testi-card{ width:420px; }
  .shop-contact-section{ padding:56px 24px 72px; }
  .shop-contact-cta{ align-items:flex-start; flex-direction:column; padding:28px; }
  .shop-contact-icons{ width:100%; }
  .page-shop .site-footer{ padding-left:24px; padding-right:24px; }
}

@media (max-width:760px){
  .shop-header{ flex-wrap:wrap; gap:12px 20px; }
  .shop-header .header-icons{ display:none; }
  .shop-articles-link{ margin-left:auto; padding:7px 13px; }
  .shop-crumb{ order:3; width:100%; margin-left:0; }
  .shop-product{ display:flex; flex-direction:column; gap:28px; }
  .shop-gallery-wrap{ width:min(100%,440px); align-self:center; }
  .shop-info{ width:100%; }
}

@media (max-width:640px){
  .shop-header{ padding:16px 20px 0; }
  .shop-crumb{ gap:7px; overflow:hidden; }
  .shop-crumb a,.shop-crumb .current{ font-size:13px; }
  .shop-catalog{ padding:36px 20px 0; }
  .shop-catalog-title{ margin-top:10px; font-size:30px; line-height:1.12; }
  .shop-catalog-sub{ margin-top:14px; font-size:16px; line-height:24px; }
  .shop-filter{ margin:28px -20px 0; padding:0 20px 8px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .shop-filter::-webkit-scrollbar{ display:none; }
  .shop-filter-btn{ flex:0 0 auto; padding:9px 16px; font-size:14px; }
  .shop-type-block{ margin-top:32px; }
  .shop-type-block--plain + .shop-type-block--plain{ padding-top:28px; }
  .shop-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .shop-mini-cover{ padding:12px; border-radius:16px; }
  .shop-mini-glyph{ right:-8px; bottom:-18px; font-size:62px; }
  .shop-mini-type{ font-size:9px; }
  .shop-mini-label{ font-size:13px; line-height:1.25; }
  .shop-mini-price-row{ font-size:11px; line-height:1.25; }
  .shop-product{ padding:28px 20px 0; }
  .shop-gallery-wrap{ gap:12px; }
  .shop-cover{ padding:20px; border-radius:20px; }
  .shop-thumbs{ gap:8px; }
  .shop-thumb{ border-radius:10px; min-height:72px; }
  .shop-gallery-toast{ max-width:calc(100% - 20px); white-space:normal; text-align:center; }
  .shop-count-badge{ font-size:12px; padding:6px 12px; }
  .shop-cat-eyebrow{ margin-top:14px; font-size:13px; }
  .shop-title{ margin-top:10px; font-size:27px; line-height:1.14; }
  .shop-desc{ margin-top:16px; font-size:16px; line-height:24px; }
  .shop-price-row{ margin-top:24px; align-items:center; }
  .shop-price{ font-size:34px; }
  .shop-price-note{ font-size:13px; }
  .shop-included--inline{ margin-top:24px; }
  .shop-included h3,.shop-how h3{ font-size:18px; line-height:1.3; }
  .shop-section-qty{ display:inline-block; margin-left:6px; padding-left:8px; font-size:12px; }
  .shop-included-list{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
  .shop-included-list li{ padding:0 0 0 20px; font-size:15px; }
  .shop-included-list li::before{ content:'✓'; position:absolute; left:0; color:var(--orange); font-weight:700; }
  .shop-included-list li:not(:last-child)::after{ display:none; }
  .shop-buy-row{ flex-direction:column; gap:10px; }
  .shop-buy-row .btn-solid,.shop-buy-row .btn-outline{ width:100%; min-height:50px; }
  .shop-buy-hint{ font-size:13px; line-height:1.5; }
  .shop-description{ padding:44px 20px 0; }
  .shop-how{ margin-top:0; padding:24px 20px; border-radius:20px; }
  .shop-how-steps{ margin-top:20px; grid-template-columns:1fr; gap:18px; }
  .shop-how-step{ padding-left:14px; }
  .shop-how-step p{ font-size:15px; }
  .shop-others{ padding:48px 20px 0; }
  .shop-others-title{ font-size:25px; }
  .shop-custom-cta{ padding:48px 20px; }
  .shop-custom-cta .cta-title{ font-size:27px; line-height:1.18; }
  .shop-custom-cta .cta-desc{ font-size:16px; line-height:24px; }
  .shop-custom-cta .cta-features{ margin-top:28px; margin-bottom:28px; gap:12px; }
  .shop-custom-cta .cta-features li{ font-size:15px; line-height:1.4; }
  .shop-custom-cta .cta-buttons{ flex-direction:column; width:100%; gap:10px; }
  .shop-custom-cta .cta-buttons .btn-dark,.shop-custom-cta .cta-buttons .btn-solid{ width:100%; min-height:50px; white-space:normal; text-align:center; }
  .shop-testimonials{ padding:48px 20px 0; }
  .shop-testi-title{ font-size:25px; }
  .shop-testi-carousel,
  .shop-testi-dots{ display:none; }
  .shop-testi-mobile{ display:block; margin-top:28px; }
  .shop-testi-mobile-track{
    box-sizing:border-box;
    width:calc(100% + 40px);
    margin-left:-20px;
    padding:4px 48px 10px;
    display:flex;
    flex-wrap:nowrap;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:48px;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .shop-testi-mobile-track::-webkit-scrollbar{ display:none; }
  .shop-testi-mobile-track .shop-testi-card{
    position:static;
    left:auto;
    top:auto;
    display:flex;
    flex:0 0 100%;
    width:100%;
    height:auto;
    min-height:280px;
    padding:24px 20px;
    opacity:1;
    transform:none;
    pointer-events:auto;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    box-shadow:0 14px 32px rgba(23,20,15,.12);
  }
  .shop-testi-name{ margin-top:0; font-size:14px; }
  .shop-testi-role{ margin-top:4px; font-size:12px; line-height:1.35; }
  .shop-testi-text{ margin-top:16px; font-size:13px; line-height:19px; }
  .shop-testi-counter{
    margin-top:16px;
    text-align:center;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:.06em;
    color:var(--muted);
  }
  .shop-contact-section{ padding:48px 20px 60px; }
  .shop-contact-cta{ padding:24px 20px; border-radius:20px; gap:24px; }
  .shop-contact-title{ font-size:24px; }
  .shop-contact-desc{ font-size:15px; line-height:22px; }
  .shop-contact-icons{ flex-direction:column; align-items:stretch; gap:22px; }
  .shop-contact-primary{ width:100%; min-height:50px; }
  .shop-contact-secondary{ flex-direction:column; align-items:flex-start; gap:16px; }
  .buy-modal{ padding:0; align-items:flex-end; }
  .buy-panel{ width:100%; max-height:92vh; overflow-y:auto; border-radius:24px 24px 0 0; padding:28px 20px calc(24px + env(safe-area-inset-bottom)); }
  .buy-close{ top:14px; right:14px; width:44px; height:44px; }
  .buy-title{ padding-right:44px; font-size:21px; line-height:1.25; }
  .buy-price{ font-size:30px; }
  .buy-submit{ min-height:50px; }
  .page-shop .site-footer{ padding:36px 20px 28px; }
  .page-shop .footer-top{ align-items:flex-start; }
  .page-shop .footer-legal{ justify-content:flex-start; }
}

@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .process-col,
  .process-col.is-visible{
    opacity:1;
    transform:none;
    transition:none;
  }
  .process-icon,
  .process-col.is-visible .process-icon{
    opacity:1;
    transform:none;
    transition:none;
  }
}

@media (max-width:340px){
  .shop-card-grid{ grid-template-columns:1fr; }
  .shop-mini-cover{ max-height:420px; }
}

/* ===== checkout: согласие и защищённая выдача ===== */
.buy-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:20px;
  color:#696B6C;
  cursor:pointer;
}
.buy-consent input{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:0;
  accent-color:var(--orange);
}
.buy-consent.has-error{ color:#C63B32; }
.buy-consent a{ color:inherit; text-underline-offset:2px; }
.buy-consent-error{
  display:none;
  margin-top:-8px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:18px;
  color:#C63B32;
}
.buy-consent-error.is-visible{ display:block; }
.buy-submit:disabled{ opacity:.58; cursor:wait; }

.payment-page{
  min-height:100vh;
  box-sizing:border-box;
  background:var(--cream);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:100px 24px 64px;
}
.payment-page-logo{
  position:absolute;
  top:28px;
  left:max(24px, calc((100% - 1200px) / 2));
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:24px;
  line-height:1;
  color:var(--ink);
  text-decoration:none;
}
.payment-page-logo span{
  display:block;
  margin-top:8px;
  font-size:14px;
  letter-spacing:.38em;
}
.payment-card{
  width:100%;
  max-width:560px;
  box-sizing:border-box;
  padding:48px;
  border-radius:28px;
  background:#fff;
  text-align:center;
}
.payment-state-icon{
  width:64px;
  height:64px;
  margin:0 auto 24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--orange);
  color:#fff;
}
.payment-state-icon svg{ width:28px; height:28px; }
.payment-state-icon--pending{ background:var(--ink); }
.payment-state-icon--fail{ background:#C63B32; }
.payment-state-spinner{
  width:28px;
  height:28px;
  box-sizing:border-box;
  border:4px solid rgba(255,255,255,.36);
  border-top-color:#fff;
  border-radius:50%;
  animation:buy-spin .8s linear infinite;
}
.payment-title{
  font-family:'Unbounded', sans-serif;
  font-weight:600;
  font-size:30px;
  line-height:1.24;
  color:var(--ink);
}
.payment-description{
  margin:16px auto 0;
  max-width:440px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:24px;
  color:#696B6C;
}
.payment-order{
  margin-top:18px;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:14px;
  line-height:20px;
  color:var(--ink);
}
.payment-actions{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.payment-actions .btn-solid,.payment-actions .btn-outline{
  width:100%;
  min-height:50px;
  box-sizing:border-box;
}
.payment-note{
  margin-top:20px;
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:18px;
  color:var(--muted);
}
.payment-hidden{ display:none !important; }

@media (max-width:640px){
  .payment-page{ justify-content:flex-start; padding:112px 20px 40px; }
  .payment-page-logo{ left:20px; font-size:20px; }
  .payment-page-logo span{ font-size:12px; }
  .payment-card{ padding:32px 20px; border-radius:24px; }
  .payment-state-icon{ width:56px; height:56px; margin-bottom:20px; }
  .payment-title{ font-size:24px; }
  .payment-description{ font-size:16px; line-height:24px; }
}

@keyframes trustMobileStatCycle{
  0%,21%{ opacity:1; transform:translateY(0); }
  24%,96%{ opacity:0; transform:translateY(-10px); }
  97%{ opacity:0; transform:translateY(10px); }
  100%{ opacity:1; transform:translateY(0); }
}

@keyframes heroMobileStatCycle{
  0%,11%{ opacity:1; transform:translateY(0); }
  14%,96%{ opacity:0; transform:translateY(-10px); }
  97%{ opacity:0; transform:translateY(10px); }
  100%{ opacity:1; transform:translateY(0); }
}

@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .trust-stats.is-visible .trust-stat{ animation:none; opacity:0; transform:none; }
  .trust-stats.is-visible .trust-stat:first-child{ opacity:1; }
  .stat-panel .stat,
  .stat-panel .stat-plain{ animation:none; opacity:0; transform:none; }
  .stat-panel .stat:first-child{ opacity:1; }
}

/* Та же последовательная подача показателей на планшете и компьютере. */
@media (min-width:641px){
  .stat-mobile-extra{ display:flex; }
  .stat-panel{
    width:190px;
    height:132px;
    padding:0;
    gap:0;
    overflow:hidden;
  }
  .stat-panel .stat,
  .stat-panel .stat-plain{
    position:absolute;
    inset:0;
    display:flex;
    box-sizing:border-box;
    padding:0 16px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    opacity:0;
    transform:translateY(10px);
    animation:heroMobileStatCycle 21s infinite;
  }
  .stat-panel .stat:nth-child(2){ animation-delay:3s; }
  .stat-panel .stat-plain:nth-child(3){ animation-delay:6s; }
  .stat-panel .stat-plain:nth-child(4){ animation-delay:9s; }
  .stat-panel .stat-plain:nth-child(5){ animation-delay:12s; }
  .stat-panel .stat-plain:nth-child(6){ animation-delay:15s; }
  .stat-panel .stat-plain:nth-child(7){ animation-delay:18s; }
  .stat-panel .stat strong{ font-size:42px; }
  .stat-panel .stat span{ margin-top:-5px; font-size:16px; }
  .stat-panel .stat-plain{ font-size:20px; font-weight:600; }
  .stat-panel .stat::after,
  .stat-panel .stat-plain::after{
    position:absolute;
    top:13px;
    right:16px;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:10px;
    letter-spacing:.06em;
    color:rgba(255,255,255,.7);
  }
  .stat-panel > :nth-child(1)::after{ content:'01 / 07'; }
  .stat-panel > :nth-child(2)::after{ content:'02 / 07'; }
  .stat-panel > :nth-child(3)::after{ content:'03 / 07'; }
  .stat-panel > :nth-child(4)::after{ content:'04 / 07'; }
  .stat-panel > :nth-child(5)::after{ content:'05 / 07'; }
  .stat-panel > :nth-child(6)::after{ content:'06 / 07'; }
  .stat-panel > :nth-child(7)::after{ content:'07 / 07'; }

  .trust-stats{
    width:100%;
    height:132px;
    margin-left:0;
    zoom:1;
    padding:0;
    position:relative;
    overflow:hidden;
  }
  .trust-stat,
  .trust-stat:last-child{
    position:absolute;
    inset:0;
    padding:0;
    align-items:center;
    justify-content:center;
    gap:6px;
    opacity:0;
    transform:translateY(10px);
  }
  .trust-stat + .trust-stat{ padding-left:0; }
  .trust-stat + .trust-stat::before{ display:none; }
  .trust-stat strong{ font-size:48px; }
  .trust-stat span{ font-size:16px; }
  .trust-stat::after{
    position:absolute;
    top:16px;
    right:20px;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:12px;
    letter-spacing:.06em;
    color:rgba(255,255,255,.7);
  }
  .trust-stat:nth-child(1)::after{ content:'01 / 04'; }
  .trust-stat:nth-child(2)::after{ content:'02 / 04'; }
  .trust-stat:nth-child(3)::after{ content:'03 / 04'; }
  .trust-stat:nth-child(4)::after{ content:'04 / 04'; }
  .trust-stats.is-visible .trust-stat{ animation:trustMobileStatCycle 12s infinite; }
  .trust-stats.is-visible .trust-stat:nth-child(2){ animation-delay:3s; }
  .trust-stats.is-visible .trust-stat:nth-child(3){ animation-delay:6s; }
  .trust-stats.is-visible .trust-stat:nth-child(4){ animation-delay:9s; }
}

@media (min-width:641px) and (prefers-reduced-motion:reduce){
  .trust-stats.is-visible .trust-stat{ animation:none; opacity:0; transform:none; }
  .trust-stats.is-visible .trust-stat:first-child{ opacity:1; }
  .stat-panel .stat,
  .stat-panel .stat-plain{ animation:none; opacity:0; transform:none; }
  .stat-panel .stat:first-child{ opacity:1; }
}

/* Tablet: enlarge and reposition the hero photo without affecting mobile/desktop. */
@media (min-width:641px) and (max-width:1180px){
  .trust-block{
    padding-bottom:36px;
  }
  .hero-right{
    height:auto;
    aspect-ratio:16 / 9;
  }
  .hero-photo{
    width:100%;
    height:100%;
    padding:0;
    object-fit:cover;
    object-position:center;
    transform:none;
  }

  .approach-cards{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }
  .approach-card{
    width:100%;
    height:112px;
    min-height:112px;
    padding:16px 20px;
    display:grid;
    grid-template-columns:86px minmax(0, 1fr);
    align-items:center;
    column-gap:14px;
  }
  .approach-num{
    font-size:46px;
  }
  .approach-q{
    margin-top:0;
    min-height:0;
    font-size:16px;
    line-height:1.22;
  }
  .approach-card:nth-child(4) .approach-q br:first-of-type{
    display:none;
  }

  .trust-badge{
    width:100%;
    align-self:flex-start;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
  }
  .trust-badge-logo,
  .trust-badge-logo span,
  .trust-badge-role{
    text-align:left;
  }
  .trust-signature{
    width:180px;
    align-self:flex-start;
    margin:calc(132.65% - 224px) 0 0 0;
  }

  /* Crop the transparent top/bottom of the CTA artwork so the visible
     illustration has the same compact 10px breathing room on both sides. */
  .cta-right{
    height:auto;
    aspect-ratio:751 / 464;
    margin-top:10px;
    overflow:hidden;
  }
  .cta-figma-combo-img{
    position:absolute;
    left:0;
    top:-27px;
    width:100%;
    height:auto;
  }
  .cta-features{
    margin-top:10px;
    margin-bottom:10px;
  }
  .cta-buttons{
    margin-top:17px;
  }
}

@media (max-width:640px){
  /* Mobile CTA: keep the visible illustration close to both neighbours.
     The crop removes the matching transparent bands inside the PNG without
     reducing the artwork itself. */
  .cta-right{
    height:auto;
    aspect-ratio:751 / 509;
    margin-top:10px;
    overflow:hidden;
  }
  .cta-figma-combo-img{
    position:absolute;
    left:0;
    top:-5.3%;
    width:100%;
    height:auto;
  }
  .cta-features{
    margin-top:10px;
    margin-bottom:20px;
  }
  .cta-buttons{
    margin-top:16px;
  }
}

/* Desktop: one vertical rhythm for the main informational sections.
   Adjacent sections contribute 48px each, producing a consistent 96px gap. */
@media (min-width:1181px){
  .page-home .cta-features{
    margin-bottom:20px;
  }
  .page-home .cta-buttons{
    margin-top:34px;
  }
  .cta-right{
    margin-top:-90px;
  }
  /* Reserve the same three-line description area in every tariff card.
     This aligns both the prices and the feature lists across the row. */
  .price-desc{
    min-height:84px;
  }
  .gallery{
    padding-top:48px;
    padding-bottom:48px;
  }
  .approach{
    padding-top:48px;
    padding-bottom:48px;
  }
  .process,
  .case-section,
  .pricing,
  .cta-builder,
  .testimonials,
  .services,
  .faq,
  .contact-section{
    padding-top:48px;
    padding-bottom:48px;
  }
}

/* Между компактным состоянием и исходным макетом плавно масштабируем
   проверенную композицию 1440px. CSS zoom участвует в раскладке, поэтому
   страница занимает ровно ширину окна и не получает горизонтальный скролл. */
@media (min-width:1181px) and (max-width:1439px){
  .page-home{
    width:1440px;
    max-width:none;
    zoom:calc(100vw / 1440px);
  }
}

/* Shop reviews: the touch-first slider is also used on tablets. */
@media (min-width:641px) and (max-width:1180px){
  .shop-testi-carousel,
  .shop-testi-dots{ display:none; }
  .shop-testi-mobile{ display:block; margin-top:36px; }
  .shop-testi-mobile-track{
    box-sizing:border-box;
    width:calc(100% + 48px);
    margin-left:-24px;
    padding:4px calc((100vw - min(72vw,520px))/2) 12px;
    display:flex;
    flex-wrap:nowrap;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .shop-testi-mobile-track::-webkit-scrollbar{ display:none; }
  .shop-testi-mobile-track .shop-testi-card{
    position:static;
    left:auto;
    top:auto;
    display:flex;
    flex:0 0 min(72vw,520px);
    width:min(72vw,520px);
    height:auto;
    min-height:300px;
    padding:30px;
    opacity:1;
    transform:none;
    pointer-events:auto;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    box-shadow:0 14px 32px rgba(23,20,15,.12);
  }
  .shop-testi-mobile-track .shop-testi-name{ margin-top:0; font-size:18px; }
  .shop-testi-mobile-track .shop-testi-role{ margin-top:5px; font-size:14px; line-height:1.4; }
  .shop-testi-mobile-track .shop-testi-text{ margin-top:18px; font-size:15px; line-height:22px; }
  .shop-testi-counter{
    margin-top:18px;
    text-align:center;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    font-size:14px;
    letter-spacing:.06em;
    color:var(--muted);
  }
}