:root {
      color-scheme: dark;
      --gold:#ffd866; --gold-light:#fff5c2; --gold-deep:#bd7c12;
      --green-1:#0e3c24; --green-2:#06180f; --green-3:#020a06;
      --card:rgba(7,34,20,.78); --card-strong:rgba(8,42,24,.94);
      --border:rgba(255,216,102,.38); --text-soft:rgba(255,250,229,.76);
      --shadow:0 22px 50px rgba(0,0,0,.32);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; min-height:100svh; overflow-x:hidden;
      color:#fff8dc; background:
        radial-gradient(circle at 50% 12%,rgba(48,143,80,.28),transparent 34%),
        radial-gradient(circle at 50% 100%,rgba(206,157,40,.13),transparent 34%),
        linear-gradient(160deg,var(--green-1),var(--green-2) 48%,var(--green-3));
      font-family:"Noto Naskh Arabic","Amiri","Traditional Arabic",serif;font-weight:500;
    }
    body::before{
      content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
      background:linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px),
                 linear-gradient(90deg,rgba(255,255,255,.013) 1px,transparent 1px);
      background-size:42px 42px;
      mask-image:radial-gradient(circle,#000 0 18%,transparent 75%);
      -webkit-mask-image:radial-gradient(circle,#000 0 18%,transparent 75%);
    }
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(1180px,calc(100% - 28px));margin-inline:auto}
    .site-header{
      position:sticky;top:0;z-index:30;background:rgba(2,13,7,.88);
      border-bottom:1px solid rgba(255,216,102,.20);backdrop-filter:blur(18px)
    }
    .header-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .brand{display:flex;align-items:center;gap:11px;min-width:0}
    .brand img{width:49px;height:49px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.38))}
    .brand strong{display:block;color:var(--gold);font-size:1.08rem;line-height:1.2}
    .brand small{display:block;color:rgba(255,255,255,.54);font:400 .75rem/1.3 Tahoma,sans-serif;margin-top:4px}
    nav{display:flex;align-items:center;gap:5px}
    nav a{padding:9px 12px;border-radius:12px;font-weight:700}
    nav a:hover,nav a:focus-visible{background:rgba(255,255,255,.07);color:var(--gold)}
    .hero{padding:clamp(46px,8vw,90px) 0 46px;text-align:center}
    .logo-shell{
      position:relative;width:min(72vw,430px);margin:0 auto 18px;
      animation:float 4.8s ease-in-out infinite;
      filter:drop-shadow(0 25px 26px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,204,64,.16))
    }
    .logo-shell::before{
      content:"";position:absolute;z-index:-1;inset:13%;border-radius:50%;
      background:radial-gradient(circle,rgba(255,213,80,.18),rgba(45,125,70,.08) 48%,transparent 72%);
    }
    .logo-shell img{display:block;width:100%;height:auto}
    h1{margin:0;color:var(--gold);font-size:clamp(2.25rem,7vw,5rem);line-height:1.1;text-shadow:0 8px 28px rgba(0,0,0,.42)}
    .hero p{max-width:760px;margin:16px auto 0;color:var(--text-soft);font-size:clamp(1.05rem,2.8vw,1.32rem);line-height:1.9}
    .hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:26px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;
      padding:10px 20px;border-radius:16px;border:1px solid var(--border);font-weight:800;
      transition:transform .22s ease,box-shadow .22s ease,background .22s ease
    }
    .btn:hover,.btn:focus-visible{transform:translateY(-3px)}
    .btn-gold{color:#082114;background:linear-gradient(145deg,#fff4b3,#eab93e 52%,#a86508);box-shadow:0 14px 27px rgba(0,0,0,.28)}
    .btn-dark{background:rgba(8,45,26,.76);color:#fff5c2;box-shadow:var(--shadow)}
    .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
    .feature-card{
      border:1px solid var(--border);border-radius:22px;padding:19px;background:var(--card);
      box-shadow:var(--shadow);backdrop-filter:blur(12px)
    }
    .feature-card strong{display:block;color:var(--gold-light);font-size:1.3rem}
    .feature-card span{color:rgba(255,255,255,.62);font:400 .82rem/1.7 Tahoma,sans-serif}
    .section{padding:70px 0}
    .section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
    .section-heading h2{margin:0;color:var(--gold);font-size:clamp(2rem,5vw,3.4rem);line-height:1.2}
    .section-heading p{margin:8px 0 0;color:var(--text-soft);font-size:1.05rem}
    #resultCount{color:var(--gold-light);font-weight:800;white-space:nowrap}
    .tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:22px}
    .search{flex:1 1 310px}
    .search input{
      width:100%;min-height:52px;padding:10px 16px;border:1px solid var(--border);border-radius:16px;
      outline:none;color:#fffbe9;background:rgba(1,13,7,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)
    }
    .search input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,216,102,.10)}
    .filters{display:flex;flex-wrap:wrap;gap:7px}
    .filter{
      border:1px solid rgba(255,216,102,.25);border-radius:999px;padding:8px 14px;
      color:#fff1b5;background:rgba(5,35,19,.62);font-weight:700
    }
    .filter.active{color:#082114;background:linear-gradient(145deg,#fff0a5,#e7b43a);border-color:transparent}
    .books-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
    .book-card{
      position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:235px;
      border:1px solid var(--border);border-radius:24px;background:
        linear-gradient(135deg,rgba(255,255,255,.07),transparent 42%),var(--card);
      box-shadow:var(--shadow);transition:transform .24s ease,border-color .24s ease,background .24s ease
    }
    .book-card::after{
      content:"";position:absolute;inset:-80% 54% -80% -20%;
      background:linear-gradient(90deg,transparent,rgba(255,224,119,.12),transparent);
      transform:rotate(18deg);transition:transform .55s ease;pointer-events:none
    }
    .book-card:hover{transform:translateY(-6px);border-color:rgba(255,224,119,.74);background:var(--card-strong)}
    .book-card:hover::after{transform:translateX(110%) rotate(18deg)}
    .book-top{display:flex;align-items:flex-start;gap:15px;padding:21px 20px 12px}
    .book-icon{
      flex:0 0 58px;width:58px;height:82px;display:grid;place-items:center;border-radius:12px;overflow:hidden;
      color:#072114;background:rgba(0,0,0,.22);
      border:1px solid rgba(255,246,196,.55);box-shadow:0 9px 19px rgba(0,0,0,.3)
    }
    .book-icon img{display:block;width:100%;height:100%;object-fit:cover}
    .book-copy{min-width:0}
    .book-category{display:inline-flex;color:rgba(255,239,180,.72);font:700 .74rem/1.4 Tahoma,sans-serif;margin-bottom:7px}
    .book-title{margin:0;color:var(--gold-light);font-size:clamp(1.12rem,2.6vw,1.42rem);line-height:1.58}
    .book-actions{display:flex;gap:8px;margin-top:auto;padding:12px 20px 20px}
    .read-button,.pdf-button{
      min-height:43px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;font-weight:800
    }
    .read-button{flex:1;color:#082114;background:linear-gradient(145deg,#fff1a1,#e7b239)}
    .pdf-button{min-width:58px;border:1px solid rgba(255,216,102,.28);color:#fff0ad;background:rgba(0,0,0,.16)}
    .empty{padding:45px;text-align:center;border:1px solid var(--border);border-radius:20px;background:var(--card);color:var(--text-soft)}
footer{padding:28px 0 36px;text-align:center;color:rgba(255,255,255,.48);font:400 .78rem/1.7 Tahoma,sans-serif}
    @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
    @media(max-width:880px){.books-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-grid{grid-template-columns:1fr}}
    @media(max-width:680px){
      nav{display:none}.hero{padding-top:34px}.logo-shell{width:min(82vw,350px)}
      .section-heading{align-items:start;flex-direction:column;gap:6px}.books-grid{grid-template-columns:1fr}
      .hero-actions .btn{width:100%}.book-card{min-height:210px}
    }
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.logo-shell{animation:none}*{transition:none!important}}

.book-title a{color:inherit;text-decoration:none}.book-title a:hover,.book-title a:focus-visible{color:#fff}
.book-actions{display:grid;grid-template-columns:1fr auto auto;align-items:center}
.details-button{min-height:43px;display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:13px;border:1px solid rgba(255,216,102,.26);color:#fff1b5;background:rgba(4,31,17,.70);font-weight:800}
.book-card[hidden]{display:none!important}.seo-note{max-width:850px;margin:18px auto 0;color:rgba(255,255,255,.55);font:400 .78rem/1.8 Tahoma,sans-serif}
@media(max-width:480px){.book-actions{grid-template-columns:1fr auto}.details-button{grid-column:1/-1}.pdf-button{min-width:54px}}

.apps-section{padding:8px 0 34px}
.apps-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 45%),var(--card);box-shadow:var(--shadow)}
.apps-copy{min-width:0}.apps-kicker{display:block;color:var(--gold);font-weight:800;margin-bottom:5px}.apps-card h2{margin:0;color:var(--gold-light);font-size:clamp(1.55rem,4vw,2.5rem)}.apps-card p{max-width:760px;margin:7px 0 0;color:var(--text-soft);line-height:1.9}
.app-soon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border:1px solid rgba(255,216,102,.28);border-radius:15px;color:#fff1b5;background:rgba(4,31,17,.72);white-space:nowrap}
@media(max-width:680px){.apps-card{align-items:stretch;flex-direction:column;padding:20px}.app-soon{width:100%}}


/* R07 typography + scale refresh: Noto Naskh first, larger navigation, logo behind the page name */
body{font-size:18px;line-height:1.72}
.container{width:min(1280px,calc(100% - 36px))}
.site-header{background:rgba(2,13,7,.94);box-shadow:0 8px 26px rgba(0,0,0,.18)}
.header-inner{min-height:92px;gap:30px}
.brand{position:relative;isolation:isolate;min-width:310px;padding:10px 20px 10px 18px;overflow:visible}
.brand img{
  position:absolute;z-index:-1;right:2px;top:50%;transform:translateY(-50%);
  width:88px;height:88px;opacity:.28;filter:drop-shadow(0 5px 10px rgba(0,0,0,.42));
}
.brand span{position:relative;z-index:1;padding-right:58px}
.brand strong{font-size:clamp(1.28rem,2.1vw,1.62rem);font-weight:700;line-height:1.25;text-shadow:0 3px 12px rgba(0,0,0,.5)}
.brand small{font-size:.88rem!important;line-height:1.45!important;margin-top:5px;color:rgba(255,255,255,.68)}
nav{gap:8px}
nav a{padding:11px 16px;border-radius:14px;font-size:1.13rem;font-weight:700}

.hero{position:relative;overflow:hidden;padding:clamp(72px,9vw,118px) 0 clamp(68px,7vw,94px);min-height:455px;display:grid;align-items:center}
.hero .container{position:relative;isolation:isolate}
.logo-shell{
  position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(56vw,470px);margin:0;opacity:.18;animation:none;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(255,204,64,.12));
}
.logo-shell::before{display:none}
.hero h1{font-size:clamp(3.1rem,8.2vw,6.4rem);font-weight:700;line-height:1.18;letter-spacing:.01em;text-shadow:0 10px 34px rgba(0,0,0,.62)}
.hero p{max-width:900px;margin-top:20px;font-size:clamp(1.18rem,2.6vw,1.55rem);line-height:2;color:rgba(255,250,229,.84);font-weight:500}
.hero-actions{gap:14px;margin-top:30px}
.btn{min-height:58px;padding:12px 25px;border-radius:17px;font-size:1.08rem}

.apps-section{padding:18px 0 54px;scroll-margin-top:105px}
.apps-card{
  position:relative;overflow:hidden;min-height:285px;align-items:center;gap:42px;
  padding:clamp(34px,5.2vw,62px) clamp(30px,5vw,58px);border-radius:32px;
  background:radial-gradient(circle at 82% 34%,rgba(255,216,102,.10),transparent 28%),linear-gradient(135deg,rgba(255,255,255,.075),transparent 48%),var(--card);
  box-shadow:0 30px 75px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.035)
}
.apps-card::before{content:"";position:absolute;inset:auto -8% -75% 38%;height:290px;background:radial-gradient(ellipse,rgba(255,205,61,.085),transparent 65%);pointer-events:none}
.apps-copy{position:relative;z-index:1;flex:1}
.apps-kicker{font-size:1.18rem;font-weight:700;margin-bottom:10px;letter-spacing:.01em}
.apps-card h2{font-size:clamp(2.5rem,6vw,5.2rem);font-weight:700;line-height:1.25;text-shadow:0 8px 26px rgba(0,0,0,.38)}
.apps-card p{max-width:860px;margin:12px 0 0;font-size:clamp(1.1rem,2.1vw,1.36rem);line-height:1.95;color:rgba(255,250,229,.78)}
.app-soon{position:relative;z-index:1;min-height:64px;padding:13px 25px;border-radius:18px;font-size:1.12rem;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 32px rgba(0,0,0,.26)}

