:root{
    --bg:#0F0F0F;
    --text:#ffffff;
    --muted:rgba(255,255,255,.72);
  
    /* bronze */
    --bronze-1:#E3C08B;
    --bronze-2:#B77A3A;
    --bronze-3:#7A4A22;
  
    --shadow: 0 18px 60px rgba(0,0,0,.55);
    --radius: 18px;
  
    --container: 1120px;
  }
  
  /* RESET */
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:
      radial-gradient(circle at top left, rgba(183,122,58,0.22), transparent 52%),
      radial-gradient(circle at top right, rgba(227,192,139,0.15), transparent 55%),
      radial-gradient(circle at bottom left, rgba(122,74,34,0.25), transparent 55%),
      radial-gradient(circle at bottom right, rgba(183,122,58,0.18), transparent 55%),
      var(--bg);
    color:var(--text);
    line-height:1.65;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .container{max-width:var(--container);margin:0 auto;padding:0 20px}
  
  .grain{
    position:fixed; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;
    pointer-events:none;
    opacity:.28;
  }
  
  /* NAV */
  .nav{
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(12px);
    background: rgba(15,15,15,.55);
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 0;
    gap: 14px;
  }
  .brand{
    display:flex; align-items:center; gap:12px;
    font-weight:800; letter-spacing:.5px;
  }
  .logo{
    width:44px; height:44px; border-radius:14px;
    background:
      radial-gradient(circle at 30% 30%, rgba(227,192,139,.55), transparent 55%),
      linear-gradient(135deg, rgba(183,122,58,.75), rgba(15,15,15,.2)),
      rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    box-shadow: var(--shadow);
    position:relative;
    overflow:hidden;
  }
  .logo::after{
    content:"";
    position:absolute; inset:-40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform: rotate(25deg);
    animation: shine 5.8s linear infinite;
  }
  @keyframes shine{
    0%{transform:translateX(-30%) rotate(25deg)}
    100%{transform:translateX(30%) rotate(25deg)}
  }
  .brand span{opacity:.95}
  .brand small{
    display:block; font-weight:600; opacity:.65; letter-spacing:0;
    font-size:12px; margin-top:-2px;
  }
  .nav-links{display:flex; align-items:center; gap:10px}
  
  /* PILL HOVER (izduženi krug) */
  .pill{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    height:44px;
    padding: 0 14px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.88);
    font-weight:700;
    letter-spacing:.2px;
    transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
    overflow:hidden;
  }
  .pill::before{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width:38px; height:38px;
    border-radius:999px;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle at 30% 30%, rgba(227,192,139,.85), rgba(183,122,58,.70), rgba(122,74,34,.65));
    opacity:0;
    transition: width .22s ease, opacity .18s ease, filter .22s ease;
    z-index:0;
  }
  .pill span{position:relative; z-index:1; transition: transform .18s ease}
  .pill:hover{
    border-color: rgba(227,192,139,.45);
    color:#0f0f0f;
    background: rgba(255,255,255,.02);
    transform: translateY(-1px);
  }
  .pill:hover::before{
    width: calc(100% + 22px);
    opacity: 1;
    filter: blur(.2px);
  }
  .pill:hover span{transform: scale(1.06)}
  .pill.bronze{
    border-color: rgba(227,192,139,.20);
    background: rgba(255,255,255,.03);
  }
  
  /* BUTTONS */
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:10px;
    height:48px;
    padding:0 18px;
    border-radius: 14px;
    border:1px solid rgba(227,192,139,.28);
    background: linear-gradient(135deg, rgba(227,192,139,.95), rgba(183,122,58,.92));
    color:#121212;
    font-weight:900;
    box-shadow: 0 18px 45px rgba(183,122,58,.18);
    transition: transform .18s ease, filter .18s ease;
    cursor:pointer;
  }
  .btn:hover{transform: translateY(-1px); filter: brightness(1.03)}
  .btn:active{transform: translateY(0px) scale(.99)}
  .btn.secondary{
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.14);
    box-shadow:none;
    font-weight:800;
  }
  
  .menu-btn{
    display:none;
    width:44px;height:44px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.92);
    cursor:pointer;
  }
  
  /* HERO */
  .hero{padding: 54px 0 26px}
  .hero-grid{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    align-items:center;
    padding: 26px 0 18px;
  }
  .kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 8px 12px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.82);
    font-weight:700;
    font-size:13px;
  }
  .dot{
    width:10px;height:10px;border-radius:999px;
    background: radial-gradient(circle at 30% 30%, var(--bronze-1), var(--bronze-2), var(--bronze-3));
    box-shadow: 0 0 18px rgba(227,192,139,.35);
  }
  h1{
    font-size: clamp(38px, 5vw, 58px);
    line-height:1.05;
    letter-spacing:-.8px;
    margin: 14px 0 12px;
  }
  .sub{
    font-size: clamp(18px, 2.2vw, 22px);
    color: rgba(255,255,255,.85);
    max-width: 54ch;
  }
  .desc{
    margin-top: 12px;
    color: rgba(255,255,255,.70);
    max-width: 62ch;
  }
  .hero-actions{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
  
  .hero-card{
    border-radius: 26px;
    border:1px solid rgba(255,255,255,.12);
    background:
      radial-gradient(circle at 25% 20%, rgba(227,192,139,.20), transparent 48%),
      radial-gradient(circle at 80% 40%, rgba(0,140,255,.18), transparent 55%),
      rgba(255,255,255,.04);
    box-shadow: var(--shadow);
    overflow:hidden;
    position:relative;
    min-height: 360px;
  }
  .machine{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px}
  .machine svg{
    width:min(420px, 100%);
    opacity:.95;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.65));
  }
  .card-overlay{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(15,15,15,.10), rgba(15,15,15,.35), rgba(15,15,15,.65));
    pointer-events:none;
  }
  .hero-mini{
    position:absolute; left:16px; right:16px; bottom:16px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .stat{
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.20);
    border-radius: 16px;
    padding: 12px;
  }
  .stat b{display:block;font-size:18px}
  .stat small{display:block;color:rgba(255,255,255,.70);margin-top:2px}
  
  /* SECTIONS */
  section{padding: 34px 0}
  .section-title{
    display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    margin-bottom: 16px;
  }
  .section-title h2{font-size:26px; letter-spacing:-.4px}
  .section-title p{color:var(--muted);max-width:60ch}
  
  .grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
  .card{
    border-radius: var(--radius);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    padding: 16px;
    box-shadow: 0 16px 50px rgba(0,0,0,.35);
  }
  .card h3{font-size:18px;margin-bottom:6px}
  .card p{color:rgba(255,255,255,.72)}
  .tag{
    display:inline-flex; gap:8px; align-items:center;
    font-size:12px; font-weight:800;
    padding: 7px 10px;
    border-radius: 999px;
    border:1px solid rgba(227,192,139,.20);
    background: rgba(227,192,139,.10);
    color: rgba(255,255,255,.90);
    margin-bottom: 10px;
  }
  .spacer{height:10px}
  
  /* PROCESS */
  .process{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:start}
  .steps{display:grid; gap:10px}
  .step{
    display:flex; gap:12px; align-items:flex-start;
    padding: 14px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
  }
  .step .num{
    width:34px;height:34px;border-radius:12px;
    display:grid;place-items:center;
    font-weight:900;
    background: linear-gradient(135deg, rgba(227,192,139,.95), rgba(183,122,58,.92));
    color:#101010;
    flex:0 0 auto;
  }
  .step b{display:block}
  .step small{display:block;color:rgba(255,255,255,.72);margin-top:2px}
  
  /* GALLERY */
  .gallery{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px}
  .ph{
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    border:1px solid rgba(255,255,255,.12);
    background:
      radial-gradient(circle at 30% 30%, rgba(0,140,255,.25), transparent 55%),
      radial-gradient(circle at 80% 40%, rgba(227,192,139,.18), transparent 60%),
      rgba(255,255,255,.04);
    overflow:hidden;
    position:relative;
  }
  .ph::after{
    content:"";
    position:absolute; inset:-40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    transform: rotate(20deg);
    animation: shine 6.8s linear infinite;
    opacity:.55;
  }
  
  /* CONTACT */
  .contact{display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start}
  .form{display:grid; gap:10px}
  input, textarea{
    width:100%;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.92);
    padding: 12px 12px;
    outline:none;
    transition: border-color .18s ease;
  }
  input:focus, textarea:focus{border-color: rgba(227,192,139,.45)}
  textarea{min-height: 120px; resize:vertical}
  .form-msg{color:rgba(255,255,255,.7)}
  .contact-text{color:rgba(255,255,255,.72); margin-top:6px}
  
  /* FOOTER */
  .footer{
    padding: 26px 0 40px;
    color: rgba(255,255,255,.65);
    border-top: 1px solid rgba(255,255,255,.10);
    margin-top: 18px;
  }
  
  /* RESPONSIVE */
  @media (max-width: 920px){
    .hero-grid{grid-template-columns: 1fr;}
    .hero-card{min-height: 340px}
    .grid-3{grid-template-columns: 1fr}
    .process{grid-template-columns: 1fr}
    .gallery{grid-template-columns: repeat(2, 1fr)}
    .contact{grid-template-columns: 1fr}
  
    .nav-links{display:none}
    .menu-btn{display:inline-grid;place-items:center}
  
    .nav.open .nav-links{
      display:flex;
      position:absolute;
      left:20px; right:20px;
      top: 72px;
      flex-direction:column;
      gap:10px;
      padding: 14px;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(15,15,15,.85);
      backdrop-filter: blur(10px);
    }
    .nav.open .nav-links .pill{width:100%}
  }
  
  /* GALERIJA SA PRAVIM SLIKAMA */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  
  .gallery-item {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
  }
  
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
  }
  
  .gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,.75),
      rgba(0,0,0,.15),
      transparent
    );
    opacity: .9;
    pointer-events: none;
  }
  
  .gallery-item figcaption {
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 14px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #fff;
    z-index: 2;
  }
  
  /* hover premium efekat */
  .gallery-item:hover img {
    transform: scale(1.08);
  }
  
  /* responsive */
  @media (max-width: 920px) {
    .gallery {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  

  /* ===== AUTO SLIDER GALERIJA ===== */
.gallery-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  
  .gallery-track {
    display: flex;
    gap: 16px;
    transition: transform 0.8s ease-in-out;
  }
  
  .gallery-item {
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
  }
  
  .gallery-item img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    transition: transform .6s ease;
  }
  
  .gallery-item:hover img {
    transform: scale(1.08);
  }
  
  .gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,.75),
      rgba(0,0,0,.2),
      transparent
    );
  }
  
  .gallery-item figcaption {
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 14px;
    color: #fff;
    font-weight: 800;
    z-index: 2;
  }
  
  /* responsive */
  @media (max-width: 768px) {
    .gallery-item {
      min-width: 220px;
      max-width: 220px;
    }
  }
  /* CONTACT – GRAVEX STYLE */
