:root{
  --navy-950:#03060d;
  --navy-900:#060b18;
  --navy-800:#0a1428;
  --navy-700:#0d1c33;
  --emerald:#1c8a6b;
  --emerald-soft:#2fae87;
  --gold:#d4af37;
  --gold-soft:#e9cf7a;
  --cream:#f4ecda;
  --cream-dim:#c9c2ad;
  --danger:#c96a4d;
  --radius:20px;
  --shadow-lg:0 20px 60px rgba(0,0,0,.45);
  --font-display:'Poppins', -apple-system, 'Segoe UI', sans-serif;
  --font-arabic:'Amiri', serif;
  --font-body:'Manrope', -apple-system, 'Segoe UI', sans-serif;
}

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

body{
  min-height:100vh;
  background:var(--navy-950);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:400;
  position:relative;
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- animated night sky ---------- */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% -10%, var(--navy-800) 0%, var(--navy-900) 45%, var(--navy-950) 100%);
}
.moon-glow{
  position:absolute; top:-120px; right:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(233,207,122,.28) 0%, rgba(233,207,122,.08) 40%, transparent 70%);
  filter:blur(10px);
  transition:opacity .4s ease;
}
.stars,.stars2{position:absolute;inset:0;background-repeat:repeat;opacity:.6;}
.stars{
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 120px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, #fff, transparent),
    radial-gradient(1px 1px at 210px 190px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 260px 20px, #fff, transparent),
    radial-gradient(1px 1px at 320px 140px, #fff, transparent);
  background-size:360px 220px;
  animation:drift 90s linear infinite;
}
.stars2{
  background-image:
    radial-gradient(1px 1px at 40px 80px, #e9cf7a, transparent),
    radial-gradient(1px 1px at 140px 40px, #fff, transparent),
    radial-gradient(1px 1px at 240px 160px, #fff, transparent),
    radial-gradient(1px 1px at 300px 90px, #e9cf7a, transparent);
  background-size:340px 260px;
  opacity:.4;
  animation:drift 140s linear infinite reverse;
}
@keyframes drift{from{transform:translateY(0);}to{transform:translateY(-600px);}}

/* falling / shooting stars */
.shooting-star{
  position:absolute;
  top:-10%;
  width:2px; height:2px;
  border-radius:50%;
  background:var(--cream);
  box-shadow:0 0 6px 1px rgba(244,236,218,.9);
  opacity:0;
  animation-name:fall;
  animation-timing-function:ease-in;
  animation-iteration-count:infinite;
  transition:opacity .3s ease;
}

/* keep the sky calm and distraction-free while the alarm is ringing */
body.alarm-ringing .moon-glow,
body.alarm-ringing .shooting-star{
  opacity:0 !important;
  animation-play-state:paused;
}
.shooting-star::before{
  content:"";
  position:absolute;
  top:1px; right:1px;
  width:90px; height:1px;
  background:linear-gradient(90deg, rgba(244,236,218,.85), transparent);
  transform:rotate(180deg) translateY(-.5px);
  transform-origin:right center;
}
.ss-1{left:8%;  animation-duration:6.5s; animation-delay:1s;}
.ss-2{left:42%; animation-duration:8s;   animation-delay:4.5s;}
.ss-3{left:70%; animation-duration:7s;   animation-delay:8.5s;}
.ss-4{left:85%; animation-duration:9.5s; animation-delay:2.5s;}
@keyframes fall{
  0%{ transform:translate(0,0) rotate(-35deg); opacity:0; }
  4%{ opacity:1; }
  16%{ transform:translate(-220px,320px) rotate(-35deg); opacity:0; }
  100%{ transform:translate(-220px,320px) rotate(-35deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .shooting-star{animation:none;display:none;}
}

/* ---------- layout ---------- */
.app{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:32px 18px 60px;}

.site-header{text-align:center;margin-bottom:28px;}
.brand-ar{display:block;font-family:var(--font-arabic);font-size:1.3rem;color:var(--gold-soft);letter-spacing:1.5px;margin-bottom:0;}
.tagline{color:var(--cream-dim);font-size:.95rem;margin:6px 0 0;letter-spacing:.5px;}

/* ---------- hero banner: "last third of the night" themed ---------- */
.hero-banner{
  position:relative;
  overflow:hidden;
  padding:34px 26px 22px;
  margin:0 0 22px;
  border-radius:18px;
  border:1px solid rgba(212,175,55,.3);
  background:
    radial-gradient(130% 80% at 50% -10%, rgba(28,60,95,.95) 0%, rgba(15,29,56,.96) 42%, rgba(6,11,22,.98) 100%),
    linear-gradient(180deg, transparent 45%, rgba(212,175,55,.16) 100%);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(212,175,55,.06), 0 0 46px rgba(212,175,55,.14);
  animation:hero-pulse 6s ease-in-out infinite;
}
@keyframes hero-pulse{
  0%,100%{ box-shadow:var(--shadow-lg), 0 0 0 1px rgba(212,175,55,.06), 0 0 46px rgba(212,175,55,.14); }
  50%{ box-shadow:var(--shadow-lg), 0 0 0 1px rgba(212,175,55,.1), 0 0 60px rgba(212,175,55,.22); }
}
.hero-pattern{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='1'%3E%3Crect x='14' y='14' width='28' height='28' transform='rotate(45 28 28)'/%3E%3Crect x='14' y='14' width='28' height='28'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.07;
  pointer-events:none;
}
.hero-banner-glow{
  position:absolute;
  left:50%; bottom:-70%;
  width:300px; height:300px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(212,175,55,.26) 0%, rgba(28,138,107,.12) 45%, transparent 72%);
  filter:blur(6px);
  pointer-events:none;
}
.hero-corner{position:absolute;width:30px;height:30px;pointer-events:none;}
.corner-tl{top:10px;left:10px;}
.corner-tr{top:10px;right:10px;transform:scaleX(-1);}
.corner-bl{bottom:10px;left:10px;transform:scaleY(-1);}
.corner-br{bottom:10px;right:10px;transform:scale(-1,-1);}

.hero-ornament{position:relative;display:flex;justify-content:center;align-items:center;margin-bottom:14px;padding:6px 0;}
.hero-ornament-icon{
  position:relative;
  width:72px;height:72px;
  display:block;
  filter:drop-shadow(0 0 6px rgba(212,175,55,.55)) drop-shadow(0 0 2px rgba(212,175,55,.5));
}
.hero-ornament-ring{
  position:absolute;
  width:80px;height:80px;
  border-radius:22px;
  border:1px solid rgba(212,175,55,.3);
  animation:ring-pulse 4s ease-in-out infinite;
}
@keyframes ring-pulse{
  0%,100%{ transform:scale(.97); opacity:.5; }
  50%{ transform:scale(1.02); opacity:0; }
}
.hero-eyebrow{
  position:relative;
  display:inline-block;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--emerald-soft);
  margin-bottom:8px;
}
.hero-title{
  position:relative;
  font-family:var(--font-display);
  font-size:2.15rem;
  line-height:1.18;
  margin:0;
  font-weight:700;
  letter-spacing:.3px;
  background:linear-gradient(180deg,var(--cream) 0%, var(--gold-soft) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(212,175,55,.25);
}
.hero-banner .brand-ar{
  position:relative;
  margin-top:8px;
  font-size:1.15rem;
  opacity:.9;
}

.hero-quote{
  position:relative;
  max-width:420px;
  margin:16px auto 0;
  padding:14px 18px 12px;
  border-top:1px solid rgba(212,175,55,.22);
  border-bottom:1px solid rgba(212,175,55,.22);
}
.hero-quote-mark{
  display:block;
  font-family:var(--font-display);
  font-size:1.8rem;
  line-height:1;
  color:var(--gold);
  opacity:.8;
  margin-bottom:-4px;
}
.hero-quote p{
  font-family:var(--font-body);
  font-weight:500;
  font-size:1.02rem;
  line-height:1.5;
  color:var(--cream);
  margin:0 0 6px;
}
.hero-quote-attr{
  display:block;
  font-size:.78rem;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--emerald-soft);
}
.hero-quote-attr em{font-style:normal;text-transform:none;opacity:.85;}

main{display:flex;flex-direction:column;gap:20px;}

.card{
  background:linear-gradient(180deg, rgba(21,38,72,.75), rgba(10,20,40,.75));
  border:1px solid rgba(212,175,55,.18);
  border-radius:var(--radius);
  padding:26px 24px;
  box-shadow:var(--shadow-lg), 0 0 30px rgba(212,175,55,.09), 0 0 60px rgba(28,138,107,.06);
  backdrop-filter:blur(6px);
  position:relative;
  transition:box-shadow .35s ease, border-color .35s ease;
}
.card:hover{
  border-color:rgba(212,175,55,.32);
  box-shadow:var(--shadow-lg), 0 0 40px rgba(212,175,55,.16), 0 0 70px rgba(28,138,107,.1);
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;
  background:linear-gradient(135deg, rgba(212,175,55,.35), transparent 30%, transparent 70%, rgba(212,175,55,.2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.card-head h2{font-family:var(--font-display);font-size:1.5rem;margin:0;font-weight:600;color:var(--cream);}

/* ---------- hero card ---------- */
.hero-card{text-align:center;}
.hero-top{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:16px;}
.hero-clock #clock-time{font-family:var(--font-display);font-size:3rem;font-weight:600;color:var(--gold-soft);letter-spacing:2px;display:block;}
.hero-clock #clock-date{font-size:.9rem;color:var(--cream-dim);}
.hero-hijri{font-family:var(--font-arabic);font-size:1.05rem;color:var(--emerald-soft);margin-top:2px;}

.night-status{margin:18px 0 22px;}
.status-badge{
  display:inline-block;
  padding:10px 22px;
  border-radius:999px;
  font-size:1rem;
  font-weight:500;
  background:rgba(28,138,107,.18);
  border:1px solid rgba(47,174,135,.45);
  color:var(--emerald-soft);
  letter-spacing:.3px;
}
.status-badge.is-last-third{
  background:rgba(212,175,55,.18);
  border-color:rgba(212,175,55,.55);
  color:var(--gold-soft);
  box-shadow:0 0 24px rgba(212,175,55,.25);
}
.status-countdown{margin-top:10px;font-size:1.15rem;color:var(--cream);font-family:var(--font-display);}
.status-countdown b{color:var(--gold-soft);font-weight:600;}

/* thirds progress bar */
.thirds-bar{
  position:relative;
  display:flex;
  height:34px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(212,175,55,.25);
}
.third{flex:1;display:flex;align-items:center;justify-content:center;font-size:.68rem;letter-spacing:.4px;text-transform:uppercase;color:rgba(244,236,218,.75);}
.seg-first{background:rgba(21,38,72,.9);}
.seg-middle{background:rgba(28,60,90,.9);}
.seg-last{background:linear-gradient(90deg, rgba(28,138,107,.55), rgba(212,175,55,.55));color:var(--navy-950);font-weight:600;}
.night-marker{
  position:absolute; top:-4px; width:2px; height:42px;
  background:var(--gold); left:0%;
  box-shadow:0 0 8px 2px rgba(212,175,55,.8);
  transition:left .6s ease;
}
.night-marker::after{
  content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 2px rgba(212,175,55,.9);
}
.thirds-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:.75rem;color:var(--cream-dim);}

/* ---------- last third card ---------- */
.last-third-card{text-align:center;}
.ornament{color:var(--gold);font-size:1.2rem;margin-bottom:4px;}
.last-third-card h2{font-family:var(--font-display);font-size:1.9rem;margin:0 0 4px;font-weight:600;color:var(--gold-soft);}
.subtle{color:var(--cream-dim);font-size:.9rem;margin:0 0 20px;}
.lt-window{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;}
.lt-time{display:flex;flex-direction:column;align-items:center;}
.lt-label{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--cream-dim);margin-bottom:4px;}
.lt-value{font-family:var(--font-display);font-size:2.4rem;font-weight:600;color:var(--cream);}
.lt-sep{font-size:1.4rem;color:var(--gold);}
.lt-duration{margin-top:14px;font-size:.9rem;color:var(--emerald-soft);}

/* ---------- prayers grid ---------- */
.loc-pill{font-size:.75rem;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.3);color:var(--gold-soft);padding:5px 12px;border-radius:999px;}
.prayers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.prayer{
  background:rgba(6,11,22,.5);
  border:1px solid rgba(212,175,55,.12);
  border-radius:14px;
  padding:14px 8px;
  text-align:center;
  transition:border-color .3s, background .3s;
}
.prayer.active{
  border-color:rgba(212,175,55,.6);
  background:rgba(212,175,55,.08);
  box-shadow:0 0 18px rgba(212,175,55,.12);
}
.p-name{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.6px;color:var(--cream-dim);margin-bottom:6px;}
.p-time{display:block;font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:var(--cream);}
.source-note{margin-top:14px;font-size:.78rem;color:var(--cream-dim);text-align:center;}

/* ---------- motivation card ---------- */
.motivation-card{text-align:center;}
.motivation-accordion{border:none;background:none;margin:0;border-radius:0;}
.motivation-accordion summary{
  justify-content:center;
  gap:12px;
  padding:0;
  text-align:center;
}
.motivation-accordion summary .ornament{margin-bottom:0;font-size:1.1rem;}
.motivation-accordion[open] summary{margin-bottom:20px;}
.motivation-body{padding:0;text-align:center;}
.motivation-title{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:600;
  color:var(--gold-soft);
  letter-spacing:.5px;
}
.quote-ar{
  font-family:var(--font-arabic);
  font-size:1.35rem;
  line-height:2.1;
  color:var(--cream);
  margin:0 0 18px;
  direction:rtl;
}
.quote-en{
  font-family:var(--font-body);
  font-weight:500;
  font-size:1.1rem;
  line-height:1.6;
  color:rgba(244,236,218,.92);
  margin:0 auto 10px;
  max-width:520px;
  padding:0 4px;
}
.quote-source{
  font-size:.78rem;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--emerald-soft);
  margin:0 0 6px;
}
.quote-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:22px 0 18px;
  color:var(--gold);
}
.quote-divider::before,.quote-divider::after{
  content:"";
  flex:1;
  max-width:120px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.4), transparent);
}
.quote-shafii{color:var(--gold-soft);}

/* ---------- learn / accordion card ---------- */
details:not([open]) > *:not(summary){display:none;}
.accordion{
  border:1px solid rgba(212,175,55,.16);
  border-radius:14px;
  background:rgba(6,11,22,.4);
  margin-bottom:12px;
  overflow:hidden;
}
.accordion:last-child{margin-bottom:0;}
.accordion summary{
  list-style:none;
  cursor:pointer;
  padding:14px 18px;
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
  color:var(--gold-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  user-select:none;
}
.accordion summary::-webkit-details-marker{display:none;}
.chev{transition:transform .25s;color:var(--emerald-soft);font-size:.9rem;}
.accordion[open] .chev{transform:rotate(180deg);}
.accordion-body{padding:0 20px 20px;color:var(--cream);font-size:.92rem;}
.accordion-body p{margin:0 0 12px;color:rgba(244,236,218,.9);}
.accordion-body .steps{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:8px;}
.accordion-body .steps li{color:rgba(244,236,218,.9);}
.accordion-body blockquote{
  margin:0 0 14px;
  padding:10px 16px;
  border-left:3px solid var(--gold);
  background:rgba(212,175,55,.08);
  font-family:var(--font-body);
  font-weight:600;
  color:var(--gold-soft);
  font-size:1.05rem;
  border-radius:0 8px 8px 0;
}
.source-attr{font-size:.75rem;color:var(--cream-dim);margin:0;}
.source-attr a{color:var(--emerald-soft);}

/* ---------- settings card ---------- */
.link-btn{
  background:none;border:1px solid rgba(212,175,55,.35);color:var(--gold-soft);
  padding:6px 14px;border-radius:999px;font-size:.8rem;cursor:pointer;font-family:var(--font-body);
  transition:background .2s;
}
.link-btn:hover{background:rgba(212,175,55,.12);}
.settings-body{display:flex;flex-direction:column;gap:16px;}
.settings-body.hidden{display:none;}

.mode-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.mode-tab{
  flex:1;min-width:120px;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(212,175,55,.2);
  background:rgba(6,11,22,.4);
  color:var(--cream-dim);
  font-family:var(--font-body);
  font-size:.82rem;
  cursor:pointer;
  transition:all .2s;
}
.mode-tab.active{
  background:rgba(28,138,107,.2);
  border-color:rgba(47,174,135,.5);
  color:var(--cream);
}

.mode-panel.hidden{display:none;}
.hint{font-size:.85rem;color:var(--cream-dim);margin:0 0 10px;}
.field-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.field-row input, .field-row label{flex:1;min-width:140px;}
label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--cream-dim);}

input[type="text"], input[type="time"], select{
  background:rgba(6,11,22,.6);
  border:1px solid rgba(212,175,55,.25);
  color:var(--cream);
  border-radius:10px;
  padding:10px 12px;
  font-family:var(--font-body);
  font-size:.9rem;
  outline:none;
  width:100%;
}
input:focus, select:focus{border-color:var(--gold);}

.btn-primary{
  background:linear-gradient(135deg, var(--emerald), var(--emerald-soft));
  color:#06140f;
  border:none;
  padding:11px 20px;
  border-radius:10px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:.9rem;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
  box-shadow:0 8px 20px rgba(47,174,135,.25);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(47,174,135,.35);}
.btn-primary:active{transform:translateY(0);}

.method-row{border-top:1px solid rgba(212,175,55,.12);padding-top:14px;}
.method-row select{cursor:pointer;}

.status-line{font-size:.82rem;color:var(--gold-soft);min-height:1.2em;margin:0;}

/* ---------- alarm settings ---------- */
.alarm-row{border-top:1px solid rgba(212,175,55,.12);padding-top:14px;display:flex;flex-direction:column;gap:10px;}
.alarm-head{display:flex;align-items:center;justify-content:space-between;}
.alarm-head h3{margin:0;font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--cream);}
.alarm-perm{font-size:.7rem;padding:3px 10px;border-radius:999px;color:var(--cream-dim);border:1px solid rgba(212,175,55,.2);}
.alarm-perm.granted{color:var(--emerald-soft);border-color:rgba(47,174,135,.4);}
.alarm-perm.denied{color:var(--danger);border-color:rgba(201,106,77,.4);}
.alarm-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.88rem;
  color:var(--cream);
  cursor:pointer;
}
.alarm-check input[type="checkbox"]{
  width:18px;height:18px;
  accent-color:var(--emerald);
  cursor:pointer;
}

