/* Header */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--header-bg); backdrop-filter: blur(18px); border-bottom: 1px solid transparent; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.site-header.is-scrolled { border-color: var(--border-soft); box-shadow: 0 6px 22px rgba(14, 45, 34, .06); }
.navbar { min-height: 4.8rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--text-strong); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.24rem; text-decoration: none; flex-shrink: 0; }
.brand img { width: 2.5rem; height: 2.5rem; }
.nav-cluster { display: flex; align-items: center; gap: var(--space-md); }
.site-nav { display: flex; align-items: center; gap: .2rem; }
.site-nav a { color: var(--text-main); font-size: var(--fs-sm); font-weight: var(--weight-semibold); padding: .65rem .75rem; border-radius: var(--radius-pill); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--bg-surface-soft); color: var(--brand-700); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border-soft); border-radius: 50%; background: var(--bg-surface); color: var(--text-strong); }
.nav-toggle svg { width: 1.25rem; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.65rem; height: 2.65rem; border: 1px solid var(--border-soft); border-radius: 50%; background: var(--bg-surface); color: var(--text-strong); transition: transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.theme-toggle:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon, html:not([data-theme]) .theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 3rem; padding: .72rem 1.2rem; border: 1px solid transparent; border-radius: var(--radius-pill); font-weight: var(--weight-bold); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--brand-700); color: white; box-shadow: 0 10px 24px rgba(23, 101, 72, .18); }
.button--primary:hover { background: var(--brand-800); color: white; box-shadow: 0 14px 30px rgba(23, 101, 72, .25); }
.button--secondary { background: var(--bg-surface); color: var(--text-strong); border-color: var(--border-strong); }
.button--secondary:hover { background: var(--bg-surface-soft); color: var(--brand-700); }
.button--ghost { color: var(--brand-700); padding-inline: .2rem; }
.button--ghost:hover { color: var(--brand-800); transform: translateX(2px); }
.button svg { width: 1.05rem; height: 1.05rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Cards */
.card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.card--flat { box-shadow: none; }
.card--soft { background: var(--bg-surface-soft); }
.card__icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--brand-100); color: var(--brand-800); margin-bottom: var(--space-lg); }
.card__icon svg { width: 1.45rem; height: 1.45rem; }
.card h3 { margin-bottom: .65rem; }
.card p { color: var(--text-muted); }
.feature-card { position: relative; overflow: hidden; }
.feature-card::after { content: ""; position: absolute; width: 6rem; height: 6rem; border-radius: 50%; background: var(--brand-100); right: -2.5rem; top: -2.8rem; opacity: .65; }

