*{box-sizing:border-box}
:root{
  --navy:#001a32;
  --navy-2:#001a32;
  --blue:#3288ff;
  --yellow:#fbb800;
  --white:#fff;
  --line:rgba(255,255,255,.65);
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:#fff;font-family:Arial,Helvetica,sans-serif}
img{display:block;max-width:100%}
a{color:inherit}
.container{width:min(100% - 7vw, 1920px);margin-inline:auto}

.hero{position:relative;min-height:47.5vw;max-height:920px;overflow:hidden;background:#071426}
.hero__bg{
  position:absolute;inset:0;
  background-image:url("assets/printinghr_pozadina.jpg");
  background-size:cover;background-position:top center;
}
.hero__shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,16,32,.98) 0%,rgba(4,16,32,.92) 22%,rgba(4,16,32,.55) 43%,rgba(4,16,32,.10) 68%,rgba(4,16,32,.10) 100%);
}
.hero__content{position:relative;z-index:1;padding-top:3.5vw;min-height:47.5vw}
.brand{display:inline-block;width:min(36vw,760px)}
.brand img{width:100%;height:auto}
.hero__copy{margin-top:8.3vw;max-width:900px}
.eyebrow{font-size:clamp(36px,4.25vw,78px);font-weight:800;line-height:1.5;margin:0 0 18px;letter-spacing:.01em}
.hero h1{font-size:clamp(36px,4.25vw,78px);font-weight:300;line-height:1.5;margin:0;letter-spacing:.01em}
.hero h1 strong{font-weight:800;line-height:1.5;color:var(--yellow)}
.accent-line{display:block;width:132px;height:4px;background:var(--yellow);margin-top:56px}

.benefits{background:var(--navy);border-bottom:1px solid #2e83dc}
.benefits__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.benefit{min-height:170px;display:flex;align-items:center;gap:26px;padding:24px 32px;border-right:1px solid var(--line)}
.benefit:last-child{border-right:0}
.icon,.contact__icon{flex:0 0 78px;color:var(--blue)}
.icon svg,.contact__icon svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:2}
.benefit h2,.contact h2{font-size:20px;margin:0 0 14px;font-weight:400;line-height:1.15}
.benefit p,.contact p{font-size:20px;line-height:1.65;margin:0;font-weight:300}
.benefit h2{font-weight:400}

.contact{background:var(--navy-2)}
.contact__grid{display:grid;grid-template-columns:1.1fr 1.1fr 1.1fr .8fr}
.contact__item,.social{min-height:164px;display:flex;align-items:center;gap:28px;padding:28px 30px;border-right:1px solid var(--line)}
.contact__item:last-of-type{border-right:1px solid var(--line)}
.contact h2{font-weight:600;margin-bottom:12px}
.contact p{font-size:20px}
.contact a{text-decoration:none}
.contact a:hover{text-decoration:underline}
.social{justify-content:center;gap:28px;border-right:0}
.social h2{margin:0;font-size:20px;font-weight:600}
.instagram{display:block;width:74px;height:74px;color:#df3c88}
.instagram svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:4}
.instagram svg circle:last-child{stroke:none}

/* Desktop screen-fit mode:
   The reference is 2048x1366, while FHD/HD+ displays are shorter.
   These rules preserve the reference proportions but scale the vertical
   sections to exactly the viewport height. */
@media (min-width:1101px) and (max-height:1100px){
  html,body{height:100%;overflow:hidden}
  .hero{height:67.35vh;min-height:0;max-height:none}
  .hero__content{height:100%;min-height:0;padding-top:3.1vh}
  .brand{width:min(36vw,720px)}
  .hero__copy{margin-top:8.0vh;max-width:850px}
  .eyebrow{font-size:clamp(42px,3.45vw,66px);margin-bottom:1.1vh}
  .hero h1{font-size:clamp(30px,3.05vw,59px);line-height:1.08}
  .accent-line{width:100px;height:3px;margin-top:3.4vh}

  .benefits{height:16.45vh}
  .benefits__grid{height:100%}
  .benefit{min-height:0;height:100%;gap:1.15vw;padding:1.6vh 1.35vw}
  .icon{flex-basis:clamp(52px,3.8vw,72px)}
  .benefit h2{font-size:clamp(15px,1.0vw,19px);margin-bottom:1vh;white-space:nowrap}
  .benefit p{font-size:clamp(14px,.98vw,18px);line-height:1.5}

  .contact{height:16.2vh}
  .contact__grid{height:100%}
  .contact__item,.social{min-height:0;height:100%;gap:1.35vw;padding:1.6vh 1.25vw}
  .contact__icon{flex-basis:clamp(45px,3.2vw,62px)}
  .contact h2{font-size:clamp(14px,.98vw,18px);margin-bottom:.8vh;white-space:nowrap}
  .contact p{font-size:clamp(14px,1vw,18px);line-height:1.45}
  .social{gap:1.25vw}
  .social h2{font-size:clamp(14px,.98vw,18px)}
  .instagram{width:clamp(52px,3.7vw,68px);height:clamp(52px,3.7vw,68px)}
}

