:root {
  color-scheme: dark;
  --bg: #030303;
  --bg-soft: #090907;
  --panel: #11100b;
  --panel-2: #18150b;
  --tile: #1f1b0f;
  --line: #5b4a12;
  --line-soft: #2e260c;
  --text: #fffaf0;
  --muted: #d1c8b2;
  --dim: #958a70;
  --blue: #b6c8dc;
  --gold: #ffd400;
  --green: #b5e66a;
  --red: #ff6f55;
  --violet: #d9d1bf;
  --cyan: #dce5ec;
  --shadow: 0 28px 90px rgba(0, 0, 0, .62);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, #000 0%, var(--bg) 36%, #090805 100%);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}
body.en .es,
body:not(.en) .en { display: none !important; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
.wrap { width: min(1180px, calc(100vw - 32px)); margin: 0 auto; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(255, 212, 0, .28);
  background: rgba(3, 3, 3, .92);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}
.topbar-inner {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 850;
}
.brand img { width: 44px; height: 24px; object-fit: contain; }
.brand span {
  color: var(--text);
  text-shadow: 0 0 18px rgba(255, 212, 0, .18);
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.nav a,
.lang button {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 7px 10px;
}
.nav a:hover,
.nav a.active,
.lang button:hover,
.lang button.active {
  border-color: rgba(255, 212, 0, .46);
  background: rgba(255, 212, 0, .1);
  color: var(--text);
  box-shadow: 0 0 18px rgba(255, 212, 0, .08);
}
.lang { display: flex; gap: 4px; }
body.has-account-widget .nav a[href="account/"],
body.has-account-widget .nav a[href="/account/"] {
  display: none;
}
.account-widget {
  display: grid;
  grid-template-columns: 34px minmax(0, max-content);
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(230px, 25vw);
  min-height: 40px;
  border: 1px solid rgba(255, 212, 0, .36);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(23, 21, 15, .92), rgba(8, 8, 7, .9));
  color: var(--text);
  padding: 5px 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 28px rgba(0, 0, 0, .24);
}
.account-widget:hover {
  border-color: rgba(255, 212, 0, .72);
  background: linear-gradient(180deg, rgba(31, 27, 15, .96), rgba(12, 11, 8, .94));
}
.account-widget[hidden] { display: none; }
.account-widget__logo {
  width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 212, 0, .46);
  border-radius: 8px;
  background: radial-gradient(circle at 34% 18%, rgba(255, 212, 0, .42), rgba(91, 74, 18, .82) 45%, rgba(9, 8, 5, .96));
  color: #fff8d5;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0;
  overflow: hidden;
}
.account-widget__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}
.account-widget__main {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.account-widget__title {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-widget__meta {
  display: flex;
  min-width: 0;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}
.account-widget__meta em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-widget__cta em { color: var(--gold); font-weight: 850; }

.hero {
  min-height: calc(100vh - 66px);
  display: grid;
  align-items: end;
  border-bottom: 1px solid var(--line-soft);
  background:
    linear-gradient(90deg, rgba(3, 3, 3, .98) 0%, rgba(3, 3, 3, .82) 38%, rgba(3, 3, 3, .48) 72%, rgba(3, 3, 3, .75) 100%),
    url("../images/fscompany-operations-board.jpg") center / cover no-repeat;
}
.sales-hero {
  min-height: calc(100vh - 66px);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, .18) 48%, rgba(0, 0, 0, .92) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .08) 38%, rgba(0, 0, 0, .08) 72%, rgba(0, 0, 0, .44) 100%),
    url("../images/intro.png") center top / cover no-repeat;
  box-shadow: inset 0 -1px 0 rgba(255, 212, 0, .28);
}
.hero-inner {
  padding: 70px 0 34px;
}
.sales-hero .hero-inner {
  padding-top: min(55vh, 560px);
}
.kicker {
  margin: 0 0 10px;
  color: var(--gold);
  font: 800 12px "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0;
  text-shadow: 0 0 18px rgba(255, 212, 0, .3);
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 820px;
  margin-bottom: 16px;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: 0;
}
body:not([data-page="home"]) main h1 {
  max-width: 760px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
}
.sales-hero h1 {
  max-width: 560px;
  margin-bottom: 10px;
  font-size: clamp(34px, 4.2vw, 56px);
  text-shadow: 0 6px 28px rgba(0, 0, 0, .82), 0 0 24px rgba(255, 212, 0, .14);
}
.sales-hero .lead {
  max-width: 620px;
  color: #efe8d4;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .9);
}
h2 {
  margin-bottom: 12px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  letter-spacing: 0;
}
h3 { margin-bottom: 8px; font-size: 20px; letter-spacing: 0; }
.lead {
  max-width: 760px;
  color: var(--muted);
  font-size: 18px;
}
.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 38px;
  max-width: 1020px;
}
.proof-strip span {
  display: grid;
  gap: 3px;
  min-height: 78px;
  border: 1px solid rgba(255, 212, 0, .34);
  background: linear-gradient(180deg, rgba(20, 17, 8, .88), rgba(8, 8, 7, .9));
  padding: 13px 14px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.proof-strip strong {
  color: var(--text);
  font-size: 14px;
}
.proof-strip em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 212, 0, .34);
  border-radius: 8px;
  background: linear-gradient(180deg, #17150f, #0d0c08);
  color: var(--text);
  font-weight: 800;
  padding: 0 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.btn.primary {
  border-color: rgba(255, 212, 0, .85);
  background: linear-gradient(180deg, #ffe14b, #d39f00);
  color: #090704;
  box-shadow: 0 0 26px rgba(255, 212, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.btn.gold { border-color: rgba(255, 212, 0, .72); background: #3b3006; }
.btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.hero-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 46px;
}
.hero-shot {
  border: 1px solid var(--line);
  background: rgba(18, 15, 8, .9);
  box-shadow: var(--shadow);
}
.hero-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--line-soft); }
.hero-shot span { display: block; padding: 10px 12px 12px; color: var(--muted); }

.sales-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.feature-pitch {
  min-height: 210px;
}
.feature-pitch h3 {
  font-size: 24px;
}

.screenshots-showcase {
  display: grid;
  gap: 18px;
}
.screenshot-feature {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.screenshot-feature img {
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
}
.screenshot-feature figcaption,
.screenshot-card figcaption {
  border-top: 1px solid var(--line-soft);
  background: rgba(18, 15, 8, .94);
  padding: 14px 16px;
}
.screenshot-feature strong,
.screenshot-card strong {
  display: block;
  color: var(--text);
  font-size: 17px;
  margin-bottom: 4px;
}
.screenshot-feature span,
.screenshot-card span {
  color: var(--muted);
}
.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.screenshot-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: zoom-in;
}
.screenshot-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--tile);
}
.screenshot-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.screenshot-hero-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow);
  cursor: zoom-in;
}
.screenshot-hero-tile img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .28s ease, filter .28s ease;
}
.screenshot-hero-tile span,
.screenshot-card span {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(24, 21, 11, .98), rgba(12, 11, 8, .98));
  padding: 14px 16px;
}
.screenshot-hero-tile strong,
.screenshot-card strong {
  color: var(--text);
  font-size: 17px;
}
.screenshot-hero-tile em,
.screenshot-card em {
  color: var(--muted);
  font-style: normal;
}
.screenshot-hero-tile:hover img,
.screenshot-card:hover img {
  filter: brightness(1.08);
  transform: scale(1.015);
}
.premium-grid .screenshot-card {
  display: block;
  min-height: 100%;
  box-shadow: 0 16px 46px rgba(0, 0, 0, .18);
}
.premium-grid .screenshot-card img {
  transition: transform .28s ease, filter .28s ease;
}

