/* ════════════════════════════════════════════════════════════
   دعوة خطوبة — محمد & نور — بعلبك
   لوحة الألوان: ليل بعلبك + حجر القلعة الذهبي المضاء
   ════════════════════════════════════════════════════════════ */

:root {
  --night:      #0e0c08;
  --night-2:    #1a1710;
  --panel:      #1e1a12;
  --gold:       #d4af6a;
  --gold-light: #f3dfae;
  --gold-hot:   #fff3d4;
  --gold-deep:  #9a7b3f;
  --ivory:      #f0e8d5;
  --sand:       #a89a7c;
  --line:       rgba(212, 175, 106, .22);

  --f-display: "Aref Ruqaa", serif;
  --f-quote:   "Amiri", serif;
  --f-body:    "Tajawal", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* التمرير بالأزرار فقط — الحركة تُدار من جافاسكربت */
  overscroll-behavior: none;
  /* إخفاء شريط التمرير */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge القديم */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;              /* Chrome / Safari / Edge */
  width: 0;
  height: 0;
}

body {
  font-family: var(--f-body);
  background: var(--night);
  color: var(--ivory);
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--night); }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════ شريط تقدم التمرير ═══════════ */

.progress {
  position: fixed;
  top: 0;
  right: 0;
  height: 3px;
  width: 0%;
  z-index: 40;
  background: linear-gradient(to left, var(--gold-deep), var(--gold), var(--gold-hot));
  box-shadow: 0 0 12px rgba(212, 175, 106, .6);
  transition: width .1s linear;
}

/* ═══════════ الغبار الذهبي ═══════════ */

#dust {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ═══════════ نص ذهبي متلألئ ═══════════ */

.shimmer-text {
  background: linear-gradient(
    105deg,
    var(--gold) 0%,
    var(--gold) 38%,
    var(--gold-hot) 50%,
    var(--gold) 62%,
    var(--gold) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
  animation: shimmer 4.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 22px rgba(0, 0, 0, .55));
}

@keyframes shimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

/* ═══════════ شاشة الافتتاح — البطاقة تنفتح كطيّة ═══════════ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  background: transparent;
}

.splash.hidden {
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s .1s;
}

/* دفّتا البطاقة */
.fold {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.15%;
  z-index: 1;
  background:
    radial-gradient(ellipse 120% 90% at var(--fold-focus, 100%) 35%, #2a2314 0%, #14110a 70%);
  backface-visibility: hidden;
  transition: transform 1.9s cubic-bezier(.6, .05, .25, 1);
  will-change: transform;
}

.fold-a { left: 0;  transform-origin: left center;  --fold-focus: 100%; }
.fold-b { right: 0; transform-origin: right center; --fold-focus: 0%; }

.splash.open .fold-a { transform: rotateY(112deg); }
.splash.open .fold-b { transform: rotateY(-112deg); }

/* نقش خفيف على الدفّتين */
.fold-pattern {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at var(--fold-focus, 100%) 50%, rgba(212, 175, 106, .07), transparent 65%),
    repeating-linear-gradient(45deg,
      rgba(212, 175, 106, .05) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg,
      rgba(212, 175, 106, .05) 0 1px, transparent 1px 13px);
  pointer-events: none;
}

/* إطار مزدوج على كل دفّة */
.fold-pattern::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(212, 175, 106, .2);
  outline: 1px solid rgba(212, 175, 106, .08);
  outline-offset: 5px;
  pointer-events: none;
}

/* نجيمات في زوايا الدفّتين */
.fold-pattern::before {
  content: "✦ ✦";
  position: absolute;
  inset-inline: 26px;
  top: 24px;
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: .7rem;
  color: rgba(212, 175, 106, .45);
  text-shadow: 0 0 8px rgba(212, 175, 106, .5);
  pointer-events: none;
}

/* حافة الفتحة الذهبية عند خط المنتصف */
.fold-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  box-shadow: 0 0 18px rgba(212, 175, 106, .5);
  pointer-events: none;
}

.fold-a .fold-edge { right: 0; }
.fold-b .fold-edge { left: 0; }

/* الختم في الوسط */
.splash-inner {
  text-align: center;
  padding: 1.5rem;
  position: relative;
  z-index: 2;
  transition: opacity .9s ease, transform .9s cubic-bezier(.5, 0, .8, .5);
}

