:root {
    --inspection-green: #00db68;
    --inspection-green-soft: #45f09a;
    --inspection-mint: #a7ffd0;
    --inspection-line: rgba(0, 219, 104, .2);
    --inspection-ink: #060c0c;
    --inspection-panel: rgba(15, 25, 25, .9);
    --inspection-radius: 20px;
}

html {
    scroll-padding-top: 96px;
    scrollbar-color: var(--inspection-green) var(--bg-primary);
}

body {
    counter-reset: inspection-section;
    background:
        radial-gradient(circle at 8% 2%, rgba(0, 219, 104, .12), transparent 30rem),
        radial-gradient(circle at 95% 34%, rgba(0, 200, 83, .07), transparent 32rem),
        var(--bg-primary);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .2;
    background-image:
        linear-gradient(rgba(0, 219, 104, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 219, 104, .1) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

::selection {
    color: #06110b;
    background: var(--inspection-green-soft);
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--inspection-green-soft) !important;
    outline-offset: 4px;
}

.scroll-progress {
    position: fixed;
    z-index: 1400;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--inspection-green), var(--inspection-mint));
    box-shadow: 0 0 18px rgba(0, 219, 104, .7);
}

.navbar {
    border-bottom: 1px solid var(--inspection-line);
    background: rgba(5, 15, 15, .88) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
}

.navbar::after {
    content: "";
    position: absolute;
    left: max(1rem, calc((100% - 1180px) / 2));
    right: max(1rem, calc((100% - 1180px) / 2));
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--inspection-green), transparent);
    opacity: .48;
}

.nav-logo-icon {
    box-shadow: 0 0 0 5px rgba(0, 219, 104, .08), 0 10px 30px rgba(0, 219, 104, .2);
}

.nav-logo-text {
    letter-spacing: -.02em;
}

.nav-link {
    border: 1px solid transparent;
    border-radius: 11px;
}

.nav-link:is(:hover, .active, [aria-current="page"]) {
    border-color: var(--inspection-line);
    background: linear-gradient(135deg, rgba(0, 219, 104, .12), rgba(0, 219, 104, .03));
}

.hero {
    min-height: min(900px, 92svh) !important;
    padding: 150px max(24px, calc((100vw - 1200px) / 2)) 90px !important;
    justify-content: flex-start !important;
    background:
        linear-gradient(90deg, rgba(5, 13, 14, .98) 0%, rgba(5, 13, 14, .94) 51%, rgba(5, 13, 14, .56) 100%),
        radial-gradient(circle at 76% 45%, rgba(0, 219, 104, .14), transparent 27rem),
        var(--bg-primary) !important;
}

.hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    right: clamp(45px, 10vw, 170px);
    top: 50%;
    width: min(32vw, 430px);
    aspect-ratio: 1;
    transform: translateY(-47%);
    border: 1px solid rgba(0, 219, 104, .28);
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 31%, rgba(0, 219, 104, .1) 31.4% 32%, transparent 32.4% 48%, rgba(0, 219, 104, .16) 48.4% 49%, transparent 49.4%),
        linear-gradient(90deg, transparent 49.8%, rgba(0, 219, 104, .24) 50%, transparent 50.2%),
        linear-gradient(transparent 49.8%, rgba(0, 219, 104, .24) 50%, transparent 50.2%);
    box-shadow: inset 0 0 80px rgba(0, 219, 104, .06), 0 0 100px rgba(0, 219, 104, .05);
}

.hero::after {
    content: "964";
    position: absolute;
    z-index: 0;
    right: clamp(80px, 14vw, 225px);
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 219, 104, .2);
    font: 800 clamp(4.5rem, 9vw, 8.6rem)/1 var(--font-heading);
    letter-spacing: -.08em;
}

