/* Logaritam webshop LP — jedan CSS, bez frameworka.
   Boje iz Logaritam loga: narančasta (#f6931d) je akcentna boja i koristi se ISKLJUČIVO za CTA gumbe.
   Crvena (#ec1c24) ostaje samo u logu. Tamne sekcije su neutralni antracit kao na oznakama regala. */
:root {
  --ink: #24272c;
  --ink-2: #17191c;
  --paper: #fff;
  --mist: #f1f2f4;
  --line: #dcdfe3;
  --steel: #5b6068;
  --on-dark: #c8ccd2;
  --cta: #f6931d;
  --cta-hover: #ffa53a;
  --cta-ink: #1b1d20;
  --err: #b42318;
  --ok: #1f8a4c;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 1.0625rem/1.55 var(--font); color: var(--ink); background: var(--paper); }
@media (min-width: 768px) { body { font-size: 1.125rem; } }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.125rem, 8.6vw, 3.75rem); font-weight: 800; letter-spacing: -.028em; line-height: 1.03; }
h2 { font-size: clamp(1.75rem, 5.6vw, 2.625rem); font-weight: 800; }
h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) { .wrap { padding: 0 2rem; } }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--cta); }
.ic { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Placeholder oznaka — ništa s ovom klasom ne ide live */
.todo { background: #ffdeeb; color: #8a1040; outline: 1px dashed #c2255c; border-radius: 3px; padding: 0 .3em; font-weight: 600; font-size: .9em; }

/* Sekcije */
.sec { padding: 3.5rem 0; }
@media (min-width: 768px) { .sec { padding: 5.5rem 0; } }
.dark { background: var(--ink); color: #fff; }
.mist { background: var(--mist); }
.sec-head { max-width: 44rem; margin-bottom: 2.25rem; }
.sec-head p { color: var(--steel); }
.dark .sec-head p { color: var(--on-dark); }

/* Gumbi */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.25rem; padding: .8rem 1.4rem; border: 1px solid transparent; border-radius: 12px; font: inherit; font-size: 1rem; font-weight: 650; letter-spacing: -.005em; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary { background: linear-gradient(180deg, #ffa53a, var(--cta)); color: var(--cta-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(246, 147, 29, .8); }
.btn-ghost { background: rgba(255, 255, 255, .06); color: inherit; border-color: rgba(255, 255, 255, .26); }
@media (hover: hover) {
  .btn-primary:hover { background: linear-gradient(180deg, #ffb45a, #f99e2c); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 16px 30px -14px rgba(246, 147, 29, .9); }
  .btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
}
.btn .ic { width: 1.2rem; height: 1.2rem; }

/* Header */
.site-head { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.logo { display: block; line-height: 0; }
.logo img { width: auto; height: 1.75rem; }
@media (min-width: 768px) { .logo img { height: 2.125rem; } .site-head .wrap { min-height: 4.75rem; } }
.site-head .btn { min-height: 2.5rem; padding: .5rem .95rem; border-radius: 10px; font-size: .9375rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }

/* S1 Hero */
.hero { padding: 2.25rem 0 3rem; }
@media (min-width: 768px) { .hero { padding: 4rem 0 5rem; } }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; } }
.eyebrow { margin-bottom: 1rem; font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: #a3aab3; }
.hero h1 { max-width: 15ch; margin-bottom: 1rem; }
.lead { max-width: 34rem; margin-bottom: 1.75rem; font-size: 1rem; line-height: 1.6; color: #b4bbc3; }
@media (min-width: 768px) { .lead { font-size: 1.125rem; } }
.cta-row { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 480px) { .cta-row { flex-direction: row; flex-wrap: wrap; } }
.micro { margin: .9rem 0 0; font-size: .8125rem; color: #959da7; }
.hero-media { margin: 0; }
.photo { margin: 0; }
.photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #3a3d42; }
.mist .photo img, .sec:not(.dark) .photo img { background: var(--mist); }
.head-grid { display: grid; gap: 1.75rem; margin-bottom: 2.75rem; }
.head-grid .sec-head { margin-bottom: 0; }
@media (min-width: 960px) { .head-grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } }

/* S2 Trust chips */
.chips-sec { background: var(--mist); }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin: 0; padding: 1.4rem 0; list-style: none; }
@media (min-width: 768px) { .chips { grid-template-columns: repeat(4, auto); justify-content: space-between; padding: 1.6rem 0; } }
.chips li { display: flex; align-items: flex-start; gap: .55rem; font-size: 1rem; font-weight: 650; line-height: 1.3; }
.chips .ic { width: 1.4rem; height: 1.4rem; padding: .2rem; border-radius: 50%; background: var(--ink); color: #fff; stroke-width: 3; }

/* S3 Problem */
.pains { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .pains { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.pains li { padding-top: 1rem; border-top: 3px solid var(--ink); }
.pains p { margin: 0; color: var(--steel); }

/* S4 Proces */
.steps-wrap { --st-fg: var(--ink); --st-bg: #fff; --st-muted: var(--steel); --st-dash: rgba(36, 39, 44, .28); --st-ping: rgba(36, 39, 44, .3); }
.dark .steps-wrap { --st-fg: #fff; --st-bg: var(--ink); --st-muted: var(--on-dark); --st-dash: rgba(255, 255, 255, .3); --st-ping: rgba(255, 255, 255, .55); }
.steps { display: grid; margin: 0; padding: 0; list-style: none; color: var(--st-fg); }
.steps li { position: relative; display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; padding-bottom: 2.25rem; }
.steps li:last-child { padding-bottom: 0; }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 3.25rem; bottom: .5rem; left: 1.375rem; border-left: 2px dashed var(--st-dash); }
.num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid currentColor; border-radius: 50%; font-weight: 800; }
.steps h3 { margin: .45rem 0 .4rem; font-size: 1.3125rem; }
.steps p { margin: 0; color: var(--st-muted); }
.tag { display: inline-block; margin-top: .75rem; padding: .2rem .75rem; border: 1px solid var(--st-dash); border-radius: 999px; font-size: .875rem; font-weight: 650; transition: background-color .35s, color .35s, border-color .35s; }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .steps li { display: block; padding: 0; }
  .steps li:not(:last-child)::after { top: 1.375rem; right: -1rem; bottom: auto; left: 3.75rem; border-left: 0; border-top: 2px dashed var(--st-dash); }
  .steps h3 { margin-top: 1.25rem; }
}

/* S5 Dokaz */
.proof-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .proof-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; margin: 0 0 2rem; }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-left: .9rem; border-left: 3px solid var(--ink); }
.stats dt { font-size: .9375rem; color: var(--steel); line-height: 1.35; }
.stats dd { margin: 0; font-size: clamp(1.625rem, 6vw, 2.25rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.proof-note { max-width: 36rem; }

.wms { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .45); font-size: .9375rem; }
.wms-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.wms-head b { font-size: 1rem; }
.live { display: inline-flex; align-items: center; gap: .4rem; color: var(--steel); font-size: .8125rem; white-space: nowrap; }
.live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(31, 138, 76, .18); }
.wms table { width: 100%; border-collapse: collapse; }
.wms th { padding: .5rem 1.1rem; background: var(--mist); color: var(--steel); font-size: .8125rem; font-weight: 600; text-align: left; }
.wms td { padding: .7rem 1.1rem; border-top: 1px solid var(--line); vertical-align: top; }
.wms th:last-child, .wms td:last-child { text-align: right; }
.wms td small { display: block; margin-top: .1rem; color: var(--steel); font-size: .8125rem; }
.wms .qty { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wms-log { margin: 0; padding: .8rem 1.1rem; border-top: 1px solid var(--line); background: #fafbfc; list-style: none; font-size: .8125rem; color: var(--steel); }
.wms-log li { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
.wms-log b { color: var(--ink); font-weight: 650; }
.wms-cap { margin: .75rem 0 0; font-size: .875rem; color: var(--steel); }

/* S6 Ponuda po mjeri */
.parts { display: grid; gap: 1.75rem; margin: 0 0 2.25rem; padding: 0; list-style: none; }
@media (min-width: 768px) { .parts { grid-template-columns: 1fr 1fr; gap: 2.25rem 3rem; } }
.parts li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; }
.parts .ic { width: 3rem; height: 3rem; padding: .7rem; border-radius: 10px; background: var(--mist); }
.parts h3 { margin: .2rem 0 .3rem; }
.parts p { margin: 0; color: var(--steel); }
.offer-close { max-width: 44rem; margin-bottom: 1.5rem; padding: 1.25rem 0 0; border-top: 1px solid var(--line); font-size: 1.125rem; font-weight: 600; }

/* S8 FAQ */
.faq { max-width: 48rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 1.15rem 2.5rem 1.15rem 0; font-weight: 700; line-height: 1.35; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; top: 50%; right: .4rem; width: 1rem; height: 2px; background: var(--ink); }
.faq summary::after { transform: rotate(90deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(0); }
.faq details p { margin: 0 0 1.25rem; color: var(--steel); max-width: 42rem; }

/* S9 Završni CTA + konfigurator */
.final-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .final-grid { grid-template-columns: .85fr 1.15fr; gap: 4rem; } }
.final-copy p { color: var(--on-dark); }
.final-copy a { color: #fff; font-weight: 700; }
@media (min-width: 960px) { .final-copy { position: sticky; top: 2rem; } }

.cfg-card { background: #fff; color: var(--ink); border-radius: 14px; padding: 1.25rem; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .6); }
@media (min-width: 768px) { .cfg-card { padding: 2rem; } }
.cfg-card :focus-visible { outline-color: var(--ink); }
.cfg-top { display: none; }
.cfg-ready .cfg-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.cfg-prog { flex: 1; }
.cfg-prog-t { margin: 0 0 .4rem; font-size: .875rem; font-weight: 600; color: var(--steel); }
.bar { height: 6px; overflow: hidden; border-radius: 99px; background: var(--mist); }
.bar i { display: block; width: 16.66%; height: 100%; background: var(--ink); transition: width .25s ease; }
.cfg-x { display: none; place-items: center; width: 3rem; height: 3rem; margin: -.5rem -.5rem -.5rem 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }

.cfg-step { min-width: 0; margin: 0 0 2.5rem; padding: 0; border: 0; }
.cfg-ready .cfg-step { display: none; margin: 0; }
.cfg-ready .cfg-step.is-active { display: block; animation: stepIn .2s ease-out; }
.cfg-step:focus { outline: none; }
@keyframes stepIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.cfg-q { float: left; width: 100%; margin: 0 0 .35rem; padding: 0; font-size: 1.375rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
@media (min-width: 768px) { .cfg-q { font-size: 1.5rem; } }
.help { clear: both; margin: 0; padding-top: .1rem; font-size: .9375rem; color: var(--steel); }
.opts { clear: both; display: grid; gap: .55rem; padding-top: .9rem; }
.opt { position: relative; display: block; }
.opt input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt span { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 3.25rem; padding: .7rem 1rem .7rem 3rem; border: 2px solid var(--line); border-radius: 10px; font-weight: 650; line-height: 1.3; transition: border-color .12s, background-color .12s, transform .12s; }
.opt small { font-size: .875rem; font-weight: 400; color: var(--steel); }
.opt span::before { content: ""; position: absolute; top: 50%; left: 1rem; width: 1.25rem; height: 1.25rem; margin-top: -.625rem; border: 2px solid var(--steel); border-radius: 50%; background: #fff; }
.opt input[type="checkbox"] + span::before { border-radius: 5px; }
.opt input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.opt input:checked + span small { color: var(--on-dark); }
.opt input:checked + span::before { border-color: #fff; box-shadow: inset 0 0 0 4px var(--ink); }
.opt input[type="checkbox"]:checked + span::before { box-shadow: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2324272c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.opt input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .opt input:hover + span { border-color: var(--ink); } }

.other { margin-top: .9rem; }
.cfg-ready .other { display: none; }
.cfg-ready .other.is-shown { display: block; }
.field { margin-top: 1rem; }
.field label, .other label { display: block; margin-bottom: .35rem; font-size: 1rem; font-weight: 650; }
.field input, .other input { width: 100%; min-height: 3.25rem; padding: .75rem .9rem; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 1.0625rem; -webkit-appearance: none; appearance: none; }
.field input:focus, .other input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(36, 39, 44, .18); }
.field input[aria-invalid="true"] { border-color: var(--err); }
.f-err, .step-err { margin: .4rem 0 0; font-size: .9375rem; font-weight: 600; color: var(--err); }
.consent { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.25rem; font-size: .9375rem; line-height: 1.45; }
.consent input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--ink); }
.cfg-nav { display: none; }
.cfg-ready .cfg-nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.25rem; margin-top: 1.25rem; }
.btn-back { min-height: 3rem; padding: 0 .25rem; border: 0; background: none; color: var(--steel); font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cfg-step[data-step="1"] .btn-back { visibility: hidden; }
.cfg-step[data-type="single"] [data-next] { display: none; }
.cfg-step.show-next [data-next] { display: inline-flex; }
.cfg-submit { width: 100%; margin-top: 1.5rem; }
.cfg-submit[disabled] { opacity: .7; cursor: progress; }
.cfg-micro { margin: .75rem 0 0; font-size: .875rem; color: var(--steel); }
.form-err { margin: 1rem 0 0; padding: .8rem 1rem; border-left: 4px solid var(--err); background: #fdecea; font-size: .9375rem; font-weight: 600; }
.hp { position: absolute; left: -9999px; }

/* Overlay (mobitel: full-screen, desktop: centrirana kartica) */
body.cfg-open { overflow: hidden; }
.cfg.is-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fff; }
.is-overlay .cfg-card { min-height: 100%; padding: 0 1.25rem 2rem; border-radius: 0; box-shadow: none; }
.is-overlay .cfg-top { position: sticky; top: 0; z-index: 2; margin: 0 0 1rem; padding: .75rem 0; background: #fff; }
.is-overlay .cfg-x { display: grid; }
@media (min-width: 768px) {
  .cfg.is-overlay { padding: 6vh 1rem; background: rgba(23, 25, 28, .75); }
  .is-overlay .cfg-card { max-width: 35rem; min-height: 0; margin: 0 auto; padding: 0 2rem 2rem; border-radius: 14px; }
  .is-overlay .cfg-top { padding-top: 1.25rem; border-radius: 14px 14px 0 0; }
}

/* Footer */
.site-foot { padding: 2.5rem 0 7rem; background: var(--ink-2); color: var(--on-dark); font-size: .9375rem; }
@media (min-width: 768px) { .site-foot { padding-bottom: 2.5rem; } }
.site-foot .wrap { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .site-foot .wrap { grid-template-columns: repeat(3, auto); justify-content: space-between; } }
.site-foot p { margin: 0; }
.foot-logo { display: block; width: auto; height: 1.75rem; margin-bottom: 1rem; }
.site-foot b { color: #fff; }
.site-foot a { color: #fff; }

/* S11 Sticky mobilni bar */
.sticky { position: fixed; right: 0; bottom: 0; left: 0; z-index: 50; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: var(--ink); color: #fff; box-shadow: 0 -8px 24px rgba(0, 0, 0, .2); transition: transform .25s ease; }
.sticky .btn { width: 100%; min-width: 0; min-height: 3rem; padding: .5rem .75rem; font-size: 1rem; }
.js .sticky { visibility: hidden; transform: translateY(110%); transition: transform .25s ease, visibility 0s .25s; }
.js .sticky.is-visible { visibility: visible; transform: none; transition: transform .5s cubic-bezier(.3, 1.35, .5, 1); }
@media (min-width: 768px) { .sticky { display: none; } }

/* Hvala */
.thanks { padding: 3rem 0 4rem; }
@media (min-width: 768px) { .thanks { padding: 5rem 0 6rem; } }
.thanks h1 { max-width: 18ch; font-size: clamp(2rem, 7vw, 3rem); }
.thanks .lead { color: var(--steel); }
.next { display: grid; gap: 1.5rem; max-width: 44rem; margin: 2.5rem 0; padding: 0; list-style: none; }
.next li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; }
.next .num { border-color: var(--ink); }
.next h2 { margin: .45rem 0 .3rem; font-size: 1.1875rem; letter-spacing: -.005em; }
.next p { margin: 0; color: var(--steel); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body[data-page="hvala"] .site-foot { padding-bottom: 2.5rem; }

/* ===== Animacije =====
   Pravilo: sadržaj je vidljiv od prvog iscrtavanja. Animira se transform, a opacity nikad ne kreće od nule,
   pa ništa ne čeka scroll i LCP se ne odgađa. JS dio je u js/motion.js (klasa .motion na <html>).
   prefers-reduced-motion gasi sve (blok gore). */

/* Hero: jedan ulazni slijed */
.hero h1 .ln { display: block; }
.hero .eyebrow, .hero h1 .ln, .hero .lead, .hero .cta-row, .hero .micro { animation: rise .85s cubic-bezier(.16, .8, .24, 1) both; }
.hero .eyebrow { animation-name: riseX; }
.hero h1 .ln:nth-child(1) { animation-delay: .04s; }
.hero h1 .ln:nth-child(2) { animation-delay: .13s; }
.hero .lead { animation-delay: .22s; }
.hero .cta-row { animation-delay: .3s; }
.hero .micro { animation-delay: .38s; }
.hero-media { position: relative; overflow: hidden; border-radius: 12px; }
.hero-media img { scale: 1.08; animation: settle 2s cubic-bezier(.16, .8, .24, 1) both; will-change: translate; }
.hero .btn-primary { position: relative; overflow: hidden; }
.hero .btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-18deg); animation: shine 2.4s ease-in-out 1.2s 2 both; pointer-events: none; }
@keyframes rise { from { opacity: .25; transform: translateY(.9em); } }
@keyframes riseX { from { opacity: .25; transform: translateX(-16px); } }
@keyframes settle { from { scale: 1.2; } }
@keyframes shine { 0% { transform: skewX(-18deg) translateX(0); } 45%, 100% { transform: skewX(-18deg) translateX(450%); } }

/* Trust chips: kvačice */
.chips .ic { animation: pop .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.chips li:nth-child(1) .ic { animation-delay: .35s; }
.chips li:nth-child(2) .ic { animation-delay: .43s; }
.chips li:nth-child(3) .ic { animation-delay: .51s; }
.chips li:nth-child(4) .ic { animation-delay: .59s; }
@keyframes pop { from { transform: scale(.4); } }

/* Proces: kutija putuje rutom, stanice se pale (vodi motion.js; na mobitelu prati scroll) */
.steps-wrap { position: relative; }
.route { display: none; }
.motion .route { display: block; position: absolute; z-index: 0; width: 0; height: var(--r-len, 0); pointer-events: none; }
.motion .route.route--x { width: var(--r-len, 0); height: 0; }
.route-fill { position: absolute; top: 0; left: -1px; width: 2px; height: 100%; background: var(--st-fg); transform: scaleY(var(--p, 0)); transform-origin: top; }
.route--x .route-fill { top: -1px; left: 0; width: 100%; height: 2px; transform: scaleX(var(--p, 0)); transform-origin: left; }
.route-box { position: absolute; top: -.4375rem; left: -.4375rem; width: .875rem; height: .875rem; border-radius: 3px; background: var(--st-fg); box-shadow: 0 0 0 5px var(--st-dash); opacity: 0; transform: translateY(calc(var(--p, 0) * var(--r-len, 0px))) rotate(calc(var(--p, 0) * 180deg)); transition: opacity .2s; }
.route--x .route-box { transform: translateX(calc(var(--p, 0) * var(--r-len, 0px))) rotate(calc(var(--p, 0) * 180deg)); }
.route.moving .route-box { opacity: 1; }
.motion .steps li { z-index: 1; }
.motion .steps .num { background: var(--st-bg); transition: background-color .3s, color .3s; }
.motion .steps li.lit .num { background: var(--st-fg); color: var(--st-bg); animation: ping .7s ease-out; }
.motion .steps li.lit .tag { background: var(--st-fg); border-color: var(--st-fg); color: var(--st-bg); }
@keyframes ping { from { box-shadow: 0 0 0 0 var(--st-ping); } to { box-shadow: 0 0 0 18px transparent; } }

/* WMS kartica: živi pregled zaliha */
.motion .live::before { animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { from { box-shadow: 0 0 0 0 rgba(31, 138, 76, .5); } to { box-shadow: 0 0 0 8px rgba(31, 138, 76, 0); } }
.wms .qty span { display: inline-block; }
.wms .qty.tick { animation: rowOut 1s ease-out; }
.wms .qty.tick-in { animation: rowIn 1.2s ease-out; }
.wms .qty.tick span, .wms .qty.tick-in span { animation: bump .5s cubic-bezier(.3, 1.5, .5, 1); }
.wms-log li.new { animation: logIn .5s cubic-bezier(.16, .8, .24, 1); }
@keyframes rowOut { from { background: var(--mist); } }
@keyframes rowIn { from { background: #e3f3e9; } }
@keyframes bump { 40% { transform: scale(1.14); } }
@keyframes logIn { from { opacity: .2; transform: translateY(-8px); } }

/* FAQ: glatko otvaranje gdje preglednik podržava (Chrome 131+), drugdje obično otvaranje */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Konfigurator */
.opt input:active + span { transform: scale(.98); }
.opt input:checked + span::before { animation: pop .25s cubic-bezier(.3, 1.5, .5, 1); }
.cfg-ready [data-dir="back"] .cfg-step.is-active { animation-name: stepBack; }
@keyframes stepBack { from { opacity: 0; transform: translateX(-12px); } }
.cfg.is-overlay { animation: sheetUp .34s cubic-bezier(.16, .8, .24, 1); }
@keyframes sheetUp { from { opacity: .4; transform: translateY(48px); } }
@media (min-width: 768px) {
  .cfg.is-overlay { animation: fadeIn .22s ease; }
  .is-overlay .cfg-card { animation: cardIn .32s cubic-bezier(.16, .8, .24, 1); }
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.cfg-submit[disabled]::after { content: ""; width: 1.05em; height: 1.05em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Hero: kartica narudžbe preko fotografije (bez JS-a prikazuje završeno stanje) */
.order-chip { position: absolute; bottom: .75rem; left: .75rem; width: min(17.5rem, calc(100% - 1.5rem)); padding: .75rem .9rem .8rem; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); font-size: .8125rem; line-height: 1.3; animation: chipIn .7s cubic-bezier(.16, .8, .24, 1) .6s both; }
@media (min-width: 960px) { .order-chip { bottom: 1.25rem; left: 1.25rem; } }
.oc-top { display: flex; justify-content: space-between; gap: .75rem; margin: 0 0 .55rem; }
.oc-top b { font-size: .875rem; }
.oc-time { color: var(--steel); font-variant-numeric: tabular-nums; }
.oc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: 0; padding: 0; list-style: none; }
.oc-steps li { padding-top: .45rem; border-top: 3px solid var(--line); color: var(--steel); font-size: .75rem; transition: border-color .35s, color .35s; }
.oc-steps li.done { border-top-color: var(--ink); color: var(--ink); font-weight: 650; }
.oc-steps li.done:last-child { border-top-color: var(--ok); color: var(--ok); }
.order-chip.swap { animation: chipSwap .6s cubic-bezier(.16, .8, .24, 1); }
@keyframes chipIn { from { opacity: .3; transform: translateY(14px) scale(.96); } }
@keyframes chipSwap { 0% { transform: none; } 35% { opacity: .2; transform: translateY(8px) scale(.97); } 100% { transform: none; } }

/* Ulaz sekcija na scroll: samo pomak, sadržaj je i prije toga vidljiv (opacity >= .5) */
.motion .rv { transition: transform 1s cubic-bezier(.16, .8, .24, 1), opacity 1s cubic-bezier(.16, .8, .24, 1); transition-delay: var(--rv-d, 0s); }
.motion .rv:not(.in) { opacity: .5; transform: translateY(36px); }
.motion .pains > li { position: relative; border-top-color: transparent; }
.motion .pains > li::before { content: ""; position: absolute; top: -3px; right: 0; left: 0; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.16, .8, .24, 1) calc(var(--rv-d, 0s) + .15s); }
.motion .pains > li.in::before { transform: scaleX(1); }
.motion .parts > li .ic { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.45, 0, .2, 1) calc(var(--rv-d, 0s) + .2s); }
.motion .parts > li.in .ic { stroke-dashoffset: 0; }

/* Konfigurator: opcije ulaze jedna za drugom */
.motion .cfg-ready .cfg-step.is-active .opt { animation: optIn .4s cubic-bezier(.16, .8, .24, 1) both; }
.motion .cfg-ready .cfg-step.is-active .opt:nth-child(2) { animation-delay: .035s; }
.motion .cfg-ready .cfg-step.is-active .opt:nth-child(3) { animation-delay: .07s; }
.motion .cfg-ready .cfg-step.is-active .opt:nth-child(4) { animation-delay: .105s; }
.motion .cfg-ready .cfg-step.is-active .opt:nth-child(5) { animation-delay: .14s; }
.motion .cfg-ready .cfg-step.is-active .opt:nth-child(6) { animation-delay: .175s; }
@keyframes optIn { from { opacity: .3; transform: translateY(12px); } }
.bar i { transition: width .45s cubic-bezier(.3, 1.3, .5, 1); }

/* Kratka verzija: benefiti */
@media (min-width: 960px) { .parts--3 { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

/* ===== Vizualni touch-up (v7): moderniji gumbi, kartice, ikone i konfigurator. Struktura HTML-a nepromijenjena. ===== */

/* Pozadine sekcija: blagi sjaj umjesto ravne plohe */
.hero, #upit { background: radial-gradient(56rem 32rem at 100% 0%, rgba(255, 255, 255, .07), transparent 60%), var(--ink); }
#upit { background: radial-gradient(48rem 30rem at 0% 0%, rgba(255, 255, 255, .06), transparent 60%), var(--ink); }
.site-head { box-shadow: 0 1px 0 var(--line); border-bottom: 0; }

/* Fotografije */
.photo img, .hero-media { border-radius: 20px; }
.hero-media { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); }
.head-grid .photo img { box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .55); }

/* Kartica narudžbe: staklo */
.order-chip { border-radius: 14px; background: rgba(255, 255, 255, .93); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .04); }
.oc-steps li { position: relative; padding-top: .6rem; border-top: 0; }
.oc-steps li::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; border-radius: 99px; background: var(--line); transition: background-color .35s; }
.oc-steps li.done::before { background: var(--ink); }
.oc-steps li.done:last-child::before { background: var(--ok); }

/* Trust chips kao mali badgevi */
.chips { gap: .625rem; }
.chips li { align-items: center; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: .9375rem; font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.chips .ic { width: 1.375rem; height: 1.375rem; padding: .25rem; border-radius: 50%; background: #e6f4ea; color: var(--ok); stroke-width: 3; }
@media (min-width: 768px) { .chips { grid-template-columns: repeat(4, 1fr); justify-content: stretch; } }

/* Problem: kartice */
.pains { gap: .875rem; }
@media (min-width: 768px) { .pains { gap: 1.25rem; } }
.pains li, .motion .pains > li { position: relative; padding: 1.5rem 1.4rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: #fafbfc; }
.pains > li::before, .motion .pains > li::before { content: ""; position: absolute; top: -1px; right: auto; left: 1.4rem; width: 2.5rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--ink); }
.pains h3 { margin-top: .25rem; }

/* Proces: brojevi i oznake */
.num { width: 2.625rem; height: 2.625rem; border-width: 1.5px; font-size: .9375rem; }
.tag { padding: .25rem .7rem; font-size: .8125rem; font-weight: 600; }

/* Dokaz: brojke u pločicama */
.stats { gap: .625rem; }
.stats div { justify-content: flex-end; padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.stats dd { font-size: clamp(1.5rem, 6vw, 2.125rem); }
.stats dt { margin-top: .15rem; font-size: .875rem; }
.wms { border-radius: 16px; box-shadow: 0 30px 60px -34px rgba(16, 24, 40, .4); }
.wms th { background: #f7f8fa; }

/* Ikone u ponudi i benefitima: tamne pločice */
.parts .ic { width: 3rem; height: 3rem; padding: .75rem; border-radius: 14px; background: linear-gradient(180deg, #353941, #1f2226); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 20px -12px rgba(0, 0, 0, .55); stroke-width: 1.75; }
.mist .parts > li { padding: 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.mist .parts { gap: .75rem; }
@media (min-width: 768px) { .mist .parts { gap: 1rem; } }

/* FAQ: kartice */
.faq { display: grid; gap: .625rem; border-top: 0; }
.faq details { padding: 0 1.15rem; border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: #c3c8cf; box-shadow: 0 10px 24px -18px rgba(16, 24, 40, .35); }
.faq summary { padding: 1.05rem 2.5rem 1.05rem 0; }
.faq summary::before, .faq summary::after { right: .15rem; width: .875rem; background: var(--steel); }
.faq details p { margin-bottom: 1.15rem; }

/* Konfigurator: kartica koja pripada sekciji, ne visi */
.final-copy h2 { max-width: 16ch; }
.final-copy a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cfg-card { position: relative; padding: 1.25rem 1.25rem 1.5rem; border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); }
@media (max-width: 767px) { .cfg-slot { margin: .5rem -.5rem 0; } }
@media (min-width: 768px) { .cfg-card { padding: 1.75rem 2.25rem 2.25rem; } }
.cfg-ready .cfg-top { margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.cfg-prog-t { margin-bottom: .55rem; font-size: .8125rem; }
.bar { height: 5px; border-radius: 0; background: #e6e9ed;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0, #000 calc((100% - 25px) / 6), transparent calc((100% - 25px) / 6), transparent calc((100% - 25px) / 6 + 5px));
  mask: repeating-linear-gradient(90deg, #000 0, #000 calc((100% - 25px) / 6), transparent calc((100% - 25px) / 6), transparent calc((100% - 25px) / 6 + 5px)); }
.bar i { background: var(--ink); }
.cfg-x { width: 2.5rem; height: 2.5rem; margin: 0; border-radius: 10px; background: var(--mist); }
.cfg-x .ic { width: 1.25rem; height: 1.25rem; }
.cfg-q { font-size: 1.3125rem; letter-spacing: -.015em; }
@media (min-width: 768px) { .cfg-q { font-size: 1.5rem; } }
.help { margin-top: .15rem; font-size: .875rem; }
.opts { gap: .5rem; padding-top: 1.1rem; }
.opt span { min-height: 3.25rem; padding: .75rem 1rem .75rem 2.9rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: 1rem; font-weight: 600; transition: border-color .15s, background-color .15s, box-shadow .15s, transform .12s; }
.opt small { margin-top: .05rem; font-size: .8125rem; }
.opt span::before { left: .95rem; width: 1.2rem; height: 1.2rem; margin-top: -.6rem; border: 1.5px solid #a9b0b9; transition: border-color .15s, background-color .15s, box-shadow .15s; }
@media (hover: hover) { .opt input:hover + span { border-color: #b7bec6; background: #fafbfc; } }
.opt input:checked + span { border-color: var(--ink); background: #f4f5f7; color: var(--ink); box-shadow: 0 0 0 3px rgba(36, 39, 44, .08); }
.opt input:checked + span small { color: var(--steel); }
.opt input:checked + span::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3.5px #fff; }
.opt input[type="checkbox"]:checked + span::before { box-shadow: none; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat; }
.opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.field label, .other label { font-size: .9375rem; font-weight: 600; }
.field input, .other input { border: 1.5px solid var(--line); border-radius: 12px; background: #fafbfc; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.field input:focus, .other input:focus { background: #fff; box-shadow: 0 0 0 4px rgba(36, 39, 44, .1); }
.consent input { width: 1.25rem; height: 1.25rem; margin-top: .1rem; }
.cfg-ready .cfg-nav { margin-top: 1.5rem; }
.cfg-nav .btn { min-height: 3rem; padding: .6rem 1.5rem; }
.btn-back { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-weight: 600; }
.btn-back::before { content: ""; width: .5rem; height: .5rem; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); }
@media (hover: hover) { .btn-back:hover { color: var(--ink); } }
.cfg-submit { min-height: 3.5rem; }
.cfg-micro { text-align: center; }
.form-err { border-radius: 10px; }
.is-overlay .cfg-card { border-radius: 0; box-shadow: none; }
.is-overlay .cfg-top { padding-top: .9rem; }
@media (min-width: 768px) { .is-overlay .cfg-card { border-radius: 22px; } }

/* Sticky bar: staklo */
.sticky { border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(23, 25, 28, .86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 -12px 30px rgba(0, 0, 0, .22); }

/* Footer */
.site-foot a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.cfg-step[data-step="1"]:not(.show-next) .cfg-nav { display: none; }
.cfg-step[data-type="contact"] .field:first-of-type { margin-top: 0; padding-top: 1.1rem; }

/* Konfigurator: naslov kartice i trust badgevi */
.cfg-head { display: grid; grid-template-columns: 2.5rem 1fr; gap: .8rem; align-items: center; margin: 0 0 1.25rem; }
.cfg-head .ic { width: 2.5rem; height: 2.5rem; padding: .6rem; border-radius: 12px; background: linear-gradient(180deg, #353941, #1f2226); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 16px -10px rgba(0, 0, 0, .5); }
.cfg-title { margin: 0; font-size: 1.0625rem; font-weight: 750; line-height: 1.25; letter-spacing: -.01em; }
.cfg-sub { margin: .15rem 0 0; font-size: .8125rem; color: var(--steel); }
@media (min-width: 768px) { .cfg-title { font-size: 1.1875rem; } .cfg-card { padding-top: 2rem; } }
.cfg-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1.5rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.cfg-trust li { display: flex; align-items: center; gap: .55rem; font-size: .8125rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.cfg-trust .ic { width: 2rem; height: 2rem; padding: .42rem; border-radius: 9px; background: #e6f4ea; color: var(--ok); stroke-width: 2; }
@media (max-width: 519px) { .cfg-trust li { flex-direction: column; gap: .4rem; text-align: center; font-size: .75rem; } }
.cfg-ready .cfg-step[data-step="1"]:not(.show-next) { margin-bottom: 0; }
.is-overlay .cfg-head { margin-top: 1rem; }

/* v8.1: ikona u zaglavlju kartice poravnata s prvim redom naslova, i kad se naslov prelomi */
.cfg-head { grid-template-columns: 2.25rem 1fr; gap: .75rem; align-items: start; }
.cfg-head .ic { width: 2.25rem; height: 2.25rem; padding: .5rem; border-radius: 10px; }
.cfg-head > div { padding-top: .475rem; }
.cfg-title { font-size: 1rem; line-height: 1.3; text-wrap: balance; }
.cfg-sub { margin-top: .2rem; }
@media (min-width: 768px) {
  .cfg-head { grid-template-columns: 2.5rem 1fr; }
  .cfg-head .ic { width: 2.5rem; height: 2.5rem; padding: .55rem; }
  .cfg-head > div { padding-top: .45rem; }
  .cfg-title { font-size: 1.1875rem; line-height: 1.3; }
}
/* Trust badgevi: ikona i tekst u istoj osi (mobitel: ikona iznad, tekst centriran; desktop: ikona uz prvi red) */
.cfg-trust li { align-items: flex-start; }
.cfg-trust li > svg { flex: none; }
@media (min-width: 520px) { .cfg-trust li { align-items: center; } }
@media (max-width: 519px) { .cfg-trust li { align-items: center; } }

/* v8.2: zaglavlje kartice — ikona i tekst uvijek iste visine i centrirani.
   Mobitel: naslov u točno dva reda (bez podnaslova) = visina ikone. Desktop: naslov + podnaslov = visina ikone. */
.cfg-head { align-items: center; grid-template-columns: 2.625rem 1fr; gap: .8rem; }
.cfg-head .ic { width: 2.625rem; height: 2.625rem; padding: .6rem; border-radius: 11px; }
.cfg-head > div { padding-top: 0; }
.cfg-title { font-size: 1.125rem; line-height: 1.3; text-wrap: nowrap; white-space: nowrap; }
.cfg-sub { margin: .1rem 0 0; font-size: .8125rem; line-height: 1.35; }
@media (max-width: 519px) {
  .cfg-head { grid-template-columns: 2.5rem 1fr; gap: .75rem; }
  .cfg-head .ic { width: 2.5rem; height: 2.5rem; padding: .575rem; }
  .cfg-title { font-size: 1rem; line-height: 1.25rem; }
  .cfg-title-2 { display: block; }
  .cfg-sub { display: none; }
}