:root{
  --bg0:#F7FAFF;
  --bg1:#EEF3FF;
  --card:#FFFFFF;
  --ink:#0F1B2D;
  --muted:#54617A;
  --line: rgba(16, 24, 40, .10);
  --glow: 0 12px 40px rgba(59,130,246,.18);
  --radius: 1.25rem;
  --primary:#2563EB;
}

html,body{height:100%;}
body{
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(236,72,153,.12), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--ink);
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans Arabic", "Helvetica Neue", sans-serif;
  overflow-x: hidden;
}

a{ text-decoration: none; }
.link-muted{ color: var(--muted); }
.link-muted:hover{ color: var(--ink); }

.border-black-10{ border-color: var(--line) !important; }
.text-muted{ color: var(--muted) !important; }

.brand-avatar{
  width: 34px; height: 34px; border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: var(--glow);
  background: rgba(255,255,255,.7);
}
.brand-avatar.lg{ width: 46px; height: 46px; }
.brand-text{ font-weight: 800; letter-spacing: .2px; }

.glass-nav{
  backdrop-filter: blur(10px);
  background: rgba(247,250,255,.70);
  border-bottom: 1px solid var(--line);
}
.navbar .nav-link{ color: rgba(15,27,45,.78); font-weight: 700; }
.navbar .nav-link:hover{ color: rgba(15,27,45,1); }
.navbar .nav-link.active{ color: rgba(15,27,45,1); }
.navbar-toggler{ border-color: var(--line); }

.hero{ position: relative; padding: 5.25rem 0 3rem; }
.kicker{
  display:inline-flex; gap:.5rem; align-items:center;
  padding:.35rem .75rem; border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  color: var(--muted);
  font-size: .9rem;
}
.kicker i{ color: rgba(37,99,235,.95); }

.display-fancy{
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}
.gradient-text{
  background: linear-gradient(90deg, #2563EB, #22C55E, #06B6D4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead-soft{ color: var(--muted); max-width: 60ch; }

.card-glass{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.85);
  box-shadow: var(--glow);
  border-radius: var(--radius);
}
.bg-soft{ background: rgba(255,255,255,.9); }

.icon-bubble{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:grid; place-items:center;
  border: 1px solid var(--line);
  background: rgba(37,99,235,.06);
  box-shadow: 0 10px 24px rgba(37,99,235,.10);
}
.icon-bubble i{ font-size: 1.15rem; color: rgba(37,99,235,.95); }

.btn-primary{
  background: linear-gradient(90deg, rgba(37,99,235,1), rgba(6,182,212,1));
  border: none;
  box-shadow: var(--glow);
}
.btn-primary:hover{ filter: brightness(1.03); }
.btn-outline-primary{ border-color: rgba(37,99,235,.35); color: rgba(37,99,235,1); }
.btn-outline-primary:hover{ background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.45); }

.section{ padding: 4.25rem 0; }
.section-tight{ padding: 2.25rem 0; }
.section-title{ font-weight: 900; letter-spacing: -0.02em; }
.section-sub{ color: var(--muted); max-width: 80ch; }

.feature-card{ height: 100%; transition: transform .2s ease, border-color .2s ease; }
.feature-card:hover{ transform: translateY(-3px); border-color: rgba(16,24,40,.18); }

.hr-glow{ border-color: var(--line) !important; box-shadow: var(--glow); }

.mock{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  overflow: hidden;
  box-shadow: var(--glow);
}
.mock-top{
  background: rgba(37,99,235,.06);
  border-bottom: 1px solid var(--line);
  padding: .75rem 1rem;
  display:flex; align-items:center; gap:.5rem;
}
.dot{ width:10px; height:10px; border-radius:999px; background: rgba(15,27,45,.18); }
.mock-body{ padding: 1rem; }
.badge-soft{
  background: rgba(6,182,212,.14);
  color: #064E5D;
  border: 1px solid rgba(6,182,212,.25);
}

.pricing-card{
  border-radius: calc(var(--radius) + .25rem);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  height: 100%;
}
.pricing-card.highlight{
  border-color: rgba(6,182,212,.35);
  box-shadow: 0 0 50px rgba(6,182,212,.12), var(--glow);
  position: relative;
}
.pricing-card.highlight::before{
  content:"الخيار المقترح";
  position:absolute; top: -12px; right: 20px;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  background: rgba(6,182,212,.14);
  border: 1px solid rgba(6,182,212,.25);
  color: #064E5D;
  font-weight: 700;
}

.form-control, .form-select{
  background: rgba(255,255,255,.85) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  border-radius: 1rem;
}
.form-control::placeholder{ color: rgba(84,97,122,.75); }
.form-control:focus, .form-select:focus{
  box-shadow: var(--glow) !important;
  border-color: rgba(37,99,235,.35) !important;
}
textarea{ min-height: 140px; }

.small-print{ color: rgba(84,97,122,.9); font-size: .95rem; }

.fade-up{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.show{ opacity: 1; transform: translateY(0); }

@media (max-width: 991px){
  .hero{ padding: 4.25rem 0 2rem; }
}