/* ============================================================
   MERIDIAN — Landing page styles
   Design language : Architech suite (slate-950 + amber-400,
   font-light Inter + font-mono labels, control-grid-bg pattern,
   control-pulse status, IntroOverlay Smart City Brain).
   Sister-sites : urban, sentinel, universal, wallet, smart.
   ============================================================ */

:root {
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --emerald-400: #34d399;
  --cyan-400: #22d3ee;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular,
    Menlo, Monaco, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--slate-950);
  color: var(--slate-200);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  min-height: 100vh;
}

::selection { background: var(--amber-400); color: var(--slate-950); }

a { color: inherit; text-decoration: none; }

img, svg, canvas { display: block; max-width: 100%; }

button { font-family: inherit; }

/* ------------------------------------------------------------
   Smart City Brain overlay (NeuralCanvas + texte centré + fade)
   ------------------------------------------------------------ */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--slate-950);
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0ms ease-out;
}
#intro-overlay canvas {
  position: absolute;
  inset: 0;
  display: block;
}
#intro-overlay .intro-veil {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.35);
}
#intro-overlay .intro-vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(2, 6, 23, 0) 40%,
    rgba(2, 6, 23, 0.75) 100%
  );
}
#intro-overlay .intro-label {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#intro-overlay .intro-label h1 {
  margin: 0;
  padding: 0 1.5rem;
  font-family: var(--font-mono);
  font-weight: 300;
  letter-spacing: 0.35em;
  font-size: clamp(0.7rem, 1.1vw, 0.95rem);
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.6);
  text-align: center;
}
html.intro-seen #intro-overlay { display: none !important; }

/* ------------------------------------------------------------
   Control grid background (radial amber sommet + grille cyan 50px)
   ------------------------------------------------------------ */
.control-grid-bg {
  background-image:
    radial-gradient(circle at 50% 0, rgba(251, 191, 36, 0.04) 0%, transparent 60%),
    linear-gradient(rgba(34, 211, 238, 0.025) 1px, transparent 0),
    linear-gradient(90deg, rgba(34, 211, 238, 0.025) 1px, transparent 0);
  background-size: 100% 100%, 50px 50px, 50px 50px;
}

/* ------------------------------------------------------------
   Control pulse (status dot)
   ------------------------------------------------------------ */
.control-pulse { animation: control-pulse 2s ease-in-out infinite; }
@keyframes control-pulse { 50% { opacity: 0.5; } }

/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.container-5xl { max-width: 64rem; }
.container-6xl { max-width: 72rem; }
.container-7xl { max-width: 80rem; }

section { border-bottom: 1px solid var(--slate-800); }
section:last-of-type { border-bottom: 0; }
.section-soft-border { border-bottom-color: rgba(30, 41, 59, 0.6); }

/* ------------------------------------------------------------
   Nav top
   ------------------------------------------------------------ */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  font-size: 0.875rem;
}
.topnav .wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--amber-400);
  white-space: nowrap;
}
.topnav .wordmark .sub {
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--slate-500);
}
.topnav .links {
  display: none;
  gap: 1rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-400);
}
.topnav .links a { white-space: nowrap; transition: color 200ms; }
.topnav .links a:hover { color: var(--amber-300); }
.topnav .right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.status-pill {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--emerald-400);
  white-space: nowrap;
}
.status-pill .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald-400);
}
.status-pill .dot-amber { background: var(--amber-400); }
@media (min-width: 768px) {
  .topnav .links { display: flex; }
  .status-pill { display: flex; }
}

