@media (max-width: 72rem) {
  .site-nav a { padding-inline: .55rem; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .footer-col:last-child { grid-column: 2 / -1; }
}
@media (max-width: 74rem) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: fixed; inset: 4.8rem 1rem auto; z-index: var(--z-dropdown); display: none; padding: 1rem; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-lg); }
  .site-nav.is-open { display: grid; }
  .site-nav a { padding: .8rem 1rem; }
  .nav-cta { display: none; }
  .split { grid-template-columns: 1fr; }
  .hero__copy { max-width: 48rem; }
  .hero-visual { min-height: 32rem; }
  .demo-shell { grid-template-columns: 1fr; }
  .demo-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demo-tab { grid-template-columns: 1fr; }
  .demo-tab span:first-child { display: none; }
  .cta__inner { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 48rem) {
  :root { --space-5xl: 5rem; }
  .container { width: min(calc(100% - 1.25rem), var(--container-xl)); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .demo-tabs { grid-template-columns: 1fr; }
  .demo-tab { grid-template-columns: 2rem 1fr; }
  .demo-tab span:first-child { display: grid; }
  .demo-stage { min-height: 27rem; padding: 1rem; }
  .floating-badge--one { right: -.2rem; }
  .floating-badge--two { left: -.2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
  .compare-card__top { align-items: center; }
}
@media (max-width: 34rem) {
  .navbar { min-height: 4.4rem; }
  .brand span { font-size: 1.05rem; }
  .brand img { width: 2.2rem; height: 2.2rem; }
  .nav-cluster { gap: .45rem; }
  .theme-toggle, .nav-toggle { width: 2.5rem; height: 2.5rem; }
  .actions { display: grid; }
  .actions .button { width: 100%; }
  .hero-visual { min-height: 29rem; }
  .phone { width: min(16rem, 78vw); }
  .phone__screen { min-height: 31rem; }
  .floating-badge { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}


/* Prilagodba službenog logotipa i stvarnih snimki aplikacije */
@media (max-width: 74rem) {
  .brand img.brand__wordmark { width: 10.25rem; }
  .hero-visual--real { min-height: 39rem; }
}
@media (max-width: 48rem) {
  .hero-visual--real { min-height: 36rem; }
  .app-shot--front { width: min(18rem, 69vw); right: 12%; }
  .app-shot--back { width: min(13rem, 46vw); left: 5%; }
  .split--app { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
  .brand { min-width: 0; }
  .brand img.brand__wordmark { width: 8.7rem; max-height: 2.65rem; }
  .footer-brand .brand img.brand__wordmark { width: 11rem; }
  .hero-visual--real { min-height: 32rem; }
  .app-shot--back { display: none; }
  .app-shot--front { width: min(16.5rem, 78vw); right: 50%; transform: translateX(50%) rotate(1deg); }
}
@media (max-width: 48rem) {
  .app-shot--front { width: min(15.5rem, 66vw); }
  .app-shot--back { width: min(11.5rem, 42vw); }
}
@media (max-width: 34rem) {
  .app-shot--front { width: min(14.5rem, 72vw); }
}

/* ========================================================================== 
   NutriMax 1.1 — korekcija početne hero sekcije za mobilne uređaje
   ========================================================================== */
@media (max-width: 48rem) {
  .hero {
    padding-block: 2.4rem 3rem;
  }

  .hero > .container.split {
    gap: 1.75rem;
  }

  .hero__copy {
    gap: 1rem;
    max-width: none;
  }

  .hero__copy h1 {
    font-size: clamp(2.25rem, 11.5vw, 3.4rem);
    line-height: 1.03;
  }

  .hero__copy .lead {
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem 1rem;
    font-size: .82rem;
  }

  .hero-visual--real {
    min-height: 31rem;
    margin-top: .25rem;
    overflow: hidden;
  }

  .hero-orbit--brand {
    width: min(28rem, 118vw);
  }

  .app-shot--back {
    display: none !important;
  }

  .hero-visual--real .floating-badge {
    display: none !important;
  }

  .app-shot--front {
    top: 0;
    right: 50%;
    left: auto;
    width: min(17rem, 76vw);
    transform: translateX(50%) rotate(0deg);
    filter: drop-shadow(0 22px 34px rgba(28, 55, 72, .18));
  }

  .trust-strip {
    gap: .55rem 1rem;
    padding-inline: .75rem;
    font-size: .8rem;
  }
}

@media (max-width: 34rem) {
  .navbar {
    min-height: 4.25rem;
  }

  .brand img.brand__wordmark {
    width: 8.15rem;
    max-height: 2.35rem;
  }

  .theme-toggle,
  .nav-toggle {
    width: 2.45rem;
    height: 2.45rem;
  }

  .hero {
    padding-top: 1.8rem;
  }

  .hero__meta span:last-child {
    grid-column: 1 / -1;
  }

  .hero-visual--real {
    min-height: 28.5rem;
  }

  .app-shot--front {
    width: min(15.5rem, 72vw);
  }
}

/* ========================================================================== 
   NutriMax 1.2 — završna dorada hero sekcije
   - uravnoteženiji prvi ekran na računalu
   - oznake vizualno povezane s glavnim prikazom aplikacije
   - pojednostavljen prikaz na užim ekranima
   ========================================================================== */

/* Navigacija prelazi u izbornik malo ranije kako se stavke ne bi zbijale. */
@media (max-width: 78rem) and (min-width: 74.01rem) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 4.8rem 1rem auto;
    z-index: var(--z-dropdown);
    display: none;
    padding: 1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-lg);
  }
  .site-nav.is-open { display: grid; }
  .site-nav a { padding: .8rem 1rem; }
  .nav-cta { display: none; }
}

/* Široki desktop: cijela hero poruka i gumbi ostaju vidljivi u prvom ekranu. */
@media (min-width: 74.01rem) {
  .hero {
    padding-block: clamp(2.6rem, 4.2vw, 4rem);
  }

  .hero__copy h1 {
    font-size: clamp(2.75rem, 5.25vw, 5.15rem);
    line-height: 1.04;
  }

  .hero-visual--real {
    min-height: 39rem;
    transform: translateY(-.35rem);
  }

  .hero-orbit--brand {
    width: min(35.5rem, 96%);
  }

  .app-shot--front {
    width: min(18rem, 62vw);
    right: 6%;
    top: .2rem;
  }

  .app-shot--back {
    width: min(14rem, 46vw);
    left: 6%;
    top: 11%;
  }

  /* Oznake su smještene unutar figure glavnog mobitela pa se pomiču zajedno s njim. */
  .app-shot--front .floating-badge--one {
    right: -5.15rem;
    top: 13.5%;
    transform: rotate(-1.8deg);
  }

  .app-shot--front .floating-badge--two {
    left: -10.8rem;
    right: auto;
    top: 55%;
    bottom: auto;
    z-index: 4;
    transform: rotate(-1.8deg);
  }
}

/* Kod složenog prikaza kartice više ne plutaju odvojeno od mobitela. */
@media (max-width: 74rem) {
  .hero-visual--real .floating-badge {
    display: none !important;
  }

  .hero-visual--real {
    min-height: 35rem;
  }
}

/* Mobilni prikaz ostaje jednostavan: jedna snimka, bez preklapanja. */
@media (max-width: 48rem) {
  .hero-visual--real {
    min-height: 30rem;
  }
}

@media (max-width: 34rem) {
  .hero-visual--real {
    min-height: 27.5rem;
  }
}