.hero-content {
    width: min(100%, 760px);
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.hero-badge {
    margin-bottom: 22px;
    border-color: var(--inspection-line);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}

.hero-title {
    max-width: 740px;
    font-size: clamp(3.25rem, 7.3vw, 6.65rem) !important;
    line-height: .96 !important;
    letter-spacing: -.065em;
    text-wrap: balance;
}

.hero-title-main {
    padding-bottom: .07em;
}

.hero-subtitle,
.hero-description {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 660px;
}

.hero-cta,
.hero-stats {
    justify-content: flex-start !important;
}

.hero-cta {
    margin-bottom: 46px;
}

.hero-stats {
    width: min(100%, 650px);
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px !important;
    margin-bottom: 0 !important;
}

.hero-stat {
    position: relative;
    padding: 17px 18px;
    border: 1px solid var(--inspection-line);
    border-radius: 15px;
    background: rgba(12, 24, 23, .68);
    text-align: left !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.hero-stat-number {
    font-size: clamp(1.8rem, 3vw, 2.7rem) !important;
    line-height: 1;
}

.hero-stat-label {
    display: block;
    margin-top: 7px;
    font-size: .69rem !important;
    letter-spacing: .12em;
}

.scroll-indicator {
    left: auto !important;
    right: max(24px, calc((100vw - 1200px) / 2));
    transform: none !important;
}

section {
    position: relative;
    isolation: isolate;
}

section:not(.hero) {
    counter-increment: inspection-section;
    overflow: clip;
}

section:not(.hero)::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -100px;
    left: 0;
    right: 0;
    height: 170px;
    background: linear-gradient(to bottom, transparent, rgba(0, 219, 104, .025));
    pointer-events: none;
}

.section-header {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    letter-spacing: .2em !important;
}

.section-label::before {
    content: "0" counter(inspection-section);
    color: var(--inspection-green-soft);
    font-variant-numeric: tabular-nums;
}

.hero .section-label::before {
    content: "•";
}

.section-title {
    letter-spacing: -.04em;
    text-wrap: balance;
}

.section-subtitle {
    text-wrap: pretty;
}

.glass-card,
.service-card,
.hours-card,
.contact-info {
    border: 1px solid var(--inspection-line) !important;
    border-radius: var(--inspection-radius) !important;
    background:
        linear-gradient(145deg, rgba(0, 219, 104, .045), transparent 42%),
        var(--inspection-panel) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 18px 50px rgba(0, 0, 0, .2);
}

.service-card,
.hours-card,
.glass-card {
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

@media (hover: hover) and (pointer: fine) {
    .service-card:hover,
    .hours-card:hover,
    .glass-card:hover {
        transform: translateY(-5px);
        border-color: rgba(0, 219, 104, .46) !important;
        box-shadow: 0 28px 70px rgba(0, 0, 0, .28), 0 0 34px rgba(0, 219, 104, .07);
    }
}

.service-icon,
.hours-icon,
.contact-icon {
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(0, 219, 104, .18);
}

.cta-section {
    background:
        radial-gradient(circle at 15% 50%, rgba(0, 219, 104, .2), transparent 22rem),
        linear-gradient(120deg, #07130e, #0b2117 58%, #07130e) !important;
    border-block: 1px solid var(--inspection-line);
}

.cta-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .24;
    background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(0, 219, 104, .13) 23px, transparent 24px 48px);
}

.cta-content h2 {
    color: var(--text-primary) !important;
}

.cta-content p {
    color: var(--text-secondary) !important;
}

.cta-content .btn-primary {
    color: #04120a !important;
    background: linear-gradient(135deg, var(--inspection-green), var(--inspection-green-soft)) !important;
}

.contact-map iframe {
    border: 1px solid var(--inspection-line) !important;
    border-radius: var(--inspection-radius) !important;
    filter: saturate(.82) contrast(1.02);
}

.footer {
    border-top: 1px solid var(--inspection-line);
}

.floating-call-btn {
    box-shadow: 0 0 0 8px rgba(0, 219, 104, .1), 0 18px 38px rgba(0, 0, 0, .32) !important;
}

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.stagger-children,
.stagger-children > * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.inspection-rail {
    position: fixed;
    z-index: 930;
    top: 50%;
    right: 18px;
    display: grid;
    gap: 8px;
    width: 170px;
    transform: translateY(-50%);
    pointer-events: none;
}

.inspection-rail::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 7px;
    bottom: 12px;
    width: 1px;
    background: var(--inspection-line);
}

.inspection-rail button {
    display: grid;
    grid-template-columns: 1fr 16px;
    align-items: center;
    gap: 9px;
    min-height: 28px;
    padding: 0;
    border: 0;
    color: var(--text-muted);
    background: transparent;
    font: 600 .68rem/1.2 var(--font-body);
    text-align: right;
    cursor: pointer;
    pointer-events: auto;
}

