/*!
 * موقع "استغفر" — تطبيق إسلامي للاستغفار والذكر
 * ZekoIT — https://zekoit.com
 * ترتيب الملف: Reset > Tokens > Base > Utilities > Components > Sections > Responsive
 */

/* =========================================================
   1) Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
* { padding: 0; }
html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body { min-height: 100%; }
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: inherit;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; }
address { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   2) Design tokens — ثيم إسلامي ملكي فاخر
   ========================================================= */
:root {
  color-scheme: light;

  /* الألوان الأساسية — زمردي ملكي وذهب إسلامي عريق */
  --color-primary: #0b4937;
  --color-primary-dark: #063426;
  --color-primary-light: #146c53;
  --color-primary-50: #eaf5f0;
  --color-primary-100: #d4ebdF;

  --color-accent: #c59b27;
  --color-accent-dark: #a27b16;
  --color-accent-light: #e5be48;
  --color-accent-100: #fbf5e6;
  --color-gold-glow: rgba(197, 155, 39, 0.28);

  /* تدرجات فخمة */
  --gradient-gold: linear-gradient(135deg, #d4af37 0%, #aa8010 100%);
  --gradient-emerald: linear-gradient(135deg, #0b4937 0%, #063426 100%);
  --gradient-card: linear-gradient(145deg, #ffffff 0%, #fcfbf7 100%);

  /* الخلفيات والنصوص */
  --color-bg: #faf8f2;
  --color-bg-translucent: rgba(250, 248, 242, 0.92);
  --color-surface: #ffffff;
  --color-surface-alt: #f3efe4;
  --color-text: #14201b;
  --color-text-muted: #4e5b54;
  --color-text-soft: #7c8880;
  --color-border: #e3dcce;
  --color-border-gold: rgba(197, 155, 39, 0.35);
  --color-overlay: rgba(8, 26, 19, 0.65);

  /* ظلال فخمة مع لمسة توهج ذهبي */
  --shadow-sm: 0 2px 10px -4px rgba(11, 73, 55, 0.08);
  --shadow-md: 0 12px 30px -8px rgba(11, 73, 55, 0.12), 0 0 15px rgba(197, 155, 39, 0.06);
  --shadow-lg: 0 24px 50px -12px rgba(11, 73, 55, 0.18), 0 0 30px rgba(197, 155, 39, 0.12);
  --shadow-gold: 0 8px 24px -4px rgba(197, 155, 39, 0.35);

  /* الخطوط */
  --font-arabic: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-quran: 'Amiri', 'Traditional Arabic', serif;

  /* الاستدارة */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* التخطيط */
  --container-width: 1220px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);
  --section-pad: clamp(4.5rem, 9vw, 8rem);

  /* الحركة */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .2s;
  --dur-base: .45s;
  --dur-slow: .8s;
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #1ab88b;
  --color-primary-dark: #128e6b;
  --color-primary-light: #30d4a3;
  --color-primary-50: #0d271f;
  --color-primary-100: #12372c;

  --color-accent: #e5c158;
  --color-accent-dark: #c59b27;
  --color-accent-light: #f7d77a;
  --color-accent-100: #2c2514;
  --color-gold-glow: rgba(229, 193, 88, 0.32);

  --gradient-gold: linear-gradient(135deg, #e5c158 0%, #b8860b 100%);
  --gradient-emerald: linear-gradient(135deg, #0e2920 0%, #081712 100%);
  --gradient-card: linear-gradient(145deg, #0f241c 0%, #0a1913 100%);

  --color-bg: #071510;
  --color-bg-translucent: rgba(7, 21, 16, 0.92);
  --color-surface: #0c2018;
  --color-surface-alt: #10291f;
  --color-text: #eaf3ee;
  --color-text-muted: #a6b8ad;
  --color-text-soft: #6f8277;
  --color-border: #1a3c2f;
  --color-border-gold: rgba(229, 193, 88, 0.3);
  --color-overlay: rgba(2, 8, 6, 0.82);

  --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.65), 0 0 20px rgba(229, 193, 88, 0.08);
  --shadow-lg: 0 24px 55px -12px rgba(0, 0, 0, 0.8), 0 0 35px rgba(229, 193, 88, 0.15);
  --shadow-gold: 0 8px 25px -4px rgba(229, 193, 88, 0.45);
}


/* =========================================================
   3) عناصر أساسية
   ========================================================= */
body {
  font-family: var(--font-arabic);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
  background: var(--color-bg);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  overflow-x: hidden;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.2rem; }

p { color: var(--color-text); }

::selection { background: var(--color-accent-100); color: var(--color-primary-dark); }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   4) أدوات مساعدة (Utilities)
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-pad); }
.section--alt { background: var(--color-surface-alt); }

.section-header {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-accent-dark);
  background: var(--color-accent-100);
  border: 1px solid var(--color-border-gold);
  padding: .45rem 1.25rem;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: .88rem;
  margin-bottom: 1.1rem;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .eyebrow {
  color: var(--color-accent);
}

.islamic-basmala {
  font-family: var(--font-quran);
  font-size: clamp(1.4rem, 3.5vw, 2.1rem);
  font-weight: 700;
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 1.25rem;
  letter-spacing: 0.05em;
  text-shadow: 0 0 20px var(--color-gold-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.islamic-basmala::before,
.islamic-basmala::after {
  content: "✦";
  font-size: 0.75em;
  color: var(--color-accent);
  opacity: 0.8;
}

.islamic-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: clamp(2rem, 4vw, 3.5rem) auto;
  max-width: 340px;
  color: var(--color-accent);
}
.islamic-divider::before,
.islamic-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-gold), transparent);
}
.islamic-divider span {
  font-family: var(--font-quran);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}

