:root {
    --navy:#04121c;
    --cyan:#05b6ca;
    --orange:#ff6427}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:Inter,Arial,sans-serif;
    color:#fff;
    background:var(--navy)
}

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

.container {
    width:min(1440px,calc(100% - 112px));
    margin:auto
}

.site-header {
    position:absolute;
    z-index:20;
    left:0;
    right:0;
    top:0
}

.nav {
    height:96px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}

.brand {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:23px;
    letter-spacing:-.055em;
    font-weight:400;
    white-space:nowrap
}

.brand-box {
    font-weight:800;
    letter-spacing:-.055em;
    border:3px solid var(--cyan);
    border-radius:2px;
    padding:2px 6px;
    font-size:22px
}

.desktop-nav {
    display:flex;
    gap:38px;
    margin-left:auto;
    margin-right:28px
}

.desktop-nav a {
    font-size:13px;
    font-weight:700;
    transition:color .2s
}

.desktop-nav a:hover {
    color:var(--cyan)
}

.btn {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:23px;
    min-height:54px;
    padding:0 25px;
    font-size:12px;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:.025em;
    border-radius:4px;
    transition:transform .2s,background .2s;
    white-space:nowrap
}

.btn:hover {
    transform:translateY(-2px)
}

.btn-primary {
    background:var(--cyan);
    color:white;
    box-shadow:0 7px 35px #00d5ee1a
}

.btn-primary:hover {
    background:#04cce0
}

.btn-outline {
    border:1px solid #b5c8d7b0;
    background:#05121e80
}

.btn-outline:hover {
    background:#ffffff1a
}

.nav-cta {
    min-height:45px;
    font-size:11px;
    padding:0 20px
}

.menu-toggle,.mobile-nav {
    display:none
}

