/* ---- tokens.css ---- */
/* Дизайн-токени — з ТЗ головної v1.1 (docs/README.md). Єдине місце для кольорів, шрифтів, радіусів, відступів. */
:root{
  /* кольори */
  --bg:#F5F0E6;        /* фон сторінки */
  --bg-2:#FAF7F0;      /* картки, світлі секції */
  --ink:#171610;       /* основний текст, темні секції */
  --green:#294C3B;     /* акцент, кнопки, рамки активних карток */
  --muted:#69665F;     /* другорядний текст; лінії на темному */
  --line:#D8D1C5;      /* лінії, рамки; текст на темному */
  --bronze:#866235;    /* eyebrow, номери */
  --bronze-2:#A8804F;  /* маркери, зірочки ✱ */
  --gold:#D3B183;      /* акцент на темному фоні */
  --error:#A63D2A;     /* помилки форми */
  --overlay:rgba(23,22,16,.55);
  --hdr-bg:rgba(245,240,230,.85);
  --shadow-pop:0 16px 40px rgba(23,22,16,.08);
  --shadow-toast:0 12px 32px rgba(23,22,16,.18);

  /* шрифти */
  --font-sans:'Golos Text',system-ui,sans-serif;
  --font-serif:'Oranienbaum','PT Serif',Georgia,serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* розміри заголовків: desktop → планшет → телефон (нижче) */
  --fs-h1:48px; --fs-h2:42px; --fs-h2l:44px; --fs-h2xl:56px; --fs-h3:30px;

  /* радіуси */
  --r-btn:999px; --r-card:22px; --r-card-lg:26px; --r-inner:18px; --r-field:14px; --r-tag:10px;

  /* сітка */
  --wrap:1320px; --gutter:48px; --sec-y:112px; --hdr-h:72px; --tap:44px;
  --gap-grid:20px;
}
/* ≤1023: планшет портретний */
@media (max-width:1023px){
  :root{--gutter:40px;--sec-y:88px;--fs-h1:42px;--fs-h2:36px;--fs-h2l:40px;--fs-h2xl:46px}
}
/* ≤767: телефон */
@media (max-width:767px){
  :root{--gutter:24px;--sec-y:64px;--hdr-h:60px;--fs-h1:34px;--fs-h2:30px;--fs-h2l:32px;--fs-h2xl:34px}
}

/* ---- base.css ---- */
/* База: reset, типографіка, контейнер, сітки, доступність */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.7 var(--font-sans)}
body.no-scroll{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--green)}a:hover{color:var(--ink)}
h1,h2,h3,p,ul,ol{margin:0}ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 18px;border-radius:var(--r-btn);background:var(--green);color:var(--bg-2);text-decoration:none;font-weight:500}
.skip-link:focus{top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* контейнер і секції */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
/* якір: відступ секції частково ховається під хедер, контент стає на 40px нижче нього */
.sec[id]{scroll-margin-top:calc(var(--hdr-h) + 40px - var(--sec-y))}
#top{scroll-margin-top:0}
.sec--dark{background:var(--ink);color:var(--bg-2)}
.sec--soft{background:var(--bg-2)}
.sec--bt{border-top:1px solid var(--line)}
.sec--bb{border-bottom:1px solid var(--line)}
.sec__in{display:flex;flex-direction:column;gap:40px}
.sec__in--48{gap:48px}.sec__in--56{gap:56px}
.sec__head{display:flex;flex-direction:column;gap:20px}
.sec__cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-top:8px}
.lead{font-size:16px;color:var(--muted)}
.sec--dark .lead{color:var(--line)}

/* типографіка */
.serif{font-family:var(--font-serif);font-weight:400;line-height:1.08}
.mono{font-family:var(--font-mono)}
.eb{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);line-height:1.5}
.eb--gold{color:var(--gold)}
.h1{font-size:var(--fs-h1)}.h2{font-size:var(--fs-h2)}.h2l{font-size:var(--fs-h2l)}.h2xl{font-size:var(--fs-h2xl)}
.accent{color:var(--green)}.accent--gold{color:var(--gold)}
.star{font-size:30px;color:var(--bronze-2);line-height:1}
.dash-list{display:flex;flex-direction:column;gap:10px;font-size:15px}
.dash-list li{display:flex;gap:12px}
.dash-list li::before{content:'—';font-family:var(--font-mono);color:var(--bronze)}

/* сітки */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.g2t{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-grid)}
.g2--end{align-items:end}.g2--center{align-items:center}.g2--start{align-items:start}.g2--stretch{align-items:stretch}

/* reveal при скролі */
.reveal .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in .rv{opacity:1;transform:none}
.reveal.in .rv:nth-child(2){transition-delay:.08s}
.reveal.in .rv:nth-child(3){transition-delay:.16s}
.reveal.in .rv:nth-child(4){transition-delay:.24s}
.reveal.in .rv:nth-child(5){transition-delay:.32s}
.reveal.in .rv:nth-child(6){transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.reveal .rv{transition:none;opacity:1;transform:none}}
.no-js .reveal .rv{opacity:1;transform:none}

@media (max-width:1179px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1023px){
  .g2{grid-template-columns:minmax(0,1fr);gap:40px}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .g2t,.g3,.g4{grid-template-columns:minmax(0,1fr)}
}

