/* ═══════════════════════════════════════════════════════════
   Stomatološka ordinacija dr. Džemal Tanović — Sarajevo
   SVIJETLA TEMA · brend: ljubičasta → cyan (iz logotipa)
   ═══════════════════════════════════════════════════════════ */

/* ---------- 1. TOKENI ---------- */
:root{
  /* brend */
  --violet:        #6B3FE0;
  --violet-deep:   #5127BE;
  --violet-soft:   #8E6BFF;
  --violet-wash:   #EFEAFF;
  --cyan:          #0FA3C7;
  --cyan-bright:   #2AC6E8;
  --cyan-wash:     #E4F7FC;
  --mint:          #17B79A;

  /* podloge */
  --bg:            #F6F8FE;
  --bg-2:          #FFFFFF;
  --bg-tint:       #EEF2FD;

  /* tekst */
  --text:          #141A2E;
  --text-2:        #4C5670;
  --muted:         #6F7B94;

  /* linije */
  --line:          rgba(20,26,46,.09);
  --line-strong:   rgba(20,26,46,.16);

  /* staklo */
  --glass:         rgba(255,255,255,.72);
  --glass-2:       rgba(255,255,255,.9);

  --wa:            #25D366;
  --wa-deep:       #12A94E;

  --grad:          linear-gradient(120deg, var(--violet) 0%, #4A6BF0 48%, var(--cyan) 100%);
  --grad-soft:     linear-gradient(140deg, var(--violet-wash), var(--cyan-wash));

  /* sjene — mekane, plavičaste, nikad crne */
  --sh-xs: 0 1px 3px rgba(28,38,74,.05);
  --sh-sm: 0 4px 14px -6px rgba(28,38,74,.14);
  --sh:    0 16px 38px -18px rgba(28,38,74,.24);
  --sh-lg: 0 38px 76px -34px rgba(28,38,74,.30);
  --sh-brand: 0 22px 50px -22px rgba(107,63,224,.38);

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --ease:  cubic-bezier(.22,1,.36,1);
  --ease2: cubic-bezier(.65,0,.35,1);

  --shell: 1280px;
  --pad:   clamp(20px, 4vw, 40px);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background:var(--bg);
  color:var(--text-2);
  font-size:clamp(16px, .35vw + 15px, 17.5px);
  line-height:1.75;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
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; }
ul,ol{ list-style:none; }
::selection{ background:rgba(107,63,224,.18); color:var(--text); }

::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--bg-tint); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--violet),var(--cyan)); border-radius:9px; border:3px solid var(--bg-tint); }

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

/* ---------- 3. TIPOGRAFIJA ---------- */
h1,h2,h3,h4,.h1,.h2{
  font-family:'Sora', 'Inter', system-ui, sans-serif;
  color:var(--text);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.025em;
}
.h2{ font-size:clamp(1.8rem, 2.2vw + .78rem, 2.9rem); }
.hero__title{ font-size:clamp(2.25rem, 2.9vw + 1.05rem, 3.6rem); font-weight:700; letter-spacing:-.035em; }
.lead{ font-size:clamp(1.04rem, .5vw + .92rem, 1.22rem); color:var(--text-2); }

