:root {

  --blue: #1765e8;

  --blue-dark: #0d439f;

  --blue-soft: #edf4ff;

  --navy: #101e36;

  --navy-2: #172b4b;

  --ink: #121722;

  --text: #354052;

  --muted: #6e7888;

  --muted-2: #969eab;

  --white: #ffffff;

  --soft: #f6f8fb;

  --line: #e2e7ed;

  --line-dark: #d3dae4;

  --heading:
    "Alexandria",
    sans-serif;

  --body:
    "Noto Sans Arabic",
    sans-serif;

  --max: 1280px;

}


* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


html {

  scroll-behavior: smooth;

}


body {

  background:
    var(--white);

  color:
    var(--ink);

  font-family:
    var(--body);

  overflow-x:
    hidden;

  -webkit-font-smoothing:
    antialiased;

}


a {

  color: inherit;

  text-decoration: none;

}


button,
input,
select {

  font: inherit;

}


button {

  cursor: pointer;

}


/* =========================================================
FLOATING REGISTER
========================================================= */

.floating-register {

  position: fixed;

  right: 24px;

  bottom: 24px;

  z-index: 3000;

  width: 74px;

  height: 74px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background: var(--blue);

  box-shadow:
    0 18px 45px
    rgba(23,101,232,.34);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;

}


.floating-register::before {

  content: "";

  position: absolute;

  inset: 6px;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,.28);

}


.floating-register:hover {

  transform:
    translateY(-4px)
    scale(1.04);

  background:
    var(--blue-dark);

  box-shadow:
    0 24px 55px
    rgba(23,101,232,.4);

}


.floating-register strong {

  position: relative;

  z-index: 2;

  font-size: 15px;

  font-weight: 600;

}

/* =========================================================
HEADER
========================================================= */

.topbar {

  position: fixed;

  top: 0;

  right: 0;

  left: 0;

  z-index: 1000;

  background:
    rgba(255,255,255,.96);

  border-bottom:
    1px solid transparent;

  transition: .25s ease;

}


.topbar.scrolled {

  border-color:
    var(--line);

  box-shadow:
    0 10px 30px
    rgba(31,45,70,.06);

}


.topbar-inner {

  width:
    min(
      calc(100% - 48px),
      var(--max)
    );

  height: 74px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 28px;

}


.company-name {

  font-family:
    var(--heading);

  font-size: 16px;

  font-weight: 600;

  white-space: nowrap;

}


.desktop-nav {

  display: flex;

  align-items: center;

  gap: 31px;

}


.desktop-nav a {

  color: #485365;

  font-size: 14px;

  font-weight: 500;

  transition:
    color .2s ease;

}


.desktop-nav a:hover {

  color:
    var(--blue);

}


.top-register {

  height: 43px;

  padding: 0 20px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: white;

  background:
    var(--blue);

  font-size: 14px;

  font-weight: 600;

  transition:
    .2s ease;

}


.top-register:hover {

  background:
    var(--blue-dark);

  transform:
    translateY(-1px);

}


.menu-toggle {

  display: none;

  width: 44px;

  height: 44px;

  border:
    1px solid var(--line);

  background: white;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 5px;

}


.menu-toggle span {

  width: 19px;

  height: 1px;

  background:
    var(--ink);

}


.mobile-nav {

  display: none;

}



/* =========================================================
HERO
========================================================= */

.hero {

  padding-top:
    74px;

  background:
    linear-gradient(
      180deg,
      #f6f9ff 0%,
      #ffffff 68%
    );

}


.hero-inner {

  width:
    min(
      calc(100% - 48px),
      var(--max)
    );

  min-height:
    calc(100vh - 74px);

  margin: auto;

  padding:
    58px 0 52px;

  display: grid;

  grid-template-columns:
    1.14fr .86fr;

  gap: 64px;

  align-items: center;

}


/* VIDEO */

.video-box {

  background: white;

  border:
    1px solid
    var(--line-dark);

  box-shadow:
    0 35px 85px
    rgba(25,47,87,.12);

}


