/* Tasbeeh & Dikr Tracker — shared style for website pages (About, Features, Help, FAQ, Guides, Privacy, Terms) */
:root{
  --em-900:#0E4A3A; --em-700:#0f766e; --em-600:#0d9488; --gold:#C9A14A; --gold-l:#F4D27A; --gold-d:#a8862f;
  --cream:#FFFBF0; --ink:#1f2937; --muted:#5b6474; --line:rgba(201,161,74,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); line-height:1.7; font-size:16.5px;
  font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 480px at 0% 0%, rgba(201,161,74,.16), transparent 60%),
    radial-gradient(900px 520px at 100% 10%, rgba(15,118,110,.12), transparent 60%),
    linear-gradient(180deg,#FFFDF6,#FBF5E6);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
/* faint Na'l Sharif watermark behind every page */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:url('nal-sharif.png') center 58% / auto 72vh no-repeat; opacity:.06;
}
/* soft 8-point star pattern */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C9A14A' stroke-opacity='.16' stroke-width='1'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1; max-width:960px; margin:0 auto; padding:0 18px}
a{color:var(--em-700); text-underline-offset:3px}
a:hover{color:var(--em-900)}

/* top bar */
.topbar{position:sticky; top:0; z-index:5; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:rgba(255,251,240,.86); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:12px; padding-top:10px; padding-bottom:10px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--em-900); font-weight:900; letter-spacing:-.01em; flex:0 0 auto}
.brand img{width:40px; height:40px; border-radius:50%; border:2px solid var(--gold); background:#FDF2E0}
.brand span{font-size:16px; line-height:1.1}
.brand small{display:block; font-size:11px; font-weight:700; color:var(--gold-d); letter-spacing:.12em; text-transform:uppercase}
.nav{display:flex; flex-wrap:wrap; gap:4px 2px; margin-left:auto; justify-content:flex-end}
.nav a{font-size:13.5px; font-weight:800; color:var(--em-900); text-decoration:none; padding:6px 10px; border-radius:999px}
.nav a:hover{background:rgba(201,161,74,.16)}
.nav a.on{background:var(--em-900); color:#fff}
.nav a.app{background:linear-gradient(135deg,var(--gold),var(--gold-l)); color:var(--em-900)}
@media (max-width:720px){
  .topbar .wrap{flex-direction:column; align-items:stretch; gap:6px}
  .nav{justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin:0 -4px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
}

/* hero */
.hero{position:relative; overflow:hidden; margin:22px 0 18px; padding:28px 24px; border-radius:26px; color:#fff;
  background:linear-gradient(135deg,var(--em-900),var(--em-700) 60%,#115e59); border:2px solid var(--gold);
  box-shadow:0 22px 50px rgba(14,74,58,.25)}
.hero::after{content:''; position:absolute; right:-30px; bottom:-40px; width:200px; height:300px; opacity:.13;
  background:url('nal-sharif.png') center/contain no-repeat; pointer-events:none}
.hero .kicker{font-size:12px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-l)}
.hero h1{margin:4px 0 6px; font-size:clamp(1.7rem,4.6vw,2.6rem); line-height:1.12; letter-spacing:-.02em; font-weight:900}
.hero p{margin:0; max-width:640px; color:#E6F4EE}
.hero .ar{font-family:'Amiri','Noto Naskh Arabic',serif; font-size:clamp(1.25rem,3.6vw,1.7rem); color:var(--gold-l); line-height:2; margin-top:8px}
.meta{font-size:13px; color:#cfe9df; margin-top:10px}

/* content cards */
.card{position:relative; background:rgba(255,255,255,.88); border:1px solid var(--line); border-radius:22px; padding:22px 22px; margin:16px 0;
  box-shadow:0 12px 30px rgba(14,74,58,.07)}
.card h2{margin:0 0 8px; color:var(--em-900); font-size:1.3rem; line-height:1.3; letter-spacing:-.01em}
.card h2::after{content:''; display:block; width:54px; height:3px; border-radius:3px; margin-top:8px; background:linear-gradient(90deg,var(--gold),var(--gold-l))}
.card h3{margin:16px 0 4px; color:var(--em-700); font-size:1.05rem}
.card p{margin:8px 0}
.card ul,.card ol{margin:8px 0 4px; padding-left:22px}
.card li{margin:5px 0}
.ar{font-family:'Amiri','Noto Naskh Arabic',serif; direction:rtl; font-size:1.35rem; line-height:2.1; color:var(--em-900)}
.ar-block{text-align:center; padding:10px 14px; margin:12px 0; border-radius:16px; background:var(--cream); border:1px solid var(--line)}
.ar-block small{display:block; font-family:'Plus Jakarta Sans',sans-serif; direction:ltr; font-size:12px; color:var(--muted)}

/* feature grid */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px}
.feat{background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:0 10px 24px rgba(14,74,58,.06)}
.feat .ic{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:22px;
  background:linear-gradient(135deg,var(--em-900),var(--em-700)); box-shadow:inset 0 0 0 2px rgba(244,210,122,.5)}
.feat h3{margin:10px 0 4px; color:var(--em-900); font-size:1.05rem}
.feat p{margin:0; color:var(--muted); font-size:.95rem}
.feat ul{margin:6px 0 0; padding-left:18px; color:var(--muted); font-size:.93rem}
.tag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px;
  background:rgba(201,161,74,.18); color:var(--gold-d); margin-left:6px; vertical-align:2px}
.section-title{margin:30px 4px 6px; color:var(--em-900); font-size:1.5rem; letter-spacing:-.01em}
.section-sub{margin:0 4px 10px; color:var(--muted)}

/* steps */
.steps{counter-reset:s; list-style:none; padding:0 !important}
.steps li{counter-increment:s; position:relative; padding-left:44px; margin:12px 0}
.steps li::before{content:counter(s); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--em-900); color:var(--gold-l); font-weight:900; font-size:14px}

/* FAQ */
details{background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:18px; padding:4px 18px; margin:10px 0; box-shadow:0 8px 20px rgba(14,74,58,.05)}
details summary{cursor:pointer; list-style:none; font-weight:800; color:var(--em-900); padding:12px 26px 12px 0; position:relative}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+'; position:absolute; right:0; top:8px; font-size:22px; color:var(--gold-d)}
details[open] summary::after{content:'–'}
details p, details ul{margin:0 0 14px}

/* callouts & buttons */
.note{border-left:4px solid var(--gold); background:var(--cream); padding:12px 14px; border-radius:12px; margin:12px 0; color:#3f3a2a}
.btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:14px; font-weight:800; text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold-l)); color:var(--em-900); box-shadow:0 10px 22px rgba(201,161,74,.35)}
.btn.ghost{background:#fff; color:var(--em-900); border:1px solid var(--line)}
.hero .btn.ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(244,210,122,.5)}
table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; font-size:.95rem; margin:10px 0}
th{background:var(--em-900); color:#fff; text-align:left; padding:9px 12px}
td{padding:9px 12px; border-top:1px solid rgba(201,161,74,.25)}
tr:nth-child(even) td{background:rgba(255,251,240,.8)}
.toc{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px}
.toc a{font-size:13px; font-weight:800; text-decoration:none; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--em-900)}
.ad-slot{margin:18px 0; min-height:90px}

/* footer */
.foot{position:relative; z-index:1; margin-top:34px; padding:24px 0 34px; border-top:1px solid var(--line); background:rgba(255,251,240,.7)}
.foot .wrap{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:flex-start; justify-content:space-between}
.foot .cols{display:flex; flex-wrap:wrap; gap:6px 16px}
.foot a{font-weight:700; text-decoration:none; color:var(--em-900); font-size:14px}
.foot small{color:var(--muted)}
@media print{ body::before,body::after,.topbar,.foot,.ad-slot{display:none} .hero{color:#000;background:none;border:1px solid #ccc} .hero p,.meta{color:#333} }