:root{
  --bg:#0b1020;
  --text:#0f1220;
  --brand:#2563eb;
  --brand-600:#1d4ed8;
  --muted:#6b7280;
  --card:#ffffff;
  --alt:#f5f7fb;
  --ring: rgba(37,99,235,0.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
}

.container{width:min(1200px, 92%); margin-inline:auto}

a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

.btn{
  display:inline-block; border:1px solid transparent; padding:.75rem 1rem;
  border-radius:12px; font-weight:600; text-decoration:none; cursor:pointer
}
.btn-sm{padding:.55rem .8rem; font-size:.95rem}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-600)}
.btn-ghost{background:transparent; border-color:var(--brand); color:var(--brand)}
.btn-ghost:hover{background:rgba(37,99,235,.06)}

.site-header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #e5e7eb
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; padding:.9rem 0
}
.logo{display:flex; align-items:center; gap:.6rem; font-weight:700; color:inherit}
.logo-img{height:36px; width:auto}
.nav{display:flex; gap:1rem; align-items:center}
.nav a{color:#111}
.nav a:hover{text-decoration:none; color:var(--brand)}

.burger{display:none; background:none; border:none; font-size:1.5rem;}

.mobile-nav{
  display:none; flex-direction:column; gap:.8rem; padding:.8rem 4%;
  border-bottom:1px solid #e5e7eb; background:#fff
}
.mobile-nav.open{display:flex}

/* Hero */
.hero{
  background:linear-gradient(180deg, #f7faff, #fff);
  padding:56px 0 24px;
  border-bottom:1px solid #eef2ff;
}
.hero-inner{
  display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:center
}
.hero h1{font-size:clamp(28px, 4vw, 44px); line-height:1.1; margin:0 0 12px}
.lead{color:var(--muted); margin:0 0 18px}
.hero-media img{width:100%; height:auto; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.08)}

/* Sections */
.section{padding:56px 0}
.section.alt{background:var(--alt)}
.section h2{font-size:clamp(24px, 3vw, 32px); margin:0 0 16px}

.features{display:grid; gap:.5rem; padding-left:1rem}
.features li{margin-left:1rem}

/* Cards / Products */
.grid.cards{display:grid; gap:1.2rem; grid-template-columns:repeat(3,1fr)}
.card{background:var(--card); border:1px solid #e5e7eb; border-radius:16px; overflow:hidden}
.card img{width:100%; height:200px; object-fit:cover}
.card-body{padding:1rem}
.card h3{margin:.2rem 0 .5rem}
.price{font-weight:700; margin:.25rem 0 1rem}

/* Testimonials */
.grid.testimonials{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr)}
.testimonial{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:1rem; font-style:italic
}
.testimonial footer{margin-top:.75rem; font-style:normal; color:var(--muted)}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem}
.contact-list{list-style:none; padding:0; margin:0 0 1rem}
.contact-list li{margin:.3rem 0}
.map-wrap{margin-top:1rem; border-radius:16px; overflow:hidden; border:1px solid #e5e7eb}
.map-wrap iframe{width:100%; height:300px; border:0}

.contact-form form{display:grid; gap:.75rem}
label{display:grid; gap:.35rem; font-weight:600}
input, textarea{
  width:100%; padding:.8rem .9rem; border:1px solid #d1d5db; border-radius:12px; font:inherit;
  outline:none; box-shadow:0 0 0 0 var(--ring)
}
input:focus, textarea:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.hp{display:none}
#formStatus{margin-top:.25rem; color:var(--muted); font-size:.95rem}

/* Footer */
.site-footer{border-top:1px solid #e5e7eb; background:#fff}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.footer-nav{display:flex; gap:1rem}

/* Респонсів */
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .grid.cards{grid-template-columns:1fr 1fr}
  .grid.testimonials{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .burger{display:block}
}
@media (max-width: 640px){
  .grid.cards{grid-template-columns:1fr}
  .grid.testimonials{grid-template-columns:1fr}
}
/* Категорі-навігація під заголовком */
.cat-nav{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:8px 0 16px;
}
.cat-nav a{
  background:#fff; border:1px solid #e5e7eb; padding:.5rem .75rem;
  border-radius:999px; color:#111; text-decoration:none; font-weight:600;
}
.cat-nav a:hover{border-color:#cbd5e1; color:var(--brand)}

/* Трохи менші заголовки усередині секції */
#products h3{margin:28px 0 8px}
.cat-desc{color:var(--muted); margin:0 0 12px}
#products .card h4{margin:.2rem 0 .4rem; font-size:1.05rem}
/* ===== Carousel (clean) ===== */
.carousel{position:relative; margin:12px 0 8px}

/* viewport: hide native scrollbar */
.carousel-viewport{
  overflow:hidden;
}
.carousel-viewport::-webkit-scrollbar{ display:none; }
.carousel-viewport{ scrollbar-width:none; }

/* track + items */
.carousel-track{
  display:flex; gap:1.2rem;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding-bottom:.25rem;
}
.carousel-track > .card{
  flex:0 0 auto;
  scroll-snap-align:start;
  width:calc((100% - 2.4rem) / 3); /* 3 per view desktop */
}

/* arrows */
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  border:none; background:#fff; width:44px; height:44px; border-radius:999px;
  box-shadow:0 10px 30px rgba(17,24,39,.12), 0 2px 6px rgba(17,24,39,.06);
  cursor:pointer; font-size:22px; line-height:44px;
}
.carousel-btn:hover{ background:#f8fafc }
.carousel-btn:disabled{ opacity:.35; cursor:not-allowed }
.carousel-btn.prev{ left:-10px }
.carousel-btn.next{ right:-10px }

/* responsive widths */
@media (max-width: 960px){
  .carousel-track > .card{ width:calc((100% - 1.2rem) / 2); } /* 2 per view */
}
@media (max-width: 640px){
  .carousel-track > .card{ width:100%; } /* 1 per view */
  .carousel-btn.prev{ left:6px }
  .carousel-btn.next{ right:6px }
}