:root {
  --forest:#102b25;
  --forest2:#1b3c33;
  --cream:#f8f4e9;
  --paper:#fffdf8;
  --muted:#69756b;
  --gold:#b4945d;
  --goldlight:#decaa1;
  --line:rgba(180,148,93,.32);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:var(--cream);
  color:var(--forest);
  font-family:'Cairo',sans-serif;
  -webkit-font-smoothing:antialiased;
}

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

button {
  font:inherit;
  cursor:pointer;
}

button:focus-visible,a:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:4px;
}

::selection {
  background:#d6bd88;
  color:#102b25;
}

.grain {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:20;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

.site-header {
  height:76px;
  position:absolute;
  top:0;
  right:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 clamp(24px,6vw,110px);
  z-index:5;
  color:#fff7e7;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.brand {
  display:flex;
  align-items:center;
  gap:8px;
  font-family:Amiri,serif;
  font-size:26px;
}

.brand-icon {
  color:var(--goldlight);
  font-size:31px;
}

.header-nav {
  display:flex;
  gap:35px;
  font-size:13px;
  color:#e9e5d9;
}

.header-nav a {
  transition:color .2s;
}

.header-nav a:hover {
  color:#e3bf80;
}

.sound-pill {
  border:1px solid rgba(255,255,255,.35);
  border-radius:40px;
  color:#fff9e9;
  background:rgba(255,255,255,.05);
  padding:9px 16px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
}

.sound-glyph {
  color:#e8c98d;
  font-size:19px;
}

.hero {
  min-height:860px;
  min-height:100svh;
  background:radial-gradient(ellipse at 50% 45%,#2a4b3d 0%,#17372e 45%,#0a211d 100%);
  color:#faf3e3;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  text-align:center;
  padding:125px 20px 85px;
}

.hero:before,.hero:after {
  content:"";
  position:absolute;
  pointer-events:none;
  inset:22px;
  border:1px solid rgba(211,179,121,.24);
}

.hero:after {
  inset:34px;
  border-color:rgba(211,179,121,.09);
}

.hero-glow {
  position:absolute;
  width:740px;
  height:740px;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(174,156,100,.10),transparent 67%);
}

.hero-pattern {
  position:absolute;
  inset:0;
  opacity:.20;
  background-image:radial-gradient(circle at 12% 12%,#bcaa7a 1px,transparent 2px),radial-gradient(circle at 88% 80%,#bcaa7a 1px,transparent 2px);
  background-size:95px 95px,132px 132px;
}

.hero-inner {
  position:relative;
  z-index:1;
  max-width:850px;
  width:100%;
}

.eyebrow {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  font-family:Amiri,serif;
  font-size:18px;
  letter-spacing:1px;
  color:#e3cb9d;
}

.eyebrow span {
  width:35px;
  height:1px;
  background:var(--gold);
}

.hero-ornament {
  color:#d1b37d;
  font-size:43px;
  margin:6px 0 7px;
}

.small-heading {
  font-size:13px;
  letter-spacing:4px;
  color:#e8dfcd;
}

.hero h1 {
  margin:0;
  font-family:Amiri,serif;
  font-weight:400;
  font-size:clamp(58px,8vw,108px);
  line-height:1.15;
}

.hero h1 em,.section-head h2 em,.closing-section h2 em {
  color:#d9ba83;
  font-style:normal;
}

.hero-description {
  font-size:clamp(14px,1.5vw,17px);
  line-height:2.1;
  color:#e0e0d5;
  margin:18px auto 20px;
}

.name-frame {
  margin:27px auto 30px;
  padding:21px 30px 19px;
  max-width:555px;
  border-top:1px solid rgba(218,186,127,.48);
  border-bottom:1px solid rgba(218,186,127,.48);
  display:flex;
  align-items:center;
  flex-direction:column;
}

.frame-flourish {
  font-size:11px;
  color:#d9ba83;
}

.couple-names {
  font:400 clamp(27px,4vw,46px)/1.7 Amiri,serif;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.couple-names b {
  color:#d4ba89;
  font-weight:400;
  font-size:34px;
}

.name-subtitle {
  font-size:12px;
  color:#dfd3bc;
  letter-spacing:2px;
  margin:2px 0 13px;
}

.hero-cta {
  font-size:13px;
  color:#f4e8d2;
  display:inline-flex;
  gap:12px;
  align-items:center;
  border-bottom:1px solid #d9ba83;
  padding:12px 0;
  transition:gap .2s;
}

.hero-cta:hover {
  gap:20px;
}

.hero-bottom {
  position:absolute;
  bottom:50px;
  color:#dbcfb5;
  opacity:.8;
  font:14px Amiri,serif;
  display:flex;
  gap:13px;
  align-items:center;
}

.hero-bottom span {
  color:#cfb57a;
}

.section {
  padding:110px 24px;
}

.container {
  max-width:1140px;
  margin:0 auto;
}

.narrow {
  max-width:820px;
}

.verse-section {
  text-align:center;
  background:var(--paper);
  position:relative;
}

.verse-section:before {
  content:"";
  position:absolute;
  right:10%;
  left:10%;
  top:0;
  height:1px;
  background:linear-gradient(to left,transparent,var(--goldlight),transparent);
}

.section-kicker {
  color:var(--gold);
  font-size:12px;
  letter-spacing:3px;
  font-weight:700;
}

.section-flower {
  font-size:28px;
  color:var(--gold);
  margin:20px;
}

.quran-verse {
  font-family:Amiri,serif;
  font-size:clamp(25px,3.2vw,41px);
  line-height:2.2;
  margin:10px 0 13px;
  color:#173c30;
}

.verse-source {
  font-size:13px;
  color:#8b886e;
}

.verse-audio {
  border:1px solid var(--line);
  background:transparent;
  color:var(--forest);
  padding:13px 23px;
  border-radius:50px;
  display:inline-flex;
  align-items:center;
  gap:13px;
  margin-top:26px;
  font-size:13px;
  transition:background .2s;
}

.verse-audio:hover {
  background:#f5ecdb;
}

.verse-audio>span:first-child {
  font-size:12px;
  color:var(--gold);
}

.audio-bars {
  height:16px;
  display:flex;
  gap:3px;
  align-items:center;
  direction:ltr;
}

.audio-bars i {
  width:2px;
  height:6px;
  background:var(--gold);
  border-radius:2px;
}

.audio-bars i:nth-child(2),.audio-bars i:nth-child(4) {
  height:12px;
}

.audio-bars i:nth-child(3) {
  height:16px;
}

.is-playing .audio-bars i {
  animation:wave .65s ease-in-out infinite alternate;
}

.is-playing .audio-bars i:nth-child(2) {
  animation-delay:.15s;
}

.is-playing .audio-bars i:nth-child(3) {
  animation-delay:.3s;
}

.is-playing .audio-bars i:nth-child(4) {
  animation-delay:.45s;
}

.is-playing .audio-bars i:nth-child(5) {
  animation-delay:.2s;
}

@keyframes wave {
  to {
    height:3px;
  }
}

.events-section {
  background:#f4f0e6;
}

.section-head {
  text-align:center;
  margin-bottom:52px;
}

.section-head h2,.closing-section h2 {
  font:400 clamp(39px,5vw,66px)/1.4 Amiri,serif;
  margin:13px 0;
}

.section-head h2 em {
  color:var(--gold);
}

.section-head p {
  font-size:15px;
  color:var(--muted);
}

.events-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  align-items:stretch;
}

.event-card {
  background:var(--paper);
  border:1px solid #e9dfcf;
  padding:32px 37px 35px;
  box-shadow:0 17px 50px rgba(33,56,44,.035);
  position:relative;
  overflow:hidden;
  text-align:center;
}

.event-card-accent {
  background:#edf0e8;
}

.event-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#9b927f;
  font-size:11px;
  letter-spacing:1px;
}

.event-star {
  color:var(--gold);
  font-size:19px;
}

.event-illustration {
  height:165px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  margin:8px 0 15px;
}

.arch {
  position:absolute;
  border:1px solid rgba(170,145,92,.28);
  width:180px;
  height:200px;
  border-radius:100px 100px 0 0;
  top:16px;
}

.arch-2 {
  width:150px;
  height:183px;
  top:29px;
  border-color:rgba(170,145,92,.46);
}

.event-symbol {
  color:#a88f5f;
  font-family:Amiri,serif;
  font-size:47px;
  margin-top:25px;
}

.rings {
  display:block;
  position:relative;
  width:110px;
  height:60px;
  margin-top:44px;
}

.rings i {
  position:absolute;
  display:block;
  border:4px solid #c2a66e;
  width:59px;
  height:59px;
  border-radius:50%;
  top:0;
  left:10px;
  transform:rotate(-24deg);
  box-shadow:0 0 0 1px rgba(255,255,255,.6) inset;
}

.rings i+ i {
  left:42px;
  top:4px;
  border-color:#b5985e;
}

.event-intro {
  font-size:12px;
  letter-spacing:2px;
  color:var(--gold);
}

.event-card h3 {
  font:400 55px Amiri,serif;
  margin:6px 0 6px;
}

.event-rule {
  margin:13px auto 25px;
  width:68px;
  height:1px;
  background:var(--gold);
}

.date-large {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:25px;
}

.date-large>span {
  font:400 80px/.95 Amiri,serif;
  color:var(--forest);
}

.date-large div {
  display:flex;
  flex-direction:column;
  text-align:right;
  gap:2px;
}

.date-large b {
  font:400 29px Amiri,serif;
}

.date-large small {
  font-size:12px;
  color:#8f8876;
}

.event-details {
  border-top:1px solid #e9decd;
  border-bottom:1px solid #e9decd;
  padding:12px 0;
  margin-bottom:22px;
}

.event-details p {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#827e70;
  font-size:13px;
}

.event-details strong {
  color:var(--forest);
  font-weight:600;
}

.detail-icon {
  color:var(--gold);
  font-size:18px;
  margin-left:auto;
}

.countdown-label {
  font-size:11px;
  color:#8a867a;
  margin-bottom:12px;
}

.countdown {
  display:flex;
  justify-content:center;
  gap:10px;
  direction:rtl;
  margin-bottom:26px;
}

.countdown-unit {
  min-width:69px;
  background:#f5f0e6;
  border:1px solid #e9dfcc;
  padding:9px 4px;
}

.event-card-accent .countdown-unit {
  background:#e7e9dd;
}

.countdown-unit strong {
  display:block;
  font:400 27px/1.3 Amiri,serif;
  color:var(--forest);
}

.countdown-unit span {
  font-size:10px;
  color:#8d8778;
}

.countdown-finished {
  font:21px Amiri,serif;
  color:var(--forest);
  min-height:70px;
  display:flex;
  align-items:center;
}

.event-button {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  background:var(--forest);
  color:#f9f2e4;
  padding:16px 20px;
  font-size:13px;
  transition:transform .2s,background .2s;
}

.event-button:hover {
  background:#2b5143;
  transform:translateY(-2px);
}

.event-button span:last-child {
  margin-right:auto;
}

.closing-section {
  text-align:center;
  background:var(--forest);
  color:#f3ebd8;
  position:relative;
  overflow:hidden;
}

.closing-section:before,.closing-section:after {
  content:"";
  position:absolute;
  width:350px;
  height:350px;
  border:1px solid rgba(211,179,121,.18);
  border-radius:50%;
  top:-210px;
  right:-100px;
}

.closing-section:after {
  right:auto;
  left:-100px;
  top:auto;
  bottom:-210px;
}

.closing-motif {
  font-size:45px;
  color:var(--goldlight);
  margin-bottom:12px;
}

.closing-section h2 {
  font-size:clamp(38px,5vw,61px);
}

.closing-text {
  color:#d6d8ca;
  line-height:2.4;
  font-size:16px;
  max-width:650px;
  margin:20px auto;
}

.closing-separator {
  color:var(--goldlight);
  font-size:33px;
  margin:22px 0 10px;
}

.closing-signature {
  font:25px Amiri,serif;
  color:#e4cfaa;
}

.footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  background:#0a211d;
  color:#b0bbab;
  padding:25px clamp(25px,7vw,115px);
  font-size:12px;
}

