:root{
  --green:#0f4038; --green-d:#07211d; --green-l:#17584c;
  --gold:#c89b43; --gold-l:#e5c680;
  --cream:#fbf6ea; --cream-2:#f3ead6;
  --ink:#1d2a26; --ink-soft:#4a5a55;
  --radius:18px;
  --shadow:0 18px 40px -22px rgba(7,33,29,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Tajawal","Segoe UI",sans-serif; font-size:17px; line-height:1.9;
  overflow-x:hidden;
}
h1,h2,h3,.brand-txt{font-family:"Amiri",serif; font-weight:700; line-height:1.4; margin:0}
a{color:inherit;text-decoration:none}
.wrap{width:min(1150px,100% - 32px); margin-inline:auto}

/* خلفية زخرفية */
.pattern-bg{
  position:fixed; inset:0; z-index:-1; opacity:.5;
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%230f4038' stroke-opacity='0.09'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3C/g%3E%3C/svg%3E");
}

/* الهيدر */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:rgba(251,246,234,.85); border-bottom:1px solid rgba(15,64,56,.12)}
.nav-in{display:flex; align-items:center; gap:18px; min-height:70px}
.brand{display:flex; align-items:center; gap:10px; font-size:1.3rem}
.brand-mark{width:30px;height:30px;flex:0 0 auto;border-radius:8px;
  background:linear-gradient(135deg,var(--green),var(--green-l));
  box-shadow:inset 0 0 0 2px var(--gold-l)}
.links{display:flex; gap:22px; margin-inline-start:auto; font-size:.98rem; color:var(--ink-soft)}
.links a{position:relative; padding:4px 0}
.links a::after{content:""; position:absolute; inset-inline:0; bottom:0; height:2px;
  background:var(--gold); transform:scaleX(0); transition:.25s}
.links a:hover{color:var(--green)}
.links a:hover::after{transform:scaleX(1)}
.wa-btn{display:inline-flex; align-items:center; gap:8px; background:var(--green);
  color:var(--cream); padding:9px 16px; border-radius:999px; font-size:.92rem;
  box-shadow:var(--shadow); transition:.25s; border:0; cursor:pointer;
  font-family:inherit}
.wa-btn:hover{background:var(--green-l); transform:translateY(-1px)}
.wa-btn svg{width:18px;height:18px;fill:var(--gold-l);flex:0 0 auto}

/* الهيرو */
.hero{position:relative; padding:60px 0 0; overflow:hidden}
.hero::before{content:""; position:absolute; inset-inline:0; top:0; height:72%;
  background:radial-gradient(90% 120% at 80% 0%,rgba(23,88,76,.16),transparent 60%)}
.hero-in{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
  position:relative; min-height:460px}
.eyebrow{color:var(--gold); letter-spacing:.14em; font-size:.85rem; margin:0 0 10px}
.hero h1{font-size:clamp(2.4rem,5vw,3.6rem); color:var(--green-d)}
.role{color:var(--green-l); margin:8px 0 0; font-weight:500}
.lede{color:var(--ink-soft); font-size:1.08rem; margin:16px 0 0; max-width:34ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.btn{display:inline-block; padding:12px 24px; border-radius:999px; font-weight:500; transition:.25s}
.btn-primary{background:var(--green); color:var(--cream); box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--green-l); transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(15,64,56,.3); color:var(--green)}
.btn-ghost:hover{background:rgba(15,64,56,.07)}
.btn.big{padding:15px 36px; font-size:1.05rem}

/* فاصل زخرفي */
.divider{display:flex; align-items:center; justify-content:center; gap:14px; padding:46px 0 10px}
.divider span{height:1px; width:min(200px,22vw); background:linear-gradient(90deg,transparent,var(--gold))}
.divider span:last-child{background:linear-gradient(270deg,transparent,var(--gold))}
.divider i{width:14px;height:14px;background:var(--gold);transform:rotate(45deg);display:block}

/* عرض الكتب ثلاثي الأبعاد */
.hero-art{display:flex; justify-content:center; perspective:1400px}
.shelf-3d{position:relative; width:250px; height:368px; transform-style:preserve-3d}
.shelf-3d .stage{position:absolute; inset:0; padding:0}
.shelf-3d .stage:nth-child(1){transform:translateZ(60px) scale(.95); z-index:3}
.shelf-3d .stage:nth-child(2){transform:translateX(-62px) translateZ(-40px) scale(.8); opacity:.75}
.shelf-3d .stage:nth-child(3){transform:translateX(62px) translateZ(-40px) scale(.8); opacity:.75}

.stage{perspective:1300px; perspective-origin:50% 40%; padding:14px 0 22px; cursor:grab;
  touch-action:pan-y}
