/* ==========================================================================
   Components
   Every interactive component defines: default · hover · focus-visible ·
   active · disabled. Loading is N/A for the link-only Homepage CTAs (rev. v1.2 #5).
   Directional properties use logical CSS so RTL mirrors without overrides.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */
.icon { width: 1.125em; height: 1.125em; flex: none; }
/* Directional icons mirror in RTL (Handoff §5). Vertical icons do not. */
[dir="rtl"] .icon--directional { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Buttons — Primary / Secondary
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    box-shadow var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.btn .icon { transition: transform var(--dur-2) var(--ease-out); }

/* Primary — Dark Violet + White label (approved). Never Electric Violet. */
.btn--primary {
  background-color: var(--cta-primary-bg);
  color: var(--cta-primary-text);
}
.surface-dark .btn--primary { border-color: var(--cta-border-on-dark); }

/* Hover (rev. v1.2 #4): bg + label unchanged; 2px inset Light Violet cue; no layout shift */
.btn--primary:hover {
  background-color: var(--cta-primary-hover-bg);
  box-shadow: inset 0 0 0 2px var(--cta-primary-hover-cue);
}
.surface-dark .btn--primary:hover { border-color: var(--cta-primary-hover-border); }
.btn--primary:hover .icon { transform: translateX(3px); }
[dir="rtl"] .btn--primary:hover .icon { transform: scaleX(-1) translateX(3px); }

/* Focus — separated/offset ring; the resting White border is NOT the indicator.
   Inherits surface-aware --focus-ring; composes with hover cue (no obscuring). */
.btn:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-button);
}

/* Active */
.btn--primary:active {
  box-shadow: inset 0 0 0 2px var(--cta-primary-hover-cue), inset 0 3px 8px rgba(0, 0, 0, 0.35);
  transform: translateY(1px);
}

/* Secondary — outline on dark */
.btn--secondary {
  background-color: transparent;
  color: var(--surface-text);
  border-color: color-mix(in srgb, var(--surface-text) 45%, transparent);
}
.btn--secondary:hover {
  border-color: var(--surface-text);
  background-color: color-mix(in srgb, var(--surface-text) 7%, transparent);
}
.btn--secondary:hover .icon { transform: translateX(3px); }
[dir="rtl"] .btn--secondary:hover .icon { transform: scaleX(-1) translateX(3px); }
.btn--secondary:active {
  background-color: color-mix(in srgb, var(--surface-text) 12%, transparent);
  transform: translateY(1px);
}

/* Disabled (defined for completeness; no disabled CTA is rendered on the Homepage) */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   Text link (with directional arrow)
   -------------------------------------------------------------------------- */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  color: var(--surface-link);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-thickness var(--dur-1) var(--ease-out);
}
.link .icon { transition: transform var(--dur-2) var(--ease-out); }
.link:hover { text-decoration-thickness: 2px; }
.link:hover .icon { transform: translateX(3px); }
[dir="rtl"] .link:hover .icon { transform: scaleX(-1) translateX(3px); }
.link:active { text-decoration-thickness: 3px; }
.link[aria-disabled="true"] { opacity: 0.45; pointer-events: none; text-decoration: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: 1px solid var(--border-on-dark);
  background: color-mix(in srgb, var(--color-obsidian) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-family: var(--font-latin);           /* ZENNTAC always Latin */
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--color-white);
  direction: ltr;
  unicode-bidi: isolate;
}
.brand:hover { color: var(--color-light-violet); }

/* --------------------------------------------------------------------------
   Primary navigation (desktop)
   -------------------------------------------------------------------------- */
.primary-nav { margin-inline-start: auto; }
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-3);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-1) var(--ease-out);
}
/* Underline bar = state cue that is not colour-only */
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: 8px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link:hover { background-color: rgba(255, 255, 255, 0.05); }
.nav-link:active { background-color: rgba(255, 255, 255, 0.09); }
.nav-link[aria-current="page"] { font-weight: 700; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); background: var(--color-light-violet); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   Language switcher — EN active; FR/AR unreleased → disabled (rev. v1.2 #2)
   -------------------------------------------------------------------------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--surface-text, var(--color-white));
  text-decoration: none;
  position: relative;
}
.lang-switch__item.is-current::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 9px;
  height: 2px;
  background: var(--surface-link, var(--color-light-violet));
}
/* Hover/active only on released (link) items */
a.lang-switch__item:hover { background: rgba(255, 255, 255, 0.06); }
a.lang-switch__item:active { background: rgba(255, 255, 255, 0.1); }
/* Unreleased locale: native disabled button, reduced emphasis, no hover */
.lang-switch__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Mobile navigation (disclosure pattern)
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  margin-inline-start: auto;
  padding: 0 var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.nav-toggle:hover { border-color: var(--color-white); background: rgba(255, 255, 255, 0.05); }
