:root{
  --bg:#f5f0e6;
  --surface:#fffdf7;
  --surface-2:#f7f0e0;
  --surface-3:#efe5cf;
  --ink:#17130d;
  --text:#2d2822;
  --muted:#71665a;
  --line:rgba(23,19,13,.12);
  --brand:#c79d34;
  --brand-2:#e2bc58;
  --brand-soft:rgba(199,157,52,.12);
  --danger:#8f3d2e;
  --shadow:0 24px 60px rgba(23,19,13,.1);
  --shadow-soft:0 14px 32px rgba(23,19,13,.06);
  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:16px;
  --container:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Manrope,system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(199,157,52,.08), transparent 28%),
    linear-gradient(180deg, #faf6ee 0%, var(--bg) 100%);
}
a{text-decoration:none;color:inherit}
img,video{display:block;max-width:100%}
.container{width:min(calc(100% - 32px), var(--container));margin:0 auto}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border:1px solid rgba(199,157,52,.28);
  border-radius:999px;
  background:rgba(255,253,247,.92);
  color:#8a6818;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(180deg, #efcb67, #c79d34);
  box-shadow:0 0 0 6px rgba(199,157,52,.12);
}

.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:800;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  color:#17130d;
  background:linear-gradient(135deg, #b68a20, var(--brand-2));
  box-shadow:0 18px 30px rgba(182,138,32,.22);
}
.btn-secondary{
  color:var(--ink);
  background:#fffdf7;
  border-color:var(--line);
  box-shadow:var(--shadow-soft);
}

