/* ──────────────────────────────────────────────────────────────────────────
 * ODIN — design tokens (foundation for the 2026 revamp)
 *
 * Palette: ui-ux-pro-max "Financial Dashboard" — dark base, emerald
 * accent for positive/money signals, red for risk/destructive, slate
 * neutrals. Typography: IBM Plex Sans + IBM Plex Mono. Motion: subtle
 * but present, hardware-accelerated transforms only.
 *
 * Anti-slop discipline (taste-skill):
 *   • max 1 accent, saturation < 80 %
 *   • no purple/neon · no centered hero · no equal 3-col grids
 *   • numbers/data → monospace · active state → scale(0.97)
 *   • stagger animations via --i index
 *
 * This file is meant to load FIRST, before any other CSS, so that
 * downstream stylesheets can reference these tokens without duplicating
 * literal values. Eventually all of odin{,-light,-osint,-redesign,-pro}.css
 * will be consolidated and migrated onto these tokens — this is the
 * landing pad for that work (Phase A → C of AUDIT.md).
 * ────────────────────────────────────────────────────────────────────── */

:root {
  /* ── color: dark mode (default) ─────────────────────────────────── */
  --o-bg:           #020617;          /* page background */
  --o-bg-elevated: #0e1223;           /* cards, panes */
  --o-bg-sunken:   #010410;           /* recessed, behind cards */
  --o-fg:           #f8fafc;          /* primary text */
  --o-fg-muted:    #94a3b8;           /* secondary text */
  --o-fg-faint:    #64748b;           /* tertiary text / placeholders */
  --o-border:      #334155;           /* hairlines */
  --o-border-faint:#1e293b;           /* low-contrast separators */

  --o-accent:        #22c55e;         /* emerald — money / positive */
  --o-accent-soft:   #15803d;         /* darker emerald for active */
  --o-accent-glow:   rgba(34, 197, 94, .18);

  --o-danger:        #ef4444;         /* alerts / destructive */
  --o-danger-soft:   #b91c1c;
  --o-warn:          #f59e0b;         /* warnings */
  --o-info:          #38bdf8;         /* info / links */

  --o-risk-low:      #22c55e;         /* gradient endpoints for risk score */
  --o-risk-mid:      #f59e0b;
  --o-risk-high:     #ef4444;

  /* ── color: light mode override (only when [data-theme="light"]) ── */
  /* Kept token names identical — flips polarities. */

  /* ── typography ─────────────────────────────────────────────────── */
  --o-font-sans:  "IBM Plex Sans", "Geist", system-ui, -apple-system, sans-serif;
  --o-font-mono:  "IBM Plex Mono", "JetBrains Mono", "Geist Mono", ui-monospace, monospace;
  --o-font-display:"IBM Plex Sans", "Geist", system-ui, sans-serif; /* alias */

  /* type scale (Material 3 inspired but tightened) */
  --o-text-xs:    .75rem;     /* 12 */
  --o-text-sm:    .82rem;     /* ~13 */
  --o-text-base:  .95rem;     /* ~15 — primary body */
  --o-text-md:    1.05rem;    /* ~17 — emphasized body */
  --o-text-lg:    1.25rem;    /* 20 — subhead */
  --o-text-xl:    1.6rem;     /* ~26 — section title */
  --o-text-2xl:   2.1rem;     /* ~34 — page title */
  --o-text-display: 3.4rem;   /* ~54 — hero */

  --o-leading-tight: 1.15;
  --o-leading-snug:  1.35;
  --o-leading-base:  1.55;
  --o-tracking-tight:-.02em;

  /* ── space (4 px base, doubling) ────────────────────────────────── */
  --o-s-1:  4px;   --o-s-2:  8px;   --o-s-3: 12px;   --o-s-4: 16px;
  --o-s-5: 20px;   --o-s-6: 24px;   --o-s-8: 32px;   --o-s-10:40px;
  --o-s-12:48px;   --o-s-16:64px;   --o-s-20:80px;

  /* ── radius ─────────────────────────────────────────────────────── */
  --o-r-sm: 6px;
  --o-r-md: 10px;
  --o-r-lg: 14px;
  --o-r-xl: 20px;
  --o-r-pill: 999px;

  /* ── elevation (subtle, dark-mode-aware) ────────────────────────── */
  --o-shadow-sm:  0 1px 2px rgba(0,0,0,.45);
  --o-shadow-md:  0 4px 14px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
  --o-shadow-lg:  0 10px 32px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.5);
  /* glow accents for hover states */
  --o-glow-accent:0 0 0 1px var(--o-accent), 0 0 24px var(--o-accent-glow);

  /* ── motion (cubic-bezier from taste-skill) ─────────────────────── */
  --o-ease:      cubic-bezier(0.16, 1, 0.3, 1);     /* standard */
  --o-ease-in:   cubic-bezier(0.7, 0, 1, 0.4);
  --o-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --o-dur-fast:  120ms;
  --o-dur-base:  220ms;
  --o-dur-slow:  420ms;

  /* ── containers ─────────────────────────────────────────────────── */
  --o-container:  1400px;
  --o-container-tight: 1024px;
  --o-container-wide: 1680px;

  /* z-index scale */
  --o-z-base:  1;
  --o-z-card:  10;
  --o-z-nav:   100;
  --o-z-modal: 1000;
  --o-z-toast: 1100;
}

