* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}
#main{
    position: relative;
    overflow: hidden;  
}

#page1{

    height: 39vh;
    width: 100vw;
    position: relative;
    margin: 0 auto;
    
}
#page1>video{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#page2{
    display: flex;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    justify-content: center;
    flex-direction: column;
    /* height: fit-content; */
    width: 100%;
    position: relative;
    padding: 0vh 8vw 5vh 10vw;
    background-color: #ffffff;
    align-content: center;
    align-items: center;
}

.shadow1{
    background-image: url("../../media/pocetna/akomed_under_video_shadowAsset\ 4.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 10%;
    height: 5vh;
}
#page2>h1{
    margin-bottom: 2vh;
    margin-top: 5vh;
    font-weight: 500;
    font-size: clamp(19px, 2vw, 24px);
    color: #808797;
    }
#page2>p{
    font-weight: 500;
    width: 50%;
    color: #808797;
    text-align: center;
}

@media (max-width: 980px){
  .shadow1{
    width: 80%!important;
}

  #page2 p{
    width: 90%;
  }

  .two-grid{
    grid-template-columns: 80%!important;
    row-gap: 3vh;
  }

  #two-grid-v1{
    grid-template-columns: 80%;
    row-gap: 3vh;
  }
}

@media (max-width: 560px){
  #page1{
    height: 50vh;
  }

  .shadow1{
    width: 100%;
  }

  #page2 p{
    width: 90%;
  }

    .two-grid{
    grid-template-columns: 90%;
    width: 100%!important;
  }

    #two-grid-v1{
    grid-template-columns: 90%;
    width: 100%!important;
  }
}


/* =========================
   LAYOUT (kao tvoj)
   ========================= */
.split{
  display:flex;
  flex-direction:row;
  justify-content:center;
  gap:1vw;
}

/* =========================
   BAZA ZA DUGMAD
   ========================= */
.korisnik1,
.osoblje1{
  position:relative;
  padding:1vh 5vw;
  border-radius:2vw;
  overflow:hidden; /* ključno da se maska drži u radiusu */
  transform:translateZ(0); /* micro-optimizacija */
  transition:
    background-color .25s ease,
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1);
  will-change: transform, box-shadow;
}

/* Tekst (ako <p> nasleđuje) */
.korisnik1 p,
.osoblje1 p{
  margin:0;
  font-weight:600;
  letter-spacing:.2px;
}

/* Početne boje */
.korisnik1{
  background:var(--neutral-bg);
  color:var(--neutral-text);
}
.osoblje1{
  background:var(--primary-bg);
  color:var(--primary-text);
}

/* Hover pozadine + suptilan lift */
.korisnik1:hover{
  background:var(--neutral-bg-hover);
}
.osoblje1:hover{
  background:var(--primary-bg-hover);
}

.korisnik1:hover,
.osoblje1:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
}

/* =========================
   PRSTEN (RING) koji se “popunjava” u radiusu
   Tehnika: prsten je ::before (track) + ::after (aktivni, sa shimmer-om).
   Oba odmah prate border-radius (nema “kocke”).
   ========================= */

/* TRACK (blagi, diskretan okvir koji se pojavi na hoveru) */
.korisnik1::before,
.osoblje1::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px; /* debljina bordera */
  background:linear-gradient(90deg,var(--neutral-ring1),var(--neutral-ring2));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transform:scale(1.02);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.osoblje1::before{
  background:linear-gradient(90deg,var(--primary-ring1),var(--primary-ring2));
}

/* AKTIVNI RING (elegantno “popunjavanje” + blagi shimmer) */
.korisnik1::after,
.osoblje1::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(90deg,var(--neutral-ring1),var(--neutral-ring2));
  -webkit-mask:
    /* 1) prsten (izgrize sredinu) */
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transform:scale(1.06); /* počinje mrvicu šire, pa se “nasloni” */
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;

  /* 2) dodatni sloj za shimmer – paralelni linearni gradient */
  /* kombinujemo ga preko blend moda u nastavku */
}
.osoblje1::after{
  background:linear-gradient(90deg,var(--primary-ring1),var(--primary-ring2));
}

/* Shimmer preko blend moda – diskretan, ne “reklamerski” */
.korisnik1::after,
.osoblje1::after{
  background-blend-mode:screen;
}
.korisnik1:hover::after,
.osoblje1:hover::after{
  animation:shimmer 900ms ease-out 60ms both;
}

