/* ===========================================================
   Voltrace — static site styles
   Font: DM Sans · Palette: dark charcoal (#121619) / white
   =========================================================== */

:root {
  --bg:        #181c1f;
  --bg-soft:   #1d2226;
  --text:      #ffffff;
  --muted:     #bebebe;
  --muted-2:   #8b8d90;
  --border:    rgba(255, 255, 255, 0.14);
  --border-2:  rgba(255, 255, 255, 0.28);
  --field-bg:  #20252a;
  --maxw:      1400px;
  --radius:    14px;
  --header-h:  88px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Keep anchor targets clear of the sticky header when jumped to. */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--muted);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { color: var(--text); font-weight: 500; line-height: 1.15; margin: 0; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #fff; color: #000; padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Eyebrow label (• LABEL) ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; display: inline-block;
}
/* Brand eyebrow (hero) — white, no leading dot */
.eyebrow-brand { color: var(--text); }
.eyebrow-brand::before { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 11px 26px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.9rem; font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: #fff; color: #0d0f11; border-color: #fff; }

/* ===========================================================
   Header
   =========================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(24, 28, 31, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(255, 255, 255, 0.55);
}
.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}
.logo img { height: 46px; width: auto; transition: height .2s ease; }

/* Nav sits centred in the header, independent of the logo width */
.main-nav {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.main-nav ul {
  list-style: none; display: flex; align-items: center; gap: 48px;
  margin: 0; padding: 0;
}
.main-nav a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 1.02rem; color: var(--muted-2);
  transition: color .2s ease;
}
.main-nav a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid currentColor; display: inline-block;
  transition: background-color .2s ease;
}
.main-nav a:hover { color: var(--text); }
.main-nav a[aria-current="page"] { color: var(--text); }
.main-nav a[aria-current="page"]::before { background: var(--text); border-color: var(--text); }

/* Nav dropdown (Applications) */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 232px; margin-top: 14px; padding: 8px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.dropdown::before { /* invisible bridge so hover doesn't drop */
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown a { padding: 11px 14px; border-radius: 8px; white-space: nowrap; color: var(--muted); }
.dropdown a::before { display: none; }
.dropdown a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  /* 44px square: the minimum comfortable touch target */
  width: 44px; height: 44px; padding: 10px;
  margin-right: -10px; /* keep the icon optically flush with the container edge */
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: currentColor;
  margin: 5px 0; transition: transform .25s ease, opacity .25s ease;
}
/* Morph the three bars into an X while the menu is open */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================================================
   Sections
   =========================================================== */
section { position: relative; }
.section { padding: 96px 0; }
.section-head { max-width: 820px; margin: 0 auto 60px; text-align: center; }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom: 16px; }
.section-head p { margin: 0; color: var(--muted); }

/* ---------- Hero (home) ---------- */
.hero { padding: 84px 0 40px; text-align: center; }
.hero .eyebrow { justify-content: center; }
.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  letter-spacing: -0.01em;
  margin: 0 auto 20px;
  max-width: 100%;
}
.hero .lead {
  max-width: 720px; margin: 0 auto; color: var(--muted);
  font-size: 1.05rem;
}
.hero-figure { margin: 60px auto 0; max-width: 1040px; }
.hero-figure img { margin: 0 auto; }

/* ---------- Feature grid (home) ---------- */
.features { padding: 72px 0 56px; }
.feature-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 60px 120px;
}
.feature { text-align: center; }
.feature-icon {
  height: 132px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 30px;
}
.feature-icon img { max-width: 100%; max-height: 120px; width: auto; height: auto; margin: 0 auto; }
/* python glyph is square — keep it compact so it sits with the wide diagrams */
.feature-icon img.ic-square { max-height: 92px; }
.feature h3 { font-size: 1.12rem; margin-bottom: 12px; font-weight: 600; }
.feature p { margin: 0; font-size: 0.9rem; }
.features-cta { display: flex; justify-content: flex-end; margin-top: 44px; }

