@charset "utf-8";
/* CSS Document */

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

    html, body { height: 100%; }

    body {
      background: #131313;
      color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    /* ===== Main ===== */
    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 3rem 1.5rem 2rem;
      gap: 3rem;
    }

    /* ===== Logo ===== */
    .logo-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .logo-wrap img {
      max-width: 860px;
      width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    /* ===== Cards ===== */
    .products {
      display: flex;
      gap: 1.25rem;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;
      max-width: 860px;
    }

    .card {
      flex: 1;
      min-width: 360px;
      max-width: 420px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 18px;
      padding: 1.75rem 1.75rem 1.5rem;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .card:hover {
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.16);
      transform: translateY(-3px);
    }

    .card__logo {
      height: 28px;
      width: auto;
      display: block;
      object-fit: contain;
      object-position: left center;
    }

    .card__desc {
      font-size: .85rem;
      font-weight: 300;
      color: rgba(255,255,255,.5);
      line-height: 1.6;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    .card__arrow {
      font-size: .8rem;
      font-weight: 600;
      color: rgba(255,255,255,.25);
      letter-spacing: .06em;
      margin-top: auto;
      transition: color .2s ease;
    }

    .card:hover .card__arrow {
      color: rgba(255,255,255,.55);
    }

    /* ===== Footer ===== */
    footer {
      width: 100%;
      padding: 1.25rem 2rem;
      text-align: center;
      font-size: .75rem;
      font-weight: 300;
      color: rgba(255,255,255,.2);
      letter-spacing: .08em;
    }

    /* ===== Responsive ===== */
    @media (max-width: 560px) {
      .products { flex-direction: column; align-items: center; }
      .card { max-width: 95%;  min-width: unset;}
      .logo-wrap { padding: 0 2rem; }
      .logo-wrap img { max-width: 100%; }
    }


    /* ===== Lang switch ===== */
    .lang-switch {
      position: fixed;
      top: 1.25rem;
      left: 1.5rem;
      display: flex;
      gap: .4rem;
      z-index: 10;
      right: auto;
    }

    .lang-pill {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .08em;
      color: rgba(255,255,255,.3);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      padding: .3rem .65rem;
      text-decoration: none;
      transition: color .2s ease, border-color .2s ease;
    }

    .lang-pill:hover {
      color: rgba(255,255,255,.6);
      border-color: rgba(255,255,255,.25);
    }

    .lang-pill.active {
      color: #fff;
      border-color: rgba(255,255,255,.35);
    }