/* ============================================================================
   Velaxios — marketing site shared styles
   Dark, navy-tinted "instrument" canvas built on the design-system tokens.
   Imports the verbatim product tokens, then layers a marketing dark palette.
   ========================================================================== */
@import url("tokens.css");

:root {
  /* Marketing dark canvas — navy-tinted near-black ("Bloomberg terminal") */
  --m-bg:            oklch(0.17 0.028 250);   /* deep navy-black page base */
  --m-bg-2:          oklch(0.205 0.03 250);   /* raised band / alt section */
  --m-panel:         oklch(0.225 0.032 250);  /* card / panel surface */
  --m-panel-2:       oklch(0.26 0.034 250);   /* nested / hover surface */
  --m-line:          oklch(1 0 0 / 0.10);     /* hairline border */
  --m-line-strong:   oklch(1 0 0 / 0.16);
  --m-grid:          oklch(1 0 0 / 0.035);     /* faint grid texture */

  --m-fg:            oklch(0.97 0.004 250);    /* near-white text */
  --m-fg-muted:      oklch(0.74 0.018 250);    /* secondary text */
  --m-fg-dim:        oklch(0.6 0.02 250);      /* tertiary / captions */

  --m-emerald:       oklch(0.74 0.15 166);     /* brand green, lifted for dark */
  --m-emerald-bright:oklch(0.82 0.16 166);
  --m-emerald-soft:  oklch(0.74 0.15 166 / 0.14);
  --m-navy-accent:   oklch(0.62 0.1 250);      /* lighter navy sibling */
  --m-amber:         oklch(0.8 0.16 80);
  --m-info:          oklch(0.72 0.12 230);

  --m-maxw: 1180px;
  --m-radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--m-bg);
  color: var(--m-fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
}

::selection { background: var(--m-emerald-soft); color: var(--m-emerald-bright); }

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

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* ---- Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--m-maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }

section { position: relative; }

/* Overline / eyebrow label */
.overline-m {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--m-emerald);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.overline-m::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--m-emerald);
  opacity: 0.7;
}
.overline-m.no-rule::before { display: none; }

/* Headings */
.display {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
.h-sec {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.lede {
  color: var(--m-fg-muted);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
  max-width: 56ch;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion-duration-base) var(--motion-ease-standard),
              border-color var(--motion-duration-base) var(--motion-ease-standard),
              transform var(--motion-duration-fast) var(--motion-ease-standard),
              color var(--motion-duration-base) var(--motion-ease-standard);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn .ic { width: 16px; height: 16px; }

.btn-primary {
  background: var(--m-emerald);
  color: oklch(0.18 0.03 200);
}
.btn-primary:hover { background: var(--m-emerald-bright); }

.btn-ghost {
  background: oklch(1 0 0 / 0.04);
  border-color: var(--m-line-strong);
  color: var(--m-fg);
}
.btn-ghost:hover { background: oklch(1 0 0 / 0.08); border-color: oklch(1 0 0 / 0.26); }

.btn-link {
  color: var(--m-fg);
  padding: 11px 4px;
}
.btn-link:hover { color: var(--m-emerald-bright); }

/* ---- Top navigation ----------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--m-line);
  background: oklch(0.17 0.028 250 / 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-inner {
  height: 64px;
  display: flex; align-items: center; gap: 28px;
}
.nav-logo { height: 26px; display: block; }
.nav-logo img, .nav-logo svg { height: 26px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-link {
  font-size: 14px; font-weight: 500;
  color: var(--m-fg-muted);
  padding: 8px 13px; border-radius: 8px;
  transition: color var(--motion-duration-base), background var(--motion-duration-base);
}
.nav-link:hover { color: var(--m-fg); background: oklch(1 0 0 / 0.05); }
.nav-link.active { color: var(--m-fg); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

@media (max-width: 860px) {
  .nav-links { display: none; }
}

/* Direction switcher pill */
.dirswitch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--m-line-strong);
  border-radius: 999px;
  padding: 3px; gap: 2px;
  background: oklch(1 0 0 / 0.03);
}
.dirswitch a {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--m-fg-dim);
  padding: 5px 11px; border-radius: 999px;
  transition: color var(--motion-duration-base), background var(--motion-duration-base);
}
.dirswitch a:hover { color: var(--m-fg); }
.dirswitch a.on { background: var(--m-emerald); color: oklch(0.18 0.03 200); }

/* ---- Panels / cards ----------------------------------------------------- */
.panel {
  background: var(--m-panel);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
}

/* Grid backdrop texture (subtle engineering graph paper) */
.grid-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--m-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--m-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%);
  pointer-events: none;
}

/* Status badge (reused from product) */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid transparent;
}
.badge-emerald { color: var(--m-emerald-bright); background: var(--m-emerald-soft); border-color: oklch(0.74 0.15 166 / 0.3); }
.badge-dim { color: var(--m-fg-dim); background: oklch(1 0 0 / 0.04); border-color: var(--m-line); }

.badge-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ---- Footer ------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--m-line);
  background: var(--m-bg-2);
  padding: 56px 0 40px;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--m-fg-dim); margin: 0 0 16px; font-weight: 600;
}
.footer-col a {
  display: block; color: var(--m-fg-muted); font-size: 14px;
  padding: 5px 0; transition: color var(--motion-duration-base);
}
.footer-col a:hover { color: var(--m-fg); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--m-line);
  color: var(--m-fg-dim); font-size: 13px;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--motion-ease-standard), transform 0.7s var(--motion-ease-standard); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }