/* ============================================================
   Hydro v2 - design tokens
   ============================================================ */
:root{
  /* бренд */
  --navy:#031b4e;
  --navy-deep:#00102f;
  --navy-800:#0c2863;
  --aqua:#52b0cd;
  --aqua-600:#2f93b5;
  --aqua-100:#dbeef5;

  /* нейтральні */
  --paper:#ffffff;
  --paper-2:#f4f8fb;
  --paper-3:#e9f1f6;
  --line:rgba(3,27,78,.12);
  --ink:#0b1420;
  --muted:#5b6166;

  /* типографіка */
  --font-display:"Onest","Golos Text",system-ui,sans-serif;
  --font-text:"Golos Text","Onest",system-ui,sans-serif;
  --fs-display:clamp(2.9rem,6.4vw,6.4rem);
  --fs-h2:clamp(2rem,3.9vw,3.9rem);
  --fs-h3:clamp(1.35rem,1.7vw,1.85rem);
  --fs-lead:clamp(1.05rem,1.25vw,1.35rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;

  /* ритм */
  --section:clamp(96px,11vw,192px);
  --gutter:clamp(20px,4vw,64px);
  --maxw:1360px;
  --maxw-wide:1640px;
  --radius:18px;
  --radius-lg:28px;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:1.62;
  font-synthesis-weight:none;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.02;letter-spacing:-.03em;margin:0}
p{margin:0}
::selection{background:var(--aqua);color:#fff}

.wrap{width:min(100% - var(--gutter)*2,var(--maxw));margin-inline:auto}
.wrap-wide{width:min(100% - var(--gutter)*2,var(--maxw-wide));margin-inline:auto}
.section{padding-block:var(--section)}
.stack>*+*{margin-top:clamp(16px,1.6vw,26px)}

/* ============================================================
   Кнопки
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  padding:1.05em 1.9em;border-radius:999px;border:1px solid transparent;
  transition:transform .4s var(--ease),background-color .3s,color .3s,border-color .3s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--aqua-600);color:#fff}
.btn--primary:hover{background:var(--navy)}
.btn--ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn--ghost:hover{background:#fff;color:var(--navy)}
.btn--dark{background:var(--navy);color:#fff}
.btn--dark:hover{background:var(--aqua-600)}
.btn iconify-icon{font-size:1.15em;transition:transform .4s var(--ease)}
.btn:hover iconify-icon{transform:translateX(3px)}

/* ============================================================
   Хедер
   ============================================================ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  padding:clamp(14px,1.6vw,26px) 0;
  transition:background-color .45s var(--ease),backdrop-filter .45s,box-shadow .45s;
}
.site-header.is-solid{background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.site-header__row{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,48px)}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}
.brand img{width:40px;height:40px;object-fit:contain}
.brand span{font-size:1.02rem;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,34px)}
.nav a{font-size:.98rem;font-weight:500;position:relative;padding-block:.4em}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.15em;height:1px;background:currentColor;transition:right .45s var(--ease)}
.nav a:hover::after{right:0}
.site-header--over .nav a,.site-header--over .brand{color:#fff}
.site-header.is-solid .nav a,.site-header.is-solid .brand{color:var(--navy)}
.nav__cta{margin-left:.4rem}
.burger{display:none;background:none;border:0;padding:.5rem;color:inherit;font-size:1.6rem;line-height:1;cursor:pointer}

@media(max-width:1180px){
  .site-header .nav{
    position:fixed;inset:0;height:100dvh;flex-direction:column;justify-content:center;gap:1.5rem;
    background:var(--navy);color:#fff;z-index:70;
    transform:translateY(-100%);opacity:0;visibility:hidden;
    transition:transform .55s var(--ease),opacity .35s var(--ease),visibility 0s linear .55s;
  }
  .site-header .nav.is-open{transform:none;opacity:1;visibility:visible;transition-delay:0s}
  .site-header .nav a,
  .site-header.is-solid .nav a{color:#fff;font-size:1.35rem}
  .site-header .nav .btn--primary{background:var(--aqua-600);color:#fff;font-size:1rem}
  .site-header .burger{display:grid;place-items:center;position:relative;z-index:80;color:inherit}
  .site-header.is-solid .burger{color:var(--navy)}
  .site-header .burger.is-open,
  .site-header.is-solid .burger.is-open{color:#fff}
}

/* ============================================================
   Герой
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,16,47,.72) 0%,rgba(0,16,47,.30) 38%,rgba(0,16,47,.78) 100%),
    radial-gradient(120% 90% at 8% 90%,rgba(3,27,78,.85) 0%,rgba(3,27,78,0) 62%);
}
.hero__inner{position:relative;z-index:2;padding-block:clamp(120px,16vh,200px) clamp(48px,7vh,84px)}
.hero h1{font-size:var(--fs-display);max-width:15ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--aqua)}
.hero__lead{margin-top:clamp(18px,2vw,30px);max-width:52ch;font-size:var(--fs-lead);color:rgba(255,255,255,.9)}
.hero__actions{margin-top:clamp(26px,3vw,44px);display:flex;flex-wrap:wrap;gap:.9rem}
.hero__scroll{margin-top:clamp(40px,6vh,72px);display:flex;align-items:center;gap:.8rem;font-size:var(--fs-small);color:rgba(255,255,255,.7);letter-spacing:.02em}
.hero__scroll iconify-icon{font-size:1.3rem;animation:drift 2.6s var(--ease) infinite}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* смуга показників під героєм */
.metrics{background:var(--navy);color:#fff}
.metrics__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:rgba(255,255,255,.14)}
.metrics__item{background:var(--navy);padding:clamp(28px,3.4vw,54px) clamp(20px,2.4vw,40px)}
.metrics__num{font-family:var(--font-display);font-size:clamp(2.4rem,3.6vw,3.6rem);letter-spacing:-.04em;line-height:1}
.metrics__num span{color:var(--aqua)}
.metrics__label{margin-top:.6rem;color:rgba(255,255,255,.66);font-size:var(--fs-small)}

/* ============================================================
   Загальні секційні заголовки
   ============================================================ */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:end}
@media(min-width:900px){.sec-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.sec-head h2{font-size:var(--fs-h2);max-width:18ch;text-wrap:balance}
.sec-head p{color:var(--muted);max-width:46ch}

/* ============================================================
   Маніфест зі скрол-розкриттям
   ============================================================ */
.manifest{background:var(--paper-2)}
.manifest p{
  font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;
  font-size:clamp(1.6rem,3.2vw,3.05rem);line-height:1.18;max-width:22ch;
}
.manifest .word,.manifest .word.is-on{color:var(--ink)}

/* ============================================================
   Бенто процедур
   ============================================================ */
.bento{display:grid;gap:clamp(12px,1vw,18px);grid-auto-flow:dense;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(210px,auto)}}
.tile{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--navy);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;isolation:isolate;
}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--ease);filter:saturate(.92)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,16,47,.15) 30%,rgba(0,16,47,.86) 100%)}
.tile:hover img{transform:scale(1.06)}
.tile__body{padding:clamp(20px,2vw,34px);display:flex;flex-direction:column;gap:.7rem}
.tile h3{font-size:var(--fs-h3);text-wrap:balance}
.tile p{color:rgba(255,255,255,.76);font-size:var(--fs-small);max-width:38ch}
.tile__link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--aqua)}
.tile--wide{grid-column:span 2}
@media(min-width:900px){
  .tile--hero{grid-column:span 2;grid-row:span 2}
  .tile--wide{grid-column:span 2}
}
.tile--plain{background:var(--paper-2);color:var(--ink)}
.tile--plain::after{display:none}
.tile--plain p{color:var(--muted)}
.tile--plain .tile__link{color:var(--aqua-600)}

