:root{
  --bg:#eef5ea;
  --bg-soft:#f5faf3;
  --panel:rgba(255,255,255,.72);
  --line:rgba(15,35,29,.08);
  --text:#0d201a;
  --muted:#66756f;
  --green:#16936f;
  --green-2:#32c283;
  --green-3:#7be36d;
  --dark:#0d2b23;
  --dark-text:#062019;
  --radius:28px;
  --max:1180px;
  --shadow:0 24px 60px rgba(7,30,22,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  line-height:1.6;
  background:
    radial-gradient(circle at top left, rgba(112,208,109,.22), transparent 34rem),
    radial-gradient(circle at 78% 8%, rgba(44,208,176,.14), transparent 28rem),
    linear-gradient(180deg,#f6fbf3 0%, #eef5ea 100%);
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.container{
  width:min(calc(100% - 40px), var(--max));
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  padding:18px 0 8px;
  backdrop-filter:blur(8px);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(255,255,255,.8);
  border-radius:999px;
  box-shadow:var(--shadow);
  padding:14px 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
}

.brand-mark{
  width:34px;
  height:34px;
  border-radius:12px;
  background:radial-gradient(circle at 30% 30%, #9af07b, #29c68a 45%, #157b79 100%);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.45);
}

.brand-title{
  font-size:2rem;
  letter-spacing:-.05em;
  font-weight:800;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:22px;
  color:#44514c;
}

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

.nav-cta{
  background:var(--dark);
  color:#fff;
  padding:14px 22px;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 12px 28px rgba(7,30,22,.16);
}

.section{padding:72px 0}

.hero{
  position:relative;
  overflow:hidden;
  padding:70px 0 48px;
}

.hero-grid,
.grid-two{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:44px;
  align-items:center;
}

.eyebrow,
.small-caps{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(53,185,124,.16);
  background:rgba(255,255,255,.58);
  padding:10px 16px;
  border-radius:999px;
  color:#17855f;
  font-weight:700;
  box-shadow:0 10px 28px rgba(7,30,22,.05);
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#76de6f;
  box-shadow:0 0 0 8px rgba(118,222,111,.18);
}

h1,h2,h3{
  margin:0 0 16px;
  line-height:.95;
  letter-spacing:-.06em;
}

h1{
  font-size:clamp(3rem,7vw,6rem);
  max-width:10ch;
}

h2{
  font-size:clamp(2rem,4vw,3.3rem);
  max-width:14ch;
}

h3{
  font-size:1.35rem;
  letter-spacing:-.03em;
  line-height:1.05;
}

.hero-copy,
.lead,
p{
  font-size:1.06rem;
  color:var(--muted);
  line-height:1.65;
}

.hero-copy,
.lead{max-width:60ch}

.emph{color:var(--green)}

.button-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:28px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid rgba(10,30,22,.08);
  background:rgba(255,255,255,.72);
  font-weight:700;
  color:var(--text);
}

.btn-primary{
  background:linear-gradient(135deg, #15956f 0%, #17a989 100%);
  color:#fff;
  border:none;
  box-shadow:0 18px 42px rgba(22,149,111,.22);
}

.hero-highlights,
.cards-4,
.cards-3,
.cases-grid,
.types-grid{
  display:grid;
  gap:18px;
}

.hero-highlights{
  grid-template-columns:repeat(3,1fr);
  margin-top:28px;
}

.highlight,
.card,
.article-card,
.info-panel,
.contact-card{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.82);
  border-radius:32px;
  box-shadow:var(--shadow);
}

.highlight,
.card,
.article-card,
.info-panel,
.contact-card{
  padding:22px;
}

.image-wrap{padding:20px}
.image-wrap img{border-radius:24px}

.caption{
  background:var(--dark);
  color:#fff;
  border-radius:24px;
  margin:0 20px 20px;
  padding:18px;
}

.caption p{
  color:rgba(255,255,255,.82);
  margin:0;
}

.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.types-grid{grid-template-columns:repeat(4,1fr)}
.cases-grid{grid-template-columns:repeat(2,1fr)}

.grid-two.narrow-right{
  grid-template-columns:1fr auto;
}

ul.clean-list{
  margin:0;
  padding-left:18px;
  color:var(--muted);
}

footer{
  padding:30px 0 54px;
  color:var(--muted);
  font-size:.95rem;
}

.footer-inner{
  border-top:1px solid rgba(10,30,22,.08);
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.visual-panel{
  position:relative;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.82);
  border-radius:42px;
  box-shadow:var(--shadow);
  padding:30px 22px 22px;
  overflow:hidden;
}

.visual-panel::after{
  content:"";
  position:absolute;
  right:-40px;
  top:36px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(123,227,109,.42), transparent 60%);
  filter:blur(10px);
}

.visual-panel .fan{
  position:absolute;
  right:-40px;
  bottom:80px;
  width:220px;
  height:220px;
  opacity:.15;
  background:conic-gradient(from 0deg, rgba(20,120,100,.75) 0 18deg, transparent 18deg 30deg);
  border-radius:50%;
}

.spacer-top{padding-top:18px}

/* Cleaner image handling for homepage cards */
.article-card img.standard-card-image,
.article-card img.feature-card-image{
  width:100%;
  height:240px;
  object-fit:cover;
  object-position:center;
  border-radius:22px;
  margin-bottom:18px;
  background:#f4f7f3;
}

/* Optional diagram-style images */
.article-card img.diagram-image{
  width:100%;
  height:240px;
  object-fit:contain;
  object-position:center;
  border-radius:22px;
  margin-bottom:18px;
  background:#ffffff;
  padding:12px;
}

/* If a card has no image, keep spacing elegant */
.article-card .small-caps:first-child{
  margin-top:2px;
}

@media (max-width:1100px){
  .cards-4,
  .types-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .hero-highlights,
  .cards-3,
  .cases-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:920px){
  .hero-grid,
  .grid-two,
  .grid-two.narrow-right{
    grid-template-columns:1fr;
  }

  .nav{
    flex-direction:column;
    align-items:flex-start;
    border-radius:28px;
  }

  .nav-links{
    flex-wrap:wrap;
  }

  h1{
    max-width:none;
  }
}

@media (max-width:640px){
  .section{
    padding:56px 0;
  }

  .cards-4,
  .cards-3,
  .types-grid,
  .cases-grid{
    grid-template-columns:1fr;
  }

  .button-row{
    flex-direction:column;
    align-items:stretch;
  }

  .article-card img.standard-card-image,
  .article-card img.feature-card-image,
  .article-card img.diagram-image{
    height:220px;
  }
}