/* 2025-10-12: cleanup + modal styles + mobile tweaks */
/* ========== EcoTeploDim — WOW v2 ========== */
:root{
  --green:#2E7D32;         /* brand primary */
  --green-500:#24A148;     /* accent lighter */
  --teal:#29B6F6;          /* secondary */
  --yellow:#FFD600;        /* highlight */
  --bg:#ffffff;
  --text:#0f1114;
  --muted:#6b717a;
  --line:#e7ecef;
  --radius:18px;
  --r-lg:22px;
  --shadow-soft:0 10px 24px rgba(0,0,0,.10);
  --shadow:0 18px 48px rgba(0,0,0,.18);
  --topbar-h:64px;         /* added: for sticky header offset */
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.55; overflow-x:hidden
}

section{padding:80px 0; position:relative}
section.alt{background:linear-gradient(180deg,#fbfefd 0%, #f3faf6 100%)}
.kicker{display:inline-block; font-weight:800; color:var(--green-500); font-size:12px; letter-spacing:.12em; text-transform:uppercase}

/* ===== Topbar & Nav ===== */
.topbar{
  position:sticky; top:0; z-index:10000;                  /* was 70 */
  backdrop-filter:saturate(160%) blur(10px);
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  border-bottom:1px solid rgba(0,0,0,.06)
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 0}
.nav{display:flex; gap:14px; align-items:center}
.nav a{color:var(--text); text-decoration:none; font-weight:700; padding:8px 10px; border-radius:10px}
.nav a:hover{background:#f1f5f9}
.topbar__phone{color:var(--green-500); font-weight:800; text-decoration:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800; border-radius:14px; padding:12px 18px; text-decoration:none; user-select:none; transition:transform .08s ease, box-shadow .2s ease}
.btn--primary{background:linear-gradient(135deg,var(--green),#43A047); color:#fff; box-shadow:0 12px 26px rgba(46,125,50,.35)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{border:2px solid var(--green); color:var(--green); background:#fff}
.btn--ghost:hover{background:var(--green); color:#fff}

/* ===== Hero with video ===== */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:calc(100svh - var(--topbar-h));              /* was 84vh */
  display:flex; align-items:center
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;       /* was -1 */
  background:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%,
                          rgba(255,255,255,.6) 48%,
                          rgba(255,255,255,.3) 100%),
    radial-gradient(1000px 420px at 85% 15%, rgba(46,125,50,.18), transparent 60%)
}
/* ensure hero content stays above the overlay/video */
.hero > *{ position:relative; z-index:2; }

.hero__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center}
.hero h1{font:800 clamp(32px,5vw,64px)/1.05 Manrope,Inter,sans-serif; margin:8px 0 12px; letter-spacing:-.015em}
.hero p{font-size:clamp(16px,2.2vw,18px); color:var(--muted); margin:0 0 18px; max-width:62ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}

/* guarantee pills */
.pills{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.pill{padding:10px 14px; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft); font-weight:800}

/* media box (video embed or showcase) */
.media-box{border-radius:22px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft); min-height:300px}

/* ===== Counters ===== */
.counters__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.counter{border:1px solid var(--line); background:linear-gradient(180deg,#f6faf7,#eef4f1); border-radius:16px; padding:16px; text-align:center; box-shadow:var(--shadow-soft)}
.counter .num{font:800 clamp(22px,3.4vw,36px); color:var(--green)}
.counter .txt{opacity:.85}

/* ===== Cards / advantages ===== */
.adv-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.adv{position:relative; padding:18px; border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft); transition:transform .18s ease, box-shadow .2s}
.adv:hover{transform:translateY(-3px); box-shadow:0 18px 36px rgba(0,0,0,.12)}
.adv h3{margin:6px 0 6px; font-size:18px}
.adv p{margin:0; color:var(--muted)}
.adv::after{content:""; position:absolute; right:12px; top:12px; width:58px; height:58px; opacity:.15; background:radial-gradient(circle at 30% 30%, var(--green) 0 35%, transparent 36%), conic-gradient(from .2turn, var(--teal), transparent 65%); border-radius:12px; filter:blur(1px)}

/* ===== Services (cartoon images) ===== */
.services .service{display:flex; gap:18px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:var(--shadow-soft); transition:transform .18s ease, box-shadow .2s}
.services .service:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.12)}
.services img{width:96px; height:96px; flex:0 0 96px; object-fit:contain; border-radius:14px}
.services h4{margin:0 0 6px; font-size:18px}
.services p{margin:0; color:var(--muted)}

/* ===== Works gallery ===== */
.works{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.works figure{margin:0; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-soft); background:#f4f6f8}
.works img{display:block; width:100%; height:180px; object-fit:cover}

/* ===== Calculator ===== */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.card{background:#fff; border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:var(--shadow-soft)}
.field{display:grid; gap:6px; margin-bottom:12px}
.field label{font-weight:800}
input,select,textarea{padding:12px; border-radius:12px; border:1px solid var(--line); font:inherit; background:#fff}
.calc__result{position:relative; overflow:hidden; background:linear-gradient(180deg,#f6faf7,#eef4f1)}
.price{font-size:36px; font-weight:800; color:var(--green)}

/* ===== Reviews ===== */
.reviews{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.review{background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow-soft); position:relative}
.review strong{display:block; margin-bottom:6px}
.review .ava{width:34px; height:34px; border-radius:50%; display:inline-grid; place-items:center; font-weight:800; margin-right:8px; background:var(--teal); color:#fff}

/* ===== Steps timeline ===== */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step}
.step{position:relative; padding:18px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft)}
.step::before{counter-increment:step; content:counter(step); position:absolute; top:-12px; left:-12px; width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,var(--green),#43A047); color:#fff; display:grid; place-items:center; font-weight:800}
.step::after{content:""; position:absolute; right:-10px; top:calc(50% - 6px); width:20px; height:12px; background: radial-gradient(circle at 0 50%, var(--teal) 0 40%, transparent 41%) left, radial-gradient(circle at 100% 50%, var(--teal) 0 40%, transparent 41%) right; background-size:50% 100%; background-repeat:no-repeat; opacity:.4}
.steps > .step:last-child::after{display:none}

/* ===== FAQ ===== */
.faq{display:grid; gap:12px; max-width:880px}
.faq details{border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:#fff; box-shadow:var(--shadow-soft); transition:background .2s ease, border-color .2s}
.faq summary{cursor:pointer; font-weight:800; list-style:none; position:relative; padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"▸"; position:absolute; right:4px; top:0; transform:rotate(0deg); transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(90deg)}
.faq details[open]{background:linear-gradient(180deg,#f6faf7,#eef4f1); border-color:#e6eeea}

/* ===== Contact ===== */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.map-placeholder{aspect-ratio:16/9; background:#e8ecef; border-radius:12px; display:grid; place-items:center; color:#6b717a}

/* ===== Floating chat & sticky ===== */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; background:#0f1114; color:#fff; z-index:1150; display:none; border-top:1px solid rgba(255,255,255,.1)} /* z-index up */
.sticky-cta__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px}

/* ===== Animations (AOS-lite) ===== */
[data-anim]{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
[data-anim].in{opacity:1; transform:none}
/* ===== Responsive ===== */
@media (max-width:1100px){
  .hero__grid{grid-template-columns:1fr}
  .works{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .section__title{font-size:30px}
  .steps{grid-template-columns:1fr 1fr}
  .calc{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  .counters__grid{grid-template-columns:1fr 1fr}
  .sticky-cta{display:block}
  body{padding-bottom:64px}
}
@media (max-width:560px){
  .reviews{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .counters__grid{grid-template-columns:1fr 1fr}
}

/* ===== HERO — легкий "pulse" для головного CTA ===== */
.hero .btn--primary{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(46,125,50,.35)}
  70%{box-shadow:0 0 0 18px rgba(46,125,50,0)}
  100%{box-shadow:0 0 0 0 rgba(46,125,50,0)}
}

/* ===== WORKS — карусель + flip "до/після" ===== */
.carousel{position:relative; overflow:hidden}
.carousel__track{display:flex; gap:16px; scroll-behavior:smooth; overflow-x:auto; scrollbar-width:none}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__item{min-width:280px; border-radius:16px; overflow:hidden; background:#f4f6f8; box-shadow:var(--shadow-soft); position:relative}
.carousel__nav{position:absolute; inset:auto 0 -52px 0; display:flex; justify-content:center; gap:10px}
.carousel__btn{width:44px; height:44px; border-radius:22px; display:grid; place-items:center; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-soft)}
/* flip */
.ba.flip{position:relative; height:190px}
.ba.flip img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.25s ease}
.ba.flip img.after{opacity:0}
.ba.flip:hover img.after{opacity:1}
.ba.flip:hover img.before{opacity:0}

/* ===== REVIEWS — бульбашки чату з аватарками ===== */
.review{border:1px solid var(--line); background:#fff; border-radius:16px; padding:14px 16px; position:relative}
.review:after{
  content:""; position:absolute; left:18px; bottom:-10px; width:0; height:0;
  border:10px solid transparent; border-top-color:#fff; filter:drop-shadow(0 -1px 0 var(--line));
}
.review .ava{width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center; font-weight:800; margin-right:8px; color:#fff}
.review:nth-child(6n+1) .ava{background:#29B6F6}
.review:nth-child(6n+2) .ava{background:#24A148}
.review:nth-child(6n+3) .ava{background:#FFB300}
.review:nth-child(6n+4) .ava{background:#7E57C2}
.review:nth-child(6n+5) .ava{background:#EC407A}
.review:nth-child(6n+6) .ava{background:#26A69A}

/* ===== PROCESS — таймлайн, активний крок при скролі ===== */
.steps{position:relative}
.steps:before{
  content:""; position:absolute; left:calc(12.5% - 2px); right:calc(12.5% - 2px);
  top:50%; height:4px; background:linear-gradient(90deg,#e8f3ec,#cde8d8);
  border-radius:2px; transform:translateY(-50%); z-index:0;
}
.step{z-index:1}
.step.active{box-shadow:0 18px 36px rgba(0,0,0,.12); transform:translateY(-2px)}
.step.active::before{background:linear-gradient(135deg,var(--teal),#80deea)}

/* ===== FAQ — дрібний тюнінг іконки стрілки ===== */
.faq summary::after{content:"▸"; font-weight:800; color:var(--green)}

/* ===== HERO: bigger CTA + animated bubbles art ===== */
.btn--xl{padding:16px 22px; font-size:18px; border-radius:16px}
.hero__grid{align-items:center}

.trust{display:flex; align-items:center; gap:10px; margin-top:10px; color:var(--muted); font-weight:700}
.trust .stars{color:#f5b301; letter-spacing:1px}
.trust .sep{width:6px; height:6px; border-radius:50%; background:#cfd8dc}

/* right art pane */
.hero__art{
  position:relative; min-height:320px; border-radius:22px;
  background:linear-gradient(180deg,#ffffff, #f4faf6);
  border:1px solid var(--line); box-shadow:var(--shadow-soft); overflow:hidden;
}
.hero__art::before{
  content:""; position:absolute; inset:-20% -10% auto auto; height:300px; width:300px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(46,125,50,.12), transparent 60%);
  filter:blur(6px);
}

/* Контент над фоновими хвилями — але не чіпаємо .topbar/.sticky-cta */
header, section, footer{ position:relative; z-index:1; }

/* ===== Pain / Solution ===== */
/* Секція проблем */
.pain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.pain__card {
  background: #ffffff;
  border-radius: 20px;
  padding: 26px 24px 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  border: 1px solid rgba(0, 0, 0, 0.03);
  position: relative;
}

/* Ховер — легкий «підйом» */
.pain__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  border-color: rgba(10, 118, 22, 0.2);
}

/* Бейдж зверху */
.pain__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: rgba(133, 196, 66, 0.12);
  color: #0a7616;
  margin-bottom: 10px;
}

/* Заголовок */
.pain__card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #222;
  line-height: 1.3;
}

/* Проблема */
.pain__bad {
  color: #c73333;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
}

/* Рішення */
.pain__good {
  color: #0a7616;
  font-size: 15px;
  line-height: 1.5;
}

/* Трохи більше акценту на заголовок секції */
#pain.alt {
  padding-top: 60px;
  padding-bottom: 56px;
}

#pain .section__title {
  text-align: center;
  margin-bottom: 8px;
}

@media (max-width: 767px) {
  .pain__card {
    padding: 20px 18px;
  }
}


/* Людям з "reduce motion" залишаємо статичний фон */
@media (prefers-reduced-motion: reduce){
  .bg-waves .wave{ animation:none; opacity:.10 }
}

/* ===== CONTACT — COMPACT MODE ===== */
.contact--compact{
  --gap:10px;
  --pad:12px;
  --r:12px;
  --fs:14px;
}
.contact--compact .card{padding:var(--pad); border-radius:var(--r); box-shadow:none}
.contact--compact h3{margin:0 0 6px; font-size:18px}

/* телефон — основний акцент, але без великої кнопки */
.contact--compact .phone-main,
.contact--compact .contact-meta,
.contact--compact .soc-row{margin:0}
.contact--compact .phone-main{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
}
.contact--compact .phone-number{
  font-weight:800; color:var(--green); text-decoration:none; font-size:16px;
}
.contact--compact .phone-number:focus-visible{outline:2px solid var(--green-500); outline-offset:3px}
.contact--compact .btn-call{
  padding:6px 10px; border-radius:8px; font-weight:800; font-size:13px;
  background:var(--green); color:#fff; text-decoration:none; box-shadow:none;
}
.contact--compact .btn-call:focus-visible{outline:2px solid var(--green-500); outline-offset:2px}

/* рядки контактів — без рамок, іконка + текст */
.contact--compact .contact-list,
.contact--compact .contact-meta{
  list-style:none; margin:0; padding:0; display:grid; gap:6px;
}
.contact--compact .contact-list li,
.contact--compact .contact-meta li{
  display:flex; gap:8px; align-items:center; font-size:var(--fs);
}
.contact--compact .contact-list a{
  font-weight:600; text-decoration:none; color:var(--text);
}
.contact--compact .contact-list a:hover{color:var(--green)}
.contact--compact .contact-list a:focus-visible{outline:2px solid var(--green-500); outline-offset:2px}
.contact--compact .i,
.contact--compact .b.i-mail,
.contact--compact .b.i-pin{width:20px; height:20px; border-radius:6px; background:transparent}
.contact--compact .i::before{width:16px; height:16px; opacity:.8}

/* соцмережі — крихітні монохромні кружки; показуємо лише наявні */
.contact--compact .social-icons,
.contact--compact .soc-row{display:flex; gap:8px; align-items:center}
.contact--compact [data-social]{
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line); background:#fff;
  background-repeat:no-repeat; background-position:center; background-size:16px;
  display:none; /* базово ховаємо — JS покаже наявні */
}
.contact--compact [data-social].is-on{display:inline-grid}
.contact--compact [data-social]:focus-visible{outline:2px solid var(--green-500); outline-offset:2px}

/* мапа — невисока, без важкого декору */
.contact--compact .map-box{border:1px solid var(--line); border-radius:10px; overflow:hidden}
.contact--compact .map-placeholder{aspect-ratio:16/10; max-height:260px}

/* мобільно: мапу ховаємо під спойлер */
@media (max-width:900px){
  .contact--compact .map-box{display:none}
  .contact--compact .map-toggle{
    display:inline-block; font-weight:700; color:var(--green);
    cursor:pointer; font-size:13px;
  }
  .contact--compact .map-toggle:focus-visible{outline:2px solid var(--green-500); outline-offset:2px}
}

/* ===== CONTACT CLEAN ===== */
.contact-clean{
  background:linear-gradient(180deg,#f8fbf9 0%,#f3faf6 100%);
  padding:80px 0 100px;
}
.contact-clean__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
}
.contact-clean h2{margin-top:0; font-size:26px; font-weight:800}
.contact-clean h3{margin:0 0 10px; font-size:20px; font-weight:800}

/* form */
.contact-form form{display:grid; gap:10px; max-width:420px}
.contact-form label{font-weight:700; font-size:14px}
.contact-form input{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
}
.contact-form .btn{margin-top:4px}
.contact-form .note{font-size:13px; color:var(--muted); margin:6px 0 0}

/* info block */
.contact-info{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
  padding:24px;
  display:grid;
  gap:10px;
  max-width:400px;
}
.info-phone{font-size:20px; font-weight:800; color:var(--green); text-decoration:none}
.info-phone:focus-visible{outline:2px solid var(--green-500); outline-offset:3px}
.info-mail{font-weight:700; color:var(--text); text-decoration:none}
.info-mail:hover{color:var(--green)}
.info-mail:focus-visible{outline:2px solid var(--green-500); outline-offset:3px}
.info-loc{color:var(--muted); font-size:14px}

/* соцмережі */
.info-social{display:flex; gap:10px; margin-top:8px}
.soc{
  width:75px; height:75px; border-radius:10px;
  background:#f8faf9; border:1px solid var(--line);
  display:grid; place-items:center;
  transition:.2s ease; box-shadow:var(--shadow-soft);
}
.soc:hover{transform:translateY(-2px); background:#fff}
.soc:focus-visible{outline:2px solid var(--green-500); outline-offset:2px}
.soc.tg{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2324A148" viewBox="0 0 24 24"><path d="M9.1 15.7 8.7 20a.8.8 0 0 0 .6-.3l2.8-2.7 5.8 4.3a1 1 0 0 0 1.5-.6L23.9 2a1 1 0 0 0-1.3-1.1L.8 10.4a1 1 0 0 0 .1 1.9l5.8 1.8 13.5-8.5-11 10z"/></svg>');
  background-repeat:no-repeat; background-position:center; background-size:45px;
}
.soc.wa{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2324A148" viewBox="0 0 24 24"><path d="M12 .5A11.5 11.5 0 0 0 .5 12 11.5 11.5 0 0 0 12 23.5a11.4 11.4 0 0 0 5.5-1.4l6 1.5-1.6-5.8a11.5 11.5 0 0 0-9.9-17.3zm0 2a9.5 9.5 0 0 1 8.3 14.3l-.3.5.9 3.2-3.3-.9-.4.2A9.5 9.5 0 0 1 2.5 12 9.5 9.5 0 0 1 12 2.5z"/></svg>');
  background-repeat:no-repeat; background-position:center; background-size:45px;
}
.soc.vb{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2324A148" viewBox="0 0 24 24"><path d="M17.5 11.5a6.5 6.5 0 0 1-13 0 6.5 6.5 0 0 1 13 0zm-8 0a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0z"/></svg>');
  background-repeat:no-repeat; background-position:center; background-size:45px;
}
.soc.ig{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2324A148" viewBox="0 0 24 24"><path d="M7 2a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5H7zm5 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm6-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>');
  background-repeat:no-repeat; background-position:center; background-size:45px;
}
/* ===== CONTACT MAP ===== */
.contact-map{margin-top:50px;display:grid;place-items:center}
.map-placeholder{
  width:min(100%,900px);
  aspect-ratio:16/7;
  background:#e8ecef;
  border-radius:18px;
  display:grid;place-items:center;
  color:#6b717a;
}

/* ===== FOOTER (clean) ===== */
.site-footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:18px 0;
  position:relative;
  z-index:1; /* поверх фонових хвиль/бульбашок */
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.footer__brand{color:var(--muted); font-weight:700;}
.footer__nav{display:flex; align-items:center; gap:18px}
.footer__link{
  background:none;
  border:0;
  cursor:pointer;
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
}
.footer__link:hover{color:var(--green)}
@media (max-width:700px){
  .footer__inner{flex-direction:column; gap:8px}
}

/* ===== MODAL (privacy) ===== */
.modal{position:fixed; inset:0; display:none; z-index:1200}
.modal[aria-hidden="false"]{display:block}
.modal__overlay{
  position:absolute; inset:0;
  background:rgba(15,17,20,.5);
  backdrop-filter:saturate(140%) blur(2px);
}
.modal__dialog{
  position:relative; z-index:1;
  margin:6vh auto;
  width:min(860px,92%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  max-height:88vh;
}
.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}
.modal__head h3{margin:0; font-weight:800; font-size:20px}
.modal__close{
  border:0;
  background:transparent;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  color:#667085;
  transition:.2s ease;
}
.modal__close:hover{color:#000}
.modal__body{padding:16px 18px; overflow:auto}
.modal__body h4{margin:16px 0 6px; font-size:16px}
.modal__foot{
  padding:14px 18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
}
@media (max-width:700px){
  .modal__dialog{
    margin:0;
    inset:auto 0 0 0;
    width:100%;
    border-radius:12px 12px 0 0;
  }
}

/* ===== HERO ART CARD ===== */
.hero__art{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg,#f6faf7,#eef4f1);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  width:min(560px,42vw);
  min-height:250px;
  display:grid;
  place-items:center;
}
.hero-art__img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  filter:contrast(1.02) saturate(1.05);
  transition:transform .4s ease, filter .4s ease;
}
.hero__art:hover .hero-art__img{
  transform:scale(1.05);
  filter:contrast(1.06) saturate(1.08);
}
.hero-art__badge{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:8px 12px;
  font-weight:800;
  font-size:14px;
  color:#0f1114;
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  border-radius:12px;
  backdrop-filter:saturate(150%) blur(3px);
}
@media (max-width:900px){
  .hero__art{width:100%; min-height:220px;}
  .hero-art__badge{font-size:13px;}
}

/* ===== RESPONSIVE REFINEMENTS ===== */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr; text-align:center;}
  .hero__art{width:100%; order:-1; margin-bottom:18px;}
}
@media (max-width:600px){
  .calc, .contact-clean__grid{gap:16px;}
  input, select{font-size:14px;}
}
.sticky-cta .btn{flex:1; text-align:center;}
/* 2025-10-12: hero mobile one-column */
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; text-align:center; }
  .hero__art{ width:100%; order:-1; margin-bottom:14px; }
}

/* 2025-10-12: input focus UX / topbar helpers */
:root{ --topbar-h:64px; }

/* Хедер завжди зверху */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10000;                       /* вище карток/героя */
  background:#fff;                       /* суцільний фон */
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter: saturate(140%) blur(8px);
}
.topbar.is-solid{ box-shadow:0 6px 18px rgba(15,17,20,.06); }

/* фон-хвилі під контентом */
.bg-waves{ z-index:0; }

/* контент над хвилями, але нижче за хедер */
header, section, footer{ position:relative; z-index:1; }

/* активний пункт меню */
.nav a.is-active{
  background:#e8f5e9;
  color:var(--green);
}
/* Бургер-кнопка (десктоп – прихована) */
.burger {
  display: none;
  width: 32px;
  height: 24px;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 100%;
  height: 3px;
  background: #0a7616; /* зелений */
  border-radius: 4px;
  transition: .25s ease;
}

/* Анімація бургер → хрестик */
.burger.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.burger.active span:nth-child(2) {
  opacity: 0;
}
.burger.active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Мобільна версія */
@media (max-width: 768px) {
  .burger {
    display: flex;
    z-index: 110;
  }

  /* Меню як бокова панель */
  .nav--main {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75vw;
    max-width: 320px;
    height: 100vh;
    background: #ffffff;
    padding: 90px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    transition: right .3s ease;
    z-index: 100;
  }

  .nav--main a {
    font-size: 16px;
  }

  .nav--main .btn.btn--primary {
    margin-top: 8px;
    width: 100%;
    text-align: center;
  }

  /* Відкрите меню */
  .nav--main.nav--open {
    right: 0;
  }

  /* Щоб шапка не ламалась */
  .topbar__inner {
    align-items: center;
  }
}

/* щоб якорі не ховались під хедером */
[id]{ scroll-margin-top: var(--topbar-h); }

/* ===== Gallery grid ===== */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.gal__item{
  position:relative;
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.gal__item img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  transition:transform .3s ease, filter .3s ease;
}
.gal__item:hover img{ transform:scale(1.04); filter:contrast(1.05) }
.gal__cap{
  position:absolute; left:10px; bottom:10px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px 10px;
  font-weight:800; font-size:13px;
}
@media (max-width:1100px){ .gallery{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:700px){  .gallery{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:480px){
  .gallery{ grid-template-columns:1fr }
  .gal__item img{ height:200px }
}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0;
  background:rgba(15,17,20,.85);
  display:none; z-index:1400;
}
.lightbox[aria-hidden="false"]{ display:grid; place-items:center; }
.lb__img{
  max-width:min(92vw,1200px);
  max-height:80vh;
  border-radius:16px;
  box-shadow:var(--shadow);
}
.lb__cap{
  margin-top:10px;
  color:#fff;
  font-weight:700;
  text-align:center;
}
.lb__close{
  position:absolute; top:14px; right:16px;
  font-size:36px;
  background:transparent; border:0; color:#fff; cursor:pointer;
}
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);
  color:#fff; font-size:28px; cursor:pointer;
}
.lb__prev{ left:16px } .lb__next{ right:16px }
.lb__nav:hover{ background:rgba(255,255,255,.16) }
.site-footer .soc{ width:32px; height:32px; border-radius:50%; }

/* ===== Modal statuses (success / error / loading) ===== */
.modal__status{
  text-align:center;
  padding:22px 10px 20px;
  display:grid; gap:10px; justify-items:center;
  animation: fadeIn .18s ease;
}
.modal__status h4{ margin:6px 0 4px; font-size:18px; font-weight:800; }
.modal__status p{  margin:0; color:var(--muted); }
.modal__status .actions{ display:flex; gap:10px; margin-top:10px; }

.status__icon{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  box-shadow: var(--shadow-soft);
}
.status__icon svg{ width:34px; height:34px; }

.status--ok   .status__icon{ background:#eaf7ee; border:1px solid #cfeedd; }
.status--ok   .status__icon svg{ fill:#2e7d32; }
.status--err  .status__icon{ background:#fdecee; border:1px solid #f7c9cf; }
.status--err  .status__icon svg{ fill:#c62828; }
.status--load .status__icon{ background:#eef4ff; border:1px solid #d6e4ff; }

.spin{
  width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(0,0,0,.12);
  border-top-color: var(--green);
  animation: spin 1s linear infinite;
}

@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{   opacity:1; transform:none; }
}
/* ==== Inline notice у формі ==== */
.form-note{
  position: static;                /* в потоці */
  margin: 12px 0 0;
  padding: 12px 14px;
  display: block;                  /* на всю колонку форми (grid) */
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-left: 6px solid var(--green);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  min-width: 0;
  max-width: 100%;
  animation: fn-in .22s ease;
  z-index: 1;
}
.form-note strong{ font-weight:800; }
.form-note--err{  border-left-color:#c62828; }
.form-note--warn{ border-left-color:#fbc02d; }

/* нотіс під конкретним полем (якір на input) */
.form-note--field{
  position: static;
  margin: 6px 0 0;
  min-width: 0;
  max-width: 100%;
}

/* картка/модалка можуть бути relative */
.card, .modal__dialog{ position:relative; }

/* мобільно — просто компактніший відступ */
@media (max-width:680px){
  .form-note{ margin-top:8px; }
}

/* антиспам-кнопка */
.btn.is-sent{ pointer-events:none; opacity:.75; }

/* нотіс прив’язаний до .field */
.field{ position:relative; }

/* героїчна сітка */
.hero__grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
  gap:28px;
}
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__art{ order:-1; margin-bottom:8px; }
}

/* сервісні картки та інші гріди */
.grid.cols-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
@media (max-width:900px){
  .grid.cols-2{ grid-template-columns:1fr; }
}

/* галерея робіт */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
@media (max-width:900px){
  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){
  .gallery{ grid-template-columns:1fr; }
}

/* відео в герої на мобільному (fallback для невбудованого full-screen) */
@media (max-width:900px){
  .hero__video{ height:56vw; max-height:420px; }
}

img, video{ max-width:100%; height:auto; display:block; }

/* кнопки + форми */
:root{ --btn-h:48px; }
.btn{ min-height:var(--btn-h); padding:.7rem 1.1rem; border-radius:12px; }
.form__actions button{ min-height:var(--btn-h); }
input, select, textarea{ font-size:16px; line-height:1.35; padding:.7rem .9rem; border-radius:10px; }
label{ display:block; margin:.5rem 0 .25rem; }

/* mobile sticky helper (без конфліктів з основним fixed-баром) */
.sticky-cta{
  position:sticky;
  bottom:0;
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  backdrop-filter:saturate(140%) blur(6px);
}

.modal__dialog{ margin:8vh auto; }

@media (max-width:520px){
  .modal__head h3{ font-size:18px; }
  .modal .field{ margin-bottom:10px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .hero__video{ animation:none; }
}

/* горизонтальний скрол для навігації на вузьких екранах */
.nav{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  gap:8px;
}
.nav a{
  white-space:nowrap;
  flex:0 0 auto;
}

/* дрібні відступи у формі контакту */
.contact-form label{ margin-top:10px; }
.contact-form input{ margin-bottom:8px; }

/* запас під мобільний нижній бар */
body{ padding-bottom:calc(70px + env(safe-area-inset-bottom)); }

/* типографіка на дуже вузьких екранах */
@media (max-width:480px){
  h1{ font-size:1.6rem; }
  h2{ font-size:1.3rem; }
  .section__lead{ font-size:1rem; }
}

/* (Видалено дубль .btn з іншим padding/font-weight, щоб не було конфліктів) */

/* ===== Mobile cards for comparison table ===== */
@media (max-width:640px){
  #ppu-compare .compare{ overflow:hidden; }

  #ppu-compare table{
    width:100%;
    border-collapse:collapse;
    background:transparent;
  }
  #ppu-compare thead{
    position:absolute !important;
    left:-9999px; top:-9999px;
    height:0; width:0; overflow:hidden;
  }
  #ppu-compare tbody tr{
    display:block;
    margin:12px 0;
    padding:12px 12px 6px;
    background:#fff;
    border:1px solid #e8eef0;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
  }
  #ppu-compare tbody td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border:0;
    font-size:15px;
    line-height:1.35;
  }
  #ppu-compare tbody td + td{ border-top:1px dashed #eef3f5; }
  #ppu-compare tbody td::before{
    content:attr(data-label);
    flex:0 0 48%;
    max-width:52%;
    color:#6b7785;
    font-weight:600;
  }
}

/* ===== Contact section: mobile tidy up ===== */
@media (max-width:640px){
  .contact-clean{ padding-top:8px; }

  .contact-clean__grid{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .contact-form{ order:1; }
  .contact-info{ order:2; }

  .contact-form h2{
    font-size:22px;
    line-height:1.25;
    margin:0 0 8px;
  }
  .contact-form label{
    display:block;
    font-size:14px;
    margin:10px 0 6px;
    color:#39424e;
  }
  .contact-form input[type="text"],
  .contact-form input[type="tel"]{
    width:100%;
    height:48px;
    border-radius:12px;
    border:1px solid #e6edf0;
    padding:0 14px;
    font-size:16px;
    background:#fff;
  }
  .contact-form .btn.btn--primary{
    width:100%;
    height:48px;
    border-radius:14px;
    font-weight:700;
    margin-top:10px;
  }
  .contact-form .note{
    font-size:12px;
    color:#7a8897;
    margin:8px 2px 0;
  }

  .contact-info{
    position:static !important;
    width:100%;
    margin:0;
    padding:14px 16px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    border:1px solid #edf2f5;
  }
  .contact-info h3{ margin:0 0 8px; font-size:18px; }
  .contact-info .info-phone,
  .contact-info .info-mail{
    display:inline-block;
    font-weight:700;
    margin:4px 0;
    word-break:break-word;
  }
  .contact-info .info-loc{ margin-top:6px; color:#5f6b79; font-size:14px; }

  .contact-clean .contact-map .map-placeholder,
  .contact-clean .contact-map iframe{
    height:220px !important;
    border-radius:16px;
  }
}
/* ====== Responsive: tablets & large phones ====== */
@media (min-width:641px) and (max-width:900px){
  .contact-clean__grid{ gap:20px; }
  .contact-form .btn.btn--primary{ min-width:220px; }
}

/* ====== Centering helpers (mobile) ====== */
.faq{ margin-left:auto; margin-right:auto; }

@media (max-width:640px){
  .contact-form form,
  .contact-info{ margin-left:auto; margin-right:auto; }

  /* вузькі картки — по центру */
  .card[max-width],
  .card[style*="max-width"]{ margin-left:auto; margin-right:auto; }
}

/* ====== Container (single source of truth) ====== */
:root{ --page-max:1120px; --gutter:16px; }

.container{
  width:100%;
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* гарантія центру, якщо батько — flex/grid */
:where(header,section,footer) > .container{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* мобільна колонка трохи вужча для читабельності */
@media (max-width:640px){
  .container{ max-width:620px; }

  /* ключові гріди заповнюють контейнер */
  .hero__grid,
  .adv-grid,
  .services,
  .calc,
  .reviews,
  .steps,
  .gallery,
  .contact-clean__grid{ width:100%; }

  /* перестраховка для вузьких блоків */
  .card, aside, .calc__result, form{
    margin-left:auto;
    margin-right:auto;
  }
}

/* базова розмітка сторінки (без центрування body) */
body{ display:block; }
body > *{ width:100%; }

/* якщо існує зовнішній враппер — не даємо йому звузитись */
html,body,#root,#app,.page,.wrapper{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
}

/* якщо трапиться секція без .container — підхопимо контент */
section > :not(.container):not(.lightbox):not(.bg-waves){
  box-sizing:border-box;
  max-width:var(--page-max);
  margin-left:auto !important;
  margin-right:auto !important;
  padding-inline:var(--gutter);
}
@media (max-width:640px){
  section > :not(.container):not(.lightbox):not(.bg-waves){
    max-width:620px;
  }
}

/* гріди, що можуть “тягнутись” вбік — вирівнюємо */
.hero__grid,
.adv-grid,
.services,
.calc,
.reviews,
.steps,
.gallery,
.contact-clean__grid{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* не допускаємо горизонтального скролу */
html,body{ overflow-x:hidden; }

/* ====== Sticky CTA (mobile only) ====== */
.sticky-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1150;                         /* нижче за .modal (1200) */
  background:rgba(15,17,20,.98);
  backdrop-filter:saturate(140%) blur(6px);
  border-top:1px solid rgba(255,255,255,.08);
  padding:10px 0 max(10px, env(safe-area-inset-bottom));
  display:none;
}
@media (max-width:900px){
  .sticky-cta{ display:block; }
}
.sticky-cta__inner{ max-width:1120px; margin:0 auto; }

/* ховаємо нижній бар, коли відкрито будь-який модал */
.modal[aria-hidden="false"] ~ .sticky-cta{ display:none !important; }

/* запас під бар */
body{ padding-bottom:calc(70px + env(safe-area-inset-bottom)); }

/* ====== Topbar (sticky by default; fixed on desktop) ====== */
:root{ --topbar-h:64px; }

.topbar{
  position:sticky;
  top:0;
  z-index:3000;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter:saturate(140%) blur(8px);
}
.topbar.is-fixed{ position:fixed; left:0; right:0; top:0; }
@media (min-width:901px){
  .topbar{ position:fixed; left:0; right:0; top:0; z-index:10000; }
  body{ padding-top:var(--topbar-h); }
}

/* якірні переходи — з урахуванням висоти шапки */
[id]{ scroll-margin-top:var(--topbar-h); }
html{ scroll-padding-top:var(--topbar-h); }
/* === NUCLEAR HERO VIDEO OVERRIDE (append last) === */

/* === FIX A: не піднімай відео над усіма шарами === */
/* було: .hero > * { position:relative; z-index:2 }  */
.hero > *:not(video):not(iframe):not(.hero__video){
  position: relative;
  z-index: 2;
}

/* === FIX B: відео повноекранне всередині героя === */
.hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100svh - var(--topbar-h));
}
.hero > video.hero__video,
.hero > .hero__video,
.hero iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 0 !important;           /* під оверлеєм і контентом */
}

/* мобільний оверрайд, щоб не спрацьовувало старе height:56vw */
@media (max-width:900px){
  .hero > video.hero__video,
  .hero > .hero__video,
  .hero iframe{
    height: 100% !important;
    max-height: none !important;
  }
}
/* --- FIX: не центрувати медіа в .hero --- */
.hero > video,
.hero > .hero__video,
.hero > iframe{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

/* Відео — фоном на всю секцію */
.hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100svh - var(--topbar-h));
}
.hero > video.hero__video,
.hero > .hero__video,
.hero > iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  z-index: 0 !important; /* під оверлеєм і контентом */
}

/* Оверлей зверху (як у тебе) */
.hero::after{ z-index: 1; }
.hero > *:not(video):not(iframe):not(.hero__video){ z-index: 2; position: relative; }
/* === FIX: секція порівняння ППУ === */
/* === #PPU-COMPARE — КОНТРОЛЬ ВІДОБРАЖЕННЯ ================================= */

/* 1) МОБІЛКА: картки */
@media (max-width: 700px) {
  #ppu-compare .compare table,
  #ppu-compare table{
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    background:transparent !important;
  }
  #ppu-compare thead{ display:none !important; }
  #ppu-compare tbody{ display:block !important; }

  #ppu-compare tbody tr{
    display:block !important;
    background:#fff !important;
    border:1px solid #e8eef0 !important;
    border-radius:14px !important;
    margin:14px 0 !important;
    padding:12px 14px !important;
    box-shadow:0 6px 18px rgba(0,0,0,.05) !important;
  }
  #ppu-compare tbody td{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
    border:0 !important;
    padding:8px 0 !important;
    font-size:15px !important;
    line-height:1.35 !important;
  }
  /* підписи колонок */
  #ppu-compare tbody td:not(:first-child)::before{
    content:attr(data-label);
    flex:0 0 48%;
    max-width:52%;
    color:#6b7785;
    font-weight:600;
  }
  /* перший стовпчик — заголовок картки */
  #ppu-compare tbody td:first-child{
    display:block !important;
    font-weight:800 !important;
    font-size:16px !important;
    color:#0f1114 !important;
    padding-bottom:6px !important;
  }
}

/* 2) ДЕСКТОП: звичайна таблиця (жорстко повертаємо типовий flow) */
@media (min-width: 701px){
  #ppu-compare table{ display:table !important; width:100% !important; border-collapse:collapse !important; }
  #ppu-compare thead{ display:table-header-group !important; }
  #ppu-compare tbody{ display:table-row-group !important; }
  #ppu-compare tr{ display:table-row !important; box-shadow:none !important; margin:0 !important; padding:0 !important; }
  #ppu-compare th, #ppu-compare td{
    display:table-cell !important;
    padding:10px 12px !important;
    border-bottom:1px solid var(--line, #e7ecef) !important;
    background:transparent !important;
  }
  /* прибираємо мобільні псевдолейбли */
  #ppu-compare td::before{ content:none !important; }
}
/* === PPU Compare: базові стилі таблиці (десктоп) ========================= */
#ppu-compare .compare{ width:100%; }
#ppu-compare table{
  width:100%;
  border-collapse: collapse;
  background: #fff;
}
#ppu-compare thead th{
  text-align:left;
  font-weight:800;
  padding:12px 14px;
  border-bottom:1px solid var(--line, #e7ecef);
  white-space:nowrap;
}
#ppu-compare tbody td{
  padding:10px 14px;
  border-bottom:1px solid var(--line, #e7ecef);
  vertical-align:top;
}

/* небагато «повітря» між секціями */
#ppu-compare .hero__cta{ margin-top: 18px; }

/* === Мобільні «картки» (≤700px) ======================================== */
@media (max-width:700px){
  #ppu-compare thead{ display:none; }
  #ppu-compare table{ border-collapse: separate; border-spacing:0; background: transparent; }
  #ppu-compare tbody{ display:block; }
  #ppu-compare tbody tr{
    display:block;
    margin:12px 0;
    padding:12px 12px 6px;
    background:#fff;
    border:1px solid #e8eef0;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
  }
  #ppu-compare tbody td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border:0;
  }
  /* підпис ліворуч — автоматично згенеруємо через data-label (див. JS нижче) */
  #ppu-compare tbody td::before{
    content: attr(data-label);
    flex: 0 0 48%;
    max-width: 52%;
    color:#6b7785;
    font-weight:600;
  }
}
/* === PPU Compare — таблиця (desktop) =================================== */
#ppu-compare .compare{ width:100%; }
#ppu-compare table{ width:100%; border-collapse:collapse; background:#fff; }
#ppu-compare thead th{
  text-align:left; font-weight:800; padding:12px 14px;
  border-bottom:1px solid var(--line, #e7ecef);
}
#ppu-compare tbody td{
  padding:10px 14px; border-bottom:1px solid var(--line, #e7ecef);
  vertical-align:top;
}

/* Бейджі (чіпи) */
.badge{
  display:inline-block; padding:.18rem .5rem; border-radius:10px;
  font-weight:800; font-size:13px; line-height:1; white-space:nowrap;
}
.badge--good{   background:#eaf7ee; color:#1b5e20; border:1px solid #cfeedd; }
.badge--bad{    background:#fdecee; color:#b23a3a; border:1px solid #f7c9cf; }
.badge--neutral{background:#eef3f7; color:#3b4754; border:1px solid #dbe5ec; }

/* === Mobile cards (≤700px) ============================================ */
@media (max-width:700px){
  #ppu-compare thead{ display:none; }
  #ppu-compare table{ border-collapse:separate; border-spacing:0; background:transparent; }
  #ppu-compare tbody{ display:block; }
  #ppu-compare tbody tr{
    display:block; margin:12px 0; padding:12px 12px 6px;
    background:#fff; border:1px solid #e8eef0; border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
  }
  #ppu-compare tbody td{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px; padding:8px 0; border:0;
  }
  /* Перший стовпець (назва критерію) — як заголовок картки */
  #ppu-compare tbody td:first-child{
    display:block; padding-bottom:6px; font-weight:800; color:var(--text,#0f1114);
  }
  #ppu-compare tbody td:first-child::before{ content:none; }

  /* Для інших стовпців виводимо підпис колонки */
  #ppu-compare tbody td:not(:first-child)::before{
    content: attr(data-label);
    flex:0 0 48%; max-width:52%; color:#6b7785; font-weight:600;
  }
}
/* badges — як було */
.badge{
  display:inline-block; padding:.2rem .55rem; border-radius:10px;
  font-weight:800; font-size:13px; line-height:1; white-space:nowrap;
}
.badge--good{   background:#eaf7ee; color:#1b5e20; border:1px solid #cfeedd; }
.badge--bad{    background:#fdecee; color:#b23a3a; border:1px solid #f7c9cf; }
.badge--neutral{background:#eef3f7; color:#3b4754; border:1px solid #dbe5ec; }

/* мобільні картки — компактні, чисті */
@media (max-width:700px){
  #ppu-compare thead{ display:none; }
  #ppu-compare table{ border-collapse:separate; border-spacing:0; background:transparent; }
  #ppu-compare tbody{ display:block; }
  #ppu-compare tbody tr{
    display:block;
    margin:12px 0;
    padding:12px 12px 8px;
    background:#fff;
    border:1px solid #e8eef0;
    border-radius:14px;
    box-shadow:0 6px 14px rgba(0,0,0,.05);  /* легша тінь */
  }
  /* заголовок картки (критерій) */
  #ppu-compare tbody td:first-child{
    display:block;
    padding-bottom:6px;
    font-weight:800;
    color:var(--text,#0f1114);
  }
  /* рядки матеріалів — у два стовпці: лейбл колонки + значення */
  #ppu-compare tbody td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
    border:0;
  }
  #ppu-compare tbody td:not(:first-child)::before{
    content: attr(data-label);
    flex:0 0 46%;
    max-width:52%;
    color:#6b7785;
    font-weight:600;
    line-height:1.3;
  }
  /* значення справа — бейдж зверху, підпис (якщо є) нижче дрібним */
  #ppu-compare tbody td:not(:first-child) .badge{ margin-top:1px; }
  #ppu-compare tbody td .sub{
    display:block;
    margin-top:4px;
    font-size:12.5px;
    color:#6b717a;
    line-height:1.25;
  }
}
/* ==== 2025-11-19 збільшення шрифту ==== */
html {
    font-size: 1.4rem !important;
}

body {
    font-size: 1rem; /* щоб не збільшилось занадто сильно */
    line-height: 1.6;
}