/* ==========================================================================
   DarkBiome SOTA 2026 Design System — "Linear Deep-Tech Aesthetic"
   High-density biophysical workstation, portfolio sieve & IP diligence portal
   ========================================================================== */

/* ==========================================================================
   Self-hosted webfonts (SIL Open Font License 1.1 — see assets/fonts/OFL-*.txt)
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
}

:root {
  /* Canvas & Obsidian Surfaces */
  --bg-canvas: #030407;
  --bg-surface: #07090e;
  --bg-card: #07090e;
  --bg-card-elevated: #0c1019;
  --bg-card-hover: #101624;
  --bg-glass: rgba(7, 9, 14, 0.78);
  --bg-glass-elevated: rgba(12, 16, 25, 0.88);

  /* Hairline Borders & Inset Bevels */
  --border: 1px solid rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-subtle: 1px solid rgba(255, 255, 255, 0.04);
  --border-accent: rgba(20, 184, 166, 0.32);
  --border-emerald: rgba(16, 185, 129, 0.32);
  --border-amber: rgba(245, 158, 11, 0.32);
  --border-coral: rgba(244, 63, 94, 0.32);
  --inner-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --inner-bevel-glow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 20px -3px rgba(20, 184, 166, 0.25);

  /* Text & Contrast Hierarchy */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #8391a7; /* 6.4:1 on --bg-canvas #030407 (was #64748b, 4.1:1 — failed WCAG AA at 12px) */
  --text-dim: #475569;

  /* SOTA 2026 Deep-Tech Accents */
  /* The brand accent is Teal 500 (#14b8a6 — the logo's period); the --cyan* names are kept
     so the ~200 existing references across the CSS and HTML keep resolving. 8.24:1 on the
     canvas, so it is safe for text. White on teal is 2.49:1 — filled teal keeps a dark label. */
  --cyan: #14b8a6;        /* Teal 500 — text, links, borders, eyebrows */
  --cyan-neon: #2dd4bf;   /* Teal 400 — bright end of gradients and glows */
  --cyan-deep: #0d9488;   /* Teal 600 — deepened hover fills (dark label stays 5.35:1) */
  --cyan-glow: rgba(45, 212, 191, 0.18);
  --emerald: #10b981;
  --emerald-neon: #10b981;
  --emerald-glow: rgba(16, 185, 129, 0.18);
  --amber: #f59e0b;
  --amber-neon: #fbbf24;
  --amber-glow: rgba(245, 158, 11, 0.16);
  --coral: #f43f5e;
  --coral-neon: #fb7185;
  --indigo: #818cf8;
  --indigo-glow: rgba(129, 140, 248, 0.15);

  /* Typography Stacks */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, Monaco, monospace;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows & Depth */
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-elevated: 0 20px 40px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-glow-cyan: 0 0 35px -5px rgba(45, 212, 191, 0.22);
  --shadow-glow-emerald: 0 0 35px -5px rgba(16, 185, 129, 0.22);

  /* Transitions */
  --transition-fast: 0.15s ease;
}

/* ==========================================================================
   Base & Reset
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  scroll-padding-top: 88px; /* WCAG 2.4.11: the sticky header must not cover focused or anchored content */
}

/* WCAG 2.2 Skip to Content Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--cyan);
  color: #040813;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  z-index: 99999;
  text-decoration: none;
  transition: top 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(20, 184, 166, 0.5);
}

.skip-link:focus {
  top: 20px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* WCAG 2.2 Level AA Focus Appearance */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* <main> only takes focus so the skip link lands there; it is not an interactive target. */
main[tabindex="-1"]:focus {
  outline: none;
}

/* A sideways-scrolling table region is in the tab order, so it needs the ring too. */
.table-scroll:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* WCAG 2.2 Minimum Target Size (24px) for Interactive Elements */
button,
a,
input,
select,
.viewer-btn,
.asset-tab-btn {
  min-height: 24px;
}

