:root{
  --ink:#0B0F1C;
  --slab:#141B31;
  --slab-2:#1B2440;
  --silver:#C9D0DE;
  --silver-dim:#8C97AE;
  --royal:#3D4FC4;
  --royal-soft:#5A6BE0;
  --gold:#D9A441;
  --danger:#E2685F;
  --ok:#4CB782;
  --line:rgba(201,208,222,.12);
  --line-strong:rgba(201,208,222,.22);
  --display:"Noto Kufi Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --r:16px;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{min-height:100%}

body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--silver);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:linear-gradient(rgba(201,208,222,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(201,208,222,.028) 1px,transparent 1px);
  background-size:64px 64px;
  pointer-events:none;
  z-index:0;
}

.aurora{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
}
.orb-a{width:46vmax;height:46vmax;top:-16vmax;inset-inline-start:-12vmax;background:radial-gradient(circle,#2A3AA8,transparent 68%);animation:drift-a 26s ease-in-out infinite}
.orb-b{width:38vmax;height:38vmax;bottom:-14vmax;inset-inline-end:-10vmax;background:radial-gradient(circle,#7A5A1E,transparent 68%);opacity:.34;animation:drift-b 32s ease-in-out infinite}
.orb-c{width:30vmax;height:30vmax;top:36%;inset-inline-end:24%;background:radial-gradient(circle,#1E3A6B,transparent 70%);opacity:.4;animation:drift-c 38s ease-in-out infinite}

@keyframes drift-a{50%{transform:translate3d(6vmax,5vmax,0) scale(1.12)}}
@keyframes drift-b{50%{transform:translate3d(-7vmax,-4vmax,0) scale(1.08)}}
@keyframes drift-c{50%{transform:translate3d(4vmax,-6vmax,0) scale(.92)}}

.stage{
  position:relative;
  z-index:1;
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  max-width:1240px;
  margin-inline:auto;
  padding:48px 32px;
}

.brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:22px;
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both;
}

.seal{position:relative;width:132px;height:132px;display:grid;place-items:center}

.seal-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,var(--gold) 60deg,transparent 130deg,transparent 200deg,var(--royal-soft) 260deg,transparent 330deg);
  -webkit-mask:radial-gradient(circle,transparent 61px,#000 62px);
  mask:radial-gradient(circle,transparent 61px,#000 62px);
  animation:spin 14s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.seal-mark{
  width:108px;
  height:108px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 1px var(--line-strong),0 18px 44px rgba(0,0,0,.55);
}

.brand-name{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(34px,4.4vw,54px);
  line-height:1.1;
  letter-spacing:-.5px;
  color:#EEF2F8;
}
.brand-name em{
  display:block;
  font-style:normal;
  font-weight:500;
  font-size:.52em;
  letter-spacing:5px;
  color:var(--gold);
  margin-top:8px;
}

.brand-line{
  font-size:17px;
  font-weight:300;
  line-height:1.75;
  color:var(--silver-dim);
  max-width:34ch;
}

.brand-points{list-style:none;display:flex;flex-direction:column;gap:13px}
.brand-points li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--silver)}

.glyph{
  flex:none;
  width:9px;
  height:9px;
  background:var(--gold);
  transform:rotate(45deg);
  box-shadow:0 0 14px rgba(217,164,65,.6);
}

.panel{display:flex;justify-content:center}

.card{
  width:100%;
  max-width:452px;
  background:linear-gradient(160deg,rgba(27,36,64,.92),rgba(15,21,40,.94));
  border:1px solid var(--line);
  border-radius:26px;
  padding:30px 28px 22px;
  backdrop-filter:blur(22px);
  box-shadow:0 32px 80px rgba(0,0,0,.55);
  animation:rise .7s .1s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes rise{from{opacity:0;transform:translateY(22px)}}

.switcher{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:rgba(11,15,28,.7);
  border:1px solid var(--line);
  border-radius:13px;
  padding:5px;
  margin-bottom:26px;
}

.switcher-glide{
  position:absolute;
  top:5px;
  bottom:5px;
  inset-inline-start:5px;
  width:calc(50% - 5px);
  background:linear-gradient(135deg,var(--royal),var(--royal-soft));
  border-radius:9px;
  box-shadow:0 6px 20px rgba(61,79,196,.4);
  transition:transform .34s cubic-bezier(.4,1.2,.4,1);
}

.switcher[data-pos="1"] .switcher-glide{transform:translateX(calc(-100% * var(--dir,1)))}

.switcher-btn{
  position:relative;
  z-index:1;
  background:none;
  border:0;
  padding:11px 8px;
  font-family:var(--body);
  font-size:14.5px;
  font-weight:600;
  color:var(--silver-dim);
  cursor:pointer;
  border-radius:9px;
  transition:color .28s;
}
.switcher-btn.is-active{color:#fff}

.views{position:relative}

.view{display:none;flex-direction:column;gap:16px}
.view.is-active{display:flex;animation:fade .38s ease both}

@keyframes fade{from{opacity:0;transform:translateY(9px)}}

.view-title{
  font-family:var(--display);
  font-weight:700;
  font-size:23px;
  color:#EEF2F8;
  line-height:1.35;
}
.view-sub{font-size:13.5px;font-weight:300;color:var(--silver-dim);margin-top:-11px;line-height:1.7}

.field{display:flex;flex-direction:column;gap:7px}

.field-label{font-size:13px;font-weight:500;color:var(--silver)}

.field-wrap{position:relative;display:block}

.field input{
  width:100%;
  background:rgba(11,15,28,.62);
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 15px;
  font-family:var(--body);
  font-size:15px;
  color:#F2F5FA;
  transition:border-color .22s,box-shadow .22s,background .22s;
}
.field input::placeholder{color:#5C667E}
.field input:hover{border-color:var(--line-strong)}
.field input:focus{
  outline:none;
  border-color:var(--royal-soft);
  background:rgba(11,15,28,.85);
  box-shadow:0 0 0 4px rgba(61,79,196,.18);
}
.field.is-bad input{border-color:var(--danger);box-shadow:0 0 0 4px rgba(226,104,95,.14)}

.peek{
  position:absolute;
  inset-block:0;
  inset-inline-end:10px;
  width:34px;
  background:none;
  border:0;
  cursor:pointer;
  display:grid;
  place-items:center;
  opacity:.5;
  transition:opacity .2s;
}
.peek:hover{opacity:1}
.peek::before{
  content:"";
  width:19px;
  height:12px;
  border:1.6px solid var(--silver);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
}
.peek::after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--silver);
}
.peek.is-on::before{border-color:var(--gold)}
.peek.is-on::after{background:var(--gold)}

.field-hint{font-size:11.5px;color:#5C667E}

.field-error{font-size:12px;color:var(--danger);display:none}
.field.is-bad .field-error{display:block}

.meter{display:block;height:3px;border-radius:2px;background:rgba(201,208,222,.1);overflow:hidden}
.meter-fill{display:block;height:100%;width:0;border-radius:2px;background:var(--danger);transition:width .3s,background .3s}

.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--silver-dim);cursor:pointer;line-height:1.6}
.check input{position:absolute;opacity:0;width:0;height:0}
.box{
  flex:none;
  width:18px;
  height:18px;
  border:1.5px solid var(--line-strong);
  border-radius:6px;
  display:grid;
  place-items:center;
  transition:background .2s,border-color .2s;
}
.box::after{
  content:"";
  width:9px;
  height:5px;
  border:2px solid #fff;
  border-top:0;
  border-inline-end:0;
  transform:rotate(-45deg) scale(0);
  transition:transform .22s cubic-bezier(.4,1.4,.5,1);
}
.check input:checked + .box{background:var(--royal);border-color:var(--royal)}
.check input:checked + .box::after{transform:rotate(-45deg) scale(1)}
.check input:focus-visible + .box{box-shadow:0 0 0 4px rgba(61,79,196,.25)}

.check-terms{align-items:flex-start}
.check-terms .box{margin-top:2px}

.link-quiet{font-size:13px;color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.link-quiet:hover{border-color:var(--gold)}

.cf-turnstile{min-height:4px}

.submit{
  position:relative;
  overflow:hidden;
  width:100%;
  border:0;
  border-radius:13px;
  padding:15px;
  font-family:var(--display);
  font-size:15.5px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,var(--royal),var(--royal-soft));
  cursor:pointer;
  box-shadow:0 12px 30px rgba(61,79,196,.34);
  transition:transform .18s,box-shadow .25s,filter .2s;
}
.submit:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(61,79,196,.46)}
.submit:active{transform:translateY(0)}
.submit::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:44%;
  left:-60%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);
}
.submit:hover::after{animation:sheen .85s ease}
@keyframes sheen{to{left:120%}}
.submit.is-busy{filter:saturate(.5);pointer-events:none}

.form-note{font-size:12.5px;text-align:center;min-height:16px;color:var(--silver-dim)}
.form-note.is-bad{color:var(--danger)}
.form-note.is-ok{color:var(--ok)}

.card-foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.foot-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  color:var(--silver-dim);
  text-decoration:none;
  transition:color .2s;
}
.foot-link svg{width:16px;height:16px;fill:currentColor}
.foot-link:hover{color:var(--gold)}

