:root{
  /* surfaces */
  --cream:      #F5F6F9;   /* page background / light sections */
  --cream-2:    #ECEEF3;   /* subtle band, card insets */
  --card:       #FFFFFF;
  --ink:        #0A0F3D;   /* dark sections, footer, topbar — HR flag blue (Pantone 072 C), darkened */
  --ink-2:      #121A4E;   /* dark card surface */

  /* text */
  --text:       #0A0F3D;
  --muted:      #5B6172;
  --text-inv:   #F5F6F9;
  --muted-inv:  rgba(245,246,249,0.72);

  /* accent */
  --red:        #E1000F;   /* primary accent, CTAs — HR flag red (Pantone 485 C) */
  --red-soft:   #FF4438;   /* hover / highlights on dark */
  --sky:        #0093DD;   /* secondary accent — HR coat-of-arms cyan, sparing use */

  /* lines & depth */
  --line:       rgba(10,15,61,0.10);
  --line-inv:   rgba(245,246,249,0.14);
  --shadow-sm:  0 2px 8px rgba(10,15,61,0.08);
  --shadow:     0 12px 32px rgba(10,15,61,0.14);
  --shadow-lg:  0 24px 60px rgba(10,15,61,0.22);

  /* geometry */
  --r-card:     20px;
  --r-pill:     999px;
  --wrap:       min(1140px, 92vw);

  /* spacing scale (8px base) */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px;

  /* placeholders */
  --ph: linear-gradient(140deg, #0A0F3D 0%, #121A4E 45%, #1E2E7A 100%);
  --ph-warm: linear-gradient(140deg, #F5F6F9 0%, #F0DAD9 55%, #E1000F 140%);
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
*,*::before,*::after{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- base typography ---------- */
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  color:var(--text);
  background:var(--cream);
}
h1,h2,h3{
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.12;
}
h1{ font-size:clamp(34px, 6vw, 60px); }
h2{ font-size:clamp(26px, 4vw, 40px); }
h3{ font-size:20px; }

@media (max-width:640px){
  body{ font-size:16px; }
}

.eyebrow{
  font-family:Inter, sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
}

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* ---------- layout ---------- */
.wrap{ width:var(--wrap); margin:0 auto; }

.section{ padding: var(--s7) 0; }
.section.dark{ background:var(--ink); color:var(--text-inv); }
.section.dark .eyebrow{ color:var(--red-soft); }

@media (max-width:900px){
  .section{ padding: var(--s6) 0; }
}
@media (max-width:640px){
  .section{ padding: var(--s5) 0; }
}

.section-head{ max-width:62ch; margin-bottom:var(--s5); }
.section-head .eyebrow{ display:block; margin-bottom:var(--s1); }
.section-head h2{ margin-bottom:var(--s2); }
.section-head p{ color:var(--muted); }
.section.dark .section-head p{ color:var(--muted-inv); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--r-pill);
  font-family:Inter, sans-serif;
  font-weight:600;
  font-size:15px;
  padding:14px 26px;
  transition:transform 220ms ease, box-shadow 220ms ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--red); color:var(--text-inv); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ box-shadow:var(--shadow); }
.btn-ghost{ background:transparent; border:1px solid currentColor; }

/* ---------- cards ---------- */
.card, .feature-card, .menu-card, .contact-tile{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.card:hover, .feature-card:hover, .menu-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.section.dark .feature-card,
.section.dark .contact-tile{
  background:var(--ink-2);
  border-color:var(--line-inv);
}

/* ---------- motion ---------- */
[data-animate]{ opacity:0; transform:translateY(14px); }
.in-view{
  opacity:1;
  transform:none;
  transition:opacity 600ms ease, transform 600ms ease, transition-delay 0ms;
  transition-delay:var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-animate]{ opacity:1; transform:none; }
  *{ transition:none !important; }
}

/* ---------- header / nav ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,15,61,0.92);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  border-bottom:1px solid var(--line-inv);
}
.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}

.logo{ display:flex; align-items:center; gap:12px; }
.logo-badge{
  width:40px; height:40px;
  border-radius:50%;
  flex-shrink:0;
  object-fit:contain;
}
.logo-text{ display:flex; flex-direction:column; }
.logo-main{
  font-family:Fraunces, serif;
  font-weight:700;
  font-size:18px;
  color:var(--text-inv);
}
.logo-main em{ font-style:normal; color:var(--red-soft); }
.logo-sub{
  font-family:Inter, sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-inv);
}

.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  z-index:60;
}
.hamburger span{
  display:block;
  width:24px;
  height:2px;
  background:var(--text-inv);
  transition:transform 220ms ease, opacity 220ms ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav{
  display:flex;
  align-items:center;
  gap:var(--s4);
}
.nav a{
  font-weight:500;
  font-size:15px;
  color:var(--text-inv);
  transition:color 160ms ease;
}
.nav a:hover{ color:var(--red-soft); }
.nav-call{ font-size:14px; padding:10px 20px; }

@media (max-width:900px){
  .hamburger{ display:flex; }
  .nav{
    position:absolute;
    top:76px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--ink);
    border-bottom:1px solid var(--line-inv);
    padding:var(--s2) var(--s3) var(--s4);
    box-shadow:var(--shadow-lg);
  }
  .nav[aria-hidden="true"]{ display:none; }
  .nav a{
    padding:14px 0;
    border-bottom:1px solid var(--line-inv);
    font-size:17px;
  }
  .nav a:last-child{ border-bottom:0; }
  .nav-call{
    margin-top:var(--s2);
    justify-content:center;
  }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:82vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background: url("images/hero.jpg") center/cover no-repeat, var(--ph);
}
.hero-shade{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(11,18,15,.88), rgba(11,18,15,.55) 45%, rgba(11,18,15,.35));
}
.hero-content{
  position:relative;
  z-index:1;
  color:var(--text-inv);
  padding-bottom:var(--s7);
  max-width:760px;
}
.hero-content .eyebrow{ display:block; margin-bottom:var(--s2); color:var(--red-soft); }
.hero-content h1{ color:var(--text-inv); margin-bottom:var(--s3); }
.hero-lead{
  font-size:18px;
  color:var(--muted-inv);
  max-width:56ch;
  margin-bottom:var(--s4);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.hero-actions .btn-ghost{ color:var(--text-inv); }

@media (max-width:640px){
  .hero{ min-height:70vh; }
}

/* ---------- #bar ---------- */
.bar-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--s5);
  align-items:start;
}
.bar-copy{ font-size:18px; color:var(--text); }

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s3);
}
.feature-card{ padding:var(--s3); }
.feature-emoji{ font-size:28px; display:block; margin-bottom:var(--s2); }
.feature-card h3{ margin-bottom:6px; }
.feature-card p{ color:var(--muted); font-size:15px; }

