*{box-sizing:border-box}
html{font-size:17px}
body{margin:0;font-family:"Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif;background:#f3f7f5;color:#10261f;line-height:1.8}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.top{background:linear-gradient(135deg,#06382d,#0b5c4a 60%,#0e6f59);color:#fff;padding:18px 0}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand{font-size:1.5rem;font-weight:800}
.brand span{font-weight:600;opacity:.8}
.slogan{margin:0;opacity:.9}
.hero{padding:54px 0 26px;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);margin:0 0 10px;color:#0b4f40}
.hero p{max-width:760px;margin:0 auto;font-size:1.1rem}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.chips span{background:#0b5c4a;color:#fff;border-radius:999px;padding:6px 18px;font-weight:700;font-size:.95rem}
.eyebrow{font-weight:800;color:#0b5c4a;margin:26px 0 8px;font-size:1.05rem}
.card{background:#fff;border:1px solid rgba(15,107,79,.16);border-radius:18px;padding:14px;box-shadow:0 8px 26px rgba(16,38,31,.07)}
.card h2,.card h3{margin:0 0 10px;line-height:1.5}
.card h3{font-size:1rem}
.card video{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#06382d}
.card-main{padding:22px}
.card-main h2{font-size:clamp(1.3rem,2.6vw,1.9rem);color:#0b4f40}
.grid-title{margin:46px 0 18px;font-size:clamp(1.3rem,2.6vw,1.8rem)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.cta{margin:60px 0;background:#0b5c4a;color:#fff;border-radius:22px;padding:34px 26px;text-align:center}
.cta h2{margin:0 0 8px;font-size:clamp(1.2rem,2.6vw,1.7rem)}
.cta p{margin:0;opacity:.92}
.foot{padding:26px 0;text-align:center;color:#52665f;font-size:.9rem}
@media (max-width:640px){.grid{grid-template-columns:1fr}.card-main{padding:14px}.hero{padding-top:34px}}