/* ---- components/button.css ---- */
/* Кнопки, посилання-кнопки, чіпи, іконочні кнопки, пігулки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-btn);background:var(--green);color:var(--bg-2);padding:17px 32px;font:500 15px/1.2 var(--font-sans);cursor:pointer;text-decoration:none;min-height:48px;transition:background .15s}
.btn:hover{background:var(--ink);color:var(--bg-2)}
.btn--light{background:var(--bg-2);color:var(--ink)}
.btn--light:hover{background:var(--bg);color:var(--ink)}
.btn--dark{background:var(--ink);color:var(--bg-2)}
.btn--sm{padding:13px 24px}
.btn--xs{min-height:var(--tap);padding:10px 18px;align-self:flex-start}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;cursor:default}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer;text-decoration:none;border-bottom:1px solid var(--line)}
.lnk--strong{font-weight:500}
.icon-btn{width:var(--tap);height:var(--tap);flex-shrink:0;border:1px solid var(--line);border-radius:var(--r-btn);background:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;text-decoration:none}
.icon-btn:hover{border-color:var(--bronze);color:var(--ink)}
.chip{min-height:var(--tap);padding:8px 16px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.3;cursor:pointer}
.chip:hover{border-color:var(--bronze)}
.chip[aria-pressed="true"]{border-color:var(--green);background:var(--green);color:var(--bg-2)}
.pill{display:inline-block;font-size:11.5px;padding:6px 12px;border-radius:var(--r-btn);border:1px solid var(--line);line-height:1.4}
.pill--solid{border-color:var(--green);background:var(--green);color:var(--bg-2)}
@media (max-width:767px){.btn--full{width:100%}}

/* ---- components/card.css ---- */
/* Картки */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s;text-align:left;color:inherit;font:inherit}
.card:hover{border-color:var(--bronze)}
.card--accent{background:var(--bg);border:1.5px solid var(--green)}
.card--accent:hover{border-color:var(--green)}

