/* ═══════════════════════════════
   NOHA GCC BRAND GUIDE · v3
   Build Your GCC Brand · 2026
═══════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#C9A84C;--gl:#E8C97A;--gd:#9A7A30;--gm:rgba(201,168,76,.12);
  --bg:#070604;--bg2:#0F0B07;--bg3:#181208;
  --tx:#F5F0E8;--txm:#8A7A60;
  --br:rgba(201,168,76,.14);--bs:rgba(201,168,76,.4);
  --ok:#4CAF7A;--r:10px;--wa:#25D366
}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--tx);direction:rtl;overflow-x:hidden;line-height:1.7}

/* ── NAV ── */
nav{
  position:fixed;top:0;right:0;left:0;z-index:500;
  background:rgba(7,6,4,.97);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--br);
  height:56px;display:flex;align-items:center;
  justify-content:space-between;gap:.5rem;
  padding:0 clamp(.8rem,3vw,2rem)
}
.nlogo{
  font-family:'Tajawal',sans-serif;font-weight:900;
  font-size:clamp(.8rem,1.8vw,.95rem);color:var(--tx);
  display:flex;align-items:center;gap:.3rem;white-space:nowrap;flex-shrink:0
}
.nlogo .g{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.nav-wa{
  display:flex;align-items:center;gap:.3rem;text-decoration:none;
  background:var(--wa);color:#fff;
  font-size:.7rem;font-weight:700;padding:.32rem .85rem;
  border-radius:20px;white-space:nowrap;transition:opacity .2s;
  font-family:'Cairo',sans-serif
}
.nav-wa:hover{opacity:.85}
.nav-wa-icon{font-size:.9rem}
.nav-wa-txt{display:none}
@media(min-width:600px){.nav-wa-txt{display:inline}}
.nlinks{display:none;gap:.05rem;list-style:none}
@media(min-width:860px){.nlinks{display:flex}}
.nlinks a{
  text-decoration:none;font-size:.67rem;color:var(--txm);
  padding:.22rem .5rem;border-radius:20px;
  border:1px solid transparent;transition:all .2s;white-space:nowrap
}
.nlinks a:hover,.nlinks a.act{color:var(--gold);border-color:var(--br);background:var(--gm)}
.ncta{background:var(--gd)!important;color:#fff!important;font-weight:700!important}
.ncta:hover{background:var(--gold)!important}
.ham{display:flex;flex-direction:column;gap:4px;cursor:pointer;padding:5px;flex-shrink:0}
@media(min-width:860px){.ham{display:none}}
.ham span{width:20px;height:2px;background:var(--txm);border-radius:2px;transition:all .3s}
.ham.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}
.mm{
  display:none;position:fixed;top:56px;right:0;left:0;z-index:400;
  background:rgba(7,6,4,.99);border-bottom:1px solid var(--br);
  padding:.6rem;max-height:calc(100vh - 56px);overflow-y:auto
}
.mm.open{display:block}
.mm a{
  display:block;padding:.58rem .9rem;color:var(--txm);
  text-decoration:none;font-size:.85rem;border-bottom:1px solid var(--br);
  transition:color .2s
}
.mm a:hover{color:var(--gold)}
.mm a:last-child{border-bottom:none;color:var(--gold);font-weight:700}
.mm-wa{color:var(--wa)!important;font-weight:700;display:flex;align-items:center;gap:.5rem}

/* ── FLOATING WA BUTTON ── */
.float-wa{
  position:fixed;bottom:1.4rem;left:1.4rem;z-index:300;
  width:54px;height:54px;background:var(--wa);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:1.5rem;
  box-shadow:0 4px 18px rgba(37,211,102,.38);
  transition:transform .2s,box-shadow .2s
}
.float-wa:hover{transform:scale(1.1);box-shadow:0 6px 24px rgba(37,211,102,.55)}
.float-wa-tip{
  position:absolute;left:calc(100% + .55rem);
  background:var(--bg2);border:1px solid var(--bs);color:var(--gl);
  font-size:.68rem;font-weight:700;padding:.26rem .65rem;border-radius:6px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;
  font-family:'Cairo',sans-serif
}
.float-wa:hover .float-wa-tip{opacity:1}

/* ── HERO ── */
.hero{
  position:relative;width:100%;margin-top:56px;
  overflow:hidden
}
/* Desktop: maintain 16/9 ratio */
@media(min-width:641px){
  .hero{aspect-ratio:16/9;min-height:380px;max-height:780px}
}
/* Mobile: show image properly — tall enough to see face */
@media(max-width:640px){
  .hero{min-height:100svh;max-height:750px}
}
.hbg-fallback{
  position:absolute;inset:0;
  background:url('../images/cover.png') center top/cover no-repeat;
  z-index:0
}
.hbg{
  position:absolute;inset:0;
  background:url('../images/cover.webp') center top/cover no-repeat;
  z-index:1
}
/* Desktop overlay: darken right side for text readability */
.hov{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to bottom,rgba(7,6,4,.5) 0%,rgba(7,6,4,0) 14%),
    linear-gradient(to top,rgba(7,6,4,.98) 0%,rgba(7,6,4,0) 22%),
    linear-gradient(270deg,
      rgba(7,6,4,0) 0%,
      rgba(7,6,4,0) 30%,
      rgba(7,6,4,.6) 52%,
      rgba(7,6,4,.88) 100%)
}
/* Mobile overlay: semi-transparent full overlay, image shows through */
@media(max-width:640px){
  .hov{
    background:
      linear-gradient(to bottom,rgba(7,6,4,.6) 0%,rgba(7,6,4,.15) 35%,rgba(7,6,4,.15) 50%,rgba(7,6,4,.95) 80%)
  }
}