.video-top {

  height: 48px;

  padding:
    0 17px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  border-bottom:
    1px solid
    var(--line);

}


.video-top span {

  color: #566173;

  font-size: 12px;

  letter-spacing: .5px;

}


.video-top small {

  color:
    var(--muted-2);

  font-size: 10px;

}


.video-placeholder {

  position: relative;

  aspect-ratio:
    16 / 9.8;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #102f5d 0%,
      #1765e8 56%,
      #76a9fa 100%
    );

}


.video-dark-layer {

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(255,255,255,.11),
      transparent 25%
    );

}


.visual-grid {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      rgba(255,255,255,.09)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.09)
      1px,
      transparent 1px
    );

  background-size:
    56px 56px;

  opacity: .3;

}


.abstract-lines {

  position: absolute;

  right: 8%;

  left: 8%;

  bottom: 14%;

  height: 46%;

  display: flex;

  align-items: flex-end;

  gap: 18px;

  opacity: .14;

}


.abstract-lines span {

  flex: 1;

  background: white;

}


.abstract-lines span:nth-child(1) {

  height: 35%;

}


.abstract-lines span:nth-child(2) {

  height: 62%;

}


.abstract-lines span:nth-child(3) {

  height: 48%;

}


.abstract-lines span:nth-child(4) {

  height: 78%;

}


.abstract-lines span:nth-child(5) {

  height: 92%;

}


.video-main-text {

  position: absolute;

  top: 11%;

  right: 7%;

  z-index: 3;

  color: white;

}


.video-main-text small {

  font-size: 11px;

  letter-spacing: 1.5px;

  opacity: .65;

}


.video-main-text strong {

  display: block;

  margin-top: 8px;

  font-family:
    var(--heading);

  font-size:
    clamp(
      26px,
      2.8vw,
      37px
    );

  font-weight: 500;

}


.video-main-text p {

  margin-top: 6px;

  color:
    rgba(255,255,255,.8);

  font-size: 16px;

}


.video-play {

  position: absolute;

  top: 50%;

  left: 50%;

  z-index: 5;

  width: 72px;

  height: 72px;

  transform:
    translate(-50%,-50%);

  border:
    1px solid
    rgba(255,255,255,.8);

  border-radius: 50%;

  background:
    rgba(255,255,255,.13);

  backdrop-filter:
    blur(8px);

  transition:
    .2s ease;

}


.video-play:hover {

  transform:
    translate(-50%,-50%)
    scale(1.06);

}


.video-play span {

  position: absolute;

  top: 50%;

  left: 53%;

  transform:
    translate(-50%,-50%);

  width: 0;

  height: 0;

  border-top:
    8px solid transparent;

  border-bottom:
    8px solid transparent;

  border-left:
    13px solid white;

}


.video-caption {

  position: absolute;

  left: 17px;

  bottom: 14px;

  color:
    rgba(255,255,255,.7);

  font-size: 11px;

}


.real-video {

  width: 100%;

  display: block;

  aspect-ratio:
    16/9.8;

  object-fit: cover;

}


/* HERO COPY */

.hero-copy {

  max-width: 565px;

}


.hero-eyebrow {

  color:
    var(--blue);

  font-size: 14px;

  font-weight: 600;

}


.hero-copy h1 {

  margin-top: 18px;

  font-family:
    var(--heading);

  font-size:
    clamp(
      41px,
      4.4vw,
      58px
    );

  line-height: 1.35;

  letter-spacing: -1px;

  font-weight: 500;

}


.hero-copy h1 span {

  display: block;

  color:
    var(--blue);

  font-weight: 600;

}


.hero-copy > p {

  max-width: 525px;

  margin-top: 20px;

  color:
    var(--muted);

  font-size: 17px;

  line-height: 1.95;

}


.hero-actions {

  margin-top: 28px;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}


.main-action,
.ghost-action {

  min-height: 50px;

  padding:
    0 22px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 26px;

  font-size: 15px;

  font-weight: 600;

  transition:
    .2s ease;

}


.main-action {

  color: white;

  background:
    var(--blue);

}