.shot-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}
.shot-modal[hidden] { display: none; }
.shot-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(16px);
}
.shot-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(1220px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
  overflow: hidden;
  border: 1px solid rgba(255, 212, 0, .5);
  background: linear-gradient(180deg, rgba(23, 20, 12, .98), rgba(5, 5, 4, .98));
  box-shadow: 0 32px 110px rgba(0, 0, 0, .78), 0 0 46px rgba(255, 212, 0, .12);
}
.shot-modal__media {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
  background: #000;
  border-right: 1px solid var(--line-soft);
}
.shot-modal__media img {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 50px);
  object-fit: contain;
}
.shot-modal__info {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 34px 30px 28px;
  overflow: auto;
}
.shot-modal__info h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
}
.shot-modal__info p {
  color: var(--muted);
  margin: 0;
}
.shot-modal__meta {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 0;
  color: var(--muted);
  font-size: 13px;
}
.shot-modal__meta span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.shot-modal__meta strong {
  color: var(--gold);
  font-size: 12px;
  text-transform: uppercase;
}
.shot-modal__close,
.shot-modal__nav,
.shot-modal__action {
  border: 1px solid rgba(255, 212, 0, .48);
  border-radius: 8px;
  background: linear-gradient(180deg, #17150f, #080807);
  color: var(--text);
  font-weight: 850;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 18px rgba(255, 212, 0, .08);
}
.shot-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 42px;
  height: 42px;
  font-size: 18px;
}
.shot-modal__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 46px;
  height: 58px;
  transform: translateY(-50%);
  font-size: 26px;
}
.shot-modal__nav.prev { left: 14px; }
.shot-modal__nav.next { right: 14px; }
.shot-modal__controls {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.shot-modal__action {
  min-height: 42px;
  padding: 0 14px;
}
.shot-modal__close:hover,
.shot-modal__nav:hover,
.shot-modal__action:hover {
  border-color: rgba(255, 212, 0, .85);
  filter: brightness(1.1);
}
body.modal-open {
  overflow: hidden;
}

.section {
  border-bottom: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255, 212, 0, .025), transparent 130px),
    var(--bg);
}
.section.alt {
  background:
    linear-gradient(180deg, rgba(255, 212, 0, .04), transparent 150px),
    var(--bg-soft);
}
.section-inner { padding: 54px 0; }
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}
.section-head p { max-width: 560px; color: var(--muted); margin-bottom: 0; }

