:root {
  --ink: #12312d;
  --muted: #60736f;
  --paper: #fbfaf5;
  --surface: #ffffff;
  --green: #073b35;
  --green-2: #0c4d45;
  --gold: #d9b35f;
  --gold-soft: #f4e7bd;
  --line: #dce4df;
  --shadow: 0 18px 50px rgba(7,59,53,.10);
  --radius: 24px;
}

[data-theme="dark"] {
  --ink: #eef5f2;
  --muted: #a9bbb5;
  --paper: #071c1a;
  --surface: #0d2825;
  --green: #062b27;
  --green-2: #10483f;
  --gold-soft: #392f18;
  --line: #24413d;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.65 "DM Sans", sans-serif; }
body.welcome-open { overflow:hidden; }
a { color: inherit; }
button, input { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; background: var(--gold); color: #102c29; border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.welcome-gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:linear-gradient(rgba(2,34,30,.72),rgba(2,34,30,.88)),url('islamic-hero-art.png') center/cover;opacity:1;visibility:visible;transition:opacity .65s ease,visibility .65s ease}.welcome-gate.is-closing{opacity:0;visibility:hidden}.welcome-gate[hidden]{display:none}.welcome-gate-pattern{position:absolute;inset:0;opacity:.13;background-image:linear-gradient(30deg,#d9b35f 12%,transparent 12.5%,transparent 87%,#d9b35f 87.5%),linear-gradient(150deg,#d9b35f 12%,transparent 12.5%,transparent 87%,#d9b35f 87.5%);background-size:82px 142px;mask-image:radial-gradient(circle at center,black,transparent 68%)}.welcome-gate-card{position:relative;width:min(620px,100%);padding:56px 42px 44px;text-align:center;color:white;background:rgba(7,59,53,.83);border:1px solid rgba(217,179,95,.4);border-radius:32px;box-shadow:0 30px 90px rgba(0,0,0,.35);backdrop-filter:blur(16px)}.welcome-gate-card::before{content:"";position:absolute;inset:12px;border:1px solid rgba(217,179,95,.14);border-radius:23px;pointer-events:none}.welcome-crescent{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 20px;border-radius:50%;background:var(--gold);color:var(--green);font-size:31px;transform:rotate(-18deg)}.welcome-arabic{margin:0;color:var(--gold);font:700 clamp(34px,6vw,54px)/1.7 "Amiri",serif}.welcome-translation{max-width:440px;margin:5px auto 28px;color:#d7e3df}.welcome-button{margin:auto;gap:9px;font-size:16px}.silent-button{display:block;margin:14px auto 0;padding:6px 10px;border:0;background:transparent;color:#b9cbc5;text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-size:13px}
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.nav-wrap { max-width: 1180px; height: 78px; margin: auto; padding: 0 28px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; line-height: 1.05; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--gold); font-size: 25px; transform: rotate(-18deg); }
.brand strong, .brand small { display: block; }
.brand strong { font-family: "Amiri", serif; font-size: 22px; letter-spacing: .01em; }
.brand small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .22em; margin-top: 3px; }
nav { display: flex; gap: 26px; }
nav a, .footer-links a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; }
nav a:hover, .footer-links a:hover { color: var(--ink); }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); cursor: pointer; }
.hero { min-height: 650px; background: var(--green); color: white; overflow: hidden; position: relative; display: grid; }
.hero-art { position:absolute; inset:0; background-image:linear-gradient(90deg,#073b35 0%,rgba(7,59,53,.96) 26%,rgba(7,59,53,.62) 51%,rgba(7,59,53,.05) 82%),linear-gradient(0deg,rgba(3,30,27,.22),rgba(3,30,27,.06)),url('islamic-hero-art.png'); background-size:cover; background-position:center; }
.hero-pattern { position: absolute; inset: 0; opacity: .07; background-image: linear-gradient(30deg, #d9b35f 12%, transparent 12.5%, transparent 87%, #d9b35f 87.5%), linear-gradient(150deg, #d9b35f 12%, transparent 12.5%, transparent 87%, #d9b35f 87.5%), linear-gradient(30deg, #d9b35f 12%, transparent 12.5%, transparent 87%, #d9b35f 87.5%), linear-gradient(150deg, #d9b35f 12%, transparent 12.5%, transparent 87%, #d9b35f 87.5%); background-size: 82px 142px; background-position: 0 0,0 0,41px 71px,41px 71px; mask-image: linear-gradient(90deg, transparent 18%, black 95%); }
.hero-inner { width: min(720px, 100%); padding: 105px 8vw 110px max(28px, calc((100vw - 1180px)/2 + 28px)); z-index: 2; }
.eyebrow { margin: 0 0 22px; color: var(--gold); font: 700 21px/1.5 "Amiri", serif; letter-spacing: .08em; }
h1, h2 { margin: 0; font-family: "Amiri", serif; font-weight: 700; line-height: 1.02; }
h1 { font-size: clamp(54px, 6.2vw, 88px); letter-spacing: -.025em; max-width: 680px; }
h1 em { color: var(--gold); font-weight: inherit; }
.hero-copy { max-width: 590px; color: #d5e2de; font-size: 18px; margin: 26px 0 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border-radius: 999px; text-decoration: none; font-weight: 700; border: 0; cursor: pointer; }
.button-gold { background: var(--gold); color: #15322e; box-shadow: 0 10px 30px rgba(217,179,95,.2); }
.button-ghost { border: 1px solid rgba(255,255,255,.25); color: white; }
.button-dark { background: var(--green); color: white; }
.section { max-width: 1180px; margin: auto; padding: 100px 28px; }
.today-section { position:relative; }
.today-section::before { content:""; position:absolute; left:50%; top:22px; width:110px; height:32px; transform:translateX(-50%); opacity:.38; background:radial-gradient(circle at 50% 100%,transparent 13px,var(--gold) 14px 15px,transparent 16px),linear-gradient(30deg,transparent 44%,var(--gold) 45% 48%,transparent 49%) 0 0/18px 18px; mask-image:linear-gradient(90deg,transparent,black 24% 76%,transparent); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.kicker { color: #9a762e; text-transform: uppercase; letter-spacing: .17em; font-size: 12px; font-weight: 700; margin: 0 0 9px; }
h2 { font-size: clamp(42px, 5vw, 62px); }
.date-pill, .live-badge { padding: 8px 14px; background: var(--gold-soft); color: color-mix(in srgb, var(--ink) 86%, #9a762e); border-radius: 999px; font-size: 13px; font-weight: 700; }
.guidance-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 20px; }
.ayah-card, .hadith-card { position: relative; overflow: hidden; min-height: 360px; border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow); }
.ayah-card { background: var(--surface); border: 1px solid var(--line); }
.hadith-card { color: white; background: var(--green); }
.card-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; }
.hadith-card .card-label { color: #c3d3ce; }
.arabic { margin: 44px 0 24px; color: var(--ink); font: 700 clamp(30px, 4vw, 45px)/1.8 "Amiri", serif; }
.translation { font-size: 18px; max-width: 670px; }
blockquote { margin: 48px 0 25px; font-family: "Amiri", serif; font-size: 28px; line-height: 1.45; }
article footer { color: var(--muted); font-weight: 700; font-size: 13px; }
.hadith-card footer { color: #b6c9c3; }.ornament { position:absolute; right:-20px; bottom:-35px; color:rgba(217,179,95,.10); font:700 130px/1 "Amiri",serif; transform:rotate(-8deg); }
.audio-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:74px;align-items:center}.audio-copy>p:last-child{color:var(--muted);font-size:18px;max-width:480px}.audio-card{position:relative;overflow:hidden;background:var(--green);color:white;border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}.audio-card::after{content:"☾";position:absolute;right:-20px;top:-50px;color:rgba(217,179,95,.08);font-size:190px;transform:rotate(-18deg);pointer-events:none}.audio-topline{display:flex;align-items:center;gap:14px;margin-bottom:28px;position:relative;z-index:1}.audio-topline small,.audio-topline strong{display:block}.audio-topline small{color:#b9cbc5}.audio-topline strong{font:700 25px/1.25 "Amiri",serif;margin-top:2px}.audio-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:var(--green);font-size:22px}.audio-card label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#c7d6d2;margin-bottom:7px}.audio-card select{width:100%;min-height:50px;border-radius:12px;padding:0 14px;background:#fff;color:#15322e;border:0;font:600 15px "DM Sans",sans-serif;position:relative;z-index:1}.audio-card audio{width:100%;margin-top:20px;accent-color:var(--gold);position:relative;z-index:1}.audio-actions{display:flex;justify-content:space-between;gap:10px;margin-top:12px}.audio-actions button{background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:white;padding:9px 15px;cursor:pointer}.audio-actions button:disabled{opacity:.4;cursor:not-allowed}.audio-status{color:#afc2bc;font-size:12px;margin:14px 0 0}
.prayer-section { max-width: none; padding-left: max(28px, calc((100vw - 1180px)/2 + 28px)); padding-right: max(28px, calc((100vw - 1180px)/2 + 28px)); display: grid; grid-template-columns: .75fr 1.25fr; gap: 74px; align-items: center; background: color-mix(in srgb, var(--gold-soft) 55%, var(--paper)); }
.prayer-intro > p:not(.kicker):not(.status) { color: var(--muted); max-width: 430px; }
.location-form { margin-top: 28px; }.location-form label { display:block; font-size:13px; font-weight:700; margin-bottom:7px; }.input-row { display:flex; gap:8px; max-width:430px; }.input-row input { width:100%; min-width:0; border:1px solid var(--line); border-radius:999px; padding:0 18px; color:var(--ink); background:var(--surface); }.input-row input:focus, .search-box input:focus { outline: 3px solid color-mix(in srgb, var(--gold) 45%, transparent); outline-offset: 2px; }.status { font-size:13px; color:var(--muted); }
.prayer-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }.prayer-card-head{display:flex;justify-content:space-between;align-items:start;padding-bottom:20px;border-bottom:1px solid var(--line)}.prayer-card-head span,.prayer-card-head strong{display:block}.prayer-card-head span{font-size:13px;color:var(--muted)}.prayer-card-head strong{margin-top:4px}.live-badge{color:var(--ink)!important}.prayer-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin:20px 0}.prayer-item{display:flex;flex-direction:column;gap:5px;background:var(--surface);padding:18px}.prayer-item span{color:var(--muted);font-size:13px}.prayer-item strong{font-size:21px}.prayer-item.is-next{background:var(--green);color:white;border-radius:10px}.prayer-item.is-next span{color:#c6d5d1}.method-note{margin:0;color:var(--muted);font-size:12px;text-align:right}
.quran-heading { align-items: center; }.search-box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);padding:0 16px;border-radius:999px;min-height:48px}.search-box input{border:0;outline:0;background:transparent;color:var(--ink);width:190px}.continue-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;background:var(--gold-soft);border-radius:18px;margin-bottom:20px}.continue-card span,.continue-card strong{display:block}.continue-card span{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.juz-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.juz-card{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;transition:transform .2s,box-shadow .2s,border-color .2s}.juz-card:hover,.juz-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold)}.juz-number{width:38px;height:38px;display:grid;place-items:center;background:var(--gold-soft);border-radius:50%;font-weight:700;color:var(--ink)}.juz-card h3{font:700 22px/1.2 "Amiri",serif;margin:20px 0 2px}.juz-card p{color:var(--muted);font-size:12px;margin:0}.juz-card .open-label{display:block;margin-top:15px;font-size:12px;font-weight:700;color:#9a762e}.empty-state{padding:32px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:18px}
.about-section{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;border-top:1px solid var(--line)}.about-copy>p:last-child{color:var(--muted);font-size:18px}.about-quote{position:relative;background:var(--green);color:white;border-radius:var(--radius);padding:45px}.about-quote p{font:700 28px/1.45 "Amiri",serif;margin:12px 0}.about-quote small{color:#b8cbc5}.quote-mark{color:var(--gold);font:700 72px/1 "Amiri",serif}
.site-footer{max-width:1180px;margin:auto;padding:48px 28px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}.footer-brand{display:flex;align-items:center;gap:14px}.footer-brand strong{font-family:"Amiri",serif;font-size:20px}.footer-brand p{margin:0;color:var(--muted);font-size:13px}.footer-links{display:flex;gap:22px}.copyright{grid-column:1/-1;margin:0;color:var(--muted);font-size:12px}
@media (max-width:900px){.hero{min-height:auto}.hero-inner{padding-top:80px;padding-bottom:84px}.hero-art{background-image:linear-gradient(90deg,#073b35 0%,rgba(7,59,53,.91) 45%,rgba(7,59,53,.28) 100%),linear-gradient(0deg,rgba(3,30,27,.25),rgba(3,30,27,.08)),url('islamic-hero-art.png');background-position:58% center}.guidance-grid,.audio-section,.prayer-section,.about-section{grid-template-columns:1fr}.audio-section,.prayer-section{gap:40px}.juz-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.nav-wrap{height:68px;padding:0 18px}nav{display:none}.hero-inner{padding:64px 20px 75px}.hero-copy{font-size:16px}.hero-art{background-image:linear-gradient(90deg,rgba(7,59,53,.96),rgba(7,59,53,.68)),url('islamic-hero-art.png');background-position:64% center}.section{padding:72px 20px}.section-heading{align-items:start;flex-direction:column}.guidance-grid{gap:14px}.ayah-card,.hadith-card{padding:25px;min-height:320px}.arabic{margin-top:30px}.prayer-section{padding-left:20px;padding-right:20px}.prayer-list{grid-template-columns:repeat(2,1fr)}.quran-heading{align-items:stretch}.search-box{width:100%}.search-box input{width:100%}.juz-grid{grid-template-columns:repeat(2,1fr)}.juz-card{padding:16px}.continue-card{align-items:start;flex-direction:column}.about-section{gap:34px}.about-quote{padding:30px}.site-footer{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.copyright{grid-column:auto}}
@media (max-width:520px){.welcome-gate{padding:14px}.welcome-gate-card{padding:40px 22px 34px;border-radius:24px}.welcome-arabic{font-size:35px}.welcome-translation{font-size:14px}.welcome-button{width:100%}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.juz-card{transition:none}}