:root{
  --bg:#f7fbf8; /* shade of white */
  --bg-alt:#eef8f1;
  --primary:#32c48d; /* light greenish */
  --primary-600:#20b57e;
  --primary-100:#dff6ec;
  --ink:#0e2b1f;
  --muted:#47685a;
  --card:#ffffff;
  --border:#d9e9df;
  --shadow:0 10px 30px rgba(8,68,46,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg),#fff 40%,var(--bg) 100%);
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1200px,92vw);margin-inline:auto}

/* Header */
.site-header{position:sticky;top:0;background:#ffffffd9;backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--border);z-index:40}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.brand{display:flex;gap:10px;align-items:center}
.brand-logo{width:48px;height:auto}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text strong{font-family:Outfit,Inter,sans-serif;font-size:18px}
.brand-text span{font-size:12px;color:var(--muted)}
.nav-toggle{display:none;background:none;border:none;font-size:24px}
.nav-menu{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0}
.nav-menu a{color:var(--ink);font-weight:600}
.nav-menu .btn{color:white}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:10px;border:1px solid transparent;font-weight:700;box-shadow:var(--shadow);transition:.2s ease;}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-secondary{background:var(--primary-100);color:var(--ink);border-color:var(--primary)}
.btn-ghost{background:#fff;border-color:var(--border);color:var(--ink)}

/* Hero */
.hero{padding:64px 0;background:radial-gradient(1000px 400px at 50% 0%, var(--primary-100), transparent 60%)}
.hero-inner{display:grid;grid-template-columns:1fr;gap:20px;align-items:center;justify-items:center;text-align:center}
.hero-copy{max-width:800px}
.hero h1{font-family:Outfit,Inter,sans-serif;font-size:clamp(32px,4vw,48px);line-height:1.1;margin:0 0 10px}
.hero p{font-size:18px;color:var(--muted);max-width:58ch}
.hero-cta{display:flex;gap:14px;margin:18px 0 12px;justify-content:center}
.trust-badges{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:16px 0 0;list-style:none;color:var(--muted);justify-content:center}
.trust-badges li{background:#fff;border:1px solid var(--border);padding:8px 12px;border-radius:999px}
.hero-media{height:360px;border-radius:18px;background:linear-gradient(135deg,#e8fff4, #f6fffb), url('https://images.unsplash.com/photo-1544025163-23f0d5f2ed4d?auto=format&fit=crop&w=1600&q=60') center/cover;border:1px solid var(--border);box-shadow:var(--shadow)}

/* Sections */
.section{padding:64px 0}
.section.alt{background:var(--bg-alt)}
.section-header{max-width:900px;margin:0 auto 28px;text-align:center}
.section h2{font-family:Outfit,Inter,sans-serif;font-size:clamp(26px,3vw,36px);margin:0 0 8px}
.section p{color:var(--muted)}

.cards{display:grid;gap:18px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.card.icon .i{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--primary-100);color:var(--primary-600);font-weight:800;margin-bottom:10px}

/* Product grid */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.product img{height:220px;width:100%;object-fit:cover}
.product figcaption{padding:12px 14px}

.center{text-align:center}
.mt-lg{margin-top:20px}

/* About */
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start}
.highlight{background:#fff;border:1px dashed var(--primary);border-radius:14px;padding:18px}
.list{padding-left:18px}
.list.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding-left:0;list-style:inside circle}

/* Contact */
.contact .form{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.form label{display:grid;gap:6px;font-weight:600}
.form input,.form textarea,.form select{padding:12px 12px;border:1px solid var(--border);border-radius:10px;font-size:15px}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--primary-100);border-color:var(--primary)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:12px}
.status{min-height:22px;color:var(--muted)}
.contact-cards{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.contact-card{flex:1 1 180px;background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:12px;font-weight:700;text-align:center}

/* Clients */
.logo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.logo-skel{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;color:var(--muted);box-shadow:var(--shadow)}

/* Footer */
.site-footer{background:#0f2d23;color:#eaf7f1}
.footer-inner{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:20px;align-items:start;padding:24px 0}
.footer-brand{display:flex;gap:10px;align-items:center}
.footer-brand img{width:44px}
.footer-nav{display:grid;gap:6px}
.footer-nav a{color:#c6f0de}
.footer-contacts a{color:#c6f0de}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid #164b3a;color:#c6f0de}
.footer-bottom a{color:#c6f0de}

/* Gallery */
.gallery-grid{display:grid;gap:10px;grid-template-columns:repeat(4,1fr)}
.gallery-grid figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);background:#fff}
.gallery-grid img{width:100%;height:220px;object-fit:cover;transition:transform .25s ease}
.gallery-grid img:hover{transform:scale(1.03)}
.gallery-grid figure.is-hidden{display:none}
/* Class-based collapse for gallery */
.gallery-grid.collapsed > figure:nth-child(n+9){display:none}
@media (max-width: 900px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 640px){.gallery-grid{grid-template-columns:repeat(2,1fr)}.gallery-grid img{height:160px}}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;padding:20px;z-index:1000}
.lightbox img{max-width:min(95vw,1100px);max-height:min(90vh,800px);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.lightbox[hidden]{display:none}
.lightbox-close{position:absolute;top:16px;right:16px;background:#ffffff;border:1px solid var(--border);border-radius:999px;width:40px;height:40px;font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .cards.three,.cards.four{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
  .list.grid{grid-template-columns:1fr}
  .logo-row{grid-template-columns:repeat(3,1fr)}
  .footer-inner{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .nav-toggle{display:block}
  .nav-menu{display:none;position:absolute;right:16px;top:64px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:10px;flex-direction:column;width:min(90vw,320px)}
  .nav-menu.show{display:flex}
  .product-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}