/* =========================================================
   ZÁKLADNÍ PROMĚNNÉ
========================================================= */

:root {

    --color-primary: #0879ee;
    --color-primary-dark: #005fc7;
    --color-primary-light: #eaf4ff;

    --color-dark: #06182c;
    --color-dark-secondary: #0a223e;
    --color-heading: #071a30;

    --color-text: #526176;
    --color-muted: #7f8b9c;

    --color-border: #dfe7f0;
    --color-background: #f5f8fc;
    --color-white: #ffffff;

    --shadow-small:
        0 12px 30px rgba(7, 26, 48, 0.08);

    --shadow-large:
        0 30px 80px rgba(3, 24, 48, 0.16);

    --radius-small: 14px;
    --radius-medium: 22px;
    --radius-large: 34px;

    --container-width: 1240px;
}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing: border-box;

    margin: 0;
    padding: 0;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: "Manrope", sans-serif;

    color: var(--color-text);

    background: var(--color-white);

    line-height: 1.7;

    overflow-x: hidden;

}


body,
input,
textarea,
select,
button {

    font-family: "Manrope", sans-serif;

}


img {

    display: block;

    max-width: 100%;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input,
textarea,
select {

    border: 0;

    outline: none;

}


button {

    cursor: pointer;

}


ul {

    list-style: none;

}


.container {

    width: min(
        calc(100% - 48px),
        var(--container-width)
    );

    margin-inline: auto;

}


.section {

    position: relative;

    padding: 120px 0;

}


h1,
h2,
h3,
h4 {

    font-family: "Plus Jakarta Sans", sans-serif;

    color: var(--color-heading);

    line-height: 1.15;

}


h2 {

    font-size: clamp(38px, 4.5vw, 64px);

    letter-spacing: -0.045em;

}


h2 span {

    color: var(--color-primary);

}


p {

    font-size: 16px;

}


.lead {

    color: var(--color-heading);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.65;

}


/* =========================================================
   SPOLEČNÉ PRVKY
========================================================= */

.section-label {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: var(--color-primary);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}


.section-label > span {

    display: block;

    width: 32px;

    height: 3px;

    border-radius: 10px;

    background: var(--color-primary);

}


.section-label-light {

    color: #91c7ff;

}


.section-label-light > span {

    background: #2e91f8;

}


.section-heading {

    max-width: 760px;

    margin-bottom: 60px;

}


.section-heading-center {

    margin-right: auto;
    margin-left: auto;

    text-align: center;

}


.section-heading-center .section-label {

    justify-content: center;

}


.section-heading p {

    max-width: 700px;

    margin-top: 24px;

    font-size: 18px;

}


.section-heading-center p {

    margin-right: auto;
    margin-left: auto;

}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 56px;

    padding: 0 27px;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 800;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;

}


.btn i {

    font-size: 21px;

    transition: transform 0.2s ease;

}


.btn:hover {

    transform: translateY(-2px);

}


.btn:hover i {

    transform: translateX(4px);

}


.btn-primary {

    color: var(--color-white);

    background:
        linear-gradient(
            135deg,
            #0a84ff,
            #006bdc
        );

    box-shadow:
        0 14px 35px rgba(0, 119, 238, 0.28);

}


.btn-primary:hover {

    box-shadow:
        0 18px 42px rgba(0, 119, 238, 0.38);

}


.btn-secondary {

    color: var(--color-white);

    border: 1px solid rgba(255, 255, 255, 0.25);

    background: rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(10px);

}


.btn-secondary:hover {

    background: rgba(255, 255, 255, 0.13);

}


.btn-dark {

    margin-top: 32px;

    color: var(--color-white);

    background: var(--color-dark);

}


/* =========================================================
   HLAVIČKA
========================================================= */

.site-header {

    position: fixed;

    z-index: 1000;

    top: 0;
    right: 0;
    left: 0;

    background: rgba(255, 255, 255, 0.95);

    border-bottom: 1px solid rgba(7, 26, 48, 0.08);

    box-shadow:
        0 5px 25px rgba(7, 26, 48, 0.04);

    backdrop-filter: blur(18px);

}


.header-inner {

    display: flex;

    align-items: center;

    min-height: 88px;

}


.header-logo {

    display: flex;

    align-items: center;

    width: 210px;

    overflow: hidden;

}


.header-logo img {

    width: 100%;

    max-height: 66px;

    object-fit: contain;

}


.main-nav {

    display: flex;

    align-items: center;

    gap: 33px;

    margin-left: auto;

}


.main-nav a {

    position: relative;

    color: var(--color-heading);

    font-size: 14px;

    font-weight: 700;

}


.main-nav a::after {

    position: absolute;

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

    width: 0;

    height: 2px;

    margin: auto;

    content: "";

    background: var(--color-primary);

    transition: width 0.2s ease;

}


.main-nav a:hover::after {

    width: 100%;

}


.btn-header {

    min-height: 46px;

    margin-left: 35px;

    padding: 0 20px;

    color: var(--color-white);

    background: var(--color-dark);

}


.mobile-menu-button {

    display: none;

    width: 46px;
    height: 46px;

    margin-left: auto;

    color: var(--color-heading);

    border-radius: 10px;

    background: var(--color-background);

    font-size: 28px;

}


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

.hero {

    position: relative;

    min-height: 900px;

    padding-top: 88px;

    color: var(--color-white);

    background:
        linear-gradient(
            90deg,
            rgba(7,24,45,.92) 0%,
            rgba(7,24,45,.82) 35%,
            rgba(7,24,45,.55) 70%,
            rgba(7,24,45,.30) 100%
        ),
        url(../img/hero.jpg);

    background-size: cover;
    background-position: center;

    overflow: hidden;

}



.hero-grid {

    position: absolute;

    inset: 0;

    opacity: 0.08;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.3) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.3) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

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

}


.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(10px);

    pointer-events: none;

}


.hero-glow-one {

    top: 70px;
    right: -180px;

    width: 580px;
    height: 580px;

    background: rgba(0, 115, 231, 0.11);

}


.hero-glow-two {

    bottom: -250px;
    left: -250px;

    width: 600px;
    height: 600px;

    background: rgba(0, 122, 255, 0.08);

}


.hero-inner {

    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(430px, 0.92fr);

    align-items: center;

    gap: 80px;

    min-height: 720px;

    padding-top: 65px;
    padding-bottom: 95px;

}


.hero-content {

    max-width: 720px;

}


