:root{
  /* Згенеровано з design/tokens.json. Руками не правити. */
  --paper:#FAFAF8;
  --band:#F2F2ED;
  --snow:#FFFFFF;
  --ink:#1D1D1F;
  --muted:#55555C;
  --line:#E4E4DF;
  --grid:#EFEFE9;
  --acc:#0071E3;
  --acc-text:#0060C4;
  --acc-soft:#EAF3FE;
  --warn:#FFF6DC;
  --ok:#1B7F4B;
  --bad:#B00020;
  --dark:#2E2E33;
  --dark-2:#43434A;
  --on-dark:#E8E8EA;
  --on-dark-muted:#A8A8AE;
  --xls:#21A366;
  --docx:#2B7CD3;
  --pdf:#EF4136;
  --gsheet:#0F9D58;
  --paper-2:#FCFCFA;
  --line-soft:#F1F1EC;
  --line-strong:#CFCFC9;
  --field-line:#D6D6D0;
  --field-hover:#B9B9B2;
  --placeholder:#8A8A90;
  --dot:#E0E0DA;
  --acc-border:#BEDCFB;
  --warm-700:#E8C766;
  --on-dark-3:#8C8C93;
  --m-tg:#229ED9;
  --m-vb:#7360F2;
  --m-wa:#25D366;
  --m-ml:#5A6270;
  --maxw:1120px;
  --cell-h:30px;
  --cell-w:104px;
  --radius:14px;
  --radius-sm:10px;
  --f-disp:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --shadow-card:0 1px 2px rgb(29 29 31 / .04), 0 10px 28px -18px rgb(29 29 31 / .28);
  --shadow-card-h:0 2px 4px rgb(29 29 31 / .05), 0 18px 40px -20px rgb(29 29 31 / .34);
}
/* Шрифти лежать на сайті (політика cookie, розд. 2): без запитів на fonts.googleapis.com */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/JetBrainsMono-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/JetBrainsMono-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/JetBrainsMono-400-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/JetBrainsMono-400-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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/JetBrainsMono-500-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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/JetBrainsMono-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/JetBrainsMono-500-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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/JetBrainsMono-500-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:'Manrope';font-style:normal;font-weight:200;font-display:swap;src:url(assets/fonts/Manrope-200-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:'Manrope';font-style:normal;font-weight:200;font-display:swap;src:url(assets/fonts/Manrope-200-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200;font-display:swap;src:url(assets/fonts/Manrope-200-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:'Manrope';font-style:normal;font-weight:200;font-display:swap;src:url(assets/fonts/Manrope-200-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:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/Manrope-300-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:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/Manrope-300-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/Manrope-300-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:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/Manrope-300-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:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Manrope-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:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Manrope-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Manrope-400-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:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Manrope-400-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:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Manrope-500-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:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Manrope-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Manrope-500-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:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Manrope-500-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:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Manrope-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:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Manrope-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Manrope-700-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:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Manrope-700-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}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-disp); font-weight:400; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px var(--cell-h)),
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px var(--cell-w));
  background-position:0 0;
}
body::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(to bottom, rgba(250,250,248,.55) 0%, rgba(250,250,248,.78) 100%);
}
.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 24px}
section{position:relative; z-index:1}

/* ---------- шапка ---------- */
header{
  position:sticky; top:0; z-index:20; backdrop-filter:saturate(180%) blur(14px);
  background:rgba(250,250,248,.82); border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; gap:20px; min-height:60px; padding-top:9px; padding-bottom:9px}
.mark{font-weight:700; letter-spacing:-.02em; font-size:17px; white-space:nowrap}
.mark span{color:var(--acc)}
nav{display:flex; gap:24px; margin-left:auto; font-size:14.5px; color:var(--muted)}
nav a{color:inherit; text-decoration:none}
nav a:hover{color:var(--ink)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:10px; border:1px solid transparent;
  background:var(--acc); color:var(--snow); text-decoration:none; font-size:15px; font-weight:500;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{background:var(--acc-text); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--snow); border-color:var(--line-strong)}
.btn.sm{padding:9px 16px; font-size:14px}
.bar .btn{margin-left:auto; white-space:nowrap}
nav + .btn{margin-left:4px}
.btn .short{display:none}
@media(max-width:560px){
  .mark{font-size:15px}
  .bar .btn{padding:9px 14px; font-size:14px}
  .btn .long{display:none}
  .btn .short{display:inline}
}
/* меню на вузьких екранах — див. блок «Бургер» у кінці файла */

/* ---------- типографіка ---------- */
h1,h2,h3{margin:0; letter-spacing:-.03em; font-weight:300; line-height:1.1}
h1{font-size:clamp(34px,5.6vw,62px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:19px; font-weight:500; letter-spacing:-.02em; line-height:1.3}
p{margin:0}
.lead{font-size:clamp(17px,1.6vw,20px); color:var(--muted); line-height:1.55; font-weight:300}
.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--acc)}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* ---------- «виділена клітинка» ---------- */
.cell{position:relative; display:inline-block; padding:0 6px; background:var(--snow); box-shadow:inset 0 0 0 2px var(--acc)}
.cell::after{content:""; position:absolute; right:-4px; bottom:-4px; width:7px; height:7px; background:var(--acc); border:1.5px solid var(--paper)}

