/* ============================================================
   matchmar — SMM-агентство (ведение соцсетей под ключ)
   Design system + components
   Type: Inter Tight (OFL) — единственное семейство, 1:1 как на e-b-agency
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---------- design tokens ---------- */
:root{
  /* palette — warm paper + ink + single clay accent */
  --bone:#ECE7DE;
  --bone-2:#E4DDD1;
  --bone-3:#DAD2C4;
  --ink:#171411;
  --ink-2:#13110D;
  --muted:#6B6155;
  --muted-d:#A79C8B;
  /* accent — bright blue (was clay/rust); var name kept for reach */
  --clay:#2F6BFF;
  --clay-soft:#6E97FF;
  --reveal-dim:#C7BEAF; /* unread (light) state for scroll-scrub statement */
  --line:rgba(23,20,17,.15);
  --line-strong:rgba(23,20,17,.32);
  --line-d:rgba(236,231,222,.16);
  --on-dark:#ECE7DE;

  /* type */
  --sans:'Inter Tight',-apple-system,'Segoe UI',Roboto,sans-serif;
  /* шрифт 1:1 как на e-b — там только Inter Tight; «серифный» акцент теперь тоже Inter Tight */
  --serif:'Inter Tight',-apple-system,'Segoe UI',Roboto,sans-serif;

  /* fluid type scale */
  --fs-hero:clamp(3.6rem,15.5vw,15rem);
  --fs-mega:clamp(3rem,11vw,10rem);
  --fs-display:clamp(2.3rem,6.4vw,5.6rem);
  --fs-serif-xl:clamp(2rem,5vw,4.6rem);
  --fs-serif-l:clamp(1.6rem,3vw,2.8rem);
  --fs-h3:clamp(1.35rem,2.3vw,2.1rem);
  --fs-lead:clamp(1.05rem,1.5vw,1.4rem);
  --fs-body:clamp(1rem,1.1vw,1.0625rem);
  --fs-label:.72rem;

  /* space */
  --pad:clamp(20px,5vw,84px);
  --gut:clamp(16px,2.2vw,32px);
  --sec:clamp(80px,12vh,180px);
  --maxw:1680px;

  /* motion */
  --e-out:cubic-bezier(.2,.7,.2,1);
  --e-soft:cubic-bezier(.32,.72,0,1);
  --t-slow:1.1s;
  --t-med:.6s;
  --t-fast:.32s;
}

/* ---------- base ---------- */
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.6;
  font-weight:400;
  color:var(--ink);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-feature-settings:"ss01","cv05";
}
body.is-locked{overflow:hidden;height:100vh}

::selection{background:var(--ink);color:var(--bone)}

/* film-grain overlay for tactile paper feel */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
.rule{height:1px;background:var(--line);border:0;width:100%}
.label{
  font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-feature-settings:"tnum";
}
.serif{font-family:var(--serif);font-weight:400}
.italic{font-family:var(--serif);font-style:normal;font-weight:400}
.accent{color:var(--clay)}

/* scroll-reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--e-out),transform 1.1s var(--e-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* line-mask reveal (for big headings) */
.mask{display:block;overflow:hidden}
.mask>*{display:block;transform:translateY(105%);transition:transform 1.1s var(--e-soft)}
.in .mask>*,.mask.in>*{transform:none}

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--ink);
  pointer-events:none;z-index:9500;transform:translate(-50%,-50%);
  transition:width .4s var(--e-out),height .4s var(--e-out),background .3s,opacity .3s,border .3s;
  mix-blend-mode:difference;
}
.cursor.hide{opacity:0}
.cursor.is-hover{width:64px;height:64px;background:transparent;border:1px solid var(--bone)}
.cursor.is-view{width:96px;height:96px;background:var(--clay);mix-blend-mode:normal}
.cursor__t{color:var(--bone);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .3s}
.cursor.is-view .cursor__t{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ============================================================
   preloader
   ============================================================ */
.loader{
  position:fixed;inset:0;z-index:9999;background:var(--clay);color:var(--bone);
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad);overflow:hidden;
  transition:transform 1.1s var(--e-soft);
}
.loader.done{transform:translateY(-100%)}
.loader__row,.loader__bar{position:relative;z-index:2}
.loader__row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.loader__mark{font-size:clamp(2.4rem,7vw,5rem);font-weight:600;letter-spacing:-.04em;line-height:.9}
.loader__mark em{font-family:var(--serif);font-style:normal;font-weight:400;letter-spacing:0}
.loader__num{font-size:clamp(2.4rem,7vw,5rem);font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.loader__bar{height:1px;background:rgba(236,231,222,.3);margin-top:28px;overflow:hidden}
.loader__bar i{position:absolute;inset:0 100% 0 0;background:var(--bone);transition:right .2s linear}
/* self-drawing doodles */
.loader__deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.ldraw{position:absolute;height:auto;color:var(--bone);opacity:.9;overflow:visible}
.ldraw path{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:ldraw .8s var(--e-out) forwards}
@keyframes ldraw{to{stroke-dashoffset:0}}
.ldraw--swoosh{top:13%;left:6%;width:clamp(120px,15vw,210px);transform:rotate(-5deg)}
.ldraw--oval{top:10%;right:8%;width:clamp(74px,8vw,120px);transform:rotate(8deg)}
.ldraw--star{top:46%;left:9%;width:clamp(46px,5vw,78px);transform:rotate(6deg);opacity:.8}
.ldraw--smile{top:34%;right:11%;width:clamp(72px,8vw,118px);transform:rotate(-7deg)}
.ldraw--arrow{top:62%;right:16%;width:clamp(96px,12vw,170px);transform:rotate(4deg);opacity:.8}
/* stagger the draw */
.ldraw--swoosh path{animation-delay:.15s}
.ldraw--oval path{animation-delay:.4s}
.ldraw--star path{animation-delay:.62s}
.ldraw--smile path{animation-delay:.7s;animation-duration:.55s}
.ldraw--smile path:nth-child(2){animation-delay:1.05s}
.ldraw--smile path:nth-child(3){animation-delay:1.12s}
.ldraw--smile path:nth-child(4){animation-delay:1.18s}
.ldraw--arrow path{animation-delay:.9s}
@media(max-width:600px){.ldraw--star,.ldraw--arrow{display:none}}
@media(prefers-reduced-motion:reduce){.ldraw path{animation:none;stroke-dashoffset:0}}

/* ============================================================
   header
   ============================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:flex-start;gap:14px;
  padding:clamp(12px,1.6vw,20px) var(--pad);
  transition:transform .5s var(--e-out);
  --pill-h:clamp(42px,4vw,50px);
}
.hdr.up{transform:translateY(0)}
.hdr.down{transform:translateY(-135%)}
/* floating bubble pills — all equal height */
.hdr__logo,.hdr__nav,.hdr__cta,.hdr__burger{border-radius:100px;height:var(--pill-h);
  box-shadow:0 12px 30px -16px rgba(23,20,17,.45)}
/* logo + nav: two separate bubbles, side by side, pushed right but a touch left of the CTA */
.hdr__group{margin-left:auto;margin-right:clamp(18px,3.5vw,64px);display:flex;align-items:center;gap:0}
.hdr__logo{display:inline-block;line-height:calc(var(--pill-h) - 2px);white-space:nowrap;
  font-weight:600;font-size:1rem;letter-spacing:-.02em;color:var(--ink);
  background:#FBF8F2;border:1px solid var(--line);padding-inline:clamp(16px,1.7vw,22px)}
.hdr__logo em{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--clay);letter-spacing:0}
.hdr__nav{display:flex;gap:clamp(15px,1.9vw,28px);align-items:center;
  background:#FBF8F2;border:1px solid var(--line);padding-inline:clamp(18px,2vw,26px)}
.hdr__nav a{font-size:.84rem;letter-spacing:.01em;color:var(--ink);position:relative;padding:3px 0}
.hdr__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--clay);transition:right .4s var(--e-out)}
.hdr__nav a:hover::after{right:0}
.hdr__cta{display:inline-flex;align-items:center;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  background:var(--clay);color:var(--bone);border:1px solid var(--clay);padding-inline:clamp(20px,2vw,26px);
  transition:background .35s var(--e-out),border-color .35s,transform .35s var(--e-out)}
.hdr__cta:hover{background:var(--ink);border-color:var(--ink)}
.hdr__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:52px;align-items:center;
  background:#FBF8F2;border:1px solid var(--line)}
.hdr__burger span{height:1.5px;width:20px;background:var(--ink);transition:transform .4s,opacity .3s}

/* ============================================================
   hero — giant wordmark + scattered vertical photos + keyword strip
   (composition echoes e-b-agency; built original, own placeholders)
   ============================================================ */
.hero{min-height:100svh;display:flex;flex-direction:column;
  padding:clamp(74px,9vh,98px) var(--pad) 0;position:relative}
.hero__bar{display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap}
.hero__bar span{max-width:38ch}

/* lockup rises up to sit level with the top bar (where the tagline used to be) */
.hero__stage{flex:1 0 auto;position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"mark photos" "spacer photos" "desc photos";
  column-gap:clamp(18px,3vw,52px);align-items:start;
  margin-top:clamp(-30px,-2.6vh,-8px);padding-block:0 clamp(14px,3vh,38px)}

.hero__lockup{grid-area:mark;align-self:start;font-weight:700;font-size:clamp(4rem,13vw,12.5rem);
  line-height:.8;letter-spacing:-.05em;color:var(--ink)}
.hero__lockup em{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--clay);letter-spacing:-.02em}

.hero__desc{grid-area:desc;align-self:end;display:flex;gap:14px;align-items:flex-start;
  max-width:40ch;padding-bottom:clamp(14px,3vh,30px)}
.hero__desc .hmark{font-size:1.5rem;line-height:1;color:var(--clay);transform:translateY(-3px)}
.hero__desc p{font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.75;color:var(--ink)}

/* vertical photo cascade — 3 equal portrait frames, diagonal top-right → bottom-left;
   spans full hero height: top frame peeks above, bottom frame overlaps the keyword strip */
.hero__collage{grid-area:photos;position:relative;align-self:stretch;min-height:clamp(440px,72vh,640px)}
/* .hero__collage prefix raises specificity above the later .frame{position:relative} rule */
/* three equal large portrait cards, cascading top-right → bottom-left */
.hero__collage .hcol{position:absolute;background:var(--bone-2);
  box-shadow:0 40px 72px -34px rgba(23,20,17,.58);
  transition:transform .7s var(--e-out),box-shadow .6s var(--e-out)}
/* top card — higher and further right, tucks up under the header pills */
.hcol--1{width:58%;aspect-ratio:3/4;top:-32%;right:1%;transform:rotate(5deg);z-index:1}
/* middle card */
.hcol--2{width:58%;aspect-ratio:3/4;top:15%;right:29%;transform:rotate(-2deg);z-index:2}
/* bottom card — pushed further left, overlaps the keyword strip */
.hcol--3{width:58%;aspect-ratio:3/4;top:60%;right:57%;transform:rotate(-6deg);z-index:3}
.hcol:hover{transform:rotate(0) scale(1.04);box-shadow:0 46px 80px -32px rgba(23,20,17,.6);z-index:6}
/* real mockup photo inside a collage frame */
.hcol__img,.hcol__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.hcol--filled{overflow:hidden}
.hcol--filled .frame__fill,.hcol--filled .frame__label{display:none}
.hcol__badge{position:absolute;z-index:5;right:3%;top:60%;width:clamp(80px,8.4vw,124px);aspect-ratio:1;
  border-radius:50%;display:grid;place-items:center;text-align:center;line-height:1.15;
  background:var(--clay);color:var(--bone);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;transform:rotate(-8deg);box-shadow:0 18px 34px -16px rgba(47,107,255,.55)}

