/* ===================== ROOT / RESET ===================== */
:root{
  --navy: #143A63;
  --navy-light: #1c4a7a;
  --blue: #71D4F6;
  --blue-soft: rgba(113,212,246,0.15);
  --off-white: #F7F9FB;
  --gold: #F5C563;
  --white: #ffffff;
  --text-dark: #0d1b2e;
  --font-display: 'Anton', sans-serif;
  --font-script: 'Pacifico', cursive;
  --font-body: 'Manrope', sans-serif;
  --nav-h: 96px;
  --ease: cubic-bezier(.22,.9,.32,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--off-white);
  overflow-x: hidden;
  cursor: default;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor: pointer; }
::selection{ background: var(--blue); color: var(--navy); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--off-white); }
::-webkit-scrollbar-thumb{ background: var(--blue); border-radius:10px; border: 2px solid var(--off-white); }

.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
.container-narrow{ max-width: 820px; }

/* ===================== GRAIN OVERLAY ===================== */
.grain-overlay{
  position: fixed; inset:0; z-index: 9998; pointer-events:none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================== SCROLL PROGRESS ===================== */
.scroll-progress{ position: fixed; top:0; left:0; width:100%; height:3px; z-index:9999; background: transparent; }
.scroll-progress span{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--blue), var(--gold)); transition: width 0.1s linear; }

/* ===================== CUSTOM CURSOR ===================== */
.cursor-dot, .cursor-ring{ position: fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; transform: translate(-50%,-50%); }
.cursor-dot{ width:8px; height:8px; background: var(--blue); }
.cursor-ring{ width:34px; height:34px; border:1.5px solid rgba(113,212,246,0.6); transition: width .2s var(--ease), height .2s var(--ease), opacity .2s; }
.cursor-ring.hover{ width:56px; height:56px; background: rgba(113,212,246,0.12); }
@media (pointer:coarse), (hover:none){
  .cursor-dot, .cursor-ring{ display:none; }
}

/* ===================== NAVBAR ===================== */
.navbar{
  position: fixed; top:0; left:0; width:100%; z-index: 500;
  height: var(--nav-h);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.navbar.scrolled{
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 8px 30px -12px rgba(20,58,99,0.25);
}
.nav-inner{
  max-width:1280px; margin:0 auto; padding:0 24px; height:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo img{ height:64px; width:auto; mix-blend-mode: multiply; }
.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{
  font-weight:600; font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase;
  color: #fff; position:relative; padding: 6px 0;
  transition: color .35s var(--ease);
}
.navbar.scrolled .nav-links a{ color: var(--navy); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--blue);
  transition: width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  background: var(--navy); color:#fff !important; padding:10px 20px !important; border-radius:30px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ transform: translateY(-2px); box-shadow: 0 10px 25px -8px rgba(20,58,99,0.5); }

.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.hamburger span{ width:24px; height:2px; background: #fff; border-radius:2px; transition: all .3s var(--ease), background .35s var(--ease); }
.navbar.scrolled .hamburger span{ background: var(--navy); }
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
  .nav-links{
    position:fixed; top: var(--nav-h); left:0; width:100%; flex-direction:column; align-items:flex-start;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(14px);
    padding: 24px; gap:18px; transform: translateY(-120%); transition: transform .35s var(--ease);
    box-shadow: 0 20px 30px -20px rgba(0,0,0,0.2);
  }
  .nav-links.open{ transform: translateY(0); }
  .nav-links.open a{ color: var(--navy) !important; }
  .hamburger{ display:flex; }
}

/* ===================== HERO ===================== */
.hero{
  position: relative; min-height: 100vh; display:flex; align-items:center;
  background: radial-gradient(ellipse at top, #1a4a7d 0%, var(--navy) 45%, #0c2c4d 100%);
  overflow:hidden; padding-top: var(--nav-h);
}
#snowCanvas, #snowCanvas2{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.hero-blob{ position:absolute; border-radius:50%; filter: blur(90px); opacity:0.35; z-index:1; }
.blob-1{ width:480px; height:480px; background: var(--blue); top:-100px; left:-100px; animation: float1 18s ease-in-out infinite; }
.blob-2{ width:420px; height:420px; background: var(--navy-light); bottom:-80px; right:-80px; animation: float2 22s ease-in-out infinite; }
@keyframes float1{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(60px,40px) scale(1.15);} }
@keyframes float2{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-50px,-30px) scale(1.1);} }

.hero-glow{
  position:absolute; width:400px; height:400px; border-radius:50%; pointer-events:none; z-index:1;
  background: radial-gradient(circle, rgba(113,212,246,0.18) 0%, transparent 70%);
  transform: translate(-50%,-50%); left:50%; top:50%; transition: opacity .3s;
}

