/* q.marefah.sa — QR landing pages of the marketing profile «من حرفٍ… إلى أثر».
   Phone-first (every visit starts from a camera scan). Brand colours exact; neutrals as in the
   printed profile (build/base.css + final/final.css). RTL: logical properties only. */
@font-face { font-family: "Cairo"; src: url("fonts/Cairo-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("fonts/Cairo-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Ruqaa"; src: url("fonts/ArefRuqaa-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --navy: #143D6B;
  --cyan: #1CA6DF;
  --orange: #ED8B13;
  --ink: #0E2A4A;
  --ink-2: #2D4461;
  --night: #0A2340;
  --paper: #F7F3EA;
  --paper-2: #FBF8F1;
  --sand: #EDE4D3;
  --sky: #8AD3F2;          /* small text on navy: 6.6:1 */
  --cyan-ink: #0B6E9C;     /* cyan for text on paper: 5.1:1 */
  --muted: #5B6B7E;        /* 4.9:1 on paper */
  --rule: rgba(20, 61, 107, .18);
  --f-display: "Cairo", "Plex", system-ui, sans-serif;
  --f-body: "Plex", "Cairo", system-ui, sans-serif;
  --f-quote: "Ruqaa", "Plex", serif;
  --gut: 20px;
  --max: 640px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.85 var(--f-body);
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan-ink); }
bdi { unicode-bidi: isolate; }
.nw { white-space: nowrap; }

/* ---------- header / hero (one navy band) ---------- */
.top {
  background: var(--navy);
  padding: 18px var(--gut) 0;
  padding-block-start: max(18px, env(safe-area-inset-top));
}
.top .brand { display: inline-block; }
.top .brand img { width: 92px; height: auto; }

.hero {
  background: var(--navy);
  color: #fff;
  padding: 12px var(--gut) 34px;
  border-end-start-radius: 28px;
  border-end-end-radius: 28px;
}
.hero > * { max-width: var(--max); margin-inline: auto; }
.hero .kicker { margin: 0 auto 6px; font: 700 15px/1.6 var(--f-display); color: var(--sky); }
.hero h1 { margin: 0 auto; font: 900 30px/1.45 var(--f-display); letter-spacing: 0; }
.hero h1 em { font-style: normal; color: var(--sky); }
.hero .sub { margin: 12px auto 0; font-size: 17px; color: rgba(244, 248, 251, .86); }

/* ---------- content ---------- */
.content { max-width: var(--max); margin: 0 auto; padding: 26px var(--gut) 8px; }
.content > * + * { margin-block-start: 22px; }
.content p { margin: 0; }
.content .lead { font-size: 19px; font-weight: 600; color: var(--ink); }
.content h2 { margin: 34px 0 0; font: 700 21px/1.5 var(--f-display); color: var(--navy); }
.content h2::after { content: ""; display: block; width: 36px; height: 3px; margin-block-start: 6px; background: var(--orange); border-radius: 2px; }

.quote { margin: 0; padding: 18px 20px; background: var(--paper-2); border-inline-start: 4px solid var(--cyan); border-radius: 14px; }
.quote blockquote { margin: 0; font: 400 24px/1.75 var(--f-quote); color: var(--navy); }
.quote figcaption { margin-block-start: 8px; font-size: 15px; color: var(--muted); }

.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stats li { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 14px 14px 12px; }
.stats .n { display: block; font: 900 26px/1.3 var(--f-display); color: var(--navy); }
.stats .l { display: block; margin-block-start: 4px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.note { font-size: 14px; color: var(--muted); }

.list { margin: 12px 0 0; padding-inline-start: 22px; }
.list li + li { margin-block-start: 8px; }
.list li::marker { color: var(--orange); }

.photo { margin: 0; }
.photo img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 16px; background: var(--sand); }
.photo figcaption { margin-block-start: 8px; font-size: 14px; color: var(--muted); }

.soon { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: #fff; border: 1px dashed rgba(20, 61, 107, .35); border-radius: 14px; }
.soon .tag { flex: none; padding: 2px 12px; border-radius: 999px; background: var(--orange); color: #fff; font: 700 14px/1.9 var(--f-display); }
.soon p { font-size: 16px; color: var(--ink-2); }

.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.links a { display: block; padding: 16px 18px; background: #fff; border: 1px solid var(--rule); border-radius: 16px; text-decoration: none; color: var(--ink); }
.links a:focus-visible, .btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.links .t { display: block; font: 700 18px/1.55 var(--f-display); color: var(--navy); }
.links .t::after { content: " ←"; color: var(--orange); }
.links .s { display: block; margin-block-start: 2px; font-size: 15px; color: var(--muted); }

.goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.goals > li { background: #fff; border: 1px solid var(--rule); border-radius: 16px; padding: 14px 18px; }
.goals .lv { display: block; font: 700 14px/1.6 var(--f-display); color: var(--cyan-ink); }
.goals ul { margin: 6px 0 0; padding-inline-start: 20px; }
.goals ul li { font-weight: 600; }
.goals ul li::marker { color: var(--orange); }

/* ---------- call to action ---------- */
.cta { max-width: var(--max); margin: 28px auto 0; padding: 0 var(--gut); display: grid; gap: 10px; }
.btn {
  display: block; text-align: center; text-decoration: none;
  padding: 14px 18px; min-height: 52px; border-radius: 14px;
  font: 700 18px/1.4 var(--f-display);
  background: #fff; color: var(--navy); border: 2px solid var(--navy);
}
.btn.primary { background: var(--orange); color: #fff; border-color: var(--orange); }

/* ---------- footer ---------- */
.foot { margin-block-start: 44px; background: var(--night); color: #F4F8FB; padding: 26px var(--gut); padding-block-end: max(26px, env(safe-area-inset-bottom)); }
.foot > * { max-width: var(--max); margin-inline: auto; }
.foot .name { margin-block: 0 12px; font: 700 15px/1.6 var(--f-display); }
.foot .name span { font: 400 14px/1.6 var(--f-body); color: rgba(244, 248, 251, .8); }
.foot .contacts { list-style: none; margin-block: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.foot .k { color: var(--sky); font-weight: 600; }
.foot a { color: #fff; }

@media (min-width: 720px) {
  .hero h1 { font-size: 38px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .links a, .btn { transition: transform .15s ease; }
  .links a:active, .btn:active { transform: scale(.985); }
}