/* hand-drawn smiley laid over the hero (ref: e-b) */
.hero__smiley{position:absolute;z-index:5;left:36%;bottom:19%;width:clamp(104px,11vw,168px);height:auto;
  transform:rotate(-7deg);pointer-events:none;
  filter:drop-shadow(0 16px 26px rgba(47,107,255,.28))}
@media(max-width:860px){.hero__smiley{left:4%;right:auto;top:auto;bottom:15%;width:clamp(72px,16vw,108px)}}

/* keyword gradation strip — full-bleed bottom marquee */
.hero__strip{position:relative;z-index:1;margin-inline:calc(var(--pad)*-1);
  overflow:hidden;padding-block:clamp(11px,1.3vw,16px)}
.hero__strip-track{display:flex;width:max-content;white-space:nowrap;animation:heroStrip 34s linear infinite}
.hero__strip-track span{display:inline-flex;align-items:center;font-size:clamp(.82rem,1vw,1.02rem);
  font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);padding-inline:clamp(14px,1.8vw,28px)}
.hero__strip-track span::before{content:"✺";color:var(--clay);margin-right:clamp(14px,1.8vw,28px);font-size:.8em}
@keyframes heroStrip{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hero__strip-track{animation:none}}

@media(max-width:860px){
  /* tagline sits directly under the wordmark (readable on first screen); cards drop below it */
  .hero__stage{grid-template-columns:1fr;grid-template-areas:"mark" "desc" "photos";
    grid-template-rows:auto auto auto;row-gap:clamp(18px,4vh,32px)}
  .hero__desc{align-self:start;padding-bottom:0}
  /* collage height tracks card size (vw) so the bottom card can never spill onto the text */
  .hero__collage{align-self:auto;min-height:0;height:138vw}
  .hcol--1{width:50vw;top:0;right:2%}
  /* video card sits on top of the two photo cards on mobile */
  .hcol--2{width:48vw;top:34vw;right:26%;z-index:4}
  .hcol--3{width:48vw;top:68vw;right:4%}
  .hcol__badge{right:auto;left:5%;top:6%}
}
@media(max-width:560px){
  .hero__lockup{font-size:clamp(2.8rem,17vw,5rem)}
  .hero__collage{height:150vw}
  .hcol--1{width:54vw;top:0;right:0}
  .hcol--2{width:52vw;top:38vw;right:24%}
  .hcol--3{width:52vw;top:74vw;right:2%}
}

/* ============================================================
   pitch — scroll-scrubbed statement (block 2)
   words darken light → ink as the section scrolls through view
   ============================================================ */
.pitch{padding-block:clamp(80px,16vh,200px);text-align:center}
/* первый pitch: верхний отступ больше — hero-постер не наезжает на «ЧТО МЫ ДЕЛАЕМ» (правка Марго) */
#pitch{padding-top:clamp(130px,22vh,270px)}
.pitch__eyebrow{display:inline-block;margin-bottom:clamp(22px,4vh,48px)}
.pitch__reveal{font-weight:680;font-size:clamp(2.5rem,6.6vw,6.4rem);line-height:1.06;letter-spacing:-.01em;
  text-transform:uppercase;max-width:16ch;margin-inline:auto}
/* per-word colour driven by --lit (0–100), set by JS on scroll */
.pitch__reveal .w{color:color-mix(in srgb,var(--ink) calc(var(--lit,0)*1%),var(--reveal-dim))}
.pitch__mark{font-size:.62em;vertical-align:.18em;
  color:color-mix(in srgb,var(--clay) calc(var(--lit,0)*1%),var(--reveal-dim))}
/* no-JS fallback: fully readable (JS otherwise drives --lit on scroll) */
@media (scripting: none){
  .pitch__reveal .w{color:var(--ink)}
  .pitch__mark{color:var(--clay)}
}

.pitch__act{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2vw,26px);
  margin-top:clamp(40px,7vh,80px)}
.pitch__trust{max-width:62ch;color:var(--ink);font-size:var(--fs-label);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;line-height:1.7}
/* CTA stack — equal-width buttons; consent one line justified to that width */
.cta-stack{display:flex;flex-direction:column;gap:13px;width:fit-content;max-width:100%}
.cta-row{display:flex;flex-direction:column;gap:11px;width:100%}
.cta-row .btn{width:100%;justify-content:center}
/* consent → цена вынесена заметно (преимущество), под ней бесплатный оффер */
.consent{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.consent__price{font-size:clamp(1.05rem,1.55vw,1.4rem);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.consent__sub{font-size:var(--fs-label);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);line-height:1.5;text-wrap:balance}
/* мобайл: строка под кнопками не «съезжает» — блок во всю ширину кнопки, */
/* цена крупнее, подпись ровными строками по центру (правка Марго) */
@media(max-width:560px){
  .cta-stack{width:100%}
  .consent{gap:9px}
  .consent__price{font-size:1.14rem}
  .consent__sub{max-width:none;font-size:.68rem;letter-spacing:.02em;line-height:1.45}
}

/* generic buttons (hero) */
.btn{display:inline-flex;align-items:center;gap:.55em;font-size:clamp(.9rem,1.1vw,1.02rem);font-weight:500;
  border-radius:100px;padding:13px 26px;line-height:1.1;
  transition:background .4s var(--e-out),color .4s var(--e-out),border-color .4s,padding .4s var(--e-out)}
.btn .arr{transition:transform .4s var(--e-out)}
.btn:hover .arr{transform:translate(3px,-3px)}
.btn--solid{background:var(--ink);color:var(--bone);border:1px solid var(--ink)}
.btn--solid:hover{background:var(--clay);border-color:var(--clay);padding-inline:32px}
.btn--ghost{border:1px solid var(--line-strong);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}

/* ============================================================
   photo frame (mockup placeholder)
   ============================================================ */
.frame{
  position:relative;background:var(--bone-2);border:1px solid var(--line);overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:var(--muted);isolation:isolate;
}
.frame::before,.frame::after{content:"";position:absolute;width:18px;height:18px;border:1.5px solid var(--clay);z-index:2;opacity:.85}
.frame::before{top:14px;left:14px;border-right:0;border-bottom:0}
.frame::after{bottom:14px;right:14px;border-left:0;border-top:0}
.frame__label{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px;z-index:1;
  transition:transform .9s var(--e-out);
}
.frame__label .ic{width:38px;height:38px;border:1.5px solid var(--clay);border-radius:50%;
  display:grid;place-items:center;font-family:var(--serif);font-style:normal;font-size:1.2rem;color:var(--clay)}
.frame__label small{font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:600}
.frame__label em{font-family:var(--serif);font-style:normal;font-size:1.2rem;color:var(--muted);letter-spacing:.01em}
/* diagonal hatch so frames read as "to be filled" */
.frame__fill{position:absolute;inset:0;z-index:0;opacity:.7;
  background-image:repeating-linear-gradient(45deg,transparent 0 13px,var(--line) 13px 14px)}
.frame:hover .frame__label{transform:scale(1.04)}

/* ============================================================
   marquee
   ============================================================ */
.marquee{border-block:1px solid var(--line);padding-block:clamp(18px,2.4vw,30px);overflow:hidden;white-space:nowrap;background:var(--bone)}
.marquee__track{display:inline-flex;gap:.5em;will-change:transform;animation:marq 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{font-size:var(--fs-mega);font-weight:600;letter-spacing:-.03em;line-height:1;display:inline-flex;align-items:center;gap:.5em}
.marquee span::after{content:"";display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--clay);transform:translateY(-.18em)}
.marquee .out{color:transparent;-webkit-text-stroke:1px var(--ink)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ============================================================
   manifesto / intro
   ============================================================ */
.intro{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,90px)}
.intro__statement{font-family:var(--serif);font-weight:400;font-size:var(--fs-serif-xl);line-height:1.08;letter-spacing:-.005em;max-width:18ch}
.intro__statement em{font-style:normal;color:var(--clay)}
.intro__aside{display:flex;flex-direction:column;gap:32px;max-width:46ch;justify-self:end}
.intro__aside p{color:var(--muted)}
.intro__aside p b{color:var(--ink);font-weight:500}
.stats{display:flex;gap:clamp(28px,4vw,64px);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px}
.stat .n{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat .n em{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--clay)}
.stat .c{margin-top:8px}
@media(min-width:900px){.intro{grid-template-columns:1.1fr .9fr;align-items:end}}

/* ============================================================
   collage — scattered stat cards + marquee running behind
   (composition echoes e-b reference; built original)
   ============================================================ */
/* манифест идёт сразу за pitch — верхний отступ убавлен, чтобы не зияла пустота (правка Марго) */
#manifesto{padding-top:clamp(24px,4vh,64px)}
.collage{position:relative}
.collage__kick{display:inline-block;position:relative;z-index:4}
.collage__lead{position:relative;z-index:4;margin-top:clamp(14px,2vh,22px);max-width:36ch;
  font-size:clamp(.82rem,1vw,1rem);font-weight:600;line-height:1.55;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink)}
@media(min-width:900px){
  .collage__lead{position:absolute;top:2px;right:0;width:min(34ch,40%);margin-top:0}
}

.collage__stage{position:relative;height:clamp(330px,42vh,520px);margin-top:clamp(26px,4vh,56px)}
/* marquee strip behind the cards */
.collage__marq{position:absolute;top:50%;left:calc(var(--pad)*-1);right:calc(var(--pad)*-1);
  transform:translateY(-50%);z-index:1;overflow:hidden;pointer-events:none}
.collage__marq-track{display:flex;width:max-content;white-space:nowrap;animation:collageMarq 40s linear infinite}
.collage__marq-track span{font-size:clamp(3.4rem,12vw,12rem);font-weight:700;letter-spacing:-.04em;line-height:1;
  text-transform:uppercase;color:var(--ink);opacity:.16;padding-inline:clamp(18px,2.2vw,44px)}
.collage__marq-track span::after{content:"·";color:var(--clay);opacity:.7;margin-left:clamp(18px,2.2vw,44px)}
@keyframes collageMarq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.collage__marq-track{animation:none}}

/* scattered stat cards */
.scard{position:absolute;display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  padding:clamp(18px,1.7vw,28px);box-shadow:0 40px 72px -34px rgba(23,20,17,.5);
  transition:transform .6s var(--e-out),box-shadow .6s var(--e-out)}
.scard:hover{transform:rotate(0deg) scale(1.035);box-shadow:0 52px 86px -30px rgba(23,20,17,.55);z-index:6}
.scard__no{font-family:var(--serif);font-style:normal;font-size:1rem;opacity:.65;font-variant-numeric:tabular-nums}
.scard__num{font-size:clamp(2.4rem,4.6vw,4.6rem);font-weight:680;letter-spacing:-.035em;line-height:.92;
  font-variant-numeric:tabular-nums;margin-top:auto}
.scard__num--txt{font-size:clamp(1.5rem,2.7vw,2.5rem);letter-spacing:-.015em;line-height:1.02;text-transform:none}
.scard__cap{font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.5;max-width:20ch;opacity:.9}
/* placement & palette echo the reference proportions/angles */
.scard--1{width:26%;aspect-ratio:3/2.6;left:1%;top:7%;transform:rotate(-4deg);z-index:2;
  background:var(--ink);color:var(--bone)}
.scard--2{width:30%;aspect-ratio:3/2.8;left:30%;top:0;transform:rotate(4.5deg);z-index:3;
  background:var(--clay);color:var(--bone)}
.scard--3{width:38%;aspect-ratio:7/3.2;right:0;bottom:-3%;transform:rotate(-4deg);z-index:2;
  background:var(--bone-2);color:var(--ink);border:1px solid var(--line)}
.scard--3 .scard__no{color:var(--clay)}

@media(max-width:900px){
  .collage__stage{height:auto;display:flex;flex-direction:column;gap:clamp(18px,5vw,30px);margin-top:clamp(22px,4vh,34px)}
  .scard{position:relative;width:auto;aspect-ratio:auto;inset:auto;min-height:clamp(112px,28vw,150px)}
  .scard--1{transform:rotate(-1.4deg)}
  .scard--2{transform:rotate(1.4deg)}
  .scard--3{transform:rotate(-1deg)}
  .collage__marq-track span{font-size:clamp(3rem,18vw,5rem)}
}