.hero h1 {

    color: var(--color-white);

    font-size: clamp(52px, 6.2vw, 88px);

    letter-spacing: -0.062em;

}


.hero h1 span {

    display: block;

    color: #2491ff;

}


.hero-description {

    max-width: 680px;

    margin-top: 30px;

    color: rgba(255, 255, 255, 0.69);

    font-size: 18px;

    line-height: 1.8;

}


.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 40px;

}


.hero-trust {

    display: flex;

    flex-wrap: wrap;

    gap: 28px;

    margin-top: 48px;

    padding-top: 32px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}


.hero-trust-item {

    display: flex;

    align-items: center;

    gap: 9px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 13px;

    font-weight: 700;

}


.hero-trust-item i {

    color: #2796ff;

    font-size: 21px;

}


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

.hero-visual {

    position: relative;

    min-height: 610px;

}


.supply-card {

    position: absolute;

    top: 40px;
    right: 0;

    width: min(100%, 480px);

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.13);

    border-radius: 28px;

    background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.045)
        );

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.32);

    backdrop-filter: blur(22px);

}


.supply-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 25px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.11);

}


.supply-card-small {

    display: block;

    margin-bottom: 3px;

    color: #3c9cff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.15em;

}


.supply-card-header strong {

    color: var(--color-white);

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 20px;

}


.status-badge {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    color: #a8efc2;

    border: 1px solid rgba(83, 224, 135, 0.2);

    border-radius: 50px;

    background: rgba(57, 191, 108, 0.1);

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

}


.status-badge span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #58dc89;

    box-shadow:
        0 0 0 5px rgba(88, 220, 137, 0.1);

}


.supply-route {

    position: relative;

    display: grid;

    gap: 4px;

    padding: 23px 0;

}


.route-line {

    position: absolute;

    top: 50px;
    bottom: 50px;
    left: 25px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            #2d92f8,
            rgba(45, 146, 248, 0.1)
        );

}


.route-item {

    position: relative;

    display: grid;

    grid-template-columns: 52px 1fr;

    align-items: center;

    gap: 17px;

    min-height: 90px;

}


.route-icon {

    position: relative;
    z-index: 2;

    display: flex;

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

    width: 52px;
    height: 52px;

    color: #65b3ff;

    border: 1px solid rgba(85, 171, 255, 0.22);

    border-radius: 15px;

    background: #0c2949;

    font-size: 24px;

}


.route-item span {

    display: block;

    color: #3c96ed;

    font-size: 10px;

    font-weight: 800;

}


.route-item strong {

    display: block;

    margin-top: 1px;

    color: var(--color-white);

    font-size: 14px;

}


.route-item p {

    margin-top: 2px;

    color: rgba(255, 255, 255, 0.46);

    font-size: 12px;

}


.supply-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.11);

}


.supply-card-footer span,
.supply-card-footer strong {

    display: block;

}


.supply-card-footer span {

    color: rgba(255, 255, 255, 0.45);

    font-size: 11px;

}


.supply-card-footer strong {

    color: var(--color-white);

    font-size: 15px;

}


.supply-card-footer > i {

    color: #3fa0ff;

    font-size: 30px;

}


.floating-card {

    position: absolute;
    z-index: 3;

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 255px;

    padding: 16px 18px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 16px;

    background: rgba(8, 31, 55, 0.87);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(20px);

}


.floating-card-top {

    top: 0;
    left: -55px;

}


.floating-card-bottom {

    right: -40px;
    bottom: 47px;

}


.floating-icon {

    display: flex;

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

    width: 42px;
    height: 42px;

    color: #5eb0ff;

    border-radius: 11px;

    background: rgba(31, 140, 247, 0.15);

    font-size: 22px;

}


.floating-card span,
.floating-card strong {

    display: block;

}


.floating-card span {

    color: rgba(255, 255, 255, 0.45);

    font-size: 10px;

}


.floating-card strong {

    color: var(--color-white);

    font-size: 12px;

}


.hero-bottom {

    position: absolute;

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

    z-index: 3;

    border-top: 1px solid rgba(255, 255, 255, 0.09);

    background: rgba(2, 15, 29, 0.4);

    backdrop-filter: blur(15px);

}


.hero-bottom-inner {

    display: flex;

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

    gap: 24px;

    min-height: 90px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}


.hero-bottom-inner i {

    color: #218ff9;

    font-size: 20px;

}


/* =========================================================
   O NÁS
========================================================= */

.about-section {

    background: var(--color-white);

}


.about-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 110px;

}


.about-heading {

    position: relative;

}


.about-heading::after {

    position: absolute;

    top: 55px;
    right: -55px;

    width: 1px;
    height: 180px;

    content: "";

    background:
        linear-gradient(
            to bottom,
            var(--color-primary),
            transparent
        );

}


.about-content > p + p {

    margin-top: 22px;

}


.about-points {

    display: grid;

    gap: 15px;

    margin-top: 35px;

}


.about-point {

    display: flex;

    align-items: center;

    gap: 13px;

    color: var(--color-heading);

    font-size: 15px;

    font-weight: 700;

}


.about-point i {

    display: flex;

    flex: 0 0 auto;

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

    width: 28px;
    height: 28px;

    color: var(--color-primary);

    border-radius: 50%;

    background: var(--color-primary-light);

    font-size: 19px;

}


/* =========================================================
   SLUŽBY
========================================================= */

.services-section {

    background: var(--color-background);

}


.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

}


.service-card {

    position: relative;

    min-height: 570px;

    padding: 38px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-medium);

    background: var(--color-white);

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

    overflow: hidden;

}


.service-card:hover {

    transform: translateY(-8px);

    border-color: #b9d8fa;

    box-shadow: var(--shadow-large);

}


.service-card-featured {

    color: rgba(255, 255, 255, 0.66);

    border-color: transparent;

    background:
        linear-gradient(
            145deg,
            #071a30,
            #0a2a4c
        );

}


.service-card-featured h3 {

    color: var(--color-white);

}


.service-card-featured ul li {

    color: rgba(255, 255, 255, 0.78);

    border-color: rgba(255, 255, 255, 0.1);

}


.service-number {

    position: absolute;

    top: 22px;
    right: 28px;

    color: rgba(7, 26, 48, 0.06);

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 70px;

    font-weight: 800;

    line-height: 1;

}


.service-card-featured .service-number {

    color: rgba(255, 255, 255, 0.07);

}


.service-icon {

    display: flex;

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

    width: 66px;
    height: 66px;

    margin-bottom: 31px;

    color: var(--color-primary);

    border-radius: 18px;

    background: var(--color-primary-light);

    font-size: 31px;

}


