/* ai•artishok — design system, extracted verbatim from site/index.html <style> (2026-09-06).
   SOURCE OF TRUTH = the landing. Do not diverge here; re-extract when the landing changes.
   Used by _templates/tpl-uslugi.html and _templates/tpl-case.html (not deployed). */
/* ---------- tokens: light (bare :root) ---------- */
  :root{
    --c-paper:#eef1ea;      /* прохладный, с зеленью — не тёплый крем */
    --c-surface:#f8f9f5;
    --c-ink:#19211d;
    --c-ink-dim:#55625b;
    --c-line:#d7dccf;
    --c-line-strong:#b9c2ad;
    --c-teal:#1a5a58;       /* основной бренд-цвет */
    --c-teal-deep:#0e3b37;
    --c-sage:#93a78c;
    --c-ochre:#c46e2c;      /* тёплый акцент, дозированно — НЕ для заливки CTA */
    --c-ochre-ink:#8a4a20;  /* охра-текст с достаточным контрастом на бумаге */
    --c-accent:#1c5b54;     /* заливка primary-кнопок = бренд-teal (teal доминирует) */
    --c-on-accent:#ffffff;
    --c-focus:#1c5b54;

    --wrap:1120px;
    --measure:66ch;
    --measure-tight:52ch;
    --radius:14px;
    --radius-sm:10px;

    /* ---- единая типо-шкала (было ~20 ad-hoc размеров) ---- */
    --fs-2xs:.75rem;        /* 12 — микролейблы, eyebrow, mono-теги */
    --fs-xs:.8125rem;       /* 13 — мета, подписи */
    --fs-sm:.9375rem;       /* 15 — вторичный текст, тело карточек */
    --fs-base:1rem;         /* 16 — кнопки, поля */
    --fs-md:1.125rem;       /* 18 — лид, крупное тело */
    --fs-lg:1.3125rem;      /* 21 — h3 карточек */
    --fs-body:clamp(1rem,.96rem + .28vw,1.125rem);
    --fs-h3:clamp(1.15rem,1.05rem + .5vw,1.4rem);
    --fs-h2:clamp(1.6rem,1.2rem + 2vw,2.35rem);
    --fs-h1:clamp(2rem,1.5rem + 2.4vw,2.9rem);

    --sp-section:clamp(2.1rem,2.1rem + 2.6vw,3.8rem);

    --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
    --font-body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
    --font-mono:"Spline Sans Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

    color-scheme:light;
    accent-color:#1c5b54;
  }

  /* ---------- tokens: dark via OS (system state, no stamp) ---------- */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --c-paper:#101a18;
      --c-surface:#152a25;
      --c-ink:#dde4dd;
      --c-ink-dim:#9fb0a8;
      --c-line:#2b3f3a;
      --c-line-strong:#41605a;
      --c-teal:#4a9e93;
      --c-teal-deep:#9ec9c1;
      --c-sage:#7f978c;
      --c-ochre:#d98a52;
      --c-ochre-ink:#e7a06b;
      --c-accent:#4a9e93;
      --c-on-accent:#07211d;
      --c-focus:#4a9e93;
      color-scheme:dark;
      accent-color:#4a9e93;
    }
  }

  /* ---------- tokens: dark via explicit toggle ---------- */
  :root[data-theme="dark"]{
    --c-paper:#101a18;
    --c-surface:#152a25;
    --c-ink:#dde4dd;
    --c-ink-dim:#9fb0a8;
    --c-line:#2b3f3a;
    --c-line-strong:#41605a;
    --c-teal:#4a9e93;
    --c-teal-deep:#9ec9c1;
    --c-sage:#7f978c;
    --c-ochre:#d98a52;
    --c-ochre-ink:#e7a06b;
    --c-accent:#4a9e93;
    --c-on-accent:#07211d;
    --c-focus:#4a9e93;
    color-scheme:dark;
    accent-color:#4a9e93;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
  body{
    margin:0;
    background:var(--c-paper);
    color:var(--c-ink);
    font-family:var(--font-body);
    font-size:var(--fs-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    overflow-wrap:break-word;
  }
  h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.14;text-wrap:balance;margin:0}
  h1{font-weight:700}
  h3{font-size:var(--fs-lg)}
  p{margin:0}
  a{color:inherit}
  img,svg{max-width:100%}
  img{height:auto}
  ::selection{background:var(--c-teal);color:var(--c-paper)}

  :where(a,button,summary,input,select):focus-visible{
    outline:2px solid var(--c-focus);
    outline-offset:3px;
    border-radius:6px;
  }
  /* фокус на тёмно-teal секциях (hook/footer в светлой теме) — тёплый светлый контур */
  .hook :where(a,button,summary,input,select):focus-visible,
  .footer :where(a,button,summary,input,select):focus-visible{outline-color:#e9d9c2}

  .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.4rem)}
  .section{padding-block:var(--sp-section)}
  .section + .section{border-top:1px solid var(--c-line)}

  .eyebrow{
    display:flex;align-items:center;gap:.6rem;
    font-family:var(--font-body);font-weight:600;
    font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;
    color:var(--c-ink-dim);margin-bottom:1.4rem;
  }
  .eyebrow::before{
    content:"";width:15px;height:20px;flex:none;
    background:var(--c-sage);
    /* органический лист: острый кончик, округлые «плечи», сужение к основанию */
    clip-path:polygon(50% 0%,72% 10%,92% 34%,100% 60%,82% 86%,50% 100%,18% 86%,0% 60%,8% 34%,28% 10%);
  }
  h2.section-title{font-size:var(--fs-h2);letter-spacing:-0.015em}
  .section-lead{margin-top:.9rem;color:var(--c-ink-dim);font-size:var(--fs-md);max-width:var(--measure-tight)}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:44px;line-height:1;white-space:nowrap;
    font-family:var(--font-body);font-weight:600;font-size:var(--fs-base);
    padding:.8em 1.4em;border-radius:999px;border:1px solid transparent;
    text-decoration:none;cursor:pointer;
    transition:transform .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease;
  }
  .btn-primary{background:var(--c-accent);color:var(--c-on-accent)}
  .btn-primary:hover{transform:translateY(-2px)}
  .btn-primary:active{transform:translateY(0) scale(.985)}
  .btn-ghost{background:transparent;border-color:var(--c-ink-dim);color:var(--c-ink)}
  .btn-ghost:hover{border-color:var(--c-accent);color:var(--c-accent)}
  .btn-ghost:active{transform:scale(.985)}
  .btn-small{font-size:var(--fs-sm);padding:.55em 1em;min-height:40px}

  /* ---------- top bar ---------- */
  .topbar{
    position:sticky;top:0;z-index:20;
    background:color-mix(in srgb,var(--c-paper) 88%,transparent);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--c-line);
  }
  .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-block:.7rem}
  .wordmark{
    display:inline-flex;align-items:center;gap:.4rem;min-height:32px;white-space:nowrap;
    font-family:var(--font-display);font-weight:700;font-size:1.15rem;
    letter-spacing:-0.02em;color:var(--c-ink);text-decoration:none;
  }
  .wm-mark{width:22px;height:26px;object-fit:contain;flex:none}
  .wordmark b{color:var(--c-teal);font-weight:700}
  .wordmark .dot{color:var(--c-ochre);padding-inline:.06em}
  .topbar-actions{display:flex;align-items:center;gap:.45rem}

  .theme-toggle{
    background:transparent;border:1px solid var(--c-line-strong);color:var(--c-ink-dim);
    font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.04em;
    min-height:40px;padding:.5em .7em;border-radius:999px;cursor:pointer;
    text-transform:lowercase;white-space:nowrap;
    transition:border-color .16s ease,color .16s ease;
  }
  .theme-toggle:hover{border-color:var(--c-teal);color:var(--c-teal)}

  /* узкие экраны: кнопка в шапке дублирует кнопку в первом экране — убираем её,
     чтобы шапка не переполнялась по горизонтали (замерено: ломается вплоть до ~500px) */
  @media (max-width:540px){
    .topbar .btn-small{display:none}
  }
  /* очень узкие экраны: не даём шапке переполниться по горизонтали */
  @media (max-width:400px){
    .topbar .wrap{padding-inline:1rem;gap:.4rem}
    .wordmark{font-size:1.05rem}
    .theme-toggle{padding:.5em .55em;letter-spacing:0}
  }

  /* ---------- hero ---------- */
  .hero .wrap{padding-block:clamp(3.4rem,9vw,6.5rem)}
  .hero-lockup{
    display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);
    margin-bottom:clamp(1.8rem,4vw,2.8rem);
  }
  .hero-lockup-mark{
    width:clamp(72px,11vw,132px);height:auto;flex:none;
  }
  @media (prefers-reduced-motion:no-preference){
    .hero-lockup-mark{animation:heroFloat 16s ease-in-out infinite}
    @keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  }
  .hero-wordmark{
    font-family:var(--font-display);font-weight:700;
    font-size:clamp(2.1rem,1.4rem + 4vw,3.6rem);
    letter-spacing:-0.03em;line-height:1;color:var(--c-ink);
  }
  .hero-wordmark .wm-name{color:var(--c-teal)}
  .hero-wordmark .dot{color:var(--c-ochre);padding-inline:.05em}
  .hero-tag{
    margin-top:.55rem;font-size:clamp(.95rem,.9rem + .3vw,1.15rem);
    color:var(--c-ink-dim);
  }
  .hero-h1{
    font-size:var(--fs-h1);line-height:1.16;
    letter-spacing:-0.02em;max-width:30ch;text-wrap:pretty;
  }
  .hero-sub{margin-top:1.4rem;font-size:var(--fs-md);color:var(--c-ink-dim);max-width:52ch}
  .hero-cta{margin-top:2.1rem;display:flex;flex-wrap:wrap;gap:.8rem}
  @media (max-width:460px){
    .hero-lockup{flex-direction:column;align-items:flex-start;gap:.9rem}
  }

  /* ---------- directions (leaves) ---------- */
  .leaf-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.6rem}
  @media(min-width:560px){.leaf-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:960px){.leaf-grid{grid-template-columns:repeat(4,1fr)}}
  .leaf-card{
    position:relative;display:flex;flex-direction:column;gap:.55rem;
    background:var(--c-surface);border:1px solid var(--c-line-strong);
    border-radius:var(--radius);padding:1.5rem 1.4rem 1.4rem;
    transition:transform .2s ease,border-color .2s ease;
  }
  .leaf-card:hover{transform:translateY(-4px);border-color:var(--c-teal)}
  .leaf-badge{
    width:46px;height:46px;margin-bottom:.5rem;flex:none;
    object-fit:contain;transform-origin:50% 100%;
    transition:transform .2s ease;
  }
  .leaf-card:hover .leaf-badge{transform:rotate(-8deg) scale(1.06) translateY(-2px)}
  .leaf-card h3{font-size:var(--fs-lg)}
  .leaf-what{color:var(--c-ink);font-size:var(--fs-sm)}
  .leaf-who{color:var(--c-ink-dim);font-size:var(--fs-sm)}
  .leaf-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-top:1rem;flex-wrap:wrap}
  .price{
    font-family:var(--font-mono);font-weight:600;font-size:var(--fs-sm);
    color:var(--c-ochre-ink);white-space:nowrap;font-variant-numeric:tabular-nums;
  }

  /* ---------- artichoke schema ---------- */
  .artichoke-schema{
    margin:clamp(2.4rem,5vw,3.6rem) auto 0;display:flex;flex-direction:column;
    align-items:center;gap:1.5rem;max-width:420px;
  }
  .as-chips{display:flex;flex-direction:column;gap:.7rem;width:100%;max-width:320px}
  .as-side{display:flex;flex-direction:column;align-items:center;gap:.9rem}
  .as-stage{display:flex;flex-direction:column;align-items:center}
  .as-mark{width:min(64vw,290px);height:auto;transition:transform .25s ease}
  .as-core-label{
    margin-top:.6rem;font-family:var(--font-mono);font-size:var(--fs-xs);
    letter-spacing:.02em;color:var(--c-ochre-ink);text-align:center;
  }
  .as-cap{
    font-size:var(--fs-sm);color:var(--c-ink-dim);text-align:center;max-width:44ch;
  }
  .as-chip{
    display:flex;align-items:center;justify-content:center;position:relative;
    padding:.62em 2.9em;border:1px solid var(--c-line-strong);border-radius:999px;
    font-size:var(--fs-sm);color:var(--c-ink);text-decoration:none;background:var(--c-surface);
    white-space:nowrap;transition:border-color .18s ease,color .18s ease,transform .18s ease;
  }
  .as-chip-ic{
    position:absolute;left:.7em;top:50%;transform:translateY(-50%);
    width:24px;height:28px;object-fit:contain;transition:transform .2s ease;
  }
  .as-chip:hover,.as-chip:focus-visible{border-color:var(--c-ochre);color:var(--c-ochre-ink);transform:translateY(-2px)}
  .as-chip:hover .as-chip-ic,.as-chip:focus-visible .as-chip-ic{transform:translateY(-50%) rotate(-6deg) scale(1.08)}
  .artichoke-schema:has(.as-chip:hover) .as-mark,
  .artichoke-schema:has(.as-chip:focus-visible) .as-mark{transform:scale(1.03)}

  .as-chips{display:flex;flex-direction:column;gap:.7rem;width:100%;max-width:300px}
  @media (min-width:820px){
    .artichoke-schema{
      display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
      justify-items:center;column-gap:clamp(1.6rem,4vw,3rem);row-gap:1.4rem;max-width:900px;
    }
    .as-chips-l{justify-self:end;align-items:flex-end;max-width:240px}
    .as-chips-r{justify-self:start;align-items:flex-start;max-width:240px}
    .as-chips-l .as-chip,.as-chips-r .as-chip{width:100%}
    .as-side{order:0}
    .as-cap{grid-column:1/-1;text-align:center;max-width:64ch;margin-inline:auto}
  }
  @media (max-width:819px){
    .as-side{order:-1}
    .as-chips{max-width:320px;margin-inline:auto}
    .as-chips-r{margin-top:-.8rem}
  }

  .js .artichoke-schema.reveal .as-mark,
  .js .artichoke-schema.reveal .as-chip,
  .js .artichoke-schema.reveal .as-core-label{opacity:0;transform:translateY(14px)}
  .js .artichoke-schema.reveal.is-in .as-mark{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
  .js .artichoke-schema.reveal.is-in .as-core-label{opacity:1;transform:none;transition:opacity .5s ease .5s,transform .5s ease .5s}
  .js .artichoke-schema.reveal.is-in .as-chip{opacity:1;transform:none;transition:opacity .5s ease var(--d),transform .55s cubic-bezier(.22,.61,.36,1) var(--d)}
  .js .artichoke-schema.reveal .as-chip[data-leaf="sites"]{--d:.1s}
  .js .artichoke-schema.reveal .as-chip[data-leaf="visual"]{--d:.2s}
  .js .artichoke-schema.reveal .as-chip[data-leaf="video"]{--d:.3s}
  .js .artichoke-schema.reveal .as-chip[data-leaf="anim"]{--d:.4s}

  @media (prefers-reduced-motion:reduce){
    .as-chip,.as-mark,.as-chip::before{transition:none!important}
    .js .artichoke-schema.reveal .as-mark,
    .js .artichoke-schema.reveal .as-chip,
    .js .artichoke-schema.reveal .as-core-label{opacity:1!important;transform:none!important}
  }

  /* ---------- hook ---------- */
  .section.hook{background:var(--c-teal-deep);color:#eef1ea;border-top:0}
  :root[data-theme="dark"] .hook,
  :root:not([data-theme="light"]) .hook{background:var(--c-surface);color:var(--c-ink)}
  .hook .eyebrow{color:#a9c6c0}
  .hook .eyebrow::before{background:var(--c-ochre)}
  .hook h2{font-size:var(--fs-h2);letter-spacing:-0.02em;max-width:20ch}
  .hook-body{margin-top:1.4rem;display:grid;gap:.8rem;max-width:54ch;color:#d6e2df}
  :root[data-theme="dark"] .hook-body,
  :root:not([data-theme="light"]) .hook-body{color:var(--c-ink-dim)}
  .hook-price{
    margin-top:1.8rem;font-family:var(--font-mono);font-weight:600;
    font-size:var(--fs-md);color:#fff;
  }
  :root[data-theme="dark"] .hook-price,
  :root:not([data-theme="light"]) .hook-price{color:var(--c-ochre-ink)}
  .hook-deadline{margin-top:.5rem;font-size:var(--fs-sm);color:#a9c6c0}
  :root[data-theme="dark"] .hook-deadline,
  :root:not([data-theme="light"]) .hook-deadline{color:var(--c-ink-dim)}
  .hook .btn-primary{background:var(--c-paper);color:var(--c-teal-deep)}
  .hook .btn-primary:hover{background:#fff}
  :root[data-theme="dark"] .hook .btn-primary,
  :root:not([data-theme="light"]) .hook .btn-primary{background:var(--c-accent);color:var(--c-on-accent)}
  .hook .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
  .hook .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
  :root[data-theme="dark"] .hook .btn-ghost,
  :root:not([data-theme="light"]) .hook .btn-ghost{border-color:var(--c-ink-dim);color:var(--c-ink)}

  /* ---------- process ---------- */
  .steps{margin-top:2.6rem;display:grid;gap:0}
  .step{
    display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1.4rem;
    padding:1.6rem 0;border-top:1px solid var(--c-line);
  }
  .step:first-child{border-top:0}
  .step-n{
    font-family:var(--font-mono);font-weight:600;font-size:var(--fs-md);
    color:var(--c-ochre-ink);padding-top:.15rem;font-variant-numeric:tabular-nums;
  }
  .step h3{font-size:var(--fs-lg);margin-bottom:.5rem}
  .step p{color:var(--c-ink-dim);font-size:var(--fs-sm);max-width:var(--measure)}
  .step-meta{
    margin-top:.7rem;font-family:var(--font-mono);font-size:var(--fs-xs);
    color:var(--c-ink-dim);letter-spacing:.02em;
  }
  .tools-note{
    margin-top:2rem;padding:1.4rem 1.5rem;border-left:3px solid var(--c-ochre);
    background:var(--c-surface);border-radius:0 var(--radius) var(--radius) 0;
    color:var(--c-ink);max-width:var(--measure);
  }
  .tools-note .label{
    display:block;font-family:var(--font-body);font-weight:600;font-size:var(--fs-2xs);
    letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-dim);margin-bottom:.6rem;
  }

  /* ---------- works ---------- */
  .work-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.6rem}
  @media(min-width:560px){.work-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:960px){.work-grid{grid-template-columns:repeat(2,1fr)}}
  .work-card{
    background:var(--c-surface);border:1px solid var(--c-line-strong);border-radius:var(--radius);
    padding:1.4rem;display:flex;flex-direction:column;gap:.55rem;
    transition:transform .2s ease,border-color .2s ease;
  }
  .work-card:hover{transform:translateY(-4px);border-color:var(--c-teal)}
  .work-card.soon{border-style:dashed;background:transparent}
  .work-card.soon:hover{transform:none;border-color:var(--c-line-strong)}
  .work-tag{
    align-self:flex-start;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.06em;
    text-transform:uppercase;padding:.3em .6em;border-radius:999px;
    background:var(--c-sage);color:#14231f;
  }
  .work-card.soon .work-tag{background:transparent;border:1px solid var(--c-line-strong);color:var(--c-ink-dim)}
  .work-card h3{font-size:var(--fs-md)}
  .work-card p{font-size:var(--fs-sm);color:var(--c-ink-dim)}
  .work-dir{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--c-ink-dim)}
  .work-media{border-radius:var(--radius-sm);overflow:hidden;background:#000;aspect-ratio:3/4;margin-bottom:.35rem}
  .work-media video{display:block;width:100%;height:100%;object-fit:cover}

  /* ---------- why ---------- */
  .why-grid{display:grid;grid-template-columns:1fr;gap:1.4rem 2rem;margin-top:2.6rem}
  @media(min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
  .why-item h3{font-size:var(--fs-lg);margin-bottom:.5rem;color:var(--c-teal)}
  .why-item p{color:var(--c-ink-dim);font-size:var(--fs-sm)}

  /* ---------- reviews ---------- */
  .reviews-layout{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
  .review-note{margin-top:1rem;font-size:var(--fs-sm);color:var(--c-ink-dim);font-style:italic}
  .review-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;max-width:380px}
  @media(min-width:760px){
    .reviews-layout{grid-template-columns:1.2fr .9fr;gap:2.5rem;align-items:center}
    .review-grid{margin-top:0;margin-left:auto;max-width:340px}
  }
  .review-card{
    border:1px dashed var(--c-line);border-radius:var(--radius);padding:1.3rem;
    display:grid;gap:.5rem;color:var(--c-ink-dim);opacity:.45;transition:opacity .2s ease;
  }
  .review-card:hover{opacity:.8}
  .review-card .ph{font-family:var(--font-mono);font-size:var(--fs-xs)}
  .review-card .ph b{color:var(--c-ink);font-weight:600}

  /* ---------- faq ---------- */
  .faq{margin-top:2.4rem;display:grid;gap:0;max-width:var(--measure)}
  .faq details{border-top:1px solid var(--c-line);padding:.35rem 0}
  .faq details:last-child{border-bottom:1px solid var(--c-line)}
  .faq summary{
    font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);
    cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;
    align-items:center;min-height:44px;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-family:var(--font-mono);color:var(--c-ochre-ink);flex:none}
  .faq details[open] summary::after{content:"–"}
  .faq details p{margin-top:.4rem;padding-bottom:.8rem;color:var(--c-ink-dim);font-size:var(--fs-sm);max-width:var(--measure)}
  @media (prefers-reduced-motion:no-preference){
    .faq details[open] p{animation:faqIn .25s ease}
    @keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  }

  /* ---------- cta ---------- */
  .cta-grid{display:grid;grid-template-columns:1fr;gap:2.4rem;margin-top:2.4rem}
  @media(min-width:820px){.cta-grid{grid-template-columns:1.1fr .9fr}}
  .form{display:grid;gap:.9rem;background:var(--c-surface);border:1px solid var(--c-line-strong);border-radius:var(--radius);padding:1.6rem}
  .field{display:grid;gap:.35rem}
  .field label{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.06em;color:var(--c-ink-dim);text-transform:uppercase}
  .field input,.field select{
    width:100%;font-family:var(--font-body);font-size:var(--fs-base);color:var(--c-ink);
    background:var(--c-paper);border:1px solid var(--c-line-strong);border-radius:var(--radius-sm);padding:.7em .8em;
  }
  .form .btn-primary{margin-top:.4rem}
  .consent{font-size:var(--fs-xs);color:var(--c-ink-dim);line-height:1.5}
  .consent a{color:var(--c-ochre-ink);text-decoration:underline;text-underline-offset:2px}
  .contacts{display:grid;gap:1.1rem;align-content:start}
  .contacts h3{font-size:var(--fs-base);color:var(--c-teal)}
  .contacts .row{display:grid;gap:.25rem}
  .contacts .k{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-dim)}
  .contacts .v{font-size:var(--fs-sm)}

  /* ---------- footer ---------- */
  .footer{background:var(--c-teal-deep);color:#c7d8d4;border-top:0}
  :root[data-theme="dark"] .footer,
  :root:not([data-theme="light"]) .footer{background:var(--c-surface);color:var(--c-ink-dim)}
  .footer .wrap{padding-block:2.6rem;display:grid;gap:1rem}
  .footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
  .footer a:hover{text-decoration-thickness:2px}
  .footer .legal-row{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:var(--fs-sm)}
  .footer .social{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-family:var(--font-mono);font-size:var(--fs-xs)}
  .footer .fine{font-size:var(--fs-2xs);opacity:.85}

  /* ---------- scroll reveal (мотив: листья раскрываются на скролле) ---------- */
  .js .reveal{opacity:0;transform:translateY(16px)}
  .js .reveal.is-in{
    opacity:1;transform:none;
    transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .js .reveal .leaf-badge{opacity:0;transform:rotate(-16deg) scale(.68)}
  .js .reveal.is-in .leaf-badge{
    opacity:1;transform:none;
    transition:opacity .5s ease .12s,transform .6s cubic-bezier(.34,1.35,.5,1) .12s;
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{transition:none!important;animation:none!important}
    .leaf-card:hover,.work-card:hover{transform:none}
    .leaf-card:hover .leaf-badge{transform:none}
    .btn-primary:hover,.btn-primary:active,.btn-ghost:active{transform:none!important}
    .reveal{opacity:1!important;transform:none!important}
    .reveal .leaf-badge{opacity:1!important;transform:none!important}
  }

  /* ================= v2 blocks (ред.4, 2026-09-03) ================= */
  .hero-tag{margin-top:.55rem;font-size:clamp(.95rem,.9rem + .3vw,1.12rem);color:var(--c-ink-dim);letter-spacing:.01em}
  .hero-h1{font-size:var(--fs-h1);line-height:1.14;letter-spacing:-0.02em;max-width:20ch;text-wrap:balance}
  .hero-sub{margin-top:1.2rem;font-size:var(--fs-md);color:var(--c-ink-dim);max-width:40ch}
  .hero-geo{margin-top:1rem;font-size:var(--fs-lg);font-weight:600;color:var(--c-teal)}
  .hero-h1.stair{display:flex;flex-direction:column;max-width:none}
  .hero-h1.stair span:nth-child(2){margin-left:clamp(1.4rem,7vw,4.5rem)}
  .btn-arr{margin-left:.5em;transition:transform .18s ease}
  .btn:hover .btn-arr{transform:translateX(3px)}
  .btn-ghost .btn-arr{margin-left:.45em}

  /* block 2 — tagline + 3 advantages */
  .promise .section-title{max-width:16ch}
  .section-title.stair{display:flex;flex-direction:column;max-width:none}
  .section-title.stair span:nth-child(2){margin-left:clamp(1.4rem,7vw,4.5rem)}
  .promise-lead{margin-top:1rem;font-size:var(--fs-md);color:var(--c-ink-dim);max-width:52ch}
  .adv3{display:grid;grid-template-columns:1fr;gap:1.4rem 2rem;margin-top:2.6rem}
  @media(min-width:720px){.adv3{grid-template-columns:repeat(3,1fr)}}
  .adv3 h3{font-size:var(--fs-lg);color:var(--c-teal);margin-bottom:.4rem}
  .adv3 p{color:var(--c-ink-dim);font-size:var(--fs-sm)}

  /* block 3 — directions as rows */
  .dirs{margin-top:2.4rem;display:grid;gap:0}
  .dir{
    display:grid;grid-template-columns:auto 1fr;gap:.8rem 1.4rem;
    padding:2rem 0;border-top:1px solid var(--c-line);
  }
  .dir:first-child{border-top:0}
  .dir-n{font-family:var(--font-mono);font-weight:600;font-size:1.05rem;color:var(--c-ochre-ink);padding-top:.2rem}
  .dir h3{font-size:var(--fs-h3);letter-spacing:-.01em}
  .dir-sub{margin-top:.3rem;color:var(--c-teal);font-size:var(--fs-md);font-family:var(--font-display);font-weight:600}
  .dir p{margin-top:.7rem;color:var(--c-ink-dim);max-width:58ch}
  .dir-what{margin:.9rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .5rem}
  .dir-what li{
    font-size:var(--fs-xs);color:var(--c-ink);background:var(--c-surface);
    border:1px solid var(--c-line);border-radius:999px;padding:.3em .7em;
  }
  .dir-foot{margin-top:1.1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
  .dir .price{font-family:var(--font-mono);font-weight:600;font-size:var(--fs-sm);color:var(--c-ochre-ink)}
  .dir-more{font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);color:var(--c-teal);text-decoration:none}
  .dir-more:hover{color:var(--c-ochre-ink)}
  .dir-more .btn-arr{margin-left:.35em}

  .dir-media{
    display:block;grid-column:1/-1;margin-top:1rem;border-radius:var(--radius);overflow:hidden;
    background:#101a18;aspect-ratio:4/3;width:100%;max-width:480px;
  }
  .dir-media img{display:block;width:100%;height:100%;object-fit:cover}
  @media (min-width:900px){
    .dir{grid-template-columns:auto minmax(0,1fr) minmax(230px,300px);column-gap:2rem}
    .dir-media{grid-column:3;margin-top:0;align-self:start;max-width:none}
  }

  /* block 4 — what we actually do */
  .solves{margin-top:2.4rem;display:grid;gap:0}
  .solve{
    display:grid;grid-template-columns:1fr;gap:.3rem;
    padding:1.3rem 0;border-top:1px solid var(--c-line);
  }
  @media(min-width:680px){.solve{grid-template-columns:1fr 1fr;gap:1.5rem;align-items:baseline}}
  .solve:first-child{border-top:0}
  .solve-need{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);color:var(--c-ink)}
  .solve-fix{color:var(--c-ink-dim);font-size:var(--fs-sm)}
  .solve-fix::before{content:"\2192 ";color:var(--c-ochre-ink);font-family:var(--font-mono)}

  /* block 5 — cases */
  /* ---------- before/after slider ---------- */
  .case-media.ba{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize}
  .ba-after,.ba-before{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .ba-before{clip-path:inset(0 calc(100% - var(--pos,52%)) 0 0)}
  .ba-line{position:absolute;top:0;bottom:0;left:var(--pos,52%);width:2px;background:var(--c-paper);transform:translateX(-1px);box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 12px rgba(0,0,0,.35);pointer-events:none}
  .ba-handle{position:absolute;top:50%;left:var(--pos,52%);width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:999px;background:var(--c-paper);border:2px solid var(--c-teal);color:var(--c-teal);display:grid;place-items:center;cursor:ew-resize;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .15s ease}
  .ba-handle:hover{transform:scale(1.08)}
  .ba-handle:focus-visible{outline:3px solid var(--c-ochre);outline-offset:3px}
  .ba-handle svg{width:22px;height:22px;fill:currentColor}
  .ba-tag{position:absolute;top:10px;font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(16,26,24,.6);padding:.28em .6em;border-radius:999px;pointer-events:none}
  .ba-tag.is-before{left:10px}
  .ba-tag.is-after{right:10px}
  @media (prefers-reduced-motion:reduce){.ba-handle{transition:none}}

  .case-filter{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.5rem}
  .case-filter button{
    font-family:var(--font-body);font-size:var(--fs-sm);font-weight:600;
    padding:.45em .9em;border-radius:999px;border:1px solid var(--c-line-strong);
    background:transparent;color:var(--c-ink-dim);cursor:pointer;transition:all .16s ease;min-height:38px;
  }
  .case-filter button:hover{border-color:var(--c-teal);color:var(--c-teal)}
  .case-filter button[aria-pressed="true"]{background:var(--c-teal);border-color:var(--c-teal);color:var(--c-paper)}
  .case-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.8rem}
  @media(min-width:620px){.case-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:980px){.case-grid{grid-template-columns:repeat(3,1fr)}}
  .case-card{
    background:var(--c-surface);border:1px solid var(--c-line-strong);border-radius:var(--radius);
    padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;transition:transform .2s ease,border-color .2s ease;
  }
  .case-card[hidden]{display:none}
  .case-card:hover{transform:translateY(-3px);border-color:var(--c-teal)}
  .case-card.soon{border-style:dashed;background:transparent}
  .case-media{border-radius:var(--radius-sm);overflow:hidden;background:#000;aspect-ratio:3/4;margin-bottom:.3rem}
  .case-media video{display:block;width:100%;height:100%;object-fit:cover}
  .case-tag{
    align-self:flex-start;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.06em;
    text-transform:uppercase;padding:.3em .6em;border-radius:999px;background:var(--c-sage);color:#14231f;
  }
  .case-card.soon .case-tag{background:transparent;border:1px solid var(--c-line-strong);color:var(--c-ink-dim)}
  .case-card h3{font-size:var(--fs-md)}
  .case-card .case-cat{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--c-ink-dim)}
  .case-card p{font-size:var(--fs-sm);color:var(--c-ink-dim)}
  .case-task{font-size:var(--fs-sm)}
  .case-task b{color:var(--c-ink);font-weight:600}

  /* блок 8 — инструменты */
  .ai-note{
    margin-top:1.6rem;padding:1.5rem 1.6rem;border-left:3px solid var(--c-ochre);
    background:var(--c-surface);border-radius:0 var(--radius) var(--radius) 0;
    color:var(--c-ink);max-width:64ch;
  }
  .ai-note p{color:var(--c-ink-dim);font-size:var(--fs-md)}
  .ai-note p + p{margin-top:.7rem}

  /* block 9 — packages */
  .pkg-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.4rem}
  @media(min-width:640px){.pkg-grid{grid-template-columns:repeat(2,1fr)}}
  .pkg{
    background:var(--c-surface);border:1px solid var(--c-line-strong);border-radius:var(--radius);
    padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;
  }
  .pkg h3{font-size:var(--fs-lg)}
  .pkg-parts{color:var(--c-ink-dim);font-size:var(--fs-sm);flex:1}
  .pkg .price{font-family:var(--font-mono);font-weight:600;font-size:var(--fs-sm);color:var(--c-ochre-ink);margin-top:.4rem}
  .pkg-cta{margin-top:2rem}

  /* block 11 — final */
  .final .section-title{max-width:18ch}
  .final-note{margin-top:1rem;font-size:var(--fs-sm);color:var(--c-ink-dim)}

  /* schema: 3 chips -> simple stack (override old 4-chip grid) */
  .final .cta-grid{margin-top:2.2rem}
  .case-empty{margin-top:1.6rem;color:var(--c-ink-dim);font-size:var(--fs-sm);font-style:italic}

  /* ===== Task 1 — десктоп: компактный первый экран (мобайл/планшет без изменений) ===== */
  @media (min-width:900px){
    .hero.section{padding-block:1.8rem}
    .hero .wrap{padding-block:2rem}
    .hero-lockup{margin-bottom:1.5rem}
    .hero-lockup-mark{width:116px}
    .hero-geo{margin-top:.85rem}
    .hero-sub{margin-top:.95rem}
    .hero-cta{margin-top:1.6rem}
    .promise.section{padding-block:2.2rem}
    .promise .eyebrow{margin-bottom:1rem}
  }

  /* ===== Task 3.5 — skip-link + nav в шапке ===== */
  .skip{
    position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--c-accent);color:var(--c-on-accent);
    padding:.7em 1.1em;border-radius:0 0 8px 0;
    font-family:var(--font-body);font-weight:600;text-decoration:none;
  }
  .skip:focus{left:0}
  .topnav{display:flex;flex:1;flex-wrap:wrap;justify-content:center;gap:clamp(.6rem,1.6vw,1.4rem)}
  .topnav a{
    font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);
    color:var(--c-ink-dim);text-decoration:none;white-space:nowrap;
    transition:color .16s ease;
  }
  .topnav a:hover{color:var(--c-teal)}
  @media (max-width:1099px){.topnav{display:none}}

  /* ===== Task 3.2 — ссылки в блоке «Контакты» ===== */
  .contacts .v a{color:var(--c-teal);text-decoration:none}
  .contacts .v a:hover{text-decoration:underline;text-underline-offset:2px}