/* ==================================================================
   Laikina consulting — базові стилі
   Сітка   : 6 колонок (12 доріжок = 6 колонок + півкроки), гатер = --gap
   Кеглі   : H1 54 Unbounded Medium · H2 28 Unbounded Medium
             H3 22 Manrope ExtraBold · текст 22 Manrope Regular
             допоміжний 16 Manrope Regular
   Підхід  : mobile-first, далі ≥768 (планшет) і ≥1200 (десктоп)
   ================================================================== */

:root{
  /* Палітра (звірена піксельно з макетом) */
  --bg:#E6F9FF;
  --ink:#223F45;
  --teal:#59A5B2;
  --gold:#FFD978;
  --white:#FFFFFF;
  --ink-70:rgba(34,63,69,.78);
  /* Доступність: текст на бірюзовій підкладці — глибший відтінок тієї ж
     фарби (4,8:1 замість 3,9:1). Бірюза поверхонь лишається #59A5B2. */
  --ink-on-teal:#16333A;
  /* Бірюзовий ТЕКСТ на світлому — на крок глибший, щоб пройти 3:1 */
  --teal-text:#4E9AA8;
  --ink-line:rgba(34,63,69,.10);
  --on-dark-70:rgba(255,255,255,.82);

  --head:"Unbounded",system-ui,sans-serif;
  --text:"Manrope",system-ui,sans-serif;

  /* Типографіка — мобільний базис */
  --fs-h1:32px;
  --fs-h2:22px;
  --fs-h3:19px;
  --fs-body:18px;
  --fs-small:15px;

  /* Ритм */
  --container:1600px;
  --gutter:16px;
  --gap:12px;
  --col-gap:var(--gap);
  --pad:20px;
  --pad-lg:22px;
  --section:40px;
  --block-gap:40px;
  --label-gap:24px;
  --nav-h:66px;
  --btn-h:52px;
  --btn-h-sm:46px;

  --r-sm:12px;
  --r:16px;
  --r-lg:16px;
  --r-xl:20px;

  /* Тіні тоновані під фон, а не нейтрально-чорні */
  --sh-1:0 10px 28px -14px rgba(34,63,69,.30);
  --sh-2:0 20px 46px -16px rgba(34,63,69,.34);
  --sh-nav:0 8px 24px -16px rgba(34,63,69,.40);

  /* Криві та тривалості */
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --t-fast:160ms;
  --t:240ms;
  --t-slow:520ms;
  --dur:var(--t);

  /* Шари */
  --z-drop:20;
  --z-header:60;
  --z-drawer:70;
  --z-overlay:90;
}

/* ---------- Планшет ---------- */
@media(min-width:768px){
  :root{
    --fs-h1:40px;
    --fs-h2:24px;
    --fs-h3:20px;
    --fs-body:19px;
    --fs-small:15px;
    --gutter:26px;
    --gap:16px;
    --pad:24px;
    --pad-lg:28px;
    --section:52px;
    --block-gap:52px;
    --label-gap:32px;
    --nav-h:84px;
    --btn-h:64px;
    --btn-h-sm:52px;
    --r:18px;
    --r-lg:18px;
    --r-xl:24px;
  }
}

/* ---------- Десктоп: кеглі точно за макетом ---------- */
@media(min-width:1200px){
  :root{
    --fs-h1:54px;
    --fs-h2:28px;
    --fs-h3:22px;
    --fs-body:22px;
    --fs-small:16px;
    --gutter:clamp(32px,3.125vw,50px);
    --gap:clamp(16px,1.25vw,20px);
    --pad:clamp(24px,2vw,30px);
    --pad-lg:clamp(28px,2.5vw,40px);
    --section:clamp(48px,4vw,64px);
    --block-gap:clamp(48px,4vw,64px);
    --label-gap:clamp(32px,3vw,48px);
    --nav-h:clamp(92px,7.25vw,116px);
    --btn-h:clamp(64px,5.3vw,85px);
    --btn-h-sm:clamp(56px,4.2vw,67px);
    --r:20px;
    --r-lg:20px;
    --r-xl:28px;
  }
}

