/* Torquetta shared design system. Dark, bold, structural. */

:root {
  --bg: #0a0a0c;
  --bg-panel: #131418;
  --bg-panel-2: #18191e;
  --border: #2a2c33;
  --border-strong: #3a3d46;
  --text: #f5f5f3;
  --text-dim: #a5a7b0;
  --text-faint: #8e909a; /* about 6.2:1 on --bg, 5.5:1 on --bg-panel-2. Was #6b6d76 (about 3.8:1), under the 4.5:1 reference for small text. */
  --accent: #ff5a1f;
  --accent-dim: #c9481c;
  --accent-contrast: #0a0a0c;
  --steel: #5b8cff;
  --max-width: 1200px;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font: 'IBM Plex Sans', var(--font-system);
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }

/* A jump to a section (for example #waitlist) stops below the sticky header
   instead of under it. The tallest header is the SIGNUM page's, about 101px. */
section[id], .card[id] { scroll-margin-top: 112px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- Keyboard access ---- */

/* First tab stop on every page. Off-screen until it takes focus, then it
   drops in above the sticky nav and jumps to <main id="main">. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
}
.skip-link:focus { top: 12px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.skip-link:focus-visible { outline-color: var(--text); }

/* ---- Nav ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 12, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 36px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--font-mono);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.15s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 780px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-top: 1px solid var(--border); }
  .nav-links a { display: block; padding: 16px 32px; }
  .nav-toggle { display: block; }
}

/* ---- Sections / bands ---- */

section, .band {
  padding: 96px 0;
  border-bottom: 1px solid var(--border);
}

.band-alt { background: var(--bg-panel); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

h1, h2, h3 {
  font-family: var(--font-system);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  text-transform: uppercase;
}

h3 {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

p { color: var(--text-dim); margin: 0 0 16px; }
.lead { font-size: 1.2rem; color: var(--text-dim); max-width: 640px; }

.divider {
  height: 3px;
  width: 72px;
  background: var(--accent);
  margin: 8px 0 28px;
}

/* ---- Reveal / stagger animation ---- */

.stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(.16,.8,.24,1), transform 0.9s cubic-bezier(.16,.8,.24,1);
}
.stagger.in-view > *:nth-child(1) { transition-delay: 0ms; }
.stagger.in-view > *:nth-child(2) { transition-delay: 130ms; }
.stagger.in-view > *:nth-child(3) { transition-delay: 260ms; }
.stagger.in-view > *:nth-child(4) { transition-delay: 390ms; }
.stagger.in-view > *:nth-child(5) { transition-delay: 520ms; }
.stagger.in-view > *:nth-child(6) { transition-delay: 650ms; }
.stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}

/* Scramble text drives its own reveal via JS, skip the fade/rise. */
.stagger > .scramble {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .stagger > * {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

.scramble-char {
  color: var(--accent);
  opacity: 0.8;
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: transform 0.15s ease, background 0.15s ease;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn-primary:hover { background: #ff7440; transform: translateY(-1px); }

.btn-ghost {
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Hero ---- */

.hero {
  padding: 140px 0 110px;
  position: relative;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.82) 65%, var(--bg) 100%),
    linear-gradient(90deg, rgba(10,10,12,0.65) 0%, rgba(10,10,12,0.15) 55%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.25;
  mask-image: radial-gradient(ellipse at top left, black, transparent 70%);
}

.hero-content { position: relative; z-index: 3; max-width: 760px; }

/* Pause / play control for the background video. script.js adds the button
   to any hero that has a .hero-video, so it only exists when it works. */
.hero-video-toggle {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 4;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10, 10, 12, 0.7);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hero-video-toggle:hover { color: var(--accent); border-color: var(--accent); }

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* ---- Grids / cards ---- */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.card {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px;
}

.card-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

/* ---- Portfolio product card ---- */

.product-card {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
  padding: 44px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}

.product-mark {
  width: 76px;
  height: 76px;
  border-radius: 8px;
  /* Same soft gold-tinted vignette as the SIGNUM app icon (mobile app,
     assets/images/icon.png) - an "elevated" glow behind the mark instead of
     a flat panel, so the two match. */
  background: radial-gradient(120% 120% at 50% 28%, #201a10 0%, var(--bg) 62%);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  background: rgba(255, 90, 31, 0.12);
  color: var(--accent);
  border: 1px solid rgba(255, 90, 31, 0.3);
  margin-bottom: 12px;
}

.product-tags {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid rgba(91, 140, 255, 0.35);
  background: rgba(91, 140, 255, 0.08);
  padding: 4px 10px;
  border-radius: 3px;
}

.product-card-placeholder {
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 44px;
  text-align: center;
  color: var(--text-faint);
}
.product-card-placeholder h3 { color: var(--text-faint); }

@media (max-width: 780px) {
  .product-card { grid-template-columns: 1fr; text-align: left; }
}

/* ---- Contact photo ---- */

.contact-flex {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}

.contact-photo {
  width: 170px;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .contact-flex { align-items: center; }
  .contact-photo { width: 160px; height: 220px; }
}

/* ---- Footer ---- */

.site-footer {
  padding: 64px 0 40px;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 40px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.footer-links a {
  font-family: var(--font-mono);
  text-decoration: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 500;
}
.footer-links a:hover { color: var(--accent); }

.footer-bottom {
  font-family: var(--font-mono);
  border-top: 1px solid var(--border);
  padding-top: 24px;
  font-size: 0.75rem;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- Contact ---- */

.contact-block {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.contact-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  min-width: 100px;
}
.contact-value {
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
}
.contact-value:hover { color: var(--accent); }

.contact-bio {
  max-width: 420px;
  font-size: 0.92rem;
  margin: 18px 0 0;
}

/* Contact page: the four "who to write to" cards (questions, demo, support,
   press). Same .card as everywhere else, with the tighter card gap and
   links in the accent colour so the addresses stand out. */
.contact-topics { gap: 28px; }
.contact-topics .card p { margin-bottom: 0; }
.contact-topics .card a { color: var(--accent); }
.contact-topics .card a:hover { color: var(--text); }

/* ---- Utilities ----
   Replaces every inline style="..." attribute site-wide (2026-10-01) so
   style-src can drop 'unsafe-inline' - a CSP nonce only covers <style>
   *elements*, never inline style="" attributes, so moving these into
   classes was the only way to close that gap short of 'unsafe-hashes'. */

.text-center { text-align: center; }
.inline-block { display: inline-block; }
.hidden { display: none; }
/* Deliberately position:absolute, not display:none - some browsers don't
   resolve <use> references from inside a display:none ancestor, a classic
   icon-sprite gotcha. */
.svg-defs { position: absolute; }
.fill { width: 100%; height: 100%; }
.justify-start { justify-self: start; }
.link-reset { color: inherit; text-decoration: none; }

.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-8 { margin-bottom: 8px; }
.m-0 { margin: 0; }
.mb-12 { margin: 0 0 12px; }
.my-16 { margin: 16px 0; }
.lead-cta { margin: 0 auto 32px; }
.max-w-480 { max-width: 480px; }
.max-w-800 { max-width: 800px; }

.text-dim { color: var(--text-dim); }
.text-faint { color: var(--text-faint); }
.text-accent { color: var(--accent); }

/* Shorter, non-default section/hero padding - still the same bands used
   elsewhere, just a page that wants less vertical space at that spot. */
.hero-compact { padding: 120px 0 80px; }
.hero-tight { padding: 80px 0 40px; min-height: auto; }
.band-plain { background: var(--bg); padding: 80px 0; }
.band-plain-tight { background: var(--bg); padding: 60px 0; }
.pad-80 { padding: 80px 0; }

/* ---- Pricing (signum.html) ---- */
.price-divider {
  margin: 24px 0;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.price-sublabel { font-size: 0.875rem; color: var(--text-dim); margin-bottom: 8px; }
/* --accent-bright is defined in signum.html's own page-scoped <style> block,
   not here - harmless no-op on any other page, since nothing else uses this
   class. */
.price-value { font-size: 2rem; font-weight: 700; color: var(--accent-bright); }
.price-unit { font-size: 1rem; color: var(--text-dim); }