/* Studium — glavni stil
   Boje, font i obrasci: vidi studium-design-reference.md u projektu */

:root{
  --ink:#1D1D1F; --gray:#6E6E73; --gray-light:#86868B; --bg:#FFFFFF; --bg-alt:#F5F5F7;
  --hair:rgba(0,0,0,0.08); --ease:cubic-bezier(0.16,1,0.3,1);
}
*{margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.47;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1100px; margin:0 auto; padding:0 22px;}
section{position:relative;}
::selection{background:var(--ink); color:#fff;}

header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.72); backdrop-filter:saturate(180%) blur(20px); border-bottom:0.5px solid var(--hair);}
nav{max-width:1100px; margin:0 auto; height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; font-size:12px;}
nav .brand{font-weight:600; font-size:14px; letter-spacing:-0.01em;}
nav .links{display:flex; gap:28px;}
nav .links a{color:var(--ink); opacity:0.82; font-weight:400;}
nav .links a:hover{opacity:1;}
nav .cta{background:var(--ink); color:#fff; padding:6px 14px; border-radius:100px; font-size:12px;}

.hero{padding:32px 22px 0; text-align:center;}
.hero-card{
  position:relative; max-width:1100px; margin:0 auto; border-radius:28px; overflow:hidden;
  background:var(--bg-alt); padding:72px 32px; min-height:420px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.eyebrow{position:relative; z-index:2; font-size:14px; color:var(--gray); font-weight:600; margin-bottom:8px;}
.hero h1{position:relative; z-index:2; font-size:clamp(2.4rem,6.4vw,4.6rem); font-weight:700; letter-spacing:-0.03em; line-height:1.05; margin-bottom:18px;}
.hero h1 span{font-weight:800;}
.hero p.lead{position:relative; z-index:2; font-size:clamp(1.05rem,2vw,1.3rem); color:var(--gray); max-width:560px; margin:0 auto;}
.hero-ctas{display:flex; gap:14px; justify-content:center; margin:32px 0 52px;}
.btn{padding:13px 26px; border-radius:100px; font-size:15px; font-weight:500; border:none; cursor:pointer; display:inline-block;}
.btn-primary{background:var(--ink); color:#fff; font-weight:600;}
.btn-text{color:var(--ink); font-weight:600; display:inline-flex; align-items:center; gap:4px; padding:13px 4px; border-bottom:1.5px solid var(--ink);}
.hero-media{position:absolute; inset:0; z-index:0; transition:opacity 1.2s var(--ease);}
.js .hero-media{opacity:0;}
.js .hero-media.visible{opacity:1;}
.hero-media video{width:100%; height:100%; object-fit:cover;}
.hero-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(245,245,247,0.55), rgba(245,245,247,0.75)); pointer-events:none;}

.stats{padding:56px 22px; border-bottom:0.5px solid var(--hair);}
.stats-row{max-width:760px; margin:0 auto; display:flex;}
.stat{flex:1; text-align:center; padding:0 12px; border-left:0.5px solid var(--hair);}
.stat:first-child{border-left:none;}
.stat b{display:block; font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700; letter-spacing:-0.02em;}
.stat span{font-size:13px; color:var(--gray);}

.section-head{text-align:center; max-width:640px; margin:0 auto 48px;}
.section-head .eyebrow{color:var(--ink); font-weight:800;}
.section-head h2{font-size:clamp(1.9rem,4vw,2.8rem); font-weight:700; letter-spacing:-0.025em; line-height:1.1;}
.section-head p{color:var(--gray); font-size:1.05rem; margin-top:14px;}

.usluge{padding:110px 0; background:var(--bg-alt);}
.svc-scroll{display:flex; gap:16px; overflow-x:auto; padding:4px 22px 20px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.svc-scroll::-webkit-scrollbar{display:none;}
.svc-card{flex:0 0 260px; scroll-snap-align:start; background:#fff; border-radius:18px; padding:26px 22px; border:0.5px solid var(--hair); display:flex; flex-direction:column; min-height:210px;}
.svc-card h3{font-size:1.05rem; font-weight:600; margin-bottom:8px; letter-spacing:-0.01em;}
.svc-card p{font-size:0.88rem; color:var(--gray); line-height:1.5; flex:1;}
.svc-price{margin-top:14px; padding-top:14px; border-top:0.5px solid var(--hair); font-weight:800; font-size:0.95rem; color:var(--ink);}

.recenzije{padding:110px 0;}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.rev-card{border:1px dashed var(--hair); border-radius:18px; padding:28px 24px; display:flex; flex-direction:column; gap:14px; min-height:170px;}
.rev-card .quote-mark{font-family:Georgia,serif; font-size:2.2rem; color:var(--gray-light); line-height:1;}
.rev-card p{color:var(--gray); font-size:0.92rem; line-height:1.55; flex:1;}
.rev-card .who{font-size:0.85rem; font-weight:600; color:var(--gray-light);}
@media (max-width:820px){ .rev-grid{grid-template-columns:1fr;} }

.projekti{padding:110px 0;}
.proj-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.proj-tile{display:block; position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/3; background:var(--bg-alt);}
.proj-tile img{width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease);}
.proj-tile:hover img{transform:scale(1.04);}
.proj-tile .overlay{position:absolute; left:0; right:0; bottom:0; padding:22px; background:linear-gradient(180deg, transparent, rgba(0,0,0,0.55));}
.proj-tile .overlay h3{color:#fff; font-size:1.15rem; font-weight:600;}
.proj-tile .overlay span{color:rgba(255,255,255,0.75); font-size:0.85rem;}
@media (max-width:720px){ .proj-grid{grid-template-columns:1fr;} }

/* Dok su Projekti i Recenzije skriveni, "Kako radim" je bijela da se ne spoji sa sivim Uslugama.
   Kad se vrate, dodati natrag: background:var(--bg-alt); */
.kako{padding:110px 0;}
.kako-list{max-width:640px; margin:0 auto;}
.kako-row{display:flex; gap:28px; align-items:baseline; padding:28px 0; border-top:0.5px solid var(--hair);}
.kako-row:last-child{border-bottom:0.5px solid var(--hair);}
.kako-row .n{font-size:0.85rem; color:var(--gray-light); font-weight:600; width:24px; flex-shrink:0;}
.kako-row h3{font-size:1.05rem; font-weight:600; width:150px; flex-shrink:0;}
.kako-row p{color:var(--gray); font-size:0.95rem;}
@media (max-width:560px){ .kako-row{flex-wrap:wrap;} .kako-row h3{width:100%;} }

.omeni{padding:110px 0;}
.omeni-inner{display:flex; gap:56px; align-items:center;}
.omeni-photo{flex:0 0 340px; aspect-ratio:1; border-radius:24px; overflow:hidden;}
.omeni-photo img{width:100%; height:100%; object-fit:cover; object-position:center 15%;}
.omeni-text{flex:1;}
.omeni-text .eyebrow{color:var(--ink); font-weight:800;}
.omeni-text h2{font-size:clamp(1.9rem,4vw,2.6rem); font-weight:700; letter-spacing:-0.02em; margin:8px 0 18px;}
.omeni-text p{color:var(--gray); font-size:1.02rem; line-height:1.6; margin-bottom:14px; max-width:520px;}
@media (max-width:760px){ .omeni-inner{flex-direction:column;} .omeni-photo{flex:0 0 auto; width:100%; max-width:340px;} }

.faq{padding:110px 0; background:var(--bg-alt);}
.faq-list{max-width:680px; margin:0 auto;}
.faq-row{border-top:0.5px solid var(--hair);}
.faq-row:last-child{border-bottom:0.5px solid var(--hair);}
.faq-q{width:100%; background:none; border:none; padding:22px 4px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:1.02rem; font-weight:500; font-family:inherit; color:var(--ink); text-align:left;}
.faq-icon{font-size:1.3rem; color:var(--ink); font-weight:400; transition:transform 0.3s ease; flex-shrink:0;}
.faq-row.open .faq-icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height 0.35s ease;}
.faq-row.open .faq-a{max-height:320px;}
.faq-a p{padding:0 4px 22px; color:var(--gray); font-size:0.95rem; line-height:1.6; max-width:560px;}

.cta{padding:100px 22px; text-align:center;}
.cta h2{font-size:clamp(2rem,5vw,3.2rem); font-weight:700; letter-spacing:-0.03em; margin-bottom:20px;}
.cta p{color:var(--gray); font-size:1.05rem; margin-bottom:32px;}
.cta-links{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; align-items:center;}

footer{padding:32px 22px; border-top:0.5px solid var(--hair); text-align:center;}
footer p{font-size:12px; color:var(--gray-light);}

.js .reveal{opacity:0; transform:translateY(22px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);}
.js .reveal.visible{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
  .js .reveal{opacity:1; transform:none;}
}
@media (max-width:720px){
  nav .links{display:none;}
  .hero{padding-top:56px;}
}

/* Pristupačnost: vidljiv fokus za tipkovnicu */
a:focus-visible, button:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px;}
.skip{position:absolute; left:-9999px; top:8px; background:var(--ink); color:#fff; padding:8px 14px; border-radius:100px; z-index:100;}
.skip:focus{left:12px;}