/* Hero grid — desktop: 2 cols (spacer | text), mobile: 1 col stacked at bottom */
.hgrid{
  position:absolute;inset:0;z-index:3;
  display:grid;
  grid-template-columns:36% 1fr;
  padding:clamp(.8rem,2.5vw,2rem) clamp(1rem,4vw,3rem)
}
@media(max-width:640px){
  .hgrid{
    grid-template-columns:1fr;
    align-content:end;
    padding:1rem 1.25rem 3.5rem
  }
}
.h-spacer{}/* empty — keeps image visible on desktop */
.h-right{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(.4rem,1vw,.8rem) 0}
.hen{
  font-size:clamp(.52rem,.78vw,.65rem);letter-spacing:2.5px;
  color:rgba(245,240,232,.4);font-weight:500;
  display:block;margin-bottom:.22rem;text-transform:uppercase
}
.har{
  font-family:'Tajawal',sans-serif;font-size:clamp(.85rem,1.5vw,1.05rem);
  font-weight:900;color:var(--gold);
  display:flex;align-items:center;gap:.4rem;margin-bottom:.18rem
}
.har::before{content:'';width:16px;height:1px;background:var(--gold);flex-shrink:0}
.htag{font-size:clamp(.72rem,1.05vw,.84rem);color:var(--txm)}
.htag em{color:var(--gl);font-style:normal;font-weight:700}
.hcountries{
  display:inline-flex;align-items:center;gap:.3rem;
  background:rgba(201,168,76,.1);border:1px solid var(--bs);
  border-radius:6px;padding:.3rem .7rem;
  margin:.48rem 0;flex-wrap:wrap;width:fit-content
}
.hc{font-size:clamp(.6rem,.82vw,.72rem);font-weight:700;color:var(--gl);white-space:nowrap}
.hs{color:var(--bs);font-size:.66rem}
.hh1{
  font-family:'Tajawal',sans-serif;
  font-size:clamp(1.6rem,3.5vw,2.8rem);
  font-weight:900;line-height:1.15;color:#fff;
  margin:.3rem 0;text-shadow:0 2px 24px rgba(0,0,0,.65)
}
.hh1 em{font-style:normal;color:var(--gl)}
.hsub{
  font-size:clamp(.7rem,1vw,.8rem);
  color:rgba(245,240,232,.62);line-height:1.65;max-width:380px
}
.hstats{display:flex;gap:clamp(.35rem,.75vw,.65rem);flex-wrap:wrap;margin:.38rem 0}
.hstat{
  background:rgba(7,6,4,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(201,168,76,.22);border-radius:8px;
  padding:.35rem clamp(.45rem,.8vw,.7rem);
  display:flex;flex-direction:column;align-items:center;
  min-width:clamp(52px,6.5vw,72px)
}
.hstat .n{
  font-family:'Tajawal',sans-serif;
  font-size:clamp(.88rem,1.5vw,1.15rem);
  font-weight:900;color:var(--gl);line-height:1;white-space:nowrap
}
.hstat .l{font-size:clamp(.46rem,.62vw,.57rem);color:rgba(245,240,232,.4);text-align:center;margin-top:1px}
.hcta{display:flex;gap:.48rem;flex-wrap:wrap;align-items:center;margin-top:.4rem}
.hguarantee{font-size:clamp(.5rem,.68vw,.6rem);color:rgba(245,240,232,.28);line-height:1.5}
.hicons{
  position:absolute;bottom:0;left:0;right:0;z-index:4;
  background:rgba(7,6,4,.87);border-top:1px solid rgba(201,168,76,.18);
  display:flex;align-items:center;justify-content:space-around;
  padding:.42rem clamp(.5rem,2vw,1.5rem);
  flex-wrap:nowrap;overflow-x:auto;gap:.2rem
}
.hicons::-webkit-scrollbar{display:none}
.hico{display:flex;flex-direction:column;align-items:center;gap:.16rem;flex-shrink:0;min-width:clamp(42px,5.8vw,60px)}
.hico .e{font-size:clamp(.88rem,1.35vw,1.15rem)}
.hico .t{font-size:clamp(.42rem,.57vw,.54rem);color:var(--txm);text-align:center;line-height:1.2;white-space:nowrap}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:.32rem;text-decoration:none;
  padding:clamp(.55rem,.9vw,.75rem) clamp(.9rem,1.5vw,1.45rem);
  border-radius:8px;font-weight:700;
  font-size:clamp(.72rem,.95vw,.85rem);
  font-family:'Cairo',sans-serif;transition:all .2s;
  border:none;cursor:pointer;white-space:nowrap;
  min-height:44px;justify-content:center
}
.btn-g{background:var(--gd);color:#fff}
.btn-g:hover{background:var(--gold);transform:translateY(-1px)}
.btn-o{background:rgba(7,6,4,.45);color:var(--gl);border:1px solid var(--bs)}
.btn-o:hover{background:var(--gm)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{opacity:.87}
.btn-lg{font-size:.9rem!important;padding:.88rem 2rem!important}
.btn-sm{font-size:.74rem!important;padding:.45rem 1.05rem!important;min-height:40px!important}
.btn-full{width:100%;justify-content:center}

/* ── LAYOUT ── */
.wrap{padding:clamp(2.5rem,5vw,4.5rem) clamp(1rem,3.5vw,2rem);max-width:960px;margin:0 auto}
.divider{max-width:960px;margin:0 auto;height:1px;background:var(--br)}
.slabel{
  font-family:'Tajawal',sans-serif;font-size:clamp(2rem,5vw,3.5rem);
  font-weight:900;color:rgba(201,168,76,.065);line-height:1;
  margin-bottom:-.32rem;user-select:none
}
.stitle{
  font-family:'Tajawal',sans-serif;
  font-size:clamp(1.35rem,2.8vw,1.85rem);
  font-weight:900;color:var(--tx);margin-bottom:.5rem;line-height:1.3
}
.stitle em{font-style:normal;color:var(--gl)}
.sintro{
  font-size:clamp(.8rem,1.15vw,.9rem);color:var(--txm);
  margin-bottom:1.6rem;line-height:1.9;max-width:700px
}

/* ── CTA BANNER ── */
.cta-banner{
  background:linear-gradient(135deg,rgba(154,122,48,.18) 0%,rgba(201,168,76,.1) 100%);
  border:1px solid var(--bs);border-radius:12px;
  padding:clamp(1.2rem,3vw,2rem);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin:2rem 0
}
.cta-banner-alt{
  background:linear-gradient(135deg,rgba(7,6,4,0) 0%,rgba(154,122,48,.22) 100%);
  border:2px solid var(--bs)
}
.cta-banner-center{flex-direction:column;align-items:center;text-align:center}
.cta-banner-text h3{
  font-family:'Tajawal',sans-serif;
  font-size:clamp(1rem,2.1vw,1.25rem);
  font-weight:900;color:var(--tx);margin-bottom:.3rem
}
.cta-banner-text p{font-size:clamp(.75rem,1.15vw,.85rem);color:var(--txm);line-height:1.7}
.cta-btn-group{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:1.2rem}
@media(max-width:480px){
  .cta-banner{flex-direction:column;text-align:center}
  .cta-banner>*:last-child{width:100%}
  .cta-banner>*:last-child .btn{width:100%}
}

/* ── TRUTH SECTION ── */
.truth-section{
  background:var(--bg2);border-top:1px solid var(--br);border-bottom:1px solid var(--br);
  padding:clamp(2.5rem,5vw,4rem) clamp(1rem,3.5vw,2rem)
}
.truth-inner{max-width:960px;margin:0 auto;text-align:center}
.truth-quote{
  font-family:'Tajawal',sans-serif;
  font-size:clamp(1.7rem,4.5vw,3.2rem);
  font-weight:900;color:#fff;line-height:1.2;margin-bottom:1rem
}
.truth-quote em{font-style:normal;color:var(--gl)}
.truth-sub{
  font-size:clamp(.82rem,1.35vw,.97rem);color:var(--txm);
  max-width:700px;margin:0 auto 2rem;line-height:1.85
}
.truth-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:.9rem;margin-top:1.5rem}
.truth-card{background:var(--bg3);border:1px solid var(--br);border-radius:var(--r);padding:1.35rem 1.15rem;text-align:right}
.tco{font-size:1.35rem;margin-bottom:.52rem;display:block}
.truth-card h4{
  font-family:'Tajawal',sans-serif;font-size:.95rem;
  font-weight:700;color:var(--tx);margin-bottom:.42rem
}
.truth-card p{font-size:.78rem;color:var(--txm);line-height:1.75;margin-bottom:.72rem}
.inside{
  font-size:.72rem;color:var(--gl);
  background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.2);
  border-radius:6px;padding:.37rem .65rem;display:block
}