/* Form controls do NOT inherit the page font: the UA stylesheet hands <button>,
   <input>, <select> and <textarea> their own (Arial on this machine), so every
   filled button on the site rendered in Arial next to Inter body copy. */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Respect User Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
  font-size: 15px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(circle at 12% 15%, rgba(45, 212, 191, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 88% 30%, rgba(16, 185, 129, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(129, 140, 248, 0.02) 0%, transparent 55%);
  background-attachment: fixed;
}

::selection {
  background: rgba(45, 212, 191, 0.35);
  color: #fff;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   Typography Hierarchy
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h1.hero-title {
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  max-width: 1240px;
  margin: 0 auto 24px;
  background: linear-gradient(180deg, #ffffff 30%, #e2e8f0 75%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: normal;
  text-align: center;
}

@media (min-width: 960px) {
  h1.hero-title {
    text-wrap: balance;
  }
}

p.hero-lead {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--text-secondary);
  max-width: 1120px;
  margin: 0 auto 36px;
  font-weight: 400;
  line-height: 1.6;
  text-wrap: balance;
  text-align: center;
}

.section-head {
  text-align: center;
  margin-bottom: 56px;
}

.section-head h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #ffffff 40%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.section-head p {
  font-size: 16.5px;
  color: var(--text-secondary);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
}

.mono {
  font-family: var(--font-mono);
}

/* ==========================================================================
   Eyebrow & Pulse Indicators
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: var(--border);
  box-shadow: var(--inner-bevel);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--cyan);
  margin-bottom: 24px;
  backdrop-filter: blur(12px);
}

.eyebrow .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* ==========================================================================
   Header & Unified Navigation System
   ========================================================================== */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(3, 4, 7, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: border-color 0.2s, background-color 0.2s;
}

.nav-inner {
  display: flex;
  align-items: center;
  height: 64px;
  gap: 36px;
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
  flex-shrink: 0;
}

/* The wordmark carries the whole name, so the link needs no second label.
   Sized by height; object-fit keeps the 7:1 ratio if a narrow bar clamps it. */
.logo-wordmark {
  display: block;
  height: 22px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.site-footer .logo-wordmark {
  height: 22px;
}

.logo-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: rgba(20, 184, 166, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(20, 184, 166, 0.35);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

nav.site-nav,
nav.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-right: auto;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s, opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: #fff;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cyan);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--cyan);
}

.nav-link-contact-mobile {
  display: none;
}

/* Nav Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(7, 9, 14, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-accent);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), var(--inner-bevel);
  border-radius: var(--radius-lg);
  padding: 12px;
  width: 330px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1100;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.dropdown-item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.05);
}

.dropdown-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-item-desc {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  margin-top: 3px;
}

/* Nav Actions, Data Chips & Copy Button */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-header .nav-actions .email-copy-chip {
  display: none;
}

.site-header .nav-actions .btn-primary {
  padding: 7px 18px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--cyan), #0d9488);
  color: #020408;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 10px rgba(20, 184, 166, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header .nav-actions .btn-primary:hover {
  background: linear-gradient(135deg, var(--cyan-neon), var(--cyan));
  box-shadow: 0 4px 18px rgba(45, 212, 191, 0.45);
  transform: translateY(-1px);
}


.data-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--inner-bevel);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.data-chip:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-accent);
  color: var(--text-primary);
}

.data-chip.active {
  background: rgba(20, 184, 166, 0.14);
  border-color: var(--cyan);
  color: #fff;
}

.email-copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--inner-bevel);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.email-copy-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-accent);
  color: var(--text-primary);
}

.email-copy-chip.copied {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--emerald);
  color: var(--emerald);
}

.email-copy-chip svg {
  stroke: currentColor;
  flex-shrink: 0;
}

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
}

/* ==========================================================================
   High-Density Bento Grid Architecture (Linear Aesthetic)
   ========================================================================== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-bottom: 80px;
}

.bento-card {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-xl);
  padding: 32px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.bento-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.bento-card:hover {
  border-color: rgba(20, 184, 166, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7), var(--inner-bevel-glow);
}

.bento-card.elevated {
  background: var(--bg-card-elevated);
}

/* Column Spans */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12, .col-span-full { grid-column: 1 / -1; }