/* light theme override — flip foreground/background, keep accents */
:root[data-theme="light"] {
  --o-bg:          #f8fafc;
  --o-bg-elevated:#ffffff;
  --o-bg-sunken:  #f1f5f9;
  --o-fg:          #0f172a;
  --o-fg-muted:   #475569;
  --o-fg-faint:   #94a3b8;
  --o-border:      #e2e8f0;
  --o-border-faint:#f1f5f9;
  --o-shadow-sm:  0 1px 2px rgba(15,23,42,.06);
  --o-shadow-md:  0 4px 14px rgba(15,23,42,.08);
  --o-shadow-lg:  0 10px 32px rgba(15,23,42,.12);
}

/* ──────────────────────────────────────────────────────────────────
 * Reset + base — the bare minimum a tokenized rewrite needs.
 * Existing legacy stylesheets continue to work (these tokens only
 * declare custom properties; they don't override any selectors).
 * ────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --o-dur-fast: 0ms;
    --o-dur-base: 0ms;
    --o-dur-slow: 0ms;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * Utility classes for the revamp — incrementally adopt these on new
 * components without breaking the legacy stylesheets.
 * ────────────────────────────────────────────────────────────────── */

.o-mono            { font-family: var(--o-font-mono); font-feature-settings: "tnum"; }
.o-display         { font-family: var(--o-font-display); font-size: var(--o-text-display);
                     line-height: var(--o-leading-tight); letter-spacing: var(--o-tracking-tight);
                     font-weight: 700; }
.o-card            { background: var(--o-bg-elevated); border: 1px solid var(--o-border-faint);
                     border-radius: var(--o-r-lg); padding: var(--o-s-5);
                     box-shadow: var(--o-shadow-md); }
.o-card:hover      { border-color: var(--o-border); transition: border-color var(--o-dur-base) var(--o-ease); }

.o-btn             { display: inline-flex; align-items: center; gap: var(--o-s-2);
                     padding: 10px 18px; border-radius: var(--o-r-md);
                     font: 600 var(--o-text-sm)/1 var(--o-font-sans);
                     background: var(--o-accent); color: var(--o-bg);
                     border: 0; cursor: pointer;
                     transition: transform var(--o-dur-fast) var(--o-ease),
                                 box-shadow var(--o-dur-base) var(--o-ease); }
.o-btn:hover       { box-shadow: var(--o-glow-accent); }
.o-btn:active      { transform: scale(0.97); }
.o-btn--ghost      { background: transparent; color: var(--o-fg);
                     border: 1px solid var(--o-border); }
.o-btn--ghost:hover{ border-color: var(--o-accent); color: var(--o-accent); }
.o-btn--danger     { background: var(--o-danger); color: white; }

.o-input           { background: var(--o-bg-sunken); color: var(--o-fg);
                     border: 1px solid var(--o-border); border-radius: var(--o-r-md);
                     padding: 12px 14px; font: 400 var(--o-text-base) var(--o-font-sans);
                     width: 100%; transition: border-color var(--o-dur-base) var(--o-ease); }
