/* =============== RESET =============== */
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
    :root{
      --green:#1d7a3f;
      --green-dark:#145a2d;
      --green-deep:#0c3a1c;
      --green-darker:#071f10;
      --gold:#b8962e;
      --gold-light:#d4af37;
      --gold-pale:#e8cc6e;
      --cream:#faf8f3;
      --cream-mid:#f0ece2;
      --white:#ffffff;
      --dark:#1a1a1a;
      --text:#333333;
      --text-light:#666666;
      --text-dim:rgba(255,255,255,0.65);
      --border:#e0dcd2;
      --transition:0.35s cubic-bezier(0.4,0,0.2,1);
      /* ── Z-Index System ── */
      --z-base:1;
      --z-header:100;
      --z-nav:200;
      --z-sticky:250;
      --z-clock:300;
      --z-dropdown:400;
      --z-overlay:500;
      --z-modal:600;
      --z-toast:700;
      --z-top:800;
    }
    html{
      scroll-behavior:smooth;
      max-width:100%;
      overflow-x:hidden;
    }
    body{
      font-family:'Cairo','Noto Naskh Arabic',sans-serif;
      background:var(--cream);
      color:var(--text);
      overflow-x:hidden;
    }

    /* ===============================================================
       SITE HEADER — الشعار يسار + المعلومات يمين (مطابق للهوية البصرية)
    =============================================================== */
    .site-header{
      background: #ffffff;
      position:relative;
      z-index:var(--z-header);
      border-top: 4px solid var(--green);
      box-shadow: 0 2px 14px rgba(29,122,63,0.06);
    }

    .header-main{
      max-width:1340px;
      margin:0 auto;
      display:flex;
      direction:ltr; /* Logo on Left, Info on Right */
      align-items:center;
      justify-content:space-between;
      padding:16px 36px;
      gap:28px;
    }

    /* — Logo — */
    .header-logo{
      flex-shrink:0;
      width:115px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .header-logo img{
      width:105px; height:auto;
      object-fit:contain;
      filter: none;
      transition:var(--transition);
    }
    .header-logo img:hover{ transform:scale(1.04); }
    .logo-fallback{
      display:none;
      width:90px; height:90px;
      border-radius:50%;
      border: 2px solid rgba(29,122,63,0.3);
      background: rgba(29,122,63,0.06);
      color: var(--green);
      font-family:'Reem Kufi', 'Amiri', serif; font-size:15px; font-weight:700;
      align-items:center; justify-content:center; text-align:center; line-height:1.3;
    }

    /* — Info Block — */
    .header-info{
      direction:rtl;
      display:flex;
      flex-direction:column;
      gap:6px;
      text-align:right;
      flex:1;
      max-width:760px;
    }

    /* — Titles & Author Grid (تناسق وتوازن كامل) — */
    .header-titles-grid{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px 32px;
      flex-wrap:wrap;
    }
    .header-title-block{
      display:flex;
      flex-direction:column;
      gap:1px;
    }
    .header-title-main{
      font-family:'Reem Kufi', 'Amiri', serif;
      font-size:clamp(22px, 2.5vw, 32px);
      font-weight:700;
      color: var(--green);
      line-height:1.25;
      letter-spacing:0.5px;
    }
    .header-title-sub{
      font-family:'Reem Kufi', 'Amiri', serif;
      font-size:clamp(15px, 1.6vw, 20px);
      font-weight:700;
      color: var(--green-dark);
      letter-spacing:0.3px;
    }

    .header-author-block{
      display:flex;
      flex-direction:column;
      gap:2px;
      text-align:left;
    }
    [dir="rtl"] .header-author-block{ text-align:left; }
    [dir="ltr"] .header-author-block{ text-align:right; }

    .header-author-label{
      font-family:'Reem Kufi', 'Amiri', serif;
      font-size:clamp(13px, 1.3vw, 16px);
      font-weight:500;
      color: var(--gold, #b8962e);
      letter-spacing:0.5px;
    }
    .header-author-name{
      font-family:'Reem Kufi', 'Amiri', serif;
      font-size:clamp(14px, 1.5vw, 18px);
      font-weight:700;
      color: var(--green-dark);
      white-space:nowrap;
    }

    .header-divider-line{
      width:100%;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(29,122,63,0.22) 20%, rgba(212,175,55,0.25) 80%, transparent);
      margin:2px 0;
    }

    .header-meta-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:4px 16px;
      font-size:clamp(11.5px, 1.1vw, 13.5px);
    }
    .header-tagline{
      font-family:'Reem Kufi', 'Cairo', sans-serif;
      font-weight:600;
      color: var(--green);
      display:flex;
      align-items:center;
      gap:6px;
    }
    .header-desc{
      font-family:'Reem Kufi', 'Cairo', sans-serif;
      font-weight:500;
      color: var(--text-light);
    }
    .header-rights{
      font-family:'Reem Kufi', 'Amiri', serif;
      font-size:clamp(10.5px, 1vw, 12px);
      color: #888;
      width:100%;
      text-align:right;
      margin-top:1px;
    }

    /* خط فاصل أخضر أسفل الهيدر */
    .header-accent{
      height:3px;
      background:linear-gradient(90deg, var(--green) 0%, var(--gold-light) 50%, var(--green) 100%);
    }

    /* ===================================================
       NAVIGATION BAR — متواصل مع الهيدر
    =================================================== */
    .main-nav{
      background: #0a2e18;
      position:sticky; top:0; z-index:var(--z-nav);
      border-bottom: 2px solid rgba(212,175,55,0.25);
      box-shadow: 0 4px 24px rgba(0,0,0,0.4);
      transition:background 0.4s;
    }
    .main-nav.scrolled{
      background:rgba(10,46,24,0.96);
      backdrop-filter:blur(12px);
    }
    .nav-inner{
      max-width:1340px; margin:0 auto;
      display:flex; align-items:center; justify-content:space-between;
      padding:0 36px;
    }
    .nav-list{
      display:flex; flex-wrap:wrap; align-items:center;
      list-style:none; gap:0; flex:1; justify-content:center;
    }
    .nav-list li a{
      display:block; padding:15px 12px;
      color:rgba(255,255,255,0.82); text-decoration:none;
      font-size:14px; font-weight:600;
      transition:var(--transition); position:relative;
      white-space:nowrap;
    }
    .nav-list li a::after{
      content:''; position:absolute; bottom:9px; right:12px; left:12px;
      height:2px; background:var(--gold-light);
      transform:scaleX(0); transition:var(--transition); border-radius:2px;
    }
    .nav-list li a:hover{ color:var(--gold-pale); }
    .nav-list li a:hover::after, .nav-list li.active a::after{ transform:scaleX(1); }
    .nav-list li.active a{ color:var(--gold-light); }
    .nav-store a{
      background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%) !important;
      color:var(--green-deep) !important; font-weight:700 !important;
      border-radius:6px !important; margin:8px 0 !important; padding:9px 18px !important;
    }
    .nav-store a::after{ display:none !important; }
    .nav-store a:hover{ opacity:0.9; }
    .nav-extras{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
    .lang-btn{
      padding:5px 11px; border-radius:20px;
      border:1px solid rgba(212,175,55,0.4);
      background:transparent; color:rgba(255,255,255,0.65);
      font-family:'Cairo',sans-serif; font-size:12px; font-weight:600;
      cursor:pointer; transition:var(--transition); text-decoration:none;
    }
    .lang-btn.active,.lang-btn:hover{
      background:var(--gold-light); color:var(--green-deep); border-color:var(--gold-light);
    }
    .hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none; }
    .hamburger span{ width:24px; height:2px; background:var(--gold-light); border-radius:2px; display:block; transition:var(--transition); }

    /* Mobile nav overlay */
    .mobile-overlay{
      display:none;position:fixed;inset:0;z-index:var(--z-overlay);
      background:rgba(7,31,16,0.97);backdrop-filter:blur(14px);
      flex-direction:column;align-items:center;justify-content:center;gap:6px;
      overflow-y:auto;
    }
    .mobile-overlay.open{display:flex;}
    .mobile-overlay a{
      color:var(--cream);text-decoration:none;font-size:20px;font-weight:600;
      padding:14px 50px;border-radius:12px;transition:var(--transition);
      width:min(280px, 90vw);text-align:center;
    }
    .mobile-overlay a:hover{background:rgba(212,175,55,0.12);color:var(--gold-light);}
    .mob-close{
      position:absolute;top:20px;inset-inline-start:20px;
      width:46px;height:46px;border-radius:50%;
      background:rgba(212,175,55,0.12);border:1px solid rgba(212,175,55,0.3);
      color:var(--gold-light);font-size:18px;cursor:pointer;
      display:flex;align-items:center;justify-content:center;transition:var(--transition);
    }
    .mob-close:hover{background:var(--gold-light);color:var(--green-deep);}

    /* ===============================================================
       FLOATING CLOCK — أبيض + أخضر
    =============================================================== */
    .floating-clock{
      position:fixed;
      right:0;
      top:50%;transform:translateY(-50%);
      z-index:var(--z-clock);
      background:#ffffff;
      border:1px solid rgba(29,122,63,0.2);
      border-top:3px solid var(--green);
      border-right:none;
      border-radius:14px 0 0 14px;
      padding:16px 12px;text-align:center;
      box-shadow:-4px 0 20px rgba(29,122,63,0.12);
      min-width:74px;
      transition:var(--transition);
    }
    .floating-clock:hover{
      min-width:84px;
      box-shadow:-6px 0 28px rgba(29,122,63,0.18);
    }
    .clk-icon{color:var(--green);font-size:18px;margin-bottom:8px;}
    .clk-time{
      font-family:'Cairo',monospace;font-size:14px;font-weight:800;
      color:var(--green-dark);letter-spacing:1.5px;direction:ltr;line-height:1.3;
    }
    .clk-blink{animation:blink 1s step-end infinite;}
    @keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
    .clk-date{font-size:10px;color:var(--text-light);margin-top:6px;line-height:1.6;}
    .clk-label{
      font-size:10px;font-weight:700;color:var(--green);
      margin-top:8px;border-top:1px solid rgba(29,122,63,0.15);padding-top:8px;
      letter-spacing:1px;
    }

    /* ===============================================================
       HERO — Decorative Banner (No Text)
    =============================================================== */
    .hero{
      position:relative;z-index:1;
      min-height: 480px;
      padding: clamp(60px, 8vh, 100px) 24px;
      display:flex;align-items:center;justify-content:center;
      overflow:hidden;
      background: #ffffff;
      border-bottom: 2px solid rgba(29,122,63,0.12);
    }

    /* ── طبقة 1: تدرج أبيض ناعم مع لمسة خضراء خفيفة ── */
    .hero::before{
      content:'';position:absolute;inset:0;
      background:
        radial-gradient(ellipse at 50% 0%,   rgba(29,122,63,0.07) 0%, transparent 60%),
        radial-gradient(ellipse at 0%  100%, rgba(29,122,63,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 80%, rgba(212,175,55,0.06) 0%, transparent 45%),
        linear-gradient(160deg, #f8fff9 0%, #ffffff 40%, #f5fbf7 100%);
      pointer-events:none;
    }

    /* ── طبقة 2: نقش هندسي إسلامي أخضر/ذهبي خفيف على أبيض ── */
    .hero::after{
      content:'';position:absolute;inset:0;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cstyle%3E.g%7Bfill:none;stroke-width:0.8%7D.a%7Bstroke:rgba(29,122,63,0.1)%7D.b%7Bstroke:rgba(212,175,55,0.12)%7D%3C/style%3E%3C/defs%3E%3Cpath class='g a' d='M60 30 L69 51 L90 42 L79 63 L100 72 L79 72 L90 93 L69 84 L60 105 L51 84 L30 93 L41 72 L20 72 L41 63 L30 42 L51 51 Z'/%3E%3Ccircle class='g b' cx='60' cy='67' r='20'/%3E%3Crect class='g a' x='5' y='5' width='25' height='25' transform='rotate(45 17.5 17.5)'/%3E%3Crect class='g a' x='90' y='5' width='25' height='25' transform='rotate(45 102.5 17.5)'/%3E%3Crect class='g a' x='5' y='90' width='25' height='25' transform='rotate(45 17.5 102.5)'/%3E%3Crect class='g a' x='90' y='90' width='25' height='25' transform='rotate(45 102.5 102.5)'/%3E%3Cline class='g b' x1='0' y1='60' x2='120' y2='60'/%3E%3Cline class='g b' x1='60' y1='0' x2='60' y2='120'/%3E%3Cline class='g b' x1='0' y1='0' x2='120' y2='120'/%3E%3Cline class='g b' x1='120' y1='0' x2='0' y2='120'/%3E%3Crect class='g b' x='2' y='2' width='116' height='116'/%3E%3C/svg%3E");
      background-size: 120px 120px;
      opacity: 1;
      pointer-events:none;
    }

    /* ── حلقات زخرفية خضراء/ذهبية متحركة على خلفية بيضاء ── */
    .hero-ring{
      position:absolute;left:50%;top:50%;
      transform:translate(-50%,-50%);
      border-radius:50%;
      border:1px solid rgba(29,122,63,0.1);
      animation:ring-pulse 8s ease-in-out infinite;
      z-index:2;
    }
    .hero-ring:nth-child(1){width:160px;height:160px; border-width:2px; border-color:rgba(29,122,63,0.22);}
    .hero-ring:nth-child(2){width:300px;height:300px; animation-delay:2s; border-color:rgba(29,122,63,0.12);}
    .hero-ring:nth-child(3){width:460px;height:460px; animation-delay:4s; border-color:rgba(212,175,55,0.1);}
    .hero-ring:nth-child(4){width:640px;height:640px; animation-delay:6s; border-color:rgba(212,175,55,0.06);}

    /* ── توهج أخضر ناعم في المركز ── */
    .hero-glow {
      position:absolute; left:50%; top:50%;
      transform: translate(-50%,-50%);
      width: 200px; height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(29,122,63,0.08) 0%, transparent 70%);
      z-index: 1;
      animation: glow-pulse 4s ease-in-out infinite;
    }
    @keyframes glow-pulse{
      0%,100%{opacity:0.5; transform:translate(-50%,-50%) scale(1);}
      50%{opacity:1; transform:translate(-50%,-50%) scale(1.2);}
    }
    @keyframes ring-pulse{
      0%,100%{opacity:0.4;transform:translate(-50%,-50%) scale(1);}
      50%{opacity:1;transform:translate(-50%,-50%) scale(1.04);}
    }

    /* الأزرار — أخضر على أبيض */
    .btn-gold{
      padding:13px 34px;
      background:var(--green);
      color:#fff;border:none;border-radius:40px;
      font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;
      cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
      box-shadow:0 6px 22px rgba(29,122,63,0.25);transition:var(--transition);
    }
    .btn-gold:hover{transform:translateY(-3px);background:var(--green-dark);box-shadow:0 10px 30px rgba(29,122,63,0.35);}
    .btn-outline-w{
      padding:13px 34px;
      background:#fff;color:var(--green);
      border:2px solid rgba(29,122,63,0.3);border-radius:40px;
      font-family:'Cairo',sans-serif;font-size:14px;font-weight:600;
      cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
      transition:var(--transition);
    }
    .btn-outline-w:hover{background:#f0faf4;border-color:var(--green);color:var(--green-dark);transform:translateY(-3px);}

    /* ===============================================================
       STATS — أبيض + أخضر
    =============================================================== */
    .stats{
      background:#fff;
      border-top: 1px solid rgba(29,122,63,0.1);
      border-bottom: 1px solid rgba(29,122,63,0.1);
    }
    .stats-grid{
      max-width:1200px;margin:0 auto;
      display:grid;grid-template-columns:repeat(4,1fr);
      /* prevent fixed cols from overflowing */
      min-width:0;
    }
    .stat{
      text-align:center;padding:30px 20px;
      border-left:1px solid rgba(29,122,63,0.1);
      transition:background .3s;
    }
    .stat:first-child{border-left:none;}
    .stat:hover{background: #f4faf6;}
    .stat-icon{
      width:52px;height:52px;border-radius:50%;
      background:#f0faf4;
      border:2px solid rgba(29,122,63,0.15);
      display:flex;align-items:center;justify-content:center;
      margin:0 auto 12px;font-size:22px;color:var(--green);
    }
    .stat-num{font-size:32px;font-weight:800;color:var(--green);line-height:1;}
    .stat-label{font-size:13px;color:var(--text-light);margin-top:5px;}

    /* ===============================================================
       SECTION HELPERS
    =============================================================== */
    .section-pad{padding:80px clamp(16px,3vw,36px);}
    .section-head{text-align:center;margin-bottom:48px;}
    .section-tag{
      display:inline-flex;align-items:center;gap:8px;
      padding:5px 18px;border-radius:30px;
      background:#f0faf4;border:1px solid rgba(29,122,63,0.2);
      color:var(--green);font-size:12px;font-weight:700;margin-bottom:14px;
    }
    .section-title{
      font-family:'Noto Kufi Arabic','Reem Kufi','Amiri',serif;
      font-size:clamp(26px,3.5vw,38px);color:var(--green-dark);margin-bottom:10px;
    }
    .section-line{
      display:flex;align-items:center;justify-content:center;gap:10px;
    }
    .section-line::before,.section-line::after{
      content:'';width:60px;height:1px;
      background:linear-gradient(90deg,transparent,var(--green));
    }
    .section-line::after{background:linear-gradient(90deg,var(--green),transparent);}
    .section-line i{color:var(--green);font-size:11px;opacity:0.6;}
    .section-desc{color:var(--text-light);font-size:14px;margin-top:10px;}

    /* ===============================================================
       VALUES + ABOUT — أبيض نظيف
    =============================================================== */
    .values-sec{background:#f8fdf9;}
    .values-wrap{max-width:700px;margin:0 auto;}

    .acc{
      background:#fff;border:1px solid rgba(29,122,63,0.12);
      border-radius:12px;margin-bottom:10px;overflow:hidden;
      transition:var(--transition);
      box-shadow:0 1px 4px rgba(0,0,0,0.03);
    }
    .acc:hover{border-color:rgba(29,122,63,0.35);box-shadow:0 4px 14px rgba(29,122,63,0.07);}
    .acc.open{border-color:var(--green);border-right:3px solid var(--green);box-shadow:0 6px 20px rgba(29,122,63,0.08);}
    .acc-head{
      padding:16px 18px;display:flex;align-items:center;justify-content:space-between;
      cursor:pointer;user-select:none;
    }
    .acc-head-r{display:flex;align-items:center;gap:12px;}
    .acc-icon{
      width:40px;height:40px;border-radius:50%;
      background:#f0faf4;
      border:2px solid rgba(29,122,63,0.2);
      display:flex;align-items:center;justify-content:center;
      font-size:15px;color:var(--green);flex-shrink:0;
    }
    .acc.open .acc-icon{
      background:var(--green);
      color:#fff;
      border-color:var(--green);
    }
    .acc-title{font-family:'Amiri',serif;font-size:19px;color:var(--text);font-weight:700;}
    .acc-arrow{color:var(--green);font-size:13px;transition:var(--transition);}
    .acc.open .acc-arrow{transform:rotate(180deg);}
    .acc-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(0.4,0,0.2,1);}
    .acc.open .acc-body{max-height:260px;}
    .acc-content{
      padding:14px 18px 18px;color:var(--text-light);
      font-size:14.5px;line-height:2;
      border-top:1px solid rgba(29,122,63,0.08);
    }

    /* About card */
    .about-crd{
      background:#fff;border:1px solid rgba(29,122,63,0.12);
      border-radius:16px;padding:36px;text-align:center;
      box-shadow:0 4px 20px rgba(29,122,63,0.06);position:relative;overflow:hidden;
    }
    .about-crd::before{
      content:'';position:absolute;top:0;left:0;right:0;height:4px;
      background:linear-gradient(90deg,var(--green),rgba(29,122,63,0.3),var(--green));
    }
    .about-avatar{
      width:88px;height:88px;border-radius:50%;
      background:#f0faf4;
      border:3px solid rgba(29,122,63,0.2);
      display:flex;align-items:center;justify-content:center;
      margin:0 auto 16px;font-size:34px;color:var(--green);
      box-shadow:0 4px 14px rgba(29,122,63,0.1);
    }
    .about-name{font-family:'Amiri',serif;font-size:20px;color:var(--green-dark);margin-bottom:4px;}
    .about-sub{font-size:13px;color:var(--text-light);margin-bottom:18px;}
    .about-quote{
      font-family:'Amiri',serif;font-size:16px;color:var(--text);
      line-height:1.9;border-right:3px solid var(--green);
      padding-right:14px;text-align:right;
    }
    .about-btn{
      display:inline-flex;align-items:center;gap:8px;
      margin-top:22px;padding:10px 24px;border-radius:30px;
      background:#fff;border:2px solid var(--green);
      color:var(--green);font-size:13px;font-weight:700;text-decoration:none;
      transition:var(--transition);
    }
    .about-btn:hover{background:var(--green);color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(29,122,63,0.2);}

    /* ===============================================================
       BOOKS — أبيض منظم
    =============================================================== */
    .books-sec{background:#fff;}
    .books-grid{
      max-width:1260px;margin:0 auto;
      display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:24px;
      padding:0 4px;
    }
    .book{
      background:#fff;border:1px solid rgba(29,122,63,0.12);
      border-radius:16px;overflow:hidden;transition:var(--transition);cursor:pointer;
      position:relative;box-shadow:0 2px 8px rgba(0,0,0,0.04);
    }
    .book:hover{
      transform:translateY(-6px);
      border-color:var(--green);
      box-shadow:0 16px 40px rgba(29,122,63,0.1);
    }
    .book-cover{
      height:230px;
      background:linear-gradient(145deg, #0d3a1e, #1d7a3f);
      display:flex;align-items:center;justify-content:center;position:relative;
    }
    .book-cover-box{
      width:82%;height:84%;
      border:1px solid rgba(255,255,255,0.15);border-radius:8px;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
      background:rgba(0,0,0,0.15);
    }
    .book-cover-icon{color:rgba(255,255,255,0.8);font-size:28px;}
    .book-cover-t{
      font-family:'Amiri',serif;font-size:14px;color:rgba(255,255,255,0.85);
      text-align:center;padding:0 12px;line-height:1.6;
    }
    .book-lock{
      position:absolute;top:10px;right:10px;
      background:#fff;color:var(--green);
      font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;
      display:flex;align-items:center;gap:4px;
    }
    .book-info{padding:14px 16px;background:#fff;}
    .book-name{font-family:'Amiri',serif;font-size:15px;color:var(--green-dark);margin-bottom:4px;line-height:1.5;font-weight:700;}
    .book-auth{font-size:11px;color:var(--text-light);margin-bottom:12px;}
    .book-btns{display:flex;gap:6px;}
    .book-btn{
      flex:1;padding:8px;border-radius:8px;border:none;
      font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;
      cursor:pointer;transition:var(--transition);
      display:flex;align-items:center;justify-content:center;gap:4px;
    }
    .book-btn-r{background:var(--green);color:#fff;}
    .book-btn-r:hover{background:var(--green-dark);}
    .book-btn-i{background:transparent;color:var(--green);border:1px solid rgba(29,122,63,0.25);}
    .book-btn-i:hover{background:#f0faf4;}

    /* ===============================================================
       FEATURES — أبيض فاتح
    =============================================================== */
    .features-sec{background:#f8fdf9;}
    .features-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:24px;}
    .feat{
      background:#fff;border:1px solid rgba(29,122,63,0.12);
      border-radius:16px;padding:32px 24px;text-align:center;
      transition:var(--transition);cursor:pointer;position:relative;overflow:hidden;
      box-shadow:0 2px 8px rgba(0,0,0,0.03);
    }
    .feat:hover{
      transform:translateY(-5px);border-color:var(--green);
      box-shadow:0 12px 32px rgba(29,122,63,0.08);
    }
    .feat::after{
      content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
      background:linear-gradient(90deg,var(--green),rgba(29,122,63,0.3));
      transform:scaleX(0);transition:var(--transition);
    }
    .feat:hover::after{transform:scaleX(1);}
    .feat-icon{
      width:68px;height:68px;border-radius:50%;
      background:#f0faf4;
      border:2px solid rgba(29,122,63,0.15);
      display:flex;align-items:center;justify-content:center;
      margin:0 auto 18px;font-size:26px;color:var(--green);
      transition:var(--transition);
    }
    .feat:hover .feat-icon{
      background:var(--green);
      color:#fff;border-color:var(--green);
      box-shadow:0 6px 18px rgba(29,122,63,0.25);
    }
    .feat-title{font-family:'Amiri',serif;font-size:21px;color:var(--green-dark);margin-bottom:8px;}
    .feat-desc{font-size:13px;color:var(--text-light);line-height:1.8;margin-bottom:18px;}
    .feat-link{
      color:var(--green);font-size:13px;font-weight:600;text-decoration:none;
      display:inline-flex;align-items:center;gap:6px;
    }
    .feat-link:hover{gap:10px;color:var(--green-dark);}

    /* ===============================================================
       AD
    =============================================================== */
    .ad-sec{padding:24px clamp(16px,3vw,36px);background:#fff;border-top:1px solid rgba(29,122,63,0.08);}
    .ad-box{
      max-width:1100px;margin:0 auto;
      background:#f8fdf9;border:1px dashed rgba(29,122,63,0.2);border-radius:10px;
      padding:20px clamp(16px,3vw,36px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
      text-align:center;min-height:80px;
    }
    .ad-tag{color:var(--green);font-size:11px;border:1px solid rgba(29,122,63,0.2);padding:2px 10px;border-radius:4px;font-weight:700;}
    .ad-txt{color:var(--text-light);font-size:13px;}

    /* ===============================================================
       CONTACT — أخضر فاتح
    =============================================================== */
    .contact-sec{
      background:#f0faf4;
      border-top:1px solid rgba(29,122,63,0.12);
      border-bottom:1px solid rgba(29,122,63,0.12);
      padding:70px 36px;
    }
    .contact-box{max-width:660px;margin:0 auto;text-align:center;}
    .contact-title{font-family:'Amiri',serif;font-size:32px;color:var(--green-dark);margin-bottom:10px;}
    .contact-desc{color:var(--text-light);font-size:14px;margin-bottom:28px;line-height:1.9;}
    .contact-form{display:flex;gap:10px;max-width:480px;margin:0 auto;}
    .contact-input{
      flex:1;padding:13px 20px;
      background:#fff;border:1.5px solid rgba(29,122,63,0.2);
      border-radius:40px;color:var(--text);font-family:'Cairo',sans-serif;font-size:14px;
      outline:none;transition:var(--transition);text-align:right;
    }
    .contact-input::placeholder{color:#aaa;}
    .contact-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(29,122,63,0.08);}
    .contact-submit{
      padding:13px 26px;
      background:var(--green);
      color:#fff;border:none;border-radius:40px;
      font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;
      cursor:pointer;transition:var(--transition);white-space:nowrap;
    }
    .contact-submit:hover{background:var(--green-dark);transform:scale(1.04);box-shadow:0 6px 18px rgba(29,122,63,0.25);}

    /* ===============================================================
       FOOTER
    =============================================================== */
    footer{
      background: #ffffff;
      color: var(--text-muted, #555);
      padding: 56px clamp(16px,3vw,36px) 20px;
      border-top: 2px solid rgba(29,122,63,0.12);
      position: relative;
    }
    footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 10L50 30L70 22L58 42L78 50L58 50L70 68L50 60L40 80L30 60L10 68L22 50L2 50L22 42L10 22L30 30Z' fill='none' stroke='rgba(29,122,63,0.04)' stroke-width='0.8'/%3E%3C/svg%3E");
      background-size: 80px 80px;
      pointer-events: none;
    }
    .footer-grid{
      max-width:1200px;margin:0 auto;
      display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px;
      position: relative;
      /* responsive: min-width prevents overflow */
      min-width:0;
    }
    .footer-brand-name{font-family:'Amiri',serif;font-size:22px;color:var(--green);font-weight:700;}
    .footer-brand-sub{font-size:11px;color:#9ca3af;margin-bottom:8px;letter-spacing:0.5px;}
    .footer-txt{font-size:13px;color:#6b7280;line-height:2;margin-top:10px;}
    .footer-cr{font-family:'Amiri',serif;font-size:13px;color:var(--green);margin-top:10px;opacity:0.8;}
    .footer-col-t{
      font-size:14px;font-weight:700;color:var(--green-dark);
      margin-bottom:14px;padding-bottom:8px;
      border-bottom: 2px solid rgba(29,122,63,0.12);
      display: flex; align-items: center; gap: 6px;
    }
    .footer-col-t::before { content:''; width:3px; height:14px; background:linear-gradient(180deg,var(--green),var(--gold,#c9a227)); border-radius:2px; }
    .footer-ul{list-style:none;}
    .footer-ul li{margin-bottom:9px;}
    .footer-ul a{
      color:#6b7280;text-decoration:none;font-size:13px;
      transition:var(--transition);display:flex;align-items:center;gap:6px;
    }
    .footer-ul a::before{content:'‹';color:var(--green);font-size:14px;font-weight:700;transition:var(--transition);}
    .footer-ul a:hover{color:var(--green);padding-right:4px;}
    .footer-ul a:hover::before{color:var(--gold,#c9a227);}
    .footer-bar{
      border-top:1px solid rgba(29,122,63,0.1);padding-top:18px;
      display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
      max-width:1200px;margin:0 auto;
      position: relative;
    }
    .footer-bar-txt{font-size:11px;color:#9ca3af;}
    .footer-socials{display:flex;gap:8px;}
    .soc-btn{
      width:36px;height:36px;border-radius:50%;
      background:#f0faf4;border:1.5px solid rgba(29,122,63,0.2);
      display:flex;align-items:center;justify-content:center;
      color:var(--green);font-size:14px;text-decoration:none;
      transition:var(--transition);
    }
    .soc-btn:hover{background:var(--green);color:#fff;transform:translateY(-3px);box-shadow:0 6px 16px rgba(29,122,63,0.3);}

    /* ===============================================================
       SCROLL TOP
    =============================================================== */
    #goTop{
      position:fixed;bottom:28px;inset-inline-end:28px;
      width:46px;height:46px;border-radius:50%;
      background:var(--green);color:#fff;border:none;
      display:flex;align-items:center;justify-content:center;
      font-size:16px;cursor:pointer;
      box-shadow:0 4px 16px rgba(29,122,63,0.35);
      transition:var(--transition);opacity:0;pointer-events:none;z-index:var(--z-top);
    }
    #goTop.show{opacity:1;pointer-events:auto;}
    #goTop:hover{background:var(--green-dark);transform:translateY(-3px);box-shadow:0 8px 22px rgba(29,122,63,0.45);}

    /* ===============================================================
       REVEAL
    =============================================================== */
    .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
    .reveal.visible{opacity:1;transform:translateY(0);}

    /* ===============================================================
       RESPONSIVE — شاملة لجميع الشاشات
    =============================================================== */

    /* ── Tablet كبير ≤ 1200px ── */
    @media(max-width:1200px){
      .header-main{padding:14px 24px;}
      .header-info{max-width:460px;}
      .nav-inner{padding:0 24px;}
      .nav-list li a{padding:14px 10px;font-size:13px;}
    }

    /* ── Tablet ≤ 960px ── */
    @media(max-width:960px){
      .header-info{max-width:380px;}
      .values-wrap{grid-template-columns:1fr;}
      /* features: 2-col on tablet */
      .features-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:18px;}
      /* footer: 3-col layout (brand + 2 links) */
      .footer-grid{grid-template-columns:1.5fr 1fr 1fr;gap:24px;}
      .footer-grid > div:last-child{grid-column:1/-1;}
      .books-grid{grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:18px;}
      .section-pad{padding:60px clamp(16px,2.5vw,24px);}
      /* nav: reduce font to fit all links */
      .nav-list li a{padding:14px 8px;font-size:12.5px;}
    }

    /* ── Mid-tablet ≤ 880px — show hamburger, تحويل nav ── */
    @media(max-width:880px){
      .nav-list{display:none !important;}
      .hamburger{display:flex !important;}
      .footer-grid{grid-template-columns:1fr 1fr;gap:24px;}
      .footer-grid > div:last-child{grid-column:auto;}
    }

    /* ── Tablet / موبايل كبير ≤ 768px ── */
    @media(max-width:768px){
      /* إخفاء nav الرئيسية (تمت بالفعل في 880px) */
      .nav-list{display:none !important;}
      .hamburger{display:flex !important;}
      /* ─── الساعة العائمة: شريط أفقي أسفل الشاشة ─── */
      .floating-clock{
        position:fixed;
        left:0; right:0; bottom:0; top:auto;
        transform:none;
        border-radius:0;
        border:none;
        border-top:2px solid rgba(29,122,63,0.2);
        padding:7px 16px;
        min-width:unset;
        width:100%;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        background:#fff;
        box-shadow:0 -2px 16px rgba(29,122,63,0.1);
        z-index:var(--z-clock);
      }
      .floating-clock:hover{min-width:unset;box-shadow:0 -2px 16px rgba(29,122,63,0.1);}
      .clk-icon{margin-bottom:0;font-size:15px;flex-shrink:0;}
      .clk-time{font-size:14px;letter-spacing:1px;}
      .clk-date{margin-top:0;font-size:10px;text-align:center;flex:1;}
      .clk-label{
        margin-top:0;border-top:none;padding-top:0;
        border-inline-end:1px solid rgba(29,122,63,0.15);
        padding-inline-end:10px;
        font-size:9px;
      }

      /* ─── الهيدر: تكديس عمودي ─── */
      /* ─── الهيدر: تكديس عمودي منظم ─── */
      .header-main{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:12px;
        padding:16px 14px;
      }
      .header-info{
        align-items:center;
        text-align:center;
        max-width:100%;
      }
      .header-titles-grid{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:8px;
        width:100%;
      }
      .header-author-block{
        text-align:center !important;
      }
      .header-meta-row{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:4px;
      }
      .header-rights{
        text-align:center;
      }

      /* ─── Mobile overlay ─── */
      .mobile-overlay a{font-size:18px;padding:12px 30px;width:min(90%,320px);}
      .mob-close{top:16px;inset-inline-start:16px;width:42px;height:42px;font-size:16px;}

      /* ─── Hero ─── */
      .hero{height:auto;min-height:340px;padding:50px 16px;}
      .hero-ring:nth-child(3),.hero-ring:nth-child(4){display:none;}

      /* ─── Stats: شبكة 2×2 ─── */
      .stats-grid{
        grid-template-columns:repeat(2,1fr);
        border:1px solid rgba(29,122,63,0.08);
        border-radius:16px;
        overflow:hidden;
        margin:0 12px;
      }
      .stat{padding:20px 10px;border-inline-start:1px solid rgba(29,122,63,0.08);}
      .stat:first-child,.stat:nth-child(3){border-inline-start:none;}
      .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid rgba(29,122,63,0.08);}
      .stat-num{font-size:26px;}
      .stat-icon{width:44px;height:44px;font-size:18px;}

      /* ─── Section Pad ─── */
      .section-pad{padding:48px 16px;}
      .section-head{margin-bottom:32px;}
      .section-title{font-size:clamp(20px,5vw,28px);}

      /* ─── Books: 2 columns ─── */
      .books-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
        max-width:100%;
        padding:0 2px;
      }
      .book-cover{height:180px;}
      .book-info{padding:10px 12px;}
      .book-name{font-size:13.5px;}

      /* ─── Features ─── */
      .features-grid{grid-template-columns:1fr;gap:14px;}
      .feat{padding:22px 18px;}
      .feat-icon{width:56px;height:56px;font-size:22px;}
      .feat-title{font-size:18px;}

      /* ─── Contact form ─── */
      .contact-form{flex-direction:column;gap:10px;}
      .contact-input{width:100%;}
      .contact-submit{width:100%;padding:13px;}
      .contact-sec{padding:48px 16px;}

      /* ─── Accordion ─── */
      .acc-title{font-size:16px;}
      .acc-head{padding:14px;}

      /* ─── Footer: single column ─── */
      .footer-grid{grid-template-columns:1fr;gap:20px;}
      .footer-grid > div:last-child{grid-column:auto;}
      footer{padding:36px 16px 16px;}
      .footer-bar{flex-direction:column;text-align:center;gap:12px;}
      .footer-socials{justify-content:center;}
      .footer-brand-name{font-size:20px;}

      /* ─── Scroll-to-top: above clock bar ─── */
      #goTop{bottom:58px;inset-inline-end:16px;width:40px;height:40px;font-size:14px;}

      /* ─── مسافة سفلية للصفحة تحت شريط الساعة ─── */
      body{padding-bottom:64px;}
    }

    /* ── موبايل 430px ── */
    @media(max-width:430px){
      .nav-inner{padding:0 12px;}
      .books-grid{gap:10px;}
      .book-cover{height:165px;}
      .book-btn{font-size:11.5px;padding:7px 4px;}
      .section-pad{padding:42px 14px;}
    }

    /* ── موبايل صغير ≤ 414px ── */
    @media(max-width:414px){
      .header-main{padding:14px;}
      .header-logo img{width:82px;}
      .books-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
      .book-cover{height:155px;}
    }

    /* ── موبايل صغير ≤ 390px ── */
    @media(max-width:390px){
      .header-logo img{width:76px;}
      .hero{height:auto;min-height:300px;padding:40px 12px;}
      .hero-ring:nth-child(2){display:none;}
      .stats-grid{margin:0 10px;}
      .stat-num{font-size:24px;}
      .stat-label{font-size:11px;}
      .section-pad{padding:38px 14px;}
      .feat{padding:20px 16px;}
      .feat-title{font-size:17px;}
      .feat-desc{font-size:12.5px;}
      .contact-title{font-size:24px;}
      .contact-desc{font-size:13px;}
      footer{padding:30px 14px 14px;}
      .footer-brand-name{font-size:18px;}
      .footer-col-t{font-size:13px;}
      .footer-ul a{font-size:12.5px;}
      .footer-bar-txt{font-size:10.5px;}
      .soc-btn{width:32px;height:32px;font-size:12px;}
      .btn-gold,.btn-outline-w{padding:11px 20px;font-size:13px;}
      .acc-title{font-size:15px;}
      .acc-icon{width:34px;height:34px;font-size:13px;}
      .about-avatar{width:72px;height:72px;font-size:28px;}
      .about-name{font-size:17px;}
      .about-quote{font-size:14px;}
      .mobile-overlay a{font-size:17px;padding:11px 24px;}
    }

    /* ── موبايل صغير ≤ 360px ── */
    @media(max-width:360px){
      .header-main{padding:12px;}
      .header-logo img{width:66px;}
      .header-dots{display:none;}
      .stat-num{font-size:20px;}
      .books-grid{gap:8px;}
      .book-cover{height:140px;}
      .book-cover-icon{font-size:20px;}
      .book-cover-t{font-size:11px;}
      .book-name{font-size:12px;}
      .book-btn{font-size:10.5px;padding:6px 3px;gap:2px;}
      .section-pad{padding:32px 12px;}
    }

    /* ── موبايل صغير جداً ≤ 320px ── */
    @media(max-width:320px){
      .header-main{padding:10px;}
      .header-logo img{width:58px;}
      .nav-inner{padding:0 8px;}
      .books-grid{grid-template-columns:1fr;}
      .book-cover{height:180px;}
      .stats-grid{grid-template-columns:repeat(2,1fr);margin:0 6px;}
      .stat{padding:16px 8px;}
      .stat-num{font-size:18px;}
      .section-pad{padding:28px 10px;}
      .feat-title{font-size:16px;}
      .feat-desc{font-size:12px;}
      .about-quote{font-size:13.5px;}
    }
  

    /* ===============================================================
       IDENTITY STACK — الهوية البصرية في منتصف الصفحة (Hero)
       الترتيب: علم ودليل ← أول منارة لغد أفضل ← الإسلام وما ينبغي...
    =============================================================== */
    .identity{
      position:relative; z-index:2;
      display:flex; flex-direction:column; align-items:center;
      text-align:center; gap:8px;
      max-width:min(92vw, 860px);
      padding:24px 20px;
    }
    .id-title{
      font-family:'Reem Kufi', 'Amiri', serif;
      font-size:clamp(2rem, 5.8vw, 3.8rem);
      font-weight:700; color:var(--green-deep);
      line-height:1.35; letter-spacing:.5px;
      margin-bottom:2px;
    }
    .id-sub{
      font-family:'Reem Kufi', 'Amiri', serif;
      font-size:clamp(1rem, 2.2vw, 1.35rem);
      font-weight:500; color:var(--gold,#b8962e);
      letter-spacing:1px;
    }
    .id-name{
      font-family:'Reem Kufi', 'Amiri', serif;
      font-size:clamp(1.2rem, 2.8vw, 1.85rem);
      font-weight:700; color:var(--green-dark); line-height:1.6;
    }
    .id-divider{
      display:flex; align-items:center; gap:12px;
      width:min(320px, 70%); margin:16px 0 10px; color:var(--gold-light,#d4af37);
    }
    .id-divider span{ flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(29,122,63,.45)); }
    .id-divider span:last-child{ background:linear-gradient(90deg, rgba(29,122,63,.45), transparent); }
    .id-guide{
      font-family:'Reem Kufi', 'Amiri', serif;
      font-size:clamp(1.35rem, 3.8vw, 2.4rem);
      font-weight:700; color:var(--green); letter-spacing:1.5px;
    }
    .id-beacon{
      font-family:'Reem Kufi', 'Cairo', sans-serif;
      font-size:clamp(1.05rem, 2.5vw, 1.45rem);
      font-weight:600; color:var(--green-dark);
    }
    .id-desc{
      font-family:'Reem Kufi', 'Cairo', sans-serif;
      font-size:clamp(.92rem, 2.1vw, 1.18rem);
      font-weight:500; color:var(--text-light); line-height:1.9;
    }
    .id-rights{
      margin-top:20px;
      font-family:'Reem Kufi', 'Amiri', serif;
      font-size:clamp(.75rem, 1.6vw, .88rem);
      color:#8a8a8a; overflow-wrap:anywhere;
    }

    /* ===============================================================
       MOBILE HARDENING — إضافات أمان العرض على الشاشات الصغيرة
       (لا تؤثر على تصميم الكمبيوتر)
    =============================================================== */
    img, video{ max-width:100%; }

    /* ── ≤ 480px ── */
    @media(max-width:480px){
      /* نماذج البحث لا تفيض */
      .bks-search-form,.br-search-form,.bi-search-form{ flex-wrap:wrap; }
      .bks-search-wrap,.br-search-wrap,.bi-search-wrap{ min-width:0; }
      /* الجداول العريضة داخل حاويات قابلة للتمرير */
      .bi-table-wrap,.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
      /* النوافذ المنبثقة لا تتجاوز الشاشة */
      .book-modal-box{ max-width:min(650px, calc(100vw - 24px)); }
      /* الحد الأدنى لمس اللمس للأزرار الصغيرة */
      .book-btn{ min-height:34px; }
      /* الهيرو يتوسع تلقائياً لاستيعاب نصوص الهوية دون قص */
      .hero{ height:auto; min-height:300px; padding:44px 12px; }
      .id-rights{ max-width:92vw; }
    }

    /* ── الساعة على الجوال تبقى شريطاً سفلياً بعرض كامل ── */
    @media(max-width:768px){
      .floating-clock{ right:0; left:0; border-radius:0; border-right:none; }
      /* منع تغطية شريط الساعة لمحتوى عارض الكتاب */
      body:has(.bv-wrap){ padding-bottom:0 !important; }
    }