/* =========================================================
   NFC kartice: HERO (nfh-) v3, kompozicija prema referentnom vizualu
   Učitava se nakon site.css. Sve klase imaju prefiks .nfh-
   ========================================================= */
.nfh-hero {
  --nfh-side: max(48px, calc((100vw - 1200px) / 2));
  position: relative;
  isolation: isolate;
  padding: 150px 0 72px;
  overflow: hidden;
  background: #fff;
}
.nfh-container {
  width: calc(100% - 96px);
  max-width: 1200px;
  margin-inline: auto;
  min-width: 0;
}
.nfh-grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}
.nfh-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}
.nfh-kicker {
  margin: 0 0 22px;
  color: #0f4c45;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.22em;
}
.nfh-title {
  margin: 0 0 24px;
  color: #0f4c45;
  font-size: clamp(42px, 4.45vw, 66px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.045em;
}
.nfh-lead {
  margin: 0;
  max-width: 366px;
  color: #0f4c45;
  opacity: 0.74;
  font-size: 18.5px;
  line-height: 1.45;
}
.nfh-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 32px;
}
.nfh-hero .nfh-btn {
  min-height: 50px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 15.5px;
}
.nfh-hero .nfh-link {
  font-size: 15.5px;
}

/* ---------- Vizual: jedan omotač, sve u postocima ----------
   Omjeri izmjereni na referentnom vizualu: kartica 48,9 % širine,
   mobitel počinje na 22,9 %, kartica 29,4 % od vrha. */
.nfh-visual {
  position: relative;
  z-index: 1;
  width: min(calc(100% + var(--nfh-side)), 980px);
  aspect-ratio: 1612 / 861;
  container-type: inline-size;
}
.nfh-card,
.nfh-phone {
  position: absolute;
  will-change: transform;
}
.nfh-card img,
.nfh-phone > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.nfh-card {
  z-index: 1;
  left: 0;
  top: 34%;
  width: 45.5%;
  animation: nfh-float-card 7s ease-in-out infinite;
}
.nfh-card img {
  filter: drop-shadow(0 1.6cqw 2cqw rgb(15 76 69 / 0.14)) saturate(0.9);
}
.nfh-phone {
  z-index: 3;
  left: 27%;
  top: -2%;
  width: 78%;
  container-type: inline-size;
  animation: nfh-float-phone 9s ease-in-out infinite;
}
.nfh-phone > img {
  filter: drop-shadow(0 2cqw 2.6cqw rgb(15 76 69 / 0.13));
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%), linear-gradient(to bottom, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 82%, transparent 100%), linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.nfh-arcs {
  position: absolute;
  z-index: 2;
  left: 40.2%;
  top: 44%;
  width: 4%;
  height: auto;
  overflow: visible;
  transform: rotate(-24deg);
  transform-origin: 10% 50%;
}
.nfh-arc {
  animation: nfh-arc 2.4s ease-in-out infinite;
}
.nfh-arc-2 { animation-delay: 0.25s; }
.nfh-arc-3 { animation-delay: 0.5s; }

/* ---------- Ekran mobitela: HTML sloj točno preko praznog ekrana ----------
   Kutovi ekrana izmjereni na nfc-mobitel.webp (1100x727):
   (122,121) (403,-1) (819,469) (559,620) -> perspektivni fit u cqw mobitela. */
