/* ============================================================================
 * MAXIRISE GO — base.css
 * Tokens · reset · typography · layout primitives
 * Identity: DARK NAVY · DEEP RED · WHITE — masculine, premium, aggressive DR.
 * (Deliberately NOT the MENA blue/gold executive look.)
 * ========================================================================== */
:root {
  /* Core palette */
  --mx-navy:      #0A1024;   /* page background */
  --mx-navy-2:    #0E1733;   /* raised navy surface */
  --mx-navy-3:    #131D3D;   /* cards on navy */
  --mx-red:       #C8102E;   /* deep red — primary action */
  --mx-red-2:     #E11D38;   /* red hover / glow */
  --mx-red-deep:  #8E0A20;   /* red shadow */
  --mx-white:     #FFFFFF;
  --mx-ink:       #0A1024;   /* text on light surfaces */
  --mx-ice:       #F4F6FB;   /* light section background */
  --mx-ice-2:     #E9EDF6;
  --mx-line:      rgba(255,255,255,.10);
  --mx-line-dark: rgba(10,16,36,.12);
  --mx-navy-line: rgba(10,16,36,.42);   /* deep-navy 1px control border (form/offers) */

  /* Premium gold — accent ONLY (~5% of visual weight). Brand wordmark, key
   * numbers, guarantee badge. Do NOT theme the page gold. Matches MENA. */
  --mx-gold:      #C8A84B;
  --mx-gold-soft: #F3D984;
  --mx-gold-grad: linear-gradient(90deg, #FFF2B5, var(--mx-gold), #FFF6CF);
  --mx-muted:     rgba(255,255,255,.66);
  --mx-muted-ink: rgba(10,16,36,.66);
  --mx-steel:     #9AA8C7;   /* cool steel accent */

  --mx-radius:    16px;
  --mx-radius-sm: 11px;
  --mx-shell:     600px;     /* mobile-first single column */
  --mx-shadow:    0 18px 50px rgba(0,0,0,.45);
  --mx-shadow-sm: 0 8px 22px rgba(0,0,0,.28);
  --mx-font:         "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --mx-font-heading: "Tajawal", "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

  /* ── Themeable conversion block + CTA ─────────────────────────────────────
   * Override these (here or with a small override file) once the final image
   * colours are chosen — every CTA and the offers/form block read from them,
   * so the look changes in ONE place. --conversion-bg-gradient falls back to
   * the flat --conversion-bg when no gradient is set. */
  --conversion-bg:          #F4F6FB;                 /* light, high-contrast conversion area */
  --conversion-bg-gradient: var(--conversion-bg);    /* set a gradient later if desired */
  --conversion-ink:         #0A1024;                 /* text on the conversion area */
  --conversion-muted:       rgba(10,16,36,.66);
  --cta-bg:                 linear-gradient(180deg, #E8243F 0%, var(--mx-red) 58%, #A50C24 100%);
  --cta-bg-hover:           linear-gradient(180deg, #F0314B 0%, var(--mx-red-2) 58%, var(--mx-red) 100%);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--mx-font);
  background: var(--mx-navy);
  color: var(--mx-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; font-family: var(--mx-font-heading); }
p { margin: 0; }

/* Layout primitives */
.mx-page { width: 100%; }
.mx-shell { width: 100%; max-width: var(--mx-shell); margin: 0 auto; padding: 0 16px; }
.mx-section { padding: 30px 0; position: relative; }
.mx-section-tight { padding: 16px 0; }
.mx-center { text-align: center; }

.mx-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mx-red-2);
}
.mx-title { font-size: clamp(26px, 7vw, 38px); }
.mx-title-sm { font-size: clamp(21px, 5.4vw, 28px); }
.mx-copy { color: var(--mx-muted); font-size: 15px; }

.mx-section-head { display: grid; gap: 8px; margin-bottom: 18px; }

/* Light-on-dark theming helpers */
.mx-theme-light { background: var(--mx-ice); color: var(--mx-ink); }
.mx-theme-light .mx-copy { color: var(--mx-muted-ink); }
.mx-theme-light .mx-title-sm { color: var(--mx-ink); }

/* Focus visibility for accessibility */
:focus-visible { outline: 3px solid var(--mx-red-2); outline-offset: 2px; border-radius: 6px; }