:root {
  --night: #140d06;
  --night-2: #1e130a;
  --card: #241608;
  --brass: #e3b04b;
  --brass-2: #c8902f;
  --gold-lite: #f2d089;
  --amber: #f0872b;
  --maroon: #7a1f1f;
  --palm: #4e8a4a;
  --sand: #e8c98a;
  --ink: #f4e9d6;
  --muted: #b89d78;
  --line: #4a3115;
  --display: "Aref Ruqaa", "Cairo", serif;
  --kufi: "Reem Kufi", "Cairo", sans-serif;
  --body: "Cairo", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.7;
  overflow-x: hidden;
}

img, iframe { max-width: 100%; }

.eyebrow {
  font-family: var(--kufi);
  color: var(--brass);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: none;
}

/* ── Brass button ── */
.btn-brass {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 1.1rem 2.4rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--brass), var(--brass-2));
  color: #2a1a05;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(227, 176, 75, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn-brass:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(227, 176, 75, 0.5); }
.btn-brass strong { font: 700 1.15rem var(--display); }
.btn-brass small { font-size: 0.72rem; opacity: 0.8; }
.btn-brass--sm { padding: 0.8rem 2rem; }
.btn-brass__ring {
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(227, 176, 75, 0.6);
  animation: ringPulse 2.2s ease-out infinite;
}
@keyframes ringPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ═══════════ GATE ═══════════ */
.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #2a1608 0%, #3d1e0a 40%, #120b05 100%);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.gate--out { opacity: 0; transform: scale(1.08); pointer-events: none; }

