/*  VARIABLES  */
  :root {
      --ink: #0D1117;
      --gold: #D4A853;
      --gold-lt: #F0CF89;
      --sky: #3B82F6;
      --sky-lt: #DBEAFE;
      --mint: #10B981;
      --coral: #F97316;
      --cream: #FAF7F0;
      --muted: #6B7280;
      --border: rgba(212, 168, 83, .18);
      --r: 20px;
      --shadow: 0 8px 40px rgba(13, 17, 23, .10);
  }

  /*  RESET  */
  *,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
  }

  html {
      scroll-behavior: smooth;
      font-size: 16px
  }

  body {
      font-family: 'Cairo', sans-serif;
      background: var(--cream);
      color: var(--ink);
      overflow-x: hidden;
      line-height: 1.7;
  }

  /*  NOISE TEXTURE  */
  body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 0;
      opacity: .6;
  }

  /*  NAV  */
  nav {
      position: fixed;
      top: 0;
      inset-inline: 0;
      z-index: 100;
      padding: 18px clamp(20px, 5vw, 80px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(250, 247, 240, .88);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
      transition: box-shadow .3s;
  }

  nav.scrolled {
      box-shadow: var(--shadow)
  }

  .nav-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: 'Tajawal', sans-serif;
      font-size: 1.6rem;
      font-weight: 900;
      color: var(--ink);
      text-decoration: none;
      letter-spacing: -.5px;
  }

  .logo-badge {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--ink);
      display: grid;
      place-items: center;
      font-size: 1.4rem;
      color: var(--gold);
      font-weight: 900;
      box-shadow: 0 4px 14px rgba(13, 17, 23, .25);
  }

  .nav-links {
      display: flex;
      align-items: center;
      gap: 8px
  }

  .nav-links a {
      padding: 8px 18px;
      border-radius: 50px;
      font-size: .9rem;
      font-weight: 600;
      color: var(--muted);
      text-decoration: none;
      transition: all .2s;
  }

  .nav-links a:hover {
      color: var(--ink);
      background: rgba(13, 17, 23, .06)
  }

  .btn-nav {
      padding: 10px 24px;
      border-radius: 50px;
      background: var(--ink);
      color: #fff;
      font-size: .9rem;
      font-weight: 700;
      text-decoration: none;
      transition: all .25s;
      box-shadow: 0 3px 12px rgba(13, 17, 23, .2);
  }

  .btn-nav:hover {
      background: #1f2937;
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(13, 17, 23, .25)
  }

  .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px
  }

  .hamburger span {
      width: 24px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: .3s
  }

  /*  HERO  */
  .hero {
      min-height: 100svh;
      padding: 120px clamp(20px, 6vw, 100px) 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 60px;
      position: relative;
      overflow: hidden;
  }

  /* الخلفية الهندسية */
  .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
          radial-gradient(ellipse 60% 70% at 80% 20%, rgba(212, 168, 83, .12) 0%, transparent 60%),
          radial-gradient(ellipse 40% 50% at 10% 80%, rgba(59, 130, 246, .08) 0%, transparent 60%);
  }

  /* الحروف العائمة في الخلفية */
  .hero-bg-letters {
      position: absolute;
      inset: 0;
      z-index: -1;
      overflow: hidden;
      pointer-events: none;
  }

  .float-letter {
      position: absolute;
      font-family: 'Tajawal', sans-serif;
      font-weight: 900;
      color: rgba(212, 168, 83, .07);
      animation: float-drift 18s ease-in-out infinite;
      user-select: none;
  }

  @keyframes float-drift {

      0%,
      100% {
          transform: translateY(0) rotate(-5deg)
      }

      50% {
          transform: translateY(-30px) rotate(5deg)
      }
  }

  .hero-text {
      animation: slide-up .7s .1s both
  }

  .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px;
      border-radius: 50px;
      border: 1.5px solid var(--border);
      background: rgba(212, 168, 83, .08);
      font-size: .82rem;
      font-weight: 700;
      color: var(--gold);
      margin-bottom: 24px;
      letter-spacing: .5px;
  }

  .hero-tag::before {
      content: '✦';
      font-size: .7rem
  }

  h1 {
      font-family: 'Tajawal', sans-serif;
      font-size: clamp(2.8rem, 5.5vw, 4.4rem);
      font-weight: 900;
      line-height: 1.15;
      letter-spacing: -1.5px;
      margin-bottom: 20px;
  }

  h1 .accent {
      background: linear-gradient(135deg, var(--gold), var(--coral));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .hero-desc {
      font-size: 1.1rem;
      color: var(--muted);
      max-width: 480px;
      margin-bottom: 36px;
  }

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

  .btn-primary {
      padding: 16px 36px;
      border-radius: 50px;
      background: var(--ink);
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      font-family: 'Cairo', sans-serif;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .25s;
      box-shadow: 0 6px 24px rgba(13, 17, 23, .2);
  }

  .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(13, 17, 23, .28)
  }

  .btn-ghost {
      padding: 16px 36px;
      border-radius: 50px;
      border: 1.5px solid rgba(13, 17, 23, .15);
      color: var(--ink);
      font-size: 1rem;
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .25s;
  }

  .btn-ghost:hover {
      background: rgba(13, 17, 23, .05);
      border-color: var(--ink)
  }

  .hero-stats {
      display: flex;
      gap: 32px;
      margin-top: 40px;
      padding-top: 36px;
      border-top: 1px solid var(--border);
  }

  .stat-item {
      text-align: center
  }

  .stat-num {
      font-family: 'Tajawal', sans-serif;
      font-size: 2rem;
      font-weight: 900;
      background: linear-gradient(135deg, var(--ink), var(--gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .stat-lbl {
      font-size: .8rem;
      color: var(--muted);
      font-weight: 600
  }

  /* Hero visual */
  .hero-visual {
      display: flex;
      justify-content: center;
      align-items: center;
      animation: slide-up .7s .3s both;
      position: relative;
  }

  .phone-mockup {
      width: min(300px, 85vw);
      background: var(--ink);
      border-radius: 44px;
      padding: 12px;
      box-shadow:
          0 30px 80px rgba(13, 17, 23, .3),
          0 0 0 1px rgba(255, 255, 255, .1);
      position: relative;
  }

  .phone-screen {
      background: #F8F9FA;
      border-radius: 34px;
      overflow: hidden;
      padding: 24px 18px;
      min-height: 580px;
  }

  .phone-notch {
      width: 80px;
      height: 6px;
      background: #ddd;
      border-radius: 3px;
      margin: 0 auto 24px;
  }

  .app-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
  }

  .app-logo-sm {
      font-family: 'Tajawal', sans-serif;
      font-size: 1.1rem;
      font-weight: 900;
      color: var(--ink);
  }

  .app-badge-sm {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: var(--ink);
      display: grid;
      place-items: center;
      font-size: .9rem;
      color: var(--gold);
      font-weight: 900;
  }

  .app-card {
      background: #fff;
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 12px;
      border: 1px solid #f0f0f0;
  }

  .card-label {
      font-size: .7rem;
      color: var(--muted);
      font-weight: 700;
      margin-bottom: 10px;
      letter-spacing: .5px
  }

  .letters-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px
  }

  .letter-tile {
      aspect-ratio: 1;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-family: 'Tajawal', sans-serif;
      font-size: 1.3rem;
      font-weight: 900;
      transition: transform .2s;
  }

  .letter-tile.done {
      background: #DCFCE7;
      color: #16A34A
  }

  .letter-tile.active {
      background: #DBEAFE;
      color: #2563EB;
      transform: scale(1.05)
  }

  .letter-tile.locked {
      background: #F3F4F6;
      color: #9CA3AF
  }

  .progress-bar-wrap {
      margin-top: 12px
  }

  .prog-label {
      display: flex;
      justify-content: space-between;
      font-size: .75rem;
      color: var(--muted);
      margin-bottom: 6px
  }

  .prog-track {
      height: 8px;
      background: #F3F4F6;
      border-radius: 4px;
      overflow: hidden
  }

  .prog-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--sky), var(--mint));
      border-radius: 4px;
      animation: grow-bar 2s 1s both
  }

  @keyframes grow-bar {
      from {
          width: 0
      }

      to {
          width: 68%
      }
  }

  .score-row {
      display: flex;
      gap: 8px;
      margin-top: 12px
  }

  .score-box {
      flex: 1;
      padding: 10px;
      border-radius: 10px;
      text-align: center;
  }

  .score-box.green {
      background: #F0FDF4;
      color: #16A34A
  }

  .score-box.blue {
      background: #EFF6FF;
      color: #2563EB
  }

  .score-box.orange {
      background: #FFF7ED;
      color: #EA580C
  }

  .score-num {
      font-family: 'Tajawal', sans-serif;
      font-size: 1.2rem;
      font-weight: 900
  }

  .score-txt {
      font-size: .65rem;
      font-weight: 600
  }

  /* floating accent shapes */
  .shape-1,
  .shape-2,
  .shape-3 {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      animation: pulse-shape 4s ease-in-out infinite alternate;
  }

  .shape-1 {
      width: 120px;
      height: 120px;
      background: radial-gradient(var(--gold-lt), transparent);
      top: -20px;
      left: -30px;
      opacity: .5;
  }

  .shape-2 {
      width: 80px;
      height: 80px;
      background: radial-gradient(var(--sky-lt), transparent);
      bottom: 40px;
      right: -20px;
      opacity: .7;
      animation-delay: .8s;
  }

  .shape-3 {
      width: 50px;
      height: 50px;
      background: radial-gradient(#fce7f3, transparent);
      top: 50%;
      left: -40px;
      opacity: .6;
      animation-delay: 1.5s;
  }

  @keyframes pulse-shape {
      0% {
          transform: scale(1)
      }

      100% {
          transform: scale(1.2)
      }
  }

  /*  SECTIONS  */
  section {
      padding: 100px clamp(20px, 6vw, 100px)
  }

  .section-tag {
      display: inline-block;
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 14px;
  }

  .section-title {
      font-family: 'Tajawal', sans-serif;
      font-size: clamp(1.9rem, 4vw, 2.8rem);
      font-weight: 900;
      letter-spacing: -.8px;
      margin-bottom: 16px;
      line-height: 1.25;
  }

  .section-desc {
      font-size: 1.05rem;
      color: var(--muted);
      max-width: 560px
  }

  .center {
      text-align: center
  }

  .center .section-desc {
      margin: 0 auto
  }

  /*  FEATURES  */
  .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      margin-top: 56px;
  }

  .feat-card {
      background: #fff;
      border-radius: var(--r);
      padding: 32px 28px;
      border: 1px solid rgba(13, 17, 23, .07);
      transition: all .3s;
      position: relative;
      overflow: hidden;
  }

  .feat-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--r);
      background: linear-gradient(135deg, var(--color-a, .05), var(--color-b, .02));
      opacity: 0;
      transition: .3s;
  }

  .feat-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow);
      border-color: transparent
  }

  .feat-card:hover::before {
      opacity: 1
  }

  .feat-icon {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      font-size: 1.6rem;
      margin-bottom: 20px;
      background: var(--icon-bg, #F3F4F6);
  }

  .feat-card h3 {
      font-family: 'Tajawal', sans-serif;
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 10px
  }

  .feat-card p {
      font-size: .93rem;
      color: var(--muted);
      line-height: 1.65
  }

  /*  HOW IT WORKS  */
  .how-bg {
      background: var(--ink);
      color: #fff
  }

  .how-bg .section-title {
      color: #fff
  }

  .how-bg .section-desc {
      color: rgba(255, 255, 255, .6)
  }

  .how-bg .section-tag {
      color: var(--gold)
  }

  .steps-wrap {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 30px;
      margin-top: 56px;
      counter-reset: step;
  }

  .step-card {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--r);
      padding: 32px 24px;
      position: relative;
      transition: all .3s;
      counter-increment: step;
  }

  .step-card:hover {
      background: rgba(255, 255, 255, .08);
      transform: translateY(-4px)
  }

  .step-card::before {
      content: counter(step, arabic-indic);
      font-family: 'Tajawal', sans-serif;
      font-size: 3rem;
      font-weight: 900;
      color: rgba(212, 168, 83, .3);
      position: absolute;
      top: 20px;
      left: 24px;
      line-height: 1;
  }

  .step-icon {
      font-size: 2rem;
      margin-bottom: 18px
  }

  .step-card h3 {
      font-family: 'Tajawal', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 8px;
      color: #fff
  }

  .step-card p {
      font-size: .88rem;
      color: rgba(255, 255, 255, .55);
      line-height: 1.6
  }

  /*  ROLES  */
  .roles-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 56px;
  }

  .role-card {
      border-radius: var(--r);
      padding: 36px 28px;
      position: relative;
      overflow: hidden;
      transition: transform .3s;
  }

  .role-card:hover {
      transform: translateY(-6px)
  }

  .role-card.student-c {
      background: linear-gradient(145deg, #EFF6FF, #DBEAFE)
  }

  .role-card.teacher-c {
      background: linear-gradient(145deg, #F0FDF4, #DCFCE7)
  }

  .role-card.supervisor-c {
      background: linear-gradient(145deg, #FFF7ED, #FED7AA)
  }

  .role-emoji {
      font-size: 2.8rem;
      margin-bottom: 18px;
      display: block
  }

  .role-card h3 {
      font-family: 'Tajawal', sans-serif;
      font-size: 1.25rem;
      font-weight: 800;
      margin-bottom: 12px
  }

  .role-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px
  }

  .role-list li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: .9rem;
      color: var(--muted)
  }

  .role-list li::before {
      content: '←';
      color: var(--gold);
      font-size: .8rem;
      margin-top: .15em;
      flex-shrink: 0
  }

  /*  EXERCISES  */
  .ex-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
      margin-top: 48px;
  }

  .ex-card {
      border-radius: var(--r);
      padding: 28px 22px;
      background: #fff;
      border: 1px solid rgba(13, 17, 23, .07);
      text-align: center;
      transition: all .3s;
  }

  .ex-card:hover {
      transform: scale(1.03);
      box-shadow: var(--shadow)
  }

  .ex-icon {
      font-size: 2.4rem;
      margin-bottom: 14px;
      display: block
  }

  .ex-card h4 {
      font-size: .95rem;
      font-weight: 700;
      margin-bottom: 6px
  }

  .ex-card p {
      font-size: .82rem;
      color: var(--muted)
  }

  /*  TESTIMONIALS  */
  .test-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      margin-top: 48px;
  }

  .test-card {
      background: #fff;
      border-radius: var(--r);
      padding: 28px;
      border: 1px solid rgba(13, 17, 23, .07);
      transition: all .3s;
  }

  .test-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow)
  }

  .test-stars {
      color: var(--gold);
      font-size: 1.1rem;
      margin-bottom: 14px;
      letter-spacing: 2px
  }

  .test-text {
      font-size: .95rem;
      color: #374151;
      line-height: 1.7;
      margin-bottom: 20px;
      font-style: italic
  }

  .test-author {
      display: flex;
      align-items: center;
      gap: 12px
  }

  .test-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: 'Tajawal', sans-serif;
      font-size: 1.1rem;
      font-weight: 900;
      flex-shrink: 0;
  }

  .test-name {
      font-weight: 700;
      font-size: .9rem
  }

  .test-role {
      font-size: .78rem;
      color: var(--muted)
  }

  /*  CTA BANNER  */
  .cta-section {
      margin: 0 clamp(20px, 5vw, 80px) 80px;
      border-radius: 28px;
      background: var(--ink);
      padding: 72px clamp(28px, 6vw, 80px);
      text-align: center;
      position: relative;
      overflow: hidden;
  }

  .cta-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
          radial-gradient(ellipse 50% 70% at 20% 50%, rgba(212, 168, 83, .15), transparent),
          radial-gradient(ellipse 40% 60% at 80% 30%, rgba(59, 130, 246, .1), transparent);
  }

  .cta-section .section-title {
      color: #fff;
      position: relative
  }

  .cta-section .section-desc {
      color: rgba(255, 255, 255, .6);
      position: relative;
      margin: 0 auto 40px
  }

  .cta-btns {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
      position: relative
  }

  .btn-gold {
      padding: 16px 36px;
      border-radius: 50px;
      background: var(--gold);
      color: var(--ink);
      font-size: 1rem;
      font-weight: 800;
      text-decoration: none;
      transition: all .25s;
      box-shadow: 0 6px 24px rgba(212, 168, 83, .35);
  }

  .btn-gold:hover {
      background: var(--gold-lt);
      transform: translateY(-2px)
  }

  .btn-ghost-white {
      padding: 16px 36px;
      border-radius: 50px;
      border: 1.5px solid rgba(255, 255, 255, .25);
      color: #fff;
      font-size: 1rem;
      font-weight: 600;
      text-decoration: none;
      transition: all .25s;
  }

  .btn-ghost-white:hover {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .5)
  }

  /*  FOOTER  */
  footer {
      background: var(--ink);
      color: rgba(255, 255, 255, .55);
      padding: 60px clamp(20px, 6vw, 100px) 32px;
  }

  .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr repeat(3, 1fr);
      gap: 48px;
      margin-bottom: 56px;
  }

  .footer-brand p {
      font-size: .9rem;
      line-height: 1.7;
      margin-top: 14px;
      color: rgba(255, 255, 255, .4)
  }

  .footer-col h4 {
      font-size: .8rem;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
      margin-bottom: 18px;
  }

  .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px
  }

  .footer-col a {
      color: rgba(255, 255, 255, .55);
      text-decoration: none;
      font-size: .9rem;
      transition: .2s
  }

  .footer-col a:hover {
      color: var(--gold)
  }

  .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, .08);
      font-size: .82rem;
  }

  .footer-bottom a {
      color: rgba(255, 255, 255, .4);
      text-decoration: none;
      transition: .2s
  }

  .footer-bottom a:hover {
      color: var(--gold)
  }

  /*  ANIMATIONS  */
  @keyframes slide-up {
      from {
          opacity: 0;
          transform: translateY(30px)
      }

      to {
          opacity: 1;
          transform: translateY(0)
      }
  }

  .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: all .6s ease
  }

  .reveal.visible {
      opacity: 1;
      transform: translateY(0)
  }

  /*  RESPONSIVE  */
  @media(max-width:900px) {
      .hero {
          grid-template-columns: 1fr;
          text-align: center;
          padding-top: 100px
      }

      .hero-visual {
          margin-top: 40px
      }

      .hero-cta {
          justify-content: center
      }

      .hero-stats {
          justify-content: center
      }

      .hero-desc {
          margin: 0 auto 36px
      }

      .roles-grid {
          grid-template-columns: 1fr
      }

      .footer-grid {
          grid-template-columns: 1fr 1fr;
          gap: 32px
      }
  }

  @media(max-width:600px) {
      .nav-links {
          display: none
      }

      .nav-links.open {
          display: flex;
          flex-direction: column;
          position: fixed;
          inset: 0;
          top: 70px;
          background: rgba(250, 247, 240, .97);
          backdrop-filter: blur(10px);
          padding: 40px 24px;
          z-index: 99;
          gap: 16px;
      }

      .nav-links.open a {
          font-size: 1.1rem;
          padding: 12px 20px
      }

      .hamburger {
          display: flex
      }

      .footer-grid {
          grid-template-columns: 1fr
      }

      h1 {
          font-size: 2.4rem
      }
  }