.section-title { margin-bottom: .9rem; }

.section-text {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.85;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  top: 1rem;
  background: var(--color-primary);
  color: #fff;
  padding: .6rem 1.2rem;
  border-radius: var(--radius-full);
  z-index: 100;
  font-weight: 700;
}
.skip-link:focus { inset-inline-start: 1rem; }

/* حركة الظهور التدريجي عند التمرير */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 60ms; }
.stagger > *:nth-child(3) { transition-delay: 120ms; }
.stagger > *:nth-child(4) { transition-delay: 180ms; }
.stagger > *:nth-child(5) { transition-delay: 240ms; }
.stagger > *:nth-child(6) { transition-delay: 300ms; }
.stagger > *:nth-child(7) { transition-delay: 360ms; }
.stagger > *:nth-child(8) { transition-delay: 420ms; }

/* =========================================================
   5) الأزرار
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .9rem 1.9rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: .98rem;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.btn--secondary { background: var(--color-surface); color: var(--color-text); border: 1.5px solid var(--color-border); }
.btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }

.btn--accent { background: var(--color-accent); color: #241d0c; box-shadow: var(--shadow-md); }
.btn--accent:hover { background: var(--color-accent-dark); transform: translateY(-2px); }

.btn--white { background: #fff; color: var(--color-primary-dark); box-shadow: var(--shadow-md); }
.btn--white:hover { background: var(--color-accent-100); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--color-primary); padding-inline: .5rem; }
.btn--ghost:hover { gap: .8rem; }

.btn--lg { padding: 1.05rem 2.4rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  background: var(--color-surface-alt);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.btn-icon svg { width: 20px; height: 20px; }
.btn-icon:hover { background: var(--color-primary-50); color: var(--color-primary); }

.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

/* =========================================================
   6) الترويسة والتنقل
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg-translucent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--color-text);
  flex-shrink: 0;
}
.nav__brand-mark { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }

.nav__links {
  display: none;
  align-items: center;
  gap: 2rem;
}
.nav__link {
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease);
  position: relative;
  padding-block: .3rem;
}
.nav__link:hover, .nav__link.is-active { color: var(--color-primary); }

.nav__actions { display: flex; align-items: center; gap: .6rem; }
.nav__cta { display: none; }

@media (min-width: 960px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  [data-nav-toggle] { display: none; }
}

/* القائمة على الجوال */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-surface);
  padding: 6rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), visibility var(--dur-base);
  z-index: 40;
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-nav__close { position: absolute; top: 1.4rem; inset-inline-end: 1.4rem; }
.mobile-nav nav { display: flex; flex-direction: column; gap: 1.5rem; }
.mobile-nav__link { font-size: 1.3rem; font-weight: 700; color: var(--color-text); }
.mobile-nav__link.is-active { color: var(--color-primary); }

body.nav-open { overflow: hidden; }

@media (min-width: 960px) {
  .mobile-nav { display: none; }
}

