/*
  Corvus GCS — project website.

  The palette, the radii, the type scale and the translucency recipes are the
  application's own tokens, copied from src/css/themes.css rather than invented
  here: the dark theme is the app's dark base with its blue accent family (the
  one the dark screenshots are taken in), and the light theme is the app's
  default light theme with its burnt-orange accent. A visitor who downloads the
  app should recognise the surface they were just looking at.

  Nothing on this page is fetched from a third party — the two typefaces are
  the same woff2 files the app vendors, served from assets/fonts/.
*/

/* ===================================================================
   Typefaces — Inter and JetBrains Mono, variable, latin subsets only.
   =================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/Inter-latin.woff2) format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/Inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/JetBrainsMono-latin.woff2) format('woff2');
  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 600;
  font-display: swap;
  src: url(assets/fonts/JetBrainsMono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===================================================================
   Tokens — dark base (the app's four dark themes share it) with the
   blue accent family. This is the default, as the brief asks.
   =================================================================== */
:root {
  color-scheme: dark;

  --bg: #0B0E12;
  --surface-1: #11161D;
  --surface-2: #171D25;
  --surface-3: #1C232C;
  --surface-hover: #222A34;

  --accent: #3B9EFF;
  --accent-dim: rgba(59, 158, 255, 0.16);
  --accent-bright: #6FBCFF;
  --accent-dark: #14304F;
  --accent-hover: #55ADFF;
  /* The fill behind a solid button's label. On the dark theme that is the
     accent itself, against near-black text. */
  --accent-solid: #3B9EFF;
  --accent-solid-hover: #55ADFF;

  --healthy: #45D483;
  --nav: #35D6C4;

  --text-1: #F2F4F7;
  --text-2: #A5ADB8;
  /* The app's --text-3 is #69737F, which carries 4.0:1 here. That is a
     deliberate choice in a dense operator UI read at arm's length; a public
     page is read anywhere, so the tertiary tone is lifted far enough to clear
     AA (5.8:1 on the page, 5.1:1 on the darkest surface it lands on). */
  --text-3: #848E9C;
  --text-inverted: #0B0E12;

  --border: #2A3038;
  --border-soft: #20262E;
  --border-strong: #39424D;

  --tint-rgb: 255 255 255;
  --glass-rgb: 17 22 29;

  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-window: 0 32px 80px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.4);
  --scrim: rgba(0, 0, 0, 0.72);

  /* The two background textures: a technical grid and elevation contours.
     Both are deliberately near the noise floor — visible on a wide screen,
     never competing with a line of text. */
  --grid-line: rgba(255, 255, 255, 0.032);
  --topo-ink: rgba(120, 170, 235, 0.085);
  --glow: rgba(59, 158, 255, 0.14);

  --logo-mark: url("assets/images/mark-light.png");
  /* The plate behind a mark that keeps its own colours (themes.css calls this
     --orgmark-plate): the institution's logo is half dark grey, which has
     nothing to read against on a near-black page. */
  --orgmark-plate: rgba(255, 255, 255, 0.92);

  /* Structure — the app's own radii and fonts. */
  --radius: 8px;
  --radius-btn: 6px;
  --radius-lg: 12px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --wrap: 1400px;
  --gutter: 24px;
  --header-h: 64px;
}

