/* Cairo — self-hosted, not Google Fonts. A third-party font request would be an extra DNS lookup,
   connection and round trip before any text renders, and it would tell Google about every visitor.
   These two files are the official woff2 subsets, variable across weight 400-800, so one file per
   script covers every weight the page uses. 63 KB total.

   `swap` on purpose: text paints immediately in the system font and reflows when Cairo arrives.
   The alternative (`block`) shows nothing at all for up to three seconds, which on a slow Egyptian
   mobile connection is the difference between a usable page and a blank one. */
@font-face {
  font-family: "Cairo";
  src: url("fonts/cairo-arabic.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Cairo";
  src: url("fonts/cairo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Enab Super Market — home site.
   No framework, no build step, no web fonts, no network requests beyond the two logo files.
   Everything below is hand-written so the whole page is a couple of round trips on a phone on
   Egyptian mobile data, which is what the customers actually browse on. */

:root {
  --blue: hsl(213 87% 30%);
  --blue-deep: hsl(222 47% 15%);
  --magenta: hsl(319 64% 39%);
  --bg: hsl(40 33% 99%);
  --surface: #fff;
  --text: hsl(222 47% 12%);
  --muted: hsl(222 12% 45%);
  --line: hsl(222 15% 90%);
  --radius: 16px;
  --shadow: 0 1px 2px rgb(16 24 40 / .04), 0 12px 32px -12px rgb(16 24 40 / .12);
  --max: 1140px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(222 20% 8%);
    --surface: hsl(222 20% 11%);
    --text: hsl(40 33% 96%);
    --muted: hsl(222 10% 62%);
    --line: hsl(222 15% 20%);
    --blue: hsl(213 85% 62%);
    --magenta: hsl(319 60% 62%);
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -12px rgb(0 0 0 / .6);
  }
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* System stack only. A web font would be the single heaviest thing on the page, and Arabic
     web fonts are especially large — the OS already ships good ones. */
  font-family: "Cairo", "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", Tahoma, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

/* Dev-environment bar. Only ever inserted off production (see main.js). */
.env-bar {
  background: hsl(28 92% 52%); color: #fff; text-align: center;
  font-size: .82rem; font-weight: 650; padding: 6px 14px; letter-spacing: .01em;
}
/* The header is sticky, so it has to sit below the bar rather than over it. */
.is-dev .site-header { top: 0; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-block-end: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck { border-block-end-color: var(--line); box-shadow: 0 4px 20px -12px rgb(16 24 40 / .25); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-inline-end: auto; }
.brand img { height: 38px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 12px; border-radius: 10px; text-decoration: none; font-size: .95rem;
  color: var(--muted); transition: color .2s, background-color .2s;
}
.nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
@media (max-width: 820px) {
  /* Not `display:none`. The page is one long document navigated by anchors, so removing the nav
     on phones — where most of these customers actually are — leaves them scrolling blindly.
     It becomes a compact scrollable strip under the header instead. */
  .site-header .wrap { height: auto; padding-block: 10px; flex-wrap: wrap; }
  .nav {
    order: 3; width: 100%; overflow-x: auto; gap: 2px; padding-block-start: 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; font-size: .88rem; padding: 6px 10px; }
  /* Fades the strip's trailing edge so it reads as scrollable. Without it the cut-off link looks
     like a rendering fault rather than an invitation to swipe. */
  .nav-scroll { position: relative; order: 3; width: 100%; min-width: 0; }
  .nav-scroll::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 34px;
    background: linear-gradient(to left, var(--bg), transparent); pointer-events: none;
  }
  html[dir="ltr"] .nav-scroll::after { background: linear-gradient(to right, var(--bg), transparent); }
  .nav { order: 0; }
  .brand img { height: 32px; }

  /* The hero art is decoration. On a phone it was a large empty circle pushing the real content
     and the call to action below the fold, so it shrinks rather than dominates. */
  .hero-art { max-width: 230px; }
  .float-card { font-size: .8rem; padding: 9px 12px; }
  /* Fully inside the art box: at negative insets these ran past the viewport edge and were
     clipped mid-word on a 375px screen. */
  .fc-1 { inset-inline-start: 0; inset-block-start: 0; }
  .fc-2 { inset-inline-end: 0; inset-block-start: 66%; }
  .fc-3 { inset-inline-start: 0; inset-block-end: 0; }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .2s;
  white-space: nowrap;
}
.btn-primary {
  color: #fff;
  background: linear-gradient(115deg, var(--blue), var(--magenta));
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--magenta) 70%, transparent);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--magenta) 75%, transparent); }
.btn-ghost { border-color: var(--line); background: var(--surface); color: var(--text); }
.btn-ghost:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.btn-sm { padding: 9px 16px; font-size: .9rem; }
.lang { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px;
        padding: 7px 14px; font: inherit; font-size: .85rem; cursor: pointer; transition: color .2s, border-color .2s; }
.lang:hover { color: var(--text); border-color: var(--blue); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(48px, 9vw, 104px) clamp(40px, 7vw, 88px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--magenta) 12%, transparent);
  color: var(--magenta); font-size: .85rem; font-weight: 650; margin: 0 0 18px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }

h1 { text-wrap: balance; font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 18px; font-weight: 800; }
h1 .grad {
  background: linear-gradient(115deg, var(--blue), var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--muted); margin: 0 0 28px; max-width: 52ch; }
@media (max-width: 900px) { .lede { margin-inline: auto; } }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .hero-cta { justify-content: center; } }