.hero-content{ position:relative; z-index:5; max-width: 900px; margin: 0 auto; padding: 40px 24px 60px; text-align:left; }
.eyebrow{ color: var(--blue); font-weight:700; letter-spacing:0.12em; font-size:0.8rem; margin:0 0 14px; text-transform:uppercase; }
.hero-title{ margin:0 0 20px; font-family: var(--font-display); text-transform:uppercase; line-height:0.95; color:#fff; }
.split-line{ display:block; font-size: clamp(2.6rem, 7vw, 5.2rem); overflow:hidden; }
.split-line > * { display:inline-block; }
.hero-title .accent{ font-family: var(--font-script); text-transform:none; color: var(--blue); font-size: clamp(2.8rem, 8vw, 6rem); line-height:1; }

.hero-date{ color:#fff; font-size:1.1rem; margin: 0 0 14px; font-weight:600; }
.hero-date .sep{ color: var(--blue); margin:0 8px; }
.hero-sub{ color: rgba(255,255,255,0.85); font-size:1.05rem; max-width:520px; margin:0 0 32px; }

.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 44px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:8px;
  font-weight:700; font-size:0.95rem; border:2px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn-primary{ background: var(--blue); color: var(--navy); box-shadow: 0 10px 30px -10px rgba(113,212,246,0.6); }
.btn-primary:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 36px -10px rgba(113,212,246,0.75); }
.btn-ghost{ border-color: rgba(255,255,255,0.5); color:#fff; }
.btn-ghost:hover{ background: rgba(255,255,255,0.1); transform: translateY(-3px); border-color:#fff; }
.btn-large{ width:100%; justify-content:center; padding:18px 28px; font-size:1.05rem; }
.btn:disabled{ opacity:0.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

.countdown{ display:flex; gap:14px; }
.cd-box{
  background: rgba(255,255,255,0.08); border: 1px solid rgba(113,212,246,0.3);
  backdrop-filter: blur(8px); border-radius:10px; padding:12px 16px; min-width:74px; text-align:center;
}
.cd-num{ display:block; font-family: var(--font-display); font-size:1.8rem; color:#fff; line-height:1; }
.cd-label{ display:block; font-size:0.68rem; letter-spacing:0.08em; color: var(--blue); margin-top:4px; text-transform:uppercase; }

.mountains{ position:absolute; bottom:0; left:0; width:100%; z-index:2; }
.mountains path{ fill: var(--blue); }
.mountains-back{ opacity:0.35; height:180px; }
.mountains-front{ opacity:0.9; height:130px; }

.scroll-indicator{
  position:absolute; bottom:28px; left:50%; transform: translateX(-50%); z-index:5;
  width:30px; height:46px; border:2px solid rgba(255,255,255,0.5); border-radius:20px; background:none;
}
.scroll-indicator span{
  position:absolute; top:8px; left:50%; transform: translateX(-50%); width:5px; height:9px;
  background: var(--blue); border-radius:3px; animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{ opacity:1; top:8px;} 70%{opacity:0;} 100%{ opacity:0; top:24px;} }

/* ===================== SECTIONS GENERAL ===================== */
.section{ padding: 120px 0; position: relative; }
.section.light{ background: var(--off-white); color: var(--text-dark); }
.section.dark{ background: var(--navy); color: #fff; }
.section.dark .eyebrow{ color: var(--blue); }
.section-title{
  font-family: var(--font-script); text-transform:none; font-weight:400;
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  line-height:1.2; margin: 0 0 24px;
}
.section-lead{ font-size:1.1rem; line-height:1.7; max-width:700px; opacity:0.85; margin: 0 0 20px; }

/* scroll reveal */
.reveal, .reveal-up{ opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in, .reveal-up.in{ opacity:1; transform: translateY(0); }

/* ===================== STATS ===================== */
.stats-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:56px; }
.stat-card{
  background:#fff; border: 1px solid var(--blue-soft); border-radius:16px; padding:36px 24px; text-align:center;
  box-shadow: 0 20px 40px -24px rgba(20,58,99,0.25);
}
.stat-num{ font-family: var(--font-display); font-size: clamp(2.2rem,5vw,3rem); color: var(--navy); }
.stat-plus{ font-family: var(--font-display); font-size: clamp(1.6rem,4vw,2.2rem); color: var(--blue); }
.stat-card p{ margin: 8px 0 0; font-weight:600; color:#4a5568; }
@media(max-width:760px){ .stats-grid{ grid-template-columns:1fr; } }

/* ===================== BENEFITS ===================== */
.benefits-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:56px; }
.benefit-card{
  position: relative; overflow:hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  border:1px solid rgba(113,212,246,0.18); border-radius:18px;
  padding:34px 28px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  transform-style: preserve-3d; will-change: transform;
}
.benefit-card::before{
  content:''; position:absolute; inset:0; border-radius:18px; opacity:0; pointer-events:none;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(113,212,246,0.16), transparent 60%);
  transition: opacity .4s;
}
.benefit-card:hover::before{ opacity:1; }
.benefit-card::after{
  content:''; position:absolute; top:0; left:14px; right:14px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  transform: scaleX(0); transition: transform .5s var(--ease);
}
.benefit-card:hover::after{ transform: scaleX(1); }
.benefit-card:hover{
  border-color: rgba(113,212,246,0.55);
  box-shadow: 0 30px 60px -24px rgba(113,212,246,0.35), 0 0 0 1px rgba(113,212,246,0.15) inset;
}
.benefit-icon{
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; margin-bottom:20px; border-radius:14px;
  background: linear-gradient(135deg, rgba(113,212,246,0.22), rgba(20,58,99,0.4));
  border: 1px solid rgba(113,212,246,0.3);
  transition: transform .4s var(--ease);
}
.benefit-card:hover .benefit-icon{ transform: scale(1.12) rotate(-6deg); }
.benefit-card h3{ font-size:1.2rem; margin:0 0 10px; position:relative; }
.benefit-card p{ margin:0; opacity:0.75; line-height:1.6; font-size:0.95rem; position:relative; }
@media(max-width:900px){ .benefits-grid{ grid-template-columns: 1fr 1fr; } }
@media(max-width:600px){ .benefits-grid{ grid-template-columns: 1fr; } }

/* ===================== KONCEPT ===================== */
.koncept-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:60px; align-items:center; }
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.tag{ background:#fff; border:1px solid var(--blue-soft); color: var(--navy); font-weight:600; font-size:0.85rem; padding:9px 16px; border-radius:30px; }
.koncept-visual{ text-align:center; background:#fff; border-radius:24px; padding:60px 24px; box-shadow: 0 30px 60px -30px rgba(20,58,99,0.3); }
.sqm-display{ line-height:1; }
.sqm-number{
  font-family: var(--font-display); font-size: clamp(5rem, 12vw, 9rem);
  background: linear-gradient(135deg, var(--navy), var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sqm-unit{ font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--navy); margin-left:6px; }
.sqm-caption{ margin-top:18px; color:#4a5568; font-weight:600; }
@media(max-width:860px){ .koncept-grid{ grid-template-columns:1fr; } }

/* ===================== ZIMSKA PRICA ===================== */
#zimska-prica{ overflow:hidden; }
.winter-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:56px; position:relative; z-index:3; max-width:900px; margin-left:auto; margin-right:auto; }
.winter-card{
  background: rgba(255,255,255,0.05); border:1px solid rgba(113,212,246,0.2); border-radius:18px;
  padding:24px; text-align:center;
}
.winter-illustration{ width:120px; height:120px; margin:0 auto 14px; }
.winter-card h3{ margin:0 0 4px; font-size:1.05rem; }
.hint{ font-size:0.8rem; color: var(--blue); opacity:0.8; margin:0; min-height:1.2em; }
#snowGlobeCard, #treeCard, #sleighCard{ cursor:pointer; }

/* --- JELKA: dim dok se ne aktivira --- */
.tree-glow{ opacity:0; transition: opacity .6s var(--ease); }
.ornament{
  opacity:0.25; filter:none;
  transition: opacity .5s var(--ease), filter .5s var(--ease);
  transition-delay: calc(var(--i,0) * 0.12s);
}
#treeCard.lit .tree-glow{ opacity:1; }
#treeCard.lit .ornament{
  opacity:1;
  filter: drop-shadow(0 0 5px currentColor);
  animation: twinkle 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i,0) * 0.12s + 1s);
}
@keyframes twinkle{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }

/* --- SAONICE: mirno lebdenje, "poletanje" na klik --- */
.sleigh-group{ animation: fly 3.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes fly{ 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(10px,-6px);} }
#sleighCard.launch .sleigh-group{ animation: launchFly 1.4s cubic-bezier(.3,.7,.3,1); }
@keyframes launchFly{
  0%{ transform: translate(0,0) rotate(0deg) scale(1); opacity:1; }
  35%{ transform: translate(38px,-26px) rotate(-10deg) scale(1.12); opacity:1; }
  60%{ transform: translate(72px,-50px) rotate(-4deg) scale(0.8); opacity:0.35; }
  80%{ transform: translate(18px,-8px) rotate(5deg) scale(1.08); opacity:1; }
  100%{ transform: translate(0,0) rotate(0deg) scale(1); opacity:1; }
}
.sleigh-trail{ transition: opacity .3s; }
#sleighCard.launch .sleigh-trail{ animation: trailZoom 1.4s ease-out; }
@keyframes trailZoom{ 0%{ stroke-dashoffset:0; opacity:0.5; } 50%{ stroke-dashoffset:-40; opacity:1; } 100%{ stroke-dashoffset:-80; opacity:0.5; } }
.star{ animation: twinkle 1.6s ease-in-out infinite; }
#sleighCard.launch .star{ animation: starBurst .9s ease-out; }
@keyframes starBurst{ 0%{ opacity:0.4; r:1.5; } 40%{ opacity:1; r:3; } 100%{ opacity:0.4; r:1.5; } }
.winter-cta{ text-align:center; margin-top:60px; }
.winter-cta p{ font-family: var(--font-script); text-transform:none; font-weight:400; font-size:2rem; margin:0 0 20px; }
@media(max-width:760px){ .winter-grid{ grid-template-columns: 1fr 1fr; } }
@media(max-width:520px){ .winter-grid{ grid-template-columns: 1fr; } }

/* ===================== LOKACIJA ===================== */
.lokacija-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:50px; align-items:center; margin-top:40px; }
.info-list li{ padding:14px 0; border-bottom:1px solid rgba(20,58,99,0.12); font-size:1.05rem; }
.info-list strong{ color: var(--navy); }
.lokacija-info .btn{ margin-top:24px; }
.map-placeholder{
  height:320px; border-radius:18px; background: linear-gradient(135deg, var(--navy), var(--navy-light));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; text-align:center; padding:20px;
}
.map-embed{
  width:100%; border:0;
  box-shadow: 0 25px 50px -24px rgba(20,58,99,0.35); border:1px solid var(--blue-soft); border-radius:18px;
  filter: grayscale(0.15) contrast(1.05);
}
@media(max-width:860px){ .lokacija-grid{ grid-template-columns:1fr; } }

/* ===================== FORM ===================== */
.form-card{
  background:#fff; border-radius:22px; padding:44px; margin-top:44px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.5);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:20px; }
.form-group{ display:flex; flex-direction:column; gap:8px; }
.form-group.full{ margin-bottom:20px; }
label{ font-weight:700; font-size:0.9rem; color: var(--navy); }
.char-count{ font-weight:500; color:#94a3b8; font-size:0.8rem; float:right; }
input[type=text], input[type=email], input[type=tel], select, textarea{
  font-family: inherit; font-size:1rem; padding:13px 16px; border-radius:10px; border:1.5px solid #dfe6ee;
  background: #fbfcfe; color: var(--text-dark); transition: border-color .25s, box-shadow .25s;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(113,212,246,0.25);
}
textarea{ resize:vertical; }
.error-msg{ color:#e0454f; font-size:0.82rem; min-height:1.1em; }
.form-notice{
  background: var(--blue-soft); border:1px solid rgba(113,212,246,0.4); border-radius:12px;
  padding:16px 18px; font-size:0.92rem; color: var(--navy); margin-bottom:22px;
}
.checkbox-group{ margin-bottom:26px; }
.checkbox-label{ display:flex; gap:12px; align-items:flex-start; font-weight:500; font-size:0.92rem; color:#334155; cursor:pointer; }
.checkbox-label input{ margin-top:3px; width:18px; height:18px; accent-color: var(--blue); flex-shrink:0; }
.form-success{
  display:flex; gap:14px; align-items:flex-start; background:#eafaf0; border:1px solid #b7ecc8;
  border-radius:14px; padding:18px 20px; margin-top:22px;
}
.check-icon{ background:#2fa85c; color:#fff; width:28px; height:28px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; }
.form-success p{ margin:0; color:#1e5631; font-size:0.95rem; }
.form-success a{ font-weight:700; text-decoration:underline; }
@media(max-width:700px){ .form-row{ grid-template-columns:1fr; } .form-card{ padding:28px 20px; } }

/* ===================== CONTACT ===================== */
.contact-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:50px; }
.contact-card{ background:#fff; border-radius:16px; padding:30px; text-align:center; box-shadow: 0 20px 40px -26px rgba(20,58,99,0.25); }
.contact-icon{ font-size:1.8rem; }
.contact-card h3{ margin:10px 0 6px; font-size:1.05rem; color: var(--navy); }
.contact-card a{ color: var(--navy); font-weight:600; }
@media(max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

/* ===================== FOOTER ===================== */
.footer{ background:#0c2c4d; color:rgba(255,255,255,0.75); padding:56px 0 32px; text-align:center; }
.footer-logo{ height:52px; margin:0 auto 14px; filter: brightness(0) invert(1); opacity:0.9; }
.footer-slogan{ font-family: var(--font-script); font-size:1.6rem; color: var(--blue); margin:0 0 10px; }
.footer-meta{ margin:0 0 18px; font-size:0.9rem; }
.footer-copy{ margin:0; font-size:0.8rem; opacity:0.5; }

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  .reveal, .reveal-up{ opacity:1; transform:none; }
}