@font-face { font-family: Poppins; src: url(fonts/poppins-latin-400-normal.woff); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(fonts/poppins-latin-700-normal.woff); font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/inter-latin-400-normal.woff); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/inter-latin-700-normal.woff); font-weight: 700; font-display: swap; }
:root { --ink: #0f1020; --soft: #5b6072; --line: #e6e7ee; --paper: #fbfbfd; --violet: #6c5cff; --pink: #ff5e8e; --sun: #ffc23d; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 17px/1.6 Inter, system-ui, sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: Poppins, system-ui, sans-serif; line-height: 1.12; letter-spacing: -.02em; margin: 0; }
.wrap { width: min(1160px, 100% - 40px); margin: 0 auto; }
nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.brand { display: flex; align-items: center; gap: 9px; font: 700 20px Poppins, sans-serif; text-decoration: none; color: #fff; }
.brand i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font-style: normal; background: linear-gradient(135deg, var(--violet), var(--pink)); }
.links { display: flex; align-items: center; gap: 26px; }
.links a { color: #d9dbea; text-decoration: none; font-size: 15px; }
.links a:hover { color: #fff; }
.btn { display: inline-block; padding: 14px 26px; border-radius: 11px; font-weight: 700; text-decoration: none; background: linear-gradient(120deg, var(--violet), var(--pink)); color: #fff !important; box-shadow: 0 12px 30px -10px rgba(108, 92, 255, .7); transition: transform .15s; }
.btn:hover { transform: translateY(-2px); }
.btn.small { padding: 9px 16px; font-size: 14px; box-shadow: none; }
.btn.light { background: #fff; color: var(--ink) !important; box-shadow: none; }
.hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(900px 500px at 82% -10%, #6a2fd0 0, transparent 60%), radial-gradient(800px 500px at 0 10%, #1c4bb8 0, transparent 60%), #0c0d1d; }
.hero .copy { text-align: center; padding: 58px 0 44px; }
.tag { display: inline-block; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 99px; font-size: 14px; color: #ffe29a; margin-bottom: 20px; }
.hero h1 { font-size: clamp(38px, 6.4vw, 72px); font-weight: 700; }
.hero h1 span { background: linear-gradient(100deg, #ffc23d, #ff5e8e 55%, #a78bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { max-width: 660px; margin: 20px auto 30px; font-size: 20px; color: #cfd2e6; }
.hero small { display: block; margin-top: 14px; color: #a7abc5; font-size: 14px; }
.shot { border-radius: 14px 14px 0 0; border: 1px solid rgba(255, 255, 255, .16); border-bottom: 0; box-shadow: 0 -20px 90px rgba(108, 92, 255, .45); }
section { padding: 84px 0; }
.head { max-width: 700px; margin-bottom: 40px; }
.head.center { text-align: center; margin-inline: auto; }
.head h2 { font-size: clamp(30px, 4vw, 44px); }
.head p { color: var(--soft); margin: 14px 0 0; font-size: 19px; }
.eyebrow { display: block; margin-bottom: 10px; font: 700 13px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 30px 0; border-bottom: 1px solid var(--line); text-align: center; }
.stats b { display: block; font: 700 36px Poppins, sans-serif; }
.stats span { color: var(--soft); font-size: 15px; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery img { width: 100%; border-radius: 10px; box-shadow: 0 16px 34px -18px rgba(15, 16, 32, .5); transition: transform .2s; }
.gallery img:hover { transform: translateY(-5px) scale(1.01); }
.dark { background: #0f1020; color: #fff; }
.dark .head p { color: #b8bcd2; }
.dark .eyebrow { color: var(--sun); }
.boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.boxes img { width: 100%; background: #eceef2; border-radius: 12px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; }
.ticks li { padding: 9px 0 9px 28px; border-bottom: 1px solid var(--line); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 16px; width: 11px; height: 11px; border-radius: 3px; background: linear-gradient(135deg, var(--violet), var(--pink)); }
.dark .ticks li { border-color: #2b2d44; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { margin: 0; color: var(--soft); font-size: 16px; }
.arabic { direction: rtl; font-family: "Cairo", Poppins, sans-serif; }
.cta { text-align: center; color: #fff; background: radial-gradient(700px 300px at 50% 0, #6a2fd0, #0c0d1d 75%); }
.cta h2 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 14px; }
.cta p { color: #cfd2e6; margin: 0 0 28px; font-size: 19px; }
footer { padding: 30px 0; color: var(--soft); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { margin-left: 16px; }
.legal { max-width: 760px; margin: 0 auto; padding: 50px 20px; }
.legal h1 { font-size: 36px; margin-bottom: 8px; }
.legal h2 { font-size: 21px; margin: 28px 0 8px; }
@media (max-width: 860px) {
  .links a:not(.btn) { display: none; }
  .stats, .gallery { grid-template-columns: 1fr 1fr; }
  .boxes { grid-template-columns: repeat(3, 1fr); }
  .split, .cards { grid-template-columns: 1fr; }
  section { padding: 56px 0; }
}
.hero h1 .plain { background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; }
.hero .copy { padding-bottom: 10px; }
.stage { position: relative; height: 430px; margin-top: 10px; }
.stage img { position: absolute; bottom: -34px; width: 400px; filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .55)); }
.stage .b1 { left: 2%; width: 300px; bottom: 6px; }
.stage .b2 { left: 22%; width: 400px; }
.stage .b3 { left: 46%; width: 430px; bottom: -46px; }
.stage .b4 { right: 0; width: 360px; bottom: -6px; }
.scene { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 30px 60px -28px rgba(15, 16, 32, .55); }
.ticks.two { columns: 2; column-gap: 44px; margin-top: 34px; }
.ticks.two li { break-inside: avoid; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pills span { padding: 13px 22px; border: 1px solid var(--line); border-radius: 99px; background: #fff; font-weight: 700; }
#lang { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; padding: 7px 8px; font: inherit; font-size: 14px; }
#lang option { color: #111; }
[dir=rtl] .ticks li { padding: 9px 28px 9px 0; }
[dir=rtl] .ticks li::before { left: auto; right: 3px; }
[dir=rtl] footer a { margin: 0 16px 0 0; }
@media (max-width: 860px) {
  .stage { height: 240px; }
  .stage img { width: 46% !important; }
  .stage .b1, .stage .b4 { display: none; }
  .stage .b2 { left: 4%; bottom: 0; }
  .stage .b3 { left: 50%; bottom: 0; }
  .ticks.two { columns: 1; }
}

/* Arabic type and layout */
@font-face { font-family: Tajawal; src: url(fonts/tajawal-arabic-400-normal.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Tajawal; src: url(fonts/tajawal-arabic-700-normal.ttf); font-weight: 700; font-display: swap; }
@font-face { font-family: Cairo; src: url(fonts/cairo-arabic-700-normal.ttf); font-weight: 700; font-display: swap; }
[dir=rtl] body { font-family: Tajawal, Inter, system-ui, sans-serif; font-size: 18px; }
[dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3, [dir=rtl] .cta h2 { font-family: Cairo, Poppins, sans-serif; letter-spacing: 0; line-height: 1.32; }
[dir=rtl] .eyebrow { font-family: Tajawal, Inter, sans-serif; font-size: 16px; letter-spacing: 0; }
[dir=rtl] .hero h1 { font-size: clamp(34px, 5.4vw, 62px); padding-bottom: .1em; }
[dir=rtl] .stats b { direction: ltr; unicode-bidi: isolate; }
[dir=rtl] .btn { white-space: nowrap; }
@media (max-width: 860px) {
  nav { gap: 10px; }
  .brand img { width: 118px; height: auto; }
  .links { gap: 8px; }
  .links .btn.small { padding: 8px 11px; white-space: nowrap; }
  #lang { max-width: 92px; }
}