.nfh-screen {
  position: absolute;
  left: 27.26cqw;
  top: -5.8cqw;
  width: 31.09cqw;
  height: 64.77cqw;
  transform: perspective(403.19cqw) rotateX(38.739deg) rotateY(8.94deg) rotateZ(-37.298deg);
  transform-origin: 50% 50%;
  container-type: inline-size;
  border-radius: 4.6cqw;
  background: #fff;
  overflow: hidden;
  backface-visibility: hidden;
}
.nfh-s-island {
  position: absolute;
  z-index: 2;
  top: 3.4cqw;
  left: 50%;
  width: 31cqw;
  height: 9.4cqw;
  border-radius: 9cqw;
  background: #0b0f0e;
  transform: translateX(-50%);
}
.nfh-s-status {
  position: absolute;
  z-index: 3;
  top: 4.4cqw;
  left: 10cqw;
  right: 8cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1f1f1f;
  font-family: -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 5.2cqw;
  font-weight: 600;
  line-height: 1;
}
.nfh-s-status svg {
  width: 17cqw;
  height: 6cqw;
}
.nfh-screen-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 17cqw 6.5cqw 0;
  color: #1f1f1f;
  font-family: -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  background: linear-gradient(#fff, #fff 70%, #f8f9fa);
}
.nfh-g-top {
  display: flex;
  align-items: center;
  gap: 3.6cqw;
  padding: 2cqw 0 4.6cqw;
  border-bottom: 0.35cqw solid #e3e3e3;
}
.nfh-g-x {
  flex: 0 0 auto;
  width: 6.4cqw;
  height: 6.4cqw;
  color: #444746;
}
.nfh-g-place {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
  line-height: 1.15;
}
.nfh-g-place strong {
  font-size: 6.4cqw;
  font-weight: 600;
  color: #1f1f1f;
}
.nfh-g-place span {
  font-size: 4.2cqw;
  color: #5f6368;
}
.nfh-g-logo {
  flex: 0 0 auto;
  width: 7.6cqw;
  height: 7.6cqw;
}
.nfh-g-user {
  display: flex;
  align-items: center;
  gap: 3.4cqw;
  margin-top: 6cqw;
  line-height: 1.2;
}
.nfh-g-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 10.5cqw;
  height: 10.5cqw;
  border-radius: 50%;
  background: #7b4fbf;
  color: #fff;
  font-size: 5.4cqw;
  font-weight: 600;
  line-height: 1;
}
.nfh-g-user div strong {
  display: block;
  font-size: 5cqw;
  font-weight: 600;
}
.nfh-g-user div span {
  display: block;
  margin-top: 0.6cqw;
  font-size: 3.8cqw;
  color: #5f6368;
}
.nfh-g-user i {
  font-style: normal;
}
.nfh-s-stars {
  display: flex;
  justify-content: center;
  gap: 2.6cqw;
  margin-top: 7cqw;
}
.nfh-s-stars svg {
  width: 13.4cqw;
  height: 13.4cqw;
  fill: rgb(251 188 4 / 0);
  stroke: #747775;
  stroke-width: 1.3;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: nfh-star 5s ease-in-out infinite;
}
.nfh-s-stars svg:nth-child(2) { animation-delay: 0.18s; }
.nfh-s-stars svg:nth-child(3) { animation-delay: 0.36s; }
.nfh-s-stars svg:nth-child(4) { animation-delay: 0.54s; }
.nfh-s-stars svg:nth-child(5) { animation-delay: 0.72s; }
.nfh-g-field {
  height: 40cqw;
  margin-top: 7cqw;
  padding: 4.4cqw;
  border: 0.55cqw solid #8e918f;
  border-radius: 3cqw;
  color: #5f6368;
  font-size: 4.4cqw;
  line-height: 1.35;
  background: #fff;
}
.nfh-g-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  margin-top: 4.6cqw;
  padding: 3.6cqw 0;
  border: 0.35cqw solid #c4c7c5;
  border-radius: 10cqw;
  color: #0b57d0;
  font-size: 4.4cqw;
  font-weight: 600;
}
.nfh-g-photo svg {
  width: 5.6cqw;
  height: 5.6cqw;
}
.nfh-s-btn {
  display: block;
  margin-top: auto;
  margin-bottom: 21cqw;
  padding: 4.6cqw 3cqw;
  border-radius: 10cqw;
  background: #0b57d0;
  color: #fff;
  font-size: 5.2cqw;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0.8cqw 2.4cqw rgb(11 87 208 / 0.28);
  animation: nfh-press 5s ease-in-out infinite;
}
.nfh-g-home {
  position: absolute;
  left: 50%;
  bottom: 3.2cqw;
  width: 34cqw;
  height: 1.3cqw;
  border-radius: 2cqw;
  background: #1f1f1f;
  transform: translateX(-50%);
}

