/* =========================================================
   Dr M's Dental Clinic — Ilidža, Sarajevo
   Dentistry done differently
   ========================================================= */

:root{
  /* Brend — izvučen iz logotipa i enterijera klinike */
  --ink:        #12303A;   /* duboka teal-navy iz zuba u logotipu */
  --ink-2:      #1D4450;
  --ink-soft:   #4A6870;
  --muted:      #6E848A;

  --green:      #3EA35C;   /* zeleni potez iz logotipa */
  --green-deep: #2C7D45;
  --green-soft: #E7F3EA;

  --copper:     #B9713F;   /* stolice / recepcijski pult */
  --copper-lt:  #E3B98F;
  --copper-soft:#F7EDE3;

  --sand:       #F7F2EC;   /* topla krem podloga */
  --cream:      #FDFBF8;
  --white:      #FFFFFF;
  --line:       #E7DED3;

  --wa:         #25D366;
  --wa-deep:    #1EB855;

  --shadow-s: 0 2px 8px rgba(18,48,58,.06);
  --shadow-m: 0 12px 32px -12px rgba(18,48,58,.16);
  --shadow-l: 0 30px 70px -30px rgba(18,48,58,.32);
  --shadow-xl:0 50px 110px -40px rgba(18,48,58,.42);

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 32px;
  --r-xl: 44px;

  --ff-display: "Fraunces", ui-serif, Georgia, serif;
  --ff-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1240px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:clamp(16px,.62vw + 14px,17.5px);
  line-height:1.7;
  color:var(--ink-soft);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; }
h1,h2,h3,h4,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--green); color:#fff; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 12px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--green); outline-offset:3px; border-radius:6px; }

.wrap{ width:min(100% - 44px, var(--wrap)); margin-inline:auto; }

/* ---------- Tipografija ---------- */
.h2{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(31px,3.5vw,52px);
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ink);
  font-variation-settings:"SOFT" 40,"WONK" 1;
}
.h2 em{ font-style:italic; color:var(--green-deep); }
.h2--light{ color:#fff; }
.h2--light em{ color:var(--copper-lt); }

.lead{ font-size:1.075em; color:var(--ink-soft); }

/* Razmaci u tekstualnim blokovima */
.about__copy .h2,
.kids__copy .h2,
.contact__info .h2{ margin-bottom:22px; }
.about__copy p + p,
.kids__copy p + p{ margin-top:1.05em; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.775rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-deep); margin-bottom:20px;
}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 4px rgba(62,163,92,.16);
  animation:pulseDot 2.6s var(--ease) infinite;
}
.eyebrow--light{ color:var(--copper-lt); }
.eyebrow--light .eyebrow__dot{ background:var(--copper-lt); box-shadow:0 0 0 4px rgba(227,185,143,.2); }
@keyframes pulseDot{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.7); opacity:.6 } }

