/* Спільне оформлення сторінок робіт.
   Узято зі сторінки кейсу про магазин компресорів — там воно вже перевірене
   на телефоні, планшеті й ноутбуці, тому нічого не переписував.
   Чотири старіші кейси досі носять ці ж правила всередині себе: чіпати робочі
   сторінки заради краси коду не варто. Нові дев'ять беруть їх звідси.

   Шляхи до шрифтів тут ../fonts/ — файл лежить у site/case/, а не в теці кейсу. */

/* ══════════ шрифти ══════════
   Це змінні шрифти: один файл покриває всі товщини (400–800).
   unicode-range каже браузеру, який файл для яких літер — тому
   кирилицю й латиницю він качає окремо й лише те, що треба. */
@font-face{
  font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/montserrat-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{
  font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/montserrat-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:"Outfit";font-style:normal;font-weight:600 800;font-display:swap;
  src:url(../fonts/outfit-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}

/* ══════════ основа ══════════ */
:root{
  --green:#3E8E6E; --green-lt:#7FBFA1; --mint:#8ECAAD; --deep:#2B6650;
  --paper:#D9E6DF; --dim:#a9c1b6; --dimmer:#728d80;
  --bg1:#17251e; --bg2:#0e1613; --bg3:#070a09;
  --card:rgba(255,255,255,.028);
  --line:rgba(127,191,161,.13);
  --line-hi:rgba(127,191,161,.34);
  --pad:clamp(20px,4vw,44px);
  --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{
  font-family:"Montserrat",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  color:var(--paper);background:var(--bg3);
}
/* НЕ повертати сюди overflow-x:hidden. Через нього ламається «липка» шапка
   (position:sticky) у вбудованому браузері Telegram. Перевірено 28.07 на
   ширинах 320–1600: нічого за край не вилазить, він тут не потрібен.
   Якщо колись щось таки вилізе — обрізати саме той елемент, не body. */
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 84% 4%,rgba(62,142,110,.22),transparent 70%),
    radial-gradient(50% 40% at 8% 42%,rgba(43,102,80,.16),transparent 70%),
    radial-gradient(70% 60% at 50% 100%,rgba(62,142,110,.10),transparent 70%),
    linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 38%,var(--bg3) 100%)}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/></svg>")}
.page{position:relative;z-index:1}
.inner{max-width:1200px;margin:0 auto;width:100%;padding-left:var(--pad);padding-right:var(--pad)}
::selection{background:rgba(127,191,161,.3);color:#fff}

/* видно, де ти зараз, коли ходиш сторінкою з клавіатури.
   :focus-visible спрацьовує лише на клавіатуру — мишею обведення не блимає */
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:8px}
.btn:focus-visible,.tg:focus-visible{outline-offset:4px}

/* ══════════ шапка ══════════ */
header{position:sticky;top:0;z-index:60;transition:background .35s,border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent}
/* Затичка під вбудований браузер Telegram на iPhone.
   Коли він ховає свій рядок адреси, сторінка «підростає» вгору, а шапка
   лишається на старих координатах — між верхом екрана й шапкою відкривається
   щілина, крізь яку видно сайт, що проїжджає під нею.
   Цей шар тягнеться від шапки на цілий екран угору й затуляє ту щілину.
   У нормальному браузері він завжди за межами видимого — його не побачиш.
   Колір той самий, що в тла сторінки, тому й на відкоті вгору шва немає. */