/* ---------- секції ---------- */
.sec{padding:88px 0; border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.sec-head{max-width:720px; display:grid; gap:18px; margin-bottom:44px}

/* ---------- герой ---------- */
.hero{padding:96px 0 84px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start}
@media(max-width:940px){ .hero-grid{grid-template-columns:1fr; gap:40px} .hero{padding:64px 0 56px} }
.hero h1{margin:22px 0 24px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.hero-note{margin-top:18px; font-size:14px; color:var(--muted)}
.hero-note.wip{margin-top:10px; color:var(--ink); background:var(--warn);
  border:1px solid var(--warm-700); border-radius:8px; padding:10px 12px}

/* ---------- макет аркуша ---------- */
.sheet{background:var(--snow); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.03), 0 12px 32px -18px rgba(0,0,0,.25)}
.sheet-bar{display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line); background:var(--paper-2)}
.dot{width:9px; height:9px; border-radius:50%; background:var(--dot)}
.sheet-bar .fx{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); margin-left:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 16px; border-bottom:1px solid var(--line-soft); font-size:14.5px}
.row:last-child{border-bottom:0}
.row .k{color:var(--muted)}
.row .v{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.row.in{background:var(--warn)}
.row.out{background:var(--acc-soft)}
.row.out .v{color:var(--acc); font-weight:500; font-size:16px}
.sheet-tabs{display:flex; gap:0; border-top:1px solid var(--line); background:var(--paper-2); font-size:12px; font-family:var(--f-mono); color:var(--muted)}
.sheet-tabs span{padding:8px 12px; border-right:1px solid var(--line)}
.sheet-tabs span.on{background:var(--snow); color:var(--ink); box-shadow:inset 0 -2px 0 var(--acc)}

/* ---------- картки ---------- */
.cards{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--snow); padding:28px; display:grid; gap:10px; align-content:start}
.card p{color:var(--muted); font-size:15.5px}
.card .idx{font-family:var(--f-mono); font-size:12px; color:var(--acc)}
@media(max-width:860px){ .g3,.g2{grid-template-columns:1fr} }

/* ---------- список фактів ---------- */
.facts{display:grid; gap:0; margin-top:8px}
.fact{display:grid; grid-template-columns:210px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); align-items:start}
.fact:first-child{border-top:1px solid var(--line)}
.fact b{font-weight:500}
.fact p{color:var(--muted); font-size:15.5px}
@media(max-width:720px){ .fact{grid-template-columns:1fr; gap:6px} }

/* ---------- приклади ---------- */
.ex{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:1px; background:var(--snow); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.ex > div{background:var(--snow); outline:1px solid var(--line); padding:26px; display:grid; gap:12px; align-content:start}
.ex h3{font-size:17px}
.ex .stat{font-family:var(--f-mono); font-size:12.5px; color:var(--muted); display:grid; gap:3px}
.ex .stat b{color:var(--ink); font-weight:500}
.ex p{font-size:14.5px; color:var(--muted)}

/* ---------- кроки ---------- */
.steps{counter-reset:s; display:grid; gap:0}
.step{display:grid; grid-template-columns:56px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); align-items:start}
.step:first-child{border-top:1px solid var(--line)}
.step::before{
  counter-increment:s; content:"0" counter(s);
  font-family:var(--f-mono); font-size:13px; color:var(--acc); padding-top:3px;
}
.step p{color:var(--muted); font-size:15.5px; margin-top:5px}
/* Вміст кроку живе у другій колонці навіть без обгортки: без цього правила
   забутий <div> виштовхує абзац у неявну третю колонку і текст стає стовпчиком
   з одного слова. */
.step > *:not(::before){grid-column:2}

/* ---------- ціна ---------- */
.price{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.price > div{background:var(--snow); padding:30px; display:grid; gap:12px; align-content:start}
.price .amt{font-family:var(--f-mono); font-size:26px; letter-spacing:-.02em}
.price .amt small{font-size:13px; color:var(--muted); font-family:var(--f-disp); letter-spacing:0}
.price p{font-size:15px; color:var(--muted)}
@media(max-width:860px){ .price{grid-template-columns:1fr} }

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--line); padding:0}
details:first-of-type{border-top:1px solid var(--line)}
summary{
  list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-size:17px; font-weight:500; letter-spacing:-.01em;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+"; position:absolute; right:6px; top:18px; font-family:var(--f-mono);
  font-size:19px; color:var(--acc); font-weight:400; transition:transform .2s ease;
}
details[open] summary::after{content:"–"}
details .ans{padding:0 0 22px; color:var(--muted); font-size:15.5px; max-width:760px}

/* ---------- форма ---------- */
.form{background:var(--snow); border:1px solid var(--line); border-radius:12px; padding:32px; display:grid; gap:16px}
.form .fld{display:grid; gap:7px}
label{font-size:13.5px; color:var(--muted)}
input,textarea,select{
  font-family:inherit; font-size:16px; color:var(--ink); background:var(--warn);
  border:1px solid var(--line); border-radius:9px; padding:12px 14px; width:100%;
}
textarea{min-height:96px; resize:vertical}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft)}
.form .two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:640px){ .form .two{grid-template-columns:1fr} }
.hint{font-size:13px; color:var(--muted)}
.contacts{display:grid; gap:14px; align-content:start}
.contacts a{color:var(--ink); text-decoration:none; display:flex; gap:10px; align-items:center; font-size:16px}
.contacts a:hover{color:var(--acc)}
.contacts .lbl{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; width:78px; flex:none}