.o-input:focus     { outline: 0; border-color: var(--o-accent); }

.o-pill            { display: inline-flex; align-items: center; gap: 6px;
                     padding: 4px 10px; border-radius: var(--o-r-pill);
                     font: 500 var(--o-text-xs) var(--o-font-sans);
                     background: rgba(255,255,255,.06); color: var(--o-fg-muted);
                     border: 1px solid var(--o-border-faint); }
.o-pill--accent    { background: var(--o-accent-glow); color: var(--o-accent);
                     border-color: var(--o-accent); }
.o-pill--danger    { background: rgba(239,68,68,.12); color: var(--o-danger);
                     border-color: var(--o-danger); }

/* Stagger entrance animation — set --i (index) on each child */
@keyframes o-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.o-stagger > *     { opacity: 0; animation: o-fade-up var(--o-dur-slow) var(--o-ease) forwards;
                     animation-delay: calc(var(--i, 0) * 55ms); }

/* Risk gradient — gradient text for risk score numbers */
.o-risk-grad       { background: linear-gradient(90deg, var(--o-risk-low), var(--o-risk-mid), var(--o-risk-high));
                     -webkit-background-clip: text; background-clip: text;
                     -webkit-text-fill-color: transparent; color: transparent; }

/* Spotlight border — radial-gradient follows --mouse-x/--mouse-y (set via JS) */
.o-spotlight       { position: relative; overflow: hidden; }
.o-spotlight::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
              var(--o-accent-glow), transparent 50%);
  opacity: 0; transition: opacity var(--o-dur-base) var(--o-ease);
  pointer-events: none;
}
.o-spotlight:hover::before { opacity: 1; }

/* Bento grid — used for KPI / dashboard layouts (anti-slop: not equal cols) */
.o-bento {
  display: grid;
  gap: var(--o-s-4);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(120px, auto);
}
.o-bento > .span-lg { grid-column: span 4; grid-row: span 2; }
.o-bento > .span-md { grid-column: span 3; }
.o-bento > .span-sm { grid-column: span 2; }
@media (max-width: 768px) {
  .o-bento { grid-template-columns: repeat(2, 1fr); }
  .o-bento > .span-lg { grid-column: span 2; grid-row: span 1; }
  .o-bento > .span-md { grid-column: span 2; }
  .o-bento > .span-sm { grid-column: span 1; }
}

/* ──────────────────────────────────────────────────────────────────
 * Hero v2 — minimal. Brand mark + single search + factual numbers.
 * No taglines, no marketing copy, no list of data sources.
 * Designed per user feedback "nu mai pune tu descrieri".
 * ────────────────────────────────────────────────────────────────── */
.o-hero--minimal {
  position: relative;
  background: var(--o-bg);
  color: var(--o-fg);
  min-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px);
  overflow: hidden;
}
.o-hero--minimal::before {
  /* layered ambient: a faint dot grid + a single off-axis radial accent.
     No purple, no neon — emerald glow at low opacity per anti-slop rules. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px circle at 92% 8%, var(--o-accent-glow), transparent 55%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, 22px 22px;
  opacity: .9;
}
.o-hero__minimal-inner {
  position: relative;
  width: 100%; max-width: 720px;
  display: flex; flex-direction: column;
  align-items: flex-start;             /* anti-slop: not centered */
  gap: clamp(24px, 3vw, 36px);
}
@media (max-width: 600px) {
  .o-hero__minimal-inner { align-items: stretch; }
}

/* brand wordmark */
.o-brand {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--o-fg);
  opacity: 0; animation: o-fade-up .6s var(--o-ease) forwards;
}
.o-brand__mark { width: 44px; height: 32px; color: var(--o-accent); }
.o-brand__name {
  font-family: var(--o-font-mono);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  letter-spacing: .14em;
  line-height: 1;
}

