/* =========================================================
   TRANSPORTNI CENTAR
   KOMPLETAN STYLE.CSS
   - logo je samo slika (bez dodatnog teksta)
   - hero bez okvira
   - fade direktno na slici
========================================================= */


/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background: #020914;
    color: #ffffff;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
}


/* STANDARDNI CONTAINER */
.container {
    width: min(1640px, calc(100% - 70px));
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100;

    background: rgba(2, 10, 22, 0.12);

    border-bottom:
        1px solid transparent;

    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);

    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        backdrop-filter 0.35s ease,
        -webkit-backdrop-filter 0.35s ease;
}

/* PAKETI — kompletan interaktivni sistem */
.packages-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.package-item { position: relative; min-width: 0; }
.package-trigger { width: 100%; min-height: 430px; padding: 18px; display: flex; flex-direction: column; color: inherit; font: inherit; text-align: left; cursor: pointer; outline: none; overflow: hidden; transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease; }
.package-trigger:hover, .package-trigger:focus-visible, .package-item.is-open .package-trigger { transform: translateY(-6px) scale(1.012); border-color: rgba(74,169,255,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 28px 80px rgba(0,91,205,.23); }
.package-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(70,165,255,.3), 0 28px 80px rgba(0,91,205,.23); }
.package-professional .package-trigger { border-color: rgba(75,159,244,.25); }
.package-comfort .package-trigger { border-color: rgba(100,191,255,.32); background: linear-gradient(145deg,rgba(10,43,76,.9),rgba(3,16,31,.88)); }
.package-image { width: 100%; aspect-ratio: 1672 / 941; display: block; margin: 14px 0; }
.package-image img { width: 100%; height: 100%; display: block; object-fit: contain; }
.package-item.image-missing .package-image { display: none; }
.package-item.image-missing .package-trigger { justify-content: flex-end; }
.package-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; width: 100%; margin-top: auto; }
.package-summary strong { display: block; font-size: 25px; line-height: 1.15; }
.package-summary small { display: block; margin-top: 6px; color: #76bfff; font-size: 13px; font-weight: 700; }
.package-summary em { padding: 7px 9px; border: 1px solid rgba(80,169,255,.2); border-radius: 7px; color: #80c7ff; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.package-hook { display: block; margin-top: 15px; color: #a7bdd3; font-size: 12px; line-height: 1.55; }
.package-details { width: min(1080px, calc(100vw - 70px)); max-height: 0; margin: 0; opacity: 0; overflow: hidden; transform: translateX(calc((100% - min(1080px, calc(100vw - 70px))) / 2)) translateY(-12px); transition: max-height .8s cubic-bezier(.22,.61,.36,1), opacity .35s ease, transform .5s ease, margin .5s ease; }
.package-item:hover .package-details, .package-item:focus-within .package-details, .package-item.is-open .package-details { max-height: 3200px; margin-top: 28px; opacity: 1; transform: translateX(calc((100% - min(1080px, calc(100vw - 70px))) / 2)) translateY(0); }
.detail-panel, .basic-option-card { padding: 30px; border: 1px solid rgba(89,164,236,.16); border-radius: 18px; background: linear-gradient(145deg,rgba(9,33,58,.98),rgba(4,18,34,.97)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 24px 60px rgba(0,0,0,.22); }
.detail-panel h3 { margin: 10px 0 8px; font-size: 28px; }
.detail-lead { max-width: 830px; color: #96abc1; font-size: 14px; line-height: 1.75; }
.detail-price-row { display: flex; align-items: center; gap: 16px; margin: 24px 0; }
.detail-price-row strong { color: #73c5ff; font-size: 24px; }
.detail-price-row span { padding: 7px 10px; border: 1px solid rgba(73,165,255,.25); border-radius: 7px; color: #b9dcf7; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.detail-list { display: grid; gap: 9px; margin: 20px 0; list-style: none; }
.detail-list-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
.detail-list li, .comfort-group li { position: relative; padding-left: 18px; color: #9aafc5; font-size: 12px; line-height: 1.55; }
.detail-list li::before, .comfort-group li::before { content: ""; position: absolute; top: .58em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #48aaff; }
.detail-note { padding: 15px; border-radius: 10px; background: rgba(42,116,190,.08); color: #7f98b2; font-size: 11px; line-height: 1.6; }
.detail-note p + p { margin-top: 4px; }
.premium-message { margin-top: 18px; color: #bfd5e9; font-size: 13px; font-style: italic; line-height: 1.65; }
.package-cta { display: inline-flex; min-height: 44px; margin-top: 22px; padding: 0 19px; align-items: center; justify-content: center; border: 1px solid rgba(85,175,255,.35); border-radius: 9px; background: linear-gradient(135deg,#1376e8,#299fff); font-size: 12px; font-weight: 800; box-shadow: 0 10px 30px rgba(0,105,225,.2); }
.comfort-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-top: 25px; }
.comfort-group { padding: 20px; border: 1px solid rgba(104,169,230,.11); border-radius: 13px; background: rgba(9,29,50,.58); }
.comfort-group h4 { margin-bottom: 10px; color: #dceeff; font-size: 15px; }
.comfort-group p, .comfort-group small { display: block; color: #819ab4; font-size: 11px; line-height: 1.65; }
.comfort-group small { margin-top: 10px; color: #647f9c; }
.comfort-group ul { display: grid; gap: 7px; list-style: none; }
.limited-card, .partner-card { margin-top: 14px; padding: 20px; border-radius: 13px; }
.limited-card { border: 1px solid rgba(87,183,255,.3); background: linear-gradient(135deg,rgba(16,82,143,.24),rgba(7,28,49,.64)); }
.partner-card { border: 1px solid rgba(124,175,224,.12); background: rgba(4,18,33,.72); }
.limited-card strong, .partner-card strong { color: #e6f4ff; font-size: 16px; }
.limited-card p, .partner-card p { margin-top: 7px; color: #8fa7bf; font-size: 12px; line-height: 1.6; }
.partner-card em { display: block; margin-top: 10px; color: #73bfff; font-size: 12px; }
.package-basic { min-height: 430px; transform: none; }
.package-basic-copy { width: 100%; }
.basic-options { width: min(1080px,calc(100vw - 70px)); }
.basic-options-grid { align-items: start; }

@media (max-width: 1000px) {
    .packages-grid { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 820px; }
    .package-item { min-width: 0; }
    .package-comfort { grid-column: 1 / -1; width: min(500px,100%); justify-self: center; }
    .package-details, .basic-options, .package-item:hover .package-details, .package-item:focus-within .package-details, .package-item.is-open .package-details { width: 100%; max-height: 0; margin: 0; opacity: 0; overflow: hidden; transform: translateY(-10px); }
    .package-item.is-open .package-details { max-height: 4200px; margin-top: 18px; opacity: 1; overflow: visible; transform: none; }
    .basic-options-grid, .comfort-groups { grid-template-columns: 1fr; }
    .package-trigger, .package-basic { min-height: 390px; transform: none; }
}

@media (max-width: 650px) {
    .packages-grid { grid-template-columns: 1fr; }
    .package-comfort { grid-column: auto; width: 100%; }
    .package-trigger, .package-basic { min-height: 0; padding: 14px; }
    .package-summary { align-items: flex-start; flex-direction: column; }
    .package-image { margin: 10px 0; }
    .detail-panel, .basic-option-card { padding: 22px 19px; }
    .detail-list-columns { grid-template-columns: 1fr; }
    .detail-price-row { align-items: flex-start; flex-direction: column; }
    .comfort-group { padding: 17px; }
}

.header.scrolled {
    background: rgba(2, 10, 22, 0.88);
    border-bottom-color: rgba(130, 181, 235, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nav {
    min-height: 92px;

    display: flex;
    align-items: center;

    gap: 36px;
}


/* =========================================================
   LOGO

   Važno:
   tvoj logo već u sebi ima i TC znak i tekst Transportni centar.
   Zato NE dodajemo nikakav dodatni tekst u HTML-u.
========================================================= */

.logo {
    display: inline-flex;
    align-items: center;

    flex-shrink: 0;

    line-height: 0;
}

.logo img {
    display: block;

    width: 245px;
    height: auto;

    max-height: 68px;

    object-fit: contain;
    object-position: left center;
}


/* =========================================================
   NAVIGACIJA
========================================================= */

.menu {
    display: flex;
    align-items: center;

    gap: 39px;

    margin-left: auto;
}

.menu a {
    position: relative;

    color: #aebdd0;

    font-size: 15px;
    font-weight: 500;

    transition: color 0.25s ease;
}

.menu a:hover,
.menu a.active {
    color: #ffffff;
}

.menu a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -16px;

    height: 2px;

    border-radius: 20px;

    background: #339aff;

    box-shadow:
        0 0 8px #339aff,
        0 0 20px rgba(51, 154, 255, 0.75);
}


/* HEADER DUGME */
.nav-button {
    margin-left: 12px;

    padding: 15px 25px;

    flex-shrink: 0;

    border-radius: 10px;

    border:
        1px solid rgba(105, 183, 255, 0.4);

    font-size: 14px;
    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            #1679ff 0%,
            #36a5ff 100%
        );

    box-shadow:
        0 10px 35px rgba(0, 115, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.nav-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 15px 45px rgba(0, 115, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    padding-top: 112px;
    padding-bottom: 40px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 76% 36%,
            rgba(0, 110, 255, 0.12),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 62%,
            rgba(0, 174, 255, 0.05),
            transparent 24%
        ),

        radial-gradient(
            circle at 15% 70%,
            rgba(0, 229, 255, 0.04),
            transparent 30%
        ),

        linear-gradient(
            110deg,
            #020914 0%,
            #031020 34%,
            #03162c 69%,
            #051d3a 100%
        );
}

.hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 155px;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #020914
        );

    z-index: 2;
}


/* SUPTILNA POZADINSKA MREŽA */
.hero-grid {
    position: absolute;

    inset: 0;

    opacity: 0.045;

    background-image:
        linear-gradient(
            rgba(70, 146, 255, 0.11) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(70, 146, 255, 0.11) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 30%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 30%,
            transparent
        );

    pointer-events: none;
}


/* POZADINSKI GLOW */
.hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;
}

.glow-one {
    width: 500px;
    height: 500px;

    top: 17%;
    right: 7%;

    background:
        rgba(0, 119, 255, 0.09);
}

.glow-two {
    width: 330px;
    height: 330px;

    bottom: 5%;
    left: -120px;

    background:
        rgba(0, 217, 255, 0.045);
}


/* =========================================================
   GLAVNI HERO RASPORED
========================================================= */

.hero-content {
    position: relative;

    z-index: 5;

    width: 100vw;
    max-width: none;

    display: grid;

    grid-template-columns:
        minmax(470px, 0.86fr)
        minmax(0, 1.14fr);

    align-items: center;

    gap: 22px;

    margin: 0;

    padding-left:
        max(
            35px,
            calc((100vw - 1640px) / 2)
        );

    padding-right: 0;
}


/* LEVA STRANA */
.hero-text {
    position: relative;

    z-index: 10;

    width: 100%;
    max-width: 650px;

    padding-top: 10px;
}

.eyebrow {
    margin-bottom: 23px;

    color: #3fa6ff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 4px;
    line-height: 1.5;
}

.hero h1 {
    max-width: 650px;

    font-size:
        clamp(
            53px,
            4.25vw,
            77px
        );

    line-height: 1.035;

    letter-spacing: -3px;

    font-weight: 800;

    color: #ffffff;
}

.hero h1 span {
    display: block;

    color: #71b5ff;

    text-shadow:
        0 0 35px rgba(32, 134, 255, 0.15);
}

.hero-description {
    max-width: 610px;

    margin-top: 28px;

    color: #a8b9ce;

    font-size: 17px;

    line-height: 1.75;

    font-weight: 400;
}


/* =========================================================
   HERO DUGMAD
========================================================= */

.hero-buttons {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-top: 34px;
}

.button {
    min-height: 56px;

    padding: 0 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.button.primary {
    background:
        linear-gradient(
            135deg,
            #1678ff,
            #3aa6ff
        );

    border:
        1px solid rgba(97, 183, 255, 0.35);

    box-shadow:
        0 12px 40px rgba(0, 111, 255, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.button.primary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 55px rgba(0, 111, 255, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.arrow {
    font-size: 20px;

    line-height: 1;
}

.button.secondary {
    color: #d9e7f8;

    background:
        rgba(5, 23, 43, 0.58);

    border:
        1px solid rgba(72, 158, 255, 0.44);

    backdrop-filter: blur(10px);
}

.button.secondary:hover {
    transform: translateY(-3px);

    background:
        rgba(17, 57, 95, 0.65);

    border-color:
        #3996ff;
}


/* =========================================================
   HERO FEATURES
========================================================= */

.hero-features {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        12px 18px;

    max-width:
        620px;

    margin-top:
        42px;
}

.feature {
    display: flex;
    align-items: center;

    gap: 14px;

    min-height: 70px;

    padding:
        9px 8px;

    border-radius:
        12px;

    transition:
        background 0.25s ease;
}

.feature:hover {
    background:
        rgba(255, 255, 255, 0.025);
}

.feature-icon {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #57b6ff;

    font-size: 13px;
    font-weight: 800;

    border-radius: 50%;

    border:
        1px solid rgba(57, 158, 255, 0.35);

    background:
        linear-gradient(
            145deg,
            rgba(16, 77, 132, 0.45),
            rgba(4, 19, 36, 0.75)
        );

    box-shadow:
        inset 0 0 20px rgba(40, 143, 255, 0.08),
        0 0 25px rgba(0, 103, 255, 0.06);
}

.feature-copy strong {
    display: block;

    margin-bottom: 4px;

    color: #eef6ff;

    font-size: 13px;
    font-weight: 700;
}

.feature-copy span {
    display: block;

    color: #6e89a7;

    font-size: 11px;
}


/* =========================================================
   DESNA STRANA - HERO SLIKA
========================================================= */

.hero-visual {
    position: relative;

    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    overflow: visible;
}

.hero-image-wrap {
    position: relative;

    width:
        min(
            59vw,
            1160px
        );

    aspect-ratio:
        1672 / 941;

    flex-shrink: 0;

    margin-left: auto;

    transform:
        translateY(18px);

    isolation: isolate;
}


/* ZAMUĆENA KOPIJA PRATI ISTE DIMENZIJE I ASPECT-RATIO KAO SLIKA */
.hero-image-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url("../assets/images/hero-software.png") center / cover no-repeat;
    opacity: 0.28;
    filter: blur(14px) brightness(0.72) saturate(0.9);
    transform: scale(0.985);
    pointer-events: none;

    -webkit-mask-image: radial-gradient(
        ellipse 88% 86% at 58% 43%,
        transparent 0 54%,
        rgba(0, 0, 0, 0.45) 67%,
        rgba(0, 0, 0, 0.18) 80%,
        transparent 98%
    );
    mask-image: radial-gradient(
        ellipse 88% 86% at 58% 43%,
        transparent 0 54%,
        rgba(0, 0, 0, 0.45) 67%,
        rgba(0, 0, 0, 0.18) 80%,
        transparent 98%
    );
}


/* GLAVNA HERO SLIKA */
.hero-image-wrap img {
    position: absolute;

    inset: 0;

    z-index: 2;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border: none;
    border-radius: 0;

    opacity: 0.98;

    filter:
        brightness(0.80)
        saturate(0.95)
        contrast(1.04);

    -webkit-mask-image:
        radial-gradient(
            ellipse 88% 86% at 58% 43%,
            #000 0%,
            #000 55%,
            rgba(0, 0, 0, 0.92) 64%,
            rgba(0, 0, 0, 0.68) 74%,
            rgba(0, 0, 0, 0.38) 84%,
            rgba(0, 0, 0, 0.12) 93%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse 88% 86% at 58% 43%,
            #000 0%,
            #000 55%,
            rgba(0, 0, 0, 0.92) 64%,
            rgba(0, 0, 0, 0.68) 74%,
            rgba(0, 0, 0, 0.38) 84%,
            rgba(0, 0, 0, 0.12) 93%,
            transparent 100%
        );
}

.hero-image-wrap::after {
    content: none;
}

section[id] {
    scroll-margin-top: 100px;
}


/* =========================================================
   PLATFORMA / FUNKCIJE
========================================================= */

.platform-section {
    position: relative;
    isolation: isolate;
    padding: 105px 0 120px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(14, 99, 205, 0.11), transparent 38%),
        radial-gradient(circle at 8% 78%, rgba(0, 181, 255, 0.035), transparent 26%),
        #020914;
}

.platform-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.032;
    background-image:
        linear-gradient(rgba(73, 150, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73, 150, 255, 0.12) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
    pointer-events: none;
}

.platform-heading {
    max-width: 900px;
    margin: 0 auto 58px;
    text-align: center;
}

.section-label {
    display: block;
    margin-bottom: 17px;
    color: #3ba0ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
}

.platform-heading h2 {
    font-size: clamp(42px, 3.25vw, 58px);
    line-height: 1.1;
    letter-spacing: -2px;
}

.platform-heading h2 span {
    color: #70b2ff;
}

.platform-heading > p {
    max-width: 780px;
    margin: 22px auto 0;
    color: #92a8c2;
    font-size: 17px;
    line-height: 1.75;
}

.platform-showcase {
    position: relative;
    width: min(100%, 1400px);
    aspect-ratio: 1672 / 941;
    margin: 0 auto 62px;
    isolation: isolate;
}

.platform-showcase::before {
    content: "";
    position: absolute;
    inset: 8% 9%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(24, 126, 255, 0.12), transparent 70%);
    filter: blur(52px);
    pointer-events: none;
}

.platform-showcase img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.35s ease;
    -webkit-mask-image: radial-gradient(ellipse 94% 91% at 50% 48%, #000 0 70%, rgba(0, 0, 0, 0.86) 80%, rgba(0, 0, 0, 0.38) 91%, transparent 100%);
    mask-image: radial-gradient(ellipse 94% 91% at 50% 48%, #000 0 70%, rgba(0, 0, 0, 0.86) 80%, rgba(0, 0, 0, 0.38) 91%, transparent 100%);
}

.platform-showcase img.is-loaded {
    opacity: 1;
}

.platform-showcase.asset-missing {
    display: none;
}

.platform-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.platform-card {
    min-height: 220px;
    padding: 28px 26px;
    border: 1px solid rgba(116, 169, 226, 0.12);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(10, 29, 50, 0.72), rgba(4, 16, 30, 0.58));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.platform-card:hover {
    transform: translateY(-4px);
    border-color: rgba(72, 158, 255, 0.24);
    background: linear-gradient(145deg, rgba(12, 37, 65, 0.76), rgba(4, 18, 34, 0.64));
}

.platform-card h3 {
    margin: 21px 0 11px;
    color: #edf6ff;
    font-size: 18px;
    line-height: 1.3;
}

.platform-card p {
    color: #8299b4;
    font-size: 14px;
    line-height: 1.7;
}

.platform-icon {
    position: relative;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(72, 163, 255, 0.23);
    border-radius: 11px;
    background: rgba(21, 105, 198, 0.1);
}

.platform-icon span {
    position: absolute;
    left: 11px;
    width: 19px;
    height: 2px;
    border-radius: 4px;
    background: #55adff;
}

.platform-icon span:nth-child(1) { top: 11px; }
.platform-icon span:nth-child(2) { top: 19px; width: 14px; }
.platform-icon span:nth-child(3) { top: 27px; width: 17px; }

.icon-deadline span:nth-child(1) { top: 10px; height: 19px; width: 19px; border: 2px solid #55adff; background: transparent; }
.icon-deadline span:nth-child(2) { top: 15px; left: 15px; width: 2px; height: 7px; }
.icon-deadline span:nth-child(3) { top: 21px; left: 15px; width: 7px; }
.icon-costs span { bottom: 10px; top: auto; width: 4px; }
.icon-costs span:nth-child(1) { left: 11px; height: 8px; }
.icon-costs span:nth-child(2) { left: 19px; height: 14px; }
.icon-costs span:nth-child(3) { left: 27px; height: 20px; }
.icon-devices span:nth-child(1) { top: 10px; left: 9px; width: 20px; height: 15px; border: 2px solid #55adff; background: transparent; }
.icon-devices span:nth-child(2) { top: 28px; left: 14px; width: 11px; }
.icon-devices span:nth-child(3) { top: 16px; left: 27px; width: 7px; height: 14px; border: 2px solid #55adff; background: #07172a; }


/* =========================================================
   PAKETI
========================================================= */

.packages-section {
    position: relative;
    isolation: isolate;
    padding: 115px 0 130px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 31%, rgba(15, 105, 229, 0.12), transparent 34%),
        radial-gradient(circle at 92% 78%, rgba(0, 173, 255, 0.035), transparent 26%),
        linear-gradient(180deg, #020914 0%, #031020 52%, #020914 100%);
}

.packages-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.025;
    background-image:
        linear-gradient(rgba(67, 145, 250, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(67, 145, 250, 0.15) 1px, transparent 1px);
    background-size: 76px 76px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 78%, transparent);
}

.packages-heading {
    max-width: 900px;
    margin: 0 auto 68px;
    text-align: center;
}

.packages-heading h2 {
    font-size: clamp(42px, 3.25vw, 58px);
    line-height: 1.1;
    letter-spacing: -2px;
}

.packages-heading h2 span {
    color: #70b2ff;
}

.packages-heading > p {
    max-width: 790px;
    margin: 22px auto 0;
    color: #92a8c2;
    font-size: 17px;
    line-height: 1.75;
}

.packages-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.18fr) minmax(0, 0.88fr);
    align-items: start;
    gap: 24px;
    max-width: 1460px;
    margin: 0 auto;
}

.package-card {
    position: relative;
    border: 1px solid rgba(115, 170, 230, 0.13);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(10, 31, 54, 0.76), rgba(4, 16, 30, 0.7));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 24px 65px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.package-placeholder {
    min-height: 360px;
    padding: 34px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    transition: transform 0.28s ease, border-color 0.28s ease;
}

.package-placeholder:hover {
    transform: translateY(-5px);
    border-color: rgba(75, 160, 255, 0.24);
}

.package-placeholder::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -110px;
    right: -90px;
    border-radius: 50%;
    background: rgba(32, 128, 238, 0.08);
    filter: blur(42px);
}

.package-number {
    position: absolute;
    top: 25px;
    right: 28px;
    color: rgba(111, 177, 248, 0.11);
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
}

.package-kicker,
.option-label {
    display: block;
    color: #439ff6;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.package-placeholder h3 {
    max-width: 270px;
    margin: 12px 0 10px;
    font-size: 27px;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

.package-placeholder p {
    color: #7790ad;
    font-size: 14px;
}

.basic-package-group {
    position: relative;
    z-index: 3;
    min-width: 0;
}

.package-basic {
    padding: 19px;
    cursor: pointer;
    outline: none;
    border-color: rgba(55, 157, 255, 0.28);
    background: linear-gradient(145deg, rgba(10, 39, 70, 0.88), rgba(3, 17, 33, 0.84));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 25px 70px rgba(0, 76, 175, 0.16);
    transform: translateY(-12px) scale(1.025);
    transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}

.basic-package-group:hover .package-basic,
.basic-package-group:focus-within .package-basic {
    transform: translateY(-17px) scale(1.045);
    border-color: rgba(73, 175, 255, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 90px rgba(0, 103, 255, 0.28);
}

.package-basic > .package-kicker {
    margin: 3px 4px 14px;
}

.package-basic-image {
    width: 100%;
    aspect-ratio: 1672 / 941;
}

.package-basic-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.package-basic-copy {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 6px 5px;
}

.package-basic-copy h3 {
    margin-bottom: 5px;
    font-size: 27px;
    line-height: 1.1;
}

.package-basic-copy p {
    color: #8199b5;
    font-size: 13px;
}

.package-basic-copy strong {
    flex-shrink: 0;
    color: #75c6ff;
    font-size: 14px;
}

.package-hint {
    display: block;
    margin: 17px 6px 2px;
    padding-top: 13px;
    border-top: 1px solid rgba(117, 179, 240, 0.1);
    color: #67829f;
    font-size: 11px;
    text-align: center;
    transition: color 0.25s ease;
}

.basic-package-group:hover .package-hint,
.basic-package-group:focus-within .package-hint {
    color: #74bfff;
}

.basic-options {
    width: min(940px, calc(100vw - 70px));
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(calc((100% - min(940px, calc(100vw - 70px))) / 2)) translateY(-14px);
    transition: max-height 0.7s ease, opacity 0.38s ease, transform 0.5s ease, margin 0.5s ease;
}

.basic-package-group:hover .basic-options,
.basic-package-group:focus-within .basic-options {
    max-height: 1100px;
    margin-top: 28px;
    opacity: 1;
    transform: translateX(calc((100% - min(940px, calc(100vw - 70px))) / 2)) translateY(0);
}

.basic-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 3px;
}

.basic-option-card {
    padding: 28px;
    border: 1px solid rgba(89, 164, 236, 0.16);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(9, 33, 58, 0.97), rgba(4, 18, 34, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 24px 60px rgba(0, 0, 0, 0.22);
}

.basic-option-card h3 {
    margin: 10px 0 5px;
    font-size: 23px;
    line-height: 1.2;
}

.option-subtitle {
    color: #839ab5;
    font-size: 13px;
}

.option-price {
    margin-top: 22px;
    color: #a9bdd2;
    font-size: 14px;
}

.option-price strong {
    color: #72c5ff;
    font-size: 25px;
}

.option-minimum {
    margin-top: 5px;
    color: #e3edf7;
    font-size: 12px;
    font-weight: 700;
}

.basic-option-card ul {
    display: grid;
    gap: 9px;
    margin: 23px 0;
    list-style: none;
}

.basic-option-card li {
    position: relative;
    padding-left: 20px;
    color: #9aafc5;
    font-size: 12px;
    line-height: 1.5;
}

.basic-option-card li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 1px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #48aaff;
    box-shadow: 0 0 10px rgba(44, 157, 255, 0.65);
}

.option-note {
    padding-top: 16px;
    border-top: 1px solid rgba(124, 174, 225, 0.1);
}

.option-note p {
    color: #657f9c;
    font-size: 10px;
    line-height: 1.55;
}

.option-note p + p {
    margin-top: 5px;
}


/* =========================================================
   1600 PX
========================================================= */

@media (max-width: 1600px) {

    .hero-image-wrap {
        width:
            min(
                58vw,
                1080px
            );
    }
}


/* =========================================================
   1450 PX
========================================================= */

@media (max-width: 1450px) {

    .container {
        width:
            min(
                1380px,
                calc(100% - 60px)
            );
    }

    .hero-content {
        grid-template-columns:
            minmax(420px, 0.90fr)
            minmax(0, 1.10fr);

        gap:
            20px;

        padding-left:
            30px;
    }

    .hero h1 {
        font-size:
            61px;
    }

    .hero-description {
        font-size:
            16px;
    }

    .hero-image-wrap {
        width:
            min(
                57vw,
                1000px
            );

        transform:
            translateY(16px);
    }
}


/* =========================================================
   1200 PX
========================================================= */

@media (max-width: 1200px) {

    .container {
        width:
            calc(100% - 50px);
    }

    .menu {
        gap:
            22px;
    }

    .menu a {
        font-size:
            14px;
    }

    /* Logo samo postaje malo manji na manjim ekranima */
    .logo img {
        width: 215px;
        height: auto;
        max-height: 60px;
    }

    .hero-content {
        grid-template-columns:
            minmax(400px, 0.95fr)
            minmax(0, 1.05fr);

        gap:
            18px;

        padding-left:
            25px;
    }

    .hero h1 {
        font-size:
            54px;
    }

    .hero-description {
        font-size:
            15px;
    }

    .hero-image-wrap {
        width:
            min(
                56vw,
                880px
            );

        transform:
            translateY(14px);
    }

    .platform-section {
        padding-bottom: 100px;
    }

    .platform-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-card {
        min-height: 195px;
    }

    .packages-section {
        padding-bottom: 110px;
    }

    .packages-grid {
        gap: 18px;
    }

    .package-placeholder {
        min-height: 330px;
        padding: 27px;
    }

    .package-basic {
        transform: translateY(-8px) scale(1.015);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .container {
        width:
            min(
                900px,
                calc(100% - 40px)
            );
    }

    .menu {
        display:
            none;
    }

    .nav {
        min-height:
            82px;
    }

    .hero {
        min-height:
            auto;

        padding-top:
            135px;

        padding-bottom:
            80px;
    }

    .hero-content {
        width:
            100%;

        display:
            flex;

        flex-direction:
            column;

        gap:
            45px;

        padding-left:
            20px;

        padding-right:
            20px;
    }

    .hero-text {
        width:
            100%;

        max-width:
            none;

        text-align:
            center;
    }

    .hero h1 {
        max-width:
            720px;

        margin:
            0 auto;

        font-size:
            62px;
    }

    .hero-description {
        max-width:
            690px;

        margin-left:
            auto;

        margin-right:
            auto;
    }

    .hero-buttons {
        justify-content:
            center;
    }

    .hero-features {
        max-width:
            700px;

        margin-left:
            auto;

        margin-right:
            auto;

        text-align:
            left;
    }

    .hero-visual {
        width:
            100%;

        justify-content:
            center;
    }

    .hero-image-wrap {
        width:
            min(
                94vw,
                900px
            );

        margin:
            0 auto;

        transform:
            none;
    }

    .platform-section {
        padding-top: 90px;
    }

    .platform-heading {
        margin-bottom: 45px;
    }

    .platform-heading > p {
        font-size: 16px;
    }

    .platform-showcase {
        width: 100%;
        margin-bottom: 48px;
    }

    .packages-section {
        padding-top: 95px;
    }

    .packages-heading {
        margin-bottom: 52px;
    }

    .packages-heading > p {
        font-size: 16px;
    }

    .packages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
    }

    .basic-package-group {
        grid-column: 1 / -1;
        order: -1;
        width: min(680px, 100%);
        justify-self: center;
    }

    .package-basic,
    .basic-package-group:hover .package-basic,
    .basic-package-group:focus-within .package-basic {
        transform: none;
    }

    .basic-options,
    .basic-package-group:hover .basic-options,
    .basic-package-group:focus-within .basic-options {
        width: 100%;
        max-height: 1300px;
        margin-top: 24px;
        opacity: 1;
        overflow: visible;
        transform: none;
    }

    .package-hint {
        display: none;
    }

    .package-placeholder {
        min-height: 260px;
    }

}


/* =========================================================
   TELEFON
========================================================= */

@media (max-width: 650px) {

    .container {
        width:
            calc(100% - 28px);
    }

    .nav {
        min-height:
            76px;

        gap:
            15px;
    }

    /* Logo je i dalje samo slika */
    .logo img {
        width: 165px;
        height: auto;
        max-height: 48px;
    }

    .nav-button {
        padding:
            11px 14px;

        font-size:
            11px;
    }

    .hero {
        padding-top:
            115px;

        padding-bottom:
            55px;
    }

    .hero-content {
        padding-left:
            14px;

        padding-right:
            14px;
    }

    .eyebrow {
        margin-bottom:
            17px;

        font-size:
            9px;

        letter-spacing:
            2px;
    }

    .hero h1 {
        font-size:
            42px;

        line-height:
            1.05;

        letter-spacing:
            -2px;
    }

    .hero-description {
        margin-top:
            22px;

        font-size:
            15px;

        line-height:
            1.65;
    }

    .hero-buttons {
        flex-direction:
            column;

        width:
            100%;

        margin-top:
            29px;
    }

    .button {
        width:
            100%;
    }

    .hero-features {
        grid-template-columns:
            1fr;

        margin-top:
            32px;
    }

    .hero-image-wrap {
        width:
            100%;

        max-width:
            100%;

        margin:
            0 auto;
    }

    .hero-image-wrap img {
        filter:
            brightness(0.84)
            saturate(0.95)
            contrast(1.02);
    }

    .platform-section {
        padding: 76px 0 82px;
    }

    .platform-heading {
        margin-bottom: 36px;
        text-align: left;
    }

    .platform-heading h2 {
        font-size: 36px;
        letter-spacing: -1.4px;
    }

    .platform-heading > p {
        margin-top: 18px;
        font-size: 15px;
    }

    .platform-showcase {
        margin-bottom: 38px;
    }

    .platform-features {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .platform-card {
        min-height: 0;
        padding: 24px 22px;
    }

    .packages-section {
        padding: 82px 0 88px;
    }

    .packages-heading {
        margin-bottom: 38px;
        text-align: left;
    }

    .packages-heading h2 {
        font-size: 36px;
        letter-spacing: -1.4px;
    }

    .packages-heading > p {
        margin-top: 18px;
        font-size: 15px;
    }

    .packages-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .basic-package-group {
        grid-column: auto;
    }

    .package-basic {
        padding: 14px;
        border-radius: 16px;
    }

    .package-basic-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding-top: 14px;
    }

    .basic-options {
        max-height: 2800px;
        margin-top: 15px;
    }

    .basic-options-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0;
    }

    .basic-option-card {
        padding: 24px 21px;
    }

    .package-placeholder {
        min-height: 210px;
        padding: 24px 22px;
    }

    .package-placeholder h3 {
        font-size: 24px;
    }
}

/* Završni package layout override — zajednički format sve tri kartice */
.packages-section .packages-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; max-width: 1460px; }
.packages-section .package-item { min-width: 0; }
.packages-section .package-trigger { width: 100%; min-height: 430px; padding: 18px; display: flex; flex-direction: column; transform: none; }
.packages-section .package-basic-image { margin: 14px 0; }
.packages-section .package-basic-copy { width: 100%; }
.packages-section .package-details { width: min(1080px,calc(100vw - 70px)); max-height: 0; margin: 0; opacity: 0; overflow: hidden; transform: translateX(calc((100% - min(1080px,calc(100vw - 70px))) / 2)) translateY(-12px); }
.packages-section .package-item:hover .package-details,
.packages-section .package-item:focus-within .package-details,
.packages-section .package-item.is-open .package-details { max-height: 4200px; margin-top: 28px; opacity: 1; transform: translateX(calc((100% - min(1080px,calc(100vw - 70px))) / 2)) translateY(0); }
.packages-section .basic-options-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

@media (max-width: 1000px) {
    .packages-section .packages-grid { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 820px; }
    .packages-section .package-comfort { grid-column: 1 / -1; width: min(500px,100%); justify-self: center; }
    .packages-section .package-trigger { min-height: 390px; }
    .packages-section .package-details,
    .packages-section .package-item:hover .package-details,
    .packages-section .package-item:focus-within .package-details { width: 100%; max-height: 0; margin: 0; opacity: 0; overflow: hidden; transform: translateY(-10px); }
    .packages-section .package-item.is-open .package-details { max-height: 5200px; margin-top: 18px; opacity: 1; overflow: visible; transform: none; }
    .packages-section .basic-options-grid,
    .packages-section .comfort-groups { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .packages-section .packages-grid { grid-template-columns: 1fr; }
    .packages-section .package-comfort { grid-column: auto; width: 100%; }
    .packages-section .package-trigger { min-height: 0; padding: 14px; }
    .packages-section .basic-options-grid { grid-template-columns: 1fr; }
}

/* Paketi — centrirani detalji i single-open stanje */
.packages-section .package-details,
.packages-section .package-item:not(.is-open):hover .package-details,
.packages-section .package-item:not(.is-open):focus-within .package-details {
    position: relative;
    left: 50%;
    width: min(1080px, calc(100vw - 70px));
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transform: translate(-50%, 12px);
    transition: max-height 280ms ease, opacity 250ms ease, transform 280ms ease, margin 280ms ease;
}

.packages-section .package-item.is-open .package-details {
    max-height: 4200px;
    margin-top: 24px;
    opacity: 1;
    transform: translate(-50%, 0);
}

.packages-section .basic-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

.packages-section .basic-option-card {
    width: 100%;
    height: 100%;
}

.package-highlights {
    display: grid;
    gap: 6px;
    width: 100%;
    margin-top: 16px;
}

.package-highlights > span {
    position: relative;
    padding-left: 15px;
    color: #8fa8c1;
    font-size: 10px;
    line-height: 1.4;
}

.package-highlights > span::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 1px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4aaaff;
}

.package-audience {
    display: block;
    margin-top: 10px;
    color: #71b8ef;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.package-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.package-hint i {
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 250ms ease;
}

.package-item.is-open .package-hint i {
    transform: rotate(225deg) translate(-1px, -1px);
}

@media (max-width: 1000px) {
    .packages-section .package-details,
    .packages-section .package-item:not(.is-open):hover .package-details,
    .packages-section .package-item:not(.is-open):focus-within .package-details {
        left: auto;
        width: 100%;
        transform: translateY(12px);
    }

    .packages-section .package-item.is-open .package-details {
        max-height: 5200px;
        transform: translateY(0);
    }
}

@media (max-width: 650px) {
    .packages-section .basic-options-grid {
        grid-template-columns: 1fr;
    }
}

/* Aktivna kartica raste iz svoje pozicije ka centru istog reda. */
.packages-section .packages-grid {
    position: relative;
    align-items: start;
}

.packages-section .package-item {
    left: 0;
    width: 100%;
    z-index: 1;
    transition: left 380ms cubic-bezier(.22, 1, .36, 1),
                width 380ms cubic-bezier(.22, 1, .36, 1),
                opacity 300ms ease, transform 380ms cubic-bezier(.22, 1, .36, 1);
}

.packages-section .packages-grid.has-active .package-item:not(.is-open) {
    opacity: .38;
    transform: scale(.97);
}

.packages-section .package-item.is-open {
    left: var(--morph-offset, 0px);
    width: var(--morph-width, min(1100px, calc(100vw - 180px)));
    z-index: 5;
    opacity: 1;
    padding: 10px;
    border: 1px solid rgba(74, 169, 255, .32);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(8, 31, 56, .98), rgba(3, 16, 31, .98));
    box-shadow: 0 28px 90px rgba(0, 50, 120, .25);
}

.packages-section .package-trigger,
.packages-section .package-basic {
    height: 430px;
    min-height: 430px;
    transform: none;
}

.packages-section .package-item.is-open .package-trigger,
.packages-section .package-item.is-open .package-basic {
    height: auto;
    min-height: 430px;
    transform: none;
    border-color: rgba(74, 169, 255, .42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 28px 80px rgba(0,91,205,.23);
}

.packages-section .package-item.is-open .package-image,
.packages-section .package-item.is-open .package-basic-image {
    width: min(100%, 520px);
    align-self: center;
}

.packages-section .expanded-key-points {
    margin-top: 16px;
    color: #b5d7f1;
    font-size: 13px;
    line-height: 1.6;
}

.packages-section .package-item.is-open .package-details,
.packages-section .package-item:not(.is-open):hover .package-details,
.packages-section .package-item:not(.is-open):focus-within .package-details {
    left: auto;
    width: 100%;
    transform: translateY(12px);
}

.packages-section .package-item.is-open .package-details {
    max-height: var(--details-height, 4200px);
    margin-top: 0;
    opacity: 1;
    transform: translateY(0);
}

.packages-section .basic-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

@media (max-width: 1000px) {
    .packages-section .package-item.is-open {
        left: 0;
        width: 100%;
    }

    .packages-section .package-item.is-open .package-details {
        max-height: var(--details-height, 5200px);
    }

    .packages-section .package-trigger,
    .packages-section .package-basic { height: 390px; min-height: 390px; }
}

@media (max-width: 650px) {
    .packages-section .package-trigger,
    .packages-section .package-basic { height: auto; min-height: 0; }
    .packages-section .basic-options-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .packages-section .package-item,
    .packages-section .package-details { transition-duration: 0.01ms; }
}

/* Glavne kartice: naziv, cena i status imaju prednost u zatvorenom stanju. */
.packages-section .package-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.packages-section .package-summary strong,
.packages-section .package-basic-copy h3 {
    color: #f5faff;
    font-size: clamp(28px, 2.2vw, 34px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.1px;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .2);
}

.packages-section .package-summary small,
.packages-section .package-basic-copy > strong {
    color: #91d0ff;
    font-size: 15px;
    font-weight: 700;
}

.packages-section .package-summary em {
    padding: 7px 10px;
    color: #a7d7f9;
    font-size: 10px;
}

.packages-section .package-basic-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding-top: 11px;
}

.packages-section .package-basic-copy h3 { margin: 0; }
.packages-section .package-basic-copy p { color: #7790aa; font-size: 12px; }

.packages-section .basic-package-group .package-basic {
    border-color: rgba(74, 166, 255, .36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07),
                0 23px 68px rgba(0, 99, 223, .23),
                0 0 34px rgba(22, 121, 235, .09);
}

.packages-section .basic-package-group:not(.is-open) .package-basic {
    transform: scale(1.012);
}

/* U mirovanju sve tri kartice dele istu osnovnu liniju; hover ostaje netaknut. */
.packages-section .basic-package-group:not(.is-open):not(:hover):not(:focus-within) .package-basic {
    transform: none;
}

.packages-section .package-basic > .package-kicker {
    align-self: flex-start;
    margin: 2px 5px 0;
    padding: 8px 12px;
    border: 1px solid rgba(121, 205, 255, .36);
    border-radius: 999px;
    background: rgba(22, 116, 211, .23);
    color: #b7e7ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    box-shadow: 0 5px 18px rgba(0, 104, 214, .1);
}

.packages-section .package-item:not(.is-open) .package-highlights,
.packages-section .package-item:not(.is-open) .package-audience,
.packages-section .package-item:not(.is-open):not(.basic-package-group) .package-kicker {
    display: none;
}

.packages-section .package-hook {
    color: #8fa9c2;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 650px) {
    .packages-section .package-summary strong,
    .packages-section .package-basic-copy h3 { font-size: 30px; }
}

/* =========================================================
   MOBILNA APLIKACIJA
========================================================= */

.mobile-section {
    position: relative;
    isolation: isolate;
    padding: 112px 0 120px;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 37%, rgba(13, 109, 220, .11), transparent 35%),
        radial-gradient(circle at 7% 88%, rgba(0, 181, 255, .035), transparent 30%),
        linear-gradient(180deg, #020914 0%, #031020 55%, #020914 100%);
}

.mobile-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .035;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(69, 144, 242, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69, 144, 242, .12) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 78%, transparent);
}

.mobile-layout {
    display: grid;
    grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
    grid-template-areas: "intro showcase" "content showcase";
    align-items: center;
    column-gap: clamp(48px, 5vw, 104px);
}

.mobile-intro { grid-area: intro; align-self: end; }
.mobile-content { grid-area: content; align-self: start; }
.mobile-showcase { grid-area: showcase; position: relative; min-width: 0; }

.mobile-intro h2 {
    max-width: 660px;
    font-size: clamp(42px, 3.6vw, 64px);
    line-height: 1.08;
    letter-spacing: -2.2px;
}

.mobile-intro h2 span { color: #70b2ff; }

.mobile-intro > p {
    max-width: 640px;
    margin-top: 26px;
    color: #a2b7ce;
    font-size: 16px;
    line-height: 1.75;
}

.mobile-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 31px;
    list-style: none;
}

.mobile-feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 61px;
    padding: 10px 13px;
    border: 1px solid rgba(96, 166, 231, .12);
    border-radius: 11px;
    background: rgba(10, 31, 54, .52);
    color: #d0e0f0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.mobile-feature-list li:hover {
    border-color: rgba(77, 171, 255, .28);
    background: rgba(15, 49, 81, .66);
    transform: translateY(-2px);
}

.mobile-feature-icon {
    display: inline-flex;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(74, 170, 255, .25);
    border-radius: 9px;
    background: rgba(30, 119, 203, .13);
    color: #60bdff;
    font-size: 17px;
    font-weight: 700;
    transition: transform .25s ease, box-shadow .25s ease;
}

.mobile-feature-list li:hover .mobile-feature-icon {
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(37, 147, 255, .16);
}

.mobile-audience {
    max-width: 630px;
    margin-top: 24px;
    color: #7892ae;
    font-size: 13px;
    line-height: 1.7;
}

.mobile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.mobile-actions .button { min-height: 52px; padding: 0 22px; }

.mobile-showcase::before {
    content: "";
    position: absolute;
    inset: 12% 6% 8%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(24, 127, 255, .16), transparent 70%);
    filter: blur(56px);
    pointer-events: none;
}

.mobile-shot {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(95, 171, 238, .14);
    border-radius: 15px;
    background: rgba(5, 20, 38, .48);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .23);
    transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.mobile-shot:hover {
    transform: translateY(-5px);
    border-color: rgba(87, 177, 255, .32);
    box-shadow: 0 24px 60px rgba(0, 63, 137, .22);
}

.mobile-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
}

.mobile-shot-main { border-radius: 19px; }

.mobile-shot-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    width: 93%;
    margin: 15px auto 0;
}

@media (max-width: 1200px) {
    .mobile-layout { column-gap: 40px; }
    .mobile-feature-list { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
    .mobile-section { padding: 90px 0 100px; }
    .mobile-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "intro" "showcase" "content";
        row-gap: 36px;
    }
    .mobile-intro { max-width: 760px; }
    .mobile-intro h2 { font-size: clamp(42px, 6vw, 60px); }
    .mobile-showcase { width: min(100%, 820px); margin: 0 auto; }
    .mobile-content { width: min(100%, 820px); margin: 0 auto; }
    .mobile-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
}

@media (max-width: 650px) {
    .mobile-section { padding: 76px 0 82px; }
    .mobile-layout { row-gap: 29px; }
    .mobile-intro h2 { font-size: 38px; letter-spacing: -1.5px; }
    .mobile-intro > p { margin-top: 20px; font-size: 15px; }
    .mobile-shot-pair { width: 100%; gap: 10px; margin-top: 10px; }
    .mobile-shot, .mobile-shot-main { border-radius: 11px; }
    .mobile-feature-list { grid-template-columns: 1fr; }
    .mobile-actions { flex-direction: column; }
    .mobile-actions .button { width: 100%; }
}

@media (max-width: 420px) {
    .mobile-shot-pair { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-shot, .mobile-feature-list li, .mobile-feature-icon { transition-duration: .01ms; }
}

/* Mobilni showcase: tri prikaza čine jedan vizuelni blok. */
.mobile-shot-pair {
    width: 100%;
    gap: 12px;
    margin: 12px 0 0;
}

.mobile-shot-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.mobile-shot-button:focus-visible {
    outline: 2px solid #63baff;
    outline-offset: -4px;
    border-radius: inherit;
}

.mobile-shot-button img { transition: transform .32s ease; }
.mobile-shot-button:hover img { transform: scale(1.012); }

.mobile-extended { margin-top: 92px; }
.mobile-extended-intro { max-width: 920px; margin: 0 auto 36px; text-align: center; }
.mobile-extended-intro h3 { font-size: clamp(32px, 3vw, 46px); line-height: 1.16; letter-spacing: -1.5px; }
.mobile-extended-intro h3 span { color: #78baff; }
.mobile-extended-intro p { margin-top: 16px; color: #9cb4ce; font-size: 16px; }

.mobile-access-levels,
.mobile-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mobile-admin-grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); margin-top: 18px; }

.mobile-access-level,
.mobile-admin-card,
.mobile-setup-card {
    min-width: 0;
    border: 1px solid rgba(105, 170, 229, .14);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(10, 35, 61, .72), rgba(4, 18, 34, .72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 48px rgba(0, 0, 0, .14);
}

.mobile-access-level { padding: 26px 28px; }
.mobile-access-level-admin { border-color: rgba(85, 173, 255, .28); background: linear-gradient(145deg, rgba(13, 48, 79, .8), rgba(4, 21, 40, .75)); }
.mobile-level-number,
.mobile-card-label { display: block; color: #63b6f6; font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.mobile-access-level h4 { margin: 12px 0 8px; color: #eff7ff; font-size: 21px; }
.mobile-access-level p { color: #91a9c2; font-size: 13px; line-height: 1.65; }

.mobile-admin-card,
.mobile-setup-card { padding: 32px; }
.mobile-admin-card h4,
.mobile-setup-card h4 { margin: 12px 0 15px; color: #f0f8ff; font-size: clamp(23px, 2vw, 29px); line-height: 1.2; letter-spacing: -.6px; }
.mobile-admin-card > p,
.mobile-setup-card > p { color: #9aafc6; font-size: 14px; line-height: 1.7; }
.mobile-admin-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 18px; margin-top: 24px; list-style: none; }
.mobile-admin-list li { position: relative; padding-left: 18px; color: #b8cce0; font-size: 12px; line-height: 1.5; }
.mobile-admin-list li::before { content: ""; position: absolute; left: 0; top: .48em; width: 7px; height: 7px; border-radius: 50%; background: #4cbaff; }
.mobile-setup-steps { display: grid; gap: 10px; margin: 24px 0 0; padding-left: 22px; color: #b8cce0; font-size: 12px; line-height: 1.55; }
.mobile-setup-steps li::marker { color: #61baff; font-weight: 800; }
.mobile-takeaway { display: block; margin-top: 26px; padding-top: 17px; border-top: 1px solid rgba(108, 177, 237, .16); color: #91d3ff; font-size: 14px; line-height: 1.55; }

.mobile-lightbox {
    width: min(1220px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 42px 14px 14px;
    border: 1px solid rgba(109, 186, 255, .3);
    border-radius: 18px;
    background: #051525;
    color: #fff;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .65), 0 0 55px rgba(22, 108, 207, .14);
    overflow: auto;
}

.mobile-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.mobile-lightbox::backdrop { background: rgba(1, 7, 16, .84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mobile-lightbox img { display: block; max-width: 100%; max-height: calc(100dvh - 90px); width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.mobile-lightbox-close { position: absolute; top: 7px; right: 9px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(115, 188, 255, .24); border-radius: 9px; background: rgba(26, 69, 105, .55); color: #e9f7ff; font-size: 26px; line-height: 1; cursor: pointer; }
.mobile-lightbox-close:hover,
.mobile-lightbox-close:focus-visible { border-color: #70c2ff; background: rgba(35, 106, 166, .7); }
body.mobile-lightbox-open { overflow-y: hidden; }

@media (max-width: 1000px) {
    .mobile-extended { margin-top: 76px; }
    .mobile-admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .mobile-shot-pair { gap: 10px; margin-top: 10px; }
    .mobile-extended { margin-top: 66px; }
    .mobile-extended-intro { text-align: left; }
    .mobile-extended-intro h3 { font-size: 31px; }
    .mobile-access-levels { grid-template-columns: 1fr; gap: 12px; }
    .mobile-admin-grid { gap: 12px; margin-top: 12px; }
    .mobile-access-level,
    .mobile-admin-card,
    .mobile-setup-card { padding: 24px 21px; }
    .mobile-admin-list { grid-template-columns: 1fr; }
    .mobile-lightbox { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 43px 8px 8px; }
    .mobile-lightbox img { max-height: calc(100dvh - 74px); }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-shot-button img { transition-duration: .01ms; }
}

/* =========================================================
   PROBLEM → REŠENJE
========================================================= */

.problem-section {
    position: relative;
    padding: 105px 0 75px;
    overflow: hidden;
    background:
        radial-gradient(circle at 65% 65%, rgba(12, 91, 190, .09), transparent 38%),
        #020914;
}

.problem-heading {
    max-width: 870px;
    margin: 0 auto 38px;
    text-align: center;
}

.problem-heading h2,
.capabilities-heading h2 {
    font-size: clamp(42px, 3.5vw, 60px);
    line-height: 1.1;
    letter-spacing: -2px;
}

.problem-heading > p,
.capabilities-heading > p {
    max-width: 780px;
    margin: 20px auto 0;
    color: #a0b5ca;
    font-size: 16px;
    line-height: 1.7;
}

.problem-heading > strong {
    display: block;
    margin-top: 21px;
    color: #7bc0ff;
    font-size: 21px;
    line-height: 1.35;
}

.problem-heading > span:last-child {
    display: block;
    margin-top: 8px;
    color: #819ab5;
    font-size: 14px;
}

.problem-visual { width: min(100%, 1420px); margin: 0 auto; }
.problem-image-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.problem-image-button:focus-visible { outline: 2px solid #64baff; outline-offset: 4px; border-radius: 8px; }
.problem-image-button img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    object-fit: contain;
    -webkit-mask-image: radial-gradient(ellipse 105% 105% at 50% 50%, #000 0 76%, transparent 100%);
    mask-image: radial-gradient(ellipse 105% 105% at 50% 50%, #000 0 76%, transparent 100%);
    transition: transform .32s ease;
}
.problem-image-button:hover img { transform: scale(1.012); }

/* =========================================================
   JEDAN SISTEM / MOGUĆNOSTI
========================================================= */

.capabilities-section {
    position: relative;
    padding: 100px 0 115px;
    background:
        radial-gradient(circle at 50% 30%, rgba(20, 107, 209, .085), transparent 40%),
        linear-gradient(180deg, #020914, #031020 50%, #020914);
}

.capabilities-heading { max-width: 920px; margin: 0 auto 55px; text-align: center; }
.capabilities-heading h2 span { color: #74baff; }

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
    max-width: 1420px;
    margin: 0 auto;
}

.capability-card {
    min-width: 0;
    min-height: 260px;
    padding: 28px 30px;
    border: 1px solid rgba(106, 169, 228, .13);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(10, 31, 54, .78), rgba(4, 17, 32, .68));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 18px 48px rgba(0, 0, 0, .13);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.capability-card:hover,
.capability-card:focus-within {
    transform: translateY(-4px) scale(1.005);
    border-color: rgba(75, 166, 255, .3);
    box-shadow: 0 22px 55px rgba(0, 66, 147, .14);
}

.capability-icon {
    display: inline-grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border: 1px solid rgba(76, 166, 250, .25);
    border-radius: 10px;
    background: rgba(25, 110, 203, .12);
    color: #67baff;
    font-size: 12px;
    font-weight: 800;
}

.capability-card h3 { margin: 17px 0 9px; color: #f0f7ff; font-size: 27px; line-height: 1.2; letter-spacing: -.65px; }
.capability-card > p { max-width: 550px; color: #91a8c0; font-size: 14px; line-height: 1.6; }
.capability-card details { margin-top: 18px; }
.capability-card summary { width: fit-content; color: #78bdff; font-size: 12px; font-weight: 700; cursor: pointer; }
.capability-card summary:hover { color: #b1dcff; }
.capability-card summary:focus-visible { outline: 2px solid #68baff; outline-offset: 5px; border-radius: 3px; }
.capability-card details[open] summary { margin-bottom: 16px; }
.capability-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.capability-chips li { padding: 7px 10px; border: 1px solid rgba(91, 158, 224, .15); border-radius: 7px; background: rgba(19, 57, 91, .33); color: #b7cbe0; font-size: 11px; line-height: 1.35; }
.capability-groups { display: grid; gap: 16px; }
.capability-groups h4 { margin-bottom: 9px; color: #a2c9e8; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.capability-note { margin-top: 16px; color: #7f9ab4; font-size: 11px; line-height: 1.6; }
.capability-note strong { color: #b5dcfb; }

.capabilities-statement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    max-width: 1420px;
    margin: 28px auto 0;
    padding: 27px 32px;
    border: 1px solid rgba(79, 158, 240, .19);
    border-radius: 14px;
    background: linear-gradient(110deg, rgba(13, 54, 94, .55), rgba(4, 22, 41, .65));
}
.capabilities-statement p { flex: 1 1 680px; color: #e0efff; font-size: 18px; font-weight: 700; line-height: 1.45; }
.capabilities-statement > span { flex: 1 1 500px; color: #80a9cb; font-size: 13px; }
.capabilities-statement a { color: #7dc6ff; font-size: 13px; font-weight: 800; white-space: nowrap; }
.capabilities-statement a:hover { color: #c1e5ff; }

@media (max-width: 1000px) {
    .problem-section { padding: 90px 0 65px; }
    .capabilities-section { padding: 86px 0 100px; }
}

@media (max-width: 650px) {
    .problem-section { padding: 75px 0 52px; }
    .problem-heading { margin-bottom: 24px; text-align: left; }
    .problem-heading h2,
    .capabilities-heading h2 { font-size: 37px; letter-spacing: -1.4px; }
    .problem-heading > p,
    .capabilities-heading > p { margin-top: 17px; font-size: 15px; }
    .problem-heading > strong { font-size: 18px; }
    .capabilities-section { padding: 78px 0 88px; }
    .capabilities-heading { margin-bottom: 36px; text-align: left; }
    .capabilities-grid { grid-template-columns: 1fr; gap: 14px; }
    .capability-card { min-height: 0; padding: 24px 22px; }
    .capability-card h3 { font-size: 24px; }
    .capabilities-statement { margin-top: 20px; padding: 23px 22px; }
    .capabilities-statement p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .problem-image-button img,
    .capability-card { transition-duration: .01ms; }
}

/* =========================================================
   KOME JE NAMENJEN / AUTOMATIZOVANI PODSETNICI
========================================================= */

.audience-section { padding: 70px 0 92px; background: #020914; }
.audience-heading { max-width: 850px; margin: 0 auto 42px; text-align: center; }
.audience-heading h2 { font-size: clamp(36px, 3vw, 52px); line-height: 1.12; letter-spacing: -1.8px; }
.audience-heading h2 span { color: #79bdff; }
.audience-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.audience-card { min-width: 0; padding: 26px 23px 28px; border-top: 1px solid rgba(100, 190, 255, .38); border-radius: 0 0 13px 13px; background: linear-gradient(180deg, rgba(18, 50, 79, .52), rgba(6, 24, 44, .55)); }
.audience-card > span { color: #5fb7f7; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }
.audience-card h3 { margin: 22px 0 10px; color: #f0f7ff; font-size: 19px; line-height: 1.26; }
.audience-card p { color: #9cb2ca; font-size: 13px; line-height: 1.65; }

.capabilities-ease { max-width: 1420px; margin: 26px auto 0; padding: 0 3px; }
.capabilities-ease strong { color: #d8ecff; font-size: 17px; }
.capabilities-ease p { margin-top: 6px; color: #88a5c0; font-size: 13px; line-height: 1.6; }

.reminders-section { position: relative; overflow: hidden; padding: 110px 0 120px; background: radial-gradient(ellipse at 50% 5%, rgba(24, 114, 215, .18), transparent 50%), linear-gradient(180deg, #04101f, #071d33 55%, #030e1d); }
.reminders-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(113, 193, 255, .035) 50%, transparent); }
.reminders-section .container { position: relative; }
.reminders-heading { max-width: 950px; margin: 0 auto 54px; text-align: center; }
.reminders-heading h2 { font-size: clamp(41px, 3.7vw, 66px); line-height: 1.1; letter-spacing: -2px; }
.reminders-heading h2 span { color: #8dcbff; }
.reminders-heading p { max-width: 760px; margin: 22px auto 0; color: #a6bed5; font-size: 16px; line-height: 1.7; }
.reminders-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.reminder-card { min-width: 0; padding: 28px 24px 30px; border: 1px solid rgba(106, 180, 242, .18); border-radius: 15px; background: linear-gradient(155deg, rgba(15, 49, 80, .74), rgba(5, 21, 39, .8)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 20px 50px rgba(0,0,0,.14); }
.reminder-number { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(81, 174, 255, .13); color: #82c9ff; font-size: 11px; font-weight: 800; }
.reminder-card h3 { margin: 22px 0 12px; color: #eff8ff; font-size: 20px; line-height: 1.27; }
.reminder-card p { color: #9bb4cb; font-size: 13px; line-height: 1.65; }
.reminders-finale { max-width: 1050px; margin: 60px auto 0; text-align: center; }
.reminders-roles { color: #9ed2ff; font-size: 15px; font-weight: 700; line-height: 1.55; }
.reminders-finale strong { display: block; margin-top: 22px; color: #f3f9ff; font-size: clamp(26px, 2.3vw, 39px); line-height: 1.2; letter-spacing: -.8px; }
.reminders-examples { max-width: 740px; margin: 18px auto 0; color: #859db6; font-size: 13px; line-height: 1.65; }

@media (max-width: 1200px) {
    .audience-grid,
    .reminders-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    .audience-section { padding: 58px 0 74px; }
    .audience-heading { margin-bottom: 30px; text-align: left; }
    .audience-heading h2 { font-size: 35px; letter-spacing: -1.3px; }
    .audience-grid,
    .reminders-grid { grid-template-columns: 1fr; gap: 12px; }
    .audience-card { padding: 22px; }
    .audience-card h3 { margin-top: 14px; }
    .reminders-section { padding: 78px 0 86px; }
    .reminders-heading { margin-bottom: 34px; text-align: left; }
    .reminders-heading h2 { font-size: 37px; letter-spacing: -1.4px; }
    .reminders-heading p { font-size: 15px; }
    .reminder-card { padding: 23px 22px; }
    .reminder-card h3 { margin-top: 15px; }
    .reminders-finale { margin-top: 42px; text-align: left; }
}

/* =========================================================
   ZAVRŠNI POZIV
========================================================= */

.closing-section { position: relative; padding: 120px 0 130px; overflow: hidden; background: radial-gradient(ellipse at 50% 52%, rgba(23, 106, 202, .18), transparent 55%), #020a16; }
.closing-section::before { content: ""; position: absolute; inset: 25px; border: 1px solid rgba(106, 180, 245, .1); border-radius: 28px; pointer-events: none; }
.closing-inner { position: relative; max-width: 950px; text-align: center; }
.closing-inner h2 { margin-top: 16px; color: #f2f8ff; font-size: clamp(40px, 3.6vw, 63px); line-height: 1.1; letter-spacing: -1.9px; }
.closing-inner > p { max-width: 790px; margin: 22px auto 0; color: #a4bad1; font-size: 16px; line-height: 1.7; }
.closing-inner .closing-promise { margin-top: 17px; color: #c8e2f8; font-size: 15px; }
.closing-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.closing-inner small { display: block; margin-top: 27px; color: #718da8; font-size: 12px; line-height: 1.6; }

@media (max-width: 650px) {
    .closing-section { padding: 84px 0 94px; }
    .closing-section::before { inset: 12px; border-radius: 18px; }
    .closing-inner { text-align: left; }
    .closing-inner h2 { font-size: 37px; letter-spacing: -1.4px; }
    .closing-inner > p { font-size: 15px; }
    .closing-actions { justify-content: flex-start; }
}

/* =========================================================
   ROKOVI / DOPUNA NA OSNOVU AUDITA
========================================================= */

.reminders-heading > strong { display: block; margin-top: 23px; color: #d6edff; font-size: 17px; line-height: 1.45; }
.reminders-grid { align-items: start; }
.reminder-card { padding: 0; overflow: hidden; }
.reminder-card summary { display: flex; align-items: center; gap: 15px; min-height: 105px; padding: 22px 24px; color: #f0f8ff; font-size: 20px; font-weight: 700; line-height: 1.25; cursor: pointer; list-style: none; }
.reminder-card summary::-webkit-details-marker { display: none; }
.reminder-card summary::after { content: "+"; margin-left: auto; color: #80c8ff; font-size: 25px; font-weight: 400; }
.reminder-card[open] summary::after { content: "−"; }
.reminder-card summary:focus-visible { outline: 2px solid #70c5ff; outline-offset: -5px; }
.reminder-card .reminder-number { flex: 0 0 34px; }
.reminder-card-detail { padding: 0 24px 25px; }
.reminder-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.reminder-chips li { padding: 6px 9px; border: 1px solid rgba(91, 166, 230, .22); border-radius: 6px; background: rgba(31, 78, 116, .25); color: #c3daed; font-size: 11px; line-height: 1.4; }
.reminder-card-detail p { margin-top: 17px; color: #98b1c8; font-size: 12px; line-height: 1.6; }
.reminder-alerts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.reminder-alert { min-width: 0; padding: 30px; border: 1px solid rgba(106, 180, 242, .2); border-radius: 16px; background: rgba(5, 24, 44, .75); }
.reminder-alert-primary { background: linear-gradient(145deg, rgba(17, 71, 117, .63), rgba(5, 24, 44, .75)); }
.reminder-kicker { color: #72c0ff; font-size: 10px; font-weight: 800; letter-spacing: 1.7px; }
.reminder-alert h3 { margin: 11px 0 12px; color: #f1f8ff; font-size: 24px; line-height: 1.2; }
.reminder-alert p { color: #9fb8cf; font-size: 13px; line-height: 1.6; }
.reminder-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 19px; }
.reminder-timeline span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(103, 187, 255, .3); border-radius: 7px; background: rgba(46, 115, 169, .22); color: #d9efff; font-size: 12px; font-weight: 800; }
.reminder-timeline small { margin-left: 3px; color: #82a6c3; font-size: 11px; }
.reminder-alert .reminder-quiet { margin-top: 18px; font-size: 12px; }
.reminder-quiet strong { color: #cae6fa; }
.reminder-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 19px; }
.reminder-flow span { display: inline-flex; align-items: center; color: #b8d5e9; font-size: 11px; line-height: 1.5; }
.reminder-flow span:not(:last-child)::after { content: "→"; margin-left: 8px; color: #66b7f5; }
.reminder-extra { margin-top: 22px; }
.reminder-extra > summary { width: fit-content; color: #83c8ff; font-size: 13px; font-weight: 700; cursor: pointer; }
.reminder-extra > summary:focus-visible { outline: 2px solid #70c5ff; outline-offset: 5px; }
.reminder-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.reminder-more article { min-width: 0; padding: 25px 27px; border: 1px solid rgba(104, 174, 234, .12); border-radius: 13px; background: rgba(8, 31, 54, .55); }
.reminder-more h3 { margin: 0 0 10px; color: #dbeeff; font-size: 17px; line-height: 1.35; }
.reminder-more p { color: #91abc3; font-size: 12px; line-height: 1.65; }
.reminder-more .reminder-small { margin-top: 11px; color: #7db8e8; }
.reminder-statuses { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.reminder-statuses span { padding: 6px 10px; border: 1px solid rgba(109, 184, 247, .2); border-radius: 20px; color: #aecde5; font-size: 11px; }
.reminders-finale { margin-top: 58px; }
.reminder-peace { margin-top: 19px; color: #a4d8ff; font-size: 20px; font-weight: 700; line-height: 1.4; }
.reminder-system { max-width: 800px; margin: 28px auto 0; padding-top: 20px; border-top: 1px solid rgba(117, 174, 223, .14); color: #7393ae; font-size: 11px; line-height: 1.6; }

@media (max-width: 900px) {
    .reminder-alerts,
    .reminder-more { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .reminders-heading > strong { font-size: 15px; }
    .reminder-card summary { min-height: 78px; padding: 19px 20px; font-size: 18px; }
    .reminder-card-detail { padding: 0 20px 22px; }
    .reminder-alerts { gap: 12px; margin-top: 15px; }
    .reminder-alert { padding: 24px 21px; }
    .reminder-more { gap: 12px; margin-top: 12px; }
    .reminder-more article { padding: 22px 20px; }
    .reminder-statuses { justify-content: flex-start; }
    .reminder-system { margin-left: 0; }
}

/* =========================================================
   VIDEO PREZENTACIJA
========================================================= */

.video-section { position: relative; overflow: hidden; padding: 112px 0 118px; background: radial-gradient(ellipse at 50% 47%, rgba(24, 110, 203, .16), transparent 52%), linear-gradient(180deg, #020914, #061629 55%, #020914); }
.video-heading { max-width: 850px; margin: 0 auto 48px; text-align: center; }
.video-heading h2 { margin-top: 12px; color: #f1f8ff; font-size: clamp(42px, 3.5vw, 62px); line-height: 1.1; letter-spacing: -1.9px; }
.video-heading h2 span { color: #78bfff; }
.video-heading p { margin-top: 20px; color: #a5bad0; font-size: 16px; line-height: 1.7; }
.video-heading small { display: block; margin-top: 13px; color: #7793ae; font-size: 13px; line-height: 1.6; }
.video-frame { position: relative; width: min(100%, 1100px); aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden; border: 1px solid rgba(117, 191, 255, .29); border-radius: 18px; background: #061525; box-shadow: 0 28px 85px rgba(0, 0, 0, .45), 0 0 55px rgba(35, 124, 211, .16); }
.video-preview { position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; background: #061525; color: #fff; cursor: pointer; }
.video-preview img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.video-preview:hover img { transform: scale(1.025); }
.video-preview:focus-visible { outline: 3px solid #85d1ff; outline-offset: -5px; }
.video-preview-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 11, 24, .12), rgba(1, 11, 24, .04) 45%, rgba(1, 11, 24, .76)); }
.video-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: clamp(68px, 8vw, 96px); height: clamp(68px, 8vw, 96px); transform: translate(-50%, -50%); border: 1px solid rgba(122, 209, 255, .82); border-radius: 50%; background: rgba(3, 25, 48, .76); box-shadow: 0 0 0 12px rgba(42, 165, 244, .09), 0 0 38px rgba(36, 165, 243, .4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: video-play-pulse 3.8s ease-in-out infinite; transition: scale .25s ease, background .25s ease; }
.video-preview:hover .video-play { scale: 1.08; background: rgba(8, 51, 87, .88); }
.video-play > span { width: 0; height: 0; margin-left: 5px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 19px solid #e8f9ff; filter: drop-shadow(0 0 7px rgba(100, 202, 255, .6)); }
.video-caption { position: absolute; right: 24px; bottom: 23px; left: 28px; display: grid; gap: 5px; text-align: left; }
.video-caption small { color: #93d4ff; font-size: 10px; font-weight: 800; letter-spacing: 1.7px; }
.video-caption strong { color: #f4faff; font-size: 15px; font-weight: 600; line-height: 1.3; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-after { max-width: 850px; margin: 40px auto 0; text-align: center; }
.video-after h3 { color: #eaf5ff; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.35; }
.video-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; margin-top: 23px; }
.video-after p { margin-top: 23px; color: #90abc4; font-size: 13px; line-height: 1.65; }
.video-after p span { color: #728fa9; }
@keyframes video-play-pulse { 50% { box-shadow: 0 0 0 16px rgba(42, 165, 244, .05), 0 0 46px rgba(36, 165, 243, .27); } }

@media (max-width: 650px) {
    .video-section { padding: 78px 0 85px; }
    .video-heading { margin-bottom: 31px; text-align: left; }
    .video-heading h2 { font-size: 36px; letter-spacing: -1.3px; }
    .video-heading p { font-size: 15px; }
    .video-frame { border-radius: 12px; }
    .video-caption { right: 12px; bottom: 12px; left: 14px; }
    .video-caption small { font-size: 8px; }
    .video-caption strong { font-size: 10px; }
    .video-play > span { border-top-width: 9px; border-bottom-width: 9px; border-left-width: 14px; }
    .video-after { margin-top: 28px; text-align: left; }
    .video-actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .video-play { animation: none; }
    .video-preview img,
    .video-play { transition-duration: .01ms; }
}

/* =========================================================
   KONTAKT / PREZENTACIJA
========================================================= */

.contact-section { position: relative; overflow: hidden; padding: 115px 0 130px; scroll-margin-top: 84px; background: radial-gradient(ellipse at 76% 43%, rgba(20, 112, 206, .15), transparent 43%), #030d1b; }
.contact-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(42px, 5vw, 88px); }
.contact-intro { min-width: 0; padding-top: 16px; }
.contact-intro h2 { margin-top: 15px; color: #f0f8ff; font-size: clamp(40px, 3.2vw, 58px); line-height: 1.12; letter-spacing: -1.8px; }
.contact-intro h2 span { color: #80c5ff; }
.contact-intro > p { max-width: 620px; margin-top: 22px; color: #a4bad0; font-size: 15px; line-height: 1.7; }
.contact-intro .contact-intro-note { margin-top: 13px; color: #c5ddf1; font-size: 14px; }
.contact-benefits { display: grid; gap: 18px; margin-top: 42px; }
.contact-benefits h3 { margin-bottom: 4px; color: #e8f5ff; font-size: 21px; }
.contact-benefit { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 12px; }
.contact-benefit > span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(93, 191, 255, .35); border-radius: 50%; background: rgba(31, 120, 191, .16); color: #92d4ff; font-size: 13px; font-weight: 800; }
.contact-benefit strong { color: #e1f0ff; font-size: 14px; line-height: 1.4; }
.contact-benefit p { margin-top: 3px; color: #86a1bb; font-size: 12px; line-height: 1.55; }
.contact-trust { display: grid; gap: 8px; margin-top: 37px; padding: 22px 23px; border-left: 2px solid #59baff; border-radius: 0 9px 9px 0; background: rgba(18, 55, 87, .38); }
.contact-trust strong { color: #c9e6fa; font-size: 13px; line-height: 1.5; }
.contact-trust small { color: #7592ad; font-size: 11px; line-height: 1.55; }
.contact-panel { min-width: 0; padding: clamp(28px, 3vw, 43px); border: 1px solid rgba(98, 182, 252, .24); border-radius: 20px; background: linear-gradient(145deg, rgba(15, 45, 74, .85), rgba(5, 22, 40, .92)); box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 26px 78px rgba(0,0,0,.28), 0 0 60px rgba(24, 116, 202, .08); }
.contact-panel-heading > span { color: #67bfff; font-size: 10px; font-weight: 800; letter-spacing: 1.9px; }
.contact-panel-heading h3 { margin-top: 12px; color: #f0f8ff; font-size: clamp(27px, 2.2vw, 34px); line-height: 1.2; letter-spacing: -.7px; }
.contact-panel-heading p { margin-top: 9px; color: #8faac4; font-size: 13px; line-height: 1.6; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 15px; margin-top: 29px; }
.contact-field { display: flex; flex-direction: column; min-width: 0; }
.contact-field-wide { grid-column: 1 / -1; }
.contact-field label { margin-bottom: 8px; color: #d6e9f9; font-size: 12px; font-weight: 700; }
.contact-field label span { color: #6bc4ff; }
.contact-field input,
.contact-field select,
.contact-field textarea { width: 100%; min-width: 0; min-height: 47px; padding: 11px 14px; border: 1px solid rgba(111, 164, 211, .27); border-radius: 9px; outline: none; background: rgba(3, 19, 35, .74); color: #eff8ff; font: inherit; font-size: 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.contact-field textarea { min-height: 112px; resize: vertical; }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: #66829b; opacity: 1; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus { border-color: #74caff; box-shadow: 0 0 0 3px rgba(65, 171, 245, .15); }
.contact-field [aria-invalid="true"] { border-color: #ee8b9a; }
.contact-field-error { min-height: 0; color: #ffb0bb; font-size: 11px; line-height: 1.5; }
.contact-field-error:not(:empty) { margin-top: 6px; }
.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; margin-top: 22px; padding: 13px 20px; border: 1px solid #72cdff; border-radius: 10px; background: linear-gradient(115deg, #1897e5, #44bdf6); color: #031321; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 28px rgba(11, 141, 221, .23); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.contact-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(11, 141, 221, .34); filter: brightness(1.06); }
.contact-submit:focus-visible { outline: 3px solid #d7f4ff; outline-offset: 3px; }
.contact-submit:disabled { cursor: wait; opacity: .78; }
.contact-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(3, 19, 33, .3); border-top-color: #031321; border-radius: 50%; animation: contact-spin .75s linear infinite; }
.contact-submit.is-loading .contact-spinner { display: block; }
.contact-submit.is-loading .contact-submit-arrow { display: none; }
.contact-privacy { margin-top: 13px; color: #7994ac; font-size: 11px; line-height: 1.55; text-align: center; }
.contact-status { margin-top: 17px; padding: 13px 15px; border-radius: 9px; font-size: 12px; line-height: 1.6; }
.contact-status[data-state="success"] { border: 1px solid rgba(101, 212, 166, .3); background: rgba(18, 100, 75, .2); color: #b8f1d6; }
.contact-status[data-state="error"] { border: 1px solid rgba(239, 140, 158, .3); background: rgba(119, 43, 59, .2); color: #ffd1d8; }
.contact-status strong { display: block; font-size: 13px; }
.contact-package-note { margin-top: 28px; padding-top: 21px; border-top: 1px solid rgba(112, 181, 237, .14); }
.contact-package-note strong { color: #d7edff; font-size: 13px; }
.contact-package-note p { margin-top: 7px; color: #809bb5; font-size: 12px; line-height: 1.6; }
.contact-package-note a { display: inline-block; margin-top: 10px; color: #85ccff; font-size: 12px; font-weight: 800; }
.contact-package-note a:hover { color: #c8eaff; }
@keyframes contact-spin { to { transform: rotate(360deg); } }

@media (max-width: 1000px) {
    .contact-layout { grid-template-columns: 1fr; gap: 46px; }
    .contact-intro { padding-top: 0; }
    .contact-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-benefits h3 { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
    .contact-section { padding: 78px 0 90px; }
    .contact-layout { gap: 35px; }
    .contact-intro h2 { font-size: 36px; letter-spacing: -1.3px; }
    .contact-intro > p { font-size: 14px; }
    .contact-benefits { grid-template-columns: 1fr; gap: 17px; margin-top: 32px; }
    .contact-trust { margin-top: 29px; }
    .contact-panel { padding: 25px 20px; border-radius: 15px; }
    .contact-fields { grid-template-columns: 1fr; gap: 14px; }
    .contact-field-wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-submit { transition-duration: .01ms; }
    .contact-spinner { animation-duration: 1.5s; }
}

/* =========================================================
   PROFESSIONAL VARIJANTE I PROBNI PERIODI
========================================================= */

.packages-section .professional-card-message { display: block; margin-top: 10px; color: #a9c5db; font-size: 12px; line-height: 1.45; }
.packages-section .package-trial-badge { display: inline-flex; align-self: flex-start; margin-top: 10px; padding: 5px 8px; border: 1px solid rgba(103, 181, 243, .22); border-radius: 6px; background: rgba(41, 124, 189, .11); color: #a5d5f5; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.packages-section .professional-trial-hook { position: absolute; top: 20px; right: 20px; z-index: 2; margin: 0; padding: 8px 11px; border-color: rgba(117, 213, 255, .52); border-radius: 999px; background: rgba(8, 53, 89, .9); color: #d9f5ff; font-size: 10px; box-shadow: 0 0 24px rgba(25, 157, 235, .2); }
.packages-section .basic-trial-badge { position: absolute; top: 27px; right: 22px; margin-top: 0; border-color: rgba(103, 181, 243, .14); background: rgba(41, 124, 189, .07); color: #83b9dd; }
.packages-section .professional-panel { width: 100%; }
.professional-variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 27px; }
.professional-variant { display: flex; flex-direction: column; min-width: 0; padding: 27px; border: 1px solid rgba(103, 174, 234, .18); border-radius: 14px; background: linear-gradient(145deg, rgba(11, 42, 70, .78), rgba(4, 22, 42, .8)); }
.professional-variant-mobile { border-color: rgba(86, 191, 255, .34); background: linear-gradient(145deg, rgba(14, 55, 89, .86), rgba(5, 25, 45, .82)); box-shadow: inset 0 1px 0 rgba(140, 216, 255, .07), 0 16px 45px rgba(0, 103, 192, .11); }
.professional-variant-label { color: #70bdf3; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.professional-variant h4 { margin-top: 12px; color: #ecf7ff; font-size: 22px; line-height: 1.25; }
.professional-variant-price { margin-top: 16px; color: #a8c9e4; font-size: 13px; }
.professional-variant-price strong { color: #8bd1ff; font-size: 28px; }
.professional-variant-subtitle { min-height: 45px; margin-top: 8px; color: #9db6cd; font-size: 13px; line-height: 1.6; }
.professional-included { display: inline-block; align-self: flex-start; margin-top: 16px; padding: 7px 10px; border: 1px solid rgba(99, 177, 241, .25); border-radius: 7px; color: #c5e2f6; font-size: 10px; font-weight: 800; }
.professional-feature-list { display: grid; gap: 8px; margin-top: 21px; padding: 0; list-style: none; }
.professional-feature-list li { position: relative; padding-left: 16px; color: #9bb2c9; font-size: 12px; line-height: 1.55; }
.professional-feature-list li::before { content: ""; position: absolute; top: .55em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #66bfff; }
.professional-exclusion { margin-top: 16px; color: #a8c5da; font-size: 12px; font-weight: 700; }
.professional-vehicle-price { margin-top: auto; padding-top: 21px; color: #a9c2d8; font-size: 12px; line-height: 1.6; }
.professional-vehicle-price strong { color: #d4edff; }
.professional-trailer-note { margin-top: 7px; color: #7798b5; font-size: 11px; line-height: 1.5; }
.professional-variant .package-cta { align-self: flex-start; margin-top: 21px; }
.professional-value,
.professional-trial,
.professional-large-fleet,
.basic-trial-note { margin-top: 18px; padding: 21px 23px; border: 1px solid rgba(103, 179, 243, .16); border-radius: 12px; background: rgba(13, 48, 78, .37); }
.professional-value strong,
.professional-trial strong,
.basic-trial-note strong { color: #d8eeff; font-size: 16px; }
.professional-value p,
.professional-trial p,
.basic-trial-note p,
.professional-large-fleet p { margin-top: 6px; color: #94acc4; font-size: 12px; line-height: 1.65; }
.professional-trial a,
.professional-large-fleet a,
.basic-trial-note a { display: inline-block; margin-top: 12px; color: #89d0ff; font-size: 12px; font-weight: 800; }
.professional-trial a:hover,
.professional-large-fleet a:hover,
.basic-trial-note a:hover { color: #d0edff; }
.professional-large-fleet { border-color: rgba(93, 190, 255, .3); background: linear-gradient(120deg, rgba(19, 83, 135, .28), rgba(7, 32, 55, .56)); }
.professional-large-fleet h4 { color: #e6f5ff; font-size: 19px; }
.professional-large-fleet > strong { display: block; margin-top: 12px; color: #b6dcf5; font-size: 13px; }
.packages-section .basic-trial-note { margin: 0 0 18px; }

@media (max-width: 1000px) {
    .professional-variants { grid-template-columns: 1fr; }
    .professional-variant-subtitle { min-height: 0; }
}

@media (max-width: 650px) {
    .packages-section .basic-trial-badge { position: static; margin-top: 9px; }
    .professional-variant { padding: 22px 19px; }
    .professional-variant-price strong { font-size: 25px; }
    .professional-value,
    .professional-trial,
    .professional-large-fleet,
    .basic-trial-note { padding: 19px; }
}

/* Individualna ponuda je informativni blok ispod tri paketa, ne četvrta kartica. */
.packages-section .large-fleet-banner { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: 100%; max-width: 1460px; margin: 24px auto 0; padding: 20px 28px; border: 1px solid rgba(95, 180, 247, .17); border-radius: 14px; background: linear-gradient(110deg, rgba(13, 47, 78, .55), rgba(5, 25, 44, .65)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 14px 34px rgba(0, 62, 128, .08); transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease; }
.packages-section .large-fleet-banner:hover { transform: translateY(-2px); border-color: rgba(109, 197, 255, .3); box-shadow: 0 16px 38px rgba(0, 80, 157, .11); }
.large-fleet-copy { min-width: 0; max-width: 900px; }
.large-fleet-badge { display: inline-block; padding: 5px 9px; border: 1px solid rgba(115, 198, 255, .28); border-radius: 6px; color: #93d4ff; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.large-fleet-copy h3 { margin-top: 10px; color: #f0f8ff; font-size: clamp(24px, 2vw, 30px); line-height: 1.2; }
.large-fleet-copy p { margin-top: 9px; color: #a6bdd2; font-size: 13px; line-height: 1.6; }
.large-fleet-copy strong { display: block; margin-top: 9px; color: #d2ebff; font-size: 13px; line-height: 1.5; }
.large-fleet-copy small { display: block; margin-top: 7px; color: #7b9ab5; font-size: 11px; line-height: 1.5; }
.large-fleet-cta { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 11px; min-height: 46px; padding: 11px 18px; border: 1px solid rgba(97, 190, 255, .52); border-radius: 9px; background: linear-gradient(120deg, #176eae, #168fd0); color: #f4faff; font-size: 12px; font-weight: 800; text-align: center; box-shadow: 0 8px 24px rgba(0, 110, 196, .2); }
.large-fleet-cta:hover { border-color: #a4deff; background: linear-gradient(120deg, #1d7dbc, #20a2df); }
.large-fleet-cta:focus-visible { outline: 2px solid #a8e4ff; outline-offset: 3px; }

@media (max-width: 900px) {
    .packages-section .large-fleet-banner { align-items: flex-start; flex-direction: column; gap: 21px; }
}

@media (max-width: 650px) {
    .packages-section .large-fleet-banner { margin-top: 19px; padding: 21px 19px; }
    .large-fleet-cta { width: 100%; }
}

.packages-section { padding-bottom: 105px; }

@media (max-width: 650px) {
    .packages-section { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    .packages-section .large-fleet-banner { transition-duration: .01ms; }
}

/* Quiet social footer, separate from the contact content. */
.site-footer { border-top: 1px solid rgba(105, 177, 238, .12); background: #020a16; }
.social-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 22px 36px; padding: 37px 0 43px; }
.social-footer h2 { color: #a9c4db; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.social-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; }
.social-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px; border: 1px solid rgba(98, 175, 238, .15); border-radius: 9px; background: rgba(20, 67, 104, .14); color: #a7bfd4; font-size: 12px; font-weight: 600; transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.social-links .social-pending { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px; border: 1px solid rgba(98, 175, 238, .11); border-radius: 9px; background: rgba(20, 67, 104, .09); color: #829bb0; font-size: 12px; font-weight: 600; cursor: default; }
.social-links a:hover { color: #e9f8ff; border-color: rgba(92, 198, 255, .4); background: rgba(30, 106, 158, .2); box-shadow: 0 0 20px rgba(20, 150, 224, .12); }
.social-links a:focus-visible { outline: 2px solid #84d5ff; outline-offset: 3px; }
.social-links svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.social-links svg .social-dot { fill: currentColor; stroke: none; }
.footer-help-link { color: #91c9ef; font-size: 12px; font-weight: 700; white-space: nowrap; }
.footer-help-link:hover { color: #e7f7ff; }
.footer-help-link:focus-visible { outline: 2px solid #84d5ff; outline-offset: 4px; }
@media (max-width: 650px) {
    .social-footer { flex-direction: column; gap: 17px; padding: 32px 0 38px; }
    .social-links { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .social-links a { transition-duration: .01ms; }
}

/* Compact entry to the separate help center. */
.tutorials-teaser { padding: 0 0 35px; background: #020a16; }
.tutorials-teaser-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 35px; border: 1px solid rgba(91, 171, 234, .18); border-radius: 16px; background: linear-gradient(115deg, rgba(13, 48, 78, .68), rgba(4, 24, 44, .67)); }
.tutorials-teaser h2 { margin-top: 7px; font-size: clamp(21px, 2vw, 28px); color: #edf8ff; }
.tutorials-teaser p { margin-top: 7px; color: #9bb4c9; font-size: 13px; line-height: 1.6; }
.tutorials-teaser-link { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 17px; border: 1px solid rgba(102, 195, 255, .4); border-radius: 9px; color: #d8efff; font-size: 12px; font-weight: 800; }
.tutorials-teaser-link:hover { border-color: #91d8ff; background: rgba(49, 152, 221, .14); }
.tutorials-teaser-link:focus-visible { outline: 2px solid #84d5ff; outline-offset: 3px; }

/* Tutorial library shares the main site's colors and header identity. */
.tutorials-nav { justify-content: space-between; }
.tutorials-back { margin-left: auto; color: #b2d9f4; font-size: 13px; font-weight: 700; }
.tutorials-back:hover { color: #fff; }
.tutorials-main { min-height: 80vh; padding: 165px 0 105px; background: radial-gradient(ellipse at 50% 0, rgba(24, 112, 195, .19), transparent 48%), #020a16; }
.tutorials-intro { max-width: 950px; text-align: center; }
.tutorials-intro h1 { margin-top: 15px; color: #f2f9ff; font-size: clamp(41px, 5vw, 68px); line-height: 1.1; letter-spacing: -.04em; }
.tutorials-intro h1 span { color: #7fcaff; }
.tutorials-intro p { max-width: 700px; margin: 18px auto 0; color: #9bb5cb; font-size: 15px; line-height: 1.7; }
.tutorials-library { max-width: 1300px; margin-top: 55px; }
.tutorials-controls { padding: 24px; border: 1px solid rgba(91, 171, 234, .18); border-radius: 16px; background: rgba(8, 31, 55, .62); }
.tutorials-controls label { display: block; margin-bottom: 9px; color: #d6ecfc; font-size: 13px; font-weight: 700; }
.tutorials-controls input { width: 100%; min-height: 47px; padding: 12px 15px; border: 1px solid rgba(108, 177, 234, .27); border-radius: 9px; background: #06182b; color: #fff; font: inherit; font-size: 14px; }
.tutorials-controls input:focus-visible { outline: 2px solid #84d5ff; outline-offset: 2px; }
.tutorial-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.tutorial-filter { min-height: 36px; padding: 7px 12px; border: 1px solid rgba(95, 171, 228, .2); border-radius: 999px; background: rgba(13, 49, 81, .4); color: #9ebbd2; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.tutorial-filter:hover, .tutorial-filter[aria-pressed="true"] { border-color: rgba(112, 208, 255, .56); background: rgba(35, 121, 181, .27); color: #effaff; }
.tutorial-filter:focus-visible { outline: 2px solid #84d5ff; outline-offset: 2px; }
.tutorial-count { margin: 22px 0 15px; color: #81a2bd; font-size: 12px; }
.tutorial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tutorial-card { min-width: 0; overflow: hidden; border: 1px solid rgba(99, 171, 229, .18); border-radius: 15px; background: linear-gradient(145deg, #0a2743, #06182c); }
.tutorial-media { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(51, 151, 219, .24), transparent 43%), #061a2e; }
.tutorial-media img, .tutorial-media iframe { width: 100%; height: 100%; border: 0; object-fit: cover; }
.tutorial-placeholder-mark { display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid rgba(128, 209, 255, .37); border-radius: 18px; color: #91d5ff; font-size: 24px; font-weight: 800; letter-spacing: -.07em; box-shadow: 0 0 40px rgba(39, 146, 218, .14); }
.tutorial-card-body { display: flex; flex-direction: column; gap: 11px; min-height: 208px; padding: 21px; }
.tutorial-category { color: #81ccfb; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tutorial-card h2 { color: #ecf7ff; font-size: 20px; line-height: 1.3; }
.tutorial-card p { color: #9bb3c8; font-size: 12px; line-height: 1.6; }
.tutorial-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; color: #7595af; font-size: 11px; }
.tutorial-pending { padding: 6px 9px; border: 1px solid rgba(108, 177, 234, .22); border-radius: 6px; color: #95c4e3; font-weight: 800; }
.tutorial-play { padding: 7px 10px; border: 1px solid rgba(96, 192, 255, .4); border-radius: 7px; background: rgba(32, 121, 185, .24); color: #e4f6ff; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.tutorial-play:hover { background: rgba(40, 147, 213, .4); }
.tutorial-play:focus-visible { outline: 2px solid #84d5ff; outline-offset: 3px; }
.tutorial-empty { padding: 65px 20px; border: 1px solid rgba(99, 171, 229, .18); border-radius: 15px; background: rgba(8, 31, 55, .58); text-align: center; }
.tutorial-empty[hidden] { display: none; }
.tutorial-empty h2 { color: #e4f4ff; font-size: 22px; }
.tutorial-empty p { margin-top: 8px; color: #91aac0; font-size: 13px; }
@media (max-width: 1000px) { .tutorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
    .tutorials-teaser-inner { flex-direction: column; align-items: stretch; padding: 24px 20px; }
    .tutorials-teaser-link { width: 100%; }
    .tutorials-back { font-size: 11px; }
    .tutorials-main { padding: 125px 0 80px; }
    .tutorials-intro { text-align: left; }
    .tutorials-intro p { margin-left: 0; }
    .tutorials-library { margin-top: 35px; }
    .tutorials-controls { padding: 18px; }
    .tutorial-grid { grid-template-columns: 1fr; }
}

/* Main and tutorial headers: one compact help destination, never part of scroll spy. */
.nav { position: relative; }
.menu-tutorials { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(89, 180, 245, .25); border-radius: 999px; background: rgba(27, 94, 145, .11); white-space: nowrap; }
.menu-tutorials:hover, .menu-tutorials.active { border-color: rgba(105, 205, 255, .47); background: rgba(36, 119, 174, .2); }
.menu-tutorials svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.menu-toggle { display: none; }
.tutorials-assurance { display: grid; gap: 5px; max-width: 700px; margin: 23px auto 0; padding: 17px 20px; border: 1px solid rgba(97, 179, 236, .18); border-radius: 11px; background: rgba(18, 62, 96, .22); text-align: left; }
.tutorials-assurance strong { color: #d9efff; font-size: 14px; }
.tutorials-assurance span { color: #96b3ca; font-size: 12px; line-height: 1.6; }

.brand-statement { padding: 31px 0; background: #020a16; }
.brand-statement-inner { position: relative; max-width: 1240px; padding: 37px 46px; overflow: hidden; border: 1px solid rgba(99, 179, 239, .19); border-radius: 17px; background: linear-gradient(110deg, rgba(11, 46, 77, .87), rgba(4, 22, 42, .8)); }
.brand-statement-inner::after { content: ""; position: absolute; top: 0; right: 0; width: 180px; height: 100%; background: repeating-linear-gradient(135deg, transparent 0 20px, rgba(88, 180, 246, .055) 21px 22px, transparent 23px 42px); pointer-events: none; }
.brand-statement h2 { position: relative; max-width: 900px; margin-top: 10px; color: #f0f8ff; font-size: clamp(27px, 2.4vw, 36px); line-height: 1.23; letter-spacing: -.025em; }
.brand-statement h2 span { color: #8bcefa; }
.brand-statement p { position: relative; max-width: 900px; margin-top: 13px; color: #a7bfd2; font-size: 14px; line-height: 1.7; }

@media (min-width: 1200px) and (max-width: 1450px) {
    .menu { gap: 21px; }
    .menu a { font-size: 13px; }
    .nav { gap: 20px; }
    .nav-button { margin-left: 0; padding: 13px 17px; }
}
@media (max-width: 1199px) {
    .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; order: 2; width: 42px; height: 42px; margin-left: auto; flex: 0 0 auto; border: 1px solid rgba(107, 187, 244, .35); border-radius: 9px; background: rgba(8, 42, 72, .7); color: #d7efff; cursor: pointer; }
    .menu-toggle span { width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
    .menu-toggle:focus-visible { outline: 2px solid #84d5ff; outline-offset: 3px; }
    .nav-button { order: 3; margin-left: 0; }
    .menu { position: absolute; top: calc(100% - 1px); right: 0; left: 0; z-index: 2; display: none; flex-direction: column; align-items: stretch; gap: 3px; max-height: calc(100vh - 95px); margin: 0; padding: 13px; overflow-y: auto; border: 1px solid rgba(99, 179, 239, .25); border-radius: 0 0 14px 14px; background: rgba(3, 19, 36, .98); box-shadow: 0 22px 50px rgba(0, 0, 0, .36); backdrop-filter: blur(18px); }
    .menu.is-open { display: flex; }
    .menu a { display: flex; align-items: center; min-height: 44px; padding: 10px 13px; border-radius: 8px; font-size: 14px; }
    .menu a.active { background: rgba(39, 135, 203, .15); }
    .menu a.active::after { top: 10px; right: auto; bottom: 10px; left: 0; width: 2px; height: auto; }
    .menu .menu-tutorials { margin: 4px 0; border-radius: 9px; }
}
@media (max-width: 650px) {
    .brand-statement { padding: 19px 0; }
    .brand-statement-inner { padding: 27px 22px; }
    .brand-statement p { font-size: 13px; }
    .tutorials-assurance { margin-top: 19px; }
}
@media (max-width: 400px) { .header .nav-button { display: none; } }

/* Download center: existing navy/cyan palette, typography and containers. */
.download-main { padding-bottom: 90px; }
.download-intro { max-width: 1040px; }
.download-intro .download-lead { color: #c1dced; font-size: 18px; }
.download-content { max-width: 1300px; margin-top: 48px; }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.download-card { display: flex; flex-direction: column; min-width: 0; padding: 32px; border: 1px solid rgba(99, 179, 239, .25); border-radius: 17px; background: linear-gradient(145deg, rgba(11, 46, 77, .92), rgba(4, 22, 42, .94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 55px rgba(20,112,185,.1); }
.download-card-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.download-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(117,201,255,.26); border-radius: 12px; background: rgba(36,119,174,.16); color: #91d5ff; }
.download-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.download-status { padding: 6px 10px; border: 1px solid rgba(108,177,234,.25); border-radius: 999px; color: #b5d4e9; font-size: 11px; font-weight: 700; }
.download-card h2 { margin-top: 21px; color: #edf8ff; font-size: clamp(23px, 2vw, 29px); line-height: 1.25; }
.download-card > p { min-height: 88px; margin-top: 13px; color: #a7bfd2; font-size: 14px; line-height: 1.7; }
.download-info { display: grid; gap: 12px; margin: 24px 0; padding: 19px 0; border-top: 1px solid rgba(99,179,239,.13); border-bottom: 1px solid rgba(99,179,239,.13); }
.download-info div, .download-details dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
.download-info dt, .download-details dt { color: #8aa9c0; font-size: 12px; }
.download-info dd { color: #d5e9f7; font-size: 12px; }
.download-action { display: grid; gap: 10px; }
.download-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 49px; padding: 12px 15px; border: 1px solid rgba(105,183,255,.4); border-radius: 10px; background: linear-gradient(135deg,#1679ff,#36a5ff); color: white; font: inherit; font-size: 13px; font-weight: 800; text-align: center; }
.download-button:disabled { background: rgba(43,80,110,.3); border-color: rgba(130,174,207,.22); color: #b0c2d0; box-shadow: none; cursor: not-allowed; transform: none; }
.download-action small { color: #94afc3; font-size: 11px; text-align: center; }
.download-details { margin-top: 24px; border-top: 1px solid rgba(99,179,239,.13); padding-top: 15px; }
.download-details summary { width: fit-content; color: #95c7e8; font-size: 12px; cursor: pointer; }
.download-details dl { display: grid; gap: 12px; margin-top: 17px; }
.download-details dd { min-width: 0; color: #b5cddd; font-size: 11px; overflow-wrap: anywhere; }
.download-details summary:focus-visible, .download-button:focus-visible { outline: 2px solid #84d5ff; outline-offset: 4px; }
.download-connection { margin-top: 36px; padding: 29px 35px; border: 1px solid rgba(99,179,239,.17); border-radius: 16px; background: rgba(8,31,55,.62); text-align: center; }
.download-connection-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 17px; }
.download-connection-flow span { padding: 8px 13px; border: 1px solid rgba(108,177,234,.22); border-radius: 8px; color: #aad7f4; font-size: 12px; font-weight: 700; }
.download-connection-flow i { color: #5ba7d7; font-style: normal; }
.download-connection h2, .download-section > h2 { color: #edf8ff; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.3; }
.download-connection p { max-width: 850px; margin: 11px auto 0; color: #a7bfd2; font-size: 13px; line-height: 1.7; }
.download-section { margin-top: 54px; }
.download-section > h2 { margin-top: 9px; }
.download-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; list-style: none; }
.download-steps li, .download-docs article { min-width: 0; padding: 23px; border: 1px solid rgba(99,171,229,.18); border-radius: 14px; background: linear-gradient(145deg,#0a2743,#06182c); }
.download-steps li > span { display: inline-block; color: #81ccfb; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.download-steps h3, .download-docs h3 { margin-top: 13px; color: #e4f4ff; font-size: 17px; line-height: 1.35; }
.download-steps p, .download-docs p { margin-top: 9px; color: #9bb3c8; font-size: 12px; line-height: 1.7; }
.download-docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.download-docs article { display: flex; flex-direction: column; align-items: flex-start; }
.download-docs h3 { margin-top: 0; }
.download-docs [data-document-action], .download-docs .footer-help-link { margin-top: auto; }
.download-docs p { margin-bottom: 19px; }
@media (min-width: 1200px) and (max-width: 1450px) {
    .menu { gap: 17px; }
}
@media (max-width: 1000px) { .download-docs { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) {
    .download-grid, .download-steps { grid-template-columns: 1fr; }
    .download-card { padding: 25px 22px; }
    .download-card > p { min-height: 0; }
    .download-connection { padding: 25px 20px; }
}
@media (max-width: 430px) {
    .download-docs { grid-template-columns: 1fr; }
    .download-info div, .download-details dl div { grid-template-columns: 90px minmax(0,1fr); gap: 9px; }
    .download-connection-flow { gap: 7px; }
    .download-connection-flow span { padding: 7px 9px; font-size: 11px; }
}

/* Final header and hero polish: keep the established layout and imagery. */
.header { background: rgba(2, 10, 22, .48); border-bottom-color: rgba(120, 180, 225, .08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav { min-height: 84px; gap: 24px; }
.logo img { width: 220px; }
.menu { gap: clamp(18px, 1.65vw, 30px); }
.menu a { white-space: nowrap; }
.menu a:hover { color: #eaf7ff; }
.menu a:focus-visible, .nav-button:focus-visible, .logo:focus-visible { outline: 2px solid #84d5ff; outline-offset: 5px; border-radius: 5px; }
.menu a.active::after { bottom: -13px; box-shadow: 0 0 9px rgba(51, 154, 255, .5); }
.nav-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-left: 0; padding: 0 20px; }
.hero { padding-top: 112px; background: radial-gradient(ellipse at 75% 49%, rgba(21, 125, 204, .13), transparent 42%), linear-gradient(110deg, #020914 0%, #031020 43%, #061b33 100%); }
.hero h1 { line-height: 1.07; letter-spacing: -.045em; }
.hero h1 span { color: #83c8f5; text-shadow: none; }
.hero-description { max-width: 570px; margin-top: 25px; color: #b4c7d9; line-height: 1.65; }
.hero-buttons { margin-top: 30px; }
.hero-buttons .button { min-height: 54px; border-radius: 10px; }
.hero-buttons .button:focus-visible { outline: 2px solid #a7ddff; outline-offset: 4px; }
.hero-image-wrap img { filter: brightness(.88) saturate(.98) contrast(1.03); }
@media (max-width: 1199px) {
    .menu { gap: 3px; }
    .menu a.active::after { bottom: 10px; box-shadow: none; }
}
@media (max-width: 650px) {
    .nav { min-height: 76px; }
    .logo img { width: 165px; }
    .hero { padding-top: 115px; }
    .hero h1 { font-size: clamp(37px, 10.7vw, 42px); line-height: 1.08; letter-spacing: -.045em; }
    .hero-description { margin-top: 20px; font-size: 14px; line-height: 1.6; }
    .hero-buttons { gap: 12px; margin-top: 27px; }
}

/* Feature-family polish; no changes to package, mobile, or shared CTAs. */
.problem-section { padding-bottom: 82px; }
.problem-heading { margin-bottom: 32px; }
.problem-heading > p { max-width: 690px; }
.audience-section { padding-top: 76px; padding-bottom: 90px; }
.capabilities-section { padding-top: 94px; padding-bottom: 105px; }
.reminders-section { padding-top: 100px; padding-bottom: 110px; }
.platform-section { padding-top: 100px; padding-bottom: 110px; }
.audience-heading, .capabilities-heading, .reminders-heading, .platform-heading { margin-bottom: 42px; }
.audience-grid, .capabilities-grid, .reminders-grid, .platform-features { align-items: stretch; gap: 18px; }
.audience-card, .capability-card, .reminder-card, .platform-card {
    height: 100%;
    border: 1px solid rgba(105, 175, 232, .18);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(11, 39, 66, .78), rgba(4, 19, 36, .76));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 16px 42px rgba(0, 0, 0, .12);
}
.audience-card, .platform-card { padding: 26px; }
.capability-card { min-height: 0; padding: 26px 28px; }
.audience-card h3, .platform-card h3 { margin-top: 18px; }
.audience-card p, .platform-card p, .capability-card > p { color: #a9bfd3; font-size: 14px; line-height: 1.6; }
.capability-card h3 { font-size: 25px; }
.capability-card:hover, .capability-card:focus-within, .platform-card:hover {
    transform: translateY(-2px);
    border-color: rgba(105, 185, 246, .34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 46px rgba(0, 48, 96, .17);
}
.reminder-card { overflow: hidden; }
.reminder-card summary { min-height: 96px; }
.reminder-card:hover, .reminder-card:focus-within { border-color: rgba(105, 185, 246, .34); }
.capabilities-statement { margin-top: 24px; }
.capabilities-statement p { flex-basis: 560px; }
@media (max-width: 650px) {
    .problem-section { padding-bottom: 55px; }
    .audience-section { padding-top: 58px; padding-bottom: 48px; }
    .capabilities-section { padding-top: 52px; padding-bottom: 82px; }
    .reminders-section { padding-top: 76px; padding-bottom: 84px; }
    .platform-section { padding-top: 76px; padding-bottom: 84px; }
    .audience-heading, .capabilities-heading, .reminders-heading, .platform-heading { margin-bottom: 30px; }
    .audience-grid, .capabilities-grid, .reminders-grid, .platform-features { gap: 13px; }
    .audience-card, .capability-card, .platform-card { padding: 22px; }
    .audience-card h3, .platform-card h3 { margin-top: 15px; }
    .reminder-card summary { min-height: 76px; }
}

/* Mobile application: a clearer PC/phone story with the existing screenshots. */
.mobile-layout { column-gap: clamp(34px, 4vw, 82px); }
.mobile-intro h2 { max-width: 610px; }
.mobile-intro > p { max-width: 570px; margin-top: 20px; line-height: 1.65; }
.mobile-connection-label { display: flex; align-items: center; gap: 12px; margin-top: 25px; color: #a9c4d9; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.mobile-connection-label span { display: inline-flex; align-items: center; min-height: 31px; padding: 0 10px; border: 1px solid rgba(103, 189, 244, .29); border-radius: 7px; background: rgba(31, 111, 176, .16); color: #89d3ff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.mobile-feature-list { margin-top: 15px; }
.mobile-feature-list li { min-height: 68px; border-color: rgba(100, 177, 234, .18); border-radius: 12px; background: rgba(9, 35, 61, .65); color: #d7e8f5; font-size: 13px; }
.mobile-feature-icon { flex-basis: 34px; width: 34px; height: 34px; }
.mobile-shot { border-color: rgba(101, 183, 244, .23); box-shadow: 0 20px 48px rgba(0, 0, 0, .24); }
.mobile-shot-main { box-shadow: 0 25px 60px rgba(0, 25, 57, .42); }
.mobile-showcase::before { background: radial-gradient(circle, rgba(24, 127, 255, .18), transparent 68%); }
.mobile-shot-pair { gap: 12px; }
.mobile-actions { margin-top: 24px; }
.mobile-access-level, .mobile-admin-card, .mobile-setup-card { border-color: rgba(105, 178, 232, .2); }
.mobile-access-level p, .mobile-admin-card > p, .mobile-setup-card > p { color: #a8bfd2; }
@media (max-width: 1000px) {
    .mobile-layout { row-gap: 28px; }
    .mobile-connection-label { margin-top: 0; }
}
@media (max-width: 650px) {
    .mobile-section { padding-top: 72px; padding-bottom: 84px; }
    .mobile-layout { row-gap: 26px; }
    .mobile-intro h2 { font-size: 36px; line-height: 1.12; }
    .mobile-intro > p { font-size: 15px; }
    .mobile-shot-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 9px; }
    .mobile-feature-list { gap: 9px; margin-top: 14px; }
    .mobile-feature-list li { min-height: 58px; padding: 10px 12px; }
    .mobile-extended { margin-top: 58px; }
    .mobile-access-level, .mobile-admin-card, .mobile-setup-card { padding: 22px 20px; }
}

/* Final pricing polish: visual hierarchy only; card/grid/morph geometry stays intact. */
.packages-section .package-summary small,
.packages-section .package-basic-copy > strong { color: #a9dcff; font-size: 16px; line-height: 1.4; }
.packages-section .package-summary em { color: #bedff5; }
.packages-section .package-basic-copy p { color: #9eb6ca; font-size: 13px; line-height: 1.5; }
.packages-section .package-hook,
.packages-section .professional-card-message { color: #adc5d9; font-size: 13px; line-height: 1.55; }
.packages-section .package-trial-badge { color: #b6dfff; }
.packages-section .basic-trial-badge { color: #a8cee8; }
.packages-section .detail-list li,
.packages-section .comfort-group li,
.packages-section .basic-option-card li,
.packages-section .professional-feature-list li { color: #b5cadb; font-size: 13px; line-height: 1.6; }
.packages-section .professional-variant-subtitle,
.packages-section .professional-value p,
.packages-section .professional-trial p,
.packages-section .basic-trial-note p { color: #aec5d8; }
.packages-section .package-cta { min-height: 46px; border-color: rgba(115, 197, 255, .44); box-shadow: 0 9px 25px rgba(0, 105, 225, .16); }
.packages-section .package-cta:focus-visible,
.packages-section .large-fleet-cta:focus-visible { outline: 2px solid #b4e7ff; outline-offset: 3px; }

/* Final contact polish; form structure, validation and submission stay unchanged. */
.contact-section { padding-top: 104px; padding-bottom: 112px; }
.contact-layout { align-items: start; gap: clamp(38px, 4.5vw, 76px); }
.contact-intro > p { color: #b5c9da; line-height: 1.65; }
.contact-benefits { gap: 16px; margin-top: 36px; }
.contact-benefit > span { border-color: rgba(115, 194, 246, .28); background: rgba(31, 120, 191, .12); }
.contact-benefit p { color: #9db4c8; font-size: 13px; }
.contact-trust { margin-top: 32px; background: rgba(18, 55, 87, .3); }
.contact-trust small { color: #9cb4c9; }
.contact-panel { border-color: rgba(109, 181, 235, .25); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 22px 58px rgba(0,0,0,.22); }
.contact-panel-heading p { color: #adc3d6; font-size: 14px; }
.contact-fields { gap: 17px 16px; }
.contact-field label { color: #dcebf7; font-size: 13px; }
.contact-field input,
.contact-field select,
.contact-field textarea { min-height: 49px; border-color: rgba(115, 172, 217, .32); border-radius: 10px; background: rgba(4, 22, 40, .82); }
.contact-field textarea { min-height: 124px; }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: #91a9bd; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus { border-color: #8bd2ff; box-shadow: 0 0 0 3px rgba(75, 172, 238, .17); }
.contact-field [aria-invalid="true"] { border-color: #e994a3; box-shadow: 0 0 0 2px rgba(233, 148, 163, .12); }
.contact-field-error { color: #ffc2cb; font-size: 12px; }
.contact-submit { min-height: 54px; box-shadow: 0 10px 27px rgba(11, 141, 221, .2); }
.contact-privacy { color: #9cb2c5; font-size: 12px; }
.contact-status { border-radius: 10px; font-size: 13px; }
.contact-status[data-state="success"] { border-color: rgba(122, 204, 181, .32); background: rgba(28, 99, 85, .2); color: #d0eee5; }
.contact-status[data-state="error"] { border-color: rgba(232, 150, 165, .32); background: rgba(107, 50, 65, .19); color: #ffe1e5; }
.contact-package-note p { color: #a7bfd1; }
@media (max-width: 650px) {
    .contact-section { padding-top: 72px; padding-bottom: 82px; }
    .contact-layout { gap: 32px; }
    .contact-benefits { gap: 15px; margin-top: 30px; }
    .contact-panel { padding: 24px 19px; }
    .contact-fields { gap: 15px; }
}

/* Final Download Center polish; release readiness and links remain config-driven. */
.download-page .download-intro { max-width: 900px; }
.download-page .download-intro > p { color: #adc4d7; line-height: 1.65; }
.download-page .download-intro .download-lead { color: #d0e7f5; }
.download-page .download-content { margin-top: 42px; }
.download-page .download-grid { align-items: stretch; gap: 20px; }
.download-page .download-card { border-color: rgba(107, 181, 235, .23); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 48px rgba(0,0,0,.17); }
.download-page .download-icon { border-color: rgba(117, 201, 255, .25); background: rgba(36, 119, 174, .12); }
.download-page .download-status { background: rgba(96, 139, 172, .1); color: #c0d7e7; }
.download-page .download-card > p { color: #b2c7d8; }
.download-page .download-info { margin-top: auto; border-color: rgba(117, 184, 232, .16); }
.download-page .download-info dt,
.download-page .download-details dt { color: #a4bbce; }
.download-page .download-info dd,
.download-page .download-details dd { color: #d1e3ef; }
.download-page .download-button { min-height: 52px; border-radius: 10px; }
.download-page .download-button:disabled { border-color: rgba(143, 183, 212, .29); background: linear-gradient(120deg, rgba(39, 75, 103, .43), rgba(31, 62, 87, .44)); color: #c1d2de; opacity: 1; box-shadow: none; cursor: not-allowed; }
.download-page .download-action small { color: #aac0d1; font-size: 12px; }
.download-page .download-details { border-color: rgba(117, 184, 232, .16); }
.download-page .download-details summary { color: #acd7f1; font-size: 13px; }
.download-page .download-details summary:focus-visible { outline: 2px solid #9bdcff; outline-offset: 4px; border-radius: 3px; }
.download-page .download-connection { margin-top: 30px; border-color: rgba(107, 181, 235, .2); background: rgba(8, 31, 55, .56); }
.download-page .download-connection p { color: #b2c7d8; }
.download-page .download-section { margin-top: 48px; }
.download-page .download-steps { gap: 16px; }
.download-page .download-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.download-page .download-steps li,
.download-page .download-docs article { border-color: rgba(105, 175, 229, .2); background: linear-gradient(145deg, rgba(10, 39, 67, .88), rgba(6, 24, 44, .9)); }
.download-page .download-steps p,
.download-page .download-docs p { color: #afc4d5; font-size: 13px; }
@media (max-width: 1000px) {
    .download-page .download-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .download-page .download-grid,
    .download-page .download-steps,
    .download-page .download-docs { grid-template-columns: 1fr; }
    .download-page .download-card { padding: 25px 21px; }
    .download-page .download-card > p { min-height: 0; }
    .download-page .download-info { margin-top: 22px; }
    .download-page .download-button { width: 100%; }
    .download-page .download-connection { padding: 24px 18px; }
    .download-page .download-section { margin-top: 44px; }
}

/* Objedinjeni Rokovi: dopune postojećeg premium stila. */
.reminders-heading .reminders-highlight { max-width: 850px; margin-top: 20px; color: #9ad7ff; font-size: clamp(20px, 2vw, 29px); font-weight: 800; line-height: 1.35; }
.reminders-all { margin-top: 28px; }
.reminders-all > summary { display: flex; width: fit-content; max-width: 100%; min-height: 50px; margin: 0 auto; padding: 12px 19px; align-items: center; justify-content: center; gap: 12px; border: 1px solid rgba(104, 195, 255, .55); border-radius: 10px; background: rgba(25, 103, 166, .25); color: #d9efff; font-size: 14px; font-weight: 800; line-height: 1.4; text-align: center; list-style: none; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.reminders-all > summary::-webkit-details-marker { display: none; }
.reminders-all > summary:hover { transform: translateY(-2px); border-color: #a4deff; background: rgba(30, 120, 189, .33); }
.reminders-all > summary:focus-visible { outline: 2px solid #ace2ff; outline-offset: 4px; }
.reminders-all > summary span { color: #8dd4ff; font-size: 19px; line-height: 1; transition: transform .2s ease; }
.reminders-all[open] > summary span { transform: rotate(180deg); }
.reminders-all-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.reminders-all-grid article { min-width: 0; padding: 25px; border: 1px solid rgba(105, 178, 230, .19); border-radius: 14px; background: rgba(7, 29, 51, .75); }
.reminders-all-grid h3 { color: #e8f5ff; font-size: 20px; line-height: 1.3; }
.reminders-all-grid p { margin-top: 11px; color: #b2c7d8; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.reminders-all-grid small { display: block; margin-top: 12px; color: #88bede; font-size: 12px; line-height: 1.6; }
.reminders-section .reminder-system { max-width: 850px; margin: 36px auto 0; padding: 22px 24px; border: 1px solid rgba(117, 174, 223, .18); border-radius: 12px; background: rgba(7, 29, 51, .48); color: #91abc3; font-size: 12px; line-height: 1.6; }
.reminder-system strong { display: block; color: #cbe8fb; font-size: 14px; }
.reminder-system p { margin-top: 7px; }
@media (max-width: 650px) {
    .reminders-all > summary { width: 100%; }
    .reminders-all-grid { grid-template-columns: 1fr; gap: 11px; }
    .reminders-all-grid article { padding: 22px 20px; }
    .reminders-section .reminder-system { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .reminders-all > summary,
    .reminders-all > summary span { transition-duration: .01ms; }
}

/* Download page: final, compact presentation of the released apps. */
.download-page .download-main { padding-bottom: 76px; }
.download-page .download-intro { max-width: 840px; }
.download-page .download-intro .download-lead { max-width: 680px; margin-top: 20px; font-size: 18px; line-height: 1.55; }
.download-page .download-content { margin-top: 38px; }
.download-page .download-grid { gap: 22px; }
.download-page .download-card { padding: 29px 30px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.download-page .download-card:hover { border-color: rgba(121, 205, 255, .42); box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 22px 52px rgba(0,0,0,.2); transform: translateY(-2px); }
.download-page .download-status { padding: 5px 10px; border-color: rgba(109, 190, 245, .27); background: rgba(28, 99, 153, .15); color: #9ed8ff; font-size: 11px; letter-spacing: .03em; }
.download-page .download-card h2 { margin-top: 19px; }
.download-page .download-card > p { min-height: 68px; margin-top: 11px; font-size: 14px; line-height: 1.65; }
.download-page .download-info { gap: 8px; margin: 12px 0 20px; padding: 14px 0; }
.download-page .download-info dt { font-size: 12px; }
.download-page .download-info dd { font-size: 13px; line-height: 1.4; }
.download-page .download-action { gap: 12px; }
.download-page .download-button { min-height: 54px; font-size: 14px; }
.download-page .download-button:not(:disabled):hover { filter: brightness(1.1); transform: translateY(-1px); }
.download-page .download-action small { max-width: 440px; margin: 0 auto; line-height: 1.55; }
.download-page .download-details { margin-top: 21px; padding-top: 13px; }
.download-page .download-connection { max-width: 100%; margin-top: 29px; padding: 25px 32px; text-align: left; }
.download-page .download-connection h2 { font-size: clamp(22px, 2vw, 27px); }
.download-page .download-connection p { max-width: 780px; margin: 8px 0 0; font-size: 14px; }
.download-page .download-section { margin-top: 43px; }
.download-page .download-steps { gap: 16px; margin-top: 20px; }
.download-page .download-steps li { padding: 22px 23px; }
.download-page .download-steps h3 { font-size: 17px; }
.download-page .download-steps p { font-size: 13px; }
@media (max-width: 700px) {
    .download-page .download-main { padding-bottom: 62px; }
    .download-page .download-intro .download-lead { font-size: 16px; }
    .download-page .download-content { margin-top: 30px; }
    .download-page .download-grid { gap: 14px; }
    .download-page .download-card { padding: 24px 21px; }
    .download-page .download-card > p { min-height: 0; }
    .download-page .download-info { margin: 17px 0 19px; }
    .download-page .download-connection { padding: 23px 20px; }
    .download-page .download-section { margin-top: 39px; }
}
@media (prefers-reduced-motion: reduce) {
    .download-page .download-card { transition: none; }
}

/* Ultrawide download refinement: keep the existing compact content centered. */
.download-page .download-main { padding-top: 145px; }
.download-page .download-content { max-width: 1200px; margin-top: 32px; }
.download-page .download-icon { width: 48px; height: 48px; }
.download-page .download-icon svg { width: 26px; height: 26px; }
@media (max-width: 700px) {
    .download-page .download-main { padding-top: 117px; }
    .download-page .download-content { margin-top: 28px; }
}