/* ============================================================
   services
   ============================================================ */
.svc__head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,56px)}
.svc__head h2{font-size:var(--fs-display);font-weight:600;letter-spacing:-.03em;line-height:.95}
.svc__list{border-top:1px solid var(--line)}
.svc__item{border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.svc__bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,48px);
  padding-block:clamp(22px,3vw,40px);cursor:pointer;transition:padding-left .5s var(--e-out)}
.svc__item:hover .svc__bar{padding-left:clamp(8px,1.5vw,24px)}
.svc__no{font-family:var(--serif);font-style:normal;font-size:1.3rem;color:var(--muted);font-variant-numeric:tabular-nums}
.svc__name{font-size:clamp(1.6rem,3.6vw,3rem);font-weight:600;letter-spacing:-.03em;line-height:1;transition:color .4s}
.svc__item:hover .svc__name{color:var(--clay)}
.svc__plus{width:26px;height:26px;position:relative;flex:none}
.svc__plus::before,.svc__plus::after{content:"";position:absolute;background:var(--ink);transition:transform .4s var(--e-out)}
.svc__plus::before{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)}
.svc__plus::after{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%)}
.svc__item.open .svc__plus::after{transform:translateX(-50%) scaleY(0)}
.svc__panel{max-height:0;overflow:hidden;transition:max-height .6s var(--e-out)}
.svc__panelin{display:grid;gap:28px;padding:0 0 clamp(28px,3vw,44px) 0;grid-template-columns:1fr}
.svc__desc{color:var(--muted);max-width:52ch}
.svc__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.svc__tags li{font-size:.8rem;letter-spacing:.04em;border:1px solid var(--line);border-radius:100px;padding:6px 14px;color:var(--ink)}
.svc__thumb{aspect-ratio:16/10}
@media(min-width:880px){
  .svc__panelin{grid-template-columns:1.2fr 1fr;align-items:center;gap:clamp(40px,5vw,80px)}
  .svc__no{font-size:1.6rem}
}

/* ============================================================
   services v2 — awwwards-style index rows + floating preview card
   ============================================================ */
.svc2{position:relative}
.svc2__rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.svc2__row{display:grid;grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr) auto;align-items:center;
  gap:clamp(14px,2.4vw,40px);padding:clamp(18px,2.2vw,30px) 0;border-bottom:1px solid var(--line);
  color:var(--ink);transition:padding-left .5s var(--e-out),opacity .4s}
.svc2__badge{width:clamp(30px,2.6vw,40px);height:clamp(30px,2.6vw,40px);border-radius:50%;
  display:grid;place-items:center;background:var(--clay);color:var(--bone);font-size:.9em;
  transition:transform .5s var(--e-out)}
.svc2__name{font-size:clamp(1.05rem,1.7vw,1.7rem);font-weight:650;letter-spacing:-.015em;line-height:1.04;
  text-transform:uppercase;transition:color .4s}
.svc2__cat{font-size:clamp(.74rem,.95vw,.92rem);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.svc2__price{font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;text-align:right}
/* hover: dim the rest, lift the badge, accent the active */
@media(hover:hover){
  .svc2__rows:hover .svc2__row{opacity:.4}
  .svc2__rows:hover .svc2__row:hover{opacity:1;padding-left:clamp(8px,1.4vw,22px)}
}
.svc2__row:hover .svc2__name{color:var(--clay)}
.svc2__row:hover .svc2__badge{transform:rotate(90deg) scale(1.08)}

/* shared card bits */
.svc2__media{position:relative;aspect-ratio:4/3;background:var(--bone-2);overflow:hidden;
  border:1px solid var(--line);display:grid;place-items:center}
.svc2__corners::before,.svc2__corners::after{content:"";position:absolute;width:14px;height:14px;
  border:1.5px solid var(--clay);opacity:.8;z-index:2}
.svc2__corners::before{top:11px;right:11px;border-left:0;border-bottom:0}
.svc2__corners::after{bottom:11px;right:11px;border-left:0;border-top:0}
/* премиум-инфографика дудлами (синяя линия на однотонном фоне) — смысл каждой услуги */
.svc2__info{position:relative;z-index:1;width:68%;max-width:250px;height:auto;color:var(--clay)}
.svc2__info .ln{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.svc2__info .dash{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:2.5 8}
.svc2__info .fil{fill:currentColor;stroke:none}
.svc2__info .soft{fill:var(--clay-soft);stroke:none}
.svc2__bubbles{position:absolute;top:11px;left:11px;z-index:3;display:flex;flex-wrap:wrap;gap:6px;max-width:74%}
.svc2__bubbles .bub{padding:5px 11px;border-radius:100px;background:#FBF8F2;border:1px solid var(--line);
  box-shadow:0 6px 16px -12px rgba(23,20,17,.4);font-size:.68rem;font-weight:500;color:var(--ink);white-space:nowrap}
.svc2__fbody{padding:clamp(14px,1.4vw,18px)}
.svc2__fname{display:block;font-size:1.05rem;font-weight:650;letter-spacing:-.015em;text-transform:uppercase;color:var(--ink)}
.svc2__bprice{display:block;margin-top:6px;font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--clay)}
.svc2__desc{margin-top:10px;color:var(--muted);font-size:.92rem;line-height:1.5}

/* floating preview card — follows the cursor on hover (desktop) */
.svc2__fcard{background:var(--bone);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 36px 70px -38px rgba(23,20,17,.55)}
@media(hover:hover) and (min-width:760px){
  /* preview parked on the right, shows on hover (not pinned to cursor) */
  .svc2__float{position:absolute;right:clamp(2%,3vw,48px);top:50%;transform:translateY(-50%);
    z-index:120;width:clamp(280px,24vw,344px);pointer-events:none;opacity:0;
    transition:opacity .4s var(--e-out)}
  .svc2__float.show{opacity:1}
  .svc2__fcard{display:none;transform:rotate(-2deg)}
  .svc2__fcard.is-active{display:block}
}
/* mobile / no-hover: список-строки убираем (дублировал карточки), показываем только карточки */
@media(hover:none),(max-width:759px){
  .svc2__rows{display:none}
  .svc2__float{display:flex;flex-direction:column;gap:clamp(18px,5vw,28px);margin-top:0}
  .svc2__fcard{opacity:1}
}

/* ============================================================
   selected works
   ============================================================ */
.works__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,56px)}
.works__head h2{font-size:var(--fs-display);font-weight:600;letter-spacing:-.03em;line-height:.92}
.works__head h2 em{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--clay)}
.works__grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,3vw,52px) var(--gut)}
.work{display:block;cursor:pointer}
.work__frame{aspect-ratio:4/5;transition:transform 1.2s var(--e-out)}
.work__img{position:absolute;inset:0;transition:transform 1.4s var(--e-out)}
.work:hover .work__img{transform:scale(1.05)}
.work__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:18px;border-top:1px solid var(--line);margin-top:18px}
.work__t{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em}
.work__cat{color:var(--muted);font-size:.9rem}
.work__yr{font-family:var(--serif);font-style:normal;color:var(--muted)}
@media(min-width:760px){
  .works__grid{grid-template-columns:1fr 1fr}
  .work.tall{grid-row:span 1}
  .work:nth-child(odd){margin-top:0}
  .work:nth-child(even){transform:translateY(clamp(24px,6vw,80px))}
}

/* ============================================================
   approach
   ============================================================ */
.approach{background:var(--bone);color:var(--ink)}
.approach .label{color:var(--muted)}
.approach .rule{background:var(--line)}
.approach__head{font-family:var(--serif);font-size:var(--fs-serif-xl);line-height:1.06;max-width:20ch;margin-bottom:clamp(40px,6vw,80px)}
.approach__head em{font-style:normal;color:var(--clay)}
/* (легаси .steps/.step step-grid удалён — не используется в HTML; манифест-«steps» стилизуется ниже,
   его контейнер .steps описан в блоке scrollytelling. Прежнее правило случайно красило фон серым.) */

/* process — curved route: SVG path draws on scroll, stations light up */
.route{position:relative;display:flex;flex-direction:column;padding-block:clamp(12px,3vh,40px)}
.route__svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.route__path{stroke:var(--clay);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--clay) 55%,transparent))}
.route__step{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(18px,2vw,34px);
  width:min(42%,500px);margin-block:clamp(26px,4.5vh,60px)}
/* nodes hug the centre axis, labels extend outward → the snake line stays in the
   middle band and never crosses the text */
.route__step:nth-of-type(odd){align-self:flex-start;flex-direction:row-reverse;text-align:right}
.route__step:nth-of-type(even){align-self:flex-end;flex-direction:row;text-align:left}
.route__node{flex:none;width:clamp(56px,5vw,80px);height:clamp(56px,5vw,80px);border-radius:50%;
  display:grid;place-items:center;border:1.5px solid var(--line);background:#FBF8F2;
  font-family:var(--serif);font-style:normal;font-size:clamp(1.1rem,1.5vw,1.55rem);color:var(--muted);
  position:relative;z-index:3;transition:border-color .5s var(--e-out),background .5s var(--e-out),color .5s var(--e-out),box-shadow .5s var(--e-out)}
.route__t{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;margin-bottom:10px;color:var(--ink)}
.route__d{color:var(--muted);max-width:42ch}
/* live (JS): dim until the drawn line reaches the station */
.route--live .route__label{opacity:.32;transform:translateY(10px);transition:opacity .55s var(--e-out),transform .6s var(--e-out)}
.route--live .route__step.is-active .route__label{opacity:1;transform:none}
.route--live .route__step.is-active .route__node{border-color:var(--clay);background:var(--clay);color:var(--bone);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--clay) 18%,transparent)}
@media(max-width:760px){
  /* mobile: nodes stack on the left, labels to the right → clean vertical line, no overlap */
  .route__step:nth-of-type(odd),.route__step:nth-of-type(even){
    width:100%;margin-inline:0;align-self:flex-start;flex-direction:row;text-align:left;
    margin-block:clamp(24px,6vw,38px)}
}

/* ============================================================
   founder — минимал: цитата-герой + клип-портрет, без лишних деталей
   ============================================================ */
.fdr{position:relative;display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:var(--gut);row-gap:clamp(30px,4.5vw,60px);align-items:end}
.fdr__idx{grid-column:1/-1;color:var(--clay)}
/* hand-drawn approval stamp — slams in with rotation on scroll-in */
.fdr__stamp{position:absolute;z-index:4;left:58%;top:15%;width:clamp(132px,15vw,212px);
  transform-origin:center;pointer-events:none;opacity:0;transform:rotate(-32deg) scale(2.1)}
.fdr__stamp svg{display:block;width:100%;height:auto;overflow:visible}
.fdr__ring{stroke:var(--clay);fill:none;stroke-width:3.6}
.fdr__ring--in{stroke-width:1.4}
.fdr__arc{fill:var(--clay);font-family:var(--sans);font-weight:700;font-size:13.5px;letter-spacing:2.2px}
.fdr__chk{stroke:var(--clay);fill:none;stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round}
.fdr__word{fill:var(--clay);font-family:var(--sans);font-weight:800;font-size:33px;letter-spacing:-1px;text-anchor:middle}
.fdr.is-in .fdr__stamp{animation:stampIn .7s var(--e-out) .55s both}
@keyframes stampIn{
  0%{opacity:0;transform:rotate(-32deg) scale(2.1)}
  55%{opacity:1;transform:rotate(-8deg) scale(.9)}
  72%{transform:rotate(-13deg) scale(1.05)}
  100%{opacity:1;transform:rotate(-11deg) scale(1)}
}
@media(max-width:780px){
  .fdr__stamp{left:auto;right:4%;top:auto;bottom:26%;width:clamp(110px,30vw,150px)}
}
@media(prefers-reduced-motion:reduce){
  .fdr__stamp{opacity:1;transform:rotate(-11deg) scale(1);animation:none}
}

