/* Бренд-палітра (тільки ці 4 кольори + їх відтінки/прозорість) */
:root{ --cream:#fffcd1; --sage:#93a691; --green:#515f45; --yellow:#fefa8f; --radius:18px; }

/* ☀️ РАНКОВА (світла) тема — за замовчуванням */
:root,[data-theme="morning"]{
  --ink:#fffcd1; --ink-2:#eff0c8; --panel:#fdfceb; --panel-2:#fbfae0;
  --line:rgba(81,95,69,.18); --olive:#515f45; --olive-2:#7d8a6a; --olive-deep:#93a691;
  --paper:#414a35; --muted:#6d7a62; --gold:#e7c33a; --yellow:#fefa8f; --pulse:#515f45;
  --on-accent:#fffcd1;       /* текст на зелених кнопках/аватарках */
  --on-yellow:#3a4230;       /* текст на жовтому */
  --nav-bg:rgba(255,252,209,.82); --nav-bg-scrolled:rgba(255,252,209,.95);
  --input-bg:#ffffff; --star:#93a691;
}
/* 🌙 НІЧНА (темна) тема */
[data-theme="night"]{
  --ink:#0b0e12; --ink-2:#0f141a; --panel:#161d25; --panel-2:#1c242e;
  --line:#2a3138; --olive:#6b7753; --olive-2:#93a691; --olive-deep:#515f45;
  --paper:#eef1ea; --muted:#98a08c; --gold:#fefa8f; --yellow:#fefa8f; --pulse:#d0472f;
  --on-accent:#0b0e12; --on-yellow:#0b0e12;
  --nav-bg:rgba(11,14,18,.72); --nav-bg-scrolled:rgba(11,14,18,.92);
  --input-bg:#0b0e12; --star:#fefa8f;
}
:root{
  --font-display:'700-Montserrat-Bold',sans-serif; --font-display-2:'600-Montserrat-Semi-Bold',sans-serif; --font-body:'400-Montserrat-Regular',sans-serif; --font-med:'500-Montserrat-Medium',sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,'JetBrains Mono',monospace;
}
body{background:var(--ink); color:var(--paper); font-family:var(--font-body); -webkit-font-smoothing:antialiased;}
::selection{background:var(--olive); color:var(--on-accent);}
a{color:inherit; text-decoration:none;}
a:hover,a:focus,a:active{text-decoration:none;}


/* ---------- typography ---------- */
.display-1,.display-2,.display-3,.h-disp{font-family:var(--font-display); font-weight:600; line-height:.98; letter-spacing:-.01em; text-transform:uppercase;}
.h-disp{font-size:clamp(2.1rem,5.2vw,4.4rem);}
.eyebrow{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--olive-2);}
.lead-txt{font-size:clamp(1rem,1.4vw,1.18rem); color:var(--muted); line-height:1.65; max-width:60ch;}
.mono{font-family:var(--font-mono);}

/* ---------- layout ---------- */
.sec{padding:clamp(66px,9vw,118px) 0; position:relative;}
.sec-head{max-width:760px; margin-bottom:clamp(34px,5vw,60px);}
.kicker{display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem;}
.kicker::before{content:""; width:26px; height:2px; background:var(--olive-2); display:inline-block;}
.card-soft{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);}

/* ---------- header ---------- */
.nav-wrap{position:sticky; top:0; z-index:1030; background:rgba(11,14,18,.72); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, background .3s;}
.nav-wrap.scrolled{border-bottom-color:var(--line); background:rgba(11,14,18,.92);}
.brand{display:flex; align-items:center; gap:.65rem; font-family:var(--font-display); font-weight:600; letter-spacing:.06em; font-size:1.15rem;}
.brand small{font-family:var(--font-mono); font-weight:400; font-size:.6rem; letter-spacing:.24em; color:var(--muted); text-transform:uppercase; display:block; margin-top:1px;}
.brand-mark{width:38px; height:38px; border-radius:11px; background:var(--olive); display:grid; place-items:center; flex:0 0 auto;}
.navlink{font-size:.92rem; color:var(--muted); font-weight:600; padding:.4rem .1rem; position:relative; transition:color .2s;}
.navlink:hover,.navlink:focus{color:var(--paper);}
.navlink::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--olive-2); transition:width .25s;}
.navlink:hover::after{width:100%;}