.service-card-featured .service-icon {

    color: #63b3ff;

    background: rgba(24, 135, 246, 0.13);

}


.service-card h3 {

    margin-bottom: 19px;

    font-size: 25px;

    letter-spacing: -0.025em;

}


.service-card > p {

    min-height: 110px;

}


.service-card ul {

    margin-top: 24px;

}


.service-card ul li {

    position: relative;

    padding: 11px 0 11px 21px;

    color: var(--color-heading);

    border-bottom: 1px solid var(--color-border);

    font-size: 13px;

    font-weight: 700;

}


.service-card ul li::before {

    position: absolute;

    top: 19px;
    left: 0;

    width: 6px;
    height: 6px;

    content: "";

    border-radius: 50%;

    background: var(--color-primary);

}


.service-card > a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 27px;

    color: var(--color-primary);

    font-size: 14px;

    font-weight: 800;

}


.service-card > a i {

    font-size: 20px;

}


/* =========================================================
   PROCES
========================================================= */

.process-section {

    padding-top: 0;

    background: var(--color-background);

}


.process-box {

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 80px;

    padding: 75px;

    color: rgba(255, 255, 255, 0.64);

    border-radius: var(--radius-large);

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(12, 126, 240, 0.23),
            transparent 28%
        ),
        linear-gradient(
            140deg,
            #06172a,
            #09233f
        );

    box-shadow: var(--shadow-large);

}


.process-heading h2 {

    color: var(--color-white);

}


.process-heading p {

    margin-top: 25px;

}


.process-list {

    display: grid;

}


.process-item {

    display: grid;

    grid-template-columns: 60px 1fr;

    gap: 22px;

    padding: 24px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}


.process-item:first-child {

    padding-top: 0;

}


.process-item:last-child {

    padding-bottom: 0;

    border-bottom: 0;

}


.process-step {

    display: flex;

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

    width: 52px;
    height: 52px;

    color: #66b6ff;

    border: 1px solid rgba(89, 174, 255, 0.25);

    border-radius: 14px;

    background: rgba(25, 135, 241, 0.12);

    font-size: 12px;

    font-weight: 800;

}


.process-item h3 {

    margin-bottom: 7px;

    color: var(--color-white);

    font-size: 19px;

}


.process-item p {

    font-size: 14px;

}


/* =========================================================
   MATERIÁLY
========================================================= */

.materials-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 100px;

}


.materials-content > p {

    margin-top: 22px;

}


.materials-list {

    display: grid;

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

    gap: 18px;

}


.material-card {

    min-height: 240px;

    padding: 29px;

    border: 1px solid var(--color-border);

    border-radius: 20px;

    background: var(--color-white);

    box-shadow: var(--shadow-small);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease;

}


.material-card:hover {

    transform: translateY(-5px);

    border-color: #b0d5fa;

}


.material-icon {

    display: flex;

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

    width: 57px;
    height: 57px;

    margin-bottom: 23px;

    color: var(--color-primary);

    border-radius: 15px;

    background: var(--color-primary-light);

    font-size: 25px;

    font-weight: 800;

}


.material-card h3 {

    margin-bottom: 10px;

    font-size: 20px;

}


.material-card p {

    font-size: 14px;

}


/* =========================================================
   PRODUKTY
========================================================= */

.products-section {

    background: var(--color-background);

}


.products-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

}


.product-item {

    display: flex;

    align-items: center;

    gap: 17px;

    min-height: 95px;

    padding: 21px 25px;

    color: var(--color-heading);

    border: 1px solid var(--color-border);

    border-radius: 16px;

    background: var(--color-white);

    font-size: 15px;

    font-weight: 800;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.product-item:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-small);

}


.product-item i {

    display: flex;

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

    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    color: var(--color-primary);

    border-radius: 13px;

    background: var(--color-primary-light);

    font-size: 24px;

}


/* =========================================================
   VÝHODY
========================================================= */

.benefits-section {

    color: rgba(255, 255, 255, 0.62);

    background:
        linear-gradient(
            135deg,
            #041426,
            #09233e
        );

}


.benefits-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 110px;

}


.benefits-left h2 {

    color: var(--color-white);

}


.benefits-left > p {

    margin-top: 28px;

    font-size: 17px;

}


.benefits-highlight {

    position: relative;

    margin-top: 40px;

    padding: 27px 28px 27px 72px;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 17px;

    background: rgba(255, 255, 255, 0.045);

}


.benefits-highlight i {

    position: absolute;

    top: 29px;
    left: 26px;

    color: #2d94f9;

    font-size: 29px;

}


.benefits-highlight p {

    color: rgba(255, 255, 255, 0.83);

    font-size: 15px;

    font-weight: 600;

}


.benefits-list {

    display: grid;

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

    gap: 16px;

}


.benefit-item {

    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.045);

    transition:
        transform 0.22s ease,
        background 0.22s ease;

}


.benefit-item:hover {

    transform: translateY(-5px);

    background: rgba(255, 255, 255, 0.075);

}


.benefit-icon {

    display: flex;

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

    width: 52px;
    height: 52px;

    margin-bottom: 22px;

    color: #62b3ff;

    border-radius: 14px;

    background: rgba(30, 139, 247, 0.14);

    font-size: 27px;

}


.benefit-item h3 {

    margin-bottom: 10px;

    color: var(--color-white);

    font-size: 18px;

}


.benefit-item p {

    font-size: 13px;

}


/* =========================================================
   EVROPA
========================================================= */

.europe-section {

    position: relative;

    overflow: hidden;

}


.europe-pattern {

    position: absolute;

    top: -50px;
    right: -100px;

    width: 650px;
    height: 650px;

    opacity: 0.045;

    border: 100px solid var(--color-primary);

    border-radius: 50%;

}


.europe-inner {

    position: relative;
    z-index: 2;

    display: grid;

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

    align-items: center;

    gap: 90px;

}


.europe-content p {

    max-width: 650px;

    margin-top: 26px;

    font-size: 18px;

}


.europe-stats {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

}


.stat-card {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-height: 185px;

    padding: 25px;

    border: 1px solid var(--color-border);

    border-radius: 18px;

    background: var(--color-background);

}


.stat-card strong {

    color: var(--color-primary);

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 42px;

    letter-spacing: -0.05em;

}


.stat-card span {

    color: var(--color-heading);

    font-size: 13px;

    font-weight: 800;

}


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

