/* --- ROOT & RESET --- */
:root{
  --bg:#f4f6f8; 
  --card:#fff; 
  --text:#1f2937; 
  --muted:#6b7280; 
  --brand:#34d399; 
  --brand-dark:#10b981; 
  --shadow:0 8px 24px rgba(0,0,0,0.1); 
  --radius:1rem;
}

[data-theme="dark"]{
  --bg:#0f172a; 
  --card:#1e293b; 
  --text:#f1f5f9; 
  --muted:#94a3b8; 
  --shadow:0 8px 24px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;margin:0;padding:0;font-family:'Inter',sans-serif;}
body{background:var(--bg);color:var(--text);line-height:1.6;transition:0.3s;}
.container{width:min(1200px,90%);margin:0 auto;}
header{position:sticky;top:0;background:var(--card);box-shadow:0 2px 6px rgba(0,0,0,0.06);z-index:100;padding:.8rem 0;transition:0.3s;}
.nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.brand img{height:50px;width:auto;}
nav{display:flex;gap:1rem;align-items:center;}
nav a{color:var(--muted);text-decoration:none;font-weight:600;transition:0.3s;}
nav a:hover{color:var(--brand-dark);}
.btn{padding:.7rem 1.2rem;border-radius:50px;font-weight:700;cursor:pointer;transition:0.3s;}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow);}
.btn-primary:hover{background:var(--brand-dark);}
.btn-outline{border:2px solid var(--brand);color:var(--brand);background:transparent;}
.btn-outline:hover{background:var(--brand);color:#fff;}
.hero{padding:6rem 1rem;text-align:center;position:relative;overflow:hidden;}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:1rem;font-weight:800;}
.hero p{font-size:clamp(1rem,2.5vw,1.25rem);color:var(--muted);margin-bottom:2rem;}
section{padding:4rem 1rem;}
h2{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:2rem;text-align:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.card{background:var(--card);padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;transition:0.3s;}
.card i{font-size:3rem;color:var(--brand);margin-bottom:1rem;}
.card:hover{transform:translateY(-5px);}
footer{padding:2.5rem 1rem;background:var(--card);border-top:1px solid #e2e8f0;margin-top:2rem;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1.5rem;}
.copy{color:var(--muted);font-size:.95rem;text-align:center;}
.menu-toggle{display:none;}
.social-icons a{color:var(--muted);font-size:1.5rem;transition:0.3s;}
.social-icons a:hover{color:var(--brand);}

@media(max-width:960px){
  .grid-3{grid-template-columns:1fr;gap:1rem;}
  nav{display:none;flex-direction:column;gap:.5rem;width:100%;}
  nav.active{display:flex;}
  .menu-toggle{display:block;background:var(--brand);color:#fff;border:none;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;font-weight:700;}
}