/* Newsreader, self-hosted so the hero never swaps in after first paint.
   Variable file (opsz 6..72, wght 400..500) split the way Google serves it;
   `block` means the title waits for the font instead of flashing Georgia. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: block;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: block;
  src: url("fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cyrillic for Russian. DM Sans has no Cyrillic, so these Onest cuts fill in.
   DM Sans barely thickens past 600 and Onest keeps going, so each requested
   weight maps to the Onest weight with the same stem: 500->480, 700->680,
   800->700, 900->770. Static cuts from the Google Fonts cyrillic subset,
   regenerate with fontTools varLib.instancer. OFL. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/onest-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/onest-cyrillic-500.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/onest-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/onest-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/onest-cyrillic-800.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/onest-cyrillic-900.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------------------------------------------------------------------------
   Yurta landing
   1. Tokens  2. Reset/base  3. Layout  4. Buttons  5. Header/nav  6. Hero
   7. Hub chips  8. Insight  9. Showcase tabs  10. Trust  11. Admins and
   businesses  12. Modular hubs  13. Vision  14. Waitlist  15. Footer
   16. Motion/responsive
--------------------------------------------------------------------------- */

/* 1. Tokens */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #131210;
  --ink-2: #3D3A36;
  --muted: #6B665F;
  --line: #E8E4DD;
  --line-soft: #F1EEE8;
  --dark: #201E17;
  --dark-2: #23211A;
  --accent: #1E7F5C;
  --accent-soft: #E4F1EB;
  --blue: #2563EB;
  --surface-2: #F6F4EF;

  --font: "DM Sans", "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Newsreader", Georgia, serif;
  --fs-display: clamp(2.4rem, 1.45rem + 2.7vw, 3.7rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 2.4vw, 2.8rem);
  --fs-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-label: 0.78rem;

  --page-max: 1440px;
  --text-max: 900px;
  --text-narrow: 720px;
  --shot-max: 1360px;
  --gutter: clamp(16px, 4vw, 40px);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-soft: 0 1px 2px rgb(22 19 13 / 0.05), 0 14px 40px rgb(22 19 13 / 0.08);
  --shadow-card: 0 1px 2px rgb(22 19 13 / 0.06), 0 8px 24px rgb(22 19 13 / 0.08);
}

/* 2. Reset / base */
*,
*::before,
*::after { box-sizing: border-box; }

