/* =====================================================
   HELP‑VIVO · PRONAĐI POSAO — PAGE STYLES (scoped)
   Učitaj PRVO tokens.css (root varijable), pa ovaj fajl.
   Ovaj CSS je bezbedno “page‑scoped” (prefix: .hp-hero, .subnav, .steps, .cat-grid, .glass-card, .pricing, .faq, .cta)
   Sadrži: glass kartice, SVG ikone (CSS mask, bez dodatnih fajlova), hover elevacije + shimmer.
   ===================================================== */

: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}
.bullets{margin:.4rem 0 0 1.1rem}

/* ===================== 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)}
.icon-btn{background:var(--white,#fff); border:1px solid var(--neutral-200,#e6e6e6); border-radius:10px; padding:.35rem .6rem; cursor:pointer}

/* ===================== 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,.35), rgba(0,0,0,.15));*/ 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,.62)); 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:800; letter-spacing:.3px}
.glass-badge{display:inline-block; padding:.35rem .7rem; border-radius:999px; color:#fff; background:var(--glass, rgba(255,255,255,.6)); backdrop-filter:blur(var(--blur,12px)); border:1px solid var(--ring-soft, rgba(0,0,0,.08))}
.hp-hero h1{color:#fff; text-shadow:0 6px 22px rgba(0,0,0,.35)}
/* Override za glass box u hero-u */
.hero-inner h1{text-shadow:none; padding-top: 2vh;}
.hero-inner .lead{color:var(--text-weak,#6b7280)}
.hp-hero .lead{color:#f1f5f9; max-width:920px; padding-top: 1vh;}
.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}


/* ===================== Categories ===================== */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.cat{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}
.cat:hover{transform:translateY(-6px); box-shadow:0 20px 60px rgba(16,24,40,.14)}
/* Čist izgled: nema dijagonalne dekoracije */
.cat::before{display:none}
/* Premium ring kao na početnoj (track + aktivni sa shimmerom) */
.cat::before, .cat::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; pointer-events:none; opacity:0; transform:scale(1.03); transition:opacity .45s ease, transform .45s ease}
.cat::before{background:linear-gradient(90deg, var(--neutral-ring1,#c6ccd3), var(--neutral-ring2,#808797))}
.cat::after{background:linear-gradient(90deg, var(--cat-1, #8bd1ff), var(--cat-2, #2b86c5))}
.cat:hover::before{opacity:.45; transform:scale(1.01)}
.cat:hover::after{opacity:1; transform:scale(1); animation:cardShimmer 900ms ease-out 60ms both}
/* Kategorijske boje (koristiš tonove iz tokens.css) */
.cat-grid>article:nth-child(1){--cat-1: var(--acc-med-1,#8bd1ff);  --cat-2: var(--acc-med-2,#2b86c5)}
.cat-grid>article:nth-child(2){--cat-1: var(--acc-care-1,#ffd3e1); --cat-2: var(--acc-care-2,#ff85a1)}
.cat-grid>article:nth-child(3){--cat-1: var(--acc-phy-1,#c7f1cf);  --cat-2: var(--acc-phy-2,#4dbd78)}
.cat-grid>article:nth-child(4){--cat-1: var(--acc-home-1,#ffe9b8); --cat-2: var(--acc-home-2,#f5b949)}
/* TEKSTOVI SREDJENI */

.cat{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.cat p{
  padding-top: 1vh;
  padding-bottom: 2vh;
}


/* ===================== PREMIUM DEO===================== */
/* ===================== HELP-VIVO PRO (section) ===================== */
#pro.pro-section { padding:64px 0 }
#pro .pro-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;  /* više prostora tekstu */
  gap: 24px;
  align-items: center;
}

/* Tekstualni panel — premium glass */
#pro .pro-copy {
  position: relative;
  padding: 24px;
  border-radius: var(--radius-lg, 20px);
  background: var(--glass, rgba(255,255,255,.6));
  backdrop-filter: blur(var(--blur, 12px));
  border: 1px solid var(--ring-soft, rgba(0,0,0,.08));
  box-shadow: var(--shadow, 0 10px 30px rgba(16,24,40,.06));
}
#pro .pro-badge {
  display:inline-block;
  padding:.35rem .7rem;
  border-radius: 999px;
  font-weight: 800;
  background: var(--glass, rgba(255,255,255,.65));
  border: 1px solid var(--ring-soft, rgba(0,0,0,.08));
  margin-bottom:.35rem;
}
#pro .pro-copy h2 { margin: .2rem 0 .5rem; }
#pro .pro-copy .lead { margin-bottom: .9rem; }

/* Lista benefita sa check ikonama (CSS mask, bez dodatnih fajlova) */
#pro .pro-list { margin:.4rem 0 1.0rem 0; padding:0; list-style:none; display:grid; gap:.45rem }
#pro .pro-list li {
  position:relative; padding-left:28px; color:var(--text-weak,#6b7280);
}
#pro .pro-list li::before{
  content:""; position:absolute; left:0; top:2px; width:18px; height:18px;
  background: var(--primary, #71BADA);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
}

/* Uslovi */
#pro .pro-verify h3 { font-size: 16px; margin: .5rem 0 .2rem; }
#pro .pro-verify p { margin:0 }

/* CTA */
#pro .pro-actions { display:flex; gap:.6rem; margin-top:.9rem }

/* Slika mockupa */
#pro .pro-media {
  position: relative;
  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 .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
#pro .pro-media picture,
#pro .pro-media img { display:block; width:100% }
#pro .pro-media img {
  aspect-ratio: 4 / 5;         /* 1080x1350 = 4:5 */
  object-fit: cover;
}
#pro .pro-media::after{
  /* diskretan premium ring na hover (isti jezik kao kategorije, bez shimmera) */
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(var(--primary,#71BADA), var(--primary,#71BADA)) top left,
    linear-gradient(var(--primary,#71BADA), var(--primary,#71BADA)) top right,
    linear-gradient(var(--primary,#71BADA), var(--primary,#71BADA)) bottom right,
    linear-gradient(var(--primary,#71BADA), var(--primary,#71BADA)) bottom left;
  background-repeat:no-repeat;
  background-size:0% 2px, 2px 0%, 0% 2px, 2px 0%;
  transition: background-size .6s ease;
}
#pro .pro-media:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 50px rgba(16,24,40,.12);
}
#pro .pro-media:hover::after{
  background-size:100% 2px, 2px 100%, 100% 2px, 2px 100%;
}

/* Responsive */
@media (max-width: 1100px){
  #pro .pro-grid{ grid-template-columns: 1fr; }
  #pro .pro-media{ order:-1 } /* slika iznad na tabletima/mobilnom */
}



/* ===================== Benefits + SVG ikone ===================== */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.benefit{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; background:var(--neutral-100,#f5f7fa); 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,.10)}
.benefit .ico{display:inline-grid; place-items:center; width:22px; height:22px; color:var(--ink,#0f172a)}
.benefit .ico::before{content:""; width:22px; height:22px; background:currentColor; -webkit-mask:var(--ico) no-repeat 50% 50% / contain; mask:var(--ico) no-repeat 50% 50% / contain}

/* Dodela ikona po redosledu elemenata (bez menjanja HTML-a) */
.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='M20 6L9 17l-5-5'/%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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%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%3Cpath d='M12 5v14M5 12h14'/%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%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(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%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M7 8h10M7 12h6'/%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='M12 21c4.97 0 9-4.03 9-9S16.97 3 12 3 3 7.03 3 12c0 2.12.74 4.07 2 5.6L5 21l3.55-1.06C9.5 20.64 10.73 21 12 21z'/%3E%3C/svg%3E");}




/* ===================== UPUTSTVO REGISTRACIJA ===================== */
/* 5 koraka */
.uputstvo{padding:64px 0}
.uputstvo .u-steps{list-style:none; margin:1.5rem 0 .8rem; padding:0; display:grid; gap:.7rem}
.uputstvo .u-steps li{display:flex; align-items:flex-start; gap:.6rem; font-weight: 300;}
.uputstvo .u-steps .dot{
  flex:0 0 auto; width:32px; height:32px; border-radius:999px;
  display:grid; place-items:center; font:700 11px/1;
  background:var(--neutral-100,#f5f7fa); border:1px solid var(--neutral-200,#e6e6e6)
}
.uputstvo h2{font-size:2.2rem; text-transform:uppercase}
.uputstvo p{font-size: 1.2rem;}
.uputstvo .u-actions{display:flex; gap:.6rem; margin-top:.9rem}
.uputstvo li{font-size: 1.4rem;}

/* ===================== UPUTSTVO: VIDEO + PDF (premium block) ===================== */
.uputstvo .u-media{
    margin: 0 auto;
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 18px;
    width: 85vw;
    align-items: start;
}

.uputstvo .u-card{
  position: relative;
  padding: 18px;
  border-radius: var(--radius-lg, 20px);
  background: var(--glass-strong, rgba(255,255,255,.34));
  backdrop-filter: blur(var(--blur, 12px)) saturate(140%);
  border: 1px solid var(--ring-soft, rgba(0,0,0,.06));
  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;
}

.uputstvo .u-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 55px rgba(16,24,40,.12);
}

/* Diskretan “premium ring” + shimmer (kao cat kartice, ali mirnije) */
.uputstvo .u-card::before,
.uputstvo .u-card::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;
  pointer-events:none;
  opacity:0;
  transform: scale(1.02);
  transition: opacity .45s ease, transform .45s ease;
}
.uputstvo .u-card::before{
  background: linear-gradient(90deg, var(--neutral-ring1,#c6ccd3), var(--neutral-ring2,#808797));
}
.uputstvo .u-card::after{
  background: linear-gradient(90deg, var(--primary-ring1,#4ecbff), var(--primary-ring2,#007bbd));
}
.uputstvo .u-card:hover::before{opacity:.35; transform:scale(1.01)}
.uputstvo .u-card:hover::after{opacity:1; transform:scale(1); animation: cardShimmer 900ms ease-out 60ms both}

/* Header */
.uputstvo .u-card-head{margin-bottom: 12px}
.uputstvo .u-chip{
  display:inline-flex; align-items:center;
  padding:.35rem .65rem;
  border-radius: var(--radius-pill,999px);
  font-weight: 700;
  font-size: .86rem;
  background: var(--white,#fff);
  border: 1px solid var(--neutral-200,#e6e6e6);
}
.uputstvo .u-chip-ghost{
  background: var(--neutral-100,#f2f4f7);
}
.uputstvo .u-title{
  margin: 10px 0 4px;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 1.1rem;
  color: var(--text,#0f172a);
}
.uputstvo .u-sub{margin:0; font-size:.98rem}

/* Video */
.uputstvo .u-video-wrap{
  border-radius: calc(var(--radius-lg, 20px) - 6px);
  overflow: hidden;
  border: 1px solid var(--neutral-200,#e6e6e6);
  background: var(--neutral-100,#f2f4f7);
}

.uputstvo .u-video-el,
.uputstvo .u-iframe{
  width:100%;
  aspect-ratio: 16 / 9;
  display:block;
}

/* Quick facts */
.uputstvo .u-quick{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.uputstvo .u-qitem{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: var(--radius-md,16px);
  background: var(--neutral-100,#f2f4f7);
  border: 1px solid var(--neutral-200,#e6e6e6);
}
.uputstvo .u-qtext{font-size:.96rem; color: var(--text-weak,#475569)}
.uputstvo .u-qtext strong{color: var(--text,#0f172a)}

/* Mini icons (CSS mask) */
.uputstvo .u-ico{
  width:18px; height:18px; flex:0 0 18px;
  background: var(--primary,#71BADA);
  -webkit-mask: 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='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
          mask: 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='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
}
.uputstvo .u-ico2{
  -webkit-mask: 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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
          mask: 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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
}

/* PDF actions */
.uputstvo .u-pdf-actions{
  display:flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.uputstvo .u-btn{width:100%}
@media (min-width: 920px){
  .uputstvo .u-pdf .u-btn{width:auto}
}

/* PDF info box */
.uputstvo .u-mini{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: var(--radius-md,16px);
  background: var(--neutral-100,#f2f4f7);
  border: 1px solid var(--neutral-200,#e6e6e6);
}
.uputstvo .u-mini-title{margin:0 0 8px; font-weight:700; color:var(--text,#0f172a)}
.uputstvo .u-mini-list{margin:0; padding-left: 18px}
.uputstvo .u-mini-list li{font-size:.98rem; padding: 2px 0}

/* Note */
.uputstvo .u-note{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: var(--radius-md,16px);
  background: var(--white,#fff);
  border: 1px solid var(--neutral-200,#e6e6e6);
  color: var(--text-weak,#475569);
}

/* Mobile */
@media (max-width: 920px){
  .uputstvo .u-media{grid-template-columns: 1fr}
  .uputstvo .u-pdf-actions .u-btn{width:100%}
}



/* ===================== BEZBEDNOST I POVERENJE ===================== */

/* 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;
}






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

/* ===================== Pricing ===================== */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.price-card{position:relative; padding:26px; background:var(--card-bg,#fff); border:1px solid var(--neutral-200,#e6e6e6); border-radius:var(--radius-lg,20px); box-shadow:var(--shadow,0 10px 30px rgba(16,24,40,.06)); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease}
.price-card.featured{outline:3px solid var(--primary,#71BADA); outline-offset:0}
.price-card:hover{transform:translateY(-6px); box-shadow:0 22px 60px rgba(16,24,40,.14)}
.price{display:flex; align-items:flex-end; gap:.35rem; margin:.2rem 0 .8rem}
.price strong{font-size:2.1rem}
.badge{display:inline-flex; align-items:center; gap:.35rem; font-weight:800; padding:.35rem .6rem; border-radius:var(--radius-pill,999px); background:var(--neutral-100,#f5f7fa); border:1px solid var(--neutral-200,#e6e6e6)}

/* ===================== 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(--neutral-200,#e6e6e6); border-radius:var(--radius-lg,20px); box-shadow:var(--shadow,0 10px 30px rgba(16,24,40,.06)); padding:22px; position:relative; overflow:hidden}
.cta-inner::after{content:""; position:absolute; inset:-2px; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.5) 18%, transparent 36%); transform:translateX(-120%); transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.cta-inner:hover::after{transform:translateX(120%)}
.legal{margin-top:10px}

/* ===================== Modal ===================== */
.modal{width:min(880px,92%); border:1px solid var(--neutral-200,#e6e6e6); border-radius:var(--radius-lg,20px); box-shadow:var(--shadow,0 10px 30px rgba(16,24,40,.06)); padding:0}
.modal::backdrop{background:rgba(15,23,42,.46); backdrop-filter:blur(4px)}
.modal[open]{animation:pop .18s ease}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--neutral-200,#e6e6e6)}
.modal-body{padding:16px}
@keyframes pop{from{transform:translateY(6px); opacity:.6} to{transform:none; opacity:1}}

/* ===================== Interactions (JS enhancement) ===================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none!important; transition:none!important}
}

/* ===================== Responsive ===================== */
@media (max-width: 1100px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .cta-inner{flex-direction:column; align-items:flex-start}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
}


/* =====================================================
OVERRIDES · Kako funkcioniše (steps) — elegant, bez shimmera
===================================================== */
#kako .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; --step-border: var(--primary, #71BADA)}



@media (max-width:1100px){#kako .steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){#kako .steps{grid-template-columns:1fr}}



@media (max-width: 720px){

  /* HERO BOX – bez razvlačenja, lepo “sedi” pri dnu i skroluje ako je visok */
  .hero-inner{
    position: absolute;
    inset: auto 16px 16px 16px; /* top auto, right 16px, bottom 16px, left 16px */
    transform: none;            /* više ne centriramo translateX */
    width: auto;
    padding: 18px 16px;
    border-radius: 18px;
    max-height: calc(100vh - 120px); /* da ne preseče ekran, već da ima skrol */
    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;
  }

  .benefits {
    grid-template-columns: 1fr;
  }

  #pro .pro-actions{
    flex-direction: column;
  }

  .two-grid{
    grid-template-columns: 1fr;
    gap: 5vh;
  }
}



/*ISPRAVKE*/
@media (max-width:395px){
  .hp-hero picture, .hp-hero img {
        height: 80vh;
    }
}