:root{
    --navy-900:#0B131F;
    --navy-800:#101B2D;
    --navy-700:#182842;
    --panel:#E7EAF0;
    --panel-line:#C7CEDA;
    --ink:#0F1826;
    --text-light:#EAF0F5;
    --text-muted:#93A6BE;
    --text-muted-dark:#57647A;
    --amber:#E8A33D;
    --amber-dim:#B87F2A;
    --teal:#6FE3D1;
    --line-dark: rgba(234,240,245,0.10);
    --line-dark-strong: rgba(234,240,245,0.22);
    --maxw: 820px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Tajawal', sans-serif;
    background:var(--navy-800);
    color:var(--text-light);
    line-height:1.8;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

  .blueprint-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(var(--line-dark) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events:none;
    -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 20%, #000 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 80% 65% at 50% 20%, #000 40%, transparent 85%);
  }

  header{
    border-bottom:1px solid var(--line-dark);
    background:var(--navy-900);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    min-height:76px; padding:14px 0;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand-text{display:flex; flex-direction:column; align-items:center; gap:3px;}
  .brand-name{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:0.02em; direction:ltr; unicode-bidi:isolate; font-size:1.28rem; color:var(--text-light); line-height:1; text-align:center;}
  .brand-name b{color:var(--teal); font-weight:700;}
  .brand-tagline{font-size:0.68rem; color:var(--text-muted); font-weight:400; line-height:1.4; white-space:nowrap; text-align:center;}
  .brand-tagline b{color:var(--amber); font-weight:700;}
  .home-link{
    font-size:0.92rem; color:var(--text-muted);
    padding:9px 18px; border:1px solid var(--line-dark-strong);
    transition:border-color .2s ease, color .2s ease;
  }
  .home-link:hover{border-color:var(--amber); color:var(--amber);}

  .page-hero{position:relative; padding:90px 0 56px; overflow:hidden;
    background:radial-gradient(ellipse 70% 55% at 78% 10%, rgba(232,163,61,0.12), transparent 60%), var(--navy-800);}
  .page-hero h1{font-size:2.1rem; font-weight:900; color:var(--text-light); max-width:20ch;}
  .page-meta{margin-top:14px; font-size:0.92rem; color:var(--text-muted);}

  main.content{padding:8px 0 100px; background:var(--navy-800);}
  main.content section{margin-top:44px;}
  main.content h2{font-size:1.28rem; font-weight:700; color:var(--text-light); margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line-dark);}
  main.content p{color:var(--text-muted); font-size:1rem; margin-bottom:14px; max-width:70ch;}
  main.content p:last-child{margin-bottom:0;}
  main.content ul, main.content ol{color:var(--text-muted); font-size:1rem; padding-inline-start:22px; margin-bottom:14px;}
  main.content li{margin-bottom:10px; padding-inline-start:6px;}
  main.content li::marker{color:var(--amber); font-weight:700;}
  main.content strong{color:var(--amber); font-weight:700;}
  main.content a{color:var(--teal); border-bottom:1px solid rgba(111,227,209,0.35);}
  main.content a:hover{color:var(--amber); border-color:rgba(232,163,61,0.5);}

  .steps{list-style:none; padding:0; counter-reset:step;}
  .steps li{
    counter-increment:step;
    position:relative;
    padding-inline-start:52px;
    margin-bottom:22px;
    min-height:34px;
  }
  .steps li::before{
    content:counter(step);
    position:absolute; inset-inline-start:0; top:0;
    width:34px; height:34px;
    border:1px solid var(--amber);
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk',sans-serif; color:var(--amber); font-weight:600; font-size:0.95rem;
  }
  .steps li::marker{content:"";}

  .notice{
    position:relative; margin-top:36px;
    border:1px solid var(--line-dark); padding:22px 24px;
  }
  .notice::before, .notice::after{
    content:""; position:absolute; width:14px; height:14px;
    border-color:var(--amber); border-style:solid;
  }
  .notice::before{ top:-1px; right:-1px; border-width:2px 2px 0 0; }
  .notice::after{ bottom:-1px; left:-1px; border-width:0 0 2px 2px; }
  .notice p{margin:0; color:var(--text-muted);}

  footer{background:var(--navy-900); border-top:1px solid var(--line-dark); padding:56px 0 32px;}
  .foot-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; padding-bottom:40px; border-bottom:1px solid var(--line-dark);}
  .foot-desc{color:var(--text-muted); max-width:34ch; font-size:0.92rem; margin-top:14px;}
  .foot-cols{display:flex; gap:64px;}
  .foot-col h5{font-size:0.9rem; color:var(--text-light); margin-bottom:16px; font-weight:700;}
  .foot-col a{display:block; color:var(--text-muted); font-size:0.92rem; margin-bottom:10px;}
  .foot-col a:hover{color:var(--amber);}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:16px;}
  .foot-bottom p{color:var(--text-muted); font-size:0.86rem;}
  .legal-links{display:flex; gap:20px;}
  .legal-links a{color:var(--text-muted); font-size:0.86rem;}
  .legal-links a:hover{color:var(--amber);}

  @media (max-width:600px){
    .wrap{padding:0 20px;}
    .page-hero h1{font-size:1.7rem;}
    header .brand-tagline{display:none;}
    .foot-cols{gap:36px;}
  }