/* ===== SELF-HOSTED FONTS =====
   Subsets pulled from Google Fonts and served locally: no external CDN,
   no render-blocking stylesheet. Variable weight axes; unicode-range keeps
   the browser from fetching subsets the page does not use.

   Fraunces ships no Cyrillic glyphs, so PT Serif covers Cyrillic in the serif
   stack. Its unicode-range is deliberately clipped to the Cyrillic blocks only:
   Latin letters, digits and punctuation can never be served from PT Serif, which
   keeps "ProPlat", "100+" and the Latin half of "API-інтеграції" on Fraunces.
   size-adjust:96% scales PT Serif's x-height (50/100em) down to Georgia's
   (48/100em) — Georgia is what rendered Cyrillic headings before, so headings
   keep the size they were designed at and the Latin/Cyrillic size relationship
   on a mixed line is unchanged. Matching Fraunces' own x-height instead would
   need 88% and shrink every Cyrillic heading by a visible 12%.
   PT Serif has no weight below 400, so serif rules at 300 resolve to 400. The
   700 faces cover the one highlighted review line set at 600. Bold italic is
   not shipped: no serif rule combines italic with a weight above 400.

   Fraunces is subset to the glyphs the site renders: printable ASCII (the
   English pages need the full Latin alphabet, not just "ProPlat") plus the
   punctuation and typographic marks in use. Its latin-ext subsets are dropped
   entirely — no page contains a character from those blocks. Symbols such as
   → ✓ ✕ ≈ ✳ · № fall outside the range on purpose: they were never in
   Fraunces' unicode-range and already render from Georgia. The opsz and wght
   axes are kept intact, so optical sizing and weights 300–600 are unchanged;
   pinning them shrinks the files further but alters rendering. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-normal-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-normal-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 500;font-display:swap;src:url(fonts/fraunces-italic-subset.woff2) format('woff2');unicode-range:U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+00D7, U+02BC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2212}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/fraunces-normal-subset.woff2) format('woff2');unicode-range:U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+00D7, U+02BC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2212}
@font-face{font-family:'PT Serif';font-style:italic;font-weight:400;font-display:swap;size-adjust:96%;src:url(fonts/ptserif-italic-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'PT Serif';font-style:italic;font-weight:400;font-display:swap;size-adjust:96%;src:url(fonts/ptserif-italic-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:swap;size-adjust:96%;src:url(fonts/ptserif-normal-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:swap;size-adjust:96%;src:url(fonts/ptserif-normal-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:swap;size-adjust:96%;src:url(fonts/ptserif-normal-700-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:swap;size-adjust:96%;src:url(fonts/ptserif-normal-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}

  /* ===== LIGHT THEME (default) ===== */
  :root{
    --paper:#F4F0E8; --paper2:#ECE7DC;
    --ink:#17161A; --ink-soft:#4A4740; --ink-faint:#7B766B;
    --line:rgba(23,22,26,.16); --line-soft:rgba(23,22,26,.09);
    --accent:#0F766E; --accent-2:#0B5A54;
    /* inverted feature panels (final CTA + footer) — dark in BOTH themes */
    --panel-bg:#17161A; --panel-fg:#F4F0E8;
    --panel-faint:rgba(244,240,232,.62); --panel-line:rgba(244,240,232,.30);
    --grain:.045;
    --maxw:1160px;
    --serif:"Fraunces",Georgia,serif;
    --sans:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  }
  /* Cyrillic serif only on Ukrainian documents. Keeping PT Serif in the global
     stack made the English pages download the Cyrillic subset for the hidden
     "Українська версія" link, which renders nothing there. */
  :root:lang(uk){--serif:"Fraunces","PT Serif",Georgia,serif}
  /* ===== DARK THEME ===== */
  :root[data-theme="dark"]{
    --paper:#14151A; --paper2:#1B1D24;
    --ink:#ECE8DF; --ink-soft:#B7B1A4; --ink-faint:#8C877B;
    --line:rgba(236,232,223,.18); --line-soft:rgba(236,232,223,.10);
    --accent:#4FD6C4; --accent-2:#7FE6D8;
    --panel-bg:#0F1013; --panel-fg:#ECE8DF;
    --panel-faint:rgba(236,232,223,.6); --panel-line:rgba(236,232,223,.22);
    --grain:.05;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:78px}
  body{
    background:var(--paper);color:var(--ink);
    font-family:var(--sans);font-size:17px;line-height:1.65;
    -webkit-font-smoothing:antialiased;letter-spacing:.01em;position:relative;
    transition:background .3s ease,color .3s ease;
  }
  body:before{
    content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  }
  :root[data-theme="dark"] body:before{mix-blend-mode:screen;opacity:.35}
  main,header,footer{position:relative;z-index:2}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
  @media(max-width:640px){.wrap{padding:0 22px}}

  /* ===== Accessibility ===== */
  .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);
        padding:12px 20px;border-radius:3px;font-weight:600;transition:top .18s}
  .skip:focus{top:12px}
  a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
    outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
  @media(prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  }

  .serif{font-family:var(--serif)}
  .label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
  .idx{font-family:var(--serif);color:var(--accent);font-weight:400;font-variant-numeric:tabular-nums}

  .btn{display:inline-block;font-size:15px;font-weight:500;padding:14px 26px;border-radius:2px;transition:.18s;cursor:pointer;border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--sans)}
  .btn-ink{background:var(--ink);color:var(--paper)}
  .btn-ink:hover{background:transparent;color:var(--ink)}
  .btn-line:hover{background:var(--ink);color:var(--paper)}
  .tlink{font-weight:500;border-bottom:1px solid var(--accent);color:var(--accent);padding-bottom:2px;transition:.18s}
  .tlink:hover{opacity:.6}
  .arw::after{content:" \2192"}

  .rule{height:1px;background:var(--line);border:0}
  section{position:relative}

  /* ===== HEADER ===== */
  header{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:60}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
  .brand{font-family:var(--serif);font-weight:500;font-size:23px;letter-spacing:.02em}
  .brand i{font-style:italic;color:var(--accent)}
  .nav .menu{list-style:none;display:flex;gap:30px;align-items:center;margin-left:auto}
  .nav .menu a{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);transition:.18s}
  .nav .menu a:hover{color:var(--ink)}
  .nav-right{display:flex;align-items:center;gap:16px}
  .nav .btn{padding:10px 20px;font-size:13px;letter-spacing:.04em}
  .btn-ai{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;font-size:13px;font-weight:500;letter-spacing:.04em;font-family:var(--sans);
          border:1px solid var(--accent);color:var(--accent);border-radius:999px;background:transparent;cursor:pointer;white-space:nowrap;
          transition:background .18s,color .18s;animation:aiPulse 3.4s ease-in-out infinite}
  .btn-ai:hover{background:var(--accent);color:var(--paper);animation:none}
  .btn-ai svg{width:14px;height:14px;flex:none}
  @keyframes aiPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 36%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}}
  .btn-ai .ai-short{display:none;font-weight:600}
  @media(max-width:560px){.btn-ai svg,.btn-ai .ai-label{display:none}.btn-ai .ai-short{display:inline}.btn-ai{padding:9px 15px;gap:0}}
  @media(prefers-reduced-motion:reduce){.btn-ai{animation:none}}
  .theme-toggle{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);
        cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.18s;flex:none}
  .theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
  .theme-toggle svg{width:18px;height:18px}
  :root[data-theme="dark"] .theme-toggle .i-sun{display:block}
  :root[data-theme="dark"] .theme-toggle .i-moon{display:none}
  .theme-toggle .i-sun{display:none}
  .theme-toggle .i-moon{display:block}
  .lang-switch{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
  .lang-switch a{color:var(--ink-faint);transition:.18s}
  .lang-switch a:hover{color:var(--accent)}
  .lang-switch .cur{color:var(--ink);font-weight:600}
  .lang-switch .sep{color:var(--line)}
  @media(max-width:900px){.nav .menu{display:none}}

  /* ===== HERO ===== */
  .hero{padding:84px 0 0}
  .hero-top{display:grid;grid-template-columns:1.35fr .85fr;gap:60px;align-items:start}
  @media(max-width:900px){.hero-top{grid-template-columns:1fr;gap:40px}}
  .hero .kicker{margin-bottom:26px}
  .hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,74px);line-height:1.02;letter-spacing:-.015em}
  .hero h1 em{font-style:italic;font-weight:400;color:var(--accent)}
  .hero-badges{display:flex;justify-content:space-between;gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
  .hero-badges .hb b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.4vw,42px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .hero-badges .hb span{display:block;margin-top:7px;font-size:13px;letter-spacing:.02em;color:var(--ink-faint)}
  @media(max-width:900px){.hero-badges{margin-top:26px}}
  .hero .lede{margin-top:26px;max-width:30em;color:var(--ink-soft);font-size:19px}
  .hero-actions{margin-top:34px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .hindex{border-top:1px solid var(--ink);list-style:none}
  .hindex a{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line-soft);transition:.18s}
  .hindex a:hover{padding-left:8px}
  .hindex .idx{font-size:15px;min-width:26px}
  .hindex .t{font-size:15px;color:var(--ink)}

  .strip{padding:70px 0}
  .strip p{font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.4vw,40px);line-height:1.28;letter-spacing:-.01em;max-width:none}
  .strip p b{font-weight:400;font-style:italic;color:var(--accent)}

  /* ===== SERVICES ===== */
  .services{padding:30px 0 90px}
  .sechead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:10px;flex-wrap:wrap}
  .sechead h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3vw,38px);letter-spacing:-.01em}
  .srow{display:grid;grid-template-columns:64px 1fr 1.1fr auto;gap:28px;align-items:start;padding:30px 0;border-top:1px solid var(--line);transition:.2s}
  .srow:last-of-type{border-bottom:1px solid var(--line)}
  .srow:hover{background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--accent) 8%,transparent) 40%, transparent)}
  .srow .idx{font-size:26px}
  .srow h3{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.01em;line-height:1.15}
  .srow p{color:var(--ink-soft);font-size:15.5px}
  .srow .more{align-self:center;font-size:13px;letter-spacing:.04em;color:var(--accent);white-space:nowrap}
  @media(max-width:820px){
    .srow{grid-template-columns:44px 1fr;gap:10px 18px}
    .srow p{grid-column:2}.srow .more{grid-column:2;justify-self:start;margin-top:6px}
  }

  /* ===== STATS ===== */
  .stats{padding:74px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper2)}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  @media(max-width:700px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:36px 0}}
  .stat{padding:0 28px;border-left:1px solid var(--line)}
  .stat:first-child{border-left:0;padding-left:0}
  @media(max-width:700px){.stat{border-left:0;padding-left:0}.stat:nth-child(2n){border-left:1px solid var(--line);padding-left:26px}}
  .stat b{font-family:var(--serif);font-weight:300;font-size:clamp(46px,6vw,72px);line-height:.9;letter-spacing:-.02em;display:block;font-variant-numeric:tabular-nums}
  .stat span{display:block;margin-top:14px;font-size:14px;color:var(--ink-soft);max-width:16em}

  .block{padding:90px 0}
  .block-alt{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

  /* ===== CASES ===== */
  .cases-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--line)}
  @media(max-width:820px){.cases-grid{grid-template-columns:1fr}}
  .case{padding:30px 30px 34px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
  .case:nth-child(3n){border-right:0}
  @media(max-width:820px){.case{border-right:0}}
  .case .label{margin-bottom:18px}
  .case h3{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.2;margin-bottom:10px}
  .case p{font-size:15px;color:var(--ink-soft)}
  .case .res{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:14px;font-weight:500;color:var(--accent)}
  .case .meta{font-size:15px;color:var(--ink-soft);margin-bottom:6px}
  .case .meta b{color:var(--ink);font-weight:500}
  .cases-2{grid-template-columns:repeat(2,1fr)}
  .cases-2 .case:nth-child(3n){border-right:1px solid var(--line)}
  .cases-2 .case:nth-child(2n){border-right:0}
  @media(max-width:820px){.cases-2{grid-template-columns:1fr}.cases-2 .case{border-right:0}}
  .cat-label{margin:46px 0 0}
  .cat-label:first-of-type{margin-top:8px}
  .ph{display:inline;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);
      font-weight:500;padding:1px 7px;border-radius:3px;font-size:.92em;white-space:nowrap}
  .draftnote{margin-top:26px;font-size:13px;color:var(--ink-faint);border-left:2px solid var(--accent);padding:6px 0 6px 16px;max-width:60em}

  /* ===== CASES SLIDER ===== */
  .cslider{margin-top:34px}
  .cslider-bar{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:18px;margin-bottom:24px}
  .counter{font-family:var(--serif);font-size:19px;color:var(--ink-faint);font-variant-numeric:tabular-nums;letter-spacing:.04em}
  .counter b{color:var(--ink);font-weight:400}
  .cnav{display:flex;gap:10px}
  .cbtn{width:48px;height:48px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:50%;
        font-size:24px;line-height:0;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;justify-content:center;font-family:var(--serif)}
  .cbtn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
  .cviewport{overflow:hidden;padding:4px 0 6px}
  .ctrack{list-style:none;display:flex;gap:24px;transition:transform .62s cubic-bezier(.22,.61,.36,1);will-change:transform}
  .cslide{flex:0 0 clamp(280px,62%,540px);opacity:.3;transform:scale(.92);filter:saturate(.7);
          transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1),filter .6s ease}
  .cslide.is-active{opacity:1;transform:scale(1);filter:none}
  .cslide .case{height:100%;border:1px solid var(--line);border-radius:5px;padding:34px 32px;background:var(--paper)}
  :root[data-theme="dark"] .cslide .case{background:var(--paper2)}
  .cslide.is-active .case{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  @media(max-width:640px){.cslide{flex-basis:87%;gap:16px}.ctrack{gap:16px}}
  .chip{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
        border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;padding:4px 12px;margin-bottom:18px}
  .cdots{display:flex;gap:10px;margin-top:26px}
  .cdot{width:9px;height:9px;border-radius:50%;border:1px solid var(--ink-faint);background:transparent;cursor:pointer;padding:0;transition:.2s}
  .cdot:hover{border-color:var(--accent)}
  .cdot.is-active{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
  @media(prefers-reduced-motion:reduce){.ctrack,.cslide{transition:none}}

  /* Reviews slider — reuse cases mechanics; 2 cards/slide desktop, 1 ≤700px, no dimming */
  /* no global stretch: each slide keeps its own height; JS (autoHeight) sizes the
     viewport + min-height of the visible pair, so short quotes stay compact */
  .cslider--rev .ctrack{align-items:flex-start}
  .cslider--rev .cviewport{transition:height .5s cubic-bezier(.22,.61,.36,1)}
  .cslider--rev .cslide{flex:0 0 calc(50% - 12px);opacity:1;transform:none;filter:none}
  .cslider--rev .quote{margin:0;border:1px solid var(--line);border-radius:5px;padding:32px 30px;background:var(--paper);transition:min-height .5s cubic-bezier(.22,.61,.36,1)}
  :root[data-theme="dark"] .cslider--rev .quote{background:var(--paper2)}
  @media(max-width:700px){.cslider--rev .cslide{flex-basis:100%}}
  @media(prefers-reduced-motion:reduce){.cslider--rev .cviewport,.cslider--rev .quote{transition:none}}

  /* ===== ASK AI ===== */
  .ai-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:34px}
  @media(max-width:820px){.ai-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:420px){.ai-grid{grid-template-columns:1fr}}
  .ai-btn{display:flex;align-items:center;gap:13px;padding:22px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
          background:transparent;color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:500;cursor:pointer;transition:.18s;text-align:left}
  .ai-btn:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}
  .ai-btn svg{width:24px;height:24px;flex:none}
  .ai-hint{margin-top:18px;font-size:14px;color:var(--accent);min-height:21px;transition:opacity .2s}
  /* Ask-AI as dark CTA (like contacts) */
  .ask-cta .ai-grid{grid-template-columns:repeat(2,1fr);margin-top:0;border-top-color:var(--panel-line);border-left-color:var(--panel-line)}
  @media(max-width:520px){.ask-cta .ai-grid{grid-template-columns:1fr}}
  .ask-cta .ai-btn{border-right-color:var(--panel-line);border-bottom-color:var(--panel-line);color:var(--panel-fg)}
  .ask-cta .ai-btn:hover{background:color-mix(in srgb,var(--panel-fg) 9%,transparent);color:var(--panel-fg)}
  .ask-cta .ai-hint{color:var(--panel-fg)}
  .ask-cta .ai-cue{margin-top:16px;font-weight:600;font-size:15px;color:#5EE0CF}
  /* почергове мерехтіння кнопок AI */
  .ask-cta .ai-btn{animation:aiBlink 4.8s ease-in-out infinite}
  .ask-cta .ai-btn:nth-child(1){animation-delay:0s}
  .ask-cta .ai-btn:nth-child(2){animation-delay:.6s}
  .ask-cta .ai-btn:nth-child(3){animation-delay:1.2s}
  .ask-cta .ai-btn:nth-child(4){animation-delay:1.8s}
  .ask-cta .ai-btn:nth-child(5){animation-delay:2.4s}
  .ask-cta .ai-btn:nth-child(6){animation-delay:3s}
  .ask-cta .ai-btn:nth-child(7){animation-delay:3.6s}
  .ask-cta .ai-btn:nth-child(8){animation-delay:4.2s}
  @keyframes aiBlink{0%,14%,100%{box-shadow:inset 0 0 0 0 transparent}6%{box-shadow:inset 0 0 46px -12px color-mix(in srgb,var(--accent) 60%,transparent)}}
  @media(prefers-reduced-motion:reduce){.ask-cta .ai-btn{animation:none}}

  /* ===== UI effects (progress, word-reveal, tilt) ===== */
  #scrollProgress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:70;will-change:transform;transition:transform .08s linear}
  .to-top{position:fixed;left:22px;bottom:22px;z-index:75;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.16);transition:transform .18s,background .18s,color .18s,border-color .18s}
  .to-top[hidden]{display:none}
  .to-top:hover{background:var(--accent);color:var(--paper);border-color:var(--accent);transform:translateY(-2px)}
  .to-top svg{width:20px;height:20px}
  @media(max-width:520px){.to-top{left:14px;bottom:14px;width:42px;height:42px}}
  .hero h1 .w{display:inline-block;opacity:0;transform:translateY(16px);animation:wordUp .62s cubic-bezier(.22,.61,.36,1) forwards}
  @keyframes wordUp{to{opacity:1;transform:none}}
  .srow,.price,.pcard{transition:transform .18s ease,background .2s ease,border-color .2s ease}
  /* shine sweep on ink buttons */
  .btn-ink{position:relative;overflow:hidden}
  .btn-ink::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.30),transparent);transform:skewX(-18deg);pointer-events:none}
  .btn-ink:hover::after{animation:btnShine .75s ease}
  @keyframes btnShine{to{left:150%}}
  .hero-actions .btn{transition:transform .18s ease,background .18s,color .18s,border-color .18s}
  /* spotlight glow on dark CTA panels */
  .final{position:relative;overflow:hidden}
  .final .wrap{position:relative;z-index:1}
  /* aurora glow у темних CTA-панелях */
  .final::before{content:"";position:absolute;inset:-25%;pointer-events:none;z-index:0;opacity:.55;
    background:radial-gradient(38% 48% at 22% 22%, color-mix(in srgb,var(--accent) 34%,transparent), transparent 70%),
               radial-gradient(46% 56% at 82% 74%, color-mix(in srgb,var(--accent) 24%,transparent), transparent 72%);
    filter:blur(22px);animation:aurora 15s ease-in-out infinite alternate}
  @keyframes aurora{0%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-3%) scale(1.09)}100%{transform:translate(-3%,4%) scale(1.05)}}
  /* spotlight-рамка на картках (за курсором) */
  .case,.pcard,.srow{position:relative}
  .case::before,.pcard::before,.srow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .25s ease;
    background:radial-gradient(160px circle at var(--sx,50%) var(--sy,50%), var(--accent), transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask-composite:exclude}
  .case:hover::before,.pcard:hover::before,.srow:hover::before{opacity:1}
  /* hero constellation canvas */
  .hero{position:relative}
  .hero > .wrap{position:relative;z-index:1}
  #heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
  /* integrations marquee */
  .marquee{overflow:hidden;margin-top:36px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .marquee-track{display:flex!important;flex-wrap:nowrap!important;width:max-content;border:0!important;animation:marq 34s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-track span{flex:0 0 auto!important;min-width:auto!important;white-space:nowrap;border-top:0!important;border-left:0!important;border-bottom:0!important;padding:16px 26px!important}
  @keyframes marq{to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.hero h1 .w{opacity:1;transform:none;animation:none}.srow,.price,.pcard{transform:none!important}.btn-ink:hover::after{animation:none}.final::before{display:none}.marquee-track{animation:none}#heroCanvas{display:none}.case::before,.pcard::before,.srow::before{display:none}}

  /* ===== Scroll reveal + nav active ===== */
  /* каскад: елементи секції з'являються по черзі (zoom-fade) */
  .js main > section:not(.hero) > .wrap > *, .js section.final > .wrap > *{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .55s ease, transform .62s cubic-bezier(.22,.61,.36,1)}
  .js main > section:not(.hero) > .wrap.in > *, .js section.final > .wrap.in > *{opacity:1;transform:none}
  /* Префікс `.js` обов'язковий: без нього селектор має специфічність (0,3,0) і
     програє базовому правилу вище (0,3,2), чий шорткат `transition` містить
     delay:0s — каскад тоді не працює, усі діти виїжджають одночасно.
     З `.js` це (0,4,0) > (0,3,2). Значення затримок не змінювались. */
  .js .wrap.in > *:nth-child(1){transition-delay:.03s}
  .js .wrap.in > *:nth-child(2){transition-delay:.11s}
  .js .wrap.in > *:nth-child(3){transition-delay:.19s}
  .js .wrap.in > *:nth-child(4){transition-delay:.27s}
  .js .wrap.in > *:nth-child(5){transition-delay:.35s}
  .js .wrap.in > *:nth-child(6){transition-delay:.43s}
  .js .wrap.in > *:nth-child(7){transition-delay:.51s}
  .js .wrap.in > *:nth-child(n+8){transition-delay:.58s}
  .nav .menu a{position:relative}
  .nav .menu a.active{color:var(--ink)}
  .nav .menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent)}
  .srow:hover,.price:hover,.pcard:hover{transition-delay:0s!important}
  @media(prefers-reduced-motion:reduce){
    .js main > section:not(.hero) > .wrap > *, .js section.final > .wrap > *{opacity:1;transform:none;transition:none}
  }

  /* ===== AI assistant widget ===== */
  .aiw{position:fixed;right:22px;bottom:22px;z-index:80;font-family:var(--sans)}
  .aiw-launch{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;background:var(--accent);color:#fff;
              display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(0,0,0,.28);transition:transform .18s,background .18s}
  .aiw-launch:hover{transform:translateY(-2px)}
  .aiw-launch svg{width:26px;height:26px}
  .aiw-ic-close{display:none}
  .aiw.open .aiw-ic-open{display:none}
  .aiw.open .aiw-ic-close{display:block}
  .aiw-panel{position:absolute;right:0;bottom:72px;width:min(362px,calc(100vw - 44px));height:462px;max-height:calc(100vh - 120px);
             background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.30);
             display:flex;flex-direction:column;overflow:hidden;animation:aiwIn .2s ease}
  .aiw-panel[hidden]{display:none}
  @keyframes aiwIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.aiw-panel{animation:none}}
  .aiw-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--paper2)}
  .aiw-dot{width:9px;height:9px;border-radius:50%;background:#31c48d;flex:none}
  .aiw-title{font-weight:600;font-size:15px;color:var(--ink)}
  .aiw-sub{font-size:12px;color:var(--ink-faint)}
  .aiw-x{margin-left:auto;border:none;background:transparent;color:var(--ink-faint);font-size:16px;cursor:pointer;line-height:1}
  .aiw-x:hover{color:var(--ink)}
  .aiw-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
  .aiw-msg{max-width:85%;padding:10px 13px;border-radius:12px;font-size:14px;line-height:1.5}
  .aiw-msg.bot{background:var(--paper2);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start}
  .aiw-msg.me{background:var(--accent);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
  .aiw-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
  .aiw-form input{flex:1;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:10px 15px;font-size:14px;font-family:var(--sans)}
  .aiw-form input:focus{outline:none;border-color:var(--accent)}
  .aiw-form button{width:42px;height:42px;min-width:42px;flex:none;border:none;padding:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .aiw-form button svg{width:19px;height:19px}
  .aiw-launch{position:relative;overflow:hidden}
  .aiw-av{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
  .aiw.open .aiw-av{display:none}
  @media(max-width:520px){.aiw{right:14px;bottom:14px}.aiw-panel{height:72vh}}

  /* ===== Consent + cookie ===== */
  .form-consent{grid-column:1/3;font-size:12px;color:var(--panel-faint);margin-top:-2px}
  .form-consent a{color:var(--panel-fg);text-decoration:underline}
  @media(max-width:560px){.form-consent{grid-column:1}}
  .cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:600px;margin:0 auto;
          background:var(--panel-bg);color:var(--panel-fg);border:1px solid var(--panel-line);border-radius:12px;
          padding:15px 18px;display:flex;gap:16px;align-items:center;box-shadow:0 12px 40px rgba(0,0,0,.32)}
  .cookie[hidden]{display:none}
  .cookie p{font-size:13px;color:var(--panel-faint);flex:1;line-height:1.5}
  .cookie a{color:var(--panel-fg);text-decoration:underline}
  .cookie button{background:var(--panel-fg);color:var(--panel-bg);border:1px solid var(--panel-fg);border-radius:2px;
                 padding:10px 22px;font-size:14px;font-weight:500;font-family:var(--sans);cursor:pointer;white-space:nowrap;transition:.18s}
  .cookie button:hover{background:transparent;color:var(--panel-fg)}
  @media(max-width:520px){.cookie{flex-direction:column;align-items:stretch;text-align:center;bottom:90px}}

  /* ===== Global overflow guard ===== */
  html,body{max-width:100%;overflow-x:clip}

  /* ===== Burger + mobile menu ===== */
  .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid var(--line);border-radius:9px;background:transparent;cursor:pointer;padding:0}
  .burger span{display:block;width:20px;height:2px;background:var(--ink);margin:0 auto;transition:transform .2s,opacity .2s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);
               display:flex;flex-direction:column;padding:10px 22px 20px;box-shadow:0 16px 34px rgba(0,0,0,.14)}
  .mobile-menu[hidden]{display:none}
  .mobile-menu a{padding:14px 4px;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line-soft)}
  .mobile-menu a:last-child{border-bottom:0}
  .mobile-menu .mm-cta{margin-top:14px;text-align:center;border-radius:2px;color:var(--paper)}
  .hdr-call{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;align-items:center;justify-content:center;color:var(--ink);transition:.18s;flex:none}
  .hdr-call:hover{border-color:var(--accent);color:var(--accent)}
  .hdr-call svg{width:19px;height:19px}
  @media(max-width:900px){ .burger{display:flex} .cta-desktop{display:none} .hdr-call{display:inline-flex} }
  @media(max-width:560px){ .nav-right{gap:9px} }
  /* ≤420px шапка не влазила (brand + перемикачі + бургер > ширини вікна) і бургер
     обрізало через overflow-x:clip. Ховаємо перемикач мови — лише там, де є
     бургер: у мобільному меню мова вже є окремим пунктом. На privacy бургера
     немає, тож :has() лишає перемикач на місці — інакше мову там не змінити. */
  @media(max-width:420px){ .nav:has(.burger) .lang-switch{display:none} .nav{gap:10px} }
  @media(min-width:901px){ .mobile-menu{display:none!important} }

  /* ===== Cases slider — mobile no-cut ===== */
  @media(max-width:640px){
    .cslide{flex-basis:100%}
    .ctrack{gap:14px}
    .cslide .case{padding:24px 20px}
  }

  /* ===== Ask-AI copy modal ===== */
  .ai-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;
            background:rgba(10,10,14,.55);backdrop-filter:blur(3px);animation:aiModalIn .18s ease}
  .ai-modal[hidden]{display:none}
  .ai-modal-card{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;max-width:450px;width:100%;
                 padding:34px 30px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.42);animation:aiCardIn .2s ease}
  @keyframes aiModalIn{from{opacity:0}to{opacity:1}}
  @keyframes aiCardIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
  .ai-modal-ic{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;background:color-mix(in srgb,var(--accent) 15%,transparent);
               color:var(--accent);display:flex;align-items:center;justify-content:center}
  .ai-modal-ic svg{width:28px;height:28px}
  .ai-modal h3{font-family:var(--serif);font-weight:400;font-size:23px;margin-bottom:12px;letter-spacing:-.01em}
  .ai-modal-lead{color:var(--accent);font-weight:600;margin-bottom:10px;font-size:15.5px}
  .ai-modal p{color:var(--ink-soft);font-size:15px;line-height:1.6;margin:0 auto 6px;max-width:34em}
  .ai-modal b{color:var(--ink)}
  .ai-modal kbd{font-family:var(--sans);font-size:13px;background:var(--paper2);border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:var(--ink)}
  .ai-modal-actions{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
  .ai-modal-actions .btn{padding:12px 24px}
  @media(prefers-reduced-motion:reduce){.ai-modal,.ai-modal-card{animation:none}}

  /* ===== PRICING ===== */
  .prices{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin-top:44px}
  @media(max-width:820px){.prices{grid-template-columns:1fr}}
  .price{padding:36px 30px;border-right:1px solid var(--line);position:relative}
  .price:last-child{border-right:0}
  @media(max-width:820px){.price{border-right:0;border-bottom:1px solid var(--line)}.price:last-child{border-bottom:0}}
  .price:has(.rec){background:color-mix(in srgb,var(--accent) 7%,transparent);box-shadow:inset 0 0 0 1.5px var(--accent);border-radius:4px}
  .price .rec{position:absolute;top:14px;right:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--paper);background:var(--accent);padding:4px 10px;border-radius:999px}
  .price .pname{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
  .price .amt{font-family:var(--serif);font-weight:300;font-size:40px;letter-spacing:-.01em;margin:18px 0 4px;font-variant-numeric:tabular-nums}
  .price .amt small{font-size:15px;color:var(--ink-faint);font-family:var(--sans)}
  .price ul{list-style:none;margin:20px 0 26px}
  .price li{font-size:14.5px;color:var(--ink-soft);padding:9px 0;border-top:1px solid var(--line-soft);display:flex;gap:10px}
  .price li:before{content:"—";color:var(--accent)}
  .promo{margin-top:26px;font-size:15px;display:flex;gap:12px;align-items:baseline}
  .promo .idx{font-size:15px}

  /* ===== PORTFOLIO ===== */
  .plist{margin-top:40px;border-top:1px solid var(--line)}
  .prow{display:grid;grid-template-columns:0.7fr 2fr auto;gap:26px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:.18s}
  .prow:hover{padding-left:8px}
  .prow h3{font-family:var(--serif);font-weight:400;font-size:22px}
  .prow p{font-size:14.5px;color:var(--ink-soft)}
  .prow .go{font-size:13px;letter-spacing:.05em;color:var(--accent);white-space:nowrap}
  @media(max-width:700px){.prow{grid-template-columns:1fr auto;gap:6px 16px}.prow p{grid-column:1/3;order:3}}

  /* ===== INTEGRATIONS ===== */
  .integr{display:flex;flex-wrap:wrap;margin-top:36px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .integr span{flex:1 1 20%;min-width:130px;display:flex;align-items:center;justify-content:center;gap:9px;padding:18px 12px;font-size:14px;color:var(--ink-soft);
               border-right:1px solid var(--line);border-bottom:1px solid var(--line);letter-spacing:.02em;transition:color .18s,background .18s}
  .integr span:hover{color:var(--ink);background:color-mix(in srgb,var(--accent) 6%,transparent)}
  .integr svg{width:18px;height:18px;flex:none;opacity:.85}

  /* ===== QUOTES ===== */
  .quotes{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
  @media(max-width:760px){.quotes{grid-template-columns:1fr}}
  .quote{padding:34px 34px 30px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
  .quote:nth-child(2n){border-right:0}
  .quote:last-child{border-right:0}
  @media(max-width:760px){.quote{border-right:0}}
  .quote p{font-family:var(--serif);font-weight:300;font-style:italic;font-size:20px;line-height:1.4;letter-spacing:-.01em}
  .quote cite{display:block;margin-top:18px;font-style:normal;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}

  /* Флагманський відгук — статичний блок над слайдером (.quote + .rev-lead).
     Акцент трохи сильніший за картки слайдера: teal-рамка, підкладка, більший кегль. */
  .rev-lead{margin-top:34px;padding:38px 40px 32px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));
            border-radius:6px;background:color-mix(in srgb,var(--accent) 5%,transparent)}
  .rev-lead .rev-lead-h{font-family:var(--serif);font-style:normal;font-weight:600;color:var(--accent);
            font-size:clamp(21px,2.6vw,28px);line-height:1.2;letter-spacing:-.01em;margin-bottom:16px}
  .rev-lead blockquote p{font-size:clamp(19px,1.7vw,23px);max-width:46em}
  @media(max-width:640px){.rev-lead{padding:26px 22px 24px}}

  /* ===== PROCESS ===== */
  .steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:40px;border-top:1px solid var(--line)}
  @media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
  .step{padding:26px 22px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .step:last-child{border-right:0}
  .step .idx{font-size:22px;display:block;margin-bottom:12px}
  .step h3{font-family:var(--serif);font-weight:400;font-size:19px;margin-bottom:6px}
  .step p{font-size:13.5px;color:var(--ink-soft)}

  /* ===== SERVICE DETAIL ===== */
  .svc{border-top:1px solid var(--line);padding:76px 0}
  .svc-head{display:grid;grid-template-columns:64px 1fr;gap:28px;margin-bottom:36px}
  .svc-head .idx{font-size:26px}
  .svc-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.2vw,40px);line-height:1.06;letter-spacing:-.015em;margin-bottom:16px}
  .svc-head .lead{color:var(--ink-soft);font-size:18px;max-width:40em}
  .svc-cols{display:grid;grid-template-columns:1fr 1fr;gap:52px;padding-left:92px}
  @media(max-width:820px){.svc-cols{grid-template-columns:1fr;gap:32px;padding-left:0}.svc-head{grid-template-columns:44px 1fr;gap:16px}}
  .svc h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:22px 0 12px}
  .svc h3:first-child{margin-top:0}
  .svc p{color:var(--ink-soft);font-size:15.5px}
  .svc ul{list-style:none;margin-top:6px}
  .svc ul li{font-size:15.5px;color:var(--ink-soft);padding:8px 0;border-top:1px solid var(--line-soft);display:flex;gap:12px}
  .svc ul li{padding-left:0}
  .svc ul li:before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;
    background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);
    display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1}
  .svc ul li:before{content:"✓"}
  .svc .pk{color:var(--ink)}
  .faq{margin-top:8px}
  .faq details{border-top:1px solid var(--line-soft);padding:12px 0}
  .faq summary{cursor:pointer;font-weight:500;font-size:15px;list-style:none}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:before{content:"+";color:var(--accent);margin-right:10px;font-family:var(--serif)}
  .faq details[open] summary:before{content:"–"}
  .faq p{margin-top:8px;font-size:14.5px}
  .svc .cta{margin-top:34px;padding-left:92px}
  @media(max-width:820px){.svc .cta{padding-left:0}}

  /* ===== FINAL CTA (inverted, dark in both themes) ===== */
  .final{background:var(--panel-bg);color:var(--panel-fg);border-top:1px solid var(--panel-bg)}
  .final .wrap{padding-top:88px;padding-bottom:88px}
  .final-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
  @media(max-width:900px){.final-grid{grid-template-columns:1fr;gap:48px}}
  .final-side{align-self:stretch;display:flex;flex-direction:column}
  .final-side .fh{color:var(--panel-fg);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin:0 0 12px}
  .final-side a,.final-side p{color:var(--panel-faint);font-size:14px;line-height:1.95;display:block}
  .final-side a:hover{color:var(--panel-fg)}
  .final-side .block2{margin-top:30px;padding-top:26px;border-top:1px solid var(--panel-line)}
  .side-card{flex:1;margin-top:30px;min-height:150px;border:1px solid var(--panel-line);border-radius:6px;
             padding:28px;display:flex;flex-direction:column;justify-content:center;gap:14px}
  .side-card .sc-t{font-family:var(--serif);font-weight:300;font-size:21px;line-height:1.25;color:var(--panel-fg)}
  .side-card .sc-p{color:var(--panel-faint);font-size:14px}
  .side-card .tlink{align-self:flex-start}
  @media(max-width:900px){.side-card{min-height:0}}
  .final .label{color:var(--panel-faint)}
  .final h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.4vw,54px);line-height:1.04;letter-spacing:-.015em;margin:18px 0;max-width:16em;color:var(--panel-fg)}
  .final p{color:var(--panel-faint);max-width:34em;font-size:18px}
  form{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;max-width:660px}
  form .full{grid-column:1/3}
  @media(max-width:560px){form{grid-template-columns:1fr}form .full{grid-column:1}}
  form label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--panel-faint);margin-bottom:8px}
  form input,form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--panel-line);
        color:var(--panel-fg);font-family:var(--sans);font-size:16px;padding:8px 2px}
  form input::placeholder,form textarea::placeholder{color:color-mix(in srgb,var(--panel-fg) 45%,transparent)}
  form input:focus,form textarea:focus{outline:none;border-bottom-color:var(--panel-fg)}
  form input.invalid,form textarea.invalid{border-bottom-color:#FFB4A2}
  form .field-error{font-size:12px;line-height:1.4;letter-spacing:0;text-transform:none;color:#FFB4A2;max-width:none;margin-top:6px}
  form button{grid-column:1/3;justify-self:start;background:var(--panel-fg);color:var(--panel-bg);border:1px solid var(--panel-fg);
        padding:15px 34px;font-family:var(--sans);font-size:15px;font-weight:500;cursor:pointer;border-radius:2px;transition:.18s;margin-top:8px}
  form button:hover{background:transparent;color:var(--panel-fg)}
  @media(max-width:560px){form button{grid-column:1}}

  /* ===== FOOTER ===== */
  footer{background:var(--panel-bg);color:var(--panel-faint);padding:56px 0 40px}
  .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
  @media(max-width:700px){.fgrid{grid-template-columns:1fr 1fr}}
  footer .brand{color:var(--panel-fg);margin-bottom:14px}
  footer h2.fh{color:var(--panel-fg);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin-bottom:14px}
  footer p,footer a{font-size:14px;line-height:1.9;display:block}
  footer a:hover{color:var(--panel-fg)}
  .fmsg{margin-top:8px;display:flex;gap:14px;flex-wrap:wrap}
  .fmsg a{display:inline-flex;align-items:center;gap:7px;color:var(--panel-fg);font-size:15px}
  .fmsg svg{width:18px;height:18px}
  .fmsg a:hover{color:var(--accent-2)}
  .fmsg svg{width:16px;height:16px}
  .fbot{margin-top:44px;padding-top:22px;border-top:1px solid var(--panel-line);font-size:13px;color:var(--panel-faint);
        display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ==================================================================
   PRIVACY PAGE — scoped overrides (body.privacy)
   Тримає /privacy 1:1 з попереднім окремим CSS, не впливаючи на home.
   ================================================================== */
body.privacy{line-height:1.7}
body.privacy::before{display:none}                 /* без grain-оверлея (як було) */
body.privacy .wrap{padding:0 24px}
body.privacy main .wrap{max-width:820px}           /* вузький контент; шапка лишається 1160 */
body.privacy .nav{height:72px;gap:16px}
body.privacy .nav .menu{gap:26px}
body.privacy a{color:var(--accent)}                /* як у старому global; хедер-лінки перекриті нижче */
body.privacy .brand{color:var(--ink)}
body.privacy .back{color:var(--ink-soft);font-size:13px;letter-spacing:.04em;text-transform:uppercase;transition:.18s}
body.privacy .back:hover{color:var(--ink)}
body.privacy .btn-cta{background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:2px;padding:10px 20px;font-size:13px;letter-spacing:.04em;transition:.18s;white-space:nowrap}
body.privacy .btn-cta:hover{background:transparent;color:var(--ink)}
body.privacy main{padding:60px 0 80px}
body.privacy h1{font-family:var(--serif);font-weight:300;font-size:clamp(30px,5vw,46px);letter-spacing:-.02em;line-height:1.08;margin-bottom:10px}
body.privacy .upd{color:var(--ink-faint);font-size:14px;margin-bottom:40px}
body.privacy h2{font-family:var(--serif);font-weight:400;font-size:22px;margin:38px 0 12px;letter-spacing:-.01em;color:var(--ink)}
body.privacy p{color:var(--ink-soft);margin-bottom:14px}
body.privacy ul{margin:0 0 14px 22px;color:var(--ink-soft)}
body.privacy li{margin:6px 0}
body.privacy strong{color:var(--ink)}
body.privacy .note{background:color-mix(in srgb,var(--accent) 8%,transparent);border-left:2px solid var(--accent);padding:12px 16px;border-radius:4px;font-size:15px;color:var(--ink-soft);margin:18px 0}
body.privacy footer{background:transparent;border-top:1px solid var(--line);padding:30px 0;color:var(--ink-faint);font-size:14px}
@media(max-width:900px){body.privacy .nav .menu{display:flex}}
@media(max-width:820px){body.privacy .nav .menu{display:none}body.privacy .btn-cta{display:none}}

/* ==================================================================
   SERVICE PAGES (.svc-*) — /avtomatyzatsiya-biznes-protsesiv/ та наступні
   Тільки те, чого немає на головній; решта класів перевикористовується.
   ================================================================== */

  /* хлібні крихти */
  .svc-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ink-faint)}
  .svc-crumbs li+li:before{content:"/";margin-right:8px;color:var(--line)}
  .svc-crumbs a{color:var(--ink-soft);transition:.18s}
  .svc-crumbs a:hover{color:var(--accent)}
  .svc-crumbs [aria-current="page"]{color:var(--ink)}

  /* hero сервісної сторінки — компактніший за головну, без констеляції */
  .svc-hero{padding:38px 0 62px}
  .svc-hero .kicker{margin:26px 0 18px}
  .svc-hero h1{font-size:clamp(34px,5.2vw,60px)}
  .svc-hero .lede{max-width:34em}

  /* вступні абзаци */
  .svc-intro{padding:0 0 10px}
  .svc-intro p{max-width:44em;font-size:18px;color:var(--ink-soft)}
  .svc-intro p+p{margin-top:18px}

  /* сітка карток (успадковує .cases-grid: 3 колонки → 1 на ≤820px) */
  .svc-cards .case h3{margin-bottom:12px}
  .svc-cards .case p:last-child{margin-bottom:0}

  /* «Як ми працюємо» — 4 кроки замість 5 на головній */
  .steps.svc-steps4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:820px){.steps.svc-steps4{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.steps.svc-steps4{grid-template-columns:1fr}.steps.svc-steps4 .step{border-right:0}}
  .svc-steps4 .step p{font-size:14.5px}
  .svc-pk{color:var(--ink);font-weight:500}

  /* «Чому ми» */
  .svc-why{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 52px;margin-top:40px}
  @media(max-width:820px){.svc-why{grid-template-columns:1fr;gap:0}}
  .svc-why li{padding:22px 0;border-top:1px solid var(--line);font-size:16px;color:var(--ink-soft)}
  .svc-why li b{color:var(--ink);font-weight:500}

  /* FAQ — той самий патерн .faq, але поза колонками .svc */
  .svc-faq .faq{margin-top:34px;border-bottom:1px solid var(--line-soft)}
  .svc-faq .faq details{border-top:1px solid var(--line);padding:16px 0}
  .svc-faq .faq summary{font-size:16.5px}
  .svc-faq .faq p{margin-top:10px;font-size:15.5px;color:var(--ink-soft);max-width:52em}

  /* фінальний CTA — темна панель, кнопки в панельних кольорах */
  .svc-cta .wrap{text-align:left}
  .svc-cta h2{max-width:14em}
  .svc-cta-actions{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}
  .svc-cta-actions .btn{border-color:var(--panel-fg);color:var(--panel-fg)}
  .svc-cta-actions .btn-ink{background:var(--panel-fg);color:var(--panel-bg)}
  .svc-cta-actions .btn-ink:hover{background:transparent;color:var(--panel-fg)}
  .svc-cta-actions .btn-line:hover{background:var(--panel-fg);color:var(--panel-bg)}