/* Islam Connect - shared design system (Two Lights Foundation)
   Palette: night emerald + antique gold + warm ivory
   Fonts: Cormorant Garamond (display), Jost (body/labels), Amiri (Arabic) */

:root{
  --night:      #04211B;
  --emerald:    #0A3A2E;
  --emerald-2:  #0E4B3B;
  --gold:       #C6A455;
  --gold-soft:  #E9D5A0;
  --gold-deep:  #9C7C2E;
  --ivory:      #F7F2E9;
  --ivory-2:    #EFE7D7;
  --ink:        #14342B;
  --mist:       #B9CDC3;
  --pattern: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%20viewBox='0%200%2096%2096'%3E%3Cg%20fill='none'%20stroke='%23C6A455'%20stroke-width='1'%3E%3Crect%20x='30'%20y='30'%20width='36'%20height='36'/%3E%3Crect%20x='30'%20y='30'%20width='36'%20height='36'%20transform='rotate(45%2048%2048)'/%3E%3C/g%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',sans-serif;
  font-weight:300;
  background:var(--night);
  color:var(--ivory);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.2}
.arabic{font-family:'Amiri',serif;direction:rtl}

/* ---------- ornaments ---------- */
.star{display:inline-block;width:1em;height:1em;vertical-align:middle}
.divider{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin:26px auto;
}
.divider::before,.divider::after{
  content:"";height:1px;width:min(120px,26vw);
  background:linear-gradient(90deg,transparent,var(--gold));
}
.divider::after{background:linear-gradient(90deg,var(--gold),transparent)}
.divider .star{color:var(--gold);width:14px;height:14px;flex:none}
.divider.on-light::before{background:linear-gradient(90deg,transparent,var(--gold-deep))}
.divider.on-light::after{background:linear-gradient(90deg,var(--gold-deep),transparent)}
.divider.on-light .star{color:var(--gold-deep)}

