/* ============================================================
   STAMPRESSO — landing za reklame (/register), SAMO .lp-* dodaci
   Nasleđuje site.css (tokeni, .btn, .form, .device/.ph/.hp-*,
   .hs-art, .probaj-grid, .bk-*, .ck). Bez preloadera, nav menija,
   Lenis-a i ijedne JS biblioteke — plaćeni klik mora da leti.
   Plan: db/plan-landing-reklame.md
   ============================================================ */

/* ---------- mini nav: samo logo, bez pozadine ---------- */
.lp-nav{
  position:absolute;top:0;left:0;right:0;z-index:50;
  padding:20px var(--pad);
}

/* ---------- reveal animacije (JS + IntersectionObserver, nula biblioteka)
   Sakrivanje važi SAMO kad JS doda .lp-anim na <html> (i to ne pod
   reduced-motion) — bez JS-a je sve vidljivo. .d1/.d2/.d3 = stagger. ---------- */
html.lp-anim .lrev{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s var(--ease);
}
html.lp-anim .lrev.in{opacity:1;transform:none}
html.lp-anim .lrev.d1{transition-delay:.12s}
html.lp-anim .lrev.d2{transition-delay:.24s}
html.lp-anim .lrev.d3{transition-delay:.36s}

/* ---------- hero ---------- */
.lp-hero{
  position:relative;overflow:clip;
  padding:clamp(96px,14vh,150px) 0 clamp(50px,8vh,90px);
  min-height:88svh;display:flex;align-items:center;
}
.lp-hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,4vw,64px);align-items:center;width:100%;
}
.lp-h1{
  font-family:var(--disp);font-weight:800;
  /* skromniji plafon od homepage (76px): najduži red „vraća je čista" ~7em,
     kolona na 1240px je ~630px → 76px staje sa vazduhom (mereno u preview-u) */
  font-size:clamp(38px,6.6vw,76px);
  line-height:1;letter-spacing:-.035em;
}
.lp-h1-line{display:block;padding-bottom:.06em;margin-bottom:-.06em}
.lp-sub{
  max-width:520px;margin-top:clamp(20px,3vh,32px);
  font-size:clamp(16px,2vw,19px);color:color-mix(in srgb,var(--ink) 78%,transparent);
}
.lp-cta{margin-top:clamp(24px,4vh,38px)}
.lp-cta-note{margin-top:12px;font-size:14px;opacity:.6}
.lp-phone-col{display:flex;justify-content:center;pointer-events:none}
.lp-device{--w:min(300px,22vw)}

/* ---------- naslovi sekcija ---------- */
.lp-h2{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(30px,4.6vw,56px);line-height:1.04;letter-spacing:-.03em;
  margin-bottom:clamp(18px,3vh,28px);
}
.lp-h2-cream{color:var(--cream)}
.lp-p{max-width:56ch;font-size:clamp(15.5px,1.9vw,18px);color:color-mix(in srgb,var(--ink) 78%,transparent)}
.lp-p + .lp-p{margin-top:14px}
.lp-p-note{font-weight:600;color:var(--blue)}

/* ---------- pilule „za koga" (hero, ispod podnaslova) — statične, bez JS-a ---------- */
.lp-pills{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(16px,2.6vh,22px);padding:0;list-style:none;
}
.lp-pills li{
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);padding:6px 13px;border-radius:999px;
  border:1.5px solid color-mix(in srgb,var(--blue) 32%,transparent);
  white-space:nowrap;
}

/* ---------- Mladenov citat kao naslov proof sekcije ---------- */
.lp-quote{max-width:15ch}
.lp-quote-by{
  margin:-6px 0 clamp(14px,2.4vh,20px);
  font-size:14.5px;font-weight:600;color:var(--blue);opacity:.85;
}

/* ---------- iz prve ruke (Oridjidji) ---------- */
.lp-proof{padding:clamp(40px,7vh,80px) 0 clamp(70px,10vh,110px)}
.lp-proof-grid{
  display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(26px,4vw,70px);align-items:center;
}
.lp-proof-photo{margin:0;max-width:360px;justify-self:center}
.lp-proof-photo img{
  width:100%;height:auto;border-radius:var(--r);
  box-shadow:0 30px 70px -30px rgba(20,17,12,.45);
  transform:rotate(-1.6deg);
}
.lp-proof-photo figcaption{
  margin-top:14px;font-size:13.5px;opacity:.6;text-align:center;
}

/* mini chart rasta — ručno crtan SVG (kumulativna kriva članstva, stvarni podaci);
   ×4 krupan stat + linija koja se ISCRTA na doskrol (stroke-dashoffset trik uz
   pathLength="1"), pa gradijent/tačke/isprekidan rep ublede za njom */