/* ---------- hero ---------- */
.hero{position:relative; padding-top:clamp(46px,7vw,86px); padding-bottom:0; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:0; background:
  radial-gradient(70% 55% at 78% 12%, rgba(107,119,83,.20), transparent 60%),
  radial-gradient(60% 50% at 8% 90%, rgba(81,95,69,.16), transparent 55%);
  pointer-events:none;}
.hero-h1{font-size:clamp(2.6rem,7.4vw,6.1rem);}
.type-line{font-family:var(--font-display); font-weight:500; text-transform:uppercase; color:var(--olive-2); font-size:clamp(1.4rem,3.8vw,2.6rem); min-height:1.2em;}
.ti-cursor{color:var(--olive-2);}
.stat-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat{padding:1.1rem 0;}
.stat b{font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,3vw,2.2rem); display:block; line-height:1;}
.stat span{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.ecg{display:block; width:100%; height:70px; margin-top:2.4rem;}
.ecg path{fill:none; stroke:var(--pulse); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 5.5s linear infinite;}
@keyframes draw{to{stroke-dashoffset:-1400;}}

/* ---------- skills ---------- */
.skill{padding:1.7rem 1.5rem; height:100%; transition:transform .22s, border-color .22s, background .22s;}
.skill:hover{transform:translateY(-4px); border-color:var(--olive-deep); background:var(--panel-2);}
.skill-ico{width:52px; height:52px; border-radius:14px; background:rgba(107,119,83,.16); border:1px solid var(--olive-deep); display:grid; place-items:center; color:var(--olive-2); margin-bottom:1.1rem;}
.skill h3{font-family:var(--font-display); font-weight:500; text-transform:uppercase; font-size:1.18rem; letter-spacing:.01em; margin-bottom:.5rem;}
.skill p{color:var(--muted); font-size:.94rem; margin:0; line-height:1.55;}
.skill .num{font-family:var(--font-mono); font-size:.7rem; color:var(--olive-deep); float:right;}

/* ---------- formats ---------- */
.fmt{padding:1.9rem 1.6rem; height:100%; position:relative; overflow:hidden;}
.fmt .tag{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--olive-2);}
.fmt h3{font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:1.7rem; margin:.5rem 0 .7rem;}
.fmt ul{list-style:none; padding:0; margin:1rem 0 0; color:var(--muted); font-size:.94rem;}
.fmt li{padding:.42rem 0 .42rem 1.6rem; position:relative; border-top:1px solid var(--line);}
.fmt li::before{content:""; position:absolute; left:0; top:.95rem; width:8px; height:8px; border-radius:50%; background:var(--olive-2);}
.fmt.hi{background:linear-gradient(180deg,rgba(107,119,83,.14),var(--panel)); border-color:var(--olive-deep);}

/* ---------- testimonials ---------- */
.tsec{background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.rev{padding:2rem 1.9rem; height:100%; display:flex; flex-direction:column;}
.rev p{font-size:1.06rem; line-height:1.6; margin:0 0 1.4rem;}
.rev .who{display:flex; align-items:center; gap:.85rem; margin-top:auto;}
.rev .av{flex:0 0 44px; width:44px; height:44px; border-radius:50%; background:var(--olive); color:var(--on-accent); display:flex; align-items:center; justify-content:center; line-height:1; text-align:center; font-family:var(--font-display); font-weight:600; font-size:.95rem;}
.rev .who>div{display:flex; flex-direction:column; line-height:1.25;}
.rev .who b{font-weight:700; font-size:.95rem;}
.rev .who span{display:block; margin-top:3px; color:var(--muted); font-size:.82rem;}
.stars{color:var(--gold); letter-spacing:.15em; font-size:.85rem; margin-bottom:1rem;}
.swiper{padding-bottom:3.4rem;}
.swiper-pagination-bullet{background:var(--olive-deep) !important; opacity:.5 !important; width:9px; height:9px; border-radius:5px; transition:opacity .2s, width .2s;}
.swiper-pagination-bullet-active{background:var(--olive-2) !important; opacity:1 !important; width:26px !important; border-radius:6px;}

/* ---------- b2b parallax ---------- */
.b2b{position:relative; background-size:cover; background-position:center;}
.b2b{overflow:hidden;}
.b2b .jarallax-img,.b2b>picture{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
.b2b>picture img,.b2b .jarallax-img{width:100%; height:100%; object-fit:cover; display:block;}
.b2b::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(11,14,18,.90) 0%,rgba(11,14,18,.72) 42%,rgba(11,14,18,.40) 100%);}
.b2b .container{position:relative; z-index:2;}
.b2b .b-list{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 1.9rem;}
.chip{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; padding:.42rem .85rem; border:1px solid var(--olive-deep); border-radius:999px; color:var(--olive-2); background:rgba(107,119,83,.08);}

/* ---------- women ---------- */
.women{background:var(--ink-2);}
.wpanel{background:linear-gradient(155deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:26px; padding:clamp(28px,4vw,52px); position:relative; overflow:hidden;}
.wpanel::after{content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(211,169,74,.14),transparent 70%);}
.wfeat{display:flex; gap:.8rem; align-items:flex-start; margin-top:1.2rem;}
.wfeat .ck{flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:rgba(211,169,74,.16); border:1px solid var(--gold); display:grid; place-items:center; color:var(--gold);}
.wfeat p{margin:0; color:var(--muted); font-size:.95rem;} .wfeat b{display:block; color:var(--paper); font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.02em; font-size:1.02rem; margin-bottom:.15rem;}

/* ---------- pricing ---------- */
.price{padding:2rem 1.7rem; height:100%; display:flex; flex-direction:column; transition:transform .22s, border-color .22s;}
.price:hover{transform:translateY(-4px); border-color:var(--olive-deep);}
.price.feat{background:linear-gradient(180deg,rgba(107,119,83,.16),var(--panel)); border-color:var(--olive-2);}
.price .plan{font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:1.35rem;}
.price .amt{font-family:var(--font-display); font-weight:700; font-size:2.8rem; line-height:1; margin:.6rem 0 .2rem;}
.price .amt small{font-family:var(--font-mono); font-size:.8rem; font-weight:400; color:var(--muted); letter-spacing:.04em;}
.price ul{list-style:none; padding:0; margin:1.4rem 0 1.8rem; flex:1;}
.price li{padding:.5rem 0 .5rem 1.7rem; position:relative; color:var(--muted); font-size:.93rem; border-bottom:1px solid var(--line);}
.price li::before{content:"✓"; position:absolute; left:0; color:var(--olive-2); font-weight:700;}
.badge-feat{position:absolute; top:1.2rem; right:1.2rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; background:var(--olive-2); color:var(--on-accent); padding:.25rem .6rem; border-radius:6px;}
.cert{display:flex; gap:1rem; align-items:center; margin-top:2rem; padding:1.3rem 1.5rem; border:1px dashed var(--olive-deep); border-radius:16px; background:rgba(107,119,83,.06);}
.cert .cico{flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:rgba(211,169,74,.14); border:1px solid var(--gold); display:grid; place-items:center; color:var(--gold);}

/* ---------- footer / form ---------- */
.foot{background:var(--ink-2); border-top:1px solid var(--line);}
.form-box{background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:clamp(26px,3.5vw,42px);}
.form-control,.form-select{background:var(--ink); border:1px solid var(--line); color:var(--paper); border-radius:12px; padding:.8rem 1rem;}
.form-control:focus,.form-select:focus{background:var(--ink); color:var(--paper); border-color:var(--olive-2); box-shadow:0 0 0 .2rem rgba(147,164,109,.18);}
.form-control::placeholder{color:#5f6a5a;}
.foot-links a{color:var(--muted); font-size:.92rem; display:block; padding:.28rem 0;} .foot-links a:hover{color:var(--paper);}
.soc{width:40px; height:40px; border-radius:11px; border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:.2s;}
.soc:hover{color:var(--paper); border-color:var(--olive-2);}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.kno-animation{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important;}
  .reveal{opacity:1; transform:none;}
}
/* ---------- FAB (кнопки збоку) ---------- */
.fab-stack{position:fixed; right:18px; bottom:22px; z-index:1045; display:flex; flex-direction:column; gap:.6rem;}
.fab{width:50px; height:50px; border-radius:15px; border:1px solid var(--olive-deep); background:var(--panel); color:var(--olive-2);
  display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 26px -12px rgba(0,0,0,.7); transition:transform .18s, background .2s, color .2s, border-color .2s;}
.fab:hover{transform:translateY(-3px); background:var(--olive); color:var(--on-accent); border-color:var(--olive);}
.fab:focus-visible{outline:2px solid var(--olive-2); outline-offset:2px;}
.fab-top{opacity:0; pointer-events:none; transform:translateY(10px);}
.fab-top.show{opacity:1; pointer-events:auto; transform:none;}
@media (max-width:575.98px){ .fab-stack{right:12px; bottom:14px;} .fab{width:46px; height:46px; border-radius:13px;} }

