/* =========================================================
   منصة الدفاع الرقمي — نظام الهوية العامة (Brand v2)
   الاتجاه المعتمد: National Digital Shield (B+)
   يغطي: الصفحة الرئيسية · صفحات الدخول والتسجيل · الشهادة
   ========================================================= */
:root{
  --ivory:#f7f4ec; --ivory2:#fffdf9; --paper:#ffffff;
  --ink:#0a1f14; --ink2:#33473d; --mute:#61756a;
  --g9:#0b3f26; --g7:#166b43; --g5:#2a9d63;
  --gold:#c8911f; --gold2:#e8b53e; --gold3:#f2dfa8;
  --line:#e4dfd2; --line2:#cfc7b4;
  --err:#a8403a; --err-bg:#fdf1f0;
  --ok:#14603a;  --ok-bg:#eaf7ee;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Tajawal',system-ui,'Segoe UI',sans-serif; background:var(--ivory); color:var(--ink);
     font-size:15.5px; line-height:1.85; overflow-x:hidden; -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{width:min(1240px,calc(100% - 56px)); margin:0 auto}
.wide{width:min(1460px,calc(100% - 56px)); margin:0 auto}

/* ---------- ترويسة عامة ---------- */
.site-hdr{position:sticky; top:0; z-index:60; background:rgba(247,244,236,.9);
          backdrop-filter:blur(16px); border-bottom:1px solid var(--line)}
.hdr{display:flex; align-items:center; gap:16px; padding:12px 0}
.hdr .mk{display:flex; align-items:center; gap:11px; text-decoration:none}
.hdr .mk img{width:32px}
.hdr .mk b{display:block; font-size:13.5px; font-weight:800; line-height:1.4}
.hdr .mk span{display:block; font-size:9px; letter-spacing:2.8px; color:var(--mute)}
.hdr nav{margin-inline-start:auto; display:flex; align-items:center; gap:26px}
.hdr nav a{font-size:13px; color:var(--mute); text-decoration:none; font-weight:600}
.hdr nav a:hover{color:var(--g7)}
.hdr .go{background:var(--g9); color:var(--gold3); padding:10px 22px; border-radius:2px;
         font-size:13px; font-weight:700; text-decoration:none}

/* ---------- أزرار ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 34px;
     border-radius:2px; font-family:inherit; font-size:15px; font-weight:800;
     text-decoration:none; border:1px solid transparent; cursor:pointer; transition:.18s}
.btn-p{background:var(--g9); color:var(--gold3)}
.btn-p:hover{background:#0e5230}
.btn-o{border-color:var(--line2); color:var(--g9); background:transparent}
.btn-o:hover{border-color:var(--g7)}
.btn[disabled]{opacity:.6; cursor:not-allowed}

/* =========================================================
   الصفحة الرئيسية
   ========================================================= */
.hero{position:relative; overflow:hidden; text-align:center; padding:82px 0 58px;
  background:
    radial-gradient(circle at 50% 22%, rgba(42,157,99,.12), transparent 44%),
    radial-gradient(circle at 50% 26%, rgba(232,181,62,.10), transparent 34%),
    linear-gradient(180deg,var(--ivory2) 0%, var(--ivory) 100%)}
.rings{position:absolute; top:-40px; left:50%; transform:translateX(-50%); pointer-events:none}
.rings i{position:absolute; left:50%; transform:translateX(-50%); border-radius:50%;
         border:1px solid rgba(22,107,67,.09)}
.rings i:nth-child(1){width:460px;height:460px;margin-top:-40px}
.rings i:nth-child(2){width:700px;height:700px;margin-top:-160px}
.rings i:nth-child(3){width:980px;height:980px;margin-top:-300px;border-color:rgba(200,145,31,.09)}
.hero > *{position:relative}
.crest{width:132px; margin:0 auto 26px; display:block; filter:drop-shadow(0 18px 40px rgba(11,63,38,.24))}
.authority{font-size:11px; letter-spacing:3.6px; color:var(--gold); font-weight:800; margin-bottom:24px}
.hero h1{font-family:'Amiri',serif; font-size:clamp(38px,5.4vw,74px); font-weight:700;
         line-height:1.34; letter-spacing:-.01em; margin-bottom:8px}
.hero h1 em{font-style:normal; color:var(--g7); display:block}
.motto{display:inline-flex; align-items:center; gap:12px; font-size:13px; letter-spacing:1.6px;
       color:var(--g7); font-weight:700; margin:16px 0 22px}
.motto:before,.motto:after{content:''; width:34px; height:1px; background:var(--line2)}
.lede{font-size:clamp(15.5px,1.55vw,18.5px); color:var(--ink2); max-width:60ch; margin:0 auto 34px}
.acts{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.status{margin-top:44px; display:inline-flex; align-items:stretch;
        background:var(--paper); border:1px solid var(--line); border-radius:3px;
        box-shadow:0 12px 34px rgba(11,63,38,.06); overflow:hidden}
.status .lbl{display:flex; align-items:center; gap:9px; padding:15px 22px; background:var(--g9);
             color:var(--gold3); font-size:11.5px; letter-spacing:1.8px; font-weight:700; white-space:nowrap}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--gold2);
       box-shadow:0 0 0 0 rgba(232,181,62,.6); animation:pl 2.4s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(232,181,62,.55)}70%{box-shadow:0 0 0 9px rgba(232,181,62,0)}100%{box-shadow:0 0 0 0 rgba(232,181,62,0)}}