.contact-section {

    padding-top: 40px;

}


.contact-box {

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 70px;

    padding: 75px;

    border-radius: var(--radius-large);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(20, 130, 238, 0.24),
            transparent 35%
        ),
        linear-gradient(
            140deg,
            #06182c,
            #092746
        );

    box-shadow: var(--shadow-large);

}


.contact-content h2 {

    color: var(--color-white);

}


.contact-content > p {

    margin-top: 25px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 17px;

}


.contact-direct {

    display: grid;

    gap: 13px;

    margin-top: 38px;

}


.contact-direct a {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.05);

}


.contact-direct a > i {

    display: flex;

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

    width: 45px;
    height: 45px;

    color: #65b5ff;

    border-radius: 12px;

    background: rgba(23, 136, 246, 0.15);

    font-size: 22px;

}


.contact-direct span,
.contact-direct strong {

    display: block;

}


.contact-direct span {

    color: rgba(255, 255, 255, 0.44);

    font-size: 11px;

}


.contact-direct strong {

    color: var(--color-white);

    font-size: 14px;

}


.contact-form {

    padding: 35px;

    border-radius: 22px;

    background: var(--color-white);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.2);

}


.form-row {

    display: grid;

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

    gap: 14px;

}


.form-group {

    margin-bottom: 17px;

}


.form-group label {

    display: block;

    margin-bottom: 7px;

    color: var(--color-heading);

    font-size: 12px;

    font-weight: 800;

}


.form-group input,
.form-group select,
.form-group textarea {

    display: block;

    width: 100%;

    color: var(--color-heading);

    border: 1px solid var(--color-border);

    border-radius: 10px;

    background: #f9fbfd;

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.form-group input,
.form-group select {

    height: 52px;

    padding: 0 15px;

}


.form-group textarea {

    min-height: 125px;

    padding: 14px 15px;

    resize: vertical;

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: #72b8fa;

    box-shadow:
        0 0 0 4px rgba(0, 126, 246, 0.08);

}


.form-consent {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 4px 0 20px;

    color: var(--color-muted);

    font-size: 11px;

    cursor: pointer;

}


.form-consent input {

    width: 16px;
    height: 16px;

    margin-top: 3px;

    accent-color: var(--color-primary);

}


.btn-form {

    width: 100%;

    border: 0;

}


/* =========================================================
   PATIČKA
========================================================= */

.site-footer {

    margin-top: 120px;

    color: rgba(255, 255, 255, 0.54);

    background: #03101e;

}


.footer-top {

    display: grid;

    grid-template-columns: 1.6fr 0.8fr 1fr 1fr;

    gap: 60px;

    padding-top: 80px;
    padding-bottom: 65px;

}


.footer-logo {

    display: block;

    width: 225px;

    padding: 8px;

    border-radius: 10px;

    background: var(--color-white);

}


.footer-logo img {

    width: 100%;

}


.footer-company p {

    max-width: 390px;

    margin-top: 24px;

    font-size: 14px;

}


.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;

}


.footer-column h3 {

    margin-bottom: 12px;

    color: var(--color-white);

    font-size: 14px;

}


.footer-column a,
.footer-column p {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    transition: color 0.2s ease;

}


.footer-column a:hover {

    color: var(--color-white);

}


.footer-contact i {

    color: #419ef7;

    font-size: 18px;

}


.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 76px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    font-size: 12px;

}


.footer-bottom div {

    display: flex;

    gap: 24px;

}


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

@media (max-width: 1120px) {

    .main-nav {

        display: none;

    }


    .btn-header {

        margin-left: auto;

    }


    .hero {

        min-height: auto;

    }


    .hero-inner {

        grid-template-columns: 1fr;

        gap: 20px;

        padding-top: 110px;
        padding-bottom: 150px;

    }


    .hero-content {

        max-width: 850px;

    }


    .hero-visual {

        width: min(100%, 650px);

        min-height: 620px;

        margin: 30px auto 0;

    }


    .supply-card {

        right: 50%;

        transform: translateX(50%);

    }


    .floating-card-top {

        left: 0;

    }


    .floating-card-bottom {

        right: 0;

    }


    .services-grid {

        grid-template-columns: 1fr 1fr;

    }


    .service-card:last-child {

        grid-column: 1 / -1;

        min-height: auto;

    }


    .process-box {

        padding: 55px;

    }


    .materials-grid,
    .benefits-grid,
    .europe-inner,
    .contact-box {

        gap: 55px;

    }


    .footer-top {

        grid-template-columns: 1.5fr 1fr 1fr;

    }


    .footer-contact {

        grid-column: 2 / 4;

    }

}


/* =========================================================
   MENŠÍ TABLET
========================================================= */