/* search */
.o-search { width: 100%; position: relative;
  opacity: 0; animation: o-fade-up .6s var(--o-ease) forwards;
  animation-delay: 90ms;
}
.o-search__row {
  display: flex; align-items: stretch;
  background: var(--o-bg-elevated);
  border: 1px solid var(--o-border);
  border-radius: var(--o-r-lg);
  padding: 6px;
  transition: border-color var(--o-dur-base) var(--o-ease),
              box-shadow var(--o-dur-base) var(--o-ease);
}
.o-search__row:focus-within {
  border-color: var(--o-accent);
  box-shadow: 0 0 0 4px var(--o-accent-glow);
}
.o-search__row input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: 400 clamp(1rem, 1.6vw, 1.1rem) var(--o-font-sans);
  padding: 14px 16px; color: var(--o-fg);
}
.o-search__row input::placeholder { color: var(--o-fg-faint); }
.o-search__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; padding: 0 18px;
  background: var(--o-accent); color: var(--o-bg);
  border: 0; border-radius: var(--o-r-md);
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform var(--o-dur-fast) var(--o-ease),
              box-shadow var(--o-dur-base) var(--o-ease);
}
.o-search__btn:hover  { box-shadow: var(--o-glow-accent); }
.o-search__btn:active { transform: scale(.97); }
.o-search__ac {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--o-bg-elevated);
  border: 1px solid var(--o-border);
  border-radius: var(--o-r-lg);
  box-shadow: var(--o-shadow-lg);
  max-height: 380px; overflow: auto;
  color: var(--o-fg); z-index: 30;
}

/* counters — single inline row, monospace, no decorative bento boxes */
.o-counters {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 14px;
  font-family: var(--o-font-mono);
  opacity: 0; animation: o-fade-up .6s var(--o-ease) forwards;
  animation-delay: 180ms;
}
.o-counter        { display: inline-flex; align-items: baseline; gap: 6px; }
.o-counter__num   { font-size: clamp(1.4rem, 2.4vw, 1.8rem);
                    font-weight: 600; color: var(--o-fg);
                    font-feature-settings: "tnum"; }
.o-counter__lbl   { font-size: var(--o-text-xs); color: var(--o-fg-muted);
                    text-transform: lowercase; letter-spacing: .04em; }
.o-counter__sep   { color: var(--o-border); font-family: var(--o-font-mono); }

/* live ticker strip — bottom of hero, single line, gentle horizontal marquee */
.o-ticker-strip {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 24px; flex-wrap: nowrap; overflow: hidden;
  width: 100%; max-width: 100%;
  font-family: var(--o-font-mono);
  font-size: var(--o-text-sm);
  color: var(--o-fg-muted);
  border-top: 1px solid var(--o-border-faint);
  padding-top: 18px;
  /* fade left + right so the marquee bleeds out of the container */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  opacity: 0; animation: o-fade-up .6s var(--o-ease) forwards;
  animation-delay: 270ms;
}
.o-ticker-strip:empty { display: none; }
.o-ticker-strip li {
  display: inline-flex; align-items: baseline; gap: 8px;
  white-space: nowrap; flex-shrink: 0;
}
.o-ticker-strip .cui   { color: var(--o-accent); font-size: var(--o-text-xs); }
.o-ticker-strip .name  { color: var(--o-fg); }
.o-ticker-strip .judet { color: var(--o-fg-faint); font-size: var(--o-text-xs); }


/* (legacy hero block kept below for reference, scoped to .o-hero
   non-minimal — used elsewhere if any callers still reference it.)
 * ────────────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────────
 * Company profile header — Phase C.2 reskin
 *
 * Replaces the legacy blue-gradient header (which had repeated visibility
 * bugs #547 / #548 / #563 / #577 because of white-on-white KPI tiles
 * and chips). Now: dark base, monospace CUI, inline-row chips, and a
 * 6-cell stat strip below the name. Keeps every #id intact so the JS
 * that fills values continues to work.
 *
 * Apply by adding `o-firm-header` to the existing #company-header.
 * Existing legacy rules still apply when the new class is absent.
 * ────────────────────────────────────────────────────────────────── */
