/* ═══════════════════════════════════════════════════════════════════════
   IntelSan landing — set in the product's own design language
   (Porcelain Registry): porcelain ground, graphite ink, thin rules,
   petrol interaction, oxblood reserved for sanction/brand marks, amber
   for measures. Two worlds only: porcelain paper and the night-desk
   charcoal band — both are the app's own themes. No cards, no glow.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #f2f1ee;
  --surf: #fdfdfc;
  --surf2: #f6f5f2;
  --surf3: #eceae6;
  --border: #e3e1dc;
  --border2: #cbc8c1;
  --divider: rgba(40, 38, 34, .08);
  --text: #24262a;
  --muted: #5d6068;
  --muted2: #63666e;
  --accent: #116057;
  --accent-hover: #0c4f48;
  --accent-dim: rgba(17, 96, 87, .10);
  --sanction: #a2333c;
  --sanction-text: #9c2f38;
  --sanction-dim: rgba(162, 51, 60, .09);
  --amber: #92610b;
  --amber-dim: rgba(146, 97, 11, .09);
  /* night-desk band (the app's dark theme) */
  --nd-bg: #1b1b19;
  --nd-surf: #222221;
  --nd-text: #d6d4cd;
  --nd-muted: #9c9b94;
  --nd-border: #34342f;
  --nd-border2: #45443f;
  --nd-divider: rgba(214, 212, 205, .10);
  --nd-accent: #4aa094;
  --nd-sanction: #c25560;
  --nd-amber: #c69a55;
  --shadow: 0 8px 24px rgba(32, 31, 28, .13);
  --radius: 8px;
  --shell: 1180px;
  /* type scale — the app's token names, the landing's own steps.
     Nothing renders below --fs-xs; captions are --fs-xs, copy --fs-base,
     lead/inputs --fs-md, h3 --fs-lg; h1/h2 are fluid display sizes. */
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px;
  --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 22px;
  --fs-h2: clamp(24px, 3vw, 34px); --fs-h1: clamp(30px, 4.4vw, 46px);
  --font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'Consolas', Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shell { width: min(var(--shell), calc(100% - 48px)); margin: 0 auto; }

/* ── The two grounds ────────────────────────────────────────────────── */
.section-light { background: var(--bg); padding: 84px 0; }
.section-dark {
  background: var(--nd-bg);
  color: var(--nd-text);
  padding: 84px 0;
  position: relative;
}
section { padding: 84px 0; }
section.section-light, section.section-dark { padding: 84px 0; }

/* ── Type ───────────────────────────────────────────────────────────── */
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-lg); font-weight: 700; }
p { margin: 0; }
/* line breaks: headings balance, prose never strands a last word;
   /static/typo.js glues short words and numbers to their neighbours */
h1, h2, h3, .center-title { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
.center-title {
  text-align: left;
  margin: 0 0 40px;
  padding-bottom: 12px;
  border-bottom: 2px solid currentColor;
  font-size: var(--fs-h2);
}

/* uppercase eyebrow labels — the product's head-rule grammar */
.small-label, .label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted2);
  margin-bottom: 12px;
}
.label span { display: none; }               /* old glowing dot — gone */
.section-dark .small-label, .section-dark .label { color: var(--nd-muted); }

.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head h2 { padding-bottom: 12px; border-bottom: 2px solid var(--text); }
.section-dark .section-head h2 { border-bottom-color: var(--nd-text); }
.section-head p { margin-top: 14px; color: var(--muted); }
.section-dark .section-head p { color: var(--nd-muted); }

.section-copy h2 { padding-bottom: 12px; border-bottom: 2px solid currentColor; margin-bottom: 16px; }
.section-copy p { color: var(--muted); margin-top: 10px; max-width: 62ch; }
.section-dark .section-copy p { color: var(--nd-muted); }

/* ── Header ─────────────────────────────────────────────────────────── */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
  transition: box-shadow .22s ease;
}
.header.scrolled { box-shadow: 0 1px 3px rgba(32, 31, 28, .08); }
.header__inner { display: flex; align-items: center; gap: 22px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 34px; height: 34px; }
.brand__name {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: inset 0 -3px 0 var(--sanction);   /* the wordmark tick */
  padding-bottom: 1px;
}
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  padding: 6px 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  transition: color .18s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.link-btn { font-size: var(--fs-sm); font-weight: 700; color: var(--text); padding: 6px 8px; }
.link-btn:hover { color: var(--accent); }
/* Language switch — the app's own control: plain RO/EN labels, the active
   one framed by the tilted oxblood dossier stamp (matches .lbtn in the app). */
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-switch button {
  position: relative;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .3px;
  color: var(--muted); padding: 4px 7px; line-height: 1.2;
  transition: color .18s ease;
}
.lang-switch button:hover:not(.active) { color: var(--text); }
.lang-switch button.active { color: var(--text); font-weight: 700; }
.lang-switch button.active::after {
  content: ""; position: absolute; inset: 1px 0;
  border: 1.5px solid var(--sanction);
  transform: rotate(-2.5deg);
  pointer-events: none;
}
.burger { display: none; background: none; border: 0; padding: 8px; }
.burger span { display: block; width: 18px; height: 2px; background: var(--text); margin: 4px 0; }