/* ---------- Модалка ---------- */
.modal-content{background:var(--panel-2); border:1px solid var(--line); border-radius:22px; color:var(--paper);}
.modal-header{border-bottom:1px solid var(--line);}
.modal-backdrop.show{opacity:.7;}
.modal textarea.form-control{resize:vertical;}

/* ---------- Статус форми ---------- */
.form-status{font-weight:600; font-size:.92rem;}
.form-status.is-ok{color:var(--olive-2);}
.form-status.is-err{color:#e0836f;}

/* ---------- Логотип / зображення ---------- */
.brand-logo{height:34px; width:auto; display:block;}
.blk-img{width:100%; height:auto; border-radius:18px; border:1px solid var(--line); display:block;}
.blk-figure{margin:0;}
.gallery-item{overflow:hidden; border-radius:16px; border:1px solid var(--line);}
.gallery-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s;}
.gallery-item:hover img{transform:scale(1.05);}

/* ---------- FAQ акордеон (темна тема) ---------- */
#faq .accordion{--bs-accordion-bg:transparent; --bs-accordion-border-color:var(--line);
  --bs-accordion-btn-color:var(--paper); --bs-accordion-active-color:var(--paper);
  --bs-accordion-color:var(--muted); --bs-accordion-border-radius:16px;}
.faq-item{background:var(--panel); border:1px solid var(--line); border-radius:16px !important; margin-bottom:.8rem; overflow:hidden;}
.faq-item .accordion-button{background:transparent; color:var(--paper); font-family:var(--font-display); font-weight:500;
  text-transform:uppercase; letter-spacing:.01em; font-size:1.05rem; padding:1.15rem 1.4rem; box-shadow:none;}
.faq-item .accordion-button:not(.collapsed){background:rgba(107,119,83,.10); color:var(--paper);}
.faq-item .accordion-button:focus{box-shadow:0 0 0 .18rem rgba(147,164,109,.18);}
.faq-item .accordion-button::after{filter:invert(72%) sepia(12%) saturate(500%) hue-rotate(40deg);}
.faq-item .accordion-body{color:var(--muted); font-size:.97rem; line-height:1.65; padding:.35rem 1.4rem 1.4rem;}
.faq-item .accordion-body p{margin:0 0 .7rem;}
.faq-item .accordion-body p:last-child{margin-bottom:0;}

/* ---------- FAB чат ---------- */
.fab-chat{background:var(--olive); color:var(--on-accent); border-color:var(--olive);}
.fab-chat:hover{background:var(--olive-2); color:var(--on-accent);}
.fab-dot{position:absolute; top:-3px; right:-3px; width:12px; height:12px; border-radius:50%; background:var(--pulse); border:2px solid var(--ink);}

/* ---------- Віджет чату ---------- */
.chat-panel{position:fixed; right:18px; bottom:88px; width:340px; max-width:calc(100vw - 24px); height:460px; max-height:calc(100vh - 120px);
  background:var(--panel-2); border:1px solid var(--line); border-radius:20px; z-index:1046; display:none; flex-direction:column;
  overflow:hidden; box-shadow:0 24px 60px -20px rgba(0,0,0,.75);}
.chat-panel.open{display:flex; animation:chatIn .22s ease;}
@keyframes chatIn{from{opacity:0; transform:translateY(12px);}to{opacity:1; transform:none;}}
.chat-head{display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem; border-bottom:1px solid var(--line); background:var(--panel);}
.chat-head .dot{width:9px; height:9px; border-radius:50%; background:var(--olive-2); box-shadow:0 0 0 3px rgba(147,164,109,.2);}
.chat-head b{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size:1rem;}
.chat-head span{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; color:var(--muted); text-transform:uppercase;}
.chat-close{margin-left:auto; background:transparent; border:0; color:var(--muted); cursor:pointer; padding:4px; line-height:0;}
.chat-close:hover{color:var(--paper);}
.chat-log{flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem;}
.chat-msg{max-width:82%; padding:.6rem .85rem; border-radius:14px; font-size:.92rem; line-height:1.4; word-wrap:break-word;}
.chat-msg.me{align-self:flex-end; background:var(--olive); color:var(--on-accent); border-bottom-right-radius:4px;}
.chat-msg.op{align-self:flex-start; background:var(--panel); border:1px solid var(--line); color:var(--paper); border-bottom-left-radius:4px;}
.chat-msg.sys{align-self:center; background:transparent; color:var(--muted); font-family:var(--font-mono); font-size:.72rem; text-align:center;}
.chat-form{display:flex; gap:.5rem; padding:.8rem; border-top:1px solid var(--line); background:var(--panel);}
.chat-form input{flex:1; background:var(--ink); border:1px solid var(--line); color:var(--paper); border-radius:12px; padding:.6rem .8rem; font-size:.92rem;}
.chat-form input:focus{outline:none; border-color:var(--olive-2);}
.chat-form button{flex:0 0 auto; width:42px; border:0; border-radius:12px; background:var(--olive); color:var(--on-accent); cursor:pointer; display:grid; place-items:center;}
.chat-form button:hover{background:var(--olive-2);}
.chat-gate{padding:1.1rem; display:flex; flex-direction:column; gap:.6rem;}
.chat-gate input{background:var(--ink); border:1px solid var(--line); color:var(--paper); border-radius:12px; padding:.7rem .9rem; font-size:.92rem;}
.chat-gate input:focus{outline:none; border-color:var(--olive-2);}
@media (max-width:575.98px){ .chat-panel{right:12px; bottom:78px;} }

