:root {
  --gi-red: #d71920;
  --gi-ink: #171717;
  --gi-muted: #636362;
  --gi-soft: #f6f5f2;
  --gi-line: rgba(23, 23, 23, .12);
  --gi-footer: #181818;
  --gi-white: #fff;
  --gi-shell: 1240px;
  --gi-space: clamp(22px, 5vw, 76px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fbfaf8;
  color: var(--gi-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 300;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.gi-landing {
  width: 100%;
  overflow: clip;
  background: linear-gradient(180deg, #fff 0%, #f8f7f5 54%, #fff 100%);
}
.gi-shell {
  width: min(var(--gi-shell), calc(100% - 2 * var(--gi-space)));
  margin-inline: auto;
}

.gi-hero {
  min-height: min(860px, 100svh);
  padding: clamp(28px, 4vw, 58px) 0 clamp(38px, 6vw, 74px);
  position: relative;
  isolation: isolate;
}
.gi-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(112deg, rgba(255,255,255,0) 0 51.9%, rgba(230,229,226,.48) 52%, rgba(255,255,255,0) 54%),
    linear-gradient(90deg, #fff 0%, #fff 48%, #f3f2ef 100%);
}
.gi-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 34px;
  width: min(700px, 58vw);
  height: 210px;
  z-index: -1;
  opacity: .17;
  background:
    linear-gradient(90deg, rgba(23,23,23,.14) 1px, transparent 1px) 0 100% / 74px 58px,
    linear-gradient(rgba(23,23,23,.12) 1px, transparent 1px) 0 100% / 74px 58px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 76%, transparent);
}
.gi-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(480px, .95fr);
  align-items: center;
  gap: clamp(34px, 5vw, 84px);
}
.gi-hero__content { padding-top: clamp(0px, 2vw, 26px); }
.gi-logo {
  display: inline-block;
  width: clamp(190px, 22vw, 278px);
  margin-bottom: clamp(54px, 10vw, 122px);
}
.gi-logo img { width: 100%; }
.gi-hero__title {
  margin: 0;
  color: var(--gi-ink);
  font-size: clamp(45px, 5.55vw, 78px);
  line-height: .99;
  letter-spacing: -.064em;
  font-weight: 200;
}
.gi-hero__title span { display: block; }
.gi-hero__title i {
  font-style: normal;
  color: var(--gi-red);
  margin-left: .035em;
}
.gi-accent {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--gi-red);
  margin: clamp(28px, 3vw, 44px) 0 clamp(24px, 3vw, 40px);
}
.gi-hero__lead {
  max-width: 570px;
  margin: 0;
  color: #515150;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.85;
  letter-spacing: -.015em;
}
.gi-hero__visual {
  align-self: stretch;
  min-height: clamp(480px, 64vw, 730px);
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0,0,0,.08);
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 35%);
  background: #eee;
}
.gi-hero__visual picture,
.gi-hero__visual img {
  width: 100%;
  height: 100%;
}
.gi-hero__visual img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

.gi-section { padding: clamp(52px, 7vw, 92px) 0; }
.gi-label {
  margin: 0;
  text-align: center;
  color: #343434;
  text-transform: uppercase;
  letter-spacing: .48em;
  font-size: 13px;
  font-weight: 300;
}
.gi-accent--center {
  margin: 18px auto clamp(34px, 5vw, 60px);
  width: 42px;
}
.gi-areas {
  background: rgba(255,255,255,.82);
  border-top: 1px solid rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.gi-area-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-inline: 1px solid var(--gi-line);
}
.gi-area-card {
  min-height: 164px;
  padding: 28px clamp(16px, 2vw, 30px);
  border-right: 1px solid var(--gi-line);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  text-align: center;
}
.gi-area-card:last-child { border-right: 0; }
.gi-icon {
  width: clamp(45px, 4.2vw, 58px);
  height: clamp(45px, 4.2vw, 58px);
  object-fit: contain;
}
.gi-area-card strong {
  color: #303030;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.18;
  font-weight: 300;
  letter-spacing: -.02em;
}

.gi-statement {
  background:
    linear-gradient(180deg, #f6f5f2, #fff 55%),
    radial-gradient(circle at 75% 35%, rgba(215,25,32,.08), transparent 32%);
}
.gi-statement__inner {
  text-align: center;
  max-width: 920px;
}
.gi-statement h2 {
  margin: 0;
  color: var(--gi-ink);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.08;
  font-weight: 200;
  letter-spacing: -.056em;
}
.gi-statement p {
  margin: 0 auto;
  max-width: 700px;
  color: var(--gi-muted);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.7;
}
.gi-values {
  margin-top: clamp(42px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-inline: 1px solid var(--gi-line);
}
.gi-values span {
  min-height: 122px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 22px 20px;
  color: #343434;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.2;
  border-right: 1px solid var(--gi-line);
}
.gi-values span:last-child { border-right: 0; }
.gi-values b { font-weight: 300; }
.gi-icon--value { width: clamp(42px, 3.8vw, 54px); height: clamp(42px, 3.8vw, 54px); }

.gi-footer {
  padding: clamp(38px, 5vw, 64px) 0;
  color: rgba(255,255,255,.9);
  background:
    linear-gradient(90deg, #161616, #222 52%, #171717),
    radial-gradient(circle at 20% 0, rgba(255,255,255,.1), transparent 38%);
}
.gi-footer__inner {
  display: grid;
  grid-template-columns: minmax(270px, 1fr) minmax(280px, .95fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: center;
}
.gi-footer__logo {
  width: clamp(190px, 22vw, 260px);
  filter: invert(1) grayscale(1) brightness(1.5);
  opacity: .98;
  margin-bottom: 22px;
}
.gi-footer__brand span {
  display: block;
  color: rgba(255,255,255,.70);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.62;
}
.gi-footer__contact {
  margin: 0;
  padding-left: clamp(28px, 5vw, 70px);
  border-left: 1px solid rgba(255,255,255,.22);
  font-style: normal;
  display: grid;
  gap: 15px;
  color: rgba(255,255,255,.78);
  font-size: clamp(16px, 1.15vw, 18px);
}
.gi-footer__contact a,
.gi-footer__contact span {
  display: flex;
  align-items: center;
  gap: 13px;
}
.gi-footer__contact img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: .9;
}
.gi-footer__url { color: var(--gi-red); }
.gi-footer__contact a { transition: color .25s ease; }
.gi-footer__contact a:hover { color: #fff; }

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  :root { --gi-space: clamp(22px, 6vw, 48px); }
  .gi-hero { min-height: auto; }
  .gi-hero__inner { grid-template-columns: 1fr; gap: 34px; }
  .gi-logo {
    display: block;
    margin-inline: auto;
    margin-bottom: clamp(42px, 8vw, 72px);
  }
  .gi-hero__visual {
    min-height: auto;
    aspect-ratio: 4 / 3;
    clip-path: none;
    border-radius: 28px 28px 6px 6px;
  }
  .gi-area-strip,
  .gi-values {
    overflow-x: auto;
    display: flex;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-inline: 0;
    padding: 0 var(--gi-space) 12px;
    margin-inline: calc(var(--gi-space) * -1);
  }
  .gi-area-strip::-webkit-scrollbar,
  .gi-values::-webkit-scrollbar { height: 3px; }
  .gi-area-strip::-webkit-scrollbar-thumb,
  .gi-values::-webkit-scrollbar-thumb { background: rgba(215,25,32,.55); }
  .gi-area-card,
  .gi-values span {
    flex: 0 0 min(240px, 68vw);
    scroll-snap-align: start;
    background: rgba(255,255,255,.76);
    border: 1px solid var(--gi-line);
    border-right: 1px solid var(--gi-line);
    margin-right: 12px;
  }
  .gi-footer__inner { grid-template-columns: 1fr; }
  .gi-footer__contact {
    padding-left: 0;
    border-left: 0;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.22);
  }
}

@media (max-width: 620px) {
  .gi-hero { padding-top: 28px; padding-bottom: 34px; }
  .gi-logo { width: 180px; }
  .gi-hero__title { font-size: clamp(42px, 12.5vw, 57px); letter-spacing: -.07em; }
  .gi-hero__lead { font-size: 16px; line-height: 1.72; }
  .gi-accent { width: 48px; margin: 26px 0; }
  .gi-section { padding: 50px 0; }
  .gi-label { font-size: 12px; letter-spacing: .38em; }
  .gi-statement h2 { font-size: clamp(34px, 9.5vw, 46px); }
  .gi-statement p { font-size: 16px; }
  .gi-footer__logo { width: 210px; }
}
/* =========================================================
   GRUPA INTEGRA — mobile premium motion layer
   Subtelne animacje CSS3, poświata logo i płynne wejścia.
   ========================================================= */

.gi-landing {
  position: relative;
  --gi-scroll: 0;
  --gi-mouse-x: 50%;
  --gi-mouse-y: 20%;
}

.gi-landing::before,
.gi-landing::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  filter: blur(20px);
  transform: translate3d(0, calc(var(--gi-scroll) * -22px), 0);
}

.gi-landing::before {
  width: 38vw;
  height: 38vw;
  left: -18vw;
  top: 16vh;
  background: radial-gradient(circle, rgba(215,25,32,.10), transparent 64%);
  animation: giAuraDrift 16s ease-in-out infinite alternate;
}

.gi-landing::after {
  width: 42vw;
  height: 42vw;
  right: -24vw;
  top: 52vh;
  background: radial-gradient(circle, rgba(0,0,0,.055), transparent 64%);
  animation: giAuraDrift 19s ease-in-out infinite alternate-reverse;
}

.gi-hero,
.gi-section,
.gi-footer {
  position: relative;
  z-index: 1;
}

.gi-logo {
  position: relative;
  isolation: isolate;
  transform-origin: 50% 45%;
  will-change: transform, filter;
}

.gi-logo::before {
  content: "";
  position: absolute;
  inset: -22% -18%;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 52% 44%, rgba(215,25,32,.13), transparent 38%),
    radial-gradient(circle at 28% 54%, rgba(0,0,0,.055), transparent 44%);
  filter: blur(14px);
  opacity: .62;
  transform: scale(.92);
  animation: giLogoGlow 5.8s ease-in-out infinite;
}