/* ---------- Dugmad ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:100px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s ease;
  box-shadow:var(--shadow-m);
}
.btn svg{ width:19px; height:19px; fill:currentColor; flex:none; }
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,rgba(255,255,255,.28),transparent 55%);
  transform:translateX(-110%); transition:transform .7s var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-l); }
.btn:hover::after{ transform:translateX(110%); }
.btn:active{ transform:translateY(-1px); }

.btn--lg{ padding:18px 32px; font-size:1rem; }
.btn--sm{ padding:11px 20px; font-size:.875rem; }

.btn--wa{ --btn-bg:linear-gradient(135deg,var(--wa) 0%,var(--wa-deep) 100%); }
.btn--wa{ box-shadow:0 14px 34px -14px rgba(30,184,85,.75); }
.btn--wa:hover{ box-shadow:0 22px 46px -16px rgba(30,184,85,.85); }

.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--ink);
  border:1.5px solid var(--line); box-shadow:none;
}
.btn--ghost:hover{ border-color:var(--ink); box-shadow:var(--shadow-m); background:var(--white); }

.btn--outline-light{
  --btn-bg:rgba(255,255,255,.06); --btn-fg:#fff;
  border:1.5px solid rgba(255,255,255,.32); box-shadow:none;
  backdrop-filter:blur(6px);
}
.btn--outline-light:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6); }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; color:var(--green-deep); font-size:.95rem;
  transition:gap .35s var(--ease), color .3s ease;
}
.link-arrow svg{ width:19px; height:19px; transition:transform .35s var(--ease); }
.link-arrow:hover{ gap:14px; }
.link-arrow:hover svg{ transform:translateX(3px); }
.link-arrow--light{ color:var(--copper-lt); }

/* =========================================================
   NAVIGACIJA
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:18px 0;
  transition:padding .45s var(--ease), background .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(253,251,248,.82);
  backdrop-filter:blur(18px) saturate(1.4);
  opacity:0; transition:opacity .45s ease;
  border-bottom:1px solid rgba(231,222,211,0);
}
.nav.is-stuck{ padding:10px 0; }
.nav.is-stuck::before{ opacity:1; border-bottom-color:var(--line); }

.nav__inner{
  width:min(100% - 44px, 1340px); margin-inline:auto;
  display:flex; align-items:center; gap:28px;
}

.brand{ display:flex; align-items:center; gap:12px; color:var(--ink); flex:none; }
.brand__mark{ width:30px; height:36px; flex:none; transition:transform .6s var(--ease); }
.brand:hover .brand__mark{ transform:rotate(-6deg) scale(1.06); }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{ font-size:1.02rem; font-weight:500; letter-spacing:-.015em; }
.brand__name b{ font-weight:700; }
.brand__tag{
  font-family:var(--ff-display); font-style:italic; font-size:.68rem;
  color:var(--muted); letter-spacing:.01em;
}

.nav__links{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav__links a{
  font-size:.925rem; font-weight:500; color:var(--ink); position:relative; padding:4px 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--green); border-radius:2px;
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__phone-m{ display:none; }

.nav__actions{ display:flex; align-items:center; gap:14px; flex:none; }
.nav__phone{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:.925rem; color:var(--ink); white-space:nowrap;
}
.nav__phone svg{ width:17px; height:17px; fill:var(--green); }
.nav__phone:hover{ color:var(--green-deep); }

.nav__burger{ display:none; width:44px; height:44px; position:relative; }
.nav__burger span{
  position:absolute; left:11px; width:22px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .4s var(--ease), opacity .25s ease;
}
.nav__burger span:nth-child(1){ top:15px; }
.nav__burger span:nth-child(2){ top:21px; }
.nav__burger span:nth-child(3){ top:27px; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding:clamp(120px,15vh,180px) 0 clamp(70px,9vh,110px);
  background:
    radial-gradient(120% 80% at 80% -10%, var(--copper-soft) 0%, transparent 55%),
    linear-gradient(180deg,var(--cream) 0%, var(--sand) 100%);
  overflow:hidden;
}
.hero__glow{
  position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none;
  will-change:transform;
}
.hero__glow--a{
  width:520px; height:520px; top:-160px; left:-120px;
  background:radial-gradient(circle,rgba(62,163,92,.22),transparent 68%);
  animation:float1 18s ease-in-out infinite;
}
.hero__glow--b{
  width:600px; height:600px; bottom:-240px; right:-140px;
  background:radial-gradient(circle,rgba(185,113,63,.2),transparent 68%);
  animation:float2 22s ease-in-out infinite;
}
@keyframes float1{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(60px,50px) } }
@keyframes float2{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-70px,-40px) } }

.hero__inner{
  width:min(100% - 44px, 1340px); margin-inline:auto;
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(40px,5vw,80px); align-items:center;
}

.hero__title{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(38px,4.6vw,68px); line-height:1.04; letter-spacing:-.032em;
  color:var(--ink); margin-bottom:26px;
  font-variation-settings:"SOFT" 50,"WONK" 1;
}
.hero__title em{
  font-style:italic; color:var(--green-deep); position:relative; white-space:nowrap;
}
.hero__title em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.14em;
  background:linear-gradient(90deg,rgba(62,163,92,.28),rgba(185,113,63,.28));
  border-radius:99px; z-index:-1;
  transform:scaleX(0); transform-origin:left;
  animation:underline 1.1s .7s var(--ease) forwards;
}
@keyframes underline{ to{ transform:scaleX(1) } }
.hero__title-sub{
  display:block; font-size:.58em; line-height:1.25; color:var(--ink-2);
  margin-top:.28em; letter-spacing:-.02em;
}

.hero__lead{ font-size:1.06rem; max-width:56ch; margin-bottom:32px; }
.hero__lead strong{ color:var(--ink); font-weight:600; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:38px; }

.hero__trust{
  display:flex; flex-wrap:wrap; gap:10px 12px;
  padding-top:26px; border-top:1px solid var(--line);
}
.hero__trust li{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.845rem; font-weight:500; color:var(--ink-2);
  background:rgba(255,255,255,.7); border:1px solid var(--line);
  padding:8px 15px; border-radius:100px;
  transition:transform .35s var(--ease), border-color .3s ease, background .3s ease;
}
.hero__trust li:hover{ transform:translateY(-2px); border-color:var(--green); background:#fff; }
.ht__ico{ color:var(--green); font-size:.9em; }

/* --- Hero kolaž --- */
.hero__art{ position:relative; aspect-ratio:1/1.02; }
.hero__img{ margin:0; position:absolute; overflow:hidden; box-shadow:var(--shadow-xl); }
.hero__img img{ width:100%; height:100%; object-fit:cover; }
.hero__img--main{
  inset:0 0 14% 8%;
  border-radius:var(--r-xl) var(--r-xl) 140px var(--r-xl);
  animation:heroFloat 9s ease-in-out infinite;
}
.hero__img--small{
  width:44%; aspect-ratio:1; left:-4%; bottom:0;
  border-radius:var(--r-l) var(--r-l) var(--r-l) 90px;
  border:7px solid var(--cream);
  animation:heroFloat 7.5s .8s ease-in-out infinite reverse;
}
@keyframes heroFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