/* Aktivacija – track i aktivni ring zajedno */
.korisnik1:hover::before,
.osoblje1:hover::before{
  opacity:.5;            /* prigušen trag */
  transform:scale(1.01);
}
.korisnik1:hover::after,
.osoblje1:hover::after{
  opacity:1;             /* glavni ring */
  transform:scale(1);
}

/* Shimmer animacija: lagani preliv preko ivice (deluje kao “popunjavanje”) */
@keyframes shimmer{
  0%{
    box-shadow:
      inset 0 0 0 0 rgba(255,255,255,.0),
      0 0 0 0 rgba(255,255,255,.0);
    filter:brightness(1);
  }
  40%{
    box-shadow:
      inset 0 0 0 0 rgba(255,255,255,.0),
      0 0 24px 2px rgba(255,255,255,.18); /* kratak sjaj */
    filter:brightness(1.03);
  }
  100%{
    box-shadow:
      inset 0 0 0 0 rgba(255,255,255,.0),
      0 0 0 0 rgba(255,255,255,.0);
    filter:brightness(1.0);
  }
}

/* =========================
   FOKUS (tastatura) – UX jasnoća
   ========================= */
a:focus .korisnik1,
a:focus .osoblje1{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,0,0,.06);
}
a:focus .korisnik1::before,
a:focus .korisnik1::after,
a:focus .osoblje1::before,
a:focus .osoblje1::after{
  opacity:1;
  transform:scale(1);
}

/* =========================
   Fallback (ako mask-composite nije podržan)
   ========================= */
@supports not (-webkit-mask-composite:xor){
  .korisnik1:hover,
  .osoblje1:hover{
    border:1px solid var(--neutral-ring2);
  }
  .osoblje1:hover{
    border-color:var(--primary-ring2);
  }
}

/* =========================
   Poštuj reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  .korisnik1,
  .osoblje1,
  .korisnik1::before,
  .osoblje1::before,
  .korisnik1::after,
  .osoblje1::after{
    transition:none !important;
    animation:none !important;
  }
}


/*LINIJA*/

.line{
    margin-top: 10vh;
    width: 100%;
}


/*PROFILI*/

/* ============== TEMA / PALETA (usklađeno sa prethodnim stilom) ============== */
:root{
  --neutral-50:#f8fafc;
  --neutral-100:#f2f4f7;
  --neutral-200:#e6e9ee;
  --neutral-600:#475569;
  --ink:#808797;

  /* kategorije – akcenti (blage, prijatne) */
  --acc-med-1:#8bd1ff;   --acc-med-2:#2b86c5;
  --acc-care-1:#ffd3e1;  --acc-care-2:#ff85a1;
  --acc-phy-1:#c7f1cf;   --acc-phy-2:#4dbd78;
  --acc-home-1:#ffe9b8;  --acc-home-2:#f5b949;

  /* kartice */
  --card-bg: #ffffff;
  --card-text: #0e2a35;
  --ring-soft: rgba(0,0,0,.06);
}

/* ============== SEKCIJA ============== */
.profili{
  width:min(1100px, 92vw);
  margin: clamp(28px, 6vw, 56px) auto;
  margin-top: 13vh;
  font-family: 'Montserrat', sans-serif;
}

.profili-header{
  text-align:center;
  margin-bottom: clamp(16px, 3vw, 28px);
}
.profili-header h2{
  margin:0 0 6px; 
  font-size:clamp(22px, 3.4vw, 30px);
  font-weight:500; 
  letter-spacing:.2px;
  color:var(--ink);
  font-size: 1vw;
  text-transform: uppercase;
}
.profili-header p{
  margin:0;
  color:var(--neutral-600);
  font-size:clamp(14px, 1.6vw, 16px);
}

/* ============== GRID ============== */
.profiles-grid{
  display:grid;
  grid-template-columns: 16vw 16vw 16vw 16vw;
  gap: clamp(12px, 1.8vw, 30px);
  justify-content: center;
  margin-top: 5vh;
}
@media (max-width: 980px){
  .profiles-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .profiles-grid{ grid-template-columns: 1fr; }
}

