/*
  صفحة الهبوط — هوية "Signal": بوتك = إشارة حيّة مستمرة. تبني على متغيرات
  اللوحة الأساسية (style.css) وتضيف طبقة تسويقية: هيرو ثلاثي الأبعاد،
  خط سير "كيف يعمل"، شبكة مزايا غير متماثلة (Bento) بمعاينات حية مصغّرة،
  باقات، وأسئلة شائعة. الصفحة دايمًا Dark بشكل افتراضي بغض النظر عن
  تفضيل المستخدم المحفوظ للوحة الداخلية.
*/

body.landing {
  overflow-x: hidden;
  --live: #2dd4bf;
  --live-soft: rgba(45, 212, 191, 0.14);
  --live-dim: #164e47;
}

/* ===== شريط علوي ثابت ===== */
.lp-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line-soft);
}
.lp-topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (min-width: 640px) {
  .lp-topbar-inner { padding: 16px 28px; }
}
.lp-login-btn { padding: 9px 20px; font-size: 13px; flex-shrink: 0; }

.lp-nav-links {
  display: none;
  align-items: center;
  gap: 28px;
  font-size: 13.5px;
  font-weight: 600;
}
.lp-nav-links a { color: var(--ink-dim); transition: color .15s ease; }
.lp-nav-links a:hover { color: var(--ink); }
@media (min-width: 860px) {
  .lp-nav-links { display: flex; }
}

.pulse-dot { position: relative; }
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
  0% { opacity: 0.55; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* ===== الهيرو ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 80px;
  overflow: hidden;
  background:
    radial-gradient(1200px 620px at 50% 0%, rgba(129, 140, 248, 0.16), transparent 65%),
    radial-gradient(900px 500px at 90% 100%, var(--live-soft), transparent 60%),
    var(--bg);
}

#botMesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.9;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  text-align: center;
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  margin: 0 0 22px;
}

.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px var(--live-soft);
  flex-shrink: 0;
  animation: liveBlink 1.8s ease-in-out infinite;
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.hero h1 {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.15;
  margin: 0 0 20px;
  color: var(--ink);
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--accent), var(--accent-2) 55%, var(--live));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: 16px;
  line-height: 1.75;
  max-width: 600px;
  margin: 0 auto 34px;
  color: var(--ink-dim);
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.lp-cta { padding: 13px 30px; font-size: 14.5px; }
.lp-cta-ghost { padding: 13px 26px; font-size: 14.5px; background: transparent; }

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.stat-num small { font-size: 13px; color: var(--accent-2); font-weight: 600; }
.stat-label { font-size: 12px; color: var(--ink-faint); }
.stat-sep { width: 1px; height: 34px; background: var(--line); }

.hero-scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 22px; height: 36px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  display: flex;
  justify-content: center;
  padding-top: 7px;
}
.hero-scroll-cue span {
  width: 4px; height: 8px;
  border-radius: 3px;
  background: var(--accent-2);
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}
@media (max-width: 720px) { .hero-scroll-cue { display: none; } }

@media (max-width: 640px) {
  .hero { padding: 110px 16px 60px; }
  .hero-stats { gap: 14px; }
  .stat-sep { display: none; }
}

/* ===== عناوين الأقسام ===== */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-align: center;
  margin: 0 0 10px;
  font-weight: 700;
}
.section-title {
  text-align: center;
  font-size: clamp(24px, 4vw, 34px);
  max-width: 640px;
  margin: 0 auto 12px;
  color: var(--ink);
}
.section-sub {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 44px;
  font-size: 14.5px;
}

/* ===== كيف يعمل ===== */
.how { padding: 90px 16px 30px; }
.how-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 920px;
  margin: 48px auto 0;
}
@media (min-width: 860px) {
  .how-track { flex-direction: row; align-items: flex-start; }
}

.how-step {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.how-step-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--live);
  background: var(--live-soft);
  display: inline-flex;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.how-step h3 { font-size: 16.5px; margin-bottom: 8px; color: var(--ink); }
.how-step p { font-size: 13.5px; margin: 0; }

.how-connector {
  flex-shrink: 0;
  width: 100%;
  height: 24px;
  position: relative;
}
.how-connector::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 100%;
  background: repeating-linear-gradient(to bottom, var(--accent-dim) 0 6px, transparent 6px 12px);
}
@media (min-width: 860px) {
  .how-connector { width: 40px; height: auto; align-self: stretch; }
  .how-connector::before {
    top: 40px;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: repeating-linear-gradient(to right, var(--accent-dim) 0 6px, transparent 6px 12px);
  }
}