/* ── Buttons — the app's button system ─────────────────────────────── */
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 600;
  transition: background .18s ease, border-color .18s ease;
}
.primary-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  background: none;
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
  transition: color .18s ease, border-color .18s ease;
}
.outline-btn:hover { border-color: var(--accent); color: var(--accent); }
.outline-btn--small { height: 32px; padding: 0 14px; font-size: var(--fs-sm); }
.dark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  background: none;
  border: 1px solid var(--nd-border2);
  border-radius: 6px;
  color: var(--nd-text);
  font-size: var(--fs-base);
  font-weight: 600;
  transition: color .18s ease, border-color .18s ease;
}
.dark-btn:hover { border-color: var(--nd-accent); color: var(--nd-accent); }

/* ── Hero: typographic, on the night desk ──────────────────────────── */
.hero { padding: 140px 0 84px; }
/* .hero__radar — the sweep returns, see MOTION below */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: start; }
.hero__content h1 { padding-bottom: 14px; border-bottom: 2px solid var(--nd-text); }
.hero__lead { margin-top: 16px; color: var(--nd-muted); max-width: 58ch; }
.hero__buttons { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 36px;
  border-top: 2px solid var(--nd-text);
}
.hero__stats > div { padding: 12px 14px 14px; border-bottom: 1px solid var(--nd-divider); display: flex; flex-direction: column; gap: 4px; }
.hero__stats > div + div { border-left: 1px solid var(--nd-divider); }
.hero__stats strong { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.hero__stats > div > span { font-size: var(--fs-xs); color: var(--nd-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Demo panel: the app itself — ivory sheet, ink rules, QueryLine */
.app-card {
  background: var(--surf);
  color: var(--text);
  border: 1px solid var(--nd-border2);
  padding: 18px 20px 20px;
}
.app-card__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
.app-card__tabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  transition: color .18s ease, border-color .18s ease;
}
.app-card__tabs button:hover { color: var(--text); }
.app-card__tabs button.active { color: var(--text); border-bottom-color: var(--text); }
.search-line { display: flex; gap: 10px; align-items: flex-end; }
.search-line input {
  flex: 1;
  min-width: 0;
  padding: 9px 2px 8px;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--border2);
  border-radius: 0;
  color: var(--text);
  font-size: var(--fs-md);
}
.search-line input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }
.search-line button {
  height: 34px;
  padding: 0 16px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.search-line button:hover { background: var(--accent-hover); }
.result-head {
  margin: 18px 0 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted2);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--text);
}
.risk-result { padding-top: 4px; }
.risk-result__top { display: flex; align-items: center; gap: 12px; padding: 8px 0 10px; border-bottom: 1px solid var(--divider); }
.avatar { display: none; }                          /* decorative — gone */
.risk-result__top h3 { font-size: var(--fs-md); }
.risk-result__top p { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.risk-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--sanction-text);
  white-space: nowrap;
}
.risk-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.risk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.risk-grid > div { padding: 9px 10px 10px; border-bottom: 1px solid var(--divider); display: flex; flex-direction: column; gap: 2px; }
.risk-grid > div + div { border-left: 1px solid var(--divider); }
.risk-grid span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); }
.risk-grid strong { font-size: var(--fs-sm); font-weight: 600; }
.risk-table > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 2px; border-bottom: 1px solid var(--divider); font-size: var(--fs-sm); }
.risk-table span { color: var(--muted); }
.risk-table b { font-weight: 600; text-align: right; }
.result-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.result-actions-link { color: var(--accent); font-size: var(--fs-sm); font-weight: 600; }
.result-actions-link:hover { color: var(--accent-hover); }
.result-actions button {
  background: none;
  border: 1px solid var(--border2);
  border-radius: 6px;
  height: 30px;
  padding: 0 12px;
  font-size: var(--fs-sm);
  color: var(--text);
}
.result-actions button:hover { border-color: var(--accent); color: var(--accent); }

/* ── Compliance split ───────────────────────────────────────────────── */
.compliance__grid, .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
.legal-links { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.legal-links a { color: var(--accent); font-size: var(--fs-sm); font-weight: 600; }
.legal-links a:hover { text-decoration: underline; }
.shield-card { border-top: 2px solid var(--text); padding-top: 16px; }
.shield-card__mark {
  display: inline-block;
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 10px;
  margin-bottom: 12px;
}
.shield-card__mark::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--sanction);
  transform: rotate(-2.5deg);              /* the stamp motif */
  pointer-events: none;
}
.shield-card h3 { margin-bottom: 10px; }
.shield-card ul { margin: 0; padding: 0; list-style: none; }
.shield-card li { padding: 8px 0; border-bottom: 1px solid var(--divider); color: var(--muted); font-size: var(--fs-base); }

/* ── Capabilities / info cards → catalog entries ────────────────────── */
.capabilities { background: var(--bg); }
.capabilities__grid, .check-grid, .audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
}
.audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.capability, .info-card { border-top: 2px solid var(--text); padding-top: 14px; }
.capability__icon { display: flex; gap: 8px; color: var(--muted2); font-size: var(--fs-xl); margin-bottom: 10px; }
.capability h3, .info-card h3 { margin-bottom: 6px; }
.capability p, .info-card p { color: var(--muted); font-size: var(--fs-base); }

/* ── Automation band ────────────────────────────────────────────────── */
.benefit-list { display: flex; flex-direction: column; }
.benefit-list > div {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--nd-divider);
  font-size: var(--fs-md);
}
.benefit-list b { font-variant-numeric: tabular-nums; color: var(--nd-muted); font-weight: 600; }

/* ── Workflow steps ─────────────────────────────────────────────────── */
.workflow__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px; }
.workflow-step { border-top: 2px solid var(--nd-text); padding-top: 14px; position: relative; }
.workflow-step__icon { color: var(--nd-muted); font-size: var(--fs-xl); margin-bottom: 10px; }
.step-index {
  position: absolute;
  top: 14px;
  right: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--nd-muted);
  font-variant-numeric: tabular-nums;
}
.workflow-step h3 { margin-bottom: 6px; }
.workflow-step p { color: var(--nd-muted); font-size: var(--fs-base); }

/* ── Report specimen: a filed document, with dot leaders ────────────── */
.product-deep .split { align-items: center; }
.check-list { margin: 16px 0 0; padding: 0; list-style: none; }
.check-list li { padding: 8px 0; border-bottom: 1px solid var(--divider); color: var(--muted); font-size: var(--fs-base); }
.report-card { background: var(--surf); border: 1px solid var(--border2); padding: 20px 22px; }
.report-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--text);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted2);
}
.report-card__header b { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text); letter-spacing: 0; text-transform: none; }
.report-status {
  display: inline-block;
  position: relative;
  margin: 16px 0 10px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--sanction-text);
}
.report-status::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--sanction);
  transform: rotate(-2deg);                /* stamped on the file */
  pointer-events: none;
}
.report-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 2px; border-bottom: 1px solid var(--divider); font-size: var(--fs-base); }
.report-lines span { color: var(--muted); }
.report-lines b { font-weight: 600; }
.mini-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mini-sources span {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  background: var(--surf3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
}

/* ── API band ───────────────────────────────────────────────────────── */
.api-grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 56px; align-items: center; }
.api-window { background: var(--nd-surf); border: 1px solid var(--nd-border2); }
.api-window__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--nd-border);
  font-size: var(--fs-xs);
  color: var(--nd-muted);
}
.api-window__bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--nd-border2); }
.api-window__bar b { margin-left: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.api-window pre { margin: 0; padding: 16px 18px; overflow-x: auto; }
.api-window code { font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.6; color: var(--nd-text); }
.feature-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 22px; }
.feature-strip span {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--nd-muted);
  border: 1px solid var(--nd-border2);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ── Pricing: three columns of the same ledger ──────────────────────── */
.pricing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; }
.price-card { border-top: 2px solid var(--text); padding-top: 16px; position: relative; }
.price-card h3 { display: inline-block; position: relative; padding: 2px 9px; margin-left: -9px; }
.price-card--featured h3::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--sanction);
  transform: rotate(-2.5deg);              /* the chosen plan is stamped */
  pointer-events: none;
}
.popular {
  position: absolute;
  top: 16px;
  right: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted2);
}
.price { margin: 10px 0 8px; font-size: var(--fs-md); font-weight: 600; }
.price--custom span { color: var(--muted); font-weight: 600; }
.price-card p { color: var(--muted); font-size: var(--fs-base); }
.price-card ul { margin: 12px 0 18px; padding: 0; list-style: none; }
/* Cascade across the three cards: name, sub-line, blurb, button and up to
   nine feature rows share tracks (subgrid), so a feature that carries over
   sits at the same height in every column; each tier's extras follow below. */