.hero {
    position:relative;
    min-height:720px;
    overflow:hidden;
    background:radial-gradient(circle at 75% 45%,#51271b,#071522 62%,#020d15)
}

.hero-art {
    position:absolute;
    inset:0 0 0 33%;
    background-image:url('../images/volcano-scene.webp');
    background-size:cover;
    background-position:50% center;
    filter:saturate(1.1)
}

.hero-shade {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#03121e 0%,#03121ef7 22%,#03121ecf 37%,#03121e50 53%,transparent 75%),linear-gradient(0deg,#03121e 0%,#03121e55 13%,transparent 35%,#03121e55 100%)
}

.hero-inner {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    min-height:720px;
    padding-top:105px;
    padding-bottom:90px
}

.hero-content {
    width:650px;
    max-width:100%
}

.eyebrow {
    font-size:12px;
    letter-spacing:.26em;
    font-weight:700;
    text-transform:uppercase;
    margin:0 0 30px
}

.eyebrow span {
    color:var(--orange);
    padding:0 5px
}

h1 {
    font-family:'Barlow Condensed',Impact,sans-serif;
    text-transform:uppercase;
    font-size:clamp(58px,4.8vw,82px);
    line-height:.88;
    letter-spacing:-.025em;
    margin:0 0 31px;
    font-weight:900;
    text-shadow:0 3px 22px #0005
}

h1 em {
    font-style:italic;
    color:var(--orange);
    letter-spacing:-.05em;
    white-space:nowrap;
    position:relative;
    display:inline-block;
    transform:rotate(-3deg);
    text-shadow:2px 5px 0 #69241455
}

h1 em:after {
    content:'';
    height:7px;
    background:var(--orange);
    position:absolute;
    left:1%;
    right:1%;
    bottom:-12px;
    transform:rotate(-2deg);
    border-radius:60%
}

.hero-subtitle {
    font-size:19px;
    line-height:1.55;
    margin:0 0 30px;
    color:#f2f4f7
}

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

.proof {
    display:flex;
    gap:28px;
    margin-top:53px;
    flex-wrap:wrap
}

.proof-item {
    display:flex;
    align-items:center;
    gap:10px
}

.proof-icon {
    font-size:28px;
    font-weight:500;
    min-width:32px;
    line-height:1
}

.proof-item b,.proof-item small {
    display:block;
    font-size:12px;
    line-height:1.4
}

.proof-item small {
    font-size:11px;
    color:#d8e2e8
}

.scroll-cue {
    position:absolute;
    z-index:3;
    bottom:20px;
    left:50%;
    font-size:26px;
    color:#fff9;
    animation:bob 2s infinite
}

@keyframes bob {
    50% {
        transform:translateY(6px)
    }

}

.next-section {
    background:#f7f9fa;
    color:#0a1b2e;
    padding:100px 0 110px
}

.section-label {
    font-size:12px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:#0098ac;
    font-weight:800;
    margin:0 0 18px
}

.next-section h2 {
    font-size:clamp(34px,3.2vw,55px);
    line-height:1.1;
    letter-spacing:-.045em;
    margin:0
}

.next-section h2 span {
    color:#009eaf
}

@media(max-width:1100px) {
    .container {
        width:min(100% - 60px,1440px)
    }

    .desktop-nav {
        gap:19px;
        margin-right:0
    }

    .hero-art {
        left:31%
    }

    .hero-content {
        width:590px
    }

    h1 {
        font-size:68px
    }

    .proof {
        gap:17px
    }

}

@media(max-width:760px) {
    .container {
        width:calc(100% - 36px)
    }

    .nav {
        height:76px
    }

    .brand {
        font-size:19px
    }

    .brand-box {
        font-size:18px
    }

    .desktop-nav,.nav-cta {
        display:none
    }

    .menu-toggle {
        display:flex;
        flex-direction:column;
        gap:5px;
        background:transparent;
        border:0;
        padding:10px;
        cursor:pointer
    }

    .menu-toggle span {
        width:25px;
        height:2px;
        background:white
    }

    .mobile-nav {
        display:none;
        position:absolute;
        top:76px;
        left:0;
        right:0;
        background:#061925;
        padding:20px 25px;
        box-shadow:0 20px 30px #0008
    }

    .mobile-nav.open {
        display:flex;
        flex-direction:column;
        gap:22px
    }

    .mobile-nav a {
        font-size:15px;
        font-weight:700
    }

    .hero {
        min-height:850px
    }

    .hero-art {
        inset:0;
        background-size:auto 570px;
        background-position:59% top;
        background-repeat:no-repeat
    }

    .hero-shade {
        background:linear-gradient(0deg,#03121e 1%,#03121e 30%,#03121edc 52%,transparent 80%),linear-gradient(90deg,#03121e55,transparent)
    }

    .hero-inner {
        min-height:850px;
        align-items:end;
        padding-top:310px;
        padding-bottom:65px
    }

    .hero-content {
        width:100%
    }

    .eyebrow {
        font-size:10px;
        letter-spacing:.17em;
        margin-bottom:18px
    }

    h1 {
        font-size:clamp(49px,10vw,68px);
        margin-bottom:25px
    }

    .hero-subtitle {
        font-size:15px;
        margin-bottom:23px
    }

    .hero-actions {
        gap:9px
    }

    .btn {
        min-height:48px;
        font-size:10px;
        padding:0 15px;
        gap:10px
    }

    .proof {
        margin-top:33px;
        gap:17px 20px
    }

    .proof-icon {
        font-size:23px;
        min-width:24px
    }

    .proof-item b {
        font-size:11px
    }

    .proof-item small {
        font-size:10px
    }

    .next-section {
        padding:70px 0
    }

    .scroll-cue {
        display:none
    }

}

@media(max-width:400px) {
    h1 {
        font-size:49px
    }

    .hero-actions .btn {
        width:100%
    }

    .hero {
        min-height:910px
    }

    .hero-inner {
        min-height:910px
    }

}

/* ============================================================
   HERO V4 — vzdušnější typografie, třetí řádek a spodní CTA
   ============================================================ */

@media (min-width: 761px) {
    .hero,
    .hero-inner {
        min-height: 720px;
    }

    .hero-inner {
        align-items: stretch;
        padding-top: 125px;
        padding-bottom: 18px;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        width: 650px;
        max-width: 58%;
        min-height: 0;
    }

    .eyebrow {
        margin-bottom: 27px;
    }

    .hero h1 {
        font-size: clamp(58px, 4.35vw, 77px);
        font-weight: 700;
        line-height: 1.04;
        letter-spacing: 0.005em;
        margin-bottom: 24px;
    }

    .hero h1 em {
        margin-top: 4px;
        margin-left: 16px;
        font-weight: 700;
        letter-spacing: -0.015em;
    }

    .hero-subtitle {
        font-size: 17px;
        line-height: 1.65;
        margin-bottom: 24px;
    }

    .hero-actions {
        margin-top: auto;
    }

    .proof {
        margin-top: 23px;
        gap: 22px;
    }

    .scroll-cue {
        bottom: 13px;
    }

}

@media (min-width: 761px) and (max-width: 1100px) {
    .hero-content {
        max-width: 62%;
    }

    .hero h1 {
        font-size: clamp(51px, 5.5vw, 65px);
    }

    .proof {
        gap: 13px;
    }
}

@media (max-width: 760px) {
    .hero h1 {
        font-weight: 700;
        line-height: 1.03;
        letter-spacing: 0;
    }

    .hero h1 em {
        margin-left: 10px;
        font-weight: 700;
    }

}

/* ============================================================
   HERO V5 – posunutá ŠŤÁVA a tři silnější argumenty
   ============================================================ */
.hero-art {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 25%),
        linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 25%),
        linear-gradient(to bottom, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.hero h1 em {
    margin-left: clamp(48px, 5vw, 94px);
    transform: translateY(5px) rotate(-9deg);
    transform-origin: 15% 60%;
}

.proof {
    gap: clamp(20px, 2.5vw, 44px);
    margin-top: 25px;
    align-items: center;
}

.proof-item {
    gap: 12px;
}

.proof-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    color: var(--orange);
    flex-shrink: 0;
}

.proof-item b {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.proof-item small {
    font-size: 11px;
    line-height: 1.4;
    color: #c2d0d9;
}

@media (max-width: 1100px) {
    .proof {
        gap: 16px;
    }
    .proof-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }
}

@media (max-width: 760px) {
    .hero h1 em {
        margin-left: 36px;
        transform: translateY(3px) rotate(-8deg);
    }
    .proof {
        margin-top: 30px;
        gap: 18px 22px;
    }
    .proof-icon {
        width: 27px;
        height: 27px;
        min-width: 27px;
    }
    .hero-art {
        -webkit-mask-image: linear-gradient(to bottom, #000 10%, #000 47%, transparent 78%);
        mask-image: linear-gradient(to bottom, #000 10%, #000 47%, transparent 78%);
    }
}

/* ============================================================
   HERO V6 – headline a celosirkovy pas vyhod
   ============================================================ */
@media (min-width: 761px) {
    .hero-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 20px;
    }

    .hero-content {
        flex: 1 1 auto;
        width: 650px;
        max-width: 58%;
    }

    .hero h1 {
        position: relative;
        padding-bottom: 92px;
        margin-bottom: 15px;
    }

    .hero h1 em {
        position: absolute;
        top: 120px;
        left: clamp(240px, 16vw, 305px);
        margin: 0;
        transform: rotate(-9deg);
        transform-origin: left center;
        white-space: nowrap;
    }

    .hero-actions {
        margin-top: auto;
        margin-bottom: 28px;
    }

    .proof-wide {
        width: 100%;
        margin: 0;
        padding: 17px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.17);
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px;
        align-items: center;
    }

    .proof-wide .proof-item {
        justify-content: center;
        gap: 13px;
    }

    .proof-wide .proof-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .proof-wide .proof-item b {
        font-size: 14px;
    }

    .proof-wide .proof-item small {
        font-size: 12px;
    }

    .scroll-cue {
        display: none;
    }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .hero h1 em {
        top: 108px;
        left: 225px;
    }

    .proof-wide {
        gap: 8px;
    }

    .proof-wide .proof-item {
        gap: 7px;
    }

    .proof-wide .proof-item b {
        font-size: 12px;
    }
}

@media (max-width: 760px) {
    .proof-wide {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 10px;
        padding-top: 16px;
        border-top: 1px solid rgba(255,255,255,.2);
    }

    .proof-wide .proof-item {
        gap: 8px;
    }

    .proof-wide .proof-item:last-child {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   HERO V7 – vyraznejsi STAVU a vzdusnejsi pas duvery
   ============================================================ */
@media (min-width: 761px) {
    .hero,
    .hero-inner {
        min-height: 790px;
    }

    .hero-inner {
        padding-bottom: 25px;
    }

    .hero h1 em {
        font-size: 1.17em;
        top: 124px;
        left: clamp(250px, 16vw, 315px);
        transform: rotate(-9deg);
    }

    .hero-actions {
        margin-bottom: 44px;
    }

    .proof-wide {
        padding-top: 27px;
        padding-bottom: 10px;
        gap: 20px;
    }

    .proof-wide .proof-item {
        gap: 17px;
    }

    .proof-wide .proof-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .proof-wide .proof-item b {
        font-size: 15px;
        line-height: 1.5;
    }

    .proof-wide .proof-item small {
        font-size: 13px;
        line-height: 1.5;
    }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .hero h1 em {
        top: 112px;
        left: 235px;
    }

    .proof-wide {
        gap: 10px;
    }

    .proof-wide .proof-item {
        gap: 10px;
    }

    .proof-wide .proof-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .proof-wide .proof-item b {
        font-size: 12px;
    }

    .proof-wide .proof-item small {
        font-size: 11px;
    }
}

@media (max-width: 760px) {
    .hero h1 em {
        font-size: 1.12em;
    }

    .hero-actions {
        margin-bottom: 25px;
    }

    .proof-wide {
        padding-top: 24px;
        padding-bottom: 15px;
        row-gap: 22px;
    }

    .proof-wide .proof-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
}

/* ==========================================================
   01 / CO DĚLÁME — service cards (v8)
   Hero styles above are inherited unchanged from v7.
   ========================================================== */
.next-section {
    position: relative;
    padding: 82px 0 88px;
    background: #f6f9fa;
    color: #071928;
    overflow: hidden;
}
.services-layout {
    display: grid;
    grid-template-columns: minmax(290px, .83fr) minmax(0, 1.7fr);
    align-items: center;
    gap: clamp(42px, 5vw, 95px);
}
.services-intro { position: relative; padding-left: 58px; z-index: 0; }
.services-watermark {
    position: absolute;
    z-index: -1;
    left: -8px;
    top: -28px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 116px;
    line-height: 1;
    font-weight: 800;
    color: #e7ecef;
    letter-spacing: -.055em;
}
.services-intro .section-label {
    margin: 0 0 15px;
    color: #00a5b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}
.services-intro h2 {
    margin: 0 0 18px;
    font-size: clamp(28px, 2.25vw, 41px);
    line-height: 1.16;
    letter-spacing: -.045em;
    font-weight: 800;
}
.services-intro h2 span { color: #06a9b8; }
.services-description {
    max-width: 440px;
    color: #647788;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 20px;
}
.services-all {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #009daf;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;
}
.services-all:hover { color: #ff6427; }
.services-all span { font-size: 18px; }
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 165px;
    padding: 25px 43% 24px 24px;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
    color: #091d2b;
    border: 1px solid #e9eff2;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(10, 38, 54, .075);
    transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(10, 38, 54, .13); }
.service-icon { display: block; width: 30px; height: 30px; margin-bottom: 8px; color: #03b4c8; }
.service-icon svg { width: 100%; height: 100%; }
.service-copy { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; }
.service-copy strong { font-size: 15px; line-height: 1.2; font-weight: 800; }
.service-copy small { color: #6d7f8d; font-size: 11px; line-height: 1.55; }
.service-arrow { margin-top: 11px; color: #00aebe; font-size: 22px; line-height: 1; }
.service-card img {
    position: absolute;
    z-index: 1;
    right: -21px;
    bottom: -15px;
    height: 156px;
    width: 47%;
    object-fit: contain;
    object-position: right bottom;
    filter: drop-shadow(-9px 8px 9px rgba(9, 27, 37, .15));
    transition: transform .25s ease;
}
.service-card:hover img { transform: translateY(-5px) rotate(-2deg); }
@media (max-width: 1150px) {
    .services-layout { grid-template-columns: 1fr; gap: 35px; }
    .services-intro { padding-left: 70px; }
    .services-grid { gap: 16px; }
    .service-card { min-height: 165px; }
}
@media (max-width: 680px) {
    .next-section { padding: 65px 0 72px; }
    .services-intro { padding-left: 48px; }
    .services-watermark { font-size: 85px; left: -5px; top: -16px; }
    .services-intro h2 { font-size: clamp(26px, 6.5vw, 36px); }
    .services-grid { grid-template-columns: 1fr; gap: 13px; }
    .service-card { min-height: 155px; padding: 21px 44% 20px 20px; }
    .service-card img { height: 145px; }
}

/* ==========================================================
   01 / CO DĚLÁME — typografie a vizuální sjednocení (v9)
   Hero a ostatní sekce zůstávají beze změny.
   ========================================================== */
.services-watermark {
    color: rgba(0, 175, 195, 0.20);
    font-size: 124px;
    top: -30px;
}

.services-intro h2 {
    font-weight: 750;
    letter-spacing: -0.038em;
}

.services-description {
    color: #536b7b;
    font-size: 16px;
    line-height: 1.72;
}

.service-card {
    min-height: 186px;
    padding: 23px 44% 24px 25px;
    border: 1px solid #e6eff1;
    border-radius: 11px;
    box-shadow: 0 10px 30px rgba(7, 30, 44, 0.075);
    background: linear-gradient(130deg, #fff 55%, #f6fbfc 100%);
}

.service-card::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    top: 23px;
    bottom: 23px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #08b7c9;
    opacity: 0;
    transition: opacity .2s ease;
}

.service-card:hover::before {
    opacity: 1;
}

.service-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    margin: 0 0 12px;
    border: 1px solid rgba(0, 177, 198, .18);
    border-radius: 12px;
    background: #e9f9fb;
    color: #00aabd;
}

.service-icon::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff6427;
    border: 2px solid #fff;
}

.service-icon svg {
    width: 25px;
    height: 25px;
    stroke-width: 1.9;
}

.service-copy {
    gap: 9px;
}

.service-copy strong {
    font-size: 17px;
}

.service-copy small {
    color: #586e7d;
    font-size: 13px;
    line-height: 1.6;
}

.service-arrow {
    margin-top: 12px;
    font-size: 24px;
}

.service-card img {
    height: 165px;
    right: -18px;
    bottom: -15px;
    opacity: .96;
}

@media (max-width: 680px) {
    .services-watermark {
        font-size: 90px;
        top: -17px;
    }

    .service-card {
        min-height: 177px;
        padding: 20px 45% 20px 20px;
    }

    .service-copy small {
        font-size: 12px;
    }

    .service-card img {
        height: 148px;
    }
}

/* =============================================================
   01 / CO DĚLÁME — fotorealistické vizuály zařízení (v10)
   Všechny ikony s oranžovou tečkou zůstávají beze změny.
   ============================================================= */
.service-card {
    background: #ffffff;
}

.service-card img {
    position: absolute;
    z-index: 1;
    width: 53%;
    height: 100%;
    right: 0;
    bottom: 0;
    object-fit: cover;
    object-position: center center;
    opacity: 1;
    filter: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 23%);
    mask-image: linear-gradient(to right, transparent 0%, black 23%);
    transition: transform .3s ease;
}

.service-card:hover img {
    transform: scale(1.045);
}

.service-copy,
.service-icon,
.service-arrow {
    position: relative;
    z-index: 2;
}

@media (max-width: 680px) {
    .service-card img {
        width: 55%;
        height: 100%;
    }
}

/* 02 — Reference: isolated from hero and services */
.references {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 88% 100%, #15232b 0%, transparent 48%),
                linear-gradient(135deg, #031b27 0%, #00131d 72%);
    color: #fff;
    padding: 78px 0 64px;
}
.references-layout {
    display: grid;
    grid-template-columns: minmax(255px, 0.29fr) minmax(0, 0.71fr);
    gap: clamp(30px, 4vw, 68px);
    align-items: start;
}
.references-intro { position: relative; min-width: 0; z-index: 1; }
.references-watermark {
    position: absolute;
    top: -66px;
    left: -12px;
    font: 900 116px/1 'Barlow Condensed', sans-serif;
    color: rgba(156, 217, 225, 0.09);
    pointer-events: none;
}
.references .section-label { position: relative; margin: 10px 0 24px; color: #08c3d7; letter-spacing: 0.15em; }
.references-intro h2 { position: relative; font-size: clamp(30px, 3vw, 46px); line-height: 1.09; letter-spacing: -0.04em; margin: 0 0 22px; }
.references-intro h2 span { color: #09b9c9; }
.references-intro > p:not(.section-label) { max-width: 320px; color: #b7d4df; font-size: 15px; line-height: 1.8; margin: 0 0 24px; }
.references-mascot {
    width: calc(100% + 36px);
    max-width: 380px;
    aspect-ratio: 1.72;
    margin: 24px 0 -44px -24px;
    background: url('../images/reference-hero.webp') no-repeat left 46%;
    background-size: 190% auto;
    -webkit-mask-image: linear-gradient(to right, #000 72%, transparent 100%);
    mask-image: linear-gradient(to right, #000 72%, transparent 100%);
}
.references-main { min-width: 0; padding-top: 2px; }
.references-viewport { overflow: hidden; outline-offset: 5px; }
.references-track { display: flex; gap: 15px; transition: transform .42s cubic-bezier(.2,.75,.2,1); will-change: transform; }
.reference-card { flex: 0 0 calc((100% - 30px) / 3); min-width: 0; border: 1px solid #204557; border-radius: 10px; overflow: hidden; background: rgba(2, 34, 47, .84); }
.reference-image { display: block; height: clamp(125px, 11.5vw, 186px); overflow: hidden; background: #142631; }
.reference-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .4s ease; }
.reference-card:hover .reference-image img { transform: scale(1.035); }
.reference-info { padding: 17px 17px 20px; }
.reference-type { color: #11c7dc; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.reference-info h3 { font-size: 20px; margin: 8px 0 9px; line-height: 1.15; letter-spacing: -.025em; }
.reference-info p { color: #b3d2de; font-size: 12px; line-height: 1.65; min-height: 60px; margin: 0 0 16px; }
.reference-info a { color: #12cbe0; font-size: 10px; font-weight: 800; text-decoration: none; }
.reference-info a:hover { color: #fff; }
.reference-info a span { margin-left: 8px; }
.references-controls { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 21px; }
.references-progress { display: flex; align-items: center; gap: 8px; flex: 1; }
.references-progress button { height: 4px; flex: 1; border: 0; border-radius: 8px; background: #254958; cursor: pointer; padding: 0; transition: background .2s; }
.references-progress button[aria-current='true'] { background: #08c5d9; }
.references-arrows { display: flex; gap: 9px; }
.references-arrows button { width: 38px; height: 38px; border: 1px solid #376173; border-radius: 50%; background: transparent; color: #fff; font-size: 21px; cursor: pointer; }
.references-arrows button:hover:not(:disabled) { border-color: #09c4d9; color: #09c4d9; }
.references-arrows button:disabled { opacity: .35; cursor: default; }
@media (min-width: 1450px) { .references { padding-top: 88px; } }
@media (max-width: 1050px) {
    .references-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 25px; }
    .reference-card { flex-basis: calc((100% - 15px) / 2); }
}
@media (max-width: 720px) {
    .references { padding: 60px 0 46px; }
    .references-layout { display: block; }
    .references-intro { padding-bottom: 16px; }
    .references-intro h2 { font-size: 36px; }
    .references-mascot { max-width: 310px; margin-bottom: 2px; }
    .reference-card { flex-basis: min(82%, 315px); }
    .reference-image { height: 175px; }
    .references-controls { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .references-track, .reference-image img { transition: none; } }

/* v14 — References: corner mascot and compact segmented navigation */
.references {
    isolation: isolate;
    padding-bottom: 0;
}

/* The artwork belongs to the section, not to the text column.
   Its right and upper edges dissolve into the section background. */
.references::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: max(0px, calc((100% - 1460px) / 2 - 50px));
    bottom: 0;
    width: clamp(490px, 43vw, 740px);
    height: clamp(245px, 22vw, 365px);
    background-image: url("../images/reference-hero.webp");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, #000 58%, transparent 100%),
                        linear-gradient(to top, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, #000 58%, transparent 100%);
}

.references-layout {
    position: relative;
    z-index: 1;
    min-height: 555px;
}

.references-intro {
    padding-bottom: 255px;
}

.references-mascot {
    display: none;
}

.references-controls {
    margin-top: 25px;
}

.references-progress {
    justify-content: center;
    flex: 1;
    gap: 7px;
}

.references-progress::before,
.references-progress::after {
    content: "";
    height: 1px;
    background: rgba(66, 133, 154, .55);
    flex: 1 1 0;
}

.references-progress button {
    flex: 0 0 23px;
    height: 3px;
    border-radius: 2px;
    background: #315362;
}

.references-progress button[aria-current="true"] {
    background: #08c5d9;
}

.references-progress button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 5px;
}

@media (max-width: 1050px) {
    .references::before {
        width: 560px;
        height: 280px;
    }
}

@media (max-width: 720px) {
    .references {
        padding-bottom: 0;
    }
    .references-layout {
        min-height: 0;
        padding-bottom: 230px;
    }
    .references-intro {
        padding-bottom: 25px;
    }
    .references::before {
        width: 510px;
        height: 255px;
        left: -30px;
    }
    .references-progress button {
        flex-basis: 17px;
    }
}

/* v15 — Reference refinements: subtle outlines, four cards, soft corner art */
.references::before {
    /* Fade on three sides: left, top, and right. Keep bottom anchored. */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 13%, #000 62%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 28%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, #000 13%, #000 62%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 28%, #000 100%);
    mask-composite: intersect;
}
.reference-card {
    border-color: rgba(66, 108, 126, .28);
    background: rgba(2, 31, 43, .87);
}
.reference-card:hover { border-color: rgba(55, 125, 143, .5); }
.references-progress::before,
.references-progress::after { background: rgba(56, 105, 122, .27); }
.references-progress button { background: #28434f; }
.references-progress button[aria-current="true"] { background: #079bb0; }
.references-arrows button { border-color: rgba(68, 116, 134, .48); }
@media (min-width: 1450px) {
    .references-layout { grid-template-columns: 360px minmax(0, 1fr); gap: 32px; }
    .reference-card { flex-basis: calc((100% - 45px) / 4); }
    .reference-info { padding: 15px 13px 18px; }
    .reference-info h3 { font-size: 18px; }
    .reference-info p { font-size: 12px; }
    .reference-image { height: clamp(125px, 10vw, 175px); }
}

/* v16 — Mr. Volcano anchored to the left edge of a max-2000px stage.
   Content columns, reference cards and navigation remain unchanged. */
@media (min-width: 721px) {
    .references::before {
        /* Viewports up to 2000px: flush left; ultrawide: centered 2000px stage. */
        left: max(0px, calc((100% - 2000px) / 2));
        width: clamp(490px, 39vw, 740px);
        /* Keep the mascot on the floor and below the text / CTA. */
        height: clamp(245px, 22vw, 365px);
        bottom: 0;
        background-position: left top;
    }
}

/* On narrow screens keep the established mobile layout and fade. */

/* 03 — Pricing / navazuje na světlou sekci služeb */
.pricing {
    position: relative;
    overflow: hidden;
    padding: 100px 0 78px;
    background: #f5f9fa;
    color: #061b2a;
}
.pricing-layout {
    display: grid;
    grid-template-columns: minmax(250px, .30fr) minmax(0, .70fr);
    gap: clamp(28px, 3.8vw, 65px);
    align-items: center;
}
.pricing-intro { position: relative; z-index: 0; }
.pricing-number {
    position: absolute;
    z-index: -1;
    top: -66px;
    left: -18px;
    color: #e4ebed;
    font-size: 112px;
    font-weight: 900;
    line-height: 1;
}
.pricing .section-label { color: #009eb4; font-weight: 800; letter-spacing: .12em; font-size: 11px; }
.pricing-intro h2 { font-size: clamp(29px, 2.6vw, 42px); line-height: 1.16; letter-spacing: -.045em; margin: 18px 0 22px; }
.pricing-intro h2 span { color: #00a9ba; }
.pricing-intro > p:not(.section-label) { color: #657887; line-height: 1.8; font-size: 14px; max-width: 370px; }
.pricing-intro-link { display: inline-flex; gap: 20px; margin-top: 18px; color: #009db2; font-weight: 800; font-size: 11px; letter-spacing: .03em; }
.pricing-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pricing-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 385px;
    padding: 25px 23px 24px;
    border: 1px solid #e1ebee;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(3, 32, 47, .055);
}
.pricing-card-featured { border: 1.5px solid #04b6cd; box-shadow: 0 12px 35px rgba(0, 155, 178, .10); }
.pricing-card-top { display: flex; justify-content: space-between; align-items: center; gap: 5px; color: #92a3ae; font-size: 10px; font-weight: 800; }
.pricing-card-top > span:last-child:not(.pricing-popular) { color: #00a7bc; font-size: 19px; }
.pricing-popular { padding: 7px 8px; border-radius: 4px; background: #062435; color: #21d5e9; font-size: 9px; white-space: nowrap; }
.pricing-card h3 { margin: 26px 0 10px; font-size: 19px; letter-spacing: -.03em; }
.pricing-price { margin: 0; color: #00a5b9; font-size: clamp(22px, 1.7vw, 28px); font-weight: 850; white-space: nowrap; }
.pricing-price small { font-size: 12px; color: #8a9ba5; font-weight: 500; }
.pricing-description { color: #667d89; line-height: 1.55; font-size: 12px; margin: 14px 0 16px; }
.pricing-card ul { padding: 0; margin: 0 0 25px; list-style: none; }
.pricing-card li { position: relative; padding-left: 19px; color: #5e7180; line-height: 1.65; font-size: 12px; }
.pricing-card li::before { content: '✓'; position: absolute; left: 0; color: #00b1c6; font-weight: 900; }
.pricing-card > a { margin-top: auto; color: #009bb0; font-weight: 800; font-size: 10px; letter-spacing: .025em; }
.pricing-card > a span { margin-left: 8px; }
.pricing-note { margin-top: 22px; text-align: right; color: #81939d; font-size: 11px; }
@media (max-width: 1150px) {
    .pricing-layout { grid-template-columns: 1fr; gap: 30px; }
    .pricing-intro > p:not(.section-label) { max-width: 650px; }
    .pricing-card { min-height: 365px; }
}
@media (max-width: 700px) {
    .pricing { padding: 75px 0 60px; }
    .pricing-cards { grid-template-columns: 1fr; }
    .pricing-card { min-height: 0; padding: 25px; }
    .pricing-note { text-align: left; }
}

/* v18 — ceník blíže grafickému návrhu */
.pricing { padding-block: 94px 90px; }
.pricing-layout { grid-template-columns: minmax(270px, .29fr) minmax(0, .71fr); align-items: center; }
.pricing-card { min-height: 350px; padding: 24px 22px 23px; }
.pricing-card h3 { margin: 21px 0 9px; }
.pricing-description { margin: 10px 0 14px; }
.pricing-card ul { margin-bottom: 20px; }
.pricing-card { position: relative; overflow: hidden; }
.pricing-card::after { content: ''; position: absolute; width: 125px; height: 85px; right: -32px; bottom: 18px; background: url('../images/service-web.webp') center / contain no-repeat; opacity: .15; pointer-events: none; }
.pricing-card:nth-child(2)::after { background-image: url('../images/service-analytics.webp'); }
.pricing-card:nth-child(3)::after { background-image: url('../images/service-shop.webp'); }
.pricing-card > * { position: relative; z-index: 1; }
/* v18 — 04 FAQ, tmavá sekce s maskotem vpravo */
.faq-section { position: relative; isolation: isolate; overflow: hidden; background: #031823; color: #fff; padding: 78px 0 82px; }
.faq-section::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 90% 75%, rgba(190, 56, 18, .15), transparent 38%), linear-gradient(130deg,#031723,#00131c 70%); }
.faq-layout { display: grid; grid-template-columns: minmax(230px, .26fr) minmax(0, .74fr); gap: clamp(30px, 4vw, 72px); position: relative; z-index: 2; }
.faq-intro { position: relative; }
.faq-watermark { position: absolute; top: -54px; left: -18px; font-size: 110px; font-weight: 900; line-height: 1; color: rgba(164,210,222,.10); pointer-events: none; }
.faq-section .section-label { color: #11c5dc; font-size: 11px; font-weight: 800; letter-spacing: .13em; position: relative; }
.faq-intro h2 { font-size: clamp(31px,2.8vw,45px); line-height: 1.12; letter-spacing: -.035em; margin: 20px 0 18px; }
.faq-intro h2 span { color: #04b9ce; }
.faq-intro > p:not(.section-label) { color: #b5d0dc; font-size: 14px; line-height: 1.75; max-width: 290px; }
.faq-contact { display: inline-flex; gap: 18px; margin-top: 18px; color: #1ed2e7; font-size: 11px; font-weight: 800; }
.faq-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(18px,2.2vw,42px); padding-right: clamp(0px,14vw,235px); }
.faq-item { border-bottom: 1px solid rgba(111,164,183,.19); }
.faq-item summary { display: grid; grid-template-columns: 24px minmax(0,1fr) 17px; gap: 11px; align-items: center; padding: 12px 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; line-height: 1.5; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-index { color: #08c3d9; font-weight: 800; font-size: 12px; }
.faq-toggle { color: #0ec6d9; text-align: right; }
.faq-toggle::after { content: '+'; font-size: 17px; font-weight: 400; }
.faq-item[open] .faq-toggle::after { content: '−'; }
.faq-answer { padding: 0 14px 15px 35px; color: #aac6d1; font-size: 14px; line-height: 1.75; }
.faq-volcano { position: absolute; right: max(0px,calc((100% - 2000px)/2)); bottom: 0; width: clamp(210px,19vw,360px); height: 100%; z-index: 1; background: linear-gradient(90deg,#031823 0%,transparent 35%),linear-gradient(0deg,transparent 65%,#031823 100%),url('../images/reference-hero.webp') 32% bottom / auto 100% no-repeat; opacity: .78; mask-image: linear-gradient(90deg,transparent 0%,black 28%); pointer-events: none; }
@media (max-width: 1150px) { .faq-columns { padding-right: 0; } .faq-volcano { opacity: .19; } }
@media (max-width: 850px) { .faq-layout { grid-template-columns: 1fr; gap: 25px; } .faq-intro > p:not(.section-label) { max-width: 600px; } .faq-section { padding: 75px 0; } }
@media (max-width: 620px) { .faq-columns { grid-template-columns: 1fr; gap: 0; } .faq-volcano { opacity: .1; } .faq-item summary { font-size: 14px; } }

/* v19 – Mr. Volcano nad kartou Nejčastější volba */
.pricing-card-featured {
    overflow: visible;
    isolation: isolate;
}
.pricing-volcano {
    position: absolute;
    z-index: 3;
    width: clamp(115px, 10vw, 170px);
    height: auto;
    right: 2px;
    top: -102px;
    pointer-events: none;
    filter: drop-shadow(0 7px 10px rgba(7, 29, 38, .12));
}
.pricing-card-featured .pricing-card-top {
    position: relative;
    z-index: 4;
}
@media (max-width: 1150px) {
    .pricing-volcano { top: -83px; width: 130px; }
}
@media (max-width: 700px) {
    .pricing-card-featured { margin-top: 82px; }
    .pricing-volcano { width: 130px; top: -91px; right: 10px; }
}

/* v20 — ceník: větší rozestupy, zaoblené karty a přesné usazení maskota */
.pricing {
    padding-top: 116px;
    padding-bottom: 96px;
}
.pricing-layout {
    grid-template-columns: minmax(270px, .28fr) minmax(0, .72fr);
    gap: clamp(30px, 3.5vw, 65px);
}
.pricing-cards {
    gap: clamp(20px, 1.5vw, 30px);
    align-items: stretch;
}
.pricing-card {
    min-height: 420px;
    padding: 28px 23px 27px;
    border-radius: 17px;
    overflow: hidden;
}
.pricing-card::after {
    width: 110px;
    height: 88px;
    right: 0;
    bottom: 15px;
    opacity: .12;
    background-size: contain;
    background-position: right bottom;
}
.pricing-card-featured {
    overflow: visible;
}
.pricing-card-featured::after {
    border-radius: 0 0 16px 0;
}
.pricing-card h3 { margin-top: 25px; }
.pricing-card ul { margin-bottom: 28px; }
.pricing-card li { line-height: 1.85; }
.pricing-volcano {
    width: clamp(125px, 9.5vw, 166px);
    top: -102px;
    right: 7px;
    z-index: 5;
}
.pricing-popular { border-radius: 6px; }
@media (max-width: 1150px) {
    .pricing-layout { grid-template-columns: 1fr; }
    .pricing { padding-top: 110px; }
    .pricing-volcano { width: 145px; top: -95px; }
}
@media (max-width: 700px) {
    .pricing { padding-top: 75px; }
    .pricing-cards { gap: 26px; }
    .pricing-card { min-height: 0; padding: 27px 24px; }
    .pricing-card-featured { margin-top: 85px; }
    .pricing-volcano { width: 140px; top: -94px; right: 10px; }
}

/* v21 — Mr. Volcano opřený o kartu, prstem ukazuje na badge */
.pricing-card-featured { position: relative; }
.pricing-card-featured .pricing-volcano {
    width: clamp(145px, 10vw, 178px);
    top: -61px;
    right: 0;
    z-index: 3;
    filter: drop-shadow(0 5px 8px rgba(4, 32, 43, .12));
}
.pricing-card-featured .pricing-card-top { position: relative; z-index: 5; }
.pricing-popular {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #e5f8fc;
    color: #008fa7;
    border: 1px solid #b6e9f1;
    font-weight: 850;
    position: relative;
    z-index: 6;
}
.pricing-popular svg { flex: none; color: #ff6629; }
@media (max-width: 1150px) {
    .pricing-card-featured .pricing-volcano { width: 158px; top: -59px; right: 0; }
}
@media (max-width: 700px) {
    .pricing-card-featured .pricing-volcano { width: 150px; top: -57px; right: 0; }
}

/* v22 — finální pozice Volcana, jemnější badge a větší produktové vizuály */
.pricing-card-featured .pricing-volcano {
    width: clamp(145px, 10vw, 178px);
    top: -90px;
    right: 50px;
    z-index: 3;
    filter: drop-shadow(0 5px 8px rgba(4, 32, 43, .12));
}
.pricing-popular {
    border: 2px solid #a7e4ed;
    border-radius: 13px;
    padding: 7px 10px;
    background: #e5f8fc;
}
.pricing-card::after {
    width: 145px;
    height: 115px;
    right: 0;
    bottom: 12px;
    opacity: .15;
    background-size: contain;
    background-position: right bottom;
    border-radius: 0 0 17px 0;
}
@media (max-width: 700px) {
    .pricing-card-featured .pricing-volcano {
        width: 150px;
        top: -76px;
        right: 28px;
    }
}

/* v23 — FAQ: Mr. Volcano s telefonem a hrnkem */
.faq-volcano {
  right: max(0px, calc((100% - 2000px)/2));
  bottom: 0;
  width: clamp(290px, 28vw, 540px);
  height: 100%;
  opacity: 1;
  background: url('../images/faqs-hero.webp') 84% center / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 100%);
}
@media (max-width: 1150px) { .faq-volcano { opacity: .22; } }
@media (max-width: 620px) { .faq-volcano { opacity: .10; } }

/* v26 — kontakt a patička */
.contact-section{position:relative;overflow:hidden;background:radial-gradient(ellipse at 90% 10%,#103344 0%,transparent 46%),#031823;color:#fff;padding:112px 0 116px}
.contact-layout{display:grid;grid-template-columns:minmax(280px,.88fr) minmax(0,1.45fr);gap:clamp(48px,7vw,135px);align-items:center}
.contact-intro{position:relative;isolation:isolate}.contact-watermark{position:absolute;z-index:-1;top:-74px;left:-14px;font-size:118px;font-weight:900;line-height:1;color:#163442;opacity:.8}
.contact-intro h2{font-size:clamp(36px,3vw,55px);line-height:1.12;letter-spacing:-.055em;margin:22px 0 26px;color:white}.contact-intro h2 span{color:#09b8ca}.contact-intro>p:not(.section-label){max-width:390px;color:#b5d3dd;font-size:16px;line-height:1.85}
.contact-options{min-width:0}.contact-book-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:15px;border:0;border-radius:8px;padding:19px 21px;background:#05b5c9;color:white;font-size:12px;font-weight:850;cursor:pointer;letter-spacing:.02em}.contact-book-btn:hover{background:#04a3b6}.contact-book-btn span{font-size:20px}.contact-booking{margin-top:18px;border-top:1px solid #315b69;padding-top:18px}.contact-booking p{color:#b5d3dd;font-size:13px;line-height:1.7}
.contact-direct{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:17px}.contact-direct-card{min-width:0;display:flex;gap:17px;align-items:flex-start;text-decoration:none;color:#fff;border:1px solid #234653;background:#09232f;border-radius:15px;padding:23px 22px}.contact-direct-card>span:last-child{min-width:0}.contact-direct-icon{color:#1cc4d4;font-size:28px;line-height:1}.contact-direct-card strong{display:block;font-size:16px}.contact-direct-card small{display:block;color:#a6c6d0;font-size:12px;line-height:1.6;margin:8px 0 16px}.contact-direct-card b{display:block;color:#27cfe0;font-size:12px;overflow-wrap:anywhere}.contact-direct-card:hover{border-color:#1e91a3}.contact-phone-card{cursor:default}.contact-phone-card b{color:#91b3c0}
.site-footer{background:#02131c;color:#9bbac5;border-top:1px solid #183844;padding:30px 0}.footer-inner{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.footer-brand{text-decoration:none;color:#fff;font-size:20px;white-space:nowrap}.footer-brand span{border:2px solid #05b5c9;padding:1px 5px;font-weight:900}.footer-inner p{font-size:12px;margin:0 auto 0 0}.footer-inner>div{display:flex;gap:18px;flex-wrap:wrap}.footer-inner>div a{color:#a9c8d3;text-decoration:none;font-size:12px}.footer-inner>div a:hover{color:#26d4e3}.footer-inner small{font-size:11px}
@media(max-width:1000px){.contact-layout{grid-template-columns:1fr;gap:45px}.contact-section{padding:90px 0}.contact-intro>p:not(.section-label){max-width:650px}}@media(max-width:620px){.contact-section{padding:75px 0}.contact-direct{grid-template-columns:1fr}.contact-watermark{font-size:95px;top:-55px}.footer-inner{align-items:flex-start;flex-direction:column}.footer-inner p{margin:0}}

/* v27 — přepracovaný kontakt: jemná vulkanická atmosféra, bez výrazné lávy */
.contact-section{isolation:isolate;padding:115px 0 125px;background:radial-gradient(ellipse 45% 45% at -8% 98%,rgba(207,67,29,.14),transparent 75%),radial-gradient(ellipse 40% 48% at 105% 97%,rgba(217,64,27,.12),transparent 75%),radial-gradient(ellipse at 60% 0%,#07303b 0%,#031c27 48%,#03141e 100%)}
.contact-section::before{content:"";position:absolute;inset:auto 0 0;height:95px;pointer-events:none;z-index:-1;opacity:.55;background:radial-gradient(ellipse 20% 24% at 3% 100%,rgba(255,95,42,.23),transparent),radial-gradient(ellipse 19% 30% at 98% 100%,rgba(255,95,42,.18),transparent);filter:blur(18px)}
.contact-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:clamp(45px,5.5vw,110px);align-items:center}
.contact-watermark{top:-78px;left:-12px;color:#193b48;opacity:.67}
.contact-intro h2{font-size:clamp(38px,3.35vw,65px);line-height:1.08;max-width:680px;margin:24px 0 26px}
.contact-intro h2 span{color:#ff5a2a}
.contact-intro>p:not(.section-label){max-width:620px;font-size:16px;line-height:1.85;color:#c3dce5}
.contact-book-btn{justify-content:center;position:relative;background:#05b8ca;border-radius:10px;min-height:65px;font-size:13px}
.contact-book-btn span{position:absolute;right:22px}.contact-book-btn:hover{background:#00a7ba}
.contact-direct{gap:16px;margin-top:15px}
.contact-direct-card{border-color:#315c6b;background:rgba(5,34,47,.8);border-radius:16px;padding:24px 22px;gap:17px;min-height:155px}
.contact-direct-icon{flex:none;display:grid;place-items:center;width:53px;height:53px;border:1px solid #255967;background:#0c3b4b;border-radius:12px;font-size:26px}
.contact-direct-card strong{font-size:16px}.contact-direct-card small{font-size:13px;margin:8px 0 12px}
.contact-direct-card b{font-size:13px}
@media(max-width:1000px){.contact-layout{grid-template-columns:1fr;gap:46px}}
@media(max-width:620px){.contact-section{padding:85px 0 90px}.contact-intro h2{font-size:clamp(35px,9vw,47px)}.contact-direct{grid-template-columns:1fr}.contact-direct-card{min-height:0}}

/* v28 — skutečná vulkanická textura místo plošných oranžových září */
.contact-section { background: radial-gradient(ellipse at 60% 0%,#07303b 0%,#031c27 48%,#03141e 100%); isolation:isolate; }
.contact-section::before { content:""; position:absolute; inset:auto 0 0 auto; width:min(58vw,1050px); height:100%; z-index:-1; pointer-events:none; opacity:.29; filter:saturate(.8); background:url("../images/contact-lava-strip.webp") right bottom / cover no-repeat; -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 60%),linear-gradient(to top,#000 0%,transparent 92%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0%,#000 60%),linear-gradient(to top,#000 0%,transparent 92%); mask-composite:intersect; }
@media(max-width:1000px){.contact-section::before{opacity:.17;width:85vw}}
@media(max-width:620px){.contact-section::before{opacity:.13;width:100vw}}

/* v29: Kontakt bez lávy a bez světelných září */
.contact-section { background:#031823; }
.contact-section::before, .contact-section::after { content:none; display:none; background:none; }

/* v30 — jednotná typografie nadpisů sekcí 01–05 */
.services-intro h2,
.references-intro h2,
.pricing-intro h2,
.faq-intro h2,
.contact-intro h2 {
  font-size: clamp(34px, 2.65vw, 46px);
  line-height: 1.12;
  letter-spacing: -.04em;
}
@media (max-width: 620px) {
  .services-intro h2,
  .references-intro h2,
  .pricing-intro h2,
  .faq-intro h2,
  .contact-intro h2 {
    font-size: clamp(31px, 8vw, 38px);
    line-height: 1.14;
  }
}

/* v31: shared alignment and Bootstrap Icons */
@media (min-width: 1031px) {
  .services-intro { padding-left: 0; }
  .services-watermark { left: -8px; }
}
.proof-icon.bi { display:inline-flex; align-items:center; justify-content:center; font-size: 27px; line-height:1; }
.service-icon .bi { display:inline-block; font-size:25px; line-height:1; }
.pricing-popular .bi { font-size:15px; vertical-align:-1px; margin-right:4px; }
.contact-direct-icon .bi { font-size:23px; line-height:1; }

/* v32 – subtle full-width lava terrain at the bottom of contact */
.contact-section { background:#031823; isolation:isolate; }
.contact-section::before { content:""; display:block; position:absolute; left:0; right:0; bottom:0; top:auto; width:100%; height:clamp(95px, 12vw, 180px); background:url("../images/contact-lava-strip.webp") center bottom / cover no-repeat; opacity:.38; pointer-events:none; z-index:-1; filter:saturate(.75); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.22) 35%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.22) 35%,#000 100%); }
.contact-section::after { content:none; display:none; }
@media(max-width:620px){.contact-section::before{height:95px;opacity:.26}}

/* v33: pricing arrows point right; all price CTAs jump to contact */
html { scroll-behavior: smooth; }
#kontakt { scroll-margin-top: 24px; }

/* v34 — čtyři samostatné služby */
.service-page{background:#f5f9fa;color:#051d2a}.service-hero{background:#041c27;color:#fff;position:relative;overflow:hidden;padding:115px 0 105px}.service-hero::after{content:"";position:absolute;right:-12%;bottom:-60%;width:65%;height:115%;background:radial-gradient(ellipse,rgba(0,174,192,.09),transparent 70%);pointer-events:none}.service-hero-grid{display:grid;grid-template-columns:1fr .88fr;gap:clamp(45px,7vw,120px);align-items:center}.service-kicker{color:#11c7d8;font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.service-hero h1{font-size:clamp(43px,4.3vw,75px);letter-spacing:-.055em;line-height:1.07;margin:22px 0 25px}.service-hero h1 span{color:#0db8ca}.service-hero p.service-lead{font-size:17px;line-height:1.85;color:#b7d3dd;max-width:580px;margin-bottom:34px}.service-hero-actions{display:flex;gap:14px;flex-wrap:wrap}.service-crumb{display:inline-flex;align-items:center;gap:10px;color:#8fbac6;text-decoration:none;font-size:13px}.service-crumb:hover{color:#fff}.service-block{padding:100px 0}.service-block.alt{background:#eaf3f5}.service-heading{max-width:730px;margin-bottom:43px}.service-heading .section-label{color:#009db2}.service-heading h2{font-size:clamp(32px,2.65vw,46px);letter-spacing:-.045em;line-height:1.15;margin:15px 0;color:#041c29}.service-heading h2 span{color:#009fb1}.service-heading p{font-size:16px;line-height:1.8;color:#537281}.service-benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-benefit{background:white;border:1px solid #dce9ed;border-radius:18px;padding:32px;box-shadow:0 12px 35px #09293709}.service-benefit i{font-size:30px;color:#00a8bc;display:inline-flex;margin-bottom:25px}.service-benefit h3{font-size:20px;letter-spacing:-.03em;margin:0 0 12px}.service-benefit p{color:#577482;line-height:1.8;font-size:14px;margin:0}.service-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}.service-step{border-top:2px solid #0eb4c7;padding:23px 10px 0 0}.service-step span{font-size:13px;font-weight:800;color:#00a5b9}.service-step p{font-size:15px;color:#355768;line-height:1.75}.service-showcase{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.service-showcase img{width:100%;border-radius:17px;box-shadow:0 20px 50px #041c2922}.service-showcase h2{font-size:clamp(32px,2.65vw,46px);letter-spacing:-.04em;margin:14px 0}.service-showcase p{color:#55717e;line-height:1.8}.service-link{color:#008fa3;text-decoration:none;font-size:13px;font-weight:850}.service-faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:90px}.service-faq details{border-bottom:1px solid #d3e4e9;padding:20px 0}.service-faq summary{cursor:pointer;font-weight:750;list-style:none;display:flex;justify-content:space-between;gap:20px}.service-faq summary::after{content:'+';font-size:22px;color:#00a6b9}.service-faq details[open] summary::after{content:'−'}.service-faq details p{color:#587684;line-height:1.8;margin:13px 25px 0 0;font-size:14px}.service-page .site-footer{margin:0}.service-page .site-header{background:#031823}.service-page .site-header .brand{color:#fff}.service-page .site-header .desktop-nav a{color:#fff}
@media(max-width:900px){.service-hero-grid,.service-showcase,.service-faq{grid-template-columns:1fr;gap:40px}.service-hero{padding:90px 0 65px}.service-benefit-grid{grid-template-columns:1fr 1fr}.service-steps{grid-template-columns:1fr 1fr}.service-block{padding:70px 0}}@media(max-width:600px){.service-benefit-grid,.service-steps{grid-template-columns:1fr}.service-hero h1{font-size:42px}.service-hero-actions .btn{width:100%;text-align:center}.service-block{padding:58px 0}}

/* WebLogico – four bespoke Mr. Volcano service heroes */
.service-hero-volcano{isolation:isolate;min-height:535px;padding:88px 0 80px;background:#031722;display:flex;align-items:center}
.service-hero-volcano::after{display:none}
.service-hero-volcano .service-hero-bg{position:absolute;inset:0;z-index:-2;background-repeat:no-repeat;background-position:center right;background-size:cover}
.service-hero-volcano::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#031722 0%,#031722 20%,rgba(3,23,34,.96) 32%,rgba(3,23,34,.78) 45%,rgba(3,23,34,.20) 72%,rgba(3,23,34,.06) 100%),linear-gradient(0deg,rgba(3,23,34,.35),transparent 28%)}
.service-hero-weby .service-hero-bg{background-image:url('../images/hero-weby.webp')}
.service-hero-eshopy .service-hero-bg{background-image:url('../images/hero-eshopy.webp')}
.service-hero-aplikace .service-hero-bg{background-image:url('../images/hero-aplikace.webp')}
.service-hero-podpora-prodeje .service-hero-bg{background-image:url('../images/hero-podpora-prodeje.webp')}
.service-hero-volcano .service-hero-grid{display:block;position:relative;z-index:1}
.service-hero-volcano .service-hero-grid>div:first-child{max-width:570px}
.service-hero-volcano .service-kicker{margin-top:27px!important}
.service-hero-volcano h1{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.99;font-size:clamp(50px,5vw,78px);margin:19px 0 22px;max-width:650px}
.service-hero-volcano h1 span{color:#05b8ca}
.service-hero-volcano .service-lead{font-size:16px;line-height:1.65;max-width:530px;margin-bottom:28px}
@media(max-width:850px){.service-hero-volcano{min-height:550px;padding:65px 0 70px}.service-hero-volcano .service-hero-bg{background-position:65% center}.service-hero-volcano::before{background:linear-gradient(90deg,#031722 0%,rgba(3,23,34,.96) 36%,rgba(3,23,34,.66) 100%)}.service-hero-volcano .service-hero-grid>div:first-child{max-width:540px}}
@media(max-width:575px){.service-hero-volcano{min-height:610px;padding:50px 0 55px;align-items:flex-start}.service-hero-volcano .service-hero-bg{background-position:67% bottom;background-size:auto 65%;opacity:.8}.service-hero-volcano::before{background:linear-gradient(180deg,#031722 0%,#031722 27%,rgba(3,23,34,.92) 52%,rgba(3,23,34,.18) 100%)}.service-hero-volcano h1{font-size:clamp(43px,12vw,60px)}.service-hero-volcano .service-lead{font-size:15px}.service-hero-volcano .service-hero-actions{gap:10px}}

/* v2: same header + typography language as homepage */
.service-page .site-header{position:absolute;top:0;left:0;right:0;z-index:15;background:transparent!important}
.service-page .site-header .nav{height:96px}
.service-hero-volcano{display:block;min-height:0;padding:0;background:#031722;isolation:isolate}
.service-hero-volcano .service-hero-bg{z-index:-2;background-position:center right;background-size:cover}
.service-hero-volcano::before{z-index:-1;background:linear-gradient(90deg,#031722 0%,rgba(3,23,34,.99) 17%,rgba(3,23,34,.90) 30%,rgba(3,23,34,.60) 47%,rgba(3,23,34,.08) 77%),linear-gradient(0deg,rgba(3,23,34,.4),transparent 24%)}
.service-hero-volcano .service-hero-grid{padding-top:116px;padding-bottom:76px;min-height:590px;display:flex;align-items:center}
.service-hero-volcano .service-hero-grid>div:first-child{max-width:610px}
.service-hero-volcano .service-crumb{font-size:12px;margin-bottom:28px}
.service-hero-volcano .service-kicker{font-size:12px;letter-spacing:.18em;margin:0 0 22px!important}
.service-hero-volcano h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(58px,5.3vw,80px);font-weight:800;line-height:1.01;letter-spacing:.005em;text-transform:uppercase;margin:0 0 25px;max-width:630px}
.service-hero-volcano h1 em{display:inline-block;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-style:italic;letter-spacing:-.015em;text-transform:uppercase;color:#ff6427;transform:rotate(-5deg);transform-origin:left center;margin:10px 0 0 22px;border-bottom:4px solid #ff6427;padding:0 6px 3px 0;line-height:1.03}
.service-hero-volcano .service-lead{max-width:540px;font-size:16px;line-height:1.7;color:#f0f5f7;margin:0 0 32px}
.service-hero-volcano .service-hero-actions{gap:14px}
@media(max-width:850px){.service-hero-volcano .service-hero-grid{min-height:560px;padding-top:120px;padding-bottom:65px}.service-hero-volcano h1{font-size:clamp(53px,8vw,72px)}.service-hero-volcano::before{background:linear-gradient(90deg,#031722 0%,rgba(3,23,34,.94) 48%,rgba(3,23,34,.42) 100%)}}
@media(max-width:575px){.service-page .site-header .nav{height:76px}.service-hero-volcano .service-hero-grid{min-height:600px;padding-top:108px;padding-bottom:70px;align-items:flex-start}.service-hero-volcano h1{font-size:clamp(46px,12vw,60px)}.service-hero-volcano h1 em{margin-left:8px}.service-hero-volcano .service-hero-bg{background-size:auto 72%;background-position:67% bottom}.service-hero-volcano::before{background:linear-gradient(180deg,#031722 0%,rgba(3,23,34,.98) 36%,rgba(3,23,34,.80) 58%,rgba(3,23,34,.25) 100%)}.service-hero-volcano .service-hero-actions .btn{width:auto;white-space:normal}}

/* HERO podstranek – sjednoceni s titulni stranou (2026-10-17) */
.service-hero-volcano .service-hero-grid {
  min-height: 495px;
  padding-top: 74px;
  padding-bottom: 58px;
}
.service-hero-volcano h1 {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: clamp(48px, 4.4vw, 68px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: .005em;
  margin-bottom: 21px;
}
.service-hero-volcano h1 em {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-weight: 900;
  font-style: italic;
  color: #ff6427;
  text-decoration: none !important;
  border-bottom: 0 !important;
  position: relative;
  padding-bottom: 9px;
  margin-top: 7px;
}
.service-hero-volcano h1 em::after {
  content: '';
  position: absolute;
  height: 4px;
  background: #ff6427;
  left: 0;
  right: 0;
  bottom: 0;
  transform: rotate(-2deg);
  border-radius: 3px;
}
.service-hero-volcano .service-crumb { margin-bottom: 18px; }
.service-hero-volcano .service-kicker { margin-bottom: 16px !important; }
.service-hero-volcano .service-lead { font-size: 15px; line-height: 1.65; margin-bottom: 25px; }
@media (max-width: 850px) {
 .service-hero-volcano .service-hero-grid { min-height: 480px; padding-top: 88px; padding-bottom: 50px; }
 .service-hero-volcano h1 { font-size: clamp(45px, 7vw, 62px); }
}
@media (max-width: 575px) {
 .service-hero-volcano .service-hero-grid { min-height: 540px; padding-top: 92px; padding-bottom: 55px; }
 .service-hero-volcano h1 { font-size: clamp(43px, 11vw, 54px); }
 .service-hero-volcano h1 em { margin-left: 8px; }
}

/* v5: Mr. Volcano in the left lower corner, pointing towards booking */
.contact-section{background:#031823;isolation:isolate;padding:100px 0 105px}
.contact-layout{align-items:stretch;position:relative;z-index:1}
.contact-intro{min-height:590px;display:flex;flex-direction:column;align-items:flex-start;position:relative}
.contact-mascot{position:absolute;left:clamp(-105px,-5vw,-20px);bottom:-105px;width:clamp(460px,43vw,740px);height:clamp(290px,26vw,450px);background:url('../images/contact-volcano-smooth.webp') left bottom / contain no-repeat;pointer-events:none;z-index:0;filter:saturate(.82) brightness(.88);-webkit-mask-image:linear-gradient(to top,#000 72%,transparent 100%);mask-image:linear-gradient(to top,#000 72%,transparent 100%)}
.contact-options{position:relative;z-index:2;align-self:center}
.contact-section::before{opacity:.22}
@media(max-width:1000px){.contact-intro{min-height:510px}.contact-mascot{width:min(75vw,680px);height:360px;left:-30px;bottom:-60px}.contact-options{width:100%}}
@media(max-width:620px){.contact-section{padding:75px 0 80px}.contact-intro{min-height:490px}.contact-mascot{left:-40px;bottom:-70px;width:110vw;height:285px;opacity:.85}.contact-layout{gap:20px}}

/* v6: contact image integrated into the dark section, without old lava strip */
.contact-section {
  background:#031823 !important;
  padding:100px 0 80px;
  isolation:isolate;
  overflow:hidden;
}
.contact-section::before,
.contact-section::after {
  content:none !important;
  display:none !important;
  background:none !important;
}
.contact-layout { position:relative; z-index:1; align-items:start; }
.contact-intro {
  position:relative;
  min-height:610px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.contact-intro > :not(.contact-mascot) { position:relative; z-index:2; }
.contact-mascot {
  position:absolute;
  z-index:1;
  left:clamp(-115px,-5vw,-35px);
  bottom:-80px;
  width:min(790px,56vw);
  height:450px;
  background:url('../images/contact-volcano-smooth.webp') left bottom / contain no-repeat;
  filter:saturate(.78) brightness(.82);
  pointer-events:none;
  opacity:.92;
  -webkit-mask-image:none;
  mask-image:none;
}
.contact-options {position:relative;z-index:3;align-self:center}
@media(min-width:2000px) {
  .contact-mascot {left:-115px;width:790px}
}
@media(max-width:1100px) {
  .contact-intro {min-height:560px}
  .contact-mascot {width:min(690px,74vw);height:390px;left:-45px;bottom:-75px}
}
@media(max-width:1000px) {
  .contact-layout {gap:28px}
  .contact-intro {min-height:510px}
  .contact-mascot {width:min(650px,92vw);height:330px;bottom:-45px;left:-35px}
}
@media(max-width:620px) {
  .contact-section {padding:75px 0 65px}
  .contact-intro {min-height:460px}
  .contact-mascot {width:min(550px,112vw);height:275px;bottom:-25px;left:-30px}
  .contact-options {width:100%}
}
.site-footer .footer-company {flex-basis:100%;display:flex;justify-content:center;gap:8px 22px;flex-wrap:wrap;padding-top:16px;border-top:1px solid #173642;color:#a9c8d3;font-size:12px}
.site-footer .footer-company a {color:inherit;text-decoration:none}
.site-footer .footer-company a:hover {color:#20c8d9}
@media(max-width:620px){.site-footer .footer-company{justify-content:flex-start}}

/* v7 – clear reading hierarchy; mascot BELOW copy and benefits */
.contact-section{padding:88px 0 55px !important;overflow:hidden}
.contact-layout{align-items:start}
.contact-intro{min-height:730px !important;display:flex;flex-direction:column}
.contact-mascot{
  top:420px !important;bottom:auto !important;
  left:clamp(-80px,-3vw,-20px) !important;
  width:min(720px,48vw) !important;height:325px !important;
  background-position:left bottom !important;
  filter:saturate(.9) brightness(.94) !important;
  opacity:1 !important;
}
.contact-options{margin-top:75px}
.site-footer{padding:30px 0 18px}
.site-footer .footer-company{max-width:1440px;margin:22px auto 0;padding:22px 20px 0;border-top:1px solid #193744;line-height:1.6;gap:8px 24px}
.site-footer .footer-signature{max-width:1440px;margin:19px auto 0;padding:16px 20px 0;border-top:1px solid #142e3b;color:#7795a1;text-align:center;font-size:12px;letter-spacing:.02em}
.site-footer .footer-signature .footer-flame{font-size:16px;color:#ff6233;vertical-align:-1px;margin:0 3px}
.site-footer .footer-signature strong{color:#d7eaf0;font-weight:650}
@media(min-width:2000px){.contact-mascot{left:-65px !important;width:720px !important}}
@media(max-width:1100px){.contact-intro{min-height:670px !important}.contact-mascot{top:395px !important;width:min(620px,60vw) !important;height:290px !important}.contact-options{margin-top:60px}}
@media(max-width:1000px){.contact-options{margin-top:0}.contact-intro{min-height:650px !important}.contact-mascot{top:370px !important;width:min(680px,90vw) !important;height:300px !important}}
@media(max-width:620px){.contact-section{padding:65px 0 45px !important}.contact-intro{min-height:620px !important}.contact-mascot{top:375px !important;left:-25px !important;width:110vw !important;height:260px !important}.site-footer .footer-company{justify-content:flex-start}.site-footer .footer-signature{text-align:left}}

/* v8: contact mascot at the section edge, matching references */
.contact-section{position:relative;overflow:hidden;padding:100px 0 115px !important;background:#031823 !important}
.contact-section>.contact-mascot{position:absolute !important;display:block;top:auto !important;right:auto !important;bottom:0 !important;left:0 !important;width:clamp(360px,30vw,570px) !important;height:clamp(220px,19vw,360px) !important;background:url('../images/contact-volcano-smooth.webp') left bottom / contain no-repeat !important;opacity:.96 !important;filter:saturate(.86) brightness(.9) !important;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 73%,transparent 100%) !important;mask-image:linear-gradient(to right,#000 0%,#000 73%,transparent 100%) !important;pointer-events:none;z-index:0 !important}
.contact-section .contact-layout{position:relative;z-index:1;align-items:start}
.contact-section .contact-intro{min-height:500px !important}
.contact-section .contact-options{margin-top:25px}
@media(min-width:1900px){.contact-section>.contact-mascot{width:min(28vw,590px) !important;height:370px !important}}
@media(max-width:1000px){.contact-section{padding:80px 0 85px !important}.contact-section .contact-intro{min-height:425px !important}.contact-section>.contact-mascot{width:430px !important;height:270px !important;opacity:.6 !important}.contact-section .contact-options{margin-top:0}}
@media(max-width:620px){.contact-section{padding:65px 0 55px !important}.contact-section .contact-intro{min-height:430px !important}.contact-section>.contact-mascot{width:350px !important;height:220px !important;opacity:.48 !important}}

/* v11: move the entire left content group up, together with its 05 watermark.
   Volcano remains an independent background illustration. */
@media (min-width: 1001px) {
  .contact-section .contact-intro {
    transform: translateY(-75px) !important;
  }
  .contact-section .contact-watermark {
    top: -78px !important;
    left: -12px !important;
    z-index: -1 !important;
  }
}

/* v12: align contact heading with the 05 watermark; preserve benefits and Volcano */
@media (min-width: 1001px) {
  .contact-section .contact-intro { transform: none !important; }
  .contact-section .contact-watermark {
    top: -12px !important;
    left: -12px !important;
  }
  .contact-section .contact-intro > .section-label,
  .contact-section .contact-intro > h2,
  .contact-section .contact-intro > p:not(.section-label) {
    position: relative;
    top: -64px;
  }
}

/* v13: contact responsive layout — clean CTA and full mascot gesture */
.contact-section{padding:76px 0 62px !important;overflow:hidden !important;background:#031823 !important}
.contact-section .contact-layout{max-width:1440px;margin-inline:auto;align-items:start;gap:clamp(34px,5vw,90px)}
.contact-section .contact-intro{min-height:455px !important;transform:none !important;padding-top:0}
.contact-section .contact-intro > .section-label,
.contact-section .contact-intro > h2,
.contact-section .contact-intro > p:not(.section-label){top:0 !important}
.contact-section .contact-watermark{top:-28px !important;left:-12px !important}
.contact-section .contact-options{margin-top:0 !important}
.contact-section>.contact-mascot{
  left:max(0px,calc((100vw - 1440px)/2 - 155px)) !important;
  bottom:0 !important;top:auto !important;right:auto !important;
  width:clamp(460px,37vw,650px) !important;height:clamp(276px,22.2vw,390px) !important;
  background:url('../images/contact-volcano-smooth.webp') left bottom / contain no-repeat !important;
  -webkit-mask-image:none !important;mask-image:none !important;
  opacity:.96 !important;filter:saturate(.88) brightness(.91) !important;
}
@media(min-width:1900px){.contact-section>.contact-mascot{left:calc((100vw - 1440px)/2 - 155px) !important;width:650px !important;height:390px !important}}
@media(max-width:1100px){.contact-section{padding:65px 0 52px !important}.contact-section .contact-intro{min-height:420px !important}.contact-section>.contact-mascot{left:0 !important;width:460px !important;height:276px !important}}
@media(max-width:1000px){.contact-section .contact-layout{gap:24px}.contact-section .contact-intro{min-height:320px !important}.contact-section>.contact-mascot{opacity:.3 !important;width:410px !important;height:246px !important}.contact-section .contact-options{position:relative;z-index:2}}
@media(max-width:620px){.contact-section{padding:65px 0 55px !important}.contact-section .contact-intro{min-height:260px !important}.contact-section>.contact-mascot{width:300px !important;height:180px !important;opacity:.18 !important}}

/* v14 — contact mascot: exactly the reference section's 2000px stage logic */
.contact-section {position:relative;isolation:isolate;overflow:hidden;padding:90px 0 0 !important;background:#031823 !important;}
.contact-section::before {content:"" !important;display:block !important;position:absolute !important;z-index:0 !important;pointer-events:none !important;left:max(0px,calc((100% - 2000px)/2)) !important;bottom:0 !important;top:auto !important;right:auto !important;width:clamp(490px,39vw,740px) !important;height:clamp(245px,22vw,365px) !important;background:url('../images/contact-volcano-smooth.webp') left top / 100% auto no-repeat !important;opacity:1 !important;filter:none !important;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 62%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 28%,#000 100%) !important;-webkit-mask-composite:source-in !important;mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 62%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 28%,#000 100%) !important;mask-composite:intersect !important;}
.contact-section::after,.contact-section>.contact-mascot{display:none !important;}
.contact-section .contact-layout{position:relative;z-index:1;max-width:1440px;margin-inline:auto;align-items:start;gap:clamp(34px,5vw,90px);min-height:540px;}
.contact-section .contact-intro{position:relative;min-height:540px !important;padding-top:0 !important;transform:none !important;}
.contact-section .contact-watermark{position:absolute !important;top:-66px !important;left:-12px !important;font:900 116px/1 'Barlow Condensed',sans-serif !important;opacity:1 !important;color:rgba(156,217,225,.09) !important;z-index:-1 !important;}
.contact-section .contact-intro>.section-label{position:relative;top:0 !important;margin:10px 0 24px !important;}
.contact-section .contact-intro>h2{position:relative;top:0 !important;margin:0 0 28px !important;}
.contact-section .contact-intro>p:not(.section-label){position:relative;top:0 !important;}
.contact-section .contact-options{margin-top:0 !important;position:relative;z-index:2;}
@media(max-width:1000px){.contact-section{padding:76px 0 0 !important}.contact-section .contact-layout{min-height:0;padding-bottom:245px;gap:32px}.contact-section .contact-intro{min-height:0 !important}.contact-section::before{width:560px !important;height:280px !important;opacity:.7 !important}}
@media(max-width:720px){.contact-section{padding:72px 0 0 !important}.contact-section .contact-layout{padding-bottom:225px}.contact-section::before{left:-30px !important;width:510px !important;height:255px !important;opacity:.65 !important}.contact-section .contact-watermark{font-size:95px !important;top:-55px !important}}

/* v15 – two direct contact choices; no booking card */
.contact-section{padding:74px 0 0 !important;overflow:hidden !important;isolation:isolate}
.contact-section::before{content:none !important;display:none !important}
.contact-section::after{display:none !important}
.contact-section>.contact-mascot{display:block !important;position:absolute !important;left:max(0px,calc((100vw - 1440px)/2 - 145px)) !important;bottom:0 !important;top:auto !important;width:min(750px,48vw) !important;height:420px !important;background:url('../images/contact-volcano-clean.webp') left bottom / contain no-repeat !important;mask-image:none !important;-webkit-mask-image:none !important;opacity:1 !important;filter:none !important;z-index:0 !important;pointer-events:none}
.contact-section .contact-layout{max-width:1440px !important;min-height:495px !important;align-items:start !important;position:relative;z-index:1}
.contact-section .contact-intro{min-height:495px !important;position:relative}
.contact-section .contact-watermark{top:-42px !important;left:-12px !important;z-index:-1 !important}
.contact-section .contact-intro>.section-label{margin:10px 0 24px !important}
.contact-section .contact-options{margin-top:88px !important;align-self:start !important}
.contact-section .contact-direct{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0}
.contact-section .contact-direct-card{min-height:205px;padding:32px 26px;align-items:flex-start;transition:transform .2s,border-color .2s,background .2s;cursor:pointer}
.contact-section .contact-direct-card:hover{transform:translateY(-4px);border-color:#12bfd0;background:#0b3040}
.contact-section .contact-direct-card strong{font-size:21px}
.contact-section .contact-direct-card small{font-size:14px}
.contact-section .contact-direct-card b{font-size:15px}
.contact-section .contact-phone-card b{color:#27cfe0}
@media(min-width:2100px){.contact-section>.contact-mascot{left:calc((100vw - 1440px)/2 - 145px) !important;width:750px !important}}
@media(max-width:1100px){.contact-section>.contact-mascot{left:-65px !important;width:590px !important;height:360px !important}.contact-section .contact-options{margin-top:70px !important}}
@media(max-width:1000px){.contact-section .contact-layout{min-height:0 !important;padding-bottom:320px !important}.contact-section .contact-intro{min-height:0 !important}.contact-section .contact-options{margin-top:0 !important}.contact-section>.contact-mascot{width:620px !important;height:350px !important;left:-50px !important}}
@media(max-width:620px){.contact-section .contact-layout{padding-bottom:245px !important}.contact-section .contact-direct{grid-template-columns:1fr;gap:14px}.contact-section .contact-direct-card{min-height:0;padding:22px}.contact-section>.contact-mascot{width:440px !important;height:260px !important;left:-45px !important}.contact-section .contact-watermark{top:-42px !important}}

/* v16 — shared icon accent and restored reference-style mascot */
/* All framed Bootstrap icons share one orange accent dot. */
.service-icon, .contact-direct-icon { position:relative; isolation:isolate; overflow:visible; }
.service-icon::after, .contact-direct-icon::after {
  content:""; position:absolute; z-index:3; top:-4px; right:-4px;
  width:10px; height:10px; box-sizing:border-box; border-radius:50%;
  background:#ff6427; border:2px solid #031823;
  pointer-events:none;
}
.service-icon::after { border-color:#fff; }
/* Unframed icons use a subtler dot so they stay legible. */
.proof-icon { position:relative; overflow:visible; }
.proof-icon::after { content:""; position:absolute; top:-3px; right:-1px; width:6px; height:6px; border-radius:50%; background:#ff6427; box-shadow:0 0 0 2px #031823; }
/* Reference-like placement: image is attached to a capped stage, not viewport edge. */
.contact-section { position:relative !important; isolation:isolate !important; overflow:hidden !important; }
.contact-section>.contact-mascot {
  display:block !important; position:absolute !important;
  left:max(0px,calc((100% - 2000px)/2)) !important;
  bottom:0 !important; top:auto !important; right:auto !important;
  width:clamp(490px,39vw,740px) !important;
  height:clamp(245px,22vw,365px) !important;
  background:url('../images/contact-volcano-smooth.webp') left bottom / contain no-repeat !important;
  opacity:1 !important; filter:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
  z-index:0 !important; pointer-events:none !important;
}
.contact-section .contact-layout { position:relative; z-index:1; }
.contact-section .contact-watermark { top:-42px !important; }
@media (max-width:1000px) {
 .contact-section>.contact-mascot { left:0 !important; width:560px !important; height:290px !important; }
}
@media (max-width:620px) {
 .contact-section>.contact-mascot { left:-25px !important; width:420px !important; height:220px !important; opacity:.8 !important; }
}

/* v17 — contact cards inspired by approved mockup; shared icon accent */
/* Hero USP remains clean: no dots on proof icons. */
.proof-icon::after {content:none !important;display:none !important}
/* Original small orange dot, at the top-right of each framed icon. */
.service-icon::after,.contact-direct-icon::after{width:8px !important;height:8px !important;top:-3px !important;right:-3px !important;background:#ff6427 !important;border:1.5px solid #fff !important;box-shadow:none !important}
.contact-direct-icon::after{border-color:#082631 !important}
/* Subpage benefit icons are also accented; never decorate hero USP. */
.service-page .service-benefit>i{position:relative;display:inline-flex;isolation:isolate;overflow:visible}
.service-page .service-benefit>i::after{content:'';position:absolute;right:-5px;top:-4px;width:8px;height:8px;border-radius:50%;background:#ff6427;border:1.5px solid #fff;box-sizing:border-box}
.service-page .service-block.alt .service-benefit>i::after{border-color:#f4f8fa}
/* Two equal, readable contact cards; mascot position stays unchanged. */
.contact-section .contact-direct{gap:18px !important}
.contact-section .contact-direct-card{position:relative;display:flex !important;flex-direction:column;gap:0 !important;min-height:265px !important;padding:29px 30px 28px !important;background:linear-gradient(145deg,#0a2b3a,#082431) !important;border:1px solid #236072 !important;border-radius:17px !important;box-shadow:0 10px 34px rgba(0,0,0,.08);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease !important}
.contact-section .contact-direct-card:hover{transform:translateY(-4px);border-color:#12bfd0 !important;box-shadow:0 18px 36px rgba(0,0,0,.17)}
.contact-section .contact-direct-icon{display:grid;place-items:center;width:58px;height:58px;flex:none;margin-bottom:18px;background:#0d4251;border:1px solid #1a6878;border-radius:13px;font-size:27px}
.contact-section .contact-direct-card>span:last-child{display:flex;flex-direction:column;flex:1;width:100%}
.contact-section .contact-direct-card strong{font-size:22px !important;line-height:1.2}
.contact-section .contact-direct-card small{font-size:14px !important;line-height:1.5;margin:9px 0 17px !important}
.contact-section .contact-direct-card b{font-size:15px !important;margin-top:auto}
.contact-section .contact-direct-card::after{content:'→';position:absolute;right:25px;bottom:24px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid #176276;color:#23d0e0;font-size:24px;font-weight:400;transition:background .2s}
.contact-section .contact-direct-card:hover::after{background:#0b4656}
.contact-section .contact-direct-card b{padding-right:35px}
@media(max-width:1100px){.contact-section .contact-direct-card{padding:23px !important;min-height:255px !important}}
@media(max-width:620px){.contact-section .contact-direct-card{min-height:225px !important;padding:23px !important}.contact-section .contact-direct-icon{width:52px;height:52px;margin-bottom:14px}.contact-section .contact-direct-card strong{font-size:20px !important}}

/* v18 — stacked contact cards, restrained dimensional shading */
.contact-section .contact-direct{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:16px !important;
  max-width:100%;
}
.contact-section .contact-direct-card{
  min-height:176px !important;
  padding:23px 28px 22px !important;
  background:linear-gradient(125deg,rgba(13,53,69,.96) 0%,rgba(7,35,48,.98) 68%,#06212e 100%) !important;
  box-shadow:inset 0 1px 0 rgba(110,221,232,.09),0 14px 35px rgba(0,0,0,.20),0 3px 12px rgba(0,135,157,.08) !important;
}
.contact-section .contact-direct-card:hover{
  box-shadow:inset 0 1px 0 rgba(110,221,232,.13),0 20px 42px rgba(0,0,0,.25),0 5px 18px rgba(0,155,177,.12) !important;
}
.contact-section .contact-direct-icon{width:50px;height:50px;margin-bottom:12px;font-size:23px}
.contact-section .contact-direct-card strong{font-size:20px !important}
.contact-section .contact-direct-card small{margin:6px 0 10px !important}
.contact-section .contact-direct-card b{margin-top:auto}
/* Keep the copy above the mascot and let the entire illustration breathe. */
.contact-section .contact-layout{min-height:585px !important}
.contact-section .contact-intro{min-height:585px !important}
.contact-section .contact-options{margin-top:18px !important}
@media(min-width:1001px){
  .contact-section>.contact-mascot{width:min(750px,48vw) !important;height:420px !important}
}
@media(max-width:1000px){
  .contact-section .contact-layout{min-height:0 !important;padding-bottom:320px !important}
  .contact-section .contact-intro{min-height:0 !important}
  .contact-section .contact-options{margin-top:0 !important}
}
@media(max-width:620px){
  .contact-section .contact-layout{padding-bottom:245px !important}
  .contact-section .contact-direct-card{min-height:168px !important;padding:20px 22px !important}
  .contact-section .contact-direct-icon{width:48px;height:48px}
}

/* v19: shared icon treatment, compact benefits, process timeline, footer contact */
.wl-icon{width:52px;height:52px;display:inline-flex!important;align-items:center;justify-content:center;position:relative;flex:0 0 52px;border:1px solid #a7e6ef;border-radius:13px;background:#e9faff;color:#00a9bc;font-size:24px;line-height:1;isolation:isolate}
.wl-icon::after{content:"";position:absolute;right:-5px;top:-5px;width:9px;height:9px;border-radius:50%;background:#ff6427;border:2px solid #fff;box-sizing:border-box}
.wl-icon-dark{background:#103f50;border-color:#226475;color:#10c5d6}
.wl-icon-dark::after{border-color:#06232f}
.service-page .service-benefit-grid{grid-template-columns:repeat(3,minmax(0,360px));justify-content:start;gap:22px}
.service-page .service-benefit{padding:29px 30px}
.service-page .service-benefit>i.wl-icon{margin:0 0 23px;font-style:normal}
.service-page .service-benefit>i.wl-icon::after{right:-5px;top:-5px;width:9px;height:9px;border:2px solid white}
.service-page .service-steps{position:relative;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.service-page .service-step{position:relative;background:#fff;border:1px solid #d3e7ec;border-radius:17px;padding:29px 25px 26px;min-height:230px;box-shadow:0 15px 35px rgba(4,35,47,.045);transition:transform .2s,box-shadow .2s}
.service-page .service-step:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(4,35,47,.10)}
.service-page .service-step>span{display:block;font-family:inherit;font-size:40px;font-weight:850;letter-spacing:-.06em;line-height:1;color:#00a9bc;opacity:.75;margin-bottom:25px}
.service-page .service-step h3{font-size:17px;line-height:1.3;letter-spacing:-.03em;color:#062633;margin:0 0 12px}
.service-page .service-step p{font-size:14px;line-height:1.7;margin:0}
.footer-contact-strip{background:#031823;color:#fff;border-top:1px solid #193b47;padding:65px 0 55px}
.footer-contact-strip>.container{display:flex;align-items:center;justify-content:space-between;gap:50px}
.footer-contact-intro{flex:0 0 260px}
.footer-contact-intro .section-label{color:#12c5d6;font-size:12px;letter-spacing:.15em;font-weight:800}
.footer-contact-intro h2{font-size:clamp(27px,2.5vw,39px);letter-spacing:-.045em;line-height:1.15;margin:14px 0 0}
.footer-contact-intro h2 span{color:#13baca}
.footer-contact-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;flex:1;max-width:820px}
.footer-contact-card{min-width:0;display:flex;align-items:flex-start;gap:18px;position:relative;padding:25px 24px;border:1px solid #285567;border-radius:17px;background:linear-gradient(130deg,#0b3443 0%,#06212e 70%);box-shadow:0 18px 34px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.035);color:#fff;text-decoration:none;transition:transform .2s,border-color .2s}
.footer-contact-card:hover{transform:translateY(-3px);border-color:#10aabd}
.footer-contact-content{display:flex;flex-direction:column;gap:9px;min-width:0;padding-top:2px}
.footer-contact-content strong{font-size:19px;color:#fff}
.footer-contact-content small{font-size:13px;line-height:1.55;color:#a8cbd7}
.footer-contact-content b{font-size:13px;color:#17d1e1;overflow-wrap:anywhere}
.footer-contact-arrow{position:absolute;right:17px;bottom:16px;color:#18c8d9;font-size:22px}
@media(max-width:1050px){.footer-contact-strip>.container{flex-direction:column;align-items:stretch;gap:25px}.footer-contact-intro{flex-basis:auto}.footer-contact-cards{max-width:none}.service-page .service-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.service-page .service-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-contact-cards{grid-template-columns:1fr}.footer-contact-strip{padding:50px 0}}
@media(max-width:560px){.service-page .service-benefit-grid,.service-page .service-steps{grid-template-columns:1fr}.service-page .service-step{min-height:0}.footer-contact-card{padding:23px 20px}}

/* v20: one consistent framed icon component throughout site */
.wl-icon, .service-icon.wl-icon { box-sizing:border-box; width:43px; height:43px; min-width:43px; flex:0 0 43px; display:inline-flex!important; align-items:center; justify-content:center; position:relative; margin:0 0 12px; padding:0; border:1px solid rgba(0,177,198,.18); border-radius:12px; background:#e9f9fb; color:#00aabd; font-size:23px; line-height:1; isolation:isolate; }
.wl-icon::after, .service-icon.wl-icon::after { content:""; display:block; position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#ff6427; border:2px solid #fff; box-sizing:border-box; box-shadow:none; }
.wl-icon > .bi { font-size:23px; line-height:1; }
.service-page .service-benefit > .wl-icon { margin:0 0 23px; }
.service-page .service-benefit > .wl-icon::after { top:-3px;right:-3px;width:8px;height:8px;border:2px solid #fff; }
.wl-icon-dark { background:#103f50; border-color:#226475; color:#10c5d6; }
.wl-icon-dark::after { border-color:#06232f; }
.service-icon.wl-icon svg { width:25px; height:25px; }

/* Zakladatel WebLogico — izolovaná responzivní sekce */
.founder-section{background:radial-gradient(ellipse at 88% 30%,#0b3040 0%,#031c27 48%,#00141d 100%);color:#fff;padding:clamp(72px,8vw,125px) 0;overflow:hidden}
.founder-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(36px,6vw,110px)}
.founder-copy{max-width:660px}.founder-copy .section-label{color:#05b9cb;letter-spacing:.16em;font-size:13px;font-weight:800;margin:0 0 24px}
.founder-copy h2{font-size:clamp(33px,3.35vw,57px);line-height:1.12;letter-spacing:-.05em;margin:0 0 30px;font-weight:800}
.founder-copy h2 span{color:#06b5c7}.founder-copy p:not(.section-label){font-size:clamp(15px,1.12vw,18px);line-height:1.75;color:#b9d5df;margin:0 0 19px}
.founder-copy p strong{color:white}
.founder-portrait{position:relative;margin:0;max-width:560px;justify-self:end;width:100%;border-radius:16px;overflow:hidden;border:1px solid rgba(83,176,195,.25);background:#102d37;box-shadow:0 30px 90px rgba(0,0,0,.28)}
.founder-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 42%}
@media(max-width:850px){.founder-grid{grid-template-columns:1fr}.founder-copy{max-width:700px}.founder-portrait{justify-self:start;max-width:650px}}
@media(max-width:520px){.founder-section{padding:65px 0}.founder-copy h2{font-size:34px}.founder-portrait{border-radius:10px}}

/* Decentní osobní vizitka za kontaktem – sdílené styly z původní sekce */
.founder-section--quiet{padding:clamp(35px,4vw,62px) 0;background:#031923;border-top:1px solid rgba(85,170,190,.16);border-bottom:1px solid rgba(85,170,190,.16)}
.founder-section--quiet .founder-grid{max-width:900px;margin-inline:auto;grid-template-columns:180px minmax(0,1fr);gap:clamp(24px,4vw,55px);align-items:center}
.founder-section--quiet .founder-portrait{width:180px;max-width:100%;justify-self:start;aspect-ratio:1/1;border-radius:12px;box-shadow:none;border:1px solid rgba(83,176,195,.18)}
.founder-section--quiet .founder-portrait img{height:100%;aspect-ratio:1;object-fit:cover;object-position:center 35%}
.founder-section--quiet .founder-copy{max-width:610px}
.founder-section--quiet .founder-copy .section-label{font-size:11px;margin:0 0 12px}
.founder-section--quiet .founder-copy h2{font-size:clamp(23px,2vw,30px);letter-spacing:-.035em;line-height:1.2;margin:0 0 14px}
.founder-section--quiet .founder-copy p:not(.section-label){font-size:14px;line-height:1.7;color:#abcbd5;margin:0 0 10px}
.founder-section--quiet .founder-copy p:last-child{margin-bottom:0}
@media(max-width:600px){.founder-section--quiet .founder-grid{grid-template-columns:100px minmax(0,1fr);gap:18px;align-items:start}.founder-section--quiet .founder-portrait{width:100px}.founder-section--quiet .founder-copy h2{font-size:22px}}
@media(max-width:420px){.founder-section--quiet .founder-grid{grid-template-columns:1fr}.founder-section--quiet .founder-portrait{width:110px}}

/* v23: osobní představení před kontaktem, stále decentní */
.founder-section--quiet .founder-grid{max-width:1040px;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,4vw,58px)}
.founder-section--quiet .founder-portrait{width:230px;aspect-ratio:23/25}
.founder-section--quiet .founder-portrait img{aspect-ratio:23/25}
.founder-section--quiet .founder-copy{max-width:680px}
@media(max-width:600px){.founder-section--quiet .founder-grid{grid-template-columns:110px minmax(0,1fr);gap:18px}.founder-section--quiet .founder-portrait{width:110px}}
@media(max-width:420px){.founder-section--quiet .founder-grid{grid-template-columns:1fr}.founder-section--quiet .founder-portrait{width:150px}}

/* v24: compact contact cards and founder after contact */
@media (min-width:1001px){
  .contact-section .contact-options{width:100%;max-width:520px;justify-self:start;align-self:start;}
  .contact-section .contact-direct{width:100%;max-width:520px;}
}
.contact-section .contact-direct-card{width:100%;box-sizing:border-box;}
@media (max-width:1000px){.contact-section .contact-options,.contact-section .contact-direct{max-width:520px;width:100%;}}
@media (max-width:620px){.contact-section .contact-options,.contact-section .contact-direct{max-width:100%;}}

/* WebLogico – jednotný plamínek v patičce */
.site-footer .footer-signature .footer-flame {
  display: inline-flex; align-items: center; justify-content: center;
  color: #ff5935; font-size: 17px; margin: 0 5px;
  vertical-align: -2px; line-height: 1;
  transition: color .2s ease, filter .2s ease, transform .2s ease;
}
.site-footer .footer-signature:hover .footer-flame {
  color: #ff794e; filter: drop-shadow(0 0 5px rgba(255,89,53,.65));
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-signature .footer-flame { transition: none; }
}

/* v26 mobile fixes */
.site-header,.service-page .site-header{position:fixed!important;top:0;left:0;right:0;z-index:1000;background:rgba(3,20,30,.88)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid #2c667144}
.site-header.is-scrolled{background:rgba(3,20,30,.98)!important;box-shadow:0 8px 28px #0004}
html{scroll-padding-top:85px}
@media(max-width:760px){
.site-header .nav,.service-page .site-header .nav{height:72px}
.menu-toggle{width:44px;height:44px;position:relative;display:flex;align-items:center;justify-content:center;gap:0;padding:0;border:1px solid #1a687777;border-radius:12px;background:#082d3bb8;z-index:1002}
.menu-toggle span{position:absolute;display:block;width:22px;height:2px;border-radius:2px;background:white;transition:transform .25s,opacity .2s}
.menu-toggle span:nth-child(1){transform:translateY(-7px)}.menu-toggle span:nth-child(2){transform:none}.menu-toggle span:nth-child(3){transform:translateY(7px)}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:nth-child(3){transform:rotate(-45deg)}
.mobile-nav{top:72px;left:12px;right:12px;padding:12px;border:1px solid #1b778855;border-radius:0 0 18px 18px;background:#041b27fa;box-shadow:0 22px 50px #0008;max-height:calc(100dvh - 84px);overflow-y:auto}
.mobile-nav.open{gap:3px}.mobile-nav a{display:flex;align-items:center;min-height:49px;padding:12px 15px;border-radius:9px;font-size:15px}.mobile-nav a:hover,.mobile-nav a:focus-visible{background:#0abbd51f;color:#12d5e6}.mobile-nav a:last-child{margin-top:8px;background:#09b3c5;color:white;justify-content:space-between}
.proof.proof-wide{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;max-width:100%!important;gap:18px 12px!important;align-items:start!important;margin-top:24px!important;padding-top:22px!important}
.proof.proof-wide .proof-item{display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;gap:9px!important;min-width:0!important;width:auto!important;max-width:100%!important;white-space:normal!important}
.proof.proof-wide .proof-item span{min-width:0;display:block}.proof.proof-wide .proof-icon{flex:0 0 25px!important;width:25px!important;min-width:25px!important;height:auto!important;font-size:24px!important}
.proof.proof-wide .proof-item b,.proof.proof-wide .proof-item small{display:block;white-space:normal;overflow-wrap:normal;word-break:normal}.proof.proof-wide .proof-item b{font-size:12px!important;line-height:1.3!important}.proof.proof-wide .proof-item small{font-size:11px!important;line-height:1.35!important}
.hero-inner,.hero-content{min-width:0}.hero{height:auto!important;min-height:0!important}.hero-inner{height:auto!important;min-height:0!important;padding-bottom:44px!important}
}
@media(max-width:360px){.proof.proof-wide{column-gap:7px!important}.proof.proof-wide .proof-item b{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.menu-toggle span{transition:none}}

/* v27: nav nad maskotem, trust pod CTA */
@media(max-width:760px){
.site-header,.service-page .site-header{position:fixed!important;top:0;left:0;right:0;background:transparent!important;border-bottom:1px solid transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.site-header.is-scrolled,.service-page .site-header.is-scrolled{background:rgba(3,20,30,.95)!important;border-bottom-color:rgba(22,183,202,.2)!important;box-shadow:0 10px 30px #0004!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important}
.menu-toggle{background:rgba(3,20,30,.24)!important;border:0!important}
.menu-toggle:focus-visible{outline:2px solid #08c6d8!important;outline-offset:3px!important}
.hero-inner{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;min-height:0!important;height:auto!important;padding-top:305px!important;padding-bottom:42px!important}
.hero-content{display:flex!important;flex-direction:column!important;flex:none!important;width:100%!important;max-width:100%!important;min-width:0!important}
.hero-actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;margin:24px 0 0!important;width:100%!important;max-width:300px!important}
.hero-actions .btn{display:flex!important;width:100%!important;justify-content:space-between!important;min-height:49px!important}
.proof.proof-wide{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;position:static!important;flex:none!important;align-self:stretch!important;clear:both!important;margin:32px 0 0!important;padding:23px 0 0!important;border-top:1px solid #ffffff30!important;gap:20px 13px!important;width:100%!important}
.proof.proof-wide .proof-item{display:flex!important;gap:10px!important;align-items:flex-start!important;justify-content:flex-start!important;min-width:0!important}
.proof.proof-wide .proof-item:last-child{grid-column:1/-1!important}
.proof.proof-wide .proof-icon{flex:0 0 26px!important;width:26px!important;min-width:26px!important;height:26px!important;font-size:25px!important}
.proof.proof-wide .proof-item span{display:block!important;min-width:0!important}
.proof.proof-wide .proof-item b{font-size:12px!important;line-height:1.3!important}
.proof.proof-wide .proof-item small{font-size:11px!important;line-height:1.4!important}
}

/* ===== v27 – texty a struktura podstránek ===== */
.service-kicker a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(17,199,216,.35)}
.service-kicker a:hover{color:#fff;border-color:#fff}
.service-page .service-benefit-grid{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch}
.service-page .service-benefit-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-page .service-block-ref{padding-top:0}
.service-page .service-block.alt + .service-block-ref.alt{margin-top:-1px}
.service-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:22px}
.footer-contact-lead{color:#b1d1dc;font-size:15px;line-height:1.7;margin:12px 0 0;max-width:420px}
.footer-contact-intro h2 span{color:#11bdcf}
@media(max-width:1050px){.service-page .service-benefit-grid,.service-page .service-benefit-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.service-page .service-benefit-grid,.service-page .service-benefit-grid--three{grid-template-columns:1fr}}

/* v29 – drobečková navigace a ikony v kartách služeb */
.service-hero-volcano .service-crumb{display:inline-flex;color:#8a9ba3;font-size:13px;margin-bottom:14px}
.service-hero-volcano .service-crumb:hover{color:#fff}
.service-hero-volcano .service-hero-grid{padding-top:150px}
@media(max-width:850px){.service-hero-volcano .service-hero-grid{padding-top:130px}}
@media(max-width:575px){.service-hero-volcano .service-hero-grid{padding-top:112px}}
.service-page .service-benefit .wl-icon > i{margin:0;font-size:22px;line-height:1;display:block}

/* v30 – poměr stran referencí, kontaktní pruh, FAQ */
.service-showcase img{height:auto;aspect-ratio:auto}
.service-page .footer-contact-intro{flex:0 1 420px}
.service-page .footer-contact-intro h2{font-size:clamp(27px,2.3vw,36px)}
.service-faq .service-heading .service-link{display:inline-block;margin-top:6px}

/* v32 – hlavička zůstává v hero; hero nad ostatními sekcemi, aby fixní lišta nezajížděla pod karty */
.service-hero-volcano{position:relative;z-index:50}

/* v33 – lišta průhledná přes hero i na desktopu, tmavá až po odscrollování */
.site-header:not(.is-scrolled),.service-page .site-header:not(.is-scrolled){background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.site-header,.service-page .site-header{transition:background .25s,border-color .25s,box-shadow .25s}
.site-header.is-scrolled,.service-page .site-header.is-scrolled{background:rgba(3,20,30,.95)!important;border-bottom:1px solid rgba(22,183,202,.2)!important;box-shadow:0 10px 30px #0004!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important}

/* v40 – metriky na podpoře prodeje */
.service-page .service-block-metrics{padding-top:0}
.service-note{margin:26px 0 0;padding:16px 20px;border-left:3px solid #ff6427;background:#fff;border-radius:0 12px 12px 0;color:#355768;font-size:15px;line-height:1.7;max-width:760px}

/* v44 – ŠŤÁVU na vlastním řádku pod nadpisem (desktop), tečka bez mezery */
@media(min-width:761px){
.hero h1 em{position:relative!important;top:auto!important;left:auto!important;display:inline-block!important;margin:14px 0 0 .35em!important;transform:rotate(-5deg)!important;transform-origin:left center!important}
.hero h1{padding-bottom:30px!important}
}

/* v45 – text ve službách končí před obrázkem */
@media(min-width:761px){.service-card .service-copy{max-width:172px;position:relative;z-index:1}}

/* v53 – větší fotka zakladatele (desktop) */
@media(min-width:851px){
.founder-section--quiet .founder-grid{max-width:1120px;grid-template-columns:300px minmax(0,1fr)}
.founder-section--quiet .founder-portrait{width:300px}
}
.founder-section--quiet .founder-portrait img{object-position:center 30%}

/* v55 – FAQ maskot má pevnou výšku, při rozbalení otázek neroste */
.faq-volcano{top:auto!important;bottom:0!important;height:clamp(420px,28vw,540px)!important;background-position:84% bottom!important;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 32%,#000 100%),linear-gradient(to bottom,transparent 0%,#000 18%,#000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0%,#000 32%,#000 100%),linear-gradient(to bottom,transparent 0%,#000 18%,#000 100%);mask-composite:intersect}

/* v56 – větší menu a trust řádek na desktopu */
@media(min-width:1100px){
.desktop-nav a{font-size:15px!important}
.nav-cta{font-size:12.5px!important}
}
@media(min-width:1500px){
.proof .proof-icon{font-size:32px!important}
.proof .proof-item b{font-size:17px!important}
.proof .proof-item small{font-size:14px!important}
}

/* Yii2 – kroky procesu jsou seznam (ol) */
.service-steps{list-style:none;margin:0;padding:0}

/* v57 – mobil a tablet: hero */
@media(max-width:900px){
.hero-actions{margin-top:0!important}
.hero-actions .btn{font-size:13px!important;letter-spacing:.04em}
}
@media(max-width:760px){
.proof.proof-wide .proof-item:last-child:nth-child(odd){grid-column:1/-1}
}

/* v57 – tablet (761–1023 px): hamburger místo desktopového menu, trust řádek ve třech sloupcích */
@media(min-width:761px) and (max-width:1023px){
.desktop-nav,.nav-cta{display:none!important}
.menu-toggle{display:flex!important;width:44px;height:44px;position:relative;align-items:center;justify-content:center;padding:0;border:0;border-radius:12px;background:rgba(3,20,30,.24);cursor:pointer}
.menu-toggle span{position:absolute;display:block;width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .25s,opacity .2s}
.menu-toggle span:nth-child(1){transform:translateY(-7px)}.menu-toggle span:nth-child(3){transform:translateY(7px)}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:nth-child(3){transform:rotate(-45deg)}
.mobile-nav{position:absolute;top:84px;left:auto;right:24px;width:320px;padding:12px;border:1px solid #1b778855;border-radius:0 0 18px 18px;background:#041b27fa;box-shadow:0 22px 50px #0008}
.mobile-nav.open{display:flex;flex-direction:column;gap:3px}
.mobile-nav a{display:flex;align-items:center;min-height:49px;padding:12px 15px;border-radius:9px;font-size:15px;font-weight:700;color:#fff;text-decoration:none}
.mobile-nav a:last-child{margin-top:8px;background:#09b3c5;justify-content:space-between}
}
@media(min-width:761px) and (max-width:1279px){
.proof.proof-wide{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 24px;justify-items:start}
.proof.proof-wide .proof-item{justify-content:flex-start}
}

/* v58 – mobil: víc vzduchu v hero */
@media(max-width:760px){
.hero-subtitle{margin-bottom:32px!important}
.hero-actions{gap:12px!important;max-width:none!important}
.hero-actions .btn{width:100%!important;max-width:none!important;min-height:56px}
.proof.proof-wide{margin-top:40px!important;padding-top:32px!important;row-gap:26px!important;column-gap:16px!important}
.proof.proof-wide .proof-item b{font-size:14px!important}
.proof.proof-wide .proof-item small{font-size:12.5px!important;margin-top:3px}
}

/* v59 – mobil: kontaktní karty a fotka zakladatele */
@media(max-width:760px){
.contact-section .contact-direct .contact-direct-card{padding-right:76px!important}
.contact-direct-card small{display:block}
.founder-section--quiet .founder-grid{grid-template-columns:1fr!important;gap:26px!important}
.founder-section--quiet .founder-portrait{width:100%!important;max-width:460px;aspect-ratio:4/3!important}
.founder-section--quiet .founder-portrait img{aspect-ratio:4/3!important;object-position:center 35%}
}

/* v60 – mobil: tlačítka v hero podstránek stejně jako na homepage */
@media(max-width:760px){
.service-hero-actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;margin-top:32px}
.service-hero-actions .btn{width:100%!important;max-width:none!important;min-height:56px;justify-content:space-between;font-size:13px!important;letter-spacing:.04em}
}

/* v61 – mobilní menu: bílé odkazy i na podstránkách, podmenu služeb */
.mobile-nav a{color:#fff}
.mobile-subnav{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;margin:-2px 0 6px;padding:0 0 8px 12px;border-bottom:1px solid #1b778844}
.mobile-nav .mobile-subnav a{min-height:40px;padding:8px 12px;font-size:14px;font-weight:600;color:#a9c7d2}
.mobile-nav .mobile-subnav a::before{content:"";width:6px;height:6px;margin-right:10px;border-radius:50%;background:#ff6427;flex:0 0 6px}
.mobile-nav .mobile-subnav a[aria-current=page]{color:#12d5e6;background:#0abbd51a}
.mobile-nav .mobile-subnav a:last-child{margin-top:0;background:none;justify-content:flex-start}
.mobile-nav .mobile-subnav a[aria-current=page]:last-child{background:#0abbd51a}

/* v62 – mobil: obrázek s maskotem nahoře, text pod ním (jako na homepage) */
@media(max-width:575px){
.service-hero-volcano .service-hero-bg{inset:0 0 auto 0!important;height:330px;background-size:cover!important;background-position:78% 30%!important;opacity:1!important}
.service-hero-volcano::before{background:linear-gradient(180deg,rgba(3,23,34,.55) 0,rgba(3,23,34,.05) 90px,rgba(3,23,34,.15) 190px,#031722 330px)!important}
.service-hero-volcano .service-hero-grid{padding-top:268px!important;min-height:0!important}
}

/* v63 – mobil: kompaktnější hero podstránek, CTA nad ohybem */
@media(max-width:575px){
.service-hero-volcano .service-hero-bg{height:290px}
.service-hero-volcano::before{background:linear-gradient(180deg,rgba(3,23,34,.55) 0,rgba(3,23,34,.05) 80px,rgba(3,23,34,.15) 170px,#031722 290px)!important}
.service-hero-volcano .service-hero-grid{padding-top:226px!important;padding-bottom:48px!important}
.service-hero-volcano .service-crumb{margin-bottom:8px!important}
.service-hero-volcano .service-kicker{margin-bottom:10px!important}
.service-hero-volcano h1{margin:0 0 18px!important}
.service-hero-volcano .service-lead{line-height:1.6!important;margin-bottom:24px!important}
.service-hero-actions{margin-top:0!important}
}

/* v64 – mobil: bez „Zpět na služby“ (stejný odkaz je v drobečkové navigaci), jemnější úvodní text */
@media(max-width:575px){
.service-hero-volcano .service-crumb{display:none!important}
.service-hero-volcano .service-hero-grid{padding-top:238px!important}
.service-hero-volcano .service-lead{font-size:15px!important;line-height:1.6!important;color:#9fbcc8!important}
}

/* v65 – ŠŤÁVU na homepage ve stejném stylu jako oranžová slova na podstránkách */
.hero h1 em{font-weight:900!important;letter-spacing:-.015em!important;transform:rotate(-5deg)!important}
.hero h1 em{padding:0 6px 9px 0!important}
.hero h1 em::after{left:0!important;right:0!important;bottom:0!important;height:4px!important;border-radius:3px!important}

/* v66 – kontaktní pruh: na užších obrazovkách (sloupec pod sebou) bez pevné výšky úvodu */
@media(max-width:1050px){
.service-page .footer-contact-intro{flex:0 0 auto!important}
}