/* 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; }
}

/* ── 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; }

/* ── Hero art on a phone ────────────────────────────────────────────────────────────────────────
   This block has to sit AFTER the .hero-art/.float-card/.fc-* rules above, not with the rest of
   the mobile overrides near the top of the file. It used to live up there, and every declaration
   in it was dead: same specificity as the base rules, but earlier in the source, so the base rules
   won at every viewport. The art rendered at its full 400px cap on a 360px screen — measured 320px
   wide with a computed max-width of 400px — which is exactly the "large empty circle pushing the
   call to action below the fold" the original comment said it was fixing.

   A media query does NOT raise specificity. Ordering is the only thing deciding this. */
@media (max-width: 820px) {
  .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; }
}
@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; }
/* R4-AW-SEC-005: this was a `style=""` attribute on the paragraph, and the site's enforced CSP is
   `style-src 'self'` with no 'unsafe-inline' — so it was blocked in the container and that one
   paragraph rendered unstyled, while looking perfect in any local file:// or dev preview. Placed
   after the base footer rules on purpose: a media query does not raise specificity, so a block
   written before the rules it overrides is dead (the hand-written, no-build-step trap). */
.foot-about { color: var(--muted); font-size: .93rem; margin: 0; max-width: 34ch; }
.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 ───────────────────────────────────────────────────────────
   R4-HOME-001: the hide is gated on `.js`, which main.js sets on <html> as its first statement.
   The comment here used to say "opt-in class so nothing is hidden if JS never runs" and it was
   simply not true: `.reveal` is in the MARKUP and `.in` is added by an IntersectionObserver, so
   with no JavaScript all 21 revealed elements — the six category tiles included — sat at opacity
   0 for ever. Gated this way, a script that fails to load or fails to parse leaves the page
   fully visible, which is the whole claim this site's own header comment makes. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .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) {
  /* `.js` here too: a media query does not raise specificity, and `.js .reveal` (two classes)
     outranks a bare `.reveal` (one) wherever it appears — so without it this override lost and a
     reader who asked for reduced motion still got the fade. */
  .js .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; }
  /* The footer's link columns are the other place a finger has to hit a bare text link. They
     measured 28px tall — the line box and nothing else. `inline-flex` keeps them inline inside
     their list item while letting min-height apply, which it would not on a plain inline box. */
  .foot-grid li a { min-height: 40px; display: inline-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); }