/* ── BONUS ── */
.bonus-section{
  background:rgba(201,168,76,.06);border:1px solid var(--bs);
  border-radius:14px;padding:clamp(1.5rem,3vw,2.5rem);margin:2rem 0
}
.bonus-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.bonus-badge{background:var(--gd);color:#fff;font-size:.72rem;font-weight:700;padding:.3rem .95rem;border-radius:20px;white-space:nowrap}
.bonus-title{font-family:'Tajawal',sans-serif;font-size:clamp(1rem,1.9vw,1.35rem);font-weight:900;color:var(--gl)}
.bonus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:.9rem}
.bonus-card{
  background:var(--bg2);border:1px solid var(--br);border-radius:var(--r);
  padding:1.15rem;transition:border-color .25s,transform .25s
}
.bonus-card:hover{border-color:var(--bs);transform:translateY(-2px)}
.bnum{
  font-family:'Tajawal',sans-serif;font-size:1.5rem;font-weight:900;
  color:rgba(201,168,76,.15);line-height:1;margin-bottom:.22rem
}
.bonus-card h4{font-size:.87rem;font-weight:700;color:var(--tx);margin-bottom:.32rem}
.bonus-card p{font-size:.76rem;color:var(--txm);line-height:1.72;margin-bottom:.65rem}
.bonus-link{
  display:inline-flex;align-items:center;gap:.36rem;text-decoration:none;
  font-size:.73rem;font-weight:700;color:var(--gold);
  border:1px solid rgba(201,168,76,.3);border-radius:6px;
  padding:.26rem .68rem;transition:all .2s
}
.bonus-link:hover{background:var(--gm);border-color:var(--bs)}
.ad-credit{
  background:rgba(76,175,122,.08);border:1px solid rgba(76,175,122,.25);
  border-radius:var(--r);padding:1rem;margin:.65rem 0;
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap
}
.ac-num{font-family:'Tajawal',sans-serif;font-size:1.55rem;font-weight:900;color:var(--ok);white-space:nowrap}
.ac-text{font-size:.78rem;color:rgba(245,240,232,.7);line-height:1.6}