.splash.open .splash-inner {
  opacity: 0;
  transform: scale(1.6);
  filter: blur(6px);
}

/* هالة خلف الختم */
.seal-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -62%);
  width: 130vmin;
  height: 130vmin;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 106, .14) 0%, rgba(212, 175, 106, .04) 38%, transparent 62%);
  animation: glowBreathe 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes glowBreathe {
  0%, 100% { opacity: .7; transform: translate(-50%, -62%) scale(1); }
  50%      { opacity: 1;  transform: translate(-50%, -62%) scale(1.08); }
}

/* الختم — ميدالية معدنية مصمتة تغطي خط الفتحة */
.splash-ring-wrap {
  position: relative;
  width: clamp(210px, 56vw, 280px);
  height: clamp(210px, 56vw, 280px);
  margin-inline: auto;
  display: grid;
  place-items: center;
  grid-template-areas: "seal";
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, #372d17 0%, #241d0f 45%, #171209 100%);
  border: 1px solid rgba(212, 175, 106, .55);
  box-shadow:
    0 0 0 6px rgba(14, 12, 8, .9),
    0 0 0 7px rgba(212, 175, 106, .3),
    0 24px 70px rgba(0, 0, 0, .65),
    0 0 70px rgba(212, 175, 106, .22),
    inset 0 0 40px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(243, 223, 174, .18);
  animation: breathe 4.5s ease-in-out infinite;
}

.splash-ring-wrap > * { grid-area: seal; }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

.ring {
  width: 100%;
  height: 100%;
  stroke: var(--gold-deep);
  stroke-width: 1;
}

.ring-a circle {
  stroke-dasharray: 4 10;
  animation: spin 26s linear infinite;
  transform-origin: center;
}

.ring-b { stroke: var(--line); }

.ring-b circle {
  stroke-dasharray: 90 40;
  animation: spin 18s linear infinite reverse;
  transform-origin: center;
}

.ring-c { stroke: rgba(212, 175, 106, .3); }

.ring-c circle { stroke-dasharray: 1 6; }

@keyframes spin { to { transform: rotate(360deg); } }

.splash-monogram {
  font-family: var(--f-display);
  font-size: clamp(3rem, 12vw, 4.6rem);
  line-height: 1;
  align-self: center;
  transform: translateY(-8%);
  animation: shimmer 4.5s ease-in-out infinite;
}

.splash-monogram i {
  font-style: normal;
  font-size: .55em;
  margin-inline: .12em;
}

/* سطر صغير داخل الختم */
.seal-tagline {
  align-self: end;
  justify-self: center;
  margin-bottom: 17%;
  font-size: clamp(.7rem, 2.4vw, .85rem);
  font-weight: 300;
  letter-spacing: .35em;
  margin-inline-start: .35em;
  color: var(--sand);
}

/* زخرفة تحت الختم */
.splash-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  max-width: 210px;
  margin: 1.9rem auto 0;
  color: var(--gold-deep);
}

.splash-orn span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to var(--grad-dir, left), transparent, var(--gold-deep));
}

.splash-orn span:last-child { --grad-dir: right; }

.splash-orn b {
  font-size: .75rem;
  font-weight: 400;
  animation: starPulse 2.6s ease-in-out infinite;
}

.splash-label {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: .8em;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  font-weight: 400;
  color: var(--gold-light);
  text-shadow: 0 0 24px rgba(212, 175, 106, .35);
}

.splash-date {
  margin-top: .5rem;
  font-size: .85rem;
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--sand);
}

/* الكلمات كاملة حفاظاً على اتصال الحروف العربية */
.splash-label span {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
}

/* تظهر الكلمات فقط بعد اكتمال التحميل */
.splash.ready .splash-label span { animation: letterUp .9s ease forwards; }

.splash.ready .splash-label span:nth-child(1) { animation-delay: .15s; }
.splash.ready .splash-label span:nth-child(2) { animation-delay: .45s; }

@keyframes letterUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════ مؤشر التحميل + زر الفتح ═══════════ */

