:root{
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --bg-muted: rgba(255,255,255,.85);
  --brand:#1081b9;
  --brand-700:#045778;
  --accent:#38bdf8;
  --ring: rgba(56, 189, 248, .35);
  --shadow: 0 12px 30px rgba(2,6,23,.08);
  --radius: 16px;
  --radius-lg: 22px;
  --container: 1150px;
  --main: 1210px;
  --button: rgba(15,23,42,.75);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0; 
	font-family:Roboto, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif; 
	background:var(--bg); 
	color:var(--text); 
	line-height:1.6;
	background: url("../img/bg.jpeg") no-repeat center center fixed;
	background-size: cover;
}

body.layout{
  min-height: 100dvh;         /* (bolje kot 100vh na mobitelih) */
  display: flex;
  flex-direction: column;
}

h1,h2,h3,h4{font-family:Lato, Roboto, sans-serif; line-height:1.2; margin:0 0 .6rem}
h1{font-size:clamp(1.8rem,3.2vw,3rem)}
h2{font-size:clamp(1.4rem,2.2vw,2rem)}
p{margin:.5rem 0 1rem}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

main {
	max-width:var(--main); 
	background-color: #ffffff;
	margin:0 auto; 
	margin-top: 20px;
  width: 100%;
  flex: 1;
}

.container{
	max-width:var(--container); 
	padding:0 1rem; 
	margin:0 auto; 
}

/* Header */
header{
	position: sticky; 
	top: 0; 
	z-index: 50; 
	min-height: 90px; 
	height: 90px; 
	background-color: #ffffff; 
}

.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:64px}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:900; letter-spacing:.3px}
.logo{width:34px; height:34px; display:grid; place-items:center; font-weight:900}
nav ul{list-style:none; display:flex; gap:1rem; margin:0; padding:0}
nav ul li + li {
  border-left: 1px solid rgba(148,163,184,.25); /* rahlo siva črtica */
  margin-left: .5rem;   /* odmik od črtice */
  padding-left: .75rem; /* prostor po črtici */
}

nav a{display:inline-block; padding:.5rem .75rem; border-radius:10px}
nav a:hover{background:rgba(56,189,248,.08); text-decoration:none}

.impLink {
  color: var(--brand);
}

.cta{
	display: inline-flex; 
	align-items: center; 
	gap: .6rem; 
	background-color: var(--brand);
	color: #06281e; 
	font-weight: 800; 
	border: none; 
	padding: .7rem 1rem; 
	border-radius: 12px; 
	cursor: pointer; 
	box-shadow: 0 10px 24px rgba(16,185,129,.2);
	border:1px solid rgba(148,163,184,.25);
}
	
.cta:hover {
	background: rgba(56,189,248, 1);
	border-color:var(--accent)
}

/* Burger */
.burger{display:none; background:none; border:1px solid rgba(148,163,184,.25); padding:.55rem .65rem; border-radius:12px}
.burger span{display:block; width:22px; height:2px; background:currentColor; margin:4px 0; border-radius:2px}
.mobile-only { display: none; } 

/* Footer */
footer{
	padding: 3px 0; 
	border-top: 1px solid rgba(148,163,184,.12); 
	color: var(--muted); 
	background-color: var(--bg-muted); 
	margin-top: 10px; 
	height: 30px; 
	z-index: 50;
}

@media (max-width: 900px){
  nav{
    position: fixed;
    top: 64px;              /* pod headerjem */
    right: 0;
    bottom: 0;              /* raztegne do dna */
    width: min(360px, 90vw);
	height: 270px;
    /* višina glede na viewport; 100dvh = “pravi” zaslon na mobitelih */
    max-height: calc(100dvh - 64px);
    background: #fff;
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -20px 0 40px rgba(0,0,0,.35);
    overflow-y: auto;       /* scroll znotraj menija */
    z-index: 1000;          /* nad headerjem */
  }
  nav.open{ transform: translateX(0) }
  nav ul{ display:flex; flex-direction:column; padding:0.5rem; margin:0 }
  nav a{ color:#0f172a; }
  .burger{ display:inline-block }
  .desktop-only{ display:none }
  footer{ font-size: 60%; }
  nav ul li + li {
    border-left: none;
    border-top: 1px solid rgba(148,163,184,.25);
    margin-left: 0;
    padding-left: 0;
    margin-top: .25rem;
    padding-top: .5rem;
  }
  .mobile-only { display: block; } 
}

/* Hero */
.hero{padding:64px 0 24px; background:
  radial-gradient(1200px 600px at 80% -100px, rgba(56,189,248,.15), transparent 60%),
  radial-gradient(1000px 600px at -200px 0, rgba(16,185,129,.15), transparent 60%);
}
.hero-inner{position: relative; display:grid; grid-template-columns: 1.25fr; gap:2rem; align-items:center}
.hero-card{background:var(--panel); border:1px solid rgba(148,163,184,.12); border-radius:var(--radius-lg); padding:1.25rem; box-shadow:var(--shadow)}
.hero h1 span{background:linear-gradient(135deg, var(--accent), var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent}
.badges{display:flex; gap:.6rem; flex-wrap:wrap; margin:.5rem 0 0}
.badge{border:1px solid rgba(148,163,184,.25); padding:.25rem .55rem; border-radius:999px; font-size:.85rem; color:var(--muted)}

@media (max-width: 900px){ .hero-inner{grid-template-columns:1fr} }

/* Sections */
section{padding:56px 0}
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem}
.card{background:var(--panel); border:1px solid rgba(148,163,184,.12); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}
.card h3{margin-top:.25rem}
.muted{color:var(--muted)}
.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:1rem}

@media (max-width: 900px){ .cards{grid-template-columns:1fr}; .grid-2{grid-template-columns:1fr} }

/* Pricing */
.price{font-size:2rem; font-weight:900}

/* Blog */
.post-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem}
@media (max-width: 900px){ .post-list{grid-template-columns:1fr} }
.post-card{display:flex; flex-direction:column}
.post-card .meta{font-size:.9rem; color:var(--muted)}

/* Utilities */
.chip{display:inline-block; font-size:.85rem; padding:.25rem .55rem; border-radius:999px; border:1px solid rgba(148,163,184,.25); color:var(--muted)}
.row{display:flex; gap:.75rem; flex-wrap:wrap}
.input{width:100%; padding:.8rem 1rem; border-radius:12px; border:1px solid rgba(148,163,184,.25); background:transparent; color:inherit; outline:none}
.input:focus{border-color:var(--accent); box-shadow:0 0 0 6px var(--ring)}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:12px; border:1px solid rgba(148,163,184,.25); color:inherit; background:transparent; cursor:pointer}
.btn:hover{border-color:var(--accent)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

div.sliderItem {
    position: absolute;
    background-color: transparent;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
	  padding: 12px;
}

main.transp {
  background-color: transparent;
}

img.slider {
  display: block;
  width: 960px;
  margin: 0 auto;
}

.toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(20,20,20,0.92);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  font: 14px/1.3;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
}

.toast.show{
  opacity: 1;
  transform: translateY(0);
}

.toast.success{ background: rgba(18, 120, 60, 0.92); }
.toast.error{ background: rgba(170, 35, 35, 0.92); }
.toast.info{ background: rgba(20, 20, 20, 0.92); }

@media (max-width: 900px) {
  img.slider {
    display: block;
    width: 640px;
    margin: 0 auto;
  }
}

/* background:rgba(15,23,42,.75); backdrop-filter:saturate(180%) blur(10px); */