.label{
  font-size:.72rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);
}
.on-light .label,.label.on-light{color:var(--gold-deep)}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 48px;
  transition:background .4s,padding .4s,box-shadow .4s;
}
nav.scrolled{
  background:rgba(4,33,27,.94);
  backdrop-filter:blur(8px);
  padding:14px 48px;
  box-shadow:0 1px 0 rgba(198,164,85,.25);
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ivory)}
.brand .star{width:32px;height:32px;color:var(--gold);flex:none}
.brand span{font-size:.82rem;font-weight:500;letter-spacing:.38em;text-transform:uppercase;white-space:nowrap}
.brand b{color:var(--gold);font-weight:500}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a{
  font-size:.7rem;font-weight:400;letter-spacing:.32em;text-transform:uppercase;
  color:var(--mist);text-decoration:none;transition:color .3s;white-space:nowrap;
}
.nav-links a:hover{color:var(--gold-soft)}
.nav-links a.active{color:var(--gold)}
@media(max-width:900px){
  nav{padding:22px 26px}
  .brand span{font-size:.76rem;letter-spacing:.22em}
  .nav-links{gap:22px}
  .nav-links a{font-size:.64rem;letter-spacing:.18em}
}
@media(max-width:640px){
  nav{flex-direction:column;gap:12px;padding:16px 18px 14px}
  nav.scrolled{padding:10px 18px 12px}
  .brand{gap:10px}
  .brand .star{width:24px;height:24px}
  .brand span{font-size:.72rem;letter-spacing:.3em}
  .nav-links{gap:28px}
  .nav-links a{font-size:.62rem;letter-spacing:.2em}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100vh;
  display:grid;place-items:center;text-align:center;
  padding:140px 24px 110px;
  background:
    radial-gradient(ellipse 42% 38% at 15% -4%, rgba(198,164,85,.30), transparent 65%),
    radial-gradient(ellipse 42% 38% at 85% -4%, rgba(233,213,160,.16), transparent 65%),
    linear-gradient(180deg, var(--emerald) 0%, var(--night) 72%);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:var(--pattern);background-size:96px 96px;
  opacity:.05;pointer-events:none;
}
.hero.compact{min-height:76vh;padding:180px 24px 100px}
.hero-inner{position:relative;max-width:880px}
.bismillah{
  font-size:clamp(1.7rem,3.4vw,2.4rem);
  color:var(--gold-soft);
  margin-bottom:8px;
}
.hero .label{margin-top:10px;display:block}
.hero h1{
  font-size:clamp(2.5rem,5.6vw,4.4rem);
  font-weight:500;
  color:var(--ivory);
  margin:26px auto 0;
  max-width:18ch;
}
.hero.compact h1{font-size:clamp(2.3rem,5vw,3.8rem);max-width:20ch}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero p.lead{
  margin:26px auto 0;max-width:52ch;
  font-size:clamp(1rem,1.6vw,1.18rem);
  color:var(--mist);letter-spacing:.04em;
}
.btn{
  display:inline-block;margin-top:44px;
  padding:16px 46px;
  border:1px solid var(--gold);
  color:var(--gold-soft);text-decoration:none;
  font-size:.78rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  transition:background .35s,color .35s;
}
.btn:hover{background:var(--gold);color:var(--night)}
.scroll-cue{
  position:absolute;bottom:34px;left:50%;width:1px;height:56px;
  background:linear-gradient(180deg,var(--gold),transparent);
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* ---------- shared section shell ---------- */
section{position:relative;padding:110px 24px}
.wrap{max-width:1100px;margin:0 auto;text-align:center}
section h2{font-size:clamp(2rem,4vw,3rem);margin-top:18px}

/* ---------- light sections ---------- */
.searching{background:var(--ivory);color:var(--ink)}
.searching::before{
  content:"";position:absolute;inset:0;
  background-image:var(--pattern);background-size:96px 96px;opacity:.045;pointer-events:none;
}
.searching h2{color:var(--emerald)}
.searching .intro{max-width:56ch;margin:18px auto 0;color:#4E6259;letter-spacing:.03em}
.cards{
  display:flex;flex-wrap:wrap;justify-content:center;gap:26px;
  margin-top:64px;position:relative;
}
.card{
  flex:0 1 300px;min-width:250px;
  background:#FCF9F2;
  border:1px solid rgba(156,124,46,.35);
  border-radius:150px 150px 14px 14px;
  padding:56px 30px 40px;
  transition:transform .4s,box-shadow .4s,border-color .4s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--gold-deep);
  box-shadow:0 18px 40px -18px rgba(20,52,43,.35);
}
.card .star{width:22px;height:22px;color:var(--gold-deep)}
.card h3{font-size:1.5rem;color:var(--emerald);margin-top:16px}
.card p{margin-top:10px;font-size:.95rem;color:#4E6259}
.card.wide{flex:0 1 420px}

/* ---------- dark feature section ---------- */
.connect{background:linear-gradient(180deg,var(--night) 0%,var(--emerald) 55%,var(--night) 100%)}
.connect::before{
  content:"";position:absolute;inset:0;
  background-image:var(--pattern);background-size:96px 96px;opacity:.05;pointer-events:none;
}
.connect h2{color:var(--ivory)}
.connect .intro{max-width:56ch;margin:18px auto 0;color:var(--mist);letter-spacing:.03em}
.connect-list{list-style:none;margin:56px auto 0;max-width:640px}
.connect-list li{
  display:flex;align-items:center;justify-content:center;gap:18px;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  color:var(--ivory);
  padding:20px 0;
  border-bottom:1px solid rgba(198,164,85,.22);
}
.connect-list li:last-child{border-bottom:none}
.connect-list .star{width:13px;height:13px;color:var(--gold);flex:none}
.connect-list em{font-style:italic;color:var(--gold-soft)}
.connect p.after{margin:44px auto 0;max-width:52ch;color:var(--mist);letter-spacing:.04em}

/* ---------- ayah ---------- */
.ayah{background:var(--ivory-2);color:var(--ink)}
.ayah .arabic{
  font-size:clamp(1.9rem,4vw,2.9rem);
  color:var(--emerald);line-height:2;
}
.ayah .translation{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.55rem);
  color:var(--emerald);margin-top:20px;
}
.ayah .cite{margin-top:16px}

/* ---------- closing ---------- */
.closing{
  background:
    radial-gradient(ellipse 42% 46% at 15% 108%, rgba(198,164,85,.26), transparent 65%),
    radial-gradient(ellipse 42% 46% at 85% 108%, rgba(233,213,160,.14), transparent 65%),
    var(--night);
  padding:130px 24px 120px;
}
.closing h2{font-size:clamp(2.6rem,5.4vw,4rem);font-weight:500;color:var(--ivory)}
.closing h2 em{font-style:italic;color:var(--gold-soft)}
.closing p{margin:24px auto 0;max-width:52ch;color:var(--mist);letter-spacing:.05em}
.closing .soon{
  display:inline-block;margin-top:40px;padding:12px 34px;
  border:1px solid rgba(198,164,85,.5);
  font-size:.72rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold-soft);
}
.closing .btn{margin-top:40px}
.closing .foundation{margin-top:46px;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--mist)}
.closing .foundation b{color:var(--gold);font-weight:500}