/* ================= База ================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-synthesis:none;overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:var(--text);font-weight:400;font-style:normal;font-size:inherit}
button{cursor:pointer}
p,h1,h2,h3{margin:0}
h1,h2{font-family:var(--head);font-weight:500;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:1.08}
h2{font-size:var(--fs-h2);line-height:1.22}
h3{font-family:var(--text);font-size:var(--fs-h3);font-weight:800;line-height:1.28;letter-spacing:-.012em;text-wrap:balance}
p{text-wrap:pretty}
small,.small{font-size:var(--fs-small);line-height:1.4}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ================= Каркас ================= */
.container{width:min(100%,var(--container));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}

/* Сітка: 12 доріжок = 6 колонок системи + можливість півкроку.
   Парний спан у 12 доріжках математично тотожний колонці 6-колонкової
   сітки з тим самим гатером, тож усе лишається однією сіткою. */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.grid>*{min-width:0}

/* Мобільний базис: одна колонка. Спани вмикаються з ≥768 і ≥1200,
   тому планшетні правила більше не перебивають десктопні. */
.grid>*{grid-column:1/-1}

.stack{display:flex;flex-direction:column;gap:var(--gap)}
.rows2{grid-row:span 2}
.hide{display:none!important}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;min-height:44px;display:inline-flex;align-items:center;z-index:calc(var(--z-header) + 1);background:var(--ink);color:var(--white);padding:10px 16px;border-radius:8px;font-size:var(--fs-small)}