/* ============== KARTICA ============== */
.profile-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-decoration:none;
  background:
    linear-gradient(180deg, var(--card-bg), var(--neutral-50));
  color:var(--card-text);
  border-radius: clamp(14px, 2vw, 20px);
  padding: clamp(14px, 2.2vw, 18px) clamp(16px, 2.6vw, 22px);
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 6px 14px rgba(0,0,0,.04);
  overflow:hidden;
  transform:translateZ(0);
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    background .35s ease;
}

/* tekst */
.profile-card h3{
  margin:4px 0 0;
  font-size: clamp(16px, 1.9vw, 18px);
  font-weight:700;
  letter-spacing:.2px;
  color: var(--ink);
}
.profile-card .card-sub{
  margin:0 0 6px;
  color:var(--neutral-600);
  font-size: clamp(13px, 1.6vw, 15px);
  line-height:1.45;
}
.profile-card .card-cta{
  margin-top:auto;
  font-size:13px;
  font-weight:600;
  letter-spacing:.25px;
  opacity:.9;
}

/* ikona – mehko, u krugu s blagim akcentom */
.card-icon{
  width:42px; height:42px;
  border-radius:12px;
  display:grid; place-items:center;
  color:#134155;
  background:var(--neutral-100);
}

/* ============== PREMIUM RING (isti princip kao dugmad) ============== */
.profile-card::before,
.profile-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px; /* debljina okvira */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .45s ease, transform .45s ease;
}

