:root {
  --ink: #54343a;
  --rose: #a9606d;
  --rose-deep: #7e3f4b;
  --blush: #f4dfe1;
  --paper: #fffaf2;
  --gold: #bf9564;
  --gold-light: #ead8b6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #ead6d6; }
body { margin: 0; color: var(--ink); background: #ead6d6; font-family: Georgia, "Times New Roman", serif; }
[dir="rtl"] { font-family: Tahoma, Arial, sans-serif; }
button, a { font: inherit; }
button { color: inherit; }

.invitation {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 8% 10%, rgba(255,255,255,.82) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 22%, rgba(255,244,218,.8) 0 1px, transparent 3px),
    linear-gradient(135deg, #ead0d3, #f6e7e5 45%, #d9b3b9);
}

.invitation::before,
.invitation::after {
  content: "";
  position: fixed;
  width: 34vw;
  height: 100vh;
  top: 0;
  opacity: .24;
  pointer-events: none;
  filter: saturate(.75);
  background: url('assets/floral-wall.jpg') center/cover no-repeat;
  z-index: 0;
}
.invitation::before { left: 0; mask-image: linear-gradient(90deg, #000, transparent); }
.invitation::after { right: 0; transform: scaleX(-1); mask-image: linear-gradient(90deg, #000, transparent); }

.top-nav {
  height: 76px;
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 4vw;
  background: rgba(255,250,246,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(191,149,100,.35);
  box-shadow: 0 5px 24px rgba(92,52,61,.08);
}

.monogram {
  border: 1px solid var(--gold);
  background: #fffaf4;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--rose-deep);
  font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -2px;
  cursor: pointer;
  box-shadow: inset 0 0 0 4px #f4e4d2, 0 4px 12px rgba(91,49,58,.12);
  flex: 0 0 auto;
}
.monogram span { color: var(--gold); font-size: 12px; margin: 0 2px; }
.nav-scroll { display: flex; align-items: stretch; gap: 20px; overflow-x: auto; scrollbar-width: none; height: 100%; }
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-scroll button {
  border: 0;
  background: transparent;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  padding: 0 3px;
}
.nav-scroll button::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 14px; height: 1px; background: var(--gold); transition: .3s; }
.nav-scroll button:hover::after, .nav-scroll button.active::after { left: 0; right: 0; }

.closed-scene {
  min-height: calc(100vh - 142px);
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 40px 20px 70px;
  perspective: 1600px;
}

.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.video-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(53,25,30,.16), rgba(69,31,39,.46)), radial-gradient(circle at center, transparent 20%, rgba(48,22,27,.28)); backdrop-filter: saturate(.82); }
.video-intro-card { width: 100%; min-height: calc(100vh - 190px); padding: 52px 38px 128px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; position: relative; color: #fff9ee; border: 0; background: transparent; text-shadow: 0 2px 16px rgba(48,20,26,.55); }
.video-intro-card > p { margin: 0 0 28px; text-transform: uppercase; letter-spacing: .34em; font: 10px Arial, sans-serif; }
.video-intro-card h1 { position: absolute; left: 50%; bottom: 105px; transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 9px; font-size: clamp(29px, 6vw, 42px); line-height: 1; margin: 0; font-weight: 400; letter-spacing: -.05em; color: #fffaf2; text-shadow: 0 3px 16px rgba(40,15,20,.9); }
.video-intro-card h1 span { display: inline; }
.video-intro-card h1 i { color: #f2d7ae; font-size: .7em; line-height: 1; font-weight: 400; }
.names-script { font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive !important; font-weight: 500 !important; letter-spacing: -.04em !important; }
.video-intro-card .cover-date { color: #fff9ee; }
.video-intro-card .open-button { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); min-width: 255px; justify-content: flex-start; color: #6f3d46; text-shadow: none; background: #fff8ee; border: 1px solid #d7b27f; box-shadow: 0 0 0 12px rgba(91,42,52,.38), 0 14px 34px rgba(43,19,24,.38); z-index: 4; }
.video-intro-card .open-button:hover { transform: translateX(-50%) translateY(-2px); }

.book-cover {
  width: min(440px, 82vw);
  aspect-ratio: 3/4;
  position: relative;
  border-radius: 8px 18px 18px 8px;
  padding: 18px;
  color: #6f3d46;
  background:
    linear-gradient(110deg, rgba(255,255,255,.2), transparent 24%, rgba(90,32,48,.09) 55%, rgba(255,255,255,.2)),
    url('assets/pink-silk.jpg') center/cover;
  box-shadow:
    -10px 12px 0 #c7a983,
    -14px 16px 0 #f6ead7,
    -21px 26px 40px rgba(64,30,38,.3),
    inset 10px 0 25px rgba(102,49,59,.18),
    inset 0 0 0 1px rgba(255,255,255,.75);
  transform: rotateY(-5deg) rotateX(2deg);
  animation: coverFloat 5s ease-in-out infinite;
}
.book-cover::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(191,149,100,.85); border-radius: 5px 14px 14px 5px; }
.book-cover::after { content: ""; position: absolute; left: 8px; top: 2%; bottom: 2%; width: 12px; border-left: 2px solid rgba(126,63,75,.22); border-right: 1px solid rgba(255,255,255,.55); }
@keyframes coverFloat { 0%,100% { transform: rotateY(-5deg) rotateX(2deg) translateY(0); } 50% { transform: rotateY(-2deg) rotateX(1deg) translateY(-8px); } }

.cover-frame { height: 100%; border: 1px solid rgba(255,250,242,.72); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 44px 26px; position: relative; }
.cover-frame::before, .cover-frame::after { content: "❦"; position: absolute; color: var(--gold); font-size: 26px; }
.cover-frame::before { top: 20px; left: 22px; transform: rotate(-45deg); }
.cover-frame::after { right: 22px; bottom: 20px; transform: rotate(135deg); }
.cover-crown { color: var(--gold); font-size: 30px; margin-bottom: 20px; text-shadow: 0 0 14px #fff; }
.cover-frame > p { margin: 0 0 28px; text-transform: uppercase; letter-spacing: .34em; font: 10px Arial, sans-serif; }
.cover-frame h1 { font-size: clamp(48px, 10vw, 74px); line-height: .72; margin: 0; font-weight: 400; letter-spacing: -.05em; text-shadow: 0 2px 1px white; }
.cover-frame h1 span { display: block; }
.cover-frame h1 i { color: var(--gold); font-size: .52em; line-height: 1.4; font-weight: 400; }
.cover-date { margin: 28px 0; letter-spacing: .28em; font: 12px Arial, sans-serif; }
.open-button { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(126,63,75,.35); background: rgba(255,250,242,.76); border-radius: 30px; padding: 7px 20px 7px 8px; cursor: pointer; text-transform: uppercase; letter-spacing: .16em; font: 10px Arial, sans-serif; box-shadow: 0 8px 20px rgba(87,40,51,.13); transition: .3s; }
.open-button:hover { transform: translateY(-2px); background: #fffaf2; box-shadow: 0 12px 28px rgba(87,40,51,.2); }
.seal { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9a8b1, #824551 70%); color: #fff8ec; box-shadow: inset 0 0 0 2px #e9bdc4, 0 2px 8px #87515b; font: 11px Georgia, serif; letter-spacing: 0; }
.swipe-hint { position: absolute; bottom: 24px; margin: 0; font: 10px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; opacity: .65; }
.sparkles { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, #fff 0 1px, transparent 2px), radial-gradient(circle, #efc88f 0 1px, transparent 2px); background-size: 90px 90px, 140px 140px; background-position: 0 0, 30px 50px; animation: sparkle 7s linear infinite; opacity: .7; }
@keyframes sparkle { to { background-position: 90px -90px, -110px 190px; } }

.book-stage { position: relative; z-index: 2; padding: 36px 20px 20px; min-height: calc(100vh - 76px); touch-action: pan-y; }
.book-shell { width: min(900px, 94vw); height: min(680px, calc(100vh - 190px)); min-height: 560px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 12px 24px 24px 12px; background: #f8ecd9; box-shadow: -12px 15px 0 #b98f64, -17px 20px 0 #f4e7d4, 0 34px 70px rgba(77,35,45,.28); border: 1px solid rgba(255,255,255,.9); perspective: 1800px; }
.book-shell::before { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; border-radius: inherit; box-shadow: inset 13px 0 24px rgba(89,51,43,.15), inset -2px 0 12px rgba(89,51,43,.08), inset 0 0 0 7px rgba(255,250,240,.45); }
.book-pages { height: 100%; position: relative; overflow: hidden; }
.book-page { position: absolute; inset: 0; height: 100%; overflow: hidden; background-color: var(--paper); opacity: 0; visibility: hidden; pointer-events: none; z-index: 0; }
.book-page.under-page { opacity: 1; visibility: visible; transform: none; z-index: 1; }.book-page.active-page { opacity: 1; visibility: visible; pointer-events: auto; z-index: 3; }.book-page.active-page.enter-next { animation: stackPageNext .78s cubic-bezier(.22,.72,.2,1) both; }.book-page.active-page.enter-prev { animation: stackPagePrev .78s cubic-bezier(.22,.72,.2,1) both; }
@keyframes stackPageNext{from{opacity:.75;transform:translate3d(102%,-2%,0) rotateZ(1.2deg);box-shadow:-28px 10px 40px rgba(65,28,36,.35)}to{opacity:1;transform:none;box-shadow:none}}@keyframes stackPagePrev{from{opacity:.75;transform:translate3d(-102%,-2%,0) rotateZ(-1.2deg);box-shadow:28px 10px 40px rgba(65,28,36,.35)}to{opacity:1;transform:none;box-shadow:none}}
.book-page p, .book-page small, .book-page a, .book-page time, .book-page label, .book-page code { font-weight: 600; }
[dir="rtl"] .book-page p, [dir="rtl"] .book-page small, [dir="rtl"] .book-page a, [dir="rtl"] .book-page time, [dir="rtl"] .book-page label { font-weight: 700; }
.book-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(156,111,78,.13); }
.book-ridge { position: absolute; top: 0; bottom: 0; left: 0; width: 18px; z-index: 15; background: linear-gradient(90deg, rgba(73,34,39,.28), transparent 72%); pointer-events: none; }

.welcome-page { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 12%; background: url('assets/quran-roses.png') center/cover no-repeat; }
.page-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(255,250,242,.64), rgba(255,250,242,.26) 56%, rgba(255,250,242,.55)); }
.welcome-page > *:not(.page-overlay) { position: relative; z-index: 2; }
.ornament { color: var(--gold); font-size: 30px; margin-bottom: 18px; }
.eyebrow { text-transform: uppercase; letter-spacing: .28em; font: 700 10px Arial, sans-serif; margin: 0 0 18px; color: var(--rose-deep); }
blockquote { font-size: clamp(24px, 4vw, 38px); margin: 0; line-height: 1.3; color: #70414b; font-weight: 600; }
.welcome-page small { font-family: Arial, sans-serif; font-size: 10px; letter-spacing: .12em; margin-top: 8px; }
.welcome-page h2, .details-panel h2 { font-size: clamp(54px, 8vw, 88px); font-weight: 400; letter-spacing: -.06em; margin: 24px 0 8px; line-height: .9; }
.welcome-page h2 em, .details-panel h2 em { color: var(--gold); font-size: .65em; font-weight: 400; }
.welcome-copy { max-width: 500px; font-size: 16px; line-height: 1.7; margin: 12px auto; }
.mini-date { position: absolute !important; left: 50%; bottom: 15px; transform: translateX(-50%); width: max-content; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); padding: 9px 16px; margin: 0; letter-spacing: .28em; font: 700 11px Arial, sans-serif; z-index: 4 !important; }

.story-page { display: grid; grid-template-columns: 56% 44%; background: #f6e3e1; }
.portrait-wrap { position: relative; overflow: hidden; }
.portrait-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.015); }
.portrait-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, #f6e3e1), linear-gradient(0deg, rgba(83,45,51,.28), transparent 35%); }
.story-card { align-self: center; margin-left: -45px; position: relative; z-index: 3; padding: 46px 44px; background: transparent; border: 0; box-shadow: none; text-align: center; text-shadow: 0 1px 12px rgba(255,250,244,.9); }
.arabesque { display: block; color: var(--gold); font-size: 32px; }
.story-card h2, .calendar-paper h2, .timeline-content h2, .dress-card h2, .rsvp-content h2 { font-size: clamp(38px, 5vw, 58px); font-weight: 600; line-height: 1; margin: 14px 0 22px; }
.story-card p { font-size: 16px; line-height: 1.8; }
.quran-quote { margin: 16px 0 0; padding: 12px 0; border-top: 1px solid rgba(191,149,100,.55); border-bottom: 1px solid rgba(191,149,100,.55); font-size: 12px; line-height: 1.55; color: var(--rose-deep); }.quran-quote small { display:block; margin-top:6px; font:700 8px Arial,sans-serif; letter-spacing:.12em; }
.signature { font-size: 25px; font-style: italic; color: var(--rose); margin-top: 24px; }

.details-page { background: url('assets/floral-frame.jpg') center/cover no-repeat; display: grid; place-items: center; padding: 44px; }
.details-page::before { content: ""; position: absolute; inset: 0; background: rgba(255,248,240,.6); }
.details-panel { width: min(620px, 92%); padding: 44px 50px; text-align: center; background: transparent; backdrop-filter: none; border: 0; box-shadow: none; position: relative; z-index: 1; }
.details-panel h2 { font-size: clamp(45px, 6vw, 70px); margin-top: 8px; }
.detail-row { display: grid; grid-template-columns: 38px 1fr; gap: 12px; text-align: left; padding: 12px 0; border-bottom: 1px solid #eadccb; }
[dir="rtl"] .detail-row { text-align: right; }
.detail-row > span { color: var(--gold); font-size: 25px; }
.detail-row b, .detail-row small, .detail-row a { display: block; }
.detail-row b { font-size: 15px; margin-bottom: 5px; font-weight: 700; }
.detail-row small, .detail-row a { color: #7c6064; font: 11px Arial, sans-serif; text-decoration: none; }
.detail-row a { color: var(--rose-deep); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.gold-rule { height: 1px; margin: 20px auto; width: 78%; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.details-panel h3, .dress-card h3 { text-transform: uppercase; letter-spacing: .24em; font: 10px Arial, sans-serif; margin: 12px 0 16px; }
.countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.count-unit { border: 1px solid #dfc7a4; background: rgba(255,255,255,.55); padding: 11px 4px; }
.count-unit strong { display: block; font-size: 24px; font-weight: 400; }
.count-unit span { font: 8px Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em; }

.calendar-page { display: grid; place-items: center; padding: 38px; background: linear-gradient(rgba(255,247,238,.74),rgba(255,247,238,.7)), url('assets/silk-drapes.jpg') center/cover; }
.calendar-paper { width: min(580px, 94%); background: transparent; padding: 38px 54px 34px; text-align: center; border: 0; box-shadow: none; position: relative; }
.calendar-paper h2 { margin: 5px 0 24px; }
.calendar-week, .calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; }
.calendar-week { font: 9px Arial, sans-serif; letter-spacing: .1em; color: var(--rose); border-bottom: 1px solid #e5d5c2; padding-bottom: 10px; }
.calendar-grid { padding: 10px 0 16px; }
.calendar-grid > span { aspect-ratio: 1; display: grid; place-items: center; position: relative; font-size: 13px; }
.calendar-grid .faded { opacity: .24; }
.heart-date { color: #fffaf2; font-weight: bold; z-index: 1; }
.heart-date::before { content: "♥"; position: absolute; font-size: 45px; color: var(--rose); z-index: -1; filter: drop-shadow(0 3px 4px rgba(95,45,56,.18)); }
.calendar-note { display: flex; justify-content: center; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid #e5d5c2; }
.calendar-note > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--rose-deep); }
.calendar-note p { margin: 0; text-align: left; font-size: 13px; line-height: 1.5; }
[dir="rtl"] .calendar-note p { text-align: right; }
.calendar-note small { color: #896d70; }

.timeline-page { background: linear-gradient(90deg, rgba(255,238,236,.34), rgba(255,238,236,.18)), url('assets/floral-wall.jpg') center/cover; padding: 50px 12%; display: grid; align-items: center; }
.timeline-content { max-width: 630px; margin: 0 auto; width: 100%; text-shadow: 0 1px 10px rgba(255,250,244,.95), 0 1px 2px rgba(255,250,244,.9); }
.timeline-content h2 { margin-top: 8px; }
.timeline-line { position: relative; margin-top: 30px; }
.timeline-line::before { content: ""; position: absolute; top: 22px; bottom: 22px; left: 20px; width: 1px; background: linear-gradient(var(--gold), #e8cfd1); }
[dir="rtl"] .timeline-line::before { left: auto; right: 20px; }
.timeline-event { display: grid; grid-template-columns: 42px 90px 1fr; align-items: center; gap: 14px; margin: 22px 0; position: relative; }
[dir="rtl"] .timeline-event { grid-template-columns: 42px 105px 1fr; }
.timeline-dot { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fffaf2; color: var(--rose); border: 1px solid var(--gold); z-index: 1; }
.timeline-event time { color: var(--rose-deep); font: bold 11px Arial, sans-serif; letter-spacing: .05em; }
.timeline-event b, .timeline-event small { display: block; }
.timeline-event b { font-size: 18px; font-weight: 700; }
.timeline-event small { font: 11px/1.5 Arial, sans-serif; color: #82686c; margin-top: 4px; }

.dress-page { display: grid; place-items: center; padding: 40px; background: linear-gradient(rgba(255,241,239,.72),rgba(255,241,239,.72)), url('assets/pink-silk.jpg') center/cover; }
.dress-card { width: min(650px, 94%); text-align: center; padding: 44px 58px; border: 0; background: transparent; box-shadow: none; }
.dress-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 18px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); }
.dress-card > p:not(.eyebrow) { font-size: 15px; line-height: 1.75; max-width: 540px; margin: 0 auto 22px; }
.swatches { display: flex; justify-content: center; gap: 12px; margin: 20px 0 28px; }
.swatches span { width: 48px; height: 48px; border-radius: 50%; position: relative; box-shadow: inset 0 0 0 3px rgba(255,255,255,.65), 0 3px 10px rgba(70,38,44,.16); }
.swatches i { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); font: 8px Arial, sans-serif; font-style: normal; text-transform: uppercase; color: var(--ink); }
.modesty-note { margin-top: 36px; text-transform: uppercase; letter-spacing: .18em; font: 9px Arial, sans-serif; color: var(--rose); }

.rsvp-page, .gifts-page { display: grid; place-items: center; text-align: center; padding: 48px; background: linear-gradient(rgba(255,250,242,.55),rgba(255,250,242,.55)), url('assets/light-rose.jpg') center/cover; }
.gifts-page { background: linear-gradient(rgba(255,244,239,.48),rgba(255,244,239,.48)), url('assets/silk-drapes.jpg') center/cover; }
.finale-page { background: #d8b9b3; }
.finale-couple { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.finale-vignette { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(44,21,27,.78), transparent 48%); }
.finale-brand { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: min(680px,88%); display: flex; align-items: center; justify-content: center; gap: 16px; color: #fff9f1; text-align: left; z-index: 2; text-shadow: 0 2px 8px rgba(35,14,19,.6); }
[dir="rtl"] .finale-brand { text-align: right; }
.finale-brand > div { display: grid; gap: 8px; }
.finale-brand p { margin: 0; font: 700 13px Georgia, serif; letter-spacing: .12em; }
.finale-brand .footer-links { justify-content: flex-start; font: 700 8px Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.finale-brand .footer-links a { color: #fff9f1; border-bottom-color: rgba(255,249,241,.5); }
.book-page[aria-hidden="false"] h2 { animation: titleReveal .75s cubic-bezier(.2,.7,.2,1) both; }.book-page[aria-hidden="false"] p,.book-page[aria-hidden="false"] .detail-row,.book-page[aria-hidden="false"] .bank-card,.book-page[aria-hidden="false"] .rsvp-form { animation: softReveal .7s .14s ease both; }.story-page[aria-hidden="false"] .portrait-wrap img,.finale-page[aria-hidden="false"] .finale-couple { animation: portraitBloom 4.5s ease-out both; }.timeline-page[aria-hidden="false"] .timeline-event { animation:eventArrive .6s ease both; }.timeline-page[aria-hidden="false"] .timeline-event:nth-child(2){animation-delay:.1s}.timeline-page[aria-hidden="false"] .timeline-event:nth-child(3){animation-delay:.2s}.timeline-page[aria-hidden="false"] .timeline-event:nth-child(4){animation-delay:.3s}.heart-date::before{animation:heartPulse 2.2s ease-in-out infinite}.dress-page[aria-hidden="false"] .swatches span{animation:swatchFloat 2.6s ease-in-out infinite}.rsvp-page[aria-hidden="false"] .whatsapp:not(:disabled){animation:buttonGlow 2.2s ease-in-out infinite}.finale-page[aria-hidden="false"] .finale-brand{animation:finaleRise .9s .2s ease both}
@keyframes titleReveal{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}@keyframes softReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes portraitBloom{from{transform:scale(1.08);filter:saturate(.75)}to{transform:scale(1.015);filter:saturate(1)}}@keyframes eventArrive{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}@keyframes heartPulse{50%{transform:scale(1.12)}}@keyframes swatchFloat{50%{transform:translateY(-5px)}}@keyframes buttonGlow{50%{box-shadow:0 10px 30px rgba(61,85,64,.42)}}@keyframes finaleRise{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
.rsvp-content { max-width: 600px; }
.rsvp-content h2 { font-size: clamp(32px,4vw,48px); margin: 10px 0 16px; }
.rsvp-content > p { font-size: 14px; line-height: 1.7; margin: 0 auto 16px; max-width: 520px; }
.bank-card { display: flex; gap: 16px; align-items: center; text-align: left; background: rgba(255,255,255,.62); border: 1px solid #dbc09d; padding: 16px 22px; width: min(450px,90%); margin: 20px auto; }
[dir="rtl"] .bank-card { text-align: right; }
.bank-card > span { color: var(--rose); font-size: 27px; }
.bank-card b, .bank-card small, .bank-card code { display: block; }
.bank-card small { font: 10px Arial, sans-serif; color: #80676b; margin: 4px 0 7px; }
.bank-card code { color: var(--rose-deep); font-size: 11px; letter-spacing: .12em; }
.whatsapp { border: 0; border-radius: 30px; color: #fff; background: linear-gradient(135deg, #80977c, #526b55); padding: 12px 24px; cursor: not-allowed; box-shadow: 0 8px 24px rgba(61,85,64,.2); }
.whatsapp:not(:disabled) { cursor: pointer; }
.whatsapp:disabled { opacity: .55; }
.whatsapp small { display: block; font: 8px Arial, sans-serif; opacity: .75; margin-top: 4px; }
.rsvp-form { display: grid; grid-template-columns: 1fr 120px; gap: 10px; margin: 14px auto; width: min(500px,100%); text-align: left; }
[dir="rtl"] .rsvp-form { text-align: right; }
.rsvp-form label { display: grid; gap: 5px; }
.rsvp-form label span { text-transform: uppercase; letter-spacing: .1em; font: 8px Arial, sans-serif; color: #7d5a61; }
.rsvp-form .attendance { grid-column: 1 / -1; }
.rsvp-form input, .rsvp-form select { width: 100%; min-height: 38px; border: 1px solid #dbc09d; border-radius: 0; background: rgba(255,255,255,.75); color: var(--ink); padding: 8px 10px; font: 12px Arial, sans-serif; outline: none; }
.rsvp-form input:focus, .rsvp-form select:focus { border-color: var(--rose); box-shadow: 0 0 0 2px rgba(169,96,109,.12); }

.page-controls { width: min(900px,94vw); margin: 26px auto 0; display: flex; align-items: center; justify-content: space-between; }
.page-controls > button { border: 0; background: transparent; cursor: pointer; text-transform: uppercase; letter-spacing: .12em; font: 10px Arial, sans-serif; }
.page-controls > button:disabled { opacity: .25; cursor: default; }
.page-dots { display: flex; gap: 7px; }
.page-dots button { border: 1px solid var(--rose); background: transparent; width: 7px; height: 7px; border-radius: 50%; padding: 0; cursor: pointer; }
.page-dots button.active { background: var(--rose); transform: scale(1.3); }

footer { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 22px 4vw 26px; color: #76575d; background: linear-gradient(90deg, rgba(255,246,241,.82), rgba(244,219,219,.72), rgba(255,246,241,.82)); border-top: 1px solid rgba(191,149,100,.35); font: 700 9px Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em; }
footer p { margin: 0; color: var(--rose-deep); font: 10px Georgia, serif; letter-spacing: .13em; text-transform: none; }
footer span b { font-weight: normal; opacity: .65; }
.invitu-signature { display: flex; align-items: center; gap: 15px; padding: 10px 20px; border-left: 1px solid rgba(191,149,100,.58); border-right: 1px solid rgba(191,149,100,.58); }
.invitu-logo { width: 58px; height: 58px; flex: 0 0 auto; object-fit: cover; border-radius: 50%; border: 1px solid #d5b58c; box-shadow: 0 5px 16px rgba(77,34,43,.17); }
.invitu-info { display: grid; gap: 7px; }
.footer-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(126,63,75,.28); padding-bottom: 2px; }
.footer-links a:hover { color: var(--rose-deep); }
.footer-links i { display: inline-grid; place-items: center; vertical-align: middle; margin-right: 4px; font-style: normal; }
.instagram-icon { width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 4px; position: relative; }
.instagram-icon::before { content: ""; width: 5px; height: 5px; border: 1.3px solid currentColor; border-radius: 50%; }
.instagram-icon::after { content: ""; position: absolute; width: 2px; height: 2px; border-radius: 50%; background: currentColor; right: 2px; top: 2px; }
.tiktok-icon { width: 15px; height: 15px; font: bold 17px/1 Georgia, serif; text-shadow: 1px 0 #d18b98; }
.phone-icon, .web-icon { width: 15px; height: 15px; font-size: 12px; }
.language-toggle { border: 1px solid #c49b6b; border-radius: 20px; background: #fffaf2; padding: 8px 14px; cursor: pointer; color: var(--rose-deep); }

@media (max-width: 700px) {
  .top-nav { height: 66px; padding: 0 14px; gap: 14px; }
  .monogram { width: 42px; height: 42px; }
  .nav-scroll { gap: 16px; }
  .nav-scroll button { font-size: 9px; }
  .closed-scene { min-height: calc(100svh - 130px); padding-top: 28px; }
  .video-intro-card { min-height: calc(100svh - 180px); padding: 34px 25px 120px; }
  .video-intro-card h1 { font-size: 33px; bottom: 105px; }
  .book-cover { width: min(360px,78vw); }
  .book-stage { padding: 20px 10px 14px; }
  .book-shell { width: 92vw; height: calc(100svh - 174px); min-height: 560px; border-radius: 8px 17px 17px 8px; }
  .welcome-page { padding: 48px 9%; background-position: 58% center; }
  .welcome-page { justify-content: flex-start; padding-top: 34px; }
  .welcome-page h2 { font-size: 45px; margin-top: 14px; margin-bottom: 4px; }
  .welcome-page blockquote { font-size: 23px; }
  .welcome-copy { font-size: 13px; line-height: 1.5; margin: 4px auto; max-width: 300px; }
  .mini-date { bottom: 12px; padding: 7px 10px; font-size: 9px; }
  .story-page { display: block; background: #f6e3e1; }
  .portrait-wrap { height: 58%; }
  .portrait-wrap img { object-position: center 28%; }
  .portrait-vignette { background: linear-gradient(0deg,#f6e3e1,transparent 45%); }
  .story-card { margin: -54px 22px 0; padding: 24px 24px; }
  .story-card h2 { font-size: 32px; margin: 7px 0 13px; }
  .story-card p { font-size: 13px; line-height: 1.55; }
  .story-card .quran-quote { font-size:10px; line-height:1.4; margin-top:8px; padding:7px 0; }
  .signature { font-size: 20px; margin-top: 14px; }
  .details-page { padding: 25px 14px; }
  .details-panel { width: 96%; padding: 29px 23px; }
  .details-panel h2 { font-size: 46px; }
  .detail-row { padding: 9px 0; }
  .count-unit strong { font-size: 20px; }
  .calendar-page { padding: 24px 12px; }
  .calendar-paper { width: 96%; padding: 32px 24px 24px; }
  .calendar-paper h2 { font-size: 41px; }
  .calendar-week, .calendar-grid { gap: 4px; }
  .timeline-page { padding: 35px 28px; }
  .timeline-content h2 { font-size: 42px; }
  .timeline-event { grid-template-columns: 40px 72px 1fr; gap: 10px; margin: 19px 0; }
  [dir="rtl"] .timeline-event { grid-template-columns: 40px 85px 1fr; }
  .timeline-event b { font-size: 15px; }
  .timeline-event small { font-size: 9px; }
  .dress-page { padding: 23px 12px; }
  .dress-card { width: 96%; padding: 31px 22px; }
  .dress-card h2 { font-size: 38px; }
  .dress-card > p:not(.eyebrow) { font-size: 13px; line-height: 1.6; }
  .swatches { gap: 8px; }
  .swatches span { width: 42px; height: 42px; }
  .swatches i { top: 48px; font-size: 7px; }
  .rsvp-page, .gifts-page { padding: 34px 18px; }
  .finale-brand { bottom: 24px; width: 90%; gap: 11px; }
  .finale-brand p { font-size: 11px; }
  .finale-brand .footer-links { gap: 6px 10px; font-size: 7px; }
  .finale-page .invitu-logo { width: 52px; height: 52px; }
  .rsvp-content h2 { font-size: 32px; }
  .rsvp-form { grid-template-columns: 1fr 105px; }
  .page-controls { margin-top: 17px; }
  .page-controls > button span { display: none; }
  footer { padding: 19px 12px 20px; gap: 11px; }
  .invitu-signature { width: 100%; padding: 9px 12px; gap: 11px; border-left: 0; border-right: 0; }
  .invitu-logo { width: 46px; height: 46px; }
  .footer-links { justify-content: flex-start; gap: 7px 11px; }
}

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

.hidden { display: none !important; }