/* ==========================================================================
   MATRIX EDGE — Tactical Telemetry & CRT Terminal (brutalist profile)
   Dark CRT substrate, aviation-red accent, block grid logo, mono telemetry.
   Base design.md contract kept: 4px radius scale, hairline shadow scale,
   card hover lift, container discipline, AA contrast, reduced-motion gates.
   ========================================================================== */

/* ---- Fonts (self-hosted, downloaded at build time) ------------------------ */
@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/display-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens --------------------------------------------------------------- */
:root {
  --bg: #0A0C0A;
  --surface: #101410;
  --surface-2: #151A15;
  --border: #2A332A;
  --border-strong: #3D493D;
  --text: #E4EDE4;
  --muted: #8FA38F;
  --accent: #FF2A2A;
  --accent-hover: #FF5540;
  --accent-tint: rgba(255, 42, 42, 0.09);
  --readout: #4AF626; /* ONE status readout only: the live-feed chip */

  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.55), 0 18px 44px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 3px 8px rgba(0, 0, 0, 0.55), 0 16px 36px rgba(0, 0, 0, 0.42);

  --font-display: 'Archivo Black', 'Arial Black', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
  --font-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --container: 1200px;
  --header-h: 64px;
}

/* ---- Reset / base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe, video, canvas { max-width: 100%; }
a { color: var(--text); text-decoration-color: rgba(255, 42, 42, 0.55); text-underline-offset: 3px; }
a:hover { color: #fff; text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
hr.rule { border: 0; border-top: 1px solid var(--border); margin: 26px 0; }

h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 0.6em; font-weight: 400; }
h1, h2, .display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
h1 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2.2rem); }
h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.08rem; letter-spacing: 0.01em; }
h4 { font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; }
p { margin: 0 0 1em; }
main { display: block; }
section { position: relative; }

/* Telemetry micro type: labels, section markers, metadata */
.mono, .sec-tag, .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--accent); color: #140404; padding: 10px 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
}
.skip-link:focus { left: 8px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* Section marker: [ NN · LABEL ] with corner crosshairs */
.sec-tag {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--muted); margin-bottom: 14px;
}
.sec-tag::before { content: "["; color: var(--accent); font-weight: 700; }
.sec-tag::after { content: "]"; color: var(--accent); font-weight: 700; }
.sec-head { margin-bottom: 28px; }
.sec-head .lead { color: var(--muted); max-width: 62ch; }
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section--tint { background: var(--surface); border-block: 1px solid var(--border); }
.section--grid-bg {
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--bg);
  background-blend-mode: normal;
}
.section--grid-bg::before {
  /* mask the grid so text zones keep AA contrast */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 40%, rgba(10, 12, 10, 0.88), rgba(10, 12, 10, 0.55));
}
.section--grid-bg > .container { position: relative; z-index: 1; }

/* ---- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 13px 22px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
  background: var(--accent); color: #140404;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-hover); color: #140404; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: transparent; color: var(--text); border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-block { width: 100%; }

/* ---- Icon badge --------------------------------------------------------------- */
.icon { width: 24px; height: 24px; flex: none; }
.icon--xs { width: 15px; height: 15px; }
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  background: var(--accent-tint); color: var(--accent);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.icon-badge .icon { width: 24px; height: 24px; }

