@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/DMSans-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/DMSans-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('assets/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('assets/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  --color-brand: #102846;
  --color-brand-deep: #0c203b;
  --color-accent: #e8b750;
  --color-accent-hover: #f2cd80;
  --color-accent-ink: #8b5d10;
  --color-surface: #ffffff;
  --color-surface-soft: #f3f6f8;
  --color-royal: #2857a3;
  --color-sky: #eaf2fb;
  --color-gold-soft: #fff4d9;
  --color-text: #142b45;
  --color-muted: #4c5962;
  --color-border: #ccd6df;
  --color-border-dark: #52647a;
  --color-control-border: #52647a;
  --color-text-inverse: #ffffff;
  --color-muted-inverse: #d5e0eb;
  --font-body: 'DM Sans', Arial, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-control: 6px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
}
html[lang='ar'] { --font-body: 'IBM Plex Sans Arabic', Tahoma, sans-serif; }
[lang='ar'] { font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif; letter-spacing: 0; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.15; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 4.6vw, 4rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.625rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.02em; }
html[lang='ar'] :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.45; }
p + p { margin-block-start: var(--space-4); }
a { color: inherit; text-underline-offset: .22em; }
a, button, summary { touch-action: manipulation; }
a, summary { -webkit-tap-highlight-color: transparent; }
a:active { text-decoration-thickness: 2px; }
summary:active { background: var(--color-surface-soft); }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--color-surface);
}
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--color-accent); color: var(--color-brand-deep); }
.shell { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: var(--space-24); }
.section-heading { max-width: 720px; margin-block-end: var(--space-12); }
.section-heading p { margin-block-start: var(--space-4); color: var(--color-muted); }
.lead { font-size: 1.1875rem; line-height: 1.7; }
.section-label { color: var(--color-accent-ink); font-size: .875rem; font-weight: 700; margin-block-end: var(--space-3); }
.skip-link {
  position: absolute;
  inset-block-start: -120px;
  inset-inline-start: 16px;
  z-index: 100;
  padding: 12px 20px;
  color: var(--color-text);
  background: var(--color-surface);
}
.skip-link:focus { inset-block-start: 12px; }
.site-header { position: relative; z-index: 20; background: var(--color-brand); color: var(--color-text-inverse); border-bottom: 1px solid var(--color-border-dark); }
.header-inner { min-height: 96px; display: flex; align-items: center; gap: var(--space-6); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; min-width: 0; min-height: 44px; }
.brand img { width: 40px; height: 52px; object-fit: contain; flex: none; }
.brand-name strong { display: block; font-size: .9375rem; line-height: 1.35; }
.brand-compact { display: none; }
.brand-name small { display: block; color: var(--color-muted-inverse); font-size: .875rem; margin-block-start: 3px; }
.desktop-nav { display: flex; align-items: center; gap: var(--space-6); margin-inline-start: auto; }
.desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: .9375rem; white-space: nowrap; }
.desktop-nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; }
.language-switch { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--color-border-dark); border-radius: 999px; font-size: .8125rem; font-weight: 700; flex: none; }
.language-switch a, .language-switch > span { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 40px; padding-inline: var(--space-2); border-radius: 999px; text-decoration: none; }
.language-switch > span { background: var(--color-surface); color: var(--color-brand); }
.language-switch a { color: var(--color-text-inverse); }
.site-header a:focus-visible, .site-header summary:focus-visible { outline-color: var(--color-accent); box-shadow: 0 0 0 6px var(--color-brand); }
.mobile-menu { display: none; }
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-brand-deep);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  transition: background-color 140ms, border-color 140ms;
}
.button-secondary { color: var(--color-brand); background: var(--color-surface); border-color: var(--color-control-border); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.button:active { background: var(--color-accent-hover); }
.button-secondary:active { background: var(--color-surface-soft); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.site-footer { background: var(--color-brand-deep); color: var(--color-text-inverse); padding-block: var(--space-16) var(--space-6); }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-16); padding-block-end: var(--space-12); }
.footer-grid h2 { font-size: 1.75rem; }
.footer-grid p { max-width: 460px; color: var(--color-muted-inverse); margin-block-start: var(--space-4); }
.footer-links { display: flex; flex-wrap: wrap; align-content: start; gap: var(--space-2) var(--space-6); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom { border-top: 1px solid var(--color-border-dark); padding-block-start: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); font-size: .875rem; color: var(--color-muted-inverse); }
.footer-bottom > :first-child { margin-inline-end: auto; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a:focus-visible { outline-color: var(--color-accent); box-shadow: 0 0 0 6px var(--color-brand-deep); }
.breadcrumbs { display: flex; gap: var(--space-3); flex-wrap: wrap; color: var(--color-muted); font-size: .9375rem; margin-block-end: var(--space-6); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.page-intro { padding-block: var(--space-16) var(--space-12); background: var(--color-surface-soft); }
.page-intro p { margin-block-start: var(--space-4); color: var(--color-muted); }
.app-hero { background: var(--color-surface-soft); padding-block: var(--space-20); }
.app-hero-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(180px, .65fr); gap: var(--space-16); align-items: center; }
.app-hero h1 { max-width: 700px; }
.app-hero .lead { max-width: 640px; margin-block: var(--space-6); }
.app-hero-visual { min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-6); }
.app-icon { width: 110px; height: 110px; object-fit: contain; flex: none; border-radius: 23%; }
.app-hero-screen { min-width: 0; width: min(100%, 200px); border: 1px solid var(--color-border); border-radius: 20px; box-shadow: 0 16px 40px rgba(16, 40, 70, .16); }
.app-summary { max-width: 760px; }
.app-summary p { margin-block-start: var(--space-4); color: var(--color-muted); }
.app-summary .section-label { margin-block-start: 0; color: var(--color-accent-ink); }
.app-summary .actions { margin-block-start: var(--space-6); }
.app-summary .store-note { font-size: .875rem; margin-block-start: var(--space-3); }
.store-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-block: var(--space-6); }
.store-badges a { display: inline-flex; align-items: center; min-height: 65px; }
.store-badges img { display: block; height: auto; }
.store-badges a:first-child img { width: 150px; }
.store-badges a:last-child img { width: 169px; }
.app-screens { padding-block: var(--space-16); background: var(--color-sky); }
.screenshot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); }
.screenshot-grid figure { min-width: 0; }
.screenshot-grid img { width: min(100%, 260px); margin-inline: auto; border-radius: 20px; border: 1px solid var(--color-control-border); }
.screenshot-grid figcaption { max-width: 300px; margin: var(--space-6) auto 0; }
.screenshot-grid strong { display: block; font-size: 1.125rem; }
.screenshot-grid p { margin-block-start: var(--space-2); color: var(--color-muted); }
.preview-credit { margin-block-start: var(--space-8); font-size: .875rem; color: var(--color-muted); }
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); padding: 0; margin-block: var(--space-12); list-style: none; }
.feature-list > * { border-block-start: 3px solid var(--color-accent); padding-block-start: var(--space-6); }
.feature-list p { margin-block-start: var(--space-3); color: var(--color-muted); }
.app-download { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-8); padding: var(--space-8); margin-block-end: var(--space-8); background: var(--color-sky); }
.app-download h2 { font-size: 1.5rem; }
.app-download p { margin-block-start: var(--space-2); color: var(--color-muted); }
.app-download .store-badges { margin: 0; }
.support-panel { padding: var(--space-8); background: var(--color-surface-soft); border-inline-start: 4px solid var(--color-brand); }
.support-heading { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.support-heading img { width: 96px; height: 96px; border-radius: 50%; }
.support-panel h2 { font-size: 1.5rem; }
.support-panel p { margin-block: var(--space-4); max-width: 760px; }
.support-panel a { overflow-wrap: anywhere; }
.policy-layout { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: var(--space-16); align-items: start; padding-block: var(--space-16) var(--space-20); }
.policy-toc { border-inline-start: 3px solid var(--color-accent); padding-inline-start: var(--space-6); }
.policy-toc h2 { font-size: 1.125rem; }
.policy-toc ol, .policy-toc ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.policy-toc a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }
.policy-content { min-width: 0; }
.policy-content > p { font-size: 1.125rem; }
.policy-section { padding-block: var(--space-8); border-bottom: 1px solid var(--color-border); scroll-margin-top: var(--space-8); }
.policy-section h2 { font-size: 1.5rem; margin-block-end: var(--space-4); }
.policy-section p, .policy-section li { color: var(--color-muted); }
.policy-section li + li { margin-block-start: var(--space-2); }
.policy-section a { overflow-wrap: anywhere; color: var(--color-text); }
.policy-section a[href^='mailto:'] { direction: ltr; unicode-bidi: isolate; }
.policy-content > .text-link { margin-block-start: var(--space-8); }
.language-page { min-height: 100svh; display: grid; place-items: center; padding: var(--space-6); background: var(--color-surface-soft); }
.language-entry { width: min(600px, 100%); text-align: center; }
.language-entry img { width: 88px; margin: 0 auto var(--space-8); }
.language-entry h1 { font-size: 2rem; }
.language-entry h1 + h2 { margin-block-start: var(--space-4); }
.language-entry p { color: var(--color-muted); margin-block: var(--space-6); }
.language-entry .actions { justify-content: center; }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--color-accent-ink); }
  .site-header a:hover, .site-footer a:hover { color: var(--color-accent); }
  .button:hover { color: var(--color-brand-deep); background: var(--color-accent-hover); }
  .button-secondary:hover { color: var(--color-brand); background: var(--color-surface-soft); border-color: var(--color-brand); }
  summary:hover { color: var(--color-accent-ink); }
}
@media (max-width: 1100px) {
  .header-inner { gap: var(--space-4); }
  .desktop-nav { gap: var(--space-4); }
  .brand-name strong { max-width: 175px; }
}
@media (max-width: 980px) {
  .shell { width: calc(100% - 64px); }
  .header-inner { min-height: 88px; }
  .desktop-nav { display: none; }
  .language-switch { margin-inline-start: auto; }
  .mobile-menu { display: block; }
  .mobile-menu > summary { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; font-size: .9375rem; font-weight: 700; border: 1px solid var(--color-muted-inverse); border-radius: var(--radius-control); cursor: pointer; list-style: none; }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .mobile-menu > summary::after { content: '+'; margin-inline-start: 12px; }
  .mobile-menu[open] > summary::after { content: '−'; }
  .mobile-nav { position: absolute; inset-inline: 32px; inset-block-start: calc(100% - 1px); display: grid; gap: 4px; padding: 16px; border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-control) var(--radius-control); background: var(--color-surface); color: var(--color-text); }
  .mobile-nav a { min-height: 44px; display: flex; align-items: center; padding: 8px 12px; text-decoration: none; }
  .mobile-nav a[aria-current='page'] { text-decoration: underline; }
  .policy-layout { grid-template-columns: 190px minmax(0, 1fr); gap: var(--space-8); }
  .app-hero-grid { gap: var(--space-8); }
  .app-icon { width: 80px; height: 80px; }
}
@media (max-width: 600px) {
  .shell { width: calc(100% - 40px); }
  .section { padding-block: var(--space-16); }
  .section-heading { margin-block-end: var(--space-8); }
  .header-inner { min-height: 76px; gap: var(--space-2); padding-block: var(--space-3); }
  .brand { flex: 1; gap: var(--space-2); }
  .brand-name strong { font-size: .875rem; }
  .brand-full, .brand-name small { display: none; }
  .brand-compact { display: inline; }
  .brand img { width: 32px; height: 42px; }
  .language-switch { margin-inline-start: auto; }
  .language-switch a, .language-switch > span { min-height: 44px; }
  .mobile-nav { inset-inline: 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); padding-block-end: var(--space-8); }
  .footer-bottom { align-items: start; gap: var(--space-2) var(--space-6); }
  .footer-bottom > :first-child { flex-basis: 100%; }
  .app-hero { padding-block: var(--space-12); }
  .app-hero-grid { grid-template-columns: 1fr; }
  .app-hero-visual { grid-row: 1; justify-content: center; }
  .app-hero-screen { min-width: 0; width: 150px; }
  .feature-list { grid-template-columns: 1fr; margin-block: var(--space-8); }
  .screenshot-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .screenshot-grid figcaption { margin: var(--space-6) auto 0; }
  .app-download { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-8); padding: var(--space-8); margin-block-end: var(--space-8); background: var(--color-sky); }
.app-download h2 { font-size: 1.5rem; }
.app-download p { margin-block-start: var(--space-2); color: var(--color-muted); }
.app-download .store-badges { margin: 0; }
.support-panel { padding: var(--space-6); }
  .policy-layout { grid-template-columns: 1fr; padding-block: var(--space-12); }
  .policy-toc { padding-inline-start: var(--space-4); }
  .page-intro { padding-block: var(--space-8); }
  .policy-section h2 { font-size: 1.375rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.action-icon { width: 20px; height: 20px; flex: none; }
.social-icon { width: 20px; height: 20px; flex: none; vertical-align: middle; margin-inline-end: .4em; }
html[dir='rtl'] .direction-icon { transform: scaleX(-1); }
.breadcrumbs a, .related-stories a, .app-hero .button, .app-hero .text-link, .support-panel .button, .support-panel .text-link, .policy-content > .text-link, .story-body > .text-link { gap: var(--space-2); }