.inspection-rail__label {
    overflow: hidden;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .2s ease, transform .2s ease;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.inspection-rail:hover .inspection-rail__label,
.inspection-rail button:focus-visible .inspection-rail__label,
.inspection-rail button.is-active .inspection-rail__label {
    opacity: 1;
    transform: translateX(0);
}

.inspection-rail__dot {
    z-index: 1;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border: 2px solid var(--inspection-green);
    border-radius: 50%;
    background: var(--bg-primary);
    box-shadow: 0 0 0 4px var(--bg-primary);
}

.inspection-rail button.is-active {
    color: var(--inspection-green-soft);
}

.inspection-rail button.is-active .inspection-rail__dot {
    background: var(--inspection-green);
    box-shadow: 0 0 0 5px rgba(0, 219, 104, .13), 0 0 18px rgba(0, 219, 104, .55);
}

@media (max-width: 1279px) {
    .inspection-rail { display: none; }
}

@media (max-width: 900px) {
    .hero {
        min-height: auto !important;
        padding: 132px 24px 76px !important;
        justify-content: center !important;
    }

    .hero::before,
    .hero::after {
        opacity: .32;
        right: -18%;
    }

    .hero-content,
    .hero-subtitle,
    .hero-description {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero-cta,
    .hero-stats {
        justify-content: center !important;
    }

    .hero-stat { text-align: center !important; }
}

@media (max-width: 768px) {
    html { scroll-padding-top: 78px; }

    .nav-menu {
        top: 72px !important;
        height: calc(100dvh - 72px);
        padding: 28px 22px max(28px, env(safe-area-inset-bottom)) !important;
        background: rgba(5, 14, 14, .98) !important;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        overscroll-behavior: contain;
    }

    .nav-menu .nav-link {
        min-height: 52px;
        padding: 13px 15px !important;
        font-size: 1rem;
    }

    body.mobile-nav-open { overflow: hidden; }

    .hero-title {
        font-size: clamp(2.75rem, 14vw, 4.3rem) !important;
    }

    .hero-stats {
        grid-template-columns: 1fr;
        width: min(100%, 390px);
    }

    .hero-stat {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 14px;
        text-align: left !important;
    }

    .hero-stat-label {
        margin-top: 0;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .hero { padding-inline: 16px !important; }
    .hero-cta .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Kontrolna ruta kroz usluge */
.inspection-intro {
    position: fixed;
    inset: 0;
    z-index: 1450;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #eafff3;
    background: #050e0c;
    pointer-events: none;
    animation: inspection-intro-out 640ms cubic-bezier(.65, 0, .2, 1) both;
}
.inspection-intro strong { position: relative; z-index: 2; font-size: .78rem; letter-spacing: .24em; }
.inspection-intro__frame { position: absolute; width: min(48vw, 280px); aspect-ratio: 2.1; border: 1px solid rgba(0,219,104,.42); border-radius: 12px; box-shadow: inset 0 0 0 8px rgba(0,219,104,.025), 0 20px 60px rgba(0,0,0,.32); }
.inspection-intro__scan { position: absolute; width: min(44vw, 250px); height: 2px; background: var(--inspection-green); box-shadow: 0 0 18px rgba(0,219,104,.85); animation: inspection-scan .45s ease-in-out both; }
@keyframes inspection-scan { from { transform: translateY(-42px) scaleX(.55); } to { transform: translateY(42px) scaleX(1); } }
@keyframes inspection-intro-out { 0%, 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

.inspection-progress { position: fixed; z-index: 1420; top: 0; left: 0; width: 100%; height: 4px; overflow: hidden; background: rgba(0,219,104,.08); pointer-events: none; }
.inspection-progress > span { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #00db68, #b9ffd7); box-shadow: 0 0 14px rgba(0,219,104,.6); }
.inspection-progress > i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(5,14,12,.62); }
.inspection-progress > i:nth-of-type(1) { left: 25%; }
.inspection-progress > i:nth-of-type(2) { left: 50%; }
.inspection-progress > i:nth-of-type(3) { left: 75%; }

.inspection-enter { opacity: 0; transition: opacity .58s ease, transform .7s cubic-bezier(.2,.72,.2,1), clip-path .7s cubic-bezier(.2,.72,.2,1); transition-delay: calc(var(--inspection-order, 0) * 56ms); }
.inspection-enter-left { transform: translate3d(-22px, 8px, 0); }
.inspection-enter-right { transform: translate3d(22px, 8px, 0); }
.inspection-enter-scan { transform: translate3d(0, 14px, 0); clip-path: inset(0 0 30% 0); }
.inspection-enter-depth { transform: translate3d(0, 10px, 0) scale(.975); }
.inspection-entered { opacity: 1; transform: none; clip-path: inset(0); }
.hero-content { transform: translate3d(0, var(--inspection-parallax, 0), 0); transition: transform 80ms linear; }

.inspection-rail--route .inspection-rail__route { position: absolute; top: 12px; right: 7px; bottom: 12px; width: 2px; overflow: hidden; border-radius: 99px; background: repeating-linear-gradient(to bottom, rgba(0,219,104,.2) 0 7px, transparent 7px 11px); }
.inspection-rail--route .inspection-rail__route span { display: block; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: var(--inspection-green); box-shadow: 0 0 10px rgba(0,219,104,.65); }
.inspection-action-pressed { transform: translateY(1px) scale(.975) !important; }
.inspection-form-check { animation: inspection-form-check .34s ease both; }
@keyframes inspection-form-check { 35% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }

@media (max-width: 1499px) { .inspection-rail--route { display: none !important; } }
@media (min-width: 1500px) { .inspection-rail--route { display: grid; } }
@media (max-width: 767px) {
    .inspection-enter-left,
    .inspection-enter-right,
    .inspection-enter-scan,
    .inspection-enter-depth { transform: translate3d(0, 9px, 0); clip-path: none; }
    .inspection-intro__frame { width: 210px; }
    .inspection-intro__scan { width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
    .inspection-intro, .inspection-progress, .inspection-rail--route { display: none !important; }
    .inspection-enter { opacity: 1 !important; transform: none !important; clip-path: none !important; }
    .hero-content { transform: none !important; transition: none !important; }
}

/* Vizuelna dorada po kontrolnoj ruti pregleda vozila */
main > section:not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 760px; }
.hero { isolation: isolate; background: radial-gradient(circle at 82% 28%,rgba(0,219,104,.17),transparent 30rem),linear-gradient(128deg,#040d0a,#0a1d14 62%,#07130e) !important; }
.hero::after { content: ''; position: absolute; z-index: -1; right: -8%; top: 14%; width: min(46vw,600px); aspect-ratio: 1.7; border: 1px solid rgba(0,219,104,.2); border-radius: 22px; transform: rotate(-4deg); box-shadow: inset 0 0 0 12px rgba(0,219,104,.025),0 0 0 32px rgba(0,219,104,.015); }
.hero-title { font-size: clamp(2.75rem,6vw,6rem) !important; line-height: .92 !important; letter-spacing: -.06em !important; }
.hero-title::after { content: ''; display: block; width: 110px; height: 4px; margin-top: 1rem; border-radius: 99px; background: linear-gradient(90deg,var(--inspection-green),rgba(185,255,215,.28)); }
.service-card,
.glass-card,
.hours-card { position: relative; overflow: hidden; border-top: 3px solid rgba(0,219,104,.58) !important; }
.service-card::after,
.glass-card::after { content: '✓'; position: absolute; right: 18px; bottom: 8px; color: rgba(0,219,104,.1); font: 800 3.4rem/1 var(--font-body); }
main > section:not(:first-child) { box-shadow: inset 0 1px rgba(0,219,104,.07); }
.cta-section { background: radial-gradient(circle at 12% 50%,rgba(0,219,104,.2),transparent 22rem),linear-gradient(118deg,#040e0a,#0b2619 64%,#06140e) !important; }
.inspection-rail--route { width: 18px; }
@media (max-width: 767px) {
    .hero-title { font-size: clamp(2.65rem,14vw,4.4rem) !important; }
    .hero::after { right: -45%; width: 100vw; opacity: .45; }
    main > section:not(:first-child) { contain-intrinsic-size: auto 620px; }
}

@media (prefers-reduced-motion: reduce) {
    :root body *, :root body *::before, :root body *::after {
        animation: none !important;
        transition: none !important;
    }
}