/* =========================================================
   DAR DELTA IT — Stylesheet
   Bilingual (AR/RTL + EN/LTR) corporate site
   ========================================================= */

:root {
  /* Brand palette — DAR DELTA green.
     (Variable names kept from the original build; values are now green shades.) */
  --navy-900: #16240e;  /* deep forest — dark sections */
  --navy-800: #1e3213;
  --navy-700: #2c4a1c;
  --blue-600: #5f8f26;  /* primary green */
  --blue-500: #6faf2e;
  --cyan-400: #a4cf4a;  /* bright lime accent */
  --cyan-300: #bfe06a;

  --ink: #0f172a;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --bg: #ffffff;
  --bg-soft: #f6f8fc;

  --white: #ffffff;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-md: 0 12px 30px -12px rgba(15, 23, 42, .18);
  --shadow-lg: 0 30px 60px -20px rgba(10, 31, 68, .35);

  --grad-brand: linear-gradient(120deg, var(--cyan-400), var(--blue-600));
  --maxw: 1180px;
  --header-h: 74px;

  --font-ar: 'Tajawal', system-ui, sans-serif;
  --font-en: 'Inter', system-ui, sans-serif;
  --font: var(--font-ar);
}

html[lang="en"] { --font: var(--font-en); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* Reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Skip link */
.skip-link {
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 200;
  background: var(--navy-900); color: #fff; padding: 10px 16px; border-radius: 8px;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn-sm { padding: 10px 20px; font-size: .92rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--grad-brand); color: #16240e; box-shadow: 0 10px 24px -8px rgba(95,143,38,.6); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(95,143,38,.7); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cyan-400); outline-offset: 2px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.site-header.scrolled { background: rgba(255,255,255,.92); border-bottom-color: var(--slate-200); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }

.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo-mark { width: auto; height: 42px; flex: none; object-fit: contain; }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-text strong { font-family: var(--font-en); font-size: 1.12rem; letter-spacing: .06em; color: var(--navy-900); font-weight: 800; }
.logo-text em { font-style: normal; font-size: .72rem; color: var(--slate-500); font-weight: 500; }

.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav a {
  padding: 9px 11px; border-radius: 8px; font-weight: 500; font-size: .92rem; color: var(--slate-700);
  transition: color .2s, background .2s; white-space: nowrap;
}
.main-nav a:hover { color: var(--blue-600); background: var(--slate-100); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--slate-200); color: var(--navy-900); font-weight: 700; font-size: .9rem;
  font-family: var(--font-en); transition: border-color .2s, color .2s, background .2s;
}
.lang-toggle:hover { border-color: var(--blue-500); color: var(--blue-600); background: var(--slate-100); }

/* Mobile nav toggle */
.nav-toggle { display: none; width: 44px; height: 40px; position: relative; }
.nav-toggle span {
  position: absolute; inset-inline: 10px; height: 2px; background: var(--navy-900); border-radius: 2px;
  transition: transform .3s, opacity .2s; }
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; padding-top: calc(var(--header-h) + 70px); padding-bottom: 110px;
  color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(1200px 600px at 80% -10%, #35651d 0%, transparent 60%),
              linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, #12280d 100%);
}
html[dir="ltr"] .hero { background: radial-gradient(1200px 600px at 20% -10%, #35651d 0%, transparent 60%),
              linear-gradient(200deg, var(--navy-900) 0%, var(--navy-800) 55%, #12280d 100%); }
/* Background video (Saudi heritage footage) fills the whole hero */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: -4;
  pointer-events: none;
}
/* Static heritage image (castle + carpet) kept on the text side,
   fading into the video toward the centre. */
/* Heritage image fixed on the physical RIGHT in BOTH languages (the
   original Arabic composition), mirrored so the castle faces inward and
   fades into the video toward the centre. English matches this exact
   background; only the text alignment differs. */
.hero-heritage {
  position: absolute; top: 0; bottom: 0; right: 0;
  height: 100%; width: 46%; object-fit: cover; object-position: left center;
  z-index: -3; pointer-events: none; transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 100%);
          mask-image: linear-gradient(to right, #000 52%, transparent 100%);
}
@media (max-width: 700px) { .hero-heritage { display: none; } }
/* Green tint over the video — keeps white text readable */
/* Symmetric green tint so white text stays readable on either side
   (Arabic text sits right, English left) over the same background. */
.hero-overlay {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(14,24,9,.82) 0%, rgba(16,28,10,.52) 42%, rgba(18,34,12,.64) 100%);
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1; opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(1000px 500px at 70% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero-inner { position: relative; }
.hero-content { max-width: 720px; }
.eyebrow {
  display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan-300);
  padding: 6px 14px; border: 1px solid rgba(103,232,249,.35); border-radius: 999px; margin-bottom: 22px;
}
.hero-title { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,.45); }
html[lang="en"] .hero-title { letter-spacing: -0.02em; }
.hero-sub { font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: #e2ecd7; max-width: 620px; margin-bottom: 34px; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 48px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 40px; }
.hero-badge { display: flex; flex-direction: column; }
.hero-badge strong { font-size: 2rem; font-weight: 800; color: #fff; font-family: var(--font-en); }
.hero-badge span { font-size: .92rem; color: var(--slate-400); }
.hero-fade { position: absolute; inset-inline: 0; bottom: 0; height: 90px; background: linear-gradient(transparent, rgba(255,255,255,.06)); pointer-events: none; }

/* ---------- Services visual strip ---------- */
.services-strip { background: var(--navy-900); }
.svc-row { display: grid; grid-template-columns: repeat(5, 1fr); }
.svc-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 150px; padding: 24px 14px; text-align: center; color: #fff;
  background-color: #1c2f12; background-size: cover; background-position: center;
  transition: transform .35s ease;
}
/* Dark green tint so labels stay readable over any photo */
.svc-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18,40,13,.5) 0%, rgba(11,22,7,.85) 100%);
  transition: background .35s ease;
}
/* Thin divider between tiles */
.svc-tile:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-end: 0; top: 16%; bottom: 16%;
  width: 1px; background: rgba(255,255,255,.1);
}
.svc-tile:hover { transform: translateY(-3px); }
.svc-tile:hover::before { background: linear-gradient(180deg, rgba(24,52,16,.35) 0%, rgba(11,22,7,.7) 100%); }
.svc-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: rgba(164,207,74,.12); color: var(--cyan-300); }
.svc-icon svg { width: 26px; height: 26px; }
.svc-label { font-weight: 700; font-size: 1rem; letter-spacing: .01em; }