/* ================= Шапка ================= */
.header{position:sticky;top:0;z-index:var(--z-header);background:var(--white);border-bottom:1px solid var(--ink-line);transition:box-shadow var(--t) var(--ease)}
.header.scrolled{box-shadow:var(--sh-nav)}
.nav{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,2vw,24px)}
.brand{font-family:var(--text);font-weight:800;font-size:var(--fs-h3);line-height:1.02;color:var(--teal-text);letter-spacing:-.02em;flex:none}
.brand span{display:block}
.nav-menu{display:none;align-items:center;gap:2px;list-style:none;padding:0;margin:0}
.nav-link{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 16px;border-radius:999px;font-size:var(--fs-body);line-height:1.2;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.nav-link[aria-current="page"]{background:var(--bg);font-weight:800}
.has-drop[data-open="true"] .nav-link{background:var(--bg)}
.drop-toggle{border:0;background:transparent;color:var(--ink)}
.drop-toggle svg{width:14px;transition:transform var(--t) var(--ease)}
.has-drop[data-open="true"] .drop-toggle svg{transform:rotate(180deg)}
.has-drop{position:relative}
.dropdown{position:absolute;left:0;top:calc(100% + 10px);width:min(420px,92vw);background:var(--white);padding:10px;border-radius:var(--r);box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top left;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
.has-drop[data-open="true"] .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;transition:background var(--t-fast) var(--ease)}
.dropdown b{font-size:var(--fs-h3);font-weight:800;line-height:1.25}
.dropdown small{font-size:var(--fs-small);opacity:.72}
.nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.nav-cta>.btn{min-height:var(--btn-h-sm)}

/* Бургер: три лінії з морфом у хрестик */
.burger{position:relative;display:grid;place-items:center;gap:0;width:48px;height:48px;border:1.5px solid var(--ink);border-radius:14px;background:var(--white);padding:0}
.burger span{display:block;grid-area:1/1;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform var(--t) var(--ease),opacity var(--t-fast) var(--ease)}
.burger span:nth-child(1){transform:translateY(-6px)}
.burger span:nth-child(3){transform:translateY(6px)}
.menu-open .burger span:nth-child(1){transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:rotate(-45deg)}

.drawer{position:fixed;inset:var(--nav-h) 0 0;z-index:var(--z-drawer);background:var(--bg);padding:22px var(--gutter) calc(28px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);visibility:hidden;transition:transform var(--t-slow) var(--ease),visibility var(--t-slow)}
.menu-open .drawer{transform:none;visibility:visible}
.drawer>a{display:block;padding:14px 0;font-size:var(--fs-h3);font-weight:800;border-bottom:1px solid var(--ink-line)}
.drawer .sub{margin:0;padding:6px 0 10px}
.drawer .sub a{display:block;padding:11px 0 11px 14px;font-size:var(--fs-body);color:var(--ink-70)}
.drawer .btn{margin-top:18px}

/* ================= Поверхні ================= */
.card{display:flex;flex-direction:column;background:var(--white);border-radius:var(--r);padding:var(--pad);color:var(--ink);transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.card-lg{padding:var(--pad-lg)}
.card.dark{background:var(--ink);color:var(--white)}
.card.teal{background:var(--teal);color:var(--ink-on-teal)}
.card.teal .muted{color:var(--ink-on-teal);opacity:1}
.card.teal h3,.card.teal .price,.card.teal .term,.card.teal dt,.card.teal dd{color:var(--ink-on-teal)}
.card.gold{background:var(--gold);color:var(--ink)}
.card.line{background:transparent;border:1.5px solid var(--teal)}
.card.dark p,.card.dark li,.card.dark dd{color:var(--white)}
.card.dark .muted{color:var(--on-dark-70);opacity:1}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--btn-h);
  padding:12px clamp(18px,2vw,32px);
  border-radius:999px;border:1.5px solid transparent;
  font-size:var(--fs-body);font-weight:800;line-height:1.2;
  text-align:center;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-teal{background:var(--teal);color:var(--ink-on-teal)}
.btn-white{background:var(--white);color:var(--ink)}
.btn-line{background:transparent;border-color:var(--teal);color:var(--ink)}
.card.dark .btn-line{border-color:var(--white);color:var(--white)}
.btn-block{width:100%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-row>.btn{flex:1 1 auto}

/* Ховер лише там, де є справжній курсор */
@media(hover:hover) and (pointer:fine){
  .nav-link:hover{background:var(--bg)}
  .dropdown a:hover{background:var(--bg)}
  .hoverable:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
  .btn:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}
  .btn:active{transform:scale(.98) translateY(0);box-shadow:none}
  .btn-line:hover{border-color:var(--ink)}
  .card.dark .btn-line:hover{background:rgba(255,255,255,.10)}
  .contact:hover{border-color:var(--teal);transform:translateY(-2px)}
  .art-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
}

/* Плашка розділу */
.label-row{display:flex;align-items:center;margin-bottom:var(--label-gap)}
.label-row::after{content:"";height:2px;background:var(--white);flex:1;border-radius:2px}
.label{display:inline-flex;align-items:center;min-height:var(--btn-h-sm);padding:8px clamp(18px,2vw,28px);border-radius:999px;background:var(--white);font-size:var(--fs-body);font-weight:800;color:var(--gold);flex:none}
.label.solo{margin-bottom:var(--label-gap)}

/* ================= Герой ================= */
.hero{padding-block:clamp(20px,4.5vw,72px) var(--gap)}
.hero>.grid{align-items:stretch}
.hero h1 .alt{display:block;color:var(--teal-text);margin-top:.06em}
.hero-sub{font-family:var(--head);font-weight:500;font-size:var(--fs-h2);line-height:1.24;letter-spacing:-.02em;max-width:22ch;margin-top:clamp(18px,2vw,30px);text-wrap:balance}
.hero-photo{border-radius:var(--r);overflow:hidden;background:var(--teal)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.stat{border:1.5px solid var(--teal);border-radius:var(--r);padding:clamp(16px,1.6vw,26px) clamp(16px,1.4vw,22px);background:transparent;flex:1;display:flex;flex-direction:column;justify-content:center}
.stat .n{font-family:var(--head);font-weight:500;font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .t{font-size:var(--fs-small);line-height:1.35;margin-top:10px}
.lead{font-size:var(--fs-body);line-height:1.42}
.quote-label{font-size:var(--fs-body);font-weight:800;color:var(--teal-text);margin-bottom:12px}
.quote{font-size:var(--fs-body);line-height:1.42}

/* ================= Списки, кроки ================= */
.ticks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:clamp(8px,.8vw,13px)}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-body);line-height:1.4}
.ticks li::before{content:"✓";font-weight:800;color:var(--gold);flex:none;line-height:inherit}
.card.line .ticks li::before{color:var(--teal)}
.card.teal .ticks li::before{color:var(--gold)}
.muted{font-size:var(--fs-body);font-weight:400;line-height:1.45;color:var(--ink-70)}

