/* Aden Tech — site-level overrides for the Laravel public site. */

html[dir="rtl"] body { font-family: var(--font-arabic); }
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .hero-trust-label,
html[dir="rtl"] .product-tagline,
html[dir="rtl"] .badge { letter-spacing: 0; }
html[dir="rtl"] .btn .icon,
html[dir="rtl"] .btn-link .arrow,
html[dir="rtl"] .product-cta .arrow { transform: scaleX(-1); }
html[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }

/* Language toggle button in the nav */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg, #fff);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
  font-family: inherit;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }
.lang-toggle svg { width: 14px; height: 14px; opacity: .7; }

/* Homepage banner slider */
.banner-slider {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 60px -30px rgba(10, 26, 63, 0.35),
              0 12px 24px -12px rgba(10, 26, 63, 0.18);
}
.bs-viewport { overflow: hidden; }
.bs-track {
  display: flex;
  transition: transform .55s cubic-bezier(.5, 0, .1, 1);
  will-change: transform;
}
.bs-slide {
  flex: 0 0 100%;
  min-height: 460px;
  padding: 64px 72px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.bs-slide[data-bg="navy-electric"] {
  background: linear-gradient(125deg, #0A1A3F 0%, #1B3573 50%, #3D62F0 120%);
}
.bs-slide[data-bg="violet"] {
  background: linear-gradient(125deg, #1A1240 0%, #3B2680 50%, #7C5CFF 120%);
}
.bs-slide[data-bg="emerald"] {
  background: linear-gradient(125deg, #042A22 0%, #064E3B 50%, #10B981 120%);
}
.bs-slide[data-bg="amber"] {
  background: linear-gradient(125deg, #2B1A0A 0%, #92400E 50%, #F59E0B 120%);
}
.bs-slide[data-bg="cyan"] {
  background: linear-gradient(125deg, #032830 0%, #0E5263 50%, #06B6D4 120%);
}
.bs-slide::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at top right, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 30%, transparent 75%);
  pointer-events: none;
}
.bs-slide > * { position: relative; z-index: 1; }
.bs-product-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.95);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  margin-bottom: 24px;
  border: 1px solid rgba(255,255,255,0.18);
}
.bs-product-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}
.bs-headline {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
}
html[dir="rtl"] .bs-headline { letter-spacing: 0; font-weight: 600; line-height: 1.15; font-family: var(--font-arabic); }
.bs-sub {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0 0 32px;
  max-width: 520px;
}
html[dir="rtl"] .bs-sub { font-family: var(--font-arabic); }
.bs-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.bs-ctas .btn-primary { background: #fff; color: var(--navy-900, #0A1A3F); }
.bs-ctas .btn-primary:hover { background: rgba(255,255,255,0.92); color: var(--navy-900, #0A1A3F); }
.bs-ctas .btn-onnavy {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  backdrop-filter: blur(4px);
}
.bs-ctas .btn-onnavy:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); }
.bs-illu {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 380px;
  margin-inline-start: auto;
  display: grid;
  place-items: center;
}
.bs-illu img, .bs-illu svg { width: 100%; height: 100%; object-fit: contain; }
.bs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  transition: background .15s, transform .15s;
}
.bs-arrow:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.05); }
.bs-arrow svg { width: 18px; height: 18px; }
.bs-prev { inset-inline-start: 20px; }
.bs-next { inset-inline-end: 20px; }
html[dir="rtl"] .bs-prev svg,
html[dir="rtl"] .bs-next svg { transform: scaleX(-1); }
.bs-dots {
  position: absolute;
  bottom: 24px;
  inset-inline-start: 72px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.bs-dot {
  width: 28px; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.3);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background .2s, width .25s;
}
.bs-dot[aria-selected="true"] { background: #fff; width: 48px; }
.bs-dot:hover { background: rgba(255,255,255,0.55); }

@media (max-width: 880px) {
  .bs-slide { grid-template-columns: 1fr; padding: 48px 32px 80px; min-height: 0; }
  .bs-illu { display: none; }
  .bs-dots { inset-inline-start: 32px; bottom: 32px; }
}

/* Slider fallback (no banners configured) */
.bs-fallback {
  padding: 80px 40px;
  border-radius: 24px;
  background: linear-gradient(125deg, #0A1A3F 0%, #1B3573 50%, #3D62F0 120%);
  color: #fff;
  text-align: center;
}
.bs-fallback h1 { font-size: clamp(28px, 4vw, 44px); margin: 0 0 16px; line-height: 1.1; }
.bs-fallback p { color: rgba(255,255,255,0.85); font-size: 17px; max-width: 600px; margin: 0 auto; line-height: 1.55; }

/* ---------- Responsive grid utilities ---------- */
.aden-grid { display: grid; gap: 24px; }
.aden-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aden-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aden-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aden-grid-auto { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.aden-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.aden-split-center { align-items: center; }

@media (max-width: 1024px) {
  .aden-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aden-split { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .aden-grid-2, .aden-grid-3 { grid-template-columns: 1fr; }
  .aden-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .aden-grid { gap: 16px; }
}
@media (max-width: 480px) {
  .aden-grid-4 { grid-template-columns: 1fr; }
}

/* Equalize card heights inside grids */
.aden-grid > article,
.aden-grid > .card { height: 100%; }

/* ---------- Section spacing ---------- */
.aden-section-pad-top { padding-top: clamp(40px, 6vw, 80px); }

/* ---------- Eyebrow link wrapper used on detail pages ---------- */
.aden-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-weight: 500;
}
.aden-back-link .back-arrow { transform: scaleX(-1); }
html[dir="rtl"] .aden-back-link .back-arrow { transform: scaleX(1); }

/* ---------- Form fields ---------- */
.aden-field {
    display: grid;
    gap: 6px;
}
.aden-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.aden-input,
.aden-select,
.aden-textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.aden-input,
.aden-select { height: 44px; padding: 0 14px; }
.aden-textarea { padding: 12px 14px; resize: vertical; min-height: 140px; }
.aden-input:focus,
.aden-select:focus,
.aden-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
/* Visually hidden honeypot — uses clip-path instead of left:-10000px so it
   cannot extend the document's scrollable area in either LTR or RTL. */
.aden-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- Alerts ---------- */
.aden-alert {
    padding: 14px 18px;
    border-radius: var(--r-md);
    border: 1px solid;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.55;
}
.aden-alert-success { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); color: #065F46; }
.aden-alert-error   { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: #991B1B; }
.aden-alert ul { margin: 6px 0 0; padding-inline-start: 18px; }

/* ---------- Pagination (Laravel default tailwind pagination falls back nicely) ---------- */
.aden-pagination-wrap nav { display: flex; justify-content: center; }
.aden-pagination-wrap nav > div { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.aden-pagination-wrap nav a,
.aden-pagination-wrap nav span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
}
.aden-pagination-wrap nav a:hover { border-color: var(--accent); color: var(--accent); }
.aden-pagination-wrap nav span[aria-current] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ---------- Card shells ---------- */
.aden-card {
    padding: 28px;
    border-radius: var(--r-xl);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}
.aden-card .card-foot { margin-top: auto; padding-top: 16px; }

/* ---------- Empty state ---------- */
.aden-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border-radius: var(--r-xl);
    border: 1px dashed var(--border);
}

/* ---------- Detail page header band ---------- */
.aden-detail-meta {
    display: flex; gap: 24px; flex-wrap: wrap;
    margin-bottom: 20px; font-size: 14px; color: var(--text-muted);
}
.aden-detail-meta strong { color: var(--text); font-weight: 600; }

/* ---------- Mobile slider safety ---------- */
@media (max-width: 880px) {
    .bs-slide { padding-inline: clamp(20px, 6vw, 32px); }
    .bs-headline { font-size: clamp(26px, 7vw, 36px); }
    .bs-sub { font-size: 15px; }
    .bs-ctas .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .bs-track { transition: none; }
    .aden-mobile-nav-panel { transition: none; }
}

/* ---------- Mobile navigation ---------- */
.aden-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    padding: 0;
}
.aden-mobile-toggle:hover { border-color: var(--accent); color: var(--accent); }
.aden-mobile-toggle:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
.aden-mobile-toggle svg { width: 18px; height: 18px; pointer-events: none; }
.aden-mobile-toggle .icon-close { display: none; }
.aden-mobile-toggle[aria-expanded="true"] .icon-open { display: none; }
.aden-mobile-toggle[aria-expanded="true"] .icon-close { display: block; }

.aden-mobile-nav-panel {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 24px clamp(20px, 5vw, 32px) 32px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 50;
    overflow-y: auto;
    max-height: calc(100vh - 64px);
}
.aden-mobile-nav-panel.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.aden-mobile-nav-panel a {
    display: block;
    padding: 14px 8px;
    font-size: 17px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}
.aden-mobile-nav-panel a:hover,
.aden-mobile-nav-panel a:focus-visible { color: var(--accent); outline: none; }
.aden-mobile-nav-panel .aden-mobile-nav-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
}

body.aden-mobile-nav-open { overflow: hidden; }

/* Show hamburger, hide desktop nav links, below 768px */
@media (max-width: 768px) {
    .aden-mobile-toggle { display: inline-flex; }
    .nav-links { display: none; }
    .site-header .nav-actions .lang-toggle span { display: none; }
}
@media (min-width: 769px) {
    .aden-mobile-nav-panel { display: none; }
}

/* ============================================================
   PAGE HERO — premium gradient hero with optional visual
   ============================================================ */
.page-hero {
    position: relative;
    isolation: isolate;
    margin-top: 24px;
    padding: clamp(56px, 8vw, 96px) clamp(28px, 5vw, 64px);
    border-radius: var(--r-2xl);
    overflow: hidden;
    color: #fff;
    --hero-from: #0A1A3F;
    --hero-via: #1B3573;
    --hero-to: #3D62F0;
    background: linear-gradient(125deg, var(--hero-from) 0%, var(--hero-via) 50%, var(--hero-to) 120%);
    box-shadow: 0 30px 60px -32px rgba(10, 26, 63, 0.45), 0 12px 24px -12px rgba(10, 26, 63, 0.2);
}
.page-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at top right, #000 28%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at top right, #000 28%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}
.page-hero::after {
    content: "";
    position: absolute;
    width: 480px; height: 480px;
    top: -180px; inset-inline-end: -160px;
    background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 60%);
    filter: blur(8px);
    pointer-events: none;
    z-index: 0;
}
.page-hero > * { position: relative; z-index: 1; }