body, h1, h2, h3, p, ul, figure, fieldset { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
fieldset { padding: 0; border: 0; }

a { color: inherit; }

/* Fast repeated taps on controls should not trigger the browser's
   double-tap zoom; pinch zoom stays available */
a, button, input, textarea, label { touch-action: manipulation; }

button, input {
  font: inherit;
  color: inherit;
}

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

::selection { background: var(--ink); color: var(--bg); }

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

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* 3. Layout */
.container {
  width: min(100% - 2 * var(--gutter), var(--page-max));
  margin-inline: auto;
}

.container-text {
  width: min(100% - 2 * var(--gutter), var(--text-max));
  margin-inline: auto;
}

.container-narrow {
  width: min(100% - 2 * var(--gutter), var(--text-narrow));
  margin-inline: auto;
}

.container-shot {
  width: min(100% - 2 * var(--gutter), var(--shot-max));
  margin-inline: auto;
}

.section { padding-block: clamp(72px, 5vw + 44px, 128px); }

.section-head { text-align: center; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.section-label::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 2px;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.section-intro {
  margin-top: 20px;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* 4. Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 23px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.93rem;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease,
    transform 150ms ease, box-shadow 150ms ease;
}
.btn:active { transform: translateY(0) scale(0.985); }

.btn-primary {
  background: var(--ink);
  color: #FFFFFF;
}
.btn-primary:hover {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgb(19 18 16 / 0.22);
}

/* Accent CTA: the admin action, distinct from the black member/waitlist buttons */
.btn-accent {
  background: var(--accent);
  color: #FFFFFF;
}
.btn-accent:hover {
  background: #196A4D;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgb(30 127 92 / 0.28);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(22 19 13 / 0.05);
}
.btn-secondary:hover {
  border-color: #C9C5BD;
  background: #FAFAF8;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgb(22 19 13 / 0.09);
}

.btn-sm { padding: 8px 17px; font-size: 0.88rem; }

.btn-arr {
  width: 16px;
  height: 16px;
  margin-right: -4px;
  opacity: 0.5;
  transition: opacity 150ms ease-out;
}
.btn-arr path {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.btn-arr g { transition: transform 150ms ease-out; }
.btn-arr-tail {
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.btn:hover .btn-arr { opacity: 1; }
.btn:hover .btn-arr g { transform: translateX(2px); }
.btn:hover .btn-arr-tail { opacity: 1; }
.btn-block { width: 100%; }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 150ms ease, gap 150ms ease;
}
.btn-link:hover { border-color: var(--ink); gap: 12px; }
.btn-link svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

/* 5. Header / nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
}
.site-header.is-scrolled {
  background: rgb(255 255 255 / 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 20px rgb(22 19 13 / 0.04);
}
/* Touch browsers: a backdrop-filtered sticky header can drop out for a frame
   while iOS Safari re-composites (visibly when a link is tapped). A solid
   header can't, and the blur is barely noticeable at phone sizes anyway, so
   the header stays sticky on phones but goes solid instead of glass. */
@media (hover: none) and (pointer: coarse) {
  .site-header {
    transition: none;
  }
  .site-header.is-scrolled {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 4px 14px rgb(22 19 13 / 0.05);
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
}
.brand-mark svg {
  width: 30px;
  height: 16px;
  fill: var(--ink);
}
.brand-word {
  height: 24px;
  width: auto;
  fill: var(--ink);
  transform: translateY(3px);
}

.nav-links {
  display: flex;
  gap: clamp(18px, 2.5vw, 36px);
}
.nav-links a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.96rem;
  color: var(--ink-2);
  transition: color 150ms ease;
}
.nav-links a:hover { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 2; fill: none; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Open menu: solid header + sheet, dimmed page below the sheet. Solid, not
   glass, for the same iOS Safari reason as the scrolled header above. */
.site-header.menu-open {
  background: var(--bg);
  border-bottom-color: transparent;
  box-shadow: none;
}

.nav-menu {
  /* Fixed overlay below the header bar; out of layout so opening never
     shifts the page (scroll anchoring) */
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 49;
  background: var(--bg);
  padding: 8px var(--gutter) 18px;
  box-shadow: 0 28px 56px rgb(22 19 13 / 0.16);
  animation: menu-drop 220ms ease both;
}
/* Scrim hangs below the sheet, dimming the page */
.nav-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgb(19 18 16 / 0.4);
  animation: menu-fade 200ms ease both;
}
.nav-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.02rem;
  border-bottom: 1px solid var(--line-soft);
}
.nav-menu a:last-child { border-bottom: 0; }
.nav-menu a::after {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  opacity: 0.3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

@keyframes menu-drop {
  from { transform: translateY(-10px); }
  to { transform: none; }
}
@keyframes menu-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 6. Hero */
.hero {
  position: relative;
  /* Clip only sideways bleed; vertical stays open so the phone's shadow isn't sheared off */
  overflow-x: clip;
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(72px, 6vw, 120px);
}

.hero-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 64px);
  text-align: center;
}

.hero-copy {
  position: relative;
  max-width: var(--text-max);
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero-sub {
  margin-top: 24px;
  margin-inline: auto;
  max-width: 560px;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: var(--ink-2);
  text-wrap: pretty;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 22px;
}
.hero-tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
}
.hero-tags svg {
  width: 16px;
  height: 16px;
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.hero-note {
  margin-top: 16px;
  font-size: var(--fs-small);
  color: var(--muted);
}


.browser-frame {
  background: var(--surface);
  border-radius: 16px;
  /* Fully borderless, Arc-style: the shadow alone defines the edge */
  box-shadow:
    0 2px 6px rgb(22 19 13 / 0.05),
    0 24px 64px rgb(22 19 13 / 0.11);
  overflow: hidden;
}

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 1080px;
}

.hero-phone {
  position: absolute;
  right: clamp(10px, 1.6vw, 28px);
  bottom: -36px;
  width: clamp(168px, 16vw, 224px);
  /* The screenshot bakes in the phone frame; radius follows its bezel corners */
  border-radius: clamp(27px, 2.53vw, 35px);
  overflow: hidden;
  background: #09090B;
  box-shadow: 0 30px 60px rgb(22 19 13 / 0.28), 0 6px 16px rgb(22 19 13 / 0.16);
}
.hero-phone img { display: block; width: 100%; }


/* Hero illustration variant: centered copy over the yurt, at every width */
.hero-illu {
  /* The illustration's background is pure white, same as the page */
  background: var(--bg);
}
.hero-illu .hero-visual img {
  width: 100%;
  height: auto;
  /* The artwork has a blank band above the roof (about 10% of its width);
     pull most of it up under the buttons so more of the yurt makes the fold */
  margin-top: -8%;
}
/* Give each sentence of the h1 its own line, but only where the first one
   fits unwrapped at the capped display size */
.hero-br { display: none; }
@media (min-width: 1200px) {
  .hero-illu .hero-copy { max-width: 1120px; }
  .hero-illu .hero-br { display: inline; }
}

/* 7. Hub chips (vision map) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: 0 1px 3px rgb(22 19 13 / 0.05);
  white-space: nowrap;
}

.hub-avatars img,
.mock-avatars img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hub-avatars i,
.mock-avatars i { position: relative; overflow: hidden; }

/* 8. Insight */
.insight-statement {
  text-align: center;
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3rem);
}
.insight-statement span {
  display: block;
  /* Deeper than --accent: display type carries more ink than icons and badges */
  color: #176A4E;
}

