/*
  Zadnass LLC — the company site's one stylesheet.

  The colours are the app's: Srand (ظامت) orange, Orbig (خربك) green, the interface blue, on the
  warm paper of the privacy and terms pages so the four pages read as one site. Dark mode follows
  the phone. No web fonts on purpose: the site calls no one (see privacy.html), and the system
  fonts already carry Arabic well on Android, iOS and Windows.

  Arabic is the mirror of French and English (the app's rule): everything is written with logical
  properties (inline-start/end), so dir="rtl" flips the layout and nothing has to be redone per
  language. Only drawings with a direction (the tilted boards) are mirrored by hand.
*/
:root {
  --bg: #F6F2EC; --bg-2: #EFE8DE; --card: #FFFFFF; --ink: #1F2430; --muted: #5E6573;
  --line: #E5DED4; --srand: #E4602A; --srand-ink: #B9441A; --orbig: #1F9D57; --blue: #2F6FE0;
  --hero-a: #FBE3D3; --hero-b: #DDEFE6; --shadow: 0 18px 40px -18px rgba(31, 36, 48, .35);
  --fill: #FFE7A3;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121419; --bg-2: #171A21; --card: #1C2029; --ink: #ECE8E1; --muted: #A4A9B4;
    --line: #2B303B; --srand: #F27A45; --srand-ink: #F59A70; --orbig: #3CC47A; --blue: #6C9BFF;
    --hero-a: #3A2318; --hero-b: #15322A; --shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
    --fill: #6B5413;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.7 "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans Arabic", "Noto Sans",
        Tahoma, sans-serif;
  overflow-x: hidden;
}
html[lang="ar"] body { line-height: 1.85; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 28px; } }

/* Only one language's version of a picture or phrase is shown (Arabic logo vs Latin name). */
html[lang="ar"] [data-only="latin"], html:not([lang="ar"]) [data-only="ar"] { display: none !important; }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; min-height: 68px; padding-block: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; direction: ltr; }
.brand img { width: 36px; height: 36px; }
.brand b { font-size: 22px; letter-spacing: .2px; }
.main-nav { display: flex; gap: 4px 18px; flex-wrap: wrap; margin-inline-start: auto; }
.main-nav a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; padding: 4px 2px; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--ink); }
.langs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--card); }
.langs button {
  font: inherit; font-size: 13px; font-weight: 700; border: 0; background: none; color: var(--muted);
  padding: 3px 11px; border-radius: 999px; cursor: pointer; line-height: 1.6;
}
.langs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (max-width: 640px) {
  .main-nav { order: 3; width: 100%; margin-inline-start: 0; gap: 4px 16px; }
  .langs { margin-inline-start: auto; }
}

/* ------------------------------------------------------------------ buttons and badges */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700;
  border-radius: 999px; padding: 12px 22px; border: 1px solid transparent; font-size: 16px; line-height: 1.3;
}
.btn-primary { background: var(--srand); color: #fff; box-shadow: 0 10px 22px -12px var(--srand); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { border-color: var(--line); background: var(--card); }
.btn-ghost:hover { border-color: var(--ink); }
.store-badge {
  display: inline-flex; align-items: center; gap: 12px; background: #000; color: #fff;
  border-radius: 12px; padding: 8px 16px 8px 14px; text-decoration: none; direction: ltr; line-height: 1.15;
  border: 1px solid #3b3b3b;
}
.store-badge svg { width: 26px; height: 28px; flex: none; }
.store-badge small { display: block; font-size: 11px; letter-spacing: .3px; opacity: .85; }
.store-badge span { font-size: 18px; font-weight: 600; }
.store-badge[aria-disabled="true"] { cursor: default; }
.pill {
  display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
  background: var(--bg-2); color: var(--muted); border: 1px solid var(--line); line-height: 1.6; vertical-align: middle;
}
.pill-soon { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); border-color: transparent; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--hero-a), transparent 70%); z-index: -1;
}
.hero::after {
  content: ""; position: absolute; inset: auto auto -30% -15%; width: 60%; aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--hero-b), transparent 70%); z-index: -1;
}
html[dir="rtl"] .hero::before { inset: -20% auto auto -10%; }
html[dir="rtl"] .hero::after { inset: auto -15% -30% auto; }
.hero .wrap { display: grid; gap: 40px; padding-block: 56px 72px; align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1.05fr 1fr; padding-block: 88px 104px; } }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .6px; color: var(--srand-ink); text-transform: uppercase; margin: 0 0 12px; }
html[lang="ar"] .eyebrow { letter-spacing: 0; }
h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.12; margin: 0 0 18px; letter-spacing: -.5px; text-wrap: balance; }
h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
html[lang="ar"] h1 { line-height: 1.3; letter-spacing: 0; }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--muted); margin: 0 0 28px; max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.stage { position: relative; aspect-ratio: 1 / .9; max-width: 560px; width: 100%; justify-self: center; }
.stage .b1, .stage .b2 { position: absolute; filter: drop-shadow(0 22px 26px rgba(20, 16, 10, .35)); }
.stage .b1 { width: 70%; inset-block-start: 0; inset-inline-start: 0; transform: rotate(-6deg); }
.stage .b2 { width: 54%; inset-block-end: 0; inset-inline-end: 0; transform: rotate(7deg); }
html[dir="rtl"] .stage .b1 { transform: rotate(6deg); }
html[dir="rtl"] .stage .b2 { transform: rotate(-7deg); }
.stage .app {
  position: absolute; width: 26%; inset-block-end: 4%; inset-inline-start: 6%; border-radius: 23%;
  box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .5); border: 3px solid var(--card);
}

