/* Final visual polish for /proizvodi. Structure and copy intentionally unchanged. */
.phase3-products{
  --products-radius:14px;
  --products-border:rgba(24,48,91,.13);
  --products-shadow:0 22px 60px rgba(20,38,72,.08);
}

.phase3-products .phase2-hero{
  padding-top:clamp(58px,7vw,92px);
  padding-bottom:clamp(64px,7vw,96px);
}
.phase3-products .phase2-hero-grid{
  align-items:center;
  gap:clamp(40px,7vw,96px);
}
.phase3-products .phase2-hero-grid .h1{
  max-width:820px;
  line-height:.98;
  letter-spacing:-.045em;
}
.phase3-products .phase2-hero-grid .lede{
  max-width:470px;
  line-height:1.68;
  color:#627089;
}
.phase3-products .phase3-kicker,
.phase3-products .phase2-flagship .mono,
.phase3-products .phase2-product-story .mono,
.phase3-products .phase2-section-heading .mono{
  letter-spacing:.14em;
}

.phase3-products .phase2-products{
  padding-top:clamp(76px,8vw,116px);
  padding-bottom:clamp(78px,8vw,118px);
}

.phase3-products .phase2-flagship{
  border:1px solid rgba(123,153,211,.22);
  border-radius:18px;
  background:
    radial-gradient(circle at 78% 24%,rgba(49,94,251,.10),transparent 26%),
    linear-gradient(135deg,#081425 0%,#0c1a30 100%);
  box-shadow:0 28px 70px rgba(8,20,37,.14);
  overflow:hidden;
}
.phase3-products .phase2-flagship-copy h2{
  margin-top:12px;
}
.phase3-products .phase2-flagship-lead{
  max-width:32ch;
}
.phase3-products .phase2-flagship-copy>p:not(.phase2-flagship-lead){
  max-width:48ch;
}
.phase3-products .phase2-checks{
  margin-top:28px;
  margin-bottom:28px;
}
.phase3-products .phase2-flagship .jpa-demo{
  border-radius:14px;
  border-color:rgba(128,157,214,.30);
  background:rgba(15,29,51,.92);
  box-shadow:0 24px 56px rgba(0,0,0,.20);
}

.phase3-products .phase2-product-secondary{
  gap:26px;
  margin-top:28px;
}
.phase3-products .phase2-product-story{
  border-radius:var(--products-radius);
  border-color:var(--products-border);
  box-shadow:var(--products-shadow);
  overflow:hidden;
}
.phase3-products .phase2-product-story:first-child{
  background:linear-gradient(135deg,#fff 0%,#f7f9ff 100%);
}
.phase3-products .phase2-product-story--staypicker{
  background:linear-gradient(135deg,#f9fbff 0%,#eef4fb 100%);
}
.phase3-products .phase2-product-story-copy .h2{
  line-height:1.03;
  letter-spacing:-.035em;
}
.phase3-products .phase2-product-story-copy p{
  max-width:46ch;
}
.phase3-products .phase2-product-story .jpa-demo{
  border-radius:12px;
  border-color:rgba(45,80,148,.18);
  background:#fff;
}
.phase3-products .phase2-staypicker-visual{
  min-height:240px;
  border:1px solid rgba(108,140,201,.25);
  border-radius:12px;
  background:
    linear-gradient(rgba(103,137,191,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,137,191,.055) 1px,transparent 1px),
    linear-gradient(145deg,#0b1729,#0f2139);
  background-size:28px 28px,28px 28px,auto;
  box-shadow:0 18px 44px rgba(8,23,43,.12);
}
.phase3-products .phase2-staypicker-visual span{
  border-color:rgba(121,154,216,.32);
  background:rgba(23,42,70,.92);
  box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.phase3-products .phase2-staypicker-visual i{
  background:#7895e8;
}

.phase3-products .phase2-ecosystem{
  padding-top:clamp(78px,8vw,116px);
  padding-bottom:clamp(82px,8vw,120px);
  background:linear-gradient(180deg,#f6f8fc 0%,#f2f5fa 100%);
}
.phase3-products .phase2-section-heading{
  margin-bottom:46px;
}
.phase3-products .phase3-ecosystem-map{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.phase3-products .phase3-ecosystem-node{
  position:relative;
  min-height:188px;
  padding:24px;
  border:1px solid var(--products-border);
  border-radius:var(--products-radius);
  background:rgba(255,255,255,.9);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease;
}
.phase3-products .phase3-ecosystem-node::after{
  content:"↗";
  position:absolute;
  top:18px;
  right:18px;
  color:#5374d7;
  font-size:13px;
  opacity:.72;
}
.phase3-products .phase3-ecosystem-node::before{
  content:"";
  position:absolute;
  right:-52px;
  bottom:-52px;
  width:112px;
  height:112px;
  border:1px solid rgba(49,94,251,.10);
  transform:rotate(45deg);
  pointer-events:none;
}
.phase3-products .phase3-ecosystem-node>span{
  padding-right:24px;
  color:#73829a;
  font:700 10px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.phase3-products .phase3-ecosystem-node>strong{
  margin:28px 0 9px;
  color:#111a2d;
  font-size:21px;
  line-height:1.12;
  letter-spacing:-.025em;
}
.phase3-products .phase3-ecosystem-node>p{
  margin:0;
  color:#66758f;
  font-size:14px;
  line-height:1.65;
}
.phase3-products .phase3-ecosystem-node:hover,
.phase3-products .phase3-ecosystem-node:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(49,94,251,.32);
  background:#fff;
  box-shadow:0 18px 42px rgba(32,59,112,.09);
}
.phase3-products .phase3-ecosystem-node:hover>strong,
.phase3-products .phase3-ecosystem-node:focus-visible>strong{
  color:#315efb;
}

.phase3-products .phase2-cta{
  position:relative;
  overflow:hidden;
  padding-top:clamp(64px,7vw,92px);
  padding-bottom:clamp(64px,7vw,92px);
  background:linear-gradient(125deg,#315efb 0%,#4663ef 52%,#555bdc 100%);
}
.phase3-products .phase2-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.15;
  background-image:
    linear-gradient(rgba(255,255,255,.20) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.20) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(90deg,black,transparent 72%);
}
.phase3-products .phase2-cta-grid{
  position:relative;
  z-index:1;
  gap:34px 72px;
}
.phase3-products .phase2-cta-grid .h2{
  line-height:1.02;
  letter-spacing:-.035em;
}
.phase3-products .phase2-cta-grid>.btn{
  min-height:48px;
  padding-inline:24px;
}

@media (max-width:1100px){
  .phase3-products .phase3-ecosystem-map{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .phase3-products .phase2-hero-grid{
    gap:28px;
  }
  .phase3-products .phase2-hero-grid .lede{
    max-width:620px;
  }
}

@media (max-width:680px){
  .phase3-products .phase2-hero{
    padding-top:42px;
    padding-bottom:48px;
  }
  .phase3-products .phase2-hero-grid{
    gap:18px;
  }
  .phase3-products .phase2-hero-grid .h1{
    font-size:clamp(2rem,10.2vw,2.65rem);
    line-height:1.01;
    letter-spacing:-.04em;
  }
  .phase3-products .phase2-hero-grid .lede{
    font-size:16px;
    line-height:1.62;
  }
  .phase3-products .phase2-products{
    padding-top:56px;
    padding-bottom:60px;
  }
  .phase3-products .phase2-flagship{
    border-radius:14px;
    padding:24px 18px;
  }
  .phase3-products .phase2-flagship-copy h2{
    font-size:clamp(46px,15vw,62px);
  }
  .phase3-products .phase2-flagship .jpa-demo{
    border-radius:12px;
  }
  .phase3-products .phase2-product-secondary{
    gap:18px;
    margin-top:18px;
  }
  .phase3-products .phase2-product-story{
    padding:24px 18px;
    border-radius:12px;
  }
  .phase3-products .phase2-product-story-copy .btn{
    width:100%;
    min-height:46px;
    justify-content:center;
  }
  .phase3-products .phase2-staypicker-visual{
    min-height:260px;
  }
  .phase3-products .phase2-ecosystem{
    padding-top:58px;
    padding-bottom:62px;
  }
  .phase3-products .phase2-section-heading{
    margin-bottom:28px;
  }
  .phase3-products .phase3-ecosystem-map{
    grid-template-columns:1fr;
    gap:10px;
  }
  .phase3-products .phase3-ecosystem-node{
    min-height:auto;
    padding:20px;
    border-radius:12px;
  }
  .phase3-products .phase3-ecosystem-node>strong{
    margin:18px 0 7px;
    font-size:20px;
  }
  .phase3-products .phase2-cta{
    padding-top:58px;
    padding-bottom:58px;
  }
  .phase3-products .phase2-cta-grid{
    gap:24px;
  }
  .phase3-products .phase2-cta-grid>.btn{
    width:100%;
    justify-content:center;
  }
}

@media (prefers-reduced-motion:reduce){
  .phase3-products .phase3-ecosystem-node{
    transition:none!important;
    transform:none!important;
  }
}