#company-header.o-firm-header {
  background: linear-gradient(135deg, #0e1223 0%, #131a30 100%);
  color: var(--o-fg);
  border-radius: 0;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--o-border);
  position: relative;
  overflow: hidden;
}
#company-header.o-firm-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px circle at 92% 0%, var(--o-accent-glow), transparent 60%);
  opacity: .5;
}
#company-header.o-firm-header .ch-name {
  color: var(--o-fg);
  font-family: var(--o-font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  text-shadow: none;
}
#company-header.o-firm-header .ch-cui {
  font-family: var(--o-font-mono);
  font-feature-settings: "tnum";
  background: transparent !important;
  border: 0 !important;
  color: var(--o-fg-muted) !important;
  padding: 0 !important;
  font-size: var(--o-text-sm);
  letter-spacing: .04em;
}
#company-header.o-firm-header .ch-cui code {
  background: transparent;
  color: var(--o-fg-muted);
  border: 0;
  padding: 0;
}
#company-header.o-firm-header .ch-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0;
}
#company-header.o-firm-header .ch-chips > * {
  font-family: var(--o-font-sans);
  font-size: var(--o-text-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--o-r-pill);
  background: rgba(255,255,255,.06) !important;
  color: var(--o-fg-muted) !important;
  border: 1px solid var(--o-border-faint) !important;
}
#company-header.o-firm-header .ch-chips > .badge-green,
#company-header.o-firm-header .ch-chips > .flag-low {
  background: var(--o-accent-glow) !important;
  color: var(--o-accent) !important;
  border-color: var(--o-accent) !important;
}
#company-header.o-firm-header .ch-chips > .badge-red,
#company-header.o-firm-header .ch-chips > .flag-high {
  background: rgba(239,68,68,.12) !important;
  color: var(--o-danger) !important;
  border-color: var(--o-danger) !important;
}

/* KPI strip: dark tiles, monospace numbers, gradient risk */
#company-header.o-firm-header .kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 18px;
}
@media (max-width: 900px) { #company-header.o-firm-header .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { #company-header.o-firm-header .kpi-row { grid-template-columns: repeat(2, 1fr); } }

#company-header.o-firm-header .kpi-item {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--o-border-faint) !important;
  border-radius: var(--o-r-md);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color var(--o-dur-base) var(--o-ease),
              background var(--o-dur-base) var(--o-ease);
}
#company-header.o-firm-header .kpi-item:hover {
  border-color: var(--o-accent) !important;
  background: rgba(255,255,255,.06) !important;
}
#company-header.o-firm-header .kpi-item .kpi-val,
#company-header.o-firm-header .kpi-item strong {
  font-family: var(--o-font-mono) !important;
  font-feature-settings: "tnum" !important;
  font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
  font-weight: 600 !important;
  color: var(--o-fg) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: var(--o-fg) !important;
  letter-spacing: -.02em;
  line-height: 1.1;
}
#company-header.o-firm-header .kpi-item .kpi-lbl,
#company-header.o-firm-header .kpi-item small,
#company-header.o-firm-header .kpi-item span:not(strong) {
  font-size: var(--o-text-xs) !important;
  color: var(--o-fg-muted) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* Risk insolvency tile gets the gradient text treatment */
#company-header.o-firm-header #kpi-rating {
  background: linear-gradient(90deg, var(--o-risk-low), var(--o-risk-mid), var(--o-risk-high));
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: clamp(1.4rem, 2vw, 1.6rem) !important;
}

/* Action row buttons — match the dark tiles */
#company-header.o-firm-header #ch-action-row .btn-sm {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--o-border) !important;
  color: var(--o-fg) !important;
  font-weight: 500;
  border-radius: var(--o-r-md);
  transition: all var(--o-dur-base) var(--o-ease);
}
#company-header.o-firm-header #ch-action-row .btn-sm:hover {
  border-color: var(--o-accent) !important;
  color: var(--o-accent) !important;
  background: var(--o-accent-glow);
}

