/* ==========================================================================
   XJ SPORTS GROUP — Shared Stylesheet
   Corporate Modern + Premium Industrial
   --------------------------------------------------------------------------
   DESIGN TOKENS — edit these values to re-skin the whole site.
   ========================================================================== */
:root {
  /* Brand colors */
  --color-primary:        #003B8F;   /* XJ Blue */
  --color-primary-strong: #002C6B;   /* hover / pressed blue */
  --color-navy:           #0A1F44;   /* Dark Navy — ink & dark sections */
  --color-navy-deep:      #06142E;   /* deepest navy */
  --color-accent:         #FFD400;   /* XJ Yellow — accent only */
  --color-accent-strong:  #E6BE00;   /* yellow hover */

  /* Neutrals */
  --color-ink:        #0A1F44;       /* headings */
  --color-body:       #44515F;       /* body text */
  --color-muted:      #7A8699;       /* secondary text */
  --color-line:       #E4E9F0;       /* hairlines / borders */
  --color-surface:    #F5F7FA;       /* light section bg */
  --color-surface-2:  #EDF1F6;       /* alt light bg */
  --color-white:      #FFFFFF;
  --color-on-dark:    rgba(255,255,255,.74); /* body text on navy */
  --color-on-dark-mut:rgba(255,255,255,.52);

  /* Typography */
  --font-display: "Archivo Expanded","Archivo","Arial Narrow",sans-serif;
  --font-head:    "Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:    "Manrope","Helvetica Neue",Arial,sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10,31,68,.06), 0 2px 6px rgba(10,31,68,.06);
  --shadow-md: 0 8px 24px -8px rgba(10,31,68,.16);
  --shadow-lg: 0 24px 60px -18px rgba(10,31,68,.28);

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .22s;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-white);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4,h5 { color: var(--color-ink); line-height: 1.08; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
p { text-wrap: pretty; }
strong { font-weight: 700; color: var(--color-ink); }

/* Accessible focus ring */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.skip-link {
  position: absolute; left: 0; top: -9999px; z-index: 200;
  background: var(--color-navy); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-8); }
