/home/bdqbpbxa/demo-subdomains/billine.goodface.com.ua/en/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>bill_line</title>

    <meta name="title" content="Payment system for any online business" />
    <meta
      name="description"
      content="bill_line is a fintech company, a payment service provider. We create a modern financial solution for any online business"
    />

    <!-- TODO: Delete noindex on production -->
    <meta name="robots" content="noindex" />
    <meta name="googlebot" content="noindex" />

    <!-- Mobile -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />

    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="../css/compose.css" />

    <!-- Favicon  -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="../images/favicon/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="../images/favicon/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="../images/favicon/favicon-16x16.png"
    />
    <!--    <link rel="manifest" href="../images/favicon/site.webmanifest" />-->
    <link
      rel="mask-icon"
      href="../images/favicon/safari-pinned-tab.svg"
      color="#9680ff"
    />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="theme-color" content="#ffffff" />

    <!-- Opengraph -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta property="og:type" content="website" />
    <meta property="og:image:type" content="images/png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content="https://billline.net" />
    <meta property="og:site_name" content="bill_line" />
    <meta
      property="og:title"
      content="Payment system for any online business"
    />
    <meta
      property="og:description"
      content="bill_line is a fintech company, a payment service provider. We create a modern financial solution for any online business"
    />
    <meta property="og:image" content="images/opengraph.png" />

    <style>
      .preloader {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background-color: var(--white);
        overflow: hidden;
      }

      .preloader.-visible {
        display: block;
      }

      .preloader video,
      .preloader img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      @media screen and (max-width: 759px) {
        .preloader video,
        .preloader img {
          -webkit-transform: scale(2);
          transform: scale(2);
        }
      }
    </style>
  </head>
  <body class="-homepage">
    <div class="preloader">
      <video src="../images/preloader.mp4" muted autoplay playsinline></video>
    </div>

    <script>
      // Allow animations if JS support is enabled

      document.body.classList.add("-allow-animations");

      // Don't show preloader again if the page was visited

      let preloader = document.querySelector(".preloader");

      let fullPageUrl = window.location.href;
      let visitedPages = window.localStorage.getItem("visited-pages");
      let visitedPagesArr = visitedPages ? visitedPages.split(" ") : "";

      let isPreloaderLoaded = visitedPagesArr.length;

      if (preloader && isPreloaderLoaded) {
        preloader.remove();
      } else if (preloader) {
        preloader.classList.add("-visible");

        window.addEventListener("load", function () {
          window.localStorage.setItem(
            "visited-pages",
            visitedPages + " " + fullPageUrl
          );
        });
      }
    </script>

    <header class="header">
      <div class="container">
        <div class="header-container">
          <a href="/en" class="header__logo">
            <img src="../images/logo-text.svg" alt="billline.net" />
          </a>

          <div class="header__menu">
            <div
              class="
                localization-dropdown
                --dropdown
                text-2
                --medium-text
                --caps-text
              "
            >
              <div class="--dropdown__value">
                <span
                  class="
                    localization-dropdown__icon
                    --mask-item
                    --gradient-hover
                  "
                  style="
                    -webkit-mask-image: url(../images/icons/globe.svg);
                    mask-image: url(../images/icons/globe.svg);
                  "
                ></span>
                <p class="--gradient-hover">Eng</p>
                <span
                  class="
                    localization-dropdown__arrow
                    --mask-item
                    --gradient-hover
                  "
                  style="
                    -webkit-mask-image: url(../images/icons/caret-down.svg);
                    mask-image: url(../images/icons/caret-down.svg);
                  "
                ></span>
              </div>
              <div class="--dropdown__list">
                <a href="/" class="--dropdown__list-item --gradient-hover">
                  Укр
                </a>
                <a href="/ru" class="--dropdown__list-item --gradient-hover">
                  Рус
                </a>
                <a
                  href="#"
                  class="--dropdown__list-item --gradient-hover -active"
                >
                  Eng
                </a>
              </div>
            </div>
            <nav class="header__menu-nav text-2 --medium-text">
              <a class="header__nav --gradient-hover" href="/en/product">
                Product
              </a>
              <a class="header__nav --gradient-hover" href="/en/connect">
                Connect
              </a>
              <a class="header__nav --gradient-hover" href="/en/api"> API </a>
              <a class="header__nav --gradient-hover" href="/en/about">
                About us
              </a>
              <a class="header__nav --gradient-hover" href="/en/contacts">
                Contact us
              </a>
            </nav>
            <div class="header__button-box">
              <a
                href="https://cabinet.billline.net/login"
                target="_blank"
                class="default-button -small"
              >
                <p data-hover-text="Sign in">Sign in</p>
              </a>
              <a
                href="https://cabinet.billline.net/register"
                target="_blank"
                class="default-button -small -shadow -black"
              >
                <p>Sign up</p>
                <span class="default-button__arrow"></span>
              </a>
            </div>
          </div>

          <button
            class="
              header__open-menu-button
              -small
              default-button
              -shadow
              -white
            "
          >
            <div></div>
            <div></div>
            <div></div>
          </button>
        </div>
      </div>
    </header>

    <main>
      <section
        class="homepage-main-section --margin-bottom-200 --mob-margin-bottom-80"
      >
        <div class="container">
          <div class="homepage-main-container" data-animate="swim-top">
            <div class="homepage-main__text-box">
              <h1 class="homepage-main__title title-1 mob-title-1 --bold-text">
                Payment system for any online business
              </h1>
              <p class="homepage-main__text text-1 mob-text-1">
                Entrust payment processes to bill_line and use <br />more time
                for the company's development
              </p>
              <a
                href="https://cabinet.billline.net/register"
                target="_blank"
                class="default-button -shadow -black"
              >
                <p>Registration</p>
                <span class="default-button__arrow"></span>
              </a>
            </div>
            <div class="homepage-main__image">
              <img
                src="../images/homepage/main-img-en.png"
                alt="Payment system for any online business - billline.net"
              />
            </div>
          </div>
        </div>
      </section>

      <section
        class="
          partners-section
          --margin-top-200 --margin-bottom-200
          --mob-margin-top-80 --mob-margin-bottom-120
        "
      >
        <div class="container" data-animate="swim-top">
          <div class="partners-container --content-container-M">
            <p class="partners-section__description text-1 mob-text-1">
              Companies working with us
            </p>

            <ul class="partners-section__grid">
              <li>
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/homepage/estore.svg"
                  alt="eStore - billline.net"
                />
              </li>
              <li>
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/homepage/gc-ua.svg"
                  alt="GC UA - billline.net"
                />
              </li>
              <li>
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/homepage/sigma.svg"
                  alt="Sigma - billline.net"
                />
              </li>
              <li>
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/homepage/slotegrator.svg"
                  alt="Slotegrator - billline.net"
                />
              </li>
              <li>
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/homepage/wb.svg"
                  alt="WhiteBIT - billline.net"
                />
              </li>
              <li>
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/homepage/corefy.svg"
                  alt="Corefy - billline.net"
                />
              </li>
            </ul>
          </div>
        </div>
      </section>

      <article
        class="
          connect-card-section
          --margin-top-200 --margin-bottom-200
          --mob-margin-top-120 --mob-margin-bottom-120
        "
      >
        <div class="container" data-animate="swim-top">
          <div class="connect-card-section-container --content-container-M">
            <h2
              class="
                connect-card-section__title
                title-2
                mob-title-2
                --bold-text
              "
            >
              We create the best payment <br />experience for your customers
            </h2>

            <div class="connect-card__block">
              <div
                class="connect-card__left"
                style="
                  background-image: url(../images/connect-card/connect-background-1.svg);
                "
              >
                <div class="connect-card__editor --white-text">
                  <h3>Payment system</h3>
                  <h4>
                    We do our best to ensure your customers make payments
                    without any interruption. We create individual solutions
                    that will help solve exactly your tasks.
                  </h4>
                  <p>
                    bill_line provides payment for online stores, platforms,
                    marketplaces, banks, insurance companies, non-profit
                    organizations, taxi services, online cash desks, mobile
                    operators, gaming services and other companies with online
                    payment transactions.
                  </p>
                </div>

                <a
                  href="https://cabinet.billline.net/register"
                  target="_blank"
                  class="connect-card__button default-button -shadow -white"
                >
                  <p>Get started</p>
                  <span class="default-button__arrow"></span>
                </a>
              </div>
              <div class="connect-card__right">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/connect-card/img-1-en.png"
                  alt="We create the best payment experience for your customers - billline.net"
                />
              </div>
            </div>
          </div>
        </div>
      </article>

      <section
        class="
          homepage-methods-section
          --margin-top-200 --margin-bottom-160
          --mob-margin-top-120 --mob-margin-bottom-120
        "
      >
        <div class="container" data-animate="swim-top">
          <div class="info-block -payment --content-container-M">
            <div class="info-block__text-box">
              <div class="info-block__editor">
                <h2>The most convenient payment methods</h2>
                <p>
                  We cooperate only with reliable and trusted companies for the
                  sake of our customers' comfort and safety .
                </p>
              </div>
            </div>
            <div class="info-block__image">
              <div class="info-block__logo">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/logo.svg"
                  alt="billline.net"
                />
              </div>

              <div class="info-block__image-box">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/info-block/apple-pay.svg"
                  alt="Apple Pay - billline.net"
                />
              </div>
              <div class="info-block__image-box">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/info-block/union-pay.svg"
                  alt="Union Pay - billline.net"
                />
              </div>
              <div class="info-block__image-box">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/info-block/mastercard.svg"
                  alt="Mastercard - billline.net"
                />
              </div>
              <div class="info-block__image-box">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/info-block/prostir.png"
                  alt="Простір - billline.net"
                />
              </div>
              <div class="info-block__image-box">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/info-block/telegram.svg"
                  alt="Telegram - billline.net"
                />
              </div>
              <div class="info-block__image-box">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/info-block/google-pay.svg"
                  alt="Google Pay - billline.net"
                />
              </div>
              <div class="info-block__image-box">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/info-block/visa.svg"
                  alt="Visa - billline.net"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <article
        class="
          homepage-info-card-section
          --margin-top-160 --margin-bottom-160
          --mob-margin-top-120 --mob-margin-bottom-120
        "
      >
        <div class="container" data-animate="swim-top">
          <div class="info-card-grid -two-col --content-container-M">
            <div class="default-info-card">
              <div class="info-card__icon" style="background-color: #e0eff9">
                <span
                  class="--mask-item"
                  style="
                    background-color: #66aee0;
                    -webkit-mask-image: url(../images/icons/currency-circle-dollar.svg);
                    mask-image: url(../images/icons/currency-circle-dollar.svg);
                  "
                ></span>
              </div>

              <h4 class="info-card__title title-5 mob-title-5 --bold-text">
                Accept payments <br />in different currencies
              </h4>

              <div class="info-card__text text-2 mob-text-2">
                <p>
                  The main currencies used by bill_line clients are UAH, USD and
                  EUR. But we connect local currencies from any country in the
                  world.
                </p>
              </div>
            </div>
            <div class="default-info-card">
              <div class="info-card__icon" style="background-color: #e7f4e1">
                <span
                  class="--mask-item"
                  style="
                    background-color: #7ac668;
                    -webkit-mask-image: url(../images/icons/timer.svg);
                    mask-image: url(../images/icons/timer.svg);
                  "
                ></span>
              </div>

              <h4 class="info-card__title title-5 mob-title-5 --bold-text">
                Get fast <br />payouts
              </h4>

              <div class="info-card__text text-2 mob-text-2">
                <p>
                  We have different options for receiving money. These are
                  payments to the bank card or current account. You can set up
                  automatic payments via API or receive manual payments at any
                  time — all this in your personal account.
                </p>
              </div>
            </div>
            <div class="default-info-card">
              <div class="info-card__icon" style="background-color: #e8ebf8">
                <span
                  class="--mask-item"
                  style="
                    background-color: #8d9adb;
                    -webkit-mask-image: url(../images/icons/selection-plus.svg);
                    mask-image: url(../images/icons/selection-plus.svg);
                  "
                ></span>
              </div>

              <h4 class="info-card__title title-5 mob-title-5 --bold-text">
                Connect customized solutions
              </h4>

              <div class="info-card__text text-2 mob-text-2">
                <p>
                  We have experience of working with different niches. From
                  online stores to marketplaces with a large number of payment
                  transactions. We can create a visual and technical solution
                  that will fit specially for your needs.
                </p>
              </div>
            </div>
            <div class="default-info-card">
              <div class="info-card__icon" style="background-color: #fbf2da">
                <span
                  class="--mask-item"
                  style="
                    background-color: #ebbf46;
                    -webkit-mask-image: url(../images/icons/smiley-wink.svg);
                    mask-image: url(../images/icons/smiley-wink.svg);
                  "
                ></span>
              </div>

              <h4 class="info-card__title title-5 mob-title-5 --bold-text">
                Increase the number of successful payments
              </h4>

              <div class="info-card__text text-2 mob-text-2">
                <p>
                  Your customers will be able to make payments without any
                  glitches. Because we have provided a formidably stable system.
                  We cooperate with several banks and make payments through
                  other partners.
                </p>
              </div>
            </div>
          </div>
        </div>
      </article>

      <section
        class="
          homepage-cta-banner-section
          --margin-top-160 --margin-bottom-200
          --mob-margin-top-120 --mob-margin-bottom-120
        "
      >
        <div class="container" data-animate="swim-top">
          <div class="cta-card -banner">
            <div class="cta-card__text-box">
              <h2 class="cta-card__title title-2 mob-title-2 --bold-text">
                How bill_line Checkout increased the number of successful
                payments by 26%
              </h2>
              <div class="cta-card__text text-1 mob-text-1">
                <p>
                  Find out on examples of cooperation what results bill_line
                  Checkout brings
                </p>
              </div>
              <div class="cta-card__button-box">
                <a
                  href="https://t.me/PartnershipBL"
                  target="_blank"
                  class="default-button -shadow -black"
                >
                  <p>Learn more</p>
                  <span class="default-button__arrow"></span>
                </a>
              </div>
            </div>

            <div class="cta-card__custom-image-box">
              <div class="cta-card__custom-image">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/logo-text.svg"
                  alt="billline.net"
                />
              </div>
              <div class="cta-card__custom-x">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/cta-card/banner-x.svg"
                  alt="Find out on examples of cooperation - billline.net"
                />
              </div>
              <div class="cta-card__custom-image-text">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/cta-card/estore.svg"
                  alt="eStore - billline.net"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section
        class="
          homepage-detail-analytics-section
          --margin-top-200 --margin-bottom-200
          --mob-margin-top-120 --mob-margin-bottom-120
        "
      >
        <div class="container" data-animate="swim-top">
          <div class="info-block -analytics --content-container-M">
            <div class="info-block__text-box">
              <div class="info-block__editor">
                <h2>Detailed analytics by request</h2>
                <p>
                  Get a report on all transactions, conversions, revenues,
                  turnover, payments by location, by card types, payment
                  transactions of each channel, as well as information about
                  payers.
                </p>
                <p>
                  This will help you analyze financial performance and upscale
                  your business. We can also create custom analytics for any
                  request.
                </p>
              </div>
            </div>
            <div class="info-block__image">
              <div class="info-block__image-box">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/homepage/merchants.jpg"
                  alt="Detailed analytics by request - billline.net"
                />
              </div>
              <div class="info-block__image-box">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/homepage/transactions.jpg"
                  alt="Detailed analytics by request - billline.net"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <article
        class="
          connect-card-section
          --margin-top-200 --margin-bottom-200
          --mob-margin-top-120 --mob-margin-bottom-120
        "
      >
        <div class="container" data-animate="swim-top">
          <div class="connect-card__block --content-container-M">
            <div
              class="connect-card__left"
              style="
                background-image: url(../images/connect-card/connect-background-2.svg);
              "
            >
              <div class="connect-card__editor --white-text">
                <h3>
                  The fastest way to integrate payments into your business
                </h3>
                <h4>An average intergration time is 3,5&nbsp;hours</h4>
                <p>
                  Comprehensible API and documentation will make it easy to
                  connect to bill_line payment system. There are also ready-made
                  solutions for the most common CMS. And our support will
                  quickly help in case of something.
                </p>
                <p>
                  If you need custom integration, we will create this solution.
                </p>
              </div>

              <a
                href="#form"
                class="connect-card__button default-button -shadow -white"
              >
                <p>Start now</p>
                <span class="default-button__arrow"></span>
              </a>
            </div>
            <div class="connect-card__right">
              <img
                class="-lazyload"
                srcset="../images/lazyload.png"
                src="../images/homepage/api-img.png"
                alt="The fastest way to integrate payments into your business - billline.net"
              />
            </div>
          </div>
        </div>
      </article>

      <article
        class="
          quote-section
          --margin-top-200 --margin-bottom-200
          --mob-margin-top-120 --mob-margin-bottom-120
        "
      >
        <div class="container">
          <div class="quote-card --content-container-S">
            <div class="quote-card-container" data-animate="swim-top">
              <div class="quote-card__text-container">
                <blockquote
                  class="quote-card__quote title-5 mob-title-5 --bold-text"
                >
                  «Dealing with payments is always a deep understanding of how
                  each client's business works in details. And bill_line always
                  have a100% understanding of this matter.»
                </blockquote>

                <div class="quote-card__user">
                  <img
                    class="quote-card__user-photo -lazyload"
                    srcset="../images/lazyload.png"
                    src="../images/quote-card/quote-photo-2.png"
                    alt="Oleg Kiyan - billline.net"
                  />
                  <div class="quote-card__user-info">
                    <div
                      class="
                        quote-card__user-name
                        text-2
                        mob-text-2
                        --bold-text
                      "
                    >
                      Oleg Kiyan
                    </div>
                    <div class="quote-card__user-position text-3">
                      СМО WhiteBit
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </article>

      <article
        class="
          secure-section
          --margin-top-200 --margin-bottom-200
          --mob-margin-top-120 --mob-margin-bottom-120
        "
      >
        <div class="container" data-animate="swim-top">
          <div class="secure-container --content-container-M">
            <div class="info-block -secure">
              <div class="info-block__text-box">
                <div class="info-block__editor">
                  <h2>Payment security is our priority</h2>
                  <p>
                    bill_line is certified to the highest industry standards and
                    complies with global security standards.
                  </p>
                </div>
              </div>
              <div class="info-block__image">
                <div class="info-block__image-box">
                  <img
                    class="-lazyload"
                    srcset="../images/lazyload.png"
                    src="../images/info-block/secure-img-1.png"
                    alt="Payment security is our priority - billline.net"
                  />
                </div>
                <div class="info-block__image-box">
                  <img
                    class="-lazyload"
                    srcset="../images/lazyload.png"
                    src="../images/info-block/secure-img-2.svg"
                    alt="Payment security is our priority - billline.net"
                  />
                </div>
              </div>
            </div>

            <div class="info-card-grid --margin-top-120 --mob-margin-top-40">
              <div class="default-info-card">
                <div class="info-card__icon" style="background-color: #e7f4e1">
                  <span
                    class="--mask-item"
                    style="
                      background-color: #7ac668;
                      -webkit-mask-image: url(../images/icons/lock.svg);
                      mask-image: url(../images/icons/lock.svg);
                    "
                  ></span>
                </div>

                <h4 class="info-card__title title-5 mob-title-5 --bold-text">
                  3D secure 2.0
                </h4>

                <div class="info-card__text text-2 mob-text-2">
                  <p>
                    An additional layer of authentication protects you from
                    liability for fraudulent card payments.
                  </p>
                </div>
              </div>
              <div class="default-info-card">
                <div class="info-card__icon" style="background-color: #eae6ff">
                  <span
                    class="--mask-item"
                    style="
                      background-color: #9680ff;
                      -webkit-mask-image: url(../images/icons/shield-check.svg);
                      mask-image: url(../images/icons/shield-check.svg);
                    "
                  ></span>
                </div>

                <h4 class="info-card__title title-5 mob-title-5 --bold-text">
                  Secured payment form
                </h4>

                <div class="info-card__text text-2 mob-text-2">
                  <p>
                    The payment form is protected from data transfer, browser
                    change, fraud and any fraudulent transactions.
                  </p>
                </div>
              </div>
              <div class="default-info-card">
                <div class="info-card__icon" style="background-color: #e0eff9">
                  <span
                    class="--mask-item"
                    style="
                      background-color: #66aee0;
                      -webkit-mask-image: url(../images/icons/detective.svg);
                      mask-image: url(../images/icons/detective.svg);
                    "
                  ></span>
                </div>

                <h4 class="info-card__title title-5 mob-title-5 --bold-text">
                  Anti-fraud systems
                </h4>

                <div class="info-card__text text-2 mob-text-2">
                  <p>
                    The best help to detect potential danger at an early stage
                    and verify every transaction.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </article>

      <article
        class="
          homepage-improve-section
          --margin-top-200 --margin-bottom-200
          --mob-margin-top-120 --mob-margin-bottom-120
        "
      >
        <div class="container" data-animate="swim-top">
          <div class="info-block --content-container-M">
            <div class="info-block__text-box">
              <div class="info-block__editor">
                <h2>Constantly improving technology</h2>
                <p>
                  We are constantly developing our payment system and understand
                  what business needs.
                </p>
                <p>
                  Narrow specialization allows us to constantly improve
                  bill_line products. And the in-house development team creates
                  and tests new features regularly.
                </p>
                <p>As a result, businesses get the best payment experience.</p>
              </div>
            </div>
            <div class="info-block__image -square">
              <img
                class="-lazyload"
                srcset="../images/lazyload.png"
                src="../images/info-block/improve-tech-image.jpg"
                alt="Constantly improving technology - billline.net"
              />
            </div>
          </div>
        </div>
      </article>

      <article
        class="
          support-section
          --margin-top-200 --margin-bottom-200
          --mob-margin-top-120 --mob-margin-bottom-120
        "
      >
        <div class="container" data-animate="swim-top">
          <div class="support-container --content-container-M">
            <div class="support-section__image">
              <img
                class="-lazyload"
                srcset="../images/lazyload.png"
                src="../images/homepage/support-img.jpg"
                alt="Client Care Support - billline.net"
              />
            </div>
            <div class="support-section__text-box">
              <div class="support-section__messangers">
                <div class="support-section__email">
                  <span
                    class="--mask-item"
                    style="
                      -webkit-mask-image: url(/images/icons/envelope.svg);
                      mask-image: url(/images/icons/envelope.svg);
                    "
                  ></span>
                </div>
                <div class="support-section__telegram">
                  <img
                    class="-lazyload"
                    srcset="../images/lazyload.png"
                    src="../images/homepage/telegram.svg"
                    alt="Telegram - billline.net"
                  />
                </div>
                <div class="support-section__skype">
                  <img
                    class="-lazyload"
                    srcset="../images/lazyload.png"
                    src="../images/homepage/skype.svg"
                    alt="Skype - billline.net"
                  />
                </div>
              </div>
              <h2
                class="support-section__title title-5 mob-title-5 --bold-text"
              >
                Client Care Support
              </h2>
              <div class="support-section__text text-2 mob-text-2">
                <p>
                  You surely have repeatedly dealt with financial product
                  support, where do you need to go through ten circles of hell
                  to solve the problem?
                </p>
                <p>
                  Our way is much simplier - just write in messenger and
                  immediately get a decision.
                </p>
              </div>
              <a
                href="/en/contacts"
                class="support-section__button default-button -shadow -black"
              >
                <p>Write to support</p>
                <span class="default-button__arrow"></span>
              </a>
            </div>
          </div>
        </div>
      </article>

      <article
        class="
          quote-section
          --margin-top-200 --margin-bottom-200
          --mob-margin-top-120 --mob-margin-bottom-120
        "
      >
        <div class="container">
          <div class="quote-card --content-container-S">
            <div class="quote-card-container" data-animate="swim-top">
              <div class="quote-card__text-container">
                <blockquote
                  class="quote-card__quote title-5 mob-title-5 --bold-text"
                >
                  “I believe our company is becoming the more and more about
                  people. We detect problems before the client notices them"
                </blockquote>

                <div class="quote-card__user">
                  <img
                    class="quote-card__user-photo -lazyload"
                    srcset="../images/lazyload.png"
                    src="../images/quote-card/quote-photo-1.png"
                    alt="Anatoliy Karpenko - billline.net"
                  />
                  <div class="quote-card__user-info">
                    <div
                      class="
                        quote-card__user-name
                        text-2
                        mob-text-2
                        --bold-text
                      "
                    >
                      Anatoliy Karpenko
                    </div>
                    <div class="quote-card__user-position text-3">
                      Head of bill_line Support
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </article>

      <article
        class="
          cta-section
          --margin-top-200 --margin-bottom-200
          --mob-margin-top-120 --mob-margin-bottom-120
        "
      >
        <div class="container" data-animate="swim-top">
          <div class="cta-card -version-1">
            <div class="cta-card__text-box --white-text">
              <h2 class="cta-card__title title-2 mob-title-2 --bold-text">
                Accept payments with bill_line
              </h2>
              <div class="cta-card__text text-1 mob-text-1">
                <p>
                  Provide your customers with a faster, easier and more secure
                  way to pay.
                </p>
              </div>
              <div class="cta-card__button-box">
                <a
                  href="https://cabinet.billline.net/register"
                  target="_blank"
                  class="default-button -shadow -white"
                >
                  <p>Start now</p>
                  <span class="default-button__arrow"></span>
                </a>
                <a href="/en/contacts" class="default-button --white-text">
                  <p data-hover-text="Write Sales">Write Sales</p>
                  <span class="default-button__arrow"></span>
                </a>
              </div>
            </div>

            <div class="cta-card__illustration">
              <img
                class="-lazyload"
                srcset="../images/lazyload.png"
                src="../images/cta-card/cta-illustration-1.png"
                alt="Accept payments with bill_line - billline.net"
              />
            </div>
          </div>
        </div>
      </article>

      <section
        id="form"
        class="form-section --margin-top-200 --mob-margin-top-120"
      >
        <div class="container" data-animate="swim-top">
          <div class="form-container --content-container-S">
            <div class="form-section__title-box">
              <div class="form-section__img">
                <img
                  class="-lazyload"
                  srcset="../images/lazyload.png"
                  src="../images/form/form-stars.svg"
                  alt="Connect your customized solution - billline.net"
                />
              </div>

              <h2 class="form-section__title title-2 mob-title-2 --bold-text">
                Connect your customized solution
              </h2>

              <p class="form-section__subtitle text-1 mob-text-1">
                Every business is special, so we create solutions just for needs
                of your company. Our dev team has experience in implementing the
                most complex technical systems.
              </p>
            </div>
            <div class="form-block -connect --sending-form-container">
              <div class="--sending-form">
                <div class="form__title-box --white-text">
                  <h3 class="form__title title-5 mob-title-5 --bold-text">
                    Application for connection
                  </h3>
                  <p class="form__subtitle text-1 mob-text-1">
                    Leave a request to start cooperation
                  </p>
                </div>
                <div class="form">
                  <form name="connect">
                    <div class="form__grid">
                      <div class="input -input" data-important="not-empty">
                        <label>Name *</label>
                        <input type="text" name="name" />
                        <span
                          class="input__invalid"
                          data-correct-text="Check the correctness of the entered data"
                          data-fill-text="This field is mandatory"
                        >
                        </span>
                      </div>

                      <div class="input -input" data-important="not-empty">
                        <label>URL address *</label>
                        <input type="text" name="url" />
                        <span
                          class="input__invalid"
                          data-correct-text="Check the correctness of the entered data"
                          data-fill-text="This field is mandatory"
                        >
                        </span>
                      </div>

                      <div class="input -input" data-important="email">
                        <label>Email *</label>
                        <input type="text" name="email" />
                        <span
                          class="input__invalid"
                          data-correct-text="Check the correctness of the entered data"
                          data-fill-text="This field is mandatory"
                        ></span>
                      </div>

                      <div class="input -input">
                        <label>Telegram/Viber/Whatsapp</label>
                        <input type="text" name="social" />
                      </div>

                      <div class="input -input form__textarea">
                        <label>Brief description of the company</label>
                        <textarea
                          class="-adaptive-height"
                          name="message"
                        ></textarea>
                      </div>
                    </div>

                    <div class="checkbox --checkbox" data-important="checked">
                      <input type="checkbox" checked />
                      <span class="checkbox__button"></span>
                      <p class="checkbox__text">
                        I agree that I have read the
                        <a
                          href="../files/Політика%20конфіденційності%20%20(EN).pdf"
                          target="_blank"
                          class="default-link --gradient-hover"
                        >
                          Privacy Policy
                        </a>
                        and accept it
                      </p>
                    </div>

                    <button class="form__button default-button -shadow -black">
                      <p>Submit an application</p>
                    </button>
                  </form>
                </div>
              </div>

              <div class="--sending-block --sending-loading">
                <div
                  class="form-sending__img --mask-item"
                  style="
                    -webkit-mask-image: url(../images/icons/circle-dashed.svg);
                    mask-image: url(../images/icons/circle-dashed.svg);
                  "
                ></div>
                <div class="form-sending__subtitle text-1 mob-text-1">
                  We are processing your application...
                </div>
              </div>
              <div class="--sending-block --sending-success">
                <div
                  class="form-sending__img --mask-item"
                  style="
                    -webkit-mask-image: url(../images/icons/check-circle.svg);
                    mask-image: url(../images/icons/check-circle.svg);
                  "
                ></div>
                <div
                  class="form-sending__title title-5 mob-title-5 --bold-text"
                >
                  The application was sent successfully
                </div>
                <div class="form-sending__subtitle text-1 mob-text-1">
                  Our managers will contact you in the near future and give
                  answers to questions that interest you.
                </div>
                <button
                  class="
                    form-sending__button
                    default-button
                    -shadow
                    -black
                    --back-to-form
                  "
                >
                  <p>ОК</p>
                </button>
              </div>
              <div class="--sending-block --sending-error">
                <div
                  class="form-sending__img --mask-item"
                  style="
                    -webkit-mask-image: url(../images/icons/x-circle-big.svg);
                    mask-image: url(../images/icons/x-circle-big.svg);
                  "
                ></div>
                <div
                  class="form-sending__title title-5 mob-title-5 --bold-text"
                >
                  The application could not be sent
                </div>
                <div class="form-sending__subtitle text-1 mob-text-1">
                  An error occurred while sending. Please try again time.
                </div>
                <button
                  class="
                    form-sending__button
                    default-button
                    -shadow
                    -white
                    --back-to-form
                  "
                >
                  <span
                    class="default-button__icon --mask-item"
                    style="
                      -webkit-mask-image: url(../images/icons/arrow-clockwise.svg);
                      mask-image: url(../images/icons/arrow-clockwise.svg);
                    "
                  ></span>
                  <p>Try again</p>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="container">
        <div class="footer__top">
          <div class="footer__top-left">
            <div class="footer__logo">
              <img
                class="-lazyload"
                srcset="../images/lazyload.png"
                src="../images/logo.svg"
                alt="billline.net"
              />
            </div>

            <div class="footer__socials">
              <a
                href="https://www.facebook.com/billline.net"
                target="_blank"
                class="default-button -shadow -white -social"
              >
                <span
                  class="default-button__icon --mask-item"
                  style="
                    -webkit-mask-image: url(../images/icons/facebook.svg);
                    mask-image: url(../images/icons/facebook.svg);
                  "
                ></span>
              </a>
              <a
                href="https://www.instagram.com/bill_line.payments/"
                target="_blank"
                class="default-button -shadow -white -social"
              >
                <span
                  class="default-button__icon --mask-item"
                  style="
                    -webkit-mask-image: url(../images/icons/instagram.svg);
                    mask-image: url(../images/icons/instagram.svg);
                  "
                ></span>
              </a>
              <a
                href="https://www.linkedin.com/company/billline"
                target="_blank"
                class="default-button -shadow -white -social"
              >
                <span
                  class="default-button__icon --mask-item"
                  style="
                    -webkit-mask-image: url(../images/icons/linkedin.svg);
                    mask-image: url(../images/icons/linkedin.svg);
                  "
                ></span>
              </a>
            </div>
          </div>

          <div class="footer__top-right text-2 --medium-text">
            <nav class="footer__nav-list">
              <a class="footer__nav --gradient-hover" href="/en/product">
                Product
              </a>
              <a class="footer__nav --gradient-hover" href="/en/connect">
                Connect
              </a>
              <a class="footer__nav --gradient-hover" href="/en/about">
                About us
              </a>
              <a class="footer__nav --gradient-hover" href="/en/contacts">
                Contact us
              </a>
              <a class="footer__nav --gradient-hover" href="/en/api"> API </a>
            </nav>

            <nav class="footer__nav-list">
              <a
                class="footer__nav --gradient-hover"
                href="../files/Вимоги%20(EN).pdf"
                target="_blank"
              >
                Requirements
              </a>
              <a
                class="footer__nav --gradient-hover"
                href="../files/Політика%20конфіденційності%20%20(EN).pdf"
                target="_blank"
              >
                Privacy Policy
              </a>
              <a
                class="footer__nav --gradient-hover"
                href="../files/Полiтика%20cookie%20%20(EN).pdf"
                target="_blank"
              >
                Cookie Policy
              </a>
              <a
                class="footer__nav --gradient-hover"
                href="../files/Полiтика%20AML%20(EN).pdf"
                target="_blank"
              >
                AML Policy
              </a>
            </nav>
          </div>
        </div>

        <div class="footer__bot">
          <div class="footer__partners">
            <img
              class="-lazyload"
              srcset="../images/lazyload.png"
              src="../images/partners/pci-dss.svg"
              alt="PCI DSS - billline.net"
            />
            <img
              class="-lazyload"
              srcset="../images/lazyload.png"
              src="../images/partners/visa.svg"
              alt="VISA - billline.net"
            />
            <img
              class="-lazyload"
              srcset="../images/lazyload.png"
              src="../images/partners/mastercard.svg"
              alt="Mastercard - billline.net"
            />
          </div>

          <p class="footer__copyright text-2 --medium-text">© bill_line 2022</p>
        </div>
      </div>
    </footer>

    <div class="cookie-block">
      <div class="container">
        <div class="cookie" data-animate="swim-top">
          <p class="text-2 mob-text-2 --white-text">
            This site uses cookies By using our site, you agree to our
            <a
              href="../files/Полiтика%20cookie%20%20(EN).pdf"
              target="_blank"
              class="default-link"
              >Cookie Policy</a
            >.
          </p>
          <button
            class="
              cookie__button
              default-button
              -small
              -shadow
              -white
              text-2
              --medium-text
            "
          >
            I accept
          </button>
        </div>
      </div>
    </div>

    <script src="../js/lib/jquery-3.6.0.min.js"></script>
    <script src="../js/lib/jquery.cookie.js"></script>
    <script src="../js/lib/jquery.inputmask.min.js"></script>

    <script src="../js/custom-solutions.js"></script>
    <script src="../js/scroll-animation.js"></script>
    <script src="../js/form.js"></script>
    <script src="../js/script.js"></script>
  </body>
</html>