.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s ease,transform .9s ease;
}

.reveal.visible {
  opacity:1;
  transform:translateY(0);
}

@media(max-width:800px) {
  .site-header {
    height:69px;
    padding:0 21px;
  }
  .header-nav {
    display:none;
  }
  .hero {
    min-height:760px;
    min-height:100svh;
    padding-top:110px;
  }
  .hero:before {
    inset:12px;
  }
  .hero:after {
    inset:20px;
  }
  .events-grid {
    grid-template-columns:1fr;
    max-width:550px;
    margin:auto;
  }
  .section {
    padding:85px 20px;
  }
}

@media(max-width:480px) {
  .hero h1 {
    font-size:64px;
  }
  .hero-description {
    font-size:13px;
  }
  .name-frame {
    padding-inline:0;
  }
  .couple-names {
    gap:10px;
    font-size:29px;
  }
  .couple-names b {
    font-size:27px;
  }
  .hero-bottom {
    bottom:35px;
  }
  .event-card {
    padding:26px 22px 28px;
  }
  .event-card h3 {
    font-size:50px;
  }
  .countdown-unit {
    min-width:60px;
  }
  .footer {
    font-size:11px;
  }
  .desktop-only {
    display:none;
  }
  .quran-verse {
    font-size:26px;
    line-height:2.05;
  }
}

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

/* تحسينات الدعوة: خط كايرو، الاسم، وخريطة ظاهرة لكل مناسبة. */
.brand {
  font-family: 'Cairo', sans-serif;
  font-size: 22px;
  font-weight: 700;
}
.couple-names {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(27px, 4vw, 49px);
  font-weight: 700;
  line-height: 1.6;
  text-wrap: balance;
}
.name-intro {
  display: block;
  margin: 5px 0 15px;
  color: #e7d8bb;
  font-size: 14px;
}
.name-subtitle {
  display: block;
  margin-top: 12px;
  letter-spacing: 0;
  font-size: 13px;
}
.hero-pattern {
  /* بلا نجوم أو نقاط زخرفية بالخلفية. */
  background-image: none;
}
.event-topline {
  justify-content: center;
}
.map-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--forest);
  margin: 18px 0 12px;
}
.map-frame {
  width: 100%;
  height: 240px;
  border: 1px solid #ded5c4;
  background: #e5e8e1;
  overflow: hidden;
  margin-bottom: 14px;
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 480px) {
  .couple-names {
    font-size: 28px;
  }
  .map-frame {
    height: 215px;
  }
}