/* ===================================================================
   LIGHT — the application's default theme: neutral grey-white surfaces
   and a burnt-orange accent that holds its contrast on white.
   =================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F4F6F8;
  --surface-1: #FFFFFF;
  --surface-2: #F1F3F6;
  --surface-3: #E8EBF0;
  --surface-hover: #E2E6EC;

  --accent: #CE5E00;
  --accent-dim: rgba(206, 94, 0, 0.14);
  --accent-bright: #B04E00;
  --accent-dark: #FCE7D3;
  --accent-hover: #B85300;
  /* White on the light accent is 4.0:1 — fine for the app, where it carries
     UI components and large text, short of AA for a 15px button label here.
     So a solid button takes the next two steps of the same family, the app's
     own hover and pressed values: 4.9:1 at rest, 6.3:1 under the cursor. */
  --accent-solid: #B85300;
  --accent-solid-hover: #9E4700;

  --healthy: #0F8B50;
  --nav: #0B6FC0;

  --text-1: #12151A;
  --text-2: #4C555F;
  /* Lifted from the app's #79828D for the same reason as the dark theme. */
  --text-3: #636C77;
  --text-inverted: #FFFFFF;

  --border: #D3D8DF;
  --border-soft: #E4E8ED;
  --border-strong: #B6BEC8;

  --tint-rgb: 0 0 0;
  --glass-rgb: 255 255 255;

  --shadow-soft: 0 2px 10px rgba(22, 28, 38, 0.08);
  --shadow: 0 6px 20px rgba(22, 28, 38, 0.12);
  --shadow-glass: 0 8px 32px rgba(22, 28, 38, 0.14);
  --shadow-window: 0 28px 64px rgba(22, 28, 38, 0.18), 0 4px 14px rgba(22, 28, 38, 0.10);
  --scrim: rgba(22, 28, 38, 0.55);

  --grid-line: rgba(18, 26, 40, 0.045);
  --topo-ink: rgba(40, 70, 110, 0.075);
  --glow: rgba(206, 94, 0, 0.10);

  --logo-mark: url("assets/images/mark-dark.png");
  /* Already on white — a plate would just draw a box around the logo. */
  --orgmark-plate: transparent;
}

/* ===================================================================
   Base
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
svg.sprite { display: none; }

h1, h2, h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.5rem); }
h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
p  { margin: 0; }

a { color: var(--accent-bright); text-decoration: none; }
a:hover { color: var(--accent); }

.mono { font-family: var(--mono); font-size: 0.92em; letter-spacing: -0.01em; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 300;
  padding: 10px 16px; border-radius: var(--radius-btn);
  background: var(--accent-solid); color: var(--text-inverted); font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; color: var(--text-inverted); }

/* Lucide's own drawing values: a 24-unit grid at stroke 2, which is how the
   application renders the same icons. fill and stroke are inherited, so they
   reach the cloned content of a <use>; anything a symbol needs to set for
   itself — the GitHub mark's solid fill — is a presentation attribute on the
   symbol, because a selector cannot reach inside that shadow tree. */
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ===================================================================
   Layout
   =================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding: clamp(72px, 8vw, 120px) 0; }
.section-alt { background: var(--surface-1); border-block: 1px solid var(--border-soft); }

.section-head { max-width: 62ch; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head h2 { margin-bottom: 14px; }
.section-sub { color: var(--text-2); font-size: 1.0625rem; }

.hero-release {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.hero-release[hidden] { display: none; }
.hero-release:hover { border-color: var(--accent); color: var(--text-1); }
.hero-release .tag { font-family: var(--mono); font-weight: 600; color: var(--text-1); }
.hero-release-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--healthy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--healthy) 25%, transparent);
}
.hero-release-more { color: var(--accent-bright); font-weight: 500; }
.hero-release-more::after { content: " \2192"; }