/* =========================================================
   7) البطل (Hero)
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% -10%, var(--color-primary-50) 0%, transparent 55%),
    radial-gradient(circle at -10% 110%, var(--color-accent-100) 0%, transparent 45%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
  padding-block: clamp(3rem, 8vw, 5rem) clamp(2.5rem, 6vw, 4rem);
}

.hero__content { text-align: center; max-width: 640px; }
.hero__title { margin-bottom: 1.25rem; }
.hero__text { color: var(--color-text-muted); font-size: 1.1rem; line-height: 1.9; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.25rem;
}

.hero__visual { width: 100%; display: flex; justify-content: center; }

@media (min-width: 960px) {
  .hero__inner {
    flex-direction: row;
    text-align: start;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
  }
  .hero__content { text-align: start; max-width: 520px; }
  .hero__actions { justify-content: flex-start; }
  .hero__visual { flex: 1; }
}

/* Mockup الهاتف — عام */
.phone-mockup { position: relative; flex-shrink: 0; }

.phone-mockup__frame {
  position: relative;
  width: 275px;
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(160deg, #17281f, #071510);
  border: 2px solid var(--color-border-gold);
  border-radius: 44px;
  padding: 12px;
  box-shadow: var(--shadow-lg), 0 0 35px var(--color-gold-glow);
  margin-inline: auto;
}

.phone-mockup__notch {
  position: absolute;
  top: 12px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #071510;
  border-radius: var(--radius-full);
  z-index: 2;
}

.phone-mockup__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #071510;
  display: flex;
  flex-direction: column;
}

.phone-mockup__glow {
  position: absolute;
  inset: 5% -25% auto -25%;
  height: 65%;
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.35), transparent);
  filter: blur(24px);
  z-index: -1;
}

/* محتوى وهمي داخل هاتف البطل */
.mock-app { flex: 1; display: flex; flex-direction: column; padding: 22px 18px 20px; color: #fff; }
.mock-app__status { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 20px; opacity: .5; }
.mock-app__status span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mock-app__brand { display: block; text-align: center; font-weight: 700; font-size: 1rem; letter-spacing: .02em; margin-bottom: 26px; opacity: .92; }

.mock-app__ring {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  margin-inline: auto;
  padding: 9px;
  background: conic-gradient(var(--color-accent) 0turn .68turn, rgba(255, 255, 255, .16) .68turn 1turn);
  display: grid;
  place-items: center;
}
.mock-app__ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(6, 20, 15, .55);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 2px;
}
.mock-app__count { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.mock-app__count-label { font-size: .8rem; opacity: .8; }

.mock-app__goal { margin-top: 28px; }
.mock-app__goal-bar { height: 8px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .16); overflow: hidden; }
.mock-app__goal-bar span { display: block; height: 100%; width: 66%; background: var(--color-accent); border-radius: var(--radius-full); }
.mock-app__goal-text { margin-top: 8px; font-size: .78rem; text-align: center; opacity: .85; }

.mock-app__actions { display: flex; gap: 10px; justify-content: center; margin-top: auto; padding-top: 20px; }
.mock-app__chip { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.mock-app__chip--active { background: var(--color-accent); }



/* =========================================================
   8) قسم التعريف
   ========================================================= */
.intro .section-header { margin-bottom: 0; }

/* =========================================================
   9) المميزات الملكية
   ========================================================= */
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-gold);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md), 0 0 20px var(--color-gold-glow);
  border-color: var(--color-border-gold);
}

.feature-card__icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
  color: var(--color-accent-dark);
  border: 1px solid var(--color-border-gold);
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  transition: transform var(--dur-fast) var(--ease);
}
.feature-card:hover .feature-card__icon { transform: scale(1.08); }
[data-theme="dark"] .feature-card__icon { color: var(--color-accent); }
.feature-card__icon svg { width: 26px; height: 26px; }

.feature-card__title { margin-bottom: .6rem; font-size: 1.15rem; font-weight: 800; color: var(--color-text); }
.feature-card__text { color: var(--color-text-muted); line-height: 1.85; font-size: .95rem; }

/* =========================================================
   10) استعراض واجهات التطبيق التلقائي الفاخر (App Showcase)
   ========================================================= */

.showcase-section {
  position: relative;
  overflow: hidden;
}

.app-showcase {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* شريط تبويبات الوصول السريع */
.showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  padding-bottom: .25rem;
}

.showcase-tab {
  font-size: .88rem;
  font-weight: 700;
  padding: .45rem 1.15rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  user-select: none;
}
.showcase-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-primary);
  transform: translateY(-2px);
}
.showcase-tab.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md), 0 0 14px var(--color-gold-glow);
}
[data-theme="dark"] .showcase-tab.is-active {
  background: var(--color-primary-light);
  border-color: var(--color-accent);
}

/* التخطيط الشبكي الرئيسي: الهاتف وبطاقة المعلومات */
.showcase-main-grid {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* عمود الهاتف التفاعلي */
.showcase-device-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.showcase-stage-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  position: relative;
}