.grad-text{
  background:linear-gradient(100deg, var(--violet) 0%, #4361E8 42%, var(--cyan) 82%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shine 9s linear infinite;
}
@keyframes shine{ to{ background-position:220% 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Sora',sans-serif; font-size:.74rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--violet); margin-bottom:1.1rem;
}
.eyebrow::before{
  content:''; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
}
.eyebrow--center::before{ display:none; }

/* ---------- 4. LAYOUT ---------- */
.container{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.container--narrow{ max-width:860px; }
.section{ padding-block:clamp(72px, 9vw, 130px); position:relative; }
.section--tight{ padding-block:clamp(64px, 7vw, 100px); }

.sec-head{ max-width:780px; margin:0 auto clamp(38px,5vw,64px); text-align:center; }
.sec-head__sub{ margin-top:1.1rem; font-size:1.05rem; color:var(--muted); }

/* ---------- 5. POZADINA ---------- */
.bg-layers{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:var(--bg); }
.bg-grid{
  position:absolute; inset:-10%;
  background-image:
    linear-gradient(rgba(60,80,160,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,80,160,.05) 1px, transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 0%, #000 0%, transparent 72%);
}
.aurora{ position:absolute; border-radius:50%; filter:blur(110px); opacity:.62; will-change:transform; }
.aurora--1{ width:58vw; height:58vw; top:-20vw; left:-12vw; background:radial-gradient(circle, rgba(139,102,255,.42), transparent 68%); animation:drift1 26s var(--ease2) infinite alternate; }
.aurora--2{ width:50vw; height:50vw; top:20vw; right:-15vw; background:radial-gradient(circle, rgba(64,197,232,.38), transparent 68%); animation:drift2 32s var(--ease2) infinite alternate; }
.aurora--3{ width:62vw; height:62vw; bottom:-26vw; left:22vw; background:radial-gradient(circle, rgba(120,220,200,.26), transparent 70%); animation:drift3 38s var(--ease2) infinite alternate; }
@keyframes drift1{ to{ transform:translate3d(14vw,10vw,0) scale(1.18); } }
@keyframes drift2{ to{ transform:translate3d(-12vw,14vw,0) scale(.86); } }
@keyframes drift3{ to{ transform:translate3d(10vw,-12vw,0) scale(1.12); } }

.bg-noise{
  position:absolute; inset:0; opacity:.022; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 6. STAKLO ---------- */
.glass{
  background:linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
  border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}

/* ---------- 7. DUGMAD ---------- */
.btn{
  --bh:52px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.62rem;
  min-height:var(--bh); padding:0 1.55rem;
  font-family:'Sora',sans-serif; font-size:.94rem; font-weight:600; letter-spacing:-.01em;
  color:#fff; border-radius:100px; white-space:nowrap;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s ease, border-color .3s ease;
  will-change:transform;
}
.btn--sm{ --bh:42px; font-size:.85rem; padding:0 1.1rem; }
.btn--lg{ --bh:60px; font-size:1rem; padding:0 2rem; }

.btn--wa{
  background:linear-gradient(135deg, var(--wa) 0%, var(--wa-deep) 100%);
  box-shadow:0 12px 30px -12px rgba(18,169,78,.55), inset 0 1px 0 rgba(255,255,255,.32);
}
.btn--wa::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.42) 50%,transparent 75%);
  background-size:250% 100%; background-position:250% 0;
  transition:background-position .85s var(--ease); pointer-events:none;
}
.btn--wa:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -14px rgba(18,169,78,.7), inset 0 1px 0 rgba(255,255,255,.36); }
.btn--wa:hover::after{ background-position:-60% 0; }

.btn--ghost{
  background:var(--bg-2); border:1px solid var(--line-strong); color:var(--text);
  box-shadow:var(--sh-xs);
}
.btn--ghost:hover{ transform:translateY(-3px); border-color:var(--violet); color:var(--violet); box-shadow:0 16px 34px -18px rgba(107,63,224,.5); }

.ico-wa{ width:19px; height:19px; fill:currentColor; flex:none; }

/* ---------- 8. NAVIGACIJA ---------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:1200; background:transparent; }
.scroll-progress span{ display:block; height:100%; width:0%; background:var(--grad); border-radius:0 3px 3px 0; }

.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding-block:16px; transition:padding .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding-block:9px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -22px rgba(28,38,74,.5);
}
.nav__inner{ display:flex; align-items:center; gap:1.5rem; }

.brand{ display:flex; align-items:center; gap:.72rem; flex:none; }
.brand__mark{
  width:44px; height:44px; border-radius:14px; overflow:hidden; flex:none;
  background:#080B16; border:1px solid rgba(20,26,46,.1);
  box-shadow:0 10px 24px -10px rgba(107,63,224,.6);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.brand:hover .brand__mark{ transform:rotate(-6deg) scale(1.07); box-shadow:0 14px 30px -8px rgba(15,163,199,.7); }
.brand__mark img{ width:100%; height:100%; object-fit:cover; }
.brand__text{ display:flex; flex-direction:column; line-height:1.25; }
.brand__text strong{ font-family:'Sora',sans-serif; font-size:1rem; font-weight:700; color:var(--text); letter-spacing:-.02em; }
.brand__text small{ font-size:.71rem; color:var(--muted); letter-spacing:.03em; }
.brand--lg .brand__mark{ width:58px; height:58px; border-radius:17px; }
.brand--lg .brand__text strong{ font-size:1.22rem; }
.brand--lg .brand__text small{ font-size:.82rem; }

.nav__links{ display:flex; align-items:center; gap:.3rem; margin-left:auto; }
.nav__links > a:not(.btn){
  position:relative; padding:.5rem .8rem; font-size:.92rem; font-weight:500; color:var(--text-2);
  border-radius:99px; transition:color .3s ease, background .3s ease;
}
.nav__links > a:not(.btn)::after{
  content:''; position:absolute; left:50%; bottom:3px; width:0; height:2px; border-radius:2px;
  background:var(--grad); transform:translateX(-50%); transition:width .4s var(--ease);
}
.nav__links > a:not(.btn):hover{ color:var(--violet); }
.nav__links > a.is-active{ color:var(--text); font-weight:600; }
.nav__links > a.is-active::after{ width:18px; }
.nav__cta{ flex:none; }
.nav__cta-mobile{ display:none; }

.burger{ display:none; width:44px; height:44px; border-radius:13px; border:1px solid var(--line-strong); background:var(--bg-2); flex:none; box-shadow:var(--sh-xs); }
.burger span{ display:block; width:18px; height:2px; margin:3.6px auto; background:var(--text); border-radius:2px; transition:transform .4s var(--ease), opacity .3s ease; }
.burger.is-open span:nth-child(1){ transform:translateY(5.6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }

/* ---------- 9. HERO ---------- */
.hero{ position:relative; padding-top:clamp(120px,15vh,180px); padding-bottom:clamp(80px,10vw,120px); }
.hero__inner{ display:grid; grid-template-columns:1.16fr .84fr; gap:clamp(30px,3.6vw,56px); align-items:center; }
.hero__inner > *{ min-width:0; }

.badge{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  padding:.52rem 1.05rem; border-radius:99px; margin-bottom:1.7rem;
  background:var(--bg-2); border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  font-size:.81rem; color:var(--text-2); letter-spacing:.01em;
}
.badge strong{ color:var(--text); font-weight:700; }
.badge__stars{ color:#E5960B; letter-spacing:.08em; font-size:.82rem; }
.badge__sep{ width:1px; height:12px; background:var(--line-strong); }

.hero__lead{ margin-top:1.5rem; max-width:56ch; font-size:clamp(1.05rem,.55vw + .92rem,1.2rem); color:var(--text-2); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; }
.hero__sub{ display:flex; align-items:center; gap:.55rem; margin-top:1.3rem; font-size:.9rem; color:var(--muted); }

.dot-live{ width:8px; height:8px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 0 rgba(37,211,102,.55); animation:pulse 2.4s infinite; flex:none; }
@keyframes pulse{ 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__visual{ position:relative; }
.hero__glow{
  position:absolute; inset:-14% -10%; border-radius:50%;
  background:radial-gradient(circle at 55% 45%, rgba(139,102,255,.34), rgba(42,198,232,.2) 46%, transparent 72%);
  filter:blur(50px); animation:breathe 8s ease-in-out infinite;
}
@keyframes breathe{ 50%{ transform:scale(1.09); opacity:.8; } }

.hero__frame{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--sh-lg), 0 0 0 1px var(--line);
  aspect-ratio:5/6;
}
.hero__frame img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1.2s var(--ease); }
.hero__frame:hover img{ transform:scale(1.07); }
.hero__frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 46%, rgba(12,18,40,.42) 100%);
}
.hero__chip{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:2;
  display:flex; align-items:center; gap:.6rem;
  padding:.78rem 1.05rem; border-radius:16px;
  background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 30px -14px rgba(12,18,40,.5);
  font-size:.87rem; color:var(--text); font-weight:600;
}
.hero__chip-ico{ font-size:1.05rem; }
.hero__chip strong{ font-weight:700; }