.main-action:hover {

  background:
    var(--blue-dark);

  transform:
    translateY(-2px);

}


.ghost-action {

  background: white;

  border:
    1px solid
    var(--line-dark);

}


.hero-points {

  margin-top: 33px;

  padding-top: 21px;

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid
    var(--line);

}


.hero-points > div {

  padding-left: 15px;

  border-left:
    1px solid
    var(--line);

}


.hero-points > div:last-child {

  border-left: 0;

}


.hero-points small {

  display: block;

  color:
    var(--blue);

  font-size: 11px;

}


.hero-points strong {

  display: block;

  margin-top: 5px;

  font-size: 14px;

  font-weight: 500;

}


.hero-risk {

  margin-top: 23px;

  color:
    var(--muted-2);

  font-size: 12px;

  line-height: 1.7;

}



/* =========================================================
VALUE STRIP
========================================================= */

.value-strip {

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

}


.value-strip-inner {

  width:
    min(
      calc(100% - 48px),
      var(--max)
    );

  margin: auto;

  display: grid;

  grid-template-columns:
    130px repeat(5,1fr);

}


.value-main,
.value-cell {

  min-height: 72px;

  padding:
    15px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  border-left:
    1px solid
    var(--line);

}


.value-main {

  color:
    var(--blue);

  font-size: 14px;

  font-weight: 600;

}


.value-cell strong {

  font-size: 14px;

  font-weight: 600;

}


.value-cell small {

  margin-top: 3px;

  color:
    var(--muted-2);

  font-size: 11px;

}



/* =========================================================
GLOBAL
========================================================= */

.section-container {

  width:
    min(
      calc(100% - 48px),
      var(--max)
    );

  margin: auto;

}


.section-kicker {

  color:
    var(--blue);

  font-size: 13px;

  font-weight: 600;

}


.reveal {

  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity .7s ease,
    transform .7s ease;

}


.reveal.show {

  opacity: 1;

  transform: none;

}



/* =========================================================
ABOUT
========================================================= */

.about-section {

  padding:
    95px 0;

}


.about-layout {

  display: grid;

  grid-template-columns:
    1fr 440px;

  gap: 100px;

  align-items: start;

}


.about-title h2 {

  margin-top: 15px;

  font-family:
    var(--heading);

  font-size:
    clamp(
      34px,
      3.8vw,
      49px
    );

  line-height: 1.4;

  font-weight: 500;

}


.about-title h2 span {

  color:
    var(--blue);

}


.about-copy {

  padding-top: 32px;

}


.about-copy h3 {

  font-family:
    var(--heading);

  font-size: 20px;

  font-weight: 500;

}


.about-copy p {

  margin-top: 14px;

  color:
    var(--muted);

  font-size: 16px;

  line-height: 1.9;

}


.text-register {

  margin-top: 22px;

  display: inline-flex;

  align-items: center;

  gap: 18px;

  color:
    var(--blue);

  font-size: 15px;

  font-weight: 600;

}


.principles-grid {

  margin-top: 65px;

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

}


.principle {

  min-height: 210px;

  padding:
    27px 25px;

  border-left:
    1px solid
    var(--line);

}


.principle:last-child {

  border-left: 0;

}


.principle > span {

  color:
    var(--blue);

  font-size: 12px;

}


.principle h3 {

  margin-top: 38px;

  font-family:
    var(--heading);

  font-size: 17px;

  font-weight: 500;

}


.principle p {

  margin-top: 10px;

  color:
    var(--muted);

  font-size: 14px;

  line-height: 1.8;

}



/* =========================================================
VISION
========================================================= */

.vision-section {

  padding:
    95px 0;

  background:
    var(--soft);

}


.section-heading {

  display: grid;

  grid-template-columns:
    1fr 390px;

  gap: 70px;

  align-items: end;

}


.section-heading h2,
.services-intro h2 {

  margin-top: 12px;

  font-family:
    var(--heading);

  font-size:
    clamp(
      33px,
      3.4vw,
      45px
    );

  line-height: 1.4;

  font-weight: 500;

}