/* ---------- alarm firing overlay ---------- */
.alarm-overlay{
  position:fixed; inset:0; z-index:50;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  background:rgba(3,6,13,.88);
  backdrop-filter:blur(4px);
}
.alarm-overlay.active{display:flex;}
.alarm-modal{
  max-width:360px;
  width:100%;
  text-align:center;
  padding:36px 28px;
  border-radius:22px;
  border:1px solid rgba(212,175,55,.4);
  background:linear-gradient(180deg, rgba(21,38,72,.97), rgba(10,20,40,.98));
  box-shadow:0 0 80px rgba(212,175,55,.35), var(--shadow-lg);
  animation:alarm-pop .35s ease;
}
@keyframes alarm-pop{from{transform:scale(.9);opacity:0;}to{transform:scale(1);opacity:1;}}
.alarm-icon{
  font-size:2.6rem;
  color:var(--gold-soft);
  margin-bottom:10px;
  animation:alarm-ring 1s ease-in-out infinite;
  display:inline-block;
}
@keyframes alarm-ring{
  0%,100%{transform:rotate(0);}
  20%{transform:rotate(-14deg);}
  40%{transform:rotate(12deg);}
  60%{transform:rotate(-8deg);}
  80%{transform:rotate(6deg);}
}
.alarm-modal h2{font-family:var(--font-display);font-size:1.7rem;margin:0 0 10px;color:var(--gold-soft);}
.alarm-modal p{color:var(--cream);font-size:1rem;margin:0 0 22px;line-height:1.5;}
.alarm-modal .btn-primary{width:100%;padding:13px;font-size:1rem;}
.install-icon{animation:none;}
.install-message-steps{
  text-align:left;
  margin:0 0 22px;
  padding-left:20px;
  color:var(--cream);
  font-size:.95rem;
  line-height:1.7;
}