/* ------------------------------------------------------------
   Eyebrow + section header
   ------------------------------------------------------------ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(251, 191, 36, 0.8);
  margin: 0 0 0.75rem 0;
}
.section-header { margin-bottom: 3rem; max-width: 48rem; }
.section-header .eyebrow { margin-bottom: 0.75rem; }
.section-header h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  font-weight: 200;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--slate-100);
  margin: 0;
}
.section-header h2 .accent { color: var(--amber-400); font-weight: 200; }
.section-header p.lede {
  margin-top: 1.25rem;
  max-width: 42rem;
  color: var(--slate-400);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
  position: relative;
}
.hero-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
  position: relative;
}
.hero h1 {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 200;
  letter-spacing: 0.025em;
  line-height: 1.45;
  max-width: 46rem;
  color: var(--slate-100);
  margin: 0;
}
.hero h1 .accent { color: var(--amber-400); }
.hero p.lede {
  margin-top: 1.5rem;
  max-width: 40rem;
  color: var(--slate-400);
  font-size: 0.9375rem;
  line-height: 1.75;
}
.hero p.lede .em { color: var(--slate-200); }
.hero .ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background-color 200ms, border-color 200ms, color 200ms;
}
.btn-primary { background: var(--amber-400); color: var(--slate-950); }
.btn-primary:hover { background: var(--amber-300); }
.btn-secondary {
  border: 1px solid var(--slate-700);
  color: var(--slate-200);
}
.btn-secondary:hover { border-color: rgba(251, 191, 36, 0.6); color: var(--amber-300); }
.btn .arrow { display: inline-block; }

.kpi-grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  border-top: 1px solid var(--slate-800);
  padding-top: 2rem;
  max-width: 48rem;
}
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.kpi .value {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3.2vw, 1.875rem);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--amber-400);
}
.kpi .label {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-500);
}

/* ------------------------------------------------------------
   Vision section (long text)
   ------------------------------------------------------------ */
.vision-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .vision-grid { grid-template-columns: 1fr 1fr; } }
.vision-grid p {
  color: var(--slate-400);
  font-size: 0.9375rem;
  line-height: 1.75;
  margin: 0;
}
.vision-grid p .em { color: var(--slate-100); font-weight: 400; }

/* ------------------------------------------------------------
   Card grids (layers, modes, standards)
   ------------------------------------------------------------ */
.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}
.card {
  border: 1px solid var(--slate-800);
  border-radius: 0.5rem;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.3);
  transition: border-color 200ms, background-color 200ms;
}
.card:hover { border-color: rgba(251, 191, 36, 0.35); background: rgba(15, 23, 42, 0.5); }
.card .tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--slate-500);
  margin-bottom: 0.5rem;
}
.card h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--slate-100);
  margin: 0 0 0.5rem 0;
}
.card h3 .accent { color: var(--amber-400); }
.card p {
  color: var(--slate-400);
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}
.card .meta {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--slate-600);
}

/* ------------------------------------------------------------
   Protocols chip grid
   ------------------------------------------------------------ */
.chip-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .chip-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .chip-grid { grid-template-columns: repeat(4, 1fr); } }
.chip {
  border: 1px solid var(--slate-800);
  border-radius: 0.375rem;
  padding: 0.75rem 0.875rem;
  background: rgba(15, 23, 42, 0.2);
  transition: border-color 200ms, color 200ms;
}
.chip:hover { border-color: rgba(251, 191, 36, 0.4); }
.chip .name {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-100);
  letter-spacing: 0.02em;
}
.chip .role {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate-500);
}

/* ------------------------------------------------------------
   Standards row (IFC + AAS + WoT + Brick + …)
   ------------------------------------------------------------ */
.standards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.standards-row .standard {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  border: 1px solid var(--slate-800);
  border-radius: 0.375rem;
  padding: 0.625rem 0.875rem;
  background: rgba(15, 23, 42, 0.2);
}
.standards-row .standard .key {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--amber-400);
  letter-spacing: 0.02em;
}
.standards-row .standard .what {
  font-size: 0.75rem;
  color: var(--slate-400);
}

/* ------------------------------------------------------------
   Performance numbers grid
   ------------------------------------------------------------ */
.perf-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .perf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .perf-grid { grid-template-columns: repeat(3, 1fr); } }
.perf-cell {
  border-left: 1px solid var(--slate-800);
  padding-left: 1.25rem;
}
.perf-cell .value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 100;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--amber-400);
}
.perf-cell .unit {
  display: inline-block;
  margin-left: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--slate-400);
}
.perf-cell .label {
  margin-top: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--slate-500);
  line-height: 1.5;
}

/* ------------------------------------------------------------
   Status / roadmap
   ------------------------------------------------------------ */