.page-hero.hero--navy     { --hero-from: #0A1A3F; --hero-via: #1B3573; --hero-to: #3D62F0; }
.page-hero.hero--electric { --hero-from: #0B1E59; --hero-via: #2745DB; --hero-to: #5E83F5; }
.page-hero.hero--violet   { --hero-from: #1A1240; --hero-via: #3B2680; --hero-to: #7C5CFF; }
.page-hero.hero--emerald  { --hero-from: #042A22; --hero-via: #065F46; --hero-to: #10B981; }
.page-hero.hero--amber    { --hero-from: #2B1A0A; --hero-via: #92580B; --hero-to: #F59E0B; }
.page-hero.hero--cyan     { --hero-from: #032830; --hero-via: #0E5263; --hero-to: #06B6D4; }
.page-hero.hero--rose     { --hero-from: #3F0A1A; --hero-via: #9D174D; --hero-to: #F472B6; }
.page-hero.hero--slate    { --hero-from: #1E293B; --hero-via: #334155; --hero-to: #64748B; }

.page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
@media (max-width: 900px) {
    .page-hero-grid { grid-template-columns: 1fr; }
}

.page-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.95);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    margin-bottom: 20px;
}
.page-hero-eyebrow::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}
html[dir="rtl"] .page-hero-eyebrow { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); }

.page-hero-title {
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: 0 0 20px;
    color: #fff;
    text-wrap: balance;
}
html[dir="rtl"] .page-hero-title { letter-spacing: 0; line-height: 1.15; font-weight: 600; font-family: var(--font-arabic); }

.page-hero-subtitle {
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.6;
    color: rgba(255,255,255,0.86);
    margin: 0 0 32px;
    max-width: 560px;
}
html[dir="rtl"] .page-hero-subtitle { font-family: var(--font-arabic); }

.page-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero-ctas .btn-primary {
    background: #fff;
    color: var(--navy-900, #0A1A3F);
    border: 1px solid #fff;
}
.page-hero-ctas .btn-primary:hover {
    background: rgba(255,255,255,0.94);
    color: var(--navy-900, #0A1A3F);
}
.page-hero-ctas .btn-onnavy {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    backdrop-filter: blur(6px);
}
.page-hero-ctas .btn-onnavy:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.45);
}

.page-hero-meta {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 24px;
    max-width: 560px;
}
.page-hero-meta dt {
    font-size: 11px;
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin: 0 0 6px;
}
.page-hero-meta dd {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}
html[dir="rtl"] .page-hero-meta dt { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); font-size: 12px; }

.page-hero-crumbs {
    display: flex; gap: 8px; flex-wrap: wrap;
    font-size: 13px; color: rgba(255,255,255,0.75);
    margin-bottom: 20px;
}
.page-hero-crumbs a { color: rgba(255,255,255,0.92); text-decoration: none; }
.page-hero-crumbs a:hover { color: #fff; text-decoration: underline; }
.page-hero-crumbs .sep { opacity: 0.5; }
html[dir="rtl"] .page-hero-crumbs .sep { transform: scaleX(-1); display: inline-block; }

/* ============================================================
   VISUAL TYPES — the right-hand column of the hero
   ============================================================ */
.page-hero-visual {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: var(--r-2xl);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.page-hero-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.hero-glass-card {
    position: absolute;
    backdrop-filter: blur(14px);
    background: rgba(255,255,255,0.92);
    color: var(--navy-900, #0A1A3F);
    border-radius: var(--r-xl);
    box-shadow: 0 18px 36px -16px rgba(10,26,63,0.45);
    padding: 16px 20px;
    border: 1px solid rgba(255,255,255,0.6);
    font-size: 13px;
    line-height: 1.4;
}
.hero-glass-card .gc-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-soft);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.hero-glass-card .gc-title { font-weight: 600; font-size: 14px; }

.visual-stack {
    position: relative;
    width: 84%;
    height: 84%;
}
.visual-stack .hero-glass-card:nth-child(1) { top: 6%;  inset-inline-start: 0;    width: 64%; }
.visual-stack .hero-glass-card:nth-child(2) { top: 38%; inset-inline-end: 0;      width: 64%; }
.visual-stack .hero-glass-card:nth-child(3) { top: 70%; inset-inline-start: 12%;  width: 64%; }

.hero-orbit {
    position: relative;
    width: 88%; height: 88%;
    display: grid; place-items: center;
}
.hero-orbit::before,
.hero-orbit::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.22);
}
.hero-orbit::after { inset: 14%; border-style: solid; border-color: rgba(255,255,255,0.16); }
.hero-orbit .orbit-core {
    width: 38%; aspect-ratio: 1;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.78));
    color: var(--navy-900, #0A1A3F);
    display: grid; place-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 20px 40px -20px rgba(10,26,63,0.5);
    text-align: center;
}
.hero-orbit .orbit-chip {
    position: absolute;
    background: rgba(255,255,255,0.92);
    color: var(--navy-900);
    padding: 6px 10px;
    border-radius: var(--r-md);
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 10px 20px -10px rgba(10,26,63,0.45);
    border: 1px solid rgba(255,255,255,0.6);
    white-space: nowrap;
}
.hero-orbit .orbit-chip:nth-of-type(1) { top: 8%;  inset-inline-start: 6%; }
.hero-orbit .orbit-chip:nth-of-type(2) { top: 14%; inset-inline-end: 2%; }
.hero-orbit .orbit-chip:nth-of-type(3) { bottom: 22%; inset-inline-start: 0%; }
.hero-orbit .orbit-chip:nth-of-type(4) { bottom: 10%; inset-inline-end: 10%; }
.hero-orbit .orbit-chip:nth-of-type(5) { top: 48%; inset-inline-start: -4%; }

.hero-timeline {
    position: relative;
    width: 84%;
    background: rgba(255,255,255,0.96);
    color: var(--navy-900);
    border-radius: var(--r-xl);
    padding: 24px;
    box-shadow: 0 24px 50px -22px rgba(10,26,63,0.5);
}
.hero-timeline .tl-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.hero-timeline .tl-item:last-child { border-bottom: 0; }
.hero-timeline .tl-year {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent);
    font-size: 14px;
}
.hero-timeline .tl-text { font-size: 14px; line-height: 1.45; }

.hero-editorial {
    width: 84%;
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.86));
    color: var(--navy-900);
    border-radius: var(--r-xl);
    padding: 22px;
    box-shadow: 0 24px 50px -22px rgba(10,26,63,0.5);
}
.hero-editorial .he-cat {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.hero-editorial .he-title { font-size: 17px; line-height: 1.3; margin: 8px 0 10px; font-weight: 700; }
.hero-editorial .he-meta { font-size: 12px; color: var(--text-soft); }

.hero-contact-card {
    width: 84%;
    background: rgba(255,255,255,0.96);
    color: var(--navy-900);
    border-radius: var(--r-xl);
    padding: 22px;
    box-shadow: 0 24px 50px -22px rgba(10,26,63,0.5);
}
.hero-contact-card .hcc-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 12px 0;
    align-items: center;
    border-bottom: 1px solid var(--border);
}
.hero-contact-card .hcc-row:last-child { border-bottom: 0; }
.hero-contact-card .hcc-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    background: var(--electric-50);
    color: var(--accent);
    display: grid; place-items: center;
}
.hero-contact-card .hcc-label {
    font-size: 11px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-mono);
}
.hero-contact-card .hcc-value { font-size: 14px; font-weight: 600; }

.visual-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}

/* ============================================================
   SECTIONS + CARDS — modernized for Phase 5
   ============================================================ */
.section-soft {
    background:
        radial-gradient(ellipse at top, rgba(61,98,240,0.05), transparent 60%),
        var(--bg);
    border-block: 1px solid var(--border);
}