.lp-chart{margin:26px 0;max-width:380px}
.lp-chart-stat{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.lp-chart-stat b{
  font-family:var(--disp);font-weight:800;font-size:clamp(40px,4vw,50px);
  line-height:1;color:var(--blue);letter-spacing:-.03em;
}
.lp-chart-stat span{font-size:13.5px;line-height:1.45;color:color-mix(in srgb,var(--ink) 68%,transparent)}
.lp-chart-svg{width:100%;height:auto;display:block;overflow:visible}
html.lp-anim .lp-chart .lp-line-main{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.3s var(--ease) .15s;
}
html.lp-anim .lp-chart.in .lp-line-main{stroke-dashoffset:0}
html.lp-anim .lp-chart .lp-area,
html.lp-anim .lp-chart .lp-line-dash,
html.lp-anim .lp-chart .lp-dot{opacity:0;transition:opacity .55s ease}
html.lp-anim .lp-chart .lp-dot-1{transition-delay:.45s}
html.lp-anim .lp-chart .lp-dot-2{transition-delay:.7s}
html.lp-anim .lp-chart .lp-dot-3{transition-delay:1s}
html.lp-anim .lp-chart .lp-dot-4,
html.lp-anim .lp-chart .lp-line-dash{transition-delay:1.3s}
html.lp-anim .lp-chart .lp-area{transition-delay:.9s}
html.lp-anim .lp-chart.in .lp-area,
html.lp-anim .lp-chart.in .lp-line-dash,
html.lp-anim .lp-chart.in .lp-dot{opacity:1}
.lp-chart-cap{margin-top:12px;font-size:13px;opacity:.6}

/* ---------- kako radi: 3 statične kartice ---------- */
.lp-kako{padding:clamp(60px,9vh,110px) 0}
.lp-steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);margin-top:clamp(24px,4vh,40px);
}
.lp-step{
  position:relative;background:#fff;border-radius:var(--r);
  padding:clamp(22px,2.6vw,34px);
  box-shadow:0 24px 60px -30px rgba(20,17,12,.25);
  display:flex;flex-direction:column;gap:13px;
}
.lp-step-num{
  position:absolute;top:14px;right:18px;
  font-family:var(--disp);font-weight:800;font-size:clamp(44px,4.6vw,66px);
  color:var(--cream-deep);line-height:1;
}
.lp-step h3{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em}
.lp-step p{color:color-mix(in srgb,var(--ink) 72%,transparent);font-size:clamp(14.5px,1.6vw,16.5px)}
.lp-step .hs-art{height:clamp(110px,12vw,160px)}

/* ---------- šta dobijaš: 4 kartice funkcija (statične, vizuali čist CSS) ---------- */
.lp-dobijas{padding:0 0 clamp(70px,10vh,110px)}
.lp-feats{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2vw,26px);margin-top:clamp(24px,4vh,40px);
}
.lp-feat{
  background:#fff;border-radius:var(--r);
  padding:clamp(22px,2.6vw,34px);
  box-shadow:0 24px 60px -30px rgba(20,17,12,.25);
  display:flex;flex-direction:column;gap:13px;
}
.lp-feat h3{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em}
.lp-feat p{color:color-mix(in srgb,var(--ink) 72%,transparent);font-size:clamp(14.5px,1.6vw,16.5px)}
.lp-feat-art{
  border-radius:16px;background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(120px,14vw,170px);padding:18px;overflow:hidden;
}
/* mini mapa gužve — vizuelni jezik app analitike, bez JS-a; --p = intenzitet ćelije */
.lp-heat{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:min(100%,270px)}
.lp-heat i{
  aspect-ratio:1;border-radius:4px;
  border:1px solid color-mix(in srgb,var(--blue) 16%,transparent);
  background:color-mix(in srgb,var(--blue) var(--p,0%),transparent);
}
.lp-heat i.pk{border-color:var(--blue);animation:lpPeak 2.4s ease infinite}
@keyframes lpPeak{
  0%,100%{box-shadow:0 0 0 1.5px var(--blue)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--blue) 35%,transparent)}
}
/* mini kupon */
.lp-coupon{
  background:#fff;border:2px dashed color-mix(in srgb,var(--blue) 55%,transparent);
  border-radius:14px;padding:14px 26px;text-align:center;
  transform:rotate(-2deg);box-shadow:0 14px 30px -18px rgba(30,59,184,.5);
}
.lp-coupon b{
  display:block;font-family:var(--disp);font-weight:800;font-size:13px;
  letter-spacing:.14em;color:var(--blue);
}
.lp-coupon span{display:block;margin-top:2px;font-weight:600;font-size:16.5px}
/* mini push notifikacija */
.lp-notif{
  background:#fff;border-radius:16px;padding:12px 16px;
  display:flex;align-items:center;gap:12px;width:min(100%,300px);
  box-shadow:0 14px 34px -18px rgba(20,17,12,.35);
}
.lp-notif-ico{
  flex:0 0 34px;height:34px;border-radius:9px;background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  color:var(--cream);font-family:var(--disp);font-weight:800;font-size:15px;
}
.lp-notif-body{font-size:13px;line-height:1.35;min-width:0}
.lp-notif-body b{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;opacity:.55;font-weight:700}
/* brend: boje lokala + teme kartice */
.lp-brand{display:flex;flex-direction:column;align-items:center;gap:14px}
.lp-brand-dots{display:flex;gap:10px}
.lp-brand-dots i{width:26px;height:26px;border-radius:50%;background:var(--c)}
.lp-brand-dots i.on{box-shadow:0 0 0 2.5px var(--cream),0 0 0 5px var(--c)}
.lp-brand-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:300px}
.lp-brand-pills i{
  font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--blue);border:1.5px solid color-mix(in srgb,var(--blue) 32%,transparent);
  border-radius:999px;padding:4px 10px;white-space:nowrap;
}
.lp-feat-note{
  margin-top:clamp(24px,3.6vh,34px);text-align:center;
  font-weight:600;color:var(--blue);font-size:clamp(15px,1.8vw,17.5px);
}