@media (max-width: 900px) {

    .section {

        padding: 90px 0;

    }


    .about-grid,
    .process-box,
    .materials-grid,
    .benefits-grid,
    .europe-inner,
    .contact-box {

        grid-template-columns: 1fr;

    }


    .about-grid {

        gap: 45px;

    }


    .about-heading::after {

        display: none;

    }


    .process-box {

        gap: 50px;

    }


    .materials-grid {

        gap: 55px;

    }


    .products-grid {

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

    }


    .europe-stats {

        max-width: 650px;

    }


    .contact-box {

        padding: 50px;

    }

}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 700px) {

    .container {

        width: min(
            calc(100% - 30px),
            var(--container-width)
        );

    }


    .section {

        padding: 72px 0;

    }


    h2 {

        font-size: 37px;

    }


    .lead {

        font-size: 17px;

    }


    .site-header {

        position: absolute;

        background: rgba(255, 255, 255, 0.97);

    }


    .header-inner {

        min-height: 72px;

    }


    .header-logo {

        width: 170px;

    }


    .btn-header {

        display: none;

    }


    .mobile-menu-button {

        display: flex;

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

    }


    .hero {

        padding-top: 72px;

    }


    .hero-inner {

        min-height: auto;

        padding-top: 72px;
        padding-bottom: 120px;

    }


    .hero h1 {

        font-size: 48px;

    }


    .hero-description {

        font-size: 16px;

    }


    .hero-actions {

        display: grid;

    }


    .hero-actions .btn {

        width: 100%;

    }


    .hero-trust {

        display: grid;

        gap: 14px;

    }


    .hero-visual {

        min-height: 585px;

        margin-top: 20px;

    }


    .supply-card {

        top: 20px;

        width: 100%;

        padding: 22px;

    }


    .route-item {

        grid-template-columns: 46px 1fr;

        gap: 13px;

    }


    .route-icon {

        width: 46px;
        height: 46px;

        font-size: 21px;

    }


    .route-line {

        left: 22px;

    }


    .floating-card {

        display: none;

    }


    .hero-bottom {

        position: relative;

    }


    .hero-bottom-inner {

        justify-content: flex-start;

        min-height: 68px;

        overflow-x: auto;

        white-space: nowrap;

    }


    .about-grid {

        gap: 35px;

    }


    .services-grid {

        grid-template-columns: 1fr;

    }


    .service-card,
    .service-card:last-child {

        grid-column: auto;

        min-height: auto;

        padding: 30px;

    }


    .service-card > p {

        min-height: auto;

    }


    .process-section {

        padding-bottom: 0;

    }


    .process-box {

        width: calc(100% + 30px);

        margin-left: -15px;

        padding: 45px 25px;

        border-radius: 0;

    }


    .process-item {

        grid-template-columns: 48px 1fr;

        gap: 15px;

    }


    .process-step {

        width: 44px;
        height: 44px;

    }


    .materials-list {

        grid-template-columns: 1fr;

    }


    .material-card {

        min-height: auto;

    }


    .products-grid {

        grid-template-columns: 1fr;

    }


    .benefits-list {

        grid-template-columns: 1fr;

    }


    .europe-stats {

        grid-template-columns: 1fr;

    }


    .stat-card {

        min-height: 125px;

    }


    .contact-section {

        padding-top: 0;

    }


    .contact-box {

        width: calc(100% + 30px);

        margin-left: -15px;

        padding: 45px 22px;

        border-radius: 0;

    }


    .contact-form {

        padding: 24px 18px;

    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .site-footer {

        margin-top: 70px;

    }


    .footer-top {

        grid-template-columns: 1fr;

        gap: 38px;

        padding-top: 60px;

    }


    .footer-contact {

        grid-column: auto;

    }


    .footer-bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        padding: 25px 0;

    }


    .footer-bottom div {

        flex-wrap: wrap;

        gap: 15px;

    }

}


/* =========================================================
   MALÉ MOBILY
========================================================= */

@media (max-width: 420px) {

    .hero h1 {

        font-size: 41px;

    }


    h2 {

        font-size: 33px;

    }


    .header-logo {

        width: 150px;

    }


    .supply-card {

        padding: 18px;

    }


    .route-item p {

        font-size: 11px;

    }


    .service-card {

        padding: 26px 23px;

    }

}


.service-card-featured ul li {
    color: #ffffff !important;
}


/* =========================================================
   VIDEO A GALERIE VÝROBY
========================================================= */

.production-gallery-section {

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f8fc 100%
        );

}


.production-gallery-heading {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.75fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 50px;

}


.production-gallery-heading p {

    max-width: 600px;

    padding-bottom: 7px;

    font-size: 17px;

    line-height: 1.8;

}


/* =========================================================
   HLAVNÍ ROZLOŽENÍ
========================================================= */

.production-media-layout {

    display: grid;

    grid-template-columns:
        minmax(280px, 30%)
        minmax(0, 70%);

    gap: 18px;

    min-height: 640px;

}


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

.production-video {

    position: relative;

    min-height: 640px;

    border-radius: 26px;

    background: #06182c;

    box-shadow:
        0 24px 65px rgba(7, 26, 48, 0.18);

    overflow: hidden;

}


.production-video video {

    display: block;

    width: 100%;
    height: 100%;

    min-height: 640px;

    object-fit: cover;

}


.production-video-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 20, 38, 0.05) 20%,
            rgba(4, 20, 38, 0.15) 50%,
            rgba(4, 20, 38, 0.9) 100%
        );

    pointer-events: none;

}


.production-video-content {

    position: absolute;

    right: 25px;
    bottom: 27px;
    left: 25px;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 14px;

}


.production-video-icon {

    display: flex;

    flex: 0 0 auto;

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

    width: 48px;
    height: 48px;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.24);

    border-radius: 50%;

    background: rgba(8, 121, 238, 0.88);

    box-shadow:
        0 10px 30px rgba(8, 121, 238, 0.35);

    font-size: 27px;

    backdrop-filter: blur(10px);

}


.production-video-content span,
.production-video-content strong {

    display: block;

}


.production-video-content span {

    margin-bottom: 2px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

}


.production-video-content strong {

    color: #ffffff;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 16px;

    line-height: 1.35;

}


.production-video-badge {

    position: absolute;

    top: 20px;
    left: 20px;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 13px;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 50px;

    background: rgba(5, 24, 44, 0.65);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    backdrop-filter: blur(12px);

}


.production-video-badge span {

    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #168bff;

    box-shadow:
        0 0 0 5px rgba(22, 139, 255, 0.18);

}


/* =========================================================
   MŘÍŽKA FOTOGRAFIÍ
========================================================= */

.production-gallery-grid {

    display: grid;

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

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

    gap: 18px;

}


.production-gallery-item {

    position: relative;

    display: block;

    min-height: 0;

    border-radius: 21px;

    background: #dfe7f0;

    box-shadow:
        0 15px 35px rgba(7, 26, 48, 0.1);

    overflow: hidden;

}


.production-gallery-item::after {

    position: absolute;

    inset: 0;

    content: "";

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: inherit;

    pointer-events: none;

}


.production-gallery-item img {

    display: block;

    width: 100%;
    height: 100%;

    min-height: 310px;

    object-fit: cover;

    transition:
        transform 0.5s ease,
        filter 0.4s ease;

}


.production-gallery-item:hover img {

    transform: scale(1.07);

    filter: brightness(0.72);

}


.production-gallery-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    flex-direction: column;

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

    gap: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(4, 20, 38, 0.02),
            rgba(4, 20, 38, 0.62)
        );

    opacity: 0;

    transition: opacity 0.3s ease;

}


.production-gallery-item:hover .production-gallery-overlay {

    opacity: 1;

}


.production-gallery-overlay i {

    display: flex;

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

    width: 50px;
    height: 50px;

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    background: rgba(8, 121, 238, 0.85);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.25);

    font-size: 27px;

    backdrop-filter: blur(10px);

}


.production-gallery-overlay span {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}


/* =========================================================
   SPODNÍ INFORMAČNÍ ŘÁDEK
========================================================= */

.production-gallery-bottom {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1px;

    margin-top: 18px;

    border: 1px solid var(--color-border);

    border-radius: 18px;

    background: var(--color-border);

    overflow: hidden;

}