.hero__badge{
  position:absolute; top:6%; right:-2%;
  background:#fff; border-radius:22px; padding:16px 20px;
  box-shadow:var(--shadow-l); text-align:center; line-height:1.2;
  animation:heroFloat 8s .4s ease-in-out infinite;
}
.hero__badge-stars{ color:var(--copper); font-size:.82rem; letter-spacing:2px; }
.hero__badge strong{
  display:block; font-family:var(--ff-display); font-size:1.85rem; color:var(--ink); line-height:1;
  margin:4px 0 2px;
}
.hero__badge span{ font-size:.7rem; color:var(--muted); letter-spacing:.02em; }

.hero__chip{
  position:absolute; bottom:12%; right:-3%;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--ink); color:#fff; font-size:.8rem; font-weight:500;
  padding:11px 18px; border-radius:100px; box-shadow:var(--shadow-l);
  animation:heroFloat 7s 1.2s ease-in-out infinite reverse;
  white-space:nowrap;
}
.pulse{
  width:8px; height:8px; border-radius:50%; background:var(--wa); flex:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.7); animation:ring 2.2s infinite;
}
@keyframes ring{ 70%{ box-shadow:0 0 0 10px rgba(37,211,102,0) } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) } }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:22px; height:36px; border:1.5px solid var(--line); border-radius:20px;
}
.hero__scroll span{
  position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:3px;
  background:var(--green); transform:translateX(-50%);
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{ opacity:0; transform:translate(-50%,0) } 30%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,13px) } }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  background:var(--ink); color:rgba(255,255,255,.9);
  padding:17px 0; overflow:hidden; position:relative;
}
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:110px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,var(--ink),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--ink),transparent); }
.marquee__track{ display:flex; width:max-content; animation:scrollX 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__group{ display:flex; align-items:center; gap:26px; padding-right:26px; }
.marquee__group span{
  font-family:var(--ff-display); font-style:italic; font-size:1.05rem; white-space:nowrap;
}
.marquee__group i{ color:var(--green); font-style:normal; font-size:.8rem; }
@keyframes scrollX{ to{ transform:translateX(-50%) } }

/* =========================================================
   SEKCIJE — opšte
   ========================================================= */
.section{ padding:clamp(72px,9vw,132px) 0; position:relative; }
.section--sand{ background:var(--sand); }
.section--ink{ background:var(--ink); color:rgba(255,255,255,.78); }

.sec-head{ max-width:760px; margin-bottom:clamp(44px,5vw,68px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow{ justify-content:center; }
.sec-head--split{
  max-width:none; display:grid; grid-template-columns:1.15fr .85fr;
  gap:40px; align-items:end;
}
.sec-head__lead{ margin-top:20px; font-size:1.05rem; }
.sec-head__lead--light{ color:rgba(255,255,255,.72); }

/* =========================================================
   O NAMA
   ========================================================= */
.about__grid{
  display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(44px,6vw,90px); align-items:center;
}
.about__art{ position:relative; padding-bottom:70px; }
.about__stack{ position:relative; }
.about__img{ margin:0; overflow:hidden; border-radius:var(--r-l); box-shadow:var(--shadow-l); }
.about__img img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.about__img--float{
  position:absolute; right:-9%; bottom:-36px; width:52%;
  border-radius:var(--r-m); border:8px solid var(--cream); box-shadow:var(--shadow-l);
}
.about__img--float img{ aspect-ratio:1; }
.about__quote{
  position:absolute; left:-4%; bottom:-8px; max-width:290px;
  background:var(--ink); color:#fff; padding:24px 26px 26px; border-radius:var(--r-m);
  font-family:var(--ff-display); font-style:italic; font-size:1.02rem; line-height:1.45;
  box-shadow:var(--shadow-l);
}
.about__quote-mark{
  display:block; font-size:3rem; line-height:.5; color:var(--green); margin-bottom:14px;
}

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin:36px 0 30px; padding:26px 0; border-block:1px solid var(--line);
}
.stat__num{
  display:block; font-family:var(--ff-display); font-weight:400;
  font-size:clamp(30px,3vw,44px); line-height:1; color:var(--green-deep); letter-spacing:-.02em;
}
.stat span{ display:block; font-size:.82rem; color:var(--muted); margin-top:8px; letter-spacing:.01em; }

/* =========================================================
   PREDNOSTI
   ========================================================= */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-m);
  padding:34px 28px 32px; position:relative; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s ease;
}
.card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--green),var(--copper));
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-l); border-color:transparent; }
.card:hover::before{ transform:scaleX(1); }
.card__ico{
  width:56px; height:56px; border-radius:18px; margin-bottom:22px;
  display:grid; place-items:center;
  background:var(--green-soft); color:var(--green-deep);
  transition:transform .5s var(--ease), background .4s ease, color .4s ease;
}
.card__ico svg{ width:27px; height:27px; }
.card:hover .card__ico{ transform:rotate(-8deg) scale(1.08); background:var(--ink); color:#fff; }
.card h3{
  font-family:var(--ff-display); font-weight:500; font-size:1.16rem; line-height:1.25;
  color:var(--ink); margin-bottom:11px; letter-spacing:-.015em;
}
.card p{ font-size:.925rem; line-height:1.65; }

/* =========================================================
   USLUGE
   ========================================================= */
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-l);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-l); }
.svc--wide{ grid-column:span 2; flex-direction:row; }
.svc__media{ width:44%; flex:none; overflow:hidden; }
.svc__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.svc--wide:hover .svc__media img{ transform:scale(1.07); }
.svc__body{ padding:32px 30px 34px; display:flex; flex-direction:column; gap:12px; }
.svc--wide .svc__body{ justify-content:center; }
.svc__num{
  font-family:var(--ff-display); font-size:.82rem; font-weight:600; letter-spacing:.16em;
  color:var(--copper);
}
.svc h3{
  font-family:var(--ff-display); font-weight:500; font-size:clamp(19px,1.6vw,24px);
  line-height:1.2; color:var(--ink); letter-spacing:-.02em;
}
.svc p{ font-size:.94rem; }
.svc__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.svc__tags li{
  font-size:.78rem; font-weight:500; color:var(--green-deep);
  background:var(--green-soft); padding:6px 13px; border-radius:100px;
}
.svc--accent{ background:var(--ink); border-color:var(--ink); }
.svc--accent h3{ color:#fff; }
.svc--accent p{ color:rgba(255,255,255,.72); }
.svc--accent .svc__num{ color:var(--copper-lt); }
.svc--accent .link-arrow{ margin-top:6px; }

/* =========================================================
   TRANSFORMACIJE — slider
   ========================================================= */
.transform{ overflow:hidden; }
.slider{ position:relative; }
.slider__viewport{
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; padding-inline:max(22px, calc((100vw - var(--wrap)) / 2));
}
.slider__viewport::-webkit-scrollbar{ display:none; }
.slider__viewport.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.slider__track{ display:flex; gap:20px; padding-bottom:6px; width:max-content; }

.shot{
  margin:0; flex:none; width:clamp(250px,25vw,330px);
  border-radius:var(--r-m); overflow:hidden; position:relative;
  scroll-snap-align:center; background:#0d252d;
  box-shadow:var(--shadow-l);
  transition:transform .5s var(--ease);
}
.shot img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .5s ease;
  user-select:none; -webkit-user-drag:none;
}
.shot:hover img{ transform:scale(1.05); }
.shot figcaption{
  position:absolute; inset:auto 0 0 0; padding:38px 20px 18px;
  background:linear-gradient(0deg,rgba(9,32,39,.92),transparent);
  color:#fff; font-size:.85rem; font-weight:500; letter-spacing:.01em;
}
.shot::before{
  content:"PRIJE"; position:absolute; top:14px; left:14px; z-index:2;
  font-size:.62rem; font-weight:700; letter-spacing:.14em;
  background:rgba(9,32,39,.62); backdrop-filter:blur(6px);
  color:#fff; padding:6px 11px; border-radius:100px;
}
.shot::after{
  content:"POSLIJE"; position:absolute; bottom:56px; right:14px; z-index:2;
  font-size:.62rem; font-weight:700; letter-spacing:.14em;
  background:var(--green); color:#fff; padding:6px 11px; border-radius:100px;
}

