/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* Brand */
  --mint: #00D1B2;
  --mint-dark: #009987;

  /* UI */
  --dark: #0b1620;
  --muted: #111c27;
  --line: #17323a;
  --text: #dfe6e9;
  --text-soft: #c2d1d9;

  /* Sizing */
  --container-max: 1400px;
  --logo-w: 207px;        /* povečano +15% */
  --foot-logo-w: 207px;
}

html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--dark);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: var(--mint); text-decoration: none; }
a:hover { color: #bff7ef; text-shadow: 0 0 10px rgba(0,209,178,.35); }
a:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.container { width: 90%; max-width: var(--container-max); margin: 0 auto; }

/* === Header === */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(11,22,32,0.85);
  border-bottom: 1px solid rgba(0,209,178,0.12);
  backdrop-filter: blur(8px);
}
@supports not (backdrop-filter: blur(8px)){
  .site-header { background: rgba(11,22,32,0.95); }
}

.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:110px; padding:18px 0; }
.brand{ display:flex; align-items:center; gap:16px; }
.logo{ width: var(--logo-w); height:auto; filter: drop-shadow(0 0 16px rgba(0,209,178,.35)); transition: transform .3s, filter .3s; }
.logo:hover{ transform: scale(1.05); filter: drop-shadow(0 0 24px rgba(0,209,178,.55)); }