/* ---------- Правки заголовків/жіночого блоку ---------- */
.wfeat-txt h3{margin:0 0 .15rem; font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.02em; font-size:1.02rem; color:var(--paper);}
.wfeat-txt p{margin:0; color:var(--muted); font-size:.95rem;}
.price .plan{margin:0;}

/* ---------- Глобальні змінні перекриття (Swiper / Bootstrap) ---------- */
:root{
  --bs-link-decoration:none;
  --swiper-theme-color:var(--olive-2);
  --swiper-pagination-color:var(--olive-2);
  --swiper-pagination-bullet-inactive-color:var(--olive-deep);
  --swiper-pagination-bullet-inactive-opacity:.5;
  --swiper-pagination-bullet-size:9px;
}
a{text-decoration:none;}
a:hover,a:focus,a:active{text-decoration:none;}

/* Немає стрибка при відкритті модалки (кнопки збоку не зʼїжджають) */
html{scrollbar-gutter:stable;}

/* Карточки відгуків — однакова висота */
#reviews .swiper-wrapper{align-items:stretch;}
#reviews .swiper-slide{height:auto; display:flex;}
#reviews .rev{width:100%;}

/* ============ ПРАВКИ (v3) ============ */
/* Слайдер відгуків: відступ під пагінацію, щоб кнопки не залазили */
#reviews .swiper-wrapper{margin-bottom:50px;}
#reviews .swiper-pagination{bottom:0;}
/* Акуратні кулі пагінації (без «кривизни») */
.swiper-pagination-bullet{width:9px !important; height:9px !important; background:var(--olive-deep) !important; opacity:.5 !important; border-radius:50% !important; margin:0 5px !important; vertical-align:middle;}
.swiper-pagination-bullet-active{width:24px !important; height:9px !important; background:var(--olive-2) !important; opacity:1 !important; border-radius:999px !important;}

/* Аватар-ініціали — рівно по центру */
.rev .av{align-self:flex-start;}
.rev .av,.rev .av *{line-height:1 !important;}

/* Акордеон: рівний внутрішній відступ, не притиснутий до шапки */
.faq-item .accordion-body{padding:1.2rem 1.4rem 1.3rem !important;}
.faq-item .accordion-body p:first-child{margin-top:0;}

/* Модалка: сайт не сдвигается (скролбар зарезервований) */

body.modal-open{padding-right:0 !important;}

/* Кнопка на всю ширину в картці «Для команд» */
.fmt .btn-ghost.w-100{width:100%;}

/* Медіа-заглушки (фото/відео) */
.media{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--panel); display:block;}
.media img{width:100%; height:auto; display:block;}
.media.ratio-wide{aspect-ratio:25/12;}
.media-play{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;}
.media-play span{width:66px; height:66px; border-radius:50%; background:rgba(254,250,143,.92); display:grid; place-items:center; box-shadow:0 10px 30px -8px rgba(0,0,0,.6);}
.media-play span::before{content:""; border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent var(--on-yellow); margin-left:5px;}
.media-cap{position:absolute; left:14px; bottom:14px; z-index:2; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; background:rgba(11,14,18,.72); color:var(--cream); padding:.4rem .7rem; border-radius:8px; border:1px solid var(--olive-deep);}

/* Жовтий акцент бренду точково */
.accent-y{color:var(--yellow);}
.badge-feat{background:var(--yellow) !important; color:var(--on-yellow) !important;}