.gi-logo::after {
  content: "";
  position: absolute;
  inset: -12px -18px;
  z-index: -1;
  border-radius: 999px;
  background:
    conic-gradient(from 120deg,
      transparent 0deg,
      transparent 52deg,
      rgba(215,25,32,.34) 60deg,
      transparent 74deg,
      transparent 250deg,
      rgba(0,0,0,.14) 262deg,
      transparent 278deg,
      transparent 360deg);
  opacity: .38;
  filter: blur(.3px);
  mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: giLogoOrbit 10s linear infinite;
}

.gi-logo img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.055));
}

.gi-hero__content.is-visible .gi-logo {
  animation: giLogoFloat 6.2s ease-in-out .4s infinite;
}

.gi-accent {
  position: relative;
  overflow: hidden;
  transform-origin: left center;
}

.gi-accent::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform: translateX(-130%);
  animation: giLineGlint 3.8s ease-in-out infinite;
}

[data-reveal] {
  filter: blur(6px);
  transition:
    opacity .78s ease,
    filter .78s ease,
    transform .86s cubic-bezier(.16, 1, .3, 1);
}

[data-reveal].is-visible {
  filter: blur(0);
}

.gi-hero__visual {
  will-change: transform, filter;
  position: relative;
}

.gi-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.30) 49%, transparent 58%);
  transform: translateX(-120%);
  opacity: 0;
}

.gi-hero__visual.is-visible::after {
  opacity: 1;
  animation: giPhotoSweep 1.6s cubic-bezier(.16,1,.3,1) .45s both;
}

.gi-area-card,
.gi-values span {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform .42s cubic-bezier(.16,1,.3,1),
    box-shadow .42s ease,
    border-color .42s ease,
    background .42s ease;
}

.gi-area-card::before,
.gi-values span::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(215,25,32,.11), transparent 44%),
    linear-gradient(120deg, transparent, rgba(255,255,255,.42), transparent);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .42s ease, transform .42s ease;
}

.gi-area-card:hover,
.gi-values span:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(0,0,0,.065);
  border-color: rgba(215,25,32,.22);
}

.gi-area-card:hover::before,
.gi-values span:hover::before,
.gi-area-card.is-card-active::before,
.gi-values span.is-card-active::before {
  opacity: 1;
  transform: translateY(0);
}

.gi-icon {
  transition: transform .5s cubic-bezier(.16,1,.3,1), filter .5s ease;
}

.gi-area-card:hover .gi-icon,
.gi-values span:hover .gi-icon,
.gi-area-card.is-card-active .gi-icon,
.gi-values span.is-card-active .gi-icon {
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 8px 14px rgba(215,25,32,.12));
}

/* Mobile: mocniejsze wrażenie podczas przewijania, nadal eleganckie */
@media (max-width: 760px) {
  .gi-landing {
    background:
      radial-gradient(circle at 78% 6%, rgba(215,25,32,.06), transparent 28%),
      linear-gradient(180deg, #fff 0%, #fbfaf8 44%, #fff 100%);
  }

  .gi-landing::before {
    width: 82vw;
    height: 82vw;
    left: -48vw;
    top: 12vh;
    opacity: .58;
    filter: blur(18px);
  }

  .gi-landing::after {
    width: 92vw;
    height: 92vw;
    right: -58vw;
    top: 64vh;
    opacity: .46;
    filter: blur(22px);
  }

  .gi-hero::before {
    background:
      linear-gradient(145deg, rgba(255,255,255,0) 0 62%, rgba(230,229,226,.50) 62.2%, rgba(255,255,255,0) 65%),
      radial-gradient(circle at 92% 6%, rgba(215,25,32,.045), transparent 22%),
      linear-gradient(180deg, #fff 0%, #faf9f6 100%);
  }

  .gi-hero::after {
    opacity: .12;
    width: 90vw;
    height: 170px;
    bottom: 18px;
    transform: translate3d(calc(var(--gi-scroll) * -18px), 0, 0);
  }

  .gi-hero__content[data-reveal] {
    transform: translateY(20px) scale(.985);
  }

  .gi-hero__content[data-reveal].is-visible {
    transform: translateY(0) scale(1);
  }

  .gi-hero__title span {
    display: block;
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }

  .gi-hero__content.is-visible .gi-hero__title span {
    animation: giTitleUp .82s cubic-bezier(.16,1,.3,1) both;
  }

  .gi-hero__content.is-visible .gi-hero__title span:nth-child(1) { animation-delay: .12s; }
  .gi-hero__content.is-visible .gi-hero__title span:nth-child(2) { animation-delay: .24s; }
  .gi-hero__content.is-visible .gi-hero__title span:nth-child(3) { animation-delay: .36s; }

  .gi-logo {
    margin-bottom: clamp(42px, 11vw, 70px);
  }

  .gi-hero__content.is-visible .gi-logo {
    animation:
      giLogoIntro .9s cubic-bezier(.16,1,.3,1) both,
      giLogoFloat 6.2s ease-in-out 1s infinite;
  }

  .gi-logo::before {
    inset: -32% -25%;
    opacity: .74;
  }

  .gi-logo::after {
    inset: -18px -28px;
    opacity: .36;
  }

  .gi-hero__visual {
    border-radius: 30px;
    clip-path: none;
    transform: translateY(22px) scale(.985);
    box-shadow:
      0 24px 64px rgba(0,0,0,.10),
      0 1px 0 rgba(255,255,255,.86) inset;
  }

  .gi-hero__visual.is-visible {
    animation: giVisualCardIn .95s cubic-bezier(.16,1,.3,1) .12s both;
  }

  .gi-hero__visual img {
    transform: scale(1.035) translate3d(0, calc(var(--gi-scroll) * -8px), 0);
  }

  .gi-area-strip,
  .gi-values {
    position: relative;
    scroll-padding-inline: var(--gi-space);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    cursor: grab;
  }

  .gi-area-strip.is-dragging,
  .gi-values.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  .gi-area-card,
  .gi-values span {
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.68));
    box-shadow: 0 14px 34px rgba(0,0,0,.045);
    backdrop-filter: blur(12px);
  }

  .gi-area-card.is-card-active,
  .gi-values span.is-card-active {
    transform: translateY(-6px) scale(1.018);
    border-color: rgba(215,25,32,.25);
    box-shadow: 0 24px 52px rgba(0,0,0,.075);
  }

  .gi-section .gi-label {
    opacity: 0;
    transform: translateY(14px);
  }

  .gi-section.is-section-visible .gi-label {
    animation: giTitleUp .7s cubic-bezier(.16,1,.3,1) both;
  }

  .gi-statement__inner[data-reveal] {
    transform: translateY(24px) scale(.985);
  }

  .gi-statement__inner[data-reveal].is-visible {
    transform: translateY(0) scale(1);
  }

  .gi-footer {
    overflow: hidden;
  }

  .gi-footer::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -78px;
    top: -78px;
    background: radial-gradient(circle, rgba(215,25,32,.18), transparent 62%);
    filter: blur(14px);
    animation: giFooterGlow 7s ease-in-out infinite alternate;
  }
}