.production-gallery-bottom-item {

    display: flex;

    align-items: center;

    gap: 16px;

    min-height: 98px;

    padding: 22px 27px;

    background: #ffffff;

}


.production-gallery-bottom-item > i {

    display: flex;

    flex: 0 0 auto;

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

    width: 48px;
    height: 48px;

    color: var(--color-primary);

    border-radius: 13px;

    background: var(--color-primary-light);

    font-size: 25px;

}


.production-gallery-bottom-item strong,
.production-gallery-bottom-item span {

    display: block;

}


.production-gallery-bottom-item strong {

    margin-bottom: 3px;

    color: var(--color-heading);

    font-size: 14px;

}


.production-gallery-bottom-item span {

    color: var(--color-muted);

    font-size: 11px;

    line-height: 1.5;

}


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

@media (max-width: 1050px) {

    .production-gallery-heading {

        grid-template-columns: 1fr;

        gap: 22px;

    }


    .production-gallery-heading p {

        max-width: 760px;

        padding-bottom: 0;

    }


    .production-media-layout {

        grid-template-columns:
            minmax(250px, 34%)
            minmax(0, 66%);

        min-height: 600px;

    }


    .production-video,
    .production-video video {

        min-height: 600px;

    }


    .production-gallery-grid {

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

        grid-template-rows: repeat(3, 1fr);

    }


    .production-gallery-item img {

        min-height: 188px;

    }

}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 700px) {

    .production-gallery-heading {

        margin-bottom: 32px;

    }


    .production-gallery-heading p {

        font-size: 15px;

    }


    .production-media-layout {

        display: block;

        min-height: auto;

    }


    .production-video {

        min-height: 520px;

        margin-bottom: 14px;

        border-radius: 20px;

    }


    .production-video video {

        min-height: 520px;

    }


    .production-gallery-grid {

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

        grid-template-rows: auto;

        gap: 12px;

    }


    .production-gallery-item {

        aspect-ratio: 1 / 1.15;

        border-radius: 16px;

    }


    .production-gallery-item img {

        min-height: 0;

    }


    .production-gallery-overlay {

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

        padding: 12px;

        opacity: 1;

        background:
            linear-gradient(
                180deg,
                transparent 50%,
                rgba(4, 20, 38, 0.55)
            );

    }


    .production-gallery-overlay i {

        width: 38px;
        height: 38px;

        font-size: 21px;

    }


    .production-gallery-overlay span {

        display: none;

    }


    .production-gallery-bottom {

        grid-template-columns: 1fr;

        margin-top: 14px;

    }


    .production-gallery-bottom-item {

        min-height: 88px;

        padding: 18px 20px;

    }

}


/* =========================================================
   MALÉ MOBILY
========================================================= */

@media (max-width: 420px) {

    .production-video,
    .production-video video {

        min-height: 460px;

    }


    .production-video-content {

        right: 18px;
        bottom: 20px;
        left: 18px;

    }


    .production-video-badge {

        top: 15px;
        left: 15px;

    }


    .production-gallery-grid {

        gap: 9px;

    }


    .production-gallery-item {

        border-radius: 13px;

    }

}


/* =========================================================
   FIREMNÍ ÚDAJE A MAPA SKLADU
========================================================= */

.company-location-section {

    position: relative;

    padding: 0 0 120px;

    background: #ffffff;

}


.company-info-bar {

    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        1.2fr
        0.45fr
        0.55fr
        1.8fr;

    align-items: center;

    gap: 1px;

    margin-bottom: 22px;

    border: 1px solid var(--color-border);

    border-radius: 18px;

    background: var(--color-border);

    box-shadow:
        0 14px 38px rgba(7, 26, 48, 0.07);

    overflow: hidden;

}


.company-info-main,
.company-info-item {

    min-height: 105px;

    padding: 22px 25px;

    background: #ffffff;

}


.company-info-main {

    display: flex;

    align-items: center;

    gap: 15px;

}


.company-info-logo-icon {

    display: flex;

    flex: 0 0 auto;

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

    width: 52px;
    height: 52px;

    color: #ffffff;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-primary-dark)
        );

    font-size: 26px;

    box-shadow:
        0 10px 25px rgba(8, 121, 238, 0.25);

}


.company-info-main span,
.company-info-main strong,
.company-info-item span,
.company-info-item strong {

    display: block;

}


.company-info-main span,
.company-info-item span {

    margin-bottom: 4px;

    color: var(--color-muted);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.company-info-main strong {

    color: var(--color-heading);

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 20px;

}


.company-info-item {

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.company-info-item strong {

    color: var(--color-heading);

    font-size: 14px;

}


.warehouse-map-box {

    display: grid;

    grid-template-columns:
        minmax(320px, 0.72fr)
        minmax(0, 1.28fr);

    min-height: 560px;

    border-radius: 28px;

    background: #f5f8fc;

    box-shadow:
        0 25px 70px rgba(7, 26, 48, 0.13);

    overflow: hidden;

}


.warehouse-map-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 60px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(8, 121, 238, 0.1),
            transparent 38%
        ),
        #f5f8fc;

}


.warehouse-map-info h2 {

    font-size: clamp(36px, 4vw, 54px);

}


.warehouse-map-info > p {

    margin-top: 23px;

    font-size: 16px;

}


.warehouse-address {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 30px;

    padding: 17px;

    border: 1px solid var(--color-border);

    border-radius: 14px;

    background: #ffffff;

}


.warehouse-address > i {

    display: flex;

    flex: 0 0 auto;

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

    width: 47px;
    height: 47px;

    color: var(--color-primary);

    border-radius: 12px;

    background: var(--color-primary-light);

    font-size: 25px;

}


.warehouse-address span,
.warehouse-address strong {

    display: block;

}


.warehouse-address span {

    color: var(--color-muted);

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

}


.warehouse-address strong {

    margin-top: 2px;

    color: var(--color-heading);

    font-size: 14px;

}


.warehouse-navigation-button {

    align-self: flex-start;

}


.warehouse-map {

    position: relative;

    min-height: 560px;

    background: #dfe7f0;

}


.warehouse-map::after {

    position: absolute;

    inset: 0;

    content: "";

    box-shadow:
        inset 20px 0 35px rgba(6, 24, 44, 0.08);

    pointer-events: none;

}


.warehouse-map iframe {

    display: block;

    width: 100%;
    height: 100%;

    min-height: 560px;

    border: 0;

    filter: saturate(0.9) contrast(1.02);

}