/* ---------- підвал ---------- */
footer .fgrid{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start}
@media(max-width:720px){ footer .fgrid{grid-template-columns:1fr} }
.disclaim{margin-top:22px; font-size:13px; line-height:1.55; max-width:760px}

/* ---------- сторінка напрямку ---------- */
.crumbs{font-family:var(--f-mono); font-size:12px; color:var(--muted); padding:22px 0 0}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--acc)}
.colw{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.colw > div{background:var(--snow); padding:30px}
.colw h3{margin-bottom:16px}
@media(max-width:860px){ .colw{grid-template-columns:1fr} }
.ul{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.ul li{position:relative; padding-left:22px; color:var(--muted); font-size:15.5px; line-height:1.5}
.ul li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; background:var(--acc); opacity:.5}
.ul.in li::before{background:var(--warm-700); opacity:1}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.tag{font-family:var(--f-mono); font-size:12px; color:var(--muted); border:1px solid var(--line); background:var(--snow); border-radius:6px; padding:6px 10px}
.tag.on{color:var(--acc); border-color:var(--acc-border); background:var(--acc-soft)}
/* Шаблон ще збирається під ТЗ. Позначка тепла, а не тривожна: це стан
   роботи, а не помилка. Червоний тут читався б як «щось зламано». */
.tag.wip{color:var(--ink); border-color:var(--warm-700); background:var(--warn)}
.dirs{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:1px; background:var(--snow); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.dirs a{background:var(--snow); outline:1px solid var(--line); padding:24px 26px; display:grid; gap:9px; align-content:start; text-decoration:none; color:inherit; transition:background .15s ease}
.dirs a:hover{background:var(--paper-2)}
.dirs .t{font-size:16.5px; font-weight:500; letter-spacing:-.01em; line-height:1.3}
.dirs .d{font-size:14px; color:var(--muted); line-height:1.5}
.dirs .m{font-family:var(--f-mono); font-size:11.5px; color:var(--acc); letter-spacing:.06em; text-transform:uppercase}
.dirs .m.no{color:var(--muted)}
.dirs .m.wip{color:var(--ink)}
.band{background:var(--snow); border:1px solid var(--line); border-radius:12px; padding:30px; display:grid; gap:14px}
.band .amt{font-family:var(--f-mono); font-size:24px; letter-spacing:-.02em}

/* ───────────────────────────────────────────────────────────────────────────
   Довгий текст: юридичні сторінки і статті блогу.
   Ширина колонки обмежена 68 символами — далі око губить початок рядка.
   ─────────────────────────────────────────────────────────────────────────── */

.doc{max-width:68ch}
.doc h1{margin:10px 0 14px}
/* 404: одна колонка, як у документа, кнопки — як у героя */
.nf{max-width:68ch; padding-block:24px}
.nf h1{margin:10px 0 14px}
.nf .hero-cta{margin-top:26px}
.doc-meta{font-family:var(--f-mono); font-size:12px; color:var(--muted); margin:0 0 18px}

.prose{margin-top:26px}
.prose h2{font-size:22px; font-weight:500; margin:36px 0 12px; letter-spacing:-.01em}
.prose h3{font-size:17px; font-weight:500; margin:26px 0 10px}
.prose p{margin:0 0 14px; line-height:1.65}
.prose strong{color:var(--ink); font-weight:500}
.prose ul,.prose ol{margin:0 0 16px; padding-left:20px; display:grid; gap:8px}
.prose ul.ul{list-style:none; padding-left:18px}
.prose ul.ul li{position:relative}
.prose ul.ul li::before{content:""; position:absolute; left:-18px; top:9px;
  width:5px; height:5px; border-radius:50%; background:var(--acc)}
.prose ol{list-style:decimal}
.prose ol li{padding-left:4px}
.prose hr{border:0; border-top:1px solid var(--line); margin:30px 0}
.prose > *:first-child{margin-top:0}

/* Таблиця в тексті: горизонтальна прокрутка тільки всередині, сторінка не їде */
/* Довгі адреси і слова без пробілів переносяться, а не розсувають сторінку.
   Без цього рядок «опубліковано за адресою https://…» давав горизонтальний
   скрол усієї сторінки на телефоні. */
.prose p, .prose li, .prose td, .prose th, .ans, footer a{overflow-wrap:anywhere}

.tbl-wrap{overflow-x:auto; margin:0 0 18px; border:1px solid var(--line); border-radius:12px}
.tbl-wrap table{border-collapse:collapse; width:100%; font-size:14px; min-width:520px}
.tbl-wrap th,.tbl-wrap td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);
  vertical-align:top}
.tbl-wrap th{font-weight:500; color:var(--muted); font-size:12px; background:var(--paper-2);
  white-space:nowrap}
.tbl-wrap tr:last-child td{border-bottom:0}