.foot-sep{width:1px;height:14px;background:var(--line-strong)}

.lang-switch{
  position:fixed;
  top:22px;
  inset-inline-end:22px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:0;
  background:rgba(20,27,49,.75);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
  cursor:pointer;
  backdrop-filter:blur(14px);
}

.lang-track{position:absolute;inset:4px;pointer-events:none}
.lang-thumb{
  position:absolute;
  top:0;
  bottom:0;
  inset-inline-start:0;
  width:50%;
  background:linear-gradient(135deg,var(--royal),var(--royal-soft));
  border-radius:999px;
  transition:transform .32s cubic-bezier(.4,1.2,.4,1);
}

.lang-opt{
  position:relative;
  z-index:1;
  min-width:40px;
  padding:6px 4px;
  text-align:center;
  font-family:var(--body);
  font-size:12.5px;
  font-weight:600;
  color:var(--silver-dim);
  transition:color .28s;
}
.lang-opt.is-on{color:#fff}

@media (max-width:940px){
  .stage{
    grid-template-columns:1fr;
    gap:34px;
    padding:84px 20px 40px;
  }
  .brand{align-items:center;text-align:center;gap:16px}
  .brand-line{max-width:40ch}
  .brand-points{display:none}
  .seal{width:104px;height:104px}
  .seal-ring{-webkit-mask:radial-gradient(circle,transparent 47px,#000 48px);mask:radial-gradient(circle,transparent 47px,#000 48px)}
  .seal-mark{width:84px;height:84px}
  .card{padding:26px 20px 18px;border-radius:22px}
}

@media (max-width:420px){
  .stage{padding-inline:14px}
  .brand-name{font-size:30px}
}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
}