.gate__sky { position: absolute; inset: 0; }
.gate__sun {
  position: absolute;
  top: 26%;
  left: 50%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 45%, #ffe9b0, #f0872b 55%, transparent 72%);
  box-shadow: 0 0 120px rgba(240, 135, 43, 0.6);
  animation: sunRise 6s ease-out both;
}
@keyframes sunRise {
  from { transform: translate(-50%, 40px); opacity: 0.4; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
.gate__dunes {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 32%;
  background:
    radial-gradient(ellipse at 20% 120%, #6a3d16 0 55%, transparent 56%),
    radial-gradient(ellipse at 75% 120%, #7a4718 0 55%, transparent 56%),
    linear-gradient(180deg, #5a3413, #2a1608);
}
.gate__palm {
  position: absolute;
  bottom: 20%;
  font-size: 4rem;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.5)) sepia(0.4) saturate(1.4) hue-rotate(-8deg);
  animation: palmSway 4s ease-in-out infinite;
}
.gate__palm--1 { left: 8%; }
.gate__palm--2 { right: 8%; font-size: 5.2rem; animation-delay: 0.6s; }
@keyframes palmSway { 50% { transform: rotate(4deg); } }

.gate__sticks {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gate__gunfire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.gate__flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(circle at 50% 70%, rgba(255, 230, 160, 0.55), rgba(255, 120, 40, 0.15) 40%, transparent 70%);
  opacity: 0;
}

.gate__flash.is-bang {
  animation: screenBang 0.18s ease-out;
}

@keyframes screenBang {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

.gate.is-shaking {
  animation: gateShake 0.2s ease-out;
}

@keyframes gateShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 2px); }
  50% { transform: translate(5px, -2px); }
  75% { transform: translate(-3px, 1px); }
}
.stick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, #8a5a22, #d49a3e, #8a5a22);
  transform-origin: 50% 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.stick--l { transform: translate(-50%, -50%) rotate(38deg); animation: clashL 2.4s ease-in-out infinite; }
.stick--r { transform: translate(-50%, -50%) rotate(-38deg); animation: clashR 2.4s ease-in-out infinite; }
@keyframes clashL { 45%,55% { transform: translate(-50%,-50%) rotate(20deg); } }
@keyframes clashR { 45%,55% { transform: translate(-50%,-50%) rotate(-20deg); } }

.gate__copy {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 1.5rem;
}
.gate__kicker {
  font-family: var(--kufi);
  color: var(--gold-lite);
  letter-spacing: 0.08em;
  font-size: clamp(0.95rem, 3.5vw, 1.3rem);
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.gate__title {
  font: 700 clamp(3rem, 12vw, 6rem)/1 var(--display);
  color: var(--gold-lite);
  text-shadow: 0 6px 26px rgba(0,0,0,0.7), 0 0 30px rgba(240,135,43,0.35);
}
.gate__title span { color: var(--amber); font-size: 0.6em; }
.gate__sub { color: var(--sand); margin: 0.5rem 0 1.6rem; font-family: var(--kufi); }

/* ═══════════ TOPBAR ═══════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.3rem;
  background: rgba(20, 13, 6, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__mark { font: 700 1.5rem var(--display); color: var(--gold-lite); text-decoration: none; }
.topbar__mark span { color: var(--amber); }
.topbar__nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.topbar__nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-family: var(--kufi);
  transition: color 0.25s;
}
.topbar__nav a:hover { color: var(--gold-lite); }
.mute {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--brass);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.25s, transform 0.25s;
}
.mute:hover { background: rgba(227,176,75,0.14); transform: scale(1.06); }
.mute[aria-pressed="true"] { background: var(--brass); color: #2a1a05; }

/* ═══════════ shared section head ═══════════ */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 2.4rem; }
.section-head h2 { font: 700 clamp(2rem, 6vw, 3.4rem)/1.15 var(--display); color: var(--gold-lite); }
.section-head__sub { color: var(--muted); margin-top: 0.6rem; font-size: 0.95rem; }

/* reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ═══════════ HERO — CSS-drawn kousha ═══════════ */
.hero {
  position: relative;
  min-height: 94vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 5rem 1.3rem 6rem;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(169, 31, 40, 0.18), transparent 55%),
    radial-gradient(ellipse at 50% 20%, rgba(227, 176, 75, 0.16), transparent 50%),
    linear-gradient(180deg, #2a1a0c 0%, #1a1007 55%, #120b05 100%);
}

.hero__sunburst {
  position: absolute;
  inset: -15% -20% 8%;
  background: repeating-conic-gradient(
    from -5deg at 50% 58%,
    #a91f28 0deg 7deg,
    #f4e9d6 7deg 10deg,
    #e3b04b 10deg 16deg,
    #f4e9d6 16deg 19deg
  );
  opacity: 0.42;
  mask-image: radial-gradient(ellipse at 50% 58%, #000 12%, rgba(0,0,0,0.75) 38%, transparent 72%);
  animation: sunSpin 90s linear infinite;
}
@keyframes sunSpin {
  to { transform: rotate(360deg); }
}

.hero__ceiling {
  position: absolute;
  top: 0;
  left: -5%;
  right: -5%;
  height: 28%;
  background:
    repeating-linear-gradient(
      95deg,
      #8a3a18 0 18px,
      #c45a28 18px 36px,
      #a9441c 36px 54px,
      #d46930 54px 72px
    );
  opacity: 0.55;
  clip-path: ellipse(80% 100% at 50% 0%);
  pointer-events: none;
  z-index: 0;
}

.hero__drape {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  z-index: 1;
  background:
    radial-gradient(ellipse 70px 85px at 8% 0%, #a91f28 0 52%, transparent 53%),
    radial-gradient(ellipse 70px 85px at 22% 0%, #e3b04b 0 52%, transparent 53%),
    radial-gradient(ellipse 70px 85px at 36% 0%, #f2d089 0 52%, transparent 53%),
    radial-gradient(ellipse 70px 85px at 50% 0%, #a91f28 0 52%, transparent 53%),
    radial-gradient(ellipse 70px 85px at 64% 0%, #e3b04b 0 52%, transparent 53%),
    radial-gradient(ellipse 70px 85px at 78% 0%, #f2d089 0 52%, transparent 53%),
    radial-gradient(ellipse 70px 85px at 92% 0%, #a91f28 0 52%, transparent 53%);
  opacity: 0.9;
  pointer-events: none;
}

.hero__arch {
  position: absolute;
  top: 10%;
  left: 50%;
  width: min(620px, 90vw);
  height: min(400px, 55vh);
  transform: translateX(-50%);
  border: 16px solid transparent;
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 72% 72% 0 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(26, 16, 7, 0.35) 100%) padding-box,
    repeating-linear-gradient(
      90deg,
      #c8902f 0 14px,
      #f2d089 14px 28px,
      #a91f28 28px 38px,
      #e3b04b 38px 52px,
      #f2d089 52px 66px,
      #a91f28 66px 76px
    ) border-box;
  box-shadow:
    0 0 0 5px rgba(227, 176, 75, 0.28),
    inset 0 -40px 60px rgba(0, 0, 0, 0.25),
    0 24px 50px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1;
}

.hero__arch::before {
  content: "";
  position: absolute;
  inset: 8% 12% auto;
  height: 55%;
  border-radius: 50% 50% 0 0;
  border: 3px solid rgba(227, 176, 75, 0.35);
  border-bottom: none;
  pointer-events: none;
}

.hero__flower {
  position: absolute;
  font-size: 1.45rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  animation: flowerBob 2.8s ease-in-out infinite;
  z-index: 2;
}
.hero__flower--1 { top: 10%; left: 6%; color: #a91f28; }
.hero__flower--2 { top: 2%; left: 26%; color: #e3b04b; animation-delay: 0.3s; }
.hero__flower--3 { top: -4%; left: 46%; color: #f2d089; animation-delay: 0.5s; font-size: 1.85rem; }
.hero__flower--4 { top: 2%; right: 26%; color: #c8902f; animation-delay: 0.2s; }
.hero__flower--5 { top: 10%; right: 6%; color: #a91f28; animation-delay: 0.4s; }
.hero__flower--6 { top: 30%; left: -4%; color: #f2d089; animation-delay: 0.6s; }
.hero__flower--7 { top: 30%; right: -4%; color: #e3b04b; animation-delay: 0.7s; }
.hero__flower--8 { top: 48%; left: 2%; color: #a91f28; animation-delay: 0.1s; }
@keyframes flowerBob {
  50% { transform: translateY(-6px) rotate(8deg); }
}

.hero__hearts {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 72px;
  z-index: 2;
}
.hero__hearts i {
  position: absolute;
  width: 50px;
  height: 46px;
  background: #a91f28;
  transform: rotate(-45deg);
  border-radius: 48% 48% 4px 4px;
  box-shadow: 0 0 18px rgba(169, 31, 40, 0.55);
}
.hero__hearts i::before,
.hero__hearts i::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 46px;
  background: #a91f28;
  border-radius: 50%;
}
.hero__hearts i::before { top: -23px; left: 0; }
.hero__hearts i::after { top: 0; left: 23px; }
.hero__hearts i:first-child { left: 0; top: 12px; z-index: 1; }
.hero__hearts i:last-child {
  right: 0;
  top: 4px;
  background: #c8902f;
  transform: rotate(-45deg) scale(0.9);
  z-index: 2;
  box-shadow: 0 0 18px rgba(200, 144, 47, 0.45);
}
.hero__hearts i:last-child::before,
.hero__hearts i:last-child::after { background: #c8902f; }

.hero__sofa {
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  width: min(300px, 58vw);
  height: 120px;
  z-index: 1;
  pointer-events: none;
}
.hero__sofa-seat {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  border-radius: 20px 20px 12px 12px;
  background:
    linear-gradient(180deg, #d4a84a 0%, #a87828 45%, #6f4515 100%);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.45),
    inset 0 2px 0 rgba(255, 230, 180, 0.35);
}
.hero__sofa-seat::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 12%;
  right: 12%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(169, 31, 40, 0.55), transparent);
}
.hero__sofa-heart {
  position: absolute;
  bottom: 40px;
  width: 78px;
  height: 70px;
  background: #a91f28;
  transform: rotate(-45deg);
  border-radius: 50% 50% 4px 4px;
  box-shadow:
    inset 0 0 0 3px rgba(242, 208, 137, 0.35),
    0 8px 16px rgba(0,0,0,0.3);
}
.hero__sofa-heart::before,
.hero__sofa-heart::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 70px;
  background: #a91f28;
  border-radius: 50%;
}
.hero__sofa-heart::before { top: -35px; left: 0; }
.hero__sofa-heart::after { top: 0; left: 35px; }
.hero__sofa-heart--l { left: 16%; }
.hero__sofa-heart--r {
  right: 16%;
  background: #8f1820;
}
.hero__sofa-heart--r::before,
.hero__sofa-heart--r::after { background: #8f1820; }

.hero__inner {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 720px;
  padding: 1.5rem 1.2rem;
  background: radial-gradient(ellipse at 50% 40%, rgba(18, 11, 5, 0.55), transparent 72%);
  border-radius: 24px;
}
.hero__welcome {
  font: 800 clamp(1.6rem, 6vw, 2.8rem)/1 "Reem Kufi", sans-serif;
  letter-spacing: 0.28em;
  color: var(--gold-lite);
  text-shadow:
    0 2px 0 #8d5a16,
    0 4px 0 #5c350d,
    0 8px 20px rgba(0,0,0,0.45);
  margin-bottom: 0.35rem;
  direction: ltr;
}
.hero .eyebrow {
  color: #d94a52;
}
.hero__names {
  font: 700 clamp(3.2rem, 13vw, 7rem)/1 var(--display);
  color: var(--gold-lite);
  margin: 0.5rem 0;
  text-shadow:
    0 4px 0 #8b5416,
    0 10px 30px rgba(0,0,0,0.55);
}
.hero__names i { color: #b32028; font-style: normal; font-size: 0.55em; }
.hero__line { color: var(--sand); font-family: var(--kufi); font-size: clamp(0.9rem,3vw,1.15rem); }
.hero__date {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin: 1.6rem 0;
  padding: 0.7rem 1.5rem;
  border: 1px solid rgba(227, 176, 75, 0.42);
  border-radius: 999px;
  background: rgba(37, 21, 6, 0.72);
  backdrop-filter: blur(6px);
}
.hero__date span { color: var(--muted); font-size: 0.85rem; }
.hero__date strong { font: 700 1.4rem var(--display); color: var(--gold-lite); letter-spacing: 0.05em; }

.hero .btn-brass {
  background: linear-gradient(145deg, #f0c768, #c8902f);
  color: #281704;
  box-shadow: 0 14px 34px rgba(227, 176, 75, 0.38), inset 0 1px 0 rgba(255,255,255,0.45);
}
.hero .btn-brass__ring {
  border-color: rgba(227, 176, 75, 0.72);
}

.hero__floor-welcome {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font: 800 clamp(1.4rem, 5vw, 2.4rem)/1 "Reem Kufi", sans-serif;
  letter-spacing: 0.35em;
  color: var(--brass);
  text-shadow:
    0 1px 0 #6f4515,
    0 0 20px rgba(227, 176, 75, 0.5);
  direction: ltr;
  opacity: 0.9;
  pointer-events: none;
}

@media (max-width: 640px) {
  .hero__arch { border-width: 10px; height: 46vh; }
  .hero__sofa { bottom: 11%; height: 90px; }
  .hero__sofa-heart { width: 58px; height: 52px; bottom: 32px; }
  .hero__sofa-heart::before,
  .hero__sofa-heart::after { width: 58px; height: 52px; }
  .hero__sofa-heart::before { top: -26px; }
  .hero__sofa-heart::after { left: 26px; }
  .hero__drape { height: 70px; }
  .hero__ceiling { height: 22%; opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__sunburst { animation: none; }
}

/* ═══════════ COUPLE + ZAFFA ═══════════ */
.couple {
  padding: 4.5rem 1rem 5rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,135,43,0.12), transparent 55%),
    var(--night-2);
  overflow: hidden;
}

.couple-quote {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--sand);
  font: 500 1.1rem var(--display);
}

.zaffa {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.15rem, 1.8vw, 1.1rem);
  max-width: 1100px;
  min-height: clamp(340px, 58vw, 480px);
  margin: 0 auto;
  padding: 0 0.5rem 2.5rem;
}

.zaffa__ground {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 0;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(106, 74, 34, 0.55), transparent 70%);
  pointer-events: none;
}

.zaffa__heart {
  align-self: center;
  margin-bottom: 8rem;
  color: var(--brass);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  animation: crownFloat 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(227,176,75,0.55));
  z-index: 5;
}

/* ── Saidi wedding characters ── */
.saidi-char {
  position: relative;
  width: clamp(110px, 24vw, 180px);
  height: clamp(300px, 50vw, 400px);
  z-index: 4;
  filter: drop-shadow(0 22px 18px rgba(0,0,0,0.4));
}
.saidi-char > p {
  position: absolute;
  right: 0; left: 0; bottom: -0.2rem;
  text-align: center;
}
.saidi-char > p strong {
  display: block;
  font: 700 1.25rem var(--display);
  color: var(--gold-lite);
}
.saidi-char > p span {
  color: var(--brass);
  font-size: 0.72rem;
  font-family: var(--kufi);
}

.sc__head {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 70px;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(160deg, #e8b888, #c98a55);
  z-index: 3;
  box-shadow: inset -6px -8px 16px rgba(0,0,0,0.15);
}
.sc__eye {
  position: absolute;
  top: 28px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2a1a08;
}
.sc__eye--l { left: 16px; }
.sc__eye--r { right: 16px; }
.sc__smile {
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 18px;
  height: 8px;
  border: 2px solid #8a4a2a;
  border-top: none;
  border-radius: 0 0 12px 12px;
  transform: translateX(-50%);
}
.sc__mustache {
  position: absolute;
  bottom: 22px;
  left: 50%;
  width: 28px;
  height: 6px;
  border-radius: 0 0 10px 10px;
  background: #3a2410;
  transform: translateX(-50%);
}
.sc__neck {
  position: absolute;
  top: 112px;
  left: 50%;
  width: 18px;
  height: 18px;
  background: #d49a68;
  transform: translateX(-50%);
  z-index: 2;
}

/* Groom: black galabiya + emma */
.saidi-char--groom .sc__emma {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 48px;
  border-radius: 40px 40px 10px 10px;
  background:
    repeating-linear-gradient(-25deg, #f4e9d6 0 10px, #e3b04b 10px 15px),
    #f4e9d6;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  z-index: 5;
}
.saidi-char--groom .sc__emma::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 86px;
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, #c8902f, #f2d089, #c8902f);
  transform: translateX(-50%);
}
.sc__galabeya {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 230px;
  border-radius: 40px 40px 18px 18px;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 55%, #111 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  z-index: 1;
}
.sc__collar {
  position: absolute;
  top: 0;
  left: 50%;
  width: 36px;
  height: 22px;
  border-radius: 0 0 10px 10px;
  background: #0e0e0e;
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 1px rgba(227,176,75,0.35);
}
.sc__belt {
  position: absolute;
  top: 42%;
  left: 8%;
  right: 8%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #8a6a20, #e3b04b, #8a6a20);
}
.sc__sleeve {
  position: absolute;
  top: 18px;
  width: 28px;
  height: 90px;
  border-radius: 14px;
  background: #121212;
}
.sc__sleeve--l { left: -14px; transform: rotate(8deg); }
.sc__sleeve--r { right: -14px; transform: rotate(-8deg); }

/* Bride: white dress + veil */
.saidi-char--bride .sc__veil {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 200px;
  border-radius: 60px 60px 20px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.08));
  z-index: 1;
  pointer-events: none;
}
.saidi-char--bride .sc__hair {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 78px;
  border-radius: 40px 40px 8px 8px;
  background: linear-gradient(180deg, #3a2410, #1e1208);
  z-index: 2;
}
.saidi-char--bride .sc__hair::before,
.saidi-char--bride .sc__hair::after {
  content: "";
  position: absolute;
  top: 50px;
  width: 18px;
  height: 70px;
  border-radius: 10px;
  background: #2a1a0c;
}
.saidi-char--bride .sc__hair::before { left: -6px; }
.saidi-char--bride .sc__hair::after { right: -6px; }
.saidi-char--bride .sc__head { top: 58px; z-index: 3; }
.saidi-char--bride .sc__neck { top: 118px; }

.sc__dress { position: absolute; top: 126px; left: 50%; transform: translateX(-50%); width: 100%; height: 230px; z-index: 2; }
.sc__bodice {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 70px;
  border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg, #fff, #f0ebe4);
  box-shadow: inset 0 0 0 1px rgba(227,176,75,0.25);
}
.sc__skirt {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 170px;
  border-radius: 20px 20px 50% 50% / 10px 10px 70% 70%;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(227,176,75,0.2), transparent 40%),
    linear-gradient(180deg, #fff 0%, #f7f2ea 55%, #ebe4d8 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.sc__necklace {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--brass);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  z-index: 3;
}
.sc__bouquet {
  position: absolute;
  top: 50px;
  right: 8px;
  color: #c45a6a;
  font-size: 1.6rem;
  z-index: 4;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
  animation: crownFloat 2.8s ease-in-out infinite;
}

/* ── Stick men around couple ── */
.stickman {
  position: relative;
  width: clamp(56px, 12vw, 78px);
  height: clamp(180px, 32vw, 250px);
  z-index: 3;
  flex-shrink: 0;
  filter: drop-shadow(0 14px 12px rgba(0,0,0,0.35));
}
.stickman__emma {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 24px;
  border-radius: 18px 18px 6px 6px;
  background: linear-gradient(#f2d089, #c8902f);
  z-index: 4;
}
.stickman__head {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 30px;
  border-radius: 50%;
  background: #d9a070;
  z-index: 3;
}
.stickman__body {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 150px;
  border-radius: 20px 20px 10px 10px;
  z-index: 1;
}
.stickman__body--galab {
  background: linear-gradient(180deg, #f4e9d6 0%, #e0d0b0 70%, #cbb892 100%);
}
.stickman--2 .stickman__body--galab { background: linear-gradient(180deg, #e8dcc4, #c8b48a); }
.stickman--3 .stickman__body--galab { background: linear-gradient(180deg, #efe4cc, #d4c29a); }
.stickman--4 .stickman__body--galab { background: linear-gradient(180deg, #f0e6d0, #c9b48e); }

.stickman__arm {
  position: absolute;
  top: 62px;
  left: 50%;
  width: 10px;
  height: 42px;
  margin-left: -5px;
  border-radius: 6px;
  background: #d9a070;
  transform-origin: top center;
  z-index: 2;
  animation: armSwing 1.6s ease-in-out infinite;
}
.stickman__stick {
  position: absolute;
  top: 58px;
  left: 50%;
  width: 7px;
  height: 150px;
  margin-left: -3.5px;
  border-radius: 4px;
  background: linear-gradient(180deg, #d49a3e, #8a5a22 40%, #6a4018);
  transform-origin: top center;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  animation: stickStrike 1.6s ease-in-out infinite;
}
.stickman__dust {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 36px;
  height: 14px;
  margin-left: -18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(232,201,138,0.7), transparent 70%);
  opacity: 0;
  animation: dustPuff 1.6s ease-in-out infinite;
  pointer-events: none;
}

/* stagger: hit ground then raise — offset phases */
.stickman--1 .stickman__stick,
.stickman--1 .stickman__arm,
.stickman--1 .stickman__dust { animation-delay: 0s; }
.stickman--2 .stickman__stick,
.stickman--2 .stickman__arm,
.stickman--2 .stickman__dust { animation-delay: 0.4s; }
.stickman--3 .stickman__stick,
.stickman--3 .stickman__arm,
.stickman--3 .stickman__dust { animation-delay: 0.2s; }
.stickman--4 .stickman__stick,
.stickman--4 .stickman__arm,
.stickman--4 .stickman__dust { animation-delay: 0.6s; }

/* Stick: raised high → slam down → bounce raise */
@keyframes stickStrike {
  0%, 100% { transform: rotate(-8deg) translateY(-4px); }
  18% { transform: rotate(4deg) translateY(-28px); }   /* raise up */
  42% { transform: rotate(12deg) translateY(18px); }  /* slam ground */
  52% { transform: rotate(6deg) translateY(10px); }
  70% { transform: rotate(-4deg) translateY(-22px); } /* raise again */
}
@keyframes armSwing {
  0%, 100% { transform: rotate(-10deg); }
  18% { transform: rotate(-35deg); }
  42% { transform: rotate(25deg); }
  70% { transform: rotate(-30deg); }
}
@keyframes dustPuff {
  0%, 30%, 55%, 100% { opacity: 0; transform: scaleX(0.6); }
  42% { opacity: 0.9; transform: scaleX(1.4) translateY(-2px); }
  48% { opacity: 0.4; transform: scaleX(1.8) translateY(-4px); }
}

@media (max-width: 640px) {
  .stickman--1,
  .stickman--4 { display: none; }
  .zaffa { gap: 0.2rem; min-height: 340px; }
  .zaffa__heart { margin-bottom: 5.5rem; }
}

/* ═══════════ PRIDE ═══════════ */
.pride { padding: 5rem 1.3rem; background: var(--night-2); }
.pride__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}
.job-card {
  padding: 1.6rem 1rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(227,176,75,0.06), transparent), var(--card);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.job-card:hover { transform: translateY(-5px); border-color: var(--brass); }
.job-card__ic { font-size: 2.2rem; display: block; margin-bottom: 0.5rem; }
.job-card h3 { font: 700 1.4rem var(--display); color: var(--gold-lite); }
.job-card p { color: var(--muted); font-size: 0.85rem; }

.big-quote {
  max-width: 820px;
  margin: 3rem auto;
  text-align: center;
  font: 700 clamp(1.4rem, 4.5vw, 2.4rem)/1.5 var(--display);
  color: var(--sand);
  padding: 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.builders {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 800px) { .builders { grid-template-columns: 1fr 1fr; } }
.builders__scaffold {
  position: relative;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #3a2410, #1c1105);
  border: 1px solid var(--line);
}
.builders__scaffold i {
  position: absolute;
  background: #6a4620;
}
.builders__scaffold i:nth-child(1) { left: 20%; top: 0; width: 6px; height: 100%; }
.builders__scaffold i:nth-child(2) { left: 70%; top: 0; width: 6px; height: 100%; }
.builders__scaffold i:nth-child(3) { left: 0; top: 38%; width: 100%; height: 6px; }
.builders__scaffold i:nth-child(4) { left: 0; top: 72%; width: 100%; height: 6px; }
.builders__worker {
  position: absolute;
  width: 20px;
  height: 34px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(#e8c98a 0 30%, #2a1a08 30%);
}
.builders__worker::before {
  content: ""; position: absolute; top: -12px; left: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: #e0a870; transform: translateX(-50%);
  box-shadow: 0 -6px 0 -2px #d49a3e;
}
.builders__worker--1 { left: 20%; top: 26%; animation: hammer 1.1s ease-in-out infinite; transform-origin: bottom; }
.builders__worker--2 { left: 68%; top: 60%; animation: hammer 1.1s ease-in-out infinite 0.4s; transform-origin: bottom; }
@keyframes hammer { 50% { transform: rotate(-8deg) translateY(-3px); } }
.builders__copy h3 { font: 700 clamp(1.6rem,4vw,2.4rem) var(--display); color: var(--gold-lite); margin-bottom: 0.6rem; }
.builders__copy p { color: var(--muted); }

/* ═══════════ FOLK / arena ═══════════ */
.folk { padding: 5rem 1.3rem; background: var(--night); }
.arena {
  position: relative;
  max-width: 960px;
  height: 380px;
  margin: 0 auto 2.5rem;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 12%, rgba(240,135,43,0.35), transparent 55%),
    linear-gradient(180deg, #3a2812 0%, #4a3316 58%, #2a1c0c 100%);
}
.arena__ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(180deg, #6a4a22, #3a2610);
}
.arena__dust {
  position: absolute; left: 0; right: 0; bottom: 30%; height: 60px;
  background: radial-gradient(ellipse at 50% 100%, rgba(232,201,138,0.5), transparent 70%);
  filter: blur(6px);
  animation: dust 2.6s ease-in-out infinite;
}
@keyframes dust { 50% { opacity: 0.5; transform: translateY(-6px); } }

.dancer {
  position: absolute;
  bottom: 32%;
  width: 56px;
  height: 150px;
}
.dancer--a { left: 26%; }
.dancer--b { right: 26%; transform: scaleX(-1); }
.dancer__emma {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 22px; border-radius: 20px 20px 8px 8px;
  background: linear-gradient(#f2d089, #c8902f);
  z-index: 3;
}
.dancer__head {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: #e0a870; z-index: 2;
}
.dancer__body {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 116px; border-radius: 16px 16px 6px 6px;
  background: linear-gradient(180deg, #f4e9d6 0 70%, #d9c8a8 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);
}
.dancer__stick {
  position: absolute; top: 30px; left: 60%;
  width: 120px; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, #8a5a22, #d49a3e);
  transform-origin: left center;
  animation: swing 2.4s ease-in-out infinite;
}
.dancer--b .dancer__stick { animation-delay: 0.2s; }
@keyframes swing { 0%,100% { transform: rotate(-40deg); } 50% { transform: rotate(30deg); } }
.dancer__body { animation: hop 2.4s ease-in-out infinite; }
.dancer--b .dancer__body { animation-delay: 0.3s; }
@keyframes hop { 50% { transform: translateX(-50%) translateY(-8px); } }

.arena__mizmar {
  position: absolute; top: 12%; left: 10%; font-size: 2.4rem;
  animation: toot 1.4s ease-in-out infinite;
}
@keyframes toot { 50% { transform: rotate(-8deg) scale(1.08); } }
.arena__horse {
  position: absolute; bottom: 30%; right: 6%; font-size: 3rem;
  animation: trot 3s ease-in-out infinite;
}
@keyframes trot { 50% { transform: translateX(-14px) translateY(-4px); } }

.folk__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}
.folk-tile {
  position: relative;
  padding: 1.6rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  overflow: hidden;
}
.folk-tile__num {
  font: 700 3rem var(--display);
  color: rgba(227,176,75,0.25);
  position: absolute; top: 0.2rem; left: 1rem;
}
.folk-tile h3 { font: 700 1.5rem var(--display); color: var(--gold-lite); position: relative; }
.folk-tile p { color: var(--muted); font-size: 0.9rem; position: relative; }

/* ═══════════ EMMA ═══════════ */
.emma {
  padding: 5rem 1.3rem;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(240,135,43,0.18), transparent 50%),
    var(--night-2);
}
.emma__inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 800px) { .emma__inner { grid-template-columns: 0.9fr 1.1fr; } }
.emma__visual {
  position: relative;
  height: 300px;
  display: grid;
  place-items: center;
}
.emma__face {
  width: 150px; height: 170px; border-radius: 50% 50% 46% 46%;
  background: linear-gradient(160deg, #e6b483, #c98b58);
  box-shadow: inset -10px -10px 30px rgba(0,0,0,0.2);
}
.emma__wrap {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 120px; border-radius: 100px 100px 40px 40px;
  background: repeating-linear-gradient(-30deg, #f4e9d6 0 14px, #e3b04b 14px 20px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 2;
}
.emma__crown {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-size: 3rem; z-index: 3;
  filter: drop-shadow(0 6px 12px rgba(240,135,43,0.5));
  animation: crownFloat 3s ease-in-out infinite;
}
@keyframes crownFloat { 50% { transform: translate(-50%, -8px); } }
.emma__shine {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 40% 35%, rgba(255,240,200,0.35), transparent 55%);
  pointer-events: none;
}
.emma__copy h2 { font: 700 clamp(2rem,6vw,3.2rem) var(--display); color: var(--gold-lite); margin: 0.4rem 0; }
.emma__lead { color: var(--sand); margin-bottom: 1.2rem; }
.emma__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.emma__list li {
  position: relative; padding-right: 1.2rem; color: var(--ink); font-family: var(--kufi);
}
.emma__list li::before {
  content: "◆"; position: absolute; right: 0; color: var(--brass); font-size: 0.7rem; top: 0.35em;
}

/* ═══════════ DETAILS ═══════════ */
.details { padding: 5rem 1.3rem; background: var(--night); }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto 2.5rem;
}
.info-card {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  text-align: center;
}
.info-card span { color: var(--brass); font-family: var(--kufi); font-size: 0.75rem; letter-spacing: 0.1em; }
.info-card strong { display: block; font: 700 1.5rem var(--display); color: var(--gold-lite); margin: 0.35rem 0; }
.info-card p { color: var(--muted); font-size: 0.82rem; }

.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  max-width: 500px;
  margin: 0 auto 2.5rem;
}
.countdown > div {
  min-width: 64px;
  padding: 0.8rem 0.4rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.countdown b { display: block; font: 700 1.8rem var(--display); color: var(--gold-lite); }
.countdown span { font-size: 0.68rem; color: var(--muted); }
.countdown i { color: var(--brass); font-style: normal; font-size: 1.4rem; }

.map {
  max-width: 960px;
  margin: 0 auto;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.map iframe { width: 100%; height: 100%; border: 0; filter: sepia(0.3) saturate(1.2) brightness(0.9); }
.directions {
  display: block;
  width: fit-content;
  margin: 1.2rem auto 0;
  color: var(--brass);
  text-decoration: none;
  font-family: var(--kufi);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
}

/* ═══════════ RSVP ═══════════ */
.rsvp { padding: 5rem 1.3rem; background: var(--night-2); }
.rsvp__panel {
  max-width: 560px;
  margin: 0 auto;
  padding: 2.4rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,135,43,0.15), transparent 60%),
    var(--card);
}
.rsvp__panel h2 { font: 700 clamp(1.8rem,5vw,2.6rem) var(--display); color: var(--gold-lite); margin: 0.3rem 0 1.4rem; }
#rsvpForm { display: grid; gap: 1rem; text-align: right; }
#rsvpForm label > span { display: block; font-family: var(--kufi); font-size: 0.85rem; color: var(--muted); margin-bottom: 0.35rem; }
#rsvpForm input[type="text"],
#rsvpForm input[name="name"],
#rsvpForm input[type="number"] {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--night);
  color: var(--ink);
  font-family: var(--body);
}
#rsvpForm input:focus { outline: none; border-color: var(--brass); }
#rsvpForm fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; }
#rsvpForm legend { padding: 0 0.5rem; color: var(--muted); font-family: var(--kufi); font-size: 0.85rem; }
.radio { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); font-family: var(--kufi); font-size: 0.9rem; }
.radio input { accent-color: var(--brass); }
#rsvpForm button { justify-self: center; margin-top: 0.4rem; }
.rsvp__status { margin-top: 1rem; color: var(--gold-lite); font-family: var(--kufi); min-height: 1.4em; }

/* ═══════════ FOOT ═══════════ */
.foot {
  padding: 3rem 1.3rem;
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--night);
}
.foot__names { font: 700 2rem var(--display); color: var(--gold-lite); }
.foot__names span { color: var(--amber); }
.foot__line { color: var(--sand); font-family: var(--kufi); margin: 0.5rem 0; font-size: 0.9rem; }
.foot__mark { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.06em; }

/* ═══════════ responsive ═══════════ */
@media (max-width: 560px) {
  .topbar__nav { display: none; }
  .arena { height: 300px; }
  .countdown > div { min-width: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}