.hero__float{
  position:absolute; z-index:3; display:flex; flex-direction:column; line-height:1.3;
  padding:.78rem 1.15rem; border-radius:16px;
  background:var(--bg-2); border:1px solid var(--line);
  box-shadow:var(--sh);
}
.hero__float strong{ font-family:'Sora',sans-serif; font-size:1.05rem; color:var(--text); font-weight:700; }
.hero__float span{ font-size:.74rem; color:var(--muted); }
.hero__float--a{ top:8%; left:-6%; animation:float 6.5s ease-in-out infinite; }
.hero__float--b{ bottom:16%; right:-5%; animation:float 7.5s ease-in-out infinite reverse; }
@keyframes float{ 50%{ transform:translateY(-14px); } }

.scroll-hint{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--muted); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; opacity:.8; transition:opacity .3s; }
.scroll-hint:hover{ opacity:1; }
.scroll-hint__mouse{ width:23px; height:35px; border:1.5px solid var(--line-strong); border-radius:12px; display:flex; justify-content:center; padding-top:6px; background:var(--bg-2); }
.scroll-hint__mouse i{ width:3px; height:7px; border-radius:2px; background:var(--violet); animation:wheel 1.9s ease-in-out infinite; }
@keyframes wheel{ 50%{ transform:translateY(9px); opacity:.2; } }