/* Row Spans */
.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }

/* Bento Card Elements */
.bento-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.bento-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.bento-badge.cyan {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.35);
  color: var(--cyan);
}

.bento-badge.emerald {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--emerald);
}

.bento-badge.amber {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--amber);
}

.bento-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: #fff;
}

.bento-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.bento-metric {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 4px;
}

/* ==========================================================================
   Stats Matrix & Platform Telemetry
   ========================================================================== */
.stats-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 80px;
}

.stat-box {
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0 16px;
}

.stat-box:last-child {
  border-right: none;
}

.stat-number {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 800;
  font-family: var(--font-mono);
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: linear-gradient(180deg, #ffffff, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-metric {
  font-size: 12px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
}

.stat-caption {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.4;
}

/* ==========================================================================
   3Dmol Molecular Workstation Container & Controls
   ========================================================================== */
.workstation-container {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-elevated);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin-bottom: 80px;
  position: relative;
}

.viewer-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 500px;
  background: #020408;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.9);
}

.viewer-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: rgba(3, 4, 7, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 25;
}

.viewer-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewer-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.viewer-canvas-area {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.viewer-controls,
.viewer-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: rgba(3, 4, 7, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 25;
  gap: 10px;
  flex-wrap: wrap;
}

.viewer-btn-group,
.mode-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.control-btn,
.viewer-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--inner-bevel);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.control-btn:hover,
.viewer-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}

.control-btn.active,
.viewer-btn.active {
  background: rgba(20, 184, 166, 0.18);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.35);
}

.active-site-overlay {
  position: absolute;
  top: 60px;
  right: 18px;
  background: rgba(7, 9, 14, 0.88);
  border: 1px solid var(--border-accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), var(--inner-bevel);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  max-width: 280px;
  backdrop-filter: blur(12px);
  z-index: 20;
  pointer-events: none;
  font-size: 12px;
}

.active-site-overlay .overlay-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.active-site-overlay .overlay-stat {
  font-family: var(--font-mono);
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.6;
}

/* Confidence Legend */
.confidence-legend,
.plddt-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.confidence-item,
.plddt-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.confidence-color,
.plddt-color {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

/* Asset Display Grid for Showcases */
.asset-display-grid {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-xl);
  padding: 40px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: stretch;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 80px;
}

.asset-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.asset-header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.asset-status-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.14);
  color: var(--emerald);
  border: 1px solid rgba(16, 185, 129, 0.35);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.asset-locus-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.asset-name {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.2;
}

.asset-summary {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 24px;
}

/* ==========================================================================
   Two axes, never one pill: where the molecule is (.stage-chip) and what has
   been filed (.patent-pill). A development stage is not a patent status, and
   conflating them is how a computational lead came to read as a stocked one.
   ========================================================================== */
.stage-chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  white-space: nowrap;
  display: inline-block;
}

/* Ladder order. The two warm stages mean a molecule is physically moving. */
.stage-chip.stage-computational,
.stage-chip.stage-in-silico-validated {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.34);
  color: #cbd5e1;
}
.stage-chip.stage-sourcing-synthesis,
.stage-chip.stage-cro-synthesis-queued {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}
.stage-chip.stage-synthesis-ordered,
.stage-chip.stage-uspto-patent-filed {
  background: rgba(20, 184, 166, 0.14);
  border-color: rgba(20, 184, 166, 0.45);
  color: #2dd4bf;
}
.stage-chip.stage-in-hand {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}
.stage-chip.stage-measured {
  background: rgba(129, 140, 248, 0.14);
  border-color: rgba(129, 140, 248, 0.4);
  color: #a5b4fc;
}

.patent-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  white-space: nowrap;
  display: inline-block;
}
.patent-pill.patent-filed {
  border-color: rgba(129, 140, 248, 0.4);
  background: rgba(129, 140, 248, 0.12);
  color: #a5b4fc;
}

/* Inside a table the pills must wrap, or a long docket number blows the column. */
.specs-table .stage-chip,
.specs-table .patent-pill {
  white-space: normal;
  display: inline-block;
  line-height: 1.5;
}

