:root{
    /* Brand / neutrals */
    --ss-ink:    #1b1b1b;
    --ss-muted:  #6b6b6b;
    --ss-border: rgba(0,0,0,.10);
  
    /* Core palette */
    --ss-olive:  #2f3b2f;
    --ss-brown:  #6a4a35;
  
    /* Backgrounds */
    --ss-off:    #f2efe7;   /* prljavo bela (default body) */
    --ss-ivory:  #f4f1eb;   /* slonova kost (usluge) */
    --ss-dark:   #27221E;   /* tamna braon (projekti/footer/linije) */
  
    /* Accent */
    --ss-bronze: #ba9663;   /* prljava zlatna / bronza */
  
    /* Extra tones used in hero overlay */
    --ss-clay:   #5A4A3E;   /* svetlija braon (overlay base) */
  
    /* Typography */
    --ss-font: 'STIX Two Text', serif;
    --ss-font-h: 'Arimo'
  }
  
  /* =========================================================
     1) RESET / BASE
  ========================================================= */
  *{ margin:0; padding:0; box-sizing:border-box; }
  
  body{
    font-family: var(--ss-font);
    font-weight: 200;
    line-height: 1.6;
    color: var(--ss-ink);
    background: var(--ss-off);
  }
  
  a{ color: inherit; }
  
  /* =========================================================
     2) LAYOUT HELPERS
  ========================================================= */
  .ss-page{ padding-top: 5.5rem; }        /* 88px */
  .is-home .ss-page{ padding-top: 0; }   /* home hero već računa prostor */
  
  
  
  /* =========================================================
     4) HERO (home)
  ========================================================= */
  .hero{
    padding: 6.875rem 0 5.625rem; /* 110px 0 90px */
    color: #fff;
    background: linear-gradient(
      180deg,
      rgba(47,59,47,.92) 0%,
      rgba(106,74,53,.90) 100%
    );
  }
  
  /* Na početnoj: pomeraj hero sadržaja ispod navbara */
  .is-home .hero-slider .hero-content{
    padding-top: clamp(5.5rem, 10vh, 7.5rem);
  }
  
  /* Slider container */
  .hero-slider{
    position: relative;
    min-height: min(95vh, 60rem);
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  
  .hero-slides{ position:absolute; inset:0; }
  
  .hero-slide{
    position:absolute;
    inset:0;
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    opacity: 0;
    transition: opacity 900ms ease;
  }
  .hero-slide.is-active{ opacity: 1; }
  
  .hero-overlay{
    position:absolute;
    inset:0;
    background:
      linear-gradient(
        90deg,
        rgba(90, 74, 62, 0.65) 0%,
        rgba(90, 74, 62, 0.45) 55%,
        rgba(186, 150, 99, 0.38) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,0.18) 0%,
        rgba(0,0,0,0.38) 100%
      );
  }
  
  .hero-content{
    position: relative;
    z-index: 2;
    text-align: left;
    padding-block: clamp(3rem, 6vh, 5rem);
  }
  
  .hero-content h1{
    font-family: var(--ss-font-h);
    font-style: italic;

    font-size: clamp(2.1rem, 4.2vw, 3.6rem);
    font-weight: 900;
    color: #fff;
    max-width: 20ch;
    margin-bottom: 0.75rem;

  }
  
  .hero-content p{
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    color: rgba(255,255,255,.88);
    max-width: 60ch;
    margin-bottom: 1.25rem;
    font-weight: 100;
  }
  
  /* Dots navigacija (ako ih vratiš) */
  .hero-dots{
    position: absolute;
    z-index: 3;
    inset-inline: 0;
    bottom: clamp(1rem, 3vh, 2rem);
    display: flex;
    gap: 0.6rem; /* ostaje jer je već rem-like (0.6rem je ok), ali nije neophodno menjati */
    justify-content: center;
    align-items: center;
  }
  
  .hero-dot{
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    border: 0.0625rem solid rgba(255,255,255,.55); /* 1px */
    background: rgba(255,255,255,.15);
    transition: transform 200ms ease, background 200ms ease;
  }
  .hero-dot.is-active{
    background: rgba(255,255,255,.85);
    transform: scale(1.1);
  }
  
  /* =========================================================
     5) SECTIONS (shared)
  ========================================================= */
  .section{ padding: 5rem 0; } /* 80px */
  
  .section-alt{
    background: rgba(255,255,255,.55);
    border-top: 0.0625rem solid var(--ss-border);    /* 1px */
    border-bottom: 0.0625rem solid var(--ss-border); /* 1px */
  }
  
  .ss-title{
    font-weight: 900;
    margin-bottom: 0.625rem; /* 10px */
    color: var(--ss-olive);
    font-size: clamp(2.1rem, 3.2vw, 2.8rem);
    letter-spacing: -0.01em;
  }
  
  .ss-lead{
    color: var(--ss-muted);
    max-width: 75ch;
  }
  
  /* =========================================================
     6) CARDS (shared)
  ========================================================= */
  .ss-card{
    background: rgba(106, 74, 53, 0.65);
    border: 0.0625rem solid rgba(255,255,255,.18); /* 1px */
    border-radius: 1.375rem; /* 22px */
    padding: 1.625rem;       /* 26px */
    color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0.75rem 1.75rem rgba(0,0,0,.12); /* 12px 28px */
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
  }
  
  .ss-card:hover{
    transform: translateY(-0.25rem); /* -4px */
    box-shadow: 0 1.125rem 2.5rem rgba(0,0,0,.22); /* 18px 40px */
    background: var(--ss-brown);
  }
  
  .ss-card h3{
    font-size: 1.125rem;  /* 18px */
    font-weight: 800;
    margin-bottom: 0.625rem; /* 10px */
  }
  
  .ss-card p{ color: rgba(255,255,255,.9); }
  
  /* =========================================================
   7) BUTTONS (shared)
========================================================= */
.btn-ss{
    background: var(--ss-dark);
    border: 0.0625rem solid rgba(255,255,255,.14);
    color: #fff;
    padding: 0.75rem 1.375rem;
    border-radius: 0rem;
  }
  
  .btn-ss:hover{ background: #5b3f2f; color:#fff; }
  
  .btn-outline-ss{
    border: 0.0625rem solid rgba(255,255,255,.35);
    color: #fff;
    padding: 0.75rem 1.375rem;
    border-radius: 0;              /* <-- NEMA OBLOG */
  }
  
  .btn-outline-ss:hover{ background: rgba(255,255,255,.10); color:#fff; }
  
  .ss-btn-brown{
    background: var(--ss-brown);
    color: #fff;
    padding: 0.875rem 2.125rem;
    font-weight: 600;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }
  
  .ss-btn-brown:hover{
    background: #5b3f2f;
    color:#fff;
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.625rem 1.5rem rgba(0,0,0,.18);
  }
  
  
  /* =========================================================
   HOME – PROJEKTI (uvećano proporcionalno, isti stil)
========================================================= */
#home-projekti{
    position: relative;
    overflow: hidden;
    background: var(--ss-dark);
    color: var(--ss-ivory);
  
    /* veća sekcija (kao “Usluge”, čak i malo jače) */
    padding-block: clamp(5.5rem, 7vw, 7rem);
  }
  
  #home-projekti .ss-title{
    color: var(--ss-bronze);
    /* malo veći naslov samo u ovoj sekciji */
    font-size: clamp(2.4rem, 3.8vw, 3.2rem);
    margin-bottom: 0.875rem;
  }
  
  #home-projekti .ss-lead,
  #home-projekti p{
    color: var(--ss-bronze);
    /* malo veći tekst radi “premium” osećaja */
    font-size: clamp(1.05rem, 1.2vw, 1.25rem);
    line-height: 1.75;
    max-width: 60ch;
  }
  
  #home-projekti .btn-ss{
    background: var(--ss-dark);
    color: var(--ss-ivory);
    border-color: var(--ss-bronze);
    border-width: 0.125rem;
  
    /* proporcionalno veće dugme */
    padding: 0.95rem 1.75rem;
    font-size: 1.05rem;
  }
  
  #home-projekti .btn-ss:hover{
    background: var(--ss-bronze);
    color:#fff;
  }
  
  /* full-bleed desna slika */
  #home-projekti .home-projekti-right{ position: static; }
  
  #home-projekti .proj-tri-wrap{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 50vw;
  
    /* veća slika = veća sekcija */
    height: clamp(26rem, 48vw, 34rem);
    z-index: 1;
  }
  
  #home-projekti .proj-tri{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: none;
    box-shadow: none;
    -webkit-clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  
  #home-projekti .proj-tri img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
  }
  
  /* tekst iznad slike */
  #home-projekti .home-projekti-left{
    position: relative;
    z-index: 5;
  }
  
  /* =========================
   HOME – PROJEKTI (MOBILE FIX)
   ========================= */
