:root{
  --max-width:1200px;
  --green:#28A745;
  --green-600:#1E7D3A;
  --muted:#6B7280;
  --bg:#F7FAF8;
  --glass: rgba(255,255,255,0.8);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:#102a1f;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* container */
.container{width:90%;max-width:var(--max-width);margin:0 auto}

/* NAV */
.nav{background:white;box-shadow:0 6px 20px rgba(10,10,10,0.04);position:sticky;top:0;z-index:40}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--green-600);font-weight:700;font-size:18px}
.brand .muted{color:var(--muted);font-weight:600;margin-left:2px}
.nav-links a{margin:0 12px;color:var(--muted);text-decoration:none;font-weight:600}
.nav-links a.active, .nav-links a:hover{color:var(--green-600)}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}
.btn-primary{background:linear-gradient(135deg,var(--green),#2DB270);color:white;box-shadow:0 8px 22px rgba(45,178,112,0.12);border:none}
.btn-ghost{background:transparent;border:2px solid rgba(16,42,31,0.06);color:var(--green-600)}
.btn-outline{border:2px solid rgba(16,42,31,0.06);padding:8px 14px;background:white;border-radius:10px;color:var(--green-600)}

/* HERO */
.hero{display:flex;align-items:center;gap:40px;padding:70px 0}
.hero-left{flex:1}
.hero-right{flex:1;display:flex;align-items:center;justify-content:center}
.title{font-size:42px;margin:0 0 14px;font-weight:800;color:var(--green-600)}
.lead{color:var(--muted);font-size:18px;margin-bottom:18px}
.hero-ctas{display:flex;gap:12px;margin-bottom:22px}
.hero-stats{display:flex;gap:24px;margin-top:20px}
.hero-stats div{background:rgba(255,255,255,0.9);padding:10px 14px;border-radius:10px;box-shadow:0 8px 20px rgba(2,55,25,0.02)}
.hero-stats strong{display:block;font-size:18px}

/* illustration styling */
.illustration{width:92%;height:auto;max-width:520px}
.blob .leaf{transform-origin:center;animation:float 6s ease-in-out infinite}

/* SECTION LAYOUT */
.section{padding:60px 0}
.section-features{padding-top:40px}
.section-title{text-align:center;font-size:28px;margin-bottom:6px}
.section-lead{text-align:center;color:var(--muted);margin-bottom:30px}

/* GRID SYSTEM */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}.hero{flex-direction:column;padding:36px 0} .hero-right{order:-1}}

/* CARDS */
.card{background:white;border-radius:14px;padding:22px;box-shadow:0 10px 26px rgba(12,17,10,0.04)}
.card-soft{background:linear-gradient(180deg,#fff,#fbfff8);border-radius:14px;padding:28px;box-shadow:0 8px 26px rgba(12,17,10,0.04)}
.card h3{margin:10px 0 8px}
.card p{color:var(--muted);font-size:15px}
.card-icon{font-size:32px}

/* dataset preview */
.dataset-preview{padding:18px;border-radius:12px}
.dp-head{display:flex;align-items:center;justify-content:space-between}
.tag{background:#E8FDF0;color:var(--green-600);padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}
.dp-stats{display:flex;gap:18px;margin-top:12px}
.dp-stats div{font-size:13px;color:var(--muted)}

/* dataset card */
.card-dataset{display:flex;align-items:center;gap:18px;padding:16px}
.card-left{width:80px;flex-shrink:0}
.card-body h3{margin:0}
.meta{display:flex;gap:10px;color:var(--muted);font-size:13px}

/* member card */
.member-card{text-align:center;padding:22px}
.avatar{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg,#DFF6E8,#C8F0DB);display:flex;align-items:center;justify-content:center;font-weight:800;color:#0b6b32;margin:0 auto 12px}

/* contact form */
.contact-form label{display:block;margin-bottom:12px;font-weight:600;color:var(--muted)}
.contact-form input, .contact-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #e6eef0;resize:vertical}

/* footer */
.footer{padding:28px 0;background:#fff;margin-top:30px;border-top:1px solid rgba(16,42,31,0.04)}
.footer-inner{display:flex;align-items:center;justify-content:space-between}

/* small helpers */
.muted{color:var(--muted)}
.page-title{font-size:28px;font-weight:800;margin-top:12px}
.section-lead{margin-bottom:22px;color:var(--muted);text-align:center}

/* FAQ */
.faq-grid{display:grid;gap:14px}
.faq-card summary{cursor:pointer;font-weight:700}
.faq-card .faq-body{padding:12px;color:var(--muted)}