@media (min-width:1101px) and (max-height:950px){
  /* HD+ / 1600x900 class displays */
  .hero__copy{margin-top:7.2vh}
  .eyebrow{font-size:clamp(38px,3.25vw,56px)}
  .hero h1{font-size:clamp(27px,2.85vw,50px)}
  .benefit{gap:1vw;padding-left:1.15vw;padding-right:1.15vw}
  .benefit h2{font-size:clamp(13px,.92vw,17px)}
  .benefit p{font-size:clamp(13px,.9vw,16px)}
  .contact h2{font-size:clamp(13px,.9vw,16px)}
  .contact p{font-size:clamp(13px,.92vw,16px)}
	

}

@media (max-width:1100px) and (min-width:701px){
  .hero{min-height:620px}
  .hero__content{min-height:620px}
  .hero__bg{inset:0}
  .brand{width:min(48vw,600px)}
  .hero__copy{margin-top:9vw}
  .benefits__grid{grid-template-columns:repeat(2,1fr)}
  .benefit:nth-child(2){border-right:0}
  .benefit:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .contact__grid{grid-template-columns:1fr 1fr}
  .contact__item:nth-child(2){border-right:0}
  .contact__item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .social{border-top:1px solid var(--line);grid-column:1/-1;min-height:120px}
  .hero h2{font-size:20px}	

		
  .contact__item,.social{gap:0.35vw;padding:0.6vh 0.25vw}
  .benefit{gap:0.25vw;padding:0.6vh 0.35vw}	
}

@media (max-width:700px){
  .container{width:min(100% - 34px, 560px)}
  .hero{min-height:610px}
  .hero__content{min-height:610px;padding-top:24px}
  .hero__bg{inset:190px 0 0 0;background-position:58% center}
  .hero__shade{background:linear-gradient(180deg,#071426 0%,#071426 25%,rgba(7,20,38,.88) 48%,rgba(7,20,38,.15) 100%)}
  .brand{width:min(86vw,430px)}
  .hero__copy{margin-top:56px}
  .eyebrow{font-size:39px;margin-bottom:12px}
  .hero h1{font-size:31px}
  .accent-line{width:96px;margin-top:34px;height:3px}

  .benefits__grid,.contact__grid{grid-template-columns:1fr}
  .benefit{min-height:132px;padding:22px 8px;border-right:0!important;border-bottom:1px solid var(--line)}
  .benefit:last-child{border-bottom:0}
  .icon{flex-basis:64px}
  .benefit h2,.contact h2{font-size:17px;margin-bottom:8px}
  .benefit p,.contact p{font-size:17px;line-height:1.45}

  .contact__item,.social{min-height:125px;padding:24px 8px;border-right:0!important;border-bottom:1px solid var(--line)}
  .contact__icon{flex-basis:58px}
  .social{justify-content:flex-start;border-bottom:0}
  .instagram{width:62px;height:62px}
}

@media (max-width:420px){
  .hero{min-height:575px}
  .hero__content{min-height:575px}
  .hero__bg{inset:220px 0 0}
  .hero__copy{margin-top:48px}
  .eyebrow{font-size:34px}
  .hero h1{font-size:27px}
}

.shine-box {
  position: relative;
  overflow: hidden;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
}

/* Postavke početnog nevidljivog odsjaja */
.shine-box::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  transition: none;
}

/* Pokretanje odsjaja pri prelasku mišem */
.shine-box:hover::after {
  left: 125%;
  transition: left 0.7s ease-in-out;
}