.pricing__grid { grid-template-rows: auto auto auto auto repeat(14, auto); row-gap: 0; }
.price-card { display: grid; grid-template-rows: subgrid; grid-row: span 18; align-content: start; }
.price-card h3 { justify-self: start; }
.price-card .price { margin: 8px 0 6px; }
.price-card > p { margin: 0 0 14px; }
.price-card ul { display: contents; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--divider); font-size: var(--fs-base); color: var(--text); line-height: 1.4; }
.price-card li .pi { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: var(--muted2); }
/* Group headings — the example's muted category labels above their items. */
.price-card li.grp { padding: 16px 0 4px; border-bottom: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--muted2); }
.price-card li.grp:first-child { padding-top: 6px; }
.price-card .outline-btn, .price-card .primary-btn { margin: 0 0 12px; }
@media (max-width: 1040px) {
  /* Stacked cards: each keeps its own rows, no shared tracks to align to. */
  .pricing__grid { grid-template-rows: none; row-gap: 40px; }
  .price-card { grid-template-rows: none; grid-row: auto; }
}
.price-card .outline-btn, .price-card .primary-btn { width: 100%; }
/* Language switch — the app's own control: plain RO/EN labels, the active
   one framed by the tilted oxblood dossier stamp (matches .lbtn in the app). */
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-switch button {
  position: relative;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .3px;
  color: var(--muted); padding: 4px 7px; line-height: 1.2;
  transition: color .18s ease;
}
.lang-switch button:hover:not(.active) { color: var(--text); }
.lang-switch button.active { color: var(--text); font-weight: 700; }
.lang-switch button.active::after {
  content: ""; position: absolute; inset: 1px 0;
  border: 1.5px solid var(--sanction);
  transform: rotate(-2.5deg);
  pointer-events: none;
}
.burger { display: none; background: none; border: 0; padding: 8px; }
.burger span { display: block; width: 18px; height: 2px; background: var(--text); margin: 4px 0; }

/* ── Sources ────────────────────────────────────────────────────────── */
.sources__lead { max-width: 68ch; color: var(--muted); margin-bottom: 32px; }
.source-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px; }
.source-card { margin: 0; border-top: 1px solid var(--border2); padding-top: 14px; }
.source-card img { width: 100%; max-width: 190px; height: auto; filter: grayscale(1); opacity: .78; transition: filter .18s ease, opacity .18s ease; }
.source-card:hover img { filter: none; opacity: 1; }
.source-card figcaption { margin-top: 8px; font-size: var(--fs-xs); color: var(--muted2); text-transform: uppercase; letter-spacing: .04em; }
.sources__note { margin-top: 30px; font-size: var(--fs-xs); color: var(--muted2); max-width: 78ch; }

/* ── FAQ: a ruled questionnaire ─────────────────────────────────────── */
.faq-list { max-width: 820px; }
.faq-list details { border-bottom: 1px solid var(--divider); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 2px;
  font-size: var(--fs-md);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--muted2); font-weight: 400; font-size: var(--fs-lg); }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details p { padding: 0 2px 16px; color: var(--muted); max-width: 72ch; }

/* ── Final CTA ──────────────────────────────────────────────────────── */
.final-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.final-cta h2 { padding-bottom: 12px; border-bottom: 2px solid var(--nd-text); margin-bottom: 14px; }
.final-cta p { color: var(--nd-muted); max-width: 62ch; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer { background: var(--bg); border-top: 1px solid var(--border2); padding: 40px 0 48px; }
.footer__inner { display: flex; flex-direction: column; gap: 12px; }
.footer__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--fs-lg); }
.footer__brand img { width: 30px; height: 30px; }
.footer__inner p { color: var(--muted); max-width: 70ch; font-size: var(--fs-base); }
.footer__inner > span { color: var(--muted2); font-size: var(--fs-xs); }