header::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:100vh;background:var(--bg3);pointer-events:none}
header.scrolled{background:rgba(7,10,9,.72);backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--line)}
nav{display:flex;align-items:center;gap:14px;padding-top:15px;padding-bottom:15px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.logo svg{width:34px;height:34px;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.logo:hover svg{transform:rotate(-8deg) scale(1.06)}
/* Знак 34, назва 21 — «рівновага». Було 38 і 18: зелена плитка важила
   втричі більше за слово, око читало квадрат, а назву другою. */
.logo .name{font-family:"Outfit",sans-serif;font-weight:800;font-size:21px;letter-spacing:.14em;color:#eef7f2}
.menu{margin-left:auto;display:flex;align-items:center;gap:4px}
.menu a.nav-item{position:relative;font-size:13.5px;font-weight:500;color:var(--dim);text-decoration:none;
  padding:9px 14px;border-radius:10px;transition:color .25s,background .25s}
.menu a.nav-item::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;
  background:var(--green-lt);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.menu a.nav-item:hover{color:#e6f3ec}
.menu a.nav-item:hover::after,.menu a.nav-item.active::after,
.menu a.nav-item[aria-current="page"]::after{transform:scaleX(1)}
.menu a.nav-item.active,.menu a.nav-item[aria-current="page"]{color:#eaf7f0}
.tg{margin-left:10px;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;
  padding:10px 18px;border-radius:999px;border:1px solid var(--line-hi);color:#a7d4c0;
  transition:background .25s,color .25s,box-shadow .25s}
.tg:hover{background:rgba(127,191,161,.13);color:#d5efe3;box-shadow:0 0 24px rgba(62,142,110,.25)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;
  background:transparent;cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:1.6px;background:#cfe6da;transition:transform .35s,opacity .25s}
.burger i:nth-child(1){top:16.8px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:27.2px}
.burger.active i:nth-child(1){transform:translateY(5.2px) rotate(45deg)}
.burger.active i:nth-child(2){opacity:0}
.burger.active i:nth-child(3){transform:translateY(-5.2px) rotate(-45deg)}
.mobile{position:fixed;inset:64px 0 0;z-index:55;background:rgba(7,10,9,.97);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;gap:6px;padding:26px var(--pad);
  transform:translateY(-12px);opacity:0;pointer-events:none;
  /* visibility прибирає закрите меню й з-під клавіатури, не тільки з очей */
  visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s}
.mobile.open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.mobile a{font-size:20px;font-weight:600;color:#dbebe3;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line)}
@media(max-width:920px){.menu{display:none}.burger{display:block}}
@media(min-width:921px){.mobile{display:none}}

/* ══════════ перший екран ══════════ */
.hero{position:relative;min-height:calc(100svh - 70px);display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(30px,5vw,50px);padding-bottom:clamp(50px,7vw,90px)}
.hero > div{max-width:920px}
@media(max-width:980px){.hero{min-height:auto;padding-top:34px;padding-bottom:60px}}
.kicker{display:inline-flex;align-items:center;gap:11px;font-size:13px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--green-lt);margin-bottom:24px}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-lt);
  box-shadow:0 0 0 0 rgba(127,191,161,.55);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,191,161,.5)}70%{box-shadow:0 0 0 12px rgba(127,191,161,0)}100%{box-shadow:0 0 0 0 rgba(127,191,161,0)}}
h1{font-weight:800;line-height:1.05;letter-spacing:-.022em;font-size:clamp(33px,5.1vw,58px);color:#f2fbf7}
h1 .grad{background:linear-gradient(102deg,#ffffff 0%,#bfe4d3 45%,#6bb193 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Місце під слово, що друкується. Усі варіанти лежать один поверх одного в
   одній комірці сітки — це дає «лінійку» для вимірювання. Точну висоту під
   поточне слово ставить скрипт унизу, і вона міняється плавно: перед довгим
   словом кнопки м'яко з'їжджають униз, а не стрибають.
   Перший екран при цьому тримає сталу висоту, тому все нижче не рухається.
   Деталі — у коментарі біля скрипта. */
.typewrap{display:grid;min-height:1.15em;margin-top:.12em}
.typewrap>*{grid-area:1/1;align-self:start}
.typewrap .ghost{visibility:hidden}
.typed{background:linear-gradient(102deg,#a9dcc4,#4d9c79);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.caret{display:inline-block;width:3px;height:.86em;margin-left:5px;vertical-align:-.08em;border-radius:2px;
  background:var(--mint);animation:blink 1s steps(1) infinite;box-shadow:0 0 14px rgba(142,202,173,.8)}
@keyframes blink{50%{opacity:0}}
.lead{margin-top:clamp(20px,2.6vw,28px);font-size:clamp(15.5px,1.55vw,18px);line-height:1.66;color:var(--dim);max-width:56ch}
.lead b{color:#e5f2eb;font-weight:600}
.cta-row{margin-top:clamp(26px,3.2vw,36px);display:flex;gap:13px;flex-wrap:wrap}
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;padding:15px 27px;border-radius:999px;
  font-size:15px;font-weight:700;text-decoration:none;overflow:hidden;transition:transform .25s,box-shadow .25s}
.btn-main{color:#06120c;background:linear-gradient(120deg,var(--mint),var(--green) 55%,var(--deep));
  box-shadow:0 14px 44px rgba(62,142,110,.34)}
.btn-main::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.5),transparent 80%);
  transform:translateX(-120%);transition:transform .75s}
.btn-main:hover::after{transform:translateX(120%)}
.btn-ghost{color:#bfe0d1;border:1px solid var(--line-hi)}
.btn-ghost:hover{background:rgba(127,191,161,.1);color:#dcf0e7}
.btn:hover{transform:translateY(-2px)}
.btn-main:hover{box-shadow:0 20px 56px rgba(62,142,110,.46)}

/* ══════════ секції ══════════ */
section{padding-top:clamp(66px,8.5vw,116px);padding-bottom:clamp(66px,8.5vw,116px);position:relative}
.tag{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.tag i{width:32px;height:1px;background:var(--green);flex:none}
.tag span{font-size:12.5px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--green-lt)}
h2{font-weight:800;letter-spacing:-.024em;line-height:1.08;font-size:clamp(27px,4vw,46px);color:#eef8f3}
h2 .soft{color:#7fae98}
.sub{margin-top:16px;font-size:clamp(15px,1.45vw,17px);line-height:1.66;color:var(--dim);max-width:62ch}

/* картки з нахилом */
.tilt{position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--card);
  transform-style:preserve-3d;transition:border-color .35s,box-shadow .45s,transform .55s cubic-bezier(.2,.8,.2,1);
  will-change:transform;overflow:hidden}
/* світло проходить через картку — один раз, коли наводиш. З курсором не пов'язане */
.tilt::before{content:"";position:absolute;top:-70%;bottom:-70%;left:-90%;width:75%;
  pointer-events:none;opacity:0;transform:rotate(16deg);z-index:1;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(160,224,193,.07) 26%,
    rgba(226,250,238,.17) 50%,
    rgba(160,224,193,.07) 74%,
    transparent 100%);
  filter:blur(26px)}
.tilt:hover::before{animation:sweep 2.8s cubic-bezier(.42,0,.58,1) infinite}
@keyframes sweep{
  0%{left:-90%;opacity:0}
  18%{opacity:1}
  82%{opacity:1}
  100%{left:135%;opacity:0}}
/* м'яке підсвічування, поки курсор на картці */
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .45s;
  background:radial-gradient(120% 90% at 50% 0%,rgba(127,191,161,.10),transparent 62%);
  box-shadow:inset 0 1px 0 rgba(200,240,220,.13)}
.tilt:hover{border-color:var(--line-hi);box-shadow:0 24px 54px rgba(0,0,0,.5),0 0 28px rgba(62,142,110,.16)}
.tilt:hover::after{opacity:1}
.tilt.moving{transition:border-color .35s,box-shadow .45s}
.tilt > *{position:relative;transform:translateZ(30px)}

/* ══════════ про нас ══════════ */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:start;margin-top:34px}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:34px}}
/* На широкому екрані розділ НЕ ділиться на дві колонки: текст, під ним три
   смуги з принципами, під ними плитки з цифрами — той самий порядок, що й
   на телефоні.
   Смуги й плитки лишаються на ПОВНУ ширину, як усі інші розділи. Тексту в
   них мало, тому праворуч буде порожньо — це свідомий вибір: пробували
   вкорочувати блоки, і розділ починав виглядати зсунутим відносно сусідніх.
   Порожній край виявився меншим злом. Не звужувати тут нічого.
   Обмежений тільки сам абзац (78 символів у рядку) — інакше на широкому
   моніторі рядок стає задовгий, і око губить початок наступного. */
@media(min-width:901px){
  .about-grid{grid-template-columns:1fr;gap:38px}
  .about-grid>div:first-child{max-width:78ch}
  .principle{padding:22px 26px}
  .principle h3{font-size:16px}
  .principle p{font-size:14.5px}
}
.statement{font-size:clamp(18px,2vw,23px);line-height:1.5;font-weight:500;color:#dcebe4;letter-spacing:-.005em}
.statement mark{background:none;color:var(--green-lt);font-weight:600}
.about-grid p + p{margin-top:18px;font-size:clamp(15px,1.4vw,16.5px);line-height:1.7;color:var(--dim)}
.principles{display:flex;flex-direction:column;gap:12px}
.principle{padding:20px 22px;border-radius:14px;border:1px solid var(--line);background:var(--card);
  transition:border-color .3s,transform .3s,background .3s}
.principle:hover{border-color:var(--line-hi);transform:translateX(5px);background:rgba(127,191,161,.05)}
.principle h3{font-size:15px;font-weight:700;color:#e9f4ef;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.principle h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 4px rgba(62,142,110,.16)}
.principle p{font-size:14px;line-height:1.6;color:var(--dimmer)}

/* значки технологій */
.iconrow{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.ic{display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);font-family:"Outfit",sans-serif;font-size:13px;font-weight:600;color:#a8ccb9;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,color .3s,background .3s}
.ic svg{width:16px;height:16px;stroke:var(--green-lt);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.ic:hover{transform:translateY(-4px);border-color:var(--line-hi);color:#dcf0e7;background:rgba(127,191,161,.07)}
.ic:hover svg{stroke:var(--mint)}

/* цифри */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
@media(max-width:760px){.stats{grid-template-columns:1fr}}
.stat{padding:26px 24px}
.stat .n{font-family:"Outfit",sans-serif;font-weight:800;font-size:clamp(30px,3.6vw,42px);line-height:1;
  background:linear-gradient(120deg,#dff2e8,#6fb394);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;letter-spacing:-.02em}
.stat .l{margin-top:11px;font-size:14px;font-weight:600;color:#d3e6dc}
.stat .d{margin-top:5px;font-size:13px;color:var(--dimmer);line-height:1.5}

/* ══════════ що ми вміємо (шкали) ══════════ */
.skills{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px);margin-top:38px}
@media(max-width:860px){.skills{grid-template-columns:1fr}}
/* Montserrat, а НЕ Outfit: тут український текст, а в Outfit немає кирилиці —
   браузер підставляв системний шрифт, і напис виглядав по-різному на Mac,
   Windows і Android. Outfit лишається тільки там, де латиниця й цифри:
   напис EIMAR, мітки технологій, великі числа. */
.skillcol h3{display:flex;align-items:center;gap:11px;font-family:"Montserrat",sans-serif;font-size:17px;font-weight:700;
  color:#e7f4ee;margin-bottom:18px;letter-spacing:.01em}
.skillcol h3 svg{width:19px;height:19px;stroke:var(--green-lt);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.skill{padding:17px 19px;border-radius:14px;border:1px solid var(--line);background:var(--card);margin-bottom:11px;
  transition:border-color .3s,background .3s}
.skill:hover{border-color:var(--line-hi);background:rgba(127,191,161,.05)}
.skill .t{font-size:14.5px;font-weight:600;color:#e4f1eb}
.skill .d{margin-top:5px;font-size:13px;color:var(--dimmer);line-height:1.5}
.bar{margin-top:13px;height:5px;border-radius:99px;background:rgba(255,255,255,.05);overflow:hidden}
.bar span{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--deep),var(--green) 45%,var(--mint));
  transition:width 2.4s cubic-bezier(.2,.75,.25,1);box-shadow:0 0 16px rgba(127,191,161,.4)}

/* ══════════ послуги ══════════ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:38px}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
.card{padding:30px 27px 32px}
.card .ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(135deg,rgba(142,202,173,.18),rgba(43,102,80,.14));border:1px solid var(--line);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s}
.card:hover .ico{transform:translateZ(40px) scale(1.08) rotate(-5deg);border-color:var(--line-hi)}
.card .ico svg{width:24px;height:24px;stroke:var(--mint);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:18px;font-weight:700;color:#edf7f2;margin-bottom:10px;letter-spacing:-.008em}
.card p{font-size:14.2px;line-height:1.62;color:var(--dim)}
.card ul{list-style:none;margin-top:15px;display:flex;flex-direction:column;gap:7px}
.card li{font-size:13px;color:var(--dimmer);display:flex;align-items:flex-start;gap:9px;line-height:1.45}
.card li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--green);flex:none;margin-top:7px}

/* ══════════ як працюємо ══════════ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px;position:relative}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{padding:26px 24px 28px}
/* Так само Montserrat: у написі «КРОК 01» слово було системним шрифтом,
   а число — Outfit. Один напис двома різними шрифтами. */
.step .k{font-family:"Montserrat",sans-serif;font-weight:800;font-size:13px;letter-spacing:.16em;color:var(--green-lt);
  display:flex;align-items:center;gap:10px;margin-bottom:16px}
.step .k::after{content:"";flex:1;height:1px;background:var(--line)}
.step h3{font-size:16.5px;font-weight:700;color:#eaf5f0;margin-bottom:9px}
.step p{font-size:13.6px;line-height:1.6;color:var(--dimmer)}

/* ══════════ контакти ══════════ */
.contact-row{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;margin-top:26px;
  padding-top:30px;border-top:1px solid var(--line)}
@media(max-width:760px){.contact-row{grid-template-columns:1fr;gap:20px}}
.contact-row .sub{margin-top:0}
.contact-row .cta-row{margin-top:0}
/* способи зв'язку окрім Telegram — пошта, далі сюди ж стане WhatsApp */
.ways{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.way{display:inline-flex;align-items:center;gap:14px;text-decoration:none;max-width:100%;
  padding:15px 20px;border-radius:14px;border:1px solid var(--line);background:var(--card);
  transition:border-color .3s,background .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.way:hover{border-color:var(--line-hi);background:rgba(127,191,161,.06);transform:translateY(-3px)}
.way svg{width:21px;height:21px;flex:none;transition:stroke .3s,fill .3s}
/* .line — наші власні значки, намальовані лінією (пошта).
   .brand — офіційні знаки Telegram і WhatsApp: вони суцільні, тому заливка,
   а не обведення. Колір беремо наш зелений, а не їхні фірмові — інакше два
   чужі кольори виглядають як наліпки. Однобарвні версії обидва бренди
   дозволяють і самі так подають. */
.way .line{stroke:var(--green-lt);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.way .brand{fill:var(--green-lt)}
.way:hover .line{stroke:var(--mint)}
.way:hover .brand{fill:var(--mint)}
/* у картці WhatsApp номер навмисно НЕ пишемо — він тільки в посиланні,
   щоб не кидався в очі. */
.way > span{min-width:0;font-size:15px;font-weight:600;color:#e4f1eb;word-break:break-word}

/* ══════════ підвал ══════════ */
footer{border-top:1px solid var(--line);margin-top:20px}
.foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:26px;padding-bottom:30px;
  font-size:12.5px;color:var(--dimmer)}
.foot .fname{font-family:"Outfit",sans-serif;font-weight:700;letter-spacing:.13em;color:#8fa89b}
.foot .right{margin-left:auto;display:flex;gap:4px}
/* поле для пальця більше за напис — від'ємні поля лишають вигляд той самий */
.foot a{color:var(--dimmer);text-decoration:none;transition:color .25s;
  display:inline-block;padding:12px 8px;margin:-12px -2px}
.foot a:hover{color:var(--green-lt)}

/* ══════════ роботи ══════════

   П'ять однакових плиток одна під одною: знімок ліворуч, текст праворуч.
   На вузькому екрані — знімок згори, текст під ним.

   Тут НЕМАЄ 3D-нахилу (.tilt), хоча решта карток сайту його мають: на
   картці такого розміру нахил у 5° виглядає як хитання, а не як об'єм.
   Замість нього — підсвічена рамка й повільне наближення знімка. */
.works{display:flex;flex-direction:column;gap:15px;margin-top:38px}
.work{position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--card);
  overflow:hidden;text-decoration:none;color:inherit;display:flex;align-items:stretch;
  transition:border-color .35s,box-shadow .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.work:hover{border-color:var(--line-hi);transform:translateY(-4px);
  box-shadow:0 24px 54px rgba(0,0,0,.5),0 0 28px rgba(62,142,110,.16)}
@media(max-width:860px){.work{flex-direction:column}}
/* Висоту знімка задаємо ЯВНО. Без неї картинка тягне картку за своїми
   пропорціями — на широкому екрані плитка виростала майже до 700 пікселів,
   і праворуч від тексту зяяла порожнеча. */
.work-shot{flex:1 1 52%;height:clamp(230px,23vw,310px);overflow:hidden;background:#0b110e;position:relative}
@media(max-width:860px){.work-shot{flex:none;width:100%;height:auto;aspect-ratio:16/9}}
/* знімок притиснутий до верху: там шапка каталогу, а не порожнє тло */
.work-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.work:hover .work-shot img{transform:scale(1.045)}
/* тінь на стику знімка й тексту, щоб не було різкої межі.
   У широкої плитки стик збоку, у звичайної — знизу. */
.work-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 55%,rgba(7,10,9,.55) 100%)}
@media(max-width:860px){
  .work-shot::after{background:linear-gradient(180deg,transparent 55%,rgba(7,10,9,.55) 100%)}
}
.work-body{flex:1 1 48%;padding:30px 27px 32px;display:flex;flex-direction:column}

.work-no{font-family:"Outfit",sans-serif;font-weight:800;font-size:clamp(34px,4.4vw,54px);line-height:1;
  letter-spacing:-.02em;background:linear-gradient(120deg,#dff2e8,#6fb394);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.work-meta{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--green-lt)}
.work h3{margin-top:11px;font-size:clamp(19px,2vw,23px);font-weight:700;line-height:1.25;
  letter-spacing:-.01em;color:#edf7f2}
.work p{margin-top:11px;font-size:14.2px;line-height:1.62;color:var(--dim)}
.work-go{margin-top:auto;padding-top:22px;font-size:14px;font-weight:700;color:var(--green-lt);
  display:inline-flex;align-items:center;gap:8px;transition:gap .3s,color .3s}
.work-go i{font-style:normal;transition:transform .3s}
.work:hover .work-go{color:var(--mint)}
.work:hover .work-go i{transform:translateX(5px)}

/* ══════════ поява ══════════ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.75,.25,1),transform .8s cubic-bezier(.2,.75,.25,1)}
.rv.on{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}.d6{transition-delay:.42s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  /* ширину шкал ставить скрипт зі свого data-w; переходи вже вимкнені вище,
     тому вони просто з'являються одразу. Окреме правило тут не потрібне —
     раніше воно стояло і ламало шкали на 100% */
}

/* ══════════ сторінка «Роботи» ══════════ */
.case-top{padding-bottom:0}
/* список іде одразу під вступом: інакше між ними майже 150 пікселів порожнечі */
#works{padding-top:clamp(26px,3.4vw,40px);padding-bottom:0}
#works .works{margin-top:0}
.case-top h1{font-weight:800;letter-spacing:-.024em;line-height:1.08;
  font-size:clamp(27px,4vw,46px);color:#eef8f3}
.case-top h1 .soft{color:#7fae98}
/* кінцівка: щоб сторінка не обривалася списком у порожнечу */
/* На вузькому екрані знімки телефона стають у стовпчик. На повну ширину
   кожен виростає майже на цілий екран: 640×1387 при ширині 390 — це 845
   пікселів висоти. Тому звужуємо їх і ставимо посередині. */
@media(max-width:760px){
  .phones{gap:34px}
  .phones .shot{max-width:280px;margin:0 auto;width:100%}
  .phones .shot h3,.phones .shot p{text-align:left}
  .shot--wide .frame{max-width:320px}
}

/* Лінія на зміні теми. Заголовок розділу («спершу в боті, потім той самий
   каталог на сайті») до цього місця вже прогорнули, і перший знімок сайту
   з'являвся без попередження. Напису немає — сама лінія. */
.turn{height:1px;background:var(--line);margin-top:clamp(40px,4.6vw,60px)}

.case-end{padding-top:clamp(40px,5vw,64px)}
.case-end .box{border-radius:var(--r);border:1px solid var(--line);background:var(--card);
  padding:clamp(26px,4vw,44px);display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap}
.case-end h2{font-size:clamp(20px,2.4vw,28px)}
.case-end p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--dim);max-width:52ch}

/* ══════════ сторінка кейсу ══════════ */
.crumb{padding-top:clamp(26px,3vw,40px)}
.crumb a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--dimmer);text-decoration:none;transition:color .25s,gap .25s}
.crumb a:hover{color:var(--green-lt);gap:12px}
.case-head{padding-top:clamp(20px,2.4vw,28px);padding-bottom:0}
.case-head h1{font-weight:800;letter-spacing:-.024em;line-height:1.08;
  font-size:clamp(28px,4.4vw,50px);color:#f2fbf7;max-width:20ch}
.case-head .lead{max-width:60ch}
/* «спробувати» одразу під заголовком: це головна сила саме цього кейсу —
   можна перевірити за десять секунд, а не вірити на слово */
.try{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3vw,32px)}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(34px,4vw,48px)}
@media(max-width:760px){.facts{grid-template-columns:1fr}}
.fact{padding:24px 22px}
/* Montserrat, а НЕ Outfit: у написах «100 тисяч» і «8 рядків» є кирилиця,
   а в Outfit її немає — цифри малювалися одним шрифтом, слова іншим.
   Та сама помилка вже була в «КРОК 01» на головній. */
.fact .n{font-family:"Montserrat",sans-serif;font-weight:800;font-size:clamp(24px,2.8vw,32px);line-height:1;
  letter-spacing:-.02em;background:linear-gradient(120deg,#dff2e8,#6fb394);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fact .l{margin-top:10px;font-size:14px;font-weight:600;color:#d3e6dc}
.fact .d{margin-top:5px;font-size:13px;line-height:1.5;color:var(--dimmer)}

/* Знімки. Телефонні йдуть трійкою в ряд, підпис під кожним: якщо ставити
   їх один під одним, тільки ця частина сторінки виростає на три екрани.
   Знімки сайту широкі, але з обмеженою висотою — інакше кожен займає цілий
   екран. Ріжеться низ, найважливіше в них зверху. */
.shots{margin-top:clamp(30px,3.6vw,44px)}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
@media(max-width:760px){.phones{grid-template-columns:1fr;gap:30px}}
.phones img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line)}
.wide-shots{margin-top:clamp(26px,3vw,38px);display:flex;flex-direction:column;
  gap:clamp(34px,4.2vw,58px)}
.shot h3{font-size:clamp(16px,1.8vw,18.5px);font-weight:700;color:#eaf5f0;margin:16px 0 8px}
.shot p{font-size:14px;line-height:1.6;color:var(--dim)}
/* Знімки сайту НЕ обрізаємо: обрізав був до 520 пікселів висоти — і на
   знімку фільтрів лишилися два поля з семи, хоча підпис обіцяє всі сім.
   Підпис іде ПЕРЕД знімком, а не під ним. У знімків бота підпис знизу — там
   вони йдуть трійкою і читаються як одна група. А кожен знімок сайту стоїть
   сам по собі, і без вступу виходило «спершу картинка, а що це — нижче».
   Збоку теж пробував: підпис короткий, знімок вузький, праворуч лишалося
   півекрана порожнечі. */
.shot--wide .frame{max-width:560px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line)}
.shot--wide img{width:100%;height:auto;display:block}
.shot--wide .cap{max-width:60ch;margin-bottom:16px}
.shot--wide .cap h3{margin-top:0;margin-bottom:8px}

/* кошторис на прикладі */
.cost{margin-top:30px;padding:clamp(24px,3vw,34px);border-radius:var(--r);
  border:1px solid var(--line);background:var(--card);max-width:560px}
.cost .who{font-size:15px;font-weight:700;color:#eaf5f0;margin-bottom:18px}
.cost dl{display:grid;grid-template-columns:1fr auto;gap:11px 20px;font-size:14.5px}
.cost dt{color:var(--dim)}
.cost dd{color:#e4f1eb;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.cost .free dd{color:var(--mint)}
.cost .sum{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.cost .sum span{font-size:14.5px;color:#d3e6dc;font-weight:600}
.cost .sum b{font-family:"Outfit",sans-serif;font-size:clamp(22px,2.6vw,28px);font-weight:800;
  color:#eaf7f0;letter-spacing:-.01em}
.cost .note{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--dimmer)}

/* На вузькому екрані знімки телефона стають у стовпчик. На повну ширину
   кожен виростає майже на цілий екран: 640×1387 при ширині 390 — це 845
   пікселів висоти. Тому звужуємо їх і ставимо посередині. */
@media(max-width:760px){
  .phones{gap:34px}
  .phones .shot{max-width:280px;margin:0 auto;width:100%}
  .phones .shot h3,.phones .shot p{text-align:left}
  .shot--wide .frame{max-width:320px}
}

/* Лінія на зміні теми. Заголовок розділу («спершу в боті, потім той самий
   каталог на сайті») до цього місця вже прогорнули, і перший знімок сайту
   з'являвся без попередження. Напису немає — сама лінія. */
.turn{height:1px;background:var(--line);margin-top:clamp(40px,4.6vw,60px)}

.case-end{padding-top:clamp(40px,5vw,64px)}
.case-end .box{border-radius:var(--r);border:1px solid var(--line);background:var(--card);
  padding:clamp(26px,4vw,44px);display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap}
.case-end h2{font-size:clamp(20px,2.4vw,28px)}
.case-end p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--dim);max-width:52ch}

/* ── додано для кейсу Grid Monitor ── */
/* Знімки тут ширші, ніж у кейсі про авто (560). Ті були вертикальні —
   каталог авто, картка лота. Ці горизонтальні, і на 560 текст усередині
   ставав нечитабельним. Правило стоїть після всіх інших, тому мобільне
   звуження доводиться дописувати ще раз — інакше воно б перебилося. */
.shot--wide .frame{max-width:680px}
@media(max-width:760px){.shot--wide .frame{max-width:none}}

/* Фото пристрою й знімок сайту стоять парою в один ряд. Поодинці, стовпчиком,
   кожен займав ліву половину, а праворуч на ноутбуці лишалося півекрана
   порожнечі — і це впадало в око одразу під трьома телефонами, які йдуть
   через усю ширину. Пропорції в них майже однакові (1.49 і 1.51), тому в
   ряду вони виходять однакової висоти.
   Підписи різної довжини: щоб знімки все одно починалися на одному рівні,
   комірки тягнуться на однакову висоту, а рамка притиснута до низу.
   Пропорцію обом задано 3:2 примусово. Без неї фото 1.49 і знімок 1.51
   давали різну висоту, і лівий починався на 4 пікселі вище за правий.
   Обрізає це частки відсотка з країв, де в обох порожньо. */
.pair{margin-top:clamp(26px,3vw,38px);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.6vw,34px);align-items:stretch}
.pair .shot{display:flex;flex-direction:column}
.pair .frame{max-width:none;margin-top:auto;aspect-ratio:3/2}
.pair .frame img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){
  .pair{grid-template-columns:1fr;gap:34px}
  .pair .frame{margin-top:0}
}
/* Фото пристрою знято на чорному тлі, тому рамка навколо нього має бути
   чорна, а не кольору картки — інакше видно шов. */
.shot--wide .frame--photo{background:#000}

/* ── рамка iPhone Pro під знімки з телефона ──
   Мальована стилями, без картинки: не мутніє на великих екранах і важить нуль.

   Пропорції взяті з офіційних розмірів iPhone 15 Pro, а не на око:
     корпус 70.6 мм завширшки; екран 1179 пікселів при 460 ppi = 65.10 мм;
     отже рамка з боку (70.6 − 65.10) / 2 = 2.75 мм, тобто 3.89% корпусу;
     радіус екрана 55 пунктів із 393 пунктів ширини = 14% ширини екрана;
     радіус корпусу = радіус екрана плюс товщина рамки.

   Радіус беремо 13.2% замість точних 14%, і ось чому. Apple малює кут не
   колом, а «сквірклом» — крива довше йде рівно й повертає різкіше. CSS
   вміє тільки коло, і при тому самому числі кут виходить круглішим за
   справжній. Пробували 14% (завелике) і 12.6% (замале), зупинилися
   посередині: екран 40, корпус 40 + 9 = 49.
   Рамку свідомо зроблено тоншою за справжні 3.89%: 9 пікселів при корпусі
   320, тобто 2.8%. При точній товщині оправа на сторінці кричала гучніше
   за самі знімки, а дивитися треба на них. Радіуси перераховані під неї.

   Острівець зроблено вужчим за справжній (27% замість 31.8%). Справжній на
   макеті 300 пікселів завширшки читається як завелика чорна пляма.

   Корпус темний, майже чорний. Спершу я намалював його світлим металом —
   і оправа стала найяскравішим об'єктом на всій темній сторінці. */
.iphone{position:relative;width:100%;max-width:320px;margin:0 auto;padding:9px;
  border-radius:49px;
  background:linear-gradient(152deg,#2f3532 0%,#111514 22%,#232827 46%,#0c100f 66%,#262c2a 88%,#141817 100%);
  box-shadow:0 24px 48px rgba(0,0,0,.5),0 1px 1px rgba(255,255,255,.07) inset}
.iphone .screen{position:relative;border-radius:40px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(0,0,0,.85)}
/* Острівець МУСИТЬ лежати всередині .screen. Коли він стояв поруч із ним,
   відсотки рахувалися від корпусу разом із рамкою: він виїжджав на 3.9
   пікселя вище за верх екрана, зливався з оправою й читався як виїмка в
   ній. Зазор зверху 11 пунктів із 852 = 1.29% висоти екрана. */
.iphone .island{position:absolute;left:50%;top:1.29%;transform:translateX(-50%);
  width:27%;aspect-ratio:125/37;border-radius:99px;background:#000;z-index:2}
/* бічні кнопки: беззвучний режим, гучність, живлення */
.iphone i{position:absolute;background:linear-gradient(180deg,#39403d,#181d1b);border-radius:2px}
.iphone i.b1{left:-2px;top:19%;width:3px;height:4.4%}
.iphone i.b2{left:-2px;top:26%;width:3px;height:7%}
.iphone i.b3{left:-2px;top:35%;width:3px;height:7%}
.iphone i.b4{right:-2px;top:27.5%;width:3px;height:11%}
/* у знімків усередині рамки своєї рамки бути не повинно */
.phones .iphone img{width:100%;height:auto;display:block;border:0;border-radius:0}
/* На телефоні три знімки стають у стовпчик. Обмеження в 280, яке стоїть
   вище для кейсу про авто, тут зайве: там знімок був голий, а тут навколо
   нього ще оправа. */
@media(max-width:760px){.phones .shot{max-width:330px}}

/* ── знімки сайту в рамці вікна браузера ──────────────────────────────
   Блок разом із підписом стоїть посередині колонки: прибиті до лівого
   краю знімки лишали праворуч півекрана порожнечі. Ширина 820 — знімки
   зняті на 1000 пікселів, ширше довелося б розтягувати. */
.shot--wide{max-width:820px;margin-left:auto;margin-right:auto}
.shot--wide .frame{max-width:none;background:#0b110e}
/* Назви класів із префіксом win-: просто .bar на цій сторінці вже зайнято
   шкалами в розділі «Що вміємо», і смуга вікна успадковувала їхню висоту
   в 5 пікселів. */
.win-bar{display:flex;align-items:center;gap:7px;padding:9px 13px;
  background:rgba(255,255,255,.045);border-bottom:1px solid var(--line)}
.win-bar i{width:9px;height:9px;border-radius:50%;background:#39433f;flex:none}
.win-url{margin-left:8px;padding:3px 12px;border-radius:99px;background:rgba(0,0,0,.32);
  font-size:10.5px;line-height:1.6;color:var(--dimmer);white-space:nowrap}
@media(max-width:760px){.shot--wide{max-width:none}}
/* Довга адреса в смузі вікна не мусить розпирати блок на вузькому екрані:
   у колонці flex елементи за замовчуванням не стискаються менше за вміст. */
.wide-shots>.shot{min-width:0;width:100%}   /* автоматичні поля з боків
   вимикають розтягування у стовпчику flex, і блок брав ширину за вмістом */
.win-bar{min-width:0}
.win-url{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}

/* ══════════ сторінки робіт, доданих 2 серпня ══════════ */

/* Знімки тут ширші за 820, які стоять вище. Ці зняті на 1280 пікселях і
   показують таблиці цін та калькулятори — на 820 дрібні числа в них уже
   не читалися. 980 — стеля: далі знімок починає тиснути на текст. */
.case-demo .shot--wide{max-width:980px}
@media(max-width:760px){.case-demo .shot--wide{max-width:none}}

/* Що вміє сайт: два стовпчики смуг. Одним стовпчиком на ноутбуці список
   із шести пунктів розтягувався на пів екрана й читався як анкета. */
.inside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px;list-style:none}
@media(max-width:860px){.inside{grid-template-columns:1fr}}
.inside li{display:flex;gap:12px;align-items:flex-start;
  padding:17px 19px;border-radius:14px;border:1px solid var(--line);background:var(--card);
  font-size:14.2px;line-height:1.6;color:var(--dimmer);
  transition:border-color .3s,background .3s}
.inside li:hover{border-color:var(--line-hi);background:rgba(127,191,161,.05)}
.inside li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);
  flex:none;margin-top:7px;box-shadow:0 0 0 4px rgba(62,142,110,.16)}
.inside b{display:block;font-size:14.5px;font-weight:700;color:#e6f3ec;margin-bottom:4px}

/* Знімок телефона стоїть у парі з підписом, а не сам посеред сторінки:
   оправа завширшки 300 лишала по чверті екрана порожнечі з обох боків. */
.onphone{display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,4.4vw,60px);
  align-items:center;margin-top:clamp(30px,3.6vw,44px)}
@media(max-width:760px){
  .onphone{grid-template-columns:1fr;gap:30px;justify-items:center}
  .onphone .iphone{max-width:280px}
  .onphone .onphone-text{max-width:none}
}
.onphone h3{font-size:clamp(17px,1.9vw,20px);font-weight:700;color:#eaf5f0;margin-bottom:12px}
.onphone p{font-size:14.5px;line-height:1.68;color:var(--dim);max-width:54ch}
.onphone p + p{margin-top:13px}

/* Знімок усередині оправи телефона мусить розтягуватись на її ширину.
   Правило вище стосується тільки .phones .iphone img — трійки знімків у
   старих кейсах. Тут оправа стоїть одна, у парі з підписом, і без цього
   рядка знімок лишався в натуральні 780 пікселів і вилазив за екран. */
.onphone .iphone img{width:100%;height:auto;display:block;border:0;border-radius:0}