/* =====================================================
   HELP‑VIVO · B2B POSLODAVCI PAGE STYLES (scoped)
   ===================================================== */

:root{scroll-behavior:smooth}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;}
img{max-width:100%; display:block}
.container{width:70vw; max-width:var(--container-max, 1180px); margin:0 auto; padding:0 20px}

h1,h2,h3{margin:0 0 .6rem; letter-spacing:.2px}
h1{font-weight:800; font-size:clamp(28px,4vw,42px)}
h2{font-weight:700; font-size:clamp(22px,3vw,28px)}
h3{font-weight:600; font-size:18px}
.muted{color:var(--text-weak, #6b7280)}
.small{font-size:.92rem}

/* ===================== Buttons ===================== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:var(--radius-pill, 999px); font-weight:500; border:1px solid transparent; transition:.25s ease; text-decoration:none}
.btn:focus-visible{outline:0; box-shadow:0 0 0 3px var(--primary-ring1,#4ecbff), 0 0 0 6px rgba(0,123,189,.18)}
.btn-primary{background:var(--primary, #71BADA); color:var(--primary-contrast, #0e2a35)}
.btn-primary:hover{background:var(--primary-hover, #69c7e6)}
.btn-ghost{background:var(--white,#fff); border:1px solid var(--neutral-200,#e6e6e6);}
.btn-ghost:hover{background:var(--neutral-100,#f5f7fa)}

/* ===================== HERO (cover) ===================== */
.hp-hero{position:relative; isolation:isolate; padding: 0;}
.hp-hero picture, .hp-hero img{display:block; width:100%; height:60vh; min-height:320px; object-fit:cover}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.05)); z-index:0}
.hero-inner{position:absolute; left:50%; bottom: 32px; transform:translateX(-50%); z-index:1; width:min(960px, calc(100% - 40px)); padding:50px 45px; background:var(--glass, rgba(255,255,255,.75)); backdrop-filter:blur(var(--blur,12px)); border:1px solid var(--ring-soft, rgba(0,0,0,.08)); border-radius:var(--radius-lg,22px); box-shadow:var(--shadow, 0 10px 30px rgba(16,24,40,.06))} 
@media (max-width:720px){ .hero-inner{left:50%; right:auto; bottom:24px; transform:translateX(-50%); width:calc(100% - 32px)} }
.eyebrow{font-weight:300; letter-spacing:.3px}
.glass-badge{display:inline-block; padding:.35rem .7rem; border-radius:999px; color:#fff; /*background: var(--primary); border:1px solid var(--primary-hover)*/}
.hp-hero h1{color: var(--white, #fff); text-shadow:none; padding-top: 1vh;}
.hero-inner .lead{color:var(--white,#fff)}
.hp-hero .hero-actions{display:flex; gap:.6rem; margin-top:2rem;}

/* ===================== SUBNAV (sticky glass) ===================== */
.subnav{position:relative; top:0; z-index:40; backdrop-filter:blur(var(--blur,12px)) saturate(140%); background:var(--glass, rgba(255,255,255,.7)); border-bottom:1px solid var(--ring-soft, rgba(0,0,0,.08))}
.subnav .container{display:flex; gap:.5rem; overflow:auto; white-space:nowrap; padding:.55rem 0;}
#subnav-con{justify-content: center;}
.subnav a{padding:.55rem .9rem; border-radius:var(--radius-pill,999px); border:1px solid var(--ring-soft, rgba(0,0,0,.08)); color:var(--text-weak,#6b7280); font-weight:400; text-decoration:none}
.subnav a[aria-current="true"], .subnav a:hover{color:#71bada; background:var(--neutral-100,#f5f7fa)}

/* ===================== Sections & reveal ===================== */
section{padding:64px 0}
.js .reveal-grid>*{opacity:0; transform:translateY(12px); transition:.6s ease}
.js .reveal-grid.in>*{opacity:1; transform:none}

/* ===================== KAKO FUNKCIONISE (STEPS) ===================== */
#kako .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.step{position:relative; padding:22px; border-radius:var(--radius-lg,20px); background:var(--white,#fff); border:1px solid var(--neutral-200,#e6e6e6); box-shadow:var(--shadow, 0 10px 30px rgba(16,24,40,.06)); overflow:hidden; transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease}
.step:hover{transform:translateY(-6px); box-shadow:0 20px 60px rgba(16,24,40,.14)}
.step h3 { color: var(--primary-dark, #0b1f3e); font-size: 1.2rem; margin-bottom: 10px; }
.step p { color: #475569; font-size: 0.95rem; line-height: 1.5; }

/* ===================== Benefits ===================== */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top: 30px;}
.benefit{display:flex; gap:12px; align-items:flex-start; padding:18px 20px; background:var(--white,#fff); border:1px solid var(--neutral-200,#e6e6e6); border-radius:var(--radius-md,16px); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease}
.benefit:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(16,24,40,.08)}
.benefit .ico{display:inline-grid; place-items:center; width:24px; height:24px; color:var(--primary, #71BADA)}
.benefit .ico::before{content:""; width:24px; height:24px; background:currentColor; -webkit-mask:var(--ico) no-repeat 50% 50% / contain; mask:var(--ico) no-repeat 50% 50% / contain}

.benefits .benefit:nth-child(1){--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");}
.benefits .benefit:nth-child(2){--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");}
.benefits .benefit:nth-child(3){--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");}
.benefits .benefit:nth-child(4){--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");}
.benefits .benefit:nth-child(5){--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15 9 22 9 17 14 19 21 12 17 5 21 7 14 2 9 9 9'/%3E%3C/svg%3E");}
.benefits .benefit:nth-child(6){--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");}

/* ===================== KANDIDATI (TWO-GRID) ===================== */
.two-grid{display: grid; grid-template-columns: 25vw 25vw; width: min(1200px, 92vw); margin: 0 auto; margin-top: 8vh; justify-content: center; gap: 5vw;}
.left-grid img{width: 100%; border-radius: 16px;}
.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{list-style: none; margin-top: 2vh; padding-left: 0;}
.list-usluga li{padding-top: 1.5vh; position: relative; padding-left: 20px;}
.list-usluga li::before{content: "•"; position: absolute; left: 0; color: var(--primary);}
.list-usluga strong{color:var(--neutral-600);}

/* ===================== FAQ ===================== */
#faq{ width: min(1200px, 92vw)!important; margin-bottom: 0!important; padding-bottom: 0!important;}

/* ===================== CTA ===================== */
.cta{padding:64px 0 40px}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--white,#fff); border:1px solid var(--primary,#71BADA); border-radius:var(--radius-lg,20px); box-shadow:var(--shadow,0 10px 30px rgba(16,24,40,.06)); padding:30px; position:relative; overflow:hidden}
.cta-inner::after{content:""; position:absolute; inset:-2px; background:linear-gradient(120deg, transparent 0%, rgba(113, 186, 218, 0.1) 18%, transparent 36%); transform:translateX(-120%); transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.cta-inner:hover::after{transform:translateX(120%)}

/* ===================== Responsive ===================== */
@media (max-width: 1100px){
  #kako .steps{grid-template-columns:repeat(2,1fr)}
  .benefits{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .hero-inner{position: absolute; inset: auto 16px 16px 16px; transform: none; width: auto; padding: 18px 16px; border-radius: 18px; max-height: calc(100vh - 120px); overflow: auto;}
  .hp-hero .hero-actions{flex-direction: column; align-items: stretch;}
  .hp-hero picture, .hp-hero img {height: 70vh;}
  #subnav-con{justify-content: flex-start;}
  .container{width: calc(100% - 32px);}
  .container h2{font-size: x-large!important;}
  #kako .steps{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .two-grid{grid-template-columns: 1fr; gap: 5vh;}
  .cta-inner{flex-direction:column; align-items:flex-start}
}
@media (max-width:395px){
  .hp-hero picture, .hp-hero img {height: 80vh;}
}