/* The public site's look (landing page, game pages, pages built in the panel, contact, legal pages) in the
   platform's identity — the same as the panel's sign-in page: a light lavender stage, deep indigo ink, a
   pink → violet → blue gradient, white rounded cards. RTL / LTR. The social icons and the cookie notice come
   from Landing::sharedCss(). */
  :root { --bg: #f4f2fd; --bg2: #ebe3fd; --card: #ffffff; --soft: #f7f4ff; --line: rgba(45, 31, 133, .12); --line2: rgba(45, 31, 133, .2);
          --text: #070650; --ink2: #38299a; --muted: #6b6a92; --brand: #6b2ff8; --pink: #fd3994; --blue: #2a5ff0; --gold: #fd3994;
          --grad: linear-gradient(90deg, #d5157c 0%, #6b2ff8 50%, #2a5ff0 100%); --grad2: linear-gradient(135deg, #fd3994 0%, #6b2ff8 100%);
          --shadow: 0 12px 32px rgba(45, 31, 133, .12); --shadow2: 0 24px 60px -24px rgba(45, 31, 133, .35); --r: 24px;
          --display: "Plus Jakarta Sans", "Cairo", sans-serif; }
  [dir="rtl"] { --display: "Cairo", "Plus Jakarta Sans", sans-serif; }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; font: 16px/1.65 "Plus Jakarta Sans", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
  [dir="rtl"] body { font-family: "Cairo", "Plus Jakarta Sans", system-ui, sans-serif; }
  a { color: inherit; }
  img { max-width: 100%; display: block; }
  .wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 14px; font-weight: 800; font-size: 15.5px; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s; }
  .btn-main { background: var(--grad); color: #fff; box-shadow: 0 10px 26px rgba(124, 77, 252, .35); }
  .btn-main:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(124, 77, 252, .45); }
  .btn-soft, .btn-glass { background: #fff; color: var(--ink2); box-shadow: inset 0 0 0 1.5px var(--line2); }
  .btn-soft:hover, .btn-glass:hover { color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); transform: translateY(-1px); }
  .btn-tg { background: #2aa3df; color: #fff; }
  .btn-white { background: #fff; color: var(--brand); box-shadow: 0 10px 26px rgba(7, 6, 80, .25); }
  .btn-white:hover { transform: translateY(-2px); }

  /* top bar */
  .nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
  .nav .wrap { display: flex; align-items: center; gap: 14px; height: 72px; }
  body { overflow-x: hidden; }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .brand img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(107, 47, 248, .25)); }
  .brand b { white-space: nowrap; font-size: 20px; font-weight: 800; background: linear-gradient(90deg, #fd3994, #6b2ff8); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .links { display: flex; gap: 4px; margin-inline-start: auto; }
  .links a { padding: 8px 10px; border-radius: 10px; color: var(--muted); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
  .links a:hover { color: var(--brand); background: var(--soft); }
  .links a.on { color: var(--brand); background: #efe9ff; }
  .langs { position: relative; }
  .langs > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line2); cursor: pointer; font-weight: 700; color: var(--ink2); }
  .langs > summary::-webkit-details-marker { display: none; }
  .langs-menu { position: absolute; inset-inline-end: 0; top: 50px; min-width: 180px; max-height: 60vh; overflow-y: auto; padding: 6px; border-radius: 16px; background: #fff; box-shadow: var(--shadow2), 0 0 0 1px var(--line); }
  .langs-menu a { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; font-weight: 700; color: var(--ink2); }
  .langs-menu a:hover, .langs-menu a.on { background: #efe9ff; color: var(--brand); }
  .nav .btn { height: 44px; padding: 0 18px; font-size: 14.5px; }
  .nav-menu { position: relative; display: none; }
  .nav-menu > summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line2); cursor: pointer; color: var(--ink2); }
  .nav-menu > summary::-webkit-details-marker { display: none; }
  .nav-menu-list { position: absolute; inset-inline-end: 0; top: 50px; min-width: 220px; display: grid; padding: 6px; border-radius: 16px; background: #fff; box-shadow: var(--shadow2), 0 0 0 1px var(--line); }
  .nav-menu-list a { padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 700; color: var(--ink2); }
  .nav-menu-list a:hover, .nav-menu-list a.on { background: #efe9ff; color: var(--brand); }

  /* hero: the text, and the game's world with its couple */
  .hero { position: relative; overflow: hidden; padding: 64px 0 72px; background: linear-gradient(90deg, #ebe3fd 0%, #eee8fe 50%, #f4f0fe 100%); }
  .hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(253, 57, 148, .16), transparent 70%); pointer-events: none; }
  [dir="rtl"] .hero::before { inset: -20% auto auto -10%; }
  .hero .wrap { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
  .eyebrows { display: flex; flex-wrap: wrap; gap: 8px; }
  .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px rgba(45, 31, 133, .1); font-weight: 800; font-size: 14px; color: var(--ink2); }
  [dir="rtl"] .eyebrow { padding: 6px 6px 6px 14px; }
  .eyebrow img { width: 26px; height: 26px; object-fit: contain; }
  .eyebrow.adults { padding: 6px 14px; color: var(--pink); }
  .eyebrow.adults i { color: var(--pink); }
  .hero h1 { margin: 18px 0 14px; font: 800 clamp(40px, 5.4vw, 70px)/1.04 var(--display); letter-spacing: -.02em; color: var(--text); }
  [dir="rtl"] .hero h1 { line-height: 1.2; letter-spacing: 0; }
  .hero p { margin: 0 0 28px; max-width: 560px; color: var(--ink2); font-size: 18px; }
  .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
  .hero-feat { display: inline-flex; align-items: center; gap: 12px; margin: -8px 0 22px; padding: 8px 16px 8px 8px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-decoration: none; }
  [dir="rtl"] .hero-feat { padding: 8px 8px 8px 16px; }
  .hero-feat:hover { transform: translateY(-2px); }
  .hero-feat img { width: 46px; height: 46px; border-radius: 13px; }
  .hero-feat small { display: block; color: var(--muted); font-weight: 700; font-size: 12px; } .hero-feat b { font-size: 16px; }
  .hero-art { position: relative; margin: 0; aspect-ratio: 1.12; }
  .hero-frame { position: absolute; inset: 0 0 8% 6%; border-radius: 36px; background: center / cover no-repeat; box-shadow: 0 30px 60px -20px rgba(45, 31, 133, .5), 0 0 0 8px rgba(255, 255, 255, .7); }
  [dir="rtl"] .hero-frame { inset: 0 6% 8% 0; }
  .hero-couple { position: absolute; bottom: 0; inset-inline-start: 4%; width: 92%; height: auto; filter: drop-shadow(0 22px 34px rgba(45, 31, 133, .45)); }
  .hero-bubble { position: absolute; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: #fff; box-shadow: var(--shadow2); font-size: 24px; animation: float 4s ease-in-out infinite; }
  .hero-bubble.b1 { top: 8%; inset-inline-start: -2%; color: var(--pink); }
  .hero-bubble.b2 { top: 36%; inset-inline-end: -3%; color: var(--brand); animation-delay: -1.3s; }
  .hero-bubble.b3 { bottom: 20%; inset-inline-start: -4%; color: #d5157c; animation-delay: -2.6s; }
  .hero-bottle { position: absolute; top: 4%; inset-inline-end: 10%; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: var(--grad); color: #fff; font-size: 28px; box-shadow: 0 14px 30px rgba(107, 47, 248, .45); animation: spin 9s linear infinite; }
  @keyframes float { 50% { transform: translateY(-12px); } }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* sections */
  section.block { padding: 72px 0; }
  .head { text-align: center; margin-bottom: 36px; }
  .head.start { text-align: start; margin-bottom: 18px; }
  .head small { display: inline-block; padding: 4px 14px; border-radius: 999px; background: #fde7f1; color: var(--pink); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
  .head h2 { margin: 12px 0 0; font: 800 clamp(30px, 3.6vw, 46px)/1.12 var(--display); letter-spacing: -.01em; color: var(--text); }
  [dir="rtl"] .head h2 { letter-spacing: 0; line-height: 1.3; }
  .head .lead, .lead { max-width: 720px; margin: 14px auto 0; color: var(--ink2); font-size: 17px; }
  .head.start .lead, .ev-text .lead { margin-inline: 0; }

  /* numbers */
  .kpis { margin-top: -38px; position: relative; z-index: 2; }
  .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); transition: transform .15s; }
  .kpi:hover { transform: translateY(-3px); }
  .kpi > i { grid-row: span 2; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--grad2); color: #fff; font-size: 21px; box-shadow: 0 10px 22px -8px rgba(107, 47, 248, .6); }
  .kpi b { font: 800 28px/1.1 var(--display); color: var(--text); }
  .kpi span { color: var(--muted); font-weight: 700; font-size: 14px; }

  /* games */
  .games { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
  .game { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
  .game:hover { transform: translateY(-4px); box-shadow: var(--shadow2); }
  .game-cover { position: relative; display: block; aspect-ratio: 16 / 9; background: center / cover no-repeat; }
  .game-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7, 6, 80, .45)); }
  .game-logo { position: absolute; z-index: 1; inset-inline-start: 18px; bottom: -30px; width: 76px; height: 76px; border-radius: 22px; border: 4px solid #fff; background: #fff; object-fit: contain; box-shadow: var(--shadow); }
  .game-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 42px 22px 22px; }
  .game h3 { margin: 0; font: 800 24px/1.2 var(--display); } .game h3 a { text-decoration: none; }
  .game p { margin: 0; color: var(--muted); }
  .plats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--brand); }
  .plats small { color: var(--muted); font-weight: 700; }
  .game-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
  .game-cta .btn { height: 46px; padding: 0 16px; font-size: 14.5px; }
  .games.one { grid-template-columns: 1fr; }
  .games.one .game { display: grid; grid-template-columns: 1.2fr 1fr; }
  .games.one .game-cover { aspect-ratio: auto; min-height: 340px; }
  .games.one .game-logo { top: 22px; bottom: auto; }
  .games.one .game-body { justify-content: center; padding: 34px; }
  .games.one .game h3 { font-size: 34px; }
  .tag-soon { position: absolute; z-index: 1; top: 14px; inset-inline-end: 14px; padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--pink); font-weight: 800; font-size: 13px; }

  /* features */
  .feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
  .feat { padding: 24px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); transition: transform .2s; }
  .feat:hover { transform: translateY(-4px); }
  .feat i { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: var(--grad2); color: #fff; font-size: 22px; box-shadow: 0 10px 22px -8px rgba(107, 47, 248, .6); }
  .feat h4 { margin: 16px 0 6px; font-size: 19px; font-weight: 800; }
  .feat p { margin: 0; color: var(--muted); }

  /* how a table works */
  .steps-block { background: #fff; }
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: s; }
  .steps li { position: relative; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 28px 20px 24px; border-radius: 22px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
  .steps i { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--pink); font-size: 26px; box-shadow: var(--shadow); }
  .steps b { font-size: 18px; } .steps small { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
  .step-n { position: absolute; top: 14px; inset-inline-start: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; }

  /* everywhere: the devices and the platforms */
  .everywhere { overflow: hidden; }
  .ev-grid { display: grid; grid-template-columns: .9fr 1.3fr; gap: 40px; align-items: center; margin-bottom: 40px; }
  .ev-text .btn { margin-top: 22px; }
  .devices { position: relative; height: 380px; }
  .dv { position: absolute; }
  .dv-screen { position: relative; overflow: hidden; background: #111; }
  .dv-screen img { width: 100%; height: 100%; object-fit: cover; }
  .dv-desk { inset-inline-start: 0; top: 0; width: 76%; }
  .dv-desk .dv-screen { aspect-ratio: 16 / 10; border-radius: 16px; border: 10px solid #1d1648; box-shadow: var(--shadow2); }
  .dv-neck { display: block; width: 18%; height: 34px; margin: 0 auto; background: linear-gradient(180deg, #cfc8f0, #b6addf); }
  .dv-foot { display: block; width: 40%; height: 10px; margin: 0 auto; border-radius: 6px; background: #b6addf; }
  .dv-tab { inset-inline-end: 8%; bottom: 0; width: 34%; }
  .dv-tab .dv-screen { aspect-ratio: 4 / 3; border-radius: 18px; border: 9px solid #1d1648; box-shadow: var(--shadow2); }
  .dv-phone { inset-inline-end: 0; top: 18%; width: 17%; }
  .dv-phone .dv-screen { aspect-ratio: 9 / 18; border-radius: 22px; border: 7px solid #1d1648; box-shadow: var(--shadow2); }
  .marquee { overflow: hidden; padding: 6px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee + .marquee { margin-top: 10px; }
  .track { display: flex; gap: 12px; width: max-content; animation: slide var(--speed, 40s) linear infinite; }
  [dir="rtl"] .track { animation-direction: reverse; }
  .marquee.rev .track { animation-direction: reverse; }
  .marquee:hover .track { animation-play-state: paused; }
  .chip { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px rgba(45, 31, 133, .08); font-weight: 800; color: var(--ink2); white-space: nowrap; }
  .chip i { font-size: 20px; color: var(--brand); } .chip img { height: 26px; width: auto; }
  @keyframes slide { to { transform: translateX(-50%); } }
  [dir="rtl"] @keyframes slide { to { transform: translateX(50%); } }
  @media (prefers-reduced-motion: reduce) { .track, .hero-bubble, .hero-bottle { animation: none; } }

  /* VIP */
  .vip-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; padding: 40px; border-radius: 32px; color: #fff; background: radial-gradient(500px 300px at 100% 0%, rgba(253, 57, 148, .45), transparent 60%), linear-gradient(135deg, #2a1873 0%, #3b1aa8 55%, #2a5ff0 120%); box-shadow: var(--shadow2); }
  .vip-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-weight: 800; font-size: 13.5px; }
  .vip-badge i { color: #ffd36b; }
  .vip-main h2 { margin: 14px 0 10px; font: 800 clamp(30px, 3.4vw, 44px)/1.12 var(--display); }
  .vip-main > p { margin: 0 0 18px; color: rgba(255, 255, 255, .86); }
  .vip-perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .vip-perks li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .1); font-weight: 700; font-size: 14.5px; }
  .vip-perks i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: #fff; color: var(--brand); }
  .vip-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; align-content: center; }
  .vip-plan { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 20px 14px; border-radius: 20px; background: #fff; color: var(--text); box-shadow: 0 14px 30px rgba(7, 6, 80, .25); }
  .vip-plan.best { outline: 3px solid #ffd36b; }
  .vip-ribbon { position: absolute; top: -14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #ffd36b; color: #7a4a00; font-size: 13px; }
  .vip-plan-name { font-weight: 800; }
  .vip-price { font: 800 22px/1.2 var(--display); color: var(--brand); }
  .vip-per { color: var(--muted); font-weight: 700; font-size: 13px; }
  .vip-go { grid-column: 1 / -1; background: #fff; color: var(--brand); box-shadow: none; }

  /* Top 100 */
  .tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
  .top-card { padding: 26px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
  .top-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
  .top-card header b { font-size: 19px; } .top-card header small { margin-inline-start: auto; color: var(--muted); font-weight: 700; }
  .top-badge { padding: 4px 10px; border-radius: 10px; background: var(--grad); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .06em; }
  .podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; }
  .podium li { display: grid; justify-items: center; gap: 6px; padding: 14px 10px; border-radius: 20px; background: var(--soft); text-align: center; }
  .podium .p1 { order: 2; padding-bottom: 26px; background: linear-gradient(180deg, #fff3d6, #fff); box-shadow: inset 0 0 0 2px #ffd36b; }
  .podium .p2 { order: 1; } .podium .p3 { order: 3; }
  .pz-pic { width: 86px; height: 86px; display: grid; place-items: center; border-radius: 22px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
  .podium .p1 .pz-pic { width: 104px; height: 104px; }
  .pz-pic img { width: 100%; height: 100%; object-fit: contain; } .pz-pic em { font-style: normal; font-size: 40px; } .pz-pic i { font-size: 34px; color: var(--pink); }
  .podium b { font-size: 14.5px; line-height: 1.3; } .podium small { color: var(--muted); font-weight: 800; font-size: 12.5px; }
  .top-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; text-align: center; }
  .top-foot small { color: var(--muted); }

  /* distributor programme */
  .dist-band { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; padding: 40px; border-radius: 32px; background: var(--grad); color: #fff; box-shadow: 0 30px 60px -24px rgba(107, 47, 248, .6); }
  .dist-text h2 { margin: 14px 0 10px; font: 800 clamp(30px, 3.4vw, 44px)/1.12 var(--display); }
  .dist-text p { margin: 0 0 16px; color: rgba(255, 255, 255, .9); }
  .dist-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
  .dist-facts span { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-weight: 700; }
  .dist-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .dist-plan { display: grid; gap: 6px; justify-items: center; padding: 22px 12px; border-radius: 20px; background: #fff; color: var(--text); text-decoration: none; text-align: center; transition: transform .15s; }
  .dist-plan:hover { transform: translateY(-4px); }
  .dist-plan.best { outline: 3px solid #ffd36b; }
  .dist-plan b { font-size: 17px; } .dist-plan small { color: var(--muted); font-weight: 700; }
  .dist-disc { direction: ltr; font: 800 28px/1 var(--display); background: var(--grad2); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* screenshots */
  .gtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
  .gtabs button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line2); color: var(--ink2); font: 700 14px inherit; cursor: pointer; }
  .gtabs button img { width: 24px; height: 24px; border-radius: 7px; }
  .gtabs button:hover { color: var(--brand); }
  .gtabs button.on { background: var(--grad); color: #fff; box-shadow: none; }
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .gallery.phones { grid-template-columns: repeat(4, 1fr); margin-top: 14px; } .gallery.phones a { aspect-ratio: 9 / 16; } .gallery.phones img { object-position: top; }
  .gallery a { position: relative; display: block; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: var(--shadow); aspect-ratio: 16 / 10; }
  .gallery a[hidden] { display: none; }
  .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
  .gallery a:hover img { transform: scale(1.04); }
  .g-tag { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-weight: 800; font-size: 12.5px; }
  [dir="rtl"] .g-tag { padding: 4px 4px 4px 10px; }
  .g-tag img { width: 22px; height: 22px; border-radius: 6px; }
  .gallery a > i { position: absolute; bottom: 12px; inset-inline-end: 12px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--brand); opacity: 0; transition: opacity .2s; }
  .gallery a:hover > i { opacity: 1; }
  .lightbox { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 24px; background: rgba(7, 6, 80, .82); cursor: zoom-out; }
  .lightbox.open { display: grid; }
  .lightbox img { max-width: min(1400px, 100%); max-height: 92vh; border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }

  /* footer */
  footer.site-foot { margin-top: 30px; padding: 54px 0 26px; background: #fff; box-shadow: 0 -1px 0 var(--line); }
  .foot { display: grid; grid-template-columns: 1.4fr repeat(var(--fcols, 3), 1fr) 1.3fr; gap: 28px; }
  .foot-brand p { margin: 14px 0 0; color: var(--muted); font-size: 14.5px; }
  .fcol summary { list-style: none; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 800; color: var(--text); cursor: default; }
  .fcol summary::-webkit-details-marker { display: none; }
  .fcol summary > i:first-child { color: var(--pink); }
  .fcol-arrow { display: none; margin-inline-start: auto; color: var(--muted); }
  .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .foot ul a { color: var(--muted); text-decoration: none; font-weight: 600; }
  .foot ul a:hover { color: var(--brand); }
  .foot-connect h5 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
  .foot-connect > p { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; }
  .foot-btns { display: flex; flex-wrap: wrap; gap: 8px; }
  .foot-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--grad); color: #fff; font-weight: 800; text-decoration: none; }
  .foot-btn.alt { background: #fff; color: var(--ink2); box-shadow: inset 0 0 0 1.5px var(--line2); }
  .foot-btn.alt:hover { color: var(--brand); }
  footer.site-foot > .wrap > .social { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
  .copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

  /* pages built in the panel (Site → Pages) */
  .pg-hero { position: relative; overflow: hidden; padding: 80px 0 70px; background: linear-gradient(90deg, #ebe3fd 0%, #eee8fe 50%, #f4f0fe 100%); text-align: center; }
  .pg-hero .hero-bg { position: absolute; inset: 0; background: center / cover no-repeat; opacity: .22; }
  .pg-hero .wrap { position: relative; max-width: 860px; }
  .pg-hero h1 { margin: 16px 0 12px; font: 800 clamp(38px, 5vw, 64px)/1.08 var(--display); letter-spacing: -.02em; }
  [dir="rtl"] .pg-hero h1 { line-height: 1.25; letter-spacing: 0; }
  .pg-hero p { margin: 0 auto 26px; max-width: 680px; color: var(--ink2); font-size: 18px; }
  .pg-hero .hero-cta { justify-content: center; }
  .pg-404 h1 { font-size: 64px; }
  .pg-sec + .pg-sec { padding-top: 24px; }
  .pg-narrow { max-width: 860px; }
  .pg-kicker { display: inline-block; padding: 4px 14px; border-radius: 999px; background: #fde7f1; color: var(--pink); font-weight: 800; font-size: 13px; text-transform: uppercase; }
  .pg-prose p { margin: 0 0 12px; color: var(--ink2); }
  .pg-center { text-align: center; }
  .pg-empty { padding: 30px; border-radius: 20px; background: #fff; color: var(--muted); text-align: center; box-shadow: var(--shadow); }
  .pg-draft { position: sticky; top: 72px; z-index: 40; padding: 10px; background: #fff7e0; color: #8a5a00; text-align: center; font-weight: 800; }
  .pg-kpis { margin-bottom: 28px; }
  .pg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .pg-split.img-first .pg-split-i { order: -1; }
  .pg-split h2 { margin: 12px 0 14px; font: 800 clamp(28px, 3.2vw, 40px)/1.15 var(--display); }
  .pg-split-i { margin: 0; } .pg-split-i img { width: 100%; border-radius: 26px; box-shadow: var(--shadow2); }
  .pg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
  .pg-card { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--shadow); transition: transform .2s; }
  .pg-card:hover { transform: translateY(-4px); }
  .pg-card-i { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
  .pg-card-i img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
  .pg-card:hover .pg-card-i img { transform: scale(1.05); }
  .pg-card-i i { position: absolute; bottom: 10px; inset-inline-end: 10px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #fff; color: var(--brand); }
  .pg-card-t { padding: 18px 20px; } .pg-card-t h3 { margin: 0 0 6px; font-size: 19px; } .pg-card-t p { margin: 0; color: var(--muted); }
  .pg-faq { display: grid; gap: 10px; }
  .pg-faq details { border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
  .pg-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; font-weight: 800; cursor: pointer; }
  .pg-faq summary::-webkit-details-marker { display: none; }
  .pg-faq summary i { color: var(--brand); transition: transform .2s; }
  .pg-faq details[open] summary i { transform: rotate(180deg); }
  .pg-faq .pg-prose { padding: 0 20px 16px; }
  .pg-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 40px; border-radius: 30px; background: var(--grad); color: #fff; box-shadow: 0 30px 60px -24px rgba(107, 47, 248, .6); }
  .pg-cta h2 { margin: 0 0 6px; font: 800 clamp(26px, 3vw, 38px)/1.15 var(--display); }
  .pg-cta p { margin: 0; color: rgba(255, 255, 255, .9); }
  .pg-cta .btn-main { background: #fff; color: var(--brand); box-shadow: none; }
  .pg-box { padding: 30px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); }
  .pg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .pg-f { display: grid; gap: 6px; } .pg-f.wide { grid-column: 1 / -1; }
  .pg-f label { font-weight: 800; font-size: 13.5px; color: var(--ink2); }
  .pg-f input, .pg-f select, .pg-f textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 0; border-radius: 14px; background: #fff; color: var(--text); font: inherit; box-shadow: inset 0 0 0 1.5px var(--line2); outline: none; }
  .pg-f textarea { min-height: 160px; resize: vertical; }
  .pg-f input:focus, .pg-f select:focus, .pg-f textarea:focus { box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px rgba(107, 47, 248, .12); }
  .pg-f.bad input, .pg-f.bad select, .pg-f.bad textarea { box-shadow: inset 0 0 0 2px #e5484d; }
  .pg-err { color: #c62828; font-weight: 700; font-size: 12.5px; }
  .pg-agree { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 14px; } .pg-agree input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--brand); }
  .pg-agree.bad span { color: #c62828; }
  .pg-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
  .pg-submit { justify-self: start; }
  .pg-alert { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; padding: 14px 16px; border-radius: 16px; font-weight: 700; background: #effcf3; color: #15803d; }
  .pg-alert i { font-size: 20px; } .pg-alert.err { background: #fff0f3; color: #b4233c; } .pg-alert.warn { background: #fff7e0; color: #8a5a00; }

  /* the distributor programme's page (Site → Pages, section "Distributor plans") */
  .dp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; align-items: stretch; }
  .dp-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 22px 22px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); }
  .dp-plan.best { box-shadow: 0 0 0 3px var(--brand), var(--shadow2); }
  .dp-best { position: absolute; top: -13px; inset-inline-end: 18px; padding: 4px 12px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: 12.5px; }
  .dp-plan h3 { margin: 0; font: 800 24px/1.2 var(--display); } .dp-plan > p { margin: 0; color: var(--muted); min-height: 2.8em; }
  .dp-price { font: 800 34px/1 var(--display); color: var(--text); } .dp-price small { display: block; margin-top: 6px; font: 700 13px "Cairo", sans-serif; color: var(--muted); }
  .dp-disc { align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: #fde7f1; color: var(--pink); font-weight: 800; }
  .dp-plan ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; }
  .dp-plan li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--ink2); font-size: 14.5px; }
  .dp-plan li i { margin-top: 3px; color: #16a34a; } .dp-plan li.off { color: #a3a1c2; } .dp-plan li.off i { color: #c4c1e0; }
  .dp-plan .btn { margin-top: auto; }
  .dp-plan > p.dp-in { margin-top: auto; min-height: 0; display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--soft); color: var(--ink2); font-weight: 700; font-size: 14px; }
  .dp-in i { margin-top: 3px; color: var(--brand); }
  .dp-plan.custom { background: var(--soft); box-shadow: inset 0 0 0 2px var(--line2); }
  .dp-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; counter-reset: d; }
  .dp-steps li { counter-increment: d; padding: 18px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
  .dp-steps li::before { content: counter(d); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; }
  .dp-steps b { display: block; margin-bottom: 4px; } .dp-steps small { color: var(--muted); }
  .dp-note { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0; padding: 16px 18px; border-radius: 18px; background: #fff7e0; color: #7a4a00; font-weight: 600; }
  .dp-note i { margin-top: 3px; }
  .dp-compare { overflow-x: auto; margin-top: 28px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
  .dp-compare table { width: 100%; min-width: 620px; border-collapse: collapse; }
  .dp-compare th, .dp-compare td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line); }
  .dp-compare th:first-child, .dp-compare td:first-child { text-align: start; font-weight: 700; color: var(--ink2); }
  .dp-compare thead th { background: var(--soft); font-weight: 800; }
  .dp-compare .yes { color: #16a34a; } .dp-compare .no { color: #c4c1e0; }
  .dp-terms { margin-top: 24px; padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
  .dp-terms h3 { margin: 0 0 10px; font-size: 18px; } .dp-terms p { margin: 0 0 8px; color: var(--ink2); }
  .dp-redeem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 24px; border-radius: 22px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
  .dp-redeem b { display: block; font-size: 18px; } .dp-redeem small { color: var(--muted); }

  /* narrow screens */
  @media (max-width: 1100px) {
    .foot { grid-template-columns: 1fr 1fr; }
    .foot-brand, .foot-connect { grid-column: 1 / -1; }
  }
  @media (max-width: 1360px) {
    .links { display: none; }
    .nav-menu { display: block; margin-inline-start: auto; }
  }
  @media (max-width: 960px) {
    .hero .wrap, .ev-grid, .vip-card, .dist-band, .pg-split, .games.one .game { grid-template-columns: 1fr; }
    .hero { padding: 36px 0 70px; } .hero-art { max-width: 560px; margin-inline: auto; width: 100%; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .devices { height: 300px; }
    .vip-card, .dist-band { padding: 28px 22px; }
  }
  @media (max-width: 720px) {
    .foot { grid-template-columns: 1fr; gap: 10px; }
    .fcol summary { cursor: pointer; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .fcol-arrow { display: inline; }
    .fcol ul { padding: 10px 0; }
    footer.site-foot > .wrap > .social { flex-direction: column; align-items: flex-start; }
    .nav .btn span { display: none; } .nav .btn { width: 44px; padding: 0; }
  }
  @media (max-width: 560px) {
    .nav .wrap { gap: 8px; }
    .brand b { font-size: 16px; }
    .brand img { width: 38px; height: 38px; }
    .langs > summary { padding: 0 10px; font-size: 0; gap: 0; } .langs > summary i { font-size: 16px; }
    section.block { padding: 52px 0; }
    .kpi { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 6px; padding: 16px 10px; }
    .kpi > i { grid-row: auto; }
    .gallery { grid-template-columns: 1fr; } .gallery.phones { grid-template-columns: repeat(2, 1fr); }
    .vip-perks, .dist-mini { grid-template-columns: 1fr; }
    .podium { grid-template-columns: 1fr; } .podium li { order: 0 !important; }
    .devices { height: 230px; }
    .pg-form { grid-template-columns: 1fr; }
    .hero-bubble { width: 46px; height: 46px; font-size: 19px; }
    .btn { height: 48px; padding: 0 18px; }
  }
  @media (max-width: 380px) { .brand b { display: none; } }