/* ============================================================
   веб · бюро — ТЕСТОВЫЙ мини-сайт веб-студии.
   Фирстиль «Тёплый Сигнал»: крем + эспрессо + терракота.
   Шрифты Jura / IBM Plex Sans / IBM Plex Mono (самохостинг).
   ЛОКАЛЬНО, без CDN и внешних запросов.
   ============================================================ */

:root{
  /* палитра бренда */
  --cream:#f3ecde; --cream2:#ece2d0; --panel:#faf5ea; --panel2:#f6efe2;
  --ink:#221e18; --ink2:#4c463b; --muted:#6b6354;
  --dark:#18140f; --dark2:#231d16; --darktx:#e9e0cf; --darkmut:#a49a88;
  --accent:#d9642a; --accent2:#e58a3f;
  --accent-deep:#b8511c; /* тёмный акцент для мелкого текста — контраст AA на креме */
  --line:#d9cfbc; --lined:#3a3226;

  /* шрифты */
  --display:"Golos Text", system-ui, sans-serif;   /* заголовки — Golos Text */
  --logo-face:"Jura", system-ui, sans-serif;       /* логотип остаётся на Jura */
  --sans:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  --wrap:1160px;
  --pad:clamp(18px, 4vw, 40px);
}

/* ---------- reset / base ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; scroll-padding-top:100px; }
body{
  font-family:var(--sans); color:var(--ink); background:var(--cream);
  font-size:16px; line-height:1.6; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(56px, 8vw, 104px); position:relative; }

/* моно-лейбл (инженерный синтаксис "// ...") */
.kick{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-weight:500; display:inline-flex; align-items:center; gap:.55em;
}
.kick::before{ content:"//"; color:var(--accent); letter-spacing:0; }
.kick.on-dark{ color:var(--darkmut); }

/* заголовок секции */
.h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.9rem, 3.6vw, 2.95rem); line-height:1.06; letter-spacing:-.3px;
  margin-top:.5rem;
}
.lead{ font-size:clamp(1.02rem, 1.5vw, 1.18rem); color:var(--ink2); max-width:62ch; line-height:1.55; }
.on-dark .lead, .lead.on-dark{ color:var(--darkmut); }

/* ---------- blueprint-сетка ---------- */
.grid-bg{ position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px; opacity:.35;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
}
.grid-bg.d{ background-image:
    linear-gradient(var(--lined) 1px, transparent 1px),
    linear-gradient(90deg, var(--lined) 1px, transparent 1px); opacity:.5; }

/* ============================================================
   ЛОГОТИП «веб · бюро» (типографский, без картинок)
   ============================================================ */
.logo{ display:inline-flex; align-items:baseline; gap:.32em;
  font-size:1.28rem; letter-spacing:.2px; color:var(--ink); white-space:nowrap; }
.logo__a{ font-family:var(--logo-face); font-weight:500; }
.logo__dot{ display:none; }            /* точку-разделитель убрали */
.logo__b{ font-family:var(--logo-face); font-weight:700; }
.nav .logo{ font-size:2.3rem; justify-self:start; }
@media (max-width:720px){ .nav .logo{ font-size:1.9rem; } }

/* ============================================================
   NAV (одинаковая на всех страницах)
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(243,236,222,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:24px; height:68px; }
.nav__links{ display:flex; gap:32px; justify-self:center; font-size:1rem; color:var(--ink2); align-items:baseline; }
.nav__links a{ position:relative; padding-block:4px; white-space:nowrap; }
.nav__links a.is-active{ color:var(--ink); font-weight:600; }
.nav__links a.is-active::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--accent); }
.nav__cta{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.02em; font-weight:500;
  background:var(--accent); color:#fff; padding:10px 18px; border-radius:9px;
  border:1px solid var(--accent); white-space:nowrap; align-self:center;
}
.nav__cta.is-active::after{ display:none; }
.nav__burger{ display:none; justify-self:end; align-self:center; background:none; border:1px solid var(--line);
  border-radius:8px; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; }
.nav__burger span{ width:18px; height:2px; background:var(--ink); position:relative; display:block; }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); }
.nav__burger span::before{ top:-6px; } .nav__burger span::after{ top:6px; }

@media (hover:hover){
  .nav__links a:not(.nav__cta):not(.is-active)::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
    background:var(--accent); transition:width .22s ease; }
  .nav__links a:not(.nav__cta):not(.is-active):hover::after{ width:100%; }
  .nav__cta{ transition:transform .18s ease, box-shadow .18s ease; }
  .nav__cta:hover{ transform:translateY(-1px); box-shadow:0 6px 18px -6px rgba(217,100,42,.5); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding-top:clamp(44px,7vw,80px); padding-bottom:0; }
.hero__in{ position:relative; z-index:2; margin-bottom:clamp(32px,5vw,56px); }
.hero h1{
  font-family:var(--display); font-weight:600; letter-spacing:-.8px;
  font-size:clamp(2.2rem, 4.4vw, 3.9rem); line-height:1.05; margin:16px 0 20px; max-width:17ch;
}
.hero h1 em{ font-style:normal; color:var(--accent); font-weight:700; }
.hero .lead{ font-size:clamp(1.06rem,1.7vw,1.26rem); max-width:56ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }

.btn{ font-family:var(--mono); font-size:.9rem; letter-spacing:.01em; font-weight:500;
  padding:15px 26px; border-radius:11px; border:1px solid var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; gap:.6em; text-align:center; justify-content:center; }
.btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn__ar{ transition:transform .2s ease; }
@media (hover:hover){
  .btn{ transition:transform .18s ease, box-shadow .2s ease, background .2s ease; }
  .btn--primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(217,100,42,.6); }
  .btn--ghost:hover{ background:var(--ink); color:var(--cream); }
  .btn:hover .btn__ar{ transform:translateX(4px); }
}

.hero__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:32px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; color:var(--muted); }
.hero__meta span{ display:inline-flex; align-items:center; gap:.5em; flex:none; white-space:nowrap; }
.hero__meta span::before{ content:""; width:6px; height:6px; background:var(--accent); border-radius:50%; }

/* сигнатура: осциллограф-сигнал */
.scope{ position:relative; margin-top:clamp(30px,5vw,54px); border-top:1px solid var(--line); }
.scope__wrap{ position:relative; width:100%; background:var(--dark); }
.scope svg{ width:100%; height:clamp(120px,16vw,190px); display:block; overflow:visible; }
.scope__labels{ position:absolute; inset:0; display:flex; justify-content:space-between;
  padding:12px var(--pad); pointer-events:none; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--darkmut); }
