@font-face{font-family:"Tajawal";src:url(Tajawal-Medium.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
html{-webkit-text-size-adjust:100%}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
:root{
  --paper:#ffffff; --mist:#f2f7f6; --panel:rgba(255,255,255,.92);
  --blue:#3a84b9; --teal:#3c9a91; --green:#4bae7c; --deep:#0f4c45; --nation:#16704b;
  --gold:#c9a24e; --ink:#17322e; --mute:#5d7672; --ok:#2f9a62; --warn:#c0573c;
  --line:rgba(60,154,145,.22); --grad:linear-gradient(90deg,var(--green),var(--teal) 50%,var(--blue));
  --display:"Tajawal",Tahoma,sans-serif; --body:"Tajawal",Tahoma,"Segoe UI",sans-serif;
  color-scheme:light;
}
html,body{min-height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:500;direction:rtl;overflow-x:hidden;-webkit-tap-highlight-color:transparent;font-size:16px}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
b,strong,h1,h2,h3,legend{font-weight:500}

/* ---- background graphic (same identity) ---- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(70% 45% at 100% 0%,rgba(75,174,124,.10),transparent 70%),radial-gradient(70% 45% at 0% 100%,rgba(58,132,185,.10),transparent 70%),var(--paper)}
.bg svg{position:absolute;inset:0;width:100%;height:100%}
.bg .grid{stroke:var(--teal);opacity:.16;fill:none;stroke-width:1.2}
.bg .node{fill:var(--teal);opacity:.22}
.bg .bin{fill:var(--blue);opacity:.12;font:600 11px/1 ui-monospace,Menlo,monospace}
.bg .big{fill:none;stroke-width:2;opacity:.13}
.bg .flow{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-dasharray:16 240;opacity:.45;animation:flow 7s linear infinite}
@keyframes flow{to{stroke-dashoffset:-256}}
.bg .node circle{animation:blink 3s ease-in-out infinite}
.bg .node circle:nth-child(3n){animation-delay:-1s}.bg .node circle:nth-child(3n+1){animation-delay:-2s}
@keyframes blink{50%{opacity:.25}}
.bg .big{animation:floaty 8s ease-in-out infinite}
.bg .big:nth-of-type(2n){animation-duration:10s;animation-delay:-3s}
@keyframes floaty{50%{translate:0 -12px}}
.bg .bin text{animation:fade 5s ease-in-out infinite}
.bg .bin text:nth-child(2n){animation-delay:-2.5s}
@keyframes fade{50%{opacity:.3}}
.spark{position:absolute;bottom:-20px;width:6px;height:6px;border-radius:50%;background:var(--teal);opacity:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.45}90%{opacity:.3}100%{transform:translateY(-105vh);opacity:0}}

/* ---- layout ---- */
.inside{position:relative;z-index:1;min-height:100vh;padding:calc(env(safe-area-inset-top,0px) + 14px) max(16px,env(safe-area-inset-left,0px)) calc(env(safe-area-inset-bottom,0px) + 50px)}
.wrap{position:relative;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px 18px;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 28px rgba(15,76,69,.06);animation:enter .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes enter{from{opacity:0;transform:translateY(16px)}}
.sec{display:flex;align-items:center;gap:12px;margin:0}
.sec .n{flex:none;width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--display);font-size:1.05rem;box-shadow:0 6px 14px rgba(58,132,185,.28)}
.sec h2{margin:0;font-family:var(--display);font-size:1.3rem;color:var(--deep)}
.muted{color:var(--mute);margin:0;line-height:1.85}

/* ---- hero ---- */
.hero{text-align:center;padding-block:10px 4px;display:flex;flex-direction:column;gap:12px;align-items:center}
.hero>*{animation:enter .8s cubic-bezier(.2,.7,.2,1) both}
.hero>*:nth-child(2){animation-delay:.12s}.hero>*:nth-child(3){animation-delay:.24s}.hero>*:nth-child(4){animation-delay:.36s}.hero>*:nth-child(5){animation-delay:.48s}
.logo-duo{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 18px;border-radius:26px;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(238,247,245,.92));box-shadow:0 16px 34px rgba(15,76,69,.14),inset 0 0 0 1.5px rgba(60,154,145,.22);
  animation:ldIn .9s cubic-bezier(.2,1.3,.4,1) both,ldFloat 5s ease-in-out 1.2s infinite}
.logo-duo::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(120deg,#4bae7c,#3c9a91,#3a84b9,#e2c55a,#4bae7c);background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ldBorder 6s linear infinite;pointer-events:none}
.logo-duo::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-20deg);animation:ldShine 3.8s ease-in-out .8s infinite;pointer-events:none}
.logo-duo img{display:block;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(23,50,46,.12));animation:ldGlow 3.2s ease-in-out infinite}
.logo-duo .wdd{height:96px;width:auto;border-radius:16px}
.logo-duo .jhc{height:80px;width:auto;max-width:52%}
.ld-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.ld-sep{width:2px;height:56px;border-radius:2px;background:linear-gradient(#3c9a91,#3a84b9);opacity:.4}
@keyframes ldIn{from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes ldFloat{50%{transform:translateY(-4px)}}
@keyframes ldShine{0%{left:-60%}55%,100%{left:130%}}
@keyframes ldBorder{to{background-position:300% 0}}
@keyframes ldGlow{50%{filter:drop-shadow(0 0 10px rgba(60,154,145,.45)) drop-shadow(0 4px 8px rgba(23,50,46,.12))}}
.dept{display:inline-block;font-family:var(--display);font-size:1.02rem;line-height:1.6;color:var(--deep);background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 18px;box-shadow:0 6px 16px rgba(15,76,69,.08)}
.eyebrow{font-family:var(--display);font-size:.98rem;color:var(--teal);margin:0}
.hero h1{font-family:var(--display);font-size:clamp(2rem,10vw,3rem);margin:0;line-height:1.35;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 6s ease-in-out infinite,enter .8s both}
@keyframes shine{50%{background-position:100% 0}}
.hero h1 i{font-style:normal}.hero h1 span{display:inline-block}
@media (max-width:520px){.hero h1 i{display:none}.hero h1 span{display:block}}
.logo-duo .jhc{mix-blend-mode:multiply;filter:none!important;animation:none!important}
.hero .sub{margin:0;color:var(--mute);line-height:1.8;font-size:.95rem}
.sector-badge{display:inline-flex;gap:8px;align-items:center;color:var(--deep);font-family:var(--display)}

/* ---- map ---- */
.mapbox{position:relative;border-radius:18px;overflow:hidden;border:1.5px solid var(--line);background:#e8f0f7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.mapbox img,.mapbox svg{display:block;width:100%;height:auto}
.mapbox svg{position:absolute;inset:0}
.gv{fill:rgba(60,154,145,0);stroke:rgba(15,76,69,0);stroke-width:2;stroke-linejoin:round;cursor:pointer;transition:fill .2s,stroke .2s;outline:none;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.gv:hover{fill:rgba(60,154,145,.32);stroke:var(--teal)}}
.gv:focus-visible{fill:rgba(60,154,145,.32);stroke:var(--deep);stroke-width:3}
.gv.sel{fill:rgba(58,132,185,.42);stroke:var(--blue);stroke-width:3.5;animation:selpulse 2s ease-in-out infinite}
@keyframes selpulse{50%{fill:rgba(58,132,185,.28)}}
.mapchip{position:absolute;inset-inline:10px;bottom:10px;display:flex;justify-content:center;pointer-events:none}
.mapchip span{background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:99px;padding:6px 16px;color:var(--deep);font-family:var(--display);box-shadow:0 6px 16px rgba(15,76,69,.15);transform:translateY(8px);opacity:0;transition:.3s}
.mapchip.on span{transform:none;opacity:1}

/* ---- fields ---- */
label.lbl{color:var(--deep);font-size:.98rem;font-family:var(--display)}
.field{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;outline:none;font-size:16px;min-height:50px}
.field:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(60,154,145,.15)}
.field::placeholder{color:#8aa09c}
.field.bad{border-color:var(--warn);box-shadow:0 0 0 3px rgba(192,87,60,.12)}
.field[readonly]{background:var(--mist)}
select.field{appearance:none;-webkit-appearance:none;background:#fff 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='%233c9a91' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat left 14px center;padding-inline-end:14px;padding-inline-start:36px}
.hint{font-size:.84rem;color:var(--mute);margin:0}
.fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.outbtn{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:14px;background:#fff;cursor:pointer;font-family:var(--display);font-size:1.02rem;color:var(--deep);transition:.2s}
.outbtn[aria-pressed="true"]{border-color:var(--blue);background:rgba(58,132,185,.1);color:var(--blue)}
.outbtn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.fixed{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--teal);background:linear-gradient(120deg,rgba(60,154,145,.12),rgba(255,255,255,.9));color:var(--deep);font-family:var(--display);font-size:1.08rem}
.fixed svg{flex:none}
.fixed small{margin-inline-start:auto;color:var(--teal);font-family:var(--body);font-size:.8rem;border:1px solid var(--line);border-radius:99px;padding:2px 10px;background:#fff}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opt{border:1.5px solid var(--line);border-radius:14px;padding:15px 6px;background:#fff;cursor:pointer;font-family:var(--display);font-size:1.05rem;transition:.2s}
.opt[aria-pressed="true"]{border-color:var(--teal);background:rgba(60,154,145,.12);color:var(--deep);transform:translateY(-2px);box-shadow:0 8px 18px rgba(60,154,145,.2)}
.opt:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.privacy{background:linear-gradient(160deg,rgba(58,132,185,.09),rgba(255,255,255,.95) 55%)}
.ph{display:flex;gap:10px;align-items:center;color:var(--blue)}
.ph h3{margin:0;font-family:var(--display);font-size:1.05rem;color:var(--deep)}
.tips{margin:0;padding:14px 16px;padding-inline-start:30px;background:#fff;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:8px;line-height:1.85;font-size:.94rem}
.tips li::marker{color:var(--teal)}
.pledge{display:flex;gap:12px;align-items:flex-start;line-height:1.85;cursor:pointer;font-size:.95rem}
.pledge input{accent-color:var(--teal);width:22px;height:22px;flex:none;margin-top:4px}
.primary{border:0;border-radius:16px;padding:16px;cursor:pointer;background:var(--grad);background-size:200% 100%;animation:shine 5s ease-in-out infinite;color:#fff;font-family:var(--display);font-size:1.2rem;box-shadow:0 8px 20px rgba(58,132,185,.25)}
.primary:disabled{opacity:.55;cursor:default;animation:none}
.primary:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.msg{font-size:.95rem;margin:0;min-height:1.2em;text-align:center;line-height:1.8}
.msg.err{color:var(--warn)}
.deadline{text-align:center;color:var(--mute);font-size:.86rem;margin:0}

/* success */
.done{align-items:center;text-align:center;gap:10px;padding:34px 20px}
.done .ring{width:96px;height:96px}
.done .ring circle{fill:none;stroke:var(--ok);stroke-width:5;stroke-dasharray:290;stroke-dashoffset:290;animation:draw 1s .1s forwards;transform:rotate(-90deg);transform-origin:50% 50%}
.done .ring path{fill:none;stroke:var(--ok);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70;animation:draw .6s .9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done h2{margin:0;font-family:var(--display);font-size:1.5rem;color:var(--deep)}
.refno{font-family:var(--display);color:var(--teal);border:1.5px solid var(--line);border-radius:99px;padding:4px 18px;background:#fff}

.foot{text-align:center;font-size:.82rem;color:var(--mute);margin:6px 0 0;line-height:1.9}
.foot a{color:var(--teal);text-decoration:none}
.toast{position:fixed;z-index:35;left:50%;top:calc(env(safe-area-inset-top,0px) + 16px);transform:translate(-50%,-20px);opacity:0;pointer-events:none;background:#fff;border:1px solid var(--line);border-radius:99px;padding:10px 18px;color:var(--deep);box-shadow:0 10px 30px rgba(15,76,69,.18);transition:.35s;max-width:calc(100% - 32px);text-align:center;font-family:var(--display)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:380px){.logo-duo .wdd{height:76px}.logo-duo .jhc{height:64px}.ld-sep{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}.spark{display:none}}