@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
    --ink:#142c4c;
    --deep:#10346d;
    --muted:#65748a;
    --sand:#f5f8fc;
    --lime:#ffd522;
    --line:#dfe6ef;
    --white:#fff;
    --max:1220px
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    font-family:'DM Sans',sans-serif;
    color:var(--ink);
    background:#fff;
    -webkit-font-smoothing:antialiased
}
body.nav-open{
    overflow:hidden
}
img{
    display:block;
    max-width:100%;
    height:auto
}
a{
    color:inherit;
    text-decoration:none
}
button{
    font:inherit
}
h1,h2,h3,p{
    margin-top:0
}
h1,h2,h3{
    font-family:'Manrope',sans-serif
}
p{
    line-height:1.75
}
.container{
    width:min(var(--max),calc(100% - 48px));
    margin-inline:auto
}
.section-pad{
    padding:112px 0
}
.skip-link{
    position:absolute;
    left:20px;
    top:-100px;
    background:var(--lime);
    padding:12px;
    z-index:999
}
.skip-link:focus{
    top:12px
}
:focus-visible{
    outline:3px solid #ffd522;
    outline-offset:3px
}
.site-header{
    height:90px;
    background:#10346d;
    position:relative;
    z-index:40;
    border-bottom:1px solid #dce7f7
}
.header-inner{
    display:flex;
    align-items:center;
    gap:30px;
    height:100%
}
.brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-width:220px;
    color:#fff
}
.brand-symbol{
    height:38px;
    width:38px;
    background:var(--deep);
    border-radius:8px;
    display:flex;
    gap:3px;
    align-items:center;
    justify-content:center;
    transform:skew(-9deg)
}
.brand-symbol span{
    width:5px;
    height:17px;
    background:var(--lime);
    transform:rotate(25deg)
}
.brand-symbol span:nth-child(2){
    height:23px
}
.brand-symbol span:nth-child(3){
    height:29px
}
.brand-name{
    color:#fff;
    font-family:Manrope,sans-serif;
    letter-spacing:.085em;
    font-size:12px;
    line-height:1.35;
    font-weight:800
}
.brand-name span{
    display:block;
    font-size:15px;
    letter-spacing:.13em
}
.primary-nav{
    display:flex;
    align-items:center;
    gap:33px;
    margin:auto
}
.primary-nav a{
    color:#fff;
    font-weight:700;
    font-size:13px;
    transition:color .2s
}
.primary-nav a:hover,.primary-nav a[aria-current]{
    color:#ffd522
}
.header-call{
    color:#fff;
    display:flex;
    gap:12px;
    align-items:center;
    font-size:12px;
    font-weight:800;
    white-space:nowrap
}
.header-call small{
    display:block;
    margin-top:3px;
    font-size:14px
}
.call-icon{
    color:#10346d;
    height:42px;
    width:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--lime);
    font-size:24px
}
.menu-toggle{
    display:none
}
.eyebrow{
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#235b9d;
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:23px
}
.eyebrow-light{
    color:var(--lime)
}
.eyebrow-dot{
    height:7px;
    width:7px;
    background:currentColor;
    border-radius:50%
}
.display-title{
    font-size:clamp(38px,4.15vw,62px);
    letter-spacing:-.065em;
    line-height:1.14;
    margin:0;
    font-weight:800
}
.display-title span{
    color:#95acd0
}
.text-link{
    display:inline-flex;
    gap:21px;
    align-items:center;
    border-bottom:1px solid var(--ink);
    padding-bottom:9px;
    font-size:14px;
    font-weight:800
}
.text-link span{
    font-size:19px;
    transition:transform .25s
}
.text-link:hover span{
    transform:translate(4px,-3px)
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    min-height:56px;
    padding:0 25px;
    border:1px solid transparent;
    font-weight:800;
    font-size:13px;
    border-radius:4px;
    transition:transform .2s,background .2s,box-shadow .2s
}
.btn:hover{
    transform:translateY(-3px)
}
.btn span{
    font-size:19px;
    font-weight:400
}
.btn-primary{
    background:var(--lime);
    color:#102f63
}
.btn-primary:hover{
    background:#ffe45d
}
.btn-ghost{
    border-color:#ffffff75;
    color:#fff
}
.btn-ghost:hover{
    background:#ffffff1a
}
.btn-dark{
    background:var(--deep);
    color:#fff
}
.btn-outline-light{
    border-color:#ffffff80;
    color:#fff
}
.hero{
    min-height:688px;
    position:relative;
    background:var(--deep);
    color:#fff;
    isolation:isolate;
    overflow:hidden
}
.hero-image{
    position:absolute;
    inset:0;
    z-index:-2;
    background:url('/assets/images/hero-malterisanje.webp') center 43%/cover no-repeat
}
.hero:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(6,31,69,.96) 0%,rgba(9,49,106,.86) 44%,rgba(7,37,87,.32) 100%);
    z-index:-1
}
.hero-layout{
    min-height:655px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative
}
.hero-content{
    max-width:760px;
    padding:60px 0 95px
}
.hero h1{
    font-size:clamp(48px,6vw,89px);
    line-height:1.045;
    letter-spacing:-.07em;
    margin:0 0 25px;
    font-weight:800
}
.hero h1 em{
    color:var(--lime);
    font-style:normal
}
.hero-intro{
    font-size:17px;
    color:#e4edfb;
    max-width:560px;
    line-height:1.8;
    margin-bottom:35px
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px
}
.hero-proof{
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:48px
}
.hero-proof strong{
    font-family:Manrope;
    font-size:23px;
    display:block
}
.hero-proof span:not(.proof-divider){
    font-size:11px;
    color:#cbdcf2;
    display:block;
    margin-top:5px
}
.proof-divider{
    width:1px;
    height:44px;
    background:#ffffff4b
}
.hero-side-note{
    align-self:end;
    margin:0 0 120px;
    writing-mode:vertical-rl;
    display:flex;
    align-items:center;
    gap:13px;
    white-space:nowrap;
    font-size:10px;
    letter-spacing:.12em
}
.hero-side-note span:last-child{
    color:#cbdcf2
}
.note-line{
    display:block;
    width:1px;
    height:50px;
    background:var(--lime)
}
.hero-bottom{
    border-top:1px solid #ffffff36;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px max(24px,calc((100% - var(--max))/2));
    font-size:11px;
    letter-spacing:.16em;
    color:#d6e3f7
}
.intro-grid{
    display:grid;
    grid-template-columns:1.05fr .8fr;
    gap:110px
}
.intro-copy{
    padding-top:35px
}
.intro-copy p{
    color:#65748a;
    font-size:16px;
    margin-bottom:20px
}
.intro-copy .text-link{
    margin-top:14px
}
.feature-ribbon{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:85px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.feature-ribbon>div{
    padding:32px 45px 27px 0
}
.feature-ribbon>div+div{
    border-left:1px solid var(--line);
    padding-left:45px
}
.feature-ribbon span{
    font-size:12px;
    color:#2a65b3;
    font-weight:800;
    display:block;
    margin-bottom:23px
}
.feature-ribbon strong{
    display:block;
    font-family:Manrope;
    font-size:20px;
    margin-bottom:9px
}
.feature-ribbon p{
    font-size:14px;
    color:var(--muted);
    margin:0
}
.services-section{
    background:var(--sand)
}
.section-heading.split{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:80px;
    margin-bottom:48px
}
.section-heading.split>div{
    max-width:710px
}
.section-heading.split>p{
    max-width:300px;
    color:var(--muted);
    font-size:15px;
    margin-bottom:4px
}
.services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px
}
.service-card{
    background:#fff
}
.service-image{
    position:relative;
    overflow:hidden;
    background:#cbd9ed;
    aspect-ratio:1.6
}
.service-image img{
    height:100%;
    width:100%;
    object-fit:cover;
    transition:transform .5s
}
.service-card:hover img{
    transform:scale(1.04)
}
.image-number{
    position:absolute;
    bottom:19px;
    left:20px;
    color:#fff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-shadow:0 1px 5px #000
}
.service-content{
    padding:35px
}
.service-content h3{
    font-size:25px;
    letter-spacing:-.04em;
    margin-bottom:12px
}
.service-content p{
    color:var(--muted);
    font-size:15px;
    min-height:82px
}
.service-content a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:800;
    font-size:13px;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--line)
}
.service-content a span{
    font-size:20px
}
.services-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:35px;
    margin-top:31px;
    font-size:12px;
    color:#71829c
}
.services-footer>span{
    max-width:650px
}
.process-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center
}
.process-photo{
    height:660px;
    position:relative;
    background:#cbd9ed
}
.process-photo img{
    width:100%;
    height:100%;
    object-fit:cover
}
.process-caption{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:#ffd522;
    display:flex;
    justify-content:space-between;
    padding:20px 24px;
    text-transform:uppercase;
    font-size:12px;
    font-weight:800;
    letter-spacing:.1em
}
.process-caption span{
    font-size:18px
}
.process-copy>p{
    color:var(--muted);
    margin:23px 0 36px;
    max-width:500px
}
.steps{
    padding:0;
    margin:0 0 35px;
    list-style:none
}
.steps li{
    display:flex;
    align-items:start;
    gap:24px;
    border-top:1px solid var(--line);
    padding:20px 0
}
.steps li>span{
    color:#356bad;
    font-weight:800;
    font-size:12px;
    padding-top:4px
}
.steps h3{
    font-size:17px;
    margin:0 0 4px
}
.steps p{
    margin:0;
    color:var(--muted);
    font-size:14px
}
.pricing-section{
    background:#10346d;
    color:#fff;
    position:relative;
    overflow:hidden
}
.pricing-section:before{
    content:'';
    position:absolute;
    width:640px;
    height:640px;
    border:1px solid #ffffff17;
    border-radius:50%;
    right:-180px;
    top:-160px;
    box-shadow:0 0 0 130px #ffffff06,0 0 0 260px #ffffff05
}
.pricing-inner{
    display:grid;
    grid-template-columns:1.6fr .7fr;
    gap:120px;
    align-items:end;
    position:relative
}
.pricing-copy .display-title{
    max-width:760px
}
.pricing-copy .display-title span{
    color:var(--lime)
}
.pricing-copy p{
    max-width:670px;
    color:#d4e3f7;
    margin:20px 0
}
.pricing-copy .btn{
    margin-top:10px
}
.pricing-aside{
    padding:28px 0 0;
    border-top:1px solid #ffffff5a
}
.pricing-asterisk{
    font-family:Manrope;
    font-weight:800;
    font-size:110px;
    color:var(--lime);
    line-height:1
}
.pricing-aside p{
    font-size:15px;
    color:#d4e3f7;
    margin:17px 0 25px
}
.pricing-aside a{
    font-size:12px;
    color:var(--lime);
    font-weight:800
}
.location-grid{
    display:grid;
    grid-template-columns:1fr .85fr;
    align-items:center;
    gap:95px
}
.location-grid>div:first-child>p{
    color:var(--muted);
    max-width:560px;
    margin:25px 0 27px
}
.location-graphic{
    min-height:380px;
    background:#eef4fc;
    position:relative;
    overflow:hidden;
    display:grid;
    place-items:center
}
.location-ring{
    position:absolute;
    border:1px solid #a6c5ed;
    border-radius:50%;
    aspect-ratio:1
}
.ring-one{
    width:180px
}
.ring-two{
    width:310px
}
.ring-three{
    width:470px
}
.location-pin{
    width:80px;
    height:80px;
    border-radius:50%;
    background:var(--deep);
    color:var(--lime);
    display:grid;
    place-items:center;
    font-family:Manrope;
    font-weight:800;
    font-size:25px;
    box-shadow:0 0 0 15px #d8e8fc
}
.location-label{
    position:absolute;
    right:30px;
    bottom:24px;
    font-weight:800;
    font-size:12px;
    letter-spacing:.11em
}
.location-label small{
    display:block;
    font-size:10px;
    color:var(--muted);
    margin-top:4px
}
.faq-preview{
    background:#f7faff
}
.faq-preview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px
}
.faq-preview-grid .text-link{
    margin-top:35px
}
.faq-list details{
    border-bottom:1px solid #dfe6ef;
    padding:25px 0
}
.faq-list details:first-child{
    border-top:1px solid #dfe6ef
}
.faq-list summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    font-family:Manrope;
    font-size:17px;
    font-weight:800
}
.faq-list summary::-webkit-details-marker{
    display:none
}
.faq-list summary span{
    font-size:27px;
    color:#295cb0;
    font-weight:400
}
.faq-list details[open] summary span{
    transform:rotate(45deg)
}
.faq-list details p{
    margin:16px 30px 2px 0;
    color:var(--muted);
    font-size:14px
}
.final-cta{
    background:#0d2a58;
    color:#fff;
    padding:75px 0
}
.final-cta-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px
}
.final-cta h2{
    font-size:clamp(34px,4vw,57px);
    letter-spacing:-.065em;
    line-height:1.14;
    max-width:730px;
    margin-bottom:18px
}
.final-cta h2 em{
    font-style:normal;
    color:var(--lime)
}
.final-cta p{
    color:#cbdcf2;
    margin:0
}
.final-cta-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:270px
}
.site-footer{
    background:#081e40;
    color:#fff;
    padding:75px 0 25px
}
.footer-main{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:80px;
    padding-bottom:65px
}
.brand-footer .brand-symbol{
    background:#ffd522
}
.brand-footer .brand-symbol span{
    background:#12346d
}
.footer-main>div:first-child>p{
    font-size:14px;
    color:#a8bbd6;
    max-width:310px;
    margin:25px 0
}
.footer-main h2{
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin:0 0 20px;
    color:#ffd522
}
.footer-main>div:not(:first-child)>a,.footer-main>div:not(:first-child)>span{
    display:block;
    margin:0 0 13px;
    font-size:14px;
    color:#d5e2f2
}
.footer-main a:hover{
    color:var(--lime)
}
.footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:30px;
    border-top:1px solid #ffffff25;
    padding-top:23px;
    color:#a0b7d4;
    font-size:12px
}
.footer-bottom a{
    color:#dceafe
}
.mobile-call{
    display:none
}
@media(max-width:1100px){
    .primary-nav{
        gap:18px
    }
    .header-call{
        display:none
    }
    .process-grid{
        gap:55px
    }
    .pricing-inner{
        gap:55px
    }
    .intro-grid{
        gap:55px
    }
}
@media(max-width:980px){
    .site-header{
        height:76px
    }
    .brand{
        min-width:0
    }
    .menu-toggle{
        margin-left:auto;
        display:flex;
        width:44px;
        height:44px;
        border:0;
        background:var(--deep);
        border-radius:4px;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px
    }
    .menu-toggle span{
        height:2px;
        width:22px;
        background:var(--lime)
    }
    .primary-nav{
        position:absolute;
        top:76px;
        left:0;
        right:0;
        display:none;
        background:#10346d;
        padding:22px 24px 35px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        box-shadow:0 12px 18px #0001
    }
    .primary-nav.is-open{
        display:flex
    }
    .primary-nav a{
        padding:15px 8px;
        border-bottom:1px solid var(--line);
        font-size:16px
    }
    .section-pad{
        padding:78px 0
    }
    .hero-layout{
        min-height:640px
    }
    .hero-side-note{
        display:none
    }
    .hero-content{
        padding-bottom:80px
    }
    .intro-grid,.process-grid,.location-grid,.faq-preview-grid{
        gap:45px
    }
    .feature-ribbon>div,.feature-ribbon>div+div{
        padding-left:20px;
        padding-right:20px
    }
    .pricing-inner{
        gap:35px
    }
    .process-photo{
        height:550px
    }
    .footer-main{
        gap:30px
    }
}
@media(max-width:700px){
    .container{
        width:min(var(--max),calc(100% - 36px))
    }
    .section-pad{
        padding:70px 0
    }
    .hero{
        min-height:650px
    }
    .hero:before{
        background:linear-gradient(90deg,#092956ef,#092956bc)
    }
    .hero-layout{
        min-height:615px
    }
    .hero-content{
        padding:65px 0 90px
    }
    .hero h1{
        font-size:clamp(46px,11.5vw,67px)
    }
    .hero-intro{
        font-size:15px
    }
    .eyebrow{
        font-size:10px;
        letter-spacing:.1em
    }
    .hero-actions{
        align-items:stretch
    }
    .hero-actions .btn{
        width:100%
    }
    .hero-proof{
        gap:16px;
        margin-top:32px
    }
    .hero-proof strong{
        font-size:18px
    }
    .hero-proof span:not(.proof-divider){
        font-size:10px
    }
    .hero-bottom{
        padding:13px 19px
    }
    .hero-bottom span:nth-child(2){
        display:none
    }
    .intro-grid,.process-grid,.location-grid,.faq-preview-grid,.pricing-inner{
        grid-template-columns:1fr;
        gap:35px
    }
    .display-title{
        font-size:clamp(36px,9vw,47px)
    }
    .intro-copy{
        padding-top:0
    }
    .feature-ribbon{
        grid-template-columns:1fr;
        margin-top:50px
    }
    .feature-ribbon>div,.feature-ribbon>div+div{
        border-left:0;
        border-bottom:1px solid var(--line);
        padding:20px 0
    }
    .feature-ribbon>div:last-child{
        border-bottom:0
    }
    .feature-ribbon span{
        margin-bottom:8px
    }
    .section-heading.split{
        display:block
    }
    .section-heading.split>p{
        max-width:550px;
        margin-top:20px
    }
    .services-grid{
        grid-template-columns:1fr
    }
    .service-content{
        padding:25px
    }
    .service-content h3{
        font-size:22px
    }
    .service-content p{
        min-height:auto
    }
    .services-footer{
        align-items:start;
        flex-direction:column
    }
    .process-photo{
        height:430px
    }
    .process-copy .btn{
        width:100%
    }
    .pricing-asterisk{
        font-size:70px
    }
    .pricing-aside{
        padding-top:15px
    }
    .location-graphic{
        min-height:310px
    }
    .faq-preview-grid{
        gap:28px
    }
    .final-cta{
        padding:70px 0 95px
    }
    .final-cta-inner{
        flex-direction:column;
        align-items:stretch;
        gap:28px
    }
    .final-cta-actions{
        min-width:0
    }
    .footer-main{
        grid-template-columns:1fr 1fr;
        gap:40px
    }
    .footer-main>div:first-child{
        grid-column:1/-1
    }
    .footer-bottom{
        flex-direction:column;
        gap:10px
    }
    .site-footer{
        padding-bottom:85px
    }
    .mobile-call{
        display:flex;
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        z-index:35;
        background:var(--lime);
        color:var(--deep);
        align-items:center;
        justify-content:space-between;
        padding:15px 22px;
        font-size:15px;
        font-weight:800;
        box-shadow:0 -5px 15px #0002
    }
    .mobile-call span{
        font-size:22px
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*:before,*:after{
        animation-duration:.01ms!important;
        transition-duration:.01ms!important
    }
}

/* --- Vizuelni identitet: plava navigacija + žuti znak majstora --- */
.brand-logo{
    width:63px;
    height:63px;
    object-fit:contain;
    flex:none;
    filter:drop-shadow(0 3px 7px rgba(0,0,0,.13))
}
.brand-name{
    letter-spacing:.07em;
    font-size:11px
}
.brand-name span{
    font-size:15px
}
.site-header{
    border-bottom:1px solid rgba(255,255,255,.13)
}
.site-header .brand,.site-header .primary-nav a,.site-header .header-call{
    color:#fff
}
.site-header .primary-nav a:hover,.site-header .primary-nav a[aria-current]{
    color:#ffd522
}
.site-header .primary-nav a[aria-current]{
    text-decoration:underline;
    text-decoration-color:#ffd522;
    text-underline-offset:9px;
    text-decoration-thickness:2px
}
.btn-primary{
    background:#ffd522;
    color:#102e5d
}
.btn-primary:hover{
    background:#ffe36a
}
.call-icon{
    background:#ffd522;
    color:#10346d
}
.location-graphic{
    background:#edf4fe
}
.location-ring{
    border-color:#abc7e8
}
.location-pin{
    box-shadow:0 0 0 15px #dbe9fa
}
.final-cta{
    background:#0d2a58
}
.site-footer{
    background:#081e40
}
.footer-main h2{
    color:#ffd522
}
.brand-footer .brand-logo{
    width:76px;
    height:76px
}
.mobile-call{
    background:#ffd522;
    color:#102e5d
}
@media(max-width:980px){
    .brand-logo{
        height:55px;
        width:55px
    }
    .primary-nav{
        box-shadow:0 12px 20px #0017353f
    }
    .primary-nav a{
        color:#fff;
        border-bottom-color:#ffffff25
    }
    .menu-toggle{
        background:#ffd522
    }
    .menu-toggle span{
        background:#10346d
    }
}
@media(max-width:700px){
    .brand-logo{
        height:49px;
        width:49px
    }
    .brand-name{
        font-size:9px
    }
    .brand-name span{
        font-size:12px
    }
    .site-header .brand{
        gap:8px
    }
}


/* === Usluge: strana u okviru zajedničkog vizuelnog identiteta === */
.services-hero{
    background:#10346d;
    color:#fff;
    overflow:hidden
}
.services-hero-grid{
    min-height:660px;
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:65px;
    align-items:center
}
.services-hero-copy{
    padding:85px 0
}
.services-hero-copy h1{
    font-size:clamp(42px,5.2vw,75px);
    line-height:1.07;
    letter-spacing:-.065em;
    margin:0 0 27px
}
.services-hero-copy h1 em,.service-cta h2 em{
    color:#ffd522;
    font-style:normal
}
.services-hero-copy>p{
    font-size:16px;
    color:#d7e5f5;
    max-width:580px;
    line-height:1.8;
    margin-bottom:31px
}
.services-hero-media{
    height:575px;
    position:relative;
    align-self:end;
    background:#286196
}
.services-hero-media:before{
    content:"";
    position:absolute;
    inset:0;
    box-shadow:inset 0 0 0 12px #ffffff0e;
    z-index:1;
    pointer-events:none
}
.services-hero-media img{
    width:100%;
    height:100%;
    object-fit:cover
}
.services-hero-label{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:#ffd522;
    color:#10346d;
    padding:19px 25px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.1em;
    z-index:2
}
.service-hero-tags{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:39px
}
.service-hero-tags span{
    border:1px solid #ffffff48;
    padding:9px 12px;
    font-size:11px;
    font-weight:700;
    color:#e4f0ff
}
.service-anchor-nav{
    background:#f4f8ff;
    border-bottom:1px solid #dfe6ef
}
.service-anchor-list{
    display:flex;
    gap:34px;
    overflow:auto;
    white-space:nowrap;
    padding-top:19px;
    padding-bottom:19px;
    scrollbar-width:thin
}
.service-anchor-list a{
    font-size:13px;
    font-weight:800;
    color:#1a4379
}
.service-anchor-list a:hover{
    color:#0f77d0
}
.service-intro-grid,.service-price-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px
}
.service-intro-grid>div:last-child p,.service-price-grid>div:last-child p{
    color:var(--muted);
    margin-bottom:18px
}
.services-detail{
    background:#f5f8fc
}
.service-section-heading{
    max-width:760px;
    margin-bottom:55px
}
.service-section-heading>p{
    color:var(--muted);
    max-width:690px;
    margin:20px 0 0
}
.service-feature{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    background:#fff;
    margin-bottom:26px;
    scroll-margin-top:20px
}
.service-feature:last-child{
    margin-bottom:0
}
.service-feature-reverse .service-feature-photo{
    order:2
}
.service-feature-photo{
    min-height:540px;
    background:#dce6f5
}
.service-feature-photo img{
    width:100%;
    height:100%;
    min-height:540px;
    object-fit:cover
}
.service-feature-copy{
    padding:54px clamp(28px,4vw,70px);
    align-self:center
}
.service-index{
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    color:#2f67ad
}
.service-feature-copy h3{
    font-size:clamp(28px,2.7vw,39px);
    line-height:1.17;
    letter-spacing:-.055em;
    margin:19px 0 24px
}
.service-feature-copy p{
    font-size:15px;
    color:var(--muted);
    line-height:1.8;
    margin-bottom:16px
}
.service-checks{
    list-style:none;
    padding:5px 0 0;
    margin:0 0 27px
}
.service-checks li{
    position:relative;
    padding:10px 0 10px 27px;
    border-bottom:1px solid var(--line);
    font-size:13px;
    font-weight:700
}
.service-checks li:before{
    content:"✓";
    position:absolute;
    left:0;
    color:#2760a4;
    font-weight:800
}
.service-feature-copy .text-link{
    font-size:12px;
    line-height:1.5
}
.service-method{
    background:#10346d;
    color:#fff
}
.service-method-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px
}
.service-method-layout .display-title span{
    color:#ffd522
}
.service-method-layout>div>p{
    color:#d3e3f8;
    margin:23px 0 32px;
    max-width:480px
}
.method-steps{
    list-style:none;
    margin:0;
    padding:0
}
.method-steps li{
    display:flex;
    gap:30px;
    border-top:1px solid #ffffff43;
    padding:23px 0
}
.method-steps li:last-child{
    border-bottom:1px solid #ffffff43
}
.method-steps li>span{
    color:#ffd522;
    font-weight:800;
    font-size:13px
}
.method-steps h3{
    font-size:18px;
    margin:0 0 7px
}
.method-steps p{
    margin:0;
    color:#cbdaf1;
    font-size:14px
}
.service-price-grid .btn{
    margin-top:12px
}
.price-faq-link{
    margin:25px 0 0 24px
}
.service-cta{
    background:#0d2a58;
    color:#fff;
    padding:82px 0
}
.service-cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px
}
.service-cta h2{
    font-size:clamp(32px,4.4vw,58px);
    max-width:750px;
    letter-spacing:-.055em;
    line-height:1.15;
    margin:15px 0
}
.service-cta p{
    color:#d1e1f4;
    margin:0
}
.service-cta-actions{
    min-width:275px;
    display:flex;
    flex-direction:column;
    gap:13px
}
@media(max-width:980px){
    .services-hero-grid{
        gap:30px;
        min-height:590px
    }
    .services-hero-media{
        height:460px
    }
    .service-intro-grid,.service-method-layout,.service-price-grid{
        gap:50px
    }
    .service-feature-photo,.service-feature-photo img{
        min-height:420px
    }
    .service-feature-copy{
        padding:34px
    }
}
@media(max-width:700px){
    .services-hero-grid,.service-intro-grid,.service-price-grid,.service-method-layout,.service-feature{
        grid-template-columns:1fr;
        gap:0
    }
    .services-hero-copy{
        padding:67px 0 38px
    }
    .services-hero-copy h1{
        font-size:clamp(43px,11vw,60px)
    }
    .services-hero-media{
        height:330px;
        align-self:auto;
        margin-bottom:0
    }
    .service-hero-tags{
        margin-top:24px
    }
    .service-anchor-list{
        gap:24px
    }
    .service-intro-grid,.service-price-grid,.service-method-layout{
        gap:27px
    }
    .service-feature-reverse .service-feature-photo{
        order:0
    }
    .service-feature-photo,.service-feature-photo img{
        min-height:280px;
        max-height:370px
    }
    .service-feature-copy{
        padding:30px 24px 38px
    }
    .service-section-heading{
        margin-bottom:35px
    }
    .services-detail{
        padding-top:68px
    }
    .service-method{
        padding:70px 0
    }
    .service-cta{
        padding:70px 0 95px
    }
    .service-cta-inner{
        flex-direction:column;
        align-items:stretch;
        gap:25px
    }
    .service-cta-actions{
        min-width:0
    }
    .price-faq-link{
        display:flex;
        margin:26px 0 0;
        width:max-content;
        max-width:100%
    }
}