/* The tab badge is the at-a-glance read: two leads warm, three grey. */
.asset-tab-btn .stage-chip {
  font-size: 9.5px;
  padding: 2px 7px;
  margin-left: 2px;
}

.stage-legend {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 20px 22px;
  margin-bottom: 36px;
}
.stage-legend h3 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}
.stage-legend > p {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 14px;
}
.stage-legend dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 9px 16px;
  margin: 0;
  align-items: baseline;
}
.stage-legend dt {
  margin: 0;
}
.stage-legend dd {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}
@media (max-width: 640px) {
  .stage-legend dl {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .stage-legend dd {
    margin-bottom: 8px;
  }
}

/* Asset Tab Pills */
.asset-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.asset-tab-btn {
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--inner-bevel);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.asset-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.asset-tab-btn.active {
  background: rgba(20, 184, 166, 0.14);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: 0 0 20px -3px rgba(20, 184, 166, 0.35);
}

/* ==========================================================================
   Deal Economics & Option Calculator Styling
   ========================================================================== */
.deal-stage-card {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-xl);
  padding: 36px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.deal-stage-card.stage-01 {
  border-color: var(--border-accent);
}

.deal-stage-card.stage-02 {
  border-color: var(--border-emerald);
}

.deal-stage-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

.option-calculator,
.calc-card {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-elevated);
  border-radius: var(--radius-2xl);
  padding: 40px;
  margin-bottom: 80px;
  position: relative;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: center;
}

.calc-slider-group {
  margin-bottom: 24px;
}

.calc-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 10px;
}

.calc-slider {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background 0.2s;
}

.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  cursor: pointer;
  border: 2px solid #fff;
  transition: transform 0.15s ease;
}

.calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.calc-output,
.calc-output-card {
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-accent);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), var(--inner-bevel);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.calc-output-number {
  font-family: var(--font-mono);
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: linear-gradient(180deg, #ffffff, var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.calc-output-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calc-metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  font-weight: 600;
}

.calc-breakdown-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
}

.calc-breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.calc-breakdown-item strong {
  font-family: var(--font-mono);
  color: #fff;
}

/* ==========================================================================
   Modals & Dataroom Dialogs
   ========================================================================== */
.modal-backdrop,
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 3, 5, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.modal-backdrop.open,
.modal-overlay.open {
  display: flex;
}

.modal-dialog {
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-accent);
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.8), var(--inner-bevel-glow);
  border-radius: var(--radius-2xl);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}

.modal-close:hover {
  color: #fff;
}

.modal-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: rgba(20, 184, 166, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(20, 184, 166, 0.3);
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 12px;
}

.modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}

.modal-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* Forms */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
}

.form-control {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--inner-bevel);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 14px;
  color: #fff;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.25);
}

/* ...but keyboard focus still needs a ring: outline: none above would otherwise win. */
.form-control:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.form-control option {
  background: #0d121f;
  color: #fff;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-notice {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 16px 0 24px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--cyan);
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Toast Notifications */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(7, 9, 14, 0.95);
  border: 1px solid var(--emerald);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(16, 185, 129, 0.25);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-mono);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3000;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* ==========================================================================
   Buttons & Micro-Interactions
   ========================================================================== */
.btn-primary {
  background: linear-gradient(135deg, var(--cyan-neon), var(--cyan-deep));
  color: #040813;
  padding: 9px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  user-select: none;
}