/* أزرار الأسهم للتنقل اليدوي */
.showcase-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-gold);
  color: var(--color-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-fast) var(--ease);
  z-index: 4;
  flex-shrink: 0;
}
.showcase-nav-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md), 0 0 12px var(--color-gold-glow);
  transform: scale(1.08);
}
.showcase-nav-btn svg {
  width: 22px;
  height: 22px;
}

/* مسرح الهاتف الموحد */
.showcase-stage {
  position: relative;
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

.phone-mockup--showcase .phone-mockup__frame {
  width: 230px;
  aspect-ratio: 9 / 19.5;
  max-height: 490px;
  border-radius: 36px;
  border: 2.5px solid var(--color-accent);
  padding: 8px;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.55), 0 0 25px var(--color-gold-glow);
  background: #061611;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.showcase-stage:hover .phone-mockup--showcase .phone-mockup__frame {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.65), 0 0 35px var(--color-gold-glow);
}

.phone-mockup--showcase .phone-mockup__notch {
  width: 64px;
  height: 14px;
  border-radius: 0 0 12px 12px;
  background: #061611;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.phone-mockup--showcase .phone-mockup__screen {
  border-radius: 28px;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: #071510;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.showcase-screen-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.28s ease, transform 0.28s ease;
  will-change: opacity, transform;
}
.showcase-screen-img.is-animating {
  opacity: 0.15;
  transform: scale(0.97);
}

/* هالة التوهج الملكية خلف الهاتف */
.phone-mockup--showcase + .phone-mockup__glow,
.phone-mockup--showcase .phone-mockup__glow {
  position: absolute;
  inset: -10% -25% -10% -25%;
  background: radial-gradient(circle at 50% 50%, rgba(197, 155, 39, 0.35) 0%, rgba(11, 73, 55, 0.2) 50%, transparent 75%);
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
}

/* عمود وبطاقة المعلومات */
.showcase-info-col {
  display: flex;
  flex-direction: column;
}

.showcase-info-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-gold);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 3vw, 2.35rem);
  box-shadow: var(--shadow-md), 0 0 25px var(--color-gold-glow);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  position: relative;
  overflow: hidden;
}

.showcase-info-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--gradient-gold);
}

.showcase-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.showcase-badge-group {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.showcase-cat-badge {
  font-size: .84rem;
  font-weight: 800;
  padding: .3rem .85rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-100);
  color: var(--color-accent-dark);
  border: 1px solid var(--color-border-gold);
}
[data-theme="dark"] .showcase-cat-badge {
  color: var(--color-accent);
  background: rgba(197, 155, 39, 0.15);
}

.showcase-counter {
  font-size: .84rem;
  font-weight: 800;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  padding: .3rem .75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}

.showcase-play-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 700;
  padding: .35rem .85rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.showcase-play-toggle:hover {
  background: var(--color-primary-50);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}
.showcase-play-toggle.is-playing {
  background: var(--color-primary-50);
  color: var(--color-primary);
  border-color: rgba(11, 73, 55, 0.3);
}
[data-theme="dark"] .showcase-play-toggle.is-playing {
  background: rgba(14, 107, 82, 0.2);
  color: #6ee7b7;
}
.showcase-play-toggle svg {
  width: 15px;
  height: 15px;
}

.showcase-title {
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.35;
  margin: 0;
  transition: opacity 0.2s ease;
}

.showcase-desc {
  font-size: clamp(.92rem, 1.4vw, 1.02rem);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin: 0;
  min-height: 3.4em;
  transition: opacity 0.2s ease;
}

/* شريط التقدم للتبديل التلقائي */
.showcase-progress-wrap {
  width: 100%;
  height: 6px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--color-border);
  position: relative;
}

.showcase-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
  box-shadow: 0 0 10px rgba(197, 155, 39, 0.6);
  transition: width 0.1s linear;
}

/* مؤشرات النقاط الـ 15 */
.showcase-dots {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  padding-block: .25rem;
}

.showcase-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--dur-fast) var(--ease);
}
.showcase-dot:hover {
  background: var(--color-accent-light);
  transform: scale(1.2);
}
.showcase-dot.is-active {
  width: 26px;
  border-radius: 8px;
  background: var(--color-accent);
  box-shadow: 0 0 10px rgba(197, 155, 39, 0.6);
}

/* مميزات الشاشة الحالية */
.showcase-features-highlight {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  padding-top: .4rem;
  border-top: 1px dashed var(--color-border);
}