/* ---------- 10. STATISTIKA ---------- */
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); padding:clamp(26px,3vw,42px); gap:1rem; box-shadow:var(--sh); }
.stat{ text-align:center; padding-inline:.5rem; position:relative; }
.stat + .stat::before{ content:''; position:absolute; left:0; top:14%; bottom:14%; width:1px; background:linear-gradient(transparent,var(--line-strong),transparent); }
.stat__num{
  display:block; font-family:'Sora',sans-serif; font-size:clamp(2rem,3vw,2.9rem); font-weight:800; letter-spacing:-.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.stat__label{ display:block; margin-top:.3rem; font-size:.85rem; color:var(--muted); }

/* ---------- 11. SPLIT SEKCIJE ---------- */
.split__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.split__inner > *{ min-width:0; }
.split--rev .split__inner{ direction:rtl; }
.split--rev .split__inner > *{ direction:ltr; }
.split__copy > p{ margin-top:1.05rem; }
.split__copy .btn{ margin-top:1.9rem; }

.media-stack{ position:relative; padding-bottom:52px; padding-right:34px; }
.media-stack__main{ border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-lg); aspect-ratio:4/3; }
.media-stack__main img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.media-stack:hover .media-stack__main img{ transform:scale(1.06); }
.media-stack__sub{
  position:absolute; right:0; bottom:0; width:46%; aspect-ratio:4/3;
  border-radius:var(--r-lg); overflow:hidden; border:4px solid var(--bg);
  box-shadow:var(--sh);
}
.media-stack__sub img{ width:100%; height:100%; object-fit:cover; }
.media-stack__badge{
  position:absolute; left:-10px; top:9%; z-index:3;
  display:flex; flex-direction:column; line-height:1.25;
  padding:.85rem 1.15rem; border-radius:18px;
  background:var(--bg-2); border:1px solid var(--line);
  box-shadow:var(--sh);
}
.media-stack__badge span:last-child{ font-size:.74rem; color:var(--muted); max-width:14ch; }
.media-stack__badge-num{ font-family:'Sora',sans-serif; font-size:1.35rem; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.ticks{ margin-top:1.7rem; display:grid; gap:.78rem; }
.ticks li{ position:relative; padding-left:2.1rem; font-size:.98rem; color:var(--text-2); }
.ticks li::before{
  content:''; position:absolute; left:0; top:.4em; width:21px; height:21px; border-radius:50%;
  background:var(--grad-soft); border:1px solid rgba(107,63,224,.2);
}
.ticks li::after{
  content:''; position:absolute; left:6.2px; top:.72em; width:8px; height:4.5px;
  border-left:2px solid var(--violet); border-bottom:2px solid var(--violet);
  transform:rotate(-45deg);
}

/* potpis doktora */
.signature{
  display:flex; flex-direction:column; gap:.15rem;
  margin-top:1.9rem; padding-left:1.15rem;
  border-left:3px solid; border-image:linear-gradient(180deg,var(--violet),var(--cyan)) 1;
}
.signature__name{
  font-family:'Sora',sans-serif; font-size:1.12rem; font-weight:700; color:var(--text); letter-spacing:-.02em;
}
.signature__role{ font-size:.88rem; color:var(--muted); }

.pills{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.7rem; }
.pill{
  padding:.45rem .95rem; border-radius:99px; font-size:.85rem; color:var(--text-2);
  background:var(--bg-2); border:1px solid var(--line); box-shadow:var(--sh-xs);
  transition:border-color .3s, color .3s, transform .3s var(--ease);
}
.pill:hover{ border-color:var(--violet); color:var(--violet); transform:translateY(-2px); }

/* ---------- 12. KARTICE ---------- */
.cards{ display:grid; gap:1.15rem; }
.cards--4{ grid-template-columns:repeat(4,1fr); }

.card{ position:relative; padding:clamp(24px,2.4vw,34px); overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.card:hover{ transform:translateY(-7px); box-shadow:var(--sh); border-color:rgba(107,63,224,.22); }
.card__ico{
  width:54px; height:54px; border-radius:17px; display:grid; place-items:center; margin-bottom:1.25rem;
  background:var(--grad-soft); border:1px solid rgba(107,63,224,.16);
}
.card__ico svg{ width:26px; height:26px; fill:none; stroke:var(--violet); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.card__title{ font-size:1.1rem; font-weight:700; margin-bottom:.6rem; }
.card p{ font-size:.95rem; color:var(--muted); }
.card__idx{
  position:absolute; top:16px; right:20px; font-family:'Sora',sans-serif; font-size:2.4rem; font-weight:800;
  color:transparent; -webkit-text-stroke:1.4px rgba(20,26,46,.08); line-height:1;
  transition:-webkit-text-stroke-color .5s ease;
}
.card:hover .card__idx{ -webkit-text-stroke-color:rgba(107,63,224,.24); }

/* spotlight prati miš */
.spotlight{ position:relative; }
.spotlight::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(107,63,224,.10), transparent 62%);
  transition:opacity .45s ease;
}
.spotlight:hover::before{ opacity:1; }

/* ---------- 13. USLUGE ---------- */
.services{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.15rem; }
.srv{ position:relative; padding:clamp(26px,2.6vw,38px); overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.srv:hover{ transform:translateY(-7px); box-shadow:var(--sh); border-color:rgba(107,63,224,.22); }
.srv__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.srv__ico{ width:60px; height:60px; border-radius:19px; display:grid; place-items:center; background:var(--grad-soft); border:1px solid rgba(107,63,224,.16); }
.srv__ico svg{ width:29px; height:29px; fill:none; stroke:var(--violet); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.srv__tag{ font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--cyan); padding:.34rem .78rem; border-radius:99px; border:1px solid rgba(15,163,199,.24); background:var(--cyan-wash); }
.srv__title{ font-size:1.28rem; font-weight:700; margin-bottom:.6rem; letter-spacing:-.02em; }
.srv p{ font-size:.97rem; color:var(--muted); }
.srv__link{ display:inline-flex; align-items:center; gap:.45rem; margin-top:1.3rem; font-family:'Sora',sans-serif; font-size:.9rem; font-weight:600; color:var(--violet); }
.srv__link span{ transition:transform .35s var(--ease); }
.srv__link:hover span{ transform:translateX(6px); }

/* ---------- 14. KORACI ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; position:relative; }
.steps::before{
  content:''; position:absolute; top:27px; left:6%; right:6%; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(107,63,224,.22) 12%,rgba(15,163,199,.22) 88%,transparent);
}
.step{ position:relative; }
.step__num{
  position:relative; z-index:2; display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  font-family:'Sora',sans-serif; font-weight:700; font-size:1.08rem; color:#fff; margin-bottom:1.35rem;
  background:linear-gradient(150deg, var(--violet), var(--violet-deep));
  box-shadow:0 0 0 8px var(--bg), var(--sh-brand);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.step:hover .step__num{ transform:translateY(-4px) scale(1.06); box-shadow:0 0 0 8px var(--bg), 0 22px 42px -16px rgba(15,163,199,.7); }
.step__title{ font-size:1.08rem; font-weight:700; margin-bottom:.5rem; }
.step p{ font-size:.94rem; color:var(--muted); }

/* ---------- 15. REZULTATI / PRIJE-POSLIJE ---------- */
.results{ display:grid; grid-template-columns:1.15fr .85fr; gap:1.4rem; align-items:start; }
.ba{ padding:14px; overflow:hidden; box-shadow:var(--sh); }
.ba__stage{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3.4; cursor:ew-resize; user-select:none; touch-action:pan-y; background:var(--bg-tint); }
.ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba__clip{ position:absolute; inset:0; width:50%; overflow:hidden; will-change:width; }
.ba__clip .ba__img{ width:var(--stage-w,100%); }
.ba__tag{
  position:absolute; top:14px; z-index:4; padding:.36rem .85rem; border-radius:99px;
  font-family:'Sora',sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.94); border:1px solid var(--line); color:var(--text);
  box-shadow:0 6px 18px -8px rgba(12,18,40,.5);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.ba__tag--l{ left:14px; }
.ba__tag--r{ right:14px; color:var(--violet); }
.ba__handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px; z-index:5; transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(255,255,255,.4),#fff 12%,#fff 88%,rgba(255,255,255,.4));
  box-shadow:0 0 14px rgba(12,18,40,.45);
}
.ba__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 10px 26px -8px rgba(12,18,40,.45), 0 0 0 6px rgba(107,63,224,.14);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ba__stage:hover .ba__grip{ transform:translate(-50%,-50%) scale(1.08); box-shadow:0 12px 30px -8px rgba(12,18,40,.5), 0 0 0 10px rgba(15,163,199,.16); }
.ba__grip svg{ width:20px; height:20px; fill:none; stroke:var(--violet); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ba__cap{ margin-top:.9rem; padding-inline:.4rem; font-size:.87rem; color:var(--muted); text-align:center; }

.results__side{ display:grid; gap:1.4rem; }
.results__grid-img{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh); }
.results__grid-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.results__grid-img:hover img{ transform:scale(1.05); }
.results__note{ padding:clamp(22px,2.4vw,30px); background:linear-gradient(150deg, var(--violet-wash), var(--cyan-wash)); border-color:rgba(107,63,224,.16); }
.results__note p{ font-family:'Sora',sans-serif; font-size:1.04rem; line-height:1.6; color:var(--text); font-weight:400; font-style:italic; }
.results__note span{ display:block; margin-top:.9rem; font-size:.86rem; font-weight:600; color:var(--violet); }

/* ---------- 16. GALERIJA ---------- */
.gallery{ display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:auto auto; gap:1rem; }
.gallery__item{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-sm); aspect-ratio:4/3; }
.gallery__item--tall{ grid-row:span 2; aspect-ratio:3/4.3; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s ease; }
.gallery__item:hover img{ transform:scale(1.07); filter:saturate(1.08); }