@keyframes giLogoIntro {
  from { opacity: 0; transform: translateY(-10px) scale(.96); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes giLogoFloat {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(0,-5px,0) rotate(-.45deg); }
}

@keyframes giLogoGlow {
  0%, 100% { opacity: .48; transform: scale(.9); }
  50% { opacity: .84; transform: scale(1.04); }
}

@keyframes giLogoOrbit {
  to { transform: rotate(360deg); }
}

@keyframes giLineGlint {
  0%, 54% { transform: translateX(-140%); opacity: 0; }
  66% { opacity: .9; }
  82%, 100% { transform: translateX(140%); opacity: 0; }
}

@keyframes giPhotoSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes giTitleUp {
  from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes giVisualCardIn {
  from { opacity: 0; transform: translateY(26px) scale(.965); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes giAuraDrift {
  0% { transform: translate3d(-8px, calc(var(--gi-scroll) * -16px), 0) scale(.96); }
  100% { transform: translate3d(12px, calc(var(--gi-scroll) * -30px), 0) scale(1.08); }
}

@keyframes giFooterGlow {
  from { opacity: .36; transform: scale(.9); }
  to { opacity: .72; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================
   Mobile swipe cue + values carousel
   ========================================================= */

.gi-mobile-scroll-wrap,
.gi-values-carousel {
  position: relative;
}

.gi-swipe-cue,
.gi-carousel-dots {
  display: none;
}

@media (max-width: 760px) {
  .gi-mobile-scroll-wrap--areas {
    margin-top: -2px;
  }

  .gi-mobile-scroll-wrap--areas::after {
    content: "";
    position: absolute;
    right: calc(var(--gi-space) * -1);
    top: 0;
    bottom: 12px;
    width: 92px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92) 58%, rgba(255,255,255,.98));
  }

  .gi-swipe-cue {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    position: absolute;
    right: -2px;
    top: 50%;
    z-index: 5;
    width: 54px;
    height: 54px;
    justify-content: center;
    border-radius: 999px;
    pointer-events: none;
    transform: translateY(-50%);
    background:
      radial-gradient(circle at 38% 50%, rgba(255,255,255,.96), rgba(255,255,255,.64) 66%, rgba(255,255,255,0));
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.08));
    opacity: .98;
    transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
  }

  .gi-swipe-cue i {
    display: block;
    width: 13px;
    height: 13px;
    border-top: 2px solid var(--gi-red);
    border-right: 2px solid var(--gi-red);
    transform: rotate(45deg);
    opacity: .35;
    animation: giSwipeArrow 1.25s ease-in-out infinite;
  }

  .gi-swipe-cue i:nth-child(2) {
    margin-left: -4px;
    animation-delay: .18s;
  }

  .gi-mobile-scroll-wrap.is-cue-hidden .gi-swipe-cue {
    opacity: 0;
    transform: translate(12px, -50%) scale(.94);
  }

  .gi-values-carousel {
    margin-top: clamp(34px, 8vw, 56px);
  }

  .gi-values-carousel::before,
  .gi-values-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 40px;
    width: 56px;
    z-index: 2;
    pointer-events: none;
  }

  .gi-values-carousel::before {
    left: calc(var(--gi-space) * -1);
    background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
  }

  .gi-values-carousel::after {
    right: calc(var(--gi-space) * -1);
    background: linear-gradient(270deg, #fff, rgba(255,255,255,0));
  }

  .gi-values {
    margin-top: 0;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
  }

  .gi-values span {
    flex: 0 0 min(292px, 76vw);
    min-height: 146px;
    scroll-snap-align: center;
  }

  .gi-values span.is-card-active {
    background:
      radial-gradient(circle at 50% -10%, rgba(215,25,32,.115), transparent 44%),
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.72));
  }

  .gi-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 18px;
    margin-top: 2px;
  }

  .gi-carousel-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(23,23,23,.22);
    transition: width .35s cubic-bezier(.16,1,.3,1), background .35s ease, transform .35s ease;
  }

  .gi-carousel-dots span.is-active {
    width: 24px;
    background: var(--gi-red);
    transform: translateY(-1px);
  }
}

@keyframes giSwipeArrow {
  0%, 100% {
    opacity: .18;
    transform: translateX(-6px) rotate(45deg) scale(.92);
  }
  45% {
    opacity: 1;
    transform: translateX(2px) rotate(45deg) scale(1.08);
  }
  70% {
    opacity: .48;
    transform: translateX(7px) rotate(45deg) scale(1);
  }
}

/* =========================================================
   FINAL — premium mobile: hero motto, auto areas, principles,
   and fixed contact rail.
   ========================================================= */

body {
  padding-bottom: 92px;
}

.gi-logo {
  margin-bottom: clamp(14px, 2vw, 22px);
}

.gi-hero__motto {
  position: relative;
  display: inline-grid;
  gap: 3px;
  margin: 0 0 clamp(42px, 7vw, 86px);
  color: var(--gi-ink);
  font-size: clamp(17px, 1.55vw, 24px);
  line-height: 1.18;
  letter-spacing: -.035em;
  font-weight: 300;
}

.gi-hero__motto::after {
  content: "";
  width: 48px;
  height: 1px;
  margin-top: 13px;
  background: var(--gi-red);
  transform-origin: left center;
  animation: giMottoLine 3.8s ease-in-out infinite;
}

.gi-hero__motto span {
  display: block;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

.gi-hero__content.is-visible .gi-hero__motto span {
  animation: giMottoWord .72s cubic-bezier(.16,1,.3,1) both;
}

.gi-hero__content.is-visible .gi-hero__motto span:nth-child(1) { animation-delay: .34s; }
.gi-hero__content.is-visible .gi-hero__motto span:nth-child(2) { animation-delay: .50s; }

.gi-hero__content.is-visible .gi-hero__motto::after {
  animation: giMottoLineIntro .8s cubic-bezier(.16,1,.3,1) .68s both, giMottoLine 4.2s ease-in-out 1.5s infinite;
}

.gi-label--soft {
  margin-bottom: 0;
}

.gi-statement .gi-accent--center {
  margin-bottom: clamp(22px, 4vw, 36px);
}

.gi-statement__lead {
  margin: 0 auto;
  max-width: 720px;
  color: var(--gi-muted);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.72;
}

.gi-floating-contact {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 40;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 28px));
  pointer-events: none;
}

.gi-floating-contact a {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,255,255,.94);
  background:
    linear-gradient(135deg, rgba(22,22,22,.94), rgba(36,36,36,.88)),
    radial-gradient(circle at 16% 20%, rgba(215,25,32,.22), transparent 34%);
  box-shadow:
    0 22px 62px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.14) inset;
  backdrop-filter: blur(18px);
  overflow: hidden;
  animation: giFixedBarIn .85s cubic-bezier(.16,1,.3,1) .55s both;
}

.gi-floating-contact a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.16) 48%, transparent 60%);
  transform: translateX(-120%);
  animation: giFixedBarGlint 5.6s ease-in-out infinite;
}