/* ── Modal + lead form ──────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; display: none; z-index: 200; }
.modal.open { display: block; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(32, 31, 28, .45); }
.modal__panel {
  position: relative;
  z-index: 1;
  width: min(480px, calc(100% - 32px));
  margin: 7vh auto 0;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--surf);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 26px 28px 28px;
}
.modal__panel h2 { font-size: var(--fs-lg); padding-bottom: 10px; border-bottom: 2px solid var(--text); margin-bottom: 10px; }
.modal__panel > p { color: var(--muted); font-size: var(--fs-base); margin-bottom: 16px; }
.modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 0;
  font-size: var(--fs-xl);
  color: var(--muted);
  line-height: 1;
}
.modal__close:hover { color: var(--text); }
.lead-form { display: flex; flex-direction: column; gap: 12px; }
.lead-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted2);
}
.lead-form input, .lead-form textarea {
  padding: 9px 12px;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.lead-form input:focus, .lead-form textarea:focus { outline: none; border-color: var(--accent); }
.lead-form small { color: var(--muted2); font-size: var(--fs-xs); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* toast (created by script.js) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  translate: -50% 0;
  z-index: 300;
  background: var(--surf);
  border: 1px solid var(--border2);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 10px 18px;
  font-size: var(--fs-base);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════
   MOTION — the pre-redesign landing's movement, re-set in the registry's
   grammar. Same dynamics (the 8s sweep, the 7.5s CTA sweep, the pulsing
   contacts, the 18px/.7s reveals, the 2px/3px lifts), new materials:
   hairline ink rules instead of neon, a petrol beam instead of cyan glow,
   the oxblood contact for the sanctioned one. Tokens are the app's.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 340ms;
  --ease-out: cubic-bezier(.16, .72, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .85, .25);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --ease-settle: linear(0, 0.046 4.2%, 0.154 8.3%, 0.288 12.5%, 0.426 16.7%, 0.555 20.8%, 0.667 25%, 0.76 29.2%, 0.834 33.3%, 0.891 37.5%, 0.934 41.7%, 0.964 45.8%, 0.984 50%, 0.997 54.2%, 1.005 58.3%, 1.009 62.5%, 1.011 66.7%, 1.011 70.8%, 1.01 75%, 1.009 79.2%, 1.007 83.3%, 1.006 87.5%, 1.004 91.7%, 1.003 95.8%, 1);
  --ease-spring: linear(0, 0.061 4.2%, 0.204 8.3%, 0.379 12.5%, 0.553 16.7%, 0.707 20.8%, 0.831 25%, 0.924 29.2%, 0.988 33.3%, 1.027 37.5%, 1.048 41.7%, 1.054 45.8%, 1.052 50%, 1.045 54.2%, 1.035 58.3%, 1.026 62.5%, 1.017 66.7%, 1.01 70.8%, 1.005 75%, 1.001 79.2%, 0.999 83.3%, 0.998 87.5%, 0.997 91.7%, 0.997 95.8%, 1);
  /* radar materials */
  --rd-rule: rgba(214, 212, 205, .13);
  --rd-rule2: rgba(214, 212, 205, .22);
  --rd-beam: 74, 160, 148;            /* --nd-accent */
  --rd-risk: 194, 85, 96;             /* --nd-sanction */
}

/* ── Hero radar: the register's sweep over the night desk ─────────── */
.hero { overflow: hidden; isolation: isolate; }
.hero__grid { position: relative; z-index: 1; }
.hero__radar {
  position: absolute;
  right: clamp(-310px, -12vw, -150px);
  bottom: clamp(-260px, -16vw, -190px);
  width: clamp(440px, 52vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  border: 1px solid var(--rd-rule2);
  background:
    radial-gradient(circle at center, rgba(214, 212, 205, .75) 0 2px, transparent 3px),
    linear-gradient(var(--rd-rule2), var(--rd-rule2)) center / 1px 100% no-repeat,
    linear-gradient(90deg, var(--rd-rule2), var(--rd-rule2)) center / 100% 1px no-repeat,
    radial-gradient(circle, transparent 0 18%, var(--rd-rule) 18.2% 18.6%, transparent 18.8%),
    radial-gradient(circle, transparent 0 36%, var(--rd-rule) 36.2% 36.6%, transparent 36.8%),
    radial-gradient(circle, transparent 0 54%, var(--rd-rule) 54.2% 54.6%, transparent 54.8%),
    radial-gradient(circle, transparent 0 72%, var(--rd-rule) 72.2% 72.6%, transparent 72.8%),
    radial-gradient(circle at center, rgba(var(--rd-beam), .06), transparent 70%);
  mask-image: radial-gradient(circle at center, #000 0 66%, rgba(0, 0, 0, .7) 76%, transparent 86%);
}
.hero__radar-sweep {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from -90deg,
    transparent 0deg 278deg,
    rgba(var(--rd-beam), .03) 306deg,
    rgba(var(--rd-beam), .16) 334deg,
    rgba(var(--rd-beam), .58) 358deg,
    transparent 360deg
  );
  animation: heroRadarRotate 8s linear infinite;
  z-index: 1;
}
.hero__radar-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nd-text);
  opacity: 0;
  z-index: 2;
  animation: heroRadarDot 8s linear infinite;
}
.hero__radar-dot::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1px solid rgba(214, 212, 205, .38);
  transform: scale(.45);
  opacity: 0;
  animation: heroRadarPulse 8s linear infinite;
}
.hero__radar-dot--risk { background: var(--nd-sanction); }
.hero__radar-dot--risk::before { border-color: rgba(var(--rd-risk), .55); }
/* the contacts light as the beam passes them (the beam starts at -90deg = 12 o'clock) */
.hero__radar-dot--1 { left: 28%; top: 31%; animation-delay: .9s; }
.hero__radar-dot--1::before { animation-delay: .9s; }
.hero__radar-dot--2 { left: 64%; top: 24%; animation-delay: 2.35s; }
.hero__radar-dot--2::before { animation-delay: 2.35s; }
.hero__radar-dot--3 { left: 73%; top: 61%; animation-delay: 4.1s; }
.hero__radar-dot--3::before { animation-delay: 4.1s; }
.hero__radar-dot--4 { left: 39%; top: 68%; animation-delay: 5.85s; }
.hero__radar-dot--4::before { animation-delay: 5.85s; }

