:root{
  --navy:#0c2446; --navy-2:#143259; --green:#3b8450; --green-d:#2e6b3f; --green-l:#e8f3ec;
  --cream:#fbf7ec; --sand:#f6e7d2; --fur:#d69754; --olive:#44442a; --ink:#1d2b3a;
  --grey:#5d6875; --line:#e7e0d1; --red:#c0503f; --amber:#e0a63c;
  --r-xl:44px; --r-l:28px; --r-m:18px; --r-s:12px;
  --shadow:0 18px 46px rgba(12,36,70,.10);
  --shadow-s:0 8px 22px rgba(12,36,70,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:120px}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- типографіка ---------- */
h1,h2,h3{margin:0; letter-spacing:-.02em; line-height:1.06; font-weight:800}
h1{font-size:clamp(38px,6.2vw,74px)}
h2{font-size:clamp(30px,4.4vw,52px)}
h3{font-size:clamp(20px,2.4vw,27px); line-height:1.2}
.lead{font-size:clamp(17px,1.9vw,21px); color:#3c4a5a}
.eyebrow{display:inline-block; font-size:14px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-d); background:var(--green-l);
  padding:8px 16px; border-radius:999px}

/* ---------- кнопки ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer;
  font:inherit; font-weight:800; font-size:18px; padding:18px 32px; border-radius:999px;
  text-decoration:none; transition:transform .18s cubic-bezier(.2,.9,.3,1.4), box-shadow .18s, background .18s}
.btn-p{background:var(--green); color:#fff; box-shadow:0 10px 0 0 var(--green-d)}
.btn-p:hover{transform:translateY(-3px); box-shadow:0 13px 0 0 var(--green-d)}
.btn-p:active{transform:translateY(4px); box-shadow:0 5px 0 0 var(--green-d)}
.btn-s{background:#fff; color:var(--navy); box-shadow:inset 0 0 0 2.5px var(--navy)}
.btn-s:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 2.5px var(--navy), var(--shadow-s)}
.btn-ghost{background:transparent; color:var(--navy); padding:12px 20px}

/* ---------- шапка ---------- */
header{position:sticky; top:0; z-index:60; background:rgba(251,247,236,.86);
  backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s}
header.stuck{border-color:var(--line); box-shadow:0 6px 24px rgba(12,36,70,.06)}
.nav{display:flex; align-items:center; gap:28px; height:80px}
.logo{display:flex; align-items:center; gap:0; height:30px}
.logo svg{height:30px; width:auto}
.nav-links{display:flex; gap:26px; margin-left:auto; font-weight:700; font-size:16px}
.nav-links a{text-decoration:none; color:var(--navy); opacity:.8; transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-cta{display:flex; gap:10px; align-items:center}
@media(max-width:900px){
  /* телефон: меню не ховаємо — воно йде другим рядком і гортається вбік */
  .nav{flex-wrap:wrap; height:auto; padding:10px 0 6px; gap:6px}
  .wrap{padding:0 14px}
  .logo{order:1}
  .nav-cta{order:2; margin-left:auto; gap:6px}
  .nav-cta .btn-ghost{display:inline-flex; padding:8px 8px; font-size:14px}
  .nav-cta .btn-p{padding:10px 14px !important; font-size:14px !important; box-shadow:0 5px 0 0 var(--green-d)}
  .logo svg{height:24px}
  .nav-links{order:3; display:flex; width:100%; margin:0; gap:2px 0; font-size:14.5px;
    flex-wrap:wrap; row-gap:2px;
    border-top:1px solid var(--line); padding-top:8px}
  @media(max-width:430px){ .nav-links{font-size:13.5px} .nav-links a{padding:4px 7px} }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap; padding:4px 10px}
  /* на телефоні «Кабінет» — першим, щоб було видно без гортання */
  .nav-links a[href="/cabinet"]{order:-1; font-weight:800}
}

/* ---------- герой ---------- */
.hero{position:relative; overflow:hidden; padding:56px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr; gap:16px}}
.hl-accent{color:var(--green); position:relative; white-space:nowrap}
.hl-accent svg{position:absolute; left:0; bottom:-14px; width:100%; height:18px; overflow:visible}
.hl-accent path{stroke:var(--fur); stroke-width:9; fill:none; stroke-linecap:round;
  stroke-dasharray:520; stroke-dashoffset:520; animation:draw 1.1s .5s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero p.lead{max-width:540px; margin:26px 0 0}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
.hero-note{margin-top:16px; font-size:15px; color:var(--grey)}

/* сцена з песиком */
.stage{position:relative; min-height:520px; display:flex; align-items:flex-end; justify-content:center}
@media(max-width:960px){.stage{min-height:430px; margin-top:20px}}
.blob{position:absolute; left:50%; top:50%; transform:translate(-50%,-46%);
  width:min(480px,92%); aspect-ratio:1/1; background:var(--sand); border-radius:46% 54% 52% 48%/48% 44% 56% 52%;
  animation:morph 12s ease-in-out infinite}
@keyframes morph{
  0%,100%{border-radius:46% 54% 52% 48%/48% 44% 56% 52%; transform:translate(-50%,-46%) rotate(0deg)}
  50%{border-radius:56% 44% 46% 54%/54% 56% 44% 46%; transform:translate(-50%,-48%) rotate(6deg)}
}
.pesyk{position:relative; z-index:3; width:min(400px,74%); filter:drop-shadow(0 22px 26px rgba(12,36,70,.18));
  animation:breathe 4.6s ease-in-out infinite; transform-origin:50% 92%}
@keyframes breathe{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  35%{transform:translateY(-9px) rotate(-.8deg) scale(1.008)}
  70%{transform:translateY(-3px) rotate(.6deg) scale(1.002)}
}
.paw-shadow{position:absolute; z-index:2; bottom:6px; left:50%; transform:translateX(-50%);
  width:230px; height:26px; background:rgba(12,36,70,.13); border-radius:50%; filter:blur(7px);
  animation:shd 4.6s ease-in-out infinite}
@keyframes shd{0%,100%{transform:translateX(-50%) scale(1);opacity:.5} 35%{transform:translateX(-50%) scale(.9);opacity:.32}}

/* картки, що літають навколо песика */
.chip{position:absolute; z-index:4; background:#fff; border-radius:var(--r-m);
  box-shadow:var(--shadow); padding:12px 16px; font-size:14px; font-weight:700; line-height:1.3;
  display:flex; gap:10px; align-items:center; white-space:nowrap}
.chip small{display:block; font-weight:600; color:var(--grey); font-size:12.5px}
.dot{width:11px; height:11px; border-radius:50%; flex:0 0 auto}
.dot.g{background:var(--green)} .dot.a{background:var(--amber)} .dot.r{background:var(--red)}
.chip-1{top:6%; left:-4%; animation:float1 6.5s ease-in-out infinite}
.chip-2{top:38%; right:-6%; animation:float2 7.5s ease-in-out infinite}
.chip-3{bottom:12%; left:-8%; animation:float3 8.5s ease-in-out infinite}
.bas{display:inline-block;background:#e6f1ea;color:#2f6b45;border-radius:5px;padding:0 5px;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;vertical-align:2px;margin-left:4px}
.pro{display:inline-block;background:#e8eef5;color:#41556b;border-radius:5px;padding:0 5px;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;vertical-align:2px;margin-left:4px}
@media(max-width:380px){
  .hero-grid>*{min-width:0}
  h1{font-size:32px}
  .hero-cta{flex-wrap:wrap}
  .hero-cta .btn{white-space:normal; text-align:center}
  .chip{max-width:calc(100% - 10px)}
  .chip-1{left:0} .chip-2{right:0} .chip-3{left:0}
}
@keyframes float1{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(-1deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(2.5deg)}50%{transform:translateY(-20px) rotate(0deg)}}
@keyframes float3{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-13px) rotate(-3.5deg)}}
@media(max-width:760px){.chip-1{left:-2%;top:0} .chip-2{right:-2%} .chip-3{left:-2%} .chip{font-size:12.5px;padding:9px 12px}}

/* лупа, що нишпорить */
.loupe{position:absolute; z-index:2;  /* під білими картками — щоб не перекреслювала текст (рішення Валерія 19.09) */ width:74px; height:74px; right:6%; top:8%;
  animation:sniff 9s ease-in-out infinite}
@keyframes sniff{
  0%{transform:translate(0,0) rotate(0)} 20%{transform:translate(-120px,60px) rotate(-14deg)}
  40%{transform:translate(-40px,150px) rotate(8deg)} 60%{transform:translate(-160px,120px) rotate(-6deg)}
  80%{transform:translate(-20px,40px) rotate(12deg)} 100%{transform:translate(0,0) rotate(0)}
}

/* ---------- смуга-біжучка ---------- */
.ticker{background:var(--navy); color:#fff; overflow:hidden; padding:14px 0; margin-top:22px}
.ticker-in{display:flex; gap:44px; width:max-content; animation:slide 34s linear infinite}
.ticker span{font-size:15px; font-weight:700; opacity:.92; white-space:nowrap; display:flex; gap:10px; align-items:center}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- секції ---------- */
section{padding:88px 0}
.sec-head{max-width:760px; margin:0 auto 52px; text-align:center}
.sec-head p{margin:18px 0 0}
.band-mint{background:var(--green-l)}
.band-sand{background:var(--sand)}
.band-navy{background:var(--navy); color:#fff}
.band-navy .lead{color:#c9d6e6}
.band-navy .eyebrow{background:rgba(255,255,255,.13); color:#a8e6bf}

/* картки-кроки */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
@media(max-width:880px){.steps{grid-template-columns:1fr}}
.step{background:#fff; border-radius:var(--r-xl); padding:38px 32px 34px; box-shadow:var(--shadow-s);
  position:relative; overflow:hidden; transition:transform .3s cubic-bezier(.2,.9,.3,1.3), box-shadow .3s}
.step:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.step .num{font-size:88px; font-weight:900; line-height:.8; color:#a8713a; letter-spacing:-.05em}
.step h3{margin:14px 0 10px}
.step p{margin:0; color:#4a5765; font-size:16.5px}
.step .ico{position:absolute; right:22px; top:26px; width:56px; height:56px}

/* цифри */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr); gap:34px}}
.stat b{display:block; font-size:clamp(38px,5vw,58px); font-weight:900; letter-spacing:-.03em; color:var(--navy)}
.band-navy .stat b{color:#fff}
.stat span{font-size:15.5px; color:var(--grey)}
.band-navy .stat span{color:#a9bbd0}

/* світлофор */
.lights{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:820px){.lights{grid-template-columns:1fr}}
.light{background:#fff; border-radius:var(--r-l); padding:30px 28px; box-shadow:var(--shadow-s)}
.light .bulb{width:46px; height:46px; border-radius:50%; margin-bottom:18px; position:relative}
.light .bulb::after{content:""; position:absolute; inset:-9px; border-radius:50%; opacity:.24;
  background:inherit; animation:pulse 2.6s ease-in-out infinite}
.light:nth-child(2) .bulb::after{animation-delay:.55s}
.light:nth-child(3) .bulb::after{animation-delay:1.1s}
@keyframes pulse{0%,100%{transform:scale(.82);opacity:.05} 50%{transform:scale(1.2);opacity:.3}}
.b-g{background:var(--green)} .b-a{background:var(--amber)} .b-r{background:var(--red)}
.bulb.ikon{display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1}
.bulb.ikon.b-g{background:#e8f3ec} .bulb.ikon.b-a{background:#fdf3e0} .bulb.ikon.b-r{background:#fbeceb}
.light h3{margin-bottom:8px}
.light p{margin:0; color:#4a5765; font-size:16.5px}

/* ---------- звіт ---------- */
.report{background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow); overflow:hidden; max-width:960px; margin:0 auto}
.rep-top{background:var(--navy); color:#fff; padding:28px 32px}
.rep-top .t{font-size:13px; letter-spacing:.13em; text-transform:uppercase; opacity:.66; font-weight:800}
.rep-top h3{margin:8px 0 0; color:#fff}
.rep-sum{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:24px 32px; border-bottom:1px solid var(--line)}
@media(max-width:700px){.rep-sum{grid-template-columns:1fr}}
.rep-sum div{background:var(--cream); border-radius:var(--r-m); padding:16px 18px}
.rep-sum b{display:block; font-size:30px; font-weight:900; color:var(--navy); line-height:1}
.rep-sum span{font-size:13.5px; color:var(--grey)}
.rows{list-style:none; margin:0; padding:0}
.row{border-bottom:1px solid var(--line)}
.row-head{display:grid; grid-template-columns:26px 1fr auto; gap:14px; align-items:center;
  padding:16px 32px; cursor:pointer; transition:background .2s}
.row-head:hover{background:#faf8f2}
@media(max-width:700px){.row-head{grid-template-columns:22px 1fr; padding:14px 20px}}
.row .name{font-weight:700; font-size:16px}
.row .meta{font-size:13.5px; color:var(--grey); margin-top:3px}
.row .price{text-align:right; font-weight:800; font-size:15.5px; white-space:nowrap}
.row .price small{display:block; font-weight:600; color:var(--grey); font-size:12.5px}
@media(max-width:700px){.row .price{grid-column:2; text-align:left; margin-top:6px}}
.row-body{display:none; padding:4px 32px 24px 72px; font-size:15px; color:#42505f}
@media(max-width:700px){.row-body{padding:4px 20px 20px 56px}}
.row.open .row-body{display:block; animation:unfold .32s ease}
@keyframes unfold{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.kv{display:grid; grid-template-columns:190px 1fr; gap:6px 18px; margin:0 0 14px}
@media(max-width:600px){.kv{grid-template-columns:1fr; gap:2px 0} .kv dt{margin-top:9px}}
.kv dt{color:var(--grey); font-size:14px}
.kv dd{margin:0; font-weight:600}
.verdict{border-radius:var(--r-m); padding:14px 18px; font-size:14.5px; line-height:1.5}
.v-g{background:var(--green-l); color:#2c6b41}
.v-a{background:#fdf3e0; color:#7a5813}
.v-r{background:#fbeceb; color:#8f3a2e}
.row.hidden-row{display:none}
.rep-more{padding:26px 32px 34px; text-align:center}
.chev{width:22px;height:22px;transition:transform .3s}
.row.open .chev{transform:rotate(180deg)}
.tag{display:inline-block; font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px; margin-left:8px; vertical-align:2px}
.tag-new{background:var(--green-l); color:var(--green-d)}
.tag-hot{background:#fbeceb; color:var(--red)}
.privacy{max-width:960px; margin:22px auto 0; font-size:14px; color:var(--grey); text-align:center}

/* ---------- песик: два варіанти ---------- */
.variants{display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:960px; margin:0 auto}
@media(max-width:820px){.variants{grid-template-columns:1fr}}
.variant{background:#fff; border-radius:var(--r-xl); padding:28px; box-shadow:var(--shadow-s); text-align:center}
.variant .badge{display:inline-block; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; margin-bottom:14px}
.badge-a{background:var(--green-l); color:var(--green-d)}
.badge-b{background:var(--sand); color:#7a5813}
.variant .box{height:330px; display:flex; align-items:flex-end; justify-content:center; margin:8px 0 16px}
.variant p{font-size:15px; color:#4a5765; margin:0}
.vA img{width:210px; animation:breathe 4.6s ease-in-out infinite; transform-origin:50% 92%;
  filter:drop-shadow(0 14px 16px rgba(12,36,70,.16))}
.vB svg{width:250px; height:auto; filter:drop-shadow(0 14px 16px rgba(12,36,70,.16))}
/* рухомі частини перемальованого песика */
#earL{transform-origin:118px 118px; animation:earL 3.4s ease-in-out infinite}
#earR{transform-origin:186px 118px; animation:earR 3.4s ease-in-out infinite .3s}
@keyframes earL{0%,72%,100%{transform:rotate(0)} 80%{transform:rotate(-11deg)} 88%{transform:rotate(4deg)}}
@keyframes earR{0%,72%,100%{transform:rotate(0)} 80%{transform:rotate(10deg)} 88%{transform:rotate(-4deg)}}
#tail{transform-origin:288px 344px; animation:wag 1.15s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(-13deg)} 50%{transform:rotate(13deg)}}
#lids rect{transform-origin:center; animation:blink 5.2s ease-in-out infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(0)} 96%{transform:scaleY(1)}}
#chest{transform-origin:150px 250px; animation:beat 3s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)} 50%{transform:scale(1.07)}}
#vbody{transform-origin:50% 95%; animation:breathe 4.6s ease-in-out infinite}

/* ---------- тарифи ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:#fff; border-radius:var(--r-xl); padding:34px 30px; box-shadow:var(--shadow-s);
  display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.2,.9,.3,1.3), box-shadow .3s}
.plan:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.plan.hi{box-shadow:0 0 0 3px var(--green), var(--shadow); position:relative}
.plan.hi::before{content:"оптимальний"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--green); color:#fff; font-size:12.5px; font-weight:800; padding:6px 16px; border-radius:999px; white-space:nowrap}
.plan .pn{font-size:15px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--grey)}
.plan .pp{font-size:46px; font-weight:900; letter-spacing:-.03em; margin:12px 0 2px; color:var(--navy)}
.plan .pp small{font-size:17px; font-weight:700; color:var(--grey)}
.plan ul{list-style:none; padding:0; margin:22px 0 26px; font-size:16px}
.plan li{display:flex; gap:11px; align-items:flex-start; padding:7px 0; color:#42505f}
.plan li svg{flex:0 0 auto; margin-top:4px}
.plan .btn{justify-content:center; margin-top:auto}

/* ---------- фінал ---------- */
.final{background:var(--navy); color:#fff; border-radius:var(--r-xl); padding:56px 48px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; overflow:hidden; position:relative}
@media(max-width:880px){.final{grid-template-columns:1fr; padding:40px 28px; text-align:center}}
.final h2{color:#fff}
.final p{color:#c1d0e2; margin:18px 0 30px}
.final .pic{display:flex; justify-content:center}
.final .pic img{width:230px; animation:breathe 4.6s ease-in-out infinite; transform-origin:50% 92%}
.final .ring{position:absolute; width:420px; height:420px; border-radius:50%;
  border:2px dashed rgba(255,255,255,.14); right:-90px; top:-120px; animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

footer{padding:48px 0 60px; font-size:15px; color:var(--grey)}
.f-grid{display:flex; gap:26px; align-items:center; flex-wrap:wrap; justify-content:space-between}
footer .logo svg{height:26px}

/* поява при прокрутці */
html:not(.ruh) .rise{opacity:1 !important; transform:none !important}
.rise{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1)}
.rise.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .rise{opacity:1; transform:none}
}
.rep-hidden{display:none}.rep-open .rep-hidden{display:block}
/* ---------- приклад кабінету на головній ---------- */
.kab-frame{background:#fff;border-radius:22px;box-shadow:var(--shadow);overflow:hidden;max-width:1000px;margin:0 auto;border:1px solid var(--line)}
.kab-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#f3efe4;border-bottom:1px solid var(--line)}
.kab-bar span{width:11px;height:11px;border-radius:50%;background:#dcd3c0}
.kab-bar span:nth-child(1){background:#e98b7a}.kab-bar span:nth-child(2){background:#e9c46a}.kab-bar span:nth-child(3){background:#8fcf9e}
.kab-bar i{font-style:normal;font-size:12.5px;color:var(--grey);margin-left:10px;background:#fff;border-radius:8px;padding:3px 12px;flex:1;max-width:340px}
.kab{background:var(--cream);text-align:left;font-size:14px;line-height:1.45}
.kab-hdr{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);background:rgba(251,247,236,.9)}
.kab-logo{font-weight:900;letter-spacing:.04em;color:var(--navy);font-size:15px}
.kab-logo span{color:var(--green)}
.kab-who{font-size:12.5px;color:var(--grey);font-weight:600}
.kab-menu{display:flex;gap:3px;padding:6px 16px;background:rgba(255,255,255,.55);border-bottom:1px solid var(--line);overflow:hidden}
@media(max-width:640px){.kab-menu{flex-wrap:wrap;overflow:visible;row-gap:2px;padding:7px 12px}
  .kab-menu a{font-size:11.5px;padding:4px 8px}}
.kab-menu a{font-size:12.5px;font-weight:700;color:var(--navy);opacity:.8;padding:5px 10px;border-radius:999px;white-space:nowrap}
.kab-menu a.on{background:var(--navy);color:#fff;opacity:1}
.kab-body{padding:20px 22px 18px}
.kab-h1{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin:8px 0 12px;line-height:1.1}
.kab-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 16px}
.kab-nums div{background:#fff;border-radius:16px;box-shadow:var(--shadow-s);text-align:center;padding:10px 6px 8px}
.kab-nums b{display:block;font-size:24px;font-weight:900;color:var(--navy);line-height:1.1}
.kab-nums span{font-size:11.5px;color:var(--grey);font-weight:600}
.kab-t{background:#fff;border-radius:18px;box-shadow:var(--shadow-s);padding:14px 16px 14px 14px;margin-bottom:10px;border-left:6px solid var(--line)}
.kab-t.go{border-left-color:var(--green)}.kab-t.mid{border-left-color:var(--amber)}.kab-t.no{border-left-color:var(--red)}
.kab-t-top{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:start}
.kab-t-name{font-weight:800;color:var(--navy);font-size:14.5px;line-height:1.3;margin:0}
.kab-t-sum{font-weight:900;color:var(--navy);white-space:nowrap;font-size:14px}
.kab-t-meta{margin:5px 0 0;font-size:12.5px;color:var(--grey)}
.kab-t-meta b{color:var(--ink)}
.kab-tag{display:inline-block;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:800;vertical-align:2px;margin-left:6px}
.kab-tag.hot{background:#fbeceb;color:#9c3a2b}.kab-tag.star{background:var(--sand);color:#7a5813}
.kab-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
@media(max-width:640px){.zvit-stat,.zvit-stat tbody,.zvit-stat tr{display:block;width:100%}
  .zvit-stat td{display:block!important;width:100%!important;margin-bottom:6px}}
.kab-chip{cursor:default;display:inline-block;background:#fff;color:var(--navy);border:2px solid #dfe6ee;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700}
.kab-chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
#kabinet .light h3{font-size:19px}
#kabinet .light p{font-size:15.5px}
@media(max-width:700px){
  .kab-nums{grid-template-columns:repeat(2,1fr)}
  .kab-t-top{grid-template-columns:1fr}
  .kab-body{padding:14px 12px}
  .kab-h1{font-size:21px}
  .kab-hdr{padding:10px 14px}
  .kab-who{display:none}
}

/* ---------- додано для внутрішніх сторінок тестового сайту ---------- */
.logo svg{display:block}
.page-hero{padding:56px 0 30px; background:linear-gradient(180deg,#fff 0%,var(--cream) 100%)}
.page-hero h1{font-size:clamp(30px,4.6vw,52px); max-width:26ch}
.page-hero .lead{margin-top:16px; max-width:60ch}
.crumbs{font-size:14px; font-weight:700; color:var(--grey); margin-bottom:14px}
.crumbs a{color:var(--green-d); text-decoration:none}
.doc{max-width:860px; margin:0 auto; padding:10px 0 70px}
.doc h2{font-size:clamp(24px,3vw,36px); margin:52px 0 14px}
.doc-sec{padding:0 0 10px}
.doc > h2:first-child,.doc > h3:first-child,.doc > .copy:first-child,.doc > p:first-child{margin-top:8px}
.doc h3{font-size:clamp(19px,2.2vw,24px); margin:34px 0 10px}
.doc h4{font-size:22px; margin:34px 0 8px; font-weight:800}
.doc p{margin:14px 0}
.doc ul,.doc ol{margin:12px 0 12px 22px; padding:0}
.doc li{margin:7px 0}
.doc a{color:var(--green-d)}
.doc hr{border:0; border-top:1px solid var(--line); margin:46px 0}
.doc table{border-collapse:collapse; width:100%; margin:20px 0; font-size:16px; background:#fff;
  border-radius:var(--r-m); overflow:hidden; box-shadow:var(--shadow-s)}
.doc th,.doc td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.doc th{background:var(--navy); color:#fff; font-weight:800; font-size:15px}
.doc tr:last-child td{border-bottom:0}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.copy{background:#fff; border:1px solid var(--line); border-radius:var(--r-m);
  padding:22px 26px; margin:18px 0; box-shadow:var(--shadow-s)}
.copy > :first-child{margin-top:0}
.copy > :last-child{margin-bottom:0}
.copy h1,.copy h2{margin:0 0 10px}
.copy h2{font-size:clamp(23px,2.9vw,33px)}
.note{background:var(--green-l); border:1px solid #cfe5d7; border-radius:var(--r-m);
  padding:18px 22px; margin:18px 0; font-size:16.5px}
.warn{background:#fdf3e7; border:1px solid #f0dcc0; border-radius:var(--r-m);
  padding:18px 22px; margin:18px 0; font-size:16.5px}
.st{display:inline-block; font-size:13px; font-weight:800; padding:3px 11px; border-radius:999px;
  white-space:nowrap; vertical-align:2px}
.st-ok{background:var(--green-l); color:var(--green-d)}
.st-soon{background:#fdf0dd; color:#8a5a15}
.st-plan{background:#eef1f6; color:#43526b}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:24px 0}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:20px 22px;
  box-shadow:var(--shadow-s)}
.card b{display:block; margin-bottom:6px}
.f-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; text-align:left;
  max-width:1180px; margin:0 auto; padding:0 24px}
@media(max-width:860px){.f-cols{grid-template-columns:repeat(2,1fr); gap:22px}}
@media(max-width:460px){.f-cols{grid-template-columns:1fr}}
.f-logo{max-width:1180px;margin:0 auto 26px;padding:0 24px}
.f-cols h4{margin:0 0 10px; font-size:14px; letter-spacing:.1em; text-transform:uppercase; opacity:.6}
.f-cols a{display:block; padding:3px 0; text-decoration:none; opacity:.85; font-size:15.5px}
.f-cols a:hover{opacity:1; text-decoration:underline}
.f-legal{max-width:1180px; margin:26px auto 0; padding:22px 24px 0; border-top:1px solid var(--line);
  font-size:13.5px; opacity:.72; line-height:1.5}
.f-legal p{margin:7px 0}
.testbar{position:relative; z-index:99; background:#7a2d2d; color:#fff; font-weight:800;
  font-size:14px; text-align:center; padding:7px 14px}
.testbar a{color:#ffd9a8}
.doc .btn-p, .copy .btn-p{color:#fff}
.doc .btn-s, .copy .btn-s{color:var(--navy)}
.doc .btn, .copy .btn{text-decoration:none}
.ear-wrap{position:relative;display:inline-block}
.ear-wrap>.txt{position:relative;z-index:2}
.ear-wrap>.ears{position:absolute;left:52%;transform:translateX(-50%);z-index:1;pointer-events:none;width:34px;bottom:calc(100% + 5px)}
.hdr-links .ear-wrap>.ears,.nav-links .ear-wrap>.ears{width:34px;left:52%;bottom:calc(100% + 5px)}
/* Де темної таблетки немає, вуха опущені ближче до слова (вказівка Валерія 21.09.2026) */
.hdr-links a:not(.on) .ear-wrap>.ears,.nav-links a:not(.on) .ear-wrap>.ears{bottom:calc(100% - 6px)}
.tk-wnd{position:fixed;right:22px;bottom:22px;width:330px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);box-shadow:var(--shadow);overflow:hidden;z-index:9;display:none}
.tk-wnd.open{display:block}
.tk-top{background:var(--navy);color:#fff;padding:11px 14px;display:flex;align-items:center;gap:8px;font-size:15px}
.tk-top img{width:26px;height:26px;flex:0 0 26px;border-radius:50%;object-fit:cover;display:block;background:#fff}
.tk-top small{margin-left:auto;opacity:.7;font-size:12px}
.tk-x{cursor:pointer;opacity:.7;font-size:17px;line-height:1;padding:0 2px}
.tk-body{padding:13px 14px;font-size:14px;color:var(--ink);max-height:340px;overflow:auto}
.tk-body p{margin:0 0 8px;line-height:1.5}
.tk-robot{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);
  background:var(--mint);border-radius:999px;padding:3px 10px;margin-bottom:8px}
.tk-me{background:var(--sand);border-radius:12px;padding:8px 11px;margin:0 0 10px}
.tk-in{display:flex;gap:7px;border-top:1px solid var(--line-2);padding:9px 10px}
.tk-in input{flex:1;border:1px solid var(--line-2);border-radius:999px;padding:8px 13px;font:inherit;font-size:14px;outline:0}
.tk-in button{width:34px;height:34px;border:0;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer}
.tk-hum{font:inherit;font-size:13.5px;border:1px solid var(--green);background:#fff;border-radius:999px;
  padding:6px 13px;color:var(--green-d);font-weight:600;cursor:pointer;margin-top:4px}
.tk-fab{position:fixed;right:22px;bottom:22px;width:62px;height:62px;border-radius:50%;padding:0;
  overflow:hidden;background:#fff;border:2px solid var(--navy);box-shadow:var(--shadow);z-index:9;cursor:pointer}
.tk-fab img{width:100%;height:100%;display:block;object-fit:cover}
@media(max-width:860px){.tk-wnd{right:10px;left:10px;width:auto;bottom:10px}
  .tk-fab{right:8px;bottom:10px;width:46px;height:46px}
  body::after{content:"";display:block;height:58px}}
.hero h1{font-size:clamp(32px,4.6vw,58px)}
footer .f-logo .logo svg{height:30px}

/* знімки справжнього продукту (22.09.2026) */
.shot{margin:0 0 30px}
.shot img{width:100%; height:auto; border-radius:14px; border:1px solid var(--line); box-shadow:0 10px 28px rgba(12,36,70,.10); background:#fff}
.shot figcaption{font-size:15px; line-height:1.5; margin-top:10px; color:var(--grey)}
.shot-pair{display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:26px; align-items:start; margin:0 0 30px}
.shot-pair .shot{margin:0}
.shot-src{font-size:15px; color:var(--grey); background:#fff; border:1px dashed var(--line); border-radius:12px; padding:12px 16px; margin:0 0 26px}
@media (max-width:760px){.shot-pair{grid-template-columns:1fr}.shot-pair .tel{max-width:260px; margin:0 auto}}

@media(max-width:420px){.st{white-space:normal}}

/* 05.10.2026: підказка гортати таблицю тарифів на телефоні */
.tbl-hint{display:none;font-size:14px;color:#5b6472;margin:0 0 8px}
@media(max-width:860px){.tbl-hint{display:block}}