/* ── Список статей ── */
.posts{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; margin-top:28px}
.post{display:block; background:var(--snow); padding:24px 26px; text-decoration:none; color:inherit;
  transition:background .12s}
.post:hover{background:var(--paper-2)}
.post .m{font-family:var(--f-mono); font-size:11.5px; color:var(--acc);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:9px}
.post .t{font-size:19px; font-weight:500; letter-spacing:-.01em; margin-bottom:7px}
.post .d{color:var(--muted); font-size:15px; line-height:1.55}
.post .when{font-size:12px; color:var(--muted); margin-top:11px}

/* ── Колонки підвалу ── */
footer .fgrid{grid-template-columns:1.6fr .7fr .7fr}
.fnav{display:grid; gap:9px; align-content:start}
.fnav .lbl{font-family:var(--f-mono); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.04em; margin:0 0 3px}
@media(max-width:720px){ footer .fgrid{grid-template-columns:1fr} }

/* Крихти на сторінках документів стоять першими — прибираємо верхній відступ */
.doc .crumbs,.wrap > .crumbs:first-child{padding-top:0; margin-bottom:16px}
.crumbs .sep{margin:0 7px; opacity:.5}

/* ───────────────────────────────────────────────────────────────────────────
   Бургер. Раніше меню на вузькому екрані просто зникало (nav{display:none}),
   і шість розділів ставали недосяжними з телефона.
   ─────────────────────────────────────────────────────────────────────────── */

.burger{display:none; width:44px; height:44px; padding:0; border:1px solid var(--line);
  background:var(--snow); border-radius:10px; cursor:pointer; align-items:center;
  justify-content:center; flex-direction:column; gap:4px; margin-left:10px}