@keyframes heroRadarRotate { to { transform: rotate(360deg); } }
@keyframes heroRadarDot {
  0%, 11%, 100% { opacity: 0; transform: scale(.58); }
  15% { opacity: .92; transform: scale(1.25); }
  25% { opacity: .7; transform: scale(1); }
  42% { opacity: 0; transform: scale(.55); }
}
@keyframes heroRadarPulse {
  0%, 11%, 100% { opacity: 0; transform: scale(.45); }
  15% { opacity: .7; transform: scale(.72); }
  34% { opacity: 0; transform: scale(1.9); }
}

/* ── Final CTA radar: the same sweep closing the page ─────────────── */
.final-cta { overflow: hidden; isolation: isolate; }
.final-cta__inner { position: relative; z-index: 1; }
.final-cta::after {
  content: "";
  position: absolute;
  right: -190px;
  bottom: -230px;
  width: 660px;
  height: 660px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  border: 1px solid var(--rd-rule2);
  background:
    radial-gradient(circle at center, rgba(214, 212, 205, .75) 0 2px, transparent 3px),
    linear-gradient(var(--rd-rule2), var(--rd-rule2)) center / 1px 100% no-repeat,
    linear-gradient(90deg, var(--rd-rule2), var(--rd-rule2)) center / 100% 1px no-repeat,
    repeating-radial-gradient(circle at center, transparent 0 86px, var(--rd-rule) 87px 88px, transparent 89px 172px),
    conic-gradient(from 0deg, transparent 0deg 270deg, rgba(var(--rd-beam), .05) 302deg, rgba(var(--rd-beam), .3) 340deg, rgba(var(--rd-beam), .6) 358deg, transparent 360deg);
  animation: radarRotate 7.5s linear infinite;
  mask-image: radial-gradient(circle at center, #000 0 70%, transparent 78%);
}
@keyframes radarRotate { to { transform: rotate(360deg); } }

/* ── Reveal: the old 18px / .7s rise, decelerating; siblings cascade ─ */
.reveal { transition: opacity .7s var(--ease-out) var(--rd, 0ms), transform .7s var(--ease-out) var(--rd, 0ms); }
/* hidden only once the inline head snippet has proven scripts run (html.js);
   a blocked or slow script can then never leave the page blank */
.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(18px); }

/* ── Lifts: buttons rise 2px, source logos 3px — as before ────────── */
.primary-btn, .outline-btn, .dark-btn, .search-line button, .result-actions button {
  transition: background var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std),
              border-color var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
.primary-btn:hover, .outline-btn:hover, .dark-btn:hover { transform: translateY(-2px); }
.primary-btn:active, .outline-btn:active, .dark-btn:active { transform: translateY(0); transition-duration: 60ms; }
.source-card { transition: transform .18s var(--ease-std), border-color .18s var(--ease-std); }
.source-card:hover { transform: translateY(-3px); border-top-color: var(--text); }
.nav a, .link-btn, .legal-links a, .result-actions-link { transition: color var(--dur-1) var(--ease-std); }
.capability__icon, .workflow-step__icon { transition: color var(--dur-2) var(--ease-std); }
.capability:hover .capability__icon { color: var(--accent); }
.workflow-step:hover .workflow-step__icon { color: var(--nd-accent); }

/* ── Header: the rule under the brand thickens once the page scrolls ─ */
.header { transition: box-shadow var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std); }
.header.scrolled { border-bottom-color: var(--border2); }

