/* --------------------------------------------------
       Design tokens & reset
    -------------------------------------------------- */

    :root {
      --bg: #f7f8fa;
      --surface: #ffffff;
      --ink: #1b1e27;
      --muted: #646b7a;
      --subtle: #8a909d;
      --line: #e5e8ee;
      --mint: #d9f5eb;
      --mint-strong: #93e4cd;
      --green: #17674f;
      --violet: #eee9ff;
      --violet-ink: #7158bb;
      --peach: #ffeddf;
      --radius: 24px;
      --shadow: 0 18px 60px -28px rgb(27 30 39 / 24%);
      --container: 1184px;
      --ease: cubic-bezier(.22, 1, .36, 1);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 100px;
      -webkit-text-size-adjust: 100%;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family:
        Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Helvetica, Arial, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    body, button, a {
      -webkit-tap-highlight-color: transparent;
    }

    button, input {
      font: inherit;
    }

    button, a {
      touch-action: manipulation;
    }

    button {
      color: inherit;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      cursor: pointer;
    }

    button:disabled {
      cursor: default;
    }

    h1, h2, h3, p {
      margin: 0;
    }

    h1, h2, h3 {
      line-height: 1.12;
      font-weight: 650;
      text-wrap: balance;
    }

    p {
      text-wrap: pretty;
    }

    ul, ol {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    svg {
      display: block;
    }

    [hidden] {
      display: none !important;
    }

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

    :focus-visible {
      outline: 3px solid #6c5fd0;
      outline-offset: 5px;
    }

    section[id] {
      scroll-margin-top: 100px;
    }

    .container {
      width: min(var(--container), calc(100% - 40px));
      margin-inline: auto;
    }

    .section {
      padding-block: 68px;
    }

    .section-heading {
      max-width: 680px;
      margin-bottom: 32px;
    }

    .section-heading.center {
      margin-inline: auto;
      text-align: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 2px;
      background: #70bba5;
    }

    .section-title {
      font-size: clamp(30px, 4.3vw, 50px);
      letter-spacing: -.045em;
    }

    .section-description {
      margin-top: 18px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.75;
    }

    .icon {
      width: 20px;
      height: 20px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 20px;
      border: 1px solid transparent;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      text-align: center;
      transition:
        transform .22s var(--ease),
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
    }

    .button-dark {
      color: #fff;
      background: var(--ink);
      box-shadow: 0 3px 5px rgb(27 30 39 / 8%);
    }

    .button-light {
      background: #fff;
      border-color: var(--line);
    }

    .button-mint {
      color: #172e28;
      background: var(--mint-strong);
    }

    .button .icon {
      width: 17px;
      height: 17px;
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
    }

    .text-link .icon {
      width: 16px;
      height: 16px;
      transition: transform .2s ease;
    }

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

    .skip-link {
      position: fixed;
      z-index: 100;
      top: 10px;
      left: 10px;
      padding: 12px 18px;
      border-radius: 10px;
      background: var(--ink);
      color: white;
      transform: translateY(-160%);
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    /* --------------------------------------------------
       Navigation
    -------------------------------------------------- */

    .site-header {
      position: sticky;
      z-index: 50;
      top: 0;
      background: rgb(247 248 250 / 88%);
      border-bottom: 1px solid rgb(229 232 238 / 75%);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }

    .header-inner {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      padding-block: 14px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
      font-size: 23px;
      font-weight: 750;
      letter-spacing: -.055em;
      line-height: 1;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      overflow: hidden;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px 24px;
      width: 100%;
      padding-top: 10px;
    }

    .nav-menu > a:not(.button) {
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
      transition: color .2s;
    }

    .nav-menu > a[aria-current="location"] {
      color: var(--ink);
    }

    .nav-menu .button {
      min-height: 42px;
      padding: 10px 16px;
      font-size: 13px;
    }

    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      background: white;
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    .js .menu-toggle {
      display: inline-flex;
    }

    .js .nav-menu {
      display: none;
      align-items: stretch;
      flex-direction: column;
      gap: 4px;
      padding: 8px 0 4px;
    }

    .js .nav-menu.is-open {
      display: flex;
    }

    .js .nav-menu > a:not(.button) {
      padding: 12px 4px;
    }

    .menu-toggle .close-icon,
    .menu-toggle[aria-expanded="true"] .menu-icon {
      display: none;
    }

    .menu-toggle[aria-expanded="true"] .close-icon {
      display: block;
    }

    /* --------------------------------------------------
       Hero
    -------------------------------------------------- */

    .hero {
      position: relative;
      overflow: hidden;
      padding-block: 56px 40px;
      background:
        radial-gradient(ellipse at 95% 30%, #e9e6f6 0%, transparent 42%),
        radial-gradient(ellipse at 77% 75%, #e4f1ec 0%, transparent 35%);
    }

    .hero::before {
      content: "";
      position: absolute;
      top: 20%;
      right: 8%;
      width: 330px;
      height: 330px;
      background: rgb(214 223 250 / 35%);
      border-radius: 50%;
      filter: blur(60px);
      pointer-events: none;
      animation: ambient 16s ease-in-out infinite alternate;
    }

    .hero-grid {
      position: relative;
      display: grid;
      gap: 42px;
      align-items: center;
    }

    .hero-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 26px;
      padding: 7px 11px;
      border: 1px solid #e2e5e9;
      border-radius: 100px;
      color: #535b6b;
      background: rgb(255 255 255 / 65%);
      font-size: 11px;
      font-weight: 550;
    }

    .status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4caa89;
      box-shadow: 0 0 0 4px rgb(76 170 137 / 10%);
      flex: 0 0 auto;
    }

    .hero h1 {
      max-width: 650px;
      font-size: clamp(42px, 6.1vw, 76px);
      letter-spacing: -.065em;
      line-height: 1.045;
    }

    .hero h1 span {
      color: #83899a;
    }

    .hero-copy > p {
      max-width: 460px;
      margin-top: 25px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.8;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 30px;
    }

    .hero-note {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 14px;
      margin-top: 17px;
      color: var(--muted);
      font-size: 12px;
    }

    .hero-note span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .hero-note .icon {
      width: 14px;
      height: 14px;
      color: var(--green);
    }

    .hero-visual {
      position: relative;
      min-width: 0;
      padding: 25px 0 42px;
    }

    .radar-rings {
      position: absolute;
      inset: -30px -25px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .radar-rings span {
      position: absolute;
      width: 78%;
      aspect-ratio: 1;
      border: 1px solid rgb(150 164 184 / 14%);
      border-radius: 50%;
    }

    .radar-rings span:nth-child(2) {
      width: 110%;
    }

    .radar-rings span:nth-child(3) {
      width: 141%;
    }

    .hero-app {
      position: relative;
      z-index: 1;
      width: min(100%, 470px);
      margin-inline: auto;
      overflow: hidden;
      background: rgb(255 255 255 / 86%);
      border: 1px solid rgb(255 255 255 / 90%);
      border-radius: 20px;
      box-shadow:
        0 30px 80px -28px rgb(52 62 89 / 24%),
        0 2px 5px rgb(52 62 89 / 4%);
      transform: rotate(-2deg);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
    }

    .app-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 51px;
      padding: 15px 18px;
      background: rgb(255 255 255 / 70%);
      border-bottom: 1px solid #edf0f4;
    }

    .window-dots {
      display: flex;
      gap: 5px;
    }

    .window-dots i {
      width: 7px;
      height: 7px;
      background: #e2e5ea;
      border-radius: 50%;
    }

    .app-toolbar-label {
      color: #7c8290;
      font-size: 10px;
      font-weight: 500;
    }

    .hero-app-body {
      padding: 20px;
    }

    .monitor-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 20px;
    }

    .monitor-title {
      font-size: 14px;
      font-weight: 650;
    }

    .live-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 6px;
      background: #eef8f3;
      color: var(--green);
      font-size: 9px;
      font-weight: 600;
      white-space: nowrap;
    }

    .live-pill .status-dot {
      width: 4px;
      height: 4px;
      box-shadow: none;
    }

    .keyword-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 16px;
    }

    .keyword {
      padding: 5px 8px;
      border: 1px solid #e6e9ed;
      border-radius: 6px;
      background: #fff;
      color: #687080;
      font-size: 10px;
      line-height: 1.3;
    }

    .lead-preview {
      padding: 15px;
      background: white;
      border: 1px solid #e7eaf0;
      border-radius: 12px;
      box-shadow: 0 5px 15px -12px rgb(27 30 39 / 20%);
    }

    .lead-preview + .lead-preview {
      margin-top: 9px;
    }

    .lead-preview-head {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 10px;
    }

    .mini-avatar {
      width: 29px;
      height: 29px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: var(--violet);
      color: var(--violet-ink);
      font-size: 10px;
      font-weight: 700;
      flex: 0 0 auto;
    }

    .mini-avatar.mint {
      background: #e1f3ec;
      color: #338569;
    }

    .lead-preview-head strong {
      display: block;
      font-size: 10px;
      font-weight: 650;
    }

    .lead-preview-head small {
      display: block;
      color: var(--subtle);
      font-size: 9px;
      margin-top: 1px;
    }

    .lead-preview p {
      font-size: 12px;
      line-height: 1.7;
      color: #4d5564;
    }

    mark {
      padding: 1px 3px;
      border-radius: 4px;
      color: #295e4e;
      background: #e0f3e9;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    .lead-found {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 11px;
      padding-top: 10px;
      border-top: 1px solid #f0f1f4;
      color: #3b8a6e;
      font-size: 9px;
      font-weight: 550;
    }

    .lead-found .icon {
      width: 11px;
      height: 11px;
    }

    .floating-card {
      position: absolute;
      z-index: 2;
      right: 0;
      bottom: 10px;
      display: flex;
      align-items: center;
      gap: 11px;
      max-width: calc(100% - 20px);
      padding: 13px 16px;
      background: rgb(255 255 255 / 94%);
      border: 1px solid white;
      border-radius: 14px;
      box-shadow: 0 15px 40px -16px rgb(56 64 88 / 28%);
      transform: rotate(3deg);
    }

    .floating-icon {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      background: var(--violet);
      color: var(--violet-ink);
      border-radius: 10px;
    }

    .floating-card strong {
      display: block;
      font-size: 11px;
      font-weight: 650;
    }

    .floating-card small {
      display: block;
      color: var(--muted);
      font-size: 10px;
    }

    .visual-caption {
      position: relative;
      margin-top: 15px;
      color: #7b8291;
      font-size: 10px;
      text-align: center;
    }

    /* --------------------------------------------------
       Product proof
    -------------------------------------------------- */

    .proof {
      position: relative;
      padding-block: 30px 45px;
    }

    .proof-inner {
      padding-block: 30px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .proof-label {
      margin-bottom: 26px;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    .proof-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 25px 15px;
      text-align: center;
    }

    .proof-item strong {
      display: block;
      margin-bottom: 3px;
      font-size: 25px;
      letter-spacing: -.045em;
      font-weight: 650;
      line-height: 1.2;
    }

    .proof-item span {
      color: var(--muted);
      font-size: 11px;
    }

    /* --------------------------------------------------
       Features
    -------------------------------------------------- */

    .feature-grid {
      display: grid;
      gap: 16px;
    }

    .feature-card {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 26px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      transition: transform .3s var(--ease), box-shadow .3s ease;
    }

    .feature-card.large {
      min-height: 340px;
    }

    .feature-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin-bottom: 24px;
      border: 1px solid #e5ede9;
      border-radius: 12px;
      background: #f0f8f4;
      color: #39876d;
    }

    .feature-icon.purple {
      color: var(--violet-ink);
      background: #f4f1fb;
      border-color: #ece6f7;
    }

    .feature-icon.neutral {
      color: #717887;
      background: #f7f8fa;
      border-color: #eceef2;
    }

    .feature-card h3 {
      margin-bottom: 12px;
      font-size: 22px;
      letter-spacing: -.035em;
    }

    .feature-card p {
      max-width: 425px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.75;
    }

    .feature-visual {
      position: relative;
      min-height: 130px;
      margin: 24px -26px -26px;
      padding: 22px 26px;
      background:
        linear-gradient(0deg, #f2f8f5, rgb(242 248 245 / 0));
    }

    .filter-flow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 13px;
      min-height: 104px;
    }

    .flow-stack {
      display: flex;
      flex-direction: column;
      gap: 7px;
      width: 32%;
    }

    .flow-line {
      height: 25px;
      padding: 7px 9px;
      background: white;
      border: 1px solid #e5e9e8;
      border-radius: 6px;
    }

    .flow-line::after {
      content: "";
      display: block;
      width: 75%;
      height: 5px;
      border-radius: 2px;
      background: #e7eae9;
    }

    .flow-line:nth-child(2) {
      transform: translateX(6px);
    }

    .flow-line:nth-child(3) {
      opacity: .6;
    }

    .filter-node {
      position: relative;
      display: grid;
      place-items: center;
      width: 51px;
      height: 51px;
      flex: 0 0 auto;
      color: #42896f;
      background: #e6f4ed;
      border: 1px solid #cbe8da;
      border-radius: 15px;
      box-shadow: 0 0 0 7px rgb(223 241 232 / 40%);
    }

    .flow-result {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 12px 10px;
      background: white;
      border: 1px solid #dae9e0;
      border-radius: 9px;
      color: #398469;
      font-size: 10px;
      font-weight: 600;
      white-space: nowrap;
      box-shadow: 0 8px 20px -12px #9bbcaf;
    }

    .flow-result .icon {
      width: 15px;
      height: 15px;
    }

    .feature-visual.purple {
      background: linear-gradient(0deg, #f5f2fc, transparent);
    }

    .search-visual {
      max-width: 340px;
      margin-inline: auto;
      padding: 13px 16px;
      border: 1px solid #e7e1f1;
      border-radius: 11px;
      background: white;
      box-shadow: 0 8px 20px -15px #8b77b4;
    }

    .search-visual-top {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #665b80;
      font-size: 12px;
    }

    .search-visual-top .icon {
      width: 16px;
      height: 16px;
      color: #9a88c0;
    }

    .search-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 12px;
    }

    .search-tags span {
      padding: 3px 7px;
      border-radius: 5px;
      background: #f4f1f9;
      color: #8a78ac;
      font-size: 9px;
    }

    .export-label {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      margin-top: 13px;
      color: #9284a9;
      font-size: 10px;
    }

    .export-label .icon {
      width: 13px;
      height: 13px;
    }

    .feature-card.small h3 {
      font-size: 19px;
    }

    .feature-card.small .feature-icon {
      margin-bottom: 20px;
    }

    /* --------------------------------------------------
       How it works
    -------------------------------------------------- */

    .workflow-grid {
      display: grid;
      gap: 18px;
    }

    .workflow {
      padding: 27px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .workflow-header {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-bottom: 27px;
      padding-bottom: 22px;
      border-bottom: 1px solid var(--line);
    }

    .workflow-header .feature-icon {
      width: 38px;
      height: 38px;
      margin: 0;
      flex: 0 0 auto;
    }

    .workflow-header h3 {
      font-size: 18px;
      letter-spacing: -.025em;
    }

    .workflow-header p {
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
    }

    .steps {
      display: grid;
      gap: 26px;
      counter-reset: steps;
    }

    .steps li {
      position: relative;
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 14px;
      counter-increment: steps;
    }

    .steps li::before {
      content: counter(steps, decimal-leading-zero);
      display: grid;
      place-items: center;
      align-self: start;
      width: 28px;
      height: 28px;
      border: 1px solid #e6e9ed;
      border-radius: 8px;
      background: #f9fafb;
      color: #818897;
      font-size: 10px;
      font-weight: 600;
    }

    .steps li:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 36px;
      bottom: -18px;
      left: 13px;
      width: 1px;
      background: #eceef2;
    }

    .steps strong {
      display: block;
      margin: 3px 0 6px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
    }

    .steps p {
      max-width: 365px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }

    .workflow-bottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 12px 20px;
      margin-top: 25px;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

    .workflow-bottom .text-link {
      color: var(--ink);
      font-size: 13px;
    }

    /* --------------------------------------------------
       Product showcase
    -------------------------------------------------- */

    .showcase-shell {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: white;
      box-shadow: 0 15px 50px -35px rgb(40 45 59 / 20%);
    }

    .showcase-topbar {
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding: 20px;
      border-bottom: 1px solid var(--line);
    }

    .showcase-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
    }

    .showcase-title .icon {
      width: 17px;
      height: 17px;
      color: var(--subtle);
    }

    .tabs {
      display: none;
      gap: 4px;
      padding: 4px;
      border: 1px solid #e9ebf0;
      border-radius: 11px;
      background: #f5f6f8;
    }

    .js .tabs {
      display: flex;
    }

    .tab {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      flex: 1;
      padding: 9px 12px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: var(--muted);
      font-size: 11px;
      font-weight: 550;
      white-space: nowrap;
      transition: color .2s, background .2s, box-shadow .2s;
    }

    .tab .icon {
      width: 14px;
      height: 14px;
    }

    .tab[aria-selected="true"] {
      color: var(--ink);
      background: #fff;
      box-shadow: 0 1px 5px rgb(25 30 45 / 9%);
    }

    .showcase-panel {
      display: grid;
      min-width: 0;
    }

    .showcase-panel + .showcase-panel {
      border-top: 1px solid var(--line);
    }

    .showcase-copy {
      align-self: center;
      padding: 30px;
    }

    .showcase-number {
      display: block;
      margin-bottom: 20px;
      color: #b1b7c3;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
    }

    .showcase-copy h3 {
      max-width: 350px;
      margin-bottom: 16px;
      font-size: clamp(27px, 3.2vw, 38px);
      letter-spacing: -.045em;
    }

    .showcase-copy > p {
      max-width: 360px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
    }

    .check-list {
      display: grid;
      gap: 12px;
      margin-block: 23px 28px;
    }

    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      color: #515a68;
      font-size: 12px;
    }

    .check-list .icon {
      width: 15px;
      height: 15px;
      margin-top: 2px;
      color: #428c71;
    }

    .showcase-stage {
      display: grid;
      align-content: center;
      justify-items: center;
      min-width: 0;
      padding: 28px 20px;
      background:
        radial-gradient(ellipse at 75% 0%, #e4e7f5, transparent 60%),
        #edf2f3;
    }

    .showcase-stage.purple {
      background:
        radial-gradient(ellipse at 65% 10%, #e1daf4, transparent 65%),
        #efedf5;
    }

    .telegram-window {
      width: min(100%, 365px);
      overflow: hidden;
      border: 1px solid rgb(255 255 255 / 90%);
      border-radius: 17px;
      background: #e6eee9;
      box-shadow: 0 20px 40px -20px rgb(37 54 70 / 27%);
    }

    .telegram-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      background: rgb(255 255 255 / 97%);
      border-bottom: 1px solid rgb(188 203 196 / 20%);
    }

    .telegram-head > .icon {
      width: 17px;
      height: 17px;
      color: #859197;
    }

    .telegram-head .brand-mark {
      width: 32px;
      height: 32px;
      border-radius: 10px;
    }

    .telegram-head strong {
      display: block;
      font-size: 12px;
      line-height: 1.3;
    }

    .telegram-head small {
      display: block;
      margin-top: 2px;
      font-size: 10px;
      color: var(--subtle);
      line-height: 1.3;
    }

    .telegram-head .more {
      margin-left: auto;
    }

    .telegram-body {
      display: grid;
      gap: 11px;
      min-height: 335px;
      align-content: start;
      padding: 17px 14px;
      background-image:
        radial-gradient(rgb(79 105 91 / 8%) .7px, transparent .7px);
      background-size: 12px 12px;
    }

    .chat-date {
      justify-self: center;
      padding: 3px 9px;
      border-radius: 20px;
      background: rgb(64 91 76 / 19%);
      color: #fff;
      font-size: 9px;
      line-height: 1.4;
    }

    .chat-bubble {
      width: 93%;
      padding: 13px;
      border-radius: 11px 11px 11px 3px;
      background: #fff;
      box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
      font-size: 11px;
      line-height: 1.65;
      color: #3f4c49;
    }

    .chat-bubble strong {
      font-weight: 650;
    }

    .chat-bubble > p + p {
      margin-top: 8px;
    }

    .chat-bubble .bubble-title {
      margin-bottom: 8px;
      color: #257c61;
      font-weight: 650;
    }

    .chat-quote {
      margin-block: 10px;
      padding: 7px 10px;
      background: #f1f7f4;
      border-left: 2px solid #83b5a2;
      border-radius: 0 5px 5px 0;
    }

    .chat-meta {
      color: #84938b;
      font-size: 9px;
    }

    .mock-chat-action {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin-top: 10px;
      padding: 8px;
      border-radius: 7px;
      background: #edf5f1;
      color: #36866c;
      font-size: 10px;
      font-weight: 600;
    }

    .mock-chat-action .icon {
      width: 12px;
      height: 12px;
    }

    .chat-bubble.outgoing {
      justify-self: end;
      width: auto;
      max-width: 93%;
      background: #d8edcf;
      border-radius: 11px 11px 3px 11px;
    }

    .chat-time {
      margin-top: 5px;
      color: #8a9b8c;
      font-size: 9px;
      text-align: right;
    }

    .file-preview {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 9px;
      padding: 10px;
      border-radius: 8px;
      background: #f3f7f5;
    }

    .file-icon {
      display: grid;
      place-items: center;
      width: 34px;
      height: 38px;
      border-radius: 7px;
      background: #dfefe6;
      color: #38815e;
    }

    .file-preview strong {
      font-size: 10px;
    }

    .file-preview small {
      display: block;
      color: #8a958f;
      font-size: 9px;
    }

    .telegram-input {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 12px 12px;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgb(255 255 255 / 90%);
      color: #9ba5a0;
      font-size: 11px;
    }

    .telegram-input .icon {
      width: 17px;
      height: 17px;
    }

    .telegram-input .icon:last-child {
      margin-left: auto;
      color: #7a9b8b;
    }

    .stage-caption {
      max-width: 365px;
      margin-top: 16px;
      color: #7e8791;
      font-size: 10px;
      text-align: center;
      line-height: 1.6;
    }

    /* --------------------------------------------------
       Benefits
    -------------------------------------------------- */

    .benefits-strip {
      display: grid;
      gap: 26px;
      padding-top: 34px;
    }

    .benefit {
      display: flex;
      gap: 13px;
      align-items: flex-start;
    }

    .benefit > .icon {
      width: 21px;
      height: 21px;
      margin-top: 2px;
      color: #9098a6;
    }

    .benefit h3 {
      margin-bottom: 7px;
      font-size: 14px;
      letter-spacing: -.015em;
    }

    .benefit p {
      max-width: 310px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.7;
    }

    /* --------------------------------------------------
       Pricing
    -------------------------------------------------- */

    .pricing-heading {
      display: flex;
      flex-direction: column;
      gap: 22px;
      align-items: flex-start;
      margin-bottom: 34px;
    }

    .pricing-heading .section-heading {
      margin-bottom: 0;
    }

    .billing-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      padding: 9px 13px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: white;
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .billing-label .icon {
      width: 14px;
      height: 14px;
    }

    .pricing-grid {
      display: grid;
      gap: 15px;
    }

    .price-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 25px 22px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: white;
      transition: transform .3s var(--ease), box-shadow .3s ease;
    }

    .price-card.featured {
      border-color: var(--ink);
      box-shadow: 0 12px 35px -22px rgb(27 30 39 / 35%);
    }

    .price-card.featured::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      border-radius: 19px 19px 0 0;
      background: var(--ink);
    }

    .price-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 25px;
      margin-bottom: 12px;
    }

    .price-card h3 {
      font-size: 17px;
      letter-spacing: -.025em;
    }

    .plan-badge {
      padding: 4px 7px;
      border-radius: 5px;
      background: var(--mint);
      color: #29674f;
      font-size: 9px;
      font-weight: 650;
      line-height: 1.3;
    }

    .price-description {
      min-height: 40px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
    }

    .price {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 5px;
      margin-block: 24px 23px;
    }

    .price strong {
      font-size: 35px;
      font-weight: 650;
      letter-spacing: -.055em;
      line-height: 1;
      white-space: nowrap;
    }

    .price span {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .price-card .button {
      width: 100%;
      min-height: 43px;
      font-size: 12px;
    }

    .plan-features {
      display: grid;
      gap: 14px;
      margin-top: 24px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
    }

    .plan-features li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      color: #596170;
      font-size: 12px;
      line-height: 1.5;
    }

    .plan-features .icon {
      width: 14px;
      height: 14px;
      margin-top: 2px;
      color: #8b96a3;
    }

    .featured .plan-features .icon {
      color: #458c71;
    }

    .plan-features small {
      display: block;
      margin-top: 2px;
      color: #888f9c;
      font-size: 10px;
    }

    .plan-caption {
      margin-top: auto;
      padding-top: 24px;
      color: #747d8b;
      font-size: 10px;
    }

    .pricing-footnote {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 21px;
      color: var(--muted);
      font-size: 11px;
    }

    .pricing-footnote span {
      display: flex;
      align-items: flex-start;
      gap: 7px;
    }

    .pricing-footnote .icon {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      margin-top: 2px;
      color: #929ba7;
    }

    .referral-banner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
      margin-top: 27px;
      padding: 21px 24px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #f0f2f6;
    }

    .referral-copy {
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .referral-copy > .icon {
      width: 23px;
      height: 23px;
      color: #8c83a7;
    }

    .referral-copy strong {
      display: block;
      font-size: 13px;
      font-weight: 600;
    }

    .referral-copy p {
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
    }

    .referral-banner .text-link {
      font-size: 12px;
      white-space: nowrap;
    }

    /* --------------------------------------------------
       Use cases — no fabricated testimonials
    -------------------------------------------------- */

    .scenario-grid {
      display: grid;
      gap: 16px;
    }

    .scenario-card {
      display: flex;
      flex-direction: column;
      padding: 25px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: white;
      transition: transform .3s var(--ease), box-shadow .3s ease;
    }

    .scenario-tag {
      display: inline-flex;
      align-self: flex-start;
      padding: 5px 9px;
      margin-bottom: 23px;
      border-radius: 6px;
      background: #f0ecfa;
      color: #806aab;
      font-size: 10px;
      font-weight: 550;
    }

    .scenario-tag.green {
      background: #eaf4ef;
      color: #56816d;
    }

    .scenario-tag.peach {
      background: #fbefe7;
      color: #a37f61;
    }

    .scenario-card h3 {
      margin-bottom: 14px;
      font-size: 21px;
      letter-spacing: -.03em;
      line-height: 1.3;
    }

    .scenario-card > p {
      margin-bottom: 25px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.8;
    }

    .scenario-result {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: auto;
      padding-top: 17px;
      border-top: 1px solid var(--line);
      font-size: 11px;
      font-weight: 550;
      color: #5c6574;
    }

    .scenario-result .icon {
      width: 14px;
      height: 14px;
      margin-top: 2px;
      color: #8b97a3;
    }

    .scenario-disclaimer {
      margin-top: 18px;
      color: #7c8492;
      font-size: 11px;
      text-align: center;
    }

    /* --------------------------------------------------
       FAQ
    -------------------------------------------------- */

    .faq-grid {
      display: grid;
      gap: 30px;
    }

    .faq-intro .section-heading {
      margin-bottom: 22px;
    }

    .faq-intro > p {
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 13px;
    }

    .faq-list {
      border-top: 1px solid var(--line);
    }

    .faq-item {
      border-bottom: 1px solid var(--line);
    }

    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: 75px;
      padding: 21px 0;
      cursor: pointer;
      list-style: none;
      font-size: 14px;
      font-weight: 550;
      line-height: 1.5;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-plus {
      position: relative;
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
      border: 1px solid #e4e7ed;
      border-radius: 7px;
      background: white;
    }

    .faq-plus::before,
    .faq-plus::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 8px;
      height: 1px;
      background: #798190;
      transform: translate(-50%, -50%);
    }

    .faq-plus::after {
      transform: translate(-50%, -50%) rotate(90deg);
      transition: transform .2s ease, opacity .2s ease;
    }

    .faq-item[open] .faq-plus::after {
      transform: translate(-50%, -50%) rotate(0);
      opacity: 0;
    }

    .faq-answer {
      max-width: 580px;
      padding: 0 35px 24px 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.85;
    }

    .faq-answer p + p {
      margin-top: 10px;
    }

    .faq-answer a {
      color: var(--ink);
      text-decoration: underline;
      text-decoration-color: #b7bdc8;
      text-underline-offset: 3px;
    }

    /* --------------------------------------------------
       Final CTA & footer
    -------------------------------------------------- */

    .final-section {
      padding-block: 40px 60px;
    }

    .final-cta {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      padding: 50px 25px;
      background: #20262e;
      border: 1px solid #343b43;
      border-radius: 28px;
      color: white;
      text-align: center;
    }

    .final-cta::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: -50%;
      background:
        radial-gradient(ellipse at 75% 55%, rgb(116 89 161 / 38%), transparent 34%),
        radial-gradient(ellipse at 28% 80%, rgb(57 114 103 / 65%), transparent 40%);
      animation: ambient 20s ease-in-out infinite alternate;
      pointer-events: none;
    }

    .final-cta::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      opacity: .07;
      background-image:
        linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px);
      background-size: 55px 55px;
      -webkit-mask-image: linear-gradient(90deg, #000, transparent 45%, #000);
      mask-image: linear-gradient(90deg, #000, transparent 45%, #000);
      pointer-events: none;
    }

    .final-symbol {
      display: grid;
      place-items: center;
      width: 47px;
      height: 47px;
      margin: 0 auto 26px;
      border: 1px solid rgb(255 255 255 / 16%);
      border-radius: 14px;
      color: var(--mint-strong);
      background: rgb(255 255 255 / 5%);
      box-shadow: 0 10px 25px rgb(0 0 0 / 8%);
    }

    .final-symbol .icon {
      width: 23px;
      height: 23px;
    }

    .final-cta h2 {
      max-width: 700px;
      margin-inline: auto;
      font-size: clamp(33px, 4.5vw, 52px);
      letter-spacing: -.045em;
      line-height: 1.12;
    }

    .final-cta > p {
      max-width: 475px;
      margin: 20px auto 27px;
      color: #bfc9cc;
      font-size: 14px;
      line-height: 1.8;
    }

    .final-cta .button {
      min-height: 49px;
      padding-inline: 23px;
    }

    .final-note {
      display: block;
      margin-top: 16px;
      color: #aebdc0;
      font-size: 11px;
    }

    .site-footer {
      padding-block: 12px 25px;
    }

    .footer-main {
      display: grid;
      gap: 30px;
      padding-bottom: 35px;
      border-bottom: 1px solid var(--line);
    }

    .footer-brand > p {
      max-width: 245px;
      margin-top: 15px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.8;
    }

    .footer-links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 25px;
    }

    .footer-column h3 {
      margin-bottom: 15px;
      color: #8b929f;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .footer-column ul {
      display: grid;
      gap: 10px;
    }

    .footer-column a {
      color: #586170;
      font-size: 12px;
      overflow-wrap: anywhere;
    }

    .footer-bottom {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-top: 20px;
      color: #858d9a;
      font-size: 10px;
    }

    .footer-bottom p:last-child {
      max-width: 465px;
    }

    /* --------------------------------------------------
       Motion & responsive
    -------------------------------------------------- */

    @keyframes ambient {
      from { transform: translate3d(0, 0, 0) scale(1); }
      to { transform: translate3d(-24px, 14px, 0) scale(1.06); }
    }

    .reveal {
      opacity: 1;
      transform: none;
    }

    .reveal.will-reveal {
      opacity: 0;
      transform: translateY(18px);
    }

    .reveal.will-reveal.is-visible {
      opacity: 1;
      transform: none;
      transition:
        opacity .7s var(--ease),
        transform .7s var(--ease);
      transition-delay: var(--delay, 0ms);
    }

    @media (hover: hover) {
      .button:hover {
        transform: translateY(-2px);
      }

      .button-dark:hover {
        background: #353b47;
        box-shadow: 0 7px 15px rgb(27 30 39 / 14%);
      }

      .button-light:hover {
        border-color: #c9cfd9;
        box-shadow: 0 5px 12px rgb(27 30 39 / 5%);
      }

      .button-mint:hover {
        background: #b0f0dd;
        box-shadow: 0 5px 20px rgb(98 195 164 / 15%);
      }

      .feature-card:hover,
      .scenario-card:hover,
      .price-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
      }

      .text-link:hover .icon {
        transform: translateX(3px);
      }

      .nav-menu > a:not(.button):hover,
      .footer-column a:hover {
        color: var(--ink);
      }

      .faq-item summary:hover {
        color: #527a6e;
      }

      .tab:not([aria-selected="true"]):hover {
        color: var(--ink);
        background: #ebeef3;
      }
    }

    @media (min-width: 600px) {
      .container {
        width: min(var(--container), calc(100% - 64px));
      }

      .section {
        padding-block: 82px;
      }

      .hero {
        padding-top: 68px;
      }

      .hero-copy > p {
        font-size: 17px;
      }

      .hero-visual {
        width: min(100%, 560px);
        margin-inline: auto;
      }

      .hero-app {
        width: 440px;
      }

      .hero-app-body {
        padding: 24px;
      }

      .lead-preview p {
        font-size: 13px;
      }

      .proof-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
      }

      .proof-item + .proof-item {
        border-left: 1px solid var(--line);
      }

      .proof-item strong {
        font-size: 28px;
      }

      .proof-item span {
        font-size: 12px;
      }

      .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .feature-card.small:last-child {
        grid-column: 1 / -1;
      }

      .feature-card {
        padding: 30px;
      }

      .feature-visual {
        margin: auto -30px -30px;
        padding: 28px 20px;
      }

      .feature-card.large p {
        margin-bottom: 18px;
      }

      .feature-card.large {
        min-height: 390px;
      }

      .filter-flow {
        gap: 10px;
      }

      .flow-stack {
        width: 28%;
      }

      .workflow {
        padding: 32px;
      }

      .showcase-topbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 18px 25px;
      }

      .tabs {
        flex: 0 0 auto;
      }

      .showcase-copy {
        padding: 40px;
      }

      .showcase-stage {
        padding: 35px;
      }

      .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .price-card {
        padding: 28px;
      }

      .scenario-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .scenario-card:last-child {
        grid-column: 1 / -1;
      }

      .scenario-card:last-child > p {
        max-width: 600px;
      }

      .final-cta {
        padding: 65px 40px;
      }

      .footer-main {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (min-width: 900px) {
      .header-inner {
        flex-wrap: nowrap;
      }

      .menu-toggle,
      .js .menu-toggle {
        display: none;
      }

      .nav-menu,
      .js .nav-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 27px;
        width: auto;
        padding: 0;
      }

      .js .nav-menu > a:not(.button) {
        padding: 0;
      }

      .nav-menu .button {
        margin-left: 8px;
      }

      .hero {
        padding-block: 83px 64px;
      }

      .hero-grid {
        grid-template-columns: 1.08fr 1fr;
        gap: 35px;
      }

      .hero-visual {
        min-height: 440px;
        padding-top: 32px;
      }

      .hero-app {
        width: min(100%, 450px);
      }

      .floating-card {
        right: -8px;
        bottom: 20px;
      }

      .hero-visual .visual-caption {
        margin-top: 26px;
      }

      .proof {
        padding-block: 0 32px;
      }

      .proof-inner {
        padding-block: 33px;
      }

      .proof-label {
        margin-bottom: 28px;
      }

      .section-heading {
        margin-bottom: 40px;
      }

      .feature-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }

      .feature-card.large {
        grid-column: span 3;
        min-height: 378px;
      }

      .feature-card.small,
      .feature-card.small:last-child {
        grid-column: span 2;
      }

      .feature-card.small {
        padding: 27px;
      }

      .feature-card.large h3 {
        font-size: 25px;
      }

      .filter-flow {
        gap: 24px;
      }

      .flow-stack {
        width: 30%;
      }

      .flow-result {
        padding: 13px 17px;
        font-size: 11px;
      }

      .workflow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .showcase-panel {
        grid-template-columns: .92fr 1.08fr;
        min-height: 535px;
      }

      .showcase-panel + .showcase-panel {
        border-top: 0;
      }

      .showcase-copy {
        padding: 44px;
      }

      .showcase-stage {
        padding: 38px;
      }

      .telegram-body {
        min-height: 340px;
      }

      .benefits-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
      }

      .pricing-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
      }

      .billing-label {
        margin-bottom: 5px;
      }

      .pricing-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 13px;
      }

      .price-card {
        padding: 27px 21px;
      }

      .price strong {
        font-size: 32px;
      }

      .price-description {
        min-height: 43px;
      }

      .pricing-footnote {
        flex-direction: row;
        justify-content: space-between;
        gap: 30px;
      }

      .referral-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .scenario-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .scenario-card:last-child {
        grid-column: auto;
      }

      .scenario-card {
        padding: 28px;
      }

      .faq-grid {
        grid-template-columns: .8fr 1.2fr;
        gap: 65px;
      }

      .faq-intro {
        padding-top: 10px;
      }

      .footer-main {
        grid-template-columns: 1.3fr 1fr;
        gap: 80px;
      }

      .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        gap: 30px;
      }

      .footer-bottom p:last-child {
        text-align: right;
      }
    }

    @media (min-width: 1100px) {
      .section {
        padding-block: 96px;
      }

      .hero {
        padding-block: 97px 72px;
      }

      .hero-grid {
        gap: 55px;
      }

      .hero h1 {
        font-size: 75px;
      }

      .hero-visual {
        padding-top: 30px;
      }

      .hero-app {
        width: 455px;
      }

      .floating-card {
        right: -6px;
        bottom: 10px;
        padding: 15px 19px;
      }

      .floating-card strong {
        font-size: 12px;
      }

      .hero-app-body {
        padding: 25px;
      }

      .lead-preview {
        padding: 17px;
      }

      .lead-preview-head strong {
        font-size: 11px;
      }

      .price-card {
        padding: 28px 25px;
      }

      .price strong {
        font-size: 35px;
      }

      .showcase-copy {
        padding: 56px;
      }

      .final-section {
        padding-block: 35px 72px;
      }

      .final-cta {
        padding-block: 74px;
      }
    }

    @media (max-width: 359px) {
      .container {
        width: calc(100% - 28px);
      }

      .hero h1 {
        font-size: 38px;
      }

      .hero-label {
        font-size: 10px;
      }

      .hero-actions .button {
        width: 100%;
      }

      .hero-app {
        transform: none;
      }

      .hero-app-body {
        padding: 15px;
      }

      .feature-card {
        padding: 22px;
      }

      .feature-visual {
        margin-inline: -22px;
        margin-bottom: -22px;
        padding-inline: 16px;
      }

      .filter-flow {
        gap: 10px;
      }

      .filter-node {
        width: 43px;
        height: 43px;
      }

      .tab {
        padding-inline: 7px;
        font-size: 10px;
      }

      .showcase-copy {
        padding: 25px;
      }

      .showcase-stage {
        padding-inline: 14px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }

      .reveal.will-reveal,
      .reveal.will-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
      }
    }

        /* Читаемые адреса чатов в инфографике мониторинга */

    .lead-flow-visual {
      container-type: inline-size;
    }

    .lead-flow-visual .filter-flow {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 12px 44px 12px auto;
      gap: 8px;
      min-height: 112px;
    }

    .lead-flow-visual .flow-stack {
      width: 100%;
      min-width: 0;
      gap: 8px;
    }

    .lead-flow-visual .flow-line {
      display: flex;
      align-items: center;
      gap: 7px;
      width: 100%;
      height: 30px;
      padding: 7px 9px;
      border: 1px solid #e0e8e3;
      border-radius: 7px;
      background: rgb(255 255 255 / 94%);
      box-shadow: 0 3px 8px -6px rgb(45 74 60 / 16%);
    }

    /* Убираем прежнюю серую полоску внутри плашки. */
    .lead-flow-visual .flow-line::after {
      content: none;
    }

    .lead-flow-visual .flow-line > .icon {
      width: 12px;
      height: 12px;
      color: #9aafa2;
    }

    .lead-flow-visual .flow-line > span {
      min-width: 0;
      overflow: hidden;
      color: #788b7f;
      font-family:
        "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-size: 9px;
      line-height: 1.4;
      letter-spacing: -.025em;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .lead-flow-visual .flow-line:nth-child(2) {
      transform: translateX(4px);
    }

    .lead-flow-visual .flow-line:nth-child(3) {
      opacity: .8;
    }

    .lead-flow-visual .flow-connector {
      width: 12px;
      height: 12px;
      color: #b5c8bd;
    }

    .lead-flow-visual .filter-node {
      width: 44px;
      height: 44px;
      border-radius: 13px;
    }

    .lead-flow-visual .flow-result {
      gap: 5px;
      padding: 11px 9px;
      font-size: 9px;
    }

    .lead-flow-visual .flow-result .icon {
      width: 13px;
      height: 13px;
    }

    /*
      На узкой карточке складываем схему в два ряда:
      все три адреса остаются видны, а не превращаются в многоточия.
    */
    @container (max-width: 390px) {
      .lead-flow-visual .filter-flow {
        grid-template-columns: minmax(0, 1fr) 16px auto;
        gap: 13px 10px;
        max-width: 290px;
        margin-inline: auto;
      }

      .lead-flow-visual .flow-stack {
        grid-column: 1 / -1;
        width: calc(100% - 8px);
      }

      .lead-flow-visual .flow-line > span {
        font-size: 10px;
      }

      .lead-flow-visual .flow-connector:nth-child(2) {
        display: none;
      }

      .lead-flow-visual .filter-node {
        grid-column: 1;
        justify-self: end;
      }

      .lead-flow-visual .flow-connector:nth-child(4) {
        grid-column: 2;
      }

      .lead-flow-visual .flow-result {
        grid-column: 3;
        padding: 12px;
        font-size: 10px;
      }
    }
        /* ==================================================
       Pricing — billing period
    ================================================== */

    #pricing [hidden] {
      display: none !important;
    }

    #pricing .pricing-heading {
      display: block;
    }

    #pricing .pricing-heading .section-heading {
      margin-bottom: 0;
    }

    .pricing-billing {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin: 30px 0 32px;
      text-align: center;
    }

    .pricing-period-switch {
      display: inline-flex;
      align-items: stretch;
      gap: 5px;
      max-width: 100%;
      padding: 5px;
      border: 1px solid #e1e5e9;
      border-radius: 15px;
      background: #eef0f3;
      box-shadow: inset 0 1px 2px rgb(25 32 40 / 3%);
    }

    .pricing-period-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-width: 112px;
      min-height: 44px;
      padding: 10px 18px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: #79828e;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
      cursor: pointer;
      touch-action: manipulation;
      transition:
        background .2s,
        color .2s,
        border-color .2s,
        box-shadow .2s;
    }

    .pricing-period-button[aria-pressed="true"] {
      border-color: #e2e6ea;
      background: #fff;
      color: #1b1e27;
      box-shadow:
        0 2px 5px rgb(28 36 44 / 4%),
        0 1px 2px rgb(28 36 44 / 3%);
    }

    .pricing-period-button:focus-visible {
      outline: 3px solid #7668c9;
      outline-offset: 3px;
    }

    .pricing-period-benefit {
      padding: 3px 6px;
      border: 1px solid #dce8df;
      border-radius: 5px;
      background: #eaf3ed;
      color: #477358;
      font-size: 10px;
      font-weight: 650;
      white-space: nowrap;
    }

    .pricing-billing-caption {
      margin: 0;
      color: #85908b;
      font-size: 11px;
      line-height: 1.7;
    }

    /* Цена и фактический платёж */

    #pricing .price {
      margin-bottom: 0;
    }

    #pricing .price strong {
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    #pricing .price-billing-details {
      min-height: 67px;
      padding-top: 8px;
      margin-bottom: 17px;
    }

    #pricing .price-charge {
      margin: 0;
      color: #7a8490;
      font-size: 11px;
      line-height: 1.7;
      font-variant-numeric: tabular-nums;
    }

    #pricing .price-saving {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px 7px;
      margin: 7px 0 0;
      color: #597562;
      font-size: 10px;
      line-height: 1.6;
      font-variant-numeric: tabular-nums;
    }

    .price-discount {
      display: inline-block;
      padding: 2px 5px;
      border: 1px solid #dce8df;
      border-radius: 5px;
      background: #edf5ef;
      color: #477358;
      font-size: 10px;
      font-weight: 650;
      white-space: nowrap;
    }

    /* Рекомендуемый тариф: одна рамка, без верхних полос */

    #pricing .price-card.featured {
      border: 1px solid #252b32;
      outline: none;
      background: #fff;
      box-shadow: 0 16px 40px -30px rgb(27 30 39 / 25%);
      background-image: none;
    }

    #pricing .price-card.featured::before,
    #pricing .price-card.featured::after {
      content: none;
      display: none;
    }

    #pricing .price-card.featured .price-card-top {
      border-top: 0;
      background: transparent;
      box-shadow: none;
    }

    #pricing .price-card.featured .price-card-top::before,
    #pricing .price-card.featured .price-card-top::after {
      content: none;
      display: none;
    }

    #pricing .price-card.featured .plan-badge {
      position: static;
      inset: auto;
      transform: none;
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      padding: 5px 8px;
      border: 1px solid #e1e6e3;
      border-radius: 7px;
      background: #f0f4f1;
      color: #526e5b;
      box-shadow: none;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.4;
      white-space: nowrap;
    }

    #pricing .price-card.featured .plan-badge::before,
    #pricing .price-card.featured .plan-badge::after {
      content: none;
      display: none;
    }

    .pricing-sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    @media (hover: hover) {
      .pricing-period-button[aria-pressed="false"]:hover {
        background: rgb(255 255 255 / 55%);
        color: #46514c;
      }
    }

    @media (max-width: 599px) {
      .pricing-billing {
        margin-top: 25px;
        margin-bottom: 27px;
      }

      .pricing-period-button {
        min-width: 96px;
        padding-inline: 14px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pricing-period-button {
        transition: none !important;
      }
    }
        /* Более читаемые скидки в карточках тарифов */

    #pricing .price-discount {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 4px 9px;
      border: 1px solid #d3e4d8;
      border-radius: 7px;
      background: #eaf3ed;
      color: #386447;
      font-size: 12px;
      font-weight: 650;
      line-height: 1.4;
      letter-spacing: -.01em;
      white-space: nowrap;
    }

    #pricing .price-saving {
      gap: 6px 8px;
      font-size: 11px;
      line-height: 1.6;
    }

    #pricing .price-billing-details {
      min-height: 78px;
    }