/* ── GUIDE STEPS ── */
.step{
  display:grid;grid-template-columns:clamp(44px,6.8vw,72px) 1fr;
  gap:clamp(.9rem,2.3vw,1.9rem);
  padding:clamp(1.2rem,3vw,2rem) 0;
  border-bottom:1px solid var(--br);align-items:start
}
.step:last-child{border-bottom:none}
.step-num{
  font-family:'Tajawal',sans-serif;
  font-size:clamp(1.9rem,4.7vw,3.7rem);
  font-weight:900;line-height:1;
  color:rgba(201,168,76,.1);position:relative;text-align:center
}
.nb{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:clamp(.82rem,1.45vw,1.05rem);font-weight:900;color:var(--gold);
  background:rgba(201,168,76,.1);border:1px solid var(--bs);border-radius:50%;
  width:clamp(32px,4.3vw,44px);height:clamp(32px,4.3vw,44px);
  display:flex;align-items:center;justify-content:center
}
.step-title{
  font-family:'Tajawal',sans-serif;
  font-size:clamp(.95rem,1.9vw,1.2rem);
  font-weight:900;color:var(--tx);margin-bottom:.48rem;line-height:1.3
}
.step-title em{font-style:normal;color:var(--gl)}
.step-desc{font-size:clamp(.76rem,1.08vw,.86rem);color:var(--txm);line-height:1.85;margin-bottom:.78rem}
.cl{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.cl li{display:flex;gap:.48rem;font-size:clamp(.74rem,1.02vw,.83rem);color:rgba(245,240,232,.78);line-height:1.62;align-items:flex-start}
.chk{
  width:17px;height:17px;background:rgba(76,175,122,.12);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--ok);font-weight:700;font-size:8px;margin-top:2px
}
.tools{display:flex;flex-wrap:wrap;gap:.33rem;margin:.6rem 0}
.tp{
  background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.2);
  color:var(--gl);font-size:clamp(.6rem,.82vw,.68rem);font-weight:600;
  padding:.19rem .57rem;border-radius:20px;
  display:flex;align-items:center;gap:.23rem
}
.free{background:rgba(76,175,122,.14);color:var(--ok);font-size:.53rem;padding:.08rem .33rem;border-radius:10px;font-weight:700}
.alt-tip{
  font-size:clamp(.7rem,.95vw,.78rem);color:var(--txm);
  display:flex;align-items:flex-start;gap:.33rem;margin:.52rem 0;font-style:italic
}
.alt-tip::before{content:'💡';flex-shrink:0;font-style:normal}
.ibox{
  background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.18);
  border-right:3px solid var(--gold);border-radius:7px;
  padding:.73rem 1rem;margin:.6rem 0;
  font-size:clamp(.73rem,1.02vw,.82rem);color:rgba(245,240,232,.62);line-height:1.8
}
.ibox strong{color:var(--tx)}
.warn-box{
  background:rgba(255,193,7,.06);border:1px solid rgba(255,193,7,.25);
  border-right:3px solid #FFC107;border-radius:7px;
  padding:.73rem 1rem;margin:.6rem 0;
  font-size:clamp(.73rem,1.02vw,.8rem);color:rgba(245,240,232,.62);line-height:1.8
}
.warn-box strong{color:#FFC107}
.vbox{
  background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.2);
  border-right:3px solid var(--gold);border-radius:7px;padding:.85rem 1.05rem;margin:1rem 0
}
.vbox h3{font-weight:700;color:var(--gl);margin-bottom:.24rem;font-size:.8rem}
.vbox p{font-size:.75rem;color:rgba(245,240,232,.6);line-height:1.8}

