/*
 * Final Rivontiq blue card override.
 * Loaded after rivontiq-about.css, desktop-scale-down.css and site-blackout.css
 * so the inner roller cards cannot be reverted to the older white/glass style.
 */

:root{
    --rivontiq-card-line: rgba(122, 229, 255, 0.96);
    --rivontiq-card-line-soft: rgba(84, 196, 255, 0.46);
    --rivontiq-card-fill-a: rgba(35, 154, 255, 0.38);
    --rivontiq-card-fill-b: rgba(11, 70, 170, 0.58);
    --rivontiq-card-fill-c: rgba(2, 15, 44, 0.98);
}

/* Main target: all inner cards inside the roller, including the card with
   “Ozbiljan prvi utisak”. */
.pf-about-section [data-pf-about-inner-card],
.pf-about-section .pf-about-feature-card,
.pf-about-section .pf-about-stat-card,
.pf-about-section .pf-about-skill-card,
.pf-about-section .pf-about-contact-list-card,
.pf-about-section .pf-about-form-shell,
.pf-about-section .pf-about-portal-shell,
.pf-about-section .pf-about-faq-item,
.pf-about-section .pf-about-testimonial-card{
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    background:
        radial-gradient(circle at 14% 0%, rgba(122, 229, 255, 0.24), transparent 34%),
        radial-gradient(circle at 86% 0%, rgba(45, 140, 255, 0.22), transparent 32%),
        linear-gradient(180deg,
            var(--rivontiq-card-fill-a) 0%,
            var(--rivontiq-card-fill-b) 42%,
            var(--rivontiq-card-fill-c) 100%) !important;
    border-color: var(--rivontiq-card-line) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.20),
        0 22px 48px rgba(1, 11, 31, 0.52),
        inset 0 1px 0 rgba(122, 229, 255, 0.30),
        inset 0 0 0 1px rgba(84, 196, 255, 0.12),
        inset 0 -1px 0 rgba(45, 140, 255, 0.24) !important;
    backdrop-filter: blur(14px) saturate(1.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

/* Remove the old white glass layer and replace it with a blue/cyan layer. */
.pf-about-section [data-pf-about-inner-card]::before,
.pf-about-section .pf-about-feature-card::before,
.pf-about-section .pf-about-stat-card::before,
.pf-about-section .pf-about-skill-card::before,
.pf-about-section .pf-about-contact-list-card::before,
.pf-about-section .pf-about-form-shell::before,
.pf-about-section .pf-about-portal-shell::before,
.pf-about-section .pf-about-faq-item::before,
.pf-about-section .pf-about-testimonial-card::before{
    content: "";
    position: absolute;
    inset: 7px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(122, 229, 255, 0.34) !important;
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.16), rgba(84, 196, 255, 0.05) 28%, transparent 68%),
        radial-gradient(circle at var(--pf-about-inner-pointer-x, 50%) var(--pf-about-inner-pointer-y, 18%), rgba(122, 229, 255, 0.16), transparent 46%) !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.14),
        inset 0 0 22px rgba(84, 196, 255, 0.08),
        0 0 20px rgba(84, 196, 255, 0.08) !important;
    opacity: 1 !important;
    pointer-events: none;
    z-index: 1;
}

/* The top/inner light is now blue, not white. */
.pf-about-section [data-pf-about-inner-card]::after,
.pf-about-section .pf-about-feature-card::after,
.pf-about-section .pf-about-stat-card::after,
.pf-about-section .pf-about-skill-card::after,
.pf-about-section .pf-about-contact-list-card::after,
.pf-about-section .pf-about-form-shell::after,
.pf-about-section .pf-about-portal-shell::after,
.pf-about-section .pf-about-faq-item::after,
.pf-about-section .pf-about-testimonial-card::after{
    content: "";
    position: absolute;
    left: 14px !important;
    right: 14px !important;
    top: -2px !important;
    bottom: auto !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
        rgba(84, 196, 255, 0),
        rgba(122, 229, 255, 0.66) 34%,
        rgba(84, 196, 255, 0.54) 56%,
        rgba(45, 140, 255, 0.36) 72%,
        rgba(84, 196, 255, 0)) !important;
    filter: blur(4px) !important;
    opacity: 0.92 !important;
    transform: none !important;
    pointer-events: none;
    z-index: 2 !important;
}

.pf-about-section [data-pf-about-inner-card] > *,
.pf-about-section .pf-about-feature-card > *,
.pf-about-section .pf-about-stat-card > *,
.pf-about-section .pf-about-skill-card > *,
.pf-about-section .pf-about-contact-list-card > *,
.pf-about-section .pf-about-form-shell > *,
.pf-about-section .pf-about-portal-shell > *,
.pf-about-section .pf-about-faq-item > *,
.pf-about-section .pf-about-testimonial-card > *{
    position: relative;
    z-index: 3;
}

/* Number/icon boxes inside cards use the same blue badge tone as the header. */
.pf-about-section .pf-about-feature-icon,
.pf-about-section .pf-about-stat-icon,
.pf-about-section .pf-about-skill-icon,
.pf-about-section .pf-about-contact-list-card > span{
    background:
        radial-gradient(circle at 30% 18%, rgba(122, 229, 255, 0.40), transparent 48%),
        linear-gradient(135deg, rgba(41, 151, 255, 0.50), rgba(4, 42, 112, 0.92)) !important;
    border-color: rgba(122, 229, 255, 0.82) !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.30),
        0 0 20px rgba(84, 196, 255, 0.26),
        0 14px 26px rgba(8, 50, 128, 0.26) !important;
}

.pf-about-section [data-pf-about-inner-card]:hover,
.pf-about-section [data-pf-about-inner-card].is-tilting,
.pf-about-section .pf-about-feature-card:hover,
.pf-about-section .pf-about-stat-card:hover,
.pf-about-section .pf-about-skill-card:hover,
.pf-about-section .pf-about-contact-list-card:hover,
.pf-about-section .pf-about-form-shell:focus-within,
.pf-about-section .pf-about-portal-shell:hover,
.pf-about-section .pf-about-faq-item:hover,
.pf-about-section .pf-about-testimonial-card:hover{
    border-color: rgba(155, 238, 255, 1) !important;
    filter: saturate(1.06) brightness(1.02);
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.30),
        0 0 34px rgba(84, 196, 255, 0.38),
        0 0 58px rgba(45, 140, 255, 0.24),
        0 24px 54px rgba(1, 11, 31, 0.54),
        inset 0 1px 0 rgba(122, 229, 255, 0.36),
        inset 0 -1px 0 rgba(84, 196, 255, 0.26) !important;
}

.pf-about-section .pf-about-feature-title,
.pf-about-section .pf-about-stat-title,
.pf-about-section .pf-about-skill-card h3,
.pf-about-section .pf-about-skill-card h4,
.pf-about-section .pf-about-contact-list-card h4,
.pf-about-section .pf-about-contact-list-card h5,
.pf-about-section .pf-about-portal-title,
.pf-about-section .pf-about-portal-subtitle{
    color: #e7fbff !important;
    text-shadow: 0 0 14px rgba(84, 196, 255, 0.14), 0 12px 24px rgba(3, 10, 24, 0.28) !important;
}

.pf-about-section .pf-about-feature-text,
.pf-about-section .pf-about-stat-text,
.pf-about-section .pf-about-skill-card p,
.pf-about-section .pf-about-contact-list-card p,
.pf-about-section .pf-about-portal-text{
    color: color-mix(in srgb, #e7fbff 84%, #7ae5ff 16%) !important;
}
/* =====================================================================
 * Final Rivontiq blue badge override.
 * Purpose: make every badge / pill / chip on the site use the same
 * light-blue Rivontiq tone as the approved blue inner cards and header badge.
 * Loaded at the end through rivontiq-final-blue-cards.css.
 * ===================================================================== */

:root{
    --rivontiq-badge-line: rgba(122, 229, 255, 0.98);
    --rivontiq-badge-line-soft: rgba(84, 196, 255, 0.54);
    --rivontiq-badge-fill-a: rgba(45, 170, 255, 0.48);
    --rivontiq-badge-fill-b: rgba(9, 76, 184, 0.74);
    --rivontiq-badge-fill-c: rgba(2, 16, 48, 0.98);
    --rivontiq-badge-text: #eafbff;
}

/* About/roller badges: Korak 01, 01/05, skill tabs, portal chips and scroll hints. */
.pf-about-section .pf-about-roller-pill,
.pf-about-section .pf-about-contact-kicker,
.pf-about-section .pf-about-card-counter,
.pf-about-section .pf-about-skill-tab.pf-about-roller-pill--tab,
.pf-about-section .pf-about-portal-chip.pf-about-roller-pill--portal,
.pf-about-section .pf-about-contact-scroll-hint{
    border-color: var(--rivontiq-badge-line) !important;
    color: var(--rivontiq-badge-text) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(122, 229, 255, 0.28), transparent 40%),
        linear-gradient(180deg, rgba(122, 229, 255, 0.20), rgba(84, 196, 255, 0.07) 28%, rgba(84, 196, 255, 0.02) 56%, transparent 100%),
        linear-gradient(135deg,
            var(--rivontiq-badge-fill-a) 0%,
            var(--rivontiq-badge-fill-b) 44%,
            var(--rivontiq-badge-fill-c) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 22px rgba(84, 196, 255, 0.30),
        0 12px 28px rgba(3, 18, 54, 0.36),
        inset 0 1px 0 rgba(122, 229, 255, 0.36),
        inset 0 -1px 0 rgba(84, 196, 255, 0.26),
        inset 0 0 18px rgba(84, 196, 255, 0.14) !important;
}

/* Remove the remaining white glass from badge pseudo layers. */
.pf-about-section .pf-about-roller-pill::before,
.pf-about-section .pf-about-contact-kicker::before,
.pf-about-section .pf-about-card-counter::before,
.pf-about-section .pf-about-skill-tab.pf-about-roller-pill--tab::before,
.pf-about-section .pf-about-portal-chip.pf-about-roller-pill--portal::before,
.pf-about-section .pf-about-contact-scroll-hint::before{
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.24), rgba(84, 196, 255, 0.10) 42%, transparent 100%) !important;
    border-color: rgba(122, 229, 255, 0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.18),
        0 0 16px rgba(84, 196, 255, 0.10) !important;
    opacity: 0.96 !important;
}

.pf-about-section .pf-about-roller-pill::after,
.pf-about-section .pf-about-contact-kicker::after,
.pf-about-section .pf-about-card-counter::after,
.pf-about-section .pf-about-skill-tab.pf-about-roller-pill--tab::after,
.pf-about-section .pf-about-portal-chip.pf-about-roller-pill--portal::after,
.pf-about-section .pf-about-contact-scroll-hint::after{
    background: linear-gradient(90deg,
        rgba(84, 196, 255, 0),
        rgba(122, 229, 255, 0.62),
        rgba(45, 140, 255, 0.38),
        rgba(84, 196, 255, 0)) !important;
    box-shadow: 0 0 18px rgba(84, 196, 255, 0.24) !important;
    filter: blur(3px) !important;
    opacity: 0.78 !important;
}

.pf-about-section .pf-about-roller-gloss,
.pf-about-section .pf-about-roller-pill .pf-about-roller-gloss,
.pf-about-section .pf-about-contact-scroll-hint .pf-about-roller-gloss{
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.22), rgba(84, 196, 255, 0.08) 36%, transparent 100%) !important;
    opacity: 0.86 !important;
}

.pf-about-section .pf-about-roller-depth,
.pf-about-section .pf-about-roller-pill .pf-about-roller-depth{
    background: linear-gradient(180deg, rgba(7, 54, 132, 0.96), rgba(2, 14, 42, 0.98)) !important;
    opacity: 0.88 !important;
}

.pf-about-section .pf-about-roller-pill-face,
.pf-about-section .pf-about-contact-scroll-hint > span:last-child{
    color: var(--rivontiq-badge-text) !important;
    text-shadow: 0 0 12px rgba(84, 196, 255, 0.20), 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

/* Active tab stays stronger, but still blue/cyan instead of white. */
.pf-about-section .pf-about-skill-tab.pf-about-roller-pill--tab.is-active,
.pf-about-section .pf-about-skill-tab.pf-about-roller-pill--tab.is-active:hover{
    color: #eafbff !important;
    border-color: rgba(155, 238, 255, 1) !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(155, 238, 255, 0.36), transparent 42%),
        linear-gradient(180deg, rgba(122, 229, 255, 0.28), rgba(84, 196, 255, 0.10) 34%, transparent 100%),
        linear-gradient(135deg, rgba(58, 185, 255, 0.58), rgba(10, 91, 205, 0.82) 48%, rgba(2, 20, 58, 0.98) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(155, 238, 255, 0.30),
        0 0 30px rgba(84, 196, 255, 0.40),
        0 16px 30px rgba(3, 18, 54, 0.38),
        inset 0 1px 0 rgba(155, 238, 255, 0.42),
        inset 0 -1px 0 rgba(84, 196, 255, 0.30) !important;
}

.pf-about-section .pf-about-skill-tab.pf-about-roller-pill--tab.is-active .pf-about-roller-pill-face{
    color: #eafbff !important;
}

/* Header badge and dropdown eyebrow get the same final tone. */
.pf-header .pf-header__signal,
.pf-header .pf-header__dropdown-eyebrow{
    border-color: var(--rivontiq-badge-line) !important;
    color: var(--rivontiq-badge-text) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(122, 229, 255, 0.26), transparent 42%),
        linear-gradient(180deg, rgba(122, 229, 255, 0.18), rgba(84, 196, 255, 0.06) 30%, transparent 100%),
        linear-gradient(135deg, rgba(45, 170, 255, 0.48), rgba(9, 76, 184, 0.78) 44%, rgba(2, 16, 48, 0.98) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 22px rgba(84, 196, 255, 0.28),
        0 12px 28px rgba(3, 18, 54, 0.34),
        inset 0 1px 0 rgba(122, 229, 255, 0.32),
        inset 0 -1px 0 rgba(84, 196, 255, 0.24) !important;
}

.pf-header .pf-header__signal-gloss{
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.22), rgba(84, 196, 255, 0.08) 32%, transparent 76%),
        radial-gradient(circle at 18% 0%, rgba(122, 229, 255, 0.18), transparent 34%) !important;
}

.pf-header .pf-header__signal-dot{
    background: radial-gradient(circle at 35% 35%, #eafbff, #7ae5ff 52%, #2d8cff 100%) !important;
    box-shadow:
        0 0 0 4px rgba(122, 229, 255, 0.16),
        0 0 18px rgba(122, 229, 255, 0.66) !important;
}

/* Footer brand badge follows the same blue system. */
.pf-footer .pf-footer-brand-badge{
    border-color: var(--rivontiq-badge-line) !important;
    color: var(--rivontiq-badge-text) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(122, 229, 255, 0.26), transparent 42%),
        linear-gradient(180deg, rgba(122, 229, 255, 0.18), rgba(84, 196, 255, 0.06) 30%, transparent 100%),
        linear-gradient(135deg, rgba(45, 170, 255, 0.48), rgba(9, 76, 184, 0.78) 44%, rgba(2, 16, 48, 0.98) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 22px rgba(84, 196, 255, 0.28),
        0 12px 28px rgba(3, 18, 54, 0.34),
        inset 0 1px 0 rgba(122, 229, 255, 0.32),
        inset 0 -1px 0 rgba(84, 196, 255, 0.24) !important;
}

.pf-footer .pf-footer-brand-badge::before{
    background: radial-gradient(circle at 35% 35%, #eafbff, #7ae5ff 50%, #2d8cff 100%) !important;
    box-shadow:
        0 0 0 4px rgba(122, 229, 255, 0.14),
        0 0 16px rgba(122, 229, 255, 0.52) !important;
}

.pf-footer .pf-footer-brand-badge::after{
    border-color: rgba(122, 229, 255, 0.26) !important;
    background: linear-gradient(180deg, rgba(122, 229, 255, 0.12), transparent 72%) !important;
}

/* =====================================================================
 * Final Rivontiq blue header/footer override.
 * Purpose: make header and footer use the same blue/cyan visual language
 * as the approved blue cards and badges across the site.
 * Loaded last through rivontiq-final-blue-cards.css.
 * ===================================================================== */

:root{
    --rivontiq-shell-line: rgba(122, 229, 255, 0.98);
    --rivontiq-shell-line-soft: rgba(84, 196, 255, 0.42);
    --rivontiq-shell-fill-a: rgba(45, 170, 255, 0.42);
    --rivontiq-shell-fill-b: rgba(9, 76, 184, 0.74);
    --rivontiq-shell-fill-c: rgba(2, 16, 48, 0.98);
    --rivontiq-shell-glow: rgba(84, 196, 255, 0.32);
    --rivontiq-shell-glow-strong: rgba(122, 229, 255, 0.40);
}

/* Header outer frame: same cyan frame as the approved card style. */
.pf-header__shell-topline,
.pf-header__center-topline,
.pf-footer-panel::before{
    background: linear-gradient(90deg,
        rgba(84, 196, 255, 0),
        rgba(122, 229, 255, 0.98) 42%,
        rgba(169, 236, 255, 0.96) 50%,
        rgba(122, 229, 255, 0.98) 58%,
        rgba(84, 196, 255, 0)) !important;
    box-shadow:
        0 0 24px rgba(84, 196, 255, 0.42),
        0 0 42px rgba(45, 140, 255, 0.22) !important;
    opacity: 1 !important;
}

.pf-header__lux-frame::before,
.pf-footer-panel__lux-frame::before{
    background: linear-gradient(135deg,
        rgba(122, 229, 255, 0.96) 0%,
        rgba(84, 196, 255, 0.92) 22%,
        rgba(45, 140, 255, 0.86) 52%,
        rgba(20, 96, 225, 0.84) 76%,
        rgba(122, 229, 255, 0.94) 100%) !important;
    opacity: 0.92 !important;
}

.pf-header__lux-frame::after,
.pf-header__center-frame,
.pf-footer-panel__lux-frame::after{
    border-color: rgba(122, 229, 255, 0.34) !important;
    box-shadow:
        inset 0 0 0 1px rgba(122, 229, 255, 0.08),
        inset 0 0 28px rgba(84, 196, 255, 0.08) !important;
}

/* Header blocks: logo panel, menu shell, dropdown shell, mobile menu and menu button. */
.pf-header__brand-panel,
.pf-header__center-shell,
.pf-header__menu.active,
.pf-header__dropdown,
.pf-header__dropdown--holo,
.pf-header__signal,
.pf-header__toggle{
    border-color: var(--rivontiq-shell-line-soft) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(122, 229, 255, 0.24), transparent 36%),
        radial-gradient(circle at 86% 0%, rgba(45, 140, 255, 0.22), transparent 34%),
        linear-gradient(180deg, rgba(122, 229, 255, 0.16), rgba(84, 196, 255, 0.05) 30%, transparent 72%),
        linear-gradient(135deg,
            var(--rivontiq-shell-fill-a) 0%,
            var(--rivontiq-shell-fill-b) 44%,
            var(--rivontiq-shell-fill-c) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.16),
        0 0 24px rgba(84, 196, 255, 0.24),
        0 18px 40px rgba(1, 11, 31, 0.46),
        inset 0 1px 0 rgba(122, 229, 255, 0.28),
        inset 0 0 0 1px rgba(84, 196, 255, 0.10),
        inset 0 -1px 0 rgba(45, 140, 255, 0.22) !important;
}

.pf-header__brand:hover .pf-header__brand-panel,
.pf-header__brand:focus-visible .pf-header__brand-panel,
.pf-header__signal:hover,
.pf-header__toggle:hover,
.pf-header__toggle:focus-visible{
    border-color: var(--rivontiq-shell-line) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.24),
        0 0 32px rgba(84, 196, 255, 0.34),
        0 20px 46px rgba(1, 11, 31, 0.50),
        inset 0 1px 0 rgba(122, 229, 255, 0.34),
        inset 0 -1px 0 rgba(84, 196, 255, 0.26) !important;
}

.pf-header__center-glow,
.pf-header__shell-glow{
    background:
        radial-gradient(circle at 18% 0%, rgba(122, 229, 255, 0.24), transparent 30%),
        radial-gradient(circle at 82% 6%, rgba(45, 140, 255, 0.20), transparent 32%),
        linear-gradient(180deg, rgba(84, 196, 255, 0.10), transparent 72%) !important;
    filter: blur(12px) !important;
    opacity: 0.95 !important;
}

/* Header links use blue card/badge tone instead of the remaining white-glass tone. */
.pf-header__link,
.pf-header__link.pf-header__services-toggle,
.pf-header__dropdown-panel,
.pf-header__sublink,
.pf-header__dropdown--holo .pf-header__sublink--tile,
.pf-header__item--services-3d .pf-header__dropdown--holo .pf-header__sublink--tile{
    border-color: rgba(122, 229, 255, 0.30) !important;
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.14), rgba(84, 196, 255, 0.05) 34%, transparent 100%),
        linear-gradient(135deg, rgba(45, 170, 255, 0.26), rgba(7, 52, 132, 0.74) 48%, rgba(2, 16, 48, 0.92) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.20),
        inset 0 -1px 0 rgba(84, 196, 255, 0.14),
        0 10px 22px rgba(1, 11, 31, 0.28),
        0 0 18px rgba(84, 196, 255, 0.10) !important;
}

.pf-header__link::before,
.pf-header__dropdown-panel::before,
.pf-header__sublink::before,
.pf-header__dropdown--holo .pf-header__sublink--tile::before,
.pf-header__item--services-3d .pf-header__dropdown--holo .pf-header__sublink--tile::before{
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.20), rgba(84, 196, 255, 0.08) 48%, transparent 100%) !important;
    border-color: rgba(122, 229, 255, 0.18) !important;
    opacity: 0.92 !important;
}

.pf-header__link::after,
.pf-header__dropdown-panel::after,
.pf-header__sublink::after,
.pf-header__dropdown--holo .pf-header__sublink--tile::after,
.pf-header__item--services-3d .pf-header__dropdown--holo .pf-header__sublink--tile::after{
    background: linear-gradient(90deg,
        rgba(84, 196, 255, 0),
        rgba(122, 229, 255, 0.70),
        rgba(45, 140, 255, 0.42),
        rgba(84, 196, 255, 0)) !important;
    box-shadow: 0 0 18px rgba(84, 196, 255, 0.24) !important;
}

.pf-header__link:hover,
.pf-header__link:focus-visible,
.pf-header__link.active,
.pf-header__link[aria-current="page"],
.pf-header__sublink:hover,
.pf-header__sublink:focus-visible,
.pf-header__dropdown--holo .pf-header__sublink--tile:hover,
.pf-header__dropdown--holo .pf-header__sublink--tile:focus-visible,
.pf-header__item--services-3d .pf-header__dropdown--holo .pf-header__sublink--tile:hover,
.pf-header__item--services-3d .pf-header__dropdown--holo .pf-header__sublink--tile:focus-visible{
    border-color: var(--rivontiq-shell-line) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(122, 229, 255, 0.24), transparent 38%),
        linear-gradient(180deg, rgba(122, 229, 255, 0.18), rgba(84, 196, 255, 0.08) 34%, transparent 100%),
        linear-gradient(135deg, rgba(45, 170, 255, 0.42), rgba(9, 76, 184, 0.80) 46%, rgba(2, 16, 48, 0.98) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 26px rgba(84, 196, 255, 0.28),
        inset 0 1px 0 rgba(122, 229, 255, 0.30),
        inset 0 -1px 0 rgba(84, 196, 255, 0.22) !important;
}

.pf-header__sublink-icon,
.pf-header__dropdown--holo .pf-header__sublink-icon,
.pf-header__item--services-3d .pf-header__dropdown--holo .pf-header__sublink-icon,
.pf-header__toggle span{
    border-color: rgba(122, 229, 255, 0.72) !important;
    background:
        radial-gradient(circle at 30% 18%, rgba(122, 229, 255, 0.40), transparent 48%),
        linear-gradient(135deg, rgba(41, 151, 255, 0.52), rgba(4, 42, 112, 0.94)) !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.30),
        0 0 20px rgba(84, 196, 255, 0.24) !important;
}

.pf-header__signal-gloss{
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.22), rgba(84, 196, 255, 0.08) 36%, transparent 100%),
        radial-gradient(circle at 18% 0%, rgba(122, 229, 255, 0.18), transparent 32%) !important;
    opacity: 0.92 !important;
}

.pf-header__signal-depth{
    background: linear-gradient(180deg, rgba(7, 54, 132, 0.96), rgba(2, 14, 42, 0.98)) !important;
}

/* Footer shell and footer cards: same blue fill, line and glow as approved site cards. */
.pf-footer-panel{
    background:
        radial-gradient(circle at 14% 0%, rgba(122, 229, 255, 0.16), transparent 36%),
        radial-gradient(circle at 86% 0%, rgba(45, 140, 255, 0.14), transparent 34%) !important;
}

.pf-footer-brand,
.pf-footer-section,
.pf-footer-meta,
.pf-footer-brand-badge,
.pf-footer-social-icon{
    border-color: var(--rivontiq-shell-line-soft) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(122, 229, 255, 0.24), transparent 36%),
        radial-gradient(circle at 86% 0%, rgba(45, 140, 255, 0.22), transparent 34%),
        linear-gradient(180deg, rgba(122, 229, 255, 0.16), rgba(84, 196, 255, 0.05) 30%, transparent 72%),
        linear-gradient(135deg,
            var(--rivontiq-shell-fill-a) 0%,
            var(--rivontiq-shell-fill-b) 44%,
            var(--rivontiq-shell-fill-c) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.16),
        0 0 24px rgba(84, 196, 255, 0.24),
        0 18px 40px rgba(1, 11, 31, 0.46),
        inset 0 1px 0 rgba(122, 229, 255, 0.28),
        inset 0 0 0 1px rgba(84, 196, 255, 0.10),
        inset 0 -1px 0 rgba(45, 140, 255, 0.22) !important;
}

.pf-footer-brand::before,
.pf-footer-section::before,
.pf-footer-meta::before,
.pf-footer-brand-badge::after{
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.20), rgba(84, 196, 255, 0.08) 44%, transparent 100%) !important;
    border-color: rgba(122, 229, 255, 0.18) !important;
    opacity: 0.95 !important;
}

.pf-footer-brand::after,
.pf-footer-section::after,
.pf-footer-meta::after{
    border-color: rgba(122, 229, 255, 0.24) !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.12),
        inset 0 0 20px rgba(84, 196, 255, 0.06) !important;
}

.pf-footer-brand:hover,
.pf-footer-section:hover,
.pf-footer-meta:hover,
.pf-footer-social-icon:hover,
.pf-footer-social-icon:focus-visible{
    border-color: var(--rivontiq-shell-line) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.24),
        0 0 32px rgba(84, 196, 255, 0.34),
        0 20px 46px rgba(1, 11, 31, 0.50),
        inset 0 1px 0 rgba(122, 229, 255, 0.34),
        inset 0 -1px 0 rgba(84, 196, 255, 0.26) !important;
}

.pf-footer-section h4::after,
.pf-footer-links a::before,
.pf-footer-brand-badge::before{
    background: radial-gradient(circle at 35% 35%, rgba(234, 251, 255, 0.96), rgba(122, 229, 255, 0.88) 54%, rgba(45, 140, 255, 0.70) 100%) !important;
    box-shadow:
        0 0 0 4px rgba(122, 229, 255, 0.08),
        0 0 16px rgba(84, 196, 255, 0.36) !important;
}

.pf-footer-section h4::after{
    border-radius: 999px !important;
    background: linear-gradient(90deg,
        rgba(84, 196, 255, 0),
        rgba(122, 229, 255, 0.92),
        rgba(45, 140, 255, 0.48),
        rgba(84, 196, 255, 0)) !important;
}

/* ==========================================================================
   FINAL FIX: darker Services dropdown for readable text
   --------------------------------------------------------------------------
   The site-wide blue override made the Services dropdown too bright. This
   section is intentionally loaded last in this file and targets only the
   "Usluge" dropdown so the rest of the site keeps the approved blue style.
   ========================================================================== */

#servicesDropdownMenu.pf-header__dropdown,
#servicesDropdownMenu.pf-header__dropdown--holo,
.pf-header__item--services-3d > #servicesDropdownMenu.pf-header__dropdown--holo{
    color: rgba(246, 251, 255, 0.98) !important;
    border-color: rgba(122, 229, 255, 0.48) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(84, 196, 255, 0.20), transparent 34%),
        radial-gradient(circle at 84% 0%, rgba(45, 140, 255, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(7, 35, 92, 0.98), rgba(3, 21, 58, 0.99) 42%, rgba(1, 9, 28, 1) 100%) !important;
    box-shadow:
        0 34px 78px -38px rgba(0, 0, 0, 0.92),
        0 0 0 1px rgba(122, 229, 255, 0.18),
        0 0 34px rgba(84, 196, 255, 0.18),
        inset 0 1px 0 rgba(122, 229, 255, 0.20),
        inset 0 -1px 0 rgba(45, 140, 255, 0.18) !important;
}

#servicesDropdownMenu.pf-header__dropdown::before,
#servicesDropdownMenu.pf-header__dropdown--holo::before,
.pf-header__item--services-3d > #servicesDropdownMenu.pf-header__dropdown--holo::before{
    background:
        linear-gradient(135deg, rgba(7, 35, 92, 0.99), rgba(1, 12, 36, 1)) !important;
    border-top-color: rgba(122, 229, 255, 0.44) !important;
    border-left-color: rgba(122, 229, 255, 0.44) !important;
    box-shadow: -10px -10px 24px -16px rgba(84, 196, 255, 0.34) !important;
}

#servicesDropdownMenu.pf-header__dropdown::after,
#servicesDropdownMenu.pf-header__dropdown--holo::after,
.pf-header__item--services-3d > #servicesDropdownMenu.pf-header__dropdown--holo::after{
    border-color: rgba(122, 229, 255, 0.26) !important;
    background: transparent !important;
    box-shadow:
        inset 0 0 0 1px rgba(84, 196, 255, 0.08),
        inset 0 0 30px rgba(1, 12, 36, 0.38) !important;
}

#servicesDropdownMenu .pf-header__dropdown-header-card,
#servicesDropdownMenu .pf-header__dropdown-panel{
    color: rgba(246, 251, 255, 0.98) !important;
    border-color: rgba(122, 229, 255, 0.34) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(122, 229, 255, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(9, 48, 120, 0.94), rgba(3, 22, 62, 0.98) 48%, rgba(1, 11, 34, 0.99) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.18),
        inset 0 -1px 0 rgba(45, 140, 255, 0.14),
        0 14px 30px rgba(0, 0, 0, 0.34) !important;
}

#servicesDropdownMenu .pf-header__sublink,
#servicesDropdownMenu .pf-header__sublink--tile,
.pf-header__item--services-3d #servicesDropdownMenu .pf-header__sublink--tile{
    color: rgba(246, 251, 255, 0.98) !important;
    border-color: rgba(122, 229, 255, 0.32) !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(122, 229, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(8, 45, 116, 0.96), rgba(3, 23, 67, 0.99) 46%, rgba(1, 10, 32, 1) 100%) !important;
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(122, 229, 255, 0.17),
        inset 0 -1px 0 rgba(45, 140, 255, 0.16) !important;
}

#servicesDropdownMenu .pf-header__sublink:hover,
#servicesDropdownMenu .pf-header__sublink:focus-visible,
#servicesDropdownMenu .pf-header__sublink--tile:hover,
#servicesDropdownMenu .pf-header__sublink--tile:focus-visible{
    border-color: rgba(122, 229, 255, 0.72) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(122, 229, 255, 0.22), transparent 36%),
        linear-gradient(180deg, rgba(10, 65, 150, 0.98), rgba(4, 31, 84, 1) 46%, rgba(1, 12, 38, 1) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.20),
        0 0 26px rgba(84, 196, 255, 0.26),
        0 14px 28px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(122, 229, 255, 0.26),
        inset 0 -1px 0 rgba(84, 196, 255, 0.22) !important;
}

#servicesDropdownMenu .pf-header__dropdown-eyebrow,
#servicesDropdownMenu .pf-header__dropdown-title,
#servicesDropdownMenu .pf-header__dropdown-subtitle,
#servicesDropdownMenu .pf-header__sublink-title,
#servicesDropdownMenu .pf-header__sublink-desc,
#servicesDropdownMenu .pf-header__sublink-arrow{
    color: rgba(246, 251, 255, 0.98) !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.72),
        0 10px 22px rgba(0, 0, 0, 0.32) !important;
}

#servicesDropdownMenu .pf-header__dropdown-subtitle,
#servicesDropdownMenu .pf-header__sublink-desc{
    color: rgba(224, 241, 255, 0.92) !important;
}

#servicesDropdownMenu .pf-header__sublink-icon{
    color: rgba(239, 252, 255, 0.98) !important;
    border-color: rgba(122, 229, 255, 0.62) !important;
    background:
        radial-gradient(circle at 34% 20%, rgba(122, 229, 255, 0.34), transparent 46%),
        linear-gradient(135deg, rgba(15, 92, 190, 0.74), rgba(2, 22, 68, 0.98)) !important;
}

#servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar-track{
    background: rgba(1, 10, 32, 0.92) !important;
}

#servicesDropdownMenu .pf-header__dropdown-scroll{
    scrollbar-color: rgba(122, 229, 255, 0.72) rgba(1, 10, 32, 0.92) !important;
}

/* ==========================================================================
   FINAL FIX: remove the small blue dot/diamond on the Services dropdown frame
   --------------------------------------------------------------------------
   The Services dropdown uses an outer ::before element as a decorative pointer
   near the top-left side of the dropdown shell. After the dark-blue dropdown
   patch, that pointer can look like an unwanted blue dot beside the logo area.
   Keep the dropdown frame, cards and text unchanged, but remove only that
   decorative marker.
   ========================================================================== */

#servicesDropdownMenu.pf-header__dropdown::before,
#servicesDropdownMenu.pf-header__dropdown--holo::before,
.pf-header__item--services-3d > #servicesDropdownMenu.pf-header__dropdown--holo::before,
#servicesMenuItem.pf-header__item--services-3d > #servicesDropdownMenu.pf-header__dropdown--holo::before{
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    border: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important;
}

/* ===========================================================================
   FINAL FIX: luxury Services dropdown scrollbar
   ---------------------------------------------------------------------------
   Makes only the opened "Usluge" dropdown scrollbar match the premium blue
   site style. The scrollbar gets a darker rail, cyan/blue illuminated thumb,
   soft inner glow and clearer hover/drag states.
   =========================================================================== */

#servicesDropdownMenu .pf-header__dropdown-scroll,
.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll{
    scrollbar-width: thin !important;
    scrollbar-color: rgba(122, 229, 255, 0.92) rgba(1, 12, 36, 0.94) !important;
    scrollbar-gutter: stable !important;
    padding-right: 10px !important;
}