.burger span{display:block; width:17px; height:1.5px; background:var(--ink);
  transition:transform .18s, opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media(max-width:820px){
  .burger{display:flex}
  .bar{flex-wrap:wrap}
  nav{display:none; order:3; width:100%; flex-direction:column; gap:0;
      margin:8px 0 4px; border-top:1px solid var(--line); font-size:16px}
  nav.open{display:flex}
  nav a{padding:13px 2px; border-bottom:1px solid var(--line); color:var(--ink);
        min-height:44px; display:flex; align-items:center}
  nav a:last-child{border-bottom:0}
  .bar .btn{margin-left:auto}
}

/* Видимий фокус: раніше його не було ні в кнопок, ні в посилань */
:where(a,button,summary,input,textarea,select):focus-visible{
  outline:2px solid var(--acc); outline-offset:3px; border-radius:8px}

/* Перехід одразу до змісту — для клавіатури і читалок */
.skip{position:absolute; left:-9999px; top:0; background:var(--acc); color:var(--snow);
  padding:10px 16px; border-radius:0 0 10px 0; z-index:60; text-decoration:none}
.skip:focus{left:0}

/* ───────────────────────────────────────────────────────────────────────────
   Знак у логотипі: чотири плитки за типами файлів, з якими я працюю.
   Зелені стоять по діагоналі, інакше два зелених поруч зливаються.
   ─────────────────────────────────────────────────────────────────────────── */

.mark{display:flex; align-items:center; text-decoration:none; color:inherit}
.glyph{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:2.5px; width:26px; height:26px; flex:0 0 26px; margin-right:10px}
.glyph b{border-radius:2.5px; display:block}
.c-xls{background:var(--xls)} .c-doc{background:var(--docx)}
.c-pdf{background:var(--pdf)} .c-gs{background:var(--gsheet)}
.wordmark{display:block; height:26px; width:auto}

/* ── Месенджери: фірмові кольори і справжні знаки ── */
.msgr{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 4px}
.msgr-btn{display:inline-flex; align-items:center; gap:7px; min-height:40px;
  padding:0 14px; border-radius:999px; text-decoration:none; font-size:14px;
  font-weight:500; color:var(--snow); transition:filter .14s, transform .14s}
.msgr-btn:hover{filter:brightness(1.07); transform:translateY(-1px)}
.msgr-btn svg{flex:0 0 auto}
.msgr-btn.tg{background:var(--m-tg)}
.msgr-btn.vb{background:var(--m-vb)}
.msgr-btn.wa{background:var(--m-wa)}

/* ───────────────────────────────────────────────────────────────────────────
   Розділення блоків. Раніше сторінка читалась як одне полотно:
   секції йшли впритул, підвал не відділявся від тексту.
   ─────────────────────────────────────────────────────────────────────────── */

.sec{position:relative}
.sec + .sec{border-top:1px solid var(--line)}
.sec.tint{background:var(--band)}
/* дві сірі смуги поспіль неможливі: друга завжди світла */
.sec.tint + .sec.tint{background:var(--paper)}

/* Підвал: щільна межа, інший тон і помітний відступ зверху */
footer{border-top:2px solid var(--ink); background:var(--band);
  margin-top:0; padding:44px 0 36px}
footer .fgrid{padding-top:4px}

/* ───────────────────────────────────────────────────────────────────────────
   Герой по центру, за зразком сильних лендингів: спершу показати продукт,
   потім розповідати. Заголовок був вагою 300 — це light, і при будь-якому
   кеглі читався як текст документа, а не як заголовок.
   ─────────────────────────────────────────────────────────────────────────── */

.hero-c{text-align:center; padding:52px 0 0; position:relative}
.hero-c > .wrap{position:relative; z-index:1}
/* текстура формул за першим екраном: бліда, без сюжету, гасне до знімка */
.fx{position:absolute; left:0; right:0; top:0; height:420px; overflow:hidden;
  pointer-events:none; z-index:0; user-select:none;
  /* гасне донизу і блідне під колонкою тексту: краї видно, середина ледь-ледь */
  -webkit-mask-image:linear-gradient(#000 45%, transparent 100%),
    linear-gradient(to right, #000 0%, rgba(0,0,0,.4) 28%, rgba(0,0,0,.4) 72%, #000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(#000 45%, transparent 100%),
    linear-gradient(to right, #000 0%, rgba(0,0,0,.4) 28%, rgba(0,0,0,.4) 72%, #000 100%);
  mask-composite:intersect}
.fx-in{position:absolute; inset:0; animation:fxdrift 90s ease-in-out infinite alternate}
.fx span{position:absolute; font-family:var(--f-mono); white-space:nowrap;
  color:var(--ink); opacity:.075; letter-spacing:.01em}
@keyframes fxdrift{from{transform:translateY(0)} to{transform:translateY(-22px)}}
@media(prefers-reduced-motion:reduce){ .fx-in{animation:none} }
@media(max-width:640px){ .fx{height:340px} .fx span{opacity:.05} }
.hero-c .wrap{max-width:900px}
.hero-c h1{font-size:clamp(38px,6vw,68px); font-weight:600; line-height:1.04;
  letter-spacing:-.035em; margin:16px 0 20px}
.hero-c .lead{font-size:clamp(16px,1.5vw,19px); max-width:640px; margin:0 auto 28px;
  color:var(--muted); line-height:1.6}
.hero-c .hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero-c .hero-note{margin-top:20px; font-size:14px; color:var(--muted)}

.badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono);
  font-size:12px; letter-spacing:.02em; color:var(--muted); background:var(--snow);
  border:1px solid var(--line); border-radius:999px; padding:7px 15px}

.btn.lg{min-height:50px; padding:0 26px; font-size:15.5px}

/* Заголовки перестають бути «легкими» на всьому сайті */
h1,h2,h3{font-weight:600; letter-spacing:-.02em}
h2{font-size:clamp(26px,3.2vw,40px); line-height:1.12}
.sec-head h2{max-width:20ch}

/* ── Знімок екрана як головний візуальний елемент ── */
.shot{margin:0; padding:0}
.shot img{display:block; width:100%; height:auto; border-radius:12px;
  border:1px solid var(--line); background:var(--snow)}
.shot figcaption{font-size:13px; color:var(--muted); margin-top:11px; text-align:center}

/* ---------- пара «до і після» ----------
   Була картинкою: на телефоні текст стискався до шести пікселів і не
   шукався пошуком. Тепер це справжня таблиця - масштабується, виділяється
   мишею, індексується. */
.ba{display:grid; gap:30px; margin:0}
.ba-head{display:flex; align-items:baseline; gap:14px; margin-bottom:10px; flex-wrap:wrap}
.ba-tag{font-size:13px; font-weight:600; letter-spacing:.08em}
.ba-fx{font-family:var(--f-mono); font-size:14px; color:var(--muted);
  background:var(--band); padding:4px 10px; border-radius:5px; white-space:nowrap}
.ba table{width:100%; border-collapse:collapse; table-layout:fixed}
.ba th{font-weight:400; color:var(--muted); font-size:14px; text-align:left;
  padding:7px 12px; border-bottom:1px solid var(--line)}
.ba td{padding:10px 12px; border-bottom:1px solid var(--line); font-size:17px}
.ba .n{text-align:right; font-variant-numeric:tabular-nums; width:38%}
.ba tr.add{background:var(--warn)}
.ba .mk{color:var(--muted); font-size:14px; white-space:nowrap}
.ba tr.tot td{font-weight:600; border-bottom:none; padding-top:12px}
.ba tr.tot .s{background:var(--band)}
.ba tr.chk td{border-bottom:none; color:var(--muted); font-size:14px; padding-top:2px}
.ba-note{margin:12px 0 0; font-size:16px; line-height:1.5}
.ba-ok{color:var(--ok)} .ba-bad{color:var(--bad)}

@media(max-width:600px){
  /* Рядок стає блоком: назва зверху, сума під нею справа. Два стовпці на
     вузькому екрані ламали довгі назви на чотири рядки. */
  .ba table,.ba tbody,.ba tr,.ba td{display:block; width:auto}
  /* Шапку ховаємо для ока, але лишаємо екранним читалкам. Винесення
     за лівий край (left:-9999px) розтягувало сторінку вбік на 4px. */
  .ba thead{position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
  .ba tr{border-bottom:1px solid var(--line); padding:9px 0}
  .ba td{border:0; padding:1px 0; font-size:17px}
  .ba td.n{text-align:left; font-weight:600; width:auto}
  .ba tr.add{padding-left:8px; padding-right:8px; border-radius:6px}
  .ba tr.tot{border-bottom:0}
  .ba tr.tot .s{background:none; padding-left:0}
  .ba .mk{display:block; white-space:normal; margin-top:2px}
}
.shot-hero{max-width:1240px; margin:44px auto 0; padding:0 24px}
.shot-hero img{box-shadow:0 24px 60px -30px rgb(29 29 31 / .38), 0 2px 6px rgb(29 29 31 / .05)}

/* Поява блоків під час прокручування. Код був написаний, але не підключений. */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* Картка напрямку зі знімком реального файла */
.dirs-pic{display:block; margin:-28px -26px 16px; border-bottom:1px solid var(--line);
  background:var(--paper-2); height:132px; overflow:hidden}
.dirs-pic img{display:block; width:100%; height:100%; object-fit:cover;
  object-position:left top; transition:transform .4s ease}
.dirs a.has-pic{padding-top:28px}
.dirs a:hover .dirs-pic img{transform:scale(1.03)}

/* ───────────────────────────────────────────────────────────────────────────
   Картка зі знімком і проявленням тексту (прийом GanttPRO).
   У спокої видно сам файл і назву. Під курсором знімок іде в розмиття,
   а поверх проявляється опис. На дотику ховера немає, тому там текст
   показуємо одразу — інакше половина відвідувачів його не побачить.
   ─────────────────────────────────────────────────────────────────────────── */

.dirs a.dcard{position:relative; padding:0; overflow:hidden; display:block;
  min-height:250px; isolation:isolate}

.dcard-pic{position:absolute; inset:0; display:block; z-index:0}
.dcard-pic img{width:100%; height:100%; object-fit:cover; object-position:left top;
  transition:filter .38s ease, transform .5s ease; will-change:filter, transform}

/* Пелена: у спокої ледь помітна, під курсором глушить знімок під текст */
.dcard-veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgb(255 255 255 / .96) 0%, rgb(255 255 255 / .82) 34%, rgb(255 255 255 / 0) 62%);
  transition:background .38s ease}

/* Опис — те, що проявляється */
.dcard-body{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  justify-content:center; gap:10px; padding:26px; opacity:0; transform:translateY(8px);
  transition:opacity .32s ease, transform .32s ease}
.dcard-body .d{color:var(--muted); font-size:15px; line-height:1.55}

/* Назва — видно завжди, як у зразку */
.dcard-foot{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:20px 26px;
  display:grid; gap:7px; transition:opacity .28s ease, transform .32s ease}
.dcard-foot .t{font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1.25}
.dcard-foot .m{margin:0}

.dirs a.dcard:hover .dcard-pic img,
.dirs a.dcard:focus-visible .dcard-pic img{filter:blur(7px) saturate(.85); transform:scale(1.06)}
.dirs a.dcard:hover .dcard-veil,
.dirs a.dcard:focus-visible .dcard-veil{background:rgb(255 255 255 / .88)}
.dirs a.dcard:hover .dcard-body,
.dirs a.dcard:focus-visible .dcard-body{opacity:1; transform:none}
.dirs a.dcard:hover .dcard-foot,
.dirs a.dcard:focus-visible .dcard-foot{opacity:0; transform:translateY(6px)}

/* Дотик: ховера немає — показуємо опис одразу, знімок лишається тлом */
@media(hover:none){
  .dirs a.dcard{min-height:0; padding:26px}
  .dcard-pic{height:126px; inset:0 0 auto 0}
  .dcard-pic img{filter:none}
  .dcard-veil{background:linear-gradient(to top, var(--paper) 62%, rgb(255 255 255 / 0) 100%)}
  .dcard-body{position:static; opacity:1; transform:none; padding:126px 0 0}
  .dcard-foot{position:static; padding:0 0 8px; order:-1}
  .dirs a.dcard{display:flex; flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  .dcard-pic img,.dcard-veil,.dcard-body,.dcard-foot{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ПРАВКИ ПО ЗАУВАЖЕННЯХ: контраст, обʼєм карток, підвал, сітка
   ═══════════════════════════════════════════════════════════════════════════ */

/* Синім кольором текст — тільки в темнішому варіанті */
.card .idx,.step::before,.ex .stat b,.dirs .m,.crumbs a:hover,
.fnav a:hover,footer .lnk:hover,.post .m{color:var(--acc-text)}

/* ── Обʼєм карток: раніше вони були злиплі в одну сітку без тіней ── */
.cards{background:transparent; border:0; gap:20px}
.card{border:1px solid var(--line); border-radius:14px; padding:30px;
  box-shadow:var(--shadow-card); transition:box-shadow .2s ease, transform .2s ease}
.card:hover{box-shadow:var(--shadow-card-h); transform:translateY(-2px)}

.ex{background:transparent; border:0; gap:20px;
  grid-template-columns:repeat(3,1fr)}          /* було auto-fit: 4+2 з дірою */
.ex > div{outline:0; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-card); transition:box-shadow .2s ease, transform .2s ease}
.ex > div:hover{box-shadow:var(--shadow-card-h); transform:translateY(-2px)}
@media(max-width:940px){ .ex{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .ex{grid-template-columns:1fr} }

.dirs{gap:20px; background:transparent; border:0}
.dirs a{border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-card);
  transition:box-shadow .2s ease, transform .2s ease}
.dirs a:hover{box-shadow:var(--shadow-card-h); transform:translateY(-2px)}
.dirs a.dcard{border-radius:14px}

.price{background:transparent; border:0; gap:20px}
.price > div{border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-card)}

.colw{background:transparent; border:0; gap:20px}
.colw > div{border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-card)}

/* ═══ ПІДВАЛ: темний блок із колонками, а не тонка лінія ═══════════════════ */

footer{background:var(--dark); color:var(--on-dark); border-top:0; margin-top:0;
  padding:56px 0 30px;
  position:relative; z-index:1}   /* над плівкою body::before — інакше на короткій сторінці (404) підвал сірий */
footer .fgrid{display:grid; grid-template-columns:1.5fr 1fr 1.2fr 1fr; gap:40px;
  align-items:start; padding:0}
footer a{color:var(--on-dark); text-decoration:none}
footer a:hover{color:var(--snow); text-decoration:underline}

.fbrand .glyph{width:30px; height:30px; flex:0 0 30px; margin:0 0 12px}
.fname{font-size:19px; font-weight:700; letter-spacing:-.02em; margin:0 0 5px; color:var(--snow)}
.ftag{font-size:13.5px; color:var(--on-dark-muted); margin:0 0 18px; max-width:24ch; line-height:1.5}
.fcopy{font-size:12.5px; color:var(--on-dark-3); margin-top:18px}

footer .fnav{display:grid; gap:11px; align-content:start}
footer .fnav .lbl{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-dark-3); margin:0 0 5px}
footer .fnav a,footer .fnav p{font-size:14px; line-height:1.45; margin:0}
.fcont p{color:var(--on-dark-muted)}
.ffop{font-size:12.5px; color:var(--on-dark-3); margin-top:6px; line-height:1.5}