.steps{display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,26px)}
.step{position:relative;padding-right:0}
.step .n{display:block;font-size:var(--fs-body);font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.step p{font-size:var(--fs-body);line-height:1.32;margin-top:8px}
.step::after{content:"→";position:absolute;right:4px;top:0;color:var(--teal);font-size:var(--fs-h3);display:none}

/* ================= Послуги ================= */
.price{font-family:var(--head);font-weight:500;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.02em;margin-top:auto;padding-top:clamp(16px,1.8vw,26px);font-variant-numeric:tabular-nums}
.term{font-size:var(--fs-small);line-height:1.35;margin-top:8px;color:var(--ink-70)}
.card.dark .term,.card.teal .term{color:inherit;opacity:.92}
.svc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(16px,1.8vw,24px)}
.svc-actions .btn{flex:1 1 auto}

/* ================= Проєкти ================= */
.proj{height:100%}
.proj h3{font-family:var(--head);font-weight:500;font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.03em}
.proj dl{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px);flex:1;margin:clamp(16px,1.8vw,24px) 0 0}
.proj dt{font-size:var(--fs-body);font-weight:800;line-height:1.3}
.proj dd{font-size:var(--fs-body);line-height:1.42;margin:6px 0 0}
.proj .res{background:var(--white);color:var(--ink);border-radius:var(--r-sm);padding:clamp(14px,1.4vw,20px);margin-top:auto}
.proj.line .res{background:transparent;border-top:1.5px solid var(--teal);border-radius:0;padding-inline:0;padding-bottom:0}
.proj.dark dt{color:var(--gold)}
.proj.dark .res dt,.proj.dark .res dd{color:var(--ink)}

/* ================= CTA і форми ================= */
.cta-card{background:var(--ink);color:var(--white);border-radius:var(--r-xl);padding:clamp(24px,3.4vw,54px)}
.cta-card h2{color:var(--white)}
.cta-card .gold{color:var(--gold)}
.cta-card p{font-size:var(--fs-body);line-height:1.45;max-width:44ch;margin-top:clamp(14px,1.6vw,22px);color:var(--on-dark-70)}
.form-card{background:var(--teal);color:var(--ink-on-teal);border-radius:var(--r);padding:var(--pad-lg)}
.field{display:grid;gap:8px;margin-top:clamp(12px,1.4vw,18px)}
.field label{font-size:var(--fs-small);font-weight:800}
.field input{width:100%;height:var(--btn-h-sm);border:1.5px solid currentColor;border-radius:999px;background:transparent;padding:0 20px;color:inherit;font-size:var(--fs-small);transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.field input:focus{background:rgba(255,255,255,.28)}
.field input::placeholder{color:currentColor;opacity:.72}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);line-height:1.35;margin-top:16px}
.consent input{margin-top:1px;width:24px;height:24px;flex:none;accent-color:var(--ink)}
.consent a{text-decoration:underline;text-underline-offset:3px}
.form-ok{display:none}
.form-ok.show{display:block}
.form-ok .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:var(--gold);color:var(--ink);margin-bottom:14px}
.form-err{margin-top:12px;padding:12px 16px;border-radius:var(--r-sm);background:rgba(34,63,69,.10);color:var(--ink);font-size:var(--fs-small);line-height:1.4}
.card.dark .form-err,.modal .form-err{background:rgba(34,63,69,.08)}

/* ================= Контакти і підвал ================= */
/* Свідомий виняток із 6-колонкової сітки: смуга з 5 рівних карток за макетом */
.grid5{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.contact{display:flex;flex-direction:column;gap:8px;border:1.5px solid var(--ink);border-radius:var(--r);padding:clamp(16px,1.6vw,24px);background:transparent;transition:transform var(--t) var(--ease),border-color var(--t) var(--ease)}
.contact svg{display:none}
.contact .k{font-family:var(--head);font-weight:500;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em}
.contact .v{font-size:var(--fs-body);line-height:1.3;overflow-wrap:anywhere;color:var(--ink-70)}
.footer{margin-top:var(--section);background:var(--ink);color:var(--white);padding:clamp(22px,2.2vw,32px) 0 calc(clamp(22px,2.2vw,32px) + env(safe-area-inset-bottom))}
.footer-in{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-small);flex-direction:column;align-items:flex-start}
.footer-in>span{padding-block:11px}
.footer a{display:inline-flex;align-items:center;min-height:44px}
.legal{display:flex;gap:4px;flex-direction:column;align-items:flex-start}
.footer a{transition:color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.footer a:hover{color:var(--gold)}}