/* ---------- 17. ISKUSTVA (marquee) ---------- */
.marquee{ position:relative; overflow:hidden; padding-block:14px;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{ display:flex; gap:1.15rem; width:max-content; animation:scrollx 52s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

.tsm{ width:min(400px, 78vw); flex:none; padding:clamp(24px,2.4vw,32px); display:flex; flex-direction:column; gap:1rem; transition:box-shadow .4s ease, transform .5s var(--ease); }
.tsm:hover{ box-shadow:var(--sh); transform:translateY(-5px); }
.tsm__stars{ color:#E5960B; letter-spacing:.14em; font-size:.92rem; }
.tsm blockquote{ font-size:.98rem; color:var(--text-2); line-height:1.7; flex:1; }
.tsm figcaption{ display:flex; align-items:center; gap:.75rem; padding-top:.9rem; border-top:1px solid var(--line); }
.tsm figcaption > span:last-child{ display:flex; flex-direction:column; line-height:1.3; }
.tsm figcaption strong{ font-family:'Sora',sans-serif; font-size:.94rem; color:var(--text); font-weight:700; }
.tsm figcaption small{ font-size:.77rem; color:var(--muted); }
.tsm__av{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:'Sora',sans-serif; font-weight:700; color:#fff; font-size:1.02rem;
  background:linear-gradient(150deg,var(--violet),var(--cyan)); box-shadow:0 8px 18px -8px rgba(107,63,224,.6);
}

/* ---------- 18. FAQ ---------- */
.faq{ display:grid; gap:.8rem; }
.faq__item{ padding:0; overflow:hidden; border-radius:var(--r); transition:border-color .4s ease, background .4s ease, box-shadow .4s ease; }
.faq__item[open]{ border-color:rgba(107,63,224,.22); background:linear-gradient(150deg, var(--violet-wash), var(--cyan-wash)); box-shadow:var(--sh-sm); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; list-style:none;
  padding:1.18rem clamp(18px,2vw,26px);
  font-family:'Sora',sans-serif; font-size:1.02rem; font-weight:600; color:var(--text); letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:''; flex:none; width:24px; height:24px; border-radius:50%; border:1px solid rgba(107,63,224,.28);
  background:
    linear-gradient(var(--violet),var(--violet)) center/10px 2px no-repeat,
    linear-gradient(var(--violet),var(--violet)) center/2px 10px no-repeat;
  transition:transform .45s var(--ease), background-size .45s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(180deg); background-size:10px 2px, 0 10px; }
.faq__body{ padding:0 clamp(18px,2vw,26px) 1.35rem; }
.faq__body p{ font-size:.96rem; color:var(--text-2); max-width:70ch; }
.faq__item[open] .faq__body{ animation:faqIn .45s var(--ease) both; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } }

/* ---------- 19. ZAVRŠNI CTA ---------- */
.cta{ padding-block:clamp(50px,7vw,90px); }
.cta__box{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(42px,6vw,84px) clamp(24px,4vw,64px);
  border-radius:var(--r-xl); border:1px solid rgba(107,63,224,.16);
  background:linear-gradient(150deg, #F3EFFF 0%, #F1F6FF 45%, #E9F8FC 100%);
  box-shadow:var(--sh-lg);
}
.cta__glow{
  position:absolute; top:-60%; left:50%; transform:translateX(-50%);
  width:80%; height:150%; border-radius:50%;
  background:radial-gradient(circle, rgba(139,102,255,.3), transparent 62%);
  filter:blur(66px); animation:breathe 9s ease-in-out infinite;
}
.cta__box > *{ position:relative; z-index:2; }
.cta__title{ max-width:19ch; margin-inline:auto; font-size:clamp(2rem, 2.7vw + .85rem, 3.3rem); }
.cta__lead{ max-width:60ch; margin:1.3rem auto 0; color:var(--text-2); font-size:1.06rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.2rem; }
.cta__fine{ margin-top:1.2rem; font-size:.85rem; color:var(--muted); }

/* ---------- 20. FOOTER ---------- */
.footer{ position:relative; padding-top:clamp(56px,6vw,84px); padding-bottom:32px; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(238,242,253,.85)); }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(28px,3.5vw,52px); }
.footer__tag{ margin-top:1.1rem; font-size:.95rem; color:var(--muted); max-width:34ch; }
.footer__socials{ display:flex; gap:.6rem; margin-top:1.3rem; }
.soc{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; border:1px solid var(--line); background:var(--bg-2); box-shadow:var(--sh-xs); transition:transform .4s var(--ease), border-color .3s, box-shadow .3s; }
.soc svg{ width:20px; height:20px; fill:currentColor; color:var(--violet); }
.soc:hover{ transform:translateY(-3px); border-color:var(--violet); box-shadow:var(--sh-sm); }

.footer__h{ font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--violet); margin-bottom:1.05rem; }
.footer__lg{ font-size:1.02rem; color:var(--text); line-height:1.6; font-weight:500; }
.footer__lg a:hover{ color:var(--violet); }
.footer__muted{ margin-top:.6rem; font-size:.88rem; color:var(--muted); }
.footer__link{ display:inline-block; margin-top:.9rem; font-size:.89rem; font-weight:600; color:var(--violet); transition:transform .3s var(--ease); }
.footer__link:hover{ transform:translateX(4px); }
.footer__col .btn{ margin-top:1.1rem; }