.gi-floating-contact a::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--gi-red);
  box-shadow: 0 0 0 0 rgba(215,25,32,.48);
  transform: translateY(-50%);
  animation: giPulseDot 2.4s ease-in-out infinite;
}

.gi-floating-contact__mark {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.32) inset;
}

.gi-floating-contact__mark::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1px solid rgba(215,25,32,.28);
  opacity: .6;
  animation: giSmallOrbit 4.8s linear infinite;
}

.gi-floating-contact__mark img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.gi-floating-contact__text {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding-right: 22px;
}

.gi-floating-contact small {
  color: rgba(255,255,255,.56);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .22em;
}

.gi-floating-contact b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.25;
  font-weight: 300;
  letter-spacing: .01em;
}

@media (max-width: 760px) {
  body {
    padding-bottom: 96px;
  }

  .gi-logo {
    margin-bottom: 12px;
  }

  .gi-hero__motto {
    display: grid;
    justify-content: center;
    text-align: center;
    margin-inline: auto;
    margin-bottom: clamp(36px, 10vw, 58px);
    font-size: clamp(18px, 5.25vw, 23px);
  }

  .gi-hero__motto::after {
    margin-inline: auto;
    transform-origin: center;
  }

  .gi-area-strip {
    scroll-snap-type: x mandatory;
  }

  .gi-area-card {
    flex-basis: min(238px, 66vw);
    opacity: .54;
    transform: scale(.90);
  }

  .gi-area-card strong {
    font-weight: 300;
    transition: font-weight .35s ease, color .35s ease, transform .35s ease;
  }

  .gi-area-card.is-card-active {
    opacity: 1;
    transform: translateY(-8px) scale(1.08);
    background:
      radial-gradient(circle at 50% -6%, rgba(215,25,32,.16), transparent 44%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.82));
    border-color: rgba(215,25,32,.32);
    box-shadow: 0 28px 62px rgba(0,0,0,.10);
  }

  .gi-area-card.is-card-active strong {
    color: #161616;
    font-weight: 500;
    transform: translateY(-1px);
  }

  .gi-values span {
    opacity: .48;
    transform: scale(.92);
  }

  .gi-values span.is-card-active {
    opacity: 1;
    transform: translateY(-8px) scale(1.05);
    animation: giValueBreathe 2.2s ease-in-out infinite;
  }

  .gi-values span.is-card-active b {
    font-weight: 400;
  }

  .gi-values span.is-card-active .gi-icon {
    animation: giIconGlow 2.2s ease-in-out infinite;
  }

  .gi-floating-contact {
    width: min(430px, calc(100% - 24px));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .gi-floating-contact a {
    min-height: 68px;
    padding: 10px 42px 10px 10px;
  }

  .gi-floating-contact__mark {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .gi-floating-contact__text small {
    font-size: 9px;
  }

  .gi-floating-contact__text b {
    font-size: 14px;
  }
}

@keyframes giMottoWord {
  from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes giMottoLineIntro {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes giMottoLine {
  0%, 100% { opacity: .55; transform: scaleX(.75); }
  45% { opacity: 1; transform: scaleX(1.08); }
}

@keyframes giValueBreathe {
  0%, 100% { box-shadow: 0 22px 50px rgba(0,0,0,.08); }
  50% { box-shadow: 0 28px 70px rgba(215,25,32,.13); }
}

@keyframes giIconGlow {
  0%, 100% { filter: drop-shadow(0 8px 14px rgba(215,25,32,.10)); }
  50% { filter: drop-shadow(0 12px 22px rgba(215,25,32,.22)); }
}

@keyframes giFixedBarIn {
  from { opacity: 0; transform: translateY(22px) scale(.96); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes giFixedBarGlint {
  0%, 56% { transform: translateX(-125%); opacity: 0; }
  68% { opacity: .95; }
  84%, 100% { transform: translateX(125%); opacity: 0; }
}

@keyframes giPulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(215,25,32,.42); opacity: .78; }
  55% { box-shadow: 0 0 0 9px rgba(215,25,32,0); opacity: 1; }
}

@keyframes giSmallOrbit {
  to { transform: rotate(360deg); }
}

/* =========================================================
   PATCH V2 — smoother mobile carousel, visible cards, no arrows,
   line progress, stronger logo glow, phone in fixed contact.
   ========================================================= */

.gi-logo {
  position: relative;
  isolation: isolate;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.05));
}

.gi-logo::before,
.gi-logo::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  z-index: -1;
}

.gi-logo::before {
  inset: -22px -30px;
  background:
    radial-gradient(circle at 42% 42%, rgba(215,25,32,.15), transparent 28%),
    radial-gradient(circle at 62% 52%, rgba(0,0,0,.08), transparent 34%),
    radial-gradient(circle at 48% 60%, rgba(255,255,255,.9), transparent 46%);
  opacity: .62;
  filter: blur(16px);
  animation: giLogoAura 6.8s ease-in-out infinite;
}

.gi-logo::after {
  width: 44px;
  height: 44px;
  left: 20%;
  top: 14%;
  background: radial-gradient(circle, rgba(215,25,32,.22), rgba(215,25,32,0) 62%);
  opacity: .72;
  transform: translate3d(-12px, -8px, 0);
  animation: giLogoGlowPoint 7.4s ease-in-out infinite;
}

.gi-swipe-cue,
.gi-carousel-dots {
  display: none !important;
}

.gi-carousel-progress {
  position: relative;
  width: min(240px, 58vw);
  height: 2px;
  margin: 24px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,.09);
}

.gi-carousel-progress__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--gi-progress, .25));
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(215,25,32,.35), var(--gi-red), rgba(215,25,32,.35));
  transition: transform 1.15s cubic-bezier(.16,1,.3,1);
}

.gi-carousel-progress__bar::after {
  content: "";
  position: absolute;
  inset: -5px -18px;
  background: radial-gradient(circle, rgba(215,25,32,.34), transparent 62%);
  opacity: .8;
  transform: translateX(-60%);
}

.gi-carousel-progress__bar.is-animating::after {
  animation: giProgressSpark 1.45s cubic-bezier(.16,1,.3,1) both;
}

.gi-carousel-progress__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
  transform: translateX(-120%);
  animation: giProgressShine 3.5s ease-in-out infinite;
}

.gi-floating-contact a {
  min-height: 72px;
}

.gi-floating-contact__text {
  gap: 2px;
}