/* ================= Модалки ================= */
.overlay{position:fixed;inset:0;background:rgba(34,63,69,.55);display:none;place-items:center;padding:16px;z-index:var(--z-overlay);overflow-y:auto}
.overlay.open{display:grid}
.modal{width:min(100%,560px);background:var(--white);border-radius:var(--r-xl);padding:clamp(22px,3vw,36px);position:relative;max-height:calc(100dvh - 32px);overflow-y:auto}
.overlay.open .modal{animation:modal-in var(--t) var(--ease) both}
@keyframes modal-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.close{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:var(--ink);transition:background var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.close:hover{background:var(--bg)}}
.sub,.bk-hint,.bk-chosen,.bk-back{font-size:var(--fs-small);line-height:1.45}
.sub{margin-top:10px;color:var(--ink-70)}
.bk-slot{border:1.5px solid var(--teal);border-radius:999px;background:var(--white);padding:12px 18px;font-size:var(--fs-small);min-height:44px;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
@media(hover:hover) and (pointer:fine){.bk-slot:hover{background:var(--teal);color:var(--ink)}}
.bk-slot:active{transform:scale(.98)}
.bk-slots{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.bk-back{border:0;background:transparent;margin-top:14px;text-decoration:underline;text-underline-offset:3px}

/* ================= Теги досвіду ================= */
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin:0}
.chip{display:flex;align-items:center;justify-content:center;min-width:0;min-height:52px;padding:12px 14px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-family:var(--text);font-size:var(--fs-small);font-weight:400;line-height:1.2;text-align:center}
.page-about .experience-chips{align-self:center}

/* ================= Поява при скролі =================
   Контент видимий за замовчуванням. Анімація вмикається лише
   якщо JS проставив .js — інакше секції ніколи не «зникають». */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .grid>.reveal:nth-child(2),html.js .grid5>.reveal:nth-child(2){transition-delay:60ms}
html.js .grid>.reveal:nth-child(3),html.js .grid5>.reveal:nth-child(3){transition-delay:120ms}
html.js .grid>.reveal:nth-child(4),html.js .grid5>.reveal:nth-child(4){transition-delay:180ms}
html.js .grid>.reveal:nth-child(5),html.js .grid5>.reveal:nth-child(5){transition-delay:240ms}
html.js .grid>.reveal:nth-child(n+6){transition-delay:280ms}

/* ================= Планшет ≥768 ================= */
@media(min-width:768px){
  /* Планшет: до 2,5 колонки — половина рядка, більше — весь рядок */
  .grid>.c1,.grid>.c1h,.grid>.c2,.grid>.c2h,
  .grid>.s1,.grid>.s2,.grid>.s3,.grid>.s4,.grid>.s5{grid-column:span 6}
  .grid>.c3,.grid>.c3h,.grid>.c4,.grid>.c4h,.grid>.c5,.grid>.c6,
  .grid>.s6,.grid>.s7,.grid>.s8,.grid>.s9,.grid>.s10,.grid>.s11,.grid>.s12{grid-column:span 12}
  .steps{grid-template-columns:1fr 1fr}
  .grid5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-in{flex-direction:row;align-items:center}
  .legal{flex-direction:row;gap:32px}

  /* Герой: імʼя на всю ширину, далі цифри + фото, далі дві картки */
  .page-home .hero .s6:first-child{grid-column:span 12}
  .page-home .hero .s2{grid-column:span 5}
  .page-home .hero .hero-photo{grid-column:span 7;grid-row:auto;aspect-ratio:4/3}
  .page-home .hero .teal.s4,.page-home .hero .card.s4:not(.teal){grid-column:span 6}
  .page-about .hero figure.s4{grid-column:span 4;aspect-ratio:2/3}
  .cta-card .s6,.cta-card .s5{grid-column:span 12!important}
  .cta-card .s5{margin-top:22px}
}

/* Планшет: дві провідні картки послуг ідуть на всю ширину, щоб
   не лишати порожньої половини рядка поруч із першою з них */
@media(min-width:768px) and (max-width:1199px){
  .page-home .section[aria-labelledby="svc-h"] .grid>article:nth-child(-n+2){grid-column:span 12}
}

/* ================= Десктоп ≥1200 ================= */
@media(min-width:1200px){
  .nav-menu{display:flex}
  .burger{display:none}
  .drawer{display:none}

  /* Повна 6-колонкова сітка. .cN — колонки, .cNh — півкрок,
     .sN — легасі-псевдоніми у доріжках (N/2 колонки). */
  .grid>.c1{grid-column:span 2}
  .grid>.c1h{grid-column:span 3}
  .grid>.c2{grid-column:span 4}
  .grid>.c2h{grid-column:span 5}
  .grid>.c3{grid-column:span 6}
  .grid>.c3h{grid-column:span 7}
  .grid>.c4{grid-column:span 8}
  .grid>.c4h{grid-column:span 9}
  .grid>.c5{grid-column:span 10}
  .grid>.c6{grid-column:span 12}
  .grid>.s1{grid-column:span 1}.grid>.s2{grid-column:span 2}
  .grid>.s3{grid-column:span 3}.grid>.s4{grid-column:span 4}
  .grid>.s5{grid-column:span 5}.grid>.s6{grid-column:span 6}
  .grid>.s7{grid-column:span 7}.grid>.s8{grid-column:span 8}
  .grid>.s9{grid-column:span 9}.grid>.s10{grid-column:span 10}
  .grid>.s11{grid-column:span 11}.grid>.s12{grid-column:span 12}

  .steps{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2vw,30px)}
  .step{padding-right:34px}
  .step::after{display:block}
  .step:last-child::after{display:none}
  .grid5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .chips{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* Герой — композиція за макетом (6 колонок) */
  .page-home .hero>.grid{grid-template-rows:minmax(466px,auto) minmax(196px,auto)}
  .page-home .hero .s6:first-child{grid-column:1/span 6;grid-row:1;justify-content:center}
  .page-home .hero .s2{grid-column:7/span 2;grid-row:1}
  .page-home .hero .hero-photo{grid-column:9/span 4;grid-row:1/span 2;aspect-ratio:auto}
  .page-home .hero .teal.s4{grid-column:1/span 4;grid-row:2}
  .page-home .hero .card.s4:not(.teal){grid-column:5/span 4;grid-row:2}

  .page-home .hero+.container .card{min-height:400px}
  .page-home .section[aria-labelledby="dir-h"] .stack>.card:first-child{min-height:186px}
  .page-home .section[aria-labelledby="dir-h"] .stack>.card:last-child{min-height:186px}
  .page-home .section[aria-labelledby="svc-h"] .grid>article:nth-child(-n+2){min-height:510px}
  .page-home .section[aria-labelledby="svc-h"] .grid>article{min-height:378px}
  .page-home .section[aria-labelledby="proj-h"] .grid>article{min-height:560px}

  .page-about .hero>.grid{grid-template-rows:auto 455px}
  .page-about .hero .dark.s6{grid-column:1/span 6;grid-row:1}
  .page-about .hero .teal.s6{grid-column:7/span 6;grid-row:1}
  .page-about .hero figure{grid-row:2;aspect-ratio:auto}
  .page-about .hero figure:nth-of-type(1){grid-column:1/span 4}
  .page-about .hero figure:nth-of-type(2){grid-column:5/span 4}
  .page-about .hero figure:nth-of-type(3){grid-column:9/span 4}
  .page-about .hero figure img{width:100%;height:100%;object-fit:cover}
  .page-about .section[aria-labelledby="pn-h"] .card{min-height:250px}
  .page-about .section[aria-labelledby="ex-h"] .grid>.gold.s6{min-height:180px}
  .page-about .section[aria-labelledby="ex-h"] .grid>.teal.s8{min-height:200px}
  .page-about .section[aria-labelledby="ex-h"] .grid>.dark.s4{min-height:440px}
  .page-about .section[aria-labelledby="ex-h"] .grid>.s4:not(.dark){min-height:230px}
  .page-about .section[aria-labelledby="proj-h"] .grid>.proj{min-height:600px}
}

/* Дуже вузькі екрани */
@media(max-width:389px){
  .grid5,.chips{grid-template-columns:1fr}
  .svc-actions{flex-direction:column}
  .svc-actions .btn{width:100%}
  .btn-row{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  html.js .reveal{opacity:1;transform:none}
}

/* ==================================================================
   Компоненти внутрішніх сторінок (послуги, статті, юридичні)
   ================================================================== */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:var(--fs-small);color:var(--ink-70);padding-block:14px}
.crumbs [aria-current]{color:var(--ink);font-weight:800}
@media(hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--teal)}}