.hours{ display:grid; gap:.5rem; }
.hours li{ display:flex; justify-content:space-between; gap:1rem; font-size:.92rem; color:var(--muted); padding-bottom:.5rem; border-bottom:1px dashed var(--line-strong); }
.hours strong{ color:var(--text); font-weight:600; }
.footer__status{ display:flex; align-items:center; gap:.5rem; margin-top:.95rem; font-size:.88rem; color:var(--text-2); }

.map{ margin-top:clamp(38px,4.5vw,60px); padding:10px; overflow:hidden; box-shadow:var(--sh-sm); }
.map iframe{ width:100%; height:clamp(240px,32vw,380px); border:0; border-radius:var(--r); filter:saturate(.72) contrast(1.02); transition:filter .6s ease; }
.map:hover iframe{ filter:saturate(1) contrast(1); }

.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; margin-top:clamp(34px,4vw,54px); padding-top:22px; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted); }

/* ---------- 21. PLUTAJUĆI ELEMENTI ---------- */
.fab-wa{
  position:fixed; right:20px; bottom:20px; z-index:900;
  display:inline-flex; align-items:center; gap:.6rem;
  height:58px; padding:0 20px; border-radius:99px; color:#fff; font-family:'Sora',sans-serif; font-weight:600; font-size:.92rem;
  background:linear-gradient(135deg,var(--wa),var(--wa-deep));
  box-shadow:0 16px 38px -12px rgba(18,169,78,.6), inset 0 1px 0 rgba(255,255,255,.32);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.fab-wa:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 24px 50px -14px rgba(18,169,78,.75); }