/* ---------- CTA red na dnu sekcije (dugme → #prijava, postojeći data-lp-nav skrol) ---------- */
.lp-sec-cta{display:flex;justify-content:center;margin-top:clamp(26px,4vh,40px)}
.lp-sec-cta-left{justify-content:flex-start}
.lp-feat-note + .lp-sec-cta{margin-top:16px}

/* ---------- a šta ako... (plava zona) ---------- */
.lp-obj{
  background:var(--blue);color:var(--cream);
  padding:clamp(70px,10vh,120px) 0;
  border-radius:clamp(24px,4vw,48px);
  margin:0 clamp(8px,1vw,16px);
}
.lp-obj-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.6vw,34px);margin-top:clamp(26px,4vh,44px);
}
.lp-obj-item{
  border:1.5px solid color-mix(in srgb,var(--cream) 35%,transparent);
  border-radius:calc(var(--r) - 4px);
  padding:clamp(20px,2.4vw,30px);
}
.lp-obj-item h3{
  font-family:var(--disp);font-weight:700;font-size:clamp(18px,2vw,23px);
  letter-spacing:-.015em;margin-bottom:8px;
}
.lp-obj-item p{font-size:clamp(14.5px,1.6vw,16.5px);opacity:.85}

/* ---------- prijava ---------- */
.lp-form{padding:clamp(80px,11vh,140px) 0}
/* .form-done iz site.css ima grid-column:2 — ovde ista pozicija (desna kolona) važi,
   ali booking dugme ide ISPOD forme u desnoj koloni */
.lp-bk-wrap{grid-column:2;text-align:center;margin-top:4px}
.lp-bk-wrap .bk-open-lead{margin-bottom:10px}

/* ---------- mini footer ---------- */
.lp-foot{
  background:var(--ink);color:var(--cream);
  padding:clamp(36px,6vh,60px) var(--pad);
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
}
.lp-foot-logo{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em}
.lp-foot-links{display:flex;gap:22px;font-size:14.5px}
.lp-foot-links a{opacity:.8;text-decoration:underline;text-underline-offset:4px;transition:opacity .25s}
.lp-foot-links a:hover{opacity:1}
.lp-foot-c{font-size:12.5px;opacity:.4}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  /* telefon ispod teksta, kao homepage hero na uskim ekranima */
  .lp-hero{min-height:0}
  .lp-hero-grid{grid-template-columns:1fr}
  .lp-phone-col{margin-top:10px}
  .lp-device{--w:250px}
  /* mala skala fiksnog 276×596 dizajna + island u stvarnim px → spusti header
     kartice da se „Marko" ne zalepi uz kameru (obrazac .hero-device iz site.css) */
  .lp-device .ph-header{padding-top:48px}
  .lp-proof-grid{grid-template-columns:1fr;gap:30px}
  .lp-proof-photo{max-width:300px}
}
@media(max-width:880px){
  .lp-steps{grid-template-columns:1fr}
  .lp-feats{grid-template-columns:1fr}
  .lp-obj-grid{grid-template-columns:1fr}
  /* probaj-grid pada u jednu kolonu (site.css) — booking i done prate */
  .lp-bk-wrap{grid-column:1}
  .lp-done{grid-column:1}
}
@media(max-width:560px){
  .lp-h1{font-size:clamp(34px,10.4vw,52px)}
  .lp-cta .btn{width:100%}
  .lp-sec-cta .btn{width:100%}
  .lp-device{--w:220px}
  .lp-device .island{width:70px;height:19px;top:16px}
  .lp-device .ph-header{padding-top:54px}
  .lp-device .b-pwr{top:110px;height:46px}
  .lp-device .b-sil{top:88px;height:19px}
  .lp-device .b-vu{top:118px;height:32px}
  .lp-device .b-vd{top:156px;height:32px}
  .lp-obj{margin:0;border-radius:clamp(20px,4vw,32px) clamp(20px,4vw,32px) 0 0}
}

/* ---------- reduced motion: sve vidljivo i statično ---------- */
@media(prefers-reduced-motion:reduce){
  html.lp-anim .lrev{opacity:1;transform:none;transition:none}
  .lp-heat i.pk{animation:none;box-shadow:0 0 0 1.5px var(--blue)}
}