/* ==========================================================================
   El-Ahlyia Digital Ecosystem — shared design tokens
   One visual system, three registers: World (editorial), Company (warm),
   Engine (structured). Same palette + type family throughout; discipline,
   not decoration, is what should tell the surfaces apart.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* brand */
  --navy:        #163a5e;
  --navy-deep:   #0e2540;
  --navy-soft:   #2c5581;
  --red:         #e01f2e;
  --red-deep:    #b8121f;

  /* neutrals */
  --paper:       #ffffff;
  --paper-warm:  #faf8f5;
  --paper-off:   #f4f5f7;
  --ink:         #1a1d22;
  --ink-soft:    rgba(26,29,34,0.62);
  --ink-faint:   rgba(26,29,34,0.40);
  --line:        rgba(26,29,34,0.10);
  --line-dark:   rgba(255,255,255,0.16);

  /* type */
  --serif: 'Source Serif 4', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --maxw: 1280px;
  --ease: cubic-bezier(.22,.61,.14,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  /* ecosystem accent, set per-surface via body[data-surface] below */
  --surface-accent: var(--red);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }

@media (max-width: 780px){ .wrap{ padding:0 24px; } }

::selection{ background:var(--navy); color:#fff; }

/* ---------- reveal-on-load / reveal-on-scroll (shared everywhere) ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.03s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.11s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.19s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.27s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.35s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.43s; }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ transition-duration:.01s !important; }
}

/* ---------- ecosystem switcher : slim persistent strip, identical on every page ---------- */
.ecosystem-bar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:34px; background:var(--navy-deep); color:rgba(255,255,255,.72);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* .wrap below is the only child and owns the actual flex layout (space-between
   label vs links). This element must NOT also be display:flex — that would
   make .wrap a flex item that shrinks to content width and gets centered by
   its own auto-margins instead of stretching to fill the bar. */
.ecosystem-bar .wrap{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.ecosystem-bar .eco-label{ opacity:.5; font-weight:500; }
.ecosystem-bar .eco-links{ display:flex; align-items:center; gap:28px; height:100%; }
.ecosystem-bar .eco-links a{
  position:relative; height:100%; display:flex; align-items:center; text-decoration:none;
  color:rgba(255,255,255,.62); font-weight:500; transition:color .2s ease;
}
.ecosystem-bar .eco-links a:hover{ color:#fff; }
.ecosystem-bar .eco-links a.active{ color:#fff; }
.ecosystem-bar .eco-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red);
}
.ecosystem-bar .eco-links a .dot{
  width:5px; height:5px; border-radius:50%; background:currentColor; margin-right:8px; opacity:.7;
}

@media (max-width: 780px){
  .ecosystem-bar .eco-label{ display:none; }
  .ecosystem-bar .eco-links{ gap:18px; }
}

/* ---------- shared section scaffolding ---------- */
.section-head{ max-width:640px; }
.section-head .tag{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--surface-accent); }
.section-head h2{ margin-top:16px; font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.2; }
.section-head p{ margin-top:16px; font-size:1rem; line-height:1.7; color:var(--ink-soft); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:600; text-decoration:none; border-radius:2px;
  padding:15px 30px; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  border:1px solid transparent;
}
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-deep); transform:translateY(-1px); }
.btn-ghost-dark{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn-ghost-dark:hover{ border-color:#fff; }
.btn-ghost-light{ border-color:var(--ink); color:var(--ink); }
.btn-ghost-light:hover{ background:var(--ink); color:#fff; }

.eyebrow{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--surface-accent); }
.crumb{ font-size:13px; color:var(--ink-faint); }
.crumb a{ text-decoration:none; color:var(--ink-soft); }
.crumb a:hover{ color:var(--ink); }
.crumb span{ margin:0 8px; opacity:.5; }

/* page transition veil — brief cross-fade used by nav links between pages */
#page-veil{
  position:fixed; inset:0; z-index:9999; background:var(--paper);
  opacity:0; pointer-events:none; transition:opacity .32s var(--ease-soft);
}
#page-veil.on{ opacity:1; pointer-events:all; }
body.veil-in #page-veil{ opacity:1; }