:root{
--bg:#ffffff;
--surface:#ffffff;
--card:#ffffff;
--border:#e5e7eb; /* gray-200 */
--muted:#6b7280; /* gray-500 */
--text:#111827; /* gray-900 */
--green:#22c55e;
--danger:#b91c1c; /* dark red */
--radius:16px;
--shadow:0 6px 24px rgba(17,24,39,.06);
--max:1200px;
}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat, Open Sans, system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;line-height:1.55;}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%, #21315a33, transparent), var(--bg);color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;}
a{color:var(--green);text-decoration:none}
img{max-width:100%;display:block;border-radius:12px}
.container{max-width:var(--max);margin-inline:auto;padding:24px}
header{position:sticky;top:0;background:#ffffffcc;backdrop-filter:saturate(120%) blur(8px);z-index:50;border-bottom:1px solid var(--border);}

.desktop-only { display: none !important; }
.mobile-only { display: none !important; }
/* Desktop */
@media (min-width: 769px) {.desktop-only { display: flex !important; }}
/* Mobile */
@media (max-width: 768px) {.mobile-only { display: block !important; }}

/* Desktop + mob */
.header-products {display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; padding: 8px 0; overflow-x: hidden;}
/* картинка зліва, текст справа */
.hp-item {align-items: center; border-radius: 10px; box-sizing: border-box; color: var(--text); display: flex; gap: 10px; flex: 1 1 24%; justify-content: center; max-width: 400px; min-width: 160px; padding: 6px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease;}
/* компактніша картинка */
.hp-item img {height: 60px; flex-shrink: 0; width: auto;}
.hp-title {font-size: 15px; font-weight: 600; line-height: 1.2;}
.hp-item:hover {box-shadow: 0 4px 14px rgba(0,0,0,.15); transform: translateY(-3px);}
.hp-item.active {border: 2px solid var(--green); box-shadow: 0 0 10px rgba(34,197,94,.3); outline-offset: -2px; pointer-events: none; transform: none;}
/* mob port + land */
@media (max-width: 768px) {
.hp-item {width: 100%; justify-content: flex-start;} .hp-item img {height: 55px;} .hp-title {font-size: 14px;}
}
/* Landscape: щоб не займало пів екрана */
@media (max-height: 500px) and (orientation: landscape) {
.header-products {gap: 12px;padding: 5px 0;}
.hp-item {padding: 4px; width: 32%;}
.hp-item img {height: 45px;}
.hp-title {font-size: 13px;}
}
@media (max-width: 420px) {.hp-item img {height: 45px;} .hp-title {font-size: 13px;}
}
.nav{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:14px 24px}
.brand{display:flex;align-items:center;gap:2em}
.brand img{width:145px;height:21px;border-radius:0}
.brand p{color: var(--muted);font:700 18px system-ui;margin:0}
.cta{display:flex;gap:12px;align-items:center}
.btn{appearance:none;border:1px solid var(--border);background:#ffffff;color:var(--text);padding:12px 16px;border-radius:10px;cursor:pointer;font-weight:600;transition:.2s transform, .2s background, .2s border-color;}
.btn:hover{transform:translateY(-1px);border-color:#d1d5db;background:#f9fafb}
.btn.primary{background:var(--green);border:1px solid var(--green);color:#ffffff}
.btn.whatsapp{background:#25D366;color:#04120a;border:1px solid var(--green)}
.btn:hover{transform:translateY(-1px);border-color:#475569}
.btn.primary{background:linear-gradient(135deg, #b5f7cd, #01df53);border:0;color:#000}
.btn.whatsapp{background:#25D366;color:#04120a;border:0}
.marquee {background: var(--green); color: #fff; font-weight: 600; overflow: hidden; white-space: nowrap; width: 100%;}
.marquee span {animation: marquee 15s linear infinite; display: inline-block; padding-left: 100%;}
@keyframes marquee {0% { transform: translateX(0); } 100% { transform: translateX(-100%); }}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;background:linear-gradient(180deg,#fff, #fafafa);}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid #334155;color:var(--muted);padding:8px 12px;border-radius:999px;font-size:13px}
.hero h1{font-size:2.5em;line-height:1.05;margin:14px 0 6px}
.hero p{color:var(--muted);font-size:18px;margin:10px 0 22px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .pad{padding: 0 22px 12px}
.pad ul {margin:0;padding:0}
.pad li {list-style-position: inside;}
.buttons {display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.viber-btn {display: inline-flex; align-items: center; gap: 8px; background-color: #7360f2; color: #fff;
  text-decoration: none; border: none; border-radius: 10px; padding: 10px 18px;
  font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(115, 96, 242, 0.3);}
.viber-btn:hover {background-color: #8b79f9; box-shadow: 0 4px 10px rgba(115, 96, 242, 0.4); transform: translateY(-1px);}
.viber-btn:active {transform: translateY(1px); box-shadow: 0 2px 5px rgba(115, 96, 242, 0.3);}
.viber-btn svg {flex-shrink: 0;}
.telegram-btn {display: inline-flex; align-items: center; gap: 8px; background-color: #229ED9; color: #fff; text-decoration: none;
  border: none; border-radius: 10px; padding: 10px 18px; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(34, 158, 217, 0.3);}
.telegram-btn:hover {background-color: #2AB1E0; box-shadow: 0 4px 10px rgba(34, 158, 217, 0.4); transform: translateY(-1px);}
.telegram-btn:active {transform: translateY(1px); box-shadow: 0 2px 5px rgba(34, 158, 217, 0.3);}
.telegram-btn svg {flex-shrink: 0;}
.send{display:flex;gap:12px;margin-top:14px;align-items:center;flex-wrap:wrap}
.note {color:var(--muted);font-size:12px;margin-top:8px}
.green{color:var(--green)}
.price{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
#price{color:var(--green);font-weight:700;font-size:2.5em;}
h4{font-size:20px;margin: 10px 0 0}
.spec-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px;margin-top:10px}
.kpi{background:#ffffff;border:1px solid var(--border);padding:14px;border-radius:12px}
.kpi .v{font-size:22px;font-weight:700;color:var(--text)}
.kpi .l{font-size:14px;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px}
.b {font-weight: bold}
.section{padding:1em 0}
.section h3{font-size:26px;}
.grid-2{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:24px}
table {border-collapse:collapse; border: 1px solid var(--green); border-radius: 12px;
 box-shadow: 1px 1px 9px 2px #ccc;
 margin-bottom: 20px;
 overflow:hidden;
 width:100%;}
th,td{padding:14px; border-bottom: 1px solid var(--green); text-align:left}
th {color: #ffffff; font-weight: 700; background: var(--green);}
tr:hover td{background:#f9fafb}
details{background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:16px}
details summary{cursor:pointer;font-weight:600}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:24px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input, textarea, select{width:91%;padding:12px 14px;border-radius:10px;border:1px solid #32415b;background:#ddffcc;color:var(--text);}
label{font-size:13px;color:var(--muted)}

.power-tabs {display:flex;gap:10px;margin-bottom:15px;}
.power-tab {background:#eee;border-radius:6px;cursor:pointer;font-weight:600;padding:8px 14px;}
.power-tab.active {background:#22c55e;color:#fff;}
.power-table {border-collapse:collapse; box-shadow: 1px 1px 10px 2px #ccc; width:100%;}
.power-table th, .power-table td {border:1px solid #22c55e; padding:8px;}
.power-table th {cursor:pointer;}
.calc-box {border:1px solid #ddd; border-radius:8px; margin-top:20px; padding: 8px 15px 3px;}
.calc-box input {padding:6px;font-size:16px;width:120px;}
.calc-output {margin-top:10px;font-weight:600;}

.footer{padding:24px;color:#6b7280;font-size:13px;border-top:1px solid var(--border);text-align:center;background:#fff}
@media (max-width: 1024px) {.hero{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.contact{grid-template-columns:1fr}}
@media (max-width: 560px){.nav{padding:10px}.hero h1{font-size:30px}.badge{font-size:12px}}