.fab-wa svg{ width:24px; height:24px; fill:currentColor; flex:none; position:relative; z-index:2; }
.fab-wa__label{ position:relative; z-index:2; }
.fab-wa__ring{ position:absolute; inset:0; border-radius:99px; border:2px solid rgba(37,211,102,.55); animation:ring 2.6s ease-out infinite; }
@keyframes ring{ 0%{ transform:scale(1); opacity:.8; } 70%,100%{ transform:scale(1.22); opacity:0; } }

.to-top{
  position:fixed; left:20px; bottom:20px; z-index:900; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--line); background:var(--bg-2);
  box-shadow:var(--sh-sm);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, border-color .3s;
}
.to-top.is-on{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ border-color:var(--violet); }
.to-top svg{ width:19px; height:19px; fill:none; stroke:var(--violet); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- 22. PRELOADER ---------- */
.preloader{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
  background:var(--bg); transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.preloader__logo{ width:82px; height:82px; border-radius:24px; overflow:hidden; background:#080B16; box-shadow:0 24px 46px -18px rgba(107,63,224,.6); animation:logoIn .9s var(--ease) both; }
.preloader__logo img{ width:100%; height:100%; object-fit:cover; }
@keyframes logoIn{ from{ opacity:0; transform:scale(.82) rotate(-8deg); } }
.preloader__bar{ width:150px; height:3px; border-radius:3px; background:rgba(20,26,46,.08); overflow:hidden; }
.preloader__bar span{ display:block; height:100%; width:0; background:var(--grad); animation:load 1.1s var(--ease) forwards; }
@keyframes load{ to{ width:100%; } }
.preloader__text{ font-family:'Sora',sans-serif; font-size:.8rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }

/* ---------- 23. REVEAL ANIMACIJE ---------- */
[data-reveal]{ opacity:0; will-change:transform,opacity; transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal="up"]{ transform:translateY(38px); }
[data-reveal="left"]{ transform:translateX(-42px); }
[data-reveal="right"]{ transform:translateX(42px); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal].is-in{ opacity:1; transform:none; }

.tilt{ transform-style:preserve-3d; transition:transform .5s var(--ease); }

/* ---------- 24. RESPONSIVE ---------- */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; gap:44px; }
  .hero__visual{ max-width:520px; margin-inline:auto; width:100%; }
  .hero__float--a{ left:-2%; }
  .hero__float--b{ right:-2%; }
  .cards--4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:2.4rem; }
  .steps::before{ display:none; }
  .results{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:repeat(2,1fr); }
}
/* mobilni meni — uključuje se ranije da se linkovi nikad ne prelome */
@media (max-width:1080px){
  .nav__links{
    position:fixed; inset:0 0 auto; top:0; padding:96px 24px 32px;
    flex-direction:column; align-items:stretch; gap:.3rem;
    background:rgba(255,255,255,.97); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--line); box-shadow:0 20px 44px -26px rgba(28,38,74,.45);
    transform:translateY(-102%); transition:transform .55s var(--ease); margin-left:0;
  }
  .nav__links.is-open{ transform:none; }
  .brand, .burger{ position:relative; z-index:3; }
  .nav__links > a:not(.btn){ padding:.85rem .6rem; font-size:1.06rem; border-bottom:1px solid var(--line); border-radius:0; }
  .nav__links > a:not(.btn)::after{ display:none; }
  .nav__cta{ display:none; }
  .nav__cta-mobile{ display:inline-flex; margin-top:1.1rem; }
  .burger{ display:block; margin-left:auto; }
}