/* ── PROMPT BOX ── */
.prompt-box{background:var(--bg3);border:1px solid var(--br);border-radius:var(--r);padding:1rem 1.15rem;margin:.7rem 0;position:relative}
.prompt-box h4{font-size:.8rem;font-weight:700;color:var(--gl);margin-bottom:.58rem;display:flex;align-items:center;gap:.4rem}
.prompt-text{font-family:'Courier New',monospace;font-size:clamp(.62rem,.85vw,.71rem);color:rgba(245,240,232,.57);line-height:1.72;white-space:pre-wrap;word-break:break-word}
.copy-btn{
  position:absolute;top:.58rem;left:.58rem;
  background:rgba(201,168,76,.12);border:1px solid var(--bs);color:var(--gl);
  font-size:.6rem;font-weight:700;padding:.2rem .5rem;border-radius:6px;
  cursor:pointer;font-family:'Cairo',sans-serif;transition:all .2s
}
.copy-btn:hover{background:var(--gm)}

/* ── TOOL CARD ── */
.tool-card{background:var(--bg2);border:1px solid var(--br);border-radius:var(--r);overflow:hidden;margin:.68rem 0;transition:border-color .25s}
.tool-card:hover{border-color:var(--bs)}
.tool-card-header{display:flex;align-items:flex-start;gap:.78rem;padding:.9rem 1.05rem;border-bottom:1px solid var(--br)}
.tool-logo{font-size:1.45rem;flex-shrink:0}
.tool-card-header h4{font-size:.87rem;font-weight:700;color:var(--tx);margin-bottom:.17rem}
.tool-card-header p{font-size:.73rem;color:var(--txm);line-height:1.52}
.badge-free{background:rgba(76,175,122,.14);color:var(--ok);font-size:.59rem;font-weight:700;padding:.09rem .4rem;border-radius:10px;margin-right:.32rem}
.badge-paid{background:rgba(201,168,76,.15);color:var(--gold);font-size:.59rem;font-weight:700;padding:.09rem .4rem;border-radius:10px;margin-right:.32rem}
.badge-diy{background:rgba(100,181,246,.15);color:#64B5F6;font-size:.59rem;font-weight:700;padding:.09rem .4rem;border-radius:10px;margin-right:.32rem}
.tool-card-body{padding:.9rem 1.05rem}
.tool-card-footer{padding:.65rem 1.05rem;border-top:1px solid var(--br);display:flex;justify-content:flex-end;gap:.5rem}

/* ── PRICING CARDS ── */
.pgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr));
  gap:1rem;margin-top:1.4rem
}
@media(max-width:480px){.pgrid{grid-template-columns:1fr}}
.pc{
  background:var(--bg2);border:1px solid var(--br);border-radius:14px;
  padding:1.55rem 1.25rem;position:relative;text-align:center;
  transition:border-color .25s,transform .25s;display:flex;flex-direction:column
}
.pc:hover{transform:translateY(-3px);border-color:var(--bs)}
.pc.feat{border:2px solid var(--gold);background:rgba(201,168,76,.04)}
.pc.feat-green{border:2px solid var(--ok);background:rgba(76,175,122,.04)}
.pbadge{
  position:absolute;top:-11px;right:50%;transform:translateX(50%);
  background:var(--gd);color:#fff;font-size:.63rem;font-weight:700;
  padding:2px 13px;border-radius:20px;white-space:nowrap
}
.pbadge-green{background:#2E7D32}
.pflag{font-size:1.45rem;margin-bottom:.58rem;display:block}
.ptitle{font-family:'Tajawal',sans-serif;font-size:.92rem;font-weight:700;color:var(--tx);margin-bottom:.3rem}
.psub{font-size:.68rem;color:var(--txm);margin-bottom:.3rem}
/* Prices in English numerals, bigger */
.pcost{
  font-family:'Tajawal',sans-serif;font-size:1.7rem;font-weight:900;
  color:var(--gl);margin:.62rem 0 .15rem
}
.pcost span{font-size:.7rem;font-weight:400;color:var(--txm)}
.pcost-diy{
  font-family:'Tajawal',sans-serif;font-size:1.15rem;font-weight:700;
  color:#64B5F6;margin:.62rem 0 .15rem
}
.pf{list-style:none;margin-top:.82rem;text-align:right;flex:1}
.pf li{
  font-size:.73rem;color:var(--txm);padding:.3rem 0;
  border-bottom:1px solid var(--br);display:flex;align-items:flex-start;gap:.38rem
}
.pf li:last-child{border-bottom:none}
.pf li::before{content:'✓';color:var(--ok);font-weight:700;font-size:.61rem;flex-shrink:0;margin-top:2px}
.ptax{
  font-size:.66rem;color:rgba(245,240,232,.44);
  background:rgba(255,255,255,.03);border:1px solid var(--br);
  border-radius:6px;padding:.48rem .68rem;margin-top:.78rem;
  text-align:right;line-height:1.72
}
.ptax .tax-label{color:var(--txm);font-weight:600;display:block;margin-bottom:.22rem}
.pnote-card{
  margin-top:.72rem;font-size:.61rem;color:rgba(201,168,76,.65);
  background:rgba(201,168,76,.06);padding:.4rem;border-radius:5px
}
.pc-footer{margin-top:auto;padding-top:.95rem}

/* ── ENTITY / WHICH SECTION ── */
.entity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:.9rem;margin-top:1.55rem}
@media(max-width:480px){.entity-grid{grid-template-columns:1fr}}
.entity-card{
  background:var(--bg2);border:1px solid var(--br);border-radius:var(--r);
  padding:1.25rem;transition:border-color .25s,transform .25s
}
.entity-card:hover{border-color:var(--bs);transform:translateY(-2px)}
.entity-flag{font-size:1.85rem;margin-bottom:.52rem;display:block}
.entity-card h4{font-family:'Tajawal',sans-serif;font-size:.95rem;font-weight:700;color:var(--tx);margin-bottom:.38rem}
.entity-card p{font-size:.78rem;color:var(--txm);line-height:1.72;margin-bottom:.65rem}
.entity-tag{display:inline-block;font-size:.66rem;font-weight:700;padding:.21rem .68rem;border-radius:20px;margin-bottom:.52rem}
.entity-tag-diy{background:rgba(100,181,246,.15);color:#64B5F6;border:1px solid rgba(100,181,246,.3)}
.entity-tag-done{background:rgba(201,168,76,.15);color:var(--gold);border:1px solid rgba(201,168,76,.3)}
.entity-tag-local{background:rgba(76,175,122,.12);color:var(--ok);border:1px solid rgba(76,175,122,.25)}

/* ── ROADMAP ── */
.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,138px),1fr));gap:.72rem;margin:1.25rem 0}
@media(max-width:480px){.roadmap{grid-template-columns:repeat(2,1fr)}}
.rm{
  background:var(--bg2);border:1px solid var(--br);border-radius:var(--r);
  padding:.92rem .82rem;text-align:center;position:relative;
  transition:border-color .25s,transform .25s
}
.rm:hover{border-color:var(--bs);transform:translateY(-2px)}
.rm::before{
  content:attr(data-s);position:absolute;top:-9px;right:50%;transform:translateX(50%);
  background:var(--gd);color:#fff;font-size:.59rem;font-weight:700;
  padding:1px 10px;border-radius:20px;white-space:nowrap
}
.ri{font-size:1.25rem;margin-bottom:.4rem;display:block}
.rm h4{font-size:.76rem;font-weight:700;color:var(--gl);margin-bottom:.24rem}
.rm p{font-size:.67rem;color:var(--txm);line-height:1.62}
.rt{font-size:.6rem;color:var(--ok);margin-top:.27rem;font-weight:600}

