:root{
  --bg:#10133f;
  --card:#ffffff;
  --fg:#10133f;
  --muted: rgba(16,19,63,.72);
  --border: rgba(16,19,63,.10);
  --shadow: 0 10px 34px rgba(0,0,0,.18);
  --radius: 22px;
}

*{box-sizing:border-box;}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans';
  background:var(--bg);
  color:var(--fg);
}

.wrapper{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(28px,6vw,80px) 20px;
}

.card{
  background:var(--card);
  width:min(980px,94vw);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  overflow:hidden;
}

.inner{
  padding:clamp(28px,5vw,64px);
}

h1{
  margin:0;
  font-size:clamp(36px,4.8vw,56px);
  color:#10133f;
  font-weight:700;
}

.role{
  margin-top:10px;
  font-size:clamp(18px,2.2vw,22px);
  color:#5a5d88;
  font-weight:500;
  letter-spacing:.3px;
}

.desc{
  margin-top:clamp(22px,2.6vw,30px);
  font-size:clamp(16px,2vw,19px);
  line-height:1.8;
  color:var(--muted);
  max-width:680px;
  hyphens:none;
}

.triad{
  display:inline;
  white-space:normal;
  word-break:keep-all;
}

.triad span{
  font-weight:600;
  color:#10133f;
}

.triad span:not(:last-child)::after{
  content:" \2022";
  margin:0 .45ch 0 .45ch;
  color:#10133f;
}

.claim{
  margin-top:clamp(16px,2vw,20px);
  font-size:clamp(17px,2.1vw,20px);
  color:#10133f;
  font-weight:600;
}

hr{
  border:none;
  height:1px;
  background:linear-gradient(90deg,rgba(16,19,63,.0),rgba(16,19,63,.18),rgba(16,19,63,.0));
  margin:clamp(24px,3vw,36px) 0;
}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  text-decoration:none;
  color:#10133f;
  background:#fff;
  transition:transform .12s ease,border-color .12s ease;
}

.pill:hover{transform:translateY(-1px);border-color:rgba(16,19,63,.24);}

small.note{
  display:block;
  margin-top:clamp(18px,2.4vw,22px);
  color:var(--muted);
  font-size:13.5px;
  line-height:1.6;
}

small.note.ar{
  display:block;
  margin-top:6px;
  opacity:.95;
  font-size:13px;
  direction:rtl;
  unicode-bidi:plaintext;
}

footer{
  margin-top:clamp(22px,3vw,28px);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:rgba(16,19,63,.6);
  font-size:12.5px;
}

.brand,.role,.desc,.claim,.meta,.note,footer,.pill{text-align:left;}
@media(max-width:680px){.inner{padding:28px;}}