/* ---------- Workflow (home) ---------- */
.workflow-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 56px;
  align-items: center;
}
.workflow-col { display: flex; flex-direction: column; gap: 44px; }
.workflow-figure { align-self: stretch; display: flex; justify-content: center; }
.workflow-figure img { max-height: 460px; width: auto; opacity: 0.92; }

.step { display: flex; gap: 18px; align-items: flex-start; }
.step-num {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; color: var(--muted); margin-top: 2px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 8px; font-weight: 600; }
.step p { margin: 0; font-size: 0.88rem; }
/* left column: text right-aligned, number after text */
.workflow-col--left .step { flex-direction: row-reverse; text-align: right; }

/* ---------- Benchmarks (home) ---------- */
.bench-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px;
}
.bench { text-align: center; }
.bench-num {
  font-size: clamp(2.4rem, 4vw, 3.1rem); font-weight: 500; color: var(--text);
  line-height: 1; margin-bottom: 14px; letter-spacing: -0.01em;
}
.bench-num sup { font-size: 0.5em; font-weight: 500; }
.bench h3 { font-size: 1.05rem; margin-bottom: 12px; font-weight: 600; }
.bench p { margin: 0; font-size: 0.86rem; }

/* ===========================================================
   Technology page — alternating rows
   =========================================================== */
.page-hero { padding: 110px 0 40px; text-align: center; }
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3rem); max-width: 24ch; margin: 0 auto 18px; }
.page-hero p { max-width: 860px; margin: 0 auto; color: var(--muted); }

.tech-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
  padding: 60px 0;
}
.tech-row__media { display: flex; justify-content: center; }
.tech-row__media img { max-width: 100%; max-height: 240px; width: auto; height: auto; opacity: 0.95; }
.tech-row__body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 20px; }
.tech-row__body p { margin: 0 0 16px; }
.tech-row__body p:last-child { margin-bottom: 0; }
/* alternate: image on the left, text on the right for even rows */
.tech-row:nth-child(even) .tech-row__media { order: 1; }
.tech-row:nth-child(even) .tech-row__body { order: 2; }

/* ===========================================================
   Contact page
   =========================================================== */
.contact-email {
  display: block;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 3rem;
}
.contact-email:hover { text-decoration: underline; }
.contact-figure { margin: 0 auto; text-align: center; }
.contact-figure img { max-width: 420px; width: 100%; display: block; margin: 0 auto; }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.85rem; color: var(--muted); }
.field label .req { color: var(--text); }
.field input, .field textarea {
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit; font-size: 0.95rem;
  padding: 12px 14px;
  width: 100%;
  transition: border-color .2s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--border-2);
}
.form-note { font-size: 0.82rem; color: var(--muted-2); margin: 4px 0 0; }

/* ===========================================================
   Applications
   =========================================================== */
/* Application overview cards */
.app-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.app-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 34px 32px;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: inherit;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.app-card:hover { border-color: var(--border-2); background: var(--bg-soft); transform: translateY(-3px); }
.app-card h2 { font-size: 1.3rem; }
.app-card p { margin: 0; font-size: 0.92rem; }
.app-card .more { margin-top: auto; padding-top: 8px; color: var(--muted-2); font-size: 0.9rem; }
.app-card:hover .more { color: var(--text); }

/* Capability list (application detail pages) */
.cap-list { list-style: none; padding: 0; margin: 22px 0 0; }
.cap-list li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--muted); }
.cap-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--muted-2); }

/* ===========================================================
   Footer
   =========================================================== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
  margin-top: 40px;
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.footer-inner img { height: 28px; width: auto; }
.footer-nav { display: flex; gap: 26px; }
.footer-nav a { font-size: 0.88rem; color: var(--muted-2); }
.footer-nav a:hover { color: var(--text); }
.footer-copy { font-size: 0.82rem; color: var(--muted-2); }

/* ===========================================================
   Reveal-on-scroll (subtle, degrades gracefully)
   Content is visible by default; it is only hidden once the
   `reveal-on` class is set — which happens synchronously in a
   head script, and only when JS + IntersectionObserver are
   available and motion is not reduced. A safety timeout in
   main.js reveals everything if the observer ever fails, so
   content can never be permanently hidden.
   =========================================================== */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-on .reveal.is-visible { opacity: 1; transform: none; }

