/* ============================================================
   NAPOKON VIDLJIV IZAZOV
   Dizajn: kinematografski, topao, izravan.
   Boje: tinta-mornarsko + šafran + krem.
   Pismo: Fraunces (naslovi) + Hanken Grotesk (tekst).
   ============================================================ */

:root{
  --ink:#0f1d36;          /* najdublja mornarska */
  --navy:#16264a;         /* tamna sekcija */
  --navy-2:#1c3664;       /* Shjor mornarska */
  --line:#2a3e68;
  --sun:#f0a62e;          /* šafran, potpis */
  --sun-soft:#f6c66b;
  --cream:#f5efe3;        /* topli papir */
  --cream-2:#efe7d6;
  --ink-soft:#3a4a6a;
  --text-dark:#14233f;
  --text-mut-d:#5d6b86;   /* na krem */
  --text-mut-l:#9fa9c0;   /* na tamnom */
  --red:#e2553d;          /* REC točka */
  --r:16px;
  --maxw:1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- tipografija ---------- */
.big{
  font-family:"Fraunces",serif;
  font-weight:900;
  font-size:clamp(2rem,5.2vw,3.6rem);
  line-height:1.04;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
.huge{
  font-family:"Fraunces",serif;
  font-weight:900;
  font-size:clamp(2.4rem,7vw,5rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 .4em;
}
.kicker{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.74rem;
  color:var(--sun);
  margin:0 0 1rem;
}
.kicker.dark-k{ color:var(--navy-2); }
.lead{ font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--text-mut-l); max-width:46ch; }
.center .lead, .center.lead{ margin-left:auto; margin-right:auto; }
.muted{ color:var(--text-mut-l); }
.accent{ color:var(--sun); font-style:italic; }
.dark-t{ color:var(--text-dark); }
.dark-l{ color:var(--text-mut-d); }

/* ---------- raspored ---------- */
.section{ padding:clamp(64px,9vw,120px) 22px; position:relative; }
.section.slim{ padding:clamp(52px,7vw,84px) 22px; }
.section.dark{ background:var(--navy); }
.section.ink{ background:var(--ink); }
.section.cream{ background:var(--cream); color:var(--text-dark); }
.section.sun-band{ background:var(--sun); color:var(--ink); }
.wrap{ max-width:var(--maxw); margin:0 auto; }
.wrap.narrow{ max-width:760px; }
.center{ text-align:center; }
.section-head{ margin-bottom:clamp(34px,5vw,56px); }
.section-head.center{ text-align:center; }

/* ---------- gumbi ---------- */
.btn{
  display:inline-block;
  font-weight:800;
  font-size:1rem;
  padding:15px 26px;
  border-radius:999px;
  border:2px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer;
}
.btn.big{ padding:18px 34px; font-size:1.08rem; }
.btn-sun{ background:var(--sun); color:#1a1206; box-shadow:0 10px 0 -2px rgba(0,0,0,.18); }
.btn-sun:hover{ transform:translateY(-2px); box-shadow:0 14px 24px rgba(240,166,46,.4); }
.btn-ghost{ border-color:currentColor; color:inherit; background:transparent; }
.btn-ghost:hover{ transform:translateY(-2px); background:rgba(255,255,255,.08); }
.cream .btn-ghost:hover{ background:rgba(0,0,0,.05); }

/* ---------- ODBROJAVANJE (top bar) ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:var(--ink);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(4px);
}
.topbar-in{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:9px 22px; font-size:.82rem;
}
.topbar-label{ color:var(--text-mut-l); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.cdmini{ font-family:"Fraunces",serif; font-weight:900; letter-spacing:.02em; }
.cdmini b{ color:var(--sun); }
.topbar-sep{ color:var(--text-mut-l); margin-left:auto; }
.topbar-cta{
  background:var(--sun); color:#1a1206; font-weight:800;
  padding:7px 16px; border-radius:999px; font-size:.82rem;
}
.topbar-cta:hover{ filter:brightness(1.05); }

/* ---------- HERO ---------- */
.hero{ position:relative; background:
   radial-gradient(120% 90% at 80% -10%, rgba(28,54,100,.65), transparent 55%),
   var(--ink);
   padding:0 22px; overflow:hidden; }
.bars{ height:26px; background:#070d1a; }
.bars-top{ position:relative; }
.bars-bottom{ }
.hero-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
  padding:clamp(40px,6vw,72px) 0;
}
.scene{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:.72rem;
  color:var(--cream); margin-bottom:18px;
}
.scene::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 0 rgba(226,85,61,.6); animation:rec 1.6s infinite;
}
@keyframes rec{ 0%{box-shadow:0 0 0 0 rgba(226,85,61,.55)} 70%{box-shadow:0 0 0 8px rgba(226,85,61,0)} 100%{box-shadow:0 0 0 0 rgba(226,85,61,0)} }
.eyebrow{
  font-weight:800; text-transform:uppercase; letter-spacing:.13em;
  font-size:.72rem; color:var(--sun); margin:0 0 16px;
}
.hero-title{ font-family:"Fraunces",serif; font-weight:900; margin:0 0 20px;
  font-size:clamp(2.6rem,6.4vw,4.6rem); line-height:1; letter-spacing:-.02em; }
.hero-title .line{ display:block; }
.hero-title .accent{ font-style:italic; color:var(--sun); }
.hero-sub{ font-size:clamp(1.05rem,2.2vw,1.22rem); color:#d6ddec; max-width:48ch; margin:0 0 26px; }
.hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.hero-note{ font-size:.95rem; color:var(--text-mut-l); max-width:46ch; }

.hero-photo{ display:flex; justify-content:center; }
.frame{
  position:relative; border:3px solid var(--sun); border-radius:6px;
  padding:8px; background:#0b1528; max-width:380px;
  box-shadow:0 30px 70px rgba(0,0,0,.5); transform:rotate(-1.5deg);
}
.frame img{ border-radius:3px; }
.frame::before, .frame::after{ /* sprocket vibe */
  content:""; position:absolute; left:0; right:0; height:0;
}
.frame-tag{
  position:absolute; bottom:-13px; left:14px;
  background:var(--ink); color:var(--sun); font-weight:800;
  font-size:.66rem; letter-spacing:.14em; padding:5px 10px; border-radius:5px;
  border:1px solid var(--line);
}
.frame-sm{ transform:rotate(1.4deg); max-width:340px; }

/* ---------- MARQUEE ---------- */
.marquee{ background:var(--sun); color:var(--ink); overflow:hidden; padding:14px 0; }
.marquee-track{
  display:inline-flex; align-items:center; gap:24px; white-space:nowrap;
  font-family:"Fraunces",serif; font-weight:900; font-size:1.35rem; font-style:italic;
  animation:scroll 26s linear infinite;
}
.marquee .dot{ font-style:normal; font-size:.7rem; opacity:.6; }
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- tri stavke ---------- */
.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:42px; text-align:left; }
.three-item{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--r); padding:24px; }
.three-item .num{ font-family:"Fraunces",serif; font-weight:900; font-size:1.6rem; color:var(--sun); display:block; margin-bottom:10px; }
.three-item p{ margin:0; color:#d6ddec; }

/* ---------- PONUDA ---------- */
.offer{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.offer-card{
  background:#fff; color:var(--text-dark); border-radius:var(--r);
  padding:28px; border:1px solid var(--cream-2);
  box-shadow:0 18px 40px rgba(20,35,63,.08); display:flex; flex-direction:column;
}
.offer-card.wide{ grid-column:1 / -1; background:var(--ink); color:var(--cream); border-color:var(--line); }
.offer-day{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.offer-day span{ font-family:"Fraunces",serif; font-weight:900; font-size:1.05rem; color:var(--navy-2); }
.offer-card.wide .offer-day span{ color:var(--sun); }
.offer-day em{ font-style:normal; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-mut-d); }
.offer-card.wide .offer-day em{ color:var(--text-mut-l); }
.offer-card h3{ font-family:"Fraunces",serif; font-weight:900; font-size:1.5rem; margin:0 0 10px; line-height:1.1; }
.offer-lead{ margin:0 0 16px; color:var(--text-mut-d); }
.offer-card.wide .offer-lead{ color:#d6ddec; font-size:1.08rem; }
.ticks{ list-style:none; padding:0; margin:0 0 18px; }
.ticks li{ position:relative; padding-left:26px; margin-bottom:9px; font-size:.98rem; }
.ticks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--sun); font-weight:900; }
.offer-foot{ margin:auto 0 0; font-size:.84rem; color:var(--text-mut-d); padding-top:14px; border-top:1px dashed var(--cream-2); }
.offer-card.wide .offer-foot{ color:var(--sun-soft); border-color:var(--line); }
.offer-two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:16px; }
.offer-two > div{ background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:12px; padding:18px; }
.mini-k{ font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; color:var(--sun); margin:0 0 6px; }
.offer-two p:last-child{ margin:0; color:#d6ddec; }

/* ---------- BONUSI ---------- */
.bonus-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.bonus{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--r); padding:24px; }
.bonus.hi{ border-color:var(--sun); background:rgba(240,166,46,.08); }
.bonus h4{ font-family:"Fraunces",serif; font-weight:900; font-size:1.15rem; margin:0 0 8px; }
.bonus p{ margin:0 0 14px; font-size:.95rem; color:var(--text-mut-l); }
.price-flip{ display:flex; align-items:center; gap:12px; margin:0 !important; }
.price-flip .was{ text-decoration:line-through; color:var(--text-mut-l); font-weight:600; }
.price-flip .now{ font-family:"Fraunces",serif; font-weight:900; color:var(--sun); letter-spacing:.04em; }
.bonus-total{ text-align:center; margin-top:34px; font-size:1.1rem; color:var(--text-mut-l); }
.bonus-total s{ color:var(--text-mut-l); }
.bonus-total strong{ color:var(--sun); font-family:"Fraunces",serif; }

/* ---------- ŠTO ODNOSIŠ ---------- */
.walk{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.walk-item{ background:#fff; border:1px solid var(--cream-2); border-radius:var(--r); padding:26px; box-shadow:0 14px 30px rgba(20,35,63,.06); }
.wnum{ font-family:"Fraunces",serif; font-weight:900; font-size:1.5rem; color:var(--sun); }
.walk-item h4{ font-family:"Fraunces",serif; font-weight:900; font-size:1.2rem; margin:6px 0 8px; color:var(--text-dark); }
.walk-item p{ margin:0; color:var(--text-mut-d); font-size:.98rem; }

/* ---------- MATEMATIKA / CIJENA ---------- */
.stack{ max-width:560px; margin:34px auto 36px; }
.stack-row{ display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line); }
.stack-row span{ color:#d6ddec; }
.stack-row b{ font-family:"Fraunces",serif; font-weight:600; color:var(--cream); white-space:nowrap; }
.stack-row.total{ border-bottom:0; padding-top:18px; }
.stack-row.total span{ font-weight:800; color:#fff; }
.stack-row.total b{ font-weight:900; font-size:1.3rem; }
.stack-row.total s{ color:var(--text-mut-l); }

.pricebox{
  background:linear-gradient(180deg, rgba(240,166,46,.14), rgba(240,166,46,.04));
  border:1px solid var(--sun); border-radius:24px; padding:36px 28px; text-align:center;
  max-width:560px; margin:0 auto;
}
.pb-eyebrow{ font-weight:800; text-transform:uppercase; letter-spacing:.13em; font-size:.74rem; color:var(--sun); margin:0 0 14px; }
.pb-main{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:24px; }
.pb-big{ font-family:"Fraunces",serif; font-weight:900; font-size:clamp(3rem,9vw,4.4rem); line-height:1; color:#fff; }
.pb-old{ color:var(--text-mut-l); text-decoration:line-through; font-size:1rem; }
.pb-cta{ display:flex; flex-direction:column; gap:12px; max-width:380px; margin:0 auto; }
.pb-foot{ margin-top:18px; font-size:.85rem; color:var(--text-mut-l); }

/* ---------- TIMELINE ---------- */
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tl{ background:#fff; border:1px solid var(--cream-2); border-radius:var(--r); padding:22px; }
.tl.hot{ background:var(--ink); color:var(--cream); border-color:var(--navy-2); }
.tl-day{ font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; color:var(--navy-2); }
.tl.hot .tl-day{ color:var(--sun); }
.tl h4{ font-family:"Fraunces",serif; font-weight:900; font-size:1.12rem; margin:8px 0 6px; color:var(--text-dark); }
.tl.hot h4{ color:var(--cream); }
.tl p{ margin:0; font-size:.9rem; color:var(--text-mut-d); }
.tl.hot p{ color:var(--text-mut-l); }

/* ---------- O MENI ---------- */
.about-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:center; }
.about-photo{ display:flex; justify-content:center; }
.about-text .about-body p{ color:#d6ddec; margin:0 0 1em; }
.stats{ display:flex; gap:28px; flex-wrap:wrap; margin-top:24px; }
.stats > div{ display:flex; flex-direction:column; }
.stats b{ font-family:"Fraunces",serif; font-weight:900; font-size:2rem; color:var(--sun); line-height:1; }
.stats span{ font-size:.82rem; color:var(--text-mut-l); margin-top:4px; max-width:14ch; }

/* ---------- JAMSTVO ---------- */
.sun-band .seal{
  display:inline-block; background:var(--ink); color:var(--sun);
  font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem;
  padding:8px 16px; border-radius:999px; margin-bottom:18px;
}
.sun-band .big{ max-width:18ch; margin-left:auto; margin-right:auto; }
.sun-band .lead{ color:#3a2c12; max-width:54ch; }

/* ---------- ZA KOGA ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.forwho{ border-radius:var(--r); padding:30px; }
.forwho h3{ font-family:"Fraunces",serif; font-weight:900; font-size:1.4rem; margin:0 0 16px; }
.forwho ul{ list-style:none; padding:0; margin:0; }
.forwho li{ position:relative; padding-left:30px; margin-bottom:11px; color:var(--text-dark); }
.forwho.yes{ background:#fff; border:1px solid var(--cream-2); }
.forwho.no{ background:#efe7d6; border:1px solid #e3d7bf; }
.forwho.yes li::before{ content:"✓"; position:absolute; left:0; color:#2e9e63; font-weight:900; }
.forwho.no li::before{ content:"✕"; position:absolute; left:0; color:#c0654a; font-weight:900; }

/* ---------- FAQ ---------- */
.faq details{ border-bottom:1px solid var(--line); padding:6px 0; }
.faq summary{
  cursor:pointer; list-style:none; padding:16px 36px 16px 0; position:relative;
  font-weight:700; font-size:1.08rem; color:var(--cream);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:6px; top:14px; font-size:1.5rem; color:var(--sun); transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:0 0 18px; color:var(--text-mut-l); max-width:60ch; }

/* ---------- FOOTER ---------- */
.foot{ background:#070d1a; text-align:center; padding:40px 22px; }
.foot p{ margin:4px 0; color:var(--text-mut-l); font-size:.9rem; }
.foot-sm{ font-size:.8rem !important; opacity:.7; }

/* ---------- ANIMACIJE PRI SCROLLU ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- RESPONZIVNO ---------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; text-align:center; }
  .hero-cta-row{ justify-content:center; }
  .hero-sub, .hero-note{ margin-left:auto; margin-right:auto; }
  .hero-photo{ order:-1; }
  .three, .offer, .bonus-grid, .walk, .timeline{ grid-template-columns:1fr 1fr; }
  .about-grid{ grid-template-columns:1fr; gap:30px; }
  .two-col{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:17px; }
  .three, .offer, .bonus-grid, .walk, .timeline, .offer-two{ grid-template-columns:1fr; }
  .topbar-sep{ display:none; }
  .topbar-cta{ margin-left:auto; }
  .frame{ transform:none; }
  .frame-sm{ transform:none; }
  .stats{ gap:20px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* fokus za tipkovnicu */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--sun); outline-offset:3px; border-radius:6px;
}