:root{
  --bg:#f6f7fb;
  --text:#0b1220;
  --muted:#64748b;
  --line:rgba(15,23,42,.08);

  --primary:#16a34a;   /* أخضر أساسي */
  --primary-soft:rgba(22,163,74,.12);

  --danger:#ef4444;
  --ok:#10b981;

  --shadow:0 20px 60px rgba(2,6,23,.10);
  --radius:20px;
}

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
  margin:0;
  font-family:"Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:var(--text);
  min-height:100vh;
}

  a{color:inherit;text-decoration:none}
  .container{
    width:min(1440px, 100%);
    margin:0 auto;
    padding:clamp(16px, 2vw, 32px);
  }

  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 0 16px;
    flex-wrap:wrap;
  }

  .brand{display:flex;align-items:center;gap:12px}
  .logoWrap{
    width:116px;
    height:52px;
    border-radius:14px;
    background:linear-gradient(135deg, #91cd22, #4dd4ff);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 30px rgba(77,212,255,.18);
    overflow:hidden;
  }
 .logoImg{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
  .brandTitle{margin:0;font-size:16px;font-weight:900}
  .brand p{margin:2px 0 0;font-size:12px;color:var(--muted)}

  .navlinks{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .pill{
    font-size:12px;
    color:var(--muted);
    border:1px solid var(--line);
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.7);
    white-space:nowrap;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:13px 16px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.12);
    background:#fff;
    color:var(--text);
    cursor:pointer;
    font-weight:900;
    transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
    user-select:none;
  }
  .btn:hover{
    transform:translateY(-1px);
    border-color:rgba(15,23,42,.18);
    box-shadow:0 10px 30px rgba(2,6,23,.05);
  }
  .btn.primary{
  border:none;
  background:var(--primary);
  color:#fff;
}

.btn.primary:hover{
  background:#1d4ed8;
}
  .btn.ghost{
    background:transparent;
    color:var(--muted);
  }

  .heroWrap{
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:calc(var(--radius) + 8px);
    box-shadow:var(--shadow);
    background:
      radial-gradient(900px 520px at 15% 10%, rgba(77,212,255,.14), transparent 60%),
      radial-gradient(900px 520px at 90% 15%, rgba(145,205,34,.14), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.93));
  }

  .heroGlow{
    position:absolute;
    inset:-2px;
    pointer-events:none;
    background:
      radial-gradient(500px 280px at 20% 25%, rgba(77,212,255,.16), transparent 60%),
      radial-gradient(520px 300px at 85% 20%, rgba(145,205,34,.16), transparent 60%);
    filter:blur(2px);
  }

  .hero{
    position:relative;
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:18px;
    align-items:stretch;
    padding:18px;
  }

  @media (max-width:1100px){
    .hero{grid-template-columns:1fr}
  }

  .card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

  .heroLeft{padding:22px}
  .kickerRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }

  .kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(77,212,255,.35);
    background:linear-gradient(90deg, rgba(77,212,255,.10), rgba(145,205,34,.08));
    color:#0f172a;
    font-weight:800;
    font-size:12px;
  }

  .dotLux{
    width:10px;
    height:10px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--primary), var(--primary2));
    box-shadow:0 0 0 4px rgba(77,212,255,.12);
  }

  .luxBadge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.75);
    font-weight:900;
    font-size:12px;
    color:var(--muted);
  }

  .spark{
    width:10px;
    height:10px;
    border-radius:4px;
    background:linear-gradient(90deg, var(--primary), var(--primary2));
    transform:rotate(20deg);
  }

  .heroTitle{
    margin:14px 0 10px;
    font-size:clamp(29px, 3.4vw, 55px);
    line-height:1.18;
    font-weight:900;
    letter-spacing:.1px;
  }

  .heroTitle span{
    background:linear-gradient(90deg, var(--primary), var(--primary2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .heroTitle .accent2{
    background:linear-gradient(90deg, var(--primary2), var(--primary));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .heroDesc{
    margin:0 0 14px;
    color:var(--muted);
    line-height:1.95;
    font-size:15px;
    max-width:70ch;
  }

  .heroActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
  .trustRow{
    margin-top:14px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    color:var(--muted);
    font-size:12px;
  }
  .trustChip{
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.76);
    color:var(--muted);
    font-weight:700;
  }

  .heroStats{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
  }

  @media (max-width:560px){
    .heroStats{grid-template-columns:1fr}
  }

  .statChip{
    border:1px solid var(--line);
    background:rgba(255,255,255,.76);
    border-radius:16px;
    padding:12px;
  }
  .statChip b{display:block;font-size:18px;font-weight:900}
  .statChip small{color:var(--muted);line-height:1.6}

  .features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:14px;
  }

  @media (max-width:620px){
    .features{grid-template-columns:1fr}
  }

  .feat{
    padding:12px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.76);
    display:flex;
    gap:10px;
    align-items:flex-start;
  }
  .feat .ico{
    width:34px;
    height:34px;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(145,205,34,.14), rgba(77,212,255,.10));
    border:1px solid rgba(77,212,255,.22);
    display:grid;
    place-items:center;
    font-weight:900;
    flex:0 0 auto;
  }
  .feat b{display:block;margin-bottom:2px}
  .feat small{color:var(--muted);line-height:1.6}

  .note{
    margin-top:12px;
    padding:12px 14px;
    border-radius:16px;
    border:1px dashed rgba(15,23,42,.18);
    background:rgba(255,255,255,.72);
    color:var(--muted);
    line-height:1.8;
    font-size:13px;
  }

  .heroRight{
    position:relative;
    padding:18px;
    overflow:hidden;
  }

  .rightTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(15,23,42,.08);
  }

  .miniTag{
    font-size:11px;
    font-weight:900;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.75);
    color:var(--muted);
  }

  .miniDash{
    display:grid;
    gap:10px;
    margin-top:12px;
  }

  .dashCard{
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.78);
    border-radius:16px;
    padding:12px;
  }
  .dashLabel{font-size:12px;color:var(--muted);font-weight:800}
  .dashValue{font-size:18px;font-weight:900;margin-top:6px}
  .dashHint{font-size:12px;color:var(--muted);margin-top:2px}
  .dashBar{
    margin-top:10px;
    height:10px;
    border-radius:999px;
    background:rgba(15,23,42,.08);
    overflow:hidden;
  }
  .dashBar i{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, var(--primary), var(--primary2));
  }

  .rightBox{
    margin-top:12px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.78);
    border-radius:16px;
    padding:12px;
  }
  .rightBox b{display:block;font-weight:900;margin-bottom:8px}
  .rightList{
    margin:0;
    padding:0 18px 0 0;
    color:var(--muted);
    line-height:1.9;
  }
  .rightList li{margin:6px 0}

  .safeNote{
    margin-top:10px;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
  }

  .okDot{
    width:9px;
    height:9px;
    border-radius:999px;
    background:var(--ok);
    box-shadow:0 0 0 4px rgba(16,185,129,.14);
  }

  .orb{
    position:absolute;
    width:220px;
    height:220px;
    border-radius:999px;
    filter:blur(10px);
    opacity:.42;
    pointer-events:none;
  }
  .orb1{
    right:-90px;
    top:-80px;
    background:radial-gradient(circle at 30% 30%, rgba(77,212,255,.55), transparent 62%);
  }
  .orb2{
    left:-110px;
    bottom:-110px;
    background:radial-gradient(circle at 30% 30%, rgba(145,205,34,.50), transparent 62%);
  }

  .section{padding:14px 0 26px}
  .sectionHead{
    text-align:center;
    margin:0 auto 14px;
    max-width:820px;
  }
  .sectionHead h2{
    margin:0 0 8px;
    font-size:clamp(24px, 2.2vw, 36px);
    font-weight:900;
  }
  .sectionHead p{
    margin:0;
    color:var(--muted);
    line-height:1.9;
    font-size:15px;
  }

  .partners{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:14px;
    align-items:stretch;
  }

  @media (max-width:1100px){
    .partners{grid-template-columns:1fr}
  }

  .services,
  .resultsGrid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    align-items:stretch;
  }

  @media (max-width:1100px){
    .services,.resultsGrid{grid-template-columns:1fr}
  }

  .svc,.result{padding:16px}
  .svc h3,.result b{
    margin:0 0 8px;
    font-size:18px;
    font-weight:900;
  }
  .svc p,.result p{
    margin:0;
    color:var(--muted);
    line-height:1.9;
    font-size:14px;
  }
  .svc ul{
    margin:12px 0 0;
    padding:0 18px 0 0;
    color:var(--muted);
    line-height:1.9;
  }
  .svc li{margin:6px 0}

  .tag{
    display:inline-flex;
    margin-bottom:10px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid rgba(145,205,34,.25);
    background:rgba(145,205,34,.10);
    color:#0f172a;
    font-weight:800;
    font-size:12px;
  }

  .metric{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
    color:var(--muted);
    font-weight:800;
    font-size:13px;
  }

  .chip{
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.75);
  }

  .faq{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:start;
  }

  @media (max-width:980px){
    .faq{grid-template-columns:1fr}
  }

  details{
    border:1px solid var(--line);
    background:rgba(255,255,255,.78);
    border-radius:16px;
    padding:14px;
  }
  summary{
    cursor:pointer;
    list-style:none;
    font-weight:900;
    font-size:15px;
  }
  summary::-webkit-details-marker{display:none}
  details p{
    margin:10px 0 0;
    color:var(--muted);
    line-height:1.85;
    font-size:14px;
  }

  .ctaBox{
    padding:22px;
    text-align:center;
  }
  .ctaBox h2{margin:0 0 8px;font-size:28px;font-weight:900}
  .ctaBox p{margin:0 auto 12px;max-width:760px;color:var(--muted);line-height:1.9}

  .footer{
    border-top:1px solid var(--line);
    margin-top:10px;
    padding:16px 0 10px;
    color:var(--muted);
    font-size:12px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }

  .wizardTop{
    padding:16px 18px;
    background:linear-gradient(90deg, rgba(145,205,34,.14), rgba(77,212,255,.10));
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }

  .progress{flex:1;min-width:240px}
  .progressLabel{
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:12px;
    margin-bottom:8px;
    gap:10px;
  }
  .bar{
    height:10px;
    border-radius:999px;
    background:rgba(15,23,42,.10);
    overflow:hidden;
  }
  .bar>i{
    display:block;
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--primary), var(--primary2));
    border-radius:999px;
    transition:width .35s ease;
  }

  .dots{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px}
  .dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:rgba(15,23,42,.18);
    border:1px solid rgba(15,23,42,.18);
  }
  .dot.active{background:var(--primary2);border-color:rgba(77,212,255,.55)}
  .dot.done{background:var(--ok);border-color:rgba(16,185,129,.55)}

  .wizardBody{padding:18px;background:rgba(15,23,42,.02)}
  .step{display:none;animation:fade .25s ease}
  .step.active{display:block}
  @keyframes fade{
    from{opacity:.2;transform:translateY(6px)}
    to{opacity:1;transform:none}
  }

  .step h2{margin:0 0 8px;font-size:18px}
  .step p{margin:0 0 14px;color:var(--muted);line-height:1.85;font-size:14px}
  .req{color:var(--danger);font-weight:900}

  .checklist{
    margin:14px 0 0;
    padding:14px;
    border-radius:16px;
    background:rgba(255,255,255,.75);
    border:1px solid var(--line);
  }
  .checkline{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:10px 0;
    line-height:1.7;
  }
  .checkline input{margin-top:3px;transform:scale(1.1)}

  .options{display:grid;gap:10px;margin-top:12px}
  .opt{
    border:1px solid var(--line);
    background:rgba(255,255,255,.76);
    padding:14px;
    border-radius:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    transition:transform .12s ease,border-color .12s ease,background .12s ease;
  }
  .opt:hover{
    transform:translateY(-1px);
    border-color:rgba(77,212,255,.35);
    background:rgba(77,212,255,.06);
  }
  .opt .left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .badge{
    width:30px;
    height:30px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background:rgba(145,205,34,.12);
    border:1px solid rgba(145,205,34,.25);
    color:var(--text);
    font-weight:900;
    flex:0 0 auto;
  }
  .opt .txt{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  .opt .txt b{
    font-size:15px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .opt .txt small{color:var(--muted);font-size:12px;line-height:1.6}
  .opt input{accent-color:var(--primary2)}

  .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:10px;
  }
  @media (max-width:720px){
    .grid{grid-template-columns:1fr}
  }

  .field{display:flex;flex-direction:column;gap:8px}
  .field label{color:var(--muted);font-size:13px}
  input[type="text"], input[type="email"], input[type="tel"]{
    width:100%;
    padding:14px 12px;
    border-radius:16px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--text);
    outline:none;
  }
  input::placeholder{color:rgba(71,85,105,.72)}
  input:focus{
    border-color:rgba(77,212,255,.55);
    box-shadow:0 0 0 4px rgba(77,212,255,.14);
  }

  .actions{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--line);
    flex-wrap:wrap;
  }

  .error,
  .success{
    margin-top:12px;
    padding:12px 14px;
    border-radius:16px;
    line-height:1.7;
    font-size:13px;
    display:none;
  }

  .error{
    border:1px solid rgba(239,68,68,.28);
    background:rgba(239,68,68,.10);
    color:#7f1d1d;
  }

  .success{
    border:1px solid rgba(16,185,129,.28);
    background:rgba(16,185,129,.12);
    color:#065f46;
  }

  .mini{color:var(--muted);font-size:12px}

  .lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:9999;
  }
  .lightbox.show{display:flex;animation:fadeIn .25s ease}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .lightbox img{
    max-width:min(1200px, 92vw);
    max-height:90vh;
    border-radius:14px;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
    background:#fff;
  }
  .lightbox-close{
    position:absolute;
    top:20px;
    left:20px;
    width:44px;
    height:44px;
    border-radius:12px;
    border:none;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    backdrop-filter:blur(6px);
  }

  .zoomable{cursor:zoom-in}

  .seoShots4{
    padding:16px;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }

  @media (max-width:820px){
    .seoShots4{grid-template-columns:1fr}
  }

  .shot img{
    width:100%;
    height:clamp(240px, 18vw, 420px);
    object-fit:cover;
    border-radius:14px;
    border:1px solid var(--line);
    background:#fff;
  }
  .shot figcaption{
    margin-top:8px;
    font-size:12px;
    color:var(--muted);
    font-weight:800;
    text-align:center;
  }

  @media (max-width:520px){
    .navlinks{width:100%}
    .navlinks .btn{width:100%}
    .heroActions .btn{width:100%}
  }
  .footer{
  background: #0f172a;
  color: #cbd5e1;
  padding: 60px 0 20px;
  margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer .container{
  width: min(1200px, 92%);
  margin: 0 auto;
}

.footer-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 30px;
}

.footer h3{
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 14px;
  font-weight: 800;
}

.footer ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer ul li{
  margin-bottom: 10px;
}

.footer a{
  color: #94a3b8;
  text-decoration: none;
  font-size: 14px;
  transition: 0.2s ease;
  line-height: 1.7;
}

.footer a:hover{
  color: #4dd4ff;
  padding-right: 4px;
}

.footer p{
  font-size: 13px;
  line-height: 1.9;
  color: #94a3b8;
  max-width: 320px;
}

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
  text-align: center;
  font-size: 12px;
  color: #64748b;
}

/* Responsive */
@media (max-width: 900px){
  .footer-grid{
    grid-template-columns: 1fr;
    text-align: right;
  }

  .footer p{
    max-width: 100%;
  }
}