/* ---------- footer ---------- */
footer{
  border-top:1px solid rgba(198,164,85,.2);
  padding:30px 24px;text-align:center;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#6E8479;
}

/* ---------- badges & small buttons ---------- */
.badge{
  display:inline-block;margin-left:14px;padding:4px 14px;
  border:1px solid rgba(198,164,85,.5);
  font-family:'Jost',sans-serif;font-size:.56rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-soft);vertical-align:middle;white-space:nowrap;
}
.on-light .badge{border-color:rgba(156,124,46,.5);color:var(--gold-deep)}
.btn-sm{
  display:inline-block;padding:10px 22px;
  border:1px solid var(--gold);color:var(--gold-soft);text-decoration:none;
  font-size:.62rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  transition:background .35s,color .35s;
}
.btn-sm:hover{background:var(--gold);color:var(--night)}
.card .btn-sm{border-color:var(--gold-deep);color:var(--gold-deep)}
.card .btn-sm:hover{background:var(--gold-deep);color:var(--ivory)}
.btn-sm.disabled,.btn.disabled{opacity:.45;pointer-events:none;cursor:default}
.card .actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.note{margin-top:40px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#8A9C90}
.searching .note{color:#8A9482}

/* ---------- dark card variant ---------- */
.card.dark{background:rgba(247,242,233,.03);border-color:rgba(198,164,85,.3)}
.card.dark h3{color:var(--ivory)}
.card.dark p{color:var(--mist)}
.card.dark .star{color:var(--gold)}
.card.dark:hover{border-color:var(--gold);box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}

/* ---------- feature panel (seerah book) ---------- */
.feature{
  max-width:640px;margin:56px auto 0;padding:64px 44px 52px;
  border:1px solid rgba(198,164,85,.4);
  background:rgba(247,242,233,.03);
  border-radius:150px 150px 14px 14px;
}
.feature .star{width:26px;height:26px;color:var(--gold)}
.feature h3{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3vw,2.1rem);color:var(--ivory);margin-top:18px}
.feature p{margin-top:14px;color:var(--mist)}
.feature .btn{margin-top:32px}
.pbuh{font-family:'Amiri',serif;font-style:normal}

/* ---------- glossary terms ---------- */
.terms{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;margin-top:56px;text-align:center;
}
.term{padding:30px 24px;border:1px solid rgba(198,164,85,.25);transition:border-color .35s}
.term:hover{border-color:var(--gold)}
.term .ar{font-family:'Amiri',serif;font-size:1.5rem;color:var(--gold)}
.term h3{font-size:1.3rem;color:var(--gold-soft);margin-top:6px}
.term p{margin-top:8px;font-size:.88rem;color:var(--mist)}

/* ---------- contact strip ---------- */
.contact{background:var(--ivory-2);color:var(--ink)}
.contact h2{color:var(--emerald)}
.contact p{max-width:52ch;margin:18px auto 0;color:#4E6259;letter-spacing:.03em}
.contact .btn{border-color:var(--gold-deep);color:var(--gold-deep);margin-top:36px}
.contact .btn:hover{background:var(--gold-deep);color:var(--ivory)}

/* ---------- whatsapp float ---------- */
.wa-float{
  position:fixed;right:26px;bottom:26px;z-index:60;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--night);border:1px solid var(--gold);color:var(--gold-soft);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .3s,background .3s,color .3s;text-decoration:none;
}
.wa-float:hover{transform:translateY(-3px);background:var(--gold);color:var(--night)}
.wa-float svg{width:26px;height:26px}
.wa-float .soon{
  position:absolute;top:-9px;right:-8px;padding:2px 9px;border-radius:9px;
  background:var(--gold);color:var(--night);
  font-family:'Jost',sans-serif;font-size:.5rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.wa-float.pending{pointer-events:none}
@media(max-width:640px){.wa-float{right:16px;bottom:16px;width:52px;height:52px}}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}
.reveal.d4{transition-delay:.48s}
.reveal.d5{transition-delay:.6s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-cue{animation:none}
}