/* Product screenshots under the statement: screenshot and phone clipped
   by the card edge */
.insight-shot.insight-card {
  max-width: 1360px;
  max-height: clamp(480px, 52vw, 740px);
  margin: clamp(44px, 4.5vw, 68px) auto 0;
  /* Air on the top and left; the screenshot runs into the right and bottom
     edges and gets clipped square by the card */
  gap: 18px;
  padding: 26px 0 0 34px;
}
.insight-shot.insight-card {
  background: var(--dark);
}
.insight-shot.insight-card h3 { padding-right: 26px; color: rgb(255 255 255 / 0.66); }
.insight-shot.insight-card h3 strong { color: #fff; }
.insight-shot.insight-card .hero-phone {
  /* Faint rim so the black bezel doesn't dissolve into the dark card; shadow
     kept tight so the card's corner radius doesn't clip it into a visible arc */
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.16),
    0 18px 36px rgb(0 0 0 / 0.3);
}
.insight-shot .browser-frame {
  border-radius: 14px 0 0 0;
  box-shadow:
    0 2px 6px rgb(22 19 13 / 0.05),
    0 18px 44px rgb(22 19 13 / 0.09);
}
.insight-shot .hero-phone {
  right: clamp(40px, 6vw, 88px);
  bottom: -48px;
}
.insight-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px;
  background: #F3F2EF;
  border-radius: 24px;
  overflow: hidden;
}
.insight-card h3 {
  position: relative;
  font-size: 1.26rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.insight-card h3 strong { font-weight: 700; color: var(--ink); }
.insight-card h3 svg {
  display: inline-block;
  width: 21px;
  height: 21px;
  margin-right: 9px;
  vertical-align: -3px;
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}

.mock {
  position: relative;
  margin-top: auto;
  padding: 12px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgb(22 19 13 / 0.06), 0 10px 28px rgb(22 19 13 / 0.06);
}

.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mock-row > strong { font-size: 0.88rem; }

.mock-stars {
  font-size: 0.76rem;
  font-weight: 700;
  color: #E89B0C;
  letter-spacing: 0.04em;
}
.mock-stars em { font-style: normal; font-weight: 500; color: var(--muted); }

.mock-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mock-head strong {
  display: block;
  font-size: 0.85rem;
  line-height: 1.3;
}
.mock-head p { font-size: 0.75rem; color: var(--muted); }

.mock-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
}
.mock-logo-round {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #263B66, #1B5A55);
}
.mock-logo-round img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mock-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.75rem;
  color: var(--muted);
}

.mock-avatars { display: inline-flex; }
.mock-avatars i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: #6B665F;
  color: #FFFFFF;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 700;
}
.mock-avatars i:nth-child(2) { background: #1E7F5C; margin-left: -7px; }
.mock-avatars i:nth-child(3) { background: #315EFB; margin-left: -7px; }

/* 9. Showcase tabs */
.showcase-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) 1.45fr;
  gap: clamp(36px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(28px, 3vw, 44px);
}

/* Rail nav: numbered tabs on a thin rail */
.acc { border-left: 1px solid var(--line); }

.acc-item { position: relative; }
.acc-item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: transparent;
  transition: background-color 180ms ease;
}
.acc-item:has(.acc-head[aria-selected="true"])::before { background: var(--ink); }

.acc-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 16px 12px 16px 20px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease;
}
.acc-head:hover { color: var(--ink-2); }
.acc-idx {
  flex: none;
  width: 20px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  color: #B4AFA6;
  transition: color 180ms ease;
}
.acc-head[aria-selected="true"] { color: var(--ink); }
.acc-head[aria-selected="true"] .acc-idx { color: var(--ink); }
.acc-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.acc-body { padding: 0 12px 24px 54px; }
.acc-body h3 {
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-wrap: balance;
}
.acc-body > p {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
}

