/* سُقيا v2: مستوى المية. رمل + أزرق عميق + أصفر شمس */
:root{
  --green:#0B2F4E;--green-2:#123D63;--green-3:#1E6FA6;--green-soft:#DCE9F1;
  --gold:#F0B740;--gold-d:#A9741A;--gold-soft:#F6E8C3;
  --cream:#F3EBDA;--cream-2:#E8DDC3;--coral:#D5583A;--coral-soft:#F6DCD3;
  --ink:#14202B;--muted:#56626E;--line:#D9CCAE;--white:#FBF7EC;
  --water:#5FB3E0;
  --f-display:"Readex Pro",system-ui,sans-serif;
  --f-serif:"Noto Naskh Arabic","Readex Pro",serif;
  --r:10px;--r-lg:18px;
  --shadow:0 1px 2px rgba(11,47,78,.08),0 20px 40px -24px rgba(11,47,78,.45);
}
body{background:var(--cream)}
.kicker{display:none}
.story .kicker{display:none}
h1,h2{font-family:var(--f-serif);font-weight:600;line-height:1.3;letter-spacing:0}
.sec-head h2,.cp-title,.vol h2{font-weight:600}
.logo{font-family:var(--f-serif);font-weight:600;font-size:28px}
.logo small{font-family:var(--f-display)}
.btn{border-radius:8px}
.btn-gold{background:var(--gold);color:#2A1D00}
.btn-gold:hover{background:#F7C95E}
.hdr{background:rgba(243,235,218,.92)}

/* hero */
.hero{padding-block:clamp(20px,3vw,40px) clamp(56px,7vw,96px)}
.hero h1{font-size:clamp(38px,5vw,66px);line-height:1.2;color:var(--green);font-weight:600}
.hero h1 em{color:inherit;white-space:normal}
.hero h1 em svg{display:none}
.hero .lead{font-size:19px;color:var(--muted)}
.qd{border-radius:14px;background:var(--white);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.hero-grid{align-items:center}
.tank{--lvl:0%;margin:0;position:relative;height:min(78vh,640px);min-height:520px;border-radius:999px 999px 18px 18px;overflow:hidden;background:var(--cream-2);isolation:isolate}
.tank>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.35) contrast(1.02) brightness(1.04)}
.tank .water{position:absolute;inset:auto 0 0;height:var(--lvl);background:linear-gradient(180deg,rgba(30,111,166,.55),rgba(11,47,78,.88));mix-blend-mode:normal}
.tank .water::before{content:"";position:absolute;inset:0;backdrop-filter:saturate(1.8);-webkit-backdrop-filter:saturate(1.8)}
.tank .wave{position:absolute;inset-inline-start:0;bottom:100%;width:200%;height:26px;margin-bottom:-2px;fill:rgba(30,111,166,.55)}
.tank .w1{animation:wv 9s linear infinite}
.tank .w2{fill:rgba(95,179,224,.38);height:22px;margin-bottom:-6px;animation:wv 6s linear infinite reverse}
@keyframes wv{to{transform:translateX(-50%)}}
[dir=rtl] .tank .w1{animation-name:wvr}[dir=rtl] .tank .w2{animation-name:wv}
@keyframes wvr{from{transform:translateX(0)}to{transform:translateX(50%)}}
.tank .ruler{position:absolute;inset:0;inset-inline-end:0;inset-inline-start:auto;margin:0;padding:0;list-style:none;width:44px;z-index:2;color:rgba(255,255,255,.85);font-family:var(--f-display);font-size:11px;pointer-events:none}
.tank .ruler li{position:absolute;inset-inline:0;border-top:1.5px solid currentColor}
.tank .ruler li:nth-child(1){top:0}.tank .ruler li:nth-child(2){top:25%}.tank .ruler li:nth-child(3){top:50%}.tank .ruler li:nth-child(4){top:75%}.tank .ruler li:nth-child(5){top:auto;bottom:0}
.tank .ruler i{font-style:normal;position:absolute;top:3px;inset-inline-start:6px}
.tank .mark{position:absolute;inset-inline-end:16%;bottom:calc(var(--lvl) + 10px);z-index:3;display:flex;align-items:baseline;gap:2px;color:#fff;font-family:var(--f-display);text-shadow:0 1px 14px rgba(0,0,0,.35)}
.tank .mark b{font-size:clamp(46px,5.4vw,76px);font-weight:500;line-height:1}
.tank .mark span{font-size:22px}
.tank figcaption{position:absolute;inset:auto 18px 18px;z-index:3;background:rgba(243,235,218,.94);color:var(--green);backdrop-filter:blur(6px);border-radius:12px;padding:12px 16px;font-size:14.5px;line-height:1.65;display:flex;gap:12px;align-items:center}
.tank figcaption b{font-size:26px;color:var(--green);font-family:var(--f-display);font-weight:600}

/* campaign bars become small water gauges */
.bar{height:12px;border-radius:99px;background:var(--cream-2);box-shadow:inset 0 0 0 1px var(--line)}
.bar i{background:var(--green-3);background-image:radial-gradient(circle at 6px -2px,var(--water) 5px,transparent 6px);background-size:12px 100%;background-repeat:repeat-x;background-position:0 0;border-radius:inherit}
.meta .pc{color:var(--green-3)}
.ccard{border-radius:14px;background:var(--white)}
.ccard h3{font-family:var(--f-serif);font-size:21px;font-weight:600}
.tag{border-radius:6px}

/* sections divide like a shoreline */
.band{background:var(--green);position:relative;margin-top:28px}
.band::before{content:"";position:absolute;inset:-27px 0 auto;height:28px;background:radial-gradient(circle at 18px 28px,var(--green) 17.5px,transparent 18.5px) 0 0/36px 28px repeat-x}
.counters{border-radius:14px;background:rgba(243,235,218,.14)}
.counters div{background:var(--green)}
.counters b{color:var(--gold);font-weight:500}
.slider-card{background:var(--green-2);border-radius:14px}
.tier-out{border-radius:12px;background:var(--cream)}
.tier-out h4{font-family:var(--f-serif);font-size:25px}
.tier-out .ico{background:var(--gold);border-radius:14px}
.story{background:var(--green)}
.story-steps h3{font-family:var(--f-serif);font-weight:600}
.story-steps .n{display:inline-block;font-family:var(--f-display);font-style:normal;letter-spacing:0;color:var(--gold);font-size:15px}
.ticker{background:var(--gold-soft)}
.donut .c b{font-weight:500}
.ftr{background:var(--green)}
.ftr .logo{color:var(--cream)}
.vol,.dcard,.qa,.dlist,.bd{border-radius:14px}
.mdonate{background:rgba(243,235,218,.96)}
@media (max-width:980px){.tank{height:520px;min-height:0;border-radius:200px 200px 18px 18px}.tank .ruler{width:34px}}
@media (max-width:560px){.tank .mark{inset-inline-end:10%}}
@media (prefers-reduced-motion:reduce){.tank .wave{animation:none!important}}