.highlight-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-50);
  border: 1px solid rgba(11, 73, 55, 0.16);
  padding: .3rem .8rem;
  border-radius: var(--radius-full);
  transition: all var(--dur-fast) var(--ease);
}
[data-theme="dark"] .highlight-item {
  background: rgba(14, 107, 82, 0.22);
  color: #6ee7b7;
  border-color: rgba(110, 231, 183, 0.2);
}
.highlight-item svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* =========================================================
   11) كيف يعمل (خطوات)
   ========================================================= */
.steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.step { text-align: center; padding-inline: .5rem; }
.step__number {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--color-primary-100);
  -webkit-text-stroke: 1.5px var(--color-primary);
  margin-bottom: .75rem;
  line-height: 1;
}
.step__title { margin-bottom: .5rem; }
.step__text { color: var(--color-text-muted); }

/* =========================================================
   12) عناصر نائبة (الأذكار / الفضائل)
   ========================================================= */
.placeholder-card {
  border: 1.5px dashed var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  color: var(--color-text-muted);
  max-width: 640px;
  margin-inline: auto;
}
.placeholder-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-50);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  margin-inline: auto;
  margin-bottom: 1.1rem;
}
.placeholder-card__icon svg { width: 26px; height: 26px; }
.placeholder-card__title { color: var(--color-text); font-weight: 700; margin-bottom: .5rem; font-size: 1.1rem; }
.placeholder-card__text { font-size: .95rem; line-height: 1.8; }

.virtues__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.virtues__grid .placeholder-card { max-width: none; margin-inline: 0; }

/* =========================================================
   13) قسم الخصوصية
   ========================================================= */
.privacy {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  padding-block: var(--section-pad);
}
.privacy__inner { max-width: 680px; margin-inline: auto; text-align: center; }
.privacy__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  display: grid;
  place-items: center;
  margin-inline: auto;
  margin-bottom: 1.5rem;
}
.privacy__icon svg { width: 30px; height: 30px; color: #fff; }
.privacy__inner h2 { margin-bottom: 1rem; }
.privacy__inner p { color: rgba(255, 255, 255, .88); font-size: 1.05rem; line-height: 1.9; margin-bottom: 2rem; }

/* =========================================================
   14) دعوة تحميل التطبيق
   ========================================================= */
.cta-download {
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
  padding-block: var(--section-pad);
}
.cta-download__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.cta-download__inner h2 { color: #241d0c; margin-bottom: 1rem; }
.cta-download__inner p { color: rgba(36, 29, 12, .85); font-size: 1.05rem; margin-bottom: 2.25rem; }

/* =========================================================
   15) التواصل
   ========================================================= */
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  text-align: center;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.contact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.contact-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary-50);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  margin-inline: auto;
  margin-bottom: 1.1rem;
}
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card__title { margin-bottom: .5rem; font-size: 1.05rem; }
.contact-card__value {
  color: var(--color-text-muted);
  font-size: .95rem;
  word-break: break-word;
  display: inline-block;
  margin-bottom: .9rem;
}
.contact-card a.contact-card__value:hover { color: var(--color-primary); }

/* =========================================================
   16) التذييل (Footer)
   ========================================================= */
.site-footer { background: var(--color-surface-alt); border-top: 1px solid var(--color-border); }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}

.footer__brand { display: flex; flex-direction: column; gap: .9rem; max-width: 320px; }
.footer__brand-name { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.25rem; }
.footer__brand-mark { width: 38px; height: 38px; border-radius: 10px; }
.footer__tagline { color: var(--color-text-muted); font-size: .95rem; line-height: 1.8; }

.footer__heading { font-size: .95rem; color: var(--color-text-soft); margin-bottom: 1.1rem; font-weight: 700; }
.footer__links { display: flex; flex-direction: column; gap: .85rem; }
.footer__links a { color: var(--color-text-muted); font-weight: 600; transition: color var(--dur-fast) var(--ease); }
.footer__links a:hover { color: var(--color-primary); }

.footer__zekoit { display: flex; flex-direction: column; gap: .85rem; }
.footer__zekoit a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  color: var(--color-primary);
}

.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-block: 1.5rem;
  text-align: center;
  color: var(--color-text-soft);
  font-size: .9rem;
}

@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* =========================================================
   17) صفحة سياسة الخصوصية
   ========================================================= */
.legal-hero { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); text-align: center; }
.legal-hero__updated { color: var(--color-text-soft); font-size: .9rem; margin-top: .75rem; }

.legal-intro {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.9;
}