.btn-primary:hover {
  /* Hover DEEPENS (Teal 500 -> Teal 600); the dark #040813 label stays 5.35:1 at the
     darkest end. Lightening or fading the fill would take the label under AA. */
  background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(45, 212, 191, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--inner-bevel);
  color: #fff;
  padding: 9px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.btn-emerald {
  background: linear-gradient(135deg, var(--emerald-neon), #059669);
  color: #03180f;
  padding: 9px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.btn-emerald:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   Specs & Portfolio Tables
   ========================================================================== */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
}

/* The label column is a row header (<th scope="row">); it must look the same as a cell. */
.specs-table td,
.specs-table th {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
}

.specs-table tr:last-child td,
.specs-table tr:last-child th {
  border-bottom: none;
}

.specs-table th.spec-label {
  color: var(--text-muted);
  width: 38%;
  font-weight: 500;
  text-align: left;
}

.specs-table td.spec-val {
  font-family: var(--font-mono);
  color: #fff;
  font-weight: 500;
}

.portfolio-table-wrapper {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 80px;
}

.portfolio-table,
.campaign-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.portfolio-table th,
.campaign-matrix-table th {
  background: rgba(255, 255, 255, 0.03);
  padding: 14px 18px;
  text-align: left;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.portfolio-table td,
.campaign-matrix-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

.portfolio-table tr:hover td,
.campaign-matrix-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.status-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
  display: inline-block;
}

.status-validated {
  background: rgba(16, 185, 129, 0.12);
  color: var(--emerald);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-queued {
  background: rgba(251, 191, 36, 0.12);
  color: var(--amber);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.status-filed {
  background: rgba(20, 184, 166, 0.14);
  color: var(--cyan);
  border: 1px solid rgba(20, 184, 166, 0.45);
}

.status-advisory {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ==========================================================================
   Sequence & FASTA Viewers
   ========================================================================== */
.fasta-box,
.sequence-viewer {
  background: #040710;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
  border-radius: var(--radius-md);
  padding: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #14b8a6;
  overflow-x: auto;
  line-height: 1.6;
  position: relative;
  margin-bottom: 24px;
}

.copy-fasta-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.copy-fasta-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ==========================================================================
   Feature Cards & CTA Banners
   ========================================================================== */
.cards-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 120px;
}

.feature-card {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  padding: 32px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -10px rgba(20, 184, 166, 0.2);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(20, 184, 166, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
  margin-bottom: 20px;
  font-size: 20px;
  border: 1px solid rgba(20, 184, 166, 0.25);
}

.feature-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.feature-desc {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
  flex-grow: 1;
}

.cta-banner {
  background: linear-gradient(135deg, rgba(7, 9, 14, 0.9), rgba(12, 16, 25, 0.95));
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-xl);
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 100px;
  box-shadow: var(--shadow-card), var(--shadow-glow-cyan);
}

.cta-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.cta-banner h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.025em;
}

.cta-banner p {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 880px;
  margin: 0 auto 36px;
  line-height: 1.6;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 60px 0 40px;
  color: var(--text-secondary);
  font-size: 13px;
  background: rgba(2, 3, 5, 0.85);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-brand p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 320px;
}

.footer-col h2 {
  font-size: 12px;
  font-family: var(--font-mono);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s;
}

.footer-col a:hover {
  color: var(--cyan);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 16px;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media (max-width: 1024px) {
  .stats-matrix {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .stat-box:nth-child(2) {
    border-right: none;
  }
  .asset-display-grid {
    grid-template-columns: 1fr;
  }
  .bento-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .col-span-3 { grid-column: span 3; }
  .col-span-4 { grid-column: span 6; }
  .col-span-6 { grid-column: span 6; }
  .col-span-8 { grid-column: span 6; }
  .calc-grid {
    grid-template-columns: 1fr;
  }
  .cards-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .nav-inner {
    height: 64px;
  }
  nav.site-nav,
  nav.main-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(3, 4, 7, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    align-items: flex-start;
    z-index: 999;
  }
  nav.site-nav.open,
  nav.main-nav.open {
    display: flex;
  }
  .nav-actions {
    display: none;
  }
  .mobile-toggle {
    display: block;
  }
  .stats-matrix {
    grid-template-columns: 1fr;
  }
  .stat-box {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 16px;
  }
  .stat-box:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .col-span-1, .col-span-2, .col-span-3, .col-span-4,
  .col-span-5, .col-span-6, .col-span-7, .col-span-8,
  .col-span-9, .col-span-10, .col-span-11, .col-span-12 {
    grid-column: span 12 / span 12;
  }
  .cards-grid-3 {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   Confidential Sequence Card & IP Gating Component
   ========================================================================== */
.confidential-seq-card {
  background: #050811;
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  margin-top: 18px;
}

.confidential-seq-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent 60%);
}

.seq-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.seq-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.seq-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.seq-preview-body {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--cyan);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  padding: 16px;
  word-break: break-all;
  margin-bottom: 14px;
  position: relative;
}

.seq-masked {
  display: inline-block;
  background: rgba(20, 184, 166, 0.1);
  color: #fff;
  border: 1px dashed rgba(20, 184, 166, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  margin: 0 4px;
}

.seq-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.seq-notice {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 550px;
}

/* ==========================================================================
   Tactile Brutalist Language Switcher Component
   ========================================================================== */
.lang-selector-wrap {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  user-select: none;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(14, 20, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
}

.lang-toggle:hover {
  border-color: var(--cyan);
  color: #fff;
  background: rgba(20, 184, 166, 0.08);
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.15);
}

.lang-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.lang-globe-icon {
  width: 14px;
  height: 14px;
  color: var(--cyan);
  flex-shrink: 0;
}

.lang-cur-code {
  color: #fff;
  font-weight: 700;
}

.lang-chevron-icon {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.lang-selector-wrap.open .lang-chevron-icon {
  transform: rotate(180deg);
  color: var(--cyan);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 185px;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #090d16;
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 1000;
  backdrop-filter: blur(16px);
}

.lang-dropdown::-webkit-scrollbar {
  width: 5px;
}
.lang-dropdown::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.lang-dropdown::-webkit-scrollbar-thumb {
  background: rgba(20, 184, 166, 0.25);
  border-radius: 3px;
}

html[dir="rtl"] .lang-dropdown {
  right: auto;
  left: 0;
}

.lang-selector-wrap.open .lang-dropdown {
  display: flex;
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lang-option:hover,
.lang-option:focus {
  background: rgba(20, 184, 166, 0.12);
  color: #fff;
  outline: none;
}

.lang-option.selected {
  background: rgba(20, 184, 166, 0.18);
  color: var(--cyan);
  font-weight: 600;
}

.lang-flag {
  font-size: 14px;
  line-height: 1;
}

.lang-name {
  flex: 1;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 12px;
  color: inherit;
}

.lang-code-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.lang-option.selected .lang-code-pill {
  background: rgba(20, 184, 166, 0.2);
  /* Teal-on-teal: --cyan is only 4.14:1 on this doubly tinted 10px pill, so it takes the
     lighter Teal 400 (5.54:1). Every other teal-tinted surface keeps --cyan. */
  color: var(--cyan-neon);
}

@media (max-width: 900px) {
  .site-header .nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .site-header .nav-actions .email-copy-chip,
  .site-header .nav-actions .btn-primary {
    display: none;
  }
}



/* ==========================================================================
   2026-09-30 polish pass — calmer, more legible, no wrapping header
   ========================================================================== */

.section-head h2, .cta-banner h2 { text-wrap: balance; }
h1, h2, h3, h4, article h2, article h3 { text-wrap: normal; }
h1.hero-title { text-wrap: normal; }
p.hero-lead { text-wrap: balance; max-width: 1120px; text-align: center; margin-left: auto; margin-right: auto; }
.section-head p, .cta-banner p { text-wrap: normal; }
.section-head p { max-width: 760px; text-align: center; margin-left: auto; margin-right: auto; }
.cta-banner p { max-width: 740px; text-align: center; margin-left: auto; margin-right: auto; }

/* A static status dot. A blinking one reads as theater. */
.eyebrow .pulse-dot { animation: none; box-shadow: none; }

/* Header: labels never break across lines; the email chip leaves first,
   then the links collapse into the menu before they would crowd. */
.nav-link,
.nav-actions .btn-primary,
.nav-actions .btn-secondary { white-space: nowrap; }

@media (max-width: 1240px) {
  .site-header .nav-actions .email-copy-chip { display: none; }
  nav.site-nav, nav.main-nav { gap: 22px; }
}

@media (max-width: 960px) {
  .nav-inner { height: 64px; }
  nav.site-nav,
  nav.main-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    /* Fully opaque: at 0.98 the hero headline ghosted through the open drawer. */
    background: #030407;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    flex-direction: column;
    padding: 20px 24px 24px;
    gap: 4px;
    align-items: stretch;
    z-index: 999;
  }
  nav.site-nav.open,
  nav.main-nav.open { display: flex; }
  nav.main-nav .nav-link,
  nav.site-nav .nav-link { padding: 10px 0; font-size: 16px; }
  .nav-link.active::after { display: none; }
  .nav-link-contact-mobile {
    display: flex !important;
    margin-top: 8px;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--cyan) !important;
    font-weight: 600;
  }
  /* The pipeline submenu becomes an indented list inside the drawer. */
  .nav-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    width: auto;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 0 8px 14px;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu { transform: none; }
  .nav-dropdown > .nav-link svg,
  .nav-dropdown-menu .dropdown-item-desc { display: none; }
  .nav-dropdown-menu .dropdown-item { padding: 8px 0; }
  .mobile-toggle { display: block; }
  .site-header .nav-actions { display: flex; align-items: center; gap: 8px; }
  .site-header .nav-actions .email-copy-chip,
  .site-header .nav-actions .btn-primary { display: none; }
}

/* Cards that are not links should not lift like buttons on hover. */
div.feature-card:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-card);
}

/* Buttons: quieter hover, visible keyboard focus, no layout jump. */
.btn-primary:hover,
.btn-secondary:hover,
.btn-emerald:hover { transform: none; }
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-emerald:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Phone: tighter hero, full-width CTAs, two-up stats. */
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  section.hero { padding: 56px 0 48px !important; }
  h1.hero-title { font-size: 36px; }
  .hero .btn-primary,
  .hero .btn-secondary { width: 100%; justify-content: center; }
  .stats-matrix { grid-template-columns: 1fr 1fr; gap: 20px 12px; padding: 24px 16px; }
  .stat-box,
  .stat-box:last-child { border: none; padding: 0; }
  .section-head { margin-bottom: 36px; }
  .cta-banner { padding: 40px 20px; }
}

/* Cross-document view transitions (progressive enhancement; replaces the obsolete meta tag). */
@view-transition { navigation: auto; }

/* A cross-document transition is a full-page animation, so it is off under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Print: data sheets people can hand to a colleague. */
@media print {
  :root { --text-primary: #000; --text-secondary: #222; --text-muted: #444; }
  html, body { background: #fff !important; color: #000 !important; }
  body { background-image: none !important; font-size: 11pt; }
  header.site-header, .mobile-toggle, .nav-actions, .lang-selector-wrap, .skip-link,
  .viewer-wrapper, .viewer-controls-bar, .asset-tabs, footer.site-footer .footer-top,
  .toast, .modal-overlay { display: none !important; }
  h1, h2, h3, h4, .hero-title, .section-head h2, .stat-number {
    background: none !important; -webkit-text-fill-color: #000 !important; color: #000 !important;
  }
  .feature-card, .stats-matrix, .asset-info, .cta-banner, .bento-card {
    background: #fff !important; box-shadow: none !important; border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  a { color: #000 !important; text-decoration: underline; }
  section { padding-top: 12pt !important; margin-bottom: 12pt !important; }
}

/* DarkBiome Daybreak assay-mode rows: stack on phones. */
@media (max-width: 640px) {
  .assay-row { grid-template-columns: 1fr !important; gap: 4px !important; }
}

/* ==========================================================================
   Mobile horizontal-overflow guards (2026-09-30)
   At 375px the document was wider than the viewport on seven pages. Two causes:
   (1) grids declared in an inline `style=` attribute — the class-based grids
       already collapse at this breakpoint, these were simply missed, and an
       inline declaration can only be beaten with !important;
   (2) wide data tables, whose min-content width exceeds a phone screen.
   The tables become their own horizontal scroller instead of widening the page;
   no column or cell is removed. Everything here is inside the 768px query, so
   the desktop layout at >= 1024px is untouched.
   ========================================================================== */
/* Every wide data table sits in one of these. At desktop widths the table fits and
   the scroller never appears; on a phone the table keeps a readable column width
   and the box scrolls sideways instead of the page. No column is dropped. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* The 3-4 column deep tables need a floor, or every column crushes to one word
     per line. The 2-column spec tables read fine at phone width, so they get none. */
  .table-scroll > .deep-table {
    min-width: 560px;
  }

  /* A grid or flex ancestor is sized by its min-content by default, so it would
     simply adopt the table's 560px floor and widen the page again. These are the
     boxes a .table-scroll can sit in; they must be allowed to shrink past it.
     .calc-controls is here for the same reason: a <select> is as wide as its
     longest <option>, which pushed the licensing page to 353px at a 320px
     viewport (WCAG 1.4.10 Reflow). */
  .table-scroll,
  .asset-display-grid > *,
  .asset-info,
  .calc-grid > *,
  .calc-controls,
  .data-card,
  .tab-pane {
    min-width: 0;
  }

  /* A toast pinned to the right edge was 307px wide in a 320px viewport. */
  .toast {
    left: 16px;
    right: 16px;
    max-width: none;
  }

  /* The tab strip scrolls rather than stretching the page. */
  .tabs-header {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
}

/* ==========================================================================
   Partial-translation notice
   Sits directly under the sticky header. Visibility is decided by the
   data-i18n-notice attribute that assets/js/i18n-boot.js stamps on <html>
   from <head>, i.e. BEFORE first paint — so the strip is either in the first
   frame or absent from it, and the page never shifts once it is on screen.
   With no attribute at all (boot shim missing) it stays hidden.
   ========================================================================== */
.i18n-notice {
  display: none;
  background: var(--bg-card-elevated);
  border-bottom: 1px solid var(--border-color);
}

html[data-i18n-notice="show"] .i18n-notice {
  display: block;
}

.i18n-notice-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 24px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.i18n-notice-text {
  flex: 1 1 auto;
}

.i18n-notice-text::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--cyan);
  vertical-align: middle;
}

.i18n-notice-dismiss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.i18n-notice-dismiss:hover {
  color: var(--cyan);
  border-color: var(--border-accent);
}

.i18n-notice-dismiss:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .i18n-notice-inner {
    padding: 9px 16px;
    font-size: 0.74rem;
  }
}

/* ==========================================================================
   Inquiry forms, legal pages and the footer legal row
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.footer-legal a,
.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-legal a:hover,
.footer-links a:hover {
  color: var(--cyan);
}

/* Honeypot: off-screen for people, present for bots. Never display: none (bots skip those). */
.form-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* .modal-actions sets display: flex, which would otherwise defeat the hidden attribute. */
[data-form-fields][hidden],
[data-form-done][hidden] {
  display: none;
}

.form-consent {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 20px;
}

.form-consent a,
.form-feedback a,
.legal-doc a {
  color: var(--cyan);
}

.form-feedback {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 16px 0 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: var(--border);
  border-radius: var(--radius-md);
  overflow-wrap: anywhere;
}

.form-feedback:empty {
  display: none;
}

.form-feedback[data-state="success"] {
  border-left: 3px solid var(--emerald);
}

.form-feedback[data-state="error"] {
  border-left: 3px solid var(--coral);
}

.form-feedback:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.inquiry-form button {
  font-family: inherit;
}

.inquiry-form button[disabled] {
  opacity: 0.6;
  cursor: default;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.contact-layout .feature-card:hover {
  transform: none;
}

.contact-aside h2 {
  font-size: 15px;
  margin-bottom: 8px;
}

.contact-aside p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 22px;
}

.contact-aside p:last-child {
  margin-bottom: 0;
}

.legal-doc {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 100px;
}

.legal-doc h2 {
  font-size: 20px;
  margin: 40px 0 12px;
  scroll-margin-top: 110px;
}

.legal-doc p,
.legal-doc li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.legal-doc p {
  margin-bottom: 14px;
}

.legal-doc ul {
  margin: 0 0 14px 20px;
}

.legal-doc li {
  margin-bottom: 6px;
}

.legal-doc code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .contact-layout .feature-card {
    padding: 22px 18px;
  }
}