.slider__nav{
  display:flex; align-items:center; justify-content:center; gap:20px; margin-top:36px;
}
.slider__btn{
  width:50px; height:50px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.24); color:#fff;
  display:grid; place-items:center;
  transition:background .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.slider__btn svg{ width:20px; height:20px; }
.slider__btn:hover{ background:var(--green); border-color:var(--green); transform:scale(1.08); }
.slider__dots{ display:flex; gap:8px; }
.slider__dots button{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.3);
  transition:width .4s var(--ease), background .3s ease;
}
.slider__dots button.is-on{ width:26px; border-radius:6px; background:var(--green); }

/* =========================================================
   ZA NAJMLAĐE
   ========================================================= */
.kids{
  background:
    radial-gradient(70% 60% at 100% 0%, var(--copper-soft), transparent 70%),
    var(--cream);
}
.kids__grid{
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(44px,6vw,86px); align-items:center;
}
.kids__list{ margin:34px 0 34px; display:grid; gap:20px; }
.kids__list li{ display:flex; gap:15px; align-items:flex-start; }
.kids__ico{
  width:30px; height:30px; flex:none; border-radius:50%; margin-top:2px;
  display:grid; place-items:center; font-size:.7rem;
  background:var(--green-soft); color:var(--green-deep);
}
.kids__list strong{
  display:block; color:var(--ink); font-weight:600; font-size:1rem; margin-bottom:3px;
}
.kids__list div{ font-size:.94rem; }

