:root{
  --bg-dark:#272b3f;
  --bg:#f5f7f9;
  --surface:#ffffff;
  --text:#1f2430;
  --muted:#6b7280;
  --accent:#38b46a;
  --accent-2:#2b6ff7;
  --radius:14px;
  --shadow:0 10px 30px rgba(17,24,39,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg);
}
.container{width:min(1100px,92%);margin-inline:auto}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.center{text-align:center}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:50;
  background:var(--bg-dark);
  color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-family:"Sora",sans-serif; font-weight:700; color:#fff}
.nav-links{display:flex; gap:26px}
.nav-links a{color:#e5e7eb; text-decoration:none; font-weight:500}
.nav-links a:hover{color:#fff}
.nav-toggle{display:none; background:none; border:0; color:#fff}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px}
.lang-switcher{margin-left:14px}
.lang-switcher select{background:#33384f;color:#e5e7eb;border:1px solid #40445d;border-radius:10px;padding:6px 10px}
.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Powered By */
.powered{background:#1f2232;color:#c7cad6}
.powered .container{display:flex;gap:10px;justify-content:center;align-items:center;height:46px}
.powered strong{color:#5ae089}

/* Sections */
.section{padding:72px 0}
.section-dark{background:var(--bg-dark); color:#e9ecf4}
.section-header{margin-bottom:34px; text-align:center}
.section-header h2{
  font-family:"Sora",sans-serif; font-weight:800; letter-spacing:.2px; margin:0 0 10px
}
.section-header p{color:#8087a2; margin:0}

/* Hero */
.hero{padding:80px 0 40px}
.hero-title{
  font-family:"Sora",sans-serif; font-weight:700; font-size:44px; line-height:1.2; margin:0 0 14px; color:#fff
}
.accent{color:var(--accent)}
.hero-sub{color:#c5cadb; max-width:900px}
.hero-cta{margin:22px 0 28px; display:flex; gap:14px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border-radius:12px; text-decoration:none; font-weight:600; border:2px solid transparent}
.btn-primary{background:var(--accent); color:#fff}
.btn-ghost{background:#fff; color:#1f2937; border-color:#e5e7eb}
.btn-dark{background:#1f2232; color:#e9ecf4; border-color:#2f344a}
.btn.block{width:100%}

.hero-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px}
.feature-card{
  background:#2b2f45; border-radius:var(--radius); padding:22px;
  color:#e9ecf4; box-shadow:var(--shadow)
}
.feature-card .icon{font-size:28px; margin-bottom:8px}
.feature-card h3{margin:6px 0 8px; font-family:"Sora",sans-serif}

/* Micro-animations */
.lift{transition:transform .25s ease, box-shadow .25s ease}
.lift:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(17,24,39,.12)}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}

/* Services */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.service-card{
  background:var(--surface); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); position:relative
}
.service-icon{font-size:36px}
.badge{
  position:absolute; transform:translateY(-12px);
  display:inline-block; background:#a5e1b9; color:#154f2e; padding:4px 10px; border-radius:999px; font-size:.85rem
}
.service-card h3{margin:10px 0 10px; font-family:"Sora",sans-serif}
.checklist{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:10px}
.checklist li{position:relative; padding-left:26px}
.checklist li::before{
  content:""; position:absolute; left:0; top:7px; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #fff 40%, #fff 40%) padding-box, conic-gradient(var(--accent) 0 100%) border-box;
  border:3px solid var(--accent)
}

/* Pricing */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch}
.price-card{background:var(--surface); border-radius:20px; padding:26px; box-shadow:var(--shadow); position:relative}
.price-card h3{font-family:"Sora",sans-serif; margin:0 0 10px}
.color-square{width:20px; height:20px; border-radius:4px; background:var(--sq); margin-bottom:10px; box-shadow:0 0 0 3px #e9eef5 inset}
.price{font-size:22px; margin:10px 0; color:var(--accent)}
.price-card.popular{outline:3px solid var(--accent); box-shadow:0 20px 40px rgba(56,180,106,.18)}
.popular-pill{
  position:absolute; left:50%; top:-14px; transform:translateX(-50%);
  background:#a8e5c4; color:#0e5a34; padding:6px 12px; border-radius:999px; font-weight:700; font-size:.85rem
}

/* Add-ons */
.addon-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.addon{
  display:grid; grid-template-columns:28px 1fr auto; gap:14px; align-items:center;
  background:var(--surface); border-radius:16px; padding:18px; box-shadow:var(--shadow)
}
.dot{width:18px; height:18px; border-radius:50%; background:var(--dot); box-shadow:inset 0 0 0 3px rgba(0,0,0,.08)}
.addon h4{margin:0 0 4px; font-family:"Sora",sans-serif}
.price-right{color:var(--accent); font-weight:800}
.note{
  margin-top:16px; background:#fff; padding:16px; border-radius:12px; color:var(--muted); box-shadow:var(--shadow)
}

/* Portfolio */
.portfolio-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.project{background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.thumb{height:190px; background:#dfe6f1}
.thumb.placeholder{background:linear-gradient(135deg,#dfe6f1,#cfd8e6)}
.project-body{padding:16px}
.kicker{color:var(--accent); font-weight:700; font-size:.85rem}
.tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.tags span{background:#f0f3f8; border-radius:999px; padding:6px 10px; color:#3b455c; font-weight:600; font-size:.85rem}

/* About / Metrics / Approach */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:24px 0}
.metric-box{background:#2e3247; border-radius:14px; padding:22px; text-align:left; color:#e4e7f0}
.metric-box strong{color:var(--accent); font-size:24px}
.approach{margin-top:28px; background:#2e3247; border-radius:14px; padding:18px 18px 4px}
.approach h3{margin:0 0 10px; font-family:"Sora",sans-serif}
.steps{display:flex; flex-direction:column; gap:16px}
.step{display:flex; gap:14px; align-items:flex-start; padding:12px 10px; border-radius:12px}
.num{width:30px; height:30px; border-radius:999px; background:var(--accent); color:#103c22; display:flex; align-items:center; justify-content:center; font-weight:800}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr; gap:20px}
.contact-card,.info-card{background:#fff; border-radius:16px; padding:20px; box-shadow:var(--shadow)}
.contact-card h3,.info-card h3{margin:0 0 10px; font-family:"Sora",sans-serif}
label{display:block; font-weight:600; margin:12px 0 6px}
input,textarea{width:100%; padding:14px 14px; border-radius:12px; border:1px solid #e5e7eb; outline:none; font:inherit; background:#fafbfd}
input:focus,textarea:focus{border-color:#c9d3f0; box-shadow:0 0 0 4px #eaf1ff}
.info-row{display:flex; gap:12px; align-items:center; background:#f7f9fc; padding:12px; border-radius:12px; margin:0 0 10px}
.info-ico{font-size:20px}

/* CTA band */
.cta-band{background:#22263a; color:#e9ecf4; padding:28px 0}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.cta-inner h3{margin:0 0 6px; font-family:"Sora",sans-serif}

/* Footer */
.footer{background:var(--bg-dark); color:#d9dde9; padding:40px 0}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:20px}
.foot-col h4{margin:0 0 10px; font-family:"Sora",sans-serif}
.foot-col a{display:block; color:#c9cee2; text-decoration:none; padding:4px 0}
.socials{display:flex; gap:12px; font-size:20px}

/* Modal */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; display:grid; place-items:center; z-index:100}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5)}
.modal-dialog{position:relative; background:#fff; border-radius:16px; padding:20px; width:min(520px,92%); box-shadow:var(--shadow)}
.modal-close{position:absolute; right:12px; top:10px; border:0; background:transparent; font-size:22px; cursor:pointer}
.modal-title{font-family:"Sora",sans-serif; margin:0 0 8px}
.modal-actions{display:flex; gap:10px; margin-top:12px}

/* RTL support */
[dir="rtl"] body{font-family:"Inter", "Noto Naskh Arabic", system-ui}
[dir="rtl"] .nav-inner{flex-direction:row-reverse}
[dir="rtl"] .nav-links{flex-direction:row-reverse}
[dir="rtl"] .checklist li{padding-left:0; padding-right:26px}
[dir="rtl"] .checklist li::before{left:auto; right:0}
[dir="rtl"] .cta-inner{flex-direction:column; align-items:flex-start}

/* Responsive */
@media (max-width: 1000px){
  .hero-cards{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .addon-grid{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 760px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .footer-grid{grid-template-columns:1fr}
}