.section-contact {
    padding-top: 40px;
    padding-bottom: 88px;
  }
  
  .two-col {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 28px;
    align-items: center;
  }
  
  .contact-left {
    position: relative;
    padding-left: 32px;
  }
  
  .contact-left::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 2px;
    height: calc(100% - 16px);
    background: linear-gradient(
      to bottom,
      transparent,
      var(--bronze-1),
      var(--bronze-2),
      transparent
    );
  }
  
  .contact-box {
    margin-top: 18px;
    display: grid;
    gap: 14px;
  }
  
  .contact-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 16px;
    background: rgba(255,255,255,.04);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  
  .icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(
      135deg,
      rgba(227,192,139,.35),
      rgba(183,122,58,.35)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }
  
  .contact-title {
    font-weight: 700;
    color: #fff;
  }
  
  .tiny {
    font-size: 0.92rem;
    color: rgba(255,255,255,.70);
  }
  
  /* FORM – DARK */
  .form-dark {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    padding: 22px;
  }
  
  .form-dark label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: rgba(255,255,255,.75);
    font-size: 0.92rem;
    margin-bottom: 14px;
  }
  
  .form-dark input,
  .form-dark textarea {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.25);
    color: #fff;
    outline: none;
    font-size: 1rem;
  }
  
  .form-dark input:focus,
  .form-dark textarea:focus {
    border-color: var(--bronze-1);
  }
  
  /* RESPONSIVE */
  @media (max-width: 860px) {
    .two-col {
      grid-template-columns: 1fr;
    }
  
    .contact-left {
      padding-left: 0;
    }
  
    .contact-left::before {
      display: none;
    }
  }
  /* HERO SOCIAL ICONS */
