:root {
      --ml-blue: #0f5cf6;
      --ml-blue-dark: #0749d9;
      --ml-navy: #091133;
      --ml-purple: #7625d9;
      --ml-green: #20a246;
      --ml-red: #ef3c4c;
      --ml-orange: #ff8b22;
      --ml-page: #f8faff;
      --ml-white: #ffffff;
      --ml-text: #151a36;
      --ml-muted: #626b86;
      --ml-line: #dfe5f1;
      --ml-shadow: 0 16px 38px rgba(21, 42, 96, 0.10);
      --ml-radius: 15px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body.features-page {
      margin: 0;
      background: var(--ml-page);
      color: var(--ml-text);
      font-family: "Inter", Arial, sans-serif !important;
      font-size: 16px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    body.features-page a {
      color: inherit;
      text-decoration: none;
    }

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

    .ml-container {
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto;
    }

    .section-heading {
      margin: 0 0 28px;
      text-align: center;
    }

    .section-heading h2 {
      margin: 0;
      color: var(--ml-navy);
      font-size: clamp(28px, 3.3vw, 40px);
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: -1.2px;
    }

    .section-heading h2 span {
      color: var(--ml-blue);
    }

    .check-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .check-list li {
      position: relative;
      margin: 10px 0;
      padding-left: 26px;
      color: #28304f;
      font-size: 14px;
      line-height: 1.45;
    }

    .check-list li::before {
      content: "✓";
      position: absolute;
      top: 0;
      left: 0;
      color: var(--ml-green);
      font-weight: 800;
    }

    /* Header */
    .features-page .header-cta,
    .features-page .primary-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 46px;
      padding: 0 24px;
      border: 0;
      border-radius: 8px;
      background: linear-gradient(135deg, #115ff7, #074de2);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 8px 20px rgba(15, 92, 246, 0.24);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .features-page .header-cta:hover,
    .features-page .primary-button:hover {
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 11px 24px rgba(15, 92, 246, 0.30);
    }

    /* Hero */
    .features-hero {
      position: relative;
      overflow: hidden;
      padding: 50px 0 46px;
      background:
        radial-gradient(circle at 93% 45%, rgba(15, 92, 246, 0.08), transparent 22%),
        linear-gradient(180deg, #fff 0%, #fbfcff 100%);
      border-bottom: 1px solid #e6eaf2;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.87fr) minmax(520px, 1.13fr);
      align-items: center;
      gap: 58px;
    }

    .hero-copy h1 {
      margin: 0 0 18px;
      color: var(--ml-navy);
      font-size: clamp(46px, 5.2vw, 68px);
      line-height: 1.04;
      font-weight: 800;
      letter-spacing: -2.5px;
    }

    .hero-copy h1 span {
      display: block;
      color: var(--ml-blue);
    }

    .hero-copy > p {
      max-width: 520px;
      margin: 0 0 24px;
      color: var(--ml-muted);
      font-size: 18px;
      line-height: 1.65;
    }

    .hero-proof {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 20px;
      color: #4d5876;
      font-size: 13px;
      font-weight: 600;
    }

    .hero-stars {
      color: #ffb000;
      letter-spacing: 2px;
    }

    .hero-existing {
      margin-top: 15px;
      color: #39425f;
      font-size: 13px;
      font-weight: 600;
    }

    .hero-existing i {
      margin-right: 8px;
      color: var(--ml-green);
    }

    .chat-stage {
      position: relative;
      min-height: 448px;
      padding: 0 116px 0 0;
    }

    .chat-window {
      position: relative;
      z-index: 2;
      overflow: hidden;
      width: 100%;
      max-width: 540px;
      margin-left: auto;
      border: 1px solid #d9e1f0;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 24px 55px rgba(29, 50, 105, 0.14);
    }

    .chat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 68px;
      padding: 12px 18px;
      border-bottom: 1px solid #e7ebf4;
      background: #fbfcff;
    }

    .chat-agent {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .bot-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 38px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #e8f2ff;
      color: var(--ml-blue);
      font-size: 18px;
    }

    .chat-agent strong {
      display: block;
      color: var(--ml-navy);
      font-size: 15px;
      line-height: 1.1;
    }

    .chat-agent small {
      display: block;
      margin-top: 4px;
      color: #59627c;
      font-size: 11px;
    }

    .online-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-right: 5px;
      border-radius: 50%;
      background: #24b34b;
    }

    .chat-controls {
      color: #7b849c;
      font-size: 14px;
      letter-spacing: 12px;
    }

    .chat-body {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-height: 305px;
      padding: 18px 19px 16px;
      background: #fff;
    }

    .message-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .message-row.visitor {
      margin-right: 60px;
    }

    .message-row.ai {
      margin-left: 22px;
    }

    .person-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 31px;
      width: 31px;
      height: 31px;
      overflow: hidden;
      border-radius: 50%;
      background: linear-gradient(135deg, #ffd8bf, #795043);
      color: #fff;
      font-size: 13px;
    }

    .message-bubble {
      max-width: 390px;
      padding: 10px 13px;
      border-radius: 8px;
      background: #edf3ff;
      color: #202844;
      font-size: 13px;
      line-height: 1.35;
      box-shadow: 0 2px 6px rgba(20, 44, 91, 0.03);
    }

    .message-row.visitor .message-bubble {
      background: #f4f5f8;
    }

    .chat-input {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 15px;
      border-top: 1px solid #e6eaf2;
      background: #fbfcff;
    }

    .chat-input span {
      flex: 1;
      padding: 11px 13px;
      border: 1px solid #dbe2ee;
      border-radius: 7px;
      color: #9ca3b4;
      font-size: 12px;
    }

    .send-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: var(--ml-blue);
      color: #fff;
    }

    .trained-note {
      position: absolute;
      top: 165px;
      right: 0;
      width: 116px;
      color: #172041;
      font-size: 14px;
      line-height: 1.25;
      font-weight: 800;
      text-align: center;
    }

    .trained-note::before {
      content: "";
      position: absolute;
      top: 42px;
      right: 89px;
      width: 70px;
      height: 36px;
      border-bottom: 2px solid var(--ml-blue);
      border-left: 2px solid var(--ml-blue);
      border-radius: 0 0 0 40px;
      transform: rotate(-8deg);
    }

    .trained-note::after {
      content: "";
      position: absolute;
      top: 67px;
      right: 151px;
      width: 9px;
      height: 9px;
      border-bottom: 2px solid var(--ml-blue);
      border-left: 2px solid var(--ml-blue);
      transform: rotate(35deg);
    }

    /* Main feature cards */
    .core-features {
      padding: 34px 0 20px;
      background: #fff;
    }

    .core-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }

    .core-card {
      display: flex;
      flex-direction: column;
      min-height: 300px;
      padding: 27px 25px 24px;
      border: 1px solid #d9e2ef;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(18, 38, 91, 0.045);
    }

    .core-card.green {
      background: linear-gradient(145deg, #fbfffc, #f5fbf7);
    }

    .core-card.blue {
      background: linear-gradient(145deg, #fbfdff, #f3f7ff);
    }

    .core-card.purple {
      background: linear-gradient(145deg, #fff, #faf6ff);
    }

    .core-card-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 15px;
    }

    .feature-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 54px;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      color: #fff;
      font-size: 23px;
    }

    .green .feature-icon { background: #2fae3d; }
    .blue .feature-icon { background: #1164f4; }
    .purple .feature-icon { background: #7d22d7; }

    .core-card h3 {
      margin: 0 0 2px;
      color: var(--ml-navy);
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.4px;
    }

    .core-card.blue h3 { color: var(--ml-blue); }
    .core-card.purple h3 { color: var(--ml-purple); }

    .core-card-head p {
      margin: 0;
      color: #4c5672;
      font-size: 12px;
      font-weight: 600;
    }

    .learn-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: auto;
      color: var(--ml-blue);
      font-size: 13px;
      font-weight: 800;
    }

    /* Never sleeps */
    .never-sleeps {
      position: relative;
      overflow: hidden;
      padding: 18px 0 28px;
      background:
        radial-gradient(circle at 15% 20%, rgba(31, 95, 255, 0.20), transparent 28%),
        radial-gradient(circle at 86% 30%, rgba(123, 41, 211, 0.22), transparent 30%),
        linear-gradient(135deg, #06103c, #051645 56%, #09103a);
      color: #fff;
    }

    .never-sleeps .section-heading {
      margin-bottom: 16px;
    }

    .never-sleeps .section-heading h2 {
      color: #fff;
      font-size: 31px;
    }

    .never-sleeps .section-heading h2 span {
      color: #8ba9ff;
    }

    .timeline-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border: 1px solid rgba(151, 136, 255, 0.66);
      border-radius: 15px;
      background: rgba(2, 10, 43, 0.35);
      box-shadow: inset 0 0 30px rgba(37, 92, 255, 0.08);
    }

    .timeline-grid::before {
      content: "";
      position: absolute;
      top: 0;
      right: 7%;
      left: 7%;
      height: 2px;
      background: linear-gradient(90deg, #4f8fff, #9559ff);
    }

    .timeline-item {
      position: relative;
      min-height: 292px;
      padding: 25px 24px 22px;
      border-right: 1px solid rgba(130, 139, 214, 0.35);
    }

    .timeline-item:last-child {
      border-right: 0;
    }

    .timeline-item::before {
      content: "";
      position: absolute;
      top: -6px;
      left: 50%;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #6d78ff;
      box-shadow: 0 0 14px rgba(110, 120, 255, 0.9);
      transform: translateX(-50%);
    }

    .timeline-time {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 9px;
      font-size: 18px;
      font-weight: 800;
    }

    .timeline-time i {
      font-size: 24px;
    }

    .timeline-item:nth-child(1) .timeline-time i { color: #ffd32a; }
    .timeline-item:nth-child(2) .timeline-time i { color: #ff8a2e; }
    .timeline-item:nth-child(3) .timeline-time i { color: #39dc4b; }
    .timeline-item:nth-child(4) .timeline-time i { color: #ff4f67; }

    .timeline-item h3 {
      margin: 0 0 8px;
      font-size: 16px;
      font-weight: 800;
    }

    .timeline-item p {
      min-height: 84px;
      margin: 0 0 16px;
      color: #e0e6ff;
      font-size: 13px;
      line-height: 1.55;
    }

    .mini-notification {
      min-height: 90px;
      padding: 13px 14px;
      border-radius: 8px;
      background: #fff;
      color: #29314d;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
      font-size: 11px;
    }

    .notification-title {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 9px;
      color: #33415f;
      font-weight: 800;
    }

    .skeleton-line {
      height: 6px;
      margin: 6px 0;
      border-radius: 8px;
      background: #edf0f6;
    }

    .skeleton-line.short { width: 65%; }

    .lead-details {
      display: grid;
      gap: 3px;
      font-size: 10px;
    }

    .lead-tag {
      display: inline-block;
      width: max-content;
      margin-top: 6px;
      padding: 3px 7px;
      border-radius: 12px;
      background: #e8f8e9;
      color: #1f9a39;
      font-size: 9px;
      font-weight: 800;
    }

    .issue-tag {
      background: #fff0f1;
      color: #df3746;
    }

    /* Conversation examples */
    .working-section {
      padding: 24px 0 12px;
      background: #fff;
    }

    .conversation-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }

    .conversation-card {
      min-height: 260px;
      padding: 19px 20px;
      border: 1px solid #dce3ef;
      border-radius: 13px;
      background: linear-gradient(145deg, #fff, #fbfcff);
      box-shadow: 0 8px 22px rgba(19, 42, 92, 0.04);
    }

    .speaker-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 12px;
    }

    .speaker-row.ai-answer {
      margin-top: 19px;
    }

    .small-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #f8c9ad, #67443b);
      color: #fff;
      font-size: 11px;
    }

    .small-avatar.bot {
      background: #e6f1ff;
      color: var(--ml-blue);
    }

    .speaker-copy small {
      display: block;
      margin-bottom: 5px;
      color: #65708c;
      font-size: 10px;
      font-weight: 600;
    }

    .speaker-copy p {
      margin: 0;
      padding: 9px 11px;
      border-radius: 7px;
      background: #f3f5f9;
      color: #242b46;
      font-size: 12px;
      line-height: 1.5;
    }

    .speaker-row.ai-answer .speaker-copy small {
      color: var(--ml-blue);
    }

    .speaker-row.ai-answer .speaker-copy p {
      background: #f1f7ff;
    }

    /* Learns your business */
    .learning-section {
      padding: 2px 0 30px;
      background: #fff;
    }

    .knowledge-grid {
      display: grid;
      grid-template-columns: repeat(11, minmax(72px, 1fr));
      gap: 8px;
    }

    .knowledge-card {
      min-height: 92px;
      padding: 13px 7px 10px;
      border: 1px solid #e5e9f1;
      border-radius: 10px;
      background: #fbfcff;
      text-align: center;
    }

    .knowledge-card i {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      margin: 0 auto 8px;
      border-radius: 50%;
      background: #eaf2ff;
      color: var(--ml-blue);
      font-size: 17px;
    }

    .knowledge-card:nth-child(2) i,
    .knowledge-card:nth-child(9) i { background: #eaf8ed; color: #27a044; }
    .knowledge-card:nth-child(3) i { background: #fff4df; color: #e79c16; }
    .knowledge-card:nth-child(4) i { background: #fff5d8; color: #d99000; }
    .knowledge-card:nth-child(5) i { background: #eef2ff; color: #4466e6; }
    .knowledge-card:nth-child(6) i { background: #f4ecff; color: #7c32cd; }
    .knowledge-card:nth-child(7) i { background: #fff0ec; color: #e44e2b; }
    .knowledge-card:nth-child(8) i { background: #f4ecff; color: #7830cc; }
    .knowledge-card:nth-child(10) i { background: #fff0f1; color: #ef4b61; }
    .knowledge-card:nth-child(11) i { background: #fff0f0; color: #ee4f4f; }

    .knowledge-card span {
      display: block;
      color: #27304d;
      font-size: 10px;
      line-height: 1.15;
      font-weight: 700;
    }

    .knowledge-summary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      width: max-content;
      max-width: 100%;
      margin: 14px auto 0;
      padding: 9px 22px;
      border: 1px solid #dae4f5;
      border-radius: 20px;
      background: #fff;
      color: var(--ml-blue);
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 5px 15px rgba(20, 48, 108, 0.04);
    }

    /* Dashboard */
    .dashboard-section {
      padding: 24px 0 28px;
      background: #fff;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: 210px minmax(0, 1fr);
      align-items: center;
      gap: 30px;
    }

    .control-copy h2 {
      margin: 0 0 12px;
      color: var(--ml-navy);
      font-size: 27px;
      line-height: 1.18;
      font-weight: 800;
      letter-spacing: -0.8px;
    }

    .control-copy p {
      margin: 0 0 15px;
      color: var(--ml-muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .dashboard-mockup {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr);
      min-height: 330px;
      overflow: hidden;
      border: 1px solid #dfe5ef;
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--ml-shadow);
    }

    .dashboard-sidebar {
      padding: 20px 15px;
      border-right: 1px solid #e2e7f0;
      background: #f8faff;
    }

    .dashboard-sidebar h3 {
      margin: 0 0 24px;
      color: var(--ml-navy);
      font-size: 17px;
      font-weight: 800;
    }

    .side-nav {
      display: grid;
      gap: 9px;
    }

    .side-nav span {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 7px;
      color: #56617d;
      font-size: 11px;
      font-weight: 600;
    }

    .side-nav span.active {
      background: #eaf2ff;
      color: var(--ml-blue);
    }

    .dashboard-content {
      padding: 18px 20px;
    }

    .dashboard-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .dashboard-topline strong {
      color: var(--ml-navy);
      font-size: 16px;
    }

    .dashboard-topline span {
      padding: 5px 10px;
      border: 1px solid #e0e5ef;
      border-radius: 6px;
      color: #606a84;
      font-size: 10px;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .metric-card {
      padding: 12px 11px;
      border: 1px solid #e3e8f0;
      border-radius: 9px;
      background: #fff;
      box-shadow: 0 4px 12px rgba(24, 45, 91, 0.04);
    }

    .metric-card small {
      display: block;
      margin-bottom: 6px;
      color: #626c84;
      font-size: 8px;
      font-weight: 700;
    }

    .metric-value {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--ml-navy);
      font-size: 22px;
      line-height: 1;
      font-weight: 800;
    }

    .metric-value i {
      color: var(--ml-green);
      font-size: 10px;
    }

    .metric-card:nth-child(2) .metric-value i,
    .metric-card:nth-child(3) .metric-value i { color: var(--ml-blue); }
    .metric-card:nth-child(4) .metric-value i { color: var(--ml-red); }

    .metric-change {
      margin-top: 7px;
      color: var(--ml-green);
      font-size: 7px;
      font-weight: 700;
    }

    .metric-card:last-child .metric-change { color: var(--ml-red); }

    .chart-card {
      padding: 10px 12px 8px;
      border: 1px solid #e3e8f0;
      border-radius: 9px;
      background: #fff;
    }

    .chart-card strong {
      display: block;
      margin-bottom: 4px;
      color: #4b5570;
      font-size: 9px;
    }

    .chart-card svg {
      display: block;
      width: 100%;
      height: 122px;
    }

    /* Task list */
    .tasks-section {
      padding: 6px 0 25px;
      background: #fff;
    }

    .tasks-box {
      padding: 21px 28px 23px;
      border: 1px solid #dfe5ef;
      border-radius: 14px;
      background: linear-gradient(145deg, #fff, #fbfcff);
      box-shadow: 0 8px 25px rgba(19, 42, 92, 0.04);
    }

    .tasks-box .section-heading {
      margin-bottom: 17px;
    }

    .tasks-box .section-heading h2 {
      font-size: 29px;
    }

    .tasks-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px 42px;
    }

    .task-column {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .task-column li {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr) 18px;
      align-items: center;
      gap: 9px;
      margin: 9px 0;
      color: #2d3551;
      font-size: 12px;
      font-weight: 600;
    }

    .task-column li > i:first-child {
      color: var(--ml-blue);
      text-align: center;
    }

    .task-column:nth-child(2) li:nth-child(2) > i:first-child { color: #39a64b; }
    .task-column:nth-child(2) li:nth-child(3) > i:first-child { color: #e4a126; }
    .task-column:nth-child(2) li:nth-child(4) > i:first-child { color: #ec713a; }
    .task-column:nth-child(2) li:nth-child(5) > i:first-child { color: #8c43d7; }
    .task-column:nth-child(3) li > i:first-child { color: #7f3bd2; }
    .task-column:nth-child(3) li:last-child > i:first-child { color: #ef6175; }

    .task-check {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: var(--ml-green);
      color: #fff;
      font-size: 8px;
    }

    /* CTA */
    .features-cta {
      padding: 0 0 42px;
      background: #fff;
    }

    .cta-banner {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 290px 1fr;
      align-items: center;
      min-height: 205px;
      overflow: hidden;
      padding: 24px 56px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 42% 5%, rgba(32, 103, 255, 0.40), transparent 31%),
        linear-gradient(105deg, #071347, #07184f 52%, #4b0db6 100%);
      color: #fff;
      box-shadow: 0 18px 34px rgba(13, 24, 82, 0.18);
    }

    .cta-banner h2 {
      margin: 0 0 16px;
      font-size: 30px;
      line-height: 1.18;
      font-weight: 800;
      letter-spacing: -0.8px;
    }

    .no-needs {
      display: grid;
      grid-template-columns: repeat(2, max-content);
      gap: 8px 28px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: #f0f3ff;
      font-size: 13px;
      font-weight: 600;
    }

    .no-needs i {
      margin-right: 8px;
      color: #ff4457;
    }

    .robot-wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 320px;
    height: 230px;
    overflow: visible;
}

.robot-image {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.24));
}

    .cta-right {
      text-align: center;
    }

    .cta-right h3 {
      margin: 0 0 16px;
      font-size: 22px;
      font-weight: 700;
    }

    .cta-right .primary-button {
      min-width: 245px;
      min-height: 58px;
      background: linear-gradient(135deg, #23ac39, #15912d);
      font-size: 16px;
      box-shadow: 0 10px 24px rgba(28, 174, 58, 0.24);
    }

    /* Footer */
    

    /* Responsive */
    @media (max-width: 1100px) {
      .hero-grid {
        grid-template-columns: minmax(0, 0.8fr) minmax(470px, 1.2fr);
        gap: 36px;
      }

      .chat-stage {
        padding-right: 72px;
      }

      .trained-note {
        width: 83px;
        font-size: 12px;
      }

      .trained-note::before,
      .trained-note::after {
        display: none;
      }

      .knowledge-grid {
        grid-template-columns: repeat(6, minmax(85px, 1fr));
      }

      .knowledge-card:last-child {
        grid-column: span 1;
      }

      .cta-banner {
        grid-template-columns: 1fr 220px 1fr;
        padding: 24px 36px;
      }

      .robot-wrap svg {
        width: 235px;
      }
    }

    @media (max-width: 900px) {
      .ml-container {
        width: min(100% - 34px, 760px);
      }

      .features-page .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .features-page .nav-links {
        position: absolute;
        top: 74px;
        right: 17px;
        left: 17px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 14px;
        border: 1px solid #e0e5ef;
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--ml-shadow);
      }

      .features-page .nav-links.open {
        display: flex;
      }

      .features-page .nav-links > a:not(.header-cta) {
        padding: 12px 11px;
      }

      .features-page .nav-links > a:not(.header-cta)::after {
        display: none;
      }

      .features-page .header-cta {
        margin-top: 8px;
      }

      .hero-grid,
      .dashboard-grid {
        grid-template-columns: 1fr;
      }

      .features-hero {
        padding-top: 40px;
      }

      .hero-copy {
        text-align: center;
      }

      .hero-copy > p {
        margin-right: auto;
        margin-left: auto;
      }

      .hero-proof {
        justify-content: center;
      }

      .chat-stage {
        min-height: auto;
        padding: 12px 70px 0 0;
      }

      .core-grid,
      .conversation-grid {
        grid-template-columns: 1fr;
      }

      .core-card {
        min-height: 0;
      }

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

      .timeline-item:nth-child(2) {
        border-right: 0;
      }

      .timeline-item:nth-child(-n+2) {
        border-bottom: 1px solid rgba(130, 139, 214, 0.35);
      }

      .knowledge-grid {
        grid-template-columns: repeat(4, minmax(80px, 1fr));
      }

      .dashboard-grid {
        gap: 20px;
      }

      .control-copy {
        text-align: center;
      }

      .control-copy .check-list {
        display: inline-block;
        text-align: left;
      }

      .tasks-grid {
        grid-template-columns: 1fr 1fr;
      }

      .task-column:last-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 28px;
      }

      .cta-banner {
        grid-template-columns: 1fr 180px 1fr;
      }

      .cta-banner h2 {
        font-size: 24px;
      }

      .no-needs {
        grid-template-columns: 1fr;
      }

      .robot-wrap svg {
        width: 200px;
      }

      .features-page .footer-wrap {
        flex-direction: column;
        justify-content: center;
        padding: 22px 0;
      }
    }

    @media (max-width: 680px) {
      .ml-container {
        width: min(100% - 26px, 580px);
      }

      .features-page .logo-link img {
        width: 175px;
      }

      .hero-copy h1 {
        font-size: 43px;
      }

      .chat-stage {
        padding-right: 0;
      }

      .trained-note {
        position: static;
        width: auto;
        margin: 14px 0 0;
      }

      .timeline-grid,
      .knowledge-grid,
      .tasks-grid {
        grid-template-columns: 1fr;
      }

      .timeline-item,
      .timeline-item:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid rgba(130, 139, 214, 0.35);
      }

      .timeline-item:last-child {
        border-bottom: 0;
      }

      .knowledge-card {
        display: flex;
        align-items: center;
        min-height: 62px;
        padding: 10px 15px;
        text-align: left;
      }

      .knowledge-card i {
        flex: 0 0 38px;
        margin: 0 12px 0 0;
      }

      .knowledge-card span {
        font-size: 12px;
      }

      .dashboard-mockup {
        grid-template-columns: 1fr;
      }

      .dashboard-sidebar {
        display: none;
      }

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

      .task-column:last-child {
        display: block;
        grid-column: auto;
      }

      .cta-banner {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 30px 24px 22px;
        text-align: center;
      }

      .no-needs {
        grid-template-columns: repeat(2, max-content);
        justify-content: center;
      }

      .robot-wrap {
        order: 3;
        height: 160px;
      }

      .cta-right {
        order: 2;
      }

      .cta-left {
        order: 1;
      }

      .features-page .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px 24px;
      }
    }

    @media (max-width: 430px) {
      .hero-copy h1 {
        font-size: 38px;
      }

      .message-row.visitor,
      .message-row.ai {
        margin-right: 0;
        margin-left: 0;
      }

      .chat-body {
        padding-right: 13px;
        padding-left: 13px;
      }

      .no-needs {
        grid-template-columns: 1fr;
      }

      .tasks-box {
        padding: 20px 18px;
      }
    }