/* MAVORS public site — shared styles
   Design language: "Flow / Поток" — a light, warm surface (#f5f6f0) with a
   deep green ink, one green accent and large Montserrat display type. The
   shared shell (header, footer, storage notice, legal pages) uses the same
   tokens as the landing so the whole site reads as one product.
   Landing-only rules are scoped under `body.landing` so the legal pages keep
   the plain, high-contrast reading layout they need.
   No external fonts/CDNs/images — every visual is CSS or inline SVG. */

/* ---------- Fonts (self-hosted, variable, Latin + Cyrillic) ---------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat/Montserrat-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ----------
   The six values below are the owner's explicit token table for this design
   (paper, ink, accent, mint, line, muted); everything else is derived. */
:root {
  --canvas: #f5f6f0;         /* paper */
  --paper: #ffffff;
  --ink: #122e29;
  --muted: #5e736a;
  --line: #d7dfd6;
  --line-strong: #c7d3c8;
  --mint: #d8f7e8;

  /* Deep-green surfaces (the analytics section, the closing band) */
  --deep: #123c30;
  --deep-2: #143d30;
  --ink-on-deep: #e9f5e9;
  --muted-on-deep: #b0cebd;
  --line-on-deep: rgba(255, 255, 255, 0.16);

  /* Brand accent — mandatory green per the design system */
  --accent: #0ca678;
  --accent-2: #20c997;
  --accent-ink: #076e50;
  --grad: linear-gradient(135deg, #0ca678, #20c997);

  /* Semantic. "Draft" is a caution, never a fault: no red on this site. */
  --ok-soft: rgba(12, 166, 120, 0.13);
  --warn-ink: #7d5406;
  --warn-line: #ddc389;
  --warn-soft: rgba(184, 130, 11, 0.13);

  --shadow: 0 12px 34px rgba(16, 40, 32, 0.08);
  --shadow-lift: 0 25px 60px -35px rgba(18, 60, 48, 0.55);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --display: "Montserrat", ui-sans-serif, -apple-system, "Segoe UI", Arial, sans-serif;
  --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html {
  min-width: 280px;
  background: var(--canvas);
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--sans);
  font-optical-sizing: auto;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

img, svg { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5em;
  /* Long single-word Russian headings ("Политика конфиденциальности") are
     wider than a 390 px viewport; break them instead of scrolling the page. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.3rem, 6vw, 4.6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--accent-ink); }
a:hover { color: var(--accent); }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.4em; }
strong { font-weight: 700; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: #b7f1d5; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #04241a;
  font-weight: 800;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

.container {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px);
}

/* ================================================================
   Shared shell — header, footer, storage notice.
   Used by the landing and by all 15 legal pages.
   ================================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(245, 246, 240, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 13px clamp(18px, 3vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.wordmark {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.wordmark:hover { color: var(--ink); }
.wordmark .mark {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--grad);
}
.wordmark .mark svg { width: 15px; height: 15px; display: block; }

.nav-toggle {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
}
.nav-toggle svg { flex: none; width: 20px; height: 20px; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.86rem;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { background: rgba(12, 166, 120, 0.09); color: var(--accent-ink); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  background: rgba(18, 46, 41, 0.06);
}
.lang-switch {
  flex: none;
  display: flex;
  gap: 4px;
  margin-left: 6px;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  text-align: center;
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.lang-switch a:hover { border-color: var(--accent); color: var(--accent-ink); }
.lang-switch a[aria-current="true"] {
  color: #04241a;
  background: var(--accent-2);
  border-color: var(--accent-2);
}

/* The header CTA only exists on the landing pages. */
.header-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.header-cta:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }

@media (max-width: 900px) {
  .header-cta { display: none; }
}

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    order: 4;
    width: 100%;
    flex-direction: column;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
  }
  .site-nav a { padding: 12px 13px; min-height: 44px; display: flex; align-items: center; }
  body.nav-open .site-nav { max-height: 360px; }
}

/* One compact header row on a phone: wordmark, language switch, burger.
   The DOM order stays wordmark → burger → nav → language switch (which reads
   correctly for assistive technology); only flex `order` and the column gap
   change, and the collapsible nav keeps its own full-width line below. At the
   inherited 18 px column gap and 44 px language buttons the row measured
   356 px against 354 px of usable width, so it wrapped onto a second row —
   the tighter gap and 40 px language buttons bring it to 318 px. Every hit
   target in the row is still at least 44 px tall. */