/* ============================================================
   Системи організму - горизонтальний акордеон
   ============================================================ */
.systems{background:var(--navy);color:#fff}
.systems .sec-head p{color:rgba(255,255,255,.7)}
.acc{display:grid;gap:1px;background:rgba(255,255,255,.16);border-radius:var(--radius-lg);overflow:hidden;margin-top:clamp(34px,4vw,64px)}
@media(min-width:1000px) and (hover:hover){.acc{grid-auto-flow:column;grid-auto-columns:1fr;height:min(58vh,520px)}
  .acc__item{transition:flex .7s var(--ease)}
  .acc:hover .acc__item{flex:1}
  .acc__item:hover{flex:3.4}
}
.acc__item{position:relative;background:var(--navy-deep);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:120px;padding:clamp(18px,1.8vw,30px)}
.acc__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.acc__item:hover img{opacity:.6;transform:scale(1.05)}
.acc__item h3{position:relative;font-size:clamp(1.05rem,1.25vw,1.35rem);letter-spacing:-.02em}
.acc__item p{position:relative;margin-top:.5rem;font-size:var(--fs-small);color:rgba(255,255,255,.72);opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.acc__item:hover p{opacity:1;transform:none}

/* ============================================================
   Принципи - редакційна нумерована сітка
   ============================================================ */
.principles{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);margin-top:clamp(34px,4vw,64px)}
@media(min-width:760px){.principles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.principles{grid-template-columns:repeat(3,1fr)}}
.principle{background:var(--paper);padding:clamp(26px,2.6vw,44px);display:flex;gap:1.2rem;transition:background-color .5s var(--ease)}
.principle:hover{background:var(--paper-2)}
.principle__num{font-family:var(--font-display);font-size:.9rem;color:var(--aqua-600);letter-spacing:.04em;padding-top:.35rem;min-width:2.2rem}
.principle h3{font-size:1.22rem;letter-spacing:-.02em}
.principle p{margin-top:.55rem;color:var(--muted);font-size:var(--fs-small)}

/* ============================================================
   Відгуки
   ============================================================ */
.quotes{background:var(--paper-2)}
.quote{display:grid;gap:clamp(22px,3vw,54px);align-items:center}
@media(min-width:900px){.quote{grid-template-columns:minmax(0,.34fr) minmax(0,.66fr)}}
.quote__media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--paper-3)}
.quote__media img{width:100%;height:100%;object-fit:cover}
.quote blockquote{margin:0;font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;font-size:clamp(1.35rem,2.3vw,2.2rem);line-height:1.22;text-wrap:balance}
.quote__meta{margin-top:1.4rem;color:var(--muted);font-size:var(--fs-small)}
.quote__nav{margin-top:clamp(22px,2.4vw,38px);display:flex;gap:.6rem}
.quote__nav button{width:52px;height:52px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--navy);cursor:pointer;
  display:grid;place-items:center;font-size:1.2rem;transition:background-color .35s,color .35s,border-color .35s}
.quote__nav button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ============================================================
   CTA
   ============================================================ */
.cta{position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:var(--radius-lg)}
.cta__inner{position:relative;z-index:2;padding:clamp(44px,6vw,110px) clamp(26px,4vw,88px);display:grid;gap:clamp(20px,2.4vw,40px)}
@media(min-width:960px){.cta__inner{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end}}
.cta h2{font-size:var(--fs-h2);max-width:16ch;text-wrap:balance}
.cta p{color:rgba(255,255,255,.74);max-width:44ch}
.cta__glow{position:absolute;inset:auto -10% -60% auto;width:min(70vw,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(82,176,205,.55) 0%,rgba(82,176,205,0) 68%);z-index:1}