.legal-content {
  max-width: 760px;
  margin-inline: auto;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.legal-section h2 {
  font-size: 1.3rem;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.legal-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary-50);
  color: var(--color-primary);
  font-size: 1rem;
  flex-shrink: 0;
}
.legal-section h3 {
  font-size: 1.05rem;
  margin-top: 1.25rem;
  margin-bottom: .5rem;
  color: var(--color-text);
}
.legal-section p { color: var(--color-text-muted); line-height: 1.9; }
.legal-section p + p { margin-top: .75rem; }
.legal-section ul {
  list-style: disc;
  padding-inline-start: 1.25rem;
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.legal-section ul li { color: var(--color-text-muted); line-height: 1.8; }
.legal-section strong { color: var(--color-text); font-weight: 800; }

.legal-contact-list { margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.legal-contact-list a { color: var(--color-primary); font-weight: 700; }

.legal-back { text-align: center; padding-bottom: clamp(3rem, 6vw, 5rem); }

/* =========================================================
   18) استجابة عامة إضافية
   ========================================================= */
@media (max-width: 420px) {
  .hero__actions .btn,
  .cta-download__inner .btn { width: 100%; }
}

/* =========================================================
   19) بطاقات الأذكار الغنية والفضائل (Rich Adhkar & Virtues)
   ========================================================= */
.adhkar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.75rem;
}

.dhikr-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  box-shadow: var(--shadow-sm);
}
.dhikr-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-100);
}

.dhikr-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.dhikr-card__tag {
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-50);
  padding: .35rem .9rem;
  border-radius: var(--radius-full);
}
.dhikr-card__count-badge {
  font-size: .85rem;
  font-weight: 800;
  color: var(--color-accent-dark);
  background: var(--color-accent-100);
  padding: .35rem .9rem;
  border-radius: var(--radius-full);
}
[data-theme="dark"] .dhikr-card__count-badge {
  color: var(--color-accent);
}

.dhikr-card__text {
  font-size: 1.15rem;
  line-height: 2;
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: 1.25rem;
  font-family: var(--font-arabic);
}

.dhikr-card__virtue {
  font-size: .92rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  border-top: 1px dashed var(--color-border);
  padding-top: 1rem;
  margin-bottom: 1.25rem;
}

.dhikr-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .75rem;
}
.dhikr-card__btn-copy {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-50);
  padding: .5rem 1rem;
  border-radius: var(--radius-full);
  transition: all var(--dur-fast) var(--ease);
}
.dhikr-card__btn-copy:hover {
  background: var(--color-primary);
  color: #fff;
}
.dhikr-card__btn-copy svg {
  width: 16px;
  height: 16px;
}

/* بطاقات الفضائل الغنية */
.virtue-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  position: relative;
  overflow: hidden;
}
.virtue-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.virtue-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.virtue-card__header {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.25rem;
}
.virtue-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--color-primary-50);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.virtue-card__icon svg { width: 24px; height: 24px; }
.virtue-card__title { font-size: 1.25rem; color: var(--color-text); }

.virtue-card__quote {
  font-size: 1.08rem;
  line-height: 2;
  color: var(--color-text);
  font-weight: 600;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1rem;
  border-inline-start: 4px solid var(--color-accent);
}
.virtue-card__ref {
  font-size: .88rem;
  color: var(--color-text-soft);
  text-align: end;
  display: block;
  font-weight: 600;
}
.virtue-card__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: 1rem;
}
.virtue-card__list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: var(--color-text-muted);
  line-height: 1.75;
}
.virtue-card__list svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: .2rem;
}

/* =========================================================
   20) المسبحة الإلكترونية التفاعلية المباشرة (Web Counter)
   ========================================================= */
.tasbeeh-widget {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  max-width: 680px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tasbeeh-widget::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--color-primary-50) 0%, transparent 70%);
  pointer-events: none;
  opacity: .7;
}

.tasbeeh__dhikr-select {
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}
.tasbeeh__dhikr-current {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: .5rem;
}
.tasbeeh__dhikr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.tasbeeh-pill {
  font-size: .85rem;
  padding: .4rem .9rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.tasbeeh-pill:hover, .tasbeeh-pill.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.tasbeeh__circle-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 2rem;
  z-index: 2;
}
.tasbeeh__circle-btn {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--color-surface), var(--color-surface-alt));
  border: 4px solid var(--color-primary);
  box-shadow: 0 10px 30px -5px rgba(14, 107, 82, 0.35), inset 0 2px 6px rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
  user-select: none;
  -webkit-user-select: none;
}
.tasbeeh__circle-btn:active {
  transform: scale(0.94);
  box-shadow: 0 4px 15px -3px rgba(14, 107, 82, 0.25);
}
.tasbeeh__count {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--color-primary);
  font-family: var(--font-arabic);
}
.tasbeeh__hint {
  font-size: .85rem;
  color: var(--color-text-soft);
  margin-top: .4rem;
  font-weight: 600;
}

