/* ==========================================================================
   REMOMY LUXURY GLASSMORPHISM DESIGN SYSTEM (site.css)
   Sunlit Paper Palette • Golden Amber Accents • Bi-directional RTL/LTR
   ========================================================================== */

/* ==========================================================================
   BRAND TYPOGRAPHY (Self-hosted brand fonts)
   ========================================================================== */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/PlusJakartaSans-Variable.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette: Warm Sunlit Paper & Evergreen */
  --bg-body: #FBF8F3;
  --bg-body-alt: #F4EFE6;
  --ink-primary: #1B2421;
  --ink-secondary: #576562;
  --ink-tertiary: #606C69;         /* كان #8B9794 = 2.85:1 — يسقط في AA */
  --line-subtle: #E8E2D7;
  --line-strong: #D5CDC0;

  /* Accent: Golden Amber & Deep Teal */
  --gold-300: #E6C285;
  --gold-400: #D4A359;
  --gold-500: #C8933C;
  --gold-600: #A87324;
  --gold-gradient: linear-gradient(135deg, #E6C285 0%, #C8933C 50%, #A87324 100%);
  /* الذهبي أعلاه للحدود والتوهّج والتدرّجات — أمّا الحرف فيحتاج درجة
     تعبر WCAG AA على الورق الكريمي: #C8933C يعطي 2.58:1 فقط. */
  --gold-text: #836025;            /* 5.41:1 على الورق · 5.00:1 على البديل */
  /* التدرّج نفسه على حرفٍ ممتلئ (background-clip: text) يبدأ من
     1.60:1 — العنوان الأكبر في الموقع هو أقلّ ما يُقرأ فيه. */
  --gold-gradient-ink: linear-gradient(135deg, #A87324 0%, #836025 50%, #674B1D 100%);
  --gold-gradient-cta: linear-gradient(135deg, #8F6828 0%, #7F5D24 50%, #674B1D 100%);
  --gold-glow: 0 10px 30px rgba(200, 147, 60, 0.22);

  --teal-deep: #0A5148;
  --teal-soft: #10796D;
  --teal-mist: #D9EFEC;

  /* Glassmorphic Surfaces */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-hover: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-border-subtle: rgba(232, 226, 215, 0.75);
  --glass-shadow: 0 12px 36px rgba(27, 36, 33, 0.06);
  --glass-shadow-hover: 0 18px 48px rgba(27, 36, 33, 0.12);

  /* Sticker Theme Palettes */
  --th-paper-bg: #FBF3E4; --th-paper-src: #232B29; --th-paper-tr: #796B57; --th-paper-mark: #C7B49A;
  --th-sea-bg: #D9EFEC;   --th-sea-src: #0A5148;   --th-sea-tr: #3F706B;   --th-sea-mark: #8FBDB7;
  --th-night-bg: #1E2A2E; --th-night-src: #F6F0E6; --th-night-tr: #9BB3B8; --th-night-mark: #5A7178;
  --th-apricot-bg: #FFE7D6; --th-apricot-src: #7A3D14; --th-apricot-tr: #935B34; --th-apricot-mark: #E0A87F;
  --th-sun-bg: #FFF3D4;   --th-sun-src: #6B4E0F;   --th-sun-tr: #876928;   --th-sun-mark: #D9B863;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 9999px;

  /* Transitions */
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --trans-fast: 0.18s var(--ease-snappy);
  --trans-med: 0.32s var(--ease-snappy);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--bg-body);
  color: var(--ink-primary);
  font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, "Segoe UI", Roboto, "Cairo", sans-serif;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
}

/* Background Ambient Orbs */
.bg-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  will-change: transform;
}

.orb-1 {
  top: -100px;
  inset-inline-end: -60px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, #E6C285 0%, rgba(244, 239, 230, 0) 70%);
}

.orb-2 {
  top: 45%;
  inset-inline-start: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, #D9EFEC 0%, rgba(251, 248, 243, 0) 70%);
}

.orb-3 {
  bottom: -150px;
  inset-inline-end: 20%;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, #FFE7D6 0%, rgba(251, 248, 243, 0) 70%);
}