.scenario-section {
  background:
    linear-gradient(180deg, rgba(3, 3, 3, .9), rgba(3, 3, 3, .98)),
    url("../images/fscompany-market-board.jpg") center / cover fixed no-repeat;
}
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.scenario-grid > div {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(25, 21, 10, .92), rgba(10, 10, 8, .92));
  padding: 20px;
  min-height: 205px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.scenario-grid p {
  color: var(--muted);
  margin-bottom: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 16px;
  min-height: 230px;
  border: 1px solid rgba(255, 212, 0, .3);
  background:
    linear-gradient(180deg, rgba(255, 212, 0, .035), transparent 70px),
    linear-gradient(180deg, rgba(24, 21, 11, .96), rgba(7, 7, 6, .98));
  padding: 16px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .045);
}
.feature-card p { color: var(--muted); margin-bottom: 14px; }
.feature-card img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  border: 1px solid rgba(255, 212, 0, .2);
  background: var(--tile);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .035) inset;
}
.mini-list {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.mini-list span::before { content: "- "; color: var(--gold); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 22px;
  align-items: center;
}
.panel {
  border: 1px solid rgba(255, 212, 0, .32);
  background:
    linear-gradient(180deg, rgba(255, 212, 0, .04), transparent 90px),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 22px;
  box-shadow: 0 20px 58px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .045);
}
.panel p { color: var(--muted); }
.visual-panel {
  border: 1px solid rgba(255, 212, 0, .32);
  background: #070705;
  padding: 10px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.visual-panel img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid rgba(255, 212, 0, .16);
}
.clean-panel {
  min-height: 430px;
  display: grid;
  align-content: center;
}
.clean-visual img {
  aspect-ratio: 4 / 3;
}
.sim-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.sim-pills span {
  border: 1px solid var(--line);
  background: rgba(255, 212, 0, .08);
  color: var(--muted);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.info-card {
  border: 1px solid rgba(255, 212, 0, .28);
  background:
    linear-gradient(180deg, rgba(255, 212, 0, .045), transparent 70px),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 18px;
  min-height: 150px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.info-card p { color: var(--muted); margin-bottom: 0; }
.community-hero {
  min-height: auto;
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  background:
    linear-gradient(90deg, rgba(3, 3, 3, .98) 0%, rgba(3, 3, 3, .8) 46%, rgba(3, 3, 3, .55) 100%),
    url("../images/fscompany-operations-board.jpg") center / cover no-repeat;
}
.community-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
  gap: 24px;
  align-items: center;
  padding: clamp(46px, 7vw, 82px) 0 clamp(34px, 5vw, 58px);
}
.community-copy h1 {
  max-width: 840px;
}
.community-radar {
  display: grid;
  gap: 10px;
}
.community-radar div,
.community-proof div,
.community-join-box {
  border: 1px solid rgba(255, 212, 0, .42);
  background: linear-gradient(180deg, rgba(24, 21, 11, .9), rgba(8, 8, 7, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 48px rgba(0, 0, 0, .28);
}
.community-radar div {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 18px;
}
.community-radar strong,
.community-proof strong {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 13px;
  text-transform: uppercase;
}
.community-radar span,
.community-proof span,
.community-join-box p {
  color: var(--muted);
}
.community-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.community-proof div {
  min-height: 160px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
}
.community-join {
  background:
    linear-gradient(180deg, rgba(255, 212, 0, .03), transparent 160px),
    #030303;
}
.community-join-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: center;
  padding: clamp(24px, 4vw, 42px);
}
.community-steps {
  display: grid;
  gap: 10px;
}
.community-steps span {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line-soft);
  background: rgba(255, 212, 0, .06);
  padding: 12px;
}
.community-steps strong {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
}
.community-steps em {
  color: var(--text);
  font-style: normal;
  font-weight: 800;
}
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border: 1px solid rgba(255, 212, 0, .48);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(255, 212, 0, .06);
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
  margin-bottom: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.form-grid .wide { grid-column: span 2; }
label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--tile);
  color: var(--text);
  padding: 12px;
  outline: none;
}
textarea { resize: vertical; min-height: 130px; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 212, 0, .18); }
.legal-check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 212, 0, .045);
  padding: 12px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.45;
}
.legal-check input {
  width: auto;
  min-height: auto;
  margin: 4px 0 0;
}
.legal-check a,
.legal-note a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-note {
  margin: -4px 0 0;
  color: var(--dim);
  font-size: 12px;
}
.cms-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.cms-preview {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line-soft);
  background: var(--tile);
  padding: 10px;
}
.cms-preview img {
  width: 120px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line-soft);
}
.cms-list {
  display: grid;
  gap: 10px;
}
.cms-list-item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 110px;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 14px;
}
.cms-list-item p { color: var(--muted); margin-bottom: 0; }
.cms-list-item img {
  width: 110px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line-soft);
  background: var(--tile);
}
.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.telemetry-metric {
  display: grid;
  gap: 2px;
  min-height: 58px;
  border: 1px solid var(--line-soft);
  background: var(--tile);
  padding: 9px 10px;
}
.telemetry-metric em {
  color: var(--dim);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}