/* ============ Життєдія B2B — нові блоки ============ */
/* довгі заголовки не капсом (Exo 2, читабельніше) */
.h-disp{text-transform:none; letter-spacing:-.015em;}
.hero-h1{font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.04;}
.type-line{text-transform:none;}

.sec-tight{padding:clamp(30px,4vw,46px) 0;}
.mini{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem; height:100%;}
.mini b{display:block; font-family:var(--font-display); font-size:1rem; line-height:1;}
.mini span{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}

.stat2 b{display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1; color:var(--paper);}
.stat2 span{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}

.step{display:flex; gap:1rem; align-items:flex-start; padding:1rem 0; border-top:1px solid var(--line);}
.step:first-child{border-top:0;}
.step-n{flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:rgba(107,119,83,.16); border:1px solid var(--olive-deep); color:var(--olive-2); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.1rem;}
.step h3{font-family:var(--font-display); font-weight:600; font-size:1.12rem; margin:.15rem 0 .3rem;}
.step p{color:var(--muted); font-size:.95rem; margin:0;}

.prog-item{display:flex; align-items:center; gap:.8rem; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem; height:100%; font-size:.96rem;}
.prog-n{flex:0 0 auto; font-family:var(--font-mono); font-size:.8rem; color:var(--olive-2); border:1px solid var(--olive-deep); border-radius:7px; padding:.15rem .45rem;}

.chk{display:flex; align-items:flex-start; gap:.55rem; color:var(--muted); font-size:.94rem; padding:.35rem 0;}
.chk svg{flex:0 0 auto; margin-top:3px;}

.media-cap{max-width:calc(100% - 28px);}

/* ============ ТЕМИ + ПРАВКИ (v4) ============ */
/* Навбар — колір фону з теми */
.nav-wrap{background:var(--nav-bg) !important;}
.nav-wrap.scrolled{background:var(--nav-bg-scrolled) !important;}
.navbar-toggler{color:var(--paper) !important;}

/* Логотип: показуємо потрібний під тему */
.logo-night{display:none;}
[data-theme="night"] .logo-morning{display:none;}
[data-theme="night"] .logo-night{display:block;}

/* Перемикач теми */
.theme-toggle{width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--paper); display:grid; place-items:center; cursor:pointer; transition:.2s;}
.theme-toggle:hover{border-color:var(--olive-2); color:var(--olive);}
.theme-toggle .ic-sun{display:none;} .theme-toggle .ic-moon{display:inline-block;}
[data-theme="night"] .theme-toggle .ic-sun{display:inline-block;} [data-theme="night"] .theme-toggle .ic-moon{display:none;}

/* card-soft — курсор та ховер */
.card-soft{cursor:pointer; transition:border-color .2s, transform .2s, box-shadow .2s;}
.card-soft:hover{border-color:var(--olive-deep);}

/* prog-item — однакова висота */
#program [class*="col-"]{display:flex;}
.prog-item{width:100%; height:auto;}

/* badge-feat не налазить на назву */
.price.feat{padding-top:2.9rem;}
.badge-feat{top:1rem; right:auto; left:1.7rem;}

/* Аватар-ініціали — рівно по центру кола */
.rev .av{align-self:center; display:flex; align-items:center; justify-content:center; line-height:1; padding:0;}

/* HERO не притискається до наступного блоку */
.hero{padding-bottom:clamp(48px,7vw,90px) !important;}

/* Зірки та інпути — з теми */
.stars{color:var(--star) !important;}
.form-control,.form-select{background:var(--input-bg) !important; color:var(--paper) !important;}
.form-control::placeholder{color:var(--muted) !important; opacity:.8;}

/* Акордеон: інверсія шеврона лише в нічній темі */
.faq-item .accordion-button::after{filter:none;}
[data-theme="night"] .faq-item .accordion-button::after{filter:invert(72%) sepia(12%) saturate(500%) hue-rotate(40deg);}

/* HERO-градієнт під ранкову тему (мʼякий, без темних плям) */
[data-theme="morning"] .hero::before{background:
  radial-gradient(70% 55% at 82% 10%, rgba(254,250,143,.45), transparent 60%),
  radial-gradient(60% 50% at 6% 92%, rgba(147,166,145,.30), transparent 55%);}

/* Легка тінь карток у світлій темі для глибини */
[data-theme="morning"] .card-soft,[data-theme="morning"] .form-box,[data-theme="morning"] .modal-content,[data-theme="morning"] .chat-panel{box-shadow:0 8px 26px -18px rgba(81,95,69,.5);}

