:root{
  --gg-green:#1b5e20;
  --gg-green-light:#e8f5e9;
}
/* BASE RESET */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* body { font-family: Arial, sans-serif; color: #333; background: #f7f7f7; line-height: 1.6; } */
body{font-family:Inter,Arial,sans-serif;}

a { text-decoration: none; color: inherit; }
.container { max-width: 1200px; margin: auto; padding: 0 1rem; }
.section-title { text-align: center; font-size: 2em; margin: 2rem 0 1rem; color: #1b5e20; }

/* NAVBAR */
.navbar { position: fixed; width: 100%; top: 0; left: 0; z-index: 10; transition: background 0.3s; }
.nav-container { display: flex; align-items: center; justify-content: space-between; padding: 1rem; }
.navbar.transparent { background: rgba(0,0,0,0.2); }
.navbar.solid { background: #1b5e20; }
.brand { font-size: 1.5em; font-weight: bold; color: #fff; }
.nav-menu { list-style: none; display: flex; align-items: center; gap: 1rem; }
.nav-menu li a { color: #fff; padding: 0.5rem; }
.btn.small { font-size: 0.8em; padding: 0.3rem 0.8rem; }
.mobile-toggle { display: none; cursor: pointer; color: #fff; }

/* HERO */
.hero { position: relative; height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }
.hero-overlay { position: absolute; top:0;left:0;width:100%;height:100%; background: url('images/hero-bg.png') center/cover no-repeat; filter: brightness(0.5); }
.hero-content { position: relative; z-index: 1; max-width: 800px; padding: 0 1rem; }
.hero h1 { font-size: 3em; margin-bottom: 0.5rem; }
.hero p { font-size: 1.2em; margin-bottom: 1.5rem; color: #ddd; }
.hero-ctas .btn { margin: 0 0.5rem; }
.btn { display: inline-block; background: #2e7d32; color: #fff; padding: 0.8rem 1.5rem; border-radius: 5px; transition: opacity 0.2s; }
.btn:hover { opacity: 0.9; }
.btn.outline { background: transparent; border: 2px solid #fff; }
.btn.disabled { opacity: 0.6; pointer-events: none; }

/* FEATURES GRID */
.features-section { padding: 4rem 0; background: #fff; }
.features-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
/* ── FEATURES (fix) ────────────────────────────── */
.features-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.feature-card{
  background:var(--gg-green-light,#f1f8f2);
  padding:2rem;
  border-radius:8px;
  text-align:center;          /* back to centered copy */
  transition:transform .25s,box-shadow .25s;
}
.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.feature-icon{
  font-size:2.25rem;
  margin-bottom:1rem;
}

/* .feature-card { background: #f1f8f2; padding: 2rem; border-radius: 8px; text-align: center; } */
.feature-card{background:var(--gg-green-light);transition:transform .2s;}
.feature-card:hover{transform:translateY(-4px);}

.feature-icon { font-size: 2.5rem; color: #1b5e20; margin-bottom: 1rem; }

/* GALLERY */
.gallery-section { padding: 4rem 0; background: #fafafa; }
.gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
.screenshot img { width: 100%; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }

/* TESTIMONIALS */
.testimonials-section { padding: 4rem 0; background: #fff; }
.testimonials-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
.testimonial-card { background: #f7fff7; padding: 1.5rem; border-radius: 8px; position: relative; }
.testimonial-card .author { margin-top: 1rem; font-weight: bold; color: #1b5e20; }

/* CONTACT FORM */
.contact-section { padding: 4rem 0; background: #fafafa; }
.contact-form { max-width: 600px; margin: auto; display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: flex; gap: 1rem; }
.form-row input { flex: 1; padding: 0.8rem; border: 1px solid #ccc; border-radius: 4px; }
textarea { padding: 0.8rem; border: 1px solid #ccc; border-radius: 4px; resize: vertical; }
.contact-form button { align-self: flex-start; }

/* FOOTER */
.footer { background: #1b5e20; color: #fff; padding: 3rem 0; }
.footer-row { display: flex; flex-wrap: wrap; gap: 2rem; }
.footer-col { flex: 1 1 200px; }
.footer-col h4 { margin-bottom: 1rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-buttons .btn.small { margin-bottom: 0.5rem; }
.social-icons { display: flex; gap: 1rem; margin-top: 0.5rem; }
.footer-bottom { text-align: center; margin-top: 2rem; font-size: 0.9em; }

/* NAVBAR SCROLL BEHAVIOR */
body { scroll-behavior: smooth; }

/* RESPONSIVE */
@media(max-width:768px) {
  .nav-menu { display: none; position: absolute; top: 60px; right: 1rem; background: #1b5e20; flex-direction: column; padding: 1rem; border-radius: 4px; }
  .nav-menu.show { display: flex; }
  .mobile-toggle { display: block; }
}

/* ── FAQ ─────────────────────────────────────────── */
.faq-section{padding:4rem 0;background:#fafafa;}
.faq-section details{
  max-width:800px;margin:0.75rem auto;
  border:1px solid #dfe8df;border-radius:6px;
  background:var(--gg-green-light);padding:1rem 1.25rem;
  transition:background-color .25s,border-color .25s;
}
.faq-section details[open]{background:#fff;border-color:var(--gg-green);}
.faq-section summary{
  cursor:pointer;font-weight:600;list-style:none;
  position:relative;padding-right:1.75rem;
}
/* Hide default arrow */
.faq-section summary::-webkit-details-marker{display:none;}
/* Custom arrow using Font Awesome */
.faq-section summary::after{
  content:"\f078";font-family:"Font Awesome 6 Free";
  font-weight:900;position:absolute;right:0;top:0;
  transition:transform .25s;
}
.faq-section details[open] summary::after{transform:rotate(180deg);}
.faq-section p{margin-top:0.75rem;line-height:1.45;}