/* DEVENUE CFP SMART — single-page immersive review build.
   Dark navy world, blue→cyan arc, teal=accepted, amber/rose=refusals.
   Vanilla CSS only; every animated rule has a reduced-motion off-ramp. */
:root{
  --ink:#060F22; --ink2:#0A1730; --surf:#0D1B38; --surf2:#152A50;
  --line:#22395F; --line2:#2E4B7A;
  --blue:#2E63C8; --blue-lt:#5E9BEE; --cyan:#19BEF0; --teal:#19B89A;
  --amber:#E8A33D; --rose:#E8705A;
  --fg:#EDF3FC; --fg2:#B7C9E2; --mut:#8EA5C6; --dim:#62799C;
  --ar:'Cairo',system-ui,sans-serif;
  --bd:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --mn:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--bd);
     font-size:17px;line-height:1.75;direction:rtl;-webkit-font-smoothing:antialiased;
     overflow-x:hidden}
.wrap{max-width:1180px;margin-inline:auto;
      padding-left:max(16px,env(safe-area-inset-left,0px));
      padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--ar);font-weight:700;line-height:1.28;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,6.4vw,68px);letter-spacing:-.5px}
h2{font-size:clamp(26px,4.2vw,42px)}
h3{font-size:clamp(19px,2.4vw,24px)}
p{margin:0}
.mono{font-family:var(--mn);font-variant-numeric:tabular-nums;
      direction:ltr;unicode-bidi:isolate;display:inline-block}
.lead{color:var(--fg2);font-size:clamp(17px,2.1vw,21px);max-width:62ch;margin-top:18px}
.mut{color:var(--mut)}
a{color:var(--blue-lt)}
section{padding-block:clamp(64px,9vw,120px);position:relative}
.band{background:var(--ink2);border-block:1px solid var(--line)}

/* ---------- chapter marker ---------- */
.chap{display:flex;align-items:baseline;gap:14px;direction:ltr;justify-content:flex-end}
.chap .n{font-family:var(--mn);font-size:clamp(38px,6vw,64px);font-weight:400;
         color:transparent;-webkit-text-stroke:1px var(--line2);line-height:1}
.chap .t{font-family:var(--mn);font-size:13px;letter-spacing:.18em;color:var(--cyan);
         text-transform:uppercase}
.eyebrow{font-family:var(--mn);font-size:13px;letter-spacing:.18em;color:var(--cyan);
         text-transform:uppercase;direction:ltr;text-align:right}

/* ---------- scroll progress + nav ---------- */
#prog{position:fixed;top:0;right:0;height:2px;width:0;z-index:40;
      background:linear-gradient(90deg,var(--blue),var(--cyan))}
header{position:sticky;top:0;z-index:30;background:#060F22F2;backdrop-filter:blur(10px);
       border-bottom:1px solid var(--line)}
