/* =============================================================
   Landing „Digitalno Selce" — prezentacijska stranica za klijenta.
   Nije u okviru mobitela: čita se i na mobitelu i na projektoru.
   ============================================================= */

body.lp-body{background:var(--paper)}
.lp-wrap{width:100%;max-width:1000px;margin:0 auto;padding:0 22px}

/* ── Zaglavlje ────────────────────────────────────────────── */
.lp-hero{position:relative;overflow:hidden;background:var(--turq);color:#fff;
  padding:38px 0 42px;margin-bottom:34px}
.lp-hero::after{content:"";position:absolute;right:-70px;top:-96px;width:280px;height:280px;
  border:42px solid rgba(255,255,255,.1);border-radius:50%}
.lp-hero .lp-wrap{position:relative}
.lp-hero__t{margin:0;font:800 clamp(34px,7vw,52px)/1.05 var(--sans);color:#fff;letter-spacing:-.5px}
.lp-hero__p{margin:10px 0 0;font:600 clamp(16px,3.2vw,20px)/1.35 var(--sans);color:rgba(255,255,255,.95)}
.lp-hero__u{margin:18px 0 0;max-width:52ch;font:400 clamp(15px,2.8vw,17px)/1.6 var(--sans);
  color:rgba(255,255,255,.88)}

.lp-lang{display:flex;gap:2px;width:max-content;margin:0 0 20px auto;
  background:rgba(255,255,255,.18);border-radius:14px;padding:3px}
.lp-lang a{min-width:42px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:11px;font:800 12px var(--sans);color:rgba(255,255,255,.85);text-decoration:none}
.lp-lang a.is-on{background:#fff;color:var(--turq)}

/* ── Naslovi sekcija ──────────────────────────────────────── */
.lp-sec{margin:0 0 20px}
.lp-sec--adv{margin-top:52px}
.lp-sec__t{margin:0;font:800 clamp(21px,4vw,27px)/1.2 var(--sans);color:var(--navy)}
.lp-sec__p{margin:7px 0 0;font:400 15px/1.55 var(--sans);color:var(--muted);max-width:56ch}

/* ── Kartice primjera ─────────────────────────────────────── */
.lp-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:700px){.lp-grid{grid-template-columns:1fr 1fr}}

.lp-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(15,48,87,.05);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.lp-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,48,87,.13);
  border-color:var(--turq-line)}
.lp-card:active{transform:translateY(0)}

.lp-card__thumb{display:block;height:178px;background:var(--cream) center/contain no-repeat;
  border-bottom:1px solid var(--line)}
.lp-card__thumb--ikona{display:flex;align-items:center;justify-content:center;color:var(--navy)}
.lp-card__thumb--ikona svg{width:84px;height:84px}

.lp-card__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 18px;gap:0}
.lp-card__head{display:flex;align-items:baseline;gap:10px}
.lp-card__n{font:800 15px var(--sans);color:var(--turq);font-variant-numeric:tabular-nums}
.lp-card__label{font:800 10.5px var(--sans);letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted)}
.lp-card__title{display:block;margin-top:9px;font:800 24px/1.15 var(--sans);color:var(--navy);
  text-wrap:balance}
.lp-card__desc{display:block;margin-top:9px;font:400 15px/1.55 var(--sans);color:var(--text)}
.lp-card__foot{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:2px}
.lp-card__min{font:600 12.5px var(--sans);color:var(--muted2)}

.lp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 22px;border-radius:24px;background:var(--turq);color:#fff;
  font:800 15px var(--sans)}
.lp-card:hover .lp-btn{background:#0b7d8f}
.lp-btn--tanki{min-height:44px;padding:0 18px;background:none;color:var(--navy);
  border:1.5px solid var(--line);font-size:14px}

/* ── Napredna iskustva ────────────────────────────────────── */
.adv-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:560px){.adv-grid{grid-template-columns:1fr 1fr}}
@media (min-width:860px){.adv-grid{grid-template-columns:1fr 1fr 1fr}}

.adv-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;
  text-decoration:none;color:inherit}
a.adv-card{transition:border-color .16s ease,transform .16s ease}
a.adv-card:hover{border-color:var(--turq-line);transform:translateY(-2px)}
.adv-card__thumb{width:100%;height:96px;border-radius:12px;background:var(--cream);
  border:1px dashed #ddd5c4;display:flex;align-items:center;justify-content:center;
  color:var(--navy);opacity:.9}
.adv-card__thumb svg{width:44px;height:44px}
.adv-card__title{margin-top:14px;font:800 17px/1.2 var(--sans);color:var(--navy)}
.adv-card__desc{margin-top:7px;font:400 14px/1.5 var(--sans);color:var(--muted);flex:1}
.adv-card__uskoro{margin-top:14px;font:700 11px var(--sans);letter-spacing:1.2px;
  text-transform:uppercase;color:var(--turq);background:var(--turq-tint);
  border:1px solid var(--turq-line);border-radius:11px;padding:6px 11px}
.adv-card .lp-btn--tanki{margin-top:14px}

.lp-noga{padding:44px 0 40px;text-align:center;font:500 17px var(--hand);color:var(--muted2)}

@media (prefers-reduced-motion:reduce){.lp-card,.adv-card{transition:none}}

/* =============================================================
   Kategorije ponude

   Naslovnica prati podjelu iz ponude: svaka kategorija ima svoj
   naslov i rečenicu koja kaže što ta razina obuhvaća, pa tek onda
   primjere. Bez toga su kartice samo niz demoa, a klijent mora sam
   pogađati što je što.
   ============================================================= */
.lp-kat{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.lp-kat:first-child{margin-top:0;padding-top:0;border-top:none}
.lp-kat__uvod{max-width:56ch;margin:0 0 20px}
.lp-kat__oznaka{display:inline-block;font:800 10.5px var(--sans);letter-spacing:1.6px;
  text-transform:uppercase;color:var(--turq);background:var(--turq-tint);
  border:1px solid var(--turq-line);border-radius:11px;padding:5px 11px}
.lp-kat__oznaka + .lp-kat__t{margin-top:12px}
.lp-kat__t{margin:0;font:800 clamp(23px,4.4vw,30px)/1.18 var(--sans);color:var(--navy);
  text-wrap:balance}
.lp-kat__p{margin:9px 0 0;font:400 15.5px/1.6 var(--sans);color:var(--text)}

/* Napomena da se primjeri otvaraju na mobitelu stoji uz uvod,
   a ne iznad svake kategorije. */
.lp-hero__n{margin:14px 0 0;font:500 14px/1.5 var(--sans);color:rgba(255,255,255,.78)}

/* Kako se mini escape prilagođava drugoj lokaciji */
.lp-prilagodba{margin-top:26px;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:22px 22px 18px}
.lp-prilagodba__t{margin:0;font:800 19px/1.3 var(--sans);color:var(--navy);text-wrap:balance}
.lp-prilagodba__p{margin:9px 0 0;font:400 14.5px/1.6 var(--sans);color:var(--text2);max-width:64ch}
.lp-prilagodba__lista{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:760px){.lp-prilagodba__lista{grid-template-columns:1fr 1fr 1fr}}
.lp-prilagodba__lista li{background:var(--cream);border-radius:14px;padding:13px 15px;
  display:flex;flex-direction:column;gap:5px}
.lp-prilagodba__lista b{font:800 10.5px var(--sans);letter-spacing:1.4px;text-transform:uppercase;
  color:var(--turq)}
.lp-prilagodba__lista span{font:500 14px/1.5 var(--sans);color:var(--text)}