.hero-socials {
    display: flex;
    gap: 10px;
  }
  
  .hero-socials a {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(227,192,139,.25);
    background: rgba(255,255,255,.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  
  .hero-socials a:hover {
    transform: translateY(-2px);
    background: linear-gradient(
      135deg,
      rgba(227,192,139,.85),
      rgba(183,122,58,.85)
    );
    color: #0f0f0f;
    border-color: rgba(227,192,139,.6);
  }
  /* HERO SOCIAL ICONS – IMAGE VERSION */
.hero-socials {
    display: flex;
    gap: 15px;
    align-items: center;
  }
  
  .hero-socials a {
    width: 50px;
    height: 50px;
    border-radius: 30px;
    border: 1px solid rgba(227,192,139,.25);
    background: rgba(255,255,255,.04);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  
  .hero-socials a img {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
  
  /* hover – premium bronze */
  .hero-socials a:hover {
    transform: translateY(-2px);
    border-color: rgba(227,192,139,.6);
    box-shadow: 0 10px 30px rgba(183,122,58,.35);
    background: linear-gradient(
      135deg,
      rgba(227,192,139,.85),
      rgba(183,122,58,.85)
    );
  }
  
  .hero-socials a:hover img {
    filter: brightness(0.1);
  }
  
/* ===== INTRO ANIMATION ===== */
#intro {
    position: fixed;
    inset: 0;
    background: #0f0f0f;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
  }
  
  .intro-logo {
    display: flex;
    align-items: center;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: clamp(42px, 6vw, 72px);
    color: #fff;
  }
  
/* ===== INTRO ===== */
#intro{
  position:fixed;
  inset:0;
  background:#0f0f0f;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.intro-logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.intro-g-img{
  width:clamp(100px,11vw,170px);
  opacity:0;
  transform:scale(.7);
  animation:introLogo 1s ease forwards;
}

.intro-text{
  display:flex;
  font-weight:900;
  letter-spacing:2px;
  font-size:clamp(36px,5vw,64px);
}

.intro-text span{
  opacity:0;
  transform:translateY(14px);
  animation:introText .35s ease forwards;
  animation-delay:calc(0.8s + var(--i) * 0.08s);
}

.intro-text .space{
  width:14px;
}

@keyframes introLogo{
  to{opacity:1;transform:scale(1)}
}
@keyframes introText{
  to{opacity:1;transform:translateY(0)}
}

 .form-card {
  max-width: 460px;
  padding: 36px;
  background: linear-gradient(160deg, #1a130c, #0e0a06);
  border-radius: 24px;
  box-shadow:
    0 0 40px rgba(230,194,139,0.12),
    inset 0 0 0 1px rgba(230,194,139,0.15);
}

/* FIELD GROUP */
.field {
  margin-bottom: 18px;
}

/* LABEL */
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #e6c28b;
  letter-spacing: 0.2px;
}

/* INPUTS */
.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(230,194,139,0.35);
  border-radius: 16px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.25s ease;
}

/* PLACEHOLDER */
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(255,255,255,0.45);
}