/* المؤشر والزر متراكبان في نفس الموضع: يختفي الأول ويظهر الثاني */
.splash-action {
  margin-top: 2.2rem;
  display: grid;
  place-items: center;
}

.splash-action > * { grid-area: 1 / 1; }

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  transition: opacity .6s ease, transform .6s ease;
}

.splash.ready .loader {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.loader-bar {
  width: clamp(170px, 46vw, 240px);
  height: 2px;
  background: rgba(212, 175, 106, .18);
  border-radius: 2px;
  overflow: hidden;
}

.loader-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(to left, var(--gold-deep), var(--gold), var(--gold-hot));
  box-shadow: 0 0 10px rgba(212, 175, 106, .7);
  border-radius: 2px;
  transition: width .25s ease;
}

.loader-pct {
  font-size: .8rem;
  font-weight: 300;
  color: var(--sand);
  letter-spacing: .12em;
}

/* زر فتح الدعوة — اللمسة تسمح للمتصفح بتشغيل الموسيقى بالصوت */
.open-btn {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 2.5rem;
  border-radius: 999px;
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--night);
  background: linear-gradient(120deg, var(--gold), #e5c684);
  border: 1px solid var(--gold-deep);
  box-shadow: 0 10px 34px rgba(212, 175, 106, .3);
  transition: opacity .6s ease .3s, transform .6s ease .3s;
}

.open-btn svg { width: 19px; height: 19px; }

.splash.ready .open-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: openPulse 2.2s ease-in-out .9s infinite;
}

.splash.open .open-btn { pointer-events: none; }

@keyframes openPulse {
  0%, 100% { box-shadow: 0 10px 34px rgba(212, 175, 106, .3);  transform: scale(1); }
  50%      { box-shadow: 0 10px 52px rgba(212, 175, 106, .65); transform: scale(1.045); }
}


/* ═══════════ الواجهة — الفيديو ═══════════ */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: slowZoom 22s ease-in-out infinite alternate;
}

@keyframes slowZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1.0); }
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(14, 12, 8, .6) 0%,
      rgba(14, 12, 8, .22) 35%,
      rgba(14, 12, 8, .45) 70%,
      var(--night) 100%);
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(14, 12, 8, .55) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.6rem, 6vw, 4rem);
  will-change: transform, opacity;
}

/* الإطار الزخرفي يرسم نفسه */
.hero-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: var(--gold);
  opacity: .55;
  pointer-events: none;
}

.frame-path, .frame-orn {
  stroke-width: 1.2;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}

.splash-opened .frame-path {
  animation: draw 2.6s ease .9s forwards;
}

.splash-opened .frame-orn {
  animation: draw 1.2s ease 2.4s forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

.hero-eyebrow {
  font-weight: 300;
  font-size: clamp(.95rem, 2.6vw, 1.25rem);
  letter-spacing: .14em;
  color: var(--ivory);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}

.hero-names {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(.6rem, 2.5vw, 1.5rem);
  margin-top: 1rem;
  flex-wrap: wrap;
}

.hero-names .name {
  font-family: var(--f-display);
  font-size: clamp(3.2rem, 14vw, 7.5rem);
  line-height: 1.3;
}

.hero-names .amp {
  font-family: var(--f-quote);
  font-style: italic;
  font-size: clamp(1.7rem, 6vw, 3.2rem);
  color: var(--ivory);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .65);
}

.hero-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 1.5rem auto 0;
  max-width: 440px;
  color: var(--gold);
}

.hero-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to var(--grad-dir, left), transparent, var(--gold));
}

.hero-rule span:last-child { --grad-dir: right; }

.hero-rule b {
  font-size: .85rem;
  font-weight: 400;
  animation: starPulse 2.6s ease-in-out infinite;
}

@keyframes starPulse {
  0%, 100% { opacity: .6; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;  transform: scale(1.35) rotate(45deg); }
}

.hero-date {
  margin-top: 1.3rem;
  font-size: clamp(1rem, 3vw, 1.35rem);
  font-weight: 400;
  letter-spacing: .07em;
  color: var(--ivory);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}

.hero-date em { font-style: normal; color: var(--gold); }

/* حركة ظهور عناصر الواجهة */
.reveal-hero {
  opacity: 0;
  transform: translateY(30px) scale(.96);
  filter: blur(8px);
}