.kids__art{ position:relative; }
.kids__img{ margin:0; overflow:hidden; border-radius:var(--r-l); box-shadow:var(--shadow-xl); }
.kids__img--a img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%; }
.kids__img--b{
  position:absolute; left:-11%; bottom:-9%; width:50%;
  border-radius:var(--r-m); border:8px solid var(--cream);
}
.kids__img--b img{ width:100%; aspect-ratio:1; object-fit:cover; }
.kids__sticker{
  position:absolute; top:-22px; right:-14px;
  width:104px; height:104px; border-radius:50%;
  background:var(--copper); color:#fff;
  display:grid; place-items:center; text-align:center;
  font-family:var(--ff-display); font-style:italic; font-size:.92rem; line-height:1.2;
  box-shadow:var(--shadow-l);
  animation:wobble 6s ease-in-out infinite;
}
@keyframes wobble{ 0%,100%{ transform:rotate(-8deg) } 50%{ transform:rotate(8deg) } }

/* =========================================================
   AMBIJENT — galerija
   ========================================================= */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:196px; gap:16px;
}
.gal{
  margin:0; position:relative; overflow:hidden; border-radius:var(--r-m);
  box-shadow:var(--shadow-m);
}
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gal:hover img{ transform:scale(1.08); }
.gal--tall{ grid-row:span 2; }
.gal--wide{ grid-column:span 2; }
.gal figcaption{
  position:absolute; inset:auto 0 0 0; padding:34px 18px 16px;
  background:linear-gradient(0deg,rgba(9,32,39,.85),transparent);
  color:#fff; font-size:.83rem; font-weight:500;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .45s var(--ease);
}
.gal:hover figcaption{ opacity:1; transform:translateY(0); }

/* =========================================================
   ISKUSTVA
   ========================================================= */
/* 3 + 2 raspored — druga vrsta centrirana, bez praznina */
.testi__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; align-items:start; }
.quote{
  grid-column:span 2; margin:0;
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-m);
  padding:30px 28px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s ease;
}
.quote:nth-child(4){ grid-column:2 / span 2; }
.quote:nth-child(5){ grid-column:4 / span 2; }
.quote:hover{ transform:translateY(-5px); box-shadow:var(--shadow-l); border-color:transparent; }
.quote__stars{ color:var(--copper); font-size:.85rem; letter-spacing:3px; margin-bottom:14px; }
.quote blockquote{
  margin:0 0 20px; font-family:var(--ff-display); font-weight:300;
  font-size:1.02rem; line-height:1.5; color:var(--ink); letter-spacing:-.01em;
  flex:1;
}
.quote--lg blockquote{ font-size:1.12rem; }
.quote figcaption{ display:flex; align-items:center; gap:11px; font-size:.9rem; color:var(--muted); }
.quote figcaption b{ color:var(--ink); font-weight:600; }
.av{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:600; font-size:.9rem;
  background:linear-gradient(135deg,var(--green-soft),var(--copper-soft)); color:var(--green-deep);
}

/* =========================================================
   CTA
   ========================================================= */
.cta{
  position:relative; padding:clamp(80px,10vw,140px) 0; text-align:center;
  overflow:hidden; color:#fff;
}
.cta__bg{ position:absolute; inset:0; z-index:0; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; transform:scale(1.04); }
.cta__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 50% 50%, rgba(11,36,44,.55) 0%, rgba(11,36,44,.9) 100%),
    linear-gradient(120deg,rgba(11,36,44,.88) 0%,rgba(11,36,44,.72) 55%,rgba(185,113,63,.5) 100%);
}
.cta__inner{ position:relative; z-index:1; max-width:820px; }
.cta__inner .eyebrow{ justify-content:center; }
.cta__lead{ margin:22px auto 0; max-width:60ch; color:rgba(255,255,255,.82); font-size:1.05rem; }
.cta__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.cta__note{ margin-top:20px; font-size:.85rem; color:rgba(255,255,255,.55); }

/* =========================================================
   KONTAKT
   ========================================================= */