/* Месенджери в підвалі — кружечки з фірмовими кольорами */
footer .msgr{display:flex; gap:9px; margin:0}
footer .msgr-btn{width:38px; height:38px; min-height:0; padding:0; border-radius:50%;
  justify-content:center; font-size:0}
footer .msgr-btn.ml{background:var(--m-ml)}

.fbot{border-top:1px solid var(--dark-2); margin-top:36px; padding-top:20px}
.fbot .disclaim{font-size:12.5px; color:var(--on-dark-3); line-height:1.6; max-width:88ch}

@media(max-width:940px){ footer .fgrid{grid-template-columns:1fr 1fr; gap:32px} }
@media(max-width:600px){ footer .fgrid{grid-template-columns:1fr; gap:28px} }

/* ═══ ФОРМА: поля були жовті з блідим плейсхолдером — текст ледь читався ═══ */

.form{background:var(--snow); border:1px solid var(--line); border-radius:16px; padding:30px;
  box-shadow:var(--shadow-card); display:grid; gap:18px}
.fld{display:grid; gap:7px}
.fld label{font-size:13.5px; font-weight:500; color:var(--ink)}
/* згода на обробку даних: прапорець + текст одним рядком, клік по тексту теж ставить позначку */
.fld.chk label{display:flex; gap:10px; align-items:flex-start; font-weight:400; color:var(--muted); line-height:1.5; cursor:pointer}
.fld.chk input{margin:3px 0 0; width:18px; height:18px; flex:0 0 18px; accent-color:var(--acc)}
.fld.chk a{color:var(--acc-text)}
.form input,.form textarea,.form select{
  font:inherit; font-size:16px;               /* нижче 16 — iOS зумить сторінку */
  color:var(--ink);
  background:var(--snow);                            /* було жовте тло: текст губився */
  border:1.5px solid var(--field-line); border-radius:10px;
  padding:13px 14px; min-height:48px; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
.form textarea{min-height:120px; resize:vertical; line-height:1.55}
.form ::placeholder{color:var(--placeholder); opacity:1}   /* було ледь видно */
.form input:hover,.form textarea:hover,.form select:hover{border-color:var(--field-hover)}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:0; border-color:var(--acc); background:var(--warn);  /* жовтим підсвічуємо активне поле */
  box-shadow:0 0 0 4px rgb(0 113 227 / .12)}