.telemetry-metric strong {
  color: var(--text);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.roadmap {
  display: grid;
  gap: 12px;
}
.roadmap-item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  border: 1px solid rgba(255, 212, 0, .3);
  background:
    linear-gradient(90deg, rgba(255, 212, 0, .085), transparent 280px),
    linear-gradient(180deg, rgba(24, 21, 11, .94), rgba(8, 8, 7, .96));
  padding: 18px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.roadmap-item strong { color: var(--gold); font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; text-transform: uppercase; }
.roadmap-item p { color: var(--muted); margin-bottom: 0; }

.author-hero {
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 212, 0, .12), transparent 34%),
    linear-gradient(180deg, rgba(255, 212, 0, .035), transparent 280px),
    #030303;
}
.author-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, .78fr);
  gap: 38px;
  align-items: center;
  min-height: calc(100vh - 66px);
  padding: 58px 0 46px;
}
.author-copy {
  display: grid;
  gap: 16px;
}
.author-copy h1 {
  margin-bottom: 0;
}
.author-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 820px;
  margin-top: 12px;
}
.author-socials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.author-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  border: 1px solid rgba(255, 212, 0, .34);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(24, 21, 11, .82), rgba(8, 8, 7, .9));
  color: var(--muted);
  font-weight: 800;
  padding: 0 12px;
}
.author-socials a:hover {
  border-color: rgba(255, 212, 0, .78);
  color: var(--text);
  box-shadow: 0 0 18px rgba(255, 212, 0, .1);
}
.author-socials strong {
  color: var(--gold);
  font: 800 11px "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}
.author-socials span {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.author-social-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 212, 0, .28);
  background: linear-gradient(180deg, rgba(24, 21, 11, .78), rgba(8, 8, 7, .92));
  padding: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.author-social-card .kicker {
  margin-bottom: 0;
}
.author-facts > span {
  min-height: 82px;
  border: 1px solid rgba(255, 212, 0, .28);
  background: linear-gradient(180deg, rgba(24, 21, 11, .9), rgba(7, 7, 6, .92));
  padding: 14px;
}
.author-facts strong {
  display: block;
  color: var(--gold);
  font: 800 12px "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}
.author-facts em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}
.author-media {
  display: grid;
  gap: 12px;
  align-self: center;
}
.author-portrait {
  margin: 0;
  position: relative;
  display: grid;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 212, 0, .38);
  background:
    linear-gradient(180deg, rgba(255, 212, 0, .08), transparent 34%),
    var(--panel);
  padding: 10px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 255, 255, .035) inset;
}
.author-portrait img {
  width: 100%;
  aspect-ratio: 1 / .9;
  height: auto;
  object-fit: cover;
  object-position: 50% 30%;
  border: 1px solid rgba(255, 212, 0, .18);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset;
}
.author-portrait figcaption {
  border-top: 1px solid rgba(255, 212, 0, .22);
  background: linear-gradient(180deg, rgba(255, 212, 0, .055), rgba(0, 0, 0, .12));
  color: var(--muted);
  padding: 10px 4px 2px;
  font-size: 13px;
}
.author-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr);
  gap: 28px;
  align-items: start;
}
.author-story {
  display: grid;
  gap: 18px;
}
.author-story p {
  color: var(--muted);
  font-size: 17px;
}
.author-story p:last-child {
  margin-bottom: 0;
}
.author-quote {
  border-left: 4px solid var(--gold);
  background: linear-gradient(90deg, rgba(255, 212, 0, .12), rgba(255, 212, 0, .025));
  padding: 18px 20px;
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
}
.author-timeline {
  display: grid;
  gap: 12px;
}
.author-timeline li {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(24, 21, 11, .88), rgba(8, 8, 7, .92));
  padding: 14px;
  list-style: none;
}
.author-timeline strong {
  color: var(--gold);
  font: 800 12px "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}
.author-timeline li > span {
  color: var(--muted);
}
.author-photo-band {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
  gap: 14px;
  align-items: start;
}
.author-photo {
  position: relative;
  display: grid;
  gap: 10px;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 212, 0, .34);
  background:
    linear-gradient(180deg, rgba(255, 212, 0, .06), rgba(255, 212, 0, .015) 42%, rgba(0, 0, 0, .2)),
    #050504;
  padding: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .035) inset;
}
.author-photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
  border: 1px solid rgba(255, 212, 0, .16);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .045) inset;
}
.author-photo.large img {
  aspect-ratio: 16 / 10;
}
.author-photo > span {
  display: block;
  border-top: 1px solid rgba(255, 212, 0, .2);
  background: transparent;
  color: var(--muted);
  padding: 10px 4px 1px;
  font-size: 13px;
}
.author-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.author-gallery .author-photo img {
  aspect-ratio: 3 / 2;
}
.author-photo--skyranger img {
  object-position: 50% 50%;
}
.author-photo--prop img {
  object-position: 50% 45%;
}
.author-photo--sim img {
  object-position: 50% 28%;
}
.author-photo--airfield img {
  object-position: 50% 31%;
}
.author-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.author-values article {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(24, 21, 11, .92), rgba(8, 8, 7, .94));
  padding: 20px;
}
.author-values article p {
  color: var(--muted);
  margin-bottom: 0;
}
.author-close {
  border: 1px solid rgba(255, 212, 0, .34);
  background:
    linear-gradient(90deg, rgba(255, 212, 0, .11), rgba(255, 212, 0, .02)),
    var(--panel);
  padding: 30px;
}