.fdr__quote{grid-column:1/9;margin:0;font-weight:500;letter-spacing:-.025em;
  font-size:clamp(1.9rem,4.6vw,4.2rem);line-height:1.05}
.fdr__ln{display:block;overflow:hidden}
.fdr__ln>span{display:block;transform:translateY(112%);transition:transform 1s var(--e-soft)}
.fdr__ln>span em{font-style:normal;color:var(--clay)}
.fdr.is-in .fdr__ln>span{transform:none}
.fdr__quote .fdr__ln:nth-child(2)>span{transition-delay:.07s}
.fdr__quote .fdr__ln:nth-child(3)>span{transition-delay:.14s}
.fdr__quote .fdr__ln:nth-child(4)>span{transition-delay:.21s}

/* портрет — чистый кадр, без уголков; вскрывается клип-вайпом снизу вверх */
.fdr__portrait{grid-column:9/13;grid-row:2/4;position:relative;aspect-ratio:4/5;
  background:var(--bone-2);overflow:hidden;
  clip-path:inset(100% 0 0 0);transition:clip-path 1.15s var(--e-soft) .12s}
.fdr.is-in .fdr__portrait{clip-path:inset(0 0 0 0)}
.fdr__portrait::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(45deg,transparent 0 13px,var(--line) 13px 14px)}
.fdr__cap{position:absolute;top:clamp(14px,1.4vw,20px);left:clamp(14px,1.4vw,20px);color:var(--muted)}
.fdr__mock{position:absolute;inset:0;display:grid;place-items:center;
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d);font-weight:600}

/* подпись — тихая, с прочерчивающимся hairline сверху */
.fdr__foot{grid-column:1/9;position:relative;display:flex;flex-direction:column;gap:8px;
  padding-top:clamp(20px,2vw,30px);
  opacity:0;transform:translateY(16px);transition:opacity .9s var(--e-out) .26s,transform .9s var(--e-out) .26s}
.fdr.is-in .fdr__foot{opacity:1;transform:none}
.fdr__foot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line-strong);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e-out) .12s}
.fdr.is-in .fdr__foot::before{transform:scaleX(1)}
.fdr__name{font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:600;letter-spacing:-.01em}
.fdr__meta{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

@media(max-width:760px){
  .fdr{grid-template-columns:1fr}
  .fdr__quote,.fdr__foot{grid-column:1}
  .fdr__portrait{grid-column:1;grid-row:auto;aspect-ratio:4/5;max-height:62vh;justify-self:stretch}
}
@media(prefers-reduced-motion:reduce){
  .fdr__ln>span{transform:none;transition:none}
  .fdr__portrait{clip-path:none;transition:none}
  .fdr__foot{opacity:1;transform:none;transition:none}
  .fdr__foot::before{transform:scaleX(1);transition:none}
}

/* ============================================================
   clients / logos
   ============================================================ */
.clients__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:16px;margin-bottom:clamp(28px,3vw,44px)}
.clients__head h2{font-size:var(--fs-serif-l);font-family:var(--serif);font-weight:400}
.logos{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line)}
.logo{aspect-ratio:16/8;display:grid;place-items:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  color:var(--muted);position:relative;transition:background .4s}
.logo:hover{background:var(--bone-2)}
.logo small{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase}
@media(min-width:640px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.logos{grid-template-columns:repeat(5,1fr)}}

/* ============================================================
   testimonial
   ============================================================ */
.quote{text-align:center;max-width:24ch;margin-inline:auto}
.quote__mark{font-family:var(--serif);font-style:normal;font-size:clamp(4rem,8vw,7rem);color:var(--clay);line-height:.4;display:block;margin-bottom:.2em}
.quote blockquote{font-family:var(--serif);font-size:var(--fs-serif-xl);line-height:1.14;font-weight:400}
.quote blockquote em{font-style:normal;color:var(--clay)}
.quote__by{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(30px,4vw,48px)}
.quote__ava{width:54px;height:54px;border-radius:50%;flex:none}
.quote__by .nm{font-weight:500}
.quote__by .rl{color:var(--muted);font-size:.9rem}

/* ============================================================
   penultimate — let's work (echo of e-b pre-footer CTA)
   ============================================================ */
.lets{padding-block:clamp(80px,13vh,180px)}
.lets__top{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,72px);align-items:end}
.lets__lead{display:flex;flex-direction:column;gap:clamp(26px,3vw,40px)}
.lets__h{font-size:var(--fs-display);font-weight:700;letter-spacing:-.035em;line-height:.98}
.lets__h em{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--clay);letter-spacing:-.01em}
.lets__pill{align-self:flex-start;display:inline-flex;align-items:center;gap:.6em;
  font-size:clamp(.95rem,1.4vw,1.15rem);font-weight:500;letter-spacing:.01em;
  border:1px solid var(--ink);border-radius:100px;padding:14px 26px;
  transition:background .4s var(--e-out),color .4s var(--e-out),padding .4s var(--e-out)}
.lets__pill:hover{background:var(--clay);border-color:var(--clay);color:var(--bone);padding-inline:32px}
.lets__pill .arr{transition:transform .4s var(--e-out)}
.lets__pill:hover .arr{transform:translate(3px,-3px)}
.lets__act{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
/* risk/consent caption — one line, aligned to the button block */
.lets__risk{font-size:var(--fs-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
@media(max-width:440px){.lets__risk{white-space:normal;letter-spacing:.06em}}
.lets__media{position:relative;min-height:clamp(330px,44vw,480px)}
.lets__ph{position:absolute;overflow:hidden}
.lets__ph--a{left:0;top:0;width:62%;aspect-ratio:4/5;z-index:1}
.lets__ph--b{right:0;bottom:0;width:50%;aspect-ratio:1/1;z-index:2}
.lets__bot{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);
  border-top:1px solid var(--line);margin-top:clamp(40px,6vw,72px);padding-top:clamp(26px,3vw,40px)}
.lets__manifesto{display:flex;gap:14px;color:var(--muted);max-width:50ch;font-size:var(--fs-lead);line-height:1.5}
.lets__star{color:var(--clay);font-size:1.1em;line-height:1.4;flex:none}
.lets__mail{display:inline-flex;align-items:center;gap:.4em;font-size:clamp(1.4rem,3.4vw,2.6rem);
  font-weight:600;letter-spacing:-.03em;position:relative;width:fit-content}
.lets__mail::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-out)}
.lets__mail:hover::after{transform:scaleX(1)}
.lets__mail .arr{display:inline-block;transition:transform .4s var(--e-out)}
.lets__mail:hover .arr{transform:translate(4px,-4px)}
@media(min-width:900px){
  .lets__top{grid-template-columns:1.05fr .95fr}
  .lets__bot{grid-template-columns:1fr auto;align-items:center}
}

/* — обычная форма заявки (заменила чат-бриф) — */
.leadform{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.leadform__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px)}
.leadform__field{display:flex;flex-direction:column;gap:8px}
.leadform__lab{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);font-weight:600}
.leadform__lab i{color:var(--clay)}
.leadform__inp{width:100%;padding:15px 18px;background:#FBF8F2;border:1px solid var(--line);border-radius:14px;
  font:inherit;font-size:clamp(.98rem,1.1vw,1.06rem);color:var(--ink);transition:border-color .25s,box-shadow .25s}