/* Перемикач мови */
.lang-switch{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.lang-item{padding:.34rem .6rem; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.05em; color:var(--muted); line-height:1;}
.lang-item + .lang-item{border-left:1px solid var(--line);}
.lang-item:hover{color:var(--paper); background:rgba(147,166,145,.14);}
.lang-item.active{background:var(--olive); color:var(--on-accent);}

/* Підпис у відгуку — центрування (за вимогою) */
.rev .who span{display:flex; justify-content:center;}

/* Іконка «дякуємо» у модалці */
.thanks-ico{width:64px; height:64px; border-radius:50%; margin:0 auto 1rem; background:var(--olive); color:var(--on-accent); display:grid; place-items:center; font-size:2rem; font-weight:700;}

/* ============ v5: навігація/мова/скрол ============ */
/* Якір з урахуванням липкої шапки (запас, плагін теж дає offset) */
:where(section,[id]){scroll-margin-top:84px;}

/* Випадаючий список мов (десктоп) */
.lang-dd{position:relative; display:none;}
.lang-dd-btn{display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--paper); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; cursor:pointer;}
.lang-dd-btn:hover{border-color:var(--olive-2);}
.lang-dd-btn svg{transition:transform .2s;}
.lang-dd.open .lang-dd-btn svg{transform:rotate(180deg);}
.lang-dd-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:170px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.35rem; box-shadow:0 16px 40px -18px rgba(0,0,0,.5); opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s; z-index:1050;}
.lang-dd.open .lang-dd-menu{opacity:1; visibility:visible; transform:none;}
.lang-dd-menu a{display:block; padding:.55rem .7rem; border-radius:8px; color:var(--paper); font-size:.92rem;}
.lang-dd-menu a:hover{background:rgba(147,166,145,.14);}
.lang-dd-menu a.active{background:var(--olive); color:var(--on-accent);}

/* На широких екранах — dropdown замість 3 кнопок */
@media (min-width:1400px){
  .lang-switch{display:none;}
  .lang-dd{display:inline-block;}
}

/* Мобільна розкладка дій у меню */
@media (max-width:1399.98px){
  .nav-actions{width:100%;}
  .nav-actions .btn-olive{flex:1 1 auto; justify-content:center;}
}
@media (max-width:575.98px){
  .lang-switch{width:100%;}
  .lang-item{flex:1 1 33.33%; text-align:center;}
  .nav-actions .btn-olive{width:100%; flex:1 1 100%; order:3;}
  .theme-toggle{order:2;}
}

/* ============ v6 ============ */
/* Однакова висота контролів у шапці (мова = кнопка = тема) */
.nav-actions{align-items:center;}
.nav-actions .lang-switch{height:44px;}
.nav-actions .lang-item{display:flex; align-items:center; justify-content:center;}
.nav-actions .lang-dd-btn{height:44px;}
.nav-actions .btn-olive{min-height:44px;}
.nav-actions .theme-toggle{height:44px; width:44px;}

/* Тема-перемикач у топ-барі (мобілка/планшет), зліва від бургера */
.top-actions{display:flex; align-items:center; gap:.5rem;}
.nav-actions .theme-toggle{display:grid;}
@media (min-width:1400px){ .top-actions .theme-toggle{display:none;} }
@media (max-width:1399.98px){ .nav-actions .theme-toggle{display:none;} }

/* Активний пункт меню (scrollspy) */
.navlink.active{color:var(--paper);}
.navlink.active::after{width:100%;}

/* HERO: кнопки на всю ширину в мобілці */
@media (max-width:575.98px){
  .hero-cta{flex-direction:column;}
  .hero-cta > .btn-olive,.hero-cta > .btn-ghost{width:100%;}
}

/* Callback offcanvas (нижній) */
#callbackOc{--bs-offcanvas-height:auto; background:var(--panel); border-top:1px solid var(--olive-deep); color:var(--paper);}
#callbackOc .oc-inner{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; padding:1.1rem 0;}
#callbackOc .oc-text{flex:1 1 260px;}
#callbackOc .oc-text b{font-family:var(--font-display); font-size:1.15rem; display:flex; align-items:center; gap:.5rem;}
#callbackOc .oc-text span{color:var(--muted); font-size:.9rem;}
#callbackOc form{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;}
#callbackOc .form-control{flex:1 1 100%; width:100%; min-width:0;}
#callbackOc .btn-olive{white-space:nowrap; flex:1 1 100%; width:100%;}
@media (max-width:575.98px){
  #callbackOc form{width:100%;} #callbackOc .form-control,#callbackOc .btn-olive{width:100%; min-width:0;}
}

