/*
    DealGo — the public landing page.

    Dark, because the page is a poster rather than a workspace: one screen of black with the brand
    orange used sparingly is what makes a headline and a single button carry. The admin console is
    the opposite and stays light; they share the brand, not the theme.

    Written right-to-left first. Every directional rule uses a logical property, so the layout is
    built for Arabic rather than mirrored from English afterwards.

    Colour lives here and nowhere else. site.js sets no styles.
*/

:root {
  /* Ground. Not pure black: a near-black keeps the cards visible as surfaces. */
  --bg: #0b0b0d;
  --bg-2: #111114;
  --surface: #141417;
  --surface-2: #1a1a1e;
  --border: #232329;
  --border-strong: #32323a;

  --text: #ffffff;
  --text-2: #c9cbd2;
  --muted: #8d9099;

  /* The logo's orange. On this ground the bright step is legible as text, which it is not on
     white, so the page uses one orange throughout rather than the console's three steps. */
  --brand: #f26a1b;
  --brand-soft: #ff8a3d;
  --brand-dim: rgba(242, 106, 27, 0.14);
  --brand-ring: rgba(242, 106, 27, 0.30);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --wrap: 1180px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  --s9: 104px;

  --ease: cubic-bezier(.4, 0, .2, 1);

  --font: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Visible only to a screen reader. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The first thing a keyboard reaches, and the only way past a long header without a mouse. */
.skip {
  position: fixed;
  inset-inline-start: var(--s4);
  top: -100px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  transition: top .18s var(--ease);
}
.skip:focus { top: var(--s4); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s5);
}

/* ---------------------------------------------------------------- header */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 13, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
/* The rule appears only once the page has moved, so the top of the page stays uninterrupted. */
.topbar.stuck { border-bottom-color: var(--border); background: rgba(11, 11, 13, 0.92); }

.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  height: 74px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { display: inline-flex; height: 34px; }
.brand-mark svg, .brand-mark img { height: 34px; width: auto; display: block; }

.brand-word {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.4px;
  /* The name is written left to right inside an Arabic page. */
  direction: ltr;
}
.brand-word b { color: #fff; font-weight: 900; }
.brand-word i { color: var(--brand); font-style: normal; font-weight: 900; }

.topnav {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-inline-start: auto;
}
.topnav a {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.topnav a:hover { color: #fff; background: var(--surface-2); }
.topnav a.current { color: var(--brand); }

.topbar-actions { display: flex; align-items: center; gap: var(--s3); flex: none; }

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}
.menu-btn span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.menu-btn span:nth-child(2) { width: 70%; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s var(--ease), background .15s var(--ease),
              box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.btn.sm { padding: 9px 20px; font-size: 14.5px; }

.btn-solid {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 30px -10px var(--brand-ring);
}
.btn-solid:hover { background: var(--brand-soft); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: #fff;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------------------------------------------------------------- section furniture */

section { padding-block: var(--s9); position: relative; }
section:first-child { padding-block-start: var(--s8); }

/* The small labelled pill that introduces a section. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 7px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}
.eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}

.section-head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: var(--s8); }
.section-head h2 {
  margin: var(--s4) 0 0;
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -1px;
}
.section-head p { margin: var(--s3) 0 0; color: var(--muted); font-size: 17px; }

/* ---------------------------------------------------------------- hero */

.hero { text-align: center; padding-block: var(--s8) var(--s9); }

/*
 * The glow behind the headline.
 *
 * A single soft orange pool rather than a gradient across the whole section: it puts the light
 * where the words are and leaves the rest of the page black.
 */
.hero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -120px;
  height: 560px;
  background: radial-gradient(620px 300px at 50% 40%, rgba(242, 106, 27, 0.20), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero h1 {
  margin: var(--s5) 0 0;
  font-size: clamp(38px, 7.2vw, 80px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -2px;
}
.hero .lede {
  margin: var(--s5) auto 0;
  max-width: 620px;
  color: var(--text-2);
  font-size: clamp(16px, 2vw, 19px);
}
.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}
.hero-shot { margin-top: var(--s8); }
.hero-shot img {
  margin-inline: auto;
  border-radius: var(--radius-lg);
  max-height: 560px;
  width: auto;
}

/* The app-store row. */
.stores { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.store-btn:hover { border-color: var(--brand); transform: translateY(-1px); }
.store-btn svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
.store-btn .store-text { display: flex; flex-direction: column; line-height: 1.25; text-align: start; }
.store-btn .store-text small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.store-btn .store-text strong { font-size: 14px; font-weight: 800; }

/* ---------------------------------------------------------------- cards */

.grid { display: grid; gap: var(--s4); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card h3 { margin: 0 0 var(--s3); font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.card p { margin: 0; color: var(--muted); font-size: 15.5px; }

.card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--s4);
  border-radius: 15px;
  background: var(--brand-dim);
  color: var(--brand);
}
.card-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8;
                 stroke-linecap: round; stroke-linejoin: round; }

/* A numbered step. The figure is decoration behind the text, not a label to read. */
.step-no {
  position: absolute;
  top: var(--s4);
  inset-inline-end: var(--s5);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  /* A Latin numeral in an Arabic page still reads left to right. */
  direction: ltr;
}

/* A card that leads with a picture rather than an icon. */
.card-shot {
  margin: calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s5);
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-2);
}
.card-shot img { width: 100%; height: 190px; object-fit: cover; }

/* ---------------------------------------------------------------- picture row */

.grid.one { grid-template-columns: minmax(0, 520px); justify-content: center; }

/*
 * A picture and the words that belong to it.
 *
 * The caption sits inside the same figure as the image, so the two move together at every width
 * and a reader never has to work out which text describes which picture.
 */
.shot { margin: 0; display: flex; flex-direction: column; }

.shot-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-2);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.shot:hover .shot-frame { border-color: var(--brand); transform: translateY(-3px); }

/*
 * A fixed shape, filled.
 *
 * Three pictures of different proportions would otherwise make three different columns and the
 * row would look accidental. The aspect ratio is portrait because these are usually phone
 * screenshots; object-fit crops rather than squashes whatever is uploaded.
 */
.shot-frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.shot-caption { padding: var(--s4) var(--s2) 0; }
.shot-caption h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.shot-caption p { margin: var(--s2) 0 0; color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- figures */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  padding: var(--s7) var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(700px 220px at 50% 0%, rgba(242, 106, 27, 0.10), transparent 70%),
    var(--bg-2);
}
.stat { text-align: center; }
.stat .n {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.stat .l { margin-top: 6px; color: var(--muted); font-size: 15px; font-weight: 600; }

/* ---------------------------------------------------------------- reviews */

.reviews {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 1fr);
  gap: var(--s4);
  overflow-x: auto;
  padding-bottom: var(--s3);
  scroll-snap-type: x mandatory;
  /* The row scrolls; the page must not scroll sideways with it. */
  scrollbar-width: thin;
}
.reviews > * { scroll-snap-align: start; }

.review { display: flex; flex-direction: column; gap: var(--s4); }
.review-body { margin: 0; color: var(--text-2); font-size: 15.5px; flex: 1; }
.review-who { display: flex; align-items: center; gap: var(--s3); }
.review-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--brand-dim);
  color: var(--brand);
  font-weight: 800;
  font-size: 17px;
  object-fit: cover;
  overflow: hidden;
}
.review-name { font-weight: 800; font-size: 15px; }
.review-role { color: var(--muted); font-size: 13px; }
.stars { display: inline-flex; gap: 2px; color: var(--brand); }
.stars svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------------------------------------------------------------- questions */