.gi-floating-contact__text em {
  display: block;
  overflow: hidden;
  color: rgba(255,255,255,.72);
  font-style: normal;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.12;
  font-weight: 300;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .gi-section {
    overflow: visible;
  }

  .gi-areas {
    overflow: visible;
  }

  .gi-mobile-scroll-wrap {
    position: relative;
    overflow: visible;
  }

  .gi-mobile-scroll-wrap--areas {
    margin-inline: calc(var(--gi-space) * -1);
    padding-block: 18px 30px;
    overflow: visible;
  }

  .gi-mobile-scroll-wrap--areas::after {
    display: none !important;
  }

  .gi-area-strip {
    display: flex;
    gap: 14px;
    border: 0;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    padding: 16px calc(var(--gi-space) + 20vw) 22px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
  }

  .gi-area-strip::-webkit-scrollbar,
  .gi-values::-webkit-scrollbar {
    display: none;
  }

  .gi-area-card {
    flex: 0 0 min(214px, 62vw);
    min-height: 142px;
    padding: 21px 20px;
    border: 1px solid rgba(0,0,0,.065) !important;
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 16px 36px rgba(0,0,0,.045);
    scroll-snap-align: center;
    opacity: .64;
    transform: scale(.94);
    transition:
      transform 1.05s cubic-bezier(.16,1,.3,1),
      opacity 1.05s ease,
      box-shadow 1.05s ease,
      border-color 1.05s ease,
      background 1.05s ease;
  }

  .gi-area-card .gi-icon {
    transition: transform 1.05s cubic-bezier(.16,1,.3,1), filter 1.05s ease, opacity 1.05s ease;
    opacity: .82;
  }

  .gi-area-card strong {
    font-size: clamp(17px, 4.7vw, 20px);
    transition: font-weight .85s ease, transform 1.05s cubic-bezier(.16,1,.3,1), color 1.05s ease;
  }

  .gi-area-card.is-card-active {
    opacity: 1;
    transform: scale(1.035);
    border-color: rgba(215,25,32,.24) !important;
    background:
      radial-gradient(circle at 52% -10%, rgba(215,25,32,.10), transparent 46%),
      rgba(255,255,255,.94);
    box-shadow:
      0 22px 52px rgba(0,0,0,.08),
      0 0 0 1px rgba(255,255,255,.72) inset;
  }

  .gi-area-card.is-card-active .gi-icon {
    transform: scale(1.08);
    filter: drop-shadow(0 9px 20px rgba(215,25,32,.16));
    opacity: 1;
  }

  .gi-area-card.is-card-active strong {
    color: #171717;
    font-weight: 460;
    transform: translateY(-1px);
  }

  .gi-statement {
    overflow: visible;
  }

  .gi-values-carousel {
    margin-top: clamp(26px, 7vw, 44px);
    overflow: visible;
  }

  .gi-values-carousel::before,
  .gi-values-carousel::after {
    bottom: 28px;
    width: 42px;
  }

  .gi-values {
    display: flex;
    gap: 14px;
    border: 0;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gi-space) * -1);
    padding: 18px calc(var(--gi-space) + 16vw) 24px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .gi-values span {
    flex: 0 0 min(270px, 72vw);
    min-height: 142px;
    padding: 22px 22px;
    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 26px;
    background: rgba(255,255,255,.72);
    scroll-snap-align: center;
    opacity: .58;
    transform: scale(.94);
    box-shadow: 0 16px 40px rgba(0,0,0,.045);
    transition:
      transform 1.05s cubic-bezier(.16,1,.3,1),
      opacity 1.05s ease,
      background 1.05s ease,
      border-color 1.05s ease,
      box-shadow 1.05s ease;
  }

  .gi-values span.is-card-active {
    opacity: 1;
    transform: scale(1.025);
    background:
      radial-gradient(circle at 50% -8%, rgba(215,25,32,.12), transparent 45%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.82));
    border-color: rgba(215,25,32,.24) !important;
    box-shadow:
      0 24px 58px rgba(0,0,0,.08),
      0 0 0 1px rgba(255,255,255,.66) inset;
    animation: none;
  }

  .gi-values span.is-card-active .gi-icon {
    animation: giIconGlow 3.4s ease-in-out infinite;
  }

  .gi-values span.is-card-active b {
    font-weight: 430;
  }

  .gi-carousel-progress {
    margin-top: 18px;
  }

  .gi-floating-contact a {
    min-height: 74px;
    padding-right: 38px;
  }

  .gi-floating-contact__text b {
    max-width: 230px;
  }

  .gi-floating-contact__text em {
    font-size: 13px;
  }
}

@keyframes giLogoAura {
  0%, 100% { opacity: .46; transform: scale(.96) rotate(0deg); }
  45% { opacity: .76; transform: scale(1.06) rotate(1.5deg); }
}

@keyframes giLogoGlowPoint {
  0%, 100% { transform: translate3d(-12px, -8px, 0) scale(.86); opacity: .26; }
  42% { transform: translate3d(24px, 5px, 0) scale(1.18); opacity: .68; }
  68% { transform: translate3d(58px, 16px, 0) scale(.94); opacity: .32; }
}

@keyframes giProgressSpark {
  from { transform: translateX(-70%); opacity: 0; }
  38% { opacity: .95; }
  to { transform: translateX(110%); opacity: 0; }
}

@keyframes giProgressShine {
  0%, 55% { transform: translateX(-120%); opacity: 0; }
  68% { opacity: .75; }
  86%, 100% { transform: translateX(120%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gi-logo::before,
  .gi-logo::after,
  .gi-carousel-progress__shine,
  .gi-carousel-progress__bar::after {
    animation: none !important;
  }
}

/* =========================================================
   PATCH V3 — desktop one-line principles, visible mobile labels,
   smoother carousels, hero title underline animation, section arrows.
   ========================================================= */

.gi-hero__title span {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
}

.gi-hero__title span::after {
  content: "";
  position: absolute;
  left: .03em;
  right: .08em;
  bottom: -.075em;
  height: .065em;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(215,25,32,0), rgba(215,25,32,.56), rgba(215,25,32,0));
  opacity: 0;
  transform: scaleX(.18);
  transform-origin: left center;
  filter: blur(.3px);
  animation: giHeadlineUnderline 8.2s cubic-bezier(.16,1,.3,1) infinite;
}

.gi-hero__title span:nth-child(1)::after { animation-delay: .15s; }
.gi-hero__title span:nth-child(2)::after { animation-delay: 2.85s; }
.gi-hero__title span:nth-child(3)::after { animation-delay: 5.55s; }

.gi-values {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.gi-values span {
  min-width: 0;
}

.gi-values b {
  text-align: center;
}

.gi-footer__logo {
  filter: none !important;
  mix-blend-mode: normal;
}

.gi-section-nav {
  position: fixed;
  right: max(18px, calc((100vw - 1440px) / 2 + 22px));
  top: 50%;
  z-index: 38;
  display: grid;
  gap: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}

.gi-section-nav__btn {
  pointer-events: auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215,25,32,.30);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--gi-red);
  box-shadow:
    0 14px 32px rgba(0,0,0,.08),
    0 0 0 1px rgba(255,255,255,.66) inset;
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition:
    color .28s ease,
    border-color .28s ease,
    background .28s ease,
    transform .28s cubic-bezier(.16,1,.3,1),
    opacity .28s ease;
}

.gi-section-nav__btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.94);
  box-shadow:
    0 18px 42px rgba(215,25,32,.10),
    0 0 0 1px rgba(255,255,255,.78) inset;
}

.gi-section-nav__btn svg {
  width: 25px;
  height: 25px;
  overflow: visible;
}

.gi-section-nav__btn path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gi-section-nav__btn.is-disabled,
.gi-section-nav__btn:disabled {
  color: #bdbdbd;
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.50);
  opacity: .58;
  cursor: default;
}

.gi-section-nav__btn.is-disabled:hover,
.gi-section-nav__btn:disabled:hover {
  transform: none;
  box-shadow:
    0 14px 32px rgba(0,0,0,.08),
    0 0 0 1px rgba(255,255,255,.66) inset;
}

@media (min-width: 981px) {
  html {
    scroll-behavior: auto;
  }

  .gi-values {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch;
  }

  .gi-values span {
    min-height: 126px;
    padding-inline: clamp(12px, 1.5vw, 20px);
    white-space: normal;
  }

  .gi-values b {
    display: block;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.18;
  }
}