.partners-block{
    background:#fff
}
.partners-block .display-title{
    margin-bottom:34px
}
.partners-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:15px
}
.partners-grid>a,.partners-grid>div{
    height:115px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    padding:17px;
    background:#fff
}
.partners-grid img{
    max-height:72px;
    width:100%;
    object-fit:contain
}
@media(max-width:800px){
    .partners-grid{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}
@media(max-width:480px){
    .partners-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

/* === PRICE / FAQ / CONTACT: shared extensions === */
.inner-hero{
    background:#10346d;
    color:#fff;
    overflow:hidden
}
.inner-hero-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:60px;
    min-height:515px
}
.inner-hero-grid>div{
    padding:70px 0
}
.inner-hero h1{
    font-size:clamp(40px,5vw,70px);
    letter-spacing:-.055em;
    line-height:1.08;
    margin:20px 0
}
.inner-hero h1 em{
    font-style:normal;
    color:#ffd522
}
.inner-hero p{
    color:#d6e5f7;
    max-width:600px;
    line-height:1.8
}
.inner-hero img{
    width:100%;
    height:450px;
    object-fit:cover;
    align-self:end;
    border-radius:4px 4px 0 0
}
.lead-copy{
    max-width:790px;
    color:var(--muted);
    margin:23px 0 40px
}
.factors-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:33px
}
.factors-grid article{
    background:#f4f8fe;
    padding:34px;
    border:1px solid #e1eaf5
}
.factors-grid article>span{
    font-size:12px;
    color:#2a65a1;
    font-weight:800
}
.factors-grid h3{
    font-size:22px;
    line-height:1.25;
    margin:18px 0
}
.factors-grid p{
    color:var(--muted);
    font-size:14px;
    line-height:1.75;
    margin:0
}
.cost-band{
    background:#10346d;
    color:#fff
}
.price-explain-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center
}
.cost-band .display-title span{
    color:#ffd522
}
.cost-band p{
    color:#d7e5f5
}
.formula-card{
    background:#ffffff13;
    border:1px solid #ffffff4a;
    padding:38px
}
.formula-card>span{
    font-size:11px;
    font-weight:800;
    letter-spacing:.09em;
    color:#ffd522
}
.formula-text{
    font-size:clamp(21px,2.6vw,34px);
    font-weight:800;
    line-height:1.45;
    padding-top:27px
}
.formula-text b{
    color:#ffd522
}
.formula-equals{
    font-size:22px;
    font-weight:800;
    color:#ffd522;
    margin:14px 0 24px
}
.materials-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin:40px 0
}
.materials-grid article{
    border-top:4px solid #ffd522;
    background:#f4f8fe;
    padding:30px
}
.materials-grid h3{
    font-size:23px;
    margin:0 0 17px
}
.materials-grid p{
    color:var(--muted)
}
.price-request{
    background:#f4f8fe
}
.request-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px 70px;
    align-items:start
}
.request-grid ol{
    padding-left:25px
}
.request-grid li{
    padding:10px 0;
    border-bottom:1px solid #d4dfec
}
.request-actions{
    grid-column:2;
    display:flex;
    gap:20px;
    align-items:center;
    flex-wrap:wrap
}
.faq-page{
    background:#f6f8fc
}
.faq-page-grid{
    display:grid;
    grid-template-columns:310px 1fr;
    gap:80px;
    align-items:start
}
.faq-page aside{
    position:sticky;
    top:100px
}
.faq-page aside p{
    color:var(--muted)
}
.faq-page aside nav{
    display:flex;
    flex-direction:column;
    gap:12px;
    border-top:1px solid #dbe4f1;
    margin:25px 0;
    padding-top:22px
}
.faq-page aside nav a{
    color:#10346d;
    font-size:13px;
    font-weight:700
}
.faq-category{
    margin-bottom:45px;
    scroll-margin-top:100px
}
.faq-category h2{
    font-size:26px;
    letter-spacing:-.03em;
    margin:0 0 17px
}
.faq-detail{
    background:#fff;
    margin-bottom:10px;
    border:1px solid #dfe7f2
}
.faq-detail summary{
    cursor:pointer;
    list-style:none;
    padding:24px 28px;
    font-weight:750;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    color:#10346d
}
.faq-detail summary::-webkit-details-marker{
    display:none
}
.faq-detail summary span{
    font-size:22px;
    color:#2174bf
}
.faq-detail[open] summary span{
    transform:rotate(45deg)
}
.faq-detail p{
    color:var(--muted);
    margin:0;
    padding:0 28px 27px;
    line-height:1.8
}
.contact-section{
    background:#f5f8fc
}
.contact-layout{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:75px
}
.contact-info>p{
    color:var(--muted);
    line-height:1.8
}
.contact-info-box{
    padding:23px 0;
    border-bottom:1px solid #dae3ef;
    display:grid;
    gap:8px
}
.contact-info-box span{
    font-size:12px;
    font-weight:800;
    color:#2a65a1
}
.contact-info-box a,.contact-info-box strong{
    font-size:23px;
    color:#10346d
}
.contact-tip{
    background:#10346d;
    color:white;
    padding:26px;
    margin-top:30px
}
.contact-tip h3{
    font-size:21px;
    margin:0 0 10px
}
.contact-tip p{
    color:#d2e5fc;
    margin:0
}
.contact-form-card{
    background:#fff;
    padding:clamp(24px,4vw,55px);
    box-shadow:0 18px 50px #0d2d5b0d
}
.form-header h2{
    font-size:clamp(25px,3vw,37px);
    letter-spacing:-.04em;
    margin:12px 0
}
.form-header p{
    color:var(--muted)
}
.contact-form-card fieldset{
    border:0;
    padding:0;
    margin:27px 0
}
.contact-form-card legend{
    font-weight:800;
    margin-bottom:13px
}
.work-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px
}
.work-options label{
    display:flex;
    align-items:center;
    gap:8px;
    background:#f3f7fc;
    padding:12px;
    font-size:12px;
    font-weight:650;
    cursor:pointer
}
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}
.form-grid label{
    font-weight:750;
    font-size:12px;
    display:flex;
    flex-direction:column;
    gap:7px
}
.form-grid input,.form-grid select,.form-grid textarea{
    font:inherit;
    font-weight:400;
    font-size:14px;
    border:1px solid #c8d7e7;
    border-radius:0;
    padding:13px 12px;
    background:white;
    color:#142b48;
    min-width:0;
    width:100%;
    box-sizing:border-box
}
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{
    outline:2px solid #2f7bca;
    outline-offset:1px
}
.form-grid .form-wide{
    grid-column:1/-1
}
.contact-form-card button[type=submit]{
    margin-top:24px
}
.form-privacy{
    font-size:12px;
    color:var(--muted);
    margin-top:14px
}
.hidden-trap{
    position:absolute;
    left:-9999px;
    height:1px;
    overflow:hidden
}
.form-alert{
    padding:14px 17px;
    font-size:14px
}
.form-alert.success{
    background:#e7f9f0;
    color:#1a6145
}
.form-alert.error{
    background:#fff0ee;
    color:#a32616
}
@media(max-width:900px){
    .inner-hero-grid{
        gap:30px
    }
    .factors-grid,.materials-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .contact-layout,.price-explain-grid{
        gap:35px
    }
    .faq-page-grid{
        grid-template-columns:240px 1fr;
        gap:35px
    }
}
@media(max-width:700px){
    .inner-hero-grid,.price-explain-grid,.request-grid,.faq-page-grid,.contact-layout{
        grid-template-columns:1fr
    }
    .inner-hero-grid>div{
        padding:60px 0 30px
    }
    .inner-hero img{
        height:270px
    }
    .factors-grid,.materials-grid{
        grid-template-columns:1fr
    }
    .request-actions{
        grid-column:1
    }
    .faq-page aside{
        position:static
    }
    .faq-page aside nav{
        display:grid;
        grid-template-columns:1fr 1fr
    }
    .work-options,.form-grid{
        grid-template-columns:1fr
    }
    .service-cta-inner{
        align-items:stretch
    }
    .contact-form-card{
        padding:25px
    }
}
/* Fiksni meni */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

/* Sprečava da meni prekriva sadržaj */
body {
    padding-top: 90px;
}