/* ---------- install banner ---------- */
.install-banner{
  max-width:760px;
  margin:0 auto 20px;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid rgba(212,175,55,.28);
  background:linear-gradient(135deg, rgba(28,138,107,.16), rgba(10,20,40,.6));
  box-shadow:0 0 26px rgba(212,175,55,.1);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.install-banner.hidden{display:none;}
.install-banner-text{display:flex;flex-direction:column;gap:2px;}
.install-banner-text strong{font-family:var(--font-display);font-size:1.05rem;color:var(--gold-soft);}
.install-banner-text span{font-size:.82rem;color:var(--cream-dim);}
.install-banner .btn-primary{white-space:nowrap;padding:10px 20px;}

#btn-install-app{
  position:relative;
  background:linear-gradient(135deg, var(--gold), var(--gold-soft));
  color:#241a04;
  font-weight:700;
  box-shadow:0 0 0 0 rgba(212,175,55,.6), 0 8px 22px rgba(212,175,55,.3);
  animation:install-glow 2.2s ease-in-out infinite;
}
#btn-install-app:hover{
  transform:translateY(-1px) scale(1.02);
}
@keyframes install-glow{
  0%,100%{ box-shadow:0 0 0 0 rgba(212,175,55,.5), 0 8px 22px rgba(212,175,55,.3); }
  50%{ box-shadow:0 0 0 10px rgba(212,175,55,0), 0 8px 28px rgba(212,175,55,.45); }
}

/* ---------- footer ---------- */
.site-footer{text-align:center;margin-top:34px;color:var(--cream-dim);}
.site-footer p{font-family:var(--font-display);font-style:italic;font-size:1rem;margin:0 0 6px;color:var(--emerald-soft);}
.fine-print{font-family:var(--font-body);font-style:normal;font-size:.72rem;color:rgba(201,194,173,.6);}

/* ---------- responsive ---------- */
@media (max-width:520px){
  .hero-title{font-size:1.4rem;white-space:normal;}
  .hero-quote p{font-size:.95rem;}
  .hero-clock #clock-time{font-size:2.3rem;}
  .lt-value{font-size:1.8rem;}
  .prayers-grid{grid-template-columns:repeat(2,1fr);}
}