main {
      display: grid;
      gap: 66px;
      padding: 70px 0 62px;
  }

  .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.78fr);
      align-items: center;
      gap: 54px;
  }

  .hero-copy {
      max-width: 660px;
  }

  h1 {
      margin-bottom: 0;
      color: var(--primary-700);
      font-size: 3.64rem;
      line-height: 1.04;
      letter-spacing: 0;
  }

  .lead {
      max-width: 600px;
      margin: 20px 0 0;
      color: var(--slate-700);
      font-size: 1.18rem;
      line-height: 1.65;
  }

  .hero-panel {
      display: grid;
      gap: 16px;
      padding: 20px;
      border: 1px solid var(--primary-100);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.86);
      box-shadow: var(--shadow);
  }

  .app-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--primary-100);
  }

  .app-card img {
      width: 76px;
      height: 76px;
      border-radius: 20px;
      flex: 0 0 auto;
  }

  .app-card strong {
      display: block;
      color: var(--primary-700);
      font-size: 1.12rem;
  }

  .app-card > span {
      display: block;
      min-width: 0;
  }

  .app-card > span > span {
      display: block;
      margin-top: 5px;
      color: var(--slate-500);
      font-size: 0.94rem;
      line-height: 1.45;
  }

  .status-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
  }

  .status-list li {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-height: 72px;
      padding: 14px;
      border-radius: 14px;
      background: var(--white);
      box-shadow: 0 10px 24px rgba(30, 58, 95, 0.09);
  }

  .status-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: rgba(14, 165, 233, 0.12);
      color: var(--accent-500);
      font-weight: 900;
  }

  .status-list strong {
      display: block;
      color: var(--primary-700);
      font-size: 0.98rem;
  }

  .status-list li > span:not(.status-icon) {
      display: block;
      min-width: 0;
  }

  .status-list li > span:not(.status-icon) > span {
      display: block;
      margin-top: 3px;
      color: var(--slate-500);
      font-size: 0.88rem;
      line-height: 1.4;
  }

  .trust-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      padding: 16px;
      border: 1px solid rgba(14, 165, 233, 0.2);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 10px 24px rgba(30, 58, 95, 0.08);
  }

  .trust-strip div {
      padding: 14px 16px;
      border-radius: 14px;
      background: var(--white);
  }

  .trust-strip strong,
  .use-grid strong {
      display: block;
      color: var(--primary-700);
      font-size: 0.98rem;
  }

  .trust-strip span,
  .use-grid span {
      display: block;
      margin-top: 5px;
      color: var(--slate-500);
      font-size: 0.9rem;
      line-height: 1.45;
  }

  .section-heading {
      max-width: 700px;
  }

  .section-heading h2 {
      margin-bottom: 12px;
      color: var(--primary-700);
      font-size: 2.1rem;
      line-height: 1.16;
  }

  .section-heading p {
      margin-bottom: 0;
      color: var(--slate-700);
      font-size: 1.06rem;
      line-height: 1.62;
  }

  .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: 28px;
  }

  .feature {
      min-height: 178px;
      padding: 20px;
      border: 1px solid var(--primary-100);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.82);
      box-shadow: 0 8px 20px rgba(30, 58, 95, 0.08);
  }

  .feature-icon {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin-bottom: 18px;
      border-radius: 14px;
      background: rgba(16, 185, 129, 0.12);
      color: var(--success-500);
      font-weight: 900;
  }

  .feature:nth-child(2) .feature-icon {
      background: rgba(14, 165, 233, 0.12);
      color: var(--accent-500);
  }

  .feature:nth-child(3) .feature-icon {
      background: rgba(245, 158, 11, 0.14);
      color: var(--warning-500);
  }

  .feature h3 {
      margin-bottom: 8px;
      color: var(--primary-700);
      font-size: 1.04rem;
  }

  .feature p {
      margin-bottom: 0;
      color: var(--slate-500);
      font-size: 0.94rem;
      line-height: 1.55;
  }

  .seo-section {
      display: grid;
      gap: 28px;
  }

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

  .use-grid article {
      min-height: 136px;
      padding: 18px;
      border: 1px solid var(--primary-100);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 8px 20px rgba(30, 58, 95, 0.08);
  }

  .workflow {
      display: grid;
      grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1fr);
      align-items: center;
      gap: 46px;
  }

  .document-visual {
      display: grid;
      place-items: center;
      min-height: 300px;
      border: 1px solid var(--primary-100);
      border-radius: var(--radius);
      background:
          linear-gradient(135deg, rgba(30, 58, 95, 0.05), rgba(16, 185, 129, 0.09)),
          var(--white);
      box-shadow: var(--shadow);
  }

  .document-visual img {
      width: min(190px, 48vw);
      height: auto;
      filter: drop-shadow(0 18px 26px rgba(30, 58, 95, 0.18));
  }

  .steps {
      display: grid;
      gap: 14px;
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
  }

  .steps li {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
  }

  .step-number {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--primary-700);
      color: var(--white);
      font-weight: 900;
  }

  .steps strong {
      display: block;
      color: var(--primary-700);
      font-size: 0.98rem;
  }

  .steps li > span:not(.step-number) {
      display: block;
      min-width: 0;
  }

  .steps li > span:not(.step-number) > span {
      display: block;
      margin-top: 4px;
      color: var(--slate-500);
      font-size: 0.94rem;
      line-height: 1.5;
  }

  .download-strip {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
      padding: 26px;
      border: 1px solid rgba(14, 165, 233, 0.22);
      border-radius: var(--radius);
      background: var(--primary-700);
      color: var(--white);
      box-shadow: 0 18px 38px rgba(22, 44, 60, 0.22);
  }

  .download-strip h2 {
      margin-bottom: 8px;
      color: var(--white);
      font-size: 1.54rem;
      line-height: 1.22;
  }

  .download-strip p {
      margin-bottom: 0;
      color: rgba(255, 255, 255, 0.76);
      line-height: 1.55;
  }

  .download-strip .button {
      background: var(--white);
      color: var(--primary-700);
      white-space: nowrap;
  }

  .download-strip .button:hover,
  .download-strip .button:focus-visible {
      box-shadow: 0 14px 28px rgba(15, 28, 46, 0.24);
  }

  .social-strip {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
      padding: 26px;
      border: 1px solid var(--primary-100);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 12px 28px rgba(30, 58, 95, 0.1);
  }

  .social-strip .eyebrow {
      margin-bottom: 14px;
  }

  .social-strip h2 {
      margin-bottom: 8px;
      color: var(--primary-700);
      font-size: 1.54rem;
      line-height: 1.22;
  }

  .social-strip p:last-child {
      margin-bottom: 0;
      color: var(--slate-700);
      line-height: 1.55;
  }

  .button.social {
      border-color: rgba(14, 165, 233, 0.24);
      background:
          linear-gradient(var(--white), var(--white)) padding-box,
          linear-gradient(135deg, #0ea5e9, #10b981, #f59e0b) border-box;
      color: var(--primary-700);
      white-space: nowrap;
      box-shadow: 0 12px 24px rgba(30, 58, 95, 0.12);
  }

  .button.social:hover,
  .button.social:focus-visible {
      border-color: transparent;
      box-shadow: 0 16px 30px rgba(30, 58, 95, 0.18);
  }

  footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 0 0 28px;
      color: var(--slate-500);
      font-size: 0.88rem;
  }

  footer a {
      color: var(--primary-700);
      font-weight: 700;
      text-decoration: none;
  }

  footer a:hover,
  footer a:focus-visible {
      color: var(--accent-500);
      outline: none;
  }

  .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
  }

  @media (max-width: 900px) {
      main {
          gap: 58px;
          padding-top: 38px;
      }

      .hero,
      .workflow,
      .trust-strip,
      .use-grid,
      .social-strip,
      .download-strip {
          grid-template-columns: 1fr;
      }

      .hero-panel {
          max-width: 520px;
      }

      h1 {
          font-size: 2.72rem;
      }

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

      .download-strip {
          align-items: start;
      }
  }

  @media (max-width: 620px) {
      .nav-links a {
          padding-right: 10px;
          padding-left: 10px;
      }

      h1 {
          font-size: 2.2rem;
      }

      .lead {
          font-size: 1.06rem;
      }

      .hero-panel,
      .social-strip,
      .download-strip {
          padding: 18px;
      }

      .app-card {
          align-items: flex-start;
      }

      .app-card img {
          width: 62px;
          height: 62px;
          border-radius: 17px;
      }

      .status-list li {
          grid-template-columns: 38px minmax(0, 1fr);
      }

      .status-icon {
          width: 38px;
          height: 38px;
      }

      footer {
          align-items: flex-start;
          flex-direction: column;
      }
  }