/* Shared styles for musanad.com: the front page and the service pages. */
/* Built on mowtary.com's layout and motion; colours are Musanad's (apps/web/src/styles.css @theme):
   midnight with one accent, gold. Gold is a fill with dark text on it (9.8:1); gold text uses
   --accent-strong (#f0c96a on midnight, #a16207 on white, both >= 4.5:1). Borders separate, not shadows. */
:root {
  --bg: #070b12; --surface: #0e1420; --raised: #141c2a; --panel: #0a0f18; --border: #1e293b; --text: #f1f5f9; --muted: #94a3b8;
  --accent: #e0b354; --accent-strong: #f0c96a; --on-accent: #0b0f14; --accent-rgb: 224, 179, 84;
  /* Overlays on the video: the page colour (shade) and the text colour (ink), as RGB. */
  --shade: 7, 11, 18; --ink: 255, 255, 255;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}
/* Light: the visitor's setting, or their choice (theme.js sets data-theme). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f8fafc; --surface: #ffffff; --raised: #eef2f6; --panel: #ffffff; --border: #e2e8f0; --text: #020617; --muted: #475569;
    --accent: #e0b354; --accent-strong: #a16207; --shade: 248, 250, 252; --ink: 2, 6, 23;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f8fafc; --surface: #ffffff; --raised: #eef2f6; --panel: #ffffff; --border: #e2e8f0; --text: #020617; --muted: #475569;
  --accent: #e0b354; --accent-strong: #a16207; --shade: 248, 250, 252; --ink: 2, 6, 23;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.7 "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 72rem; margin: 0 auto; padding-inline: 1rem; }
/* Header over the full-screen hero: the logo at the start; at the end, the main action, sign-in and
   the menu. It sits on the video, so it is transparent with a fade and a hairline. */
.site-head {
  position: absolute; inset: 0 0 auto; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(to bottom, rgba(var(--shade), .8), rgba(var(--shade), 0));
  border-bottom: 1px solid rgba(var(--ink), .08);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5.5rem; }
.brand { display: flex; align-items: center; gap: .75rem; font-weight: 700; font-size: 1.25rem; }
.brand img { width: 2.5rem; height: 2.5rem; }

/* Full-screen hero over construction footage. The poster paints first;
   /motion.js attaches the video after the page has loaded. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh; padding-block: 8rem 6rem; border-bottom: 1px solid var(--border);
}
.hero > .wrap { width: 100%; }
.hero-media { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media video { opacity: 0; transition: opacity .7s var(--ease-out); }
.hero-media.playing video { opacity: 1; }
/* Keeps the text readable: dark at the top (under the header) and at the bottom (into the page),
   lighter in the middle so the footage shows, and darker on the text's side (right, RTL). */
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--shade), .92) 0%, rgba(var(--shade), .5) 14%, rgba(var(--shade), .2) 36%, rgba(var(--shade), .3) 70%, rgba(var(--shade), .78) 88%, var(--bg) 100%),
    linear-gradient(to left, rgba(var(--shade), .85) 0%, rgba(var(--shade), .4) 50%, rgba(var(--shade), 0) 75%);
}
/* On a phone the text spans the whole width: shade the whole clip more evenly. */
@media (max-width: 40rem) {
  .hero-shade {
    background: linear-gradient(to bottom, rgba(var(--shade), .9) 0%, rgba(var(--shade), .6) 20%, rgba(var(--shade), .62) 60%, rgba(var(--shade), .86) 88%, var(--bg) 100%);
  }
}
.hero::before {
  display: none;
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px; opacity: .25; z-index: -1;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%);
}
.hero-inner { position: relative; }
.eyebrow { color: var(--accent-strong); font-size: .875rem; letter-spacing: .2em; margin: 0 0 1rem; }
h1 { font-size: clamp(2.75rem, 8vw, 4.5rem); line-height: 1.15; margin: 0; text-wrap: balance; }
.lead { color: var(--muted); font-size: 1.125rem; max-width: 36rem; margin: 1.25rem 0 0; }
.soon {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 2rem;
  border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .1); color: var(--text);
  border-radius: 999px; padding: .375rem 1rem; font-size: .875rem; font-weight: 600;
}
.soon::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }

/* Services: a 1px-gap grid where the gaps are the border lines (carweb service-card). */
.services { padding-block: 4rem; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 2rem; text-wrap: balance; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; }
.cell { background: var(--surface); padding: 1.75rem 1.5rem; }
.cell svg { width: 1.75rem; height: 1.75rem; color: var(--accent-strong); }
.cell h3 { margin: 1rem 0 .375rem; font-size: 1.125rem; }
.cell p { margin: 0; color: var(--muted); font-size: .9375rem; }


.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.25rem; border-radius: .5rem; font-weight: 600; text-decoration: none; transition: background-color .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: #f0c96a; }
.btn-ghost { border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface); }
.btn-sm { min-height: 2.75rem; padding: 0 1rem; font-size: .9375rem; }
.ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.note { color: var(--muted); font-size: .875rem; margin: .75rem 0 0; }
.tag { display: inline-block; margin-top: .875rem; font-size: .75rem; font-weight: 600; border-radius: 999px; padding: .125rem .625rem; }
.tag-live { background: rgba(var(--accent-rgb), .15); color: var(--text); }
.tag-soon { border: 1px solid var(--border); color: var(--muted); }
.pricing { padding-block: 4rem; border-top: 1px solid var(--border); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.plan { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.plan.featured { border-color: rgba(var(--accent-rgb), .6); }
.plan h3 { margin: 0; font-size: 1.125rem; }
.price { font-size: 2.25rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.price small { font-size: .9375rem; font-weight: 400; color: var(--muted); }
.plan ul { margin: .5rem 0 1rem; padding: 0 1.1rem 0 0; color: var(--muted); font-size: .9375rem; }
.plan .btn { margin-top: auto; }
footer { border-top: 1px solid var(--border); color: var(--muted); font-size: .875rem; padding-block: 2rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
bdi { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .hero-media video { display: none; } }

/* Header: the logo links home; everything else is in the menu. */
a.brand { color: inherit; text-decoration: none; border-radius: .5rem; }
a.brand:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; }
.head-end { display: flex; align-items: center; gap: .5rem; }
.menu-btn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
  border: 1px solid rgba(var(--ink), .2); border-radius: .5rem; background: transparent; color: var(--text);
  transition: background-color .15s;
}
.menu-btn:hover { background: rgba(var(--ink), .08); }
.menu-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.menu-btn svg { width: 1.375rem; height: 1.375rem; }
/* The theme switch shows the mode it will switch to: a sun in dark mode, a moon in light mode. */
.theme-btn[hidden] { display: none; }
.theme-btn .moon { display: none; }
:root[data-theme="light"] .theme-btn .sun { display: none; }
:root[data-theme="light"] .theme-btn .moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-btn .sun { display: none; }
  :root:not([data-theme]) .theme-btn .moon { display: block; }
}
.btn-glass { border: 1px solid rgba(var(--ink), .2); color: var(--text); background: rgba(var(--shade), .25); backdrop-filter: blur(6px); }
.btn-glass:hover { background: rgba(var(--ink), .08); }
@media (max-width: 40rem) { .head-signin { display: none; } }

/* Scroll cue at the foot of the hero. */
.scroll-cue {
  position: absolute; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); inset-inline: 0; margin-inline: auto; width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center; border-radius: 50%; color: var(--muted); border: 1px solid rgba(var(--ink), .15);
}
.scroll-cue:hover { color: var(--text); }
.scroll-cue:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.scroll-cue svg { width: 1.25rem; height: 1.25rem; animation: cue 2.4s var(--ease-out) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(4px); opacity: 1; } }

/* The menu: a side panel (from the menu's side), each item with a small label above it, the
   Musanad mark faint behind, links and the address at its foot. Works without JavaScript
   (#menu as the target); /menu.js makes it a proper dialog (focus, Escape, background inert). */