.contact__grid{
  display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(40px,5vw,72px); align-items:center;
}
.info{ display:grid; gap:26px; margin:34px 0 32px; }
.info li{ display:flex; gap:16px; align-items:flex-start; }
.info__ico{
  width:46px; height:46px; flex:none; border-radius:14px;
  display:grid; place-items:center;
  background:var(--green-soft); color:var(--green-deep);
  transition:transform .45s var(--ease);
}
.info__ico svg{ width:21px; height:21px; }
.info__ico svg[fill="none"]{ fill:none; }
.info li:hover .info__ico{ transform:scale(1.08) rotate(-6deg); }
.info strong{ display:block; color:var(--ink); font-weight:600; font-size:.83rem;
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:5px; }
.info a{ color:var(--ink-soft); border-bottom:1px solid transparent; transition:.3s; }
.info a:hover{ color:var(--green-deep); border-bottom-color:var(--green); }

.hours{ width:100%; max-width:340px; font-size:.94rem; }
.hours td{ padding:3px 0; }
.hours td:first-child{ padding-right:28px; white-space:nowrap; }
.hours td:last-child{ text-align:right; font-weight:600; color:var(--ink); }
.hours--off td:last-child{ color:var(--muted); font-weight:500; }

.contact__map{
  border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-l);
  border:8px solid var(--white);
}
.contact__map iframe{
  width:100%; height:clamp(340px,44vh,470px); border:0;
  filter:grayscale(.35) contrast(1.02);
  transition:filter .6s ease;
}
.contact__map:hover iframe{ filter:none; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); color:rgba(255,255,255,.66); }
.footer__inner{
  display:grid; grid-template-columns:1fr auto 1fr; gap:36px; align-items:center;
  padding:52px 0;
}
.footer__brand{ display:flex; align-items:center; gap:13px; color:#fff; }
.footer__brand .brand__mark{ width:32px; height:38px; }
.footer__brand strong{ display:block; font-weight:600; letter-spacing:-.01em; }
.footer__brand span{
  font-family:var(--ff-display); font-style:italic; font-size:.78rem; color:rgba(255,255,255,.5);
}
.footer__nav{ display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:center; }
.footer__nav a{ font-size:.9rem; transition:color .3s; }
.footer__nav a:hover{ color:var(--green); }
.footer__contact{ text-align:right; display:grid; gap:4px; font-size:.88rem; }
.footer__contact a{ color:#fff; font-weight:600; font-size:1.05rem; }
.footer__contact a:hover{ color:var(--green); }
.footer__bar{ border-top:1px solid rgba(255,255,255,.1); padding:18px 0; }
.footer__bar .wrap{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:.8rem; color:rgba(255,255,255,.42);
}

/* =========================================================
   FAB — plutajući WhatsApp
   ========================================================= */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,var(--wa),var(--wa-deep)); color:#fff;
  padding:14px 20px; border-radius:100px; font-weight:600; font-size:.92rem;
  box-shadow:0 16px 38px -12px rgba(30,184,85,.7);
  opacity:0; transform:translateY(20px) scale(.9); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .4s ease;
}
.fab.is-on{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ box-shadow:0 22px 48px -14px rgba(30,184,85,.85); transform:translateY(-3px); }
.fab svg{ width:22px; height:22px; fill:currentColor; flex:none; }