.section-heading h2 span,
.services-intro h2 span {

  display: block;

  color:
    var(--blue);

}


.section-heading > p {

  color:
    var(--muted);

  font-size: 15px;

  line-height: 1.85;

}


.vision-layout {

  margin-top: 48px;

  display: grid;

  grid-template-columns:
    1.3fr .7fr;

  gap: 17px;

}


.vision-main {

  display: grid;

  grid-template-columns:
    1.3fr .7fr;

  min-height: 430px;

  background: white;

  border:
    1px solid
    var(--line);

}


.vision-art {

  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #11366d,
      #1765e8
    );

}


.vision-grid {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      rgba(255,255,255,.08)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.08)
      1px,
      transparent 1px
    );

  background-size:
    48px 48px;

}


.vision-shape {

  position: absolute;

  border:
    1px solid
    rgba(255,255,255,.4);

}


.shape-a {

  width: 210px;

  height: 210px;

  left: 10%;

  bottom: 15%;

}


.shape-b {

  width: 130px;

  height: 130px;

  left: 30%;

  bottom: 30%;

  transform:
    rotate(20deg);

}


.shape-c {

  width: 70px;

  height: 70px;

  left: 49%;

  bottom: 43%;

  background:
    rgba(255,255,255,.12);

}


.vision-message {

  position: absolute;

  right: 24px;

  bottom: 23px;

  z-index: 3;

  color: white;

}


.vision-message small {

  display: block;

  font-size: 10px;

  opacity: .65;

}


.vision-message strong {

  display: block;

  margin-top: 6px;

  font-family:
    var(--heading);

  font-size: 24px;

  font-weight: 500;

}


.vision-description {

  padding:
    32px 26px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

}


.vision-description small {

  color:
    var(--blue);

  font-size: 10px;

}


.vision-description h3 {

  margin-top: 7px;

  font-family:
    var(--heading);

  font-size: 23px;

  font-weight: 500;

}


.vision-description p {

  margin-top: 12px;

  color:
    var(--muted);

  font-size: 14px;

  line-height: 1.9;

}


.vision-side {

  display: grid;

  grid-template-rows:
    repeat(3,1fr);

  gap: 10px;

}


.vision-item {

  min-height: 135px;

  padding: 22px;

  display: grid;

  grid-template-columns:
    45px 1fr;

  gap: 16px;

  align-items: center;

  background: white;

  border:
    1px solid
    var(--line);

  transition:
    .2s ease;

}


.vision-item:hover {

  transform:
    translateX(-4px);

  box-shadow:
    0 15px 35px
    rgba(27,48,82,.06);

}


.vision-item > span {

  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  background:
    var(--blue-soft);

  color:
    var(--blue);

  font-size: 12px;

  font-weight: 600;

}


.vision-item h3 {

  font-family:
    var(--heading);

  font-size: 17px;

  font-weight: 500;

}


.vision-item p {

  margin-top: 5px;

  color:
    var(--muted);

  font-size: 13px;

  line-height: 1.7;

}



/* =========================================================
MID CTA
========================================================= */

.mid-cta {

  padding:
    0 0 95px;

  background:
    var(--soft);

}


.mid-cta-inner {

  width:
    min(
      calc(100% - 48px),
      var(--max)
    );

  margin: auto;

  padding:
    38px 42px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 35px;

  color: white;

  background:
    linear-gradient(
      120deg,
      #103e8e,
      #1765e8
    );

}


.mid-cta small {

  font-size: 11px;

  letter-spacing: 1px;

  opacity: .7;

}


.mid-cta h2 {

  margin-top: 5px;

  font-family:
    var(--heading);

  font-size: 26px;

  font-weight: 500;

}


.mid-cta p {

  margin-top: 7px;

  color:
    rgba(255,255,255,.72);

  font-size: 14px;

}


.mid-cta a {

  min-width: 170px;

  height: 50px;

  padding:
    0 19px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  background: white;

  color:
    var(--blue);

  font-size: 14px;

  font-weight: 600;

}