/* ---- components/header.css ---- */
/* Хедер: липкий, прозорий до скролу; дропдаун; бургер-меню */
.hdr{position:sticky;top:0;z-index:30;background:transparent;border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
.hdr.is-scrolled{background:var(--hdr-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom-color:var(--line)}
.hdr__in{height:var(--hdr-h);display:flex;align-items:center;gap:32px}
.logo{display:inline-flex;align-items:baseline;flex-shrink:0;font:500 16px/1 var(--font-sans);color:var(--ink);text-decoration:none}
.logo__dot{font-family:var(--font-mono);font-size:17px;color:var(--green)}
.logo--light{color:var(--bg-2)}.logo--light .logo__dot{color:var(--gold)}
.hdr__nav{display:flex;align-items:center;gap:28px;flex-grow:1}
.nav{background:none;border:0;padding:6px 0;font:500 15px/1 var(--font-sans);color:var(--muted);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.nav:hover,.nav.is-on{color:var(--ink)}
.drop{position:relative}
.drop__chev{transition:transform .15s}
.drop__btn[aria-expanded="true"] .drop__chev{transform:rotate(180deg)}
.drop__menu{position:absolute;top:40px;left:-20px;width:300px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);padding:12px;display:flex;flex-direction:column;box-shadow:var(--shadow-pop);z-index:5}
.drop__item{padding:10px 14px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:15px}
.drop__item:hover{background:var(--bg)}
.drop__sep{height:1px;border:0;background:var(--line);margin:8px 14px}
.drop__other{text-align:left;padding:10px 14px;font:500 15px/1.4 var(--font-sans);color:var(--green)}
.drop__other:hover{color:var(--ink)}
.hdr__right{display:flex;align-items:center;gap:18px;margin-left:auto}
.lang{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em}
.lang__on{color:var(--ink)}.lang__sep{color:var(--line)}.lang__off{color:var(--muted);cursor:not-allowed}
.burger{display:none}

/* бургер-меню */
.mnav{position:fixed;inset:0;z-index:50;background:var(--bg);overflow-y:auto}
.mnav__in{max-width:560px;margin:0 auto;display:flex;flex-direction:column;padding:0 var(--gutter) 24px}
.mnav__top{height:var(--hdr-h);display:flex;align-items:center;gap:14px;flex-shrink:0}
.mnav__top .logo{flex-grow:1}
.mnav__nav{display:flex;flex-direction:column;font-size:30px;padding:16px 0}
.mnav__link{display:flex;justify-content:space-between;align-items:center;padding:10px 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mnav__group{border-bottom:1px solid var(--line)}
.mnav__group .mnav__summary{border-bottom:0;list-style:none;cursor:pointer}
.mnav__summary::-webkit-details-marker{display:none}
.mnav__sign{font-size:18px;color:var(--muted)}
.mnav__sign::before{content:'+'}
.mnav__group[open] .mnav__sign::before{content:'−'}
.mnav__sub{display:flex;flex-direction:column;padding:0 0 12px 16px;font:400 16px/1.5 var(--font-sans)}
.mnav__sub a{padding:8px 0;color:var(--ink);text-decoration:none}
.mnav__other{text-align:left;padding:8px 0;color:var(--green);font-weight:500}
.mnav__contacts{display:flex;flex-direction:column;gap:6px;padding-top:20px;font-size:15px;color:var(--muted)}

/* ≤1179: ноутбук / планшет альбомний — меню в бургер, кнопка лишається */
@media (max-width:1179px){
  .hdr__nav{display:none}
  .burger{display:inline-flex}
}
/* ≤767: телефон — ховаємо CTA і WhatsApp у хедері (є в липкій панелі) */
@media (max-width:767px){
  .hdr__cta,.hdr__wa{display:none}
  .hdr__right{gap:14px}
  .mnav__nav{font-size:28px;padding:8px 0 20px}
}

/* ---- components/footer.css ---- */
/* Футер: 4 колонки + копірайт */
.ftr{background:var(--ink);color:var(--line);border-top:1px solid var(--muted);padding:64px 0 32px}
.ftr__in{display:flex;flex-direction:column;gap:48px}
.ftr__grid{gap:40px;font-size:14px;line-height:1.8}
.ftr__col{display:flex;flex-direction:column}
.ftr__col a{color:var(--line);text-decoration:none}
.ftr__col a:hover{color:var(--bg-2)}
.ftr__brand{gap:10px}
.ftr__legal{font-size:12px;margin-top:12px}
.ftr__h{font-size:11px;letter-spacing:.14em;color:var(--gold);margin-bottom:8px}
@media (max-width:767px){.ftr{padding-bottom:calc(32px + 84px + env(safe-area-inset-bottom,0px))}}
.ftr__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;border-top:1px solid var(--muted);font-size:12px}

/* ---- components/dialog.css ---- */
/* Модальні вікна: нативний <dialog>. Форма заявки і кейс використовують одну оболонку */
.dialog{border:0;padding:16px;background:transparent;max-width:none;max-height:none;width:100%;height:100%;inset:0;margin:0;display:none;align-items:center;justify-content:center;color:var(--ink)}
.dialog[open]{display:flex}
.dialog::backdrop{background:var(--overlay)}
.dialog__card{width:100%;max-width:580px;max-height:94vh;overflow-y:auto;background:var(--bg-2);border-radius:var(--r-card-lg);padding:32px;display:flex;flex-direction:column;gap:18px}
.dialog--case .dialog__card{max-width:640px;padding:36px;gap:16px}
.dialog__head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.dialog__titles{display:flex;flex-direction:column;gap:6px}
.dialog__title{font-size:var(--fs-h3);line-height:1.1}
.dialog__sub{font-size:12px;color:var(--muted)}
.case-dialog__tag{font-size:11.5px;letter-spacing:.14em;color:var(--bronze);padding-top:12px}
.case-dialog__title{font-size:var(--fs-h3);line-height:1.15}
.case-dialog__text{color:var(--muted);font-size:15.5px;line-height:1.65}
.case-dialog__note{font-size:12px;color:var(--muted)}
.case-dialog__actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.case-dialog__page{font-size:15px;font-weight:500;color:var(--green);text-decoration:none}
/* ≤767: модалка на весь екран */
@media (max-width:767px){
  .dialog{padding:0;align-items:stretch}
  .dialog__card,.dialog--case .dialog__card{max-width:none;max-height:none;border-radius:0;padding:24px var(--gutter)}
}

/* ---- components/form.css ---- */
/* Форма заявки: поля, чіпи, згода, стани (помилки / відправка / помилка сервера / успіх) */
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field__label{font-size:14px;font-weight:500}
.field__opt{color:var(--muted);font-weight:400}
.field input,.field select{height:50px;border:1px solid var(--line);border-radius:var(--r-field);padding:0 16px;font:16px var(--font-sans);background:var(--bg);color:var(--ink);width:100%;min-width:0}
.field input.mono{font-family:var(--font-mono)}
.field input::placeholder{color:var(--muted);opacity:1}
.form__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.field select{width:auto;padding:0 10px;font-size:15px}
.field__row{display:flex;gap:8px}
.field__row input{flex-grow:1}
.field.is-invalid input{border-color:var(--error)}
.field__error{font-size:13px;color:var(--error);margin:0}
.field__error--consent{margin-top:-10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--muted);cursor:pointer}
.consent input{width:20px;height:20px;margin:0;accent-color:var(--green);flex-shrink:0}
.form__submit{position:relative}
.form__spinner{display:none;width:16px;height:16px;border:2px solid rgba(250,247,240,.4);border-top-color:var(--bg-2);border-radius:var(--r-btn);animation:spin .8s linear infinite}
.form.is-sending .form__spinner{display:block}
.form.is-sending .form__submit{opacity:.6;pointer-events:none}
.form{position:relative}
.form.is-sending input,.form.is-sending select{color:var(--ink);opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.form__spinner{animation:none}}
.form__note{font-size:11.5px;color:var(--muted);text-align:center;letter-spacing:.04em}
.form__alt,.form__hint{font-size:13px;color:var(--muted);text-align:center}
.form__hint{text-align:left}
.form__hint .lnk{font-size:13px}
.form__server{display:flex;gap:14px;padding:16px;border-radius:16px;border:1px solid var(--error);background:var(--bg);color:var(--ink)}
.form__server svg{flex-shrink:0;margin-top:2px;color:var(--error)}
.form__server-body{display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.5}
.form__done{display:flex;flex-direction:column;gap:16px;padding:32px 0 8px;text-align:center;align-items:center}
.form__done-title{font-size:28px;outline:0}
.form__done-text{color:var(--muted);font-size:15px}

/* ---- components/faq.css ---- */
/* FAQ-акордеон на <details name="faq"> */
.faq{max-width:820px;display:flex;flex-direction:column}
.faq__item{border-top:1px solid var(--line)}
.faq__q{display:flex;gap:20px;align-items:flex-start;padding:22px 0;cursor:pointer;font:500 17px/1.45 var(--font-sans);color:var(--ink);list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__n{font-size:12px;color:var(--bronze);padding-top:4px;min-width:22px}
.faq__t{flex-grow:1}
.faq__sign{font-size:18px;color:var(--muted)}
.faq__sign::before{content:'+'}
.faq__item[open] .faq__sign::before{content:'−'}
.faq__a{padding:0 40px 24px 42px;font-size:15.5px;color:var(--muted)}
.faq__foot{border-top:1px solid var(--line);padding-top:24px;font-size:15px}
@media (max-width:767px){.faq__a{padding:0 0 20px 42px}}
/* плавне розкриття (Chrome 131+ / Safari 18.4+; інші — миттєво) */
@supports (interpolate-size:allow-keywords){
  .faq__item::details-content{block-size:0;overflow:hidden;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
  .faq__item[open]::details-content{block-size:auto}
  :root{interpolate-size:allow-keywords}
}
.faq__sign{transition:transform .3s var(--ease),color .2s}
.faq__item[open] .faq__sign{color:var(--bronze)}
.faq__q:hover .faq__t{color:var(--green)}
.faq__t{transition:color .2s}

/* ---- components/video.css ---- */
/* Відеоблок: фасад з постером, плеєр після кліку */
.video{display:flex;flex-direction:column;gap:20px}
.video__facade{position:relative;aspect-ratio:16/9;width:100%;border:1px solid var(--line);border-radius:var(--r-card-lg);background:var(--ink) radial-gradient(ellipse at 30% 40%,rgba(41,76,59,.9),transparent 55%);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;color:var(--bg-2)}
.video__facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video__facade::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle,rgba(211,177,131,.28),transparent 45%);animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
.video__facade::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%27.5%27/%3E%3C/svg%3E");opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.video__play::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:1px solid var(--bg-2);animation:ring 2.4s ease-out infinite}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(18%,12%)}}
@media (prefers-reduced-motion:reduce){.video__facade::before,.video__play::after{animation:none}}
.video__play{width:76px;height:76px;border-radius:var(--r-btn);background:var(--bg-2);display:flex;align-items:center;justify-content:center;color:var(--ink);position:relative;transition:transform .15s}
.video__facade:hover .video__facade::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle,rgba(211,177,131,.28),transparent 45%);animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
.video__facade::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%27.5%27/%3E%3C/svg%3E");opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.video__play::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:1px solid var(--bg-2);animation:ring 2.4s ease-out infinite}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(18%,12%)}}
@media (prefers-reduced-motion:reduce){.video__facade::before,.video__play::after{animation:none}}
.video__play{transform:scale(1.05)}
.video__poster-note{position:absolute;left:20px;top:20px;font-size:11px;letter-spacing:.12em;color:var(--line)}
.video__badge{position:absolute;right:20px;bottom:20px;font-size:12px;padding:6px 12px;border-radius:var(--r-btn);background:rgba(23,22,16,.7);color:var(--bg-2)}
.video__player{aspect-ratio:16/9;width:100%;border:1px solid var(--line);border-radius:var(--r-card-lg);overflow:hidden;background:var(--ink)}
.video__player iframe{width:100%;height:100%;border:0;display:block}
.video__dev{font-size:12px;color:var(--line);padding:24px;text-align:center}
.video__h{font-size:40px}
.video__author{font-size:13px;color:var(--muted)}
@media (max-width:1023px){.video__h{font-size:36px}}
@media (max-width:767px){.video__h{font-size:30px}}

/* ---- components/steps.css ---- */
/* Кроки процесу (B5): три картки з лінією; на планшеті/телефоні — вертикальна лінія з точками */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.steps::before{content:'';position:absolute;left:0;right:0;top:62px;height:1px;background:var(--line);transform-origin:left;transition:transform 1.3s var(--ease) .2s}
html.js .steps[data-anim="line"]:not(.in)::before{transform:scaleX(0)}
.step{position:relative;display:flex;flex-direction:column;gap:12px}
.step__label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);height:18px}
.step__card{flex-grow:1;background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:14px}
.step__card--active{border:1.5px solid var(--green)}
.step__n{font-size:13px;color:var(--bronze)}
.step__h{font-size:28px}
.step__t{font-size:15px}
.step__result{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:14px;line-height:1.55}
.step__result-h{display:block;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.step__more{padding-top:12px}
.step__more a{font-size:14px;font-weight:500;color:var(--green);text-decoration:none}

@media (max-width:1023px){
  .steps{grid-template-columns:minmax(0,1fr);gap:16px;padding-left:32px}
  .steps::before{left:8px;right:auto;top:24px;bottom:24px;width:1px;height:auto;transform-origin:top}
  html.js .steps[data-anim="line"]:not(.in)::before{transform:scaleY(0)}
  .step__label--empty{display:none}
  .step::before{content:'';position:absolute;left:-29px;top:22px;width:11px;height:11px;border-radius:var(--r-btn);border:1px solid var(--bronze-2);background:var(--bg-2)}
  .step:first-child::before{top:52px;border-color:var(--green);background:var(--green)}
}
@media (max-width:767px){
  .steps{padding-left:26px}
  .steps::before{left:6px}
  .step::before{left:-25px}
}

/* ---- components/cases.css ---- */
/* Картки кейсів (B8): сітка 3 / слайдер на планшеті й телефоні */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid)}
.cases.one{grid-template-columns:minmax(0,1fr)}
.case{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:16px}
.case__tag{font-size:11.5px;letter-spacing:.14em;color:var(--bronze)}
.case__title{font-size:26px;line-height:1.2}
.case__client{font-size:14px;color:var(--muted);margin-top:-8px}
.case__block{font-size:15px;line-height:1.55}
.case__block-h{display:block;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.case__result{font-size:32px;font-weight:500;color:var(--green);line-height:1.2;padding-top:12px;border-top:1px solid var(--line)}
.case__term{font-size:12px;color:var(--muted)}
.case__links{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.case__page{font-size:14px;font-weight:500;color:var(--green);text-decoration:none}

@media (max-width:1023px){
  .cases{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  .cases>*{flex:0 0 46%;scroll-snap-align:start}
  .cases.one>*{flex:0 0 100%}
}
@media (max-width:767px){
  .cases>*{flex:0 0 86%}
}

/* ---- components/compare.css ---- */
/* Порівняння (B9): таблиця ≥768, вкладки ≤767 */
.cmp-wrap{overflow-x:auto}
.cmp{min-width:760px;width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.5;text-align:left}
.cmp th,.cmp td{padding:18px 20px;vertical-align:top;font-weight:400}
.cmp th:nth-child(1){width:26%}.cmp th:nth-child(2),.cmp th:nth-child(3){width:23.5%}.cmp th:nth-child(4){width:27%}
.cmp thead th{font-size:12px;letter-spacing:.1em;color:var(--muted)}
.cmp thead .cmp__us{color:var(--green);background:var(--bg-2);border:1.5px solid var(--green);border-bottom:0;border-radius:var(--r-card) var(--r-card) 0 0}
.cmp tbody th,.cmp tbody td{border-top:1px solid var(--line)}
.cmp tbody th{color:var(--muted)}
.cmp tbody .cmp__us{background:var(--bg-2);border-left:1.5px solid var(--green);border-right:1.5px solid var(--green);font-weight:500}
.cmp tbody tr:last-child .cmp__us{border-bottom:1.5px solid var(--green);border-radius:0 0 var(--r-card) var(--r-card)}
.cmp-tabs{display:none;flex-direction:column;gap:12px}
.tabs{display:flex;gap:6px;padding:4px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--bg-2)}
.tab{flex:1 1 0;min-height:44px;padding:6px 8px;border-radius:var(--r-btn);background:transparent;color:var(--muted);font:500 12.5px/1.2 var(--font-sans)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg-2)}
.tab--us[aria-selected="true"]{background:var(--green)}
.cmp-rows{outline:0}
.cmp-rows{display:flex;flex-direction:column;gap:8px}
.cmp-row{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-inner);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.cmp-row--us{border-color:var(--green)}
.cmp-row__k{font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.cmp-row__v{font-size:15px;line-height:1.45;font-weight:500}

@media (max-width:1023px){
  .cmp{min-width:0}
  .cmp th,.cmp td{padding:14px 12px;font-size:14px}
}
@media (max-width:767px){
  .cmp-wrap:has(+ .cmp-tabs:not([hidden])){display:none}
  .cmp-tabs{display:flex}
}

/* ---- components/mobile-bar.css ---- */
/* Мобільна липка панель (≤767) */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:none;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(245,240,230,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.bar__wa{width:52px;height:52px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--r-btn);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.bar__cta{flex-grow:1;padding:14px 20px}
@media (max-width:767px){.bar.is-visible{display:flex}}

/* ---- components/cookie.css ---- */
/* Cookie-банер */
.cookie{position:fixed;left:16px;bottom:16px;z-index:40;max-width:520px;padding:12px 14px 12px 18px;background:var(--ink);color:var(--bg-2);border-radius:16px;display:flex;align-items:center;gap:14px;font-size:13px;line-height:1.4;box-shadow:var(--shadow-toast)}
.cookie__text{flex-grow:1}
.cookie__text a{color:var(--gold)}
.cookie__ok{min-height:var(--tap);padding:8px 16px;border-radius:var(--r-btn);background:var(--bg-2);color:var(--ink);font:500 13px var(--font-sans)}
@media (max-width:767px){
  .cookie{left:12px;right:12px;max-width:none;bottom:12px;transition:bottom .2s}
  .cookie.has-bar{bottom:88px}
}

/* ---- motion.css ---- */
/* Рух і декор: інтро hero, появи при скролі, stagger, hover, паралакс-декор.
   Усе на transform/opacity. При prefers-reduced-motion і без JS — усе видиме й статичне. */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-pop:cubic-bezier(.3,1.5,.4,1)}

/* --- інтро (клас html.is-ready ставить head.html після завантаження шрифтів) --- */
html.js .intro,html.js .line__in{opacity:0}
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line__in{display:block}
html.js.is-ready .intro{animation:intro-up .8s var(--ease) both;animation-delay:var(--d,0s)}
html.js.is-ready .line__in{animation:line-up .9s cubic-bezier(.2,.7,.1,1) both;animation-delay:var(--d,0s)}
html.js.is-ready .hdr{animation:intro-down .6s var(--ease) both}
html.js.is-ready .logo__dot{animation:dot-pop .6s var(--ease-pop) .9s both}
@keyframes intro-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes line-up{from{opacity:1;transform:translateY(108%)}to{opacity:1;transform:none}}
@keyframes intro-down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes dot-pop{0%{transform:scale(1)}50%{transform:scale(1.7)}100%{transform:scale(1)}}

/* --- появи при скролі (reveal.js додає .in) --- */
html.js [data-anim="up"]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-anim="up"].in{opacity:1;transform:none}
html.js [data-stagger]>*{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease) calc(var(--i,0)*90ms),transform .7s var(--ease) calc(var(--i,0)*90ms)}
html.js [data-stagger].in>*{opacity:1;transform:none}
/* заголовки пословно (motion.js обгортає слова в .w) */
html.js [data-anim="words"] .w{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .6s var(--ease) calc(var(--i)*45ms),transform .6s var(--ease) calc(var(--i)*45ms)}
html.js [data-anim="words"].in .w{opacity:1;transform:none}
/* eyebrow: збирається з розрядки */
html.js [data-anim="eb"]{opacity:0;letter-spacing:.34em;transition:opacity .8s var(--ease),letter-spacing .9s var(--ease)}
html.js [data-anim="eb"].in{opacity:1;letter-spacing:.16em}
/* витирання (результати кейсів) */
html.js [data-anim="wipe"]{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease) .2s}
html.js [data-anim="wipe"].in{clip-path:inset(0 0 0 0)}