.tbl-wrap{margin-top:18px;border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
table.tbl{width:100%;border-collapse:collapse}
table.tbl thead th{background:var(--ink);color:var(--white);text-align:left;padding:16px 20px;font-size:var(--fs-small);font-weight:800}
table.tbl tbody td{padding:18px 20px;vertical-align:top;font-size:var(--fs-body);line-height:1.45;border-top:1px solid var(--ink-line)}
table.tbl tbody tr:nth-child(even) td{background:var(--bg)}
table.tbl td.stage{font-weight:800;color:var(--ink)}
table.tbl td .sn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--ink);color:var(--white);font-size:var(--fs-small);font-weight:800;margin-right:10px;vertical-align:middle}
@media(max-width:760px){
  table.tbl,table.tbl tbody,table.tbl tr,table.tbl td{display:block;width:100%}
  table.tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl-wrap{background:transparent;overflow:visible}
  table.tbl tbody tr{background:var(--white);border-radius:var(--r-lg);margin-bottom:14px;padding:4px 0;overflow:hidden}
  table.tbl tbody td{border-top:0;background:transparent!important;padding:12px 18px}
  table.tbl tbody td+td{border-top:1px solid var(--ink-line)}
  table.tbl td::before{content:attr(data-label);display:block;font-size:var(--fs-small);font-weight:800;color:var(--teal);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
}

.faq{margin-top:18px;display:grid;gap:10px}
.faq-item{background:var(--white);border-radius:var(--r);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;min-height:56px;padding:20px 60px 20px 24px;position:relative;font-weight:800;font-size:var(--fs-h3);transition:color var(--t) var(--ease)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:24px;top:26px;width:11px;height:11px;border-right:2.4px solid var(--teal);border-bottom:2.4px solid var(--teal);transform:rotate(45deg);transition:transform var(--t) var(--ease)}
.faq-item[open] summary::after{transform:rotate(-135deg);top:30px}
.faq-item .ans{padding:0 24px 22px;color:var(--ink-70);font-size:var(--fs-body);line-height:1.5}
@media(hover:hover) and (pointer:fine){.faq-item summary:hover{color:var(--teal)}}

.art-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.art-card .thumb{aspect-ratio:16/10;background:rgba(89,165,178,.16)}
.art-card .thumb img{width:100%;height:100%;object-fit:cover}
.art-card .body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.art-card .date{font-size:var(--fs-small);color:var(--ink-70)}
.art-card .go{margin-top:auto;color:var(--ink);font-weight:800;font-size:var(--fs-body)}
.empty-state{background:var(--white);border-radius:var(--r-lg);padding:48px 24px;text-align:center;color:var(--ink-70);font-size:var(--fs-body)}
.article{max-width:68ch;margin-inline:auto}
.article p{margin-top:16px;line-height:1.7}
.article h2{margin-top:34px}
.article h3{margin-top:24px}
.byline{font-size:var(--fs-small);color:var(--ink-70);margin-top:10px}
.cover{border-radius:var(--r-lg);overflow:hidden;margin-top:20px;aspect-ratio:16/9;background:rgba(89,165,178,.16)}
.cover img{width:100%;height:100%;object-fit:cover}

.legal-page{max-width:70ch}
.legal-page p{margin-top:14px}
.legal-page h2{margin-top:30px}
.pending{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:var(--ink);border-radius:999px;padding:10px 20px;font-size:var(--fs-small);font-weight:800;margin-top:16px}

.spec{list-style:none;margin:0;padding:0;display:grid;gap:0}
.spec li{display:flex;flex-direction:column;gap:4px;padding:14px 0}
.spec li+li{border-top:1px solid rgba(255,255,255,.18)}
.card:not(.dark) .spec li+li{border-top:1px solid var(--ink-line)}
.spec .k{font-size:var(--fs-small);font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.05em}
.card.dark .spec .k{color:var(--gold)}
.spec .v{font-size:var(--fs-body);line-height:1.4}
.spec .v.big{font-family:var(--head);font-weight:500;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em}

.numlist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:16px;counter-reset:nl}
.numlist li{position:relative;padding-left:58px}
.numlist li::before{counter-increment:nl;content:counter(nl,decimal-leading-zero);position:absolute;left:0;top:1px;width:42px;height:42px;border-radius:12px;background:var(--ink);color:var(--white);font-weight:800;font-size:var(--fs-small);display:grid;place-items:center}
.card.teal .numlist li::before,.card.dark .numlist li::before{background:rgba(255,255,255,.16);color:var(--white)}
.numlist li b{display:block;font-weight:800;margin-bottom:4px}
.numlist li span{display:block;color:var(--ink-70);font-size:var(--fs-body);line-height:1.45}
.card.dark .numlist li span{color:var(--on-dark-70)}
.prose p+p{margin-top:14px}
.prose .big{font-weight:800;font-size:var(--fs-h3);line-height:1.4}
.rel-go{color:var(--ink);font-weight:800;font-size:var(--fs-body);text-decoration:underline;text-underline-offset:4px}