/* ── GENERIC CARDS ── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,195px),1fr));gap:.78rem}
.card{background:var(--bg2);border:1px solid var(--br);border-radius:var(--r);padding:1.15rem;transition:border-color .25s,transform .25s}
.card:hover{border-color:var(--bs);transform:translateY(-2px)}
.card-g{border-color:rgba(201,168,76,.2);background:rgba(201,168,76,.04)}
.card h3{font-size:.86rem;font-weight:700;color:var(--tx);margin-bottom:.32rem}
.card p{font-size:.76rem;color:var(--txm);line-height:1.73}
.ci{font-size:1.18rem;margin-bottom:.5rem;display:block}

/* ── BENEFITS ── */
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:.75rem;margin-top:1.35rem}
@media(max-width:480px){.bgrid{grid-template-columns:repeat(2,1fr)}}
.bcard{background:var(--bg2);border:1px solid var(--br);border-radius:var(--r);padding:1rem .88rem;text-align:center;transition:border-color .25s,transform .25s}
.bcard:hover{border-color:var(--bs);transform:translateY(-2px)}
.bico{font-size:1.3rem;margin-bottom:.42rem;display:block}
.bcard h4{font-size:.76rem;font-weight:700;color:var(--gl);margin-bottom:.24rem}
.bcard p{font-size:.68rem;color:var(--txm);line-height:1.62}

/* ── COMPARE TABLE ── */
.ctable{width:100%;border-collapse:collapse;font-size:.76rem;margin-top:1.35rem}
.ctable th{background:var(--bg3);color:var(--gl);padding:.72rem .85rem;text-align:center;font-weight:700;font-family:'Tajawal',sans-serif;border-bottom:1px solid var(--bs)}
.ctable th:first-child{text-align:right}
.ctable td{padding:.65rem .85rem;border-bottom:1px solid var(--br);text-align:center;color:var(--tx)}
.ctable td:first-child{text-align:right;color:var(--txm);font-size:.72rem}
.ctable tr:nth-child(even) td{background:rgba(255,255,255,.01)}
.yes{color:var(--ok);font-weight:700}.no{color:#252525}

/* ── TESTIMONIALS ── */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:.75rem;margin-top:1.35rem}
.tm{background:var(--bg2);border:1px solid var(--br);border-radius:var(--r);padding:1.15rem;transition:border-color .25s}
.tm:hover{border-color:var(--bs)}
.ttag{display:inline-block;background:rgba(76,175,122,.1);color:var(--ok);font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:20px;margin-bottom:.5rem}
.tm p{font-size:.76rem;color:rgba(245,240,232,.66);line-height:1.78;margin-bottom:.7rem}
.tm strong{color:var(--tx);font-size:.76rem;display:block}
.tm span{color:var(--txm);font-size:.64rem}