.showcase-shots { min-width: 0; }

/* Real product screenshots in the warm card: short claim on top, screenshot clipped by the right and bottom card edges */
.shot-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 0 0 34px;
  background: #F3F2EF;
  border-radius: 24px;
  overflow: hidden;
}
.shot-card h3 {
  padding-right: 26px;
  font-size: 1.26rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--muted);
  text-wrap: balance;
}
.shot-card h3 strong { font-weight: 700; color: var(--ink); }
.shot-card .browser-frame {
  border-radius: 14px 0 0 0;
  box-shadow:
    0 2px 6px rgb(22 19 13 / 0.05),
    0 18px 44px rgb(22 19 13 / 0.09);
}

/* 10. Trust */
.trust-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: clamp(40px, 4.5vw, 60px) auto 0;
}
/* Padding on the left and bottom only, so the mock panel runs into the right edge and is clipped square */
.trust-bento .insight-card { gap: 18px; padding: 26px 0 26px 26px; }
.trust-bento .insight-card h3 { padding-right: 26px; }
/* Claim on the first line, its descriptor always on the second */
.trust-bento .insight-card h3 span { display: block; }
.trust-bento .mock { border-radius: 16px 0 0 16px; }

.mock-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.mock-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #F4F4F5;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-2);
}
.mock-tag svg {
  width: 12px;
  height: 12px;
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: none;
}
.mock-tag-green {
  background: var(--accent-soft);
  color: var(--accent);
}
.mock-tag-star {
  background: #FBF2DE;
  color: #D98A06;
}

.mock-review {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mock-review + .mock-review {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.mock-review > div { min-width: 0; flex: 1; }
.mock-review .mock-row strong { font-size: 0.8rem; }
.mock-review p {
  margin-top: 3px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

.mock-verify {
  /* Same shield the app puts beside a verified name */
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  vertical-align: -1px;
}
.mock-verify svg {
  display: block;
  width: 14px;
  height: 14px;
}

.mock-namew {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.mock-namew em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--muted);
}

.mock-stats {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mock-stats > div {
  display: grid;
  gap: 1px;
  padding: 12px 8px;
  background: var(--surface-2);
  border-radius: 10px;
  text-align: center;
}
.mock-stats strong { font-size: 1.05rem; font-weight: 800; }
.mock-stats span { font-size: 0.7rem; color: var(--muted); }

/* Rating summary above the review */
.mock-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.mock-score strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.mock-score em { font-style: normal; font-size: 0.75rem; color: var(--muted); }
.mock-score + .mock-review { padding-top: 10px; }

/* A guide's mark: open book on the accent tint */
.mock-logo-guide { background: var(--accent-soft); }
.mock-logo-guide svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}
.mock-foot-icon {
  flex: none;
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}

/* 11. Admins and businesses */
.admins-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) 1.3fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
  /* Same shot rail as the showcase, its structural twin, so the two
     screenshot cards share a right edge */
  max-width: var(--shot-max);
}

.admins-copy h2 { text-align: left; }
.admins-copy .section-intro { text-align: left; }

.benefit-list {
  margin-top: 28px;
  display: grid;
  gap: 14px;
}
.benefit-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
  font-size: 0.98rem;
}
.benefit-list svg {
  flex: none;
  width: 22px;
  height: 22px;
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}

.admins-copy .btn { margin-top: 30px; }

/* Businesses mirror the admin section: screenshot left, copy right */
.businesses .admins-grid { grid-template-columns: 1.3fr minmax(320px, 0.85fr); }

/* 12. Modular hubs: three hub cards side by side, in the trust cards'
   language - warm card, claim on top, white panel below */
.hub-configs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: clamp(40px, 4.5vw, 60px) auto 0;
}
.hub-card { gap: 10px; padding: 26px; }
.hub-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* In narrow cards the count drops under the name instead of colliding */
  gap: 8px 12px;
}
.hub-card h3 { white-space: nowrap; }
.hub-count {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}
.hub-desc {
  font-size: var(--fs-small);
  color: var(--muted);
  text-wrap: pretty;
}
.hub-config { margin-top: 12px; padding: 14px; }
/* Three narrow cards: put every count under its name, so the white panels
   still line up across the row */