/* ── Demo panel: the tab mark travels (anchor positioning) ────────── */
.app-card__tabs { position: relative; }
@supports (anchor-name: --s14) {
  .app-card__tabs button.active { anchor-name: --tab-on; border-bottom-color: transparent; }
  .app-card__tabs::after {
    content: "";
    position: absolute;
    top: calc(anchor(--tab-on bottom, 100%) - 2px);   /* follows the row when tabs wrap */
    height: 2px;
    background: var(--text);
    left: anchor(--tab-on left, 0px);
    width: anchor-size(--tab-on width, 0px);
    transition: left var(--dur-3) var(--ease-spring), top var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out);
  }
}

/* ── Scene change: the language ─────────────────────────────────────
   The same grammar as the app's sceneTransition(): the page beneath the
   chrome fades out and the new text arrives with a 6px settle; the fixed
   header is its own snapshot, so it holds still and only its labels
   cross-fade; the oxblood stamp on RO/EN is its own snapshot too, so it
   travels to the other label with the spring instead of blinking over. */
::view-transition-old(root) { animation: vt-leave var(--dur-2) var(--ease-in) both; }
::view-transition-new(root) { animation: vt-arrive var(--dur-3) var(--ease-out) both; }
@keyframes vt-leave { to { opacity: 0; } }
@keyframes vt-arrive { from { opacity: 0; translate: 0 6px; } }
.header { view-transition-name: landing-header; }
::view-transition-group(landing-header) { animation-duration: 0s; }
.lang-switch button.active::after { view-transition-name: lang-stamp; }
::view-transition-group(lang-stamp) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-spring); }
::view-transition-old(lang-stamp) { animation: none; opacity: 0; }
::view-transition-new(lang-stamp) { animation: none; }
/* The demo panel re-renders in the new language inside the scene change —
   its own row-by-row write-in would double the arrival. */
html:active-view-transition .risk-result.is-writing * { animation: none !important; }

/* ── Demo panel: the result writes itself in, row by row ──────────── */
.risk-result.is-writing .risk-result__top,
.risk-result.is-writing .risk-grid > div,
.risk-result.is-writing .risk-table > div,
.risk-result.is-writing .result-actions {
  animation: write-in var(--dur-3) var(--ease-out) both;
  animation-delay: calc(var(--wi, 0) * 45ms);
}
.risk-result.is-writing .risk-grid > div:nth-child(1) { --wi: 1; }
.risk-result.is-writing .risk-grid > div:nth-child(2) { --wi: 2; }
.risk-result.is-writing .risk-grid > div:nth-child(3) { --wi: 3; }
.risk-result.is-writing .risk-grid > div:nth-child(4) { --wi: 4; }
.risk-result.is-writing .risk-table > div:nth-child(1) { --wi: 5; }
.risk-result.is-writing .risk-table > div:nth-child(2) { --wi: 6; }
.risk-result.is-writing .risk-table > div:nth-child(3) { --wi: 7; }
.risk-result.is-writing .risk-table > div:nth-child(4) { --wi: 8; }
.risk-result.is-writing .result-actions { --wi: 9; }
.risk-result.is-writing .risk-pill::before { animation: stamp-press var(--dur-3) var(--ease-spring) both 200ms; }
@keyframes write-in { from { clip-path: inset(-6px 100% -6px -6px); } to { clip-path: inset(-6px); } }
@keyframes stamp-press { from { transform: scale(1.8); opacity: .4; } to { transform: none; opacity: 1; } }

/* the Verifică button, while the check "runs": three lines are written */
.search-line button { position: relative; }
.search-line button.is-busy { color: transparent; pointer-events: none; }
.search-line button.is-busy::before {
  --lw: 2px;
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 12px;
  translate: -50% -50%;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-position: 0 0, 0 5px, 0 10px;
  background-repeat: no-repeat;
  background-size: 0 var(--lw), 0 var(--lw), 0 var(--lw);
  animation: ledger-write 1.9s linear infinite;
}
@keyframes ledger-write {
  0%   { background-size: 0 var(--lw), 0 var(--lw), 0 var(--lw); opacity: 1; animation-timing-function: var(--ease-out); }
  24%  { background-size: 100% var(--lw), 0 var(--lw), 0 var(--lw); animation-timing-function: var(--ease-out); }
  46%  { background-size: 100% var(--lw), 68% var(--lw), 0 var(--lw); animation-timing-function: var(--ease-out); }
  68%  { background-size: 100% var(--lw), 68% var(--lw), 84% var(--lw); opacity: 1; }
  84%  { background-size: 100% var(--lw), 68% var(--lw), 84% var(--lw); opacity: 1; animation-timing-function: var(--ease-in); }
  94%  { background-size: 100% var(--lw), 68% var(--lw), 84% var(--lw); opacity: 0; }
  100% { background-size: 0 var(--lw), 0 var(--lw), 0 var(--lw); opacity: 0; }
}

