/* ============================================================
   Дихання і медитація — тільки перший екран і плаваюче меню.
   Тіло сторінки живе на assets/css/style.css, тут його не чіпаємо.
   ============================================================ */

:root{
  --bh-cream:#F6F4EE;
  --bh-glass:rgba(246,244,238,.12);
  --bh-line:rgba(246,244,238,.2);
  --bh-pad:clamp(20px,4vw,52px);
  --bh-ease:cubic-bezier(.22,.61,.36,1);
}

html{scroll-padding-top:96px}

/* ================= ПЕРШИЙ ЕКРАН ================= */
.bhero{position:relative;height:100svh;min-height:640px;max-height:1020px;
  overflow:hidden;background:#12130F;
  font-family:"Inter Tight","Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,sans-serif}
.bhero__bg{position:absolute;inset:0;z-index:0}
.bhero__bg img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 34%}
.bhero__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to bottom, rgba(18,17,12,.5) 0%, rgba(18,17,12,.14) 12%, rgba(18,17,12,0) 26%),
  linear-gradient(to top,    rgba(14,14,10,.94) 0%, rgba(14,14,10,.82) 18%, rgba(14,14,10,.58) 34%, rgba(14,14,10,.22) 52%, rgba(14,14,10,0) 70%)}

/* табличка на гілці гойдається під вітром; вісь ставить скрипт у сторінці */
.sway{will-change:transform;transform-origin:24% 6%;
  animation:sway 13s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sway{
  0%   {transform:rotate(-.5deg)}
  14%  {transform:rotate(1.05deg)}
  29%  {transform:rotate(-.85deg)}
  43%  {transform:rotate(1.75deg)}
  58%  {transform:rotate(-.35deg)}
  71%  {transform:rotate(.8deg)}
  86%  {transform:rotate(-.95deg)}
  100% {transform:rotate(-.5deg)}
}
@media (prefers-reduced-motion:reduce){ .sway{animation:none} }

.bhero__ui{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  align-items:center;color:var(--bh-cream);
  padding:clamp(18px,2.2vw,30px) var(--bh-pad) clamp(22px,2.8vw,40px)}

.bhero .mid{margin-top:auto;display:flex;flex-direction:column;align-items:center;
  text-align:center;width:100%;max-width:1100px}
.bhero h1{margin:0;font-size:clamp(36px,6vw,96px);line-height:.96;letter-spacing:-.012em;
  font-weight:600;color:var(--bh-cream);text-shadow:0 14px 80px rgba(10,10,7,.6)}
.bhero .claim{margin:clamp(16px,1.8vw,26px) 0 0;font-size:clamp(17px,1.7vw,23px);line-height:1.3;
  letter-spacing:-.024em;font-weight:500;color:rgba(246,244,238,.88);max-width:34ch;
  text-wrap:balance;text-shadow:0 8px 40px rgba(10,10,7,.5)}

.bhero .gets{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
  margin:clamp(24px,2.8vw,38px) 0 0;padding:0;list-style:none}
.bhero .gets li{font-size:13.5px;font-weight:500;letter-spacing:-.01em;padding:9px 17px;
  border-radius:999px;border:1px solid var(--bh-line);background:var(--bh-glass);
  color:rgba(246,244,238,.92);white-space:nowrap;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .25s var(--bh-ease)}
.bhero .gets li:hover{background:rgba(246,244,238,.2)}

.bhero .act{display:flex;justify-content:center;gap:clamp(14px,1.8vw,22px);flex-wrap:wrap;
  margin-top:clamp(24px,2.8vw,36px)}
.bhero .hbtn{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.015em;text-decoration:none;
  background:var(--bh-cream);color:#16160F;
  transition:transform .3s var(--bh-ease),background .3s var(--bh-ease)}
.bhero .hbtn:hover{background:#fff;transform:translateY(-2px)}
.bhero .hbtn i{font-style:normal;font-size:13px;opacity:.5}

.bhero .base{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(26px,3.4vw,48px)}
.bhero .mini{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:rgba(246,244,238,.6);white-space:nowrap}
.bhero .down{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;flex:none;
  border:1px solid var(--bh-line);background:var(--bh-glass);color:var(--bh-cream);
  font-size:14px;text-decoration:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .3s var(--bh-ease)}
.bhero .down:hover{background:rgba(246,244,238,.2)}

/* табличку на кадрі зрізає у портреті — тоді вмикаємо напис */
.bhero__eyebrow{display:none;margin:0 0 clamp(14px,2vw,20px);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;color:rgba(246,244,238,.82);
  text-shadow:0 4px 24px rgba(10,10,7,.8)}

/* ================= ПЛАВАЮЧЕ МЕНЮ ================= */
.pnav{position:fixed;top:clamp(14px,2vw,26px);left:50%;transform:translateX(-50%);
  z-index:60;display:flex;align-items:center;gap:8px;color:var(--bh-cream);
  font-family:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  transition:color .35s var(--bh-ease)}
.pnav a{text-decoration:none}
.pnav__mark{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;flex:none;
  background:var(--bh-glass);border:1px solid var(--bh-line);color:currentColor;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .3s var(--bh-ease),border-color .3s var(--bh-ease)}
.pnav__mark svg{width:22px;height:22px;display:block}
.pnav__mark:hover{background:rgba(246,244,238,.24)}
.pnav__items{position:relative;display:flex;align-items:center;gap:clamp(2px,.7vw,10px);
  border-radius:999px;padding:6px clamp(6px,.8vw,12px);
  background:var(--bh-glass);border:1px solid var(--bh-line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .3s var(--bh-ease),border-color .3s var(--bh-ease)}
.pnav__items a{position:relative;z-index:1;font-size:14.5px;font-weight:500;letter-spacing:-.012em;
  color:currentColor;opacity:.82;padding:10px 15px;border-radius:999px;white-space:nowrap;
  transition:opacity .25s var(--bh-ease)}
.pnav__items a:hover,.pnav__items a.is-active{opacity:1}
.pnav__pill{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:999px;
  background:rgba(246,244,238,.2);opacity:0;pointer-events:none;
  transition:transform .42s cubic-bezier(.32,1.4,.5,1),width .42s cubic-bezier(.32,1.4,.5,1),
             opacity .3s var(--bh-ease),background .35s var(--bh-ease)}
.pnav.has-pill .pnav__pill{opacity:1}

/* над світлим тілом сторінки меню темніє */
.pnav.is-solid{color:#15150F}
.pnav.is-solid .pnav__mark{background:rgba(21,21,15,.07);border-color:rgba(21,21,15,.1)}
.pnav.is-solid .pnav__mark:hover{background:rgba(21,21,15,.12)}
.pnav.is-solid .pnav__items{background:rgba(250,249,245,.82);border-color:rgba(21,21,15,.12)}
.pnav.is-solid .pnav__pill{background:rgba(21,21,15,.08)}

/* ================= АДАПТИВ ================= */
@media (max-width:1180px){ .pnav__items a{font-size:13.5px;padding:9px 12px} }
@media (max-width:900px){
  .pnav__items{display:none}
  .pnav{left:auto;right:var(--bh-pad);transform:none}
  .bhero__eyebrow{display:block}
  .bhero__bg img{object-position:52% 28%}
}
@media (max-width:620px){
  .bhero{min-height:620px}
  .bhero h1{font-size:clamp(34px,11vw,52px)}
  .bhero .act{flex-direction:column;width:100%}
  .bhero .hbtn{width:100%;justify-content:center}
  .bhero .base{flex-direction:column-reverse;align-items:center;gap:14px}
  .bhero .mini{white-space:normal;text-align:center}
  .bhero__bg::after{background:
    linear-gradient(to bottom, rgba(18,17,12,.5) 0%, rgba(18,17,12,0) 24%),
    linear-gradient(to top, rgba(14,14,10,.94) 0%, rgba(14,14,10,.76) 28%, rgba(14,14,10,.3) 52%, rgba(14,14,10,0) 70%)}
}