.trust { display: flex; gap: 26px; margin-block-start: 34px; flex-wrap: wrap; }
@media (max-width: 900px) { .trust { justify-content: center; } }
.trust div { display: flex; flex-direction: column; }
.trust b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.trust span { font-size: .85rem; color: var(--muted); }

/* Decorative produce cluster — pure CSS/SVG, no images to download. */
.hero-art { position: relative; aspect-ratio: 1; max-width: 400px; margin-inline: auto; width: 100%; }
.blob {
  position: absolute; inset: -6%;
  /* No hard edge: a radial gradient fading to nothing, so it reads as light rather than as a
     grey disc sitting behind the logo. */
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--magenta) 22%, transparent), transparent 72%),
    radial-gradient(closest-side at 62% 38%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 68%);
  filter: blur(6px);
  animation: breathe 12s var(--ease) infinite;
}
/* A thin ring, drawn only as a border, slowly rotating. Gives the cluster a centre without
   putting a filled shape behind the logo. */
.ring-orbit {
  position: absolute; inset: 8%; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--magenta) 26%, transparent);
  border-inline-end-color: color-mix(in srgb, var(--blue) 34%, transparent);
  border-block-start-color: transparent;
  animation: spin 26s linear infinite;
}
.ring-orbit.two { inset: 20%; border-color: color-mix(in srgb, var(--blue) 18%, transparent);
                  border-block-end-color: transparent; animation-duration: 38s; animation-direction: reverse; }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.05); opacity: .75; } }
@keyframes spin { to { transform: rotate(360deg); } }
.float-card {
  position: absolute; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600;
  animation: bob 6s var(--ease) infinite;
}
.float-card svg { width: 20px; height: 20px; flex: none; }
/* Kept inside the art box rather than hanging off it: at -6% these ran past the viewport edge on
   a phone and got clipped mid-word. */
.fc-1 { inset-block-start: 4%;  inset-inline-start: 0;   animation-delay: -.6s; }
.fc-2 { inset-block-start: 62%; inset-inline-end: -2%;   animation-delay: -2.4s; }
.fc-3 { inset-block-end: 4%;    inset-inline-start: 6%;  animation-delay: -4.1s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero-logo { position: absolute; inset: 0; margin: auto; width: 56%; height: auto; object-fit: contain; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
section { padding-block: clamp(52px, 8vw, 92px); }
section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.section-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(32px, 5vw, 52px); }
h2 { text-wrap: balance; font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 12px; font-weight: 780; }
.section-head p { color: var(--muted); margin: 0; font-size: 1.03rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); }
.card .ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-block-end: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 14%, transparent), color-mix(in srgb, var(--magenta) 14%, transparent));
  color: var(--blue);
}
.card .ico svg { width: 23px; height: 23px; }
.card h3 { margin: 0 0 7px; font-size: 1.1rem; font-weight: 700; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }

.alt { background: color-mix(in srgb, var(--blue) 4%, var(--bg)); }

/* Categories — icon tiles, all inline SVG so the section costs no extra requests. */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 14px; }
.cat {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 22px 12px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: transform .28s var(--ease), border-color .28s, box-shadow .28s var(--ease);
}
.cat:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--magenta) 40%, var(--line)); box-shadow: var(--shadow); }
.cat span { font-size: .92rem; font-weight: 620; }
.cat .ring {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, transparent), color-mix(in srgb, var(--magenta) 16%, transparent));
  color: var(--magenta); transition: transform .28s var(--ease);
}
.cat:hover .ring { transform: scale(1.08) rotate(-4deg); }
.cat .ring svg { width: 26px; height: 26px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; counter-reset: s; }
.step { position: relative; padding-block-start: 12px; }
.step::before {
  counter-increment: s; content: counter(s);
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--blue), var(--magenta));
  margin-block-end: 14px;
}
.step h3 { margin: 0 0 6px; font-size: 1.05rem; }
.step p { margin: 0; color: var(--muted); font-size: .94rem; }

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--blue-deep), var(--blue) 55%, var(--magenta));
  color: #fff; border-radius: 24px; padding: clamp(34px, 6vw, 58px); text-align: center; position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgb(255 255 255 / .16), transparent 62%); pointer-events: none;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgb(255 255 255 / .82); max-width: 52ch; margin: 0 auto 26px; }
.cta-band .btn-primary { background: #fff; color: var(--blue-deep); box-shadow: 0 10px 30px -12px rgb(0 0 0 / .5); }

/* Footer */
footer { border-block-start: 1px solid var(--line); padding-block: 44px 30px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }
footer h4 { margin: 0 0 12px; font-size: .95rem; font-weight: 700; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer a { color: var(--muted); text-decoration: none; font-size: .93rem; transition: color .2s; }
footer a:hover { color: var(--blue); }
footer img { height: 34px; width: auto; margin-block-end: 12px; }
.copy { margin-block-start: 30px; padding-block-start: 20px; border-block-start: 1px solid var(--line);
        color: var(--muted); font-size: .85rem; text-align: center; }

/* ── Scroll reveal. Opt-in class so nothing is hidden if JS never runs. ────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .blob, .float-card, .eyebrow .dot, .ring-orbit { animation: none; }
  .btn:hover, .card:hover { transform: none; }
}

@media (pointer: coarse) {
  /* 44px minimum touch target — the small header buttons were under it. */
  .btn-sm, .lang { min-height: 44px; }
  .nav a { min-height: 40px; display: flex; align-items: center; }
}

:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 12px; inset-block-start: 12px; z-index: 100; background: var(--surface);
              padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line); }