/* ── Hero ledger: the figures roll in on drums, like the app's inventory ── */
.odo { display: inline-block; font-variant-numeric: tabular-nums; }
.odo-v { display: inline-flex; height: 1.2em; line-height: 1.2; overflow: hidden; vertical-align: top; }
.odo-d, .odo-s { display: block; height: 1.2em; }
.odo-r { display: block; translate: 0 0; transition: translate calc(620ms + var(--k, 0) * 90ms) var(--ease-settle) calc(var(--cd, 0ms) + 80ms); }
.odo-r i { display: block; height: 1.2em; font-style: normal; }
.hero__stats.is-rolled .odo-r { translate: 0 calc((var(--n) + 1) * -1.2em); }
.hero__stats > div { position: relative; }
.hero__stats > div::after {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--nd-accent); transform-origin: left; transform: scaleX(0);
}
.hero__stats.is-rolled > div::after {
  transform: scaleX(1);
  opacity: 0;
  transition: transform 900ms var(--ease-out) var(--cd, 0ms), opacity 400ms var(--ease-in) calc(var(--cd, 0ms) + 900ms);
}

/* ── Modal and toast: in from above / from below, out the same way ─── */
.modal { opacity: 1; transition: display var(--dur-3) allow-discrete, opacity var(--dur-2) var(--ease-std); }
.modal:not(.open) { opacity: 0; }
.modal__panel { translate: none; transition: translate var(--dur-3) var(--ease-out); }
.modal:not(.open) .modal__panel { translate: 0 -14px; transition-duration: var(--dur-2); transition-timing-function: var(--ease-in); }
@starting-style {
  .modal.open { opacity: 0; }
  .modal.open .modal__panel { translate: 0 -14px; }
}
.toast { opacity: 1; transition: display var(--dur-2) allow-discrete, opacity var(--dur-2) var(--ease-out), translate var(--dur-3) var(--ease-out); }
.toast[hidden] { display: none; opacity: 0; translate: -50% 8px; transition-duration: var(--dur-2); transition-timing-function: linear, var(--ease-in), var(--ease-in); }
@starting-style { .toast { opacity: 0; translate: -50% 8px; } }

/* ── Burger: three lines fold into a cross ─────────────────────────── */
.burger span { transition: transform var(--dur-2) var(--ease-std), opacity var(--dur-2) var(--ease-std); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .hero__grid, .compliance__grid, .split, .api-grid { grid-template-columns: 1fr; gap: 44px; }
  .capabilities__grid, .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing__grid { grid-template-columns: 1fr; }
  .source-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .final-cta__inner { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border2);
    flex-direction: column;
    padding: 8px 24px 14px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 10px 0; border-bottom: 1px solid var(--divider); }
  .burger { display: block; }
  .hero { padding-top: 110px; }
  .hero__radar { width: clamp(320px, 92vw, 520px); right: -34vw; bottom: -46vw; opacity: .7; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__stats > div + div { border-left: 0; }
  .hero__stats > div:nth-child(2n) { border-left: 1px solid var(--nd-divider); }
  .risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .risk-grid > div + div { border-left: 0; }
  .risk-grid > div:nth-child(2n) { border-left: 1px solid var(--divider); }
}
@media (max-width: 620px) {
  /* The lang toggle needs the room: the header keeps Sign in + RO/EN + burger,
     the demo CTA stays available in the hero and the pricing cards. */
  .header__actions { gap: 6px; }
  .header__actions .outline-btn--small { display: none; }
  .lang-switch button { padding: 4px 6px; }
  .capabilities__grid, .check-grid, .audience-grid, .workflow__grid, .source-logos { grid-template-columns: 1fr; }
  .section-light, .section-dark, section { padding: 60px 0; }
  .hero { padding: 100px 0 60px; }
  .final-cta::after { width: 420px; height: 420px; right: -170px; bottom: -210px; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal:not(.is-visible) { opacity: 1; transform: none; }
  .hero__radar-sweep, .hero__radar-dot, .hero__radar-dot::before, .final-cta::after { animation: none; }
  .hero__radar-dot { opacity: .7; transform: none; }
  .hero__radar-dot::before { opacity: .4; transform: scale(1); }
  .odo-r { transition: none; }
  .hero__stats > div::after { display: none; }
  .search-line button.is-busy { color: inherit; }
  .search-line button.is-busy::before { display: none; }
}