/* Naslovnica = scroll prica (tamno) + editor (svijetlo) na istoj stranici.
   Oba stylesheeta su u slojevima da se ne tuku; sloj "story" pobjeduje sloj
   "editor" jer prica ima vlastite, specificnije selektore. Sve sto mora
   vrijediti globalno pise nesloj i zato pobjeduje oboje. */
@layer editor, story;
@import url('/editor/editor.css?v=34f4f93a') layer(editor);
@import url('/scroll.css?v=11545aab') layer(story);

body { background: #f7f8f4; color: #183e39; }

/* Zaglavlje je iste tamne boje kao zadnji kadar filma, pa se prijelaz iz price
   u ponudu ne vidi kao rez. Ispod njega gradijent polako izlazi na svijetlo. */
header {
  position: sticky; top: 0; z-index: 20;
  background: #061b25;
  color: #eef6ee;
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
}
header .brand { color: #fff; }
header .header-note { color: rgba(238,246,238,.58); }
header .quiet { color: rgba(238,246,238,.82); border-radius: 999px; }
header .quiet:hover { color: #fff; background: rgba(255,255,255,.09); }
header a.quiet { text-decoration: none; }

/* izron: more se rastapa u papir umjesto da bijelo udari odjednom */
.story-outro {
  height: clamp(180px, 34vh, 340px);
  background: linear-gradient(180deg, #061b25 0%, #0a2b33 26%, #3d5b57 58%, #cdd8cd 84%, #f7f8f4 100%);
}

/* ---------- ponuda izmedu price i editora ---------- */
.offer { padding: clamp(46px, 7vw, 86px) 4% clamp(30px, 4vw, 54px); background: #fff; border-bottom: 1px solid #dce4dc; }
.offer-head { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.offer-head .eyebrow { margin-bottom: 12px; }
.offer-head h2 { font: 700 clamp(28px, 4.2vw, 42px)/1.12 Manrope, sans-serif; letter-spacing: -1.4px; margin: 0 0 14px; }
.offer-head p { margin: 0; color: #64756b; font-size: 15px; line-height: 1.7; }
.offer-grid { display: grid; gap: 18px; max-width: 1180px; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.offer-card { display: flex; flex-direction: column; padding: 26px 24px; background: #fbfcf9; border: 1px solid #dce4dc; border-radius: 16px; }
.offer-card h3 { font: 700 17px/1.3 Manrope, sans-serif; margin: 0 0 8px; }
.offer-card .amount { font: 800 clamp(30px, 3.4vw, 38px)/1 Manrope, sans-serif; letter-spacing: -1.6px; margin: 6px 0 4px; }
.offer-card .amount small { font: 600 13px/1 'DM Sans', sans-serif; letter-spacing: 0; color: #73847c; }
.offer-card p { margin: 10px 0 0; color: #64756b; font-size: 13.5px; line-height: 1.65; }
.offer-card ul { margin: 12px 0 0; padding: 0 0 0 18px; color: #64756b; font-size: 13.5px; line-height: 1.75; }
.offer-card .go { margin-top: auto; padding-top: 18px; font-size: 13px; font-weight: 700; color: #1d6b5f; text-decoration: none; }
.offer-card .go:hover { text-decoration: underline; }
.offer-card--api { background: #123b39; border-color: #123b39; color: #eef6ee; }
.offer-card--api h3, .offer-card--api .amount { color: #fff; }
.offer-card--api p, .offer-card--api ul, .offer-card--api .amount small { color: rgba(238, 246, 238, .74); }
.offer-card--api .go { color: #d4ef7f; }
.offer-card--api .amount { font-size: clamp(22px, 2.4vw, 27px); letter-spacing: -0.8px; }
.offer-note { max-width: 1180px; margin: 22px auto 0; color: #73847c; font-size: 12.5px; line-height: 1.7; text-align: center; }

/* ---------- podnozje ---------- */
.site-foot { padding: 30px 4% 40px; background: #fff; border-top: 1px solid #dce4dc; color: #73847c; font-size: 13px; }
.site-foot div { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: center; max-width: 1180px; margin: 0 auto; }
.site-foot a { color: inherit; }

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  .preview { min-height: 60vh; }
}

/* sidro ne smije zavrsiti ispod ljepljivog zaglavlja */
#ponuda, #izradi { scroll-margin-top: 90px; }

@media (max-width: 620px) {
  header { height: auto; min-height: 60px; padding: 8px 4%; gap: 10px; }
  .story-outro { height: clamp(150px, 26vh, 240px); }
  header .brand { font-size: 20px; }
  header .quiet { padding: 8px 4px; font-size: 12px; white-space: nowrap; }
  .header-note { display: none; }
  #ponuda, #izradi { scroll-margin-top: 70px; }
}