@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black: #0d0d0d;
  --dark: #111111;
  --card: #1a1a1a;
  --card-border: #2a2a2a;
  --green: #5a8f1e;
  --green-light: #6dab24;
  --lime: #c8ff00;
  --white: #ffffff;
  --grey: #888888;
  --grey-light: #cccccc;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

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

/* NAV */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 72px;
  background: rgba(13,13,13,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
}

.nav-logo img { height: 52px; width: auto; }

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-light);
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--lime); }

.nav-cta {
  background: var(--green);
  color: var(--white) !important;
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  transition: background 0.2s !important;
}

.nav-cta:hover { background: var(--green-light) !important; color: var(--white) !important; }

/* HERO */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2rem 4rem;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(90,143,30,0.15) 0%, transparent 70%),
    var(--black);
}

.grass-silhouette {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath fill='%235a8f1e' opacity='0.3' d='M0,180 C0,180 30,60 60,90 C90,120 110,20 140,50 C170,80 190,10 220,40 C250,70 270,0 300,30 C330,60 350,15 380,45 C410,75 430,5 460,35 C490,65 510,20 540,50 C570,80 590,10 620,40 C650,70 670,0 700,30 C730,60 750,15 780,45 C810,75 830,5 860,35 C890,65 910,20 940,50 C970,80 990,10 1020,40 C1050,70 1070,0 1100,30 C1130,60 1150,15 1180,45 C1210,75 1230,5 1260,35 C1290,65 1310,20 1340,50 C1370,80 1390,30 1440,60 L1440,180 Z'/%3E%3Cpath fill='%235a8f1e' opacity='0.5' d='M0,180 C0,180 20,100 50,120 C80,140 100,70 130,95 C160,120 180,55 210,80 C240,105 260,45 290,70 C320,95 340,50 370,75 C400,100 420,40 450,65 C480,90 500,55 530,80 C560,105 580,45 610,70 C640,95 660,50 690,75 C720,100 740,40 770,65 C800,90 820,55 850,80 C880,105 900,45 930,70 C960,95 980,50 1010,75 C1040,100 1060,40 1090,65 C1120,90 1140,55 1170,80 C1200,105 1220,45 1250,70 C1280,95 1300,50 1330,75 C1360,100 1390,60 1440,85 L1440,180 Z'/%3E%3Cpath fill='%231a1a1a' d='M0,180 C0,180 15,140 40,155 C65,170 85,125 110,145 C135,165 155,120 180,140 C205,160 225,115 250,135 C275,155 295,125 320,145 C345,165 365,120 390,140 C415,160 435,125 460,145 C485,165 505,120 530,140 C555,160 575,125 600,145 C625,165 645,120 670,140 C695,160 715,125 740,145 C765,165 785,120 810,140 C835,160 855,125 880,145 C905,165 925,120 950,140 C975,160 995,125 1020,145 C1045,165 1065,120 1090,140 C1115,160 1135,125 1160,145 C1185,165 1205,120 1230,140 C1255,160 1275,125 1300,145 C1325,165 1360,140 1440,155 L1440,180 Z'/%3E%3C/svg%3E") bottom/100% auto no-repeat;
}

.hero-content { position: relative; z-index: 1; max-width: 800px; }

.hero-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 1rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 120px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}

.hero h1 .green { color: var(--green); }
.hero h1 .white { color: var(--white); }

.hero-sub {
  font-size: 18px;
  color: var(--grey-light);
  max-width: 520px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.85rem 2rem;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  text-transform: uppercase;
}

.btn-primary {
  background: var(--green);
  color: var(--white);
}

.btn-primary:hover { background: var(--green-light); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid var(--card-border);
}

.btn-outline:hover { border-color: var(--grey); }

/* SECTIONS */
section { padding: 5rem 2rem; }

.container { max-width: 1100px; margin: 0 auto; }

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  margin-bottom: 1.25rem;
}

.section-sub {
  font-size: 16px;
  color: var(--grey-light);
  max-width: 540px;
  line-height: 1.7;
}

/* HOW IT WORKS */
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5px;
  margin-top: 3.5rem;
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
}

.how-step {
  background: var(--card);
  padding: 2rem;
  position: relative;
}

.step-num {
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 1;
  color: rgba(90,143,30,0.15);
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  pointer-events: none;
}

.step-icon {
  font-size: 28px;
  margin-bottom: 1rem;
  color: var(--green-light);
}

.step-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.step-desc {
  font-size: 14px;
  color: var(--grey-light);
  line-height: 1.6;
}

/* SERVICES / PRICING */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.pricing-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  transition: border-color 0.2s;
}

.pricing-card:hover { border-color: var(--green); }

.pricing-card.featured {
  border-color: var(--green);
  background: linear-gradient(135deg, #1a2510 0%, var(--card) 60%);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 100px;
}

.pricing-tier {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.pricing-range {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--lime);
}

.pricing-desc {
  font-size: 13px;
  color: var(--grey);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--card-border);
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pricing-features li {
  font-size: 14px;
  color: var(--grey-light);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.pricing-features li::before {
  content: '✓';
  color: var(--green-light);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* CONTACT */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 700px) { .contact-wrap { grid-template-columns: 1fr; gap: 2rem; } }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.form-group input,
.form-group textarea,
.form-group select {
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--green); }

.form-group textarea { resize: vertical; min-height: 120px; }

.form-group select option { background: var(--black); }

/* FOOTER */
footer {
  background: var(--black);
  border-top: 1px solid var(--card-border);
  padding: 3rem 2rem;
  text-align: center;
}

.footer-logo img { height: 60px; margin: 0 auto 1rem; }

.footer-tagline {
  font-size: 13px;
  color: var(--grey);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.footer-links {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 13px;
  color: var(--grey);
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--lime); }

.footer-copy {
  font-size: 12px;
  color: #555;
}

/* UTILS */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }

/* RESPONSIVE NAV */
.nav-hamburger { display: none; background: none; border: none; color: var(--white); font-size: 24px; cursor: pointer; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
  .hero h1 { font-size: 56px; }
  .how-grid { grid-template-columns: 1fr; }
}