@media (max-width: 760px) {
  .gi-section-nav {
    display: none;
  }

  .gi-areas .gi-label,
  .gi-statement .gi-label {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #242424;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .42em;
    margin-bottom: 0;
    transform: none !important;
  }

  .gi-areas .gi-accent--center,
  .gi-statement .gi-accent--center {
    display: block !important;
    margin-top: 15px;
    margin-bottom: 18px;
  }

  .gi-mobile-scroll-wrap--areas {
    margin-inline: calc(var(--gi-space) * -1);
    padding-block: 22px 34px;
    overflow: visible;
  }

  .gi-area-strip {
    display: flex;
    gap: 16px;
    border: 0;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    padding: 18px calc(var(--gi-space) + 19vw) 25px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto !important;
  }

  .gi-area-strip::-webkit-scrollbar,
  .gi-values::-webkit-scrollbar {
    display: none;
  }

  .gi-area-card {
    flex: 0 0 min(214px, 62vw);
    min-height: 142px;
    padding: 21px 20px;
    border: 1px solid rgba(0,0,0,.065) !important;
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 16px 36px rgba(0,0,0,.045);
    scroll-snap-align: center;
    opacity: .64;
    transform: scale(.965);
    transition:
      transform 1.35s cubic-bezier(.16,1,.3,1),
      opacity 1.35s ease,
      box-shadow 1.35s ease,
      border-color 1.35s ease,
      background 1.35s ease;
  }

  .gi-area-card .gi-icon {
    transition: transform 1.35s cubic-bezier(.16,1,.3,1), filter 1.35s ease, opacity 1.35s ease;
    opacity: .82;
  }

  .gi-area-card strong {
    font-size: clamp(17px, 4.7vw, 20px);
    transition: font-weight 1.1s ease, transform 1.35s cubic-bezier(.16,1,.3,1), color 1.35s ease;
  }

  .gi-area-card.is-card-active {
    opacity: 1;
    transform: scale(1.018);
    border-color: rgba(215,25,32,.22) !important;
    background:
      radial-gradient(circle at 52% -10%, rgba(215,25,32,.095), transparent 46%),
      rgba(255,255,255,.94);
    box-shadow:
      0 22px 52px rgba(0,0,0,.08),
      0 0 0 1px rgba(255,255,255,.72) inset;
  }

  .gi-area-card.is-card-active .gi-icon {
    transform: scale(1.055);
    filter: drop-shadow(0 9px 20px rgba(215,25,32,.14));
    opacity: 1;
  }

  .gi-area-card.is-card-active strong {
    color: #171717;
    font-weight: 430;
    transform: translateY(-1px);
  }

  .gi-values-carousel {
    margin-top: clamp(24px, 7vw, 40px);
    overflow: visible;
  }

  .gi-values {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px;
    border: 0;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gi-space) * -1);
    padding: 18px calc(var(--gi-space) + 16vw) 25px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto !important;
  }

  .gi-values span {
    flex: 0 0 min(268px, 72vw);
    min-height: 140px;
    padding: 22px 22px;
    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 26px;
    background: rgba(255,255,255,.72);
    scroll-snap-align: center;
    opacity: .58;
    transform: scale(.965);
    box-shadow: 0 16px 40px rgba(0,0,0,.045);
    transition:
      transform 1.35s cubic-bezier(.16,1,.3,1),
      opacity 1.35s ease,
      background 1.35s ease,
      border-color 1.35s ease,
      box-shadow 1.35s ease;
  }

  .gi-values span.is-card-active {
    opacity: 1;
    transform: scale(1.012);
    background:
      radial-gradient(circle at 50% -8%, rgba(215,25,32,.105), transparent 45%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.82));
    border-color: rgba(215,25,32,.22) !important;
    box-shadow:
      0 24px 58px rgba(0,0,0,.08),
      0 0 0 1px rgba(255,255,255,.66) inset;
    animation: none;
  }

  .gi-values span.is-card-active .gi-icon {
    animation: giIconGlow 4.2s ease-in-out infinite;
  }

  .gi-values span.is-card-active b {
    font-weight: 420;
  }

  .gi-carousel-progress {
    margin-top: 16px;
    width: min(250px, 62vw);
  }
}

@keyframes giHeadlineUnderline {
  0%, 19% {
    opacity: 0;
    transform: scaleX(.16);
  }
  25%, 39% {
    opacity: .82;
    transform: scaleX(1);
  }
  47%, 100% {
    opacity: 0;
    transform: scaleX(.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gi-hero__title span::after {
    animation: none !important;
    opacity: 0;
  }
}

/* =========================================================
   PATCH V4 — mobile title centered/fits, reliable autoplay look,
   footer back to original logo image.
   ========================================================= */

@media (max-width: 760px) {
  .gi-hero__content {
    text-align: center;
  }

  .gi-hero__title {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(30px, 8.9vw, 38px);
    line-height: 1.13;
    letter-spacing: -.052em;
  }

  .gi-hero__title span {
    display: block;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    white-space: normal;
    text-wrap: balance;
  }

  .gi-hero__title span::after {
    left: 50%;
    right: auto;
    width: min(72%, 250px);
    transform: translateX(-50%) scaleX(.18);
    transform-origin: center;
  }

  .gi-accent {
    margin-left: auto;
    margin-right: auto;
  }

  .gi-hero__lead {
    max-width: 34ch;
    margin-inline: auto;
    text-align: center;
  }

  .gi-areas.is-carousel-visible .gi-area-card,
  .gi-statement.is-carousel-visible .gi-values span {
    will-change: transform, opacity;
  }

  .gi-area-card.is-card-active,
  .gi-values span.is-card-active {
    transition-duration: 1.55s;
  }

  .gi-area-strip,
  .gi-values {
    scroll-behavior: auto !important;
  }

  .gi-area-card {
    flex-basis: min(205px, 60vw);
  }

  .gi-values span {
    flex-basis: min(258px, 70vw);
  }
}

.gi-footer__logo {
  filter: invert(1) grayscale(1) brightness(1.5) !important;
  opacity: .98;
  mix-blend-mode: normal;
}

@media (min-width: 761px) {
  .gi-footer__logo {
    width: clamp(190px, 22vw, 260px);
  }
}

@keyframes giHeadlineUnderline {
  0%, 19% {
    opacity: 0;
    transform: translateX(-50%) scaleX(.16);
  }
  25%, 39% {
    opacity: .82;
    transform: translateX(-50%) scaleX(1);
  }
  47%, 100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(.16);
  }
}

@media (min-width: 761px) {
  @keyframes giHeadlineUnderline {
    0%, 19% {
      opacity: 0;
      transform: scaleX(.16);
    }
    25%, 39% {
      opacity: .82;
      transform: scaleX(1);
    }
    47%, 100% {
      opacity: 0;
      transform: scaleX(.16);
    }
  }
}

/* =========================================================
   PATCH V5 — opis bez centrowania, płynne obszary, litery hasła.
   ========================================================= */

.gi-hero__motto--letters {
  display: inline-grid;
  gap: 3px;
}

.gi-hero__motto--letters .gi-motto-line {
  display: block;
  opacity: 1;
  transform: none;
  white-space: nowrap;
}

.gi-motto-char,
.gi-motto-space {
  display: inline-block;
}

.gi-motto-char {
  position: relative;
  color: inherit;
  animation: giLetterWave 8.8s cubic-bezier(.16,1,.3,1) infinite;
  animation-delay: calc(var(--gi-letter) * .105s);
}

.gi-motto-dot {
  color: var(--gi-red);
  animation-name: giDotWave;
  transform-origin: center;
}

.gi-motto-space {
  width: .32em;
}

.gi-hero__content.is-visible .gi-hero__motto--letters .gi-motto-line {
  animation: none;
}

.gi-hero__content.is-visible .gi-hero__motto--letters .gi-motto-line:nth-child(1),
.gi-hero__content.is-visible .gi-hero__motto--letters .gi-motto-line:nth-child(2) {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  .gi-hero__lead {
    max-width: 33.5ch;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
  }

  .gi-area-strip,
  .gi-values {
    scroll-behavior: auto !important;
  }

  .gi-area-card,
  .gi-values span {
    transition:
      transform 1.7s cubic-bezier(.16,1,.3,1),
      opacity 1.7s ease,
      box-shadow 1.7s ease,
      border-color 1.7s ease,
      background 1.7s ease,
      filter 1.7s ease;
  }

  .gi-area-card:not(.is-card-active),
  .gi-values span:not(.is-card-active) {
    filter: saturate(.88);
  }

  .gi-area-card.is-card-near,
  .gi-values span.is-card-near {
    opacity: .74;
    transform: scale(.985);
  }

  .gi-area-card.is-card-active,
  .gi-values span.is-card-active {
    transform: scale(1.018);
  }

  .gi-area-card .gi-icon,
  .gi-values .gi-icon {
    transition:
      transform 1.7s cubic-bezier(.16,1,.3,1),
      filter 1.7s ease,
      opacity 1.7s ease;
  }

  .gi-area-card strong,
  .gi-values b {
    transition:
      font-weight 1.25s ease,
      transform 1.7s cubic-bezier(.16,1,.3,1),
      color 1.7s ease;
  }

  .gi-hero__motto--letters {
    text-align: center;
  }

  .gi-hero__motto--letters .gi-motto-line {
    white-space: normal;
  }
}

@keyframes giLetterWave {
  0%, 5% {
    color: inherit;
    text-shadow: none;
    transform: translateY(0);
  }

  7%, 10% {
    color: var(--gi-red);
    text-shadow: 0 0 16px rgba(215,25,32,.22);
    transform: translateY(-1px);
  }

  14%, 100% {
    color: inherit;
    text-shadow: none;
    transform: translateY(0);
  }
}

@keyframes giDotWave {
  0%, 5% {
    color: var(--gi-red);
    text-shadow: 0 0 0 rgba(215,25,32,0);
    transform: scale(1);
  }

  7%, 12% {
    color: var(--gi-red);
    text-shadow:
      0 0 14px rgba(215,25,32,.62),
      0 0 30px rgba(215,25,32,.30);
    transform: scale(1.28);
  }

  18%, 100% {
    color: var(--gi-red);
    text-shadow: 0 0 0 rgba(215,25,32,0);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gi-motto-char {
    animation: none !important;
  }
}

/* =========================================================
   PATCH V6 — clean motto, auto slider, nav hiding, mobile focus.
   ========================================================= */

/* clean up previous letter-based motto */
.gi-hero__motto--letters,
.gi-motto-char,
.gi-motto-space,
.gi-motto-dot,
.gi-motto-line {
  all: unset;
}

.gi-hero__motto {
  overflow: visible;
}

.gi-hero__motto span {
  display: block;
  white-space: nowrap;
}

.gi-hero__motto span:nth-child(1)::after,
.gi-hero__motto span:nth-child(2)::after {
  content: ".";
  color: var(--gi-red);
  text-shadow: 0 0 0 rgba(215,25,32,0);
  animation: giMottoDotPulse 5.4s ease-in-out infinite;
}

.gi-hero__motto span:nth-child(2)::after {
  animation-delay: 1.55s;
}

.gi-section-nav {
  transition:
    opacity .35s ease,
    transform .35s cubic-bezier(.16,1,.3,1),
    visibility .35s ease;
}

.gi-section-nav.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(14px, -50%) scale(.96);
  pointer-events: none;
}

.gi-mobile-focus {
  display: none;
}

@media (max-width: 760px) {
  .gi-hero__motto {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    justify-content: center;
    text-align: center;
  }

  .gi-hero__motto span {
    white-space: nowrap;
  }

  .gi-area-strip,
  .gi-values {
    scroll-behavior: auto !important;
  }

  .gi-area-card,
  .gi-values span {
    transition:
      transform 1.95s cubic-bezier(.16,1,.3,1),
      opacity 1.95s ease,
      box-shadow 1.95s ease,
      border-color 1.95s ease,
      background 1.95s ease,
      filter 1.95s ease;
  }

  .gi-area-card.is-card-active,
  .gi-values span.is-card-active {
    transform: scale(1.016);
  }

  .gi-area-card.is-card-near,
  .gi-values span.is-card-near {
    opacity: .74;
    transform: scale(.982);
  }

  .gi-mobile-focus {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 28;
    pointer-events: none;
    opacity: 0;
    background:
      radial-gradient(ellipse at 50% 48%, rgba(0,0,0,0) 0 29%, rgba(0,0,0,.16) 42%, rgba(0,0,0,.54) 100%),
      linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.36));
    backdrop-filter: blur(1.5px);
    transition: opacity 1.15s ease;
  }

  .gi-landing.is-mobile-focus .gi-mobile-focus {
    opacity: 1;
  }

  .gi-areas {
    position: relative;
    z-index: 1;
    transition:
      transform 1.15s cubic-bezier(.16,1,.3,1),
      filter 1.15s ease,
      box-shadow 1.15s ease;
  }

  .gi-areas.is-mobile-featured {
    z-index: 31;
    transform: translateY(-2px);
    filter: drop-shadow(0 26px 58px rgba(0,0,0,.20));
  }

  .gi-areas.is-mobile-featured .gi-label,
  .gi-areas.is-mobile-featured .gi-accent {
    color: #fff;
    text-shadow: 0 10px 24px rgba(0,0,0,.42);
  }

  .gi-areas.is-mobile-featured .gi-accent {
    box-shadow: 0 0 18px rgba(215,25,32,.42);
  }

  .gi-areas.is-mobile-featured .gi-area-card.is-card-active {
    box-shadow:
      0 26px 70px rgba(0,0,0,.24),
      0 0 0 1px rgba(255,255,255,.72) inset;
  }
}

