:root{--red:#e31d2b;--dark:#101214;--ink:#1c2024;--muted:#6c7278;--line:#e6e7e8;--soft:#f4f5f5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}
.topbar{height:78px;padding:0 clamp(20px,5vw,80px);display:flex;align-items:center;justify-content:space-between;gap:28px;background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 16px #00000012}
.brand,.footer-brand{display:flex;align-items:center;gap:11px;font-size:17px;letter-spacing:.8px;white-space:nowrap}.brand b,.footer-brand b{color:var(--red)}.brand-mark{width:39px;height:39px;display:grid;place-items:center;color:#fff;background:var(--red);transform:skew(-8deg)}.brand-mark svg{transform:skew(8deg)}
.brand-logo{height:68px;width:250px;overflow:hidden}.brand-logo img{width:100%;height:100%;object-fit:contain;display:block}.footer-logo{width:220px;height:62px;background:#fff;padding:4px 10px}.footer-logo img{width:100%;height:100%;object-fit:contain;display:block}
.desktop-nav{display:flex;gap:28px;font-size:14px;font-weight:700}.desktop-nav a{padding:29px 0 25px;border-bottom:3px solid transparent}.desktop-nav a:hover{color:var(--red);border-color:var(--red)}.header-actions{display:flex;align-items:center;gap:9px}.erp-button,.nav-call{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 15px;color:#fff;font-size:13px;font-weight:800;white-space:nowrap}.erp-button{background:var(--red)}.erp-button:hover{background:#bf1420}.nav-call{background:var(--dark)}.mobile-erp{background:var(--red);color:#fff}
.mobile-menu{display:none;position:relative}.mobile-menu summary{list-style:none;cursor:pointer}.mobile-menu div{position:absolute;right:0;top:42px;width:200px;display:grid;background:#fff;box-shadow:0 14px 35px #0003}.mobile-menu a{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700}
.hero{min-height:calc(100vh - 78px);position:relative;display:flex;align-items:center;background:url('../slike/autoservis-kekula-hero.png') center/cover no-repeat;color:#fff;overflow:hidden}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,11,.9),rgba(7,9,11,.68) 43%,rgba(7,9,11,.12) 78%)}.hero-content{position:relative;z-index:2;width:min(720px,90%);margin-left:clamp(20px,8vw,130px);padding-bottom:90px}
.eyebrow,.kicker{color:var(--red);font-size:12px;font-weight:800;letter-spacing:2.2px}.eyebrow{display:flex;align-items:center;gap:11px;color:#fff}.eyebrow span{width:35px;height:3px;background:var(--red)}.hero h1{margin:22px 0 20px;font-size:clamp(50px,7vw,94px);line-height:.93;letter-spacing:-3px;text-transform:uppercase}.hero h1 em{color:var(--red);font-style:normal}.hero-copy{max-width:610px;color:#e6e8ea;font-size:19px;line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}.button{min-height:52px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:14px;transition:.2s}.button:hover{transform:translateY(-2px)}.button-red{background:var(--red);color:#fff}.button-ghost{border:1px solid #ffffff88;color:#fff;backdrop-filter:blur(5px)}
.hero-info{position:absolute;z-index:3;bottom:0;right:0;width:min(870px,72%);min-height:110px;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;color:var(--ink)}.hero-info>div{display:flex;align-items:center;gap:14px;padding:24px;border-right:1px solid var(--line)}.hero-info svg{color:var(--red);flex:none}.hero-info span,.contact-list span{font-size:14px;line-height:1.45}.hero-info small,.contact-list small{display:block;margin-bottom:6px;color:#90959a;font-size:10px;font-weight:800;letter-spacing:1.5px}
.section{padding:110px clamp(20px,8vw,130px)}.section-heading{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end;margin-bottom:55px}.section-heading h2,.about h2,.contact h2{margin:10px 0 0;font-size:clamp(37px,4vw,57px);line-height:1.05;letter-spacing:-2px;text-transform:uppercase}.section-heading>p,.about-copy>p,.contact-copy>p{color:var(--muted);line-height:1.8;font-size:16px}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.service-card{min-height:255px;padding:34px;position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:.25s}.service-card:hover{background:var(--dark);color:#fff;transform:translateY(-4px)}.service-card>svg{width:34px;height:34px;color:var(--red);margin:18px 0 28px}.service-number{position:absolute;right:24px;top:20px;color:#c7c9cb;font-size:12px;font-weight:800}.service-card h3{margin:0 0 12px;font-size:20px;text-transform:uppercase}.service-card p{margin:0;color:var(--muted);line-height:1.65;font-size:14px}.service-card:hover p{color:#bfc3c6}
.work-gallery{display:grid;grid-template-columns:repeat(3,1fr);background:var(--dark)}.work-card{height:430px;position:relative;overflow:hidden}.work-card img{width:100%;height:100%;object-fit:cover;filter:brightness(.7);transition:.5s}.work-card:hover img{transform:scale(1.04);filter:brightness(.85)}.work-card>div{position:absolute;inset:auto 32px 30px;color:#fff}.work-card h3{margin:0 0 8px;font-size:24px;text-transform:uppercase}.work-card p{margin:0;color:#d3d6d8}
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,8vw,110px);align-items:center;background:var(--soft)}.about-photo{min-height:520px;position:relative}.about-photo img{width:100%;height:520px;object-fit:cover}.about-photo>span{position:absolute;right:-25px;bottom:-25px;width:170px;height:145px;display:flex;flex-direction:column;justify-content:center;padding:24px;background:var(--red);color:#fff}.about-photo b{font-size:25px;text-transform:uppercase}.about-photo small{margin-top:5px}.about-copy ul{margin:28px 0;padding:0;list-style:none;display:grid;gap:14px}.about-copy li{display:flex;align-items:center;gap:10px;font-weight:700}.about-copy li svg{color:var(--red);width:19px}.text-link{display:inline-flex;align-items:center;gap:10px;color:var(--red);font-weight:800;text-transform:uppercase;font-size:13px}.text-link svg{width:18px}
.cta-strip{padding:55px clamp(20px,8vw,130px);display:flex;justify-content:space-between;align-items:center;gap:30px;background:var(--red);color:#fff}.cta-strip p{margin:0 0 8px;font-size:11px;letter-spacing:2px;font-weight:800}.cta-strip h2{margin:0;font-size:clamp(27px,3vw,43px);text-transform:uppercase}.button-light{background:#fff;color:var(--dark);flex:none}
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}.contact-list{display:grid;margin-top:32px;border-top:1px solid var(--line)}.contact-list>a,.contact-list>div{display:flex;align-items:flex-start;gap:16px;padding:19px 0;border-bottom:1px solid var(--line)}.contact-list svg{color:var(--red);width:21px;flex:none}.map-wrap{min-height:540px;background:#ddd}.map-wrap iframe{width:100%;height:100%;min-height:540px;border:0;filter:grayscale(.6) contrast(1.1)}
footer{min-height:130px;padding:35px clamp(20px,8vw,130px);display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--dark);color:#fff}footer>p{color:#9da1a5;font-size:13px}.copyright{text-align:right}
@media(max-width:1100px){.desktop-nav{display:none}.mobile-menu{display:block}}
@media(max-width:980px){.header-actions{display:none}.hero-info{width:100%}.services-grid{grid-template-columns:repeat(2,1fr)}.work-card{height:350px}.about{gap:55px}.contact{grid-template-columns:1fr}}
@media(max-width:700px){.topbar{height:68px}.brand{font-size:14px}.brand-logo{width:205px;height:58px}.brand-mark{width:35px;height:35px}.hero{min-height:820px;align-items:flex-start;background-position:58% center}.hero-content{margin:0;width:100%;padding:100px 20px 265px}.hero h1{letter-spacing:-2px}.hero-copy{font-size:16px}.hero-actions{display:grid}.hero-info{grid-template-columns:1fr}.hero-info>div{padding:14px 20px}.section{padding:75px 20px}.section-heading{grid-template-columns:1fr;gap:18px}.section-heading h2,.about h2,.contact h2{letter-spacing:-1px}.services-grid{grid-template-columns:1fr}.service-card{min-height:225px}.work-gallery{grid-template-columns:1fr}.work-card{height:320px}.about{grid-template-columns:1fr}.about-photo,.about-photo img{min-height:330px;height:330px}.about-photo>span{right:0;bottom:-20px}.cta-strip{padding:45px 20px;align-items:flex-start;flex-direction:column}.button-light{width:100%}.map-wrap,.map-wrap iframe{min-height:400px}footer{flex-direction:column;text-align:center}.copyright{text-align:center}}