.main-nav{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.main-nav a{ font-weight:600; color:#cfeee6; font-size:18px; }
.main-nav a:hover{ color:var(--mint); text-shadow:0 0 12px rgba(0,209,178,.45); }
.main-nav .btn{ margin-left:auto; }

/* === Buttons === */
.btn{ display:inline-block; padding:8px 18px; border:2px solid transparent; border-radius:12px; font-weight:700; font-size:14px; cursor:pointer; text-align:center; transition: transform .2s, filter .2s, background-color .2s, box-shadow .2s; }
.btn-sm{ padding:10px 16px; font-size:14px; }
.btn.lg{ padding:12px 26px; font-size:16px; }
.btn.primary{ background:var(--mint); border-color:var(--mint); color:#01201c; box-shadow:0 0 20px rgba(0,209,178,.25) inset, 0 0 18px rgba(0,209,178,.20); }
.btn.primary:hover{ filter:brightness(1.07); transform: translateY(-2px); }
.btn.ghost{ background:transparent; border:2px solid var(--mint); color:var(--mint); }
.btn.ghost:hover{ background:rgba(0,209,178,.10); transform: translateY(-2px); }

/* === Hero === */
.hero{ padding:80px 0; background: radial-gradient(1400px 600px at 15% 0%, #0a2017 0%, #0b1620 60%, #0a1120 100%); }
.hero-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items:center; gap:60px; }
.hero-copy h1{ font-family:'Poppins', sans-serif; font-size: clamp(28px, 3.5vw, 44px); line-height:1.15; margin-bottom:16px; color:#e6fff6; }
.hero-copy .lead{ font-size: clamp(16px, 1.6vw, 20px); color:#c2f5e9; margin-bottom:18px; }
.actions{ display:flex; gap:12px; flex-wrap:wrap; margin: 18px 0; }

.hero-bullets{ margin-top:20px; list-style:none; color:#a9dcd0; padding-left: 22px; }
.hero-bullets li{ position: relative; padding-left: 22px; margin: 8px 0; text-align:left; }
.hero-bullets li::before{ content:"✔"; position:absolute; left:0; top:0; color:var(--mint); font-weight:700; }

.hero-art img{ border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.45); }

/* KPI */
.kpis{ display:flex; justify-content:space-around; gap:16px; margin-top:36px; flex-wrap:wrap; }
.kpi-num{ font-size:20px; font-weight:800; color:var(--mint); }
.kpi-label{ font-size:13px; display:block; color:#b2bec3; }

/* === Sections === */
.section{ padding:74px 0; }
.section.muted{ background:var(--muted); }
.section h2{ font-family:'Poppins',sans-serif; font-size: clamp(24px, 3vw, 36px); margin-bottom:26px; color:#fff; text-align:center; }

/* === Cards === */
.cards{ display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.card{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; background:#0e1821; border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:0 8px 24px rgba(0,0,0,.18); transition: transform .2s, box-shadow .2s, border-color .2s; }
.card:hover{ transform: translateY(-6px); box-shadow:0 12px 32px rgba(0,0,0,.24); border-color: rgba(0,209,178,.30); }
.card img{ width:100%; aspect-ratio:16/9; object-fit:cover; margin-bottom:16px; border-radius:12px; }
.card h3{ margin-bottom:10px; font-size:20px; color:#fff; }
.card p{ font-size:14px; line-height:1.45; color: var(--text-soft); }

/* === Solar Cards === */
.solar-cards{ display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.solar-card{ background:#0e1821; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.18); transition: transform .2s, box-shadow .2s, border-color .2s; }
.solar-card:hover{ transform: translateY(-6px); box-shadow:0 12px 32px rgba(0,0,0,.24); border-color: rgba(0,209,178,.30); }
.solar-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.solar-card-content{ padding:16px; }
.solar-card h3{ color:#fff; font-size:20px; margin-bottom:6px; }
.solar-card p{ color:var(--text-soft); font-size:14px; }

/* === Grid-3 === */
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:32px; }
.chunk h3{ font-size:18px; margin-bottom:10px; color:#fff; }
.ticks{ list-style:none; padding:0; }
.ticks li{ position: relative; padding-left: 25px; margin:8px 0; text-align:left; }
.ticks li::before{ content:"✔"; position:absolute; left:0; top:0; color:var(--mint); font-weight:700; }

/* === Projects === */
.projects{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.project{ background:#13232e; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.18); transition: transform .2s, box-shadow .2s, border-color .2s; }
.project:hover{ transform: translateY(-6px); box-shadow:0 12px 32px rgba(0,0,0,.24); border-color: rgba(0,209,178,.30); }
.project img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.project-content{ padding:18px; }
.project h3{ margin-bottom:4px; font-size:18px; color:#fff; text-align:left; }
.project .meta{ font-size:13px; color:#a5b1b6; margin-bottom:8px; }
.project p{ font-size:14px; color: var(--text-soft); text-align:left; }
.note{ font-size:12px; margin-top:18px; color:#7f8c8d; text-align:center; }

/* === CTA === */
.cta-band{ position:relative; overflow:hidden; padding:64px 0; background: radial-gradient(1400px 600px at 15% 0%, #0a2017 0%, #0b1620 60%, #0a1120 100%); color:#eafbf5; }
.cta-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,32,23,0) 0%, rgba(11,22,32,.6) 100%); z-index:0; }
.cta-band-inner{ position:relative; z-index:1; display:grid; align-items:center; gap:24px; grid-template-columns:1fr; justify-items:center; text-align:center; }

/* === Footer === */
.site-footer{ position:relative; background:#0b1620; color:#cfeee4; padding:42px 0 36px; overflow:hidden; }
.footer-bg{ position:absolute; inset:0; background:radial-gradient(900px 320px at 18% 10%, rgba(0,209,178,.14), transparent), linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.28) 100%); opacity:.9; pointer-events:none; }
.foot{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.foot-logo{ width: var(--foot-logo-w); height:auto; filter: drop-shadow(0 0 16px rgba(0,209,178,.35)); transition: transform .3s, filter .3s; }
.foot-logo:hover{ transform:scale(1.05); filter: drop-shadow(0 0 22px rgba(0,209,178,.55)); }
.foot-info{ color:#cfeee4; font-size:14px; line-height:1.6; text-align:right; }
.foot-info strong{ color:var(--mint); font-size:15px; }
.foot-info a{ color:var(--mint); }
.foot-info a:hover{ text-decoration:underline; }

/* === Legal Pages (Privacy & Cookies) === */
.legal-content, .cookie-content{ text-align: left; }
.legal-content h1, .cookie-content h1{ font-size: 1.8rem; margin-bottom: 18px; color: #e6fff6; }
.legal-content h2, .cookie-content h2{ font-size: 1.2rem; margin-top: 24px; margin-bottom: 10px; color: #cfeee6; }
.legal-content p, .legal-content li, .cookie-content p, .cookie-content li{ font-size: 1rem; line-height: 1.7; color: var(--text); }
.legal-content ul, .cookie-content ul{ list-style: disc; padding-left: 20px; margin-bottom: 18px; }

/* === Responsive === */
@media (max-width: 1120px){
  .hero-grid{ grid-template-columns:1fr; }
  .cards, .solar-cards{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
}
@media (max-width: 980px){
  .nav{ min-height:96px; }
  .logo{ width: calc(var(--logo-w) * 0.9); }
  .main-nav{ gap:12px; }
  .main-nav a{ font-size:16px; }
  .foot{ flex-direction:column; gap:20px; align-items:center; }
  .foot-info{ text-align:center; }
}
@media (max-width: 720px){
  .logo{ width: calc(var(--logo-w) * 0.75); }
  .cards, .solar-cards, .projects{ grid-template-columns:1fr; }
  .hero-copy h1{ font-size:32px; }
}
@media (min-width: 1600px){
  .container{ max-width:1600px; }
  .hero-grid{ gap:80px; }
}

/* === Kontakt sekcija (slika desno, 400px; center na mobilu) === */
.kontakt-grid{
  display: grid;
  grid-template-columns: 1fr auto; /* levo tekst, desno slika */
  align-items: center;
  gap: 28px;
  text-align: left;
}
.kontakt-copy h2{ margin-bottom: 10px; }
.kontakt-copy p { color: var(--text-soft); font-size: 15px; }

.kontakt-art.small{
  display: flex;
  justify-content: center; /* omogoča centriranje na mobilu */
}
.kontakt-art.small img{
  width: 400px;              /* stalna širina slike */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  border: 1px solid var(--line);
  object-fit: cover;
}

/* Mobilna prilagoditev: slika pod tekstom + centrirana */
@media (max-width: 860px){
  .kontakt-grid { grid-template-columns: 1fr; }
  .kontakt-art.small { margin-top: 20px; }
  .kontakt-art.small img { width: 100%; max-width: 400px; margin: 0 auto; }
}