.feature-card-modern {
    position: relative;
    padding: 28px;
    border-radius: var(--r-xl);
    background: var(--bg);
    border: 1px solid var(--border);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.feature-card-modern:hover {
    /* Pick up the per-page theme accent (or the per-card product accent
       on the products index) instead of a hard-coded electric blue, so
       hovers stay consistent across products/services/case-studies/insights
       and in dark mode. */
    border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 38%, transparent);
    transform: translateY(-2px);
    box-shadow:
        var(--shadow-card),
        0 18px 36px -22px color-mix(in srgb, var(--card-accent, var(--accent)) 35%, transparent);
}
.feature-card-modern::before {
    content: "";
    position: absolute;
    inset-block-start: 0; inset-inline-start: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--card-accent, var(--accent)), transparent);
    opacity: 0.7;
}
.feature-card-modern .fc-icon {
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--card-accent-soft, var(--electric-50));
    color: var(--card-accent, var(--accent));
    margin-bottom: 16px;
}
.feature-card-modern .fc-title { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.feature-card-modern .fc-body { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0 0 16px; }

.product-accent-hub          { --card-accent: #7C5CFF; --card-accent-soft: #EEE9FF; }
.product-accent-educhain     { --card-accent: #10B981; --card-accent-soft: #D6F5E6; }
.product-accent-qr           { --card-accent: #F59E0B; --card-accent-soft: #FEF1CB; }
.product-accent-logistics    { --card-accent: #06B6D4; --card-accent-soft: #CFF5FB; }
.product-accent-homrz        { --card-accent: #F472B6; --card-accent-soft: #FCE7F3; }
/* Update 09 — new portfolio additions */
.product-accent-football-goat { --card-accent: #24B26B; --card-accent-soft: #E5F5EC; }
.product-accent-aqarstake    { --card-accent: #0F766E; --card-accent-soft: #E6F3F1; }

.section-eyebrow-line {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 12px;
}
.section-eyebrow-line::before {
    content: "";
    width: 24px; height: 2px;
    background: var(--accent);
    border-radius: 2px;
}
html[dir="rtl"] .section-eyebrow-line { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); font-size: 14px; }

/* ============================================================
   Banner slider — image placeholder (no upload yet)
   ============================================================ */
.bs-illu-placeholder {
    position: relative;
    width: 78%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}
.bs-illu-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.22);
}
.bs-illu-ring--inner {
    inset: 16%;
    border-style: solid;
    border-color: rgba(255,255,255,0.18);
}
.bs-illu-monogram {
    width: 42%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: var(--r-2xl, 28px);
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.78));
    color: var(--navy-900, #0A1A3F);
    font-family: var(--font-mono);
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 20px 40px -20px rgba(10,26,63,0.5);
}
html[dir="rtl"] .bs-illu-monogram { font-family: var(--font-arabic); letter-spacing: 0; }

/* ============================================================
   PHASE 8A — Theme tokens for section rhythm + dark mode
   ============================================================ */
:root {
    --site-bg: #FFFFFF;
    --section-bg: #FFFFFF;
    --section-bg-alt: #F7F9FD;
    --section-bg-soft: #EEF3FF;
    --section-bg-muted: #F0F4FB;
    --card-bg: #FFFFFF;
    --card-bg-soft: #F7F9FD;
    --border-soft: #E4E9F1;
    --text-main: #0A1A3F;
    --text-muted: #4B5B7A;
    --text-soft: #6E7E9C;
    --shadow-soft: 0 2px 6px rgba(10,26,63,0.04), 0 8px 20px -10px rgba(10,26,63,0.08);
    --shadow-card: 0 6px 14px -6px rgba(10,26,63,0.10), 0 18px 36px -22px rgba(10,26,63,0.16);
    --gradient-hero: linear-gradient(125deg, #0A1A3F 0%, #1B3573 50%, #3D62F0 120%);
    --gradient-section: radial-gradient(ellipse at top, rgba(61,98,240,0.06), transparent 60%);
    --gradient-cta: linear-gradient(135deg, #102456 0%, #2745DB 55%, #5E83F5 120%);
}

[data-theme="dark"] {
    --site-bg: #050A1B;
    --section-bg: #0A1430;
    --section-bg-alt: #0B1837;
    --section-bg-soft: #12224A;
    --section-bg-muted: #0E1B3F;
    --card-bg: #0E1B3F;
    --card-bg-soft: #12244D;
    --border-soft: #1B2E66;
    --text-main: #E6ECF8;
    --text-muted: #9BABCB;
    --text-soft: #7C8DB0;
    --shadow-soft: 0 2px 6px rgba(0,0,0,0.4), 0 8px 20px -10px rgba(0,0,0,0.6);
    --shadow-card: 0 6px 14px -6px rgba(0,0,0,0.55), 0 18px 36px -22px rgba(0,0,0,0.75);
    --gradient-hero: linear-gradient(125deg, #050A1B 0%, #102456 50%, #2745DB 120%);
    --gradient-section: radial-gradient(ellipse at top, rgba(94,131,245,0.10), transparent 60%);
    --gradient-cta: linear-gradient(135deg, #1B2E91 0%, #2745DB 55%, #5E83F5 120%);
}

/* Force the site body to follow our theme tokens. The vendor handoff CSS
   set body { background: var(--bg) } so we keep both vars consistent. */
html, body { background: var(--site-bg); color: var(--text-main); }
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* Smooth theme transition (skipped via reduced-motion further below) */
html, body, .site-section, .feature-card-modern, .product-card, .service-card,
.aden-card, .site-footer, .site-header, .aden-mobile-nav-panel,
.aden-input, .aden-select, .aden-textarea, .badge {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ============================================================
   PHASE 8A — Section rhythm utilities
   ============================================================ */
.site-section {
    position: relative;
    padding-block: clamp(56px, 7vw, 96px);
    background: var(--section-bg);
}
.site-section--white { background: var(--section-bg); }
.site-section--soft  { background: var(--section-bg-alt); border-block: 1px solid var(--border-soft); }
.site-section--muted {
    background:
        var(--gradient-section),
        var(--section-bg-muted);
    border-block: 1px solid var(--border-soft);
}
.site-section--gradient {
    background: var(--gradient-cta);
    color: #fff;
}
.site-section--gradient * { color: inherit; }
.site-section--dark {
    background: var(--navy-900, #0A1A3F);
    color: #fff;
}
.site-section--tight { padding-block: clamp(32px, 4vw, 56px); }

.section-inner {
    max-width: var(--container, 1240px);
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 40px);
}
.section-inner--narrow { max-width: 860px; }

.section-panel {
    border-radius: var(--r-2xl, 28px);
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
    padding: clamp(32px, 4vw, 56px);
}

.section-divider {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
    margin-block: 0;
}

/* ============================================================
   PHASE 8A — Brand strip (post-hero on homepage)
   ============================================================ */
.brand-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(20px, 4vw, 48px);
    padding-block: clamp(24px, 3vw, 40px);
}
.brand-strip-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-inline-end: 8px;
}
html[dir="rtl"] .brand-strip-label { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); font-size: 13px; }
.brand-strip-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-soft);
}
.brand-strip-chip::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #5E83F5);
}

/* ============================================================
   PHASE 8A — How-it-works pipeline section
   ============================================================ */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 40px;
}
@media (max-width: 900px) {
    .process-grid { grid-template-columns: 1fr; }
}
.process-card {
    position: relative;
    padding: 28px;
    border-radius: var(--r-xl, 20px);
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.process-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: rgba(61,98,240,0.4);
}
.process-step {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
html[dir="rtl"] .process-step { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); font-size: 13px; }
.process-title { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: var(--text-main); }
.process-body { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* ============================================================
   PHASE 8A — CTA banner before footer
   ============================================================ */
.cta-banner {
    position: relative;
    isolation: isolate;
    border-radius: var(--r-2xl, 28px);
    padding: clamp(40px, 5vw, 64px);
    background: var(--gradient-cta);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(10,26,63,0.45);
}
.cta-banner::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at top right, #000 28%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at top right, #000 28%, transparent 78%);
    pointer-events: none;
}
.cta-banner > * { position: relative; }
.cta-banner-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) auto;
    gap: 32px;
    align-items: center;
}
@media (max-width: 768px) {
    .cta-banner-grid { grid-template-columns: 1fr; }
}
.cta-banner h2 {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    margin: 0 0 12px;
    color: #fff;
    text-wrap: balance;
}
.cta-banner p { color: rgba(255,255,255,0.86); font-size: 16px; margin: 0; max-width: 620px; }
.cta-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.cta-banner-actions .btn-primary {
    background: #fff;
    color: var(--navy-900, #0A1A3F);
    border: 1px solid #fff;
}
.cta-banner-actions .btn-onnavy {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    backdrop-filter: blur(6px);
}

/* ============================================================
   PHASE 8A — Footer polish (dark-navy band with gradient top line)
   ============================================================ */
.site-footer {
    position: relative;
    background: var(--navy-900, #0A1A3F);
    color: rgba(255,255,255,0.78);
    padding-block: clamp(56px, 6vw, 88px) 32px;
    margin-top: 0;
}
.site-footer::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(94,131,245,0.55), transparent);
}
.site-footer .footer-grid {
    display: grid;
    /* Brand column slightly tighter (was 1.4fr) so the link columns get
       proportional room and the brand block doesn't look stretched
       once only ONE logo variant renders. */
    grid-template-columns: 1.15fr 1fr 1fr 1fr;
    gap: clamp(28px, 4vw, 64px);
    margin-bottom: 48px;
    align-items: start;
}
@media (max-width: 900px) {
    .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 540px) {
    .site-footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
.site-footer .footer-brand p {
    color: rgba(255,255,255,0.66);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 16px;
    max-width: 320px;
}
.site-footer .footer-col h5 {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0 0 16px;
}
html[dir="rtl"] .site-footer .footer-col h5 { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); font-size: 13px; }
.site-footer .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer .footer-col a {
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-size: 14px;
    transition: color .15s ease, transform .15s ease;
    display: inline-block;
}
.site-footer .footer-col a:hover { color: #fff; transform: translateX(2px); }
html[dir="rtl"] .site-footer .footer-col a:hover { transform: translateX(-2px); }
.site-footer .footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-block-start: 24px;
    border-block-start: 1px solid rgba(255,255,255,0.10);
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    flex-wrap: wrap;
    gap: 12px;
}
.site-footer .footer-social { display: flex; align-items: center; gap: 12px; }
.site-footer .footer-social a {
    color: rgba(255,255,255,0.65);
    transition: color .15s ease, transform .15s ease;
}
.site-footer .footer-social a:hover { color: #fff; transform: translateY(-1px); }

/* ============================================================
   PHASE 8A — Hover/micro-interactions on cards + nav + links
   ============================================================ */
.feature-card-modern,
.product-card,
.service-card,
.aden-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

.nav-link {
    position: relative;
    transition: color .15s ease;
}
.nav-link:not(.active)::after {
    content: "";
    position: absolute;
    inset-inline: 12px;
    inset-block-end: 6px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}
.nav-link:not(.active):hover::after { transform: scaleX(1); }

.btn-link { transition: color .15s ease, transform .15s ease; }
.btn-link:hover { transform: translateX(2px); }
html[dir="rtl"] .btn-link:hover { transform: translateX(-2px); }

/* Public theme-toggle button — sibling of .lang-toggle in the header */
.aden-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    color: var(--text-main);
    cursor: pointer;
    padding: 0;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.aden-theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.aden-theme-toggle svg { width: 16px; height: 16px; pointer-events: none; }
.aden-theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .aden-theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .aden-theme-toggle .icon-moon { display: block; }

/* ============================================================
   PHASE 8A — Reveal animations (vanilla JS + IntersectionObserver)
   ============================================================ */
.reveal,
.reveal-up,
.reveal-fade,
.reveal-scale {
    opacity: 0;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.reveal-up   { transform: translateY(18px); }
.reveal-fade { transform: none; }
.reveal-scale { transform: scale(0.98); }

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-fade.is-visible,
.reveal-scale.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-up, .reveal-fade, .reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
    html, body, .site-section, .feature-card-modern, .product-card, .service-card,
    .aden-card, .site-footer, .site-header, .aden-mobile-nav-panel,
    .aden-input, .aden-select, .aden-textarea, .badge { transition: none; }
}

/* ============================================================
   PHASE 8A — Dark mode component overrides for readability
   ============================================================ */
[data-theme="dark"] .feature-card-modern,
[data-theme="dark"] .product-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .aden-card,
[data-theme="dark"] .process-card {
    background: var(--card-bg);
    border-color: var(--border-soft);
}
[data-theme="dark"] .aden-input,
[data-theme="dark"] .aden-select,
[data-theme="dark"] .aden-textarea {
    background: var(--card-bg);
    border-color: var(--border-soft);
    color: var(--text-main);
}
[data-theme="dark"] .aden-input::placeholder,
[data-theme="dark"] .aden-textarea::placeholder { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .aden-empty {
    background: var(--section-bg-alt);
    border-color: var(--border-soft);
    color: var(--text-muted);
}
[data-theme="dark"] .aden-alert-success { background: rgba(16,185,129,0.10); color: #6EE7B7; border-color: rgba(16,185,129,0.35); }
[data-theme="dark"] .aden-alert-error   { background: rgba(239,68,68,0.10); color: #FCA5A5; border-color: rgba(239,68,68,0.35); }

[data-theme="dark"] .badge { background: var(--section-bg-soft); color: var(--text-main); border-color: var(--border-soft); }
[data-theme="dark"] .section-eyebrow-line { color: #5E83F5; }
[data-theme="dark"] .brand-strip-chip { background: var(--card-bg); color: var(--text-main); }

[data-theme="dark"] .aden-mobile-nav-panel { background: var(--section-bg); border-top-color: var(--border-soft); }
[data-theme="dark"] .aden-mobile-nav-panel a { color: var(--text-main); border-bottom-color: var(--border-soft); }

/* The site-header background needs to follow theme too */
[data-theme="dark"] .site-header { background: color-mix(in srgb, var(--site-bg) 80%, transparent); border-block-end: 1px solid var(--border-soft); }
[data-theme="dark"] .nav-link { color: var(--text-main); }
[data-theme="dark"] .nav-link:hover { background: var(--section-bg-soft); }
[data-theme="dark"] .lang-toggle { background: var(--card-bg); color: var(--text-main); border-color: var(--border-soft); }
[data-theme="dark"] .aden-mobile-toggle { background: var(--card-bg); color: var(--text-main); border-color: var(--border-soft); }

/* ============================================================
   PHASE 8C — Network visual (subtle technology background)
   ============================================================ */
.has-network-visual { position: relative; isolation: isolate; }
.network-visual {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    color: #3D62F0;
    opacity: 0.7;
}
.network-visual svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
.network-visual--hero { opacity: 0.45; }
.network-visual--section { opacity: 0.25; }

.network-visual .network-lines line {
    stroke: currentColor;
    stroke-width: 0.6;
    stroke-opacity: 0.35;
}
.network-visual .network-nodes circle {
    fill: currentColor;
    fill-opacity: 0.55;
}
.network-visual .network-node--bright {
    fill-opacity: 0.9;
    animation: aden-node-pulse 3.4s ease-in-out infinite;
}
.network-visual .network-node:nth-child(2)  { animation: aden-node-pulse 3.4s ease-in-out infinite .2s; }
.network-visual .network-node:nth-child(3)  { animation: aden-node-pulse 4.0s ease-in-out infinite .8s; }
.network-visual .network-node:nth-child(5)  { animation: aden-node-pulse 4.4s ease-in-out infinite 1.2s; }

@keyframes aden-node-pulse {
    0%, 100% { fill-opacity: 0.45; }
    50%      { fill-opacity: 0.95; }
}

/* Soft radial glows behind the network */
.network-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    pointer-events: none;
}
.network-glow--a { top: -80px; inset-inline-end: -60px; background: radial-gradient(circle, rgba(61,98,240,0.4), transparent 70%); }
.network-glow--b { bottom: -80px; inset-inline-start: -60px; background: radial-gradient(circle, rgba(124,92,255,0.3), transparent 70%); }

[data-theme="dark"] .network-visual { color: #5E83F5; opacity: 0.5; }
[data-theme="dark"] .network-glow--a { background: radial-gradient(circle, rgba(94,131,245,0.35), transparent 70%); }
[data-theme="dark"] .network-glow--b { background: radial-gradient(circle, rgba(124,92,255,0.25), transparent 70%); }

/* Network visual sits behind content; section children must have a stacking context */
.has-network-visual > .section-inner,
.has-network-visual > .container,
.has-network-visual > .cta-banner {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .network-visual svg { transition: none; }
    .network-visual .network-node,
    .network-visual .network-node--bright { animation: none; }
}

/* ============================================================
   PHASE 8C — Brand strip chip as link + product accents
   ============================================================ */
a.brand-strip-chip,
.brand-strip-chip {
    text-decoration: none;
    transition: transform .2s cubic-bezier(.2,.7,.2,1),
                border-color .2s ease,
                box-shadow .2s ease,
                background-color .2s ease,
                color .2s ease;
}
a.brand-strip-chip:hover,
a.brand-strip-chip:focus-visible {
    transform: translateY(-3px);
    outline: none;
    border-color: var(--card-accent, var(--accent));
    color: var(--card-accent, var(--accent));
    box-shadow:
        var(--shadow-card),
        0 0 0 4px color-mix(in srgb, var(--card-accent, var(--accent)) 16%, transparent);
}
a.brand-strip-chip:focus-visible {
    box-shadow:
        var(--shadow-card),
        0 0 0 4px color-mix(in srgb, var(--card-accent, var(--accent)) 28%, transparent);
}
a.brand-strip-chip:hover::before,
a.brand-strip-chip:focus-visible::before {
    background: linear-gradient(135deg, var(--card-accent, var(--accent)), color-mix(in srgb, var(--card-accent, var(--accent)) 65%, white));
}

/* Product card accent hover — light AND dark mode safe */
.feature-card-modern.product-accent-hub:hover,
.feature-card-modern.product-accent-educhain:hover,
.feature-card-modern.product-accent-qr:hover,
.feature-card-modern.product-accent-logistics:hover,
.feature-card-modern.product-accent-homrz:hover,
.feature-card-modern.product-accent-football-goat:hover,
.feature-card-modern.product-accent-aqarstake:hover {
    border-color: var(--card-accent, var(--accent));
    transform: translateY(-4px);
    box-shadow:
        var(--shadow-card),
        0 18px 36px -22px color-mix(in srgb, var(--card-accent, var(--accent)) 50%, transparent);
}
.feature-card-modern.product-accent-hub:hover::before,
.feature-card-modern.product-accent-educhain:hover::before,
.feature-card-modern.product-accent-qr:hover::before,
.feature-card-modern.product-accent-logistics:hover::before,
.feature-card-modern.product-accent-football-goat:hover::before,
.feature-card-modern.product-accent-aqarstake:hover::before,
.feature-card-modern.product-accent-homrz:hover::before {
    opacity: 1;
}

/* ============================================================
   PHASE 8C — Section background style: product-accent
   ============================================================ */
.site-section--product-accent {
    background:
        radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
        var(--section-bg-alt);
    border-block: 1px solid var(--border-soft);
}
[data-theme="dark"] .site-section--product-accent {
    background:
        radial-gradient(ellipse at top, color-mix(in srgb, #5E83F5 18%, transparent), transparent 60%),
        var(--section-bg-alt);
}

/* ============================================================
   PHASE 8D — Layout width + overflow containment
   ============================================================ */

/* Document-level safety net. `overflow-x: clip` doesn't create a containing
   block for descendants (unlike `overflow: hidden`), so position: fixed and
   sticky still work correctly. The layout itself is corrected below — this
   is defense-in-depth for any future stray decorative element. */
html, body {
    overflow-x: clip;
}

/* All grid children must allow shrinking below their min-content width, or
   long unbreakable strings push a `Nfr` track past the viewport. */
.aden-split > *,
.aden-grid > *,
.process-grid > *,
.page-hero-grid > *,
.cta-banner-grid > *,
.footer-grid > * {
    min-inline-size: 0;
    min-width: 0; /* legacy alias for older WebKit */
}

/* `.aden-split` was defined without `minmax(0, 1fr)` — fix it directly so
   even content with long unbreakable URLs/Arabic words can't blow the track. */
.aden-split {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
@media (max-width: 1024px) {
    .aden-split { grid-template-columns: minmax(0, 1fr); }
}

/* Defensive clipping for any wrapper that hosts decorative absolutely-positioned
   children (network visuals, blobs, orbit chips). overflow: clip > hidden here —
   clipping without establishing a new containing block keeps position: fixed
   modal-style children (none today, but future-safe) working. */
.has-network-visual,
.page-hero,
.cta-banner,
.banner-slider,
.product-card,
.feature-card-modern,
.aden-card {
    overflow-x: clip;
}

/* Page-hero already had overflow:hidden but tighten + ensure visual column
   contents can't push the grid track wider than 1fr. */
.page-hero-visual,
.page-hero-visual > * {
    max-inline-size: 100%;
}

/* Images and SVGs inside content shouldn't exceed their column. */
.section-inner img,
.page-hero-grid img,
.aden-split img,
.feature-card-modern img {
    max-inline-size: 100%;
    block-size: auto;
}

/* Network-visual itself: confirm bounds and that the SVG cannot grow the
   parent box. `position: absolute; inset: 0` is already set, but tighten. */
.network-visual {
    max-inline-size: 100%;
    max-block-size: 100%;
}
.network-visual svg {
    display: block;
    max-inline-size: 100%;
    max-block-size: 100%;
}

/* ============================================================
   PHASE 8D — Wider container for hero / banner sections
   ============================================================ */
.section-inner--wide {
    max-width: 1360px;
}
.section-inner--xwide {
    max-width: 1480px;
}

/* Subtle: tighten vertical padding on the homepage hero so the hero card
   feels less surrounded by empty white. */
.site-section.site-section--hero-tight {
    padding-block: clamp(32px, 4vw, 56px);
}

/* ============================================================
   PHASE 8E — Corporate homepage hero (stable, not a carousel)
   ============================================================ */
.home-hero {
    position: relative;
    isolation: isolate;
}
.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
@media (max-width: 960px) {
    .home-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.home-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--card-bg-soft);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--border-soft);
    margin-bottom: 20px;
}
.home-hero-eyebrow::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #5E83F5);
}
html[dir="rtl"] .home-hero-eyebrow { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); }

.home-hero-title {
    font-size: clamp(34px, 4.6vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--text-main);
    text-wrap: balance;
}
.home-hero-title .accent {
    background: linear-gradient(135deg, var(--accent), #5E83F5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html[dir="rtl"] .home-hero-title { letter-spacing: 0; line-height: 1.18; font-weight: 600; font-family: var(--font-arabic); }

.home-hero-subtitle {
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 32px;
    max-width: 56ch;
}
html[dir="rtl"] .home-hero-subtitle { font-family: var(--font-arabic); }

.home-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }

.home-hero-meta {
    display: flex;
    gap: clamp(24px, 4vw, 48px);
    flex-wrap: wrap;
    padding-block-start: 24px;
    border-block-start: 1px solid var(--border-soft);
    color: var(--text-muted);
    font-size: 13px;
}
.home-hero-meta strong { color: var(--text-main); font-weight: 600; }

.home-hero-visual {
    /* Update 08B fix — was `display: grid; place-items: center` with
       `aspect-ratio: 1/1`. That collapsed the ecosystem-canvas inside
       it to 0 width (auto grid track + 100%-width child = 0 cycle). */
    position: relative;
    width: 100%;
    max-width: 480px;
    margin-inline-start: auto;
}
@media (max-width: 960px) {
    .home-hero-visual { margin-inline: auto; }
}

/* Hero orbit reused; lighter colors for the soft (non-gradient) hero */
.home-hero-visual .hero-orbit::before,
.home-hero-visual .hero-orbit::after {
    border-color: var(--border-soft);
}
.home-hero-visual .hero-orbit::after {
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.home-hero-visual .orbit-core {
    background: linear-gradient(135deg, var(--accent), #5E83F5);
    color: #fff;
    box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.home-hero-visual .orbit-chip {
    background: var(--card-bg);
    color: var(--text-main);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
}
.home-hero-visual a.orbit-chip:hover,
.home-hero-visual a.orbit-chip:focus-visible {
    border-color: var(--card-accent, var(--accent));
    color: var(--card-accent, var(--accent));
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    outline: none;
}

[data-theme="dark"] .home-hero-eyebrow {
    background: var(--section-bg-soft);
    color: var(--text-main);
    border-color: var(--border-soft);
}

/* ============================================================
   PHASE 8E — Products slider (horizontal scroll-snap)
   ============================================================ */
.products-slider {
    position: relative;
}
.products-slider-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.products-slider-head h2 {
    margin: 0;
}
.ps-arrows {
    display: inline-flex;
    gap: 8px;
}
.ps-arrow {
    width: 40px; height: 40px;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    color: var(--text-main);
    display: grid; place-items: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.ps-arrow:hover { border-color: var(--accent); color: var(--accent); }
.ps-arrow:disabled { opacity: .4; cursor: not-allowed; }
.ps-arrow svg { width: 16px; height: 16px; }
html[dir="rtl"] .ps-arrow svg { transform: scaleX(-1); }

.ps-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 320px);
    gap: 20px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: 4px;
    /* room for hover transform without clipping shadows */
    padding-inline: 4px;
    margin-inline: -4px;
}
.ps-track::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
    .ps-track { grid-auto-columns: minmax(320px, 360px); }
}
@media (max-width: 540px) {
    .ps-track { grid-auto-columns: minmax(240px, 78%); }
}

.ps-card {
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: var(--r-xl, 20px);
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    color: var(--text-main);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    overflow-x: clip;
}
.ps-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0; inset-inline-start: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--card-accent, var(--accent)), transparent);
    opacity: 0.7;
}
.ps-card:hover,
.ps-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--card-accent, var(--accent));
    box-shadow:
        var(--shadow-card),
        0 18px 36px -22px color-mix(in srgb, var(--card-accent, var(--accent)) 45%, transparent);
    outline: none;
}
.ps-card-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--card-accent, var(--accent));
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ps-card-brand .ps-card-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    background: var(--card-accent-soft, var(--electric-50));
    color: var(--card-accent, var(--accent));
    display: grid; place-items: center;
}
html[dir="rtl"] .ps-card-brand { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); font-size: 13px; }
.ps-card-name { font-size: 18px; font-weight: 600; margin: 0 0 8px; line-height: 1.25; }
.ps-card-tag { font-size: 14px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.55; }
.ps-card-badges {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.ps-card-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto;
    font-size: 13px;
    color: var(--text-muted);
}
.ps-card-foot .ps-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--card-accent, var(--accent));
    font-weight: 600;
}
.ps-card-foot .ps-card-cta svg { width: 14px; height: 14px; transition: transform .15s ease; }
.ps-card:hover .ps-card-foot .ps-card-cta svg { transform: translateX(3px); }
html[dir="rtl"] .ps-card-foot .ps-card-cta svg { transform: scaleX(-1); }
html[dir="rtl"] .ps-card:hover .ps-card-foot .ps-card-cta svg { transform: scaleX(-1) translateX(3px); }