header{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(14px);
  background:rgba(13,11,9,.96);
  border-bottom:1px solid rgba(255,247,232,.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.brand-mark{
  width:78px;
  height:78px;
  padding:0;
  border-radius:0;
  overflow:hidden;
  flex:0 0 auto;
  box-shadow:none;
  border:none;
  background:transparent;
}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand-copy{min-width:0}
.brand-title{
  display:block;
  color:#fff7ea;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:700;
  letter-spacing:.02em;
  font-size:1.03rem;
}
.brand-subtitle{
  display:block;
  color:rgba(255,247,234,.72);
  font-size:.85rem;
}
.site-prayer-header{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:52px;
  padding:10px 14px;
  border-radius:18px;
  border:1px solid rgba(255,247,232,.12);
  background:rgba(255,247,232,.06);
  color:#fff7ea;
  min-width:220px;
}
.site-prayer-header strong{
  display:block;
  color:#ffe8ae;
  font-size:.88rem;
  line-height:1.2;
}
.site-prayer-header span{
  display:block;
  color:rgba(255,247,234,.72);
  font-size:.8rem;
  line-height:1.45;
}
nav ul{
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
}
nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  border-radius:999px;
  color:rgba(255,247,234,.9);
  font-weight:700;
}
nav a:hover,
nav a.active{
  color:#ffe8ae;
  background:rgba(199,157,52,.14);
}
.menu-btn{
  display:none;
  min-height:46px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,247,232,.16);
  background:rgba(255,247,232,.06);
  color:#fff7ea;
  font-weight:800;
}
.mobile{
  display:none;
  position:absolute;
  top:84px;
  left:16px;
  right:16px;
  padding:10px;
  border-radius:22px;
  background:#171310;
  border:1px solid rgba(255,247,232,.12);
  box-shadow:var(--shadow);
}
.mobile a{
  display:block;
  padding:13px 14px;
  border-radius:14px;
  font-weight:700;
  color:#fff7ea;
}
.mobile a:hover{background:rgba(199,157,52,.14);color:#ffe8ae}

.hero{padding:40px 0 28px}
.hero-shell,
.panel,
.legal-card,
.video-card,
.doc-card,
.notice-card{
  border:1px solid rgba(199,157,52,.14);
  background:rgba(255,253,247,.98);
  box-shadow:var(--shadow-soft);
}
.hero-shell{
  position:relative;
  overflow:hidden;
  padding:38px;
  border-radius:32px;
  background:
    radial-gradient(circle at top right, rgba(199,157,52,.18), transparent 28%),
    linear-gradient(135deg, #181511, #0d0b09 62%);
  box-shadow:var(--shadow);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);
  gap:28px;
  align-items:center;
}
.hero h1,
.section-title,
.legal-title{
  margin:0;
  color:var(--ink);
  font-family:"Cormorant Garamond", Georgia, serif;
  line-height:.95;
  letter-spacing:-.03em;
}
.hero h1{
  font-size:clamp(3rem, 6vw, 5rem);
  margin-top:18px;
  max-width:10ch;
  color:#fff7ea;
}
.hero p,
.section-copy,
.legal-card p,
.notice-card p,
.doc-card p,
.manual-list li,
.legal-list li{
  color:var(--muted);
  line-height:1.8;
}
.hero p{max-width:60ch;margin:20px 0 0;color:rgba(255,247,234,.74)}
.hero-panel{
  padding:26px;
  border-radius:28px;
  background:linear-gradient(180deg, #fff8e8, #f2e1b2);
  color:#201912;
  box-shadow:0 24px 50px rgba(199,157,52,.18);
}
.hero-panel h2{
  margin:12px 0 0;
  color:#18130d;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:2.3rem;
  line-height:1;
  letter-spacing:-.03em;
}
.hero-panel p{margin:14px 0 0;color:#5c4a26}
.mini-list{display:grid;gap:12px;margin:22px 0 0}
.mini-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.44);
  border:1px solid rgba(182,138,32,.12);
}
.mini-icon{
  width:34px;
  height:34px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg, #b68a20, #e5bf56);
  color:#17140d;
  font-weight:800;
}
.mini-item strong{display:block;color:#18130d}
.mini-item span{display:block;margin-top:3px;color:#6a5630;font-size:.92rem}

main section{padding:32px 0}
.section-head{max-width:760px;margin-bottom:28px}
.section-title{font-size:clamp(2.2rem, 4vw, 3.5rem);margin-top:14px}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

.panel,
.doc-card,
.video-card,
.notice-card,
.legal-card{
  border-radius:28px;
  padding:26px;
}
.feature-card{
  border-radius:24px;
  padding:22px;
  border:1px solid rgba(199,157,52,.14);
  background:rgba(255,253,247,.98);
  box-shadow:var(--shadow-soft);
}
.feature-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(182,138,32,.14), rgba(229,191,86,.28));
  color:#7a5a10;
  font-size:1rem;
  font-weight:800;
}
.feature-card h3,
.doc-card h3,
.notice-card h3,
.legal-card h2,
.legal-card h3,
.panel h3{
  margin:18px 0 8px;
  color:var(--ink);
  font-family:"Cormorant Garamond", Georgia, serif;
}
.feature-card p,
.doc-card p,
.notice-card p,
.panel p{margin:0}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.pill{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid rgba(23,19,13,.08);
  color:var(--ink);
  font-weight:700;
}

.video-frame{
  overflow:hidden;
  border-radius:22px;
  background:#000;
  box-shadow:var(--shadow-soft);
  margin-top:18px;
}
.video-frame video,
.video-card video{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:18px;
  background:#000;
}
.video-card{transition:transform .2s ease, box-shadow .2s ease}
.video-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.video-tag{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:var(--surface-2);
  color:#896716;
  font-weight:800;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:16px;
}

.doc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.doc-card .btn-row{margin-top:18px}

.form-grid{
  display:grid;
  gap:16px;
}
.field{
  display:grid;
  gap:8px;
}
.field label{
  color:var(--ink);
  font-weight:700;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(23,19,13,.12);
  background:#fffdf9;
  color:var(--text);
  font:inherit;
}
.field textarea{
  min-height:150px;
  resize:vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:rgba(199,157,52,.5);
  box-shadow:0 0 0 4px rgba(199,157,52,.12);
}
.form-note{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.7;
}

.legal-wrap{
  display:grid;
  grid-template-columns:minmax(0, 260px) minmax(0, 1fr);
  gap:22px;
  align-items:start;
}
.legal-nav{
  position:sticky;
  top:100px;
  border-radius:24px;
  padding:18px;
  border:1px solid rgba(199,157,52,.14);
  background:rgba(255,253,247,.98);
  box-shadow:var(--shadow-soft);
}
.legal-nav a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  color:var(--text);
  font-weight:700;
}
.legal-nav a:hover{background:var(--brand-soft);color:#8a6818}
.legal-card + .legal-card{margin-top:18px}
.legal-title{font-size:clamp(2.2rem, 4vw, 3.6rem);margin-top:16px}
.legal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 0;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid rgba(23,19,13,.08);
  color:var(--ink);
  font-weight:700;
  font-size:.92rem;
}
.notice-card{
  background:linear-gradient(180deg, #fffdf7, #f6ecd8);
  border-color:rgba(199,157,52,.18);
}
.notice-card strong{color:var(--ink)}
.manual-list,
.legal-list{
  margin:14px 0 0;
  padding-left:20px;
}
.manual-list li + li,
.legal-list li + li{margin-top:10px}
.callout{
  padding:16px 18px;
  border-radius:18px;
  background:rgba(199,157,52,.08);
  border:1px solid rgba(199,157,52,.12);
  color:var(--text);
}
.mockup-shell{
  display:grid;
  grid-template-columns:minmax(280px, .82fr) minmax(0, 1.18fr);
  gap:24px;
  align-items:start;
}
.mockup-nav{
  display:grid;
  gap:14px;
}
.mockup-trigger{
  width:100%;
  text-align:left;
  padding:18px 18px 18px 20px;
  border-radius:20px;
  border:1px solid rgba(199,157,52,.18);
  background:rgba(255,253,247,.98);
  box-shadow:var(--shadow-soft);
  color:var(--text);
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.mockup-trigger:hover{
  transform:translateY(-2px);
  border-color:rgba(199,157,52,.34);
}
.mockup-trigger.active{
  border-color:rgba(199,157,52,.5);
  background:linear-gradient(180deg, #fff8e8, #f7ebcf);
  box-shadow:0 18px 36px rgba(199,157,52,.14);
}
.mockup-trigger strong{
  display:block;
  color:var(--ink);
  font-size:1.05rem;
  margin-bottom:6px;
}
.mockup-trigger span{
  display:block;
  color:var(--muted);
  line-height:1.7;
}
.mockup-stage{position:relative}
.mockup-panel{display:none}
.mockup-panel.active{display:block}
.hub-frame{
  padding:18px;
  border-radius:32px;
  background:linear-gradient(180deg, #1e1913, #090806);
  border:1px solid rgba(199,157,52,.18);
  box-shadow:0 32px 70px rgba(23,19,13,.2);
}
.hub-screen{
  overflow:hidden;
  border-radius:24px;
  min-height:620px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top right, rgba(199,157,52,.2), transparent 24%),
    linear-gradient(180deg, #123226 0%, #0d2018 100%);
  color:#f7f4ea;
}
.hub-screen.salah-screen{
  background:
    radial-gradient(circle at top right, rgba(199,157,52,.16), transparent 28%),
    linear-gradient(180deg, #183126 0%, #11261d 100%);
}
.hub-screen.budget-screen{
  background:
    radial-gradient(circle at top right, rgba(199,157,52,.18), transparent 26%),
    linear-gradient(180deg, #2e2518 0%, #18120b 100%);
}
.hub-screen.kidzone-screen{
  background:
    radial-gradient(circle at top right, rgba(236,178,82,.2), transparent 26%),
    linear-gradient(180deg, #23504a 0%, #163630 100%);
}
.hub-screen.calendar-screen{
  background:
    radial-gradient(circle at top right, rgba(199,157,52,.18), transparent 26%),
    linear-gradient(180deg, #1d2f3f 0%, #111d27 100%);
}
.hub-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:16px 18px 12px;
  color:rgba(255,247,234,.72);
  font-size:.86rem;
}
.hub-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.hub-brand-mark{
  width:54px;
  height:54px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,248,232,.18), rgba(255,248,232,.06));
  display:grid;
  place-items:center;
  padding:6px;
}
.hub-brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.hub-brand-copy strong{
  display:block;
  color:#fff8ec;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:1.9rem;
  line-height:.95;
}
.hub-brand-copy span{
  display:block;
  color:rgba(255,247,234,.72);
  font-size:.88rem;
}
.hub-body{padding:0 18px 20px}
.hub-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 18px;
}
.hub-pill{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,248,232,.08);
  border:1px solid rgba(255,248,232,.12);
  color:#f4ebd8;
  font-weight:700;
  font-size:.88rem;
}
.hub-pill-btn,
.hub-action-btn,
.hub-time-btn,
.hub-control-btn,
.hub-level-chip{
  cursor:pointer;
  font:inherit;
  appearance:none;
  -webkit-appearance:none;
}
.hub-pill-btn.active{
  color:#17130d;
  background:linear-gradient(135deg, #c79d34, #e2bc58);
  border-color:rgba(199,157,52,.32);
}
.hub-hero-card,
.hub-grid-card,
.hub-prayer-card,
.hub-step-card,
.hub-verse-card{
  border-radius:24px;
  border:1px solid rgba(255,248,232,.12);
  background:rgba(255,248,232,.06);
  box-shadow:0 18px 30px rgba(0,0,0,.12);
}
.hub-hero-card{
  padding:22px;
  display:grid;
  gap:16px;
}
.quran-pane{display:none}
.quran-pane.active{display:block}
.budget-pane,
.kidzone-pane,
.calendar-pane{display:none}
.budget-pane.active,
.kidzone-pane.active,
.calendar-pane.active{display:block}
.hub-hero-card h3,
.hub-grid-card h3,
.hub-prayer-card h3,
.hub-step-card h3,
.hub-verse-card h3{
  margin:0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:2rem;
  color:#fff8ec;
  line-height:.95;
}
.hub-hero-card p,
.hub-grid-card p,
.hub-prayer-card p,
.hub-step-card p,
.hub-verse-card p{
  margin:0;
  color:rgba(255,247,234,.78);
  line-height:1.75;
}
.hub-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-top:16px;
}
.hub-subgrid{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  gap:16px;
  align-items:start;
}
.hub-grid-card{padding:18px}
.hub-grid-card h3{
  font-size:1.45rem;
  margin-bottom:8px;
}
.hub-grid-card .meta,
.hub-prayer-times .meta{
  display:block;
  margin-top:10px;
  color:#d9bf7a;
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hub-verse-card{padding:20px}
.hub-levels{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}
.hub-level-chip{
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,248,232,.14);
  background:rgba(255,248,232,.06);
  color:#f4ebd8;
}
.hub-level-chip.active{
  background:linear-gradient(135deg, rgba(199,157,52,.3), rgba(226,188,88,.16));
  border-color:rgba(199,157,52,.36);
}
.hub-arabic{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:2rem;
  line-height:1.5;
  color:#fff8ec;
  text-align:right;
}
.hub-translation{margin-top:14px}
.hub-line-study{
  display:grid;
  gap:12px;
}
.hub-line-row{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,248,232,.05);
  border:1px solid rgba(255,248,232,.08);
}
.hub-line-row strong{
  display:block;
  color:#fff8ec;
  margin-bottom:4px;
}
.hub-line-row span{
  color:rgba(255,247,234,.74);
  line-height:1.65;
}
.hub-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.hub-list-card{
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,248,232,.12);
  background:rgba(255,248,232,.06);
  box-shadow:0 18px 30px rgba(0,0,0,.12);
  display:grid;
  gap:14px;
}
.hub-choice-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hub-choice-btn{
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,248,232,.16);
  background:rgba(255,248,232,.06);
  color:#f7f4ea;
}
.hub-choice-btn.active{
  color:#17130d;
  background:linear-gradient(135deg, #c79d34, #e2bc58);
  border-color:rgba(199,157,52,.34);
}
.hub-stat-row,
.hub-mini-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.hub-metric{
  padding:14px 15px;
  border-radius:18px;
  background:rgba(255,248,232,.05);
  border:1px solid rgba(255,248,232,.1);
  display:grid;
  gap:6px;
}
.hub-metric strong{
  color:#fff8ec;
  font-size:1rem;
  line-height:1.3;
}
.hub-metric span{
  color:rgba(255,247,234,.68);
  font-size:.9rem;
  line-height:1.55;
}
.hub-list-card p{
  margin:0;
  color:rgba(255,247,234,.78);
  line-height:1.72;
}
.hub-story-card{
  padding:16px;
  border-radius:20px;
  background:rgba(255,248,232,.05);
  border:1px solid rgba(255,248,232,.1);
  display:grid;
  gap:8px;
}
.hub-story-card strong{
  color:#fff8ec;
  font-size:1.08rem;
}
.hub-story-card span{
  color:rgba(255,247,234,.76);
  line-height:1.7;
}
.hub-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  font-weight:800;
  font-size:.9rem;
}
.hub-action.primary{
  color:#17130d;
  background:linear-gradient(135deg, #c79d34, #e2bc58);
}
.hub-action.secondary{
  color:#f4ebd8;
  background:rgba(255,248,232,.08);
  border:1px solid rgba(255,248,232,.14);
}
.hub-action-btn.active{
  box-shadow:0 0 0 1px rgba(199,157,52,.25) inset;
}
.hub-salah-layout{
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  gap:16px;
}
.hub-prayer-card,
.hub-step-card{padding:20px}
.hub-prayer-times{
  display:grid;
  gap:10px;
  margin-top:16px;
}
.hub-prayer-status{
  margin:14px 0 0;
  color:rgba(255,247,234,.72);
  line-height:1.65;
  font-size:.92rem;
}
.hub-time-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,248,232,.05);
  width:100%;
  border:1px solid transparent;
  text-align:left;
}
.hub-time-row.active{
  background:linear-gradient(135deg, rgba(199,157,52,.25), rgba(199,157,52,.08));
  border:1px solid rgba(199,157,52,.28);
}
.hub-time-row strong{color:#fff8ec}
.hub-time-row span{color:rgba(255,247,234,.7)}
.hub-step-list{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.hub-step{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,248,232,.05);
  border:1px solid rgba(255,248,232,.08);
}
.hub-step strong{
  display:block;
  color:#fff8ec;
  margin-bottom:4px;
}
.hub-salah-header{
  display:grid;
  gap:10px;
}
.hub-control-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.hub-control-btn{
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,248,232,.14);
  background:rgba(255,248,232,.06);
  color:#f4ebd8;
}
.hub-control-btn.active{
  color:#17130d;
  background:linear-gradient(135deg, #c79d34, #e2bc58);
  border-color:rgba(199,157,52,.3);
}
.hub-step span{
  color:rgba(255,247,234,.72);
  line-height:1.65;
}
.hub-detail-note{
  margin:16px 0 0;
  color:rgba(255,247,234,.72);
  line-height:1.7;
}
.mockup-note{
  margin-top:16px;
  color:var(--muted);
  line-height:1.75;
}
.warning{
  padding:16px 18px;
  border-radius:18px;
  background:rgba(143,61,46,.08);
  border:1px solid rgba(143,61,46,.16);
  color:var(--text);
}
footer{padding:0 0 34px}
.footer-shell{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:22px 24px;
  border-radius:24px;
  border:1px solid rgba(23,19,13,.08);
  background:rgba(255,253,247,.9);
  color:var(--muted);
  font-size:.95rem;
}
.footer-shell strong{color:var(--ink)}

@media (max-width: 1080px){
  .hero-grid,
  .grid-4,
  .doc-grid{
    grid-template-columns:1fr 1fr;
  }
  .mockup-shell,
  .hub-salah-layout,
  .hub-subgrid{
    grid-template-columns:1fr;
  }
  .legal-wrap{grid-template-columns:1fr}
  .legal-nav{position:static}
}
@media (max-width: 820px){
  nav ul{display:none}
  .site-prayer-header{display:none}
  .menu-btn{display:inline-flex}
  .hero-shell,
  .panel,
  .legal-card,
  .notice-card,
  .doc-card{padding:22px}
  .hero-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .doc-grid,
  .hub-grid,
  .hub-stat-row,
  .hub-mini-grid{
    grid-template-columns:1fr;
  }
  .hub-screen{min-height:0}
  .footer-shell{flex-direction:column;align-items:flex-start}
}
@media (max-width: 560px){
  .hero h1{max-width:none}
  .btn-row{flex-direction:column}
  .btn{width:100%}
}