@media (min-width: 1024px) and (max-width: 1180px) {
  .hub-card-head { flex-direction: column; align-items: flex-start; }
  /* and a little less padding, so "Обсуждения" still fits its tile */
  .hub-card { padding: 20px; }
  .hub-config { padding: 10px; }
}
/* The cards share rows, so names, descriptions, and the white panels line
   up across the row even when one long name ("Профессиональный хаб")
   pushes its count onto a second line */
@supports (grid-template-rows: subgrid) {
  .hub-card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 10px;
  }
  .hub-card-head { align-self: start; }
}

/* Modules: lit when on, a dashed empty slot when off. Every tile is the
   same size: minmax(0, 1fr) keeps a long label ("Купля-продажа") from
   widening its column, and equal rows keep a wrapped label from making
   one tile taller than the rest. */
.hub-mods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
}
.hub-mod {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 4px 9px;
  border: 1px solid #D5E8DE;
  border-radius: 12px;
  background: #F1F7F4;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
}
.hub-mod svg {
  width: 17px;
  height: 17px;
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}
.hub-mod.off {
  border: 1px dashed #D9D4CA;
  background: transparent;
  font-weight: 500;
  color: #B3ADA3;
}
.hub-mod.off svg { stroke: #C9C3B8; }
@media (min-width: 1024px) and (max-width: 1180px) {
  .hub-mods { gap: 6px; }
  .hub-mod { padding-inline: 2px; font-size: 0.72rem; }
}

.hub-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
}
.hub-lang svg {
  width: 15px;
  height: 15px;
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}

/* Rules: the same three switches in every hub, set differently */
.hub-rules {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}
.hub-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #A39D93;
}
.hub-rule i {
  position: relative;
  flex: none;
  width: 26px;
  height: 15px;
  border-radius: var(--r-pill);
  background: #DAD5CC;
}
.hub-rule i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgb(22 19 13 / 0.2);
}
.hub-rule.on { color: var(--ink-2); }
.hub-rule.on i { background: var(--accent); }
.hub-rule.on i::after { left: auto; right: 2px; }

/* The deck's closing line under a section: same type as the section intro,
   second sentence on its own line in the accent */
.section-closer {
  max-width: 640px;
  margin: clamp(28px, 3vw, 40px) auto 0;
  text-align: center;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--ink-2);
  text-wrap: balance;
}
.section-closer span { display: block; color: #176A4E; }

/* 13. Vision */
.vision {
  overflow-x: clip;
  background:
    radial-gradient(64rem 42rem at 50% 68%, rgb(30 127 92 / 0.34), transparent 64%),
    radial-gradient(50rem 30rem at 12% 0%, rgb(30 127 92 / 0.12), transparent 60%),
    #0B1F17;
}
.vision .section-label { color: #7BD8AE; }
.vision .section-label::before { background: #3ECF8E; }

.vision-note {
  margin: 26px auto 0;
  max-width: 640px;
  padding-inline: 24px;
  text-align: center;
  font-size: 0.9rem;
  color: rgb(236 242 238 / 0.65);
}
.vision h2 { color: #FFFFFF; }
.vision .section-intro { color: rgb(236 242 238 / 0.8); }

.vision-map {
  position: relative;
  /* Same tight rail as the trust bento and hub cards */
  max-width: 1120px;
  margin: clamp(36px, 4vw, 60px) auto 0;
}
/* The ping anchors to the map image, not the whole block; on mobile the
   hub chips stack below the map and would otherwise skew its position */
.map-stage { position: relative; }
.map-dots {
  width: 100%;
  height: auto;
  opacity: 0.65;
  -webkit-mask-image: radial-gradient(85% 85% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(85% 85% at 50% 50%, #000 55%, transparent 100%);
}

/* Launch marker on Chicago */
.map-ping {
  position: absolute;
  left: 23.5%;
  top: 33.2%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #3ECF8E;
  box-shadow: 0 0 16px rgb(62 207 142 / 0.9);
}
.map-ping::before,
.map-ping::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgb(62 207 142 / 0.7);
  animation: map-ping 3.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.map-ping::after { animation-delay: -1.6s; }
@keyframes map-ping {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(5.5); opacity: 0; }
}

.vision-hubs .chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 17px 10px 11px;
  background: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.3);
  white-space: nowrap;
  animation: hub-float 7s ease-in-out infinite;
}

.hub-avatars { display: inline-flex; }
.hub-avatars i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #14342A;
  background: #6B665F;
  color: #FFFFFF;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 700;
}
.hub-avatars i:nth-child(2) { background: #1E7F5C; margin-left: -8px; }
.hub-avatars i:nth-child(3) { background: #315EFB; margin-left: -8px; }

.hub-info { display: grid; line-height: 1.3; }
.hub-info strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: #F2F6F3;
}

.v-hub-1 { left: 26%; top: 22%; animation-delay: 0s; }
.v-hub-2 { left: 51%; top: 12%; animation-delay: -1.4s; }
.v-hub-3 { left: 63%; top: 40%; animation-delay: -2.8s; }
.v-hub-4 { left: 20%; top: 62%; animation-delay: -4.2s; }
.v-hub-5 { left: 56%; top: 74%; animation-delay: -5.6s; }
.v-hub-6 { left: 74%; top: 22%; animation-delay: -0.7s; }
.v-hub-7 { left: 75%; top: 58%; animation-delay: -3.5s; }

@keyframes hub-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 8px)); }
}

