:root {
      --black: #111111;
      --dark: #1a1a1a;
      --gray-dark: #2c2c2c;
      --gray: #555555;
      --gray-light: #a6a6a6;
      --orange: #e87722;
      --orange-dark: #c4621a;
      --white: #f5f5f5;
      --border: rgba(232,119,34,0.25);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Lato', sans-serif; background: var(--black); color: var(--white); }

    /* NAV */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(17,17,17,0.97);
      border-bottom: 2px solid var(--orange);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 3rem; height: 80px;
      backdrop-filter: blur(10px);
    }
    .nav-logo img { height: 52px; width: auto; display: block; cursor: pointer; }
    .nav-links { display: flex; gap: 2.5rem; list-style: none; }
    .nav-links a {
      position: relative;
      color: var(--white); text-decoration: none;
      font-family: 'Oswald', sans-serif; font-size: 0.95rem; letter-spacing: 0.1em;
      text-transform: uppercase; transition: color 0.2s;
      padding-bottom: 6px;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background: var(--orange);
      transition: width 0.35s ease;
    }
    .nav-links a:hover,
    .nav-links a.active {
      color: var(--orange);
    }
    .nav-links a:hover::after,
    .nav-links a.active::after {
      width: 100%;
    }
    .nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
    .nav-burger span { width: 26px; height: 2px; background: var(--white); transition: 0.3s; }

    /* PAGES */
    .page { display: none; min-height: 100vh; }
    .page.active { display: block; }

    /* ===== HOME PAGE ===== */

    /* Video */
    .hero {
      position: relative; height: 100vh; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .hero-slideshow {
      position: absolute; inset: 0; width: 100%; height: 100%;
    }
    .slide {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      filter: brightness(0.35);
      opacity: 0; transition: opacity 1.2s ease-in-out;
    }
    .slide.active { opacity: 1; }
    .hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(17,17,17,0.5) 0%, rgba(232,119,34,0.1) 100%);
    }
    .hero-content {
      position: relative; z-index: 2; text-align: center; padding: 2rem;
      animation: fadeUp 1.2s ease both;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .hero-eyebrow {
      font-family: 'Oswald', sans-serif; color: var(--orange);
      letter-spacing: 0.3em; font-size: 0.85rem; text-transform: uppercase;
      margin-bottom: 1rem;
    }
    .hero-title {
      font-family: 'Oswald', sans-serif; font-size: clamp(2.8rem, 6vw, 5rem);
      font-weight: 700; line-height: 1.05;
      text-transform: uppercase; letter-spacing: 0.04em;
      margin-bottom: 1.5rem;
    }
    .hero-title span { color: var(--orange); }
    .hero-sub {
      font-size: 1.1rem; font-weight: 300; color: rgba(245,245,245,0.8);
      max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.7;
    }
    .btn {
      display: inline-block; padding: 0.9rem 2.6rem;
      font-family: 'Oswald', sans-serif; letter-spacing: 0.15em; text-transform: uppercase;
      font-size: 0.9rem; font-weight: 600; text-decoration: none;
      border: 2px solid var(--orange); color: var(--orange);
      background: transparent; cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .btn:hover { background: var(--orange); color: var(--black); }
    .btn-solid { background: var(--orange); color: var(--black); }
    .btn-solid:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
    .hero-scroll {
      position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      font-size: 0.75rem; letter-spacing: 0.2em; color: var(--gray-light);
      animation: bounce 2s infinite;
    }
    .hero-scroll svg { width: 20px; opacity: 0.6; }
    @keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

    /* Services */
    .section { padding: 6rem 3rem; }
    .section-header { text-align: center; margin-bottom: 4rem; }
    .section-eyebrow {
      font-family: 'Oswald', sans-serif; color: var(--orange);
      letter-spacing: 0.3em; font-size: 0.8rem; text-transform: uppercase;
      display: block; margin-bottom: 0.75rem;
    }
    .section-title {
      font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    }
    .section-title span { color: var(--orange); }
    .divider {
      width: 60px; height: 3px; background: var(--orange);
      margin: 1.5rem auto 0;
    }

    .services-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 2px; max-width: 1200px; margin: 0 auto;
    }
    .service-card {
      position: relative; overflow: hidden;
      aspect-ratio: 3/4; cursor: pointer;
    }
    .service-card img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.5s ease, filter 0.5s;
      filter: brightness(0.55) saturate(0.8);
    }
    .service-card:hover img { transform: scale(1.06); filter: brightness(0.4) saturate(0.6); }
    .service-info {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 2rem;
      background: linear-gradient(to top, rgba(17,17,17,0.95) 0%, transparent 60%);
    }
    .service-num {
      font-family: 'Oswald', sans-serif; font-size: 3rem; font-weight: 700;
      color: var(--orange); opacity: 0.2; line-height: 1;
      position: absolute; top: 1.5rem; right: 1.5rem;
    }
    .service-tag {
      font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 0.25em;
      color: var(--orange); text-transform: uppercase; margin-bottom: 0.4rem;
    }
    .service-name {
      font-family: 'Oswald', sans-serif; font-size: 1.5rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .service-desc {
      font-size: 0.85rem; color: rgba(245,245,245,0.7); margin-top: 0.5rem;
      line-height: 1.6; max-height: 0; overflow: hidden;
      transition: max-height 0.4s ease;
    }
    .service-card:hover .service-desc { max-height: 100px; }

    /* Stats */
    .stats-bar {
      background: var(--gray-dark);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      display: flex; justify-content: center; gap: 0;
    }
    .stat {
      flex: 1; max-width: 280px; padding: 3rem 2rem; text-align: center;
      border-right: 1px solid var(--border);
    }
    .stat:last-child { border-right: none; }
    .stat-num {
      font-family: 'Oswald', sans-serif; font-size: 3rem; font-weight: 700;
      color: var(--orange); line-height: 1;
    }
    .stat-label { font-size: 0.85rem; color: var(--gray-light); margin-top: 0.5rem; letter-spacing: 0.05em; }

    /* ===== O NAS ===== */
    .about-hero {
      padding-top: 70px; min-height: 55vh;
      background: linear-gradient(rgba(17,17,17,0.65), rgba(17,17,17,0.75)), url('kuhinja.webp') center/cover no-repeat;
      display: flex; align-items: center; justify-content: center; text-align: center;
      border-bottom: 2px solid var(--orange);
      position: relative;
    }
    .about-hero h1 {
      font-family: 'Oswald', sans-serif; font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    }
    .about-body {
      max-width: 1100px; margin: 0 auto; padding: 5rem 3rem;
      display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start;
    }
    .about-text h2 {
      font-family: 'Oswald', sans-serif; font-size: 1.8rem; font-weight: 700;
      text-transform: uppercase; margin-bottom: 1.5rem; color: var(--orange);
    }
    .about-text p { font-size: 1rem; line-height: 1.8; color: rgba(245,245,245,0.8); margin-bottom: 1.2rem; }
    .about-values { display: flex; flex-direction: column; gap: 1.5rem; }
    .value-item {
      display: flex; gap: 1.2rem; align-items: flex-start;
      padding: 1.5rem; background: var(--gray-dark);
      border-left: 3px solid var(--orange);
    }
    .value-icon { font-size: 1.8rem; flex-shrink: 0; }
    .value-item h3 {
      font-family: 'Oswald', sans-serif; font-size: 1rem; text-transform: uppercase;
      letter-spacing: 0.08em; color: var(--orange); margin-bottom: 0.4rem;
    }
    .value-item p { font-size: 0.9rem; color: var(--gray-light); line-height: 1.6; }

    /* ===== KONTAKT ===== */
    .kontakt-hero {
      padding-top: 70px; min-height: 40vh;
      background: linear-gradient(135deg, var(--dark) 0%, var(--gray-dark) 100%);
      display: flex; align-items: center; justify-content: center; text-align: center;
      border-bottom: 2px solid var(--orange);
    }
    .kontakt-hero h1 {
      font-family: 'Oswald', sans-serif; font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    }
    .kontakt-hero h1, .kontakt-hero h1 span { color: #fff; }
    .kontakt-body {
      max-width: 1100px; margin: 0 auto; padding: 5rem 3rem;
      display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
    }
    .kontakt-info h2 {
      font-family: 'Oswald', sans-serif; font-size: 1.5rem; text-transform: uppercase;
      color: var(--orange); margin-bottom: 2rem;
    }
    .info-line {
      display: flex; gap: 1rem; align-items: flex-start;
      padding: 1.2rem 0; border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .info-line-icon { color: var(--orange); font-size: 1.2rem; line-height: 1.5; width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0; }
    .info-line strong { display: block; font-family: 'Oswald', sans-serif; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-light); margin-bottom: 0.2rem; }
    .info-line p { font-size: 0.95rem; color: var(--white); }
    .contact-link {
      position: relative;
      display: inline-block;
      color: var(--white);
      text-decoration: none;
      padding-bottom: 3px;
    }
    .contact-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background: var(--orange);
      transition: width 0.35s ease;
    }
    .contact-link:hover {
      color: var(--orange);
    }
    .contact-link:hover::after {
      width: 100%;
    }
    .kontakt-form h2 {
      font-family: 'Oswald', sans-serif; font-size: 1.5rem; text-transform: uppercase;
      color: var(--orange); margin-bottom: 2rem;
    }
    .form-group { margin-bottom: 1.2rem; }
    .form-group label {
      display: block; font-family: 'Oswald', sans-serif; font-size: 0.75rem;
      letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray-light);
      margin-bottom: 0.5rem;
    }
    .form-group input, .form-group textarea, .form-group select {
      width: 100%; background: var(--gray-dark); border: 1px solid rgba(255,255,255,0.12);
      color: var(--white); padding: 0.85rem 1rem; font-family: 'Lato', sans-serif;
      font-size: 0.95rem; outline: none; transition: border-color 0.2s;
    }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
      border-color: var(--orange);
    }
    .form-group textarea { min-height: 130px; resize: vertical; }
    .form-group select option { background: var(--gray-dark); }
    .form-send {
      font-family: 'Oswald', sans-serif; letter-spacing: 0.15em; text-transform: uppercase;
      font-size: 0.9rem; font-weight: 600; padding: 1rem 2.5rem;
      background: var(--orange); color: var(--black); border: none; cursor: pointer;
      transition: background 0.2s; width: 100%; margin-top: 0.5rem;
    }
    .form-send:hover { background: var(--orange-dark); }

    /* MAP */
    .kontakt-map {
      max-width: 1100px; margin: 0 auto; padding: 0 3rem 5rem;
    }
    .map-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;
    }
    .map-header h2 {
      font-family: 'Oswald', sans-serif; font-size: 1.5rem; text-transform: uppercase;
      color: var(--orange); margin: 0;
    }
    .kontakt-map h2 {
      font-family: 'Oswald', sans-serif; font-size: 1.5rem; text-transform: uppercase;
      color: var(--orange); margin-bottom: 1.5rem;
    }
    .map-wrapper {
      border: 2px solid var(--border); overflow: hidden;
      filter: grayscale(30%) contrast(1.05);
      transition: filter 0.3s;
    }
    .map-wrapper:hover { filter: grayscale(0%) contrast(1); }
    .map-wrapper iframe { display: block; width: 100%; height: 400px; border: none; }

    /* FOOTER */
    footer {
      background: #0a0a0a; border-top: 1px solid var(--border);
      padding: 2.5rem 3rem; display: grid; grid-template-columns: 1fr auto 1fr;
      align-items: center; gap: 1rem;
    }
    footer .footer-logo { justify-self: start; }
    footer p { font-size: 0.82rem; color: var(--gray-light); text-align: center; }
    footer p:last-child { justify-self: end; text-align: right; }
    footer .footer-logo img { height: 32px; opacity: 0.7; }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      nav { padding: 0 1.5rem; }
      .nav-links { display: none; flex-direction: column; position: absolute; top: 80px; left: 0; right: 0; background: var(--dark); padding: 1.5rem; gap: 1.2rem; border-bottom: 2px solid var(--orange); }
      .nav-links.open { display: flex; }
      .nav-burger { display: flex; }
      .section { padding: 4rem 1.5rem; }
      .about-body, .kontakt-body { grid-template-columns: 1fr; gap: 3rem; }
      .stats-bar { flex-wrap: wrap; }
      .stat { border-right: none; border-bottom: 1px solid var(--border); }
      footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
      footer .footer-logo, footer p:last-child { justify-self: center; text-align: center; }
    }

    /* COOKIE BANNER */
    #cookie-banner {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
      background: var(--dark);
      border-top: 2px solid var(--orange);
      padding: 1.2rem 2rem;
      display: flex; align-items: center; justify-content: space-between;
      gap: 1.5rem; flex-wrap: wrap;
      box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
    }
    #cookie-banner[hidden] { display: none; }
    #cookie-banner p {
      font-size: 0.88rem; color: rgba(245,245,245,0.85);
      line-height: 1.7; flex: 1; min-width: 220px; margin: 0;
    }
    #cookie-banner p a {
      color: var(--orange); text-decoration: underline; cursor: pointer;
    }
    #cookie-banner p a:hover { color: var(--orange-dark); }
    .cookie-btn {
      display: inline-block; padding: 0.65rem 1.8rem;
      font-family: 'Oswald', sans-serif; letter-spacing: 0.12em;
      text-transform: uppercase; font-size: 0.85rem; font-weight: 600;
      background: var(--orange); color: var(--black);
      border: 2px solid var(--orange); cursor: pointer;
      transition: background 0.2s, border-color 0.2s; white-space: nowrap;
    }
    .cookie-btn:hover { background: var(--orange-dark); border-color: var(--orange-dark); }

    /* PISKOTKI */
    .piskotki-content {
      padding: 8rem 3rem 5rem;
      max-width: 800px; margin: 0 auto;
    }
    .piskotki-content h1 {
      font-family: 'Oswald', sans-serif; font-size: 2.2rem;
      text-transform: uppercase; color: var(--orange); margin-bottom: 2rem;
    }
    .piskotki-content h2 {
      font-family: 'Oswald', sans-serif; font-size: 1.2rem;
      text-transform: uppercase; color: var(--white); margin: 2rem 0 0.8rem;
      border-left: 3px solid var(--orange); padding-left: 0.8rem;
    }
    .piskotki-content p {
      color: rgba(245,245,245,0.8); line-height: 1.8; margin-bottom: 1rem;
    }
  