/* ============================================================
   PHASE 8E — About + Contact intro (clean, not over-carded)
   ============================================================ */
.intro-block {
    max-width: 760px;
}
.intro-block .intro-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
html[dir="rtl"] .intro-block .intro-eyebrow { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); font-size: 14px; }

.intro-block .intro-title {
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--text-main);
}
html[dir="rtl"] .intro-block .intro-title { letter-spacing: 0; line-height: 1.25; font-weight: 600; font-family: var(--font-arabic); }

.intro-block .intro-lead {
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
    max-width: 60ch;
}

/* About facts row + timeline */
.about-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-block-start: 40px;
    max-width: 820px;
}
@media (max-width: 768px) { .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .about-facts { grid-template-columns: 1fr; } }
.about-fact .fact-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
html[dir="rtl"] .about-fact .fact-label { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); font-size: 12px; }
.about-fact .fact-value { font-size: 17px; font-weight: 600; color: var(--text-main); }

.about-mission {
    margin-block-start: 56px;
    max-width: 820px;
    padding: 28px;
    border-radius: var(--r-xl, 20px);
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
}
.about-mission .am-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
html[dir="rtl"] .about-mission .am-eyebrow { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); font-size: 13px; }
.about-mission .am-text {
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-main);
    margin: 0;
}

.about-timeline {
    margin-block-start: 56px;
    max-width: 820px;
}
.about-timeline .tl-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    padding-block: 16px;
    border-block-end: 1px solid var(--border-soft);
}
.about-timeline .tl-row:last-child { border-block-end: 0; }
.about-timeline .tl-year {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent);
    font-size: 18px;
}
.about-timeline .tl-text { font-size: 15px; line-height: 1.6; color: var(--text-main); }

/* Contact: simple form/info split */
.contact-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
@media (max-width: 900px) {
    .contact-shell { grid-template-columns: 1fr; }
}
.contact-info-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-xl, 20px);
    padding: 28px;
    box-shadow: var(--shadow-soft);
}
.contact-info-card .ci-row {
    padding-block: 14px;
    border-block-end: 1px solid var(--border-soft);
}
.contact-info-card .ci-row:last-child { border-block-end: 0; }
.contact-info-card .ci-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
html[dir="rtl"] .contact-info-card .ci-label { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); font-size: 12px; }
.contact-info-card .ci-value { font-size: 15px; font-weight: 600; color: var(--text-main); }
.contact-info-card .ci-value a { color: var(--accent); text-decoration: none; }
.contact-info-card .ci-value a:hover { text-decoration: underline; }

/* ============================================================
   PHASE 8F — Page accent themes
   Apply `theme-*` to <body> to tint --accent for the whole page.
   Cards/links/eyebrow lines/focus rings that reference --accent
   automatically pick up the page tone.
   ============================================================ */
body.theme-products       { --accent: #06B6D4; --accent-soft: #CFF5FB; }
body.theme-services       { --accent: #06B6D4; --accent-soft: #CFF5FB; }
body.theme-about          { --accent: #3D62F0; --accent-soft: #EEF3FF; }
body.theme-case-studies   { --accent: #7C5CFF; --accent-soft: #EEE9FF; }
body.theme-insights       { --accent: #475569; --accent-soft: #E2E8F0; }
body.theme-contact        { --accent: #10B981; --accent-soft: #D6F5E6; }
body.theme-privacy        { --accent: #475569; --accent-soft: #E2E8F0; }
body.theme-terms          { --accent: #1B3573; --accent-soft: #D8E1F5; }

[data-theme="dark"] body.theme-insights,
[data-theme="dark"] body.theme-privacy { --accent: #94A3B8; --accent-soft: #1B2E66; }
[data-theme="dark"] body.theme-terms   { --accent: #5E83F5; --accent-soft: #1B2E66; }

/* Hover-accent helper: cards/sections that want a page-accent glow on hover */
.hover-accent {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.hover-accent:hover,
.hover-accent:focus-visible {
    transform: translateY(-2px);
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 6%, var(--card-bg));
    box-shadow:
        var(--shadow-card),
        0 16px 32px -22px color-mix(in srgb, var(--accent) 50%, transparent);
    outline: none;
}

/* ============================================================
   PHASE 8F — Reusable page intro (text + optional visual)
   Used on Products index, Services index, About, Contact,
   Case Studies index, Insights index, Privacy, Terms.
   ============================================================ */
.page-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.page-intro--narrow { grid-template-columns: 1fr; }
@media (max-width: 880px) {
    .page-intro { grid-template-columns: 1fr; }
}

.page-intro-visual {
    position: relative;
    aspect-ratio: 5 / 4;
    max-width: 460px;
    margin-inline-start: auto;
    display: grid;
    place-items: center;
    border-radius: var(--r-2xl, 28px);
    background:
        radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
        var(--card-bg-soft);
    border: 1px solid var(--border-soft);
    overflow: hidden;
    isolation: isolate;
}
@media (max-width: 880px) {
    .page-intro-visual { margin-inline: auto; max-width: 100%; aspect-ratio: 16/9; }
}
.page-intro-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-intro-visual .pv-monogram {
    width: 44%;
    aspect-ratio: 1;
    border-radius: var(--r-2xl);
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, white));
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    padding: 8px 12px;
    box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--accent) 45%, transparent);
}
html[dir="rtl"] .page-intro-visual .pv-monogram { font-family: var(--font-arabic); letter-spacing: 0; }

.page-intro-visual .pv-chip {
    position: absolute;
    z-index: 2;                       /* above the monogram, never behind it */
    background: var(--card-bg);
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: var(--r-md);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    /* Update 04B — bulletproof: chips can no longer overflow the panel
       or collide. Long words ellipsize inside their own chip instead of
       getting clipped by the visual's overflow:hidden. */
    max-inline-size: 42%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Update 04B — only 3 chips are shown. A 4th chip is hidden to remove
   the historical bottom-right collision (e.g. "Support" running into the
   neighbouring chip on the Services page). Callers that need richer
   info should use the .intro-snapshot card pattern instead. */
.page-intro-visual .pv-chip:nth-of-type(1) { top: 10%;    inset-inline-start: 6%; }
.page-intro-visual .pv-chip:nth-of-type(2) { top: 10%;    inset-inline-end: 6%; }
.page-intro-visual .pv-chip:nth-of-type(3) { bottom: 10%; inset-inline-start: 50%; transform: translateX(-50%); }
html[dir="rtl"] .page-intro-visual .pv-chip:nth-of-type(3) { transform: translateX(50%); }
.page-intro-visual .pv-chip:nth-of-type(n+4) { display: none; }

/* ============================================================
   PHASE 8F — Subtle network-visual variants tinted by --accent
   ============================================================ */
.network-visual--subtle {
    opacity: 0.15;
}
.network-visual--subtle .network-nodes circle { fill-opacity: 0.35; }
.network-visual--subtle .network-lines line { stroke-opacity: 0.22; }
[data-theme="dark"] .network-visual--subtle { opacity: 0.22; }

/* When a page sets a theme, the network visual picks up the accent color. */
body[class*="theme-"] .network-visual { color: var(--accent); }

/* ============================================================
   PHASE 8F — Homepage products section — stronger presence
   ============================================================ */
.ps-card {
    /* Phase 8E set background-color transition; extend with translateY easing. */
    transition: transform .25s cubic-bezier(.2,.7,.2,1),
                border-color .25s ease,
                box-shadow .25s ease;
}
.ps-card:hover {
    /* Subtle product-accent glow background; lifts the card and tints behind it. */
    background:
        radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--card-accent, var(--accent)) 10%, transparent), transparent 60%),
        var(--card-bg);
}

/* ============================================================
   PHASE 8F — Legal page reading styles (Privacy / Terms)
   ============================================================ */
.legal-prose {
    max-width: 72ch;
    color: var(--text-main);
    font-size: 16px;
    line-height: 1.78;
}
.legal-prose h2 {
    font-size: 22px;
    line-height: 1.3;
    margin: 2.2em 0 0.6em;
    color: var(--text-main);
}
.legal-prose h3 {
    font-size: 17px;
    margin: 1.6em 0 0.4em;
    color: var(--text-main);
}
.legal-prose p { margin: 0 0 1em; }
.legal-prose ul, .legal-prose ol { padding-inline-start: 22px; margin: 0 0 1em; }
.legal-prose li { margin-bottom: .35em; }
.legal-prose a { color: var(--accent); }
.legal-prose .legal-meta {
    font-size: 13px;
    color: var(--text-muted);
    padding-block: 14px;
    border-block-end: 1px solid var(--border-soft);
    margin-bottom: 24px;
}

/* ============================================================
   UPDATE 08 — Aden Product Ecosystem hero visual
   Hub-and-spoke diagram with the Aden navy card at centre,
   4 product cards on the compass anchors (N / E / S / W),
   solid connector lines, decorative colour nodes, and a faded
   dot-grid texture behind the centre. Layered SVG + DOM cards
   so each product link is a real <a> with focus + hover states.
   ============================================================ */
.ecosystem-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 480px;
    margin-inline-start: auto;
    isolation: isolate;
}
@media (max-width: 960px) {
    .ecosystem-canvas { margin-inline: auto; max-width: 380px; }
}

/* SVG background layer — sits behind the cards. Holds the
   dot-grid texture, the outer ring, the connector lines, and
   the decorative colour nodes. */
.ecosystem-canvas .ecosystem-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    color: var(--accent);
    overflow: visible;
}

/* Dot-grid texture, mask-faded toward the edges so the canvas
   doesn't look like a screen — only a halo of dots behind centre. */
.ecosystem-canvas .ecosystem-svg .ec-dot-texture {
    opacity: 0.55;
}

/* Outer ring — one only (the previous version had two and felt busy). */
.ecosystem-canvas .ecosystem-svg .ec-ring {
    fill: none;
    stroke: currentColor;
    stroke-opacity: 0.14;
    stroke-width: 0.4;
}

/* Solid connector lines from centre to each card. Stronger and
   straighter than the previous dashed treatment so the diagram
   actually reads as connected. */
.ecosystem-canvas .ecosystem-svg .ec-connectors line {
    stroke: currentColor;
    stroke-opacity: 0.35;
    stroke-width: 0.55;
    stroke-linecap: round;
}

/* Decorative colour nodes — fill colours come from the inline
   markup (per-node palette colour). Subtle drop so they read as
   live network points rather than UI affordances. */
.ecosystem-canvas .ecosystem-svg .ec-nodes circle {
    opacity: 0.85;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.06));
}