.status .row{display:flex}
.status .it{padding:14px 26px; border-inline-start:1px solid var(--line); text-align:center; white-space:nowrap}
.status .it b{display:block; font-size:19px; font-weight:800; line-height:1.3; color:var(--g9)}
.status .it small{font-size:11px; color:var(--mute)}

.impact{background:var(--g9); color:#e9f2ec; position:relative; overflow:hidden}
.impact:before{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 150% at 50% 0%, rgba(232,181,62,.12), transparent 62%)}
.impact-in{position:relative; display:grid; grid-template-columns:repeat(5,1fr); padding:56px 0}
.im{text-align:center; padding:0 16px; border-inline-start:1px solid rgba(232,181,62,.16)}
.im:first-child{border-inline-start:0}
.im b{display:block; font-family:'Amiri',serif; font-size:clamp(36px,4vw,60px); font-weight:700;
      color:var(--gold3); line-height:1}
.im small{display:block; font-size:11.5px; letter-spacing:1.4px; color:rgba(233,242,236,.7); margin-top:10px}
.impact-note{position:relative; text-align:center; padding:0 0 30px; font-size:12px;
             color:rgba(233,242,236,.55)}

section{padding:96px 0}
.sec-t{text-align:center; margin-bottom:56px}
.sec-t .kick{display:block; font-size:10.5px; letter-spacing:3.6px; color:var(--gold);
             font-weight:800; margin-bottom:14px}
.sec-t h2{font-family:'Amiri',serif; font-size:clamp(28px,3.3vw,46px); font-weight:700;
          line-height:1.35; margin-bottom:14px}
.sec-t p{color:var(--mute); max-width:60ch; margin:0 auto; font-size:15px}

.chain-rail{max-width:900px; margin:0 auto 6px; height:2px;
            background:linear-gradient(90deg,var(--g5),var(--gold))}
.layers{max-width:900px; margin:0 auto}
.lay{display:flex; align-items:baseline; gap:24px; padding:22px 0; border-bottom:1px solid var(--line)}
.lay:last-child{border-bottom:0}
.lay .idx{font-family:'Amiri',serif; font-size:24px; font-weight:700; color:var(--line2);
          min-width:44px; text-align:center}
.lay .who{font-size:17.5px; font-weight:800; min-width:160px}
.lay p{font-size:14px; color:var(--mute); margin:0; flex:1}
.lay.peak .idx{color:var(--gold)}
.lay.peak .who{color:var(--g7)}

.journey{background:var(--ivory2); border-block:1px solid var(--line)}
.jgrid{display:grid; grid-template-columns:repeat(4,1fr); max-width:1120px; margin:0 auto}
.j{padding:0 30px; border-inline-start:1px solid var(--line); text-align:center}
.j:first-child{border-inline-start:0}
.j .num{font-family:'Amiri',serif; font-size:52px; font-weight:700; color:var(--g5);
        line-height:1; margin-bottom:14px; opacity:.4}
.j b{display:block; font-size:18px; font-weight:800; margin-bottom:10px}
.j p{font-size:13.5px; color:var(--mute)}