.o-hero {
  position: relative;
  background: var(--o-bg);
  color: var(--o-fg);
  padding: clamp(40px, 7vw, 100px) clamp(20px, 4vw, 56px);
  overflow: hidden;
}
.o-hero::before {
  /* faint grid + radial accent so the dark BG isn't flat */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(800px circle at 80% 0%, var(--o-accent-glow), transparent 50%),
    radial-gradient(600px circle at 0% 100%, rgba(56,189,248,.08), transparent 50%),
    linear-gradient(transparent 95%, rgba(255,255,255,.03) 95%) 0 0 / 24px 24px,
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.03) 95%) 0 0 / 24px 24px;
  opacity: .9;
}
.o-hero__inner {
  position: relative;
  max-width: var(--o-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 900px) {
  .o-hero__inner { grid-template-columns: 1fr; }
}

.o-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--o-r-pill);
  font-family: var(--o-font-mono);
  font-size: var(--o-text-xs); font-weight: 500;
  background: var(--o-accent-glow); color: var(--o-accent);
  border: 1px solid var(--o-accent);
  letter-spacing: .08em; text-transform: uppercase;
}
.o-hero__eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--o-accent); box-shadow: 0 0 8px var(--o-accent);
  animation: o-pulse 2s var(--o-ease) infinite;
}
@keyframes o-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

.o-hero__title {
  font-family: var(--o-font-display);
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  line-height: var(--o-leading-tight);
  letter-spacing: var(--o-tracking-tight);
  font-weight: 700;
  margin: 18px 0 14px;
  color: var(--o-fg);
}
.o-hero__title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--o-accent), #38bdf8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.o-hero__lead {
  font-size: var(--o-text-md);
  color: var(--o-fg-muted);
  max-width: 56ch;
  line-height: var(--o-leading-base);
  margin: 0 0 28px;
}

.o-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* Live ticker — right column on the hero, monospace + scrolling marquee */
.o-ticker {
  background: var(--o-bg-elevated);
  border: 1px solid var(--o-border-faint);
  border-radius: var(--o-r-lg);
  overflow: hidden;
  box-shadow: var(--o-shadow-md);
}
.o-ticker__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--o-border-faint);
  font-size: var(--o-text-xs); font-family: var(--o-font-mono);
  color: var(--o-fg-muted); text-transform: uppercase; letter-spacing: .1em;
}
.o-ticker__head .live {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--o-accent); font-weight: 600;
}
.o-ticker__head .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--o-accent); animation: o-pulse 1.5s var(--o-ease) infinite;
}
.o-ticker__list {
  list-style: none; padding: 0; margin: 0;
  max-height: 280px; overflow: hidden;
  /* fade top + bottom so scrolling has soft edges */
  mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
}
.o-ticker__list li {
  padding: 10px 18px; border-bottom: 1px solid var(--o-border-faint);
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  font-size: var(--o-text-sm);
  opacity: 0; transform: translateY(8px);
  animation: o-fade-up .5s var(--o-ease) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.o-ticker__list li:last-child { border-bottom: 0; }
.o-ticker__list .cui   { font-family: var(--o-font-mono); color: var(--o-fg-muted); font-size: var(--o-text-xs); }
.o-ticker__list .name  { color: var(--o-fg); font-weight: 500;
                         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-ticker__list .judet { font-family: var(--o-font-mono); color: var(--o-fg-faint); font-size: var(--o-text-xs); }

/* Bento stats — replaces the centered .landing-stats-counter */
.o-hero-stats {
  position: relative;
  max-width: var(--o-container);
  margin: clamp(32px, 5vw, 72px) auto 0;
  padding: 0 clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--o-s-4);
}
@media (max-width: 900px) { .o-hero-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .o-hero-stats { grid-template-columns: 1fr 1fr; } }
.o-hero-stats > .stat {
  background: var(--o-bg-elevated);
  border: 1px solid var(--o-border-faint);
  border-radius: var(--o-r-md);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform var(--o-dur-base) var(--o-ease),
              border-color var(--o-dur-base) var(--o-ease);
  opacity: 0;
  animation: o-fade-up .5s var(--o-ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.o-hero-stats > .stat:hover {
  transform: translateY(-2px);
  border-color: var(--o-accent);
}
.o-hero-stats .stat__num {
  font-family: var(--o-font-mono); font-feature-settings: "tnum";
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 600; color: var(--o-fg);
  letter-spacing: -0.02em;
  line-height: 1;
}
.o-hero-stats .stat__lbl {
  font-size: var(--o-text-xs); color: var(--o-fg-muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.o-hero-stats .stat__delta {
  font-family: var(--o-font-mono); font-size: var(--o-text-xs);
  color: var(--o-accent);
  margin-top: 2px;
}