/* Hero */
.hero { padding-block: clamp(4rem, 8vw, 7rem); position: relative; overflow: clip; }
.hero::before { content: ""; position: absolute; inset: 10% auto auto -12rem; width: 30rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--brand-100), transparent 68%); opacity: .8; pointer-events: none; }
.hero__copy { display: grid; gap: var(--space-lg); position: relative; z-index: 1; }
.hero__copy h1 em { color: var(--brand-700); font-style: normal; }
.hero__copy .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); color: var(--text-muted); font-size: var(--fs-sm); }
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__meta svg { width: 1rem; color: var(--brand-600); }
.hero-visual { position: relative; min-height: 34rem; display: grid; place-items: center; }
.hero-orbit { position: absolute; width: min(34rem, 100%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #eefaf2 0, var(--brand-100) 42%, transparent 70%); border: 1px solid var(--border-soft); }
.phone { position: relative; width: min(18.5rem, 74vw); padding: .7rem; border-radius: 2.5rem; background: #17211e; box-shadow: var(--shadow-lg); transform: rotate(2.4deg); }
.phone::before { content: ""; position: absolute; top: .85rem; left: 50%; width: 5.1rem; height: 1.2rem; transform: translateX(-50%); border-radius: 0 0 .8rem .8rem; background: #17211e; z-index: 2; }
.phone__screen { min-height: 35rem; border-radius: 1.95rem; overflow: hidden; background: #f6faf7; color: #21362e; }
.phone__top { display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 1.2rem .8rem; font-size: .74rem; font-weight: 700; }
.phone__body { padding: 1rem; display: grid; gap: .9rem; }
.app-title { display: flex; align-items: center; gap: .55rem; font-size: 1rem; font-weight: 800; color: #173e30; }
.app-title img { width: 1.8rem; }
.app-scan { position: relative; min-height: 10rem; border-radius: 1.2rem; background: linear-gradient(145deg,#e5eee8,#c8d9cf); display: grid; place-items: center; overflow: hidden; }
.app-scan::after { content: ""; position: absolute; left: 9%; right: 9%; height: 2px; background: #37a56f; box-shadow: 0 0 14px #37a56f; animation: scanline 2.8s ease-in-out infinite; }
.barcode { display: flex; gap: 3px; height: 3.5rem; align-items: stretch; opacity: .62; }
.barcode i { width: 2px; background: #31443c; }
.barcode i:nth-child(3n) { width: 5px; }
.app-result { background: #fff; border: 1px solid #dae8df; border-radius: 1rem; padding: .9rem; display: grid; gap: .7rem; }
.score-row { display: flex; align-items: center; gap: .8rem; }
.score-ring { width: 4.2rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#1c7955 0 72%, #e1ece5 72%); position: relative; font-weight: 800; }
.score-ring::before { content: ""; position: absolute; inset: .35rem; border-radius: 50%; background: white; }
.score-ring span { position: relative; z-index: 1; }
.app-bars { display: grid; gap: .45rem; }
.app-bars span { display: block; height: .42rem; border-radius: 1rem; background: #e4eee8; overflow: hidden; }
.app-bars span::before { content: ""; display: block; height: 100%; width: var(--w, 65%); background: #2b9669; border-radius: inherit; }
.floating-badge { position: absolute; z-index: 3; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: .75rem .9rem; box-shadow: var(--shadow-md); font-size: .78rem; font-weight: 750; color: var(--text-strong); }
.floating-badge--one { right: -1rem; top: 18%; }
.floating-badge--two { left: -2rem; bottom: 19%; }
.floating-badge span { display: block; color: var(--text-muted); font-size: .68rem; font-weight: 600; }

/* Status badges */
.status { display: inline-flex; align-items: center; gap: .42rem; width: fit-content; padding: .28rem .58rem; border: 1px solid; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--weight-bold); }
.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.status--available { color: var(--status-available-text); background: var(--status-available-bg); border-color: var(--status-available-border); }
.status--estimated { color: var(--status-estimated-text); background: var(--status-estimated-bg); border-color: var(--status-estimated-border); }
.status--missing { color: var(--status-missing-text); background: var(--status-missing-bg); border-color: var(--status-missing-border); }
.status--user { color: var(--status-user-text); background: var(--status-user-bg); border-color: var(--status-user-border); }

/* Demo */
.demo-shell { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-xl); align-items: stretch; }
.demo-tabs { display: grid; gap: .7rem; }
.demo-tab { text-align: left; border: 1px solid var(--border-soft); background: var(--bg-surface); color: var(--text-main); border-radius: var(--radius-md); padding: 1rem; display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; align-items: start; }
.demo-tab span:first-child { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg-surface-soft); color: var(--brand-700); font-weight: 800; }
.demo-tab strong { display: block; color: var(--text-strong); }
.demo-tab small { display: block; color: var(--text-muted); margin-top: .15rem; }
.demo-tab[aria-selected="true"] { border-color: var(--brand-400); background: var(--brand-50); box-shadow: 0 0 0 3px var(--focus-ring); }
.demo-stage { position: relative; min-height: 30rem; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: var(--space-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.demo-panel { display: none; height: 100%; }
.demo-panel.is-active { display: grid; align-content: center; animation: fade-up var(--duration-slow) var(--ease-emphasized) both; }
.label-sheet { background: #fffdf7; color: #202623; border: 1px solid #d7d4c9; border-radius: .5rem; padding: 1.4rem; transform: rotate(-1deg); box-shadow: 0 18px 35px rgba(42,44,40,.12); font-family: Arial, sans-serif; }
.label-sheet h4 { font-family: Arial, sans-serif; color: #111; font-size: 1.05rem; border-bottom: 4px solid #111; padding-bottom: .35rem; }
.label-row { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #555; padding: .38rem 0; font-size: .86rem; }
.label-ingredients { margin-top: 1rem; font-size: .78rem; line-height: 1.5; }
.analysis-list { display: grid; gap: .8rem; }
.analysis-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-radius: var(--radius-md); background: var(--bg-surface-soft); border: 1px solid var(--border-soft); }
.analysis-item strong { color: var(--text-strong); }
.result-summary { display: grid; place-items: center; text-align: center; gap: var(--space-lg); }
.result-summary .score-ring { width: 8.5rem; font-size: 1.9rem; }
.result-summary ul { text-align: left; display: grid; gap: .55rem; padding: 0; list-style: none; }
.result-summary li { display: flex; align-items: flex-start; gap: .55rem; }
.result-summary li::before { content: "✓"; color: var(--brand-600); font-weight: 800; }

/* Steps */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 4rem; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; color: var(--brand-600); font-family: var(--font-display); font-size: 2rem; font-weight: 800; }
.step::after { content: ""; position: absolute; top: 1.65rem; left: 3.25rem; right: 0; height: 1px; background: var(--border-soft); }
.step h3 { margin-bottom: .55rem; }
.step p { color: var(--text-muted); }

/* Comparison */
.compare-card { display: grid; gap: var(--space-lg); }
.compare-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.compare-score { display: grid; place-items: center; flex: 0 0 auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--brand-100); color: var(--brand-800); font-weight: 850; font-size: 1.4rem; }
.compare-list { display: grid; gap: .6rem; padding: 0; list-style: none; }
.compare-list li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border-soft); padding-bottom: .6rem; }
.compare-list span { color: var(--text-muted); }

/* FAQ */
.faq-list { display: grid; gap: .8rem; }
.faq-item { border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; }
.faq-question { width: 100%; display: flex; justify-content: space-between; gap: 1rem; align-items: center; text-align: left; border: 0; background: transparent; color: var(--text-strong); font-weight: var(--weight-bold); padding: 1.2rem 1.3rem; }
.faq-question svg { width: 1.1rem; flex: 0 0 auto; transition: transform var(--duration-fast) var(--ease-standard); }
.faq-question[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-normal) var(--ease-standard); }
.faq-answer > div { overflow: hidden; }
.faq-answer p { color: var(--text-muted); padding: 0 1.3rem 1.3rem; }
.faq-question[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; }

/* Form */
.form { display: grid; gap: var(--space-lg); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-lg); }
.field { display: grid; gap: .45rem; }
.field label { color: var(--text-strong); font-weight: var(--weight-semibold); }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-main); padding: .78rem .9rem; }
.field textarea { min-height: 10rem; resize: vertical; }
.field small { color: var(--text-muted); }
.field [aria-invalid="true"] { border-color: var(--danger-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-border) 22%, transparent); }
.form-status { display: none; padding: .9rem 1rem; border-radius: var(--radius-sm); }
.form-status.is-visible { display: block; }
.form-status--error { color: var(--danger-text); background: var(--danger-bg); border: 1px solid var(--danger-border); }
.form-status--success { color: var(--status-available-text); background: var(--status-available-bg); border: 1px solid var(--status-available-border); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); }
table { width: 100%; min-width: 42rem; background: var(--bg-surface); }
th, td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
th { color: var(--text-strong); background: var(--bg-surface-soft); font-size: var(--fs-sm); }
tr:last-child td { border-bottom: 0; }

/* CTA */
.cta { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: clamp(2rem, 5vw, 4.5rem); background: linear-gradient(135deg, var(--brand-900), var(--brand-700)); color: #dff5e7; box-shadow: var(--shadow-lg); }
.cta::after { content: ""; position: absolute; width: 22rem; height: 22rem; border-radius: 50%; background: rgba(255,255,255,.07); right: -7rem; top: -10rem; }
.cta h2 { color: white; }
.cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-xl); }
.cta .lead { color: #cce6d6; }
.cta .button--secondary { background: white; color: var(--brand-900); border-color: white; }

/* Footer */
.site-footer { padding-top: var(--space-4xl); border-top: 1px solid var(--border-soft); background: var(--bg-surface); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-2xl); }
.footer-brand p { color: var(--text-muted); margin-top: var(--space-md); max-width: 24rem; }
.footer-col h3 { font-size: var(--fs-base); margin-bottom: var(--space-md); }
.footer-links { display: grid; gap: .55rem; padding: 0; list-style: none; }
.footer-links a { color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--brand-700); }
.footer-bottom { margin-top: var(--space-3xl); padding-block: 1.25rem; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; gap: 1rem; color: var(--text-muted); font-size: var(--fs-sm); }

/* Legal */
.legal-content { display: grid; gap: var(--space-2xl); }
.legal-content section { display: grid; gap: var(--space-md); }
.legal-content ul { margin: 0; padding-left: 1.25rem; }
.notice { padding: 1rem 1.1rem; border-radius: var(--radius-md); border: 1px solid var(--status-estimated-border); background: var(--status-estimated-bg); color: var(--status-estimated-text); }

/* Misc */
.icon-list { display: grid; gap: .75rem; padding: 0; list-style: none; }
.icon-list li { display: flex; align-items: flex-start; gap: .65rem; }
.icon-list li::before { content: "✓"; color: var(--brand-600); font-weight: 850; }
.back-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; width: 3rem; height: 3rem; display: grid; place-items: center; border: 1px solid var(--border-soft); border-radius: 50%; background: var(--bg-surface); color: var(--text-strong); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translateY(.7rem); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.back-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-top svg { width: 1.1rem; }

.consent { display:flex; align-items:flex-start; gap:.65rem; color:var(--text-main); font-size:var(--fs-sm); }
.consent input { margin-top:.3rem; width:1rem; height:1rem; accent-color:var(--app-green-dark); }
.consent a { color:var(--app-green-dark); }

/* Službeni NutriMax identitet */
.brand { min-width: 10.5rem; }
.brand img.brand__wordmark {
  width: 11.6rem;
  height: auto;
  max-height: 3.35rem;
  object-fit: contain;
}
.footer-brand .brand img.brand__wordmark { width: 12.5rem; }

/* Ikone funkcionalnosti prate zelenu, plavu i narančastu paletu aplikacije */
.feature-card { --feature-color: var(--app-green-dark); --feature-soft: var(--app-green-soft); }
.feature-card:nth-child(3n + 2) { --feature-color: var(--app-blue-dark); --feature-soft: var(--app-blue-soft); }
.feature-card:nth-child(3n) { --feature-color: var(--app-orange-dark); --feature-soft: var(--app-orange-soft); }
.feature-card .card__icon { background: var(--feature-soft); color: var(--feature-color); }
.feature-card::after { background: var(--feature-soft); }

/* Stvarni prikaz aplikacije u hero sekciji */
.hero-visual--real {
  min-height: 42rem;
  isolation: isolate;
}
.hero-orbit--brand {
  width: min(38rem, 100%);
  background:
    radial-gradient(circle at 68% 28%, color-mix(in srgb, var(--app-orange) 17%, transparent), transparent 27%),
    radial-gradient(circle at 25% 36%, color-mix(in srgb, var(--app-blue) 24%, transparent), transparent 34%),
    radial-gradient(circle at 55% 62%, color-mix(in srgb, var(--app-green) 28%, transparent), transparent 58%);
  border: 0;
}
.app-shot {
  position: absolute;
  margin: 0;
  border-radius: 2.8rem;
  filter: drop-shadow(0 30px 45px rgba(28, 55, 72, .22));
}
.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.app-shot--front {
  z-index: 2;
  width: min(21rem, 70vw);
  right: 8%;
  transform: rotate(1.8deg);
}
.app-shot--back {
  z-index: 1;
  width: min(16.5rem, 52vw);
  left: 3%;
  top: 10%;
  opacity: .76;
  transform: rotate(-7deg);
  filter: saturate(.8) drop-shadow(0 22px 34px rgba(28, 55, 72, .16));
}
.hero-visual--real .floating-badge {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .55rem;
  align-items: center;
  min-width: 13rem;
}
.hero-visual--real .floating-badge > span:last-child {
  grid-column: 2;
}
.badge-dot { width: .65rem; height: .65rem; border-radius: 50%; grid-row: 1 / 3; }
.badge-dot--green { background: var(--app-green); box-shadow: 0 0 0 5px var(--app-green-soft); }
.badge-dot--orange { background: var(--app-orange); box-shadow: 0 0 0 5px var(--app-orange-soft); }
.hero-visual--real .floating-badge--one { right: -1.4rem; top: 14%; }
.hero-visual--real .floating-badge--two { left: -1.2rem; bottom: 18%; }

/* Prikaz stvarne aplikacije na stranici Kako radi */
.app-showcase { overflow: clip; }
.split--app { grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr); }
.app-showcase__visual {
  position: relative;
  width: min(100%, 22rem);
  margin-inline: auto;
}
.app-showcase__visual::before {
  content: "";
  position: absolute;
  inset: 8% -15% 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--app-blue) 22%, transparent), transparent 68%);
}
.app-showcase__visual img {
  width: 100%;
  height: auto;
  border-radius: 2.4rem;
  filter: drop-shadow(0 28px 45px rgba(28, 55, 72, .2));
}

/* Naglasci iz aplikacije */
.hero__copy h1 em { color: var(--app-green-dark); }
.button--primary { background: var(--app-green-dark); box-shadow: 0 10px 24px rgba(47, 135, 62, .2); }
.button--primary:hover { background: #246d32; box-shadow: 0 14px 30px rgba(47, 135, 62, .28); }
.cta {
  background:
    radial-gradient(circle at 88% 12%, rgba(244, 122, 18, .22), transparent 24%),
    radial-gradient(circle at 70% 100%, rgba(70, 149, 207, .2), transparent 28%),
    linear-gradient(135deg, #194f2a, #2f873e);
}

/* Završno usklađivanje dimenzija snimki zaslona */
.app-shot--front { width: min(19rem, 65vw); top: .5rem; }
.app-shot--back { width: min(14.5rem, 48vw); }
.app-showcase__visual { width: min(100%, 18.5rem); }