.heroVisual { overflow: hidden; }
.heroPeople { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.heroVisual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(22,59,44,.08), transparent 48%, rgba(216,242,60,.08)); pointer-events: none; }
.photoAccent { position: absolute; right: 0; bottom: 34px; background: #123b82; padding: 15px 28px 15px 34px; font-family: 'Archivo Black', sans-serif; font-size: 24px; letter-spacing: -2px; z-index: 2; }
@media (max-width: 900px) { .heroPeople { object-position: center 46%; } }
@media (max-width: 600px) { .heroPeople { object-position: center 48%; } .photoAccent { bottom: 22px; padding: 11px 20px; font-size: 20px; } }

/* PumaTe package-inspired brand colours. */
.logo {
  display: inline-flex;
  align-items: center;
  background: #123b82;
  padding: 7px 11px 8px;
  border-radius: 8px;
  line-height: .8;
}

.logo span,
.photoAccent span { color: inherit; }
.brand-pu,
.brand-te { color: #ffd329 !important; }
.brand-ma { color: #ffffff !important; }
.brand-domain { color: #ffffff !important; font-size: .48em; letter-spacing: -.04em; align-self: flex-end; margin-left: 2px; margin-bottom: 1px; }

.hero h1 { color: #123b82; }
html body .hero h1 em {
  color: #ffeb00 !important;
  -webkit-text-fill-color: #ffeb00 !important;
  -webkit-text-stroke: 2px #123b82;
  paint-order: stroke fill;
  text-shadow: none !important;
}

/* Supplied domain logo in the top navigation only. */
.domainLogo {
  display: block;
  width: 190px;
  height: 50px;
  border-radius: 7px;
  overflow: hidden;
  background: #000;
}
.domainLogo img { width: 100%; height: 100%; object-fit: cover; display: block; }

html body main { padding-top: 0 !important; margin-top: 0 !important; }
html body .hero {
  padding-top: 0 !important;
  margin-top: 0 !important;
  align-items: stretch;
}
html body .heroCopy {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-right: 2vw;
}
.heroBrandLogo {
  display: block;
  width: min(92%, 500px);
  height: auto;
  margin: -1px 0 8px;
  mix-blend-mode: multiply;
}
.heroVisual { align-self: stretch; margin-top: 0 !important; }
.hero h1 { font-size: clamp(48px, 5.15vw, 84px); }

/* Tropical premium brand section. */
:root {
  --ink: #071a45;
  --lime: #ffcf27;
  --orange: #f28b20;
}

.quality {
  background-image: linear-gradient(90deg, rgba(2, 10, 31, .94), rgba(4, 17, 48, .82)), url('../assets/element-egzotyczny.jpg');
  background-size: cover;
  background-position: center;
}

.quality .domainArt {
  height: 330px;
  background: #000;
  border: 0 !important;
  border-radius: 18px;
  box-shadow: none;
}

.quality .domainArt img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qualityCopy h2 strong {
  color: #ffcf27;
  font: inherit;
  -webkit-text-stroke: 1px rgba(0, 0, 0, .2);
}

.brandFacts { gap: 22px; }
.brandFacts > div {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 13px;
  align-items: center;
}
.brandFacts .factIconImage {
  width: 68px;
  height: 68px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffcf27;
  box-shadow: 0 0 0 6px rgba(255, 207, 39, .12);
}
.brandFacts span:last-child { font-size: 11px; line-height: 1.45; opacity: .88; }
.brandFacts span:last-child { color: #fff; font-weight: 400; }

.ticker { display: flex; justify-content: center; }
.ticker div { width: 100%; text-align: center; word-spacing: normal; padding: 0 24px; }

@media (max-width: 1100px) {
  .brandFacts { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  html body .hero { padding-top: 0 !important; }
  html body .heroCopy { padding: 0 0 38px !important; }
  .heroBrandLogo { width: min(68%, 240px); margin: -1px 0 10px; }
  .brandFacts > div { grid-template-columns: 60px 1fr; }
  .brandFacts .factIconImage { width: 56px; height: 56px; }
  .quality .domainArt { height: 220px; }
}

/* Domain artwork must fill its dark panel without the later white-card rules. */
.quality .qualityArt.domainArt {
  background: #000 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
}
.quality .qualityArt.domainArt img {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* More legible supporting typography. */
.hero .eyebrow,
.flavours .eyebrow {
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: .14em;
}
.hero .lead {
  max-width: 620px;
  font-size: 21px;
  line-height: 1.6;
}
.hero .button {
  font-size: 18px;
  padding: 18px 27px;
}
.hero .micro {
  gap: 13px;
  font-size: 15px;
  line-height: 1.25;
}
.hero .micro b {
  font-size: 22px;
}
.sectionHead > p {
  max-width: 470px;
  font-size: 20px;
  line-height: 1.65;
}

@media (max-width: 600px) {
  .hero .eyebrow,
  .flavours .eyebrow { font-size: 13px; }
  .hero .lead { font-size: 18px; }
  .hero .button { font-size: 16px; padding: 16px 21px; }
  .hero .micro { font-size: 13px; gap: 9px; }
  .hero .micro b { font-size: 18px; }
  .sectionHead > p { font-size: 17px; }
}

/* Product cards: scalable colour field instead of a fixed 260 px circle. */
.card .productHalo {
  width: auto;
  height: auto;
  left: 9%;
  right: 9%;
  top: 52px;
  bottom: 94px;
  transform: none;
  border-radius: 46% 54% 48% 52% / 54% 43% 57% 46%;
  background: color-mix(in srgb, var(--accent) 38%, white);
  opacity: 1;
  z-index: 0;
}

.card img {
  z-index: 1;
  width: 66%;
  left: 17%;
  mix-blend-mode: normal;
}

.card .num,
.card .cardText,
.card .arrow {
  z-index: 2;
}

@media (min-width: 1500px) {
  .card { min-height: 540px; }
  .card img { height: 350px; top: 46px; }
  .card .productHalo { left: 8%; right: 8%; top: 46px; bottom: 96px; }
}

@media (max-width: 600px) {
  .card .productHalo { left: 10%; right: 10%; top: 48px; bottom: 92px; }
}

@media (min-width: 901px) {
  .grid .card:last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* Clean product presentation in the final section. */
.quality .qualityArt {
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  isolation: auto;
}

.quality .qualityArt::before {
  display: none;
}

.quality .qualityArt img {
  width: 78%;
  height: 92%;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: none;
}