
:root{
  --fg:#0f172a; --muted:#475569;
  --brand:#245C36; --accent:#C7A55D;
  --bg:#f7f8f4; --radius:22px; --shadow:0 12px 36px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:'Cairo','Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--fg); background:var(--bg)}
.bg{position:fixed; inset:0; background:url('assets/bg.svg') center/cover no-repeat; filter:saturate(108%) contrast(104%); opacity:.96; z-index:-1}
.container{width:min(1200px,92%); margin:0 auto}
.header{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.brand{display:flex; align-items:center; gap:14px}
.logo{height:64px; width:auto; object-fit:contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,.08));}
.brand-text .title{font-weight:800; letter-spacing:.2px}
.brand-text .subtitle{font-weight:600; color:var(--muted); font-size:14px}
.nav{display:flex; gap:14px; align-items:center}
.nav a{font-weight:700; text-decoration:none; color:var(--fg); padding:8px 10px; border-radius:10px}
.nav a:hover{background:rgba(36,92,54,.08)}
.lang-link{font-weight:800; border:2px solid rgba(15,23,42,.12); padding:8px 12px; border-radius:999px; background:white; box-shadow:var(--shadow)}
.hero{padding:30px 0}
.hero-inner{display:flex; align-items:center; justify-content:space-between}
.hero-text{background:white; padding:26px; border-radius:var(--radius); box-shadow:var(--shadow); border:2px solid rgba(199,165,93,.18)}
.hero-text h1{margin:6px 0 10px; font-size:28px; color:var(--brand)}
.hero-text p{margin:0 0 12px; color:var(--muted); font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chips span{padding:8px 12px; border-radius:999px; background:linear-gradient(135deg, rgba(36,92,54,.12), rgba(199,165,93,.12)); border:1px solid rgba(36,92,54,.22); font-weight:800; font-size:12px}
.section{padding:10px 0 4px}
.panel{background:white; padding:28px; border-radius:var(--radius); box-shadow:var(--shadow); margin:14px 0; border:1.5px solid rgba(36,92,54,.1)}
.panel h2{color:var(--brand)}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); padding:12px 0 24px}
.card{background:white; border-radius:18px; padding:18px; box-shadow:var(--shadow); border:1.5px solid rgba(199,165,93,.18)}
.card h3{margin:0 0 8px; color:var(--brand)}
.card p{margin:0; color:var(--muted); font-weight:700}
.tagline{margin-top:6px; font-weight:700; color:var(--accent)}
.legal{background:white; border-radius:18px; box-shadow:var(--shadow); padding:22px; margin:8px 0 20px; border:1.5px solid rgba(36,92,54,.1)}
.legal h2{margin:0 0 10px; color:var(--brand)}
.legal ul{margin:0; padding:0 0 0 18px}
.legal li{margin:6px 0; color:var(--muted)}
.note{margin-top:8px; color:var(--muted); font-style:italic}
.contact{padding:10px 0 30px}
.cta{display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-block; text-decoration:none; font-weight:900; padding:12px 18px; border-radius:14px; background:linear-gradient(135deg, var(--brand), var(--accent)); color:white; box-shadow:var(--shadow)}
.btn.outline{background:transparent; color:var(--brand); border:2px solid rgba(199,165,93,.5)}
.footer{padding:20px 0 50px; color:var(--muted)}
.footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