.tasbeeh__progress-bar {
  height: 10px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
  max-width: 400px;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--color-border);
  position: relative;
  z-index: 2;
}
.tasbeeh__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-full);
  transition: width .25s var(--ease);
}

.tasbeeh__stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
  font-size: .95rem;
  color: var(--color-text-muted);
}
.tasbeeh__stats strong {
  color: var(--color-text);
  font-weight: 800;
}

.tasbeeh__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
  z-index: 2;
}

/* =========================================================
   21) منتدى الأسئلة الشائعة والمجتمع (FAQ & Community)
   ========================================================= */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.faq-item:hover, .faq-item.is-open {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  background: none;
  border: none;
  text-align: start;
}
.faq-item__question svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  transition: transform var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.faq-item.is-open .faq-item__question svg {
  transform: rotate(180deg);
}

.faq-item__answer {
  display: none;
  padding: 0 1.5rem 1.25rem;
  color: var(--color-text-muted);
  line-height: 1.85;
  font-size: 1rem;
  border-top: 1px solid var(--color-surface-alt);
  padding-top: 1rem;
}
.faq-item.is-open .faq-item__answer {
  display: block;
}

.community-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.community-badge {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: .6rem 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-text);
}
.community-badge svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

/* بطاقات منتدى ومجتمع التطبيق */
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 3.5rem;
}

.community-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.community-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-100);
}

.community-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.community-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.community-card__icon svg {
  width: 24px;
  height: 24px;
}
.community-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0;
  color: var(--color-text);
}
.community-card__subtitle {
  font-size: .85rem;
  color: var(--color-text-soft);
  margin-top: .2rem;
}

.community-card__body {
  color: var(--color-text-muted);
  font-size: .95rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* سجل التحديثات */
.changelog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.changelog-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .95rem;
  color: var(--color-text-muted);
}
.changelog-item__tag {
  background: var(--color-accent-100);
  color: var(--color-accent-dark);
  font-size: .75rem;
  font-weight: 800;
  padding: .2rem .55rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: .15rem;
}
[data-theme="dark"] .changelog-item__tag {
  color: var(--color-accent);
}

/* صندوق الاقتراحات التفاعلي */
.suggestion-form {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.suggestion-textarea {
  width: 100%;
  min-height: 90px;
  padding: .85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-family: inherit;
  font-size: .95rem;
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease);
}
.suggestion-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* أزرار المشاركة */
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
  cursor: pointer;
  border: none;
}
.share-btn--whatsapp {
  background: #25D366;
  color: #fff !important;
}
.share-btn--whatsapp:hover {
  background: #1eb956;
}
.share-btn--telegram {
  background: #229ED9;
  color: #fff !important;
}
.share-btn--telegram:hover {
  background: #1b85b8;
}
.share-btn--twitter {
  background: #111;
  color: #fff !important;
}
[data-theme="dark"] .share-btn--twitter {
  background: #272727;
  border: 1px solid var(--color-border);
}
.share-btn--twitter:hover {
  background: #333;
}
.share-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* =========================================================
   22) تحسينات التوافق التام مع الجوال (Mobile Optimization)
   ========================================================= */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