/* Typography Helpers */
h1, h2, h3, h4, .serif-title {
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

p {
  color: var(--ink-secondary);
  font-size: 1.05rem;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   GLOBAL NAVBAR
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  padding: 16px 24px;
  transition: var(--trans-med);
}

.nav-container {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  padding: 6px 18px 6px 24px;
  box-shadow: var(--glass-shadow);
}

.brand-wrap {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  direction: ltr !important;
}

.brand-emblem {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(10, 81, 72, 0.22);
  object-fit: cover;
  transition: transform var(--trans-fast);
  flex-shrink: 0;
}

.brand-wrap:hover .brand-emblem {
  transform: rotate(-6deg) scale(1.05);
}

.brand-text {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--ink-primary);
  line-height: 1;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  margin-inline-start: 28px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
}

.nav-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-secondary);
  padding: 8px 10px;
  border-radius: var(--r-full);
  transition: var(--trans-fast);
  position: relative;
  white-space: nowrap;
}

.nav-link:hover, .nav-link.active {
  color: var(--ink-primary);
  background: rgba(255, 255, 255, 0.65);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: var(--gold-500);
  border-radius: var(--r-full);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Language Switcher Pill */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-primary);
  cursor: pointer;
  transition: var(--trans-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.lang-toggle:hover {
  background: var(--bg-body-alt);
  border-color: var(--gold-400);
  transform: translateY(-1px);
}

.lang-toggle .globe-icon {
  width: 16px;
  height: 16px;
  opacity: 0.75;
}

/* Luxury Primary Button */
.btn-gold {
  /* التدرّج الفاتح يعطي أبيضَ على 1.69:1 — أي زرّ الشراء
     الأساسي كان نصّه غير مقروء. تدرّجٌ أغمق يرفعه إلى 5.03:1. */
  background: var(--gold-gradient-cta);
  color: #FFFFFF;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--r-full);
  box-shadow: var(--gold-glow);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--trans-fast);
  border: none;
  cursor: pointer;
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(200, 147, 60, 0.32);
}

.btn-gold:active {
  transform: translateY(0);
}

.btn-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border-subtle);
  color: var(--ink-primary);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--trans-fast);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.btn-glass:hover {
  background: #FFFFFF;
  border-color: var(--gold-400);
  transform: translateY(-2px);
}

/* Mobile Hamburger */
.mobile-menu-btn {
  display: none;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--glass-border-subtle);
  border-radius: var(--r-md);
  cursor: pointer;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink-primary);
  align-items: center;
  justify-content: center;
  transition: var(--trans-fast);
}

.mobile-menu-btn:hover {
  background: #FFFFFF;
  border-color: var(--gold-400);
}

.mobile-menu-btn .menu-icon-close {
  display: none;
}

.mobile-menu-btn[aria-expanded="true"] .menu-icon-open {
  display: none;
}

.mobile-menu-btn[aria-expanded="true"] .menu-icon-close {
  display: block;
}

.store-badge-btn.is-disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.store-badge-status {
  /* هذا الوسم وحده يقع على زرّ متجر داكن (#1B2421) لا على الورق —
     فالذهبي هنا يجب أن يَفتح لا أن يغمق. --gold-text يعطي 2.77:1. */
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--gold-300);
  background: rgba(200, 147, 60, 0.16);
  border: 1px solid rgba(200, 147, 60, 0.3);
  padding: 2px 7px;
  border-radius: var(--r-full);
  margin-inline-start: 8px;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  position: relative;
  z-index: 1;
  padding: 60px 24px 80px;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200, 147, 60, 0.12);
  border: 1px solid rgba(200, 147, 60, 0.3);
  color: var(--gold-text);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--r-full);
}

.hero-title {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  line-height: 1.18;
  color: var(--ink-primary);
}

.hero-title .highlight {
  background: var(--gold-gradient-ink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  font-size: 1.18rem;
  color: var(--ink-secondary);
  max-width: 540px;
  line-height: 1.7;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.store-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink-primary);
  color: #FFFFFF;
  padding: 10px 20px;
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(27, 36, 33, 0.18);
  transition: var(--trans-fast);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.store-badge-btn:hover {
  transform: translateY(-2px);
  background: #273430;
  box-shadow: 0 12px 30px rgba(27, 36, 33, 0.28);
}

.store-badge-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.store-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: start;
}