/* ---- Cards ---------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 22px; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
.card h3 { display: flex; align-items: center; gap: 12px; }
.card p { color: var(--muted); margin: 0; }
.card .icon-badge { margin-bottom: 14px; }
.card-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ---- Header ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 12, 10, 0.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.18s ease, background 0.18s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); background: #0A0C0A; }
.header-inner { display: flex; align-items: center; gap: 22px; min-height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo:hover { color: var(--text); }
.logo-mark { width: 36px; height: 36px; flex: none; }
.logo-word {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 17px; letter-spacing: -0.02em; line-height: 1;
}
.logo-word em { font-style: normal; color: var(--accent); }

.nav-groups { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-group { position: relative; }
.nav-group__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--text); cursor: pointer; padding: 9px 12px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.nav-group__trigger:hover, .nav-group.is-open > .nav-group__trigger {
  border-color: var(--accent); background: var(--accent-tint); color: #fff;
}
.nav-caret { transition: transform 0.16s ease; }
.nav-group.is-open .nav-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 0px); left: 0; z-index: 110;
  min-width: 280px; max-width: 360px;
  background: #0D100D; border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.nav-group.is-open > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown::before {
  content: ""; position: absolute; top: -5px; left: 20px;
  width: 8px; height: 8px; background: #0D100D;
  border-left: 1px solid var(--border-strong); border-top: 1px solid var(--border-strong);
  transform: rotate(45deg);
}
.dropdown ul { list-style: none; margin: 0; padding: 0; }
.dropdown a {
  display: block; padding: 9px 12px; border-radius: var(--radius);
  text-decoration: none; font-size: 0.92rem; color: var(--text);
}
.dropdown a:hover, .dropdown a:focus-visible { background: var(--accent-tint); color: #fff; }
.nav-group--edge .dropdown { left: auto; right: 0; }
.nav-group--edge .dropdown::before { left: auto; right: 20px; }

.header-cta { margin-left: auto; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

.mobile-menu {
  background: #0D100D; border-bottom: 1px solid var(--border);
  padding: 10px clamp(16px, 4vw, 40px) 20px; box-shadow: var(--shadow-md);
}
.mobile-group__trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  color: var(--text); cursor: pointer; padding: 14px 2px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.mobile-group__panel ul { list-style: none; margin: 0 0 6px; padding: 6px 0 8px 2px; }
.mobile-group__panel a { display: block; padding: 8px 4px; text-decoration: none; font-size: 0.95rem; color: var(--muted); }
.mobile-group__panel a:hover { color: #fff; }
.mobile-menu .btn { margin-top: 14px; }

@media (max-width: 1080px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
}

/* ---- Breadcrumbs --------------------------------------------------------------- */
.breadcrumbs { border-bottom: 1px solid var(--border); background: var(--surface); }
.breadcrumbs .container {
  display: flex; align-items: center; gap: 10px;
  padding-block: 11px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { color: var(--muted); }
.breadcrumbs span[aria-hidden] { color: var(--accent); }

/* ---- Hero (home) ---------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  padding: clamp(44px, 6vw, 84px) 0 clamp(48px, 6vw, 88px);
  background: var(--bg);
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__gridlines {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(42, 51, 42, 0.55) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(42, 51, 42, 0.55) 1px, transparent 1px) 0 0 / 56px 56px;
  mask-image: radial-gradient(ellipse 95% 90% at 50% 45%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 45%, #000 30%, transparent 78%);
}
.hero__svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::after {
  /* CRT scanline sweep texture, dark band only, ~3% */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 4px);
}
.hero .cross { position: absolute; color: var(--border-strong); font-family: var(--font-mono); font-size: 14px; user-select: none; }

.hero__inner {
  position: relative; z-index: 2;
  display: grid; gap: 36px;
  grid-template-columns: 1.08fr 0.92fr;
  grid-template-areas: "head form" "copy form";
  align-items: start;
}
.hero__title { grid-area: head; }
.hero__title .tick { color: var(--accent); }
.hero__aside { grid-area: form; min-width: 0; }
.hero__copy { grid-area: copy; max-width: 60ch; }
.hero__lead { color: var(--muted); font-size: 1.02rem; }

.hero-eyebrow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 18px;
}
.hero-eyebrow .live-chip {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--readout); border: 1px solid rgba(74, 246, 38, 0.35);
  background: rgba(74, 246, 38, 0.06); border-radius: var(--radius);
  padding: 4px 10px; font-size: 10.5px;
}
.hero-eyebrow .live-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--readout); box-shadow: 0 0 6px rgba(74, 246, 38, 0.8);
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; grid-template-areas: "head" "form" "copy"; gap: 26px; }
}

/* Flags row */
.flags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 6px; }
.flags__caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.flag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 10px 5px 6px; background: var(--surface);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text);
}
.flag svg { width: 26px; height: 17px; border-radius: 2px; display: block; }

