:root {
        --ink: #062f27;
        --muted: #4b625c;
        --deep: #003b30;
        --deep-2: #005141;
        --gold: #d9a631;
        --gold-2: #ffc75b;
        --paper: #fffdf8;
        --soft: #f7f6f0;
        --line: rgba(6, 47, 39, 0.12);
        --shadow: 0 18px 44px rgba(0, 35, 28, 0.12);
        --serif: Georgia, "Times New Roman", serif;
        --sans: "Tajawal", "Noto Sans Arabic", Arial, ui-sans-serif, system-ui, sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        color: var(--ink);
        background: #ffffff;
        font-family: var(--sans);
      }

      a,
      button {
        color: inherit;
        -webkit-tap-highlight-color: transparent;
      }

      a {
        text-decoration: none;
      }

      img,
      svg {
        display: block;
      }

      .page {
        width: min(100%, 862px);
        margin: 0 auto;
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 0%, rgba(217, 166, 49, 0.08), transparent 360px),
          var(--paper);
        padding-bottom: 118px;
      }

      .hero {
        position: relative;
        min-height: 612px;
        padding: 18px 40px 30px 52px;
        background:
          radial-gradient(circle at 74% 61%, rgba(0, 81, 65, 0.1), transparent 230px),
          linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 39%, rgba(255, 253, 248, 0.72) 58%, rgba(240, 248, 238, 0.86) 100%);
      }

      .hero::after {
        content: "";
        position: absolute;
        right: 75px;
        bottom: -2px;
        width: 360px;
        aspect-ratio: 360 / 604;
        background: url("../../assets/v2/hero-phone-scene.webp") right bottom / contain no-repeat;
        z-index: 1;
        pointer-events: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 100%);
      }

      .topbar {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 14px;
      }

      .brand-mark {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        color: var(--gold);
      }

      .brand-mark svg {
        width: 58px;
        height: 58px;
      }

      .brand strong {
        display: block;
        color: #102d27;
        font-size: 22px;
        line-height: 1;
      }

      .brand small {
        display: block;
        margin-top: 5px;
        color: #101917;
        font-size: 13px;
        line-height: 1;
      }

      .menu {
        width: 58px;
        height: 58px;
        border: 0;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #ffffff;
        background: linear-gradient(145deg, #005141, #003427);
        cursor: pointer;
      }

      .menu svg {
        width: 29px;
        height: 29px;
      }

      .hero-copy {
        position: relative;
        z-index: 2;
        width: 430px;
        padding-top: 44px;
      }

      .hero h1,
      .story h2,
      .guide-copy h2 {
        margin: 0;
        font-family: var(--serif);
        font-weight: 700;
        letter-spacing: 0;
        line-height: 0.98;
      }

      .hero h1 {
        font-size: 51px;
        font-weight: 600;
      }

      .dot {
        color: var(--gold);
      }

      .lead {
        margin: 15px 0 0;
        max-width: 346px;
        color: #233a35;
        font-size: 17px;
        line-height: 1.55;
      }

      .arabic {
        margin: 12px 0 0;
        max-width: 360px;
        color: #1d302c;
        font-size: 15px;
        line-height: 1.65;
      }

      .btn {
        min-height: 58px;
        border-radius: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 0 28px;
        font-weight: 800;
        font-size: 17px;
        border: 0;
      }

      .btn-primary {
        margin-top: 22px;
        min-width: 207px;
        color: #ffffff;
        background: linear-gradient(135deg, #005141, #00382d);
        box-shadow: 0 10px 24px rgba(0, 55, 45, 0.2);
      }

      .btn svg,
      .link svg,
      .section-link svg {
        width: 19px;
        height: 19px;
      }

      .fine {
        margin: 17px 0 0;
        color: #17231f;
        font-size: 14px;
        line-height: 1.45;
      }

      .story-card {
        position: relative;
        z-index: 3;
        margin: 0 24px;
        padding: 34px 57px 34px 43px;
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 66px;
        align-items: center;
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 48px rgba(0, 45, 35, 0.11);
      }

      .kicker {
        margin: 0 0 14px;
        color: var(--gold);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .story h2 {
        font-size: 34px;
      }

      .story p {
        margin: 14px 0 0;
        color: #273b36;
        font-size: 15px;
        line-height: 1.45;
      }

      .link,
      .section-link {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        gap: 11px;
        color: var(--deep);
        font-size: 16px;
        font-weight: 900;
      }

      .story .link {
        margin-top: 12px;
      }

      .story-image {
        overflow: hidden;
        border-radius: 13px;
        box-shadow: 0 10px 28px rgba(0, 42, 33, 0.12);
      }

      .story-image img {
        width: 100%;
        height: 241px;
        object-fit: cover;
      }

      .dots {
        position: absolute;
        left: 50%;
        bottom: 18px;
        display: flex;
        gap: 8px;
        transform: translateX(-50%);
      }

      .dots span {
        width: 18px;
        height: 5px;
        border-radius: 999px;
        background: #d9d9d9;
      }

      .dots span:first-child {
        background: var(--deep-2);
      }

      .section {
        padding: 18px 40px 0;
      }

      .section-head {
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }

      .section-title {
        margin: 0;
        color: var(--ink);
        font-size: 18px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .learning-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 31px;
      }

      .learning-card {
        position: relative;
        min-height: 222px;
      }

      .thumb {
        height: 108px;
        overflow: hidden;
        border-radius: 13px 13px 0 0;
        background: #0d332b;
      }

      .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .play {
        position: absolute;
        right: 14px;
        top: 62px;
        width: 41px;
        height: 41px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: var(--deep);
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 8px 18px rgba(0, 26, 21, 0.16);
      }

      .play svg {
        width: 20px;
        height: 20px;
      }

      .learn-body {
        margin: -12px -8px 0;
        min-height: 128px;
        padding: 22px 24px 18px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 16px 34px rgba(0, 30, 24, 0.11);
      }

      .learn-body h3 {
        margin: 0;
        color: #10251f;
        font-size: 17px;
      }

      .learn-body p {
        margin: 13px 0 0;
        color: #1e2b28;
        font-size: 13px;
        line-height: 1.48;
      }

      .progress-row {
        margin-top: 18px;
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .bar {
        flex: 1;
        height: 5px;
        overflow: hidden;
        border-radius: 999px;
        background: #dfe3df;
      }

      .bar span {
        display: block;
        width: var(--value);
        height: 100%;
        border-radius: inherit;
        background: var(--deep-2);
      }

      .time {
        min-width: 65px;
        color: var(--deep);
        font-size: 12px;
        font-weight: 900;
        text-align: right;
      }

      .time.gold {
        color: var(--gold);
      }

      .topics {
        padding-top: 25px;
      }

      .topic-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 17px;
      }

      .topic-card {
        min-height: 184px;
        padding: 26px 15px 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 13px 28px rgba(0, 31, 24, 0.08);
      }

      .topic-icon {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: var(--deep);
        background: linear-gradient(145deg, #f4f5f1, #ffffff);
      }

      .topic-card:nth-child(2) .topic-icon,
      .topic-card:nth-child(4) .topic-icon {
        color: var(--gold);
      }

      .topic-icon svg {
        width: 38px;
        height: 38px;
      }

      .topic-card h3 {
        margin: 18px 0 0;
        color: #10251f;
        font-size: 15px;
      }

      .topic-card p {
        margin: 12px 0 0;
        color: #364b45;
        font-size: 12px;
        line-height: 1.42;
      }

      .guide {
        position: relative;
        margin: 38px 40px 0;
        padding-bottom: 122px;
      }

      .guide-banner {
        height: 207px;
        overflow: hidden;
        border-radius: 13px;
        background: #00352c;
      }

      .guide-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .guide-button {
        position: fixed;
        left: 50%;
        bottom: 24px;
        z-index: 20;
        min-width: 398px;
        max-width: calc(100vw - 80px);
        min-height: 74px;
        padding: 0 38px;
        border-radius: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 29px;
        color: #10251f;
        background: linear-gradient(180deg, #ffe593 0%, #ffc24a 100%);
        box-shadow: 0 16px 30px rgba(202, 138, 31, 0.28);
        transform: translateX(-50%);
        font-size: 21px;
        font-weight: 900;
      }

      .guide-button svg {
        width: 29px;
        height: 29px;
      }

      .guide-button .arrow {
        width: 22px;
        height: 22px;
      }

      @media (max-width: 720px) {
        .hero {
          min-height: 690px;
          padding: 18px 24px 34px;
        }

        .hero::after {
          right: -115px;
          bottom: 0;
          width: 300px;
          opacity: 0.18;
          -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
        }

        .brand-mark,
        .brand-mark svg {
          width: 46px;
          height: 46px;
        }

        .brand strong {
          font-size: 20px;
        }

        .brand small {
          font-size: 12px;
        }

        .menu {
          width: 54px;
          height: 54px;
        }

        .hero-copy {
          width: min(100%, 340px);
          padding-top: 48px;
        }

        .hero h1 {
          font-size: clamp(44px, 12vw, 55px);
        }

        .lead {
          max-width: 300px;
          font-size: 16px;
        }

        .arabic {
          max-width: 295px;
          font-size: 14px;
        }

        .btn-primary {
          margin-top: 24px;
        }

        .fine {
          max-width: 190px;
        }

        .story-card {
          margin: 0 16px;
          padding: 34px 26px 40px;
          grid-template-columns: 1fr;
          gap: 24px;
          border-radius: 0 0 28px 28px;
        }

        .story-image {
          order: -1;
        }

        .story h2 {
          font-size: 36px;
        }

        .section {
          padding-inline: 24px;
        }

        .learning-grid {
          grid-template-columns: 1fr;
          gap: 22px;
        }

        .learning-card {
          min-height: 216px;
        }

        .topic-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .topic-card:last-child {
          grid-column: 1 / -1;
        }

        .guide {
          margin-inline: 24px;
          padding-bottom: 116px;
        }

        .guide-button {
          width: calc(100% - 40px);
          min-width: 0;
          max-width: 560px;
          bottom: 18px;
          gap: 18px;
          font-size: 18px;
        }
      }

      @media (max-width: 380px) {
        .hero::after {
          right: -128px;
          width: 286px;
        }

        .hero h1 {
          font-size: 42px;
        }

        .topic-grid {
          gap: 14px;
        }
      }

html { direction: rtl; }
body { direction: rtl; }
.hero {
  padding: 18px 52px 30px 40px;
  background:
    radial-gradient(circle at 26% 61%, rgba(0, 81, 65, 0.1), transparent 230px),
    linear-gradient(270deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 39%, rgba(255, 253, 248, 0.72) 58%, rgba(240, 248, 238, 0.86) 100%);
}
.hero::after {
  right: auto;
  left: 75px;
  transform: none;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 10%, #000 100%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 10%, #000 100%);
}
.hero-copy { margin-right: 0; margin-left: auto; text-align: right; }
.btn svg, .link svg, .section-link svg, .guide-button .arrow { transform: scaleX(-1); }
.story-card { grid-template-columns: 1fr 220px; padding: 34px 43px 34px 57px; }
.story { order: 2; }
.story-image { order: 1; }
.section-head { direction: rtl; }
.progress-row { direction: rtl; }
.guide-button { direction: rtl; }
.site-footer {
  width: min(100%, 862px);
  margin: 0 auto;
  padding: 30px 24px 36px;
  background: #062f27;
  color: rgba(255,255,255,.82);
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  margin-bottom: 12px;
}
.site-footer a {
  color: #ffc75b;
  font-weight: 800;
  text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }
.site-footer .risk-note {
  max-width: 720px;
  margin: 0 auto 12px;
}
.site-footer .company {
  color: #fff;
  font-weight: 800;
}
@media (max-width: 720px) {
  .hero { padding: 18px 30px 30px; }
  .hero::after { left: -115px; right: auto; }
}
@media (max-width: 380px) {
  .hero::after { left: -128px; right: auto; }
}