#servicesDropdownMenu .pf-header__dropdown-scroll-shell,
.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll-shell{
    border-color: rgba(122, 229, 255, 0.24) !important;
    background:
        linear-gradient(90deg, transparent calc(100% - 18px), rgba(122, 229, 255, 0.055) calc(100% - 18px), rgba(1, 12, 36, 0.18) 100%),
        linear-gradient(180deg, rgba(1, 15, 42, 0.34), rgba(1, 8, 26, 0.08)) !important;
    box-shadow:
        inset -1px 0 0 rgba(122, 229, 255, 0.18),
        inset -10px 0 18px rgba(84, 196, 255, 0.045),
        inset 0 1px 0 rgba(122, 229, 255, 0.08) !important;
}

#servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar,
.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar{
    width: 11px !important;
    height: 11px !important;
}

#servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar-track,
.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar-track{
    border-radius: 999px !important;
    border: 1px solid rgba(122, 229, 255, 0.14) !important;
    background:
        linear-gradient(180deg, rgba(1, 20, 56, 0.98), rgba(1, 9, 30, 0.98)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(1, 8, 26, 0.76),
        inset 0 0 14px rgba(84, 196, 255, 0.10),
        0 0 12px rgba(84, 196, 255, 0.08) !important;
}

#servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar-thumb,
.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar-thumb{
    min-height: 46px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(1, 10, 32, 0.94) !important;
    background:
        linear-gradient(180deg, rgba(238, 252, 255, 0.96) 0%, rgba(122, 229, 255, 0.96) 20%, rgba(84, 196, 255, 0.86) 54%, rgba(45, 140, 255, 0.82) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        inset 0 -1px 0 rgba(45, 140, 255, 0.50),
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 18px rgba(84, 196, 255, 0.42) !important;
}

#servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar-thumb:hover,
.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(158, 239, 255, 0.98) 18%, rgba(101, 213, 255, 0.94) 56%, rgba(65, 159, 255, 0.90) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.66),
        inset 0 -1px 0 rgba(45, 140, 255, 0.58),
        0 0 0 1px rgba(122, 229, 255, 0.32),
        0 0 24px rgba(84, 196, 255, 0.58) !important;
}

#servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar-thumb:active,
.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar-thumb:active{
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 1) 0%, rgba(68, 183, 255, 0.96) 50%, rgba(24, 98, 224, 0.94) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 0 10px rgba(255, 255, 255, 0.12),
        0 0 28px rgba(84, 196, 255, 0.68) !important;
}

#servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar-corner,
.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar-corner{
    background: rgba(1, 10, 32, 0.96) !important;
}



/* ===========================================================================
   FINAL FIX: real luxury scroll line for Services dropdown
   ---------------------------------------------------------------------------
   Native scrollbar styling is not visually reliable across Chrome/Edge/Windows
   overlay modes, so the Services dropdown gets its own visible premium blue
   scroll rail and thumb. The real menu still scrolls normally with wheel/touch;
   this indicator mirrors the actual scroll position and can be dragged.
   =========================================================================== */

#servicesDropdownMenu .pf-header__dropdown-scroll-shell,
#servicesMenuItem.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll-shell{
    position: relative !important;
    overflow: hidden !important;
    padding-right: clamp(16px, 1.35vw, 22px) !important;
}

#servicesDropdownMenu .pf-header__dropdown-scroll,
#servicesMenuItem.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll{
    padding-right: 6px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar,
#servicesMenuItem.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

#servicesDropdownMenu .pf-header__services-scrollbar,
#servicesMenuItem.pf-header__item--services-3d #servicesDropdownMenu .pf-header__services-scrollbar{
    position: absolute;
    top: 18px;
    right: 7px;
    bottom: 18px;
    width: 9px;
    border-radius: 999px;
    border: 1px solid rgba(122, 229, 255, 0.22);
    background:
        radial-gradient(circle at 50% 8%, rgba(122, 229, 255, 0.28), transparent 34%),
        linear-gradient(180deg, rgba(5, 28, 76, 0.98), rgba(1, 9, 30, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(1, 8, 26, 0.76),
        inset 0 0 18px rgba(84, 196, 255, 0.12),
        0 0 20px rgba(84, 196, 255, 0.18),
        0 18px 34px rgba(0, 0, 0, 0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    z-index: 7;
}

#servicesDropdownMenu .pf-header__dropdown-scroll-shell.has-luxury-scrollbar .pf-header__services-scrollbar,
#servicesMenuItem.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll-shell.has-luxury-scrollbar .pf-header__services-scrollbar{
    opacity: 1;
    pointer-events: auto;
}

#servicesDropdownMenu .pf-header__services-scrollbar::before,
#servicesMenuItem.pf-header__item--services-3d #servicesDropdownMenu .pf-header__services-scrollbar::before{
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg,
        rgba(122, 229, 255, 0),
        rgba(122, 229, 255, 0.52) 26%,
        rgba(84, 196, 255, 0.36) 56%,
        rgba(45, 140, 255, 0.18) 78%,
        rgba(122, 229, 255, 0));
    box-shadow: 0 0 12px rgba(84, 196, 255, 0.42);
}

#servicesDropdownMenu .pf-header__services-scrollbar-thumb,
#servicesMenuItem.pf-header__item--services-3d #servicesDropdownMenu .pf-header__services-scrollbar-thumb{
    position: absolute;
    top: var(--pf-services-scroll-thumb-top, 0px);
    left: 1px;
    right: 1px;
    height: var(--pf-services-scroll-thumb-height, 54px);
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(230, 252, 255, 0.36);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(153, 237, 255, 0.98) 18%, rgba(84, 196, 255, 0.96) 54%, rgba(45, 140, 255, 0.92) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        inset 0 -1px 0 rgba(45, 140, 255, 0.58),
        0 0 0 1px rgba(122, 229, 255, 0.26),
        0 0 18px rgba(84, 196, 255, 0.58),
        0 8px 16px rgba(0, 0, 0, 0.34);
    cursor: grab;
    transform: translateZ(0);
    transition: background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

#servicesDropdownMenu .pf-header__services-scrollbar-thumb:hover,
#servicesDropdownMenu .pf-header__services-scrollbar-thumb:focus-visible,
#servicesMenuItem.pf-header__item--services-3d #servicesDropdownMenu .pf-header__services-scrollbar-thumb:hover,
#servicesMenuItem.pf-header__item--services-3d #servicesDropdownMenu .pf-header__services-scrollbar-thumb:focus-visible{
    border-color: rgba(255, 255, 255, 0.62);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(178, 243, 255, 1) 16%, rgba(101, 213, 255, 0.98) 56%, rgba(65, 159, 255, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        inset 0 -1px 0 rgba(45, 140, 255, 0.64),
        0 0 0 1px rgba(122, 229, 255, 0.38),
        0 0 28px rgba(84, 196, 255, 0.72),
        0 10px 18px rgba(0, 0, 0, 0.38);
}

#servicesDropdownMenu .pf-header__dropdown-scroll-shell.is-dragging-scroll .pf-header__services-scrollbar,
#servicesMenuItem.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll-shell.is-dragging-scroll .pf-header__services-scrollbar{
    border-color: rgba(122, 229, 255, 0.48);
    box-shadow:
        inset 0 0 0 1px rgba(1, 8, 26, 0.80),
        inset 0 0 22px rgba(84, 196, 255, 0.18),
        0 0 30px rgba(84, 196, 255, 0.32),
        0 18px 34px rgba(0, 0, 0, 0.44);
}

#servicesDropdownMenu .pf-header__dropdown-scroll-shell.is-dragging-scroll .pf-header__services-scrollbar-thumb,
#servicesMenuItem.pf-header__item--services-3d #servicesDropdownMenu .pf-header__dropdown-scroll-shell.is-dragging-scroll .pf-header__services-scrollbar-thumb{
    cursor: grabbing;
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 1) 0%, rgba(68, 183, 255, 0.98) 52%, rgba(24, 98, 224, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 0 12px rgba(255, 255, 255, 0.14),
        0 0 32px rgba(84, 196, 255, 0.80),
        0 10px 18px rgba(0, 0, 0, 0.42);
}

@media (max-width: 1024px){
    #servicesDropdownMenu .pf-header__services-scrollbar,
    #servicesMenuItem.pf-header__item--services-3d #servicesDropdownMenu .pf-header__services-scrollbar{
        right: 6px;
        width: 8px;
    }
}

/* ===========================================================================
   FINAL FIX: desktop Services mega panel below the whole header
   ---------------------------------------------------------------------------
   Converts the "Usluge" dropdown from a small button-attached box into a
   wider premium mega panel that opens below the complete header frame. Mobile
   keeps the existing compact behavior.
   =========================================================================== */

@media (min-width: 1025px){
    #servicesMenuItem.pf-header__item--services-3d > #servicesDropdownMenu.pf-header__dropdown--holo{
        top: var(--pf-services-mega-top-offset, calc(100% + 44px)) !important;
        left: 50% !important;
        right: auto !important;
        width: min(1120px, calc(100vw - 48px)) !important;
        max-height: min(calc(100vh - var(--pf-services-mega-viewport-top, 138px) - 26px), 690px) !important;
        padding: clamp(16px, 1.7vw, 24px) !important;
        display: grid !important;
        grid-template-columns: minmax(292px, 0.72fr) minmax(0, 1.18fr) !important;
        align-items: stretch !important;
        gap: clamp(14px, 1.35vw, 20px) !important;
        border-radius: 34px !important;
        overflow: hidden !important;
        color: rgba(246, 251, 255, 0.98) !important;
        border: 1px solid transparent !important;
        background:
            radial-gradient(circle at 14% 0%, rgba(122, 229, 255, 0.24), transparent 30%) padding-box,
            radial-gradient(circle at 82% 4%, rgba(45, 140, 255, 0.22), transparent 34%) padding-box,
            linear-gradient(180deg, rgba(7, 36, 96, 0.99), rgba(3, 20, 58, 0.995) 44%, rgba(1, 9, 29, 1) 100%) padding-box,
            linear-gradient(135deg, rgba(191, 242, 255, 0.74), rgba(92, 203, 255, 0.92) 22%, rgba(43, 131, 255, 0.92) 56%, rgba(123, 229, 255, 0.78) 100%) border-box !important;
        box-shadow:
            0 42px 90px -42px rgba(0, 0, 0, 0.92),
            0 22px 48px -30px rgba(45, 140, 255, 0.26),
            0 0 44px rgba(84, 196, 255, 0.18),
            inset 0 1px 0 rgba(218, 250, 255, 0.22),
            inset 0 -1px 0 rgba(45, 140, 255, 0.18) !important;
        -webkit-backdrop-filter: blur(20px) saturate(124%) !important;
        backdrop-filter: blur(20px) saturate(124%) !important;
        transform: translateX(calc(-50% - var(--pf-services-dropdown-shift, 0px))) translateY(-14px) scale(0.985) !important;
        transform-origin: top center !important;
        transition:
            opacity 240ms ease,
            visibility 240ms ease,
            transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 240ms ease !important;
        z-index: 1180 !important;
    }

    #servicesMenuItem.pf-header__item--services-3d.is-open > #servicesDropdownMenu.pf-header__dropdown--holo{
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(calc(-50% - var(--pf-services-dropdown-shift, 0px))) translateY(0) scale(1) !important;
    }

    #servicesMenuItem.pf-header__item--services-3d:not(.is-open) > #servicesDropdownMenu.pf-header__dropdown--holo{
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #servicesMenuItem.pf-header__item--services-3d.is-open::after{
        content: "" !important;
        position: absolute !important;
        top: 100% !important;
        left: calc(-1 * var(--pf-services-dropdown-shift, 0px) - 560px) !important;
        right: calc(var(--pf-services-dropdown-shift, 0px) - 560px) !important;
        height: var(--pf-services-mega-bridge-height, 92px) !important;
        background: transparent !important;
        pointer-events: auto !important;
        z-index: 1170 !important;
    }

    #servicesDropdownMenu.pf-header__dropdown--holo::before{
        content: none !important;
        display: none !important;
    }

    #servicesDropdownMenu.pf-header__dropdown--holo::after{
        content: "" !important;
        position: absolute !important;
        inset: 10px !important;
        border-radius: 26px !important;
        border: 1px solid rgba(122, 229, 255, 0.22) !important;
        background:
            linear-gradient(90deg, rgba(122, 229, 255, 0), rgba(122, 229, 255, 0.18), rgba(122, 229, 255, 0)) top center / 46% 1px no-repeat,
            linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 28%, rgba(84, 196, 255, 0.025) 100%) !important;
        box-shadow:
            inset 0 0 0 1px rgba(20, 108, 220, 0.10),
            inset 0 0 34px rgba(84, 196, 255, 0.055) !important;
        opacity: 1 !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__dropdown-header,
    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__dropdown-scroll-shell{
        position: relative !important;
        z-index: 2 !important;
        min-width: 0 !important;
    }

    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__dropdown-header{
        display: flex !important;
        align-items: stretch !important;
        height: 100% !important;
    }

    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__dropdown-header-card,
    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__dropdown-panel{
        width: 100% !important;
        min-height: 100% !important;
        align-content: center !important;
        padding: clamp(22px, 2vw, 30px) !important;
        border-radius: 26px !important;
        border: 1px solid rgba(122, 229, 255, 0.34) !important;
        background:
            radial-gradient(circle at 22% 0%, rgba(122, 229, 255, 0.18), transparent 34%),
            radial-gradient(circle at 100% 8%, rgba(45, 140, 255, 0.20), transparent 36%),
            linear-gradient(180deg, rgba(9, 52, 128, 0.86), rgba(3, 22, 64, 0.94) 48%, rgba(1, 10, 33, 0.98) 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(218, 250, 255, 0.20),
            inset 0 -1px 0 rgba(45, 140, 255, 0.16),
            0 16px 34px rgba(0, 0, 0, 0.32),
            0 0 24px rgba(84, 196, 255, 0.09) !important;
        -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
        backdrop-filter: blur(12px) saturate(120%) !important;
    }

    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__dropdown-header::before{
        left: 50% !important;
        top: 12px !important;
        width: min(220px, 60%) !important;
        opacity: 0.9 !important;
    }

    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__dropdown-eyebrow{
        width: max-content !important;
        max-width: 100% !important;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(122, 229, 255, 0.40) !important;
        background: rgba(6, 42, 110, 0.68) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 18px rgba(84, 196, 255, 0.12) !important;
    }

    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__dropdown-title{
        font-size: clamp(1.18rem, 0.92rem + 0.9vw, 1.62rem) !important;
        letter-spacing: -0.015em !important;
    }

    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__dropdown-subtitle{
        max-width: 34rem !important;
        color: rgba(224, 241, 255, 0.90) !important;
    }

    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__dropdown-scroll-shell{
        align-self: stretch !important;
        padding: 6px clamp(18px, 1.45vw, 24px) 6px 6px !important;
        border-radius: 26px !important;
        border: 1px solid rgba(122, 229, 255, 0.20) !important;
        background:
            linear-gradient(90deg, transparent calc(100% - 24px), rgba(122, 229, 255, 0.07) calc(100% - 24px), rgba(1, 10, 32, 0.34) 100%),
            linear-gradient(180deg, rgba(4, 29, 78, 0.52), rgba(1, 11, 34, 0.22)) !important;
        box-shadow:
            inset 0 1px 0 rgba(122, 229, 255, 0.10),
            inset -1px 0 0 rgba(122, 229, 255, 0.20),
            inset -12px 0 22px rgba(84, 196, 255, 0.052),
            0 14px 30px rgba(0, 0, 0, 0.22) !important;
    }

    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__dropdown-scroll{
        max-height: min(calc(100vh - var(--pf-services-mega-viewport-top, 138px) - 92px), 500px) !important;
        min-height: min(410px, calc(100vh - var(--pf-services-mega-viewport-top, 138px) - 120px)) !important;
        padding: 2px 4px 2px 2px !important;
        gap: 12px !important;
    }

    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__sublink--tile{
        min-height: 92px !important;
        border-radius: 23px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1180px){
    #servicesMenuItem.pf-header__item--services-3d > #servicesDropdownMenu.pf-header__dropdown--holo{
        width: min(980px, calc(100vw - 34px)) !important;
        grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1fr) !important;
    }
}

@media (min-width: 1025px) and (max-height: 760px){
    #servicesDropdownMenu.pf-header__dropdown--holo .pf-header__dropdown-scroll{
        min-height: 0 !important;
        max-height: min(calc(100vh - var(--pf-services-mega-viewport-top, 128px) - 76px), 390px) !important;
    }
}

/* =====================================================================
 * Stable professional About roller transition.
 * Replaces the heavy 360/stack experiments with a calm premium dissolve.
 * The effect uses only transform + opacity so it stays smooth.
 * ===================================================================== */

:root{
    --rivontiq-transition-cyan: rgba(122, 229, 255, 0.92);
    --rivontiq-transition-cyan-soft: rgba(84, 196, 255, 0.28);
    --rivontiq-transition-deep: rgba(0, 14, 42, 0.88);
}

.pf-about-section .pf-about-contact-flip{
    --pf-about-reveal-shift: 18px;
    --pf-about-reveal-direction: 1;
    perspective: none !important;
    transform-style: flat !important;
    isolation: isolate !important;
}

.pf-about-section .pf-about-contact-flip::before,
.pf-about-section .pf-about-contact-flip::after{
    animation: none !important;
    opacity: 0 !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    mix-blend-mode: normal !important;
}

.pf-about-section .pf-about-contact-flip-inner{
    transform: translate3d(0, 0, 0) !important;
    transform-style: flat !important;
    transition: none !important;
    filter: none !important;
    will-change: auto !important;
}

.pf-about-section .pf-about-contact-face{
    filter: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition:
        opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 460ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity, transform !important;
}