/* миттєве розкриття при переході по якорю (reveal.js) */
.is-instant,.is-instant *,.is-instant::before,.is-instant::after{transition:none!important}

/* --- hover --- */
.card{transition:border-color .2s,transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(23,22,16,.07)}
.btn{overflow:hidden}
.btn .arr,.lnk .arr,.industry__more .arr,.case__page .arr,.step__more .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr,.lnk:hover .arr,.industry:hover .arr,.case__page:hover .arr,.step__more a:hover .arr{transform:translateX(4px)}
.nav{position:relative}
.nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav:hover::after,.nav.is-on::after{transform:scaleX(1)}
.icon-btn{transition:border-color .2s,transform .3s var(--ease)}
.icon-btn:hover{transform:scale(1.06)}
.field input,.field select{transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(41,76,59,.12);outline:0}
.chip{transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease)}
.chip:active{transform:scale(.96)}

/* --- 3D-нахил за курсором (motion.js, лише desktop) --- */
[data-tilt]{transform-style:preserve-3d;will-change:transform}
[data-tilt].is-tilting{transition:none}

/* --- декор: фонові елементи секцій у стилі креслення --- */
.sec{position:relative;overflow:hidden}
.sec>.wrap{position:relative;z-index:1}
.decor-grid{position:absolute;inset:-60px;z-index:0;pointer-events:none;--tile:28px;background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:var(--tile) var(--tile);opacity:.55;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%)}
.decor-grid--lines{--tile:44px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);opacity:.35}
.sec--dark .decor-grid{background-image:radial-gradient(rgba(216,209,197,.35) 1px,transparent 1.2px);opacity:.5}
.decor-ring{position:absolute;z-index:0;width:560px;height:560px;border-radius:50%;border:1px dashed var(--bronze-2);opacity:.28;pointer-events:none;animation:spin-slow 140s linear infinite}
.decor-ring::before{content:'';position:absolute;inset:16%;border-radius:50%;border:1px solid var(--bronze-2);animation:spin-slow 90s linear infinite reverse}
.decor-ring::after{content:'';position:absolute;inset:38%;border-radius:50%;border:1px dashed var(--bronze-2)}
.decor-dash{position:absolute;z-index:0;left:0;right:0;height:1px;pointer-events:none;background:repeating-linear-gradient(90deg,var(--bronze-2) 0 14px,transparent 14px 48px);opacity:.35;animation:dash-run 1.6s linear infinite}
.decor-dash--rev{animation-direction:reverse}
.decor-glow{position:absolute;z-index:0;width:640px;height:640px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(168,128,79,.16),transparent 62%);filter:blur(14px);animation:glow-drift 16s ease-in-out infinite alternate}
.decor-q{position:absolute;z-index:0;font-family:var(--font-serif);font-size:620px;line-height:1;color:var(--bronze-2);opacity:.06;pointer-events:none;user-select:none;animation:float-q 14s ease-in-out infinite}
@media (max-width:767px){.decor-ring,.decor-dash,.decor-q{display:none}}