/* track – neutralni */
.profile-card::before{
  background: linear-gradient(90deg, #c6ccd3, #808797);
  box-shadow: inset 0 0 0 0 var(--ring-soft);
}

/* aktivni – boja po kategoriji */
.card-med::after { background:linear-gradient(90deg, var(--acc-med-1), var(--acc-med-2)); }
.card-care::after{ background:linear-gradient(90deg, var(--acc-care-1),var(--acc-care-2));}
.card-physio::after{background:linear-gradient(90deg, var(--acc-phy-1), var(--acc-phy-2));}
.card-home::after{ background:linear-gradient(90deg, var(--acc-home-1),var(--acc-home-2));}

/* hover efekat */
.profile-card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 10px 20px rgba(0,0,0,.06),
    0 3px 10px rgba(0,0,0,.05);
  background:
    linear-gradient(180deg, #fff, var(--neutral-100));
}
.profile-card:hover::before{ opacity:.45; transform:scale(1.01); }
.profile-card:hover::after { opacity:1;    transform:scale(1);    }

/* mali shimmer — diskretan, UX-friendly */
.profile-card:hover::after{
  animation:cardShimmer 900ms ease-out 60ms both;
}
@keyframes cardShimmer{
  0%  { filter:brightness(1); }
  45% { filter:brightness(1.04); }
  100%{ filter:brightness(1); }
}

/* ============== KATEGORIJSKI AKCENTI ============== */
/* pozadina ikone dobija blagi ton akcenta, tekst CTA tonirano */
.card-med .card-icon  { background: linear-gradient(180deg, rgba(139,209,255,.22), rgba(43,134,197,.10)); color:#0b3a55; }
.card-care .card-icon { background: linear-gradient(180deg, rgba(255,211,225,.26), rgba(255,133,161,.10)); color:#6a1430; }
.card-physio .card-icon{background: linear-gradient(180deg, rgba(199,241,207,.26), rgba(77,189,120,.10)); color:#10462b; }
.card-home .card-icon { background: linear-gradient(180deg, rgba(255,233,184,.28), rgba(245,185,73,.12)); color:#5a3a00; }

.card-med  .card-cta{ color:#2b86c5; }
.card-care .card-cta{ color:#cc4867; }
.card-physio .card-cta{ color:#2f9661; }
.card-home .card-cta{ color:#c08a1c; }

/* ============== FOKUS (a11y) ============== */
.profile-card:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,0,0,.06);
}
.profile-card:focus::before,
.profile-card:focus::after{
  opacity:1; transform:scale(1);
}

/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion: reduce){
  .profile-card,
  .profile-card::before,
  .profile-card::after{
    transition:none !important;
    animation:none !important;
  }
}



/* UPUSTVO KAKKO FUNKCIONISE*/

/* =========================
   Sekcija
   ========================= */
.hiw{
  width:min(1100px, 92vw);
  margin: clamp(32px, 7vw, 64px) auto;
}

.hiw-head{
  text-align:center;
  margin-bottom: clamp(18px, 3.2vw, 28px);
}
.hiw-head h2{
  margin:0 0 6px;
  font-size: clamp(22px, 1vw, 30px);
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--ink);
  text-transform: uppercase;
}
.hiw-head p{
  margin:0;
  color:var(--neutral-600);
  font-size: clamp(14px, 1.6vw, 16px);
}

/* =========================
   Koraci (grid)
   ========================= */
.hiw-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 18px);
  position:relative;
}

/* Tanki konektor iza kartica (desktop) */
@media (min-width: 860px){
  .hiw-steps::before{
    content:"";
    position:absolute;
    top: 44px; /* centrirano prema .hiw-top visini */
    left: 6%;
    right: 6%;
    height:2px;
    background:linear-gradient(90deg, rgba(139,209,255,.35), rgba(43,134,197,.25));
    border-radius:2px;
    pointer-events:none;
  }
}

@media (max-width: 860px){
  .hiw-steps{ grid-template-columns: 1fr; }
}

/* =========================
   Kartica koraka
   ========================= */
.hiw-card{
  position:relative;
  background: linear-gradient(180deg, var(--card-bg), var(--neutral-50));
  color:#0e2a35;
  border-radius: clamp(14px, 2vw, 20px);
  padding: clamp(16px, 2.4vw, 22px);
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 6px 14px rgba(0,0,0,.04);
  overflow:hidden;
  transform: translateZ(0);
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    background .35s ease;
}

/* Zaglavlje kartice: broj + ikona */
.hiw-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  position:relative;
  z-index:1;
}
.hiw-num{
  display:inline-grid;
  place-items:center;
  width:36px; height:36px;
  border-radius:12px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.3px;
  color:#0a2f48;
  background: linear-gradient(180deg, rgba(139,209,255,.30), rgba(43,134,197,.14));
  box-shadow: inset 0 -2px 6px rgba(0,0,0,.06);
}
.hiw-icon{
  width:38px; height:38px;
  border-radius:12px;
  display:grid; place-items:center;
  color: var(--hiw-icon);
  background: var(--neutral-100);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

/* Naslov + tekst */
.hiw-card h3{
  margin:4px 0 6px;
  font-size: clamp(16px, 1.9vw, 18px);
  font-weight:700;
  letter-spacing:.2px;
  color: var(--ink);
}
.hiw-sub{
  margin:0;
  color:var(--neutral-600);
  font-size: clamp(13px, 1.6vw, 15px);
  line-height:1.5;
}
.hiw-note{
  display:block;
  margin-top:6px;
  font-size: 12px;
  color:#6b7280;
}

/* Premium ring – odmah prati border-radius (bez “kocke”) */
.hiw-card::before,
.hiw-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px; /* debljina okvira */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .45s ease, transform .45s ease;
}
/* Track (neutralni) */
.hiw-card::before{
  background: linear-gradient(90deg, #c6ccd3, #808797);
}
/* Aktivni ring (akcenat) */
.hiw-card::after{
  background: linear-gradient(90deg, var(--hiw-accent-1), var(--hiw-accent-2));
}

/* Hover efekat (lift + ring + diskretan shimmer) */
.hiw-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 10px 20px rgba(0,0,0,.06),
    0 3px 10px rgba(0,0,0,.05);
  background: linear-gradient(180deg, #fff, var(--neutral-100));
}
.hiw-card:hover::before{ opacity:.45; transform:scale(1.01); }
.hiw-card:hover::after { opacity:1;    transform:scale(1);    }
.hiw-card:hover .hiw-icon{ transform: translateY(-2px); }

/* Diskretan shimmer na ringu */
.hiw-card:hover::after{
  animation: hiwShimmer 900ms ease-out 60ms both;
}
@keyframes hiwShimmer{
  0%  { filter:brightness(1); }
  45% { filter:brightness(1.04); }
  100%{ filter:brightness(1); }
}

/* Fokus (a11y) – ako kartice budu fokusabilne u budućnosti */
.hiw-card:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--ring-soft);
}
.hiw-card:focus::before,
.hiw-card:focus::after{
  opacity:1; transform:scale(1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hiw-card,
  .hiw-card::before,
  .hiw-card::after{
    transition:none !important;
    animation:none !important;
  }
}




/*ZASTI HELP-VIVO*/

/* ===== SPLIT RED ===== */
.zsplit-row{
  width:min(1100px,92vw);
  margin: clamp(32px,7vw,72px) auto;
  display:grid;
  grid-template-columns: minmax(280px, 0.95fr) 1.05fr; /* levo uži, desno širi */
  gap: clamp(16px,2.2vw,28px);
  align-items: stretch;
}

/* ===== LEVA STRANA ===== */
.z-left{
  display:flex;
  flex-direction:column;
  gap: clamp(12px,1.8vw,18px);
  padding: clamp(16px,2.4vw,22px);
  background: linear-gradient(180deg, var(--card-bg), var(--neutral-50));
  border-radius: clamp(14px,2vw,20px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.04);
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), background .35s ease;
}
.z-left-head h2{
  margin:0 0 12px;
  font-size: clamp(22px,3.2vw,28px);
  font-weight:800;
  letter-spacing:.2px;
  color:var(--ink);
  text-align:left; /* više nije centriran */
}
.z-left-head p{
  margin:0;
  color:var(--neutral-600);
  font-size: clamp(14px,1.6vw,16px);
}

/* subtilni ring na hoveru */
.z-left::before,
.z-left::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transform:scale(1.03);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.z-left::before{ background:linear-gradient(90deg, var(--neutral-ring1), var(--neutral-ring2)); }
.z-left::after { background:linear-gradient(90deg, var(--primary-ring1), var(--primary-ring2)); }
.z-left:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.06), 0 3px 10px rgba(0,0,0,.05); background:linear-gradient(180deg,#fff,var(--neutral-100));}
.z-left:hover::before{ opacity:.45; transform:scale(1.01); }
.z-left:hover::after { opacity:1;    transform:scale(1); }

.z-ctas{
  display:flex; flex-wrap:wrap; gap: clamp(10px,1.6vw,16px); margin-top: 5vh;
}
.cta-pill{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 20px; border-radius:999px; text-decoration:none;
  font-weight:600; letter-spacing:.2px; overflow:hidden;
  background: var(--neutral-100); color:#0e2a35;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), background .25s ease;
}
.cta-pill:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04); background:#fff; }
.cta-pill::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(90deg, var(--neutral-ring1), var(--neutral-ring2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transform:scale(1.06); transition:opacity .45s ease, transform .45s ease; pointer-events:none;
}
.cta-pill:hover::before{ opacity:1; transform:scale(1); }

.cta-join{ background: var(--primary-bg); color:#0e2a35; }
.cta-join:hover{ background: var(--primary-bg-hover); }
.cta-join::before{ background:linear-gradient(90deg, var(--primary-ring1), var(--primary-ring2)); }

.z-note{
  margin:0; font-size:13px; color:var(--neutral-600);
}
.z-note a{ color: var(--primary-ring2); text-decoration:underline; text-underline-offset:2px; }

/* ===== DESNA STRANA ===== */
.z-right{
  display:grid;
  grid-template-rows: 1fr 1fr; /* dve kutijice, jednake visine */
  gap: clamp(14px,2vw,20px);
  min-height: 100%;
}

/* Kutijice */
.z-col{
  position:relative;
  background: linear-gradient(180deg, var(--card-bg), var(--neutral-50));
  border-radius: clamp(14px,2vw,20px);
  padding: clamp(16px,2.4vw,22px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.04);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), background .35s ease;
}
.z-col h3{
  margin:2px 0 10px; font-size: clamp(16px,1.9vw,18px); font-weight:700; letter-spacing:.2px; color:var(--ink);
}

/* Ring */
.z-col::before,
.z-col::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transform:scale(1.03); transition:opacity .45s ease, transform .45s ease; pointer-events:none;
}
.z-col::before{ background:linear-gradient(90deg, var(--neutral-ring1), var(--neutral-ring2)); }
.z-col::after { background:linear-gradient(90deg, var(--primary-ring1), var(--primary-ring2)); }
.z-col:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.06), 0 3px 10px rgba(0,0,0,.05); background:linear-gradient(180deg,#fff,var(--neutral-100));}
.z-col:hover::before{ opacity:.45; transform:scale(1.01); }
.z-col:hover::after { opacity:1;    transform:scale(1); }

/* Checklist */
.z-list{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:10px;
}
.z-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size: clamp(13px,1.6vw,15px);
  color:var(--neutral-600);
  line-height:1.5;
}
.z-ico{
  display:inline-grid; place-items:center;
  width:22px; height:22px; min-width:22px; border-radius:7px;
  background: linear-gradient(180deg, rgba(139,209,255,.28), rgba(43,134,197,.10));
  color:#0b3a55;
  box-shadow: inset 0 -2px 6px rgba(0,0,0,.06);
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .zsplit-row{
    grid-template-columns: 1fr; /* stack */
  }
  .z-right{
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
}

/* A11y fokus */
.cta-pill:focus,
.z-col:focus,
.z-left:focus{
  outline:none; box-shadow:0 0 0 4px var(--ring-soft);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .z-left, .cta-pill, .z-col, .z-left::before, .z-left::after, .z-col::before, .z-col::after{
    transition:none !important;
    animation:none !important;
  }
}




/*NASLOVI - RIGHT PEOPLE*/

.naslovleft{
  margin-top: 10vh;
  margin-left: 5vw;
  color:var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(24px, 2vw, 36px);
  font-weight: 200;
}



:root{
  --neutral-50:#f8fafc;
  --neutral-100:#f2f4f7;
  --neutral-600:#475569;

  --card-bg:#ffffff;
  --primary-bg:#71BADA;
  --primary-bg-hover:#69c7e6;
  --primary-ring1:#4ecbff;
  --primary-ring2:#007bbd;

  /* Puna boja koja prekriva sliku na hoveru (možeš menjati po kartici preko --hover-solid) */
  --hover-solid:#0f2f48;
}

/* Sekcija i grid */
.scards{
  width:min(1100px, 92vw);
  margin: clamp(28px, 6vw, 56px) auto;
}
.scards-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.8vw, 18px);
}
@media (max-width: 1000px){
  .scards-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .scards-grid{ grid-template-columns: 1fr; }
}