.faq { max-width: 820px; margin-inline: auto; display: grid; gap: var(--s3); }

.qa {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.qa[open] { border-color: var(--brand); }

.qa summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  font-size: 16.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }

.qa summary .chev {
  margin-inline-start: auto;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.qa summary .chev svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
                        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qa[open] summary .chev { transform: rotate(180deg); color: var(--brand); }
.qa summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.qa .answer { padding: 0 var(--s5) var(--s5); color: var(--muted); font-size: 15.5px; margin: 0; }

/* ---------------------------------------------------------------- closing band */

.cta-band {
  text-align: center;
  padding: var(--s8) var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(620px 260px at 50% 0%, rgba(242, 106, 27, 0.18), transparent 70%),
    var(--bg-2);
}
.cta-band h2 {
  margin: 0;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -1px;
}
.cta-band p { margin: var(--s3) auto 0; max-width: 560px; color: var(--text-2); }

/* ---------------------------------------------------------------- footer */

.footer { border-top: 1px solid var(--border); padding-block: var(--s7) var(--s5); margin-top: var(--s8); }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
  justify-content: space-between;
  align-items: flex-start;
}
.footer-brand { max-width: 320px; }
.footer-brand p { margin: var(--s3) 0 0; color: var(--muted); font-size: 14.5px; }

.footer-links { display: flex; flex-wrap: wrap; gap: var(--s6); }
.footer-col h4 { margin: 0 0 var(--s3); font-size: 14px; font-weight: 800; color: #fff; }
.footer-col a, .footer-col span {
  display: block;
  padding-block: 5px;
  color: var(--muted);
  font-size: 14.5px;
  transition: color .15s var(--ease);
}
.footer-col a:hover { color: var(--brand); }

.socials { display: flex; gap: var(--s2); margin-top: var(--s4); }
.social {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  color: var(--text-2);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.social svg { width: 18px; height: 18px; fill: currentColor; }
.social:hover { color: var(--brand); border-color: var(--brand); }

.footer-base {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: space-between;
  color: var(--muted);
  font-size: 13.5px;
}

/* ---------------------------------------------------------------- loading */

.boot { padding-block: var(--s9); display: grid; gap: var(--s4); justify-items: center; }
.skel {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-pill);
  animation: shimmer 1.4s ease-in-out infinite;
}
.skel-pill { width: 160px; height: 34px; }
.skel-title { width: min(560px, 90%); height: 56px; border-radius: var(--radius); }
.skel-line { width: min(460px, 80%); height: 18px; }
.skel-line.short { width: min(300px, 60%); }
@keyframes shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

.error-note {
  max-width: 520px;
  margin: var(--s9) auto;
  padding: var(--s5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  color: var(--text-2);
}

/* A section rises once as it comes into view. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.shown { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- narrower */

@media (max-width: 1000px) {
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  section { padding-block: var(--s8); }

  .menu-btn { display: flex; }

  /* The links become a sheet under the bar rather than a row inside it. */
  .topnav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s3);
    margin: 0;
    background: var(--bg-2);
    border-block: 1px solid var(--border);
  }
  .topnav:not(.open) { display: none; }
  .topnav a { padding: 13px var(--s4); border-radius: 12px; }

  .grid.two, .grid.three, .grid.four, .grid.one { grid-template-columns: 1fr; }
  /* A single column is already wide, so the frame does not need to stay portrait. */
  .shot-frame img { aspect-ratio: 3 / 2; }
  .stats { grid-template-columns: 1fr; gap: var(--s6); }
  .footer-links { gap: var(--s5); }
}

@media (max-width: 560px) {
  .wrap { padding-inline: var(--s4); }
  .brand-word { font-size: 19px; }
  .topbar-actions .btn { display: none; }
  .card { padding: var(--s5); }
  .reviews { grid-auto-columns: minmax(270px, 1fr); }
}