/* =========================================================
SERVICES
========================================================= */

.services-section {

  padding:
    95px 0;

}


.services-list {

  margin-top: 47px;

  border-top:
    1px solid
    var(--line-dark);

}


.service-row {

  min-height: 125px;

  display: grid;

  grid-template-columns:
    60px 1fr 1fr 35px;

  gap: 22px;

  align-items: center;

  border-bottom:
    1px solid
    var(--line-dark);

  transition:
    .22s ease;

}


.service-row:hover {

  padding-inline:
    15px;

  background:
    var(--soft);

}


.service-number {

  color:
    var(--blue);

  font-size: 12px;

}


.service-main small {

  color:
    var(--muted-2);

  font-size: 10px;

}


.service-main h3 {

  margin-top: 5px;

  font-family:
    var(--heading);

  font-size: 18px;

  font-weight: 500;

}


.service-row > p {

  color:
    var(--muted);

  font-size: 14px;

  line-height: 1.75;

}


.service-arrow {

  color:
    var(--blue);

  font-size: 20px;

}



/* =========================================================
HOW
========================================================= */

.how-section {

  background:
    var(--navy);

  color: white;

}


.how-inner {

  width:
    min(
      calc(100% - 48px),
      var(--max)
    );

  margin: auto;

  padding:
    90px 0;

  display: grid;

  grid-template-columns:
    330px 1fr;

  gap: 80px;

}


.how-copy > span {

  color:
    #9fc3ff;

  font-size: 13px;

}


.how-copy h2 {

  margin-top: 12px;

  font-family:
    var(--heading);

  font-size:
    clamp(
      32px,
      3.5vw,
      44px
    );

  line-height: 1.4;

  font-weight: 500;

}


.how-copy h2 strong {

  display: block;

  color:
    #aecdff;

  font-weight: 500;

}


.how-copy p {

  margin-top: 14px;

  color:
    rgba(255,255,255,.65);

  font-size: 15px;

}


.how-register {

  margin-top: 26px;

  width: 155px;

  height: 46px;

  padding:
    0 15px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  border:
    1px solid
    rgba(255,255,255,.25);

  font-size: 14px;

}


.steps-grid {

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  border-top:
    1px solid
    rgba(255,255,255,.14);

}


.step-card {

  min-height: 190px;

  padding:
    28px 25px;

  border-left:
    1px solid
    rgba(255,255,255,.14);

  border-bottom:
    1px solid
    rgba(255,255,255,.14);

}


.step-card:nth-child(even) {

  border-left: 0;

}


.step-card > span {

  color:
    #8fb8ff;

  font-size: 12px;

}


.step-card h3 {

  margin-top: 31px;

  font-family:
    var(--heading);

  font-size: 18px;

  font-weight: 500;

}


.step-card p {

  margin-top: 8px;

  color:
    rgba(255,255,255,.58);

  font-size: 14px;

  line-height: 1.75;

}



/* =========================================================
REGISTER
========================================================= */

.register-section {

  padding:
    90px 0;

  background:
    linear-gradient(
      135deg,
      #1765e8,
      #0c419b
    );

}


.register-inner {

  width:
    min(
      calc(100% - 48px),
      var(--max)
    );

  margin: auto;

  display: grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap: 65px;

  align-items: center;

}


.register-info {

  color: white;

}


.register-kicker {

  color:
    #c3d8ff;

  font-size: 12px;

}


.register-info h2 {

  margin-top: 10px;

  font-family:
    var(--heading);

  font-size:
    clamp(
      34px,
      3.7vw,
      48px
    );

  line-height: 1.42;

  font-weight: 500;

}


.register-info h2 strong {

  display: block;

  color:
    #bdd5ff;

  font-weight: 500;

}


.register-info > p {

  max-width: 450px;

  margin-top: 16px;

  color:
    rgba(255,255,255,.73);

  font-size: 16px;

  line-height: 1.9;

}


.register-highlights {

  margin-top: 30px;

  border-top:
    1px solid
    rgba(255,255,255,.18);

}