/* =========================================================
   KONTAKTY A MAPA – TABLET
========================================================= */

@media (max-width: 1050px) {

    .company-info-bar {

        grid-template-columns: 1fr 1fr;

    }


    .company-info-main,
    .company-info-address {

        grid-column: span 2;

    }


    .warehouse-map-info {

        padding: 45px;

    }

}


@media (max-width: 900px) {

    .warehouse-map-box {

        grid-template-columns: 1fr;

    }


    .warehouse-map {

        min-height: 450px;

    }


    .warehouse-map iframe {

        min-height: 450px;

    }

}


/* =========================================================
   KONTAKTY A MAPA – MOBIL
========================================================= */

@media (max-width: 700px) {

    .contact-form-column {

        padding: 24px 18px;

    }


    .contact-person {

        grid-template-columns: 46px 1fr 22px;

        padding: 14px;

    }


    .contact-person-icon {

        width: 46px;
        height: 46px;

        font-size: 24px;

    }


    .contact-person-content strong {

        font-size: 14px;

    }


    .contact-person-content small {

        font-size: 10px;

    }


    .contact-email-list a {

        padding-right: 0;
        padding-left: 0;

    }


    .contact-email-list strong {

        font-size: 12px;

        overflow-wrap: anywhere;

    }


    .company-location-section {

        padding-bottom: 72px;

    }


    .company-info-bar {

        grid-template-columns: 1fr;

        gap: 1px;

        border-radius: 16px;

    }


    .company-info-main,
    .company-info-item,
    .company-info-address {

        grid-column: auto;

        min-height: auto;

        padding: 18px 20px;

    }


    .warehouse-map-box {

        width: calc(100% + 30px);

        margin-left: -15px;

        border-radius: 0;

    }


    .warehouse-map-info {

        padding: 45px 22px;

    }


    .warehouse-map-info h2 {

        font-size: 36px;

    }


    .warehouse-navigation-button {

        width: 100%;

    }


    .warehouse-map,
    .warehouse-map iframe {

        min-height: 390px;

    }

}


/* =========================================================
   KONTAKTNÍ OSOBY
========================================================= */

.contact-persons {

    display: grid;

    gap: 14px;

    margin-top: 34px;

}


.contact-person {

    display: grid;

    grid-template-columns: 54px minmax(0, 1fr) 28px;

    align-items: center;

    gap: 16px;

    min-height: 94px;

    padding: 17px 18px;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.07);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;

}


.contact-person:hover {

    transform: translateX(4px);

    color: #ffffff !important;

    border-color: rgba(75, 169, 255, 0.45);

    background: rgba(255, 255, 255, 0.11);

}


.contact-person-whatsapp:hover {

    border-color: rgba(37, 211, 102, 0.5);

}


.contact-person-icon {

    display: flex;

    flex: 0 0 auto;

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

    width: 54px;
    height: 54px;

    color: #ffffff;

    border-radius: 15px;

    background: rgba(33, 145, 255, 0.2);

    font-size: 28px;

}


.contact-person-whatsapp .contact-person-icon {

    color: #ffffff;

    background: rgba(37, 211, 102, 0.24);

}


.contact-person-content {

    min-width: 0;

}


.contact-person-content span,
.contact-person-content strong,
.contact-person-content small {

    display: block;

    margin: 0;

    color: #ffffff !important;

    line-height: 1.35;

}


.contact-person-content span {

    margin-bottom: 4px;

    color: rgba(255, 255, 255, 0.68) !important;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;

}


.contact-person-content strong {

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: -0.01em;

}


.contact-person-content small {

    margin-top: 4px;

    color: rgba(255, 255, 255, 0.62) !important;

    font-size: 11px;

    font-weight: 500;

}


.contact-person-arrow {

    color: rgba(255, 255, 255, 0.62) !important;

    font-size: 24px;

    transition:
        transform 0.2s ease,
        color 0.2s ease;

}


.contact-person:hover .contact-person-arrow {

    transform: translateX(4px);

    color: #ffffff !important;

}


/* =========================================================
   E-MAILOVÉ KONTAKTY
========================================================= */

.contact-email-list {

    display: grid;

    gap: 10px;

    margin-top: 20px;

}


.contact-email-list a {

    display: grid;

    grid-template-columns: 44px minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    min-height: 70px;

    padding: 12px 15px;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 13px;

    background: rgba(255, 255, 255, 0.045);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;

}


.contact-email-list a:hover {

    transform: translateX(4px);

    color: #ffffff !important;

    border-color: rgba(75, 169, 255, 0.35);

    background: rgba(255, 255, 255, 0.09);

}


.contact-email-list > a > i {

    display: flex;

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

    width: 44px;
    height: 44px;

    color: #ffffff;

    border-radius: 12px;

    background: rgba(33, 145, 255, 0.18);

    font-size: 22px;

}


.contact-email-list a > div {

    min-width: 0;

}


.contact-email-list span,
.contact-email-list strong {

    display: block;

    margin: 0;

    color: #ffffff !important;

    line-height: 1.35;

}


.contact-email-list span {

    margin-bottom: 3px;

    color: rgba(255, 255, 255, 0.62) !important;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}


.contact-email-list strong {

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 13px;

    font-weight: 700;

    overflow-wrap: anywhere;

}


/* =========================================================
   NADPIS NAD FORMULÁŘEM
========================================================= */

.contact-form-column {

    display: flex;

    flex-direction: column;

    padding: 36px;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.2);

}


.contact-form-heading {

    margin-bottom: 26px;

    padding-bottom: 22px;

    border-bottom: 1px solid var(--color-border);

}