/* 14. Waitlist */
.waitlist-card {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 5vw, 88px);
  overflow: hidden;
  background:
    radial-gradient(56rem 30rem at 92% -18%, rgb(30 127 92 / 0.26), transparent 62%),
    #0B0D11;
  border: 1px solid rgb(255 255 255 / 0.08);
  color: #EDEEF2;
  border-radius: 24px;
  padding: clamp(36px, 4.5vw, 64px);
  box-shadow: 0 30px 80px rgb(11 13 17 / 0.35);
}
/* Faint blueprint grid, fading out toward the lower left */
.waitlist-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(90% 90% at 85% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(90% 90% at 85% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}
.waitlist-card > * { position: relative; }

.waitlist-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8B93A3;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ECF8E;
  box-shadow: 0 0 0 4px rgb(62 207 142 / 0.15);
  animation: status-pulse 2.4s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgb(62 207 142 / 0.12); }
  50% { box-shadow: 0 0 0 6px rgb(62 207 142 / 0.22); }
}

.waitlist-copy h2 { margin-top: 18px; color: #FFFFFF; }
.waitlist-copy > p:not(.waitlist-status) {
  margin-top: 16px;
  color: #9AA1AF;
  text-wrap: pretty;
}

.waitlist-steps {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.waitlist-steps li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  font-size: 0.95rem;
  color: #C6CBD6;
}
.waitlist-steps li:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.waitlist-steps li span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #3ECF8E;
}

.waitlist-form .field { margin-top: 16px; }

.role-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 10px;
}