/* ------------------------------------------------------------------ sections */
section { scroll-margin-top: 90px; }
.section { padding-block: 72px; }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.section-head { max-width: 680px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.2; margin: 0 0 10px; }
.section-head p { color: var(--muted); margin: 0; font-size: 18px; }
.kicker { font-size: 14px; font-weight: 700; color: var(--srand-ink); margin: 0 0 8px; }

/* The company's games, one card each, plus the card that keeps a place for the next one. */
.titles { display: grid; gap: 24px; }
@media (min-width: 860px) { .titles { grid-template-columns: 1.5fr 1fr; } }
.title-card {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
a.title-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -22px rgba(31, 36, 48, .45); }
.title-card .cover {
  position: relative; height: 230px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--srand) 30%, var(--card)), color-mix(in srgb, var(--orbig) 22%, var(--card)));
}
.title-card .cover .board { position: absolute; width: 62%; inset-block-start: 18px; inset-inline-end: -4%; transform: rotate(-8deg); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35)); }
.title-card .cover .board2 { position: absolute; width: 40%; inset-block-start: 70px; inset-inline-end: 44%; transform: rotate(9deg); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35)); }
html[dir="rtl"] .title-card .cover .board { transform: rotate(8deg); }
html[dir="rtl"] .title-card .cover .board2 { transform: rotate(-9deg); }
.title-card .cover .icon {
  position: absolute; width: 104px; inset-block-end: 18px; inset-inline-start: 22px; border-radius: 26%;
  border: 3px solid var(--card); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .5);
}
.title-card .body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.title-card .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.title-card h3 { margin: 0; font-size: 28px; line-height: 1.2; }
.title-card p { margin: 0; color: var(--muted); }
.title-card .go { margin-top: auto; font-weight: 700; color: var(--srand-ink); }
.title-card .go::after { content: " →"; }
html[dir="rtl"] .title-card .go::after { content: " ←"; }
.title-card.next {
  background: transparent; box-shadow: none; border: 2px dashed var(--line); align-items: center;
  justify-content: center; text-align: center; padding: 40px 28px; gap: 12px;
}
.title-card.next img { width: 64px; opacity: .55; filter: grayscale(1); }
.title-card.next h3 { font-size: 22px; }
.title-card.next p { max-width: 22em; }

