/* Emerald + gold design inspired by the approved Al Qaul Sadeed landing-page mockup.
   Book cover is the actual app asset; smartphone screen is an illustrative feature preview. */
:root{--wine:#086342;--wine-dark:#014534;--wine-deep:#032f25;--ruby:#12845c;--gold:#c6a15c;--gold-light:#f4dfad;--ink:#17372b;--slate:#66756e;--cream:#fffaf0;--paper:#f7f1e5;--line:#e8decb;--white:#fff;--shadow:0 22px 60px rgba(14,52,38,.12)}
body{background:#fffdfa;color:var(--ink)}
a:hover{color:var(--wine)}::selection{background:#e4ead4;color:#032f25}
.eyebrow{color:#0a7250}.site-header{background:rgba(255,254,250,.97);border-bottom:1px solid #e2dfd2}
.brand img{box-shadow:0 5px 16px #00432a26}.brand-name{color:#043d2c}.brand-sub{color:#846d3c}
.nav-links a{color:#31443a}.nav-links a.active:not(.btn){color:#04694b}.nav-links a:not(.btn):after{background:#087550}
.btn-primary{background:#006242;box-shadow:0 11px 22px #02523d28}.btn-primary:hover{background:#044a36}
.btn-outline{border-color:#ddcda9;color:#006344!important}.btn-light{color:#006244!important}
.hero{padding:80px 0 90px;background:#023c2e url('../images/hero-banner.svg') center center/cover no-repeat;border:0;color:#fff;position:relative;isolation:isolate}
.hero:after{height:3px;background:linear-gradient(90deg,#e7c883,#8c671f,#e7c883);opacity:.7}
.hero-grid{grid-template-columns:1.03fr 1fr;gap:25px;align-items:center;position:relative;z-index:1}
.hero-content{padding:12px 0 25px}.hero-eyebrow{color:#e9ce94;font-size:.74rem;letter-spacing:.15em;margin:0 0 18px}
.hero .hero-arabic{font-size:clamp(3.1rem,5.7vw,6.1rem);font-weight:750;line-height:1.35;color:#fff4db;margin:0;text-shadow:0 3px 30px #0006}
.ornament{display:flex;align-items:center;gap:12px;color:#ebbe66;font-size:1.4rem;margin:3px 0 7px}.ornament i{display:block;height:1px;width:75px;background:linear-gradient(90deg,#dbb36d,transparent)}.ornament i:first-child{transform:rotate(180deg)}
.hero h1{font-size:clamp(3rem,5vw,5.25rem);color:#fff8e8;line-height:1.08;max-width:690px;margin:0 0 16px;letter-spacing:-.055em}.hero h1 em{font-style:normal;color:#f5d18e}
.hero-tagline{font-weight:760;color:#f4d896;letter-spacing:.02em;font-size:clamp(.98rem,1.2vw,1.16rem);margin-bottom:20px}
.hero-copy{color:#ecf0e6;font-size:1.08rem;max-width:530px;line-height:1.85;margin-bottom:26px}.hero-copy strong{color:#fff}
.hero-actions{gap:12px}.btn-gold{background:linear-gradient(120deg,#e8c77c,#c69a42);color:#0b3226!important;border-color:#fff4ca55;box-shadow:0 11px 30px #001d1840}.btn-gold:hover{background:#f2d99a;color:#003928!important}
.btn-hero-outline{background:#e7f5e40b;color:#fff!important;border-color:#d4bd83a1}.btn-hero-outline:hover{background:#ffffff1b;color:#fff!important}
.hero-note{color:#e0d8c4;font-size:.79rem;opacity:.82;margin-top:13px}
.hero-visual{min-height:575px;display:block;position:relative}.cover-frame{position:absolute;left:3%;top:60px;width:48%;max-width:285px;z-index:2;padding:6px;border-radius:5px;transform:rotate(-7deg);box-shadow:13px 18px 0 #d3a85c40,0 22px 50px #0009;background:#fff;border:1px solid #fff5d8}
.cover-frame img{width:100%;height:auto;aspect-ratio:1479/2106;object-fit:cover}
.cover-frame:before{inset:6px}
.phone-demo{position:absolute;right:1%;top:3%;z-index:3;width:51%;max-width:266px;height:532px;border-radius:40px;border:8px solid #111a17;background:#111b17;box-shadow:12px 22px 45px #001c1785,0 0 0 2px #b7a36a,0 0 0 3px #072219;overflow:hidden;transform:rotate(5deg)}
.phone-ear{position:absolute;z-index:3;top:8px;left:50%;transform:translateX(-50%);width:86px;height:21px;border-radius:0 0 13px 13px;background:#111b17}
.phone-display{position:absolute;inset:0;border-radius:30px;background:#f9f5e9;overflow:hidden;color:#083c2b;padding:28px 14px 15px;text-align:center}
.phone-top{display:flex;justify-content:space-between;align-items:center;color:#f5ead2;font-size:10px;font-weight:800;height:26px;margin:-28px -14px 10px;padding:5px 23px 0;background:#01563e}.phone-bars{letter-spacing:2px;font-size:11px}
.phone-brand{background:linear-gradient(150deg,#035338,#007452);border-radius:15px;margin:0 auto 0;min-height:125px;display:flex;gap:10px;align-items:center;justify-content:center;flex-direction:column;padding:10px 4px;box-shadow:0 5px 10px #003b2c20}.phone-brand img{width:52px;height:52px}.phone-brand span{color:#ffedbe;font-size:1.4rem;line-height:1.3;font-weight:740}
.phone-app-sub{color:#7b6b4f;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;margin:12px 0}
.phone-option{display:flex;align-items:center;gap:10px;padding:11px 12px;text-align:left;background:#fff;border-radius:11px;margin:8px 0;box-shadow:0 3px 10px #103c2a0b;border:1px solid #ebe4d5;font-size:12px;font-weight:770;color:#184734}
.phone-option>span:last-child{margin-left:auto;font-size:22px;line-height:1;color:#7b9683}.phone-feature-icon{font-size:20px;color:#006644;width:20px;line-height:1}
.phone-caption{font-size:9px;color:#807e72;margin:17px 0 0}
.hero-visual .visual-chip{position:absolute;left:1%;bottom:30px;z-index:4;background:#fff9e8;color:#07563f;transform:rotate(-4deg);font-size:.82rem;box-shadow:0 10px 22px #001c1859;border:1px solid #e0ba67}
.hero-visual .visual-chip span{color:#af873b}
.hero-bottom-wave{position:absolute;bottom:-1px;left:0;right:0;height:42px;background:#fffdfa;clip-path:polygon(0 72%,22% 38%,49% 68%,75% 35%,100% 72%,100% 100%,0 100%)}
.ribbon{background:#014d37}.ribbon p{color:#fff6dc}.ribbon .arabic{color:#e6c780}
.features{background:#fffdfa}.section-head h2{color:#082f23}.feature-card{border-color:#e9e1d0;background:#fffdf7;box-shadow:0 4px 14px #153e2b05}.feature-card:hover{border-color:#cfb37a;box-shadow:0 16px 35px #103c2815}.feature-ico{background:#e9f2e9;border-color:#d1e5d6;color:#05704f}.feature-card h3{color:#063e2d}
.about{background:#f9f5e9}.about-copy h2{color:#073b2c}.about-step strong{color:#083f2e}.step-num{color:#016244;border-color:#d8c48b;background:#fffef5}
.book-detail{background:#f5ecdf;border-color:#fff;box-shadow:0 16px 45px #153e2b14}.book-detail:after{background:linear-gradient(0deg,#003a2eae,transparent 48%)}
.quote-band{background:#07563c}.quote-band:before{opacity:.07}.quote-band p{color:#efe9d9}
.faq{background:#fffefa}.faq details{background:#fffefa;border-color:#e7e0d1}.faq summary{color:#064532}.faq summary:hover{color:#00734c}
.cta{background:#f9f5e9}.cta-panel{background:linear-gradient(110deg,#003f2b,#036948);border:1px solid #bb9c52}.cta-panel:before{border-color:#d7af6540}.cta-panel p{color:#e6f4e9}
.site-footer{background:#013728}.site-footer .brand-name{color:#fff4d9}.site-footer .brand-sub{color:#d6bf82}.footer-intro,.footer-links a,.footer-bottom{color:#c5d8cc}.footer-title{color:#f2d9a2}
.page-hero{background:#033e2e url('../images/hero-banner.svg') center/cover;border-bottom:3px solid #ceaa61;color:#fff}.page-hero h1{color:#fff4da}.page-hero p{color:#e9f2e8}.breadcrumb{color:#e1cda8}.breadcrumb a{color:#ffe3a2}
.legal{background:#fffefa}.toc{background:#f7f5eb;border-color:#e2dbc8}.toc>strong{color:#045b43}.toc a{color:#60746a}.legal-copy h2{color:#063d2e}.legal-copy a{color:#006646}.legal-copy strong{color:#24392e}.legal-stamp{background:#e9f1e9;color:#086344}.info-panel{background:#f4f7ed;border-color:#c9d9c0}
.contact-card{border-color:#e0ddcc}.contact-card h2{color:#063e2d}.contact-method{background:#f5f7ed}.contact-aside{background:linear-gradient(135deg,#003c2d,#087350)}.contact-aside p,.contact-aside li{color:#e6f3e9}.notfound h1,.notfound h2{color:#056443}
@media(max-width:1100px){.phone-demo{width:54%;max-width:240px;height:490px}.phone-brand{min-height:116px}.phone-option{padding:10px 9px}.hero-visual{min-height:535px}.cover-frame{top:55px}}
@media(max-width:800px){.nav-links{background:#fffffa}.hero{padding:60px 0 74px}.hero-grid{grid-template-columns:1fr;gap:5px}.hero-content{text-align:center}.hero .hero-arabic{font-size:clamp(3rem,10vw,5.25rem)}.ornament{justify-content:center}.hero h1{margin:0 auto 14px}.hero-copy{margin-left:auto;margin-right:auto}.hero-visual{min-height:575px;width:min(550px,100%);margin:auto}.cover-frame{left:11%;top:43px;width:46%}.phone-demo{right:7%;top:10px;width:46%;height:520px;max-width:260px}.hero-visual .visual-chip{left:5%;bottom:30px}.hero-bottom-wave{height:28px}}
@media(max-width:520px){.hero{padding-top:45px}.hero .hero-arabic{font-size:clamp(2.6rem,10.5vw,3.5rem)}.hero h1{font-size:clamp(2.6rem,10vw,3.8rem)}.hero-tagline{font-size:.96rem}.hero-copy{font-size:1rem}.hero-eyebrow{font-size:.64rem;letter-spacing:.08em}.hero-actions .btn{width:100%;min-height:48px}.hero-visual{min-height:435px}.cover-frame{left:2%;top:35px;width:49%;max-width:200px}.phone-demo{right:0;top:15px;width:51%;height:412px;border-radius:29px;border-width:6px}.phone-display{border-radius:23px;padding:25px 9px 10px}.phone-top{margin:-25px -9px 8px;padding:4px 14px 0}.phone-brand{min-height:91px;gap:3px;border-radius:11px}.phone-brand img{width:38px;height:38px}.phone-brand span{font-size:1rem}.phone-app-sub{margin:8px 0;font-size:8px}.phone-option{font-size:10px;padding:8px 7px;margin:6px 0;gap:7px}.phone-feature-icon{font-size:15px;width:15px}.phone-option>span:last-child{font-size:16px}.phone-caption{font-size:8px;margin-top:8px}.hero-visual .visual-chip{left:0;bottom:7px;font-size:.69rem}.page-hero{padding:47px 0}}