.status-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .status-grid { grid-template-columns: repeat(3, 1fr); } }
.status-step {
  border: 1px solid var(--slate-800);
  border-radius: 0.5rem;
  padding: 1.25rem;
}
.status-step .marker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 0.625rem;
}
.status-step.now .marker { color: var(--amber-400); }
.status-step.now { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.04); }
.status-step.next .marker { color: var(--slate-300); }
.status-step.later .marker { color: var(--slate-500); }
.status-step .marker .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.status-step.now .marker .dot { background: var(--amber-400); }
.status-step.next .marker .dot { background: var(--slate-400); }
.status-step.later .marker .dot { background: var(--slate-600); }
.status-step h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 300;
  color: var(--slate-100);
}
.status-step p {
  margin: 0;
  color: var(--slate-400);
  font-size: 0.875rem;
  line-height: 1.65;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer {
  padding: 4rem 0 3rem;
  color: var(--slate-500);
}
.footer-inner {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr; } }
.footer .brand {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--amber-400);
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--slate-300);
  margin: 0 0 0.75rem 0;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 0.5rem; font-size: 0.8125rem; }
.footer a:hover { color: var(--amber-300); }
.footer .copy {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--slate-800);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--slate-600);
}

/* ------------------------------------------------------------
   Language switcher (port identique du LanguageSwitcher urban)
   ------------------------------------------------------------ */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}
.lang-switcher button {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: transparent;
  border: 0;
  color: var(--slate-400);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0.05em;
  transition: color 200ms, background-color 200ms, font-weight 200ms;
}
.lang-switcher button:hover { color: var(--amber-300); }
.lang-switcher button[aria-current="true"] {
  background: var(--amber-400);
  color: var(--slate-950);
  font-weight: 500;
}

/* ------------------------------------------------------------
   Arabic font + RTL adjustments
   ------------------------------------------------------------ */
html[lang="ar"] body {
  font-family: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif;
}
html[lang="ar"] .text-mono,
html[lang="ar"] .eyebrow,
html[lang="ar"] .footer .brand,
html[lang="ar"] .footer h4,
html[lang="ar"] .card .tag,
html[lang="ar"] .card .meta,
html[lang="ar"] .chip .role,
html[lang="ar"] .lang-switcher,
html[lang="ar"] .topnav .wordmark {
  /* Mono labels en Noto Naskh Arabic ou Noto Sans Arabic — Inter ne gère
     pas l'arabe, JetBrains Mono non plus. */
  font-family: 'Noto Sans Arabic', 'JetBrains Mono', ui-monospace, monospace;
}
/* Le wordmark MERIDIAN reste latin même en arabe — c'est un brand name */
html[lang="ar"] .topnav .wordmark > span:first-child {
  font-family: var(--font-mono);
}

/* Numbers et code blocks restent LTR + tabular */
html[lang="ar"] .kpi .value,
html[lang="ar"] .perf-cell .value,
html[lang="ar"] .perf-cell .unit,
html[lang="ar"] code,
html[lang="ar"] .text-mono,
html[lang="ar"] .docs-code {
  direction: ltr;
  unicode-bidi: isolate;
}

/* RTL : flip des flèches → */
[dir="rtl"] .btn .arrow {
  display: inline-block;
  transform: scaleX(-1);
}
/* RTL : bordures latérales perf-cell passent à droite */
[dir="rtl"] .perf-cell {
  border-left: 0;
  border-right: 1px solid var(--slate-800);
  padding-left: 0;
  padding-right: 1.25rem;
}
/* RTL : unit margin */
[dir="rtl"] .perf-cell .unit {
  margin-left: 0;
  margin-right: 0.375rem;
}
/* RTL : status-pill dot order */
[dir="rtl"] .status-pill,
[dir="rtl"] .status-step .marker {
  flex-direction: row-reverse;
}
/* RTL : topnav padding-left → padding-right */
[dir="rtl"] .topnav .right { padding-right: 0.5rem; padding-left: 0; }

/* RTL : alignement des cards et headers reste auto via flow direction */
/* RTL : Intro overlay text stays centered + LTR (brand mark "Smart City Brain") */
#intro-overlay .intro-label h1 {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ------------------------------------------------------------
   Utilities
   ------------------------------------------------------------ */
.section-pad { padding: 5rem 0; }
.section-pad-sm { padding: 3.5rem 0; }
.text-amber { color: var(--amber-400); }
.text-slate-100 { color: var(--slate-100); }
.text-slate-300 { color: var(--slate-300); }
.text-slate-400 { color: var(--slate-400); }
.text-mono { font-family: var(--font-mono); }
.text-uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.2em; }
.relative { position: relative; }