@media (max-width:900px){
  .split__inner{ grid-template-columns:1fr; }
  .split--rev .split__inner{ direction:ltr; }
  .split--rev .split__media{ order:-1; }
  .services{ grid-template-columns:1fr; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); row-gap:1.8rem; }
  .stat:nth-child(3)::before{ display:none; }
  .scroll-hint{ display:none; }
}
@media (max-width:620px){
  /* dugmad se prelamaju umjesto da probijaju ekran */
  .btn{ white-space:normal; text-align:center; line-height:1.3; height:auto; padding-block:.9rem; }
  .hero__actions{ width:100%; }
  .hero__actions .btn, .cta__actions .btn{ width:100%; }
  .cta__actions{ flex-direction:column; align-items:stretch; }

  .cards--4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; row-gap:1.8rem; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .gallery__item--tall{ grid-row:span 1; aspect-ratio:4/3; grid-column:span 2; }
  .footer__top{ grid-template-columns:1fr; }
  .hero__float{ display:none; }
  .media-stack{ padding-right:0; padding-bottom:38px; }
  .media-stack__sub{ width:42%; right:8px; }
  .media-stack__badge{ left:8px; }
  .fab-wa__label{ display:none; }
  .fab-wa{ width:58px; padding:0; justify-content:center; }
  .badge{ font-size:.74rem; padding:.45rem .8rem; }
  .footer__bottom{ flex-direction:column; }
  .stat + .stat::before{ display:none; }
}

/* ---------- 25. SMANJENO KRETANJE ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}