/* =========================================================
     FOOTER VARIABLES
     ========================================================= */

  .qf-footer {
    --coral:#E85D4A;
    --coral-deep:#C6432F;
    --coral-soft:#FBE9E5;

    --ink:#22252B;
    --line:#E8DED5;

    --site-width:1460px;

    --ease:
      cubic-bezier(.22,.8,.22,1);


    position:relative;

    overflow:hidden;

    width:100%;

    background:
      #22252B;

    color:
      #fff;
  }


  /* =========================================================
     TOP CORAL LINE
     ========================================================= */

  .qf-footer-accent {
    width:100%;

    height:3px;

    background:
      linear-gradient(
        90deg,
        var(--coral-deep),
        var(--coral),
        #F18A79
      );
  }


  /* =========================================================
     AMBIENT BACKGROUND
     ========================================================= */

  .qf-footer::before {
    content:"";

    position:absolute;

    top:-330px;
    left:-260px;

    width:650px;
    height:650px;

    border-radius:50%;

    background:
      radial-gradient(
        circle,
        rgba(232,93,74,.13),
        transparent 70%
      );

    pointer-events:none;
  }


  .qf-footer::after {
    content:"";

    position:absolute;

    right:-260px;
    bottom:-390px;

    width:680px;
    height:680px;

    border-radius:50%;

    background:
      radial-gradient(
        circle,
        rgba(217,164,65,.055),
        transparent 70%
      );

    pointer-events:none;
  }


  /* =========================================================
     CONTAINER
     stessa larghezza dell'header
     ========================================================= */

  .qf-footer-container {
    position:relative;

    z-index:2;

    width:
      min(
        var(--site-width),
        calc(100% - 48px)
      );

    margin-inline:auto;
  }


  /* =========================================================
     MAIN
     ========================================================= */

  .qf-footer-main {
    padding:
      74px 0 66px;

    display:grid;

    grid-template-columns:
      minmax(300px,1.65fr)
      repeat(3,minmax(125px,.68fr))
      minmax(220px,1fr);

    gap:
      clamp(32px,4vw,68px);

    align-items:start;
  }


  /* =========================================================
     BRAND
     ========================================================= */

  .qf-footer-brand {
    max-width:390px;
  }


  .qf-footer-logo {
    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    transition:
      transform 180ms var(--ease);
  }


  .qf-footer-logo:hover {
    transform:
      translateY(-2px);
  }


  .qf-footer-logo-mark {
    width:39px;
    height:39px;

    display:grid;

    place-items:center;

    flex:0 0 auto;

    border-radius:11px;

    background:
      linear-gradient(
        145deg,
        var(--coral),
        var(--coral-deep)
      );

    color:#fff;

    font-size:12px;

    font-weight:850;

    box-shadow:
      0 8px 21px rgba(232,93,74,.21);
  }


  .qf-footer-logo-text {
    font-size:21px;

    font-weight:790;

    letter-spacing:-.045em;
  }


  .qf-footer-logo-text strong {
    color:#F17B69;
  }


  .qf-footer-description {
    max-width:360px;

    margin:
      21px 0 0;

    color:
      rgba(255,255,255,.54);

    font-size:13px;

    line-height:1.72;
  }


  /* =========================================================
     COSMOS GROUP
     ========================================================= */

  .qf-footer-cosmos {
    margin-top:29px;

    display:flex;

    align-items:center;

    gap:11px;
  }


  .qf-footer-cosmos-icon {
    width:38px;
    height:38px;

    display:grid;

    place-items:center;

    flex:0 0 auto;

    border:
      1px solid rgba(255,255,255,.08);

    border-radius:10px;

    background:
      rgba(255,255,255,.045);

    color:#F18A79;

    font-size:13px;
  }


  .qf-footer-cosmos-content {
    min-width:0;
  }


  .qf-footer-cosmos-label {
    display:block;

    margin-bottom:3px;

    color:
      rgba(255,255,255,.34);

    font-size:9px;

    font-weight:730;

    letter-spacing:.075em;

    text-transform:uppercase;
  }


  .qf-footer-cosmos a {
    display:inline-flex;

    align-items:center;

    gap:6px;

    color:
      rgba(255,255,255,.82);

    text-decoration:none;

    font-size:11px;

    font-weight:660;

    transition:
      color 170ms ease;
  }


  .qf-footer-cosmos a i {
    font-size:8px;
  }


  .qf-footer-cosmos a:hover {
    color:#fff;
  }


  /* =========================================================
     COLUMNS
     ========================================================= */

  .qf-footer-column {
    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:flex-start;
  }


  .qf-footer-heading {
    margin:
      3px 0 19px;

    color:#fff;

    font-size:10px;

    font-weight:800;

    letter-spacing:.085em;

    text-transform:uppercase;
  }


  .qf-footer-link {
    position:relative;

    margin-bottom:12px;

    color:
      rgba(255,255,255,.53);

    text-decoration:none;

    font-size:12px;

    font-weight:570;

    line-height:1.45;

    transition:
      color 170ms ease,
      transform 170ms var(--ease);
  }


  .qf-footer-link::after {
    content:"";

    position:absolute;

    left:0;
    right:100%;
    bottom:-3px;

    height:1px;

    background:
      var(--coral);

    transition:
      right 200ms var(--ease);
  }


  .qf-footer-link:hover {
    color:#fff;

    transform:
      translateX(2px);
  }


  .qf-footer-link:hover::after {
    right:0;
  }


  /* =========================================================
     CONTACTS
     ========================================================= */

  .qf-footer-contacts {
    min-width:0;
  }


  .qf-footer-contact {
    width:100%;

    margin-bottom:15px;

    display:flex;

    align-items:flex-start;

    gap:10px;

    color:
      rgba(255,255,255,.59);

    text-decoration:none;

    font-size:11px;

    font-weight:570;

    line-height:1.55;

    transition:
      color 170ms ease,
      transform 170ms var(--ease);
  }


  .qf-footer-contact:hover {
    color:#fff;

    transform:
      translateX(3px);
  }


  .qf-footer-contact-icon {
    width:29px;
    height:29px;

    display:grid;

    place-items:center;

    flex:0 0 29px;

    margin-top:-4px;

    border-radius:8px;

    background:
      rgba(232,93,74,.11);

    color:#F18A79;

    font-size:10px;
  }


  .qf-footer-contact-text {
    min-width:0;

    overflow-wrap:anywhere;
  }


  /* =========================================================
     BOTTOM
     ========================================================= */

  .qf-footer-bottom {
    min-height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    border-top:
      1px solid rgba(255,255,255,.075);
  }


  .qf-footer-copyright {
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:9px;

    color:
      rgba(255,255,255,.34);

    font-size:10px;
  }


  .qf-footer-bottom-dot {
    width:3px;
    height:3px;

    flex:0 0 auto;

    border-radius:50%;

    background:
      var(--coral);
  }


  .qf-footer-bottom-links {
    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:18px;
  }


  .qf-footer-bottom-links a {
    color:
      rgba(255,255,255,.36);

    text-decoration:none;

    font-size:10px;

    font-weight:570;

    transition:
      color 160ms ease;
  }


  .qf-footer-bottom-links a:hover {
    color:#fff;
  }


  /* =========================================================
     TABLET
     ========================================================= */

  @media(max-width:1100px) {

    .qf-footer-main {
      grid-template-columns:
        repeat(3,minmax(0,1fr));

      row-gap:50px;
    }


    .qf-footer-brand {
      grid-column:
        1 / -1;

      max-width:650px;
    }

  }


  /* =========================================================
     MOBILE TABLET
     ========================================================= */

  @media(max-width:760px) {

    .qf-footer-container {
      width:
        calc(100% - 28px);
    }


    .qf-footer-main {
      padding:
        55px 0 46px;

      grid-template-columns:
        repeat(2,minmax(0,1fr));

      column-gap:28px;

      row-gap:39px;
    }


    .qf-footer-brand {
      grid-column:
        1 / -1;
    }


    .qf-footer-contacts {
      grid-column:
        1 / -1;

      max-width:450px;
    }


    .qf-footer-bottom {
      padding:
        22px 0;

      align-items:flex-start;

      flex-direction:column;

      gap:14px;
    }


    .qf-footer-bottom-links {
      justify-content:flex-start;
    }

  }


  /* =========================================================
     MOBILE
     ========================================================= */

  @media(max-width:480px) {

    .qf-footer-main {
      grid-template-columns:
        1fr;

      gap:33px;
    }


    .qf-footer-brand,
    .qf-footer-contacts {
      grid-column:auto;
    }


    .qf-footer-description {
      font-size:12px;
    }


    .qf-footer-heading {
      margin-bottom:14px;
    }


    .qf-footer-link {
      margin-bottom:10px;
    }

  }


  /* =========================================================
     ACCESSIBILITY
     ========================================================= */

  .qf-footer a:focus-visible {
    outline:
      3px solid rgba(232,93,74,.34);

    outline-offset:4px;

    border-radius:5px;
  }


  @media(prefers-reduced-motion:reduce) {

    .qf-footer *,
    .qf-footer *::before,
    .qf-footer *::after {
      transition-duration:.01ms !important;
    }

  }