/* =============================================================
   Selce — veliko u malome
   Vizualni identitet za interaktivne demo primjere.
   Boje, tipografija i mjere preuzete iz „Wireframe tok".
   Mobile-first: primarni viewport 390×844.
   ============================================================= */

:root{
  /* Identitet */
  --turq:#0e8fa3; --turq-lt:#28bcc9; --turq-tint:#f2fbfc; --turq-line:#d5eef2;
  --navy:#0f3057; --yellow:#f5b31c; --red:#f0453a; --purple:#9b51e0;
  /* Tematske zone */
  --z1:#14a5b8; --z2:#f5b31c; --z3:#f0453a; --z4:#0f3057; --z5:#9b51e0;
  /* Neutralno */
  --ink:#1a1a1a; --text:#4a5663; --text2:#33404d; --muted:#7c8794; --muted2:#98a0ab;
  --line:#e5e8ec; --line2:#eceef1; --line3:#eef0f3;
  --paper:#f0eee9; --cream:#f7f5f0;
  /* Tipografija */
  --sans:Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:Caveat,"Bradley Hand",cursive;
  /* Mjere */
  --tap:48px;              /* minimalni touch target (zahtjev: ≥44px) */
  --r-card:18px;
  --r-pill:26px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--paper);
  font-family:var(--sans);
  color:var(--text);
  font-size:15px;
  line-height:1.45;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}
img,svg{display:block;max-width:100%}
/* Bez ovoga [hidden] gubi od svakog pravila s display:flex */
[hidden]{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;
  touch-action:manipulation}

/* ── Ljuska: telefon 390×844 ──────────────────────────────── */
.app{
  position:relative;display:flex;flex-direction:column;
  width:100%;max-width:430px;height:100dvh;margin:0 auto;
  background:#fff;overflow:hidden;
}
@media (min-width:560px) and (min-height:780px){
  body:not(.lp-body){display:flex;align-items:center;justify-content:center;padding:24px}
  .app{
    width:390px;height:844px;
    border-radius:32px;border:2px solid var(--ink);
    box-shadow:0 22px 60px rgba(15,48,87,.22);
  }
}


/* ── Scene ────────────────────────────────────────────────── */
.scene{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.scene--pad{padding:24px 20px 26px}
.scene--center{justify-content:center;text-align:center}
.scene--navy{background:var(--navy);color:#fff}
.scene--turq{background:var(--turq);color:#fff}
.scene--cream{background:var(--cream)}
.spacer{flex:1;min-height:20px}
.stack>*+*{margin-top:14px}
.stack-sm>*+*{margin-top:9px}
.stack-lg>*+*{margin-top:22px}

/* ── Tipografija ──────────────────────────────────────────── */
.eyebrow{font:800 11px/1.2 var(--sans);letter-spacing:1.7px;text-transform:uppercase;color:var(--turq)}
.h1{font:800 30px/1.14 var(--sans);color:var(--navy);margin:0;text-wrap:balance}
.h2{font:800 21px/1.2 var(--sans);color:var(--navy);margin:0}
.h3{font:800 16px/1.25 var(--sans);color:var(--navy);margin:0}
.lead{font:600 17px/1.4 var(--sans);color:var(--turq);margin:0}
.p{font:400 15px/1.6 var(--sans);color:var(--text);margin:0;text-wrap:pretty}
.small{font:400 13px/1.5 var(--sans);color:var(--muted)}
.hand{font:500 18px/1.25 var(--hand);color:var(--muted2)}
.scene--navy .h1,.scene--turq .h1,.scene--navy .h2,.scene--turq .h2,
.scene--navy .h3,.scene--turq .h3{color:#fff}
.scene--navy .p,.scene--turq .p{color:rgba(255,255,255,.85)}

/* ── Gumbi ────────────────────────────────────────────────── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:54px;padding:0 22px;border-radius:var(--r-pill);
  font:800 16px var(--sans);color:#fff;background:var(--turq);
  transition:transform .12s ease,filter .12s ease;
}
.btn:active{transform:scale(.975);filter:brightness(.94)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn--navy{background:var(--navy)}
.btn--yellow{background:var(--yellow);color:var(--navy)}
.btn--white{background:#fff;color:var(--turq)}
.btn--white-navy{background:#fff;color:var(--navy)}
.btn--ghost{background:none;color:var(--navy);border:2px solid var(--navy)}
.linkbtn{display:block;width:100%;min-height:var(--tap);text-align:center;
  font:700 14px var(--sans);color:var(--muted)}
.linkbtn--light{color:rgba(255,255,255,.72)}

/* ── Zaglavlje demoa ──────────────────────────────────────── */
.topbar{flex:none;display:flex;align-items:center;gap:10px;padding:12px 62px 12px 14px;
  border-bottom:1px solid var(--line3);background:#fff;position:relative;z-index:3}
.topbar--over{background:transparent;border-bottom:0;position:absolute;left:0;right:0;top:0}
.topbar__back{width:var(--tap);height:var(--tap);margin:-8px 0 -8px -10px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font:700 20px var(--sans);color:var(--navy)}
.topbar__title{flex:1;min-width:0;font:700 13px var(--sans);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar--over .topbar__back{background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(15,48,87,.18)}
.topbar--over .topbar__title{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}

.zone{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:14px;
  background:rgba(255,255,255,.92);font:700 11px var(--sans);color:var(--text2);
  letter-spacing:.4px;text-transform:uppercase}
.zone i{width:8px;height:8px;border-radius:50%;background:var(--z3)}

.counter{flex:none;font:800 12px var(--sans);color:var(--navy);
  background:var(--line2);border-radius:12px;padding:6px 10px}

/* ── Kartice ──────────────────────────────────────────────── */
.card{border:1px solid var(--line);border-radius:var(--r-card);padding:16px;background:#fff}
.card--tint{background:var(--turq-tint);border-color:var(--turq-line)}
.card--cream{background:var(--cream);border-color:#e7e2d8}
.factbox{background:rgba(255,255,255,.1);border-radius:16px;padding:16px;text-align:left}
.factbox--light{background:var(--turq-tint);border:1px solid var(--turq-line)}
.factbox__t{font:800 11px var(--sans);letter-spacing:1.3px;color:var(--turq-lt)}
.factbox--light .factbox__t{color:var(--turq)}
.factbox__p{margin-top:6px;font:400 14px/1.5 var(--sans);color:rgba(255,255,255,.9)}
.factbox--light .factbox__p{color:var(--text)}

/* ── Završni pečat ────────────────────────────────────────── */
.seal{width:92px;height:92px;margin:0 auto;border-radius:50%;
  background:var(--turq);display:flex;align-items:center;justify-content:center;
  animation:seal-pop .55s cubic-bezier(.2,1.4,.4,1) both}
.seal--yellow{background:var(--yellow);color:var(--navy);font:800 42px var(--sans)}
.seal__check{width:38px;height:20px;border-left:4px solid #fff;border-bottom:4px solid #fff;
  transform:rotate(-45deg);margin-top:-8px}
@keyframes seal-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

/* ── Povratna informacija ─────────────────────────────────── */
/* Bijela pilula — čita se i na svijetloj i na tamnoj podlozi */
.toast{
  position:absolute;left:50%;bottom:22px;transform:translate(-50%,14px);
  max-width:300px;padding:13px 20px;border-radius:22px;
  background:#fff;color:var(--navy);font:700 14px var(--sans);text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:20;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.ripple{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);pointer-events:none;
  animation:ripple .55s ease-out forwards;z-index:15}
@keyframes ripple{from{transform:scale(.35);opacity:.95}to{transform:scale(1.25);opacity:0}}

/* ── Intro kartica ────────────────────────────────────────── */
.demo-intro__slika{
  flex:none;height:300px;position:relative;
  background:#dfe4e8 50% 18%/cover no-repeat;
  border-bottom:1px solid rgba(15,48,87,.08);
}
@media (max-height:730px){.demo-intro__slika{height:230px}}
/* Zatamnjenje samo iza zaglavlja — ostatak ilustracije ostaje čist */
.demo-intro__slika::before{
  content:"";position:absolute;inset:0 0 auto 0;height:74px;
  background:linear-gradient(180deg,rgba(9,26,47,.42),rgba(9,26,47,0));
}

/* Palac kartice bez fotografije — ikona na kremastoj plohi */
.demo-card__thumb--ikona{display:flex;align-items:center;justify-content:center;color:var(--navy)}
.demo-card__thumb--ikona svg{width:40px;height:40px}

/* ── Zvuk ─────────────────────────────────────────────────── */
.sound{position:absolute;right:12px;top:12px;z-index:30;width:var(--tap);height:var(--tap);
  border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(15,48,87,.16);
  display:flex;align-items:center;justify-content:center;font-size:17px}

/* Niži ekrani: završni ekran ostaje cijeli u okviru, bez skrolanja */
@media (max-height:730px){
  .seal{width:76px;height:76px}
  .seal__check{width:32px;height:17px;border-width:3.5px}
  .h1{font-size:26px}
  .scene--pad{padding:18px 20px 20px}
}

/* ── Animacije ────────────────────────────────────────────── */
.fade-in{animation:fade .32s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:rise .34s cubic-bezier(.2,.9,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.nudge{animation:nudge .45s}
@keyframes nudge{
  0%,100%{transform:translateX(0)} 18%{transform:translateX(-6px)} 38%{transform:translateX(5px)}
  58%{transform:translateX(-4px)} 78%{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* Napomena na uvodnom ekranu — prikaz klijentu, ne dio priče */
.demo-napomena{margin:14px 0 0;padding:11px 13px;border-radius:13px;
  background:var(--turq-tint);border:1px solid var(--turq-line);
  font:500 13px/1.45 var(--sans);color:var(--text2)}