.navin{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.logoimg{height:30px;width:auto;display:block}
.logoimg.sm{height:22px}
nav{margin-inline-start:auto;display:flex;gap:2px;flex-wrap:wrap}
nav a{font-size:14.5px;color:var(--mut);text-decoration:none;padding:7px 11px;border-radius:8px}
nav a:hover,nav a:focus-visible{color:var(--fg);background:#15284C}
nav a.act{color:var(--fg);background:#15284C}

/* ---------- hero: full-viewport logo stage ---------- */
#hero{min-height:calc(100svh - 65px);display:flex;align-items:center;overflow:hidden;
      padding-block:clamp(24px,4vw,48px)}
.heroGrid{display:grid;grid-template-columns:1.2fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;width:100%}
.heroArt{position:relative;display:flex;align-items:center;justify-content:center;
         aspect-ratio:1;max-width:100%;min-width:0}
.heroArt::before{content:"";position:absolute;inset:-10%;pointer-events:none;
                 background:radial-gradient(circle at 50% 42%,#1B4A9E66,transparent 62%)}
.symbol{position:relative;width:min(340px,80%);aspect-ratio:1;
        animation:symrot 44s linear 1.7s infinite}
.blade{position:absolute;width:33.5%;height:33.5%;opacity:0;
       animation:bIn .75s cubic-bezier(.22,1.15,.32,1) forwards}
.b-n{top:0;left:34%;background:#2F80C2;border-radius:0 50% 0 0;--fx:0;--fy:-46%;animation-delay:.15s}
.b-w{top:34%;left:0;background:#1E4BA0;border-radius:0 0 0 50%;--fx:-46%;--fy:0;animation-delay:.3s}
.b-e{top:33%;right:0;background:#20BDB6;border-radius:0 50% 0 0;--fx:46%;--fy:0;animation-delay:.45s}
.b-s{bottom:0;left:33%;background:#14B0E3;border-radius:0 0 0 50%;--fx:0;--fy:46%;animation-delay:.6s}
@keyframes bIn{from{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.8) rotate(-9deg)}
               to{opacity:1;transform:none}}
@keyframes symrot{to{transform:rotate(360deg)}}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chip{font-family:var(--mn);font-size:13px;color:var(--fg2);border:1px solid var(--line2);
      border-radius:30px;padding:7px 15px;direction:ltr}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{font-family:var(--bd);font-size:16px;font-weight:600;border-radius:10px;padding:13px 24px;
     border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block}
.btn.p{background:linear-gradient(100deg,#1D4FB0,#2E6FD8);color:#fff}
.btn.s{background:transparent;border-color:var(--line2);color:var(--fg)}
.btn:hover{filter:brightness(1.12)}
.scrollcue{display:flex;align-items:center;gap:10px;margin-top:44px;color:var(--dim);
           font-family:var(--mn);font-size:12.5px;letter-spacing:.14em;direction:ltr}
.scrollcue i{width:1px;height:34px;background:linear-gradient(var(--cyan),transparent);
             display:block;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1)}}

/* ---------- cards / grids ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;margin-top:38px}
.card{background:linear-gradient(170deg,var(--surf2),var(--surf));border:1px solid var(--line);
      border-radius:16px;padding:26px;min-width:0}
.card h3{margin-bottom:10px}
.card p{color:var(--mut);font-size:16px}
.card .tag{font-family:var(--mn);font-size:12px;letter-spacing:.12em;color:var(--cyan);
           display:block;margin-bottom:14px;direction:ltr;text-align:right}
.card.t .tag{color:var(--teal)} .card.a .tag{color:var(--amber)} .card.r .tag{color:var(--rose)}

/* ---------- video ---------- */
.vwrap{margin-top:36px;border:1px solid var(--line2);border-radius:20px;overflow:hidden;background:#02060F}
.vwrap video{display:block;width:100%;aspect-ratio:16/9;background:#02060F}

/* ---------- gate demo ---------- */
.demo{background:#0B1830;border:1px solid var(--line2);border-radius:18px;padding:26px;margin-top:38px}
.pipe{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:6px}
.node{flex:1 0 148px;min-width:0;text-align:center;padding:18px 12px;border:1px solid var(--line);
      border-radius:12px;background:var(--surf);transition:background .3s,border-color .3s,box-shadow .3s}
.node small{display:block;font-family:var(--mn);font-size:11.5px;letter-spacing:.11em;
            color:var(--dim);margin-bottom:8px;direction:ltr}
.node span{font-size:15px;color:var(--mut);display:block}
.node.lit{background:#163374;border-color:var(--blue);box-shadow:0 0 0 3px #2E63C833}
.node.lit span{color:#fff}
.node.blk{background:#3A1B18;border-color:var(--rose);box-shadow:0 0 0 3px #E8705A33}
.node.blk span{color:#FFD9D2}
.lnk{flex:0 0 26px;align-self:center;height:2px;background:var(--line2);position:relative}
.lnk i{position:absolute;inset:0;width:0;background:var(--cyan);transition:width .34s linear}
.lnk.go i{width:100%}
.verdict{margin-top:20px;border-radius:12px;padding:18px 22px;border:1px solid var(--line);
         background:var(--surf);color:var(--mut);font-size:15.5px}
.verdict.r{background:#2C1613;border-color:#6E3A32}
.verdict b{color:var(--rose);font-family:var(--mn);font-size:15px;letter-spacing:.06em;direction:ltr;display:inline-block}
.verdict.r .m{color:#F2C6BE;display:block;margin-top:6px}

/* ---------- trace ---------- */
.trace{display:flex;flex-direction:column;gap:9px;margin-top:34px}
.tr{border:1px solid var(--line);border-radius:13px;background:#0C1A35;overflow:hidden}
.tr summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:132px 1fr auto;
            gap:14px;align-items:center;padding:16px 20px}
.tr summary::-webkit-details-marker{display:none}
.tr summary:hover{background:#102244}
.tr .k{font-family:var(--mn);font-size:11.5px;letter-spacing:.1em;color:var(--cyan);direction:ltr}
.tr .v{font-size:15.5px;color:var(--fg2);min-width:0}
.tr .v b{font-family:var(--mn);color:var(--fg);font-weight:500}
.tr .pl{color:var(--dim);font-size:20px;line-height:1;transition:transform .25s}
.tr[open] .pl{transform:rotate(45deg)}
.tr .body{padding:0 20px 18px;color:var(--mut);font-size:15px;border-top:1px solid var(--line)}
.tr .body p{padding-top:14px}
.recalc{margin-top:22px;border:1px solid #1E6A5C;background:#0C2621;border-radius:13px;
        padding:16px 20px;font-family:var(--mn);font-size:14px;color:var(--teal);
        direction:ltr;text-align:left;overflow-x:auto;white-space:nowrap}

/* ---------- sector dial ---------- */
.dial{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.dial button{font-family:var(--bd);font-size:15.5px;font-weight:600;color:var(--mut);
             background:var(--surf);border:1px solid var(--line);border-radius:99px;
             padding:11px 22px;cursor:pointer;transition:all .25s}
.dial button:hover{border-color:var(--line2);color:var(--fg)}
.dial button[aria-pressed="true"]{color:#fff;border-color:var(--blue);
             background:#163374;box-shadow:0 0 0 3px #2E63C82E}
.sxpanel{margin-top:22px;border:1px solid var(--line2);border-radius:18px;
         background:linear-gradient(170deg,var(--surf2),var(--surf));padding:30px;position:relative}
.sxpanel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:18px 18px 0 0;
                 background:linear-gradient(90deg,var(--blue),var(--cyan))}
.sxpanel h3{margin-bottom:6px}
.sxpanel .st{font-family:var(--mn);font-size:12.5px;letter-spacing:.1em;margin-bottom:16px;display:block}
.sxpanel .st.ref{color:var(--amber)} .sxpanel .st.disc{color:var(--cyan)} .sxpanel .st.tgt{color:var(--dim)}
.sxpanel p{color:var(--mut);font-size:16px;max-width:70ch}
.sxpanel ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.sxpanel li{font-size:15.5px;color:var(--mut);display:grid;grid-template-columns:18px 1fr;gap:10px}
.sxpanel li::before{content:"—";color:var(--dim)}
.legrow{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:13.5px;color:var(--dim)}
.legrow b{font-family:var(--mn);font-weight:500;letter-spacing:.06em}
.legrow .l1 b{color:var(--amber)} .legrow .l2 b{color:var(--cyan)} .legrow .l3 b{color:var(--dim)}

/* ---------- rules ---------- */
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;margin-top:38px}
.rule{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;
      border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--surf)}
.rule b{font-family:var(--mn);font-size:21px;color:var(--cyan);font-weight:500;line-height:1.3;direction:ltr}
.rule p{font-size:16px;color:var(--fg2)}
.rule p i{font-style:normal;color:var(--teal)}

/* ---------- state table ---------- */
.tblwrap{overflow-x:auto;margin-top:34px;border:1px solid var(--line);border-radius:16px}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:15.5px}
th,td{text-align:right;padding:15px 18px;border-bottom:1px solid var(--line)}
th{font-family:var(--mn);font-size:12px;letter-spacing:.1em;color:var(--dim);background:var(--surf)}
tr:last-child td{border-bottom:0}
td{color:var(--fg2)}
.pill{font-family:var(--mn);font-size:12px;letter-spacing:.07em;padding:5px 11px;border-radius:30px;
      border:1px solid var(--line2);color:var(--fg2);white-space:nowrap}
.pill.g{color:var(--teal);border-color:#1E6A5C}
.pill.a{color:var(--amber);border-color:#6B5324}
.pill.r{color:var(--rose);border-color:#6E3A32}
.honest{background:linear-gradient(150deg,#13306A,#0C2246);border:1px solid var(--line2);
        border-radius:18px;padding:clamp(26px,4vw,44px);margin-top:34px}
.honest p{font-size:clamp(17px,2.2vw,22px);line-height:1.7}
.honest p b{color:#fff} .honest p i{font-style:normal;color:var(--teal)}

/* ---------- contact ---------- */
.phonebox{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:18px}
.phonenum{font-family:var(--mn);font-size:clamp(30px,6vw,46px);color:#fff;direction:ltr;
          letter-spacing:.05em;text-decoration:none}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--ink2)}
.fin{display:flex;gap:24px;flex-wrap:wrap;align-items:center;padding-block:34px;
     color:var(--mut);font-size:14px}
.fin .m{margin-inline-start:auto;font-family:var(--mn);direction:ltr;font-size:12.5px}

/* ---------- reveal ---------- */
.rv{transition:opacity .55s ease,transform .55s ease}body.js-on .rv:not(.in){opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}

@media (max-width:860px){
  .heroGrid{grid-template-columns:1fr;gap:26px}
  .heroArt{width:100%;max-width:210px;margin-inline:auto;order:-1}
  #hero{min-height:0;padding-block:clamp(36px,7vw,56px)}
  h1{text-wrap:wrap;font-size:clamp(29px,8.6vw,38px)}
  .tr summary{grid-template-columns:1fr auto;row-gap:6px}
  .tr .k{grid-column:1/-1}
  .recalc{white-space:normal;word-break:break-word}
  .logoimg{height:26px}
  .fin .m{margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .symbol,.blade,.scrollcue i{animation:none;opacity:1;transform:none}
  .rv{opacity:1;transform:none;transition:none}
}