/* Two icon links (licenses / security) */
.icon-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.icon-link {
  display: inline-flex; align-items: center; gap: 11px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 10px 16px 10px 10px;
  text-decoration: none; color: var(--text);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.icon-link:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); color: #fff; }
.icon-link .icon-badge { width: 38px; height: 38px; margin: 0; }

/* ---- Page hero (inner pages with form) ------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  padding: clamp(40px, 5.5vw, 72px) 0;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
}
.page-hero__bg { position: absolute; inset: 0; pointer-events: none; opacity: 0.75; }
.page-hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start;
}
.page-hero__copy { max-width: 58ch; }
.page-hero__copy .lead { color: var(--muted); }
@media (max-width: 900px) {
  .page-hero__inner { grid-template-columns: 1fr; }
}

/* ---- Form block (formFactory wrapper) --------------------------------------------- */
.form-block {
  position: relative;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 24px;
}
.form-block::before, .form-block::after {
  position: absolute; font-family: var(--font-mono); font-weight: 700;
  color: var(--accent); font-size: 15px; line-height: 1; user-select: none;
}
.form-block::before { content: "["; top: 10px; left: 7px; }
.form-block::after { content: "]"; bottom: 10px; right: 7px; }
.form-block__heading {
  font-family: var(--font-body); font-weight: 700; font-size: 1.02rem;
  letter-spacing: 0; text-transform: none;
  margin: 0 0 4px;
}
.form-block__intro { color: var(--muted); font-size: 0.92rem; margin-bottom: 12px; }
.form-block__card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--surface-2); }
.form-legal, .form-manager {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--muted); margin: 12px 0 0;
}
.form-manager { display: flex; align-items: center; gap: 7px; color: var(--text); }

/* beacon formFactory fields, terminal-styled */
.form-block .beacon-form { --beacon-accent: #FF2A2A; --beacon-on-accent: #140404; }
.form-block .beacon-form__label {
  display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.form-block .beacon-form__row { margin-bottom: 12px; }
.form-block .beacon-form__input,
.form-block input[type="text"], .form-block input[type="email"],
.form-block input[type="tel"], .form-block input[type="password"] {
  width: 100%; box-sizing: border-box;
  background: #0C0F0C; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 14px; padding: 11px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-block .beacon-form__input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint);
}
.form-block .beacon-form__submit,
.form-block button[type="submit"] {
  width: 100%; margin-top: 4px; cursor: pointer;
  background: var(--accent); color: #140404; border: 0; border-radius: var(--radius);
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.form-block .beacon-form__submit:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---- Exchange pill chips ------------------------------------------------------------ */
.exchanges { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.exchanges__caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); padding: 9px 18px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.pill:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ---- Steps ---------------------------------------------------------------------- */
.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.step:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; margin-bottom: 12px;
  background: var(--accent-tint); border: 1px solid var(--accent);
  border-radius: var(--radius); color: var(--accent);
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
}
.step h3 { display: flex; align-items: center; gap: 10px; }
.step p { color: var(--muted); margin: 6px 0 0; font-size: 0.95rem; }

/* ---- Tables (a feature of this design) ---------------------------------------------- */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 620px; }
.table-wrap th, .table-wrap td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table-wrap th {
  background: var(--surface-2); color: var(--text);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.table-wrap td { font-size: 0.94rem; color: var(--text); }
.table-wrap td.mono-cell { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover td { background: rgba(255, 42, 42, 0.04); }
.yes { color: var(--text); font-weight: 700; }
.yes::before { content: "\2713"; display: inline-block; margin-right: 8px; color: var(--text); font-size: 15px; }
.no { color: var(--accent); font-weight: 700; }
.no::before { content: "\2717"; display: inline-block; margin-right: 8px; font-size: 15px; }
.table-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); margin-top: 12px; }

/* ---- Reviews ------------------------------------------------------------------------ */
.reviews-note {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); margin-top: 20px;
}
.review-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.review {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.review:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
.review__head { display: flex; align-items: center; gap: 13px; }
.review__avatar {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: #1A211A; border: 1px solid var(--accent);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
}
.review__avatar .icon { width: 26px; height: 26px; }
.review__name { font-weight: 700; font-size: 0.98rem; }
.review__role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.review__body { margin: 0; font-size: 0.95rem; color: var(--text); flex: 1; }
.review__stats {
  display: flex; gap: 0; border-top: 1px solid var(--border); padding-top: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); flex-wrap: wrap;
}
.review__stats span { margin-right: 18px; }
.review__stats b { display: block; color: var(--text); font-size: 13px; letter-spacing: 0.02em; }

