/* SEO landing pages. Tokens mirror base.css. Logical properties only (RTL). */
:root {
  --paper: #FBFAFF; --ink: #1B1530; --ink-soft: #5B5475; --line: #E2DDF0; --on-vivid: #1B1530;
  --sun: #FFC93C; --rose: #FF8FB1; --volt: #2C5BFF; --mint: #3CCFB4; --magenta: #FF2E88;
  --display: "Bricolage Grotesque", "Readex Pro", system-ui, sans-serif;
  --body: "Readex Pro", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #17122A; --ink: #F4F1FF; --ink-soft: #ADA5C9; --line: #312A52; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); }
a { color: inherit; text-decoration-color: var(--magenta); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 0.5em; }
/* Bricolage has no Arabic glyphs: Readex Pro carries the display role in Arabic. */
:root:lang(ar) { --display: "Readex Pro", system-ui, sans-serif; }
:lang(ar) :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.3; }
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 4vw, 1.95rem); margin-block-start: 1.6em; }
h3 { font-size: 1.25rem; margin-block-start: 1.4em; }
p, ul, ol { margin: 0 0 1em; }
li { margin-block-end: 0.35em; }
main, .bar, .foot { max-inline-size: 1080px; margin-inline: auto; padding-inline: 20px; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px; }
.logo { font: 800 1.4rem/1 var(--display); letter-spacing: -0.03em; text-decoration: none; }
.btn { display: inline-block; background: var(--magenta); color: var(--on-vivid); font: 600 1.0625rem/1 var(--body);
  padding: 16px 24px; border-radius: 999px; text-decoration: none; }
.btn:hover { background: #ff4b9a; }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; }
.btn-small { padding: 10px 16px; font-size: 0.875rem; }
.sub { color: var(--ink-soft); font-size: 0.875rem; margin-block-start: 10px; }

.hero { display: grid; gap: 32px; align-items: center; padding-block: 24px 40px; }
.lead { font-size: 1.25rem; color: var(--ink-soft); max-inline-size: 34ch; }
.frame { margin: 0; justify-self: center; inline-size: min(100%, 340px); padding: 14px 14px 56px; border-radius: 18px;
  background: var(--frame); box-shadow: 0 18px 40px -18px rgb(27 21 48 / 0.45); transform: rotate(-2deg); }
.frame iframe { display: block; inline-size: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 6px; background: var(--ink); }
.frame-sun { --frame: var(--sun); } .frame-rose { --frame: var(--rose); } .frame-volt { --frame: var(--volt); }
.frame-mint { --frame: var(--mint); } .frame-magenta { --frame: var(--magenta); }

.content, .faq, .cta-end { max-inline-size: 680px; }
.content strong { font-weight: 500; }
.faq { border-block-start: 1px solid var(--line); margin-block-start: 48px; }
details { border-block-end: 1px solid var(--line); padding-block: 14px; }
summary { cursor: pointer; font-weight: 500; }
details p { margin: 10px 0 0; color: var(--ink-soft); }
.cta-end { padding-block: 48px 64px; }
.cta-end h2 { margin-block-start: 0; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px 40px;
  border-block-start: 1px solid var(--line); color: var(--ink-soft); font-size: 0.875rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 14px; }
.foot [aria-current] { color: var(--ink); font-weight: 500; }

@media (min-width: 820px) {
  .hero { grid-template-columns: 1.2fr 1fr; padding-block: 48px 64px; }
}
@media (max-width: 819px) {
  .frame { inline-size: min(78%, 300px); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }