/* ==========================================================================
   JMSoft.pl — wspólny arkusz stylów
   Framework: Bootstrap 5 + poniższe style własne
   ========================================================================== */

:root {
    --jm-navy: #0e1b38;
    --jm-navy-2: #14264f;
    --jm-blue: #1565c0;
    --jm-blue-dark: #0d47a1;
    --jm-cyan: #7fc4ee;
    --jm-bg: #f9f9f7;
    --jm-panel: #eef1f4;
    --jm-text: #23293a;
    --jm-muted: #5d6572;
    --jm-line: #d8dde4;
}

body {
    font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    color: var(--jm-text);
    background: var(--jm-bg);
    font-size: 1.02rem;
    /* stopka zawsze przyklejona do dołu strony */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.jm-footer { margin-top: auto; }

h1, h2, h3, h4, h5, h6, .navbar-jm .nav-link, .jm-brand {
    font-family: "Titillium Web", "Segoe UI", system-ui, sans-serif;
}

h1, h2, h3 { font-weight: 700; }

.section-title { font-size: clamp(1.45rem, 3vw, 1.9rem); margin-bottom: 1rem; }

a { color: var(--jm-blue); }
a:hover { color: var(--jm-blue-dark); }

/* Natychmiastowy, nieanimowany focus */
:focus-visible {
    outline: 2px solid var(--jm-blue);
    outline-offset: 2px;
    box-shadow: none !important;
    transition: none !important;
}

.btn { transition: none; }

/* ---------- Pasek nawigacji ---------- */

.navbar-jm {
    background: #fff;
    border-bottom: 1px solid var(--jm-line);
}

.navbar-jm.scrolled { border-bottom-color: #c3cbd6; }

.jm-brand { display: flex; align-items: center; }

.jm-brand img { height: 34px; width: auto; }

.navbar-jm .nav-link {
    font-weight: 600;
    color: var(--jm-text);
    padding: .55rem .2rem !important;
    margin-left: 1.6rem;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.navbar-jm .nav-link:hover { color: var(--jm-blue); }

.navbar-jm .nav-link.active {
    color: var(--jm-blue-dark);
    border-bottom-color: var(--jm-blue);
}

/* ---------- Okruszki ---------- */

.jm-breadcrumb {
    background: var(--jm-panel);
    border-bottom: 1px solid var(--jm-line);
    font-size: .85rem;
    padding: .5rem 0;
    color: var(--jm-muted);
}

.jm-breadcrumb a { color: var(--jm-blue); text-decoration: none; }
.jm-breadcrumb a:hover { text-decoration: underline; }

/* ---------- Hero produktu (Malward) — wg projektu graficznego ---------- */

.product-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, var(--jm-navy) 0%, var(--jm-navy-2) 60%, #16346b 100%);
    color: #fff;
    padding: 3.5rem 0 4rem;
}

.product-hero::after {
    /* ukośny akcent jak na projekcie graficznym */
    content: "";
    position: absolute;
    top: -20%;
    right: -12%;
    width: 55%;
    height: 160%;
    background: rgba(21, 101, 192, .22);
    transform: skewX(-14deg);
    pointer-events: none;
}

.product-hero > .container { position: relative; z-index: 1; }

/* wariant hero ze zdjęciem i płynnym przejściem z granatu w fotografię */
.product-hero--photo {
    background:
        linear-gradient(100deg,
            rgba(11, 21, 44, .97) 0%,
            rgba(11, 21, 44, .90) 38%,
            rgba(11, 21, 44, .45) 65%,
            rgba(11, 21, 44, .05) 100%),
        url("../img/adfree/hero.jpg") right center / cover no-repeat;
}

.product-hero--photo::after { display: none; }

@media (max-width: 991.98px) {
    .product-hero--photo {
        background:
            linear-gradient(rgba(11, 21, 44, .93), rgba(11, 21, 44, .93)),
            url("../img/adfree/hero.jpg") center / cover no-repeat;
    }
}

.product-hero .product-logo { max-height: 60px; width: auto; }

.product-hero .tagline {
    font-size: 1.2rem;
    color: #c9ddf5;
    max-width: 30rem;
}

.product-hero .hero-shot {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .4));
}

.btn-download {
    background: var(--jm-blue);
    border: 1px solid var(--jm-blue);
    color: #fff;
    font-weight: 700;
    font-size: 1.08rem;
    padding: .8rem 1.9rem;
    border-radius: 6px;
}

.btn-download:hover,
.btn-download:focus {
    background: var(--jm-blue-dark);
    border-color: var(--jm-blue-dark);
    color: #fff;
}

.hero-links a {
    color: var(--jm-cyan);
    font-size: .9rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero-links a:hover { color: #fff; }

.hero-meta { font-size: .85rem; color: #9db1d4; }

/* ---------- Panel „Funkcje programu" — wg projektu graficznego ---------- */

.feature-panel {
    background: linear-gradient(105deg, var(--jm-blue-dark), var(--jm-blue) 70%, #2a7fd4);
    color: #fff;
    border-radius: 10px;
}

.feature-panel ul { margin: 0; }

.feature-panel li {
    margin-bottom: .5rem;
    padding-left: 1.1rem;
    position: relative;
}

.feature-panel li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: #a8d1f5;
}

/* ---------- Sekcje naprzemienne ---------- */

.zigzag { padding: 3.25rem 0; }
.zigzag + .zigzag { padding-top: 0; }

.zigzag .img-frame {
    border: 1px solid var(--jm-line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.zigzag .img-frame img { width: 100%; height: auto; display: block; }

.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    /* border: 1px dashed #b7c0cc;
    border-radius: 8px;
    background: var(--jm-panel); */
    color: #7d8798;
    font-weight: 600;
    font-size: .88rem;
    text-align: center;
}

/* ---------- Zagrożenia — wg projektu graficznego ---------- */

.threats {
    background: var(--jm-panel);
    border-top: 1px solid var(--jm-line);
    border-bottom: 1px solid var(--jm-line);
    padding: 3.5rem 0;
}

.threat-banner {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--jm-line);
}

.threat-card { text-align: center; padding: .5rem; }

.threat-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--jm-blue-dark);
    background: #dde7f2;
}

.threat-card h5 { margin-bottom: .45rem; }
.threat-card p { color: var(--jm-muted); font-size: .92rem; }

/* ---------- Wideo ---------- */

.video-section { padding: 3.5rem 0; }

.video-frame {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--jm-line);
    background: #10131a;
}

/* ---------- Galeria ---------- */

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--jm-line);
    cursor: zoom-in;
    background: var(--jm-panel);
}

.gallery img:hover { border-color: var(--jm-blue); }

/* ---------- CTA ---------- */

.cta-section {
    background: var(--jm-panel);
    border-top: 1px solid var(--jm-line);
    border-bottom: 1px solid var(--jm-line);
    padding: 3rem 0;
    text-align: center;
}

.btn-jm-primary {
    background: var(--jm-blue);
    border: 1px solid var(--jm-blue);
    color: #fff;
    font-weight: 600;
    padding: .6rem 1.6rem;
    border-radius: 6px;
}

.btn-jm-primary:hover { background: var(--jm-blue-dark); border-color: var(--jm-blue-dark); color: #fff; }

.btn-jm-secondary {
    background: #fff;
    border: 1px solid var(--jm-blue);
    color: var(--jm-blue);
    font-weight: 600;
    padding: .6rem 1.6rem;
    border-radius: 6px;
}

.btn-jm-secondary:hover { background: var(--jm-blue); color: #fff; }

/* ---------- Karta „O programie" — wg projektu graficznego ---------- */

.about-program {
    background: var(--jm-navy);
    color: #c2d2ea;
    border-radius: 10px;
    font-size: .88rem;
}

.about-program h5 { color: #fff; }
.about-program a { color: var(--jm-cyan); }

/* ---------- Karty programów ---------- */

.program-card {
    border: 1px solid var(--jm-line);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    background: #fff;
}

a:hover > .program-card,
.program-card:hover { border-color: var(--jm-blue); }

.program-card .card-thumb {
    background: var(--jm-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.6rem;
    min-height: 170px;
}

.program-card .card-thumb img { max-height: 130px; width: auto; max-width: 100%; }

.badge-soon {
    background: var(--jm-panel);
    border: 1px solid var(--jm-line);
    color: var(--jm-muted);
    font-weight: 600;
}

/* ---------- Hero strony głównej ---------- */

.home-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, var(--jm-navy), var(--jm-navy-2) 70%, #16346b);
    color: #fff;
    padding: 4.5rem 0;
}

.home-hero .lead { color: #c9ddf5; }

/* ---------- Lista kontaktowa / wyróżniki ---------- */

.plain-list { border-top: 1px solid var(--jm-line); }

.plain-list > li {
    display: flex;
    gap: 1.25rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--jm-line);
}

.plain-list .bi {
    font-size: 1.5rem;
    color: var(--jm-blue-dark);
    flex: 0 0 auto;
    margin-top: .1rem;
}

.plain-list h5 { margin-bottom: .3rem; }
.plain-list p { margin-bottom: .4rem; color: var(--jm-muted); }

/* ---------- Stopka ---------- */

.jm-footer {
    background: var(--jm-navy);
    color: #9db1d4;
    padding: 3rem 0 1.25rem;
    font-size: .92rem;
}

.jm-footer a { color: #cdd9ec; text-decoration: none; }
.jm-footer a:hover { color: #fff; text-decoration: underline; }

.jm-footer .footer-logo {
    height: 32px;
    width: auto;
}

.jm-footer .footer-tagline { max-width: 17rem; color: #9db1d4; }

.jm-footer a.btn-footer-pill {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 999px;
    padding: .45rem 1.4rem;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}

.jm-footer a.btn-footer-pill:hover {
    background: #fff;
    color: var(--jm-navy);
    text-decoration: none;
}

.footer-social { display: flex; gap: .6rem; }

.footer-social a {
    width: 34px;
    height: 34px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .95rem;
}

.footer-social a:hover { background: #fff; color: var(--jm-navy); text-decoration: none; }

.jm-footer h6 {
    color: #fff;
    font-size: .98rem;
    margin-bottom: .9rem;
}

.jm-footer ul { list-style: none; padding: 0; margin: 0; }
.jm-footer ul li { margin-bottom: .55rem; }

.footer-badge { width: 138px; height: 138px; flex: 0 0 auto; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .14);
    margin-top: 2.25rem;
    padding-top: 1rem;
    color: #7288ad;
    font-size: .85rem;
}

/* ---------- Aktualności ---------- */

.news-date {
    flex: 0 0 6.5rem;
    font-weight: 600;
    color: var(--jm-muted);
    font-size: .9rem;
    margin-top: .25rem;
}

/* ---------- Drobiazgi ---------- */

.changelog-box {
    background: var(--jm-panel);
    border: 1px solid var(--jm-line);
    border-radius: 6px;
    font-size: .92rem;
}

.table-downloads th { white-space: nowrap; }

@media (max-width: 767.98px) {
    .product-hero { padding: 2.75rem 0; }
    .product-hero::after { display: none; }
    .navbar-jm .nav-link { margin-left: 0; }
}