.splash-opened .reveal-hero {
  animation: heroIn 1.4s cubic-bezier(.2, .7, .25, 1) var(--d, 0s) forwards;
}

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.reveal-hero-amp {
  opacity: 0;
  transform: rotate(-160deg) scale(.3);
}

.splash-opened .reveal-hero-amp {
  animation: ampIn 1.1s cubic-bezier(.2, .8, .3, 1.25) var(--d, 0s) forwards;
}

@keyframes ampIn {
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* زر الصوت */
.sound-toggle {
  position: absolute;
  z-index: 3;
  top: max(1.2rem, env(safe-area-inset-top));
  inset-inline-start: 1.2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(240, 232, 213, .35);
  background: rgba(14, 12, 8, .35);
  backdrop-filter: blur(8px);
  color: var(--ivory);
  display: grid;
  place-items: center;
  transition: border-color .3s, color .3s, transform .3s;
}

.sound-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: scale(1.08);
}

.sound-toggle svg { width: 20px; height: 20px; }
.sound-toggle .icon-sound { display: none; }
.sound-toggle.on .icon-sound { display: block; }
.sound-toggle.on .icon-muted { display: none; }

/* ═══════════ الأقسام العامة — لوحات بملء الشاشة تماماً، تنقّل بالأزرار ═══════════ */

.section {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 2rem);
  /* مساحة سفلية إضافية كي لا يغطي شريط التنقل المثبّت أسفل الشاشة أي محتوى */
  padding-bottom: max(clamp(3rem, 7vw, 5rem), calc(4.6rem + env(safe-area-inset-bottom)));
  max-width: 1100px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  perspective: 1100px;
}

/* الغلاف المتحرك مع التمرير — لا يتقلّص كي نقيس ارتفاعه الحقيقي لملاءمة الشاشة */
.sec-inner {
  flex: 0 0 auto;
  width: 100%;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.section-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 5.5vw, 2.8rem);
  color: var(--gold);
}

.title-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  max-width: 240px;
  margin: 1rem auto clamp(2.2rem, 6vw, 3.6rem);
  color: var(--gold-deep);
}

.title-orn span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to var(--grad-dir, left), transparent, var(--gold-deep));
}

.title-orn span:last-child { --grad-dir: right; }
.title-orn b { font-size: .7rem; font-weight: 400; }

/* زخرفة أعمدة القلعة الستة — ترسم نفسها عند الظهور */
.columns-motif {
  color: var(--gold-deep);
  opacity: .85;
  width: clamp(150px, 30vw, 220px);
  margin: 0 auto clamp(2rem, 5vw, 3rem);
}

.columns-motif.small { width: clamp(120px, 22vw, 170px); }

.draw-on-scroll line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 2.2s ease;
}

.draw-on-scroll.in line { stroke-dashoffset: 0; }

/* حركة الظهور عند التمرير */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  transition:
    opacity 1.1s ease var(--d, 0s),
    transform 1.1s cubic-bezier(.2, .7, .25, 1) var(--d, 0s),
    filter 1.1s ease var(--d, 0s);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ═══════════ الآية ═══════════ */

.quote::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse closest-side at 50% 40%, rgba(212, 175, 106, .06), transparent);
  pointer-events: none;
}

.quote blockquote p {
  font-family: var(--f-quote);
  font-size: clamp(1.4rem, 4.4vw, 2.2rem);
  line-height: 2.2;
  color: var(--ivory);
  max-width: 780px;
  margin-inline: auto;
  text-shadow: 0 0 40px rgba(212, 175, 106, .15);
}

.quote cite {
  display: block;
  margin-top: 1.5rem;
  font-style: normal;
  font-size: .95rem;
  color: var(--sand);
  letter-spacing: .18em;
}

/* ═══════════ العد التنازلي ═══════════ */

.countdown {
  /* closest-side كي يتلاشى التوهج قبل حافة القسم فلا تظهر حواف على الشاشات العريضة */
  background: radial-gradient(closest-side, rgba(212, 175, 106, .09), transparent);
}

.count-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 2.5vw, 1.4rem);
  max-width: 660px;
  margin-inline: auto;
}

.count-cell {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #241f14, var(--panel) 55%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.1rem, 3.6vw, 2rem) .4rem;
}