@keyframes giMottoDotPulse {
  0%, 68%, 100% {
    text-shadow: 0 0 0 rgba(215,25,32,0);
    opacity: .92;
  }
  74% {
    text-shadow:
      0 0 14px rgba(215,25,32,.55),
      0 0 32px rgba(215,25,32,.22);
    opacity: 1;
  }
}

/* Make headline underline mobile transform compatible with V4/V5 patches */
@media (max-width: 760px) {
  @keyframes giHeadlineUnderline {
    0%, 19% { opacity: 0; transform: translateX(-50%) scaleX(.16); }
    25%, 39% { opacity: .82; transform: translateX(-50%) scaleX(1); }
    47%, 100% { opacity: 0; transform: translateX(-50%) scaleX(.16); }
  }
}

/* =========================================================
   PATCH V7 — mobile theme bar, logo build intro, reliable slider.
   ========================================================= */

:root {
  --gi-browser-bar: #161616;
}

.gi-logo--build {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.gi-logo--build img {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, -16px, 0);
  opacity: 0;
  animation: giLogoBuildReveal 1.18s cubic-bezier(.16,1,.3,1) .22s forwards;
}

.gi-logo-build {
  position: absolute;
  inset: 5% 17% 39% 13%;
  z-index: 3;
  pointer-events: none;
}

.gi-logo-build i {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(215,25,32,.92), rgba(150,16,22,.82));
  box-shadow:
    0 14px 28px rgba(215,25,32,.20),
    0 0 0 1px rgba(255,255,255,.36) inset;
  opacity: 0;
  transform: translate3d(0, -32px, 0) rotate(-9deg) scale(.74);
  animation: giLogoBlockDrop .95s cubic-bezier(.16,1,.3,1) forwards;
}

.gi-logo-build i:nth-child(1) { left: 5%; top: 7%; animation-delay: .05s; }
.gi-logo-build i:nth-child(2) { left: 27%; top: 17%; animation-delay: .16s; background: linear-gradient(135deg, rgba(35,35,35,.90), rgba(15,15,15,.86)); }
.gi-logo-build i:nth-child(3) { left: 48%; top: 4%; animation-delay: .27s; }
.gi-logo-build i:nth-child(4) { left: 66%; top: 24%; animation-delay: .38s; background: linear-gradient(135deg, rgba(35,35,35,.90), rgba(15,15,15,.86)); }
.gi-logo-build i:nth-child(5) { left: 39%; top: 48%; animation-delay: .49s; width: 14%; }

.gi-logo--build::before {
  animation-delay: .6s;
}

.gi-logo--build::after {
  animation-delay: .9s;
}

.gi-hero__content.is-visible .gi-hero__motto span {
  animation-delay: .95s;
}

.gi-hero__content.is-visible .gi-hero__motto span:nth-child(2) {
  animation-delay: 1.1s;
}

.gi-hero__content.is-visible .gi-hero__title span:nth-child(1) { transition-delay: 1.18s; }
.gi-hero__content.is-visible .gi-hero__title span:nth-child(2) { transition-delay: 1.26s; }
.gi-hero__content.is-visible .gi-hero__title span:nth-child(3) { transition-delay: 1.34s; }