.contact-form-heading > span {

    display: block;

    margin-bottom: 7px;

    color: var(--color-primary);

    font-size: 11px;

    font-weight: 800;

    line-height: 1.3;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.contact-form-heading h3 {

    margin: 0;

    color: var(--color-heading);

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 32px;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.035em;

}


.contact-form-heading p {

    max-width: 470px;

    margin: 10px 0 0;

    color: var(--color-text);

    font-size: 14px;

    font-weight: 500;

    line-height: 1.65;

}


.contact-form-column .contact-form {

    flex: 1;

    padding: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 700px) {

    .contact-person {

        grid-template-columns: 48px minmax(0, 1fr) 22px;

        gap: 12px;

        min-height: 86px;

        padding: 14px;

    }


    .contact-person-icon {

        width: 48px;
        height: 48px;

        border-radius: 13px;

        font-size: 25px;

    }


    .contact-person-content span {

        font-size: 9px;

    }


    .contact-person-content strong {

        font-size: 15px;

    }


    .contact-person-content small {

        font-size: 10px;

    }


    .contact-email-list a {

        grid-template-columns: 40px minmax(0, 1fr);

        gap: 11px;

        min-height: 64px;

        padding: 11px 12px;

    }


    .contact-email-list > a > i {

        width: 40px;
        height: 40px;

        font-size: 20px;

    }


    .contact-email-list strong {

        font-size: 12px;

    }


    .contact-form-column {

        padding: 25px 20px;

    }


    .contact-form-heading {

        margin-bottom: 22px;

        padding-bottom: 18px;

    }


    .contact-form-heading h3 {

        font-size: 28px;

    }


    .contact-form-heading p {

        font-size: 13px;

    }

}


.footer-counter{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-top:30px;

    opacity:.65;

    font-size:12px;

    color:#c8d2de;

    transition:.2s;

}

.footer-counter:hover{

    opacity:1;

}

.footer-counter i{

    color:#4aa3ff;

    font-size:15px;

}

.footer-counter strong{

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.05em;

}

/* =========================================================
   GDPR
========================================================= */

.privacy-page{

    padding:120px 0;

    background:#f6f8fb;

}

.privacy-header{

    max-width:900px;

    margin:0 auto 60px;

    text-align:center;

}

.privacy-label{

    display:inline-block;

    margin-bottom:15px;

    padding:8px 18px;

    border-radius:40px;

    background:#e9f3ff;

    color:var(--color-primary);

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.privacy-header h1{

    margin-bottom:20px;

}

.privacy-header p{

    font-size:18px;

    color:var(--color-muted);

    line-height:1.8;

}

.privacy-card{

    margin-bottom:25px;

    padding:35px;

    border-radius:22px;

    background:#fff;

    box-shadow:0 15px 45px rgba(0,0,0,.05);

}

.privacy-card h2{

    margin-bottom:20px;

    color:var(--color-heading);

}

.privacy-card p{

    line-height:1.9;

}

.privacy-card ul{

    padding-left:22px;

}

.privacy-card li{

    margin-bottom:12px;

    line-height:1.8;

}

.privacy-table{

    width:100%;

    border-collapse:collapse;

}

.privacy-table td{

    padding:15px 0;

    border-bottom:1px solid #eceff3;

}

.privacy-table td:first-child{

    width:260px;

    color:var(--color-muted);

    font-weight:600;

}

@media(max-width:768px){

    .privacy-page{

        padding:80px 0;

    }

    .privacy-card{

        padding:25px;

    }

    .privacy-table td{

        display:block;

        width:100%;

        padding:8px 0;

        border:none;

    }

    .privacy-table tr{

        display:block;

        padding:15px 0;

        border-bottom:1px solid #eceff3;

    }

}


.footer-visitor-counter {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 5px;

    color: rgba(255, 255, 255, 0.42);

    font-size: 11px;

    line-height: 1.4;

}


.footer-visitor-counter i {

    color: rgba(74, 163, 255, 0.72);

    font-size: 12px;

}


.footer-visitor-counter span {

    color: rgba(255, 255, 255, 0.42);

    font-size: 11px;

}


.footer-visitor-counter strong {

    color: rgba(255, 255, 255, 0.67);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.03em;

}

/* =========================================================
   MOBILNÍ MENU
========================================================= */

.mobile-menu-button {

    display: none;

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

    width: 46px;
    height: 46px;

    padding: 0;

    color: var(--color-heading);

    border: 1px solid rgba(7, 24, 45, 0.12);

    border-radius: 12px;

    background: #ffffff;

    font-size: 27px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;

}


.mobile-menu-button:hover,
.mobile-menu-button.open {

    color: #ffffff;

    border-color: var(--color-primary);

    background: var(--color-primary);

}


.mobile-menu-button i {

    line-height: 1;

}


@media (max-width: 900px) {

    .site-header {

        position: relative;

        z-index: 1000;

    }


    .header-inner {

        position: relative;

        min-height: 78px;

    }


    .mobile-menu-button {

        display: flex;

        flex: 0 0 auto;

        margin-left: auto;

    }


    .header-inner > .btn-header {

        display: none;

    }


    .main-nav {

        position: absolute;

        top: calc(100% + 10px);
        right: 0;
        left: 0;

        z-index: 1001;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 10px;

        border: 1px solid rgba(7, 24, 45, 0.1);

        border-radius: 18px;

        background: #ffffff;

        box-shadow:
            0 22px 55px rgba(7, 24, 45, 0.18);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: translateY(-10px);

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;

    }


    .main-nav.open {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);

    }


    .main-nav a {

        display: flex;

        align-items: center;

        min-height: 50px;

        padding: 0 16px;

        color: var(--color-heading);

        border-radius: 11px;

        font-size: 15px;

        font-weight: 700;

    }


    .main-nav a:hover {

        color: var(--color-primary);

        background: rgba(8, 121, 238, 0.08);

    }

}


@media (max-width: 500px) {

    .header-logo img {

        max-width: 155px;

    }


    .main-nav {

        right: 0;
        left: 0;

        border-radius: 15px;

    }

}

/* =========================================================
   PŘEPÍNAČ JAZYKA
========================================================= */

.language-switcher {

    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 7px;

    margin-left: 10px;

    padding: 6px 9px;

    border: 1px solid rgba(7, 24, 45, 0.12);

    border-radius: 50px;

    background: rgba(255, 255, 255, 0.85);

}


.language-switcher a {

    display: flex;

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

    min-width: 27px;
    height: 27px;

    padding: 0 5px;

    color: var(--color-muted);

    border-radius: 50px;

    font-size: 10px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.05em;

    transition:
        color 0.2s ease,
        background 0.2s ease;

}


.language-switcher a:hover {

    color: var(--color-primary);

}


.language-switcher a.active {

    color: #ffffff;

    background: var(--color-primary);

}


.language-switcher > span {

    width: 1px;
    height: 13px;

    background: rgba(7, 24, 45, 0.14);

}


@media (max-width: 900px) {

    .language-switcher {

        margin-right: 4px;
        margin-left: auto;

    }


    .mobile-menu-button {

        margin-left: 4px;

    }

}


@media (max-width: 430px) {

    .language-switcher {

        gap: 4px;

        padding: 4px 6px;

    }


    .language-switcher a {

        min-width: 24px;
        height: 24px;

        font-size: 9px;

    }

}