/*
Theme Name: Iveral
Theme URI: https://iveral.rs
Author: IVERAL
Author URI: https://iveral.rs
Description: Tema za sajt studija IVERAL: radovi, usluge, proces, upiti.
Version: 1.0.0
License: Sva prava zadržana
Text Domain: iveral
Requires PHP: 7.4

Copyright (c) 2026 IVERAL. Sva prava zadržana.
Podaci o korišćenim open-source komponentama su u fajlu CREDITS.txt.
*/
:root{
  --background:60 14% 97%;--foreground:240 3% 10%;--card:0 0% 100%;--secondary:60 6% 93%;
  --muted-foreground:60 2% 41%;--accent:220 100% 50%;--border:60 5% 86%;--radius:.25rem;
  --font-heading:'Fraunces',ui-serif,Georgia,serif;--font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));font:400 17px/1.65 var(--font-body)}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:400;letter-spacing:-.025em;margin:0}
p{margin:0}ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid hsl(var(--accent));outline-offset:3px}
.muted{color:hsl(var(--muted-foreground))}
.accent{color:hsl(var(--accent))}
.wrap{max-width:80rem;margin:0 auto;padding:0 1.5rem}
.wrap6{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.bb{border-bottom:1px solid hsl(var(--border))}
.drafting-grid{background-image:linear-gradient(to right,hsl(var(--border)/.7) 1px,transparent 1px),linear-gradient(to bottom,hsl(var(--border)/.7) 1px,transparent 1px);background-size:88px 88px}
.grid-bg{position:absolute;inset:0}
.ph{width:100%;height:100%;min-height:160px;background-color:hsl(var(--secondary))}
.animate-rise{animation:rise .8s cubic-bezier(.22,.61,.36,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mono-s{font:400 10px var(--font-mono);text-transform:uppercase;letter-spacing:.24em;color:hsl(var(--muted-foreground))}
.mono-l{display:inline-flex;align-items:center;gap:.5rem;font:400 11px var(--font-mono);text-transform:uppercase;letter-spacing:.26em;color:hsl(var(--muted-foreground));transition:color .2s}
.mono-l:hover{color:hsl(var(--foreground))}
.ico{width:1rem;height:1rem;flex-shrink:0}
.ico-5{width:1.25rem;height:1.25rem}
.label{display:flex;align-items:center;gap:.75rem;font:400 11px var(--font-mono);text-transform:uppercase;letter-spacing:.3em;color:hsl(var(--muted-foreground))}
.label::before{content:"";width:2rem;height:1px;background:hsl(var(--accent));flex-shrink:0}
.h2{font-size:1.875rem;line-height:1.2;margin-top:1.5rem;max-width:42rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.75rem;padding:0 2rem;font:500 14px var(--font-body);border-radius:calc(var(--radius) - 2px);border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s}
.btn-p{background:hsl(var(--foreground));color:hsl(var(--background))}
.btn-p:hover{background:hsl(var(--foreground)/.9)}
.btn-o{border-color:hsl(var(--border));background:hsl(var(--background))}
.btn-o:hover{background:hsl(var(--secondary))}
.sec-pad{padding:4rem 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem}

/* Header */
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid hsl(var(--border));background:hsl(var(--background)/.9);backdrop-filter:blur(8px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:1rem;padding-bottom:1rem}
.brand{display:flex;align-items:center;gap:.75rem}
.brand .mark{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;border:1px solid hsl(var(--foreground));font:400 11px var(--font-mono);letter-spacing:.1em}
.brand .name{font:400 1.125rem var(--font-heading);letter-spacing:-.025em}
.nav{display:none;align-items:center;gap:2rem}
.nav a{position:relative;font:400 11px var(--font-mono);text-transform:uppercase;letter-spacing:.22em;color:hsl(var(--muted-foreground));transition:color .2s}
.nav a:hover,.nav a.on{color:hsl(var(--foreground))}
.nav a.on::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:hsl(var(--accent))}
.nav a.cta-link{border:1px solid hsl(var(--foreground));padding:.5rem 1rem;color:hsl(var(--foreground))}
.nav a.cta-link:hover{background:hsl(var(--foreground));color:hsl(var(--background))}
.nav a.cta-link.on::after{display:none}
.menu-btn{background:none;border:0;color:inherit;cursor:pointer;padding:0}
.mobile-nav{display:none;border-top:1px solid hsl(var(--border));background:hsl(var(--background))}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:.75rem 0;border-bottom:1px solid hsl(var(--border));font:400 11px var(--font-mono);text-transform:uppercase;letter-spacing:.22em;color:hsl(var(--muted-foreground))}
.mobile-nav a:last-child{border:0}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero .drafting-grid{opacity:.4}
.hero-in{position:relative;display:grid;gap:3rem;padding-top:4rem;padding-bottom:4rem}
.hero h1{font-size:2.1rem;line-height:1.08;margin-top:1.75rem}
.hero .intro{margin-top:1.5rem;max-width:36rem;font-size:1.125rem}
.hero-actions{margin-top:2.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.hero-note{margin-top:2.5rem;display:flex;align-items:center;gap:.75rem}
.hero-note::before{content:"";width:2.5rem;height:1px;background:hsl(var(--accent))}
.xray-desktop{display:none}
.xray{position:relative;aspect-ratio:4/5;width:100%;overflow:hidden;border:1px solid hsl(var(--border));background:hsl(var(--secondary))}
.xray img{width:100%;height:100%;object-fit:cover}
.xray-lens{position:absolute;inset:0;pointer-events:none;display:none}
.xray-ring{position:absolute;width:300px;height:300px;border-radius:50%;border:1px solid hsl(var(--accent));pointer-events:none;display:none}
.xray-tag{position:absolute;left:.75rem;bottom:.75rem;pointer-events:none;border:1px solid hsl(var(--background)/.3);background:hsl(var(--foreground)/.7);padding:.25rem .5rem;font:400 10px var(--font-mono);text-transform:uppercase;letter-spacing:.24em;color:hsl(var(--background))}
.xray-mobile{display:grid;gap:.75rem}
.xray-mobile figure{margin:0;position:relative;aspect-ratio:4/3;border:1px solid hsl(var(--border));overflow:hidden}
.xray-mobile img{width:100%;height:100%;object-fit:cover}

/* Capabilities */
.caps{display:grid}
.caps>div{padding:2rem 0;border-bottom:1px solid hsl(var(--border))}
.caps>div:last-child{border:0}
.caps p:first-child{font:400 1.125rem var(--font-heading);letter-spacing:-.025em}
.caps p+p{margin-top:.5rem;font-size:14px}

/* Grids */
.cols{display:grid;gap:3rem 2.5rem;margin-top:3rem}
.item{border-top:1px solid hsl(var(--border));padding-top:1.5rem}
.item h3{margin-top:1.25rem;font-size:1.25rem;line-height:1.3}
.item .mono-s{margin-top:.5rem}
.item p.t{margin-top:1rem;font-size:14px;color:hsl(var(--muted-foreground))}
.step-no{font:400 11px var(--font-mono);letter-spacing:.3em;color:hsl(var(--accent))}
.checks{display:grid;gap:1rem}
.checks li{display:flex;gap:1rem;border-bottom:1px solid hsl(var(--border));padding-bottom:1rem}
.checks li:last-child{border:0}
.checks .ico{margin-top:.25rem;color:hsl(var(--accent))}
.checks span{color:hsl(var(--muted-foreground))}
.two{display:grid;gap:3rem}

/* Projects */
.pgrid{display:grid;gap:3rem;margin-top:3rem}
.pcard{display:block}
.pcard .media{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid hsl(var(--border));background:hsl(var(--secondary))}
.pcard .media img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.pcard:hover .media img{transform:scale(1.03)}
.pcard .row{margin-top:1.25rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.pcard h3{font-size:1.25rem;line-height:1.3}
.pcard .row .mono-s{margin-top:.25rem}
.pcard .meta{margin-top:.5rem}
.pcard .sum{margin-top:.75rem;font-size:14px;color:hsl(var(--muted-foreground))}
.filters{display:flex;flex-wrap:wrap;gap:.75rem}
.filters a{border:1px solid hsl(var(--border));padding:.5rem 1rem;font:400 10px var(--font-mono);text-transform:uppercase;letter-spacing:.24em;color:hsl(var(--muted-foreground));transition:color .2s}
.filters a:hover{color:hsl(var(--foreground))}
.filters a.on{border-color:hsl(var(--foreground));background:hsl(var(--foreground));color:hsl(var(--background))}
.empty{margin-top:3rem;border:1px solid hsl(var(--border));padding:2rem;font-size:14px;color:hsl(var(--muted-foreground))}

/* Page header, CTA */
.page-header{position:relative;border-bottom:1px solid hsl(var(--border))}
.page-header .drafting-grid{opacity:.3}
.page-header .wrap6{position:relative;padding-top:4rem;padding-bottom:4rem}
.page-header h1{margin-top:1.5rem;max-width:48rem;font-size:1.875rem;line-height:1.12}
.page-header .lead{margin-top:1.5rem;max-width:42rem;font-size:1.125rem;color:hsl(var(--muted-foreground))}
.cta{background:hsl(var(--foreground));color:hsl(var(--background))}
.cta .wrap6{display:flex;flex-direction:column;gap:2.5rem;padding-top:4rem;padding-bottom:4rem}
.cta .k{font:400 11px var(--font-mono);text-transform:uppercase;letter-spacing:.3em;color:hsl(var(--background)/.6)}
.cta h2{margin-top:1.25rem;max-width:36rem;font-size:1.875rem;line-height:1.15}
.cta p.t{margin-top:1.25rem;max-width:36rem;color:hsl(var(--background)/.7)}
.cta a.go{display:inline-flex;align-self:flex-start;flex-shrink:0;align-items:center;gap:.75rem;border:1px solid hsl(var(--background));padding:1rem 1.5rem;font:400 11px var(--font-mono);text-transform:uppercase;letter-spacing:.26em;transition:background .2s,color .2s}
.cta a.go:hover{background:hsl(var(--background));color:hsl(var(--foreground))}

/* Project detail */
.back{display:inline-flex;align-items:center;gap:.5rem;font:400 10px var(--font-mono);text-transform:uppercase;letter-spacing:.24em;color:hsl(var(--muted-foreground))}
.back:hover{color:hsl(var(--foreground))}
.pd-title{margin-top:2rem;max-width:48rem;font-size:1.875rem;line-height:1.12}
.pd-sum{margin-top:1.5rem;max-width:42rem;font-size:1.125rem;color:hsl(var(--muted-foreground))}
.cover{position:relative;aspect-ratio:16/9;width:100%;border:1px solid hsl(var(--border));background:hsl(var(--secondary));overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover}
.facts{display:grid;gap:2rem;padding:2.5rem 1.5rem}
.facts>div{border-top:1px solid hsl(var(--border));padding-top:1rem}
.facts .v{margin-top:.5rem;font:400 1.125rem var(--font-heading);letter-spacing:-.025em}
.desc{margin-top:1.5rem;max-width:48rem;font-size:1.125rem;color:hsl(var(--muted-foreground))}
.desc p+p{margin-top:1em}
.desc img{height:auto}
.ig{display:grid;gap:1.5rem;margin-top:3rem}
.ig .box{position:relative;aspect-ratio:4/3;border:1px solid hsl(var(--border));background:hsl(var(--secondary));overflow:hidden}
.ig .box img{width:100%;height:100%;object-fit:cover}
.ig .box.fit img{object-fit:contain}
.ig .box.plan{border:0}
.ig .plan-wrap{border:1px solid hsl(var(--border))}

/* Accordion */
.acc{border-top:1px solid hsl(var(--border))}
.acc details{border-bottom:1px solid hsl(var(--border))}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 0;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary .l{display:flex;flex:1;align-items:center;gap:1rem;text-align:left}
.acc summary .n{font:400 11px var(--font-mono);color:hsl(var(--muted-foreground))}
.acc summary h3{font-size:1.25rem}
.acc summary .chev{width:1rem;height:1rem;color:hsl(var(--muted-foreground));transition:transform .2s}
.acc details[open] .chev{transform:rotate(180deg)}
.acc .body{display:grid;gap:2rem;padding-bottom:2rem}
.acc .body p{color:hsl(var(--muted-foreground))}
.acc .feat li{display:flex;gap:.75rem;font-size:14px;color:hsl(var(--muted-foreground));margin-bottom:.5rem}
.acc .feat li::before{content:"";margin-top:.75rem;width:.75rem;height:1px;background:hsl(var(--accent));flex-shrink:0}

/* Process scroll */
.pscroll{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.5rem;scrollbar-width:none}
.pscroll::-webkit-scrollbar{display:none}
.phase{flex-shrink:0;width:290px;scroll-snap-align:start;border:1px solid hsl(var(--border));background:hsl(var(--card));padding:1.5rem}
.phase .no{display:flex;align-items:center;gap:.75rem;font:400 11px var(--font-mono);letter-spacing:.3em;color:hsl(var(--accent))}
.phase .no::after{content:"";width:2.5rem;height:1px;background:hsl(var(--border))}
.phase h3{margin-top:1.5rem;font-size:1.25rem}
.phase>p{margin-top:.75rem;font-size:14px;color:hsl(var(--muted-foreground))}
.phase ul{margin-top:1.5rem;font-size:14px;color:hsl(var(--muted-foreground))}
.phase li{display:flex;gap:.75rem;margin-bottom:.5rem}
.phase li::before{content:"";margin-top:.75rem;width:.75rem;height:1px;background:hsl(var(--accent));flex-shrink:0}

/* Form + contact */
.contact-grid{display:grid;gap:3rem}
.form{border:1px solid hsl(var(--border));background:hsl(var(--card));padding:1.5rem}
.form .hd{display:flex;align-items:center;gap:.75rem;font:400 11px var(--font-mono);text-transform:uppercase;letter-spacing:.3em;color:hsl(var(--muted-foreground))}
.form .hd::after{content:"";flex:1;height:1px;background:hsl(var(--border))}
.fields{margin-top:2rem;display:grid;gap:1.5rem}
.form label{display:block;font:500 14px var(--font-body)}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{display:block;width:100%;margin-top:.5rem;border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);background:transparent;padding:.5rem .75rem;font:400 14px var(--font-body);color:inherit}
.form input,.form select{height:2.5rem}
.form textarea{height:auto}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid hsl(var(--accent));outline-offset:1px}
.form .hp{position:absolute;left:-9999px}
.form .foot{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.sent{border:1px solid hsl(var(--border));background:hsl(var(--card));padding:2rem}
.sent h2{margin-top:1.5rem;font-size:1.5rem}
.sent p{margin-top:.75rem;max-width:28rem;color:hsl(var(--muted-foreground))}
.sent .ico{width:1.5rem;height:1.5rem;color:hsl(var(--accent))}
.err{border:1px solid hsl(0 72% 45%);padding:1rem;margin-bottom:1.5rem;font-size:14px;color:hsl(0 72% 45%)}
.box-b{border:1px solid hsl(var(--border));padding:1.5rem}
.aside{display:grid;gap:2rem;align-content:start}
.box-b ul{margin-top:1.5rem;display:grid;gap:1.25rem}
.box-b li>a,.box-b li>p{display:block;margin-top:.25rem}
.box-b li>a:hover{color:hsl(var(--accent))}
.box-b ol{margin-top:1.5rem;display:grid;gap:1rem;font-size:14px;color:hsl(var(--muted-foreground))}

/* Footer */
.site-footer{border-top:1px solid hsl(var(--border))}
.foot-in{display:grid;gap:3rem;padding:4rem 1.5rem}
.foot-in .nm{font:400 1.5rem var(--font-heading);letter-spacing:-.025em}
.foot-in .tg{margin-top:1rem;max-width:24rem;font-size:14px;color:hsl(var(--muted-foreground))}
.foot-in ul{margin-top:1.25rem;display:grid;gap:.5rem;font-size:14px;color:hsl(var(--muted-foreground))}
.foot-in ul a:hover{color:hsl(var(--foreground))}
.foot-bar{border-top:1px solid hsl(var(--border))}
.foot-bar .wrap{display:flex;flex-direction:column;gap:.5rem;padding-top:1.25rem;padding-bottom:1.25rem}
.foot-bar a:hover{color:hsl(var(--foreground))}

@media(min-width:768px){
  body{}
  .nav{display:flex}.menu-btn,.mobile-nav{display:none!important}
  .hero-in{padding-top:6rem;padding-bottom:6rem}
  .hero h1{font-size:3.4rem}
  .xray-desktop{display:block}.xray-mobile{display:none}
  .caps{grid-template-columns:repeat(4,1fr)}
  .caps>div{border-bottom:0;border-right:1px solid hsl(var(--border));padding:2rem 1.5rem}
  .caps>div:first-child{padding-left:0}.caps>div:last-child{border:0;padding-right:0}
  .sec-pad{padding:6rem 0}
  .h2{font-size:2.25rem}
  .cols.c2,.cols.c3,.cols.c4{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .page-header .wrap6{padding-top:6rem;padding-bottom:6rem}
  .page-header h1{font-size:3rem}
  .cta .wrap6{flex-direction:row;align-items:flex-end;justify-content:space-between;padding-top:6rem;padding-bottom:6rem}
  .cta h2{font-size:2.25rem}
  .pd-title{font-size:3rem}
  .facts{grid-template-columns:repeat(4,1fr)}
  .ig{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr 1fr}
  .acc summary h3{font-size:1.5rem}
  .acc .body{grid-template-columns:1.2fr 1fr}
  .phase{width:360px;padding:2rem}
  .form{padding:2.5rem}
  .fields{grid-template-columns:repeat(2,1fr)}.fields .full{grid-column:span 2}
  .foot-in{grid-template-columns:1.5fr 1fr 1fr}
  .foot-bar .wrap{flex-direction:row;align-items:center;justify-content:space-between}
}
@media(min-width:1024px){
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:center;gap:4rem}
  .cols.c3{grid-template-columns:repeat(3,1fr)}
  .cols.c4{grid-template-columns:repeat(4,1fr)}
  .contact-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
}
@media(prefers-reduced-motion:reduce){.animate-rise{animation:none}*{transition:none!important}}