/* ===== المزايا: Bento غير متماثل ===== */
.features { padding: 90px 16px 40px; }

.feat-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 44px;
}
@media (min-width: 720px) {
  .feat-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(210px, auto);
  }
  .feat-bento .feat-lg { grid-column: span 2; }
}
@media (min-width: 960px) {
  .feat-bento { grid-template-columns: repeat(3, 1fr); }
  .feat-bento .feat-lg { grid-column: span 2; }
}

.feat-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop);
  border-color: var(--accent-dim);
}
.feat-icon {
  font-size: 24px;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  border-radius: 15px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.feat-card h3 { font-size: 16.5px; margin-bottom: 8px; color: var(--ink); }
.feat-card p { font-size: 13.5px; margin: 0; }
.feat-lg { justify-content: space-between; }
.feat-lg p { max-width: 460px; }

/* --- معاينات مصغّرة داخل بطاقات المزايا --- */
.feat-visual { margin-top: 20px; }

.feat-visual-isolation {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.iso-box {
  flex: 1;
  min-width: 90px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-soft);
}
.iso-box span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px var(--live-soft);
  flex-shrink: 0;
}
.iso-2 span { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.iso-3 span { background: var(--accent-2); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16); }

.feat-visual-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 46px;
}
.mini-bar {
  flex: 1;
  height: 100%;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.mini-bar span {
  width: 100%;
  height: var(--v, 40%);
  background: linear-gradient(180deg, var(--live), var(--accent));
  border-radius: 6px 6px 0 0;
  animation: barGrow 1.1s ease-out;
}
@keyframes barGrow {
  from { height: 0%; }
}

.feat-visual-console { margin-top: 18px; }
.mini-console {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mini-console .ml {
  color: var(--ink-faint);
  opacity: 0;
  animation: mlIn .4s ease forwards;
}
body.dark .mini-console .ml { color: #7dd3c0; }
.ml-1 { animation-delay: .15s; }
.ml-2 { animation-delay: .55s; }
.ml-3 { animation-delay: .95s; }
@keyframes mlIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== الباقات ===== */
.packages { padding: 70px 16px 30px; }

.pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}
@media (min-width: 860px) {
  .pkg-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

.pkg-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pkg-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-pop);
  border-color: var(--accent-dim);
}

.pkg-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow), var(--shadow-pop);
}
@media (min-width: 860px) {
  .pkg-featured { transform: scale(1.045); z-index: 2; }
  .pkg-featured:hover { transform: scale(1.045) translateY(-5px); }
}

.pkg-ribbon {
  position: absolute;
  top: -13px;
  right: 26px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px -8px rgba(129, 140, 248, 0.6);
}

.pkg-head h3 {
  font-size: 21px;
  color: var(--ink);
  margin-bottom: 4px;
}
.pkg-tagline { font-size: 12.5px; margin: 0 0 20px; }

.pkg-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 22px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.pkg-price .num {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 700;
  color: var(--ink);
}
.pkg-price .cur { font-size: 13px; color: var(--ink-dim); }
.pkg-price .per { font-size: 12px; color: var(--ink-faint); margin-right: 4px; }

.pkg-specs {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}
.pkg-specs li {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.pkg-specs li span { color: var(--ink-dim); }
.pkg-specs li b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }

.pkg-choose {
  width: 100%;
  padding: 12px;
  justify-content: center;
  margin-top: auto;
  font-size: 14px;
}

.pkg-footnote {
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
  max-width: 560px;
  margin: 30px auto 0;
}

/* ===== الأسئلة الشائعة ===== */
.faq { padding: 70px 16px 40px; }
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 22px;
  box-shadow: var(--shadow-card);
  transition: border-color .15s ease;
}
.faq-item[open] { border-color: var(--accent-dim); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 500;
  color: var(--accent-2);
  flex-shrink: 0;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  font-size: 13.5px;
  margin: 0 0 18px;
  line-height: 1.7;
}

/* ===== دعوة أخيرة ===== */
.final-cta { padding: 40px 16px 100px; }
.final-cta-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background:
    radial-gradient(600px 260px at 50% 0%, var(--accent-soft), transparent 70%),
    var(--bg-card);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 52px 32px;
  box-shadow: var(--shadow-card);
}
.final-cta-card h2 {
  font-size: clamp(22px, 3.4vw, 30px);
  color: var(--ink);
  margin-bottom: 12px;
}
.final-cta-card p {
  font-size: 14.5px;
  max-width: 460px;
  margin: 0 auto 26px;
}