@media (max-width: 720px) {
  .header-inner { gap: 10px 8px; padding-left: 18px; padding-right: 18px; }
  .wordmark { order: 1; margin-right: auto; font-size: 1.28rem; }
  .lang-switch { order: 2; margin-left: 0; gap: 3px; }
  .lang-switch a { min-width: 40px; padding: 6px 7px; }
  .nav-toggle { order: 3; }
}

main { display: block; position: relative; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--canvas);
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.footer-inner {
  position: relative;
  z-index: 1;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 34px clamp(18px, 3vw, 48px) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.footer-brand .mark {
  width: 24px; height: 24px; flex: none;
  border-radius: 6px;
  display: grid; place-items: center;
  background: var(--grad);
}
.footer-brand .mark svg { width: 14px; height: 14px; }
.footer-brand-text span {
  display: block;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  color: var(--muted);
  font-size: 0.84rem;
  text-decoration: none;
  font-weight: 600;
}
.footer-nav a:hover { color: var(--accent-ink); }
.footer-contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-ink);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}
.copyright {
  width: 100%;
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.76rem;
}

/* ---------- Legal pages ---------- */
.container.legal-page { padding-top: clamp(34px, 5vw, 56px); padding-bottom: 76px; }
.legal-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 28px;
  padding: 14px 18px;
  border: 1px solid var(--warn-line);
  border-radius: var(--r-md);
  color: var(--warn-ink);
  background: var(--warn-soft);
  font-weight: 700;
}
.legal-banner .mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: var(--warn-ink);
  font-size: 0.8rem;
}
.legal-intro {
  max-width: 72ch;
  color: var(--muted);
  font-size: 1.02rem;
}
.legal-body section {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.legal-body section:first-of-type { border-top: none; padding-top: 6px; }
.legal-body h2 { font-family: var(--sans); font-weight: 800; font-size: 1.2rem; margin-bottom: 10px; color: var(--ink); }
.legal-body p, .legal-body li { color: var(--ink); font-size: 0.97rem; }
.legal-body dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0; }
.legal-body dt { font-weight: 700; color: var(--ink); }
.legal-body dd { margin: 0; }
.token { padding: 1px 6px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn-ink); font-family: var(--mono); font-size: 0.88em; }

/* ---------- Storage notice ---------- */
.cookie-notice {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  max-width: 560px;
  margin: 0 auto;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.cookie-notice p {
  margin: 0;
  flex: 1 1 220px;
  font-size: 0.84rem;
  color: var(--ink);
}
.cookie-notice button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: #04241a;
  background: var(--grad);
  font-weight: 800;
  font-size: 0.85rem;
}
.cookie-notice button:hover { filter: brightness(1.06); }
.cookie-notice[hidden] { display: none; }

/* ================================================================
   LANDING — everything below is scoped to `body.landing`, so the legal
   pages are never touched by it.
   ================================================================ */

body.landing { font-size: 15px; line-height: 1.6; }

.landing .wrap {
  width: min(1320px, calc(100% - 96px));
  margin-inline: auto;
}
.landing .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0;
}
.landing .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex: none;
  box-shadow: 0 0 0 5px rgba(12, 166, 120, 0.07);
}
.landing .number { flex: none; white-space: nowrap; font-size: 11px; color: var(--accent); font-weight: 700; }