/* ============================================================
   Правки головної за списком клієнта (11 пунктів).
   Додаткові варіанти кнопок + точкові кольори карток.
   ============================================================ */
/* Контурна кнопка на тёмному/бірюзовому — 2px, колір #E6F9FF (--bg) */
.btn-outline-light{background:transparent;border:2px solid var(--bg);color:var(--bg)}
.btn-outline-light:hover{border-color:var(--bg);color:var(--bg)}
@media (hover:hover){.btn-outline-light:hover{background:rgba(230,249,255,.12)}}
/* Контурна бірюзова кнопка на світлому — 2px #59A5B2 */
.btn-outline-teal{background:transparent;border:2px solid var(--teal);color:var(--teal)}
@media (hover:hover){.btn-outline-teal:hover{background:rgba(89,165,178,.10);border-color:var(--teal)}}
/* Світла заливка #E6F9FF (кнопка «Написати в Telegram» у CTA) */
.btn-light{background:var(--bg);color:var(--ink)}

/* (2) Картка «Що потрібно для залучення фінансування»: заголовок + список — світлі */
.card.teal.svc-need h3,.card.teal.svc-need .ticks li{color:var(--bg)}
/* (3) «Способи залучення фінансування під ваш бізнес:» — бірюзовий */
.c-teal{color:var(--teal)}