.eyebrow {
  margin-bottom: 14px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.lead {
  color: var(--text-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  max-width: 56ch;
}

/* --- The background textures --------------------------------------
   A 64px technical grid and a field of elevation contours, both faded
   out toward the edges so they read as substrate rather than pattern. */
.backdrop {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.backdrop > span { position: absolute; inset: -10%; display: block; }

.backdrop-grid {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 25%, #000 25%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 25%, #000 25%, transparent 78%);
}

.backdrop-topo {
  background-color: var(--topo-ink);
  -webkit-mask-image: url("assets/images/topo.svg");
          mask-image: url("assets/images/topo.svg");
  -webkit-mask-size: 1200px 800px;
          mask-size: 1200px 800px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  opacity: 0.9;
}

.backdrop-glow {
  inset: -40% -10% auto -10%;
  height: 90%;
  background: radial-gradient(60% 55% at 50% 60%, var(--glow), transparent 70%);
}

/* ===================================================================
   Header
   =================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, backdrop-filter 0.2s ease;
}
.site-header.is-scrolled {
  background: rgb(var(--glass-rgb) / 0.78);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
}

.header-inner { display: flex; align-items: center; gap: 20px; }

.brand { display: flex; align-items: center; gap: 11px; color: var(--text-1); }
.brand:hover { color: var(--text-1); }
.brand-mark {
  width: 30px; height: 30px; flex: none;
  background-image: var(--logo-mark);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; }
.brand-sub {
  margin-top: 3px;
  font-size: 0.5rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-3);
}

.site-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-list a {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--radius-btn);
  font-size: 0.875rem; font-weight: 500; color: var(--text-2);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-list a:hover { color: var(--text-1); background: rgb(var(--tint-rgb) / 0.06); }
.nav-github .icon { width: 17px; height: 17px; }

.header-actions { display: flex; align-items: center; gap: 6px; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: rgb(var(--tint-rgb) / 0.03);
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover { color: var(--text-1); background: var(--surface-hover); border-color: var(--border-strong); }
.icon-btn .icon { width: 18px; height: 18px; grid-area: 1 / 1; }

/* One button, two glyphs: the one that is not current is hidden. */
.theme-toggle .icon-moon, :root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
.nav-toggle { display: none; }
.nav-toggle .icon-shut { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-shut { display: block; }

/* ===================================================================
   Buttons
   =================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: inherit; font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn .icon { width: 18px; height: 18px; }

.btn-primary {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--text-inverted);
  box-shadow: 0 1px 0 rgb(var(--tint-rgb) / 0.12) inset, var(--shadow-soft);
}
.btn-primary:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); color: var(--text-inverted); transform: translateY(-1px); }

.btn-ghost {
  background: rgb(var(--tint-rgb) / 0.04);
  border-color: var(--border-strong);
  color: var(--text-1);
}
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--text-3); color: var(--text-1); transform: translateY(-1px); }

.btn-quiet { color: var(--text-2); padding-inline: 12px; }
.btn-quiet:hover { color: var(--text-1); background: rgb(var(--tint-rgb) / 0.05); }
.btn-quiet .icon { width: 16px; height: 16px; }

/* ===================================================================
   Hero
   =================================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(48px, 7vw, 92px));
  padding-bottom: clamp(48px, 6vw, 72px);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 1; }

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.hero-copy h1 { margin-bottom: 20px; }
.hero-copy .lead { margin-bottom: 32px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.platform-line {
  margin-top: 22px;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-3);
}
.platform-line .mono { text-transform: none; letter-spacing: 0; color: var(--nav); }

/* --- The application window ---------------------------------------
   A plain chrome bar and a hairline of the accent, so the screenshot
   sits in something rather than floating on the page. */
.app-window {
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-window);
  overflow: hidden;
  will-change: transform;
}
.app-window::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid var(--accent-dim);
  pointer-events: none;
}
.app-window-bar {
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding-inline: 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
}
.app-window-bar .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--border-strong);
}
.app-window img { width: 100%; }

/* ===================================================================
   Capability bar
   =================================================================== */
.capabilities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(44px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.capabilities li {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 18px 14px;
  background: var(--surface-1);
  font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}
.capabilities .icon { width: 19px; height: 19px; color: var(--accent-bright); }

/* ===================================================================
   Feature cards
   =================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card {
  padding: 26px 24px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.card-icon {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 18px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-btn);
  background: var(--accent-dim);
  color: var(--accent-bright);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-2); font-size: 0.9375rem; }

.section-compact { padding-block: clamp(48px, 6vw, 72px); }
.story { max-width: 64ch; }
.story h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin-bottom: 16px; }
.story p:not(.eyebrow) { color: var(--text-2); }
.story p + p { margin-top: 0.9em; }
.story .story-note { color: var(--text-3); font-size: 0.875rem; }
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.story-shot figcaption { margin-top: 12px; color: var(--text-3); font-size: 0.875rem; }
@media (max-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
}

.note {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}
.note p { color: var(--text-2); font-size: 0.9375rem; }
.note strong { color: var(--text-1); }
.note-icon { color: var(--healthy); display: grid; place-items: center; padding-top: 1px; }

/* ===================================================================
   Screenshot gallery
   =================================================================== */
/* Three groups (fly, set up, review), each its own grid. Six columns, so a
   group can mix a full-width lead, pairs and rows of three. */
.gallery-nav {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: calc(-1 * clamp(12px, 2vw, 28px)) 0 clamp(32px, 4vw, 48px);
}
.gallery-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-1);
  font-size: 0.875rem; font-weight: 600;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.gallery-nav a:hover { border-color: var(--accent); background: var(--surface-2); color: var(--text-1); }