.decor-star{position:absolute;z-index:0;font-family:var(--font-serif);font-size:520px;line-height:1;color:var(--bronze-2);opacity:.07;pointer-events:none;user-select:none;animation:spin-slow 90s linear infinite}
.sec--dark .decor-star{color:var(--gold);opacity:.05}
.pulse-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:999px;background:var(--green);vertical-align:middle;position:relative}
.pulse-dot::after{content:'';position:absolute;inset:-4px;border-radius:999px;border:1px solid var(--green);animation:ring 1.5s ease-out infinite}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes dash-run{to{background-position:48px 0}}
@keyframes float-q{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-24px) rotate(4deg)}}
@keyframes glow-drift{from{transform:translate(0,0)}to{transform:translate(14%,10%)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-4px) rotate(var(--rot,0deg))}}

/* --- без руху --- */
@media (prefers-reduced-motion:reduce){
  html.js .intro,html.js .line__in,html.js [data-anim],html.js [data-stagger]>*,html.js [data-anim="words"] .w{opacity:1;transform:none;clip-path:none;letter-spacing:inherit;animation:none!important;transition:none!important}
  html.js [data-anim="eb"]{letter-spacing:.16em}
  .decor-star,.pulse-dot::after,.decor-ring,.decor-ring::before,.decor-dash,.decor-glow,.decor-q{animation:none}
  .card:hover,.icon-btn:hover{transform:none}
  [data-tilt]{transform:none!important}
}