/* ── ABOUT ── */
.about-wrap{background:var(--bg2);border:1px solid var(--br);border-radius:14px;overflow:hidden}
.about-in{display:grid;grid-template-columns:1fr}
@media(min-width:560px){.about-in{grid-template-columns:220px 1fr;min-height:320px}}
.about-ph{
  background:url('../images/noha-photo.webp') center top/cover no-repeat;
  position:relative;height:190px
}
@media(min-width:560px){.about-ph{height:auto}}
.about-ph::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(15,11,7,1) 0%,rgba(15,11,7,0) 55%)}
@media(min-width:560px){.about-ph::after{background:linear-gradient(to left,rgba(15,11,7,.92) 0%,rgba(15,11,7,0) 50%)}}
.about-tx{padding:1.45rem clamp(.9rem,2.5vw,1.9rem);display:flex;flex-direction:column;justify-content:center}
.about-tx h2{font-family:'Tajawal',sans-serif;font-size:clamp(.92rem,2vw,1.2rem);font-weight:900;color:var(--tx);margin-bottom:.75rem;line-height:1.4}
.about-tx h2 em{font-style:normal;color:var(--gl)}
.about-tx p{font-size:.76rem;color:var(--txm);line-height:1.9;margin-bottom:.52rem}
.fls{display:flex;flex-wrap:wrap;gap:.28rem;margin-top:.8rem}
.fp{background:var(--gm);border:1px solid var(--bs);color:var(--gl);font-size:.63rem;font-weight:600;padding:2px 9px;border-radius:20px}

/* ── LEAD FORM ── */
.lead-form-section{
  background:var(--bg2);border-top:1px solid var(--br);border-bottom:1px solid var(--br);
  padding:clamp(2.5rem,5vw,4rem) clamp(1rem,3.5vw,2rem)
}
.lead-form-inner{max-width:640px;margin:0 auto;text-align:center}
.lead-form-inner .stitle,.lead-form-inner .sintro{text-align:center;margin-left:auto;margin-right:auto}
.lf-form{display:flex;flex-direction:column;gap:.88rem;text-align:right}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:.88rem}
@media(max-width:520px){.lf-row{grid-template-columns:1fr}}
.lf-group{display:flex;flex-direction:column;gap:.32rem}
.lf-group label{font-size:.77rem;font-weight:600;color:var(--txm)}
.lf-group input,.lf-group select,.lf-group textarea{
  background:var(--bg3);border:1px solid var(--br);border-radius:8px;
  padding:.75rem .95rem;color:var(--tx);font-family:'Cairo',sans-serif;
  font-size:.85rem;outline:none;transition:border-color .2s;direction:rtl;
  -webkit-appearance:none;min-height:48px
}
.lf-group input:focus,.lf-group select:focus,.lf-group textarea:focus{border-color:var(--bs)}
.lf-group input::placeholder,.lf-group textarea::placeholder{color:var(--txm);opacity:.6}
.lf-group select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A7A60' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left .75rem center;padding-left:2.2rem
}
.lf-group select option{background:var(--bg3);color:var(--tx)}
.lf-submit{
  background:var(--gd);color:#fff;border:none;border-radius:9px;
  padding:1rem 2rem;font-family:'Cairo',sans-serif;
  font-size:.95rem;font-weight:700;cursor:pointer;
  transition:all .2s;width:100%;min-height:52px
}
.lf-submit:hover{background:var(--gold);transform:translateY(-1px)}
.lf-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.lf-privacy{font-size:.67rem;color:var(--txm);text-align:center;margin-top:.52rem}
.lf-success{
  display:none;background:rgba(76,175,122,.1);
  border:1px solid rgba(76,175,122,.3);border-radius:12px;
  padding:1.6rem;text-align:center
}
.s-ico{font-size:2.6rem;margin-bottom:.78rem;display:block}
.lf-success h3{font-family:'Tajawal',sans-serif;font-size:1.25rem;font-weight:900;color:var(--ok);margin-bottom:.52rem}
.lf-success p{font-size:.84rem;color:rgba(245,240,232,.7);line-height:1.77}
.lf-error{
  display:none;background:rgba(231,76,60,.08);border:1px solid rgba(231,76,60,.25);
  border-radius:7px;padding:.78rem 1.05rem;font-size:.77rem;color:#e74c3c;
  margin-top:.52rem;text-align:right
}