.section-heading h2{font-size:clamp(2.35rem,5vw,4rem)}
.section-heading p{font-size:1.15rem;line-height:1.8}
.search input{font-size:1.05rem}
.filter{font-size:1rem}
.book-category{font-size:.84rem!important}
.book-title{font-size:clamp(1.28rem,2.55vw,1.65rem);line-height:1.7}
.read-button,.pdf-button,.details-button{font-size:1rem}

@media(max-width:880px){
  .header-inner{min-height:82px}.brand{min-width:270px}.brand img{width:78px;height:78px}.brand span{padding-right:52px}
  nav a{padding:9px 11px;font-size:1rem}
  .apps-card{min-height:0}
}
@media(max-width:680px){
  body{font-size:17px}.container{width:min(100% - 22px,1280px)}
  .header-inner{min-height:72px}.brand{min-width:0;padding:6px 5px 6px 0}.brand img{right:-5px;width:70px;height:70px;opacity:.25}.brand span{padding-right:46px}
  .brand strong{font-size:1.08rem}.brand small{font-size:.7rem!important}
  .hero{min-height:390px;padding:62px 0 58px}.logo-shell{width:min(82vw,360px);opacity:.16}.hero h1{font-size:clamp(2.7rem,12vw,4.5rem)}
  .hero p{font-size:1.1rem;line-height:1.9}.btn{min-height:54px;font-size:1rem}
  .apps-section{padding-top:12px}.apps-card{padding:28px 22px;border-radius:25px;gap:24px}.apps-card h2{font-size:clamp(2.15rem,10vw,3.45rem)}.apps-card p{font-size:1.04rem}.app-soon{min-height:56px;font-size:1.02rem}
}