/* ---- pages/home.css ---- */
/* Головна: стилі секцій B1–B11, які не є спільними компонентами */

/* B1 hero */
.hero-sec{padding-top:72px;padding-bottom:72px;position:relative;overflow:hidden}
.hero-sec::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:28px 28px;opacity:.5;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 95%);mask-image:linear-gradient(to bottom,#000 30%,transparent 95%);pointer-events:none}
.hero-sec .wrap{position:relative;z-index:1}
.decor-star--hero{right:-120px;top:-180px}
.hero{display:grid;grid-template-columns:55fr 45fr;gap:56px;align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:24px}
.hero__sub{font-size:17px;max-width:600px}
.sub-s{display:none}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:8px}
.hero__meta{font-size:12px;color:var(--muted);letter-spacing:.04em}
.facts{display:flex;flex-wrap:wrap;gap:12px 28px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);line-height:1.5}
.fact{display:flex;align-items:center;gap:10px}
.fact::before{content:'';width:6px;height:6px;border-radius:var(--r-btn);background:var(--bronze-2);flex-shrink:0}

.arch{position:relative;overflow:hidden;width:100%;max-width:500px;justify-self:end;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card-lg);padding:26px;display:flex;flex-direction:column;gap:16px}
.arch>:not(.arch__grid){position:relative}
.arch__grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;opacity:.35;pointer-events:none}
.arch__head{display:flex;justify-content:space-between;align-items:baseline}
.arch__label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.arch__label--green{color:var(--green)}
.arch__star{font-size:22px;color:var(--bronze-2);line-height:1}
.arch__tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:7px 12px;border:1px dashed var(--line);border-radius:var(--r-tag);background:var(--bg);color:var(--muted);font-size:13px}
.tag{transform:rotate(var(--rot))}
.tag:nth-child(1){--rot:-2deg;--i:0}.tag:nth-child(2){--rot:1.5deg;--i:1}.tag:nth-child(3){--rot:-1deg;--i:2}.tag:nth-child(4){--rot:2deg;--i:3}.tag:nth-child(5){--rot:-1.5deg;--i:4}
html.js .tag{opacity:0}
html.js.is-ready .tag{animation:tag-pop .55s var(--ease-pop) both calc(.75s + var(--i)*.1s),float calc(5s + var(--i)*.7s) ease-in-out infinite calc(1.6s + var(--i)*.3s)}
@keyframes tag-pop{from{opacity:0;transform:scale(.4) rotate(var(--rot))}to{opacity:1;transform:scale(1) rotate(var(--rot))}}
.arch__star{display:inline-block;animation:spin-slow 24s linear infinite}
html.js .arch__divider::before,html.js .arch__divider::after{transform:scaleX(0)}
html.js .arch__divider::before{transform-origin:right}html.js .arch__divider::after{transform-origin:left}
html.js.is-ready .arch__divider::before,html.js.is-ready .arch__divider::after{animation:grow-x .7s var(--ease) 1.2s both}
@keyframes grow-x{to{transform:scaleX(1)}}
.arch__divider .arch__label{animation:nudge 1.6s ease-in-out infinite 2s}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
html.js .arch__sys{clip-path:inset(0 0 100% 0)}
html.js.is-ready .arch__sys{animation:unclip .8s var(--ease) 1.4s both}
@keyframes unclip{to{clip-path:inset(0 0 0 0)}}
html.js .arch__item,html.js .arch__foot{opacity:0}
html.js.is-ready .arch__item,html.js.is-ready .arch__foot{animation:intro-up .6s var(--ease) both calc(1.7s + var(--i,4)*.12s)}
.arch__item:nth-child(2){--i:0}.arch__item:nth-child(3){--i:1}.arch__item:nth-child(4){--i:2}.arch__item:nth-child(5){--i:3}
.arch__item::before{position:relative}
.arch__item::after{content:"";position:absolute;left:-3px;width:12px;height:12px;border-radius:999px;border:1px solid var(--green);opacity:0;animation:ring 1.8s ease-out infinite calc(2.4s + var(--i,0)*.45s)}
.arch__item{position:relative}
@media (prefers-reduced-motion:reduce){html.js .tag,html.js .arch__sys,html.js .arch__item,html.js .arch__foot{opacity:1;clip-path:none;animation:none}html.js .arch__divider::before,html.js .arch__divider::after{transform:none;animation:none}.arch__star,.arch__divider .arch__label,.arch__item::after{animation:none}}
.arch__divider{display:flex;align-items:center;gap:12px}
.arch__divider::before,.arch__divider::after{content:'';flex-grow:1;height:1px;background:var(--line)}
.arch__sys{border:1.5px solid var(--green);border-radius:var(--r-inner);background:var(--bg);padding:20px;display:flex;flex-direction:column;gap:12px}
.arch__item{display:flex;align-items:center;gap:10px;font-size:15px}
.arch__item::before{content:'';width:6px;height:6px;border-radius:var(--r-btn);background:var(--green);flex-shrink:0}
.arch__foot{font-size:11px;color:var(--muted);padding-top:8px;border-top:1px solid var(--line)}