.pf-about-section .pf-about-contact-face.is-before-face,
.pf-about-section .pf-about-contact-face.is-after-face{
    opacity: 0 !important;
    transform: translate3d(0, 10px, 0) scale(0.994) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.pf-about-section .pf-about-contact-face.is-active-face{
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    filter: none !important;
    z-index: 6 !important;
    pointer-events: auto !important;
}

.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-leaving-face{
    opacity: 0.16 !important;
    transform: translate3d(0, -10px, 0) scale(0.992) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-entering-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-active-face.is-entering-face{
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    z-index: 9 !important;
    pointer-events: auto !important;
}

.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-before-face:not(.is-leaving-face),
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-after-face:not(.is-entering-face){
    opacity: 0 !important;
    transform: translate3d(0, 12px, 0) scale(0.992) !important;
    z-index: 1 !important;
}

/* Old card quietly settles underneath. */
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-leaving-face .pf-about-contact-panel{
    animation: pfAboutStableLeave 520ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
    transform-origin: 50% 50% !important;
    filter: none !important;
    will-change: transform, opacity !important;
}

/* New card appears cleanly, without 360 spin, blur, or heavy glow. */
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-entering-face .pf-about-contact-panel,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-active-face.is-entering-face .pf-about-contact-panel,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-active-face .pf-about-contact-panel{
    animation: pfAboutStableEnter 540ms cubic-bezier(0.18, 1, 0.26, 1) both !important;
    transform-origin: 50% 50% !important;
    filter: none !important;
    will-change: transform, opacity !important;
}

/* During the transition, disable expensive pseudo animations that caused stutter. */
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-panel::before,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-panel::after{
    animation: none !important;
    filter: none !important;
    transform: none !important;
}

/* Keep the idle card premium, but light enough for smooth scrolling. */
.pf-about-section .pf-about-contact-face.is-active-face .pf-about-contact-panel::after{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 3 !important;
    border: 1px solid rgba(122, 229, 255, 0.16) !important;
    background:
        linear-gradient(90deg, transparent, rgba(122, 229, 255, 0.26), rgba(84, 196, 255, 0.14), transparent) top center / 54% 1px no-repeat,
        radial-gradient(circle at 50% 0%, rgba(122, 229, 255, 0.08), transparent 44%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(84, 196, 255, 0.06),
        inset 0 0 24px rgba(84, 196, 255, 0.035) !important;
    opacity: 0.72 !important;
    transform: none !important;
    filter: none !important;
    mix-blend-mode: screen !important;
}

@keyframes pfAboutStableLeave{
    0%{
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    100%{
        opacity: 0.16;
        transform: translate3d(0, -10px, 0) scale(0.992);
    }
}

@keyframes pfAboutStableEnter{
    0%{
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.988);
    }

    72%{
        opacity: 1;
        transform: translate3d(0, -2px, 0) scale(1.001);
    }

    100%{
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce){
    .pf-about-section .pf-about-contact-face,
    .pf-about-section .pf-about-contact-flip-inner,
    .pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face .pf-about-contact-panel{
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* =====================================================================
 * Final static vertical card layout.
 * Removes the scroll-to-end roller/flip behaviour while keeping the
 * existing premium blue card styling, 3D hover/tilt and inner card colors.
 * ===================================================================== */

.pf-about-section .pf-about-contact-shell{
    transform-style: preserve-3d !important;
}

.pf-about-section .pf-about-contact-grid{
    display: block !important;
    overflow: visible !important;
}

.pf-about-section .pf-about-contact-flip{
    height: auto !important;
    min-height: 0 !important;
    perspective: 1800px !important;
    perspective-origin: 50% 18% !important;
    contain: none !important;
    overflow: visible !important;
    transform-style: preserve-3d !important;
    isolation: isolate !important;
}

.pf-about-section .pf-about-contact-flip::before,
.pf-about-section .pf-about-contact-flip::after,
.pf-about-section .pf-about-contact-flip.is-focus-revealing::before,
.pf-about-section .pf-about-contact-flip.is-focus-revealing::after{
    animation: none !important;
    opacity: 0 !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.pf-about-section .pf-about-contact-flip-inner{
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(26px, 3.2vw, 48px) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    transform-style: preserve-3d !important;
    transition: none !important;
    filter: none !important;
    will-change: auto !important;
    overflow: visible !important;
}

.pf-about-section .pf-about-contact-face,
.pf-about-section .pf-about-contact-face.is-active-face,
.pf-about-section .pf-about-contact-face.is-before-face,
.pf-about-section .pf-about-contact-face.is-after-face,
.pf-about-section .pf-about-contact-face.is-static-face,
.pf-about-section .pf-about-contact-face.is-leaving-face,
.pf-about-section .pf-about-contact-face.is-entering-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-active-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-before-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-after-face{
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: auto !important;
    transform: translate3d(0, 0, 0) !important;
    filter: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    transition: transform 260ms ease, opacity 260ms ease, box-shadow 260ms ease !important;
    will-change: auto !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel,
.pf-about-section .pf-about-contact-face.is-active-face .pf-about-contact-panel,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face .pf-about-contact-panel,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-active-face .pf-about-contact-panel{
    width: 100% !important;
    min-height: 0 !important;
    animation: none !important;
    transform: translate3d(0, 0, 0) !important;
    filter: none !important;
    will-change: auto !important;
}

.pf-about-section .pf-about-contact-scroll,
.pf-about-section [data-pf-about-step-scroll]{
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    padding-right: 0 !important;
    scrollbar-width: none !important;
}

.pf-about-section .pf-about-contact-scroll::-webkit-scrollbar,
.pf-about-section [data-pf-about-step-scroll]::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
}

.pf-about-section .pf-about-contact-scroll-hint{
    display: none !important;
}

.pf-about-section [data-pf-about-roll-prev],
.pf-about-section [data-pf-about-flip-reset]{
    display: none !important;
}

.pf-about-section .pf-about-contact-back-actions:has([data-pf-about-roll-prev]),
.pf-about-section .pf-about-contact-back-actions:has([data-pf-about-flip-reset]){
    display: none !important;
}

.pf-about-section .pf-about-footer-reveal,
.pf-about-section[data-pf-about-footer-visible="true"] .pf-about-footer-reveal{
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

@media (min-width: 992px){
    .pf-about-section .pf-about-contact-flip-inner{
        gap: clamp(34px, 3.6vw, 58px) !important;
    }

    .pf-about-section .pf-about-contact-face:hover{
        transform: translate3d(0, -3px, 0) !important;
    }
}

@media (max-width: 767px){
    .pf-about-section .pf-about-contact-flip-inner{
        gap: 24px !important;
    }
}

/* =====================================================================
 * Patch 2026-06-13: independent vertical card hover/tilt.
 * The stacked layout must not tilt the whole shell. Only the card/panel
 * under the mouse gets the premium 3D reaction; sibling cards stay still.
 * ===================================================================== */

.pf-about-section .pf-about-contact-shell[data-pf-about-tilt],
.pf-about-section .pf-about-contact-shell[data-pf-about-tilt][data-pf-about-group-tilt-disabled="true"]{
    --pf-about-rotate-x: 0deg !important;
    --pf-about-rotate-y: 0deg !important;
    transform: perspective(2200px) rotateX(0deg) rotateY(0deg) translateZ(0) !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel{
    --pf-about-panel-rx: 0deg;
    --pf-about-panel-ry: 0deg;
    --pf-about-panel-tz: 0px;
    --pf-about-panel-lift: 0px;
    --pf-about-panel-glow: 0;
    transform:
        perspective(1800px)
        translate3d(0, var(--pf-about-panel-lift), var(--pf-about-panel-tz))
        rotateX(var(--pf-about-panel-rx))
        rotateY(var(--pf-about-panel-ry)) !important;
    transform-origin: 50% 50% !important;
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease,
        border-color 220ms ease,
        background 220ms ease !important;
    will-change: auto !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting{
    z-index: 5 !important;
    box-shadow:
        0 28px 72px rgba(0, 25, 72, 0.44),
        0 0 calc(28px + (34px * var(--pf-about-panel-glow))) rgba(89, 202, 255, 0.18),
        inset 0 0 0 1px rgba(125, 230, 255, 0.18),
        inset 0 1px 0 rgba(220, 249, 255, 0.14) !important;
    border-color: rgba(125, 230, 255, 0.46) !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting::after{
    opacity: calc(0.68 + (0.18 * var(--pf-about-panel-glow))) !important;
    border-color: rgba(125, 230, 255, 0.26) !important;
}

@media (min-width: 992px){
    .pf-about-section .pf-about-contact-face:hover{
        transform: none !important;
    }
}

@media (max-width: 991px), (prefers-reduced-motion: reduce){
    .pf-about-section .pf-about-contact-face .pf-about-contact-panel,
    .pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting{
        --pf-about-panel-rx: 0deg !important;
        --pf-about-panel-ry: 0deg !important;
        --pf-about-panel-tz: 0px !important;
        --pf-about-panel-lift: 0px !important;
        transform: translate3d(0, 0, 0) !important;
        transition: none !important;
    }
}


/* =====================================================================
 * Patch 2026-06-13: restore independent hover tilt per vertical card.
 * The outer group remains fixed; only the exact panel under the mouse tilts.
 * This works on narrow desktop windows too, as long as a real hover mouse exists.
 * ===================================================================== */

.pf-about-section .pf-about-contact-shell[data-pf-about-tilt],
.pf-about-section .pf-about-contact-shell[data-pf-about-tilt][data-pf-about-group-tilt-disabled="true"]{
    --pf-about-rotate-x: 0deg !important;
    --pf-about-rotate-y: 0deg !important;
    transform: perspective(2200px) rotateX(0deg) rotateY(0deg) translateZ(0) !important;
}

.pf-about-section .pf-about-contact-flip-inner,
.pf-about-section .pf-about-contact-face{
    transform-style: preserve-3d !important;
}

.pf-about-section .pf-about-contact-face:hover{
    transform: none !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel{
    --pf-about-panel-rx: 0deg;
    --pf-about-panel-ry: 0deg;
    --pf-about-panel-tz: 0px;
    --pf-about-panel-lift: 0px;
    --pf-about-panel-glow: 0;
    transform:
        perspective(1800px)
        translate3d(0, var(--pf-about-panel-lift), var(--pf-about-panel-tz))
        rotateX(var(--pf-about-panel-rx))
        rotateY(var(--pf-about-panel-ry)) !important;
    transform-origin: 50% 50% !important;
    transition:
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 240ms ease,
        border-color 240ms ease,
        background 240ms ease !important;
    will-change: transform !important;
}

@media (hover: hover) and (pointer: fine){
    .pf-about-section .pf-about-contact-face .pf-about-contact-panel:hover{
        --pf-about-panel-rx: 1.15deg;
        --pf-about-panel-ry: -1.35deg;
        --pf-about-panel-tz: 6px;
        --pf-about-panel-lift: -3px;
        --pf-about-panel-glow: 0.22;
    }
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting{
    z-index: 8 !important;
    box-shadow:
        0 30px 78px rgba(0, 25, 72, 0.46),
        0 0 calc(30px + (38px * var(--pf-about-panel-glow))) rgba(89, 202, 255, 0.2),
        inset 0 0 0 1px rgba(125, 230, 255, 0.2),
        inset 0 1px 0 rgba(220, 249, 255, 0.16) !important;
    border-color: rgba(125, 230, 255, 0.5) !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting::after,
.pf-about-section .pf-about-contact-face .pf-about-contact-panel:hover::after{
    opacity: calc(0.7 + (0.16 * var(--pf-about-panel-glow))) !important;
    border-color: rgba(125, 230, 255, 0.28) !important;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce){
    .pf-about-section .pf-about-contact-face .pf-about-contact-panel,
    .pf-about-section .pf-about-contact-face .pf-about-contact-panel:hover,
    .pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting{
        --pf-about-panel-rx: 0deg !important;
        --pf-about-panel-ry: 0deg !important;
        --pf-about-panel-tz: 0px !important;
        --pf-about-panel-lift: 0px !important;
        transform: translate3d(0, 0, 0) !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* =====================================================================
 * Patch 2026-06-13: reliable per-card mouse tilt.
 * Some desktop/touch hybrid devices report pointer: coarse, which disabled
 * the previous tilt rules. These final rules keep the group fixed and allow
 * only the card with the JS class to tilt.
 * ===================================================================== */

.pf-about-section .pf-about-contact-shell[data-pf-about-tilt],
.pf-about-section .pf-about-contact-shell[data-pf-about-tilt][data-pf-about-group-tilt-disabled="true"]{
    --pf-about-rotate-x: 0deg !important;
    --pf-about-rotate-y: 0deg !important;
    transform: perspective(2200px) rotateX(0deg) rotateY(0deg) translateZ(0) !important;
}

.pf-about-section .pf-about-contact-face,
.pf-about-section .pf-about-contact-face:hover{
    transform: none !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel{
    --pf-about-panel-rx: 0deg;
    --pf-about-panel-ry: 0deg;
    --pf-about-panel-tz: 0px;
    --pf-about-panel-lift: 0px;
    --pf-about-panel-glow: 0;
    transform:
        perspective(1800px)
        translate3d(0, var(--pf-about-panel-lift), var(--pf-about-panel-tz))
        rotateX(var(--pf-about-panel-rx))
        rotateY(var(--pf-about-panel-ry)) !important;
    transform-origin: 50% 50% !important;
    transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 260ms ease,
        border-color 260ms ease,
        background 260ms ease !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting{
    transform:
        perspective(1800px)
        translate3d(0, var(--pf-about-panel-lift), var(--pf-about-panel-tz))
        rotateX(var(--pf-about-panel-rx))
        rotateY(var(--pf-about-panel-ry)) !important;
    z-index: 20 !important;
    box-shadow:
        0 32px 84px rgba(0, 25, 72, 0.48),
        0 0 calc(34px + (42px * var(--pf-about-panel-glow))) rgba(89, 202, 255, 0.22),
        inset 0 0 0 1px rgba(125, 230, 255, 0.24),
        inset 0 1px 0 rgba(220, 249, 255, 0.18) !important;
    border-color: rgba(125, 230, 255, 0.56) !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting::after{
    opacity: calc(0.72 + (0.18 * var(--pf-about-panel-glow))) !important;
    border-color: rgba(125, 230, 255, 0.32) !important;
}

@media (prefers-reduced-motion: reduce){
    .pf-about-section .pf-about-contact-face .pf-about-contact-panel,
    .pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting{
        --pf-about-panel-rx: 0deg !important;
        --pf-about-panel-ry: 0deg !important;
        --pf-about-panel-tz: 0px !important;
        --pf-about-panel-lift: 0px !important;
        transform: translate3d(0, 0, 0) !important;
        transition: none !important;
        will-change: auto !important;
    }
}


/* =====================================================================
 * Patch 2026-06-13: smoother independent card tilt.
 * JS now eases the values with requestAnimationFrame. The transform itself
 * must not have a long CSS transition while the mouse is moving, otherwise
 * the card lags and feels jumpy.
 * ===================================================================== */

.pf-about-section .pf-about-contact-face .pf-about-contact-panel{
    --pf-about-panel-pointer-x: 50%;
    --pf-about-panel-pointer-y: 18%;
    transform:
        perspective(1900px)
        translate3d(0, var(--pf-about-panel-lift), var(--pf-about-panel-tz))
        rotateX(var(--pf-about-panel-rx))
        rotateY(var(--pf-about-panel-ry)) !important;
    transform-origin: 50% 50% !important;
    transition:
        box-shadow 180ms ease,
        border-color 180ms ease,
        background 180ms ease !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting,
.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-returning{
    transform:
        perspective(1900px)
        translate3d(0, var(--pf-about-panel-lift), var(--pf-about-panel-tz))
        rotateX(var(--pf-about-panel-rx))
        rotateY(var(--pf-about-panel-ry)) !important;
    transition:
        box-shadow 160ms ease,
        border-color 160ms ease,
        background 160ms ease !important;
    will-change: transform !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting{
    z-index: 20 !important;
    box-shadow:
        0 28px 74px rgba(0, 25, 72, 0.42),
        0 0 calc(20px + (34px * var(--pf-about-panel-glow))) rgba(89, 202, 255, 0.18),
        inset 0 0 0 1px rgba(125, 230, 255, 0.23),
        inset 0 1px 0 rgba(220, 249, 255, 0.15) !important;
    border-color: rgba(125, 230, 255, 0.52) !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting::before{
    background:
        radial-gradient(circle at var(--pf-about-panel-pointer-x) var(--pf-about-panel-pointer-y), rgba(125, 230, 255, calc(0.10 + (0.12 * var(--pf-about-panel-glow)))), transparent 34%),
        linear-gradient(135deg, rgba(20, 111, 180, 0.30), rgba(0, 24, 70, 0.10) 48%, rgba(79, 195, 247, 0.16)) !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting::after{
    opacity: calc(0.68 + (0.16 * var(--pf-about-panel-glow))) !important;
    border-color: rgba(125, 230, 255, 0.30) !important;
}

@media (prefers-reduced-motion: reduce){
    .pf-about-section .pf-about-contact-face .pf-about-contact-panel,
    .pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting,
    .pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-returning{
        --pf-about-panel-rx: 0deg !important;
        --pf-about-panel-ry: 0deg !important;
        --pf-about-panel-tz: 0px !important;
        --pf-about-panel-lift: 0px !important;
        transform: translate3d(0, 0, 0) !important;
        transition: none !important;
        will-change: auto !important;
    }
}


/* =====================================================================
 * Patch 2026-06-15: restore backup home roller/prism effect.
 * Restores the old home-page card description/roller behaviour from
 * WebStudio.ClientSiteSkeleton.bekap.20260607_153045.zip while keeping the
 * newer blue visual theme loaded by this file.
 * ===================================================================== */

.pf-about-section .pf-about-contact-shell[data-pf-about-tilt],
.pf-about-section .pf-about-contact-shell[data-pf-about-tilt][data-pf-about-group-tilt-disabled="true"]{
    --pf-about-rotate-x: 0deg;
    --pf-about-rotate-y: 0deg;
    position: relative !important;
    isolation: isolate !important;
    transform-style: preserve-3d !important;
    transform: perspective(2400px) rotateX(var(--pf-about-rotate-x)) rotateY(var(--pf-about-rotate-y)) translateZ(0) !important;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease !important;
    will-change: transform !important;
}

.pf-about-section .pf-about-contact-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
}

.pf-about-section .pf-about-contact-flip{
    --pf-about-prism-depth: clamp(320px, 48vw, 620px);
    --pf-about-roll-angle: 0deg;
    --pf-about-step-angle: 72deg;
    --pf-about-roll-height: clamp(760px, 82vh, 920px);
    position: relative !important;
    height: var(--pf-about-roll-height) !important;
    min-height: var(--pf-about-roll-height) !important;
    perspective: 2800px !important;
    perspective-origin: 50% 50% !important;
    transition: none !important;
    contain: layout paint !important;
    overflow: visible !important;
    transform-style: preserve-3d !important;
    isolation: isolate !important;
}

.pf-about-section .pf-about-contact-flip::before{
    content: "" !important;
    position: absolute !important;
    inset: 2% 6% !important;
    border-radius: 42px !important;
    background: radial-gradient(circle at 50% 50%, rgba(111, 212, 255, 0.10), transparent 68%) !important;
    filter: blur(28px) !important;
    pointer-events: none !important;
    opacity: 0.9 !important;
    box-shadow: none !important;
    transform: none !important;
}

.pf-about-section .pf-about-contact-flip::after{
    opacity: 0 !important;
    pointer-events: none !important;
}

.pf-about-section .pf-about-contact-flip-inner{
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    transform-style: preserve-3d !important;
    transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    transform: translateZ(calc(var(--pf-about-prism-depth) * -1)) rotateY(var(--pf-about-roll-angle)) !important;
    will-change: transform !important;
    overflow: visible !important;
    filter: none !important;
}

.pf-about-section .pf-about-contact-face,
.pf-about-section .pf-about-contact-face.is-active-face,
.pf-about-section .pf-about-contact-face.is-before-face,
.pf-about-section .pf-about-contact-face.is-after-face,
.pf-about-section .pf-about-contact-face.is-static-face,
.pf-about-section .pf-about-contact-face.is-leaving-face,
.pf-about-section .pf-about-contact-face.is-entering-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-active-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-before-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-after-face{
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    width: 100% !important;
    min-height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: auto !important;
    transform: rotateY(calc(var(--pf-about-face-index) * var(--pf-about-step-angle))) translateZ(var(--pf-about-prism-depth)) !important;
    filter: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition: none !important;
    will-change: transform !important;
    pointer-events: none !important;
}

.pf-about-section .pf-about-contact-face[aria-hidden="false"]{
    pointer-events: auto !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel,
.pf-about-section .pf-about-contact-face.is-active-face .pf-about-contact-panel,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face .pf-about-contact-panel,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-active-face .pf-about-contact-panel{
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
}

.pf-about-section .pf-about-contact-scroll,
.pf-about-section [data-pf-about-step-scroll]{
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    padding-right: 0 !important;
    scrollbar-width: none !important;
}

.pf-about-section .pf-about-contact-scroll-hint{
    display: inline-flex !important;
}

.pf-about-section [data-pf-about-roll-prev],
.pf-about-section [data-pf-about-flip-reset]{
    display: inline-flex !important;
}

.pf-about-section .pf-about-contact-back-actions:has([data-pf-about-roll-prev]),
.pf-about-section .pf-about-contact-back-actions:has([data-pf-about-flip-reset]){
    display: flex !important;
}

.pf-about-section .pf-about-footer-reveal{
    opacity: 0 !important;
    transform: translate3d(0, 42px, 0) !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.pf-about-section[data-pf-about-footer-visible="true"] .pf-about-footer-reveal{
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

@media (max-width: 991px){
    .pf-about-section .pf-about-contact-flip{
        --pf-about-roll-height: 820px;
    }
}

@media (max-width: 767px){
    .pf-about-section .pf-about-contact-flip{
        --pf-about-roll-height: 900px;
    }
}

@media (max-width: 575px){
    .pf-about-section .pf-about-contact-flip{
        --pf-about-roll-height: 980px;
    }
}

@media (prefers-reduced-motion: reduce){
    .pf-about-section .pf-about-contact-shell[data-pf-about-tilt],
    .pf-about-section .pf-about-contact-flip-inner,
    .pf-about-section .pf-about-contact-face,
    .pf-about-section .pf-about-contact-face .pf-about-contact-panel{
        transform: none !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}


/* =====================================================================
 * Patch 2026-06-15: no card rotation / static cards one under another.
 * This is intentionally placed at the end to override all older roller,
 * prism, tilt and footer-like transforms.
 * ===================================================================== */

.pf-about-section .pf-about-contact-shell,
.pf-about-section .pf-about-contact-shell[data-pf-about-tilt],
.pf-about-section .pf-about-contact-shell[data-pf-about-tilt][data-pf-about-group-tilt-disabled="true"],
.pf-about-section .pf-about-contact-shell.is-footer-like-tilting{
    --pf-about-rotate-x: 0deg !important;
    --pf-about-rotate-y: 0deg !important;
    --pf-about-shell-shift-x: 0px !important;
    --pf-about-shell-shift-y: 0px !important;
    transform: none !important;
    transform-style: flat !important;
    perspective: none !important;
    transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease !important;
    will-change: auto !important;
}

.pf-about-section .pf-about-contact-grid{
    display: block !important;
    overflow: visible !important;
}

.pf-about-section .pf-about-contact-flip,
.pf-about-section .pf-about-contact-flip.is-focus-revealing{
    --pf-about-prism-depth: 0px !important;
    --pf-about-roll-angle: 0deg !important;
    --pf-about-step-angle: 0deg !important;
    --pf-about-roll-height: auto !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    perspective: none !important;
    perspective-origin: 50% 50% !important;
    contain: none !important;
    overflow: visible !important;
    transform: none !important;
    transform-style: flat !important;
    isolation: isolate !important;
    transition: none !important;
    will-change: auto !important;
}

.pf-about-section .pf-about-contact-flip::before,
.pf-about-section .pf-about-contact-flip::after,
.pf-about-section .pf-about-contact-flip.is-focus-revealing::before,
.pf-about-section .pf-about-contact-flip.is-focus-revealing::after{
    animation: none !important;
    opacity: 0 !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.pf-about-section .pf-about-contact-flip-inner,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-flip-inner{
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(26px, 3.2vw, 48px) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    transform-style: flat !important;
    transition: none !important;
    filter: none !important;
    will-change: auto !important;
    overflow: visible !important;
}

.pf-about-section .pf-about-contact-face,
.pf-about-section .pf-about-contact-face:hover,
.pf-about-section .pf-about-contact-face.is-active-face,
.pf-about-section .pf-about-contact-face.is-before-face,
.pf-about-section .pf-about-contact-face.is-after-face,
.pf-about-section .pf-about-contact-face.is-static-face,
.pf-about-section .pf-about-contact-face.is-leaving-face,
.pf-about-section .pf-about-contact-face.is-entering-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-active-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-before-face,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-after-face{
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: auto !important;
    transform: none !important;
    filter: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    transition: opacity 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease !important;
    will-change: auto !important;
}

.pf-about-section .pf-about-contact-face .pf-about-contact-panel,
.pf-about-section .pf-about-contact-face .pf-about-contact-panel:hover,
.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting,
.pf-about-section .pf-about-contact-face .pf-about-contact-panel.is-panel-returning,
.pf-about-section .pf-about-contact-face.is-active-face .pf-about-contact-panel,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face .pf-about-contact-panel,
.pf-about-section .pf-about-contact-flip.is-focus-revealing .pf-about-contact-face.is-active-face .pf-about-contact-panel{
    --pf-about-panel-rx: 0deg !important;
    --pf-about-panel-ry: 0deg !important;
    --pf-about-panel-tz: 0px !important;
    --pf-about-panel-lift: 0px !important;
    --pf-about-panel-glow: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
}

.pf-about-section [data-pf-about-inner-card],
.pf-about-section [data-pf-about-inner-card]:hover,
.pf-about-section [data-pf-about-inner-card].is-tilting,
.pf-about-section .pf-about-feature-card,
.pf-about-section .pf-about-stat-card,
.pf-about-section .pf-about-skill-card,
.pf-about-section .pf-about-contact-list-card{
    --pf-about-inner-rx: 0deg !important;
    --pf-about-inner-ry: 0deg !important;
    --pf-about-inner-tz: 0px !important;
    --pf-about-inner-shift-y: 0px !important;
    --pf-about-inner-glow: 0 !important;
    transform: none !important;
    transform-style: flat !important;
    transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease !important;
    will-change: auto !important;
}

.pf-about-section [data-pf-about-inner-card] > *,
.pf-about-section [data-pf-about-inner-card]:hover > *,
.pf-about-section [data-pf-about-inner-card].is-tilting > *{
    transform: none !important;
}

.pf-about-section [data-pf-about-inner-card]::before,
.pf-about-section [data-pf-about-inner-card]::after,
.pf-about-section [data-pf-about-inner-card]:hover::before,
.pf-about-section [data-pf-about-inner-card]:hover::after,
.pf-about-section [data-pf-about-inner-card].is-tilting::before,
.pf-about-section [data-pf-about-inner-card].is-tilting::after{
    transform: none !important;
}

.pf-about-section .pf-about-contact-scroll,
.pf-about-section [data-pf-about-step-scroll]{
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    padding-right: 0 !important;
    scrollbar-width: none !important;
}

.pf-about-section .pf-about-contact-scroll-hint{
    display: none !important;
}

.pf-about-section [data-pf-about-roll-prev],
.pf-about-section [data-pf-about-flip-reset]{
    display: none !important;
}

.pf-about-section .pf-about-contact-back-actions:has([data-pf-about-roll-prev]),
.pf-about-section .pf-about-contact-back-actions:has([data-pf-about-flip-reset]){
    display: none !important;
}

.pf-about-section .pf-about-footer-reveal,
.pf-about-section[data-pf-about-footer-visible="true"] .pf-about-footer-reveal{
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

@media (min-width: 992px){
    .pf-about-section .pf-about-contact-flip-inner{
        gap: clamp(34px, 3.6vw, 58px) !important;
    }
}


/* =====================================================================
 * Patch 2026-06-16: restore inner-card hover/3D effect only.
 * The large outer frame stays static; only the cards inside the frame get
 * the old pointer glow, small lift and independent 3D tilt back.
 * ===================================================================== */

.pf-about-section [data-pf-about-inner-card],
.pf-about-section [data-pf-about-inner-card]:hover,
.pf-about-section [data-pf-about-inner-card].is-tilting,
.pf-about-section [data-pf-about-inner-card].is-inner-returning,
.pf-about-section .pf-about-form-shell,
.pf-about-section .pf-about-form-shell:hover,
.pf-about-section .pf-about-form-shell.is-tilting,
.pf-about-section .pf-about-form-shell.is-inner-returning,
.pf-about-section .pf-about-portal-shell,
.pf-about-section .pf-about-portal-shell:hover,
.pf-about-section .pf-about-portal-shell.is-tilting,
.pf-about-section .pf-about-portal-shell.is-inner-returning,
.pf-about-section .pf-about-faq-item,
.pf-about-section .pf-about-faq-item:hover,
.pf-about-section .pf-about-faq-item.is-tilting,
.pf-about-section .pf-about-faq-item.is-inner-returning,
.pf-about-section .pf-about-testimonial-card,
.pf-about-section .pf-about-testimonial-card:hover,
.pf-about-section .pf-about-testimonial-card.is-tilting,
.pf-about-section .pf-about-testimonial-card.is-inner-returning{
    --pf-about-inner-rx: var(--pf-about-js-inner-rx, 0deg) !important;
    --pf-about-inner-ry: var(--pf-about-js-inner-ry, 0deg) !important;
    --pf-about-inner-tz: var(--pf-about-js-inner-tz, 0px) !important;
    --pf-about-inner-shift-y: var(--pf-about-js-inner-shift-y, 0px) !important;
    --pf-about-inner-pointer-x: var(--pf-about-js-inner-pointer-x, 50%) !important;
    --pf-about-inner-pointer-y: var(--pf-about-js-inner-pointer-y, 18%) !important;
    --pf-about-inner-shine-x: var(--pf-about-js-inner-shine-x, 0px) !important;
    --pf-about-inner-glow: var(--pf-about-js-inner-glow, 0) !important;
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    transform-style: preserve-3d !important;
    transform:
        perspective(1850px)
        translate3d(0, var(--pf-about-inner-shift-y), var(--pf-about-inner-tz))
        rotateX(var(--pf-about-inner-rx))
        rotateY(var(--pf-about-inner-ry))
        scale(calc(1 + (0.012 * var(--pf-about-inner-glow)))) !important;
    transform-origin: 50% 50% !important;
    transition:
        box-shadow 180ms ease,
        border-color 180ms ease,
        filter 180ms ease,
        background 180ms ease !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.pf-about-section [data-pf-about-inner-card].is-tilting,
.pf-about-section .pf-about-form-shell.is-tilting,
.pf-about-section .pf-about-portal-shell.is-tilting,
.pf-about-section .pf-about-faq-item.is-tilting,
.pf-about-section .pf-about-testimonial-card.is-tilting{
    z-index: 8 !important;
    will-change: transform !important;
    border-color: rgba(166, 244, 255, 1) !important;
    filter: saturate(1.08) brightness(1.035) !important;
    box-shadow:
        0 0 0 1px rgba(166, 244, 255, 0.36),
        0 0 calc(30px + (18px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.40),
        0 0 calc(54px + (20px * var(--pf-about-inner-glow))) rgba(45, 140, 255, 0.26),
        0 28px 58px rgba(1, 11, 31, 0.56),
        inset 0 1px 0 rgba(166, 244, 255, 0.42),
        inset 0 -1px 0 rgba(84, 196, 255, 0.28) !important;
}

.pf-about-section [data-pf-about-inner-card]::before,
.pf-about-section [data-pf-about-inner-card]:hover::before,
.pf-about-section [data-pf-about-inner-card].is-tilting::before,
.pf-about-section [data-pf-about-inner-card].is-inner-returning::before,
.pf-about-section .pf-about-form-shell::before,
.pf-about-section .pf-about-form-shell:hover::before,
.pf-about-section .pf-about-form-shell.is-tilting::before,
.pf-about-section .pf-about-portal-shell::before,
.pf-about-section .pf-about-portal-shell:hover::before,
.pf-about-section .pf-about-portal-shell.is-tilting::before,
.pf-about-section .pf-about-faq-item::before,
.pf-about-section .pf-about-faq-item:hover::before,
.pf-about-section .pf-about-faq-item.is-tilting::before,
.pf-about-section .pf-about-testimonial-card::before,
.pf-about-section .pf-about-testimonial-card:hover::before,
.pf-about-section .pf-about-testimonial-card.is-tilting::before{
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.16), rgba(84, 196, 255, 0.05) 28%, transparent 68%),
        radial-gradient(circle at var(--pf-about-inner-pointer-x) var(--pf-about-inner-pointer-y), rgba(166, 244, 255, calc(0.14 + (0.18 * var(--pf-about-inner-glow)))), rgba(84, 196, 255, calc(0.04 + (0.08 * var(--pf-about-inner-glow)))) 22%, transparent 52%) !important;
    border-color: rgba(166, 244, 255, calc(0.26 + (0.14 * var(--pf-about-inner-glow)))) !important;
    box-shadow:
        inset 0 1px 0 rgba(166, 244, 255, 0.18),
        inset 0 0 calc(22px + (18px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.10),
        0 0 calc(16px + (14px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.10) !important;
    opacity: calc(0.90 + (0.10 * var(--pf-about-inner-glow))) !important;
    transform: translate3d(0, 0, 18px) !important;
}

.pf-about-section [data-pf-about-inner-card]::after,
.pf-about-section [data-pf-about-inner-card]:hover::after,
.pf-about-section [data-pf-about-inner-card].is-tilting::after,
.pf-about-section [data-pf-about-inner-card].is-inner-returning::after,
.pf-about-section .pf-about-form-shell::after,
.pf-about-section .pf-about-form-shell:hover::after,
.pf-about-section .pf-about-form-shell.is-tilting::after,
.pf-about-section .pf-about-portal-shell::after,
.pf-about-section .pf-about-portal-shell:hover::after,
.pf-about-section .pf-about-portal-shell.is-tilting::after,
.pf-about-section .pf-about-faq-item::after,
.pf-about-section .pf-about-faq-item:hover::after,
.pf-about-section .pf-about-faq-item.is-tilting::after,
.pf-about-section .pf-about-testimonial-card::after,
.pf-about-section .pf-about-testimonial-card:hover::after,
.pf-about-section .pf-about-testimonial-card.is-tilting::after{
    transform: translate3d(var(--pf-about-inner-shine-x), 0, 24px) !important;
    opacity: calc(0.76 + (0.18 * var(--pf-about-inner-glow))) !important;
    filter: blur(calc(3.4px + (1.6px * var(--pf-about-inner-glow)))) drop-shadow(0 0 16px rgba(84, 196, 255, 0.22)) !important;
}

.pf-about-section [data-pf-about-inner-card] > *,
.pf-about-section [data-pf-about-inner-card]:hover > *,
.pf-about-section [data-pf-about-inner-card].is-tilting > *,
.pf-about-section [data-pf-about-inner-card].is-inner-returning > *,
.pf-about-section .pf-about-form-shell > *,
.pf-about-section .pf-about-form-shell:hover > *,
.pf-about-section .pf-about-form-shell.is-tilting > *,
.pf-about-section .pf-about-portal-shell > *,
.pf-about-section .pf-about-portal-shell:hover > *,
.pf-about-section .pf-about-portal-shell.is-tilting > *,
.pf-about-section .pf-about-faq-item > *,
.pf-about-section .pf-about-faq-item:hover > *,
.pf-about-section .pf-about-faq-item.is-tilting > *,
.pf-about-section .pf-about-testimonial-card > *,
.pf-about-section .pf-about-testimonial-card:hover > *,
.pf-about-section .pf-about-testimonial-card.is-tilting > *{
    transform: translate3d(0, 0, calc(8px + (10px * var(--pf-about-inner-glow)))) !important;
    transition: transform 180ms ease, text-shadow 180ms ease !important;
}

.pf-about-section .pf-about-feature-icon,
.pf-about-section .pf-about-stat-icon,
.pf-about-section .pf-about-skill-icon,
.pf-about-section .pf-about-contact-list-card > span{
    transform:
        translate3d(0, 0, calc(18px + (16px * var(--pf-about-inner-glow))))
        rotateX(calc(3deg * var(--pf-about-inner-glow)))
        rotateY(calc(-2deg * var(--pf-about-inner-glow))) !important;
    transition: transform 180ms ease, box-shadow 180ms ease !important;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse){
    .pf-about-section [data-pf-about-inner-card],
    .pf-about-section [data-pf-about-inner-card]:hover,
    .pf-about-section [data-pf-about-inner-card].is-tilting,
    .pf-about-section .pf-about-form-shell,
    .pf-about-section .pf-about-form-shell:hover,
    .pf-about-section .pf-about-portal-shell,
    .pf-about-section .pf-about-portal-shell:hover,
    .pf-about-section .pf-about-faq-item,
    .pf-about-section .pf-about-faq-item:hover,
    .pf-about-section .pf-about-testimonial-card,
    .pf-about-section .pf-about-testimonial-card:hover{
        --pf-about-inner-rx: 0deg !important;
        --pf-about-inner-ry: 0deg !important;
        --pf-about-inner-tz: 0px !important;
        --pf-about-inner-shift-y: 0px !important;
        --pf-about-inner-glow: 0 !important;
        transform: none !important;
        will-change: auto !important;
    }
}

/* PATCH 20260616: FAQ list without outer grey frame
   Skida spoljašnji sivi/stakleni okvir oko FAQ pitanja i odgovora.
   Plave FAQ kartice ostaju aktivne i vizuelno iste. */
.pf-about-section .pf-about-faq-shell,
.pf-about-section .pf-about-faq-shell:hover,
.pf-about-section .pf-about-faq-shell:focus-within{
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    filter: none !important;
    animation: none !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.pf-about-section .pf-about-faq-shell::before,
.pf-about-section .pf-about-faq-shell::after,
.pf-about-section .pf-about-faq-shell:hover::before,
.pf-about-section .pf-about-faq-shell:hover::after,
.pf-about-section .pf-about-faq-shell:focus-within::before,
.pf-about-section .pf-about-faq-shell:focus-within::after{
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* PATCH 20260616: premium readable typography hierarchy
   Cilj: tekst dobija isti premium osećaj kao naslovi, ali bez gubitka čitljivosti.
   Glavni naslovi ostaju najjači; podnaslovi i pasusi su svetliji, krupniji i jasniji. */
:root{
    --rivontiq-readable-title: #F7FBFF;
    --rivontiq-readable-text: rgba(234, 251, 255, 0.95);
    --rivontiq-readable-text-soft: rgba(216, 233, 255, 0.92);
    --rivontiq-readable-cyan: #A9ECFF;
    --rivontiq-readable-glow: rgba(84, 196, 255, 0.18);
}

/* Glavni naslovi: zadržavaju najjači Orbitron/gradient stil. */
.pf-about-section .pf-about-contact-title,
.pf-about-section .pf-about-contact-back-title{
    font-family: "Orbitron", sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.046em !important;
    background: linear-gradient(135deg,
        #F7FBFF 0%,
        #E5F6FF 24%,
        #A9ECFF 54%,
        #6FD4FF 78%,
        #F7FBFF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow:
        0 0 30px rgba(111, 212, 255, 0.24),
        0 10px 28px rgba(0, 5, 18, 0.34) !important;
}

/* Podnaslovi: sličan premium osećaj, ali čitljiviji od glavnog naslova. */
.pf-about-section .pf-about-contact-subtitle,
.pf-about-section .pf-about-contact-back-text,
.pf-about-section .pf-about-portal-text{
    font-family: "Rajdhani", sans-serif !important;
    font-size: clamp(1.13rem, 1.02rem + 0.36vw, 1.30rem) !important;
    line-height: 1.66 !important;
    font-weight: 700 !important;
    letter-spacing: 0.018em !important;
    color: var(--rivontiq-readable-text) !important;
    text-shadow:
        0 0 18px rgba(84, 196, 255, 0.14),
        0 1px 0 rgba(0, 0, 0, 0.34) !important;
}

/* Mini-naslovi u karticama i FAQ pitanjima: naslovni stil, ali manji i uredniji. */
.pf-about-section .pf-about-feature-title,
.pf-about-section .pf-about-stat-title,
.pf-about-section .pf-about-skill-card h3,
.pf-about-section .pf-about-skill-card h4,
.pf-about-section .pf-about-contact-list-card h4,
.pf-about-section .pf-about-contact-list-card h5,
.pf-about-section .pf-about-portal-title,
.pf-about-section .pf-about-portal-subtitle,
.pf-about-section .pf-about-faq-question,
.pf-about-section .pf-about-testimonial-author strong,
.pf-about-section .pf-about-form-field span{
    font-family: "Orbitron", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.072em !important;
    text-transform: uppercase !important;
    color: var(--rivontiq-readable-title) !important;
    text-shadow:
        0 0 16px rgba(122, 229, 255, 0.16),
        0 1px 0 rgba(0, 0, 0, 0.34) !important;
}

.pf-about-section .pf-about-feature-title,
.pf-about-section .pf-about-stat-title,
.pf-about-section .pf-about-skill-card h3,
.pf-about-section .pf-about-skill-card h4,
.pf-about-section .pf-about-contact-list-card h4,
.pf-about-section .pf-about-contact-list-card h5,
.pf-about-section .pf-about-portal-title,
.pf-about-section .pf-about-portal-subtitle{
    line-height: 1.28 !important;
}

.pf-about-section .pf-about-faq-question{
    font-size: clamp(0.92rem, 0.84rem + 0.22vw, 1.02rem) !important;
    line-height: 1.34 !important;
}

/* Brojevi/statistika ostaju jak vizuelni akcenat, ali u istoj plavoj paleti. */
.pf-about-section .pf-about-stat-value{
    font-family: "Orbitron", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.038em !important;
    color: #F7FBFF !important;
    text-shadow:
        0 0 22px rgba(122, 229, 255, 0.24),
        0 10px 24px rgba(0, 5, 18, 0.32) !important;
}

/* Običan tekst: svetliji, krupniji i pregledniji za čitanje na desktopu i telefonu. */
.pf-about-section .pf-about-feature-text,
.pf-about-section .pf-about-stat-text,
.pf-about-section .pf-about-skill-card p,
.pf-about-section .pf-about-contact-list-card p,
.pf-about-section .pf-about-faq-answer > p,
.pf-about-section .pf-about-testimonial-text,
.pf-about-section .pf-about-testimonial-author span,
.pf-about-section .pf-about-form-field input,
.pf-about-section .pf-about-form-field textarea{
    font-family: "Rajdhani", sans-serif !important;
    font-size: clamp(1.03rem, 0.98rem + 0.18vw, 1.13rem) !important;
    line-height: 1.62 !important;
    font-weight: 600 !important;
    letter-spacing: 0.012em !important;
    color: var(--rivontiq-readable-text-soft) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.32) !important;
}

/* Dugmad i unutrašnji tabovi ostaju u istom premium tekstualnom sistemu. */
.pf-about-section .pf-about-roller-button-face,
.pf-about-section .pf-about-contact-back-button,
.pf-about-section .pf-about-roller-pill-face,
.pf-about-section .pf-about-portal-chip,
.pf-about-section .pf-about-contact-scroll-hint > span:last-child{
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.045em !important;
    text-shadow:
        0 0 13px rgba(84, 196, 255, 0.18),
        0 1px 0 rgba(0, 0, 0, 0.32) !important;
}

@media (max-width: 720px){
    .pf-about-section .pf-about-contact-title,
    .pf-about-section .pf-about-contact-back-title{
        letter-spacing: 0.034em !important;
    }

    .pf-about-section .pf-about-feature-title,
    .pf-about-section .pf-about-stat-title,
    .pf-about-section .pf-about-skill-card h3,
    .pf-about-section .pf-about-skill-card h4,
    .pf-about-section .pf-about-contact-list-card h4,
    .pf-about-section .pf-about-contact-list-card h5,
    .pf-about-section .pf-about-portal-title,
    .pf-about-section .pf-about-portal-subtitle,
    .pf-about-section .pf-about-faq-question,
    .pf-about-section .pf-about-form-field span{
        letter-spacing: 0.045em !important;
    }

    .pf-about-section .pf-about-contact-subtitle,
    .pf-about-section .pf-about-contact-back-text,
    .pf-about-section .pf-about-portal-text,
    .pf-about-section .pf-about-feature-text,
    .pf-about-section .pf-about-stat-text,
    .pf-about-section .pf-about-skill-card p,
    .pf-about-section .pf-about-contact-list-card p,
    .pf-about-section .pf-about-faq-answer > p,
    .pf-about-section .pf-about-testimonial-text{
        line-height: 1.58 !important;
    }
}

/* PATCH 20260616: center section titles and subtitles
   Centriraju se samo glavni naslovi sekcija i podnaslovi/uvodni tekstovi.
   Tekst u karticama, FAQ odgovori i duzi pasusi ostaju levo poravnati radi citljivosti. */
.pf-about-section .pf-about-hero-copy,
.pf-about-section .pf-about-section-copy{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pf-about-section .pf-about-contact-title,
.pf-about-section .pf-about-contact-back-title,
.pf-about-section .pf-about-section-copy .pf-about-portal-subtitle{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pf-about-section .pf-about-contact-subtitle,
.pf-about-section .pf-about-contact-back-text,
.pf-about-section .pf-about-section-copy .pf-about-portal-subtitle{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 820px !important;
}

.pf-about-section .pf-about-section-copy .pf-about-portal-subtitle{
    display: block !important;
    max-width: 760px !important;
}

@media (max-width: 720px){
    .pf-about-section .pf-about-contact-subtitle,
    .pf-about-section .pf-about-contact-back-text,
    .pf-about-section .pf-about-section-copy .pf-about-portal-subtitle{
        max-width: 100% !important;
    }
}

/* PATCH 20260616: clean portal headers
   Uklanjaju se mali portal bedzevi iznad naslova, dok unutrasnji brojevi/kartice ostaju.
   Portal naslovi i uvodni tekstovi se centriraju za mirniji, profesionalniji izgled. */
.pf-about-section .pf-about-portal-header{
    width: 100% !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    align-items: center !important;
}

.pf-about-section .pf-about-portal-header .pf-about-portal-title,
.pf-about-section .pf-about-portal-header .pf-about-portal-subtitle,
.pf-about-section .pf-about-portal-header .pf-about-portal-text{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pf-about-section .pf-about-portal-header .pf-about-portal-text{
    max-width: 760px !important;
}

.pf-about-section .pf-about-portal-header .pf-about-portal-chip{
    display: none !important;
}

.pf-about-section .pf-about-portal-header--direct-access-clearance{
    padding-top: 0 !important;
    gap: 12px !important;
}

@media (max-width: 720px){
    .pf-about-section .pf-about-portal-header,
    .pf-about-section .pf-about-portal-header .pf-about-portal-text{
        max-width: 100% !important;
    }
}

/* PATCH 20260616: temporary demo proposal card page
   Odvojena probna strana za testiranje naslova, podnaslova i koraka u jednoj velikoj kartici.
   Ne menja postojece sekcije, kartice, footer, header ili druge strane. */
.pf-demo-probe-section{
    min-height: calc(100svh - 92px);
    display: flex;
    align-items: center;
    padding: clamp(118px, 11vw, 156px) clamp(18px, 4vw, 56px) clamp(64px, 8vw, 104px) !important;
}

.pf-demo-probe-shell{
    width: min(1120px, 100%);
    margin: 0 auto;
    perspective: 1400px;
}

.pf-demo-probe-shell--single{
    display: grid;
    place-items: center;
}

.pf-about-section .pf-demo-probe-card{
    width: 100%;
    display: grid;
    gap: clamp(24px, 3vw, 38px);
    padding: clamp(28px, 4vw, 54px) !important;
    border: 1px solid rgba(122, 229, 255, 0.92) !important;
    border-radius: clamp(24px, 3vw, 34px) !important;
    transform-style: preserve-3d;
}

.pf-demo-probe-orb{
    position: absolute !important;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 0 !important;
    opacity: 0.54;
    filter: blur(20px);
    background: radial-gradient(circle, rgba(122, 229, 255, 0.28), rgba(45, 140, 255, 0.08) 48%, transparent 70%);
}

.pf-demo-probe-orb--left{
    left: -96px;
    top: -98px;
}

.pf-demo-probe-orb--right{
    right: -110px;
    bottom: -118px;
}

.pf-demo-probe-copy{
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.pf-demo-probe-eyebrow{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 8px 16px;
    border: 1px solid rgba(122, 229, 255, 0.64);
    border-radius: 999px;
    color: #eafbff;
    background:
        radial-gradient(circle at 20% 0%, rgba(122, 229, 255, 0.22), transparent 44%),
        linear-gradient(135deg, rgba(45, 140, 255, 0.20), rgba(2, 16, 48, 0.86));
    box-shadow: 0 0 20px rgba(84, 196, 255, 0.18), inset 0 1px 0 rgba(122, 229, 255, 0.18);
    font-family: "Orbitron", sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.pf-about-section .pf-demo-probe-title{
    margin: 0 auto !important;
    max-width: 880px !important;
    text-align: center !important;
}

.pf-about-section .pf-demo-probe-subtitle{
    margin: 16px auto 0 !important;
    max-width: 780px !important;
    text-align: center !important;
}

.pf-demo-probe-step-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 20px);
}

.pf-demo-probe-step{
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    min-height: 168px;
    padding: clamp(18px, 2vw, 24px);
    border: 1px solid rgba(122, 229, 255, 0.52);
    border-radius: 22px;
    background:
        radial-gradient(circle at 16% 0%, rgba(122, 229, 255, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(10, 50, 118, 0.56), rgba(2, 13, 38, 0.76));
    box-shadow:
        0 0 0 1px rgba(84, 196, 255, 0.10),
        inset 0 1px 0 rgba(122, 229, 255, 0.16),
        0 16px 34px rgba(1, 9, 26, 0.30);
}

.pf-demo-probe-step::before{
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 17px;
    border: 1px solid rgba(122, 229, 255, 0.17);
    pointer-events: none;
}

.pf-demo-probe-step-number{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    border: 1px solid rgba(122, 229, 255, 0.76);
    color: #eafbff;
    background:
        radial-gradient(circle at 30% 18%, rgba(122, 229, 255, 0.36), transparent 48%),
        linear-gradient(135deg, rgba(41, 151, 255, 0.46), rgba(4, 42, 112, 0.90));
    box-shadow: 0 0 20px rgba(84, 196, 255, 0.22), inset 0 1px 0 rgba(122, 229, 255, 0.28);
    font-family: "Orbitron", sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.pf-demo-probe-step-copy{
    min-width: 0;
}

.pf-demo-probe-step-title{
    margin: 0 0 9px;
    color: #f5fbff;
    font-family: "Orbitron", sans-serif;
    font-size: clamp(0.92rem, 0.86rem + 0.26vw, 1.08rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(122, 229, 255, 0.16), 0 1px 0 rgba(0, 0, 0, 0.34);
}

.pf-demo-probe-step-text{
    margin: 0;
    color: rgba(232, 246, 255, 0.94);
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(1rem, 0.96rem + 0.16vw, 1.10rem);
    font-weight: 600;
    line-height: 1.58;
    letter-spacing: 0.012em;
    text-align: left;
}

@media (max-width: 860px){
    .pf-demo-probe-section{
        align-items: flex-start;
        padding-top: 110px !important;
    }

    .pf-demo-probe-step-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px){
    .pf-about-section .pf-demo-probe-card{
        padding: 24px 16px !important;
        border-radius: 24px !important;
    }

    .pf-demo-probe-step{
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .pf-demo-probe-step-number{
        width: 52px;
        height: 52px;
    }
}



/* PATCH 20260616: probna strana — 01/04 kartice koriste isti plavi hover/3D efekat kao unutrašnje kartice.
   Izolovano je na /probna-kartica i ne menja postojeće sekcije. */
.pf-demo-probe-section .pf-demo-probe-step[data-pf-about-inner-card]{
    align-items: flex-start;
    border-radius: 22px !important;
    transform-origin: center center;
}

.pf-demo-probe-section .pf-demo-probe-step[data-pf-about-inner-card]::before{
    inset: 6px !important;
    border-radius: 17px !important;
}

.pf-demo-probe-section .pf-demo-probe-step[data-pf-about-inner-card]::after{
    left: 12px !important;
    right: 12px !important;
}

.pf-demo-probe-section .pf-demo-probe-step-number,
.pf-demo-probe-section .pf-demo-probe-step-copy{
    position: relative;
    z-index: 3;
}

.pf-demo-probe-section .pf-demo-probe-step[data-pf-about-inner-card]:hover .pf-demo-probe-step-number,
.pf-demo-probe-section .pf-demo-probe-step[data-pf-about-inner-card].is-tilting .pf-demo-probe-step-number{
    box-shadow:
        0 0 26px rgba(84, 196, 255, 0.34),
        inset 0 1px 0 rgba(122, 229, 255, 0.34);
}

/* PATCH 20260616: probna kartica — drugi demo blok sada je ceo u jednom spoljašnjem okviru.
   Okvir obuhvata naslov, opis i 01/04 kartice zajedno, kao portal kartica sa početne strane.
   Izolovano samo na /probna-kartica; postojeće prave strane se ne menjaju. */
.pf-demo-probe-section .pf-demo-probe-direct{
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    gap: clamp(18px, 2.6vw, 28px);
    padding: clamp(24px, 3.6vw, 42px) !important;
    border: 1px solid rgba(122, 229, 255, 0.92) !important;
    border-radius: clamp(24px, 3vw, 34px) !important;
    overflow: hidden !important;
    isolation: isolate;
    transform-origin: center center;
    background:
        radial-gradient(circle at 16% 0%, rgba(122, 229, 255, 0.24), transparent 36%),
        radial-gradient(circle at 84% 4%, rgba(45, 140, 255, 0.22), transparent 34%),
        linear-gradient(180deg,
            rgba(35, 154, 255, 0.32) 0%,
            rgba(11, 70, 170, 0.50) 42%,
            rgba(2, 15, 44, 0.96) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.20),
        0 22px 48px rgba(1, 11, 31, 0.52),
        inset 0 1px 0 rgba(122, 229, 255, 0.30),
        inset 0 0 0 1px rgba(84, 196, 255, 0.12),
        inset 0 -1px 0 rgba(45, 140, 255, 0.24) !important;
}

.pf-demo-probe-section .pf-demo-probe-direct::before{
    content: "" !important;
    position: absolute;
    inset: 7px !important;
    border-radius: clamp(18px, 2.5vw, 27px) !important;
    border: 1px solid rgba(122, 229, 255, 0.34) !important;
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.16), rgba(84, 196, 255, 0.05) 28%, transparent 68%),
        radial-gradient(circle at var(--pf-about-inner-pointer-x, 50%) var(--pf-about-inner-pointer-y, 18%), rgba(122, 229, 255, 0.16), transparent 46%) !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.14),
        inset 0 0 22px rgba(84, 196, 255, 0.08),
        0 0 20px rgba(84, 196, 255, 0.08) !important;
    pointer-events: none;
    z-index: 1;
}

.pf-demo-probe-section .pf-demo-probe-direct::after{
    content: "" !important;
    position: absolute;
    left: 16px !important;
    right: 16px !important;
    top: -2px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
        rgba(84, 196, 255, 0),
        rgba(122, 229, 255, 0.66) 34%,
        rgba(84, 196, 255, 0.54) 56%,
        rgba(45, 140, 255, 0.36) 72%,
        rgba(84, 196, 255, 0)) !important;
    filter: blur(4px) !important;
    opacity: 0.92 !important;
    pointer-events: none;
    z-index: 2 !important;
}

.pf-demo-probe-section .pf-demo-probe-direct > *{
    position: relative;
    z-index: 3;
}

.pf-demo-probe-direct-header{
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.pf-about-section .pf-demo-probe-direct-title{
    margin: 0 auto !important;
    max-width: 880px !important;
    text-align: center !important;
}

.pf-about-section .pf-demo-probe-direct-title.pf-about-contact-back-title{
    font-size: clamp(1.48rem, 1.32rem + 0.72vw, 2.22rem) !important;
    line-height: 1.14 !important;
    letter-spacing: 0.04em !important;
}

.pf-about-section .pf-demo-probe-direct-text{
    margin: 14px auto 0 !important;
    max-width: 760px !important;
    text-align: center !important;
}

.pf-demo-probe-direct-list{
    width: min(900px, 100%);
    margin: 0 auto;
    display: grid;
    gap: clamp(14px, 2vw, 18px);
}

.pf-about-section .pf-demo-probe-direct-card{
    align-items: flex-start;
    min-height: 0;
    border-radius: 22px !important;
    transform-origin: center center;
}

.pf-about-section .pf-demo-probe-direct-card::before{
    inset: 7px !important;
    border-radius: 17px !important;
}

.pf-about-section .pf-demo-probe-direct-card::after{
    left: 14px !important;
    right: 14px !important;
}

.pf-about-section .pf-demo-probe-direct-card > span,
.pf-about-section .pf-demo-probe-direct-card > div{
    position: relative;
    z-index: 3;
}

.pf-demo-probe-section .pf-demo-probe-direct:hover .pf-demo-probe-direct-title,
.pf-demo-probe-section .pf-demo-probe-direct.is-tilting .pf-demo-probe-direct-title{
    text-shadow:
        0 0 26px rgba(122, 229, 255, 0.26),
        0 10px 28px rgba(0, 5, 18, 0.38);
}

@media (max-width: 680px){
    .pf-demo-probe-direct{
        margin-top: 0;
        padding: 22px 16px !important;
        border-radius: 24px !important;
    }

    .pf-demo-probe-direct-list{
        gap: 14px;
    }
}


/* PATCH 20260616: probna kartica — uklonjen je prvi probni uvod.
   Donji demo blok sada je jedini blok na strani, a naslov koristi isti h1 stil kao raniji gornji naslov. */

/* PATCH 20260616: probna kartica — providna pozadina velikog demo bloka.
   Skida se plavi fill iza naslova/opisa u spoljašnjem okviru; okvir, glow i 01/04 kartice ostaju.
   Izolovano samo na /probna-kartica. */
.pf-demo-probe-section .pf-demo-probe-direct{
    background: transparent !important;
}

.pf-demo-probe-section .pf-demo-probe-direct::before{
    background: transparent !important;
}

/* PATCH 20260616: Probna kartica — kompletan sadržaj početne strane u istim demo okvirima.
   Menja samo /probna-kartica. Početna strana i prave sekcije ostaju netaknute. */
.pf-demo-home-clone-section{
    min-height: auto;
    align-items: flex-start;
    padding-top: clamp(118px, 11vw, 154px) !important;
    padding-bottom: clamp(72px, 9vw, 126px) !important;
}

.pf-demo-home-clone-shell{
    width: min(1180px, 100%);
    display: grid;
    gap: clamp(28px, 4.2vw, 54px);
    place-items: stretch;
}

.pf-demo-home-clone-section .pf-demo-home-block{
    width: min(1080px, 100%);
    justify-self: center;
}

.pf-demo-home-clone-section .pf-demo-home-block--hero{
    width: min(1120px, 100%);
}

.pf-demo-home-block-header{
    display: grid;
    gap: 0;
}

.pf-demo-home-card-grid{
    width: min(940px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 20px);
}

.pf-demo-home-card-grid--three{
    width: min(980px, 100%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pf-demo-home-card-grid--four{
    width: min(980px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pf-about-section .pf-demo-home-card{
    min-height: 0;
    align-items: flex-start;
    padding: clamp(17px, 2vw, 23px) !important;
}

.pf-demo-home-actions{
    width: min(760px, 100%);
    margin: 0 auto;
    justify-content: center !important;
    gap: clamp(12px, 2vw, 18px) !important;
}

.pf-demo-home-faq-list{
    width: min(900px, 100%);
    margin: 0 auto;
    display: grid;
    gap: clamp(12px, 1.8vw, 16px);
}

.pf-demo-home-faq-item{
    border-radius: 22px !important;
}

.pf-demo-home-subtitle{
    margin: 12px auto 0 !important;
    max-width: 780px;
    text-align: center;
}

.pf-demo-home-demo-heading{
    width: min(820px, 100%);
    margin: 0 auto;
    text-align: center;
}

.pf-demo-home-demo-heading .pf-about-portal-title{
    margin: 0 auto 12px !important;
}

.pf-demo-home-demo-heading .pf-about-portal-text{
    margin: 0 auto !important;
    max-width: 760px;
    text-align: center;
}

@media (max-width: 980px){
    .pf-demo-home-card-grid,
    .pf-demo-home-card-grid--three,
    .pf-demo-home-card-grid--four{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px){
    .pf-demo-home-clone-shell{
        gap: 24px;
    }

    .pf-demo-home-actions{
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr;
    }
}

/* PATCH 20260616: Probna kartica — footer kao poslednji blok ispod zadnje kartice.
   Footer je prebačen u isti probni grid shell i ovde se forsira da zauzme ceo red,
   da ne može da ode u desnu/bočnu kolonu. Izolovano samo na /probna-kartica. */
.pf-demo-home-clone-section .pf-demo-probe-footer{
    width: min(1080px, 100%);
    max-width: 100%;
    justify-self: center;
    align-self: stretch;
    grid-column: 1 / -1;
    display: block !important;
    clear: both;
    margin: clamp(6px, 1.8vw, 18px) auto 0 !important;
    padding: 0 !important;
}

.pf-demo-home-clone-section .pf-demo-probe-footer .pf-footer-shell,
.pf-demo-home-clone-section .pf-demo-probe-footer .pf-footer-shell--embedded{
    width: 100%;
    max-width: 100%;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pf-demo-home-clone-section .pf-demo-probe-footer .pf-footer-panel,
.pf-demo-home-clone-section .pf-demo-probe-footer .pf-footer-panel--embedded{
    width: 100%;
    max-width: 100%;
    margin: 0 auto !important;
}

/* PATCH 20260617: početna strana — spoljašnji okviri preuzimaju izgled probne kartice.
   Menja se samo veliki okvir na početnoj strani (#top); tekst, dugmad i unutrašnje kartice ostaju isti.
   Stil je usklađen sa .pf-demo-probe-direct okvirom sa /probna-kartica. */
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning{
    --pf-about-inner-rx: var(--pf-about-js-inner-rx, 0deg) !important;
    --pf-about-inner-ry: var(--pf-about-js-inner-ry, 0deg) !important;
    --pf-about-inner-tz: var(--pf-about-js-inner-tz, 0px) !important;
    --pf-about-inner-shift-y: var(--pf-about-js-inner-shift-y, 0px) !important;
    --pf-about-inner-pointer-x: var(--pf-about-js-inner-pointer-x, 50%) !important;
    --pf-about-inner-pointer-y: var(--pf-about-js-inner-pointer-y, 18%) !important;
    --pf-about-inner-shine-x: var(--pf-about-js-inner-shine-x, 0px) !important;
    --pf-about-inner-glow: var(--pf-about-js-inner-glow, 0) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: clamp(24px, 3.6vw, 42px) !important;
    border: 1px solid rgba(122, 229, 255, 0.92) !important;
    border-radius: clamp(24px, 3vw, 34px) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: transparent !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.20),
        0 22px 48px rgba(1, 11, 31, 0.52),
        inset 0 1px 0 rgba(122, 229, 255, 0.30),
        inset 0 0 0 1px rgba(84, 196, 255, 0.12),
        inset 0 -1px 0 rgba(45, 140, 255, 0.24) !important;
    transform:
        perspective(1850px)
        translate3d(0, var(--pf-about-inner-shift-y), var(--pf-about-inner-tz))
        rotateX(var(--pf-about-inner-rx))
        rotateY(var(--pf-about-inner-ry))
        scale(calc(1 + (0.012 * var(--pf-about-inner-glow)))) !important;
    transform-origin: center center !important;
    transform-style: preserve-3d !important;
    transition:
        box-shadow 180ms ease,
        border-color 180ms ease,
        filter 180ms ease,
        background 180ms ease !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: auto !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting{
    z-index: 8 !important;
    will-change: transform !important;
    border-color: rgba(166, 244, 255, 1) !important;
    filter: saturate(1.08) brightness(1.035) !important;
    box-shadow:
        0 0 0 1px rgba(166, 244, 255, 0.36),
        0 0 calc(30px + (18px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.40),
        0 0 calc(54px + (20px * var(--pf-about-inner-glow))) rgba(45, 140, 255, 0.26),
        0 28px 58px rgba(1, 11, 31, 0.56),
        inset 0 1px 0 rgba(166, 244, 255, 0.42),
        inset 0 -1px 0 rgba(84, 196, 255, 0.28) !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning::before{
    content: "" !important;
    position: absolute !important;
    inset: 7px !important;
    border-radius: clamp(18px, 2.5vw, 27px) !important;
    border: 1px solid rgba(122, 229, 255, 0.34) !important;
    background: transparent !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.14),
        inset 0 0 22px rgba(84, 196, 255, 0.08),
        0 0 20px rgba(84, 196, 255, 0.08) !important;
    pointer-events: none !important;
    opacity: calc(0.90 + (0.10 * var(--pf-about-inner-glow))) !important;
    transform: translate3d(0, 0, 18px) !important;
    z-index: 1 !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel::after,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover::after,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting::after,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning::after{
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    top: -2px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
        rgba(84, 196, 255, 0),
        rgba(122, 229, 255, 0.66) 34%,
        rgba(84, 196, 255, 0.54) 56%,
        rgba(45, 140, 255, 0.36) 72%,
        rgba(84, 196, 255, 0)) !important;
    filter: blur(calc(4px + (1.4px * var(--pf-about-inner-glow)))) drop-shadow(0 0 16px rgba(84, 196, 255, 0.22)) !important;
    opacity: calc(0.88 + (0.10 * var(--pf-about-inner-glow))) !important;
    transform: translate3d(var(--pf-about-inner-shine-x), 0, 24px) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel > *{
    position: relative !important;
    z-index: 3 !important;
}

.pf-about-section#top .pf-about-contact-panel > .pf-about-shell-topline,
.pf-about-section#top .pf-about-contact-panel > .pf-about-shell-glow{
    display: none !important;
}

.pf-about-section#top .pf-about-contact-panel:hover .pf-about-contact-title,
.pf-about-section#top .pf-about-contact-panel.is-tilting .pf-about-contact-title,
.pf-about-section#top .pf-about-contact-panel:hover .pf-about-contact-back-title,
.pf-about-section#top .pf-about-contact-panel.is-tilting .pf-about-contact-back-title{
    text-shadow:
        0 0 26px rgba(122, 229, 255, 0.26),
        0 10px 28px rgba(0, 5, 18, 0.38) !important;
}

@media (max-width: 680px){
    .pf-about-section#top .pf-about-contact-face .pf-about-contact-panel,
    .pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover,
    .pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting,
    .pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning{
        padding: 22px 16px !important;
        border-radius: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse){
    .pf-about-section#top .pf-about-contact-face .pf-about-contact-panel,
    .pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover,
    .pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting,
    .pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning{
        --pf-about-inner-rx: 0deg !important;
        --pf-about-inner-ry: 0deg !important;
        --pf-about-inner-tz: 0px !important;
        --pf-about-inner-shift-y: 0px !important;
        --pf-about-inner-glow: 0 !important;
        transform: none !important;
        will-change: auto !important;
    }
}

/* PATCH 20260617: početna strana — glatko naginjanje velikih okvira kao na probnoj strani.
   Problem je bio u težim dinamičkim pseudo-slojevima na .pf-about-contact-panel okvirima.
   Sada se pri pomeranju miša animira uglavnom transform, dok su sjaj/unutrašnji okvir statični kao na .pf-demo-probe-direct. */
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning{
    transform:
        perspective(1850px)
        translate3d(0, var(--pf-about-inner-shift-y), var(--pf-about-inner-tz))
        rotateX(var(--pf-about-inner-rx))
        rotateY(var(--pf-about-inner-ry))
        scale(calc(1 + (0.010 * var(--pf-about-inner-glow)))) !important;
    transition:
        box-shadow 160ms ease,
        border-color 160ms ease,
        filter 160ms ease !important;
    contain: paint;
    will-change: auto !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting{
    will-change: transform !important;
    box-shadow:
        0 0 0 1px rgba(166, 244, 255, 0.32),
        0 0 34px rgba(84, 196, 255, 0.38),
        0 0 58px rgba(45, 140, 255, 0.24),
        0 26px 56px rgba(1, 11, 31, 0.54),
        inset 0 1px 0 rgba(166, 244, 255, 0.40),
        inset 0 -1px 0 rgba(84, 196, 255, 0.26) !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning::before{
    background: transparent !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel::after,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover::after,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting::after,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning::after{
    filter: blur(4px) !important;
    opacity: 0.92 !important;
    transform: none !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel > *,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover > *,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting > *{
    transform: none !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel .pf-about-feature-card,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel .pf-about-stat-card,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel .pf-about-contact-list-card,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel .pf-about-portal-shell,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel .pf-about-faq-item{
    contain: paint;
}

/* PATCH 20260617: početna strana — isti glatki tilt kao probna kartica.
   Uklonjen je zastoj na prelazu preko unutrašnjih kartica: spoljašnji okvir sada radi istu
   neprekidnu RAF transformaciju kao .pf-demo-probe-direct na /probna-kartica. */
.pf-about-section#top .pf-about-contact-panel,
.pf-about-section#top .pf-about-contact-panel:hover,
.pf-about-section#top .pf-about-contact-panel.is-tilting,
.pf-about-section#top .pf-about-contact-panel.is-inner-returning{
    --pf-about-inner-rx: var(--pf-about-js-inner-rx, 0deg) !important;
    --pf-about-inner-ry: var(--pf-about-js-inner-ry, 0deg) !important;
    --pf-about-inner-tz: var(--pf-about-js-inner-tz, 0px) !important;
    --pf-about-inner-shift-y: var(--pf-about-js-inner-shift-y, 0px) !important;
    --pf-about-inner-pointer-x: var(--pf-about-js-inner-pointer-x, 50%) !important;
    --pf-about-inner-pointer-y: var(--pf-about-js-inner-pointer-y, 18%) !important;
    --pf-about-inner-shine-x: var(--pf-about-js-inner-shine-x, 0px) !important;
    --pf-about-inner-glow: var(--pf-about-js-inner-glow, 0) !important;
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    contain: none !important;
    transform-style: preserve-3d !important;
    transform:
        perspective(1850px)
        translate3d(0, var(--pf-about-inner-shift-y), var(--pf-about-inner-tz))
        rotateX(var(--pf-about-inner-rx))
        rotateY(var(--pf-about-inner-ry))
        scale(calc(1 + (0.012 * var(--pf-about-inner-glow)))) !important;
    transform-origin: 50% 50% !important;
    transition:
        box-shadow 180ms ease,
        border-color 180ms ease,
        filter 180ms ease,
        background 180ms ease !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.pf-about-section#top .pf-about-contact-panel.is-tilting{
    z-index: 8 !important;
    will-change: transform !important;
    border-color: rgba(166, 244, 255, 1) !important;
    filter: saturate(1.08) brightness(1.035) !important;
    box-shadow:
        0 0 0 1px rgba(166, 244, 255, 0.36),
        0 0 calc(30px + (18px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.40),
        0 0 calc(54px + (20px * var(--pf-about-inner-glow))) rgba(45, 140, 255, 0.26),
        0 28px 58px rgba(1, 11, 31, 0.56),
        inset 0 1px 0 rgba(166, 244, 255, 0.42),
        inset 0 -1px 0 rgba(84, 196, 255, 0.28) !important;
}

.pf-about-section#top .pf-about-contact-panel::before,
.pf-about-section#top .pf-about-contact-panel:hover::before,
.pf-about-section#top .pf-about-contact-panel.is-tilting::before,
.pf-about-section#top .pf-about-contact-panel.is-inner-returning::before{
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.16), rgba(84, 196, 255, 0.05) 28%, transparent 68%),
        radial-gradient(circle at var(--pf-about-inner-pointer-x) var(--pf-about-inner-pointer-y), rgba(166, 244, 255, calc(0.14 + (0.18 * var(--pf-about-inner-glow)))), rgba(84, 196, 255, calc(0.04 + (0.08 * var(--pf-about-inner-glow)))) 22%, transparent 52%) !important;
    border-color: rgba(166, 244, 255, calc(0.26 + (0.14 * var(--pf-about-inner-glow)))) !important;
    box-shadow:
        inset 0 1px 0 rgba(166, 244, 255, 0.18),
        inset 0 0 calc(22px + (18px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.10),
        0 0 calc(16px + (14px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.10) !important;
    opacity: calc(0.90 + (0.10 * var(--pf-about-inner-glow))) !important;
    transform: translate3d(0, 0, 18px) !important;
    filter: none !important;
}

.pf-about-section#top .pf-about-contact-panel::after,
.pf-about-section#top .pf-about-contact-panel:hover::after,
.pf-about-section#top .pf-about-contact-panel.is-tilting::after,
.pf-about-section#top .pf-about-contact-panel.is-inner-returning::after{
    transform: translate3d(var(--pf-about-inner-shine-x), 0, 24px) !important;
    opacity: calc(0.76 + (0.18 * var(--pf-about-inner-glow))) !important;
    filter: blur(calc(3.4px + (1.6px * var(--pf-about-inner-glow)))) drop-shadow(0 0 16px rgba(84, 196, 255, 0.22)) !important;
}

.pf-about-section#top .pf-about-contact-panel > *,
.pf-about-section#top .pf-about-contact-panel:hover > *,
.pf-about-section#top .pf-about-contact-panel.is-tilting > *,
.pf-about-section#top .pf-about-contact-panel.is-inner-returning > *{
    transform: translate3d(0, 0, calc(8px + (10px * var(--pf-about-inner-glow)))) !important;
    transition: transform 180ms ease, text-shadow 180ms ease !important;
}

.pf-about-section#top .pf-about-contact-panel .pf-about-feature-card,
.pf-about-section#top .pf-about-contact-panel .pf-about-stat-card,
.pf-about-section#top .pf-about-contact-panel .pf-about-contact-list-card,
.pf-about-section#top .pf-about-contact-panel .pf-about-portal-shell,
.pf-about-section#top .pf-about-contact-panel .pf-about-faq-item{
    contain: none !important;
}


/* PATCH 20260617: jači override za početnu — isti selektor kao stari blok, ali sa probna-kartica ponašanjem. */
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning{
    --pf-about-inner-rx: var(--pf-about-js-inner-rx, 0deg) !important;
    --pf-about-inner-ry: var(--pf-about-js-inner-ry, 0deg) !important;
    --pf-about-inner-tz: var(--pf-about-js-inner-tz, 0px) !important;
    --pf-about-inner-shift-y: var(--pf-about-js-inner-shift-y, 0px) !important;
    --pf-about-inner-pointer-x: var(--pf-about-js-inner-pointer-x, 50%) !important;
    --pf-about-inner-pointer-y: var(--pf-about-js-inner-pointer-y, 18%) !important;
    --pf-about-inner-shine-x: var(--pf-about-js-inner-shine-x, 0px) !important;
    --pf-about-inner-glow: var(--pf-about-js-inner-glow, 0) !important;
    contain: none !important;
    transform:
        perspective(1850px)
        translate3d(0, var(--pf-about-inner-shift-y), var(--pf-about-inner-tz))
        rotateX(var(--pf-about-inner-rx))
        rotateY(var(--pf-about-inner-ry))
        scale(calc(1 + (0.012 * var(--pf-about-inner-glow)))) !important;
    transform-origin: 50% 50% !important;
    transform-style: preserve-3d !important;
    transition:
        box-shadow 180ms ease,
        border-color 180ms ease,
        filter 180ms ease,
        background 180ms ease !important;
    will-change: auto !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting{
    will-change: transform !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning::before{
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.16), rgba(84, 196, 255, 0.05) 28%, transparent 68%),
        radial-gradient(circle at var(--pf-about-inner-pointer-x) var(--pf-about-inner-pointer-y), rgba(166, 244, 255, calc(0.14 + (0.18 * var(--pf-about-inner-glow)))), rgba(84, 196, 255, calc(0.04 + (0.08 * var(--pf-about-inner-glow)))) 22%, transparent 52%) !important;
    border-color: rgba(166, 244, 255, calc(0.26 + (0.14 * var(--pf-about-inner-glow)))) !important;
    box-shadow:
        inset 0 1px 0 rgba(166, 244, 255, 0.18),
        inset 0 0 calc(22px + (18px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.10),
        0 0 calc(16px + (14px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.10) !important;
    opacity: calc(0.90 + (0.10 * var(--pf-about-inner-glow))) !important;
    transform: translate3d(0, 0, 18px) !important;
    filter: none !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel::after,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover::after,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting::after,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning::after{
    transform: translate3d(var(--pf-about-inner-shine-x), 0, 24px) !important;
    opacity: calc(0.76 + (0.18 * var(--pf-about-inner-glow))) !important;
    filter: blur(calc(3.4px + (1.6px * var(--pf-about-inner-glow)))) drop-shadow(0 0 16px rgba(84, 196, 255, 0.22)) !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel > *,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover > *,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting > *,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning > *{
    transform: translate3d(0, 0, calc(8px + (10px * var(--pf-about-inner-glow)))) !important;
    transition: transform 180ms ease, text-shadow 180ms ease !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel .pf-about-feature-card,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel .pf-about-stat-card,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel .pf-about-contact-list-card,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel .pf-about-portal-shell,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel .pf-about-faq-item{
    contain: none !important;
}


/* PATCH 20260617: Početna 2 — naslovi i podnaslovi dobijaju isti plavi 3D okvir kao kartica "Jasna ponuda". */
.pf-demo-home-clone-section .pf-demo-home-title-card{
    width: min(900px, 100%);
    max-width: 900px !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 0 !important;
    align-items: start !important;
    justify-items: center !important;
    padding: clamp(22px, 3vw, 30px) clamp(18px, 3vw, 34px) !important;
    border-radius: 28px !important;
    text-align: center !important;
    box-sizing: border-box;
}

.pf-demo-home-clone-section .pf-demo-home-title-card--hero{
    width: min(960px, 100%);
    max-width: 960px !important;
    padding-top: clamp(24px, 3.4vw, 34px) !important;
    padding-bottom: clamp(24px, 3.4vw, 34px) !important;
}

.pf-demo-home-clone-section .pf-demo-home-title-card--inner{
    width: min(840px, 100%);
    max-width: 840px !important;
    margin-bottom: clamp(18px, 2.4vw, 28px) !important;
}

.pf-demo-home-clone-section .pf-demo-home-title-card .pf-demo-probe-direct-title,
.pf-demo-home-clone-section .pf-demo-home-title-card .pf-demo-probe-title,
.pf-demo-home-clone-section .pf-demo-home-title-card .pf-about-portal-title{
    max-width: 820px !important;
}

.pf-demo-home-clone-section .pf-demo-home-title-card .pf-demo-probe-direct-text,
.pf-demo-home-clone-section .pf-demo-home-title-card .pf-demo-probe-subtitle,
.pf-demo-home-clone-section .pf-demo-home-title-card .pf-about-portal-text{
    max-width: 760px !important;
}

.pf-demo-home-clone-section .pf-demo-home-title-card .pf-demo-home-subtitle{
    max-width: 760px !important;
}

@media (max-width: 680px){
    .pf-demo-home-clone-section .pf-demo-home-title-card,
    .pf-demo-home-clone-section .pf-demo-home-title-card--hero,
    .pf-demo-home-clone-section .pf-demo-home-title-card--inner{
        width: 100%;
        max-width: 100% !important;
        padding: 20px 16px !important;
        border-radius: 24px !important;
    }
}

/* =====================================================================
 * PATCH 20260617: Početna 2 — svi naslovni blokovi koriste isti
 * 3D hover/tilt efekat kao unutrašnja kartica "Jasna ponuda".
 * Menja se samo efekat naslovnih kartica; tekst i raspored ostaju isti.
 * ===================================================================== */

.pf-demo-home-clone-section .pf-demo-home-title-card,
.pf-demo-home-clone-section .pf-demo-home-title-card:hover,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-inner-returning{
    --pf-about-inner-rx: var(--pf-about-js-inner-rx, 0deg) !important;
    --pf-about-inner-ry: var(--pf-about-js-inner-ry, 0deg) !important;
    --pf-about-inner-tz: var(--pf-about-js-inner-tz, 0px) !important;
    --pf-about-inner-shift-y: var(--pf-about-js-inner-shift-y, 0px) !important;
    --pf-about-inner-pointer-x: var(--pf-about-js-inner-pointer-x, 50%) !important;
    --pf-about-inner-pointer-y: var(--pf-about-js-inner-pointer-y, 18%) !important;
    --pf-about-inner-shine-x: var(--pf-about-js-inner-shine-x, 0px) !important;
    --pf-about-inner-glow: var(--pf-about-js-inner-glow, 0) !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transform-style: preserve-3d !important;
    transform:
        perspective(1850px)
        translate3d(0, var(--pf-about-inner-shift-y), var(--pf-about-inner-tz))
        rotateX(var(--pf-about-inner-rx))
        rotateY(var(--pf-about-inner-ry))
        scale(calc(1 + (0.012 * var(--pf-about-inner-glow)))) !important;
    transform-origin: 50% 50% !important;
    transition:
        box-shadow 180ms ease,
        border-color 180ms ease,
        filter 180ms ease,
        background 180ms ease !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(122, 229, 255, 0.24), transparent 34%),
        radial-gradient(circle at 86% 0%, rgba(45, 140, 255, 0.22), transparent 32%),
        linear-gradient(180deg,
            var(--rivontiq-card-fill-a) 0%,
            var(--rivontiq-card-fill-b) 42%,
            var(--rivontiq-card-fill-c) 100%) !important;
    border: 1px solid var(--rivontiq-card-line) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.20),
        0 22px 48px rgba(1, 11, 31, 0.52),
        inset 0 1px 0 rgba(122, 229, 255, 0.30),
        inset 0 0 0 1px rgba(84, 196, 255, 0.12),
        inset 0 -1px 0 rgba(45, 140, 255, 0.24) !important;
}

.pf-demo-home-clone-section .pf-demo-home-title-card:hover,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting{
    z-index: 12 !important;
    will-change: transform !important;
    border-color: rgba(166, 244, 255, 1) !important;
    filter: saturate(1.08) brightness(1.035) !important;
    box-shadow:
        0 0 0 1px rgba(166, 244, 255, 0.36),
        0 0 calc(30px + (18px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.40),
        0 0 calc(54px + (20px * var(--pf-about-inner-glow))) rgba(45, 140, 255, 0.26),
        0 28px 58px rgba(1, 11, 31, 0.56),
        inset 0 1px 0 rgba(166, 244, 255, 0.42),
        inset 0 -1px 0 rgba(84, 196, 255, 0.28) !important;
}

.pf-demo-home-clone-section .pf-demo-home-title-card::before,
.pf-demo-home-clone-section .pf-demo-home-title-card:hover::before,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting::before,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-inner-returning::before{
    content: "" !important;
    position: absolute !important;
    inset: 7px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(122, 229, 255, 0.34) !important;
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.16), rgba(84, 196, 255, 0.05) 28%, transparent 68%),
        radial-gradient(circle at var(--pf-about-inner-pointer-x) var(--pf-about-inner-pointer-y), rgba(166, 244, 255, calc(0.14 + (0.18 * var(--pf-about-inner-glow)))), rgba(84, 196, 255, calc(0.04 + (0.08 * var(--pf-about-inner-glow)))) 22%, transparent 52%) !important;
    box-shadow:
        inset 0 1px 0 rgba(166, 244, 255, 0.18),
        inset 0 0 calc(22px + (18px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.10),
        0 0 calc(16px + (14px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.10) !important;
    opacity: calc(0.90 + (0.10 * var(--pf-about-inner-glow))) !important;
    pointer-events: none !important;
    transform: translate3d(0, 0, 18px) !important;
    z-index: 1 !important;
}

.pf-demo-home-clone-section .pf-demo-home-title-card::after,
.pf-demo-home-clone-section .pf-demo-home-title-card:hover::after,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting::after,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-inner-returning::after{
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: -2px !important;
    bottom: auto !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
        rgba(84, 196, 255, 0),
        rgba(122, 229, 255, 0.66) 34%,
        rgba(84, 196, 255, 0.54) 56%,
        rgba(45, 140, 255, 0.36) 72%,
        rgba(84, 196, 255, 0)) !important;
    opacity: calc(0.76 + (0.18 * var(--pf-about-inner-glow))) !important;
    filter: blur(calc(3.4px + (1.6px * var(--pf-about-inner-glow)))) drop-shadow(0 0 16px rgba(84, 196, 255, 0.22)) !important;
    pointer-events: none !important;
    transform: translate3d(var(--pf-about-inner-shine-x), 0, 24px) !important;
    z-index: 2 !important;
}

.pf-demo-home-clone-section .pf-demo-home-title-card > *,
.pf-demo-home-clone-section .pf-demo-home-title-card:hover > *,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting > *,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-inner-returning > *{
    position: relative !important;
    z-index: 3 !important;
    transform: translate3d(0, 0, calc(8px + (10px * var(--pf-about-inner-glow)))) !important;
    transition: transform 180ms ease, text-shadow 180ms ease !important;
}

.pf-demo-home-clone-section .pf-demo-home-title-card:hover .pf-demo-probe-direct-title,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting .pf-demo-probe-direct-title,
.pf-demo-home-clone-section .pf-demo-home-title-card:hover .pf-demo-probe-title,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting .pf-demo-probe-title,
.pf-demo-home-clone-section .pf-demo-home-title-card:hover .pf-about-portal-title,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting .pf-about-portal-title{
    text-shadow:
        0 0 26px rgba(122, 229, 255, 0.26),
        0 10px 28px rgba(0, 5, 18, 0.38) !important;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse){
    .pf-demo-home-clone-section .pf-demo-home-title-card,
    .pf-demo-home-clone-section .pf-demo-home-title-card:hover,
    .pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting,
    .pf-demo-home-clone-section .pf-demo-home-title-card.is-inner-returning{
        --pf-about-inner-rx: 0deg !important;
        --pf-about-inner-ry: 0deg !important;
        --pf-about-inner-tz: 0px !important;
        --pf-about-inner-shift-y: 0px !important;
        --pf-about-inner-glow: 0 !important;
        transform: none !important;
        will-change: auto !important;
    }

    .pf-demo-home-clone-section .pf-demo-home-title-card > *,
    .pf-demo-home-clone-section .pf-demo-home-title-card:hover > *,
    .pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting > *,
    .pf-demo-home-clone-section .pf-demo-home-title-card.is-inner-returning > *{
        transform: none !important;
    }
}



/* =====================================================================
 * PATCH 20260617: Početna 2 — vraćeni hover/3D efekti bez pokretnog sjaja.
 * Kartice ponovo koriste premium tilt, lift, border i dubinu kao ranije,
 * ali miš više ne pomera svetlosnu traku / spot svetlo preko kartice.
 * ===================================================================== */

.pf-demo-home-clone-section [data-pf-about-inner-card],
.pf-demo-home-clone-section [data-pf-about-inner-card]:hover,
.pf-demo-home-clone-section [data-pf-about-inner-card].is-tilting,
.pf-demo-home-clone-section [data-pf-about-inner-card].is-inner-returning,
.pf-demo-home-clone-section .pf-about-feature-card,
.pf-demo-home-clone-section .pf-about-feature-card:hover,
.pf-demo-home-clone-section .pf-about-feature-card.is-tilting,
.pf-demo-home-clone-section .pf-about-feature-card.is-inner-returning,
.pf-demo-home-clone-section .pf-about-stat-card,
.pf-demo-home-clone-section .pf-about-stat-card:hover,
.pf-demo-home-clone-section .pf-about-stat-card.is-tilting,
.pf-demo-home-clone-section .pf-about-stat-card.is-inner-returning,
.pf-demo-home-clone-section .pf-about-contact-list-card,
.pf-demo-home-clone-section .pf-about-contact-list-card:hover,
.pf-demo-home-clone-section .pf-about-contact-list-card.is-tilting,
.pf-demo-home-clone-section .pf-about-contact-list-card.is-inner-returning,
.pf-demo-home-clone-section .pf-about-faq-item,
.pf-demo-home-clone-section .pf-about-faq-item:hover,
.pf-demo-home-clone-section .pf-about-faq-item.is-tilting,
.pf-demo-home-clone-section .pf-about-faq-item.is-inner-returning,
.pf-demo-home-clone-section .pf-about-portal-shell,
.pf-demo-home-clone-section .pf-about-portal-shell:hover,
.pf-demo-home-clone-section .pf-about-portal-shell.is-tilting,
.pf-demo-home-clone-section .pf-about-portal-shell.is-inner-returning,
.pf-demo-home-clone-section .pf-demo-home-title-card,
.pf-demo-home-clone-section .pf-demo-home-title-card:hover,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-inner-returning{
    --pf-about-inner-pointer-x: 50% !important;
    --pf-about-inner-pointer-y: 18% !important;
    --pf-about-inner-shine-x: 0px !important;
}

.pf-demo-home-clone-section [data-pf-about-inner-card]::before,
.pf-demo-home-clone-section [data-pf-about-inner-card]:hover::before,
.pf-demo-home-clone-section [data-pf-about-inner-card].is-tilting::before,
.pf-demo-home-clone-section [data-pf-about-inner-card].is-inner-returning::before,
.pf-demo-home-clone-section .pf-about-feature-card::before,
.pf-demo-home-clone-section .pf-about-feature-card:hover::before,
.pf-demo-home-clone-section .pf-about-feature-card.is-tilting::before,
.pf-demo-home-clone-section .pf-about-feature-card.is-inner-returning::before,
.pf-demo-home-clone-section .pf-about-stat-card::before,
.pf-demo-home-clone-section .pf-about-stat-card:hover::before,
.pf-demo-home-clone-section .pf-about-stat-card.is-tilting::before,
.pf-demo-home-clone-section .pf-about-stat-card.is-inner-returning::before,
.pf-demo-home-clone-section .pf-about-contact-list-card::before,
.pf-demo-home-clone-section .pf-about-contact-list-card:hover::before,
.pf-demo-home-clone-section .pf-about-contact-list-card.is-tilting::before,
.pf-demo-home-clone-section .pf-about-contact-list-card.is-inner-returning::before,
.pf-demo-home-clone-section .pf-about-faq-item::before,
.pf-demo-home-clone-section .pf-about-faq-item:hover::before,
.pf-demo-home-clone-section .pf-about-faq-item.is-tilting::before,
.pf-demo-home-clone-section .pf-about-faq-item.is-inner-returning::before,
.pf-demo-home-clone-section .pf-about-portal-shell::before,
.pf-demo-home-clone-section .pf-about-portal-shell:hover::before,
.pf-demo-home-clone-section .pf-about-portal-shell.is-tilting::before,
.pf-demo-home-clone-section .pf-about-portal-shell.is-inner-returning::before,
.pf-demo-home-clone-section .pf-demo-home-title-card::before,
.pf-demo-home-clone-section .pf-demo-home-title-card:hover::before,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting::before,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-inner-returning::before{
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.16), rgba(84, 196, 255, 0.05) 28%, transparent 68%),
        radial-gradient(circle at 50% 18%, rgba(122, 229, 255, 0.12), rgba(84, 196, 255, 0.04) 22%, transparent 52%) !important;
    border-color: rgba(122, 229, 255, 0.30) !important;
    box-shadow:
        inset 0 1px 0 rgba(166, 244, 255, 0.16),
        inset 0 0 22px rgba(84, 196, 255, 0.08),
        0 0 16px rgba(84, 196, 255, 0.07) !important;
    opacity: 0.94 !important;
    filter: none !important;
}

.pf-demo-home-clone-section [data-pf-about-inner-card]::after,
.pf-demo-home-clone-section [data-pf-about-inner-card]:hover::after,
.pf-demo-home-clone-section [data-pf-about-inner-card].is-tilting::after,
.pf-demo-home-clone-section [data-pf-about-inner-card].is-inner-returning::after,
.pf-demo-home-clone-section .pf-about-feature-card::after,
.pf-demo-home-clone-section .pf-about-feature-card:hover::after,
.pf-demo-home-clone-section .pf-about-feature-card.is-tilting::after,
.pf-demo-home-clone-section .pf-about-feature-card.is-inner-returning::after,
.pf-demo-home-clone-section .pf-about-stat-card::after,
.pf-demo-home-clone-section .pf-about-stat-card:hover::after,
.pf-demo-home-clone-section .pf-about-stat-card.is-tilting::after,
.pf-demo-home-clone-section .pf-about-stat-card.is-inner-returning::after,
.pf-demo-home-clone-section .pf-about-contact-list-card::after,
.pf-demo-home-clone-section .pf-about-contact-list-card:hover::after,
.pf-demo-home-clone-section .pf-about-contact-list-card.is-tilting::after,
.pf-demo-home-clone-section .pf-about-contact-list-card.is-inner-returning::after,
.pf-demo-home-clone-section .pf-about-faq-item::after,
.pf-demo-home-clone-section .pf-about-faq-item:hover::after,
.pf-demo-home-clone-section .pf-about-faq-item.is-tilting::after,
.pf-demo-home-clone-section .pf-about-faq-item.is-inner-returning::after,
.pf-demo-home-clone-section .pf-about-portal-shell::after,
.pf-demo-home-clone-section .pf-about-portal-shell:hover::after,
.pf-demo-home-clone-section .pf-about-portal-shell.is-tilting::after,
.pf-demo-home-clone-section .pf-about-portal-shell.is-inner-returning::after,
.pf-demo-home-clone-section .pf-demo-home-title-card::after,
.pf-demo-home-clone-section .pf-demo-home-title-card:hover::after,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-tilting::after,
.pf-demo-home-clone-section .pf-demo-home-title-card.is-inner-returning::after{
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 24px) !important;
    opacity: 0.64 !important;
    filter: blur(3px) drop-shadow(0 0 10px rgba(84, 196, 255, 0.12)) !important;
}

/* =====================================================================
 * PATCH 20260617: Besplatan demo 2 — ista demo sadržina u Početna 2 okvirima.
 * Nova strana /besplatan-demo-2 koristi direktne plave kartične blokove,
 * bez starog roller/flip okvira, sa istim 3D hover efektima kao Početna 2.
 * ===================================================================== */

.pf-demo2-section{
    scroll-margin-top: 120px;
}

.pf-demo2-shell{
    gap: clamp(30px, 4vw, 56px);
}

.pf-demo-home-clone-section .pf-demo2-block{
    width: min(1100px, 100%);
}

.pf-demo2-intro-grid,
.pf-demo2-request-grid{
    width: min(980px, 100%);
    margin: 0 auto;
}

.pf-demo2-intro-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pf-demo2-request-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pf-demo2-list{
    width: min(940px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 18px);
}

.pf-demo2-list .pf-about-contact-list-card{
    margin: 0 !important;
    height: 100%;
    align-items: flex-start;
}

.pf-demo2-faq-list{
    width: min(940px, 100%);
}

.pf-demo2-actions{
    margin-top: clamp(18px, 2.6vw, 30px) !important;
}

@media (max-width: 980px){
    .pf-demo2-intro-grid,
    .pf-demo2-request-grid,
    .pf-demo2-list{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px){
    .pf-demo2-shell{
        gap: 24px;
    }
}

/* =====================================================================
 * PATCH 20260617: Proces i cene 2 — sadržaj Proces i cene u Početna 2 okvirima.
 * Nova strana /proces-i-cene-2 koristi direktne plave kartične blokove,
 * bez starog roller/flip okvira, sa istim 3D hover efektima kao Početna 2.
 * ===================================================================== */

.pf-process2-section{
    scroll-margin-top: 120px;
}

.pf-process2-shell{
    gap: clamp(30px, 4vw, 56px);
}

.pf-demo-home-clone-section .pf-process2-block{
    width: min(1100px, 100%);
}

.pf-process2-intro-grid,
.pf-process2-guide-grid{
    width: min(980px, 100%);
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pf-process2-price-grid{
    width: min(1000px, 100%);
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pf-process2-guide-grid{
    margin-top: clamp(16px, 2.6vw, 30px);
}

.pf-process2-step-grid{
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 18px);
}

.pf-process2-list{
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 18px);
}

.pf-process2-list .pf-about-contact-list-card{
    margin: 0 !important;
    height: 100%;
    align-items: flex-start;
}

.pf-process2-list .pf-about-contact-list-card h3{
    margin: 0 0 6px;
    color: rgba(239, 253, 255, 0.98);
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.16;
}

.pf-process2-faq-list{
    width: min(940px, 100%);
    margin-top: clamp(16px, 2.4vw, 28px);
}

.pf-process2-speed-grid{
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 18px);
}

.pf-process2-form-block{
    width: min(1080px, 100%) !important;
}

.pf-process2-form-wrap{
    width: min(940px, 100%);
    margin: 0 auto;
    padding: clamp(14px, 2vw, 20px);
    border-radius: 28px;
}

.pf-process2-form-wrap .pf-about-form-shell{
    margin: 0;
}

.pf-process2-actions{
    margin-top: clamp(18px, 2.6vw, 30px) !important;
}

@media (max-width: 980px){
    .pf-process2-intro-grid,
    .pf-process2-guide-grid,
    .pf-process2-price-grid,
    .pf-process2-step-grid,
    .pf-process2-list,
    .pf-process2-speed-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px){
    .pf-process2-shell{
        gap: 24px;
    }

    .pf-process2-form-wrap{
        padding: 0;
        border-radius: 0;
    }
}


/* =====================================================================
 * PATCH 20260618: Početna — naslovni blokovi koriste isti okvir kao
 * naslovni blokovi na strani "Početna 2". Menja se samo početna strana.
 * ===================================================================== */

body .pf-home-title-frame-section .pf-home-title-card,
body .pf-home-title-frame-section .pf-home-title-card:hover,
body .pf-home-title-frame-section .pf-home-title-card.is-tilting,
body .pf-home-title-frame-section .pf-home-title-card.is-inner-returning{
    --pf-about-inner-rx: var(--pf-about-js-inner-rx, 0deg) !important;
    --pf-about-inner-ry: var(--pf-about-js-inner-ry, 0deg) !important;
    --pf-about-inner-tz: var(--pf-about-js-inner-tz, 0px) !important;
    --pf-about-inner-shift-y: var(--pf-about-js-inner-shift-y, 0px) !important;
    --pf-about-inner-pointer-x: 50% !important;
    --pf-about-inner-pointer-y: 18% !important;
    --pf-about-inner-shine-x: 0px !important;
    --pf-about-inner-glow: var(--pf-about-js-inner-glow, 0) !important;
    width: min(900px, 100%) !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 0 !important;
    align-items: start !important;
    justify-items: center !important;
    padding: clamp(22px, 3vw, 30px) clamp(18px, 3vw, 34px) !important;
    border-radius: 28px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transform-style: preserve-3d !important;
    transform:
        perspective(1850px)
        translate3d(0, var(--pf-about-inner-shift-y), var(--pf-about-inner-tz))
        rotateX(var(--pf-about-inner-rx))
        rotateY(var(--pf-about-inner-ry))
        scale(calc(1 + (0.012 * var(--pf-about-inner-glow)))) !important;
    transform-origin: 50% 50% !important;
    transition:
        box-shadow 180ms ease,
        border-color 180ms ease,
        filter 180ms ease,
        background 180ms ease !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(122, 229, 255, 0.24), transparent 34%),
        radial-gradient(circle at 86% 0%, rgba(45, 140, 255, 0.22), transparent 32%),
        linear-gradient(180deg,
            var(--rivontiq-card-fill-a) 0%,
            var(--rivontiq-card-fill-b) 42%,
            var(--rivontiq-card-fill-c) 100%) !important;
    border: 1px solid var(--rivontiq-card-line) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.20),
        0 22px 48px rgba(1, 11, 31, 0.52),
        inset 0 1px 0 rgba(122, 229, 255, 0.30),
        inset 0 0 0 1px rgba(84, 196, 255, 0.12),
        inset 0 -1px 0 rgba(45, 140, 255, 0.24) !important;
}

body .pf-home-title-frame-section .pf-home-title-card--hero{
    width: min(960px, 100%) !important;
    max-width: 960px !important;
    padding-top: clamp(24px, 3.4vw, 34px) !important;
    padding-bottom: clamp(24px, 3.4vw, 34px) !important;
}

body .pf-home-title-frame-section .pf-home-title-card--inner{
    width: min(840px, 100%) !important;
    max-width: 840px !important;
    margin-bottom: clamp(18px, 2.4vw, 28px) !important;
}

body .pf-home-title-frame-section .pf-home-title-card:hover,
body .pf-home-title-frame-section .pf-home-title-card.is-tilting{
    z-index: 12 !important;
    will-change: transform !important;
    border-color: rgba(166, 244, 255, 1) !important;
    filter: saturate(1.08) brightness(1.035) !important;
    box-shadow:
        0 0 0 1px rgba(166, 244, 255, 0.36),
        0 0 calc(30px + (18px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.40),
        0 0 calc(54px + (20px * var(--pf-about-inner-glow))) rgba(45, 140, 255, 0.26),
        0 28px 58px rgba(1, 11, 31, 0.56),
        inset 0 1px 0 rgba(166, 244, 255, 0.42),
        inset 0 -1px 0 rgba(84, 196, 255, 0.28) !important;
}

body .pf-home-title-frame-section .pf-home-title-card::before,
body .pf-home-title-frame-section .pf-home-title-card:hover::before,
body .pf-home-title-frame-section .pf-home-title-card.is-tilting::before,
body .pf-home-title-frame-section .pf-home-title-card.is-inner-returning::before{
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 7px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(122, 229, 255, 0.30) !important;
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.16), rgba(84, 196, 255, 0.05) 28%, transparent 68%),
        radial-gradient(circle at 50% 18%, rgba(122, 229, 255, 0.12), rgba(84, 196, 255, 0.04) 22%, transparent 52%) !important;
    box-shadow:
        inset 0 1px 0 rgba(166, 244, 255, 0.16),
        inset 0 0 22px rgba(84, 196, 255, 0.08),
        0 0 16px rgba(84, 196, 255, 0.07) !important;
    opacity: 0.94 !important;
    filter: none !important;
    pointer-events: none !important;
    transform: translate3d(0, 0, 18px) !important;
    z-index: 1 !important;
}

body .pf-home-title-frame-section .pf-home-title-card::after,
body .pf-home-title-frame-section .pf-home-title-card:hover::after,
body .pf-home-title-frame-section .pf-home-title-card.is-tilting::after,
body .pf-home-title-frame-section .pf-home-title-card.is-inner-returning::after{
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: -2px !important;
    bottom: auto !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
        rgba(84, 196, 255, 0),
        rgba(122, 229, 255, 0.66) 34%,
        rgba(84, 196, 255, 0.54) 56%,
        rgba(45, 140, 255, 0.36) 72%,
        rgba(84, 196, 255, 0)) !important;
    opacity: 0.82 !important;
    filter: blur(3.4px) drop-shadow(0 0 16px rgba(84, 196, 255, 0.22)) !important;
    pointer-events: none !important;
    transform: translate3d(0, 0, 24px) !important;
    z-index: 2 !important;
}

body .pf-home-title-frame-section .pf-home-title-card > *,
body .pf-home-title-frame-section .pf-home-title-card:hover > *,
body .pf-home-title-frame-section .pf-home-title-card.is-tilting > *,
body .pf-home-title-frame-section .pf-home-title-card.is-inner-returning > *{
    position: relative !important;
    z-index: 3 !important;
    transform: translate3d(0, 0, calc(8px + (10px * var(--pf-about-inner-glow)))) !important;
    transition: transform 180ms ease, text-shadow 180ms ease !important;
}

body .pf-home-title-frame-section .pf-home-title-card .pf-demo-probe-direct-title,
body .pf-home-title-frame-section .pf-home-title-card .pf-demo-probe-title,
body .pf-home-title-frame-section .pf-home-title-card .pf-about-portal-title{
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

body .pf-home-title-frame-section .pf-home-title-card .pf-demo-probe-direct-text,
body .pf-home-title-frame-section .pf-home-title-card .pf-demo-probe-subtitle,
body .pf-home-title-frame-section .pf-home-title-card .pf-about-portal-text,
body .pf-home-title-frame-section .pf-home-title-card .pf-demo-home-subtitle{
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

body .pf-home-title-frame-section .pf-home-title-card:hover .pf-demo-probe-direct-title,
body .pf-home-title-frame-section .pf-home-title-card.is-tilting .pf-demo-probe-direct-title,
body .pf-home-title-frame-section .pf-home-title-card:hover .pf-demo-probe-title,
body .pf-home-title-frame-section .pf-home-title-card.is-tilting .pf-demo-probe-title,
body .pf-home-title-frame-section .pf-home-title-card:hover .pf-about-portal-title,
body .pf-home-title-frame-section .pf-home-title-card.is-tilting .pf-about-portal-title{
    text-shadow:
        0 0 26px rgba(122, 229, 255, 0.26),
        0 10px 28px rgba(0, 5, 18, 0.38) !important;
}

@media (max-width: 680px){
    body .pf-home-title-frame-section .pf-home-title-card,
    body .pf-home-title-frame-section .pf-home-title-card--hero,
    body .pf-home-title-frame-section .pf-home-title-card--inner{
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px !important;
        border-radius: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse){
    body .pf-home-title-frame-section .pf-home-title-card,
    body .pf-home-title-frame-section .pf-home-title-card:hover,
    body .pf-home-title-frame-section .pf-home-title-card.is-tilting,
    body .pf-home-title-frame-section .pf-home-title-card.is-inner-returning{
        --pf-about-inner-rx: 0deg !important;
        --pf-about-inner-ry: 0deg !important;
        --pf-about-inner-tz: 0px !important;
        --pf-about-inner-shift-y: 0px !important;
        --pf-about-inner-glow: 0 !important;
        transform: none !important;
        will-change: auto !important;
    }

    body .pf-home-title-frame-section .pf-home-title-card > *,
    body .pf-home-title-frame-section .pf-home-title-card:hover > *,
    body .pf-home-title-frame-section .pf-home-title-card.is-tilting > *,
    body .pf-home-title-frame-section .pf-home-title-card.is-inner-returning > *{
        transform: none !important;
    }
}

/* PATCH 20260618: Početna — veliki spoljašnji okviri miruju na hover.
   Skida se samo pomeranje/tilt sa prvih velikih okvira na početnoj strani.
   Unutrašnje kartice i njihovi efekti ostaju aktivni. */
.pf-about-section#top .pf-about-contact-shell,
.pf-about-section#top .pf-about-contact-shell:hover,
.pf-about-section#top .pf-about-contact-shell[data-pf-about-tilt],
.pf-about-section#top .pf-about-contact-shell[data-pf-about-tilt]:hover,
.pf-about-section#top .pf-about-contact-shell.is-footer-like-tilting{
    --pf-about-rotate-x: 0deg !important;
    --pf-about-rotate-y: 0deg !important;
    --pf-about-shell-shift-x: 0px !important;
    --pf-about-shell-shift-y: 0px !important;
    transform: none !important;
    transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease !important;
    will-change: auto !important;
}

.pf-about-section#top .pf-about-contact-face,
.pf-about-section#top .pf-about-contact-face:hover,
.pf-about-section#top .pf-about-contact-face.is-active-face,
.pf-about-section#top .pf-about-contact-face.is-static-face{
    transform: none !important;
    filter: none !important;
    transition: opacity 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease !important;
    will-change: auto !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-panel-tilting,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-panel-returning,
.pf-about-section#top .pf-about-contact-panel,
.pf-about-section#top .pf-about-contact-panel:hover,
.pf-about-section#top .pf-about-contact-panel.is-tilting,
.pf-about-section#top .pf-about-contact-panel.is-inner-returning,
.pf-about-section#top .pf-about-contact-panel.is-panel-tilting,
.pf-about-section#top .pf-about-contact-panel.is-panel-returning{
    --pf-about-js-inner-rx: 0deg !important;
    --pf-about-js-inner-ry: 0deg !important;
    --pf-about-js-inner-tz: 0px !important;
    --pf-about-js-inner-shift-y: 0px !important;
    --pf-about-js-inner-shine-x: 0px !important;
    --pf-about-js-inner-glow: 0 !important;
    --pf-about-inner-rx: 0deg !important;
    --pf-about-inner-ry: 0deg !important;
    --pf-about-inner-tz: 0px !important;
    --pf-about-inner-shift-y: 0px !important;
    --pf-about-inner-shine-x: 0px !important;
    --pf-about-inner-glow: 0 !important;
    --pf-about-panel-rx: 0deg !important;
    --pf-about-panel-ry: 0deg !important;
    --pf-about-panel-tz: 0px !important;
    --pf-about-panel-lift: 0px !important;
    --pf-about-panel-glow: 0 !important;
    transform: none !important;
    transform-origin: center center !important;
    transition: box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease, background 180ms ease !important;
    will-change: auto !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning::before,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel::after,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover::after,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting::after,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning::after,
.pf-about-section#top .pf-about-contact-panel::before,
.pf-about-section#top .pf-about-contact-panel:hover::before,
.pf-about-section#top .pf-about-contact-panel.is-tilting::before,
.pf-about-section#top .pf-about-contact-panel.is-inner-returning::before,
.pf-about-section#top .pf-about-contact-panel::after,
.pf-about-section#top .pf-about-contact-panel:hover::after,
.pf-about-section#top .pf-about-contact-panel.is-tilting::after,
.pf-about-section#top .pf-about-contact-panel.is-inner-returning::after{
    transform: none !important;
    will-change: auto !important;
}

.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel > *,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel:hover > *,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-tilting > *,
.pf-about-section#top .pf-about-contact-face .pf-about-contact-panel.is-inner-returning > *,
.pf-about-section#top .pf-about-contact-panel > *,
.pf-about-section#top .pf-about-contact-panel:hover > *,
.pf-about-section#top .pf-about-contact-panel.is-tilting > *,
.pf-about-section#top .pf-about-contact-panel.is-inner-returning > *{
    transform: none !important;
    transition: text-shadow 180ms ease !important;
}

/* PATCH 20260618: čistiji raspored unutrašnjih kartica
   Obične info kartice sada imaju ikonicu levo i naslov pored ikonice.
   Dekorativni brojevi/oznake su uklonjeni iz markup-a; pravi brojevi, cene i metrike ostaju kao glavni akcenat bez dodatne ikonice. */
.pf-about-section .pf-about-feature-card.pf-info-icon-card,
.pf-about-section .pf-about-stat-card.pf-info-icon-card{
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 12px !important;
    text-align: left !important;
}

.pf-about-section .pf-about-feature-card.pf-info-icon-card .pf-about-feature-icon,
.pf-about-section .pf-about-stat-card.pf-info-icon-card .pf-about-stat-icon{
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.pf-about-section .pf-about-feature-card.pf-info-icon-card .pf-about-feature-title,
.pf-about-section .pf-about-stat-card.pf-info-icon-card .pf-about-stat-title{
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
    text-align: left !important;
}

.pf-about-section .pf-about-feature-card.pf-info-icon-card .pf-about-feature-text,
.pf-about-section .pf-about-stat-card.pf-info-icon-card .pf-about-stat-text{
    grid-column: 1 / -1 !important;
    margin-top: 2px !important;
    text-align: left !important;
}

.pf-about-section .pf-about-stat-card.pf-metric-value-card{
    text-align: left !important;
}

.pf-about-section .pf-about-stat-card.pf-metric-value-card .pf-about-stat-value{
    margin: 0 0 14px !important;
    font-size: clamp(1.62rem, 1.28rem + 0.92vw, 2.34rem) !important;
    line-height: 1.08 !important;
}

.pf-about-section .pf-about-stat-card.pf-metric-value-card .pf-about-stat-title{
    margin-top: 0 !important;
}

@media (max-width: 680px){
    .pf-about-section .pf-about-feature-card.pf-info-icon-card,
    .pf-about-section .pf-about-stat-card.pf-info-icon-card{
        grid-template-columns: auto minmax(0, 1fr) !important;
        column-gap: 12px !important;
        row-gap: 10px !important;
    }

    .pf-about-section .pf-about-feature-card.pf-info-icon-card .pf-about-feature-icon,
    .pf-about-section .pf-about-stat-card.pf-info-icon-card .pf-about-stat-icon{
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        border-radius: 15px !important;
        font-size: 1.24rem !important;
    }

    .pf-about-section .pf-about-stat-card.pf-metric-value-card .pf-about-stat-value{
        font-size: clamp(1.38rem, 1.12rem + 0.9vw, 1.86rem) !important;
    }
}


/* PATCH 20260618: globalno poravnanje ikonice i naslova
   Svuda gde kartica ima ikonicu, ikonica ostaje levo, naslov ide odmah pored nje,
   a opis ide ispod naslova u istoj desnoj koloni. Ovo skida utisak da ikonica stoji
   sama sa leve strane ili iznad naslova. */
.pf-about-section .pf-about-feature-card.pf-info-icon-card,
.pf-about-section .pf-about-stat-card.pf-info-icon-card{
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 14px !important;
    row-gap: 7px !important;
    text-align: left !important;
}

.pf-about-section .pf-about-feature-card.pf-info-icon-card .pf-about-feature-icon,
.pf-about-section .pf-about-stat-card.pf-info-icon-card .pf-about-stat-icon{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    justify-self: start !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.pf-about-section .pf-about-feature-card.pf-info-icon-card .pf-about-feature-title,
.pf-about-section .pf-about-stat-card.pf-info-icon-card .pf-about-stat-title{
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 2px 0 0 !important;
    text-align: left !important;
}

.pf-about-section .pf-about-feature-card.pf-info-icon-card .pf-about-feature-text,
.pf-about-section .pf-about-stat-card.pf-info-icon-card .pf-about-stat-text{
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    text-align: left !important;
}

.pf-about-section .pf-about-skill-card,
.pf-about-section .pf-about-contact-list-card{
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 14px !important;
    row-gap: 7px !important;
    text-align: left !important;
}

.pf-about-section .pf-about-skill-card .pf-about-skill-icon,
.pf-about-section .pf-about-contact-list-card > span{
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: start !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.pf-about-section .pf-about-skill-card > div,
.pf-about-section .pf-about-contact-list-card > div{
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    align-self: start !important;
}

.pf-about-section .pf-about-skill-card h3,
.pf-about-section .pf-about-skill-card h4,
.pf-about-section .pf-about-contact-list-card h4,
.pf-about-section .pf-about-contact-list-card h5{
    margin: 2px 0 8px !important;
    text-align: left !important;
}

.pf-about-section .pf-about-skill-card p,
.pf-about-section .pf-about-contact-list-card p{
    margin: 0 !important;
    text-align: left !important;
}

@media (max-width: 680px){
    .pf-about-section .pf-about-feature-card.pf-info-icon-card,
    .pf-about-section .pf-about-stat-card.pf-info-icon-card,
    .pf-about-section .pf-about-skill-card,
    .pf-about-section .pf-about-contact-list-card{
        grid-template-columns: auto minmax(0, 1fr) !important;
        column-gap: 12px !important;
        row-gap: 6px !important;
    }

    .pf-about-section .pf-about-feature-card.pf-info-icon-card .pf-about-feature-icon,
    .pf-about-section .pf-about-stat-card.pf-info-icon-card .pf-about-stat-icon,
    .pf-about-section .pf-about-skill-card .pf-about-skill-icon,
    .pf-about-section .pf-about-contact-list-card > span{
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        border-radius: 15px !important;
        font-size: 1.18rem !important;
    }
}

/* === PATCH 2026-06-19: final removal of full inner header frame === */
/*
   Ovaj CSS je u rivontiq-final-blue-cards.css zato sto se taj fajl ucitava POSLE
   rivontiq-header.css i prethodno je ponovo vracao veliki plavi okvir/sloj.
   Uklanja se okvir koji obuhvata logo + glavne dugmice, dok pojedinacne kartice
   logoa, dugmici i providan okvir oko dugmica ostaju uredni.
*/
@media (min-width: 1025px){
    .pf-header__lux-frame::before,
    .pf-header__lux-frame::after{
        content: none !important;
        display: none !important;
        visibility: hidden !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        opacity: 0 !important;
    }

    .pf-header__lux-frame{
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    .pf-header__nav{
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .pf-header__center-shell{
        border: 1px solid rgba(84, 196, 255, 0.62) !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow:
            0 0 0 1px rgba(169, 236, 255, 0.08),
            0 0 18px rgba(84, 196, 255, 0.12) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .pf-header__center-shell::before,
    .pf-header__center-shell::after,
    .pf-header__center-topline,
    .pf-header__center-glow,
    .pf-header__center-frame{
        content: none !important;
        display: none !important;
        visibility: hidden !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        opacity: 0 !important;
    }
}

/* === PATCH 2026-06-19: FORCE restore visible outer header frame ===
   Ispravka za header: prethodni fajl se ucitava posle rivontiq-header.css
   i gasio je okvir. Ovde se vraca samo spoljasnja linija oko celog headera.
   Unutrasnji okvir oko logoa i dugmica ostaje uklonjen. */
@media (min-width: 1025px){
    .pf-header .pf-header__nav{
        border: 1px solid rgba(84, 196, 255, 0.74) !important;
        outline: 1px solid rgba(169, 236, 255, 0.10) !important;
        outline-offset: -2px !important;
        border-radius: 32px !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow:
            0 0 0 1px rgba(169, 236, 255, 0.10),
            0 0 24px rgba(84, 196, 255, 0.16),
            inset 0 0 0 1px rgba(169, 236, 255, 0.04) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .pf-header .pf-header__lux-frame{
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        inset: 0 !important;
        border-radius: inherit !important;
        pointer-events: none !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    .pf-header .pf-header__lux-frame::before{
        content: "" !important;
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        inset: -1px !important;
        border-radius: inherit !important;
        border: 1px solid rgba(169, 236, 255, 0.42) !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow:
            0 0 0 1px rgba(84, 196, 255, 0.10),
            0 0 22px rgba(84, 196, 255, 0.12) !important;
        -webkit-mask: none !important;
        mask: none !important;
        opacity: 0.86 !important;
    }

    .pf-header .pf-header__lux-frame::after{
        content: none !important;
        display: none !important;
        visibility: hidden !important;
        border: 0 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        opacity: 0 !important;
    }
}



/* === PATCH 2026-06-19: footer outer panel transparent background ===
   Footer: prvi veliki okvir ostaje sa plavom linijom/ivicom, ali njegova
   unutrasnja pozadina je providna da se vidi glavna tamna pozadina sajta.
   Unutrasnje footer kartice nisu uklonjene ovim patch-om. */
.pf-footer .pf-footer-panel,
.pf-footer-panel,
.pf-footer-panel.pf-footer-panel--embedded{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.pf-footer .pf-footer-panel::after,
.pf-footer-panel::after,
.pf-footer-panel.pf-footer-panel--embedded::after{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    filter: none !important;
    opacity: 0 !important;
}

.pf-footer .pf-footer-panel__lux-frame::before,
.pf-footer-panel__lux-frame::before{
    opacity: 0.86 !important;
}

.pf-footer .pf-footer-panel__lux-frame::after,
.pf-footer-panel__lux-frame::after{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* === PATCH 2026-06-19: FORCE footer fully transparent backgrounds ===
   Ispravka: prethodni patch je uklonio samo veliki panel, ali su unutrasnje
   footer kartice i njihovi pseudo-slojevi i dalje crtali tamno/plavu pozadinu.
   Ovaj blok se nalazi na kraju fajla koji se ucitava poslednji, zato sigurno
   gasi pozadinu footer-a, a ostavlja plave ivice/linije da okvir bude vidljiv. */
html body .pf-footer-shell,
html body .pf-footer-shell--embedded,
html body footer.pf-footer-shell,
html body .pf-demo-probe-footer,
html body .pf-demo-probe-footer .pf-footer-shell,
html body .pf-demo-probe-footer .pf-footer-shell--embedded,
html body .pf-footer-panel,
html body .pf-footer-panel--embedded,
html body .pf-demo-probe-footer .pf-footer-panel,
html body .pf-demo-probe-footer .pf-footer-panel--embedded{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

html body .pf-footer-brand,
html body .pf-footer-section,
html body .pf-footer-meta,
html body .pf-demo-probe-footer .pf-footer-brand,
html body .pf-demo-probe-footer .pf-footer-section,
html body .pf-demo-probe-footer .pf-footer-meta{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(122, 229, 255, 0.44) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.10),
        0 0 20px rgba(84, 196, 255, 0.10),
        inset 0 0 0 1px rgba(122, 229, 255, 0.06) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body .pf-footer-brand::before,
html body .pf-footer-section::before,
html body .pf-footer-meta::before,
html body .pf-footer-brand::after,
html body .pf-footer-section::after,
html body .pf-footer-meta::after,
html body .pf-demo-probe-footer .pf-footer-brand::before,
html body .pf-demo-probe-footer .pf-footer-section::before,
html body .pf-demo-probe-footer .pf-footer-meta::before,
html body .pf-demo-probe-footer .pf-footer-brand::after,
html body .pf-demo-probe-footer .pf-footer-section::after,
html body .pf-demo-probe-footer .pf-footer-meta::after{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

html body .pf-footer-brand::after,
html body .pf-footer-section::after,
html body .pf-footer-meta::after,
html body .pf-demo-probe-footer .pf-footer-brand::after,
html body .pf-demo-probe-footer .pf-footer-section::after,
html body .pf-demo-probe-footer .pf-footer-meta::after{
    border-color: rgba(122, 229, 255, 0.20) !important;
}

html body .pf-footer-panel::after,
html body .pf-footer-panel--embedded::after,
html body .pf-demo-probe-footer .pf-footer-panel::after,
html body .pf-demo-probe-footer .pf-footer-panel--embedded::after{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    filter: none !important;
    opacity: 0 !important;
    box-shadow: none !important;
}

html body .pf-footer-panel__lux-frame,
html body .pf-footer-panel__lux-frame::before,
html body .pf-footer-panel__lux-frame::after,
html body .pf-demo-probe-footer .pf-footer-panel__lux-frame,
html body .pf-demo-probe-footer .pf-footer-panel__lux-frame::before,
html body .pf-demo-probe-footer .pf-footer-panel__lux-frame::after{
    background-color: transparent !important;
    background-image: none !important;
}

html body .pf-footer-panel__lux-frame::before,
html body .pf-demo-probe-footer .pf-footer-panel__lux-frame::before{
    border: 1px solid rgba(122, 229, 255, 0.62) !important;
    padding: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 0.84 !important;
    box-shadow:
        0 0 0 1px rgba(169, 236, 255, 0.08),
        0 0 26px rgba(84, 196, 255, 0.12) !important;
}

html body .pf-footer-panel__lux-frame::after,
html body .pf-demo-probe-footer .pf-footer-panel__lux-frame::after{
    border: 1px solid rgba(122, 229, 255, 0.22) !important;
    box-shadow: none !important;
    opacity: 0.72 !important;
}

html body .pf-footer-brand-badge,
html body .pf-footer-social-icon,
html body .pf-demo-probe-footer .pf-footer-brand-badge,
html body .pf-demo-probe-footer .pf-footer-social-icon{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(122, 229, 255, 0.38) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.08),
        0 0 14px rgba(84, 196, 255, 0.10) !important;
}

html body .pf-footer-brand-badge::before,
html body .pf-footer-brand-badge::after,
html body .pf-demo-probe-footer .pf-footer-brand-badge::before,
html body .pf-demo-probe-footer .pf-footer-brand-badge::after{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body .pf-footer-brand:hover,
html body .pf-footer-section:hover,
html body .pf-footer-meta:hover,
html body .pf-demo-probe-footer .pf-footer-brand:hover,
html body .pf-demo-probe-footer .pf-footer-section:hover,
html body .pf-demo-probe-footer .pf-footer-meta:hover{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(122, 229, 255, 0.64) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.14),
        0 0 24px rgba(84, 196, 255, 0.16),
        inset 0 0 0 1px rgba(122, 229, 255, 0.07) !important;
}

/* === PATCH 2026-06-19: footer frames match light-blue inner cards ===
   Zahtev: footer okviri da budu svetlo plavi kao kartica
   "Naziv firme i glavna ponuda". Pozadina ostaje providna, a okviri/ivice
   dobijaju isti cyan/plavi ton i sjaj kao unutrasnje kartice. */
html body .pf-footer-panel,
html body .pf-footer-panel--embedded,
html body .pf-demo-probe-footer .pf-footer-panel,
html body .pf-demo-probe-footer .pf-footer-panel--embedded{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

html body .pf-footer-panel__lux-frame::before,
html body .pf-demo-probe-footer .pf-footer-panel__lux-frame::before{
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 1 !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.20),
        inset 0 1px 0 rgba(122, 229, 255, 0.22),
        inset 0 0 0 1px rgba(84, 196, 255, 0.10) !important;
}

html body .pf-footer-panel__lux-frame::after,
html body .pf-demo-probe-footer .pf-footer-panel__lux-frame::after{
    border: 1px solid rgba(122, 229, 255, 0.34) !important;
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.12), rgba(84, 196, 255, 0.04) 32%, transparent 72%) !important;
    background-color: transparent !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.12),
        inset 0 0 20px rgba(84, 196, 255, 0.06) !important;
    opacity: 1 !important;
}

html body .pf-footer-brand,
html body .pf-footer-section,
html body .pf-footer-meta,
html body .pf-demo-probe-footer .pf-footer-brand,
html body .pf-demo-probe-footer .pf-footer-section,
html body .pf-demo-probe-footer .pf-footer-meta{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(122, 229, 255, 0.96) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.18),
        0 22px 48px rgba(1, 11, 31, 0.34),
        inset 0 1px 0 rgba(122, 229, 255, 0.24),
        inset 0 0 0 1px rgba(84, 196, 255, 0.10),
        inset 0 -1px 0 rgba(45, 140, 255, 0.16) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body .pf-footer-brand::before,
html body .pf-footer-section::before,
html body .pf-footer-meta::before,
html body .pf-demo-probe-footer .pf-footer-brand::before,
html body .pf-demo-probe-footer .pf-footer-section::before,
html body .pf-demo-probe-footer .pf-footer-meta::before{
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.12), rgba(84, 196, 255, 0.04) 30%, transparent 72%) !important;
    background-color: transparent !important;
    border: 1px solid rgba(122, 229, 255, 0.24) !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.12),
        inset 0 0 20px rgba(84, 196, 255, 0.06) !important;
    opacity: 1 !important;
}

html body .pf-footer-brand::after,
html body .pf-footer-section::after,
html body .pf-footer-meta::after,
html body .pf-demo-probe-footer .pf-footer-brand::after,
html body .pf-demo-probe-footer .pf-footer-section::after,
html body .pf-demo-probe-footer .pf-footer-meta::after{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(122, 229, 255, 0.34) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

html body .pf-footer-brand:hover,
html body .pf-footer-section:hover,
html body .pf-footer-meta:hover,
html body .pf-demo-probe-footer .pf-footer-brand:hover,
html body .pf-demo-probe-footer .pf-footer-section:hover,
html body .pf-demo-probe-footer .pf-footer-meta:hover{
    border-color: rgba(155, 238, 255, 1) !important;
    box-shadow:
        0 0 0 1px rgba(155, 238, 255, 0.26),
        0 0 28px rgba(84, 196, 255, 0.36),
        0 0 52px rgba(45, 140, 255, 0.22),
        0 24px 52px rgba(1, 11, 31, 0.38),
        inset 0 1px 0 rgba(155, 238, 255, 0.28),
        inset 0 0 0 1px rgba(84, 196, 255, 0.12) !important;
}

html body .pf-footer-brand-badge,
html body .pf-footer-social-icon,
html body .pf-demo-probe-footer .pf-footer-brand-badge,
html body .pf-demo-probe-footer .pf-footer-social-icon{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(122, 229, 255, 0.96) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.18),
        0 0 18px rgba(84, 196, 255, 0.24),
        inset 0 1px 0 rgba(122, 229, 255, 0.18) !important;
}



/* === PATCH 2026-06-19: footer transparent interior, light-blue frames kept ===
   Zahtev: footer je dobar, ali unutrasnja pozadina mora biti providna.
   Ostavlja svetlo plave okvire/sjaj, a gasi svaki fill/gradient unutar footer okvira. */
html body .pf-footer-shell,
html body .pf-footer-shell--embedded,
html body footer.pf-footer-shell,
html body .pf-demo-probe-footer,
html body .pf-demo-probe-footer .pf-footer-shell,
html body .pf-demo-probe-footer .pf-footer-shell--embedded,
html body .pf-footer-panel,
html body .pf-footer-panel--embedded,
html body .pf-demo-probe-footer .pf-footer-panel,
html body .pf-demo-probe-footer .pf-footer-panel--embedded,
html body .pf-footer-brand,
html body .pf-footer-section,
html body .pf-footer-meta,
html body .pf-footer-brand-badge,
html body .pf-footer-social-icon,
html body .pf-demo-probe-footer .pf-footer-brand,
html body .pf-demo-probe-footer .pf-footer-section,
html body .pf-demo-probe-footer .pf-footer-meta,
html body .pf-demo-probe-footer .pf-footer-brand-badge,
html body .pf-demo-probe-footer .pf-footer-social-icon{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

html body .pf-footer-panel::before,
html body .pf-footer-panel::after,
html body .pf-footer-panel__lux-frame::after,
html body .pf-footer-brand::before,
html body .pf-footer-section::before,
html body .pf-footer-meta::before,
html body .pf-footer-brand::after,
html body .pf-footer-section::after,
html body .pf-footer-meta::after,
html body .pf-footer-brand-badge::before,
html body .pf-footer-brand-badge::after,
html body .pf-footer-social-icon::before,
html body .pf-footer-social-icon::after,
html body .pf-demo-probe-footer .pf-footer-panel::before,
html body .pf-demo-probe-footer .pf-footer-panel::after,
html body .pf-demo-probe-footer .pf-footer-panel__lux-frame::after,
html body .pf-demo-probe-footer .pf-footer-brand::before,
html body .pf-demo-probe-footer .pf-footer-section::before,
html body .pf-demo-probe-footer .pf-footer-meta::before,
html body .pf-demo-probe-footer .pf-footer-brand::after,
html body .pf-demo-probe-footer .pf-footer-section::after,
html body .pf-demo-probe-footer .pf-footer-meta::after,
html body .pf-demo-probe-footer .pf-footer-brand-badge::before,
html body .pf-demo-probe-footer .pf-footer-brand-badge::after,
html body .pf-demo-probe-footer .pf-footer-social-icon::before,
html body .pf-demo-probe-footer .pf-footer-social-icon::after{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

html body .pf-footer-panel__lux-frame::before,
html body .pf-demo-probe-footer .pf-footer-panel__lux-frame::before{
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 1 !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.18),
        inset 0 1px 0 rgba(122, 229, 255, 0.20) !important;
}

html body .pf-footer-brand,
html body .pf-footer-section,
html body .pf-footer-meta,
html body .pf-footer-brand-badge,
html body .pf-footer-social-icon,
html body .pf-demo-probe-footer .pf-footer-brand,
html body .pf-demo-probe-footer .pf-footer-section,
html body .pf-demo-probe-footer .pf-footer-meta,
html body .pf-demo-probe-footer .pf-footer-brand-badge,
html body .pf-demo-probe-footer .pf-footer-social-icon{
    border-color: rgba(122, 229, 255, 0.96) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 22px rgba(84, 196, 255, 0.26),
        0 0 40px rgba(45, 140, 255, 0.16),
        inset 0 1px 0 rgba(122, 229, 255, 0.18) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body .pf-footer-brand:hover,
html body .pf-footer-section:hover,
html body .pf-footer-meta:hover,
html body .pf-footer-social-icon:hover,
html body .pf-footer-social-icon:focus-visible,
html body .pf-demo-probe-footer .pf-footer-brand:hover,
html body .pf-demo-probe-footer .pf-footer-section:hover,
html body .pf-demo-probe-footer .pf-footer-meta:hover,
html body .pf-demo-probe-footer .pf-footer-social-icon:hover,
html body .pf-demo-probe-footer .pf-footer-social-icon:focus-visible{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(155, 238, 255, 1) !important;
}

/* === PATCH 2026-06-19: header frame matches transparent footer frame ===
   Zahtev: header da bude odradjen kao footer - svetlo plavi okvir,
   unutrasnjost providna, bez dodatnog tamnog/plavog fill sloja oko celog headera.
   Unutrasnji meni/dugmici ostaju kakvi jesu. */
html body .pf-header,
html body .header.pf-header,
html body .pf-header.scrolled{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body .pf-header__nav,
html body .header .pf-header__nav,
html body .pf-header .nav-container.pf-header__nav{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
}

html body .pf-header__nav::before,
html body .pf-header__nav::after,
html body .pf-header__shell-topline,
html body .pf-header__shell-glow{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

html body .pf-header__lux-frame{
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body .pf-header__lux-frame::before{
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: -1px !important;
    padding: 0 !important;
    border-radius: inherit !important;
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.18),
        inset 0 1px 0 rgba(122, 229, 255, 0.20) !important;
    opacity: 1 !important;
}

html body .pf-header__lux-frame::after{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

/* === PATCH 2026-06-19: header outer frame exactly matches footer frame ===
   Zahtev: header okvir da bude kao donji footer okvir.
   Isti svetlo plavi ton, isti radius, ista providna unutrasnjost i isti glow.
   Ovo je najjaci zavrsni override zato sto se ovaj CSS ucitava poslednji. */
html body .pf-header{
    padding: 12px 24px 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body .pf-header .pf-header__nav,
html body .pf-header .nav-container.pf-header__nav,
html body header.pf-header .pf-header__nav{
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 40px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    outline: 0 !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.18),
        inset 0 1px 0 rgba(122, 229, 255, 0.20) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
}

html body .pf-header .pf-header__nav::before,
html body .pf-header .pf-header__nav::after,
html body .pf-header .pf-header__shell-topline,
html body .pf-header .pf-header__shell-glow{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

html body .pf-header .pf-header__lux-frame{
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 40px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

html body .pf-header .pf-header__lux-frame::before{
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: -1px !important;
    padding: 0 !important;
    border-radius: 40px !important;
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.18),
        inset 0 1px 0 rgba(122, 229, 255, 0.20) !important;
    opacity: 1 !important;
}

html body .pf-header .pf-header__lux-frame::after{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

@media (max-width: 1024px){
    html body .pf-header{
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    html body .pf-header .pf-header__nav,
    html body .pf-header .nav-container.pf-header__nav,
    html body header.pf-header .pf-header__nav{
        max-width: 100% !important;
        border-radius: 30px !important;
    }

    html body .pf-header .pf-header__lux-frame,
    html body .pf-header .pf-header__lux-frame::before{
        border-radius: 30px !important;
    }
}


/* === PATCH 2026-06-19: header button frame matches footer frame ===
   Zahtev: okvir oko dugmica u headeru da bude odradjen kao footer okvir:
   svetlo plava ivica, providna unutrasnjost i isti meki plavi sjaj. */
html body .pf-header .pf-header__center-shell,
html body header.pf-header .pf-header__center-shell,
html body .pf-header__nav .pf-header__center-shell{
    position: relative !important;
    isolation: isolate !important;
    padding: 6px !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 22px rgba(84, 196, 255, 0.26),
        0 0 40px rgba(45, 140, 255, 0.16),
        inset 0 1px 0 rgba(122, 229, 255, 0.18) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
}

html body .pf-header .pf-header__center-shell::before,
html body .pf-header .pf-header__center-shell::after,
html body header.pf-header .pf-header__center-shell::before,
html body header.pf-header .pf-header__center-shell::after{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

html body .pf-header .pf-header__center-topline,
html body .pf-header .pf-header__center-glow,
html body header.pf-header .pf-header__center-topline,
html body header.pf-header .pf-header__center-glow{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

html body .pf-header .pf-header__center-frame,
html body header.pf-header .pf-header__center-frame{
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border: 1px solid rgba(122, 229, 255, 0.34) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.12),
        inset 0 0 18px rgba(84, 196, 255, 0.05) !important;
    opacity: 1 !important;
}

html body .pf-header .pf-header__menu,
html body header.pf-header .pf-header__menu,
html body .pf-header .pf-header__item,
html body .pf-header .pf-header__item--services{
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body .pf-header .pf-header__center-shell:hover,
html body header.pf-header .pf-header__center-shell:hover{
    border-color: rgba(155, 238, 255, 1) !important;
    box-shadow:
        0 0 0 1px rgba(155, 238, 255, 0.26),
        0 0 28px rgba(84, 196, 255, 0.34),
        0 0 50px rgba(45, 140, 255, 0.20),
        inset 0 1px 0 rgba(155, 238, 255, 0.26),
        inset 0 0 0 1px rgba(84, 196, 255, 0.10) !important;
}

@media (max-width: 1024px){
    html body .pf-header .pf-header__center-shell,
    html body header.pf-header .pf-header__center-shell{
        border-radius: 22px !important;
        border: 1.5px solid rgba(122, 229, 255, 0.88) !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
}

/* === PATCH 2026-06-19: services dropdown frames match transparent footer/header frames ===
   Zahtev: kada se klikne Usluge i otvori padajuci meni, svi okviri u podmeniju
   dobijaju isti stil kao footer/header: svetlo plava ivica, providna unutrasnjost,
   bez tamnog/plavog fill sloja koji pravi tesku pozadinu. */
html body #servicesDropdownMenu.pf-header__dropdown,
html body #servicesDropdownMenu.pf-header__dropdown--holo,
html body .pf-header__item--services-3d #servicesDropdownMenu.pf-header__dropdown--holo{
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    border-radius: 36px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.18),
        0 34px 72px rgba(1, 7, 20, 0.42),
        inset 0 1px 0 rgba(122, 229, 255, 0.20) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body #servicesDropdownMenu.pf-header__dropdown::before,
html body #servicesDropdownMenu.pf-header__dropdown--holo::before{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

html body #servicesDropdownMenu.pf-header__dropdown::after,
html body #servicesDropdownMenu.pf-header__dropdown--holo::after{
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(122, 229, 255, 0.34) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.12),
        inset 0 0 18px rgba(84, 196, 255, 0.05) !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-header-card,
html body #servicesDropdownMenu .pf-header__dropdown-panel,
html body #servicesDropdownMenu .pf-header__dropdown-scroll-shell,
html body #servicesDropdownMenu .pf-header__dropdown-scroll,
html body #servicesDropdownMenu .pf-header__sublink,
html body #servicesDropdownMenu .pf-header__sublink--tile,
html body #servicesDropdownMenu .pf-header__sublink-icon,
html body #servicesDropdownMenu .pf-header__sublink-arrow{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-header-card,
html body #servicesDropdownMenu .pf-header__dropdown-panel,
html body #servicesDropdownMenu .pf-header__dropdown-scroll-shell,
html body #servicesDropdownMenu .pf-header__sublink,
html body #servicesDropdownMenu .pf-header__sublink--tile{
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 22px rgba(84, 196, 255, 0.26),
        0 0 40px rgba(45, 140, 255, 0.16),
        inset 0 1px 0 rgba(122, 229, 255, 0.18) !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-header-card,
html body #servicesDropdownMenu .pf-header__dropdown-panel{
    border-radius: 28px !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-scroll-shell{
    border-radius: 28px !important;
    padding: 8px !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-scroll{
    border: 0 !important;
    box-shadow: none !important;
}

html body #servicesDropdownMenu .pf-header__sublink,
html body #servicesDropdownMenu .pf-header__sublink--tile{
    border-radius: 24px !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-header-card::before,
html body #servicesDropdownMenu .pf-header__dropdown-header-card::after,
html body #servicesDropdownMenu .pf-header__dropdown-panel::before,
html body #servicesDropdownMenu .pf-header__dropdown-panel::after,
html body #servicesDropdownMenu .pf-header__dropdown-scroll-shell::before,
html body #servicesDropdownMenu .pf-header__dropdown-scroll-shell::after,
html body #servicesDropdownMenu .pf-header__sublink::before,
html body #servicesDropdownMenu .pf-header__sublink::after,
html body #servicesDropdownMenu .pf-header__sublink--tile::before,
html body #servicesDropdownMenu .pf-header__sublink--tile::after{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-header-card::before,
html body #servicesDropdownMenu .pf-header__dropdown-panel::before,
html body #servicesDropdownMenu .pf-header__sublink::before,
html body #servicesDropdownMenu .pf-header__sublink--tile::before{
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 7px !important;
    width: auto !important;
    height: auto !important;
    border-radius: inherit !important;
    border: 1px solid rgba(122, 229, 255, 0.24) !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-header-card::after,
html body #servicesDropdownMenu .pf-header__dropdown-panel::after,
html body #servicesDropdownMenu .pf-header__sublink::after,
html body #servicesDropdownMenu .pf-header__sublink--tile::after{
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: -1px !important;
    bottom: auto !important;
    width: auto !important;
    height: 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
        rgba(84, 196, 255, 0),
        rgba(122, 229, 255, 0.58) 36%,
        rgba(84, 196, 255, 0.42) 62%,
        rgba(84, 196, 255, 0)) !important;
    box-shadow: none !important;
    filter: blur(4px) !important;
    opacity: 0.78 !important;
    pointer-events: none !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-header-card > *,
html body #servicesDropdownMenu .pf-header__dropdown-panel > *,
html body #servicesDropdownMenu .pf-header__sublink > *,
html body #servicesDropdownMenu .pf-header__sublink--tile > *{
    position: relative !important;
    z-index: 2 !important;
}

html body #servicesDropdownMenu .pf-header__sublink-icon,
html body #servicesDropdownMenu .pf-header__sublink-arrow{
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.16),
        0 0 18px rgba(84, 196, 255, 0.22),
        inset 0 1px 0 rgba(122, 229, 255, 0.16) !important;
}

html body #servicesDropdownMenu .pf-header__sublink:hover,
html body #servicesDropdownMenu .pf-header__sublink:focus-visible,
html body #servicesDropdownMenu .pf-header__sublink--tile:hover,
html body #servicesDropdownMenu .pf-header__sublink--tile:focus-visible{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(155, 238, 255, 1) !important;
    box-shadow:
        0 0 0 1px rgba(155, 238, 255, 0.26),
        0 0 28px rgba(84, 196, 255, 0.34),
        0 0 50px rgba(45, 140, 255, 0.20),
        inset 0 1px 0 rgba(155, 238, 255, 0.26),
        inset 0 0 0 1px rgba(84, 196, 255, 0.10) !important;
}

@media (max-width: 1024px){
    html body #servicesDropdownMenu.pf-header__dropdown,
    html body #servicesDropdownMenu.pf-header__dropdown--holo{
        border-radius: 26px !important;
    }

    html body #servicesDropdownMenu.pf-header__dropdown::after,
    html body #servicesDropdownMenu.pf-header__dropdown--holo::after{
        inset: 7px !important;
        border-radius: 20px !important;
    }

    html body #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body #servicesDropdownMenu .pf-header__dropdown-panel,
    html body #servicesDropdownMenu .pf-header__dropdown-scroll-shell{
        border-radius: 22px !important;
    }

    html body #servicesDropdownMenu .pf-header__sublink,
    html body #servicesDropdownMenu .pf-header__sublink--tile{
        border-radius: 20px !important;
    }
}

/* === PATCH 2026-06-19: FINAL real services dropdown frame match ===
   Usluge dropdown mora da izgleda kao okvir oko dugmica u headeru:
   svetlo plava ivica, providna unutrasnjost, bez starog plavog/tamnog fill-a. */
html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services > #servicesDropdownMenu.pf-header__dropdown,
html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services > #servicesDropdownMenu.pf-header__dropdown--holo,
html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown,
html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown--holo{
    position: absolute !important;
    isolation: isolate !important;
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    border-radius: 24px !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 22px rgba(84, 196, 255, 0.26),
        0 0 40px rgba(45, 140, 255, 0.16),
        0 34px 72px rgba(1, 7, 20, 0.38),
        inset 0 1px 0 rgba(122, 229, 255, 0.18) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu.pf-header__dropdown::before,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu.pf-header__dropdown::after,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu.pf-header__dropdown--holo::before,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu.pf-header__dropdown--holo::after{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header-card,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-panel,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll-shell,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink-icon,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink-arrow,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__services-scrollbar,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__services-scrollbar-thumb{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header-card,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-panel,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll-shell,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile{
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 22px rgba(84, 196, 255, 0.26),
        0 0 40px rgba(45, 140, 255, 0.16),
        inset 0 1px 0 rgba(122, 229, 255, 0.18) !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header-card,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-panel,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll-shell{
    border-radius: 24px !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll{
    border: 0 !important;
    box-shadow: none !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile{
    border-radius: 18px !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header-card::before,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header-card::after,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-panel::before,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-panel::after,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll-shell::before,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll-shell::after,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink::before,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink::after,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile::before,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile::after{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 0 !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header-card > *,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-panel > *,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink > *,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile > *{
    position: relative !important;
    z-index: 2 !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink-icon,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink-arrow,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__services-scrollbar,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__services-scrollbar-thumb{
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.16),
        0 0 18px rgba(84, 196, 255, 0.22),
        inset 0 1px 0 rgba(122, 229, 255, 0.16) !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink:hover,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink:focus-visible,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile:hover,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile:focus-visible{
    border-color: rgba(155, 238, 255, 1) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1px rgba(155, 238, 255, 0.26),
        0 0 28px rgba(84, 196, 255, 0.34),
        0 0 50px rgba(45, 140, 255, 0.20),
        inset 0 1px 0 rgba(155, 238, 255, 0.26),
        inset 0 0 0 1px rgba(84, 196, 255, 0.10) !important;
}

@media (max-width: 1024px){
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu.pf-header__dropdown--holo{
        border-radius: 22px !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-panel,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll-shell{
        border-radius: 20px !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile{
        border-radius: 18px !important;
    }
}

/* === PATCH 2026-06-19: FINAL solid inside Services dropdown ===
   Okvir padajuceg menija ostaje kao header/footer okvir, ali unutrasnjost
   vise nije providna: glavni dropdown, opisni panel, lista i dugmad dobijaju
   tamnu plavo-crnu pozadinu radi bolje citljivosti. */
html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services > #servicesDropdownMenu.pf-header__dropdown,
html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services > #servicesDropdownMenu.pf-header__dropdown--holo,
html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown,
html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown--holo{
    background: linear-gradient(180deg, rgba(5, 10, 24, 0.98) 0%, rgba(3, 7, 18, 0.98) 100%) !important;
    background-color: rgba(4, 8, 20, 0.98) !important;
    background-image: linear-gradient(180deg, rgba(5, 10, 24, 0.98) 0%, rgba(3, 7, 18, 0.98) 100%) !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header-card,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-panel,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll-shell{
    background: linear-gradient(180deg, rgba(6, 14, 32, 0.98) 0%, rgba(3, 8, 20, 0.98) 100%) !important;
    background-color: rgba(5, 11, 26, 0.98) !important;
    background-image: linear-gradient(180deg, rgba(6, 14, 32, 0.98) 0%, rgba(3, 8, 20, 0.98) 100%) !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll{
    background: rgba(3, 8, 20, 0.98) !important;
    background-color: rgba(3, 8, 20, 0.98) !important;
    background-image: none !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile{
    background: linear-gradient(180deg, rgba(7, 18, 40, 0.98) 0%, rgba(4, 10, 24, 0.98) 100%) !important;
    background-color: rgba(5, 12, 28, 0.98) !important;
    background-image: linear-gradient(180deg, rgba(7, 18, 40, 0.98) 0%, rgba(4, 10, 24, 0.98) 100%) !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink-icon,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink-arrow,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__services-scrollbar,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__services-scrollbar-thumb{
    background: rgba(5, 12, 28, 0.98) !important;
    background-color: rgba(5, 12, 28, 0.98) !important;
    background-image: none !important;
}

html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink:hover,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink:focus-visible,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile:hover,
html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile:focus-visible{
    background: linear-gradient(180deg, rgba(10, 28, 60, 0.99) 0%, rgba(5, 13, 31, 0.98) 100%) !important;
    background-color: rgba(7, 18, 40, 0.98) !important;
    background-image: linear-gradient(180deg, rgba(10, 28, 60, 0.99) 0%, rgba(5, 13, 31, 0.98) 100%) !important;
}

/* === PATCH 2026-06-19: header button frame gets solid dark fill ===
   Zahtev: deo u headeru gde su dugmici vise ne sme da bude providan.
   Ostaje isti svetlo plavi okvir, ali unutrasnjost okvira dobija tamnu popunu.
   Ovo menja samo okvir koji obuhvata grupu dugmica. */
html body .pf-header .pf-header__center-shell,
html body header#header.pf-header .pf-header__center-shell,
html body .pf-header__nav .pf-header__center-shell{
    background: linear-gradient(180deg, rgba(8, 18, 42, 0.96) 0%, rgba(4, 10, 24, 0.97) 100%) !important;
    background-color: rgba(5, 12, 28, 0.97) !important;
    background-image: linear-gradient(180deg, rgba(8, 18, 42, 0.96) 0%, rgba(4, 10, 24, 0.97) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 22px rgba(84, 196, 255, 0.26),
        0 0 40px rgba(45, 140, 255, 0.16),
        0 18px 42px rgba(1, 7, 20, 0.30),
        inset 0 1px 0 rgba(122, 229, 255, 0.18) !important;
}

html body .pf-header .pf-header__center-shell:hover,
html body header#header.pf-header .pf-header__center-shell:hover,
html body .pf-header .pf-header__center-shell:focus-within{
    background: linear-gradient(180deg, rgba(10, 24, 56, 0.97) 0%, rgba(5, 12, 28, 0.98) 100%) !important;
    background-color: rgba(7, 16, 36, 0.98) !important;
    background-image: linear-gradient(180deg, rgba(10, 24, 56, 0.97) 0%, rgba(5, 12, 28, 0.98) 100%) !important;
}

html body .pf-header .pf-header__center-frame,
html body header#header.pf-header .pf-header__center-frame{
    background: linear-gradient(180deg, rgba(9, 22, 50, 0.22) 0%, rgba(4, 10, 24, 0.10) 100%) !important;
    background-color: rgba(6, 14, 32, 0.12) !important;
    background-image: linear-gradient(180deg, rgba(9, 22, 50, 0.22) 0%, rgba(4, 10, 24, 0.10) 100%) !important;
}

@media (max-width: 1024px){
    html body .pf-header .pf-header__center-shell,
    html body header#header.pf-header .pf-header__center-shell,
    html body .pf-header__nav .pf-header__center-shell{
        background: linear-gradient(180deg, rgba(8, 18, 42, 0.97) 0%, rgba(4, 10, 24, 0.98) 100%) !important;
        background-color: rgba(5, 12, 28, 0.98) !important;
        background-image: linear-gradient(180deg, rgba(8, 18, 42, 0.97) 0%, rgba(4, 10, 24, 0.98) 100%) !important;
    }
}


/* === PATCH 2026-06-19: transparent first large page frames ===
   Zahtev: svi prvi veliki okviri na stranama da budu kao header:
   svetlo plavi okvir ostaje, ali unutrasnja pozadina je providna.
   Namerno se ne dira vecina malih unutrasnjih kartica. */
html body .pf-about-section .pf-about-contact-panel,
html body .pf-about-section .pf-about-contact-face,
html body .pf-about-section .pf-about-contact-flip,
html body .pf-about-section .pf-about-contact-flip-inner,
html body .pf-about-section .pf-about-contact-grid,
html body .pf-about-section .pf-about-stack{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Glavni spoljni panel koji nosi celu stranu/sekciju. */
html body .pf-about-section .pf-about-contact-panel{
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.28),
        0 0 46px rgba(45, 140, 255, 0.16),
        0 34px 72px rgba(1, 7, 20, 0.34),
        inset 0 1px 0 rgba(122, 229, 255, 0.16) !important;
}

/* Uklanja plavu/tamnu popunu iz velikog spoljnog panela, ali ostavlja okvir. */
html body .pf-about-section .pf-about-contact-panel::before{
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: 30px !important;
    pointer-events: none !important;
    border: 1px solid rgba(122, 229, 255, 0.28) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.10),
        inset 0 0 18px rgba(84, 196, 255, 0.04) !important;
    opacity: 1 !important;
}

html body .pf-about-section .pf-about-contact-panel::after{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

/* Scroll unutra ne sme da pravi dodatnu obojenu pozadinu preko providnog velikog okvira. */
html body .pf-about-section .pf-about-contact-scroll{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Prva velika naslovna kartica na svakoj strani dobija isti princip kao header:
   okvir ostaje, unutrasnjost providna. Male kartice ispod se ne diraju. */
html body .pf-about-section .pf-about-hero-copy.pf-demo-home-title-card,
html body .pf-about-section .pf-about-hero-copy.pf-home-title-card,
html body .pf-about-section .pf-demo-home-title-card--hero,
html body .pf-about-section .pf-home-title-frame-section .pf-home-title-card{
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.20),
        0 0 22px rgba(84, 196, 255, 0.24),
        0 0 40px rgba(45, 140, 255, 0.14),
        0 22px 44px rgba(1, 7, 20, 0.28),
        inset 0 1px 0 rgba(122, 229, 255, 0.14) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Gasi fill/shine slojeve samo na prvoj velikoj naslovnoj kartici. */
html body .pf-about-section .pf-about-hero-copy.pf-demo-home-title-card::before,
html body .pf-about-section .pf-about-hero-copy.pf-demo-home-title-card::after,
html body .pf-about-section .pf-about-hero-copy.pf-home-title-card::before,
html body .pf-about-section .pf-about-hero-copy.pf-home-title-card::after,
html body .pf-about-section .pf-demo-home-title-card--hero::before,
html body .pf-about-section .pf-demo-home-title-card--hero::after,
html body .pf-about-section .pf-home-title-frame-section .pf-home-title-card::before,
html body .pf-about-section .pf-home-title-frame-section .pf-home-title-card::after{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

/* Pomocne linije i glow oko velikog okvira ostaju svetlo plave, ali bez pune pozadine. */
html body .pf-about-section .pf-about-shell-glow{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(122, 229, 255, 0.18) !important;
    box-shadow: inset 0 0 24px rgba(84, 196, 255, 0.06) !important;
}

html body .pf-about-section .pf-about-shell-topline{
    background: linear-gradient(90deg, rgba(122,229,255,0), rgba(122,229,255,0.96), rgba(122,229,255,0)) !important;
    box-shadow: 0 0 28px rgba(84, 196, 255, 0.42) !important;
}

/* === PATCH 2026-06-19: same title/subtitle background on all page title blocks ===
   Zahtev: svi veliki naslovni blokovi na svim stranama da imaju istu pozadinu
   kao glavni naslov "Profesionalan sajt...". Ne menja male unutrasnje kartice
   sa ikonama/uslugama/statistikama; cilja samo naslov + podnaslov okvire. */
html body .pf-about-section .pf-about-hero-copy.pf-demo-home-title-card,
html body .pf-about-section .pf-about-hero-copy.pf-home-title-card,
html body .pf-about-section .pf-about-section-copy.pf-demo-home-title-card,
html body .pf-about-section .pf-about-section-copy.pf-home-title-card,
html body .pf-about-section .pf-demo-probe-direct-header.pf-demo-home-title-card,
html body .pf-about-section .pf-demo-home-block-header.pf-demo-home-title-card,
html body .pf-about-section .pf-demo-home-title-card--hero,
html body .pf-about-section .pf-home-title-card:not(.pf-info-icon-card):not(.pf-about-stat-card){
    position: relative !important;
    isolation: isolate !important;
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    border-radius: 30px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.20),
        0 0 22px rgba(84, 196, 255, 0.24),
        0 0 40px rgba(45, 140, 255, 0.14),
        0 22px 44px rgba(1, 7, 20, 0.28),
        inset 0 1px 0 rgba(122, 229, 255, 0.14) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
}

html body .pf-about-section .pf-about-hero-copy.pf-demo-home-title-card::before,
html body .pf-about-section .pf-about-hero-copy.pf-demo-home-title-card::after,
html body .pf-about-section .pf-about-hero-copy.pf-home-title-card::before,
html body .pf-about-section .pf-about-hero-copy.pf-home-title-card::after,
html body .pf-about-section .pf-about-section-copy.pf-demo-home-title-card::before,
html body .pf-about-section .pf-about-section-copy.pf-demo-home-title-card::after,
html body .pf-about-section .pf-about-section-copy.pf-home-title-card::before,
html body .pf-about-section .pf-about-section-copy.pf-home-title-card::after,
html body .pf-about-section .pf-demo-probe-direct-header.pf-demo-home-title-card::before,
html body .pf-about-section .pf-demo-probe-direct-header.pf-demo-home-title-card::after,
html body .pf-about-section .pf-demo-home-block-header.pf-demo-home-title-card::before,
html body .pf-about-section .pf-demo-home-block-header.pf-demo-home-title-card::after,
html body .pf-about-section .pf-demo-home-title-card--hero::before,
html body .pf-about-section .pf-demo-home-title-card--hero::after,
html body .pf-about-section .pf-home-title-card:not(.pf-info-icon-card):not(.pf-about-stat-card)::before,
html body .pf-about-section .pf-home-title-card:not(.pf-info-icon-card):not(.pf-about-stat-card)::after{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-title,
html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-back-title,
html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-title,
html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-title,
html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-title,
html body .pf-about-section .pf-home-title-card .pf-about-contact-title,
html body .pf-about-section .pf-home-title-card .pf-about-contact-back-title,
html body .pf-about-section .pf-home-title-card .pf-demo-probe-title,
html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-title,
html body .pf-about-section .pf-home-title-card .pf-about-portal-title{
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-subtitle,
html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-subtitle,
html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-text,
html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-subtitle,
html body .pf-about-section .pf-demo-home-title-card .pf-demo-home-subtitle,
html body .pf-about-section .pf-home-title-card .pf-about-contact-subtitle,
html body .pf-about-section .pf-home-title-card .pf-demo-probe-subtitle,
html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-text,
html body .pf-about-section .pf-home-title-card .pf-about-portal-subtitle,
html body .pf-about-section .pf-home-title-card .pf-demo-home-subtitle,
html body .pf-about-section .pf-home-title-card .pf-about-portal-text{
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

@media (max-width: 680px){
    html body .pf-about-section .pf-about-hero-copy.pf-demo-home-title-card,
    html body .pf-about-section .pf-about-section-copy.pf-demo-home-title-card,
    html body .pf-about-section .pf-demo-probe-direct-header.pf-demo-home-title-card,
    html body .pf-about-section .pf-demo-home-block-header.pf-demo-home-title-card,
    html body .pf-about-section .pf-home-title-card:not(.pf-info-icon-card):not(.pf-about-stat-card){
        border-radius: 24px !important;
    }
}


/* === PATCH 2026-06-19: content cards transparent like title/subtitle blocks ===
   Zahtev: kartice da budu providne kao naslov i podnaslov.
   Ovaj zavrsni override zadrzava svetlo plavi okvir i sjaj, ali uklanja
   tesku unutrasnju plavu/tamnu pozadinu sa glavnih sadrzajnih kartica. */
html body .pf-about-section .pf-about-feature-card,
html body .pf-about-section .pf-about-contact-list-card,
html body .pf-about-section .pf-about-skill-card,
html body .pf-about-section .pf-about-stat-card,
html body .pf-about-section .pf-about-testimonial-card,
html body .pf-about-section .pf-number-sequence-card,
html body .pf-about-section .pf-info-icon-card,
html body .pf-about-section .pf-metric-value-card{
    position: relative !important;
    isolation: isolate !important;
    border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.20),
        0 0 22px rgba(84, 196, 255, 0.24),
        0 0 40px rgba(45, 140, 255, 0.14),
        0 22px 44px rgba(1, 7, 20, 0.22),
        inset 0 1px 0 rgba(122, 229, 255, 0.14) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body .pf-about-section .pf-about-feature-card::before,
html body .pf-about-section .pf-about-feature-card::after,
html body .pf-about-section .pf-about-contact-list-card::before,
html body .pf-about-section .pf-about-contact-list-card::after,
html body .pf-about-section .pf-about-skill-card::before,
html body .pf-about-section .pf-about-skill-card::after,
html body .pf-about-section .pf-about-stat-card::before,
html body .pf-about-section .pf-about-stat-card::after,
html body .pf-about-section .pf-about-testimonial-card::before,
html body .pf-about-section .pf-about-testimonial-card::after,
html body .pf-about-section .pf-number-sequence-card::before,
html body .pf-about-section .pf-number-sequence-card::after,
html body .pf-about-section .pf-info-icon-card::before,
html body .pf-about-section .pf-info-icon-card::after,
html body .pf-about-section .pf-metric-value-card::before,
html body .pf-about-section .pf-metric-value-card::after{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

html body .pf-about-section .pf-about-feature-card:hover,
html body .pf-about-section .pf-about-feature-card:focus-within,
html body .pf-about-section .pf-about-contact-list-card:hover,
html body .pf-about-section .pf-about-contact-list-card:focus-within,
html body .pf-about-section .pf-about-skill-card:hover,
html body .pf-about-section .pf-about-skill-card:focus-within,
html body .pf-about-section .pf-about-stat-card:hover,
html body .pf-about-section .pf-about-stat-card:focus-within,
html body .pf-about-section .pf-about-testimonial-card:hover,
html body .pf-about-section .pf-about-testimonial-card:focus-within,
html body .pf-about-section .pf-number-sequence-card:hover,
html body .pf-about-section .pf-number-sequence-card:focus-within,
html body .pf-about-section .pf-info-icon-card:hover,
html body .pf-about-section .pf-info-icon-card:focus-within,
html body .pf-about-section .pf-metric-value-card:hover,
html body .pf-about-section .pf-metric-value-card:focus-within{
    border-color: rgba(155, 238, 255, 1) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1px rgba(155, 238, 255, 0.26),
        0 0 28px rgba(84, 196, 255, 0.30),
        0 0 52px rgba(45, 140, 255, 0.18),
        0 24px 48px rgba(1, 7, 20, 0.24),
        inset 0 1px 0 rgba(155, 238, 255, 0.22) !important;
}

/* Unutrasnji mali bedzevi/brojke ostaju citljivi, ali bez pune plave kutije. */
html body .pf-about-section .pf-about-sequence-number,
html body .pf-about-section .pf-about-skill-icon,
html body .pf-about-section .pf-about-feature-icon{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(122, 229, 255, 0.76) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.16),
        0 0 16px rgba(84, 196, 255, 0.20),
        inset 0 1px 0 rgba(122, 229, 255, 0.14) !important;
}

@media (max-width: 680px){
    html body .pf-about-section .pf-about-feature-card,
    html body .pf-about-section .pf-about-contact-list-card,
    html body .pf-about-section .pf-about-skill-card,
    html body .pf-about-section .pf-about-stat-card,
    html body .pf-about-section .pf-about-testimonial-card,
    html body .pf-about-section .pf-number-sequence-card,
    html body .pf-about-section .pf-info-icon-card,
    html body .pf-about-section .pf-metric-value-card{
        border-radius: 24px !important;
    }
}

/* === PATCH 2026-06-19: restore effects on approved home cards ===
   Zahtev: vratiti efekte na kartice iz bloka "Profesionalan sajt...",
   ukljucujuci naslovne kartice, male prednosti, ponudu i stat kartice.
   Veliki spoljasnji okvir ostaje providan; efekti se vracaju samo na unutrasnje kartice. */
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card],
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-inner-returning,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card:hover,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card.is-tilting,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card.is-inner-returning,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card:hover,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card.is-tilting,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card.is-inner-returning,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card:hover,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card.is-tilting,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card.is-inner-returning{
    --pf-about-inner-rx: var(--pf-about-js-inner-rx, 0deg) !important;
    --pf-about-inner-ry: var(--pf-about-js-inner-ry, 0deg) !important;
    --pf-about-inner-tz: var(--pf-about-js-inner-tz, 0px) !important;
    --pf-about-inner-shift-y: var(--pf-about-js-inner-shift-y, 0px) !important;
    --pf-about-inner-pointer-x: var(--pf-about-js-inner-pointer-x, 50%) !important;
    --pf-about-inner-pointer-y: var(--pf-about-js-inner-pointer-y, 18%) !important;
    --pf-about-inner-shine-x: var(--pf-about-js-inner-shine-x, 0px) !important;
    --pf-about-inner-glow: var(--pf-about-js-inner-glow, 0) !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    transform-style: preserve-3d !important;
    transform:
        perspective(1850px)
        translate3d(0, var(--pf-about-inner-shift-y), var(--pf-about-inner-tz))
        rotateX(var(--pf-about-inner-rx))
        rotateY(var(--pf-about-inner-ry))
        scale(calc(1 + (0.012 * var(--pf-about-inner-glow)))) !important;
    transform-origin: 50% 50% !important;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        filter 180ms ease,
        background 180ms ease !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    border: 1.5px solid rgba(122, 229, 255, 0.94) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(122, 229, 255, 0.24), transparent 34%),
        radial-gradient(circle at 86% 0%, rgba(45, 140, 255, 0.22), transparent 32%),
        linear-gradient(180deg, rgba(35, 154, 255, 0.28) 0%, rgba(11, 70, 170, 0.46) 42%, rgba(2, 15, 44, 0.94) 100%) !important;
    background-color: rgba(3, 16, 48, 0.92) !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.22),
        0 0 24px rgba(84, 196, 255, 0.30),
        0 0 44px rgba(45, 140, 255, 0.20),
        0 22px 48px rgba(1, 11, 31, 0.52),
        inset 0 1px 0 rgba(122, 229, 255, 0.30),
        inset 0 0 0 1px rgba(84, 196, 255, 0.12),
        inset 0 -1px 0 rgba(45, 140, 255, 0.24) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:focus-within,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card:hover,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card:focus-within,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card.is-tilting,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card:hover,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card:focus-within,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card.is-tilting,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card:hover,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card:focus-within,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card.is-tilting{
    z-index: 12 !important;
    will-change: transform !important;
    border-color: rgba(166, 244, 255, 1) !important;
    filter: saturate(1.08) brightness(1.035) !important;
    box-shadow:
        0 0 0 1px rgba(166, 244, 255, 0.36),
        0 0 calc(30px + (18px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.40),
        0 0 calc(54px + (20px * var(--pf-about-inner-glow))) rgba(45, 140, 255, 0.26),
        0 28px 58px rgba(1, 11, 31, 0.56),
        inset 0 1px 0 rgba(166, 244, 255, 0.42),
        inset 0 -1px 0 rgba(84, 196, 255, 0.28) !important;
}

html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]::before,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover::before,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting::before,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-inner-returning::before,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card::before,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card:hover::before,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card.is-tilting::before,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card.is-inner-returning::before,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card::before,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card:hover::before,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card.is-tilting::before,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card.is-inner-returning::before,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card::before,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card:hover::before,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card.is-tilting::before,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card.is-inner-returning::before{
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 7px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(122, 229, 255, 0.34) !important;
    background:
        linear-gradient(180deg, rgba(122, 229, 255, 0.16), rgba(84, 196, 255, 0.05) 28%, transparent 68%),
        radial-gradient(circle at var(--pf-about-inner-pointer-x) var(--pf-about-inner-pointer-y), rgba(166, 244, 255, calc(0.14 + (0.18 * var(--pf-about-inner-glow)))), rgba(84, 196, 255, calc(0.04 + (0.08 * var(--pf-about-inner-glow)))) 22%, transparent 52%) !important;
    box-shadow:
        inset 0 1px 0 rgba(166, 244, 255, 0.18),
        inset 0 0 calc(22px + (18px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.10),
        0 0 calc(16px + (14px * var(--pf-about-inner-glow))) rgba(84, 196, 255, 0.10) !important;
    opacity: calc(0.90 + (0.10 * var(--pf-about-inner-glow))) !important;
    filter: none !important;
    pointer-events: none !important;
    transform: translate3d(0, 0, 18px) !important;
    z-index: 1 !important;
}

html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]::after,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover::after,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting::after,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-inner-returning::after,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card::after,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card:hover::after,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card.is-tilting::after,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card.is-inner-returning::after,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card::after,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card:hover::after,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card.is-tilting::after,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card.is-inner-returning::after,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card::after,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card:hover::after,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card.is-tilting::after,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card.is-inner-returning::after{
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: -2px !important;
    bottom: auto !important;
    height: 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
        rgba(84, 196, 255, 0),
        rgba(122, 229, 255, 0.66) 34%,
        rgba(84, 196, 255, 0.54) 56%,
        rgba(45, 140, 255, 0.36) 72%,
        rgba(84, 196, 255, 0)) !important;
    opacity: calc(0.76 + (0.18 * var(--pf-about-inner-glow))) !important;
    filter: blur(calc(3.4px + (1.6px * var(--pf-about-inner-glow)))) drop-shadow(0 0 16px rgba(84, 196, 255, 0.22)) !important;
    pointer-events: none !important;
    transform: translate3d(var(--pf-about-inner-shine-x), 0, 24px) !important;
    z-index: 2 !important;
}

html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card] > *,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card > *,
html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-card > *,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-card > *{
    position: relative !important;
    z-index: 3 !important;
    transform: translate3d(0, 0, calc(8px + (10px * var(--pf-about-inner-glow)))) !important;
    transition: transform 180ms ease, text-shadow 180ms ease !important;
}

html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover h1,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover h2,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover h3,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting h1,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting h2,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting h3{
    text-shadow:
        0 0 26px rgba(122, 229, 255, 0.26),
        0 10px 28px rgba(0, 5, 18, 0.38) !important;
}

html body .pf-about-section.pf-home-title-frame-section .pf-about-feature-icon,
html body .pf-about-section.pf-home-title-frame-section .pf-about-stat-icon,
html body .pf-about-section.pf-home-title-frame-section .pf-about-contact-list-card > span{
    background:
        radial-gradient(circle at 30% 18%, rgba(122, 229, 255, 0.34), transparent 46%),
        linear-gradient(135deg, rgba(41, 151, 255, 0.44), rgba(5, 44, 118, 0.86)) !important;
    background-color: rgba(7, 36, 98, 0.88) !important;
    border-color: rgba(122, 229, 255, 0.72) !important;
    box-shadow:
        inset 0 1px 0 rgba(122, 229, 255, 0.26),
        0 0 18px rgba(84, 196, 255, 0.22),
        0 14px 24px rgba(8, 50, 128, 0.24) !important;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse){
    html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card],
    html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover,
    html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting,
    html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-inner-returning{
        --pf-about-inner-rx: 0deg !important;
        --pf-about-inner-ry: 0deg !important;
        --pf-about-inner-tz: 0px !important;
        --pf-about-inner-shift-y: 0px !important;
        --pf-about-inner-glow: 0 !important;
        transform: none !important;
        will-change: auto !important;
    }

    html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card] > *,
    html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover > *,
    html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting > *,
    html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-inner-returning > *{
        transform: none !important;
    }
}

/* === PATCH 2026-06-19: remove blue hover fill from title/subtitle cards ===
   Zahtev: kada se predje misem preko kartica naslova i podnaslova,
   da se kartica ne oboji plavo. Ostaju svetlo plavi okvir, uredan sjaj
   i citljiv tekst, ali se gasi hover fill/shine sloj na naslovnim blokovima. */
html body .pf-about-section .pf-about-hero-copy.pf-demo-home-title-card,
html body .pf-about-section .pf-about-hero-copy.pf-home-title-card,
html body .pf-about-section .pf-about-section-copy.pf-demo-home-title-card,
html body .pf-about-section .pf-about-section-copy.pf-home-title-card,
html body .pf-about-section .pf-demo-probe-direct-header.pf-demo-home-title-card,
html body .pf-about-section .pf-demo-home-block-header.pf-demo-home-title-card,
html body .pf-about-section .pf-demo-home-title-card--hero,
html body .pf-about-section .pf-home-title-card:not(.pf-info-icon-card):not(.pf-about-stat-card),
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card.is-tilting,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card.is-inner-returning{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(122, 229, 255, 0.96) !important;
    filter: none !important;
    box-shadow:
        0 0 0 1px rgba(122, 229, 255, 0.20),
        0 0 22px rgba(84, 196, 255, 0.22),
        0 0 40px rgba(45, 140, 255, 0.13),
        0 22px 44px rgba(1, 7, 20, 0.24),
        inset 0 1px 0 rgba(122, 229, 255, 0.14) !important;
}

html body .pf-about-section .pf-about-hero-copy.pf-demo-home-title-card:hover,
html body .pf-about-section .pf-about-hero-copy.pf-demo-home-title-card:focus-within,
html body .pf-about-section .pf-about-hero-copy.pf-home-title-card:hover,
html body .pf-about-section .pf-about-hero-copy.pf-home-title-card:focus-within,
html body .pf-about-section .pf-about-section-copy.pf-demo-home-title-card:hover,
html body .pf-about-section .pf-about-section-copy.pf-demo-home-title-card:focus-within,
html body .pf-about-section .pf-about-section-copy.pf-home-title-card:hover,
html body .pf-about-section .pf-about-section-copy.pf-home-title-card:focus-within,
html body .pf-about-section .pf-demo-probe-direct-header.pf-demo-home-title-card:hover,
html body .pf-about-section .pf-demo-probe-direct-header.pf-demo-home-title-card:focus-within,
html body .pf-about-section .pf-demo-home-block-header.pf-demo-home-title-card:hover,
html body .pf-about-section .pf-demo-home-block-header.pf-demo-home-title-card:focus-within,
html body .pf-about-section .pf-demo-home-title-card--hero:hover,
html body .pf-about-section .pf-demo-home-title-card--hero:focus-within,
html body .pf-about-section .pf-home-title-card:not(.pf-info-icon-card):not(.pf-about-stat-card):hover,
html body .pf-about-section .pf-home-title-card:not(.pf-info-icon-card):not(.pf-about-stat-card):focus-within,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card:hover,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card:focus-within,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card.is-tilting{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(155, 238, 255, 1) !important;
    filter: none !important;
    box-shadow:
        0 0 0 1px rgba(155, 238, 255, 0.24),
        0 0 24px rgba(84, 196, 255, 0.24),
        0 0 44px rgba(45, 140, 255, 0.14),
        0 22px 44px rgba(1, 7, 20, 0.24),
        inset 0 1px 0 rgba(155, 238, 255, 0.18) !important;
}

html body .pf-about-section .pf-about-hero-copy.pf-demo-home-title-card::before,
html body .pf-about-section .pf-about-hero-copy.pf-demo-home-title-card::after,
html body .pf-about-section .pf-about-hero-copy.pf-home-title-card::before,
html body .pf-about-section .pf-about-hero-copy.pf-home-title-card::after,
html body .pf-about-section .pf-about-section-copy.pf-demo-home-title-card::before,
html body .pf-about-section .pf-about-section-copy.pf-demo-home-title-card::after,
html body .pf-about-section .pf-about-section-copy.pf-home-title-card::before,
html body .pf-about-section .pf-about-section-copy.pf-home-title-card::after,
html body .pf-about-section .pf-demo-probe-direct-header.pf-demo-home-title-card::before,
html body .pf-about-section .pf-demo-probe-direct-header.pf-demo-home-title-card::after,
html body .pf-about-section .pf-demo-home-block-header.pf-demo-home-title-card::before,
html body .pf-about-section .pf-demo-home-block-header.pf-demo-home-title-card::after,
html body .pf-about-section .pf-demo-home-title-card--hero::before,
html body .pf-about-section .pf-demo-home-title-card--hero::after,
html body .pf-about-section .pf-home-title-card:not(.pf-info-icon-card):not(.pf-about-stat-card)::before,
html body .pf-about-section .pf-home-title-card:not(.pf-info-icon-card):not(.pf-about-stat-card)::after,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card::before,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card::after,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card:hover::before,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card:hover::after,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card.is-tilting::before,
html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card.is-tilting::after{
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
}


/* === PATCH 2026-06-20: bigger footer text + centered legal line ===
   Zahtev: footer tekst da bude veci u istom Rivontiq stilu, a linija
   "© 2026 Rivontiq. Sva prava zadržana." da stoji centrirano na sredini. */
html body .pf-footer-shell,
html body .pf-footer-shell--embedded,
html body .pf-demo-probe-footer .pf-footer-shell,
html body .pf-demo-probe-footer .pf-footer-shell--embedded{
    font-family: "Rajdhani", sans-serif !important;
}

html body .pf-footer-panel,
html body .pf-footer-panel--embedded,
html body .pf-demo-probe-footer .pf-footer-panel,
html body .pf-demo-probe-footer .pf-footer-panel--embedded{
    gap: clamp(22px, 2.3vw, 38px) !important;
}

html body .pf-footer-logo-text,
html body .pf-demo-probe-footer .pf-footer-logo-text{
    font-family: "Orbitron", sans-serif !important;
    font-size: clamp(1.46rem, 1.08rem + 1.05vw, 2.22rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0.17em !important;
}

html body .pf-footer-description,
html body .pf-demo-probe-footer .pf-footer-description{
    max-width: 44ch !important;
    font-size: clamp(1.08rem, 1rem + 0.24vw, 1.22rem) !important;
    line-height: 1.78 !important;
    color: rgba(244, 249, 255, 0.88) !important;
}

html body .pf-footer-section h4,
html body .pf-demo-probe-footer .pf-footer-section h4{
    font-family: "Orbitron", sans-serif !important;
    font-size: clamp(0.94rem, 0.86rem + 0.22vw, 1.08rem) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.17em !important;
}

html body .pf-footer-links a,
html body .pf-demo-probe-footer .pf-footer-links a{
    font-size: clamp(1.05rem, 0.98rem + 0.22vw, 1.18rem) !important;
    line-height: 1.62 !important;
    color: rgba(244, 249, 255, 0.86) !important;
}

html body .pf-footer-brand-badge,
html body .pf-demo-probe-footer .pf-footer-brand-badge{
    min-height: 42px !important;
    padding-inline: 30px 20px !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.23em !important;
}

html body .pf-footer-meta,
html body .pf-footer-meta:hover,
html body .pf-demo-probe-footer .pf-footer-meta,
html body .pf-demo-probe-footer .pf-footer-meta:hover{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 76px !important;
    padding: 20px 26px !important;
}

html body .pf-footer-legal,
html body .pf-demo-probe-footer .pf-footer-legal{
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-family: "Rajdhani", sans-serif !important;
    font-size: clamp(1.16rem, 1.02rem + 0.38vw, 1.34rem) !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
    letter-spacing: 0.035em !important;
    color: rgba(250, 253, 255, 0.96) !important;
    text-shadow: 0 0 18px rgba(84, 196, 255, 0.18) !important;
}

html body .pf-footer-signature,
html body .pf-demo-probe-footer .pf-footer-signature{
    display: none !important;
}

@media (max-width: 768px){
    html body .pf-footer-logo-text,
    html body .pf-demo-probe-footer .pf-footer-logo-text{
        font-size: clamp(1.22rem, 1rem + 1vw, 1.56rem) !important;
        letter-spacing: 0.13em !important;
    }

    html body .pf-footer-description,
    html body .pf-footer-links a,
    html body .pf-footer-legal,
    html body .pf-demo-probe-footer .pf-footer-description,
    html body .pf-demo-probe-footer .pf-footer-links a,
    html body .pf-demo-probe-footer .pf-footer-legal{
        font-size: 1.06rem !important;
    }

    html body .pf-footer-meta,
    html body .pf-demo-probe-footer .pf-footer-meta{
        align-items: center !important;
        border-radius: 24px !important;
    }
}

/* === PATCH 2026-06-20: ujednacena velicina teksta u Usluge dropdown meniju ===
   Zahtev: tekst u padajucem meniju za usluge treba da bude iste velicine.
   Menja se samo vizuelni tekst unutar #servicesDropdownMenu, bez promene ostatka sajta. */
html body #servicesDropdownMenu .pf-header__dropdown-eyebrow,
html body #servicesDropdownMenu .pf-header__dropdown-title,
html body #servicesDropdownMenu .pf-header__dropdown-subtitle,
html body #servicesDropdownMenu .pf-header__sublink-title,
html body #servicesDropdownMenu .pf-header__sublink-desc{
    font-size: clamp(1.04rem, 0.98rem + 0.20vw, 1.14rem) !important;
    line-height: 1.52 !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-eyebrow,
html body #servicesDropdownMenu .pf-header__dropdown-title,
html body #servicesDropdownMenu .pf-header__sublink-title{
    font-family: "Orbitron", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.045em !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-subtitle,
html body #servicesDropdownMenu .pf-header__sublink-desc{
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.015em !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-eyebrow{
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
}

html body #servicesDropdownMenu .pf-header__sublink-copy{
    gap: 7px !important;
}

html body #servicesDropdownMenu .pf-header__sublink,
html body #servicesDropdownMenu .pf-header__sublink--tile{
    min-height: 106px !important;
}

@media (max-width: 768px){
    html body #servicesDropdownMenu .pf-header__dropdown-eyebrow,
    html body #servicesDropdownMenu .pf-header__dropdown-title,
    html body #servicesDropdownMenu .pf-header__dropdown-subtitle,
    html body #servicesDropdownMenu .pf-header__sublink-title,
    html body #servicesDropdownMenu .pf-header__sublink-desc{
        font-size: 1rem !important;
        line-height: 1.48 !important;
    }

    html body #servicesDropdownMenu .pf-header__sublink,
    html body #servicesDropdownMenu .pf-header__sublink--tile{
        min-height: 98px !important;
    }
}


/* === PATCH 2026-06-20: mobile/tablet hamburger menu frame fix ===
   Problem: desktop Services dropdown/frame override stayed visible on tablet/mobile.
   Fix: below 1024px the main menu is hidden until hamburger gets .active,
   and the Services dropdown is hidden until #servicesMenuItem gets .is-open. */
@media (max-width: 1024px){
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu:not(.active){
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-8px) !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active{
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services:not(.is-open) > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services:not(.is-open) > #servicesDropdownMenu.pf-header__dropdown--holo,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu:not(.active) #servicesMenuItem.pf-header__item--services > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu:not(.active) #servicesMenuItem.pf-header__item--services > #servicesDropdownMenu.pf-header__dropdown--holo{
        display: none !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: min(760px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-height: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        overflow: hidden !important;
        transform: none !important;
        border-width: 0 !important;
        box-shadow: none !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown--holo{
        display: flex !important;
        position: static !important;
        flex-direction: column !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: min(760px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-height: none !important;
        margin: 8px auto 0 !important;
        padding: 8px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: hidden !important;
        transform: none !important;
        border-width: 1.5px !important;
        box-shadow:
            0 0 0 1px rgba(122, 229, 255, 0.20),
            0 0 22px rgba(84, 196, 255, 0.24),
            0 18px 36px rgba(1, 7, 20, 0.30),
            inset 0 1px 0 rgba(122, 229, 255, 0.16) !important;
    }
}

@media (max-width: 640px){
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown--holo{
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        margin-top: 8px !important;
    }
}

/* === PATCH 2026-06-20: TRUE mobile/tablet hamburger visibility fix ===
   Problem: a later desktop frame override kept the header menu frame visible on
   tablet/mobile even while the hamburger menu was closed. This final override
   hides the desktop center-shell/frame on <=1024px and lets only the real
   hamburger panel (#navMenu.active) appear. */
@media (max-width: 1024px){
    html body header#header.pf-header nav.pf-header__nav .pf-header__center-shell,
    html body .pf-header nav.pf-header__nav .pf-header__center-shell,
    html body .pf-header .pf-header__center-shell{
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        position: static !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        overflow: visible !important;
    }

    html body header#header.pf-header nav.pf-header__nav .pf-header__center-shell::before,
    html body header#header.pf-header nav.pf-header__nav .pf-header__center-shell::after,
    html body header#header.pf-header nav.pf-header__nav .pf-header__center-frame,
    html body header#header.pf-header nav.pf-header__nav .pf-header__center-topline,
    html body header#header.pf-header nav.pf-header__nav .pf-header__center-glow{
        content: none !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu:not(.active),
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu:not(.active){
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transform: translateY(-8px) !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active{
        display: flex !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--pf-mobile-nav-top, 84px) !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: calc(100dvh - var(--pf-mobile-nav-top, 84px)) !important;
        max-height: calc(100dvh - var(--pf-mobile-nav-top, 84px)) !important;
        margin: 0 !important;
        padding: 18px 0 24px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateY(0) !important;
        border-radius: 0 0 28px 28px !important;
        border-top: 1px solid rgba(122, 229, 255, 0.32) !important;
        border-bottom: 1px solid rgba(122, 229, 255, 0.22) !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(122, 229, 255, 0.12), transparent 32%),
            linear-gradient(145deg, rgba(8, 18, 42, 0.98), rgba(4, 10, 24, 0.99) 52%, rgba(1, 7, 18, 1) 100%) !important;
        box-shadow:
            0 26px 60px rgba(0, 0, 0, 0.44),
            inset 0 1px 0 rgba(122, 229, 255, 0.16) !important;
        z-index: 4201 !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu:not(.active) #servicesDropdownMenu,
    html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services:not(.is-open) > #servicesDropdownMenu,
    html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services-3d:not(.is-open) > #servicesDropdownMenu{
        display: none !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        overflow: hidden !important;
        transform: none !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu{
        display: flex !important;
        position: static !important;
        flex-direction: column !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: min(760px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        min-width: 0 !important;
        max-height: none !important;
        margin: 8px auto 0 !important;
        padding: 8px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: hidden !important;
        transform: none !important;
        border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
        border-radius: 22px !important;
        box-shadow:
            0 0 0 1px rgba(122, 229, 255, 0.20),
            0 0 22px rgba(84, 196, 255, 0.24),
            0 18px 36px rgba(1, 7, 20, 0.30),
            inset 0 1px 0 rgba(122, 229, 255, 0.16) !important;
    }
}

/* === PATCH 2026-06-20: veća slova na svim dugmadima ===
   Dugmad sada koriste krupniji Rajdhani tekst, usklađen sa ostatkom sajta,
   bez promene osnovnog rasporeda i bez diranja kartica/sekcija. */
html body .pf-about-section .pf-about-contact-back-button,
html body .pf-about-section .pf-about-roller-button,
html body .pf-about-section .pf-contact-submit-button,
html body .pf-about-section .pf-about-contact-quick-action,
html body .contact-status-modal__button{
    font-family: "Rajdhani", sans-serif !important;
    font-size: clamp(1.16rem, 1.04rem + 0.42vw, 1.42rem) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    min-height: 56px !important;
    padding: 15px 26px !important;
}

html body .pf-about-section .pf-about-roller-button-face,
html body .pf-about-section .pf-about-contact-back-button > span,
html body .contact-status-modal__button{
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
}

/* Navigaciona dugmad u headeru: veća slova, ali dovoljno kompaktno da desktop okvir ostane uredan. */
html body header#header.pf-header .pf-header__link,
html body header#header.pf-header .pf-header__services-toggle{
    font-family: "Rajdhani", sans-serif !important;
    font-size: clamp(1.02rem, 0.94rem + 0.22vw, 1.16rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    min-height: 44px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

html body header#header.pf-header .pf-header__link > span,
html body header#header.pf-header .pf-header__services-toggle > span:first-child{
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
}

/* Stavke u Usluge meniju ostaju ujednačene i čitljive kao ostala dugmad. */
html body #servicesDropdownMenu .pf-header__sublink,
html body #servicesDropdownMenu .pf-header__sublink--tile{
    font-family: "Rajdhani", sans-serif !important;
    font-size: clamp(1.03rem, 0.96rem + 0.22vw, 1.16rem) !important;
    font-weight: 700 !important;
    line-height: 1.26 !important;
    letter-spacing: 0.036em !important;
}

html body #servicesDropdownMenu .pf-header__sublink-title,
html body #servicesDropdownMenu .pf-header__sublink-desc{
    font-size: inherit !important;
    line-height: 1.30 !important;
    font-weight: 700 !important;
    letter-spacing: inherit !important;
}

html body #servicesDropdownMenu .pf-header__sublink-icon,
html body #servicesDropdownMenu .pf-header__sublink-arrow{
    font-size: clamp(1.18rem, 1.06rem + 0.34vw, 1.36rem) !important;
}

html body .pf-about-section .pf-about-contact-detail-link{
    font-family: "Rajdhani", sans-serif !important;
    font-size: clamp(1.08rem, 1rem + 0.22vw, 1.20rem) !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    letter-spacing: 0.035em !important;
}

@media (max-width: 1024px){
    html body header#header.pf-header .pf-header__link,
    html body header#header.pf-header .pf-header__services-toggle{
        font-size: clamp(1.16rem, 1.02rem + 0.8vw, 1.34rem) !important;
        min-height: 52px !important;
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

    html body .pf-about-section .pf-about-contact-back-button,
    html body .pf-about-section .pf-about-roller-button,
    html body .pf-about-section .pf-contact-submit-button,
    html body .pf-about-section .pf-about-contact-quick-action{
        font-size: clamp(1.10rem, 1.00rem + 0.66vw, 1.30rem) !important;
        min-height: 54px !important;
        padding: 14px 22px !important;
    }
}

@media (max-width: 560px){
    html body .pf-about-section .pf-about-contact-back-actions{
        gap: 12px !important;
    }

    html body .pf-about-section .pf-about-contact-back-button,
    html body .pf-about-section .pf-about-roller-button,
    html body .pf-about-section .pf-contact-submit-button,
    html body .pf-about-section .pf-about-contact-quick-action{
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: clamp(1.04rem, 0.98rem + 0.78vw, 1.18rem) !important;
        padding: 13px 16px !important;
    }

    html body #servicesDropdownMenu .pf-header__sublink,
    html body #servicesDropdownMenu .pf-header__sublink--tile{
        font-size: clamp(1.00rem, 0.94rem + 0.66vw, 1.12rem) !important;
    }
}


/* === PATCH 2026-06-20: čistiji tekst bez plavog sjaja ===
   Zadržava se premium sjaj na okvirima, ikonama, hover efektima, linijama,
   badge/pill elementima i glavnim naslovima u maloj meri.
   Skida se text glow sa pasusa, opisa, dugmadi, dropdown teksta, forme i copyright teksta. */
html body .pf-about-section p,
html body .pf-about-section .pf-about-contact-subtitle,
html body .pf-about-section .pf-about-contact-back-text,
html body .pf-about-section .pf-demo-probe-direct-text,
html body .pf-about-section .pf-about-feature-text,
html body .pf-about-section .pf-about-stat-text,
html body .pf-about-section .pf-about-skill-card p,
html body .pf-about-section .pf-about-contact-list-card p,
html body .pf-about-section .pf-about-portal-text,
html body .pf-about-section .pf-about-faq-answer,
html body .pf-about-section .pf-about-faq-answer > p,
html body .pf-about-section .pf-about-testimonial-text,
html body .pf-about-section .pf-about-testimonial-author,
html body .pf-about-section .pf-about-testimonial-author span,
html body .pf-demo-probe-step-text{
    color: rgba(244, 251, 255, 0.98) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Mini naslovi i opisi u karticama ostaju jasni, bez plavog zamućenja na slovima. */
html body .pf-about-section .pf-about-feature-title,
html body .pf-about-section .pf-about-stat-title,
html body .pf-about-section .pf-about-skill-card h3,
html body .pf-about-section .pf-about-skill-card h4,
html body .pf-about-section .pf-about-contact-list-card h4,
html body .pf-about-section .pf-about-contact-list-card h5,
html body .pf-about-section .pf-about-portal-title,
html body .pf-about-section .pf-about-portal-subtitle,
html body .pf-about-section .pf-about-faq-question,
html body .pf-demo-probe-step-title{
    color: rgba(248, 253, 255, 0.99) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Glavni naslovi zadržavaju samo veoma blag premium sjaj, da ne izgube identitet sajta. */
html body .pf-about-section .pf-about-contact-title,
html body .pf-about-section .pf-about-contact-back-title,
html body .pf-about-section .pf-demo-probe-title,
html body .pf-about-section .pf-demo-probe-direct-title{
    text-shadow:
        0 0 10px rgba(122, 229, 255, 0.10),
        0 1px 0 rgba(0, 0, 0, 0.34) !important;
}

html body .pf-about-section [data-pf-about-inner-card]:hover .pf-about-contact-title,
html body .pf-about-section [data-pf-about-inner-card].is-tilting .pf-about-contact-title,
html body .pf-about-section [data-pf-about-inner-card]:hover .pf-about-contact-back-title,
html body .pf-about-section [data-pf-about-inner-card].is-tilting .pf-about-contact-back-title,
html body .pf-about-section [data-pf-about-inner-card]:hover .pf-demo-probe-title,
html body .pf-about-section [data-pf-about-inner-card].is-tilting .pf-demo-probe-title,
html body .pf-about-section [data-pf-about-inner-card]:hover .pf-demo-probe-direct-title,
html body .pf-about-section [data-pf-about-inner-card].is-tilting .pf-demo-probe-direct-title{
    text-shadow:
        0 0 14px rgba(122, 229, 255, 0.14),
        0 1px 0 rgba(0, 0, 0, 0.38) !important;
}

/* Sva dugmad: čista slova bez glow efekta; sjaj ostaje na pozadini/okviru dugmeta. */
html body .pf-about-section .pf-about-contact-back-button,
html body .pf-about-section .pf-about-roller-button,
html body .pf-about-section .pf-contact-submit-button,
html body .pf-about-section .pf-about-contact-quick-action,
html body .pf-about-section .pf-about-roller-button-face,
html body .pf-about-section .pf-about-contact-back-button > span,
html body header#header.pf-header .pf-header__link,
html body header#header.pf-header .pf-header__link > span,
html body header#header.pf-header .pf-header__services-toggle,
html body header#header.pf-header .pf-header__services-toggle > span,
html body .contact-status-modal__button{
    color: rgba(249, 253, 255, 0.99) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Usluge dropdown: tekst bez sjaja, dok ikone i okvir i dalje mogu da sijaju. */
html body #servicesDropdownMenu .pf-header__dropdown-eyebrow,
html body #servicesDropdownMenu .pf-header__dropdown-title,
html body #servicesDropdownMenu .pf-header__dropdown-subtitle,
html body #servicesDropdownMenu .pf-header__sublink,
html body #servicesDropdownMenu .pf-header__sublink-title,
html body #servicesDropdownMenu .pf-header__sublink-desc,
html body #servicesDropdownMenu .pf-header__sublink span:not(.pf-header__sublink-icon):not(.pf-header__sublink-arrow){
    color: rgba(246, 251, 255, 0.99) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}

html body #servicesDropdownMenu .pf-header__dropdown-subtitle,
html body #servicesDropdownMenu .pf-header__sublink-desc{
    color: rgba(226, 243, 255, 0.96) !important;
}

/* Forma: label, input, textarea, placeholder i validacija bez svetlećeg teksta. */
html body .pf-about-section .pf-about-form-shell,
html body .pf-about-section .pf-about-form-shell *,
html body .pf-about-section .pf-about-form-field,
html body .pf-about-section .pf-about-form-field span,
html body .pf-about-section .pf-about-form-field input,
html body .pf-about-section .pf-about-form-field textarea{
    text-shadow: none !important;
}

html body .pf-about-section .pf-about-form-field input,
html body .pf-about-section .pf-about-form-field textarea{
    color: rgba(250, 253, 255, 0.99) !important;
    -webkit-text-fill-color: rgba(250, 253, 255, 0.99) !important;
}

html body .pf-about-section .pf-about-form-field input::placeholder,
html body .pf-about-section .pf-about-form-field textarea::placeholder{
    color: rgba(214, 235, 248, 0.76) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: rgba(214, 235, 248, 0.76) !important;
}

html body .pf-about-section .field-validation-error,
html body .pf-about-section .validation-summary-errors,
html body .pf-about-section [data-valmsg-for]{
    text-shadow: none !important;
}

/* Footer tekstovi koji treba da budu čitljivi bez zamućenja; badge i logo efekti ostaju. */
html body .pf-footer-description,
html body .pf-footer-links a,
html body .pf-footer-legal,
html body .pf-footer-signature,
html body .pf-demo-probe-footer .pf-footer-description,
html body .pf-demo-probe-footer .pf-footer-links a,
html body .pf-demo-probe-footer .pf-footer-legal,
html body .pf-demo-probe-footer .pf-footer-signature{
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}

html body .pf-footer-legal,
html body .pf-demo-probe-footer .pf-footer-legal{
    color: rgba(250, 253, 255, 0.98) !important;
}

/* === PATCH 2026-06-20: premium čisti naslovi kartica bez glow/hover teksta ===
   Zahtev: zadržati premium sjaj na okvirima, hover efektima, ikonama i badge elementima,
   ali ukloniti loš efekat sa naslova unutar kartica/naslovnih okvira. */
html body .pf-about-section .pf-about-feature-title,
html body .pf-about-section .pf-about-stat-title,
html body .pf-about-section .pf-about-skill-card h3,
html body .pf-about-section .pf-about-skill-card h4,
html body .pf-about-section .pf-about-contact-list-card h4,
html body .pf-about-section .pf-about-contact-list-card h5,
html body .pf-about-section .pf-about-portal-title,
html body .pf-about-section .pf-about-portal-subtitle,
html body .pf-about-section .pf-about-faq-question,
html body .pf-about-section .pf-demo-probe-step-title,
html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-title,
html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-back-title,
html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-title,
html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-title,
html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-title,
html body .pf-about-section .pf-home-title-card .pf-about-contact-title,
html body .pf-about-section .pf-home-title-card .pf-about-contact-back-title,
html body .pf-about-section .pf-home-title-card .pf-demo-probe-title,
html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-title,
html body .pf-about-section .pf-home-title-card .pf-about-portal-title{
    color: rgba(248, 253, 255, 0.99) !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: rgba(248, 253, 255, 0.99) !important;
    text-shadow: none !important;
    filter: none !important;
    text-decoration: none !important;
}

/* Hover/tilt ne sme ponovo da dodaje svetleći tekst na naslovima kartica. */
html body .pf-about-section [data-pf-about-inner-card]:hover .pf-about-feature-title,
html body .pf-about-section [data-pf-about-inner-card].is-tilting .pf-about-feature-title,
html body .pf-about-section [data-pf-about-inner-card]:hover .pf-about-stat-title,
html body .pf-about-section [data-pf-about-inner-card].is-tilting .pf-about-stat-title,
html body .pf-about-section [data-pf-about-inner-card]:hover h3,
html body .pf-about-section [data-pf-about-inner-card].is-tilting h3,
html body .pf-about-section [data-pf-about-inner-card]:hover h4,
html body .pf-about-section [data-pf-about-inner-card].is-tilting h4,
html body .pf-about-section [data-pf-about-inner-card]:hover h5,
html body .pf-about-section [data-pf-about-inner-card].is-tilting h5,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover h1,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting h1,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover h2,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting h2,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover h3,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting h3,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover h4,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting h4,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card]:hover h5,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card].is-tilting h5{
    color: rgba(248, 253, 255, 0.99) !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: rgba(248, 253, 255, 0.99) !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Naslovi u okvirima ostaju mirni; 3D/premium osećaj ostaje na samoj kartici i okviru. */
html body .pf-about-section .pf-home-title-card > h1,
html body .pf-about-section .pf-home-title-card > h2,
html body .pf-about-section .pf-home-title-card > h3,
html body .pf-about-section .pf-demo-home-title-card > h1,
html body .pf-about-section .pf-demo-home-title-card > h2,
html body .pf-about-section .pf-demo-home-title-card > h3,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card] > h1,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card] > h2,
html body .pf-about-section.pf-home-title-frame-section [data-pf-about-inner-card] > h3{
    transform: none !important;
    will-change: auto !important;
}

/* === PATCH 2026-06-20: mobile/tablet hamburger panel stays inside viewport ===
   Fix: kada je hamburger otvoren, panel i Usluge podmeni vise ne koriste punu
   sirinu bez margina. Sve unutrasnje kartice su zakljucane na max-width:100%,
   pa meni ostaje unutar mobilnog/tablet okvira i nema horizontalnog izlaska. */
@media (max-width: 1024px){
    html,
    body{
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html body header#header.pf-header,
    html body header#header.pf-header .pf-header__nav{
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active{
        left: 14px !important;
        right: 14px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 28px) !important;
        box-sizing: border-box !important;
        padding: 16px 12px 22px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border-radius: 0 0 24px 24px !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active > li,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active > li,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active .pf-header__item,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active .pf-header__item{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active .pf-header__link,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active .pf-header__link,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active .pf-header__services-toggle,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active .pf-header__services-toggle{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 8px 0 0 !important;
        padding: 8px !important;
        overflow: hidden !important;
        transform: none !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu *,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu *{
        box-sizing: border-box !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-scroll-shell,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-scroll-shell,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-scroll,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-scroll{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-scroll,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-scroll{
        max-height: min(42dvh, 360px) !important;
        padding-right: 2px !important;
        overflow-y: auto !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink--tile,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink--tile{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        padding: 12px !important;
        gap: 12px !important;
        overflow: hidden !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink-copy,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink-copy,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink-title,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink-title,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink-desc,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink-desc{
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
}

@media (max-width: 640px){
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active{
        left: 10px !important;
        right: 10px !important;
        max-width: calc(100vw - 20px) !important;
        padding: 14px 10px 20px !important;
        border-radius: 0 0 22px 22px !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu{
        width: 100% !important;
        max-width: 100% !important;
        padding: 7px !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-scroll-shell,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-scroll-shell{
        padding: 10px !important;
        border-radius: 18px !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink--tile,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink--tile{
        padding: 10px !important;
        gap: 10px !important;
    }
}

/* === PATCH 2026-06-20: FINAL mobile services dropdown containment ===
   Problem: samo otvoreni Usluge panel na mobilnom/tabletu je izlazio van okvira,
   jer ga kasniji desktop override vraca na position:absolute i siri ga kao mega meni.
   Resenje: na <=1024px Services dropdown postaje normalan blok unutar hamburger menija,
   sa jednom kolonom, sakrivenom strelicom i svim elementima ogranicenim na 100%. */
@media (max-width: 1024px){
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services,
    html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services{
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services > #servicesDropdownMenu.pf-header__dropdown--holo,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services > #servicesDropdownMenu.pf-header__dropdown--holo,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services > #servicesDropdownMenu.pf-header__dropdown--holo{
        position: static !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        display: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        translate: none !important;
        scale: 1 !important;
        rotate: 0deg !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: hidden !important;
        max-height: 0 !important;
        border-width: 0 !important;
        border-radius: 0 !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown--holo,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown--holo,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown--holo{
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 10px 0 0 !important;
        padding: 10px !important;
        max-height: none !important;
        border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        transform: none !important;
        background: linear-gradient(180deg, rgba(5, 10, 24, 0.98) 0%, rgba(3, 7, 18, 0.98) 100%) !important;
        background-color: rgba(4, 8, 20, 0.98) !important;
        box-shadow:
            0 0 0 1px rgba(122, 229, 255, 0.18),
            0 0 20px rgba(84, 196, 255, 0.20),
            0 18px 34px rgba(1, 7, 20, 0.30),
            inset 0 1px 0 rgba(122, 229, 255, 0.16) !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu *,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu *::before,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu *::after{
        box-sizing: border-box !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-panel,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll-shell,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll{
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        overflow-x: hidden !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-panel,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll-shell{
        padding: 10px !important;
        border-radius: 18px !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll{
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        max-height: min(42dvh, 340px) !important;
        padding: 0 2px 0 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile{
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 10px !important;
        gap: 10px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink-copy,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink-title,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink-desc,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-title,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-subtitle{
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink-arrow,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__services-scrollbar,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__services-scrollbar-thumb{
        display: none !important;
        visibility: hidden !important;
    }
}

@media (max-width: 420px){
    html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown--holo{
        padding: 8px !important;
        border-radius: 18px !important;
    }

    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-panel,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__dropdown-scroll-shell,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink,
    html body header#header.pf-header nav.pf-header__nav #servicesDropdownMenu .pf-header__sublink--tile{
        padding: 8px !important;
        border-radius: 16px !important;
    }
}

/* === PATCH 2026-06-20: mobile services button restore + contained dropdown ===
   Fix: Usluge dugme mora da ostane vidljivo u otvorenom hamburger meniju.
   Dropdown ostaje zatvoren dok dugme nema .is-open i otvara se kao normalan blok
   unutar mobile/tablet menija, bez izlaska van okvira ekrana. */
@media (max-width: 1024px){
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services-3d,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services-3d{
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 54px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownToggle.pf-header__services-toggle,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownToggle.pf-header__services-toggle,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem > button#servicesDropdownToggle,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem > button#servicesDropdownToggle{
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 35 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 56px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 13px 18px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        transform: none !important;
        color: rgba(249, 253, 255, 0.99) !important;
        -webkit-text-fill-color: currentColor !important;
        text-shadow: none !important;
        border: 1px solid rgba(122, 229, 255, 0.58) !important;
        border-radius: 18px !important;
        background:
            linear-gradient(135deg, rgba(35, 154, 255, 0.24), rgba(2, 15, 44, 0.84)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            0 12px 28px rgba(1, 8, 24, 0.24) !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownToggle.pf-header__services-toggle > span,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownToggle.pf-header__services-toggle > span,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownToggle.pf-header__services-toggle .pf-header__dropdown-caret,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownToggle.pf-header__services-toggle .pf-header__dropdown-caret{
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-width: 100% !important;
        min-width: 0 !important;
        color: inherit !important;
        -webkit-text-fill-color: currentColor !important;
        text-shadow: none !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownToggle.pf-header__services-toggle > span:first-child,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownToggle.pf-header__services-toggle > span:first-child{
        flex: 1 1 auto !important;
        text-align: left !important;
        justify-content: flex-start !important;
        white-space: normal !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownToggle.pf-header__services-toggle .pf-header__dropdown-caret,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownToggle.pf-header__services-toggle .pf-header__dropdown-caret{
        flex: 0 0 auto !important;
        width: 28px !important;
        height: 28px !important;
        margin-left: auto !important;
        border-radius: 999px !important;
        border: 1px solid rgba(122, 229, 255, 0.42) !important;
        background: rgba(122, 229, 255, 0.08) !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services:not(.is-open) > #servicesDropdownMenu,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services:not(.is-open) > #servicesDropdownMenu{
        display: none !important;
        height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-width: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown--holo,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown--holo{
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        z-index: 20 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 10px 0 0 !important;
        padding: 9px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        transform: none !important;
        translate: none !important;
        border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
        border-radius: 20px !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-scroll,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-scroll{
        max-height: min(46dvh, 360px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 420px){
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownToggle.pf-header__services-toggle,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownToggle.pf-header__services-toggle{
        min-height: 54px !important;
        padding: 12px 15px !important;
        border-radius: 16px !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem.pf-header__item--services.is-open > #servicesDropdownMenu.pf-header__dropdown{
        padding: 7px !important;
        border-radius: 18px !important;
    }
}

/* === PATCH 2026-06-20: mobile services menu final alignment ===
   Mobile/tablet polish: Usluge dugme centrirano, dropdown header proredjen,
   kartice usluga: bedz/ikona + naslov u prvom redu, opis ispod levo. */
@media (max-width: 1024px){
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownToggle.pf-header__services-toggle,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownToggle.pf-header__services-toggle,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesMenuItem > button#servicesDropdownToggle,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesMenuItem > button#servicesDropdownToggle{
        justify-content: center !important;
        text-align: center !important;
        padding-left: 46px !important;
        padding-right: 46px !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownToggle.pf-header__services-toggle > span:first-child,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownToggle.pf-header__services-toggle > span:first-child{
        flex: 0 1 auto !important;
        justify-content: center !important;
        text-align: center !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownToggle.pf-header__services-toggle .pf-header__dropdown-caret,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownToggle.pf-header__services-toggle .pf-header__dropdown-caret{
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-left: 0 !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-panel,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-panel{
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 6px !important;
        text-align: left !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-eyebrow,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-eyebrow{
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: start !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-title,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-title{
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin: 0 !important;
        line-height: 1.18 !important;
        text-align: left !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-subtitle,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-subtitle{
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin: 2px 0 0 !important;
        line-height: 1.42 !important;
        text-align: left !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink--tile,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink--tile{
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 5px !important;
        text-align: left !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink-icon,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink-icon{
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: start !important;
        margin: 0 !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink-copy,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink-copy{
        display: contents !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink-title,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink-title{
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin: 0 !important;
        line-height: 1.18 !important;
        text-align: left !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink-desc,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink-desc{
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin: 1px 0 0 !important;
        line-height: 1.38 !important;
        text-align: left !important;
    }
}

@media (max-width: 420px){
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownToggle.pf-header__services-toggle,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownToggle.pf-header__services-toggle{
        padding-left: 42px !important;
        padding-right: 42px !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-panel,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-panel{
        column-gap: 8px !important;
        row-gap: 5px !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__sublink--tile,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__sublink--tile{
        column-gap: 8px !important;
        row-gap: 4px !important;
    }
}

/* === PATCH 2026-06-20: restore services dropdown intro block ===
   Vraca gornji tekstualni blok u Usluge meniju na prethodni stacked prikaz:
   Web usluge, naslov, pa opis ispod. Ostali mobile/tablet popravci ostaju. */
@media (max-width: 1024px){
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header-card,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header-card{
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        align-items: start !important;
        justify-items: start !important;
        column-gap: 0 !important;
        row-gap: 6px !important;
        text-align: left !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-eyebrow,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-eyebrow,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-title,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-title,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-subtitle,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-subtitle{
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: start !important;
        align-self: start !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-eyebrow,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-eyebrow{
        display: inline-flex !important;
        width: auto !important;
        margin: 0 0 2px !important;
        white-space: normal !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-title,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-title{
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        line-height: 1.24 !important;
    }

    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-subtitle,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-subtitle{
        display: block !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        line-height: 1.48 !important;
    }
}

/* === PATCH 2026-06-20: mobile/tablet Services eyebrow full-width centered ===
   U hamburger meniju samo oznaka "Web usluge" ide preko cele sirine,
   sa tekstom centriranim u plavom okviru. Naslov, opis i kartice ostaju kako jesu. */
@media (max-width: 1024px){
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.pf-header__menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-eyebrow,
    html body header#header.pf-header nav.pf-header__nav ul#navMenu.nav-menu.active #servicesDropdownMenu .pf-header__dropdown-header-card .pf-header__dropdown-eyebrow{
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        margin: 0 0 4px !important;
        padding: 9px 14px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        white-space: normal !important;
        border: 1.5px solid rgba(122, 229, 255, 0.96) !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(7, 18, 40, 0.98) 0%, rgba(4, 10, 24, 0.98) 100%) !important;
        background-color: rgba(5, 12, 28, 0.98) !important;
        box-shadow:
            0 0 0 1px rgba(122, 229, 255, 0.18),
            0 0 18px rgba(84, 196, 255, 0.22),
            inset 0 1px 0 rgba(155, 238, 255, 0.18) !important;
        color: rgba(247, 252, 255, 0.98) !important;
        line-height: 1.12 !important;
    }
}


/* === PATCH 2026-06-26: mobile/tablet title and subtitle fit inside cards ===
   Zahtev: ne dirati boje; na mobilnom i tabletu smanjiti naslov/podnaslov
   i sprečiti izlazak teksta van okvira naslovnih kartica. */
@media (max-width: 1024px){
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-back-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-title,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-title,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-back-title,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-title,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-title,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-title{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: clamp(1.72rem, 1.36rem + 1.25vw, 2.28rem) !important;
        line-height: 1.12 !important;
        letter-spacing: 0.005em !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        hyphens: auto !important;
        text-wrap: balance !important;
    }

    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-text,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-home-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-text,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-demo-home-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-text{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: clamp(0.98rem, 0.88rem + 0.42vw, 1.08rem) !important;
        line-height: 1.48 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        hyphens: auto !important;
    }
}

@media (max-width: 680px){
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-back-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-title,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-title,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-back-title,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-title,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-title,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-title{
        font-size: clamp(1.32rem, 1.04rem + 4.2vw, 1.82rem) !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
    }

    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-text,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-home-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-text,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-demo-home-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-text{
        font-size: clamp(0.88rem, 0.80rem + 1.15vw, 0.98rem) !important;
        line-height: 1.46 !important;
    }
}

@media (max-width: 420px){
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-back-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-title,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-title,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-back-title,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-title,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-title,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-title{
        font-size: clamp(1.18rem, 0.96rem + 4.4vw, 1.52rem) !important;
        line-height: 1.16 !important;
    }

    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-text,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-home-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-text,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-demo-home-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-text{
        font-size: 0.86rem !important;
        line-height: 1.44 !important;
    }
}

/* === PATCH 2026-06-26: jača mobile/tablet korekcija naslova i podnaslova ===
   Ne menja boje. Smanjuje samo tekst u naslovnim karticama i zaključava ga unutar okvira. */
@media (max-width: 1024px){
    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card,
    html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card,
    html body .pf-about-section .pf-about-hero-copy.pf-home-title-card,
    html body .pf-about-section .pf-about-section-copy.pf-home-title-card,
    html body .pf-about-section .pf-about-portal-header.pf-home-title-card{
        width: min(100%, calc(100vw - 28px)) !important;
        max-width: min(100%, calc(100vw - 28px)) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-left: clamp(14px, 2.6vw, 22px) !important;
        padding-right: clamp(14px, 2.6vw, 22px) !important;
        overflow: hidden !important;
    }

    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card > h1,
    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card > h2,
    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card > h3,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-back-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-title,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-title,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-back-title,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-title,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-title,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-title{
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        font-size: clamp(1.28rem, 1.06rem + 1.25vw, 1.70rem) !important;
        line-height: 1.18 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        hyphens: auto !important;
        text-wrap: balance !important;
    }

    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card > p,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-back-text,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-text,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-text,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-home-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-back-text,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-text,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-text,
    html body .pf-about-section .pf-home-title-card .pf-demo-home-subtitle{
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        font-size: clamp(0.82rem, 0.76rem + 0.45vw, 0.96rem) !important;
        line-height: 1.42 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }
}

@media (max-width: 680px){
    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card,
    html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card,
    html body .pf-about-section .pf-about-hero-copy.pf-home-title-card,
    html body .pf-about-section .pf-about-section-copy.pf-home-title-card,
    html body .pf-about-section .pf-about-portal-header.pf-home-title-card{
        width: min(100%, calc(100vw - 22px)) !important;
        max-width: min(100%, calc(100vw - 22px)) !important;
        padding: 16px 12px !important;
        border-radius: 22px !important;
    }

    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card > h1,
    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card > h2,
    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card > h3,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-back-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-title,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-title,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-back-title,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-title,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-title,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-title{
        font-size: clamp(1.04rem, 0.94rem + 2.05vw, 1.28rem) !important;
        line-height: 1.18 !important;
    }

    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card > p,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-back-text,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-text,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-text,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-home-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-back-text,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-text,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-text,
    html body .pf-about-section .pf-home-title-card .pf-demo-home-subtitle{
        font-size: clamp(0.76rem, 0.70rem + 0.9vw, 0.86rem) !important;
        line-height: 1.38 !important;
    }
}

@media (max-width: 420px){
    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card,
    html body .pf-about-section.pf-home-title-frame-section .pf-demo-home-title-card,
    html body .pf-about-section .pf-about-hero-copy.pf-home-title-card,
    html body .pf-about-section .pf-about-section-copy.pf-home-title-card,
    html body .pf-about-section .pf-about-portal-header.pf-home-title-card{
        width: min(100%, calc(100vw - 18px)) !important;
        max-width: min(100%, calc(100vw - 18px)) !important;
        padding: 14px 10px !important;
        border-radius: 20px !important;
    }

    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card > h1,
    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card > h2,
    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card > h3,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-back-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-title,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-title,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-title,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-back-title,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-title,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-title,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-title{
        font-size: clamp(0.98rem, 0.88rem + 2vw, 1.14rem) !important;
        line-height: 1.20 !important;
    }

    html body .pf-about-section.pf-home-title-frame-section .pf-home-title-card > p,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-contact-back-text,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-probe-direct-text,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-subtitle,
    html body .pf-about-section .pf-demo-home-title-card .pf-about-portal-text,
    html body .pf-about-section .pf-demo-home-title-card .pf-demo-home-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-contact-back-text,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-demo-probe-direct-text,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-subtitle,
    html body .pf-about-section .pf-home-title-card .pf-about-portal-text,
    html body .pf-about-section .pf-home-title-card .pf-demo-home-subtitle{
        font-size: 0.74rem !important;
        line-height: 1.36 !important;
    }
}

/* === PATCH 2026-06-26: efekti ugašeni samo za mobilni/touch prikaz, desktop vraćen ===
   Cilj: na računaru ostaju hover/3D/tilt efekti; na telefonu/tabletu se gase teži efekti.
   Dugmad nisu obuhvaćena ovim gašenjem da bi njihov kratki sjaj i dalje radio. */
@media (max-width: 767px), (max-width: 1024px) and (hover: none), (max-width: 1024px) and (pointer: coarse){
    html body .pf-about-section{
        scroll-behavior: auto !important;
    }

    html body .pf-about-section [data-pf-about-tilt],
    html body .pf-about-section .pf-about-contact-shell,
    html body .pf-about-section .pf-about-contact-shell:hover,
    html body .pf-about-section .pf-about-contact-shell.is-footer-like-tilting,
    html body .pf-about-section .pf-about-contact-flip,
    html body .pf-about-section .pf-about-contact-flip-inner,
    html body .pf-about-section .pf-about-contact-face,
    html body .pf-about-section .pf-about-contact-face:hover,
    html body .pf-about-section .pf-about-contact-panel,
    html body .pf-about-section .pf-about-contact-panel:hover,
    html body .pf-about-section .pf-about-contact-panel.is-tilting,
    html body .pf-about-section .pf-about-contact-panel.is-panel-tilting,
    html body .pf-about-section .pf-about-contact-panel.is-panel-returning,
    html body .pf-about-section .pf-about-contact-scroll,
    html body .pf-about-section .pf-about-feature-grid,
    html body .pf-about-section .pf-about-stat-grid,
    html body .pf-about-section .pf-about-skill-grid,
    html body .pf-about-section .pf-about-contact-list{
        --pf-about-rotate-x: 0deg !important;
        --pf-about-rotate-y: 0deg !important;
        --pf-about-shell-shift-x: 0px !important;
        --pf-about-shell-shift-y: 0px !important;
        --pf-about-panel-rx: 0deg !important;
        --pf-about-panel-ry: 0deg !important;
        --pf-about-panel-tz: 0px !important;
        --pf-about-panel-lift: 0px !important;
        --pf-about-panel-glow: 0 !important;
        --pf-about-roll-angle: 0deg !important;
        transform: none !important;
        transform-style: flat !important;
        perspective: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    html body .pf-about-section [data-pf-about-inner-card],
    html body .pf-about-section [data-pf-about-inner-card]:hover,
    html body .pf-about-section [data-pf-about-inner-card]:focus-within,
    html body .pf-about-section [data-pf-about-inner-card].is-tilting,
    html body .pf-about-section [data-pf-about-inner-card].is-inner-returning,
    html body .pf-about-section .pf-about-feature-card,
    html body .pf-about-section .pf-about-feature-card:hover,
    html body .pf-about-section .pf-about-feature-card:focus-within,
    html body .pf-about-section .pf-about-stat-card,
    html body .pf-about-section .pf-about-stat-card:hover,
    html body .pf-about-section .pf-about-stat-card:focus-within,
    html body .pf-about-section .pf-about-skill-card,
    html body .pf-about-section .pf-about-skill-card:hover,
    html body .pf-about-section .pf-about-skill-card:focus-within,
    html body .pf-about-section .pf-about-contact-list-card,
    html body .pf-about-section .pf-about-contact-list-card:hover,
    html body .pf-about-section .pf-about-contact-list-card:focus-within,
    html body .pf-about-section .pf-about-faq-item,
    html body .pf-about-section .pf-about-faq-item:hover,
    html body .pf-about-section .pf-about-testimonial-card,
    html body .pf-about-section .pf-about-testimonial-card:hover,
    html body .pf-about-section .pf-number-sequence-card,
    html body .pf-about-section .pf-number-sequence-card:hover,
    html body .pf-about-section .pf-info-icon-card,
    html body .pf-about-section .pf-info-icon-card:hover,
    html body .pf-about-section .pf-metric-value-card,
    html body .pf-about-section .pf-metric-value-card:hover,
    html body .pf-about-section .pf-about-portal-shell,
    html body .pf-about-section .pf-about-portal-shell:hover,
    html body .pf-about-section .pf-about-portal-header,
    html body .pf-about-section .pf-about-portal-header:hover,
    html body .pf-about-section .pf-demo-home-title-card,
    html body .pf-about-section .pf-demo-home-title-card:hover,
    html body .pf-about-section .pf-home-title-card,
    html body .pf-about-section .pf-home-title-card:hover{
        --pf-about-js-inner-rx: 0deg !important;
        --pf-about-js-inner-ry: 0deg !important;
        --pf-about-js-inner-tz: 0px !important;
        --pf-about-js-inner-shift-y: 0px !important;
        --pf-about-js-inner-pointer-x: 50% !important;
        --pf-about-js-inner-pointer-y: 18% !important;
        --pf-about-js-inner-shine-x: 0px !important;
        --pf-about-js-inner-glow: 0 !important;
        --pf-about-inner-rx: 0deg !important;
        --pf-about-inner-ry: 0deg !important;
        --pf-about-inner-tz: 0px !important;
        --pf-about-inner-shift-y: 0px !important;
        --pf-about-inner-pointer-x: 50% !important;
        --pf-about-inner-pointer-y: 18% !important;
        --pf-about-inner-shine-x: 0px !important;
        --pf-about-inner-glow: 0 !important;
        transform: none !important;
        transform-style: flat !important;
        perspective: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
    }

    html body .pf-about-section [data-pf-about-inner-card] > *,
    html body .pf-about-section .pf-about-feature-card > *,
    html body .pf-about-section .pf-about-stat-card > *,
    html body .pf-about-section .pf-about-skill-card > *,
    html body .pf-about-section .pf-about-contact-list-card > *,
    html body .pf-about-section .pf-about-faq-item > *,
    html body .pf-about-section .pf-about-testimonial-card > *,
    html body .pf-about-section .pf-number-sequence-card > *,
    html body .pf-about-section .pf-info-icon-card > *,
    html body .pf-about-section .pf-metric-value-card > *,
    html body .pf-about-section .pf-about-portal-shell > *,
    html body .pf-about-section .pf-about-portal-header > *{
        transform: none !important;
        transform-style: flat !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    html body .pf-about-section [data-pf-about-inner-card]::before,
    html body .pf-about-section [data-pf-about-inner-card]::after,
    html body .pf-about-section .pf-about-feature-card::before,
    html body .pf-about-section .pf-about-feature-card::after,
    html body .pf-about-section .pf-about-stat-card::before,
    html body .pf-about-section .pf-about-stat-card::after,
    html body .pf-about-section .pf-about-skill-card::before,
    html body .pf-about-section .pf-about-skill-card::after,
    html body .pf-about-section .pf-about-contact-list-card::before,
    html body .pf-about-section .pf-about-contact-list-card::after,
    html body .pf-about-section .pf-about-faq-item::before,
    html body .pf-about-section .pf-about-faq-item::after,
    html body .pf-about-section .pf-about-testimonial-card::before,
    html body .pf-about-section .pf-about-testimonial-card::after,
    html body .pf-about-section .pf-number-sequence-card::before,
    html body .pf-about-section .pf-number-sequence-card::after,
    html body .pf-about-section .pf-info-icon-card::before,
    html body .pf-about-section .pf-info-icon-card::after,
    html body .pf-about-section .pf-metric-value-card::before,
    html body .pf-about-section .pf-metric-value-card::after,
    html body .pf-about-section .pf-about-portal-shell::before,
    html body .pf-about-section .pf-about-portal-shell::after,
    html body .pf-about-section .pf-about-portal-header::before,
    html body .pf-about-section .pf-about-portal-header::after,
    html body .pf-about-section .pf-about-contact-panel::before,
    html body .pf-about-section .pf-about-contact-panel::after,
    html body .pf-about-section .pf-home-title-card::before,
    html body .pf-about-section .pf-home-title-card::after,
    html body .pf-about-section .pf-demo-home-title-card::before,
    html body .pf-about-section .pf-demo-home-title-card::after{
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    html body .pf-about-section .pf-about-orb,
    html body .pf-about-section .pf-about-grid,
    html body .pf-about-section .pf-about-shell-topline,
    html body .pf-about-section .pf-about-shell-glow,
    html body .pf-about-section .pf-about-contact-scroll-line,
    html body .pf-about-section .pf-about-contact-scroll-hint,
    html body .pf-about-section .pf-about-contact-scroll-hint::before,
    html body .pf-about-section .pf-about-contact-scroll-hint::after,
    html body .pf-about-section .pf-about-roller-pill,
    html body .pf-about-section .pf-about-roller-pill::before,
    html body .pf-about-section .pf-about-roller-pill::after,
    html body .pf-about-section .pf-about-roller-pill-face,
    html body .pf-about-section .pf-about-feature-icon,
    html body .pf-about-section .pf-about-stat-icon,
    html body .pf-about-section .pf-about-skill-icon,
    html body .pf-about-section .pf-about-sequence-number{
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    html body .pf-footer-brand,
    html body .pf-footer-brand:hover,
    html body .pf-footer-section,
    html body .pf-footer-section:hover,
    html body .pf-footer-meta,
    html body .pf-footer-meta:hover,
    html body .pf-footer-social-icon,
    html body .pf-footer-social-icon:hover,
    html body .pf-header .pf-header__center-shell,
    html body .pf-header .pf-header__center-shell:hover,
    html body .pf-header .pf-header__brand-card,
    html body .pf-header .pf-header__brand-card:hover,
    html body .pf-header .pf-header__dropdown,
    html body .pf-header .pf-header__sublink,
    html body .pf-header .pf-header__sublink:hover,
    html body .pf-header .pf-header__sublink--tile,
    html body .pf-header .pf-header__sublink--tile:hover{
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}