/* ===========================================================
   Hero (17502 redesign) — replaces the photographic banner with
   a navy "blueprint" surface: radial navy gradient plus a faint
   technical grid, masked so it stays subtle. This blue blueprint
   is the shared visual motif of the redesign.

   Note: the NewStyle stat column (8+ products, 2 offices, …) is
   deliberately NOT ported for now, so the hero is single-column
   and the copy gets the full width.
   =========================================================== */
.banner {
    position: relative;
    width: 100%;
    min-height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 78% 28%, #1d4070 0%, #102541 45%, #0a1626 100%);
}

.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 46px 46px;
    /* fade the grid out toward the bottom-left so it stays subtle */
    -webkit-mask-image: radial-gradient(circle at 70% 35%, #000 0%, rgba(0, 0, 0, 0.25) 70%, transparent 100%);
    mask-image: radial-gradient(circle at 70% 35%, #000 0%, rgba(0, 0, 0, 0.25) 70%, transparent 100%);
}

.banner .container {
    position: relative;
    z-index: 2;
}

.banner .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: 40px;
}

/* The visual shares the hero's navy, so instead of a framed rectangle it is
   blended in: screen drops its dark background into ours and keeps only the
   glowing lines, and the mask (sized to the closest side, so every edge
   really reaches zero) feathers what is left.

   The "porthole" is built from two layers: a blurred copy underneath and the
   sharp image on top, masked to a smaller area. Where the sharp layer fades
   out, the soft one takes over — so the inner edge of the window blurs
   instead of just dimming. */
.banner .hero-visual {
    position: relative;
}

/* soft white glow behind the visual — a blurred radial that screen-blends
   onto the navy so the tech artwork looks lit from within; white keeps the
   falloff gentle yet clearly visible */
.banner .hero-visual::after {
    content: "";
    position: absolute;
    inset: 0 -10% 0 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse closest-side at 52% 50%,
        rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 42%, transparent 72%);
    filter: blur(36px);
    mix-blend-mode: screen;
}

.banner .hero-visual::before {
    content: "";
    position: absolute;
    z-index: 1;
    /* matches the sharp image, which is 110% wide and anchored left */
    inset: 0 -10% 0 0;
    background: url("../img/resources/main/hero-abstract.jpg") center / 100% 100% no-repeat;
    filter: blur(7px);
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 38%, rgba(0, 0, 0, 0.55) 74%, transparent 100%);
    mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 38%, rgba(0, 0, 0, 0.55) 74%, transparent 100%);
}

.banner .hero-visual img {
    position: relative;
    z-index: 2;
    display: block;
    width: 110%;
    max-width: none;
    height: auto;
    mix-blend-mode: screen;
    /* fades out earlier than the blurred layer below it */
    -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 30%, rgba(0, 0, 0, 0.35) 62%, transparent 82%);
    mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 30%, rgba(0, 0, 0, 0.35) 62%, transparent 82%);
}

.banner h2 {
    color: #ffffff;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.12;
    text-transform: none;
    margin: 0 0 22px;
    max-width: 760px;
}

/* the translated lines are lowercase — capitalise the opening letter only */
.banner h2::first-letter {
    text-transform: uppercase;
}

.banner h2 span.accent {
    color: var(--evo-blue-light);
}

.banner .hero-text {
    color: #b9c6d6;
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 0 30px;
    letter-spacing: normal;
}

.banner .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.banner .btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.banner .btn-hero-primary {
    background-color: var(--evo-blue);
    color: #ffffff;
}

.banner .btn-hero-primary:hover {
    background-color: #3a64d0;
    transform: translateY(-2px);
}

.banner .btn-hero-outline {
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

.banner .btn-hero-outline:hover {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: #ffffff;
}

@media(max-width: 991px) {
    .banner {
        min-height: 360px;
        /* matched breathing room above and below the stacked hero content */
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .banner .hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* stacked, the full-width visual would dwarf the copy; it also sits on
       its own, so it is centred instead of bleeding to the right */
    .banner .hero-visual {
        max-width: 460px;
        margin: 0 auto;
    }

    .banner .hero-visual img {
        width: 100%;
    }

    .banner .hero-visual::before {
        inset: 0;
    }

    .banner h2 {
        font-size: 34px;
    }

    .banner .hero-text {
        font-size: 1rem;
    }
}

/* On phones the stacked visual would just push the CTAs off-screen. */
@media(max-width: 575px) {
    .banner .hero-visual {
        display: none;
    }
}

/* ===========================================================
   Who we are / What we do — a short accent bar under each
   heading, matching the .section-head treatment used by the
   other sections. No extra markup needed.
   =========================================================== */
.description h2 {
    margin: 0 0 18px;
}

.description h2::after {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    background-color: var(--evo-blue);
    border-radius: 2px;
    margin-top: 18px;
}

/* ===========================================================
   Flagship products — alternating rows, each screenshot in a
   modern "app window" frame. Replaces the old grey galaxii /
   flexii bands and their photoshopped skew.
   =========================================================== */
.flagship {
    /* grey band with the faint blueprint grid; white browser frames on top */
    background-color: #f1f1f1;
    background-image:
        linear-gradient(rgba(47, 85, 184, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 85, 184, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
}

.section-head {
    text-align: center;
    margin-bottom: 64px;
}

.section-head h2 {
    margin: 0;
}

.section-head .accent-line {
    display: block;
    width: 46px;
    height: 4px;
    margin: 18px auto 0;
    background-color: var(--evo-blue);
    border-radius: 2px;
}

.product-row {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 64px;
    margin-bottom: 84px;
}

/* per-product accent colour used on hover (frame border + "Zjistit více").
   galaxii = bottom-left X leg, flexii = bottom-left X leg, evoDWH = left W half */
.product-galaxii { --accent: #560591; }
.product-flexii  { --accent: #29cb8c; }
.product-dwh     { --accent: #0c5b9e; }
.product-guard   { --accent: #14a098; }

/* galaxii + flexii + guard: the "Zjistit více" link carries its accent
   colour by default (not only on hover) */
.product-galaxii .product-more,
.product-flexii .product-more,
.product-guard .product-more {
    color: var(--accent);
}

.product-row:last-child {
    margin-bottom: 0;
}

/* every other product mirrors: media on the right, copy on the left.
   The columns are swapped too, so the screenshot always keeps the SAME
   (wider) width and the text the same width on every row. */
.product-row:nth-child(even) {
    grid-template-columns: 0.9fr 1fr;
}

.product-row:nth-child(even) .product-media {
    order: 2;
}

/* --- the screenshot sits in a flat "browser window": a slim top bar with
   three dots and an address pill, hairline border, no drop shadow. All
   three shots are 1600x1000, so they render at the same size in this
   fixed-width column. --- */
.app-frame {
    display: block;
    position: relative;
    padding-top: 38px;                 /* room for the window bar */
    border: 1px solid var(--evo-border, #e3ebf6);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: zoom-in;                   /* click opens the screenshot in the lightbox */
    transition: border-color 0.25s ease;
}

/* the bar: strip + three traffic-light dots (left) + an address pill */
.app-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 38px;
    background:
        radial-gradient(circle 5.5px at 20px 19px, #d6dde8 98%, transparent) no-repeat,
        radial-gradient(circle 5.5px at 40px 19px, #d6dde8 98%, transparent) no-repeat,
        radial-gradient(circle 5.5px at 60px 19px, #d6dde8 98%, transparent) no-repeat,
        linear-gradient(#eef2f8, #eef2f8) 92px 12px / calc(100% - 200px) 15px no-repeat,
        #f5f7fb;
    border-bottom: 1px solid var(--evo-border, #e3ebf6);
    border-radius: 8px 8px 0 0;
}

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

/* Hovering a product coordinates the frame border and the "Zjistit více"
   link into that product's own accent colour. */
.product-row:hover .app-frame {
    border-color: var(--accent, var(--evo-blue));
}

.product-row:hover .product-more {
    color: var(--accent, var(--evo-blue));
}

.product-row:hover .product-more i {
    transform: translateX(4px);
}

/* --- copy column --- */
/* per-logo heights tuned so the actual letters (x-height, e.g. the "e")
   render at the SAME size across products — their viewBoxes include the
   colour mark differently, so equal SVG height ≠ equal letter size.
   Reference = flexii; galaxii + evoDWH scaled to match its letter size. */
.product-info .logo {
    width: auto;
    max-width: 300px;
    height: 46px;
    margin-bottom: 22px;
}

.product-flexii  .product-info .logo { height: 46px; }
.product-galaxii .product-info .logo { height: 60px; }
.product-dwh     .product-info .logo { height: 43px; }
/* two-line lockup ("flexii" over "guard"), ~2:1 — taller so the top
   wordmark reads at a size comparable to the single-line logos */
.product-guard   .product-info .logo { height: 76px; }

.product-info p {
    margin: 0 0 22px;
}

.product-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--evo-blue);
}

.product-more {
    transition: color 0.2s ease;
}

.product-more i {
    transition: transform 0.2s ease;
}

/* base hover (also covers the unified buttons outside the flagship rows —
   flexiiGuard, AthenA); inside a product row the accent rule above wins */
.product-more:hover {
    color: #3a64d0;
}

.product-more:hover i {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .product-row,
    .product-row:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 60px;
    }

    /* copy first, screenshot below — on every row */
    .product-row .product-media,
    .product-row:nth-child(even) .product-media {
        order: 2;
    }


    .section-head {
        margin-bottom: 44px;
    }
}

/* ===========================================================
   "Jak se stavíme k AI" — AthenA-shaped block whose media column
   is a small HTML pipeline diagram of the approach.
   =========================================================== */
.ai-approach {
    /* grey band with the faint blueprint grid, same recipe as .flagship —
       separates the AI block from the white support section above and the
       white category cards below */
    background-color: #f1f1f1;
    background-image:
        linear-gradient(rgba(47, 85, 184, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 85, 184, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
}

.ai-approach .logo {
    display: block;
    width: auto;
    height: 42px;
    margin-bottom: 20px;
}

.ai-lead {
    font-weight: 600;
    color: var(--evo-navy);
}

/* --- the diagram --- */
.ai-diagram {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 440px;
    margin: 0 auto;
}

.ai-step {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--evo-border, #e3ebf6);
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(15, 45, 70, 0.06);
}

.ai-badge {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eaf0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--evo-blue);
}

.ai-txt {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--evo-text);
}

.ai-txt strong {
    color: var(--evo-navy);
    font-size: 1rem;
    margin-bottom: 2px;
}

/* connector between steps */
.ai-conn {
    width: 2px;
    height: 26px;
    margin: 6px auto;
    background: linear-gradient(var(--evo-blue), rgba(47, 85, 184, 0.25));
}

/* the AI node stands out — navy, evoAI blue→green accent badge */
.ai-step.ai-core {
    background: radial-gradient(circle at 80% 20%, #1d4070 0%, #11213a 70%);
    border-color: transparent;
    box-shadow: 0 16px 40px rgba(15, 45, 70, 0.22);
}

.ai-step.ai-core .ai-txt {
    color: #b9c6d6;
}

.ai-step.ai-core .ai-txt strong {
    color: #fff;
}

.ai-step.ai-core .ai-badge {
    background: linear-gradient(135deg, #2f55b8, #29cb8c);
    color: #fff;
}

@media (max-width: 991px) {
    .ai-diagram {
        margin-top: 28px;
    }
}

/* flexiiGuard promo: logo column + short copy, product lives on its own site.
   White band (sits between the grey flagship and grey AthenA sections). */
.flexiiguard {
    background-color: #ffffff;
}

.flexiiguard img.logo {
    width: auto;
    max-width: 260px;
}

.services .box {
    position: relative;
    width: 50%;
    padding-top: 50%;
    margin-left: 25%;
    background-color: #0e6ab0;
}

.services .box .icon {
    width: 100%;
    top: 50%;
    left: 0;
    position: absolute;
    transform: translateY(-50%);

}

.services .icon span {
    font-size: 55px;
}

/* ===========================================================
   Category cards ("co pokrýváme") — each category is its own
   block on the white band, held together by the border and
   shadow, icon in a soft square, equal height across the row.
   =========================================================== */
.services .cover-card {
    height: 100%;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 32px 28px;
    box-shadow: 0 6px 24px rgba(15, 45, 70, 0.06);
}

.services .cover-card .icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background-color: #eaf0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.services .cover-card .icon span {
    font-size: 24px;
    color: var(--evo-blue);
}

.services .cover-card h3 {
    margin: 0 0 10px;
}

.services .cover-card p {
    margin: 0;
}

.galaxii img.logo {
    width: 372px;
}

.flexii img.logo {
    width: 252px;
}

/* AthenA support section — white band */
.support {
    background-color: #ffffff;
}

.support img.logo {
    width: 200px;
}

/* AthenA screenshot: click opens the lightbox */
.app-screenshot-zoom {
    display: block;
    cursor: zoom-in;
}

/* Lightbox: keep the modal image inside the viewport from the very first
   frame. simpleLightbox only sets max-height via JS after the image loads,
   so the full-size screenshot flashed at native width → a horizontal
   scrollbar appeared and the image jumped once it was constrained. Capping
   it in CSS (wins over the late inline style) removes the flash. */
.slbImage {
    max-width: 92vw !important;
    max-height: 90vh !important;
}

.support img.app-screenshot {
    border: 1px solid #000;
}

.galaxii img.logo,
.flexii img.logo,
.support img.logo {
    max-width: 100%;
}

@media(max-width: 500px) {
    .galaxii img.logo,
    .flexii img.logo,
    .support img.logo {
        width: 100%;
        height: auto;
    }
}

.galaxii .fad,
.flexii .fad,
.DWH .fad {
    color: #075382;
}