/* бігучий рядок */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0}
.marquee__track{display:flex;white-space:nowrap;width:max-content;animation:mq 45s linear infinite;font-size:24px;color:var(--ink)}
.marquee__half{display:flex;gap:28px;padding-right:28px}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__star{color:var(--bronze-2)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* B2 ознаки */
#signs{position:relative;overflow:hidden}
#signs .wrap{position:relative;z-index:1}
.decor-star--signs{left:-200px;bottom:-240px}
.decor-grid--signs{opacity:.35}
.illus--chaos{width:100%;max-width:520px;height:auto;margin-top:16px;color:var(--gold)}
.illus .wire{stroke-dasharray:1;stroke-dashoffset:1;opacity:.75;transition:stroke-dashoffset 1.1s var(--ease) calc(.2s + var(--i)*.12s)}
.illus .wire--cross{opacity:.35}
.illus.in .wire{stroke-dashoffset:0}
.illus .node{opacity:0;transform:scale(.92);transform-origin:center;transform-box:fill-box;transition:opacity .5s var(--ease) calc(.6s + var(--i)*.1s),transform .5s var(--ease) calc(.6s + var(--i)*.1s)}
.illus.in .node{opacity:1;transform:none}
.illus .node rect,.illus .node circle{fill:var(--ink);stroke:var(--muted);stroke-width:1}
.illus .node text{fill:var(--line)}
.illus .node--owner circle{stroke:var(--gold);stroke-width:1.5}
.illus .node--owner text{fill:var(--gold)}
.illus .node__sub{fill:var(--muted)!important;font-size:10px}
.illus__q{fill:var(--gold);animation:blink 1.4s ease-in-out infinite 2s}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}
.illus__packets{opacity:0;transition:opacity .8s 1.6s}
.illus.in .illus__packets{opacity:.9}
.no-js .illus .wire{stroke-dashoffset:0}.no-js .illus .node{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.illus .wire{stroke-dashoffset:0;transition:none}.illus .node{opacity:1;transform:none;transition:none}.illus__packets{display:none}.illus__q{animation:none;opacity:1}}
.signs{display:flex;flex-direction:column}
.sign{display:flex;gap:24px;padding:20px 0;border-top:1px solid var(--muted)}
.sign:last-child{border-bottom:1px solid var(--muted)}
.sign__n{color:var(--gold);font-size:13px;padding-top:3px;transition:color .3s}
.reveal.in .sign:hover .sign__n{color:var(--bg-2)}
.sign b{font-weight:600}
.sign__t{color:var(--line)}
.signs__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}
.signs__claim{max-width:820px}

/* B3 підхід */
#approach{position:relative;overflow:hidden}
#approach .wrap{position:relative;z-index:1}
.decor-star--approach{right:-220px;top:-120px}
.decor-ring--build{right:-180px;top:-120px}
.decor-dash--process-1{top:64px}.decor-dash--process-2{bottom:72px}
.decor-glow--process{left:-200px;top:-200px}
.decor-glow--video{left:-160px;bottom:-240px}
.decor-ring--expertise{left:-260px;bottom:-260px;width:620px;height:620px}
.decor-star--cases{right:-180px;top:-200px;animation-direction:reverse}
.decor-glow--cases{left:-220px;bottom:-260px}
.decor-ring--compare{right:-120px;bottom:-320px;width:480px;height:480px}
.decor-q--faq{right:40px;top:-120px}
.approach__title{margin-top:-24px;max-width:900px}
.layers.in .layer--base{transition-delay:0s}.layers.in .layer--sys{transition-delay:.18s}.layers.in .layer--ai{transition-delay:.36s}
.layers.in .layer--ai{animation:soft-ring 2.4s ease-out 1.1s 2}
@keyframes soft-ring{0%{box-shadow:0 0 0 0 rgba(168,128,79,.45)}100%{box-shadow:0 0 0 18px rgba(168,128,79,0)}}
.approach__aside .star{align-self:flex-start;width:max-content;transition:transform .6s var(--ease)}
.approach__aside:hover .star{transform:rotate(90deg)}
.approach__text p{font-size:17px}
.layers{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card-lg)}
.layer{padding:18px 20px;border:1px solid var(--bronze-2);border-radius:var(--r-inner);text-align:center;background:var(--bg)}
.layer--ai{width:62%}.layer--sys{width:80%}
.layer--base{width:100%;padding:22px 20px;border-color:var(--green);background:var(--green);color:var(--bg-2)}
.layer__h{font-size:11.5px;letter-spacing:.14em;color:var(--ink)}
.layer--base .layer__h{color:inherit}
.layer__t{font-size:14px;color:var(--muted);line-height:1.5}
.layer--base .layer__t{color:var(--line)}
.layers__note{font-size:12px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.6}
.approach__aside{justify-content:center;gap:16px;padding:40px;border-radius:var(--r-card-lg)}
.approach__aside-h{font-size:var(--fs-h3)}