.register-highlights div {

  min-height: 58px;

  display: grid;

  grid-template-columns:
    35px 1fr;

  align-items: center;

  border-bottom:
    1px solid
    rgba(255,255,255,.18);

}


.register-highlights span {

  color:
    #a7c8ff;

  font-size: 11px;

}


.register-highlights p {

  font-size: 14px;

}


.risk-box {

  margin-top: 25px;

  color:
    rgba(255,255,255,.52);

  font-size: 12px;

  line-height: 1.7;

}


/* FORM */

.form-panel {

  padding: 31px;

  background: white;

  box-shadow:
    0 32px 85px
    rgba(6,29,73,.24);

}


.form-panel-head {

  margin-bottom: 25px;

  padding-bottom: 20px;

  display: flex;

  align-items: flex-end;

  justify-content:
    space-between;

  border-bottom:
    1px solid
    var(--line);

}


.form-panel-head small {

  color:
    var(--blue);

  font-size: 11px;

}


.form-panel-head h3 {

  margin-top: 5px;

  font-family:
    var(--heading);

  font-size: 20px;

  font-weight: 500;

}


.form-panel-head > span {

  color:
    #a1a8b3;

  font-size: 12px;

}


.form-grid {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 13px;

}


.field {

  margin-bottom: 14px;

}


.field label {

  display: block;

  margin-bottom: 7px;

  color:
    #515d6e;

  font-size: 13px;

}


.field input,
.field select {

  width: 100%;

  height: 49px;

  padding:
    0 13px;

  border:
    1px solid
    var(--line-dark);

  outline: 0;

  background:
    #fbfcfe;

  color:
    var(--ink);

  font-size: 14px;

  transition:
    .2s ease;

}


.field input:focus,
.field select:focus {

  border-color:
    var(--blue);

  background: white;

  box-shadow:
    0 0 0 3px
    rgba(23,101,232,.07);

}


.form-subtitle {

  margin:
    4px 0 11px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

}


.form-subtitle span {

  font-size: 13px;

  font-weight: 600;

}


.form-subtitle small {

  color:
    var(--muted-2);

  font-size: 11px;

}


.experience {

  margin-bottom: 16px;

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 8px;

}


.experience label {

  position: relative;

}


.experience input {

  position: absolute;

  opacity: 0;

}


.experience label > span {

  min-height: 76px;

  padding: 13px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  border:
    1px solid
    var(--line-dark);

  background:
    #fbfcfe;

  cursor: pointer;

  transition:
    .2s ease;

}


.experience strong {

  font-size: 13px;

  font-weight: 600;

}


.experience small {

  margin-top: 5px;

  color:
    var(--muted-2);

  font-size: 11px;

}


.experience
input:checked + span {

  border-color:
    var(--blue);

  background:
    var(--blue-soft);

  box-shadow:
    inset 0 0 0 1px
    var(--blue);

}


.agreement {

  margin:
    4px 0 15px;

  display: flex;

  align-items: flex-start;

  gap: 9px;

  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.7;

}


.agreement input {

  margin-top: 4px;

  accent-color:
    var(--blue);

}


.submit-register {

  width: 100%;

  height: 51px;

  padding:
    0 16px;

  border: 0;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  background:
    var(--ink);

  color: white;

  font-size: 14px;

  font-weight: 600;

  transition:
    .2s ease;

}


.submit-register:hover {

  background:
    var(--blue-dark);

}


.privacy-note {

  margin-top: 10px;

  color:
    var(--muted-2);

  font-size: 11px;

}


.success-message {

  display: none;

  min-height: 490px;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

}


.success-message.show {

  display: flex;

}


.success-circle {

  width: 62px;

  height: 62px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    #eaf8f0;

  color:
    #178e57;

  font-size: 26px;

}


.success-message h3 {

  margin-top: 18px;

  font-family:
    var(--heading);

  font-size: 22px;

  font-weight: 500;

}


.success-message p {

  max-width: 390px;

  margin-top: 10px;

  color:
    var(--muted);

  font-size: 14px;

  line-height: 1.8;

}


