@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
	--orange:#f05a1f;
	--teal:#258d98;
	--ink:#3f3f42;
	--soft:#fff3ed;
	--line:#f3d9ce;
	--white:#fff
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;
	font-family:'Poppins',Arial,Helvetica,sans-serif;
	color:var(--ink);
	background:#fff
}
a{
	text-decoration:none;
	color:inherit}
img{
	max-width:100%;
	display:block}

.wrap{
	width:min(1180px,92vw);
	margin:auto}
.topbar{
	background:var(--orange);
	color:#fff;
	font-size:13px}
.topbar-inner{
	height:34px;
	display:flex;
	justify-content:space-between;
	align-items:center}
.topbar a{margin-left:0px}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid #eee;backdrop-filter:blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.brand{display:flex;align-items:center;gap:8px}
.brand-mark{font-size:28px;color:var(--orange)}
.brand b{font-size:28px;line-height:1}
.brand small{display:block;color:var(--orange);font-size:9px}
.main-nav{display:flex;gap:28px;font-size:15px}
.main-nav a:hover{color:var(--orange)}
.menu-toggle{display:none;border:0;background:none;font-size:28px}
.hero{
	padding:0px 40 0px;
	background:radial-gradient(circle at 10% 20%,#fefefe 0 1px,transparent 2px),linear-gradient(120deg,#fff 40%,#fff)}
.hero-grid,
.split-grid,
.app-grid {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 20px;
    align-items: center;
}
/**.cert-grid{
	display:grid;
	grid-template-columns:1fr 2fr;
	gap:6px;
	align-items:center}**/
.cert-grid {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 20px;
    align-items: center;
}
.hero-copy{text-align:center}
.eyebrow{color:var(--teal);font-size:12px;font-weight:bold;letter-spacing:2px}
.hero h1{font-size:64px;line-height:.98;margin:10px 0 22px}
.hero h1 span{color:var(--orange)}.hero p{font-size:18px;line-height:1.55;color:#777}
.btn{display:inline-block;
	background:var(--orange);
	color:#fff;
	border-radius:999px;
	padding:0px 28px;
	margin-top:0px;
	border:2px solid #f0a000;
	font-weight:700}
.small{padding:11px 20px;font-size:14px}
.card-image img,
.image-panel img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:10px}
.image-APP img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:0px}
.image-certifikat img{
	width:100%;
	height:100%;}
.image-Footer-Logo img{
	width:140px;}
.hero-visual{
	min-height:290px;
	vertical-align: bottom;
	overflow:hidden
}
.stats{
	background:var(--teal);
	color:white}
.stats-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px;
	padding:24px 0}
.stats-grid div{text-align:center}
.stats-grid strong
	{
	display:block;
	font-size:36px;
	line-height: 1.0
	}
.stats-grid span{
	font-size:12px
	}
.section{padding:56px 0}
.alt{background:#fff}
.copy-block h2{font-size:40px;line-height:1.08;margin:0 0 22px}
.copy-block h2 span,
.copy-block h3,
.word-cloud b{color:var(--orange)}
.copy-block em{font-style:normal;font-weight:300;color:#777}
.copy-block p{font-size:18px;line-height:1.5;color:#666}
.copy-block h3{font-size:20px}
.image-panel{height:410px}
.reverse{grid-template-columns:.9fr 1.1fr}
.word-cloud{font-size:42px;line-height:1.05;text-align:center;color:#f47a43}
.word-cloud p{margin:0 0 4px}
.pill-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:28px}
.pill-row a{background:var(--teal);color:#fff;border:2px solid #f3a000;border-radius:999px;padding:8px 16px;font-size:13px}
.app-cta{
	background:var(--soft);
	padding:30px 0 0;
	overflow:hidden
	}
.app-grid h2{
	color:var(--orange);
	font-size:34px;
	line-height: 1.0;
	}
.app-grid img{
	max-height:165px;
	justify-self:end
	}
.certs{padding:30px 0}
.cert-grid h2{font-size:38px;color:var(--teal)}
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.logos span{font-weight:700;color:#555}
.logos span::first-letter{color:var(--orange)}footer{background:var(--teal);color:#fff;padding-top:36px}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px;align-items:start}
.footer-grid a{display:block;margin:7px 0;font-size:13px}
.footer-grid p{font-size:13px;line-height:1.55}
.footer-grid h4{margin:0 0 10px}
.footer-brand b{font-size:30px}
.footer-cta{grid-column:5/6}
.copyright{border-top:1px solid rgba(255,255,255,.25);margin-top:30px;padding:18px 0;font-size:12px}
.copyright 
.wrap{
	display:flex;
	justify-content:space-between
}

@media(max-width:900px)
{
	.main-nav{display:none;
		position:absolute;
		top:72px;
		left:0;
		right:0;
		background:#fff;
		padding:20px;
		flex-direction:column;
		border-top:1px solid #eee}
	.main-nav.open{display:flex}
	.menu-toggle{display:block}
	.hero-grid,
	.split-grid,
	.app-grid,
	.cert-grid{grid-template-columns:1fr}
	.hero h1{font-size:46px}
	.stats-grid{grid-template-columns:repeat(2,1fr)}
	/**.stats-grid div:last-child{grid-column:1/-1}**/
	.image-panel{height:320px}
	.image-certifikat img{
		width:80%;
		height:80%;}
	.footer-grid{grid-template-columns:1fr 1fr}
	.footer-cta{grid-column:auto}
	.logos{grid-template-columns:1fr 1fr}
	.hero-visual{order:2}
	.hero-copy{order:1}
}

@media(max-width:560px){
	.wrap {
        width: 100%;
        padding-left: 34px;
        padding-right: 34px;
    }
	.topbar{display:none}
	.nav{min-height:64px}
	.hero{padding-top:24px}
	.hero h1{font-size:40px}
	.hero p,
	.image-certifikat img{
		width:90%;
		height:90%;}
	.copy-block p{font-size:16px}
	.stats-grid{grid-template-columns:repeat(2,1fr)}
	.stats-grid strong{font-size:28px}
	.copy-block h2{font-size:31px}
	.word-cloud{font-size:32px}
	.footer-grid{grid-template-columns:1fr}
	.logos{grid-template-columns:1fr 1fr}
	.copyright .wrap{display:block}
	.copyright span{display:block;margin-top:8px}}

/* =========================================================
   iHELP RESPONSIVE SVG LOGO
   ========================================================= */
.brand-logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  flex:0 1 auto;
  min-width:0;
}

.brand-logo .header-logo{
  display:block;
  width:clamp(100px, 50vw, 100px);
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.brand-logo .brand-tagline{
	display:block;
	padding-left: 3px;
	width:100%;
	color:var(--orange);
	font-size:clamp(8px, .65vw, 11px);
	line-height:1.15;
	font-weight:600;
	letter-spacing:.015em;
	white-space:nowrap;
}

/* Večji tablični zasloni */
@media(max-width:1024px){
  .brand-logo .header-logo{
    width:clamp(100px, 15vw, 115px);
  }

  .brand-logo .brand-tagline{
    font-size:9px;
  }
}

/* Telefoni in manjši tablični zasloni */
@media(max-width:560px){
  .brand-logo{
    gap:2px;
  }

  .brand-logo .header-logo{
    width:clamp(100px, 31vw, 125px);
  }

  .brand-logo .brand-tagline{
    font-size:8px;
  }
}

/* Zelo ozki mobilni zasloni */
@media(max-width:360px){
  .brand-logo .header-logo{
    width:96px;
  }

  .brand-logo .brand-tagline{
    font-size:7.5px;
  }
}