.scope__labels .r{ color:var(--accent2); }
.sig-line{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(217,100,42,.55)); }
.sig-dash{ fill:none; stroke:var(--accent2); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:14 420; stroke-dashoffset:0; opacity:.9; }
.sig-dot{ fill:#fff; filter:drop-shadow(0 0 7px rgba(229,138,63,.95)); }
@keyframes sigflow{ to{ stroke-dashoffset:-868; } }
.sig-dash{ animation:sigflow 3.4s linear infinite; }

/* внутренний хедер страницы (не главная) */
.phead{ background:var(--cream); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.phead__in{ position:relative; z-index:2; padding-block:clamp(40px,6vw,72px); }
.phead h1{ font-family:var(--display); font-weight:600; letter-spacing:-.6px;
  font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.05; margin:14px 0 16px; max-width:20ch; }
.phead h1 em{ font-style:normal; color:var(--accent); font-weight:700; }
.phead .lead{ max-width:60ch; }
.phead__cta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:14px; }

/* сигнал-декор в hero «Как работаем»: шаги подсвечиваются по очереди, как бегущий импульс */
.phead-signal{ position:absolute; right:clamp(24px,6vw,90px); top:50%; transform:translateY(-50%); z-index:1; pointer-events:none; }
.ps-line{ stroke:var(--line); stroke-width:2; }
.ps-dot{ fill:var(--panel); stroke:var(--accent); stroke-width:2; animation:ps-pulse 3.2s ease-in-out infinite; }
.ps-dot--1{ animation-delay:0s; }
.ps-dot--2{ animation-delay:.8s; }
.ps-dot--3{ animation-delay:1.6s; }
.ps-dot--4{ animation-delay:2.4s; }
.ps-icon{ color:var(--ink); }
@keyframes ps-pulse{
  0%,92%,100%{ fill:var(--panel); r:20px; filter:none; }
  8%{ fill:var(--accent); r:23px; filter:drop-shadow(0 0 8px rgba(217,100,42,.6)); }
}
@media (max-width:960px){ .phead-signal{ display:none; } }

/* ============================================================
   ЛЕНТА-СТАТИСТИКА (тёмная, ритм)
   ============================================================ */
.strip{ background:var(--dark); color:var(--darktx); }
.strip__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--lined);
  border:1px solid var(--lined); border-radius:14px; overflow:hidden; }
.strip__c{ background:var(--dark); padding:22px 24px; }
.strip__n{ font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,2.5vw,2.05rem); color:#fff; }
.strip__n b{ color:var(--accent2); font-weight:700; }
.strip__l{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--darkmut); margin-top:6px; line-height:1.4; }

/* заголовок-хедер секции */
.shead{ max-width:64ch; margin-bottom:clamp(30px,4vw,48px); }
.shead .h2{ margin-top:12px; }
.shead .lead{ margin-top:16px; }
.shead--center{ text-align:center; margin-inline:auto; }
.shead--center .kick{ justify-content:center; }
.shead--center .lead{ margin-inline:auto; }

/* ============================================================
   ПОЗИЦИОНИРОВАНИЕ (конструктор / агентство / мы)
   ============================================================ */