/* Central Aden card — navy gradient rounded square, the visual anchor.
   Matches the brand-mark badge from the Aden Design System PDF. */
.ecosystem-core {
    position: absolute;
    top: 50%;
    left: 50%;                     /* physical centring — direction-agnostic */
    transform: translate(-50%, -50%);
    width: 42%;
    aspect-ratio: 1;
    border-radius: 26px;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.18), transparent 60%),
        linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--navy-900, #0A1A3F)));
    color: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    z-index: 2;
    padding: 8px;
    box-shadow:
        0 28px 56px -18px color-mix(in srgb, var(--accent) 50%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.3);
}
.ecosystem-core .ec-mark {
    width: 32%;
    aspect-ratio: 1;
    margin-bottom: 8px;
}
.ecosystem-core .ec-mark svg { width: 100%; height: 100%; }
.ecosystem-core .ec-label {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding-inline: 4px;
    line-height: 1.1;
}
html[dir="rtl"] .ecosystem-core .ec-label {
    font-family: var(--font-arabic);
    letter-spacing: 0;
    text-transform: none;
    font-size: 16px;
    font-weight: 800;
}
.ecosystem-core .ec-sublabel {
    margin-top: 4px;
    font-size: 10px;
    opacity: 0.78;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
html[dir="rtl"] .ecosystem-core .ec-sublabel {
    font-family: var(--font-arabic);
    letter-spacing: 0;
    text-transform: none;
    font-size: 11px;
}

/* Card container — 2×2 grid that fills the canvas. Each card sits in
   one quadrant and is justified toward its corner. Logical justify-self
   means TL becomes top-end in RTL automatically (mirrors with text dir).
   The grid track size carries the canvas's intrinsic height through to
   the children, so the cards no longer collapse to origin. */
.ec-cards {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: clamp(8px, 1.4vw, 16px);
    padding: 4%;
}
.ec-cards .ecosystem-card { pointer-events: auto; }

/* Product cards — wider so the category eyebrow + name fit without
   ellipsis at any locale. Each card lays out as icon | (eyebrow + name). */
.ecosystem-card {
    z-index: 1;
    width: 100%;
    max-width: 210px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow:
        var(--shadow-soft),
        0 0 0 4px color-mix(in srgb, var(--card-accent, var(--accent)) 6%, transparent);
    text-decoration: none;
    color: var(--text-main);
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.ecosystem-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-accent, var(--accent));
    color: var(--card-accent, var(--accent));
    box-shadow:
        var(--shadow-card),
        0 14px 28px -18px color-mix(in srgb, var(--card-accent, var(--accent)) 55%, transparent),
        0 0 0 4px color-mix(in srgb, var(--card-accent, var(--accent)) 14%, transparent);
    z-index: 3;
}
/* Visible keyboard focus ring (distinct from hover). */
.ecosystem-card:focus-visible {
    outline: 2px solid var(--card-accent, var(--accent));
    outline-offset: 3px;
    transform: translateY(-2px);
    border-color: var(--card-accent, var(--accent));
    color: var(--card-accent, var(--accent));
    z-index: 3;
}
.ecosystem-card .ec-card-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--card-accent-soft, color-mix(in srgb, var(--card-accent, var(--accent)) 14%, transparent));
    color: var(--card-accent, var(--accent));
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}
.ecosystem-card .ec-card-text {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}
.ecosystem-card .ec-card-category {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.1;
    margin-block-end: 2px;
}
html[dir="rtl"] .ecosystem-card .ec-card-category {
    font-family: var(--font-arabic);
    letter-spacing: 0;
    text-transform: none;
    font-size: 11px;
}
.ecosystem-card .ec-card-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Corner placement using logical grid alignment. In LTR:
       TL = top-left, TR = top-right, BL = bottom-left, BR = bottom-right.
   In RTL the same logical `start/end` automatically mirrors:
       TL = top-right, TR = top-left, BL = bottom-right, BR = bottom-left.
   The grid container (.ec-cards) is a 2×2; cards explicitly bind to
   one cell so they don't shuffle when products are missing. */
.ecosystem-card[data-pos="tl"] { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; }
.ecosystem-card[data-pos="tr"] { grid-column: 2; grid-row: 1; justify-self: end;   align-self: start; }
.ecosystem-card[data-pos="bl"] { grid-column: 1; grid-row: 2; justify-self: start; align-self: end;   }
.ecosystem-card[data-pos="br"] { grid-column: 2; grid-row: 2; justify-self: end;   align-self: end;   }

/* "+N product(s)" chip — sits BELOW the canvas (negative bottom) so it
   doesn't collide with the bottom-row cards in the new 2×2 grid layout. */
.ecosystem-plus {
    position: absolute;
    bottom: -16px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    color: var(--text-main);
    transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
html[dir="rtl"] .ecosystem-plus { transform: translateX(50%); }
.ecosystem-plus:hover,
.ecosystem-plus:focus-visible {
    transform: translateX(-50%) translateY(-2px);
    border-color: var(--card-accent, var(--accent));
    color: var(--card-accent, var(--accent));
    box-shadow: var(--shadow-card);
    outline: none;
}
html[dir="rtl"] .ecosystem-plus:hover,
html[dir="rtl"] .ecosystem-plus:focus-visible { transform: translateX(50%) translateY(-2px); }
.ecosystem-plus .ec-plus-count {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 13px;
    color: var(--card-accent, var(--accent));
}
.ecosystem-plus .ec-plus-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

@media (max-width: 960px) {
    .ecosystem-card { width: 140px; padding: 10px 12px; }
    .ecosystem-card .ec-card-name { font-size: 12px; }
    .ecosystem-card .ec-card-category { font-size: 8px; }
}

/* Mobile (≤ 640px): the radial layout becomes unreadable in narrow
   viewports, so we collapse to a clean 2-column grid below a compact
   centre card. Connector lines hide; decorative nodes hide. */
@media (max-width: 640px) {
    .ecosystem-canvas {
        aspect-ratio: auto;
        max-width: 100%;
        display: grid;
        gap: 16px;
        grid-template-columns: 1fr 1fr;
    }
    .ecosystem-canvas .ecosystem-svg,
    .ecosystem-canvas .ec-cards { position: static; inset: auto; pointer-events: auto; }
    .ecosystem-canvas .ecosystem-svg { display: none; }
    .ec-cards {
        display: contents; /* let children participate in the parent grid */
    }
    .ecosystem-core {
        position: static;
        transform: none;
        width: 100%;
        aspect-ratio: 16/9;
        max-block-size: 140px;
        grid-column: 1 / -1;
        border-radius: 18px;
    }
    .ecosystem-card,
    .ecosystem-card[data-pos] {
        position: static;
        transform: none !important;
        width: 100%;
        text-align: start;
    }
    .ecosystem-card:hover,
    .ecosystem-card:focus-visible {
        transform: translateY(-2px) !important;
    }
    .ecosystem-plus {
        position: static;
        transform: none !important;
        grid-column: 1 / -1;
        justify-self: center;
    }
}
@media (max-width: 380px) {
    .ecosystem-canvas { grid-template-columns: 1fr; }
}

/* Subtle background glow behind the canvas */
.ecosystem-canvas::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
    z-index: 0;
    pointer-events: none;
}

/* ============================================================
   UPDATE 01 — Stacked product feature rows
   Replaces the horizontal scroll-snap slider on the homepage.
   ============================================================ */
.products-rows {
    display: grid;
    gap: clamp(24px, 3vw, 36px);
}

.product-row {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: clamp(24px, 3vw, 40px);
    border-radius: var(--r-2xl, 28px);
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    color: var(--text-main);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
    position: relative;
    overflow: hidden;
}
.product-row::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--card-accent, var(--accent)), transparent);
    opacity: 0.75;
}
.product-row:hover,
.product-row:focus-visible {
    transform: translateY(-3px);
    border-color: var(--card-accent, var(--accent));
    background:
        radial-gradient(160% 100% at 0% 0%, color-mix(in srgb, var(--card-accent, var(--accent)) 8%, transparent), transparent 60%),
        var(--card-bg);
    box-shadow:
        var(--shadow-card),
        0 22px 44px -24px color-mix(in srgb, var(--card-accent, var(--accent)) 50%, transparent);
    outline: none;
}

.product-row--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.product-row--reverse .pr-accent-panel { order: 2; }
.product-row--reverse .pr-body         { order: 1; }
@media (max-width: 880px) {
    .product-row,
    .product-row--reverse { grid-template-columns: 1fr; }
    .product-row--reverse .pr-accent-panel { order: 0; }
    .product-row--reverse .pr-body         { order: 1; }
}

.pr-accent-panel {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: var(--r-xl, 20px);
    background:
        radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--card-accent, var(--accent)) 28%, transparent), transparent 60%),
        var(--card-accent-soft, color-mix(in srgb, var(--card-accent, var(--accent)) 12%, var(--card-bg)));
    display: grid;
    place-items: center;
    overflow: hidden;
}
.pr-accent-panel .pr-monogram {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(20px, 2.6vw, 28px);
    letter-spacing: 0.14em;
    color: var(--card-accent, var(--accent));
    text-transform: uppercase;
    text-align: center;
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-soft);
}
html[dir="rtl"] .pr-accent-panel .pr-monogram {
    font-family: var(--font-arabic);
    letter-spacing: 0;
    text-transform: none;
    font-size: clamp(18px, 2vw, 22px);
}
.pr-accent-panel img {
    width: 100%; height: 100%; object-fit: cover;
}

.pr-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--card-accent, var(--accent));
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.pr-brand .pr-year {
    color: var(--text-muted);
    font-size: 11px;
}
html[dir="rtl"] .pr-brand { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); font-size: 13px; }
html[dir="rtl"] .pr-brand .pr-year { font-family: var(--font-arabic); font-size: 13px; }

.pr-title {
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text-main);
}
.pr-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 16px;
    max-width: 58ch;
}
.pr-badges {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.pr-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--card-accent, var(--accent));
}
.pr-cta svg { width: 14px; height: 14px; transition: transform .15s ease; }
.product-row:hover .pr-cta svg { transform: translateX(3px); }
html[dir="rtl"] .pr-cta svg { transform: scaleX(-1); }
html[dir="rtl"] .product-row:hover .pr-cta svg { transform: scaleX(-1) translateX(3px); }

/* ============================================================
   UPDATE 02 — Intro snapshot card (About + Contact)
   Lives inside .page-intro-visual as a real card with rows
   instead of the abstract monogram + chips.
   ============================================================ */
.intro-snapshot {
    position: relative;
    z-index: 1;
    width: min(86%, 360px);
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-xl, 20px);
    box-shadow:
        var(--shadow-card),
        0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent);
    padding: 22px;
    color: var(--text-main);
}

.intro-snapshot .is-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block-end: 14px;
    border-block-end: 1px solid var(--border-soft);
    margin-block-end: 14px;
}
.intro-snapshot .is-mark {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, white));
    color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--accent) 50%, transparent);
}
.intro-snapshot .is-mark svg { width: 60%; height: 60%; }
.intro-snapshot .is-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
}
.intro-snapshot .is-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 2px;
}
html[dir="rtl"] .intro-snapshot .is-sub {
    font-family: var(--font-arabic);
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
}

