/* Public marketing audiences: navigation and three shared landing pages. */
.audience-nav { position: relative; }
.audience-nav__toggle {
    display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem;
    border: 0; border-radius: 8px; background: transparent; color: var(--text);
    font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.audience-nav__toggle:hover, .audience-nav__toggle[aria-expanded="true"] { color: var(--accent); }
.audience-nav__toggle i { font-size: .64rem; transition: transform .2s; }
.audience-nav__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.audience-nav__menu {
    position: absolute; top: 100%; left: 0; z-index: 70; width: min(370px, 90vw);
    background: #fff; border: 1px solid rgba(16,71,128,.12); border-radius: 16px;
    padding: .55rem; box-shadow: 0 24px 55px rgba(20,60,103,.14);
}
.audience-nav__item {
    display: flex; align-items: flex-start; gap: .85rem; padding: .85rem;
    color: var(--text); text-decoration: none; border-radius: 11px;
}
.audience-nav__item:hover, .audience-nav__item:focus-visible { background: #f0f6fe; color: #035fbf; }
.audience-nav__icon { display: grid; place-items: center; flex: 0 0 37px; height: 37px; background: #ecf4fd; border-radius: 10px; color: #1674d1; }
.audience-nav__item strong { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .18rem; }
.audience-nav__item small { display: block; color: #64758b; font-size: .76rem; line-height: 1.45; font-weight: 400; }
.audience-nav__item:hover small { color: #52687d; }
.audience-nav__toggle:focus-visible, .audience-nav__item:focus-visible { outline: 3px solid rgba(0,122,255,.38); outline-offset: 2px; }

/* Readable editorial layouts, light technical detail, no decorative stock images. */
.audience-page { overflow: clip; }
.audience-page h1, .audience-page h2, .audience-page h3, .home-audience h2, .home-audience h3 { letter-spacing: -.035em; }
.audience-eyebrow { color: #1666b9; font-size: .71rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.audience-hero { padding: clamp(125px, 14vw, 180px) 0 95px; border-bottom: 1px solid rgba(16,71,128,.08); background: radial-gradient(circle at 93% 18%, rgba(45,148,248,.11), transparent 46%), #f7faff; }
.audience-hero__grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: center; gap: clamp(38px, 6vw, 94px); }
.audience-hero h1 { max-width: 720px; margin: 1.25rem 0 1.45rem; font-size: clamp(2.5rem, 4.8vw, 4.65rem); line-height: 1.07; font-weight: 700; color: #152c48; }
.audience-hero__lead { max-width: 36rem; color: #57697c; font-size: clamp(1.03rem, 1.4vw, 1.18rem); line-height: 1.77; }
.audience-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.audience-btn { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 50px; padding: .82rem 1.2rem; font-size: .88rem; font-weight: 600; border-radius: 9px; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; white-space: normal; }
.audience-btn:hover { transform: translateY(-2px); }
.audience-btn--primary { color: #fff; background: #006cd6; box-shadow: 0 12px 28px rgba(0,108,214,.16); }
.audience-btn--primary:hover { color: #fff; background: #0055aa; }
.audience-inline-link { display: inline-flex; align-items: center; gap: .65rem; font-size: .88rem; color: #006ccf; font-weight: 600; text-decoration: none; line-height: 1.4; }
.audience-inline-link:hover { color: #003f88; text-decoration: underline; text-underline-offset: 4px; }
.audience-page a:focus-visible, .home-audience a:focus-visible { outline: 3px solid #4fa8ff; outline-offset: 4px; }
.audience-tags { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 2.4rem 0 0; list-style: none; }
.audience-tags li { padding: .42rem .75rem; border: 1px solid #d7e5f5; border-radius: 99px; background: rgba(255,255,255,.8); font-size: .72rem; font-weight: 500; color: #436480; }
.audience-hero__visual { position: relative; align-self: stretch; display: flex; flex-direction: column; min-height: 475px; border-radius: 22px; overflow: hidden; background: #0c2d50; color: #fff; box-shadow: 0 30px 64px rgba(6,40,81,.15); }
.audience-visual__top { display: flex; align-items: center; justify-content: space-between; padding: 1.45rem 1.65rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.audience-visual__brand { color: #fff; font-size: 1.02rem; font-weight: 700; letter-spacing: .1em; }
.audience-visual__brand span { color: #6dc4ff; }
.audience-visual__mark { font-size: .65rem; color: #70baf7; }
.audience-visual__graphic { position: absolute; top: 95px; right: -8px; display: flex; gap: 9px; height: 190px; width: 53%; opacity: .47; transform: skewY(-13deg); pointer-events: none; }
.audience-visual__graphic span { flex: 1; height: 100%; border: 8px solid #529ed4; box-shadow: inset 0 0 25px rgba(79,176,249,.17); background: linear-gradient(155deg, rgba(200,232,255,.27), rgba(91,162,207,.05)); }
.audience-visual__graphic span:nth-child(2) { transform: translateY(23px); }
.audience-visual__graphic span:nth-child(3) { transform: translateY(-15px); }
.audience-visual__body { position: relative; z-index: 1; margin-top: auto; padding: 4rem 1.65rem 1.9rem; background: linear-gradient(0deg, #0c2d50 72%, rgba(12,45,80,.02)); }
.audience-visual__caption { color: #90bbe2; text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; margin-bottom: 1rem; }
.audience-visual__flow { padding: 0; margin: 0; list-style: none; }
.audience-visual__flow li { display: flex; align-items: center; gap: 1rem; padding: .84rem 0; border-top: 1px solid rgba(255,255,255,.16); }
.audience-visual__number { flex: 0 0 1.7rem; font-size: .73rem; color: #72b6ee; }
.audience-visual__flow strong { flex: 1; font-size: .94rem; font-weight: 500; }
.audience-visual__flow i { color: #a4cae7; font-size: .73rem; }
.audience-visual__bottom { display: flex; gap: 1.3rem; padding: .95rem 1.65rem; background: #08213b; font-size: .58rem; letter-spacing: .13em; color: #6e9dbf; }

.audience-hero__visual--photo { background: #e8eef5; }
.audience-hero__visual--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(7,31,55,.08), rgba(7,31,55,.03) 46%, rgba(7,31,55,0) 100%);
    pointer-events: none;
}
.audience-hero__photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 62% center;
}
.audience-benefits { padding: clamp(75px, 9vw, 130px) 0 105px; background: #fff; }
.audience-section-head { max-width: 710px; margin-bottom: 3.5rem; }
.audience-page h2, .home-audience h2 { font-size: clamp(1.88rem, 3.25vw, 3.05rem); color: #1a324e; line-height: 1.16; font-weight: 650; }
.audience-section-head h2 { margin: 1rem 0 1.15rem; }
.audience-section-head > p:last-child { color: #64758a; font-size: 1.06rem; line-height: 1.75; }
.audience-benefit-list { border-top: 1px solid #dce5ef; }
.audience-benefit { display: grid; grid-template-columns: 52px 86px minmax(0,1fr); gap: 1.4rem; padding: 2.3rem 0; border-bottom: 1px solid #dce5ef; align-items: start; }
.audience-benefit__index { font-size: .76rem; color: #92a3b4; padding-top: .3rem; }
.audience-benefit__icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; color: #1672c6; background: #eff6ff; font-size: 1.1rem; }
.audience-benefit__copy { max-width: 650px; }
.audience-benefit h3 { margin-bottom: .65rem; font-size: clamp(1.17rem, 2vw, 1.46rem); font-weight: 600; color: #21374d; }
.audience-benefit p { max-width: 39rem; color: #637487; line-height: 1.74; font-size: .98rem; }
.audience-spotlight { padding: 95px 0; background: #f0f6fd; }
.audience-spotlight__grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 8%; }
.audience-spotlight h2 { margin: 1rem 0 1rem; }
.audience-spotlight__grid > div > p:not(.audience-eyebrow) { max-width: 550px; color: #5c6e80; line-height: 1.78; margin-bottom: 1.5rem; }
.audience-spotlight__points { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid #e0ebf6; border-radius: 19px; }
.audience-spotlight__points li { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; font-size: .96rem; font-weight: 500; color: #2a4866; }
.audience-spotlight__points li + li { border-top: 1px solid #e6eef7; }
.audience-spotlight__points li span { display: grid; place-items: center; flex: 0 0 27px; height: 27px; background: #e9f5fd; color: #117bd0; border-radius: 50%; font-size: .65rem; }
.audience-modes { padding: 100px 0 110px; background: #f0f6fd; }
.audience-modes h2 { margin: 1rem 0 2.5rem; }
.audience-modes__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.3rem; }
.audience-mode { padding: clamp(2rem, 3.5vw, 3rem); border: 1px solid #dce7f4; border-radius: 18px; background: #fff; }
.audience-mode__number { color: #2672ba; font-size: .73rem; letter-spacing: .1em; font-weight: 700; }
.audience-mode h3 { font-size: clamp(1.45rem, 2.4vw, 2.1rem); color: #1b344f; margin: 1.35rem 0 .95rem; font-weight: 650; }
.audience-mode > p:not(.audience-mode__number) { color: #607185; font-size: .98rem; line-height: 1.75; }
.audience-mode__points { padding: 1.45rem 0 0; margin: 1.65rem 0 0; list-style: none; border-top: 1px solid #e7eef6; }
.audience-mode__points li { display: flex; gap: .75rem; align-items: center; margin-bottom: .85rem; color: #27486a; font-size: .9rem; }
.audience-mode__points i { color: #167bd5; }
.audience-close { padding: 78px 0; background: #fff; }
.audience-close__inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: clamp(2.1rem, 5vw, 4.4rem); border-radius: 23px; background: linear-gradient(115deg, #082d53, #0d4a82); color: #fff; }
.audience-close .audience-eyebrow { color: #93cbfc; }
.audience-close h2 { max-width: 660px; color: #fff; margin: 1rem 0; }
.audience-close p:not(.audience-eyebrow) { color: #c1d9ea; line-height: 1.7; max-width: 550px; }
.audience-btn--light { color: #064a86; background: #fff; flex: 0 0 auto; }
.audience-btn--light:hover { color: #063864; background: #e8f4fe; }
.audience-explore { padding: 10px 0 90px; background: #fff; }
.audience-explore__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-top: 1.4rem; }
.audience-explore__grid a { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.3rem; border: 1px solid #dce8f5; border-radius: 12px; color: #275071; font-weight: 600; text-decoration: none; }
.audience-explore__grid a:hover { background: #f2f8ff; color: #006cd6; }
.audience-explore__grid i { font-size: .8rem; color: #5592ca; }
.home-audience { padding: 90px 0 100px; background: #f7faff; border-bottom: 1px solid var(--border); }
.home-audience__heading { margin-bottom: 2.4rem; max-width: 650px; }
.home-audience h2 { margin: 1rem 0 .95rem; }
.home-audience__heading > p:last-child { color: #64768a; font-size: 1.05rem; line-height: 1.72; }
.home-audience__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; }
.home-audience__item { position: relative; display: flex; flex-direction: column; min-height: 280px; padding: 2rem; background: #fff; border: 1px solid #deeaf5; border-radius: 16px; color: var(--text); text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
.home-audience__item:hover { transform: translateY(-4px); border-color: #80b8ed; box-shadow: 0 18px 40px rgba(24,78,127,.09); color: #203d5a; }
.home-audience__icon { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 1.8rem; color: #0869be; background: #eaf5ff; border-radius: 13px; font-size: 1.1rem; }
.home-audience h3 { font-size: 1.27rem; font-weight: 650; color: #213b55; margin-bottom: .65rem; }
.home-audience__item p { color: #66788c; font-size: .89rem; line-height: 1.7; max-width: 280px; }
.home-audience__arrow { margin-top: auto; padding-top: 1.7rem; align-self: flex-end; color: #277bc7; }
@media (max-width: 1023px) {
    .audience-nav { display: block; width: 100%; padding: 0 !important; }
    .audience-nav__toggle { display: flex; width: 100%; justify-content: space-between; padding: .7rem .75rem; }
    .audience-nav__menu { position: static; width: 100%; padding: 0 .4rem .4rem; border: 0; box-shadow: none; background: transparent; }
    .audience-nav__item { padding: .7rem; }
}
@media (max-width: 860px) {
    .audience-hero__grid, .audience-spotlight__grid { grid-template-columns: 1fr; gap: 3rem; }
    .audience-hero { padding-top: 135px; padding-bottom: 70px; }
    .audience-hero__visual { min-height: 430px; max-width: 560px; width: 100%; }
    .audience-close__inner { flex-direction: column; align-items: flex-start; }
    .home-audience__grid { grid-template-columns: 1fr; }
    .home-audience__item { min-height: 0; }
}
@media (max-width: 650px) {
    .audience-hero { padding-top: 114px; padding-bottom: 55px; }
    .audience-hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
    .audience-hero__actions { align-items: flex-start; }
    .audience-hero__visual { min-height: 405px; }
    .audience-hero__photo { object-position: 58% center; }
    .audience-benefit { grid-template-columns: 32px 1fr; gap: .9rem; padding: 1.8rem 0; }
    .audience-benefit__icon { grid-column: 1; grid-row: 2; width: 30px; height: 30px; border-radius: 8px; font-size: .8rem; }
    .audience-benefit__copy { grid-column: 2; grid-row: 1 / span 2; }
    .audience-modes__grid, .audience-explore__grid { grid-template-columns: 1fr; }
    .audience-benefits, .audience-modes, .audience-spotlight { padding: 75px 0; }
    .audience-close { padding: 55px 0; }
    .audience-close__inner { gap: 1.75rem; }
    .home-audience { padding: 70px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .audience-page *, .home-audience *, .audience-nav * { transition-duration: 0s !important; }
}
/* Hero fotografija prati visinu tekstualnog bloka */
.audience-hero__visual--photo {
    align-self: stretch;
    height: auto;
    min-height: 0;
}

.audience-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 860px) {
    .audience-hero__visual--photo {
        min-height: 350px;
    }
}