.form .two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:600px){ .form .two{grid-template-columns:1fr} }
.form .btn{width:100%; min-height:52px; font-size:16px; margin-top:4px}
.form .hint{font-size:13.5px; color:var(--muted); line-height:1.55}

/* ═══ ПИТАННЯ: були дрібні і без чіткого поділу ═══════════════════════════ */

#pytannya details{border:1px solid var(--line); border-radius:12px; background:var(--snow);
  margin-bottom:12px; box-shadow:var(--shadow-card)}
#pytannya summary{font-size:17px; font-weight:500; padding:20px 52px 20px 22px;
  line-height:1.35; min-height:60px; display:flex; align-items:center}
#pytannya details[open] summary{border-bottom:1px solid var(--line)}
#pytannya .ans{padding:18px 22px 22px; font-size:15.5px; line-height:1.65; color:var(--muted)}
@media(max-width:600px){
  #pytannya summary{font-size:16px; padding:18px 46px 18px 18px}
  #pytannya .ans{font-size:15px; padding:16px 18px 18px}
}

/* ═══ БАНЕР COOKIE ═══════════════════════════════════════════════════════ */

.cookie{position:fixed; left:16px; right:16px; bottom:16px; z-index:50;
  max-width:560px; margin:0 auto; background:var(--snow); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px; display:none;
  box-shadow:0 10px 40px -12px rgb(29 29 31 / .3)}