.footer {
  border-top: 1px solid rgba(255, 212, 0, .32);
  background:
    linear-gradient(180deg, rgba(255, 212, 0, .035), transparent 120px),
    #050504;
  color: var(--muted);
  padding: 42px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(160px, .75fr));
  gap: 28px;
  align-items: start;
}
.footer-brand {
  display: grid;
  gap: 12px;
  max-width: 430px;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-weight: 900;
}
.footer-logo img {
  width: 46px;
  height: 26px;
  object-fit: contain;
}
.footer-brand p {
  margin-bottom: 0;
  color: var(--muted);
}
.footer-platform {
  color: var(--gold);
  font: 800 12px "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}
.footer-column {
  display: grid;
  gap: 9px;
  align-content: start;
}
.footer-column strong {
  color: var(--text);
  font-size: 13px;
  text-transform: uppercase;
}
.footer-column a,
.footer-column span {
  color: var(--muted);
  font-size: 13px;
}
.footer-column a:hover {
  color: var(--gold);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  color: var(--dim);
  font-size: 12px;
}

@media (max-width: 1020px) {
  .feature-grid, .split, .author-hero-grid, .author-story-grid, .author-photo-band, .author-values { grid-template-columns: 1fr; }
  .feature-card { grid-template-columns: 1fr; }
  .card-grid, .hero-shots, .screenshot-grid, .sales-grid, .proof-strip, .screenshot-wall, .scenario-grid, .community-hero-grid, .community-proof, .community-join-box, .author-gallery, .footer-grid { grid-template-columns: 1fr; }
  .section-head { display: block; }
  .account-widget {
    width: max-content;
    max-width: min(230px, 42vw);
  }
  .community-hero { min-height: auto; }
  .community-hero-grid { padding: 54px 0 32px; }
  .author-hero-grid { min-height: auto; }
  .author-media { max-width: 720px; }
  .author-portrait img { aspect-ratio: 16 / 10; }
  .author-socials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .community-radar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .screenshot-feature img { aspect-ratio: 16 / 10; }
  .scenario-section { background-attachment: scroll; }
  .shot-modal__dialog { grid-template-columns: 1fr; }
  .shot-modal__media {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .shot-modal__media img {
    max-height: 58vh;
  }
}
@media (max-width: 720px) {
  .topbar-inner {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px 0;
  }
  .brand { max-width: calc(100% - 94px); }
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: visible;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 2px;
  }
  .nav a,
  .lang button {
    font-size: 12px;
    padding: 6px 8px;
  }
  .lang { margin-left: auto; }
  .account-widget {
    order: 4;
    width: max-content;
    max-width: 100%;
  }
  .hero { min-height: auto; }
  .sales-hero {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .04) 48vw, rgba(0, 0, 0, .92) 70vw, #030303 100%),
      url("../images/intro.png") center top / 100% auto no-repeat;
  }
  .sales-hero .hero-inner {
    padding-top: calc(66.67vw + 28px);
  }
  .sales-hero .lead {
    max-width: 100%;
    font-size: 16px;
  }
  .proof-strip { margin-top: 24px; }
  .hero-inner { padding: 44px 0 26px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: 1; }
  .roadmap-item { grid-template-columns: 1fr; }
  .cms-list-item, .cms-preview { grid-template-columns: 1fr; }
  .telemetry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .author-facts { grid-template-columns: 1fr; }
  .author-portrait img { aspect-ratio: 4 / 5; }
  .author-socials { grid-template-columns: 1fr; }
  .author-timeline li { grid-template-columns: 1fr; }
  .author-photo img, .author-photo.large img { aspect-ratio: 4 / 3; }
  .author-close { padding: 22px; }
  .community-radar { grid-template-columns: 1fr; }
  .shot-modal { padding: 10px; }
  .shot-modal__dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
  .shot-modal__info { padding: 22px 18px 18px; }
  .shot-modal__nav {
    width: 40px;
    height: 48px;
  }
  .shot-modal__controls { flex-wrap: wrap; }
}