.count-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.cell-glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 0%, rgba(212, 175, 106, .12), transparent 60%);
  animation: cellPulse 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cellPulse {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}

.count-cell b {
  display: block;
  position: relative;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 7vw, 3.2rem);
  line-height: 1.4;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(212, 175, 106, .35);
}

.count-cell b.tick {
  animation: tick .5s cubic-bezier(.2, .7, .3, 1);
}

@keyframes tick {
  0%  { transform: translateY(-55%); opacity: 0; filter: blur(5px); }
  100% { transform: translateY(0);   opacity: 1; filter: blur(0); }
}

.count-cell span {
  display: block;
  position: relative;
  margin-top: .2rem;
  font-size: clamp(.75rem, 2.2vw, .95rem);
  font-weight: 300;
  color: var(--sand);
  letter-spacing: .12em;
}

.count-done {
  margin-top: 2rem;
  font-size: 1.4rem;
  color: var(--gold);
}

/* ═══════════ التفاصيل ═══════════ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  max-width: 880px;
  margin-inline: auto;
  perspective: 1200px;
}

.card {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #262013 0%, var(--panel) 45%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(2.2rem, 5vw, 3rem) clamp(1.4rem, 4vw, 2.2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: border-color .4s ease, box-shadow .4s ease;
  transform-style: preserve-3d;
}

.card:hover {
  border-color: rgba(212, 175, 106, .5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(212, 175, 106, .08);
}

/* قوس علوي مستوحى من العمارة الشرقية */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 64px;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 140px 140px;
  pointer-events: none;
}

.card-sheen {
  position: absolute;
  top: -60%;
  bottom: -60%;
  width: 30%;
  inset-inline-start: -40%;
  background: linear-gradient(100deg, transparent, rgba(243, 223, 174, .07), transparent);
  transform: rotate(18deg);
  transition: inset-inline-start 1s ease;
  pointer-events: none;
}

.card:hover .card-sheen { inset-inline-start: 130%; }

.card-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--gold-deep);
  display: grid;
  place-items: center;
  color: var(--gold);
  margin-bottom: 1.3rem;
  background: var(--night-2);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 24px rgba(212, 175, 106, .12);
  transition: transform .4s ease, box-shadow .4s ease;
}

.card:hover .card-icon {
  transform: scale(1.1) rotate(-6deg);
  box-shadow: 0 0 34px rgba(212, 175, 106, .3);
}

.card-icon svg { width: 25px; height: 25px; }

.card h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.55rem;
  color: var(--gold);
  margin-bottom: .8rem;
}

.card-main {
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 500;
  color: var(--ivory);
}

.card-sub {
  margin-top: .3rem;
  font-size: 1rem;
  font-weight: 300;
  color: var(--sand);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.7rem;
  padding: .8rem 1.9rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .04em;
  border: 1px solid var(--gold-deep);
  transition: background .35s, color .35s, box-shadow .35s, transform .3s;
}

.btn:hover { transform: translateY(-2px); }
.btn svg { width: 16px; height: 16px; }

.btn-gold {
  background: linear-gradient(120deg, var(--gold), #e5c684);
  color: var(--night);
}

.btn-gold:hover {
  background: var(--gold-hot);
  box-shadow: 0 8px 30px rgba(212, 175, 106, .4);
}

.btn-ghost {
  background: transparent;
  color: var(--gold);
}

.btn-ghost:hover {
  background: var(--gold);
  color: var(--night);
  box-shadow: 0 8px 30px rgba(212, 175, 106, .3);
}

/* ═══════════ الخاتمة ═══════════ */

/* مساحة سفلية تتّسع للتذييل المثبّت داخل القسم — تُضبط بدقة من جافاسكربت */
.closing { padding-bottom: 13rem; }

.closing-line {
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  font-weight: 300;
  color: var(--ivory);
  max-width: 580px;
  margin-inline: auto;
}

.closing-names {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 9vw, 4rem);
  margin-top: 1.2rem;
  line-height: 1.5;
  display: inline-block;
}

.closing-names i { font-style: italic; font-size: .5em; }