/* Kartica (osnova) */
.staff-card{
  position:relative;
  display:block;
  border-radius: clamp(14px, 2vw, 20px);
  overflow:hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--neutral-100);
  background-size: cover;        /* koristi sliku sa elementa */
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.04);
  color:#fff;
  text-decoration:none;
  cursor:default;
  transition: box-shadow .35s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
}

/* NEMA zumiranja slike – ne menjamo background-size na hoveru */

/* Overlay puna boja na hoveru – PREKRIVA sliku */
.staff-card::before{
  content:"";
  position:absolute; inset:0;
  background: var(--hover-solid);
  opacity:0;                       /* skriveno u osnovi */
  transition: opacity .30s ease;
  z-index:1;                       /* iznad slike, ispod teksta */
  pointer-events:none;
}
.staff-card:hover::before{ opacity:1; }

/* Premium ring (okvir) */
.staff-card::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(90deg, var(--primary-ring1), var(--primary-ring2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transform: scale(1.03);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.staff-card:hover::after{ opacity:1; transform: scale(1); }

/* Umanji “lift” da ne izgleda kao zoom – koristimo samo shadow */
.staff-card:hover{
  box-shadow: 0 10px 20px rgba(0,0,0,.06), 0 3px 10px rgba(0,0,0,.05);
}

/* Gornji tekst */
.card-top{
  position:absolute; left:14px; right:14px; top:14px;
  display:flex; flex-direction:column; gap:6px; z-index:2;
  transition: opacity .28s ease, transform .28s ease;
}
.card-top h3{
  margin:0; font-weight:800; letter-spacing:.2px;
  font-size: clamp(16px, 1.9vw, 18px);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.role{
  display:inline-block; align-self:flex-start;
  font-size:12px; font-weight:600; letter-spacing:.2px;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(2px);
}

/* Donja traka (osnovno) */
.card-bottom{
  position:absolute; left:0; right:0; bottom:0;
  padding: 12px 14px; z-index:2;
}
.card-bottom-base{
  opacity:1; transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease;
}
.meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size: 13px; font-weight:600;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.meta-item{ display:inline-flex; align-items:center; gap:6px; }
.dot{ width:4px; height:4px; background:rgba(255,255,255,.75); border-radius:50%; display:inline-block; }

/* Hover sloj (pojavljuje se SAMO na hoveru) */
.hover-layer{
  position:absolute; inset:0; z-index:2;
  display:grid; flex-direction:column; justify-content:flex-end;
  padding: 14px;
  opacity:0; pointer-events:none;
  transition: opacity .28s ease;
}
.about{
  margin: 0 0 6px 0; font-size: 14px; line-height: 1.5; color: #eef6fb;
}
.quote{
  margin: 0 0 10px 0; font-size: 13px; line-height: 1.5; color: #d7e7f0;
  font-style: italic; padding-left: 8px;
}
.card-bottom-hover{
  opacity:0; transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease;
}
.chips{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0;
}
.chips li{
  font-size:12px; font-weight:600; letter-spacing:.2px;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color:#f0f7fb;
}

/* Ponašanje teksta – bez preklapanja */
.staff-card:hover .card-top{ opacity:0; transform: translateY(-6px); }
.staff-card:hover .card-bottom-base{ opacity:0; transform: translateY(8px); }
.staff-card:hover .hover-layer{ opacity:1; }
.staff-card:hover .card-bottom-hover{ opacity:1; transform: translateY(0); }

/* ===== 4. KARTICA (CTA) — izolovani stilovi ===== */
.profile-cta-card{
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;                     /* ista dimenzija kao ostale */
  border-radius: clamp(14px, 2vw, 20px);
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #f2f4f7);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.04);
  color: #0e2a35;
  text-decoration: none;
}

/* suptilan “premium” okvir – uvek vidljiv (bez hovera) */
.profile-cta-card::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(90deg, #4ecbff, #007bbd);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.9; transform: scale(1.01);
  pointer-events:none;
}

/* sadržaj */
.profile-cta-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap: 10px;
  padding: 16px;
  text-align: center;
}

.profile-cta-content h3{
  margin: 0;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(16px, 1.9vw, 18px);
  color: #0f172a;
}

.profile-cta-content p{
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
  max-width: 26ch;
}

/* dugme (bez hover efekta) */
.profile-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  background: #71BADA;
  color: #0e2a35;
  border: none;
  box-shadow: none;               /* bez hover senke */
}

/* fokus zbog pristupačnosti */
.profile-cta-btn:focus-visible{
  outline: 4px solid rgba(0,0,0,.06);
  outline-offset: 2px;
}

/* mini link */
.profile-cta-mini{ font-size: 12px; }
.profile-cta-link{
  color: #007bbd;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .staff-card, .staff-card::before, .staff-card::after,
  .hover-layer, .card-bottom-base, .card-bottom-hover, .cta-btn{
    transition: none !important; animation: none !important;
  }
}



/* SLIKA UKOSO*/

.two-grid{
  display: grid;
  grid-template-columns: 25vw 25vw;
  width: min(1200px, 92vw);
  margin: 0 auto;
  margin-top: 10vh;
  justify-content: center;
}

.left-grid img{
  width: 100%;
}


.right-grid h2{
  color:var(--ink);
  font-weight: 300;
  font-size: clamp(19px, 2.2vw, 29px);
  text-transform: uppercase;
}

.right-grid p{
  padding-top: 1vh;
}

.list-usluga{
  text-decoration: none;
  list-style: none;
  margin-top: 1vh;
}

.list-usluga li{
  padding-top: 1vh;
}

.list-usluga strong{
  color:var(--neutral-600);;
}

.right-grid a{
  margin-top: 3vh;
}


#two-grid-v1{
  grid-template-columns: 20vw 25vw;
  border-radius: 2vw;
  gap: 5vw;
}


/* GRID ZA POSLODAVCE NA POČETNOJ */
#two-grid-v2 {
  grid-template-columns: 25vw 20vw;
  border-radius: 2vw;
  gap: 5vw;
}

/* Prilagođavanje za tablete i mobilne uređaje */
@media (max-width: 980px) {
  #two-grid-v2 {
    grid-template-columns: 80%;
    row-gap: 3vh;
  }
  /* Na mobilnom želimo da slika ide ISPOD teksta, kao kod prvog grida */
  #two-grid-v2 .left-grid {
    order: 2;
  }
  #two-grid-v2 .right-grid {
    order: 1;
  }
}

@media (max-width: 560px) {
  #two-grid-v2 {
    grid-template-columns: 90%;
    width: 100% !important;
  }
}