.store-badge-subtitle {
  font-size: 0.7rem;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.store-badge-title {
  font-size: 1.05rem;
  font-weight: 700;
}

/* Hero Visual / Mockup */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mockup-card-container {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mockup-main-img {
  width: 78%;
  max-height: 92%;
  object-fit: contain;
  border-radius: 36px;
  box-shadow: 0 24px 64px rgba(27, 36, 33, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 4px solid rgba(255, 255, 255, 0.9);
  transition: var(--trans-med);
}

.mockup-main-img:hover {
  transform: scale(1.02) translateY(-4px);
}

/* Floating Glass Badges */
.floating-glass-pill {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  padding: 12px 18px;
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow-hover);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: floatOrb 6s ease-in-out infinite alternate;
}

.pill-1 {
  top: 8%;
  inset-inline-start: -20px;
}

.pill-2 {
  bottom: 10%;
  inset-inline-end: -20px;
  animation-delay: -3s;
}

.pill-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--gold-gradient-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1.2rem;
  box-shadow: var(--gold-glow);
}

.pill-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-primary);
}

.pill-desc {
  font-size: 0.8rem;
  color: var(--ink-secondary);
}

@keyframes floatOrb {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-12px) rotate(1deg); }
}

/* ==========================================================================
   SECTION COMMON
   ========================================================================== */
.section {
  position: relative;
  z-index: 1;
  padding: 80px 24px;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 56px;
}

.section-tag {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-text);
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 1.12rem;
  color: var(--ink-secondary);
  line-height: 1.65;
}

/* ==========================================================================
   FEATURE CARDS GRID
   ========================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ==========================================================================
   شبكة الميزات — بنتو بحسب الوزن، لا ثلاثة متساوية

   البنود الثلاثة ليست متكافئة: الأوّل **منتجٌ يُشترى**، والثاني **وعدٌ
   يُثبَت بالسماع**، والثالث **ادّعاء ثقة**. والتساوي في الشكل يسوّي
   بينها وهي غير متساوية — ثمّ إن القسم التالي (القوالب) له نفس عائلة
   التخطيط، فالتكرار في العائلة لا في العدد.

   تُطبَّق على الشاشة العريضة وحدها؛ ما دون 961 يبقى على قواعده أسفلَ
   الملفّ (عمودان ثمّ عمود)، فلا حاجة لإلغاء الإسناد في كل مقاس.
   ========================================================================== */
@media (min-width: 961px) {
  /* ⚠️ الصنف المُعدِّل إلزامي: .features-grid مستعملة أيضاً في
     books.html وstickers.html ببطاقات بلا أصناف وزن — فتغييرُ
     الأساس كان يوزّعها تلقائياً على شبكة 2fr/1fr بلا إسناد. */
  .features-grid--weighted {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
  }
  .features-grid--weighted .feature-card--product { grid-column: 1; grid-row: 1; }
  .features-grid--weighted .feature-card--proof   { grid-column: 1; grid-row: 2; }
  .features-grid--weighted .feature-card--trust   { grid-column: 2; grid-row: 1 / span 2; }
}

/* زرّ السماع — إثباتٌ في مكان الادّعاء.
   يعيد استعمال .js-play-sample ومشغّل site.js كما هما: لا مشغّل ثانٍ
   ولا ملفّ صوت ثانٍ. و.segment-icon هو ما يبدّله resetAudioButton. */
.feature-listen {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;              /* 44px ارتفاعاً — أدنى هدف لمس */
  border-radius: var(--r-full);
  border: 1px solid rgba(200, 147, 60, 0.45);
  background: rgba(200, 147, 60, 0.12);
  color: var(--gold-text);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--trans-fast);
}

.feature-listen:hover {
  background: rgba(200, 147, 60, 0.2);
  border-color: rgba(200, 147, 60, 0.7);
}

/* الحالة اللمسية: كل عنصر تفاعلي يُجيب الضغطة. */
.feature-listen:active {
  transform: scale(0.98);
}

.feature-listen .segment-icon {
  font-size: 0.78rem;
  line-height: 1;
}