.system{background:linear-gradient(180deg,#082f1d 0%, var(--g9) 55%, #0a3823 100%);
        color:#e9f2ec; padding:104px 0 110px; position:relative; overflow:hidden}
.system:before{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 90% at 50% 8%, rgba(232,181,62,.13), transparent 60%)}
.system > *{position:relative}
.system .sec-t h2{color:#fff}
.system .sec-t p{color:rgba(233,242,236,.72)}
.stage{max-width:1240px; margin:0 auto}
.screen{border:1px solid rgba(232,181,62,.26); border-radius:5px; overflow:hidden; background:#04160e;
        box-shadow:0 46px 100px rgba(0,0,0,.5)}
.screen .chrome{display:flex; align-items:center; gap:9px; padding:12px 20px;
                background:rgba(255,255,255,.045); border-bottom:1px solid rgba(232,181,62,.16)}
.screen .chrome b{font-size:12.5px; font-weight:700; color:#fff}
.screen .chrome span{margin-inline-start:auto; font-size:10px; letter-spacing:2.4px; color:var(--gold2)}
.screen img{width:100%; display:block}
.screens2{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:26px}
.screens2 .screen{box-shadow:0 28px 64px rgba(0,0,0,.42)}
.sys-legend{display:grid; grid-template-columns:repeat(4,1fr); margin-top:52px;
            border-top:1px solid rgba(232,181,62,.2); padding-top:34px}
.sys-legend div{padding:0 22px; border-inline-start:1px solid rgba(232,181,62,.14)}
.sys-legend div:first-child{border-inline-start:0; padding-inline-start:0}
.sys-legend b{display:block; font-size:14.5px; font-weight:800; color:#fff; margin-bottom:6px}
.sys-legend p{font-size:12.5px; color:rgba(233,242,236,.62)}

.gov{display:grid; grid-template-columns:repeat(3,1fr); max-width:1120px; margin:0 auto;
     border-block:1px solid var(--line)}
.gov > div{padding:44px 34px; border-inline-start:1px solid var(--line)}
.gov > div:first-child{border-inline-start:0}
.gov .sh{width:40px; height:47px; margin-bottom:20px; background:var(--g9);
         clip-path:polygon(50% 0,100% 22%,100% 62%,50% 100%,0 62%,0 22%);
         display:grid; place-items:center; color:var(--gold3);
         font-family:'Amiri',serif; font-size:17px; font-weight:700}
.gov b{display:block; font-size:17.5px; font-weight:800; margin-bottom:10px}
.gov p{font-size:14px; color:var(--mute)}

.final{text-align:center; padding:110px 0; position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 18%, rgba(42,157,99,.12), transparent 46%),
             linear-gradient(180deg,var(--ivory),var(--ivory2))}
.final > *{position:relative}
.final .crest-s{width:74px; margin:0 auto 24px; display:block}
.final h2{font-family:'Amiri',serif; font-size:clamp(30px,4vw,58px); font-weight:700;
          margin-bottom:16px; line-height:1.3}
.final p{color:var(--mute); font-size:16.5px; margin-bottom:36px}
.final .figs{display:flex; justify-content:center; margin-bottom:38px; flex-wrap:wrap}
.final .figs div{padding:0 34px; border-inline-start:1px solid var(--line)}
.final .figs div:first-child{border-inline-start:0}
.final .figs b{display:block; font-family:'Amiri',serif; font-size:34px; color:var(--g7); line-height:1.1}
.final .figs small{font-size:11.5px; color:var(--mute); letter-spacing:1.2px}

.gates{border-top:1px solid var(--line); padding:30px 0}
.gates-in{display:flex; align-items:center; justify-content:center; flex-wrap:wrap}
.gates-in span{font-size:10.5px; letter-spacing:2.6px; color:var(--mute); padding-inline-end:26px}
.gates-in a{font-size:13px; color:var(--ink2); text-decoration:none; font-weight:600;
            padding:0 24px; border-inline-start:1px solid var(--line)}
.gates-in a:hover{color:var(--g7)}
.site-foot{padding:22px 0 46px; text-align:center; font-size:12px; color:var(--mute)}
.site-foot a{color:var(--g7); text-decoration:none; font-weight:700}

/* =========================================================
   تجربة الدخول — شاشة مقسومة
   ========================================================= */
body.daf3-auth{background:var(--ivory); min-height:100vh}
.auth{display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh}

/* الجانب المؤسسي */
.auth-brand{position:relative; overflow:hidden; padding:56px 60px; display:flex;
  flex-direction:column; color:#e9f2ec;
  background:linear-gradient(165deg,#082f1d 0%, var(--g9) 55%, #0a3823 100%)}
.auth-brand:before{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 30% 18%, rgba(232,181,62,.14), transparent 62%)}
.auth-brand > *{position:relative}
.auth-rings{position:absolute; top:-120px; right:-160px; pointer-events:none}
.auth-rings i{position:absolute; border-radius:50%; border:1px solid rgba(232,181,62,.11)}
.auth-rings i:nth-child(1){width:420px;height:420px}
.auth-rings i:nth-child(2){width:660px;height:660px;top:-120px;right:-120px}
.auth-mk{display:flex; align-items:center; gap:12px; text-decoration:none}
.auth-mk img{width:38px}
.auth-mk b{display:block; font-size:14px; font-weight:800; line-height:1.4; color:#fff}
.auth-mk span{display:block; font-size:9px; letter-spacing:2.8px; color:rgba(233,242,236,.6)}
.auth-mid{margin:auto 0; padding:40px 0}
.auth-crest{width:112px; margin-bottom:28px; display:block;
            filter:drop-shadow(0 16px 36px rgba(0,0,0,.34))}
.auth-mid h2{font-family:'Amiri',serif; font-size:clamp(28px,2.8vw,44px); font-weight:700;
             line-height:1.35; margin-bottom:14px; color:#fff}
.auth-mid h2 em{font-style:normal; color:var(--gold3); display:block}
.auth-mid p{font-size:15px; color:rgba(233,242,236,.76); max-width:44ch}
.auth-facts{display:flex; gap:0; margin-top:34px; border-top:1px solid rgba(232,181,62,.2); padding-top:26px}
.auth-facts div{padding-inline-end:30px; margin-inline-end:30px; border-inline-end:1px solid rgba(232,181,62,.16)}
.auth-facts div:last-child{border-inline-end:0; margin-inline-end:0; padding-inline-end:0}
.auth-facts b{display:block; font-family:'Amiri',serif; font-size:28px; color:var(--gold3); line-height:1.15}
.auth-facts small{font-size:11px; color:rgba(233,242,236,.62); letter-spacing:1.1px}
.auth-brand .foot{font-size:11.5px; color:rgba(233,242,236,.5)}

/* جانب النموذج */
.auth-form{display:flex; flex-direction:column; justify-content:center; padding:56px 64px;
           background:var(--ivory2)}
.auth-form .inner{width:min(430px,100%); margin:0 auto}
.auth-back{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--mute);
           text-decoration:none; margin-bottom:30px; font-weight:600}
.auth-back:hover{color:var(--g7)}
.auth-kick{font-size:10.5px; letter-spacing:3.2px; color:var(--gold); font-weight:800; margin-bottom:12px}
.auth-form h1{font-family:'Amiri',serif; font-size:34px; font-weight:700; line-height:1.3; margin-bottom:8px}
.auth-form .sub{font-size:14px; color:var(--mute); margin-bottom:30px}
.fld{margin-bottom:18px}
.fld label{display:block; font-size:13px; font-weight:800; margin-bottom:8px}
.fld input, .fld select{width:100%; font-family:inherit; font-size:15.5px; padding:14px 16px;
  border:1px solid var(--line2); border-radius:2px; background:var(--paper); color:var(--ink)}
.fld input:focus, .fld select:focus{outline:0; border-color:var(--g5);
  box-shadow:0 0 0 3px rgba(42,157,99,.13)}
.fld .hint{font-size:11.5px; color:var(--mute); margin-top:7px}
.fld input[inputmode="numeric"]{letter-spacing:3px; font-weight:700; direction:ltr; text-align:center}
.btn-auth{width:100%; min-height:54px; border:0; border-radius:2px; cursor:pointer;
  font-family:inherit; font-size:15.5px; font-weight:800; color:var(--gold3); background:var(--g9);
  display:flex; align-items:center; justify-content:center; gap:9px; transition:.18s; margin-top:6px}
.btn-auth:hover{background:#0e5230}
.btn-auth[disabled]{opacity:.62; cursor:not-allowed}
.msg{border-radius:2px; padding:13px 16px; font-size:13.5px; font-weight:700; margin-bottom:20px;
     border-inline-start:3px solid; line-height:1.8}
.msg.err{background:var(--err-bg); border-color:var(--err); color:var(--err)}
.msg.ok{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}
.auth-alt{margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
          font-size:13.5px; color:var(--mute); text-align:center}
.auth-alt a{color:var(--g7); font-weight:800; text-decoration:none}
.done{text-align:center}
.done .seal{width:56px; height:66px; margin:0 auto 20px; background:var(--g9);
  clip-path:polygon(50% 0,100% 22%,100% 62%,50% 100%,0 62%,0 22%);
  display:grid; place-items:center; color:var(--gold3); font-family:'Amiri',serif;
  font-size:24px; font-weight:700}

/* =========================================================
   الجوال
   ========================================================= */
@media(max-width:980px){
  .wrap,.wide{width:calc(100% - 32px)}
  .hdr{padding:10px 0}
  .hdr nav a:not(.go){display:none}

  .hero{padding:30px 18px 34px}
  .crest{width:78px; margin-bottom:15px}
  .authority{font-size:9px; letter-spacing:2.4px; margin-bottom:13px}
  .hero h1{font-size:clamp(26px,7.4vw,35px); line-height:1.4}
  .motto{margin:10px 0 14px; font-size:11.5px}
  .motto:before,.motto:after{width:20px}
  .lede{font-size:14.5px; margin-bottom:22px}
  .acts{flex-direction:column; gap:10px}
  .btn{width:100%}
  .rings i:nth-child(2),.rings i:nth-child(3){display:none}
  .rings i:nth-child(1){width:300px;height:300px}
  .status{margin-top:24px; width:100%; flex-direction:column}
  .status .lbl{justify-content:center; padding:11px 16px}
  .status .row{display:grid; grid-template-columns:1fr 1fr}
  .status .it{border-inline-start:1px solid var(--line); padding:12px 8px}
  .status .it:first-child{border-inline-start:0}
  .status .it b{font-size:16px}

  .impact-in{grid-template-columns:1fr 1fr; padding:0}
  .im{border-inline-start:0; padding:24px 12px; border-top:1px solid rgba(232,181,62,.14)}
  .im:nth-child(odd){border-inline-end:1px solid rgba(232,181,62,.14)}
  .im:first-child,.im:nth-child(2){border-top:0}
  .im:last-child{grid-column:1/-1}
  .impact-note{padding:18px 16px 26px}

  section{padding:58px 0}
  .sec-t{margin-bottom:32px}
  .lay{flex-wrap:wrap; gap:12px; padding:18px 0}
  .lay .idx{min-width:30px; text-align:start}
  .lay .who{min-width:auto}
  .lay p{flex-basis:100%; font-size:13.5px}
  .jgrid{grid-template-columns:1fr}
  .j{padding:26px 0; border-inline-start:0; border-top:1px solid var(--line); text-align:start}
  .j:first-child{padding-top:0; border-top:0}
  .j .num{font-size:38px; margin-bottom:8px}

  .system{padding:60px 0 66px}
  .screens2{grid-template-columns:1fr; gap:18px}
  .sys-legend{grid-template-columns:1fr 1fr; gap:22px 0; margin-top:34px}
  .sys-legend div{padding:0 16px}
  .sys-legend div:nth-child(odd){border-inline-start:0; padding-inline-start:0}

  .gov{grid-template-columns:1fr}
  .gov > div{padding:30px 0; border-inline-start:0; border-top:1px solid var(--line)}
  .gov > div:first-child{border-top:0}

  .final{padding:60px 18px}
  .final .figs div{padding:0 20px}
  .final .figs b{font-size:26px}
  .gates-in span{flex-basis:100%; text-align:center; padding:0 0 10px}

  /* الدخول: شاشة واحدة ذكية */
  .auth{grid-template-columns:1fr; min-height:0}
  .auth-brand{padding:26px 20px 30px; min-height:auto}
  .auth-rings{display:none}
  .auth-mid{margin:22px 0 0; padding:0}
  .auth-crest{width:64px; margin-bottom:16px}
  .auth-mid h2{font-size:25px; margin-bottom:9px}
  .auth-mid p{font-size:13.5px}
  .auth-facts{margin-top:22px; padding-top:18px}
  .auth-facts div{padding-inline-end:18px; margin-inline-end:18px}
  .auth-facts b{font-size:22px}
  .auth-brand .foot{display:none}
  .auth-form{padding:30px 20px 44px}
  .auth-form h1{font-size:27px}
  .auth-back{margin-bottom:20px}
}