.success-message button {

  margin-top: 20px;

  height: 43px;

  padding:
    0 17px;

  border: 0;

  background:
    var(--ink);

  color: white;

  font-size: 13px;

}



/* =========================================================
FOOTER
========================================================= */

.footer {

  width:
    min(
      calc(100% - 48px),
      var(--max)
    );

  margin: auto;

  padding:
    48px 0 90px;

}


.footer-main {

  display: flex;

  align-items: flex-start;

  justify-content:
    space-between;

  gap: 35px;

}


.footer strong {

  font-family:
    var(--heading);

  font-size: 15px;

  font-weight: 600;

}


.footer p {

  margin-top: 7px;

  color:
    var(--muted);

  font-size: 13px;

}


.footer-links {

  display: flex;

  gap: 22px;

  font-size: 13px;

}


.footer-bottom {

  margin-top: 35px;

  padding-top: 18px;

  border-top:
    1px solid
    var(--line);

  display: flex;

  justify-content:
    space-between;

  gap: 20px;

  color:
    var(--muted-2);

  font-size: 11px;

}



/* =========================================================
TABLET
========================================================= */

@media (max-width: 1050px) {

  .desktop-nav,
  .top-register {

    display: none;

  }


  .menu-toggle {

    display: flex;

  }


  .mobile-nav {

    position: fixed;

    top: 74px;

    right: 0;

    left: 0;

    display: flex;

    flex-direction: column;

    padding:
      12px 24px 20px;

    background: white;

    border-bottom:
      1px solid
      var(--line);

    transform:
      translateY(-120%);

    opacity: 0;

    pointer-events: none;

    transition:
      .25s ease;

  }


  .mobile-nav.open {

    transform:
      translateY(0);

    opacity: 1;

    pointer-events: auto;

  }


  .mobile-nav a {

    padding:
      13px 0;

    border-bottom:
      1px solid
      #edf0f4;

    font-size: 14px;

  }


  .mobile-register-btn {

    margin-top: 12px;

    text-align: center;

    color:
      white !important;

    background:
      var(--blue);

  }


  .hero-inner {

    grid-template-columns:
      1fr;

  }


  .about-layout {

    grid-template-columns:
      1fr;

    gap: 35px;

  }


  .about-copy {

    max-width: 650px;

    padding-top: 0;

  }


  .vision-layout {

    grid-template-columns:
      1fr;

  }


  .vision-side {

    grid-template-columns:
      repeat(3,1fr);

    grid-template-rows: none;

  }


  .how-inner {

    grid-template-columns:
      1fr;

    gap: 35px;

  }


  .register-inner {

    grid-template-columns:
      1fr;

  }

}



/* =========================================================
MOBILE
========================================================= */