.cookie.show{display:grid; gap:14px}
.cookie p{font-size:14px; line-height:1.55; color:var(--ink)}
.cookie a{color:var(--acc-text)}
.cookie-row{display:flex; gap:10px; flex-wrap:wrap}
.cookie .btn{min-height:44px}
@media(prefers-reduced-motion:no-preference){
  .cookie.show{animation:cookieUp .3s ease}
  @keyframes cookieUp{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
}

/* ═══ ПІДВАЛ: два кольори тексту, не пʼять ════════════════════════════════
   Було: білий, світло-сірий, сірий, тьмяний і темний з прозорістю — колонки
   «Продукт» і «Інформація» через це не читались. Тепер основний текст один
   і той самий скрізь — той, яким набраний телефон. Приглушений колір
   лишився тільки для дрібного службового рядка.
   ═════════════════════════════════════════════════════════════════════════ */

footer,
footer a,
footer p,
footer .fnav a,
footer .fnav p,
footer .fcont p,
footer .lnk{color:var(--on-dark)}

footer .fnav a{font-size:15px; line-height:1.5; text-decoration:none}
footer .fnav a:hover{color:var(--snow); text-decoration:underline}

/* Заголовок колонки відрізняється накресленням, а не блідістю */
footer .fnav .lbl{color:var(--on-dark); font-weight:500; opacity:1;
  letter-spacing:.12em; font-size:11.5px; margin:0 0 9px}

/* Єдиний приглушений — дрібний службовий текст */
.ftag,.fcopy,.ffop,.fbot .disclaim{color:var(--on-dark-muted)}
.fname{color:var(--snow)}

/* ═══ ФОРМИ: стан відправлення і пастка для ботів ═════════════════════════ */

/* Поле-пастка. Схована від людини, але не через display:none — деякі боти
   такі поля пропускають. Читалкам теж не показуємо. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.fmsg-box{margin:4px 0 0; font-size:14.5px; line-height:1.55; padding:12px 14px;
  border-radius:10px; border:1px solid transparent}
.fmsg-box.wait{color:var(--muted); background:var(--band); border-color:var(--line)}
.fmsg-box.ok{color:#1D7A3C; background:#EDF7EF; border-color:#C9E7CE}
.fmsg-box.err{color:#9C2A20; background:#FDF0EE; border-color:#F4CFC9}
.form button[type=submit]:disabled{opacity:.65; cursor:default; transform:none}

/* Вузька колонка для блоків питань */
.colw-narrow{max-width:820px}

/* ═══ БЛОГ: обкладинки статей ═════════════════════════════════════════════
   Раніше стаття на 1300 слів ішла суцільним текстом без жодної картинки.
   ═════════════════════════════════════════════════════════════════════════ */

.post-shot{margin:26px 0 8px}
.post-shot img{border-radius:12px; border:1px solid var(--line)}

/* Картка статті у списку: картинка ліворуч, текст праворуч */
.posts a.post.has-pic{display:grid; grid-template-columns:280px 1fr; gap:0; padding:0;
  align-items:stretch}
.post-pic{display:block; overflow:hidden; background:var(--paper-2);
  border-right:1px solid var(--line)}
.post-pic img{width:100%; height:100%; object-fit:cover; object-position:left top;
  transition:transform .4s ease}
.posts a.post.has-pic:hover .post-pic img{transform:scale(1.04)}
.post-body{display:block; padding:24px 26px}
.post .m,.post .t,.post .d,.post .when{display:block}
@media(max-width:720px){
  .posts a.post.has-pic{grid-template-columns:1fr}
  .post-pic{height:150px; border-right:0; border-bottom:1px solid var(--line)}
}

/* Перемикач мови. Виглядає як тиха кнопка поруч із головною дією: помітний,
   коли шукаєш, і не сперечається з нею за увагу. Тач-ціль 44px. */
.lang-switch{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:36px; padding:0 12px; margin-left:4px;
  border:1px solid var(--line); border-radius:10px;
  color:var(--muted); background:transparent;
  font-size:13px; font-weight:600; letter-spacing:.04em;
  text-decoration:none; white-space:nowrap;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.lang-switch:hover,
.lang-switch:focus-visible{
  color:var(--acc-text); border-color:var(--acc); background:var(--snow);
}

/* Пропозиція перейти на іншу мову. Показуємо один раз, унизу, і не перекриваємо
   кнопку зв'язку: банер cookie живе там само, тому вони не з'являються разом. */
.lang-offer{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:45;
  display:none; gap:12px; align-items:center; flex-wrap:wrap;
  max-width:560px; margin:0 auto; padding:14px 16px;
  border:1px solid var(--line-strong); border-radius:14px;
  background:var(--snow); box-shadow:0 10px 40px -12px rgb(29 29 31 / .3);
  font-size:14px; line-height:1.45;
}
.lang-offer.on{display:flex}
.lang-offer p{margin:0; flex:1 1 220px; color:var(--ink)}
.lang-offer .btn{padding:8px 14px; font-size:14px}

@media (max-width:600px){
  .lang-switch{margin-left:0}
}