/* ===========================================================
   Responsive
   =========================================================== */

/* The nav is centred in the header independently of the logo, so as the
   viewport narrows the two close in on each other and collide well before
   the 900px hamburger breakpoint. These two steps tighten the nav (and
   finally the logo) so they stay clear of one another down to 901px. */
@media (max-width: 1120px) and (min-width: 901px) {
  .main-nav ul { gap: 30px; }
  .main-nav a { font-size: 0.96rem; gap: 7px; }
}

@media (max-width: 1000px) and (min-width: 901px) {
  .main-nav ul { gap: 20px; }
  .main-nav a { font-size: 0.9rem; gap: 6px; }
  .logo img { height: 38px; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .main-nav {
    /* `top: 100%` tracks the header height instead of hardcoding it, so the
       panel stays attached when --header-h shrinks on smaller screens. */
    position: absolute; top: 100%; left: 0; right: 0;
    transform: none;
    background: var(--bg); border-bottom: 1px solid var(--border);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  /* The menu is ~430px tall; a viewport-relative cap fits it on any phone and
     scrolls rather than clipping links when the viewport is short (landscape). */
  .main-nav.open { max-height: min(76vh, 520px); overflow-y: auto; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 18px; }
  .main-nav li { width: 100%; }
  .main-nav a { padding: 12px 0; width: 100%; }

  /* Dropdown collapses to indented inline links on mobile.
     The hover/focus rules above are more specific than a bare `.dropdown`,
     so they must be neutralised explicitly — otherwise hovering re-applies
     the desktop `translateX(-50%)` and the submenu slides off to the side. */
  .dropdown,
  .has-dropdown:hover > .dropdown,
  .has-dropdown:focus-within > .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; margin: 0 0 6px; padding: 0 0 0 18px;
    background: transparent; border: 0; box-shadow: none;
  }
  .dropdown::before { display: none; }
  .dropdown a { padding: 9px 0; }

  .app-cards { grid-template-columns: 1fr; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 28px; }
  .bench-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 28px; }

  .workflow-grid { grid-template-columns: 1fr; gap: 40px; }
  .workflow-figure { order: -1; }
  .workflow-col--left .step { flex-direction: row; text-align: left; }

  .tech-row { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; text-align: center; }
  .tech-row__body { text-align: left; }
  .tech-row:nth-child(even) .tech-row__media { order: 0; }
  .tech-row:nth-child(even) .tech-row__body { order: 0; }

  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .features-cta { justify-content: center; }

  /* Tall diagrams eat the whole screen on a phone — cap them by viewport. */
  .workflow-figure img { max-height: min(460px, 45vh); }
  .tech-row__media img { max-height: min(240px, 32vh); }

  .page-hero { padding: 72px 0 32px; }
  .hero { padding: 56px 0 32px; }
  .hero-figure { margin-top: 44px; }
}

@media (max-width: 560px) {
  :root { --header-h: 66px; }
  .logo img { height: 34px; }

  .container { padding: 0 18px; }
  .main-nav ul { padding: 8px 18px 18px; }

  .section { padding: 68px 0; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .bench-grid { grid-template-columns: 1fr; gap: 40px; }

  .page-hero { padding: 52px 0 28px; }
  .hero { padding: 44px 0 28px; }
  .hero-figure { margin-top: 36px; }

  .feature-icon { height: 108px; margin-bottom: 22px; }
  .feature-icon img { max-height: 100px; }

  .app-card { padding: 26px 22px; }
  .workflow-col { gap: 34px; }
  .workflow-grid { gap: 32px; }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-nav { flex-wrap: wrap; gap: 14px 22px; }
}