.feature-listen.playing {
  background: rgba(200, 147, 60, 0.26);
}

/* رابط البطاقة الثالثة — الادّعاء يصير قابلاً للتحقّق. */
.feature-card-link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--gold-text);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(200, 147, 60, 0.5);
  transition: var(--trans-fast);
}

.feature-card-link:hover {
  color: #674B1D;                 /* 7.62:1 — والذهبي 600 يعطي 3.85 فقط */
  border-bottom-color: #674B1D;
}

.feature-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border-subtle);
  border-radius: var(--r-xl);
  padding: 36px 30px;
  box-shadow: var(--glass-shadow);
  transition: var(--trans-med);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  right: 0;
  height: 3px;
  background: var(--gold-gradient);
  opacity: 0;
  transition: var(--trans-fast);
}

.feature-card:hover {
  transform: translateY(-6px);
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow-hover);
  border-color: rgba(200, 147, 60, 0.35);
}

.feature-card:hover::before {
  opacity: 1;
}

/* ==========================================================================
   عائلة الرموز — Tabler Icons (رخصة MIT · github.com/tabler/tabler-icons)

   كانت إيموجي: 🏷️💖🛡️🎙️🌙🦁📖🌿⚡🎨 — وهي تُرسَم بشكل مختلف على كل
   نظام (سامسونغ · أبل · ويندوز)، أي أن مظهر هذه الأقسام لم يكن تحت
   سيطرة العلامة أصلاً. والمسارات منقولة من المصدر لا مرسومة باليد.

   السُمك والمقاس هنا وحدهما: عائلةٌ واحدة تُضبط في موضع واحد.
   ⚠️ والإيموجي داخل نصٍّ مقروء (🏠 الرئيسية) لم تُمَسّ — تلك تسميةٌ
   لا أيقونة، واستبدالها يخلط الدورين.
   ========================================================================== */
.ico {
  width: 26px;
  height: 26px;
  stroke-width: 1.5;
  flex: none;
}

.pill-icon .ico {
  width: 22px;
  height: 22px;
}

.feature-icon-box {
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  background: rgba(200, 147, 60, 0.12);
  /* الخطّ الرفيع يحتاج تبايناً أعلى من الإيموجي الممتلئة:
     gold-600 يعطي 3.6:1 على هذه الخلفية، وgold-text يعطي 4.89:1. */
  color: var(--gold-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 8px;
  transition: var(--trans-fast);
}

.feature-card:hover .feature-icon-box {
  background: var(--gold-gradient-cta);
  color: #FFFFFF;
  box-shadow: var(--gold-glow);
  transform: scale(1.05);
}

.feature-card-title {
  font-size: 1.32rem;
  font-weight: 700;
}

.feature-card-desc {
  font-size: 0.98rem;
  color: var(--ink-secondary);
  line-height: 1.65;
}

/* ==========================================================================
   INTERACTIVE THEME SWITCHER (THE 5 STICKERS)
   ========================================================================== */
.themes-showcase-box {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--glass-shadow-hover);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.theme-selector-pills {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.theme-pill-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-subtle);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: var(--trans-fast);
}

.theme-pill-btn:hover {
  background: #FFFFFF;
  transform: translateX(4px);
}

[dir="rtl"] .theme-pill-btn:hover {
  transform: translateX(-4px);
}

.theme-pill-btn.active {
  background: #FFFFFF;
  border-color: var(--gold-400);
  box-shadow: 0 4px 16px rgba(200, 147, 60, 0.18);
}

.theme-pill-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.theme-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.theme-pill-title {
  font-weight: 700;
  font-size: 1.05rem;
}

/* Live Preview Card */
.theme-preview-card-wrap {
  display: flex;
  justify-content: center;
}

.sticker-live-card {
  width: 100%;
  max-width: 380px;
  padding: 36px 28px;
  border-radius: var(--r-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  transition: all 0.35s ease;
  position: relative;
}

.sticker-live-mark {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.sticker-live-word {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.1;
}

.sticker-live-trans {
  font-size: 1.45rem;
  font-weight: 500;
  opacity: 0.85;
}

.sticker-audio-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform var(--trans-fast);
}

.sticker-audio-btn:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.14);
}