/* ── OFFER ── */
.offer-sec{
  background:var(--bg2);border-top:1px solid var(--br);border-bottom:1px solid var(--br);
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1rem,3.5vw,2rem)
}
.offer-in{max-width:960px;margin:0 auto;text-align:center}
.otitle{font-family:'Tajawal',sans-serif;font-size:clamp(1.4rem,3.2vw,2.35rem);font-weight:900;color:var(--tx);margin-bottom:.52rem}
.otitle em{font-style:normal;color:var(--gl)}
.osub{color:var(--txm);font-size:.83rem;margin-bottom:1.55rem}
.ogrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,162px),1fr));
  gap:.78rem;margin-bottom:1.55rem;max-width:500px;margin-left:auto;margin-right:auto
}
@media(max-width:480px){.ogrid{grid-template-columns:1fr;max-width:100%}}
.oc{
  background:var(--bg3);border:1px solid var(--br);border-radius:var(--r);
  padding:1.28rem .9rem;text-align:center;position:relative;
  transition:border-color .25s,transform .25s
}
.oc:hover{border-color:var(--bs);transform:translateY(-2px)}
.oc.feat{border:2px solid var(--gold);background:rgba(201,168,76,.05)}
.otype{font-size:.7rem;color:var(--txm);margin-bottom:.32rem;font-weight:600}
.oprice{font-family:'Tajawal',sans-serif;font-size:1.8rem;font-weight:900;color:var(--gl)}
.operiod{font-size:.64rem;color:var(--txm)}
.osave{font-size:.6rem;color:var(--ok);font-weight:700;margin-top:.24rem}
.onote{font-size:.58rem;color:rgba(245,240,232,.22);margin-top:.3rem}
.svc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));
  gap:.78rem;margin:1.25rem 0;text-align:right
}
@media(max-width:480px){.svc-grid{grid-template-columns:1fr}}
.svc{background:var(--bg3);border:1px solid var(--br);border-radius:var(--r);padding:1.08rem}
.svc h4{font-size:.8rem;font-weight:700;color:var(--gl);margin-bottom:.34rem}
.svc .price{font-family:'Tajawal',sans-serif;font-size:1.2rem;font-weight:900;color:var(--gold);margin:.28rem 0}
.svc .price span{font-size:.64rem;font-weight:400;color:var(--txm)}
.svc ul{list-style:none;margin-top:.55rem}
.svc ul li{font-size:.68rem;color:var(--txm);padding:.25rem 0;border-bottom:1px solid var(--br);display:flex;align-items:flex-start;gap:.32rem}
.svc ul li:last-child{border-bottom:none}
.svc ul li::before{content:'✓';color:var(--ok);font-weight:700;font-size:.58rem;flex-shrink:0;margin-top:2px}

/* ── FAQ ── */
.faq-item{border-bottom:1px solid var(--br)}
.faq-btn{
  width:100%;background:none;border:none;padding:.88rem 0;text-align:right;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;color:var(--tx);font-family:'Cairo',sans-serif;
  font-size:.82rem;font-weight:600;transition:color .2s;min-height:52px
}
.faq-btn:hover{color:var(--gl)}
.faq-ic{color:var(--gold);font-size:.98rem;flex-shrink:0;transition:transform .25s}
.faq-ans{display:none;font-size:.75rem;color:var(--txm);line-height:1.87;padding-bottom:.88rem}
.faq-item.open .faq-ans{display:block}
.faq-item.open .faq-ic{transform:rotate(45deg)}

/* ── FOOTER CONTACT ── */
.footer-contact{
  display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;
  margin-bottom:1rem;padding:.9rem;
  background:var(--bg2);border-radius:10px
}
.footer-contact a{
  display:inline-flex;align-items:center;gap:.42rem;text-decoration:none;
  font-size:.8rem;font-weight:600;padding:.44rem 1.05rem;
  border-radius:20px;transition:opacity .2s
}
.footer-contact a:hover{opacity:.82}
.fc-wa{background:var(--wa);color:#fff}
.fc-email{background:rgba(201,168,76,.15);color:var(--gold);border:1px solid rgba(201,168,76,.3)}

/* ── BADGE / DOT ── */
.badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(201,168,76,.09);border:1px solid var(--bs);border-radius:30px;padding:.28rem .9rem;font-size:.65rem;color:var(--gl);font-weight:600;letter-spacing:.5px}
.dot{width:5px;height:5px;background:var(--gold);border-radius:50%;animation:blink 2s infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ── SCROLL TOP ── */
#scrollTop{
  position:fixed;bottom:1.4rem;right:1.4rem;z-index:200;
  width:40px;height:40px;background:var(--gd);border:none;border-radius:50%;
  color:#fff;font-size:1.05rem;cursor:pointer;
  opacity:0;transition:opacity .3s,transform .2s;
  display:flex;align-items:center;justify-content:center
}
#scrollTop.visible{opacity:1}
#scrollTop:hover{background:var(--gold);transform:translateY(-2px)}

/* ── ANIMATIONS ── */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ── FOOTER ── */
footer{text-align:center;padding:1.6rem clamp(.8rem,3vw,2rem);border-top:1px solid var(--br);font-size:.7rem;color:var(--txm);background:var(--bg)}
footer a{color:var(--gd);text-decoration:none}
footer a:hover{color:var(--gold)}
.footer-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:.55rem}

/* ── GLOBAL RESPONSIVE FIXES ── */
@media(max-width:480px){
  .btn{min-height:46px}
  .hh1{font-size:clamp(1.55rem,8vw,2rem)}
  .stitle{font-size:clamp(1.25rem,6vw,1.55rem)}
  .truth-quote{font-size:clamp(1.5rem,7vw,2rem)}
}