/* MEP Supplies landing page: pure CSS, no JavaScript.
   Light theme is the default; the header toggle switches to dark for the current page view. */

/* ---------- Tokens (from the logo and brochure) ---------- */
:root {
  --bg: #f4f7fc;
  --surface: #ffffff;
  --surface-2: #eaf1fb;
  --text: #1c2647;
  --muted: #4f5b7c;
  --heading: #18338a;
  --navy: #1b3a8c;
  --navy-deep: #102565;
  --red: #d7262e;
  --line: #d4def0;
  --sky-top: #a9d3f7;
  --sky-bot: #eef7ff;
  --cloud: rgba(255, 255, 255, .85);
  --frame: #ffffff;
  --shadow: 0 18px 40px -18px rgba(16, 37, 101, .45);
  --focus: #d7262e;
  --show-moon: block;
  --show-sun: none;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ar: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --slant: 115deg;
  color-scheme: light;
}
/* Dark theme, only when the visitor flips the header toggle */
:root:has(#theme-toggle:checked) {
  --bg: #08122e;
  --surface: #0f1c42;
  --surface-2: #14245a;
  --text: #dfe7fb;
  --muted: #a3b0d6;
  --heading: #ffffff;
  --navy: #1f409c;
  --navy-deep: #0c1a47;
  --red: #e3323a;
  --line: #23356e;
  --sky-top: #0a1a45;
  --sky-bot: #0f2a6e;
  --cloud: rgba(120, 160, 255, .10);
  --frame: #1a2b62;
  --shadow: 0 18px 44px -16px rgba(0, 0, 0, .7);
  --focus: #ff7479;
  --show-moon: none;
  --show-sun: block;
  color-scheme: dark;
}
[dir="rtl"] { --slant: 245deg; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
html:lang(ar) body { font-family: var(--font-ar); line-height: 1.75; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
h1, h2, h3 { color: var(--heading); line-height: 1.15; margin: 0; }
p { margin: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50;
  background: var(--red); color: #fff; padding: 10px 16px; border-radius: 6px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-inline-end: auto; }
.brand-mark { width: 30px; height: 46px; object-fit: cover; border-radius: 7px; }
.brand-word { display: flex; flex-direction: column; line-height: 1; font-family: var(--font); }
.brand-mep { font-weight: 900; font-size: 1.45rem; color: var(--heading); letter-spacing: -.01em; }
.brand-sup { font-weight: 800; font-size: .62rem; letter-spacing: .34em; color: var(--heading); margin-top: 3px; }
.nav { display: flex; gap: 22px; }
.nav a { text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--text); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--red); }
.tools { display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.lang a {
  display: grid; place-items: center;
  font-family: var(--font); font-size: .8rem; font-weight: 700; text-decoration: none;
  color: var(--muted); padding: 0 10px; min-width: 40px; min-height: 36px;
}
.lang a:hover { color: var(--heading); background: var(--surface-2); }
.lang a[lang="ar"] { font-family: var(--font-ar); font-size: .85rem; }
.lang a + a { border-inline-start: 1px solid var(--line); }
.lang a[aria-current="page"] { background: var(--navy); color: #fff; }
.theme-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--heading); cursor: pointer;
}
.theme-btn:hover { background: var(--surface-2); }
.theme-btn svg { width: 19px; height: 19px; }
.theme-btn .i-moon { display: var(--show-moon); }
.theme-btn .i-sun { display: var(--show-sun); }
#theme-toggle:focus-visible ~ .site-header .theme-btn { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- Hero: the logo's sky ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 22% 14% at 12% 22%, var(--cloud), transparent 70%),
    radial-gradient(ellipse 18% 10% at 22% 30%, var(--cloud), transparent 70%),
    radial-gradient(ellipse 26% 14% at 88% 14%, var(--cloud), transparent 70%),
    radial-gradient(ellipse 20% 12% at 64% 82%, var(--cloud), transparent 70%),
    linear-gradient(180deg, var(--sky-top), var(--sky-bot));
}
.hero-inner {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
  padding-block: 72px 64px;
}
.status {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding-block: 6px; padding-inline: 10px 14px; font-size: .86rem; font-weight: 600;
  box-shadow: 0 6px 18px -10px rgba(16, 37, 101, .5);
}
.dot { position: relative; width: 10px; height: 10px; background: var(--red); flex: none; }
.dot::after {
  content: ""; position: absolute; inset: -4px; border: 2px solid var(--red); opacity: 0;
  animation: ping 2.2s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.hero h1 {
  margin-top: 22px;
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  font-weight: 900; letter-spacing: -.02em;
  max-width: 17ch;
}
html:lang(fr) .hero h1 { max-width: 20ch; font-size: clamp(1.9rem, 3.8vw, 3rem); }
html:lang(ar) .hero h1 { letter-spacing: 0; font-weight: 800; line-height: 1.35; max-width: 18ch; }
.lead { margin-top: 20px; font-size: 1.08rem; color: var(--text); max-width: 54ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: .95rem;
  padding: 11px 22px; border-radius: 6px; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; min-height: 48px;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #bf1f27; }
.btn-ghost { border-color: var(--heading); color: var(--heading); background: transparent; }
.btn-ghost:hover { background: var(--heading); color: var(--surface); }
.btn-white { background: #fff; color: #102565; }
.btn-white:hover { background: #e6eefc; }

.logo-card {
  margin: 0; border-radius: 14px; overflow: hidden;
  border: 6px solid var(--frame); box-shadow: var(--shadow);
  background: var(--frame);
}
.logo-card img { width: 100%; aspect-ratio: 874 / 451; object-fit: cover; }

/* Slanted navy band with red stripe, as on the brochure header */
.band {
  --x: clamp(24px, 22vw, 300px);
  background: linear-gradient(var(--slant),
    transparent 0 var(--x),
    var(--red) var(--x) calc(var(--x) + 16px),
    transparent calc(var(--x) + 16px) calc(var(--x) + 26px),
    var(--navy) calc(var(--x) + 26px));
  color: #fff;
}
.band .wrap {
  display: flex; justify-content: flex-end; align-items: center; gap: 14px;
  min-height: 58px; font-weight: 800; letter-spacing: .14em; font-size: .9rem;
}
html:lang(ar) .band .wrap { letter-spacing: 0; font-size: 1rem; }
.sep { color: var(--red); font-weight: 900; }

/* ---------- Sections ---------- */
section { scroll-margin-top: 80px; }
.section { padding-block: 84px; }
.section.flush-top { padding-top: 0; }
.section.flush-bottom { padding-bottom: 0; }
.section-head { max-width: 62ch; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -.01em; }
html:lang(ar) .section-head h2 { letter-spacing: 0; }
.section-head p { margin-top: 12px; color: var(--muted); font-size: 1.04rem; }

/* Marketplace notice */
.market {
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 30px 32px; border-inline-start: 6px solid var(--red);
}
.market-icon {
  width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--heading); border-radius: 10px;
}
.market-icon svg { width: 32px; height: 32px; }
.market h2 { font-size: 1.35rem; font-weight: 800; }
.market p { margin-top: 6px; color: var(--muted); max-width: 64ch; }

/* Product families: brochure-style tab banners */
.families { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.family {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 0 0 26px; overflow: hidden;
}
.tab {
  display: flex; align-items: stretch; width: fit-content; max-width: calc(100% - 20px);
  margin-top: 18px; background: var(--navy); color: #fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  padding-inline-end: 34px;
}
[dir="rtl"] .tab { clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%); }
.tab-icon { display: grid; place-items: center; width: 50px; background: var(--red); flex: none; }
.tab-icon svg { width: 22px; height: 22px; }
.tab h3 {
  color: #fff; font-size: .98rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding-block: 12px; padding-inline-start: 16px; line-height: 1.3;
}
html:lang(ar) .tab h3 { letter-spacing: 0; text-transform: none; font-size: 1.05rem; padding-block: 10px; }
.items {
  list-style: none; margin: 22px 0 0; padding: 0 26px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px;
}
.items li { position: relative; padding-inline-start: 18px; font-size: .95rem; }
.items li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 7px; height: 7px; background: var(--red);
}

/* Brochure */
.brochure-alt { background: var(--surface-2); }
.brochure-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 44px; align-items: center; }
.brochure-grid .section-head { margin-bottom: 0; }
.brochure-grid .actions { margin-top: 24px; }
.brochure-shot {
  display: block; border-radius: 10px; overflow: hidden;
  border: 6px solid var(--frame); box-shadow: var(--shadow); background: var(--frame);
}
.brochure-shot img { width: 100%; aspect-ratio: 1408 / 768; object-fit: cover; transition: transform .4s ease; }
.brochure-shot:hover img { transform: scale(1.02); }

/* Contact */
.contact {
  position: relative; overflow: hidden;
  background: var(--navy-deep); color: #fff; border-radius: 10px;
  padding: 0 40px 44px;
}
.contact::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: -60px; width: 260px;
  background: linear-gradient(var(--slant), transparent 0 40px, var(--red) 40px 56px, transparent 56px 68px, var(--navy) 68px);
  pointer-events: none;
}
.contact > * { position: relative; z-index: 1; }
.contact-tab {
  display: inline-block; background: var(--red); color: #fff;
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem;
  padding: 10px 22px;
}
html:lang(ar) .contact-tab { letter-spacing: 0; font-size: .95rem; }
.contact h2 { color: #fff; margin-top: 28px; font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; }
.contact p { margin-top: 10px; color: #c9d5f5; max-width: 56ch; }
.mail-big {
  display: inline-block; margin-top: 22px;
  font-size: clamp(1.2rem, 3.6vw, 2.3rem); font-weight: 800; color: #fff;
  text-decoration: none; border-bottom: 3px solid var(--red); overflow-wrap: anywhere;
  font-family: var(--font);
}
.mail-big:hover { border-bottom-color: #fff; }
.contact .actions { margin-top: 28px; }

/* Footer */
.site-footer { margin-top: 84px; border-top: 5px solid var(--red); background: var(--navy); color: #dbe4fb; }
.site-footer .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  padding-block: 22px; font-size: .9rem;
}
.site-footer a { color: #fff; text-decoration: none; font-weight: 600; }
.site-footer a:hover { text-decoration: underline; }
.foot-trades { font-weight: 800; letter-spacing: .12em; font-size: .78rem; color: #fff; }
html:lang(ar) .foot-trades { letter-spacing: 0; font-size: .9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 36px; padding-block: 48px 44px; }
  .market { grid-template-columns: 1fr; padding: 26px 22px; gap: 18px; }
  .families { grid-template-columns: 1fr; }
  .brochure-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact { padding: 0 24px 34px; }
  .contact::after { width: 120px; inset-inline-end: -70px; }
  .section { padding-block: 60px; }
  .site-footer { margin-top: 60px; }
}
@media (max-width: 520px) {
  .wrap { width: calc(100% - 32px); }
  .brand-word { display: none; }
  .items { grid-template-columns: 1fr; padding: 0 20px; }
  .band { --x: 8px; }
  .band .wrap { font-size: .72rem; letter-spacing: .08em; gap: 8px; }
  .tab h3 { font-size: .86rem; }
  .actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot::after { animation: none; }
  .brochure-shot img { transition: none; }
}