:root{
  --green: #2e8b57; /* sea green */
  --light: #e8f5e9; /* very light green */
  --accent: #0b6b3a; /* darker green */
  --muted: #556b2f;
  --white: #ffffff;
  --shadow: rgba(46,139,87,0.15);
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, Arial, sans-serif; 
      margin:0; 
      background:var(--light); 
      color:#123}
a{color:var(--accent); 
      text-decoration:none}
/* Topnav (W3Schools Topnav adapted) */
.topnav{overflow:hidden; 
        background-color:var(--green); 
        box-shadow:0 4px 14px var(--shadow)
      }
.topnav a{float:left; display:block; 
          color:var(--white); text-align:center; 
          padding:14px 18px; text-decoration:none; 
          font-size:16px
        }
.topnav .icon{display:none}
.topnav a.icon{float:right}
.topnav a:hover{background-color:rgba(255,255,255,0.12)}
.topnav .brand{font-weight:700; letter-spacing:0.2px}
.container{max-width:1100px; margin:28px auto; padding:0 18px}
.header-hero{display:grid; grid-template-columns:1fr 420px; gap:24px; align-items:center;}
.hero-card{background:var(--white); padding:28px; border-radius:14px; box-shadow:0 6px 24px var(--shadow)}
.hero-card h1{margin:0 0 10px; color:var(--accent)}
.hero-card p{margin:0 0 16px; color:#234}
.btn{display:inline-block; padding:10px 16px; border-radius:8px; background:var(--accent); color:var(--white); text-decoration:none}
.services-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin-top:18px}
.card{background:var(--white); padding:18px; border-radius:12px; box-shadow:0 6px 18px var(--shadow)}
.card h3{margin-top:0}
.table-box{margin-top:18px}
.table-box table{width:100%; border-collapse:collapse}
.table-box th,.table-box td{padding:10px; border:1px solid #d6e8db}
.footer{background:var(--accent); color:var(--white); padding:24px; margin-top:28px}
.footer a{color:rgba(255,255,255,0.9)}
/* responsive */
@media (max-width:900px){
  .header-hero{grid-template-columns:1fr}
  .topnav a:not(:first-child){display:none}
  .topnav a.icon{float:right; display:block}
}
/* pages specific */
.features{display:flex; gap:12px; align-items:flex-start}
.features img{width:120px; height:120px; object-fit:cover; border-radius:10px}
ul, ol{margin-left:18px}
aside{background:linear-gradient(180deg,var(--white), #f7fff8); padding:14px; border-radius:10px}
.highlight{background:linear-gradient(90deg, rgba(46,139,87,0.06), rgba(11,107,58,0.02)); padding:8px 12px; border-radius:8px}