/* B4 контури */
.build-sec{padding-top:96px}
.contour__top{display:flex;justify-content:space-between;align-items:center}
.contour__icon{color:var(--bronze);transition:color .25s,transform .4s var(--ease)}
.contour:hover .contour__icon{color:var(--green);transform:translateY(-2px)}
.contour__n{font-size:12px;color:var(--bronze)}
.contour__h{font-size:19px;font-weight:600;line-height:1.3}
.contour__t{font-size:15px;color:var(--muted);line-height:1.5}

/* B7 експертиза */
.industry{gap:14px;cursor:pointer}
.industry__top{display:flex;flex-direction:column;gap:14px}
.industry__icon{color:var(--bronze);transition:color .25s,transform .4s var(--ease)}
.industry:hover .industry__icon{color:var(--green);transform:translateY(-2px)}
.industry__icon--star{font-size:28px;line-height:1;color:var(--bronze-2)}
.industry__tag{font-size:11.5px;letter-spacing:.14em;color:var(--bronze)}
.industry__tag--green{color:var(--green)}
.industry__pain{font-size:16px;line-height:1.5}
.industry__pain-l{color:var(--muted)}
.industry__list{font-size:12px;color:var(--muted);line-height:1.7}
.industry__more{margin-top:auto;font-size:15px;font-weight:500;color:var(--green)}
.industry__h{font-size:24px;line-height:1.2}
.industry__t{font-size:15px;color:var(--muted);line-height:1.5}

/* B10 FAQ-сітка */
.faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}

/* B11 контакт */
#contact{position:relative;overflow:hidden}
#contact .wrap{position:relative;z-index:1}
#contact::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(216,209,197,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(216,209,197,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 75%);pointer-events:none}
.contact__glow{position:absolute;right:-160px;top:-200px;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(211,177,131,.22),transparent 60%);filter:blur(12px);animation:drift 18s ease-in-out infinite alternate;pointer-events:none}
.contact__copy{display:flex;flex-direction:column;gap:24px}
.contact__title{font-size:48px}
.gets{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.gets__label{font-size:11.5px;letter-spacing:.14em;color:var(--gold);margin-bottom:8px}
.gets__toggle{display:none;justify-content:space-between;align-items:center;width:100%;min-height:44px;border-top:1px solid var(--muted);color:var(--bg-2);font:500 15px var(--font-sans)}
.gets__sign{color:var(--gold)}
.gets__list{display:flex;flex-direction:column}
.gets__list li{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--muted)}
.gets__list li:last-child{border-bottom:1px solid var(--muted)}
.gets__n{color:var(--gold)}
.contact__side{display:flex;flex-direction:column;gap:16px}
.contact__card{background:var(--bg-2);color:var(--ink);border-radius:var(--r-card-lg);padding:36px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.corner{position:absolute;width:22px;height:22px;border:1px solid var(--gold);opacity:0;transition:opacity .5s var(--ease) .4s,transform .6s var(--ease) .4s;transform:scale(.4)}
.corner--tl{left:-14px;top:-14px;border-right:0;border-bottom:0}.corner--tr{right:-14px;top:-14px;border-left:0;border-bottom:0}.corner--bl{left:-14px;bottom:-14px;border-right:0;border-top:0}.corner--br{right:-14px;bottom:-14px;border-left:0;border-top:0}
.contact__card.in .corner{opacity:1;transform:none}
.contact__card-tag{position:absolute;left:14px;top:-30px;font-size:10.5px;letter-spacing:.14em;color:var(--gold);opacity:0;transition:opacity .6s var(--ease) .7s}
.contact__card.in .contact__card-tag{opacity:1}
html.js .contact__card[data-anim="frame"]{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .contact__card[data-anim="frame"].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.contact__glow{animation:none}.corner,.contact__card-tag{opacity:1;transform:none;transition:none}html.js .contact__card[data-anim="frame"]{opacity:1;transform:none}}
.contact .form__done{padding:24px 0}
.contact .form__done-title{font-size:30px}
.contact__alt{font-size:15px;color:var(--line)}
.contact__alt a{color:var(--gold)}

/* ≤1023: планшет */
@media (max-width:1023px){
  .hero-sec,.build-sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
  .hero{grid-template-columns:58fr 42fr;gap:40px}
  .arch{max-width:400px}
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .contact__title{font-size:40px}
}
/* ≤767: телефон */
@media (max-width:767px){
  .hero{grid-template-columns:minmax(0,1fr);gap:28px}
  .arch{order:2;max-width:100%;justify-self:stretch}
  .sub-l{display:none}.sub-s{display:inline}
  .facts{flex-direction:column;gap:10px}
  .gets__label{display:none}
  .gets__toggle{display:flex}
  .gets:not(.is-open) .gets__list{display:none}
  .contact__title{font-size:32px}
  .contact__card{padding:28px 24px}
  .decor-star{display:none}
  .corner{display:none}
  .illus--chaos{max-width:420px}
}