*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-weight:var(--fw-body);font-size:var(--fs-body);line-height:1.7;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--bg)}
img{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:var(--fw-display);line-height:1.08;text-wrap:balance}
em{font-style:var(--em-style);color:var(--accent-ink);font-weight:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.section{padding-block:clamp(64px,9vw,116px)}
.section--alt{background:var(--bg-2)}
.section--surface{background:var(--surface)}
.section--band{background:var(--band);color:var(--band-ink)}
.section--band em,.section--band .eyebrow{color:var(--band-accent)}

.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.74rem;letter-spacing:var(--ls-eyebrow);text-transform:var(--tt-eyebrow);color:var(--accent-ink);font-weight:500}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor}
.section-head{text-align:center;max-width:660px;margin:0 auto clamp(40px,6vw,68px);display:grid;gap:16px;justify-items:center}
.section-head h2,.h2{font-size:var(--fs-h2)}
.section-head p{color:var(--muted)}

/* ---------- gumbi ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:1.05em 2.1em;border-radius:var(--r-btn);background:var(--btn-bg);color:var(--btn-ink);border:1px solid var(--btn-bg);font:500 .78rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s,box-shadow .3s}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);transform:translateY(-2px);box-shadow:0 16px 28px -16px var(--accent-ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn--sm{padding:.85em 1.5em;font-size:.7rem}
.section--band .btn,.contact .btn{background:var(--band-accent);color:var(--band);border-color:var(--band-accent)}
.section--band .btn:hover,.contact .btn:hover{background:var(--band-ink);border-color:var(--band-ink);color:var(--band)}

.photo{position:relative;overflow:hidden;color:var(--ph-ink);background:var(--ph-bg);isolation:isolate;border-radius:var(--r-photo)}
.photo::before{content:"SLIKA\A" attr(data-slot) "\A" attr(data-size);white-space:pre-line;position:absolute;inset:12px;border:1.5px dashed currentColor;border-radius:calc(var(--r-photo) * .6);display:grid;place-content:center;text-align:center;padding:14px;font:500 .72rem/1.9 var(--f-body);letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* ---------- glava ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px}
.brand{font-family:var(--f-display);font-size:1.6rem;font-weight:var(--fw-brand);text-decoration:none;white-space:nowrap;letter-spacing:.01em}
.brand span{color:var(--accent-ink);font-style:italic}
.nav__list{display:flex;align-items:center;gap:30px}
.nav__list a:not(.btn){text-decoration:none;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;position:relative}
.nav__list a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--accent-ink);transition:right .35s}
.nav__list a:not(.btn):hover::after{right:0}
.menu-btn{display:none;background:none;border:1px solid var(--ink);border-radius:var(--r-btn);padding:.6em 1.2em;font:500 .72rem var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);cursor:pointer}
@media(max-width:940px){
  .menu-btn{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);display:none;padding:8px 0 26px;box-shadow:0 26px 30px -24px rgba(0,0,0,.35)}
  .nav.open{display:block}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;padding:0 max(20px,env(safe-area-inset-left,0px))}
  .nav__list a:not(.btn){display:block;padding:15px 0;border-bottom:1px solid var(--line)}
  .nav__list a:not(.btn)::after{display:none}
  .nav__list li:last-child{margin-top:20px}
  .nav__list li:last-child .btn{width:100%}
}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:min(90vh,780px);background:var(--hero-bg)}
.hero__text{align-self:center;padding:clamp(52px,7vw,100px) clamp(24px,5vw,72px) clamp(52px,7vw,100px) max(20px,calc((100vw - 1180px) / 2 + 20px))}
.hero__text>div{max-width:36rem}
.hero h1{font-size:var(--fs-hero);margin:22px 0 24px;letter-spacing:-.01em}
.hero .lead{font-size:1.12rem;color:var(--muted);max-width:30em;margin-bottom:38px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.proof{display:flex;gap:14px 38px;flex-wrap:wrap;margin-top:50px;padding-top:26px;border-top:1px solid var(--line)}
.proof div{display:grid;gap:2px}
.proof b{font-family:var(--f-display);font-size:1.9rem;font-weight:600;line-height:1.1}
.proof span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero__media{position:relative;display:grid;padding:var(--hero-pad)}
.hero__media .photo{min-height:480px;border-radius:var(--r-hero)}
.hero__tag{position:absolute;z-index:3;left:clamp(16px,3.5vw,44px);bottom:clamp(16px,3.5vw,44px);background:var(--surface);color:var(--ink);border-radius:var(--r-md);padding:16px 24px;box-shadow:0 26px 40px -22px rgba(0,0,0,.45);display:grid;gap:2px}
.hero__tag b{font-family:var(--f-display);font-size:1.6rem;font-weight:600;line-height:1.1}
.hero__tag span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media(max-width:940px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__text{padding:46px max(20px,env(safe-area-inset-right,0px)) 44px max(20px,env(safe-area-inset-left,0px))}
  .hero__media{padding:0 max(20px,env(safe-area-inset-right,0px)) 48px max(20px,env(safe-area-inset-left,0px))}
  .hero__media .photo{min-height:0;aspect-ratio:4/5;max-height:620px;border-radius:var(--r-lg)}
  .hero__tag{left:calc(max(20px,env(safe-area-inset-left,0px)) + 14px);bottom:calc(48px + 14px)}
}

/* ---------- trak ---------- */
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 46px;padding:20px max(20px,env(safe-area-inset-left,0px));background:var(--band);color:var(--band-ink)}
.strip li{display:flex;align-items:center;gap:14px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase}
.strip li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--band-accent)}