.gallery-nav .icon { width: 16px; height: 16px; color: var(--accent-bright); }
.gallery-nav .mono { color: var(--text-3); font-weight: 500; }

.gallery-group + .gallery-group { margin-top: clamp(48px, 6vw, 80px); }
.gallery-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.gallery-head h3 { display: inline-flex; align-items: center; gap: 10px; align-self: center; }
.gallery-head h3 .icon { width: 19px; height: 19px; color: var(--accent-bright); }
.gallery-head p { color: var(--text-2); font-size: 0.9375rem; }

.gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.shot { margin: 0; grid-column: span 3; }
.shot-lead { grid-column: span 6; }
.shot-third { grid-column: span 2; }

.shot-btn {
  position: relative;
  display: block; width: 100%; padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.shot-btn:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.shot-btn img { width: 100%; }

.shot-zoom {
  position: absolute; right: 12px; bottom: 12px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-btn);
  background: rgba(11, 14, 18, 0.72);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #F2F4F7;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.shot-btn:hover .shot-zoom, .shot-btn:focus-visible .shot-zoom { opacity: 1; }

.shot figcaption {
  padding: 12px 2px 0;
  color: var(--text-2);
  font-size: 0.875rem;
  line-height: 1.5;
}
.shot figcaption strong { color: var(--text-1); }

.fineprint {
  max-width: 78ch;
  margin-top: 28px;
  color: var(--text-3);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* ===================================================================
   Technical specification
   =================================================================== */
.spec-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  overflow: hidden;
}
.spec { width: 100%; border-collapse: collapse; }
.spec tr + tr { border-top: 1px solid var(--border-soft); }
.spec th, .spec td { padding: 18px 24px; text-align: left; vertical-align: top; }
.spec th {
  display: flex; align-items: center; gap: 10px;
  width: 210px; min-width: 210px;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.spec th .icon { width: 17px; height: 17px; color: var(--accent-bright); }
.spec td { color: var(--text-2); font-size: 0.9375rem; }
.spec td .mono { color: var(--text-1); }
.spec tr:hover td, .spec tr:hover th { background: var(--surface-2); }

.section-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }

/* ===================================================================
   Download
   =================================================================== */
.download { overflow: hidden; border-top: 1px solid var(--border-soft); }
.download .wrap { position: relative; z-index: 1; }

.download-panel {
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgb(var(--glass-rgb) / 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-glass);
  text-align: center;
}
.download-panel h2 { margin-bottom: 16px; }
.download-panel .lead { margin-inline: auto; margin-bottom: 18px; }
.download-panel .hero-actions { justify-content: center; }

.release-line {
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-3);
}
.release-line .tag { color: var(--healthy); font-weight: 600; }

.platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.platforms li {
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: rgb(var(--tint-rgb) / 0.02);
}
.platform-name { display: block; font-weight: 600; font-size: 0.9375rem; }
.platform-meta {
  display: block; margin-top: 3px;
  font-size: 0.75rem; color: var(--accent-bright);
}
.platform-note {
  display: block; margin-top: 8px;
  font-size: 0.8125rem; line-height: 1.5; color: var(--text-3);
}

/* ===================================================================
   Footer
   =================================================================== */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  padding-top: clamp(48px, 6vw, 72px);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 44px;
}
.footer-brand p {
  max-width: 48ch;
  margin-top: 16px;
  color: var(--text-3);
  font-size: 0.875rem;
}
.footer-links h2 {
  margin-bottom: 14px;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3);
}
.footer-links ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.footer-links a { color: var(--text-2); font-size: 0.875rem; }
.footer-links a:hover { color: var(--accent-bright); }

