:root {
      --navy: #101b35;
      --muted: #637087;
      --green: #2eaa83;
      --orange: #c97b56;
      --border: #e9edf2;
      --surface: #ffffff;
      --background: #f7f8fb;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      color: var(--navy);
      background: var(--background);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

  header {
      height: 65px;
      background-color: #1E293B;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 40px;
      flex-shrink: 0;
    }

    .logo-img {
      height: 32px;
      width: auto;
      object-fit: contain;
    }

    .brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; }
    .brand-mark {
      width: 35px; height: 35px; border-radius: 11px;
      display: grid; place-items: center; color: white; background: var(--navy);
      font-size: 18px;
    }
    nav { display: flex; align-items: center; gap: 30px; }
    nav a { color: #657187; text-decoration: none; font-size: 14px; font-weight: 600; }
    nav a:hover { color: var(--navy); }
    .header-button {
      color: white; background: var(--navy); border: 0; border-radius: 8px;
      padding: 11px 18px; font-weight: 700; cursor: pointer;
    }

    main {
      min-height: calc(100vh - 76px);
      max-width: 1240px;
      margin: auto;
      padding: 72px 30px 84px;
      display: grid;
      grid-template-columns: minmax(330px, .82fr) minmax(510px, 1.18fr);
      align-items: center;
      gap: 74px;
    }

    .eyebrow { display: flex; align-items: center; gap: 9px; color: #bb7657; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
    .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(46,170,131,.1); }
    h1 { margin: 27px 0 25px; max-width: 430px; font-size: clamp(58px, 6vw, 88px); line-height: .88; letter-spacing: -.075em; }
    .intro { max-width: 500px; margin: 0 0 29px; color: var(--muted); font-size: 17px; line-height: 1.75; }
    .trust-list { display: flex; flex-wrap: wrap; gap: 22px; color: #59677d; font-size: 12px; font-weight: 700; }
    .trust { display: flex; align-items: center; gap: 8px; }
    .trust-icon { width: 16px; height: 16px; display: grid; place-items: center; border: 2px solid var(--green); color: var(--green); border-radius: 50%; font-size: 10px; }

    .chat-card {
      min-height: 570px; overflow: hidden; display: flex; flex-direction: column;
      background: var(--surface); border: 1px solid #e5e8ed; border-radius: 24px;
      box-shadow: 0 20px 55px rgba(20, 35, 61, .08);
    }
    .chat-header { height: 88px; padding: 20px 24px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); }
    .bot-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: white; background: #1c385b; font-size: 22px; }
    .chat-title { font-size: 14px; font-weight: 800; }
    .status { margin-top: 4px; display: flex; align-items: center; gap: 6px; color: #8993a1; font-size: 11px; }
    .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
    .help { margin-left: auto; width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid #8d98a4; color: #7f8b98; border-radius: 50%; font-weight: 800; font-size: 12px; }
    .messages { flex: 1; padding: 24px 56px 18px; }
    .message { max-width: 445px; padding: 14px 16px; color: #465468; background: #f0f3f7; border-radius: 14px 14px 14px 3px; font-size: 14px; line-height: 1.6; }
    .question-area { padding: 0 24px 22px; }
    .try-label { margin: 0 0 10px; color: #949ca7; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
    .suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    .suggestion { padding: 9px 12px; color: #687487; background: white; border: 1px solid #e1e5ea; border-radius: 12px; font-size: 11px; cursor: pointer; }
    .suggestion:hover { border-color: var(--green); color: var(--navy); }
    .input-wrap { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border: 1px solid #e0e4e9; border-radius: 16px; }
    .paperclip { color: #8d98a4; font-size: 20px; }
    #question { flex: 1; min-width: 0; padding: 7px 0; border: 0; outline: 0; color: var(--navy); font: inherit; font-size: 13px; }
    #question::placeholder { color: #a9b0ba; }
    .send { width: 36px; height: 36px; border: 0; border-radius: 12px; color: white; background: var(--orange); cursor: pointer; font-size: 22px; }
    .note { margin: 11px 3px 0; color: #9ba3ad; font-size: 10px; }

    @media (max-width: 850px) {
      header { padding: 0 22px; }
      nav a:not(:last-child) { display: none; }
      main { grid-template-columns: 1fr; gap: 46px; padding: 55px 22px 60px; }
      h1 { font-size: clamp(58px, 16vw, 82px); }
      .chat-card { min-height: 540px; }
    }
    @media (max-width: 520px) {
      .header-button { display: none; }
      .chat-header { padding: 18px; }
      .messages { padding: 22px 18px 18px; }
      .question-area { padding: 0 18px 18px; }
      .message { font-size: 13px; }
    }