/* Kopiyka.org — основний стиль. Темна тема за замовчуванням, світла через html[data-theme="light"] */
:root{
  --bg-base:#061a16;
  --bg-image:radial-gradient(at 0% 10%, #be123c 0, transparent 40%),radial-gradient(at 40% 55%, #047857 0, #061a16 50%);
  --text:#cbd5e1; --text-strong:#f1f5f9; --muted:#94a3b8; --muted2:#64748b;
  --heading-from:#ffffff; --heading-to:#94a3b8;
  --line:#1e293b; --line-strong:#334155; --line-soft:#27364a;
  --header-bg:rgba(15,23,42,.55); --menu-bg:rgba(2,6,23,.85);
  --dropdown-from:rgba(30,41,59,.92); --dropdown-to:rgba(2,6,23,.94);
  --card-from:#334155; --card-to:rgba(15,23,42,.85); --card-hover-from:#475569;
  --card-outline:#1e293b; --card-shadow:0 10px 25px rgba(0,0,0,.4);
  --accent:#10b981; --accent-light:#34d399; --accent-deep:#022c22; --accent-hover:#065f46;
  --rose:#fda4af; --rose-strong:#fecdd3;
  --input-bg:#1e293b; --input-border:#475569; --input-focus:#64748b;
  --btn-text:#e2e8f0; --price:#ffffff;
  --footer-from:#1f2937; --footer-to:#030712;
  --logo-chip-from:#ffffff; --logo-chip-to:#94a3b8;
  --scroll-bg:#111827; --scroll-thumb:#374151;
  --badge-from:#334155; --badge-to:#7f1d1d;
}
html[data-theme="light"]{
  --bg-base:#f2f4f7;
  --bg-image:radial-gradient(at 0% 10%, rgba(190,18,60,.07) 0, transparent 40%),radial-gradient(at 40% 55%, rgba(4,120,87,.08) 0, #f2f4f7 55%);
  --text:#1e293b; --text-strong:#0b1220; --muted:#475569; --muted2:#64748b;
  --heading-from:#0b1220; --heading-to:#334155;
  --line:#cbd5e1; --line-strong:#b3c0cf; --line-soft:#dbe2ea;
  --header-bg:rgba(255,255,255,.85); --menu-bg:rgba(255,255,255,.96);
  --dropdown-from:rgba(255,255,255,.98); --dropdown-to:rgba(241,245,249,.98);
  --card-from:#ffffff; --card-to:#eef2f6; --card-hover-from:#ffffff;
  --card-outline:#c4cfdb; --card-shadow:0 10px 25px rgba(15,23,42,.14);
  --accent:#047857; --accent-light:#065f46; --accent-deep:#064e3b; --accent-hover:#059669;
  --rose:#be123c; --rose-strong:#9f1239;
  --input-bg:#ffffff; --input-border:#94a3b8; --input-focus:#64748b;
  --btn-text:#ffffff; --price:#0b1220;
  --footer-from:#e2e8ee; --footer-to:#c9d3dd;
  --logo-chip-from:#ffffff; --logo-chip-to:#dde4ec;
  --scroll-bg:#e2e8f0; --scroll-thumb:#94a3b8;
  --badge-from:#e11d48; --badge-to:#9f1239;
}
*,*::before,*::after{box-sizing:border-box;border:0 solid;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100vh;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;line-height:1.5;color:var(--text);background-color:var(--bg-base);background-image:var(--bg-image);background-attachment:fixed;overflow-x:hidden}
img{max-width:100%;height:auto;display:inline-block}
h1,h2,h3,h4,h5,h6{font-weight:600;text-wrap:balance}
p{margin-block:1.5rem}
a{color:inherit;text-decoration:none}
main a:not(.btn):not(.card-link):not(.link-plain){color:var(--text-strong);border-bottom:1px solid currentColor}
main a:not(.btn):not(.card-link):not(.link-plain):hover{border-bottom-color:transparent}
ul,ol{padding-left:1.25rem}
::selection{background:rgba(16,185,129,.35)}
*::-webkit-scrollbar{width:.75rem;background:var(--scroll-bg)}
*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:.375rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:96rem){html{font-size:19.2px}}

/* Розмітка */
.container{width:100%;max-width:80rem;margin-inline:auto;padding-inline:1.25rem;border-inline:1px solid var(--line)}
@media (min-width:96rem){.container{max-width:1536px}}
@media (max-width:640px){.container{padding-inline:1rem}}
.section{padding-block:3.5rem}
@media (min-width:1024px){.section{padding-block:5.5rem}}
.section+.section{border-top:1px solid var(--line)}
.eyebrow{margin-bottom:1.25rem;color:var(--rose);text-align:center;text-transform:uppercase;font-weight:600;font-size:1rem}
.section-title{max-width:64rem;margin-inline:auto;padding-bottom:.15em;font-size:clamp(1.75rem,4.5vw,3rem);line-height:1.15;text-align:center;background:linear-gradient(to bottom,var(--heading-from),var(--heading-to));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:46rem;margin:1.5rem auto 0;font-size:1.25rem;text-align:center}
.left .eyebrow,.left .section-title,.left .lead{text-align:left;margin-inline:0}

/* Шапка */
.topbar{position:relative;z-index:30;font-size:.875rem;background:transparent}
.topbar .container{display:flex;align-items:stretch;height:2.75rem;border-bottom:0}
.topbar a,.topbar button{display:flex;align-items:center;gap:.375rem;padding-inline:.7rem;color:var(--muted);white-space:nowrap;background:none;cursor:pointer;font:inherit}
.topbar a:hover,.topbar button:hover{color:var(--text-strong)}
.topbar svg{width:1.15rem;height:1.15rem;stroke:var(--muted2);fill:none;stroke-width:1.5}
.topbar .grow{flex:1}
.topbar .pay-accent{color:var(--accent-light);font-weight:600}
.topbar .gpon-link{display:none;border-left:1px solid var(--line-strong);margin-left:.5rem;padding-left:1.25rem;color:var(--text)}
@media (min-width:1180px){.topbar .gpon-link{display:flex}}
.topbar .hide-sm{display:none}
@media (min-width:640px){.topbar .hide-sm{display:flex}}
.topbar .hide-md{display:none}
@media (min-width:830px){.topbar .hide-md{display:flex}}
.lang-switch{font-weight:600;letter-spacing:.02em}
header.site{position:relative;z-index:20;border-block:1px solid var(--line-strong);background:var(--header-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
header.site .container{display:flex;align-items:center;height:5rem;gap:.5rem}
.logo{display:flex;align-items:center;height:100%}
.logo img{height:5.5rem;width:auto;animation:logospin 1.5s ease-out forwards}
@keyframes logospin{from{transform:rotate(0);opacity:0}to{transform:rotate(360deg);opacity:.95}}
.header-phones{display:none;flex-direction:column;align-items:flex-start;gap:.05rem;margin-left:auto;white-space:nowrap;line-height:1.25}
@media (min-width:1280px){.header-phones{display:flex}}
.header-phones a{display:flex;align-items:center;gap:.4rem;color:var(--text)}
.header-phones a:hover{color:var(--text-strong)}
.header-phones a.small{font-size:.82rem;color:var(--muted);padding-left:1.6rem}
.header-phones svg{width:1.2rem;height:1.2rem;stroke:var(--muted2);fill:none;stroke-width:1.5}
/* Навігація */
nav.main{margin-left:auto;height:100%}
nav.main>ul{display:none;list-style:none;padding:0;height:100%}
@media (min-width:1024px){nav.main>ul{display:flex}}
nav.main>ul>li{position:relative;display:flex}
nav.main>ul>li>a{display:flex;align-items:center;padding-inline:1.6rem;height:100%;transition:background .4s,color .3s}
nav.main>ul>li>a:hover{background:rgba(100,116,139,.25);color:var(--text-strong)}
nav.main>ul>li::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s}
nav.main>ul>li:hover::after{transform:scaleX(1)}
nav.main .dropdown{position:absolute;left:0;top:100%;min-width:15rem;padding:1rem;list-style:none;border:1px solid var(--line-strong);border-radius:.75rem;background:linear-gradient(to bottom,var(--dropdown-from),var(--dropdown-to));backdrop-filter:blur(6px);font-size:.875rem;opacity:0;transform:scaleY(0);transform-origin:top;transition:opacity .3s,transform .3s;box-shadow:var(--card-shadow)}
nav.main li:hover>.dropdown,nav.main li:focus-within>.dropdown{opacity:1;transform:scaleY(1)}
nav.main .dropdown.cols-3{columns:3;min-width:44rem}
nav.main .dropdown.cols-2{columns:2;min-width:30rem}
nav.main .dropdown li{break-inside:avoid;min-width:13rem}
nav.main .dropdown a{display:block;max-width:16rem;border-radius:.375rem;padding:.55rem .8rem .65rem;line-height:1.35;transition:background .35s,color .3s}
nav.main .dropdown a:hover{background:linear-gradient(to right,rgba(148,163,184,.35),rgba(71,85,105,.35));color:var(--text-strong)}
nav.main .dropdown .group-label{display:block;padding:.6rem .8rem .3rem;color:var(--muted);text-transform:uppercase;font-weight:600;font-size:.75rem}
nav.main .cta{align-items:center;padding-left:.9rem}
nav.main .cta::after{display:none}
nav.main .cta>a{height:auto;border-radius:.5rem;padding:.5rem 1rem .6rem;background:linear-gradient(to bottom,var(--accent),var(--accent-deep));color:#fff;font-weight:600}
nav.main .cta>a:hover{background:linear-gradient(to bottom,var(--accent),var(--accent-hover));color:#fff}
/* бургер */
.burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;width:2.75rem;height:2.75rem;margin-left:auto;background:none;cursor:pointer}
@media (min-width:1024px){.burger{display:none}}
.burger span{display:block;width:60%;height:2px;background:var(--muted2);transition:transform .3s,opacity .3s}
/* мобільне меню */
.mobile-menu{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;background:var(--menu-bg);backdrop-filter:blur(10px);overflow-y:auto;padding:1rem 1.25rem 3rem}
.mobile-menu.open{display:flex}
.mobile-menu .mm-head{display:flex;align-items:center;justify-content:space-between;padding-block:.25rem}
.mobile-menu .mm-phone{display:flex;align-items:center;gap:.4rem;font-weight:600;color:var(--text-strong)}
.mobile-menu .mm-phone svg{width:1.2rem;height:1.2rem;stroke:var(--muted2);fill:none;stroke-width:1.5}
.mobile-menu ul{list-style:none;padding:0}
.mobile-menu .mm-group>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.9rem .25rem;background:none;color:var(--text-strong);font:inherit;font-size:1.05rem;font-weight:600;cursor:pointer;border-bottom:1px solid var(--line)}
.mobile-menu .mm-group>button svg{width:1.1rem;height:1.1rem;stroke:var(--muted);transition:transform .3s}
.mobile-menu .mm-group.open>button svg{transform:rotate(180deg)}
.mobile-menu .mm-sub{display:none;padding:.25rem 0 .5rem}
.mobile-menu .mm-group.open .mm-sub{display:block}
.mobile-menu .mm-sub a{display:block;padding:.6rem .75rem;border-radius:.375rem;color:var(--text)}
.mobile-menu .mm-sub a:active{background:rgba(100,116,139,.25)}
.mobile-menu .mm-cta{display:block;margin-top:1.25rem;text-align:center}
.close-x{display:flex;flex-direction:column;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.375rem;background:none;cursor:pointer}
.close-x span{display:block;width:60%;height:2px;background:var(--muted2)}
.close-x span:first-child{transform:translateY(1px) rotate(45deg)}
.close-x span:last-child{transform:translateY(-1px) rotate(-45deg)}

/* Кнопки */
.btn{position:relative;display:inline-block;border-radius:.5rem;padding:.55rem 1.1rem .65rem;background:linear-gradient(to bottom,var(--accent),var(--accent-deep));color:var(--btn-text);cursor:pointer;font:inherit;transition:all .4s;isolation:isolate}
.btn:hover{background:linear-gradient(to bottom,var(--accent),var(--accent-hover));color:#fff}
.btn.glow::before{content:"";position:absolute;inset:-.25rem;border-radius:1rem;background:conic-gradient(from var(--a1,0deg),transparent 0%,transparent 65%,#4f8eff 78%,#a78bfa 85%,#4f8eff 92%,transparent 100%);filter:blur(.5rem);z-index:-2;opacity:0;transition:opacity .3s;animation:spin1 2.4s linear infinite}
.btn.glow::after{content:"";position:absolute;inset:0;border-radius:.6rem;background:var(--bg-base);z-index:-1;opacity:0}
.btn.glow:hover::before{opacity:1}
@property --a1{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin1{to{--a1:360deg}}
.btn-block{width:100%;text-align:center}
.link-more{display:inline-flex;align-items:center;gap:.5rem;margin-left:1.25rem;color:var(--accent-light);font-weight:600;border-bottom:0}
.link-more:hover{color:var(--text-strong)}
.link-more svg{width:1.2rem;height:1.2rem;stroke:var(--accent-light);fill:none;stroke-width:1.5;transition:margin-left .3s}
.link-more:hover svg{margin-left:.35rem}

/* Сітки */
.grid{display:grid;gap:1.5rem;margin-top:3.5rem}
.grid.tight{margin-top:1.5rem}
@media (min-width:640px){.grid-2sm{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .grid-5{grid-template-columns:repeat(5,1fr)}
}

/* Картки */
.card{position:relative;isolation:isolate;max-width:24rem;width:100%;margin-inline:auto;border-radius:1rem;outline:1px solid var(--card-outline);outline-offset:-1px;padding:1.5rem 1.5rem 1.75rem;background:linear-gradient(to bottom,var(--card-from),var(--card-to));transition:all .45s}
@media (min-width:1024px){.card{max-width:none;margin-inline:0}}
.card.hoverable:hover{transform:translateY(-.5rem);box-shadow:var(--card-shadow);background:linear-gradient(to bottom,var(--card-hover-from),var(--card-to))}
.card.flat{outline:0;background:none;padding:1rem .5rem}
.card.soft{outline:0}
.card h3{margin-bottom:.6rem;font-size:1.125rem;color:var(--text-strong)}
.card .icon{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;margin-bottom:1rem;border-radius:.5rem;background:linear-gradient(to bottom,#047857,var(--accent))}
.card .icon svg{width:1.4rem;height:1.4rem;stroke:#e2e8f0;fill:none;stroke-width:1.5}
.card p{margin-block:.75rem 0}
.card ul{list-style:none;padding:0;margin-top:.5rem}
.card ul li{display:flex;gap:.5rem;padding-block:.375rem}
.card ul li::before{content:"";flex:0 0 1.25rem;height:1.25rem;margin-top:.125rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="%2310b981"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>') no-repeat}
/* тарифна картка */
.plan .plan-name{color:var(--rose-strong);font-size:1.125rem;font-weight:600;margin-bottom:.6rem}
.plan .price{display:block;margin-bottom:.6rem;font-size:2.25rem;font-weight:600;color:var(--price)}
.plan .price small{margin-left:.35rem;font-size:1.25rem;font-weight:400;color:var(--muted)}
.plan .price sup{font-size:1.05rem;color:var(--muted);text-decoration:line-through;font-weight:400}
.plan .badge{position:absolute;right:1rem;top:-1rem;border-radius:.375rem;padding:.25rem .75rem;font-size:.875rem;color:#fff;background:linear-gradient(to bottom,var(--badge-from),var(--badge-to))}
.plan .link-more{margin:1rem 0 0 1rem;font-size:.875rem}
/* метрики */
.metric h3{font-size:3rem;font-weight:400;color:var(--text-strong)}
/* сервісні фото-картки */
.photo-card{position:relative;overflow:hidden;border-radius:1rem;outline:1px solid var(--card-outline);outline-offset:-1px;background:linear-gradient(to bottom,var(--card-from),var(--card-to));transition:transform .45s,box-shadow .45s;max-width:none;margin-inline:0;padding:0;display:block;border-bottom:0}
.photo-card:hover{transform:translateY(-.5rem);box-shadow:var(--card-shadow)}
.photo-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.photo-card:hover img{transform:scale(1.08)}
.photo-card .pc-title{position:absolute;left:0;bottom:0;width:100%;padding:4rem 1.5rem 1.5rem;color:#fff;font-size:1.125rem;font-weight:600;line-height:1.35;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.7) 55%,rgba(0,0,0,.92))}
.photo-card .pc-title svg{width:1.2rem;height:1.2rem;margin-left:.4rem;margin-bottom:-.2rem;stroke:#34d399;fill:none;stroke-width:1.5;transition:margin-left .3s}
.photo-card:hover .pc-title svg{margin-left:.7rem}
@media (min-width:1024px){.photo-card.big{grid-row:span 2}.photo-card:not(.big){max-height:15rem}}
/* стрічка лого на головній */
.logo-marquee{overflow:hidden;margin-top:2.5rem;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.logo-marquee .track{display:flex;width:max-content;animation:kp-marquee 45s linear infinite}
.logo-marquee:hover .track{animation-play-state:paused}
.logo-marquee .logo-chip{width:13rem;flex:0 0 auto;margin:0 .75rem 0 0}
@keyframes kp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logo-marquee .track{animation:none;flex-wrap:wrap}}
/* лого клієнтів */
.logo-chip{display:flex;align-items:center;justify-content:center;height:9rem;max-width:20rem;width:100%;margin-inline:auto;border-radius:1rem;padding:1rem 1.5rem;background:radial-gradient(circle,var(--logo-chip-from),var(--logo-chip-to))}
.logo-chip img{max-height:7rem;width:auto;max-width:100%;object-fit:contain;transition:transform .3s}
.logo-chip:hover img{transform:scale(1.08)}
/* FAQ акордеон */
.faq{max-width:46rem;margin:2.5rem auto 0}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{position:relative;padding:1rem 2rem 1rem 0;font-size:1.125rem;font-weight:600;color:var(--text-strong);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:0;top:50%;background:var(--muted);transition:transform .3s}
.faq summary::before{width:1rem;height:2px;transform:translateY(-50%)}
.faq summary::after{width:2px;height:1rem;right:.44rem;transform:translateY(-50%)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(90deg)}
.faq .faq-body{padding:0 0 1.25rem}
.faq .faq-body p{margin-block:.5rem}
/* відгуки-слайдер */
.slider-wrap{position:relative;overflow:hidden;margin-top:2.5rem}
.slider{display:flex;transition:transform .5s}
.slide{flex:0 0 100%;padding-inline:.25rem}
.testimonial{position:relative;max-width:44rem;margin-inline:auto}
.testimonial::after{content:"\201D";position:absolute;right:1.5rem;bottom:-2rem;font-size:6rem;color:var(--line-strong)}
.testimonial .who{margin-top:1rem;color:var(--muted);font-weight:600;font-size:1rem}
.slider-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(100,116,139,.25);cursor:pointer}
.slider-nav:hover{background:rgba(100,116,139,.5)}
.slider-nav svg{width:1.25rem;height:1.25rem;stroke:var(--text);fill:none;stroke-width:2}
.slider-nav.prev{left:0}.slider-nav.next{right:0}

/* Таби і перемикачі */
.tabs-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:1rem;font-size:.875rem}
.seg{position:relative;display:flex;flex-direction:column;gap:.25rem;width:fit-content;border:1px solid var(--input-border);border-radius:.5rem;padding:.25rem;color:var(--muted)}
@media (min-width:640px){.seg{flex-direction:row}}
.seg button{position:relative;z-index:2;padding:.5rem 1rem;background:none;color:inherit;font:inherit;cursor:pointer;border-radius:.375rem}
.seg button.active{color:var(--text-strong);background:linear-gradient(to right,var(--card-from),var(--card-hover-from))}
.settle-pick{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;border:1px solid var(--input-border);border-radius:.5rem;padding:.25rem;color:var(--muted)}
.settle-pick .lbl{padding-inline:.75rem;text-align:center}
.settle-pick button{display:flex;align-items:center;gap:.25rem;margin-block:.25rem;border-radius:.375rem;padding:.5rem 1rem;background:linear-gradient(to right,var(--card-from),var(--card-hover-from));color:var(--text-strong);font:inherit;cursor:pointer}
.settle-pick svg{width:1.2rem;height:1.2rem;stroke:var(--muted);fill:none;stroke-width:1.5}
.notice{border:1px solid var(--input-border);border-radius:.5rem;margin-top:1.5rem;padding:1rem 1.5rem;color:var(--rose);text-align:center}
.notice a{font-weight:600}

/* Форми */
label{font-weight:600}
.field{position:relative}
.field label{display:block;margin-bottom:.5rem}
input:not([type=radio]):not([type=checkbox]),select,textarea{width:100%;border:1px solid var(--input-border);border-radius:.375rem;padding:.375rem .5rem .5rem;background:var(--input-bg);color:var(--text-strong);font:inherit}
input::placeholder,textarea::placeholder{color:var(--muted2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 .5rem rgba(79,142,255,.6)}
input[type=radio],input[type=checkbox]{appearance:none;position:relative;width:1rem;height:1rem;border:1px solid var(--muted2);background:transparent;cursor:pointer;flex-shrink:0}
input[type=radio]{border-radius:50%}
input[type=checkbox]{border-radius:.2rem}
input[type=radio]:checked::after{content:"";position:absolute;top:50%;left:50%;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent-light);transform:translate(-50%,-50%)}
input[type=checkbox]:checked::after{content:"";position:absolute;top:0;left:.25rem;width:.375rem;height:.625rem;border:2px solid var(--accent-light);border-top:0;border-left:0;transform:rotate(45deg)}
textarea{min-height:6rem}
.field .err{display:none;padding-top:.375rem;color:var(--rose);font-weight:400;font-size:.875rem}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select{border-color:#f87171}
.field.phone::before{content:"+38";position:absolute;top:2.05rem;left:0;display:flex;align-items:center;height:2.5rem;padding-inline:.4rem;border:1px solid var(--input-border);border-radius:.375rem 0 0 .375rem;color:var(--muted)}
.field.phone input{padding-left:3rem}
.form-grid{display:grid;gap:1.5rem;margin-top:2.5rem}
@media (min-width:1024px){.form-grid{grid-template-columns:repeat(2,1fr)}}
.radio-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.25rem}
.radio-row label{font-weight:400;cursor:pointer}
.radio-row .rr-title{width:100%;font-weight:600}
@media (min-width:640px){.radio-row .rr-title{width:auto}}
.radio-opt{display:flex;align-items:center;gap:.4rem;cursor:pointer}

/* Таблиці */
table{border-collapse:collapse;width:100%}
tr{border-block:1px solid var(--line-strong)}
td,th{padding:1rem;text-align:left;vertical-align:top}
th{color:var(--text-strong)}
.table-scroll{overflow-x:auto;margin-top:1.5rem}
.compare th:nth-child(2),.compare td:nth-child(2){color:var(--accent-light);font-weight:600}

/* Стаття */
.article{max-width:46rem;margin-inline:auto}
.article.wide{max-width:64rem}
.article h2{margin:2rem 0 1.15rem;font-size:2rem;line-height:1.25;color:var(--text-strong)}
.article h3{margin-top:1.5rem;margin-bottom:.5rem;font-size:1.4rem;font-weight:600;color:var(--text-strong)}
.article ul,.article ol{margin-block:.75rem}
.article li{padding-block:.25rem}
.article img{border-radius:.75rem;margin-block:.75rem}
.article img.float{float:left;width:100%;max-width:22rem;margin:0 1.5rem 1rem 0}
@media (max-width:640px){.article img.float{float:none;max-width:100%;margin-right:0}}
.article hr{height:1px;background:var(--line-strong);margin-block:2rem}
.article iframe{width:100%;aspect-ratio:16/9;border-radius:.75rem;margin-block:.75rem}
.backlink{display:inline-block;margin-bottom:2rem;font-size:.875rem;color:var(--muted);font-weight:600}
.backlink a{color:var(--text-strong)}

/* Hero головної */
.hero{display:grid;gap:2rem;padding-block:3.5rem 3rem;align-items:center}
@media (min-width:1024px){.hero{grid-template-columns:1fr 1fr;padding-block:5.5rem 4.5rem}}
.hero h1{padding-bottom:.15em;font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.12;background:linear-gradient(to right,var(--heading-from),var(--heading-to));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .eyebrow{text-align:left;margin-bottom:1.25rem}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem}
.hero .hero-img{display:none;position:relative}
@media (min-width:1024px){.hero .hero-img{display:block}}
.hero .hero-img img{position:relative;margin-left:auto;max-width:44rem;filter:drop-shadow(0 0 .75rem rgba(94,234,212,.9));animation:scaledown 2s}
@keyframes scaledown{from{transform:scale(1.4);opacity:0}to{transform:none;opacity:1}}
.fadeInUp{animation:fadeInUp 1.2s}
@keyframes fadeInUp{from{transform:translate3d(0,40px,0)}to{transform:none}}

/* Модальні вікна */
.overlay{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.88);backdrop-filter:blur(6px)}
html[data-theme="light"] .overlay{background:rgba(241,245,249,.92)}
.overlay.open{display:flex}
.overlay .win{width:18rem;text-align:center}
.overlay .win .field{margin-bottom:1rem;text-align:left}
.overlay .close-x{position:absolute;top:.5rem;right:.5rem}
.overlay input{background:transparent}
/* вікно населених пунктів */
.overlay .win.settle-win{width:min(64rem,92vw);max-height:calc(100vh - 5rem);overflow:auto;border:1px solid var(--line-strong);border-radius:1rem;padding:2rem;background:var(--bg-base);text-align:left}
.settle-win .cols{columns:2;column-gap:1.5rem}
@media (min-width:640px){.settle-win .cols{columns:3}}
@media (min-width:1024px){.settle-win .cols{columns:5}}
.settle-win label{display:flex;align-items:center;gap:.6rem;width:100%;padding:.45rem .35rem;break-inside:avoid;-webkit-column-break-inside:avoid;font-weight:400;line-height:1.25;cursor:pointer;border-radius:.375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settle-win label input{flex:0 0 auto}
.settle-win label:hover{background:rgba(100,116,139,.2)}
.settle-win label.big{font-weight:700;text-transform:uppercase}
@media (max-width:480px){.settle-win .cols{columns:1}.overlay .win.settle-win{padding:1.25rem}}

/* Футер */
footer.site{margin-top:4rem;color:var(--muted2);background:linear-gradient(to bottom,var(--footer-from),var(--footer-to))}
footer.site .cols{display:grid;gap:1.5rem;border-bottom:1px solid var(--line);padding-block:4rem;color:var(--text)}
@media (min-width:640px){footer.site .cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){footer.site .cols{grid-template-columns:repeat(4,1fr);padding-block:5.5rem}}
footer.site ul{list-style:none;padding:0}
footer.site .col-title{color:var(--text-strong);font-weight:600}
footer.site li{margin-top:1rem}
footer.site li a{color:var(--muted)}
footer.site li a:hover{color:var(--text-strong)}
footer.site .bottom{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;padding-block:2.5rem}
footer.site .bottom .copy{width:100%;text-align:center}
@media (min-width:1024px){footer.site .bottom .copy{width:auto;text-align:left}}
footer.site .socials{display:flex;justify-content:center;gap:1rem;width:100%}
@media (min-width:1024px){footer.site .socials{width:auto;margin-left:auto}}
footer.site .socials a{display:flex;border-bottom:0}
footer.site .socials svg{width:1.5rem;height:1.5rem;fill:var(--muted);transition:fill .3s}
footer.site .socials a:hover svg{fill:var(--text-strong)}

/* Плаваючі месенджери */
.float-msgs{position:fixed;right:1.25rem;bottom:.75rem;z-index:40;display:flex;flex-direction:column;gap:.4rem;width:2rem}
.float-msgs img{width:1.75rem;height:1.75rem}

/* Аварійний банер */
#accident{display:none;position:relative;z-index:25;color:#fff;animation:blink 1s infinite}
#accident .container{padding-block:.35rem .5rem;font-size:.875rem;text-align:center;line-height:1.3;border:0}
#accident button{position:absolute;top:0;right:0;width:2.25rem;height:2.25rem;background:none;cursor:pointer}
@keyframes blink{0%,49%{background-color:#ef4444}50%,100%{background-color:#b91c1c}}

/* Перемикач теми */
.theme-toggle svg{width:1.15rem;height:1.15rem}
.theme-toggle .sun{display:none}
html[data-theme="light"] .theme-toggle .sun{display:block}
html[data-theme="light"] .theme-toggle .moon{display:none}

/* Карта */
.map-desktop-only{display:none}
@media (min-width:1024px){.map-desktop-only{display:block}}
.map-box{width:100%;height:28rem;border-radius:.75rem;margin-top:2rem;overflow:hidden}
@media (min-width:1024px){.map-box.tall{height:40rem}}
.leaflet-container{background:#0b1220}
html[data-theme="light"] .leaflet-container{background:#dbe4ec}

/* Дрібне */
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-6{margin-top:3rem}
.muted{color:var(--muted)}
.hidden{display:none}
.contact-list p{display:flex;align-items:center;gap:.5rem;margin-block:1rem}
.contact-list img{width:1.5rem;height:1.5rem}
.contact-list a{border-bottom:0}
.contact-list a:hover{color:var(--text-strong)}
.pay-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem;margin-top:2.5rem}
.pay-logos img{max-height:2.5rem;width:auto}
.pay-logos img.visa{max-height:5rem}
.thanks-box{min-height:50vh;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.35rem}
@media print{.topbar,header.site,footer.site,.float-msgs,.mobile-menu,.overlay{display:none!important}body{background:#fff;color:#000}}