/* ==========================================================================
   MORWAY — الموقع التعريفي
   نظام الألوان مأخوذ حرفيًا من lib/constants/app_colors.dart (الهوية
   اللونية الفعلية المُستخدَمة في تطبيق Morway الحالي)، وليس من أي قيم
   جديدة أو مُخترَعة. راجع website/README.md لملاحظة حول اختلاف طفيف بين
   هذه القيم ووثيقة MORWAY_AI/DESIGN_SYSTEM.md.
   ========================================================================== */

:root {
  /* ألوان الهوية — من lib/constants/app_colors.dart */
  --color-gold: #BE9C5F;
  --color-coral: #E76F51;
  --color-background: #F5F0E8;
  --color-card-warm-white: #FBF8F3;
  --color-card-beige: #ECE1CD;
  --color-card-sage: #DDE3D0;
  --color-border: #DDD0BC;
  --color-divider: #E3D8C4;
  --color-text-primary: #3D2F22;
  --color-text-secondary: #7A6A57;
  --color-text-muted: #A6998A;

  /* لون داكن تاريخي فعلي من هوية التطبيق (الوضع الداكن السابق) — يُستخدَم
     هنا فقط كخلفية تباين في قسم الخصوصية، وليس لونًا جديدًا. */
  --color-dark: #1A1A1A;
  --color-dark-text: #FBF8F3;

  /* طبقة نص داكن فوق الذهبي — الأبيض على الذهبي لا يحقق تباينًا كافيًا
     (~2.6:1)؛ النص الداكن يحقق ~5:1 (WCAG AA) مع الحفاظ على نفس لون
     الذهبي الأصلي بلا أي تغيير. */
  --color-on-gold: var(--color-text-primary);

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif;

  --container-max: 1120px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --radius-card: 24px;
  --radius-btn: 14px;

  --shadow-soft: 0 12px 32px rgba(61, 47, 34, 0.08);
}

/* ---------- إعادة ضبط أساسية ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  background: var(--color-background);
  color: var(--color-text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, p, ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

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

/* ---------- تخطي إلى المحتوى ---------- */
.skip-link {
  position: absolute;
  right: var(--space-2);
  top: -60px;
  background: var(--color-text-primary);
  color: var(--color-card-warm-white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-btn);
  z-index: 100;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: var(--space-2);
}

/* ---------- تركيز واضح للوحة المفاتيح ---------- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-text-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- حاوية عامة ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* ---------- الأزرار ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 40px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn--primary {
  background: var(--color-gold);
  color: var(--color-on-gold);
  box-shadow: var(--shadow-soft);
}

/* حركة هوفر "فاخرة" هادئة: ارتفاع خفيف جدًا + ظل ذهبي دافئ يتوسّع، بلا أي
   وميض أو تأثير لامع يوحي بقالب SaaS جاهز. */
.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 18px 40px rgba(190, 156, 95, 0.35), 0 8px 18px rgba(61, 47, 34, 0.12);
}

.btn--primary:active {
  transform: translateY(-1px) scale(1.005);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) 0 var(--space-5);
  text-align: center;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  /* عمودي (column) + justify-content:center للتوسيط الرأسي — عمدًا وليس
     row + align-items:center: في اتجاه row كانت .hero__inner (عنصر Flex
     الوحيد) تُحجَّم افتراضيًا حسب أقصى عرض لمحتواها غير الملتف (خاصية
     min-width:auto لعناصر Flex)، ما يتسبّب بتجاوز عرض الشاشات الضيقة
     وقصّ بداية كل سطر عربي. في اتجاه column، المحور المتعامد (Cross Axis)
     هو العرض، والقيمة الافتراضية align-items:stretch (لم تُغيَّر هنا)
     تجعل عنصر .hero__inner يمتد ليملأ العرض الكامل بأمان دومًا. */
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .hero {
    padding: var(--space-7) 0 var(--space-6);
  }
}