/* ---------- cenik ---------- */
.cats{columns:2;column-gap:clamp(32px,6vw,84px)}
.cat{break-inside:avoid;margin:0 0 48px}
.cat__title{font-size:2.1rem;padding-bottom:14px;border-bottom:1.5px solid var(--ink)}
.svc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 22px;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--line)}
.svc__name{font-size:1.4rem;font-weight:600;line-height:1.2}
.svc__price{font-family:var(--f-display);font-size:1.5rem;font-weight:600;color:var(--accent-ink);text-align:right;white-space:nowrap}
.svc__desc{font-size:.9rem;color:var(--muted);line-height:1.55}
.svc__time{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right;white-space:nowrap}
.cta-row{text-align:center;margin-top:10px}
@media(max-width:860px){.cats{columns:1}.cat{margin-bottom:40px}}

/* ---------- head spa ---------- */
.spa{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,88px);align-items:start}
.spa__intro{display:grid;gap:20px;position:sticky;top:110px}
.spa__intro p{opacity:.88;max-width:30em}
.spa__intro .photo{aspect-ratio:4/5;margin-top:14px;border-radius:var(--r-lg)}
.section--band .svc{border-color:var(--band-line);padding:28px 0}
.section--band .svc:first-child{padding-top:6px}
.section--band .svc__name{font-size:1.9rem}
.section--band .svc__price{color:var(--band-accent);font-size:2rem}
.section--band .svc__desc,.section--band .svc__time{color:var(--band-ink);opacity:.8}
@media(max-width:940px){.spa{grid-template-columns:1fr}.spa__intro{position:static}}

/* ---------- o meni ---------- */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(48px,7vw,96px);align-items:center}
.about__pic{position:relative;max-width:480px;width:100%}
.about__pic::before{display:none}
.about__pic .photo{aspect-ratio:4/5;border-radius:var(--r-portrait)}
.about__txt{display:grid;gap:22px}
.about__txt .h2{font-size:var(--fs-h2)}
.pillars{display:grid;gap:18px;padding-top:26px;border-top:1px solid var(--line)}
.pillars li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px}
.pillars b{font-family:var(--f-display);font-size:1.45rem;font-weight:600;line-height:1.2}
.pillars span{grid-column:2;font-size:.93rem;color:var(--muted)}
.pillars i{grid-row:1/3;font-family:var(--f-display);font-size:2rem;color:var(--accent);line-height:1}
@media(max-width:940px){.about{grid-template-columns:1fr}.about__pic{margin:0 auto 0 18px;width:calc(100% - 18px)}}

/* ---------- salon in galerija ---------- */
.bento{display:grid;gap:clamp(12px,1.6vw,18px)}
.bento--salon{grid-template-columns:1.4fr 1fr;grid-template-rows:repeat(2,clamp(220px,26vw,300px))}
.bento--salon .photo:first-child{grid-row:span 2}
.bento--work{grid-template-columns:repeat(4,1fr)}
.bento--work .photo{aspect-ratio:4/5}
.bento--work .photo:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media(max-width:700px){
  .bento--salon{grid-template-columns:1fr;grid-template-rows:none}
  .bento--salon .photo,.bento--salon .photo:first-child{grid-row:auto;aspect-ratio:4/3}
}
@media(max-width:900px){
  .bento--work{grid-template-columns:repeat(2,1fr)}
  .bento--work .photo:first-child{aspect-ratio:1/1}
}

/* ---------- mnenja ---------- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.review{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:38px 32px 30px;position:relative;display:grid;gap:14px;align-content:start}
.review::before{content:"\201C";position:absolute;top:8px;left:24px;font:4.6rem/1 var(--f-display);color:var(--blush)}
.review .stars{color:var(--accent);letter-spacing:.22em;font-size:.9rem}
.review p{font-family:var(--f-display);font-size:1.4rem;line-height:1.4}
.review cite{font:500 .72rem var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);font-style:normal}

/* ---------- kontakt ---------- */
.contact{background:var(--band);color:var(--band-ink);border-radius:var(--r-lg);padding:clamp(40px,6vw,76px) clamp(24px,5vw,60px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,60px);align-items:center;position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;left:-150px;bottom:-220px;background:radial-gradient(circle,var(--glow),transparent 65%)}
.contact>*{position:relative}
.contact em,.contact .eyebrow{color:var(--band-accent)}
.contact p{margin-top:18px;opacity:.85}
.contact .btn{margin-top:30px}
.info{display:grid;gap:18px}
.info div{border-bottom:1px solid var(--band-line);padding-bottom:14px;display:grid;gap:2px}
.info small{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--band-accent)}
@media(max-width:940px){.contact{grid-template-columns:1fr}}

.footer{padding:38px 0 58px;text-align:center;font-size:.78rem;letter-spacing:.14em;color:var(--muted)}
.fab{display:none;position:fixed;z-index:55;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));box-shadow:0 18px 34px -12px rgba(0,0,0,.6)}
@media(max-width:940px){.fab{display:flex}.footer{padding-bottom:112px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}