.nav-toggle:active { background: rgba(255, 255, 255, 0.1); }
.nav-toggle__bars { width: 18px; height: 12px; position: relative; }
.nav-toggle__bars span {
  position: absolute; inset-inline: 0; height: 2px; background: currentColor; border-radius: 1px;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav {
  border-block-start: 1px solid var(--border-on-dark);
  background: var(--color-obsidian);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__inner {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-4) var(--space-5);
}
.mobile-nav__list { display: grid; gap: 2px; }
.mobile-nav .nav-link {
  width: 100%;
  min-height: 52px;
  padding-inline: var(--space-2);
  font-size: 1.125rem;
}
.mobile-nav .nav-link::after { inset-inline: var(--space-2) auto; width: 24px; inset-block-end: 10px; transform-origin: left; }
[dir="rtl"] .mobile-nav .nav-link::after { transform-origin: right; }
.mobile-nav .btn { width: 100%; }
.mobile-nav .lang-switch { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */
.section-heading { display: grid; gap: var(--space-3); max-width: 46rem; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--surface-text-2);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
:lang(ar) .eyebrow { text-transform: none; }
.eyebrow::before {             /* decorative accent rule — Electric Violet as accent only */
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.section-heading__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
:lang(ar) .section-heading__title { letter-spacing: 0; line-height: 1.4; }
.section-heading__intro {
  font-size: var(--fs-body-lg);
  color: var(--surface-text-2);
  max-width: 40rem;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Proof label (Capability · Demonstration · Concept · Internal Project ·
   Validated Client Proof). Text carries meaning; colour never does.
   -------------------------------------------------------------------------- */
.proof-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
:lang(ar) .proof-label { text-transform: none; letter-spacing: 0; }
.proof-label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.surface-dark .proof-label { color: var(--color-light-violet); }
.surface-light .proof-label,
.surface-white .proof-label { color: var(--color-dark-violet); }

/* --------------------------------------------------------------------------
   Service pillar card
   -------------------------------------------------------------------------- */
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.service-card__glyph { width: 44px; height: 44px; color: var(--color-dark-violet); }
.service-card__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}
:lang(ar) .service-card__title { text-transform: none; letter-spacing: 0; }
.service-card__text { color: var(--surface-text); }
.service-card__services {
  display: grid;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-on-light);
  font-weight: 600;
  font-size: 0.9375rem;
}
.service-card__services li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.service-card__services li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--color-dark-violet);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Process step
   -------------------------------------------------------------------------- */
.process-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.process-step {
  counter-increment: step;
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.process-step__marker {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(167, 139, 250, 0.55);
  border-radius: 50%;
  background: var(--surface-bg);
  color: var(--color-light-violet);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.process-step__marker::before { content: counter(step, decimal-leading-zero); }
.process-step__name {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.process-step--final .process-step__marker {
  background: var(--color-dark-violet);
  border-color: var(--color-white);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Lab proof card (rendered only from approved Lab items — none at present)
   -------------------------------------------------------------------------- */
.lab-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-lg);
}
.lab-card__title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; }
.lab-card__meta { display: grid; gap: var(--space-2); font-size: var(--fs-small); }
.lab-card__meta dt { font-weight: 700; }
.lab-card__meta dd { margin: 0; color: var(--surface-text-2); }

/* --------------------------------------------------------------------------
   Insight card (rendered only from approved articles — none at present)
   -------------------------------------------------------------------------- */
.insight-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-lg);
}
.insight-card__title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }
.insight-card__title a { text-decoration: none; }
.insight-card__title a:hover { text-decoration: underline; }
.insight-card__meta { font-size: var(--fs-small); color: var(--surface-text-2); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { border-block-start: 1px solid var(--border-on-dark); }
.site-footer__top {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-6);
}
.site-footer__brand { display: grid; gap: var(--space-3); max-width: 26rem; align-content: start; }
.site-footer__descriptor { color: var(--surface-text-2); font-size: var(--fs-small); }
.site-footer__principle { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.01em; }
.site-footer__cols { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.footer-col { display: grid; gap: var(--space-3); align-content: start; }
.footer-col__title {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--surface-text-2);
}
:lang(ar) .footer-col__title { text-transform: none; }
.footer-col__title { margin: 0; line-height: 1.6; min-height: 24px; display: flex; align-items: center; }
.footer-col__title .footer-link { min-height: 24px; color: inherit; } /* ≥24px target (WCAG 2.2 2.5.8) */
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.footer-col__list { display: grid; gap: var(--space-1); font-size: 0.9375rem; }
.footer-col__list > li { min-height: 32px; display: flex; align-items: center; }
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  color: var(--color-white);
  text-decoration: none;
  text-underline-offset: 0.3em;
}
.footer-link:hover { text-decoration: underline; }
.footer-link:active { text-decoration-thickness: 2px; }
.footer-col__list .footer-link { min-height: 32px; } /* target ≥24px (WCAG 2.2 2.5.8); 32px with spacing */

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--border-on-dark);
}
.legal-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--fs-small); }
.ai-note { color: var(--color-white); font-size: 0.9375rem; }
.ai-note .link { min-height: 32px; }