:root{
 --green:#1B5E4B; --green2:#2E7D68; --gold:#E6C16A; --gold-d:#c9a24e;
 --cream:#F3E9CF; --light:#F7F7F7; --ink:#18261f; --muted:#5b6b64; --line:#e6e9e6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Tajawal","Cairo",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.8;font-size:17px}
h1,h2,h3,h4{font-family:"Cairo","Tajawal",sans-serif;line-height:1.35}
.en{font-family:"Poppins",sans-serif;letter-spacing:2px}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:40px;font-weight:700;font-family:"Cairo";font-size:16px;cursor:pointer;transition:.2s;border:2px solid transparent}
.btn-gold{background:var(--gold);color:#3a2e12}
.btn-gold:hover{background:var(--gold-d)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:#12463a}
.btn-ghost{border-color:var(--green);color:var(--green);background:transparent}
.btn-ghost:hover{background:var(--green);color:#fff}
.sec{padding:76px 0}
.sec .wrap>.eyebrow{color:var(--gold-d);font-weight:700;letter-spacing:1px;margin-bottom:8px;font-family:"Cairo"}
.sec h2{font-size:34px;color:var(--green);margin-bottom:14px}
.sec .lead{color:var(--muted);max-width:660px;margin-bottom:38px;font-size:18px}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.nav .logo img{height:46px;display:block}
.nav ul{display:flex;gap:26px;list-style:none;font-weight:600;font-family:"Cairo";font-size:15.5px}
.nav ul a{color:#25342d}
.nav ul a:hover{color:var(--gold-d)}
.nav .navcta{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;background:none;border:none;font-size:26px;color:var(--green)}

/* HERO */
.hero{position:relative;background:
  radial-gradient(1100px 500px at 88% -10%, rgba(230,193,106,.18), transparent 60%),
  linear-gradient(160deg,#ffffff 0%, #f4f8f5 55%, #eef4ef 100%);
  overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;padding:70px 22px 84px}
.badge100{display:inline-flex;align-items:center;gap:10px;background:var(--cream);color:#6b5320;border:1px solid #e7d4a6;padding:8px 16px;border-radius:40px;font-weight:700;font-size:14px;margin-bottom:22px;font-family:"Cairo"}
.badge100 b{color:var(--green)}
.hero h1{font-size:54px;font-weight:900;color:var(--green);line-height:1.25;margin-bottom:18px}
.hero h1 .g{color:var(--gold-d)}
.hero p.sub{font-size:20px;color:#3d4c44;max-width:560px;margin-bottom:30px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center}
.hero-art .card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px;box-shadow:0 30px 60px -30px rgba(27,94,75,.4);text-align:center;width:100%}
.hero-art .card img.mark{height:120px;margin-bottom:16px}
.hero-art .card .wm{font-family:"Cairo";font-weight:900;font-size:40px;color:var(--green)}
.hero-art .card .en{color:var(--gold-d);font-size:15px;margin-top:2px}
.hero-art .card .tl{color:var(--muted);font-size:15px;margin-top:10px;border-top:1px solid var(--line);padding-top:12px}
.hero-art .float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 16px;font-weight:700;font-family:"Cairo";box-shadow:0 14px 30px -16px rgba(0,0,0,.25);font-size:14px}
.hero-art .f1{top:6px;right:-6px;color:var(--green)}
.hero-art .f2{bottom:8px;left:-6px;color:var(--gold-d)}

/* STATS */
.stats{background:var(--green);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:40px 22px}
.stat{text-align:center}
.stat b{display:block;font-family:"Cairo";font-weight:900;font-size:40px;color:var(--gold)}
.stat span{color:#cfe0d8;font-size:15px}

/* SERVICES */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;transition:.25s}
.svc:hover{border-color:var(--gold);box-shadow:0 22px 45px -28px rgba(27,94,75,.45);transform:translateY(-3px)}
.svc .ic{width:58px;height:58px;border-radius:15px;background:linear-gradient(150deg,#eaf3ee,#f6efdd);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.svc .ic svg{width:30px;height:30px;stroke:var(--green);fill:none;stroke-width:1.7}
.svc h3{font-size:20px;color:var(--green);margin-bottom:8px}
.svc p{color:var(--muted);font-size:16px}

/* PORTFOLIO */
.port{background:var(--light)}
.grid3.pf .pcard{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.25s}
.pcard:hover{box-shadow:0 26px 50px -30px rgba(27,94,75,.5);transform:translateY(-3px)}
.pcard .thumb{height:210px;overflow:hidden;background:#dfe7e2}
.pcard .thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.pcard .thumb.logo{display:flex;align-items:center;justify-content:center;padding:26px}
.pcard .thumb.logo .chip{background:#fff;border-radius:16px;padding:18px 26px;box-shadow:0 12px 28px -14px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;max-width:100%}
.pcard .thumb.logo img{width:auto;height:auto;max-height:96px;max-width:100%;object-fit:contain}
.thumb.eh{background:linear-gradient(135deg,#e8f0fc,#eafaf7)}
.thumb.wo{background:linear-gradient(135deg,#eef2fb,#f4f7fd)}
.thumb.ni{background:linear-gradient(135deg,#fce7ee,#fff5f8)}
.thumb.la{background:linear-gradient(135deg,#f3e3e6,#faf1f3)}
.pcard .body{padding:20px 22px 24px}
.pcard .tag{display:inline-block;background:var(--cream);color:#6b5320;font-weight:700;font-size:12.5px;padding:4px 12px;border-radius:30px;margin-bottom:10px;font-family:"Cairo"}
.pcard h3{color:var(--green);font-size:21px;margin-bottom:6px}
.pcard p{color:var(--muted);font-size:15.5px}
.pcard{cursor:pointer;display:block}
.pcard .more{display:inline-block;margin-top:11px;color:var(--gold-d);font-family:"Cairo";font-weight:700;font-size:14px}
.pcard:hover .more{color:var(--green)}
/* SAMPLES */
.samples .grid3 .scard{display:block;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.25s;cursor:pointer}
.scard:hover{box-shadow:0 26px 50px -30px rgba(27,94,75,.5);transform:translateY(-4px);border-color:var(--gold)}
.scard .top{height:150px;display:flex;align-items:center;justify-content:center;position:relative}
.scard .top .em{font-size:54px}
.scard .top .lbl{position:absolute;bottom:10px;inset-inline-start:12px;background:rgba(255,255,255,.9);color:var(--green);font-family:"Cairo";font-weight:700;font-size:12px;padding:3px 10px;border-radius:20px}
.scard .law{background:linear-gradient(135deg,#16294a,#0f1e33)}
.scard .re{background:linear-gradient(135deg,#3a3122,#14140f)}
.scard .vet{background:linear-gradient(135deg,#0f766e,#0b5c55)}
.scard .b{padding:20px 22px 24px}
.scard h3{color:var(--green);font-size:20px;margin-bottom:5px}
.scard p{color:var(--muted);font-size:15px}
.scard .more{display:inline-block;margin-top:10px;color:var(--gold-d);font-family:"Cairo";font-weight:700;font-size:14px}
/* SALLA */
.salla{background:linear-gradient(180deg,#f8f2e4,#fbf8ef);border-top:1px solid #ecdcc1;border-bottom:1px solid #ecdcc1}
.salla .eyebrow{color:#b07d2a}
.salla .badge-s{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #ecdcc1;color:#8a5a12;padding:6px 14px;border-radius:30px;font-weight:700;font-family:"Cairo";font-size:13.5px;margin-bottom:14px}
.pcard.invite{border:2px dashed var(--gold);background:#fffdf8}
.pcard .thumb.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f3e9cf,#eaf3ee);font-size:64px}

/* PROCESS */
.proc{background:linear-gradient(180deg,#fff, #f4f8f5)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.step{text-align:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 16px}
.step .n{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;background:var(--green);color:var(--gold);display:flex;align-items:center;justify-content:center}
.step .n svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.8}
.step h3{color:var(--green);font-size:20px;margin-bottom:4px}
.step span{color:var(--muted);font-size:14px}

/* VISION */
.vision .grid3{grid-template-columns:repeat(3,1fr)}
.vcard{background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:18px;padding:26px}
.vcard h3{color:var(--green);font-size:22px;margin-bottom:8px}
.vcard p{color:var(--muted)}
.quote{margin-top:34px;background:var(--green);color:#fff;border-radius:22px;padding:34px;text-align:center;font-family:"Cairo";font-size:24px;font-weight:700}
.quote span{color:var(--gold)}

/* ABOUT */
.about{background:var(--green);color:#fff}
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about h2{color:#fff}
.about .eyebrow{color:var(--gold)}
.about ul{list-style:none;margin-top:18px;display:grid;gap:12px}
.about li{display:flex;gap:10px;align-items:flex-start;color:#dbe8e2}
.about li svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:2;flex-shrink:0;margin-top:4px}
.about .panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:30px;text-align:center}
.about .panel .chip{padding:6px;display:inline-block;margin-bottom:16px}
.about .panel .chip img{height:84px;display:block}
.about .panel .big{font-family:"Cairo";font-weight:900;font-size:30px;color:var(--gold)}
.about .panel .sm{color:#cfe0d8;font-size:15px}

/* CONTACT */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.cbox{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px}
.cline{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.cline:last-child{border:none}
.cline .ci{width:46px;height:46px;border-radius:12px;background:linear-gradient(150deg,#eaf3ee,#f6efdd);display:flex;align-items:center;justify-content:center}
.cline .ci svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:1.8}
.cline b{display:block;color:var(--green);font-family:"Cairo")}
.cline span{color:var(--muted);font-size:15px}
.form input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font-family:inherit;font-size:16px;margin-bottom:14px;background:var(--light)}
.form .btn{width:100%;justify-content:center}

/* FOOTER */
footer{background:#12332a;color:#cfe0d8;padding:52px 0 26px}
footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
footer .chip{padding:2px;display:inline-block;margin-bottom:16px}
footer .chip img{height:58px;display:block}
footer h4{color:#fff;font-size:17px;margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:8px;font-size:15px}
footer a:hover{color:var(--gold)}
footer .bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:20px;color:#9db3aa;font-size:14px}
.wa-float{position:fixed;bottom:22px;left:22px;background:#25D366;color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 25px -6px rgba(0,0,0,.35);z-index:60}
.wa-float svg{width:30px;height:30px;fill:#fff}

@media(max-width:900px){
 .nav ul{display:none} .menu-btn{display:block}
 .hero .wrap{grid-template-columns:1fr;padding:44px 22px 60px} .hero-art{order:-1;max-width:360px;margin:0 auto}
 .hero h1{font-size:40px}
 .stats .wrap{grid-template-columns:repeat(2,1fr)}
 .grid3,.grid3.pf,.steps{grid-template-columns:1fr}
 .about .wrap,.contact .wrap{grid-template-columns:1fr}
 footer .top{grid-template-columns:1fr}
}