/* ============================================================
   Футер
   ============================================================ */
.site-footer{background:var(--navy-deep);color:rgba(255,255,255,.72);padding-block:clamp(56px,6vw,110px) clamp(28px,3vw,44px)}
.site-footer a{color:rgba(255,255,255,.72);transition:color .3s}
.site-footer a:hover{color:#fff}
.footer__grid{display:grid;gap:clamp(28px,3vw,56px)}
@media(min-width:860px){.footer__grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
.footer__brand{display:flex;align-items:center;gap:.7rem;color:#fff;font-family:var(--font-display);font-weight:600}
.footer__brand img{width:44px;height:44px;object-fit:contain}
.footer__tag{margin-top:1rem;max-width:34ch;font-size:var(--fs-small)}
.footer h4{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-display);font-weight:600}
.footer ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem;font-size:var(--fs-small)}
.footer__bottom{margin-top:clamp(38px,4vw,72px);padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.85rem;color:rgba(255,255,255,.5)}

/* ============================================================
   Поява при скролі. Базовий стан - видимо: клас .hydro-anim вішає
   інлайн-скрипт у <head>, тож при збої JS контент лишається на місці.
   ============================================================ */
.reveal{opacity:1;transform:none}
.hydro-anim .reveal{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:calc(var(--d,0) * 80ms);
}
.hydro-anim .reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .hero__scroll iconify-icon{animation:none}
  html{scroll-behavior:auto}
  .hydro-anim .reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   Хедер сторінки (не головна)
   ============================================================ */
.page-hero{position:relative;padding-block:clamp(140px,17vh,230px) clamp(46px,6vh,86px);background:var(--paper-2);overflow:hidden}
.page-hero--media{background:var(--navy);color:#fff;padding-block:clamp(170px,22vh,280px) clamp(56px,7vh,100px)}
.page-hero__media{position:absolute;inset:0;z-index:0}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,16,47,.78) 0%,rgba(0,16,47,.45) 45%,rgba(0,16,47,.85) 100%)}
.page-hero__inner{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.3rem,4.6vw,4.4rem);max-width:19ch;text-wrap:balance}
.page-hero__lead{margin-top:clamp(14px,1.6vw,24px);max-width:56ch;font-size:var(--fs-lead);color:var(--muted)}
.page-hero--media .page-hero__lead{color:rgba(255,255,255,.82)}

/* ============================================================
   Контент сторінки
   ============================================================ */
.entry{max-width:74ch;font-size:1.075rem;color:#20262c}
.entry h2{font-size:clamp(1.6rem,2.4vw,2.4rem);margin-top:clamp(34px,3.4vw,56px)}
.entry h3{font-size:clamp(1.25rem,1.7vw,1.6rem);margin-top:clamp(26px,2.4vw,38px)}
.entry p+p{margin-top:1.1em}
.entry ul,.entry ol{padding-left:1.15rem;display:grid;gap:.55rem}
.entry li::marker{color:var(--aqua-600)}
.entry a{color:var(--aqua-600);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.entry a:hover{color:var(--navy)}
.entry img{border-radius:var(--radius);margin-block:clamp(20px,2vw,34px)}
.entry blockquote{margin:clamp(24px,2.6vw,40px) 0;padding-left:1.4rem;border-left:3px solid var(--aqua);
  font-family:var(--font-display);font-size:1.25rem;letter-spacing:-.02em;line-height:1.35}
.entry table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.entry th,.entry td{border-bottom:1px solid var(--line);padding:.75rem .6rem;text-align:left}

/* ============================================================
   Сітка карток (архіви)
   ============================================================ */
.cards{display:grid;gap:clamp(16px,1.6vw,28px);grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(3,27,78,.45)}
.card__media{display:block;aspect-ratio:16/11;overflow:hidden;background:var(--paper-3)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__ph{display:grid;place-items:center;height:100%;color:var(--aqua);font-size:2.4rem;background:
  radial-gradient(120% 120% at 30% 10%,rgba(82,176,205,.22),rgba(3,27,78,.06))}
.card__body{padding:clamp(20px,1.8vw,30px);display:flex;flex-direction:column;gap:.7rem}
.card h3{font-size:1.2rem;letter-spacing:-.02em;text-wrap:balance}
.card p{color:var(--muted);font-size:var(--fs-small)}
.card .tile__link{color:var(--aqua-600);margin-top:auto}

/* пагінація */
.pagination{margin-top:clamp(30px,3vw,52px);display:flex;gap:.5rem;flex-wrap:wrap}
.pagination .page-numbers{min-width:46px;height:46px;display:grid;place-items:center;padding-inline:.9rem;border:1px solid var(--line);
  border-radius:999px;font-size:.95rem;transition:background-color .3s,color .3s}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ============================================================
   Факти процедури
   ============================================================ */
.facts{background:var(--paper-2);border-bottom:1px solid var(--line)}
.facts__grid{display:grid;gap:1px;background:var(--line);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fact{background:var(--paper-2);display:flex;gap:1rem;align-items:center;padding:clamp(24px,2.6vw,40px) clamp(18px,2vw,34px)}
.fact iconify-icon{font-size:1.7rem;color:var(--aqua-600);flex:none}
.fact__val{display:block;font-family:var(--font-display);font-weight:600;font-size:1.35rem;letter-spacing:-.02em}
.fact__key{display:block;color:var(--muted);font-size:var(--fs-small);margin-top:.15rem}

/* показання / протипоказання */
.split{display:grid;gap:clamp(16px,1.8vw,28px)}
@media(min-width:820px){.split{grid-template-columns:repeat(2,1fr)}}
.note{padding:clamp(22px,2.2vw,34px);border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--paper)}
.note h3{display:flex;align-items:center;gap:.55rem;font-size:1.1rem;letter-spacing:-.02em}
.note h3 iconify-icon{font-size:1.3rem}
.note--ok{background:rgba(82,176,205,.07);border-color:rgba(82,176,205,.3)}
.note--ok h3{color:var(--aqua-600)}
.note--no{background:rgba(3,27,78,.04)}
.note--no h3{color:var(--navy)}
.note .entry{margin-top:.7rem;font-size:var(--fs-small);max-width:none}

/* відео */
.video{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy);aspect-ratio:16/9}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.faq__item{background:var(--paper)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:clamp(18px,1.8vw,26px) 0;font-family:var(--font-display);font-weight:600;font-size:1.08rem;letter-spacing:-.02em}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary iconify-icon{color:var(--aqua-600);font-size:1.3rem;transition:transform .45s var(--ease);flex:none}
.faq__item[open] summary iconify-icon{transform:rotate(45deg)}
.faq__body{padding-bottom:clamp(18px,1.8vw,26px);color:var(--muted);max-width:70ch}

/* WooCommerce - мінімальна адаптація під тему */
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
  background:var(--navy)!important;color:#fff!important;border-radius:999px!important;padding:.95em 1.7em!important;
  font-family:var(--font-display)!important;font-weight:600!important;transition:background-color .3s!important}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--aqua-600)!important}