/* ===== فوتر ===== */
.lp-footer {
  border-top: 1px solid var(--line-soft);
  padding: 30px 0 40px;
}
.lp-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.lp-footer-inner p { font-size: 13px; margin: 0; }
.lp-footer-inner a { color: var(--accent-2); font-weight: 600; }

/* ===== مودال التواصل ===== */
.contact-modal-card { text-align: center; padding: 30px 24px; }
.contact-modal-card h3 { font-size: 19px; margin-bottom: 6px; }
.contact-modal-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-2);
  margin-bottom: 22px;
}
.contact-options {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.contact-opt {
  flex: 1;
  justify-content: center;
  padding: 13px;
  font-size: 14px;
}
.contact-icon { font-size: 16px; }
.lp-modal-close {
  width: 100%;
  justify-content: center;
  background: transparent;
  border-color: transparent;
  color: var(--ink-faint);
}

@media (max-width: 420px) {
  .contact-options { flex-direction: column; }
}

/* ===== شريط الإعلان المتحرك (Marquee) — WORM SYSTEM ===== */
.ws-marquee {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  height: 38px;
  overflow: hidden;
  background: linear-gradient(90deg, #7c1d1d, #b91c1c 45%, #7c1d1d);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.ws-marquee-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  white-space: nowrap;
  animation: ws-marquee-scroll 26s linear infinite;
}
.ws-marquee-track span {
  display: inline-block;
  padding: 0 32px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.2px;
}
@keyframes ws-marquee-scroll {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* لما الشريط المتحرك موجود، لازم ننزل الـ topbar وباقي الصفحة تحته */
body.landing.has-ws-marquee .lp-topbar { top: 38px; }
body.landing.has-ws-marquee .hero { padding-top: 92px; }
@media (max-width: 640px) {
  body.landing.has-ws-marquee .hero { padding-top: 100px; }
}

/* ===== زرار "تابع قناتنا للتحديثات" ===== */
.ws-tg-follow-wrap {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  justify-content: center;
  width: 100%;
  pointer-events: none;
}
.ws-tg-follow-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #229ED9, #1b7fb3);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 24px -6px rgba(34, 158, 217, 0.55), 0 0 0 1px rgba(255,255,255,0.15) inset;
  animation: ws-tg-pulse 2.6s ease-in-out infinite;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ws-tg-follow-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 30px -6px rgba(34, 158, 217, 0.7), 0 0 0 1px rgba(255,255,255,0.2) inset;
}
.ws-tg-follow-btn .ws-tg-icon { font-size: 17px; line-height: 1; }
@keyframes ws-tg-pulse {
  0%, 100% { box-shadow: 0 8px 24px -6px rgba(34, 158, 217, 0.55), 0 0 0 1px rgba(255,255,255,0.15) inset; }
  50%      { box-shadow: 0 8px 30px -4px rgba(34, 158, 217, 0.85), 0 0 0 1px rgba(255,255,255,0.25) inset; }
}
@media (max-width: 640px) {
  .ws-tg-follow-wrap { top: 44px; }
  .ws-tg-follow-btn { font-size: 13px; padding: 8px 16px; }
}

/* ===== نافذة الترحيب المنبثقة (Beta Welcome) ===== */
.ws-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 10, 20, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ws-fade-in .25s ease;
}
@keyframes ws-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ws-welcome-card {
  position: relative;
  max-width: 480px;
  width: 100%;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-soft));
  border: 1px solid var(--accent-dim);
  border-radius: 20px;
  padding: 28px 26px 24px;
  box-shadow: var(--shadow-pop);
  text-align: center;
  animation: ws-pop-in .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes ws-pop-in {
  from { transform: scale(.92) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.ws-welcome-card h3 {
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 14px;
  color: var(--ink);
  font-weight: 700;
}
.ws-welcome-card p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-dim);
  margin: 0 0 10px;
}
.ws-welcome-note {
  font-size: 13px !important;
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--ink) !important;
  margin-top: 14px !important;
}
.ws-welcome-close {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
}
.ws-welcome-close:hover { filter: brightness(1.08); }

/* ===== الفوتر الخاص — تحيا مصر / فلسطين حرة ===== */
.ws-footer-pride {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 10px 0 2px;
  font-size: 15px;
  font-weight: 700;
}
.ws-footer-pride span {
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--accent-dim);
  background: var(--accent-soft);
}
.ws-footer-pride .ws-egypt { color: #c0392b; }
.ws-footer-pride .ws-palestine { color: #0d6b3f; }
.ws-footer-copyright {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-faint);
}