.leadform__inp::placeholder{color:var(--muted-d);opacity:.75}
.leadform__inp:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 3px rgba(47,107,255,.14)}
.leadform__inp.is-bad{border-color:#BB5836;box-shadow:0 0 0 3px rgba(187,88,54,.16)}
.leadform__btn{margin-top:4px;width:100%;justify-content:center;font-size:clamp(1rem,1.2vw,1.1rem);padding-block:17px;
  background:var(--clay);color:#fff;border:1px solid var(--clay)}
.leadform__btn:hover{background:#2258e0;border-color:#2258e0;padding-inline:32px}
.leadform__note{font-size:.85rem;color:var(--muted-d);text-align:center;white-space:nowrap}
.leadform__done{margin-top:2px;padding:15px 18px;background:var(--clay);color:#fff;border-radius:14px;font-weight:600;text-align:center}
.leadform.is-sent .leadform__btn,.leadform.is-sent .leadform__note{display:none}
@media(max-width:560px){.leadform__row{grid-template-columns:1fr}.leadform__note{white-space:normal}}

/* ============================================================
   footer
   ============================================================ */
/* ===== editorial footer (light, blue ink — ref: redis.agency sign-off) ===== */
.ft{position:relative;overflow:hidden;background:var(--bone);color:var(--clay);
  display:flex;flex-direction:column;min-height:clamp(440px,54vw,720px);
  padding:clamp(22px,3vw,40px) var(--pad) clamp(10px,1.4vw,22px);isolation:isolate}
/* top meta row */
.ft__meta{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(14px,2vw,30px);flex-wrap:wrap;
  font-size:var(--fs-label);font-weight:600;letter-spacing:.01em;line-height:1.45;text-transform:none}
.ft__m{color:var(--clay)}
.ft__m--c{text-decoration:none;transition:opacity .3s}
.ft__m--c:hover{opacity:.6;text-decoration:underline;text-underline-offset:3px}
.ft__m--d{text-align:right}
.ft__mark{flex:0 0 auto;color:var(--clay);display:inline-flex;align-items:center;justify-content:center}
/* brush line + heart */
.ft__line{position:absolute;left:0;right:0;top:clamp(56px,8vw,104px);z-index:2;pointer-events:none}
.ft__line svg{display:block;width:100%;height:auto;overflow:visible}
.ft__halo{stroke:var(--bone);stroke-width:28;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ft__stroke{stroke:var(--clay);stroke-width:12.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
/* giant wordmark — pushed to the bottom of the tall footer */
.ft__big{position:relative;z-index:1;display:flex;justify-content:center;margin-top:auto}
.ft__big span{font-weight:700;letter-spacing:-.055em;line-height:.78;white-space:nowrap;
  font-size:clamp(3rem,23.5vw,22rem);color:var(--clay)}
.ft__big em{font-style:normal;font-weight:700;color:var(--clay)}
/* slim bottom */
.ft__bot{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px 22px;
  flex-wrap:wrap;margin-top:clamp(14px,1.8vw,26px);color:var(--clay);font-size:.8rem;font-weight:600}
.ft__soc{display:inline-flex;gap:18px}
.ft__soc a,.ft__top{color:var(--clay);text-decoration:none;transition:opacity .3s}
.ft__soc a:hover,.ft__top:hover{opacity:.6}
@media(max-width:680px){
  .ft__meta{gap:14px 18px}
  .ft__m--d{text-align:left}
  .ft__line{bottom:clamp(48px,17vw,120px)}
  .ft__bot{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   section head (index eyebrow + title) — used across new blocks
   ============================================================ */
.sec-head{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px);margin-bottom:clamp(34px,5vw,64px)}
.sec-idx{color:var(--clay)}
.sec-title{font-size:var(--fs-display);font-weight:600;letter-spacing:-.03em;line-height:.95}
.sec-title em{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--clay)}
.cnt{font-style:normal;font-variant-numeric:tabular-nums}

/* ---------- manifesto lead + 3 steps ---------- */
.intro__lead{display:flex;flex-direction:column;gap:clamp(16px,2vw,26px)}
/* ============================================================
   steps — sticky scrollytelling (active step large, others dim,
   progress rail). Falls back to a clean stacked list without JS.
   ============================================================ */
.steps{position:relative;margin-top:clamp(46px,7vw,92px);padding-top:clamp(40px,5vw,64px)}
.steps__wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(26px,5vw,72px);align-items:center}
.steps__stage{position:relative;min-width:0}
.jstep{position:relative;display:flex;flex-direction:column}
.jstep + .jstep{margin-top:clamp(40px,6vh,72px)}
.jstep__ghost{display:none} /* ghost numerals removed per request */
.jstep__kick{color:var(--clay);margin-top:.5em}
.jstep__t{font-size:clamp(2.4rem,4.4vw,4.4rem);font-weight:680;letter-spacing:-.01em;line-height:1.02;
  text-transform:uppercase;margin-top:.16em}
.jstep__t em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--clay)}
.jstep__d{color:var(--muted);max-width:44ch;margin-top:clamp(12px,1.4vw,18px);font-size:var(--fs-lead);line-height:1.5}
/* supporting tag-pills + blue doodle accent — чтобы шаг не выглядел пустым */
.jstep__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,32px)}
.jstep__cta{margin-top:clamp(22px,2.6vw,34px)}
.jstep__tags span{display:inline-flex;align-items:center;padding:8px 16px;border-radius:99px;
  border:1px solid var(--line);background:#FBF8F2;font-size:.82rem;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.jstep__deco{position:absolute;right:0;bottom:7%;width:clamp(118px,15vw,225px);height:auto;
  pointer-events:none;z-index:-1;opacity:.9;transform:rotate(-7deg)}
.jstep__deco--sw{bottom:auto;top:8%;transform:rotate(4deg)}
@media(max-width:760px){.jstep__deco{width:clamp(90px,22vw,140px);right:0;bottom:auto;top:0;opacity:.8}}
/* founder portrait card — same look as hero collage frames (bone card, big shadow, diagonal tilt) */
/* wrapper holds the tilted card + a doodle peeking from behind its left edge */
.jstep__photowrap{position:absolute;right:2%;top:50%;transform:translateY(-50%);
  width:clamp(210px,23vw,330px);aspect-ratio:3/4;z-index:1}
.jstep__photo{position:relative;z-index:1;width:100%;height:100%;transform:rotate(-5deg);
  background:var(--bone-2);overflow:hidden;isolation:isolate;
  box-shadow:0 40px 72px -34px rgba(23,20,17,.58);
  transition:transform .7s var(--e-out)}
.jstep__photo video,.jstep__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* founder video is a heavily-compressed clip — halftone/riso treatment turns the low quality into
   an intentional print look and ties it to the brand blue (grayscale kills colour banding, dot
   texture breaks up the compression blocks). Layers are CSS-only, file weight unchanged. */
.jstep__vid{filter:grayscale(1) contrast(1.32) brightness(1.1)}
.jstep__photo--fx::before,.jstep__photo--fx::after{content:"";position:absolute;inset:0;pointer-events:none}
.jstep__photo--fx::before{z-index:2;
  background-image:radial-gradient(circle at 50% 50%,#0b1228 42%,transparent 46%);
  background-size:3px 3px;mix-blend-mode:soft-light;opacity:.9}
.jstep__photo--fx::after{z-index:3;
  background:linear-gradient(150deg,color-mix(in srgb,var(--clay) 50%,transparent),color-mix(in srgb,var(--clay) 12%,transparent));
  mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){.jstep__vid{filter:grayscale(1) contrast(1.32) brightness(1.1)}}
/* hand-drawn doodle tucked BEHIND the card (z-index below the card) so it peeks out on the left,
   partly hidden. Sizes are % of the wrapper so it scales the same on mobile. */
.jstep__fxdoodle{position:absolute;z-index:0;pointer-events:none;height:auto;
  width:66%;left:-33%;top:61%;transform:translateY(-50%) rotate(-14deg);
  filter:drop-shadow(0 6px 13px rgba(11,18,40,.18))}
@media(min-width:761px){.jstep--has-photo{padding-right:clamp(250px,27vw,380px)}}
@media(max-width:760px){
  /* relative (not static) so the absolutely-positioned doodle anchors to the CARD, not the section */
  .jstep__photowrap{position:relative;align-self:flex-start;width:clamp(140px,40vw,200px);
    aspect-ratio:3/4;right:auto;top:auto;transform:none;margin-bottom:clamp(16px,3vw,24px)}
  .jstep__photo{transform:rotate(-4deg)}
  .jstep--has-photo{padding-right:0}
  /* on mobile the card sits far left; peek from behind its RIGHT edge into the empty space toward the
     screen centre — bigger, vertically centred so it never touches the heading below */
  .jstep__fxdoodle{width:74%;left:63%;top:52%}
}

/* audit checklist — правая инфографика шага «Покажу, что мешает» (симметрично видео Марго): */
/* строки-диагностика соцсетей «сейчас → после», серое (✕) → синее (✓) */
.audit{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0;
  width:clamp(300px,32vw,410px);background:#FBF8F2;border:1px solid var(--line);border-radius:12px;
  padding:clamp(18px,1.7vw,26px);box-shadow:0 40px 72px -40px rgba(23,20,17,.5)}
.audit__ttl{display:block;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--clay);padding-bottom:clamp(12px,1vw,16px);border-bottom:1px solid var(--line)}
.audit__rows{list-style:none;display:flex;flex-direction:column}
.audit__row{display:grid;grid-template-columns:minmax(66px,26%) minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(6px,.9vw,13px);padding:clamp(11px,1vw,15px) 0;border-bottom:1px solid var(--line)}
.audit__row:last-child{border-bottom:0;padding-bottom:0}
.audit__k{font-weight:600;letter-spacing:-.01em;color:var(--ink);font-size:clamp(.9rem,1vw,1.02rem)}
.audit__bad,.audit__good{display:inline-flex;align-items:center;gap:6px;font-size:clamp(.82rem,.95vw,.96rem);white-space:nowrap}
.audit__bad{color:var(--muted)}
.audit__bad::before{content:"✕";font-size:.82em;color:var(--muted)}
.audit__good{color:var(--clay);font-weight:600}
.audit__good::before{content:"✓";font-size:.84em;color:var(--clay)}
.audit__arr{justify-self:center;font-style:normal;color:var(--line-strong)}
@media(min-width:761px){.jstep--has-audit{padding-right:clamp(340px,36vw,460px)}}
@media(max-width:760px){
  .jstep--has-audit{padding-right:0}
  .audit{position:relative;right:auto;top:auto;transform:none;align-self:flex-start;
    width:100%;max-width:430px;margin-top:clamp(18px,4vw,26px)}
}

/* progress rail */
.steps__rail{position:relative;display:flex;flex-direction:column;gap:clamp(22px,3.4vh,46px);padding-left:28px}
.steps__line{position:absolute;left:4px;top:7px;bottom:7px;width:1px;background:var(--line)}
.steps__rfill{position:absolute;left:0;top:0;width:1px;height:0;background:var(--clay);transition:height .3s var(--e-out)}
.steps__rdot{position:relative;min-height:13px;transition:color .4s}
.steps__rdot b{display:none} /* numbers removed — dots only */
.steps__rdot::before{content:"";position:absolute;left:-28px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--bone);border:1px solid var(--line-strong);transition:all .4s var(--e-out)}
.steps__rdot.is-active{color:var(--ink)}
.steps__rdot.is-active::before{background:var(--clay);border-color:var(--clay);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--clay) 22%,transparent)}

/* live (JS + motion ok): pin the panel, swap active step on scroll */
.steps--live{min-height:220vh;border-top:0;padding-top:0;margin-top:clamp(40px,6vw,80px)}
.steps--live .steps__pin{position:sticky;top:0;height:100vh;display:grid;align-items:center;overflow:hidden}
.steps--live .steps__stage{min-height:clamp(320px,52vh,520px)}
.steps--live .jstep{position:absolute;inset:0;justify-content:center;
  opacity:0;transform:translateY(26px);transition:opacity .6s var(--e-out),transform .7s var(--e-out);pointer-events:none}
.steps--live .jstep + .jstep{margin-top:0}
.steps--live .jstep.is-active{opacity:1;transform:none;pointer-events:auto}
.steps--live .jstep__ghost{font-size:clamp(6rem,17vw,15rem);margin-bottom:-.16em}

@media(max-width:640px){
  .steps__rail{padding-left:24px;gap:18px}
  .steps__rdot::before{left:-24px}
  .steps--live{min-height:200vh}
}

/* ---------- pains ---------- */
/* «Узнали себя?» — мысли-сообщения, всплывают по очереди со своей стороны на скролле */
.msgs{display:flex;flex-direction:column;gap:clamp(14px,2vw,26px);max-width:1000px;margin-inline:auto}
.msg{max-width:min(82%,560px);will-change:transform,opacity;
  transition:opacity .55s var(--e-out),transform .6s cubic-bezier(.34,1.28,.5,1)}
.msg--l{align-self:flex-start;transform:translateX(-44px) scale(.92);opacity:0}
.msg--r{align-self:flex-end;transform:translateX(44px) scale(.92);opacity:0}
.msg.is-in{opacity:1;transform:none}
.msg p{margin:0;background:#FBF8F2;border:1px solid var(--line);border-radius:24px;
  padding:clamp(15px,1.5vw,23px) clamp(20px,2vw,30px);
  font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.34;letter-spacing:-.01em;color:var(--ink);
  box-shadow:0 26px 52px -34px rgba(23,20,17,.45)}
.msg--l p{border-bottom-left-radius:7px}
.msg--r p{border-bottom-right-radius:7px}
/* реплика-ответ matchmar — синий акцент */
.msg--reply p{background:var(--clay);border-color:var(--clay);color:var(--bone);font-weight:600}
.msg__arr{display:inline-block;margin-left:.2em;transition:transform .4s var(--e-out)}
.msg--reply:hover .msg__arr{transform:translate(3px,-3px)}
/* пузырь «бесплатно до старта» в блоке процесса — синий акцент, всплывает по скроллу */
.msg--free{margin-top:clamp(26px,4vw,56px);max-width:min(90%,640px)}
.msg--free p{background:var(--clay);border-color:var(--clay);color:var(--bone);font-weight:500}
@media(max-width:640px){.msg{max-width:90%}}

/* ---------- numbers / facts cloud ---------- */
.facts{display:flex;flex-wrap:wrap;gap:clamp(10px,1vw,16px)}
.fact{border:1px solid var(--line);border-radius:100px;padding:12px 22px;font-size:clamp(1rem,1.3vw,1.18rem);
  color:var(--ink);display:inline-flex;align-items:center;gap:.5em;line-height:1.15}
.fact b{align-self:center}
.fact b{font-weight:700;font-size:1.4em;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fact--num{border-color:var(--line-strong)}
.fact--accent{background:var(--clay);border-color:var(--clay);color:var(--bone)}

/* ---------- audience ---------- */
/* ===== AUDIENCE — pinned editorial backdrop + ICP-карточки едут по скроллу ===== */
/* Механика 1:1 с блоком «Команда» (A-Cold Vision): секция высокая, .aud__pin липнет  */
/* на 100vh, фон-типографика зафиксирована, слой карточек проезжает вертикально (JS).  */
.aud{position:relative;height:180vh;background:var(--bone)}
.aud__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bone)}

/* — фиксированный фоновый слой с типографикой — */
.aud__bg{position:absolute;inset:0;z-index:1}
.aud__idx{position:absolute;top:clamp(20px,3.4vh,40px);left:var(--pad);color:var(--clay)}
.aud__head{position:absolute;font-weight:700;line-height:.86;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--ink)}
.aud__head--top{top:clamp(46px,8vh,96px);left:var(--pad);font-size:clamp(48px,9vw,150px)}
.aud__head--bot{bottom:clamp(40px,7vh,84px);right:var(--pad);text-align:right;font-size:clamp(52px,10vw,176px)}

/* интро — колонка справа сверху */
.aud__intro{position:absolute;top:clamp(46px,8vh,96px);right:var(--pad);
  width:clamp(240px,26%,440px)}