@media (max-width: 62em){

    /* Sekcija malo niža na mobilnom, ali i dalje “premium” */
    #home-projekti{
      padding-block: clamp(3.25rem, 7vw, 4.75rem);
    }
  
    /* Ugasimo full-bleed absolute sliku i vratimo normalan flow */
    #home-projekti .proj-tri-wrap{
      position: relative;
      top: auto;
      right: auto;
      transform: none;
      width: 100%;
      height: auto;
      margin-top: 1rem;
    }
  
    /* Skidamo clip-path na mobilnom da ne seče i ne pravi čudne ivice */
    #home-projekti .proj-tri{
      clip-path: none;
      -webkit-clip-path: none;
      border-radius: 0rem;
      overflow: hidden;
      border: 0.0625rem solid rgba(186,150,99,.35);
      box-shadow: 0 0.875rem 1.875rem rgba(0,0,0,.18);
    }
  
    /* Slika: fiksna, uredna visina */
    #home-projekti .proj-tri img{
      height: 16.25rem; /* 260px -> rem? 260/16=16.25rem (ovo je rem, OK) */
      width: 100%;
      object-fit: cover;
      display: block;
    }
  
    /* Da tekst ne bude previše širok i da ostane “desktop-like” */
    #home-projekti .proj-block{
      max-width: 65ch;
    }
  
    /* Dugme malo kompaktnije na telefonu */
    #home-projekti .btn-ss{
      padding: 0.85rem 1.5rem;
      font-size: 1rem;
    }
  }
  
  /* Ultra small: još malo niža slika */
  @media (max-width: 36em){
    #home-projekti .proj-tri img{
      height: 14.5rem;
    }
  }
  
  
  /* ==== HOME – PROJEKTI: tekst fix ==== */

