* {
 box-sizing: border-box
}

body {
 margin: 0;
 font-family: Inter,Arial,sans-serif;
 color: #16221e;
 background: #f5f7f5;
 line-height: 1.65
}

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

.nav {
 height: 76px;
 background: #071611;
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 6%;
 position: sticky;
 top: 0;
 z-index: 10
}

.brand {
 font-weight: 900;
 letter-spacing: 1px
}

.brand span {
 color: #b9d68c
}

.nav nav {
 display: flex;
 gap: 24px
}

.nav nav a {
 opacity: .8
}

.nav nav a:hover,.nav nav .active {
 opacity: 1;
 color: #cce79f
}

.menu {
 display: none;
 background: none;
 color: white;
 border: 0;
 font-size: 24px
}

.hero {
 min-height: 650px;
 display: flex;
 align-items: center;
 padding: 8% 9%;
 background: linear-gradient(90deg,rgba(3,16,11,.92),rgba(3,16,11,.48)),url("../img/wallpaper.jpeg") center/cover;
 color: #fff
}

.hero h1 {
 font-size: clamp(42px,6vw,76px);
 line-height: 1.03;
 max-width: 850px;
 margin: 10px 0 25px
}

.hero p:not(.eyebrow) {
 font-size: 20px;
 max-width: 700px
}

.eyebrow {
 font-size: 12px;
 letter-spacing: 3px;
 font-weight: 800;
 color: #7b9c51
}

.hero .eyebrow {
 color: #cce79f
}

.actions {
 display: flex;
 gap: 14px;
 margin-top: 28px
}

.btn {
 display: inline-block;
 background: #b9d68c;
 color: #09140f;
 border: 0;
 padding: 13px 21px;
 border-radius: 5px;
 font-weight: 800;
 cursor: pointer
}

.btn.ghost {
 background: transparent;
 color: #fff;
 border: 1px solid #b9d68c
}

.stats {
 display: grid;
 grid-template-columns: repeat(4,1fr);
 background: #0b1e17;
 color: #fff;
 padding: 28px 7%;
 gap: 20px
}

.stats div {
 display: flex;
 flex-direction: column
}

.stats b {
 font-size: 22px
}

.stats span {
 opacity: .7
}

.section {
 padding: 80px 8%;
 max-width: 1250px;
 margin: auto
}

.section h2 {
 font-size: 38px;
 line-height: 1.15
}

.grid {
 display: grid;
 gap: 24px
}

.three {
 grid-template-columns: repeat(3,1fr)
}

.two {
 grid-template-columns: repeat(2,1fr)
}

.card,.section article,.faq details {
 background: #fff;
 border: 1px solid #e2e8e3;
 border-radius: 10px;
 padding: 28px;
 box-shadow: 0 8px 30px rgba(0,0,0,.04)
}

.pagehead {
 padding: 100px 8%;
 background: #0b1e17;
 color: #fff
}

.pagehead h1 {
 font-size: clamp(40px,5vw,65px);
 line-height: 1.05;
 max-width: 850px
}

.pagehead p:not(.eyebrow) {
 max-width: 800px
}

.checks {
 padding: 0;
 list-style: none
}

.checks li {
 padding: 10px 0;
 border-bottom: 1px solid #ddd
}

.checks li:before {
 content: '✓';
 margin-right: 12px;
 color: #648b35;
 font-weight: bold
}

.steps {
 grid-template-columns: repeat(3,1fr)
}

.steps b {
 font-size: 32px;
 color: #6e963f
}

.cta {
 margin: 60px 8%;
 padding: 65px;
 background: #10251b;
 color: #fff;
 border-radius: 15px
}

.cta h2 {
 font-size: 40px
}

.contact-grid {
 display: grid;
 grid-template-columns: 1.4fr .8fr;
 gap: 30px
}

form {
 display: grid;
 gap: 14px
}

input,textarea,select {
 width: 100%;
 padding: 15px;
 border: 1px solid #d6ddd7;
 border-radius: 6px;
 font: inherit;
 background: white
}

footer {
 background: #06120e;
 color: #cbd6d0;
 padding: 45px 8%;
 display: grid;
 grid-template-columns: 2fr 1fr 1fr;
 gap: 30px
}

footer a {
 display: block;
 margin: 6px 0;
 color: #cbd6d0
}

.copy {
 grid-column: 1/-1;
 border-top: 1px solid #24342d;
 padding-top: 20px
}

.faq {
 max-width: 950px
}

.faq details {
 margin-bottom: 12px
}

.faq summary {
 cursor: pointer;
 font-weight: 800
}

.center {
 text-align: center
}

@media(max-width:800px) {
 .nav nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 76px;
  background: #071611;
  flex-direction: column;
  padding: 20px 7%;
  gap: 12px
 }

 .nav nav.open {
  display: flex
 }

 .menu {
  display: block
 }

 .stats,.three,.two,.steps,.contact-grid,footer {
  grid-template-columns: 1fr
 }

 .hero {
  min-height: 580px;
  padding: 70px 7%
 }

 .hero h1 {
  font-size: 45px
 }

 .section {
  padding: 60px 7%
 }

 .pagehead {
  padding: 70px 7%
 }

 .cta {
  margin: 40px 7%;
  padding: 40px 25px
 }}