/* ===== IZBOLJŠAVE ===== */
.skip{position:absolute;left:-999px;top:0;background:var(--orange);color:#111;padding:.7rem 1rem;z-index:200}.skip:focus{left:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.nav-logo{display:block}
.nav-burger{background:none;border:0;padding:8px}
.hero{min-height:560px;height:100svh}
.hero-scroll{text-decoration:none}
.services-grid{max-width:1400px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.service-card:focus-within .service-desc{max-height:120px}
@media (hover:none){.service-desc{max-height:120px}}
.link{color:inherit;text-decoration:none}.link:hover{color:var(--orange);text-decoration:underline}
.value-icon{width:2.2rem;text-align:center}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;line-height:1.5;color:rgba(245,245,245,.8);margin:1rem 0}
.consent input{width:auto;margin-top:.2rem;accent-color:var(--orange)}
.consent a{color:var(--orange)}
#form-status{padding:.8rem 1rem;border-left:3px solid;margin-bottom:1rem;line-height:1.5}
#form-status.ok{color:#7ddc82}#form-status.err{color:#ff8a5c}
.form-send:disabled{opacity:.6;cursor:wait}
.hp{position:absolute;left:-9999px}
.map-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;height:400px;text-align:center;padding:2rem;background:var(--gray-dark)}
.map-ph p{max-width:460px;font-size:.9rem;color:rgba(245,245,245,.75);line-height:1.6}
.map-wrapper{filter:none}
footer a.link{color:var(--gray-light)}
@media (max-width:768px){.hero-title{font-size:2.6rem}.about-body,.kontakt-body,.kontakt-map{padding-left:1.5rem;padding-right:1.5rem}.nav-logo img{height:42px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ===== TOPLEJŠA PALETA ===== */
:root{--black:#120f0d;--dark:#1b1613;--gray-dark:#27211c;--white:#f4eee6;--orange:#ec8a2e;--orange-dark:#c96f1c;--wood:#b8864b;--border:rgba(236,138,46,.28)}
body{background:var(--black)}
.section-title span,.hero-title span{background:linear-gradient(90deg,#f6a94f,#e8761f);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats-bar{background:linear-gradient(180deg,#2a221b,#1f1914)}
.section-eyebrow::before,.section-eyebrow::after{content:"";display:inline-block;width:28px;height:1px;background:var(--wood);vertical-align:middle;margin:0 .8rem}
/* ===== ANIMACIJE ===== */
nav{transition:height .3s,background .3s,box-shadow .3s}
nav.scrolled{height:64px;background:rgba(18,15,13,.98);box-shadow:0 6px 24px rgba(0,0,0,.45)}
.nav-links a{position:relative;border-bottom:0;padding-bottom:6px}
.nav-links a::after,.link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--orange);transition:width .35s ease}
.link{position:relative;display:inline-block;padding-bottom:3px;text-decoration:none!important}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after,.link:hover::after{width:100%}
.slide.active{animation:kenburns 9s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-content>*{animation:fadeUp 1s ease both}
.hero-content>:nth-child(2){animation-delay:.15s}.hero-content>:nth-child(3){animation-delay:.3s}.hero-content>:nth-child(4){animation-delay:.45s}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{position:relative;overflow:hidden}
.btn::after{content:" →";display:inline-block;transition:transform .25s;transform:translateX(0)}
.btn:hover::after{transform:translateX(6px)}
.service-card{transition:transform .4s,box-shadow .4s}
.service-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.55);z-index:2}
.service-card::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--orange);transition:width .45s}
.service-card:hover::after{width:100%}
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s ease;transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
/* ===== POTEK SODELOVANJA ===== */
.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;max-width:1200px;margin:0 auto;counter-reset:k}
.step{position:relative;padding:2rem 1.6rem;background:var(--gray-dark);border-top:3px solid var(--orange);counter-increment:k;transition:transform .35s}
.step:hover{transform:translateY(-5px)}
.step::before{content:"0" counter(k);font-family:'Oswald',sans-serif;font-size:2.6rem;font-weight:700;color:var(--orange);opacity:.35;display:block;line-height:1;margin-bottom:.8rem}
.step h3{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem;margin-bottom:.6rem}
.step p{font-size:.92rem;line-height:1.7;color:rgba(244,238,230,.75)}
.cta-phone{display:block;margin-top:1.8rem;font-family:'Oswald',sans-serif;font-size:1.5rem;letter-spacing:.08em;color:var(--white);text-decoration:none}
.cta-phone:hover{color:var(--orange)}

.about-hero h1{color:#fff}
.info-line{align-items:center}
.info-line p{margin:0;line-height:1.5}
.info-line strong{line-height:1.3}