@media (max-width: 680px) {


  .floating-register {

    right: 14px;

    bottom: 14px;

    width: 62px;

    height: 62px;

  }


  .floating-register strong {

    font-size: 13px;

  }


  .topbar-inner,
  .hero-inner,
  .value-strip-inner,
  .section-container,
  .mid-cta-inner,
  .how-inner,
  .register-inner,
  .footer {

    width:
      calc(100% - 28px);

  }


  .topbar-inner {

    height: 66px;

  }


  .company-name {

    font-size: 14px;

  }


  .mobile-nav {

    top: 66px;

  }


  .hero {

    padding-top: 66px;

  }


  .hero-inner {

    min-height: auto;

    padding:
      22px 0 45px;

    display: flex;

    flex-direction: column;

    gap: 31px;

  }


  /*
  VIDEO ALWAYS FIRST ON PHONE
  */

  .hero-video {

    order: 1;

    width: 100%;

  }


  .hero-copy {

    order: 2;

    width: 100%;

  }


  .video-placeholder {

    aspect-ratio:
      16 / 11;

  }


  .video-main-text strong {

    font-size: 23px;

  }


  .video-main-text p {

    font-size: 14px;

  }


  .hero-eyebrow {

    font-size: 13px;

  }


  .hero-copy h1 {

    margin-top: 13px;

    font-size: 34px;

    line-height: 1.38;

  }


  .hero-copy > p {

    margin-top: 15px;

    font-size: 15px;

    line-height: 1.85;

  }


  .hero-actions {

    display: grid;

    grid-template-columns:
      1fr;

  }


  .main-action,
  .ghost-action {

    width: 100%;

  }


  .hero-points {

    grid-template-columns:
      repeat(2,1fr);

    gap: 16px 0;

  }


  .hero-points > div:nth-child(2) {

    border-left: 0;

  }


  .value-strip-inner {

    grid-template-columns:
      repeat(2,1fr);

  }


  .value-main {

    grid-column:
      1 / -1;

    min-height: 50px;

  }


  .value-cell {

    min-height: 62px;

  }


  .about-section,
  .vision-section,
  .services-section {

    padding:
      70px 0;

  }


  .about-title h2,
  .section-heading h2,
  .services-intro h2 {

    font-size: 31px;

  }


  .principles-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .principle {

    min-height: 180px;

    padding:
      21px 16px;

  }


  .principle:nth-child(2) {

    border-left: 0;

  }


  .section-heading {

    grid-template-columns:
      1fr;

    gap: 20px;

  }


  .vision-main {

    display: block;

  }


  .vision-art {

    min-height: 290px;

  }


  .vision-description {

    padding:
      24px 20px;

  }


  .vision-side {

    grid-template-columns:
      1fr;

  }


  .mid-cta {

    padding-bottom:
      70px;

  }


  .mid-cta-inner {

    padding:
      28px 21px;

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .mid-cta a {

    width: 100%;

  }


  .service-row {

    grid-template-columns:
      38px 1fr 25px;

    gap: 12px;

    padding:
      19px 0;

  }


  .service-row > p {

    grid-column:
      2 / -1;

  }


  .how-inner {

    padding:
      70px 0;

  }


  .steps-grid {

    grid-template-columns:
      1fr;

  }


  .step-card {

    min-height: 155px;

    border-left: 0;

  }


  .register-section {

    padding:
      70px 0;

  }


  .register-info h2 {

    font-size: 32px;

  }


  .register-info > p {

    font-size: 15px;

  }


  .form-panel {

    padding:
      21px 16px;

  }


  .form-grid {

    grid-template-columns:
      1fr;

    gap: 0;

  }


  .experience {

    grid-template-columns:
      1fr;

  }


  .experience label > span {

    min-height: 64px;

  }


  .footer-main {

    flex-direction:
      column;

  }


  .footer-links {

    flex-wrap: wrap;

  }


  .footer-bottom {

    flex-direction:
      column;

  }

}


/* =========================================================
REDUCED MOTION
========================================================= */

@media
(prefers-reduced-motion: reduce) {

  * {

    animation:
      none !important;

    transition:
      none !important;

  }


  .reveal {

    opacity: 1;

    transform: none;

  }

}


/* REAL HERO VIDEO FIX */
.video-screen {
  position: relative;
  overflow: hidden;
  background: #0f1d33;
}

.real-video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0f1d33;
}

@media (max-width: 680px) {
  .video-box {
    width: 100%;
  }

  .real-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

/* =========================================
   VERTICAL VIDEO FIX
========================================= */

.video-screen {
  width: 100%;
  background: #0f1d33;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.real-video {
  display: block;
  width: auto;
  max-width: 100%;
  height: 620px;
  max-height: 78vh;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin: 0 auto;
  background: #0f1d33;
}

/* الهاتف */
@media (max-width: 680px) {

  .video-box {
    width: 100%;
  }

  .video-screen {
    width: 100%;
    background: #0f1d33;
  }

  .real-video {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }

}

/* =========================================================
   MOBILE FORM — PREVENT SAFARI INPUT ZOOM
========================================================= */

@media (max-width: 768px) {
  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }
}

/* iOS Safari specific */
@supports (-webkit-touch-callout: none) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}


.risk-warning {
  display: block;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  max-width: 1050px;
  margin: 0 auto;
}