.aud__lead{margin-bottom:1em;font-size:clamp(1rem,1.2vw,1.25rem);font-weight:600;
  letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.aud__note{font-size:clamp(.92rem,1.02vw,1.05rem);line-height:1.5;color:#4A4339}

/* мини-факты — слева снизу, ровный блок */
.aud__hints{position:absolute;left:var(--pad);bottom:clamp(36px,6.5vh,80px);
  max-width:clamp(220px,26%,400px);font-size:clamp(.86rem,1vw,1rem);color:#4A4339}
.aud__hints-h{margin-bottom:.9em;color:var(--ink);font-weight:600;letter-spacing:.01em}
.aud__hints p{margin:0;line-height:1.75}
.aud__hints b{color:var(--ink);font-weight:600}

.aud__dot{position:absolute;top:clamp(22px,3.6vh,42px);right:var(--pad);
  width:7px;height:7px;border-radius:50%;background:var(--clay)}

/* — слой карточек — */
/* нижний фейд: карточка, въезжающая снизу, растворяется у нижней кромки и не       */
/* перекрывает слово «работаем» (оно на фоновом слое читается сквозь прозрачность).  */
.aud__cards{position:absolute;inset:0;z-index:2;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 80%);
  mask-image:linear-gradient(to bottom,#000 66%,transparent 80%)}
.aud-card{position:absolute;left:var(--x);top:0;width:var(--w);will-change:transform;pointer-events:auto;
  background:var(--clay);color:var(--bone);border:1px solid rgba(255,255,255,.18);border-radius:8px;
  overflow:hidden;box-shadow:0 50px 90px -52px rgba(47,107,255,.75)}
/* медиа-зона: однотонный голубой (фон карты), премиум-инфографика белой линией */
.aud-card__media{position:relative;aspect-ratio:16/10;background:transparent;display:grid;place-items:center;
  padding:clamp(16px,1.6vw,26px)}
.aud-card__doodle{position:relative;width:84%;max-width:300px;height:auto;color:var(--bone)}
.aud-card__doodle .ln{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.aud-card__doodle .dash{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:2.5 8}
.aud-card__doodle .fil{fill:currentColor;stroke:none}
.aud-card__doodle .soft{fill:rgba(255,255,255,.42);stroke:none}
.aud-card__label{padding:clamp(18px,1.5vw,26px)}
.aud-card__kicker{display:block;margin-bottom:.7em;font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.82);font-weight:600}
.aud-card__name{font-size:clamp(1.2rem,1.7vw,1.7rem);font-weight:600;letter-spacing:-.02em;line-height:1.05;color:var(--bone)}
.aud-card__facts{list-style:none;display:flex;flex-direction:column;gap:.5em;margin-top:.9em}
.aud-card__facts li{position:relative;padding-left:15px;font-size:clamp(.88rem,1vw,1rem);
  line-height:1.4;color:rgba(255,255,255,.85)}
.aud-card__facts li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--bone)}
/* бабл-диалог в карточке: боль клиента → что даём (ответ matchmar) */
.aud-card__label{padding-bottom:clamp(10px,1vw,16px)}
.aud-card__chat{display:flex;flex-direction:column;gap:9px;
  padding:0 clamp(18px,1.5vw,26px) clamp(18px,1.5vw,26px)}
.audb{max-width:93%;padding:10px 14px;font-size:clamp(.86rem,.98vw,.99rem);
  line-height:1.36;border-radius:16px}
.audb--pain{align-self:flex-start;background:rgba(255,255,255,.15);
  color:rgba(255,255,255,.92);border-bottom-left-radius:5px}
.audb--ans{align-self:flex-end;background:var(--bone);color:var(--ink);
  font-weight:600;border-bottom-right-radius:5px;box-shadow:0 12px 26px -16px rgba(0,0,0,.55)}

@media(prefers-reduced-motion:reduce){.aud-card{transition:none}}

/* мобайл: карточки в один поток по центру, фон-типографика компактнее */
@media(max-width:760px){
  .aud{height:auto;background:var(--bone)}
  .aud__pin{position:static;height:auto;overflow:visible;padding:clamp(64px,12vh,110px) var(--pad)}
  /* порядок: заголовок целиком → интро → карточки → сноска «не ваш случай» */
  .aud__pin{display:flex;flex-direction:column}
  .aud__bg{position:relative;inset:auto;display:contents}
  .aud__idx{position:static;display:block;margin-bottom:10px;order:1}
  .aud__head{position:static;display:block;line-height:.88;color:var(--ink);-webkit-text-stroke:0;background:none;-webkit-background-clip:border-box;background-clip:border-box}
  .aud__head--top{font-size:13.4vw;order:2}
  .aud__head--bot{font-size:13.4vw;text-align:left;order:3}
  .aud__intro{position:static;width:auto;margin:20px 0 0;order:4}
  /* сноска «не ваш случай» отделена линией, чтобы не сливалась в полотно текста */
  .aud__hints{position:static;max-width:none;order:6;
    margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line)}
  .aud__dot{display:none}
  .aud__cards{position:static;inset:auto;order:5;display:flex;flex-direction:column;gap:18px;margin-top:22px;
    -webkit-mask-image:none;mask-image:none}
  .aud-card{position:relative;left:auto;top:auto;width:100% !important;transform:none !important}
  .aud__cards{gap:clamp(18px,5vw,28px)}
  /* карточка на мобиле: без дубля «01 · эксперты / Эксперты», диалог крупнее и читаемее */
  .aud-card__kicker{margin-bottom:0;font-size:.68rem}
  .aud-card__kicker .aud-card__kicker-w{display:none}
  .aud-card__label{padding:18px 18px 12px}
  .aud-card__name{font-size:1.32rem}
  .aud-card__chat{gap:12px;padding:0 18px 20px}
  .audb{max-width:96%;padding:11px 15px;font-size:.95rem;line-height:1.42}
  .audb--pain{background:rgba(255,255,255,.2);color:#fff}
}

/* ---------- services: price + fit (extends existing svc) ---------- */
.svc__bar{grid-template-columns:auto 1fr auto auto}
.svc__price{font-family:var(--serif);font-style:normal;font-size:clamp(.95rem,1.4vw,1.2rem);color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.svc__price small{font-size:.7em;color:var(--muted)}
.svc__fit{color:var(--ink);font-weight:500;margin-top:14px;padding-left:16px;border-left:2px solid var(--clay);max-width:50ch}
@media(max-width:680px){
  .svc__bar{grid-template-columns:auto 1fr auto}
  .svc__price{display:none}
}
.approach__free{display:block;margin-top:clamp(28px,4vw,48px);max-width:60ch;color:var(--muted)}

/* ---------- versus — «Контент-календарь» (скролл: ячейки заливаются) ---------- */
.vs{display:grid;grid-template-columns:1fr;gap:var(--gut);--p:1;align-items:start}
@media(min-width:820px){.vs{grid-template-columns:1fr 1fr}}
.vs__col{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:3px;
  padding:clamp(26px,3vw,44px);background:#FBF8F2;display:flex;flex-direction:column}
.vs__col--team{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}

/* header row: title + status */
.vs__top{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(14px,2vw,28px);
  margin-bottom:clamp(18px,2.2vw,26px);padding-bottom:16px;border-bottom:1px solid var(--line)}
.vs__col--team .vs__top{border-color:var(--line-d)}
.vs__h{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.vs__col--team .vs__h em{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--clay-soft)}
.cal__status{flex:none;white-space:nowrap;font-size:.6rem;letter-spacing:.16em}
.cal__status--solo{color:var(--muted)}
.cal__status--team{color:var(--clay-soft)}

/* calendar grid (Пн–Пт × 4 недели) */
.cal{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,.7vw,10px)}
.cal__dow{font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted-d);padding-bottom:2px}
.cal__cell{aspect-ratio:1;border-radius:4px;background:transparent;border:1px solid var(--line);
  transition:background .45s var(--e-out),border-color .45s var(--e-out)}
.vs__col--team .cal__cell{border-color:var(--line-d)}
/* content-type fills — оттенки синего, по палитре */
.cal__cell[data-t="r"],.cal__legend span[data-t="r"]{--c:var(--clay)}
.cal__cell[data-t="p"],.cal__legend span[data-t="p"]{--c:var(--clay-soft)}
.cal__cell[data-t="s"],.cal__legend span[data-t="s"]{--c:#BCCEFF}
/* base (no-JS / reduced-motion) = финальное состояние: заполнено */
.cal__cell[data-t]{background:var(--c);border-color:var(--c)}
.cal__cell--hole{background:transparent;border-style:dashed;border-color:var(--line-strong);opacity:.65}
/* live: пусто → заливается на скролле */
.vs--live .cal__cell[data-t]{background:transparent;border-color:var(--line)}
.vs--live .vs__col--team .cal__cell[data-t]{border-color:var(--line-d)}
.vs--live .cal__cell[data-t].is-on{background:var(--c);border-color:var(--c)}

/* «бегунок месяца» — вертикальный маркер «сегодня» едет по скроллу, за ним загораются ячейки */
.cal__runner{position:absolute;top:-3px;bottom:-3px;left:0;width:2px;z-index:3;
  color:var(--clay);background:currentColor;border-radius:2px;opacity:0;pointer-events:none}
.vs__col--team .cal__runner{color:var(--clay-soft)}
.vs--live .cal__runner{opacity:1}
.cal__runner::after{content:"";position:absolute;top:-3px;left:50%;width:7px;height:7px;border-radius:50%;
  transform:translateX(-50%);background:currentColor;box-shadow:0 0 12px 2px currentColor}
.cal__runner b{position:absolute;top:-16px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:currentColor}

.cal__note{display:block;margin-top:12px;font-size:.6rem;letter-spacing:.12em;color:var(--muted)}
.cal__legend{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,20px);margin-top:14px}
.cal__legend span{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;letter-spacing:.01em;color:var(--muted-d)}
.cal__legend span::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--c)}

/* list */
.vs__list{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,16px);margin-top:clamp(22px,2.6vw,32px)}
.vs__list li{position:relative;padding-left:28px;line-height:1.4;color:var(--muted)}
.vs__col--team .vs__list li{color:var(--on-dark)}
.vs__list li::before{position:absolute;left:0;top:-.02em;font-family:var(--serif);font-style:normal;font-size:1.2em}
.vs__col--solo .vs__list li::before{content:"✕";color:var(--muted)}
.vs__col--team .vs__list li::before{content:"✓";color:var(--clay-soft)}

/* verdict tag (appears at the end) */
.vs__verdict{align-self:flex-end;margin-top:clamp(18px,2.4vw,30px);
  font-size:.62rem;letter-spacing:.22em;padding:5px 12px;border-radius:99px;opacity:0;
  transform:translateY(6px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.vs__verdict--solo{color:var(--muted-d);border:1px solid var(--line)}
.vs__verdict--team{color:var(--ink);background:var(--clay-soft)}
.vs--live .vs__col--solo.is-spent .vs__verdict--solo,
.vs--live .vs__col--team.is-strong .vs__verdict--team{opacity:1;transform:none}

/* ---------- cases (A → B rows) ---------- */
.cases{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.crow{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,40px);
  padding-block:clamp(34px,4vw,60px);border-bottom:1px solid var(--line);align-items:start}
.crow__num{font-family:var(--serif);font-style:normal;font-size:clamp(2.2rem,4vw,3.4rem);color:var(--clay);line-height:1}
.crow__ph{aspect-ratio:4/3}
.crow__tag{color:var(--muted)}
.crow__title{font-size:clamp(1.7rem,3.4vw,2.8rem);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin:8px 0 22px}
.crow__ab{display:grid;grid-template-columns:1fr;gap:18px}
.crow__ab p{color:var(--muted);max-width:52ch;line-height:1.5}
.crow__ab span{display:block;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay);margin-bottom:6px;font-weight:500}
@media(min-width:880px){
  .crow{grid-template-columns:84px 290px 1fr;gap:clamp(28px,3vw,56px);align-items:center}
  .crow__ab{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)}
}
.cases__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(34px,4vw,56px)}
.cases__pill{display:inline-flex;align-items:center;gap:.6em;font-size:clamp(.95rem,1.4vw,1.1rem);
  font-weight:500;border:1px solid var(--ink);border-radius:100px;padding:13px 26px;
  transition:background .4s var(--e-out),color .4s var(--e-out),padding .4s var(--e-out)}
