*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-block-start:86px}
body{margin:0;background:var(--warif-paper);color:var(--warif-ink);
  font-family:var(--font-ar-body);font-size:var(--ar-body);line-height:var(--ar-body-lh);
  -webkit-font-smoothing:antialiased}
.wrap{max-inline-size:1120px;margin-inline:auto;padding-inline:24px}
h1,h2,h3,h4{font-family:var(--font-ar-display);font-weight:500;margin:0}
h1{font-size:var(--ar-h1);line-height:var(--ar-h1-lh);letter-spacing:-.01em}
h2{font-size:var(--ar-h2);line-height:var(--ar-h2-lh)}
h3{font-size:var(--ar-h3);line-height:var(--ar-h3-lh)}
h4{font-size:var(--ar-h4);line-height:var(--ar-h4-lh)}
p{margin:0 0 var(--space-4)}
a{color:inherit}
.eyebrow{font-family:var(--font-ar-display);font-weight:500;font-size:17px;
  color:var(--warif-brass-700);margin-block-end:var(--space-2)}
.lede{font-size:var(--ar-body);color:var(--warif-neutral-600);max-inline-size:62ch}
section{padding-block:var(--space-8)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(242,239,230,.92);
  backdrop-filter:blur(8px);border-block-end:1px solid var(--warif-neutral-200)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand svg{color:var(--warif-green-800)}
.brand span{font-family:var(--font-ar-display);font-weight:500;font-size:24px;color:var(--warif-green-800)}
nav{display:flex;gap:22px;font-size:16px}
nav a{text-decoration:none;color:var(--warif-neutral-600);padding-block:4px;
  border-block-end:1.5px solid transparent;transition:color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease)}
nav a:hover{color:var(--warif-green-800);border-block-end-color:var(--warif-brass-600)}
.hactions{display:flex;align-items:center;gap:14px;flex:none}
.lang{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--warif-neutral-600);text-decoration:none;border:1px solid var(--warif-neutral-200);
  border-radius:var(--radius-sm);padding:5px 9px}
.lang:hover{border-color:var(--warif-green-500);color:var(--warif-green-800)}
.btn{display:inline-block;background:var(--warif-green-800);color:var(--warif-paper);
  text-decoration:none;font-family:var(--font-ar-display);font-weight:500;font-size:16px;
  padding:12px 22px;border-radius:var(--radius-md);border:0;cursor:pointer;
  transition:background var(--duration-fast) var(--ease)}
.btn:hover{background:var(--warif-green-700)}
.btn-ghost{background:transparent;color:var(--warif-green-800);
  box-shadow:inset 0 0 0 1.5px var(--warif-green-800)}
.btn-ghost:hover{background:var(--warif-green-200)}

/* ---------- hero ---------- */
.hero{padding-block:var(--space-7) var(--space-6)}
.hero h1{max-inline-size:none;text-wrap:balance;margin-block-end:var(--space-4)}
.h1sub{display:block;font-size:.48em;font-weight:400;color:var(--warif-brass-700);
  letter-spacing:.02em;margin-block-start:10px}
.h1sub::before{content:"";display:inline-block;inline-size:26px;block-size:1.5px;
  background:var(--warif-brass-400);vertical-align:middle;margin-inline-end:10px}
.hero .lede{margin-block-end:var(--space-5)}

/* ---------- document viewer ---------- */
.viewer{border:1px solid var(--warif-neutral-200);border-radius:var(--radius-lg);
  background:var(--warif-white);overflow:hidden}
.vbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;border-block-end:1px solid var(--warif-neutral-200);
  background:var(--warif-neutral-100);flex-wrap:wrap}
.vmeta{font-family:var(--font-mono);font-size:12px;color:var(--warif-neutral-600)}
.vsearch{display:flex;align-items:center;gap:8px}
.vsearch input{font-family:var(--font-ar-body);font-size:14px;padding:7px 12px;
  border:1px solid var(--warif-neutral-200);border-radius:var(--radius-sm);
  background:var(--warif-white);color:var(--warif-ink);inline-size:190px}
.vsearch input:focus{outline:2px solid var(--color-focus);outline-offset:1px}
.vcount{font-family:var(--font-mono);font-size:12px;color:var(--warif-neutral-400);min-inline-size:74px}
.vpanes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;position:relative}
.vimgwrap{position:relative;inline-size:100%;max-inline-size:520px;line-height:0}
.veil{position:absolute;inset-inline:0;bottom:0;block-size:0;background:rgba(14,61,51,.16);
  pointer-events:none;transition:block-size .26s linear}