.section--surface { background: var(--color-surface); }
.section--surface-2 { background: var(--color-surface-2); }
.section--navy { background: var(--color-navy); color: var(--color-on-dark); }
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4 { color: #fff; }

/* Eyebrow label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--color-accent); display: inline-block; }
.section--navy .eyebrow { color: var(--color-accent); }
.section--navy .eyebrow::before { background: var(--color-accent); }

.section-head { max-width: 760px; margin-bottom: var(--space-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 52px);
  text-transform: uppercase; letter-spacing: -.005em; line-height: .98;
}
.section-head p { margin-top: 20px; font-size: 18px; color: var(--color-body); }
.section--navy .section-head p { color: var(--color-on-dark); }

.lede { font-size: 19px; line-height: 1.6; color: var(--color-body); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  padding: 15px 26px; border-radius: var(--radius-sm); border: 2px solid transparent;
  cursor: pointer; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  line-height: 1; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(0) scale(.985); }
.btn--primary { background: var(--color-primary); color: #fff; box-shadow: 0 1px 2px rgba(0,59,143,.2); }
.btn--primary:hover { background: var(--color-primary-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--accent { background: var(--color-accent); color: var(--color-navy); }
.btn--accent:hover { background: var(--color-accent-strong); transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(255,212,0,.6); }
.btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-line); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }
.btn--on-dark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.btn--on-dark:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn--lg { padding: 18px 32px; font-size: 16px; }
.btn--block { width: 100%; justify-content: center; }

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--color-primary);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.textlink svg { width: 16px; height: 16px; }
.textlink:hover { gap: 13px; color: var(--color-primary-strong); }
.section--navy .textlink { color: var(--color-accent); }

/* ==========================================================================
   HEADER / NAV  (CSS-only mobile menu via checkbox)
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.scrolled { background: rgba(255,255,255,.97); box-shadow: 0 6px 24px -10px rgba(10,31,68,.22); }
.nav {
  display: flex; align-items: center; gap: 20px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand__mark { width: 42px; height: 42px; object-fit: contain; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--color-navy); letter-spacing: -.01em; }
.brand__tag { font-size: 11px; font-weight: 600; color: var(--color-muted); letter-spacing: .02em; margin-top: 3px; }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--color-navy);
  padding: 9px 13px; border-radius: var(--radius-sm); position: relative;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__links a:hover { color: var(--color-primary); background: var(--color-surface); }
.nav__links a[aria-current="page"] { color: var(--color-primary); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px;
  background: var(--color-accent); border-radius: 2px;
}
.nav__cta { margin-left: 8px; }

/* mobile menu controls — hidden on desktop */
.nav__toggle, .nav__toggle-label, .nav__close { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
/* compact page hero (interior pages) */
.pagehero { position: relative; color: #fff; isolation: isolate; background: var(--color-navy); }
.pagehero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(6,20,46,.93) 0%, rgba(6,20,46,.74) 55%, rgba(6,20,46,.46) 100%);
}
.pagehero__inner { padding-block: var(--space-8); max-width: 760px; }
.breadcrumb { display: flex; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb span { color: rgba(255,255,255,.32); }
.pagehero h1 { font-family: var(--font-display); color: #fff; text-transform: uppercase; font-size: clamp(34px,5vw,60px); line-height: .98; }
.pagehero p { margin-top: 18px; font-size: 19px; color: rgba(255,255,255,.82); max-width: 640px; }

/* ==========================================================================
   GENERIC GRID + CARDS
   ========================================================================== */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.split--media-first .split__media { order: -1; }

.card {
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__media { aspect-ratio: 16/10; background: var(--color-navy); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card__kicker { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); }
.card__body h3 { font-size: 22px; }
.card__body p { font-size: 16px; color: var(--color-body); }
.card__foot { margin-top: auto; padding-top: 6px; }

/* Service / feature card with icon */
.feature {
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  padding: 30px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  position: relative; overflow: hidden;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.feature__icon {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  display: grid; place-items: center; background: var(--color-surface); color: var(--color-primary);
  margin-bottom: 20px;
}
.feature__icon svg { width: 28px; height: 28px; }
.feature h3 { font-size: 21px; margin-bottom: 10px; }
.feature p { font-size: 16px; color: var(--color-body); }
.feature__num {
  position: absolute; top: 18px; right: 22px; font-family: var(--font-display);
  font-size: 34px; color: var(--color-surface-2); font-weight: 800; line-height: 1;
}
.section--navy .feature { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.section--navy .feature__icon { background: rgba(255,212,0,.14); color: var(--color-accent); }
.section--navy .feature p { color: var(--color-on-dark); }
.section--navy .feature__num { color: rgba(255,255,255,.07); }

/* ==========================================================================
   STATS
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.section--navy .stats { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.stat-cell { background: #fff; padding: 36px 28px; text-align: center; }
.section--navy .stat-cell { background: var(--color-navy); }
.stat-cell b { font-family: var(--font-display); font-size: clamp(38px,4.6vw,56px); color: var(--color-primary); display: block; line-height: 1; }
.section--navy .stat-cell b { color: var(--color-accent); }
.stat-cell span { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.section--navy .stat-cell span { color: var(--color-on-dark); }

/* ==========================================================================
   PROCESS TIMELINE
   ========================================================================== */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; counter-reset: step; }
.timeline__step { position: relative; padding-top: 40px; }
.timeline__step::before {
  content: ""; position: absolute; top: 13px; left: 0; right: -24px; height: 2px;
  background: var(--color-line);
}
.timeline__step:last-child::before { right: 0; }
.timeline__step::after {
  counter-increment: step; content: counter(step,decimal-leading-zero);
  position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-family: var(--font-head); font-weight: 700;
  font-size: 12px; display: grid; place-items: center; z-index: 1;
}
.timeline__step h4 { font-size: 18px; margin-bottom: 8px; }
.timeline__step p { font-size: 15px; color: var(--color-body); }
.section--navy .timeline__step::before { background: rgba(255,255,255,.18); }
.section--navy .timeline__step::after { background: var(--color-accent); color: var(--color-navy); }
.section--navy .timeline__step p { color: var(--color-on-dark); }

/* vertical timeline (about page) */
.vtimeline { position: relative; max-width: 760px; }
.vtimeline::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--color-line); }
.vtimeline__item { position: relative; padding: 0 0 38px 64px; }
.vtimeline__item:last-child { padding-bottom: 0; }
.vtimeline__item::before {
  content: ""; position: absolute; left: 8px; top: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--color-primary); z-index: 1;
}
.vtimeline__year { font-family: var(--font-display); font-size: 22px; color: var(--color-primary); line-height: 1; margin-bottom: 8px; }
.vtimeline__item h4 { font-size: 19px; margin-bottom: 6px; }

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; background:#fff; }
.compare th, .compare td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--color-line); font-size: 16px; vertical-align: middle; }
.compare thead th { background: var(--color-navy); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.compare thead th.is-xj { background: var(--color-primary); position: relative; }
.compare tbody th { font-weight: 700; color: var(--color-ink); width: 38%; }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: none; }
.compare td.is-xj { background: rgba(0,59,143,.04); font-weight: 600; color: var(--color-ink); }
.compare .yes { color: #1F8A5B; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.compare .no { color: var(--color-muted); display: inline-flex; align-items: center; gap: 8px; }
.compare svg { width: 18px; height: 18px; flex: none; }

/* ==========================================================================
   FAQ ACCORDION (CSS-only via <details>)
   ========================================================================== */
.faq { display: grid; gap: 14px; max-width: 860px; }
.faq details {
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md);
  overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq details[open] { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--color-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 14px; height: 14px; flex: none;
  background: var(--color-primary); -webkit-mask: var(--icon-plus) center/contain no-repeat; mask: var(--icon-plus) center/contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__body { padding: 0 26px 24px; color: var(--color-body); font-size: 16px; }
:root { --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quote {
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  padding: 32px; display: flex; flex-direction: column; gap: 20px;
}
.quote__mark { font-family: var(--font-display); font-size: 56px; line-height: .6; color: var(--color-accent); }
.quote p { font-size: 17px; color: var(--color-ink); font-weight: 500; }
.quote__by { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.quote__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary); color:#fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; flex: none; overflow: hidden; }
.quote__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quote__by b { display: block; font-size: 15px; color: var(--color-ink); }
.quote__by span { font-size: 13px; color: var(--color-muted); }

/* ==========================================================================
   BEFORE / AFTER
   ========================================================================== */
.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-navy); }
.beforeafter figure { position: relative; margin: 0; }
.beforeafter img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.beforeafter figcaption {
  position: absolute; top: 14px; left: 14px; background: rgba(6,20,46,.82); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.beforeafter figure:last-child figcaption { background: var(--color-accent); color: var(--color-navy); }

/* ==========================================================================
   GLOBAL MAP / PROJECTS
   ========================================================================== */
.mapwrap { position: relative; background: var(--color-navy-deep); border-radius: var(--radius-lg); padding: 40px; overflow: hidden; }
.mapwrap svg { width: 100%; height: auto; display: block; }
.region-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 1px; background: rgba(255,255,255,.12); border-radius: var(--radius-md); overflow: hidden; margin-top: 28px; }
.region { background: var(--color-navy); padding: 18px 20px; }
.region b { font-family: var(--font-display); font-size: 26px; color: var(--color-accent); display:block; line-height: 1; }
.region span { font-size: 13px; color: rgba(255,255,255,.62); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ==========================================================================
   IMAGE PANELS / MEDIA
   ========================================================================== */
.media-frame { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-navy); position: relative; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 4/5; }
.media-frame--wide { aspect-ratio: 16/10; }
.media-badge {
  position: absolute; bottom: 16px; left: 16px; background: var(--color-accent); color: var(--color-navy);
  font-family: var(--font-head); font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: var(--radius-pill);
}

/* tick list */
.ticklist { display: grid; gap: 14px; }
.ticklist li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; }
.ticklist li::before {
  content: ""; width: 24px; height: 24px; flex: none; border-radius: 50%; margin-top: 1px;
  background: var(--color-primary) var(--icon-check) center/14px no-repeat;
}
.section--navy .ticklist li { color: var(--color-on-dark); }
.section--navy .ticklist li::before { background-color: var(--color-accent); }
:root { --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }

/* logo / cert chips */
.chips { display: flex; flex-wrap: wrap; gap: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius-pill); padding: 10px 18px; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--color-ink);
}
.chip svg { width: 18px; height: 18px; color: var(--color-primary); }

/* cert grid card */
.cert {
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 14px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cert:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cert__seal { width: 60px; height: 60px; border-radius: var(--radius-md); background: var(--color-surface); display: grid; place-items: center; color: var(--color-primary); }
.cert__seal svg { width: 32px; height: 32px; }
.cert h3 { font-size: 19px; }
.cert p { font-size: 15px; color: var(--color-body); }
.cert__tag { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); }

/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.cta-band { background: var(--color-primary); color: #fff; position: relative; overflow: hidden; }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(900px 400px at 85% 20%, rgba(255,212,0,.18), transparent 60%); }
.cta-band__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-block: var(--space-8); }
.cta-band h2 { color: #fff; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(28px,3.6vw,44px); line-height: 1; }
.cta-band p { color: rgba(255,255,255,.82); margin-top: 12px; font-size: 18px; max-width: 520px; }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--color-ink); }
.field label .req { color: #C0392B; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm);
  background: #fff; font-size: 16px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,59,143,.12);
}
.field textarea { min-height: 140px; resize: vertical; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__note { font-size: 14px; color: var(--color-muted); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--color-body); }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--color-primary); }

