:root {
  --maroon:        #7d1f2e;
  --maroon-mid:    #9e3047;
  --maroon-light:  #b84d63;
  --maroon-border: rgba(125,31,46,0.12);
  --gold:          #a0733a;
  --gold-light:    #c9a96e;
  --cream:         #faf7f2;
  --cream2:        #f2ede4;
  --white:         #ffffff;
  --text:          #2c1a1e;
  --text-mid:      #5a3a42;
  --text-muted:    #8a6a72;
  --bg:            #f5f0e8;
  --card-bg:       #ffffff;
  --radius:        14px;
  --shadow:        0 2px 16px rgba(125,31,46,0.07);
  --shadow-md:     0 4px 24px rgba(125,31,46,0.10);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  
}

/* -- HERO ── */
.hero{
  min-height:65svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:6rem 1.25rem 2.5rem;
  position:relative;overflow:hidden;
  background:var(--maroon);
}
.hero-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 60% at 85% 10%,rgba(200,150,100,0.18) 0%,transparent 55%),
    radial-gradient(ellipse 60% 80% at 5% 100%,rgba(80,5,15,0.5) 0%,transparent 55%);
}
.hero-pulse{
  position:absolute;top:25%;right:-20%;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,0.06) 0%,transparent 70%);
  animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.15);opacity:1}}
.hero-pattern{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:40px 40px;
}
.hero-content{position:relative}
.hero-name-arabic{
  font-family:'Cormorant Garamond',serif;
  font-size:2.8rem;font-weight:300;font-style:italic;
  color:rgba(255,255,255,0.15);
  letter-spacing:0.05em;margin-bottom:0.5rem;display:block;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:0.45rem;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:20px;padding:0.3rem 0.85rem;
  font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.85);margin-bottom:1rem;
}
.hero-badge::before{content:'♡';font-size:0.65rem;color:var(--gold-light)}
.hero-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.8rem,12vw,4.2rem);
  font-weight:300;line-height:1.0;
  color:#fff;margin-bottom:0.75rem;
}
.hero-title em{font-style:italic;color:var(--gold-light)}
.hero-meaning{
  font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.45);margin-bottom:0.5rem;
}
.hero-meaning strong{color:var(--gold-light);font-weight:500}
.hero-sub{
  font-size:0.875rem;font-weight:300;line-height:1.75;
  color:rgba(255,255,255,0.65);max-width:340px;margin-top:0.75rem;
}

/* ── SECTIONS ── */
.section{padding:2.5rem 1.25rem}
.section-alt{background:var(--cream2)}
.section-tag{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--maroon);margin-bottom:0.65rem;
}
.section-tag::before{content:'';width:18px;height:1px;background:var(--maroon)}
.section-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.7rem,7vw,2.3rem);
  font-weight:300;line-height:1.15;color:var(--text);
}
.section-title em{font-style:italic;color:var(--maroon)}
.divider{width:36px;height:2px;background:var(--maroon-border);margin:1.25rem 0;border-radius:2px}

.story-body{font-size:0.875rem;line-height:1.95;color:var(--text-mid)}
.story-body p+p{margin-top:1rem}
.story-body strong{color:var(--text);font-weight:600}

.pull-quote{
  background:var(--white);
  border-left:3px solid var(--maroon);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.25rem 1.25rem 1.25rem 1.4rem;
  margin:1.75rem 0;
  box-shadow:var(--shadow);
}
.pull-quote p{
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;font-weight:300;font-style:italic;
  line-height:1.6;color:var(--text);
}
.pull-quote p::before{content:'\201C';color:var(--maroon);font-size:1.7rem;line-height:0;vertical-align:-0.28em;margin-right:0.05em}
.pull-quote p::after{content:'\201D';color:var(--maroon);font-size:1.7rem;line-height:0;vertical-align:-0.28em;margin-left:0.05em}

/* ── DIAGNOSIS CARD ── */
.diagnosis-card{
  background:var(--card-bg);
  border:1px solid var(--maroon-border);
  border-radius:var(--radius);
  padding:1.35rem 1.2rem;
  margin:1.5rem 0;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-md);
}
.diagnosis-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--maroon),var(--maroon-light),var(--maroon));
}
.diagnosis-name{
  font-family:'Cinzel',serif;
  font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--maroon);margin-bottom:0.5rem;
}
.diagnosis-full{
  font-family:'Cormorant Garamond',serif;
  font-size:1.45rem;font-weight:300;color:var(--text);
  line-height:1.25;margin-bottom:0.75rem;
}
.diagnosis-desc{font-size:0.78rem;line-height:1.75;color:var(--text-muted)}

/* ── SEEKING LIST ── */
.seeking-list{display:flex;flex-direction:column;gap:0.75rem;margin-top:1.25rem}
.seek-item{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--card-bg);
  border:1px solid var(--maroon-border);
  border-radius:var(--radius);
  padding:1rem 1.1rem;
  box-shadow:var(--shadow);
}
.seek-icon{font-size:1.3rem;flex-shrink:0;margin-top:0.1rem}
.seek-title{font-size:0.8rem;font-weight:600;color:var(--text);margin-bottom:0.25rem}
.seek-text{font-size:0.75rem;line-height:1.65;color:var(--text-muted)}

/* ── CONTACT CARD ── */
.contact-card{
  background:var(--card-bg);
  border:1px solid var(--maroon-border);
  border-radius:var(--radius);
  padding:1.5rem 1.25rem;
  text-align:center;
  margin-top:1.5rem;
  box-shadow:var(--shadow-md);
}
.contact-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.25rem;font-weight:300;font-style:italic;
  color:var(--text);margin-bottom:0.5rem;
}
.contact-sub{font-size:0.78rem;line-height:1.7;color:var(--text-muted);margin-bottom:1.1rem}
.contact-email{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.78rem;color:var(--maroon);
  background:var(--cream);
  border:1px solid var(--maroon-border);
  border-radius:8px;padding:0.6rem 1rem;
  text-decoration:none;transition:all 0.2s;
  word-break:break-all;
}
.contact-email:hover{background:var(--cream2);border-color:rgba(125,31,46,0.25)}
.contact-email svg{width:15px;height:15px;stroke:var(--maroon);fill:none;stroke-width:1.5;flex-shrink:0}

/* ── CLOSING ── */
.closing{
  background:var(--maroon);
  padding:2.75rem 1.25rem;
  text-align:center;
  position:relative;overflow:hidden;
}
.closing::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(200,150,100,0.12) 0%,transparent 70%);
}
.closing-inner{position:relative}
.closing-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem,7vw,2.4rem);
  font-weight:300;line-height:1.2;
  color:#fff;margin-bottom:0.85rem;
}
.closing-title em{font-style:italic;color:var(--gold-light)}
.closing-body{font-size:0.85rem;line-height:1.8;color:rgba(255,255,255,0.65);margin-bottom:1.75rem}
.closing-body p+p{margin-top:0.85rem}
.btn-ghost{
  display:inline-block;text-align:center;text-decoration:none;
  font-size:0.78rem;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;
  color:rgba(255,255,255,0.75);background:transparent;
  padding:0.8rem 1.5rem;border-radius:8px;
  border:1px solid rgba(255,255,255,0.25);
  transition:all 0.2s;
}
.btn-ghost:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.4)}