.intro-snapshot .is-rows { display: grid; gap: 14px; }
.intro-snapshot .is-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: center;
}
.intro-snapshot .is-row-icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    display: grid; place-items: center;
}
.intro-snapshot .is-row-icon svg { width: 16px; height: 16px; }
.intro-snapshot .is-row-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
html[dir="rtl"] .intro-snapshot .is-row-label { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; font-size: 12px; }
.intro-snapshot .is-row-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.35;
}
.intro-snapshot .is-row-value a {
    color: var(--accent);
    text-decoration: none;
}
.intro-snapshot .is-row-value a:hover { text-decoration: underline; }

[data-theme="dark"] .intro-snapshot {
    box-shadow:
        var(--shadow-card),
        0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ============================================================
   UPDATE 02 — Polished About mission, facts, timeline
   ============================================================ */

/* Facts: small accent underline rules on each value for editorial feel */
.about-facts .about-fact {
    padding-block-end: 10px;
    border-block-end: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Mission: soft accent border-inline-start + tinted background */
.about-mission {
    border-inline-start: 3px solid var(--accent);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 40%),
        var(--card-bg);
}
html[dir="rtl"] .about-mission {
    background:
        linear-gradient(270deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 40%),
        var(--card-bg);
}

/* Timeline: vertical accent line connecting year dots */
.about-timeline {
    position: relative;
}
.about-timeline .tl-row {
    position: relative;
    grid-template-columns: 92px 1fr;
    padding-inline-start: 12px;
}
.about-timeline .tl-row::before {
    content: "";
    position: absolute;
    inset-block: 22px 0;
    inset-inline-start: 0;
    width: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
}
.about-timeline .tl-row:last-child::before {
    inset-block-end: 50%;
}
.about-timeline .tl-row::after {
    content: "";
    position: absolute;
    inset-block-start: 22px;
    inset-inline-start: -4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ============================================================
   UPDATE 02 — Contact form-focused layout
   ============================================================ */
.contact-form-section .contact-form-shell {
    max-width: 760px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-xl, 20px);
    padding: clamp(28px, 4vw, 40px);
    box-shadow: var(--shadow-soft);
}
.contact-form-section .contact-form-shell .section-eyebrow-line {
    margin-bottom: 24px;
}

/* Subtle emerald hover/focus accents (theme-contact sets --accent) */
.theme-contact .aden-input:focus,
.theme-contact .aden-select:focus,
.theme-contact .aden-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.theme-contact .btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.theme-contact .btn-primary:hover {
    background: color-mix(in srgb, var(--accent) 88%, white);
    border-color: color-mix(in srgb, var(--accent) 88%, white);
}

/* About page accent on facts/mission/timeline already follows --accent
   from body.theme-about. No override needed beyond what's above. */

/* ============================================================
   UPDATE 03 — Insight category pill (theme-aware)
   Was inline-styled with a hard-coded blue. Now tints via --accent
   so the slate theme on Insights reads correctly in light + dark.
   ============================================================ */
.insight-category-pill {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
html[dir="rtl"] .insight-category-pill {
    font-family: var(--font-arabic);
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
}

/* ============================================================
   UPDATE 01B (refactored in Update 04) — Homepage products band.
   Adds a soft top accent glow as a *non-destructive overlay* via
   a pseudo-element. The section's admin-selected site-section--*
   background is preserved — admins now actually see their color
   choice for the Products section in light mode.
   ============================================================ */
.homepage-products-band { position: relative; }
.homepage-products-band > * { position: relative; z-index: 1; }
.homepage-products-band::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 60%;
    background: radial-gradient(ellipse 70% 100% at 50% 0%,
        color-mix(in srgb, var(--accent) 9%, transparent),
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="dark"] .homepage-products-band::before {
    background: radial-gradient(ellipse 70% 100% at 50% 0%,
        color-mix(in srgb, var(--accent) 16%, transparent),
        transparent 70%);
}

/* When the page-intro visual holds a real snapshot card, drop the fixed
   aspect-ratio + clipping so the card breathes and its outer accent ring
   isn't cut off. Keep the soft accent halo behind it. */
.page-intro-visual:has(.intro-snapshot) {
    aspect-ratio: auto;
    max-width: 440px;
    padding: 28px;
    overflow: visible;
    background:
        radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
        transparent;
    border-color: transparent;
}
@media (max-width: 880px) {
    .page-intro-visual:has(.intro-snapshot) { max-width: 100%; padding: 16px 0; }
}
.page-intro-visual .intro-snapshot { width: min(100%, 360px); }

/* ============================================================
   UPDATE 04 — Expanded section background palette.
   Admin can now pick: default, white, soft-{gray,blue,cyan,emerald,
   violet,amber,rose}, muted, subtle-gradient, dark-navy, product-accent.
   Plus legacy: soft, gradient, dark.

   Rule: every "soft-*" custom color is LIGHT-MODE only. Under
   [data-theme="dark"] each one is reverted to a dark-safe surface +
   faint accent halo, so admins can't accidentally make dark mode bright.
   ============================================================ */

/* Local accent tokens per soft color — used in the light surface and
   re-used in the dark-mode safe halo. Defined on the section element
   so child elements (e.g. monogram pills) can reference them too. */
.site-section--soft-gray    { --sect-accent: #6B7A99; --sect-fill: #F4F6FA; }
.site-section--soft-blue    { --sect-accent: #3D62F0; --sect-fill: #EAF0FE; }
.site-section--soft-cyan    { --sect-accent: #06B6D4; --sect-fill: #E5FAFE; }
.site-section--soft-emerald { --sect-accent: #10B981; --sect-fill: #E5F8EF; }
.site-section--soft-violet  { --sect-accent: #7C5CFF; --sect-fill: #F0EBFF; }
.site-section--soft-amber   { --sect-accent: #F59E0B; --sect-fill: #FEF5DB; }
.site-section--soft-rose    { --sect-accent: #F472B6; --sect-fill: #FCEBF3; }

/* Light-mode rendering for the soft-* family + new neutral utility classes.
   Background uses the section fill with a subtle radial accent halo on top
   so the surface feels alive without becoming a "saturated block". */
.site-section--soft-gray,
.site-section--soft-blue,
.site-section--soft-cyan,
.site-section--soft-emerald,
.site-section--soft-violet,
.site-section--soft-amber,
.site-section--soft-rose {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%,
            color-mix(in srgb, var(--sect-accent) 14%, transparent),
            transparent 70%),
        var(--sect-fill);
    color: var(--text-main);
    border-block: 1px solid color-mix(in srgb, var(--sect-accent) 18%, var(--border-soft));
}

/* "default" — no extra modifier, sits on the default site background. */
.site-section--default { background: var(--section-bg); }

/* "subtle-gradient" — mild radial accent on top of the alt surface,
   lighter than --gradient (which is the strong CTA gradient kept as legacy). */
.site-section--subtle-gradient {
    background:
        radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
        var(--section-bg-alt);
    border-block: 1px solid var(--border-soft);
}

/* "dark-navy" — same dark surface as the legacy "dark" but explicit alias.
   Note: this one IS allowed to be dark in light mode (it's literally a
   dark section — common as a strong CTA strip). */
.site-section--dark-navy {
    background: var(--navy-900, #0A1A3F);
    color: #fff;
}
.site-section--dark-navy * { color: inherit; }

/* ────── DARK THEME SAFE OVERRIDES ──────
   Every soft-* + subtle-gradient + product-accent class reverts to a
   dark-safe surface under [data-theme="dark"], keeping text readable
   and avoiding bright sections. Only a faint accent halo carries
   through so the admin's color choice is still hinted. */
[data-theme="dark"] .site-section--soft-gray,
[data-theme="dark"] .site-section--soft-blue,
[data-theme="dark"] .site-section--soft-cyan,
[data-theme="dark"] .site-section--soft-emerald,
[data-theme="dark"] .site-section--soft-violet,
[data-theme="dark"] .site-section--soft-amber,
[data-theme="dark"] .site-section--soft-rose {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%,
            color-mix(in srgb, var(--sect-accent) 22%, transparent),
            transparent 70%),
        var(--section-bg-alt);
    color: var(--text-main);
    border-block: 1px solid color-mix(in srgb, var(--sect-accent) 28%, var(--border-soft));
}

/* "subtle-gradient" in dark — dark surface + faint blue halo. */
[data-theme="dark"] .site-section--subtle-gradient {
    background:
        radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
        var(--section-bg-alt);
    color: var(--text-main);
}

/* product-accent already had a dark override in the original file —
   re-stated here for completeness in case admins pick it in dark too. */
[data-theme="dark"] .site-section--product-accent {
    background:
        radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
        var(--section-bg-alt);
    color: var(--text-main);
}

/* ============================================================
   UPDATE 04 — Spacing fixes
   Homepage product rows + Services grid had felt too tight.
   Bumps gaps and inner padding. Mobile keeps a smaller but
   still-comfortable rhythm.
   ============================================================ */

/* Homepage product feature rows — more breathing room between rows
   and within each row. Heading-to-first-row gap also widened. */
.products-rows { gap: clamp(32px, 4vw, 48px); }
.products-rows .product-row { padding: clamp(28px, 3.2vw, 40px); }
[data-aden-products-rows] .section-head { margin-bottom: clamp(40px, 5vw, 56px) !important; }
@media (max-width: 880px) {
    .products-rows { gap: 24px; }
    .products-rows .product-row { padding: 22px; }
}

/* Services grid — looser gutters + slightly more card padding.
   Affects services index (.aden-grid-3 of service cards) and other
   homepage feature-card-modern grids in the same proportion. */
.aden-grid { gap: clamp(24px, 2.6vw, 36px); }
.aden-grid-3 { gap: clamp(28px, 2.8vw, 36px); }
.feature-card-modern { padding: clamp(28px, 2.6vw, 36px); }
@media (max-width: 768px) {
    .aden-grid, .aden-grid-3 { gap: 20px; }
    .feature-card-modern { padding: 24px; }
}

/* Index pages: more breathing space between page-intro and first
   content section (the soft section right after the hero). */
.site-section--white + .site-section { padding-top: clamp(64px, 8vw, 104px); }

/* ============================================================
   UPDATE 05 — Admin-controlled design surface
   These rules read CSS variables emitted by partials/custom-theme.blade.php.
   Everything has a `, currentValue` / fallback so the look is identical
   when no admin override is set. All custom colors land under
   :root / [data-theme="light"] only — dark mode is untouched.
   ============================================================ */

/* ───── Header presets (data attribute on <html>) ───── */
[data-header-style="glass"] .site-header {
    background: color-mix(in srgb, var(--header-bg, var(--site-bg)) calc(var(--header-opacity, 0.8) * 100%), transparent);
    border-block-end: 1px solid var(--header-border, var(--border-soft));
}
[data-header-style="solid"] .site-header {
    background: var(--header-bg, var(--site-bg));
    border-block-end: 1px solid var(--header-border, var(--border-soft));
}
[data-header-style="minimal"] .site-header {
    background: transparent;
    border-block-end: 1px solid transparent;
}
[data-header-blur="on"] .site-header { backdrop-filter: saturate(140%) blur(14px); }
[data-header-blur="off"] .site-header { backdrop-filter: none; }
[data-header-sticky="on"] .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header { color: var(--header-text, var(--text-main)); }
.site-header .nav-link { color: var(--header-link, var(--text-main)); }
.site-header .nav-link:hover { color: var(--header-link-hover, var(--accent)); }

/* Dark theme stays protected — ignore custom header colors. */
[data-theme="dark"] .site-header {
    background: color-mix(in srgb, var(--site-bg) 80%, transparent) !important;
    border-block-end: 1px solid var(--border-soft) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] .site-header .nav-link { color: var(--text-main) !important; }
[data-theme="dark"] .site-header .nav-link:hover { color: var(--accent) !important; }

/* ───── Footer presets ───── */
[data-footer-style="dark"] .site-footer {
    /* default — keep the navy footer the project was designed with */
    background: var(--footer-bg, var(--navy-900, #0A1A3F));
    color: var(--footer-text, rgba(255,255,255,0.78));
}
[data-footer-style="light"] .site-footer {
    background: var(--footer-bg, var(--section-bg-alt));
    color: var(--footer-text, var(--text-main));
    border-block-start: 1px solid var(--footer-border, var(--border-soft));
}
[data-footer-style="light"] .site-footer .footer-col h5,
[data-footer-style="light"] .site-footer .footer-col a {
    color: var(--footer-link, var(--text-main));
}
[data-footer-style="light"] .site-footer .footer-col a:hover {
    color: var(--footer-link-hover, var(--accent));
}
[data-footer-style="gradient"] .site-footer {
    background: linear-gradient(135deg,
        var(--footer-bg, #102456) 0%,
        color-mix(in srgb, var(--footer-accent, var(--accent)) 60%, var(--footer-bg, #102456)) 100%);
    color: var(--footer-text, #fff);
}
[data-footer-style="minimal"] .site-footer {
    background: var(--footer-bg, var(--section-bg));
    color: var(--footer-text, var(--text-main));
    border-block-start: 1px solid var(--footer-border, var(--border-soft));
}
[data-footer-style="minimal"] .site-footer .footer-col h5,
[data-footer-style="minimal"] .site-footer .footer-col a {
    color: var(--footer-link, var(--text-muted));
}

/* Dark theme: footer always uses safe dark surface */
[data-theme="dark"] .site-footer {
    background: var(--footer-bg, #050A1B) !important;
    color: rgba(255,255,255,0.78) !important;
}

/* ───── Section background image overlay ───── */
[data-aden-section-bg] {
    position: relative;
    isolation: isolate;
}
[data-aden-section-bg]::after {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--section-bg-image, none);
    background-position: var(--section-bg-image-position, center);
    background-size: var(--section-bg-image-size, cover);
    background-repeat: no-repeat;
    z-index: -2;
    pointer-events: none;
}
[data-aden-section-bg]::before {
    /* Readability overlay — uses the section's own background colour with
       configurable opacity so text stays legible regardless of image. */
    content: "";
    position: absolute; inset: 0;
    background: var(--section-bg, #fff);
    opacity: var(--section-bg-image-overlay, 0.55);
    z-index: -1;
    pointer-events: none;
}
[data-theme="dark"] [data-aden-section-bg]::before {
    background: var(--section-bg, #0A1430);
    opacity: calc(var(--section-bg-image-overlay, 0.55) + 0.2);
}

/* ───── Animation controls ───── */
[data-animations="off"] .reveal,
[data-animations="off"] .reveal-up,
[data-animations="off"] .reveal-fade,
[data-animations="off"] .reveal-scale,
[data-reveal="off"] .reveal,
[data-reveal="off"] .reveal-up,
[data-reveal="off"] .reveal-fade,
[data-reveal="off"] .reveal-scale,
[data-reveal-style="none"] .reveal,
[data-reveal-style="none"] .reveal-up,
[data-reveal-style="none"] .reveal-fade,
[data-reveal-style="none"] .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

[data-reveal-speed="slow"]   { --reveal-duration: 1100ms; }
[data-reveal-speed="normal"] { --reveal-duration: 700ms; }
[data-reveal-speed="fast"]   { --reveal-duration: 400ms; }
.reveal, .reveal-up, .reveal-fade, .reveal-scale {
    transition-duration: var(--reveal-duration, 700ms);
}

/* Hover intensity */
[data-hover-intensity="none"] .feature-card-modern:hover,
[data-hover-intensity="none"] .product-row:hover,
[data-hover-intensity="none"] .ecosystem-card:hover,
[data-hover-intensity="none"] .ecosystem-plus:hover {
    transform: none !important;
    box-shadow: var(--shadow-soft) !important;
}
[data-hover-intensity="subtle"] .feature-card-modern:hover,
[data-hover-intensity="subtle"] .product-row:hover {
    transform: translateY(-1px) !important;
}

/* Network visual intensity */
[data-network="off"] .network-visual { display: none !important; }
[data-network="subtle"] .network-visual { opacity: 0.15 !important; }
[data-network="normal"] .network-visual { opacity: 0.35 !important; }
[data-network-anim="off"] .network-visual .network-node,
[data-network-anim="off"] .network-visual .network-node--bright,
[data-network-anim="off"] .network-visual svg {
    animation: none !important;
    transition: none !important;
}

/* ============================================================
   UPDATE 06B — Header logo + navigation layout fixes.
   Replaces the looser Update 06 sizing with stricter logical-
   property constraints. Selectors are scoped under .site-header /
   .site-footer to ensure they win against any generic image rules.
   Block-size + max-block-size hard-cap the image height regardless
   of natural bitmap dimensions (uploaded logos may be 2000×2000).
   The three-zone flex layout (brand / nav / controls) prevents the
   logo from crowding the navigation and locks Arabic labels to one
   line on desktop.
   ============================================================ */

/* ── Brand area: fixed-width zone with a clamped maximum ───────────── */
.site-header .brand-lockup,
.site-footer .brand-lockup {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-inline-size: 0;
    /* Lockup sized for the previous header logo (72-96 px tall). */
    max-inline-size: clamp(180px, 26vw, 320px);
}

/* ── Logo image: aligned with the new 84 px nav row.
       The admin-uploaded 2000×2000 PNGs ship with generous
       transparent padding around the visible "ADEN" glyph (the
       glyph fills only ~55-60 % of the bitmap). To make the
       visible mark match the surrounding nav weight, the image
       container is sized up to 72 px so the rendered glyph lands
       around 40-44 px — clearly readable, well-aligned with the
       72-88 px header row. max-block-size hard-caps the image so
       it never exceeds the row height. ────────────────────────── */
.site-header .brand-logo,
.site-footer .brand-logo {
    display: block;
    inline-size: auto;
    /* Reverted to previous size (the one the user liked) */
    block-size: clamp(72px, 7.2vw, 96px);
    max-inline-size: 100%;
    max-block-size: 100px;
    object-fit: contain;
    object-position: center;
    flex: 0 0 auto;
}
.site-footer .brand-logo {
    block-size: clamp(56px, 5vw, 72px);
    max-block-size: 76px;
    max-inline-size: 260px;
}

/* ── Light / dark variant switching (scoped to .site-header to keep
       specificity higher than any generic .brand-logo rule).
       Uses !important on the hide rules because there are now four
       overlapping rule blocks for logo display (legacy Update 06B,
       Update 09B footer-light, dark-mode override, etc.) and a
       specificity tie used to leave BOTH variants visible. ────────── */
.site-header .brand-logo--dark,
.site-footer .brand-logo--dark { display: none !important; }

[data-theme="dark"] .site-header .brand-lockup--with-dark-logo .brand-logo--light,
[data-theme="dark"] .site-footer .brand-lockup--with-dark-logo .brand-logo--light { display: none !important; }

[data-theme="dark"] .site-header .brand-lockup--with-dark-logo .brand-logo--dark,
[data-theme="dark"] .site-footer .brand-lockup--with-dark-logo .brand-logo--dark { display: block !important; }

/* ── Three-zone header flex layout (brand / nav / controls) ───────── */
.site-header .nav {
    gap: clamp(16px, 2vw, 32px);
    /* Header row sized for the previous logo height (72-96 px). */
    height: clamp(92px, 8.5vh, 108px);
    min-block-size: 96px;
}
.site-header .nav-links {
    flex: 1 1 auto;
    min-inline-size: 0;
    flex-wrap: nowrap;
    justify-content: center;
}
.site-header .nav-link {
    white-space: nowrap;
}
.site-header .nav-actions {
    flex: 0 0 auto;
}

/* ── Responsive breakpoints ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .site-header .nav { gap: 16px; }
    .site-header .nav-link { padding: 8px 10px; font-size: 13px; }
}
@media (max-width: 540px) {
    .site-header .nav { height: 76px; min-block-size: 72px; }
    .site-header .brand-logo,
    .site-footer .brand-logo {
        block-size: 60px;
        max-block-size: 68px;
    }
    .site-header .brand-lockup,
    .site-footer .brand-lockup {
        max-inline-size: 200px;
    }
}



/* ============================================================
   UPDATE 07 — About page Vision / Mission / Core Values.
   Surfaces the canonical Company Profile 2026 content.
   Card styles reuse the project's existing tokens.
   ============================================================ */
.about-values {
    margin-top: 56px;
    padding-block: clamp(24px, 3vw, 40px);
}
.value-card {
    padding: 22px 24px;
    border-radius: var(--r-lg, 16px);
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}
.value-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 3px;
    block-size: 100%;
    background: linear-gradient(180deg, var(--accent), transparent);
    opacity: 0.7;
}
.value-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--text-main);
}
.value-card-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* Markets strip in footer */
.footer-markets {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    padding-block: 14px;
    margin-block-end: 18px;
    border-block-end: 1px solid color-mix(in srgb, white 12%, transparent);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}
html[dir="rtl"] .footer-markets {
    font-family: var(--font-arabic);
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
}
.footer-markets-label {
    color: rgba(255,255,255,0.5);
}
.footer-markets-sep {
    opacity: 0.4;
}

/* CTA sign-off line — canonical brand close */
.cta-signoff {
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
}
html[dir="rtl"] .cta-signoff {
    font-family: var(--font-arabic);
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
}

/* Product detail — target ICP label per Company Profile 2026 */
.product-audience {
    display: flex;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: var(--r-md, 10px);
    background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
    border-inline-start: 3px solid var(--accent);
}
.product-audience-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
html[dir="rtl"] .product-audience-label {
    font-family: var(--font-arabic);
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
}
.product-audience-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

/* ============================================================
   UPDATE 09 — Lighter premium-tech visual system.
   Adds the canonical "Aden light premium" tokens, lightens the
   central ecosystem core from navy → glass-white card, and gives
   the home hero a soft tri-stop gradient (light mode only).
   Dark mode is untouched — admin custom colours from Update 04
   continue to apply only in light mode.
   ============================================================ */

:root {
    /* Aden light premium tokens — surfaced for new sections that
       want a cooler/softer surface than the default app tokens. */
    --aden-light-page-bg:       #F7FAFC;
    --aden-light-surface:       #FFFFFF;
    --aden-light-border-soft:   #D8E3F0;
    --aden-light-text:          #102033;
    --aden-light-text-muted:    #64748B;
    --aden-light-primary-navy:  #1E3A5F;
    --aden-light-accent-teal:   #18B7A8;
    --aden-light-accent-amber:  #F4B740;
    /* Hero tri-stop gradient — premium, calm, optimistic */
    --aden-hero-gradient:
        radial-gradient(ellipse 80% 60% at 0% 0%, #EEF6FF 0%, transparent 60%),
        radial-gradient(ellipse 90% 60% at 100% 0%, #FFF7E6 0%, transparent 55%),
        radial-gradient(ellipse 100% 80% at 50% 100%, #F8FFFB 0%, transparent 70%),
        var(--aden-light-page-bg);
}

/* ── Lighter ecosystem core — glass-white card with navy A mark ── */
.ecosystem-core {
    /* override the previous navy gradient with a glass-white surface */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,251,255,0.96)),
        var(--aden-light-surface) !important;
    color: var(--aden-light-primary-navy) !important;
    border: 1px solid color-mix(in srgb, var(--aden-light-primary-navy) 12%, var(--aden-light-border-soft));
    box-shadow:
        0 24px 48px -24px color-mix(in srgb, var(--aden-light-primary-navy) 35%, transparent),
        0 0 0 6px color-mix(in srgb, var(--aden-light-primary-navy) 4%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
.ecosystem-core .ec-mark {
    color: var(--aden-light-primary-navy);
}
.ecosystem-core .ec-label {
    color: var(--aden-light-primary-navy);
}
.ecosystem-core .ec-sublabel {
    color: var(--aden-light-text-muted);
    opacity: 1;
}

/* Dark mode: restore the navy gradient on the core so the white A
   stays readable against a darker surface. */
[data-theme="dark"] .ecosystem-core {
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.18), transparent 60%),
        linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--navy-900, #0A1A3F))) !important;
    color: #fff !important;
    border-color: transparent;
}
[data-theme="dark"] .ecosystem-core .ec-mark,
[data-theme="dark"] .ecosystem-core .ec-label { color: #fff; }
[data-theme="dark"] .ecosystem-core .ec-sublabel { color: rgba(255,255,255,0.78); }

/* ── Soft tri-stop gradient on the home hero (light mode only) ──
   Applied as a `::before` overlay so admin-uploaded hero background
   images (Update 05) still win when they exist. Light theme only. */
.home-hero {
    position: relative;
    isolation: isolate;
}
[data-theme="light"] .site-section--white:has(.home-hero):not([data-aden-section-bg-image]):not([style*="--section-bg-image"])::before,
:root:not([data-theme="dark"]) .site-section--white:has(.home-hero):not([data-aden-section-bg-image]):not([style*="--section-bg-image"])::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--aden-hero-gradient);
    pointer-events: none;
    z-index: -1;
}

/* Decorative floating panel + accent line above the hero, behind text.
   Subtle, premium, calm. Only visible in light mode. */
[data-theme="light"] .home-hero::after {
    content: "";
    position: absolute;
    inset: -40px 8% auto auto;
    width: clamp(80px, 12vw, 160px);
    aspect-ratio: 1;
    border-radius: 28px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--aden-light-accent-teal) 18%, transparent),
        color-mix(in srgb, var(--aden-light-accent-amber) 12%, transparent));
    filter: blur(0.5px);
    transform: rotate(8deg);
    pointer-events: none;
    z-index: -1;
    opacity: 0.45;
}
html[dir="rtl"] [data-theme="light"] .home-hero::after {
    inset: -40px auto auto 8%;
    transform: rotate(-8deg);
}

/* New product cards (homepage product feature rows) — when on the
   light-premium hero band, slot their accent strip into the lighter
   palette so the green/teal don't clash with the soft gradient. */
[data-theme="light"] .product-row.product-accent-football-goat::before {
    background: linear-gradient(90deg, #24B26B, color-mix(in srgb, #24B26B 30%, var(--aden-light-page-bg)));
}
[data-theme="light"] .product-row.product-accent-aqarstake::before {
    background: linear-gradient(90deg, #0F766E, color-mix(in srgb, #0F766E 30%, var(--aden-light-page-bg)));
}

/* Slight softening on the navy header on light mode so it harmonises
   with the new lighter hero — only when no admin header colour set. */
[data-theme="light"] .site-header:not([style*="--header-bg"]) {
    background: color-mix(in srgb, var(--aden-light-surface) 88%, transparent);
}

/* ============================================================
   UPDATE 09B — Footer + CTA polish for the lighter premium theme.
   The default footer-style is now 'light' (set in app.blade.php).
   Light footer = light surface + navy headings + dark text.
   Dark mode footer = navy surface + off-white text (existing behaviour).
   Both modes get visible focus rings + better hover affordances.
   ============================================================ */

/* ── Light footer (default in light mode) ────────────────────── */
[data-footer-style="light"] .site-footer {
    background: var(--footer-bg, var(--aden-light-page-bg, #F7FAFC));
    color: var(--footer-text, var(--aden-light-text, #102033));
    border-block-start: 1px solid var(--footer-border, var(--aden-light-border-soft, #D8E3F0));
    padding-block: clamp(48px, 4vw, 64px) 24px;
}
/* Subtle gradient top line stays — recolour for the light surface. */
[data-footer-style="light"] .site-footer::before {
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--aden-light-primary-navy, #1E3A5F) 35%, transparent),
        transparent);
}
[data-footer-style="light"] .site-footer .footer-grid {
    margin-bottom: 32px;          /* was 48 */
}
[data-footer-style="light"] .site-footer .footer-brand p {
    color: var(--aden-light-text-muted, #64748B);
    opacity: 1;
}
[data-footer-style="light"] .site-footer .footer-col h5 {
    color: var(--aden-light-primary-navy, #1E3A5F);
    opacity: 1;
}
[data-footer-style="light"] .site-footer .footer-col a {
    color: var(--aden-light-text, #102033);
    opacity: 1;
}
[data-footer-style="light"] .site-footer .footer-col a:hover {
    color: var(--footer-link-hover, var(--accent, #3D62F0));
}
[data-footer-style="light"] .site-footer .footer-col a:focus-visible {
    outline: 2px solid var(--accent, #3D62F0);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Markets row — was hardcoded near-white. Now theme-aware. */
[data-footer-style="light"] .site-footer .footer-markets {
    color: var(--aden-light-text-muted, #64748B);
    border-block-end: 1px solid var(--aden-light-border-soft, #D8E3F0);
}
[data-footer-style="light"] .site-footer .footer-markets-label {
    color: color-mix(in srgb, var(--aden-light-text-muted, #64748B) 80%, transparent);
}
[data-footer-style="light"] .site-footer .footer-markets-sep {
    color: var(--aden-light-border-soft, #D8E3F0);
}

/* Bottom row (legal + copyright + social) — readable muted text. */
[data-footer-style="light"] .site-footer .footer-bottom {
    color: var(--aden-light-text-muted, #64748B);
    border-block-start: 1px solid var(--aden-light-border-soft, #D8E3F0);
}
[data-footer-style="light"] .site-footer .footer-social a {
    color: var(--aden-light-text-muted, #64748B);
}
[data-footer-style="light"] .site-footer .footer-social a:hover {
    color: var(--aden-light-primary-navy, #1E3A5F);
}
[data-footer-style="light"] .site-footer .footer-social a:focus-visible {
    outline: 2px solid var(--accent, #3D62F0);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Brand wordmark (when no logo image is uploaded) — navy on light. */
[data-footer-style="light"] .site-footer .brand-name {
    color: var(--aden-light-primary-navy, #1E3A5F);
}
[data-footer-style="light"] .site-footer .brand-mark {
    color: var(--aden-light-primary-navy, #1E3A5F);
}

/* Footer logo swap — show LIGHT variant on light footer (theme inverse
   of the header). Dark logo only if light isn't uploaded. CSS hides
   whichever shouldn't be visible. !important so it wins regardless of
   any other rule-block specificity ties. */
[data-footer-style="light"] .site-footer .brand-logo--dark { display: none !important; }
[data-footer-style="light"] .site-footer .brand-lockup--with-dark-logo .brand-logo--light { display: block !important; }

/* ── Dark theme: force-dark footer regardless of light preset ── */
[data-theme="dark"] .site-footer,
[data-theme="dark"] [data-footer-style="light"] .site-footer {
    background: var(--footer-bg, #050A1B) !important;
    color: rgba(255,255,255,0.78) !important;
    border-block-start-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] [data-footer-style="light"] .site-footer .footer-col h5 {
    color: rgba(255,255,255,0.55) !important;
}
[data-theme="dark"] [data-footer-style="light"] .site-footer .footer-col a,
[data-theme="dark"] [data-footer-style="light"] .site-footer .footer-brand p {
    color: rgba(255,255,255,0.78) !important;
}
[data-theme="dark"] [data-footer-style="light"] .site-footer .footer-col a:hover {
    color: #fff !important;
}
[data-theme="dark"] [data-footer-style="light"] .site-footer .footer-markets,
[data-theme="dark"] [data-footer-style="light"] .site-footer .footer-bottom,
[data-theme="dark"] [data-footer-style="light"] .site-footer .footer-social a {
    color: rgba(255,255,255,0.55) !important;
    border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] [data-footer-style="light"] .site-footer .brand-name,
[data-theme="dark"] [data-footer-style="light"] .site-footer .brand-mark {
    color: #fff !important;
}
/* Dark theme: swap back to dark logo variant on the (now-dark) footer. */
[data-theme="dark"] [data-footer-style="light"] .site-footer .brand-logo--light { display: none !important; }
[data-theme="dark"] [data-footer-style="light"] .site-footer .brand-lockup--with-dark-logo .brand-logo--dark { display: block !important; }

/* ── CTA banner: sticky-header offset + slightly softer shadow ── */
.cta-banner {
    scroll-margin-top: clamp(96px, 11vh, 128px);
    /* a touch less heavy shadow so it doesn't darken the lighter page surface */
    box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--aden-light-primary-navy, #1E3A5F) 50%, transparent);
}
[data-theme="dark"] .cta-banner {
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65);
}
/* Extra bottom padding on the section that contains the CTA so it
   separates clearly from the new light footer. */
.site-section:has(.cta-banner) {
    padding-block-end: clamp(48px, 6vw, 80px);
}

/* ── Footer legal row: extracted from inline styles for proper
   theming. Plain spans with theme-aware tokens. */
.site-footer .footer-legal {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 1.6;
}
.site-footer .footer-legal-name { font-weight: 600; }
.site-footer .footer-legal-ar {
    font-family: var(--font-arabic);
    font-size: 12px;
}
.site-footer .footer-sep {
    opacity: 0.5;
    user-select: none;
}
/* Light footer: legal row colour overrides previously hardcoded
   opacity values (which were near-white on a now-light surface). */
[data-footer-style="light"] .site-footer .footer-copyright,
[data-footer-style="light"] .site-footer .footer-legal-name,
[data-footer-style="light"] .site-footer .footer-legal-ar {
    color: var(--aden-light-text-muted, #64748B);
}
[data-footer-style="light"] .site-footer .footer-legal-name {
    color: var(--aden-light-text, #102033);
}
[data-footer-style="light"] .site-footer .footer-sep {
    color: var(--aden-light-border-soft, #D8E3F0);
}
[data-theme="dark"] [data-footer-style="light"] .site-footer .footer-copyright,
[data-theme="dark"] [data-footer-style="light"] .site-footer .footer-legal-name,
[data-theme="dark"] [data-footer-style="light"] .site-footer .footer-legal-ar {
    color: rgba(255,255,255,0.65) !important;
}
[data-theme="dark"] [data-footer-style="light"] .site-footer .footer-legal-name {
    color: rgba(255,255,255,0.85) !important;
}

/* ── Update 09B — extend the premium-light footer styles to apply to
   the "minimal" preset as well (the current admin-set value), so any
   admin who picked light OR minimal gets the same premium-light look. */
[data-footer-style="minimal"] .site-footer {
    background: var(--footer-bg, var(--aden-light-page-bg, #F7FAFC));
    color: var(--footer-text, var(--aden-light-text, #102033));
    border-block-start: 1px solid var(--footer-border, var(--aden-light-border-soft, #D8E3F0));
    padding-block: clamp(48px, 4vw, 64px) 24px;
}
[data-footer-style="minimal"] .site-footer::before {
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--aden-light-primary-navy, #1E3A5F) 35%, transparent),
        transparent);
}
[data-footer-style="minimal"] .site-footer .footer-grid { margin-bottom: 32px; }
[data-footer-style="minimal"] .site-footer .footer-brand p {
    color: var(--aden-light-text-muted, #64748B);
    opacity: 1;
}
[data-footer-style="minimal"] .site-footer .footer-col h5 {
    color: var(--aden-light-primary-navy, #1E3A5F);
    opacity: 1;
}
[data-footer-style="minimal"] .site-footer .footer-col a {
    color: var(--aden-light-text, #102033);
    opacity: 1;
}
[data-footer-style="minimal"] .site-footer .footer-col a:hover {
    color: var(--footer-link-hover, var(--accent, #3D62F0));
}
[data-footer-style="minimal"] .site-footer .footer-col a:focus-visible {
    outline: 2px solid var(--accent, #3D62F0);
    outline-offset: 3px;
    border-radius: 4px;
}
[data-footer-style="minimal"] .site-footer .footer-markets {
    color: var(--aden-light-text-muted, #64748B);
    border-block-end: 1px solid var(--aden-light-border-soft, #D8E3F0);
}
[data-footer-style="minimal"] .site-footer .footer-markets-label {
    color: color-mix(in srgb, var(--aden-light-text-muted, #64748B) 80%, transparent);
}
[data-footer-style="minimal"] .site-footer .footer-markets-sep {
    color: var(--aden-light-border-soft, #D8E3F0);
}
[data-footer-style="minimal"] .site-footer .footer-bottom {
    color: var(--aden-light-text-muted, #64748B);
    border-block-start: 1px solid var(--aden-light-border-soft, #D8E3F0);
}
[data-footer-style="minimal"] .site-footer .footer-social a {
    color: var(--aden-light-text-muted, #64748B);
}
[data-footer-style="minimal"] .site-footer .footer-social a:hover {
    color: var(--aden-light-primary-navy, #1E3A5F);
}
[data-footer-style="minimal"] .site-footer .footer-social a:focus-visible {
    outline: 2px solid var(--accent, #3D62F0);
    outline-offset: 3px;
    border-radius: 4px;
}
[data-footer-style="minimal"] .site-footer .brand-name,
[data-footer-style="minimal"] .site-footer .brand-mark {
    color: var(--aden-light-primary-navy, #1E3A5F);
}
[data-footer-style="minimal"] .site-footer .footer-copyright,
[data-footer-style="minimal"] .site-footer .footer-legal-name,
[data-footer-style="minimal"] .site-footer .footer-legal-ar {
    color: var(--aden-light-text-muted, #64748B);
}
[data-footer-style="minimal"] .site-footer .footer-legal-name {
    color: var(--aden-light-text, #102033);
}
[data-footer-style="minimal"] .site-footer .footer-sep {
    color: var(--aden-light-border-soft, #D8E3F0);
}
[data-footer-style="minimal"] .site-footer .brand-logo--dark { display: none !important; }
[data-footer-style="minimal"] .site-footer .brand-lockup--with-dark-logo .brand-logo--light { display: block !important; }

/* Dark theme: force dark for minimal preset too. */
[data-theme="dark"] [data-footer-style="minimal"] .site-footer {
    background: var(--footer-bg, #050A1B) !important;
    color: rgba(255,255,255,0.78) !important;
    border-block-start-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .footer-col h5 {
    color: rgba(255,255,255,0.55) !important;
}
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .footer-col a,
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .footer-brand p {
    color: rgba(255,255,255,0.78) !important;
}
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .footer-col a:hover { color: #fff !important; }
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .footer-markets,
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .footer-bottom,
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .footer-social a {
    color: rgba(255,255,255,0.55) !important;
    border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .brand-name,
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .brand-mark { color: #fff !important; }
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .footer-copyright,
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .footer-legal-name,
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .footer-legal-ar {
    color: rgba(255,255,255,0.65) !important;
}
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .footer-legal-name { color: rgba(255,255,255,0.85) !important; }
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .brand-logo--light { display: none; }
[data-theme="dark"] [data-footer-style="minimal"] .site-footer .brand-lockup--with-dark-logo .brand-logo--dark { display: block; }

/* ============================================================
   UPDATE 09C — Logo inside the central ecosystem core.
   Glass-white core hosts the uploaded site logo (light variant
   on light theme, dark variant on dark theme via CSS swap).
   Fallback SVG "A" mark is sized like the original.
   ============================================================ */
.ecosystem-core.ecosystem-core--has-logo {
    display: grid;
    place-items: center;
    /* Update 09D — much tighter padding so the logo fills the box.
       Was 14% (lots of breathing room) → 5% (logo dominates). */
    padding: 5%;
}
.ecosystem-core .ec-core-logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}
.ecosystem-core .ec-core-fallback {
    width: 38%;
    aspect-ratio: 1;
}

/* Default: light variant shown, dark variant hidden. */
.ecosystem-core .ec-core-logo--dark { display: none; }

/* Dark theme + dark variant uploaded → swap to dark logo. */
[data-theme="dark"] .ecosystem-core--with-dark-logo .ec-core-logo--light { display: none; }
[data-theme="dark"] .ecosystem-core--with-dark-logo .ec-core-logo--dark  { display: block; }

/* Update 09C polish — subtle navy ring + soft accent halo so the central
   core reads as a "premium badge" per the Aden Design System PDF. */
[data-theme="light"] .ecosystem-core.ecosystem-core--has-logo {
    border-color: color-mix(in srgb, var(--aden-light-primary-navy, #1E3A5F) 20%, var(--aden-light-border-soft, #D8E3F0));
    background:
        radial-gradient(100% 80% at 50% 0%, rgba(255,255,255,1.0), rgba(248,251,255,0.94)),
        var(--aden-light-surface, #FFFFFF);
    box-shadow:
        0 24px 56px -24px color-mix(in srgb, var(--aden-light-primary-navy, #1E3A5F) 40%, transparent),
        0 0 0 8px color-mix(in srgb, var(--aden-light-primary-navy, #1E3A5F) 5%, transparent),
        inset 0 1px 0 rgba(255,255,255,1.0);
}