/* The Srand page's opening: its icon and name instead of the company's headline. */
.crumb { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.app-title { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.app-title img { width: 88px; border-radius: 26%; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .45); }
.app-title h1 { margin: 0; }
.tagline { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.4; margin: 0 0 12px; text-wrap: balance; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: 15px; }
.legal-links a { color: inherit; opacity: .8; }
.mail { font-weight: 700; direction: ltr; unicode-bidi: isolate; }

/* The app card */
.app-card {
  display: grid; gap: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 28px;
  padding: 24px; box-shadow: var(--shadow);
}
@media (min-width: 860px) { .app-card { grid-template-columns: 180px 1fr; padding: 36px; gap: 36px; } }
.app-card .icon { width: 132px; border-radius: 28%; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .45); }
@media (min-width: 860px) { .app-card .icon { width: 180px; } }
.app-card h3 { font-size: 30px; margin: 0 0 4px; }
.app-card .sub { color: var(--muted); margin: 0 0 18px; font-size: 18px; }
.modes { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
@media (min-width: 640px) { .modes { grid-template-columns: repeat(3, 1fr); } }
.modes li { border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; background: var(--bg); }
.modes b { display: block; font-size: 17px; margin-bottom: 2px; }
.modes li > span { color: var(--muted); font-size: 15px; line-height: 1.55; display: block; }
.modes .pill { font-size: 12px; margin-inline-start: 4px; }

/* The two games */
.games { display: grid; gap: 24px; }
@media (min-width: 860px) { .games { grid-template-columns: 1fr 1fr; } }
.game {
  background: var(--card); border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.game .board { padding: 28px 28px 8px; background: linear-gradient(180deg, var(--tint), transparent); }
.game .board img { width: min(100%, 380px); margin-inline: auto; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .3)); }
.game .body { padding: 20px 28px 28px; }
.game-srand { --tint: color-mix(in srgb, var(--srand) 18%, transparent); }
.game-orbig { --tint: color-mix(in srgb, var(--orbig) 18%, transparent); }
.game .name { height: 56px; margin: 0 0 12px; display: flex; align-items: center; }
.game .name img { height: 100%; width: auto; }
.game .name .typed { font-size: 34px; font-weight: 800; line-height: 1; }
.game-srand .typed { color: var(--srand); }
.game-orbig .typed { color: var(--orbig); }
.game p { margin: 0 0 16px; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }

/* Values */
.values { display: grid; gap: 16px; }
@media (min-width: 640px) { .values { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .values { grid-template-columns: repeat(4, 1fr); } }
.value { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px; }
.value .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 14px; background: var(--bg-2); }
.value .ic svg { width: 24px; height: 24px; }
.value h3 { margin: 0 0 6px; font-size: 18px; }
.value p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; }

/* Company */
.company { display: grid; gap: 28px; align-items: start; }
@media (min-width: 860px) { .company { grid-template-columns: 1.2fr 1fr; gap: 56px; } }
.company p { margin: 0 0 14px; }
.facts-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 8px 22px; }
.facts-card dl { margin: 0; }
.facts-card div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts-card div:last-child { border-bottom: 0; }
.facts-card dt { color: var(--muted); }
.facts-card dd { margin: 0; font-weight: 700; text-align: end; }

/* Call to action band */
.band { background: var(--ink); color: var(--bg); border-radius: 28px; padding: 36px 28px; display: grid; gap: 20px; align-items: center; }
@media (min-width: 860px) { .band { grid-template-columns: 1fr auto; padding: 44px 48px; } }
.band h2 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 32px); line-height: 1.25; }
.band p { margin: 0; opacity: .8; }
.band .btn-ghost { background: transparent; border-color: color-mix(in srgb, var(--bg) 40%, transparent); color: var(--bg); }

/* ------------------------------------------------------------------ support page */
.page-head { padding-block: 56px 24px; }
.page-head h1 { font-size: clamp(32px, 4.6vw, 48px); }
.support-grid { display: grid; gap: 24px; padding-bottom: 72px; }
@media (min-width: 900px) { .support-grid { grid-template-columns: 1fr 340px; align-items: start; } }
.faq { display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 0 20px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: 16px; color: var(--muted); }
.faq details > div p { margin: 0 0 8px; }
.faq ol, .faq ul, .plain ol { margin: 6px 0 12px; padding-inline-start: 22px; }
.plain { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 20px; color: var(--muted); }
.plain p { margin: 0 0 8px; }
.plain p:last-child { margin: 0; }
.contact-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px; position: sticky; top: 96px; }
.contact-card h2 { font-size: 20px; margin: 0 0 6px; }
.contact-card p { color: var(--muted); margin: 0 0 16px; font-size: 15.5px; }
.contact-card .mail { font-weight: 700; word-break: break-all; direction: ltr; display: inline-block; }
.contact-card hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.h-sub { font-size: 22px; margin: 36px 0 14px; }
.fill { background: var(--fill); padding: 0 6px; border-radius: 6px; color: var(--ink); }

/* ------------------------------------------------------------------ footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 36px 44px; color: var(--muted); font-size: 15px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer .copy { direction: ltr; }