/* Лічильник слів у чаті */
.chat-count{font-family:var(--font-mono); font-size:.66rem; color:var(--muted); padding:0 .8rem .4rem; text-align:right;}
.chat-count.over{color:#d0472f;}

/* Callback offcanvas: хрестик у правому верхньому куті */
.oc-close{position:absolute; top:10px; right:14px; z-index:5; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--paper); display:grid; place-items:center; cursor:pointer;}
.oc-close:hover{border-color:var(--olive-2); color:var(--olive);}
#callbackOc .oc-inner{padding-right:52px;}
@media (max-width:575.98px){ #callbackOc .oc-inner{padding-right:44px;} }

/* ============ v7 ============ */
/* Offcanvas вище бічних кнопок */
.fab-stack{z-index:1040;}
#callbackOc{z-index:1090;}

/* Меню мов — ширина по вмісту (короткі коди) */
.lang-dd-menu{min-width:auto;}
.lang-dd.open .lang-dd-menu{min-width:auto;}
.lang-dd-menu a{text-align:center;}

/* Акуратний блок першого підключення чату */
.chat-setup{padding:1.1rem 1.15rem; text-align:center;}
.chat-setup p{margin:0 0 .8rem;}
.chat-setup .btn-olive{width:100%;}
.chat-setup-status{padding:.5rem .7rem; border:1px solid var(--line); border-radius:10px; background:var(--panel-2);}

/* ============ v8: анти-overflow від анімацій ============ */
/* Трансформації kno (fade-left/right) не мають створювати горизонтальний скрол/відступ */
@media (max-width:575.98px){ :root{--kno-distance:38px;} }

/* ============ v9: коректний анти-overflow (без скрол-контейнера на body) ============ */
main{overflow-x:clip;}                      /* обрізає горизонтальний виліт анімацій, не ламаючи IO/фікс-елементи */
body.modal-open{padding-right:0 !important;} /* + scrollbar-gutter:stable => модалка не зсуває контент/іконки */

/* ============ v10: мобільна анімація без горизонтального overflow ============ */
/* На вузьких екранах напрямні анімації (fade-left/right/angle) стають вертикальними:
   елемент не виїжджає за правий край -> немає горизонтального скролу, іконки по центру,
   свайпер не конфліктує з прокруткою, а IntersectionObserver бачить елемент і анімація працює. */
@media (max-width:767.98px){
  [kno-position]{ transform: translate3d(0, var(--kno-distance,32px), 0) !important; }
  [kno-position].kno-animation{ transform: none !important; }
}
/* SVG у кнопках-іконках — гарантований центр */

/* ============ v11: зовнішні SVG-іконки (mask, колір з currentColor -> теми ок) ============ */
.ic-img{display:block; width:20px; height:20px; object-fit:contain;}
.theme-toggle .ic-img{width:20px; height:20px;}
.fab .ic-img{width:35px !important; height:35px !important;}
.chat-close .ic-img{width:18px; height:18px;}
.chat-form button .ic-img{width:18px; height:18px;}
.soc .ic-img{width:18px; height:18px;}
.oc-close .ic-img{width:20px; height:20px;}
.contacts-list .ic-img{width:16px; height:16px; flex:none;}
/* Іконка теми: у нічній темі робимо світлою (SVG базово темний) */
[data-theme="night"] .theme-toggle .ic-img{filter:brightness(0) invert(1);}

/* Контакти: довгий email не ламає верстку */
.contacts-list a{max-width:100%; overflow-wrap:anywhere; word-break:break-word;}

/* Захист від горизонтального overflow (root-scroller clip не ламає IntersectionObserver) */
html{overflow-x:clip;}

/* ============ утиліти замість inline-стилів ============ */
.u-hide{display:none;}
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; opacity:0;}
.o-70{opacity:.7;}
.mw-46{max-width:46ch;} .mw-52{max-width:52ch;}
.fz-72{font-size:.72rem;} .fz-74{font-size:.74rem;} .fz-78{font-size:.78rem;}
.fz-86{font-size:.86rem;} .fz-90{font-size:.9rem;} .fz-92{font-size:.92rem;}
.fz-95{font-size:.95rem;} .fz-96{font-size:.96rem;} .fz-150{font-size:1.5rem;}
.fz-hero-sub{font-size:clamp(1.3rem,2.4vw,1.8rem);}
.disp-upper{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em;}
.band{background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.form-status[data-status]{display:none;}