/* ===================================================================
   GLOBALEUR — Shared design system (mirrors the Home/index.html look)
   Dark technical surface · azure accent · sharp edges · mono labels.
   Layered on top of the per-page Tailwind config. Used by the
   Solutions / Customers / Resources / About pages so they match Home.
   =================================================================== */

:root {
  --cyan: #4f93f0;
  --cyan-glow: rgba(79, 147, 240, 0.45);
  --cyan-wash: rgba(79, 147, 240, 0.10);
  --line-cyan: rgba(79, 147, 240, 0.36);
  --blue-grad: linear-gradient(96deg, #3a6fe0 0%, #4f93f0 48%, #87b6ff 100%);
}

body { background-color: #131313; color: #e5e2e1; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ---- Surfaces ---------------------------------------------------- */
.tech-border { border: 1px solid #353534; }
.tech-noir-panel { background-color: #0A0A0A; border: 1px solid #1A1A1A; }
.glass-panel { background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(12px); }

.grid-bg {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* scanning highlight (used in hero / panels) */
.scanline {
  width: 100%; height: 100px; z-index: 10;
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%);
  position: absolute; animation: scan 8s linear infinite; pointer-events: none;
}
@keyframes scan { 0% { top: -100px; } 100% { top: 100%; } }

/* ---- Eyebrow + accent type -------------------------------------- */
.eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--cyan); display: inline-block; }
.eyebrow.center { justify-content: center; }

.accent-grad {
  background: var(--blue-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---- Buttons (mirrors Home) ------------------------------------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #ffffff; color: #131313;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.2em;
  padding: 18px 38px; transition: opacity .2s ease;
}
.btn-primary:hover { opacity: 0.9; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid #8e9192; color: #ffffff;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em;
  padding: 18px 38px; transition: background .2s ease, border-color .2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.05); }

/* ---- Reveal animation ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
html.reveal-instant .reveal, html.reveal-instant .reveal-line, html.reveal-instant .meter-fill { transition: none !important; }

/* ---- Meter bars (proof/metrics) --------------------------------- */
.meter-fill { transform-origin: left center; }
@keyframes meterGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .meter-fill.fill-go { animation: meterGrow 1s cubic-bezier(.2,.7,.3,1) both; }
}

/* ---- Console / readout chips (ec-*) ----------------------------- */
.ec-ctx { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid #353534; }
.ec-ctx-dot { width: 6px; height: 6px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow); }
.ec-ctx-txt { font-size: 11.5px; letter-spacing: 0.14em; color: #c6c6c6; font-family: 'JetBrains Mono', monospace; }
.ec-line { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 13px; line-height: 1.5; font-family: 'JetBrains Mono', monospace; }
.ec-tag { font-size: 9.5px; letter-spacing: 0.1em; padding: 3px 7px; border: 1px solid #444748; color: #8e9192; flex: none; transform: translateY(-1px); font-family: 'JetBrains Mono', monospace; }
.ec-tag.t-ingest { color: #c6c6c6; }
.ec-tag.t-reason { color: var(--cyan); border-color: var(--line-cyan); background: var(--cyan-wash); }
.ec-tag.t-emit { color: #2ee06a; border-color: rgba(46,224,106,0.4); background: rgba(46,224,106,0.07); }
.ec-kv { color: #c6c6c6; } .ec-k { color: #8e9192; } .ec-eq { color: #444748; margin: 0 6px; } .ec-v { color: #e5e2e1; }

/* ---- Signal ticker ---------------------------------------------- */
.ticker { border-top: 1px solid #353534; border-bottom: 1px solid #353534; background: #0e0e0e; overflow: hidden; }
.ticker-row { display: flex; align-items: stretch; }
.ticker-label { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 24px; border-right: 1px solid #353534; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #8e9192; white-space: nowrap; background: #0e0e0e; z-index: 2; }
.ticker-label .pulse { width: 6px; height: 6px; border-radius: 50%; background: #2ee06a; }
.ticker-mask { overflow: hidden; flex: 1; position: relative; padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker-track { display: inline-flex; gap: 40px; white-space: nowrap; animation: tickermove 38s linear infinite; will-change: transform; }
.ticker-track span { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #c6c6c6; }
.ticker-track span b { color: var(--cyan); font-weight: 500; }
.ticker-track .sep { color: #444748; }
@keyframes tickermove { from { transform: translateX(0) } to { transform: translateX(-50%) } }

@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(46,224,106,0.5)} 70%{box-shadow:0 0 0 7px rgba(46,224,106,0)} 100%{box-shadow:0 0 0 0 rgba(46,224,106,0)} }