@media (max-width:900px){
  .bar-grid{ grid-template-columns:1fr; }
}

/* ---------- #proslave ---------- */
.proslave-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--s5);
  align-items:center;
}
.proslave-text p{ color:var(--muted-inv); margin-bottom:var(--s3); font-size:18px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--s3); }
.chip{
  font-family:Inter, sans-serif;
  font-weight:600;
  font-size:13px;
  background:var(--ink-2);
  border:1px solid var(--line-inv);
  border-radius:var(--r-pill);
  padding:8px 16px;
}
.muted-line{ color:var(--muted-inv); font-size:14px; margin-top:var(--s2); }

.proslave-media{
  aspect-ratio:4/3;
  border-radius:var(--r-card);
  background: url("images/eventi.jpg") center/cover no-repeat, var(--ph);
  box-shadow:var(--shadow);
}

@media (max-width:900px){
  .proslave-grid{ grid-template-columns:1fr; }
  .proslave-media{ order:2; margin-top:var(--s4); }
  .proslave-text{ order:1; }
}

/* ---------- #ponuda ---------- */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s3);
  margin-bottom:var(--s4);
}
.menu-card{ overflow:hidden; }
.menu-media{
  aspect-ratio:16/10;
  object-fit:cover;
  position:relative;
}
.menu-media::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:6px;
  background:var(--accent);
}
.media-gableci{ background: url("images/gableci.jpg") center/cover no-repeat, var(--ph-warm); }
.media-pizza{ background: url("images/pizza.jpg") center/cover no-repeat, var(--ph-warm); }
.media-pice{ background: var(--ph); }
.menu-body{ padding:var(--s3); }
.menu-body h3{ margin-bottom:8px; }
.menu-body p{ color:var(--muted); font-size:15px; }

.menu-note{
  text-align:center;
  color:var(--muted);
  font-size:15px;
}
.menu-note a{ color:var(--red); font-weight:600; }

@media (max-width:900px){
  .menu-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .menu-grid{ grid-template-columns:1fr; }
}

/* ---------- #vrijeme ---------- */
.hours-card{
  max-width:560px;
  margin:0 auto var(--s4);
  background:var(--ink-2);
  border:1px solid var(--line-inv);
  border-radius:var(--r-card);
  padding:var(--s5);
  text-align:center;
}
.hours-big{
  font-family:Fraunces, serif;
  font-weight:700;
  font-size:clamp(28px,5vw,40px);
  color:var(--red-soft);
  margin-bottom:8px;
}
.hours-sub{ font-weight:500; margin-bottom:var(--s3); }
.hours-notice{
  text-align:left;
  border-left:3px solid var(--red);
  color:var(--muted-inv);
  font-size:15px;
  padding:var(--s2) var(--s3);
  background:rgba(0,0,0,0.12);
  border-radius:0 10px 10px 0;
}
.location-line{ text-align:center; }
.location-line a{ font-weight:600; color:var(--red-soft); }

/* ---------- #instagram ---------- */
.ig-cta{ display:flex; width:max-content; margin:0 auto var(--s5); }

.ig-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s3);
}
.ig-cell{
  display:block;
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  background: var(--bgimg, none) center/cover no-repeat, var(--ph);
  transition:transform 220ms ease;
}
.ig-cell:hover{ transform:scale(1.03); }

@media (max-width:640px){
  .ig-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- #kontakt ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s3);
}
.contact-tile{
  display:flex;
  flex-direction:column;
  padding:var(--s4);
  transition:transform 220ms ease, border-color 220ms ease;
}
.contact-tile:hover{
  transform:translateY(-3px);
  border-color:var(--red);
}
.contact-emoji{ font-size:26px; margin-bottom:var(--s2); }
.contact-label{
  font-family:Inter, sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:6px;
}
.contact-value{
  font-family:Fraunces, serif;
  font-weight:700;
  font-size:22px;
  margin-bottom:6px;
}
.contact-note{ color:var(--muted-inv); font-size:14px; }

@media (max-width:640px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ---------- footer ---------- */
.footer{
  background:var(--ink);
  border-top:1px solid var(--line-inv);
  padding:var(--s5) 0;
  color:var(--muted-inv);
}
.foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--s2);
  font-size:14px;
}
.foot-sub{ color:var(--muted-inv); }
.to-top{ font-weight:600; color:var(--red-soft); }

@media (max-width:640px){
  .foot{ flex-direction:column; text-align:center; }
}