.info-card { background: var(--color-navy); color: #fff; border-radius: var(--radius-lg); padding: 36px; }
.info-card h3 { color: #fff; font-size: 22px; margin-bottom: 20px; }
.info-row { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); align-items: flex-start; }
.info-row:last-child { border-bottom: none; }
.info-row svg { width: 22px; height: 22px; color: var(--color-accent); flex: none; margin-top: 2px; }
.info-row b { display: block; font-size: 13px; color: rgba(255,255,255,.55); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.info-row a, .info-row span { color: #fff; font-size: 16px; word-break: break-word; }
.info-row a:hover { color: var(--color-accent); }

/* ==========================================================================
   NEWS / ARTICLES
   ========================================================================== */
.article-meta { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--color-muted); font-weight: 600; }
.tag { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); background: rgba(0,59,143,.08); padding: 5px 11px; border-radius: var(--radius-pill); }
.feature-post { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.feature-post__media { background: var(--color-navy); min-height: 340px; }
.feature-post__media img { width: 100%; height: 100%; object-fit: cover; }
.feature-post__body { padding: 44px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.feature-post__body h3 { font-size: clamp(24px,2.6vw,32px); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--color-navy-deep); color: var(--color-on-dark); padding-top: var(--space-9); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: var(--space-8); }
.footer-brand .brand__name { color: #fff; }
.footer-brand p { margin-top: 16px; font-size: 15px; color: var(--color-on-dark-mut); max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: var(--radius-sm); background: rgba(255,255,255,.07);
  display: grid; place-items: center; color: #fff; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--color-primary); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h4 { color: #fff; font-family: var(--font-head); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { font-size: 15px; color: var(--color-on-dark-mut); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--color-accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--color-on-dark-mut); }
.footer-bottom a:hover { color: var(--color-accent); }

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.text-center{text-align:center}
.muted{color:var(--color-muted)}
.maxw-620{max-width:620px}
.flex-actions{display:flex;flex-wrap:wrap;gap:14px}
.divider-line{height:1px;background:var(--color-line);border:none;margin-block:var(--space-7)}
.section--navy .divider-line{background:rgba(255,255,255,.12)}

/* ==========================================================================
   RESPONSIVE  (mobile-first overrides for larger screens already inline;
   below we collapse multi-column layouts down)
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline__step::before { display: none; }
  .feature-post { grid-template-columns: 1fr; }
  .feature-post__media { min-height: 260px; }
}

@media (max-width: 1080px) {
  /* ---- Mobile nav (CSS-only) — kicks in before the horizontal nav crowds ---- */
  .nav__toggle-label {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-navy);
    margin-left: auto;
  }
  .nav__toggle-label svg { width: 26px; height: 26px; }
  .nav__toggle-label .ic-close { display: none; }
  .nav__cta { display: none; }

  /* Header must NOT use backdrop-filter on mobile: it would become the
     containing block for the fixed menu panel and clip it to header height. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__links {
    position: fixed; inset: 0; z-index: 120; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px; background: var(--color-navy); padding: calc(var(--header-h) + 20px) 22px max(32px, env(safe-area-inset-bottom));
    transform: translateY(-10px); transition: transform .3s var(--ease), opacity .3s var(--ease), visibility .3s; overflow-y: auto;
    visibility: hidden; opacity: 0;
  }
  .nav__toggle:checked ~ .nav__links { visibility: visible; opacity: 1; transform: translateY(0); }
  .nav__links a { color: #fff; font-size: 20px; padding: 16px 14px; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; }
  .nav__links a:hover { background: rgba(255,255,255,.06); color: #fff; }
  .nav__links a[aria-current="page"] { color: var(--color-accent); }
  .nav__links a[aria-current="page"]::after { display: none; }
  .nav__links .btn { margin-top: 18px; }
  .nav__close {
    display: grid; place-items: center; position: absolute; top: 16px; right: 16px; width: 46px; height: 46px;
    color: #fff; cursor: pointer; z-index: 130;
  }
  .nav__close svg { width: 28px; height: 28px; }
  .nav__toggle:checked ~ .nav__toggle-label .ic-open { display: none; }
  .nav__toggle:checked ~ .nav__toggle-label .ic-close { display: block; }
  body:has(.nav__toggle:checked) { overflow: hidden; }
}

@media (max-width: 860px) {
  /* ---- collapse grids ---- */
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .split--media-first .split__media { order: 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .section { padding-block: var(--space-8); }
  .field--row { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .timeline { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .beforeafter { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .feature-post__body { padding: 28px; }
  .brand__tag { display: none; }
}

/* ==========================================================================
   PREMIUM MOTION & POLISH (subtle, B2B-appropriate)
   ========================================================================== */
/* Hero entrance fade-up keyframes (used by .xj-hero) */
@keyframes xj-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Scroll reveal — base hidden state only applied once JS confirms support */
html.js-reveal [data-rv] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
html.js-reveal [data-rv].rv-in { opacity: 1; transform: none; }

/* Image hover zoom on standalone media frames */
.media-frame img { transition: transform .6s var(--ease); }
.split:hover .media-frame img,
.media-frame:hover img { transform: scale(1.04); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Tablet — ease dense grids down before the full mobile collapse (tablet band only) */
@media (min-width: 861px) and (max-width: 1024px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile menu — gentle staggered link entrance */
@media (max-width: 1080px) {
  .nav__links a, .nav__links .btn {
    opacity: 0; transform: translateY(10px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .nav__toggle:checked ~ .nav__links a,
  .nav__toggle:checked ~ .nav__links .btn { opacity: 1; transform: none; }
  .nav__toggle:checked ~ .nav__links a:nth-child(2) { transition-delay: .05s; }
  .nav__toggle:checked ~ .nav__links a:nth-child(3) { transition-delay: .09s; }
  .nav__toggle:checked ~ .nav__links a:nth-child(4) { transition-delay: .13s; }
  .nav__toggle:checked ~ .nav__links a:nth-child(5) { transition-delay: .17s; }
  .nav__toggle:checked ~ .nav__links a:nth-child(6) { transition-delay: .21s; }
  .nav__toggle:checked ~ .nav__links a:nth-child(7) { transition-delay: .25s; }
  .nav__toggle:checked ~ .nav__links a:nth-child(8) { transition-delay: .29s; }
  .nav__toggle:checked ~ .nav__links .btn { transition-delay: .33s; }
}

/* Phone — full-width primary actions for easy tapping */
@media (max-width: 560px) {
  .cta-band__actions .btn,
  .form button[type="submit"] { width: 100%; justify-content: center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js-reveal [data-rv] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   PREMIUM HERO  (.xj-hero) — index.html only. Self-contained; brand tokens.
   ========================================================================== */
.xj-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(600px, 88vh, 900px);
  background: var(--color-navy); color: #fff;
}
.xj-hero-bg { position: absolute; inset: -3%; z-index: -2; overflow: hidden; will-change: transform; }
.xj-hero-img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: 60% 40%;
  animation: xj-kenburns 26s var(--ease) infinite alternate;
}
@keyframes xj-kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }

.xj-hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(820px 460px at 82% 28%, rgba(0,59,143,.34), transparent 60%),
    linear-gradient(90deg, rgba(6,20,46,.93) 0%, rgba(6,20,46,.74) 44%, rgba(6,20,46,.34) 100%),
    linear-gradient(0deg, rgba(6,20,46,.72), transparent 52%);
}

.xj-hero .container { position: relative; z-index: 2; }
.xj-hero-content { max-width: 740px; padding-block: clamp(64px, 11vh, 132px); }
.xj-hero-content > * { animation: xj-rise .75s var(--ease) both; }
.xj-hero-content > *:nth-child(1){ animation-delay:.05s; }
.xj-hero-content > *:nth-child(2){ animation-delay:.15s; }
.xj-hero-content > *:nth-child(3){ animation-delay:.25s; }
.xj-hero-content > *:nth-child(4){ animation-delay:.36s; }
.xj-hero-content > *:nth-child(5){ animation-delay:.48s; }

.xj-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 18px;
}
.xj-hero-eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--color-accent); }
.xj-hero-title {
  font-family: var(--font-display); color: #fff; text-transform: uppercase;
  font-size: clamp(38px, 6.4vw, 78px); line-height: .96; letter-spacing: -.01em; margin: 0;
}
.xj-hero-title .hl { color: var(--color-accent); }
.xj-hero-subtitle { margin-top: 24px; font-size: clamp(17px, 2.1vw, 21px); line-height: 1.6; color: rgba(255,255,255,.86); max-width: 620px; }

.xj-hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
.xj-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1; white-space: nowrap;
  padding: 18px 32px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.xj-btn svg { width: 18px; height: 18px; flex: none; }
.xj-btn--primary { background: var(--color-accent); color: var(--color-navy); box-shadow: 0 10px 30px -10px rgba(255,212,0,.5); }
.xj-btn--primary:hover { background: var(--color-accent-strong); transform: translateY(-3px); box-shadow: 0 16px 38px -12px rgba(255,212,0,.62); }
.xj-btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.xj-btn--ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); transform: translateY(-3px); }
.xj-btn:active { transform: translateY(0) scale(.985); }

/* glass stats bar */
.xj-hero-stats {
  margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-md); overflow: hidden; backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.7);
  animation: xj-rise .8s var(--ease) both; animation-delay: .55s;
}
.xj-hero-stat { padding: 20px 22px; border-left: 1px solid rgba(255,255,255,.12); }
.xj-hero-stat:first-child { border-left: none; }
.xj-hero-stat b { font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 27px); color: #fff; display: block; line-height: 1.05; white-space: nowrap; }
.xj-hero-stat span { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.62); }