/* Photo backgrounds (added automatically when these files exist) */
.svc-networks   { background-image: url(../assets/svc-networks.jpg); }
.svc-wireless   { background-image: url(../assets/svc-wireless.jpg); }
.svc-fiber      { background-image: url(../assets/svc-fiber.jpg); }
.svc-microwave  { background-image: url(../assets/svc-microwave.jpg); }
.svc-datacenter { background-image: url(../assets/svc-datacenter.jpg); }

@media (max-width: 900px) { .svc-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .svc-row { grid-template-columns: repeat(2, 1fr); }
  .svc-tile { min-height: 128px; padding: 20px 10px; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 110px) 0; }
.section-eyebrow { display: inline-block; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 14px; }
.section-eyebrow.light { color: var(--cyan-300); }
.section-title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); color: var(--navy-900); margin-bottom: 18px; }
.section-title.light { color: #fff; }
.section-lead { font-size: 1.1rem; color: var(--slate-500); max-width: 640px; }
.section-head.center { text-align: center; margin-inline: auto; margin-bottom: 56px; max-width: 720px; }
.section-head.center .section-lead { margin-inline: auto; }

/* ---------- About ---------- */
.about { background: var(--bg-soft); }
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.about-media { display: flex; justify-content: center; }
.about-img {
  width: 100%; max-width: 460px; border-radius: 14px; display: block;
  box-shadow: var(--shadow-lg);
}
.about-text p { color: var(--slate-700); margin-bottom: 18px; font-size: 1.05rem; }
.about-list { display: grid; gap: 12px; margin-top: 22px; }
.about-list li { position: relative; padding-inline-start: 32px; color: var(--slate-700); font-weight: 500; }
.about-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 7px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--grad-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  background: var(--blue-600);
}