.hero__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(560px 560px at 82% 14%, rgba(190, 156, 95, 0.18), transparent 70%),
    radial-gradient(420px 420px at 12% 18%, rgba(221, 227, 208, 0.4), transparent 70%),
    radial-gradient(620px 620px at 50% 105%, rgba(190, 156, 95, 0.10), transparent 70%);
}

/* تركيبة الهندسة التجريدية (شماعة + طيات قماش + نقاط ضوء) — تملأ الحيّز
   البصري المحيط بالمحتوى المتمركز، بثقل بصري أكبر قليلاً نحو الجهة
   اليمنى من الشاشة (المنطقة التي يبدأ عندها القارئ العربي)، بلا أي تأثير
   على تمركز عمود المحتوى نفسه. */
.hero__geometry {
  position: absolute;
  top: 50%;
  right: 50%;
  /* محدودة صراحةً بـ 100% من صندوق .hero__decor نفسه (المطابق تمامًا
     لصندوق .hero عبر inset:0) بدل وحدة vw — لتفادي أي احتمال لتأثيرها
     على حسابات تخطيط عناصر أخرى، والبقاء دومًا داخل حدود القسم بأمان. */
  width: min(900px, 100%);
  height: min(900px, 100%);
  transform: translate(50%, -50%);
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.18;
}

@media (min-width: 480px) {
  .hero__geometry {
    opacity: 0.28;
  }
}

/* .hero__geometry-hanger removed: hanger SVG removed from Hero to keep hero clean */

.hero__geometry-fold {
  stroke: var(--color-text-secondary);
  opacity: 0.4;
}

.hero__geometry-fold--soft {
  opacity: 0.22;
}