/* floating glass panels (decorative, desktop only) */
.xj-floating-card {
  position: absolute; z-index: 1; pointer-events: none;
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  background: rgba(10,31,68,.5); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.7); color: #fff;
  transform: perspective(900px) rotateY(-9deg) rotateX(5deg);
  opacity: 1;
  animation: xj-float 7s var(--ease) infinite alternate, xj-card-rise .9s var(--ease) both;
}
.xj-floating-card__icon { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(255,212,0,.16); color: var(--color-accent); }
.xj-floating-card__icon svg { width: 22px; height: 22px; }
.xj-floating-card__text { display: flex; flex-direction: column; line-height: 1.2; }
.xj-floating-card__text b { font-family: var(--font-head); font-size: 15px; font-weight: 700; }
.xj-floating-card__text i { font-style: normal; font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
.xj-floating-card__big { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--color-accent); }
.xj-floating-card__cap { font-size: 12px; color: rgba(255,255,255,.66); font-weight: 600; }
.xj-floating-card--2 { flex-direction: column; align-items: flex-start; gap: 6px; }
.xj-floating-card--1 { top: 13%; right: 6%; animation-delay: -1s; }
.xj-floating-card--2 { bottom: 17%; right: 11%; transform: perspective(900px) rotateY(-7deg) rotateX(4deg); animation-delay: -3.5s; }
.xj-floating-card--3 { top: 47%; right: 23%; animation-delay: -2.2s; }
@keyframes xj-card-rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes xj-float { from { translate: 0 -10px; } to { translate: 0 12px; } }