.drawer { position: fixed; inset: 0; z-index: 50; display: none; }
.drawer:target, .drawer.open { display: block; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); border: 0; padding: 0; cursor: pointer; }
.drawer-panel {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: min(28rem, 100%); overflow-y: auto; isolation: isolate;
  display: flex; flex-direction: column; background: var(--panel); border-inline-start: 1px solid var(--border);
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  animation: drawer-in .35s var(--ease-out);
}
.drawer-panel::before {
  content: ""; position: absolute; inset: 18% -25% auto; height: 55%; z-index: -1; pointer-events: none;
  background: url(/favicon.svg) center / contain no-repeat; opacity: .05; filter: grayscale(1);
}
@keyframes drawer-in { from { transform: translateX(-100%); } }
.drawer-close { align-self: flex-start; }
.drawer-list { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; text-align: center; }
.drawer-list small { display: block; color: var(--muted); font-size: .8125rem; margin-bottom: .125rem; }
.drawer-list a { display: inline-block; padding: .25rem .5rem; border-radius: .5rem; color: var(--text); text-decoration: none; font-size: 1.25rem; font-weight: 700; transition: color .15s; }
.drawer-list a:hover, .drawer-list a[aria-current="page"] { color: var(--accent-strong); }
.drawer-list a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.drawer-panel > * { flex-shrink: 0; } /* a tall list scrolls; nothing in it shrinks */
.drawer-list .drawer-cta a { display: inline-flex; min-height: 3rem; padding: 0 1.5rem; margin-top: .5rem; font-size: 1rem; }
.drawer-foot { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; color: var(--muted); font-size: .8125rem; }
.drawer-foot a { color: inherit; text-decoration: none; }
.drawer-foot a:hover { color: var(--text); }
body.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .drawer-panel { animation: none; } .scroll-cue svg { animation: none; } }

/* Service cards on the front page: the whole card is the link. */
a.cell { display: flex; flex-direction: column; align-items: flex-start; color: inherit; text-decoration: none; transition: background-color .15s; }
a.cell:hover { background: var(--raised); }
a.cell:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.cell .more { display: inline-flex; align-items: center; gap: .375rem; margin-top: auto; padding-top: 1rem; color: var(--accent-strong); font-size: .875rem; font-weight: 600; }
.cell .more svg { width: 1rem; height: 1rem; transition: transform .2s var(--ease-out); }
a.cell:hover .more svg { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) { a.cell:hover .more svg { transform: none; } }

/* Service pages. */
.hero.page-hero { min-height: 88vh; min-height: 88svh; }
.hero.page-hero h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); }
.hero .tag { margin-top: 1.25rem; }
.crumb { margin: 0 0 1rem; font-size: .875rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--text); }
.crumb a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: .25rem; }
.section { padding-block: 4rem; border-top: 1px solid var(--border); }
.section.first { border-top: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; counter-reset: step; }
.steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; }
.steps li::before {
  content: counter(step, arabic-indic); display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: rgba(var(--accent-rgb), .15); color: var(--accent-strong); font-weight: 700;
}
.steps h3 { margin: 1rem 0 .375rem; font-size: 1.125rem; }
.steps p { margin: 0; color: var(--muted); font-size: .9375rem; }
.cta-box { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 2.5rem 1.5rem; text-align: center; }
.cta-box.live { border-color: rgba(var(--accent-rgb), .6); }
.cta-box h2 { margin-bottom: .75rem; }
.cta-box p { color: var(--muted); margin: 0 auto; max-width: 36rem; }
.cta-box .ctas { justify-content: center; }
.cta-box .soon { margin-top: 1.5rem; }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--text); }
footer a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: .25rem; }

/* Front page: the film plays behind the whole page (fixed, silent, looping). The hero shows it
   through its own shade; the sections below sit on frosted panels so text keeps its contrast.
   motion.js plays it only when the tab is visible, never with reduced motion or data saver. */