.hero__geometry-dot {
  fill: var(--color-gold);
  stroke: none;
  opacity: 0.6;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* stretch (وليس center) عمدًا: align-items:center يُحجِّم كل عنصر ابن
     حسب "fit-content" الذي قد يتجاوز عرض العمود الفعلي فلا يلتف النص
     العربي عند الشاشات الضيقة (خاصية Flex معروفة). stretch يجعل عناصر
     النص (h1/p) تمتد بأمان للعرض الكامل فيلتفّ النص داخلها بشكل طبيعي،
     ويبقى التوسيط الفعلي عبر text-align:center الموروثة من .hero. العناصر
     التي لا يجب أن تمتد (الشعار والزر) لها align-self:center صريح أدناه. */
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.hero__logo {
  width: min(180px, 42vw);
  height: auto;
  margin-bottom: var(--space-3);
  align-self: center;
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both,
    heroFloat 6s ease-in-out 0.8s infinite;
}

.hero__wordmark {
  font-size: clamp(1.05rem, 2vw, 1.375rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.hero__tagline {
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.hero__subtitle {
  margin-top: var(--space-3);
  max-width: 46ch;
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}

/* فواصل أسطر يدوية تظهر فقط دون 768px — عند هذا العرض الجملة الكاملة
   تلتف تلقائيًا بشكل صحيح وبلا مشاكل (مُتحقَّق منه فعليًا)، فتبقى الفواصل
   اليدوية مخفية هناك حتى لا تُقسِّم النص إلى أسطر قصيرة غير ضرورية على
   الشاشات الأوسع. */
.hero__break {
  display: none;
}

@media (max-width: 767px) {
  .hero__break {
    display: inline;
  }
}

.hero__inner .btn {
  margin-top: var(--space-5);
  align-self: center;
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.44s both;
}

/* دخول ناعم جدًا فقط: تلاشٍ + ارتفاع بسيط — بلا أي ارتداد أو مبالغة،
   يطابق "Very subtle only" في متطلبات الحركة. */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* "طفو" هادئ جدًا للشعار فقط بعد ظهوره — سعة حركة صغيرة (4px) وبطيئة. */
@keyframes heroFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* ---------- أقسام عامة ---------- */
.section {
  padding: var(--space-7) 0;
}

.section--alt {
  background: var(--color-card-beige);
}

.section__inner {
  text-align: center;
}

.section__inner--narrow {
  max-width: 720px;
  margin: 0 auto;
}

.section__heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.section__lead {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.section__lead:last-child {
  margin-bottom: 0;
}

/* ---------- بطاقات القيمة ---------- */
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  text-align: right;
}

.value-card {
  background: var(--color-card-warm-white);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
}

.value-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.value-card__text {
  color: var(--color-text-secondary);
  font-size: 1rem;
}

/* ---------- قسم الأسلوب الشامل ---------- */
.style-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
  text-align: center;
}

.style-card {
  background: var(--color-card-sage);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-3);
}

/* أيقونتا "ربطة العنق" و"شريطة الشعر" الرسميتان — ملفا SVG حقيقيان
   (assets/images/bow-tie.svg و hair-bow.svg)، مُدرَجان عبر <img> فبلا
   خاصيتَي fill/stroke على مستوى CSS (لا تُطبَّقان على <img> أصلاً) — أي
   تغيير في سماكة الخطوط يتم داخل ملفَي الـSVG أنفسهما فقط (انظر تعليقاتهما).
   طبقة الخلفية شبه البيضاء التي كانت ضمن الملفين أُزيلت من الملفين مباشرة
   (نسخة صفحة الهبوط فقط). */
/* إطار دائري حول كل أيقونة — نفس المسافة السابقة قبل العنوان (margin-
   bottom) انتقلت من الأيقونة إلى الدائرة نفسها حتى تبقى المسافة الفعلية
   قبل h3 كما كانت بالضبط. مقاسا الدائرة/الأيقونة يبدآن بقيمتَي الجوال هنا
   (نهج mobile-first المتّبع في بقية الملف)، ويكبران عند 768px فأكثر. خلفية
   الدائرة الآن بنفس لون خلفية البطاقة نفسها (--color-card-sage) فتبدو
   الدائرة مندمجة مع البطاقة، ويميّزها فقط إطارها الذهبي. */
.style-card__icon-circle {
  width: 74px;
  height: 74px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--color-card-sage);
  border: 1.5px solid var(--color-gold);
  box-shadow: 0 2px 8px rgba(61, 47, 34, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .style-card__icon-circle {
    width: 90px;
    height: 90px;
  }
}

.style-card__art-img {
  width: 52px;
  height: 52px;
}

@media (min-width: 768px) {
  .style-card__art-img {
    width: 63px;
    height: 63px;
  }
}

.style-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.style-card__text {
  color: var(--color-text-secondary);
}

/* ---------- قسم الخصوصية (تباين داكن) ---------- */
.section--dark {
  background: var(--color-dark);
  color: var(--color-dark-text);
}

.section--dark .section__heading {
  color: var(--color-dark-text);
}

.privacy-list {
  display: grid;
  gap: var(--space-2);
  font-size: 1.125rem;
}

.privacy-list li {
  position: relative;
  padding-inline-start: var(--space-3);
}

.privacy-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* ---------- قسم الإطلاق القريب ---------- */
.launch {
  text-align: center;
}

.launch__heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.launch__text {
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  margin-bottom: var(--space-4);
}

.badge {
  display: inline-block;
  padding: 10px 28px;
  border: 1.5px solid var(--color-gold);
  color: var(--color-text-primary);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- تذييل ---------- */
.footer {
  background: var(--color-card-beige);
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) 0;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.footer__brand {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
}

.footer__copyright {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.footer__legal {
  display: flex;
  gap: var(--space-3);
}

.footer__legal a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__legal a:hover {
  color: var(--color-text-primary);
}

.footer__social {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-card-warm-white);
  color: var(--color-text-primary);
  transition: background 0.15s ease, color 0.15s ease;
}

.social-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.social-icon:hover {
  background: var(--color-gold);
  color: var(--color-on-gold);
}

/* ==========================================================================
   نقاط الاستجابة — 768px / 1024px / 1440px
   ========================================================================== */

@media (min-width: 768px) {
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .style-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: right;
  }
}

@media (min-width: 1024px) {
  .value-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero__logo {
    width: 220px;
  }

  .hero__geometry {
    opacity: 0.34;
  }
}

@media (min-width: 1440px) {
  .container {
    padding: 0 var(--space-5);
  }
}