.scanline{position:absolute;inset-inline:0;top:0;block-size:2px;background:var(--warif-brass-500);
  box-shadow:0 0 14px 4px rgba(199,154,78,.55);opacity:0;pointer-events:none;
  transition:top .26s linear,opacity .25s var(--ease)}
.scanline.on{opacity:1}
.vlabel{font-family:var(--font-mono);font-size:12px;color:var(--warif-neutral-400);
  margin-block-end:var(--space-3);line-height:1.6}
#pane-text .tline{transition:opacity .4s var(--ease),transform .4s var(--ease)}
#pane-text.armed .tline{opacity:0;transform:translateY(5px)}
#pane-text.armed .tline.on{opacity:1;transform:none}
.vai{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  inline-size:104px;background:var(--warif-green-800);border-radius:var(--radius-lg);
  padding:12px 14px 14px;box-shadow:0 8px 26px rgba(20,32,28,.22);text-align:center}
.vai-label{font-family:var(--font-en-display,sans-serif);font-weight:600;font-size:13px;
  letter-spacing:.22em;color:var(--warif-brass-500);display:block;margin-block-end:10px;
  direction:ltr}
.vai-flow{display:grid;gap:6px}
.vai-flow i{display:block;block-size:3px;border-radius:2px;
  background:repeating-linear-gradient(to left,var(--warif-brass-500) 0 9px,rgba(242,239,230,.14) 9px 20px);
  background-size:20px 100%;animation:flow 1.05s linear infinite}
.vai-flow i:nth-child(2){animation-duration:1.5s;animation-delay:-.35s;opacity:.85}
.vai-flow i:nth-child(3){animation-duration:.85s;animation-delay:-.6s;opacity:.7}
.vai-flow i:nth-child(4){animation-duration:1.3s;animation-delay:-.15s;opacity:.9}
@keyframes flow{to{background-position:-20px 0}}
@media (prefers-reduced-motion: reduce){.vai-flow i{animation:none}}
.vimg{padding:20px;border-inline-start:1px solid var(--warif-neutral-200);
  background:var(--warif-neutral-100);display:flex;align-items:center;justify-content:center}
.vimg img{inline-size:100%;max-inline-size:520px;block-size:auto;display:block;
  border:1px solid var(--warif-neutral-200);border-radius:var(--radius-sm)}
.vtext{padding:20px 22px}
.tfolio{font-family:var(--font-mono);font-size:12px;color:var(--warif-neutral-400);
  margin-block-end:var(--space-3)}
.tline{font-family:'Amiri',serif;font-size:14px;line-height:1.62;margin:0 0 5px;
  color:var(--warif-neutral-800)}
mark{background:var(--warif-brass-200);color:var(--warif-ink);border-radius:2px;padding:0 2px}
.vnote{font-size:14px;color:var(--warif-neutral-600);margin-block-start:var(--space-4);
  max-inline-size:70ch}
.vtabs{display:none;gap:8px;padding:10px 16px;border-block-end:1px solid var(--warif-neutral-200)}
.vtabs button{font-family:var(--font-ar-display);font-size:14px;padding:7px 14px;
  border-radius:var(--radius-sm);border:1px solid var(--warif-neutral-200);
  background:var(--warif-white);color:var(--warif-neutral-600);cursor:pointer}
.vtabs button[aria-selected="true"]{background:var(--warif-green-800);color:var(--warif-paper);
  border-color:var(--warif-green-800)}

/* ---------- dark band ---------- */
.dark{background:var(--warif-green-800);color:var(--warif-paper)}
.dark h2{color:var(--warif-paper)}
.dark .lede{color:var(--warif-green-300)}
.dark .eyebrow{color:var(--warif-brass-500)}

/* ---------- lifecycle ---------- */
.stages{display:flex;flex-wrap:wrap;gap:8px;margin-block:var(--space-5) var(--space-4)}
.stage{font-family:var(--font-ar-display);font-size:15px;padding:9px 16px;cursor:pointer;
  border-radius:999px;border:1px solid var(--warif-neutral-200);background:var(--warif-white);
  color:var(--warif-neutral-600);transition:all var(--duration-fast) var(--ease)}