/* (4) Безкоштовна консультація: термін + галочки бірюзові; кнопки */
.svc-free .term{color:var(--teal);opacity:1}
.svc-free .ticks li::before{color:var(--teal)}
.btn-teal.btn-order-light{color:var(--bg)}                /* «Замовити» — світлий текст */
.btn-line.btn-bron-teal{color:var(--teal);border-color:var(--teal)} /* «Забронювати час» — бірюзовий */

/* (5) Стратегія (тёмна картка): заголовок + ціна золото, термін бірюзовий */
.card.dark.svc-strategy h3,.card.dark.svc-strategy .price{color:var(--gold)}
.card.dark.svc-strategy .term{color:var(--teal);opacity:1}

/* (6) Бізнес-план / Фінмодель / Презентація (бірюзові): весь текст світлий, термін тёмний */
.card.teal.svc-teal-light h3,.card.teal.svc-teal-light .price{color:var(--bg)}
.card.teal.svc-teal-light .term{color:var(--ink);opacity:1}

/* (7,9,10) Термін бірюзовим на світлих картках послуг */
.svc-line .term,.svc-wide .term{color:var(--teal);opacity:1}
/* (9,10) Підзаголовок ліміту суми — з нового рядка, бірюзовий */
.svc-limit{display:block;margin-top:6px;color:var(--teal);font-size:var(--fs-small);font-weight:400}

/* «Повʼязані послуги» — сітка карток-посилань (сторінки послуг) */
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px);margin-top:clamp(18px,2vw,26px)}
.rel-item{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--white);
  border:1.5px solid var(--ink-line);border-radius:var(--r);padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  color:var(--ink);font-weight:700;font-size:var(--fs-body);line-height:1.3;text-decoration:none;
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),border-color var(--t-slow) var(--ease)}
.rel-item .arw{flex:none;color:var(--teal);font-weight:800}
@media (hover:hover){.rel-item:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--sh-1)}}
@media (max-width:640px){.rel-grid{grid-template-columns:1fr}}