.sticker-live-qr {
  width: 84px;
  height: 84px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticker-live-qr svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   AUDIO BOOK PLAYER SHOWCASE
   ========================================================================== */
.audio-showcase-box {
  background: linear-gradient(135deg, rgba(30, 42, 46, 0.95) 0%, rgba(14, 56, 48, 0.92) 100%);
  color: #FFFFFF;
  border-radius: var(--r-xl);
  padding: 50px 40px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 24px 60px rgba(10, 81, 72, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.audio-book-info h3 {
  color: #FFFFFF;
  font-size: 2.2rem;
  margin-bottom: 14px;
}

.audio-book-info p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.audio-segments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.audio-segment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 18px;
  border-radius: var(--r-md);
  transition: var(--trans-fast);
  cursor: pointer;
  /* الصفّ أصبح <button> حقيقيّاً: بدون هذين يفرض المتصفّح خطّه ولون
     نصّه الافتراضيّين على الزرّ، فيُعرض عنوان المقطع أسودَ على الخلفية
     الداكنة بدل أن يرث أبيض الصندوق كما كان وهو <div>. */
  font: inherit;
  color: inherit;
  text-align: inherit;
}

.audio-segment-row:hover, .audio-segment-row.playing {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--gold-400);
}

.segment-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.segment-num {
  /* داخل .audio-showcase-box وخلفيتها تدرّج داكن — الفاتح هو الصحيح هنا. */
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-400);
  background: rgba(200, 147, 60, 0.15);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.segment-name {
  font-weight: 600;
  font-size: 0.98rem;
}

.segment-time {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  margin-top: auto;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.6);
  border-top: 1px solid var(--line-subtle);
  padding: 60px 24px 30px;
}

.footer-container {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-brand-col p {
  margin-top: 14px;
  max-width: 320px;
  font-size: 0.94rem;
}

.footer-col-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--ink-primary);
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-list a {
  font-size: 0.92rem;
  color: var(--ink-secondary);
  transition: var(--trans-fast);
}

.footer-links-list a:hover {
  color: var(--gold-text);
}

.footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--line-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--ink-tertiary);
  flex-wrap: wrap;
  gap: 16px;
}

/* ==========================================================================
   CONTENT INNER PAGES (About, Privacy, Contact, etc.)
   ========================================================================== */
.inner-hero {
  text-align: center;
  padding: 60px 24px 40px;
  max-width: 800px;
  margin: 0 auto;
}

.inner-hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: 16px;
}

.content-glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: 48px;
  box-shadow: var(--glass-shadow);
  margin-bottom: 48px;
}

.prose-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--ink-secondary);
  font-size: 1.05rem;
  line-height: 1.8;
}

.prose-section h2 {
  color: var(--ink-primary);
  font-size: 1.6rem;
  margin-top: 24px;
  margin-bottom: 8px;
}

.prose-section h3 {
  color: var(--ink-primary);
  font-size: 1.3rem;
  margin-top: 16px;
  margin-bottom: 6px;
}

.prose-section ul {
  padding-inline-start: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border-bottom: 1px solid var(--line-subtle);
  padding: 16px 0;
  transition: border-color var(--trans-fast);
}

.faq-item:first-of-type {
  padding-top: 4px;
}

.faq-item:last-of-type {
  border-bottom: none;
  padding-bottom: 4px;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--ink-primary);
  font-family: inherit;
  text-align: inherit;
  cursor: pointer;
  padding: 8px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.45;
  transition: color var(--trans-fast);
  border-radius: var(--r-sm);
  outline: none;
}

.faq-question:hover {
  color: var(--gold-text);
}

.faq-question:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.faq-question[aria-expanded="true"] {
  color: var(--gold-600);
}

.faq-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--r-full);
  background: var(--bg-body-alt);
  border: 1px solid var(--line-strong);
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  transition: transform 0.35s var(--ease-snappy),
              background var(--trans-fast),
              color var(--trans-fast),
              border-color var(--trans-fast),
              box-shadow var(--trans-fast);
  user-select: none;
}

