:root{--accent:#1ac0c3;--accent-strong:#0e9fa2;--border:#e7eaee;--text:#2c2d31;--bg:#f7fbfc;--card:#fff;--muted:#5d6167;--maxw:1120px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,Segoe UI,-apple-system,Arial,Inter,'Tajawal',sans-serif;color:var(--text);
  background:radial-gradient(1200px 600px at 20% -10%, rgba(26,192,195,.12), transparent 60%),
             radial-gradient(900px 500px at 100% 10%, rgba(26,192,195,.08), transparent 60%),
             var(--bg);
}
a{color:var(--accent-strong);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--border)}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:80px;width:auto}
.brand .title{font-size:clamp(18px,2vw,24px);font-weight:800}
.links{display:grid;grid-auto-flow:column;grid-auto-columns:130px;gap:10px}
.nav-btn{display:inline-flex;justify-content:center;align-items:center;padding:10px 14px;border-radius:999px;border:1.5px solid var(--accent);background:#fff;color:var(--accent-strong);font-weight:400}
.nav-btn:hover{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(26,192,195,.2)}
header,section{scroll-margin-top:84px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding:56px 0;border-bottom:1px solid var(--border)}
.hero .visual img{width:50vw;max-width:560px;height:auto;border:1px solid var(--border);border-radius:18px;box-shadow:0 20px 60px rgba(14,159,162,.25)}
h1{margin:0 0 14px;font-size:clamp(28px,5vw,52px)}
.lead{color:var(--muted);font-size:clamp(16px,2.2vw,20px);line-height:1.8}
.cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--accent),#63dadd);color:#0d1b1c;padding:12px 18px;border-radius:12px;border:0;font-weight:700}
.section{padding:64px 0;border-bottom:1px solid var(--border)}
.section h2{margin:0 0 10px;font-size:clamp(26px,3vw,38px)}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 10px 22px rgba(10,50,60,.06)}
.product{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.product img{width:100%;border-radius:12px;border:1px solid var(--border)}
.slogan{font-size:clamp(40px,7vw,72px);color:#FF9A00;font-family:'Avenir Next',Impact,Teko,Almarai,Changa,sans-serif;margin:8px 0 0;line-height:1}
.footer{color:#667078;padding:24px 0 60px;text-align:center;font-size:14px}
@media(max-width:980px){.links{grid-auto-columns:1fr;grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){
  .navbar{flex-direction:column;gap:10px}
  .links{width:100%;grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr}
  .hero .visual img{width:92vw;max-width:92vw}
  .product{grid-template-columns:1fr}
}