/* V1.6 UI — 2026-08-09
   - Noto Naskh Arabic stays the default.
   - The supplied Allah emblem is centered BEHIND the site name in the header (not beside it).
   - The hero emblem is smaller, keeps its glow/float effects, and no text sits on top of it.
   - Main and app titles are reduced to balanced sizes on desktop and mobile.
*/
.site-header{background:rgba(2,13,7,.95)}
.header-inner{min-height:86px;gap:24px}
.brand{
  position:relative;isolation:isolate;overflow:hidden;
  min-width:330px;padding:10px 22px;border-radius:18px;
  display:flex;align-items:center;justify-content:center
}
.brand img{
  position:absolute;z-index:0;right:50%;top:50%;transform:translate(50%,-50%);
  width:78px;height:78px;object-fit:contain;opacity:.36;pointer-events:none;
  filter:drop-shadow(0 7px 13px rgba(0,0,0,.48)) drop-shadow(0 0 12px rgba(255,210,74,.18));
}
.brand span{position:relative;z-index:1;padding:0;min-width:270px;text-align:center}
.brand strong{
  display:block;font-size:clamp(1.14rem,1.7vw,1.42rem);font-weight:700;line-height:1.28;
  text-shadow:0 3px 10px rgba(0,0,0,.92),0 0 14px rgba(0,0,0,.58)
}
.brand small{font-size:.79rem!important;line-height:1.4!important;margin-top:4px;color:rgba(255,255,255,.72);text-shadow:0 2px 8px #000}
nav a{font-size:1.05rem;padding:10px 14px}

.hero{
  position:relative;overflow:hidden;display:block;min-height:0;
  padding:clamp(48px,6vw,74px) 0 clamp(58px,6.5vw,84px);text-align:center
}
.hero .container{position:relative;isolation:isolate}
.logo-shell{
  position:relative;z-index:0;left:auto;top:auto;transform:none;
  width:min(30vw,285px);margin:0 auto;opacity:.60;
  animation:float 4.8s ease-in-out infinite;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.48)) drop-shadow(0 0 24px rgba(255,204,64,.20));
}
.logo-shell::before{
  display:block;content:"";position:absolute;z-index:-2;inset:4%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,218,91,.22) 0,rgba(77,153,88,.10) 43%,transparent 72%);
  filter:blur(5px);pointer-events:none
}
.logo-shell::after{
  content:"";position:absolute;z-index:-3;inset:-14%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,209,66,.10),transparent 67%);pointer-events:none
}
.logo-shell img{display:block;width:100%;height:auto}
.hero h1{
  margin:24px 0 0;font-size:clamp(2.45rem,5.4vw,4.35rem);font-weight:700;line-height:1.22;
  text-shadow:0 9px 30px rgba(0,0,0,.58)
}
.hero p{max-width:850px;margin:18px auto 0;font-size:clamp(1.08rem,2vw,1.33rem);line-height:1.95}
.hero-actions{margin-top:26px}