.stage.dragging{cursor:grabbing}
.book3d{
  position:relative; width:100%; aspect-ratio:21/31; transform-style:preserve-3d;
  transform:rotateY(-26deg) rotateX(6deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.stage:hover .book3d{transform:rotateY(-8deg) rotateX(2deg)}
.stage.dragging .book3d{transition:none}
.book3d.spin{animation:spin 16s linear infinite}
.stage:hover .book3d.spin,.stage.dragging .book3d.spin{animation-play-state:paused}
@keyframes spin{from{transform:rotateY(-26deg) rotateX(6deg)}to{transform:rotateY(334deg) rotateX(6deg)}}
.face{position:absolute; inset:0; backface-visibility:hidden; border-radius:4px 10px 10px 4px;
  overflow:hidden}
.face.front{transform:translateZ(16px); box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.face.front img{width:100%;height:100%;object-fit:cover;display:block}
.face.back{transform:translateZ(-16px) rotateY(180deg);
  background:linear-gradient(135deg,var(--green-d),#0b2c26)}
.face.back .bk{padding:16px; color:var(--cream-2); font-size:.78rem; line-height:1.8;
  text-align:center; display:flex; align-items:center; justify-content:center; height:100%}
.spine{position:absolute; top:0; bottom:0; width:32px; inset-inline-end:-16px;
  transform:rotateY(90deg); transform-origin:center;
  background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0) 35%),var(--green-d);
  display:flex; align-items:center; justify-content:center}
.spine b{color:var(--gold-l); font-size:.7rem; writing-mode:vertical-rl; white-space:nowrap;
  font-family:"Amiri",serif}
.pages{position:absolute; top:3px; bottom:3px; width:30px; inset-inline-start:-15px;
  transform:rotateY(90deg);
  background:repeating-linear-gradient(90deg,#fff,#fff 2px,#e3dcc8 3px)}
.glare{position:absolute; inset:0; transform:translateZ(17px); pointer-events:none;
  border-radius:4px 10px 10px 4px;
  background:linear-gradient(115deg,rgba(255,255,255,.28),rgba(255,255,255,0) 42%)}
.book-shadow{height:16px; margin:-8px 14% 10px;
  background:radial-gradient(50% 100% at 50% 0,rgba(7,33,29,.33),rgba(7,33,29,0) 70%)}

/* عن الشيخ */
.about{padding:20px 0 10px}
.sec-title{font-size:clamp(1.7rem,3.4vw,2.3rem); color:var(--green-d); text-align:center}
.sec-title::after{content:""; display:block; width:70px; height:2px; background:var(--gold);
  margin:14px auto 0}
.sec-sub{text-align:center; color:var(--ink-soft); margin:14px 0 0}
.about-card{max-width:800px; margin:30px auto 0; background:#fff;
  border:1px solid rgba(15,64,56,.12); border-radius:var(--radius); padding:30px 32px;
  box-shadow:var(--shadow)}
.about-card p{margin:0 0 14px; color:var(--ink-soft)}
.about-card p:last-child{margin:0}

/* شبكة الكتب */
.books{padding:64px 0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:30px;
  margin-top:38px}
.card{background:#fff; border:1px solid rgba(15,64,56,.12); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:.3s}
.card:hover{transform:translateY(-4px); border-color:rgba(200,155,67,.6)}
.card h3{font-size:1.35rem; color:var(--green-d); margin-top:4px}
.card .sub{color:var(--gold); font-size:.84rem; margin:4px 0 0}
.card .desc{color:var(--ink-soft); font-size:.95rem; margin:12px 0 18px; flex:1}
.price-row{display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px dashed rgba(15,64,56,.2); padding-top:14px; margin-top:auto}
.price{font-family:"Amiri",serif; font-size:1.5rem; color:var(--green); white-space:nowrap}
.price small{font-size:.78rem; color:var(--ink-soft)}
.card .wa-btn{box-shadow:none}

/* التوصيل */
.delivery{padding:10px 0 70px}
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px;
  margin-top:34px}
.info{background:linear-gradient(160deg,var(--green),var(--green-d)); color:var(--cream);
  border-radius:var(--radius); padding:24px;
  box-shadow:inset 0 0 0 1px rgba(229,198,128,.35),var(--shadow)}
.info h3{color:var(--gold-l); font-size:1.15rem; margin-bottom:8px}
.info p{margin:0; color:#e9e2cf; font-size:.95rem}
.info.note{grid-column:1/-1; background:#fff; color:var(--ink-soft);
  box-shadow:inset 0 0 0 1px rgba(15,64,56,.14)}
.info.note h3{color:var(--green-d)}

/* تواصل */
.contact{padding:70px 0 80px; text-align:center;
  background:linear-gradient(180deg,rgba(15,64,56,0),rgba(15,64,56,.07))}
.contact p{color:var(--ink-soft); margin:18px 0 26px}

.foot{background:var(--green-d); color:#cfe0da; text-align:center; padding:28px 0}
.foot p{margin:0}
.foot .small{opacity:.6; font-size:.85rem; margin-top:6px}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr; text-align:center; padding-bottom:10px}
  .lede{margin-inline:auto}
  .hero-cta{justify-content:center}
  .links{display:none}
  .hero-art{order:-1}
  .shelf-3d{width:200px;height:295px}
}
@media (max-width:520px){
  .about-card{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .book3d.spin{animation:none}
}