/* زر العودة للرئيسية */
.back-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(45deg, #4a00e0, #8e2de2);
  color: white;
  padding: 10px 18px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(142, 45, 226, 0.4);
  transition: all 0.3s ease;
}

.back-home-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(142, 45, 226, 0.6);
}

.back-home-btn .icon {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.back-home-btn:hover .icon {
  transform: translateX(-3px);
}

:root{
  --indigo:#6a11cb;
  --blue:#2575fc;
  --ink:#0f172a;
  --muted:#64748b;
  --panel:#ffffff;
  --ring:rgba(37,117,252,.25);
  --shadow:0 20px 50px rgba(2,6,23,.15);
  --radius:16px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:#0f172a;background:linear-gradient(135deg,var(--indigo) 0%,var(--blue) 100%)}

/* Header + home */
.container{display:flex;justify-content:space-between;align-items:center;padding:15px 50px}
header{background:rgba(255,255,255,.08);backdrop-filter:saturate(160%) blur(6px);border-bottom:1px solid rgba(255,255,255,.12)}
.logo{font-weight:800;color:#fff}
nav a{margin:0 10px;color:#fff;text-decoration:none;position:relative}
nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:6px;background:linear-gradient(90deg,var(--indigo),var(--blue))}
.btn{display:inline-block;border:0;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:800}
.login-btn{background:linear-gradient(90deg,var(--indigo),var(--blue));color:#fff;text-decoration:none;box-shadow:var(--shadow)}
.hero{text-align:center;color:#fff;padding:80px 16px}
.hero h1{font-size:42px;margin:0 0 12px;opacity:0;transform:translateY(10px);}
.hero h1 span{color:#ffdf5d}
.hero p{opacity:0;transform:translateY(10px)}
.buttons .btn{margin:6px 8px}
.btn.primary{background:linear-gradient(90deg,var(--indigo),var(--blue));color:#fff}
.btn.secondary{background:#fff;color:#000}
.stats{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;background:rgba(255,255,255,.08);padding:24px 16px;margin:24px;opacity:0;transform:translateY(10px)}
.stat h2{color:#fff;margin:0}
.stat p{color:#e5e7eb;margin:6px 0 0}
footer{color:#e5e7eb;text-align:center;padding:24px}

/* Login page */
.login-page{min-height:100vh;position:relative;color:#fff;overflow:hidden}
.glass-header,.glass-footer{background:rgba(255,255,255,.06);backdrop-filter:saturate(160%) blur(6px);border-bottom:1px solid rgba(255,255,255,.12)}
.glass-footer{border-top:1px solid rgba(255,255,255,.12);border-bottom:0}
.bg-bubble{position:absolute;border-radius:50%;filter:blur(2px);opacity:.25;pointer-events:none}
.b1{width:280px;height:280px;left:4%;top:22%;background:radial-gradient(closest-side,#fff,transparent);animation:float 12s ease-in-out infinite}
.b2{width:220px;height:220px;right:6%;bottom:10%;background:radial-gradient(closest-side,#fff,transparent);animation:float 11s 1.5s ease-in-out infinite}
.b3{width:140px;height:140px;right:20%;top:12%;background:radial-gradient(closest-side,#fff,transparent);animation:float 10s .8s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-15px)}}
.login-hero{min-height:calc(100vh - 140px);display:grid;place-items:center;padding:40px 16px}
.glass{background:rgba(255,255,255,.08);backdrop-filter:saturate(160%) blur(18px);border:1px solid rgba(255,255,255,.35)}
.login-card{width:100%;max-width:560px;border-radius:22px;box-shadow:var(--shadow);padding:28px;color:#f8fafc;transition:transform .15s ease, box-shadow .2s ease}
.login-card:hover{transform:translateY(-2px);box-shadow:0 26px 60px rgba(2,6,23,.22)}
.login-logo{width:56px;height:56px;border-radius:16px;margin:0 auto 12px;background:linear-gradient(135deg,var(--indigo),var(--blue));display:grid;place-items:center;font-size:26px;box-shadow:0 10px 30px rgba(37,117,252,.35)}
.login-title{margin:0;text-align:center}
.login-sub{text-align:center;color:#cbd5e1;margin:6px 0 16px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:rgba(255,255,255,.08);padding:8px;border-radius:12px;margin-bottom:16px}
.tab{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:10px;border:0;background:transparent;color:#e2e8f0;cursor:pointer;font-weight:700;transition:.2s}
.tab.active{background:linear-gradient(90deg,var(--indigo),var(--blue));color:#fff;box-shadow:0 8px 24px rgba(37,117,252,.35)}
.form{display:none;animation:fade .25s ease}
.form.visible{display:block}
@keyframes fade{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
/* Floating labels */
.field{position:relative;display:block;margin-bottom:14px}
.field.float input{width:100%;border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:18px 44px 12px 12px;background:rgba(255,255,255,.06);color:#fff;font-size:15px;outline:0;transition:.2s}
.field.float span{position:absolute;right:44px;top:12px;color:#e5e7eb;pointer-events:none;transition:.15s;font-size:14px}
.field.float .ico{position:absolute;right:12px;top:12px;color:#e2e8f0}
.field.float input:placeholder-shown + span{top:12px;font-size:14px;opacity:.9}
.field.float input:not(:placeholder-shown) + span,
.field.float input:focus + span{top:-8px;background:rgba(15,23,42,.55);padding:0 6px;border-radius:8px;font-size:12px}
.field.float input:focus{border-color:#ffffff;box-shadow:0 0 0 4px var(--ring)}
.check{display:inline-flex;align-items:center;gap:8px;color:#e2e8f0;font-size:14px;margin:6px 0 14px}
.btn.gradient{background:linear-gradient(90deg,var(--indigo),var(--blue));color:#fff;box-shadow:0 10px 30px rgba(37,117,252,.35);transition:transform .08s ease, box-shadow .2s ease}
.btn.gradient:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(37,117,252,.45)}
.btn.secondary{background:#fff;color:#0f172a;border:1px solid #e2e8f0}
.helpers{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px;font-size:14px}
.helpers a{color:#dbeafe;text-decoration:none}
.helpers a:hover{text-decoration:underline}

/* Reveal animation base */
[data-reveal],[data-reveal-delay]{opacity:0;transform:translateY(10px)}

/* Ripple effect */
.ripple{position:relative;overflow:hidden;isolation:isolate}
.ripple::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transform:scale(.2);background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);transition:opacity .35s, transform .35s}
.ripple:active::after{opacity:1;transform:scale(1)}

/* Responsive */
@media (max-width:560px){
  .container{padding:12px 16px}
  .login-card{border-radius:18px;padding:22px}
}
/* ===== عن المنصة ===== */
.container-narrow{max-width:980px;margin:0 auto;padding:32px 16px}

.about-hero{
  position:relative;color:#fff;text-align:center;
  padding:80px 16px 40px;
  background:linear-gradient(135deg,#6a11cb 0%, #2575fc 100%);
}
.about-hero .shell{max-width:920px;margin:0 auto}
.pill{
  display:inline-block;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);color:#fff;
  padding:6px 12px;border-radius:999px;font-size:13px;margin-bottom:10px
}
.about-hero h1{margin:8px 0 10px;font-size:36px}
.about-hero p{opacity:.95;max-width:760px;margin:0 auto 16px}
.hero-cta .btn{margin:6px}

/* فقاعات الخلفية */
.bg-bubble{position:absolute;border-radius:50%;filter:blur(2px);opacity:.2;pointer-events:none}
.b1{width:240px;height:240px;left:6%;top:22%;
  background:radial-gradient(closest-side,#fff,transparent);animation:float 12s ease-in-out infinite}
.b2{width:180px;height:180px;right:8%;bottom:8%;
  background:radial-gradient(closest-side,#fff,transparent);animation:float 11s 1.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{
  background:#fff;border:1px solid #e5e7eb;border-radius:14px;
  box-shadow:0 10px 30px rgba(2,6,23,.06);padding:18px;text-align:center
}
.kpi h3{margin:0;font-size:26px;color:#0f172a}
.kpi p{margin:4px 0 0;color:#64748b}

/* المزايا */
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{
  background:#fff;border:1px solid #e5e7eb;border-radius:16px;
  padding:18px;box-shadow:0 10px 30px rgba(2,6,23,.06)
}
.feature h3{margin:0 0 6px}
.feature p{margin:0;color:#64748b}

/* كيف تعمل */
.how-it-works{padding-top:12px}
.tabs.small{
  max-width:480px;margin:10px auto 18px;background:#f1f5f9;
  border-radius:12px;padding:6px;display:grid;grid-template-columns:1fr 1fr;gap:8px
}
.tabs.small .tab{
  background:transparent;color:#475569;border-radius:10px;padding:8px 12px;border:0;cursor:pointer;font-weight:700
}
.tabs.small .tab.active{background:linear-gradient(90deg,#6a11cb,#2575fc);color:#fff}

.stepper{display:none;max-width:720px;margin:0 auto}
.stepper.visible{display:block}
.step{
  display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #e5e7eb;
  border-radius:14px;padding:14px;margin-bottom:10px;box-shadow:0 10px 30px rgba(2,6,23,.06)
}
.badge{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(90deg,#6a11cb,#2575fc);color:#fff;font-weight:800
}

/* الأسئلة المتكررة + CTA */
.faq h2{text-align:center;margin-bottom:10px}
.acc{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-bottom:10px}
.acc > summary{cursor:pointer;font-weight:700;color:#0f172a}
.acc > p{margin:8px 2px 0;color:#64748b}

.final-cta{text-align:center;padding-bottom:50px}
.final-cta h2{margin:0}
.final-cta p{color:#64748b;margin:8px 0 14px}

/* تمييز التبويب النشط في الناف */
nav a.active{position:relative}
nav a.active::after{
  content:"";position:absolute;right:0;left:0;bottom:-6px;height:3px;border-radius:6px;
  background:linear-gradient(90deg,#6a11cb,#2575fc)
}

/* تجاوبية */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .about-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .about-hero h1{font-size:28px}
}
.about-hero {
  position: relative;
  color: #fff;
  text-align: center;
  padding: 80px 16px 40px;
  background: linear-gradient(135deg,#6a11cb 0%, #2575fc 100%);
}

.container-narrow {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 16px;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}

.kpi {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  padding: 18px;
  text-align: center;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}

.feature {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}
/* زر عرض الملف الشخصي */
.profile-section {
  margin: 20px 0;
  text-align: center;
}

.profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(45deg, #4a00e0, #8e2de2);
  color: white;
  padding: 12px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(142, 45, 226, 0.4);
  transition: all 0.3s ease;
}

.profile-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(142, 45, 226, 0.6);
}

.profile-btn .icon {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.profile-btn:hover .icon {
  transform: rotate(10deg) scale(1.1);
}
.contact-section {
  padding: 50px 20px;
  text-align: center;
  background: rgba(255,255,255,0.05);
  border-top: 2px solid rgba(255,255,255,0.1);
}

.contact-section h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.contact-form {
  max-width: 500px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form input, .contact-form textarea {
  padding: 10px;
  border-radius: 8px;
  border: none;
}

.contact-form button {
  background: linear-gradient(45deg, #4a00e0, #8e2de2);
  color: white;
  padding: 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.contact-form button:hover {
  transform: scale(1.05);
}

.contact-section {
  padding: 48px 20px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.contact-section h2 { margin: 0 0 8px; font-size: 24px; }
.contact-form {
  max-width: 520px;
  margin: 18px auto 0;
  display: grid;
  gap: 12px;
  text-align: right;
}
.contact-form input,
.contact-form textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  outline: none;
}
.contact-form button {
  background: linear-gradient(45deg, #4a00e0, #8e2de2);
  color: #fff;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.contact-form button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(142,45,226,.25); }
.contact-form button[disabled] { opacity: .6; cursor: wait; }
.contact-status { margin-top: 10px; font-weight: 700; }
:root{
  --bg: #0b1020;
  --ink: #0f172a;
  --muted:#64748b;
  --white:#fff;
  --primary:#6d5efc;
  --primary-2:#8e2de2;
  --glass: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.12);
  --shadow: 0 20px 50px rgba(0,0,0,.25);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#0b1324;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(142,45,226,.20), transparent 60%),
    radial-gradient(800px 600px at -10% 20%, rgba(77,0,224,.18), transparent 50%),
    linear-gradient(180deg,#f7f8ff 0%, #ffffff 60%);
}

/* Containers */
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:20;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(255,255,255,.7);
  border-bottom:1px solid #eef2f7;
}
.nav{
  padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{font-weight:800;font-size:22px;letter-spacing:.5px;color:#222}
nav a{
  color:#334155;text-decoration:none;margin:0 8px;font-weight:600;
  padding:8px 10px;border-radius:10px;transition:background .2s ease,color .2s ease;
}
nav a:hover{background:#eef2ff;color:#1e1b4b}
nav a.active{background:#e9e7ff;color:#2d1bb3}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 16px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font-weight:800;
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 10px 20px rgba(109,94,252,.2);
}
.btn.pill{border-radius:999px}
.btn.primary{
  background:linear-gradient(45deg,#4a00e0,#8e2de2);color:#fff;
}
.btn.ghost{
  background:#ffffff;color:#1f2a44;border:1px solid #e5e7eb;
}
.btn.xl{padding:14px 20px;font-size:16px}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(109,94,252,.25)}

/* Hero */
.hero{
  position:relative;overflow:hidden;
  padding:80px 0 50px;
  background:
    radial-gradient(1000px 700px at 90% -10%, rgba(142,45,226,.15), transparent 60%),
    linear-gradient(180deg, rgba(109,94,252,.08), rgba(109,94,252,0) 60%);
}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.hero-copy h1{font-size:40px;margin:0 0 10px}
.hero-copy h1 span{background:linear-gradient(45deg,#4a00e0,#8e2de2);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{color:#475569;margin:0 0 16px}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap}

.hero-visual{position:relative;min-height:320px}
.orb{
  position:absolute;filter:blur(16px);border-radius:50%;
  animation:float 8s ease-in-out infinite;
}
.orb-1{width:180px;height:180px;background:#8e2de2;opacity:.5;right:10%;top:10%}
.orb-2{width:120px;height:120px;background:#4a00e0;opacity:.35;left:15%;bottom:15%;animation-delay:1s}
.orb-3{width:80px;height:80px;background:#7c4dff;opacity:.3;right:30%;bottom:10%;animation-delay:2s}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.glass-pane{
  position:absolute;inset:20px;border-radius:20px;
  background:rgba(255,255,255,.16);backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.3);
  overflow:hidden;box-shadow:var(--shadow);
}
.pane-line{height:25%;border-bottom:1px dashed rgba(255,255,255,.25)}

/* Stats */
.stats{padding:30px 0}
.stats-grid{
  display:grid;gap:16px;grid-template-columns:repeat(4,1fr);
}
.stat-card{
  background:rgba(255,255,255,.65);backdrop-filter: blur(8px);
  border:1px solid #eef2f7;border-radius:16px;padding:18px;text-align:center;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.stat-card h2{margin:0;font-size:28px}
.stat-card p{margin:6px 0 0;color:#475569;font-weight:600}

/* Features */
.features{padding:30px 0 60px}
.features-grid{
  display:grid;gap:16px;grid-template-columns:repeat(3,1fr);
}
.feature{
  background:rgba(255,255,255,.75);backdrop-filter: blur(6px);
  border:1px solid #eef2f7;border-radius:16px;padding:22px;min-height:150px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.feature h3{margin:0 0 6px}
.feature p{margin:0;color:#475569}

/* Contact (نُجمّله عبر CSS فقط بدون تعديل الحقول) */
#contact{
  /* نتغلّب على الـ inline style عبر !important */
  background: linear-gradient(135deg, rgba(74,0,224,.06), rgba(142,45,226,.06)) !important;
  padding: 40px 0 !important;
  border-top:1px solid #eef2f7;
}
#contact h2{
  text-align:center;margin:0 0 10px;font-size:24px;
}
#contact form{
  max-width:560px;margin:14px auto 0;padding:18px;
  background:#fff;border:1px solid #eef2f7;border-radius:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  display:grid;gap:10px;
}
#contact label{font-weight:700;color:#334155;margin-top:4px}
#contact input,#contact textarea{
  width:100%;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px;font-size:15px;outline:none;
  transition:border .2s ease, box-shadow .2s ease;
}
#contact input:focus,#contact textarea:focus{
  border-color:#8e2de2; box-shadow:0 0 0 3px rgba(142,45,226,.15);
}
#contact button[type="submit"]{
  background:linear-gradient(45deg,#4a00e0,#8e2de2);color:#fff;border:0;border-radius:999px;
  padding:12px 16px;font-weight:800;cursor:pointer;transition:transform .15s ease, box-shadow .2s ease;
  box-shadow:0 12px 24px rgba(142,45,226,.25);
}
#contact button[type="submit"]:hover{
  transform:translateY(-1px);box-shadow:0 16px 28px rgba(142,45,226,.35);
}
#responseMsg{
  text-align:center;margin-top:10px;font-weight:700;
}

/* Footer */
.site-footer{padding:24px 0;border-top:1px solid #eef2f7;background:#fff}
.site-footer p{margin:0;color:#64748b;text-align:center}

/* Reveal basic */
[data-reveal],[data-reveal-delay]{transition:opacity .5s ease, transform .5s ease}

/* Responsive */
@media (max-width: 992px){
  .hero-inner{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .features-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .hero{padding:60px 0 40px}
  .hero-copy h1{font-size:32px}
  nav a{margin:0 4px}
}
/* Toasts */
#toasts{
  position: fixed;
  bottom: 24px;
  right: 24px; /* استبدل إلى left:24px إذا تفضّل */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast{
  min-width: 280px;
  max-width: 360px;
  background: #111827;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: start;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  animation: toast-in .25s ease forwards;
}
.toast.success{ background: linear-gradient(135deg,#16a34a,#22c55e); }
.toast.error{ background: linear-gradient(135deg,#ef4444,#f97316); }
.toast .icon{ font-size: 18px; line-height: 1; }
.toast .msg{ font-weight: 700; }
.toast .close{
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-size: 18px; line-height: 1; opacity: .9;
}
.toast:hover{ transform: translateY(0) scale(1.01); }
@keyframes toast-in{
  to { opacity: 1; transform: translateY(0); }
}