/* ---- Company block (home) --------------------------------------------------------------- */
.company-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 34px; align-items: start; }
.company-facts { list-style: none; margin: 18px 0 0; padding: 0; }
.company-facts li {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
  border-top: 1px solid var(--border); font-size: 0.95rem;
}
.company-facts .icon { width: 18px; height: 18px; color: var(--accent); margin-top: 3px; }
.company-facts b { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: block; }
.company-cards { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.company-card {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 15px;
  text-decoration: none; color: var(--text);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.company-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); color: #fff; }
.company-card .icon-badge { width: 40px; height: 40px; margin: 0; }
@media (max-width: 860px) { .company-grid { grid-template-columns: 1fr; } }

/* ---- FAQ accordion -------------------------------------------------------------------------- */
.faq-list { display: grid; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.faq-item.is-open { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.faq-q {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--text); padding: 16px 18px;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
}
.faq-q:hover { color: #fff; }
.faq-q .icon { width: 18px; height: 18px; color: var(--accent); transition: transform 0.16s ease; flex: none; }
.faq-item.is-open .faq-q .icon { transform: rotate(45deg); }
.faq-a { padding: 0 18px 16px; color: var(--muted); }
.faq-a[hidden] { display: none; }
.faq-a p { margin: 0; font-size: 0.95rem; }

/* ---- Article / doc layout --------------------------------------------------------------------- */
.doc h2 { margin-top: 1.6em; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { color: var(--text); max-width: 78ch; }
.doc .lead { color: var(--muted); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 0.45em; }
.doc table { min-width: 480px; }

.callout {
  border: 1px solid var(--border-strong); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: var(--radius);
  padding: 16px 18px; margin: 20px 0; box-shadow: var(--shadow-sm);
}
.callout p { margin: 0; color: var(--muted); font-size: 0.93rem; }
.callout b { color: var(--text); }

/* ---- Map embed --------------------------------------------------------------------------------- */
.map-embed {
  max-width: 860px; margin: 22px 0 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; background: var(--surface);
}
.map-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 320px; border: 0; }

/* ---- Vacancies ---------------------------------------------------------------------------------- */
.vacancy {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 22px; align-items: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.vacancy:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
.vacancy h3 { margin-bottom: 4px; }
.vacancy .vac-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.vacancy p { color: var(--muted); margin: 0; font-size: 0.94rem; max-width: 70ch; }
@media (max-width: 640px) { .vacancy { grid-template-columns: 1fr; } }

/* ---- Decorative motif blocks (node mesh / candlestick band) -------------------------------------- */
.motif-node { color: var(--border-strong); }
.motif-candles { color: rgba(255, 42, 42, 0.5); }

/* ---- Calculator section --------------------------------------------------------------------------- */
.calc-section { background: var(--surface); border-block: 1px solid var(--border); position: relative; overflow: hidden; }
.calc-section .container { position: relative; z-index: 1; }

/* ---- Special offer ------------------------------------------------------------------------------- */
.urgency-strip {
  background: var(--accent); color: #140404;
  border-bottom: 2px solid #B71414;
}
.urgency-strip .container {
  display: flex; flex-wrap: wrap; gap: 8px 34px; padding-block: 9px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.urgency-strip span::before { content: "> "; font-weight: 700; }
.so-countdown { display: flex; gap: 8px; }
.so-countdown__cell {
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-2); min-width: 74px; padding: 10px 8px; text-align: center;
}
.so-countdown__cell b {
  display: block; font-family: var(--font-mono); font-weight: 700; font-size: 26px;
  letter-spacing: 0.04em; color: var(--accent);
}
.so-countdown__cell span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.so-modal { position: fixed; inset: 0; z-index: 300; display: none; }
.so-modal.is-open { display: block; }
.so-modal__overlay { position: absolute; inset: 0; background: rgba(5, 6, 5, 0.82); }
.so-modal__content {
  position: relative; z-index: 1; max-width: 460px; margin: 12vh auto 0;
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 28px 26px 26px; text-align: center;
}
.so-modal__close {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px;
  background: none; border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: var(--text); font-size: 18px; cursor: pointer; line-height: 1;
}
.so-modal__close:hover { border-color: var(--accent); color: var(--accent); }
.so-modal__content h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.4rem; }
.so-modal__content p { color: var(--muted); font-size: 0.94rem; }

/* ---- 404 -------------------------------------------------------------------------------------------- */
.err { padding: clamp(60px, 9vw, 120px) 0; text-align: left; }
.err-code { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 9rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--accent); }

/* ---- Footer ------------------------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border-strong); background: #080A08; position: relative; }
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px);
}
.site-footer .container { position: relative; }
.footer-grid {
  display: grid; gap: 30px; padding: clamp(36px, 5vw, 56px) 0 10px;
  grid-template-columns: 1.4fr repeat(4, minmax(150px, 1fr));
}
.footer-brand .logo { margin-bottom: 14px; }
.footer-note { color: var(--muted); font-size: 0.9rem; max-width: 34ch; }
.footer-col__title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text);
  margin-bottom: 12px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a {
  display: inline-block; padding: 4px 0; text-decoration: none;
  color: var(--muted); font-size: 0.88rem;
}
.footer-col a:hover { color: var(--accent); }
.footer-disclaimer { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; background: var(--surface); }
.footer-disclaimer__title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.footer-disclaimer p { color: var(--muted); font-size: 0.84rem; margin: 0; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
  padding: 18px 0 26px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.footer-bottom a { color: var(--text); text-decoration: none; }
.footer-bottom a:hover { color: var(--accent); }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- Scroll reveal (snap-in) ------------------------------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(6px); transition: opacity 0.16s ease, transform 0.16s ease; }
.js .reveal.in-view { opacity: 1; transform: none; }

/* ---- Reduced motion ------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0 !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero::after, .page-hero::after, .site-footer::before { display: none; }
}

/* testimonial photos: fill the avatar badge edge to edge */
.review__avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }

/* Production form widget integration: the beacon formFactory randomizes its
   field class names and leaves input colors to the page. These structural
   rules theme every input inside our form containers, covering both the
   page forms and the calculator modal, with this site's palette. */
.form-block input[type="text"], .form-block input[type="email"], .form-block input[type="tel"],
.form-block input[type="password"], .form-block select,
.calc-modal__content input[type="text"], .calc-modal__content input[type="email"],
.calc-modal__content input[type="tel"], .calc-modal__content input[type="password"],
.calc-modal__content select {
  background: #0C0F0C;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}
.form-block input::placeholder, .calc-modal__content input::placeholder { color: var(--muted); }
.form-block input:focus, .calc-modal__content input:focus { outline: none; border-color: currentColor; }
.form-block .iti__country-list, .calc-modal__content .iti__country-list {
  background: #0C0F0C;
  color: var(--text);
  border: 1px solid #2A332A;
  border-radius: 6px;
  margin-top: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.form-block .iti__country:hover, .calc-modal__content .iti__country:hover,
.form-block .iti__highlight, .calc-modal__content .iti__highlight { background: rgba(255, 42, 42, 0.12); }
.form-block .iti__selected-flag, .calc-modal__content .iti__selected-flag { background: transparent; }
.form-block .iti__selected-dial-code, .calc-modal__content .iti__selected-dial-code { color: #777777; }

.tv-ticker-wrapper {
    padding-top: 0 !important;
    height: 58px !important;
}