.footer-credit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px 48px;
  padding-block: 30px;
  border-top: 1px solid var(--border-soft);
}
.footer-credit h2 {
  margin-bottom: 12px;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3);
}
.footer-credit p {
  max-width: 68ch;
  color: var(--text-2);
  font-size: 0.875rem;
  line-height: 1.65;
}
.footer-credit p + p { margin-top: 10px; }
.footer-credit strong { color: var(--text-1); font-weight: 600; }

.orgmark {
  width: 260px;
  max-width: 100%;
  height: auto;
  padding: 10px 14px;
  border-radius: var(--radius-btn);
  background: var(--orgmark-plate);
}

.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding-block: 20px 28px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-3);
  font-size: 0.8125rem;
}

/* ===================================================================
   Lightbox
   =================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
  position: absolute; inset: 0;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.lightbox-panel {
  position: relative;
  width: min(1280px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lightbox-panel img {
  width: 100%;
  max-height: calc(100vh - 210px);
  object-fit: contain;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-1);
  box-shadow: var(--shadow-window);
}
.lightbox-caption {
  max-width: 76ch;
  color: var(--text-2);
  font-size: 0.875rem;
  text-align: center;
}
.lightbox-caption strong { color: var(--text-1); }
.lightbox-controls { display: flex; align-items: center; gap: 14px; }
.lightbox .icon-btn { background: var(--surface-1); border-color: var(--border-strong); }
.lightbox .icon-btn:hover { background: var(--surface-hover); }
.lightbox-count { color: var(--text-3); font-size: 0.75rem; min-width: 17ch; text-align: center; }
.lightbox-close { position: absolute; top: -8px; right: 0; transform: translateY(-100%); }

/* ===================================================================
   Motion — a short fade-and-rise on first sight, and a hero screenshot
   that leans by a few pixels as the page scrolls. Nothing else moves.
   =================================================================== */
/* Scoped to .js: without scripting nothing is hidden in the first place. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.card-grid .card:nth-child(2), .gallery .shot:nth-child(2) { transition-delay: 0.05s; }
.card-grid .card:nth-child(3), .gallery .shot:nth-child(3) { transition-delay: 0.1s; }
.card-grid .card:nth-child(5), .gallery .shot:nth-child(5) { transition-delay: 0.05s; }
.card-grid .card:nth-child(6), .card-grid .card:nth-child(9) { transition-delay: 0.1s; }
.card-grid .card:nth-child(8) { transition-delay: 0.05s; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 1080px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { max-width: 62ch; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }

  .nav-toggle { display: inline-grid; }
  /* The nav leaves the row here, and with it the auto margin that pushed
     these buttons to the right edge. */
  .header-actions { margin-left: auto; }

  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    margin: 0;
    display: none;
    padding: 10px var(--gutter) 18px;
    /* Fully opaque, not glass: at 3% transmission a white headline behind it
       is still legible through the menu on a near-black page. */
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-list a { padding: 13px 10px; font-size: 0.9375rem; border-radius: var(--radius-btn); }

  .capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot, .shot-third { grid-column: span 1; }
  .shot-lead { grid-column: span 2; }

  .spec, .spec tbody, .spec tr { display: block; }
  .spec th, .spec td { width: auto; min-width: 0; white-space: normal; }
  .spec th { display: flex; padding-bottom: 6px; }
  .spec td { display: block; padding-top: 0; }

  .platforms { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --gutter: 16px; }

  body { font-size: 15.5px; }
  .section { padding: 64px 0; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .btn-quiet { width: auto; }
  .section-cta { flex-direction: column; align-items: stretch; }

  .capabilities { grid-template-columns: 1fr; }
  .capabilities li { justify-content: flex-start; padding: 15px 18px; }

  .card-grid { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: 1fr; }
  .shot, .shot-lead, .shot-third { grid-column: span 1; }

  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-credit { grid-template-columns: 1fr; gap: 22px; }
  .orgmark { width: 220px; }
  .lightbox-panel img { max-height: calc(100vh - 230px); }
  .lightbox-close { top: 0; right: 0; transform: none; }
}

/* ===================================================================
   Reduced motion — every transition and transform above is off.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .shot-btn:hover { transform: none; }
  .app-window { transform: none !important; }
}