/* hide decorative cards where there isn't room */
@media (max-width: 1180px) { .xj-floating-card { display: none; } }
@media (max-width: 768px) {
  .xj-hero { min-height: clamp(540px, 82vh, 760px); }
  .xj-hero-stats { grid-template-columns: 1fr 1fr; }
  .xj-hero-stat:nth-child(3), .xj-hero-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.12); }
  .xj-hero-stat:nth-child(odd) { border-left: none; }
}
@media (max-width: 520px) {
  .xj-hero-actions .xj-btn { width: 100%; justify-content: center; }
  .xj-hero-content { padding-block: 56px 48px; }
  .xj-hero-title { font-size: clamp(32px, 8.6vw, 46px); }
}


/* ==========================================================================
   MULTILINGUAL — language switcher + RTL (Arabic) support
   ========================================================================== */
.lang-switch { display: flex; align-items: center; gap: 2px; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--color-line); }
.lang-switch a { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--color-muted); padding: 6px 9px; border-radius: var(--radius-sm); letter-spacing: .02em; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.lang-switch a:hover { color: var(--color-primary); background: var(--color-surface); }
.lang-switch a[aria-current="true"] { color: var(--color-primary); background: var(--color-surface); }

@media (max-width: 1080px) {
  .nav__links .lang-switch { margin: 18px 0 0; padding: 18px 0 0; border-left: none; border-top: 1px solid rgba(255,255,255,.12); gap: 8px; flex-wrap: wrap; }
  .nav__links .lang-switch a { color: #fff; font-size: 15px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-sm); }
  .nav__links .lang-switch a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .nav__links .lang-switch a[aria-current="true"] { color: var(--color-navy); background: var(--color-accent); border-color: var(--color-accent); }
}

/* ---- RTL ---- */
html[dir="rtl"] { --font-display: "Cairo","Archivo Expanded",sans-serif; --font-head: "Cairo","Archivo",sans-serif; --font-body: "Noto Sans Arabic","Cairo","Manrope",sans-serif; }
[dir="rtl"] .brand { margin-right: 0; margin-left: auto; }
[dir="rtl"] .lang-switch { margin-left: 0; margin-right: 12px; padding-left: 0; padding-right: 12px; border-left: none; border-right: 1px solid var(--color-line); }
[dir="rtl"] .nav__cta { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .timeline__step::before { left: 0; right: -24px; }
[dir="rtl"] .timeline__step:last-child::before { right: 0; left: 0; }
[dir="rtl"] .timeline__step::after { left: auto; right: 0; }
[dir="rtl"] .vtimeline::before { left: auto; right: 19px; }
[dir="rtl"] .vtimeline__item { padding: 0 64px 38px 0; }
[dir="rtl"] .vtimeline__item::before { left: auto; right: 8px; }
[dir="rtl"] .feature__num { right: auto; left: 22px; }
[dir="rtl"] .media-badge { left: auto; right: 16px; }
[dir="rtl"] .compare th, [dir="rtl"] .compare td { text-align: right; }
[dir="rtl"] .faq summary { text-align: right; }
[dir="rtl"] .info-row { text-align: right; }
[dir="rtl"] .breadcrumb { direction: rtl; }
[dir="rtl"] .xj-hero-overlay { background: radial-gradient(820px 460px at 18% 28%, rgba(0,59,143,.34), transparent 60%), linear-gradient(270deg, rgba(6,20,46,.93) 0%, rgba(6,20,46,.74) 44%, rgba(6,20,46,.34) 100%), linear-gradient(0deg, rgba(6,20,46,.72), transparent 52%); }
[dir="rtl"] .pagehero::after { background: linear-gradient(270deg, rgba(6,20,46,.93) 0%, rgba(6,20,46,.74) 55%, rgba(6,20,46,.46) 100%); }
[dir="rtl"] .xj-floating-card--1 { right: auto; left: 6%; }
[dir="rtl"] .xj-floating-card--2 { right: auto; left: 11%; }
[dir="rtl"] .xj-floating-card--3 { right: auto; left: 23%; }
[dir="rtl"] .xj-hero-stat { border-left: none; border-right: 1px solid rgba(255,255,255,.12); }
[dir="rtl"] .xj-hero-stat:first-child { border-right: none; }
[dir="rtl"] .eyebrow::before { margin-left: 0; }