.cases__pill:hover{background:var(--clay);border-color:var(--clay);color:var(--bone);padding-inline:32px}
.cases__pill .arr{transition:transform .4s var(--e-out)}
.cases__pill:hover .arr{transform:translate(3px,-3px)}

/* ---------- cases grid (placeholders until real Matchmar cases) ---------- */
.cases__intro{color:var(--muted);max-width:62ch;font-size:var(--fs-lead);line-height:1.5;
  margin-bottom:clamp(30px,4vw,52px)}
/* case cards — photo frame with bubbles (top-left), small desc (top-right), title (bottom-left)
   layout alternates: two side-by-side, then one full-width wide card (ref: e-b) */
.cases-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,1.7vw,26px)}
@media(min-width:760px){.cases-grid{grid-template-columns:1fr 1fr}.case--wide{grid-column:1 / -1}}
.case{position:relative;overflow:hidden;display:block;
  min-height:clamp(300px,34vw,460px);padding:clamp(20px,1.8vw,30px);
  transition:transform .6s var(--e-out),box-shadow .6s var(--e-out);box-shadow:0 30px 60px -42px rgba(23,20,17,.5)}
.case--wide{min-height:clamp(260px,26vw,380px)}
.case:hover{transform:translateY(-6px);box-shadow:0 44px 78px -40px rgba(23,20,17,.6)}
/* real client photo — unified grayscale + scrim for legible overlay text */
.case__media{position:absolute;inset:0;z-index:0;background:var(--ink);overflow:hidden}
.case__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.9);transition:transform .7s var(--e-out),filter .5s}
.case:hover .case__img{transform:scale(1.04)}
.case__media::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,9,8,.52) 0%,rgba(10,9,8,.12) 34%,rgba(10,9,8,.16) 58%,rgba(10,9,8,.84) 100%)}
/* bubbles — top-left */
.case__bubbles{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;max-width:70%}
.bub{display:inline-flex;align-items:center;padding:7px 15px;border-radius:100px;
  background:#FBF8F2;border:1px solid var(--line);box-shadow:0 8px 20px -14px rgba(23,20,17,.4);
  font-size:.76rem;font-weight:500;letter-spacing:.01em;color:var(--ink);white-space:nowrap}
/* small description — top-right */
.case__desc{position:absolute;z-index:2;top:clamp(20px,1.8vw,30px);right:clamp(20px,1.8vw,30px);
  max-width:min(30ch,46%);text-align:right;font-size:clamp(.78rem,.92vw,.92rem);line-height:1.45;
  color:rgba(236,231,222,.94);text-shadow:0 1px 14px rgba(0,0,0,.4)}
/* синий акцент в кейсах был плохо виден на светлых участках фото — светлее + собственная тень */
.case__desc b{font-weight:700;color:#A9C4FF;text-shadow:0 1px 12px rgba(0,0,0,.6)}
/* big title — bottom-left */
.case__t{position:absolute;z-index:2;left:clamp(20px,1.8vw,30px);bottom:clamp(16px,1.6vw,26px);
  margin:0;font-size:clamp(1.7rem,2.8vw,3.1rem);font-weight:680;letter-spacing:-.02em;line-height:1;
  color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
@media(max-width:520px){
  .case__bubbles{max-width:100%}
  .case__desc{position:relative;top:auto;right:auto;max-width:100%;text-align:left;margin-top:14px}
  .case__t{position:relative;left:auto;bottom:auto;margin-top:auto;padding-top:clamp(40px,16vw,80px)}
  .case{display:flex;flex-direction:column;min-height:clamp(320px,96vw,420px)}
}

/* ---------- faq accordion ---------- */
/* ===== FAQ — awwwards-наведение: СВЕТЛЫЙ блок (как остальные), капс-список, синяя полоса ===== */
.fq{background:var(--bone);color:var(--ink);padding-block:clamp(64px,9vh,130px);overflow:hidden}
.fq__head{margin-bottom:clamp(40px,6vh,80px)}
.fq__head .sec-title{color:var(--ink)}

.fq__stage{position:relative}

/* центральный список — строки во всю ширину, текст в центральной полосе между фото и ответом */
.fq__list{list-style:none;position:relative;z-index:2}
.fq__row{position:relative}
.fq__bar{position:relative;z-index:1;width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.4vw,24px);
  padding:clamp(16px,1.9vw,28px) var(--pad);text-align:center;cursor:pointer;
  color:var(--ink);transition:color .4s var(--e-out)}
.fq__no{flex:none;font-size:var(--fs-label);letter-spacing:.12em;font-weight:600;color:var(--muted);
  transition:color .4s var(--e-out)}
.fq__q{font-size:clamp(1.05rem,2vw,2rem);font-weight:600;letter-spacing:-.01em;line-height:1.06;
  text-transform:uppercase;max-width:clamp(280px,42vw,720px)}
/* full-bleed акцентная полоса активной строки */
.fq__row::before{content:"";position:absolute;inset:0;z-index:0;background:var(--clay);
  transform:scaleY(0);transform-origin:center;transition:transform .4s var(--e-out)}
.fq__row.is-active::before{transform:scaleY(1)}
.fq__row.is-active .fq__bar,.fq__row.is-active .fq__no{color:var(--bone)}

/* у КАЖДОЙ строки своё фото слева + ответ справа — закреплены на уровне самой строки,    */
/* проявляются, когда строка активна (двигаются вместе со строкой, а не висят по центру). */
.fq__photo,.fq__a{position:absolute;top:50%;transform:translateY(-50%);z-index:4;pointer-events:none;
  opacity:0;transition:opacity .4s var(--e-out)}
.fq__row.is-active .fq__photo,.fq__row.is-active .fq__a{opacity:1}
.fq__photo{left:var(--pad);width:clamp(150px,13vw,220px);aspect-ratio:4/5;
  background:transparent;overflow:visible}
/* doodle recoloured to the page bg (bone) via mask → reads as a contrasty
   bone shape directly on the blue active row, no light box behind it */
.fq__img{position:absolute;inset:clamp(12px,1.3vw,24px);background:var(--bone);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.fq__a{right:var(--pad);width:clamp(220px,19vw,300px);margin:0;
  font-size:clamp(.92rem,1vw,1.02rem);line-height:1.55;color:var(--bone)}

/* активная строка раздвигается по высоте под фото/ответ — контент держится внутри своей  */
/* строки и не налезает на соседние; вопрос остаётся по центру (bar тянется на всю высоту). */
@media(min-width:881px){
  .fq__row{display:flex;transition:min-height .45s var(--e-out)}
  .fq__bar{flex:1 1 auto}
  .fq__row.is-active{min-height:clamp(250px,21vw,330px)}
}

/* мобайл/тач: тап-аккордеон — вопрос с кареткой, ответ раскрывается по нажатию */
@media(max-width:880px){
  .fq__photo{display:none}
  .fq__row{border-bottom:1px solid var(--line)}
  .fq__list>.fq__row:first-child{border-top:1px solid var(--line)}
  .fq__bar{justify-content:flex-start;text-align:left;padding:clamp(18px,4.6vw,24px) var(--pad);flex-wrap:nowrap;gap:14px;align-items:flex-start}
  .fq__no{margin-top:.25em}
  .fq__q{text-transform:none;max-width:none;font-size:clamp(1.05rem,4.4vw,1.45rem);font-weight:600;color:var(--ink);flex:1 1 auto;min-width:0}
  .fq__row::before{display:none}
  .fq__bar{color:var(--ink)}
  /* caret indicator */
  .fq__bar::after{content:"";flex:none;width:11px;height:11px;margin-top:.45em;margin-left:auto;
    border-right:2px solid var(--clay);border-bottom:2px solid var(--clay);
    transform:rotate(45deg);transition:transform .35s var(--e-out)}
  .fq__row.is-open .fq__bar::after{transform:rotate(-135deg)}
  .fq__row.is-open .fq__q{color:var(--clay)}
  /* answer: collapsed by default, expands on tap */
  .fq__a{position:static;transform:none;width:auto;z-index:auto;pointer-events:auto;
    color:var(--muted);line-height:1.55;overflow:hidden;
    max-height:0;opacity:0;padding:0 var(--pad) 0 calc(var(--pad) + 36px);
    transition:max-height .5s var(--e-out),opacity .4s,padding .5s var(--e-out)}
  .fq__row.is-open .fq__a{max-height:60vh;opacity:1;padding-bottom:clamp(20px,5vw,28px)}
}


/* ============================================================
   mobile menu + responsive
   ============================================================ */
.menu{position:fixed;inset:0;z-index:990;background:var(--ink);color:var(--on-dark);
  transform:translateY(-100%);visibility:hidden;pointer-events:none;
  transition:transform .7s var(--e-soft),visibility 0s linear .7s;display:flex;flex-direction:column;
  justify-content:center;padding:var(--pad);gap:6px;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
/* если контент выше экрана (маленькая высота/ландшафт) — меню скроллится, а не зажимает страницу */
@media(max-height:640px){.menu{justify-content:flex-start;padding-block:clamp(76px,14vh,120px)}}
.menu.open{transform:none;visibility:visible;pointer-events:auto;transition:transform .7s var(--e-soft),visibility 0s linear 0s}
.menu a{font-size:clamp(2.4rem,11vw,4rem);font-weight:600;letter-spacing:-.03em;padding:6px 0;display:flex;align-items:baseline;gap:14px}
.menu a span{font-family:var(--serif);font-style:normal;font-size:1rem;color:var(--muted-d)}
.menu__foot{margin-top:40px;display:flex;gap:16px 24px;flex-wrap:wrap}
/* контакты в футере меню — мелкие лейблы, а не гигантские ссылки (перебиваем .menu a) */
.menu__foot a{font-size:clamp(.82rem,3.4vw,1rem);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:0;display:inline-flex;color:var(--muted-d)}
.menu__foot a:hover{color:var(--on-dark)}

@media(max-width:860px){
  .hdr__nav,.hdr__cta{display:none}
  .hdr__burger{display:flex}
  body.menu-open .hdr__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.menu-open .hdr__burger span:nth-child(2){opacity:0}
  body.menu-open .hdr__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
@media(max-width:600px){
  .hero__lockup{flex-direction:column;align-items:center;gap:0;line-height:.86}
  .hero__lockup em{font-size:.9em}
  .work__meta{flex-direction:column;gap:4px}
  .ft__bot{flex-direction:column;align-items:flex-start}
}

/* ---------- decor doodles (синие png, раскиданы как на e-b-agency) ---------- */
/* z-index:0 на секции = свой стекинг-контекст; .deco уходит на z-index:-1 (за текст, */
/* но над фоном секции) — не мешает читаемости и не ломает sticky/pin (без overflow). */
.has-deco{position:relative;z-index:0}
.deco{position:absolute;z-index:-1;width:auto;height:auto;pointer-events:none;user-select:none;
  -webkit-user-drag:none}
.deco--pitch{right:3%;bottom:4%;width:clamp(140px,17vw,280px);transform:rotate(-7deg);opacity:.9}
.fct{position:relative;display:inline-block}
.deco--numbers{left:50%;top:100%;width:clamp(150px,15vw,238px);transform:translate(-50%,-62%) rotate(-4deg);opacity:.85}
.deco--aud{right:6%;top:4%;width:clamp(92px,11vw,162px);transform:rotate(-10deg);opacity:.95}
.deco--versus{right:3%;top:6%;width:clamp(74px,8vw,122px);transform:rotate(12deg);opacity:.95}
.deco--cases{left:1%;bottom:3%;width:clamp(120px,14vw,220px);transform:rotate(6deg);opacity:.8}
.deco--faq{right:4%;bottom:7%;width:clamp(120px,15vw,230px);transform:rotate(-8deg);opacity:.6}
.deco--contact{right:4%;top:7%;width:clamp(130px,16vw,250px);transform:rotate(5deg);opacity:.9}
.deco--svc{right:4%;top:5%;width:clamp(120px,15vw,240px);transform:rotate(-3deg);opacity:.9}
.deco--proc{right:5%;top:9%;width:clamp(130px,15vw,260px);transform:scaleX(-1) rotate(30deg);opacity:.7}
/* мобайл: декор НЕ прячем (его просили оставить) — уменьшаем и приглушаем, держим в границах экрана */
@media(max-width:760px){
  .deco{opacity:.5}
  .deco--pitch{width:clamp(96px,28vw,150px);right:2%;bottom:2%}
  .deco--numbers{width:clamp(90px,26vw,140px)}
  .deco--aud{width:clamp(64px,18vw,96px)}
  .deco--versus{width:clamp(56px,15vw,84px)}
  .deco--cases{width:clamp(88px,24vw,130px)}
  .deco--faq{width:clamp(84px,22vw,120px)}
  .deco--contact{width:clamp(92px,25vw,135px)}
  .deco--svc{width:clamp(88px,24vw,130px)}
  .deco--proc{width:clamp(92px,25vw,135px)}
}

/* decor: дудлы в блоке-заявлении MATCHMAR — ромашка слева вверху + овал-обводка вокруг «10–15» */
.deco--state-l{left:2.5%;top:6%;width:clamp(80px,8.5vw,142px);transform:rotate(-12deg);opacity:.9}
.circled10{position:relative}
.deco--ov1015{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);
  width:clamp(175px,17vw,285px);max-width:none;opacity:.92;z-index:-1}

/* ============================ contact: chat-brief (DM-style mini-quiz → form) ============================ */
.lets__grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,60px);align-items:start}
@media(min-width:900px){.lets__grid{grid-template-columns:1fr 1fr;align-items:start;gap:clamp(40px,5vw,72px)}}
.lets__head{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px)}
.lets__sub{color:var(--muted);font-size:var(--fs-lead);line-height:1.5;max-width:46ch}
.lets__alt{display:flex;align-items:center;flex-wrap:wrap;gap:.5em;color:var(--muted);font-size:var(--fs-body)}
.lets__alt .lets__mail{font-size:inherit}
.chat{background:#FBF8F2;border:1px solid var(--line);border-radius:clamp(20px,2vw,30px);
  box-shadow:0 44px 84px -52px rgba(23,20,17,.55);overflow:hidden;display:flex;flex-direction:column;
  width:100%;max-width:540px;justify-self:end}
