/* ====== Design Tokens ====== */
:root{
  --bg:#f7fbf7;
  --paper:#ffffff;
  --ink:#223529;
  --muted:#65806e;
  --brand:#3a7d44;
  --brand-600:#2f6737;
  --brand-50:#e9f5ec;
  --ring: rgba(58,125,68,.35);
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.10);
}

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

img{max-width:100%; display:block}

/* ====== Layout ====== */
.container{width:92%; max-width:1200px; margin:0 auto}
.section{padding:96px 0}
.section-title{font-size:34px; margin:0 0 28px}

/* ====== Header ====== */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.1) blur(10px);
  background:rgba(247,251,247,.7);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; height:62px}
.logo{font-weight:700; font-size:20px; letter-spacing:.3px; color:var(--ink); text-decoration:none}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--ink); text-decoration:none; font-weight:500}
.nav .btn.small{margin-left:4px}

.burger{display:none; background:none; border:0; padding:8px; cursor:pointer}
.burger span{display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; transition:.3s}

/* ====== Buttons ====== */
.btn{
  display:inline-block; padding:12px 22px; border-radius:10px;
  background:var(--brand); color:#fff; text-decoration:none; font-weight:600;
  box-shadow:0 8px 20px rgba(58,125,68,.25); transition:.25s transform, .25s background;
}
.btn:hover{background:var(--brand-600); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--brand); border:1.5px solid var(--brand); box-shadow:none}
.btn.ghost:hover{background:var(--brand-50)}

/* ====== Hero ====== */
.hero{
  position:relative; min-height:82vh;
  background:url('../images/hero-bg.png') center/cover no-repeat;
  display:grid; place-items:center; color:#fff;
}
.hero .overlay{
  width:100%; height:100%;
  background:linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.25));
  display:flex; align-items:center;
}
.hero-inner{ text-align:center }
.hero-title{font-size:48px; line-height:1.15; margin:0 0 10px}
.hero-subtitle{max-width:720px; margin:0 auto 22px; font-size:18px; color:#e7f3ea}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ====== About ====== */
.about-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:42px; align-items:center}
.lead{font-size:18px; color:#2a4031}
.checklist{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.checklist li{padding-left:28px; position:relative}
.checklist li::before{
  content:''; width:18px; height:18px; border-radius:50%;
  background:var(--brand); position:absolute; left:0; top:3px;
  box-shadow:0 0 0 4px var(--brand-50);
}
.about-media img{border-radius:var(--radius); box-shadow:var(--shadow)}

/* ====== Features ====== */
.features{background:linear-gradient(180deg, var(--bg), #f2f9f3)}
.features-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.feature-card{
  background:var(--paper); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow); transition:.25s transform;
}
.feature-card:hover{transform:translateY(-6px)}
.feature-card .icon{width:44px; height:44px; border-radius:12px; background:var(--brand-50); color:var(--brand); display:grid; place-items:center; margin-bottom:12px}

/* ====== Screens ====== */
.screens-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px}
.screen-card{
  background:var(--paper); border-radius:var(--radius); padding:10px;
  box-shadow:var(--shadow); overflow:hidden; position:relative;
}
.screen-card img{border-radius:10px; display:block}
.screen-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.03));
}

/* ====== Pricing ====== */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.price-card{
  background:var(--paper); border-radius:var(--radius); padding:28px; text-align:center; position:relative;
  box-shadow:var(--shadow);
}
.price-card .price{font-size:26px; margin:8px 0 14px}
.price-card ul{list-style:none; padding:0; margin:0; display:grid; gap:8px; color:var(--muted)}
.price-card.highlight{border:2px solid var(--brand)}
.price-card .badge{
  position:absolute; top:12px; right:12px; background:var(--brand); color:#fff;
  padding:6px 10px; border-radius:20px; font-size:12px; font-weight:700;
}

/* ====== Contact ====== */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start}
.contact-list{list-style:none; padding:0; margin:14px 0; color:var(--muted); display:grid; gap:6px}
.contact-list a{color:var(--brand); text-decoration:none}
.contact-form{display:grid; gap:12px; background:var(--paper); padding:20px; border-radius:var(--radius); box-shadow:var(--shadow)}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid #dfe7e1; font:inherit;
  transition:border .2s, box-shadow .2s; background:#fff;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--ring);
}
.form-note{font-size:12px; color:var(--muted); margin:6px 0 0}

/* ====== Footer ====== */
.footer{padding:22px 0; background:#1f3527; color:#dfe7e1}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.footer-nav{display:flex; gap:14px}
.footer-nav a{color:#dfe7e1; text-decoration:none; font-size:14px; opacity:.9}
.footer-nav a:hover{opacity:1}

/* ====== Reveal Animations ====== */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:translateY(0)}
.delay-1{transition-delay:.1s} .delay-2{transition-delay:.2s} .delay-3{transition-delay:.3s}

/* ====== Responsive ====== */
@media (max-width: 980px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .screens-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .pricing-grid, .contact-grid, .screens-grid{grid-template-columns:1fr}
  .section{padding:72px 0}
  .hero-title{font-size:40px}
  .nav{display:none; position:absolute; right:14px; top:62px; background:var(--paper); box-shadow:var(--shadow); border-radius:12px; padding:12px}
  .nav a{display:block; padding:8px 10px}
  .burger{display:block}
  .nav.open{display:block}
  .about-media{order:-1}
}