/* ---------- Services cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  position: relative; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 34px 28px; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 3px; width: 100%;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: inline-start;
  transition: transform .3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card-icon {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 22px;
  background: linear-gradient(135deg, rgba(164,207,74,.18), rgba(95,143,38,.16));
  color: var(--blue-600);
}
.card-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; }
.card h3 { font-size: 1.22rem; color: var(--navy-900); margin-bottom: 10px; }
.card p { color: var(--slate-500); font-size: 1rem; }

/* ---------- Why (dark) ---------- */
.why { background: linear-gradient(160deg, var(--navy-900), #12280d); color: #fff; }
.why .section-head.center { max-width: 800px; }
.why-lead { color: #cddcb4; max-width: 760px; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.why-item { position: relative; padding-top: 12px; }
.why-num { font-family: var(--font-en); font-size: 2.4rem; font-weight: 800; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-bottom: 12px; }
.why-item h3 { font-size: 1.22rem; margin-bottom: 10px; color: #fff; }
.why-item p { color: #a9bbdc; font-size: .98rem; }

/* ---------- Stats ---------- */
.stats { background: var(--bg-soft); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat { padding: 20px; }
.stat strong { display: block; font-family: var(--font-en); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; color: var(--navy-900); line-height: 1; margin-bottom: 8px; }
.stat span { color: var(--slate-500); font-weight: 500; }

/* ---------- Clients & Partners logo walls ---------- */
.partners { background: var(--bg-soft); }
.clients-statement { font-size: clamp(1.4rem, 2.8vw, 2rem); max-width: 780px; margin-inline: auto; }
.logos-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.logo-item {
  display: grid; place-items: center; min-height: 132px; padding: 18px;
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.logo-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
/* Logos shown in full colour (official emblems + brand marks) */
.logo-item img { max-width: 86%; max-height: 92px; object-fit: contain;
  transition: transform .25s ease; }
.logo-item:hover img { transform: scale(1.04); }
/* Partner brand marks: unified height so the whole row looks consistent */
.partners .logo-item img { height: 52px; width: auto; max-width: 88%; max-height: none; }
/* Empty placeholder tiles (until real logos are added) */
.logo-empty svg { width: 40px; height: 40px; fill: none; stroke: var(--slate-400);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) { .logos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .logos-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .logo-item { min-height: 108px; padding: 14px; }
  .logo-item img { max-height: 72px; }
}

/* ---------- Certifications / Accreditations cards ---------- */
.certs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cert-card {
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 36px 28px 30px; text-align: center; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cert-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.cert-logo { height: 88px; display: grid; place-items: center; margin-bottom: 14px; color: var(--blue-600); }
.cert-logo img { max-height: 88px; max-width: 150px; object-fit: contain; }
.cert-logo svg { width: 62px; height: 62px; }
.cert-title { font-size: 1.32rem; font-weight: 800; color: var(--navy-900); margin-bottom: 8px; }
.cert-sub { color: var(--blue-600); font-weight: 600; font-size: 1rem; margin-bottom: 14px; }
.cert-desc { color: var(--slate-500); font-size: .98rem; line-height: 1.75; margin-bottom: 24px; flex: 1; }
.cert-btn { margin-top: auto; }
@media (max-width: 1040px) { .certs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .certs-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contact-text p { color: var(--slate-500); font-size: 1.08rem; margin-bottom: 28px; }
.contact-list { display: grid; gap: 16px; }
.contact-list li { display: flex; align-items: center; gap: 14px; color: var(--slate-700); font-size: 1.02rem; }
.contact-list a:hover { color: var(--blue-600); }
.contact-list .ci { font-size: 1.15rem; width: 26px; text-align: center; }

.contact-form { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-md); }
/* Spam honeypot — hidden from humans, tempting to bots */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .92rem; color: var(--slate-700); margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--slate-200); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--bg-soft); transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 4px rgba(95,143,38,.15); }
.field textarea { resize: vertical; }
.form-note { margin-top: 14px; font-size: .95rem; font-weight: 600; text-align: center; min-height: 1.2em; }
.form-note.success { color: #059669; }
.form-note.error { color: #dc2626; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #b9c8e6; }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding: 64px 24px 44px; }
.logo--footer .logo-text strong { color: #fff; }
.logo--footer .logo-text em { color: var(--slate-400); }
.footer-brand p { margin-top: 18px; max-width: 340px; color: #93a6cc; font-size: .98rem; }
.footer-col h4 { color: #fff; font-size: 1.02rem; margin-bottom: 16px; }
.footer-col a { display: block; padding: 5px 0; color: #a9bbdc; font-size: .96rem; transition: color .2s; }
.footer-col a:hover { color: var(--cyan-300); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.09); padding: 20px 0; }
.footer-bottom p { text-align: center; font-size: .9rem; color: #7f92ba; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .main-nav {
    position: fixed; inset-inline: 0; top: var(--header-h); z-index: 90;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--slate-200); box-shadow: var(--shadow-md);
    padding: 10px 16px 18px; transform: translateY(-140%); transition: transform .32s cubic-bezier(.2,.7,.2,1);
    visibility: hidden;
  }
  .main-nav.open { transform: translateY(0); visibility: visible; }
  .main-nav a { padding: 14px 12px; border-radius: 8px; font-size: 1.05rem; }
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-media { order: -1; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .container { padding-inline: 18px; }
  .cards { grid-template-columns: 1fr; }
  .why-grid, .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-badges { gap: 24px; }
  .hero-badge strong { font-size: 1.6rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .header-cta { display: none; }
}