.chat__bar{display:flex;align-items:center;gap:12px;background:var(--bone);
  padding:clamp(13px,1.3vw,18px) clamp(16px,1.6vw,24px);border-bottom:1px solid var(--line)}
.chat__ava{flex:none;width:34px;height:34px;border-radius:50%;background:var(--clay);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:1.02rem;font-family:var(--sans)}
.chat__id{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--ink)}
.chat__id b{font-weight:500;color:var(--muted);font-size:.82rem}
.chat__dot{width:8px;height:8px;border-radius:50%;background:#34c759;animation:cdot 2.2s infinite}
@keyframes cdot{0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)}70%{box-shadow:0 0 0 7px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
.chat__step{margin-left:auto;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d)}
.chat__log{display:flex;flex-direction:column;gap:10px;padding:clamp(16px,1.8vw,26px);
  min-height:clamp(220px,26vw,300px);max-height:48vh;overflow-y:auto}
.cbub{max-width:84%;padding:11px 15px;border-radius:18px;font-size:clamp(.92rem,1vw,1rem);line-height:1.4;
  opacity:0;transform:translateY(10px) scale(.96);transition:opacity .4s var(--e-out),transform .5s var(--e-soft)}
.cbub.is-in{opacity:1;transform:none}
.cbub p{margin:0}
.cbub--bot{align-self:flex-start;background:var(--bone-2);color:var(--ink);border-bottom-left-radius:5px}
.cbub--me{align-self:flex-end;background:var(--clay);color:#fff;border-bottom-right-radius:5px}
.cbub--done{background:var(--ink);color:var(--bone);max-width:90%}
.cbub--typing{display:flex;gap:5px;align-items:center;width:max-content}
.cbub--typing span{width:7px;height:7px;border-radius:50%;background:var(--muted-d);animation:ctype 1.2s infinite}
.cbub--typing span:nth-child(2){animation-delay:.18s}
.cbub--typing span:nth-child(3){animation-delay:.36s}
@keyframes ctype{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.chat__dock{display:flex;flex-wrap:wrap;gap:9px;align-items:center;min-height:64px;
  padding:clamp(12px,1.4vw,18px) clamp(16px,1.8vw,26px);border-top:1px solid var(--line);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--e-out)}
.chat__dock.is-in{opacity:1;transform:none}
.chip{padding:10px 17px;border-radius:100px;border:1.5px solid var(--clay);background:transparent;
  color:var(--clay);font-weight:600;font-size:.92rem;cursor:pointer;
  transition:background .3s,color .3s,transform .3s var(--e-out)}
.chip:hover{background:var(--clay);color:#fff;transform:translateY(-2px)}
.chat__send{display:flex;gap:10px;width:100%;align-items:center}
.chat__send input{flex:1;min-width:0;padding:12px 17px;border-radius:100px;border:1.5px solid var(--line);
  background:#fff;font:inherit;font-size:.96rem;color:var(--ink);transition:border-color .3s}
.chat__send input:focus{outline:none;border-color:var(--clay)}
.chat__send input.is-bad{border-color:#e0563f}
.chat__go{flex:none;width:46px;height:46px;border-radius:50%;background:var(--clay);color:#fff;border:none;
  font-size:1.2rem;cursor:pointer;display:grid;place-items:center;
  transition:transform .3s var(--e-out),background .3s}
.chat__go:hover{transform:translateY(-2px) rotate(8deg);background:var(--ink)}
@media(max-width:900px){.chat{max-width:none;justify-self:stretch}}
@media(prefers-reduced-motion:reduce){.cbub,.chat__dock{opacity:1;transform:none}.chat__dot{animation:none}.cbub--typing span{animation:none}}

/* ============================ founder: filter-conveyor (принцип отбора) ============================ */
.filt{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,5vw,60px);align-items:center}
@media(min-width:880px){.filt{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.filt__lead{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,28px);min-width:0}
.filt__h{font-size:var(--fs-display);font-weight:700;letter-spacing:-.04em;line-height:.95}
.filt__h em{font-style:normal;color:var(--clay)}
.filt__p{color:var(--muted);font-size:var(--fs-lead);line-height:1.5;max-width:44ch}
.filt__sign{display:flex;flex-direction:column;gap:6px;padding-top:clamp(14px,1.6vw,22px);border-top:1px solid var(--line-strong)}
/* tinder deck: a STATIC surface (same on desktop & mobile) with compact blue cards swiping ✓ right / ✕ left over it */
.filt__stage{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,24px);align-items:center}
.filt__deck{position:relative;width:100%;height:clamp(200px,25vw,250px);overflow:hidden;
  background:var(--bone-2);border:1px solid var(--line);border-radius:clamp(18px,1.8vw,26px)}
.filt__deck::before{content:"входящие заявки";position:absolute;z-index:0;top:clamp(12px,1.4vw,17px);left:clamp(15px,1.7vw,22px);
  font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);font-weight:600}
.fcard{position:absolute;left:50%;top:50%;width:min(84%,310px);min-height:clamp(118px,13vw,148px);
  transform:translate(-50%,-50%);background:var(--clay);color:#fff;border-radius:clamp(16px,1.5vw,22px);
  padding:clamp(18px,1.9vw,24px) clamp(20px,2vw,26px);display:flex;flex-direction:column;justify-content:center;gap:8px;overflow:hidden;
  box-shadow:0 26px 48px -26px rgba(47,107,255,.65);will-change:transform;touch-action:pan-y;cursor:grab;
  transition:transform .62s var(--e-out),opacity .5s,filter .4s}
.fcard.is-grab{cursor:grabbing;transition:none}
.fcard__top{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;opacity:.8;font-weight:600}
.fcard__t{font-size:clamp(1.15rem,1.7vw,1.55rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.fcard__v{position:absolute;top:clamp(14px,1.5vw,18px);font-weight:800;font-size:clamp(.95rem,1.3vw,1.2rem);
  letter-spacing:.1em;border:3px solid;border-radius:10px;padding:4px 11px;opacity:0;
  transition:opacity .2s,transform .35s var(--e-out)}
.fcard__v--yes{right:clamp(14px,1.5vw,18px);color:#fff;border-color:#fff;transform:rotate(-14deg) scale(1.3)}
.fcard__v--no{left:clamp(14px,1.5vw,18px);color:#FFD8CC;border-color:#FFD8CC;transform:rotate(14deg) scale(1.3)}
.fcard.yes .fcard__v--yes{opacity:1;transform:rotate(-14deg) scale(1)}
.fcard.no .fcard__v--no{opacity:1;transform:rotate(14deg) scale(1)}
/* stacked peek behind the front card */
.fcard.is-1{transform:translate(-50%,-50%) translateY(13px) scale(.94) rotate(-4deg);filter:brightness(.9)}
.fcard.is-2{transform:translate(-50%,-50%) translateY(24px) scale(.88) rotate(4deg);filter:brightness(.8)}
/* swipe off */
.fcard.swipe-yes{transform:translate(150%,-50%) rotate(20deg);opacity:0}
.fcard.swipe-no{transform:translate(-250%,-50%) rotate(-20deg);opacity:0}
.filt__tally{font-size:var(--fs-body);color:var(--muted);font-weight:600}
.filt__tally b{color:var(--clay);font-size:1.3em;font-weight:800}
@media(prefers-reduced-motion:reduce){.fcard{transition:none}}

/* ---------- мобайл: компактнее расстояния между блоками ---------- */
@media(max-width:760px){
  :root{--sec:clamp(40px,7vh,64px)}
  .pitch{padding-block:clamp(52px,11vh,84px)}
  .fq{padding-block:clamp(42px,7vh,64px)}
  .lets{padding-block:clamp(44px,7vh,68px)}
  .aud__pin{padding-block:clamp(46px,9vh,80px)}
}

/* design credit под подвалом, в самом низу */
.credit{text-align:center;padding:clamp(16px,2.2vw,28px) var(--pad);font-size:.78rem;letter-spacing:.06em;color:var(--muted);background:var(--bone);border-top:1px solid var(--line)}
.credit em{font-style:normal;font-weight:600;color:var(--clay);letter-spacing:.02em}

/* ===== Правки Марго: акцент trust-строки + сноска + «не нашли услугу» ===== */
.pitch__trust--lg{font-size:clamp(.86rem,1.15vw,1.02rem);color:var(--ink);font-weight:600;
  letter-spacing:.1em;line-height:1.65;max-width:66ch}
.pitch__fn{margin-top:6px;max-width:66ch;font-size:var(--fs-label);font-weight:500;letter-spacing:.03em;
  text-transform:none;color:var(--muted);line-height:1.5;text-align:center}
.svc2__more{display:inline-flex;align-items:center;gap:.5em;margin-top:clamp(22px,3vw,34px);
  font-size:clamp(.82rem,1.05vw,.98rem);font-weight:600;letter-spacing:.02em;color:var(--ink);
  border-bottom:1.5px solid color-mix(in srgb,var(--ink) 30%,transparent);padding-bottom:3px;
  transition:border-color .25s ease,color .25s ease}
.svc2__more:hover{color:var(--clay);border-color:var(--clay)}
.svc2__more .arr{font-weight:400}