.stage:hover{border-color:var(--warif-green-500)}
.stage[aria-selected="true"]{background:var(--warif-green-800);color:var(--warif-paper);
  border-color:var(--warif-green-800)}
.stagepanel{border:1px solid var(--warif-neutral-200);border-radius:var(--radius-lg);
  background:var(--warif-white);padding:24px;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.slot h4{margin-block-end:6px}
.slot .k{font-family:var(--font-ar-display);font-weight:500;font-size:14px;
  color:var(--warif-brass-700);margin-block-end:6px}
.slot p{font-size:16px;line-height:1.85;color:var(--warif-neutral-600);margin:0}

/* ---------- applications ---------- */
.apps{border-block-start:1px solid var(--warif-neutral-200);margin-block-start:var(--space-6)}
.app{border-block-end:1px solid var(--warif-neutral-200);padding-block:22px;
  display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.app .n{font-family:var(--font-mono);font-size:13px;color:var(--warif-brass-700);padding-block-start:6px}
.app h3{margin-block-end:10px}
.app .flow{font-family:var(--font-ar-body);font-size:15.5px;line-height:2.05;
  color:var(--warif-neutral-600);direction:rtl}
.app .real{font-size:15px;color:var(--warif-neutral-800);margin-block-start:12px}
.caselink{font-family:var(--font-ar-display);font-weight:500;font-size:15.5px;
  color:var(--warif-brass-700);text-decoration:none;
  border-block-end:2px solid var(--warif-brass-400);padding-block-end:2px}
.caselink:hover{color:var(--warif-green-800);border-color:var(--warif-green-500)}
.casesoon{font-family:var(--font-ar-display);font-size:14.5px;color:var(--warif-neutral-400)}
.app .real b{font-weight:500;font-family:var(--font-ar-display)}
.app p{font-size:16px;line-height:1.85;color:var(--warif-neutral-600);margin:0 0 8px}

/* ---------- accumulate ---------- */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;
  margin-block-start:var(--space-5)}
.panel{border:1px solid var(--warif-neutral-200);border-radius:var(--radius-lg);padding:26px;
  background:var(--warif-white)}
.panel.accent{border-color:var(--warif-brass-400);background:var(--warif-brass-100)}
.panel h4{margin-block-end:10px}
.panel p{font-size:16px;line-height:1.85;color:var(--warif-neutral-600);margin:0}

/* ---------- governance / why ---------- */
.rows{margin-block-start:var(--space-5)}
.row{padding-block:15px;border-block-start:1px solid rgba(242,239,230,.18);
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:24px}
.row:last-child{border-block-end:1px solid rgba(242,239,230,.18)}
.row h4{color:var(--warif-brass-500)}
.row p{margin:0;color:var(--warif-green-200);font-size:16px;line-height:1.85}
.light .row{border-color:var(--warif-neutral-200)}
.light .row h4{color:var(--warif-green-800)}
.light .row p{color:var(--warif-neutral-600)}

/* ---------- contact ---------- */
form{display:grid;gap:14px;max-inline-size:560px;margin-block-start:var(--space-6)}
label{font-family:var(--font-ar-display);font-size:14px;color:var(--warif-neutral-600)}
input[type=text],input[type=email],textarea,select{font-family:var(--font-ar-body);
  font-size:16px;padding:11px 14px;border:1px solid var(--warif-neutral-200);
  border-radius:var(--radius-sm);background:var(--warif-white);color:var(--warif-ink);inline-size:100%}
textarea{min-block-size:110px;resize:vertical}
.field{display:grid;gap:6px}

/* ---------- footer ---------- */
footer{background:var(--warif-green-950);color:var(--warif-green-300);
  padding-block:var(--space-6) var(--space-4);font-size:15px}
footer .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
footer a{color:var(--warif-green-200);text-decoration:none}
footer a:hover{color:var(--warif-paper)}
footer .tag{font-family:var(--font-ar-display);color:var(--warif-paper);font-size:18px;margin:0 0 6px}
footer .en{font-family:var(--font-en-body,sans-serif);direction:ltr;text-align:right;
  font-size:13.5px;color:var(--warif-green-400);letter-spacing:.01em}
.botbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-block-start:var(--space-5);padding-block-start:var(--space-4);
  border-block-start:1px solid rgba(242,239,230,.15)}
.botbar p{margin:0;font-size:13px;color:var(--warif-green-400)}
.botlinks{display:flex;gap:24px}
.botlinks a{font-family:var(--font-en-display,sans-serif);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--warif-green-300);text-decoration:none}
.botlinks a:hover{color:var(--warif-paper)}

@media (max-width:900px){
  nav{display:none}
  .vpanes{grid-template-columns:1fr}
  .vtabs{display:flex}
  .vimg{border-inline-start:0;border-block-end:1px solid var(--warif-neutral-200)}
  .vai{display:none}
  .app{grid-template-columns:1fr;gap:12px}
  .row{grid-template-columns:1fr;gap:8px}
  h1{font-size:30px}
  h2{font-size:25px}
}

header{position:sticky;top:0;z-index:60;background:rgba(242,239,230,.94);
  backdrop-filter:saturate(140%) blur(10px);border-block-end:1px solid transparent;
  transition:box-shadow .28s var(--ease),border-color .28s var(--ease)}
header.scrolled{border-block-end-color:var(--warif-neutral-200);
  box-shadow:0 8px 26px rgba(20,32,28,.055)}
header .bar{display:flex;align-items:center;gap:28px;padding-block:17px;
  flex-wrap:nowrap;transition:padding-block .28s var(--ease)}
header.scrolled .bar{padding-block:11px}
.brand{flex:none;gap:11px}
.brand svg{transition:transform .35s var(--ease)}
.brand:hover svg{transform:rotate(-4deg)}
.mainnav{display:flex;gap:26px;margin-inline:auto;flex:0 1 auto;min-inline-size:0}
.mainnav a{position:relative;white-space:nowrap;font-family:var(--font-ar-display);
  font-weight:400;font-size:15.5px;color:var(--warif-neutral-600);text-decoration:none;
  padding-block:7px;border:0;transition:color .2s var(--ease)}
.mainnav a::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:50%;
  inset-inline-end:50%;block-size:1.5px;background:var(--warif-brass-600);
  transition:inset-inline .28s var(--ease)}
.mainnav a:hover{color:var(--warif-green-800)}
.mainnav a:hover::after{inset-inline-start:0;inset-inline-end:0}
.mainnav a[aria-current="page"]{color:var(--warif-green-800)}
.mainnav a[aria-current="page"]::after{inset-inline-start:0;inset-inline-end:0;
  background:var(--warif-green-800)}
.hactions{flex:none;gap:12px}
.lang{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;padding:6px 10px}
.btn-sm{font-size:14.5px;padding:10px 17px}
.menu-toggle{display:none;inline-size:40px;block-size:40px;border:1px solid var(--warif-neutral-200);
  border-radius:var(--radius-sm);background:var(--warif-white);cursor:pointer;
  padding:0;place-items:center;gap:5px}
.menu-toggle i{display:block;inline-size:17px;block-size:1.5px;background:var(--warif-green-800);
  transition:transform .25s var(--ease),opacity .2s var(--ease)}
.menu-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobilenav{display:none;border-block-start:1px solid var(--warif-neutral-200);
  background:var(--warif-paper);padding:8px 0 18px}
.mobilenav.open{display:block}
.mobilenav a{display:block;font-family:var(--font-ar-display);font-size:17px;
  color:var(--warif-green-800);text-decoration:none;padding:13px 0;
  border-block-end:1px solid var(--warif-neutral-200)}
.mobilenav .btn{display:inline-block;margin-block-start:16px}
@media (max-width:1040px){.mainnav{gap:18px}.mainnav a{font-size:15px}.btn-sm{padding:10px 14px}}
@media (max-width:900px){
  .mainnav{display:none}
  .hactions .btn{display:none}
  .menu-toggle{display:grid}
}

.footbar{border-block-start:1px solid rgba(242,239,230,.15);margin-block-start:var(--space-6);
  padding-block-start:var(--space-4);display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--warif-green-400)}
.footbar nav{display:flex;gap:20px;flex-wrap:wrap}
.footbar a{color:var(--warif-green-300);text-decoration:none}
.footbar a:hover{color:var(--warif-paper)}
.footbar .made{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.footbar .made b{font-weight:400;color:var(--warif-brass-500)}
@media (max-width:640px){.footbar{flex-direction:column;align-items:flex-start;gap:12px}}