.pos{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pos__c{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 24px; position:relative; }
.pos__c.is-us{ background:var(--dark); border-color:var(--dark); color:var(--darktx); }
.pos__tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pos__c.is-us .pos__tag{ color:var(--accent2); }
.pos__t{ font-family:var(--display); font-weight:500; font-size:1.4rem; margin:10px 0 12px; }
.pos__c.is-us .pos__t{ color:#fff; }
.pos__d{ font-size:.98rem; color:var(--ink2); line-height:1.5; }
.pos__c.is-us .pos__d{ color:var(--darkmut); }
.pos__d b{ color:var(--ink); font-weight:600; }
.pos__c.is-us .pos__d b{ color:#fff; }

/* ============================================================
   ФОРМАТЫ / КАРТОЧКИ УСЛУГ
   ============================================================ */
.fmts{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fmt{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:26px 24px 24px;
  display:flex; flex-direction:column; position:relative; }
.fmt.is-feat{ background:var(--dark); border-color:var(--dark); color:var(--darktx); }
.fmt__bar{ width:34px; height:4px; background:var(--accent); border-radius:3px; margin-bottom:16px; }
.fmt__name{ font-family:var(--display); font-weight:600; font-size:1.5rem; }
.fmt.is-feat .fmt__name{ color:#fff; }
.fmt__sub{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.fmt.is-feat .fmt__sub{ color:var(--darkmut); }
.fmt__desc{ font-size:.98rem; color:var(--ink2); line-height:1.5; margin:14px 0 4px; }
.fmt.is-feat .fmt__desc{ color:var(--darktx); }
.fmt__who{ font-size:.92rem; color:var(--muted); line-height:1.45; margin-bottom:8px; }
.fmt.is-feat .fmt__who{ color:var(--darkmut); }
.fmt__who b{ color:var(--ink2); font-weight:600; }
.fmt.is-feat .fmt__who b{ color:var(--darktx); }
.fmt__price{ font-family:var(--display); font-weight:700; font-size:1.9rem; color:var(--accent); margin:14px 0 2px; }
.fmt.is-feat .fmt__price{ color:var(--accent2); }
.fmt__term{ font-family:var(--mono); font-size:.78rem; color:var(--muted); }
.fmt.is-feat .fmt__term{ color:var(--darkmut); }
.fmt__list{ list-style:none; margin:18px 0 22px; display:flex; flex-direction:column; gap:10px; }
.fmt__list li{ font-size:.95rem; color:var(--ink2); display:flex; gap:10px; line-height:1.4; }
.fmt.is-feat .fmt__list li{ color:var(--darktx); }
.fmt__list li::before{ content:""; width:7px; height:7px; margin-top:7px; flex:none; border-radius:2px;
  background:var(--accent); transform:rotate(45deg); }
.fmt__go{ margin-top:auto; font-family:var(--mono); font-size:.86rem; font-weight:500; padding:13px 18px;
  border-radius:10px; text-align:center; border:1px solid var(--ink); background:transparent; color:var(--ink); }
.fmt.is-feat .fmt__go{ background:var(--accent); border-color:var(--accent); color:#fff; }
@media (hover:hover){
  .fmt{ transition:transform .2s ease, box-shadow .25s ease; }
  .fmt:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -22px rgba(34,30,24,.45); }
  .fmt__go{ transition:background .18s ease, color .18s ease; }
  .fmt:not(.is-feat) .fmt__go:hover{ background:var(--ink); color:var(--cream); }
}
.fmts__note{ margin-top:20px; font-family:var(--mono); font-size:.8rem; color:var(--muted); letter-spacing:.02em; }

/* плитка форматов (главная — «что мы делаем»): три ячейки в ряд, популярный формат — тёмный акцент */
.tiles{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.tile{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 18px;
  display:flex; flex-direction:column; gap:6px; grid-column:span 2; }
.tile__n{ font-family:var(--mono); font-size:.72rem; color:var(--accent-deep); font-weight:600; letter-spacing:.06em; }
.tile__t{ font-family:var(--display); font-weight:600; font-size:1.12rem; }
.tile__d{ font-size:.86rem; color:var(--ink2); line-height:1.4; }
.tile__p{ font-family:var(--mono); font-size:.78rem; color:var(--muted); margin-top:auto; padding-top:6px; }
/* выделенная ячейка — тёмная (разбивает светлую середину страницы) */
.tile.is-feat{ grid-column:span 2; grid-row:span 1; background:var(--dark); border-color:var(--dark);
  padding:26px 24px; }
.tile.is-feat .tile__n{ color:var(--accent2); }
.tile.is-feat .tile__t{ color:#fff; font-size:1.5rem; }
.tile.is-feat .tile__d{ color:var(--darkmut); font-size:.95rem; max-width:44ch; }
.tile.is-feat .tile__p{ color:var(--accent2); font-size:.85rem; }
@media (hover:hover){
  .tile{ transition:border-color .2s ease, transform .18s ease; }
  .tile:hover{ border-color:var(--accent); transform:translateY(-3px); }
}

/* ============================================================
   ПОЧЕМУ МЫ — карточки-выгоды
   ============================================================ */
.why{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.wc{ display:flex; gap:18px; padding:24px; border:1px solid var(--line); border-radius:15px; background:var(--panel); }
.wc__n{ font-family:var(--mono); font-size:.8rem; color:var(--accent); font-weight:600; padding-top:4px; }
.wc__t{ font-family:var(--display); font-weight:600; font-size:1.22rem; margin-bottom:7px; }
.wc__d{ font-size:.97rem; color:var(--ink2); line-height:1.5; }
.wc__d b{ color:var(--ink); font-weight:600; }

/* ============================================================
   ПРИМЕРЫ (заглушки «скоро кейсы»)
   ============================================================ */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.case{ border:1px dashed var(--line); border-radius:16px; background:var(--panel); padding:26px 24px; min-height:190px;
  display:flex; flex-direction:column; }
.case__badge{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--line); border-radius:20px; padding:4px 11px; align-self:flex-start; background:var(--cream); }
.case__t{ font-family:var(--display); font-weight:600; font-size:1.18rem; margin:16px 0 8px; }
.case__d{ font-size:.93rem; color:var(--ink2); line-height:1.5; }
.case__soon{ margin-top:auto; font-family:var(--mono); font-size:.74rem; color:var(--muted); letter-spacing:.06em; padding-top:14px; }

/* ============================================================
   ПРОЦЕСС
   ============================================================ */
.proc__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.ps{ background:var(--panel); padding:26px 24px 28px; position:relative; }
.ps__n{ font-family:var(--mono); font-size:.82rem; color:var(--accent); font-weight:600; letter-spacing:.06em; }
.ps__t{ font-family:var(--display); font-weight:600; font-size:1.2rem; margin:12px 0 8px; }
.ps__d{ font-size:.93rem; color:var(--ink2); line-height:1.48; }

/* ============================================================
   БЕЗОПАСНОСТЬ (3 уровня)
   ============================================================ */
.sec3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.s3{ border:1px solid var(--line); border-radius:16px; padding:26px 24px; background:var(--panel); display:flex; flex-direction:column; }
.s3.is-mid{ background:var(--dark); border-color:var(--dark); color:var(--darktx); }
.s3__lvl{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.s3.is-mid .s3__lvl{ color:var(--accent2); }
.s3__t{ font-family:var(--display); font-weight:600; font-size:1.32rem; margin:8px 0 6px; }
.s3.is-mid .s3__t{ color:#fff; }
.s3__price{ font-family:var(--mono); font-weight:600; font-size:1.05rem; color:var(--accent); margin-bottom:14px; }
.s3.is-mid .s3__price{ color:var(--accent2); }
.s3__d{ font-size:.93rem; color:var(--ink2); line-height:1.5; }
.s3.is-mid .s3__d{ color:var(--darkmut); }
.s3__list{ list-style:none; margin:14px 0 4px; display:flex; flex-direction:column; gap:9px; }
.s3__list li{ font-size:.9rem; color:var(--ink2); display:flex; gap:9px; line-height:1.4; }
.s3.is-mid .s3__list li{ color:var(--darktx); }
.s3__list li::before{ content:""; width:6px; height:6px; margin-top:7px; flex:none; border-radius:2px;
  background:var(--accent); transform:rotate(45deg); }
.s3.is-mid .s3__list li::before{ background:var(--accent2); }
.s3__who{ margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.02em; }
.s3.is-mid .s3__who{ color:var(--darkmut); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width:820px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  font-family:var(--display); font-weight:500; font-size:clamp(1.08rem,1.8vw,1.28rem); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:2px; top:20px; font-family:var(--mono);
  font-size:1.5rem; color:var(--accent); transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq__a{ padding:0 40px 24px 0; color:var(--ink2); font-size:1rem; line-height:1.6; }
.faq__a b{ color:var(--ink); font-weight:600; }

/* ============================================================
   CTA-финал + форма
   ============================================================ */
.cta{ background:var(--dark); color:var(--darktx); position:relative; overflow:hidden; }
.cta__in{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
.cta h2{ font-family:var(--display); font-weight:600; color:#fff; font-size:clamp(2rem,3.6vw,3rem); line-height:1.06; letter-spacing:-.4px; }
.cta h2 em{ font-style:normal; color:var(--accent2); font-weight:700; }
.cta p{ color:var(--darkmut); margin-top:16px; font-size:1.05rem; line-height:1.55; max-width:46ch; }
.cta__meta{ margin-top:22px; font-family:var(--mono); font-size:.8rem; color:var(--darkmut); line-height:1.9; }
.cta__meta b{ color:var(--accent2); font-weight:500; }

.form{ background:var(--panel); border:1px solid var(--lined); border-radius:18px; padding:26px 26px 24px; }
.form__row{ margin-bottom:14px; }
.form label{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.form input,.form textarea,.form select{ width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.form textarea{ min-height:92px; resize:vertical; }
.form input:focus,.form textarea:focus,.form select:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.form__row--check{ margin-bottom:16px; }
.form__check{ display:flex !important; align-items:flex-start; gap:9px; font-family:var(--sans) !important;
  font-size:.85rem !important; text-transform:none !important; letter-spacing:0 !important; color:var(--ink2) !important;
  font-weight:400 !important; line-height:1.4; cursor:pointer; }
.form__check input{ width:auto; margin-top:3px; flex:none; accent-color:var(--accent); }
.form__check a{ color:var(--accent); text-decoration:underline; }
.form__btn{ width:100%; margin-top:6px; }
.form__ok{ display:none; font-family:var(--mono); font-size:.9rem; color:var(--accent); margin-top:12px; line-height:1.5; }
.form__ok b{ color:var(--ink); }
.form__hint{ font-size:.76rem; color:var(--muted); margin-top:12px; line-height:1.5; }
.form__hint a{ color:var(--accent); text-decoration:underline; }

/* контакты — карточки-мессенджеры + реквизиты */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.5vw,44px); align-items:start; }
.contact__aside{ display:flex; flex-direction:column; gap:16px; }
.chan{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.chan a{ border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:18px 16px; text-align:center;
  display:flex; flex-direction:column; gap:5px; }
.chan__l{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.chan__v{ font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--ink); word-break:break-word; }
@media (hover:hover){ .chan a{ transition:border-color .18s ease; } .chan a:hover{ border-color:var(--accent); } }
.reqs{ border:1px solid var(--line); border-radius:16px; background:var(--cream2); padding:22px 24px; }
.reqs h3{ font-family:var(--display); font-weight:600; font-size:1.15rem; margin-bottom:12px; }
.reqs__row{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-top:1px solid var(--line); font-size:.92rem; color:var(--ink2); }
.reqs__row:first-of-type{ border-top:none; }
.reqs__row b{ font-family:var(--mono); color:var(--ink); font-weight:500; text-align:right; }
.reqs__note{ margin-top:12px; font-size:.8rem; color:var(--muted); line-height:1.5; }

/* тёмный тизер (безопасность на главной) */
.teaser{ background:var(--dark); color:var(--darktx); position:relative; overflow:hidden; }
.teaser__in{ position:relative; z-index:2; display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(24px,4vw,48px); align-items:center; }
.teaser h2{ font-family:var(--display); font-weight:400; color:#fff; font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.08; }
.teaser h2 em{ font-style:normal; color:var(--accent2); font-weight:500; }
.teaser p{ color:var(--darkmut); margin-top:14px; font-size:1.02rem; line-height:1.55; }
.teaser__lvls{ display:flex; flex-direction:column; gap:10px; }
.teaser__lvl{ border:1px solid var(--lined); border-radius:12px; padding:14px 16px; display:flex; justify-content:space-between; gap:14px; align-items:center; }
.teaser__lvl b{ font-family:var(--display); font-weight:600; color:#fff; font-size:1rem; }
.teaser__lvl span{ font-family:var(--mono); font-size:.78rem; color:var(--accent2); white-space:nowrap; }
.teaser__cta{ margin-top:22px; }

/* информ-блок «почему код» (главная) */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); align-items:center; }
.split__pts{ display:flex; flex-direction:column; gap:14px; }
.spt{ display:flex; gap:14px; align-items:flex-start; }
.spt__i{ font-family:var(--mono); color:var(--accent); font-weight:600; flex:none; padding-top:2px; }
.spt__t{ font-family:var(--display); font-weight:600; font-size:1.08rem; margin-bottom:2px; }
.spt__d{ font-size:.94rem; color:var(--ink2); line-height:1.5; }

/* ============================================================
   FOOTER (тёмный)
   ============================================================ */
.foot{ background:var(--dark); color:var(--darktx); border-top:1px solid var(--lined); }
.foot .logo{ color:var(--darktx); margin-bottom:14px; }
.foot__in{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-block:52px; }
.foot p{ font-size:.9rem; color:var(--darkmut); line-height:1.6; max-width:40ch; }
.foot h4{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--darkmut); margin-bottom:14px; }
.foot ul{ list-style:none; display:flex; flex-direction:column; gap:9px; font-size:.93rem; color:var(--darktx); }
.foot__ph{ color:var(--accent2); }
.foot__legal{ border-top:1px solid var(--lined); padding-block:20px; display:flex; flex-wrap:wrap; gap:8px 24px;
  justify-content:space-between; font-family:var(--mono); font-size:.74rem; color:var(--darkmut); letter-spacing:.02em; }
.foot__legal a{ color:var(--darkmut); }
@media (hover:hover){
  .foot ul a:hover, .foot__legal a:hover{ color:var(--accent2); }
}

/* ============================================================
   ИНСТРУМЕНТ «ПОДБОР САЙТА» (.pick-…)
   ============================================================ */
.pick{
  /* токены-псевдонимы: единый источник правды — :root; свои значения не дублируем */
  --pk-cream:var(--cream); --pk-cream2:var(--cream2); --pk-panel:var(--panel); --pk-panel2:var(--panel2);
  --pk-ink:var(--ink); --pk-ink2:var(--ink2); --pk-muted:var(--muted);
  --pk-dark:var(--dark); --pk-darktx:var(--darktx); --pk-darkmut:var(--darkmut);
  --pk-accent:var(--accent); --pk-accent2:var(--accent2); --pk-line:var(--line); --pk-lined:var(--lined);
  --pk-display:var(--display); --pk-sans:var(--sans);
  --pk-mono:var(--mono);
  max-width:900px; margin-inline:auto;
  font-family:var(--pk-sans); color:var(--pk-ink);
}
.pick *{box-sizing:border-box;}
.pick-card{ background:var(--pk-panel); border:1px solid var(--pk-line); border-radius:20px;
  padding:clamp(20px,4vw,38px); position:relative; overflow:hidden; }
.pick-card::before{ content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:linear-gradient(90deg,var(--pk-accent),var(--pk-accent2)); opacity:.9; }
.pick-kick{ font-family:var(--pk-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--pk-muted); font-weight:500; display:inline-flex; align-items:center; gap:.55em; }
.pick-kick::before{ content:"//"; color:var(--pk-accent); }
.pick-h{ font-family:var(--pk-display); font-weight:600; line-height:1.08; letter-spacing:-.3px;
  font-size:clamp(1.5rem,3.4vw,2.2rem); margin:8px 0 6px; }
.pick-sub{ color:var(--pk-ink2); font-size:clamp(.98rem,1.4vw,1.08rem); max-width:60ch; }
.pick-prog{ margin:20px 0 4px; }
.pick-prog__bar{ height:6px; background:var(--pk-cream2); border-radius:4px; overflow:hidden; border:1px solid var(--pk-line); }
.pick-prog__fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--pk-accent),var(--pk-accent2));
  border-radius:4px; transition:width .35s cubic-bezier(.4,0,.2,1); }
.pick-prog__txt{ font-family:var(--pk-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pk-muted); margin-top:8px; display:flex; justify-content:space-between; }
.pick-step{ margin-top:22px; }
.pick-q{ font-family:var(--pk-display); font-weight:500; font-size:clamp(1.25rem,2.4vw,1.65rem);
  line-height:1.15; margin-bottom:4px; }
.pick-qhint{ color:var(--pk-muted); font-size:.92rem; margin-bottom:18px; }
.pick-qhint b{ color:var(--pk-ink2); font-weight:600; }
.pick-opts{ display:grid; gap:12px; }
.pick-opts.is-2{ grid-template-columns:repeat(2,1fr); }
.pick-opts.is-3{ grid-template-columns:repeat(3,1fr); }
.pick-opt{ text-align:left; width:100%; cursor:pointer; background:var(--pk-cream);
  border:1.5px solid var(--pk-line); border-radius:14px; padding:16px 18px; display:flex; gap:13px;
  align-items:flex-start; font-family:var(--pk-sans); color:var(--pk-ink); transition:border-color .16s ease, background .16s ease, transform .16s ease; }
.pick-opt__mark{ width:22px; height:22px; flex:none; border-radius:50%; border:2px solid var(--pk-line);
  margin-top:1px; position:relative; transition:border-color .16s ease; }
.pick-opt__mark::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--pk-accent);
  transform:scale(0); transition:transform .16s ease; }
.pick-opt__body{ flex:1; }
.pick-opt__t{ display:block; font-weight:600; font-size:1rem; line-height:1.25; }
.pick-opt__d{ display:block; color:var(--pk-ink2); font-size:.88rem; line-height:1.4; margin-top:3px; }
.pick-opt.is-on{ border-color:var(--pk-accent); background:#fbf1e6; }
.pick-opt.is-on .pick-opt__mark{ border-color:var(--pk-accent); }
.pick-opt.is-on .pick-opt__mark::after{ transform:scale(1); }
@media (hover:hover){ .pick-opt:hover{ border-color:var(--pk-accent2); transform:translateY(-1px); } }
.pick-nav{ display:flex; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap; }
.pick-btn{ font-family:var(--pk-mono); font-size:.86rem; letter-spacing:.02em; font-weight:500; cursor:pointer;
  padding:13px 22px; border-radius:11px; border:1px solid var(--pk-ink); display:inline-flex; align-items:center; gap:.55em;
  background:transparent; color:var(--pk-ink); transition:transform .16s ease, box-shadow .18s ease, background .18s ease, opacity .16s ease; }
.pick-btn--primary{ background:var(--pk-accent); border-color:var(--pk-accent); color:#fff; }
.pick-btn--ghost{ background:transparent; }
.pick-btn--link{ border:none; padding:13px 6px; color:var(--pk-muted); background:none; }
.pick-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.pick-btn__ar{ transition:transform .18s ease; }
@media (hover:hover){
  .pick-btn--primary:not([disabled]):hover{ transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(217,100,42,.6); }
  .pick-btn--primary:not([disabled]):hover .pick-btn__ar{ transform:translateX(4px); }
  .pick-btn--ghost:not([disabled]):hover{ background:var(--pk-ink); color:var(--pk-cream); }
  .pick-btn--link:hover{ color:var(--pk-accent); }
}
.pick-nav__spacer{ margin-left:auto; }
.pick-res{ animation:pickFade .4s ease; }
@keyframes pickFade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.pick-res__badge{ font-family:var(--pk-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pk-accent); font-weight:600; }
.pick-res__type{ font-family:var(--pk-display); font-weight:600; font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.05;
  margin:6px 0 8px; }
.pick-res__type b{ color:var(--pk-accent); font-weight:600; }
.pick-res__tag{ color:var(--pk-ink2); font-size:1.05rem; max-width:56ch; }
.pick-res__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-top:22px; align-items:start; }
.pick-incl{ border:1px solid var(--pk-line); border-radius:15px; background:var(--pk-cream); padding:20px 22px; }
.pick-incl h4{ font-family:var(--pk-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pk-muted); margin-bottom:14px; }
.pick-incl ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.pick-incl li{ display:flex; gap:11px; font-size:.95rem; color:var(--pk-ink2); line-height:1.4; align-items:flex-start; }
.pick-incl li::before{ content:""; width:7px; height:7px; margin-top:7px; flex:none; border-radius:2px;
  background:var(--pk-accent); transform:rotate(45deg); }
.pick-incl li.is-add{ color:var(--pk-ink); font-weight:500; }
.pick-incl li.is-add::before{ background:var(--pk-accent2); }
.pick-incl li .pk-plus{ font-family:var(--pk-mono); color:var(--pk-accent); font-weight:600; }
.pick-num{ background:var(--pk-dark); color:var(--pk-darktx); border-radius:15px; padding:22px 22px 20px; }
.pick-num__lbl{ font-family:var(--pk-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pk-darkmut); }
.pick-num__price{ font-family:var(--pk-display); font-weight:700; color:#fff; font-size:clamp(1.7rem,3.4vw,2.3rem);
  line-height:1.05; margin:4px 0 2px; }
.pick-num__price em{ font-style:normal; color:var(--pk-accent2); font-size:.62em; font-weight:500; }
.pick-num__row{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--pk-lined);
  font-size:.9rem; color:var(--pk-darkmut); }
.pick-num__row:first-of-type{ margin-top:16px; }
.pick-num__row b{ font-family:var(--pk-mono); color:var(--pk-accent2); font-weight:500; white-space:nowrap; text-align:right; }
.pick-notes{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.pick-note{ display:flex; gap:10px; background:var(--pk-panel2); border:1px solid var(--pk-line); border-left:3px solid var(--pk-accent);
  border-radius:10px; padding:11px 14px; font-size:.9rem; color:var(--pk-ink2); line-height:1.45; }
.pick-note__i{ color:var(--pk-accent); font-family:var(--pk-mono); font-weight:600; flex:none; }
.pick-disc{ margin-top:18px; font-size:.86rem; color:var(--pk-muted); line-height:1.5;
  padding:12px 16px; background:var(--pk-cream2); border-radius:10px; }
.pick-disc b{ color:var(--pk-ink2); }
.pick-cta{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.pick-form{ display:none; margin-top:20px; border:1px solid var(--pk-line); border-radius:15px; background:var(--pk-cream); padding:20px 22px; }
.pick-form.is-open{ display:block; animation:pickFade .3s ease; }
.pick-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.pick-field label{ display:block; font-family:var(--pk-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pk-muted); margin-bottom:6px; }
.pick-field input{ width:100%; font-family:var(--pk-sans); font-size:1rem; color:var(--pk-ink); background:var(--pk-panel);
  border:1px solid var(--pk-line); border-radius:10px; padding:12px 14px; }
.pick-field input:focus{ outline:2px solid var(--pk-accent); outline-offset:1px; border-color:var(--pk-accent); }
.pick-check{ display:flex; align-items:flex-start; gap:9px; margin-top:13px; font-size:.85rem; color:var(--pk-ink2); line-height:1.4; cursor:pointer; }
.pick-check input{ margin-top:3px; flex:none; accent-color:var(--pk-accent); }
.pick-check a{ color:var(--pk-accent); text-decoration:underline; }
.pick-form__btn{ width:100%; margin-top:14px; justify-content:center; }
.pick-ok{ display:none; margin-top:14px; font-family:var(--pk-mono); font-size:.9rem; color:var(--pk-accent); line-height:1.5; }
.pick-ok b{ color:var(--pk-ink); }
.pick-form__hint{ font-size:.74rem; color:var(--pk-muted); margin-top:11px; line-height:1.5; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .pos,.fmts,.proc__list,.sec3,.cases{ grid-template-columns:repeat(2,1fr); }
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .tile, .tile.is-feat{ grid-column:span 1; }
  .strip__in{ grid-template-columns:repeat(2,1fr); }
  .why{ grid-template-columns:1fr; }
  .cta__in,.teaser__in,.split,.contact{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr 1fr; }
  /* бургер-меню раньше — горизонтальное меню помещается только на широком десктопе */
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav.open .nav__links{ display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column;
    justify-content:flex-start; flex:none; gap:0; background:var(--cream); border-bottom:1px solid var(--line); padding:8px var(--pad) 16px; align-items:stretch; }
  .nav.open .nav__links a:not(.nav__cta){ padding:13px 0; border-bottom:1px solid var(--line); }
  .nav.open .nav__links a.is-active::after{ display:none; }
  .nav.open .nav__links a.nav__cta{ display:inline-flex; justify-content:center; margin:12px 0 6px; }
}
@media (max-width:720px){
  .pick-opts.is-2, .pick-opts.is-3{ grid-template-columns:1fr; }
  .pick-res__grid{ grid-template-columns:1fr; }
  .pick-form__grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .pos,.fmts,.proc__list,.sec3,.cases{ grid-template-columns:1fr; }
  .tiles{ grid-template-columns:1fr; }
  .tile, .tile.is-feat{ grid-column:span 1; }
  .strip__in{ grid-template-columns:1fr 1fr; }
  .chan{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr; gap:26px; }
  .hero__meta{ gap:6px 18px; }
}

/* ---------- доступность ---------- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto; transition-duration:.001ms !important; }
  .sig-dash{ display:none; }
}

/* ===== Путь клиента: от «хочу сайт» до готового сайта (иконки + шапка) ===== */
.jrny{ background:var(--dark); color:var(--darktx); }
.jrny__in{ max-width:1160px; margin:0 auto; padding:clamp(32px,4.5vw,50px) clamp(16px,4vw,40px); }
.jrny__head{ margin-bottom:26px; }
.jrny__eyebrow{ display:inline-block; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent2); font-weight:600; }
.jrny__title{ font-family:var(--display); font-weight:600; color:#fff; font-size:clamp(1.25rem,2.15vw,1.75rem); line-height:1.12; margin-top:8px; }
@media (min-width:900px){ .jrny__title{ white-space:nowrap; } }
.jrny__track{ display:flex; align-items:flex-start; gap:8px; }
.jrny__step{ flex:1; display:flex; flex-direction:column; gap:11px; }
.jrny__ic{ width:46px; height:46px; border-radius:13px; flex:none;
  background:rgba(229,138,63,.12); border:1px solid rgba(229,138,63,.4); color:var(--accent2);
  display:flex; align-items:center; justify-content:center; }
.jrny__ic svg{ width:24px; height:24px; }
.jrny__body{ display:flex; flex-direction:column; gap:5px; }
.jrny__num{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2); font-weight:600; }
.jrny__t{ font-family:var(--display); font-weight:600; font-size:1.16rem; color:#fff; line-height:1.15; }
.jrny__d{ font-size:.88rem; color:var(--darkmut); line-height:1.4; }
.jrny__step--end .jrny__t{ color:var(--accent2); }
.jrny__step--end .jrny__ic{ background:var(--accent); border-color:var(--accent); color:#fff; }
.jrny__arr{ align-self:flex-start; margin-top:12px; color:#6b5a3e; font-size:1.4rem; flex:none; }
@media (max-width:720px){
  .jrny__track{ flex-direction:column; gap:0; }
  .jrny__step{ flex-direction:row; gap:14px; padding:12px 0; align-items:flex-start; }
  .jrny__step .jrny__ic{ margin-top:2px; }
  .jrny__arr{ transform:rotate(90deg); margin:0 0 0 15px; }
}

/* ============================================================
   HERO-ВИЗУАЛ: макет сайта в браузерной рамке (чистый CSS, без картинок)
   ============================================================ */
@media (min-width:1020px){
  .hero__in{ display:grid; grid-template-columns:minmax(0,1fr) clamp(360px,38%,440px); gap:clamp(30px,4vw,56px); align-items:center; }
}
.hero__visual{ display:none; }
@media (min-width:1020px){ .hero__visual{ display:block; } }
/* Слайдер скриншотов: один крупный кадр во всю ширину, кадры плавно сменяются */
.shots{ width:100%; }
.shots__frame{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:0 30px 60px -28px rgba(34,30,24,.45); }
.shots__bar{ display:flex; align-items:center; gap:7px; padding:10px 14px; background:var(--panel2); border-bottom:1px solid var(--line); }
.shots__bar span{ width:10px; height:10px; border-radius:50%; background:var(--line); flex:none; }
.shots__bar span:nth-child(1){ background:#e2694f; }
.shots__bar span:nth-child(2){ background:#e6a63c; }
.shots__bar span:nth-child(3){ background:#63b25c; }
.shots__url{ margin-left:8px; font-style:normal; font-family:var(--mono); font-size:.68rem; color:var(--muted);
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:3px 10px; white-space:nowrap; }
.shots__track{ position:relative; aspect-ratio:6/7; }
.shots__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top;
  opacity:0; transition:opacity .6s ease; }
.shots__img.is-on{ opacity:1; }
.shots__dots{ display:flex; justify-content:center; gap:7px; margin-top:16px; }
.shots__dot{ width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer;
  transition:width .3s ease, background .3s ease; }
.shots__dot.is-on{ width:22px; border-radius:4px; background:var(--accent); }
.hero__visual-cap{ margin-top:14px; font-family:var(--mono); font-size:.78rem; color:var(--muted); text-align:center; }
.hero__visual-cap a{ color:var(--accent-deep); text-decoration:underline; }

/* ============================================================
   ПОЯВЛЕНИЕ БЛОКОВ ПРИ ПРОКРУТКЕ (классы вешает app.js)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .rv{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
  .rv.is-vis{ opacity:1; transform:none; }
}

/* ============================================================
   РЕАЛЬНЫЙ КЕЙС в «Примерах работ»
   ============================================================ */
.case.is-real{ border-style:solid; padding:0; overflow:hidden; }
.case__shot{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; border-bottom:1px solid var(--line); }
.case__body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.case.is-real .case__badge{ background:var(--accent); color:#fff; border-color:var(--accent); }
.case__link{ margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:.78rem; color:var(--accent-deep); text-decoration:underline; }

/* ============================================================
   «КТО ДЕЛАЕТ» — блок основателя (фото/имя — заглушки до публикации)
   ============================================================ */
.founder{ display:grid; grid-template-columns:250px 1fr; gap:clamp(24px,4vw,48px); align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:clamp(22px,3.5vw,36px); }
.founder__ph{ aspect-ratio:4/5; border-radius:14px; background:var(--cream2); border:1px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--muted); font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; }
.founder__ph svg{ width:46px; height:46px; color:var(--accent); }
.founder__name{ font-family:var(--display); font-weight:600; font-size:1.5rem; margin-bottom:4px; }
.founder__role{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:14px; }
.founder__quote{ font-size:1.05rem; color:var(--ink2); line-height:1.6; max-width:56ch; }
.founder__meta{ margin-top:16px; font-family:var(--mono); font-size:.78rem; color:var(--muted); }
@media (max-width:720px){ .founder{ grid-template-columns:1fr; } .founder__ph{ max-width:230px; } }

/* ============================================================
   ДОСТУПНЫЙ АКЦЕНТ: мелкий оранжевый текст → --accent-deep (AA на креме)
   ============================================================ */
.wc__n, .ps__n, .case__badge, .form__ok, .pick-res__badge{ color:var(--accent-deep); }
.s3__price{ color:var(--accent-deep); }
.form__check a, .form__hint a{ color:var(--accent-deep); }