.role-opt { position: relative; }
.role-opt input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.role-opt span {
  display: block;
  padding: 8px 12px;
  text-align: center;
  border-radius: 7px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #9BA1B0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}
.role-opt span:hover { color: #E6E8EF; }
.role-opt input:checked + span {
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}
.role-opt input:focus-visible + span {
  outline: 2px solid #3ECF8E;
  outline-offset: 2px;
}

.waitlist-form .field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #8B93A3;
  margin-bottom: 7px;
}

.waitlist-form input[type="email"],
.waitlist-form input[type="text"] {
  width: 100%;
  padding: 11px 14px;
  background: rgb(255 255 255 / 0.03);
  border: 1px solid rgb(255 255 255 / 0.09);
  border-radius: 10px;
  font-size: 0.95rem;
  color: #FFFFFF;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.waitlist-form input::placeholder { color: #565C69; }
.waitlist-form select {
  width: 100%;
  padding: 11px 36px 11px 14px;
  background: rgb(255 255 255 / 0.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B93A3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid rgb(255 255 255 / 0.09);
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
  color: #FFFFFF;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.waitlist-form select:hover { border-color: rgb(255 255 255 / 0.2); }
.waitlist-form select:focus-visible {
  border-color: #3ECF8E;
  box-shadow: 0 0 0 3px rgb(62 207 142 / 0.2);
}
.waitlist-form select option { color: #131210; background: #FFFFFF; }
.waitlist-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.waitlist-form input[type="email"]:hover,
.waitlist-form input[type="text"]:hover { border-color: rgb(255 255 255 / 0.2); }
.waitlist-form input[type="email"]:focus-visible,
.waitlist-form input[type="text"]:focus-visible {
  border-color: #3ECF8E;
  background: rgb(255 255 255 / 0.05);
  box-shadow: 0 0 0 3px rgb(62 207 142 / 0.2);
}

.waitlist-form .btn-primary {
  margin-top: 24px;
  padding: 12px 20px;
  background: #FFFFFF;
  color: var(--ink);
  font-size: 0.95rem;
}
.waitlist-form .btn-primary:hover {
  background: #F1F1F4;
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.4);
}
.waitlist-form .btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.3);
}
.waitlist-form .btn-primary[disabled] { opacity: 0.6; cursor: default; transform: none; }

.waitlist-form textarea {
  width: 100%;
  padding: 11px 14px;
  background: rgb(255 255 255 / 0.03);
  border: 1px solid rgb(255 255 255 / 0.09);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  color: #FFFFFF;
  outline: none;
  resize: vertical;
  min-height: 96px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.waitlist-form textarea::placeholder { color: #565C69; }
.waitlist-form textarea:hover { border-color: rgb(255 255 255 / 0.2); }
.waitlist-form textarea:focus-visible {
  border-color: #3ECF8E;
  background: rgb(255 255 255 / 0.05);
  box-shadow: 0 0 0 3px rgb(62 207 142 / 0.2);
}

/* Invalid only after the user has interacted with the field, so nothing
   glows red on page load; keeps flagging the field after the browser's
   validation bubble disappears */
.waitlist-form input[type="email"]:user-invalid,
.waitlist-form input[type="text"]:user-invalid,
.waitlist-form textarea:user-invalid {
  border-color: #E5484D;
}
.waitlist-form input[type="email"]:user-invalid:focus-visible,
.waitlist-form input[type="text"]:user-invalid:focus-visible,
.waitlist-form textarea:user-invalid:focus-visible {
  border-color: #E5484D;
  box-shadow: 0 0 0 3px rgb(229 72 77 / 0.22);
}

.form-note {
  margin-top: 14px;
  font-size: 0.82rem;
  color: #7A8090;
}

.form-status {
  margin-top: 12px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #3ECF8E;
}
.form-status:empty { display: none; }
.form-status a { color: inherit; }

/* 15. Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(40px, 4vw, 64px);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-brand p {
  margin-top: 14px;
  max-width: 380px;
  font-size: var(--fs-small);
  color: var(--muted);
}

.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 32px clamp(40px, 6vw, 88px);
}
.footer-col {
  display: grid;
  gap: 10px;
  align-content: start;
}
.footer-label {
  margin-bottom: 4px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-col a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-2);
}
.footer-col a:hover { color: var(--ink); text-decoration: underline; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* Standalone pages: the bottom bar is the whole footer, one rule is enough */
.footer-bottom:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Dark standalone pages (founding, contact): page chrome matches the card */
.page-dark {
  background: #0B0D11;
}
.page-dark .site-header,
.page-dark .site-header.is-scrolled {
  background: rgb(11 13 17 / 0.92);
  border-bottom-color: rgb(255 255 255 / 0.08);
  box-shadow: none;
}
.page-dark .brand-mark svg,
.page-dark .brand-word {
  fill: #EDEEF2;
}
.page-dark .site-header .btn-primary {
  background: #FFFFFF;
  color: var(--ink);
}
.page-dark .site-header .btn-primary:hover { background: #F1F1F4; }
.page-dark .site-footer { border-top-color: rgb(255 255 255 / 0.08); }
.page-dark .footer-bottom { color: rgb(236 242 238 / 0.7); }

/* Brighter copy on the all-dark pages, where there is no light context to rest the eyes */
.page-dark .waitlist-copy > p:not(.waitlist-status) { color: #C2C7D1; }
.page-dark .waitlist-steps li { color: #DDE1E8; }
.page-dark .waitlist-form .field label { color: #A7AEBC; }
.page-dark .form-note { color: #99A0AF; }

/* 16. Motion + responsive */
@media (max-width: 1100px) {
  .admins-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .admins-copy { max-width: var(--text-narrow); }
  .businesses .admins-grid { grid-template-columns: 1fr; }
  /* Stacked, the copy leads in both sections */
  .businesses .admins-copy { order: -1; }
}

@media (max-width: 1023px) {
  .showcase-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .trust-bento,
  .hub-configs {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  .hero-phone {
    right: 0;
    bottom: -20px;
    width: clamp(140px, 26vw, 200px);
    border-radius: clamp(22px, 4.1vw, 32px);
  }
}

/* Four menu links plus two buttons need about 900px; below that, the sheet */
@media (max-width: 960px) {
  .nav-links { display: none; }
  /* The sheet menu carries the demo link on small screens */
  .nav-demo { display: none; }
  .nav-toggle { display: grid; }
}
@media (min-width: 961px) {
  .nav-menu { display: none; }
}

@media (max-width: 768px) {
  /* The card is short here, so a bottom-anchored phone climbs into the
     heading: pin it under the heading instead and let the card clip its foot */
  .insight-shot .hero-phone { top: 100px; bottom: auto; right: 24px; }
  .vision-map { margin-top: 28px; }
  .vision-hubs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }
  .vision-hubs .chip { position: static; animation: none; }
  /* A sample of four, specific and general, reads better than all seven stacked */
  .vision-hubs .v-hub-3,
  .vision-hubs .v-hub-5,
  .vision-hubs .v-hub-6 { display: none; }
  .waitlist-card { grid-template-columns: 1fr; }
  .footer-grid { flex-direction: column; }
}

@media (max-width: 480px) {
  .hero-actions .btn { width: 100%; }
  .role-opt span { padding-inline: 4px; font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn:hover, .btn:active { transform: none; box-shadow: none; transition: background-color 150ms ease, border-color 150ms ease; }
  .btn-arr, .btn-arr g, .btn-arr-tail { transition: none; }
  .btn:hover .btn-arr g { transform: none; }
  .status-dot { animation: none; }
  .vision-hubs .chip { animation: none; }
  .map-ping::before, .map-ping::after { animation: none; }
  .site-header {
    transition: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header.is-scrolled { background: var(--bg); }
  .nav-menu, .nav-menu::after { animation: none; }
  .js .tab-panel:not([hidden]) { animation: none; }
  .btn, .btn-link, .tab { transition: none; }
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
/* 404: the hero's shape - copy left, an empty yurt right - so the page
   reads as part of the site, not an error screen. */
.notfound {
  min-height: calc(100svh - 65px);
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 7vw, 104px) clamp(56px, 6vw, 96px);
}
.notfound-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 64px);
  text-align: center;
}
.notfound-copy { max-width: var(--text-narrow); }
.notfound-copy .section-label { margin-bottom: 20px; }
.notfound-copy h1 { font-size: var(--fs-h2); }
.notfound-sub {
  margin: 20px auto 0;
  max-width: 480px;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: var(--ink-2);
  text-wrap: pretty;
}
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}
.notfound-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 18px;
  margin-top: 28px;
  font-size: var(--fs-small);
  color: var(--muted);
}
.notfound-links a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  transition: text-decoration-color 150ms ease;
}
.notfound-links a:hover { text-decoration-color: var(--ink); }
.notfound-visual { width: 100%; max-width: 560px; }
.notfound-visual svg { display: block; width: 100%; height: auto; }

@media (min-width: 1024px) {
  .notfound-grid {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: clamp(40px, 6vw, 96px);
  }
  .notfound-copy { flex: 0 0 48%; max-width: none; }
  .notfound-sub { margin-inline: 0; }
  .notfound-actions,
  .notfound-links { justify-content: flex-start; }
  .notfound-visual { flex: 1; min-width: 0; max-width: 640px; }
}

/* Leaving for the demo: a short fade so the browser's own navigation
   transition happens on a blank page. */
body { transition: opacity 160ms ease; }
body.is-leaving { opacity: 0; pointer-events: none; }

/* ── EN / RU ─────────────────────────────────────────────────────────────
   Two letters, no flags. The page stays hidden while Russian loads, so
   English never flashes (i18n.js lifts it after 2.5s regardless). */
html.i18n-wait body { visibility: hidden; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  flex-shrink: 0;
}
.lang-switch button {
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 700 0.74rem/1 var(--font);
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(22 19 13 / 0.14);
}
.lang-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-menu .lang-switch-menu { margin-top: 12px; }
/* Header: a globe button with the current language opens a small menu,
   as in the web app (EN / RU, no flags: a language isn't a country) */
.lang-pick { position: relative; flex-shrink: 0; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  font: 700 0.8rem/1 var(--font);
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.lang-btn:hover,
.lang-btn[aria-expanded="true"] { background: var(--line); }
.lang-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lang-btn:focus-visible,
.lang-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 180px;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.18);
}
.lang-list[hidden] { display: none; }
.lang-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: none;
  font: 500 0.88rem/1.2 var(--font);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.lang-list button:hover { background: var(--surface-2); color: var(--ink); }
.lang-list button[aria-checked="true"] { font-weight: 600; color: var(--ink); }
.lang-list svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lang-list button[aria-checked="false"] svg { visibility: hidden; }
/* Narrow phones on the home page: the header keeps the waitlist button and
   the menu; the switch moves into the menu sheet */
@media (max-width: 480px) {
  .nav-actions:has(.nav-toggle) > .lang-pick { display: none; }
}
/* Russian labels run longer; header buttons stay on one line */
.nav-actions .btn { white-space: nowrap; }