/* ---------- Animacije ---------- */
@keyframes nfh-float-card {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -2%, 0) rotate(-0.5deg); }
}
@keyframes nfh-float-phone {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -2%, 0) rotate(0.4deg); }
}
@keyframes nfh-arc {
  0%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}
@keyframes nfh-star {
  0%, 8% { fill: rgb(251 188 4 / 0); stroke: #747775; transform: scale(1); }
  16% { fill: #fbbc04; stroke: #fbbc04; transform: scale(1.15); }
  22%, 84% { fill: #fbbc04; stroke: #fbbc04; transform: scale(1); }
  94%, 100% { fill: rgb(251 188 4 / 0); stroke: #747775; transform: scale(1); }
}
@keyframes nfh-press {
  0%, 44%, 100% { transform: scale(1); box-shadow: 0 0.8cqw 2.4cqw rgb(11 87 208 / 0.28); }
  52% { transform: scale(0.96); box-shadow: 0 0.3cqw 1cqw rgb(11 87 208 / 0.2), 0 0 0 0 rgb(11 87 208 / 0.35); }
  66% { transform: scale(1); box-shadow: 0 0.8cqw 2.4cqw rgb(11 87 208 / 0.28), 0 0 0 3cqw rgb(11 87 208 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nfh-card,
  .nfh-phone,
  .nfh-arc,
  .nfh-s-stars svg,
  .nfh-s-btn {
    animation: none;
  }
  .nfh-arc { opacity: 1; }
  .nfh-s-stars svg { fill: #fbbc04; stroke: #fbbc04; }
}

/* ---------- Responzivnost ---------- */
@media (max-width: 1150px) {
  .nfh-hero { --nfh-side: 32px; }
  .nfh-container { width: calc(100% - 64px); }
  .nfh-grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 36px; }
  .nfh-lead { font-size: 17.5px; max-width: 340px; }
  .nfh-actions { gap: 10px 18px; }
  .nfh-hero .nfh-btn { padding-inline: 18px; font-size: 15px; }
  .nfh-hero .nfh-link { font-size: 15px; }
}
@media (max-width: 900px) {
  .nfh-hero .nfh-btn { padding-inline: 22px; font-size: 15.5px; }
  .nfh-hero .nfh-link { font-size: 15.5px; }
}
@media (max-width: 900px) {
  .nfh-hero { padding: 110px 0 48px; }
  .nfh-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .nfh-copy { max-width: 560px; }
  .nfh-title { font-size: clamp(40px, 7.4vw, 56px); }
  .nfh-lead { max-width: 420px; }
  .nfh-visual {
    width: calc(100% + var(--nfh-side));
    max-width: 760px;
  }
}
@media (max-width: 767px) {
  .nfh-hero { --nfh-side: 20px; }
  .nfh-container { width: calc(100% - 40px); }
  .nfh-lead { font-size: 17px; }
  .nfh-visual { width: calc(110% + var(--nfh-side)); max-width: none; }
}
@media (max-width: 479px) {
  .nfh-hero { --nfh-side: 16px; }
  .nfh-container { width: calc(100% - 32px); }
  .nfh-kicker { margin-bottom: 16px; font-size: 13px; }
  .nfh-title { font-size: clamp(38px, 11vw, 46px); margin-bottom: 18px; }
  .nfh-lead { font-size: 16.5px; }
  .nfh-actions { gap: 6px 20px; margin-top: 24px; }
  .nfh-hero .nfh-btn { min-height: 50px; padding: 12px 20px; font-size: 15.5px; }
  .nfh-visual { width: calc(116% + var(--nfh-side)); margin-left: -2%; }
}