@media (max-width: 768px) {
  :root {
    --container-pad: 1rem;
    --section-pad: clamp(3rem, 7vw, 4.5rem);
  }

  /* ترويسة الجوال */
  .site-header {
    padding-inline: .25rem;
  }
  .nav {
    padding-block: .75rem;
  }
  .nav__brand {
    font-size: 1.1rem;
  }
  .nav__brand-mark {
    width: 34px;
    height: 34px;
  }

  /* واجهة البطل على الجوال */
  .hero__inner {
    padding-block: 2rem 2.5rem;
    gap: 2rem;
  }
  .islamic-basmala {
    font-size: 1.25rem;
    margin-bottom: .85rem;
  }
  .hero__title {
    font-size: clamp(1.55rem, 6.5vw, 2.15rem);
    line-height: 1.35;
  }
  .hero__text {
    font-size: .98rem;
    line-height: 1.8;
  }
  .hero__actions {
    flex-direction: column;
    width: 100%;
    margin-top: 1.75rem;
    gap: .75rem;
  }
  .hero__actions .btn {
    width: 100%;
  }

  /* هاتف البطل على الجوال - مقاس أنيق غير متضخم (ارتفاع ~345px بدلاً من 510px) */
  .phone-mockup--hero .phone-mockup__frame {
    width: 160px;
    max-height: 350px;
    border-radius: 28px;
    padding: 6px;
  }
  .phone-mockup--hero .phone-mockup__notch {
    width: 50px;
    height: 12px;
    top: 6px;
  }
  .phone-mockup--hero .phone-mockup__screen {
    border-radius: 22px;
  }
  .phone-mockup__glow {
    filter: blur(14px);
    opacity: 0.7;
  }

  /* استعراض واجهات التطبيق التلقائي على الجوال — تصميم مدمج وأنيق */
  .showcase-main-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    justify-items: center;
  }
  .showcase-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: .45rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }
  .showcase-tabs::-webkit-scrollbar { display: none; }
  .showcase-tab {
    white-space: nowrap;
    font-size: .82rem;
    padding: .4rem .9rem;
    flex-shrink: 0;
  }
  .phone-mockup--showcase .phone-mockup__frame {
    width: 195px;
    max-height: 415px;
    border-radius: 28px;
    padding: 6px;
    border-width: 2px;
  }
  .phone-mockup--showcase .phone-mockup__notch {
    width: 48px;
    height: 10px;
    top: 6px;
  }
  .phone-mockup--showcase .phone-mockup__screen {
    border-radius: 22px;
  }
  .showcase-nav-btn {
    width: 36px;
    height: 36px;
  }
  .showcase-nav-btn svg {
    width: 18px;
    height: 18px;
  }
  .showcase-info-card {
    padding: 1.25rem 1rem;
    border-radius: var(--radius-lg);
    width: 100%;
    gap: .95rem;
  }
  .showcase-title {
    font-size: 1.18rem;
  }
  .showcase-desc {
    font-size: .88rem;
    line-height: 1.6;
    min-height: auto;
  }
  .showcase-dots {
    justify-content: center;
  }
  .showcase-features-highlight {
    justify-content: center;
  }

  /* السبحة الإلكترونية على الجوال */
  .tasbeeh-widget {
    padding: 1.75rem 1rem;
    border-radius: var(--radius-lg);
  }
  .tasbeeh__dhikr-current {
    font-size: 1.2rem;
  }
  .tasbeeh-pill {
    font-size: .8rem;
    padding: .35rem .75rem;
  }
  .tasbeeh__circle-wrapper {
    width: 185px;
    height: 185px;
    margin-bottom: 1.5rem;
  }
  .tasbeeh__count {
    font-size: 2.85rem;
  }
  .tasbeeh__stats {
    gap: 1rem;
    font-size: .85rem;
  }

  /* شبكات البطاقات (المميزات، الأذكار، المجتمع) */
  .features__grid,
  .adhkar__grid,
  .community-grid,
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .feature-card,
  .dhikr-card,
  .virtue-card,
  .community-card,
  .contact-card {
    padding: 1.35rem 1.15rem;
  }
  .dhikr-card__text {
    font-size: 1.05rem;
    line-height: 1.85;
  }

  /* صندوق الاقتراحات والمشاركة */
  .suggestion-actions {
    flex-direction: column;
  }
  .suggestion-actions .btn {
    width: 100%;
  }
  .share-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
  }
  .share-btn {
    padding: .6rem .4rem;
    font-size: .82rem;
  }
}

/* تخصيص دقيق للهواتف العادية والصغيرة (أقل من 600px) */
@media (max-width: 600px) {
  /* هاتف البطل مدمج ومريح جداً في الشاشة */
  .phone-mockup--hero .phone-mockup__frame {
    width: 145px;
    max-height: 315px;
    border-radius: 24px;
    padding: 5px;
  }
  .phone-mockup--hero .phone-mockup__notch {
    width: 44px;
    height: 10px;
    top: 5px;
  }
  .phone-mockup--hero .phone-mockup__screen {
    border-radius: 19px;
  }

  /* هاتف استعراض الواجهات على الشاشات العادية والصغيرة */
  .phone-mockup--showcase .phone-mockup__frame {
    width: 185px;
    max-height: 395px;
    border-radius: 26px;
    padding: 5px;
  }
}

/* شاشات الهواتف النحيفة جداً (أقل من 360px) */
@media (max-width: 360px) {
  .phone-mockup--hero .phone-mockup__frame {
    width: 130px;
    max-height: 280px;
  }
  .phone-mockup--showcase .phone-mockup__frame {
    width: 165px;
    max-height: 350px;
  }
}