.woocommerce ul.products li.product .price,.woocommerce div.product p.price{color:var(--navy)!important;font-family:var(--font-display);font-weight:600}
.woocommerce ul.products li.product h2,.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-display);letter-spacing:-.02em}

/* перемикач мов */
.nav__lang{display:inline-flex;align-items:center;gap:.55rem;font-size:.82rem;letter-spacing:.06em;font-family:var(--font-display);font-weight:600}
.nav__lang a{opacity:.6;transition:opacity .3s}
.nav__lang a:hover{opacity:1}
.nav__lang a.is-current{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--aqua)}
@media(max-width:1180px){.nav__lang{order:99;font-size:1rem;gap:1rem}}

/* кнопка "вгору" від trx_addons - приводимо до вигляду теми */
.trx_addons_scroll_to_top{
  width:52px!important;height:52px!important;right:20px!important;bottom:20px!important;
  background:var(--navy)!important;color:#fff!important;border-radius:999px!important;
  border:0!important;box-shadow:0 14px 30px -18px rgba(3,27,78,.9)!important;
  display:grid!important;place-items:center!important;font-size:1.1rem!important;
  transition:background-color .3s,transform .35s var(--ease)!important;
}
.trx_addons_scroll_to_top:hover{background:var(--aqua-600)!important;transform:translateY(-3px)!important}
.trx_addons_scroll_to_top::before{margin:0!important}

/* мобільна сітка: бенто в одну колонку, довгі назви не вилазять */
@media(max-width:640px){
  .bento{grid-template-columns:1fr}
  .tile--wide,.tile--hero{grid-column:auto;grid-row:auto}
  .tile{min-height:210px}
}
h1,h2,h3,.tile h3,.card h3{overflow-wrap:break-word;hyphens:manual}
.tile p,.card p{overflow-wrap:anywhere}

