:root{
  --bg:#F2F7F1;        /* soft eco-friendly background */
  --ink:#1B4332;       /* deep forest green for main text */
  --muted:#71816D;     /* muted sage green for secondary text */
  --panel:#FFFFFF;     /* clean white panels */
  --line:#DDE5D9;      /* light earthy divider */
  --shadow:0 8px 30px rgba(0,0,0,.08);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }

.wrap{ width:min(1120px, 92vw); margin-inline:auto }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.2rem; border-radius:999px; border:1px solid var(--ink);
  text-decoration:none; font-weight:600; transition:.25s ease;
}
.btn-dark{ background:var(--ink); color:#fff; border-color:var(--ink) }
.btn-dark:hover{ transform:translateY(-2px) }
.btn-ghost{ background:transparent; color:var(--ink) }
.btn-ghost:hover{ background:#1B433210 }

.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(150%) blur(8px);
  background:color-mix(in oklab, var(--bg) 80%, white);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.logo{ font-weight:800; letter-spacing:.2px; color:var(--ink); text-decoration:none; display:flex; align-items:center }
.logo .dot{ width:10px; height:10px; border-radius:50%; background:var(--ink); display:inline-block }
.nav{ display:flex; gap:1.6rem; align-items:center }

.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.5rem .75rem;          
  line-height:1;
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
  opacity:.9;
  border:1px solid transparent;  
  border-radius:999px;
}
.nav a:hover:not(.cta){
  background:#1B433210;
}

.nav .cta{
  background:#2D6A4F;   /* brighter green for CTA */
  color:#fff;
  border-color:#2D6A4F;
  padding:.5rem 1rem;           
}

@media (min-width:641px){
  .nav .cta{ transform: translateY(-0.5px); }
}

.menu{ display:none; background:none; border:0; padding:.25rem; }
.menu span{ display:block; width:22px; height:2px; background:var(--ink); margin:4px 0 }

.hero{ position:relative; padding:6rem 0 4rem }
.hero-media{
  position:absolute; inset:0; background:
  radial-gradient(60% 60% at 20% 10%, #ffffff 0%, #f1f7f0 40%, transparent 60%),
  radial-gradient(70% 70% at 100% 0%, #e0f0e6 0%, transparent 55%),
  radial-gradient(100% 100% at 50% 100%, #e9f3ea 0%, transparent 60%);
  z-index:-1;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center }
.hero-copy h1{ font-size: clamp(2.2rem, 4vw + 1rem, 4.2rem); line-height:1.07; margin:0 0 .6rem }
.underline{ box-shadow: inset 0 -0.4em 0 #cce3d4 }
.lede{ color:var(--muted); font-size:1.125rem; max-width:48ch }
.hero-card{ border-radius:24px; overflow:hidden; box-shadow:var(--shadow); background:#fff }
.hero-card img{ height:100%; width:100%; object-fit:cover }

.strip{ border-block:1px solid var(--line); background:#fff }
.strip-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; padding:1rem 0; color:#52796F; font-weight:600; font-size:.95rem; text-align:center }

.section{ padding:4.5rem 0 }
.section-alt{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.section-head h2{ font-size:2rem; margin:0 0 .3rem }
.section-head p{ color:var(--muted); margin:0 }

/* Cards / Bags */
.cards{ margin-top:2rem; display:grid; gap:1.6rem; grid-template-columns: repeat(3, 1fr); }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); transform:translateZ(0); transition: box-shadow .2s ease, transform .2s ease }
.card:hover{ box-shadow:0 14px 40px rgba(0,0,0,.12); transform: translateY(-2px) }
.card-media img{ 
  width:100%; 
  height:260px; 
  object-fit:contain; /* fit bags properly without cropping */
  background:#fff; 
  padding:10px; 
}
.card-body{ padding:1.1rem 1.1rem 1.3rem }
details{ border-top:1px dashed #cfe2cf; padding-top:.8rem }
details > summary{ list-style:none; cursor:pointer; font-weight:700; color:var(--ink) }
details > summary::marker, details > summary::-webkit-details-marker{ display:none }
details[open]{ animation: reveal .35s ease }
@keyframes reveal{ from{opacity:.3; transform:translateY(-4px)} to{opacity:1; transform:none} }

.price-list{ margin:.6rem 0; padding:0; list-style:none; display:grid; gap:.3rem }
.price-list li{ display:flex; justify-content:space-between; border-bottom:1px dashed #dce7dc; padding:.3rem 0 }
.price-list li strong{ font-weight:800; color:var(--ink) }
.price-list .muted{ color:#6b7c6c }
.note{ color:#7a8a7a; font-size:.9rem; margin:.4rem 0 0 }

.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.6rem; margin-top:2rem }
.step{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow) }
.step img{ height:200px; width:100%; object-fit:cover }
.step h4{ margin:.9rem 1rem .2rem }
.step p{ margin:0 1rem 1.2rem; color:var(--muted) }

.cta{ background:#2D6A4F; color:#fff; padding:3.8rem 0; margin-top:2rem }
.cta-inner{ display:grid; grid-template-columns: 1fr 1fr; gap:1.6rem; align-items:center }
.cta h3{ font-size:1.8rem; margin:0 }
.cta p{ margin:.2rem 0 1rem; color:#d6f5d6 }
.cta-form{ display:grid; grid-template-columns: 1.2fr 2fr auto; gap:.8rem }
.cta-form input{ width:100%; border-radius:12px; border:1px solid transparent; padding:.9rem 1rem; font:inherit }
.cta-form input:focus{ outline:2px solid #95c59f }
.cta-form .btn{ align-self:stretch }

.footer{ background:#081C15; color:#d6d6cf; padding:2.6rem 0; border-top:1px solid #1B4332 }
.footer-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.6rem; align-items:start }
.logo-foot{ color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.6rem }
.logo-foot .dot{ background:#fff }
.foot-links a{ display:block; color:#c9c9c2; text-decoration:none; margin:.25rem 0 }
.foot-links a:hover{ color:#fff }
.socials a{ color:#c9c9c2; text-decoration:none; margin-right:.9rem }
.socials a:hover{ color:#fff }
.muted{ color:#9c9c94 }

.backtotop{
  position:fixed; right:18px; bottom:22px; width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; background:#1B4332; color:#fff; text-decoration:none; box-shadow:var(--shadow);
  transform: translateY(10px); opacity:0; pointer-events:none; transition:.2s ease;
}
.backtotop.show{ transform:none; opacity:1; pointer-events:auto }

.fx-up-1{ opacity:0; transform: translateY(12px) }
.fx-up-2{ opacity:0; transform: translateY(14px) }
.fx-up-3{ opacity:0; transform: translateY(16px) }
.fx-stagger{ opacity:0; transform: translateY(18px) }

/* WhatsApp button */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
.whatsapp-float img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}
.whatsapp-float img:hover {
  transform: scale(1.1);
}

/* About blocks */
.about-block {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 4rem 0;
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease-out;
}
.about-block img {
  width: 420px;
  height: 280px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
.about-block h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: var(--ink);
}
.about-block p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--muted);
}
.about-block.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .cta-inner{ grid-template-columns:1fr }
  .cards{ grid-template-columns: repeat(2, 1fr) }
  .steps{ grid-template-columns: repeat(2, 1fr) }
  .about{ grid-template-columns:1fr }
}
@media (max-width: 768px) {
  .about-block {
    flex-direction: column;
    text-align: center;
  }
  .about-block img {
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto 1rem;
  }
  .about-block h3 {
    font-size: 1.6rem;
  }
  .about-block p {
    font-size: 1rem;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-copy {
    margin-bottom: 2rem;
  }
  .nav {
    display: none;
    flex-direction: column;
    gap: 1rem;
    background: var(--panel);
    position: absolute;
    top: 60px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
  }
  .nav.show {
    display: flex;
  }
  .menu {
    display: block;
  }
}
@media (max-width: 640px){
  .cards{ grid-template-columns: 1fr }
  .card-media img{ height:220px }
  .steps{ grid-template-columns: 1fr }
  .step img{ height:180px }
  .strip-row{ grid-template-columns: repeat(2,1fr) }
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .foot-links {
    margin-top: 1rem;
  }
  .nav{ display:none }
  .menu{ display:block }
}
.socials a {
  color: #c9c9c2;
  text-decoration: none;
  margin-right: 1rem;
  font-size: 1.5rem; /* bigger icons */
  transition: color 0.3s ease;
}

.socials a:hover {
  color: #ffffff; /* turns white on hover */
}
/* Splash Screen */
#splash {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  transition: opacity 1s ease, visibility 1s ease;
}

#splash img {
  width: 150px;
  height: auto;
  animation: splash-zoom 1.5s ease-in-out;
}

@keyframes splash-zoom {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

#splash.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Blackout overlay */
#blackout {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: black;
  z-index: 4000;
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center;
  animation: blackout-close 1.2s ease forwards;
  display: none;
}

@keyframes blackout-close {
  0% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}
/* Scrolling Banner */
.scrolling-banner {
  width: 100%;
  background: #556B2F;   /* dark olive green */
  color: #F2F5D0;        /* light text */
  font-weight: 600;
  padding: 6px 0;
  overflow: hidden;
  position: relative;
}
.scrolling-banner p {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 15s linear infinite;
  font-size: 1rem;
  margin: 0;
}

@keyframes scroll-left {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}