@media (max-width: 760px) {
  .gi-area-strip,
  .gi-values {
    scroll-behavior: auto !important;
  }

  .gi-area-card,
  .gi-values span {
    transition:
      transform 1.85s cubic-bezier(.16,1,.3,1),
      opacity 1.85s ease,
      box-shadow 1.85s ease,
      border-color 1.85s ease,
      background 1.85s ease,
      filter 1.85s ease;
  }

  .gi-area-card.is-card-active,
  .gi-values span.is-card-active {
    transform: scale(1.018);
  }

  .gi-area-card.is-card-near,
  .gi-values span.is-card-near {
    opacity: .76;
    transform: scale(.984);
  }

  .gi-mobile-focus {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 28;
    pointer-events: none;
    opacity: 0;
    background:
      radial-gradient(ellipse at 50% 48%, rgba(0,0,0,0) 0 29%, rgba(0,0,0,.16) 42%, rgba(0,0,0,.54) 100%),
      linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.36));
    backdrop-filter: blur(1.5px);
    transition: opacity 1.1s ease;
  }

  .gi-landing.is-mobile-focus .gi-mobile-focus {
    opacity: 1;
  }

  .gi-areas {
    position: relative;
    z-index: 1;
    transition:
      transform 1.1s cubic-bezier(.16,1,.3,1),
      filter 1.1s ease;
  }

  .gi-areas.is-mobile-featured {
    z-index: 31;
    transform: translateY(-2px);
    filter: drop-shadow(0 26px 58px rgba(0,0,0,.20));
  }

  .gi-areas.is-mobile-featured .gi-label {
    color: #fff;
    text-shadow: 0 10px 24px rgba(0,0,0,.42);
  }

  .gi-areas.is-mobile-featured .gi-accent {
    box-shadow: 0 0 18px rgba(215,25,32,.42);
  }
}

@keyframes giLogoBuildReveal {
  0% {
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, -16px, 0);
    opacity: 0;
    filter: blur(4px);
  }
  58% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes giLogoBlockDrop {
  0% {
    opacity: 0;
    transform: translate3d(0, -32px, 0) rotate(-9deg) scale(.74);
  }
  58% {
    opacity: .95;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 6px, 0) rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gi-logo--build img,
  .gi-logo-build i {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   PATCH V8 — long visible logo build, light mobile browser bar,
   fixed contact hides in footer.
   ========================================================= */

:root {
  --gi-browser-bar: #f4f1ec;
}

.gi-floating-contact {
  transition:
    opacity .45s ease,
    transform .45s cubic-bezier(.16,1,.3,1),
    visibility .45s ease;
}

.gi-floating-contact.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 22px) scale(.96);
  pointer-events: none;
}

/* Stronger intro: the logo is built from falling blocks from the top of the viewport. */
.gi-logo--build {
  isolation: isolate;
}

.gi-logo--build img {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, -18px, 0);
  opacity: 0;
  animation: giLogoBuildRevealLong 1.7s cubic-bezier(.16,1,.3,1) 2.55s forwards;
}

.gi-logo-build {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.gi-logo-build i {
  position: absolute;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(215,25,32,.95), rgba(132,13,20,.88));
  box-shadow:
    0 20px 42px rgba(215,25,32,.20),
    0 0 0 1px rgba(255,255,255,.36) inset;
  opacity: 0;
  transform:
    translate3d(var(--gi-x-start, 0), -86vh, 0)
    rotate(var(--gi-rot-start, -16deg))
    scale(.66);
  animation: giLogoBlockFallLong var(--gi-duration, 2.65s) cubic-bezier(.18,.84,.21,1) var(--gi-delay, 0s) forwards;
}

.gi-logo-build i:nth-child(1)  { left: 10%; top: 9%;  --gi-x-start: -34vw; --gi-rot-start: -23deg; --gi-delay: .05s; --gi-duration: 2.55s; }
.gi-logo-build i:nth-child(2)  { left: 26%; top: 13%; --gi-x-start: 18vw;  --gi-rot-start: 19deg;  --gi-delay: .17s; --gi-duration: 2.68s; background: linear-gradient(135deg, rgba(30,30,30,.95), rgba(12,12,12,.90)); }
.gi-logo-build i:nth-child(3)  { left: 43%; top: 7%;  --gi-x-start: -9vw;  --gi-rot-start: -34deg; --gi-delay: .30s; --gi-duration: 2.78s; }
.gi-logo-build i:nth-child(4)  { left: 60%; top: 18%; --gi-x-start: 31vw;  --gi-rot-start: 25deg;  --gi-delay: .43s; --gi-duration: 2.62s; background: linear-gradient(135deg, rgba(32,32,32,.95), rgba(14,14,14,.90)); }
.gi-logo-build i:nth-child(5)  { left: 36%; top: 42%; --gi-x-start: -42vw; --gi-rot-start: 17deg;  --gi-delay: .58s; --gi-duration: 2.82s; width: 12%; }
.gi-logo-build i:nth-child(6)  { left: 53%; top: 44%; --gi-x-start: 24vw;  --gi-rot-start: -18deg; --gi-delay: .71s; --gi-duration: 2.72s; width: 11%; background: linear-gradient(135deg, rgba(32,32,32,.95), rgba(14,14,14,.90)); }
.gi-logo-build i:nth-child(7)  { left: 18%; top: 34%; --gi-x-start: -20vw; --gi-rot-start: 33deg;  --gi-delay: .86s; --gi-duration: 2.74s; width: 10%; }
.gi-logo-build i:nth-child(8)  { left: 72%; top: 34%; --gi-x-start: 42vw;  --gi-rot-start: -28deg; --gi-delay: .98s; --gi-duration: 2.86s; width: 10%; background: linear-gradient(135deg, rgba(32,32,32,.95), rgba(14,14,14,.90)); }
.gi-logo-build i:nth-child(9)  { left: 31%; top: 59%; --gi-x-start: -29vw; --gi-rot-start: -12deg; --gi-delay: 1.10s; --gi-duration: 2.72s; width: 9%; }
.gi-logo-build i:nth-child(10) { left: 45%; top: 62%; --gi-x-start: 9vw;   --gi-rot-start: 20deg;  --gi-delay: 1.22s; --gi-duration: 2.68s; width: 9%; background: linear-gradient(135deg, rgba(32,32,32,.95), rgba(14,14,14,.90)); }
.gi-logo-build i:nth-child(11) { left: 57%; top: 58%; --gi-x-start: 30vw;  --gi-rot-start: -32deg; --gi-delay: 1.35s; --gi-duration: 2.76s; width: 9%; }
.gi-logo-build i:nth-child(12) { left: 68%; top: 55%; --gi-x-start: -4vw;  --gi-rot-start: 26deg;  --gi-delay: 1.48s; --gi-duration: 2.88s; width: 8%; background: linear-gradient(135deg, rgba(32,32,32,.95), rgba(14,14,14,.90)); }

.gi-logo--build::before {
  animation-delay: 2.85s;
}

.gi-logo--build::after {
  animation-delay: 3.08s;
}

.gi-hero__content.is-visible .gi-hero__motto span {
  animation-delay: 3.05s;
}

.gi-hero__content.is-visible .gi-hero__motto span:nth-child(2) {
  animation-delay: 3.18s;
}

.gi-hero__content.is-visible .gi-hero__motto::after {
  animation-delay: 3.32s;
}

.gi-hero__content.is-visible .gi-hero__title span:nth-child(1) { transition-delay: 3.22s; }
.gi-hero__content.is-visible .gi-hero__title span:nth-child(2) { transition-delay: 3.34s; }
.gi-hero__content.is-visible .gi-hero__title span:nth-child(3) { transition-delay: 3.46s; }

@keyframes giLogoBlockFallLong {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--gi-x-start, 0), -86vh, 0)
      rotate(var(--gi-rot-start, -16deg))
      scale(.66);
    filter: blur(3px);
  }

  22% {
    opacity: .98;
    filter: blur(0);
  }

  70% {
    opacity: .98;
    transform:
      translate3d(calc(var(--gi-x-start, 0) * .08), -9px, 0)
      rotate(4deg)
      scale(1.04);
  }

  86% {
    opacity: .95;
    transform:
      translate3d(0, 0, 0)
      rotate(0deg)
      scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(0, 8px, 0)
      rotate(0deg)
      scale(.98);
  }
}

@keyframes giLogoBuildRevealLong {
  0% {
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, -18px, 0);
    opacity: 0;
    filter: blur(5px);
  }

  42% {
    opacity: 1;
    filter: blur(1px);
  }

  100% {
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    filter: blur(0);
  }
}

/* more elegant light browser/header color on mobile browsers */
@supports (color: color-mix(in srgb, white, black)) {
  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: env(safe-area-inset-top);
    background: #f4f1ec;
    z-index: 9999;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gi-logo--build img,
  .gi-logo-build i {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}