.closing-families {
  margin-top: .8rem;
  font-size: .95rem;
  font-weight: 300;
  color: var(--sand);
  letter-spacing: .14em;
}

/* ═══════════ التذييل — مثبّت أسفل قسم الخاتمة ═══════════ */

.footer {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  border-top: 1px solid var(--line);
  /* المساحة السفلية تفسح لشريط التنقل المثبّت */
  padding: 1.2rem 1rem calc(4.8rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: .85rem;
  font-weight: 300;
  color: var(--sand);
}

.footer-date { letter-spacing: .3em; }

/* دعوة لطلب بطاقة مماثلة */
.footer-promo {
  margin-top: .8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.footer-promo p {
  font-size: .88rem;
  font-weight: 300;
  color: var(--ivory);
  opacity: .85;
  letter-spacing: .02em;
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--gold-deep);
  background: rgba(212, 175, 106, .08);
  color: var(--gold);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .03em;
  transition: background .3s, color .3s, box-shadow .3s, transform .3s;
}

.footer-cta svg { width: 15px; height: 15px; }

.footer-cta:hover {
  background: var(--gold);
  color: var(--night);
  box-shadow: 0 8px 26px rgba(212, 175, 106, .35);
  transform: translateY(-2px);
}

/* على الهواتف: زر أكبر يسهل لمسه */
@media (max-width: 600px) {
  .footer-cta {
    padding: .85rem 2.2rem;
    font-size: 1.05rem;
  }

  .footer-cta svg { width: 18px; height: 18px; }
}

/* ═══════════ شريط التنقل بين الأقسام — أسفل الشاشة في المنتصف ═══════════ */

.slide-nav {
  position: fixed;
  z-index: 30;
  bottom: calc(.8rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 106, .3);
  background: rgba(14, 12, 8, .55);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease 1.4s;
}

body.splash-opened .slide-nav {
  opacity: 1;
  pointer-events: auto;
}

.nav-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 106, .45);
  background: rgba(212, 175, 106, .06);
  color: var(--gold);
  display: grid;
  place-items: center;
  transition: border-color .3s, color .3s, background .3s, transform .3s, opacity .3s, box-shadow .3s;
}

.nav-arrow svg { width: 20px; height: 20px; }

.nav-arrow:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--night);
  background: var(--gold);
  transform: scale(1.08);
  box-shadow: 0 0 26px rgba(212, 175, 106, .4);
}

.nav-arrow:disabled {
  opacity: .22;
  cursor: default;
}

/* وميض خفيف على زر «التالي» يلفت نظر الضيف */
#navNext:not(:disabled) { animation: navGlow 2.4s ease-in-out infinite; }

@keyframes navGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(212, 175, 106, .12); }
  50%      { box-shadow: 0 0 24px rgba(212, 175, 106, .5); }
}

.nav-dots {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0 .35rem;
}

.nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--gold-deep);
  background: transparent;
  padding: 0;
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
}

.nav-dot:hover { border-color: var(--gold); }

.nav-dot.active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(212, 175, 106, .7);
}

/* ═══════════ الشاشات الصغيرة جداً ═══════════ */

@media (max-width: 380px) {
  .count-grid { grid-template-columns: repeat(2, 1fr); }
}

/* تكثيف المحتوى على الشاشات الصغيرة كي يبقى النص كبيراً قدر الإمكان */
@media (max-width: 480px), (max-height: 720px) {
  .card { padding: 1.5rem 1.2rem; }
  .card-icon { width: 48px; height: 48px; margin-bottom: .9rem; }
  .btn { margin-top: 1.1rem; padding: .7rem 1.6rem; }
  .title-orn { margin-bottom: 1.6rem; }
  .cards { gap: .9rem; }

  .slide-nav { gap: .6rem; padding: .4rem .6rem; }
  .nav-arrow { width: 41px; height: 41px; }
  .nav-dot { width: 8px; height: 8px; }
}

/* ═══════════ تقليل الحركة ═══════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal, .reveal-hero, .reveal-hero-amp, .splash-label span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .frame-path, .frame-orn, .draw-on-scroll line { stroke-dashoffset: 0 !important; }

  .shimmer-text {
    background: none;
    -webkit-text-fill-color: var(--gold);
    color: var(--gold);
  }

  #dust { display: none; }
}