/* =========================================================
   ANIMACIJE OTKRIVANJA
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  will-change:opacity, transform;
}
.reveal--left{ transform:translate(-38px,18px); }
.reveal--right{ transform:translate(38px,18px); }
.reveal--d1{ transition-delay:.09s }
.reveal--d2{ transition-delay:.18s }
.reveal--d3{ transition-delay:.27s }
.reveal--d4{ transition-delay:.36s }
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .nav__links{ gap:20px; }
  .nav__links a{ font-size:.875rem; }
  .nav__phone{ display:none; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .testi__grid{ grid-template-columns:repeat(4,1fr); }
  .quote:nth-child(4),.quote:nth-child(5){ grid-column:span 2; }
  .gallery{ grid-auto-rows:170px; }
}

@media (max-width:940px){
  .nav__links{
    position:fixed; inset:0 0 auto 0; top:0; padding:98px 26px 34px;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); box-shadow:var(--shadow-l);
    transform:translateY(-102%); transition:transform .55s var(--ease);
    margin:0;
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:1.05rem; }
  .nav__links a::after{ display:none; }
  .nav__phone-m{ display:block; color:var(--green-deep) !important; font-weight:700; border-bottom:0 !important; }
  .nav__burger{ display:block; }
  .nav__actions{ margin-left:auto; }

  .hero{ padding-top:118px; }
  .hero__inner{ grid-template-columns:1fr; gap:56px; }
  .hero__art{ max-width:520px; margin-inline:auto; width:100%; aspect-ratio:1/1.05; }
  .hero__badge{ right:0; }
  .hero__chip{ right:0; }
  .hero__scroll{ display:none; }

  .about__grid,.kids__grid,.contact__grid{ grid-template-columns:1fr; gap:56px; }
  .about__art{ max-width:520px; margin-inline:auto; width:100%; }
  .kids__art{ max-width:460px; margin-inline:auto; width:100%; }
  .about__quote{ left:0; }
  .sec-head--split{ grid-template-columns:1fr; gap:18px; align-items:start; }

  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .svc--wide{ grid-column:span 2; }

  .footer__inner{ grid-template-columns:1fr; text-align:center; gap:26px; justify-items:center; }
  .footer__contact{ text-align:center; }
}

@media (max-width:680px){
  .wrap{ width:calc(100% - 36px); }
  .nav__inner{ width:calc(100% - 36px); gap:12px; }
  .hero__inner{ width:calc(100% - 36px); }

  .brand__tag{ display:none; }
  .brand__name{ font-size:.95rem; }

  /* Navigacija: CTA postaje kompaktno dugme sa ikonom */
  .nav__cta .btn__label{ display:none; }
  .nav__cta{ padding:11px; border-radius:50%; }
  .nav__cta svg{ width:20px; height:20px; }
  .nav__actions{ gap:8px; }

  /* Bez bočnog pomjeranja pri otkrivanju — da ništa ne izlazi iz okvira */
  .reveal--left,.reveal--right{ transform:translateY(28px); }
  .btn--lg{ padding:16px 24px; font-size:.94rem; width:100%; }
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
  .hero__trust li{ font-size:.79rem; padding:7px 12px; }
  .hero__img--main{ inset:0 0 16% 10%; border-radius:var(--r-l) var(--r-l) 90px var(--r-l); }
  .hero__badge{ padding:12px 15px; }
  .hero__badge strong{ font-size:1.45rem; }
  .hero__chip{ font-size:.72rem; padding:9px 14px; bottom:16%; }

  .cards{ grid-template-columns:1fr; }
  .services__grid{ grid-template-columns:1fr; }
  .svc--wide{ grid-column:auto; flex-direction:column; }
  .svc__media{ width:100%; aspect-ratio:16/10; }
  .testi__grid{ grid-template-columns:1fr; }
  .quote,.quote:nth-child(4),.quote:nth-child(5){ grid-column:1 / -1; }

  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .gal--wide{ grid-column:span 2; }
  .gal figcaption{ opacity:1; transform:none; }

  .stats{ grid-template-columns:1fr; gap:20px; text-align:center; }
  .about__quote{ position:static; max-width:none; margin-top:56px; }
  .about__art{ padding-bottom:0; }
  .about__img--float{ bottom:-30px; right:-3%; width:46%; }

  .kids__sticker{ width:82px; height:82px; font-size:.78rem; top:-14px; right:-6px; }
  .kids__img--b{ left:-6%; }

  .cta__btns .btn{ width:100%; }
  .footer__bar .wrap{ flex-direction:column; text-align:center; }

  .fab__label{ display:none; }
  .fab{ padding:15px; right:16px; bottom:16px; }
}

/* =========================================================
   PRISTUPAČNOST — smanjeno kretanje
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .nav,.fab,.hero__scroll,.marquee,.slider__nav{ display:none; }
  body{ background:#fff; }
}