/* Ne bojimo sve <p> u bronzu, nego samo lead/akcenat */
#home-projekti .ss-lead{
  color: rgba(255,255,255,.78);
}

/* Ovo je tvoj realan tekst (proj-block) */
#home-projekti .proj-block{
  color: rgba(255,255,255,.86);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.2vw, 1.18rem);
  line-height: 1.9;
  max-width: 56ch;
  text-shadow: 0 2px 10px rgba(0,0,0,.22);
  margin-top: .9rem;
}

/* Prvi blok neka bude malo “lead” */
#home-projekti .proj-block:first-of-type{
  color: rgba(255,255,255,.90);
}

/* Da dugme ne bude previše “odvojeno” */
#home-projekti .mt-4{ margin-top: 1.4rem !important; }

  
  
  
  /* =========================================================
     SECTION DIVIDER
  ========================================================= */
  .ss-section-divider{
    height: 0.25rem; /* 4px */
    width: 100%;
    background-color: var(--ss-dark);
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(186,150,99,.45) 15%,
      rgba(186,150,99,.95) 40%,
      rgba(186,150,99,.95) 60%,
      rgba(186,150,99,.45) 85%,
      transparent 100%
    );
  }
  
  /* =========================================================
     HOME – USLUGE (slonova kost + bronza okviri)
  ========================================================= */
  .ss-services{
    background: var(--ss-ivory);
    color: var(--ss-dark);
    border-top: 0.0625rem solid rgba(106,74,53,.16);    /* 1px */
    border-bottom: 0.0625rem solid rgba(106,74,53,.16); /* 1px */
    position: relative;
    overflow: hidden;
  }
  
  .ss-services::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 18% 12%, rgba(186,150,99,.10), transparent 52%),
      radial-gradient(circle at 88% 78%, rgba(47,59,47,.06), transparent 58%);
    pointer-events:none;
  }
  
  .ss-services .container{ position: relative; z-index: 1; }
  
  .ss-services-head{
    margin-bottom: 1.75rem; /* 28px */
    max-width: 70ch;
  }
  
  .ss-services-kicker{
    display:inline-block;
    width: 3.75rem;   /* 60px */
    height: 0.1875rem;/* 3px */
    background: var(--ss-bronze);
    border-radius: 999px;
    margin-bottom: 0.875rem; /* 14px */
  }
  
  .ss-services-title{
    font-size: clamp(2.2rem, 3.6vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem 0; /* 8px */
    color: var(--ss-dark);
  }
  
  .ss-services-lead{
    margin: 0;
    color: rgba(186,150,99,.88);
  }
  
  .ss-services-box{
    border: 0.125rem solid rgba(186,150,99,.62); /* 2px */
    border-radius: 0;
    padding: 1.75rem 1.625rem; /* 28px 26px */
    background: rgba(255,255,255,.38);
    box-shadow: 0 0.875rem 2.125rem rgba(0,0,0,.12); /* 14px 34px */
    backdrop-filter: blur(0.1875rem); /* 3px */
  }
  
  .ss-services-subtitle{
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0.875rem; /* 14px */
    color: var(--ss-clay);
  }
  
  .ss-services-list{ list-style:none; padding:0; margin:0; }
  
  .ss-services-list li{
    padding: 0.375rem 0; /* 6px */
    color: rgba(27,27,27,.82);
    line-height: 1.35;
  }
  
  .ss-services-grid{ margin-top: 0.625rem; /* 10px */ }
  
  @media (max-width: 61.9375rem){ /* 991px */
    .ss-services-box{ padding: 1.5rem 1.25rem; /* 24px 20px */ }
  }
  


  @media (max-width: 36em){
    .hero{
      padding: 5.75rem 0 4.5rem;
    }
  
    .hero-content h1{
      max-width: 18ch;
    }
  
    .hero-content p{
      max-width: 48ch;
    }
  }