.landing .button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 13px 23px;
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.landing .button:hover { transform: translateY(-2px); background: #1c483c; color: #fff; }
.landing .button.light {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.landing .button.light:hover { background: transparent; border-color: var(--accent); color: var(--ink); }
.landing .arrow { font-size: 21px; line-height: 1; }

/* ---- Hero ---- */
.landing .hero { padding: 58px 0 0; position: relative; }
.landing .hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(58px, 6.95vw, 104px);
  line-height: 1.01;
  letter-spacing: -0.075em;
  margin: 31px 0 26px;
  max-width: 1170px;
}
.landing .hero h1 em { font-style: normal; color: var(--accent); }
.landing .hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 45px;
}
.landing .hero-bottom p {
  font-size: 17px;
  line-height: 1.65;
  max-width: 530px;
  margin: 0;
  color: var(--muted);
}
.landing .actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ---- The scene ---- */
.landing .scene {
  position: relative;
  overflow: hidden;
  border: 1px solid #bacfc0;
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse at 55% 115%, #9de3ba 0, transparent 65%),
    linear-gradient(120deg, #e5ece0, #f3f6ed);
  padding: 27px 32px 0;
  box-shadow: 0 30px 60px -50px #244d39;
}
.landing .scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(49, 107, 69, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 107, 69, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(transparent, #000);
          mask-image: linear-gradient(transparent, #000);
  pointer-events: none;
}
.landing .scene-label {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #52675c;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.landing .scene-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 32px;
  align-items: center;
  min-height: 295px;
}
.landing .signal {
  background: rgba(255, 255, 255, 0.73);
  padding: 20px;
  border: 1px solid #fff;
  border-radius: var(--r-md);
  box-shadow: 0 13px 32px rgba(49, 81, 60, 0.05);
  transform: rotate(-4deg);
}
.landing .signal small { font-size: 10px; color: var(--muted); display: block; }
.landing .signal b { font-size: 15px; display: block; margin: 12px 0 6px; }
.landing .signal .line { height: 5px; background: #dce6df; border-radius: 5px; margin: 8px 0; width: 70%; }
.landing .ticket {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid #c4d7c9;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 25px 40px -20px rgba(37, 79, 60, 0.4);
}
.landing .ticket-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.landing .pill {
  font-size: 10px;
  background: #e1f7ec;
  color: #087652;
  border: 1px solid #b8e5cb;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.landing .ticket h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.04em;
  margin: 19px 0 5px;
  line-height: 1.25;
}
.landing .ticket p { font-size: 12px; color: var(--muted); margin: 0; }
.landing .ticket-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #e4eae4;
  font-size: 11px;
}
.landing .avatar {
  width: 31px;
  height: 31px;
  flex: none;
  border-radius: 50%;
  background: #e4efe7;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
}
.landing .receipt {
  transform: rotate(4deg);
  background: var(--deep-2);
  color: #fff;
  padding: 23px;
  border-radius: var(--r-md);
  box-shadow: 0 18px 35px rgba(34, 78, 58, 0.15);
}
.landing .receipt small { color: #a2c6b4; font-size: 10px; }
.landing .receipt strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.3;
  letter-spacing: -0.06em;
  display: block;
  margin: 10px 0;
}
.landing .receipt p { font-size: 11px; color: #bad4c6; margin: 0; }
.landing .receipt footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line-on-deep);
  margin-top: 18px;
  padding-top: 12px;
  font-size: 10px;
}

/* ---- The five stages ---- */
.landing .steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid #a5bdaa;
}
.landing .step {
  border: 0;
  border-top: 3px solid transparent;
  background: none;
  min-height: 64px;
  text-align: left;
  font-size: 12px;
  color: #567060;
  padding: 14px 8px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.landing .step span { font-size: 10px; opacity: 0.65; }
.landing .step.active { border-top-color: var(--accent); color: #164731; font-weight: 700; }
.landing .step:hover { background: rgba(255, 255, 255, 0.4); }
.landing .under-scene {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 10px;
  color: #6a7f71;
  margin-top: 13px;
}

/* ---- Industry strip ---- */
.landing .brand-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.landing .brand-strip strong {
  font-family: var(--display);
  font-size: 19px;
  color: #294c3d;
  letter-spacing: -0.06em;
}
.landing .brand-strip .sectors { display: flex; gap: 30px; }

/* ---- Section framing ---- */
.landing section.content { padding: 105px 0; }
.landing .section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 45px;
  margin: 20px 0 48px;
}
.landing h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(35px, 4.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.065em;
  margin: 0;
}
.landing h2 em { font-style: normal; color: var(--accent); }
.landing .section-heading p { max-width: 380px; color: var(--muted); font-size: 14px; margin: 0; }

/* ---- Tools workspace ---- */
.landing .workspace {
  display: grid;
  grid-template-columns: 0.8fr 1.6fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.landing .module-list { background: #eef1e9; padding: 12px; }
.landing .module-tab {
  display: flex;
  text-align: left;
  width: 100%;
  align-items: center;
  gap: 15px;
  border: 1px solid transparent;
  background: none;
  padding: 19px 16px;
  border-radius: 8px;
  font-size: 14px;
  min-height: 60px;
}
.landing .module-tab span:first-child { font-size: 10px; color: #84948a; flex: none; }
.landing .module-tab span:last-child { margin-left: auto; }
.landing .module-tab.active {
  border-color: var(--line-strong);
  background: #fff;
  box-shadow: 0 3px 7px rgba(41, 67, 46, 0.03);
}
.landing .module-tab.active span:last-child { color: var(--accent); }
.landing .module-detail { padding: 36px 40px; min-width: 0; }
.landing .module-detail h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.15;
  letter-spacing: -0.045em;
  margin: 12px 0;
}
.landing .module-panel > p { font-size: 14px; color: var(--muted); max-width: 56ch; }
.landing .mini-ui {
  border: 1px solid #dae4da;
  border-radius: 9px;
  margin-top: 24px;
  overflow: hidden;
  background: #f8faf6;
}
.landing .mini-head {
  padding: 13px 18px;
  border-bottom: 1px solid #dfe7dc;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.landing .mini-row {
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
  border-bottom: 1px solid #e3e9df;
}
.landing .mini-row:last-child { border-bottom: 0; }
.landing .mini-row small { display: block; color: #728173; font-size: 10px; }
.landing .mini-row b { font-weight: 500; }
.landing .mini-row > span:last-child { flex: none; text-align: right; }

/* ---- Three advantages ---- */
.landing .features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
  gap: 40px;
}
.landing .features article { border-top: 1px solid var(--line); padding-top: 20px; }
.landing .features h3 { font-size: 17px; font-weight: 500; margin: 14px 0 9px; letter-spacing: -0.02em; }
.landing .features p { font-size: 13px; color: var(--muted); margin: 0; }

/* ---- Analytics ---- */
.landing .insight {
  background: var(--deep);
  color: var(--ink-on-deep);
  position: relative;
  overflow: hidden;
}
.landing .insight::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(151, 209, 173, 0.1);
  border-radius: 50%;
  right: -200px;
  top: -200px;
  box-shadow: 0 0 0 80px rgba(151, 209, 173, 0.03), 0 0 0 160px rgba(151, 209, 173, 0.02);
}
.landing .insight .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
}
.landing .insight h2 { font-size: clamp(34px, 3.8vw, 54px); margin: 22px 0; color: var(--ink-on-deep); }
.landing .insight-lead { color: var(--muted-on-deep); font-size: 14px; max-width: 450px; }
.landing .insight .button.light {
  margin-top: 20px;
  color: #fff;
  border-color: #62957c;
}
.landing .insight .button.light:hover { color: #fff; border-color: var(--accent-2); }
.landing .analytics {
  background: #f3f6ee;
  color: var(--ink);
  border-radius: 12px;
  padding: 27px;
  box-shadow: 0 25px 60px rgba(6, 30, 39, 0.25);
  transform: rotate(-2deg);
}
.landing .analytics-head { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.landing .big-value {
  font-family: var(--display);
  font-weight: 500;
  font-size: 42px;
  letter-spacing: -0.07em;
  margin: 20px 0 0;
}
.landing .analytics .caption { font-size: 10px; color: var(--muted); margin: 0; }
.landing .bars {
  height: 125px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin: 18px 0 8px;
  border-bottom: 1px solid #c8d5c9;
}
.landing .bars i { flex: 1; background: #b2d9be; border-radius: 4px 4px 0 0; }
.landing .bars i:nth-last-child(-n + 3) { background: var(--accent); }
.landing .chart-labels { display: flex; justify-content: space-between; gap: 10px; color: #768879; font-size: 9px; }
.landing .insight-note {
  border-top: 1px solid #cddcce;
  margin-top: 23px;
  padding-top: 17px;
  font-size: 12px;
  line-height: 1.6;
}
.landing .insight-note strong { font-weight: 600; }
.landing .demo-note { font-size: 9px; color: #738373; margin: 16px 0 0; }

/* ---- Roadmap / AI ---- */
.landing .roadmap { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.landing .roadmap article {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 33px;
  background: #eef3e9;
}
.landing .roadmap article.future { background: transparent; border-style: dashed; }
.landing .roadmap h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 27px;
  letter-spacing: -0.05em;
  line-height: 1.2;
  margin: 21px 0 12px;
}
.landing .roadmap p { color: var(--muted); font-size: 14px; }
.landing .roadmap ul { padding: 0; list-style: none; margin: 24px 0 0; }
.landing .roadmap li {
  border-top: 1px solid var(--line);
  padding: 12px 0;
  margin: 0;
  font-size: 12px;
  display: flex;
  gap: 12px;
}
.landing .roadmap li::before { content: "\2197"; color: var(--accent); }
.landing .status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.landing .future .status { color: #697c6a; }
.landing .roadmap .fine-print { font-size: 11px; margin: 16px 0 0; }

/* SITE-3 — three readiness stages instead of two. What a visitor can have
   today carries the most items and the most weight, so the "available" card
   spans the full row and splits its list into two columns; the pilot and the
   in-development cards sit beneath it, in that order, so the page never reads
   as if the plan were the product. Each stage is legible without its label:
   filled dot = running, ring = under observation, dash = not started. */
.landing .roadmap article.now { grid-column: 1 / -1; }
.landing .roadmap article.now ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 33px; }
.landing .roadmap article.pilot { background: var(--warn-soft); border-color: var(--warn-line); }
.landing .pilot .status { color: var(--warn-ink); }
/* A caution, never a fault — the palette has no red on this site (see the
   token block at the top of this file). */
.landing .status .dot.ring {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--warn-ink), 0 0 0 5px var(--warn-soft);
}
.landing .status .dot.bar {
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: #8fa393;
  box-shadow: none;
}

/* ---- Foundation ---- */
.landing .foundation {
  border-top: 1px solid var(--line);
  padding: 36px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
}
.landing .foundation b { font-size: 13px; font-weight: 600; }
.landing .foundation p { font-size: 11px; color: var(--muted); margin: 7px 0 0; }

/* ---- FAQ ---- */
.landing .faq { padding: 55px 0 80px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 70px; }
.landing .faq h2 { font-size: 35px; }
.landing .faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.landing .faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  font-weight: 600;
  min-height: 28px;
  align-items: center;
}
.landing .faq summary::-webkit-details-marker { display: none; }
.landing .faq summary::after { content: "+"; color: var(--accent); font-size: 18px; flex: none; }
.landing .faq details[open] summary::after { content: "\2212"; }
.landing .faq details p { font-size: 13px; color: var(--muted); max-width: 62ch; margin: 12px 0 0; }

/* ---- Closing ---- */
.landing .closing { background: #cfedda; padding: 70px 0; position: relative; overflow: hidden; }
.landing .closing .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
}
.landing .closing h2 { font-size: clamp(35px, 4.4vw, 65px); margin-top: 20px; }
.landing .closing p { font-size: 13px; color: #4b705a; max-width: 400px; margin: 12px 0 0; }
.landing .closing::before {
  content: "M";
  position: absolute;
  font-family: var(--display);
  font-weight: 800;
  font-size: 400px;
  line-height: 0.8;
  color: rgba(21, 61, 41, 0.03);
  right: 3%;
  bottom: -70px;
  pointer-events: none;
}

/* ---- Reveal on scroll (opt-in, never leaves content invisible) ---- */
.landing .reveal { opacity: 1; transform: none; }
.js-motion .landing .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.js-motion .landing .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .landing .reveal { opacity: 1; transform: none; }
}

/* ---- Landing breakpoints ---- */
@media (min-width: 1500px) {
  .landing .hero h1 { font-size: 110px; }
}

@media (max-width: 1000px) {
  .landing .wrap { width: calc(100% - 48px); }
  .landing .hero-bottom { align-items: flex-start; }
  .landing .actions { flex-direction: column; }
  .landing .scene-inner { gap: 15px; grid-template-columns: 0.85fr 1.4fr 0.85fr; }
  .landing .scene { padding: 24px 20px 0; }
  .landing .ticket { padding: 20px; }
  .landing .signal, .landing .receipt { padding: 15px; }
  .landing .receipt strong { font-size: 29px; }
  .landing .insight .wrap { gap: 40px; }
  .landing .brand-strip .sectors { gap: 15px; }
  .landing .module-detail { padding: 25px; }
  .landing .features { gap: 25px; }
  .landing .foundation { gap: 22px; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 78px; }
  .landing .wrap { width: calc(100% - 36px); }
  .landing .hero { padding-top: 30px; }
  .landing .hero .eyebrow { font-size: 9px; letter-spacing: 0.1em; }
  .landing .hero h1 {
    font-size: clamp(43px, 11.5vw, 78px);
    letter-spacing: -0.07em;
    line-height: 1.07;
    margin: 26px 0 22px;
  }
  .landing .hero-bottom { display: block; margin-bottom: 30px; }
  .landing .hero-bottom p { font-size: 14px; max-width: 390px; }
  .landing .actions { flex-direction: row; margin-top: 23px; gap: 8px; }
  .landing .actions .button { font-size: 11px; padding: 12px 13px; gap: 12px; flex: 1; }
  .landing .scene { padding: 18px 14px 0; border-radius: 11px; }
  .landing .scene-label { font-size: 8px; letter-spacing: 0.05em; }
  .landing .scene-label span:last-child { display: none; }
  .landing .scene-inner { display: block; min-height: 0; padding: 25px 5px; }
  .landing .signal, .landing .receipt { display: none; }
  .landing .ticket { transform: rotate(-2deg); padding: 23px 20px; }
  .landing .ticket h3 { font-size: 23px; }
  .landing .ticket-bottom { margin-top: 20px; }
  .landing .step {
    display: block;
    text-align: center;
    font-size: 9px;
    padding: 10px 1px;
    min-height: 57px;
  }
  .landing .step span { display: block; font-size: 8px; margin-bottom: 4px; opacity: 0.65; }
  .landing .under-scene { font-size: 8px; line-height: 1.5; }
  .landing .under-scene span:last-child { text-align: right; }
  .landing .brand-strip { padding: 24px 0; gap: 14px; flex-wrap: wrap; font-size: 9px; }
  .landing .brand-strip .sectors { width: 100%; justify-content: space-between; gap: 10px; font-size: 9px; }
  .landing .brand-strip strong { font-size: 18px; }
  .landing section.content { padding: 65px 0; }
  .landing .section-heading { display: block; margin: 20px 0 29px; }
  .landing h2 { font-size: 37px; letter-spacing: -0.06em; }
  .landing .section-heading p { margin-top: 20px; font-size: 13px; }
  .landing .workspace { display: block; }
  .landing .module-list { display: flex; overflow-x: auto; padding: 8px; gap: 6px; }
  .landing .module-tab {
    width: auto;
    min-height: 47px;
    padding: 11px 13px;
    font-size: 11px;
    flex-shrink: 0;
    gap: 7px;
  }
  .landing .module-tab span:last-child { display: none; }
  .landing .module-detail { padding: 24px 19px; }
  .landing .module-detail h3 { font-size: 25px; }
  .landing .module-panel > p { font-size: 12px; }
  .landing .mini-row { font-size: 11px; padding: 14px 12px; }
  .landing .mini-head { padding: 12px; font-size: 9px; }
  .landing .features { grid-template-columns: 1fr; gap: 25px; margin-top: 30px; }
  .landing .features article { padding-top: 15px; }
  .landing .features h3 { margin: 8px 0; font-size: 17px; }
  .landing .insight .wrap { display: block; padding: 60px 0; }
  .landing .insight h2 { font-size: 38px; }
  .landing .insight-lead { font-size: 13px; }
  .landing .analytics { margin: 35px 6px 0; padding: 23px; transform: rotate(-1deg); }
  .landing .big-value { font-size: 36px; }
  .landing .roadmap { grid-template-columns: 1fr; }
  .landing .roadmap article { padding: 25px; }
  .landing .roadmap h3 { font-size: 25px; }
  .landing .roadmap article.now ul { grid-template-columns: 1fr; }
  .landing .foundation { grid-template-columns: 1fr 1fr; gap: 20px; }
  .landing .faq { display: block; padding: 40px 0 60px; }
  .landing .faq h2 { font-size: 31px; margin-bottom: 20px; }
  .landing .faq summary { font-size: 13px; }
  .landing .closing { padding: 55px 0; }
  .landing .closing .wrap { display: block; }
  .landing .closing h2 { font-size: 39px; }
  .landing .closing .button { margin-top: 22px; }
}

@media (max-width: 400px) {
  .landing .foundation { grid-template-columns: 1fr; gap: 18px; }
  .landing .actions .button { gap: 8px; padding: 12px 10px; }
}