/* Wspólna stopka Graffo (strona główna + podstrony).
   Logo jest maską (logo_graffo_mono.png), więc jego kolor ustawia jedna zmienna --flogo. */
.site-footer { --flogo: #fff; position: relative; z-index: 6; background: #05060f; color: #aab3d6;
  border-top: 1px solid rgba(255, 255, 255, .1); font: 500 15px/1.6 Montserrat, sans-serif; }
.site-footer .fwrap { width: min(1240px, 100% - 13vw); margin: 0 auto; }
.site-footer a { color: inherit; text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: #fff; }

.ftop { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between;
        padding: 56px 0 40px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.flogo { display: block; width: 190px; aspect-ratio: 460 / 158; background: var(--flogo);
  -webkit-mask: url(../img/logo-graffo-mono.png) center / contain no-repeat;
          mask: url(../img/logo-graffo-mono.png) center / contain no-repeat; transition: background .25s; }
.flogo:hover { --flogo: #9fb6ff; }
.ftag { margin: 10px 0 0; color: #d6dcf5; font-weight: 600; }
.fcta { display: flex; flex-wrap: wrap; gap: 12px; }
.fbtn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; font-weight: 700; color: #fff !important;
        background: #3d6bff; transition: background .2s; }
.fbtn:hover { background: #2f5cf0; }
.fbtn.ghost { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); }
.fbtn.ghost:hover { background: rgba(255, 255, 255, .14); }
.fbtn svg { width: 18px; height: 18px; }

.fcols { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 1fr; gap: 32px; padding: 44px 0; }
.fcols h4 { margin: 0 0 16px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.fcols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fcols address { font-style: normal; display: grid; gap: 9px; }
.frow { display: flex; gap: 12px; align-items: flex-start; }
.frow svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: #9fb6ff; }
.frow b { color: #fff; font-weight: 700; }
.fsmall { font-size: 13px; color: #7f88ad; }
.fdata dd { margin: 0 0 9px; }
.fdata dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #7f88ad; }
.fdata dl { margin: 0; }

.fbottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: 22px 0 30px;
           border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: #7f88ad; }
.fbottom nav { display: flex; gap: 20px; }

@media (max-width: 1000px) { .fcols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) {
  .site-footer .fwrap { width: calc(100% - 32px); }
  .ftop { padding-top: 44px; }
  .fcols { grid-template-columns: 1fr; gap: 28px; }
  .fcta { width: 100%; } .fbtn { flex: 1 1 auto; justify-content: center; }
}