:root{
  --teal:#0fb5a8;
  --teal-deep:#0a8278;
  --coral:#ff7a59;
  --yellow:#ffd24a;
  --pink:#ff8fb3;
  --ink:#1a2238;
  --cream:#fff8ed;
  --bg:#fffdf7;
  --muted:#5b6477;
  --line:#ffe2cf;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Quicksand',sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--coral)}

.kicker{font-family:'Quicksand',sans-serif;font-weight:700;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:700;letter-spacing:-.01em;line-height:1.05}
h1{font-size:clamp(2.5rem,5.5vw,5.5rem)}
h2{font-size:clamp(2rem,4.2vw,3.75rem)}
h3{font-size:1.35rem;font-weight:700}
.lede{font-size:1.1rem;line-height:1.7;font-weight:500}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2.2rem;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;transition:all .25s;border:2px solid transparent;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 8px 24px -8px rgba(255,122,89,.7)}
.btn-primary:hover{background:#ff6843;transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.btn.big{font-size:15px;padding:1.2rem 2.6rem}

.nav{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2.5rem;color:#fff}
.nav .logo{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700}
.logo img {vertical-align: middle;}
.nav .logo span{font-family:'Quicksand',sans-serif;font-weight:500;font-size:.95rem;opacity:.85;color:var(--yellow)}
.nav nav{display:flex;gap:2rem;font-size:14px;font-weight:600}
.nav nav a:hover{color:var(--yellow)}
.nav-cta{background:var(--yellow);color:var(--ink);padding:.65rem 1.4rem;border-radius:999px;font-weight:700;font-size:13px}
.nav-cta:hover{background:#fff}
@media(max-width:820px){.nav nav,.nav-cta{display:none}}

.hero{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-veil{position:absolute;inset:0;background:linear-gradient(135deg,rgba(15,181,168,.85),rgba(255,122,89,.75) 60%,rgba(255,143,179,.7))}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none}
.blob1{width:380px;height:380px;background:var(--yellow);top:-100px;right:-80px;animation:float 8s ease-in-out infinite}
.blob2{width:300px;height:300px;background:var(--pink);bottom:-80px;left:-60px;animation:float 10s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}
.hero-content{position:relative;z-index:10;max-width:1280px;margin:0 auto;padding:6rem 2.5rem 2rem;color:#fff;width:100%}
.hero-content .kicker{color:var(--yellow)}
.hero-content h1{max-width:50rem;text-wrap:balance}
.hero-content h1 em{color:var(--yellow);display:inline-block;transform:rotate(-2deg)}
.hero-content .lede{max-width:36rem;margin:1.75rem 0 2.25rem;color:rgba(255,255,255,.95)}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap}

.bar{display:grid;grid-template-columns:repeat(1fr,3);gap:1rem;background:var(--yellow);padding:1.25rem 2.5rem;font-weight:700;font-size:14px;text-align:center;color:var(--ink)}
@media(max-width:780px){.bar{grid-template-columns:1fr;font-size:13px}}

section{padding:6rem 2.5rem}
.ahead,.shead,.phead,.qhead{max-width:1280px;margin:0 auto 3.5rem;text-align:center}
.ahead h2 em,.shead h2 em,.qhead h2 em,.phead h2 em{color:var(--teal)}

.acards{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
.acard{padding:2.5rem 2rem;border-radius:24px;color:#fff;transition:transform .3s}
.acard:hover{transform:translateY(-6px) rotate(-1deg)}
.acard .emoji{font-size:3rem;margin-bottom:1rem;display:block}
.acard h3{margin-bottom:.6rem}
.acard p{font-size:.95rem;line-height:1.6;font-weight:500;opacity:.95}
.c1{background:var(--teal)}.c2{background:var(--coral)}.c3{background:var(--pink)}
.c4{background:var(--teal-deep)}.c5{background:#ff9d4d}.c6{background:#7ec8a8}
@media(max-width:880px){.acards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.acards{grid-template-columns:1fr}}


.space{background:var(--cream)}
.gallery{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery figure{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:20px}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.gallery figure:hover .sv{opacity: 1;}
.gallery figure:hover .gray{opacity: 0.7;}
.gallery figcaption{position:absolute;left:1rem;bottom:1rem;background:var(--yellow);color:var(--ink);padding:.5rem 1rem;border-radius:999px;font-weight:700;font-size:13px}
@media(max-width:880px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}

.packs{background:linear-gradient(180deg,var(--bg),var(--cream))}
.steps{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.step{text-align:center;padding:2.5rem 1.5rem;background:#fff;border-radius:24px;border:3px dashed var(--line)}
.s1{border-color:var(--teal)}.s2{border-color:var(--coral)}.s3{border-color:var(--pink)}
.step .num{width:5rem;height:5rem;margin:0 auto 1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:900;font-size:2rem;color:#fff;background:var(--coral)}
.s1 .num{background:var(--teal)}.s3 .num{background:var(--pink)}
.step h3{margin-bottom:.5rem}
.step p{font-size:.95rem;color:var(--muted);font-weight:500}
.center{text-align:center;margin-top:3.5rem}
@media(max-width:780px){.steps{grid-template-columns:1fr}}

.quotes{background:var(--teal);color:#fff}
.quotes .kicker{color:var(--yellow)}
.q-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.q-grid figure{background:rgba(255,255,255,.12);padding:2rem;border-radius:20px;backdrop-filter:blur(8px)}
.q-grid blockquote{font-family:'Fraunces',serif;font-size:1.2rem;line-height:1.5;font-weight:500}
.q-grid figcaption{margin-top:1rem;font-weight:700;font-size:13px;color:var(--yellow);letter-spacing:.05em}
@media(max-width:780px){.q-grid{grid-template-columns:1fr}}

.contact{background:linear-gradient(135deg,var(--coral),var(--pink));color:#fff}
.contact .kicker{color:var(--yellow)}
.contact h2 em{color:var(--yellow)}
.cgrid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:5fr 7fr;gap:4rem;align-items:start}
.contact .lede{margin-top:1.5rem;color:rgba(255,255,255,.95)}
.contact .meta{margin-top:2rem;font-size:14px;background:rgba(255,255,255,.15);padding:1rem 1.25rem;border-radius:14px;display:inline-block}
.contact form{background:#fff;color:var(--ink);padding:2.5rem;border-radius:24px;box-shadow:0 24px 60px -20px rgba(0,0,0,.25)}
.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem}
.contact label{display:block;font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--ink);margin-bottom:1.25rem;text-transform:uppercase}
.contact input,.contact textarea,.contact select{display:block;width:100%;background:var(--cream);border:2px solid transparent;border-radius:12px;padding:.85rem 1rem;font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);margin-top:.5rem}
.contact input:focus,.contact textarea:focus,.contact select:focus{outline:none;border-color:var(--teal);background:#fff}
.contact textarea{resize:vertical}
.contact .btn{margin-top:.5rem;width:100%;justify-content:center}
@media(max-width:880px){.cgrid{grid-template-columns:1fr}}
@media(max-width:560px){.contact .row{grid-template-columns:1fr}}

footer{background:var(--ink);color:#fff;padding:3.5rem 2.5rem;display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:2rem}
footer .brand{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700}
footer .brand span{font-family:'Quicksand',sans-serif;font-weight:500;font-size:.9rem;color:var(--yellow)}
footer .tag{margin-top:1rem;color:var(--yellow);font-weight:600}
.ftools{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;font-size:13px;color:rgba(255,255,255,.7)}
.socials{display:flex;gap:1.25rem;font-weight:700;color:#fff}
.socials a:hover{color:var(--yellow)}
.back{color:var(--coral);font-weight:700;margin-top:.25rem}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* Mobile responsive fixes */
html,body{overflow-x:hidden;max-width:100%}
.cgrid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media(max-width:880px){.cgrid{display:block}.cgrid>*+*{margin-top:2.5rem}}
@media(max-width:680px){
  section{padding:4rem 1.25rem}
  .nav{padding:1.25rem 1.25rem}
  .hero-content{padding:5rem 1.25rem 2rem}
  .hero-content .lede{font-size:1rem}
  .bar{padding:1.25rem}
  .acard{padding:2rem 1.5rem}
  .step{padding:2rem 1.25rem}
  .q-grid figure{padding:1.5rem}
  .contact form{padding:1.5rem}
  footer{padding:3rem 1.25rem;flex-direction:column;align-items:flex-start}
  .ftools{align-items:flex-start}
  .cta-row .btn,.btn.big{padding:.95rem 1.6rem;font-size:12px}
  .gallery figcaption{font-size:12px;padding:.4rem .8rem}
}
.bar div p{
  display: inline;
  font-size: 2vw;
}
.bar div img{
  vertical-align: middle;
  display: inline;
  width: 15vw;
}
.reveal .sv{
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  font-size: 1.8vw;
  font-weight: bold;
  padding: 25%;
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
}
.reveal .gray{
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  width: 100%;
  height: 100%;
  background-color: #5b6477;
}
#keteringbtn{color: gray;}
.linkovi{
  vertical-align: middle;
  font-size: 3vw;
}
#kontaktmapa{
  width: 100%;
  margin-left:  10vw;
  display: flex;
}
#leva,#desna{
  width: 80%;
  flex: 1;
}
.linkovi{
  vertical-align: middle;
  font-size: 3vw;
}
#kontaktmapa iframe{
  width: 35vw;
  height: 60vh;
  border-radius: 50px;
}
@media (max-width: 880px) {
  #kontaktmapa{
    flex-direction: column;
  }
  #kontaktmapa iframe{
  width: 100%;
  }
  #leva a{
    font-size: 150%;
  }
}
#big{
  font-size: 110%;
}
.ftools #izborbtn {
  position: fixed;
  bottom: 30px;
  background-color: #1a2238;
  padding: 10px;
  border-radius: 50px;
}