/* Estekhara.com - new design 2026 */
@font-face{font-family:'Estekhara';src:url('fonts/ge-ss-med.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'Uthman';src:url('fonts/UthmanTN1.otf');font-weight:400;font-display:swap;}
@font-face{font-family:'Uthman';src:url('fonts/UthmanTN1B.otf');font-weight:700;font-display:swap;}
:root{color-scheme:light only;--navy:#023681;--navy2:#003ea1;--gold:#fecf21;--sky:#4fd0ef;--ink:#1d2b45;--bg:#f7f5ef;}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Estekhara',Tahoma,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;min-height:100vh;display:flex;flex-direction:column;direction:rtl}
a{color:inherit}
img{max-width:100%;height:auto}

/* Header */
.hdr{background:linear-gradient(var(--navy),var(--navy2));position:relative;overflow:hidden;box-shadow:0 0 30px rgba(0,0,0,.3)}
.hdr:before{content:'';position:absolute;inset:0;background:url(../imgs/header-pattern@2x.png);background-size:250px}
.hdr-in{position:relative;max-width:1100px;margin:0 auto;padding:18px 16px 14px;display:flex;flex-direction:column;align-items:center;gap:6px}
.logo{position:relative;width:180px;height:145px;display:block}
.logo:before{content:'';position:absolute;width:131px;height:131px;border-radius:50%;left:24px;top:7px;background:linear-gradient(var(--navy),var(--navy2))}
.logo img{position:relative;width:100%;height:100%}
.hdr .right{display:flex;flex-direction:column;align-items:center;gap:8px}
.verse{font-family:'Uthman',serif;text-align:center;color:var(--gold);font-size:19px;line-height:1.9;text-shadow:0 1px 0 #000}
.verse .b{color:#fff;display:block}
.verse .s{color:var(--sky)}

/* Nav */
.nav{position:relative;display:flex;justify-content:center;gap:5px;flex-wrap:nowrap;padding:4px 0 2px}
.nav a{text-decoration:none;color:#fff;font-size:12.5px;padding:4px 10px;white-space:nowrap;border-radius:20px;border:1px solid rgba(255,255,255,.25)}
.nav a.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* Main */
main{flex:1 0 auto;width:100%;max-width:1000px;margin:0 auto;padding:22px 16px 30px}
.box{background:#fff;border-radius:18px;padding:24px 18px;box-shadow:0 4px 18px rgba(2,54,129,.08)}
.hero{text-align:center}
.hero h1,.box h1{font-size:22px;margin:0 0 6px;color:var(--navy)}
.hero p{margin:0 auto 16px;max-width:520px;font-size:15px;color:#4a5670}
.chips{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.chips span{font-size:12.5px;background:#eef3fb;color:var(--navy);padding:3px 11px;border-radius:14px}
.play img{width:190px;display:block;margin:0 auto}
.soon{display:inline-block;margin-top:14px;background:#FFF4D6;border:1px solid #E0B84A;color:#8B5A00;border-radius:12px;padding:5px 16px;font-size:14px}
.apk{display:block;margin-top:12px;font-size:13.5px;color:var(--navy)}
.attr{margin-top:18px;font-size:13px;color:#7b6a3a}

.cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
.card{background:#fff;border-radius:14px;padding:16px 18px;border-right:4px solid var(--gold);box-shadow:0 2px 10px rgba(2,54,129,.06);text-decoration:none;display:block}
.card h3{margin:0 0 4px;font-size:16px;color:var(--navy)}
.card p{margin:0;font-size:13.5px;color:#5a6680}

/* Text pages */
.text h3{color:var(--navy);font-size:17px;margin:18px 0 6px}
.text p{margin:0 0 12px;font-size:15px}
.text .photo{margin-top:16px;border-radius:14px;overflow:hidden}
.text .photo img{display:block;width:100%}
.green{color:#060}
.in-aya{color:#060;font-family:'Uthman',serif;font-size:1.1em}

/* FAQ */
.faq details{border:1px solid #e3e8f2;border-radius:12px;margin-bottom:10px;background:#fff;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:12px 16px;font-size:15.5px;color:var(--navy);display:flex;justify-content:space-between;gap:10px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font-size:20px;color:var(--gold);line-height:1}
.faq details[open] summary{background:#f3f6fc}
.faq details[open] summary:after{content:'–'}
.faq .ans{padding:4px 16px 14px;font-size:14.5px;white-space:pre-line}

/* Footer */
.ftr{flex-shrink:0;background:linear-gradient(var(--navy),var(--navy2));position:relative;color:#fff}
.ftr:before{content:'';position:absolute;inset:0;background:url(../imgs/footer-pattern@2x.png);background-size:350px;opacity:.6}
.ftr-in{position:relative;max-width:1000px;margin:0 auto;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ftr nav{display:flex;gap:18px}
.ftr nav a{color:var(--sky);text-decoration:none;font-size:14px}
.ftr small{color:var(--gold);font-size:12px;opacity:.9}

/* Computer */
@media(min-width:768px){
 .hdr-in{flex-direction:row-reverse;justify-content:space-between;align-items:center;padding:16px 24px}
 .logo{width:240px;height:193px}
 .logo:before{width:175px;height:175px;left:32px;top:9px}
 .hdr .right{align-items:flex-start;gap:12px}
 .verse{text-align:right;font-size:23px}
 .nav{justify-content:flex-start}
 .nav a{font-size:14px;padding:6px 14px}
 .box{padding:34px}
 .hero h1,.box h1{font-size:28px}
 .cards{grid-template-columns:repeat(3,1fr)}
 .ftr-in{flex-direction:row;justify-content:space-between}
}
.prose{white-space:pre-line;font-size:15px;margin-bottom:8px}
.prose ul,.faq .ans ul{white-space:normal;margin:6px 0;padding-right:20px}
.prose li,.faq .ans li{margin-bottom:4px}
/* Hover */
.nav a,.card,.ftr nav a,.apk,.play img{transition:all .2s ease}
.nav a:hover{background:rgba(255,255,255,.15);border-color:var(--gold);color:var(--gold)}
.nav a.on:hover{background:var(--gold);color:var(--navy)}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(2,54,129,.14)}
.ftr nav a:hover{color:#fff}
.apk:hover{color:var(--navy2);text-decoration:none}
.play:hover img{transform:scale(1.04)}
/* Full width white body (no box) */
body{background:#fff}
main{max-width:1100px;padding:26px 20px 36px}
.box,.hero{background:none;box-shadow:none;border-radius:0;padding:0}
.card{border:1px solid #e6ebf3;box-shadow:none;background:#fafbfd}
.cards{margin-top:28px}
@media(min-width:768px){.box{padding:0}}
.card{border-right:4px solid var(--gold)}
/* Home hero v2 - with app ornaments */
.hero2{position:relative;text-align:center;padding:34px 10px 10px}
.hero2:before{content:'';position:absolute;left:50%;top:-6px;width:min(720px,100%);height:260px;transform:translateX(-50%);background:url(../imgs/app/zakhrafa.png) center top/contain no-repeat;opacity:.55;pointer-events:none}
.hero2 > *{position:relative}
.hero2 h1{font-size:24px;margin:0 0 8px;color:var(--navy)}
.hero2 .lead{margin:0 auto 6px;font-size:15.5px;color:#4a5670}
.hero2 .meta{font-size:13px;color:#8a93a6;margin-bottom:22px}
.hero2 .meta i{font-style:normal;color:var(--gold);margin:0 8px}
.hero2 .play img{width:200px;display:block;margin:0 auto}
.hero2 .more{margin-top:14px;font-size:13.5px;color:#6b7590;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.hero2 .more a{color:var(--navy);text-decoration:none;border-bottom:1px dashed var(--navy)}
.hero2 .more a:hover{color:var(--navy2);border-bottom-style:solid}
.hero2 .soon2{color:#8B5A00}
.hero2 .sep{width:1px;height:14px;background:#cfd5e2}
.hero2 .orn{display:block;margin:26px auto 4px;width:200px;height:auto;opacity:.9}
.hero2 .attr{margin-top:0;font-size:13.5px;color:#7b6a3a}
.cards .card{position:relative;overflow:hidden;text-align:center;border:1px solid #e6ebf3;border-top:3px solid var(--gold);border-right-width:1px;border-right-color:#e6ebf3;background:#fff;padding:22px 18px 18px}
.cards .card:before{content:'';display:block;width:34px;height:33px;margin:0 auto 8px;background:url(../imgs/app/enter_corner.png) center/contain no-repeat}
.cards .card:after{content:'';position:absolute;left:-40px;bottom:-40px;width:130px;height:130px;background:url(../imgs/app/pattern.png) center/contain no-repeat;opacity:.35;pointer-events:none}
.cards .card h3,.cards .card p{position:relative}
@media(min-width:768px){.hero2{padding-top:44px}.hero2 h1{font-size:30px}.hero2:before{height:300px}}
.cards .card:after{opacity:.2}@media(max-width:767px){.hero2 h1{font-size:22px}}
/* Home hero v3 - text + phone mockup */
.hero3{display:flex;flex-direction:column;align-items:center;gap:30px;padding:16px 0 10px}
.h3-text{text-align:center;max-width:460px}
.h3-text h1{font-size:24px;margin:0 0 8px;color:var(--navy);line-height:1.5}
.h3-text .lead{margin:0 0 16px;font-size:15.5px;color:#4a5670}
.feats{list-style:none;margin:0 0 22px;padding:0;display:inline-flex;flex-direction:column;gap:6px;text-align:right}
.feats li{font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:9px}
.feats li:before{content:'✓';width:20px;height:20px;border-radius:50%;background:#e9f5e1;color:#2f7d17;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.h3-text .play img{width:200px;display:block;margin:0 auto}
.h3-text .more{margin-top:12px;font-size:13.5px;color:#6b7590;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.h3-text .more a{color:var(--navy);text-decoration:none;border-bottom:1px dashed var(--navy)}
.h3-text .more a:hover{border-bottom-style:solid}
.soon2{color:#8B5A00}
.sep{width:1px;height:14px;background:#cfd5e2}
.attr3{text-align:center;font-size:13.5px;color:#7b6a3a;margin:26px 0 0;padding-top:18px;border-top:1px solid #eee6cf}

/* Phone mockup (drawn like the app home screen) */
.h3-phone{position:relative}
.h3-phone:before{content:'';position:absolute;inset:-30px -40px;background:radial-gradient(closest-side,rgba(2,54,129,.10),rgba(2,54,129,0));z-index:0}
.phone{position:relative;z-index:1;width:250px;height:510px;border-radius:38px;background:#111;padding:10px;box-shadow:0 20px 40px rgba(2,30,80,.25),inset 0 0 0 2px #333}
.phone:after{content:'';position:absolute;top:16px;left:50%;width:70px;height:18px;margin-left:-35px;background:#111;border-radius:12px}
.scr{width:100%;height:100%;border-radius:29px;overflow:hidden;background:#f4f4f4;display:flex;flex-direction:column}
.p-bar{height:74px;padding:38px 14px 0;color:#fff;font-size:11px;background:linear-gradient(#0D387B,#002D74);position:relative;display:flex;align-items:flex-start;gap:10px;white-space:nowrap}
.p-bar:before{content:'';position:absolute;inset:0;background:url(../imgs/app/pattern.png);background-size:64px;opacity:.35}
.p-bar *{position:relative}
.p-menu{font-size:15px;line-height:1}
.p-body{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;padding:0 18px;background:url(../imgs/app/home_top.png) top center/100% auto no-repeat}
.p-body:after{content:'';position:absolute;left:0;right:0;bottom:0;height:150px;background:url(../imgs/app/home_top.png) top center/100% auto no-repeat;transform:scaleY(-1);pointer-events:none}
.p-ins{margin:auto 0 14px;font-size:10px;line-height:1.6;color:#333;text-align:center;position:relative;z-index:1}
.p-btn{position:relative;z-index:1;width:100%;height:62px;border-radius:12px;border:1.5px solid #1C4A0E;background:linear-gradient(#6FBF3F,#3E9420 50%,#256E12);box-shadow:0 4px 8px rgba(0,0,0,.35);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.p-btn:before{content:'';position:absolute;top:2px;left:6px;right:6px;height:27px;border-radius:9px;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,0))}
.p-btn b{font-weight:400;font-size:17px;text-shadow:0 1px 2px rgba(0,0,0,.45);line-height:1.3}
.p-btn small{font-size:9px}
.p-sup{position:relative;z-index:1;margin:auto 0 64px;width:100%;display:flex;flex-direction:column;align-items:center;gap:1px}
.p-line{width:100%;height:1px;background:#D9B54A;position:relative;margin-bottom:6px}
.p-line i{position:absolute;left:50%;top:-2.5px;width:5px;height:5px;margin-left:-2.5px;background:#D9B54A;transform:rotate(45deg)}
.p-s1{font-size:8px;color:#B8860B}
.p-s1 em{font-style:normal;color:#D64545}
.p-s2{font-size:7px;color:#777}

@media(min-width:768px){
 .hero3{flex-direction:row;justify-content:space-between;align-items:center;padding:30px 30px 10px}
 .h3-text{text-align:right;max-width:520px}
 .h3-text h1{font-size:32px}
 .h3-text .lead{font-size:17px}
 .feats{display:flex}
 .h3-text .play img{margin:0}
 .h3-text .more{justify-content:flex-start}
 .phone{width:270px;height:550px}
}
@media(min-width:768px){.hero3{justify-content:center;gap:90px}}
.p-top,.p-bot{flex:1;display:flex;align-items:flex-end;justify-content:center;width:100%}.p-top .p-ins{margin:0 0 14px}
@media(min-width:768px){.hero3{justify-content:space-between;gap:40px;padding:30px 4px 10px 0}.h3-phone{margin-left:-11px}}
/* ===== English ===== */
@font-face{font-family:'Inter';src:url('fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Lora';src:url('fonts/lora-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Lora';src:url('fonts/lora-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
html.en body{font-family:'Inter',system-ui,sans-serif;direction:ltr;line-height:1.65}
html.en h1,html.en h3,html.en .card h3,html.en .faq summary{font-family:'Lora',Georgia,serif;font-weight:600}
html.en .verse{direction:rtl}
.verse-en{font-family:'Lora',Georgia,serif;font-style:italic;color:#dbe6ff;font-size:13px;line-height:1.5;max-width:560px;text-align:center}
.verse-en span{color:var(--sky);font-style:normal}
.nav a.lang{border-color:rgba(254,207,33,.6);color:var(--gold)}
html.ar .nav a.lang{font-family:'Inter',sans-serif}
html.en .nav a.lang{font-family:'Estekhara',sans-serif}
html.en .h3-text h1{font-size:26px;line-height:1.3}
html.en .feats{text-align:left}
html.en .text .prose,html.en .faq .ans{font-size:15px}
html.en .cards .card:after{left:auto;right:-40px}
html.en .phone .p-bar{direction:ltr}
html.en .p-btn b{font-size:15px;font-weight:500}
html.en .p-ins{font-size:9.5px}
@media(min-width:768px){
 .verse-en{text-align:left;font-size:14px}
 html.en .hdr-in{flex-direction:row}
 html.en .h3-text{text-align:left}
 html.en .h3-text h1{font-size:36px}
 html.en .hero3{flex-direction:row-reverse;padding:30px 0 10px 4px}
 html.en .h3-phone{margin-left:0;margin-right:-11px}
}
@media(max-width:767px){.nav{flex-wrap:wrap;row-gap:6px}}
@media(max-width:767px){html.en .h3-text .more{flex-direction:column;gap:6px}html.en .h3-text .sep{display:none}}
/* Contact form */
.contact .c-intro{color:#4a5670;margin:0 0 18px}
.c-form{display:flex;flex-direction:column;gap:14px;max-width:640px}
.c-row{display:grid;grid-template-columns:1fr;gap:14px}
.c-form label{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--navy)}
.c-form input,.c-form select,.c-form textarea{font:inherit;font-size:15px;padding:10px 12px;border:1px solid #d5dce8;border-radius:10px;background:#fbfcfe;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus{border-color:var(--navy2);box-shadow:0 0 0 3px rgba(0,62,161,.12);background:#fff}
.c-form textarea{resize:vertical;min-height:130px}
.c-form button{align-self:flex-start;font:inherit;font-size:15px;padding:10px 34px;border:0;border-radius:24px;background:var(--gold);color:var(--navy);cursor:pointer;transition:all .2s}
.c-form button:hover{background:#ffd84a;box-shadow:0 4px 12px rgba(254,207,33,.4)}
.c-note{font-size:12.5px;color:#8a93a6;margin:0}
.c-msg{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:14.5px}
.c-msg.ok{background:#e9f5e1;color:#2f6a17;border:1px solid #c8e6b5}
.c-msg.err{background:#fdecec;color:#9b2c2c;border:1px solid #f3c4c4}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0}
@media(min-width:768px){.c-row{grid-template-columns:1fr 1fr}}
/* Footer: copyright only, at the start side */
.ftr-in{flex-direction:row;justify-content:flex-start;text-align:start}
/* Footer: centred, two lines */
.ftr-in{flex-direction:column !important;justify-content:center !important;align-items:center !important;text-align:center !important;gap:2px;padding:14px 16px}
.ftr .yr{font-family:'Inter',sans-serif;font-size:11.5px;opacity:.8}
/* Phone order on home: title, phone mockup, download, then text and features */
@media(max-width:767px){
 .hero3{gap:0}
 .h3-text{display:contents}
 .h3-text h1{order:1;text-align:center;margin-bottom:22px}
 .h3-phone{order:2;margin-bottom:28px}
 .h3-text .play{order:3}
 .h3-text .more{order:4;flex-direction:column;gap:6px}
 .h3-text .sep{display:none}
 .h3-text .lead{order:5;text-align:center;margin:26px 0 14px}
 .feats{order:6;align-self:center}
 .phone{width:230px;height:470px}
}
/* Contact page: form + side card */
.c-wrap{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.c-side{position:relative;overflow:hidden;border-radius:16px;padding:24px 22px;background:linear-gradient(#0D387B,#002D74);color:#fff;box-shadow:0 6px 18px rgba(0,30,80,.18)}
.c-side:before{content:'';position:absolute;inset:0;background:url(../imgs/app/pattern.png);background-size:90px;opacity:.12;pointer-events:none}
.c-side>*{position:relative}
.c-side h3{margin:0 0 14px;color:var(--gold);font-size:17px}
.c-side .c-lbl{margin:14px 0 6px;font-size:13px;color:#cfdcf5}
.c-side .c-mail{display:inline-block;color:#fff;text-decoration:none;font-size:15px;border-bottom:1px dashed rgba(255,255,255,.5);font-family:'Inter',sans-serif}
.c-side .c-mail:hover{color:var(--gold);border-color:var(--gold)}
.c-side img{display:block;width:170px;height:auto}
.c-side .c-soon{margin:10px 0 0;font-size:13px;color:#FECF21}
.c-form{max-width:none}
@media(min-width:768px){.c-wrap{grid-template-columns:1.6fr 1fr;gap:40px}}
/* Contact page v2: form centred, no side card */
.contact{max-width:680px;margin:0 auto;text-align:center}
.contact .c-wrap{display:block}
.contact .c-form{text-align:start;margin:0 auto}
.contact .c-form button{align-self:center;padding:11px 60px}
.contact .c-note{text-align:center}
.contact .c-msg{text-align:center}
@media(min-width:768px){.contact .c-wrap{display:block}}

/* App Store + Google Play badges side by side */
.stores{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.stores .play img,.h3-text .stores .play img{width:170px;margin:0}
@media(min-width:768px){.h3-text .stores{justify-content:flex-start}}
@media(max-width:767px){.h3-text .stores{order:3;gap:10px}.stores .play img,.h3-text .stores .play img{width:150px}}