.site-bg { position: fixed; inset: 0; z-index: -2; }
.site-bg::after { content: ""; position: absolute; inset: 0; background: rgba(var(--shade), .35); }
body.has-site-bg { background: transparent; }
html:has(body.has-site-bg) { background: var(--bg); }
.has-site-bg .hero { border-bottom: 0; }
.has-site-bg main > section:not(.hero), .has-site-bg footer {
  position: relative; background: rgba(var(--shade), .84);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
}
.has-site-bg main > section.services { border-top: 1px solid var(--border); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .has-site-bg main > section:not(.hero), .has-site-bg footer { background: rgba(var(--shade), .95); }
}
/* Pause the moving background (WCAG 2.2.2): a round button in the corner away from the text. */
.bg-toggle {
  position: fixed; z-index: 30; inset-inline-end: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(var(--ink), .22); background: rgba(var(--shade), .55); color: var(--text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .15s;
}
.bg-toggle[hidden] { display: none; }
.bg-toggle:hover { background: rgba(var(--shade), .8); }
.bg-toggle:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.bg-toggle svg { width: 1.125rem; height: 1.125rem; }
.bg-toggle .i-play, .bg-toggle[aria-pressed="true"] .i-pause { display: none; }
.bg-toggle[aria-pressed="true"] .i-play { display: block; }
body.menu-open .bg-toggle { display: none; }

/* Text pages (privacy policy, support): plain reading width under the header, no hero. */
.doc { max-width: 46rem; padding-block: calc(8rem + env(safe-area-inset-top, 0px)) 4rem; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
.doc .lead { max-width: none; }
.doc h2 { font-size: 1.375rem; margin: 2.75rem 0 .75rem; }
.doc h3 { font-size: 1.0625rem; margin: 1.5rem 0 .375rem; }
.doc p { margin: 0 0 1rem; }
.doc ul, .doc ol { margin: 0 0 1rem; padding-inline: 1.25rem 0; }
.doc li { margin-bottom: .375rem; }
.doc li::marker { color: var(--muted); }
.doc a { color: var(--accent-strong); text-underline-offset: 3px; }
.doc a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: .25rem; }
.doc .meta { color: var(--muted); font-size: .875rem; margin-top: 1rem; }
.table-scroll { overflow-x: auto; margin: 0 0 1rem; }
.doc table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: .9375rem; }
.doc th, .doc td { border: 1px solid var(--border); padding: .625rem .75rem; text-align: start; vertical-align: top; }
.doc th { background: var(--surface); font-weight: 600; }
.contact-box { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; margin: 1.5rem 0; }
.contact-box p:last-child { margin-bottom: 0; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { min-height: 3rem; display: flex; align-items: center; padding-block: .75rem; cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-inline-start: auto; padding-inline-start: 1rem; color: var(--muted); font-size: 1.25rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: .25rem; }
.faq details > div { padding-bottom: .5rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* Entrances (/reveal.js). Only once the script has marked the page, so nothing is hidden without it.
   Words rise 90ms apart; the rest of the hero follows the last word. Sections fade up 16px once. */
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise, 16px)); } }
.reveal-ready .hero h1 .word { display: inline-block; animation: rise .7s var(--ease-out) both; animation-delay: calc(var(--w) * 90ms + 120ms); }
.reveal-ready .hero .eyebrow { animation: rise .6s var(--ease-out) both; --rise: 8px; }
.reveal-ready .hero .lead, .reveal-ready .hero .ctas, .reveal-ready .hero .note, .reveal-ready .hero .tag {
  animation: rise .7s var(--ease-out) both; animation-delay: calc(var(--words, 4) * 90ms + 260ms);
}
.reveal-ready .hero .ctas { animation-delay: calc(var(--words, 4) * 90ms + 360ms); }
.reveal-ready .hero .note { animation-delay: calc(var(--words, 4) * 90ms + 440ms); }
.reveal-ready .reveal h2, .reveal-ready .reveal .lead-sm,
.reveal-ready .reveal .cell, .reveal-ready .reveal .steps > li, .reveal-ready .reveal .cta-box { opacity: 0; transform: translateY(16px); }
.reveal-ready .reveal.in h2, .reveal-ready .reveal.in .lead-sm, .reveal-ready .reveal.in .cta-box { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal-ready .reveal.in .cell, .reveal-ready .reveal.in .steps > li {
  opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms + 80ms);
}
/* An accent line under each section heading, drawn from the reading start (right). */
.reveal h2::after { content: ""; display: block; width: 3.5rem; height: 2px; margin-top: .75rem; border-radius: 2px; background: var(--accent); transform-origin: right; }
.reveal-ready .reveal h2::after { transform: scaleX(0); }
.reveal-ready .reveal.in h2::after { transform: none; transition: transform .8s var(--ease-out) .2s; }
.lead-sm { color: var(--muted); max-width: 40rem; margin: -1.25rem 0 2rem; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .hero *, .reveal-ready .reveal * { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}