.apps-section{padding:14px 0 48px}
.apps-card{min-height:235px;padding:clamp(30px,4.5vw,48px) clamp(28px,4.4vw,50px);gap:34px}
.apps-kicker{font-size:1.08rem;margin-bottom:7px}
.apps-card h2{font-size:clamp(1.95rem,3.9vw,3.25rem);line-height:1.32;font-weight:700}
.apps-card p{font-size:clamp(1.02rem,1.7vw,1.2rem);line-height:1.9;margin-top:10px}
.app-soon{min-height:58px;padding:11px 22px;font-size:1.04rem}

@media(max-width:880px){
  .header-inner{min-height:78px}.brand{min-width:275px}.brand img{width:68px;height:68px;opacity:.34}.brand span{min-width:225px}
  nav a{font-size:.96rem;padding:9px 10px}
  .logo-shell{width:min(38vw,255px)}
}
@media(max-width:680px){
  .header-inner{min-height:68px}.brand{min-width:0;max-width:100%;padding:7px 10px}.brand span{min-width:230px}
  .brand img{right:50%;width:58px;height:58px;opacity:.34}.brand strong{font-size:1.03rem}.brand small{font-size:.68rem!important}
  .hero{padding:38px 0 56px}.logo-shell{width:min(52vw,215px);opacity:.58}
  .hero h1{margin-top:20px;font-size:clamp(2.05rem,9vw,3.15rem)}
  .hero p{font-size:1.03rem;line-height:1.85;margin-top:15px}.hero-actions{margin-top:22px}
  .apps-card{padding:25px 19px;border-radius:24px;gap:20px}.apps-card h2{font-size:clamp(1.75rem,8vw,2.5rem)}
  .apps-card p{font-size:1rem}.app-soon{min-height:54px;font-size:1rem}
}

/* V1.9 mobile repair — remove the cramped header banner and reduce index logo */
@media(max-width:720px){
  .site-header{display:none!important}
  .container{width:calc(100% - 20px);max-width:100%}
  .hero{min-height:0;padding:24px 0 42px}
  .logo-shell{
    width:min(34vw,138px)!important;max-width:138px;margin-inline:auto;
    opacity:.72;animation:none
  }
  .hero h1{margin-top:14px;font-size:clamp(1.85rem,8.5vw,2.7rem);line-height:1.35}
  .hero p{font-size:1rem;line-height:1.85;margin-top:12px}
  .hero-actions{margin-top:18px}
  .section{padding:46px 0}
  .section-heading h2{font-size:clamp(1.8rem,8vw,2.45rem)}
  .book-title{font-size:1.18rem;line-height:1.62}
}

@media(max-width:390px){
  .container{width:calc(100% - 14px)}
  .logo-shell{width:min(31vw,118px)!important}
  .hero h1{font-size:clamp(1.65rem,8vw,2.25rem)}
}

/* R21.3 entrance gateway and persistent layout choice */
.view-toolbar{
  position:sticky;z-index:20;top:10px;width:max-content;max-width:calc(100% - 24px);
  display:flex;align-items:center;gap:10px;margin:12px auto -54px;padding:6px;
  border:1px solid rgba(255,216,102,.28);border-radius:16px;
  background:rgba(2,24,12,.86);box-shadow:0 10px 28px rgba(0,0,0,.25);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.gateway-back,.view-toggle button{
  min-height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:11px;padding:7px 12px;color:#fff3bd;background:transparent;
  font:700 .82rem/1.2 Cairo,Tahoma,sans-serif;cursor:pointer
}
.gateway-back{border:1px solid rgba(255,216,102,.20)}
.view-toggle{display:flex;gap:4px}
.view-toggle button.active{color:#082114;background:#f2c852}
body[data-view="mobile"] .container{max-width:720px}
body[data-view="mobile"] .books-grid{grid-template-columns:1fr!important}
body[data-view="mobile"] .site-header nav{display:none}
@media(min-width:721px){body[data-view="mobile"] .apps-card{align-items:stretch;flex-direction:column}}
@media(max-width:720px){
  .view-toolbar{top:max(8px,env(safe-area-inset-top));margin:8px auto -44px}
  .gateway-back,.view-toggle button{min-height:36px;padding:6px 9px;font-size:.76rem}
}