/* FOCUS EFFECT */
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: #e6c28b;
  box-shadow: 0 0 12px rgba(230,194,139,0.35);
  background: rgba(255,255,255,0.05);
}

/* TEXTAREA */
.field textarea {
  resize: vertical;
  min-height: 110px;
}

/* BUTTON */
.btn-submit {
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  border-radius: 18px;
  border: none;
  background: linear-gradient(135deg, #e6c28b, #c89b5f);
  color: #1a1208;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* BUTTON HOVER */
.btn-submit:hover {
  box-shadow: 0 0 20px rgba(230,194,139,0.6);
  transform: translateY(-1px);
}

/* ===== FORM STATUS MESSAGE ===== */
.form-status {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}

/* SUCCESS */
.form-status.success {
  background: linear-gradient(
    135deg,
    rgba(227,192,139,.25),
    rgba(183,122,58,.25)
  );
  border: 1px solid rgba(227,192,139,.55);
  color: #fff;
  box-shadow: 0 10px 30px rgba(183,122,58,.35);
}

/* ERROR */
.form-status.error {
  background: rgba(255,60,60,.15);
  border: 1px solid rgba(255,60,60,.5);
  color: #fff;
  box-shadow: 0 10px 30px rgba(255,60,60,.25);
}

/* SHOW */
.form-status.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}