.faq-question:hover .faq-icon {
  background: var(--teal-mist);
  color: var(--teal-deep);
  border-color: var(--teal-soft);
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
  background: var(--gold-gradient-cta);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(200, 147, 60, 0.3);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  padding: 0 16px;
  font-size: 0.98rem;
  color: var(--ink-secondary);
  line-height: 1.75;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease,
              padding 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              margin-top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
}

.faq-question[aria-expanded="true"] + .faq-answer,
.faq-answer.is-open {
  max-height: 350px;
  opacity: 1;
  margin-top: 10px;
  margin-bottom: 6px;
  padding: 14px 18px;
  border-color: rgba(213, 205, 192, 0.65);
}

/* ── شبكة صفحة التواصل ─────────────────────────────────────────────────
   🔴 كانت نمطاً مضمّناً في `contact.html` (`1.2fr 0.8fr`) — والنمط
   المضمّن لا يراه استعلام وسائط، فبقيت الصفحة عمودين على 375px:
   النموذج ينضغط إلى 210px ويُدفع خارج الشاشة (فيض 20px مقيس).
   النقطة 860px لأن العمودين معاً يحتاجان ذلك قبل أن يخنقا النموذج. */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* Intermediate Breakpoint: Compact Desktop Header (prevents wrapping between 961px and 1180px) */
@media (max-width: 1180px) and (min-width: 961px) {
  .site-header {
    padding: 12px 16px;
  }
  .nav-container {
    padding: 6px 14px;
  }
  .nav-menu {
    margin-inline-start: 12px;
  }
  .nav-links {
    gap: 6px;
  }
  .nav-link {
    padding: 6px 7px;
    font-size: 0.84rem;
  }
  .nav-actions {
    gap: 8px;
  }
  .lang-toggle {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
  .btn-gold {
    padding: 8px 14px;
    font-size: 0.84rem;
  }
  .brand-wrap {
    gap: 10px;
  }
  .brand-emblem {
    width: 48px;
    height: 48px;
  }
  .brand-text {
    font-size: 1.45rem;
  }
}

/* Mobile & Tablet Breakpoint: 960px and below */
@media (max-width: 960px) {
  .hero-section {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 30px;
  }
  .hero-content {
    align-items: center;
  }
  .hero-desc {
    margin: 0 auto;
  }
  .hero-cta-group {
    justify-content: center;
  }
  .themes-showcase-box {
    grid-template-columns: 1fr;
  }
  .audio-showcase-box {
    grid-template-columns: 1fr;
  }
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }

  /* 2-up deliberate grid + 1 full-width card */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .features-grid .feature-card:last-child:nth-child(3) {
    grid-column: 1 / -1;
  }

  /* Mobile Navbar & Hamburger */
  .nav-container {
    position: relative;
    padding: 8px 16px;
  }
  .mobile-menu-btn {
    display: flex;
  }
  .nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: rgba(251, 248, 243, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: 0 16px 40px rgba(27, 36, 33, 0.16);
    padding: 20px;
    flex-direction: column;
    gap: 16px;
    z-index: 105;
    margin-inline-start: 0;
  }
  .nav-menu.is-open {
    display: flex;
  }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 6px;
  }
  .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: var(--r-md);
    font-size: 1.05rem;
    width: 100%;
  }
  .nav-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line-subtle);
  }
  .lang-toggle {
    justify-content: center;
    min-height: 44px;
    width: 100%;
    font-size: 0.96rem;
  }
  .btn-gold.header-cta, .nav-actions .btn-gold {
    justify-content: center;
    min-height: 44px;
    width: 100%;
    font-size: 0.96rem;
  }
}

/* Small Screens: Features 1-up */
@media (max-width: 640px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .site-header {
    padding: 12px 16px;
  }
  .content-glass-card {
    padding: 28px 20px;
  }
  .footer-container {
    grid-template-columns: 1fr;
  }
  .hero-title {
    font-size: 2.2rem;
  }
}


/* ==========================================================================
   تقليل الحركة — المستخدم الذي يطلبها من نظامه يطلبها لسبب طبّي غالباً.
   الموقع فيه مدار عائم (floatOrb) و21 انتقالاً؛ كلّها تسكن هنا.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}