/* ============================================================
   Поля вводу - глобально (наша форма, Elementor, Jet, WooCommerce)
   ============================================================ */
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],
input[type=search],input[type=password],input[type=date],select,textarea,
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.elementor-field-textual{
  width:100%;font-family:var(--font-text);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid rgba(3,27,78,.22);border-radius:12px;
  padding:.85em 1em;line-height:1.4;
  transition:border-color .25s,box-shadow .25s,background-color .25s;
}
textarea{min-height:150px;resize:vertical}
input::placeholder,textarea::placeholder{color:#8b9199}
input:focus,select:focus,textarea:focus,.elementor-field-textual:focus{
  outline:none;border-color:var(--aqua-600);box-shadow:0 0 0 3px rgba(82,176,205,.18);background:#fff;
}
label{display:block;font-size:var(--fs-small);color:var(--muted);font-weight:500}
input[type=file]{font-size:var(--fs-small);color:var(--muted)}
input[type=file]::file-selector-button{
  font-family:var(--font-display);font-weight:600;font-size:.9rem;color:#fff;background:var(--navy);
  border:0;border-radius:999px;padding:.6em 1.2em;margin-right:.9rem;cursor:pointer;transition:background-color .3s;
}
input[type=file]::file-selector-button:hover{background:var(--aqua-600)}
button,input[type=submit],.elementor-button{font-family:var(--font-display);font-weight:600;cursor:pointer}

/* ============================================================
   Форма відгуку
   ============================================================ */
.reviewform{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,52px)}
.reviewform h2{font-size:clamp(1.5rem,2.4vw,2.2rem)}
.reviewform > p{color:var(--muted);margin-top:.7rem;max-width:52ch}
.reviewform form{margin-top:clamp(20px,2.2vw,34px);display:grid;gap:clamp(14px,1.5vw,20px)}
.reviewform__row{display:grid;gap:clamp(12px,1.3vw,18px)}
@media(min-width:760px){.reviewform__row{grid-template-columns:1.4fr .6fr 1fr}}
.reviewform label{display:grid;gap:.45rem}
.reviewform__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.reviewform__note{margin-top:1rem;padding:.9em 1.1em;border-radius:12px;font-size:var(--fs-small)}
.reviewform__note--ok{background:rgba(82,176,205,.14);color:var(--navy)}
.reviewform__note--err{background:rgba(200,60,60,.1);color:#a02626}
.reviewform button{justify-self:start}

/* ============================================================
   Явні кольори заголовків - щоб сторонній CSS (Elementor kit,
   плагіни) не перефарбовував текст на темних поверхнях
   ============================================================ */
.hero h1,.hero .hero__lead,.hero__scroll{color:#fff}
.hero h1 em{color:var(--aqua)}
.page-hero--media h1,.page-hero--media .page-hero__lead{color:#fff}
.page-hero h1{color:var(--navy)}
.page-hero--media h1{color:#fff}
.metrics h2,.metrics__num,.metrics__label{color:inherit}
.systems h2,.systems .acc__item h3{color:#fff}
.tile h3,.tile p{color:#fff}
.tile--plain h3{color:var(--navy)}
.tile--plain p{color:var(--muted)}
.cta h2,.cta p{color:#fff}
.cta p{color:rgba(255,255,255,.78)}
.site-footer h4,.footer__brand{color:#fff}
.sec-head h2{color:var(--navy)}
.systems .sec-head h2{color:#fff}
.card h3,.card h3 a,.principle h3,.principle h3 a{color:var(--navy)}

/* кнопки Elementor (форма на контактах) - у стилі теми */
.elementor-button,.elementor-button-link,button.elementor-button,
input[type=submit].elementor-button,.elementor-field-type-submit button{
  background:var(--navy)!important;color:#fff!important;border:0!important;border-radius:999px!important;
  padding:1em 1.9em!important;font-family:var(--font-display)!important;font-weight:600!important;
  font-size:1rem!important;line-height:1!important;transition:background-color .3s,transform .35s var(--ease)!important;
}
.elementor-button:hover{background:var(--aqua-600)!important;transform:translateY(-2px)!important}
.elementor-field-label{color:var(--muted)!important;font-size:var(--fs-small)!important;font-weight:500!important}

/* будь-яка кнопка відправки форми (Metform, Jet, WP) - у стилі теми */
form button[type=submit],form input[type=submit],
.metform-btn,.mf-btn,button.wpcf7-submit,input.wpcf7-submit{
  background:var(--navy);color:#fff;border:0;border-radius:999px;
  padding:1em 1.9em;font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1;
  transition:background-color .3s,transform .35s var(--ease);
}
form button[type=submit]:hover,form input[type=submit]:hover,.metform-btn:hover,.mf-btn:hover{
  background:var(--aqua-600);transform:translateY(-2px)
}

/* мета в картці (тривалість, ціна) - темніший відтінок заради контрасту */
.card__meta{color:#1a7186;font-weight:500}

/* посилання всередині старого Elementor-контенту (напр. /navchanna/) - темніший синій
   замість #2f93b5, який на білому давав контраст 3.5 при нормі 4.5 */
.elementor a:not(.elementor-button):not(.btn),
.jet-listing-dynamic-link__link,
.elementor-heading-title a{color:#1a7186}
.elementor a:not(.elementor-button):not(.btn):hover{color:var(--navy)}

/* ============================================================
   Вага заголовків: 700 скрізь. Читабельність білого тексту на знімку
   тримає затемнення підкладки (див. градієнти .hero__media::after,
   .page-hero__media::after, .tile::after), а не тінь під літерами:
   розмита тінь на великому кеглі виглядає дешево.
   ============================================================ */
.hero h1,.page-hero--media h1{font-weight:700}
.tile h3,.acc__item h3{font-weight:700}
.sec-head h2,.cta h2,.manifest p{font-weight:700}
.card h3,.principle h3,.faq__item summary,.fact__val{font-weight:700}
.metrics__num{font-weight:700}

/* ============================================================
   Нахилені заголовки. В Onest немає справжнього курсиву, тому
   робимо власний нахил: керований кут, без синтетичного italic.
   ============================================================ */
.hero h1,
.page-hero h1,
.sec-head h2,
.cta h2{
  transform:skewX(-7deg);
  transform-origin:left bottom;
  padding-right:.14em;      /* компенсуємо зсув правого краю */
}
.hero h1 em{transform:none}  /* акцентне слово нахиляється разом із рядком */

/* картки й дрібні заголовки лишаємо прямими - інакше сторінка "їде" */
.tile h3,.card h3,.principle h3,.acc__item h3,.faq__item summary{transform:none}

@media(max-width:640px){
  .hero h1,.page-hero h1,.sec-head h2,.cta h2{transform:skewX(-6deg)}
}
@media(prefers-reduced-motion:reduce){
  .hero h1,.page-hero h1,.sec-head h2,.cta h2{transform:skewX(-6deg)}
}

/* блок із показниками: власні відступи, щоб не злипався з героєм */
.metrics{padding-block:clamp(10px,1.4vw,22px)}
.metrics__item{padding-block:clamp(30px,3.6vw,56px)}

/* логотип */
.brand img{width:44px;height:44px;object-fit:contain}
.footer__brand img{width:52px;height:52px;object-fit:contain}
@media(max-width:640px){.brand img{width:38px;height:38px}}

/* бургер над героєм - білий (раніше успадковував темний колір тексту) */
.site-header--over .burger{color:#fff}
.site-header.is-solid .burger{color:var(--navy)}

/* нахилені заголовки: компенсуємо оптичний зсув, щоб лівий край
   збігався з абзацом під ним */
.hero h1,.page-hero h1,.sec-head h2,.cta h2{margin-left:-.09em}
@media(max-width:640px){.hero h1,.page-hero h1,.sec-head h2,.cta h2{margin-left:-.07em}}

/* ============================================================
   v2.1 - РИТМ І АДАПТИВ
   ============================================================ */

/* Вертикальний ритм: на телефоні 96px між секціями читалося як «дірка».
   Тримаємо просторо на десктопі, компактніше на малих екранах. */
:root{--section:clamp(68px,9.5vw,176px)}

/* Герой: контент притиснутий до низу, тож велика верхня «подушка» лише
   з’їдала екран. Малі екрани отримують нижчий герой (svh + запас на
   плаваючу панель Safari). */
@media(max-width:900px){
  .hero{min-height:min(100svh,760px)}
  .hero__inner{padding-block:clamp(96px,13vh,150px) clamp(34px,5vh,60px)}
  .hero__scroll{margin-top:clamp(24px,3.4vh,42px)}
}
@media(max-width:640px){
  .hero h1{font-size:clamp(2.5rem,10.4vw,3.4rem);max-width:none}
  .hero__lead{font-size:1.02rem;max-width:34ch}
  .hero__actions{gap:.7rem}
  .hero__actions .btn{width:100%;justify-content:center}
}

/* Довгі українські слова в маніфесті й лідах не повинні вилазити за край */
.manifest p,.hero__lead,.page-hero__lead,.sec-head p,.quote blockquote{overflow-wrap:break-word}
@media(max-width:640px){
  .manifest p{max-width:none;font-size:clamp(1.5rem,6.6vw,2.1rem)}
  .sec-head h2{max-width:none}
}

/* Зони натискання: пункти меню, мовний перемикач і текстові лінки
   на дотику були 18-25px заввишки. */
@media(hover:none){
  .nav__lang a{padding:.55rem .35rem}
  .tile__link,.card .tile__link{padding-block:.55rem;margin-top:-.25rem}
  .footer ul a{display:inline-block;padding-block:.35rem}
  .footer__bottom a{display:inline-block;padding-block:.3rem}
  .quote__nav button{width:56px;height:56px}
}
.nav__lang a{border-radius:8px}

/* Кнопки відправки без type="submit" (JetEngine, старі форми) лишалися
   системними: 23px заввишки й сірі. */
form button:not([type=button]):not([type=reset]):not(.btn):not(.burger),
.jet-form__submit,.jet-form-builder__submit,button.jet-form__submit{
  background:var(--navy);color:#fff;border:0;border-radius:999px;
  padding:1em 1.9em;font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1;
  min-height:52px;transition:background-color .3s,transform .35s var(--ease);
}
form button:not([type=button]):not([type=reset]):not(.btn):not(.burger):hover,
.jet-form__submit:hover,.jet-form-builder__submit:hover{background:var(--aqua-600);transform:translateY(-2px)}

/* ============================================================
   v2.1 - СУМІСНІСТЬ ЗІ СТАРИМ ELEMENTOR-КОНТЕНТОМ
   Сторінки /navchanna/, /contact-us/ та юридичні ще зібрані Elementor'ом.
   Його власні відступи (120px зверху секції + 65px у контейнерах)
   складалися з нашими 96px секції і давали пусті смуги в пів-екрана.
   ============================================================ */
.entry .elementor{max-width:100%}
.entry .elementor > .e-con,
.entry .elementor > .elementor-section{
  padding-top:clamp(0px,5vw,56px)!important;
  padding-bottom:clamp(0px,5vw,56px)!important;
}
.entry .elementor > .e-con:first-child,
.entry .elementor > .elementor-section:first-child{padding-top:0!important}
.entry .elementor > .e-con:last-child,
.entry .elementor > .elementor-section:last-child{padding-bottom:0!important}
.entry .elementor .e-con-inner{padding-top:0!important;padding-bottom:0!important}
/* порожні декоративні контейнери, що лишилися від старого макета */
.entry .elementor .e-con:empty,
.entry .elementor .elementor-widget-container:empty{display:none}
/* картинки старого макета не мають розтягуватися за колонку */
.entry .elementor img{max-width:100%;height:auto}
.entry .elementor .elementor-widget-image img{width:auto;max-width:100%}
/* заголовки старого контенту - у типографіці теми */
.entry .elementor h1,.entry .elementor h2,.entry .elementor h3,
.entry .elementor h4,.entry .elementor h5,.entry .elementor h6{
  font-family:var(--font-display);letter-spacing:-.025em;line-height:1.08;color:var(--navy)
}
.entry .elementor h1{font-size:clamp(1.9rem,3.4vw,3rem)}
.entry .elementor h2{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.entry .elementor h6{letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--aqua-600)}

/* ============================================================
   v2.1 - АНІМАЦІЇ
   Усе під класом .hydro-anim (ставить інлайн-скрипт у <head>) і
   вимикається при prefers-reduced-motion.
   ============================================================ */

/* заголовок героя: слова виїжджають з-під маски */
.hydro-anim .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.hydro-anim .hero h1 .wi{
  display:inline-block;transform:translateY(110%);
  transition:transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 70ms + 120ms);
}
.hydro-anim .hero.is-ready h1 .wi{transform:none}
.hydro-anim .hero .hero__lead,
.hydro-anim .hero .hero__actions,
.hydro-anim .hero .hero__scroll{
  opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.hydro-anim .hero .hero__lead{transition-delay:.42s}
.hydro-anim .hero .hero__actions{transition-delay:.52s}
.hydro-anim .hero .hero__scroll{transition-delay:.62s}
.hydro-anim .hero.is-ready .hero__lead,
.hydro-anim .hero.is-ready .hero__actions,
.hydro-anim .hero.is-ready .hero__scroll{opacity:1;transform:none}

/* повільний наїзд знімка героя + паралакс через --py з JS */
.hero__media img{
  transform:translate3d(0,var(--py,0px),0) scale(var(--pz,1.06));
  transition:none;
}
.hydro-anim .hero__media img{animation:heroZoom 26s var(--ease) forwards}
@keyframes heroZoom{from{--pz:1.06}to{--pz:1.16}}
@property --pz{syntax:'<number>';inherits:false;initial-value:1.06}

/* маніфест: слова «проявляються» по мірі скролу */
.hydro-anim .manifest .word{color:rgba(11,20,32,.18);transition:color .45s var(--ease)}
.hydro-anim .manifest .word.is-on{color:var(--ink)}

/* лічильники показників */
.metrics__num{font-variant-numeric:tabular-nums}

/* лінія під заголовком секції, що «домальовується» */
.sec-head{position:relative}
.sec-head::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(-1 * clamp(16px,2vw,28px));
  height:1px;background:currentColor;opacity:.14;transform:scaleX(0);transform-origin:left;
}
.hydro-anim .sec-head::after{transition:transform 1.1s var(--ease) .15s}
.hydro-anim .sec-head.is-in::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.sec-head::after{transform:scaleX(1)}}

/* магнітні кнопки (тільки миша) */
@media(hover:hover) and (pointer:fine){
  .btn{transition:transform .45s var(--ease),background-color .3s,color .3s,border-color .3s}
  .btn.is-magnetic{transition:transform .2s cubic-bezier(.2,.8,.3,1),background-color .3s,color .3s}
}

/* плитки бенто: легкий підйом і проявлення підпису */
@media(hover:hover) and (pointer:fine){
  .tile{transition:transform .6s var(--ease)}
  .tile:hover{transform:translateY(-4px)}
  .tile__link iconify-icon{transition:transform .45s var(--ease)}
  .tile:hover .tile__link iconify-icon{transform:translateX(5px)}
  .principle{transition:background-color .5s var(--ease),transform .5s var(--ease)}
  .principle:hover{transform:translateY(-2px)}
}

/* світіння в CTA дихає */
.hydro-anim .cta__glow{animation:glowDrift 14s ease-in-out infinite alternate}
@keyframes glowDrift{
  from{transform:translate3d(0,0,0) scale(1);opacity:.85}
  to{transform:translate3d(-6%,-4%,0) scale(1.12);opacity:1}
}

/* хедер ховається при скролі вниз, повертається при скролі вгору */
.site-header{transform:translateY(0);transition:background-color .45s var(--ease),backdrop-filter .45s,box-shadow .45s,transform .5s var(--ease)}
.site-header.is-hidden{transform:translateY(-115%)}

@media(prefers-reduced-motion:reduce){
  .hydro-anim .hero h1 .wi{transform:none;transition:none}
  .hydro-anim .hero .hero__lead,.hydro-anim .hero .hero__actions,.hydro-anim .hero .hero__scroll{opacity:1;transform:none;transition:none}
  .hydro-anim .hero__media img{animation:none}
  .hydro-anim .cta__glow{animation:none}
  .hydro-anim .manifest .word{color:var(--ink)}
  .site-header.is-hidden{transform:none}
}

/* Старий Elementor лишав блоки з .elementor-invisible (нульова прозорість до
   спрацювання його власної анімації). Коли його спостерігач не спрацьовує,
   на сторінці лишається порожня смуга в третину екрана - показуємо примусово. */
.entry .elementor .elementor-invisible{opacity:1!important;visibility:visible!important;animation-name:none!important}

/* заголовок-посилання в картці: на дотику це основна ціль, 25px замало */
@media(hover:none){
  .card h3 a,.principle h3 a{display:inline-block;padding-block:.3rem}
}

/* Шапка на вузьких десктопах: «Відгуки/Кейси» переносився на другий рядок і
   роздував хедер до 63px. Тепер пункти не переносяться, а між 1181-1400px
   меню трохи щільніше - інакше не влазить поруч із мовним перемикачем. */
.nav a{white-space:nowrap}
@media(min-width:1181px) and (max-width:1400px){
  .nav{gap:18px}
  .nav a{font-size:.92rem}
  .nav__lang{gap:.42rem;font-size:.76rem}
  .nav__cta{font-size:.92rem;padding:.95em 1.4em}
}

/* Акордеон систем: розкриття опису було прив’язане до :hover, тож на дотику
   від блоку лишалися самі заголовки поверх картинок. */
@media(max-width:999px),(hover:none){
  .acc__item{min-height:158px;padding:clamp(20px,4.4vw,30px)}
  .acc__item p{opacity:1;transform:none;max-width:44ch}
  .acc__item img{opacity:.4}
}

/* На телефоні великій плитці вистачає чотирьох рядків анонсу */
@media(max-width:640px){
  .tile--hero p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}

/* дрібні цілі: заголовок картки й мовний перемикач в оверлеї меню */
@media(hover:none){
  .card h3 a,.principle h3 a{padding-block:.55rem}
}
@media(max-width:1180px){
  .nav__lang a{padding:.5rem .65rem}
}

/* ============================================================
   Замість тіні під літерами - глибша підкладка під текстом.
   Контраст той самий, але край літер лишається чистим.
   ============================================================ */
.hero__media::after{
  background:
    linear-gradient(180deg,rgba(0,16,47,.58) 0%,rgba(0,16,47,.34) 16%,rgba(0,16,47,.62) 42%,rgba(0,16,47,.80) 70%,rgba(0,16,47,.92) 100%),
    radial-gradient(120% 90% at 8% 92%,rgba(3,27,78,.88) 0%,rgba(3,27,78,0) 66%);
}
.page-hero__media::after{
  background:linear-gradient(180deg,rgba(0,16,47,.74) 0%,rgba(0,16,47,.42) 38%,rgba(0,16,47,.90) 100%);
}
/* м’яке загальне затемнення плитки + власна підкладка рівно під текстовим
   блоком: так знімок лишається світлим угорі, а підпис читається завжди */
.tile::after{
  background:linear-gradient(180deg,rgba(0,16,47,.20) 0%,rgba(0,16,47,.12) 42%,rgba(0,16,47,.58) 100%);
}
.tile__body{
  position:relative;
  background:linear-gradient(180deg,rgba(0,16,47,0) 0%,rgba(0,16,47,.58) 32%,rgba(0,16,47,.88) 100%);
}
.tile--plain .tile__body{background:none}
/* в акордеоні знімок лежить під заголовком без жодного затемнення */
.acc__item::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(0,16,47,.12) 30%,rgba(0,16,47,.82) 100%);
  pointer-events:none;
}
.acc__item h3,.acc__item p{z-index:1}

/* ============================================================
   v2.1 - легасі-віджети Elementor у полі контенту
   ============================================================ */

/* Підкреслення лишаємо тільки прозовим посиланням. Кнопки, заголовки карток
   та іконки-посилання підкреслюватися не мають - виглядає як необроблений HTML. */
.entry a.elementor-button,
.entry .elementor-button,
.entry .elementor-button-link,
.entry h1 a,.entry h2 a,.entry h3 a,.entry h4 a,.entry h5 a,.entry h6 a,
.entry .elementor-icon,
.entry a:has(img),
.entry a:has(svg),
.entry a:has(.elementor-icon){text-decoration:none}

/* Порожні контейнери старого макета (віджети видалили, обгортки лишились) -
   на /navchanna/ вони давали смугу в 190px посеред блоку про курс. */
.entry .elementor .e-con:not(:has(*)){display:none}

/* Elementor Posts (skin cards) - під картки теми */
.entry .elementor .elementor-posts--skin-cards .elementor-post__card{
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.entry .elementor .elementor-posts--skin-cards .elementor-post__card:hover{
  transform:translateY(-3px);box-shadow:0 22px 46px -30px rgba(3,27,78,.45);border-color:rgba(3,27,78,.22);
}
.entry .elementor .elementor-posts--skin-cards .elementor-post__text{
  padding:clamp(18px,2vw,26px);margin:0;
}
.entry .elementor .elementor-post__title{
  margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.24;letter-spacing:-.02em;
}
.entry .elementor .elementor-post__title a{color:var(--navy);text-decoration:none}
.entry .elementor .elementor-post__title a:hover{color:var(--aqua-600)}
.entry .elementor .elementor-posts .elementor-post{margin-bottom:0}

/* /navchanna/: підпис-посилання лежить просто на світлому знімку - бірюзовий
   текст на ньому не читається. Робимо з нього нормальний чип.
   Класи-ідентифікатори Elementor тут свідомі: сторінка легасі й стоїть у DEBT
   на переписування, узагальнити правило нема за чим (background-image
   контейнера з CSS не видно селектором). */
.entry .elementor .elementor-element-53611a6{
  background:rgba(255,255,255,.94);border-radius:999px;
  padding:6px 20px 6px 6px;gap:.5rem;align-self:flex-start;
  width:max-content;max-width:100%;
  box-shadow:0 14px 34px -20px rgba(3,27,78,.9);
}
.entry .elementor .elementor-element-53611a6 .elementor-icon{color:var(--navy);border-color:var(--navy)}
.entry .elementor .elementor-element-53611a6 .elementor-heading-title,
.entry .elementor .elementor-element-53611a6 .elementor-heading-title a{
  color:var(--navy);font-family:var(--font-display);font-weight:600;font-size:.95rem;text-decoration:none;
}

/* Легасі-банер з фоновим знімком. Старий макет клав туди темний текст, і на
   знімку він зникав: у світлих місцях тонув сірий, у темних - бірюзовий.
   Приводимо такі банери до мови самої теми: темна вуаль + білий текст
   (як у власному героєві). Клас вішає app.js - background-image контейнера
   селектором не видно. */
.entry .elementor .e-con.has-bg-media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
}
.entry .elementor .e-con.has-bg-media::before{
  /* opacity:1 обов'язково: Elementor тримає на .e-con::before власну
     прозорість накладки (0.25), інакше вуаль виходить учетверо слабшою */
  content:"";position:absolute;inset:0;z-index:0;opacity:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,16,47,.58) 0%,rgba(0,16,47,.46) 45%,rgba(0,16,47,.72) 100%);
}
.entry .elementor .e-con.has-bg-media > *{position:relative;z-index:1}
.entry .elementor .e-con.has-bg-media,
.entry .elementor .e-con.has-bg-media :is(h1,h2,h3,h4,h5,h6,p,span,li,div,strong,em){color:#fff}
.entry .elementor .e-con.has-bg-media :is(h6,.elementor-heading-title h6){letter-spacing:.14em}
.entry .elementor .e-con.has-bg-media a:not(.elementor-button):not(.elementor-button-link){color:var(--aqua)}
.entry .elementor .e-con.has-bg-media .elementor-button{background:#fff!important;color:var(--navy)!important}
.entry .elementor .e-con.has-bg-media .elementor-button:hover{background:var(--aqua)!important;color:#fff!important}
.entry .elementor .e-con.has-bg-media .elementor-button span{color:inherit}